Repository navigation
Expand file tree
/
Copy pathClient_Billing_View.html
More file actions
907 lines (854 loc) · 47.9 KB
/
Copy pathClient_Billing_View.html
File metadata and controls
907 lines (854 loc) · 47.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Concepta — Client Billing View · Service Finance</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
--ink: #0f0f0f;
--ink-mid: #3a3a3a;
--ink-light: #6b7280;
--rule: #e2ddd8;
--paper: #f7f5f1;
--white: #ffffff;
--blue: #1d3557;
--blue-mid: #2563eb;
--blue-light: #dbeafe;
--violet: #4c1d95;
--violet-light:#ede9fe;
--green: #14532d;
--green-light:#dcfce7;
--amber: #92400e;
--amber-light:#fef3c7;
--red: #991b1b;
--red-light: #fee2e2;
--orange: #c2410c;
--orange-light:#fff7ed;
--col: 820px;
--gap: 40px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'DM Sans', sans-serif;
background: var(--paper);
color: var(--ink);
font-size: 14px;
line-height: 1.7;
}
/* ── NAV ── */
nav {
position: sticky; top: 0; z-index: 100;
background: #1d3557;
display: flex; align-items: center; justify-content: space-between;
padding: 0 32px; height: 56px;
box-shadow: 0 2px 12px rgba(0,0,0,.18);
gap: 24px;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; opacity: 1; transition: opacity .2s; }
.nav-logo:hover { opacity: .75; }
.nav-links { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
font-size: 11.5px; font-weight: 600; letter-spacing: .5px;
text-transform: uppercase; color: rgba(255,255,255,.8);
text-decoration: none; transition: color .15s, background .15s;
padding: 5px 10px; border-radius: 4px; white-space: nowrap; flex-shrink: 0;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.12); }
.nav-links a.nav-active {
color: #fff;
background: rgba(255,255,255,.15);
border: 1px solid rgba(255,255,255,.25);
}
.nav-links a.nav-templates {
color: #fcd34d;
border: 1px solid rgba(252,211,77,.35);
border-radius: 4px;
}
.nav-links a.nav-templates:hover { background: rgba(252,211,77,.12); color: #fde68a; }
.nav-div { width: 1px; height: 16px; background: rgba(255,255,255,.2); margin: 0 8px; flex-shrink: 0; }
.nav-logo {
display: flex; align-items: center;
text-decoration: none; flex-shrink: 0;
opacity: 1; transition: opacity .2s;
}
.nav-logo:hover { opacity: .8; }
.nav-links {
display: flex; align-items: center; gap: 2px;
flex: 1; justify-content: flex-end;
overflow-x: auto; scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
font-size: 11px; font-weight: 600; letter-spacing: .6px;
text-transform: uppercase; color: rgba(255,255,255,.6);
text-decoration: none; transition: color .2s, background .2s;
padding: 5px 10px; border-radius: 4px; white-space: nowrap;
flex-shrink: 0;
}
.nav-links a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-links a.nav-active {
color: #fff; background: rgba(255,255,255,.12);
border-bottom: 2px solid rgba(255,255,255,.5);
}
.nav-links a.nav-templates {
color: #fbbf24; border: 1px solid rgba(251,191,36,.3);
border-radius: 4px;
}
.nav-links a.nav-templates:hover {
background: rgba(251,191,36,.12); color: #fde68a;
}
.nav-div {
width: 1px; height: 16px;
background: rgba(255,255,255,.15);
margin: 0 6px; flex-shrink: 0;
}
/* ── HERO ── */
.hero {
background: var(--blue);
color: #fff;
padding: 52px 40px 44px;
position: relative; overflow: hidden;
}
.hero::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 80% 50%, rgba(37,99,235,.25) 0%, transparent 65%);
pointer-events: none;
}
.hero-inner { max-width: var(--col); margin: 0 auto; position: relative; }
.hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
text-transform: uppercase; color: rgba(255,255,255,.5);
border: 1px solid rgba(255,255,255,.15);
border-radius: 20px; padding: 4px 12px; margin-bottom: 16px;
}
.hero-eyebrow span { width: 6px; height: 6px; border-radius: 50%; background: #f59e0b; }
.hero h1 {
font-family: 'DM Serif Display', serif;
font-size: 34px; line-height: 1.2; color: #fff;
margin-bottom: 10px;
}
.hero-sub { font-size: 14px; color: rgba(255,255,255,.6); margin-bottom: 28px; max-width: 480px; }
.hero-meta { display: flex; gap: 32px; flex-wrap: wrap; }
.hero-meta-item { display: flex; flex-direction: column; gap: 2px; }
.hero-meta-item .label { font-size: 9px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(255,255,255,.4); }
.hero-meta-item .value { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.85); }
.draft-badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(245,158,11,.15); border: 1px solid rgba(245,158,11,.4);
border-radius: 4px; padding: 6px 12px;
font-size: 11px; font-weight: 600; color: #fbbf24;
margin-top: 20px;
}
/* ── LAYOUT ── */
.page { max-width: var(--col); margin: 0 auto; padding: var(--gap) 40px 80px; }
/* ── CYCLE SUMMARY ── */
.cycle-summary {
background: var(--white);
border: 1px solid var(--rule);
border-radius: 10px;
overflow: hidden;
margin-bottom: 36px;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.cycle-summary-header {
background: var(--blue);
color: #fff;
padding: 14px 20px;
display: flex; align-items: center; justify-content: space-between;
}
.cycle-summary-header h3 { font-size: 13px; font-weight: 600; letter-spacing: .3px; }
.cycle-summary-header span { font-size: 11px; color: rgba(255,255,255,.6); }
.cycle-buckets {
display: grid; grid-template-columns: repeat(5, 1fr);
border-bottom: 1px solid var(--rule);
}
.cycle-bucket {
padding: 16px 18px;
border-right: 1px solid var(--rule);
position: relative;
}
.cycle-bucket:last-child { border-right: none; }
.cb-label { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-light); margin-bottom: 6px; }
.cb-hrs { font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--ink); line-height: 1; margin-bottom: 4px; }
.cb-baseline { font-size: 11px; color: var(--ink-light); }
.cb-bar { height: 4px; border-radius: 2px; background: #e5e7eb; margin-top: 10px; overflow: hidden; }
.cb-fill { height: 100%; border-radius: 2px; transition: width .4s ease; }
.cb-fill.safe { background: #16a34a; }
.cb-fill.warn { background: #f59e0b; }
.cb-fill.over { background: #dc2626; }
.cycle-totals {
display: grid; grid-template-columns: repeat(3, 1fr);
padding: 14px 20px; gap: 0;
}
.ct-item { display: flex; flex-direction: column; gap: 2px; }
.ct-label { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-light); }
.ct-value { font-size: 15px; font-weight: 700; color: var(--ink); }
.ct-value.green { color: #15803d; }
.ct-value.red { color: #dc2626; }
.ct-value.amber { color: #b45309; }
/* ── EPIC SECTION ── */
.epic-section { margin-bottom: 28px; }
.epic-header {
display: flex; align-items: center; gap: 12px;
padding: 12px 18px;
border-radius: 8px 8px 0 0;
cursor: pointer;
user-select: none;
}
.epic-icon { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.epic-title { font-size: 13px; font-weight: 700; flex: 1; }
.epic-meta { display: flex; align-items: center; gap: 16px; }
.epic-hrs { font-size: 12px; font-weight: 600; }
.epic-budget { font-size: 11px; color: var(--ink-light); }
.epic-pill {
font-size: 10px; font-weight: 700; padding: 3px 10px;
border-radius: 20px; white-space: nowrap;
}
.epic-toggle { font-size: 11px; color: var(--ink-light); margin-left: 8px; transition: transform .2s; }
.epic-toggle.open { transform: rotate(180deg); }
/* Epic colour themes */
.epic-planning .epic-header { background: #eff6ff; border: 1px solid #bfdbfe; }
.epic-planning .epic-icon { background: var(--blue-light); }
.epic-planning .epic-title { color: #1d4ed8; }
.epic-planning .epic-hrs { color: #1d4ed8; }
.epic-planning .epic-pill { background: #dbeafe; color: #1d4ed8; border: 1px solid #93c5fd; }
.epic-prodsupport .epic-header { background: #fef2f2; border: 1px solid #fca5a5; }
.epic-prodsupport .epic-icon { background: var(--red-light); }
.epic-prodsupport .epic-title { color: #991b1b; }
.epic-prodsupport .epic-hrs { color: #991b1b; }
.epic-prodsupport .epic-pill { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.epic-maintenance .epic-header { background: #f0fdf4; border: 1px solid #86efac; }
.epic-maintenance .epic-icon { background: var(--green-light); }
.epic-maintenance .epic-title { color: #15803d; }
.epic-maintenance .epic-hrs { color: #15803d; }
.epic-maintenance .epic-pill { background: #dcfce7; color: #15803d; border: 1px solid #86efac; }
.epic-deployments .epic-header { background: #f5f3ff; border: 1px solid #c4b5fd; }
.epic-deployments .epic-icon { background: var(--violet-light); }
.epic-deployments .epic-title { color: #6d28d9; }
.epic-deployments .epic-hrs { color: #6d28d9; }
.epic-deployments .epic-pill { background: #ede9fe; color: #6d28d9; border: 1px solid #c4b5fd; }
.epic-buffer .epic-header { background: var(--amber-light); border: 1px solid #fcd34d; }
.epic-buffer .epic-icon { background: #fef3c7; }
.epic-buffer .epic-title { color: #b45309; }
.epic-buffer .epic-hrs { color: #b45309; }
.epic-buffer .epic-pill { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
/* ── TICKET TABLE ── */
.ticket-table {
width: 100%; border-collapse: collapse;
border: 1px solid var(--rule); border-top: none;
border-radius: 0 0 8px 8px; overflow: hidden;
font-size: 12px;
}
.ticket-table th {
background: #f8f7f4;
font-size: 9px; font-weight: 700; letter-spacing: 1px;
text-transform: uppercase; color: var(--ink-light);
padding: 9px 14px; text-align: left;
border-bottom: 1px solid var(--rule);
}
.ticket-table td {
padding: 10px 14px;
border-bottom: 1px solid #f0ede8;
vertical-align: top;
color: var(--ink-mid);
}
.ticket-table tr:last-child td { border-bottom: none; }
.ticket-table tr:hover td { background: #fafaf8; }
.ticket-id { font-size: 10px; font-weight: 700; color: var(--ink-light); white-space: nowrap; font-family: monospace; }
.ticket-desc { color: var(--ink); font-weight: 500; }
.ticket-desc .sub { font-size: 11px; color: var(--ink-light); font-weight: 400; display: block; margin-top: 2px; }
.ticket-status {
display: inline-flex; align-items: center; gap: 4px;
font-size: 10px; font-weight: 600; padding: 2px 8px;
border-radius: 20px; white-space: nowrap;
}
.s-done { background: #dcfce7; color: #15803d; }
.s-progress { background: #dbeafe; color: #1d4ed8; }
.s-review { background: #fef3c7; color: #b45309; }
.s-blocked { background: #fee2e2; color: #991b1b; }
.hrs { font-weight: 700; color: var(--ink); text-align: right; white-space: nowrap; }
.at-risk { color: #dc2626; font-size: 11px; font-weight: 700; }
/* ── EPIC PROGRESS BAR ── */
.epic-progress {
height: 3px; background: #e5e7eb;
border-radius: 0; overflow: hidden;
}
.epic-progress-fill { height: 100%; transition: width .5s ease; }
/* ── FOOTER ── */
footer {
background: var(--ink); color: rgba(255,255,255,.45);
text-align: center; padding: 28px;
font-size: 11px; letter-spacing: .5px;
margin-top: 40px;
}
/* ── DIVIDER ── */
hr { border: none; border-top: 1px solid var(--rule); margin: 32px 0; }
/* ── COLLAPSED STATE ── */
.epic-body { display: block; }
.epic-body.collapsed { display: none; }
/* ── NOTES CALLOUT ── */
.callout {
border-radius: 8px; padding: 14px 18px;
margin: 24px 0; display: flex; gap: 12px;
font-size: 13px;
}
.callout-icon { font-size: 18px; flex-shrink: 0; }
.callout-body strong { display: block; font-size: 12px; font-weight: 700; margin-bottom: 3px; }
.callout-info { background: var(--blue-light); border-left: 3px solid var(--blue-mid); }
.callout-warn { background: var(--amber-light); border-left: 3px solid #f59e0b; }
.nav-links a.nav-workflow {
color:#fff;
background:rgba(77,110,255,.25);
border:1px solid rgba(77,110,255,.5);
border-radius:4px;
}
.nav-links a.nav-workflow:hover {
background:rgba(77,110,255,.4);
border-color:#4d6eff;
}
.nav-links a.nav-workflow.nav-active {
background:#4d6eff;
border-color:#4d6eff;
border-bottom:2px solid #a0b0ff;
}
/* ── Beta Pilot links ── */
.nav-links a.nav-pilot {
color:#fde68a;
background:rgba(245,158,11,.18);
border:1px solid rgba(245,158,11,.45);
border-radius:4px;
padding:5px 10px;
}
.nav-links a.nav-pilot:hover {
background:rgba(245,158,11,.32);
border-color:#f59e0b;
color:#fef3c7;
}
.nav-links a.nav-pilot.nav-active {
background:#f59e0b;
color:#0f172a;
border-color:#f59e0b;
}
.cn-links a.nav-workflow {
color:#fff;
background:rgba(77,110,255,.25);
border:1px solid rgba(77,110,255,.5);
border-radius:4px;
}
.cn-links a.nav-workflow:hover {
background:rgba(77,110,255,.4);
}
/* ── Budget dropdown ── */
.nav-dropdown{position:relative;flex-shrink:0}
.nav-dropdown-menu{
display:none;
position:absolute;top:calc(100% + 4px);left:0;
background:#1d3557;
border:1px solid rgba(255,255,255,.15);
border-radius:6px;
min-width:150px;
z-index:200;
box-shadow:0 8px 24px rgba(0,0,0,.3);
overflow:hidden;
}
.nav-dropdown:hover .nav-dropdown-menu{display:block}
.nav-dropdown-menu a{
display:block;
font-size:11px;font-weight:600;letter-spacing:.5px;
text-transform:uppercase;color:rgba(255,255,255,.7);
text-decoration:none;padding:8px 14px;white-space:nowrap;
transition:background .12s,color .12s;
}
.nav-dropdown-menu a:hover{background:rgba(255,255,255,.1);color:#fff}
.nav-dropdown-menu a.nav-active{color:#fff;background:rgba(255,255,255,.12)}
.nav-dropdown > a::after{content:' ▾';font-size:9px;opacity:.6}
/* ── Dropdown fix — overflow visible ── */
.nav-links { overflow: visible !important; }
nav { overflow: visible !important; }
.nav-dropdown { position: static; }
.nav-dropdown-menu {
position: fixed !important;
top: 52px !important;
margin-top: 0 !important;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
</style>
</head>
<body>
<nav>
<a href="Index.html" class="nav-logo" title="Home"><svg width="120" height="20" viewBox="0 0 201 33" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:block">
<path d="M41.4673 22.6537C39.8187 20.8428 38.9963 18.2178 39 14.7786C39.0038 11.3394 39.8262 8.71248 41.4673 6.89787C43.1122 5.08697 45.5118 4.18152 48.666 4.18152C50.7555 4.16768 52.8286 4.54703 54.775 5.29941V8.882C53.0032 8.00664 51.0527 7.54403 49.0725 7.52949H48.9653C47.0569 7.52949 45.5607 8.01757 44.4767 8.99384C43.3926 9.97 42.8525 11.889 42.8563 14.7506C42.8268 16.0424 42.9944 17.3313 43.3531 18.5736C43.5809 19.4472 44.0783 20.2287 44.7759 20.8092C45.3445 21.2551 46.0029 21.5753 46.7069 21.7483C47.4616 21.9236 48.2353 22.0063 49.0104 21.9941C51.0147 21.9922 52.9927 21.5433 54.7976 20.6807V24.2354C52.8505 24.9853 50.7779 25.3646 48.6886 25.3532C45.5344 25.3532 43.1348 24.4478 41.4899 22.6369" fill="white"/>
<path d="M62.804 11.0065C62.4684 12.2414 62.3144 13.5176 62.3467 14.796C62.3155 16.0706 62.4695 17.3431 62.804 18.5742C63.0131 19.4422 63.4907 20.2238 64.1704 20.8099C64.7114 21.2542 65.3402 21.5817 66.0167 21.7712C67.505 22.0908 69.0452 22.0908 70.5335 21.7712C71.2106 21.5834 71.8398 21.2557 72.3797 20.8099C73.0592 20.2227 73.5384 19.4417 73.7517 18.5742C74.0824 17.3385 74.2345 16.0628 74.2035 14.7848C74.2345 13.5069 74.0824 12.231 73.7517 10.9954C73.537 10.1284 73.0581 9.34786 72.3797 8.75968C71.8415 8.31452 71.2142 7.98693 70.5391 7.79836C69.0508 7.47879 67.5106 7.47879 66.0223 7.79836C65.346 7.98793 64.717 8.31533 64.1761 8.75968C63.4978 9.34696 63.0205 10.1281 62.8098 10.9954L62.804 11.0065ZM59.343 20.1001C58.719 18.4018 58.4222 16.6026 58.468 14.796C58.4222 12.9893 58.719 11.1903 59.343 9.4919C59.8068 8.19677 60.6355 7.06011 61.7314 6.21665C62.6613 5.52686 63.7067 5.00467 64.8198 4.67407C67.0829 4.07023 69.4673 4.07023 71.7305 4.67407C72.8447 5.00567 73.8919 5.52776 74.8245 6.21665C75.9143 7.06222 76.737 8.19867 77.1959 9.4919C77.8246 11.1892 78.1235 12.9888 78.0766 14.796C78.1235 16.6032 77.8246 18.4029 77.1959 20.1001C76.734 21.3947 75.9071 22.5312 74.8132 23.3753C73.8806 24.0642 72.8335 24.5863 71.7191 24.918C69.4559 25.5217 67.0716 25.5217 64.8084 24.918C63.6954 24.5873 62.65 24.0651 61.72 23.3753C60.6243 22.5318 59.7955 21.3953 59.3318 20.1001" fill="white"/>
<path d="M81.605 25.0514V6.27751C84.3483 4.90344 87.3777 4.18195 90.4523 4.17041C93.0872 4.17041 95.146 4.84676 96.629 6.19927C98.1121 7.55188 98.8649 9.42798 98.8875 11.8276V25.0514H95.0087V11.509C95.0663 10.473 94.7322 9.45276 94.0714 8.64731C93.4428 7.95059 92.1875 7.60033 90.3055 7.59662C88.648 7.5912 86.9999 7.84397 85.4217 8.34549V25.0514H81.605Z" fill="white"/>
<path d="M105.216 22.6541C103.571 20.8432 102.749 18.2182 102.749 14.779C102.749 11.3398 103.571 8.71294 105.216 6.89833C106.865 5.08743 109.259 4.18198 112.415 4.18198C114.506 4.16864 116.581 4.54799 118.53 5.29978V8.88246C116.756 8.0063 114.804 7.54359 112.822 7.52985H112.765C110.857 7.52985 109.351 8.01803 108.248 8.9942C107.145 9.97046 106.603 11.8894 106.622 14.7511C106.59 16.043 106.758 17.3322 107.119 18.574C107.347 19.4461 107.842 20.2271 108.536 20.8097C109.098 21.2618 109.75 21.5913 110.45 21.7766C111.205 21.9524 111.979 22.0349 112.754 22.0226C114.758 22.02 116.736 21.5711 118.541 20.7091V24.2638C116.592 25.0132 114.517 25.3924 112.426 25.3816C109.27 25.3816 106.876 24.4761 105.228 22.6653" fill="white"/>
<path d="M126.062 13.5438H136.728C136.675 12.8798 136.556 12.2226 136.372 11.5821C136.172 10.9174 135.892 10.2794 135.536 9.68168C135.155 9.029 134.595 8.49628 133.922 8.14471C133.145 7.74701 132.278 7.55452 131.403 7.58582C129.661 7.58582 128.379 8.03107 127.559 8.92157C126.74 9.81589 126.237 11.3585 126.062 13.5606V13.5438ZM122.246 15.0473C122.246 7.82243 125.298 4.20996 131.403 4.20996H131.449C134.219 4.20996 136.436 5.10799 138.1 6.90394C139.763 8.6999 140.592 11.1032 140.584 14.1139C140.584 15.092 140.545 16.0366 140.465 16.9085H126.124C126.587 20.4371 128.537 22.1995 131.974 22.1958C134.456 22.268 136.918 21.7364 139.144 20.6476V24.0738C136.842 24.994 134.377 25.4482 131.895 25.4096H131.77C130.625 25.4221 129.484 25.2695 128.383 24.9569C127.303 24.6309 126.287 24.1243 125.379 23.4589C124.317 22.633 123.523 21.5179 123.092 20.2508C122.489 18.5751 122.201 16.8036 122.246 15.0249" fill="white"/>
<path d="M148.838 21.1674C150.244 21.7139 151.742 21.9944 153.253 21.9946C153.989 22.0062 154.723 21.9254 155.438 21.7543C156.092 21.5642 156.7 21.2426 157.223 20.8097C157.875 20.2463 158.34 19.4998 158.555 18.669C158.89 17.4684 159.044 16.2254 159.012 14.9802C159.043 13.6431 158.89 12.3078 158.555 11.012C158.353 10.1335 157.896 9.33297 157.24 8.70918C156.747 8.27034 156.171 7.93382 155.545 7.71997C154.924 7.54093 154.279 7.45426 153.632 7.46289C150.432 7.46289 148.832 8.4875 148.832 10.5368V21.1563L148.838 21.1674ZM145.038 32.8711V10.794C145.02 9.75616 145.275 8.73154 145.778 7.82058C146.112 7.15174 146.569 6.55082 147.127 6.04879C147.881 5.44406 148.752 4.9972 149.685 4.7353C150.964 4.34392 152.299 4.15524 153.637 4.17641C154.395 4.1754 155.15 4.24281 155.895 4.37762C156.744 4.55255 157.56 4.85808 158.312 5.28307C159.174 5.74557 159.941 6.36576 160.571 7.11072C161.308 8.05328 161.851 9.13005 162.169 10.2797C162.615 11.8104 162.828 13.3984 162.8 14.9915C162.847 16.7661 162.562 18.5339 161.959 20.2061C161.524 21.4837 160.711 22.6029 159.628 23.4199C158.713 24.0812 157.695 24.5873 156.613 24.9177C155.511 25.2315 154.371 25.384 153.225 25.3705C151.732 25.3761 150.245 25.1729 148.81 24.7669V32.8711H145.038Z" fill="white"/>
<path d="M166.369 7.7202L173.782 0.297852V4.50092H179.304V7.7202H173.782V19.5972C173.782 21.1956 174.804 21.995 176.848 21.995H176.888C177.736 22.0152 178.574 21.7983 179.304 21.369V24.7783C178.408 25.1427 177.449 25.3325 176.481 25.3372H176.379C175.84 25.3323 175.303 25.2724 174.776 25.1584C174.071 24.9913 173.386 24.7515 172.732 24.443C171.897 24.0506 171.21 23.4043 170.773 22.5985C170.227 21.5998 169.961 20.4749 170 19.3401V7.7202H166.369Z" fill="white"/>
<path d="M186.96 18.5124C186.96 20.8337 188.622 21.9945 191.945 21.9945H192.007C195.14 21.9945 196.707 20.8767 196.71 18.641V15.3377C195.516 15.1654 194.31 15.0777 193.102 15.075C192.518 15.0778 191.935 15.1282 191.358 15.226C190.694 15.3409 190.037 15.4976 189.393 15.6955C188.728 15.8915 188.126 16.2578 187.649 16.7575C187.197 17.2318 186.951 17.8611 186.96 18.5124ZM183.166 18.5571C183.139 17.607 183.365 16.6666 183.822 15.8306C184.28 14.9947 184.951 14.2927 185.769 13.7952C187.5 12.655 189.891 12.0849 192.939 12.0849C194.201 12.0816 195.46 12.1618 196.71 12.3252C196.631 10.5926 196.146 9.35738 195.282 8.60289C194.418 7.8483 192.979 7.48499 190.997 7.48499C189.037 7.51458 187.095 7.86194 185.249 8.51342V5.28852C187.254 4.53894 189.379 4.16009 191.522 4.17062C194.416 4.17062 196.65 4.91589 198.224 6.40632C199.797 7.89674 200.586 10.0244 200.589 12.7891V18.7192C200.588 19.1602 200.545 19.5999 200.46 20.0327C200.316 20.6144 200.105 21.1772 199.827 21.7094C199.499 22.3914 199.036 23.0014 198.467 23.5036C197.711 24.1093 196.839 24.5562 195.903 24.8169C194.624 25.2074 193.29 25.396 191.951 25.3758C190.588 25.4067 189.228 25.218 187.926 24.8169C186.977 24.5435 186.093 24.0876 185.323 23.4756C184.73 22.9654 184.248 22.3418 183.905 21.6423C183.616 21.0946 183.4 20.5123 183.261 19.9097C183.184 19.463 183.144 19.0105 183.143 18.5571" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.0499 5.45796C29.0515 5.29712 29.0196 5.13765 28.9589 4.9887C28.8982 4.83977 28.8072 4.70433 28.6922 4.59018C28.5772 4.47603 28.4415 4.38544 28.2914 4.32362C28.1413 4.2618 27.9816 4.22998 27.8187 4.22998H8.86133V14.2229H17.175C17.6525 14.2229 18.1093 14.4105 18.4462 14.7442C18.7832 15.078 18.9732 15.5306 18.9732 16.0026V24.2426H29.0675V5.45796H29.0499Z" fill="#4d6eff"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.86109 14.223H1.10311C0.911479 14.2234 0.72464 14.1676 0.563348 14.0626C0.403653 13.9576 0.279093 13.8081 0.205633 13.6329C0.132174 13.4577 0.111396 13.2648 0.148126 13.0784C0.184856 12.892 0.275895 12.7205 0.411636 12.5856L8.86109 4.22998" fill="#a0b0ff"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.0675 24.2427L20.6181 32.6073C20.4839 32.7416 20.3115 32.8333 20.1246 32.8705C19.9362 32.9079 19.743 32.8889 19.5657 32.8164C19.39 32.7439 19.2383 32.6209 19.1329 32.4631C19.0275 32.3055 18.9716 32.1201 18.9732 31.931V24.2427" fill="#a0b0ff"/>
</svg></a>
<div class="nav-links">
<a href="Index.html">Home</a>
<a href="Phase1_Start_Here.html" class="nav-pilot">⚡ Pilot — Start Here</a>
<a href="Diagram_Beta_Pilot_Manual.html" class="nav-pilot">Pilot — Workflow</a>
<a href="Reference_Phase1_Workflow.html" class="nav-pilot">Pilot — Reference</a>
<div class="nav-div"></div>
<a href="Concepta_Intake_Process_Executive_Brief.html">Initiative Brief</a>
<a href="Workflow_Macro_Visual.html" class="nav-workflow">Future Phase Workflow</a>
<div class="nav-div"></div>
<a href="Reference_Prerequisites_GoLive.html">Account Setup</a>
<a href="Reference_Intake_Form.html">Intake / Request Tracking</a>
<a href="Reference_Budget_Model.html">Budget Model</a>
<div class="nav-div"></div>
<a href="Templates.html" class="nav-templates">⊞ Templates</a>
<a href="https://www.notion.so/concepta/Internal-Team-Meetings-17b4767c73b0802fae20ecc7c6981ad5" target="_blank" class="nav-templates" style="margin-left:2px">📋 Meeting Notes</a>
<a href="WIP.html" class="nav-wip nav-active" style="margin-left:2px">🚧 WIP</a>
<a href="Archive.html" class="nav-archive" style="margin-left:4px">📦 Archive</a>
</div>
</nav>
<div class="hero">
<div class="hero-inner">
<div class="hero-eyebrow"><span></span> Client Billing View · Billing Cycle Report</div>
<h1>Service Finance Company<br><em style="color:rgba(255,255,255,.65)">Activity & Budget Summary</em></h1>
<p class="hero-sub">Itemized log of all activities completed this billing cycle, organized by service epic — giving you clear visibility into where your budget was spent and what was delivered.</p>
<div class="hero-meta">
<div class="hero-meta-item">
<span class="label">Billing Cycle</span>
<span class="value">March 3 – March 28, 2026</span>
</div>
<div class="hero-meta-item">
<span class="label">Cycle Duration</span>
<span class="value">4 Weeks</span>
</div>
<div class="hero-meta-item">
<span class="label">Total Budget</span>
<span class="value">519 hrs</span>
</div>
<div class="hero-meta-item">
<span class="label">Account PDM</span>
<span class="value">Anne Shrake</span>
</div>
</div>
<div class="draft-badge">⚠ Draft · Placeholder data — structure and format subject to change</div>
</div>
</div>
<div class="page">
<div class="callout callout-info">
<div class="callout-icon">💡</div>
<div class="callout-body">
<strong>How to read this view</strong>
Each section below represents a service epic — a pre-agreed budget allocation for a specific type of work. Expand any epic to see the itemized activity log with hours logged per ticket. Budget bars show utilization against your baseline allocation for this cycle.
</div>
</div>
<!-- ── CYCLE BUDGET SUMMARY ── -->
<div class="cycle-summary">
<div class="cycle-summary-header">
<h3>Cycle Budget Summary — March 3 – March 28, 2026</h3>
<span>519 hrs total baseline</span>
</div>
<div class="cycle-buckets">
<div class="cycle-bucket">
<div class="cb-label">Planning / Ops</div>
<div class="cb-hrs">38</div>
<div class="cb-baseline">of 52 hrs baseline</div>
<div class="cb-bar"><div class="cb-fill safe" style="width:73%"></div></div>
</div>
<div class="cycle-bucket">
<div class="cb-label">Prod Support</div>
<div class="cb-hrs">41</div>
<div class="cb-baseline">of 45 hrs baseline</div>
<div class="cb-bar"><div class="cb-fill warn" style="width:91%"></div></div>
</div>
<div class="cycle-bucket">
<div class="cb-label">Maintenance / Dev</div>
<div class="cb-hrs">187</div>
<div class="cb-baseline">of 207 hrs baseline</div>
<div class="cb-bar"><div class="cb-fill safe" style="width:90%"></div></div>
</div>
<div class="cycle-bucket">
<div class="cb-label">Deployments</div>
<div class="cb-hrs">62</div>
<div class="cb-baseline">of 83 hrs baseline</div>
<div class="cb-bar"><div class="cb-fill safe" style="width:75%"></div></div>
</div>
<div class="cycle-bucket">
<div class="cb-label">Buffer</div>
<div class="cb-hrs">18</div>
<div class="cb-baseline">of 132 hrs baseline</div>
<div class="cb-bar"><div class="cb-fill safe" style="width:14%"></div></div>
</div>
</div>
<div class="cycle-totals">
<div class="ct-item">
<div class="ct-label">Total Hours Logged</div>
<div class="ct-value">346 hrs</div>
</div>
<div class="ct-item">
<div class="ct-label">Remaining This Cycle</div>
<div class="ct-value green">173 hrs</div>
</div>
<div class="ct-item">
<div class="ct-label">Budget Utilization</div>
<div class="ct-value amber">67%</div>
</div>
</div>
</div>
<!-- ══════════════════════════════════════ -->
<!-- EPIC 1: PLANNING / OPS / NEW REQUESTS -->
<!-- ══════════════════════════════════════ -->
<div class="epic-section epic-planning">
<div class="epic-header" onclick="toggleEpic(this)">
<div class="epic-icon">📋</div>
<div class="epic-title">Planning / Ops / New Requests</div>
<div class="epic-meta">
<div class="epic-hrs">38 hrs logged</div>
<div class="epic-budget">of 52 hrs baseline</div>
<div class="epic-pill">73% utilized</div>
<div class="epic-toggle open">▾</div>
</div>
</div>
<div class="epic-progress"><div class="epic-progress-fill safe" style="width:73%;background:#2563eb"></div></div>
<div class="epic-body">
<table class="ticket-table">
<thead>
<tr>
<th style="width:100px">Ticket ID</th>
<th>Description</th>
<th style="width:120px">Assignee</th>
<th style="width:110px">Status</th>
<th style="width:80px;text-align:right">Hrs Logged</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="ticket-id">PLN-0041</span></td>
<td class="ticket-desc">MVP Prequal: Requirements analysis and scoping session
<span class="sub">New Request — v3.11.0 · Standard prequal flow applicant and co-applicant</span></td>
<td>Anne Shrake</td>
<td><span class="ticket-status s-progress">In Progress</span></td>
<td class="hrs">12.0</td>
</tr>
<tr>
<td><span class="ticket-id">PLN-0042</span></td>
<td class="ticket-desc">App Store Age Requirements — T-shirt sizing and scope estimation
<span class="sub">New Request · SFC Borrower App + SFC Dealer App</span></td>
<td>Anne Shrake, Andre Neto</td>
<td><span class="ticket-status s-review">In Review</span></td>
<td class="hrs">8.5</td>
</tr>
<tr>
<td><span class="ticket-id">PLN-0043</span></td>
<td class="ticket-desc">Billing cycle planning ceremonies — sprint planning, backlog grooming
<span class="sub">4-week cycle · All workstreams</span></td>
<td>Anne Shrake</td>
<td><span class="ticket-status s-done">Done</span></td>
<td class="hrs">10.0</td>
</tr>
<tr>
<td><span class="ticket-id">PLN-0044</span></td>
<td class="ticket-desc">Maintenance Mode capability — feasibility review and estimation
<span class="sub">New Request · SFC Dealer App + SFC Borrower App</span></td>
<td>Anne Shrake, Emanuel Andrade</td>
<td><span class="ticket-status s-review">In Review</span></td>
<td class="hrs">7.5</td>
</tr>
<tr>
<td><span class="ticket-id">PLN-0045</span></td>
<td class="ticket-desc">Weekly status updates and stakeholder communications
<span class="sub">Ongoing · PDM coordination</span></td>
<td>Anne Shrake</td>
<td><span class="ticket-status s-done">Done</span></td>
<td class="hrs">0 hrs <span style="font-size:10px;font-weight:400;color:var(--ink-light)">(ops)</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- ══════════════════════════════════ -->
<!-- EPIC 2: PRODUCTION SUPPORT -->
<!-- ══════════════════════════════════ -->
<div class="epic-section epic-prodsupport">
<div class="epic-header" onclick="toggleEpic(this)">
<div class="epic-icon">🛠️</div>
<div class="epic-title">Production Support</div>
<div class="epic-meta">
<div class="epic-hrs">41 hrs logged</div>
<div class="epic-budget">of 45 hrs baseline</div>
<div class="epic-pill" style="background:#fee2e2;color:#991b1b;border-color:#fca5a5">91% utilized ⚠</div>
<div class="epic-toggle open">▾</div>
</div>
</div>
<div class="epic-progress"><div class="epic-progress-fill" style="width:91%;background:#dc2626"></div></div>
<div class="epic-body">
<table class="ticket-table">
<thead>
<tr>
<th style="width:100px">Ticket ID</th>
<th>Description</th>
<th style="width:120px">Assignee</th>
<th style="width:110px">Status</th>
<th style="width:80px;text-align:right">Hrs Logged</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="ticket-id">PS-0088</span></td>
<td class="ticket-desc">v3.10.1 post-PROD monitoring — Android rooted device access issues
<span class="sub">Sev 2 · SFC Dealer App · Reported by dealers post 2/9 release</span></td>
<td>Jay Chulliyot, Andre Neto</td>
<td><span class="ticket-status s-done">Resolved</span></td>
<td class="hrs">14.5</td>
</tr>
<tr>
<td><span class="ticket-id">PS-0089</span></td>
<td class="ticket-desc">iOS app freeze — iPad users (7th gen and older)
<span class="sub">Sev 3 · SFC Dealer App · Keyboard navigation fix deployed in v3.10.3</span></td>
<td>Jay Chulliyot, Flavio Rodrigues</td>
<td><span class="ticket-status s-done">Resolved</span></td>
<td class="hrs">11.0</td>
</tr>
<tr>
<td><span class="ticket-id">PS-0090</span></td>
<td class="ticket-desc">Loan Pipeline disparity — triage and SFC coordination
<span class="sub">Sev 3 · Ongoing · SFC optimizing response time on their end</span></td>
<td>Jay Chulliyot, Sankar</td>
<td><span class="ticket-status s-progress">In Progress</span></td>
<td class="hrs">9.0</td>
</tr>
<tr>
<td><span class="ticket-id">PS-0091</span></td>
<td class="ticket-desc">Elevated prod support triage — USPS API and general support requests
<span class="sub">Sev 4 · Multiple minor reported issues · office hours coverage</span></td>
<td>Jay Chulliyot</td>
<td><span class="ticket-status s-done">Resolved</span></td>
<td class="hrs">6.5</td>
</tr>
</tbody>
</table>
<div style="padding:10px 14px;background:#fff8f8;border-top:1px solid #fecaca;font-size:11px;color:#991b1b;font-weight:600;border-radius:0 0 8px 8px">
⚠ Production Support budget at 91% utilization with 1 week remaining in cycle. PDM has been notified. Buffer hours available if overage is required.
</div>
</div>
</div>
<!-- ══════════════════════════════════ -->
<!-- EPIC 3: MAINTENANCE / DEVELOPMENT -->
<!-- ══════════════════════════════════ -->
<div class="epic-section epic-maintenance">
<div class="epic-header" onclick="toggleEpic(this)">
<div class="epic-icon">⚙️</div>
<div class="epic-title">Maintenance / Development</div>
<div class="epic-meta">
<div class="epic-hrs">187 hrs logged</div>
<div class="epic-budget">of 207 hrs baseline</div>
<div class="epic-pill">90% utilized</div>
<div class="epic-toggle open">▾</div>
</div>
</div>
<div class="epic-progress"><div class="epic-progress-fill" style="width:90%;background:#16a34a"></div></div>
<div class="epic-body">
<table class="ticket-table">
<thead>
<tr>
<th style="width:100px">Ticket ID</th>
<th>Description</th>
<th style="width:120px">Assignee</th>
<th style="width:110px">Status</th>
<th style="width:80px;text-align:right">Hrs Logged</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="ticket-id">DEV-0201</span></td>
<td class="ticket-desc">v3.10.3 — Prove/Prefill workflow fix + iOS landscape mode improvement
<span class="sub">SFC Dealer App · iOS only · Live since 3/10/26</span></td>
<td>Andre Neto, Flavio Rodrigues</td>
<td><span class="ticket-status s-done">Done</span></td>
<td class="hrs">42.0</td>
</tr>
<tr>
<td><span class="ticket-id">DEV-0202</span></td>
<td class="ticket-desc">v3.11.0 — MVP Prequal standard flow (applicant + co-applicant) — Dev
<span class="sub">SFC Dealer App + API · Business Workstream · In active development</span></td>
<td>Emanuel Andrade, Flavio Rodrigues</td>
<td><span class="ticket-status s-progress">In Progress</span></td>
<td class="hrs">68.0</td>
</tr>
<tr>
<td><span class="ticket-id">DEV-0203</span></td>
<td class="ticket-desc">Borrower App — Akamai SDK Bot Attack Prevention
<span class="sub">SFC Borrower App · DC Migration Workstream · In Dev</span></td>
<td>Benjamin Apple</td>
<td><span class="ticket-status s-progress">In Progress</span></td>
<td class="hrs">28.0</td>
</tr>
<tr>
<td><span class="ticket-id">DEV-0204</span></td>
<td class="ticket-desc">Borrower App — Pen Test items iOS and Android (Sev High/Med)
<span class="sub">SFC Borrower App · Securities & Vulnerabilities Workstream</span></td>
<td>Benjamin Apple</td>
<td><span class="ticket-status s-progress">In Progress</span></td>
<td class="hrs">31.0</td>
</tr>
<tr>
<td><span class="ticket-id">DEV-0205</span></td>
<td class="ticket-desc">Home Depot push campaign — March 2026 series
<span class="sub">SFC Dealer App · Business Workstream · 3 campaigns delivered</span></td>
<td>Emanuel Andrade</td>
<td><span class="ticket-status s-done">Done</span></td>
<td class="hrs">18.0</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- ══════════════════════════════════ -->
<!-- EPIC 4: DEPLOYMENTS / RELEASES -->
<!-- ══════════════════════════════════ -->
<div class="epic-section epic-deployments">
<div class="epic-header" onclick="toggleEpic(this)">
<div class="epic-icon">🚀</div>
<div class="epic-title">Deployments / Releases</div>
<div class="epic-meta">
<div class="epic-hrs">62 hrs logged</div>
<div class="epic-budget">of 83 hrs baseline</div>
<div class="epic-pill">75% utilized</div>
<div class="epic-toggle open">▾</div>
</div>
</div>
<div class="epic-progress"><div class="epic-progress-fill" style="width:75%;background:#6d28d9"></div></div>
<div class="epic-body">
<table class="ticket-table">
<thead>
<tr>
<th style="width:100px">Ticket ID</th>
<th>Description</th>
<th style="width:120px">Assignee</th>
<th style="width:110px">Status</th>
<th style="width:80px;text-align:right">Hrs Logged</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="ticket-id">REL-0055</span></td>
<td class="ticket-desc">v3.10.3 — iOS release · QA staging validation + App Store submission
<span class="sub">SFC Dealer App · iOS only · App Store submission Mon–Wed window</span></td>
<td>Raquel Comunale, SFC QA</td>
<td><span class="ticket-status s-progress">In Progress</span></td>
<td class="hrs">24.0</td>
</tr>
<tr>
<td><span class="ticket-id">REL-0056</span></td>
<td class="ticket-desc">v3.10.1 Android — hotfix PROD release validation + post-release monitoring
<span class="sub">SFC Dealer App · Released 2/23/26 · Post-release monitoring complete</span></td>
<td>Raquel Comunale, Andre Neto</td>
<td><span class="ticket-status s-done">Done</span></td>
<td class="hrs">18.0</td>
</tr>
<tr>
<td><span class="ticket-id">REL-0057</span></td>
<td class="ticket-desc">Truist Migration testing coordination — Android compiled builds
<span class="sub">SFC Borrower App + Dealer App · DC Migration · Distributed to Truist test team</span></td>
<td>Selvakumar</td>
<td><span class="ticket-status s-progress">In Progress</span></td>
<td class="hrs">12.0</td>
</tr>
<tr>
<td><span class="ticket-id">REL-0058</span></td>
<td class="ticket-desc">OTP/MFA audit artifacts — NYDFS compliance evidence
<span class="sub">All SFC apps · Truist NYDFS Workstream · Shipped to Keshav 10/10</span></td>
<td>Flavio Rodrigues, Jefferson Bruno</td>
<td><span class="ticket-status s-review">In Review</span></td>
<td class="hrs">8.0</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- ══════════════════════════════════ -->
<!-- EPIC 5: BUFFER -->
<!-- ══════════════════════════════════ -->
<div class="epic-section epic-buffer">
<div class="epic-header" onclick="toggleEpic(this)">
<div class="epic-icon">🛡️</div>
<div class="epic-title">Buffer</div>
<div class="epic-meta">
<div class="epic-hrs">18 hrs logged</div>
<div class="epic-budget">of 132 hrs baseline</div>
<div class="epic-pill">14% utilized</div>
<div class="epic-toggle open">▾</div>
</div>
</div>
<div class="epic-progress"><div class="epic-progress-fill" style="width:14%;background:#b45309"></div></div>
<div class="epic-body">
<table class="ticket-table">
<thead>
<tr>
<th style="width:100px">Ticket ID</th>
<th>Description</th>
<th style="width:120px">Assignee</th>
<th style="width:110px">Status</th>
<th style="width:80px;text-align:right">Hrs Logged</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="ticket-id">BUF-0012</span></td>
<td class="ticket-desc">Auditor Demo Call — Truist audit team walkthrough of mobile apps
<span class="sub">SFC Dealer App · Unplanned · Screenshots captured by audit team</span></td>
<td>Anne Shrake, Andre Neto</td>
<td><span class="ticket-status s-done">Done</span></td>
<td class="hrs">6.0</td>
</tr>
<tr>
<td><span class="ticket-id">BUF-0013</span></td>
<td class="ticket-desc">SFC QA coordination — unplanned test environment support requests
<span class="sub">Ad hoc · Multiple minor coordination items</span></td>
<td>Raquel Comunale</td>
<td><span class="ticket-status s-done">Done</span></td>
<td class="hrs">12.0</td>
</tr>
</tbody>
</table>
<div style="padding:10px 14px;background:#fffbeb;border-top:1px solid #fcd34d;font-size:11px;color:#92400e;border-radius:0 0 8px 8px">
💡 Buffer is at 14% utilization. Remaining buffer hours are available to absorb any Production Support overage this cycle if required.
</div>
</div>
</div>
<hr>
<div class="callout callout-warn">
<div class="callout-icon">⚠️</div>
<div class="callout-body">
<strong>Draft — Structure & Data Subject to Change</strong>
This is a working draft of the client billing view format. Placeholder data has been used to illustrate the structure. Final implementation will pull from Zoho Sprint activity logs per billing cycle. Epic baselines, ticket IDs, and hour allocations will reflect each account's confirmed service bucket structure.
</div>
</div>
</div>
<footer>
<svg width="80" height="13" viewBox="0 0 201 33" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align:middle;margin-right:6px;opacity:.6">
<path d="M41.4673 22.6537C39.8187 20.8428 38.9963 18.2178 39 14.7786C39.0038 11.3394 39.8262 8.71248 41.4673 6.89787C43.1122 5.08697 45.5118 4.18152 48.666 4.18152C50.7555 4.16768 52.8286 4.54703 54.775 5.29941V8.882C53.0032 8.00664 51.0527 7.54403 49.0725 7.52949H48.9653C47.0569 7.52949 45.5607 8.01757 44.4767 8.99384C43.3926 9.97 42.8525 11.889 42.8563 14.7506C42.8268 16.0424 42.9944 17.3313 43.3531 18.5736C43.5809 19.4472 44.0783 20.2287 44.7759 20.8092C45.3445 21.2551 46.0029 21.5753 46.7069 21.7483C47.4616 21.9236 48.2353 22.0063 49.0104 21.9941C51.0147 21.9922 52.9927 21.5433 54.7976 20.6807V24.2354C52.8505 24.9853 50.7779 25.3646 48.6886 25.3532C45.5344 25.3532 43.1348 24.4478 41.4899 22.6369" fill="white"/>
<path d="M62.804 11.0065C62.4684 12.2414 62.3144 13.5176 62.3467 14.796C62.3155 16.0706 62.4695 17.3431 62.804 18.5742C63.0131 19.4422 63.4907 20.2238 64.1704 20.8099C64.7114 21.2542 65.3402 21.5817 66.0167 21.7712C67.505 22.0908 69.0452 22.0908 70.5335 21.7712C71.2106 21.5834 71.8398 21.2557 72.3797 20.8099C73.0592 20.2227 73.5384 19.4417 73.7517 18.5742C74.0824 17.3385 74.2345 16.0628 74.2035 14.7848C74.2345 13.5069 74.0824 12.231 73.7517 10.9954C73.537 10.1284 73.0581 9.34786 72.3797 8.75968C71.8415 8.31452 71.2142 7.98693 70.5391 7.79836C69.0508 7.47879 67.5106 7.47879 66.0223 7.79836C65.346 7.98793 64.717 8.31533 64.1761 8.75968C63.4978 9.34696 63.0205 10.1281 62.8098 10.9954L62.804 11.0065ZM59.343 20.1001C58.719 18.4018 58.4222 16.6026 58.468 14.796C58.4222 12.9893 58.719 11.1903 59.343 9.4919C59.8068 8.19677 60.6355 7.06011 61.7314 6.21665C62.6613 5.52686 63.7067 5.00467 64.8198 4.67407C67.0829 4.07023 69.4673 4.07023 71.7305 4.67407C72.8447 5.00567 73.8919 5.52776 74.8245 6.21665C75.9143 7.06222 76.737 8.19867 77.1959 9.4919C77.8246 11.1892 78.1235 12.9888 78.0766 14.796C78.1235 16.6032 77.8246 18.4029 77.1959 20.1001C76.734 21.3947 75.9071 22.5312 74.8132 23.3753C73.8806 24.0642 72.8335 24.5863 71.7191 24.918C69.4559 25.5217 67.0716 25.5217 64.8084 24.918C63.6954 24.5873 62.65 24.0651 61.72 23.3753C60.6243 22.5318 59.7955 21.3953 59.3318 20.1001" fill="white"/>
<path d="M81.605 25.0514V6.27751C84.3483 4.90344 87.3777 4.18195 90.4523 4.17041C93.0872 4.17041 95.146 4.84676 96.629 6.19927C98.1121 7.55188 98.8649 9.42798 98.8875 11.8276V25.0514H95.0087V11.509C95.0663 10.473 94.7322 9.45276 94.0714 8.64731C93.4428 7.95059 92.1875 7.60033 90.3055 7.59662C88.648 7.5912 86.9999 7.84397 85.4217 8.34549V25.0514H81.605Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.0499 5.45796C29.0515 5.29712 29.0196 5.13765 28.9589 4.9887C28.8982 4.83977 28.8072 4.70433 28.6922 4.59018C28.5772 4.47603 28.4415 4.38544 28.2914 4.32362C28.1413 4.2618 27.9816 4.22998 27.8187 4.22998H8.86133V14.2229H17.175C17.6525 14.2229 18.1093 14.4105 18.4462 14.7442C18.7832 15.078 18.9732 15.5306 18.9732 16.0026V24.2426H29.0675V5.45796H29.0499Z" fill="#4d6eff"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.86109 14.223H1.10311C0.911479 14.2234 0.72464 14.1676 0.563348 14.0626C0.403653 13.9576 0.279093 13.8081 0.205633 13.6329C0.132174 13.4577 0.111396 13.2648 0.148126 13.0784C0.184856 12.892 0.275895 12.7205 0.411636 12.5856L8.86109 4.22998" fill="#a0b0ff"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.0675 24.2427L20.6181 32.6073C20.4839 32.7416 20.3115 32.8333 20.1246 32.8705C19.9362 32.9079 19.743 32.8889 19.5657 32.8164C19.39 32.7439 19.2383 32.6209 19.1329 32.4631C19.0275 32.3055 18.9716 32.1201 18.9732 31.931V24.2427" fill="#a0b0ff"/>
</svg>
— Client Billing View · Service Finance Company · March 2026 · Draft · Internal Use
</footer>
<script>
function toggleEpic(header) {
const body = header.closest('.epic-section').querySelector('.epic-body');
const toggle = header.querySelector('.epic-toggle');
body.classList.toggle('collapsed');
toggle.classList.toggle('open');
}
</script>
</body>
</html>