wirabasalamah/Qris-Soundbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Prepare Soundbox Ops deployment

Browse Source
This commit is contained in:
Wira Basalamah
2026-06-06 20:58:04 +07:00
parent 60b1537c4c
commit 00580a98fc
16 changed files with 3238 additions and 270 deletions
Download Patch File Download Diff File Expand all files Collapse all files

524
ui/device-technical-detail/index.html
View File

@ -120,45 +120,37 @@
</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>
<aside class="fixed inset-y-0 left-0 z-50 hidden w-64 border-r border-slate-200 bg-white px-4 py-6 lg:flex lg:flex-col">
<div class="px-2">
<h1 class="text-[22px] font-extrabold leading-tight text-blue-700">Soundbox Ops</h1>
<p class="mt-1 text-[12px] font-bold uppercase leading-none text-slate-500">Monitoring 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>
<nav class="mt-8 flex flex-1 flex-col gap-1">
<a class="flex h-11 items-center gap-3 rounded-lg px-3 text-[15px] font-semibold leading-none transition-colors text-slate-600 hover:bg-slate-100 hover:text-blue-700" href="/ui/soundbox-ops">
<span class="material-symbols-outlined text-[22px] shrink-0">monitor_heart</span>
<span class="truncate">Monitoring</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 class="flex h-11 items-center gap-3 rounded-lg px-3 text-[15px] font-semibold leading-none transition-colors bg-blue-50 text-blue-700" href="/ui/device-registry-monitoring">
<span class="material-symbols-outlined text-[22px] shrink-0">speaker_group</span>
<span class="truncate">Registry</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 class="flex h-11 items-center gap-3 rounded-lg px-3 text-[15px] font-semibold leading-none transition-colors text-slate-600 hover:bg-slate-100 hover:text-blue-700" href="/ui/soundbox-ops#mqtt-trace">
<span class="material-symbols-outlined text-[22px] shrink-0">lan</span>
<span class="truncate">MQTT Trace</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 class="flex h-11 items-center gap-3 rounded-lg px-3 text-[15px] font-semibold leading-none transition-colors text-slate-600 hover:bg-slate-100 hover:text-blue-700" href="/ui/soundbox-ops#config-commands">
<span class="material-symbols-outlined text-[22px] shrink-0">settings_remote</span>
<span class="truncate">Config & Commands</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 &amp; 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 class="flex h-11 items-center gap-3 rounded-lg px-3 text-[15px] font-semibold leading-none transition-colors text-slate-600 hover:bg-slate-100 hover:text-blue-700" href="/ui/soundbox-catalog">
<span class="material-symbols-outlined text-[22px] shrink-0">category</span>
<span class="truncate">Catalog</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>
<div class="border-t border-slate-200 pt-4">
<a class="flex h-11 items-center gap-3 rounded-lg px-3 text-[15px] font-semibold leading-none transition-colors text-slate-600 hover:bg-slate-100 hover:text-blue-700" href="/ui/admin-login">
<span class="material-symbols-outlined text-[22px] shrink-0">logout</span>
<span class="truncate">Logout</span>
</a>
</div>
</aside>
@ -166,14 +158,14 @@
<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"/>
<input id="detail-device-search" 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">
<button id="detail-notification-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">
<button id="detail-calendar-button" class="hover:text-primary transition-colors flex items-center gap-1">
<span class="material-symbols-outlined">calendar_today</span>
</button>
</div>
@ -242,18 +234,19 @@
</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>
<button class="pb-4 text-body-md font-bold text-primary border-b-2 border-primary" data-scroll-target="overview-section">Overview</button>
<button class="pb-4 text-body-md font-medium text-on-surface-variant hover:text-primary transition-colors" data-scroll-target="heartbeat-section">Heartbeat</button>
<button class="pb-4 text-body-md font-medium text-on-surface-variant hover:text-primary transition-colors" data-scroll-target="configuration-section">Configuration</button>
<button class="pb-4 text-body-md font-medium text-on-surface-variant hover:text-primary transition-colors" data-scroll-target="binding-section">Binding History</button>
<button id="dynamic-qr-tab" class="hidden pb-4 text-body-md font-medium text-on-surface-variant hover:text-primary transition-colors" data-scroll-target="dynamic-qr-panel">Dynamic QR</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">
<div id="overview-section" class="grid grid-cols-1 md:grid-cols-3 gap-gutter">
<div id="configuration-section" 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>
@ -319,11 +312,39 @@ Loading
</div>
</div>
</div>
<!-- Dynamic QR Operations: shown only for dynamic-capable devices -->
<div id="dynamic-qr-panel" class="hidden 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">Dynamic QR Operations</p>
<h3 class="font-headline-md text-headline-md text-on-surface" id="dynamic-qr-title">Screen QR enabled</h3>
</div>
<span class="material-symbols-outlined text-primary">qr_code_2</span>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
<div class="bg-slate-50 border border-slate-100 rounded-lg p-3">
<p class="text-[11px] uppercase text-slate-500 font-bold">QR Mode</p>
<p id="dynamic-qr-mode" class="text-body-md font-bold text-on-surface">dynamic</p>
</div>
<div class="bg-slate-50 border border-slate-100 rounded-lg p-3">
<p class="text-[11px] uppercase text-slate-500 font-bold">Display</p>
<p id="dynamic-qr-display" class="text-body-md font-bold text-on-surface">Screen required</p>
</div>
<div class="bg-slate-50 border border-slate-100 rounded-lg p-3">
<p class="text-[11px] uppercase text-slate-500 font-bold">Command Path</p>
<p id="dynamic-qr-command-path" class="text-body-md font-bold text-on-surface">MQTT</p>
</div>
</div>
<div class="mt-4 flex flex-wrap gap-3">
<button id="dynamic-qr-open-preview" class="px-3 py-2 bg-primary text-white rounded-lg text-label-md font-bold hover:opacity-90">Open QR Display Preview</button>
<button class="px-3 py-2 border border-slate-200 rounded-lg text-label-md font-bold hover:bg-slate-50" id="dynamic-qr-send-test">Send Test QR</button>
</div>
</div>
<!-- Merchant Binding Info -->
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl overflow-hidden">
<div id="binding-section" 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>
<button id="change-merchant-binding" 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">
@ -347,7 +368,7 @@ Loading
<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">
<button id="copy-payload-stream" 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">
@ -355,7 +376,7 @@ Loading
</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">
<div id="heartbeat-section" class="p-4 flex-1 overflow-y-auto code-font text-[13px] text-green-400 space-y-1 custom-scroll">
<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>
@ -373,21 +394,21 @@ Loading
<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">
<button id="reboot-device" 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">
<button id="update-device-firmware" 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">
<button id="unbind-device" 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>
@ -402,7 +423,7 @@ Loading
<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">
<button id="decommission-device" 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>
@ -456,6 +477,56 @@ Rotate Credential
<span class="material-symbols-outlined">add</span>
</button>
</div>
<div id="qr-preview-modal" class="fixed inset-0 z-[105] hidden items-center justify-center bg-slate-900/60 px-4">
<div class="w-full max-w-2xl overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl">
<div class="flex items-start justify-between gap-4 border-b border-slate-100 p-card-padding">
<div>
<h3 class="font-headline-md text-headline-md text-on-surface">QR Display Preview</h3>
<p class="mt-1 text-body-md text-on-surface-variant">Simulasi tampilan layar dynamic soundbox untuk device ini.</p>
</div>
<button id="qr-preview-close" class="flex h-10 w-10 items-center justify-center rounded-lg text-on-surface-variant hover:bg-slate-100">
<span class="material-symbols-outlined">close</span>
</button>
</div>
<div class="grid gap-5 p-card-padding md:grid-cols-[260px_minmax(0,1fr)]">
<div class="rounded-[28px] border-[10px] border-slate-900 bg-slate-950 p-4 shadow-xl">
<div class="rounded-2xl bg-white p-4 text-center">
<p class="text-[11px] font-bold uppercase tracking-wider text-slate-500">QRIS Payment</p>
<div id="qr-preview-grid" class="mx-auto my-4 grid h-40 w-40 grid-cols-9 grid-rows-9 gap-1 rounded-lg bg-white p-2"></div>
<p id="qr-preview-amount" class="text-xl font-extrabold text-slate-950">Rp 1.000</p>
<p id="qr-preview-device" class="mt-1 font-mono text-[11px] text-slate-500">-</p>
</div>
</div>
<div class="space-y-3">
<div class="rounded-lg border border-slate-200 bg-slate-50 p-3">
<p class="text-[11px] font-bold uppercase text-slate-500">Command Path</p>
<p id="qr-preview-command-path" class="mt-1 font-bold text-on-surface">MQTT</p>
</div>
<div class="rounded-lg border border-slate-200 bg-slate-50 p-3">
<p class="text-[11px] font-bold uppercase text-slate-500">QR Mode</p>
<p id="qr-preview-mode" class="mt-1 font-bold text-on-surface">dynamic</p>
</div>
<div class="rounded-lg border border-slate-200 bg-slate-50 p-3">
<p class="text-[11px] font-bold uppercase text-slate-500">Payload</p>
<pre id="qr-preview-payload" class="mt-2 max-h-44 overflow-auto whitespace-pre-wrap font-mono text-[12px] text-slate-700"></pre>
</div>
<button id="qr-preview-send-test" class="w-full rounded-lg bg-primary px-4 py-2.5 font-bold text-white hover:opacity-90">Send Test QR to Device</button>
</div>
</div>
</div>
</div>
<div id="detail-confirm-modal" class="fixed inset-0 z-[110] hidden items-center justify-center bg-slate-900/60 px-4">
<div class="w-full max-w-md overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl">
<div class="border-b border-slate-100 p-card-padding">
<h3 id="detail-confirm-title" class="font-headline-md text-headline-md text-on-surface">Confirm action</h3>
<p id="detail-confirm-message" class="mt-2 text-body-md text-on-surface-variant"></p>
</div>
<div class="flex justify-end gap-2 p-card-padding">
<button id="detail-confirm-cancel" class="rounded-lg border border-slate-200 px-4 py-2 font-bold text-body-md hover:bg-slate-50">Cancel</button>
<button id="detail-confirm-submit" class="rounded-lg bg-danger px-4 py-2 font-bold text-body-md text-white hover:opacity-90">Continue</button>
</div>
</div>
</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">
@ -516,6 +587,30 @@ Copy Command
const exportBtn = document.getElementById("export-device-logs");
const refreshBtn = document.getElementById("refresh-device-state");
const viewAllEventsBtn = document.getElementById("view-all-events");
const deviceSearch = document.getElementById("detail-device-search");
const notificationButton = document.getElementById("detail-notification-button");
const calendarButton = document.getElementById("detail-calendar-button");
const copyPayloadButton = document.getElementById("copy-payload-stream");
const rebootButton = document.getElementById("reboot-device");
const updateFirmwareButton = document.getElementById("update-device-firmware");
const unbindButton = document.getElementById("unbind-device");
const decommissionButton = document.getElementById("decommission-device");
const changeMerchantButton = document.getElementById("change-merchant-binding");
const qrPreviewOpen = document.getElementById("dynamic-qr-open-preview");
const qrPreviewModal = document.getElementById("qr-preview-modal");
const qrPreviewClose = document.getElementById("qr-preview-close");
const qrPreviewGrid = document.getElementById("qr-preview-grid");
const qrPreviewAmount = document.getElementById("qr-preview-amount");
const qrPreviewDevice = document.getElementById("qr-preview-device");
const qrPreviewCommandPath = document.getElementById("qr-preview-command-path");
const qrPreviewMode = document.getElementById("qr-preview-mode");
const qrPreviewPayload = document.getElementById("qr-preview-payload");
const qrPreviewSendTest = document.getElementById("qr-preview-send-test");
const confirmModal = document.getElementById("detail-confirm-modal");
const confirmTitle = document.getElementById("detail-confirm-title");
const confirmMessage = document.getElementById("detail-confirm-message");
const confirmCancel = document.getElementById("detail-confirm-cancel");
const confirmSubmit = document.getElementById("detail-confirm-submit");
const rotateCredentialButtons = [
document.getElementById("rotate-device-credential"),
document.getElementById("rotate-device-credential-secondary")
@ -528,6 +623,10 @@ Copy Command
const credentialCopyCommand = document.getElementById("credential-copy-command");
const backLink = document.querySelector("a[href='#']");
const eventHost = document.getElementById("device-events");
let currentDevice = null;
let currentHeartbeats = [];
let showingAllEvents = false;
let confirmResolver = null;
let latestCredentialCommand = "";
const els = {
@ -554,6 +653,12 @@ Copy Command
configStatus: document.getElementById("device-config-status"),
configDetail: document.getElementById("device-config-detail"),
configRetry: document.getElementById("device-config-retry"),
dynamicQrTab: document.getElementById("dynamic-qr-tab"),
dynamicQrPanel: document.getElementById("dynamic-qr-panel"),
dynamicQrMode: document.getElementById("dynamic-qr-mode"),
dynamicQrDisplay: document.getElementById("dynamic-qr-display"),
dynamicQrCommandPath: document.getElementById("dynamic-qr-command-path"),
dynamicQrSendTest: document.getElementById("dynamic-qr-send-test"),
credentialStatus: document.getElementById("device-credential-status"),
mqttUsername: document.getElementById("device-mqtt-username"),
credentialIssued: document.getElementById("device-credential-issued"),
@ -675,12 +780,14 @@ Copy Command
}
};
const renderEvents = (heartbeats) => {
const renderEvents = (heartbeats, showAll = false) => {
if (!eventHost) {
return;
}
const rows = Array.isArray(heartbeats) ? heartbeats.slice(0, 6) : [];
const rows = Array.isArray(heartbeats)
? (showAll ? heartbeats : heartbeats.slice(0, 6))
: [];
if (!rows.length) {
eventHost.innerHTML =
'<p class="text-label-md text-slate-400">No recent events yet.</p>';
@ -840,6 +947,54 @@ Copy Command
}
};
const parseJsonMaybe = (value) => {
if (!value) {
return {};
}
if (typeof value === "object") {
return value;
}
try {
return JSON.parse(value);
} catch (_error) {
return {};
}
};
const isDynamicDevice = (device) => {
const capability = parseJsonMaybe(device.capability_profile_json || device.capability_summary);
const text = [
device.qr_mode,
device.terminal_qr_mode,
device.device_type,
device.model,
device.communication_mode,
capability?.qr_mode,
capability?.terminal_qr_mode,
capability?.features?.dynamic_qr ? "dynamic_qr" : "",
Array.isArray(capability?.flows) ? capability.flows.join(" ") : ""
]
.map((item) => String(item || "").toLowerCase())
.join(" ");
return text.includes("dynamic") || text.includes("screen") || text.includes("dynamic_qr");
};
const renderDynamicQrPanel = (device) => {
const dynamic = isDynamicDevice(device);
els.dynamicQrTab?.classList.toggle("hidden", !dynamic);
els.dynamicQrPanel?.classList.toggle("hidden", !dynamic);
if (!dynamic) {
return;
}
const capability = parseJsonMaybe(device.capability_profile_json || device.capability_summary);
const commandPath = String(device.communication_mode || "").toLowerCase() === "api" ? "API" : "MQTT";
setText(els.dynamicQrMode, device.qr_mode || device.terminal_qr_mode || "dynamic");
setText(els.dynamicQrDisplay, capability?.features?.dynamic_qr?.display || "Screen required");
setText(els.dynamicQrCommandPath, commandPath);
};
const shellQuote = (value) => `'${String(value || "").replace(/'/g, "'\\''")}'`;
const renderCredentialSummary = (device) => {
@ -890,6 +1045,117 @@ Copy Command
await navigator.clipboard.writeText(value);
};
const appendStreamLine = (message, className = "text-blue-400") => {
if (!stream) {
return;
}
const p = document.createElement("p");
p.className = className;
p.textContent = `[${formatDateTime(Date.now())}] ${message}`;
stream.appendChild(p);
stream.scrollTop = stream.scrollHeight;
};
const setButtonLoading = (button, loading, label) => {
if (!button) {
return;
}
if (!button.dataset.originalHtml) {
button.dataset.originalHtml = button.innerHTML;
}
button.disabled = loading;
button.classList.toggle("opacity-60", loading);
if (loading && label) {
button.innerHTML = `<span class="material-symbols-outlined text-[18px]">sync</span>${label}`;
} else if (!loading) {
button.innerHTML = button.dataset.originalHtml;
}
};
const closeConfirm = (value) => {
confirmModal?.classList.add("hidden");
confirmModal?.classList.remove("flex");
if (confirmResolver) {
confirmResolver(Boolean(value));
confirmResolver = null;
}
};
const confirmAction = ({ title, message, buttonLabel = "Continue" }) => {
setText(confirmTitle, title);
setText(confirmMessage, message);
setText(confirmSubmit, buttonLabel);
confirmModal?.classList.remove("hidden");
confirmModal?.classList.add("flex");
confirmCancel?.focus();
return new Promise((resolve) => {
confirmResolver = resolve;
});
};
const buildQrPreviewPayload = () => ({
device_id: activeDeviceId || "-",
device_code: currentDevice?.device_code || currentDevice?.id || "-",
amount: 1000,
currency: "IDR",
qr_mode: els.dynamicQrMode?.textContent || "dynamic",
expires_in_seconds: 60,
preview: true
});
const renderQrPreviewGrid = () => {
if (!qrPreviewGrid) {
return;
}
const seed = String(activeDeviceId || currentDevice?.device_code || "soundbox");
qrPreviewGrid.innerHTML = "";
for (let index = 0; index < 81; index += 1) {
const char = seed.charCodeAt(index % seed.length) || 37;
const dark = index < 9 || index % 9 === 0 || ((char + index * 7) % 5 < 2);
const cell = document.createElement("span");
cell.className = `${dark ? "bg-slate-950" : "bg-white"} rounded-[2px]`;
qrPreviewGrid.appendChild(cell);
}
};
const openQrPreview = () => {
const payload = buildQrPreviewPayload();
renderQrPreviewGrid();
setText(qrPreviewAmount, new Intl.NumberFormat("id-ID", {
style: "currency",
currency: "IDR",
maximumFractionDigits: 0
}).format(payload.amount));
setText(qrPreviewDevice, payload.device_code);
setText(qrPreviewCommandPath, els.dynamicQrCommandPath?.textContent || "MQTT");
setText(qrPreviewMode, payload.qr_mode);
setText(qrPreviewPayload, JSON.stringify(payload, null, 2));
qrPreviewModal?.classList.remove("hidden");
qrPreviewModal?.classList.add("flex");
};
const closeQrPreview = () => {
qrPreviewModal?.classList.add("hidden");
qrPreviewModal?.classList.remove("flex");
};
const sendDeviceCommand = async (command, payload = {}, button = null) => {
if (!activeDeviceId) {
return null;
}
setButtonLoading(button, true, "Sending...");
try {
const result = await api.createDeviceCommand(activeDeviceId, { command, payload });
appendStreamLine(`SEND: ${JSON.stringify({ command, payload, command_id: result.id })}`);
return result;
} catch (error) {
appendStreamLine(`ERROR: ${error?.message || `Unable to send ${command}`}`, "text-danger");
throw error;
} finally {
setButtonLoading(button, false);
}
};
const rotateCredential = async () => {
if (!activeDeviceId) {
return;
@ -985,6 +1251,9 @@ Copy Command
: Array.isArray(heartbeatResponse?.heartbeats)
? heartbeatResponse.heartbeats
: [];
currentDevice = device;
currentHeartbeats = heartbeats;
showingAllEvents = false;
const modelCode = device.device_code || device.code || device.serial_number || device.id || "Unknown Device";
setText(els.breadcrumbCode, modelCode);
@ -1003,6 +1272,7 @@ Copy Command
const latestMetric = extractHeartbeatMetrics(latest);
setDerivedStatus(device, heartbeats);
renderHealthSummary(device.health_summary);
renderDynamicQrPanel(device);
renderCredentialSummary(device);
setText(
els.firmwareVersion,
@ -1011,7 +1281,11 @@ Copy Command
setText(els.firmwareStatus, device.communication_mode || "Operational");
renderSignalStatus(latestMetric.signal, latestMetric.battery, latestMetric.status);
renderStream(heartbeats);
renderEvents(heartbeats);
renderEvents(heartbeats, showingAllEvents);
if (viewAllEventsBtn) {
viewAllEventsBtn.textContent = heartbeats.length > 6 ? "View All Events" : "All Events Shown";
viewAllEventsBtn.disabled = heartbeats.length <= 6;
}
await loadBindingDetails(device);
await loadConfigStatus();
} catch (error) {
@ -1050,24 +1324,155 @@ Copy Command
}
}
});
els.dynamicQrSendTest?.addEventListener("click", () => {
sendDeviceCommand("dynamic_qr.test", {
...buildQrPreviewPayload(),
source: "device_detail"
}, els.dynamicQrSendTest);
});
clearBtn?.addEventListener("click", () => {
if (stream) {
stream.innerHTML = '<p class="text-slate-500">--- CONSOLE CLEARED ---</p>';
}
});
exportBtn?.addEventListener("click", async () => {
const copyStream = async () => {
if (!stream || !navigator.clipboard) {
return;
}
try {
await navigator.clipboard.writeText(stream.textContent || "");
appendStreamLine("INFO: payload stream copied to clipboard", "text-slate-400");
} catch (error) {
console.warn("[device detail] copy failed", error);
}
};
copyPayloadButton?.addEventListener("click", copyStream);
exportBtn?.addEventListener("click", async () => {
await copyStream();
});
viewAllEventsBtn?.addEventListener("click", () => {
if (eventHost) {
eventHost.classList.toggle("max-h-96");
showingAllEvents = !showingAllEvents;
renderEvents(currentHeartbeats, showingAllEvents);
viewAllEventsBtn.textContent = showingAllEvents ? "Show Recent Events" : "View All Events";
});
rebootButton?.addEventListener("click", () => sendDeviceCommand("device.reboot", { requested_from: "device_detail" }, rebootButton));
updateFirmwareButton?.addEventListener("click", () => sendDeviceCommand("firmware.update", {
requested_from: "device_detail",
target_version: currentDevice?.firmware_version || "latest"
}, updateFirmwareButton));
unbindButton?.addEventListener("click", async () => {
const confirmed = await confirmAction({
title: "Unbind merchant",
message: "This will remove the active merchant/outlet/terminal binding from this device.",
buttonLabel: "Unbind"
});
if (!confirmed || !activeDeviceId) {
return;
}
setButtonLoading(unbindButton, true, "Unbinding...");
try {
await api.unbindDevice(activeDeviceId);
appendStreamLine("INFO: device merchant binding removed", "text-slate-400");
await loadDevice();
} catch (error) {
appendStreamLine(`ERROR: ${error?.message || "Unable to unbind device"}`, "text-danger");
} finally {
setButtonLoading(unbindButton, false);
}
});
decommissionButton?.addEventListener("click", async () => {
const confirmed = await confirmAction({
title: "Decommission device",
message: "This will mark the device inactive. It will remain in records but should no longer be treated as an active unit.",
buttonLabel: "Decommission"
});
if (!confirmed || !activeDeviceId) {
return;
}
setButtonLoading(decommissionButton, true, "Decommissioning...");
try {
await api.patchDevice(activeDeviceId, { status: "inactive" });
await sendDeviceCommand("device.decommission", { requested_from: "device_detail" });
appendStreamLine("INFO: device marked inactive", "text-slate-400");
await loadDevice();
} catch (error) {
appendStreamLine(`ERROR: ${error?.message || "Unable to decommission device"}`, "text-danger");
} finally {
setButtonLoading(decommissionButton, false);
}
});
qrPreviewOpen?.addEventListener("click", openQrPreview);
qrPreviewClose?.addEventListener("click", closeQrPreview);
qrPreviewModal?.addEventListener("click", (event) => {
if (event.target === qrPreviewModal) {
closeQrPreview();
}
});
qrPreviewSendTest?.addEventListener("click", () => {
sendDeviceCommand("dynamic_qr.test", {
...buildQrPreviewPayload(),
source: "qr_preview_modal"
}, qrPreviewSendTest);
});
changeMerchantButton?.addEventListener("click", () => {
window.location.href = `/ui/device-registry-monitoring?focus=${encodeURIComponent(activeDeviceId || "")}`;
});
notificationButton?.addEventListener("click", () => {
window.location.href = activeDeviceId
? `/ui/soundbox-ops#mqtt-trace`
: "/ui/soundbox-ops";
});
calendarButton?.addEventListener("click", () => {
document.getElementById("device-events")?.scrollIntoView({ behavior: "smooth", block: "start" });
});
document.querySelectorAll("[data-scroll-target]").forEach((button) => {
button.addEventListener("click", () => {
const target = document.getElementById(button.getAttribute("data-scroll-target"));
target?.scrollIntoView({ behavior: "smooth", block: "start" });
});
});
deviceSearch?.addEventListener("keydown", async (event) => {
if (event.key !== "Enter") {
return;
}
event.preventDefault();
const q = deviceSearch.value.trim().toLowerCase();
if (!q) {
return;
}
try {
const devices = await api.listDevices();
const match = (Array.isArray(devices) ? devices : []).find((device) =>
[
device.id,
device.device_code,
device.serial_number,
device.vendor,
device.model,
device.mqtt_username
].filter(Boolean).join(" ").toLowerCase().includes(q)
);
if (match) {
window.location.href = `/ui/device-technical-detail?device_id=${encodeURIComponent(match.id)}`;
} else {
appendStreamLine(`INFO: no device matched search "${q}"`, "text-slate-400");
}
} catch (error) {
appendStreamLine(`ERROR: ${error?.message || "Search failed"}`, "text-danger");
}
});
confirmCancel?.addEventListener("click", () => closeConfirm(false));
confirmSubmit?.addEventListener("click", () => closeConfirm(true));
confirmModal?.addEventListener("click", (event) => {
if (event.target === confirmModal) {
closeConfirm(false);
}
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
closeQrPreview();
closeConfirm(false);
closeCredentialModal();
}
});
if (backLink) {
@ -1077,13 +1482,4 @@ Copy Command
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>