Factures{" "}
@@ -144,6 +200,16 @@ function FacturesPage() {
+
+ {/* Compact dropzone en bas — toujours là pour drag-and-drop rapide
+ sans avoir à vider la liste. */}
+
+ upload.mutate(files)}
+ isUploading={upload.isPending}
+ />
+
)}
@@ -151,7 +217,13 @@ function FacturesPage() {
}
/** Empty state global : pas une seule facture. La dropzone EST l'écran. */
-function FacturesEmpty() {
+function FacturesEmpty({
+ onFiles,
+ isUploading,
+}: {
+ onFiles: (files: File[]) => void;
+ isUploading: boolean;
+}) {
return (
@@ -163,7 +235,7 @@ function FacturesEmpty() {
en 30 secondes.
-
+
);
}
diff --git a/apps/web/src/routes/_app/factures_.import.$batchId.tsx b/apps/web/src/routes/_app/factures_.import.$batchId.tsx
new file mode 100644
index 0000000..bc6419b
--- /dev/null
+++ b/apps/web/src/routes/_app/factures_.import.$batchId.tsx
@@ -0,0 +1,420 @@
+import { useEffect, useMemo, useState } from "react";
+import {
+ createFileRoute,
+ Link,
+ useNavigate,
+} from "@tanstack/react-router";
+import {
+ useMutation,
+ useQuery,
+ useQueryClient,
+} from "@tanstack/react-query";
+import {
+ X,
+ Check,
+ ArrowRight,
+ AlertTriangle,
+ SkipForward,
+} from "lucide-react";
+import { toast } from "sonner";
+
+import type { Invoice, Plan } from "@rubis/shared";
+import { api } from "@/lib/api";
+import { queryKeys } from "@/lib/queryKeys";
+import { cn } from "@/lib/utils";
+import { formatEuros } from "@/lib/format";
+
+import { Button } from "@/components/ui/Button";
+import { Card } from "@/components/ui/Card";
+import { Eyebrow } from "@/components/ui/Eyebrow";
+import { Field } from "@/components/ui/Field";
+import { Input } from "@/components/ui/Input";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/Select";
+import { PdfPreview } from "@/components/factures/PdfPreview";
+
+type DraftFields = {
+ clientName: string;
+ clientEmail: string | null;
+ numero: string;
+ amountTtcCents: number;
+ issueDate: string;
+ dueDate: string;
+ planId: string | null;
+};
+
+type ImportDraft = {
+ id: string;
+ filename: string;
+ extracted: DraftFields;
+ edited: DraftFields;
+ confidence: Partial
>;
+ status: "pending" | "validated" | "skipped";
+};
+
+type ImportBatch = {
+ id: string;
+ drafts: ImportDraft[];
+ createdAt: string;
+};
+
+export const Route = createFileRoute("/_app/factures_/import/$batchId")({
+ component: ImportReviewPage,
+ loader: ({ context, params }) => {
+ void context.queryClient.prefetchQuery({
+ queryKey: ["import-batch", params.batchId] as const,
+ queryFn: () => api.get(`/api/v1/invoices/import-batch/${params.batchId}`),
+ });
+ void context.queryClient.prefetchQuery({
+ queryKey: queryKeys.plans.all(),
+ queryFn: () => api.get("/api/v1/plans"),
+ });
+ },
+});
+
+const LOW_CONFIDENCE = 0.7;
+
+function ImportReviewPage() {
+ const { batchId } = Route.useParams();
+ const navigate = useNavigate();
+ const queryClient = useQueryClient();
+
+ const { data: batch, isPending, isError } = useQuery({
+ queryKey: ["import-batch", batchId] as const,
+ queryFn: () => api.get(`/api/v1/invoices/import-batch/${batchId}`),
+ });
+
+ const { data: plans = [] } = useQuery({
+ queryKey: queryKeys.plans.all(),
+ queryFn: () => api.get("/api/v1/plans"),
+ });
+
+ // Le brouillon courant à éditer = le 1er draft pending. Quand l'utilisateur
+ // valide ou skip, MSW met à jour le statut, et le prochain pending devient
+ // automatiquement actif au refetch.
+ const pendingDrafts = useMemo(
+ () => batch?.drafts.filter((d) => d.status === "pending") ?? [],
+ [batch],
+ );
+ const currentDraft = pendingDrafts[0];
+ const completedCount =
+ batch?.drafts.filter((d) => d.status !== "pending").length ?? 0;
+ const totalCount = batch?.drafts.length ?? 0;
+
+ // État local pour les éditions du draft courant. Reset quand le draft change.
+ const [draft, setDraft] = useState(null);
+ useEffect(() => {
+ setDraft(currentDraft ? { ...currentDraft.edited } : null);
+ }, [currentDraft?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const validateMutation = useMutation({
+ mutationFn: (input: DraftFields) =>
+ api.post(
+ `/api/v1/invoices/import-batch/${batchId}/drafts/${currentDraft?.id}/validate`,
+ input,
+ ),
+ onSuccess: () => {
+ void queryClient.invalidateQueries({ queryKey: ["import-batch", batchId] });
+ void queryClient.invalidateQueries({ queryKey: queryKeys.invoices.all() });
+ void queryClient.invalidateQueries({ queryKey: ["invoices", "counts"] });
+ toast.success("Facture validée. + 1 rubis.");
+ },
+ onError: () => {
+ toast.error("Impossible de valider la facture. Vérifiez les champs.");
+ },
+ });
+
+ const skipMutation = useMutation({
+ mutationFn: () =>
+ api.post(
+ `/api/v1/invoices/import-batch/${batchId}/drafts/${currentDraft?.id}/skip`,
+ ),
+ onSuccess: () => {
+ void queryClient.invalidateQueries({ queryKey: ["import-batch", batchId] });
+ toast("Facture ignorée.");
+ },
+ });
+
+ const cancelBatchMutation = useMutation({
+ mutationFn: () => api.delete(`/api/v1/invoices/import-batch/${batchId}`),
+ onSuccess: () => {
+ toast("Import annulé.");
+ void navigate({ to: "/factures" });
+ },
+ });
+
+ // Quand tous les drafts sont processed, on file vers /factures avec un toast
+ // bilan. On utilise un effect pour ne déclencher qu'une fois.
+ const allProcessed =
+ !!batch && batch.drafts.length > 0 && pendingDrafts.length === 0;
+ useEffect(() => {
+ if (!allProcessed || !batch) return;
+ const validated = batch.drafts.filter((d) => d.status === "validated").length;
+ const skipped = batch.drafts.filter((d) => d.status === "skipped").length;
+ toast.success(
+ validated > 0
+ ? `${validated} facture${validated > 1 ? "s" : ""} ajoutée${
+ validated > 1 ? "s" : ""
+ }${skipped > 0 ? ` · ${skipped} ignorée${skipped > 1 ? "s" : ""}` : ""}.`
+ : "Import terminé sans facture validée.",
+ );
+ void navigate({ to: "/factures" });
+ }, [allProcessed]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ if (isError) {
+ return (
+
+
+ Lot d'import introuvable.
+
+
+ ← Retour aux factures
+
+
+ {/* === Header === */}
+
+
+
+ Import OCR · facture {indexInBatch} sur {totalCount}
+
+
+ Vérifiez les infos extraites
+
+
+ Modifiez si l'OCR s'est trompé, puis validez. On continue
+ avec la suivante automatiquement.
+
+
+
+
+
+
+ {/* Progression du batch */}
+
+
+
+ {completedCount}/{totalCount}
+
+
+
+ {/* === Body : 2 cols === */}
+
+
+ {/* === Actions footer === */}
+
+
+
+
+
+