Repository navigation
Expand file tree
/
Copy pathcode.html
More file actions
473 lines (457 loc) · 26.9 KB
/
Copy pathcode.html
File metadata and controls
473 lines (457 loc) · 26.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
<!DOCTYPE html>
<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Niva Bupa ReAssure 3.0 | Auto-Adjudication Copilot</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0&display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"surface": "#ffffff",
"surface-dim": "#f4f7f8",
"surface-container-highest": "#e5e9ea",
"on-secondary-fixed": "#001e2b",
"on-secondary-fixed-variant": "#294b5c",
"inverse-surface": "#2c3132",
"primary-container": "#00b0f6",
"secondary": "#416375",
"secondary-container": "#c4e7fd",
"outline-variant": "#e2e8f0",
"tertiary-fixed": "#ffddb1",
"on-surface-variant": "#64748b",
"error-container": "#ffdad6",
"on-background": "#0f172a",
"secondary-fixed": "#c4e7fd",
"primary-fixed-dim": "#86cfff",
"on-surface": "#0f172a",
"on-error": "#ffffff",
"surface-bright": "#ffffff",
"surface-container-lowest": "#ffffff",
"inverse-on-surface": "#edf1f2",
"outline": "#cbd5e1",
"on-secondary": "#ffffff",
"secondary-fixed-dim": "#a9cbe0",
"inverse-primary": "#86cfff",
"surface-container-high": "#f1f5f9",
"on-error-container": "#93000a",
"tertiary-container": "#de9700",
"surface-container": "#f8fafc",
"on-tertiary-fixed": "#291800",
"on-tertiary-container": "#523500",
"on-tertiary-fixed-variant": "#624000",
"error": "#ba1a1a",
"surface-container-low": "#ffffff",
"on-primary-fixed-variant": "#004c6d",
"on-primary-container": "#0369a1",
"on-primary": "#ffffff",
"surface-variant": "#f1f5f9",
"primary-fixed": "#c7e7ff",
"surface-tint": "#0284c7",
"on-secondary-container": "#0f172a",
"on-primary-fixed": "#001e2e",
"primary": "#0284c7",
"tertiary": "#815600",
"tertiary-fixed-dim": "#ffba4a",
"on-tertiary": "#ffffff",
"background": "#f4f7f8"
},
"borderRadius": {
"DEFAULT": "0.5rem",
"lg": "1rem",
"xl": "1.5rem",
"2xl": "2rem",
"full": "9999px"
},
"spacing": {
"lg": "24px",
"container-padding": "32px",
"sm": "12px",
"gutter": "32px",
"base": "8px",
"xl": "32px",
"xs": "4px",
"md": "16px"
},
"fontFamily": {
"display-lg": ["Rubik", "sans-serif"],
"body-sm": ["Hanken Grotesk", "sans-serif"],
"data-mono": ["JetBrains Mono", "monospace"],
"label-caps": ["Hanken Grotesk", "sans-serif"],
"headline-md": ["Rubik", "sans-serif"],
"body-md": ["Hanken Grotesk", "sans-serif"],
"title-sm": ["Rubik", "sans-serif"]
},
"fontSize": {
"display-lg": ["28px", {"lineHeight": "36px", "letterSpacing": "-0.02em", "fontWeight": "600"}],
"body-sm": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
"data-mono": ["14px", {"lineHeight": "20px", "fontWeight": "500"}],
"label-caps": ["12px", {"lineHeight": "16px", "letterSpacing": "0.06em", "fontWeight": "600"}],
"headline-md": ["24px", {"lineHeight": "32px", "fontWeight": "500"}],
"body-md": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
"title-sm": ["18px", {"lineHeight": "26px", "fontWeight": "500"}]
},
backgroundImage: {
'gradient-surface': 'linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)',
'gradient-primary': 'linear-gradient(135deg, #00b0f6 0%, #0284c7 100%)'
},
boxShadow: {
'soft': '0 8px 30px rgba(0, 0, 0, 0.04)',
'card': '0 4px 20px -2px rgba(15, 23, 42, 0.05)',
'glow': '0 0 20px rgba(0, 176, 246, 0.2)'
}
}
}
}
</script>
<style>
body { background-color: #f4f7f8; color: #0f172a; font-family: 'Hanken Grotesk', sans-serif; -webkit-font-smoothing: antialiased; }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 10px; }
.copilot-glow { box-shadow: 0 10px 40px -10px rgba(0, 176, 246, 0.15); }
.ai-pulse-bar {
height: 3px;
background: linear-gradient(90deg, transparent, #00b0f6, #0284c7, transparent);
background-size: 200% 100%;
animation: pulse 1.5s infinite linear;
}
@keyframes pulse { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.waterfall-segment { transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); }
.scan-item { opacity: 0; transform: translateY(8px); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.scan-item.active { opacity: 1; transform: translateY(0); }
.decision-reveal { animation: slideUpFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
@keyframes slideUpFade { from { transform: translateY(15px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; }
.material-symbols-outlined.filled { font-variation-settings: 'FILL' 1, 'wght' 300; }
/* Sidebar transition */
#sidebar { transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
#main-content { transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.sidebar-text { transition: opacity 0.2s ease, visibility 0.2s ease; }
.sidebar-collapsed .sidebar-text { opacity: 0; visibility: hidden; width: 0; }
.sidebar-collapsed { width: 80px !important; }
.sidebar-collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.content-expanded { margin-left: 80px !important; }
</style>
</head>
<body class="overflow-hidden bg-surface-dim">
<!-- Top Navigation -->
<header class="flex justify-between items-center w-full px-container-padding h-20 bg-white/70 backdrop-blur-xl border-b border-outline-variant/30 fixed top-0 z-50 shadow-soft">
<div class="flex items-center gap-md">
<button class="p-2 hover:bg-surface-container-high rounded-full transition-colors text-on-surface-variant" onclick="toggleSidebar()">
<span class="material-symbols-outlined">menu</span>
</button>
<div class="flex items-center gap-sm ml-2">
<span class="material-symbols-outlined filled text-primary text-3xl">health_and_safety</span>
<span class="font-display-lg text-xl font-bold text-on-surface tracking-tight">ReAssure <span class="text-primary font-medium">Copilot</span></span>
</div>
</div>
<div class="flex items-center gap-lg">
<div class="flex items-center bg-surface-container/50 rounded-full px-2 py-1 border border-outline-variant/40">
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors material-symbols-outlined text-[22px]">search</button>
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors material-symbols-outlined text-[22px]">notifications</button>
<button class="p-2 text-on-surface-variant hover:text-primary transition-colors material-symbols-outlined text-[22px]">help</button>
</div>
<div class="h-10 w-10 rounded-full overflow-hidden border border-primary/20 shadow-sm ring-4 ring-primary/5">
<img alt="Dr. Aris" class="w-full h-full object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAo3jxEY86JRwmi6i58_fVqPIU8bffPVLL8LF_iAbEKO6vCaeMf2FSBq-nAZ6MkNaUa8q5wa3h5khHHG9GUVNpIqKouhEEFrW-l_KC5UEgqTLz3jCi4iEjXN9vpeDdJBddPI8d9lJZHzdg3ZnMuF_Mwnpnv2BTT_eGu9KHAonRRXZjs4-X2Jbv8acajT4_7eTo6k9BVfO27E86TCTq7udYH89fjgay0UpDpLDsB9X0oa5dkqk0DgU1aKJIgsQjCeSKyWj9iuvK6BA"/>
</div>
</div>
</header>
<!-- Sidebar -->
<aside class="flex flex-col h-screen py-lg bg-white/80 backdrop-blur-md border-r border-outline-variant/30 fixed left-0 top-20 w-64 z-40 shadow-soft" id="sidebar">
<nav class="flex-1 px-3 space-y-1 mt-sm">
<button class="nav-item flex items-center w-full px-4 py-3 gap-md bg-primary/5 text-primary font-semibold rounded-2xl transition-all">
<span class="material-symbols-outlined filled">dashboard</span>
<span class="font-body-md sidebar-text whitespace-nowrap">Ingestion Hub</span>
</button>
<button class="nav-item flex items-center w-full px-4 py-3 gap-md text-on-surface-variant hover:text-primary hover:bg-surface-container-high rounded-2xl transition-all">
<span class="material-symbols-outlined">folder_shared</span>
<span class="font-body-md sidebar-text whitespace-nowrap">Claim History</span>
</button>
<button class="nav-item flex items-center w-full px-4 py-3 gap-md text-on-surface-variant hover:text-primary hover:bg-surface-container-high rounded-2xl transition-all">
<span class="material-symbols-outlined">analytics</span>
<span class="font-body-md sidebar-text whitespace-nowrap">Performance</span>
</button>
</nav>
<div class="px-3 pb-32 space-y-1">
<button class="nav-item flex items-center gap-md w-full px-4 py-3 text-on-surface-variant hover:text-primary rounded-2xl hover:bg-surface-container-high transition-colors">
<span class="material-symbols-outlined">settings</span>
<span class="sidebar-text font-body-md whitespace-nowrap">Configuration</span>
</button>
<button class="nav-item flex items-center gap-md w-full px-4 py-3 text-on-surface-variant hover:text-error rounded-2xl hover:bg-error-container/20 transition-colors">
<span class="material-symbols-outlined">logout</span>
<span class="sidebar-text font-body-md whitespace-nowrap">Sign Out</span>
</button>
</div>
</aside>
<!-- Main Content Canvas -->
<main class="ml-64 mt-20 p-container-padding h-[calc(100vh-80px)] overflow-y-auto custom-scrollbar" id="main-content">
<div class="max-w-[1400px] mx-auto">
<header class="mb-xl">
<h1 class="font-display-lg text-3xl font-bold text-on-surface tracking-tight">Good morning, Dr. Aris</h1>
<p class="font-body-md text-on-surface-variant mt-1">Ready to adjudicate today's claims?</p>
</header>
<div class="grid grid-cols-12 gap-gutter">
<!-- Left Column: Ingestion & Hub -->
<section class="col-span-12 lg:col-span-5 flex flex-col gap-lg">
<!-- Scenario Selector -->
<div class="bg-white p-lg rounded-2xl shadow-card border border-outline-variant/30">
<h3 class="font-label-caps text-label-caps text-on-surface-variant mb-md opacity-70">CLAIM SELECTION</h3>
<div class="relative group">
<select class="w-full bg-surface-container-low border-none text-on-surface px-lg py-4 rounded-xl focus:ring-2 focus:ring-primary/50 outline-none appearance-none font-body-md transition-shadow group-hover:shadow-sm" id="scenarioSelector">
<option value="S001">MEM-9921 — Cataract Surgery Reimbursement</option>
<option value="S002">MEM-8822 — Emergency Cardiac Stenting</option>
<option value="S003">MEM-1120 — ACL Tear Reconstruction</option>
<option value="S004">MEM-9092 — Gastric Ulcer Multi-Day Stay</option>
<option value="S005">MEM-3342 — Maternity Benefit Pre-Auth</option>
</select>
<span class="material-symbols-outlined absolute right-lg top-1/2 -translate-y-1/2 pointer-events-none text-on-surface-variant">unfold_more</span>
</div>
</div>
<!-- Member Sync -->
<div class="bg-white p-lg rounded-2xl shadow-card border border-outline-variant/30">
<h3 class="font-label-caps text-label-caps text-on-surface-variant mb-md opacity-70">PATIENT VERIFICATION</h3>
<div class="flex gap-md">
<div class="relative flex-1 group">
<input class="w-full bg-surface-container-low border-none text-on-surface px-lg py-4 pl-12 rounded-xl focus:ring-2 focus:ring-primary/50 outline-none font-body-md transition-shadow group-hover:shadow-sm" placeholder="Member ID / Policy No..." type="text"/>
<span class="material-symbols-outlined absolute left-md top-1/2 -translate-y-1/2 text-on-surface-variant">search</span>
</div>
<button class="px-xl py-4 bg-white border border-outline-variant/50 text-primary font-semibold hover:border-primary/50 hover:bg-primary/5 transition-all rounded-xl shadow-sm">SYNC</button>
</div>
</div>
<!-- Form Accordions -->
<div class="space-y-md">
<!-- Policy Info -->
<div class="bg-white border border-outline-variant/30 rounded-2xl overflow-hidden shadow-card transition-all">
<button class="w-full px-lg py-5 flex justify-between items-center hover:bg-surface-container/50 transition-colors" onclick="toggleAccordion('policy-form')">
<span class="font-title-sm text-lg font-medium flex items-center gap-md text-on-surface">
<span class="material-symbols-outlined text-primary">verified_user</span>
Policy Governance
</span>
<span class="material-symbols-outlined text-on-surface-variant" id="icon-policy-form">expand_more</span>
</button>
<div class="px-lg pb-lg grid grid-cols-2 gap-lg" id="policy-form">
<div class="space-y-sm">
<label class="font-label-caps text-on-surface-variant text-[11px]">POLICY ID</label>
<div class="bg-surface-container-low p-3 rounded-xl font-data-mono text-sm text-on-surface font-medium border border-outline-variant/20">NB-REASSURE-2024-X</div>
</div>
<div class="space-y-sm">
<label class="font-label-caps text-on-surface-variant text-[11px]">RENEWAL DATE</label>
<div class="bg-surface-container-low p-3 rounded-xl font-data-mono text-sm text-on-surface font-medium border border-outline-variant/20">12 APR 2025</div>
</div>
</div>
</div>
<!-- Line Items -->
<div class="bg-white border border-outline-variant/30 rounded-2xl overflow-hidden shadow-card transition-all">
<button class="w-full px-lg py-5 flex justify-between items-center hover:bg-surface-container/50 transition-colors" onclick="toggleAccordion('line-items-form')">
<span class="font-title-sm text-lg font-medium flex items-center gap-md text-on-surface">
<span class="material-symbols-outlined text-primary">receipt_long</span>
Claim Line Items
</span>
<span class="material-symbols-outlined text-on-surface-variant" id="icon-line-items-form">expand_more</span>
</button>
<div class="px-lg pb-lg space-y-sm" id="line-items-form">
<div class="flex justify-between items-center bg-surface-container-low p-4 rounded-xl border border-outline-variant/20">
<span class="font-body-md text-on-surface">Room Rent (ICU)</span>
<span class="font-data-mono text-primary font-bold">₹ 45,000</span>
</div>
<div class="flex justify-between items-center bg-surface-container-low p-4 rounded-xl border border-outline-variant/20">
<span class="font-body-md text-on-surface">Surgeon Fees</span>
<span class="font-data-mono text-primary font-bold">₹ 1,20,000</span>
</div>
<div class="flex justify-between items-center bg-surface-container-low p-4 rounded-xl border border-outline-variant/20">
<span class="font-body-md text-on-surface">Medicines</span>
<span class="font-data-mono text-primary font-bold">₹ 34,250</span>
</div>
</div>
</div>
</div>
<!-- AI Copilot OCR -->
<div class="bg-white border-2 border-dashed border-primary/20 rounded-2xl p-xl flex flex-col items-center gap-md relative overflow-hidden copilot-glow shadow-card hover:border-primary/40 transition-colors">
<div class="w-16 h-16 bg-primary/5 rounded-2xl flex items-center justify-center mb-sm">
<span class="material-symbols-outlined text-primary text-4xl">document_scanner</span>
</div>
<div class="text-center">
<p class="font-title-sm text-on-surface font-bold text-lg">Discharge Summary Analysis</p>
<p class="font-body-md text-on-surface-variant text-sm mt-1">Drag hospital documents here</p>
</div>
<!-- Simulated OCR Progress -->
<div class="w-full max-w-xs h-2 bg-surface-container-high rounded-full overflow-hidden mt-sm">
<div class="h-full bg-gradient-primary w-0 transition-all duration-1000 ease-out rounded-full" id="ocrBar"></div>
</div>
<div class="hidden absolute top-0 left-0 w-full ai-pulse-bar" id="ocrPulse"></div>
</div>
<button class="w-full mt-auto px-xl py-5 bg-gradient-primary text-white font-bold rounded-2xl shadow-glow hover:brightness-105 hover:-translate-y-0.5 active:translate-y-0 transition-all duration-300 flex items-center justify-center gap-md relative z-10" id="adjBtn" onclick="startAdjudication()">
<span class="material-symbols-outlined filled">security_update_good</span>
<span class="tracking-wide uppercase text-sm">Initiate Adjudication</span>
</button>
</section>
<!-- Right Column: Telemetry & Financials -->
<section class="col-span-12 lg:col-span-7 flex flex-col gap-lg h-full max-h-[1000px]">
<!-- Control Header -->
<div class="flex justify-between items-center bg-white p-xl rounded-2xl border border-outline-variant/30 shadow-card relative overflow-hidden">
<div class="absolute -right-20 -top-20 w-64 h-64 bg-primary/5 rounded-full blur-3xl pointer-events-none"></div>
<div class="flex items-center gap-lg relative z-10">
<div class="w-14 h-14 rounded-2xl bg-primary/5 flex items-center justify-center border border-primary/10 shadow-inner">
<span class="material-symbols-outlined text-primary text-3xl">biotech</span>
</div>
<div>
<h2 class="font-headline-md text-on-surface text-xl font-bold">Live Scan Engine</h2>
<p class="font-body-md text-on-surface-variant text-sm mt-0.5">Continuous policy validation engine V3.0</p>
</div>
</div>
</div>
<!-- Telemetry Logs - Internal Scroll Area -->
<div class="flex-1 bg-white border border-outline-variant/30 rounded-2xl shadow-card relative flex flex-col min-h-0">
<div class="px-xl pt-lg pb-md border-b border-outline-variant/20 flex items-center justify-between">
<div class="text-on-surface-variant font-label-caps text-[11px] flex gap-md items-center">
<span class="material-symbols-outlined text-[16px]">memory</span>
CORE INITIALIZATION: REASSURE_ENGINE_3.0
</div>
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
</div>
<div class="flex-1 overflow-y-auto custom-scrollbar p-xl space-y-3" id="scanChecklist">
<!-- Checklist items will appear here -->
<div class="flex flex-col items-center justify-center h-full opacity-30 text-center py-xl">
<span class="material-symbols-outlined text-6xl mb-md">clinical_notes</span>
<p class="font-body-md">Engine idle. Ready for command.</p>
</div>
</div>
<!-- Decision Banner (Hidden) -->
<div class="hidden mx-xl mb-xl p-lg bg-primary/5 rounded-2xl flex flex-col items-center gap-md decision-reveal border border-primary/10" id="decisionBanner">
<div class="flex items-center gap-md text-primary">
<span class="material-symbols-outlined filled text-4xl">verified</span>
<h1 class="text-2xl font-display-lg font-bold tracking-tight text-on-surface">CLAIM APPROVED</h1>
</div>
<div class="grid grid-cols-3 gap-md w-full font-body-md text-sm text-center">
<div class="bg-white/70 p-3 rounded-xl border border-outline-variant/20">
<span class="block text-on-surface-variant font-label-caps text-[10px] mb-1">PROTOCOL</span>
<span class="font-bold text-on-surface">NIVA-X77</span>
</div>
<div class="bg-white/70 p-3 rounded-xl border border-outline-variant/20">
<span class="block text-on-surface-variant font-label-caps text-[10px] mb-1">LOCK</span>
<span class="text-primary font-bold">SECURED</span>
</div>
<div class="bg-white/70 p-3 rounded-xl border border-outline-variant/20">
<span class="block text-on-surface-variant font-label-caps text-[10px] mb-1">LATENCY</span>
<span class="font-bold text-on-surface">2.4s</span>
</div>
</div>
</div>
</div>
<!-- Financial Waterfall - Fixed at bottom -->
<div class="bg-white p-xl border border-outline-variant/30 rounded-2xl shadow-card space-y-xl mt-auto">
<div class="flex justify-between items-center">
<h3 class="font-label-caps text-on-surface-variant text-[11px]">FINANCIAL WATERFALL — INR (₹)</h3>
<span class="text-[10px] bg-surface-container-high px-2 py-0.5 rounded-full font-medium text-on-surface-variant">REAL-TIME CALC</span>
</div>
<div class="space-y-xl">
<!-- Waterfall Chart -->
<div class="relative h-10 w-full bg-surface-container-high/50 rounded-2xl flex overflow-hidden border border-outline-variant/20">
<div class="waterfall-segment h-full bg-gradient-primary" id="seg-base" style="width: 0%"></div>
<div class="waterfall-segment h-full bg-[#ffb74d]" id="seg-deduct" style="width: 0%"></div>
<div class="waterfall-segment h-full bg-[#4db6ac]" id="seg-copay" style="width: 0%"></div>
</div>
<!-- Detailed Values -->
<div class="grid grid-cols-4 gap-4">
<div class="flex flex-col gap-1 border-l-2 border-primary/40 pl-3">
<span class="font-label-caps text-on-surface-variant text-[10px]">CLAIMED</span>
<span class="font-display-lg text-lg text-on-surface font-bold" id="val-claimed">₹ 1,99,250</span>
</div>
<div class="flex flex-col gap-1 border-l-2 border-[#ffb74d]/40 pl-3">
<span class="font-label-caps text-on-surface-variant text-[10px]">DEDUCTIBLE</span>
<span class="font-display-lg text-lg text-on-surface font-bold" id="val-room">₹ 12,400</span>
</div>
<div class="flex flex-col gap-1 border-l-2 border-[#4db6ac]/40 pl-3">
<span class="font-label-caps text-on-surface-variant text-[10px]">COPAY</span>
<span class="font-display-lg text-lg text-on-surface font-bold" id="val-copay">₹ 18,685</span>
</div>
<div class="flex flex-col gap-1 border-l-2 border-primary pl-3">
<span class="font-label-caps text-primary text-[10px] font-bold">PAYABLE</span>
<span class="font-display-lg text-xl text-primary font-bold" id="val-total">₹ 1,68,165</span>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</main>
<script>
function toggleSidebar() {
const sidebar = document.getElementById('sidebar');
const content = document.getElementById('main-content');
sidebar.classList.toggle('sidebar-collapsed');
content.classList.toggle('content-expanded');
}
function toggleAccordion(id) {
const el = document.getElementById(id);
const icon = document.getElementById('icon-' + id);
el.classList.toggle('hidden');
if (icon) {
icon.innerText = el.classList.contains('hidden') ? 'expand_more' : 'expand_less';
}
}
const scanSteps = [
{ label: "Policy Active Status Validation", status: "VERIFIED" },
{ label: "Waiting Period (Pre-existing) Analysis", status: "VERIFIED" },
{ label: "Sum Insured & ReAssure Balances Check", status: "VERIFIED" },
{ label: "Room Rent Eligibility vs Category", status: "ADJUSTED" },
{ label: "Treatment Protocol Compliance (GIPSA/PPH)", status: "VERIFIED" },
{ label: "Fraud & Waste Telemetry Scoring", status: "OPTIMAL" },
{ label: "AI Consensus Generation", status: "VERIFIED" },
{ label: "Member Communication Payload Ready", status: "VERIFIED" }
];
async function startAdjudication() {
const btn = document.getElementById('adjBtn');
const checklist = document.getElementById('scanChecklist');
const ocrBar = document.getElementById('ocrBar');
const ocrPulse = document.getElementById('ocrPulse');
const decisionBanner = document.getElementById('decisionBanner');
btn.disabled = true;
btn.classList.add('opacity-50', 'grayscale', 'cursor-not-allowed');
checklist.innerHTML = '';
decisionBanner.classList.add('hidden');
decisionBanner.style.opacity = '0';
ocrBar.style.width = '0%';
ocrPulse.classList.remove('hidden');
// Reset waterfall
document.getElementById('seg-base').style.width = '0%';
document.getElementById('seg-deduct').style.width = '0%';
document.getElementById('seg-copay').style.width = '0%';
ocrBar.style.width = '100%';
await new Promise(r => setTimeout(r, 1000));
ocrPulse.classList.add('hidden');
for (const step of scanSteps) {
const item = document.createElement('div');
item.className = 'scan-item flex justify-between items-center p-4 bg-surface-container-low rounded-2xl border border-outline-variant/30 shadow-sm';
const isSuccess = step.status === 'VERIFIED' || step.status === 'OPTIMAL';
const statusColor = isSuccess ? 'text-primary' : 'text-[#ffb74d]';
const icon = isSuccess ? 'check_circle' : 'info';
const iconClass = isSuccess ? 'filled' : '';
item.innerHTML = `
<div class="flex items-center gap-3">
<span class="material-symbols-outlined ${iconClass} ${statusColor} text-[22px]">${icon}</span>
<span class="font-body-md text-sm font-medium text-on-surface">${step.label}</span>
</div>
<span class="font-label-caps text-[10px] ${statusColor} bg-current/5 px-2 py-1 rounded-lg border border-current/10">${step.status}</span>
`;
checklist.appendChild(item);
setTimeout(() => item.classList.add('active'), 10);
await new Promise(r => setTimeout(r, 300));
checklist.scrollTop = checklist.scrollHeight;
}
decisionBanner.classList.remove('hidden');
// Waterfall animation
setTimeout(() => { document.getElementById('seg-base').style.width = '84%'; }, 100);
setTimeout(() => { document.getElementById('seg-deduct').style.width = '7%'; }, 500);
setTimeout(() => { document.getElementById('seg-copay').style.width = '9%'; }, 900);
btn.disabled = false;
btn.classList.remove('opacity-50', 'grayscale', 'cursor-not-allowed');
}
</script>
</body></html>