Checkpoint: Ajout d'un bouton "Détail" dans la liste des factures pour afficher le texte complet extrait du PDF. Le texte est maintenant demandé à Mistral AI lors de l'extraction et sauvegardé dans la base de données. Une boîte de dialogue affiche le texte complet avec défilement.

client/src/pages/Invoices.tsx

@@ -48,6 +48,8 @@ export default function Invoices() {
   const [addDialogType, setAddDialogType] = useState<"service" | "ventilation" | null>(null);
   const [newItemName, setNewItemName] = useState("");
   const [pendingInvoiceId, setPendingInvoiceId] = useState<number | null>(null);
+  const [textDialogOpen, setTextDialogOpen] = useState(false);
+  const [selectedInvoiceText, setSelectedInvoiceText] = useState<string | null>(null);
   const { data: invoices, isLoading } = trpc.invoices.list.useQuery();
   const { data: departments } = trpc.departments.getByUser.useQuery();
   const { data: allocations } = trpc.accountingAllocations.getByUser.useQuery();
@@ -511,11 +513,24 @@ export default function Invoices() {
                           <TableCell>{getExportStatusBadge(invoice.exportStatus || "not_exported")}</TableCell>
                           <TableCell>
                             <div className="flex gap-2">
+                              <Button
+                                size="sm"
+                                variant="outline"
+                                onClick={() => {
+                                  setSelectedInvoiceText(invoice.extractedText || "Aucun texte extrait disponible");
+                                  setTextDialogOpen(true);
+                                }}
+                                className="h-8 px-2"
+                                title="Voir le texte extrait"
+                              >
+                                <FileText className="h-4 w-4" />
+                              </Button>
                               <Button
                                 size="sm"
                                 variant="outline"
                                 onClick={() => setLocation(`/invoices/${invoice.id}`)}
                                 className="h-8 px-2"
+                                title="Modifier"
                               >
                                 <Edit className="h-4 w-4" />
                               </Button>
@@ -527,6 +542,7 @@ export default function Invoices() {
                                   setDeleteDialogOpen(true);
                                 }}
                                 className="h-8 px-2 text-red-600 hover:text-red-700 hover:bg-red-50"
+                                title="Supprimer"
                               >
                                 <Trash className="h-4 w-4" />
                               </Button>
@@ -625,6 +641,24 @@ export default function Invoices() {
           </DialogFooter>
         </DialogContent>
       </Dialog>
+
+      {/* Extracted Text Dialog */}
+      <Dialog open={textDialogOpen} onOpenChange={setTextDialogOpen}>
+        <DialogContent className="max-w-3xl max-h-[80vh]">
+          <DialogHeader>
+            <DialogTitle>Texte extrait de la facture</DialogTitle>
+            <DialogDescription>
+              Texte complet extrait du PDF lors de l'import
+            </DialogDescription>
+          </DialogHeader>
+          <div className="overflow-y-auto max-h-[60vh] p-4 bg-gray-50 rounded border">
+            <pre className="whitespace-pre-wrap text-sm font-mono">{selectedInvoiceText}</pre>
+          </div>
+          <DialogFooter>
+            <Button onClick={() => setTextDialogOpen(false)}>Fermer</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </DashboardLayout>
   );
 }