384 lines
14 KiB
TypeScript
384 lines
14 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 { 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 devisData = await devisService.getById(devisId);
|
|
setDevis(devisData);
|
|
} 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.update(devisId, { statut: 'ACCEPTE' as any });
|
|
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.update(devisId, { statut: 'REFUSE' as any });
|
|
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 === 'ENVOYE' && (
|
|
<>
|
|
<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) as any}
|
|
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;
|