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/(auth)/login/page.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState, FormEvent } from "react";
+import { useRouter } from "next/navigation";
+import { Shield } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { authApi } from "@/lib/api";
+import { setToken } from "@/lib/auth";
+
+export default function LoginPage() {
+  const router = useRouter();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+
+  async function handleSubmit(e: FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const { access_token } = await authApi.login(email, password);
+      setToken(access_token);
+      router.push("/dashboard");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Erreur de connexion");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-muted/40">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          <div className="flex justify-center mb-2">
+            <Shield className="h-10 w-10 text-primary" />
+          </div>
+          <CardTitle className="text-2xl">AuditShield</CardTitle>
+          <CardDescription>Connectez-vous à votre espace sécurisé</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="vous@exemple.fr"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                autoComplete="email"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="password">Mot de passe</Label>
+              <Input
+                id="password"
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+                autoComplete="current-password"
+              />
+            </div>
+            {error && (
+              <p className="text-sm text-destructive text-center">{error}</p>
+            )}
+            <Button type="submit" className="w-full" disabled={loading}>
+              {loading ? "Connexion..." : "Se connecter"}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

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

@@ -0,0 +1,105 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Plus, Search, ClipboardList } from "lucide-react";
+import { Header } from "@/components/layout/header";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { auditsApi, type Audit } from "@/lib/api";
+import { getToken } from "@/lib/auth";
+import Link from "next/link";
+
+const statutLabels: Record<string, string> = {
+  planifie: "Planifié",
+  en_cours: "En cours",
+  termine: "Terminé",
+  annule: "Annulé",
+};
+
+const statutVariant: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
+  planifie: "secondary",
+  en_cours: "default",
+  termine: "outline",
+  annule: "destructive",
+};
+
+export default function AuditsPage() {
+  const [audits, setAudits] = useState<Audit[]>([]);
+  const [search, setSearch] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = getToken();
+    if (!token) return;
+    auditsApi.list(token).then(setAudits).finally(() => setLoading(false));
+  }, []);
+
+  const filtered = audits.filter((a) =>
+    a.nom.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div className="flex flex-col h-full">
+      <Header title="Audits" />
+      <div className="flex-1 p-6 space-y-4">
+        <div className="flex items-center gap-3">
+          <div className="relative flex-1 max-w-sm">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Rechercher un audit..."
+              className="pl-9"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+          <Button asChild>
+            <Link href="/audits/nouveau">
+              <Plus className="h-4 w-4 mr-2" />
+              Nouvel audit
+            </Link>
+          </Button>
+        </div>
+
+        {loading ? (
+          <p className="text-sm text-muted-foreground">Chargement...</p>
+        ) : filtered.length === 0 ? (
+          <div className="text-center py-16 text-muted-foreground">
+            <ClipboardList className="h-12 w-12 mx-auto mb-3 opacity-30" />
+            <p className="font-medium">Aucun audit trouvé</p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {filtered.map((audit) => (
+              <Link key={audit.id} href={`/audits/${audit.id}`}>
+                <Card className="hover:shadow-md transition-shadow cursor-pointer">
+                  <CardContent className="p-4 flex items-center justify-between">
+                    <div>
+                      <p className="font-semibold">{audit.nom}</p>
+                      <p className="text-sm text-muted-foreground">
+                        {audit.dateDebut
+                          ? new Date(audit.dateDebut).toLocaleDateString("fr-FR")
+                          : "Date non définie"}
+                      </p>
+                    </div>
+                    <div className="flex items-center gap-3">
+                      {audit.scoreGlobal !== null && (
+                        <span className="text-sm font-medium text-muted-foreground">
+                          Score : {audit.scoreGlobal.toFixed(1)}
+                        </span>
+                      )}
+                      <Badge variant={statutVariant[audit.statut]}>
+                        {statutLabels[audit.statut]}
+                      </Badge>
+                    </div>
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,107 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Plus, Search, Building2, Mail, Phone } from "lucide-react";
+import { Header } from "@/components/layout/header";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Card, CardContent } from "@/components/ui/card";
+import { clientsApi, type Client } from "@/lib/api";
+import { getToken } from "@/lib/auth";
+import Link from "next/link";
+
+export default function ClientsPage() {
+  const [clients, setClients] = useState<Client[]>([]);
+  const [search, setSearch] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const token = getToken();
+    if (!token) return;
+    clientsApi.list(token).then(setClients).finally(() => setLoading(false));
+  }, []);
+
+  const filtered = clients.filter((c) =>
+    c.nom.toLowerCase().includes(search.toLowerCase()) ||
+    c.contact?.toLowerCase().includes(search.toLowerCase()) ||
+    c.email?.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div className="flex flex-col h-full">
+      <Header title="Clients" />
+      <div className="flex-1 p-6 space-y-4">
+        {/* Toolbar */}
+        <div className="flex items-center gap-3">
+          <div className="relative flex-1 max-w-sm">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Rechercher un client..."
+              className="pl-9"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+          <Button asChild>
+            <Link href="/clients/nouveau">
+              <Plus className="h-4 w-4 mr-2" />
+              Nouveau client
+            </Link>
+          </Button>
+        </div>
+
+        {/* Client list */}
+        {loading ? (
+          <p className="text-sm text-muted-foreground">Chargement...</p>
+        ) : filtered.length === 0 ? (
+          <div className="text-center py-16 text-muted-foreground">
+            <Building2 className="h-12 w-12 mx-auto mb-3 opacity-30" />
+            <p className="font-medium">Aucun client trouvé</p>
+            <p className="text-sm">Créez votre premier client pour commencer.</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+            {filtered.map((client) => (
+              <Link key={client.id} href={`/clients/${client.id}`}>
+                <Card className="hover:shadow-md transition-shadow cursor-pointer h-full">
+                  <CardContent className="p-5 space-y-3">
+                    <div className="flex items-start justify-between">
+                      <div className="flex items-center gap-2">
+                        <div className="rounded-full bg-primary/10 p-2">
+                          <Building2 className="h-4 w-4 text-primary" />
+                        </div>
+                        <h3 className="font-semibold">{client.nom}</h3>
+                      </div>
+                    </div>
+                    <div className="space-y-1 text-sm text-muted-foreground">
+                      {client.contact && (
+                        <p className="flex items-center gap-1">
+                          <span className="font-medium text-foreground">{client.contact}</span>
+                        </p>
+                      )}
+                      {client.email && (
+                        <p className="flex items-center gap-1.5">
+                          <Mail className="h-3.5 w-3.5" />
+                          {client.email}
+                        </p>
+                      )}
+                      {client.telephone && (
+                        <p className="flex items-center gap-1.5">
+                          <Phone className="h-3.5 w-3.5" />
+                          {client.telephone}
+                        </p>
+                      )}
+                    </div>
+                    <p className="text-xs text-muted-foreground border-t pt-2">
+                      Créé le {new Date(client.createdAt).toLocaleDateString("fr-FR")}
+                    </p>
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

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>
+  );
+}

frontend/app/(dashboard)/layout.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Sidebar } from "@/components/layout/sidebar";
+import { getToken } from "@/lib/auth";
+
+export default function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!getToken()) {
+      router.replace("/login");
+    }
+  }, [router]);
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar />
+      <main className="flex-1 overflow-auto">{children}</main>
+    </div>
+  );
+}

frontend/app/globals.css

@@ -0,0 +1,59 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 221.2 83.2% 53.3%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

frontend/app/layout.tsx

@@ -0,0 +1,18 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export const metadata: Metadata = {
+  title: "AuditShield",
+  description: "Plateforme d'audit infrastructure et sécurité",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="fr">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}

frontend/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function RootPage() {
+  redirect("/dashboard");
+}