From 9997e383cc945f82b92654d408ffbd92f35621c5 Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Sun, 30 Aug 2026 08:56:27 +0000
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Budget=20r=C3=A9el=20confirm?=
 =?UTF-8?q?=C3=A9=20en=20ordre=20d=C3=A9croissant=20de=20montant=20total?=
 =?UTF-8?q?=20;=20graphique=20en=20barres=20annuel=20comparant=20les=20mon?=
 =?UTF-8?q?tants=20BAP=20et=20abonnements=20ajout=C3=A9=20au=20tableau=20d?=
 =?UTF-8?q?e=20bord.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/Dashboard.tsx  | 25 ++++++++++++++++++++-----
 server/invoiceAnalytics.test.ts |  9 +++++++++
 todo.md                         |  5 +++++
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/client/src/pages/Dashboard.tsx b/client/src/pages/Dashboard.tsx
index 86ee180..d56cc3e 100644
--- a/client/src/pages/Dashboard.tsx
+++ b/client/src/pages/Dashboard.tsx
@@ -155,11 +155,26 @@ export default function Dashboard() {
           </CardHeader>
           <CardContent>
             {stats?.annualSummary?.length ? (
-              <div className="overflow-x-auto rounded-lg border">
-                <table className="w-full min-w-[780px] text-sm">
-                  <thead className="bg-muted/60 text-left text-muted-foreground"><tr><th className="px-4 py-3 font-medium">Année</th><th className="px-4 py-3 text-right font-medium">Factures BAP</th><th className="px-4 py-3 text-right font-medium">Montant BAP</th><th className="px-4 py-3 text-right font-medium">Abonnements</th><th className="px-4 py-3 text-right font-medium">Montant abonnements</th><th className="px-4 py-3 text-right font-medium">Total annuel</th></tr></thead>
-                  <tbody>{stats.annualSummary.map((row) => <tr key={row.year} className="border-t hover:bg-muted/30"><td className="px-4 py-3 font-semibold">{row.year}</td><td className="px-4 py-3 text-right">{row.bapCount}</td><td className="px-4 py-3 text-right text-blue-700">{formatCurrency(row.bapAmount)}</td><td className="px-4 py-3 text-right">{row.subscriptionCount}</td><td className="px-4 py-3 text-right text-violet-700">{formatCurrency(row.subscriptionAmount)}</td><td className="px-4 py-3 text-right font-semibold text-emerald-700">{formatCurrency(row.totalAmount)}</td></tr>)}</tbody>
-                </table>
+              <div className="space-y-6">
+                <div className="h-[300px] rounded-lg border bg-white p-4">
+                  <ResponsiveContainer width="100%" height="100%">
+                    <BarChart data={[...stats.annualSummary].reverse()} margin={{ top: 8, right: 16, left: 12, bottom: 4 }}>
+                      <CartesianGrid strokeDasharray="3 3" vertical={false} />
+                      <XAxis dataKey="year" />
+                      <YAxis tickFormatter={(value) => new Intl.NumberFormat("fr-FR", { notation: "compact", maximumFractionDigits: 1 }).format(value)} />
+                      <Tooltip formatter={(value: number) => formatCurrency(Number(value))} labelFormatter={(year) => `Année ${year}`} />
+                      <Legend />
+                      <Bar dataKey="bapAmount" name="Montant BAP" fill="#2563eb" radius={[4, 4, 0, 0]} />
+                      <Bar dataKey="subscriptionAmount" name="Montant abonnements" fill="#7c3aed" radius={[4, 4, 0, 0]} />
+                    </BarChart>
+                  </ResponsiveContainer>
+                </div>
+                <div className="overflow-x-auto rounded-lg border">
+                  <table className="w-full min-w-[780px] text-sm">
+                    <thead className="bg-muted/60 text-left text-muted-foreground"><tr><th className="px-4 py-3 font-medium">Année</th><th className="px-4 py-3 text-right font-medium">Factures BAP</th><th className="px-4 py-3 text-right font-medium">Montant BAP</th><th className="px-4 py-3 text-right font-medium">Abonnements</th><th className="px-4 py-3 text-right font-medium">Montant abonnements</th><th className="px-4 py-3 text-right font-medium">Total annuel</th></tr></thead>
+                    <tbody>{stats.annualSummary.map((row) => <tr key={row.year} className="border-t hover:bg-muted/30"><td className="px-4 py-3 font-semibold">{row.year}</td><td className="px-4 py-3 text-right">{row.bapCount}</td><td className="px-4 py-3 text-right text-blue-700">{formatCurrency(row.bapAmount)}</td><td className="px-4 py-3 text-right">{row.subscriptionCount}</td><td className="px-4 py-3 text-right text-violet-700">{formatCurrency(row.subscriptionAmount)}</td><td className="px-4 py-3 text-right font-semibold text-emerald-700">{formatCurrency(row.totalAmount)}</td></tr>)}</tbody>
+                  </table>
+                </div>
               </div>
             ) : <div className="py-8 text-center text-muted-foreground">Aucune facture finalisée avec une date disponible.</div>}
           </CardContent>
diff --git a/server/invoiceAnalytics.test.ts b/server/invoiceAnalytics.test.ts
index 7df881c..82c80f2 100644
--- a/server/invoiceAnalytics.test.ts
+++ b/server/invoiceAnalytics.test.ts
@@ -21,4 +21,13 @@ describe("agrégats de facturation", () => {
       { supplierName: "SFR", subscriptionCount: 1, subscriptionAmount: 20, nonSubscriptionCount: 1, nonSubscriptionAmount: 100, totalAmount: 120 },
     ]);
   });
+
+  it("classe le budget du fournisseur le plus facturé au moins facturé", () => {
+    const rows = buildSupplierBudgetSummary([
+      ...invoices,
+      { invoiceDate: "2026-05-22", createdAt: "2026-05-22", status: "completed", isSubscription: 0, supplierName: "Orange", totalAmount: "300" },
+    ], "2026", "05");
+
+    expect(rows.map((row) => row.supplierName)).toEqual(["Orange", "SFR"]);
+  });
 });
diff --git a/todo.md b/todo.md
index 952a4f2..dce799d 100644
--- a/todo.md
+++ b/todo.md
@@ -820,3 +820,8 @@
 - [x] Créer l’écran Budget réel à la fin du menu Facturation
 - [x] Afficher par fournisseur les montants Abonnement, Hors abonnement et le total
 - [x] Ajouter les tests et valider TypeScript, build et affichage en sandbox
+
+## Améliorations Budget réel et tableau de bord
+- [x] Confirmer le tri décroissant par montant total dans le budget
+- [x] Ajouter un graphique annuel BAP versus abonnements au tableau de bord
+- [x] Ajouter les tests et valider TypeScript, build et rendu sandbox