Poles UI/UX premium: fondasi global
- Font Plus Jakarta Sans (Google Fonts) menggantikan font sistem default - Sidebar: brand area gradient + nama sekolah, nav aktif jadi pill gradient biru-indigo + chevron, label grup lebih elegan, footer badge NOCTKJ.net - Topbar: sticky + backdrop-blur glass - Background utama: gradient halus slate → biru samar - Kartu standar premium (.card) + tombol (.btn-primary/.btn-outline) + input seragam di CSS; kartu utama halaman diseragamkan rounded-2xl - Border global diselaraskan ke palet slate; scrollbar & seleksi teks premium - Verifikasi: 29 test / 99 assertion, blade cache OK, vite build OK
This commit is contained in:
Novy San87
@@ -70,7 +70,7 @@
|
||||
</div>
|
||||
|
||||
{{-- Daftar Backup --}}
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-sm">
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
@php
|
||||
$typeCount = $cat->violationTypes()->count();
|
||||
@endphp
|
||||
<div class="group bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200 @if(!$cat->is_active) opacity-60 @endif">
|
||||
<div class="group bg-white rounded-2xl shadow-sm border border-slate-200/80 hover:shadow-md transition-all duration-200 @if(!$cat->is_active) opacity-60 @endif">
|
||||
{{-- Color bar --}}
|
||||
<div class="h-2 rounded-t-xl" style="background-color: {{ $cat->color }}"></div>
|
||||
|
||||
@@ -64,7 +64,7 @@
|
||||
<div class="flex items-center justify-between pt-3 border-t border-gray-100">
|
||||
<div class="flex space-x-2">
|
||||
<button @click="openEdit({{ $cat->id }}, '{{ $cat->name }}', '{{ $cat->color }}', '{{ $cat->description }}', {{ $cat->sort_order }}, {{ json_encode(!$cat->is_active) }})"
|
||||
class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-gray-600 bg-gray-50 border border-gray-200 rounded-lg hover:bg-gray-100 hover:text-gray-900 transition">
|
||||
class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-gray-600 bg-gray-50 border border-slate-200 rounded-lg hover:bg-gray-100 hover:text-gray-900 transition">
|
||||
<svg class="w-3.5 h-3.5 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
||||
</svg>
|
||||
@@ -118,7 +118,7 @@
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-span-full">
|
||||
<div class="text-center py-12 bg-white rounded-xl border border-gray-200">
|
||||
<div class="text-center py-12 bg-white rounded-xl border border-slate-200">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-300 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"/>
|
||||
</svg>
|
||||
@@ -139,7 +139,7 @@
|
||||
|
||||
{{-- Panel --}}
|
||||
<div x-show="modalOpen"
|
||||
class="relative inline-block align-bottom bg-white rounded-2xl shadow-xl border border-gray-200 text-left overflow-hidden transform transition-all sm:align-middle sm:max-w-lg sm:w-full">
|
||||
class="relative inline-block align-bottom bg-white rounded-2xl shadow-xl border border-slate-200 text-left overflow-hidden transform transition-all sm:align-middle sm:max-w-lg sm:w-full">
|
||||
{{-- Header --}}
|
||||
<div class="px-6 py-5 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-3">
|
||||
@@ -184,7 +184,7 @@
|
||||
<input type="text" x-model="formColor" name="color"
|
||||
class="flex-1 px-4 py-2.5 border border-gray-300 rounded-xl text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition"
|
||||
placeholder="#22c55e">
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-xl border border-gray-200"
|
||||
<div class="flex-shrink-0 w-12 h-12 rounded-xl border border-slate-200"
|
||||
:style="{ backgroundColor: formColor }"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -220,7 +220,7 @@
|
||||
{{-- Preview --}}
|
||||
<div class="p-4 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<p class="text-xs font-medium text-gray-500 mb-2">Pratinjau</p>
|
||||
<div class="flex items-center space-x-2 p-2.5 bg-white rounded-lg border border-gray-200">
|
||||
<div class="flex items-center space-x-2 p-2.5 bg-white rounded-lg border border-slate-200">
|
||||
<span class="w-3 h-3 rounded-full flex-shrink-0" :style="{ backgroundColor: formColor }"></span>
|
||||
<span class="text-sm font-medium text-gray-900" x-text="formName || 'Nama Kategori'"></span>
|
||||
<span class="inline-flex items-center px-2 py-0.5 text-xs rounded-full font-medium"
|
||||
|
||||
@@ -103,7 +103,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<div x-data="typeReorder()" class="bg-white rounded-3xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div x-data="typeReorder()" class="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
<div class="px-6 py-4 border-b border-gray-100 flex flex-wrap items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-2 text-xs text-gray-400">
|
||||
<i class="fa-solid fa-grip-vertical text-gray-300"></i>
|
||||
@@ -164,7 +164,7 @@
|
||||
</td>
|
||||
<td class="px-5 py-4">
|
||||
<span class="inline-flex items-center gap-2 text-xs font-mono text-gray-500">
|
||||
<span class="w-5 h-5 rounded-full border border-gray-200 shadow-sm" :style="'background-color: ' + type.color"></span>
|
||||
<span class="w-5 h-5 rounded-full border border-slate-200 shadow-sm" :style="'background-color: ' + type.color"></span>
|
||||
<span x-text="type.color"></span>
|
||||
</span>
|
||||
</td>
|
||||
@@ -224,7 +224,7 @@
|
||||
</div>
|
||||
|
||||
{{-- Peran Penanganan --}}
|
||||
<div class="mt-6 bg-white rounded-3xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div class="mt-6 bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-2xl bg-gradient-to-br from-blue-500 to-sky-400 flex items-center justify-center shadow-sm">
|
||||
@@ -240,7 +240,7 @@
|
||||
<form action="{{ route('settings.handling-roles.store') }}" method="POST" class="flex flex-col sm:flex-row gap-3 mb-5">
|
||||
@csrf
|
||||
<input type="text" name="role" required maxlength="100" placeholder="Tambah peran baru..."
|
||||
class="flex-1 px-4 py-3 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition">
|
||||
class="flex-1 px-4 py-3 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition">
|
||||
<button type="submit"
|
||||
class="inline-flex items-center justify-center gap-2 px-5 py-3 text-sm font-bold text-white bg-gradient-to-r from-amber-500 to-orange-600 rounded-xl shadow-md shadow-orange-200 hover:brightness-105 transition active:scale-95">
|
||||
<i class="fa-solid fa-plus"></i> Tambah Peran
|
||||
@@ -312,7 +312,7 @@
|
||||
@dragenter.prevent
|
||||
@drop.prevent="drop(i)"
|
||||
@dragend="dragEnd()"
|
||||
class="flex items-center gap-3 rounded-2xl border border-gray-200 bg-gray-50/60 px-4 py-3 cursor-grab active:cursor-grabbing transition"
|
||||
class="flex items-center gap-3 rounded-2xl border border-slate-200 bg-gray-50/60 px-4 py-3 cursor-grab active:cursor-grabbing transition"
|
||||
:class="dragIndex === i ? 'opacity-40 bg-amber-50/40' : (dropTarget === i && dragIndex !== null ? 'ring-2 ring-inset ring-amber-300 bg-amber-50/30' : 'hover:bg-gray-50')">
|
||||
<i class="fa-solid fa-grip-vertical text-gray-300"></i>
|
||||
<div class="w-8 h-8 rounded-xl bg-gradient-to-br from-blue-500 to-sky-400 flex items-center justify-center text-white shadow-sm shrink-0">
|
||||
@@ -344,7 +344,7 @@
|
||||
class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
|
||||
<div class="flex items-center justify-center min-h-screen px-4 py-4">
|
||||
<div class="fixed inset-0 bg-gray-900/40 backdrop-blur-sm"></div>
|
||||
<div class="relative bg-white rounded-3xl shadow-2xl border border-gray-200 w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
|
||||
<div class="relative bg-white rounded-3xl shadow-2xl border border-slate-200 w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto">
|
||||
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between sticky top-0 bg-white z-10">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-2xl bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center shadow-sm">
|
||||
@@ -372,7 +372,7 @@
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Nama Jenis <span class="text-red-500">*</span></label>
|
||||
<input type="text" x-model="formName" name="name" required maxlength="255"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition"
|
||||
class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition"
|
||||
placeholder="contoh: Surat Panggilan">
|
||||
</div>
|
||||
|
||||
@@ -385,14 +385,14 @@
|
||||
<i :class="'fa-solid ' + formIcon" class="text-white text-sm"></i>
|
||||
</div>
|
||||
<input type="text" x-model="formIcon" name="icon" required
|
||||
class="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl text-sm font-mono bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition"
|
||||
class="flex-1 px-4 py-2.5 border border-slate-200 rounded-xl text-sm font-mono bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition"
|
||||
placeholder="fa-clipboard-list">
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<template x-for="ic in icons" :key="ic">
|
||||
<button type="button" @click="formIcon = ic"
|
||||
class="w-9 h-9 rounded-lg flex items-center justify-center border transition"
|
||||
:class="formIcon === ic ? 'border-amber-400 bg-amber-50 text-amber-600 shadow-sm' : 'border-gray-200 text-gray-400 hover:border-gray-300 hover:text-gray-600'">
|
||||
:class="formIcon === ic ? 'border-amber-400 bg-amber-50 text-amber-600 shadow-sm' : 'border-slate-200 text-gray-400 hover:border-gray-300 hover:text-gray-600'">
|
||||
<i :class="'fa-solid ' + ic" class="text-sm"></i>
|
||||
</button>
|
||||
</template>
|
||||
@@ -404,7 +404,7 @@
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Warna <span class="text-red-500">*</span></label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="color" x-model="formColor" name="color" required
|
||||
class="w-12 h-10 rounded-xl border border-gray-200 cursor-pointer bg-white p-1">
|
||||
class="w-12 h-10 rounded-xl border border-slate-200 cursor-pointer bg-white p-1">
|
||||
<div class="flex flex-wrap gap-1.5">
|
||||
<template x-for="c in colors" :key="c">
|
||||
<button type="button" @click="formColor = c"
|
||||
@@ -421,14 +421,14 @@
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Urutan</label>
|
||||
<input type="number" x-model="formSort" name="sort_order" min="0" max="999"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition">
|
||||
class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition">
|
||||
<p class="mt-1 text-[11px] text-gray-400">Angka kecil tampil lebih dulu di dropdown</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end gap-3 mt-6 pt-4 border-t border-gray-100">
|
||||
<button type="button" @click="showModal = false"
|
||||
class="px-5 py-2.5 text-sm font-semibold text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition">
|
||||
class="px-5 py-2.5 text-sm font-semibold text-gray-600 bg-white border border-slate-200 rounded-xl hover:bg-gray-50 transition">
|
||||
Batal
|
||||
</button>
|
||||
<button type="submit"
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4">
|
||||
<span class="inline-flex items-center px-2.5 py-1 text-[11px] font-semibold bg-gray-100 text-gray-600 rounded-lg border border-gray-200">
|
||||
<span class="inline-flex items-center px-2.5 py-1 text-[11px] font-semibold bg-gray-100 text-gray-600 rounded-lg border border-slate-200">
|
||||
{{ $class->department_name ?? '-' }}
|
||||
</span>
|
||||
</td>
|
||||
@@ -128,7 +128,7 @@
|
||||
<div class="relative flex-1 min-w-[220px]">
|
||||
<i class="fa-solid fa-chalkboard-user absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none"></i>
|
||||
<select name="teacher_id" x-model="teacherId"
|
||||
class="w-full pl-9 pr-8 py-2.5 border border-gray-200 rounded-xl text-sm bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 transition appearance-none shadow-sm">
|
||||
class="w-full pl-9 pr-8 py-2.5 border border-slate-200 rounded-xl text-sm bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 transition appearance-none shadow-sm">
|
||||
<option value="">— Belum ada —</option>
|
||||
@foreach($teachers as $t)
|
||||
<option value="{{ $t->id }}" @selected($class->homeroom_teacher_id === $t->id)>{{ $t->name }}</option>
|
||||
@@ -195,7 +195,7 @@
|
||||
<div class="relative">
|
||||
<i class="fa-solid fa-chalkboard-user absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-xs pointer-events-none"></i>
|
||||
<select name="teacher_id" x-model="teacherId"
|
||||
class="w-full pl-9 pr-8 py-2.5 border border-gray-200 rounded-xl text-sm bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 transition appearance-none shadow-sm">
|
||||
class="w-full pl-9 pr-8 py-2.5 border border-slate-200 rounded-xl text-sm bg-white focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-400 transition appearance-none shadow-sm">
|
||||
<option value="">— Belum ada —</option>
|
||||
@foreach($teachers as $t)
|
||||
<option value="{{ $t->id }}" @selected($class->homeroom_teacher_id === $t->id)>{{ $t->name }}</option>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<p class="text-sm text-gray-500">Informasi sekolah untuk kop surat</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200/80">
|
||||
<form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data" class="p-6 space-y-4">
|
||||
@csrf
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm file:mr-3 file:py-1 file:px-3 file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
|
||||
</div>
|
||||
|
||||
<hr class="border-gray-200">
|
||||
<hr class="border-slate-200">
|
||||
|
||||
{{-- ===== Kop Surat ===== --}}
|
||||
<div class="pt-2">
|
||||
@@ -99,13 +99,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="border-gray-200">
|
||||
<hr class="border-slate-200">
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Background Halaman Login</label>
|
||||
@if($settings->get('login_background')?->value)
|
||||
<div class="mb-2">
|
||||
<img src="{{ asset('storage/' . $settings->get('login_background')->value) }}" class="h-32 w-full object-cover rounded-lg border border-gray-200">
|
||||
<img src="{{ asset('storage/' . $settings->get('login_background')->value) }}" class="h-32 w-full object-cover rounded-lg border border-slate-200">
|
||||
</div>
|
||||
@endif
|
||||
<input type="file" name="login_background" accept="image/*"
|
||||
@@ -113,7 +113,7 @@
|
||||
<p class="text-xs text-gray-400 mt-1.5">Dimensi ideal: <strong class="text-gray-500">1200 × 800 px</strong> atau <strong class="text-gray-500">3:2</strong> (landscape). Maksimal <strong class="text-gray-500">2 MB</strong>. Format JPG/PNG/WebP.</p>
|
||||
</div>
|
||||
|
||||
<hr class="border-gray-200">
|
||||
<hr class="border-slate-200">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
@@ -128,7 +128,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="border-gray-200">
|
||||
<hr class="border-slate-200">
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Template Notifikasi WhatsApp Orang Tua</label>
|
||||
@@ -145,7 +145,7 @@
|
||||
</div>
|
||||
|
||||
{{-- Backup Database Card --}}
|
||||
<div class="mt-6 bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div class="mt-6 bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-sm">
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
];
|
||||
$gl = $groupLabels[$group] ?? [ucfirst($group), 'fa-circle', 'gray'];
|
||||
@endphp
|
||||
<div class="rounded-2xl bg-white border border-gray-200 shadow-sm overflow-hidden transition-all duration-200 hover:shadow-md">
|
||||
<div class="rounded-2xl bg-white border border-slate-200 shadow-sm overflow-hidden transition-all duration-200 hover:shadow-md">
|
||||
{{-- Group header --}}
|
||||
<div class="px-5 py-3.5 bg-gradient-to-r from-{{ $gl[2] }}-50 to-white border-b border-gray-100">
|
||||
<div class="flex items-center gap-2.5">
|
||||
@@ -142,7 +142,7 @@
|
||||
</div>
|
||||
|
||||
{{-- Bottom bar --}}
|
||||
<div class="mt-8 rounded-2xl bg-gradient-to-br from-white to-gray-50/50 border border-gray-200 shadow-sm p-5">
|
||||
<div class="mt-8 rounded-2xl bg-gradient-to-br from-white to-gray-50/50 border border-slate-200 shadow-sm p-5">
|
||||
<div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
|
||||
<div class="flex items-center gap-3 text-xs text-gray-400">
|
||||
<div class="w-8 h-8 rounded-lg bg-blue-50 border border-blue-200 flex items-center justify-center">
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
@csrf
|
||||
|
||||
{{-- Selectable Data Cards --}}
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden mb-6">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden mb-6">
|
||||
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-lg bg-red-50 flex items-center justify-center">
|
||||
@@ -68,7 +68,7 @@
|
||||
<div class="p-5">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
|
||||
{{-- Presensi --}}
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-gray-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-orange-300 has-[:checked]:bg-orange-50/50 transition-all select-none">
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-slate-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-orange-300 has-[:checked]:bg-orange-50/50 transition-all select-none">
|
||||
<input type="checkbox" name="reset_items[]" value="attendances" class="reset-checkbox mt-0.5 w-4 h-4 rounded border-gray-300 text-orange-500 focus:ring-orange-400 focus:ring-offset-0 flex-shrink-0">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">Presensi</p>
|
||||
@@ -77,7 +77,7 @@
|
||||
</label>
|
||||
|
||||
{{-- Pelanggaran & Evidences --}}
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-gray-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-red-300 has-[:checked]:bg-red-50/50 transition-all select-none">
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-slate-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-red-300 has-[:checked]:bg-red-50/50 transition-all select-none">
|
||||
<input type="checkbox" name="reset_items[]" value="violations" class="reset-checkbox mt-0.5 w-4 h-4 rounded border-gray-300 text-red-500 focus:ring-red-400 focus:ring-offset-0 flex-shrink-0">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">Pelanggaran</p>
|
||||
@@ -85,7 +85,7 @@
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-gray-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-red-300 has-[:checked]:bg-red-50/50 transition-all select-none">
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-slate-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-red-300 has-[:checked]:bg-red-50/50 transition-all select-none">
|
||||
<input type="checkbox" name="reset_items[]" value="evidences" class="reset-checkbox mt-0.5 w-4 h-4 rounded border-gray-300 text-red-500 focus:ring-red-400 focus:ring-offset-0 flex-shrink-0">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">Foto Bukti</p>
|
||||
@@ -94,7 +94,7 @@
|
||||
</label>
|
||||
|
||||
{{-- Surat Peringatan --}}
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-gray-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-red-300 has-[:checked]:bg-red-50/50 transition-all select-none">
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-slate-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-red-300 has-[:checked]:bg-red-50/50 transition-all select-none">
|
||||
<input type="checkbox" name="reset_items[]" value="sp_letters" class="reset-checkbox mt-0.5 w-4 h-4 rounded border-gray-300 text-red-500 focus:ring-red-400 focus:ring-offset-0 flex-shrink-0">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">Surat Peringatan</p>
|
||||
@@ -103,7 +103,7 @@
|
||||
</label>
|
||||
|
||||
{{-- Notifikasi --}}
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-gray-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-red-300 has-[:checked]:bg-red-50/50 transition-all select-none">
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-slate-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-red-300 has-[:checked]:bg-red-50/50 transition-all select-none">
|
||||
<input type="checkbox" name="reset_items[]" value="notifications" class="reset-checkbox mt-0.5 w-4 h-4 rounded border-gray-300 text-red-500 focus:ring-red-400 focus:ring-offset-0 flex-shrink-0">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">Notifikasi</p>
|
||||
@@ -112,7 +112,7 @@
|
||||
</label>
|
||||
|
||||
{{-- Data Siswa --}}
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-gray-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-red-300 has-[:checked]:bg-red-50/50 transition-all select-none">
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-slate-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-red-300 has-[:checked]:bg-red-50/50 transition-all select-none">
|
||||
<input type="checkbox" name="reset_items[]" value="students" class="reset-checkbox mt-0.5 w-4 h-4 rounded border-gray-300 text-red-500 focus:ring-red-400 focus:ring-offset-0 flex-shrink-0">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">Siswa</p>
|
||||
@@ -121,7 +121,7 @@
|
||||
</label>
|
||||
|
||||
{{-- Kelas --}}
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-gray-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-red-300 has-[:checked]:bg-red-50/50 transition-all select-none">
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-slate-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-red-300 has-[:checked]:bg-red-50/50 transition-all select-none">
|
||||
<input type="checkbox" name="reset_items[]" value="classes" class="reset-checkbox mt-0.5 w-4 h-4 rounded border-gray-300 text-red-500 focus:ring-red-400 focus:ring-offset-0 flex-shrink-0">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">Kelas</p>
|
||||
@@ -130,7 +130,7 @@
|
||||
</label>
|
||||
|
||||
{{-- Kategori Pelanggaran --}}
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-gray-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-orange-300 has-[:checked]:bg-orange-50/50 transition-all select-none">
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-slate-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-orange-300 has-[:checked]:bg-orange-50/50 transition-all select-none">
|
||||
<input type="checkbox" name="reset_items[]" value="categories" class="reset-checkbox mt-0.5 w-4 h-4 rounded border-gray-300 text-orange-500 focus:ring-orange-400 focus:ring-offset-0 flex-shrink-0">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">Kategori Pelanggaran</p>
|
||||
@@ -140,7 +140,7 @@
|
||||
</label>
|
||||
|
||||
{{-- Jenis Pelanggaran --}}
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-gray-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-orange-300 has-[:checked]:bg-orange-50/50 transition-all select-none">
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-slate-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-orange-300 has-[:checked]:bg-orange-50/50 transition-all select-none">
|
||||
<input type="checkbox" name="reset_items[]" value="types" class="reset-checkbox mt-0.5 w-4 h-4 rounded border-gray-300 text-orange-500 focus:ring-orange-400 focus:ring-offset-0 flex-shrink-0">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">Jenis Pelanggaran</p>
|
||||
@@ -149,7 +149,7 @@
|
||||
</label>
|
||||
|
||||
{{-- Ambang SP --}}
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-gray-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-orange-300 has-[:checked]:bg-orange-50/50 transition-all select-none">
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-slate-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-orange-300 has-[:checked]:bg-orange-50/50 transition-all select-none">
|
||||
<input type="checkbox" name="reset_items[]" value="thresholds" class="reset-checkbox mt-0.5 w-4 h-4 rounded border-gray-300 text-orange-500 focus:ring-orange-400 focus:ring-offset-0 flex-shrink-0">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">Ambang SP</p>
|
||||
@@ -159,7 +159,7 @@
|
||||
</label>
|
||||
|
||||
{{-- Pengaturan --}}
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-gray-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-purple-300 has-[:checked]:bg-purple-50/50 transition-all select-none">
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-slate-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-purple-300 has-[:checked]:bg-purple-50/50 transition-all select-none">
|
||||
<input type="checkbox" name="reset_items[]" value="settings" class="reset-checkbox mt-0.5 w-4 h-4 rounded border-gray-300 text-purple-500 focus:ring-purple-400 focus:ring-offset-0 flex-shrink-0">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">Pengaturan</p>
|
||||
@@ -169,7 +169,7 @@
|
||||
</label>
|
||||
|
||||
{{-- Penanganan --}}
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-gray-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-amber-300 has-[:checked]:bg-amber-50/50 transition-all select-none">
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-slate-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-amber-300 has-[:checked]:bg-amber-50/50 transition-all select-none">
|
||||
<input type="checkbox" name="reset_items[]" value="handlings" class="reset-checkbox mt-0.5 w-4 h-4 rounded border-gray-300 text-amber-500 focus:ring-amber-400 focus:ring-offset-0 flex-shrink-0">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">Riwayat Penanganan</p>
|
||||
@@ -179,7 +179,7 @@
|
||||
</label>
|
||||
|
||||
{{-- Backup Files --}}
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-gray-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-sky-300 has-[:checked]:bg-sky-50/50 transition-all select-none">
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-slate-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-sky-300 has-[:checked]:bg-sky-50/50 transition-all select-none">
|
||||
<input type="checkbox" name="reset_items[]" value="backups" class="reset-checkbox mt-0.5 w-4 h-4 rounded border-gray-300 text-sky-500 focus:ring-sky-400 focus:ring-offset-0 flex-shrink-0">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">File Backup</p>
|
||||
@@ -189,7 +189,7 @@
|
||||
</label>
|
||||
|
||||
{{-- User Lain --}}
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-gray-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-red-300 has-[:checked]:bg-red-50/50 transition-all select-none">
|
||||
<label class="reset-card relative flex items-start gap-3 p-4 rounded-xl border border-slate-200 cursor-pointer hover:border-gray-300 has-[:checked]:border-red-300 has-[:checked]:bg-red-50/50 transition-all select-none">
|
||||
<input type="checkbox" name="reset_items[]" value="users" class="reset-checkbox mt-0.5 w-4 h-4 rounded border-gray-300 text-red-500 focus:ring-red-400 focus:ring-offset-0 flex-shrink-0">
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-gray-900">User Lain</p>
|
||||
@@ -201,7 +201,7 @@
|
||||
</div>
|
||||
|
||||
{{-- Confirm Form --}}
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
<div class="px-6 py-4 border-b border-gray-100">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<div class="w-8 h-8 rounded-lg bg-gray-50 flex items-center justify-center">
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
</div>
|
||||
|
||||
{{-- Sync Database Kesiswaan --}}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200/80">
|
||||
<form action="{{ route('settings.sync.run') }}" method="POST" class="p-6 space-y-5">
|
||||
@csrf
|
||||
|
||||
@@ -34,7 +34,7 @@
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1.5">Token Sinkronisasi</label>
|
||||
@if($hasToken)
|
||||
<div class="flex items-center gap-2" id="kesiswaan-token-row">
|
||||
<code class="flex-1 block bg-gray-50 border border-gray-200 rounded-lg px-3 py-2.5 text-sm font-mono text-gray-800 select-all" id="kesiswaanTokenDisplay">{{ $savedToken }}</code>
|
||||
<code class="flex-1 block bg-gray-50 border border-slate-200 rounded-lg px-3 py-2.5 text-sm font-mono text-gray-800 select-all" id="kesiswaanTokenDisplay">{{ $savedToken }}</code>
|
||||
<button type="button" onclick="copyKesiswaanToken()"
|
||||
class="shrink-0 px-3 py-2 text-xs font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition">
|
||||
<i class="fa-regular fa-copy"></i> Salin
|
||||
@@ -114,7 +114,7 @@
|
||||
|
||||
{{-- E-Jurnal Sync Token --}}
|
||||
<div class="mt-8"></div>
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 mt-4">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200/80 mt-4">
|
||||
<div class="p-6 space-y-5">
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold text-gray-900">Sinkronisasi Presensi E-Jurnal</h2>
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
|
||||
@foreach($thresholds as $t)
|
||||
<input type="hidden" name="thresholds[{{ $loop->index }}][id]" value="{{ $t->id }}">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden transition hover:shadow-md">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden transition hover:shadow-md">
|
||||
<div class="flex items-stretch">
|
||||
{{-- Left color bar --}}
|
||||
<div class="w-[5px] flex-shrink-0" style="background-color: {{ $t->color }}"></div>
|
||||
@@ -75,17 +75,17 @@
|
||||
<div>
|
||||
<label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1">Nama</label>
|
||||
<input type="text" name="thresholds[{{ $loop->index }}][name]" value="{{ $t->name }}"
|
||||
class="w-full px-3.5 py-2 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
class="w-full px-3.5 py-2 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1">Min Poin</label>
|
||||
<input type="number" name="thresholds[{{ $loop->index }}][min_points]" value="{{ $t->min_points }}" min="0"
|
||||
class="w-full px-3.5 py-2 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
class="w-full px-3.5 py-2 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-[11px] font-semibold text-gray-400 uppercase tracking-wider mb-1">Deskripsi</label>
|
||||
<input type="text" name="thresholds[{{ $loop->index }}][default_description]" value="{{ $t->default_description }}"
|
||||
class="w-full px-3.5 py-2 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
class="w-full px-3.5 py-2 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -101,7 +101,7 @@
|
||||
</form>
|
||||
@else
|
||||
{{-- Empty state --}}
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 py-12 text-center">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 py-12 text-center">
|
||||
<div class="w-16 h-16 rounded-2xl bg-gray-50 border border-gray-100 flex items-center justify-center mx-auto mb-4">
|
||||
<i class="fa-solid fa-chart-bar text-gray-300 text-2xl"></i>
|
||||
</div>
|
||||
@@ -128,7 +128,7 @@
|
||||
class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
|
||||
<div class="flex items-center justify-center min-h-screen px-4 py-4">
|
||||
<div class="fixed inset-0 bg-gray-900/40 backdrop-blur-sm"></div>
|
||||
<div class="relative bg-white rounded-2xl shadow-xl border border-gray-200 w-full max-w-lg mx-4">
|
||||
<div class="relative bg-white rounded-2xl shadow-xl border border-slate-200 w-full max-w-lg mx-4">
|
||||
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-sm">
|
||||
@@ -150,30 +150,30 @@
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Nama Threshold <span class="text-red-500">*</span></label>
|
||||
<input type="text" name="name" placeholder="SP 4, SP 5, dll" required
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Minimal Poin <span class="text-red-500">*</span></label>
|
||||
<input type="number" name="min_points" min="0" value="200" required
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Deskripsi</label>
|
||||
<input type="text" name="default_description" placeholder="Contoh: SP 4 — poin mencapai 200"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-gray-700 mb-1">Warna</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<input type="color" name="color" value="#8b5cf6"
|
||||
class="w-10 h-10 rounded-lg border border-gray-200 cursor-pointer p-0.5">
|
||||
class="w-10 h-10 rounded-lg border border-slate-200 cursor-pointer p-0.5">
|
||||
<span class="text-xs text-gray-400">Pilih warna identitas threshold</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-3 mt-6 pt-4 border-t border-gray-100">
|
||||
<button type="button" @click="open = false"
|
||||
class="px-5 py-2.5 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition">
|
||||
class="px-5 py-2.5 text-sm font-medium text-gray-600 bg-white border border-slate-200 rounded-xl hover:bg-gray-50 transition">
|
||||
Batal
|
||||
</button>
|
||||
<button type="submit"
|
||||
|
||||
@@ -12,12 +12,12 @@
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<a href="{{ route('settings.import.template') }}"
|
||||
class="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition shadow-sm">
|
||||
class="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-gray-600 bg-white border border-slate-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition shadow-sm">
|
||||
<i class="fa-solid fa-file-import text-xs"></i>
|
||||
<span class="hidden sm:inline">Download Template</span>
|
||||
</a>
|
||||
<a href="{{ route('settings.export.violation-types') }}"
|
||||
class="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition shadow-sm">
|
||||
class="inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium text-gray-600 bg-white border border-slate-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition shadow-sm">
|
||||
<i class="fa-solid fa-file-export text-xs"></i>
|
||||
<span class="hidden sm:inline">Export Excel</span>
|
||||
</a>
|
||||
@@ -35,17 +35,17 @@
|
||||
</div>
|
||||
|
||||
{{-- Filter & Search --}}
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 mb-6">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 mb-6">
|
||||
<form method="GET" class="p-5">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<div class="relative">
|
||||
<i class="fa-solid fa-magnifying-glass absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i>
|
||||
<input type="text" name="search" value="{{ request('search') }}"
|
||||
placeholder="Cari jenis pelanggaran..."
|
||||
class="w-full pl-9 pr-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
class="w-full pl-9 pr-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<select name="category_id"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
<option value="">Semua Kategori</option>
|
||||
@foreach($categories as $cat)
|
||||
<option value="{{ $cat->id }}" @selected(request('category_id') == $cat->id)>
|
||||
@@ -60,7 +60,7 @@
|
||||
</button>
|
||||
@if(request()->anyFilled(['search','category_id']))
|
||||
<a href="{{ route('settings.violation-types') }}"
|
||||
class="px-4 py-2.5 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition">
|
||||
class="px-4 py-2.5 text-sm font-medium text-gray-600 bg-white border border-slate-200 rounded-xl hover:bg-gray-50 transition">
|
||||
<i class="fa-solid fa-xmark mr-1"></i>Reset
|
||||
</a>
|
||||
@endif
|
||||
@@ -70,7 +70,7 @@
|
||||
</div>
|
||||
|
||||
{{-- Table --}}
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-100">
|
||||
<thead>
|
||||
@@ -120,7 +120,7 @@
|
||||
Aktif
|
||||
</span>
|
||||
@else
|
||||
<span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-gray-100 text-gray-500 border border-gray-200 rounded-full">
|
||||
<span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-gray-100 text-gray-500 border border-slate-200 rounded-full">
|
||||
<span class="w-1.5 h-1.5 bg-gray-400 rounded-full"></span>
|
||||
Nonaktif
|
||||
</span>
|
||||
@@ -215,7 +215,7 @@
|
||||
<div x-show="modalOpen" class="fixed inset-0 bg-gray-900/40 backdrop-blur-sm"></div>
|
||||
|
||||
<div x-show="modalOpen"
|
||||
class="relative inline-block align-bottom bg-white rounded-2xl shadow-xl border border-gray-200 text-left overflow-hidden transform transition-all sm:align-middle sm:max-w-xl sm:w-full">
|
||||
class="relative inline-block align-bottom bg-white rounded-2xl shadow-xl border border-slate-200 text-left overflow-hidden transform transition-all sm:align-middle sm:max-w-xl sm:w-full">
|
||||
{{-- Header --}}
|
||||
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -244,7 +244,7 @@
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1.5">Kategori <span class="text-red-500">*</span></label>
|
||||
<select x-model="formCategory" @change="updateCategoryColor(formCategory)" name="category_id" required
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
<option value="">-- Pilih Kategori --</option>
|
||||
@foreach($categories as $cat)
|
||||
<option value="{{ $cat->id }}">{{ $cat->name }}</option>
|
||||
@@ -255,7 +255,7 @@
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1.5">Nama Pelanggaran <span class="text-red-500">*</span></label>
|
||||
<input type="text" x-model="formName" name="name" required
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition"
|
||||
class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition"
|
||||
placeholder="Contoh: Terlambat datang ke sekolah">
|
||||
</div>
|
||||
</div>
|
||||
@@ -265,14 +265,14 @@
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1.5">Poin <span class="text-red-500">*</span></label>
|
||||
<input type="number" x-model="formPoints" name="points" required min="0" max="500"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
<p class="text-xs text-gray-400 mt-1">Poin pelanggaran (1–500)</p>
|
||||
</div>
|
||||
{{-- Sanksi --}}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1.5">Sanksi Default</label>
|
||||
<input type="text" x-model="formSanction" name="default_sanction"
|
||||
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition"
|
||||
class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition"
|
||||
placeholder="Contoh: Teguran lisan">
|
||||
<p class="text-xs text-gray-400 mt-1">Sanksi yang muncul saat input pelanggaran</p>
|
||||
</div>
|
||||
@@ -293,7 +293,7 @@
|
||||
{{-- Preview --}}
|
||||
<div class="p-4 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Pratinjau</p>
|
||||
<div class="flex items-center justify-between p-3 bg-white rounded-lg border border-gray-200">
|
||||
<div class="flex items-center justify-between p-3 bg-white rounded-lg border border-slate-200">
|
||||
<div class="flex items-center gap-2.5 min-w-0">
|
||||
<span class="w-2.5 h-2.5 rounded-full flex-shrink-0" :style="{ backgroundColor: categoryColor }"></span>
|
||||
<span class="text-sm font-medium text-gray-900 truncate" x-text="formName || 'Nama Pelanggaran'"></span>
|
||||
@@ -306,7 +306,7 @@
|
||||
{{-- Buttons --}}
|
||||
<div class="flex justify-end gap-3 pt-2 border-t border-gray-100">
|
||||
<button type="button" @click="modalOpen = false"
|
||||
class="px-5 py-2.5 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition">
|
||||
class="px-5 py-2.5 text-sm font-medium text-gray-600 bg-white border border-slate-200 rounded-xl hover:bg-gray-50 transition">
|
||||
Batal
|
||||
</button>
|
||||
<button type="submit"
|
||||
@@ -324,7 +324,7 @@
|
||||
<div id="import-modal" style="display: none;"
|
||||
class="fixed inset-0 z-50 flex-col items-center justify-center bg-gray-900/40 backdrop-blur-sm"
|
||||
tabindex="0">
|
||||
<div class="bg-white rounded-2xl shadow-2xl border border-gray-200 w-full max-w-lg mx-4 overflow-hidden">
|
||||
<div class="bg-white rounded-2xl shadow-2xl border border-slate-200 w-full max-w-lg mx-4 overflow-hidden">
|
||||
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center">
|
||||
@@ -348,7 +348,7 @@
|
||||
<p class="text-xs text-gray-400">Format kolom: <strong>Kategori</strong> • <strong>Nama Pelanggaran</strong> • <strong>Poin</strong> • <strong>Sanksi Default</strong> • <strong>Deskripsi</strong></p>
|
||||
</div>
|
||||
|
||||
<label class="flex flex-col items-center justify-center h-36 border-2 border-dashed border-gray-200 rounded-xl cursor-pointer hover:border-blue-300 hover:bg-blue-50/30 transition"
|
||||
<label class="flex flex-col items-center justify-center h-36 border-2 border-dashed border-slate-200 rounded-xl cursor-pointer hover:border-blue-300 hover:bg-blue-50/30 transition"
|
||||
x-data="{ fileName: '' }"
|
||||
@dragover.prevent="$el.classList.add('border-blue-400', 'bg-blue-50/50')"
|
||||
@dragleave.prevent="$el.classList.remove('border-blue-400', 'bg-blue-50/50')"
|
||||
@@ -380,7 +380,7 @@
|
||||
</a>
|
||||
<div class="flex items-center gap-2">
|
||||
<button type="button" onclick="document.getElementById('import-modal').style.display='none'"
|
||||
class="px-4 py-2 text-sm font-medium text-gray-600 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
|
||||
class="px-4 py-2 text-sm font-medium text-gray-600 border border-slate-200 rounded-lg hover:bg-gray-50 transition">
|
||||
Batal
|
||||
</button>
|
||||
<button type="submit"
|
||||
|
||||
Reference in New Issue
Block a user