feat: add YearOverview comp & init first page

src/lib/components/organisms/YearOverview.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { formatCurrency } from '$lib/helpers/formatCurrency';
+	import Heading from '../atoms/Heading.svelte';
+	import StatsCard from '../atoms/StatsCard.svelte';
+
+	type Props = {
+		heading?: string;
+		data: Year;
+	};
+
+	function getTotal(gifts: Gift[]) {
+		return gifts.reduce((acc, gift) => acc + gift.cost, 0);
+	}
+
+	let { heading, data }: Props = $props();
+
+	const gifts = $derived(data.expand.gifts);
+
+	const planned = $derived(gifts.filter((gift) => gift.status === 'planned'));
+	const decided = $derived(gifts.filter((gift) => gift.status === 'decided'));
+	const bought = $derived(gifts.filter((gift) => gift.status === 'bought'));
+	const ready = $derived(gifts.filter((gift) => gift.status === 'ready'));
+	const wrapped = $derived(gifts.filter((gift) => gift.status === 'wrapped'));
+
+	const total = $derived(getTotal(gifts));
+	const totalPlanned = $derived(getTotal(planned) + getTotal(decided));
+	const totalBought = $derived(getTotal(bought) + getTotal(ready) + getTotal(wrapped));
+
+	const totalLeft = $derived(data.budgetLimit - totalBought);
+</script>
+
+<div class="mb-6 md:mb-8">
+	<Heading size="large">{heading ?? `Podsumowanie roku ${data.year}`}</Heading>
+	<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+		<StatsCard title="Ilość prezentów" value={gifts.length} />
+		<StatsCard title="Planowane prezenty" value={planned.length} />
+		<StatsCard title="Do kupienia" value={decided.length} />
+		<StatsCard title="Do zapakowania" value={ready.length} />
+
+		<StatsCard
+			title="Budżet"
+			value={formatCurrency(totalLeft)}
+			description={`Ustawiony limit: ${formatCurrency(data.budgetLimit)}`}
+		/>
+		<StatsCard
+			title="Łączny koszt"
+			value={formatCurrency(totalBought)}
+			description={`Poniesione koszty`}
+		/>
+		<StatsCard
+			title="Koszt prezentów"
+			value={formatCurrency(totalPlanned)}
+			description={`Prezenty do kupienia`}
+		/>
+		<StatsCard
+			title="Bufor"
+			value={formatCurrency(totalLeft - totalPlanned)}
+			description={`Pozostałe pieniądze (budżet - poniesione koszty - koszt prezentów)`}
+		/>
+	</div>
+</div>

src/routes/+page.server.ts

@@ -0,0 +1,10 @@
+import { DB } from '$lib/integrations/db';
+
+export const load = async () => {
+	const year = new Date().getFullYear();
+	const yearData = await DB.getYear(year);
+
+	return {
+		year: yearData
+	};
+};

src/routes/+page.svelte

@@ -1,2 +1,8 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script>
+	import YearOverview from '$lib/components/organisms/YearOverview.svelte';
+
+	let { data } = $props();
+</script>
+
+<h1>{data.year.year}</h1>
+<YearOverview heading="Podsumowanie roku" data={data.year} />