novy/aplikasi-ketertiban
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Poles halaman Jenis Pelanggaran premium

Browse Source 
- Header: tombol Download/Export/Import btn-outline, Tambah btn-primary
- Filter: input .input, tombol Filter/Reset sistem
- Tabel: thead slate, kategori jadi pill warna, poin +icon bolt, aksi
  pill Edit/Nonaktifkan/Aktifkan konsisten, badge Sistem + x-tooltip,
  empty state gradient
- Modal CRUD & Import: header gradient biru-indigo, .input seragam,
  toggle iOS + glow, tombol btn
This commit is contained in:
Novy San87
2026-08-03 18:23:04 +07:00
parent d6fa338921
commit 4dce2ad1d3
1 changed files with 88 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/settings/violation-types.blade.php
+88 -83
View File
@@ -7,27 +7,27 @@
{{-- Header --}} {{-- Header --}}
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div> <div>
<h1 class="text-2xl font-bold text-gray-900">Jenis Pelanggaran</h1> <h1 class="text-2xl font-extrabold text-slate-900 tracking-tight">Jenis Pelanggaran</h1>
<p class="text-sm text-gray-500 mt-1">Daftar jenis pelanggaran beserta poin dan sanksi default</p> <p class="text-sm text-slate-500 mt-1">Daftar jenis pelanggaran beserta poin dan sanksi default</p>
</div> </div>
<div class="flex flex-wrap items-center gap-2"> <div class="flex flex-wrap items-center gap-2">
<a href="{{ route('settings.import.template') }}" <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-slate-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition shadow-sm"> class="btn-outline">
<i class="fa-solid fa-file-import text-xs"></i> <i class="fa-solid fa-file-import text-xs"></i>
<span class="hidden sm:inline">Download Template</span> <span class="hidden sm:inline">Download Template</span>
</a> </a>
<a href="{{ route('settings.export.violation-types') }}" <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-slate-200 rounded-lg hover:bg-gray-50 hover:border-gray-300 transition shadow-sm"> class="btn-outline">
<i class="fa-solid fa-file-export text-xs"></i> <i class="fa-solid fa-file-export text-xs"></i>
<span class="hidden sm:inline">Export Excel</span> <span class="hidden sm:inline">Export Excel</span>
</a> </a>
<button onclick="document.getElementById('import-modal').style.display='flex'" <button onclick="document.getElementById('import-modal').style.display='flex'"
class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition shadow-sm"> class="btn-outline">
<i class="fa-solid fa-download text-xs"></i> <i class="fa-solid fa-download text-xs"></i>
<span>Import Excel</span> <span>Import Excel</span>
</button> </button>
<button @click="openCreate()" <button @click="openCreate()"
class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition shadow-sm"> class="btn-primary">
<i class="fa-solid fa-plus text-xs"></i> <i class="fa-solid fa-plus text-xs"></i>
<span>Tambah Jenis</span> <span>Tambah Jenis</span>
</button> </button>
@@ -42,10 +42,10 @@
<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> <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') }}" <input type="text" name="search" value="{{ request('search') }}"
placeholder="Cari jenis pelanggaran..." placeholder="Cari jenis pelanggaran..."
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"> class="input pl-9">
</div> </div>
<select name="category_id" <select name="category_id"
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"> class="input">
<option value="">Semua Kategori</option> <option value="">Semua Kategori</option>
@foreach($categories as $cat) @foreach($categories as $cat)
<option value="{{ $cat->id }}" @selected(request('category_id') == $cat->id)> <option value="{{ $cat->id }}" @selected(request('category_id') == $cat->id)>
@@ -55,13 +55,13 @@
</select> </select>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button type="submit" <button type="submit"
class="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition shadow-sm"> class="flex-1 btn-primary justify-center">
<i class="fa-solid fa-filter mr-1.5"></i>Filter <i class="fa-solid fa-filter text-xs"></i>Filter
</button> </button>
@if(request()->anyFilled(['search','category_id'])) @if(request()->anyFilled(['search','category_id']))
<a href="{{ route('settings.violation-types') }}" <a href="{{ route('settings.violation-types') }}"
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"> class="btn-outline">
<i class="fa-solid fa-xmark mr-1"></i>Reset <i class="fa-solid fa-xmark"></i>Reset
</a> </a>
@endif @endif
</div> </div>
@@ -74,37 +74,41 @@
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-100"> <table class="min-w-full divide-y divide-gray-100">
<thead> <thead>
<tr class="bg-gray-50/80"> <tr class="bg-slate-50/90">
<th class="px-5 py-3.5 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Kategori</th> <th class="px-5 py-3.5 text-left text-xs font-bold text-slate-400 uppercase tracking-[0.12em]">Kategori</th>
<th class="px-5 py-3.5 text-left text-xs font-semibold text-gray-400 uppercase tracking-wider">Nama Pelanggaran</th> <th class="px-5 py-3.5 text-left text-xs font-bold text-slate-400 uppercase tracking-[0.12em]">Nama Pelanggaran</th>
<th class="px-5 py-3.5 text-center text-xs font-semibold text-gray-400 uppercase tracking-wider">Poin</th> <th class="px-5 py-3.5 text-center text-xs font-bold text-slate-400 uppercase tracking-[0.12em]">Poin</th>
<th class="px-5 py-3.5 text-left hidden lg:table-cell text-xs font-semibold text-gray-400 uppercase tracking-wider">Sanksi Default</th> <th class="px-5 py-3.5 text-left hidden lg:table-cell text-xs font-bold text-slate-400 uppercase tracking-[0.12em]">Sanksi Default</th>
<th class="px-5 py-3.5 text-center text-xs font-semibold text-gray-400 uppercase tracking-wider">Status</th> <th class="px-5 py-3.5 text-center text-xs font-bold text-slate-400 uppercase tracking-[0.12em]">Status</th>
<th class="px-5 py-3.5 text-right text-xs font-semibold text-gray-400 uppercase tracking-wider">Aksi</th> <th class="px-5 py-3.5 text-right text-xs font-bold text-slate-400 uppercase tracking-[0.12em]">Aksi</th>
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-50"> <tbody class="divide-y divide-slate-50">
@forelse($types as $type) @forelse($types as $type)
<tr class="hover:bg-gray-50/50 transition {{ !$type->is_active ? 'opacity-50' : '' }}"> <tr class="hover:bg-slate-50/60 transition {{ !$type->is_active ? 'opacity-50' : '' }}">
<td class="px-5 py-4 whitespace-nowrap"> <td class="px-5 py-4 whitespace-nowrap">
<div class="flex items-center gap-2.5"> @if($type->category)
<span class="w-2.5 h-2.5 rounded-full flex-shrink-0" style="background-color: {{ $type->category?->color ?? '#6b7280' }}"></span> <span class="inline-flex items-center gap-1.5 px-2.5 py-1 text-xs font-bold rounded-lg"
<span class="text-sm font-medium" style="color: {{ $type->category?->color ?? '#6b7280' }}"> style="background-color: {{ $type->category->color }}14; color: {{ $type->category->color }}">
{{ $type->category?->name ?? '-' }} <span class="w-1.5 h-1.5 rounded-full" style="background-color: {{ $type->category->color }}"></span>
{{ $type->category->name }}
</span> </span>
</div> @else
<span class="text-sm text-gray-400">—</span>
@endif
</td> </td>
<td class="px-5 py-4"> <td class="px-5 py-4">
<span class="text-sm font-medium text-gray-900 {{ !$type->is_active ? 'line-through text-gray-400' : '' }}"> <span class="text-sm font-semibold text-slate-900 {{ !$type->is_active ? 'line-through text-slate-400' : '' }}">
{{ $type->name }} {{ $type->name }}
</span> </span>
</td> </td>
<td class="px-5 py-4 text-center whitespace-nowrap"> <td class="px-5 py-4 text-center whitespace-nowrap">
<span class="inline-flex items-center px-2.5 py-1 text-xs font-bold rounded-lg <span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-extrabold rounded-lg
@if($type->points >= 50) bg-red-50 text-red-700 @if($type->points >= 50) bg-red-50 text-red-700
@elseif($type->points >= 15) bg-yellow-50 text-yellow-700 @elseif($type->points >= 15) bg-yellow-50 text-yellow-700
@else bg-green-50 text-green-700 @else bg-green-50 text-green-700
@endif"> @endif">
<i class="fa-solid fa-bolt text-[9px]"></i>
+{{ $type->points }} +{{ $type->points }}
</span> </span>
</td> </td>
@@ -129,8 +133,8 @@
<td class="px-5 py-4 text-right whitespace-nowrap"> <td class="px-5 py-4 text-right whitespace-nowrap">
<div class="flex items-center justify-end gap-1.5"> <div class="flex items-center justify-end gap-1.5">
<button @click="openEdit({{ $type->id }}, {{ $type->category_id }}, '{{ addslashes($type->name) }}', {{ $type->points }}, '{{ addslashes($type->default_sanction ?? '') }}', {{ $type->is_active ? 'true' : 'false' }})" <button @click="openEdit({{ $type->id }}, {{ $type->category_id }}, '{{ addslashes($type->name) }}', {{ $type->points }}, '{{ addslashes($type->default_sanction ?? '') }}', {{ $type->is_active ? 'true' : 'false' }})"
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition"> class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-slate-600 bg-slate-50 border border-slate-200 rounded-lg hover:text-blue-600 hover:border-blue-200 hover:bg-blue-50 transition">
<i class="fa-solid fa-pen-to-square"></i> <i class="fa-solid fa-pen text-[10px]"></i>
<span class="hidden sm:inline">Edit</span> <span class="hidden sm:inline">Edit</span>
</button> </button>
@if($type->is_active) @if($type->is_active)
@@ -142,8 +146,8 @@
<input type="hidden" name="default_sanction" value="{{ $type->default_sanction }}"> <input type="hidden" name="default_sanction" value="{{ $type->default_sanction }}">
<input type="hidden" name="is_active" value="0"> <input type="hidden" name="is_active" value="0">
<button type="submit" <button type="submit"
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-yellow-600 bg-yellow-50 border border-yellow-200 rounded-lg hover:bg-yellow-100 transition"> class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-amber-600 bg-amber-50 border border-amber-200 rounded-lg hover:bg-amber-100 transition">
<i class="fa-solid fa-ban"></i> <i class="fa-solid fa-pause text-[10px]"></i>
<span class="hidden sm:inline">Nonaktifkan</span> <span class="hidden sm:inline">Nonaktifkan</span>
</button> </button>
</form> </form>
@@ -156,8 +160,8 @@
<input type="hidden" name="default_sanction" value="{{ $type->default_sanction }}"> <input type="hidden" name="default_sanction" value="{{ $type->default_sanction }}">
<input type="hidden" name="is_active" value="1"> <input type="hidden" name="is_active" value="1">
<button type="submit" <button type="submit"
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-green-600 bg-green-50 border border-green-200 rounded-lg hover:bg-green-100 transition"> class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-emerald-600 bg-emerald-50 border border-emerald-200 rounded-lg hover:bg-emerald-100 transition">
<i class="fa-solid fa-check"></i> <i class="fa-solid fa-play text-[10px]"></i>
<span class="hidden sm:inline">Aktifkan</span> <span class="hidden sm:inline">Aktifkan</span>
</button> </button>
</form> </form>
@@ -167,12 +171,13 @@
x-data x-on:submit.prevent="if(await window.confirmSwal({text:'Hapus jenis pelanggaran ini?'})) $el.submit()"> x-data x-on:submit.prevent="if(await window.confirmSwal({text:'Hapus jenis pelanggaran ini?'})) $el.submit()">
@csrf @method('DELETE') @csrf @method('DELETE')
<button type="submit" <button type="submit"
class="inline-flex items-center justify-center w-8 h-8 text-xs font-medium text-red-500 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 transition"> class="inline-flex items-center justify-center w-8 h-8 text-red-500 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 transition"
title="Hapus">
<i class="fa-solid fa-trash-can text-xs"></i> <i class="fa-solid fa-trash-can text-xs"></i>
</button> </button>
</form> </form>
@else @else
<span class="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-lg"> <span class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-semibold text-blue-600 bg-blue-50 border border-blue-200 rounded-lg" x-tooltip="'Jenis pelanggaran bawaan sistem — tidak bisa dihapus'">
<i class="fa-solid fa-lock text-[10px]"></i> <i class="fa-solid fa-lock text-[10px]"></i>
<span class="hidden sm:inline">Sistem</span> <span class="hidden sm:inline">Sistem</span>
</span> </span>
@@ -184,11 +189,11 @@
<tr> <tr>
<td colspan="6" class="px-5 py-20 text-center"> <td colspan="6" class="px-5 py-20 text-center">
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<div class="w-14 h-14 rounded-full bg-gray-50 border border-gray-100 flex items-center justify-center mb-4"> <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-blue-50 to-indigo-100 border border-blue-100 flex items-center justify-center mb-4 shadow-sm">
<i class="fa-solid fa-list text-gray-300 text-xl"></i> <i class="fa-solid fa-list text-blue-300 text-2xl"></i>
</div> </div>
<p class="text-sm font-medium text-gray-500 mb-1">Tidak ada jenis pelanggaran</p> <p class="text-sm font-bold text-slate-600 mb-1">Tidak ada jenis pelanggaran</p>
<p class="text-xs text-gray-400">Coba ubah filter atau tambah jenis pelanggaran baru</p> <p class="text-xs text-slate-400">Coba ubah filter atau tambah jenis pelanggaran baru</p>
</div> </div>
</td> </td>
</tr> </tr>
@@ -215,20 +220,20 @@
<div x-show="modalOpen" class="fixed inset-0 bg-gray-900/40 backdrop-blur-sm"></div> <div x-show="modalOpen" class="fixed inset-0 bg-gray-900/40 backdrop-blur-sm"></div>
<div x-show="modalOpen" <div x-show="modalOpen"
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"> class="relative inline-block align-bottom bg-white rounded-2xl shadow-2xl border border-slate-200 text-left overflow-hidden transform transition-all sm:align-middle sm:max-w-xl sm:w-full">
{{-- Header --}} {{-- Header --}}
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between"> <div class="px-6 py-5 bg-gradient-to-r from-blue-600 to-indigo-600 flex items-center justify-between">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center"> <div class="w-10 h-10 rounded-xl bg-white/15 border border-white/20 flex items-center justify-center shadow-sm backdrop-blur-sm">
<i x-show="!isEditing" class="fa-solid fa-plus text-blue-600"></i> <i x-show="!isEditing" class="fa-solid fa-plus text-white text-sm"></i>
<i x-show="isEditing" class="fa-solid fa-pen-to-square text-blue-600"></i> <i x-show="isEditing" class="fa-solid fa-pen-to-square text-white text-sm"></i>
</div> </div>
<div> <div>
<h3 class="text-base font-semibold text-gray-900" x-text="isEditing ? 'Edit Jenis Pelanggaran' : 'Tambah Jenis Pelanggaran'"></h3> <h3 class="text-sm font-bold text-white" x-text="isEditing ? 'Edit Jenis Pelanggaran' : 'Tambah Jenis Pelanggaran'"></h3>
<p class="text-xs text-gray-400" x-text="isEditing ? 'Ubah detail jenis pelanggaran' : 'Buat jenis pelanggaran baru'"></p> <p class="text-xs text-blue-100/80" x-text="isEditing ? 'Ubah detail jenis pelanggaran' : 'Buat jenis pelanggaran baru'"></p>
</div> </div>
</div> </div>
<button @click="modalOpen = false" class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition"> <button @click="modalOpen = false" class="w-8 h-8 rounded-lg flex items-center justify-center text-blue-100 hover:text-white hover:bg-white/10 transition">
<i class="fa-solid fa-xmark"></i> <i class="fa-solid fa-xmark"></i>
</button> </button>
</div> </div>
@@ -242,9 +247,9 @@
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
{{-- Kategori --}} {{-- Kategori --}}
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1.5">Kategori <span class="text-red-500">*</span></label> <label class="block text-xs font-bold text-slate-600 mb-1.5">Kategori <span class="text-red-500">*</span></label>
<select x-model="formCategory" @change="updateCategoryColor(formCategory)" name="category_id" required <select x-model="formCategory" @change="updateCategoryColor(formCategory)" name="category_id" required
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"> class="input">
<option value="">-- Pilih Kategori --</option> <option value="">-- Pilih Kategori --</option>
@foreach($categories as $cat) @foreach($categories as $cat)
<option value="{{ $cat->id }}">{{ $cat->name }}</option> <option value="{{ $cat->id }}">{{ $cat->name }}</option>
@@ -253,64 +258,64 @@
</div> </div>
{{-- Nama --}} {{-- Nama --}}
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1.5">Nama Pelanggaran <span class="text-red-500">*</span></label> <label class="block text-xs font-bold text-slate-600 mb-1.5">Nama Pelanggaran <span class="text-red-500">*</span></label>
<input type="text" x-model="formName" name="name" required <input type="text" x-model="formName" name="name" required
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" class="input" placeholder="Contoh: Terlambat datang ke sekolah">
placeholder="Contoh: Terlambat datang ke sekolah">
</div> </div>
</div> </div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
{{-- Poin --}} {{-- Poin --}}
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1.5">Poin <span class="text-red-500">*</span></label> <label class="block text-xs font-bold text-slate-600 mb-1.5">Poin <span class="text-red-500">*</span></label>
<input type="number" x-model="formPoints" name="points" required min="0" max="500" <input type="number" x-model="formPoints" name="points" required min="0" max="500"
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"> class="input">
<p class="text-xs text-gray-400 mt-1">Poin pelanggaran (1–500)</p> <p class="text-[11px] text-slate-400 mt-1">Poin pelanggaran (1–500)</p>
</div> </div>
{{-- Sanksi --}} {{-- Sanksi --}}
<div> <div>
<label class="block text-sm font-medium text-gray-700 mb-1.5">Sanksi Default</label> <label class="block text-xs font-bold text-slate-600 mb-1.5">Sanksi Default</label>
<input type="text" x-model="formSanction" name="default_sanction" <input type="text" x-model="formSanction" name="default_sanction"
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" class="input" placeholder="Contoh: Teguran lisan">
placeholder="Contoh: Teguran lisan"> <p class="text-[11px] text-slate-400 mt-1">Sanksi yang muncul saat input pelanggaran</p>
<p class="text-xs text-gray-400 mt-1">Sanksi yang muncul saat input pelanggaran</p>
</div> </div>
</div> </div>
{{-- Status toggle (edit only) --}} {{-- Status toggle (edit only) --}}
<div x-show="isEditing" class="flex items-center justify-between p-4 bg-gray-50 rounded-xl border border-gray-100"> <div x-show="isEditing" class="flex items-center justify-between p-4 bg-slate-50 rounded-xl border border-slate-100">
<div> <div>
<p class="text-sm font-semibold text-gray-900">Status Aktif</p> <p class="text-sm font-bold text-slate-800">Status Aktif</p>
<p class="text-xs text-gray-400 mt-0.5">Nonaktifkan untuk menyembunyikan dari daftar pemilihan</p> <p class="text-xs text-slate-400 mt-0.5">Nonaktifkan untuk menyembunyikan dari daftar pemilihan</p>
</div> </div>
<label class="relative inline-flex items-center cursor-pointer"> <label class="relative inline-flex items-center cursor-pointer select-none">
<input type="checkbox" x-model="formActive" name="is_active" value="1" class="sr-only peer"> <input type="checkbox" x-model="formActive" name="is_active" value="1" class="sr-only peer">
<div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all"></div> <div class="w-11 h-6 rounded-full transition-all duration-300"
:style="formActive ? 'background: linear-gradient(135deg, #3b82f6, #2563eb); box-shadow: 0 0 14px 2px rgba(59,130,246,0.35);' : 'background-color: #e2e8f0; box-shadow: inset 0 1px 3px rgba(15,23,42,0.1);'">
<div class="absolute top-[2px] left-[2px] h-5 w-5 bg-white rounded-full shadow-md transition-all duration-300"
:class="formActive ? 'translate-x-5' : ''"></div>
</div>
</label> </label>
</div> </div>
{{-- Preview --}} {{-- Preview --}}
<div class="p-4 bg-gray-50 rounded-xl border border-gray-100"> <div class="p-4 bg-slate-50 rounded-xl border border-slate-100">
<p class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3">Pratinjau</p> <p class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.12em] mb-3">Pratinjau</p>
<div class="flex items-center justify-between p-3 bg-white rounded-lg border border-slate-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"> <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="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> <span class="text-sm font-semibold text-slate-900 truncate" x-text="formName || 'Nama Pelanggaran'"></span>
</div> </div>
<span class="text-sm font-bold flex-shrink-0 ml-3" :class="formPoints >= 50 ? 'text-red-600' : formPoints >= 15 ? 'text-yellow-600' : 'text-green-600'" x-text="'+' + (formPoints || 0)"></span> <span class="inline-flex items-center gap-1 text-sm font-extrabold flex-shrink-0 ml-3" :class="formPoints >= 50 ? 'text-red-600' : formPoints >= 15 ? 'text-yellow-600' : 'text-green-600'" x-text="'+' + (formPoints || 0)"></span>
</div> </div>
<p class="text-xs text-gray-400 mt-2" x-text="formSanction ? 'Sanksi: ' + formSanction : ''"></p> <p class="text-xs text-slate-400 mt-2" x-text="formSanction ? 'Sanksi: ' + formSanction : ''"></p>
</div> </div>
{{-- Buttons --}} {{-- Buttons --}}
<div class="flex justify-end gap-3 pt-2 border-t border-gray-100"> <div class="flex justify-end gap-3 pt-2 border-t border-slate-100">
<button type="button" @click="modalOpen = false" <button type="button" @click="modalOpen = false" class="btn-outline">
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 Batal
</button> </button>
<button type="submit" <button type="submit" class="btn-primary">
class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-semibold text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition shadow-sm">
<i class="fa-solid" :class="isEditing ? 'fa-floppy-disk' : 'fa-plus'"></i> <i class="fa-solid" :class="isEditing ? 'fa-floppy-disk' : 'fa-plus'"></i>
<span x-text="isEditing ? 'Simpan Perubahan' : 'Tambah Jenis'"></span> <span x-text="isEditing ? 'Simpan Perubahan' : 'Tambah Jenis'"></span>
</button> </button>
@@ -325,17 +330,17 @@
class="fixed inset-0 z-50 flex-col items-center justify-center bg-gray-900/40 backdrop-blur-sm" class="fixed inset-0 z-50 flex-col items-center justify-center bg-gray-900/40 backdrop-blur-sm"
tabindex="0"> tabindex="0">
<div class="bg-white rounded-2xl shadow-2xl border border-slate-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="px-6 py-5 bg-gradient-to-r from-blue-600 to-indigo-600 flex items-center justify-between">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center"> <div class="w-10 h-10 rounded-xl bg-white/15 border border-white/20 flex items-center justify-center shadow-sm backdrop-blur-sm">
<i class="fa-solid fa-download text-blue-600"></i> <i class="fa-solid fa-download text-white text-sm"></i>
</div> </div>
<div> <div>
<h3 class="text-base font-semibold text-gray-900">Import Excel</h3> <h3 class="text-sm font-bold text-white">Import Excel</h3>
<p class="text-xs text-gray-400">Upload file .xlsx jenis pelanggaran</p> <p class="text-xs text-blue-100/80">Upload file .xlsx jenis pelanggaran</p>
</div> </div>
</div> </div>
<button onclick="document.getElementById('import-modal').style.display='none'" class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition"> <button onclick="document.getElementById('import-modal').style.display='none'" class="w-8 h-8 rounded-lg flex items-center justify-center text-blue-100 hover:text-white hover:bg-white/10 transition">
<i class="fa-solid fa-xmark"></i> <i class="fa-solid fa-xmark"></i>
</button> </button>
</div> </div>
@@ -380,11 +385,11 @@
</a> </a>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<button type="button" onclick="document.getElementById('import-modal').style.display='none'" <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-slate-200 rounded-lg hover:bg-gray-50 transition"> class="btn-outline">
Batal Batal
</button> </button>
<button type="submit" <button type="submit"
class="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-semibold text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition shadow-sm"> class="btn-primary">
<i class="fa-solid fa-cloud-arrow-up text-xs"></i> <i class="fa-solid fa-cloud-arrow-up text-xs"></i>
Import Import
</button> </button>