ui(school-info): rombak kartu Tambah/Edit Informasi — kolom lebih lebar (2/5), header gradien dengan watermark & subtitle kontekstual, kategori jadi pill berwarna (6 pilihan), input berikon + counter judul 0/200, tanggal dengan hint badge Hari Ini, textarea berikon, toggle publikasi premium, tombol submit gradien dengan ikon dinamis
This commit is contained in:
Novy San87
@@ -149,39 +149,56 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid lg:grid-cols-3 gap-6">
|
<div class="grid lg:grid-cols-5 gap-6">
|
||||||
|
|
||||||
{{-- ===== Form ===== --}}
|
{{-- ===== Form ===== --}}
|
||||||
<div class="lg:col-span-1">
|
<div class="lg:col-span-2">
|
||||||
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden lg:sticky lg:top-4">
|
<div class="bg-white rounded-3xl shadow-sm border border-slate-200 overflow-hidden lg:sticky lg:top-4">
|
||||||
<div class="relative overflow-hidden px-5 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 flex items-center justify-between">
|
{{-- Header form --}}
|
||||||
<div class="absolute -right-4 -top-6 w-24 h-24 rounded-full bg-white/10 blur-xl"></div>
|
<div class="relative overflow-hidden px-6 py-5 bg-gradient-to-r from-blue-600 via-indigo-600 to-violet-600">
|
||||||
<h2 class="relative font-bold text-white flex items-center gap-2">
|
<i class="fa-solid fa-bullhorn absolute -right-3 -bottom-5 text-7xl text-white/10 rotate-12"></i>
|
||||||
<i class="fa-solid" :class="id ? 'fa-pen-to-square' : 'fa-circle-plus'"></i>
|
<div class="absolute -left-8 -top-8 w-32 h-32 rounded-full bg-white/10 blur-xl"></div>
|
||||||
|
<div class="relative flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="w-10 h-10 rounded-2xl bg-white/15 backdrop-blur border border-white/20 flex items-center justify-center">
|
||||||
|
<i class="fa-solid text-white" :class="id ? 'fa-pen-to-square' : 'fa-circle-plus'"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="font-bold text-white leading-tight">
|
||||||
<span x-text="id ? 'Edit Informasi' : 'Tambah Informasi'">Tambah Informasi</span>
|
<span x-text="id ? 'Edit Informasi' : 'Tambah Informasi'">Tambah Informasi</span>
|
||||||
</h2>
|
</h2>
|
||||||
|
<p class="text-[11px] text-blue-100/80" x-text="id ? 'Perbarui detail pengumuman' : 'Buat pengumuman baru untuk wali murid'">Buat pengumuman baru untuk wali murid</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<button type="button" x-show="id" @click="reset()" x-cloak
|
<button type="button" x-show="id" @click="reset()" x-cloak
|
||||||
class="relative text-xs font-medium text-blue-100 hover:text-white hover:underline transition">
|
class="inline-flex items-center gap-1 rounded-xl bg-white/15 backdrop-blur border border-white/20 px-3 py-1.5 text-[11px] font-semibold text-white hover:bg-white/25 transition">
|
||||||
<i class="fa-solid fa-xmark mr-0.5"></i>Batal
|
<i class="fa-solid fa-xmark"></i>Batal edit
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<form class="p-5 space-y-4" method="POST"
|
</div>
|
||||||
|
|
||||||
|
<form class="p-6 space-y-5" method="POST"
|
||||||
:action="id ? '{{ route('settings.school-info.update', 0) }}'.replace('/0', '/' + id) : '{{ route('settings.school-info.store') }}'">
|
:action="id ? '{{ route('settings.school-info.update', 0) }}'.replace('/0', '/' + id) : '{{ route('settings.school-info.store') }}'">
|
||||||
@csrf
|
@csrf
|
||||||
<input type="hidden" name="_method" :value="id ? 'PUT' : 'POST'">
|
<input type="hidden" name="_method" :value="id ? 'PUT' : 'POST'">
|
||||||
|
|
||||||
|
{{-- Judul --}}
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-xs font-bold text-slate-700 mb-1.5">Judul Informasi <span class="text-rose-500">*</span></label>
|
<label class="block text-xs font-bold text-slate-700 mb-1.5">Judul Informasi <span class="text-rose-500">*</span></label>
|
||||||
|
<div class="relative">
|
||||||
|
<i class="fa-solid fa-heading absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-300 text-sm pointer-events-none"></i>
|
||||||
<input type="text" name="title" x-model="title" required maxlength="200"
|
<input type="text" name="title" x-model="title" required maxlength="200"
|
||||||
class="w-full rounded-xl border-slate-200 text-sm focus:border-blue-500 focus:ring-blue-500 transition"
|
class="w-full pl-9 pr-14 rounded-xl border-slate-200 text-sm bg-gray-50/50 focus:bg-white focus:border-blue-500 focus:ring-blue-500 transition"
|
||||||
placeholder="cth: Jadwal UTS Semester Ganjil 2026/2027">
|
placeholder="cth: Jadwal UTS Semester Ganjil 2026/2027">
|
||||||
<p class="text-[11px] text-slate-400 mt-1">Judul singkat yang tampil di beranda wali murid.</p>
|
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-[10px] font-semibold text-slate-300"
|
||||||
|
x-text="title.length + '/200'">0/200</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="grid grid-cols-2 gap-3">
|
{{-- Kategori pill + tanggal --}}
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-xs font-bold text-slate-700 mb-1.5">Kategori</label>
|
<label class="block text-xs font-bold text-slate-700 mb-1.5">Kategori</label>
|
||||||
<select name="category" x-model="category" class="w-full rounded-xl border-slate-200 text-sm focus:border-blue-500 focus:ring-blue-500 transition cursor-pointer">
|
<select name="category" x-model="category" class="hidden" aria-hidden="true" tabindex="-1">
|
||||||
<option value="umum">Umum</option>
|
<option value="umum">Umum</option>
|
||||||
<option value="akademik">Akademik</option>
|
<option value="akademik">Akademik</option>
|
||||||
<option value="kegiatan">Kegiatan</option>
|
<option value="kegiatan">Kegiatan</option>
|
||||||
@@ -189,43 +206,67 @@
|
|||||||
<option value="uas">UAS</option>
|
<option value="uas">UAS</option>
|
||||||
<option value="lainnya">Lainnya</option>
|
<option value="lainnya">Lainnya</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
<div class="grid grid-cols-3 gap-2">
|
||||||
<div>
|
<template x-for="c in categories" :key="c.value">
|
||||||
<label class="block text-xs font-bold text-slate-700 mb-1.5">Tanggal Kegiatan</label>
|
<button type="button" @click="category = c.value"
|
||||||
<input type="date" name="event_date" x-model="event_date"
|
class="flex flex-col items-center gap-1 rounded-xl border px-2 py-2.5 text-[11px] font-semibold transition active:scale-95"
|
||||||
class="w-full rounded-xl border-slate-200 text-sm focus:border-blue-500 focus:ring-blue-500 transition">
|
:class="category === c.value ? c.active : c.idle">
|
||||||
|
<i class="fa-solid text-sm" :class="c.icon"></i>
|
||||||
|
<span x-text="c.label"></span>
|
||||||
|
</button>
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{{-- Tanggal --}}
|
||||||
|
<div>
|
||||||
|
<label class="block text-xs font-bold text-slate-700 mb-1.5">Tanggal Kegiatan <span class="font-normal text-slate-400">(opsional)</span></label>
|
||||||
|
<div class="relative">
|
||||||
|
<i class="fa-solid fa-calendar-day absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-300 text-sm pointer-events-none"></i>
|
||||||
|
<input type="date" name="event_date" x-model="event_date"
|
||||||
|
class="w-full pl-9 rounded-xl border-slate-200 text-sm bg-gray-50/50 focus:bg-white focus:border-blue-500 focus:ring-blue-500 transition">
|
||||||
|
</div>
|
||||||
|
<p class="text-[11px] text-slate-400 mt-1">Kegiatan hari ini otomatis dapat badge <span class="font-semibold text-emerald-600">✨ Hari ini</span> di daftar.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{-- Isi --}}
|
||||||
<div>
|
<div>
|
||||||
<label class="block text-xs font-bold text-slate-700 mb-1.5">Isi Informasi</label>
|
<label class="block text-xs font-bold text-slate-700 mb-1.5">Isi Informasi</label>
|
||||||
|
<div class="relative">
|
||||||
|
<i class="fa-solid fa-align-left absolute left-3.5 top-3.5 text-slate-300 text-sm pointer-events-none"></i>
|
||||||
<textarea name="content" x-model="content" rows="4"
|
<textarea name="content" x-model="content" rows="4"
|
||||||
class="w-full rounded-xl border-slate-200 text-sm focus:border-blue-500 focus:ring-blue-500 transition resize-none"
|
class="w-full pl-9 rounded-xl border-slate-200 text-sm bg-gray-50/50 focus:bg-white focus:border-blue-500 focus:ring-blue-500 transition resize-none"
|
||||||
placeholder="Detail pengumuman..."></textarea>
|
placeholder="Detail pengumuman..."></textarea>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<label class="flex items-center justify-between rounded-xl border border-slate-200 bg-slate-50/50 px-4 py-3 cursor-pointer hover:border-blue-200 hover:bg-blue-50/40 transition">
|
{{-- Publikasi --}}
|
||||||
<span class="flex items-center gap-2.5 text-sm text-slate-700">
|
<label class="flex items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-gradient-to-r from-slate-50 to-blue-50/40 px-4 py-3.5 cursor-pointer hover:border-blue-300 hover:shadow-sm transition">
|
||||||
<i class="fa-solid fa-bullhorn text-blue-500"></i>
|
<span class="flex items-center gap-3 text-sm text-slate-700">
|
||||||
|
<span class="w-9 h-9 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center">
|
||||||
|
<i class="fa-solid fa-bullhorn"></i>
|
||||||
|
</span>
|
||||||
<span>
|
<span>
|
||||||
<span class="font-semibold">Publikasikan langsung</span>
|
<span class="font-bold">Publikasikan langsung</span>
|
||||||
<span class="block text-[11px] text-slate-400 font-normal">Wali murid langsung dapat notifikasi</span>
|
<span class="block text-[11px] text-slate-400 font-normal">Wali murid langsung dapat notifikasi push</span>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
<input type="checkbox" name="is_published" x-model="is_published" value="1"
|
<input type="checkbox" name="is_published" x-model="is_published" value="1"
|
||||||
class="w-4 h-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500 accent-blue-600">
|
class="w-5 h-5 rounded-md border-slate-300 text-blue-600 focus:ring-blue-500 accent-blue-600 cursor-pointer">
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<button class="w-full px-4 py-3 rounded-xl bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white text-sm font-bold shadow-lg shadow-blue-500/25 transition hover:shadow-blue-600/30 active:scale-[0.99]">
|
{{-- Submit --}}
|
||||||
<i class="fa-solid fa-paper-plane mr-1.5"></i>
|
<button type="submit"
|
||||||
<span x-text="id ? 'Simpan Perubahan' : 'Publikasikan'">Publikasikan</span>
|
class="w-full px-4 py-3.5 rounded-2xl bg-gradient-to-r from-blue-600 via-indigo-600 to-violet-600 hover:from-blue-700 hover:via-indigo-700 hover:to-violet-700 text-white text-sm font-bold shadow-lg shadow-indigo-500/30 transition hover:shadow-indigo-600/40 active:scale-[0.99] inline-flex items-center justify-center gap-2">
|
||||||
|
<i class="fa-solid" :class="id ? 'fa-floppy-disk' : 'fa-paper-plane'"></i>
|
||||||
|
<span x-text="id ? 'Simpan Perubahan' : 'Publikasikan Sekarang'">Publikasikan Sekarang</span>
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- ===== Daftar ===== --}}
|
{{-- ===== Daftar ===== --}}
|
||||||
<div class="lg:col-span-2 space-y-3">
|
<div class="lg:col-span-3 space-y-3">
|
||||||
<template x-for="item in filtered" :key="item.id">
|
<template x-for="item in filtered" :key="item.id">
|
||||||
<div class="group bg-white rounded-2xl shadow-sm border border-slate-200 p-5 hover:shadow-lg hover:shadow-blue-900/5 hover:border-blue-200 transition-all duration-200">
|
<div class="group bg-white rounded-2xl shadow-sm border border-slate-200 p-5 hover:shadow-lg hover:shadow-blue-900/5 hover:border-blue-200 transition-all duration-200">
|
||||||
<div class="flex items-start gap-4">
|
<div class="flex items-start gap-4">
|
||||||
@@ -314,6 +355,27 @@ function schoolInfoForm(items) {
|
|||||||
content: '',
|
content: '',
|
||||||
is_published: true,
|
is_published: true,
|
||||||
|
|
||||||
|
categories: [
|
||||||
|
{ value: 'umum', label: 'Umum', icon: 'fa-bullhorn',
|
||||||
|
active: 'bg-gradient-to-br from-slate-500 to-slate-700 text-white border-transparent shadow-md shadow-slate-500/25',
|
||||||
|
idle: 'bg-slate-50 text-slate-600 border-slate-200 hover:border-slate-300 hover:bg-slate-100' },
|
||||||
|
{ value: 'akademik', label: 'Akademik', icon: 'fa-graduation-cap',
|
||||||
|
active: 'bg-gradient-to-br from-blue-500 to-indigo-600 text-white border-transparent shadow-md shadow-blue-500/25',
|
||||||
|
idle: 'bg-blue-50/60 text-blue-700 border-blue-100 hover:border-blue-300 hover:bg-blue-50' },
|
||||||
|
{ value: 'kegiatan', label: 'Kegiatan', icon: 'fa-flag',
|
||||||
|
active: 'bg-gradient-to-br from-emerald-500 to-teal-600 text-white border-transparent shadow-md shadow-emerald-500/25',
|
||||||
|
idle: 'bg-emerald-50/60 text-emerald-700 border-emerald-100 hover:border-emerald-300 hover:bg-emerald-50' },
|
||||||
|
{ value: 'uts', label: 'UTS', icon: 'fa-file-pen',
|
||||||
|
active: 'bg-gradient-to-br from-orange-400 to-amber-600 text-white border-transparent shadow-md shadow-orange-500/25',
|
||||||
|
idle: 'bg-orange-50/60 text-orange-700 border-orange-100 hover:border-orange-300 hover:bg-orange-50' },
|
||||||
|
{ value: 'uas', label: 'UAS', icon: 'fa-file-lines',
|
||||||
|
active: 'bg-gradient-to-br from-rose-500 to-red-600 text-white border-transparent shadow-md shadow-rose-500/25',
|
||||||
|
idle: 'bg-rose-50/60 text-rose-700 border-rose-100 hover:border-rose-300 hover:bg-rose-50' },
|
||||||
|
{ value: 'lainnya', label: 'Lainnya', icon: 'fa-ellipsis',
|
||||||
|
active: 'bg-gradient-to-br from-violet-500 to-fuchsia-600 text-white border-transparent shadow-md shadow-violet-500/25',
|
||||||
|
idle: 'bg-violet-50/60 text-violet-700 border-violet-100 hover:border-violet-300 hover:bg-violet-50' },
|
||||||
|
],
|
||||||
|
|
||||||
catMeta: {
|
catMeta: {
|
||||||
umum: { icon: 'fa-bullhorn', tile: 'bg-gradient-to-br from-slate-500 to-slate-700', badge: 'bg-slate-100 text-slate-700' },
|
umum: { icon: 'fa-bullhorn', tile: 'bg-gradient-to-br from-slate-500 to-slate-700', badge: 'bg-slate-100 text-slate-700' },
|
||||||
akademik: { icon: 'fa-graduation-cap', tile: 'bg-gradient-to-br from-blue-500 to-indigo-600', badge: 'bg-blue-50 text-blue-700' },
|
akademik: { icon: 'fa-graduation-cap', tile: 'bg-gradient-to-br from-blue-500 to-indigo-600', badge: 'bg-blue-50 text-blue-700' },
|
||||||
|
|||||||
Reference in New Issue
Block a user