a8825a058b
- Correction des erreurs TypeScript dans userService.ts et workflowTester.ts - Ajout des propriétés manquantes aux objets User mockés - Conversion des dates de string vers objets Date - Correction des appels asynchrones et des types incompatibles - Ajout de dynamic rendering pour résoudre les erreurs useSearchParams - Enveloppement de useSearchParams dans Suspense boundary - Configuration de force-dynamic au niveau du layout principal Build réussi: 126 pages générées avec succès 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
714 lines
30 KiB
TypeScript
714 lines
30 KiB
TypeScript
'use client';
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import { DataTable } from 'primereact/datatable';
|
|
import { Column } from 'primereact/column';
|
|
import { Button } from 'primereact/button';
|
|
import { InputText } from 'primereact/inputtext';
|
|
import { Card } from 'primereact/card';
|
|
import { Toast } from 'primereact/toast';
|
|
import { Toolbar } from 'primereact/toolbar';
|
|
import { Tag } from 'primereact/tag';
|
|
import { Dialog } from 'primereact/dialog';
|
|
import { Calendar } from 'primereact/calendar';
|
|
import { InputTextarea } from 'primereact/inputtextarea';
|
|
import { InputNumber } from 'primereact/inputnumber';
|
|
import { Dropdown } from 'primereact/dropdown';
|
|
import { Chip } from 'primereact/chip';
|
|
import { Divider } from 'primereact/divider';
|
|
import { factureService, clientService } from '../../../../services/api';
|
|
import { formatDate, formatCurrency } from '../../../../utils/formatters';
|
|
import type { Facture } from '../../../../types/btp';
|
|
import { StatutFacture, TypeFacture } from '../../../../types/btp';
|
|
|
|
const FacturesAvoirsPage = () => {
|
|
const [avoirs, setAvoirs] = useState<Facture[]>([]);
|
|
const [clients, setClients] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [globalFilter, setGlobalFilter] = useState('');
|
|
const [selectedAvoirs, setSelectedAvoirs] = useState<Facture[]>([]);
|
|
const [avoirDialog, setAvoirDialog] = useState(false);
|
|
const [selectedAvoir, setSelectedAvoir] = useState<Facture | null>(null);
|
|
const [isCreating, setIsCreating] = useState(false);
|
|
const [avoir, setAvoir] = useState<Partial<Facture>>({
|
|
id: '',
|
|
numero: '',
|
|
dateEmission: new Date().toISOString(),
|
|
dateEcheance: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
|
|
datePaiement: null,
|
|
objet: '',
|
|
description: '',
|
|
montantHT: 0,
|
|
montantTTC: 0,
|
|
tauxTVA: 20,
|
|
statut: StatutFacture.ENVOYEE,
|
|
typeFacture: TypeFacture.AVOIR,
|
|
actif: true,
|
|
client: null,
|
|
chantier: null,
|
|
devis: null,
|
|
lignes: []
|
|
});
|
|
const [submitted, setSubmitted] = useState(false);
|
|
const toast = useRef<Toast>(null);
|
|
const dt = useRef<DataTable<Facture[]>>(null);
|
|
|
|
const avoirReasons = [
|
|
{ label: 'Erreur de facturation', value: 'ERREUR_FACTURATION' },
|
|
{ label: 'Retour de marchandise', value: 'RETOUR_MARCHANDISE' },
|
|
{ label: 'Annulation partielle', value: 'ANNULATION_PARTIELLE' },
|
|
{ label: 'Remise commerciale', value: 'REMISE_COMMERCIALE' },
|
|
{ label: 'Défaut de conformité', value: 'DEFAUT_CONFORMITE' },
|
|
{ label: 'Geste commercial', value: 'GESTE_COMMERCIAL' }
|
|
];
|
|
|
|
useEffect(() => {
|
|
loadAvoirs();
|
|
loadClients();
|
|
}, []);
|
|
|
|
const loadAvoirs = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const data = await factureService.getAll();
|
|
// Filtrer les avoirs
|
|
const avoirsList = data.filter(facture => facture.typeFacture === TypeFacture.AVOIR);
|
|
setAvoirs(avoirsList);
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement des avoirs:', error);
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Impossible de charger les avoirs',
|
|
life: 3000
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadClients = async () => {
|
|
try {
|
|
const data = await clientService.getAll();
|
|
setClients(data.map(client => ({
|
|
label: `${client.prenom} ${client.nom}${client.entreprise ? ' - ' + client.entreprise : ''}`,
|
|
value: client.id,
|
|
client: client
|
|
})));
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement des clients:', error);
|
|
}
|
|
};
|
|
|
|
const getAvoirReason = (description: string) => {
|
|
// Simuler la détection de la raison à partir de la description
|
|
if (description.toLowerCase().includes('erreur')) return 'ERREUR_FACTURATION';
|
|
if (description.toLowerCase().includes('retour')) return 'RETOUR_MARCHANDISE';
|
|
if (description.toLowerCase().includes('annulation')) return 'ANNULATION_PARTIELLE';
|
|
if (description.toLowerCase().includes('remise')) return 'REMISE_COMMERCIALE';
|
|
if (description.toLowerCase().includes('défaut')) return 'DEFAUT_CONFORMITE';
|
|
return 'GESTE_COMMERCIAL';
|
|
};
|
|
|
|
const getReasonLabel = (reason: string) => {
|
|
const reasonObj = avoirReasons.find(r => r.value === reason);
|
|
return reasonObj ? reasonObj.label : 'Autre';
|
|
};
|
|
|
|
const getAvoirSeverity = (reason: string) => {
|
|
switch (reason) {
|
|
case 'ERREUR_FACTURATION':
|
|
case 'DEFAUT_CONFORMITE':
|
|
return 'danger';
|
|
case 'RETOUR_MARCHANDISE':
|
|
case 'ANNULATION_PARTIELLE':
|
|
return 'warning';
|
|
case 'REMISE_COMMERCIALE':
|
|
case 'GESTE_COMMERCIAL':
|
|
return 'info';
|
|
default:
|
|
return 'secondary';
|
|
}
|
|
};
|
|
|
|
const openNew = () => {
|
|
setAvoir({
|
|
id: '',
|
|
numero: '',
|
|
dateEmission: new Date().toISOString(),
|
|
dateEcheance: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
|
|
datePaiement: null,
|
|
objet: '',
|
|
description: '',
|
|
montantHT: 0,
|
|
montantTTC: 0,
|
|
tauxTVA: 20,
|
|
statut: StatutFacture.ENVOYEE,
|
|
typeFacture: TypeFacture.AVOIR,
|
|
actif: true,
|
|
client: null,
|
|
chantier: null,
|
|
devis: null,
|
|
lignes: []
|
|
});
|
|
setSubmitted(false);
|
|
setIsCreating(true);
|
|
setAvoirDialog(true);
|
|
};
|
|
|
|
const viewDetails = (avoirItem: Facture) => {
|
|
setSelectedAvoir(avoirItem);
|
|
setIsCreating(false);
|
|
setAvoirDialog(true);
|
|
};
|
|
|
|
const hideDialog = () => {
|
|
setSubmitted(false);
|
|
setAvoirDialog(false);
|
|
setSelectedAvoir(null);
|
|
setIsCreating(false);
|
|
};
|
|
|
|
const saveAvoir = async () => {
|
|
setSubmitted(true);
|
|
|
|
if (avoir.objet.trim() && avoir.client && avoir.montantHT > 0) {
|
|
try {
|
|
const avoirToSave = {
|
|
...avoir,
|
|
client: avoir.client ? { id: avoir.client } : null,
|
|
montantTTC: avoir.montantHT * (1 + avoir.tauxTVA / 100),
|
|
numero: `AV-${new Date().getFullYear()}-${String(avoirs.length + 1).padStart(4, '0')}`
|
|
};
|
|
|
|
// TODO: Implémenter la création d'avoir quand l'API sera disponible
|
|
console.log('Création d\'avoir:', avoirToSave);
|
|
|
|
// Simulation
|
|
setAvoirs(prev => [...prev, { ...avoirToSave, id: Date.now().toString() } as unknown as Facture]);
|
|
|
|
setAvoirDialog(false);
|
|
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Succès',
|
|
detail: 'Avoir créé avec succès (simulation)',
|
|
life: 3000
|
|
});
|
|
} catch (error) {
|
|
console.error('Erreur lors de la sauvegarde:', error);
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Impossible de sauvegarder l\'avoir',
|
|
life: 3000
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
const exportCSV = () => {
|
|
dt.current?.exportCSV();
|
|
};
|
|
|
|
const generateAvoirReport = () => {
|
|
const totalAvoirs = avoirs.reduce((sum, a) => sum + (a.montantTTC || 0), 0);
|
|
const reasonStats = {};
|
|
|
|
avoirs.forEach(a => {
|
|
const reason = getAvoirReason(a.description || '');
|
|
const label = getReasonLabel(reason);
|
|
if (!reasonStats[label]) {
|
|
reasonStats[label] = { count: 0, value: 0 };
|
|
}
|
|
reasonStats[label].count++;
|
|
reasonStats[label].value += a.montantTTC || 0;
|
|
});
|
|
|
|
const report = `
|
|
=== RAPPORT AVOIRS ===
|
|
Date du rapport: ${new Date().toLocaleDateString('fr-FR')}
|
|
|
|
STATISTIQUES GÉNÉRALES:
|
|
- Nombre total d'avoirs: ${avoirs.length}
|
|
- Montant total des avoirs: ${formatCurrency(totalAvoirs)}
|
|
- Montant moyen par avoir: ${formatCurrency(totalAvoirs / (avoirs.length || 1))}
|
|
|
|
RÉPARTITION PAR MOTIF:
|
|
${Object.entries(reasonStats)
|
|
.sort((a: [string, any], b: [string, any]) => b[1].value - a[1].value)
|
|
.map(([reason, data]: [string, any]) => `- ${reason}: ${data.count} avoirs, ${formatCurrency(data.value)} (${Math.round((data.value / totalAvoirs) * 100)}%)`)
|
|
.join('\n')}
|
|
|
|
ANALYSE PAR MOIS:
|
|
${getMonthlyAvoirBreakdown()}
|
|
|
|
CLIENTS AVEC LE PLUS D'AVOIRS:
|
|
${getClientAvoirAnalysis()}
|
|
|
|
IMPACT SUR LE CHIFFRE D'AFFAIRES:
|
|
- Pourcentage du CA en avoirs: ${getCAImpact()}%
|
|
- Tendance mensuelle: ${getTrend()}
|
|
|
|
RECOMMANDATIONS:
|
|
- Analyser les causes récurrentes d'avoirs
|
|
- Mettre en place des mesures préventives
|
|
- Former les équipes pour réduire les erreurs
|
|
- Améliorer les processus de contrôle qualité
|
|
`;
|
|
|
|
const blob = new Blob([report], { type: 'text/plain;charset=utf-8;' });
|
|
const link = document.createElement('a');
|
|
link.href = URL.createObjectURL(blob);
|
|
link.download = `rapport_avoirs_${new Date().toISOString().split('T')[0]}.txt`;
|
|
link.click();
|
|
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Rapport généré',
|
|
detail: 'Le rapport d\'avoirs a été téléchargé',
|
|
life: 3000
|
|
});
|
|
};
|
|
|
|
const getMonthlyAvoirBreakdown = () => {
|
|
const months = {};
|
|
avoirs.forEach(a => {
|
|
const month = new Date(a.dateEmission).toLocaleDateString('fr-FR', { year: 'numeric', month: 'long' });
|
|
if (!months[month]) {
|
|
months[month] = { count: 0, value: 0 };
|
|
}
|
|
months[month].count++;
|
|
months[month].value += a.montantTTC || 0;
|
|
});
|
|
|
|
return Object.entries(months)
|
|
.sort((a, b) => new Date(a[0]).getTime() - new Date(b[0]).getTime())
|
|
.map(([month, data]: [string, any]) => `- ${month}: ${data.count} avoirs, ${formatCurrency(data.value)}`)
|
|
.join('\n');
|
|
};
|
|
|
|
const getClientAvoirAnalysis = () => {
|
|
const clientStats = {};
|
|
avoirs.forEach(a => {
|
|
if (a.client) {
|
|
const clientKey = `${a.client.prenom} ${a.client.nom}`;
|
|
if (!clientStats[clientKey]) {
|
|
clientStats[clientKey] = { count: 0, value: 0 };
|
|
}
|
|
clientStats[clientKey].count++;
|
|
clientStats[clientKey].value += a.montantTTC || 0;
|
|
}
|
|
});
|
|
|
|
return Object.entries(clientStats)
|
|
.sort((a: [string, any], b: [string, any]) => b[1].count - a[1].count)
|
|
.slice(0, 5)
|
|
.map(([client, data]: [string, any]) => `- ${client}: ${data.count} avoirs, ${formatCurrency(data.value)}`)
|
|
.join('\n');
|
|
};
|
|
|
|
const getCAImpact = () => {
|
|
// Simulation - calcul de l'impact sur le CA
|
|
const totalCA = 500000; // CA simulé
|
|
const totalAvoirs = avoirs.reduce((sum, a) => sum + (a.montantTTC || 0), 0);
|
|
return ((totalAvoirs / totalCA) * 100).toFixed(2);
|
|
};
|
|
|
|
const getTrend = () => {
|
|
// Simulation de tendance
|
|
const thisMonth = avoirs.filter(a => {
|
|
const avoirDate = new Date(a.dateEmission);
|
|
const now = new Date();
|
|
return avoirDate.getMonth() === now.getMonth() && avoirDate.getFullYear() === now.getFullYear();
|
|
}).length;
|
|
|
|
const lastMonth = avoirs.filter(a => {
|
|
const avoirDate = new Date(a.dateEmission);
|
|
const lastMonthDate = new Date();
|
|
lastMonthDate.setMonth(lastMonthDate.getMonth() - 1);
|
|
return avoirDate.getMonth() === lastMonthDate.getMonth() && avoirDate.getFullYear() === lastMonthDate.getFullYear();
|
|
}).length;
|
|
|
|
if (thisMonth > lastMonth) return 'En hausse';
|
|
if (thisMonth < lastMonth) return 'En baisse';
|
|
return 'Stable';
|
|
};
|
|
|
|
const onInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, name: string) => {
|
|
const val = (e.target && e.target.value) || '';
|
|
let _avoir = { ...avoir };
|
|
(_avoir as any)[name] = val;
|
|
setAvoir(_avoir);
|
|
};
|
|
|
|
const onNumberChange = (e: any, name: string) => {
|
|
let _avoir = { ...avoir };
|
|
(_avoir as any)[name] = e.value;
|
|
setAvoir(_avoir);
|
|
|
|
// Recalcul automatique du TTC
|
|
if (name === 'montantHT' || name === 'tauxTVA') {
|
|
const montantHT = name === 'montantHT' ? e.value : _avoir.montantHT;
|
|
const tauxTVA = name === 'tauxTVA' ? e.value : _avoir.tauxTVA;
|
|
_avoir.montantTTC = montantHT * (1 + tauxTVA / 100);
|
|
setAvoir(_avoir);
|
|
}
|
|
};
|
|
|
|
const onDropdownChange = (e: any, name: string) => {
|
|
let _avoir = { ...avoir };
|
|
(_avoir as any)[name] = e.value;
|
|
setAvoir(_avoir);
|
|
};
|
|
|
|
const leftToolbarTemplate = () => {
|
|
return (
|
|
<div className="my-2 flex gap-2">
|
|
<h5 className="m-0 flex align-items-center text-purple-600">
|
|
<i className="pi pi-minus-circle mr-2"></i>
|
|
Avoirs ({avoirs.length})
|
|
</h5>
|
|
<Chip
|
|
label={`Montant total: ${formatCurrency(avoirs.reduce((sum, a) => sum + (a.montantTTC || 0), 0))}`}
|
|
className="bg-purple-100 text-purple-800"
|
|
/>
|
|
<Button
|
|
label="Nouveau"
|
|
icon="pi pi-plus"
|
|
severity="success"
|
|
size="small"
|
|
onClick={openNew}
|
|
/>
|
|
<Button
|
|
label="Rapport d'analyse"
|
|
icon="pi pi-chart-pie"
|
|
severity="help"
|
|
size="small"
|
|
onClick={generateAvoirReport}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const rightToolbarTemplate = () => {
|
|
return (
|
|
<Button
|
|
label="Exporter"
|
|
icon="pi pi-upload"
|
|
severity="help"
|
|
onClick={exportCSV}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const actionBodyTemplate = (rowData: Facture) => {
|
|
return (
|
|
<div className="flex gap-1">
|
|
<Button
|
|
icon="pi pi-eye"
|
|
rounded
|
|
severity="info"
|
|
size="small"
|
|
tooltip="Voir détails"
|
|
onClick={() => viewDetails(rowData)}
|
|
/>
|
|
<Button
|
|
icon="pi pi-print"
|
|
rounded
|
|
severity="help"
|
|
size="small"
|
|
tooltip="Imprimer l'avoir"
|
|
onClick={() => {
|
|
toast.current?.show({
|
|
severity: 'info',
|
|
summary: 'Impression',
|
|
detail: `Impression de l'avoir ${rowData.numero}`,
|
|
life: 3000
|
|
});
|
|
}}
|
|
/>
|
|
<Button
|
|
icon="pi pi-send"
|
|
rounded
|
|
severity={"secondary" as any}
|
|
size="small"
|
|
tooltip="Envoyer au client"
|
|
onClick={() => {
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Envoi',
|
|
detail: `Avoir ${rowData.numero} envoyé au client`,
|
|
life: 3000
|
|
});
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const statusBodyTemplate = (rowData: Facture) => {
|
|
return (
|
|
<div className="flex align-items-center gap-2">
|
|
<Tag value="Avoir" severity="info" />
|
|
<Tag
|
|
value={rowData.statut === StatutFacture.ENVOYEE ? 'Émis' : rowData.statut}
|
|
severity="success"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const reasonBodyTemplate = (rowData: Facture) => {
|
|
const reason = getAvoirReason(rowData.description || '');
|
|
const label = getReasonLabel(reason);
|
|
const severity = getAvoirSeverity(reason);
|
|
|
|
return (
|
|
<Tag
|
|
value={label}
|
|
severity={severity as any}
|
|
className="text-xs"
|
|
/>
|
|
);
|
|
};
|
|
|
|
const clientBodyTemplate = (rowData: Facture) => {
|
|
if (!rowData.client) return '';
|
|
return `${rowData.client.prenom} ${rowData.client.nom}`;
|
|
};
|
|
|
|
const header = (
|
|
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
|
<h5 className="m-0">Avoirs - Gestion des remboursements</h5>
|
|
<span className="block mt-2 md:mt-0 p-input-icon-left">
|
|
<i className="pi pi-search" />
|
|
<InputText
|
|
type="search"
|
|
placeholder="Rechercher..."
|
|
onInput={(e) => setGlobalFilter(e.currentTarget.value)}
|
|
/>
|
|
</span>
|
|
</div>
|
|
);
|
|
|
|
const avoirDialogFooter = (
|
|
<>
|
|
<Button label="Annuler" icon="pi pi-times" text onClick={hideDialog} />
|
|
{isCreating && (
|
|
<Button label="Créer l'avoir" icon="pi pi-check" text onClick={saveAvoir} />
|
|
)}
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<div className="grid">
|
|
<div className="col-12">
|
|
<Card>
|
|
<Toast ref={toast} />
|
|
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
|
|
|
|
<DataTable
|
|
ref={dt}
|
|
value={avoirs}
|
|
selection={selectedAvoirs}
|
|
onSelectionChange={(e) => setSelectedAvoirs(e.value)}
|
|
selectionMode="multiple"
|
|
dataKey="id"
|
|
paginator
|
|
rows={10}
|
|
rowsPerPageOptions={[5, 10, 25]}
|
|
className="datatable-responsive"
|
|
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
|
currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} avoirs"
|
|
globalFilter={globalFilter}
|
|
emptyMessage="Aucun avoir trouvé."
|
|
header={header}
|
|
responsiveLayout="scroll"
|
|
loading={loading}
|
|
sortField="dateEmission"
|
|
sortOrder={-1}
|
|
>
|
|
<Column selectionMode="multiple" headerStyle={{ width: '4rem' }} />
|
|
<Column field="numero" header="Numéro" sortable headerStyle={{ minWidth: '10rem' }} />
|
|
<Column field="objet" header="Objet" sortable headerStyle={{ minWidth: '15rem' }} />
|
|
<Column field="client" header="Client" body={clientBodyTemplate} sortable headerStyle={{ minWidth: '12rem' }} />
|
|
<Column field="dateEmission" header="Date émission" body={(rowData) => formatDate(rowData.dateEmission)} sortable headerStyle={{ minWidth: '10rem' }} />
|
|
<Column field="reason" header="Motif" body={reasonBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
|
|
<Column field="montantTTC" header="Montant TTC" body={(rowData) => formatCurrency(rowData.montantTTC)} sortable headerStyle={{ minWidth: '10rem' }} />
|
|
<Column field="statut" header="Statut" body={statusBodyTemplate} headerStyle={{ minWidth: '10rem' }} />
|
|
<Column body={actionBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
|
|
</DataTable>
|
|
|
|
<Dialog
|
|
visible={avoirDialog}
|
|
style={{ width: '700px' }}
|
|
header={isCreating ? "Créer un avoir" : "Détails de l'avoir"}
|
|
modal
|
|
className="p-fluid"
|
|
footer={avoirDialogFooter}
|
|
onHide={hideDialog}
|
|
>
|
|
{isCreating ? (
|
|
<div className="formgrid grid">
|
|
<div className="field col-12">
|
|
<label htmlFor="client">Client *</label>
|
|
<Dropdown
|
|
id="client"
|
|
value={avoir.client}
|
|
options={clients}
|
|
onChange={(e) => onDropdownChange(e, 'client')}
|
|
placeholder="Sélectionnez un client"
|
|
required
|
|
className={submitted && !avoir.client ? 'p-invalid' : ''}
|
|
/>
|
|
{submitted && !avoir.client && <small className="p-invalid">Le client est requis.</small>}
|
|
</div>
|
|
|
|
<div className="field col-12">
|
|
<label htmlFor="objet">Objet *</label>
|
|
<InputText
|
|
id="objet"
|
|
value={avoir.objet}
|
|
onChange={(e) => onInputChange(e, 'objet')}
|
|
required
|
|
className={submitted && !avoir.objet ? 'p-invalid' : ''}
|
|
placeholder="Objet de l'avoir"
|
|
/>
|
|
{submitted && !avoir.objet && <small className="p-invalid">L'objet est requis.</small>}
|
|
</div>
|
|
|
|
<div className="field col-12">
|
|
<label htmlFor="description">Description / Motif</label>
|
|
<InputTextarea
|
|
id="description"
|
|
value={avoir.description}
|
|
onChange={(e) => onInputChange(e, 'description')}
|
|
rows={4}
|
|
placeholder="Décrivez la raison de l'avoir..."
|
|
/>
|
|
</div>
|
|
|
|
<div className="field col-12 md:col-4">
|
|
<label htmlFor="montantHT">Montant HT (€) *</label>
|
|
<InputNumber
|
|
id="montantHT"
|
|
value={avoir.montantHT}
|
|
onValueChange={(e) => onNumberChange(e, 'montantHT')}
|
|
mode="currency"
|
|
currency="EUR"
|
|
locale="fr-FR"
|
|
className={submitted && avoir.montantHT <= 0 ? 'p-invalid' : ''}
|
|
/>
|
|
{submitted && avoir.montantHT <= 0 && <small className="p-invalid">Le montant est requis.</small>}
|
|
</div>
|
|
|
|
<div className="field col-12 md:col-4">
|
|
<label htmlFor="tauxTVA">Taux TVA (%)</label>
|
|
<InputNumber
|
|
id="tauxTVA"
|
|
value={avoir.tauxTVA}
|
|
onValueChange={(e) => onNumberChange(e, 'tauxTVA')}
|
|
suffix="%"
|
|
min={0}
|
|
max={100}
|
|
/>
|
|
</div>
|
|
|
|
<div className="field col-12 md:col-4">
|
|
<label htmlFor="montantTTC">Montant TTC (€)</label>
|
|
<InputNumber
|
|
id="montantTTC"
|
|
value={avoir.montantTTC}
|
|
mode="currency"
|
|
currency="EUR"
|
|
locale="fr-FR"
|
|
disabled
|
|
/>
|
|
</div>
|
|
|
|
<div className="field col-12">
|
|
<label htmlFor="dateEmission">Date d'émission</label>
|
|
<Calendar
|
|
id="dateEmission"
|
|
value={avoir.dateEmission ? new Date(avoir.dateEmission) : null}
|
|
onChange={(e) => setAvoir(prev => ({ ...prev, dateEmission: (e.value as Date)?.toISOString() || new Date().toISOString() }))}
|
|
dateFormat="dd/mm/yy"
|
|
showIcon
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : selectedAvoir && (
|
|
<div className="formgrid grid">
|
|
<div className="field col-12">
|
|
<h6>Informations de l'avoir</h6>
|
|
<p><strong>Numéro:</strong> {selectedAvoir.numero}</p>
|
|
<p><strong>Objet:</strong> {selectedAvoir.objet}</p>
|
|
<p><strong>Client:</strong> {selectedAvoir.client ? `${selectedAvoir.client.prenom} ${selectedAvoir.client.nom}` : 'N/A'}</p>
|
|
<p><strong>Date d'émission:</strong> {formatDate(selectedAvoir.dateEmission)}</p>
|
|
<p><strong>Montant TTC:</strong> {formatCurrency(selectedAvoir.montantTTC || 0)}</p>
|
|
</div>
|
|
|
|
<Divider />
|
|
|
|
<div className="field col-12">
|
|
<h6>Motif de l'avoir</h6>
|
|
<div className="mb-2">
|
|
<Tag
|
|
value={getReasonLabel(getAvoirReason(selectedAvoir.description || ''))}
|
|
severity={getAvoirSeverity(getAvoirReason(selectedAvoir.description || '')) as any}
|
|
/>
|
|
</div>
|
|
<p><strong>Description:</strong></p>
|
|
<p className="text-700">{selectedAvoir.description || 'Aucune description'}</p>
|
|
</div>
|
|
|
|
<Divider />
|
|
|
|
<div className="field col-12">
|
|
<h6>Actions disponibles</h6>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
label="Imprimer"
|
|
icon="pi pi-print"
|
|
size="small"
|
|
onClick={() => {
|
|
toast.current?.show({
|
|
severity: 'info',
|
|
summary: 'Impression',
|
|
detail: `Impression de l'avoir ${selectedAvoir.numero}`,
|
|
life: 3000
|
|
});
|
|
}}
|
|
/>
|
|
<Button
|
|
label="Envoyer"
|
|
icon="pi pi-send"
|
|
severity={"secondary" as any}
|
|
size="small"
|
|
onClick={() => {
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Envoi',
|
|
detail: `Avoir ${selectedAvoir.numero} envoyé au client`,
|
|
life: 3000
|
|
});
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Dialog>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FacturesAvoirsPage;
|
|
|
|
|