Initial commit
This commit is contained in:
dahoud
502
app/(main)/devis/[id]/convert/page.tsx
Normal file
502
app/(main)/devis/[id]/convert/page.tsx
Normal file
@@ -0,0 +1,502 @@
|
||||
'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';
|
||||
|
||||
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(),
|
||||
dateEcheance: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
|
||||
objet: '',
|
||||
description: '',
|
||||
montantHT: 0,
|
||||
montantTTC: 0,
|
||||
tauxTVA: 20,
|
||||
statut: 'BROUILLON',
|
||||
type: '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 response = await devisService.getById(devisId);
|
||||
const devisData = response.data;
|
||||
|
||||
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(),
|
||||
dateEcheance: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
|
||||
objet: devisData.objet,
|
||||
description: devisData.description,
|
||||
montantHT: devisData.montantHT,
|
||||
montantTTC: devisData.montantTTC,
|
||||
tauxTVA: devisData.tauxTVA,
|
||||
statut: 'BROUILLON',
|
||||
type: 'FACTURE',
|
||||
actif: true,
|
||||
clientId: devisData.clientId,
|
||||
client: devisData.client,
|
||||
devisId: devisData.id,
|
||||
lignes: devisData.lignes ? [...devisData.lignes] : []
|
||||
});
|
||||
|
||||
// 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.montantHT || 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.montantHT = (ligne.montantHT || 0) * (acomptePercentage / 100);
|
||||
ligne.prixUnitaire = ligne.montantHT / (ligne.quantite || 1);
|
||||
});
|
||||
}
|
||||
|
||||
const factureData = {
|
||||
...facture,
|
||||
lignes: lignesFacture,
|
||||
type: createAcompte ? 'ACOMPTE' : facture.type
|
||||
};
|
||||
|
||||
const response = await factureService.create(factureData);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Facture créée avec succès'
|
||||
});
|
||||
|
||||
router.push(`/factures/${response.data.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.type}
|
||||
options={typeFactureOptions}
|
||||
onChange={(e) => setFacture(prev => ({ ...prev, type: 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;
|
||||
Reference in New Issue
Block a user