Files
fintrack/app/page.tsx

63 lines
2.0 KiB
TypeScript

"use client";
import { Sidebar } from "@/components/dashboard/sidebar";
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 { useBankingData } from "@/lib/hooks";
import { Button } from "@/components/ui/button";
import { Upload, RefreshCw } from "lucide-react";
export default function DashboardPage() {
const { data, isLoading, refresh } = useBankingData();
if (isLoading || !data) {
return (
<div className="flex h-screen">
<Sidebar />
<main className="flex-1 flex items-center justify-center">
<RefreshCw className="w-8 h-8 animate-spin text-muted-foreground" />
</main>
</div>
);
}
return (
<div className="flex h-screen bg-background">
<Sidebar />
<main className="flex-1 overflow-auto">
<div className="p-6 space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-foreground">
Tableau de bord
</h1>
<p className="text-muted-foreground">
Vue d'ensemble de vos finances
</p>
</div>
<OFXImportDialog onImportComplete={refresh}>
<Button>
<Upload className="w-4 h-4 mr-2" />
Importer OFX
</Button>
</OFXImportDialog>
</div>
<OverviewCards data={data} />
<div className="grid gap-6 lg:grid-cols-2">
<RecentTransactions data={data} />
<div className="space-y-6">
<AccountsSummary data={data} />
<CategoryBreakdown data={data} />
</div>
</div>
</div>
</main>
</div>
);
}