Checkpoint: Chargement dynamique des listes de services et ventilations comptables depuis la base de données dans le formulaire d'édition de facture. Les valeurs personnalisées ajoutées dans "Administration des listes" apparaissent maintenant dans les menus déroulants.

client/src/pages/InvoiceDetail.tsx

@@ -16,6 +16,8 @@ export default function InvoiceDetail() {
   const invoiceId = parseInt(id || "0");
   
   const { data: invoice, isLoading } = trpc.invoices.getById.useQuery({ id: invoiceId });
+  const { data: departments } = trpc.departments.getByUser.useQuery();
+  const { data: allocations } = trpc.accountingAllocations.getByUser.useQuery();
   const utils = trpc.useUtils();
 
   const [isEditing, setIsEditing] = useState(false);
@@ -344,15 +346,14 @@ export default function InvoiceDetail() {
                   <Label htmlFor="serviceConcerne">Service concerné</Label>
                   {isEditing ? (
                     <select
-                      id="serviceConcerne"
                       value={formData.serviceConcerne}
                       onChange={(e) => setFormData({ ...formData, serviceConcerne: e.target.value })}
                       className="w-full px-3 py-2 border rounded-md"
                     >
                       <option value="">Sélectionner...</option>
-                      <option value="DSI">DSI</option>
-                      <option value="TRAVAUX">TRAVAUX</option>
-                      <option value="AUTRE">AUTRE</option>
+                      {departments?.map((dept) => (
+                        <option key={dept.id} value={dept.name}>{dept.name}</option>
+                      ))}
                     </select>
                   ) : (
                     <div className="text-sm mt-1">{invoice.serviceConcerne || "-"}</div>
@@ -381,17 +382,14 @@ export default function InvoiceDetail() {
                   <Label htmlFor="ventilationComptable">Ventilation comptable</Label>
                   {isEditing ? (
                     <select
-                      id="ventilationComptable"
                       value={formData.ventilationComptable}
                       onChange={(e) => setFormData({ ...formData, ventilationComptable: e.target.value })}
                       className="w-full px-3 py-2 border rounded-md"
                     >
                       <option value="">Sélectionner...</option>
-                      <option value="TOUS">TOUS</option>
-                      <option value="PA">PA</option>
-                      <option value="HEP">HEP</option>
-                      <option value="SANITAIRE">SANITAIRE</option>
-                      <option value="AUTRE">AUTRE</option>
+                      {allocations?.map((alloc) => (
+                        <option key={alloc.id} value={alloc.name}>{alloc.name}</option>
+                      ))}
                     </select>
                   ) : (
                     <div className="text-sm mt-1">{invoice.ventilationComptable || "-"}</div>