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

Improve soundbox ops dashboard and registry editing

Browse Source
This commit is contained in:
Wira Basalamah
2026-06-08 15:56:12 +07:00
parent 836eb7db85
commit 67dc286c1a
18 changed files with 768 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
ui/device-ui-qr-payment-display/index.html
View File

@ -181,7 +181,7 @@
<div class="flex items-center gap-4 flex-1">
<div class="relative w-96">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400">search</span>
<input class="w-full pl-10 pr-4 py-2 bg-surface-container-low border-none rounded-lg text-body-md focus:ring-2 focus:ring-primary/20" placeholder="Search devices, merchants, or transactions..." type="text"/>
<input id="device-qr-search" class="w-full pl-10 pr-4 py-2 bg-surface-container-low border-none rounded-lg text-body-md focus:ring-2 focus:ring-primary/20" placeholder="Search devices, merchants, or transactions..." type="text"/>
</div>
</div>
<div class="flex items-center gap-2">
@ -451,6 +451,35 @@
<span class="material-symbols-outlined">support_agent</span>
</button>
<script>
// Simple logic for simulating transaction status changes
const qrSearch = document.getElementById('device-qr-search');
const filterQrRows = () => {
const q = String(qrSearch?.value || '').trim().toLowerCase();
const rows = document.querySelectorAll('tbody tr');
let visible = 0;
rows.forEach((row) => {
const match = !q || row.textContent.toLowerCase().includes(q);
row.classList.toggle('hidden', !match);
if (match) visible += 1;
});
let emptyRow = document.getElementById('device-qr-search-empty');
const tbody = document.querySelector('tbody');
if (tbody && !emptyRow) {
emptyRow = document.createElement('tr');
emptyRow.id = 'device-qr-search-empty';
emptyRow.innerHTML = '<td colspan="5" class="px-6 py-8 text-center text-slate-500">No transactions matched the search.</td>';
tbody.appendChild(emptyRow);
}
emptyRow?.classList.toggle('hidden', visible > 0);
};
qrSearch?.addEventListener('input', filterQrRows);
qrSearch?.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && qrSearch.value) {
qrSearch.value = '';
filterQrRows();
}
});
// Simple logic for simulating transaction status changes
const statusText = document.querySelector('.bg-surface-container-low span:last-child');
const statusIcon = document.querySelector('.bg-surface-container-low span:first-child');
@ -475,4 +504,4 @@
<a href="/ui/admin-dashboard-overview" style="margin-right:0;color:#2563eb;text-decoration:none;font-weight:600">Dashboard</a>
</div>
'
</body></html>
</body></html>