From 8b758353101163708452cc6fb374cc771700a788 Mon Sep 17 00:00:00 2001
From: Adam Moussa <adam@seahavenind.com>
Date: Tue, 11 Aug 2026 15:20:30 -0400
Subject: [PATCH] feat(web): add invoice grid lines and bold headers

Refs: AP-44
---
 src/components/MockDataGrid.tsx | 24 +++++++++++++++++++-----
 1 file changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/MockDataGrid.tsx b/src/components/MockDataGrid.tsx
index b2d4c15..50a6b9b 100644
--- a/src/components/MockDataGrid.tsx
+++ b/src/components/MockDataGrid.tsx
@@ -6,6 +6,7 @@ type MockDataGridProps<R extends GridValidRowModel> = DataGridProps<R> & {
 
 export function MockDataGrid<R extends GridValidRowModel>({
   "data-testid": testId,
+  sx,
   ...props
 }: MockDataGridProps<R>) {
   return (
@@ -19,11 +20,24 @@ export function MockDataGrid<R extends GridValidRowModel>({
           pagination: { paginationModel: { pageSize: 10, page: 0 } },
         }}
         getRowId={(row) => row.id as string}
-        sx={{
-          border: 1,
-          borderColor: "divider",
-          backgroundColor: "background.paper",
-        }}
+        sx={[
+          {
+            border: 1,
+            borderColor: "divider",
+            backgroundColor: "background.paper",
+            "& .MuiDataGrid-columnHeaderTitle": {
+              fontWeight: 700,
+            },
+            "& .MuiDataGrid-cell": {
+              borderBottom: "1px solid",
+              borderColor: "divider",
+            },
+            "& .MuiDataGrid-row:last-of-type .MuiDataGrid-cell": {
+              borderBottom: "none",
+            },
+          },
+          ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
+        ]}
         {...props}
       />
     </div>