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;
|
||||
407
app/(main)/devis/[id]/duplicate/page.tsx
Normal file
407
app/(main)/devis/[id]/duplicate/page.tsx
Normal file
@@ -0,0 +1,407 @@
|
||||
'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 { InputTextarea } from 'primereact/inputtextarea';
|
||||
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 { devisService, clientService } from '../../../../../services/api';
|
||||
import { formatCurrency } from '../../../../../utils/formatters';
|
||||
import type { Devis } from '../../../../../types/btp';
|
||||
|
||||
const DuplicateDevisPage = () => {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
const [originalDevis, setOriginalDevis] = useState<Devis | null>(null);
|
||||
const [newDevis, setNewDevis] = useState<Devis>({
|
||||
id: '',
|
||||
numero: '',
|
||||
dateEmission: new Date(),
|
||||
dateValidite: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
|
||||
objet: '',
|
||||
description: '',
|
||||
montantHT: 0,
|
||||
montantTTC: 0,
|
||||
tauxTVA: 20,
|
||||
statut: 'BROUILLON',
|
||||
actif: true,
|
||||
lignes: []
|
||||
});
|
||||
|
||||
const [clients, setClients] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const originalDevisId = params.id as string;
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [originalDevisId]);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [devisResponse, clientsResponse] = await Promise.all([
|
||||
devisService.getById(originalDevisId),
|
||||
clientService.getAll()
|
||||
]);
|
||||
|
||||
const original = devisResponse.data;
|
||||
setOriginalDevis(original);
|
||||
setClients(clientsResponse.data);
|
||||
|
||||
// Générer un nouveau numéro de devis
|
||||
const newNumero = await generateNewNumero();
|
||||
|
||||
// Préparer le nouveau devis avec les données de l'original
|
||||
setNewDevis({
|
||||
id: '',
|
||||
numero: newNumero,
|
||||
dateEmission: new Date(),
|
||||
dateValidite: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
|
||||
objet: `${original.objet} (Copie)`,
|
||||
description: original.description,
|
||||
montantHT: original.montantHT,
|
||||
montantTTC: original.montantTTC,
|
||||
tauxTVA: original.tauxTVA,
|
||||
statut: 'BROUILLON',
|
||||
actif: true,
|
||||
clientId: original.clientId,
|
||||
client: original.client,
|
||||
lignes: original.lignes ? [...original.lignes] : []
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger le devis original'
|
||||
});
|
||||
} 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 `DEV-${year}-${timestamp}`;
|
||||
} catch (error) {
|
||||
console.error('Erreur génération numéro:', error);
|
||||
return `DEV-${Date.now()}`;
|
||||
}
|
||||
};
|
||||
|
||||
const calculateMontants = () => {
|
||||
const montantHT = (newDevis.lignes || []).reduce((sum, ligne) => sum + (ligne.montantHT || 0), 0);
|
||||
const montantTTC = montantHT * (1 + newDevis.tauxTVA / 100);
|
||||
|
||||
setNewDevis(prev => ({
|
||||
...prev,
|
||||
montantHT,
|
||||
montantTTC
|
||||
}));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
calculateMontants();
|
||||
}, [newDevis.lignes, newDevis.tauxTVA]);
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
setSaving(true);
|
||||
|
||||
// Validation
|
||||
if (!newDevis.numero || !newDevis.objet || !newDevis.clientId) {
|
||||
toast.current?.show({
|
||||
severity: 'warn',
|
||||
summary: 'Attention',
|
||||
detail: 'Veuillez remplir tous les champs obligatoires'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await devisService.create(newDevis);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Devis dupliqué avec succès'
|
||||
});
|
||||
|
||||
router.push(`/devis/${response.data.id}`);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la duplication:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Erreur lors de la duplication du devis'
|
||||
});
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
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/${originalDevisId}`)}
|
||||
/>
|
||||
</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/${originalDevisId}`)}
|
||||
/>
|
||||
<Button
|
||||
label="Créer la copie"
|
||||
icon="pi pi-copy"
|
||||
loading={saving}
|
||||
onClick={handleSave}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-content-center align-items-center min-h-screen">
|
||||
<ProgressSpinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!originalDevis) {
|
||||
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 à dupliquer 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">
|
||||
<Message
|
||||
severity="info"
|
||||
text={`Duplication du devis #${originalDevis.numero}. Vous pouvez modifier les informations avant de créer la copie.`}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Comparaison Original vs Nouveau */}
|
||||
<div className="col-12">
|
||||
<Card title="Comparaison">
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6">
|
||||
<h5 className="text-primary">Devis original</h5>
|
||||
<div className="field">
|
||||
<label className="font-semibold">Numéro:</label>
|
||||
<p>{originalDevis.numero}</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-semibold">Objet:</label>
|
||||
<p>{originalDevis.objet}</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-semibold">Montant TTC:</label>
|
||||
<p className="text-xl font-bold">{formatCurrency(originalDevis.montantTTC)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<h5 className="text-green-500">Nouveau devis</h5>
|
||||
<div className="field">
|
||||
<label className="font-semibold">Numéro:</label>
|
||||
<p className="text-green-600 font-semibold">{newDevis.numero}</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-semibold">Objet:</label>
|
||||
<p className="text-green-600">{newDevis.objet}</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-semibold">Montant TTC:</label>
|
||||
<p className="text-xl font-bold text-green-600">{formatCurrency(newDevis.montantTTC)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Informations du nouveau devis */}
|
||||
<div className="col-12">
|
||||
<Card title="Informations du nouveau devis">
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="numero" className="font-semibold">Numéro *</label>
|
||||
<InputText
|
||||
id="numero"
|
||||
value={newDevis.numero}
|
||||
onChange={(e) => setNewDevis(prev => ({ ...prev, numero: e.target.value }))}
|
||||
className="w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label htmlFor="objet" className="font-semibold">Objet *</label>
|
||||
<InputText
|
||||
id="objet"
|
||||
value={newDevis.objet}
|
||||
onChange={(e) => setNewDevis(prev => ({ ...prev, objet: e.target.value }))}
|
||||
className="w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label htmlFor="client" className="font-semibold">Client *</label>
|
||||
<Dropdown
|
||||
id="client"
|
||||
value={newDevis.clientId}
|
||||
options={clients}
|
||||
onChange={(e) => setNewDevis(prev => ({ ...prev, clientId: e.value }))}
|
||||
optionLabel="nom"
|
||||
optionValue="id"
|
||||
placeholder="Sélectionner un client"
|
||||
className="w-full"
|
||||
filter
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="dateEmission" className="font-semibold">Date d'émission *</label>
|
||||
<Calendar
|
||||
id="dateEmission"
|
||||
value={new Date(newDevis.dateEmission)}
|
||||
onChange={(e) => setNewDevis(prev => ({ ...prev, dateEmission: e.value || new Date() }))}
|
||||
className="w-full"
|
||||
dateFormat="dd/mm/yy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label htmlFor="dateValidite" className="font-semibold">Date de validité *</label>
|
||||
<Calendar
|
||||
id="dateValidite"
|
||||
value={new Date(newDevis.dateValidite)}
|
||||
onChange={(e) => setNewDevis(prev => ({ ...prev, dateValidite: e.value || new Date() }))}
|
||||
className="w-full"
|
||||
dateFormat="dd/mm/yy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label className="font-semibold">Statut</label>
|
||||
<p className="text-600">Brouillon (par défaut pour les nouveaux devis)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="field">
|
||||
<label htmlFor="description" className="font-semibold">Description</label>
|
||||
<InputTextarea
|
||||
id="description"
|
||||
value={newDevis.description}
|
||||
onChange={(e) => setNewDevis(prev => ({ ...prev, description: e.target.value }))}
|
||||
className="w-full"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Prestations copiées */}
|
||||
<div className="col-12">
|
||||
<Card
|
||||
title="Prestations copiées"
|
||||
subTitle={`${newDevis.lignes?.length || 0} ligne(s) | Total TTC: ${formatCurrency(newDevis.montantTTC)}`}
|
||||
>
|
||||
<DataTable
|
||||
value={newDevis.lignes || []}
|
||||
responsiveLayout="scroll"
|
||||
emptyMessage="Aucune prestation copiée"
|
||||
>
|
||||
<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) => formatCurrency(rowData.montantHT)}
|
||||
/>
|
||||
</DataTable>
|
||||
|
||||
<div className="mt-3 p-3 bg-blue-50 border-round">
|
||||
<p className="text-sm text-600 mb-2">
|
||||
<i className="pi pi-info-circle mr-2"></i>
|
||||
Les prestations ont été copiées depuis le devis original.
|
||||
Vous pourrez les modifier après la création du nouveau devis.
|
||||
</p>
|
||||
<div className="flex justify-content-between align-items-center">
|
||||
<span className="font-semibold">Total HT: {formatCurrency(newDevis.montantHT)}</span>
|
||||
<span className="font-semibold text-primary">Total TTC: {formatCurrency(newDevis.montantTTC)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DuplicateDevisPage;
|
||||
490
app/(main)/devis/[id]/edit/page.tsx
Normal file
490
app/(main)/devis/[id]/edit/page.tsx
Normal file
@@ -0,0 +1,490 @@
|
||||
'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 { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
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 { Dialog } from 'primereact/dialog';
|
||||
import { devisService, clientService } from '../../../../../services/api';
|
||||
import { formatCurrency } from '../../../../../utils/formatters';
|
||||
import type { Devis, LigneDevis } from '../../../../../types/btp';
|
||||
|
||||
const EditDevisPage = () => {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
const [devis, setDevis] = useState<Devis>({
|
||||
id: '',
|
||||
numero: '',
|
||||
dateEmission: new Date(),
|
||||
dateValidite: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
|
||||
objet: '',
|
||||
description: '',
|
||||
montantHT: 0,
|
||||
montantTTC: 0,
|
||||
tauxTVA: 20,
|
||||
statut: 'BROUILLON',
|
||||
actif: true,
|
||||
lignes: []
|
||||
});
|
||||
|
||||
const [clients, setClients] = useState<any[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [showLigneDialog, setShowLigneDialog] = useState(false);
|
||||
const [editingLigne, setEditingLigne] = useState<LigneDevis | null>(null);
|
||||
const [nouvelleLigne, setNouvelleLigne] = useState<LigneDevis>({
|
||||
designation: '',
|
||||
quantite: 1,
|
||||
unite: 'unité',
|
||||
prixUnitaire: 0,
|
||||
montantHT: 0
|
||||
});
|
||||
|
||||
const devisId = params.id as string;
|
||||
|
||||
const statutOptions = [
|
||||
{ label: 'Brouillon', value: 'BROUILLON' },
|
||||
{ label: 'En attente', value: 'EN_ATTENTE' },
|
||||
{ label: 'Accepté', value: 'ACCEPTE' },
|
||||
{ label: 'Refusé', value: 'REFUSE' },
|
||||
{ label: 'Expiré', value: 'EXPIRE' }
|
||||
];
|
||||
|
||||
const uniteOptions = [
|
||||
{ label: 'Unité', value: 'unité' },
|
||||
{ label: 'Heure', value: 'heure' },
|
||||
{ label: 'Jour', value: 'jour' },
|
||||
{ label: 'M²', value: 'm²' },
|
||||
{ label: 'M³', value: 'm³' },
|
||||
{ label: 'ML', value: 'ml' },
|
||||
{ label: 'Kg', value: 'kg' },
|
||||
{ label: 'Tonne', value: 'tonne' },
|
||||
{ label: 'Forfait', value: 'forfait' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [devisId]);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [devisResponse, clientsResponse] = await Promise.all([
|
||||
devisService.getById(devisId),
|
||||
clientService.getAll()
|
||||
]);
|
||||
|
||||
setDevis(devisResponse.data);
|
||||
setClients(clientsResponse.data);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger les données'
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const calculateMontants = () => {
|
||||
const montantHT = (devis.lignes || []).reduce((sum, ligne) => sum + (ligne.montantHT || 0), 0);
|
||||
const montantTTC = montantHT * (1 + devis.tauxTVA / 100);
|
||||
|
||||
setDevis(prev => ({
|
||||
...prev,
|
||||
montantHT,
|
||||
montantTTC
|
||||
}));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
calculateMontants();
|
||||
}, [devis.lignes, devis.tauxTVA]);
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
setSaving(true);
|
||||
await devisService.update(devisId, devis);
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Devis modifié avec succès'
|
||||
});
|
||||
router.push(`/devis/${devisId}`);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la sauvegarde:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Erreur lors de la sauvegarde'
|
||||
});
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddLigne = () => {
|
||||
setEditingLigne(null);
|
||||
setNouvelleLigne({
|
||||
designation: '',
|
||||
quantite: 1,
|
||||
unite: 'unité',
|
||||
prixUnitaire: 0,
|
||||
montantHT: 0
|
||||
});
|
||||
setShowLigneDialog(true);
|
||||
};
|
||||
|
||||
const handleEditLigne = (ligne: LigneDevis, index: number) => {
|
||||
setEditingLigne({ ...ligne, index });
|
||||
setNouvelleLigne({ ...ligne });
|
||||
setShowLigneDialog(true);
|
||||
};
|
||||
|
||||
const handleSaveLigne = () => {
|
||||
const montantHT = nouvelleLigne.quantite * nouvelleLigne.prixUnitaire;
|
||||
const ligneComplete = { ...nouvelleLigne, montantHT };
|
||||
|
||||
const nouvelleLignes = [...(devis.lignes || [])];
|
||||
|
||||
if (editingLigne && editingLigne.index !== undefined) {
|
||||
nouvelleLignes[editingLigne.index] = ligneComplete;
|
||||
} else {
|
||||
nouvelleLignes.push(ligneComplete);
|
||||
}
|
||||
|
||||
setDevis(prev => ({ ...prev, lignes: nouvelleLignes }));
|
||||
setShowLigneDialog(false);
|
||||
};
|
||||
|
||||
const handleDeleteLigne = (index: number) => {
|
||||
const nouvelleLignes = [...(devis.lignes || [])];
|
||||
nouvelleLignes.splice(index, 1);
|
||||
setDevis(prev => ({ ...prev, lignes: nouvelleLignes }));
|
||||
};
|
||||
|
||||
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="Enregistrer"
|
||||
icon="pi pi-save"
|
||||
loading={saving}
|
||||
onClick={handleSave}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const actionBodyTemplate = (rowData: LigneDevis, options: any) => (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-pencil"
|
||||
className="p-button-text p-button-sm"
|
||||
onClick={() => handleEditLigne(rowData, options.rowIndex)}
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-trash"
|
||||
className="p-button-text p-button-sm p-button-danger"
|
||||
onClick={() => handleDeleteLigne(options.rowIndex)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-content-center align-items-center min-h-screen">
|
||||
<ProgressSpinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<Toast ref={toast} />
|
||||
|
||||
<div className="col-12">
|
||||
<Toolbar start={toolbarStartTemplate} end={toolbarEndTemplate} />
|
||||
</div>
|
||||
|
||||
{/* Informations générales */}
|
||||
<div className="col-12">
|
||||
<Card title="Informations générales">
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="numero" className="font-semibold">Numéro *</label>
|
||||
<InputText
|
||||
id="numero"
|
||||
value={devis.numero}
|
||||
onChange={(e) => setDevis(prev => ({ ...prev, numero: e.target.value }))}
|
||||
className="w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label htmlFor="objet" className="font-semibold">Objet *</label>
|
||||
<InputText
|
||||
id="objet"
|
||||
value={devis.objet}
|
||||
onChange={(e) => setDevis(prev => ({ ...prev, objet: e.target.value }))}
|
||||
className="w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label htmlFor="client" className="font-semibold">Client *</label>
|
||||
<Dropdown
|
||||
id="client"
|
||||
value={devis.clientId}
|
||||
options={clients}
|
||||
onChange={(e) => setDevis(prev => ({ ...prev, clientId: e.value }))}
|
||||
optionLabel="nom"
|
||||
optionValue="id"
|
||||
placeholder="Sélectionner un client"
|
||||
className="w-full"
|
||||
filter
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="dateEmission" className="font-semibold">Date d'émission *</label>
|
||||
<Calendar
|
||||
id="dateEmission"
|
||||
value={new Date(devis.dateEmission)}
|
||||
onChange={(e) => setDevis(prev => ({ ...prev, dateEmission: e.value || new Date() }))}
|
||||
className="w-full"
|
||||
dateFormat="dd/mm/yy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label htmlFor="dateValidite" className="font-semibold">Date de validité *</label>
|
||||
<Calendar
|
||||
id="dateValidite"
|
||||
value={new Date(devis.dateValidite)}
|
||||
onChange={(e) => setDevis(prev => ({ ...prev, dateValidite: e.value || new Date() }))}
|
||||
className="w-full"
|
||||
dateFormat="dd/mm/yy"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label htmlFor="statut" className="font-semibold">Statut</label>
|
||||
<Dropdown
|
||||
id="statut"
|
||||
value={devis.statut}
|
||||
options={statutOptions}
|
||||
onChange={(e) => setDevis(prev => ({ ...prev, statut: e.value }))}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="field">
|
||||
<label htmlFor="description" className="font-semibold">Description</label>
|
||||
<InputTextarea
|
||||
id="description"
|
||||
value={devis.description}
|
||||
onChange={(e) => setDevis(prev => ({ ...prev, description: e.target.value }))}
|
||||
className="w-full"
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="field">
|
||||
<label htmlFor="tauxTVA" className="font-semibold">Taux TVA (%)</label>
|
||||
<InputNumber
|
||||
id="tauxTVA"
|
||||
value={devis.tauxTVA}
|
||||
onValueChange={(e) => setDevis(prev => ({ ...prev, tauxTVA: e.value || 0 }))}
|
||||
className="w-full"
|
||||
suffix="%"
|
||||
min={0}
|
||||
max={100}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Lignes du devis */}
|
||||
<div className="col-12">
|
||||
<Card
|
||||
title="Prestations"
|
||||
subTitle={`Total HT: ${formatCurrency(devis.montantHT)} | Total TTC: ${formatCurrency(devis.montantTTC)}`}
|
||||
>
|
||||
<div className="mb-3">
|
||||
<Button
|
||||
label="Ajouter une ligne"
|
||||
icon="pi pi-plus"
|
||||
onClick={handleAddLigne}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
value={devis.lignes || []}
|
||||
responsiveLayout="scroll"
|
||||
emptyMessage="Aucune prestation ajoutée"
|
||||
>
|
||||
<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) => formatCurrency(rowData.montantHT)}
|
||||
/>
|
||||
<Column
|
||||
header="Actions"
|
||||
style={{ width: '100px' }}
|
||||
body={actionBodyTemplate}
|
||||
/>
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Dialog pour ajouter/modifier une ligne */}
|
||||
<Dialog
|
||||
header={editingLigne ? "Modifier la prestation" : "Ajouter une prestation"}
|
||||
visible={showLigneDialog}
|
||||
onHide={() => setShowLigneDialog(false)}
|
||||
style={{ width: '600px' }}
|
||||
footer={
|
||||
<div className="flex justify-content-end gap-2">
|
||||
<Button
|
||||
label="Annuler"
|
||||
icon="pi pi-times"
|
||||
className="p-button-outlined"
|
||||
onClick={() => setShowLigneDialog(false)}
|
||||
/>
|
||||
<Button
|
||||
label="Enregistrer"
|
||||
icon="pi pi-save"
|
||||
onClick={handleSaveLigne}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<div className="field">
|
||||
<label htmlFor="designation" className="font-semibold">Désignation *</label>
|
||||
<InputText
|
||||
id="designation"
|
||||
value={nouvelleLigne.designation}
|
||||
onChange={(e) => setNouvelleLigne(prev => ({ ...prev, designation: e.target.value }))}
|
||||
className="w-full"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="field">
|
||||
<label htmlFor="quantite" className="font-semibold">Quantité *</label>
|
||||
<InputNumber
|
||||
id="quantite"
|
||||
value={nouvelleLigne.quantite}
|
||||
onValueChange={(e) => setNouvelleLigne(prev => ({ ...prev, quantite: e.value || 0 }))}
|
||||
className="w-full"
|
||||
min={0}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="field">
|
||||
<label htmlFor="unite" className="font-semibold">Unité</label>
|
||||
<Dropdown
|
||||
id="unite"
|
||||
value={nouvelleLigne.unite}
|
||||
options={uniteOptions}
|
||||
onChange={(e) => setNouvelleLigne(prev => ({ ...prev, unite: e.value }))}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="field">
|
||||
<label htmlFor="prixUnitaire" className="font-semibold">Prix unitaire *</label>
|
||||
<InputNumber
|
||||
id="prixUnitaire"
|
||||
value={nouvelleLigne.prixUnitaire}
|
||||
onValueChange={(e) => setNouvelleLigne(prev => ({ ...prev, prixUnitaire: e.value || 0 }))}
|
||||
className="w-full"
|
||||
mode="currency"
|
||||
currency="EUR"
|
||||
locale="fr-FR"
|
||||
min={0}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="field">
|
||||
<label className="font-semibold">Montant HT</label>
|
||||
<div className="text-xl font-bold text-primary">
|
||||
{formatCurrency(nouvelleLigne.quantite * nouvelleLigne.prixUnitaire)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditDevisPage;
|
||||
383
app/(main)/devis/[id]/page.tsx
Normal file
383
app/(main)/devis/[id]/page.tsx
Normal file
@@ -0,0 +1,383 @@
|
||||
'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 { Tag } from 'primereact/tag';
|
||||
import { Divider } from 'primereact/divider';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { ProgressSpinner } from 'primereact/progressspinner';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { Timeline } from 'primereact/timeline';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Menu } from 'primereact/menu';
|
||||
import { devisService } from '../../../../services/api';
|
||||
import { formatDate, formatCurrency } from '../../../../utils/formatters';
|
||||
import type { Devis } from '../../../../types/btp';
|
||||
|
||||
const DevisDetailPage = () => {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const toast = useRef<Toast>(null);
|
||||
const menuRef = useRef<Menu>(null);
|
||||
|
||||
const [devis, setDevis] = useState<Devis | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const devisId = params.id as string;
|
||||
|
||||
useEffect(() => {
|
||||
loadDevis();
|
||||
}, [devisId]);
|
||||
|
||||
const loadDevis = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await devisService.getById(devisId);
|
||||
setDevis(response.data);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement du devis:', error);
|
||||
setError('Impossible de charger le devis');
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger le devis'
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatutSeverity = (statut: string) => {
|
||||
switch (statut) {
|
||||
case 'ACCEPTE': return 'success';
|
||||
case 'REFUSE': return 'danger';
|
||||
case 'EXPIRE': return 'warning';
|
||||
case 'EN_ATTENTE': return 'info';
|
||||
case 'BROUILLON': return 'secondary';
|
||||
default: return 'info';
|
||||
}
|
||||
};
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
label: 'Modifier',
|
||||
icon: 'pi pi-pencil',
|
||||
command: () => router.push(`/devis/${devisId}/edit`)
|
||||
},
|
||||
{
|
||||
label: 'Dupliquer',
|
||||
icon: 'pi pi-copy',
|
||||
command: () => router.push(`/devis/${devisId}/duplicate`)
|
||||
},
|
||||
{
|
||||
label: 'Convertir en facture',
|
||||
icon: 'pi pi-arrow-right',
|
||||
command: () => router.push(`/devis/${devisId}/convert`)
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Imprimer',
|
||||
icon: 'pi pi-print',
|
||||
command: () => window.print()
|
||||
},
|
||||
{
|
||||
label: 'Télécharger PDF',
|
||||
icon: 'pi pi-download',
|
||||
command: () => handleDownloadPDF()
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Supprimer',
|
||||
icon: 'pi pi-trash',
|
||||
className: 'text-red-500',
|
||||
command: () => handleDelete()
|
||||
}
|
||||
];
|
||||
|
||||
const handleDownloadPDF = async () => {
|
||||
try {
|
||||
// TODO: Implémenter le téléchargement PDF
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Info',
|
||||
detail: 'Téléchargement PDF en cours de développement'
|
||||
});
|
||||
} catch (error) {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Erreur lors du téléchargement'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
await devisService.delete(devisId);
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Devis supprimé avec succès'
|
||||
});
|
||||
router.push('/devis');
|
||||
} catch (error) {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Erreur lors de la suppression'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleAccept = async () => {
|
||||
try {
|
||||
await devisService.updateStatut(devisId, 'ACCEPTE');
|
||||
loadDevis();
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Devis accepté'
|
||||
});
|
||||
} catch (error) {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Erreur lors de l\'acceptation'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleReject = async () => {
|
||||
try {
|
||||
await devisService.updateStatut(devisId, 'REFUSE');
|
||||
loadDevis();
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Devis refusé'
|
||||
});
|
||||
} catch (error) {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Erreur lors du refus'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
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')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const toolbarEndTemplate = () => (
|
||||
<div className="flex align-items-center gap-2">
|
||||
{devis?.statut === 'EN_ATTENTE' && (
|
||||
<>
|
||||
<Button
|
||||
label="Accepter"
|
||||
icon="pi pi-check"
|
||||
className="p-button-success"
|
||||
onClick={handleAccept}
|
||||
/>
|
||||
<Button
|
||||
label="Refuser"
|
||||
icon="pi pi-times"
|
||||
className="p-button-danger p-button-outlined"
|
||||
onClick={handleReject}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
icon="pi pi-ellipsis-v"
|
||||
className="p-button-text"
|
||||
onClick={(e) => menuRef.current?.toggle(e)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-content-center align-items-center min-h-screen">
|
||||
<ProgressSpinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error || !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">{error || 'Le devis demandé 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} />
|
||||
<Menu ref={menuRef} model={menuItems} popup />
|
||||
|
||||
<div className="col-12">
|
||||
<Toolbar start={toolbarStartTemplate} end={toolbarEndTemplate} />
|
||||
</div>
|
||||
|
||||
{/* En-tête du devis */}
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<div className="flex justify-content-between align-items-start mb-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold mb-2">Devis #{devis.numero}</h2>
|
||||
<p className="text-600 mb-3">{devis.objet}</p>
|
||||
<Tag
|
||||
value={devis.statut}
|
||||
severity={getStatutSeverity(devis.statut)}
|
||||
className="mb-2"
|
||||
/>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-3xl font-bold text-primary mb-2">
|
||||
{formatCurrency(devis.montantTTC)}
|
||||
</div>
|
||||
<div className="text-sm text-600">
|
||||
HT: {formatCurrency(devis.montantHT)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6">
|
||||
<h5>Informations générales</h5>
|
||||
<div className="field">
|
||||
<label className="font-semibold">Date d'émission:</label>
|
||||
<p>{formatDate(devis.dateEmission)}</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-semibold">Date de validité:</label>
|
||||
<p>{formatDate(devis.dateValidite)}</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-semibold">Client:</label>
|
||||
<p>{typeof devis.client === 'string' ? devis.client : devis.client?.nom}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<h5>Détails financiers</h5>
|
||||
<div className="field">
|
||||
<label className="font-semibold">Montant HT:</label>
|
||||
<p>{formatCurrency(devis.montantHT)}</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-semibold">TVA ({devis.tauxTVA}%):</label>
|
||||
<p>{formatCurrency(devis.montantTTC - devis.montantHT)}</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{devis.description && (
|
||||
<>
|
||||
<Divider />
|
||||
<div>
|
||||
<h5>Description</h5>
|
||||
<p className="line-height-3">{devis.description}</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Lignes du devis */}
|
||||
{devis.lignes && devis.lignes.length > 0 && (
|
||||
<div className="col-12">
|
||||
<Card title="Détail des prestations">
|
||||
<DataTable value={devis.lignes} responsiveLayout="scroll">
|
||||
<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) => formatCurrency(rowData.montantHT)}
|
||||
/>
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Historique */}
|
||||
<div className="col-12">
|
||||
<Card title="Historique">
|
||||
<Timeline
|
||||
value={[
|
||||
{
|
||||
status: 'Créé',
|
||||
date: devis.dateEmission,
|
||||
icon: 'pi pi-plus',
|
||||
color: '#9C27B0'
|
||||
},
|
||||
...(devis.statut === 'ACCEPTE' ? [{
|
||||
status: 'Accepté',
|
||||
date: new Date(),
|
||||
icon: 'pi pi-check',
|
||||
color: '#4CAF50'
|
||||
}] : []),
|
||||
...(devis.statut === 'REFUSE' ? [{
|
||||
status: 'Refusé',
|
||||
date: new Date(),
|
||||
icon: 'pi pi-times',
|
||||
color: '#F44336'
|
||||
}] : [])
|
||||
]}
|
||||
opposite={(item) => formatDate(item.date)}
|
||||
content={(item) => (
|
||||
<div className="flex align-items-center">
|
||||
<Badge value={item.status} style={{ backgroundColor: item.color }} />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DevisDetailPage;
|
||||
Reference in New Issue
Block a user