1090 lines
56 KiB
HTML
1090 lines
56 KiB
HTML
<!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="/ui/admin-dashboard-overview">
|
|
<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="/ui/merchant-detail-view">
|
|
<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="/ui/device-technical-detail">
|
|
<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="/ui/transaction-history-monitoring">
|
|
<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="/ui/settlement-batch-management">
|
|
<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="/ui/admin-reconciliation-management">
|
|
<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="/ui/hub">
|
|
<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="/ui/hub">
|
|
<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="/ui/device-registry-monitoring">
|
|
<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>
|
|
<!-- Fase 2 Ops Summary -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-gutter">
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<div class="flex items-start justify-between gap-4 mb-4">
|
|
<div>
|
|
<p class="text-label-md text-on-surface-variant mb-1">Health Summary</p>
|
|
<h3 class="font-headline-lg text-headline-lg text-on-surface" id="device-health-score">-</h3>
|
|
</div>
|
|
<span id="device-health-status" class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold border bg-slate-100 text-slate-600 border-slate-200">
|
|
<span class="material-symbols-outlined text-[16px]">monitor_heart</span>
|
|
Unknown
|
|
</span>
|
|
</div>
|
|
<p class="text-body-md text-on-surface-variant" id="device-health-reasons">No health summary yet.</p>
|
|
</div>
|
|
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl shadow-sm">
|
|
<div class="flex items-start justify-between gap-4 mb-4">
|
|
<div>
|
|
<p class="text-label-md text-on-surface-variant mb-1">Config Delivery</p>
|
|
<h3 class="font-headline-md text-headline-md text-on-surface" id="device-config-version">Config -</h3>
|
|
</div>
|
|
<span id="device-config-status" class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold border bg-slate-100 text-slate-600 border-slate-200">
|
|
<span class="material-symbols-outlined text-[16px]">pending</span>
|
|
Loading
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center justify-between gap-3">
|
|
<p class="text-body-md text-on-surface-variant" id="device-config-detail">Waiting for config status.</p>
|
|
<button id="device-config-retry" class="px-3 py-2 bg-primary text-white rounded-lg text-label-md font-bold hover:opacity-90 disabled:opacity-50">Retry Push</button>
|
|
</div>
|
|
</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>
|
|
<button id="rotate-device-credential" 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">vpn_key</span>
|
|
<span class="font-body-md font-bold">Rotate MQTT Credential</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>
|
|
<!-- MQTT Credential Panel -->
|
|
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-card-padding shadow-sm">
|
|
<div class="flex items-start justify-between gap-4 mb-4">
|
|
<div>
|
|
<p class="text-label-md text-on-surface-variant mb-1">MQTT Credential</p>
|
|
<h4 class="font-headline-md text-headline-md text-on-surface" id="device-credential-status">Not Issued</h4>
|
|
</div>
|
|
<span class="material-symbols-outlined text-primary">key</span>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div>
|
|
<p class="text-[11px] uppercase tracking-wider text-slate-500 font-bold">Username</p>
|
|
<p class="code-font text-[12px] text-on-surface break-all" id="device-mqtt-username">-</p>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<p class="text-[11px] uppercase tracking-wider text-slate-500 font-bold">Issued</p>
|
|
<p class="text-body-md text-on-surface" id="device-credential-issued">-</p>
|
|
</div>
|
|
<div>
|
|
<p class="text-[11px] uppercase tracking-wider text-slate-500 font-bold">Rotated</p>
|
|
<p class="text-body-md text-on-surface" id="device-credential-rotated">-</p>
|
|
</div>
|
|
</div>
|
|
<button id="rotate-device-credential-secondary" class="w-full py-2.5 bg-primary text-on-primary font-bold text-body-md rounded-lg hover:opacity-90 active:scale-95 transition-all flex items-center justify-center gap-2">
|
|
<span class="material-symbols-outlined text-[20px]">sync_lock</span>
|
|
Rotate Credential
|
|
</button>
|
|
</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>
|
|
<div id="credential-modal" class="fixed inset-0 z-[100] hidden items-center justify-center bg-slate-900/60 px-4">
|
|
<div class="bg-surface-container-lowest rounded-xl border border-slate-200 shadow-2xl w-full max-w-xl overflow-hidden">
|
|
<div class="p-card-padding border-b border-slate-100 flex items-start justify-between gap-4">
|
|
<div>
|
|
<h3 class="font-headline-md text-headline-md text-on-surface">MQTT Credential Rotated</h3>
|
|
<p class="text-body-md text-on-surface-variant mt-1">Password ini hanya ditampilkan satu kali.</p>
|
|
</div>
|
|
<button id="credential-modal-close" class="w-10 h-10 rounded-lg hover:bg-slate-100 flex items-center justify-center text-on-surface-variant">
|
|
<span class="material-symbols-outlined">close</span>
|
|
</button>
|
|
</div>
|
|
<div class="p-card-padding space-y-4">
|
|
<div>
|
|
<p class="text-[11px] uppercase tracking-wider text-slate-500 font-bold mb-1">Username</p>
|
|
<div class="flex items-center gap-2">
|
|
<code id="credential-modal-username" class="code-font flex-1 bg-slate-100 border border-slate-200 rounded-lg px-3 py-2 text-[13px] break-all">-</code>
|
|
<button id="credential-copy-username" class="w-10 h-10 rounded-lg border border-slate-200 hover:bg-slate-50 flex items-center justify-center text-on-surface-variant" title="Copy username">
|
|
<span class="material-symbols-outlined text-[20px]">content_copy</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="text-[11px] uppercase tracking-wider text-slate-500 font-bold mb-1">Password</p>
|
|
<div class="flex items-center gap-2">
|
|
<code id="credential-modal-password" class="code-font flex-1 bg-slate-900 text-green-400 rounded-lg px-3 py-2 text-[13px] break-all">-</code>
|
|
<button id="credential-copy-password" class="w-10 h-10 rounded-lg border border-slate-200 hover:bg-slate-50 flex items-center justify-center text-on-surface-variant" title="Copy password">
|
|
<span class="material-symbols-outlined text-[20px]">content_copy</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p class="text-[11px] uppercase tracking-wider text-slate-500 font-bold mb-1">Mosquitto Command</p>
|
|
<code id="credential-modal-command" class="code-font block bg-slate-100 border border-slate-200 rounded-lg px-3 py-2 text-[12px] break-all">-</code>
|
|
</div>
|
|
<div class="flex justify-end gap-2 pt-2">
|
|
<button id="credential-copy-command" class="px-4 py-2 border border-slate-200 rounded-lg font-bold text-body-md hover:bg-slate-50 flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-[20px]">terminal</span>
|
|
Copy Command
|
|
</button>
|
|
<button id="credential-modal-done" class="px-4 py-2 bg-primary text-on-primary rounded-lg font-bold text-body-md hover:opacity-90">Done</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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") || "";
|
|
let activeDeviceId = deviceId;
|
|
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 rotateCredentialButtons = [
|
|
document.getElementById("rotate-device-credential"),
|
|
document.getElementById("rotate-device-credential-secondary")
|
|
].filter(Boolean);
|
|
const credentialModal = document.getElementById("credential-modal");
|
|
const credentialModalClose = document.getElementById("credential-modal-close");
|
|
const credentialModalDone = document.getElementById("credential-modal-done");
|
|
const credentialCopyUsername = document.getElementById("credential-copy-username");
|
|
const credentialCopyPassword = document.getElementById("credential-copy-password");
|
|
const credentialCopyCommand = document.getElementById("credential-copy-command");
|
|
const backLink = document.querySelector("a[href='#']");
|
|
const eventHost = document.getElementById("device-events");
|
|
let latestCredentialCommand = "";
|
|
|
|
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"),
|
|
healthScore: document.getElementById("device-health-score"),
|
|
healthStatus: document.getElementById("device-health-status"),
|
|
healthReasons: document.getElementById("device-health-reasons"),
|
|
configVersion: document.getElementById("device-config-version"),
|
|
configStatus: document.getElementById("device-config-status"),
|
|
configDetail: document.getElementById("device-config-detail"),
|
|
configRetry: document.getElementById("device-config-retry"),
|
|
credentialStatus: document.getElementById("device-credential-status"),
|
|
mqttUsername: document.getElementById("device-mqtt-username"),
|
|
credentialIssued: document.getElementById("device-credential-issued"),
|
|
credentialRotated: document.getElementById("device-credential-rotated"),
|
|
credentialModalUsername: document.getElementById("credential-modal-username"),
|
|
credentialModalPassword: document.getElementById("credential-modal-password"),
|
|
credentialModalCommand: document.getElementById("credential-modal-command")
|
|
};
|
|
|
|
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.network_strength ?? heartbeat.rssi ?? heartbeat.rssi_dbm ?? heartbeat.signal ?? heartbeat.signal_strength ?? heartbeat.rsrp,
|
|
battery: heartbeat.battery_level ?? 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 healthReasonLabels = {
|
|
no_heartbeat: "No heartbeat",
|
|
offline_threshold_exceeded: "Offline threshold exceeded",
|
|
stale_threshold_exceeded: "Heartbeat is stale",
|
|
low_signal: "Low signal",
|
|
low_battery: "Low battery"
|
|
};
|
|
|
|
const statusPillClass = (status) => {
|
|
const normalized = String(status || "").toLowerCase();
|
|
if (normalized === "online" || normalized === "applied") {
|
|
return "bg-success/10 text-success border-success/20";
|
|
}
|
|
if (normalized === "degraded" || normalized === "stale" || normalized === "pending_ack" || normalized === "stale_ack") {
|
|
return "bg-warning/10 text-warning border-warning/20";
|
|
}
|
|
if (normalized === "offline" || normalized === "failed_ack") {
|
|
return "bg-danger/10 text-danger border-danger/20";
|
|
}
|
|
return "bg-slate-100 text-slate-600 border-slate-200";
|
|
};
|
|
|
|
const renderHealthSummary = (summary) => {
|
|
if (!summary) {
|
|
setText(els.healthScore, "-");
|
|
setText(els.healthReasons, "No health summary yet.");
|
|
return;
|
|
}
|
|
|
|
setText(els.healthScore, typeof summary.score === "number" ? `${summary.score}%` : "-");
|
|
const status = summary.status || "unknown";
|
|
if (els.healthStatus) {
|
|
els.healthStatus.className = `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold border ${statusPillClass(status)}`;
|
|
els.healthStatus.innerHTML = `<span class="material-symbols-outlined text-[16px]">monitor_heart</span>${String(status).replace("_", " ").toUpperCase()}`;
|
|
}
|
|
const reasons = Array.isArray(summary.reasons) && summary.reasons.length
|
|
? summary.reasons.map((item) => healthReasonLabels[item] || item).join(", ")
|
|
: "No active warning";
|
|
setText(
|
|
els.healthReasons,
|
|
`${reasons}${typeof summary.age_seconds === "number" ? ` · ${summary.age_seconds}s since heartbeat` : ""}`
|
|
);
|
|
};
|
|
|
|
const renderConfigStatus = (status) => {
|
|
if (!status) {
|
|
return;
|
|
}
|
|
|
|
const drift = status.drift_status || "unknown";
|
|
const version = status.desired_config_version || status.config?.config_version || "-";
|
|
setText(els.configVersion, `Config v${version}`);
|
|
if (els.configStatus) {
|
|
const label = String(drift).replace("_", " ").toUpperCase();
|
|
const icon = drift === "applied" ? "check_circle" : drift === "failed_ack" ? "error" : "pending";
|
|
els.configStatus.className = `inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-bold border ${statusPillClass(drift)}`;
|
|
els.configStatus.innerHTML = `<span class="material-symbols-outlined text-[16px]">${icon}</span>${label}`;
|
|
}
|
|
|
|
const ack = status.latest_ack ? `${status.latest_ack.status} at ${formatDateTime(status.latest_ack.acked_at, "-")}` : "No ACK";
|
|
const push = status.latest_push ? formatDateTime(status.latest_push.created_at, "-") : "No push";
|
|
setText(els.configDetail, `Push: ${push} · ACK: ${ack}`);
|
|
if (els.configRetry) {
|
|
els.configRetry.disabled = status.retry_recommended === false;
|
|
els.configRetry.textContent = status.retry_recommended === false ? "Applied" : "Retry Push";
|
|
}
|
|
};
|
|
|
|
const shellQuote = (value) => `'${String(value || "").replace(/'/g, "'\\''")}'`;
|
|
|
|
const renderCredentialSummary = (device) => {
|
|
const status = device?.credential_status || "not_issued";
|
|
const statusLabel = String(status).replace(/_/g, " ").toUpperCase();
|
|
setText(els.credentialStatus, statusLabel);
|
|
if (els.credentialStatus) {
|
|
els.credentialStatus.className = `font-headline-md text-headline-md ${status === "active" ? "text-success" : status === "revoked" ? "text-danger" : "text-on-surface"}`;
|
|
}
|
|
setText(els.mqttUsername, device?.mqtt_username || device?.id || "-");
|
|
setText(els.credentialIssued, formatDateTime(device?.credential_issued_at, "-"));
|
|
setText(els.credentialRotated, formatDateTime(device?.credential_rotated_at, "-"));
|
|
};
|
|
|
|
const setRotateLoading = (loading) => {
|
|
rotateCredentialButtons.forEach((button) => {
|
|
button.disabled = loading;
|
|
button.classList.toggle("opacity-60", loading);
|
|
const label = button.querySelector(".font-body-md, .text-body-md");
|
|
if (label) {
|
|
label.textContent = loading ? "Rotating..." : "Rotate MQTT Credential";
|
|
}
|
|
});
|
|
};
|
|
|
|
const showCredentialModal = (credential) => {
|
|
const username = credential?.mqtt_username || "";
|
|
const password = credential?.mqtt_password || "";
|
|
latestCredentialCommand = `sudo mosquitto_passwd -b /etc/mosquitto/passwd ${shellQuote(username)} ${shellQuote(password)}`;
|
|
setText(els.credentialModalUsername, username);
|
|
setText(els.credentialModalPassword, password);
|
|
setText(els.credentialModalCommand, latestCredentialCommand);
|
|
credentialModal?.classList.remove("hidden");
|
|
credentialModal?.classList.add("flex");
|
|
};
|
|
|
|
const closeCredentialModal = () => {
|
|
credentialModal?.classList.add("hidden");
|
|
credentialModal?.classList.remove("flex");
|
|
setText(els.credentialModalPassword, "-");
|
|
latestCredentialCommand = "";
|
|
};
|
|
|
|
const copyText = async (value) => {
|
|
if (!value || !navigator.clipboard) {
|
|
return;
|
|
}
|
|
await navigator.clipboard.writeText(value);
|
|
};
|
|
|
|
const rotateCredential = async () => {
|
|
if (!activeDeviceId) {
|
|
return;
|
|
}
|
|
setRotateLoading(true);
|
|
try {
|
|
const result = await api.rotateDeviceCredential(activeDeviceId);
|
|
renderCredentialSummary(result.device);
|
|
showCredentialModal(result.credential);
|
|
} catch (error) {
|
|
console.error("[device detail] credential rotate failed", error);
|
|
setText(els.credentialStatus, "ROTATE FAILED");
|
|
} finally {
|
|
setRotateLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadConfigStatus = async () => {
|
|
if (!activeDeviceId) {
|
|
return;
|
|
}
|
|
try {
|
|
const status = await api.getDeviceConfigStatus(activeDeviceId);
|
|
renderConfigStatus(status);
|
|
} catch (error) {
|
|
setText(els.configDetail, "Unable to load config status.");
|
|
if (els.configRetry) {
|
|
els.configRetry.disabled = true;
|
|
}
|
|
}
|
|
};
|
|
|
|
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();
|
|
let selectedDeviceId = deviceId;
|
|
if (!selectedDeviceId) {
|
|
const devices = await api.listDevices();
|
|
selectedDeviceId = Array.isArray(devices) && devices.length ? devices[0].id : "";
|
|
}
|
|
activeDeviceId = selectedDeviceId;
|
|
|
|
if (!selectedDeviceId) {
|
|
setText(els.breadcrumbCode, "Missing device_id");
|
|
setText(els.title, "Missing device");
|
|
return;
|
|
}
|
|
|
|
const [device, heartbeatResponse] = await Promise.all([
|
|
api.getDevice(selectedDeviceId),
|
|
(async () => {
|
|
try {
|
|
return await api.getDeviceHeartbeats(selectedDeviceId);
|
|
} catch (error) {
|
|
console.warn("[device detail] heartbeat fetch failed", error);
|
|
return [];
|
|
}
|
|
})()
|
|
]);
|
|
const heartbeats = Array.isArray(heartbeatResponse)
|
|
? heartbeatResponse
|
|
: Array.isArray(heartbeatResponse?.heartbeats)
|
|
? heartbeatResponse.heartbeats
|
|
: [];
|
|
|
|
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);
|
|
renderHealthSummary(device.health_summary);
|
|
renderCredentialSummary(device);
|
|
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);
|
|
await loadConfigStatus();
|
|
} catch (error) {
|
|
console.error("[device detail] failed loading", error);
|
|
setText(els.title, "Unable to load device");
|
|
}
|
|
};
|
|
|
|
refreshBtn?.addEventListener("click", loadDevice);
|
|
rotateCredentialButtons.forEach((button) => button.addEventListener("click", rotateCredential));
|
|
credentialModalClose?.addEventListener("click", closeCredentialModal);
|
|
credentialModalDone?.addEventListener("click", closeCredentialModal);
|
|
credentialModal?.addEventListener("click", (event) => {
|
|
if (event.target === credentialModal) {
|
|
closeCredentialModal();
|
|
}
|
|
});
|
|
credentialCopyUsername?.addEventListener("click", () => copyText(els.credentialModalUsername?.textContent || ""));
|
|
credentialCopyPassword?.addEventListener("click", () => copyText(els.credentialModalPassword?.textContent || ""));
|
|
credentialCopyCommand?.addEventListener("click", () => copyText(latestCredentialCommand));
|
|
els.configRetry?.addEventListener("click", async () => {
|
|
if (!activeDeviceId || !els.configRetry) {
|
|
return;
|
|
}
|
|
els.configRetry.disabled = true;
|
|
els.configRetry.textContent = "Retrying...";
|
|
try {
|
|
await api.retryDeviceConfigPush(activeDeviceId, {});
|
|
await loadConfigStatus();
|
|
} catch (error) {
|
|
try {
|
|
await api.retryDeviceConfigPush(activeDeviceId, { force: true });
|
|
await loadConfigStatus();
|
|
} catch (retryError) {
|
|
els.configRetry.textContent = "Retry Failed";
|
|
}
|
|
}
|
|
});
|
|
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>
|