feat: Phase 1 — socle backend FastAPI + frontend Next.js

Backend (FastAPI + SQLAlchemy):
- Modèles : User, Client, Audit, Cible, Vulnérabilité, Action
- Auth JWT (register/login/me) avec bcrypt
- Routes CRUD complets : clients, audits, cibles, vulnérabilités, actions
- Schémas Pydantic v2, migrations Alembic configurées
- Rate limiting (slowapi), CORS, structure scanners/reports pour phase 2

Frontend (Next.js 14 App Router):
- shadcn/ui : Button, Input, Card, Badge, Label
- Page login avec gestion token JWT
- Dashboard avec stats temps réel
- Pages Clients (grille) et Audits (liste) avec recherche
- Layout avec sidebar navigation + protection auth
- Dockerfiles multi-stage (backend + frontend standalone)

Infrastructure:
- docker-compose.yml : postgres, redis, backend, frontend
- docker-compose.prod.yml avec labels Traefik
- .env.example complet
- .gitignore mis à jour

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/app/(dashboard)/dashboard/page.tsx

@@ -0,0 +1,120 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Users, ClipboardList, ShieldAlert, CheckCircle } from "lucide-react";
+import { Header } from "@/components/layout/header";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { clientsApi, auditsApi, type Client, type Audit } from "@/lib/api";
+import { getToken } from "@/lib/auth";
+
+type Stats = {
+  totalClients: number;
+  totalAudits: number;
+  auditsEnCours: number;
+  auditsTermines: number;
+};
+
+export default function DashboardPage() {
+  const [stats, setStats] = useState<Stats>({
+    totalClients: 0,
+    totalAudits: 0,
+    auditsEnCours: 0,
+    auditsTermines: 0,
+  });
+  const [recentAudits, setRecentAudits] = useState<Audit[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = getToken();
+    if (!token) return;
+
+    Promise.all([clientsApi.list(token), auditsApi.list(token)])
+      .then(([clients, audits]) => {
+        setStats({
+          totalClients: clients.length,
+          totalAudits: audits.length,
+          auditsEnCours: audits.filter((a) => a.statut === "en_cours").length,
+          auditsTermines: audits.filter((a) => a.statut === "termine").length,
+        });
+        setRecentAudits(audits.slice(0, 5));
+      })
+      .finally(() => setLoading(false));
+  }, []);
+
+  const statCards = [
+    { label: "Clients", value: stats.totalClients, icon: Users, color: "text-blue-600" },
+    { label: "Audits total", value: stats.totalAudits, icon: ClipboardList, color: "text-purple-600" },
+    { label: "En cours", value: stats.auditsEnCours, icon: ShieldAlert, color: "text-orange-500" },
+    { label: "Terminés", value: stats.auditsTermines, icon: CheckCircle, color: "text-green-600" },
+  ];
+
+  const statutLabels: Record<string, string> = {
+    planifie: "Planifié",
+    en_cours: "En cours",
+    termine: "Terminé",
+    annule: "Annulé",
+  };
+
+  const statutColors: Record<string, string> = {
+    planifie: "text-blue-600 bg-blue-50",
+    en_cours: "text-orange-600 bg-orange-50",
+    termine: "text-green-600 bg-green-50",
+    annule: "text-gray-500 bg-gray-50",
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      <Header title="Tableau de bord" />
+      <div className="flex-1 p-6 space-y-6">
+        {/* Stats cards */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          {statCards.map(({ label, value, icon: Icon, color }) => (
+            <Card key={label}>
+              <CardHeader className="flex flex-row items-center justify-between pb-2">
+                <CardTitle className="text-sm font-medium text-muted-foreground">{label}</CardTitle>
+                <Icon className={`h-5 w-5 ${color}`} />
+              </CardHeader>
+              <CardContent>
+                <p className="text-3xl font-bold">
+                  {loading ? <span className="animate-pulse text-muted-foreground">—</span> : value}
+                </p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+
+        {/* Recent audits */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">Audits récents</CardTitle>
+          </CardHeader>
+          <CardContent>
+            {loading ? (
+              <p className="text-sm text-muted-foreground">Chargement...</p>
+            ) : recentAudits.length === 0 ? (
+              <p className="text-sm text-muted-foreground">Aucun audit pour le moment.</p>
+            ) : (
+              <div className="space-y-3">
+                {recentAudits.map((audit) => (
+                  <div key={audit.id} className="flex items-center justify-between py-2 border-b last:border-0">
+                    <div>
+                      <p className="font-medium text-sm">{audit.nom}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {new Date(audit.createdAt).toLocaleDateString("fr-FR")}
+                      </p>
+                    </div>
+                    <span
+                      className={`text-xs font-medium px-2 py-1 rounded-full ${statutColors[audit.statut]}`}
+                    >
+                      {statutLabels[audit.statut]}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}