Initial commit
This commit is contained in:
dahoud
474
app/(main)/factures/[id]/duplicate/page.tsx
Normal file
474
app/(main)/factures/[id]/duplicate/page.tsx
Normal file
@@ -0,0 +1,474 @@
|
||||
'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 { Dropdown } from 'primereact/dropdown';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
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 { Divider } from 'primereact/divider';
|
||||
import { Checkbox } from 'primereact/checkbox';
|
||||
import { factureService, clientService } from '../../../../../services/api';
|
||||
import { formatCurrency } from '../../../../../utils/formatters';
|
||||
import type { Facture, Client } from '../../../../../types/btp';
|
||||
|
||||
const FactureDuplicatePage = () => {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
const [originalFacture, setOriginalFacture] = useState<Facture | null>(null);
|
||||
const [newFacture, setNewFacture] = useState<Partial<Facture>>({
|
||||
numero: '',
|
||||
objet: '',
|
||||
description: '',
|
||||
type: 'FACTURE',
|
||||
statut: 'BROUILLON',
|
||||
dateEmission: new Date(),
|
||||
dateEcheance: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000), // +30 jours
|
||||
tauxTVA: 20,
|
||||
lignes: []
|
||||
});
|
||||
|
||||
const [clients, setClients] = useState<Client[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [copyLignes, setCopyLignes] = useState(true);
|
||||
const [copyClient, setCopyClient] = useState(true);
|
||||
|
||||
const factureId = params.id as string;
|
||||
|
||||
const typeOptions = [
|
||||
{ label: 'Facture', value: 'FACTURE' },
|
||||
{ label: 'Acompte', value: 'ACOMPTE' },
|
||||
{ label: 'Facture de situation', value: 'SITUATION' },
|
||||
{ label: 'Facture de solde', value: 'SOLDE' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [factureId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (originalFacture) {
|
||||
updateNewFacture();
|
||||
}
|
||||
}, [originalFacture, copyLignes, copyClient]);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Charger la facture originale
|
||||
const factureResponse = await factureService.getById(factureId);
|
||||
setOriginalFacture(factureResponse.data);
|
||||
|
||||
// Charger les clients
|
||||
const clientsResponse = await clientService.getAll();
|
||||
setClients(clientsResponse.data);
|
||||
|
||||
// Générer un nouveau numéro
|
||||
const numeroResponse = await factureService.generateNumero();
|
||||
setNewFacture(prev => ({ ...prev, numero: numeroResponse.data.numero }));
|
||||
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger la facture'
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const updateNewFacture = () => {
|
||||
if (!originalFacture) return;
|
||||
|
||||
setNewFacture(prev => ({
|
||||
...prev,
|
||||
objet: `${originalFacture.objet} (Copie)`,
|
||||
description: originalFacture.description,
|
||||
type: originalFacture.type,
|
||||
tauxTVA: originalFacture.tauxTVA,
|
||||
client: copyClient ? originalFacture.client : undefined,
|
||||
lignes: copyLignes ? [...(originalFacture.lignes || [])] : [],
|
||||
montantHT: copyLignes ? originalFacture.montantHT : 0,
|
||||
montantTTC: copyLignes ? originalFacture.montantTTC : 0
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
setSaving(true);
|
||||
|
||||
if (!newFacture.numero || !newFacture.objet || !newFacture.client) {
|
||||
toast.current?.show({
|
||||
severity: 'warn',
|
||||
summary: 'Attention',
|
||||
detail: 'Veuillez remplir tous les champs obligatoires'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
await factureService.create(newFacture);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Facture dupliquée avec succès'
|
||||
});
|
||||
|
||||
router.push('/factures');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la duplication:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Erreur lors de la duplication'
|
||||
});
|
||||
} 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(`/factures/${factureId}`)}
|
||||
/>
|
||||
</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(`/factures/${factureId}`)}
|
||||
/>
|
||||
<Button
|
||||
label="Créer la copie"
|
||||
icon="pi pi-copy"
|
||||
onClick={handleSave}
|
||||
loading={saving}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex justify-content-center align-items-center min-h-screen">
|
||||
<ProgressSpinner />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!originalFacture) {
|
||||
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>Facture introuvable</h3>
|
||||
<p className="text-600 mb-4">La facture à dupliquer n'existe pas</p>
|
||||
<Button
|
||||
label="Retour à la liste"
|
||||
icon="pi pi-arrow-left"
|
||||
onClick={() => router.push('/factures')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<Toast ref={toast} />
|
||||
|
||||
<div className="col-12">
|
||||
<Toolbar start={toolbarStartTemplate} end={toolbarEndTemplate} />
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<Card title="Dupliquer la facture">
|
||||
<div className="grid">
|
||||
{/* Options de duplication */}
|
||||
<div className="col-12">
|
||||
<h5>Options de duplication</h5>
|
||||
<div className="flex gap-4 mb-4">
|
||||
<div className="flex align-items-center">
|
||||
<Checkbox
|
||||
inputId="copyClient"
|
||||
checked={copyClient}
|
||||
onChange={(e) => setCopyClient(e.checked || false)}
|
||||
/>
|
||||
<label htmlFor="copyClient" className="ml-2">Copier le client</label>
|
||||
</div>
|
||||
<div className="flex align-items-center">
|
||||
<Checkbox
|
||||
inputId="copyLignes"
|
||||
checked={copyLignes}
|
||||
onChange={(e) => setCopyLignes(e.checked || false)}
|
||||
/>
|
||||
<label htmlFor="copyLignes" className="ml-2">Copier les lignes de facturation</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Comparaison côte à côte */}
|
||||
<div className="col-12 lg:col-6">
|
||||
<Card title="Facture originale" className="h-full">
|
||||
<div className="mb-3">
|
||||
<strong>Numéro:</strong> {originalFacture.numero}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<strong>Objet:</strong> {originalFacture.objet}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<strong>Type:</strong> {originalFacture.type}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<strong>Client:</strong> {typeof originalFacture.client === 'string' ? originalFacture.client : originalFacture.client?.nom}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<strong>Montant TTC:</strong> {formatCurrency(originalFacture.montantTTC)}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<strong>Nombre de lignes:</strong> {originalFacture.lignes?.length || 0}
|
||||
</div>
|
||||
{originalFacture.description && (
|
||||
<div className="mb-3">
|
||||
<strong>Description:</strong>
|
||||
<p className="mt-1 text-600">{originalFacture.description}</p>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-6">
|
||||
<Card title="Nouvelle facture" className="h-full">
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<div className="field">
|
||||
<label htmlFor="numero" className="font-semibold">Numéro *</label>
|
||||
<InputText
|
||||
id="numero"
|
||||
value={newFacture.numero}
|
||||
onChange={(e) => setNewFacture(prev => ({ ...prev, numero: e.target.value }))}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="field">
|
||||
<label htmlFor="objet" className="font-semibold">Objet *</label>
|
||||
<InputText
|
||||
id="objet"
|
||||
value={newFacture.objet}
|
||||
onChange={(e) => setNewFacture(prev => ({ ...prev, objet: e.target.value }))}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="field">
|
||||
<label htmlFor="type" className="font-semibold">Type *</label>
|
||||
<Dropdown
|
||||
id="type"
|
||||
value={newFacture.type}
|
||||
options={typeOptions}
|
||||
onChange={(e) => setNewFacture(prev => ({ ...prev, type: e.value }))}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="field">
|
||||
<label htmlFor="client" className="font-semibold">Client *</label>
|
||||
<Dropdown
|
||||
id="client"
|
||||
value={newFacture.client}
|
||||
options={clients.map(client => ({ label: client.nom, value: client }))}
|
||||
onChange={(e) => setNewFacture(prev => ({ ...prev, client: e.value }))}
|
||||
className="w-full"
|
||||
placeholder="Sélectionner un client"
|
||||
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={newFacture.dateEmission}
|
||||
onChange={(e) => setNewFacture(prev => ({ ...prev, dateEmission: e.value || new Date() }))}
|
||||
className="w-full"
|
||||
dateFormat="dd/mm/yy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="dateEcheance" className="font-semibold">Date d'échéance *</label>
|
||||
<Calendar
|
||||
id="dateEcheance"
|
||||
value={newFacture.dateEcheance}
|
||||
onChange={(e) => setNewFacture(prev => ({ ...prev, dateEcheance: e.value || new Date() }))}
|
||||
className="w-full"
|
||||
dateFormat="dd/mm/yy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="field">
|
||||
<label htmlFor="description" className="font-semibold">Description</label>
|
||||
<InputTextarea
|
||||
id="description"
|
||||
value={newFacture.description}
|
||||
onChange={(e) => setNewFacture(prev => ({ ...prev, description: e.target.value }))}
|
||||
className="w-full"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Aperçu des lignes copiées */}
|
||||
{copyLignes && newFacture.lignes && newFacture.lignes.length > 0 && (
|
||||
<div className="col-12">
|
||||
<Card title="Lignes de facturation copiées">
|
||||
<DataTable value={newFacture.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>
|
||||
|
||||
<Divider />
|
||||
|
||||
<div className="flex justify-content-end">
|
||||
<div className="w-20rem">
|
||||
<div className="flex justify-content-between mb-2">
|
||||
<span>Montant HT:</span>
|
||||
<span className="font-semibold">{formatCurrency(newFacture.montantHT || 0)}</span>
|
||||
</div>
|
||||
<div className="flex justify-content-between mb-2">
|
||||
<span>TVA ({newFacture.tauxTVA}%):</span>
|
||||
<span className="font-semibold">
|
||||
{formatCurrency(((newFacture.montantHT || 0) * (newFacture.tauxTVA || 0)) / 100)}
|
||||
</span>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="flex justify-content-between">
|
||||
<span className="font-bold">Montant TTC:</span>
|
||||
<span className="font-bold text-primary text-xl">
|
||||
{formatCurrency(newFacture.montantTTC || 0)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Résumé de la duplication */}
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="p-3 border-round bg-blue-50">
|
||||
<h6 className="text-blue-900 mb-2">
|
||||
<i className="pi pi-info-circle mr-2"></i>
|
||||
Informations copiées
|
||||
</h6>
|
||||
<ul className="text-sm text-blue-800 list-none p-0 m-0">
|
||||
<li className="mb-1">• Objet (modifié)</li>
|
||||
<li className="mb-1">• Type de facture</li>
|
||||
<li className="mb-1">• Taux de TVA</li>
|
||||
<li className="mb-1">• Description</li>
|
||||
{copyClient && <li className="mb-1">• Client</li>}
|
||||
{copyLignes && <li className="mb-1">• Lignes de facturation</li>}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="p-3 border-round bg-green-50">
|
||||
<h6 className="text-green-900 mb-2">
|
||||
<i className="pi pi-check mr-2"></i>
|
||||
Nouvelles valeurs
|
||||
</h6>
|
||||
<ul className="text-sm text-green-800 list-none p-0 m-0">
|
||||
<li className="mb-1">• Nouveau numéro généré</li>
|
||||
<li className="mb-1">• Statut: Brouillon</li>
|
||||
<li className="mb-1">• Date d'émission: Aujourd'hui</li>
|
||||
<li className="mb-1">• Date d'échéance: +30 jours</li>
|
||||
<li className="mb-1">• Montants payés: Remis à zéro</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="p-3 border-round bg-orange-50">
|
||||
<h6 className="text-orange-900 mb-2">
|
||||
<i className="pi pi-exclamation-triangle mr-2"></i>
|
||||
À vérifier
|
||||
</h6>
|
||||
<ul className="text-sm text-orange-800 list-none p-0 m-0">
|
||||
<li className="mb-1">• Objet de la facture</li>
|
||||
<li className="mb-1">• Client sélectionné</li>
|
||||
<li className="mb-1">• Dates d'émission et d'échéance</li>
|
||||
<li className="mb-1">• Lignes de facturation</li>
|
||||
<li className="mb-1">• Montants calculés</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FactureDuplicatePage;
|
||||
588
app/(main)/factures/[id]/edit/page.tsx
Normal file
588
app/(main)/factures/[id]/edit/page.tsx
Normal file
@@ -0,0 +1,588 @@
|
||||
'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 { Dropdown } from 'primereact/dropdown';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
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 { Divider } from 'primereact/divider';
|
||||
import { factureService, clientService } from '../../../../../services/api';
|
||||
import { formatCurrency } from '../../../../../utils/formatters';
|
||||
import type { Facture, LigneFacture, Client } from '../../../../../types/btp';
|
||||
|
||||
const FactureEditPage = () => {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
const [facture, setFacture] = useState<Partial<Facture>>({
|
||||
numero: '',
|
||||
objet: '',
|
||||
description: '',
|
||||
type: 'FACTURE',
|
||||
statut: 'BROUILLON',
|
||||
dateEmission: new Date(),
|
||||
dateEcheance: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000), // +30 jours
|
||||
tauxTVA: 20,
|
||||
lignes: []
|
||||
});
|
||||
|
||||
const [clients, setClients] = useState<Client[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [showLigneDialog, setShowLigneDialog] = useState(false);
|
||||
const [editingLigne, setEditingLigne] = useState<LigneFacture | null>(null);
|
||||
const [editingIndex, setEditingIndex] = useState<number>(-1);
|
||||
|
||||
const [ligneForm, setLigneForm] = useState<Partial<LigneFacture>>({
|
||||
designation: '',
|
||||
quantite: 1,
|
||||
unite: 'unité',
|
||||
prixUnitaire: 0,
|
||||
montantHT: 0
|
||||
});
|
||||
|
||||
const factureId = params.id as string;
|
||||
const isNew = factureId === 'nouveau';
|
||||
|
||||
const typeOptions = [
|
||||
{ label: 'Facture', value: 'FACTURE' },
|
||||
{ label: 'Acompte', value: 'ACOMPTE' },
|
||||
{ label: 'Facture de situation', value: 'SITUATION' },
|
||||
{ label: 'Facture de solde', value: 'SOLDE' }
|
||||
];
|
||||
|
||||
const statutOptions = [
|
||||
{ label: 'Brouillon', value: 'BROUILLON' },
|
||||
{ label: 'Envoyée', value: 'ENVOYEE' },
|
||||
{ label: 'Payée', value: 'PAYEE' },
|
||||
{ label: 'Partiellement payée', value: 'PARTIELLEMENT_PAYEE' },
|
||||
{ label: 'En retard', value: 'EN_RETARD' }
|
||||
];
|
||||
|
||||
const uniteOptions = [
|
||||
{ label: 'Unité', value: 'unité' },
|
||||
{ label: 'Mètre', value: 'm' },
|
||||
{ label: 'Mètre carré', value: 'm²' },
|
||||
{ label: 'Mètre cube', value: 'm³' },
|
||||
{ label: 'Heure', value: 'h' },
|
||||
{ label: 'Jour', value: 'jour' },
|
||||
{ label: 'Forfait', value: 'forfait' },
|
||||
{ label: 'Kilogramme', value: 'kg' },
|
||||
{ label: 'Tonne', value: 't' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [factureId]);
|
||||
|
||||
useEffect(() => {
|
||||
calculateMontants();
|
||||
}, [facture.lignes, facture.tauxTVA]);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Charger les clients
|
||||
const clientsResponse = await clientService.getAll();
|
||||
setClients(clientsResponse.data);
|
||||
|
||||
if (!isNew) {
|
||||
// Charger la facture existante
|
||||
const factureResponse = await factureService.getById(factureId);
|
||||
setFacture(factureResponse.data);
|
||||
} else {
|
||||
// Générer un nouveau numéro
|
||||
const numeroResponse = await factureService.generateNumero();
|
||||
setFacture(prev => ({ ...prev, numero: numeroResponse.data.numero }));
|
||||
}
|
||||
|
||||
} 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 = () => {
|
||||
if (!facture.lignes) return;
|
||||
|
||||
const montantHT = facture.lignes.reduce((total, ligne) => total + (ligne.montantHT || 0), 0);
|
||||
const montantTVA = montantHT * (facture.tauxTVA || 0) / 100;
|
||||
const montantTTC = montantHT + montantTVA;
|
||||
|
||||
setFacture(prev => ({
|
||||
...prev,
|
||||
montantHT,
|
||||
montantTTC
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
setSaving(true);
|
||||
|
||||
if (!facture.numero || !facture.objet || !facture.client) {
|
||||
toast.current?.show({
|
||||
severity: 'warn',
|
||||
summary: 'Attention',
|
||||
detail: 'Veuillez remplir tous les champs obligatoires'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (isNew) {
|
||||
await factureService.create(facture);
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Facture créée avec succès'
|
||||
});
|
||||
} else {
|
||||
await factureService.update(factureId, facture);
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Facture modifiée avec succès'
|
||||
});
|
||||
}
|
||||
|
||||
router.push('/factures');
|
||||
|
||||
} 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);
|
||||
setEditingIndex(-1);
|
||||
setLigneForm({
|
||||
designation: '',
|
||||
quantite: 1,
|
||||
unite: 'unité',
|
||||
prixUnitaire: 0,
|
||||
montantHT: 0
|
||||
});
|
||||
setShowLigneDialog(true);
|
||||
};
|
||||
|
||||
const handleEditLigne = (ligne: LigneFacture, index: number) => {
|
||||
setEditingLigne(ligne);
|
||||
setEditingIndex(index);
|
||||
setLigneForm({ ...ligne });
|
||||
setShowLigneDialog(true);
|
||||
};
|
||||
|
||||
const handleSaveLigne = () => {
|
||||
if (!ligneForm.designation || !ligneForm.quantite || !ligneForm.prixUnitaire) {
|
||||
toast.current?.show({
|
||||
severity: 'warn',
|
||||
summary: 'Attention',
|
||||
detail: 'Veuillez remplir tous les champs de la ligne'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const montantHT = (ligneForm.quantite || 0) * (ligneForm.prixUnitaire || 0);
|
||||
const nouvelleLigne: LigneFacture = {
|
||||
...ligneForm,
|
||||
montantHT
|
||||
} as LigneFacture;
|
||||
|
||||
const nouvellesLignes = [...(facture.lignes || [])];
|
||||
|
||||
if (editingIndex >= 0) {
|
||||
nouvellesLignes[editingIndex] = nouvelleLigne;
|
||||
} else {
|
||||
nouvellesLignes.push(nouvelleLigne);
|
||||
}
|
||||
|
||||
setFacture(prev => ({ ...prev, lignes: nouvellesLignes }));
|
||||
setShowLigneDialog(false);
|
||||
};
|
||||
|
||||
const handleDeleteLigne = (index: number) => {
|
||||
const nouvellesLignes = facture.lignes?.filter((_, i) => i !== index) || [];
|
||||
setFacture(prev => ({ ...prev, lignes: nouvellesLignes }));
|
||||
};
|
||||
|
||||
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('/factures')}
|
||||
/>
|
||||
</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('/factures')}
|
||||
/>
|
||||
<Button
|
||||
label="Enregistrer"
|
||||
icon="pi pi-save"
|
||||
onClick={handleSave}
|
||||
loading={saving}
|
||||
/>
|
||||
</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>
|
||||
|
||||
<div className="col-12">
|
||||
<Card title={isNew ? "Nouvelle facture" : "Modifier la facture"}>
|
||||
<div className="grid">
|
||||
{/* Informations générales */}
|
||||
<div className="col-12 md:col-6">
|
||||
<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"
|
||||
disabled={!isNew}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="type" className="font-semibold">Type *</label>
|
||||
<Dropdown
|
||||
id="type"
|
||||
value={facture.type}
|
||||
options={typeOptions}
|
||||
onChange={(e) => setFacture(prev => ({ ...prev, type: e.value }))}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="field">
|
||||
<label htmlFor="objet" className="font-semibold">Objet *</label>
|
||||
<InputText
|
||||
id="objet"
|
||||
value={facture.objet}
|
||||
onChange={(e) => setFacture(prev => ({ ...prev, objet: e.target.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={facture.description}
|
||||
onChange={(e) => setFacture(prev => ({ ...prev, description: e.target.value }))}
|
||||
className="w-full"
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="client" className="font-semibold">Client *</label>
|
||||
<Dropdown
|
||||
id="client"
|
||||
value={facture.client}
|
||||
options={clients.map(client => ({ label: client.nom, value: client }))}
|
||||
onChange={(e) => setFacture(prev => ({ ...prev, client: e.value }))}
|
||||
className="w-full"
|
||||
placeholder="Sélectionner un client"
|
||||
filter
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="statut" className="font-semibold">Statut</label>
|
||||
<Dropdown
|
||||
id="statut"
|
||||
value={facture.statut}
|
||||
options={statutOptions}
|
||||
onChange={(e) => setFacture(prev => ({ ...prev, statut: e.value }))}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="field">
|
||||
<label htmlFor="dateEmission" className="font-semibold">Date d'émission *</label>
|
||||
<Calendar
|
||||
id="dateEmission"
|
||||
value={facture.dateEmission}
|
||||
onChange={(e) => setFacture(prev => ({ ...prev, dateEmission: e.value || new Date() }))}
|
||||
className="w-full"
|
||||
dateFormat="dd/mm/yy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="field">
|
||||
<label htmlFor="dateEcheance" className="font-semibold">Date d'échéance *</label>
|
||||
<Calendar
|
||||
id="dateEcheance"
|
||||
value={facture.dateEcheance}
|
||||
onChange={(e) => setFacture(prev => ({ ...prev, dateEcheance: e.value || new Date() }))}
|
||||
className="w-full"
|
||||
dateFormat="dd/mm/yy"
|
||||
/>
|
||||
</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={facture.tauxTVA}
|
||||
onValueChange={(e) => setFacture(prev => ({ ...prev, tauxTVA: e.value || 0 }))}
|
||||
className="w-full"
|
||||
suffix="%"
|
||||
min={0}
|
||||
max={100}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Lignes de la facture */}
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<div className="flex justify-content-between align-items-center mb-4">
|
||||
<h5 className="m-0">Lignes de facturation</h5>
|
||||
<Button
|
||||
label="Ajouter une ligne"
|
||||
icon="pi pi-plus"
|
||||
onClick={handleAddLigne}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
value={facture.lignes || []}
|
||||
responsiveLayout="scroll"
|
||||
emptyMessage="Aucune ligne de facturation"
|
||||
>
|
||||
<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={(rowData, options) => (
|
||||
<div className="flex gap-1">
|
||||
<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>
|
||||
)}
|
||||
/>
|
||||
</DataTable>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Totaux */}
|
||||
<div className="flex justify-content-end">
|
||||
<div className="w-20rem">
|
||||
<div className="flex justify-content-between mb-2">
|
||||
<span>Montant HT:</span>
|
||||
<span className="font-semibold">{formatCurrency(facture.montantHT || 0)}</span>
|
||||
</div>
|
||||
<div className="flex justify-content-between mb-2">
|
||||
<span>TVA ({facture.tauxTVA}%):</span>
|
||||
<span className="font-semibold">
|
||||
{formatCurrency(((facture.montantHT || 0) * (facture.tauxTVA || 0)) / 100)}
|
||||
</span>
|
||||
</div>
|
||||
<Divider />
|
||||
<div className="flex justify-content-between">
|
||||
<span className="font-bold">Montant TTC:</span>
|
||||
<span className="font-bold text-primary text-xl">
|
||||
{formatCurrency(facture.montantTTC || 0)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Dialog d'ajout/modification de ligne */}
|
||||
<Dialog
|
||||
header={editingLigne ? "Modifier la ligne" : "Ajouter une ligne"}
|
||||
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={ligneForm.designation}
|
||||
onChange={(e) => setLigneForm(prev => ({ ...prev, designation: e.target.value }))}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="field">
|
||||
<label htmlFor="quantite" className="font-semibold">Quantité *</label>
|
||||
<InputNumber
|
||||
id="quantite"
|
||||
value={ligneForm.quantite}
|
||||
onValueChange={(e) => {
|
||||
const quantite = e.value || 0;
|
||||
const montantHT = quantite * (ligneForm.prixUnitaire || 0);
|
||||
setLigneForm(prev => ({ ...prev, quantite, montantHT }));
|
||||
}}
|
||||
className="w-full"
|
||||
min={0}
|
||||
maxFractionDigits={2}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-4">
|
||||
<div className="field">
|
||||
<label htmlFor="unite" className="font-semibold">Unité</label>
|
||||
<Dropdown
|
||||
id="unite"
|
||||
value={ligneForm.unite}
|
||||
options={uniteOptions}
|
||||
onChange={(e) => setLigneForm(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={ligneForm.prixUnitaire}
|
||||
onValueChange={(e) => {
|
||||
const prixUnitaire = e.value || 0;
|
||||
const montantHT = (ligneForm.quantite || 0) * prixUnitaire;
|
||||
setLigneForm(prev => ({ ...prev, prixUnitaire, montantHT }));
|
||||
}}
|
||||
className="w-full"
|
||||
mode="currency"
|
||||
currency="EUR"
|
||||
locale="fr-FR"
|
||||
min={0}
|
||||
/>
|
||||
</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(ligneForm.montantHT || 0)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FactureEditPage;
|
||||
464
app/(main)/factures/[id]/page.tsx
Normal file
464
app/(main)/factures/[id]/page.tsx
Normal file
@@ -0,0 +1,464 @@
|
||||
'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 { ProgressBar } from 'primereact/progressbar';
|
||||
import { factureService } from '../../../../services/api';
|
||||
import { formatDate, formatCurrency } from '../../../../utils/formatters';
|
||||
import type { Facture } from '../../../../types/btp';
|
||||
|
||||
const FactureDetailPage = () => {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const toast = useRef<Toast>(null);
|
||||
const menuRef = useRef<Menu>(null);
|
||||
|
||||
const [facture, setFacture] = useState<Facture | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const factureId = params.id as string;
|
||||
|
||||
useEffect(() => {
|
||||
loadFacture();
|
||||
}, [factureId]);
|
||||
|
||||
const loadFacture = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await factureService.getById(factureId);
|
||||
setFacture(response.data);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement de la facture:', error);
|
||||
setError('Impossible de charger la facture');
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger la facture'
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatutSeverity = (statut: string) => {
|
||||
switch (statut) {
|
||||
case 'PAYEE': return 'success';
|
||||
case 'EN_RETARD': return 'danger';
|
||||
case 'PARTIELLEMENT_PAYEE': return 'warning';
|
||||
case 'ENVOYEE': return 'info';
|
||||
case 'BROUILLON': return 'secondary';
|
||||
default: return 'info';
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeSeverity = (type: string) => {
|
||||
switch (type) {
|
||||
case 'FACTURE': return 'primary';
|
||||
case 'ACOMPTE': return 'info';
|
||||
case 'SITUATION': return 'warning';
|
||||
case 'SOLDE': return 'success';
|
||||
default: return 'secondary';
|
||||
}
|
||||
};
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
label: 'Modifier',
|
||||
icon: 'pi pi-pencil',
|
||||
command: () => router.push(`/factures/${factureId}/edit`)
|
||||
},
|
||||
{
|
||||
label: 'Dupliquer',
|
||||
icon: 'pi pi-copy',
|
||||
command: () => router.push(`/factures/${factureId}/duplicate`)
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Marquer comme payée',
|
||||
icon: 'pi pi-check',
|
||||
command: () => handleMarkAsPaid(),
|
||||
disabled: facture?.statut === 'PAYEE'
|
||||
},
|
||||
{
|
||||
label: 'Enregistrer paiement partiel',
|
||||
icon: 'pi pi-money-bill',
|
||||
command: () => handlePartialPayment()
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Imprimer',
|
||||
icon: 'pi pi-print',
|
||||
command: () => window.print()
|
||||
},
|
||||
{
|
||||
label: 'Télécharger PDF',
|
||||
icon: 'pi pi-download',
|
||||
command: () => handleDownloadPDF()
|
||||
},
|
||||
{
|
||||
label: 'Envoyer par email',
|
||||
icon: 'pi pi-send',
|
||||
command: () => handleSendEmail()
|
||||
},
|
||||
{
|
||||
separator: true
|
||||
},
|
||||
{
|
||||
label: 'Supprimer',
|
||||
icon: 'pi pi-trash',
|
||||
className: 'text-red-500',
|
||||
command: () => handleDelete()
|
||||
}
|
||||
];
|
||||
|
||||
const handleMarkAsPaid = async () => {
|
||||
try {
|
||||
await factureService.updateStatut(factureId, 'PAYEE');
|
||||
loadFacture();
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Facture marquée comme payée'
|
||||
});
|
||||
} catch (error) {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Erreur lors de la mise à jour'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handlePartialPayment = () => {
|
||||
// TODO: Ouvrir dialog pour paiement partiel
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Info',
|
||||
detail: 'Fonctionnalité de paiement partiel en cours de développement'
|
||||
});
|
||||
};
|
||||
|
||||
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 handleSendEmail = () => {
|
||||
// TODO: Ouvrir dialog d'envoi email
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Info',
|
||||
detail: 'Envoi par email en cours de développement'
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
try {
|
||||
await factureService.delete(factureId);
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Facture supprimée avec succès'
|
||||
});
|
||||
router.push('/factures');
|
||||
} catch (error) {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Erreur lors de la suppression'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const calculateProgress = () => {
|
||||
if (!facture) return 0;
|
||||
return (facture.montantPaye || 0) / facture.montantTTC * 100;
|
||||
};
|
||||
|
||||
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('/factures')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
const toolbarEndTemplate = () => (
|
||||
<div className="flex align-items-center gap-2">
|
||||
{facture?.statut !== 'PAYEE' && (
|
||||
<Button
|
||||
label="Marquer payée"
|
||||
icon="pi pi-check"
|
||||
className="p-button-success"
|
||||
onClick={handleMarkAsPaid}
|
||||
/>
|
||||
)}
|
||||
<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 || !facture) {
|
||||
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>Facture introuvable</h3>
|
||||
<p className="text-600 mb-4">{error || 'La facture demandée n\'existe pas'}</p>
|
||||
<Button
|
||||
label="Retour à la liste"
|
||||
icon="pi pi-arrow-left"
|
||||
onClick={() => router.push('/factures')}
|
||||
/>
|
||||
</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 de la facture */}
|
||||
<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">Facture #{facture.numero}</h2>
|
||||
<p className="text-600 mb-3">{facture.objet}</p>
|
||||
<div className="flex gap-2 mb-2">
|
||||
<Tag
|
||||
value={facture.statut}
|
||||
severity={getStatutSeverity(facture.statut)}
|
||||
/>
|
||||
<Tag
|
||||
value={facture.type}
|
||||
severity={getTypeSeverity(facture.type)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-3xl font-bold text-primary mb-2">
|
||||
{formatCurrency(facture.montantTTC)}
|
||||
</div>
|
||||
<div className="text-sm text-600">
|
||||
HT: {formatCurrency(facture.montantHT)}
|
||||
</div>
|
||||
{facture.montantPaye && facture.montantPaye > 0 && (
|
||||
<div className="text-sm text-green-600 font-semibold">
|
||||
Payé: {formatCurrency(facture.montantPaye)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Barre de progression du paiement */}
|
||||
{facture.montantPaye && facture.montantPaye > 0 && (
|
||||
<div className="mb-4">
|
||||
<div className="flex justify-content-between align-items-center mb-2">
|
||||
<span className="font-semibold">Progression du paiement</span>
|
||||
<span className="text-sm">{Math.round(calculateProgress())}%</span>
|
||||
</div>
|
||||
<ProgressBar
|
||||
value={calculateProgress()}
|
||||
className="mb-2"
|
||||
style={{ height: '8px' }}
|
||||
/>
|
||||
<div className="flex justify-content-between text-sm text-600">
|
||||
<span>Payé: {formatCurrency(facture.montantPaye)}</span>
|
||||
<span>Restant: {formatCurrency(facture.montantTTC - facture.montantPaye)}</span>
|
||||
</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(facture.dateEmission)}</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-semibold">Date d'échéance:</label>
|
||||
<p className={new Date(facture.dateEcheance) < new Date() && facture.statut !== 'PAYEE' ? 'text-red-500 font-semibold' : ''}>
|
||||
{formatDate(facture.dateEcheance)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-semibold">Client:</label>
|
||||
<p>{typeof facture.client === 'string' ? facture.client : facture.client?.nom}</p>
|
||||
</div>
|
||||
{facture.devisId && (
|
||||
<div className="field">
|
||||
<label className="font-semibold">Devis source:</label>
|
||||
<p>
|
||||
<Button
|
||||
label={`Devis #${facture.devisId}`}
|
||||
className="p-button-link p-0"
|
||||
onClick={() => router.push(`/devis/${facture.devisId}`)}
|
||||
/>
|
||||
</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(facture.montantHT)}</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-semibold">TVA ({facture.tauxTVA}%):</label>
|
||||
<p>{formatCurrency(facture.montantTTC - facture.montantHT)}</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-semibold">Montant TTC:</label>
|
||||
<p className="text-xl font-bold text-primary">{formatCurrency(facture.montantTTC)}</p>
|
||||
</div>
|
||||
{facture.montantPaye && (
|
||||
<div className="field">
|
||||
<label className="font-semibold">Montant payé:</label>
|
||||
<p className="text-green-600 font-semibold">{formatCurrency(facture.montantPaye)}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{facture.description && (
|
||||
<>
|
||||
<Divider />
|
||||
<div>
|
||||
<h5>Description</h5>
|
||||
<p className="line-height-3">{facture.description}</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Lignes de la facture */}
|
||||
{facture.lignes && facture.lignes.length > 0 && (
|
||||
<div className="col-12">
|
||||
<Card title="Détail des prestations">
|
||||
<DataTable value={facture.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 des paiements */}
|
||||
<div className="col-12">
|
||||
<Card title="Historique">
|
||||
<Timeline
|
||||
value={[
|
||||
{
|
||||
status: 'Créée',
|
||||
date: facture.dateEmission,
|
||||
icon: 'pi pi-plus',
|
||||
color: '#9C27B0'
|
||||
},
|
||||
...(facture.statut === 'ENVOYEE' || facture.statut === 'PAYEE' ? [{
|
||||
status: 'Envoyée',
|
||||
date: new Date(),
|
||||
icon: 'pi pi-send',
|
||||
color: '#2196F3'
|
||||
}] : []),
|
||||
...(facture.montantPaye && facture.montantPaye > 0 ? [{
|
||||
status: facture.statut === 'PAYEE' ? 'Payée intégralement' : 'Paiement partiel',
|
||||
date: new Date(),
|
||||
icon: 'pi pi-money-bill',
|
||||
color: facture.statut === 'PAYEE' ? '#4CAF50' : '#FF9800',
|
||||
details: `Montant: ${formatCurrency(facture.montantPaye)}`
|
||||
}] : []),
|
||||
...(new Date(facture.dateEcheance) < new Date() && facture.statut !== 'PAYEE' ? [{
|
||||
status: 'Échue',
|
||||
date: facture.dateEcheance,
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
color: '#F44336'
|
||||
}] : [])
|
||||
]}
|
||||
opposite={(item) => formatDate(item.date)}
|
||||
content={(item) => (
|
||||
<div className="flex align-items-center">
|
||||
<Badge value={item.status} style={{ backgroundColor: item.color }} />
|
||||
{item.details && (
|
||||
<div className="ml-2 text-sm text-600">{item.details}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FactureDetailPage;
|
||||
Reference in New Issue
Block a user