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
This commit is contained in:
Manus
@@ -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: Download, label: "Paramètres d'import", path: "/import-settings" },
|
||||
{ icon: Settings, label: "Paramètres IA et Signatures", path: "/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 },
|
||||
|
||||
@@ -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 className="w-20">Actions</TableHead>
|
||||
<TableHead>PDF</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,6 +265,21 @@ export default function BapHistory() {
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Bouton Réexporter */}
|
||||
{entry.pdfUrl && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 px-2 text-amber-600 hover:text-amber-700 hover:bg-amber-50"
|
||||
onClick={() => downloadBapPdf(entry.pdfUrl!, entry.supplierName, entry.invoiceNumber, entry.validatedAt)}
|
||||
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"
|
||||
@@ -306,6 +289,7 @@ export default function BapHistory() {
|
||||
>
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
|
||||
@@ -40,8 +40,12 @@ export default function ImportSettings() {
|
||||
|
||||
// Export folder
|
||||
const [exportFolder, setExportFolder] = useState("");
|
||||
// BAP export mode
|
||||
const [bapExportMode, setBapExportMode] = useState<"browser" | "folder">("browser");
|
||||
// BAP export mode : les deux peuvent être actifs simultanément
|
||||
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">
|
||||
<Label className="text-base font-medium">Mode d'export BAP</Label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setBapExportMode("browser")}
|
||||
className={`flex flex-col items-center gap-2 p-4 rounded-xl border-2 transition-all ${
|
||||
bapExportMode === "browser"
|
||||
? "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"
|
||||
}`}
|
||||
>
|
||||
<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>
|
||||
|
||||
{/* Switch : Ouvrir dans le navigateur */}
|
||||
<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="flex items-center gap-3">
|
||||
<div className="p-2 bg-blue-500 rounded-lg">
|
||||
<Monitor className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
</button>
|
||||
<div>
|
||||
<Label htmlFor="bap-browser" className="text-base font-medium cursor-pointer">Ouvrir dans le navigateur</Label>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">Le PDF s'ouvre directement dans un nouvel onglet</p>
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
id="bap-browser"
|
||||
checked={bapExportBrowser}
|
||||
onCheckedChange={setBapExportBrowser}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Switch : Enregistrer dans un dossier */}
|
||||
<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">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="p-2 bg-orange-500 rounded-lg">
|
||||
<FolderOutput className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="bap-folder" className="text-base font-medium cursor-pointer">Enregistrer dans un dossier</Label>
|
||||
<p className="text-xs text-muted-foreground mt-0.5">Le PDF est copié dans le dossier configuré ci-dessous</p>
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
id="bap-folder"
|
||||
checked={bapExportFolder}
|
||||
onCheckedChange={setBapExportFolder}
|
||||
/>
|
||||
</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={() => setBapExportMode("folder")}
|
||||
className={`flex flex-col items-center gap-2 p-4 rounded-xl border-2 transition-all ${
|
||||
bapExportMode === "folder"
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{/* Export Folder (shown for both modes but required for folder mode) */}
|
||||
{/* Chemin du dossier */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="exportFolder" className="text-base font-medium">
|
||||
Chemin du dossier d'export
|
||||
{bapExportMode === "folder" && <span className="text-red-500 ml-1">*</span>}
|
||||
{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="/chemin/vers/dossier/export"
|
||||
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"
|
||||
className="h-11 flex-1"
|
||||
/>
|
||||
</div>
|
||||
<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é)"}
|
||||
{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>
|
||||
|
||||
|
||||
@@ -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 [sourceFileId, setSourceFileId] = useState<number | null>(null);
|
||||
const [uploadMode, setUploadMode] = useState<"file" | "folder">("file");
|
||||
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({
|
||||
onSuccess: (data) => {
|
||||
setSourceFileId(data.sourceFileId);
|
||||
toast.success("Fichier uploadé avec succès");
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(error.message || "Erreur lors de l'upload");
|
||||
setUploading(false);
|
||||
},
|
||||
});
|
||||
const uploadMutation = trpc.invoices.upload.useMutation();
|
||||
|
||||
// Poll pour tous les fichiers en cours
|
||||
const pendingIds = uploadedFiles
|
||||
.filter((f) => f.status === "processing" || f.status === "pending")
|
||||
.map((f) => f.sourceFileId);
|
||||
|
||||
// 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];
|
||||
if (!file || file.processingStatus === "completed" || file.processingStatus === "error") {
|
||||
return false;
|
||||
}
|
||||
return 2000; // Poll every 2 seconds
|
||||
const allDone = data.every(
|
||||
(f) => !f || f.processingStatus === "completed" || f.processingStatus === "error"
|
||||
);
|
||||
return allDone ? false : 2000;
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
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: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
|
||||
const files = Array.from(e.dataTransfer.files);
|
||||
const pdfFile = files.find((f) => f.type === "application/pdf");
|
||||
handleFiles(files);
|
||||
},
|
||||
[uploadMode]
|
||||
);
|
||||
|
||||
if (!pdfFile) {
|
||||
toast.error("Veuillez sélectionner un fichier PDF");
|
||||
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 handleFileInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = Array.from(e.target.files || []);
|
||||
if (files.length > 0) handleFiles(files);
|
||||
// Reset input
|
||||
e.target.value = "";
|
||||
};
|
||||
|
||||
const handleFileUpload = async (file: File) => {
|
||||
setUploading(true);
|
||||
setSourceFileId(null);
|
||||
|
||||
try {
|
||||
// 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");
|
||||
};
|
||||
const completedCount = uploadedFiles.filter((f) => f.status === "completed").length;
|
||||
const errorCount = uploadedFiles.filter((f) => f.status === "error").length;
|
||||
const processingCount = uploadedFiles.filter(
|
||||
(f) => f.status === "processing" || f.status === "pending"
|
||||
).length;
|
||||
|
||||
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>
|
||||
<CardDescription>Glissez-déposez un fichier PDF ou cliquez pour sélectionner</CardDescription>
|
||||
<CardTitle>
|
||||
{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"
|
||||
disabled={uploading}
|
||||
multiple
|
||||
/>
|
||||
<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" />
|
||||
) : (
|
||||
<FolderOpen className="w-12 h-12 mx-auto mb-4 text-blue-400" />
|
||||
)}
|
||||
|
||||
<p className="text-lg font-medium mb-2">
|
||||
{uploading ? "Upload en cours..." : "Glissez-déposez un fichier PDF ici"}
|
||||
{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>
|
||||
<p className="text-sm text-gray-500">ou cliquez pour sélectionner un fichier</p>
|
||||
</label>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Processing status */}
|
||||
{sourceFile && (
|
||||
{/* Liste des fichiers uploadés */}
|
||||
{uploadedFiles.length > 0 && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Traitement en cours</CardTitle>
|
||||
<CardDescription>{sourceFile.fileName}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
{sourceFile.processingStatus === "processing" && (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin text-blue-600" />
|
||||
<CardHeader className="border-b">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<div className="font-medium">Extraction en cours...</div>
|
||||
<div className="text-sm text-gray-500">{sourceFile.processingProgress}</div>
|
||||
</div>
|
||||
</>
|
||||
<CardTitle>Fichiers importés</CardTitle>
|
||||
<CardDescription>
|
||||
{completedCount > 0 && (
|
||||
<span className="text-green-600 font-medium">{completedCount} terminé(s) </span>
|
||||
)}
|
||||
{sourceFile.processingStatus === "completed" && (
|
||||
<>
|
||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||
<div>
|
||||
<div className="font-medium text-green-600">Traitement terminé</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{sourceFile.totalInvoicesDetected} facture(s) détectée(s)
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
{processingCount > 0 && (
|
||||
<span className="text-blue-600 font-medium">{processingCount} en cours </span>
|
||||
)}
|
||||
{sourceFile.processingStatus === "error" && (
|
||||
<>
|
||||
<AlertCircle className="w-5 h-5 text-red-600" />
|
||||
<div>
|
||||
<div className="font-medium text-red-600">Erreur de traitement</div>
|
||||
<div className="text-sm text-gray-500">{sourceFile.processingProgress}</div>
|
||||
</div>
|
||||
</>
|
||||
{errorCount > 0 && (
|
||||
<span className="text-red-600 font-medium">{errorCount} erreur(s)</span>
|
||||
)}
|
||||
</CardDescription>
|
||||
</div>
|
||||
|
||||
{sourceFile.processingStatus === "completed" && (
|
||||
<Button onClick={handleViewInvoices} className="w-full">
|
||||
<FileText className="w-4 h-4 mr-2" />
|
||||
<div className="flex gap-2">
|
||||
{completedCount > 0 && (
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => setLocation("/invoices")}
|
||||
className="bg-green-600 hover:bg-green-700 text-white"
|
||||
>
|
||||
<FileText className="w-4 h-4 mr-1" />
|
||||
Voir les factures
|
||||
<ChevronRight className="w-4 h-4 ml-1" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => setUploadedFiles([])}
|
||||
>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user