wirabasalamah/Qris-Soundbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d7c6e6eadf2359cca6e0b5994d65589b24d65db9
Qris-Soundbox/design/transaction_history_monitoring/code.html
wirabasalamah a152c99cce Initial commit
2026-05-25 08:22:12 +07:00

657 lines
31 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Transactions | 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&amp;family=Inter:wght@400;500;600;700&amp;family=JetBrains+Mono&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
body {
font-family: 'Inter', sans-serif;
background-color: #F8FAFC;
}
.custom-scrollbar::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
background: #E2E8F0;
border-radius: 10px;
}
.mono-text {
font-family: 'JetBrains Mono', monospace;
}
</style>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"slate-200": "#E2E8F0",
"primary-fixed-dim": "#b4c5ff",
"on-tertiary-fixed": "#360f00",
"on-tertiary": "#ffffff",
"on-secondary": "#ffffff",
"surface-container": "#ededf9",
"on-background": "#191b23",
"error-container": "#ffdad6",
"surface-container-high": "#e7e7f3",
"on-primary": "#ffffff",
"background": "#F8FAFC",
"surface-container-low": "#f3f3fe",
"info": "#0EA5E9",
"on-surface-variant": "#434655",
"primary-fixed": "#dbe1ff",
"on-error": "#ffffff",
"on-secondary-fixed-variant": "#38485d",
"on-primary-container": "#eeefff",
"error": "#ba1a1a",
"on-secondary-container": "#54647a",
"tertiary-fixed-dim": "#ffb596",
"surface-variant": "#e1e2ed",
"tertiary": "#943700",
"surface": "#faf8ff",
"tertiary-container": "#bc4800",
"secondary-fixed": "#d3e4fe",
"primary": "#004ac6",
"on-error-container": "#93000a",
"on-surface": "#191b23",
"on-primary-fixed": "#00174b",
"slate-900": "#0F172A",
"on-tertiary-container": "#ffede6",
"outline-variant": "#c3c6d7",
"on-secondary-fixed": "#0b1c30",
"on-primary-fixed-variant": "#003ea8",
"secondary-container": "#d0e1fb",
"secondary": "#505f76",
"inverse-on-surface": "#f0f0fb",
"danger": "#DC2626",
"surface-container-lowest": "#ffffff",
"secondary-fixed-dim": "#b7c8e1",
"surface-dim": "#d9d9e5",
"slate-100": "#F1F5F9",
"surface-bright": "#faf8ff",
"on-tertiary-fixed-variant": "#7d2d00",
"success": "#16A34A",
"primary-container": "#2563eb",
"surface-tint": "#0053db",
"inverse-primary": "#b4c5ff",
"slate-700": "#334155",
"inverse-surface": "#2e3039",
"tertiary-fixed": "#ffdbcd",
"surface-container-highest": "#e1e2ed",
"warning": "#F59E0B",
"outline": "#737686",
"slate-500": "#64748B"
},
"borderRadius": {
"DEFAULT": "0.125rem",
"lg": "0.25rem",
"xl": "0.5rem",
"full": "0.75rem"
},
"spacing": {
"page-padding": "24px",
"topbar-height": "72px",
"row-height": "52px",
"gutter": "24px",
"card-padding": "20px"
},
"fontFamily": {
"display-lg": ["Plus Jakarta Sans"],
"label-md": ["Inter"],
"metric-lg": ["Inter"],
"headline-md": ["Plus Jakarta Sans"],
"body-md": ["Inter"],
"body-lg": ["Inter"],
"headline-lg": ["Plus Jakarta Sans"],
"metric-sm": ["Inter"]
},
"fontSize": {
"display-lg": ["36px", {"lineHeight": "44px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.01em", "fontWeight": "500"}],
"metric-lg": ["32px", {"lineHeight": "40px", "fontWeight": "600"}],
"headline-md": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"headline-lg": ["28px", {"lineHeight": "36px", "fontWeight": "600"}],
"metric-sm": ["14px", {"lineHeight": "20px", "fontWeight": "600"}]
}
},
},
}
</script>
</head>
<body class="bg-background text-on-surface">
<!-- SideNavBar -->
<aside class="w-64 h-full fixed left-0 top-0 flex flex-col py-6 px-4 gap-2 bg-surface-container-lowest dark:bg-slate-900 border-r border-slate-200 dark:border-slate-700 z-50">
<div class="px-4 mb-8">
<h1 class="font-headline-md text-headline-md font-bold text-primary dark:text-primary-fixed">Soundbox Ops</h1>
<p class="font-body-md text-body-md text-on-surface-variant">Admin Console</p>
</div>
<nav class="flex-1 space-y-1">
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-slate-400 font-body-md text-body-md hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="dashboard">dashboard</span>
Overview
</a>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-slate-400 font-body-md text-body-md hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="storefront">storefront</span>
Merchant Management
</a>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-slate-400 font-body-md text-body-md hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="speaker_group">speaker_group</span>
Device Registry
</a>
<a class="flex items-center gap-3 px-4 py-3 bg-secondary-container dark:bg-secondary text-on-secondary-container dark:text-on-secondary font-bold rounded-lg font-body-md text-body-md" href="#">
<span class="material-symbols-outlined" data-icon="receipt_long">receipt_long</span>
Transactions
</a>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-slate-400 font-body-md text-body-md hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="account_balance">account_balance</span>
Ledger &amp; Settlement
</a>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-slate-400 font-body-md text-body-md hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="history_edu">history_edu</span>
Audit Control
</a>
</nav>
<div class="mt-auto pt-6 border-t border-slate-100">
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-slate-400 font-body-md text-body-md hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="settings">settings</span>
Settings
</a>
<a class="flex items-center gap-3 px-4 py-3 text-on-surface-variant dark:text-slate-400 font-body-md text-body-md hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors rounded-lg" href="#">
<span class="material-symbols-outlined" data-icon="help">help</span>
Support
</a>
</div>
</aside>
<!-- TopNavBar -->
<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 dark:bg-slate-900 border-b border-slate-200 dark:border-slate-700 z-40">
<div class="flex items-center gap-6">
<div class="relative w-96">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-on-surface-variant text-[20px]" data-icon="search">search</span>
<input class="w-full bg-slate-100 border-none rounded-xl py-2 pl-10 pr-4 text-body-md focus:ring-2 focus:ring-primary/20" placeholder="Search TxID, Merchant, or RRN..." type="text"/>
</div>
<div class="hidden md:flex items-center gap-6">
<a class="text-primary dark:text-primary-fixed border-b-2 border-primary h-[72px] flex items-center font-body-md" href="#">Dashboard</a>
<a class="text-on-surface-variant dark:text-slate-400 hover:text-primary h-[72px] flex items-center font-body-md" href="#">System Health</a>
</div>
</div>
<div class="flex items-center gap-4">
<button class="p-2 text-on-surface-variant hover:bg-slate-100 rounded-full transition-colors relative">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
<span class="absolute top-2 right-2 w-2 h-2 bg-error rounded-full border-2 border-white"></span>
</button>
<button class="p-2 text-on-surface-variant hover:bg-slate-100 rounded-full transition-colors">
<span class="material-symbols-outlined" data-icon="calendar_today">calendar_today</span>
</button>
<div class="h-8 w-[1px] bg-slate-200 mx-2"></div>
<div class="flex items-center gap-3">
<div class="text-right">
<p class="font-label-md text-label-md font-bold">Admin User</p>
<p class="font-label-md text-[10px] text-slate-500 uppercase tracking-wider">Super Admin</p>
</div>
<img alt="Administrator Profile" class="w-10 h-10 rounded-full bg-slate-100" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDSeJvTDs1TfYLIgdJ99lOXHT5MY8X9SROFFT_ZKrdyO71EDMx1uVpWWLSdzowrHAbCMudUvLgfWEXLTF554Zm4jU_9PUPfPHUfEgp7sOGPDLWT_nlc2MQWH5CuyWmIpmtnQr6CBb8pL7491sl7kx1fZteImOaTsRYroTGvHLzuUH6BDseXkEq10bJw9YhHKQLpQiy3jTo_pMVRnxI1lwYXOShYCmA9uh9LQv4KArnlqQmJEHpBRghfePXKC6JHWnre2hxKUc0Wyow"/>
</div>
</div>
</header>
<!-- Main Content Canvas -->
<main class="ml-64 pt-[72px] min-h-screen p-page-padding">
<!-- Summary Bar (KPI Cards) -->
<div class="grid grid-cols-1 md:grid-cols-4 gap-gutter mb-8">
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl">
<p class="font-label-md text-label-md text-on-surface-variant mb-1 uppercase tracking-tight">Total Volume (24h)</p>
<div class="flex items-end justify-between">
<h3 class="font-metric-lg text-metric-lg">Rp 1.42B</h3>
<span class="font-metric-sm text-metric-sm text-success flex items-center mb-1">
<span class="material-symbols-outlined text-[16px]" data-icon="trending_up">trending_up</span>
+12.4%
</span>
</div>
</div>
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl">
<p class="font-label-md text-label-md text-on-surface-variant mb-1 uppercase tracking-tight">Success Rate</p>
<div class="flex items-end justify-between">
<h3 class="font-metric-lg text-metric-lg">99.92%</h3>
<span class="font-metric-sm text-metric-sm text-success flex items-center mb-1">
<span class="material-symbols-outlined text-[16px]" data-icon="check_circle">check_circle</span>
Stable
</span>
</div>
</div>
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl">
<p class="font-label-md text-label-md text-on-surface-variant mb-1 uppercase tracking-tight">Pending Settlements</p>
<div class="flex items-end justify-between">
<h3 class="font-metric-lg text-metric-lg">142</h3>
<span class="font-metric-sm text-metric-sm text-warning flex items-center mb-1">
<span class="material-symbols-outlined text-[16px]" data-icon="schedule">schedule</span>
-5.2%
</span>
</div>
</div>
<div class="bg-surface-container-lowest border border-slate-200 p-card-padding rounded-xl">
<p class="font-label-md text-label-md text-on-surface-variant mb-1 uppercase tracking-tight">Active QRIS Soundboxes</p>
<div class="flex items-end justify-between">
<h3 class="font-metric-lg text-metric-lg">1,894</h3>
<span class="font-metric-sm text-metric-sm text-info flex items-center mb-1">
<span class="material-symbols-outlined text-[16px]" data-icon="sensors">sensors</span>
98% Online
</span>
</div>
</div>
</div>
<!-- Filters & Tools Bar -->
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl p-4 mb-6 flex flex-wrap items-center gap-4">
<div class="flex items-center gap-2">
<span class="font-label-md text-label-md text-slate-500">Status:</span>
<select class="bg-slate-50 border-slate-200 rounded-lg text-body-md py-1.5 focus:ring-primary/20">
<option>All Statuses</option>
<option>Success</option>
<option>Pending</option>
<option>Failed</option>
</select>
</div>
<div class="flex items-center gap-2">
<span class="font-label-md text-label-md text-slate-500">Method:</span>
<select class="bg-slate-50 border-slate-200 rounded-lg text-body-md py-1.5 focus:ring-primary/20">
<option>QRIS &amp; VA</option>
<option>QRIS Only</option>
<option>VA Only</option>
</select>
</div>
<div class="flex items-center gap-2">
<span class="font-label-md text-label-md text-slate-500">Range:</span>
<button class="bg-slate-50 border border-slate-200 px-4 py-1.5 rounded-lg text-body-md flex items-center gap-2 hover:bg-slate-100 transition-colors">
<span class="material-symbols-outlined text-[18px]" data-icon="calendar_month">calendar_month</span>
Oct 24, 2023 - Oct 31, 2023
</button>
</div>
<div class="ml-auto flex items-center gap-2">
<button class="px-4 py-2 border border-slate-200 rounded-lg text-body-md font-bold flex items-center gap-2 hover:bg-slate-50 transition-colors">
<span class="material-symbols-outlined text-[18px]" data-icon="download">download</span>
Export CSV
</button>
<button class="px-4 py-2 bg-primary text-on-primary rounded-lg text-body-md font-bold flex items-center gap-2 hover:opacity-90 transition-opacity">
<span class="material-symbols-outlined text-[18px]" data-icon="add">add</span>
New Transaction
</button>
</div>
</div>
<!-- Transactions Table -->
<div class="bg-surface-container-lowest border border-slate-200 rounded-xl overflow-hidden">
<div class="overflow-x-auto custom-scrollbar">
<table class="w-full text-left border-collapse">
<thead>
<tr class="bg-slate-50 border-b border-slate-200">
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant font-bold uppercase tracking-wider">Timestamp</th>
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant font-bold uppercase tracking-wider">Transaction ID</th>
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant font-bold uppercase tracking-wider">Merchant Name</th>
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant font-bold uppercase tracking-wider">Amount</th>
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant font-bold uppercase tracking-wider text-right">Fee</th>
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant font-bold uppercase tracking-wider text-right">Net</th>
<th class="px-6 py-4 font-label-md text-label-md text-on-surface-variant font-bold uppercase tracking-wider text-center">Status</th>
<th class="px-6 py-4"></th>
</tr>
</thead>
<tbody class="divide-y divide-slate-100">
<!-- Row 1 -->
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-4">
<p class="font-body-md text-body-md font-bold">Oct 31, 2023</p>
<p class="text-[12px] text-slate-500">14:22:05</p>
</td>
<td class="px-6 py-4">
<span class="mono-text text-body-md text-primary font-medium">TXN-98421054</span>
<p class="text-[11px] text-slate-400">RRN: 310542918420</p>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center">
<span class="material-symbols-outlined text-[18px] text-slate-500" data-icon="coffee">coffee</span>
</div>
<div>
<p class="font-body-md text-body-md font-bold">Brew &amp; Co. Central</p>
<p class="text-[12px] text-slate-500">QRIS Dynamic</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<p class="font-body-md text-body-md font-bold">Rp 45.000</p>
</td>
<td class="px-6 py-4 text-right">
<p class="font-body-md text-body-md text-slate-500">Rp 315</p>
</td>
<td class="px-6 py-4 text-right">
<p class="font-body-md text-body-md font-bold text-on-surface">Rp 44.685</p>
</td>
<td class="px-6 py-4">
<div class="flex justify-center">
<span class="px-2.5 py-1 rounded-full bg-success/10 text-success text-[11px] font-bold uppercase flex items-center gap-1">
<span class="w-1.5 h-1.5 rounded-full bg-success"></span>
Settled
</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-slate-400 hover:text-primary transition-colors" onclick="toggleDrawer()">
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
</button>
</td>
</tr>
<!-- Row 2 -->
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-4">
<p class="font-body-md text-body-md font-bold">Oct 31, 2023</p>
<p class="text-[12px] text-slate-500">14:18:12</p>
</td>
<td class="px-6 py-4">
<span class="mono-text text-body-md text-primary font-medium">TXN-98421053</span>
<p class="text-[11px] text-slate-400">RRN: 310542918421</p>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center">
<span class="material-symbols-outlined text-[18px] text-slate-500" data-icon="shopping_basket">shopping_basket</span>
</div>
<div>
<p class="font-body-md text-body-md font-bold">Mart Express #42</p>
<p class="text-[12px] text-slate-500">Static QRIS</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<p class="font-body-md text-body-md font-bold">Rp 128.400</p>
</td>
<td class="px-6 py-4 text-right">
<p class="font-body-md text-body-md text-slate-500">Rp 899</p>
</td>
<td class="px-6 py-4 text-right">
<p class="font-body-md text-body-md font-bold text-on-surface">Rp 127.501</p>
</td>
<td class="px-6 py-4">
<div class="flex justify-center">
<span class="px-2.5 py-1 rounded-full bg-warning/10 text-warning text-[11px] font-bold uppercase flex items-center gap-1">
<span class="w-1.5 h-1.5 rounded-full bg-warning"></span>
Pending
</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-slate-400 hover:text-primary transition-colors">
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
</button>
</td>
</tr>
<!-- Row 3 -->
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-4">
<p class="font-body-md text-body-md font-bold">Oct 31, 2023</p>
<p class="text-[12px] text-slate-500">14:05:44</p>
</td>
<td class="px-6 py-4">
<span class="mono-text text-body-md text-primary font-medium">TXN-98421052</span>
<p class="text-[11px] text-slate-400">RRN: 310542918422</p>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center">
<span class="material-symbols-outlined text-[18px] text-slate-500" data-icon="local_gas_station">local_gas_station</span>
</div>
<div>
<p class="font-body-md text-body-md font-bold">Shell Kemang</p>
<p class="text-[12px] text-slate-500">Virtual Account</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<p class="font-body-md text-body-md font-bold">Rp 350.000</p>
</td>
<td class="px-6 py-4 text-right">
<p class="font-body-md text-body-md text-slate-500">Rp 4.500</p>
</td>
<td class="px-6 py-4 text-right">
<p class="font-body-md text-body-md font-bold text-on-surface">Rp 345.500</p>
</td>
<td class="px-6 py-4">
<div class="flex justify-center">
<span class="px-2.5 py-1 rounded-full bg-danger/10 text-danger text-[11px] font-bold uppercase flex items-center gap-1">
<span class="w-1.5 h-1.5 rounded-full bg-danger"></span>
Failed
</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-slate-400 hover:text-primary transition-colors">
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
</button>
</td>
</tr>
<!-- Row 4 -->
<tr class="hover:bg-slate-50 transition-colors group">
<td class="px-6 py-4">
<p class="font-body-md text-body-md font-bold">Oct 31, 2023</p>
<p class="text-[12px] text-slate-500">13:58:31</p>
</td>
<td class="px-6 py-4">
<span class="mono-text text-body-md text-primary font-medium">TXN-98421051</span>
<p class="text-[11px] text-slate-400">RRN: 310542918423</p>
</td>
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded bg-slate-100 flex items-center justify-center">
<span class="material-symbols-outlined text-[18px] text-slate-500" data-icon="restaurant">restaurant</span>
</div>
<div>
<p class="font-body-md text-body-md font-bold">Sushi Tei GI</p>
<p class="text-[12px] text-slate-500">QRIS Dynamic</p>
</div>
</div>
</td>
<td class="px-6 py-4">
<p class="font-body-md text-body-md font-bold">Rp 742.800</p>
</td>
<td class="px-6 py-4 text-right">
<p class="font-body-md text-body-md text-slate-500">Rp 5.200</p>
</td>
<td class="px-6 py-4 text-right">
<p class="font-body-md text-body-md font-bold text-on-surface">Rp 737.600</p>
</td>
<td class="px-6 py-4">
<div class="flex justify-center">
<span class="px-2.5 py-1 rounded-full bg-success/10 text-success text-[11px] font-bold uppercase flex items-center gap-1">
<span class="w-1.5 h-1.5 rounded-full bg-success"></span>
Settled
</span>
</div>
</td>
<td class="px-6 py-4 text-right">
<button class="p-2 text-slate-400 hover:text-primary transition-colors">
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Pagination -->
<div class="px-6 py-4 bg-slate-50 border-t border-slate-200 flex items-center justify-between">
<p class="text-body-md text-on-surface-variant">Showing <span class="font-bold text-on-surface">1 - 10</span> of 1,284 transactions</p>
<div class="flex gap-2">
<button class="px-3 py-1.5 border border-slate-200 rounded-lg bg-white text-slate-400 hover:text-on-surface transition-colors cursor-not-allowed">
<span class="material-symbols-outlined text-[18px]" data-icon="chevron_left">chevron_left</span>
</button>
<button class="px-3 py-1.5 border border-slate-200 rounded-lg bg-white text-on-surface hover:bg-slate-50 transition-colors">
1
</button>
<button class="px-3 py-1.5 border border-primary bg-primary-container/10 text-primary font-bold rounded-lg">
2
</button>
<button class="px-3 py-1.5 border border-slate-200 rounded-lg bg-white text-on-surface hover:bg-slate-50 transition-colors">
3
</button>
<button class="px-3 py-1.5 border border-slate-200 rounded-lg bg-white text-on-surface hover:bg-slate-50 transition-colors">
<span class="material-symbols-outlined text-[18px]" data-icon="chevron_right">chevron_right</span>
</button>
</div>
</div>
</div>
</main>
<!-- Detail Drawer Overlay -->
<div class="fixed inset-0 bg-slate-900/40 backdrop-blur-sm z-[60] opacity-0 pointer-events-none transition-opacity duration-300" id="drawerOverlay" onclick="toggleDrawer()"></div>
<!-- Transaction Detail Drawer -->
<aside class="fixed top-0 right-0 h-full w-[480px] bg-surface-container-lowest z-[70] translate-x-full transition-transform duration-300 shadow-2xl overflow-y-auto custom-scrollbar" id="detailDrawer">
<div class="p-6 border-b border-slate-200 flex items-center justify-between sticky top-0 bg-surface-container-lowest z-10">
<div>
<h2 class="font-headline-md text-headline-md">Transaction Details</h2>
<p class="text-body-md text-on-surface-variant">TXN-98421054</p>
</div>
<button class="p-2 hover:bg-slate-100 rounded-full transition-colors" onclick="toggleDrawer()">
<span class="material-symbols-outlined" data-icon="close">close</span>
</button>
</div>
<div class="p-6 space-y-8">
<!-- Status Card -->
<div class="bg-success/5 border border-success/20 rounded-xl p-6 text-center">
<div class="w-12 h-12 bg-success text-white rounded-full flex items-center justify-center mx-auto mb-3">
<span class="material-symbols-outlined text-[28px]" data-icon="check_circle" style="font-variation-settings: 'FILL' 1;">check_circle</span>
</div>
<h3 class="text-headline-md text-success mb-1">Rp 45.000</h3>
<p class="text-body-md font-bold text-success uppercase tracking-widest">Successfully Settled</p>
<p class="text-label-md text-slate-500 mt-2">Processed via QRIS National Pool</p>
</div>
<!-- Detail Grid -->
<div class="grid grid-cols-2 gap-y-6">
<div>
<p class="text-label-md text-slate-500 uppercase">Merchant</p>
<p class="text-body-md font-bold">Brew &amp; Co. Central</p>
</div>
<div>
<p class="text-label-md text-slate-500 uppercase">Merchant ID</p>
<p class="text-body-md font-bold mono-text">MID-99201</p>
</div>
<div>
<p class="text-label-md text-slate-500 uppercase">Terminal / Device</p>
<p class="text-body-md font-bold">Soundbox v2 (#SB-4402)</p>
</div>
<div>
<p class="text-label-md text-slate-500 uppercase">Acquirer</p>
<p class="text-body-md font-bold">Bank Indonesia / ASPI</p>
</div>
<div class="col-span-2">
<p class="text-label-md text-slate-500 uppercase">Retrieval Reference Number (RRN)</p>
<p class="text-body-md font-bold mono-text">310542918420</p>
</div>
</div>
<!-- Vertical Timeline -->
<div class="space-y-4">
<h4 class="font-bold text-body-md">Transaction Lifecycle</h4>
<div class="relative pl-8 space-y-6">
<div class="absolute left-3.5 top-2 bottom-2 w-[1px] bg-slate-200"></div>
<div class="relative">
<div class="absolute -left-8 w-7 h-7 bg-primary text-white rounded-full flex items-center justify-center border-4 border-white">
<span class="material-symbols-outlined text-[14px]" data-icon="bolt">bolt</span>
</div>
<div>
<p class="text-body-md font-bold">QR Generated</p>
<p class="text-label-md text-slate-500">Oct 31, 2023 • 14:21:40</p>
</div>
</div>
<div class="relative">
<div class="absolute -left-8 w-7 h-7 bg-primary text-white rounded-full flex items-center justify-center border-4 border-white">
<span class="material-symbols-outlined text-[14px]" data-icon="payments">payments</span>
</div>
<div>
<p class="text-body-md font-bold">Payment Received</p>
<p class="text-label-md text-slate-500">Oct 31, 2023 • 14:22:01</p>
</div>
</div>
<div class="relative">
<div class="absolute -left-8 w-7 h-7 bg-success text-white rounded-full flex items-center justify-center border-4 border-white">
<span class="material-symbols-outlined text-[14px]" data-icon="account_balance_wallet">account_balance_wallet</span>
</div>
<div>
<p class="text-body-md font-bold">Funds Settled to Ledger</p>
<p class="text-label-md text-slate-500">Oct 31, 2023 • 14:22:05</p>
</div>
</div>
</div>
</div>
<!-- Raw Payload Viewer (Audit Block) -->
<div>
<div class="flex items-center justify-between mb-2">
<h4 class="font-bold text-body-md">Audit Trail (Raw JSON)</h4>
<button class="text-primary text-[12px] font-bold hover:underline flex items-center gap-1">
<span class="material-symbols-outlined text-[14px]" data-icon="content_copy">content_copy</span>
Copy JSON
</button>
</div>
<div class="bg-slate-900 rounded-lg p-4 text-slate-300 text-[12px] mono-text h-40 overflow-y-auto custom-scrollbar">
<pre>{
"tx_id": "TXN-98421054",
"rrn": "310542918420",
"merchant": {
"name": "Brew &amp; Co. Central",
"mcc": "5812",
"postal": "10110"
},
"qris_data": {
"type": "DYNAMIC",
"payload": "00020101021226590014ID...",
"mdr_rate": 0.007
},
"ledger": {
"gross": 45000,
"fee": 315,
"net": 44685
}
}</pre>
</div>
</div>
<!-- Action Buttons -->
<div class="grid grid-cols-2 gap-4 pt-4">
<button class="py-3 border border-slate-200 rounded-lg font-bold text-body-md flex items-center justify-center gap-2 hover:bg-slate-50 transition-colors">
<span class="material-symbols-outlined text-[18px]" data-icon="print">print</span>
Print Receipt
</button>
<button class="py-3 border border-danger/20 text-danger rounded-lg font-bold text-body-md flex items-center justify-center gap-2 hover:bg-danger/5 transition-colors">
<span class="material-symbols-outlined text-[18px]" data-icon="undo">undo</span>
Void/Refund
</button>
</div>
</div>
</aside>
<script>
function toggleDrawer() {
const drawer = document.getElementById('detailDrawer');
const overlay = document.getElementById('drawerOverlay');
if (drawer.classList.contains('translate-x-full')) {
drawer.classList.remove('translate-x-full');
overlay.classList.remove('opacity-0', 'pointer-events-none');
} else {
drawer.classList.add('translate-x-full');
overlay.classList.add('opacity-0', 'pointer-events-none');
}
}
// Atmospheric effect: Pulse the "Pending" dots subtly
setInterval(() => {
const pendingDots = document.querySelectorAll('.bg-warning');
pendingDots.forEach(dot => {
dot.style.opacity = '0.5';
setTimeout(() => dot.style.opacity = '1', 500);
});
}, 1500);
</script>
</body></html>
Reference in New Issue View Git Blame Copy Permalink