From d67de10317647540eca1235bda2c8aeab65fc120 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 19 Apr 2026 01:15:02 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/invoices.$invoiceId.tsx | 32 +++++++++++++++++++-----------
 1 file changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/routes/invoices.$invoiceId.tsx b/src/routes/invoices.$invoiceId.tsx
index b9341fa..7802443 100644
--- a/src/routes/invoices.$invoiceId.tsx
+++ b/src/routes/invoices.$invoiceId.tsx
@@ -241,14 +241,9 @@ function InvoiceDetail() {
         matter: groups.length === 1 ? (groups[0].caseRow?.title ?? null) : null,
         caseNumber: groups.length === 1 ? (groups[0].caseRow?.case_number ?? null) : null,
       },
-      groups: groups.map((g) => ({
-        caseNumber: g.caseRow?.case_number ?? "—",
-        caseTitle: g.caseRow?.title ?? "(unassigned)",
-        practiceArea: g.caseRow?.practice_area,
-        subtotal: g.subtotal,
-        items: g.items.map((it) => {
-          const name: string =
-            it.user?.full_name || it.user?.email || "";
+      groups: groups.map((g) => {
+        const mapItem = (it: any) => {
+          const name: string = it.user?.full_name || it.user?.email || "";
           const initials = name
             .trim()
             .split(/\s+/)
@@ -257,8 +252,7 @@ function InvoiceDetail() {
             .slice(0, 3)
             .join("")
             .toUpperCase();
-          const isNonBillable =
-            Number(it.amount) === 0 && (it.time_entry_id || it.expense_id);
+          const isNonBillable = Number(it.amount) === 0 && (it.time_entry_id || it.expense_id);
           return {
             kind: it.kind,
             description: it.description,
@@ -270,8 +264,22 @@ function InvoiceDetail() {
             user_initials: initials || null,
             billable: !isNonBillable,
           };
-        }),
-      })),
+        };
+        return {
+          caseNumber: g.caseRow?.case_number ?? "—",
+          caseTitle: g.caseRow?.title ?? "(unassigned)",
+          practiceArea: g.caseRow?.practice_area,
+          subtotal: g.subtotal,
+          items: g.items.map(mapItem),
+          subsections: g.subsections.map((s) => ({
+            key: s.key,
+            label: s.label,
+            billable: s.billable,
+            subtotal: s.subtotal,
+            items: s.items.map(mapItem),
+          })),
+        };
+      }),
       totals: {
         subtotal: Number(invoice.subtotal),
         tax: Number(invoice.tax),