551 lines
22 KiB
TypeScript
551 lines
22 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { X, Plus, Trash2, ChevronDown, ChevronRight } from "lucide-react";
|
|
|
|
type Referrer = {
|
|
id: string;
|
|
code: string;
|
|
name: string;
|
|
contact_name: string;
|
|
address: string;
|
|
postal_code: string;
|
|
city: string;
|
|
};
|
|
|
|
type PrestationLine = {
|
|
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 CreateNAAModalProps = {
|
|
onClose: () => void;
|
|
onSuccess: () => void;
|
|
};
|
|
|
|
export default function CreateNAAModal({ onClose, onSuccess }: CreateNAAModalProps) {
|
|
const [isGenerating, setIsGenerating] = 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[]>([]);
|
|
|
|
// Récupération des apporteurs
|
|
const { data: referrers = [] } = useQuery<Referrer[]>({
|
|
queryKey: ["referrers"],
|
|
queryFn: async () => {
|
|
const res = await fetch("/api/staff/referrers", {
|
|
credentials: "include"
|
|
});
|
|
if (!res.ok) return [];
|
|
return res.json();
|
|
},
|
|
});
|
|
|
|
// Récupération des clients apportés par l'apporteur sélectionné
|
|
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,
|
|
});
|
|
|
|
const selectedReferrer = referrers.find(r => r.code === referrerCode);
|
|
|
|
const typesPrestation = [
|
|
"Ouverture de compte",
|
|
"Abonnement",
|
|
"Paies CDDU",
|
|
"Paies RG",
|
|
"Avenants",
|
|
"Autres"
|
|
];
|
|
|
|
// Ajouter un nouveau client avec une prestation vide
|
|
const addClient = () => {
|
|
setClientsPrestations([...clientsPrestations, {
|
|
client: "",
|
|
code: "",
|
|
expanded: true,
|
|
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);
|
|
};
|
|
|
|
// 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);
|
|
};
|
|
|
|
// 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;
|
|
}
|
|
|
|
setIsGenerating(true);
|
|
|
|
try {
|
|
// Convertir clientsPrestations en format plat pour l'API
|
|
const prestations = clientsPrestations.flatMap(client =>
|
|
client.lines.map(line => ({
|
|
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
|
|
};
|
|
|
|
const res = await fetch("/api/staff/naa/generate", {
|
|
method: "POST",
|
|
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 génération de la NAA");
|
|
}
|
|
|
|
onSuccess();
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
setIsGenerating(false);
|
|
}
|
|
};
|
|
|
|
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">
|
|
<h2 className="text-xl font-bold text-slate-800">
|
|
Créer une Note Apporteur d'Affaires
|
|
</h2>
|
|
<button
|
|
onClick={onClose}
|
|
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>
|
|
)}
|
|
|
|
{/* Informations générales */}
|
|
<div>
|
|
<h3 className="font-medium text-slate-800 mb-3">Informations générales</h3>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">
|
|
Apporteur <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
value={referrerCode}
|
|
onChange={(e) => setReferrerCode(e.target.value)}
|
|
className="w-full px-3 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
required
|
|
>
|
|
<option value="">Sélectionner un apporteur</option>
|
|
{referrers.map(r => (
|
|
<option key={r.code} value={r.code}>
|
|
{r.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">
|
|
Période <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={periode}
|
|
onChange={(e) => setPeriode(e.target.value)}
|
|
placeholder="ex: Février 2025"
|
|
className="w-full px-3 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">
|
|
Date de la note <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={callsheetDate}
|
|
onChange={(e) => setCallsheetDate(e.target.value)}
|
|
className="w-full px-3 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">
|
|
Date limite de paiement
|
|
</label>
|
|
<input
|
|
type="date"
|
|
value={limitDate}
|
|
onChange={(e) => setLimitDate(e.target.value)}
|
|
className="w-full px-3 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">
|
|
Référence de virement
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={transferReference}
|
|
onChange={(e) => setTransferReference(e.target.value)}
|
|
placeholder="ex: DFQM-000001-Janvier 2024"
|
|
className="w-full px-3 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">
|
|
Solde compte apporteur
|
|
</label>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
value={soldeCompte}
|
|
onChange={(e) => setSoldeCompte(e.target.value)}
|
|
className="w-full px-3 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-slate-700 mb-1">
|
|
Acompte
|
|
</label>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
value={deposit}
|
|
onChange={(e) => setDeposit(e.target.value)}
|
|
className="w-full px-3 py-2 border rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Prestations groupées par client */}
|
|
<div>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="font-medium text-slate-800">Prestations par client</h3>
|
|
<button
|
|
type="button"
|
|
onClick={addClient}
|
|
className="flex items-center gap-1 text-sm text-indigo-600 hover:text-indigo-700 font-medium"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
Ajouter un client
|
|
</button>
|
|
</div>
|
|
|
|
{clientsPrestations.length === 0 ? (
|
|
<div className="text-center py-8 text-slate-500 bg-slate-50 rounded-xl">
|
|
Aucun client ajouté
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{clientsPrestations.map((clientPresta, clientIndex) => (
|
|
<div key={clientIndex} className="border rounded-xl bg-white">
|
|
{/* En-tête client */}
|
|
<div className="p-4 bg-slate-50 rounded-t-xl border-b flex items-center justify-between">
|
|
<div className="flex items-center gap-3 flex-1">
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleClientExpanded(clientIndex)}
|
|
className="text-slate-600 hover:text-slate-800"
|
|
>
|
|
{clientPresta.expanded ? (
|
|
<ChevronDown className="w-5 h-5" />
|
|
) : (
|
|
<ChevronRight className="w-5 h-5" />
|
|
)}
|
|
</button>
|
|
<div className="flex-1 grid grid-cols-3 gap-3">
|
|
<div className="col-span-2">
|
|
<select
|
|
value={clientPresta.client}
|
|
onChange={(e) => updateClient(clientIndex, e.target.value)}
|
|
className="w-full px-3 py-2 text-sm font-medium border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
>
|
|
<option value="">Sélectionner un client</option>
|
|
{referredClients.map((client) => (
|
|
<option key={client.org_id} value={client.organizations.name}>
|
|
{client.organizations.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<input
|
|
type="text"
|
|
value={clientPresta.code}
|
|
readOnly
|
|
placeholder="Code"
|
|
className="w-full px-3 py-2 text-sm border rounded-lg bg-slate-100 text-slate-600"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="text-right min-w-[120px]">
|
|
<div className="text-xs text-slate-500">Total client</div>
|
|
<div className="text-lg font-bold text-slate-800">
|
|
{getClientTotal(clientPresta).toFixed(2)} €
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeClient(clientIndex)}
|
|
className="ml-3 p-2 text-red-600 hover:bg-red-50 rounded-lg transition"
|
|
title="Supprimer ce client"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Lignes de prestations */}
|
|
{clientPresta.expanded && (
|
|
<div className="p-4 space-y-2">
|
|
{clientPresta.lines.map((line, lineIndex) => (
|
|
<div key={lineIndex} className="flex items-end gap-2 bg-slate-50 p-3 rounded-lg">
|
|
<div className="flex-1 grid grid-cols-4 gap-2">
|
|
<div>
|
|
<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)}
|
|
className="w-full px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
>
|
|
<option value="">Type</option>
|
|
{typesPrestation.map((type) => (
|
|
<option key={type} value={type}>
|
|
{type}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<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)}
|
|
className="w-full px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-600 mb-1">
|
|
Tarif unitaire (€)
|
|
</label>
|
|
<input
|
|
type="number"
|
|
step="0.01"
|
|
value={line.tarif}
|
|
onChange={(e) => updateLine(clientIndex, lineIndex, "tarif", e.target.value)}
|
|
className="w-full px-2 py-1.5 text-sm border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-slate-600 mb-1">
|
|
Total ligne (€)
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={line.total.toFixed(2)}
|
|
readOnly
|
|
className="w-full px-2 py-1.5 text-sm border rounded-lg bg-slate-100 text-slate-700 font-medium"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => removeLine(clientIndex, lineIndex)}
|
|
disabled={clientPresta.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="Supprimer cette ligne"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => addLineToClient(clientIndex)}
|
|
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"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
Ajouter une prestation pour ce client
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="text-sm text-slate-500 bg-blue-50 border border-blue-200 rounded-xl p-3">
|
|
<strong>Note :</strong> Les commissions par client seront calculées automatiquement
|
|
en fonction des factures du mois de la période sélectionnée et du taux de commission
|
|
configuré pour chaque client apporté.
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="px-6 py-4 border-t flex items-center justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={isGenerating}
|
|
className="px-4 py-2 text-slate-700 hover:bg-slate-100 rounded-xl transition disabled:opacity-50"
|
|
>
|
|
Annuler
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isGenerating}
|
|
className="px-6 py-2 bg-indigo-600 text-white rounded-xl hover:bg-indigo-700 transition disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isGenerating ? "Génération en cours..." : "Générer la NAA"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|