wirabasalamah/Qris-Soundbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d7c6e6eadf2359cca6e0b5994d65589b24d65db9
Qris-Soundbox/design/admin_dashboard_overview/code.html
wirabasalamah a152c99cce Initial commit
2026-05-25 08:22:12 +07:00

599 lines
30 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Soundbox Ops - Admin Console</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&amp;family=Inter:wght@400;500;600;700&amp;family=JetBrains+Mono&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"surface-container-lowest": "#ffffff",
"on-tertiary": "#ffffff",
"secondary-fixed-dim": "#b7c8e1",
"warning": "#F59E0B",
"on-primary-fixed-variant": "#003ea8",
"inverse-surface": "#2e3039",
"surface": "#faf8ff",
"surface-container-low": "#f3f3fe",
"outline": "#737686",
"on-primary": "#ffffff",
"tertiary-fixed": "#ffdbcd",
"primary": "#004ac6",
"on-error-container": "#93000a",
"surface-tint": "#0053db",
"tertiary-container": "#bc4800",
"surface-variant": "#e1e2ed",
"on-tertiary-fixed": "#360f00",
"surface-container-high": "#e7e7f3",
"info": "#0EA5E9",
"slate-500": "#64748B",
"tertiary-fixed-dim": "#ffb596",
"on-surface": "#191b23",
"outline-variant": "#c3c6d7",
"error": "#ba1a1a",
"inverse-on-surface": "#f0f0fb",
"on-primary-fixed": "#00174b",
"surface-bright": "#faf8ff",
"surface-container": "#ededf9",
"error-container": "#ffdad6",
"slate-900": "#0F172A",
"inverse-primary": "#b4c5ff",
"on-tertiary-fixed-variant": "#7d2d00",
"slate-700": "#334155",
"slate-200": "#E2E8F0",
"on-background": "#191b23",
"on-error": "#ffffff",
"on-secondary": "#ffffff",
"secondary": "#505f76",
"on-secondary-fixed": "#0b1c30",
"on-secondary-fixed-variant": "#38485d",
"danger": "#DC2626",
"on-primary-container": "#eeefff",
"success": "#16A34A",
"on-tertiary-container": "#ffede6",
"surface-container-highest": "#e1e2ed",
"primary-fixed": "#dbe1ff",
"on-surface-variant": "#434655",
"secondary-container": "#d0e1fb",
"primary-container": "#2563eb",
"background": "#F8FAFC",
"primary-fixed-dim": "#b4c5ff",
"tertiary": "#943700",
"secondary-fixed": "#d3e4fe",
"surface-dim": "#d9d9e5",
"on-secondary-container": "#54647a",
"slate-100": "#F1F5F9"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"page-padding": "24px",
"gutter": "24px",
"topbar-height": "72px",
"card-padding": "20px",
"row-height": "52px"
},
"fontFamily": {
"display-lg": ["Plus Jakarta Sans"],
"label-md": ["Inter"],
"headline-md": ["Plus Jakarta Sans"],
"body-md": ["Inter"],
"headline-lg": ["Plus Jakarta Sans"],
"body-lg": ["Inter"],
"metric-lg": ["Inter"],
"metric-sm": ["Inter"]
},
"fontSize": {
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500"}],
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"headline-lg": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"metric-lg": ["32px", {"lineHeight": "40px", "fontWeight": "600"}],
"metric-sm": ["14px", {"lineHeight": "20px", "fontWeight": "600"}]
}
},
},
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.custom-scrollbar::-webkit-scrollbar {
width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #E2E8F0;
border-radius: 10px;
}
.glass-card {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
}
</style>
</head>
<body class="bg-background text-on-background font-body-md text-body-md overflow-x-hidden">
<!-- SideNavBar -->
<aside class="w-64 h-full fixed left-0 top-0 bg-surface-container-lowest dark:bg-slate-900 border-r border-slate-200 dark:border-slate-700 flex flex-col py-6 px-4 gap-2 z-50">
<div class="mb-8 px-2">
<h1 class="font-headline-md text-headline-md font-bold text-primary dark:text-primary-fixed">Soundbox Ops</h1>
<p class="font-label-md text-label-md text-on-surface-variant opacity-70">Admin Console</p>
</div>
<nav class="flex-1 space-y-1">
<!-- Active Tab: Overview -->
<a class="bg-secondary-container dark:bg-secondary text-on-secondary-container dark:text-on-secondary font-bold rounded-lg flex items-center gap-3 px-3 py-2.5 transition-transform active:scale-95" href="#">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
<span>Overview</span>
</a>
<a class="text-on-surface-variant dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors flex items-center gap-3 px-3 py-2.5 rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="storefront">storefront</span>
<span>Merchant Management</span>
</a>
<a class="text-on-surface-variant dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors flex items-center gap-3 px-3 py-2.5 rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="speaker_group">speaker_group</span>
<span>Device Registry</span>
</a>
<a class="text-on-surface-variant dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors flex items-center gap-3 px-3 py-2.5 rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
<span>Transactions</span>
</a>
<a class="text-on-surface-variant dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors flex items-center gap-3 px-3 py-2.5 rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="account_balance">account_balance</span>
<span>Ledger &amp; Settlement</span>
</a>
<a class="text-on-surface-variant dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors flex items-center gap-3 px-3 py-2.5 rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="history_edu">history_edu</span>
<span>Audit Control</span>
</a>
</nav>
<div class="mt-auto pt-6 border-t border-slate-100 dark:border-slate-800 space-y-1">
<button class="w-full bg-primary text-on-primary py-2.5 rounded-lg font-bold mb-4 flex items-center justify-center gap-2 hover:opacity-90 active:scale-95 transition-all">
<span class="material-symbols-outlined" data-icon="add">add</span>
Register New Device
</button>
<a class="text-on-surface-variant dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors flex items-center gap-3 px-3 py-2 rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
<span>Settings</span>
</a>
<a class="text-on-surface-variant dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors flex items-center gap-3 px-3 py-2 rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="help">help</span>
<span>Support</span>
</a>
</div>
</aside>
<!-- TopNavBar -->
<header class="fixed top-0 right-0 h-[72px] bg-surface-container-lowest dark:bg-slate-900 flex justify-between items-center w-[calc(100%-256px)] ml-64 px-page-padding z-40 border-b border-slate-200 dark:border-slate-700">
<div class="flex items-center gap-6 flex-1">
<div class="relative w-full max-w-md">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-body-lg">search</span>
<input class="w-full pl-10 pr-4 py-2 bg-slate-100 dark:bg-slate-800 border-none rounded-full focus:ring-2 focus:ring-primary/20 text-body-md" placeholder="Search devices, merchants, or transactions..." type="text"/>
</div>
<div class="flex items-center gap-4">
<a class="text-primary dark:text-primary-fixed border-b-2 border-primary h-[72px] flex items-center px-2 font-bold" href="#">Dashboard</a>
<a class="text-on-surface-variant dark:text-slate-400 hover:text-primary transition-colors h-[72px] flex items-center px-2" href="#">System Health</a>
</div>
</div>
<div class="flex items-center gap-4">
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 text-on-surface-variant relative">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full"></span>
</button>
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 text-on-surface-variant">
<span class="material-symbols-outlined" data-icon="calendar_today">calendar_today</span>
</button>
<div class="h-8 w-[1px] bg-slate-200 dark:bg-slate-700 mx-2"></div>
<div class="flex items-center gap-3">
<div class="text-right">
<p class="font-bold text-body-md leading-none">Admin User</p>
<p class="text-label-md text-on-surface-variant opacity-70 leading-none mt-1">Super Administrator</p>
</div>
<img alt="Administrator Profile" class="w-10 h-10 rounded-full border-2 border-primary/10" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB61eQv0UesiiqGw5OUHVQbaA_dyExJL4b7KTMpoWwbtef5ADmEto1ZpJkVAh1u1v3gjZ4jWeIcJxM3QEAc5Lbb_RiJRBzspl31-ArZ_BOk81uoa33eL3GnXH4FQKEPtgNy56dMsXrd4pnpPsXM2KL0-S9UFwfsxrXUHcnjlDarnrsdlP5lbKfQJmTVO2kF1h-uQxj5OxwomQxAJLT-B9Zy3ZCWaEsh9DYUtAp7zrAcvDT1PoMzxfS1012kLlCi3xUH0GrWeChmQXY"/>
</div>
</div>
</header>
<!-- Main Content Canvas -->
<main class="ml-64 pt-[72px] min-h-screen p-page-padding max-w-[1600px]">
<!-- Dashboard Header & Welcome -->
<div class="mb-8 flex justify-between items-end">
<div>
<h2 class="font-display-lg text-display-lg text-on-surface mb-1">Operational Overview</h2>
<p class="text-body-lg text-on-surface-variant">Real-time status of your QRIS soundbox ecosystem.</p>
</div>
<div class="flex gap-2">
<button class="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors font-bold text-body-md">
<span class="material-symbols-outlined text-[20px]" data-icon="filter_list">filter_list</span>
Filter View
</button>
<button class="flex items-center gap-2 px-4 py-2 bg-primary text-on-primary rounded-lg hover:opacity-90 transition-colors font-bold text-body-md">
<span class="material-symbols-outlined text-[20px]" data-icon="download">download</span>
Export Report
</button>
</div>
</div>
<!-- Bento Layout: KPI Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-8">
<!-- Total Merchants -->
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl hover:shadow-lg transition-shadow">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-primary/10 rounded-lg text-primary">
<span class="material-symbols-outlined" data-icon="store">store</span>
</div>
<span class="text-success font-metric-sm flex items-center gap-1">
+4.2% <span class="material-symbols-outlined text-[16px]" data-icon="trending_up">trending_up</span>
</span>
</div>
<p class="text-label-md font-label-md text-on-surface-variant uppercase tracking-wider mb-1">Total Merchants</p>
<p class="text-metric-lg font-metric-lg text-on-surface">1,240</p>
</div>
<!-- Devices Online -->
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl hover:shadow-lg transition-shadow">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-success/10 rounded-lg text-success">
<span class="material-symbols-outlined" data-icon="sensors">sensors</span>
</div>
<span class="text-on-surface-variant font-label-md">94.4% Active</span>
</div>
<p class="text-label-md font-label-md text-on-surface-variant uppercase tracking-wider mb-1">Devices Online</p>
<p class="text-metric-lg font-metric-lg text-on-surface">850<span class="text-body-lg text-slate-400 font-normal"> / 900</span></p>
</div>
<!-- Today's Volume -->
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl hover:shadow-lg transition-shadow">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-warning/10 rounded-lg text-warning">
<span class="material-symbols-outlined" data-icon="payments">payments</span>
</div>
<span class="text-success font-metric-sm flex items-center gap-1">
+12% <span class="material-symbols-outlined text-[16px]" data-icon="trending_up">trending_up</span>
</span>
</div>
<p class="text-label-md font-label-md text-on-surface-variant uppercase tracking-wider mb-1">Today's Transactions</p>
<p class="text-metric-lg font-metric-lg text-on-surface">Rp450M</p>
</div>
<!-- Success Rate -->
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl hover:shadow-lg transition-shadow">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-info/10 rounded-lg text-info">
<span class="material-symbols-outlined" data-icon="verified">verified</span>
</div>
<span class="text-success font-metric-sm flex items-center gap-1">
Stable <span class="material-symbols-outlined text-[16px]" data-icon="check_circle">check_circle</span>
</span>
</div>
<p class="text-label-md font-label-md text-on-surface-variant uppercase tracking-wider mb-1">Success Rate</p>
<p class="text-metric-lg font-metric-lg text-on-surface">99.2%</p>
</div>
<!-- Pending Settlements -->
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl hover:shadow-lg transition-shadow border-l-4 border-l-warning">
<div class="flex justify-between items-start mb-4">
<div class="p-2 bg-error/10 rounded-lg text-error">
<span class="material-symbols-outlined" data-icon="hourglass_empty">hourglass_empty</span>
</div>
<button class="text-primary font-bold text-label-md hover:underline">View All</button>
</div>
<p class="text-label-md font-label-md text-on-surface-variant uppercase tracking-wider mb-1">Pending Settlements</p>
<p class="text-metric-lg font-metric-lg text-on-surface">24</p>
</div>
</div>
<!-- Main Chart & Sidebar Rail Grid -->
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 mb-8">
<!-- Left: Chart & Table Column -->
<div class="lg:col-span-8 space-y-8">
<!-- Transaction Trend Chart -->
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-6">
<div class="flex justify-between items-center mb-6">
<div>
<h3 class="text-headline-md font-headline-md text-on-surface">Transaction Volume Trend</h3>
<p class="text-body-md text-on-surface-variant">Last 7 days performance metrics</p>
</div>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-primary rounded-full"></span>
<span class="text-label-md font-label-md">Current Period</span>
</div>
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-slate-200 rounded-full"></span>
<span class="text-label-md font-label-md text-on-surface-variant">Previous Period</span>
</div>
</div>
</div>
<!-- Chart Placeholder -->
<div class="h-[320px] w-full flex items-end gap-2 px-4">
<div class="flex-1 flex flex-col justify-end gap-1">
<div class="w-full bg-slate-100 rounded-t h-[40%] relative group">
<div class="absolute bottom-0 left-0 right-0 bg-primary/40 h-[70%] group-hover:bg-primary transition-colors cursor-pointer"></div>
</div>
<span class="text-center text-label-md text-slate-400">Mon</span>
</div>
<div class="flex-1 flex flex-col justify-end gap-1">
<div class="w-full bg-slate-100 rounded-t h-[60%] relative group">
<div class="absolute bottom-0 left-0 right-0 bg-primary/40 h-[85%] group-hover:bg-primary transition-colors cursor-pointer"></div>
</div>
<span class="text-center text-label-md text-slate-400">Tue</span>
</div>
<div class="flex-1 flex flex-col justify-end gap-1">
<div class="w-full bg-slate-100 rounded-t h-[55%] relative group">
<div class="absolute bottom-0 left-0 right-0 bg-primary/40 h-[65%] group-hover:bg-primary transition-colors cursor-pointer"></div>
</div>
<span class="text-center text-label-md text-slate-400">Wed</span>
</div>
<div class="flex-1 flex flex-col justify-end gap-1">
<div class="w-full bg-slate-100 rounded-t h-[80%] relative group">
<div class="absolute bottom-0 left-0 right-0 bg-primary/40 h-[95%] group-hover:bg-primary transition-colors cursor-pointer"></div>
</div>
<span class="text-center text-label-md text-slate-400">Thu</span>
</div>
<div class="flex-1 flex flex-col justify-end gap-1">
<div class="w-full bg-slate-100 rounded-t h-[70%] relative group">
<div class="absolute bottom-0 left-0 right-0 bg-primary/40 h-[80%] group-hover:bg-primary transition-colors cursor-pointer"></div>
</div>
<span class="text-center text-label-md text-slate-400">Fri</span>
</div>
<div class="flex-1 flex flex-col justify-end gap-1">
<div class="w-full bg-slate-100 rounded-t h-[45%] relative group">
<div class="absolute bottom-0 left-0 right-0 bg-primary/40 h-[50%] group-hover:bg-primary transition-colors cursor-pointer"></div>
</div>
<span class="text-center text-label-md text-slate-400">Sat</span>
</div>
<div class="flex-1 flex flex-col justify-end gap-1">
<div class="w-full bg-slate-100 rounded-t h-[90%] relative group">
<div class="absolute bottom-0 left-0 right-0 bg-primary/40 h-[100%] group-hover:bg-primary transition-colors cursor-pointer"></div>
</div>
<span class="text-center text-label-md text-slate-400 font-bold text-primary">Sun</span>
</div>
</div>
</div>
<!-- Pending Merchant Table -->
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl overflow-hidden shadow-sm">
<div class="p-6 border-b border-slate-100 flex justify-between items-center">
<div>
<h3 class="text-headline-md font-headline-md text-on-surface">Pending Merchant Onboarding</h3>
<p class="text-body-md text-on-surface-variant">New applications requiring review</p>
</div>
<button class="text-primary font-bold text-body-md hover:underline">View Full Queue</button>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-slate-50/50">
<th class="px-6 py-4 text-label-md font-label-md text-on-surface-variant uppercase tracking-wider">Merchant Name</th>
<th class="px-6 py-4 text-label-md font-label-md text-on-surface-variant uppercase tracking-wider">Category</th>
<th class="px-6 py-4 text-label-md font-label-md text-on-surface-variant uppercase tracking-wider">Submission Date</th>
<th class="px-6 py-4 text-label-md font-label-md text-on-surface-variant uppercase tracking-wider">Status</th>
<th class="px-6 py-4 text-label-md font-label-md text-on-surface-variant uppercase tracking-wider text-right">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center text-primary font-bold">KB</div>
<div>
<p class="font-bold text-on-surface">Kopi Bahagia</p>
<p class="text-label-md text-slate-400">ID: MERCH-9021</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-on-surface-variant">F&amp;B - Cafe</td>
<td class="px-6 py-4 text-on-surface-variant">Oct 24, 2023</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-label-md font-bold bg-warning/10 text-warning">
Pending Review
</span>
</td>
<td class="px-6 py-4 text-right">
<button class="text-primary font-bold hover:text-on-primary-fixed-variant transition-colors">Review</button>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center text-primary font-bold">JM</div>
<div>
<p class="font-bold text-on-surface">Jaya Mart</p>
<p class="text-label-md text-slate-400">ID: MERCH-8843</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-on-surface-variant">Retail - Grocery</td>
<td class="px-6 py-4 text-on-surface-variant">Oct 23, 2023</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-label-md font-bold bg-warning/10 text-warning">
Pending Review
</span>
</td>
<td class="px-6 py-4 text-right">
<button class="text-primary font-bold hover:text-on-primary-fixed-variant transition-colors">Review</button>
</td>
</tr>
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center text-primary font-bold">AL</div>
<div>
<p class="font-bold text-on-surface">Apotek Lestari</p>
<p class="text-label-md text-slate-400">ID: MERCH-8712</p>
</div>
</div>
</td>
<td class="px-6 py-4 text-on-surface-variant">Healthcare - Pharma</td>
<td class="px-6 py-4 text-on-surface-variant">Oct 23, 2023</td>
<td class="px-6 py-4">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-label-md font-bold bg-warning/10 text-warning">
Pending Review
</span>
</td>
<td class="px-6 py-4 text-right">
<button class="text-primary font-bold hover:text-on-primary-fixed-variant transition-colors">Review</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Right: Health & Alerts Rail Column -->
<div class="lg:col-span-4 space-y-8">
<!-- Device Health Distribution -->
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-6">
<h3 class="text-headline-md font-headline-md text-on-surface mb-6">Device Health</h3>
<div class="flex justify-center mb-8 relative">
<svg class="w-48 h-48 transform -rotate-90">
<circle class="text-slate-100" cx="96" cy="96" fill="transparent" r="80" stroke="currentColor" stroke-width="20"></circle>
<circle class="text-success" cx="96" cy="96" fill="transparent" r="80" stroke="currentColor" stroke-dasharray="502.6" stroke-dashoffset="50.2" stroke-width="20"></circle>
<circle class="text-warning" cx="96" cy="96" fill="transparent" r="80" stroke="currentColor" stroke-dasharray="502.6" stroke-dashoffset="440" stroke-width="20"></circle>
<circle class="text-danger" cx="96" cy="96" fill="transparent" r="80" stroke="currentColor" stroke-dasharray="502.6" stroke-dashoffset="480" stroke-width="20"></circle>
</svg>
<div class="absolute inset-0 flex flex-col items-center justify-center">
<p class="text-metric-lg font-metric-lg leading-none">94%</p>
<p class="text-label-md text-slate-400 mt-1">Healthy</p>
</div>
</div>
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-success rounded-full"></span>
<span class="text-body-md">Online / Ready</span>
</div>
<span class="font-bold">850</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-warning rounded-full"></span>
<span class="text-body-md">Degraded / Slow</span>
</div>
<span class="font-bold">35</span>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<span class="w-3 h-3 bg-danger rounded-full"></span>
<span class="text-body-md">Offline / Error</span>
</div>
<span class="font-bold">15</span>
</div>
</div>
</div>
<!-- Recent Alerts / Incidents -->
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl flex flex-col">
<div class="p-6 border-b border-slate-100 flex justify-between items-center">
<h3 class="text-headline-md font-headline-md text-on-surface">Recent Alerts</h3>
<span class="bg-error/10 text-error px-2 py-0.5 rounded text-label-md font-bold">2 Critical</span>
</div>
<div class="p-4 space-y-4 max-h-[480px] overflow-y-auto custom-scrollbar">
<!-- Alert Item -->
<div class="p-4 rounded-lg bg-error/5 border border-error/10">
<div class="flex gap-3">
<span class="material-symbols-outlined text-error" data-icon="error">error</span>
<div class="flex-1">
<p class="font-bold text-on-surface text-body-md">Terminal X-009 Offline</p>
<p class="text-label-md text-on-surface-variant mb-2">Location: Outlet Y (Sudirman Mall)</p>
<div class="flex items-center justify-between">
<span class="text-label-md text-slate-400">2 mins ago</span>
<button class="text-primary font-bold text-label-md">Dispatch Tech</button>
</div>
</div>
</div>
</div>
<!-- Alert Item -->
<div class="p-4 rounded-lg bg-warning/5 border border-warning/10">
<div class="flex gap-3">
<span class="material-symbols-outlined text-warning" data-icon="warning">warning</span>
<div class="flex-1">
<p class="font-bold text-on-surface text-body-md">Network Latency Spike</p>
<p class="text-label-md text-on-surface-variant mb-2">Impact: Cluster Jakarta Selatan</p>
<div class="flex items-center justify-between">
<span class="text-label-md text-slate-400">14 mins ago</span>
<button class="text-primary font-bold text-label-md">Investigate</button>
</div>
</div>
</div>
</div>
<!-- Alert Item -->
<div class="p-4 rounded-lg bg-error/5 border border-error/10">
<div class="flex gap-3">
<span class="material-symbols-outlined text-error" data-icon="error">error</span>
<div class="flex-1">
<p class="font-bold text-on-surface text-body-md">Repeated Auth Failure</p>
<p class="text-label-md text-on-surface-variant mb-2">Merchant: IndoFresh Mart #44</p>
<div class="flex items-center justify-between">
<span class="text-label-md text-slate-400">45 mins ago</span>
<button class="text-primary font-bold text-label-md">Lock Device</button>
</div>
</div>
</div>
</div>
<!-- Info Alert -->
<div class="p-4 rounded-lg bg-info/5 border border-info/10">
<div class="flex gap-3">
<span class="material-symbols-outlined text-info" data-icon="info">info</span>
<div class="flex-1">
<p class="font-bold text-on-surface text-body-md">New FW Update Available</p>
<p class="text-label-md text-on-surface-variant mb-2">Version 2.4.1 (Stable Build)</p>
<div class="flex items-center justify-between">
<span class="text-label-md text-slate-400">2 hours ago</span>
<button class="text-primary font-bold text-label-md">Deploy Now</button>
</div>
</div>
</div>
</div>
</div>
<button class="w-full py-4 text-on-surface-variant hover:bg-slate-50 transition-colors font-bold text-body-md border-t border-slate-100">
Clear All Notifications
</button>
</div>
</div>
</div>
<!-- System Activity Log (Compact Footer-level detail) -->
<div class="bg-slate-900 text-white rounded-xl p-6 mb-8 overflow-hidden relative">
<div class="flex justify-between items-center mb-4">
<h3 class="text-headline-md font-headline-md">Audit Activity Stream</h3>
<div class="flex gap-2">
<span class="px-2 py-1 bg-white/10 rounded text-[10px] font-bold uppercase tracking-widest">Live Stream</span>
<span class="px-2 py-1 bg-success/20 text-success rounded text-[10px] font-bold uppercase tracking-widest">Operational</span>
</div>
</div>
<div class="font-mono text-[13px] space-y-2 opacity-80">
<p><span class="text-primary-fixed-dim">[14:32:11]</span> <span class="text-success">SUCCESS:</span> Settlement triggered for Cluster-B (Rp12.4M handled)</p>
<p><span class="text-primary-fixed-dim">[14:31:05]</span> <span class="text-info">INFO:</span> Device X-292 ping response received (latency 42ms)</p>
<p><span class="text-primary-fixed-dim">[14:29:44]</span> <span class="text-warning">WARN:</span> Merchant ID 9921 failed KYC validation step 3</p>
<p><span class="text-primary-fixed-dim">[14:28:12]</span> <span class="text-success">SUCCESS:</span> New Admin 'DevOps_Main' logged in via MFA</p>
</div>
<!-- Decorative backdrop for "raw data" feel -->
<div class="absolute -right-4 -bottom-4 opacity-10 pointer-events-none">
<span class="material-symbols-outlined text-[120px]" data-icon="terminal">terminal</span>
</div>
</div>
</main>
<script>
// Micro-interactions for hovering and state visual feedback
document.querySelectorAll('.hover\\:shadow-lg').forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-2px)';
card.style.transition = 'all 0.3s ease';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0)';
});
});
// Simple real-time clock indicator in TopBar
const updateTime = () => {
// Logic for a real-time system clock could go here
};
</script>
</body></html>
Reference in New Issue View Git Blame Copy Permalink