Initial commit
This commit is contained in:
dahoud
747
app/(main)/budget/suivi/page.tsx
Normal file
747
app/(main)/budget/suivi/page.tsx
Normal file
@@ -0,0 +1,747 @@
|
||||
'use client';
|
||||
|
||||
/**
|
||||
* Page principale de suivi budgétaire
|
||||
* Tableau de bord des dépenses réelles vs budget prévu avec analyse des écarts
|
||||
*/
|
||||
|
||||
import React, { useState, useRef, useEffect, useContext } from 'react';
|
||||
import { LayoutContext } from '../../../../layout/context/layoutcontext';
|
||||
import { Card } from 'primereact/card';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Chart } from 'primereact/chart';
|
||||
import { TabView, TabPanel } from 'primereact/tabview';
|
||||
import { Panel } from 'primereact/panel';
|
||||
import { Divider } from 'primereact/divider';
|
||||
import BudgetExecutionDialog from '../../../../components/phases/BudgetExecutionDialog';
|
||||
|
||||
interface SuiviBudget {
|
||||
id: string;
|
||||
chantierNom: string;
|
||||
client: string;
|
||||
budgetTotal: number;
|
||||
depenseReelle: number;
|
||||
ecart: number;
|
||||
ecartPourcentage: number;
|
||||
avancementTravaux: number;
|
||||
nombrePhases: number;
|
||||
phasesTerminees: number;
|
||||
statut: 'CONFORME' | 'ALERTE' | 'DEPASSEMENT' | 'CRITIQUE';
|
||||
tendance: 'STABLE' | 'AMELIORATION' | 'DETERIORATION';
|
||||
responsable: string;
|
||||
derniereMiseAJour: string;
|
||||
alertes: number;
|
||||
prochainJalon: string;
|
||||
}
|
||||
|
||||
const BudgetSuiviPage = () => {
|
||||
const { layoutConfig, setLayoutConfig, layoutState, setLayoutState } = useContext(LayoutContext);
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
// États
|
||||
const [budgets, setBudgets] = useState<SuiviBudget[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
const [selectedBudget, setSelectedBudget] = useState<SuiviBudget | null>(null);
|
||||
const [showExecutionDialog, setShowExecutionDialog] = useState(false);
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
|
||||
// Filtres
|
||||
const [statutFilter, setStatutFilter] = useState<string>('');
|
||||
const [tendanceFilter, setTendanceFilter] = useState<string>('');
|
||||
|
||||
// Options pour les filtres
|
||||
const statutOptions = [
|
||||
{ label: 'Tous les statuts', value: '' },
|
||||
{ label: 'Conforme', value: 'CONFORME' },
|
||||
{ label: 'Alerte', value: 'ALERTE' },
|
||||
{ label: 'Dépassement', value: 'DEPASSEMENT' },
|
||||
{ label: 'Critique', value: 'CRITIQUE' }
|
||||
];
|
||||
|
||||
const tendanceOptions = [
|
||||
{ label: 'Toutes tendances', value: '' },
|
||||
{ label: 'Stable', value: 'STABLE' },
|
||||
{ label: 'Amélioration', value: 'AMELIORATION' },
|
||||
{ label: 'Détérioration', value: 'DETERIORATION' }
|
||||
];
|
||||
|
||||
// Charger les données
|
||||
useEffect(() => {
|
||||
loadSuiviBudgets();
|
||||
}, []);
|
||||
|
||||
const loadSuiviBudgets = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
|
||||
// Simuler des données de suivi budgétaire
|
||||
const budgetsSimules: SuiviBudget[] = [
|
||||
{
|
||||
id: '1',
|
||||
chantierNom: 'Villa Moderne Bordeaux',
|
||||
client: 'Jean Dupont',
|
||||
budgetTotal: 250000,
|
||||
depenseReelle: 180000,
|
||||
ecart: -70000,
|
||||
ecartPourcentage: -28,
|
||||
avancementTravaux: 65,
|
||||
nombrePhases: 8,
|
||||
phasesTerminees: 5,
|
||||
statut: 'CONFORME',
|
||||
tendance: 'STABLE',
|
||||
responsable: 'Marie Martin',
|
||||
derniereMiseAJour: '2025-01-30',
|
||||
alertes: 0,
|
||||
prochainJalon: 'Finitions - 15/02/2025'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
chantierNom: 'Extension Maison Lyon',
|
||||
client: 'Sophie Lambert',
|
||||
budgetTotal: 120000,
|
||||
depenseReelle: 135000,
|
||||
ecart: 15000,
|
||||
ecartPourcentage: 12.5,
|
||||
avancementTravaux: 85,
|
||||
nombrePhases: 5,
|
||||
phasesTerminees: 4,
|
||||
statut: 'DEPASSEMENT',
|
||||
tendance: 'DETERIORATION',
|
||||
responsable: 'Pierre Dubois',
|
||||
derniereMiseAJour: '2025-01-29',
|
||||
alertes: 3,
|
||||
prochainJalon: 'Réception - 28/02/2025'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
chantierNom: 'Rénovation Appartement Paris',
|
||||
client: 'Michel Robert',
|
||||
budgetTotal: 85000,
|
||||
depenseReelle: 92000,
|
||||
ecart: 7000,
|
||||
ecartPourcentage: 8.2,
|
||||
avancementTravaux: 75,
|
||||
nombrePhases: 6,
|
||||
phasesTerminees: 4,
|
||||
statut: 'ALERTE',
|
||||
tendance: 'DETERIORATION',
|
||||
responsable: 'Anne Legrand',
|
||||
derniereMiseAJour: '2025-01-28',
|
||||
alertes: 1,
|
||||
prochainJalon: 'Électricité - 10/02/2025'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
chantierNom: 'Construction Bureaux Toulouse',
|
||||
client: 'Entreprise ABC',
|
||||
budgetTotal: 450000,
|
||||
depenseReelle: 520000,
|
||||
ecart: 70000,
|
||||
ecartPourcentage: 15.6,
|
||||
avancementTravaux: 90,
|
||||
nombrePhases: 12,
|
||||
phasesTerminees: 10,
|
||||
statut: 'CRITIQUE',
|
||||
tendance: 'DETERIORATION',
|
||||
responsable: 'Paul Moreau',
|
||||
derniereMiseAJour: '2025-01-30',
|
||||
alertes: 5,
|
||||
prochainJalon: 'Livraison - 05/02/2025'
|
||||
}
|
||||
];
|
||||
|
||||
setBudgets(budgetsSimules);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement du suivi budgétaire:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger le suivi budgétaire',
|
||||
life: 3000
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Templates pour le DataTable
|
||||
const statutTemplate = (rowData: SuiviBudget) => {
|
||||
const severityMap = {
|
||||
'CONFORME': 'success',
|
||||
'ALERTE': 'warning',
|
||||
'DEPASSEMENT': 'danger',
|
||||
'CRITIQUE': 'danger'
|
||||
} as const;
|
||||
|
||||
const iconMap = {
|
||||
'CONFORME': 'pi-check-circle',
|
||||
'ALERTE': 'pi-exclamation-triangle',
|
||||
'DEPASSEMENT': 'pi-times-circle',
|
||||
'CRITIQUE': 'pi-ban'
|
||||
};
|
||||
|
||||
return (
|
||||
<Tag
|
||||
value={rowData.statut}
|
||||
severity={severityMap[rowData.statut]}
|
||||
icon={`pi ${iconMap[rowData.statut]}`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const tendanceTemplate = (rowData: SuiviBudget) => {
|
||||
const iconMap = {
|
||||
'STABLE': 'pi-minus',
|
||||
'AMELIORATION': 'pi-arrow-up',
|
||||
'DETERIORATION': 'pi-arrow-down'
|
||||
};
|
||||
|
||||
const colorMap = {
|
||||
'STABLE': 'text-blue-500',
|
||||
'AMELIORATION': 'text-green-500',
|
||||
'DETERIORATION': 'text-red-500'
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<i className={`pi ${iconMap[rowData.tendance]} ${colorMap[rowData.tendance]}`}></i>
|
||||
<span className={colorMap[rowData.tendance]}>{rowData.tendance}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ecartTemplate = (rowData: SuiviBudget) => {
|
||||
const isPositif = rowData.ecart > 0;
|
||||
const couleur = isPositif ? 'text-red-500' : 'text-green-500';
|
||||
const icone = isPositif ? 'pi-arrow-up' : 'pi-arrow-down';
|
||||
|
||||
return (
|
||||
<div className="text-right">
|
||||
<div className={`font-semibold ${couleur} flex align-items-center justify-content-end gap-1`}>
|
||||
<i className={`pi ${icone} text-xs`}></i>
|
||||
{new Intl.NumberFormat('fr-FR', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
signDisplay: 'always'
|
||||
}).format(rowData.ecart)}
|
||||
</div>
|
||||
<small className={`${couleur}`}>
|
||||
{rowData.ecartPourcentage > 0 ? '+' : ''}{rowData.ecartPourcentage.toFixed(1)}%
|
||||
</small>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const budgetTemplate = (rowData: SuiviBudget) => {
|
||||
const pourcentageConsomme = (rowData.depenseReelle / rowData.budgetTotal) * 100;
|
||||
const couleurBarre = pourcentageConsomme > 100 ? '#dc3545' :
|
||||
pourcentageConsomme > 80 ? '#ffc107' : '#22c55e';
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-content-between mb-1">
|
||||
<span className="text-sm font-semibold">
|
||||
{new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(rowData.depenseReelle)}
|
||||
</span>
|
||||
<span className="text-sm text-color-secondary">
|
||||
/ {new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(rowData.budgetTotal)}
|
||||
</span>
|
||||
</div>
|
||||
<ProgressBar
|
||||
value={Math.min(pourcentageConsomme, 100)}
|
||||
className="w-full"
|
||||
style={{ height: '8px' }}
|
||||
color={couleurBarre}
|
||||
/>
|
||||
<small className="text-color-secondary">
|
||||
{pourcentageConsomme.toFixed(0)}% consommé
|
||||
</small>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const avancementTemplate = (rowData: SuiviBudget) => {
|
||||
// Calculer l'efficacité budgétaire (avancement vs consommation budget)
|
||||
const consommationBudget = (rowData.depenseReelle / rowData.budgetTotal) * 100;
|
||||
const efficacite = rowData.avancementTravaux - consommationBudget;
|
||||
const couleurEfficacite = efficacite > 0 ? 'text-green-500' :
|
||||
efficacite < -10 ? 'text-red-500' : 'text-orange-500';
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-content-between mb-1">
|
||||
<span className="text-sm">Phases</span>
|
||||
<span className="text-sm font-semibold">{rowData.phasesTerminees}/{rowData.nombrePhases}</span>
|
||||
</div>
|
||||
<ProgressBar
|
||||
value={rowData.avancementTravaux}
|
||||
className="w-full mb-1"
|
||||
style={{ height: '8px' }}
|
||||
/>
|
||||
<div className="flex justify-content-between">
|
||||
<small className="text-color-secondary">{rowData.avancementTravaux}% avancement</small>
|
||||
<small className={`font-semibold ${couleurEfficacite}`}>
|
||||
{efficacite > 0 ? '+' : ''}{efficacite.toFixed(0)}% eff.
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const alertesTemplate = (rowData: SuiviBudget) => {
|
||||
if (rowData.alertes === 0) {
|
||||
return <Tag value="0" severity="success" icon="pi pi-check" />;
|
||||
}
|
||||
|
||||
const severity = rowData.alertes > 3 ? 'danger' : rowData.alertes > 1 ? 'warning' : 'info';
|
||||
return <Tag value={rowData.alertes.toString()} severity={severity} icon="pi pi-bell" />;
|
||||
};
|
||||
|
||||
const actionsTemplate = (rowData: SuiviBudget) => {
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
icon="pi pi-chart-line"
|
||||
className="p-button-outlined p-button-sm"
|
||||
tooltip="Suivi détaillé"
|
||||
onClick={() => {
|
||||
setSelectedBudget(rowData);
|
||||
setShowExecutionDialog(true);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-eye"
|
||||
className="p-button-outlined p-button-sm"
|
||||
tooltip="Voir le chantier"
|
||||
onClick={() => {
|
||||
window.open(`/chantiers/${rowData.id}`, '_blank');
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-bell"
|
||||
className={`p-button-sm ${rowData.alertes > 0 ? 'p-button-warning' : 'p-button-outlined'}`}
|
||||
tooltip={`${rowData.alertes} alerte(s)`}
|
||||
onClick={() => {
|
||||
// Ouvrir le panneau des alertes
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Alertes',
|
||||
detail: `${rowData.alertes} alerte(s) active(s) pour ce chantier`,
|
||||
life: 3000
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Gérer la sauvegarde de l'exécution budgétaire
|
||||
const handleSaveBudgetExecution = async (executionData: any) => {
|
||||
if (!selectedBudget) return;
|
||||
|
||||
try {
|
||||
// Mettre à jour les données de suivi
|
||||
setBudgets(budgets.map(b =>
|
||||
b.id === selectedBudget.id
|
||||
? {
|
||||
...b,
|
||||
depenseReelle: executionData.coutTotal,
|
||||
ecart: executionData.coutTotal - b.budgetTotal,
|
||||
ecartPourcentage: ((executionData.coutTotal - b.budgetTotal) / b.budgetTotal) * 100,
|
||||
statut: executionData.ecartPourcentage > 15 ? 'CRITIQUE' :
|
||||
executionData.ecartPourcentage > 10 ? 'DEPASSEMENT' :
|
||||
executionData.ecartPourcentage > 5 ? 'ALERTE' : 'CONFORME',
|
||||
derniereMiseAJour: new Date().toISOString().split('T')[0]
|
||||
} as SuiviBudget
|
||||
: b
|
||||
));
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Suivi mis à jour',
|
||||
detail: `Le suivi budgétaire du chantier "${selectedBudget.chantierNom}" a été actualisé`,
|
||||
life: 3000
|
||||
});
|
||||
} catch (error) {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de mettre à jour le suivi budgétaire',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Filtrer les données
|
||||
const filteredBudgets = budgets.filter(budget => {
|
||||
let matches = true;
|
||||
|
||||
if (globalFilter) {
|
||||
const search = globalFilter.toLowerCase();
|
||||
matches = matches && (
|
||||
budget.chantierNom.toLowerCase().includes(search) ||
|
||||
budget.client.toLowerCase().includes(search) ||
|
||||
budget.responsable.toLowerCase().includes(search)
|
||||
);
|
||||
}
|
||||
|
||||
if (statutFilter) {
|
||||
matches = matches && budget.statut === statutFilter;
|
||||
}
|
||||
|
||||
if (tendanceFilter) {
|
||||
matches = matches && budget.tendance === tendanceFilter;
|
||||
}
|
||||
|
||||
return matches;
|
||||
});
|
||||
|
||||
// Statistiques
|
||||
const stats = {
|
||||
totalChantiers: budgets.length,
|
||||
chantiersConformes: budgets.filter(b => b.statut === 'CONFORME').length,
|
||||
chantiersAlerte: budgets.filter(b => b.statut === 'ALERTE').length,
|
||||
chantiersDepassement: budgets.filter(b => b.statut === 'DEPASSEMENT' || b.statut === 'CRITIQUE').length,
|
||||
budgetTotalPrevu: budgets.reduce((sum, b) => sum + b.budgetTotal, 0),
|
||||
depenseTotaleReelle: budgets.reduce((sum, b) => sum + b.depenseReelle, 0),
|
||||
ecartTotalAbsolu: budgets.reduce((sum, b) => sum + Math.abs(b.ecart), 0),
|
||||
alertesTotales: budgets.reduce((sum, b) => sum + b.alertes, 0)
|
||||
};
|
||||
|
||||
const ecartTotalGlobal = stats.depenseTotaleReelle - stats.budgetTotalPrevu;
|
||||
const ecartPourcentageGlobal = stats.budgetTotalPrevu > 0 ? (ecartTotalGlobal / stats.budgetTotalPrevu) * 100 : 0;
|
||||
|
||||
// Données pour les graphiques
|
||||
const repartitionData = {
|
||||
labels: ['Conforme', 'Alerte', 'Dépassement'],
|
||||
datasets: [
|
||||
{
|
||||
data: [stats.chantiersConformes, stats.chantiersAlerte, stats.chantiersDepassement],
|
||||
backgroundColor: ['#22c55e', '#ffc107', '#dc3545'],
|
||||
borderWidth: 0
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const evolutionData = {
|
||||
labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Budget prévu',
|
||||
data: [150000, 180000, 220000, 280000, 350000, 420000],
|
||||
borderColor: '#007ad9',
|
||||
backgroundColor: 'rgba(0, 122, 217, 0.1)',
|
||||
tension: 0.4
|
||||
},
|
||||
{
|
||||
label: 'Dépenses réelles',
|
||||
data: [145000, 190000, 240000, 310000, 380000, 460000],
|
||||
borderColor: '#dc3545',
|
||||
backgroundColor: 'rgba(220, 53, 69, 0.1)',
|
||||
tension: 0.4
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Template de la toolbar
|
||||
const toolbarStartTemplate = (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<h5 className="m-0">Suivi Budgétaire</h5>
|
||||
<Tag value={`${stats.totalChantiers} chantiers`} className="ml-2" />
|
||||
{stats.alertesTotales > 0 && (
|
||||
<Tag value={`${stats.alertesTotales} alertes`} severity="warning" icon="pi pi-bell" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
const toolbarEndTemplate = (
|
||||
<div className="flex gap-2">
|
||||
<span className="p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText
|
||||
value={globalFilter}
|
||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||
placeholder="Rechercher..."
|
||||
/>
|
||||
</span>
|
||||
<Dropdown
|
||||
value={statutFilter}
|
||||
options={statutOptions}
|
||||
onChange={(e) => setStatutFilter(e.value)}
|
||||
placeholder="Statut"
|
||||
className="w-10rem"
|
||||
/>
|
||||
<Dropdown
|
||||
value={tendanceFilter}
|
||||
options={tendanceOptions}
|
||||
onChange={(e) => setTendanceFilter(e.value)}
|
||||
placeholder="Tendance"
|
||||
className="w-10rem"
|
||||
/>
|
||||
<Button
|
||||
label="Nouvelle dépense"
|
||||
icon="pi pi-plus"
|
||||
className="p-button-success"
|
||||
onClick={() => {
|
||||
window.location.href = '/budget/suivi/nouvelle-depense';
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<Toast ref={toast} />
|
||||
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<TabView activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
|
||||
<TabPanel header="Tableau de bord" leftIcon="pi pi-chart-bar">
|
||||
{/* KPI principaux */}
|
||||
<div className="grid mb-4">
|
||||
<div className="col-12 lg:col-3">
|
||||
<Card className="bg-blue-50">
|
||||
<div className="flex justify-content-between">
|
||||
<div>
|
||||
<span className="block text-blue-600 font-medium mb-3">Budget Total</span>
|
||||
<div className="text-blue-900 font-bold text-xl">
|
||||
{new Intl.NumberFormat('fr-FR', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
minimumFractionDigits: 0
|
||||
}).format(stats.budgetTotalPrevu)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex align-items-center justify-content-center bg-blue-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
|
||||
<i className="pi pi-euro text-blue-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 lg:col-3">
|
||||
<Card className="bg-purple-50">
|
||||
<div className="flex justify-content-between">
|
||||
<div>
|
||||
<span className="block text-purple-600 font-medium mb-3">Dépenses Réelles</span>
|
||||
<div className="text-purple-900 font-bold text-xl">
|
||||
{new Intl.NumberFormat('fr-FR', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
minimumFractionDigits: 0
|
||||
}).format(stats.depenseTotaleReelle)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex align-items-center justify-content-center bg-purple-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
|
||||
<i className="pi pi-credit-card text-purple-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 lg:col-3">
|
||||
<Card className={ecartTotalGlobal > 0 ? "bg-red-50" : "bg-green-50"}>
|
||||
<div className="flex justify-content-between">
|
||||
<div>
|
||||
<span className={`block font-medium mb-3 ${ecartTotalGlobal > 0 ? 'text-red-600' : 'text-green-600'}`}>
|
||||
Écart Global
|
||||
</span>
|
||||
<div className={`font-bold text-xl ${ecartTotalGlobal > 0 ? 'text-red-900' : 'text-green-900'}`}>
|
||||
{ecartTotalGlobal > 0 ? '+' : ''}{new Intl.NumberFormat('fr-FR', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
minimumFractionDigits: 0
|
||||
}).format(ecartTotalGlobal)}
|
||||
</div>
|
||||
<small className={ecartTotalGlobal > 0 ? 'text-red-600' : 'text-green-600'}>
|
||||
{ecartPourcentageGlobal > 0 ? '+' : ''}{ecartPourcentageGlobal.toFixed(1)}%
|
||||
</small>
|
||||
</div>
|
||||
<div className={`flex align-items-center justify-content-center border-round ${ecartTotalGlobal > 0 ? 'bg-red-100' : 'bg-green-100'}`} style={{ width: '2.5rem', height: '2.5rem' }}>
|
||||
<i className={`pi ${ecartTotalGlobal > 0 ? 'pi-arrow-up text-red-500' : 'pi-arrow-down text-green-500'} text-xl`}></i>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 lg:col-3">
|
||||
<Card className="bg-orange-50">
|
||||
<div className="flex justify-content-between">
|
||||
<div>
|
||||
<span className="block text-orange-600 font-medium mb-3">Alertes Actives</span>
|
||||
<div className="text-orange-900 font-bold text-xl">
|
||||
{stats.alertesTotales}
|
||||
</div>
|
||||
<small className="text-orange-600">notifications</small>
|
||||
</div>
|
||||
<div className="flex align-items-center justify-content-center bg-orange-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
|
||||
<i className="pi pi-bell text-orange-500 text-xl"></i>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Graphiques */}
|
||||
<div className="grid mb-4">
|
||||
<div className="col-12 lg:col-6">
|
||||
<Card title="Répartition par statut budgétaire">
|
||||
<Chart type="doughnut" data={repartitionData} style={{ height: '300px' }} />
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 lg:col-6">
|
||||
<Card title="Évolution budget vs dépenses">
|
||||
<Chart type="line" data={evolutionData} style={{ height: '300px' }} />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Actions prioritaires */}
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card title="Actions prioritaires">
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-4">
|
||||
<Panel header="🚨 Dépassements critiques" toggleable>
|
||||
<p>
|
||||
<strong>{stats.chantiersDepassement}</strong> chantiers en dépassement budgétaire.
|
||||
</p>
|
||||
{stats.chantiersDepassement > 0 && (
|
||||
<Button
|
||||
label="Voir la liste"
|
||||
icon="pi pi-exclamation-triangle"
|
||||
className="p-button-danger p-button-sm"
|
||||
onClick={() => setStatutFilter('DEPASSEMENT')}
|
||||
/>
|
||||
)}
|
||||
</Panel>
|
||||
</div>
|
||||
<div className="col-12 md:col-4">
|
||||
<Panel header="⚠️ Alertes budgétaires" toggleable>
|
||||
<p>
|
||||
<strong>{stats.chantiersAlerte}</strong> chantiers nécessitent une surveillance.
|
||||
</p>
|
||||
{stats.chantiersAlerte > 0 && (
|
||||
<Button
|
||||
label="Voir la liste"
|
||||
icon="pi pi-eye"
|
||||
className="p-button-warning p-button-sm"
|
||||
onClick={() => setStatutFilter('ALERTE')}
|
||||
/>
|
||||
)}
|
||||
</Panel>
|
||||
</div>
|
||||
<div className="col-12 md:col-4">
|
||||
<Panel header="✅ Conformes" toggleable>
|
||||
<p>
|
||||
<strong>{stats.chantiersConformes}</strong> chantiers respectent leur budget.
|
||||
</p>
|
||||
<Button
|
||||
label="Voir la liste"
|
||||
icon="pi pi-check"
|
||||
className="p-button-success p-button-sm"
|
||||
onClick={() => setStatutFilter('CONFORME')}
|
||||
/>
|
||||
</Panel>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Suivi détaillé" leftIcon="pi pi-list">
|
||||
<Toolbar
|
||||
start={toolbarStartTemplate}
|
||||
end={toolbarEndTemplate}
|
||||
className="mb-4"
|
||||
/>
|
||||
|
||||
<DataTable
|
||||
value={filteredBudgets}
|
||||
loading={loading}
|
||||
paginator
|
||||
rows={20}
|
||||
emptyMessage="Aucun chantier trouvé"
|
||||
className="p-datatable-lg"
|
||||
dataKey="id"
|
||||
sortMode="multiple"
|
||||
>
|
||||
<Column field="chantierNom" header="Chantier" sortable style={{ minWidth: '15rem' }} />
|
||||
<Column field="client" header="Client" sortable style={{ width: '12rem' }} />
|
||||
<Column
|
||||
field="budgetTotal"
|
||||
header="Budget / Dépenses"
|
||||
body={budgetTemplate}
|
||||
sortable
|
||||
style={{ width: '14rem' }}
|
||||
/>
|
||||
<Column
|
||||
field="ecart"
|
||||
header="Écart"
|
||||
body={ecartTemplate}
|
||||
sortable
|
||||
style={{ width: '10rem' }}
|
||||
/>
|
||||
<Column
|
||||
field="avancementTravaux"
|
||||
header="Avancement"
|
||||
body={avancementTemplate}
|
||||
style={{ width: '12rem' }}
|
||||
/>
|
||||
<Column
|
||||
field="statut"
|
||||
header="Statut"
|
||||
body={statutTemplate}
|
||||
sortable
|
||||
style={{ width: '10rem' }}
|
||||
/>
|
||||
<Column
|
||||
field="tendance"
|
||||
header="Tendance"
|
||||
body={tendanceTemplate}
|
||||
sortable
|
||||
style={{ width: '10rem' }}
|
||||
/>
|
||||
<Column
|
||||
field="alertes"
|
||||
header="Alertes"
|
||||
body={alertesTemplate}
|
||||
sortable
|
||||
style={{ width: '8rem' }}
|
||||
/>
|
||||
<Column field="responsable" header="Responsable" sortable style={{ width: '10rem' }} />
|
||||
<Column
|
||||
header="Actions"
|
||||
body={actionsTemplate}
|
||||
style={{ width: '10rem' }}
|
||||
/>
|
||||
</DataTable>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Dialog d'exécution budgétaire */}
|
||||
<BudgetExecutionDialog
|
||||
visible={showExecutionDialog}
|
||||
onHide={() => setShowExecutionDialog(false)}
|
||||
phase={selectedBudget ? {
|
||||
id: parseInt(selectedBudget.id),
|
||||
nom: selectedBudget.chantierNom,
|
||||
budgetPrevu: selectedBudget.budgetTotal
|
||||
} as any : null}
|
||||
onSave={handleSaveBudgetExecution}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BudgetSuiviPage;
|
||||
Reference in New Issue
Block a user