Initial commit
This commit is contained in:
478
ui/device-ui-qr-payment-display/index.html
Normal file
478
ui/device-ui-qr-payment-display/index.html
Normal file
@ -0,0 +1,478 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>FinOps Admin - Device QR State</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"/>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #F8FAFC;
|
||||
}
|
||||
.device-screen-glare {
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 50%);
|
||||
}
|
||||
@keyframes pulse-opacity {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
.animate-pulse-slow {
|
||||
animation: pulse-opacity 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
</style>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"surface-container-high": "#e7e7f3",
|
||||
"on-primary": "#ffffff",
|
||||
"background": "#F8FAFC",
|
||||
"error-container": "#ffdad6",
|
||||
"surface-container": "#ededf9",
|
||||
"on-background": "#191b23",
|
||||
"on-tertiary": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-tertiary-fixed": "#360f00",
|
||||
"slate-200": "#E2E8F0",
|
||||
"primary-fixed-dim": "#b4c5ff",
|
||||
"surface-container-low": "#f3f3fe",
|
||||
"info": "#0EA5E9",
|
||||
"on-secondary-container": "#54647a",
|
||||
"on-primary-container": "#eeefff",
|
||||
"error": "#ba1a1a",
|
||||
"on-secondary-fixed-variant": "#38485d",
|
||||
"primary-fixed": "#dbe1ff",
|
||||
"on-error": "#ffffff",
|
||||
"on-surface-variant": "#434655",
|
||||
"surface": "#faf8ff",
|
||||
"tertiary": "#943700",
|
||||
"surface-variant": "#e1e2ed",
|
||||
"tertiary-fixed-dim": "#ffb596",
|
||||
"on-primary-fixed": "#00174b",
|
||||
"on-surface": "#191b23",
|
||||
"primary": "#004ac6",
|
||||
"on-error-container": "#93000a",
|
||||
"secondary-fixed": "#d3e4fe",
|
||||
"tertiary-container": "#bc4800",
|
||||
"secondary-container": "#d0e1fb",
|
||||
"on-primary-fixed-variant": "#003ea8",
|
||||
"outline-variant": "#c3c6d7",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"on-tertiary-container": "#ffede6",
|
||||
"slate-900": "#0F172A",
|
||||
"surface-tint": "#0053db",
|
||||
"success": "#16A34A",
|
||||
"primary-container": "#2563eb",
|
||||
"surface-bright": "#faf8ff",
|
||||
"on-tertiary-fixed-variant": "#7d2d00",
|
||||
"slate-100": "#F1F5F9",
|
||||
"surface-dim": "#d9d9e5",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"secondary-fixed-dim": "#b7c8e1",
|
||||
"secondary": "#505f76",
|
||||
"inverse-on-surface": "#f0f0fb",
|
||||
"danger": "#DC2626",
|
||||
"slate-500": "#64748B",
|
||||
"tertiary-fixed": "#ffdbcd",
|
||||
"surface-container-highest": "#e1e2ed",
|
||||
"warning": "#F59E0B",
|
||||
"outline": "#737686",
|
||||
"inverse-surface": "#2e3039",
|
||||
"slate-700": "#334155",
|
||||
"inverse-primary": "#b4c5ff"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"spacing": {
|
||||
"row-height": "52px",
|
||||
"gutter": "24px",
|
||||
"card-padding": "20px",
|
||||
"topbar-height": "72px",
|
||||
"page-padding": "24px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline-md": ["Plus Jakarta Sans"],
|
||||
"body-md": ["Inter"],
|
||||
"body-lg": ["Inter"],
|
||||
"headline-lg": ["Plus Jakarta Sans"],
|
||||
"metric-sm": ["Inter"],
|
||||
"display-lg": ["Plus Jakarta Sans"],
|
||||
"label-md": ["Inter"],
|
||||
"metric-lg": ["Inter"]
|
||||
},
|
||||
"fontSize": {
|
||||
"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"}],
|
||||
"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"}]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body class="bg-background text-on-background min-h-screen flex">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="bg-surface-container-lowest border-r border-slate-200 w-64 h-screen fixed left-0 top-0 flex flex-col py-6 overflow-y-auto z-50">
|
||||
<div class="px-6 mb-8">
|
||||
<h1 class="font-headline-md text-headline-md font-bold text-primary">FinOps Admin</h1>
|
||||
<p class="font-label-md text-label-md text-slate-500 uppercase tracking-wider mt-1">System Management</p>
|
||||
</div>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center px-6 py-3 text-secondary hover:bg-slate-100 transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined mr-3 group-hover:text-primary">dashboard</span>
|
||||
<span class="font-body-md text-body-md">Dashboard</span>
|
||||
</a>
|
||||
<a class="flex items-center px-6 py-3 text-secondary hover:bg-slate-100 transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined mr-3 group-hover:text-primary">pending_actions</span>
|
||||
<span class="font-body-md text-body-md">Onboarding Queue</span>
|
||||
</a>
|
||||
<a class="flex items-center px-6 py-3 text-secondary hover:bg-slate-100 transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined mr-3 group-hover:text-primary">store</span>
|
||||
<span class="font-body-md text-body-md">Merchant Directory</span>
|
||||
</a>
|
||||
<!-- Active Tab: Device Fleet -->
|
||||
<a class="flex items-center px-6 py-3 text-primary font-bold border-r-4 border-primary bg-surface-container-low transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined mr-3 text-primary">speaker_group</span>
|
||||
<span class="font-body-md text-body-md">Device Fleet</span>
|
||||
</a>
|
||||
<a class="flex items-center px-6 py-3 text-secondary hover:bg-slate-100 transition-colors group" href="#">
|
||||
<span class="material-symbols-outlined mr-3 group-hover:text-primary">assignment</span>
|
||||
<span class="font-body-md text-body-md">Audit Logs</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto px-6 pt-6 border-t border-slate-100">
|
||||
<button class="w-full bg-primary text-on-primary py-3 rounded-xl font-body-md text-body-md font-semibold hover:opacity-90 transition-all flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px]">add</span>
|
||||
New Application
|
||||
</button>
|
||||
<div class="mt-6 flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-slate-200 overflow-hidden">
|
||||
<img alt="Admin User Profile" data-alt="A professional headshot of a modern corporate administrator in a bright office environment. The person is smiling confidently, wearing a clean, white button-down shirt. The background is a soft-focus tech office with cool blue and white tones, matching a professional and precise fintech brand aesthetic. High-quality lighting highlights the facial features and creates a clean, corporate atmosphere." src="https://lh3.googleusercontent.com/aida-public/AB6AXuA1Os3poCW14wa8nsVWtWvnG05uEk4Gb0rePLLwW4KguKbahuCdopeMNd2R7EB5MoKSQu7tLEiA7UG8XaIFIY6l9GsYl9EPxIOe2KiAI4nU7o5829TctzIBXO-bFSHG_b3b29aNSZqahFB3Y8BGHiAL2cKvYM0tAoKQY3P3ggSx_ZqGhA0RK3wqeARj0NwQH0O3Ktl11y3KfIwj_secOEJRjFctDskVyBW93sMKzCuwOFadiquE2fjsa1oF09aevHgPaZIsHPbC84U"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-md text-on-surface font-bold">Admin User</p>
|
||||
<p class="font-label-md text-slate-500">Super Admin</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- Main Content Cluster -->
|
||||
<main class="flex-1 ml-64 min-h-screen">
|
||||
<!-- TopAppBar -->
|
||||
<header class="bg-surface-container-lowest border-b border-slate-200 h-topbar-height px-gutter flex justify-between items-center sticky top-0 z-40">
|
||||
<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"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h2 class="font-headline-md text-headline-md font-black text-primary mr-8">Merchant Control Center</h2>
|
||||
<div class="flex items-center gap-1">
|
||||
<button class="hover:bg-surface-container rounded-full p-2 transition-colors">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">notifications</span>
|
||||
</button>
|
||||
<button class="hover:bg-surface-container rounded-full p-2 transition-colors">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">help_outline</span>
|
||||
</button>
|
||||
<button class="hover:bg-surface-container rounded-full p-2 transition-colors">
|
||||
<span class="material-symbols-outlined text-on-surface-variant">account_circle</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Content Canvas -->
|
||||
<div class="p-page-padding max-w-7xl mx-auto">
|
||||
<!-- Breadcrumbs & Actions -->
|
||||
<div class="flex justify-between items-end mb-8">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 text-slate-500 mb-1">
|
||||
<span class="font-label-md">Device Fleet</span>
|
||||
<span class="material-symbols-outlined text-[14px]">chevron_right</span>
|
||||
<span class="font-label-md">Soundbox SB-9021</span>
|
||||
</div>
|
||||
<h1 class="font-headline-lg text-headline-lg text-on-surface">Live Device Simulation</h1>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="px-4 py-2 border border-slate-200 rounded-lg text-body-md font-medium hover:bg-white transition-all flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[20px]">refresh</span>
|
||||
Reset State
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-primary text-on-primary rounded-lg text-body-md font-medium hover:opacity-90 transition-all flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[20px]">screenshot_region</span>
|
||||
Remote Capture
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Main Layout: 12-column grid -->
|
||||
<div class="grid grid-cols-12 gap-gutter">
|
||||
<!-- LEFT: Physical Device Mockup (Central Focus) -->
|
||||
<div class="col-span-12 lg:col-span-7 flex justify-center items-start pt-10">
|
||||
<!-- Physical Device Frame -->
|
||||
<div class="relative w-[340px] h-[520px] bg-slate-900 rounded-[60px] p-4 shadow-2xl border-[8px] border-slate-800 ring-4 ring-slate-700/20">
|
||||
<!-- Speaker Mesh Top -->
|
||||
<div class="w-24 h-1.5 bg-slate-800 rounded-full mx-auto mt-4 mb-8 opacity-50"></div>
|
||||
<!-- Internal Screen Container -->
|
||||
<div class="relative w-full h-[400px] bg-white rounded-[32px] overflow-hidden flex flex-col shadow-inner">
|
||||
<!-- Screen Content: QR Generation State -->
|
||||
<div class="bg-primary px-6 py-6 text-white">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<span class="font-label-md opacity-80 uppercase tracking-widest">Merchant</span>
|
||||
<span class="material-symbols-outlined text-[18px]" style="font-variation-settings: 'FILL' 1;">wifi</span>
|
||||
</div>
|
||||
<h3 class="font-headline-md text-headline-md leading-tight truncate">Central Coffee Roasters</h3>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col items-center justify-center p-6 bg-white relative">
|
||||
<!-- QR Placeholder Area -->
|
||||
<div class="relative w-48 h-48 bg-white border-4 border-slate-100 p-2 rounded-2xl mb-6 flex items-center justify-center overflow-hidden">
|
||||
<!-- QR Code Mockup -->
|
||||
<div class="w-full h-full bg-slate-50 relative group">
|
||||
<div class="absolute inset-0 grid grid-cols-8 grid-rows-8 gap-0.5 opacity-20">
|
||||
<div class="bg-black"></div><div class="bg-black"></div><div class="bg-black"></div><div class="bg-white"></div><div class="bg-black"></div><div class="bg-white"></div><div class="bg-black"></div><div class="bg-black"></div>
|
||||
<div class="bg-black"></div><div class="bg-white"></div><div class="bg-black"></div><div class="bg-white"></div><div class="bg-white"></div><div class="bg-black"></div><div class="bg-white"></div><div class="bg-black"></div>
|
||||
<!-- Just a pattern to look like QR -->
|
||||
<div class="bg-black"></div><div class="bg-black"></div><div class="bg-black"></div><div class="bg-white"></div><div class="bg-black"></div><div class="bg-black"></div><div class="bg-black"></div><div class="bg-black"></div>
|
||||
<div class="bg-white"></div><div class="bg-white"></div><div class="bg-white"></div><div class="bg-black"></div><div class="bg-white"></div><div class="bg-white"></div><div class="bg-white"></div><div class="bg-white"></div>
|
||||
</div>
|
||||
<div class="absolute inset-0 flex items-center justify-center">
|
||||
<div class="w-10 h-10 bg-white rounded-lg p-1 shadow-sm border border-slate-100 flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-primary text-[24px]">qr_code_2</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Corner accents -->
|
||||
<div class="absolute top-0 left-0 w-8 h-8 border-t-4 border-l-4 border-primary rounded-tl-xl"></div>
|
||||
<div class="absolute top-0 right-0 w-8 h-8 border-t-4 border-r-4 border-primary rounded-tr-xl"></div>
|
||||
<div class="absolute bottom-0 left-0 w-8 h-8 border-b-4 border-l-4 border-primary rounded-bl-xl"></div>
|
||||
<div class="absolute bottom-0 right-0 w-8 h-8 border-b-4 border-r-4 border-primary rounded-br-xl"></div>
|
||||
<!-- Scanning line animation -->
|
||||
<div class="absolute top-0 left-0 w-full h-[2px] bg-primary shadow-[0_0_15px_rgba(0,74,198,0.8)] animate-[bounce_3s_infinite] opacity-50"></div>
|
||||
</div>
|
||||
<!-- Amount Display -->
|
||||
<div class="text-center">
|
||||
<p class="font-label-md text-slate-500 uppercase tracking-widest mb-1">Total Payment</p>
|
||||
<h4 class="font-metric-lg text-metric-lg text-slate-900 tracking-tight">Rp 50.000</h4>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Footer Status -->
|
||||
<div class="bg-surface-container-low px-6 py-4 flex items-center justify-center gap-2 border-t border-slate-100">
|
||||
<span class="material-symbols-outlined text-warning animate-pulse-slow">pending</span>
|
||||
<span class="font-body-md text-body-md font-semibold text-on-surface-variant">Waiting for payment...</span>
|
||||
</div>
|
||||
<!-- Glare effect overlay -->
|
||||
<div class="absolute inset-0 device-screen-glare pointer-events-none"></div>
|
||||
</div>
|
||||
<!-- Physical Buttons -->
|
||||
<div class="absolute -right-2 top-24 w-2 h-16 bg-slate-700 rounded-l-md"></div>
|
||||
<div class="absolute -right-2 top-44 w-2 h-10 bg-slate-700 rounded-l-md"></div>
|
||||
<!-- Charging Indicator -->
|
||||
<div class="absolute bottom-10 left-1/2 -translate-x-1/2 flex gap-2">
|
||||
<div class="w-2 h-2 bg-success rounded-full shadow-[0_0_8px_rgba(22,163,74,0.6)]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- RIGHT: Operational Context & Stats -->
|
||||
<div class="col-span-12 lg:col-span-5 space-y-6">
|
||||
<!-- Device Diagnostics Card -->
|
||||
<div class="bg-white border border-slate-200 rounded-xl p-card-padding">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface mb-6 flex items-center justify-between">
|
||||
Device Diagnostics
|
||||
<span class="px-2 py-1 bg-success/10 text-success rounded text-[10px] uppercase font-bold tracking-widest">Active</span>
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div class="flex justify-between items-center py-3 border-b border-slate-100">
|
||||
<span class="font-body-md text-slate-500">Signal Strength</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex items-end gap-0.5 h-4">
|
||||
<div class="w-1 h-2 bg-primary"></div>
|
||||
<div class="w-1 h-3 bg-primary"></div>
|
||||
<div class="w-1 h-4 bg-primary"></div>
|
||||
<div class="w-1 h-4 bg-slate-200"></div>
|
||||
</div>
|
||||
<span class="font-metric-sm text-metric-sm text-on-surface">-74 dBm</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-3 border-b border-slate-100">
|
||||
<span class="font-body-md text-slate-500">Battery Level</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-metric-sm text-metric-sm text-on-surface">94%</span>
|
||||
<span class="material-symbols-outlined text-success text-[20px]">battery_5_bar</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-3 border-b border-slate-100">
|
||||
<span class="font-body-md text-slate-500">Firmware</span>
|
||||
<span class="font-metric-sm text-metric-sm text-slate-900 bg-slate-100 px-2 py-0.5 rounded">v2.4.1-stable</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center py-3">
|
||||
<span class="font-body-md text-slate-500">Uptime</span>
|
||||
<span class="font-metric-sm text-metric-sm text-on-surface">14d 06h 22m</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Transaction Event Log (Audit Block Style) -->
|
||||
<div class="bg-white border border-slate-200 rounded-xl p-card-padding">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface">Recent Logs</h3>
|
||||
<button class="text-primary font-label-md hover:underline">View All</button>
|
||||
</div>
|
||||
<div class="bg-slate-900 text-slate-200 p-4 rounded-lg font-mono text-[12px] leading-relaxed overflow-hidden h-48 relative">
|
||||
<div class="absolute top-2 right-2">
|
||||
<button class="p-1 hover:bg-slate-800 rounded transition-colors" title="Copy Logs">
|
||||
<span class="material-symbols-outlined text-[16px] text-slate-400">content_copy</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-1">
|
||||
<p><span class="text-success">[14:22:01]</span> CMD_REQ_QR_GEN: amount=50000</p>
|
||||
<p><span class="text-primary">[14:22:02]</span> QR_API_RES: 200 OK - data_hash=7f2a1...</p>
|
||||
<p><span class="text-warning">[14:22:02]</span> UI_STATE_UPD: display_qr_waiting</p>
|
||||
<p><span class="text-slate-500">[14:22:05]</span> HEARTBEAT: latency=42ms</p>
|
||||
<p><span class="text-slate-500">[14:22:15]</span> HEARTBEAT: latency=38ms</p>
|
||||
<p><span class="text-info">[14:22:18]</span> SOCKET_EVT: client_polling_started</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Action Quick Bar -->
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="bg-white border border-slate-200 rounded-xl p-4 flex items-center gap-4 hover:shadow-md transition-shadow cursor-pointer group">
|
||||
<div class="w-10 h-10 rounded-full bg-error-container flex items-center justify-center text-error group-hover:scale-110 transition-transform">
|
||||
<span class="material-symbols-outlined">block</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-md text-on-surface font-bold">Cancel Trans.</p>
|
||||
<p class="font-label-md text-slate-500">Void current QR</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-slate-200 rounded-xl p-4 flex items-center gap-4 hover:shadow-md transition-shadow cursor-pointer group">
|
||||
<div class="w-10 h-10 rounded-full bg-secondary-container flex items-center justify-center text-primary group-hover:scale-110 transition-transform">
|
||||
<span class="material-symbols-outlined">volume_up</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-md text-on-surface font-bold">Test Speaker</p>
|
||||
<p class="font-label-md text-slate-500">Play chime</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Detailed History Table Preview -->
|
||||
<div class="mt-12">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="font-headline-md text-headline-md text-on-surface">Recent Merchant Transactions</h3>
|
||||
<div class="flex gap-2">
|
||||
<span class="px-3 py-1 bg-surface-container rounded-full text-label-md text-on-surface-variant font-medium">Daily Target: 82%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white border border-slate-200 rounded-xl overflow-hidden shadow-sm">
|
||||
<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-slate-500 uppercase tracking-wider">Transaction ID</th>
|
||||
<th class="px-6 py-4 font-label-md text-slate-500 uppercase tracking-wider">Timestamp</th>
|
||||
<th class="px-6 py-4 font-label-md text-slate-500 uppercase tracking-wider">Method</th>
|
||||
<th class="px-6 py-4 font-label-md text-slate-500 uppercase tracking-wider">Amount</th>
|
||||
<th class="px-6 py-4 font-label-md text-slate-500 uppercase tracking-wider text-right">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-100">
|
||||
<tr class="hover:bg-slate-50 transition-colors h-row-height">
|
||||
<td class="px-6 py-2 font-body-md text-slate-900 font-medium">TXN-98421055</td>
|
||||
<td class="px-6 py-2 font-body-md text-slate-500">14:18:42</td>
|
||||
<td class="px-6 py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px] text-slate-400">qr_code</span>
|
||||
<span class="font-body-md text-on-surface">QRIS Static</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-2 font-metric-sm text-on-surface">Rp 24,500</td>
|
||||
<td class="px-6 py-2 text-right">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
|
||||
Settled
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors h-row-height">
|
||||
<td class="px-6 py-2 font-body-md text-slate-900 font-medium">TXN-98421042</td>
|
||||
<td class="px-6 py-2 font-body-md text-slate-500">14:05:11</td>
|
||||
<td class="px-6 py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px] text-slate-400">qr_code</span>
|
||||
<span class="font-body-md text-on-surface">QRIS Dynamic</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-2 font-metric-sm text-on-surface">Rp 120,000</td>
|
||||
<td class="px-6 py-2 text-right">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-success/10 text-success">
|
||||
Settled
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-slate-50 transition-colors h-row-height">
|
||||
<td class="px-6 py-2 font-body-md text-slate-900 font-medium">TXN-98421021</td>
|
||||
<td class="px-6 py-2 font-body-md text-slate-500">13:58:30</td>
|
||||
<td class="px-6 py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="material-symbols-outlined text-[18px] text-slate-400">qr_code</span>
|
||||
<span class="font-body-md text-on-surface">QRIS Dynamic</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-6 py-2 font-metric-sm text-on-surface">Rp 50,000</td>
|
||||
<td class="px-6 py-2 text-right">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-error/10 text-error">
|
||||
Failed
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Contextual FAB (Only relevant for device monitoring screen) -->
|
||||
<button class="fixed bottom-8 right-8 w-14 h-14 bg-primary text-on-primary rounded-full shadow-lg flex items-center justify-center hover:scale-110 transition-all z-50">
|
||||
<span class="material-symbols-outlined">support_agent</span>
|
||||
</button>
|
||||
<script>
|
||||
// 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');
|
||||
|
||||
// This simulates a transition after some time (purely visual for the demo)
|
||||
setTimeout(() => {
|
||||
statusText.textContent = "Payment successful!";
|
||||
statusText.classList.remove('text-on-surface-variant');
|
||||
statusText.classList.add('text-success');
|
||||
|
||||
statusIcon.textContent = "check_circle";
|
||||
statusIcon.classList.remove('text-warning', 'animate-pulse-slow');
|
||||
statusIcon.classList.add('text-success');
|
||||
}, 8000);
|
||||
</script>
|
||||
<!-- ui-nav -->
|
||||
<div id="__sb_nav" style="position:fixed;left:16px;bottom:16px;z-index:9999;background:#fff;border:1px solid #e2e8f0;padding:8px 10px;border-radius:8px;box-shadow:0 6px 24px rgba(15,23,42,0.12);font-family:Inter,Arial,sans-serif;font-size:12px;line-height:1.4">
|
||||
<a href="/ui" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">UI Catalog</a>
|
||||
<a href="/ui/hub" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">Hub</a>
|
||||
<a href="/ui/admin-login" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">Admin Login</a>
|
||||
<a href="/ui/merchant-login" style="margin-right:8px;color:#2563eb;text-decoration:none;font-weight:600">Merchant Login</a>
|
||||
<a href="/ui/admin-dashboard-overview" style="margin-right:0;color:#2563eb;text-decoration:none;font-weight:600">Dashboard</a>
|
||||
</div>
|
||||
'
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user