Initial commit: Aplikasi Ketertiban Siswa
- Fitur: input pelanggaran, sistem poin, surat peringatan otomatis, SP progress - Realtime notifikasi via Laravel Reverb + Echo - Dashboard statistik, manajemen user, manajemen master data - Login 2 kolom premium, user dropdown, pengaturan akun - Tema biru kalem, logo sekolah dinamis, sidebar brand dinamis - Sinkronisasi siswa dari Database Kesiswaan via API
This commit is contained in:
Bro
@@ -0,0 +1,301 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Kategori Pelanggaran')
|
||||
|
||||
@section('content')
|
||||
<div x-data="categoryManager()" class="">
|
||||
{{-- Header --}}
|
||||
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900">Kategori Pelanggaran</h1>
|
||||
<p class="text-sm text-gray-500 mt-1">Kelompokkan jenis pelanggaran berdasarkan tingkat keparahan</p>
|
||||
</div>
|
||||
<button @click="openCreate()"
|
||||
class="inline-flex items-center px-4 py-2.5 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition shadow-sm">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
Tambah Kategori
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- Cards Grid --}}
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
|
||||
@forelse($categories as $cat)
|
||||
@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">
|
||||
{{-- Color bar --}}
|
||||
<div class="h-2 rounded-t-xl" style="background-color: {{ $cat->color }}"></div>
|
||||
|
||||
<div class="p-5">
|
||||
{{-- Header row --}}
|
||||
<div class="flex items-start justify-between mb-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<span class="w-4 h-4 rounded-full flex-shrink-0 ring-2 ring-offset-1" style="background-color: {{ $cat->color }}; --tw-ring-color: {{ $cat->color }}40"></span>
|
||||
<div>
|
||||
<h3 class="text-base font-semibold text-gray-900">{{ $cat->name }}</h3>
|
||||
@if($cat->description)
|
||||
<p class="text-xs text-gray-500 mt-0.5">{{ $cat->description }}</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@if(!$cat->is_active)
|
||||
<span class="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-gray-100 text-gray-500 rounded-full">Nonaktif</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Stats row --}}
|
||||
<div class="flex items-center space-x-4 text-sm text-gray-500 mb-4">
|
||||
<div class="flex items-center space-x-1.5">
|
||||
<svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
|
||||
</svg>
|
||||
<span>{{ $typeCount }} jenis</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1.5">
|
||||
<svg class="w-4 h-4 text-gray-400" 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"></path>
|
||||
</svg>
|
||||
<span>Urutan #{{ $cat->sort_order }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Actions --}}
|
||||
<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">
|
||||
<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>
|
||||
Edit
|
||||
</button>
|
||||
@if($cat->is_active)
|
||||
<form action="{{ route('settings.categories.update', $cat->id) }}" method="POST" class="inline">
|
||||
@csrf @method('PUT')
|
||||
<input type="hidden" name="name" value="{{ $cat->name }}">
|
||||
<input type="hidden" name="color" value="{{ $cat->color }}">
|
||||
<input type="hidden" name="description" value="{{ $cat->description }}">
|
||||
<input type="hidden" name="sort_order" value="{{ $cat->sort_order }}">
|
||||
<input type="hidden" name="is_active" value="0">
|
||||
<button type="submit"
|
||||
class="inline-flex items-center 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">
|
||||
<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="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
|
||||
</svg>
|
||||
Nonaktifkan
|
||||
</button>
|
||||
</form>
|
||||
@else
|
||||
<form action="{{ route('settings.categories.update', $cat->id) }}" method="POST" class="inline">
|
||||
@csrf @method('PUT')
|
||||
<input type="hidden" name="name" value="{{ $cat->name }}">
|
||||
<input type="hidden" name="color" value="{{ $cat->color }}">
|
||||
<input type="hidden" name="description" value="{{ $cat->description }}">
|
||||
<input type="hidden" name="sort_order" value="{{ $cat->sort_order }}">
|
||||
<input type="hidden" name="is_active" value="1">
|
||||
<button type="submit"
|
||||
class="inline-flex items-center 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">
|
||||
<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
Aktifkan
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
@if($typeCount === 0)
|
||||
<form action="{{ route('settings.categories.destroy', $cat->id) }}" method="POST"
|
||||
x-data x-on:submit.prevent="if(await window.confirmSwal({text:'Hapus kategori ini?'})) $el.submit()"">
|
||||
@csrf @method('DELETE')
|
||||
<button type="submit"
|
||||
class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-blue-600 bg-red-50 border border-blue-200 rounded-lg hover:bg-blue-100 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||
</svg>
|
||||
Hapus
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="col-span-full">
|
||||
<div class="text-center py-12 bg-white rounded-xl border border-gray-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>
|
||||
<p class="text-sm text-gray-500">Belum ada kategori pelanggaran.</p>
|
||||
<button @click="openCreate()" class="mt-3 text-sm font-medium text-blue-600 hover:text-blue-800">
|
||||
+ Tambah kategori pertama
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
{{-- Modal Create/Edit --}}
|
||||
<div x-show="modalOpen" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
|
||||
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
|
||||
{{-- Overlay --}}
|
||||
<div x-show="modalOpen" @click="modalOpen = false" class="fixed inset-0 bg-gray-500 bg-opacity-50 transition-opacity"></div>
|
||||
|
||||
{{-- Panel --}}
|
||||
<div x-show="modalOpen" @click.away="modalOpen = false"
|
||||
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">
|
||||
{{-- 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">
|
||||
<div class="w-10 h-10 rounded-lg flex items-center justify-center" :class="isEditing ? 'bg-blue-100' : 'bg-blue-100'">
|
||||
<svg x-show="!isEditing" class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
<svg x-show="isEditing" class="w-5 h-5 text-blue-600" 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>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900" x-text="isEditing ? 'Edit Kategori' : 'Tambah Kategori'"></h3>
|
||||
<p class="text-sm text-gray-500" x-text="isEditing ? 'Ubah detail kategori pelanggaran' : 'Buat kategori pelanggaran baru'"></p>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="modalOpen = false" class="text-gray-400 hover:text-gray-600 transition">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- Form --}}
|
||||
<form :action="isEditing ? `/settings/categories/${editId}` : '{{ route('settings.categories.store') }}'"
|
||||
method="POST" class="p-6 space-y-5">
|
||||
@csrf
|
||||
<input type="hidden" name="_method" :value="isEditing ? 'PUT' : 'POST'">
|
||||
|
||||
{{-- Nama --}}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1.5">Nama Kategori</label>
|
||||
<input type="text" x-model="formName" name="name" required
|
||||
class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition"
|
||||
placeholder="Contoh: Ringan, Sedang, Berat">
|
||||
</div>
|
||||
|
||||
{{-- Color Picker --}}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1.5">Warna</label>
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="relative">
|
||||
<input type="color" x-model="formColor" name="color"
|
||||
class="w-12 h-12 rounded-xl border border-gray-300 cursor-pointer p-0.5">
|
||||
</div>
|
||||
<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"
|
||||
:style="{ backgroundColor: formColor }"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Sort Order --}}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1.5">Urutan Tampil</label>
|
||||
<input type="number" x-model="formSort" name="sort_order" min="0"
|
||||
class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition"
|
||||
placeholder="0">
|
||||
</div>
|
||||
|
||||
{{-- Description --}}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1.5">Deskripsi <span class="text-gray-400 font-normal">(opsional)</span></label>
|
||||
<textarea x-model="formDesc" name="description" rows="2"
|
||||
class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition resize-none"
|
||||
placeholder="Penjelasan singkat tentang kategori ini"></textarea>
|
||||
</div>
|
||||
|
||||
{{-- Status toggle for edit --}}
|
||||
<div x-show="isEditing" class="flex items-center justify-between p-4 bg-gray-50 rounded-xl border border-gray-100">
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900">Status Aktif</p>
|
||||
<p class="text-xs text-gray-500">Nonaktifkan untuk menyembunyikan kategori ini</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<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>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{{-- 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">
|
||||
<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"
|
||||
:style="{
|
||||
backgroundColor: formColor + '20',
|
||||
color: formColor
|
||||
}"
|
||||
x-text="formDesc || 'Deskripsi'"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Buttons --}}
|
||||
<div class="flex justify-end space-x-3 pt-2">
|
||||
<button type="button" @click="modalOpen = false"
|
||||
class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-xl hover:bg-gray-50 transition">
|
||||
Batal
|
||||
</button>
|
||||
<button type="submit"
|
||||
class="px-5 py-2.5 text-sm font-medium text-white rounded-xl transition shadow-sm"
|
||||
:class="isEditing ? 'bg-blue-600 hover:bg-blue-700' : 'bg-blue-600 hover:bg-blue-700'"
|
||||
x-text="isEditing ? 'Simpan Perubahan' : 'Tambah Kategori'">
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
function categoryManager() {
|
||||
return {
|
||||
modalOpen: false,
|
||||
isEditing: false,
|
||||
editId: null,
|
||||
formName: '',
|
||||
formColor: '#22c55e',
|
||||
formDesc: '',
|
||||
formSort: 0,
|
||||
formActive: true,
|
||||
|
||||
openCreate() {
|
||||
this.isEditing = false;
|
||||
this.editId = null;
|
||||
this.formName = '';
|
||||
this.formColor = '#22c55e';
|
||||
this.formDesc = '';
|
||||
this.formSort = 0;
|
||||
this.formActive = true;
|
||||
this.modalOpen = true;
|
||||
},
|
||||
|
||||
openEdit(id, name, color, desc, sort, inactive) {
|
||||
this.isEditing = true;
|
||||
this.editId = id;
|
||||
this.formName = name;
|
||||
this.formColor = color;
|
||||
this.formDesc = desc || '';
|
||||
this.formSort = sort;
|
||||
this.formActive = !inactive;
|
||||
this.modalOpen = true;
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
@@ -0,0 +1,86 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Pengaturan')
|
||||
|
||||
@section('content')
|
||||
<div>
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Pengaturan Sekolah</h1>
|
||||
<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">
|
||||
<form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data" class="p-6 space-y-4">
|
||||
@csrf
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Nama Aplikasi</label>
|
||||
<input type="text" name="app_name" value="{{ old('app_name', $settings->get('app_name')?->value ?? 'Aplikasi Ketertiban') }}" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
||||
<p class="text-xs text-gray-400 mt-1">Nama yang tampil di sidebar, login page, dan tab browser.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Nama Sekolah</label>
|
||||
<input type="text" name="school_name" value="{{ old('school_name', $settings->get('school_name')?->value ?? '') }}" required
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Alamat Sekolah</label>
|
||||
<textarea name="school_address" rows="2" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">{{ old('school_address', $settings->get('school_address')?->value ?? '') }}</textarea>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">No. Telepon</label>
|
||||
<input type="text" name="school_phone" value="{{ old('school_phone', $settings->get('school_phone')?->value ?? '') }}"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Logo Sekolah</label>
|
||||
@if($settings->get('school_logo')?->value)
|
||||
<div class="mb-2">
|
||||
<img src="{{ asset('storage/' . $settings->get('school_logo')->value) }}" class="h-16 object-contain">
|
||||
</div>
|
||||
@endif
|
||||
<input type="file" name="school_logo" accept="image/*"
|
||||
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">
|
||||
|
||||
<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">
|
||||
</div>
|
||||
@endif
|
||||
<input type="file" name="login_background" accept="image/*"
|
||||
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">
|
||||
<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">
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Nama Kepala Sekolah</label>
|
||||
<input type="text" name="kepala_sekolah_name" value="{{ old('kepala_sekolah_name', $settings->get('kepala_sekolah_name')?->value ?? '') }}"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">NIP Kepala Sekolah</label>
|
||||
<input type="text" name="kepala_sekolah_nip" value="{{ old('kepala_sekolah_nip', $settings->get('kepala_sekolah_nip')?->value ?? '') }}"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full px-4 py-2.5 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition">
|
||||
Simpan Pengaturan
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,115 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Reset Aplikasi')
|
||||
|
||||
@section('content')
|
||||
<div class="max-w-2xl mx-auto">
|
||||
{{-- Header --}}
|
||||
<div class="mb-6">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-12 h-12 rounded-xl bg-red-100 flex items-center justify-center">
|
||||
<i class="fa-solid fa-rotate-left text-red-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900">Reset Aplikasi</h1>
|
||||
<p class="text-sm text-gray-500 mt-0.5">Kembalikan aplikasi ke kondisi awal pabrik</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Warning Card --}}
|
||||
<div class="bg-red-50 border border-red-200 rounded-xl p-5 mb-6">
|
||||
<div class="flex items-start space-x-3">
|
||||
<i class="fa-solid fa-triangle-exclamation text-red-600 mt-0.5"></i>
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-red-800">⚠️ Peringatan Keras!</h3>
|
||||
<p class="text-sm text-red-700 mt-1">Semua data berikut akan <strong>DIHAPUS PERMANEN</strong>:</p>
|
||||
<ul class="mt-2 space-y-1 text-sm text-red-700">
|
||||
<li>✕ Pelanggaran & foto bukti</li>
|
||||
<li>✕ Surat Peringatan & notifikasi</li>
|
||||
<li>✕ Data siswa & kelas (hasil sinkron)</li>
|
||||
<li>✕ Kategori, jenis pelanggaran & ambang SP</li>
|
||||
<li>✕ User lain (selain admin utama)</li>
|
||||
<li>✕ Pengaturan sekolah</li>
|
||||
<li>✕ File foto yang sudah diupload</li>
|
||||
</ul>
|
||||
<p class="text-sm text-green-700 mt-3 font-medium">Yang <u>tetap</u> tersimpan:</p>
|
||||
<ul class="mt-1 space-y-0.5 text-sm text-green-700">
|
||||
<li>✓ Akun super admin (username: <strong>admin</strong>)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Stats Cards --}}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6">
|
||||
<div class="px-5 py-4 border-b border-gray-100">
|
||||
<h3 class="text-sm font-semibold text-gray-900">Data yang akan terhapus</h3>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
<div class="p-4 bg-red-50 rounded-xl border border-red-100 text-center">
|
||||
<p class="text-xs text-red-600 font-medium uppercase tracking-wider">Pelanggaran</p>
|
||||
<p class="text-2xl font-bold text-red-700 mt-1">{{ $stats['violations'] }}</p>
|
||||
</div>
|
||||
<div class="p-4 bg-orange-50 rounded-xl border border-orange-100 text-center">
|
||||
<p class="text-xs text-orange-600 font-medium uppercase tracking-wider">Foto</p>
|
||||
<p class="text-2xl font-bold text-orange-700 mt-1">{{ $stats['evidences'] }}</p>
|
||||
</div>
|
||||
<div class="p-4 bg-yellow-50 rounded-xl border border-yellow-100 text-center">
|
||||
<p class="text-xs text-yellow-600 font-medium uppercase tracking-wider">SP</p>
|
||||
<p class="text-2xl font-bold text-yellow-700 mt-1">{{ $stats['sp_letters'] }}</p>
|
||||
</div>
|
||||
<div class="p-4 bg-red-50 rounded-xl border border-red-100 text-center">
|
||||
<p class="text-xs text-red-600 font-medium uppercase tracking-wider">Notifikasi</p>
|
||||
<p class="text-2xl font-bold text-red-700 mt-1">{{ $stats['notifications'] }}</p>
|
||||
</div>
|
||||
<div class="p-4 bg-purple-50 rounded-xl border border-purple-100 text-center">
|
||||
<p class="text-xs text-purple-600 font-medium uppercase tracking-wider">Siswa</p>
|
||||
<p class="text-2xl font-bold text-purple-700 mt-1">{{ $stats['students'] }}</p>
|
||||
</div>
|
||||
<div class="p-4 bg-indigo-50 rounded-xl border border-indigo-100 text-center">
|
||||
<p class="text-xs text-indigo-600 font-medium uppercase tracking-wider">Kelas</p>
|
||||
<p class="text-2xl font-bold text-indigo-700 mt-1">{{ $stats['classes'] }}</p>
|
||||
</div>
|
||||
<div class="p-4 bg-teal-50 rounded-xl border border-teal-100 text-center">
|
||||
<p class="text-xs text-teal-600 font-medium uppercase tracking-wider">Settings</p>
|
||||
<p class="text-2xl font-bold text-teal-700 mt-1">{{ $stats['settings'] }}</p>
|
||||
</div>
|
||||
<div class="p-4 bg-gray-50 rounded-xl border border-gray-100 text-center">
|
||||
<p class="text-xs text-gray-600 font-medium uppercase tracking-wider">User Lain</p>
|
||||
<p class="text-2xl font-bold text-gray-700 mt-1">{{ $stats['users_other'] }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Confirm Form --}}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
|
||||
<form action="{{ route('settings.reset.run') }}" method="POST" onsubmit="return confirm('⚠️ YAKIN INGIN RESET? Semua data kecuali akun admin akan hilang permanen!')">
|
||||
@csrf
|
||||
<div class="p-5 space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1.5">
|
||||
<i class="fa-solid fa-lock mr-1.5 text-gray-400"></i>
|
||||
Masukkan Password Admin untuk Konfirmasi
|
||||
</label>
|
||||
<input type="password" name="confirm_password" required
|
||||
placeholder="Password akun admin saat ini"
|
||||
class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-5 py-4 bg-gray-50 border-t border-gray-100 rounded-b-xl flex justify-between items-center">
|
||||
<a href="{{ route('dashboard') }}" class="text-sm text-gray-500 hover:text-gray-700 transition">
|
||||
<i class="fa-solid fa-arrow-left mr-1"></i> Kembali
|
||||
</a>
|
||||
<button type="submit"
|
||||
class="inline-flex items-center px-6 py-2.5 text-sm font-medium text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition shadow-sm">
|
||||
<i class="fa-solid fa-bomb mr-2"></i>
|
||||
Reset Aplikasi
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,87 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Sinkronisasi Data Siswa')
|
||||
|
||||
@section('content')
|
||||
<div>
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Sinkronisasi Data Siswa</h1>
|
||||
<p class="text-sm text-gray-500">Sinkronkan data siswa dari Database Kesiswaan</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
|
||||
<form action="{{ route('settings.sync.run') }}" method="POST" class="p-6 space-y-5">
|
||||
@csrf
|
||||
|
||||
{{-- URL Kesiswaan --}}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1.5">URL Database Kesiswaan</label>
|
||||
<input type="url" name="base_url" value="{{ old('base_url', $baseUrl) }}" required
|
||||
placeholder="http://database-kesiswaan.local"
|
||||
class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
@error('base_url') <p class="mt-1 text-sm text-blue-600">{{ $message }}</p> @enderror
|
||||
@if($baseUrl)
|
||||
<p class="mt-1.5 text-xs text-green-600 flex items-center">
|
||||
<svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
URL tersimpan: {{ $baseUrl }}
|
||||
</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Token --}}
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1.5">Token Sinkronisasi</label>
|
||||
<div class="relative">
|
||||
<input type="password" name="token" value="{{ old('token', $hasToken ? '********' : '') }}"
|
||||
placeholder="Masukkan token akses"
|
||||
class="w-full px-4 py-2.5 border border-gray-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition pr-24"
|
||||
id="tokenInput"
|
||||
@if($hasToken) readonly onfocus="this.removeAttribute('readonly'); this.value=''; this.type='password';" @endif>
|
||||
@if($hasToken)
|
||||
<button type="button" onclick="document.getElementById('tokenInput').removeAttribute('readonly'); document.getElementById('tokenInput').value=''; document.getElementById('tokenInput').focus();"
|
||||
class="absolute right-2 top-1/2 -translate-y-1/2 px-3 py-1 text-xs font-medium text-blue-600 bg-blue-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition">
|
||||
Ganti
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
@error('token') <p class="mt-1 text-sm text-blue-600">{{ $message }}</p> @enderror
|
||||
@if($hasToken)
|
||||
<p class="mt-1.5 text-xs text-green-600 flex items-center">
|
||||
<svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Token sudah tersimpan. Klik <strong>"Ganti"</strong> untuk memperbarui.
|
||||
</p>
|
||||
@else
|
||||
<p class="mt-1 text-xs text-gray-500">Token didapatkan dari menu Pengaturan → Sync Tokens di Database Kesiswaan.</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
{{-- Info siswa --}}
|
||||
@if($studentCount > 0)
|
||||
<div class="p-4 bg-blue-50 border border-blue-200 rounded-xl">
|
||||
<div class="flex items-center space-x-2">
|
||||
<svg class="w-5 h-5 text-blue-600 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<div class="text-sm text-blue-700">
|
||||
<strong>{{ $studentCount }}</strong> siswa sudah tersinkron. Sinkronisasi ulang akan memperbarui data yang sudah ada.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Tombol --}}
|
||||
<button type="submit"
|
||||
class="w-full px-4 py-3 text-sm font-medium text-white bg-blue-600 rounded-xl hover:bg-blue-700 transition shadow-sm flex items-center justify-center space-x-2">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
|
||||
</svg>
|
||||
<span>Jalankan Sinkronisasi</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,54 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Ambang Surat Peringatan')
|
||||
|
||||
@section('content')
|
||||
<div>
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Ambang Surat Peringatan</h1>
|
||||
<p class="text-sm text-gray-500">Atur batas poin untuk setiap tingkat Surat Peringatan</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200">
|
||||
<form action="{{ route('settings.thresholds.update') }}" method="POST" class="p-6 space-y-6">
|
||||
@csrf @method('PUT')
|
||||
|
||||
@foreach($thresholds as $t)
|
||||
<input type="hidden" name="thresholds[{{ $loop->index }}][id]" value="{{ $t->id }}">
|
||||
<div class="p-4 rounded-lg border-2" style="border-color: {{ $t->color }}20; background-color: {{ $t->color }}08">
|
||||
<div class="flex items-center space-x-2 mb-3">
|
||||
<span class="w-3 h-3 rounded-full" style="background-color: {{ $t->color }}"></span>
|
||||
<h3 class="text-lg font-semibold" style="color: {{ $t->color }}">{{ $t->name }}</h3>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-700 mb-1">Nama</label>
|
||||
<input type="text" name="thresholds[{{ $loop->index }}][name]" value="{{ $t->name }}"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-700 mb-1">Minimal Poin</label>
|
||||
<input type="number" name="thresholds[{{ $loop->index }}][min_points]" value="{{ $t->min_points }}" min="0"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-700 mb-1">Maksimal Poin (kosongkan = tak terbatas)</label>
|
||||
<input type="number" name="thresholds[{{ $loop->index }}][max_points]" value="{{ $t->max_points }}" min="0"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium text-gray-700 mb-1">Deskripsi</label>
|
||||
<input type="text" name="thresholds[{{ $loop->index }}][default_description]" value="{{ $t->default_description }}"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
|
||||
<button type="submit" class="w-full px-4 py-2.5 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition">
|
||||
Simpan Perubahan
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@@ -0,0 +1,361 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Jenis Pelanggaran')
|
||||
|
||||
@section('content')
|
||||
<div x-data="violationTypeManager()">
|
||||
{{-- Header --}}
|
||||
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-900">Jenis Pelanggaran</h1>
|
||||
<p class="text-sm text-gray-500 mt-1">Daftar jenis pelanggaran beserta poin dan sanksi default</p>
|
||||
</div>
|
||||
<button @click="openCreate()"
|
||||
class="inline-flex items-center px-4 py-2.5 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition shadow-sm">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
Tambah Jenis
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- Filter & Search Bar --}}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 mb-6">
|
||||
<form method="GET" class="p-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
<div class="relative">
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
<input type="text" name="search" value="{{ request('search') }}"
|
||||
placeholder="Cari jenis pelanggaran..."
|
||||
class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-xl text-sm 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-300 rounded-xl text-sm 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>
|
||||
@endforeach
|
||||
</select>
|
||||
<div class="flex space-x-2">
|
||||
<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">
|
||||
Filter
|
||||
</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-300 rounded-xl hover:bg-gray-50 transition">
|
||||
Reset
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{{-- Table --}}
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead>
|
||||
<tr class="bg-gray-50">
|
||||
<th class="px-5 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Kategori</th>
|
||||
<th class="px-5 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Nama Pelanggaran</th>
|
||||
<th class="px-5 py-3.5 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Poin</th>
|
||||
<th class="px-5 py-3.5 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Sanksi Default</th>
|
||||
<th class="px-5 py-3.5 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider">Status</th>
|
||||
<th class="px-5 py-3.5 text-right text-xs font-semibold text-gray-500 uppercase tracking-wider">Aksi</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-100">
|
||||
@forelse($types as $type)
|
||||
<tr class="hover:bg-gray-50 transition {{ !$type->is_active ? 'opacity-60' : '' }}">
|
||||
{{-- Kategori --}}
|
||||
<td class="px-5 py-4 whitespace-nowrap">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<span class="w-3 h-3 rounded-full flex-shrink-0" style="background-color: {{ $type->category?->color ?? '#6b7280' }}"></span>
|
||||
<span class="text-sm font-medium" style="color: {{ $type->category?->color ?? '#6b7280' }}">
|
||||
{{ $type->category?->name ?? '-' }}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
{{-- Nama --}}
|
||||
<td class="px-5 py-4">
|
||||
<div class="text-sm font-medium text-gray-900 {{ !$type->is_active ? 'line-through' : '' }}">
|
||||
{{ $type->name }}
|
||||
</div>
|
||||
</td>
|
||||
{{-- Poin --}}
|
||||
<td class="px-5 py-4 text-center whitespace-nowrap">
|
||||
<span class="inline-flex items-center px-2.5 py-1 text-sm font-bold rounded-lg
|
||||
@if($type->points >= 50) bg-blue-100 text-red-700
|
||||
@elseif($type->points >= 15) bg-yellow-100 text-yellow-700
|
||||
@else bg-green-100 text-green-700
|
||||
@endif">
|
||||
+{{ $type->points }}
|
||||
</span>
|
||||
</td>
|
||||
{{-- Sanksi --}}
|
||||
<td class="px-5 py-4">
|
||||
<span class="text-sm text-gray-600 {{ !$type->is_active ? 'line-through' : '' }}">
|
||||
{{ $type->default_sanction ?: '-' }}
|
||||
</span>
|
||||
</td>
|
||||
{{-- Status --}}
|
||||
<td class="px-5 py-4 text-center whitespace-nowrap">
|
||||
@if($type->is_active)
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium bg-green-100 text-green-700 rounded-full">
|
||||
<span class="w-1.5 h-1.5 bg-green-500 rounded-full mr-1.5"></span>
|
||||
Aktif
|
||||
</span>
|
||||
@else
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 text-xs font-medium bg-gray-100 text-gray-500 rounded-full">
|
||||
<span class="w-1.5 h-1.5 bg-gray-400 rounded-full mr-1.5"></span>
|
||||
Nonaktif
|
||||
</span>
|
||||
@endif
|
||||
</td>
|
||||
{{-- Aksi --}}
|
||||
<td class="px-5 py-4 text-right whitespace-nowrap">
|
||||
<div class="flex items-center justify-end space-x-2">
|
||||
<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 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">
|
||||
<svg class="w-3.5 h-3.5 mr-1" 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>
|
||||
Edit
|
||||
</button>
|
||||
@if($type->is_active)
|
||||
<form action="{{ route('settings.violation-types.update', $type->id) }}" method="POST" class="inline">
|
||||
@csrf @method('PUT')
|
||||
<input type="hidden" name="category_id" value="{{ $type->category_id }}">
|
||||
<input type="hidden" name="name" value="{{ $type->name }}">
|
||||
<input type="hidden" name="points" value="{{ $type->points }}">
|
||||
<input type="hidden" name="default_sanction" value="{{ $type->default_sanction }}">
|
||||
<input type="hidden" name="is_active" value="0">
|
||||
<button type="submit"
|
||||
class="inline-flex items-center 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">
|
||||
Nonaktifkan
|
||||
</button>
|
||||
</form>
|
||||
@else
|
||||
<form action="{{ route('settings.violation-types.update', $type->id) }}" method="POST" class="inline">
|
||||
@csrf @method('PUT')
|
||||
<input type="hidden" name="category_id" value="{{ $type->category_id }}">
|
||||
<input type="hidden" name="name" value="{{ $type->name }}">
|
||||
<input type="hidden" name="points" value="{{ $type->points }}">
|
||||
<input type="hidden" name="default_sanction" value="{{ $type->default_sanction }}">
|
||||
<input type="hidden" name="is_active" value="1">
|
||||
<button type="submit"
|
||||
class="inline-flex items-center 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">
|
||||
Aktifkan
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
<form action="{{ route('settings.violation-types.destroy', $type->id) }}" method="POST" class="inline"
|
||||
x-data x-on:submit.prevent="if(await window.confirmSwal({text:'Hapus jenis pelanggaran ini?'})) $el.submit()"">
|
||||
@csrf @method('DELETE')
|
||||
<button type="submit"
|
||||
class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-blue-600 bg-red-50 border border-blue-200 rounded-lg hover:bg-blue-100 transition">
|
||||
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="6" class="px-5 py-16 text-center">
|
||||
<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="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
|
||||
</svg>
|
||||
<p class="text-sm text-gray-500 mb-1">Tidak ada jenis pelanggaran ditemukan</p>
|
||||
<p class="text-xs text-gray-400">Coba ubah filter atau tambah jenis pelanggaran baru</p>
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{{-- Pagination --}}
|
||||
@if($types->hasPages())
|
||||
<div class="px-5 py-3 border-t border-gray-100 bg-gray-50">
|
||||
{{ $types->appends(request()->query())->links() }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
{{-- Summary --}}
|
||||
<div class="px-5 py-3 border-t border-gray-100 bg-gray-50 flex items-center justify-between text-xs text-gray-500">
|
||||
<span>Menampilkan {{ $types->firstItem() ?? 0 }}–{{ $types->lastItem() ?? 0 }} dari {{ $types->total() }} jenis</span>
|
||||
<span class="font-medium">{{ $types->total() }} total</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Modal Tambah / Edit --}}
|
||||
<div x-show="modalOpen" class="fixed inset-0 z-50 overflow-y-auto" style="display: none;">
|
||||
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0">
|
||||
<div x-show="modalOpen" @click="modalOpen = false" class="fixed inset-0 bg-gray-500 bg-opacity-50 transition-opacity"></div>
|
||||
|
||||
<div x-show="modalOpen" @click.away="modalOpen = false"
|
||||
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">
|
||||
{{-- 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">
|
||||
<div class="w-10 h-10 rounded-lg flex items-center justify-center" :class="isEditing ? 'bg-blue-100' : 'bg-blue-100'">
|
||||
<svg x-show="!isEditing" class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
<svg x-show="isEditing" class="w-5 h-5 text-blue-600" 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>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900" x-text="isEditing ? 'Edit Jenis Pelanggaran' : 'Tambah Jenis Pelanggaran'"></h3>
|
||||
<p class="text-sm text-gray-500" x-text="isEditing ? 'Ubah detail jenis pelanggaran' : 'Buat jenis pelanggaran baru'"></p>
|
||||
</div>
|
||||
</div>
|
||||
<button @click="modalOpen = false" class="text-gray-400 hover:text-gray-600 transition">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- Form --}}
|
||||
<form :action="isEditing ? `/settings/violation-types/${editId}` : '{{ route('settings.violation-types.store') }}'"
|
||||
method="POST" class="p-6 space-y-5">
|
||||
@csrf
|
||||
<input type="hidden" name="_method" :value="isEditing ? 'PUT' : 'POST'">
|
||||
|
||||
{{-- Kategori --}}
|
||||
<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-300 rounded-xl text-sm 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>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{{-- Nama --}}
|
||||
<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-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition"
|
||||
placeholder="Contoh: Terlambat datang ke sekolah">
|
||||
</div>
|
||||
|
||||
{{-- Poin + Sanksi --}}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<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-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition">
|
||||
</div>
|
||||
<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-300 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition"
|
||||
placeholder="Contoh: Teguran lisan">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 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>
|
||||
<p class="text-sm font-medium text-gray-900">Status Aktif</p>
|
||||
<p class="text-xs text-gray-500">Nonaktifkan untuk menyembunyikan jenis pelanggaran ini</p>
|
||||
</div>
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<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>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{{-- 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 justify-between p-3 bg-white rounded-lg border border-gray-200">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<span class="w-3 h-3 rounded-full flex-shrink-0"
|
||||
:style="{ backgroundColor: categoryColor }"></span>
|
||||
<span class="text-sm font-medium text-gray-900" x-text="formName || 'Nama Pelanggaran'"></span>
|
||||
</div>
|
||||
<span class="text-sm font-bold text-blue-600" x-text="'+' + (formPoints || 0)"></span>
|
||||
</div>
|
||||
<p class="text-xs text-gray-400 mt-1.5" x-text="formSanction ? 'Sanksi: ' + formSanction : ''"></p>
|
||||
</div>
|
||||
|
||||
{{-- Buttons --}}
|
||||
<div class="flex justify-end space-x-3 pt-2">
|
||||
<button type="button" @click="modalOpen = false"
|
||||
class="px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-xl hover:bg-gray-50 transition">
|
||||
Batal
|
||||
</button>
|
||||
<button type="submit"
|
||||
class="px-5 py-2.5 text-sm font-medium text-white rounded-xl transition shadow-sm"
|
||||
:class="isEditing ? 'bg-blue-600 hover:bg-blue-700' : 'bg-blue-600 hover:bg-blue-700'"
|
||||
x-text="isEditing ? 'Simpan Perubahan' : 'Tambah Jenis'">
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
function violationTypeManager() {
|
||||
return {
|
||||
modalOpen: false,
|
||||
isEditing: false,
|
||||
editId: null,
|
||||
formCategory: '',
|
||||
formName: '',
|
||||
formPoints: 0,
|
||||
formSanction: '',
|
||||
formActive: true,
|
||||
categoryColor: '#6b7280',
|
||||
|
||||
openCreate() {
|
||||
this.isEditing = false;
|
||||
this.editId = null;
|
||||
this.formCategory = '';
|
||||
this.formName = '';
|
||||
this.formPoints = 0;
|
||||
this.formSanction = '';
|
||||
this.formActive = true;
|
||||
this.categoryColor = '#6b7280';
|
||||
this.modalOpen = true;
|
||||
},
|
||||
|
||||
openEdit(id, catId, name, points, sanction, active) {
|
||||
this.isEditing = true;
|
||||
this.editId = id;
|
||||
this.formCategory = catId;
|
||||
this.formName = name;
|
||||
this.formPoints = points;
|
||||
this.formSanction = sanction;
|
||||
this.formActive = active;
|
||||
this.updateCategoryColor(catId);
|
||||
this.modalOpen = true;
|
||||
},
|
||||
|
||||
updateCategoryColor(catId) {
|
||||
const colors = @json($categories->pluck('color', 'id'));
|
||||
this.categoryColor = colors[catId] || '#6b7280';
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
Reference in New Issue
Block a user