Checkpoint: Renommage menus (Paramètres IA et Signatures, Paramètres import/export), paramètres export BAP refondus (switches indépendants navigateur+dossier, types local/Teams/SharePoint), historique BAP simplifié (colonnes supprimées, bouton Réexporter), import manuel par dossier entier

client/src/components/DashboardLayout.tsx

@@ -62,8 +62,8 @@ const menuStructure: MenuItem[] = [
     label: "Configuration",
     color: "from-orange-500 to-amber-500",
     children: [
-      { icon: Settings, label: "Paramètres", path: "/settings" },
+      { icon: Settings, label: "Paramètres IA et Signatures", path: "/settings" },
-      { icon: Download, label: "Paramètres d'import", path: "/import-settings" },
+      { icon: Download, label: "Paramètres import / export", path: "/import-settings" },
       { icon: List, label: "Administration des listes", path: "/lists-admin" },
       { icon: Zap, label: "Automatismes", path: "/automation-rules" },
       { icon: Users, label: "Utilisateurs", path: "/users", adminOnly: true },

client/src/pages/BapHistory.tsx

@@ -12,14 +12,12 @@ import {
   CheckSquare,
   Search,
   Trash2,
-  ExternalLink,
   FolderOpen,
   Monitor,
   Calendar,
-  Building2,
   User,
-  FileText,
   Download,
+  RefreshCw,
 } from "lucide-react";
 
 // Helper : télécharge un PDF annoté BAP depuis son URL de stockage
@@ -193,15 +191,7 @@ export default function BapHistory() {
                           Date validation
                         </div>
                       </TableHead>
-                      <TableHead>
-                        <div className="flex items-center gap-1">
-                          <Building2 className="h-3.5 w-3.5" />
-                          Fournisseur
-                        </div>
-                      </TableHead>
                       <TableHead>N° Facture</TableHead>
-                      <TableHead>Montant</TableHead>
-                      <TableHead>Type achat</TableHead>
                       <TableHead>
                         <div className="flex items-center gap-1">
                           <User className="h-3.5 w-3.5" />
@@ -210,8 +200,8 @@ export default function BapHistory() {
                       </TableHead>
                       <TableHead>Service</TableHead>
                       <TableHead>Signature</TableHead>
-                      <TableHead>Export</TableHead>
+                      <TableHead>PDF</TableHead>
-                      <TableHead className="w-20">Actions</TableHead>
+                      <TableHead className="w-28">Actions</TableHead>
                     </TableRow>
                   </TableHeader>
                   <TableBody>
@@ -220,31 +210,9 @@ export default function BapHistory() {
                         <TableCell className="text-xs text-muted-foreground whitespace-nowrap">
                           {formatDate(entry.validatedAt)}
                         </TableCell>
-                        <TableCell className="font-medium max-w-[140px] truncate">
-                          {entry.supplierName || "—"}
-                        </TableCell>
                         <TableCell className="text-sm">
                           {entry.invoiceNumber || "—"}
                         </TableCell>
-                        <TableCell className="text-sm font-mono">
-                          {formatAmount(entry.totalAmount)}
-                        </TableCell>
-                        <TableCell>
-                          {entry.typeAchat ? (
-                            <Badge
-                              variant="outline"
-                              className={
-                                entry.typeAchat.toLowerCase().includes("capex")
-                                  ? "border-blue-400 text-blue-700 dark:text-blue-300"
-                                  : "border-green-400 text-green-700 dark:text-green-300"
-                              }
-                            >
-                              {entry.typeAchat.toUpperCase()}
-                            </Badge>
-                          ) : (
-                            "—"
-                          )}
-                        </TableCell>
                         <TableCell className="text-sm max-w-[120px] truncate">
                           {entry.recipientName || (
                             <span className="text-muted-foreground italic text-xs">TOUS</span>
@@ -263,7 +231,7 @@ export default function BapHistory() {
                           )}
                         </TableCell>
                         <TableCell>
-                          {entry.exportMode === "browser" && entry.pdfUrl ? (
+                          {entry.pdfUrl ? (
                             <div className="flex items-center gap-1">
                               <Button
                                 variant="ghost"
@@ -285,7 +253,7 @@ export default function BapHistory() {
                                 <Download className="h-3.5 w-3.5" />
                               </Button>
                             </div>
-                          ) : entry.exportMode === "folder" && entry.exportPath ? (
+                          ) : entry.exportPath ? (
                             <div className="flex items-center gap-1 text-orange-600">
                               <FolderOpen className="h-3.5 w-3.5" />
                               <span className="text-xs truncate max-w-[100px]" title={entry.exportPath}>
@@ -297,15 +265,31 @@ export default function BapHistory() {
                           )}
                         </TableCell>
                         <TableCell>
-                          <Button
+                          <div className="flex items-center gap-1">
-                            variant="ghost"
+                            {/* Bouton Réexporter */}
-                            size="sm"
+                            {entry.pdfUrl && (
-                            className="h-7 w-7 p-0 text-destructive hover:text-destructive hover:bg-destructive/10"
+                              <Button
-                            onClick={() => handleDelete(entry.id)}
+                                variant="ghost"
-                            disabled={deleteMutation.isPending}
+                                size="sm"
-                          >
+                                className="h-7 px-2 text-amber-600 hover:text-amber-700 hover:bg-amber-50"
-                            <Trash2 className="h-3.5 w-3.5" />
+                                onClick={() => downloadBapPdf(entry.pdfUrl!, entry.supplierName, entry.invoiceNumber, entry.validatedAt)}
-                          </Button>
+                                title="Réexporter le PDF annoté"
+                              >
+                                <RefreshCw className="h-3.5 w-3.5 mr-1" />
+                                <span className="text-xs">Réexporter</span>
+                              </Button>
+                            )}
+                            {/* Bouton Supprimer */}
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className="h-7 w-7 p-0 text-destructive hover:text-destructive hover:bg-destructive/10"
+                              onClick={() => handleDelete(entry.id)}
+                              disabled={deleteMutation.isPending}
+                            >
+                              <Trash2 className="h-3.5 w-3.5" />
+                            </Button>
+                          </div>
                         </TableCell>
                       </TableRow>
                     ))}

client/src/pages/ImportSettings.tsx

@@ -40,8 +40,12 @@ export default function ImportSettings() {
 
   // Export folder
   const [exportFolder, setExportFolder] = useState("");
-  // BAP export mode
+  // BAP export mode : les deux peuvent être actifs simultanément
-  const [bapExportMode, setBapExportMode] = useState<"browser" | "folder">("browser");
+  const [bapExportBrowser, setBapExportBrowser] = useState(true);
+  const [bapExportFolder, setBapExportFolder] = useState(false);
+  const [exportFolderType, setExportFolderType] = useState<"local" | "teams" | "sharepoint">("local");
+  // Compat. ancienne valeur
+  const [bapExportMode, setBapExportMode] = useState<"browser" | "folder" | "both">("browser");
 
   // Initialize form with settings from database
   useEffect(() => {
@@ -57,10 +61,25 @@ export default function ImportSettings() {
       setEmailImportPort(settings.emailImportPort || 993);
       setEmailImportFrequency(settings.emailImportFrequency || 30);
       setExportFolder(settings.exportFolder || "");
-      setBapExportMode((settings.bapExportMode as "browser" | "folder") || "browser");
+      const savedMode = (settings.bapExportMode as string) || "browser";
+      // Compat : ancienne valeur unique -> dériver les deux switches
+      setBapExportBrowser(savedMode === "browser" || savedMode === "both");
+      setBapExportFolder(savedMode === "folder" || savedMode === "both");
+      setBapExportMode(savedMode as "browser" | "folder" | "both");
+      // Lire le type de dossier depuis exportFolder (préfixe teams:// ou sharepoint://)
+      if ((settings.exportFolder || "").startsWith("teams://")) setExportFolderType("teams");
+      else if ((settings.exportFolder || "").startsWith("sharepoint://")) setExportFolderType("sharepoint");
+      else setExportFolderType("local");
     }
   }, [settings]);
 
+  // Calculer le bapExportMode à sauvegarder depuis les deux switches
+  const computedExportMode = (): "browser" | "folder" | "both" => {
+    if (bapExportBrowser && bapExportFolder) return "both";
+    if (bapExportFolder) return "folder";
+    return "browser";
+  };
+
   const handleSave = async () => {
     try {
       await updateMutation.mutateAsync({
@@ -75,7 +94,7 @@ export default function ImportSettings() {
         emailImportPort: emailImportPort,
         emailImportFrequency: emailImportFrequency,
         exportFolder: exportFolder || null,
-        bapExportMode: bapExportMode,
+        bapExportMode: computedExportMode() as "browser" | "folder",
       });
 
       toast.success("Paramètres enregistrés avec succès");
@@ -106,10 +125,10 @@ export default function ImportSettings() {
             </div>
             <div>
               <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
-                Paramètres de réception
+                Paramètres import / export
               </h1>
               <p className="text-muted-foreground mt-1">
-                Configurez les différentes méthodes d'importation de factures
+                Configurez les méthodes d'importation et les options d'export des factures BAP
               </p>
             </div>
           </div>
@@ -473,79 +492,149 @@ export default function ImportSettings() {
           </CardContent>
         </Card>
 
-        {/* Export Folder & BAP Export Mode */}
+        {/* Export des factures BAP */}
         <Card className="border-2 hover:border-primary/50 transition-colors">
           <CardHeader className="bg-gradient-to-r from-orange-50 to-amber-50 dark:from-orange-950/20 dark:to-amber-950/20 border-b">
             <div className="flex items-center gap-3">
               <div className="p-2 bg-orange-500 rounded-lg">
-                <Download className="w-6 h-6 text-white" />
+                <FolderOutput className="w-6 h-6 text-white" />
               </div>
               <div>
                 <CardTitle className="text-xl">Export des factures BAP</CardTitle>
                 <CardDescription className="mt-1">
-                  Configurez le mode d'export et le dossier de destination pour les factures validées BAP
+                  Configurez les modes d'export pour les factures validées BAP (les deux modes peuvent être actifs simultanément)
                 </CardDescription>
               </div>
             </div>
           </CardHeader>
           <CardContent className="space-y-6 pt-6">
-            {/* BAP Export Mode */}
+
-            <div className="space-y-3">
+            {/* Switch : Ouvrir dans le navigateur */}
-              <Label className="text-base font-medium">Mode d'export BAP</Label>
+            <div className="flex items-center justify-between p-4 bg-blue-50/50 dark:bg-blue-950/10 rounded-lg border border-blue-200 dark:border-blue-800">
-              <div className="grid grid-cols-2 gap-3">
+              <div className="flex items-center gap-3">
-                <button
+                <div className="p-2 bg-blue-500 rounded-lg">
-                  type="button"
+                  <Monitor className="w-5 h-5 text-white" />
-                  onClick={() => setBapExportMode("browser")}
+                </div>
-                  className={`flex flex-col items-center gap-2 p-4 rounded-xl border-2 transition-all ${
+                <div>
-                    bapExportMode === "browser"
+                  <Label htmlFor="bap-browser" className="text-base font-medium cursor-pointer">Ouvrir dans le navigateur</Label>
-                      ? "border-blue-500 bg-blue-50 dark:bg-blue-950/30 text-blue-700 dark:text-blue-300"
+                  <p className="text-xs text-muted-foreground mt-0.5">Le PDF s'ouvre directement dans un nouvel onglet</p>
-                      : "border-muted hover:border-muted-foreground/40 text-muted-foreground"
+                </div>
-                  }`}
-                >
-                  <Monitor className="w-8 h-8" />
-                  <div className="text-center">
-                    <div className="font-semibold text-sm">Ouvrir dans le navigateur</div>
-                    <div className="text-xs mt-0.5 opacity-70">Le PDF s'ouvre directement dans un nouvel onglet</div>
-                  </div>
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setBapExportMode("folder")}
-                  className={`flex flex-col items-center gap-2 p-4 rounded-xl border-2 transition-all ${
-                    bapExportMode === "folder"
-                      ? "border-orange-500 bg-orange-50 dark:bg-orange-950/30 text-orange-700 dark:text-orange-300"
-                      : "border-muted hover:border-muted-foreground/40 text-muted-foreground"
-                  }`}
-                >
-                  <FolderOutput className="w-8 h-8" />
-                  <div className="text-center">
-                    <div className="font-semibold text-sm">Enregistrer dans un dossier</div>
-                    <div className="text-xs mt-0.5 opacity-70">Le PDF est copié dans le dossier configuré ci-dessous</div>
-                  </div>
-                </button>
               </div>
+              <Switch
+                id="bap-browser"
+                checked={bapExportBrowser}
+                onCheckedChange={setBapExportBrowser}
+              />
             </div>
 
-            {/* Export Folder (shown for both modes but required for folder mode) */}
+            {/* Switch : Enregistrer dans un dossier */}
-            <div className="space-y-2">
+            <div className="flex items-center justify-between p-4 bg-orange-50/50 dark:bg-orange-950/10 rounded-lg border border-orange-200 dark:border-orange-800">
-              <Label htmlFor="exportFolder" className="text-base font-medium">
+              <div className="flex items-center gap-3">
-                Chemin du dossier d'export
+                <div className="p-2 bg-orange-500 rounded-lg">
-                {bapExportMode === "folder" && <span className="text-red-500 ml-1">*</span>}
+                  <FolderOutput className="w-5 h-5 text-white" />
-              </Label>
+                </div>
-              <Input
+                <div>
-                id="exportFolder"
+                  <Label htmlFor="bap-folder" className="text-base font-medium cursor-pointer">Enregistrer dans un dossier</Label>
-                type="text"
+                  <p className="text-xs text-muted-foreground mt-0.5">Le PDF est copié dans le dossier configuré ci-dessous</p>
-                placeholder="/chemin/vers/dossier/export"
+                </div>
-                value={exportFolder}
+              </div>
-                onChange={(e) => setExportFolder(e.target.value)}
+              <Switch
-                className="h-11"
+                id="bap-folder"
+                checked={bapExportFolder}
+                onCheckedChange={setBapExportFolder}
               />
-              <p className="text-sm text-muted-foreground">
-                {bapExportMode === "folder"
-                  ? "Chemin absolu obligatoire du dossier où les PDF BAP seront enregistrés"
-                  : "Chemin optionnel du dossier d'export (utilisé pour l'export SFTP et l'export groupé)"}
-              </p>
             </div>
+
+            {/* Configuration du dossier (visible si bapExportFolder actif) */}
+            {bapExportFolder && (
+              <div className="space-y-4 p-4 bg-orange-50/30 dark:bg-orange-950/10 rounded-lg border-2 border-orange-200 dark:border-orange-800">
+
+                {/* Type de dossier */}
+                <div className="space-y-2">
+                  <Label className="text-base font-medium">Type de destination</Label>
+                  <div className="grid grid-cols-3 gap-3">
+                    <button
+                      type="button"
+                      onClick={() => setExportFolderType("local")}
+                      className={`flex flex-col items-center gap-2 p-3 rounded-xl border-2 transition-all ${
+                        exportFolderType === "local"
+                          ? "border-orange-500 bg-orange-50 dark:bg-orange-950/30 text-orange-700 dark:text-orange-300"
+                          : "border-muted hover:border-muted-foreground/40 text-muted-foreground"
+                      }`}
+                    >
+                      <FolderOpen className="w-6 h-6" />
+                      <span className="text-xs font-semibold">Dossier local</span>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setExportFolderType("teams")}
+                      className={`flex flex-col items-center gap-2 p-3 rounded-xl border-2 transition-all ${
+                        exportFolderType === "teams"
+                          ? "border-purple-500 bg-purple-50 dark:bg-purple-950/30 text-purple-700 dark:text-purple-300"
+                          : "border-muted hover:border-muted-foreground/40 text-muted-foreground"
+                      }`}
+                    >
+                      <Download className="w-6 h-6" />
+                      <span className="text-xs font-semibold">Teams</span>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setExportFolderType("sharepoint")}
+                      className={`flex flex-col items-center gap-2 p-3 rounded-xl border-2 transition-all ${
+                        exportFolderType === "sharepoint"
+                          ? "border-cyan-500 bg-cyan-50 dark:bg-cyan-950/30 text-cyan-700 dark:text-cyan-300"
+                          : "border-muted hover:border-muted-foreground/40 text-muted-foreground"
+                      }`}
+                    >
+                      <Download className="w-6 h-6" />
+                      <span className="text-xs font-semibold">SharePoint</span>
+                    </button>
+                  </div>
+                </div>
+
+                {/* Chemin du dossier */}
+                <div className="space-y-2">
+                  <Label htmlFor="exportFolder" className="text-base font-medium">
+                    {exportFolderType === "local" && "Chemin du dossier local"}
+                    {exportFolderType === "teams" && "Chemin du dossier Teams"}
+                    {exportFolderType === "sharepoint" && "URL SharePoint / chemin"}
+                    <span className="text-red-500 ml-1">*</span>
+                  </Label>
+                  <div className="flex gap-2">
+                    <Input
+                      id="exportFolder"
+                      type="text"
+                      placeholder={
+                        exportFolderType === "local" ? "C:\\Users\\...\\Factures BAP" :
+                        exportFolderType === "teams" ? "teams://NomEquipe/Documents/Factures BAP" :
+                        "sharepoint://https://entreprise.sharepoint.com/sites/..."
+                      }
+                      value={exportFolder}
+                      onChange={(e) => setExportFolder(e.target.value)}
+                      className="h-11 flex-1"
+                    />
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {exportFolderType === "local" && "Chemin absolu du dossier local où les PDF BAP seront enregistrés (exécuté côté serveur)"}
+                    {exportFolderType === "teams" && "Format : teams://NomEquipe/Chemin/Dossier — le PDF sera copié dans le canal Teams correspondant"}
+                    {exportFolderType === "sharepoint" && "URL complète du dossier SharePoint de destination"}
+                  </p>
+                </div>
+              </div>
+            )}
+
+            {/* Résumé de la configuration */}
+            <div className="p-3 bg-muted/30 rounded-lg border text-sm text-muted-foreground">
+              <span className="font-medium text-foreground">Configuration active : </span>
+              {!bapExportBrowser && !bapExportFolder
+                ? <span className="text-amber-600">Aucun mode sélectionné — le téléchargement direct restera disponible</span>
+                : [
+                    bapExportBrowser && "Ouverture navigateur",
+                    bapExportFolder && `Enregistrement ${exportFolderType === "local" ? "dossier local" : exportFolderType === "teams" ? "Teams" : "SharePoint"}`,
+                  ].filter(Boolean).join(" + ")
+              }
+            </div>
+
           </CardContent>
         </Card>
 

client/src/pages/Upload.tsx

@@ -1,47 +1,128 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useRef, useEffect } from "react";
 import DashboardLayout from "@/components/DashboardLayout";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { trpc } from "@/lib/trpc";
-import { Upload as UploadIcon, FileText, Loader2, CheckCircle, AlertCircle } from "lucide-react";
+import {
+  Upload as UploadIcon,
+  FileText,
+  Loader2,
+  CheckCircle,
+  AlertCircle,
+  FolderOpen,
+  File,
+  X,
+  ChevronRight,
+} from "lucide-react";
 import { toast } from "sonner";
 import { useLocation } from "wouter";
 
+interface UploadedFile {
+  name: string;
+  sourceFileId: number;
+  status: "pending" | "processing" | "completed" | "error";
+  progress?: string;
+  invoicesDetected?: number;
+}
+
 export default function Upload() {
   const [, setLocation] = useLocation();
   const [isDragging, setIsDragging] = useState(false);
-  const [uploading, setUploading] = useState(false);
+  const [uploadMode, setUploadMode] = useState<"file" | "folder">("file");
-  const [sourceFileId, setSourceFileId] = useState<number | null>(null);
+  const [uploadedFiles, setUploadedFiles] = useState<UploadedFile[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const folderInputRef = useRef<HTMLInputElement>(null);
 
-  const uploadMutation = trpc.invoices.upload.useMutation({
+  const uploadMutation = trpc.invoices.upload.useMutation();
-    onSuccess: (data) => {
+
-      setSourceFileId(data.sourceFileId);
+  // Poll pour tous les fichiers en cours
-      toast.success("Fichier uploadé avec succès");
+  const pendingIds = uploadedFiles
-    },
+    .filter((f) => f.status === "processing" || f.status === "pending")
-    onError: (error) => {
+    .map((f) => f.sourceFileId);
-      toast.error(error.message || "Erreur lors de l'upload");
-      setUploading(false);
-    },
-  });
 
-  // Poll source file status
   const { data: sourceFiles } = trpc.sourceFiles.getByIds.useQuery(
-    { ids: sourceFileId ? [sourceFileId] : [] },
+    { ids: pendingIds },
     {
-      enabled: !!sourceFileId,
+      enabled: pendingIds.length > 0,
       refetchInterval: (query) => {
         const data = query.state.data;
         if (!data || data.length === 0) return false;
-        const file = data[0];
+        const allDone = data.every(
-        if (!file || file.processingStatus === "completed" || file.processingStatus === "error") {
+          (f) => !f || f.processingStatus === "completed" || f.processingStatus === "error"
-          return false;
+        );
-        }
+        return allDone ? false : 2000;
-        return 2000; // Poll every 2 seconds
       },
     }
   );
 
-  const sourceFile = sourceFiles && sourceFiles.length > 0 ? sourceFiles[0] : undefined;
+  // Mettre à jour les statuts depuis le polling
+  useEffect(() => {
+    if (!sourceFiles || sourceFiles.length === 0) return;
+    sourceFiles.forEach((sf) => {
+      if (!sf) return;
+      setUploadedFiles((prev) =>
+        prev.map((f) => {
+          if (f.sourceFileId !== sf.id) return f;
+          if (f.status === sf.processingStatus) return f;
+          return {
+            ...f,
+            status: (sf.processingStatus ?? "pending") as UploadedFile["status"],
+            progress: sf.processingProgress ?? undefined,
+            invoicesDetected: sf.totalInvoicesDetected ?? undefined,
+          };
+        })
+      );
+    });
+  }, [sourceFiles]);
+
+  const uploadFile = async (file: File): Promise<number | null> => {
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = async () => {
+        const base64 = (reader.result as string).split(",")[1];
+        try {
+          const data = await uploadMutation.mutateAsync({
+            fileName: file.name,
+            fileData: base64!,
+          });
+          resolve(data.sourceFileId);
+        } catch (err: any) {
+          toast.error(`Erreur pour ${file.name} : ${err.message || "Erreur inconnue"}`);
+          resolve(null);
+        }
+      };
+      reader.readAsDataURL(file);
+    });
+  };
+
+  const handleFiles = async (files: File[]) => {
+    const pdfFiles = files.filter((f) => f.type === "application/pdf");
+    if (pdfFiles.length === 0) {
+      toast.error("Aucun fichier PDF trouvé");
+      return;
+    }
+    if (pdfFiles.length < files.length) {
+      toast.warning(`${files.length - pdfFiles.length} fichier(s) ignoré(s) (non PDF)`);
+    }
+
+    setIsUploading(true);
+    toast.info(`Envoi de ${pdfFiles.length} fichier(s)...`);
+
+    for (const file of pdfFiles) {
+      const sourceFileId = await uploadFile(file);
+      if (sourceFileId !== null) {
+        setUploadedFiles((prev) => [
+          ...prev,
+          { name: file.name, sourceFileId, status: "processing" },
+        ]);
+      }
+    }
+
+    setIsUploading(false);
+    toast.success(`${pdfFiles.length} fichier(s) envoyé(s) — traitement en cours`);
+  };
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault();
@@ -53,70 +134,79 @@ export default function Upload() {
     setIsDragging(false);
   }, []);
 
-  const handleDrop = useCallback((e: React.DragEvent) => {
+  const handleDrop = useCallback(
-    e.preventDefault();
+    (e: React.DragEvent) => {
-    setIsDragging(false);
+      e.preventDefault();
+      setIsDragging(false);
+      const files = Array.from(e.dataTransfer.files);
+      handleFiles(files);
+    },
+    [uploadMode]
+  );
 
-    const files = Array.from(e.dataTransfer.files);
+  const handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const pdfFile = files.find((f) => f.type === "application/pdf");
+    const files = Array.from(e.target.files || []);
-
+    if (files.length > 0) handleFiles(files);
-    if (!pdfFile) {
+    // Reset input
-      toast.error("Veuillez sélectionner un fichier PDF");
+    e.target.value = "";
-      return;
-    }
-
-    handleFileUpload(pdfFile);
-  }, []);
-
-  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file) return;
-
-    if (file.type !== "application/pdf") {
-      toast.error("Veuillez sélectionner un fichier PDF");
-      return;
-    }
-
-    handleFileUpload(file);
   };
 
-  const handleFileUpload = async (file: File) => {
+  const completedCount = uploadedFiles.filter((f) => f.status === "completed").length;
-    setUploading(true);
+  const errorCount = uploadedFiles.filter((f) => f.status === "error").length;
-    setSourceFileId(null);
+  const processingCount = uploadedFiles.filter(
-
+    (f) => f.status === "processing" || f.status === "pending"
-    try {
+  ).length;
-      // Convert file to base64
-      const reader = new FileReader();
-      reader.onload = async () => {
-        const base64 = (reader.result as string).split(",")[1];
-        uploadMutation.mutate({
-          fileName: file.name,
-          fileData: base64!,
-        });
-      };
-      reader.readAsDataURL(file);
-    } catch (error) {
-      toast.error("Erreur lors de la lecture du fichier");
-      setUploading(false);
-    }
-  };
-
-  const handleViewInvoices = () => {
-    setLocation("/invoices");
-  };
 
   return (
     <DashboardLayout>
       <div className="max-w-3xl mx-auto space-y-6">
+        {/* Header */}
         <div>
           <h1 className="text-3xl font-bold">Importer des factures</h1>
-          <p className="text-gray-500 mt-1">Uploadez un fichier PDF contenant une ou plusieurs factures</p>
+          <p className="text-gray-500 mt-1">
+            Importez un fichier PDF unique ou tout un dossier de factures
+          </p>
         </div>
 
+        {/* Mode selector */}
+        <div className="flex gap-3">
+          <button
+            type="button"
+            onClick={() => setUploadMode("file")}
+            className={`flex items-center gap-2 px-4 py-2 rounded-lg border-2 text-sm font-medium transition-all ${
+              uploadMode === "file"
+                ? "border-purple-500 bg-purple-50 dark:bg-purple-950/30 text-purple-700 dark:text-purple-300"
+                : "border-muted hover:border-muted-foreground/40 text-muted-foreground"
+            }`}
+          >
+            <File className="w-4 h-4" />
+            Fichier unique
+          </button>
+          <button
+            type="button"
+            onClick={() => setUploadMode("folder")}
+            className={`flex items-center gap-2 px-4 py-2 rounded-lg border-2 text-sm font-medium transition-all ${
+              uploadMode === "folder"
+                ? "border-blue-500 bg-blue-50 dark:bg-blue-950/30 text-blue-700 dark:text-blue-300"
+                : "border-muted hover:border-muted-foreground/40 text-muted-foreground"
+            }`}
+          >
+            <FolderOpen className="w-4 h-4" />
+            Dossier entier
+          </button>
+        </div>
+
+        {/* Drop zone */}
         <Card>
           <CardHeader>
-            <CardTitle>Upload de fichier</CardTitle>
+            <CardTitle>
-            <CardDescription>Glissez-déposez un fichier PDF ou cliquez pour sélectionner</CardDescription>
+              {uploadMode === "file" ? "Upload de fichier PDF" : "Import d'un dossier"}
+            </CardTitle>
+            <CardDescription>
+              {uploadMode === "file"
+                ? "Glissez-déposez un fichier PDF ou cliquez pour sélectionner"
+                : "Sélectionnez un dossier — tous les fichiers PDF qu'il contient seront importés"}
+            </CardDescription>
           </CardHeader>
           <CardContent>
             <div
@@ -126,74 +216,141 @@ export default function Upload() {
               className={`
                 border-2 border-dashed rounded-lg p-12 text-center transition-colors
                 ${isDragging ? "border-blue-500 bg-blue-50" : "border-gray-300 hover:border-gray-400"}
-                ${uploading ? "opacity-50 pointer-events-none" : "cursor-pointer"}
+                ${isUploading ? "opacity-50 pointer-events-none" : "cursor-pointer"}
               `}
+              onClick={() => {
+                if (uploadMode === "file") fileInputRef.current?.click();
+                else folderInputRef.current?.click();
+              }}
             >
+              {/* Hidden inputs */}
               <input
+                ref={fileInputRef}
                 type="file"
                 accept="application/pdf"
-                onChange={handleFileSelect}
+                onChange={handleFileInputChange}
                 className="hidden"
-                id="file-input"
+                multiple
-                disabled={uploading}
               />
-              <label htmlFor="file-input" className="cursor-pointer">
+              <input
+                ref={folderInputRef}
+                type="file"
+                accept="application/pdf"
+                onChange={handleFileInputChange}
+                className="hidden"
+                // @ts-ignore — webkitdirectory is not in TS types but works in all modern browsers
+                webkitdirectory=""
+                multiple
+              />
+
+              {uploadMode === "file" ? (
                 <UploadIcon className="w-12 h-12 mx-auto mb-4 text-gray-400" />
-                <p className="text-lg font-medium mb-2">
+              ) : (
-                  {uploading ? "Upload en cours..." : "Glissez-déposez un fichier PDF ici"}
+                <FolderOpen className="w-12 h-12 mx-auto mb-4 text-blue-400" />
-                </p>
+              )}
-                <p className="text-sm text-gray-500">ou cliquez pour sélectionner un fichier</p>
+
-              </label>
+              <p className="text-lg font-medium mb-2">
+                {isUploading
+                  ? "Envoi en cours..."
+                  : uploadMode === "file"
+                  ? "Glissez-déposez un fichier PDF ici"
+                  : "Cliquez pour sélectionner un dossier"}
+              </p>
+              <p className="text-sm text-gray-500">
+                {uploadMode === "file"
+                  ? "ou cliquez pour sélectionner un ou plusieurs fichiers PDF"
+                  : "Tous les fichiers PDF du dossier sélectionné seront importés"}
+              </p>
             </div>
           </CardContent>
         </Card>
 
-        {/* Processing status */}
+        {/* Liste des fichiers uploadés */}
-        {sourceFile && (
+        {uploadedFiles.length > 0 && (
           <Card>
-            <CardHeader>
+            <CardHeader className="border-b">
-              <CardTitle>Traitement en cours</CardTitle>
+              <div className="flex items-center justify-between">
-              <CardDescription>{sourceFile.fileName}</CardDescription>
+                <div>
-            </CardHeader>
+                  <CardTitle>Fichiers importés</CardTitle>
-            <CardContent className="space-y-4">
+                  <CardDescription>
-              <div className="flex items-center gap-3">
+                    {completedCount > 0 && (
-                {sourceFile.processingStatus === "processing" && (
+                      <span className="text-green-600 font-medium">{completedCount} terminé(s) </span>
-                  <>
+                    )}
-                    <Loader2 className="w-5 h-5 animate-spin text-blue-600" />
+                    {processingCount > 0 && (
-                    <div>
+                      <span className="text-blue-600 font-medium">{processingCount} en cours </span>
-                      <div className="font-medium">Extraction en cours...</div>
+                    )}
-                      <div className="text-sm text-gray-500">{sourceFile.processingProgress}</div>
+                    {errorCount > 0 && (
-                    </div>
+                      <span className="text-red-600 font-medium">{errorCount} erreur(s)</span>
-                  </>
+                    )}
-                )}
+                  </CardDescription>
-                {sourceFile.processingStatus === "completed" && (
+                </div>
-                  <>
+                <div className="flex gap-2">
-                    <CheckCircle className="w-5 h-5 text-green-600" />
+                  {completedCount > 0 && (
-                    <div>
+                    <Button
-                      <div className="font-medium text-green-600">Traitement terminé</div>
+                      size="sm"
-                      <div className="text-sm text-gray-500">
+                      onClick={() => setLocation("/invoices")}
-                        {sourceFile.totalInvoicesDetected} facture(s) détectée(s)
+                      className="bg-green-600 hover:bg-green-700 text-white"
-                      </div>
+                    >
-                    </div>
+                      <FileText className="w-4 h-4 mr-1" />
-                  </>
+                      Voir les factures
-                )}
+                      <ChevronRight className="w-4 h-4 ml-1" />
-                {sourceFile.processingStatus === "error" && (
+                    </Button>
-                  <>
+                  )}
-                    <AlertCircle className="w-5 h-5 text-red-600" />
+                  <Button
-                    <div>
+                    size="sm"
-                      <div className="font-medium text-red-600">Erreur de traitement</div>
+                    variant="outline"
-                      <div className="text-sm text-gray-500">{sourceFile.processingProgress}</div>
+                    onClick={() => setUploadedFiles([])}
-                    </div>
+                  >
-                  </>
+                    <X className="w-4 h-4 mr-1" />
-                )}
+                    Effacer
+                  </Button>
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent className="p-0">
+              <div className="divide-y">
+                {uploadedFiles.map((f, i) => (
+                  <div key={i} className="flex items-center gap-3 px-4 py-3">
+                    {f.status === "processing" || f.status === "pending" ? (
+                      <Loader2 className="w-4 h-4 animate-spin text-blue-500 shrink-0" />
+                    ) : f.status === "completed" ? (
+                      <CheckCircle className="w-4 h-4 text-green-500 shrink-0" />
+                    ) : (
+                      <AlertCircle className="w-4 h-4 text-red-500 shrink-0" />
+                    )}
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium truncate">{f.name}</p>
+                      {f.status === "processing" && (
+                        <p className="text-xs text-muted-foreground">{f.progress || "Traitement en cours..."}</p>
+                      )}
+                      {f.status === "completed" && f.invoicesDetected !== undefined && (
+                        <p className="text-xs text-green-600">
+                          {f.invoicesDetected} facture(s) détectée(s)
+                        </p>
+                      )}
+                      {f.status === "error" && (
+                        <p className="text-xs text-red-500">{f.progress || "Erreur de traitement"}</p>
+                      )}
+                    </div>
+                    <Badge
+                      variant={
+                        f.status === "completed"
+                          ? "default"
+                          : f.status === "error"
+                          ? "destructive"
+                          : "secondary"
+                      }
+                      className={`text-xs shrink-0 ${f.status === "completed" ? "bg-green-500" : ""}`}
+                    >
+                      {f.status === "processing" || f.status === "pending"
+                        ? "En cours"
+                        : f.status === "completed"
+                        ? "Terminé"
+                        : "Erreur"}
+                    </Badge>
+                  </div>
+                ))}
               </div>
-
-              {sourceFile.processingStatus === "completed" && (
-                <Button onClick={handleViewInvoices} className="w-full">
-                  <FileText className="w-4 h-4 mr-2" />
-                  Voir les factures
-                </Button>
-              )}
             </CardContent>
           </Card>
         )}