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:
Norbert Maciaszek
2025-11-12 11:17:38 +01:00
parent 924a58501a
commit 2a7ee1edf6
2 changed files with 27 additions and 15 deletions

View File

@@ -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';

View File

@@ -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>