Hugging Face's logo

Spaces:
pedrod8
/
AB
Running

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

Delete index.html

Browse files
Files changed (1) hide show
  1. index.html +0 -1278
index.html DELETED
@@ -1,1278 +0,0 @@
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>