Skip to content

Commit

Permalink
Add totals of years (#53)
Browse files Browse the repository at this point in the history
  • Loading branch information
@soker90
soker90 authored Sep 27, 2022
1 parent 6398e0a commit 7ca8029
Show file tree
Hide file tree
Showing 5 changed files with 151 additions and 3 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

106 changes: 106 additions & 0 deletions packages/client/src/pages/Year/__snapshots__/Year.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down
28 changes: 28 additions & 0 deletions packages/client/src/pages/Year/components/YearCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions packages/client/src/pages/Year/components/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export { default as Header } from './Header'
export { default as YearTable } from './YearTable'
export { default as YearCard } from './YearCard'
17 changes: 15 additions & 2 deletions packages/client/src/pages/Year/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}/>
Expand Down

1 comment on commit 7ca8029

@vercel
Copy link

@vercel vercel bot commented on 7ca8029 Sep 27, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

finper – ./

finper-soker90.vercel.app
finper.vercel.app
finper-git-master-soker90.vercel.app

Please sign in to comment.