90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useMemo } from "react";
|
|
import { PageLayout, LoadingState, PageHeader } from "@/components/layout";
|
|
import { OverviewCards } from "@/components/dashboard/overview-cards";
|
|
import { RecentTransactions } from "@/components/dashboard/recent-transactions";
|
|
import { AccountsSummary } from "@/components/dashboard/accounts-summary";
|
|
import { CategoryBreakdown } from "@/components/dashboard/category-breakdown";
|
|
import { OFXImportDialog } from "@/components/import/ofx-import-dialog";
|
|
import { AccountFilterCombobox } from "@/components/ui/account-filter-combobox";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { useBankingData } from "@/lib/hooks";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Upload } from "lucide-react";
|
|
import type { BankingData } from "@/lib/types";
|
|
|
|
export default function DashboardPage() {
|
|
const { data, isLoading, refresh } = useBankingData();
|
|
const [selectedAccounts, setSelectedAccounts] = useState<string[]>(["all"]);
|
|
|
|
// Filter data based on selected accounts
|
|
const filteredData = useMemo<BankingData | null>(() => {
|
|
if (!data) return null;
|
|
|
|
if (selectedAccounts.includes("all") || selectedAccounts.length === 0) {
|
|
return data;
|
|
}
|
|
|
|
const filteredAccounts = data.accounts.filter((a) =>
|
|
selectedAccounts.includes(a.id)
|
|
);
|
|
const filteredAccountIds = new Set(filteredAccounts.map((a) => a.id));
|
|
const filteredTransactions = data.transactions.filter((t) =>
|
|
filteredAccountIds.has(t.accountId)
|
|
);
|
|
|
|
return {
|
|
...data,
|
|
accounts: filteredAccounts,
|
|
transactions: filteredTransactions,
|
|
};
|
|
}, [data, selectedAccounts]);
|
|
|
|
if (isLoading || !data || !filteredData) {
|
|
return <LoadingState />;
|
|
}
|
|
|
|
return (
|
|
<PageLayout>
|
|
<PageHeader
|
|
title="Tableau de bord"
|
|
description="Vue d'ensemble de vos finances"
|
|
actions={
|
|
<OFXImportDialog onImportComplete={refresh}>
|
|
<Button>
|
|
<Upload className="w-4 h-4 mr-2" />
|
|
Importer OFX
|
|
</Button>
|
|
</OFXImportDialog>
|
|
}
|
|
/>
|
|
|
|
<Card className="mb-6">
|
|
<CardContent className="pt-4">
|
|
<div className="flex flex-wrap gap-4">
|
|
<AccountFilterCombobox
|
|
accounts={data.accounts}
|
|
folders={data.folders}
|
|
value={selectedAccounts}
|
|
onChange={setSelectedAccounts}
|
|
className="w-[200px]"
|
|
filteredTransactions={data.transactions}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<OverviewCards data={filteredData} />
|
|
|
|
<div className="grid gap-6 lg:grid-cols-2">
|
|
<RecentTransactions data={filteredData} />
|
|
<div className="space-y-6">
|
|
<AccountsSummary data={filteredData} />
|
|
<CategoryBreakdown data={filteredData} />
|
|
</div>
|
|
</div>
|
|
</PageLayout>
|
|
);
|
|
}
|