From 7ca802958dcc62d8e9dda1d619c596a788661637 Mon Sep 17 00:00:00 2001
From: Eduardo Parra <edue17@gmail.com>
Date: Tue, 27 Sep 2022 21:19:56 +0200
Subject: [PATCH] Add totals of years (#53)

---
 package-lock.json                             |   2 +-
 .../Year/__snapshots__/Year.test.tsx.snap     | 106 ++++++++++++++++++
 .../src/pages/Year/components/YearCard.tsx    |  28 +++++
 .../client/src/pages/Year/components/index.ts |   1 +
 packages/client/src/pages/Year/index.tsx      |  17 ++-
 5 files changed, 151 insertions(+), 3 deletions(-)
 create mode 100644 packages/client/src/pages/Year/components/YearCard.tsx

diff --git a/package-lock.json b/package-lock.json
index 489c69b7..e138e5e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15449,7 +15449,7 @@
         "@ant-design/icons": "^4.7.0",
         "@emotion/react": "^11.9.0",
         "@emotion/styled": "^11.8.1",
-        "@faker-js/faker": "*",
+        "@faker-js/faker": "^7.5.0",
         "@mui/material": "^5.9.0",
         "@mui/x-date-pickers": "^5.0.0-alpha.7",
         "@soker90/react-mui-table": "^1.0.3",
diff --git a/packages/client/src/pages/Year/__snapshots__/Year.test.tsx.snap b/packages/client/src/pages/Year/__snapshots__/Year.test.tsx.snap
index d6bed29e..6fc6e13e 100644
--- a/packages/client/src/pages/Year/__snapshots__/Year.test.tsx.snap
+++ b/packages/client/src/pages/Year/__snapshots__/Year.test.tsx.snap
@@ -88,6 +88,112 @@ exports[`Year > renders without crashing 1`] = `
       class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
     />
   </div>
+  <div
+    class="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-3 css-18lu0av-MuiGrid-root"
+  >
+    <div
+      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-1lwnmxi-MuiGrid-root"
+    >
+      <div
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-13mu4hp-MuiPaper-root-MuiCard-root"
+      >
+        <div
+          class="MuiCardContent-root css-1uvcgxq-MuiCardContent-root"
+        >
+          <div
+            class="css-zgbp5c-MuiStack-root"
+          >
+            <h6
+              class="MuiTypography-root MuiTypography-h6 css-oym2bt-MuiTypography-root"
+            >
+              Ingresos
+            </h6>
+            <div
+              class="MuiGrid-root MuiGrid-container css-1vam7s3-MuiGrid-root"
+            >
+              <div
+                class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+              >
+                <h4
+                  class="MuiTypography-root MuiTypography-h4 css-p7gs2c-MuiTypography-root"
+                >
+                  0 €
+                </h4>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-1lwnmxi-MuiGrid-root"
+    >
+      <div
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-13mu4hp-MuiPaper-root-MuiCard-root"
+      >
+        <div
+          class="MuiCardContent-root css-1uvcgxq-MuiCardContent-root"
+        >
+          <div
+            class="css-zgbp5c-MuiStack-root"
+          >
+            <h6
+              class="MuiTypography-root MuiTypography-h6 css-oym2bt-MuiTypography-root"
+            >
+              Gastos
+            </h6>
+            <div
+              class="MuiGrid-root MuiGrid-container css-1vam7s3-MuiGrid-root"
+            >
+              <div
+                class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+              >
+                <h4
+                  class="MuiTypography-root MuiTypography-h4 css-ysl4mw-MuiTypography-root"
+                >
+                  0 €
+                </h4>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 css-1lwnmxi-MuiGrid-root"
+    >
+      <div
+        class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiCard-root css-13mu4hp-MuiPaper-root-MuiCard-root"
+      >
+        <div
+          class="MuiCardContent-root css-1uvcgxq-MuiCardContent-root"
+        >
+          <div
+            class="css-zgbp5c-MuiStack-root"
+          >
+            <h6
+              class="MuiTypography-root MuiTypography-h6 css-oym2bt-MuiTypography-root"
+            >
+              Balance
+            </h6>
+            <div
+              class="MuiGrid-root MuiGrid-container css-1vam7s3-MuiGrid-root"
+            >
+              <div
+                class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+              >
+                <h4
+                  class="MuiTypography-root MuiTypography-h4 css-ah5xzx-MuiTypography-root"
+                >
+                  0 €
+                </h4>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <h5
     class="MuiTypography-root MuiTypography-h5 css-1rit3o0-MuiTypography-root"
   >
diff --git a/packages/client/src/pages/Year/components/YearCard.tsx b/packages/client/src/pages/Year/components/YearCard.tsx
new file mode 100644
index 00000000..ee51ce29
--- /dev/null
+++ b/packages/client/src/pages/Year/components/YearCard.tsx
@@ -0,0 +1,28 @@
+import { Grid, Stack, Typography } from '@mui/material'
+import { MainCard } from 'components'
+import { format } from 'utils'
+
+interface Props {
+    title: string
+    data?: number
+    color?: string
+}
+
+const YearCard = ({ title, data = 0, color }: Props) => (
+    <MainCard contentSX={{ p: 2.25 }}>
+        <Stack spacing={0.5}>
+            <Typography variant="h6" fontWeight='bold' fontSize='medium'>
+                {title}
+            </Typography>
+            <Grid container alignItems="center">
+                <Grid item>
+                    <Typography variant="h4" sx={{ color: `${color || 'primary'}.main` }}>
+                        {format.euro(data)}
+                    </Typography>
+                </Grid>
+            </Grid>
+        </Stack>
+    </MainCard>
+)
+
+export default YearCard
diff --git a/packages/client/src/pages/Year/components/index.ts b/packages/client/src/pages/Year/components/index.ts
index eceb0c9c..7a93c103 100644
--- a/packages/client/src/pages/Year/components/index.ts
+++ b/packages/client/src/pages/Year/components/index.ts
@@ -1,2 +1,3 @@
 export { default as Header } from './Header'
 export { default as YearTable } from './YearTable'
+export { default as YearCard } from './YearCard'
diff --git a/packages/client/src/pages/Year/index.tsx b/packages/client/src/pages/Year/index.tsx
index 2269a411..1465ad47 100644
--- a/packages/client/src/pages/Year/index.tsx
+++ b/packages/client/src/pages/Year/index.tsx
@@ -2,17 +2,30 @@ import { useParams } from 'react-router-dom'
 
 import { useBudgetsYear } from './hooks'
 
-import { Header, YearTable } from './components'
-import { Typography } from '@mui/material'
+import { Header, YearCard, YearTable } from './components'
+import { Grid, Typography } from '@mui/material'
 import { MainCard } from 'components'
 
 const Budgets = () => {
   const { year } = useParams()
   const { expenses, incomes } = useBudgetsYear({ year })
 
+  const balance = (incomes?.at?.(-1)?.total ?? 0) - (expenses?.at?.(-1)?.total ?? 0)
+
   return (
         <>
             <Header year={year ?? ''}/>
+            <Grid container spacing={3} mb={3}>
+                <Grid item xs={12} md={4}>
+                    <YearCard title='Ingresos' data={incomes?.at?.(-1)?.total} color='info'/>
+                </Grid>
+                <Grid item xs={12} md={4}>
+                    <YearCard title='Gastos' data={expenses?.at?.(-1)?.total} color='error'/>
+                </Grid>
+                <Grid item xs={12} md={4}>
+                    <YearCard title='Balance' data={balance} color={balance < 0 ? 'warning' : 'success'}/>
+                </Grid>
+            </Grid>
             <Typography variant="h5">GASTOS</Typography>
             <MainCard sx={{ mt: 2 }} content={false}>
                 <YearTable data={expenses}/>