148 lines
9.6 KiB
PHP
148 lines
9.6 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; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 font-sans antialiased flex flex-col h-screen overflow-hidden">
|
|
|
|
{{-- 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">
|
|
<div class="w-9 h-9 bg-white/15 rounded-xl flex 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">
|
|
{{-- SIDEBAR --}}
|
|
<aside class="w-64 bg-white shadow-xl flex flex-col overflow-y-auto z-10 border-r border-gray-100">
|
|
|
|
{{-- 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>
|
|
|
|
</body>
|
|
</html> |