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/attendances/create.blade.php
+6 -6
View File
@@ -18,7 +18,7 @@
</div>
{{-- Pilih Kelas + Tanggal --}}
<div class="rounded-2xl bg-gradient-to-br from-white to-gray-50/80 border border-gray-200 shadow-sm mb-6 transition-all duration-200 hover:shadow-md">
<div class="rounded-2xl bg-gradient-to-br from-white to-gray-50/80 border border-slate-200 shadow-sm mb-6 transition-all duration-200 hover:shadow-md">
<form method="GET" x-data="attendanceLink()" class="p-6">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
@@ -26,14 +26,14 @@
<i class="fa-solid fa-calendar text-gray-400 mr-1"></i> Tanggal <span class="text-red-500">*</span>
</label>
<input type="date" name="date" value="{{ $date }}" x-model="date" @change="refreshStatus($event)"
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition shadow-sm">
class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition shadow-sm">
</div>
<div>
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">
<i class="fa-solid fa-school text-gray-400 mr-1"></i> Kelas <span class="text-red-500">*</span>
</label>
<select name="class_name" required x-model="sel"
class="w-full px-4 py-2.5 border border-gray-200 rounded-xl text-sm bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition shadow-sm">
class="w-full px-4 py-2.5 border border-slate-200 rounded-xl text-sm bg-white focus:bg-white focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition shadow-sm">
<option value="">Pilih kelas...</option>
<template x-for="cn in classList" :key="cn">
<option :value="cn" x-text="label(cn)"></option>
@@ -85,7 +85,7 @@
<input type="hidden" name="auto_violation" value="1">
{{-- Info bar --}}
<div class="rounded-2xl bg-gradient-to-br from-slate-50 to-white border border-gray-200 shadow-sm overflow-hidden mb-5 transition-all duration-200 hover:shadow-md">
<div class="rounded-2xl bg-gradient-to-br from-slate-50 to-white border border-slate-200 shadow-sm overflow-hidden mb-5 transition-all duration-200 hover:shadow-md">
<div class="px-5 py-3.5 flex flex-wrap items-center justify-between gap-3">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shadow-sm">
@@ -109,7 +109,7 @@
</div>
{{-- Grid table --}}
<div class="rounded-2xl bg-white border border-gray-200 shadow-sm overflow-hidden transition-all duration-200 hover:shadow-md">
<div class="rounded-2xl bg-white border border-slate-200 shadow-sm overflow-hidden transition-all duration-200 hover:shadow-md">
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-100">
<thead>
@@ -219,7 +219,7 @@
{{-- Bottom actions --}}
<div class="mt-6 space-y-4">
{{-- Legend + Submit --}}
<div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4 bg-gradient-to-br from-white to-gray-50/50 border border-gray-200 rounded-2xl p-5 shadow-sm">
<div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-4 bg-gradient-to-br from-white to-gray-50/50 border border-slate-200 rounded-2xl p-5 shadow-sm">
<div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-[11px] text-gray-500">
@php
$legends = [
resources/views/attendances/index.blade.php
+4 -4
View File
@@ -19,7 +19,7 @@
{{-- Stats Hari Ini --}}
<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 mb-6">
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-5">
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-5">
<div class="flex items-center gap-2 text-sm text-gray-500">
<i class="fa-regular fa-calendar-check"></i>
<span>Siswa Hari Ini</span>
@@ -33,7 +33,7 @@
</div>
<div class="mt-2 text-3xl font-bold text-red-600">{{ $todayAlphaStudents }}</div>
</div>
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-5">
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 p-5">
<div class="flex items-center gap-2 text-sm text-gray-500">
<i class="fa-regular fa-calendar-alt"></i>
<span>Siswa Bulan Ini</span>
@@ -50,7 +50,7 @@
</div>
{{-- Kalender Presensi --}}
<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"
x-data="attendanceCalendar({{ json_encode($calendarData) }})" x-init="init">
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
<div class="flex items-center gap-3">
@@ -89,7 +89,7 @@
: day.isCurrentMonth && day.total > 0
? 'border-emerald-100 hover:border-emerald-200 hover:bg-emerald-50'
: day.isCurrentMonth
? 'border-gray-100 hover:border-gray-200 hover:bg-gray-50'
? 'border-gray-100 hover:border-slate-200 hover:bg-gray-50'
: 'border-gray-50 bg-gray-50/30 text-gray-300',
day.total > 0 && day.isCurrentMonth ? 'cursor-pointer' : 'cursor-default'
]">
resources/views/attendances/recap.blade.php
+18 -18
View File
@@ -27,8 +27,8 @@
</div>
{{-- Tabs --}}
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 mb-6 overflow-hidden">
<div class="flex border-b border-gray-200">
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 mb-6 overflow-hidden">
<div class="flex border-b border-slate-200">
<a href="{{ route('attendances.recap', ['type' => 'daily', 'class_name' => $className, 'date' => request('date', now()->toDateString())]) }}"
class="px-5 py-3 text-sm font-semibold border-b-2 transition {{ $type == 'daily' ? 'text-blue-600 border-blue-600' : 'text-gray-500 border-transparent hover:text-gray-700' }}">
<i class="fa-solid fa-clock mr-1.5"></i> Harian
@@ -52,19 +52,19 @@
<div>
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Tanggal</label>
<input type="date" name="date" value="{{ $date ?? now()->toDateString() }}"
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>
@elseif($type == 'weekly')
<div>
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Awal Minggu</label>
<input type="date" name="week_start" value="{{ $start ? $start->toDateString() : now()->startOfWeek()->toDateString() }}"
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>
@else
<div>
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Bulan</label>
<select name="month"
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">
@foreach(range(1, 12) as $m)
<option value="{{ $m }}" @selected(($month ?? now()->month) == $m)>{{ \Carbon\Carbon::create()->month($m)->format('F') }}</option>
@endforeach
@@ -73,7 +73,7 @@
<div>
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Tahun</label>
<select name="year"
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">
@foreach(range(now()->year, now()->year - 2, -1) as $y)
<option value="{{ $y }}" @selected(($year ?? now()->year) == $y)>{{ $y }}</option>
@endforeach
@@ -84,7 +84,7 @@
<div>
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">Kelas</label>
<select name="class_name"
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 Kelas</option>
@foreach($classNames as $cn)
<option value="{{ $cn }}" @selected($className == $cn)>{{ $cn }}</option>
@@ -105,7 +105,7 @@
{{-- ===== REKAP HARIAN ===== --}}
@if($type == 'daily')
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-100">
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center shadow-sm">
@@ -189,7 +189,7 @@
{{-- ===== REKAP MINGGUAN ===== --}}
@elseif($type == 'weekly')
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-100">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
@@ -221,12 +221,12 @@
@php
$sep = !$loop->last ? 'border-r-2 border-gray-300' : '';
@endphp
<th colspan="4" class="px-3 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider border-b border-gray-200 {{ $sep }}">
<th colspan="4" class="px-3 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider border-b border-slate-200 {{ $sep }}">
{{ $row['label'] }}<br>
<span class="text-[10px] text-gray-400 font-normal">{{ \Carbon\Carbon::parse($row['date'])->format('d/m') }}</span>
</th>
@endforeach
<th colspan="4" class="px-3 py-2 text-center text-xs font-semibold text-gray-800 uppercase tracking-wider border-b border-gray-200 border-l-2 border-gray-400 bg-gray-100/80">
<th colspan="4" class="px-3 py-2 text-center text-xs font-semibold text-gray-800 uppercase tracking-wider border-b border-slate-200 border-l-2 border-gray-400 bg-gray-100/80">
TOTAL<br>
<span class="text-[10px] text-gray-500 font-normal">Hari</span>
</th>
@@ -250,13 +250,13 @@
<tbody class="divide-y divide-gray-50">
@foreach($students as $student)
<tr class="hover:bg-gray-50/50 transition">
<td class="px-4 py-2.5 whitespace-nowrap sticky left-0 bg-white border-r-2 border-gray-200 z-10">
<td class="px-4 py-2.5 whitespace-nowrap sticky left-0 bg-white border-r-2 border-slate-200 z-10">
<p class="text-sm font-semibold text-gray-900">{{ $student->full_name }}</p>
</td>
@foreach($recap as $row)
@php
$s = $row['students'][$student->id] ?? null;
$sep = !$loop->last ? 'border-r-2 border-gray-200' : '';
$sep = !$loop->last ? 'border-r-2 border-slate-200' : '';
@endphp
@if($s)
<td class="px-2 py-2.5 text-center text-xs font-bold text-emerald-600">{{ $s['hadir'] }}</td>
@@ -302,7 +302,7 @@
{{-- ===== REKAP BULANAN ===== --}}
@else
<div class="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-100">
<div class="flex items-center justify-between gap-3">
<div class="flex items-center gap-3">
@@ -334,12 +334,12 @@
@php
$sep = !$loop->last ? 'border-r-2 border-gray-300' : '';
@endphp
<th colspan="4" class="px-3 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider border-b border-gray-200 {{ $sep }}">
<th colspan="4" class="px-3 py-2 text-center text-xs font-semibold text-gray-500 uppercase tracking-wider border-b border-slate-200 {{ $sep }}">
{{ $row['label'] }}<br>
<span class="text-[10px] text-gray-400 font-normal">{{ \Carbon\Carbon::parse($row['start'])->format('d/m') }}-{{ \Carbon\Carbon::parse($row['end'])->format('d/m') }}</span>
</th>
@endforeach
<th colspan="4" class="px-3 py-2 text-center text-xs font-semibold text-gray-800 uppercase tracking-wider border-b border-gray-200 border-l-2 border-gray-400 bg-gray-100/80">
<th colspan="4" class="px-3 py-2 text-center text-xs font-semibold text-gray-800 uppercase tracking-wider border-b border-slate-200 border-l-2 border-gray-400 bg-gray-100/80">
TOTAL<br>
<span class="text-[10px] text-gray-500 font-normal">Hari</span>
</th>
@@ -363,13 +363,13 @@
<tbody class="divide-y divide-gray-50">
@foreach($students as $student)
<tr class="hover:bg-gray-50/50 transition">
<td class="px-4 py-2.5 whitespace-nowrap sticky left-0 bg-white border-r-2 border-gray-200 z-10">
<td class="px-4 py-2.5 whitespace-nowrap sticky left-0 bg-white border-r-2 border-slate-200 z-10">
<p class="text-sm font-semibold text-gray-900">{{ $student->full_name }}</p>
</td>
@foreach($recap as $row)
@php
$s = $row['students'][$student->id] ?? null;
$sep = !$loop->last ? 'border-r-2 border-gray-200' : '';
$sep = !$loop->last ? 'border-r-2 border-slate-200' : '';
@endphp
@if($s)
<td class="px-2 py-2.5 text-center text-xs font-bold text-emerald-600">{{ $s['hadir'] }}</td>