220 lines
13 KiB
PHP
220 lines
13 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>@yield('title', 'Admin Dashboard') - SARAKATA</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: { sans: ['Inter', 'sans-serif'] },
|
|
colors: {
|
|
primary: { 50:'#eef2ff',100:'#e0e7ff',200:'#c7d2fe',300:'#a5b4fc',400:'#818cf8',500:'#6366f1',600:'#4f46e5',700:'#4338ca',800:'#3730a3',900:'#312e81' },
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.gradient-text { background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #2563eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
|
|
|
|
/* TomSelect Custom Styling */
|
|
.ts-control {
|
|
border: 1px solid #e5e7eb !important;
|
|
background-color: #f9fafb !important;
|
|
border-radius: 0.75rem !important;
|
|
padding: 0.75rem 1rem !important;
|
|
font-size: 0.875rem !important;
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
|
|
}
|
|
.ts-control.focus {
|
|
border-color: #6366f1 !important;
|
|
box-shadow: 0 0 0 1px #6366f1 !important;
|
|
}
|
|
.ts-control input {
|
|
font-size: 0.875rem !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 font-sans antialiased flex flex-col h-screen overflow-hidden" x-data="{ sidebarOpen: false }">
|
|
|
|
{{-- TOP HEADER --}}
|
|
<header class="bg-gradient-to-r from-primary-600 via-primary-700 to-primary-800 text-white h-16 flex items-center justify-between px-6 shadow-lg z-20">
|
|
<div class="flex items-center gap-3">
|
|
<!-- Mobile Hamburger -->
|
|
<button @click="sidebarOpen = true" class="md:hidden w-9 h-9 bg-white/15 hover:bg-white/25 rounded-xl flex items-center justify-center backdrop-blur-sm transition focus:outline-none">
|
|
<i class="fas fa-bars text-white"></i>
|
|
</button>
|
|
|
|
<div class="hidden md:flex w-9 h-9 bg-white/15 rounded-xl items-center justify-center backdrop-blur-sm">
|
|
<i class="fas fa-book-open text-lg"></i>
|
|
</div>
|
|
<h1 class="text-base font-bold tracking-wide">SARAKATA <span class="font-normal text-primary-200 hidden sm:inline">— Sistem Informasi Perpustakaan</span></h1>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button class="flex items-center gap-2 px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 transition text-sm font-medium">
|
|
<i class="fas fa-sign-out-alt text-xs"></i> Logout
|
|
</button>
|
|
</form>
|
|
<div class="w-9 h-9 rounded-xl overflow-hidden border-2 border-white/30">
|
|
<img src="https://ui-avatars.com/api/?name={{ auth()->user()->name ?? 'Admin' }}&background=6366f1&color=fff" class="w-full h-full object-cover">
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="flex flex-1 overflow-hidden relative">
|
|
<!-- Overlay Khusus Mobile -->
|
|
<div x-show="sidebarOpen" x-transition.opacity class="fixed inset-0 bg-gray-900/60 z-40 md:hidden backdrop-blur-sm" @click="sidebarOpen = false" style="display: none;"></div>
|
|
|
|
{{-- SIDEBAR --}}
|
|
<aside :class="sidebarOpen ? 'translate-x-0' : '-translate-x-full'" class="w-64 bg-white shadow-2xl flex flex-col overflow-y-auto z-50 border-r border-gray-100 absolute inset-y-0 left-0 transform md:relative md:translate-x-0 transition-transform duration-300 ease-in-out h-full">
|
|
|
|
{{-- Profile --}}
|
|
<div class="flex flex-col items-center py-8 border-b border-gray-100 px-4">
|
|
<div class="w-20 h-20 rounded-2xl overflow-hidden border-4 border-primary-100 shadow-lg shadow-primary-100">
|
|
<img src="https://ui-avatars.com/api/?name={{ auth()->user()->name ?? 'Admin' }}&background=6366f1&color=fff&size=128" class="w-full h-full object-cover">
|
|
</div>
|
|
<h2 class="mt-4 font-bold text-gray-800 text-lg">{{ auth()->user()->name ?? 'Admin' }}</h2>
|
|
<span class="px-3 py-1 mt-1.5 text-[10px] font-bold text-primary-700 bg-primary-50 rounded-full uppercase tracking-wider">Administrator</span>
|
|
</div>
|
|
|
|
{{-- Navigation --}}
|
|
<nav class="flex-1 py-6 space-y-1 px-3">
|
|
|
|
<a href="{{ route('admin.dashboard') }}"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 mb-1
|
|
{{ request()->routeIs('admin.dashboard') ? 'bg-gradient-to-r from-primary-500 to-primary-600 text-white shadow-lg shadow-primary-200' : 'text-gray-500 hover:bg-primary-50 hover:text-primary-600' }}">
|
|
<i class="fas fa-th-large w-5 text-center"></i>
|
|
<span class="font-semibold text-sm">Dashboard</span>
|
|
</a>
|
|
|
|
<a href="{{ route('admin.buku.index') }}"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 mb-1
|
|
{{ request()->routeIs('admin.buku.*') ? 'bg-gradient-to-r from-primary-500 to-primary-600 text-white shadow-lg shadow-primary-200' : 'text-gray-500 hover:bg-primary-50 hover:text-primary-600' }}">
|
|
<i class="fas fa-book w-5 text-center"></i>
|
|
<span class="font-semibold text-sm">Data Buku</span>
|
|
</a>
|
|
|
|
{{-- Anggota Dropdown --}}
|
|
<div x-data="{ open: {{ request()->routeIs('admin.anggota.*') ? 'true' : 'false' }} }">
|
|
<button @click="open = !open"
|
|
class="w-full flex items-center justify-between px-4 py-3 rounded-xl transition-all duration-300 mb-1
|
|
{{ request()->routeIs('admin.anggota.*') ? 'bg-primary-50 text-primary-600' : 'text-gray-500 hover:bg-primary-50 hover:text-primary-600' }}">
|
|
<div class="flex items-center gap-3">
|
|
<i class="fas fa-users w-5 text-center"></i>
|
|
<span class="font-semibold text-sm">Data Anggota</span>
|
|
</div>
|
|
<i :class="open ? 'rotate-180' : ''" class="fas fa-chevron-down text-[10px] transition-transform duration-200"></i>
|
|
</button>
|
|
<div x-show="open" x-transition class="pl-12 pr-3 py-1 space-y-1">
|
|
<a href="{{ route('admin.anggota.tamu') }}" class="block px-3 py-2 text-xs font-medium text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition">Buku Tamu</a>
|
|
<a href="{{ route('admin.anggota.member.index') }}" class="block px-3 py-2 text-xs font-medium text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition">Data Member</a>
|
|
</div>
|
|
</div>
|
|
|
|
<a href="{{ route('admin.peminjaman.index') }}"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 mb-1
|
|
{{ request()->routeIs('admin.peminjaman.*') ? 'bg-gradient-to-r from-primary-500 to-primary-600 text-white shadow-lg shadow-primary-200' : 'text-gray-500 hover:bg-primary-50 hover:text-primary-600' }}">
|
|
<i class="fas fa-file-export w-5 text-center"></i>
|
|
<span class="font-semibold text-sm">Data Peminjaman</span>
|
|
</a>
|
|
|
|
<a href="{{ route('admin.pengembalian.index') }}"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 mb-1
|
|
{{ request()->routeIs('admin.pengembalian.*') ? 'bg-gradient-to-r from-primary-500 to-primary-600 text-white shadow-lg shadow-primary-200' : 'text-gray-500 hover:bg-primary-50 hover:text-primary-600' }}">
|
|
<i class="fas fa-file-import w-5 text-center"></i>
|
|
<span class="font-semibold text-sm">Data Pengembalian</span>
|
|
</a>
|
|
|
|
{{-- Laporan Dropdown --}}
|
|
<div x-data="{ open: {{ request()->routeIs('admin.laporan.*') ? 'true' : 'false' }} }">
|
|
<button @click="open = !open"
|
|
class="w-full flex items-center justify-between px-4 py-3 rounded-xl transition-all duration-300 mb-1
|
|
{{ request()->routeIs('admin.laporan.*') ? 'bg-primary-50 text-primary-600' : 'text-gray-500 hover:bg-primary-50 hover:text-primary-600' }}">
|
|
<div class="flex items-center gap-3">
|
|
<i class="fas fa-chart-bar w-5 text-center"></i>
|
|
<span class="font-semibold text-sm">Laporan</span>
|
|
</div>
|
|
<i :class="open ? 'rotate-180' : ''" class="fas fa-chevron-down text-[10px] transition-transform duration-200"></i>
|
|
</button>
|
|
<div x-show="open" x-transition class="pl-12 pr-3 py-1 space-y-1">
|
|
<a href="{{ route('admin.laporan.kehadiran') }}" class="block px-3 py-2 text-xs font-medium text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition">Lap. Kehadiran</a>
|
|
<a href="{{ route('admin.laporan.peminjaman') }}" class="block px-3 py-2 text-xs font-medium text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition">Lap. Peminjaman</a>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Akun Admin Menu --}}
|
|
<a href="{{ route('admin.akun.index') }}"
|
|
class="flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 mb-1 mt-4 border-t border-gray-100 pt-5
|
|
{{ request()->routeIs('admin.akun.*') ? 'bg-gradient-to-r from-primary-500 to-primary-600 text-white shadow-lg shadow-primary-200' : 'text-gray-500 hover:bg-primary-50 hover:text-primary-600' }}">
|
|
<i class="fas fa-user-shield w-5 text-center"></i>
|
|
<span class="font-semibold text-sm">Kelola Admin</span>
|
|
</a>
|
|
|
|
</nav>
|
|
</aside>
|
|
|
|
{{-- MAIN CONTENT --}}
|
|
<main class="flex-1 overflow-y-auto bg-gray-50 p-8">
|
|
@yield('content')
|
|
</main>
|
|
</div>
|
|
|
|
{{-- SweetAlert2 for Global Delete Confirmation --}}
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
// Intercept all forms that have a confirm() in their onsubmit attribute
|
|
const deleteForms = document.querySelectorAll('form[onsubmit*="return confirm"]');
|
|
|
|
deleteForms.forEach(form => {
|
|
// Extract the message from the confirm('Message') call
|
|
const originalOnsubmit = form.getAttribute('onsubmit');
|
|
const messageMatch = originalOnsubmit.match(/confirm\(['"](.*?)['"]\)/);
|
|
const message = messageMatch ? messageMatch[1] : 'Apakah Anda yakin ingin menghapus data ini?';
|
|
|
|
// Remove the default onsubmit to prevent browser confirm
|
|
form.removeAttribute('onsubmit');
|
|
|
|
// Add the custom SweetAlert event listener
|
|
form.addEventListener('submit', function (e) {
|
|
e.preventDefault();
|
|
Swal.fire({
|
|
title: 'Konfirmasi Hapus',
|
|
text: message,
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#ef4444',
|
|
cancelButtonColor: '#6b7280',
|
|
confirmButtonText: '<i class="fas fa-trash-alt mr-2"></i> Ya, Hapus',
|
|
cancelButtonText: 'Batal',
|
|
reverseButtons: true,
|
|
customClass: {
|
|
popup: 'rounded-3xl shadow-2xl',
|
|
title: 'text-2xl font-bold text-gray-800',
|
|
htmlContainer: 'text-gray-500',
|
|
confirmButton: 'rounded-xl px-6 py-2.5 font-bold shadow-lg shadow-red-500/30 transition-all ml-3',
|
|
cancelButton: 'rounded-xl px-6 py-2.5 font-bold bg-gray-100 text-gray-600 hover:bg-gray-200 transition-all'
|
|
},
|
|
buttonsStyling: false
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
form.submit();
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@stack('scripts')
|
|
</body>
|
|
</html>
|