chore: init from v0

2025-11-27 09:51:18 +01:00
commit e9e44916fd
109 changed files with 15966 additions and 0 deletions
--- a/components/dashboard/recent-transactions.tsx
+++ b/components/dashboard/recent-transactions.tsx
@@ -0,0 +1,114 @@
+"use client"
+
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { CheckCircle2, Circle } from "lucide-react"
+import type { BankingData } from "@/lib/types"
+import { cn } from "@/lib/utils"
+
+interface RecentTransactionsProps {
+  data: BankingData
+}
+
+export function RecentTransactions({ data }: RecentTransactionsProps) {
+  const recentTransactions = [...data.transactions]
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+    .slice(0, 10)
+
+  const formatCurrency = (amount: number) => {
+    return new Intl.NumberFormat("fr-FR", {
+      style: "currency",
+      currency: "EUR",
+    }).format(amount)
+  }
+
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleDateString("fr-FR", {
+      day: "2-digit",
+      month: "short",
+    })
+  }
+
+  const getCategory = (categoryId: string | null) => {
+    if (!categoryId) return null
+    return data.categories.find((c) => c.id === categoryId)
+  }
+
+  const getAccount = (accountId: string) => {
+    return data.accounts.find((a) => a.id === accountId)
+  }
+
+  if (recentTransactions.length === 0) {
+    return (
+      <Card>
+        <CardHeader>
+          <CardTitle>Transactions récentes</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-col items-center justify-center py-8 text-center">
+            <p className="text-muted-foreground">Aucune transaction</p>
+            <p className="text-sm text-muted-foreground mt-1">Importez un fichier OFX pour commencer</p>
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Transactions récentes</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-3">
+          {recentTransactions.map((transaction) => {
+            const category = getCategory(transaction.categoryId)
+            const account = getAccount(transaction.accountId)
+
+            return (
+              <div
+                key={transaction.id}
+                className="flex items-center gap-3 p-3 rounded-lg bg-muted/50 hover:bg-muted transition-colors"
+              >
+                <div className="flex-shrink-0">
+                  {transaction.isReconciled ? (
+                    <CheckCircle2 className="w-5 h-5 text-emerald-600" />
+                  ) : (
+                    <Circle className="w-5 h-5 text-muted-foreground" />
+                  )}
+                </div>
+
+                <div className="flex-1 min-w-0">
+                  <p className="font-medium truncate">{transaction.description}</p>
+                  <div className="flex items-center gap-2 mt-1">
+                    <span className="text-xs text-muted-foreground">{formatDate(transaction.date)}</span>
+                    {account && <span className="text-xs text-muted-foreground">• {account.name}</span>}
+                    {category && (
+                      <Badge
+                        variant="secondary"
+                        className="text-xs"
+                        style={{ backgroundColor: `${category.color}20`, color: category.color }}
+                      >
+                        {category.name}
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+
+                <div
+                  className={cn(
+                    "font-semibold tabular-nums",
+                    transaction.amount >= 0 ? "text-emerald-600" : "text-red-600",
+                  )}
+                >
+                  {transaction.amount >= 0 ? "+" : ""}
+                  {formatCurrency(transaction.amount)}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}