Radit_Arahman_Putra23/ProjectKP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
ProjectKP/Laravel_KP/resources/views/dashboard.blade.php
T
raditarahman5-cloud ac6c3473d4 Initial commit for combined ProjectKP
2026-06-28 15:14:51 +07:00

198 lines
13 KiB
PHP
Raw Permalink Blame History

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Monitoring - Disnaker Pontianak</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
body { font-family: 'Inter', sans-serif; background-color: #F8FAFC; }
.sidebar-active { background-color: #FFFFFF; color: #0D215C; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05); }
.custom-scroll::-webkit-scrollbar { width: 6px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 10px; }
</style>
</head>
<body class="flex h-screen overflow-hidden text-slate-700">
<aside class="w-64 bg-[#F8FAFC] border-r border-slate-200 flex flex-col">
<div class="p-8 mb-4">
<h1 class="text-[#0D215C] font-extrabold text-xl tracking-tight">Disnaker</h1>
<p class="text-slate-400 text-[10px] font-bold tracking-widest uppercase mt-0.5">Kota Pontianak</p>
</div>
<nav class="flex-1 px-4 space-y-1">
<a href="#" class="sidebar-active flex items-center gap-3 p-3 rounded-xl font-bold text-sm transition-all">
<i data-lucide="layout-grid" class="w-5 h-5"></i> Dashboard
</a>
<a href="{{ route('input.activity') }}" class="flex items-center gap-3 p-3 rounded-xl text-slate-400 hover:text-[#0D215C] font-semibold text-sm transition-all group">
<i data-lucide="bar-chart-3" class="w-5 h-5"></i> Activity Report
</a>
<a href="{{ route('input.activity') }}" class="flex items-center gap-3 p-3 rounded-xl text-slate-400 hover:text-[#0D215C] font-semibold text-sm transition-all group">
<i data-lucide="file-text" class="w-5 h-5"></i> Input Activity
</a>
</nav>
<div class="p-4 border-t border-slate-200 space-y-1 mb-4">
<a href="#" class="flex items-center gap-3 p-3 rounded-xl text-slate-400 hover:text-[#0D215C] font-semibold text-sm transition-all">
<i data-lucide="settings" class="w-5 h-5"></i> Pengaturan
</a>
<a href="{{ route('logout') }}" class="flex items-center gap-3 p-3 rounded-xl text-red-400 hover:bg-red-50 font-bold text-sm transition-all">
<i data-lucide="log-out" class="w-5 h-5"></i> Logout
</a>
</div>
</aside>
<main class="flex-1 overflow-y-auto bg-white m-4 rounded-[32px] border border-slate-100 shadow-sm relative custom-scroll">
<div class="sticky top-0 bg-white/80 backdrop-blur-md px-10 py-6 flex justify-between items-center z-10 border-b border-slate-50 border-dashed">
<div class="relative w-96 group">
<i data-lucide="search" class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300 group-focus-within:text-blue-500 transition-colors"></i>
<input type="text" placeholder="Cari aktivitas atau pegawai..."
class="w-full pl-11 pr-4 py-2.5 bg-slate-50 border border-slate-100 rounded-2xl focus:ring-4 focus:ring-blue-500/5 focus:border-blue-500/20 outline-none text-sm transition-all">
</div>
<div class="flex items-center gap-6">
<button class="relative p-2 text-slate-400 hover:bg-slate-50 rounded-full transition-colors">
<i data-lucide="bell" class="w-5 h-5"></i>
<span class="absolute top-2.5 right-2.5 w-2 h-2 bg-red-500 rounded-full border-2 border-white"></span>
</button>
<div class="flex items-center gap-4 pl-6 border-l border-slate-100">
<div class="text-right">
<p class="text-xs font-extrabold text-[#0D215C]">Ahmad Ridwan</p>
<p class="text-[10px] text-slate-400 font-bold uppercase tracking-wider mt-0.5">Administrator</p>
</div>
<div class="w-10 h-10 rounded-2xl bg-[#0D215C] flex items-center justify-center shadow-lg shadow-blue-900/20 overflow-hidden border-2 border-slate-50">
<img src="https://ui-avatars.com/api/?name=Ahmad+Ridwan&background=0D215C&color=fff" alt="Avatar">
</div>
</div>
</div>
</div>
<div class="p-10">
<div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-10 gap-4">
<div>
<h2 class="text-[28px] font-black text-[#0D215C] tracking-tight">Dashboard Monitoring</h2>
<p class="text-slate-400 text-sm mt-2 font-medium">Pantau progres dan efektivitas kerja pegawai secara real-time.</p>
</div>
<button class="bg-[#0D215C] text-white px-7 py-3 rounded-2xl font-bold text-xs uppercase tracking-widest hover:bg-blue-900 shadow-xl shadow-blue-900/20 active:scale-95 transition-all flex items-center gap-2">
<i data-lucide="plus" class="w-4 h-4"></i> Tambah Aktivitas
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
<div class="bg-white p-6 rounded-[28px] border border-slate-100 shadow-sm border-l-4 border-blue-500 flex justify-between items-start hover:scale-[1.02] transition-all">
<div>
<p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest mb-1">Total Activities</p>
<h3 class="text-3xl font-black text-[#0D215C]">1,284</h3>
<p class="text-[10px] text-green-500 font-bold mt-3 flex items-center gap-1">
<i data-lucide="trending-up" class="w-3 h-3"></i> +12% dari bulan lalu
</p>
</div>
<div class="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center">
<i data-lucide="archive" class="text-blue-500 w-6 h-6"></i>
</div>
</div>
<div class="bg-white p-6 rounded-[28px] border border-slate-100 shadow-sm border-l-4 border-green-500 flex justify-between items-start hover:scale-[1.02] transition-all">
<div>
<p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest mb-1">Completed</p>
<h3 class="text-3xl font-black text-[#0D215C]">942</h3>
<div class="w-32 h-1.5 bg-slate-100 rounded-full mt-5 overflow-hidden">
<div class="w-[75%] h-full bg-green-500"></div>
</div>
</div>
<div class="w-12 h-12 bg-green-50 rounded-2xl flex items-center justify-center">
<i data-lucide="check-circle" class="text-green-500 w-6 h-6"></i>
</div>
</div>
<div class="bg-white p-6 rounded-[28px] border border-slate-100 shadow-sm border-l-4 border-amber-500 flex justify-between items-start hover:scale-[1.02] transition-all">
<div>
<p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest mb-1">Ongoing</p>
<h3 class="text-3xl font-black text-[#0D215C]">215</h3>
<p class="text-[10px] text-slate-400 font-medium mt-4 italic">Dalam peninjauan aktif</p>
</div>
<div class="w-12 h-12 bg-amber-50 rounded-2xl flex items-center justify-center">
<i data-lucide="clock" class="text-amber-500 w-6 h-6"></i>
</div>
</div>
<div class="bg-white p-6 rounded-[28px] border border-slate-100 shadow-sm border-l-4 border-red-500 flex justify-between items-start hover:scale-[1.02] transition-all">
<div>
<p class="text-[11px] font-bold text-slate-400 uppercase tracking-widest mb-1">Pending</p>
<h3 class="text-3xl font-black text-[#0D215C]">127</h3>
<p class="text-[10px] text-red-500 font-bold mt-4 uppercase tracking-tighter">Perlu tindakan segera</p>
</div>
<div class="w-12 h-12 bg-red-50 rounded-2xl flex items-center justify-center">
<i data-lucide="alert-circle" class="text-red-500 w-6 h-6"></i>
</div>
</div>
</div>
<div class="bg-white rounded-[32px] border border-slate-100 shadow-sm overflow-hidden">
<div class="px-8 py-6 flex justify-between items-center border-b border-slate-50">
<h4 class="font-extrabold text-[#0D215C] tracking-tight">Recent Activities</h4>
<a href="#" class="text-[11px] font-black text-blue-600 uppercase tracking-widest hover:text-blue-800 transition-colors">Lihat Semua</a>
</div>
<div class="overflow-x-auto">
<table class="w-full">
<thead class="bg-slate-50/50">
<tr class="text-left text-[10px] font-black text-slate-400 uppercase tracking-[0.15em]">
<th class="px-8 py-5">Employee Name</th>
<th class="px-8 py-5">Activity</th>
<th class="px-8 py-5">Location</th>
<th class="px-8 py-5">Date</th>
<th class="px-8 py-5 text-center">Status</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-50">
<tr class="hover:bg-slate-50/50 transition-colors group">
<td class="px-8 py-5">
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-xl bg-blue-50 flex items-center justify-center text-[10px] font-bold text-blue-600">BP</div>
<span class="text-xs font-extrabold text-slate-700">Bambang Pamungkas</span>
</div>
</td>
<td class="px-8 py-5 text-xs font-semibold text-slate-500">Audit K3 Lapangan</td>
<td class="px-8 py-5">
<div class="flex items-center gap-1.5 text-xs font-semibold text-slate-400">
<i data-lucide="map-pin" class="w-3 h-3"></i> Kawasan Industri
</div>
</td>
<td class="px-8 py-5 text-xs font-bold text-slate-400">24 Okt 2023</td>
<td class="px-8 py-5 text-center">
<span class="bg-green-100 text-green-600 px-4 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest">Completed</span>
</td>
</tr>
<tr class="hover:bg-slate-50/50 transition-colors group">
<td class="px-8 py-5">
<div class="flex items-center gap-3">
<div class="w-9 h-9 rounded-xl bg-purple-50 flex items-center justify-center text-[10px] font-bold text-purple-600">SP</div>
<span class="text-xs font-extrabold text-slate-700">Siti Permata</span>
</div>
</td>
<td class="px-8 py-5 text-xs font-semibold text-slate-500">Sosialisasi BPJS TK</td>
<td class="px-8 py-5">
<div class="flex items-center gap-1.5 text-xs font-semibold text-slate-400">
<i data-lucide="map-pin" class="w-3 h-3"></i> Aula Kantor Camat
</div>
</td>
<td class="px-8 py-5 text-xs font-bold text-slate-400">24 Okt 2023</td>
<td class="px-8 py-5 text-center">
<span class="bg-amber-100 text-amber-600 px-4 py-1.5 rounded-lg text-[9px] font-black uppercase tracking-widest">Ongoing</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
<script>
// Inisialisasi Ikon Lucide
lucide.createIcons();
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink