Initial commit
This commit is contained in:
756
ui/device-technical-detail/index.html
Normal file
756
ui/device-technical-detail/index.html
Normal file
@ -0,0 +1,756 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Device Detail | 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"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary-fixed": "#ffdbcd",
|
||||
"on-primary": "#ffffff",
|
||||
"primary-fixed-dim": "#b4c5ff",
|
||||
"error-container": "#ffdad6",
|
||||
"warning": "#F59E0B",
|
||||
"slate-200": "#E2E8F0",
|
||||
"outline-variant": "#c3c6d7",
|
||||
"surface-dim": "#d9d9e5",
|
||||
"on-tertiary-container": "#ffede6",
|
||||
"inverse-surface": "#2e3039",
|
||||
"inverse-on-surface": "#f0f0fb",
|
||||
"slate-100": "#F1F5F9",
|
||||
"tertiary-fixed-dim": "#ffb596",
|
||||
"on-tertiary-fixed-variant": "#7d2d00",
|
||||
"on-surface": "#191b23",
|
||||
"on-error-container": "#93000a",
|
||||
"surface-tint": "#0053db",
|
||||
"inverse-primary": "#b4c5ff",
|
||||
"outline": "#737686",
|
||||
"slate-500": "#64748B",
|
||||
"secondary": "#505f76",
|
||||
"on-primary-container": "#eeefff",
|
||||
"surface-variant": "#e1e2ed",
|
||||
"surface-container": "#ededf9",
|
||||
"success": "#16A34A",
|
||||
"on-tertiary-fixed": "#360f00",
|
||||
"secondary-container": "#d0e1fb",
|
||||
"on-primary-fixed-variant": "#003ea8",
|
||||
"surface": "#faf8ff",
|
||||
"slate-900": "#0F172A",
|
||||
"primary-fixed": "#dbe1ff",
|
||||
"secondary-fixed-dim": "#b7c8e1",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-secondary-fixed-variant": "#38485d",
|
||||
"on-error": "#ffffff",
|
||||
"on-secondary-container": "#54647a",
|
||||
"background": "#F8FAFC",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"on-surface-variant": "#434655",
|
||||
"surface-container-low": "#f3f3fe",
|
||||
"on-background": "#191b23",
|
||||
"surface-container-highest": "#e1e2ed",
|
||||
"info": "#0EA5E9",
|
||||
"danger": "#DC2626",
|
||||
"surface-bright": "#faf8ff",
|
||||
"error": "#ba1a1a",
|
||||
"primary-container": "#2563eb",
|
||||
"primary": "#004ac6",
|
||||
"tertiary": "#943700",
|
||||
"secondary-fixed": "#d3e4fe",
|
||||
"tertiary-container": "#bc4800",
|
||||
"surface-container-high": "#e7e7f3",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-primary-fixed": "#00174b",
|
||||
"slate-700": "#334155"
|
||||
},
|
||||
"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": {
|
||||
"headline-md": ["Plus Jakarta Sans"],
|
||||
"metric-sm": ["Inter"],
|
||||
"metric-lg": ["Inter"],
|
||||
"label-md": ["Inter"],
|
||||
"headline-lg": ["Plus Jakarta Sans"],
|
||||
"body-md": ["Inter"],
|
||||
"display-lg": ["Plus Jakarta Sans"],
|
||||
"body-lg": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
||||
"metric-sm": ["14px", {"lineHeight": "20px", "fontWeight": "600"}],
|
||||
"metric-lg": ["32px", {"lineHeight": "40px", "fontWeight": "600"}],
|
||||
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500"}],
|
||||
"headline-lg": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
|
||||
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
||||
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
|
||||
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.code-font { font-family: 'JetBrains Mono', monospace; }
|
||||
.custom-scroll::-webkit-scrollbar { width: 4px; }
|
||||
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
|
||||
.custom-scroll::-webkit-scrollbar-thumb { background: #E2E8F0; border-radius: 10px; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-background text-on-surface font-body-md antialiased">
|
||||
<!-- Side Navigation Shell -->
|
||||
<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="mb-8 px-2">
|
||||
<h1 class="font-headline-md text-headline-md font-bold text-primary">Soundbox Ops</h1>
|
||||
<p class="text-label-md text-on-surface-variant">Admin Console</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg group" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">dashboard</span>
|
||||
<span class="font-body-md">Overview</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 group" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">storefront</span>
|
||||
<span class="font-body-md">Merchant Management</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 bg-secondary-container text-on-secondary-container font-bold rounded-lg group" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">speaker_group</span>
|
||||
<span class="font-body-md">Device Registry</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 group" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">receipt_long</span>
|
||||
<span class="font-body-md">Transactions</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 group" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">account_balance</span>
|
||||
<span class="font-body-md">Ledger & Settlement</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 group" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">history_edu</span>
|
||||
<span class="font-body-md">Audit Control</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto border-t border-slate-100 pt-4 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-on-surface-variant hover:bg-slate-100 transition-colors rounded-lg group" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">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 group" href="#">
|
||||
<span class="material-symbols-outlined text-[20px]">help</span>
|
||||
<span class="font-body-md">Support</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Top Navigation Shell -->
|
||||
<header class="fixed top-0 right-0 h-[72px] flex justify-between items-center w-[calc(100%-256px)] ml-64 px-page-padding bg-surface-container-lowest border-b border-slate-200 z-40">
|
||||
<div class="flex items-center gap-4 bg-surface-container-low px-3 py-1.5 rounded-full w-96 border border-slate-200">
|
||||
<span class="material-symbols-outlined text-slate-500">search</span>
|
||||
<input class="bg-transparent border-none focus:ring-0 text-body-md w-full" placeholder="Search devices, merchants, or serials..." type="text"/>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-4 text-on-surface-variant">
|
||||
<button class="hover:text-primary transition-colors flex items-center gap-1">
|
||||
<span class="material-symbols-outlined">notifications</span>
|
||||
</button>
|
||||
<button class="hover:text-primary transition-colors flex items-center gap-1">
|
||||
<span class="material-symbols-outlined">calendar_today</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="h-8 w-px bg-slate-200"></div>
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="text-right">
|
||||
<p class="text-label-md font-bold text-on-surface">Admin_User</p>
|
||||
<p class="text-[10px] text-slate-500 uppercase tracking-wider">Super Admin</p>
|
||||
</div>
|
||||
<img alt="Admin Avatar" class="w-10 h-10 rounded-full border-2 border-slate-100" data-alt="A professional headshot of a corporate technology administrator in a bright, modern office setting. The person has a friendly but authoritative expression. The lighting is crisp and natural, with a soft-focus background of a contemporary workstation and glass partitions, emphasizing a clean and efficient workspace." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBK5Bznv_N0fDPHYNOfdTITCcx2J24NhdTXOayYDW1Ve1g8JyTVuXORa1X-hvMSGk8VneyDK8kxQXLikdOs44c4a3-DanQUdKM7BqiizwA_m3MnULvWUBXydth4D6uac3UFSwU5Qx8ckVSYTrpoG0AvnxANAbvSv0CD2yCs21O8lpHokxv-vVCCaheQRGC5Wyw0TYY5o1V_D87PhtYXIVRL0yCMUz1e0pMoGhGY5g5BjNrQSg2gCTBVSJc9SHvTB9r_7EQPnBMV-0E"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Area -->
|
||||
<main class="ml-64 pt-[72px] min-h-screen">
|
||||
<div class="p-page-padding">
|
||||
<!-- Breadcrumb & Back Action -->
|
||||
<div class="flex items-center gap-2 mb-6 text-on-surface-variant">
|
||||
<a class="flex items-center hover:text-primary transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-sm mr-1">arrow_back</span>
|
||||
<span class="text-label-md">Back to Registry</span>
|
||||
</a>
|
||||
<span class="text-slate-300">/</span>
|
||||
<span class="text-label-md" id="device-breadcrumb-code">SND-10293</span>
|
||||
</div>
|
||||
<!-- Device Header Summary -->
|
||||
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-card-padding mb-gutter flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
|
||||
<div class="flex items-start gap-5">
|
||||
<div class="w-16 h-16 bg-primary-fixed rounded-xl flex items-center justify-center text-primary">
|
||||
<span class="material-symbols-outlined text-[40px]">speaker_group</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-3 mb-1">
|
||||
<h2 class="font-headline-lg text-headline-lg text-on-surface" id="device-title">SND-10293</h2>
|
||||
<span id="device-status-badge" class="bg-success/10 text-success text-[10px] font-bold px-2 py-0.5 rounded-full border border-success/20 uppercase tracking-wider flex items-center gap-1">
|
||||
<span id="device-status-dot" class="w-1.5 h-1.5 rounded-full bg-success"></span>
|
||||
Online
|
||||
</span>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-x-6 gap-y-1">
|
||||
<p class="text-body-md text-on-surface-variant flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-sm">settings_input_component</span>
|
||||
<span id="device-model">Soundbox V2 Pro</span>
|
||||
</p>
|
||||
<p class="text-body-md text-on-surface-variant flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-sm">schedule</span>
|
||||
<span id="device-last-seen">Last seen 2 mins ago</span>
|
||||
</p>
|
||||
<p class="text-body-md text-on-surface-variant flex items-center gap-1.5">
|
||||
<span class="material-symbols-outlined text-sm">location_on</span>
|
||||
<span id="device-location">Mumbai, Central Region</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="px-4 py-2 border border-slate-200 text-on-surface-variant font-bold text-body-md rounded-lg hover:bg-slate-50 transition-all flex items-center gap-2" id="export-device-logs">
|
||||
<span class="material-symbols-outlined text-[20px]">download</span>
|
||||
Export Logs
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-primary text-on-primary font-bold text-body-md rounded-lg hover:opacity-90 active:scale-95 transition-all flex items-center gap-2" id="refresh-device-state">
|
||||
<span class="material-symbols-outlined text-[20px]">sync</span>
|
||||
Refresh State
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tab Navigation -->
|
||||
<div class="border-b border-slate-200 mb-8 flex gap-8">
|
||||
<button class="pb-4 text-body-md font-bold text-primary border-b-2 border-primary">Overview</button>
|
||||
<button class="pb-4 text-body-md font-medium text-on-surface-variant hover:text-primary transition-colors">Heartbeat</button>
|
||||
<button class="pb-4 text-body-md font-medium text-on-surface-variant hover:text-primary transition-colors">Configuration</button>
|
||||
<button class="pb-4 text-body-md font-medium text-on-surface-variant hover:text-primary transition-colors">Binding History</button>
|
||||
</div>
|
||||
<!-- Grid Layout -->
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<!-- Left Column: Primary Content -->
|
||||
<div class="col-span-12 lg:col-span-8 space-y-gutter">
|
||||
<!-- KPI Metrics Bento Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
|
||||
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
||||
<p class="text-label-md text-on-surface-variant mb-2">Signal Strength (4G)</p>
|
||||
<div class="flex items-end justify-between">
|
||||
<h3 class="font-metric-lg text-metric-lg text-on-surface" id="device-signal-strength">-78 dBm</h3>
|
||||
<span class="material-symbols-outlined text-success">signal_cellular_4_bar</span>
|
||||
</div>
|
||||
<p class="text-metric-sm text-success mt-2 flex items-center gap-1" id="device-signal-status">
|
||||
<span class="material-symbols-outlined text-[16px]">check_circle</span>
|
||||
Excellent
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
||||
<p class="text-label-md text-on-surface-variant mb-2">Battery Health</p>
|
||||
<div class="flex items-end justify-between">
|
||||
<h3 class="font-metric-lg text-metric-lg text-on-surface" id="device-battery-level">92%</h3>
|
||||
<span class="material-symbols-outlined text-primary">battery_5_bar</span>
|
||||
</div>
|
||||
<p class="text-metric-sm text-on-surface-variant mt-2 flex items-center gap-1" id="device-battery-status">
|
||||
<span class="material-symbols-outlined text-[16px]">bolt</span>
|
||||
Discharging (External OFF)
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
||||
<p class="text-label-md text-on-surface-variant mb-2">Firmware Version</p>
|
||||
<div class="flex items-end justify-between">
|
||||
<h3 class="font-metric-lg text-metric-lg text-on-surface" id="device-firmware-version">v2.4.1</h3>
|
||||
<span class="material-symbols-outlined text-slate-400">verified</span>
|
||||
</div>
|
||||
<p class="text-metric-sm text-info mt-2 flex items-center gap-1" id="device-firmware-status">
|
||||
<span class="material-symbols-outlined text-[16px]">info</span>
|
||||
Latest version available
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Merchant Binding Info -->
|
||||
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl overflow-hidden">
|
||||
<div class="px-card-padding py-4 border-b border-slate-100 flex justify-between items-center bg-surface-container-low">
|
||||
<h4 class="font-headline-md text-headline-md">Current Merchant Binding</h4>
|
||||
<button class="text-primary text-label-md font-bold hover:underline">Change Merchant</button>
|
||||
</div>
|
||||
<div class="p-card-padding flex items-center gap-6">
|
||||
<div class="w-14 h-14 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center overflow-hidden">
|
||||
<img alt="Bakery A Logo" data-alt="A macro photograph of fresh, golden-brown sourdough bread and artisan pastries in a boutique bakery window. The lighting is warm and inviting, highlighting textures and powdered sugar. The overall aesthetic is rustic yet clean, using a natural color palette of ambers and creams to convey quality and craft." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBLL97IiG98RevWkfNoNu5bn4vTZ2kcq5CEVVFZhDo7FSSiL-KDp4dkGB2euEyy3qjWqJZcyEnIvEUF-zIgZAQb_fcnVzjHHCpHXhk3_iLjEuviUvlCULxDy3FSwdqNYnVWQI8hJlttUDVMHQWjGvmF5J-DU-1UpRll2tilFoGJsiRPOY9w077s67RaPXE2AQUDPnJqcUcXN-C8Vs-FndxWkqGGTnLLjPbGLJIVy4mQHd9PAT2uhjppmienzUToJxGVMX84pTk53WI"/>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-headline-md font-bold text-on-surface" id="device-binding-merchant">Bakery A - Mumbai Outlet</p>
|
||||
<p class="text-body-md text-on-surface-variant">Merchant ID: <span id="device-binding-merchant-id">MID-99201-B02</span></p>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-label-md text-slate-500">Bound Since</p>
|
||||
<p class="text-body-md font-bold" id="device-binding-since">12 Oct 2023, 11:45 AM</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Live Payload Viewer -->
|
||||
<div class="bg-slate-900 rounded-xl overflow-hidden flex flex-col h-[400px]">
|
||||
<div class="px-4 py-3 bg-slate-800 flex justify-between items-center border-b border-slate-700">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-success animate-pulse"></span>
|
||||
<span class="text-label-md text-slate-100 font-bold uppercase tracking-widest">Live Payload Stream</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="text-slate-400 hover:text-white transition-colors">
|
||||
<span class="material-symbols-outlined text-[18px]">content_copy</span>
|
||||
</button>
|
||||
<button class="text-slate-400 hover:text-white transition-colors" id="clearConsole">
|
||||
<span class="material-symbols-outlined text-[18px]">block</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 flex-1 overflow-y-auto code-font text-[13px] text-green-400 space-y-1 custom-scroll" id="payload-stream">
|
||||
<p class="text-slate-500">[14:02:11] INITIALIZING WEBSOCKET CONNECTION...</p>
|
||||
<p class="text-slate-500">[14:02:12] CONNECTED TO SND-10293_GATEWAY_V4</p>
|
||||
<p class="text-success">[14:02:15] RECV: {"event": "heartbeat", "status": "online", "v_batt": 4.12, "rssi": -78, "ts": 1715421255}</p>
|
||||
<p class="text-blue-400">[14:03:01] SEND: {"cmd": "ack_config", "token": "fx-2291"}</p>
|
||||
<p class="text-success">[14:03:02] RECV: {"event": "tx_confirm", "tx_id": "QR-90112", "amount": 12.50, "currency": "INR"}</p>
|
||||
<p class="text-slate-500">[14:04:15] IDLE: STANDBY MODE ACTIVE</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Sidebar Panels -->
|
||||
<div class="col-span-12 lg:col-span-4 space-y-gutter">
|
||||
<!-- Remote Actions Panel -->
|
||||
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl overflow-hidden shadow-sm">
|
||||
<div class="p-card-padding border-b border-slate-100">
|
||||
<h4 class="font-headline-md text-headline-md">Remote Actions</h4>
|
||||
</div>
|
||||
<div class="p-card-padding space-y-3">
|
||||
<button class="w-full flex items-center justify-between p-3 border border-slate-200 rounded-lg hover:bg-slate-50 transition-all group">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">restart_alt</span>
|
||||
<span class="font-body-md font-bold">Reboot Device</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-300">chevron_right</span>
|
||||
</button>
|
||||
<button class="w-full flex items-center justify-between p-3 border border-slate-200 rounded-lg hover:bg-slate-50 transition-all group">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">system_update</span>
|
||||
<span class="font-body-md font-bold">Update Firmware</span>
|
||||
</div>
|
||||
<span class="bg-primary/10 text-primary text-[10px] font-bold px-2 py-0.5 rounded-full">OTA Ready</span>
|
||||
</button>
|
||||
<button class="w-full flex items-center justify-between p-3 border border-slate-200 rounded-lg hover:bg-slate-50 transition-all group">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-on-surface-variant group-hover:text-primary">lock_open</span>
|
||||
<span class="font-body-md font-bold">Unbind Merchant</span>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-slate-300">chevron_right</span>
|
||||
</button>
|
||||
<div class="pt-2">
|
||||
<button class="w-full py-2.5 bg-danger/10 text-danger border border-danger/20 font-bold text-body-md rounded-lg hover:bg-danger/20 transition-all flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-[20px]">delete_forever</span>
|
||||
Decommission Device
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Device Health Timeline -->
|
||||
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-card-padding shadow-sm">
|
||||
<h4 class="font-headline-md text-headline-md mb-6">Device Events</h4>
|
||||
<div class="space-y-6 relative before:content-[''] before:absolute before:left-[11px] before:top-2 before:bottom-2 before:w-[2px] before:bg-slate-100" id="device-events">
|
||||
</div>
|
||||
<button class="w-full mt-6 text-primary text-label-md font-bold hover:bg-slate-50 py-2 rounded-lg transition-colors" id="view-all-events">View All Events</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- FAB for Quick Config (Suppressed on detail pages as per mandate but kept for utility context if needed, hidden here) -->
|
||||
<div class="fixed bottom-6 right-6 z-50 hidden">
|
||||
<button class="w-14 h-14 bg-primary text-on-primary rounded-full shadow-lg flex items-center justify-center hover:scale-110 transition-transform">
|
||||
<span class="material-symbols-outlined">add</span>
|
||||
</button>
|
||||
</div>
|
||||
<script src="/ui/shared/admin-api.js"></script>
|
||||
<script>
|
||||
const DeviceDetail = (() => {
|
||||
const api = window.AdminUIAPI;
|
||||
if (!api) {
|
||||
return;
|
||||
}
|
||||
|
||||
const qs = new URLSearchParams(window.location.search);
|
||||
const deviceId = qs.get("device_id") || qs.get("deviceId") || qs.get("id") || "";
|
||||
const stream = document.getElementById("payload-stream");
|
||||
const clearBtn = document.getElementById("clearConsole");
|
||||
const exportBtn = document.getElementById("export-device-logs");
|
||||
const refreshBtn = document.getElementById("refresh-device-state");
|
||||
const viewAllEventsBtn = document.getElementById("view-all-events");
|
||||
const backLink = document.querySelector("a[href='#']");
|
||||
const eventHost = document.getElementById("device-events");
|
||||
|
||||
const els = {
|
||||
breadcrumbCode: document.getElementById("device-breadcrumb-code"),
|
||||
title: document.getElementById("device-title"),
|
||||
statusBadge: document.getElementById("device-status-badge"),
|
||||
statusDot: document.getElementById("device-status-dot"),
|
||||
model: document.getElementById("device-model"),
|
||||
lastSeen: document.getElementById("device-last-seen"),
|
||||
location: document.getElementById("device-location"),
|
||||
signalStrength: document.getElementById("device-signal-strength"),
|
||||
signalStatus: document.getElementById("device-signal-status"),
|
||||
batteryLevel: document.getElementById("device-battery-level"),
|
||||
batteryStatus: document.getElementById("device-battery-status"),
|
||||
firmwareVersion: document.getElementById("device-firmware-version"),
|
||||
firmwareStatus: document.getElementById("device-firmware-status"),
|
||||
bindingMerchant: document.getElementById("device-binding-merchant"),
|
||||
bindingMerchantId: document.getElementById("device-binding-merchant-id"),
|
||||
bindingSince: document.getElementById("device-binding-since")
|
||||
};
|
||||
|
||||
const setText = (el, value, fallback = "-") => {
|
||||
if (el) {
|
||||
el.textContent = value || fallback;
|
||||
}
|
||||
};
|
||||
|
||||
const setStatus = (status) => {
|
||||
const normalized = String(status || "").toLowerCase();
|
||||
const styleMap = {
|
||||
online: {
|
||||
badge: "bg-success/10 text-success border-success/20",
|
||||
dot: "bg-success",
|
||||
label: "ONLINE"
|
||||
},
|
||||
degraded: {
|
||||
badge: "bg-warning/10 text-warning border-warning/20",
|
||||
dot: "bg-warning",
|
||||
label: "DEGRADED"
|
||||
},
|
||||
stale: {
|
||||
badge: "bg-warning/10 text-warning border-warning/20",
|
||||
dot: "bg-warning",
|
||||
label: "STALE"
|
||||
},
|
||||
offline: {
|
||||
badge: "bg-danger/10 text-danger border-danger/20",
|
||||
dot: "bg-danger",
|
||||
label: "OFFLINE"
|
||||
}
|
||||
};
|
||||
const meta = styleMap[normalized] || {
|
||||
badge: "bg-slate-100 text-slate-600 border-slate-200",
|
||||
dot: "bg-slate-400",
|
||||
label: normalized ? status.toUpperCase() : "UNKNOWN"
|
||||
};
|
||||
|
||||
if (!els.statusBadge || !els.statusDot) {
|
||||
return;
|
||||
}
|
||||
els.statusBadge.className = `${meta.badge} text-[10px] font-bold px-2 py-0.5 rounded-full border uppercase tracking-wider flex items-center gap-1`;
|
||||
els.statusDot.className = `w-1.5 h-1.5 rounded-full ${meta.dot}`;
|
||||
els.statusBadge.innerHTML = "";
|
||||
els.statusBadge.appendChild(els.statusDot);
|
||||
els.statusBadge.append(` ${meta.label || "UNKNOWN"}`);
|
||||
};
|
||||
|
||||
const toNumber = (value) => {
|
||||
const num = Number(value);
|
||||
return Number.isFinite(num) ? num : null;
|
||||
};
|
||||
|
||||
const normalizeTimestamp = (value) => {
|
||||
if (!value && value !== 0) {
|
||||
return null;
|
||||
}
|
||||
const num = Number(value);
|
||||
if (Number.isFinite(num)) {
|
||||
return String(value).length === 10 ? num * 1000 : num;
|
||||
}
|
||||
const date = new Date(value);
|
||||
return Number.isNaN(date.getTime()) ? null : date.getTime();
|
||||
};
|
||||
|
||||
const formatDateTime = (value, fallback = "-") => {
|
||||
const ms = normalizeTimestamp(value);
|
||||
if (!ms) {
|
||||
return fallback;
|
||||
}
|
||||
return new Intl.DateTimeFormat("en-GB", { dateStyle: "medium", timeStyle: "short" }).format(ms);
|
||||
};
|
||||
|
||||
const extractHeartbeatMetrics = (heartbeat) => {
|
||||
if (!heartbeat || typeof heartbeat !== "object") {
|
||||
return {};
|
||||
}
|
||||
return {
|
||||
signal: heartbeat.rssi ?? heartbeat.rssi_dbm ?? heartbeat.signal ?? heartbeat.signal_strength ?? heartbeat.rsrp,
|
||||
battery: heartbeat.battery_voltage ?? heartbeat.v_batt ?? heartbeat.voltage ?? heartbeat.battery ?? heartbeat.batt ?? null,
|
||||
ts: heartbeat.ts ?? heartbeat.timestamp ?? heartbeat.created_at ?? heartbeat.updated_at
|
||||
};
|
||||
};
|
||||
|
||||
const renderSignalStatus = (signal, battery, statusLabel) => {
|
||||
if (signal === null || signal === undefined) {
|
||||
setText(els.signalStrength, "N/A");
|
||||
setText(els.signalStatus, "Signal unavailable");
|
||||
} else {
|
||||
setText(els.signalStrength, `${signal} dBm`);
|
||||
if (toNumber(signal) !== null && toNumber(signal) <= -100) {
|
||||
setText(els.signalStatus, "Weak");
|
||||
} else if (toNumber(signal) !== null && toNumber(signal) <= -80) {
|
||||
setText(els.signalStatus, "Fair");
|
||||
} else {
|
||||
setText(els.signalStatus, "Excellent");
|
||||
}
|
||||
}
|
||||
|
||||
if (battery === null || battery === undefined) {
|
||||
setText(els.batteryLevel, "N/A");
|
||||
setText(els.batteryStatus, "Battery snapshot unavailable");
|
||||
} else if (toNumber(battery) !== null && toNumber(battery) <= 10) {
|
||||
setText(els.batteryLevel, `${battery}%`);
|
||||
setText(els.batteryStatus, "Critical");
|
||||
} else if (toNumber(battery) !== null && toNumber(battery) <= 20) {
|
||||
setText(els.batteryLevel, `${battery}%`);
|
||||
setText(els.batteryStatus, "Low");
|
||||
} else {
|
||||
setText(els.batteryLevel, toNumber(battery) !== null && toNumber(battery) > 100 ? `${battery} V` : `${battery}%`);
|
||||
setText(els.batteryStatus, statusLabel || "Normal");
|
||||
}
|
||||
};
|
||||
|
||||
const renderEvents = (heartbeats) => {
|
||||
if (!eventHost) {
|
||||
return;
|
||||
}
|
||||
|
||||
const rows = Array.isArray(heartbeats) ? heartbeats.slice(0, 6) : [];
|
||||
if (!rows.length) {
|
||||
eventHost.innerHTML =
|
||||
'<p class="text-label-md text-slate-400">No recent events yet.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const iconClass = (status) => {
|
||||
const normalized = String(status || "").toLowerCase();
|
||||
if (["success", "confirmed", "online", "up"].includes(normalized)) {
|
||||
return { color: "bg-success", icon: "check" };
|
||||
}
|
||||
if (["sync", "update", "ack", "heartbeat"].includes(normalized)) {
|
||||
return { color: "bg-blue-500", icon: "sync" };
|
||||
}
|
||||
return { color: "bg-warning", icon: "bolt" };
|
||||
};
|
||||
|
||||
eventHost.innerHTML = rows
|
||||
.map((item) => {
|
||||
const metric = extractHeartbeatMetrics(item);
|
||||
const when = formatDateTime(
|
||||
item.timestamp || item.ts || item.created_at || item.updated_at,
|
||||
"unknown"
|
||||
);
|
||||
const title = item.event || item.type || item.status || "Heartbeat";
|
||||
const details = item.message || item.description || JSON.stringify(item.payload || item);
|
||||
const marker = iconClass(item.status || item.event);
|
||||
return `<div class="relative pl-8">
|
||||
<div class="absolute left-0 top-1 w-6 h-6 rounded-full ${marker.color} border-4 border-white shadow-sm flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-[12px] text-white" style="font-variation-settings: 'FILL' 1;">${marker.icon}</span>
|
||||
</div>
|
||||
<p class="text-label-md font-bold">${title}</p>
|
||||
<p class="text-[12px] text-on-surface-variant">Signal: ${metric.signal ?? "N/A"}, Battery: ${metric.battery ?? "N/A"}</p>
|
||||
<p class="text-[12px] text-on-surface-variant">${details}</p>
|
||||
<p class="text-[10px] text-slate-400 mt-1">${when}</p>
|
||||
</div>`;
|
||||
})
|
||||
.join("");
|
||||
};
|
||||
|
||||
const renderStream = (heartbeats) => {
|
||||
if (!stream) {
|
||||
return;
|
||||
}
|
||||
const rows = Array.isArray(heartbeats) ? heartbeats : [];
|
||||
stream.innerHTML = "";
|
||||
if (!rows.length) {
|
||||
stream.innerHTML = '<p class="text-slate-500">No heartbeat payload available for this device.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
rows.slice(0, 20).forEach((item) => {
|
||||
const when = formatDateTime(item.timestamp || item.ts || item.created_at || item.updated_at, "now");
|
||||
const p = document.createElement("p");
|
||||
p.className = "text-green-400";
|
||||
p.textContent = `[${when}] RECV: ${JSON.stringify(item)}`;
|
||||
stream.appendChild(p);
|
||||
});
|
||||
stream.scrollTop = stream.scrollHeight;
|
||||
};
|
||||
|
||||
const setDerivedStatus = (device, heartbeats) => {
|
||||
const derivedStatus =
|
||||
device.derived_status || device.status || device.connection_status || "";
|
||||
if (derivedStatus) {
|
||||
setStatus(derivedStatus);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!heartbeats || !heartbeats.length) {
|
||||
setStatus("offline");
|
||||
return;
|
||||
}
|
||||
|
||||
const latestTs = normalizeTimestamp(
|
||||
extractHeartbeatMetrics(heartbeats[0]).ts
|
||||
);
|
||||
if (!latestTs) {
|
||||
setStatus("unknown");
|
||||
return;
|
||||
}
|
||||
const age = Date.now() - latestTs;
|
||||
if (age <= 90 * 1000) {
|
||||
setStatus("online");
|
||||
} else if (age <= 15 * 60 * 1000) {
|
||||
setStatus("degraded");
|
||||
} else {
|
||||
setStatus("offline");
|
||||
}
|
||||
};
|
||||
|
||||
const loadBindingDetails = async (device) => {
|
||||
const binding = device?.binding_summary || {};
|
||||
let merchantName = binding.merchant_id || "Unbound";
|
||||
let merchantCode = merchantName;
|
||||
let bindingDate = binding.created_at || device.created_at || device.updated_at;
|
||||
|
||||
if (binding.merchant_id) {
|
||||
try {
|
||||
const merchant = await api.getMerchant(binding.merchant_id);
|
||||
merchantName = merchant.legal_name || merchant.brand_name || merchantName;
|
||||
merchantCode = merchant.merchant_code || binding.merchant_id;
|
||||
} catch (error) {
|
||||
console.warn("[device detail] merchant lookup failed", error);
|
||||
}
|
||||
}
|
||||
|
||||
let outletName = "";
|
||||
if (binding.outlet_id) {
|
||||
try {
|
||||
const outlet = await api.getOutlet(binding.outlet_id);
|
||||
outletName = outlet.name || outlet.outlet_name || outlet.outlet_code || "";
|
||||
} catch (error) {
|
||||
outletName = "";
|
||||
}
|
||||
}
|
||||
const name = outletName ? `${merchantName} - ${outletName}` : merchantName;
|
||||
setText(els.bindingMerchant, name);
|
||||
setText(els.bindingMerchantId, merchantCode);
|
||||
setText(els.bindingSince, formatDateTime(bindingDate, "-"));
|
||||
};
|
||||
|
||||
const loadDevice = async () => {
|
||||
try {
|
||||
api.requireToken();
|
||||
if (!deviceId) {
|
||||
setText(els.breadcrumbCode, "Missing device_id");
|
||||
setText(els.title, "Missing device");
|
||||
return;
|
||||
}
|
||||
|
||||
const [device, heartbeats] = await Promise.all([
|
||||
api.getDevice(deviceId),
|
||||
(async () => {
|
||||
try {
|
||||
return await api.getDeviceHeartbeats(deviceId);
|
||||
} catch (error) {
|
||||
console.warn("[device detail] heartbeat fetch failed", error);
|
||||
return [];
|
||||
}
|
||||
})()
|
||||
]);
|
||||
|
||||
const modelCode = device.device_code || device.code || device.serial_number || device.id || "Unknown Device";
|
||||
setText(els.breadcrumbCode, modelCode);
|
||||
setText(els.title, modelCode);
|
||||
setText(els.model, device.model || device.device_model || "Unknown model");
|
||||
setText(els.location, device.location || device.last_known_city || "Unknown");
|
||||
|
||||
const latest = Array.isArray(heartbeats) && heartbeats.length ? heartbeats[0] : null;
|
||||
setText(
|
||||
els.lastSeen,
|
||||
latest
|
||||
? `Last seen ${formatDateTime(latest.timestamp || latest.ts || latest.created_at || latest.updated_at, "No heartbeat")}`
|
||||
: "Last seen unavailable"
|
||||
);
|
||||
|
||||
const latestMetric = extractHeartbeatMetrics(latest);
|
||||
setDerivedStatus(device, heartbeats);
|
||||
setText(
|
||||
els.firmwareVersion,
|
||||
device.firmware_version || device.fw_version || device.firmware || "-"
|
||||
);
|
||||
setText(els.firmwareStatus, device.communication_mode || "Operational");
|
||||
renderSignalStatus(latestMetric.signal, latestMetric.battery, latestMetric.status);
|
||||
renderStream(heartbeats);
|
||||
renderEvents(heartbeats);
|
||||
await loadBindingDetails(device);
|
||||
} catch (error) {
|
||||
console.error("[device detail] failed loading", error);
|
||||
setText(els.title, "Unable to load device");
|
||||
}
|
||||
};
|
||||
|
||||
refreshBtn?.addEventListener("click", loadDevice);
|
||||
clearBtn?.addEventListener("click", () => {
|
||||
if (stream) {
|
||||
stream.innerHTML = '<p class="text-slate-500">--- CONSOLE CLEARED ---</p>';
|
||||
}
|
||||
});
|
||||
exportBtn?.addEventListener("click", async () => {
|
||||
if (!stream || !navigator.clipboard) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await navigator.clipboard.writeText(stream.textContent || "");
|
||||
} catch (error) {
|
||||
console.warn("[device detail] copy failed", error);
|
||||
}
|
||||
});
|
||||
viewAllEventsBtn?.addEventListener("click", () => {
|
||||
if (eventHost) {
|
||||
eventHost.classList.toggle("max-h-96");
|
||||
}
|
||||
});
|
||||
if (backLink) {
|
||||
backLink.href = "/ui/device-registry-monitoring";
|
||||
}
|
||||
|
||||
loadDevice();
|
||||
})();
|
||||
</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