Hugging Face's logo

Spaces:
pedrod8
/
AB
Running

App Files Community
pedrod8 commited on
Commit
44c36ba
·
verified ·
1 Parent(s): 7e038a2

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1278 -19
index.html CHANGED
@@ -1,19 +1,1278 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Trustee Accountability Dashboard | AFCA Cases 12-25-223390 & 12-25-238396</title>
7
+ <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:wght@400;600&display=swap" rel="stylesheet">
11
+ <style>
12
+ *, *::before, *::after {
13
+ box-sizing: border-box;
14
+ margin: 0;
15
+ padding: 0;
16
+ }
17
+
18
+ :root {
19
+ --bg-primary: #ffffff;
20
+ --bg-secondary: #f8fafc;
21
+ --bg-tertiary: #f1f5f9;
22
+ --text-primary: #1e293b;
23
+ --text-secondary: #475569;
24
+ --text-muted: #94a3b8;
25
+ --border-light: #e2e8f0;
26
+ --border-medium: #cbd5e1;
27
+ --accent-red: #dc2626;
28
+ --accent-red-light: #fef2f2;
29
+ --accent-orange: #ea580c;
30
+ --accent-orange-light: #fff7ed;
31
+ --accent-green: #16a34a;
32
+ --accent-green-light: #f0fdf4;
33
+ --accent-blue: #2563eb;
34
+ --accent-blue-light: #eff6ff;
35
+ --accent-yellow: #ca8a04;
36
+ --accent-yellow-light: #fefce8;
37
+ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
38
+ --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
39
+ --radius-sm: 6px;
40
+ --radius-md: 10px;
41
+ --radius-lg: 14px;
42
+ }
43
+
44
+ body {
45
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
46
+ background: var(--bg-secondary);
47
+ color: var(--text-primary);
48
+ line-height: 1.6;
49
+ font-size: 15px;
50
+ -webkit-font-smoothing: antialiased;
51
+ }
52
+
53
+ .container {
54
+ max-width: 1200px;
55
+ margin: 0 auto;
56
+ padding: 32px 24px;
57
+ }
58
+
59
+ /* Header */
60
+ header {
61
+ text-align: center;
62
+ margin-bottom: 40px;
63
+ }
64
+
65
+ .case-badge {
66
+ display: inline-block;
67
+ padding: 6px 14px;
68
+ background: var(--accent-red-light);
69
+ border: 1px solid #fecaca;
70
+ border-radius: 20px;
71
+ font-size: 12px;
72
+ font-weight: 600;
73
+ color: var(--accent-red);
74
+ letter-spacing: 0.02em;
75
+ margin-bottom: 16px;
76
+ }
77
+
78
+ h1 {
79
+ font-family: 'Source Serif 4', Georgia, serif;
80
+ font-size: 2.25rem;
81
+ font-weight: 600;
82
+ color: var(--text-primary);
83
+ margin-bottom: 8px;
84
+ letter-spacing: -0.02em;
85
+ }
86
+
87
+ .subtitle {
88
+ color: var(--text-secondary);
89
+ font-size: 1rem;
90
+ margin-bottom: 24px;
91
+ }
92
+
93
+ .quote-banner {
94
+ background: var(--bg-primary);
95
+ border: 1px solid var(--border-light);
96
+ border-left: 4px solid var(--accent-orange);
97
+ border-radius: var(--radius-md);
98
+ padding: 20px 24px;
99
+ max-width: 720px;
100
+ margin: 0 auto;
101
+ box-shadow: var(--shadow-sm);
102
+ }
103
+
104
+ .quote-banner blockquote {
105
+ font-family: 'Source Serif 4', Georgia, serif;
106
+ font-size: 1.1rem;
107
+ color: var(--text-primary);
108
+ font-style: italic;
109
+ margin-bottom: 8px;
110
+ }
111
+
112
+ .quote-banner .attribution {
113
+ font-size: 13px;
114
+ color: var(--text-muted);
115
+ }
116
+
117
+ /* Navigation */
118
+ nav {
119
+ display: flex;
120
+ justify-content: center;
121
+ gap: 8px;
122
+ margin-bottom: 32px;
123
+ flex-wrap: wrap;
124
+ }
125
+
126
+ .nav-btn {
127
+ padding: 10px 18px;
128
+ background: var(--bg-primary);
129
+ border: 1px solid var(--border-light);
130
+ border-radius: var(--radius-sm);
131
+ color: var(--text-secondary);
132
+ font-size: 14px;
133
+ font-weight: 500;
134
+ cursor: pointer;
135
+ transition: all 0.15s ease;
136
+ display: flex;
137
+ align-items: center;
138
+ gap: 6px;
139
+ }
140
+
141
+ .nav-btn:hover {
142
+ background: var(--bg-tertiary);
143
+ border-color: var(--border-medium);
144
+ }
145
+
146
+ .nav-btn.active {
147
+ background: var(--text-primary);
148
+ border-color: var(--text-primary);
149
+ color: white;
150
+ }
151
+
152
+ /* Cards */
153
+ .card {
154
+ background: var(--bg-primary);
155
+ border: 1px solid var(--border-light);
156
+ border-radius: var(--radius-lg);
157
+ padding: 24px;
158
+ box-shadow: var(--shadow-sm);
159
+ }
160
+
161
+ .card-title {
162
+ font-size: 14px;
163
+ font-weight: 600;
164
+ color: var(--text-secondary);
165
+ margin-bottom: 16px;
166
+ display: flex;
167
+ align-items: center;
168
+ gap: 8px;
169
+ }
170
+
171
+ /* Stats Grid */
172
+ .stats-grid {
173
+ display: grid;
174
+ grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
175
+ gap: 16px;
176
+ margin-bottom: 24px;
177
+ }
178
+
179
+ .stat-card {
180
+ background: var(--bg-primary);
181
+ border: 1px solid var(--border-light);
182
+ border-radius: var(--radius-md);
183
+ padding: 20px;
184
+ text-align: center;
185
+ transition: all 0.15s ease;
186
+ }
187
+
188
+ .stat-card:hover {
189
+ box-shadow: var(--shadow-md);
190
+ }
191
+
192
+ .stat-card.critical {
193
+ background: var(--accent-red-light);
194
+ border-color: #fecaca;
195
+ }
196
+
197
+ .stat-card .icon {
198
+ font-size: 24px;
199
+ margin-bottom: 8px;
200
+ }
201
+
202
+ .stat-card .value {
203
+ font-size: 2rem;
204
+ font-weight: 700;
205
+ color: var(--text-primary);
206
+ line-height: 1.2;
207
+ }
208
+
209
+ .stat-card.critical .value {
210
+ color: var(--accent-red);
211
+ }
212
+
213
+ .stat-card .label {
214
+ font-size: 12px;
215
+ color: var(--text-muted);
216
+ margin-top: 4px;
217
+ }
218
+
219
+ /* Charts Grid */
220
+ .charts-grid {
221
+ display: grid;
222
+ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
223
+ gap: 24px;
224
+ margin-bottom: 24px;
225
+ }
226
+
227
+ .chart-container {
228
+ height: 280px;
229
+ }
230
+
231
+ /* Imbalance Banner */
232
+ .imbalance-banner {
233
+ background: linear-gradient(135deg, var(--accent-red-light) 0%, #fff 100%);
234
+ border: 1px solid #fecaca;
235
+ border-radius: var(--radius-lg);
236
+ padding: 40px;
237
+ text-align: center;
238
+ margin-bottom: 24px;
239
+ }
240
+
241
+ .imbalance-banner h3 {
242
+ color: var(--accent-red);
243
+ font-size: 14px;
244
+ font-weight: 600;
245
+ letter-spacing: 0.05em;
246
+ margin-bottom: 24px;
247
+ }
248
+
249
+ .imbalance-stats {
250
+ display: flex;
251
+ justify-content: center;
252
+ align-items: center;
253
+ gap: 32px;
254
+ flex-wrap: wrap;
255
+ }
256
+
257
+ .imbalance-stat .number {
258
+ font-size: 3.5rem;
259
+ font-weight: 700;
260
+ line-height: 1;
261
+ }
262
+
263
+ .imbalance-stat .label {
264
+ font-size: 13px;
265
+ color: var(--text-secondary);
266
+ margin-top: 4px;
267
+ }
268
+
269
+ .imbalance-arrow {
270
+ font-size: 2rem;
271
+ color: var(--text-muted);
272
+ }
273
+
274
+ /* Email List */
275
+ .email-filters {
276
+ display: flex;
277
+ gap: 8px;
278
+ margin-bottom: 16px;
279
+ flex-wrap: wrap;
280
+ }
281
+
282
+ .filter-btn {
283
+ padding: 8px 14px;
284
+ background: var(--bg-tertiary);
285
+ border: 1px solid var(--border-light);
286
+ border-radius: var(--radius-sm);
287
+ font-size: 13px;
288
+ color: var(--text-secondary);
289
+ cursor: pointer;
290
+ transition: all 0.15s ease;
291
+ }
292
+
293
+ .filter-btn:hover {
294
+ background: var(--bg-primary);
295
+ }
296
+
297
+ .filter-btn.active {
298
+ background: var(--accent-blue-light);
299
+ border-color: #bfdbfe;
300
+ color: var(--accent-blue);
301
+ }
302
+
303
+ .email-list {
304
+ display: flex;
305
+ flex-direction: column;
306
+ gap: 12px;
307
+ }
308
+
309
+ .email-item {
310
+ background: var(--bg-primary);
311
+ border: 1px solid var(--border-light);
312
+ border-radius: var(--radius-md);
313
+ padding: 16px 20px;
314
+ cursor: pointer;
315
+ transition: all 0.15s ease;
316
+ border-left: 4px solid transparent;
317
+ }
318
+
319
+ .email-item:hover {
320
+ box-shadow: var(--shadow-md);
321
+ }
322
+
323
+ .email-item.no-response {
324
+ border-left-color: var(--accent-red);
325
+ }
326
+
327
+ .email-item.generic {
328
+ border-left-color: var(--accent-yellow);
329
+ }
330
+
331
+ .email-item.received {
332
+ border-left-color: var(--accent-green);
333
+ background: var(--accent-green-light);
334
+ }
335
+
336
+ .email-item.crisis {
337
+ background: var(--accent-red-light);
338
+ }
339
+
340
+ .email-header {
341
+ display: flex;
342
+ justify-content: space-between;
343
+ align-items: flex-start;
344
+ gap: 16px;
345
+ margin-bottom: 8px;
346
+ }
347
+
348
+ .email-subject {
349
+ font-weight: 600;
350
+ color: var(--text-primary);
351
+ font-size: 14px;
352
+ flex: 1;
353
+ }
354
+
355
+ .email-date {
356
+ font-size: 13px;
357
+ color: var(--text-muted);
358
+ white-space: nowrap;
359
+ }
360
+
361
+ .email-meta {
362
+ font-size: 13px;
363
+ color: var(--text-secondary);
364
+ margin-bottom: 10px;
365
+ }
366
+
367
+ .email-tags {
368
+ display: flex;
369
+ gap: 6px;
370
+ flex-wrap: wrap;
371
+ }
372
+
373
+ .tag {
374
+ font-size: 11px;
375
+ padding: 3px 8px;
376
+ border-radius: 4px;
377
+ font-weight: 500;
378
+ }
379
+
380
+ .tag.status-none {
381
+ background: var(--accent-red-light);
382
+ color: var(--accent-red);
383
+ }
384
+
385
+ .tag.status-generic {
386
+ background: var(--accent-yellow-light);
387
+ color: var(--accent-yellow);
388
+ }
389
+
390
+ .tag.status-received {
391
+ background: var(--accent-green-light);
392
+ color: var(--accent-green);
393
+ }
394
+
395
+ .tag.category {
396
+ background: var(--bg-tertiary);
397
+ color: var(--text-secondary);
398
+ }
399
+
400
+ .tag.urgent {
401
+ background: var(--accent-orange-light);
402
+ color: var(--accent-orange);
403
+ }
404
+
405
+ .tag.crisis {
406
+ background: var(--accent-red);
407
+ color: white;
408
+ }
409
+
410
+ .email-quote {
411
+ margin-top: 12px;
412
+ padding: 12px 16px;
413
+ background: var(--bg-secondary);
414
+ border-left: 3px solid var(--accent-orange);
415
+ border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
416
+ font-family: 'Source Serif 4', Georgia, serif;
417
+ font-style: italic;
418
+ color: var(--text-secondary);
419
+ font-size: 14px;
420
+ display: none;
421
+ }
422
+
423
+ .email-item.expanded .email-quote {
424
+ display: block;
425
+ }
426
+
427
+ /* Timeline */
428
+ .timeline {
429
+ position: relative;
430
+ padding-left: 28px;
431
+ }
432
+
433
+ .timeline::before {
434
+ content: '';
435
+ position: absolute;
436
+ left: 8px;
437
+ top: 0;
438
+ bottom: 0;
439
+ width: 2px;
440
+ background: linear-gradient(to bottom, var(--accent-red), var(--accent-orange), var(--accent-blue));
441
+ }
442
+
443
+ .timeline-item {
444
+ position: relative;
445
+ margin-bottom: 16px;
446
+ padding-left: 20px;
447
+ }
448
+
449
+ .timeline-dot {
450
+ position: absolute;
451
+ left: -20px;
452
+ top: 8px;
453
+ width: 10px;
454
+ height: 10px;
455
+ border-radius: 50%;
456
+ background: var(--accent-red);
457
+ border: 2px solid var(--bg-secondary);
458
+ }
459
+
460
+ .timeline-dot.received {
461
+ background: var(--accent-green);
462
+ }
463
+
464
+ .timeline-dot.afca {
465
+ background: var(--accent-blue);
466
+ }
467
+
468
+ .timeline-content {
469
+ background: var(--bg-primary);
470
+ border: 1px solid var(--border-light);
471
+ border-radius: var(--radius-md);
472
+ padding: 14px 18px;
473
+ }
474
+
475
+ .timeline-header {
476
+ display: flex;
477
+ justify-content: space-between;
478
+ align-items: flex-start;
479
+ gap: 12px;
480
+ margin-bottom: 6px;
481
+ }
482
+
483
+ .timeline-title {
484
+ font-size: 14px;
485
+ font-weight: 500;
486
+ color: var(--text-primary);
487
+ }
488
+
489
+ .timeline-date {
490
+ font-size: 12px;
491
+ color: var(--text-muted);
492
+ white-space: nowrap;
493
+ }
494
+
495
+ .timeline-meta {
496
+ font-size: 12px;
497
+ color: var(--text-muted);
498
+ }
499
+
500
+ /* Financial */
501
+ .financial-hero {
502
+ background: linear-gradient(135deg, var(--accent-red-light) 0%, #fff 100%);
503
+ border: 1px solid #fecaca;
504
+ border-radius: var(--radius-lg);
505
+ padding: 48px;
506
+ text-align: center;
507
+ margin-bottom: 24px;
508
+ }
509
+
510
+ .financial-hero h2 {
511
+ font-size: 14px;
512
+ font-weight: 600;
513
+ color: var(--accent-red);
514
+ letter-spacing: 0.05em;
515
+ margin-bottom: 12px;
516
+ }
517
+
518
+ .financial-hero .amount {
519
+ font-family: 'Source Serif 4', Georgia, serif;
520
+ font-size: 4rem;
521
+ font-weight: 700;
522
+ color: var(--accent-red);
523
+ line-height: 1;
524
+ margin-bottom: 8px;
525
+ }
526
+
527
+ .financial-hero .context {
528
+ color: var(--text-secondary);
529
+ font-size: 15px;
530
+ }
531
+
532
+ .financial-grid {
533
+ display: grid;
534
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
535
+ gap: 20px;
536
+ margin-bottom: 24px;
537
+ }
538
+
539
+ .financial-card {
540
+ background: var(--bg-primary);
541
+ border: 1px solid var(--border-light);
542
+ border-radius: var(--radius-md);
543
+ padding: 24px;
544
+ }
545
+
546
+ .financial-card.correct {
547
+ border-color: #bbf7d0;
548
+ background: var(--accent-green-light);
549
+ }
550
+
551
+ .financial-card.wrong {
552
+ border-color: #fecaca;
553
+ background: var(--accent-red-light);
554
+ }
555
+
556
+ .financial-card.shortfall {
557
+ border-color: #fed7aa;
558
+ background: var(--accent-orange-light);
559
+ }
560
+
561
+ .financial-card .label {
562
+ font-size: 12px;
563
+ font-weight: 600;
564
+ color: var(--text-muted);
565
+ margin-bottom: 8px;
566
+ letter-spacing: 0.02em;
567
+ }
568
+
569
+ .financial-card .value {
570
+ font-size: 1.75rem;
571
+ font-weight: 700;
572
+ margin-bottom: 4px;
573
+ }
574
+
575
+ .financial-card.correct .value { color: var(--accent-green); }
576
+ .financial-card.wrong .value { color: var(--accent-red); }
577
+ .financial-card.shortfall .value { color: var(--accent-orange); }
578
+
579
+ .financial-card .desc {
580
+ font-size: 13px;
581
+ color: var(--text-secondary);
582
+ }
583
+
584
+ /* Proof Box */
585
+ .proof-box {
586
+ background: var(--bg-primary);
587
+ border: 1px solid var(--border-light);
588
+ border-radius: var(--radius-lg);
589
+ padding: 24px;
590
+ }
591
+
592
+ .proof-box h3 {
593
+ font-size: 15px;
594
+ font-weight: 600;
595
+ color: var(--text-primary);
596
+ margin-bottom: 16px;
597
+ }
598
+
599
+ .proof-content {
600
+ background: var(--bg-tertiary);
601
+ border-radius: var(--radius-md);
602
+ padding: 20px;
603
+ font-family: 'SF Mono', 'Fira Code', monospace;
604
+ font-size: 14px;
605
+ line-height: 1.8;
606
+ }
607
+
608
+ .proof-content .comment {
609
+ color: var(--text-muted);
610
+ }
611
+
612
+ .proof-content .highlight {
613
+ background: var(--accent-green-light);
614
+ padding: 8px 12px;
615
+ border-radius: var(--radius-sm);
616
+ display: inline-block;
617
+ margin: 8px 0;
618
+ }
619
+
620
+ .proof-content .error {
621
+ background: var(--accent-red-light);
622
+ padding: 8px 12px;
623
+ border-radius: var(--radius-sm);
624
+ display: inline-block;
625
+ margin: 8px 0;
626
+ }
627
+
628
+ .proof-conclusion {
629
+ margin-top: 16px;
630
+ padding: 12px 16px;
631
+ background: var(--accent-red-light);
632
+ border-radius: var(--radius-sm);
633
+ color: var(--accent-red);
634
+ font-weight: 600;
635
+ text-align: center;
636
+ font-size: 14px;
637
+ }
638
+
639
+ /* Evidence Section */
640
+ .evidence-section {
641
+ margin-bottom: 20px;
642
+ padding: 20px;
643
+ border-radius: var(--radius-md);
644
+ }
645
+
646
+ .evidence-section.success {
647
+ background: var(--accent-green-light);
648
+ border: 1px solid #bbf7d0;
649
+ }
650
+
651
+ .evidence-section.warning {
652
+ background: var(--accent-yellow-light);
653
+ border: 1px solid #fde68a;
654
+ }
655
+
656
+ .evidence-section.error {
657
+ background: var(--accent-red-light);
658
+ border: 1px solid #fecaca;
659
+ }
660
+
661
+ .evidence-section h4 {
662
+ font-size: 14px;
663
+ font-weight: 600;
664
+ margin-bottom: 12px;
665
+ }
666
+
667
+ .evidence-section.success h4 { color: var(--accent-green); }
668
+ .evidence-section.warning h4 { color: var(--accent-yellow); }
669
+ .evidence-section.error h4 { color: var(--accent-red); }
670
+
671
+ .evidence-section ul {
672
+ margin: 0;
673
+ padding-left: 20px;
674
+ }
675
+
676
+ .evidence-section li {
677
+ margin-bottom: 6px;
678
+ font-size: 14px;
679
+ color: var(--text-secondary);
680
+ }
681
+
682
+ /* Quotes List */
683
+ .quotes-list {
684
+ display: flex;
685
+ flex-direction: column;
686
+ gap: 12px;
687
+ }
688
+
689
+ .quote-item {
690
+ padding: 16px 20px;
691
+ background: var(--bg-secondary);
692
+ border-left: 3px solid var(--accent-orange);
693
+ border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
694
+ }
695
+
696
+ .quote-item blockquote {
697
+ font-family: 'Source Serif 4', Georgia, serif;
698
+ font-style: italic;
699
+ color: var(--text-primary);
700
+ margin-bottom: 8px;
701
+ font-size: 15px;
702
+ }
703
+
704
+ .quote-item .meta {
705
+ font-size: 12px;
706
+ color: var(--text-muted);
707
+ }
708
+
709
+ /* Footer */
710
+ footer {
711
+ margin-top: 48px;
712
+ padding-top: 24px;
713
+ border-top: 1px solid var(--border-light);
714
+ text-align: center;
715
+ }
716
+
717
+ footer p {
718
+ font-size: 13px;
719
+ color: var(--text-muted);
720
+ margin-bottom: 4px;
721
+ }
722
+
723
+ /* Tab Content */
724
+ .tab-content {
725
+ display: none;
726
+ }
727
+
728
+ .tab-content.active {
729
+ display: block;
730
+ }
731
+
732
+ /* Responsive */
733
+ @media (max-width: 768px) {
734
+ .container {
735
+ padding: 20px 16px;
736
+ }
737
+
738
+ h1 {
739
+ font-size: 1.75rem;
740
+ }
741
+
742
+ .charts-grid {
743
+ grid-template-columns: 1fr;
744
+ }
745
+
746
+ .imbalance-stats {
747
+ gap: 20px;
748
+ }
749
+
750
+ .imbalance-stat .number {
751
+ font-size: 2.5rem;
752
+ }
753
+ }
754
+ </style>
755
+ </head>
756
+ <body>
757
+ <div class="container">
758
+ <!-- Header -->
759
+ <header>
760
+ <div class="case-badge">AFCA CASES 12-25-223390 & 12-25-238396</div>
761
+ <h1>Trustee Accountability Dashboard</h1>
762
+ <p class="subtitle">Annette Bochniak v Australian Retirement Trust — Evidence of Systematic Non-Engagement</p>
763
+
764
+ <div class="quote-banner">
765
+ <blockquote id="rotating-quote">"I can't seemingly get a response from Tim or yourself?"</blockquote>
766
+ <div class="attribution" id="quote-attribution">📅 Nov 6 — After weeks of silence</div>
767
+ </div>
768
+ </header>
769
+
770
+ <!-- Navigation -->
771
+ <nav>
772
+ <button class="nav-btn active" data-tab="overview">📊 Overview</button>
773
+ <button class="nav-btn" data-tab="emails">📧 Email Trail</button>
774
+ <button class="nav-btn" data-tab="timeline">📅 Timeline</button>
775
+ <button class="nav-btn" data-tab="financial">💰 Financial Impact</button>
776
+ <button class="nav-btn" data-tab="evidence">📋 Key Evidence</button>
777
+ </nav>
778
+
779
+ <!-- Overview Tab -->
780
+ <div id="overview" class="tab-content active">
781
+ <!-- Stats Grid -->
782
+ <div class="stats-grid">
783
+ <div class="stat-card">
784
+ <div class="icon">📤</div>
785
+ <div class="value">20</div>
786
+ <div class="label">Emails to Trustee</div>
787
+ </div>
788
+ <div class="stat-card">
789
+ <div class="icon">📥</div>
790
+ <div class="value">3</div>
791
+ <div class="label">Replies Received</div>
792
+ </div>
793
+ <div class="stat-card critical">
794
+ <div class="icon">🔇</div>
795
+ <div class="value">17</div>
796
+ <div class="label">No Response</div>
797
+ </div>
798
+ <div class="stat-card critical">
799
+ <div class="icon">📉</div>
800
+ <div class="value">15%</div>
801
+ <div class="label">Reply Rate</div>
802
+ </div>
803
+ <div class="stat-card critical" style="background: var(--accent-orange-light); border-color: #fed7aa;">
804
+ <div class="icon">📭</div>
805
+ <div class="value" style="color: var(--accent-orange);">12+</div>
806
+ <div class="label">Days Since Nov 28</div>
807
+ </div>
808
+ <div class="stat-card critical">
809
+ <div class="icon">🎄</div>
810
+ <div class="value">2</div>
811
+ <div class="label">Christmases Affected</div>
812
+ </div>
813
+ </div>
814
+
815
+ <!-- Charts -->
816
+ <div class="charts-grid">
817
+ <div class="card">
818
+ <div class="card-title">📊 Weekly Communication Volume</div>
819
+ <div id="volume-chart" class="chart-container"></div>
820
+ </div>
821
+ <div class="card">
822
+ <div class="card-title">📉 Response Quality Breakdown</div>
823
+ <div id="quality-chart" class="chart-container"></div>
824
+ </div>
825
+ </div>
826
+
827
+ <!-- Post Nov 28 Silence Alert -->
828
+ <div class="imbalance-banner" style="background: linear-gradient(135deg, #fef3c7 0%, #fff 100%); border-color: #fde68a; margin-bottom: 24px;">
829
+ <h3 style="color: var(--accent-orange);">🔕 SILENCE SINCE NOVEMBER 28TH</h3>
830
+ <p style="color: var(--text-secondary); max-width: 700px; margin: 0 auto 20px; font-size: 15px;">
831
+ After the Trustee said they were <em>"committed to reviewing"</em> on Nov 28, Nathan sent <strong>2 detailed emails</strong> (Dec 2 & Dec 7) requesting simple confirmations. <strong>Zero response.</strong>
832
+ </p>
833
+ <div class="imbalance-stats">
834
+ <div class="imbalance-stat">
835
+ <div class="number" style="color: var(--accent-orange)">12</div>
836
+ <div class="label">Days of Silence</div>
837
+ </div>
838
+ <div class="imbalance-stat">
839
+ <div class="number" style="color: var(--accent-blue)">4</div>
840
+ <div class="label">Simple Confirmations Requested</div>
841
+ </div>
842
+ <div class="imbalance-stat">
843
+ <div class="number" style="color: var(--accent-red)">0</div>
844
+ <div class="label">Responses</div>
845
+ </div>
846
+ </div>
847
+ </div>
848
+
849
+ <!-- Imbalance Banner -->
850
+ <div class="imbalance-banner">
851
+ <h3>⚠️ COMMUNICATION IMBALANCE</h3>
852
+ <div class="imbalance-stats">
853
+ <div class="imbalance-stat">
854
+ <div class="number" style="color: var(--accent-blue)">20</div>
855
+ <div class="label">Emails Sent</div>
856
+ </div>
857
+ <div class="imbalance-arrow">→</div>
858
+ <div class="imbalance-stat">
859
+ <div class="number" style="color: var(--accent-red)">3</div>
860
+ <div class="label">Replies</div>
861
+ </div>
862
+ <div class="imbalance-arrow">=</div>
863
+ <div class="imbalance-stat">
864
+ <div class="number" style="color: var(--accent-orange)">85%</div>
865
+ <div class="label">IGNORED</div>
866
+ </div>
867
+ </div>
868
+ </div>
869
+ </div>
870
+
871
+ <!-- Emails Tab -->
872
+ <div id="emails" class="tab-content">
873
+ <div class="card">
874
+ <div class="email-filters">
875
+ <button class="filter-btn active" data-filter="all">All (23)</button>
876
+ <button class="filter-btn" data-filter="outbound">Sent to Trustee (20)</button>
877
+ <button class="filter-btn" data-filter="inbound">From Trustee (3)</button>
878
+ <button class="filter-btn" data-filter="urgent">Urgent (14)</button>
879
+ </div>
880
+ <div class="email-list" id="email-list"></div>
881
+ </div>
882
+ </div>
883
+
884
+ <!-- Timeline Tab -->
885
+ <div id="timeline" class="tab-content">
886
+ <div class="card">
887
+ <div class="card-title">📅 Complete Communication Timeline</div>
888
+ <div class="timeline" id="timeline-container"></div>
889
+ </div>
890
+ </div>
891
+
892
+ <!-- Financial Tab -->
893
+ <div id="financial" class="tab-content">
894
+ <div class="financial-hero">
895
+ <h2>💰 TOTAL DOCUMENTED FINANCIAL HARM</h2>
896
+ <div class="amount">$59,177</div>
897
+ <div class="context">Arrears ($53,798) + Interest ($5,380) over 12 months + 14 days — Growing at $4,315/month</div>
898
+ </div>
899
+
900
+ <!-- The 4 Simple Confirmations Box -->
901
+ <div class="card" style="margin-bottom: 24px; border-left: 4px solid var(--accent-orange);">
902
+ <div class="card-title" style="color: var(--accent-orange);">📋 The 4 "Non-Controversial" Confirmations Requested (Dec 7) — Still No Response</div>
903
+ <div style="display: grid; gap: 12px;">
904
+ <div style="padding: 14px 18px; background: var(--bg-secondary); border-radius: var(--radius-sm);">
905
+ <strong style="color: var(--text-primary);">1. Insured Salary Basis</strong>
906
+ <p style="color: var(--text-secondary); margin: 6px 0 0; font-size: 14px;">Confirm the correct basis is the non-modified DoE salary from before March 2025 amendments</p>
907
+ </div>
908
+ <div style="padding: 14px 18px; background: var(--bg-secondary); border-radius: var(--radius-sm);">
909
+ <strong style="color: var(--text-primary);">2. No Clawback</strong>
910
+ <p style="color: var(--text-secondary); margin: 6px 0 0; font-size: 14px;">Confirm review concerns underpayment only — no reduction of benefits already paid</p>
911
+ </div>
912
+ <div style="padding: 14px 18px; background: var(--bg-secondary); border-radius: var(--radius-sm);">
913
+ <strong style="color: var(--text-primary);">3. Arrears + Interest</strong>
914
+ <p style="color: var(--text-secondary); margin: 6px 0 0; font-size: 14px;">Confirm arrears will be paid and interest considered given two Christmas periods affected</p>
915
+ </div>
916
+ <div style="padding: 14px 18px; background: var(--bg-secondary); border-radius: var(--radius-sm);">
917
+ <strong style="color: var(--text-primary);">4. Indicative Timeframe</strong>
918
+ <p style="color: var(--text-secondary); margin: 6px 0 0; font-size: 14px;">Provide realistic timeframe — will this be resolved before Christmas?</p>
919
+ </div>
920
+ </div>
921
+ <p style="margin-top: 16px; padding: 12px 16px; background: var(--accent-red-light); border-radius: var(--radius-sm); color: var(--accent-red); font-weight: 500; font-size: 14px; text-align: center;">
922
+ ⚠️ These confirmations were described as "non-controversial" — yet 12+ days later, still no response
923
+ </p>
924
+ </div>
925
+
926
+ <div class="financial-grid">
927
+ <div class="financial-card correct">
928
+ <div class="label">CORRECT ANNUAL BENEFIT</div>
929
+ <div class="value">$105,964</div>
930
+ <div class="desc">Based on DoE salary at Date of Disablement</div>
931
+ </div>
932
+ <div class="financial-card wrong">
933
+ <div class="label">CAPPED BENEFIT (BEING PAID)</div>
934
+ <div class="value">$54,180</div>
935
+ <div class="desc">Based on retroactively applied TAFE salary</div>
936
+ </div>
937
+ <div class="financial-card shortfall">
938
+ <div class="label">ANNUAL SHORTFALL</div>
939
+ <div class="value">$51,784</div>
940
+ <div class="desc">= $4,315 underpaid every month</div>
941
+ </div>
942
+ </div>
943
+
944
+ <div class="proof-box">
945
+ <h3>📐 Mathematical Proof: "Always TAFE" Statement is False</h3>
946
+ <div class="proof-content">
947
+ <div class="comment">// On 31 January 2025, QSuper approved claim with:</div>
948
+ <br>
949
+ <strong>Salary IP Cover Amount:</strong> $108,614.12
950
+ <br><br>
951
+ <div class="comment">// Salary IP Cover = 87.75% of Insured Salary, therefore:</div>
952
+ <br>
953
+ <div class="highlight">
954
+ $108,614.12 ÷ 0.8775 = <strong>$123,776.77</strong> (DoE Salary)
955
+ </div>
956
+ <br><br>
957
+ <div class="comment">// If TAFE salary ($61,743.95) was "always" in system:</div>
958
+ <br>
959
+ <div class="error">
960
+ $61,743.95 × 0.8775 = $54,180.32 — <strong>NOT</strong> what was approved
961
+ </div>
962
+ </div>
963
+ <div class="proof-conclusion">
964
+ ⚠️ CONCLUSION: The salary was changed AFTER initial approval in March 2025
965
+ </div>
966
+ </div>
967
+ </div>
968
+
969
+ <!-- Evidence Tab -->
970
+ <div id="evidence" class="tab-content">
971
+ <!-- Post-Nov-28 Silence Callout -->
972
+ <div class="card" style="margin-bottom: 24px; background: linear-gradient(135deg, var(--accent-red-light) 0%, #fff 100%); border: 1px solid #fecaca;">
973
+ <div class="card-title" style="color: var(--accent-red);">🚨 THE PATTERN CONTINUES: Post-November 28 Silence</div>
974
+ <p style="color: var(--text-secondary); margin-bottom: 16px; font-size: 15px;">
975
+ On November 28, the Trustee acknowledged they were <em>"committed to reviewing"</em> the case. Since then:
976
+ </p>
977
+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
978
+ <div style="text-align: center; padding: 20px; background: white; border-radius: var(--radius-md); border: 1px solid var(--border-light);">
979
+ <div style="font-size: 2.5rem; font-weight: 700; color: var(--accent-blue);">2</div>
980
+ <div style="font-size: 13px; color: var(--text-muted);">Detailed emails sent (Dec 2 & 7)</div>
981
+ </div>
982
+ <div style="text-align: center; padding: 20px; background: white; border-radius: var(--radius-md); border: 1px solid var(--border-light);">
983
+ <div style="font-size: 2.5rem; font-weight: 700; color: var(--accent-orange);">4</div>
984
+ <div style="font-size: 13px; color: var(--text-muted);">Simple confirmations requested</div>
985
+ </div>
986
+ <div style="text-align: center; padding: 20px; background: white; border-radius: var(--radius-md); border: 1px solid var(--border-light);">
987
+ <div style="font-size: 2.5rem; font-weight: 700; color: var(--accent-red);">0</div>
988
+ <div style="font-size: 13px; color: var(--text-muted);">Responses received</div>
989
+ </div>
990
+ <div style="text-align: center; padding: 20px; background: white; border-radius: var(--radius-md); border: 1px solid var(--border-light);">
991
+ <div style="font-size: 2.5rem; font-weight: 700; color: var(--text-primary);">12+</div>
992
+ <div style="font-size: 13px; color: var(--text-muted);">Days of silence</div>
993
+ </div>
994
+ </div>
995
+ <p style="margin-top: 16px; color: var(--accent-red); font-weight: 500; font-size: 14px;">
996
+ This is the same pattern repeated throughout the dispute: promise to engage → silence → harm to Annette continues.
997
+ </p>
998
+ </div>
999
+
1000
+ <div class="card" style="margin-bottom: 24px;">
1001
+ <div class="card-title">📋 Evidence Summary</div>
1002
+
1003
+ <div class="evidence-section success">
1004
+ <h4>✓ Trustee Concessions (Already Agreed)</h4>
1005
+ <ul>
1006
+ <li>Date of Disablement: 18 October 2024</li>
1007
+ <li>Employer at DoD: Department of Education</li>
1008
+ <li>Pre-Disability Income: $120,757.00</li>
1009
+ <li>Benefit before capping: $105,964.26 per annum</li>
1010
+ </ul>
1011
+ </div>
1012
+
1013
+ <div class="evidence-section warning">
1014
+ <h4>⚠️ Outstanding Dispute</h4>
1015
+ <ul>
1016
+ <li>Benefit capped at $54,180.32 using TAFE salary</li>
1017
+ <li>TAFE salary retroactively applied in March 2025</li>
1018
+ <li>Premiums collected at DoE level, benefits paid at TAFE level</li>
1019
+ </ul>
1020
+ </div>
1021
+
1022
+ <div class="evidence-section error">
1023
+ <h4>❌ Documented Communication Failures</h4>
1024
+ <ul>
1025
+ <li><strong>Post-Nov 28 silence:</strong> 2 detailed emails (Dec 2 & 7) with 4 simple confirmation requests — zero response for 12+ days</li>
1026
+ <li>17 of 20 emails to Trustee received NO response overall</li>
1027
+ <li>Multiple requests for "confirmation of receipt" went unanswered</li>
1028
+ <li>Stonewalling explicitly documented in AFCA communications</li>
1029
+ <li>Crisis email about mental health relapse (Nov 7) — no substantive response</li>
1030
+ <li>12-month dispute timeline with minimal engagement</li>
1031
+ <li><strong>Two Christmas periods</strong> without correct entitlement — second one imminent</li>
1032
+ </ul>
1033
+ </div>
1034
+ </div>
1035
+
1036
+ <div class="card">
1037
+ <div class="card-title">💬 Key Quotes from Correspondence</div>
1038
+ <div class="quotes-list">
1039
+ <div class="quote-item" style="border-left-color: var(--accent-red);">
1040
+ <blockquote>"The cumulative delay and uncertainty are taking a real toll on Annette's health and wellbeing. To take us off the knife's edge..."</blockquote>
1041
+ <div class="meta">📅 Dec 7 — After 12 days of post-Nov-28 silence</div>
1042
+ </div>
1043
+ <div class="quote-item" style="border-left-color: var(--accent-red);">
1044
+ <blockquote>"Annette spent last Christmas with no income. She now faces another Christmas period still without her correct entitlement"</blockquote>
1045
+ <div class="meta">📅 Dec 2 — Two Christmas periods affected</div>
1046
+ </div>
1047
+ <div class="quote-item">
1048
+ <blockquote>"Could you please confirm in writing a small number of key points that appear, in substance, to be non-controversial"</blockquote>
1049
+ <div class="meta">📅 Dec 7 — Simple asks, still no response</div>
1050
+ </div>
1051
+ <div class="quote-item">
1052
+ <blockquote>"I can't seemingly get a response from Tim or yourself?"</blockquote>
1053
+ <div class="meta">📅 Nov 6 — Pattern of non-engagement</div>
1054
+ </div>
1055
+ <div class="quote-item">
1056
+ <blockquote>"Could you please confirm you're receiving these emails?"</blockquote>
1057
+ <div class="meta">📅 Nov 13 — Basic acknowledgment needed</div>
1058
+ </div>
1059
+ <div class="quote-item">
1060
+ <blockquote>"We rarely receive direct engagement from the Trustee"</blockquote>
1061
+ <div class="meta">📅 Nov 26 — Pattern documented</div>
1062
+ </div>
1063
+ <div class="quote-item" style="border-left-color: var(--accent-red);">
1064
+ <blockquote>"Annette has relapsed into psychosis and is unable to contain her grief"</blockquote>
1065
+ <div class="meta">📅 Nov 7 — Mental health crisis reported</div>
1066
+ </div>
1067
+ <div class="quote-item">
1068
+ <blockquote>"This dispute has now been ongoing for 12 months... Ms Bochniak has been underpaid by approximately $43,000"</blockquote>
1069
+ <div class="meta">📅 Nov 25 — Final submission to AFCA</div>
1070
+ </div>
1071
+ </div>
1072
+ </div>
1073
+ </div>
1074
+
1075
+ <!-- Footer -->
1076
+ <footer>
1077
+ <p>Dashboard generated from 23 documented emails • AFCA Cases 12-25-223390 & 12-25-238396</p>
1078
+ <p>This dashboard presents factual data extracted from official correspondence to support regulatory review.</p>
1079
+ </footer>
1080
+ </div>
1081
+
1082
+ <script>
1083
+ // Email Data
1084
+ const emails = [
1085
+ { id: 1, date: '2025-10-17', dateDisplay: 'Oct 17', from: 'Nathan Stower', to: 'EDR (Alexandra)', subject: 'Trustee oversight and our official request for support', type: 'outbound', status: 'none', category: 'Initial Request', urgent: true, quote: "I'm writing this as an olive branch to resolving the issue... Stephanie's answer falls well short of the question and our requirements, stonewalling vital information." },
1086
+ { id: 2, date: '2025-10-21', dateDisplay: 'Oct 21', from: 'Nathan Stower', to: 'AFCA (Nick Silvester)', subject: 'Fwd: An update from ART AFCA case 12-25-223390', type: 'afca', status: 'afca', category: 'AFCA Escalation', urgent: false, quote: null },
1087
+ { id: 3, date: '2025-10-22', dateDisplay: 'Oct 22', from: 'Nathan Stower', to: 'EDR, AFCA, Annette', subject: 'Re: AFCA cases - Request for Extension', type: 'outbound', status: 'none', category: 'Extension Request', urgent: true, quote: "The Trustee is not responsive for days at a time... Despite repeated requests, no reasoning has been provided for the non-medical DoD selection." },
1088
+ { id: 4, date: '2025-10-24', dateDisplay: 'Oct 24', from: 'Nathan Stower', to: 'EDR (Alexandra)', subject: 'CHANGE REQUEST OR EVIDENCE RELIED UPON', type: 'outbound', status: 'none', category: 'Evidence Submission', urgent: true, deadline: '7 days', quote: "I am requesting an immediate update to the claim record... Corrections Requested (Within 7 Days)" },
1089
+ { id: 5, date: '2025-10-26', dateDisplay: 'Oct 26', from: 'AFCA (Nick Silvester)', to: 'Nathan Stower', subject: 'Automatic reply: Stonewalling', type: 'afca_in', status: 'auto', category: 'AFCA Auto-Reply', urgent: false, quote: "I am on annual leave. My return date is 27 October 2025." },
1090
+ { id: 6, date: '2025-10-27', dateDisplay: 'Oct 27', from: 'Nathan Stower', to: 'EDR (Alexandra)', subject: 'Follow-up // Urgent - Trustee Investigation Required', type: 'outbound', status: 'none', category: 'Urgent Follow-up', urgent: true, deadline: '48 hours', quote: "Urgent response to the evidentiary issues first raised 21 days ago... We request a substantive response by 5:00 pm AEST, Wednesday 29 October 2025" },
1091
+ { id: 7, date: '2025-10-28', dateDisplay: 'Oct 28', from: 'Nathan Stower', to: 'EDR (Alexandra)', subject: 'Trustee Investigation Required // Follow-up', type: 'outbound', status: 'none', category: 'Follow-up', urgent: true, quote: "I was just following up on this email from Monday. Should I be emailing Zac Bailey now instead of you directly?" },
1092
+ { id: 8, date: '2025-10-31', dateDisplay: 'Oct 31', from: 'Zac Bailey (ART)', to: 'Nathan Stower', subject: 'Claim:CLM-319113 // Follow-up - 3 weeks later?', type: 'inbound', status: 'partial', category: 'Trustee Response', urgent: false, daysWait: 14, quote: "It has been agreed by all parties that the Date of Disablement has been changed to 18 October 2024. On Monday you will be provided a separate response..." },
1093
+ { id: 9, date: '2025-11-06', dateDisplay: 'Nov 6', from: 'Nathan Stower', to: 'Zac Bailey, EDR', subject: 'Re: Claim:CLM-319113 // Follow-up - 3 weeks later?', type: 'outbound', status: 'none', category: 'Complaint', urgent: true, quote: "I can't seemingly get a response from Tim or yourself? From a customer service standpoint it feels really poor - Like it's just more of the same." },
1094
+ { id: 10, date: '2025-11-07', dateDisplay: 'Nov 7', from: 'Nathan Stower', to: 'EDR (Alexandra)', subject: 'Trustee to review and fix', type: 'outbound', status: 'none', category: 'Urgent Request', urgent: true, crisis: true, quote: "I'm absolutely gutted at this, Annette has relapsed into psychosis and is unable to contain her grief... I urgently asked for assistance in this matter." },
1095
+ { id: 11, date: '2025-11-07', dateDisplay: 'Nov 7', from: 'Nathan Stower', to: 'AFCA (Nick Silvester)', subject: 'Fwd: AFCA cases - Multiple matters', type: 'afca', status: 'afca', category: 'AFCA Escalation', urgent: false, quote: null },
1096
+ { id: 12, date: '2025-11-07', dateDisplay: 'Nov 7', from: 'Nathan Stower', to: 'EDR (Alexandra)', subject: 'Fwd: An update from ART AFCA #12-25-223390', type: 'outbound', status: 'none', category: 'Forward', urgent: false, quote: null },
1097
+ { id: 13, date: '2025-11-07', dateDisplay: 'Nov 7', from: 'Nathan Stower', to: 'EDR (Alexandra)', subject: 'Fwd: Re: Claim: CLM-319113', type: 'outbound', status: 'none', category: 'Forward', urgent: false, quote: null },
1098
+ { id: 14, date: '2025-11-11', dateDisplay: 'Nov 11', from: 'Nathan Stower', to: 'EDR, Tim Hunt, Zac Bailey, Nick Silvester', subject: 'Trustee Review Required – Annual Policy Period Settings vs DoD Freeze', type: 'outbound', status: 'none', category: 'Technical Issue', urgent: true, quote: "This matter can be resolved only by the Trustee according to ART... on fairness grounds and on express policy terms and law." },
1099
+ { id: 15, date: '2025-11-13', dateDisplay: 'Nov 13', from: 'Nathan Stower', to: 'EDR (Alexandra)', subject: 'Re: Claim: CLM-319113 // Trustee Review Required', type: 'outbound', status: 'none', category: 'Follow-up', urgent: true, quote: "Could you please confirm you're receiving these emails? I'm just trying to get this finally resolved for Annette so she can focus on recovering." },
1100
+ { id: 16, date: '2025-11-13', dateDisplay: 'Nov 13', from: 'Alexandra (EDR)', to: 'Nathan Stower', subject: 'An update from ART AFCA # 12-25-223390', type: 'inbound', status: 'generic', category: 'Trustee Response', urgent: false, daysWait: 6, quote: "I confirm that the Trustee has received your correspondences. The Trustee has provided its position to AFCA and will continue to actively engage..." },
1101
+ { id: 17, date: '2025-11-14', dateDisplay: 'Nov 14', from: 'Nathan Stower', to: 'EDR, Nick Silvester, Annette', subject: "Special Request – Trustee's Independent Work-Product Trail", type: 'outbound', status: 'none', category: 'Document Request', urgent: true, quote: "I've been requesting this for a long time... To hear that you are requesting the case be closed without first checking with Annette is extremely disappointing." },
1102
+ { id: 18, date: '2025-11-21', dateDisplay: 'Nov 21', from: 'Nathan Stower', to: 'EDR, Nick Silvester, Annette', subject: 'Re: An update from ART AFCA # 12-25-223390', type: 'outbound', status: 'none', category: 'Follow-up', urgent: true, quote: "The misconduct of Stephanie in the handling of this claim needs to be investigated and this is a very important component." },
1103
+ { id: 19, date: '2025-11-25', dateDisplay: 'Nov 25', from: 'Nathan Stower', to: 'EDR, Nick Silvester', subject: 'Final Submission - Anniversary date reset', type: 'outbound', status: 'none', category: 'Final Submission', urgent: true, quote: "This dispute has now been ongoing for 12 months... Ms Bochniak has been underpaid by approximately $43,000. She continues to be underpaid by $4,315 every month." },
1104
+ { id: 20, date: '2025-11-26', dateDisplay: 'Nov 26', from: 'Nathan Stower', to: 'EDR, Nick Silvester', subject: 'Trustee Conflict of Interest Claim', type: 'outbound', status: 'none', category: 'Formal Complaint', urgent: true, quote: "We rarely receive direct engagement from the Trustee... The mathematical proof that your 'always TAFE' narrative is demonstrably false." },
1105
+ { id: 21, date: '2025-11-28', dateDisplay: 'Nov 28', from: 'Alexandra (EDR)', to: 'Nathan Stower', subject: 'An update from ART - AFCA # 12-25-223390', type: 'inbound', status: 'generic', category: 'Trustee Response', urgent: false, daysWait: 3, quote: "Please be assured that we are committed to reviewing Ms Bochniak's offer to resolve. This process may take some time; however, we appreciate your patience.", lastContact: true },
1106
+ { id: 22, date: '2025-12-02', dateDisplay: 'Dec 2', from: 'Nathan Stower', to: 'EDR (Alexandra)', subject: 'Clarification Regarding Arrears Period, Insured Salary and Shortfall', type: 'outbound', status: 'none', category: 'Technical Clarification', urgent: true, postSilence: true, quote: "Annette spent last Christmas with no income. She now faces another Christmas period still without her correct entitlement... Total arrears: $53,797.60 + interest = $59,176.60" },
1107
+ { id: 23, date: '2025-12-07', dateDisplay: 'Dec 7', from: 'Nathan Stower', to: 'EDR (Alexandra)', subject: 'Request for 4 Simple Confirmations Before Christmas', type: 'outbound', status: 'none', category: 'Confirmation Request', urgent: true, postSilence: true, quote: "The cumulative delay and uncertainty are taking a real toll on Annette's health and wellbeing. To take us off the knife's edge... could you please confirm in writing a small number of key points that appear, in substance, to be non-controversial." }
1108
+ ];
1109
+
1110
+ const quotes = [
1111
+ { text: "The cumulative delay and uncertainty are taking a real toll on Annette's health and wellbeing", date: "Dec 7", context: "After 12 days of silence" },
1112
+ { text: "Annette spent last Christmas with no income. She now faces another Christmas period still without her correct entitlement", date: "Dec 2", context: "Two Christmases affected" },
1113
+ { text: "To take us off the knife's edge while you finalise... could you please confirm in writing a small number of key points that appear, in substance, to be non-controversial", date: "Dec 7", context: "Simple asks, no response" },
1114
+ { text: "I can't seemingly get a response from Tim or yourself?", date: "Nov 6", context: "Pattern of silence" },
1115
+ { text: "Could you please confirm you're receiving these emails?", date: "Nov 13", context: "Basic acknowledgment needed" },
1116
+ { text: "We rarely receive direct engagement from the Trustee", date: "Nov 26", context: "Pattern documented" },
1117
+ { text: "Annette has relapsed into psychosis and is unable to contain her grief", date: "Nov 7", context: "Mental health crisis" }
1118
+ ];
1119
+
1120
+ // Tab Navigation
1121
+ document.querySelectorAll('.nav-btn').forEach(btn => {
1122
+ btn.addEventListener('click', () => {
1123
+ document.querySelectorAll('.nav-btn').forEach(b => b.classList.remove('active'));
1124
+ document.querySelectorAll('.tab-content').forEach(t => t.classList.remove('active'));
1125
+ btn.classList.add('active');
1126
+ document.getElementById(btn.dataset.tab).classList.add('active');
1127
+ });
1128
+ });
1129
+
1130
+ // Rotating Quotes
1131
+ let quoteIndex = 0;
1132
+ setInterval(() => {
1133
+ quoteIndex = (quoteIndex + 1) % quotes.length;
1134
+ document.getElementById('rotating-quote').textContent = `"${quotes[quoteIndex].text}"`;
1135
+ document.getElementById('quote-attribution').textContent = `📅 ${quotes[quoteIndex].date} — ${quotes[quoteIndex].context}`;
1136
+ }, 6000);
1137
+
1138
+ // Volume Chart
1139
+ const volumeChart = echarts.init(document.getElementById('volume-chart'));
1140
+ volumeChart.setOption({
1141
+ tooltip: { trigger: 'axis', backgroundColor: '#fff', borderColor: '#e2e8f0', textStyle: { color: '#1e293b' } },
1142
+ legend: { data: ['Sent to Trustee', 'Received'], bottom: 0, textStyle: { color: '#64748b' } },
1143
+ grid: { left: '3%', right: '4%', bottom: '15%', top: '10%', containLabel: true },
1144
+ xAxis: { type: 'category', data: ['Oct 17-23', 'Oct 24-30', 'Oct 31-Nov 6', 'Nov 7-13', 'Nov 14-20', 'Nov 21-27', 'Nov 28-Dec 7'], axisLine: { lineStyle: { color: '#e2e8f0' } }, axisLabel: { color: '#64748b', fontSize: 11 } },
1145
+ yAxis: { type: 'value', axisLine: { show: false }, splitLine: { lineStyle: { color: '#f1f5f9' } }, axisLabel: { color: '#64748b' } },
1146
+ series: [
1147
+ { name: 'Sent to Trustee', type: 'bar', data: [4, 3, 2, 5, 2, 2, 2], itemStyle: { color: '#3b82f6', borderRadius: [4, 4, 0, 0] }, barWidth: '35%' },
1148
+ { name: 'Received', type: 'bar', data: [0, 1, 1, 1, 0, 1, 0], itemStyle: { color: '#10b981', borderRadius: [4, 4, 0, 0] }, barWidth: '35%' }
1149
+ ]
1150
+ });
1151
+
1152
+ // Quality Chart
1153
+ const qualityChart = echarts.init(document.getElementById('quality-chart'));
1154
+ qualityChart.setOption({
1155
+ tooltip: { trigger: 'item', backgroundColor: '#fff', borderColor: '#e2e8f0', textStyle: { color: '#1e293b' } },
1156
+ legend: { orient: 'horizontal', bottom: 0, textStyle: { color: '#64748b' } },
1157
+ series: [{
1158
+ name: 'Response Quality',
1159
+ type: 'pie',
1160
+ radius: ['45%', '70%'],
1161
+ center: ['50%', '45%'],
1162
+ avoidLabelOverlap: false,
1163
+ itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
1164
+ label: { show: false },
1165
+ emphasis: { label: { show: true, fontSize: 14, fontWeight: 'bold' } },
1166
+ data: [
1167
+ { value: 17, name: 'No Reply', itemStyle: { color: '#dc2626' } },
1168
+ { value: 2, name: 'Generic Only', itemStyle: { color: '#f59e0b' } },
1169
+ { value: 1, name: 'Partial', itemStyle: { color: '#3b82f6' } },
1170
+ { value: 0, name: 'Substantive', itemStyle: { color: '#10b981' } }
1171
+ ]
1172
+ }]
1173
+ });
1174
+
1175
+ // Render Email List
1176
+ function renderEmails(filter = 'all') {
1177
+ const list = document.getElementById('email-list');
1178
+ let filtered = emails;
1179
+
1180
+ if (filter === 'outbound') filtered = emails.filter(e => e.type === 'outbound');
1181
+ else if (filter === 'inbound') filtered = emails.filter(e => e.type === 'inbound');
1182
+ else if (filter === 'urgent') filtered = emails.filter(e => e.urgent);
1183
+
1184
+ list.innerHTML = filtered.map(email => {
1185
+ let statusClass = '';
1186
+ let statusLabel = '';
1187
+
1188
+ if (email.status === 'none') { statusClass = 'status-none'; statusLabel = '🔇 NO RESPONSE'; }
1189
+ else if (email.status === 'generic') { statusClass = 'status-generic'; statusLabel = '⚠️ GENERIC ONLY'; }
1190
+ else if (email.status === 'partial') { statusClass = 'status-received'; statusLabel = '📝 PARTIAL'; }
1191
+ else if (email.status === 'afca') { statusClass = 'category'; statusLabel = '📤 TO AFCA'; }
1192
+ else if (email.status === 'auto') { statusClass = 'category'; statusLabel = '🤖 AUTO-REPLY'; }
1193
+ else if (email.status === 'pending') { statusClass = 'status-generic'; statusLabel = '⏳ PENDING'; }
1194
+
1195
+ let itemClass = 'email-item';
1196
+ if (email.status === 'none') itemClass += ' no-response';
1197
+ else if (email.status === 'generic') itemClass += ' generic';
1198
+ else if (email.type === 'inbound') itemClass += ' received';
1199
+ if (email.crisis) itemClass += ' crisis';
1200
+
1201
+ return `
1202
+ <div class="${itemClass}" onclick="this.classList.toggle('expanded')">
1203
+ <div class="email-header">
1204
+ <div class="email-subject">${email.subject}</div>
1205
+ <div class="email-date">${email.dateDisplay}</div>
1206
+ </div>
1207
+ <div class="email-meta">
1208
+ 📤 ${email.from} → 📥 ${email.to}
1209
+ </div>
1210
+ <div class="email-tags">
1211
+ <span class="tag ${statusClass}">${statusLabel}</span>
1212
+ <span class="tag category">${email.category}</span>
1213
+ ${email.urgent ? '<span class="tag urgent">⚡ URGENT</span>' : ''}
1214
+ ${email.crisis ? '<span class="tag crisis">🚨 CRISIS</span>' : ''}
1215
+ ${email.postSilence ? '<span class="tag" style="background: #fef3c7; color: #b45309;">📭 POST NOV-28 SILENCE</span>' : ''}
1216
+ ${email.deadline ? `<span class="tag urgent">⏰ ${email.deadline}</span>` : ''}
1217
+ ${email.daysWait ? `<span class="tag category">⏱️ ${email.daysWait} days wait</span>` : ''}
1218
+ ${email.lastContact ? '<span class="tag" style="background: #dbeafe; color: #1d4ed8;">📍 LAST TRUSTEE CONTACT</span>' : ''}
1219
+ </div>
1220
+ ${email.quote ? `<div class="email-quote">"${email.quote}"</div>` : ''}
1221
+ </div>
1222
+ `;
1223
+ }).join('');
1224
+ }
1225
+
1226
+ // Email Filters
1227
+ document.querySelectorAll('.filter-btn').forEach(btn => {
1228
+ btn.addEventListener('click', () => {
1229
+ document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
1230
+ btn.classList.add('active');
1231
+ renderEmails(btn.dataset.filter);
1232
+ });
1233
+ });
1234
+
1235
+ // Render Timeline
1236
+ function renderTimeline() {
1237
+ const container = document.getElementById('timeline-container');
1238
+ container.innerHTML = emails.map(email => {
1239
+ let dotClass = 'timeline-dot';
1240
+ if (email.type === 'inbound') dotClass += ' received';
1241
+ else if (email.type === 'afca' || email.type === 'afca_in') dotClass += ' afca';
1242
+
1243
+ let statusText = '';
1244
+ if (email.status === 'none') statusText = '🔇 No response';
1245
+ else if (email.status === 'generic') statusText = '⚠️ Generic reply';
1246
+ else if (email.status === 'partial') statusText = '📝 Partial response';
1247
+ else if (email.type === 'inbound') statusText = '📥 Received';
1248
+ else if (email.type === 'afca') statusText = '📤 To AFCA';
1249
+
1250
+ return `
1251
+ <div class="timeline-item">
1252
+ <div class="${dotClass}"></div>
1253
+ <div class="timeline-content">
1254
+ <div class="timeline-header">
1255
+ <div class="timeline-title">${email.subject.length > 55 ? email.subject.substring(0, 55) + '...' : email.subject}</div>
1256
+ <div class="timeline-date">${email.date}</div>
1257
+ </div>
1258
+ <div class="timeline-meta">
1259
+ ${email.from} → ${email.to} ${statusText ? '• ' + statusText : ''}
1260
+ </div>
1261
+ </div>
1262
+ </div>
1263
+ `;
1264
+ }).join('');
1265
+ }
1266
+
1267
+ // Initialize
1268
+ renderEmails();
1269
+ renderTimeline();
1270
+
1271
+ // Resize charts on window resize
1272
+ window.addEventListener('resize', () => {
1273
+ volumeChart.resize();
1274
+ qualityChart.resize();
1275
+ });
1276
+ </script>
1277
+ </body>
1278
+ </html>