odentas
6485db4a75
- Tous les clients repliés par défaut à l'ouverture du modal - Boutons 'Tout replier' / 'Tout déplier' pour gérer tous les clients - Section factures repliable avec bouton Afficher/Masquer - Affichage résumé facture sélectionnée quand section repliée - Nouveau client déplié automatiquement pour faciliter la saisie - Améliore la lisibilité pour NAA avec nombreux clients
712 lines
31 KiB
TypeScript
712 lines
31 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { X, Plus, Trash2, ChevronDown, ChevronRight, Loader2 } from "lucide-react";
|
|
|
|
type PrestationLine = {
|
|
id?: string; // ID de la prestation existante (pour la suppression)
|
|
type_prestation: string;
|
|
quantite: number;
|
|
tarif: number;
|
|
total: number;
|
|
};
|
|
|
|
type ClientPrestations = {
|
|
client: string;
|
|
code: string;
|
|
expanded: boolean;
|
|
lines: PrestationLine[];
|
|
};
|
|
|
|
type ReferredClient = {
|
|
org_id: string;
|
|
code_employeur: string;
|
|
organizations: {
|
|
name: string;
|
|
};
|
|
};
|
|
|
|
type Invoice = {
|
|
id: string;
|
|
amount_ht: string;
|
|
created_at: string;
|
|
period_label?: string;
|
|
org_id: string;
|
|
};
|
|
|
|
type EditNAAModalProps = {
|
|
naaId: string;
|
|
onClose: () => void;
|
|
onSuccess: () => void;
|
|
};
|
|
|
|
export default function EditNAAModal({ naaId, onClose, onSuccess }: EditNAAModalProps) {
|
|
const [isUpdating, setIsUpdating] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
// Formulaire
|
|
const [referrerCode, setReferrerCode] = useState("");
|
|
const [periode, setPeriode] = useState("");
|
|
const [callsheetDate, setCallsheetDate] = useState("");
|
|
const [limitDate, setLimitDate] = useState("");
|
|
const [transferReference, setTransferReference] = useState("");
|
|
const [soldeCompte, setSoldeCompte] = useState("0");
|
|
const [deposit, setDeposit] = useState("0");
|
|
|
|
// Prestations groupées par client
|
|
const [clientsPrestations, setClientsPrestations] = useState<ClientPrestations[]>([]);
|
|
// Factures détectées par organisation
|
|
const [clientInvoices, setClientInvoices] = useState<Record<string, Invoice[]>>({});
|
|
// Ensemble des invoices sélectionnées (IDs)
|
|
const [selectedInvoiceIds, setSelectedInvoiceIds] = useState<Record<string, string[]>>({});
|
|
// État d'expansion des sections factures par org_id
|
|
const [invoicesExpanded, setInvoicesExpanded] = useState<Record<string, boolean>>({});
|
|
|
|
const typesPrestation = [
|
|
"Ouverture de compte",
|
|
"Abonnement",
|
|
"Paies CDDU",
|
|
"Paies RG",
|
|
"Avenants",
|
|
"Autres"
|
|
];
|
|
|
|
// Charger les données de la NAA existante
|
|
const { data: naaData, isLoading: isLoadingNaa } = useQuery({
|
|
queryKey: ["naa-detail", naaId],
|
|
queryFn: async () => {
|
|
const res = await fetch(`/api/staff/naa/${naaId}`, {
|
|
credentials: "include"
|
|
});
|
|
if (!res.ok) throw new Error("Impossible de charger la NAA");
|
|
return res.json();
|
|
},
|
|
});
|
|
|
|
// Charger les clients apportés
|
|
const { data: referredClients = [] } = useQuery<ReferredClient[]>({
|
|
queryKey: ["referred-clients", referrerCode],
|
|
queryFn: async () => {
|
|
if (!referrerCode) return [];
|
|
const res = await fetch(`/api/staff/referrers/${referrerCode}/clients`, {
|
|
credentials: "include"
|
|
});
|
|
if (!res.ok) return [];
|
|
return res.json();
|
|
},
|
|
enabled: !!referrerCode,
|
|
});
|
|
|
|
// Initialiser le formulaire avec les données existantes
|
|
useEffect(() => {
|
|
if (naaData) {
|
|
setReferrerCode(naaData.referrer_code || "");
|
|
setPeriode(naaData.periode || "");
|
|
setCallsheetDate(naaData.callsheet_date || "");
|
|
setLimitDate(naaData.limit_date || "");
|
|
setTransferReference(naaData.transfer_reference || "");
|
|
setSoldeCompte(String(naaData.solde_compte_apporteur || 0));
|
|
setDeposit(String(naaData.deposit || 0));
|
|
|
|
// Regrouper les prestations par client
|
|
if (naaData.prestations && naaData.prestations.length > 0) {
|
|
const grouped = naaData.prestations.reduce((acc: any, prest: any) => {
|
|
const key = `${prest.client_code}_${prest.client_name}`;
|
|
if (!acc[key]) {
|
|
acc[key] = {
|
|
client: prest.client_name,
|
|
code: prest.client_code,
|
|
expanded: false, // Replié par défaut
|
|
lines: []
|
|
};
|
|
}
|
|
acc[key].lines.push({
|
|
id: prest.id,
|
|
type_prestation: prest.type_prestation,
|
|
quantite: prest.quantite,
|
|
tarif: prest.tarif,
|
|
total: prest.total
|
|
});
|
|
return acc;
|
|
}, {});
|
|
|
|
setClientsPrestations(Object.values(grouped));
|
|
}
|
|
}
|
|
}, [naaData]);
|
|
|
|
// Si des clients sont déjà présents (à l'ouverture), précharger leurs factures
|
|
useEffect(() => {
|
|
const preload = async () => {
|
|
for (const client of clientsPrestations) {
|
|
if (client.code) {
|
|
const rc = referredClients.find(rc => rc.code_employeur === client.code);
|
|
if (rc && rc.org_id && !(clientInvoices[rc.org_id] || []).length) {
|
|
try {
|
|
const res = await fetch(`/api/staff/organizations/${rc.org_id}/invoices?periode=${encodeURIComponent(periode)}`, { credentials: 'include' });
|
|
if (!res.ok) continue;
|
|
const invoices = await res.json();
|
|
setClientInvoices(prev => ({ ...prev, [rc.org_id]: invoices }));
|
|
if (invoices && invoices.length > 0) {
|
|
setSelectedInvoiceIds(prev => ({ ...prev, [rc.org_id]: [invoices[0].id] }));
|
|
}
|
|
} catch (e) {
|
|
// ignore
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
if (clientsPrestations.length > 0 && referredClients.length > 0) {
|
|
preload();
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [clientsPrestations, referredClients]);
|
|
|
|
// Ajouter un nouveau client
|
|
const addClient = () => {
|
|
setClientsPrestations([...clientsPrestations, {
|
|
client: "",
|
|
code: "",
|
|
expanded: true, // Nouveau client déplié pour faciliter la saisie
|
|
lines: [{
|
|
type_prestation: "",
|
|
quantite: 1,
|
|
tarif: 0,
|
|
total: 0
|
|
}]
|
|
}]);
|
|
};
|
|
|
|
// Supprimer un client et toutes ses prestations
|
|
const removeClient = (clientIndex: number) => {
|
|
setClientsPrestations(clientsPrestations.filter((_, i) => i !== clientIndex));
|
|
};
|
|
|
|
// Ajouter une ligne de prestation pour un client
|
|
const addLineToClient = (clientIndex: number) => {
|
|
const newClients = [...clientsPrestations];
|
|
newClients[clientIndex].lines.push({
|
|
type_prestation: "",
|
|
quantite: 1,
|
|
tarif: 0,
|
|
total: 0
|
|
});
|
|
setClientsPrestations(newClients);
|
|
};
|
|
|
|
// Supprimer une ligne de prestation
|
|
const removeLine = (clientIndex: number, lineIndex: number) => {
|
|
const newClients = [...clientsPrestations];
|
|
newClients[clientIndex].lines = newClients[clientIndex].lines.filter((_, i) => i !== lineIndex);
|
|
setClientsPrestations(newClients);
|
|
};
|
|
|
|
// Mettre à jour le client
|
|
const updateClient = (clientIndex: number, clientName: string) => {
|
|
const newClients = [...clientsPrestations];
|
|
const selectedClient = referredClients.find(c => c.organizations.name === clientName);
|
|
newClients[clientIndex].client = clientName;
|
|
newClients[clientIndex].code = selectedClient?.code_employeur || "";
|
|
setClientsPrestations(newClients);
|
|
|
|
// Si on a trouvé l'org_id, récupérer les factures candidates
|
|
if (selectedClient?.org_id) {
|
|
fetch(`/api/staff/organizations/${selectedClient.org_id}/invoices?periode=${encodeURIComponent(periode)}`, {
|
|
credentials: "include"
|
|
})
|
|
.then(res => res.ok ? res.json() : [])
|
|
.then((invoices: Invoice[]) => {
|
|
setClientInvoices(prev => ({ ...prev, [selectedClient.org_id]: invoices }));
|
|
// Par défaut, sélectionner la facture la plus récente (la première)
|
|
if (invoices && invoices.length > 0) {
|
|
setSelectedInvoiceIds(prev => ({ ...prev, [selectedClient.org_id]: [invoices[0].id] }));
|
|
}
|
|
})
|
|
.catch(() => {});
|
|
}
|
|
};
|
|
|
|
const toggleInvoiceSelection = (orgId: string, invoiceId: string) => {
|
|
setSelectedInvoiceIds(prev => {
|
|
const current = prev[orgId] || [];
|
|
// Si cette facture est déjà la seule sélectionnée, on la désélectionne
|
|
if (current.length === 1 && current[0] === invoiceId) {
|
|
return { ...prev, [orgId]: [] };
|
|
}
|
|
// Sinon, on remplace la sélection par cette facture uniquement (mode radio)
|
|
return { ...prev, [orgId]: [invoiceId] };
|
|
});
|
|
};
|
|
|
|
// Mettre à jour une ligne de prestation
|
|
const updateLine = (clientIndex: number, lineIndex: number, field: keyof PrestationLine, value: any) => {
|
|
const newClients = [...clientsPrestations];
|
|
newClients[clientIndex].lines[lineIndex] = {
|
|
...newClients[clientIndex].lines[lineIndex],
|
|
[field]: value
|
|
};
|
|
|
|
// Calculer le total automatiquement
|
|
if (field === "quantite" || field === "tarif") {
|
|
const line = newClients[clientIndex].lines[lineIndex];
|
|
const quantite = field === "quantite" ? parseFloat(value) || 0 : line.quantite;
|
|
const tarif = field === "tarif" ? parseFloat(value) || 0 : line.tarif;
|
|
newClients[clientIndex].lines[lineIndex].total = quantite * tarif;
|
|
}
|
|
|
|
setClientsPrestations(newClients);
|
|
};
|
|
|
|
// Basculer l'état expanded d'un client
|
|
const toggleClientExpanded = (clientIndex: number) => {
|
|
const newClients = [...clientsPrestations];
|
|
newClients[clientIndex].expanded = !newClients[clientIndex].expanded;
|
|
setClientsPrestations(newClients);
|
|
};
|
|
|
|
// Tout replier
|
|
const collapseAll = () => {
|
|
setClientsPrestations(clientsPrestations.map(c => ({ ...c, expanded: false })));
|
|
};
|
|
|
|
// Tout déplier
|
|
const expandAll = () => {
|
|
setClientsPrestations(clientsPrestations.map(c => ({ ...c, expanded: true })));
|
|
};
|
|
|
|
// Basculer l'expansion de la section factures
|
|
const toggleInvoicesExpanded = (orgId: string) => {
|
|
setInvoicesExpanded(prev => ({ ...prev, [orgId]: !prev[orgId] }));
|
|
};
|
|
|
|
// Calculer le total pour un client
|
|
const getClientTotal = (client: ClientPrestations) => {
|
|
return client.lines.reduce((sum, line) => sum + line.total, 0);
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
|
|
if (!referrerCode || !periode || !callsheetDate) {
|
|
setError("Veuillez remplir tous les champs obligatoires");
|
|
return;
|
|
}
|
|
|
|
setIsUpdating(true);
|
|
|
|
try {
|
|
// Convertir clientsPrestations en format plat pour l'API
|
|
const prestations = clientsPrestations.flatMap(client =>
|
|
client.lines.map(line => ({
|
|
id: line.id, // Inclure l'ID pour identifier les prestations existantes
|
|
client: client.client,
|
|
code: client.code,
|
|
type_prestation: line.type_prestation,
|
|
quantite: line.quantite,
|
|
tarif: line.tarif,
|
|
total: line.total
|
|
}))
|
|
);
|
|
|
|
const payload = {
|
|
referrer_code: referrerCode,
|
|
periode,
|
|
callsheet_date: callsheetDate,
|
|
limit_date: limitDate || undefined,
|
|
transfer_reference: transferReference || undefined,
|
|
solde_compte_apporteur: parseFloat(soldeCompte) || 0,
|
|
deposit: parseFloat(deposit) || 0,
|
|
prestations,
|
|
// Liste des factures explicitement incluses par l'utilisateur (IDs)
|
|
included_invoices: Object.values(selectedInvoiceIds).flat()
|
|
};
|
|
|
|
const res = await fetch(`/api/staff/naa/${naaId}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
credentials: "include",
|
|
body: JSON.stringify(payload)
|
|
});
|
|
|
|
if (!res.ok) {
|
|
const errorData = await res.json();
|
|
throw new Error(errorData.error || "Erreur lors de la mise à jour de la NAA");
|
|
}
|
|
|
|
onSuccess();
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
setIsUpdating(false);
|
|
}
|
|
};
|
|
|
|
if (isLoadingNaa) {
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
|
<div className="bg-white rounded-2xl shadow-xl p-8 flex items-center gap-3">
|
|
<Loader2 className="w-6 h-6 animate-spin text-indigo-600" />
|
|
<span className="text-slate-700">Chargement de la NAA...</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
|
|
<div className="bg-white rounded-2xl shadow-xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
|
|
{/* Header */}
|
|
<div className="px-6 py-4 border-b flex items-center justify-between">
|
|
<div>
|
|
<h2 className="text-xl font-bold text-slate-800">
|
|
Modifier la NAA
|
|
</h2>
|
|
<p className="text-sm text-slate-500 mt-1">
|
|
{naaData?.naa_number} - {naaData?.periode}
|
|
</p>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
disabled={isUpdating}
|
|
className="text-slate-400 hover:text-slate-600 transition"
|
|
>
|
|
<X className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Body */}
|
|
<form onSubmit={handleSubmit} className="flex-1 overflow-y-auto">
|
|
<div className="p-6 space-y-6">
|
|
{error && (
|
|
<div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Info: Champs de base non modifiables */}
|
|
<div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
|
|
<p className="text-sm text-blue-800">
|
|
<strong>Note :</strong> Les champs de base (apporteur, période, dates) ne sont pas modifiables.
|
|
Vous pouvez uniquement ajouter ou supprimer des prestations.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Champs de base (lecture seule) */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-2">
|
|
Apporteur d'affaires
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={`${referrerCode} - ${naaData?.referrer_name || ""}`}
|
|
disabled
|
|
className="w-full px-3 py-2 bg-slate-100 border rounded-lg text-slate-500 cursor-not-allowed"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-2">
|
|
Période
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={periode}
|
|
disabled
|
|
className="w-full px-3 py-2 bg-slate-100 border rounded-lg text-slate-500 cursor-not-allowed"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Prestations par client */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-lg font-semibold text-slate-800">
|
|
Prestations
|
|
</h3>
|
|
<div className="flex items-center gap-2">
|
|
{clientsPrestations.length > 0 && (
|
|
<>
|
|
<button
|
|
type="button"
|
|
onClick={collapseAll}
|
|
disabled={isUpdating}
|
|
className="px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg transition disabled:opacity-50"
|
|
>
|
|
Tout replier
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={expandAll}
|
|
disabled={isUpdating}
|
|
className="px-3 py-2 text-sm text-slate-600 hover:bg-slate-100 rounded-lg transition disabled:opacity-50"
|
|
>
|
|
Tout déplier
|
|
</button>
|
|
</>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={addClient}
|
|
disabled={isUpdating}
|
|
className="px-4 py-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition disabled:opacity-50 flex items-center gap-2"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
Ajouter un client
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{clientsPrestations.length === 0 ? (
|
|
<div className="text-center py-8 bg-slate-50 rounded-xl border border-dashed">
|
|
<p className="text-slate-500">Aucune prestation. Cliquez sur "Ajouter un client" pour commencer.</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{clientsPrestations.map((client, clientIndex) => (
|
|
<div key={clientIndex} className="border rounded-xl overflow-hidden bg-white">
|
|
{/* En-tête du client */}
|
|
<div className="bg-slate-50 px-4 py-3 flex items-center justify-between border-b">
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleClientExpanded(clientIndex)}
|
|
className="flex items-center gap-2 flex-1 text-left font-medium text-slate-700 hover:text-indigo-600 transition"
|
|
>
|
|
{client.expanded ? (
|
|
<ChevronDown className="w-5 h-5" />
|
|
) : (
|
|
<ChevronRight className="w-5 h-5" />
|
|
)}
|
|
<span>
|
|
{client.client || "Client non défini"} {client.code && `(${client.code})`}
|
|
</span>
|
|
<span className="ml-auto text-sm text-slate-500">
|
|
{client.lines.length} prestation{client.lines.length > 1 ? "s" : ""} • Total: {getClientTotal(client).toFixed(2)} €
|
|
</span>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeClient(clientIndex)}
|
|
disabled={isUpdating}
|
|
className="ml-2 p-2 text-red-600 hover:bg-red-50 rounded-lg transition disabled:opacity-50"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Contenu du client */}
|
|
{client.expanded && (
|
|
<div className="p-4 space-y-4">
|
|
{/* Sélection du client */}
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-2">
|
|
Nom du client
|
|
</label>
|
|
<select
|
|
value={client.client}
|
|
onChange={(e) => updateClient(clientIndex, e.target.value)}
|
|
disabled={isUpdating}
|
|
className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
|
|
>
|
|
<option value="">Sélectionner un client</option>
|
|
{referredClients.map((rc: any) => (
|
|
<option key={rc.org_id} value={rc.organizations.name}>
|
|
{rc.organizations.name} ({rc.code_employeur})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Lignes de prestations */}
|
|
{/* Factures détectées pour inclusion/exclusion */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<label className="block text-sm font-medium text-slate-700">Factures détectées</label>
|
|
{(() => {
|
|
const orgId = client.code ? referredClients.find(rc => rc.code_employeur === client.code)?.org_id : undefined;
|
|
const invoices = orgId ? clientInvoices[orgId] || [] : [];
|
|
if (orgId && invoices.length > 0) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleInvoicesExpanded(orgId)}
|
|
className="text-xs text-slate-500 hover:text-slate-700 flex items-center gap-1"
|
|
>
|
|
{invoicesExpanded[orgId] ? (
|
|
<>
|
|
<ChevronDown className="w-3 h-3" />
|
|
Masquer
|
|
</>
|
|
) : (
|
|
<>
|
|
<ChevronRight className="w-3 h-3" />
|
|
Afficher
|
|
</>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|
|
return null;
|
|
})()}
|
|
</div>
|
|
<div className="bg-white border rounded-lg p-2">
|
|
{(() => {
|
|
const orgId = client.code ? referredClients.find(rc => rc.code_employeur === client.code)?.org_id : undefined;
|
|
const invoices = orgId ? clientInvoices[orgId] || [] : [];
|
|
if (!orgId) return <div className="text-sm text-slate-500">Sélectionnez un client pour voir les factures.</div>;
|
|
if (invoices.length === 0) return <div className="text-sm text-slate-500">Aucune facture détectée pour cette période.</div>;
|
|
|
|
// Si replié, afficher juste la facture sélectionnée
|
|
if (!invoicesExpanded[orgId]) {
|
|
const selectedId = (selectedInvoiceIds[orgId] || [])[0];
|
|
const selectedInvoice = invoices.find(inv => inv.id === selectedId);
|
|
if (selectedInvoice) {
|
|
return (
|
|
<div className="text-sm text-slate-700">
|
|
Facture sélectionnée : {selectedInvoice.period_label || new Date(selectedInvoice.created_at).toLocaleDateString("fr-FR")} — {parseFloat(selectedInvoice.amount_ht).toFixed(2)} €
|
|
</div>
|
|
);
|
|
}
|
|
return <div className="text-sm text-slate-500">Aucune facture sélectionnée</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
{invoices.map(inv => (
|
|
<label key={inv.id} className="flex items-center gap-3 text-sm cursor-pointer hover:bg-slate-50 p-2 rounded-lg transition">
|
|
<input
|
|
type="radio"
|
|
name={`invoice-${orgId}`}
|
|
checked={(selectedInvoiceIds[inv.org_id] || []).includes(inv.id)}
|
|
onChange={() => toggleInvoiceSelection(inv.org_id, inv.id)}
|
|
className="w-4 h-4"
|
|
/>
|
|
<span className="flex-1">{inv.period_label || new Date(inv.created_at).toLocaleDateString("fr-FR")} — {parseFloat(inv.amount_ht).toFixed(2)} €</span>
|
|
<span className="text-slate-400 text-xs">#{inv.id.substring(0, 8)}</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
{client.lines.map((line, lineIndex) => (
|
|
<div key={lineIndex} className="grid grid-cols-12 gap-2 items-start p-3 bg-slate-50 rounded-lg">
|
|
<div className="col-span-4">
|
|
<label className="block text-xs font-medium text-slate-600 mb-1">
|
|
Type de prestation
|
|
</label>
|
|
<select
|
|
value={line.type_prestation}
|
|
onChange={(e) => updateLine(clientIndex, lineIndex, "type_prestation", e.target.value)}
|
|
disabled={isUpdating}
|
|
className="w-full px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
|
|
>
|
|
<option value="">Type</option>
|
|
{typesPrestation.map((type) => (
|
|
<option key={type} value={type}>
|
|
{type}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-xs font-medium text-slate-600 mb-1">
|
|
Quantité
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={line.quantite}
|
|
onChange={(e) => updateLine(clientIndex, lineIndex, "quantite", e.target.value)}
|
|
disabled={isUpdating}
|
|
className="w-full px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
|
|
min="0"
|
|
step="1"
|
|
/>
|
|
</div>
|
|
<div className="col-span-2">
|
|
<label className="block text-xs font-medium text-slate-600 mb-1">
|
|
Tarif (€)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={line.tarif}
|
|
onChange={(e) => updateLine(clientIndex, lineIndex, "tarif", e.target.value)}
|
|
disabled={isUpdating}
|
|
className="w-full px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 disabled:opacity-50"
|
|
min="0"
|
|
step="0.01"
|
|
/>
|
|
</div>
|
|
<div className="col-span-3">
|
|
<label className="block text-xs font-medium text-slate-600 mb-1">
|
|
Total (€)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
value={line.total.toFixed(2)}
|
|
readOnly
|
|
className="w-full px-2 py-1.5 text-sm border rounded-lg bg-slate-100 text-slate-600"
|
|
/>
|
|
</div>
|
|
<div className="col-span-1 flex items-end justify-center">
|
|
<button
|
|
type="button"
|
|
onClick={() => removeLine(clientIndex, lineIndex)}
|
|
disabled={isUpdating || client.lines.length === 1}
|
|
className="p-1.5 text-red-600 hover:bg-red-50 rounded-lg transition disabled:opacity-30 disabled:cursor-not-allowed"
|
|
title={client.lines.length === 1 ? "Impossible de supprimer la dernière prestation" : "Supprimer cette prestation"}
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bouton ajouter prestation */}
|
|
<button
|
|
type="button"
|
|
onClick={() => addLineToClient(clientIndex)}
|
|
disabled={isUpdating}
|
|
className="w-full py-2 text-sm text-indigo-600 hover:text-indigo-700 hover:bg-indigo-50 rounded-lg transition flex items-center justify-center gap-1 disabled:opacity-50"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
Ajouter une prestation pour ce client
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="px-6 py-4 border-t flex items-center justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={isUpdating}
|
|
className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-xl transition disabled:opacity-50"
|
|
>
|
|
Annuler
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isUpdating}
|
|
className="px-6 py-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
|
>
|
|
{isUpdating && <Loader2 className="w-4 h-4 animate-spin" />}
|
|
{isUpdating ? "Mise à jour en cours..." : "Mettre à jour et régénérer le PDF"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|