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>
2026-03-21 17:16:12 +01:00
parent 1ff3c15ea9
commit 0fe1a1b751
60 changed files with 2308 additions and 6 deletions
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -0,0 +1,27 @@
+FROM node:20-alpine AS deps
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+FROM node:20-alpine AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+RUN npm run build
+
+FROM node:20-alpine AS runner
+WORKDIR /app
+ENV NODE_ENV=production
+
+RUN addgroup --system --gid 1001 nodejs && \
+    adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+EXPOSE 3000
+ENV PORT=3000
+
+CMD ["node", "server.js"]
--- a/frontend/app/(auth)/login/page.tsx
+++ b/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>
+  );
+}
--- a/frontend/app/(dashboard)/audits/page.tsx
+++ b/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>
+  );
+}
--- a/frontend/app/(dashboard)/clients/page.tsx
+++ b/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>
+  );
+}
--- a/frontend/app/(dashboard)/dashboard/page.tsx
+++ b/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>
+  );
+}
--- a/frontend/app/(dashboard)/layout.tsx
+++ b/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>
+  );
+}
--- a/frontend/app/globals.css
+++ b/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;
+  }
+}
--- a/frontend/app/layout.tsx
+++ b/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>
+  );
+}
--- a/frontend/app/page.tsx
+++ b/frontend/app/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function RootPage() {
+  redirect("/dashboard");
+}
--- a/frontend/components.json
+++ b/frontend/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
--- a/frontend/components/layout/header.tsx
+++ b/frontend/components/layout/header.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import { Bell } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+interface HeaderProps {
+  title: string;
+}
+
+export function Header({ title }: HeaderProps) {
+  return (
+    <header className="flex items-center justify-between border-b px-6 py-4 bg-background">
+      <h1 className="text-xl font-semibold">{title}</h1>
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="icon">
+          <Bell className="h-5 w-5" />
+        </Button>
+      </div>
+    </header>
+  );
+}
--- a/frontend/components/layout/sidebar.tsx
+++ b/frontend/components/layout/sidebar.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Shield, Users, ClipboardList, LayoutDashboard, LogOut } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { removeToken } from "@/lib/auth";
+import { useRouter } from "next/navigation";
+
+const navItems = [
+  { href: "/dashboard", label: "Tableau de bord", icon: LayoutDashboard },
+  { href: "/clients", label: "Clients", icon: Users },
+  { href: "/audits", label: "Audits", icon: ClipboardList },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+  const router = useRouter();
+
+  function handleLogout() {
+    removeToken();
+    router.push("/login");
+  }
+
+  return (
+    <aside className="flex h-screen w-64 flex-col border-r bg-card">
+      {/* Logo */}
+      <div className="flex items-center gap-2 px-6 py-5 border-b">
+        <Shield className="h-7 w-7 text-primary" />
+        <span className="text-xl font-bold">AuditShield</span>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 px-3 py-4 space-y-1">
+        {navItems.map(({ href, label, icon: Icon }) => (
+          <Link
+            key={href}
+            href={href}
+            className={cn(
+              "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+              pathname.startsWith(href)
+                ? "bg-primary text-primary-foreground"
+                : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+            )}
+          >
+            <Icon className="h-4 w-4" />
+            {label}
+          </Link>
+        ))}
+      </nav>
+
+      {/* Logout */}
+      <div className="px-3 py-4 border-t">
+        <button
+          onClick={handleLogout}
+          className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors"
+        >
+          <LogOut className="h-4 w-4" />
+          Déconnexion
+        </button>
+      </div>
+    </aside>
+  );
+}
--- a/frontend/components/ui/badge.tsx
+++ b/frontend/components/ui/badge.tsx
@@ -0,0 +1,32 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+        critique: "border-transparent bg-red-600 text-white",
+        important: "border-transparent bg-orange-500 text-white",
+        modere: "border-transparent bg-yellow-500 text-white",
+        faible: "border-transparent bg-green-500 text-white",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  }
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
--- a/frontend/components/ui/button.tsx
+++ b/frontend/components/ui/button.tsx
@@ -0,0 +1,48 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
--- a/frontend/components/ui/card.tsx
+++ b/frontend/components/ui/card.tsx
@@ -0,0 +1,55 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)}
+      {...props}
+    />
+  )
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  )
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  )
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
--- a/frontend/components/ui/input.tsx
+++ b/frontend/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => {
+  return (
+    <input
+      type={type}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
+
+export { Input };
--- a/frontend/components/ui/label.tsx
+++ b/frontend/components/ui/label.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
--- a/frontend/lib/api.ts
+++ b/frontend/lib/api.ts
@@ -0,0 +1,141 @@
+const API_BASE = process.env.NEXT_PUBLIC_API_URL ?? "";
+
+type RequestOptions = {
+  method?: string;
+  body?: unknown;
+  token?: string;
+};
+
+async function request<T>(path: string, options: RequestOptions = {}): Promise<T> {
+  const { method = "GET", body, token } = options;
+
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+
+  if (token) {
+    headers["Authorization"] = `Bearer ${token}`;
+  }
+
+  const res = await fetch(`${API_BASE}/api${path}`, {
+    method,
+    headers,
+    body: body ? JSON.stringify(body) : undefined,
+  });
+
+  if (!res.ok) {
+    const error = await res.json().catch(() => ({ detail: "Erreur réseau" }));
+    throw new Error(error.detail ?? "Erreur inconnue");
+  }
+
+  if (res.status === 204) return undefined as T;
+  return res.json();
+}
+
+// Auth
+export const authApi = {
+  login: (email: string, password: string) => {
+    const form = new URLSearchParams({ username: email, password });
+    return fetch(`${API_BASE}/api/auth/login`, {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: form.toString(),
+    }).then((r) => {
+      if (!r.ok) throw new Error("Identifiants incorrects");
+      return r.json() as Promise<{ access_token: string; token_type: string }>;
+    });
+  },
+  me: (token: string) => request<User>("/auth/me", { token }),
+};
+
+// Clients
+export const clientsApi = {
+  list: (token: string) => request<Client[]>("/clients/", { token }),
+  get: (id: number, token: string) => request<Client>(`/clients/${id}`, { token }),
+  create: (data: ClientCreate, token: string) =>
+    request<Client>("/clients/", { method: "POST", body: data, token }),
+  update: (id: number, data: Partial<ClientCreate>, token: string) =>
+    request<Client>(`/clients/${id}`, { method: "PATCH", body: data, token }),
+  delete: (id: number, token: string) =>
+    request<void>(`/clients/${id}`, { method: "DELETE", token }),
+};
+
+// Audits
+export const auditsApi = {
+  list: (token: string, clientId?: number) =>
+    request<Audit[]>(`/audits/${clientId ? `?client_id=${clientId}` : ""}`, { token }),
+  get: (id: number, token: string) => request<AuditDetail>(`/audits/${id}`, { token }),
+  create: (data: AuditCreate, token: string) =>
+    request<Audit>("/audits/", { method: "POST", body: data, token }),
+  update: (id: number, data: Partial<AuditCreate>, token: string) =>
+    request<Audit>(`/audits/${id}`, { method: "PATCH", body: data, token }),
+};
+
+// Types
+export type User = {
+  id: number;
+  email: string;
+  fullName: string;
+  isActive: boolean;
+  isAdmin: boolean;
+};
+
+export type Client = {
+  id: number;
+  nom: string;
+  contact: string | null;
+  email: string | null;
+  telephone: string | null;
+  notes: string | null;
+  createdAt: string;
+};
+
+export type ClientCreate = {
+  nom: string;
+  contact?: string;
+  email?: string;
+  telephone?: string;
+  notes?: string;
+};
+
+export type Audit = {
+  id: number;
+  clientId: number;
+  nom: string;
+  statut: "planifie" | "en_cours" | "termine" | "annule";
+  dateDebut: string | null;
+  dateFin: string | null;
+  scoreGlobal: number | null;
+  createdAt: string;
+};
+
+export type AuditCreate = {
+  clientId: number;
+  nom: string;
+  dateDebut?: string;
+};
+
+export type AuditDetail = Audit & {
+  cibles: Cible[];
+  vulnerabilites: Vulnerabilite[];
+};
+
+export type Cible = {
+  id: number;
+  auditId: number;
+  type: "ip" | "domaine" | "subnet";
+  valeur: string;
+  validee: boolean;
+};
+
+export type Vulnerabilite = {
+  id: number;
+  auditId: number;
+  criticite: "critique" | "important" | "modere" | "faible";
+  titre: string;
+  description: string;
+  recommandation: string;
+  cve: string | null;
+  cvssScore: number | null;
+  cible: string | null;
+};
--- a/frontend/lib/auth.ts
+++ b/frontend/lib/auth.ts
@@ -0,0 +1,20 @@
+"use client";
+
+const TOKEN_KEY = "auditshield_token";
+
+export function getToken(): string | null {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem(TOKEN_KEY);
+}
+
+export function setToken(token: string): void {
+  localStorage.setItem(TOKEN_KEY, token);
+}
+
+export function removeToken(): void {
+  localStorage.removeItem(TOKEN_KEY);
+}
+
+export function isAuthenticated(): boolean {
+  return !!getToken();
+}
--- a/frontend/lib/utils.ts
+++ b/frontend/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -0,0 +1,15 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+  async rewrites() {
+    return [
+      {
+        source: "/api/:path*",
+        destination: `${process.env.NEXT_PUBLIC_API_URL ?? "http://backend:8000"}/api/:path*`,
+      },
+    ];
+  },
+};
+
+export default nextConfig;
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,45 @@
+{
+  "name": "auditshield-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "14.2.3",
+    "react": "^18",
+    "react-dom": "^18",
+    "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-badge": "^1.0.0",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.378.0",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
+    "jose": "^5.2.4",
+    "js-cookie": "^3.0.5"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@types/js-cookie": "^3.0.6",
+    "typescript": "^5",
+    "tailwindcss": "^3.4.1",
+    "postcss": "^8",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3"
+  }
+}
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -0,0 +1,73 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+    "./lib/**/*.{ts,tsx}",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: { "2xl": "1400px" },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};
+
+export default config;
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}