Checkpoint: Ajout de l'onglet "Signatures" dans la page Paramètres : table DB signatures (firstName, lastName, imageKey, imageUrl), migration appliquée, routes tRPC (list, upload, create, delete), composant SignaturesSection avec formulaire d'ajout (prénom+nom+upload image), grille d'affichage des signatures avec aperçu, bouton de suppression au survol

client/src/pages/Settings.tsx

@@ -18,12 +18,239 @@ import {
   Server, 
   FileCheck,
   AlertCircle,
-  Sparkles
+  Sparkles,
+  PenLine,
+  Plus,
+  Trash2,
+  Upload,
+  User
 } from "lucide-react";
+import { useRef, useState as useStateAlias } from "react";
 import { toast } from "sonner";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 
+function SignaturesSection() {
+  const utils = trpc.useUtils();
+  const { data: signatures, isLoading } = trpc.signatures.list.useQuery();
+  
+  const [firstName, setFirstName] = useStateAlias("");
+  const [lastName, setLastName] = useStateAlias("");
+  const [previewUrl, setPreviewUrl] = useStateAlias<string | null>(null);
+  const [fileData, setFileData] = useStateAlias<string | null>(null);
+  const [fileName, setFileName] = useStateAlias("");
+  const [mimeType, setMimeType] = useStateAlias("image/png");
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const uploadMutation = trpc.signatures.upload.useMutation({
+    onSuccess: () => {
+      toast.success("Signature ajoutée avec succès !");
+      utils.signatures.list.invalidate();
+      setFirstName("");
+      setLastName("");
+      setPreviewUrl(null);
+      setFileData(null);
+      setFileName("");
+    },
+    onError: (error) => {
+      toast.error(error.message || "Erreur lors de l'ajout de la signature");
+    },
+  });
+
+  const deleteMutation = trpc.signatures.delete.useMutation({
+    onSuccess: () => {
+      toast.success("Signature supprimée");
+      utils.signatures.list.invalidate();
+    },
+    onError: (error) => {
+      toast.error(error.message || "Erreur lors de la suppression");
+    },
+  });
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      toast.error("Veuillez sélectionner une image (PNG, JPG, GIF...)");
+      return;
+    }
+    if (file.size > 2 * 1024 * 1024) {
+      toast.error("L'image ne doit pas dépasser 2 Mo");
+      return;
+    }
+    setFileName(file.name);
+    setMimeType(file.type);
+    const reader = new FileReader();
+    reader.onload = (ev) => {
+      const result = ev.target?.result as string;
+      // result is "data:image/png;base64,XXXX"
+      const base64 = result.split(",")[1];
+      setFileData(base64);
+      setPreviewUrl(result);
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleAdd = () => {
+    if (!firstName.trim() || !lastName.trim()) {
+      toast.error("Veuillez renseigner le prénom et le nom");
+      return;
+    }
+    if (!fileData) {
+      toast.error("Veuillez sélectionner une image de signature");
+      return;
+    }
+    uploadMutation.mutate({ firstName: firstName.trim(), lastName: lastName.trim(), fileName, fileData, mimeType });
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <Card className="border-2 hover:border-primary/50 transition-colors">
+        <CardHeader className="bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-emerald-950/20 dark:to-teal-950/20 border-b">
+          <div className="flex items-center gap-3">
+            <div className="p-2 bg-emerald-500 rounded-lg">
+              <PenLine className="w-6 h-6 text-white" />
+            </div>
+            <div>
+              <CardTitle className="text-xl">Gestion des signatures</CardTitle>
+              <CardDescription className="mt-1">
+                Ajoutez les signatures des responsables pour les documents officiels
+              </CardDescription>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-6 pt-6">
+          {/* Add form */}
+          <div className="p-4 bg-muted/30 rounded-lg border border-dashed border-muted-foreground/30 space-y-4">
+            <p className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">Ajouter une signature</p>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+              <div className="space-y-2">
+                <Label htmlFor="sig-firstname" className="font-medium">Prénom</Label>
+                <Input
+                  id="sig-firstname"
+                  value={firstName}
+                  onChange={(e) => setFirstName(e.target.value)}
+                  placeholder="Ex : Jean"
+                  className="h-10"
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="sig-lastname" className="font-medium">Nom</Label>
+                <Input
+                  id="sig-lastname"
+                  value={lastName}
+                  onChange={(e) => setLastName(e.target.value)}
+                  placeholder="Ex : Dupont"
+                  className="h-10"
+                />
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label className="font-medium">Image de la signature</Label>
+              <div
+                className="flex items-center gap-4 p-3 border-2 border-dashed rounded-lg cursor-pointer hover:border-primary/50 transition-colors"
+                onClick={() => fileInputRef.current?.click()}
+              >
+                {previewUrl ? (
+                  <img src={previewUrl} alt="Aperçu signature" className="h-16 max-w-[200px] object-contain rounded border bg-white p-1" />
+                ) : (
+                  <div className="flex flex-col items-center justify-center w-full py-4 text-muted-foreground gap-2">
+                    <Upload className="w-8 h-8" />
+                    <span className="text-sm">Cliquez pour sélectionner une image (PNG, JPG, GIF...)</span>
+                    <span className="text-xs">Taille max : 2 Mo</span>
+                  </div>
+                )}
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleFileChange}
+                />
+              </div>
+              {previewUrl && (
+                <Button variant="ghost" size="sm" className="text-muted-foreground" onClick={() => { setPreviewUrl(null); setFileData(null); setFileName(""); if (fileInputRef.current) fileInputRef.current.value = ""; }}>
+                  Changer l'image
+                </Button>
+              )}
+            </div>
+            <Button
+              onClick={handleAdd}
+              disabled={uploadMutation.isPending || !firstName || !lastName || !fileData}
+              className="w-full h-10 bg-emerald-600 hover:bg-emerald-700 text-white gap-2"
+            >
+              {uploadMutation.isPending ? (
+                <><Loader2 className="w-4 h-4 animate-spin" /> Enregistrement...</>
+              ) : (
+                <><Plus className="w-4 h-4" /> Ajouter la signature</>
+              )}
+            </Button>
+          </div>
+
+          {/* Signatures list */}
+          {isLoading ? (
+            <div className="flex items-center justify-center py-8">
+              <Loader2 className="w-6 h-6 animate-spin text-primary" />
+            </div>
+          ) : !signatures || signatures.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-10 text-muted-foreground gap-3">
+              <PenLine className="w-10 h-10 opacity-30" />
+              <p className="text-sm">Aucune signature enregistrée</p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              <p className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+                {signatures.length} signature{signatures.length > 1 ? "s" : ""} enregistrée{signatures.length > 1 ? "s" : ""}
+              </p>
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+                {signatures.map((sig) => (
+                  <div
+                    key={sig.id}
+                    className="group relative flex flex-col items-center gap-3 p-4 rounded-xl border-2 border-border hover:border-emerald-300 bg-card transition-all shadow-sm hover:shadow-md"
+                  >
+                    {/* Signature image */}
+                    <div className="w-full h-24 flex items-center justify-center bg-white rounded-lg border overflow-hidden p-2">
+                      <img
+                        src={sig.imageUrl}
+                        alt={`Signature de ${sig.firstName} ${sig.lastName}`}
+                        className="max-h-full max-w-full object-contain"
+                        onError={(e) => { (e.target as HTMLImageElement).src = ""; }}
+                      />
+                    </div>
+                    {/* Name */}
+                    <div className="flex items-center gap-2 text-center">
+                      <div className="p-1.5 bg-emerald-100 dark:bg-emerald-900/30 rounded-full">
+                        <User className="w-4 h-4 text-emerald-600" />
+                      </div>
+                      <span className="font-semibold text-sm">{sig.firstName} {sig.lastName}</span>
+                    </div>
+                    {/* Date */}
+                    <p className="text-xs text-muted-foreground">
+                      Ajoutée le {new Date(sig.createdAt).toLocaleDateString("fr-FR")}
+                    </p>
+                    {/* Delete button */}
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity h-7 w-7 p-0 text-red-500 hover:text-red-700 hover:bg-red-50"
+                      onClick={() => deleteMutation.mutate({ id: sig.id })}
+                      disabled={deleteMutation.isPending}
+                      title="Supprimer cette signature"
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
 function LlmFieldsConfigSection() {
   const { data: fields, isLoading } = trpc.llmFieldsConfig.getAll.useQuery();
   const utils = trpc.useUtils();
@@ -245,7 +472,7 @@ export default function Settings() {
 
         {/* Tabs Navigation */}
         <Tabs defaultValue="llm" className="space-y-6">
-          <TabsList className="grid w-full grid-cols-3 h-auto p-1 bg-muted/50">
+          <TabsList className="grid w-full grid-cols-4 h-auto p-1 bg-muted/50">
             <TabsTrigger 
               value="llm" 
               className="flex items-center gap-2 py-3 data-[state=active]:bg-background data-[state=active]:shadow-sm transition-all"
@@ -272,6 +499,13 @@ export default function Settings() {
                 </Badge>
               )}
             </TabsTrigger>
+            <TabsTrigger 
+              value="signatures" 
+              className="flex items-center gap-2 py-3 data-[state=active]:bg-background data-[state=active]:shadow-sm transition-all"
+            >
+              <PenLine className="w-5 h-5" />
+              <span className="font-medium">Signatures</span>
+            </TabsTrigger>
           </TabsList>
 
           {/* LLM Tab */}
@@ -579,6 +813,11 @@ export default function Settings() {
               </CardContent>
             </Card>
           </TabsContent>
+
+          {/* Signatures Tab */}
+          <TabsContent value="signatures" className="space-y-6 animate-in fade-in-50 duration-300">
+            <SignaturesSection />
+          </TabsContent>
         </Tabs>
 
         {/* Save Button */}

drizzle/0013_absent_santa_claus.sql

@@ -0,0 +1,11 @@
+CREATE TABLE `signatures` (
+	`id` int AUTO_INCREMENT NOT NULL,
+	`userId` int NOT NULL,
+	`firstName` varchar(100) NOT NULL,
+	`lastName` varchar(100) NOT NULL,
+	`imageKey` text NOT NULL,
+	`imageUrl` text NOT NULL,
+	`createdAt` timestamp NOT NULL DEFAULT (now()),
+	`updatedAt` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
+	CONSTRAINT `signatures_id` PRIMARY KEY(`id`)
+);

drizzle/meta/_journal.json

@@ -92,6 +92,13 @@
       "when": 1772788503373,
       "tag": "0012_left_madame_web",
       "breakpoints": true
+    },
+    {
+      "idx": 13,
+      "version": "5",
+      "when": 1773528566252,
+      "tag": "0013_absent_santa_claus",
+      "breakpoints": true
     }
   ]
 }

drizzle/schema.ts

@@ -306,3 +306,20 @@ export const llmFieldsConfig = mysqlTable("llmFieldsConfig", {
 
 export type LlmFieldConfig = typeof llmFieldsConfig.$inferSelect;
 export type InsertLlmFieldConfig = typeof llmFieldsConfig.$inferInsert;
+
+/**
+ * Signatures table storing user signature images with first/last name
+ */
+export const signatures = mysqlTable("signatures", {
+  id: int("id").autoincrement().primaryKey(),
+  userId: int("userId").notNull(),
+  firstName: varchar("firstName", { length: 100 }).notNull(),
+  lastName: varchar("lastName", { length: 100 }).notNull(),
+  imageKey: text("imageKey").notNull(),   // Local storage key
+  imageUrl: text("imageUrl").notNull(),   // Public URL to the signature image
+  createdAt: timestamp("createdAt").defaultNow().notNull(),
+  updatedAt: timestamp("updatedAt").defaultNow().onUpdateNow().notNull(),
+});
+
+export type Signature = typeof signatures.$inferSelect;
+export type InsertSignature = typeof signatures.$inferInsert;

server/db.ts

@@ -32,7 +32,10 @@ import {
   AutomationRule,
   llmFieldsConfig,
   InsertLlmFieldConfig,
-  LlmFieldConfig
+  LlmFieldConfig,
+  signatures,
+  InsertSignature,
+  Signature
 } from "../drizzle/schema";
 import { ENV } from './_core/env';
 
@@ -667,3 +670,34 @@ export async function initializeDefaultLlmFields(userId: number): Promise<void>
     }
   }
 }
+
+// ============= SIGNATURES HELPERS =============
+
+export async function getSignaturesByUser(userId: number): Promise<Signature[]> {
+  const db = await getDb();
+  if (!db) return [];
+  return db.select().from(signatures).where(eq(signatures.userId, userId));
+}
+
+export async function getSignatureById(id: number): Promise<Signature | undefined> {
+  const db = await getDb();
+  if (!db) return undefined;
+  const results = await db.select().from(signatures).where(eq(signatures.id, id));
+  return results[0];
+}
+
+export async function createSignature(data: InsertSignature): Promise<Signature> {
+  const db = await getDb();
+  if (!db) throw new Error("Database not available");
+  const result = await db.insert(signatures).values(data);
+  const insertId = (result[0] as any).insertId;
+  const created = await getSignatureById(insertId);
+  if (!created) throw new Error("Failed to retrieve created signature");
+  return created;
+}
+
+export async function deleteSignature(id: number): Promise<void> {
+  const db = await getDb();
+  if (!db) return;
+  await db.delete(signatures).where(eq(signatures.id, id));
+}

server/routers.ts

@@ -56,6 +56,10 @@ import {
   createAutomationRule,
   updateAutomationRule,
   deleteAutomationRule,
+  getSignaturesByUser,
+  getSignatureById,
+  createSignature,
+  deleteSignature,
 } from "./db";
 import { loginLocal, hashPassword, getAzureAuthUrl, isAzureAdConfigured, generateToken } from "./auth";
 import { extractInvoicesWithMistral, generateMetadataJSON } from "./invoiceExtractor";
@@ -1170,6 +1174,65 @@ export const appRouter = router({
         });
       }),
   }),
+
+  // ============= SIGNATURES ROUTES =============
+  signatures: router({
+    list: protectedProcedure.query(async ({ ctx }) => {
+      return await getSignaturesByUser(ctx.user.id);
+    }),
+
+    upload: protectedProcedure
+      .input(z.object({
+        firstName: z.string().min(1).max(100),
+        lastName: z.string().min(1).max(100),
+        fileName: z.string().min(1),
+        fileData: z.string(), // Base64 encoded image
+        mimeType: z.string().default("image/png"),
+      }))
+      .mutation(async ({ input, ctx }) => {
+        const userId = ctx.user.id;
+        const fileBuffer = Buffer.from(input.fileData, "base64");
+        const safeFileName = `${input.firstName}-${input.lastName}-${Date.now()}-${input.fileName}`
+          .replace(/[^a-zA-Z0-9._-]/g, "_");
+        const imageKey = generateStorageKey(userId, safeFileName);
+        const result = await localStoragePut(imageKey, fileBuffer, input.mimeType);
+        return await createSignature({
+          userId,
+          firstName: input.firstName,
+          lastName: input.lastName,
+          imageKey,
+          imageUrl: result.url,
+        });
+      }),
+
+    create: protectedProcedure
+      .input(z.object({
+        firstName: z.string().min(1).max(100),
+        lastName: z.string().min(1).max(100),
+        imageKey: z.string().min(1),
+        imageUrl: z.string().min(1),
+      }))
+      .mutation(async ({ input, ctx }) => {
+        return await createSignature({
+          userId: ctx.user.id,
+          firstName: input.firstName,
+          lastName: input.lastName,
+          imageKey: input.imageKey,
+          imageUrl: input.imageUrl,
+        });
+      }),
+
+    delete: protectedProcedure
+      .input(z.object({ id: z.number() }))
+      .mutation(async ({ input, ctx }) => {
+        const sig = await getSignatureById(input.id);
+        if (!sig || sig.userId !== ctx.user.id) {
+          throw new TRPCError({ code: "NOT_FOUND" });
+        }
+        await deleteSignature(input.id);
+        return { success: true };
+      }),
+  }),
 });
 
 export type AppRouter = typeof appRouter;

todo.md

@@ -508,3 +508,14 @@
 - [x] Désactiver le bouton avec tooltip explicatif pour les factures non éligibles
 - [x] Afficher un toast de confirmation après validation
 - [x] Rafraîchir la liste après validation
+
+## Onglet Signatures dans Paramètres
+- [x] Créer la table `signatures` dans drizzle/schema.ts (id, userId, firstName, lastName, imageKey, imageUrl, createdAt)
+- [x] Appliquer la migration DB (pnpm db:push)
+- [x] Créer les routes tRPC : signatures.list, signatures.upload, signatures.create, signatures.delete
+- [x] Ajouter la route d'upload d'image de signature (stockage local base64)
+- [x] Ajouter l'onglet "Signatures" dans la page Settings.tsx
+- [x] Créer le formulaire d'ajout de signature (prénom, nom, upload image)
+- [x] Afficher la liste des signatures avec aperçu de l'image en grille
+- [x] Ajouter le bouton de suppression par signature (hover)
+- [ ] Tester l'upload et l'affichage des signatures sur le VPS