Initial commit
This commit is contained in:
dahoud
705
app/(main)/factures/avoirs/page.tsx
Normal file
705
app/(main)/factures/avoirs/page.tsx
Normal file
@@ -0,0 +1,705 @@
|
||||
'use client';
|
||||
|
||||
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';
|
||||
|
||||
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<Facture>({
|
||||
id: '',
|
||||
numero: '',
|
||||
dateEmission: new Date(),
|
||||
dateEcheance: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
|
||||
datePaiement: null,
|
||||
objet: '',
|
||||
description: '',
|
||||
montantHT: 0,
|
||||
montantTTC: 0,
|
||||
tauxTVA: 20,
|
||||
statut: 'EMISE',
|
||||
type: 'AVOIR',
|
||||
actif: true,
|
||||
client: null,
|
||||
chantier: null,
|
||||
devis: null
|
||||
});
|
||||
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.type === '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(),
|
||||
dateEcheance: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000),
|
||||
datePaiement: null,
|
||||
objet: '',
|
||||
description: '',
|
||||
montantHT: 0,
|
||||
montantTTC: 0,
|
||||
tauxTVA: 20,
|
||||
statut: 'EMISE',
|
||||
type: 'AVOIR',
|
||||
actif: true,
|
||||
client: null,
|
||||
chantier: null,
|
||||
devis: null
|
||||
});
|
||||
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() }]);
|
||||
|
||||
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"
|
||||
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 === 'EMISE' ? 'É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)}
|
||||
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}
|
||||
onChange={(e) => setAvoir(prev => ({ ...prev, dateEmission: e.value || new Date() }))}
|
||||
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"
|
||||
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;
|
||||
Reference in New Issue
Block a user