Initial commit
This commit is contained in:
758
ui/outlet-branch-management/index.html
Normal file
758
ui/outlet-branch-management/index.html
Normal file
@ -0,0 +1,758 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Outlet Management | Soundbox Ops</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&family=Inter:wght@400;500;600;700&family=JetBrains+Mono&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: #E2E8F0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.mono { font-family: 'JetBrains Mono', monospace; }
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"slate-200": "#E2E8F0",
|
||||
"primary-fixed-dim": "#b4c5ff",
|
||||
"on-tertiary-fixed": "#360f00",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container": "#ededf9",
|
||||
"on-background": "#191b23",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-container-high": "#e7e7f3",
|
||||
"on-primary": "#ffffff",
|
||||
"background": "#F8FAFC",
|
||||
"surface-container-low": "#f3f3fe",
|
||||
"info": "#0EA5E9",
|
||||
"on-surface-variant": "#434655",
|
||||
"primary-fixed": "#dbe1ff",
|
||||
"on-error": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#38485d",
|
||||
"on-primary-container": "#eeefff",
|
||||
"error": "#ba1a1a",
|
||||
"on-surface": "#191b23",
|
||||
"on-primary-fixed": "#00174b",
|
||||
"slate-900": "#0F172A",
|
||||
"on-tertiary-container": "#ffede6",
|
||||
"outline-variant": "#c3c6d7",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-primary-fixed-variant": "#003ea8",
|
||||
"secondary-container": "#d0e1fb",
|
||||
"secondary": "#505f76",
|
||||
"inverse-on-surface": "#f0f0fb",
|
||||
"danger": "#DC2626",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"secondary-fixed-dim": "#b7c8e1",
|
||||
"surface-dim": "#d9d9e5",
|
||||
"slate-100": "#F1F5F9",
|
||||
"surface-bright": "#faf8ff",
|
||||
"on-tertiary-fixed-variant": "#7d2d00",
|
||||
"success": "#16A34A",
|
||||
"primary-container": "#2563eb",
|
||||
"surface-tint": "#0053db",
|
||||
"inverse-primary": "#b4c5ff",
|
||||
"slate-700": "#334155",
|
||||
"inverse-surface": "#2e3039",
|
||||
"tertiary-fixed": "#ffdbcd",
|
||||
"surface-container-highest": "#e1e2ed",
|
||||
"warning": "#F59E0B",
|
||||
"outline": "#737686",
|
||||
"slate-500": "#64748B"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"page-padding": "24px",
|
||||
"topbar-height": "72px",
|
||||
"row-height": "52px",
|
||||
"gutter": "24px",
|
||||
"card-padding": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"display-lg": ["Plus Jakarta Sans"],
|
||||
"label-md": ["Inter"],
|
||||
"metric-lg": ["Inter"],
|
||||
"headline-md": ["Plus Jakarta Sans"],
|
||||
"body-md": ["Inter"],
|
||||
"body-lg": ["Inter"],
|
||||
"headline-lg": ["Plus Jakarta Sans"],
|
||||
"metric-sm": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500"}],
|
||||
"metric-lg": ["32px", {"lineHeight": "40px", "fontWeight": "600"}],
|
||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
||||
"headline-lg": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
|
||||
"metric-sm": ["14px", {"lineHeight": "20px", "fontWeight": "600"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md min-h-screen">
|
||||
<!-- Side Navigation -->
|
||||
<aside class="w-64 h-full fixed left-0 top-0 bg-surface-container-lowest border-r border-slate-200 flex flex-col py-6 px-4 gap-2 z-50">
|
||||
<div class="flex items-center gap-3 px-2 mb-8">
|
||||
<div class="w-10 h-10 bg-primary-container rounded-xl flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-white" style="font-variation-settings: 'FILL' 1;">sound_detection_dog_barking</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="font-headline-md text-headline-md font-bold text-primary">Soundbox Ops</h1>
|
||||
<p class="text-[10px] uppercase tracking-wider text-slate-500 font-bold">Admin Console</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="flex-1 flex flex-col gap-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined">dashboard</span>
|
||||
<span class="font-body-md">Overview</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 bg-secondary-container text-on-secondary-container font-bold rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">storefront</span>
|
||||
<span class="font-body-md">Merchant Management</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined">speaker_group</span>
|
||||
<span class="font-body-md">Device Registry</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined">receipt_long</span>
|
||||
<span class="font-body-md">Transactions</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined">account_balance</span>
|
||||
<span class="font-body-md">Ledger & Settlement</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2.5 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined">history_edu</span>
|
||||
<span class="font-body-md">Audit Control</span>
|
||||
</a>
|
||||
</nav>
|
||||
<button class="mt-4 mb-8 mx-2 bg-primary text-white py-3 rounded-xl font-bold flex items-center justify-center gap-2 active:opacity-90 active:scale-95 transition-all shadow-lg shadow-primary/20">
|
||||
<span class="material-symbols-outlined text-[20px]">add_circle</span>
|
||||
Register New Device
|
||||
</button>
|
||||
<div class="flex flex-col gap-1 pt-4 border-t border-slate-100">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined">settings</span>
|
||||
<span class="font-body-md">Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg" href="#">
|
||||
<span class="material-symbols-outlined">help</span>
|
||||
<span class="font-body-md">Support</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Top App Bar -->
|
||||
<header class="fixed top-0 right-0 h-[72px] bg-surface-container-lowest border-b border-slate-200 flex justify-between items-center w-[calc(100%-256px)] ml-64 px-page-padding z-40">
|
||||
<div class="flex items-center bg-slate-100 rounded-full px-4 py-2 w-96">
|
||||
<span class="material-symbols-outlined text-slate-500 mr-2">search</span>
|
||||
<input id="outlet-search-input" class="bg-transparent border-none focus:ring-0 text-body-md w-full placeholder:text-slate-400" placeholder="Search outlets, merchants or device IDs..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex gap-2">
|
||||
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors relative">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full border-2 border-white"></span>
|
||||
</button>
|
||||
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">calendar_today</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="h-8 w-[1px] bg-slate-200"></div>
|
||||
<div class="flex items-center gap-3 pl-2">
|
||||
<div class="text-right">
|
||||
<p class="font-bold text-body-md text-on-surface">Alex Thompson</p>
|
||||
<p class="text-[11px] text-slate-500 font-medium">System Administrator</p>
|
||||
</div>
|
||||
<img alt="Administrator Profile" class="w-10 h-10 rounded-full border-2 border-primary/10 object-cover" data-alt="A professional headshot of a middle-aged male administrator with a confident expression, wearing a navy blue blazer over a crisp white shirt. The background is a clean, out-of-focus corporate office environment with soft morning light streaming through windows, creating a bright and reliable fintech brand atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCfm3dzHUMfLnejOKLG86RpDDoOIC_aJ0t45ABgJ5YaYjekFiCKZRbQFQBQWxfIPoLQwcr-fDLAuZitkNCuzNl6nmWhAPXh2VNBqTNprDonr9mihjslDaCp_mhjhpaGc4kMoZn9nCIDw-OAf1La-TUaW2Q9Atq25jAjaFbEPiccJ_kmTsxKMk6qZHry98H2eXDnsx9H5zVxWZ_b3p8TeapM2JORU7aqAaySzUQNJiTq5rdZdgPFvk82Dg3jCul06N4NWziRM6t7IaE"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content -->
|
||||
<main class="ml-64 pt-[72px] p-page-padding min-h-screen">
|
||||
<!-- Breadcrumbs & Header -->
|
||||
<div class="flex flex-col md:flex-row md:items-end justify-between mb-8 gap-4">
|
||||
<div>
|
||||
<nav class="flex items-center gap-2 text-label-md text-slate-500 mb-2">
|
||||
<a class="hover:text-primary transition-colors" href="#">Merchants</a>
|
||||
<span class="material-symbols-outlined text-[14px]">chevron_right</span>
|
||||
<a class="hover:text-primary transition-colors" href="#">Global Retail Group</a>
|
||||
<span class="material-symbols-outlined text-[14px]">chevron_right</span>
|
||||
<span class="text-primary font-bold">Outlets</span>
|
||||
</nav>
|
||||
<h2 class="font-display-lg text-display-lg text-on-surface">Outlet Registry</h2>
|
||||
<p class="text-on-surface-variant mt-1">Managing 14 operational nodes across 3 regions for Global Retail Group.</p>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="flex items-center gap-2 px-4 py-2.5 bg-white border border-slate-200 rounded-xl font-bold text-on-surface-variant hover:bg-slate-50 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-[20px]">filter_list</span>
|
||||
Filter
|
||||
</button>
|
||||
<button class="flex items-center gap-2 px-4 py-2.5 bg-primary text-white rounded-xl font-bold hover:shadow-lg hover:shadow-primary/30 transition-all active:scale-95">
|
||||
<span class="material-symbols-outlined text-[20px]">add</span>
|
||||
Add New Outlet
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- KPI Metrics Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter mb-8">
|
||||
<div class="bg-white p-card-padding border border-slate-200 rounded-xl">
|
||||
<p class="font-label-md text-label-md text-slate-500 uppercase tracking-wider mb-1">Total Outlets</p>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span id="outlet-kpi-total-outlets" class="font-metric-lg text-metric-lg text-on-surface">14</span>
|
||||
<span class="font-metric-sm text-metric-sm text-success flex items-center">
|
||||
<span class="material-symbols-outlined text-[16px]">trending_up</span>
|
||||
2
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-400 mt-2">Active across 4 merchant accounts</p>
|
||||
</div>
|
||||
<div class="bg-white p-card-padding border border-slate-200 rounded-xl">
|
||||
<p class="font-label-md text-label-md text-slate-500 uppercase tracking-wider mb-1">Active Devices</p>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span id="outlet-kpi-active-devices" class="font-metric-lg text-metric-lg text-on-surface">142</span>
|
||||
<span class="font-metric-sm text-metric-sm text-success flex items-center">
|
||||
<span class="material-symbols-outlined text-[16px]">check_circle</span>
|
||||
98%
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-400 mt-2">3 currently in maintenance</p>
|
||||
</div>
|
||||
<div class="bg-white p-card-padding border border-slate-200 rounded-xl">
|
||||
<p class="font-label-md text-label-md text-slate-500 uppercase tracking-wider mb-1">Daily GMV</p>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span id="outlet-kpi-gmv" class="font-metric-lg text-metric-lg text-on-surface">$124,502</span>
|
||||
<span class="font-metric-sm text-metric-sm text-success flex items-center">
|
||||
<span class="material-symbols-outlined text-[16px]">trending_up</span>
|
||||
12.4%
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-400 mt-2">Vs. previous 24h average</p>
|
||||
</div>
|
||||
<div class="bg-white p-card-padding border border-slate-200 rounded-xl">
|
||||
<p class="font-label-md text-label-md text-slate-500 uppercase tracking-wider mb-1">Health Score</p>
|
||||
<div class="flex items-baseline gap-2">
|
||||
<span id="outlet-kpi-health-score" class="font-metric-lg text-metric-lg text-on-surface">A+</span>
|
||||
<span class="font-metric-sm text-metric-sm text-info flex items-center">
|
||||
<span class="material-symbols-outlined text-[16px]">verified</span>
|
||||
Stable
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-[11px] text-slate-400 mt-2">Network latency: 142ms avg</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Data Table Section -->
|
||||
<div class="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
|
||||
<div class="px-6 py-4 border-b border-slate-200 flex justify-between items-center bg-slate-50/50">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface">Outlet Fleet</h3>
|
||||
<div class="flex gap-2">
|
||||
<button class="p-2 text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">download</span>
|
||||
</button>
|
||||
<button class="p-2 text-slate-400 hover:text-primary transition-colors">
|
||||
<span class="material-symbols-outlined">more_vert</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto custom-scrollbar">
|
||||
<div class="px-6 py-3 bg-slate-50/40 border-b border-slate-200 flex flex-wrap items-center gap-3">
|
||||
<select id="outlet-status-filter" class="bg-white border-slate-200 rounded-lg text-body-md py-1.5 px-3 focus:ring-primary focus:border-primary">
|
||||
<option value="">All Statuses</option>
|
||||
<option value="active">Active</option>
|
||||
<option value="inactive">Inactive</option>
|
||||
</select>
|
||||
<select id="outlet-merchant-filter" class="bg-white border-slate-200 rounded-lg text-body-md py-1.5 px-3 focus:ring-primary focus:border-primary">
|
||||
<option value="">All Merchants</option>
|
||||
</select>
|
||||
<button id="outlet-clear-filter" class="text-primary font-bold text-body-md hover:underline">Clear</button>
|
||||
</div>
|
||||
<table class="w-full text-left border-collapse">
|
||||
<thead>
|
||||
<tr class="bg-white border-b border-slate-200">
|
||||
<th class="px-6 py-4 font-label-md text-label-md text-slate-500 uppercase tracking-wider sticky top-0 bg-white">Outlet Name</th>
|
||||
<th class="px-6 py-4 font-label-md text-label-md text-slate-500 uppercase tracking-wider sticky top-0 bg-white">Location</th>
|
||||
<th class="px-6 py-4 font-label-md text-label-md text-slate-500 uppercase tracking-wider sticky top-0 bg-white">Active Devices</th>
|
||||
<th class="px-6 py-4 font-label-md text-label-md text-slate-500 uppercase tracking-wider sticky top-0 bg-white text-right">Daily GMV</th>
|
||||
<th class="px-6 py-4 font-label-md text-label-md text-slate-500 uppercase tracking-wider sticky top-0 bg-white">Status</th>
|
||||
<th class="px-6 py-4 font-label-md text-label-md text-slate-500 uppercase tracking-wider sticky top-0 bg-white text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="outlet-table-body" class="divide-y divide-slate-100"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Pagination -->
|
||||
<div class="px-6 py-4 border-t border-slate-200 flex items-center justify-between bg-white">
|
||||
<p id="outlet-pagination-label" class="text-body-md text-slate-500">Showing <span class="font-bold text-on-surface">1-4</span> of <span class="font-bold text-on-surface">14</span> outlets</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="p-2 border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-50" disabled="">
|
||||
<span class="material-symbols-outlined text-[20px]">chevron_left</span>
|
||||
</button>
|
||||
<button class="w-10 h-10 bg-primary text-white font-bold rounded-lg flex items-center justify-center">1</button>
|
||||
<button class="w-10 h-10 border border-slate-200 text-on-surface-variant font-bold rounded-lg flex items-center justify-center hover:bg-slate-50">2</button>
|
||||
<button class="w-10 h-10 border border-slate-200 text-on-surface-variant font-bold rounded-lg flex items-center justify-center hover:bg-slate-50">3</button>
|
||||
<button class="p-2 border border-slate-200 rounded-lg hover:bg-slate-50">
|
||||
<span class="material-symbols-outlined text-[20px]">chevron_right</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Detail Drawer Overlay -->
|
||||
<div class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-[60] hidden transition-opacity opacity-0 duration-300" id="drawer-overlay" onclick="closeDrawer()"></div>
|
||||
<!-- Detail Drawer -->
|
||||
<div class="fixed top-0 right-0 h-full w-[450px] bg-white z-[70] shadow-2xl transform translate-x-full transition-transform duration-300 ease-in-out border-l border-slate-200" id="detail-drawer">
|
||||
<div class="h-full flex flex-col">
|
||||
<!-- Drawer Header -->
|
||||
<div class="p-6 border-b border-slate-200 flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="font-headline-lg text-headline-lg text-on-surface" id="drawer-title">Outlet Details</h2>
|
||||
<p class="text-on-surface-variant mono text-[12px] uppercase mt-1" id="drawer-subtitle">Registry Details & Performance</p>
|
||||
</div>
|
||||
<button id="outlet-close-drawer" class="p-2 hover:bg-slate-100 rounded-full text-slate-500 transition-colors" onclick="closeDrawer()">
|
||||
<span class="material-symbols-outlined">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Drawer Content -->
|
||||
<div id="outlet-detail-content" class="flex-1 overflow-y-auto p-6 space-y-8 custom-scrollbar">
|
||||
<!-- Quick Map / Location Placeholder -->
|
||||
<div class="relative w-full h-40 bg-slate-100 rounded-xl overflow-hidden group">
|
||||
<img alt="Outlet Location Map" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="A high-quality digital map visualization of a city grid with a glowing primary blue marker indicating a retail outlet's exact location. The map style is minimalist and professional, featuring clean lines, light slate roads, and subtle shadows. The atmosphere is data-driven and high-tech, perfect for a fintech admin console." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBgJJ_Pffdd01siqz80ATGDmpsX4M_Q9e8N61y1NBHxgqAi9FlNNaGbXx63jVU01gYYbGsWqpuRgd0ugP5iAWeezv7VUCS-nqsQ0_8jFidoh-nutfjRUZzCOF4PhgWpPMCiuGc9EeohMZrIWRj6ytjA6mDz0NRHQamTaSj98xXa1gaM9rszxzOpjq2Vr-RFuXsne7OYxFzzWw5JJF_MMASJN9rc5RxaWTcrXBbCqTbxYnlQpSuewUZ9U-wl-RadYy_DBWZ6OkRbPCo"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 to-transparent flex items-end p-4">
|
||||
<p class="text-white font-bold flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">location_on</span>
|
||||
View on Live Map
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Metrics Bento Section -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-4 bg-slate-50 border border-slate-100 rounded-xl">
|
||||
<p class="font-label-md text-label-md text-slate-500 mb-1">Weekly Volume</p>
|
||||
<p class="font-headline-md text-headline-md text-on-surface">$84,203.44</p>
|
||||
<p class="text-[11px] text-success font-bold mt-1 flex items-center">
|
||||
<span class="material-symbols-outlined text-[14px]">arrow_upward</span>
|
||||
8.2%
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-4 bg-slate-50 border border-slate-100 rounded-xl">
|
||||
<p class="font-label-md text-label-md text-slate-500 mb-1">Avg. Transaction</p>
|
||||
<p class="font-headline-md text-headline-md text-on-surface">$42.10</p>
|
||||
<p class="text-[11px] text-slate-400 mt-1">Based on 2.4k txn</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Device Lifecycle Timeline -->
|
||||
<div>
|
||||
<h4 class="font-headline-md text-headline-md text-on-surface mb-4">Device Fleet Status</h4>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="mt-1 flex flex-col items-center">
|
||||
<div class="w-3 h-3 rounded-full bg-success"></div>
|
||||
<div class="w-0.5 h-12 bg-slate-200"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface">22 Active Soundboxes</p>
|
||||
<p class="text-body-md text-on-surface-variant">Transmitting real-time payment alerts.</p>
|
||||
<p class="text-[11px] text-slate-400 mono mt-1">LATENCY: 114ms</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="mt-1 flex flex-col items-center">
|
||||
<div class="w-3 h-3 rounded-full bg-warning"></div>
|
||||
<div class="w-0.5 h-12 border-l-2 border-dashed border-slate-200"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface">2 Provisioning</p>
|
||||
<p class="text-body-md text-on-surface-variant">Awaiting SIM activation & merchant link.</p>
|
||||
<p class="text-[11px] text-warning font-bold mt-1 uppercase tracking-tighter">Action Required</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="mt-1 flex flex-col items-center">
|
||||
<div class="w-3 h-3 rounded-full bg-slate-200"></div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-slate-400 text-on-surface">Next Scheduled Audit</p>
|
||||
<p class="text-body-md text-slate-400">Compliance check and hardware diagnostic.</p>
|
||||
<p class="text-[11px] text-slate-400 mono mt-1 italic">DUE IN: 14 DAYS</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Raw Payload Viewer (Audit Block) -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<h4 class="font-headline-md text-headline-md text-on-surface">Configuration Metadata</h4>
|
||||
<button class="text-primary text-[12px] font-bold flex items-center gap-1 hover:underline">
|
||||
<span class="material-symbols-outlined text-[14px]">content_copy</span>
|
||||
Copy JSON
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-slate-900 rounded-xl p-4 overflow-x-auto">
|
||||
<pre class="mono text-[12px] text-primary-fixed-dim leading-relaxed">{
|
||||
"outlet_id": "OUT-49201-DF",
|
||||
"merchant_group": "GLOBAL_RETAIL_001",
|
||||
"region": "US-WEST-1",
|
||||
"capabilities": ["SOUND_ALERTS", "QR_DYNAMIC"],
|
||||
"encryption_level": "AES-256",
|
||||
"last_heartbeat": "2023-11-24T10:42:12Z",
|
||||
"status": "OPERATIONAL"
|
||||
}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Drawer Footer Actions -->
|
||||
<div class="p-6 border-t border-slate-200 flex gap-3 bg-white">
|
||||
<button class="flex-1 py-3 px-4 bg-primary text-white font-bold rounded-xl active:scale-95 transition-all">
|
||||
Edit Configuration
|
||||
</button>
|
||||
<button class="py-3 px-4 border border-slate-200 text-on-surface-variant font-bold rounded-xl active:scale-95 transition-all hover:bg-slate-50">
|
||||
Relocate
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/ui/shared/admin-api.js"></script>
|
||||
<script>
|
||||
const OutletList = (() => {
|
||||
const api = window.AdminUIAPI;
|
||||
const searchInput = document.getElementById('outlet-search-input');
|
||||
const statusFilter = document.getElementById('outlet-status-filter');
|
||||
const merchantFilter = document.getElementById('outlet-merchant-filter');
|
||||
const clearFilter = document.getElementById('outlet-clear-filter');
|
||||
const tableBody = document.getElementById('outlet-table-body');
|
||||
const paginationLabel = document.getElementById('outlet-pagination-label');
|
||||
const drawer = document.getElementById('detail-drawer');
|
||||
const overlay = document.getElementById('drawer-overlay');
|
||||
const closeDrawerButton = document.getElementById('outlet-close-drawer');
|
||||
const detailContent = document.getElementById('outlet-detail-content');
|
||||
const drawerTitle = document.getElementById('drawer-title');
|
||||
const drawerSubtitle = document.getElementById('drawer-subtitle');
|
||||
|
||||
const kpiTotal = document.getElementById('outlet-kpi-total-outlets');
|
||||
const kpiDevices = document.getElementById('outlet-kpi-active-devices');
|
||||
const kpiGmv = document.getElementById('outlet-kpi-gmv');
|
||||
const kpiHealth = document.getElementById('outlet-kpi-health-score');
|
||||
|
||||
const normalizeText = (value) => (value || '').toString().trim().toLowerCase();
|
||||
const merchantMap = new Map();
|
||||
let rows = [];
|
||||
let merchants = [];
|
||||
let devices = [];
|
||||
let refreshTimer = null;
|
||||
|
||||
const statusBadgeClass = (status) => {
|
||||
if (status === 'inactive') {
|
||||
return 'bg-warning/10 text-warning';
|
||||
}
|
||||
return 'bg-success/10 text-success';
|
||||
};
|
||||
|
||||
const statusText = (status) => (status === 'inactive' ? 'Inactive' : 'Active');
|
||||
|
||||
const buildDevicesByOutlet = () => {
|
||||
const map = new Map();
|
||||
devices.forEach((device) => {
|
||||
const outletId = device?.binding_summary?.outlet_id;
|
||||
if (!outletId) {
|
||||
return;
|
||||
}
|
||||
map.set(outletId, (map.get(outletId) || 0) + 1);
|
||||
});
|
||||
return map;
|
||||
};
|
||||
|
||||
const toOutletName = (outlet) => outlet?.name || 'Untitled outlet';
|
||||
|
||||
const renderRows = (outlets) => {
|
||||
if (!tableBody) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!outlets.length) {
|
||||
tableBody.innerHTML =
|
||||
'<tr><td colspan="6" class="px-6 py-4 text-center text-slate-500">No outlets found</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
const devicesByOutlet = buildDevicesByOutlet();
|
||||
|
||||
tableBody.innerHTML = outlets
|
||||
.map((outlet) => {
|
||||
const id = outlet.id;
|
||||
const code = outlet.outlet_code || id || '-';
|
||||
const name = toOutletName(outlet);
|
||||
const location = outlet.address || '-';
|
||||
const merchantName = merchantMap.get(outlet.merchant_id) || outlet.merchant_id || 'Unknown merchant';
|
||||
const status = normalizeText(outlet.status) || 'active';
|
||||
const connectedDevices = devicesByOutlet.get(id) || 0;
|
||||
const gmv = outlet.gmv || 0;
|
||||
|
||||
return `
|
||||
<tr class="hover:bg-slate-50 transition-colors group" data-outlet-id="${id}">
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-lg bg-slate-100 flex items-center justify-center text-primary group-hover:bg-primary/10 transition-colors">
|
||||
<span class="material-symbols-outlined">store</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-bold text-on-surface">${name}</p>
|
||||
<p class="text-[12px] text-slate-500 mono">${code}</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px] text-slate-400">location_on</span>
|
||||
<span class="text-body-md text-on-surface-variant">${location}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="text-body-lg font-bold text-on-surface">${connectedDevices}</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<p class="text-body-lg font-bold text-on-surface mono">${api.formatMoney(gmv)}</p>
|
||||
</td>
|
||||
<td class="px-6 py-4">
|
||||
<span class="px-3 py-1 rounded-full text-[12px] font-bold uppercase tracking-tight inline-flex items-center gap-1 ${statusBadgeClass(status)}">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-current"></span>
|
||||
${statusText(status)}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 text-right">
|
||||
<button class="p-2 hover:bg-slate-200 rounded-lg transition-colors text-slate-500" data-action="open-detail" data-id="${id}">
|
||||
<span class="material-symbols-outlined">visibility</span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
})
|
||||
.join('');
|
||||
|
||||
tableBody.querySelectorAll('button[data-action="open-detail"]').forEach((button) => {
|
||||
button.addEventListener('click', (event) => {
|
||||
const rowId = event.currentTarget?.getAttribute('data-id');
|
||||
const outlet = rows.find((item) => item.id === rowId);
|
||||
if (outlet) {
|
||||
openDrawer(outlet);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const renderFilters = () => {
|
||||
if (!merchantFilter) {
|
||||
return;
|
||||
}
|
||||
|
||||
const options = merchants.map((item) => {
|
||||
const id = item.id || item.merchant_id || item.merchant_code;
|
||||
const name = item.legal_name || item.brand_name || item.company_name || id;
|
||||
merchantMap.set(id, name);
|
||||
return `<option value="${id}">${name}</option>`;
|
||||
});
|
||||
|
||||
merchantFilter.innerHTML = '<option value="">All Merchants</option>';
|
||||
options
|
||||
.sort((a, b) => a.localeCompare(b))
|
||||
.forEach((optionHtml) => {
|
||||
merchantFilter.insertAdjacentHTML('beforeend', optionHtml);
|
||||
});
|
||||
};
|
||||
|
||||
const refreshKPIs = (outlets) => {
|
||||
if (kpiTotal) {
|
||||
kpiTotal.textContent = String(outlets.length);
|
||||
}
|
||||
if (kpiDevices) {
|
||||
const totalDevices = devices.length;
|
||||
kpiDevices.textContent = String(totalDevices);
|
||||
}
|
||||
if (kpiGmv) {
|
||||
kpiGmv.textContent = api.formatMoney(0);
|
||||
}
|
||||
if (kpiHealth) {
|
||||
const activeCount = outlets.filter((row) => (row.status || '').toLowerCase() === 'active').length;
|
||||
const ratio = outlets.length ? Math.round((activeCount / outlets.length) * 100) : 0;
|
||||
kpiHealth.textContent = ratio >= 90 ? 'A+' : ratio >= 80 ? 'B+' : 'C';
|
||||
}
|
||||
};
|
||||
|
||||
const applySearchFilters = () => {
|
||||
const q = normalizeText(searchInput?.value);
|
||||
const status = normalizeText(statusFilter?.value);
|
||||
const merchantId = (merchantFilter?.value || '').trim();
|
||||
|
||||
const filtered = rows.filter((outlet) => {
|
||||
const merchantName = normalizeText(merchantMap.get(outlet.merchant_id) || '');
|
||||
const name = normalizeText(outlet.name || outlet.outlet_code);
|
||||
const location = normalizeText(outlet.address);
|
||||
|
||||
const matchQuery =
|
||||
!q ||
|
||||
name.includes(q) ||
|
||||
merchantName.includes(q) ||
|
||||
normalizeText(outlet.outlet_code).includes(q) ||
|
||||
location.includes(q);
|
||||
const matchStatus = !status || normalizeText(outlet.status) === status;
|
||||
const matchMerchant = !merchantId || outlet.merchant_id === merchantId;
|
||||
|
||||
return matchQuery && matchStatus && matchMerchant;
|
||||
});
|
||||
|
||||
rowsFiltered = filtered;
|
||||
refreshKPIs(filtered);
|
||||
renderRows(filtered);
|
||||
|
||||
if (paginationLabel) {
|
||||
paginationLabel.innerHTML = `Showing <span class="font-bold text-on-surface">1 - ${Math.min(filtered.length, 10)}</span> of <span class="font-bold text-on-surface">${filtered.length}</span> outlets`;
|
||||
}
|
||||
};
|
||||
|
||||
let rowsFiltered = [];
|
||||
|
||||
const openDrawer = (outlet) => {
|
||||
const merchantName = merchantMap.get(outlet.merchant_id) || outlet.merchant_id || 'Unknown merchant';
|
||||
if (drawerTitle) {
|
||||
drawerTitle.textContent = outlet.name || 'Outlet Details';
|
||||
}
|
||||
if (drawerSubtitle) {
|
||||
drawerSubtitle.textContent = outlet.outlet_code || outlet.id || 'Outlet Details';
|
||||
}
|
||||
|
||||
const deviceCount = devices.filter((device) => device?.binding_summary?.outlet_id === outlet.id).length;
|
||||
|
||||
if (detailContent) {
|
||||
detailContent.innerHTML = `
|
||||
<div class="relative w-full h-40 bg-slate-100 rounded-xl overflow-hidden group">
|
||||
<img alt="Outlet Location Map" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBgJJ_Pffdd01siqz80ATGDmpsX4M_Q9e8N61y1NBHxgqAi9FlNNaGbXx63jVU01gYYbGsWqpuRgd0ugP5iAWeezv7VUCS-nqsQ0_8jFidoh-nutfjRUZzCOF4PhgWpPMCiuGc9EeohMZrIWRj6ytjA6mDz0NRHQamTaSj98xXa1gaM9rszxzOpjq2Vr-RFuXsne7OYxFzzWw5JJF_MMASJN9rc5RxaWTcrXBbCqTbxYnlQpSuewUZ9U-wl-RadYy_DBWZ6OkRbPCo"/>
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-slate-900/60 to-transparent flex items-end p-4">
|
||||
<p class="text-white font-bold flex items-center gap-2"><span class="material-symbols-outlined text-[18px]">location_on</span>View on Live Map</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-4 bg-slate-50 border border-slate-100 rounded-xl"><p class="font-label-md text-label-md text-slate-500 mb-1">Merchant</p><p class="font-headline-md text-headline-md text-on-surface">${merchantName}</p></div>
|
||||
<div class="p-4 bg-slate-50 border border-slate-100 rounded-xl"><p class="font-label-md text-label-md text-slate-500 mb-1">Outlet ID</p><p class="font-headline-md text-headline-md text-on-surface">${outlet.outlet_code || '-'}</p></div>
|
||||
</div>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="p-4 bg-slate-50 border border-slate-100 rounded-xl"><p class="font-label-md text-label-md text-slate-500 mb-1">Connected Devices</p><p class="font-headline-md text-headline-md text-on-surface">${deviceCount}</p></div>
|
||||
<div class="p-4 bg-slate-50 border border-slate-100 rounded-xl"><p class="font-label-md text-label-md text-slate-500 mb-1">Status</p><p class="font-headline-md text-headline-md text-on-surface">${statusText(outlet.status)}</p></div>
|
||||
</div>
|
||||
<div class="p-4 bg-slate-50 border border-slate-100 rounded-xl"><p class="font-label-md text-label-md text-slate-500 mb-1">Address</p><p class="text-body-md text-on-surface">${outlet.address || 'No address provided'}</p></div>
|
||||
<div class="p-4 bg-slate-900 rounded-xl text-slate-300"><pre class="text-xs overflow-auto font-mono">${JSON.stringify(outlet, null, 2)}</pre></div>
|
||||
`;
|
||||
}
|
||||
|
||||
if (overlay && drawer) {
|
||||
overlay.classList.remove('hidden');
|
||||
setTimeout(() => {
|
||||
overlay.classList.remove('opacity-0');
|
||||
overlay.classList.add('opacity-100');
|
||||
drawer.classList.remove('translate-x-full');
|
||||
}, 10);
|
||||
}
|
||||
};
|
||||
|
||||
const closeDrawer = () => {
|
||||
if (!overlay || !drawer) {
|
||||
return;
|
||||
}
|
||||
overlay.classList.remove('opacity-100');
|
||||
overlay.classList.add('opacity-0');
|
||||
drawer.classList.add('translate-x-full');
|
||||
setTimeout(() => {
|
||||
overlay.classList.add('hidden');
|
||||
}, 300);
|
||||
};
|
||||
|
||||
const onFilterChange = () => {
|
||||
if (refreshTimer) {
|
||||
clearTimeout(refreshTimer);
|
||||
}
|
||||
refreshTimer = setTimeout(applySearchFilters, 180);
|
||||
};
|
||||
|
||||
const refresh = async () => {
|
||||
try {
|
||||
api.requireToken();
|
||||
const [outletRows, merchantRows, deviceRows] = await Promise.all([
|
||||
api.listOutlets(),
|
||||
api.listMerchants(),
|
||||
api.listDevices()
|
||||
]);
|
||||
|
||||
rows = Array.isArray(outletRows) ? outletRows : [];
|
||||
merchants = Array.isArray(merchantRows) ? merchantRows : [];
|
||||
devices = Array.isArray(deviceRows) ? deviceRows : [];
|
||||
|
||||
renderFilters();
|
||||
applySearchFilters();
|
||||
} catch (error) {
|
||||
console.error('[outlet-management] failed loading', error);
|
||||
if (tableBody) {
|
||||
tableBody.innerHTML = '<tr><td colspan="6" class="px-6 py-4 text-center text-danger">Unable to load outlet data</td></tr>';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
clearFilter?.addEventListener('click', () => {
|
||||
if (searchInput) {
|
||||
searchInput.value = '';
|
||||
}
|
||||
if (statusFilter) {
|
||||
statusFilter.value = '';
|
||||
}
|
||||
if (merchantFilter) {
|
||||
merchantFilter.value = '';
|
||||
}
|
||||
applySearchFilters();
|
||||
});
|
||||
|
||||
searchInput?.addEventListener('input', onFilterChange);
|
||||
statusFilter?.addEventListener('change', onFilterChange);
|
||||
merchantFilter?.addEventListener('change', onFilterChange);
|
||||
closeDrawerButton?.addEventListener('click', closeDrawer);
|
||||
overlay?.addEventListener('click', closeDrawer);
|
||||
|
||||
refresh();
|
||||
|
||||
return { refresh, openDrawer, closeDrawer, applySearchFilters };
|
||||
})();
|
||||
</script>
|
||||
<!-- ui-nav -->
|
||||
<div id="__sb_nav" style="position:fixed;left:16px;bottom:16px;z-index:9999;background:#fff;border:1px solid #e2e8f0;padding:8px 10px;border-radius:8px;box-shadow:0 6px 24px rgba(15,23,42,0.12);font-family:Inter,Arial,sans-serif;font-size:12px;line-height:1.4">
|
||||
<a href="/ui" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">UI Catalog</a>
|
||||
<a href="/ui/hub" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">Hub</a>
|
||||
<a href="/ui/admin-login" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">Admin Login</a>
|
||||
<a href="/ui/merchant-login" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">Merchant Login</a>
|
||||
<a href="/ui/admin-dashboard-overview" style="margin-right:0;color:#2563eb;text-decoration:none;font-weight:600">Dashboard</a>
|
||||
</div>
|
||||
'
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user