500 lines
20 KiB
TypeScript
500 lines
20 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import { Card } from 'primereact/card';
|
|
import { Button } from 'primereact/button';
|
|
import { InputText } from 'primereact/inputtext';
|
|
import { Calendar } from 'primereact/calendar';
|
|
import { Dropdown } from 'primereact/dropdown';
|
|
import { DataTable } from 'primereact/datatable';
|
|
import { Column } from 'primereact/column';
|
|
import { Toast } from 'primereact/toast';
|
|
import { ProgressSpinner } from 'primereact/progressspinner';
|
|
import { Toolbar } from 'primereact/toolbar';
|
|
import { Message } from 'primereact/message';
|
|
import { Checkbox } from 'primereact/checkbox';
|
|
import { InputNumber } from 'primereact/inputnumber';
|
|
import { devisService, factureService } from '../../../../../services/api';
|
|
import { formatCurrency, formatDate } from '../../../../../utils/formatters';
|
|
import type { Devis, Facture } from '../../../../../types/btp';
|
|
import { StatutFacture, TypeFacture } from '../../../../../types/btp';
|
|
|
|
const ConvertDevisPage = () => {
|
|
const params = useParams();
|
|
const router = useRouter();
|
|
const toast = useRef<Toast>(null);
|
|
|
|
const [devis, setDevis] = useState<Devis | null>(null);
|
|
const [facture, setFacture] = useState<Partial<Facture>>({
|
|
numero: '',
|
|
dateEmission: new Date().toISOString(),
|
|
dateEcheance: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
|
|
objet: '',
|
|
description: '',
|
|
montantHT: 0,
|
|
montantTTC: 0,
|
|
tauxTVA: 20,
|
|
statut: StatutFacture.BROUILLON,
|
|
typeFacture: TypeFacture.FACTURE,
|
|
actif: true,
|
|
lignes: []
|
|
});
|
|
|
|
const [loading, setLoading] = useState(true);
|
|
const [converting, setConverting] = useState(false);
|
|
const [selectedLignes, setSelectedLignes] = useState<boolean[]>([]);
|
|
const [acomptePercentage, setAcomptePercentage] = useState<number>(0);
|
|
const [createAcompte, setCreateAcompte] = useState(false);
|
|
|
|
const devisId = params.id as string;
|
|
|
|
const typeFactureOptions = [
|
|
{ label: 'Facture', value: 'FACTURE' },
|
|
{ label: 'Facture d\'acompte', value: 'ACOMPTE' },
|
|
{ label: 'Facture de situation', value: 'SITUATION' },
|
|
{ label: 'Facture de solde', value: 'SOLDE' }
|
|
];
|
|
|
|
useEffect(() => {
|
|
loadDevis();
|
|
}, [devisId]);
|
|
|
|
const loadDevis = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const devisData = await devisService.getById(devisId);
|
|
|
|
if (devisData.statut !== 'ACCEPTE') {
|
|
toast.current?.show({
|
|
severity: 'warn',
|
|
summary: 'Attention',
|
|
detail: 'Seuls les devis acceptés peuvent être convertis en facture'
|
|
});
|
|
}
|
|
|
|
setDevis(devisData);
|
|
|
|
// Générer un nouveau numéro de facture
|
|
const newNumero = await generateNewNumero();
|
|
|
|
// Initialiser la facture avec les données du devis
|
|
setFacture({
|
|
numero: newNumero,
|
|
dateEmission: new Date().toISOString(),
|
|
dateEcheance: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
|
|
objet: devisData.objet,
|
|
description: devisData.description,
|
|
montantHT: devisData.montantHT,
|
|
montantTTC: devisData.montantTTC,
|
|
tauxTVA: devisData.tauxTVA,
|
|
statut: StatutFacture.BROUILLON,
|
|
typeFacture: TypeFacture.FACTURE,
|
|
actif: true,
|
|
client: devisData.client
|
|
});
|
|
|
|
// Initialiser toutes les lignes comme sélectionnées
|
|
setSelectedLignes(new Array(devisData.lignes?.length || 0).fill(true));
|
|
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement:', error);
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Impossible de charger le devis'
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const generateNewNumero = async (): Promise<string> => {
|
|
try {
|
|
// TODO: Implémenter la génération automatique de numéro
|
|
const year = new Date().getFullYear();
|
|
const timestamp = Date.now().toString().slice(-6);
|
|
return `FAC-${year}-${timestamp}`;
|
|
} catch (error) {
|
|
console.error('Erreur génération numéro:', error);
|
|
return `FAC-${Date.now()}`;
|
|
}
|
|
};
|
|
|
|
const calculateMontants = () => {
|
|
if (!facture.lignes) return;
|
|
|
|
const lignesSelectionnees = facture.lignes?.filter((_, index) => selectedLignes[index]) || [];
|
|
let montantHT = lignesSelectionnees.reduce((sum, ligne) => sum + (ligne.montantLigne || 0), 0);
|
|
|
|
// Appliquer le pourcentage d'acompte si nécessaire
|
|
if (createAcompte && acomptePercentage > 0) {
|
|
montantHT = montantHT * (acomptePercentage / 100);
|
|
}
|
|
|
|
const montantTTC = montantHT * (1 + (facture.tauxTVA || 0) / 100);
|
|
|
|
setFacture(prev => ({
|
|
...prev,
|
|
montantHT,
|
|
montantTTC
|
|
}));
|
|
};
|
|
|
|
useEffect(() => {
|
|
calculateMontants();
|
|
}, [selectedLignes, facture.lignes, facture.tauxTVA, createAcompte, acomptePercentage]);
|
|
|
|
const handleConvert = async () => {
|
|
try {
|
|
setConverting(true);
|
|
|
|
// Validation
|
|
if (!facture.numero || !facture.objet) {
|
|
toast.current?.show({
|
|
severity: 'warn',
|
|
summary: 'Attention',
|
|
detail: 'Veuillez remplir tous les champs obligatoires'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!selectedLignes.some(selected => selected)) {
|
|
toast.current?.show({
|
|
severity: 'warn',
|
|
summary: 'Attention',
|
|
detail: 'Veuillez sélectionner au moins une ligne à facturer'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Préparer les lignes sélectionnées
|
|
const lignesFacture = facture.lignes?.filter((_, index) => selectedLignes[index]) || [];
|
|
|
|
// Ajuster les montants si c'est un acompte
|
|
if (createAcompte && acomptePercentage > 0) {
|
|
lignesFacture.forEach(ligne => {
|
|
ligne.montantLigne = (ligne.montantLigne || 0) * (acomptePercentage / 100);
|
|
ligne.prixUnitaire = ligne.montantLigne / (ligne.quantite || 1);
|
|
});
|
|
}
|
|
|
|
const factureData = {
|
|
...facture,
|
|
lignes: lignesFacture,
|
|
typeFacture: createAcompte ? TypeFacture.ACOMPTE : facture.typeFacture
|
|
};
|
|
|
|
const createdFacture = await factureService.create(factureData);
|
|
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Succès',
|
|
detail: 'Facture créée avec succès'
|
|
});
|
|
|
|
router.push(`/factures/${createdFacture.id}`);
|
|
|
|
} catch (error) {
|
|
console.error('Erreur lors de la conversion:', error);
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Erreur lors de la conversion en facture'
|
|
});
|
|
} finally {
|
|
setConverting(false);
|
|
}
|
|
};
|
|
|
|
const handleLigneSelection = (index: number, checked: boolean) => {
|
|
const newSelection = [...selectedLignes];
|
|
newSelection[index] = checked;
|
|
setSelectedLignes(newSelection);
|
|
};
|
|
|
|
const handleSelectAll = (checked: boolean) => {
|
|
setSelectedLignes(new Array(facture.lignes?.length || 0).fill(checked));
|
|
};
|
|
|
|
const toolbarStartTemplate = () => (
|
|
<div className="flex align-items-center gap-2">
|
|
<Button
|
|
icon="pi pi-arrow-left"
|
|
label="Retour"
|
|
className="p-button-outlined"
|
|
onClick={() => router.push(`/devis/${devisId}`)}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
const toolbarEndTemplate = () => (
|
|
<div className="flex align-items-center gap-2">
|
|
<Button
|
|
label="Annuler"
|
|
icon="pi pi-times"
|
|
className="p-button-outlined"
|
|
onClick={() => router.push(`/devis/${devisId}`)}
|
|
/>
|
|
<Button
|
|
label="Créer la facture"
|
|
icon="pi pi-arrow-right"
|
|
loading={converting}
|
|
onClick={handleConvert}
|
|
disabled={!devis || devis.statut !== 'ACCEPTE'}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
const selectionBodyTemplate = (rowData: any, options: any) => (
|
|
<Checkbox
|
|
checked={selectedLignes[options.rowIndex] || false}
|
|
onChange={(e) => handleLigneSelection(options.rowIndex, e.checked || false)}
|
|
/>
|
|
);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex justify-content-center align-items-center min-h-screen">
|
|
<ProgressSpinner />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!devis) {
|
|
return (
|
|
<div className="flex justify-content-center align-items-center min-h-screen">
|
|
<div className="text-center">
|
|
<i className="pi pi-exclamation-triangle text-6xl text-orange-500 mb-3"></i>
|
|
<h3>Devis introuvable</h3>
|
|
<p className="text-600 mb-4">Le devis à convertir n'existe pas</p>
|
|
<Button
|
|
label="Retour à la liste"
|
|
icon="pi pi-arrow-left"
|
|
onClick={() => router.push('/devis')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid">
|
|
<Toast ref={toast} />
|
|
|
|
<div className="col-12">
|
|
<Toolbar start={toolbarStartTemplate} end={toolbarEndTemplate} />
|
|
</div>
|
|
|
|
{/* Message d'information */}
|
|
<div className="col-12">
|
|
{devis.statut !== 'ACCEPTE' ? (
|
|
<Message
|
|
severity="warn"
|
|
text="Ce devis n'est pas accepté. Seuls les devis acceptés peuvent être convertis en facture."
|
|
className="w-full"
|
|
/>
|
|
) : (
|
|
<Message
|
|
severity="info"
|
|
text={`Conversion du devis #${devis.numero} en facture. Sélectionnez les prestations à facturer.`}
|
|
className="w-full"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Informations du devis source */}
|
|
<div className="col-12 md:col-6">
|
|
<Card title="Devis source" className="h-full">
|
|
<div className="field">
|
|
<label className="font-semibold">Numéro:</label>
|
|
<p>{devis.numero}</p>
|
|
</div>
|
|
<div className="field">
|
|
<label className="font-semibold">Objet:</label>
|
|
<p>{devis.objet}</p>
|
|
</div>
|
|
<div className="field">
|
|
<label className="font-semibold">Client:</label>
|
|
<p>{typeof devis.client === 'string' ? devis.client : devis.client?.nom}</p>
|
|
</div>
|
|
<div className="field">
|
|
<label className="font-semibold">Date d'émission:</label>
|
|
<p>{formatDate(devis.dateEmission)}</p>
|
|
</div>
|
|
<div className="field">
|
|
<label className="font-semibold">Montant TTC:</label>
|
|
<p className="text-xl font-bold text-primary">{formatCurrency(devis.montantTTC)}</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Informations de la facture */}
|
|
<div className="col-12 md:col-6">
|
|
<Card title="Nouvelle facture" className="h-full">
|
|
<div className="field">
|
|
<label htmlFor="numero" className="font-semibold">Numéro *</label>
|
|
<InputText
|
|
id="numero"
|
|
value={facture.numero}
|
|
onChange={(e) => setFacture(prev => ({ ...prev, numero: e.target.value }))}
|
|
className="w-full"
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<label htmlFor="dateEmission" className="font-semibold">Date d'émission *</label>
|
|
<Calendar
|
|
id="dateEmission"
|
|
value={facture.dateEmission ? new Date(facture.dateEmission) : new Date()}
|
|
onChange={(e) => setFacture(prev => ({ ...prev, dateEmission: e.value || new Date() }))}
|
|
className="w-full"
|
|
dateFormat="dd/mm/yy"
|
|
/>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<label htmlFor="dateEcheance" className="font-semibold">Date d'échéance *</label>
|
|
<Calendar
|
|
id="dateEcheance"
|
|
value={facture.dateEcheance ? new Date(facture.dateEcheance) : new Date()}
|
|
onChange={(e) => setFacture(prev => ({ ...prev, dateEcheance: e.value || new Date() }))}
|
|
className="w-full"
|
|
dateFormat="dd/mm/yy"
|
|
/>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<label htmlFor="type" className="font-semibold">Type de facture</label>
|
|
<Dropdown
|
|
id="type"
|
|
value={facture.typeFacture}
|
|
options={typeFactureOptions}
|
|
onChange={(e) => setFacture(prev => ({ ...prev, typeFacture: e.value }))}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<label className="font-semibold">Montant TTC:</label>
|
|
<p className="text-xl font-bold text-green-600">{formatCurrency(facture.montantTTC || 0)}</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Options d'acompte */}
|
|
<div className="col-12">
|
|
<Card title="Options de facturation">
|
|
<div className="field-checkbox mb-3">
|
|
<Checkbox
|
|
id="createAcompte"
|
|
checked={createAcompte}
|
|
onChange={(e) => setCreateAcompte(e.checked || false)}
|
|
/>
|
|
<label htmlFor="createAcompte" className="ml-2 font-semibold">
|
|
Créer une facture d'acompte
|
|
</label>
|
|
</div>
|
|
|
|
{createAcompte && (
|
|
<div className="field">
|
|
<label htmlFor="acomptePercentage" className="font-semibold">
|
|
Pourcentage d'acompte (%)
|
|
</label>
|
|
<InputNumber
|
|
id="acomptePercentage"
|
|
value={acomptePercentage}
|
|
onValueChange={(e) => setAcomptePercentage(e.value || 0)}
|
|
className="w-full md:w-3"
|
|
suffix="%"
|
|
min={0}
|
|
max={100}
|
|
/>
|
|
<small className="text-600 block mt-1">
|
|
Le montant de la facture sera calculé en fonction de ce pourcentage
|
|
</small>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Sélection des prestations */}
|
|
<div className="col-12">
|
|
<Card
|
|
title="Prestations à facturer"
|
|
subTitle={`${selectedLignes.filter(s => s).length}/${facture.lignes?.length || 0} sélectionnée(s) | Total: ${formatCurrency(facture.montantTTC || 0)}`}
|
|
>
|
|
<div className="mb-3">
|
|
<Button
|
|
label="Tout sélectionner"
|
|
icon="pi pi-check"
|
|
className="p-button-outlined p-button-sm mr-2"
|
|
onClick={() => handleSelectAll(true)}
|
|
/>
|
|
<Button
|
|
label="Tout désélectionner"
|
|
icon="pi pi-times"
|
|
className="p-button-outlined p-button-sm"
|
|
onClick={() => handleSelectAll(false)}
|
|
/>
|
|
</div>
|
|
|
|
<DataTable
|
|
value={facture.lignes || []}
|
|
responsiveLayout="scroll"
|
|
emptyMessage="Aucune prestation disponible"
|
|
>
|
|
<Column
|
|
header="Sélection"
|
|
style={{ width: '80px' }}
|
|
body={selectionBodyTemplate}
|
|
/>
|
|
<Column field="designation" header="Désignation" />
|
|
<Column
|
|
field="quantite"
|
|
header="Quantité"
|
|
style={{ width: '100px' }}
|
|
body={(rowData) => rowData.quantite?.toLocaleString('fr-FR')}
|
|
/>
|
|
<Column field="unite" header="Unité" style={{ width: '80px' }} />
|
|
<Column
|
|
field="prixUnitaire"
|
|
header="Prix unitaire"
|
|
style={{ width: '120px' }}
|
|
body={(rowData) => formatCurrency(rowData.prixUnitaire)}
|
|
/>
|
|
<Column
|
|
field="montantHT"
|
|
header="Montant HT"
|
|
style={{ width: '120px' }}
|
|
body={(rowData, options) => {
|
|
let montant = rowData.montantHT;
|
|
if (createAcompte && acomptePercentage > 0 && selectedLignes[options.rowIndex]) {
|
|
montant = montant * (acomptePercentage / 100);
|
|
}
|
|
return formatCurrency(montant);
|
|
}}
|
|
/>
|
|
</DataTable>
|
|
|
|
<div className="mt-3 p-3 bg-green-50 border-round">
|
|
<div className="flex justify-content-between align-items-center">
|
|
<span className="font-semibold">Total HT: {formatCurrency(facture.montantHT || 0)}</span>
|
|
<span className="font-semibold text-primary">Total TTC: {formatCurrency(facture.montantTTC || 0)}</span>
|
|
</div>
|
|
{createAcompte && acomptePercentage > 0 && (
|
|
<p className="text-sm text-600 mt-2 mb-0">
|
|
<i className="pi pi-info-circle mr-2"></i>
|
|
Acompte de {acomptePercentage}% appliqué sur les prestations sélectionnées
|
|
</p>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ConvertDevisPage;
|