From 4fe8bd6a3dc32bd82eff8143c562bdc8617eab35 Mon Sep 17 00:00:00 2001
From: Chris Jacobs <apexearth@gmail.com>
Date: Mon, 25 Sep 2023 19:10:12 -0700
Subject: [PATCH] feat: financial statement

---
 libs/analytics/src/FinancialStatement.tsx | 79 ++++++++++++-----------
 1 file changed, 43 insertions(+), 36 deletions(-)

diff --git a/libs/analytics/src/FinancialStatement.tsx b/libs/analytics/src/FinancialStatement.tsx
index 326ce2ff4..f1a2a6b47 100644
--- a/libs/analytics/src/FinancialStatement.tsx
+++ b/libs/analytics/src/FinancialStatement.tsx
@@ -14,9 +14,6 @@ export const FinancialStatement = (props: {
   columns: string[];
   data: Record<string, Record<string, Record<string, number[]>>>;
 }) => {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
-  const columnWeight = props.columns.length + 2;
   return (
     <Stack
       gap={2}
@@ -24,45 +21,55 @@ export const FinancialStatement = (props: {
       fontFamily={'Inter'}
       fontSize={{ xs: '.7rem', sm: '.875rem' }}
     >
-      <Paper
-        sx={{
-          borderRadius: { xs: 1, sm: 2, md: 3 },
-          overflow: 'hidden',
-        }}
+      <Header columns={props.columns} />
+      {Object.entries(props.data).map(([title, data]) => (
+        <Table key={title} title={title} data={data} />
+      ))}
+    </Stack>
+  );
+};
+
+const Header = (props: { columns: string[] }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const columnWeight = props.columns.length + 2;
+  return (
+    <Paper
+      sx={{
+        borderRadius: { xs: 1, sm: 2, md: 3 },
+        overflow: 'hidden',
+      }}
+    >
+      <Stack
+        direction={'row'}
+        alignItems={'center'}
+        justifyContent={'space-between'}
+        color={(theme) => theme.palette.primary.contrastText}
+        sx={{ backgroundColor: (theme) => theme.palette.grey[800] }}
+        fontSize={{ xs: '.875rem', sm: '1.125rem' }}
+        px={{ xs: 1, sm: 2, md: 4 }}
+        py={{ xs: 2, sm: 3, md: 4 }}
       >
-        <Stack
-          direction={'row'}
-          justifyContent={'space-between'}
-          color={(theme) => theme.palette.primary.contrastText}
-          sx={{ backgroundColor: (theme) => theme.palette.grey[800] }}
-          fontSize={{ xs: '.875rem', sm: '1.125rem' }}
-          px={{ xs: 1, sm: 2, md: 4 }}
-          py={{ xs: 2, sm: 3, md: 4 }}
-        >
-          <Box width={`${(100 / columnWeight) * 1.5}%`} />
-          {props.columns.map((column) => (
-            <Box
-              key={column}
-              width={`${100 / columnWeight}%`}
-              maxWidth={250}
-              textAlign={'right'}
-            >
-              {column}
-            </Box>
-          ))}
+        {props.columns.map((column, index) => (
           <Box
-            width={`${100 / columnWeight}%`}
+            key={column}
+            width={`${(100 / columnWeight) * (index === 0 ? 2.5 : 1)}%`}
             maxWidth={250}
             textAlign={'right'}
+            ml={1}
           >
-            {isMobile ? 'Diff' : 'Difference'}
+            {column}
           </Box>
-        </Stack>
-      </Paper>
-      {Object.entries(props.data).map(([title, data]) => (
-        <Table key={title} title={title} data={data} />
-      ))}
-    </Stack>
+        ))}
+        <Box
+          width={`${100 / columnWeight}%`}
+          maxWidth={250}
+          textAlign={'right'}
+        >
+          {isMobile ? 'Diff' : 'Difference'}
+        </Box>
+      </Stack>
+    </Paper>
   );
 };