148 lines
6.3 KiB
PHP
148 lines
6.3 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard Admin</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
animation: {
|
|
'fade-in': 'fadeIn 1s ease-out forwards',
|
|
'slide-up': 'slideUp 0.8s ease-out forwards'
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 min-h-screen">
|
|
|
|
<!-- Sidebar -->
|
|
<div id="sidebar" class="fixed top-0 left-0 w-64 bg-white shadow-md z-30 h-screen overflow-y-auto md:block hidden">
|
|
<div class="p-5 border-b">
|
|
<h2 class="text-2xl font-bold text-blue-600">Admin Panel</h2>
|
|
</div>
|
|
<nav class="p-4 space-y-3">
|
|
<a href="/admin/bookings" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
|
|
<i class="bi bi-calendar3 text-blue-500"></i> Booking
|
|
</a>
|
|
<a href="/admin/users" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
|
|
<i class="bi bi-people-fill text-blue-500"></i> Pengguna
|
|
</a>
|
|
<a href="/admin/upload" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
|
|
<i class="bi bi-upload text-blue-500"></i> Token Foto
|
|
</a>
|
|
<a href="/admin/reports" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
|
|
<i class="bi bi-boxes text-blue-500"></i> Produk
|
|
</a>
|
|
<form action="/logout" method="POST" class="px-4 mt-4">
|
|
@csrf
|
|
<button type="submit" class="w-full flex items-center justify-center gap-2 bg-red-500 text-white py-2 rounded hover:bg-red-600 transition-all">
|
|
<i class="bi bi-box-arrow-right"></i> Logout
|
|
</button>
|
|
</form>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Mobile Sidebar Toggle Button -->
|
|
<div class="md:hidden flex justify-between items-center bg-white shadow px-4 py-3 fixed top-0 left-0 w-full z-20">
|
|
<button onclick="toggleSidebar()" class="text-2xl text-blue-600">
|
|
<i class="bi bi-list"></i>
|
|
</button>
|
|
<h1 class="text-xl font-bold text-blue-600">Admin Panel</h1>
|
|
</div>
|
|
|
|
<!-- Overlay for Mobile Sidebar -->
|
|
<div id="overlay" class="fixed inset-0 bg-black bg-opacity-40 hidden z-20" onclick="toggleSidebar()"></div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="md:ml-64 p-6 pt-24 md:pt-6 space-y-6 animate-fade-in">
|
|
<h1 class="text-3xl font-bold text-gray-700 animate-slide-up">Halo, {{ session('username') }}</h1>
|
|
<p class="text-gray-500">Selamat datang di dashboard admin.</p>
|
|
|
|
<!-- Quick Stats -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
|
|
<div class="bg-blue-100 p-4 rounded-lg shadow animate-slide-up">
|
|
<i class="bi bi-calendar-check text-2xl text-blue-600"></i>
|
|
<div class="text-sm mt-2">Total Booking</div>
|
|
<div class="text-xl font-bold">{{ $totalBookings ?? 0 }}</div>
|
|
</div>
|
|
<div class="bg-yellow-100 p-4 rounded-lg shadow animate-slide-up">
|
|
<i class="bi bi-hourglass-split text-2xl text-yellow-600"></i>
|
|
<div class="text-sm mt-2">Pending</div>
|
|
<div class="text-xl font-bold">{{ $pendingBookings ?? 0 }}</div>
|
|
</div>
|
|
<div class="bg-green-100 p-4 rounded-lg shadow animate-slide-up">
|
|
<i class="bi bi-check-circle-fill text-2xl text-green-600"></i>
|
|
<div class="text-sm mt-2">Disetujui</div>
|
|
<div class="text-xl font-bold">{{ $approvedBookings ?? 0 }}</div>
|
|
</div>
|
|
<div class="bg-red-100 p-4 rounded-lg shadow animate-slide-up">
|
|
<i class="bi bi-x-circle-fill text-2xl text-red-600"></i>
|
|
<div class="text-sm mt-2">Ditolak</div>
|
|
<div class="text-xl font-bold">{{ $declinedBookings ?? 0 }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Info -->
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div class="bg-cyan-100 p-4 rounded-lg shadow animate-slide-up">
|
|
<i class="bi bi-person-fill text-2xl text-cyan-600"></i>
|
|
<div class="text-sm mt-2">Total Pelanggan</div>
|
|
<div class="text-xl font-bold">{{ $totalCustomers ?? 0 }}</div>
|
|
</div>
|
|
<div class="bg-indigo-100 p-4 rounded-lg shadow animate-slide-up">
|
|
<i class="bi bi-briefcase-fill text-2xl text-indigo-600"></i>
|
|
<div class="text-sm mt-2">Total Karyawan</div>
|
|
<div class="text-xl font-bold">{{ $totalEmployees ?? 0 }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Informasi Login -->
|
|
<div class="bg-white p-4 rounded-lg shadow animate-slide-up">
|
|
<h2 class="text-lg font-semibold text-gray-700 mb-2">Informasi Pengguna</h2>
|
|
<p class="text-sm text-gray-600">Login sebagai: <strong>{{ Auth::user()->role }}</strong></p>
|
|
<p class="text-sm text-gray-600">Email: <strong>{{ Auth::user()->email }}</strong></p>
|
|
<p class="text-sm text-gray-600">Waktu Login: <strong>{{ now()->translatedFormat('l, d F Y') }}</strong></p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Toggle Script -->
|
|
<script>
|
|
function toggleSidebar() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const overlay = document.getElementById('overlay');
|
|
const isHidden = sidebar.classList.contains('hidden');
|
|
|
|
if (isHidden) {
|
|
sidebar.classList.remove('hidden');
|
|
overlay.classList.remove('hidden');
|
|
} else {
|
|
sidebar.classList.add('hidden');
|
|
overlay.classList.add('hidden');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|