183 lines
8.8 KiB
Plaintext
183 lines
8.8 KiB
Plaintext
@{
|
|
Layout = "~/Views/Admin/Transport/SpjAdmin/Shared/_Layout.cshtml";
|
|
ViewData["Title"] = "Admin Dashboard";
|
|
}
|
|
|
|
<div class="w-full lg:max-w-sm mx-auto bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen relative overflow-hidden">
|
|
<div class="relative z-10">
|
|
<div class="bg-gradient-to-br from-cyan-500 via-cyan-600 to-red-500 rounded-b-[2rem] shadow-2xl p-6 mb-6">
|
|
|
|
|
|
<div class="relative z-10 pt-8 pb-4">
|
|
|
|
<div class="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20 shadow-lg">
|
|
<div class="flex items-center justify-between">
|
|
|
|
<div class="flex items-center space-x-4">
|
|
<div class="relative">
|
|
<div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-white to-cyan-100 p-1 shadow-lg">
|
|
<div class="w-full h-full rounded-xl bg-gradient-to-br from-cyan-400 to-cyan-600 flex items-center justify-center shadow-inner">
|
|
<i class="w-8 h-8 text-white" data-lucide="user"></i>
|
|
</div>
|
|
</div>
|
|
<div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-400 rounded-full border-2 border-white shadow-sm">
|
|
<div class="w-full h-full bg-green-500 rounded-full animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="flex flex-col">
|
|
<h1 class="text-xl font-bold text-white leading-tight">Yusuf</h1>
|
|
<div class="flex items-center space-x-2">
|
|
<span class="bg-cyan-700/30 text-cyan-100 px-3 py-1 rounded-full text-sm font-base backdrop-blur-sm border border-cyan-400/20">
|
|
Administrator
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative">
|
|
<button id="profileMenuButton" class="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm border border-white/30 flex items-center justify-center hover:bg-white/30 transition-all duration-300 group shadow-lg hover:shadow-xl hover:scale-105">
|
|
<i class="w-5 h-5 text-white group-hover:rotate-180 transition-transform duration-300" data-lucide="settings"></i>
|
|
</button>
|
|
|
|
<div id="profileMenuDropdown" class="absolute top-14 right-0 w-48 bg-white rounded-xl shadow-2xl py-2 z-50 hidden border border-gray-100 overflow-hidden">
|
|
<div class="px-4 py-3 border-b border-gray-100">
|
|
<p class="text-sm font-semibold text-gray-900">Yusuf</p>
|
|
<p class="text-xs text-gray-500">Administrator</p>
|
|
</div>
|
|
|
|
<div class="py-1">
|
|
<div class="border-t border-gray-100 mt-1"></div>
|
|
<form method="post" asp-controller="Auth" asp-action="Logout">
|
|
<button type="submit" class="flex items-center gap-3 w-full text-left px-4 py-2 text-sm font-semibold text-red-600 hover:bg-red-50 transition-colors">
|
|
<i class="w-4 h-4 text-red-500" data-lucide="log-out"></i>
|
|
<span>Logout</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 text-center">
|
|
<h2 class="text-white/90 text-lg font-semibold">Selamat Datang!</h2>
|
|
<p class="text-cyan-100/70 text-sm">Siap kelola sistem eSPJ dengan efisien</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="px-6 mb-6">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-gray-500 text-xs font-medium">Total Driver</p>
|
|
<p class="text-2xl font-bold text-gray-900">10</p>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center">
|
|
<i class="w-5 h-5 text-green-600" data-lucide="users"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-xl p-4 shadow-sm border border-gray-100 hover:shadow-md transition-shadow">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="text-gray-500 text-xs font-medium">Total SPJ</p>
|
|
<p class="text-2xl font-bold text-gray-900">15</p>
|
|
</div>
|
|
<div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center">
|
|
<i class="w-5 h-5 text-blue-600" data-lucide="map"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<partial name="~/Views/Admin/Transport/SpjAdmin/Shared/Components/_Navigation.cshtml" />
|
|
|
|
</div>
|
|
|
|
|
|
<register-block dynamic-section="scripts" key="jsHomeAdmin">
|
|
|
|
<style>
|
|
@@keyframes float {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
50% { transform: translateY(-10px) rotate(2deg); }
|
|
}
|
|
|
|
.float-animation {
|
|
animation: float 3s ease-in-out infinite;
|
|
}
|
|
|
|
.float-animation-delayed {
|
|
animation: float 4s ease-in-out infinite;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const btn = document.getElementById("profileMenuButton");
|
|
const dropdown = document.getElementById("profileMenuDropdown");
|
|
|
|
if (btn && dropdown) {
|
|
btn.addEventListener("click", function (e) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
|
|
if (dropdown.classList.contains("hidden")) {
|
|
dropdown.classList.remove("hidden");
|
|
dropdown.style.opacity = "0";
|
|
dropdown.style.transform = "translateY(-10px) scale(0.95)";
|
|
|
|
setTimeout(() => {
|
|
dropdown.style.transition = "all 0.2s ease-out";
|
|
dropdown.style.opacity = "1";
|
|
dropdown.style.transform = "translateY(0) scale(1)";
|
|
}, 10);
|
|
} else {
|
|
dropdown.style.transition = "all 0.15s ease-in";
|
|
dropdown.style.opacity = "0";
|
|
dropdown.style.transform = "translateY(-10px) scale(0.95)";
|
|
|
|
setTimeout(() => {
|
|
dropdown.classList.add("hidden");
|
|
}, 150);
|
|
}
|
|
});
|
|
|
|
document.addEventListener("click", function (e) {
|
|
if (!btn.contains(e.target) && !dropdown.contains(e.target)) {
|
|
dropdown.style.transition = "all 0.15s ease-in";
|
|
dropdown.style.opacity = "0";
|
|
dropdown.style.transform = "translateY(-10px) scale(0.95)";
|
|
|
|
setTimeout(() => {
|
|
dropdown.classList.add("hidden");
|
|
}, 150);
|
|
}
|
|
});
|
|
|
|
dropdown.addEventListener("click", function (e) {
|
|
e.stopPropagation();
|
|
});
|
|
}
|
|
|
|
const statCards = document.querySelectorAll('.grid > div');
|
|
statCards.forEach((card, index) => {
|
|
card.style.opacity = "0";
|
|
card.style.transform = "translateY(20px)";
|
|
|
|
setTimeout(() => {
|
|
card.style.transition = "all 0.3s ease-out";
|
|
card.style.opacity = "1";
|
|
card.style.transform = "translateY(0)";
|
|
}, 300 + (index * 100));
|
|
});
|
|
});
|
|
</script>
|
|
</register-block> |