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

Poles UI/UX premium: fondasi global

Browse Source 
- 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
2026-08-03 14:27:03 +07:00
parent 279ef07ae2
commit 151a66639b
32 changed files with 317 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/violations/create.blade.php
+16 -16
View File
@@ -18,7 +18,7 @@
</div>
<form action="{{ route('violations.store') }}" method="POST" enctype="multipart/form-data"
class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
@csrf
{{-- Gradient header --}}
@@ -57,13 +57,13 @@
<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" x-model="searchQuery" @input.debounce="searchStudents"
placeholder="Cari NISN atau Nama siswa..."
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>
<input type="hidden" name="student_id" x-model="selectedStudentId">
{{-- Search results dropdown --}}
<div x-show="results.length > 0 && !selectedStudentId"
class="absolute z-10 mt-1 w-full bg-white shadow-lg border border-gray-200 rounded-xl max-h-48 overflow-y-auto">
class="absolute z-10 mt-1 w-full bg-white shadow-lg border border-slate-200 rounded-xl max-h-48 overflow-y-auto">
<template x-for="s in results" :key="s.id">
<div @click="selectStudent(s)"
class="px-4 py-2.5 hover:bg-blue-50 cursor-pointer border-b border-gray-100 last:border-0 flex items-center justify-between">
@@ -119,12 +119,12 @@
<input type="text" x-model="q" @input="open=true" @focus="open=true"
@click.away="open=false" @keydown.escape="open=false"
placeholder="Ketik nama pelanggaran untuk menambah..."
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>
{{-- Search results --}}
<div x-show="open && filtered.length > 0"
class="absolute z-20 mt-1 w-full bg-white shadow-lg border border-gray-200 rounded-xl max-h-72 overflow-y-auto">
class="absolute z-20 mt-1 w-full bg-white shadow-lg border border-slate-200 rounded-xl max-h-72 overflow-y-auto">
<template x-for="(group, gi) in filtered" :key="gi">
<div>
<div class="sticky top-0 px-4 py-1.5 text-xs font-bold uppercase tracking-wider border-b flex items-center gap-1.5 z-10"
@@ -160,7 +160,7 @@
{{-- No results --}}
<div x-show="open && filtered.length === 0 && q.length > 0"
class="absolute z-20 mt-1 w-full bg-white shadow-lg border border-gray-200 rounded-xl p-5 text-center">
class="absolute z-20 mt-1 w-full bg-white shadow-lg border border-slate-200 rounded-xl p-5 text-center">
<p class="text-sm text-gray-500">Tidak ditemukan untuk "<span x-text="q" class="font-medium"></span>"</p>
</div>
</div>
@@ -223,7 +223,7 @@
{{-- Empty state --}}
<template x-if="selected.length === 0">
<div class="flex items-center gap-2 p-3 rounded-xl border border-dashed border-gray-200 bg-gray-50/50">
<div class="flex items-center gap-2 p-3 rounded-xl border border-dashed border-slate-200 bg-gray-50/50">
<i class="fa-solid fa-circle-plus text-gray-300"></i>
<span class="text-xs text-gray-400">Gunakan pencarian di atas untuk memilih pelanggaran</span>
</div>
@@ -244,17 +244,17 @@
<div>
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Tanggal <span class="text-red-500">*</span></label>
<input type="date" name="violation_date" value="{{ date('Y-m-d') }}" 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.5">Waktu</label>
<input type="time" name="violation_time" value="{{ date('H:i') }}"
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.5">Lokasi</label>
<input type="text" name="location" placeholder="Depan kelas, Lapangan, dll"
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>
</div>
@@ -271,7 +271,7 @@
<div>
<label class="block text-sm font-semibold text-gray-700 mb-1.5">Deskripsi / Catatan Pelanggaran</label>
<textarea name="description" rows="3" placeholder="Deskripsi lengkap pelanggaran yang terjadi..."
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 resize-none"></textarea>
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 resize-none"></textarea>
</div>
</div>
@@ -289,7 +289,7 @@
<div class="grid grid-cols-3 sm:grid-cols-5 gap-3 mb-3">
<template x-for="(file, index) in files" :key="index">
<div class="relative aspect-square rounded-xl overflow-hidden border border-gray-200 bg-gray-50 group shadow-sm">
<div class="relative aspect-square rounded-xl overflow-hidden border border-slate-200 bg-gray-50 group shadow-sm">
<img :src="file.url" class="w-full h-full object-cover">
<button type="button" @click="removeFile(index)"
class="absolute top-1.5 right-1.5 w-6 h-6 bg-red-500 text-white rounded-full flex items-center justify-center text-xs hover:bg-red-600 transition opacity-0 group-hover:opacity-100 shadow-lg">
@@ -302,7 +302,7 @@
{{-- Upload placeholder --}}
<template x-if="files.length < 5">
<div @click="document.getElementById('evidences').click()"
class="aspect-square rounded-xl border-2 border-dashed border-gray-200 hover:border-blue-300 bg-gray-50/50 flex flex-col items-center justify-center cursor-pointer transition hover:bg-blue-50/30 group">
class="aspect-square rounded-xl border-2 border-dashed border-slate-200 hover:border-blue-300 bg-gray-50/50 flex flex-col items-center justify-center cursor-pointer transition hover:bg-blue-50/30 group">
<i class="fa-solid fa-camera text-gray-300 text-2xl mb-1 group-hover:text-blue-400 transition"></i>
<span class="text-xs text-gray-400 group-hover:text-blue-500 transition font-medium">Tambah Foto</span>
</div>
@@ -311,12 +311,12 @@
<div class="flex items-center gap-2">
<button type="button" @click="document.getElementById('evidences').click()"
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition shadow-sm">
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-600 bg-white border border-slate-200 rounded-xl hover:bg-gray-50 transition shadow-sm">
<i class="fa-solid fa-image text-gray-400"></i>
Pilih File
</button>
<button type="button" @click="captureCamera"
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-200 rounded-xl hover:bg-gray-50 transition shadow-sm">
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-600 bg-white border border-slate-200 rounded-xl hover:bg-gray-50 transition shadow-sm">
<i class="fa-solid fa-camera text-gray-400"></i>
Ambil Foto
</button>
@@ -328,7 +328,7 @@
{{-- Footer --}}
<div class="px-6 py-4 bg-gray-50/80 border-t border-gray-100 flex items-center justify-end gap-3">
<a href="{{ route('violations.index') }}"
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 inline-flex items-center gap-2">
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 inline-flex items-center gap-2">
<i class="fa-solid fa-arrow-left text-xs"></i>
Batal
</a>
resources/views/violations/index.blade.php
+9 -9
View File
@@ -25,7 +25,7 @@
</div>
{{-- Filter Card --}}
<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">
<div class="p-5 space-y-4">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
@@ -33,12 +33,12 @@
<div class="sm:col-span-2 lg:col-span-1 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" placeholder="Cari NISN/Nama..." value="{{ request('search') }}"
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>
{{-- Kategori --}}
<div>
<select name="handling_status"
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 Status</option>
<option value="unhandled" @selected(request('handling_status') === 'unhandled')>Belum Ditangani</option>
<option value="in_progress" @selected(request('handling_status') === 'in_progress')>Dalam Proses</option>
@@ -48,7 +48,7 @@
{{-- Kategori --}}
<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)>{{ $cat->name }}</option>
@@ -58,12 +58,12 @@
{{-- Tanggal Dari --}}
<div>
<input type="date" name="date_from" value="{{ request('date_from') }}" placeholder="Dari tanggal"
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>
{{-- Tanggal Sampai --}}
<div>
<input type="date" name="date_to" value="{{ request('date_to') }}" placeholder="Sampai tanggal"
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>
{{-- Actions --}}
<div class="flex items-center gap-2">
@@ -73,7 +73,7 @@
</button>
@if(request()->anyFilled(['search','handling_status','category_id','date_from','date_to']))
<a href="{{ route('violations.index') }}"
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"></i>
</a>
@endif
@@ -84,7 +84,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>
@@ -143,7 +143,7 @@
<div class="min-w-0">
<p class="text-sm font-semibold text-gray-900 truncate max-w-[180px]">{{ $v->student->full_name ?? '-' }}</p>
<div class="flex flex-wrap items-center gap-1.5 mt-0.5">
<span class="inline-flex items-center px-2 py-0.5 text-[10px] font-mono font-medium bg-gray-100 text-gray-600 rounded-full border border-gray-200">{{ $v->student->nisn ?? '—' }}</span>
<span class="inline-flex items-center px-2 py-0.5 text-[10px] font-mono font-medium bg-gray-100 text-gray-600 rounded-full border border-slate-200">{{ $v->student->nisn ?? '—' }}</span>
<span class="inline-flex items-center px-2 py-0.5 text-[10px] font-medium bg-blue-50 text-blue-600 rounded-full border border-blue-200">{{ $v->student->class_name ?? '—' }}</span>
</div>
<div class="mt-1.5 lg:hidden">
resources/views/violations/show.blade.php
+18 -18
View File
@@ -117,7 +117,7 @@
</div>
<div class="p-5 flex flex-wrap items-center justify-between gap-4">
<div class="flex items-center gap-3">
<div class="w-11 h-11 rounded-2xl bg-gray-50 border border-gray-200 flex items-center justify-center text-gray-400">
<div class="w-11 h-11 rounded-2xl bg-gray-50 border border-slate-200 flex items-center justify-center text-gray-400">
<i class="fa-solid fa-phone"></i>
</div>
<div>
@@ -196,7 +196,7 @@
</div>
{{-- ===== PENANGANAN (fitur utama) ===== --}}
<div x-data="{ showHandlingModal: false }" class="bg-white rounded-3xl shadow-sm border border-gray-200 overflow-hidden">
<div x-data="{ showHandlingModal: false }" class="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden">
{{-- Header kartu --}}
<div class="bg-gradient-to-r from-amber-500 via-orange-500 to-orange-600 px-6 py-5 flex flex-wrap items-center justify-between gap-3">
<div class="flex items-center gap-3.5">
@@ -285,7 +285,7 @@
<p class="text-[10px] font-bold text-gray-400 uppercase tracking-wider mb-1.5">Yang Menangani</p>
<div class="flex flex-wrap gap-2">
@foreach($h->participants as $p)
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] bg-white border border-gray-200 rounded-full shadow-sm">
<span class="inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] bg-white border border-slate-200 rounded-full shadow-sm">
<span class="w-4 h-4 rounded-full bg-gradient-to-br from-blue-500 to-sky-400 flex items-center justify-center flex-shrink-0">
<span class="text-[7px] font-bold text-white">{{ strtoupper(substr($p->user->name ?? '?', 0, 1)) }}</span>
</span>
@@ -400,7 +400,7 @@
<i :class="'fa-solid ' + (selectedMeta ? selectedMeta.icon : 'fa-hand-holding-heart')" class="text-white text-lg"></i>
</div>
<select name="handling_type" x-model="selectedType" required
class="flex-1 px-4 py-3 border-2 border-gray-200 rounded-2xl text-sm font-semibold bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-4 focus:ring-amber-500/15 focus:border-amber-500 transition">
class="flex-1 px-4 py-3 border-2 border-slate-200 rounded-2xl text-sm font-semibold bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-4 focus:ring-amber-500/15 focus:border-amber-500 transition">
<option value="">— Pilih jenis penanganan —</option>
@foreach($handlingTypes as $htOpt)
<option value="{{ $htOpt->name }}">{{ $htOpt->name }}</option>
@@ -417,7 +417,7 @@
<div class="relative">
<i class="fa-solid fa-calendar-day absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i>
<input type="date" name="handling_date" value="{{ date('Y-m-d') }}" required
class="w-full pl-11 pr-4 py-3 border-2 border-gray-200 rounded-2xl text-sm font-semibold bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-4 focus:ring-amber-500/15 focus:border-amber-500 transition">
class="w-full pl-11 pr-4 py-3 border-2 border-slate-200 rounded-2xl text-sm font-semibold bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-4 focus:ring-amber-500/15 focus:border-amber-500 transition">
</div>
</div>
<div>
@@ -425,7 +425,7 @@
<div class="relative">
<i class="fa-solid fa-location-dot absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 text-sm pointer-events-none"></i>
<input type="text" name="location" placeholder="Ruang BK, Ruang Guru, dll"
class="w-full pl-11 pr-4 py-3 border-2 border-gray-200 rounded-2xl text-sm font-semibold bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-4 focus:ring-amber-500/15 focus:border-amber-500 transition">
class="w-full pl-11 pr-4 py-3 border-2 border-slate-200 rounded-2xl text-sm font-semibold bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-4 focus:ring-amber-500/15 focus:border-amber-500 transition">
</div>
</div>
</div>
@@ -434,14 +434,14 @@
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">Catatan / Deskripsi</label>
<textarea name="description" rows="4" placeholder="Tuliskan detail penanganan yang dilakukan..."
class="w-full px-4 py-3 border-2 border-gray-200 rounded-2xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-4 focus:ring-amber-500/15 focus:border-amber-500 transition resize-none"></textarea>
class="w-full px-4 py-3 border-2 border-slate-200 rounded-2xl text-sm bg-gray-50/50 focus:bg-white focus:outline-none focus:ring-4 focus:ring-amber-500/15 focus:border-amber-500 transition resize-none"></textarea>
</div>
{{-- Bukti --}}
<div>
<label class="block text-sm font-bold text-gray-700 mb-2">Bukti Pendukung <span class="font-normal text-gray-400">(opsional)</span></label>
<label class="flex flex-col items-center justify-center gap-2 px-6 py-7 rounded-2xl border-2 border-dashed border-gray-300 bg-gray-50/50 cursor-pointer hover:border-amber-400 hover:bg-amber-50/40 transition group">
<div class="w-12 h-12 rounded-2xl bg-white shadow-sm border border-gray-200 flex items-center justify-center group-hover:scale-110 transition-transform">
<div class="w-12 h-12 rounded-2xl bg-white shadow-sm border border-slate-200 flex items-center justify-center group-hover:scale-110 transition-transform">
<i class="fa-solid fa-cloud-arrow-up text-amber-500 text-lg"></i>
</div>
<p class="text-sm font-bold text-gray-600" x-text="evidenceName || 'Klik untuk unggah bukti'"></p>
@@ -462,19 +462,19 @@
</div>
<div class="space-y-2.5">
<template x-for="(p, i) in participants" :key="i">
<div class="flex items-center gap-2.5 rounded-2xl border border-gray-200 bg-gray-50/50 p-2.5">
<div class="flex items-center gap-2.5 rounded-2xl border border-slate-200 bg-gray-50/50 p-2.5">
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-sky-400 flex items-center justify-center text-white shrink-0">
<i class="fa-solid fa-user text-xs"></i>
</div>
<select :name="'participants['+i+'][user_id]'" x-model="p.user_id"
class="flex-1 px-3 py-2.5 border border-gray-200 rounded-xl text-sm bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition">
class="flex-1 px-3 py-2.5 border border-slate-200 rounded-xl text-sm bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition">
<option value="">Pilih petugas...</option>
@foreach($users as $user)
<option value="{{ $user->id }}">{{ $user->name }} ({{ $user->role }})</option>
@endforeach
</select>
<select :name="'participants['+i+'][role]'" x-model="p.role"
class="w-[130px] px-3 py-2.5 border border-gray-200 rounded-xl text-sm bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition">
class="w-[130px] px-3 py-2.5 border border-slate-200 rounded-xl text-sm bg-white focus:outline-none focus:ring-2 focus:ring-amber-500/20 focus:border-amber-500 transition">
<option value="">Peran</option>
@foreach($handlingRoles as $roleOpt)
<option value="{{ $roleOpt }}">{{ $roleOpt }}</option>
@@ -496,7 +496,7 @@
{{-- Footer --}}
<div class="flex items-center justify-end gap-3 mt-8 pt-5 border-t border-gray-100">
<button type="button" @click="showHandlingModal = false"
class="px-6 py-3 text-sm font-bold text-gray-600 bg-white border-2 border-gray-200 rounded-2xl hover:bg-gray-50 transition">
class="px-6 py-3 text-sm font-bold text-gray-600 bg-white border-2 border-slate-200 rounded-2xl hover:bg-gray-50 transition">
Batal
</button>
<button type="submit"
@@ -513,7 +513,7 @@
</div>
{{-- Detail Info Card --}}
<div class="bg-white rounded-3xl shadow-sm border border-gray-200 overflow-hidden">
<div class="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden">
{{-- Header --}}
<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">
@@ -618,7 +618,7 @@
{{-- Deskripsi --}}
@if($violation->description)
<div class="bg-white rounded-3xl shadow-sm border border-gray-200 overflow-hidden">
<div class="bg-white rounded-3xl 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-10 h-10 rounded-2xl bg-gradient-to-br from-blue-500 to-sky-400 flex items-center justify-center shadow-sm">
@@ -640,7 +640,7 @@
<div class="space-y-5">
{{-- Status Card --}}
<div class="bg-white rounded-3xl shadow-sm border border-gray-200 overflow-hidden">
<div class="bg-white rounded-3xl 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-3">
<div class="w-10 h-10 rounded-2xl bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-sm">
@@ -722,7 +722,7 @@
{{-- Evidence Photos --}}
@if($violation->evidences->count() > 0)
<div class="bg-white rounded-3xl shadow-sm border border-gray-200 overflow-hidden">
<div class="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden">
<div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between gap-3">
<div class="flex items-center gap-2.5 min-w-0">
<div class="w-9 h-9 rounded-2xl bg-gradient-to-br from-blue-500 to-sky-400 flex items-center justify-center flex-shrink-0">
@@ -739,7 +739,7 @@
<div class="evidence-grid grid grid-cols-2 gap-2.5">
@foreach($violation->evidences as $evidence)
<a href="{{ $evidence->url }}" target="_blank" rel="noopener noreferrer"
class="group relative block aspect-square rounded-xl overflow-hidden border border-gray-200 bg-gray-50 shadow-sm">
class="group relative block aspect-square rounded-xl overflow-hidden border border-slate-200 bg-gray-50 shadow-sm">
<img src="{{ $evidence->url }}"
class="w-full h-full object-cover"
alt="{{ $evidence->original_name }}">
@@ -776,7 +776,7 @@
{{-- Back to List --}}
<a href="{{ route('violations.index') }}"
class="flex items-center justify-center gap-2 p-3.5 text-sm font-semibold text-gray-500 bg-white border border-gray-200 rounded-3xl hover:bg-gray-50 hover:text-gray-700 transition group">
class="flex items-center justify-center gap-2 p-3.5 text-sm font-semibold text-gray-500 bg-white border border-slate-200 rounded-3xl hover:bg-gray-50 hover:text-gray-700 transition group">
<i class="fa-solid fa-arrow-left text-xs"></i>
Kembali ke Data Pelanggaran
</a>