Refactor YearOverview component to improve gift status tracking, update statistics display with detailed breakdowns for planned, decided, bought, and wrapped gifts, and adjust budget calculations for better financial overview.
This commit is contained in:
@@ -1,12 +1,10 @@
|
||||
'use client';
|
||||
import { FC, useState } from 'react';
|
||||
import { formatCurrency } from '@/helpers/formatCurrency';
|
||||
import { formatStatus } from '@/helpers/formatStatus';
|
||||
import { GiftModal } from '../GiftModal';
|
||||
import { useGlobalStore } from '@/app/store/global';
|
||||
import { DB } from '@/lib/db';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Button } from '@/components/atoms/Button';
|
||||
import { Badge } from '@/components/atoms/Badge';
|
||||
import Link from 'next/link';
|
||||
import { Heading } from '@/components/atoms/Heading';
|
||||
|
||||
@@ -22,28 +22,42 @@ export const YearOverview: FC<Props> = async ({ year }) => {
|
||||
}),
|
||||
);
|
||||
|
||||
const planned = gifts.filter((gift) => gift.status === 'planned');
|
||||
const decided = gifts.filter((gift) => gift.status === 'decided');
|
||||
const bought = gifts.filter((gift) => gift.status === 'bought');
|
||||
const wrapped = gifts.filter((gift) => gift.status === 'wrapped');
|
||||
|
||||
const totalCost = gifts.reduce((acc, gift) => acc + gift.cost, 0);
|
||||
const averageCost = totalCost / gifts.length;
|
||||
const totalCostPlanned =
|
||||
planned.reduce((acc, gift) => acc + gift.cost, 0) + decided.reduce((acc, gift) => acc + gift.cost, 0);
|
||||
const totalCostBought = bought.reduce((acc, gift) => acc + gift.cost, 0);
|
||||
|
||||
const remainingBudget = data.budgetLimit - totalCostBought;
|
||||
|
||||
return (
|
||||
<div className='mb-6 md:mb-8'>
|
||||
<Heading size='large'>Podsumowanie roku {data.year}</Heading>
|
||||
<div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4'>
|
||||
<StatsCard title='Planowane prezenty' value={gifts.length} />
|
||||
<StatsCard title='Ilość prezentów' value={gifts.length} />
|
||||
<StatsCard title='Planowane prezenty' value={planned.length} />
|
||||
<StatsCard title='Do kupienia' value={decided.length} />
|
||||
<StatsCard title='Kupione' value={bought.length} />
|
||||
|
||||
<StatsCard
|
||||
title='Łączny koszt'
|
||||
value={formatCurrency(totalCost)}
|
||||
description={`Średnio: ${formatCurrency(averageCost)}`}
|
||||
title='Budżet'
|
||||
value={formatCurrency(remainingBudget)}
|
||||
description={`Ustawiony limit: ${formatCurrency(data.budgetLimit)}`}
|
||||
/>
|
||||
<StatsCard title='Łączny koszt' value={formatCurrency(totalCostBought)} description={`Poniesione koszty`} />
|
||||
<StatsCard
|
||||
title='Koszt prezentów'
|
||||
value={formatCurrency(totalCostPlanned)}
|
||||
description={`Prezenty do kupienia`}
|
||||
/>
|
||||
<StatsCard
|
||||
title='Status: Do kupienia'
|
||||
value={gifts.filter((gift) => gift.status === 'decided').length}
|
||||
description='Prezenty do kupienia'
|
||||
/>
|
||||
<StatsCard
|
||||
title='Status: Kupione'
|
||||
value={gifts.filter((gift) => gift.status === 'bought').length}
|
||||
description='Prezenty które zostały już kupione'
|
||||
title='Bufor'
|
||||
value={formatCurrency(remainingBudget - totalCostPlanned)}
|
||||
description={`Pozostałe pieniądze (budżet - poniesione koszty - koszt prezentów)`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user