546 lines
23 KiB
TypeScript
546 lines
23 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import { Card } from 'primereact/card';
|
|
import { Chart } from 'primereact/chart';
|
|
import { DataTable } from 'primereact/datatable';
|
|
import { Column } from 'primereact/column';
|
|
import { Tag } from 'primereact/tag';
|
|
import { ProgressBar } from 'primereact/progressbar';
|
|
import { Button } from 'primereact/button';
|
|
import { Toast } from 'primereact/toast';
|
|
import { Dropdown } from 'primereact/dropdown';
|
|
import { Calendar } from 'primereact/calendar';
|
|
import { Badge } from 'primereact/badge';
|
|
import { Divider } from 'primereact/divider';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
interface ChantierDashboard {
|
|
id: string;
|
|
nom: string;
|
|
client: string;
|
|
statut: string;
|
|
avancement: number;
|
|
budget: number;
|
|
coutReel: number;
|
|
dateDebut: Date;
|
|
dateFinPrevue: Date;
|
|
nombreEmployes: number;
|
|
nombrePhases: number;
|
|
phasesTerminees: number;
|
|
retard: number;
|
|
priorite: string;
|
|
localisation: string;
|
|
}
|
|
|
|
const DashboardChantiers = () => {
|
|
const toast = useRef<Toast>(null);
|
|
const router = useRouter();
|
|
|
|
const [chantiers, setChantiers] = useState<ChantierDashboard[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [selectedPeriod, setSelectedPeriod] = useState('30');
|
|
const [selectedStatut, setSelectedStatut] = useState('');
|
|
const [dateRange, setDateRange] = useState<Date[]>([]);
|
|
|
|
const [chartData, setChartData] = useState({});
|
|
const [chartOptions, setChartOptions] = useState({});
|
|
|
|
const periodOptions = [
|
|
{ label: '7 derniers jours', value: '7' },
|
|
{ label: '30 derniers jours', value: '30' },
|
|
{ label: '3 derniers mois', value: '90' },
|
|
{ label: '6 derniers mois', value: '180' },
|
|
{ label: 'Cette année', value: '365' }
|
|
];
|
|
|
|
const statutOptions = [
|
|
{ label: 'Tous les statuts', value: '' },
|
|
{ label: 'Planifié', value: 'PLANIFIE' },
|
|
{ label: 'En cours', value: 'EN_COURS' },
|
|
{ label: 'En pause', value: 'EN_PAUSE' },
|
|
{ label: 'Terminé', value: 'TERMINE' },
|
|
{ label: 'Annulé', value: 'ANNULE' }
|
|
];
|
|
|
|
useEffect(() => {
|
|
loadChantiers();
|
|
initCharts();
|
|
}, [selectedPeriod, selectedStatut, dateRange]);
|
|
|
|
const loadChantiers = async () => {
|
|
try {
|
|
setLoading(true);
|
|
|
|
// TODO: Remplacer par un vrai appel API
|
|
// const response = await chantierService.getDashboardData({
|
|
// period: selectedPeriod,
|
|
// statut: selectedStatut,
|
|
// dateRange
|
|
// });
|
|
|
|
// Données simulées pour la démonstration
|
|
const mockChantiers: ChantierDashboard[] = [
|
|
{
|
|
id: '1',
|
|
nom: 'Résidence Les Jardins',
|
|
client: 'Immobilière Moderne',
|
|
statut: 'EN_COURS',
|
|
avancement: 75,
|
|
budget: 850000,
|
|
coutReel: 620000,
|
|
dateDebut: new Date('2024-03-15'),
|
|
dateFinPrevue: new Date('2024-12-20'),
|
|
nombreEmployes: 12,
|
|
nombrePhases: 8,
|
|
phasesTerminees: 6,
|
|
retard: 0,
|
|
priorite: 'HAUTE',
|
|
localisation: 'Paris 15ème'
|
|
},
|
|
{
|
|
id: '2',
|
|
nom: 'Centre Commercial Atlantis',
|
|
client: 'Groupe Retail Plus',
|
|
statut: 'EN_COURS',
|
|
avancement: 45,
|
|
budget: 2500000,
|
|
coutReel: 1200000,
|
|
dateDebut: new Date('2024-01-10'),
|
|
dateFinPrevue: new Date('2025-06-30'),
|
|
nombreEmployes: 25,
|
|
nombrePhases: 12,
|
|
phasesTerminees: 5,
|
|
retard: 15,
|
|
priorite: 'CRITIQUE',
|
|
localisation: 'Nanterre'
|
|
},
|
|
{
|
|
id: '3',
|
|
nom: 'Rénovation Hôtel Luxe',
|
|
client: 'Hôtels Prestige',
|
|
statut: 'EN_PAUSE',
|
|
avancement: 30,
|
|
budget: 1200000,
|
|
coutReel: 380000,
|
|
dateDebut: new Date('2024-02-01'),
|
|
dateFinPrevue: new Date('2024-11-15'),
|
|
nombreEmployes: 8,
|
|
nombrePhases: 10,
|
|
phasesTerminees: 3,
|
|
retard: 45,
|
|
priorite: 'MOYENNE',
|
|
localisation: 'Lyon'
|
|
},
|
|
{
|
|
id: '4',
|
|
nom: 'Usine Pharmaceutique',
|
|
client: 'PharmaFrance',
|
|
statut: 'PLANIFIE',
|
|
avancement: 0,
|
|
budget: 3200000,
|
|
coutReel: 0,
|
|
dateDebut: new Date('2025-02-01'),
|
|
dateFinPrevue: new Date('2026-08-30'),
|
|
nombreEmployes: 0,
|
|
nombrePhases: 15,
|
|
phasesTerminees: 0,
|
|
retard: 0,
|
|
priorite: 'HAUTE',
|
|
localisation: 'Marseille'
|
|
},
|
|
{
|
|
id: '5',
|
|
nom: 'Pont Autoroutier A86',
|
|
client: 'Ministère des Transports',
|
|
statut: 'TERMINE',
|
|
avancement: 100,
|
|
budget: 4500000,
|
|
coutReel: 4350000,
|
|
dateDebut: new Date('2023-06-01'),
|
|
dateFinPrevue: new Date('2024-10-31'),
|
|
nombreEmployes: 0,
|
|
nombrePhases: 20,
|
|
phasesTerminees: 20,
|
|
retard: -10,
|
|
priorite: 'CRITIQUE',
|
|
localisation: 'Île-de-France'
|
|
}
|
|
];
|
|
|
|
// Filtrer selon les critères sélectionnés
|
|
let filteredChantiers = mockChantiers;
|
|
|
|
if (selectedStatut) {
|
|
filteredChantiers = filteredChantiers.filter(c => c.statut === selectedStatut);
|
|
}
|
|
|
|
setChantiers(filteredChantiers);
|
|
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement des chantiers:', error);
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Impossible de charger les données des chantiers'
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const initCharts = () => {
|
|
const documentStyle = getComputedStyle(document.documentElement);
|
|
const textColor = documentStyle.getPropertyValue('--text-color');
|
|
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
|
|
const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
|
|
|
|
// Graphique de répartition par statut
|
|
const statutData = {
|
|
labels: ['En cours', 'Planifié', 'En pause', 'Terminé', 'Annulé'],
|
|
datasets: [
|
|
{
|
|
data: [
|
|
chantiers.filter(c => c.statut === 'EN_COURS').length,
|
|
chantiers.filter(c => c.statut === 'PLANIFIE').length,
|
|
chantiers.filter(c => c.statut === 'EN_PAUSE').length,
|
|
chantiers.filter(c => c.statut === 'TERMINE').length,
|
|
chantiers.filter(c => c.statut === 'ANNULE').length
|
|
],
|
|
backgroundColor: [
|
|
documentStyle.getPropertyValue('--green-500'),
|
|
documentStyle.getPropertyValue('--blue-500'),
|
|
documentStyle.getPropertyValue('--orange-500'),
|
|
documentStyle.getPropertyValue('--cyan-500'),
|
|
documentStyle.getPropertyValue('--red-500')
|
|
],
|
|
hoverBackgroundColor: [
|
|
documentStyle.getPropertyValue('--green-400'),
|
|
documentStyle.getPropertyValue('--blue-400'),
|
|
documentStyle.getPropertyValue('--orange-400'),
|
|
documentStyle.getPropertyValue('--cyan-400'),
|
|
documentStyle.getPropertyValue('--red-400')
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
const options = {
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
usePointStyle: true,
|
|
color: textColor
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
setChartData(statutData);
|
|
setChartOptions(options);
|
|
};
|
|
|
|
const getStatutSeverity = (statut: string) => {
|
|
switch (statut) {
|
|
case 'EN_COURS': return 'success';
|
|
case 'PLANIFIE': return 'info';
|
|
case 'EN_PAUSE': return 'warning';
|
|
case 'TERMINE': return 'success';
|
|
case 'ANNULE': return 'danger';
|
|
default: return 'info';
|
|
}
|
|
};
|
|
|
|
const getPrioriteSeverity = (priorite: string) => {
|
|
switch (priorite) {
|
|
case 'CRITIQUE': return 'danger';
|
|
case 'HAUTE': return 'warning';
|
|
case 'MOYENNE': return 'info';
|
|
case 'BASSE': return 'success';
|
|
default: return 'info';
|
|
}
|
|
};
|
|
|
|
const statutBodyTemplate = (rowData: ChantierDashboard) => (
|
|
<Tag value={rowData.statut} severity={getStatutSeverity(rowData.statut)} />
|
|
);
|
|
|
|
const prioriteBodyTemplate = (rowData: ChantierDashboard) => (
|
|
<Tag value={rowData.priorite} severity={getPrioriteSeverity(rowData.priorite)} />
|
|
);
|
|
|
|
const avancementBodyTemplate = (rowData: ChantierDashboard) => (
|
|
<div className="flex align-items-center">
|
|
<ProgressBar
|
|
value={rowData.avancement}
|
|
style={{ width: '100px', marginRight: '8px' }}
|
|
showValue={false}
|
|
/>
|
|
<span className="text-sm font-semibold">{rowData.avancement}%</span>
|
|
</div>
|
|
);
|
|
|
|
const budgetBodyTemplate = (rowData: ChantierDashboard) => {
|
|
const pourcentageUtilise = (rowData.coutReel / rowData.budget) * 100;
|
|
const couleur = pourcentageUtilise > 90 ? 'text-red-500' : pourcentageUtilise > 75 ? 'text-orange-500' : 'text-green-500';
|
|
|
|
return (
|
|
<div>
|
|
<div className="font-semibold">
|
|
{new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', notation: 'compact' }).format(rowData.budget)}
|
|
</div>
|
|
<div className={`text-sm ${couleur}`}>
|
|
{pourcentageUtilise.toFixed(1)}% utilisé
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const retardBodyTemplate = (rowData: ChantierDashboard) => {
|
|
if (rowData.retard === 0) {
|
|
return <Tag value="À l'heure" severity="success" />;
|
|
} else if (rowData.retard > 0) {
|
|
return <Tag value={`+${rowData.retard}j`} severity="danger" />;
|
|
} else {
|
|
return <Tag value={`${rowData.retard}j`} severity="info" />;
|
|
}
|
|
};
|
|
|
|
const actionBodyTemplate = (rowData: ChantierDashboard) => (
|
|
<div className="flex gap-2">
|
|
<Button
|
|
icon="pi pi-eye"
|
|
className="p-button-text p-button-sm"
|
|
tooltip="Voir détails"
|
|
onClick={() => router.push(`/chantiers/${rowData.id}`)}
|
|
/>
|
|
<Button
|
|
icon="pi pi-sitemap"
|
|
className="p-button-text p-button-sm"
|
|
tooltip="Gérer phases"
|
|
onClick={() => router.push(`/chantiers/${rowData.id}/phases`)}
|
|
/>
|
|
<Button
|
|
icon="pi pi-calendar"
|
|
className="p-button-text p-button-sm"
|
|
tooltip="Planning"
|
|
onClick={() => router.push(`/planning?chantier=${rowData.id}`)}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
// Calculs des métriques
|
|
const totalBudget = chantiers.reduce((sum, c) => sum + c.budget, 0);
|
|
const totalCoutReel = chantiers.reduce((sum, c) => sum + c.coutReel, 0);
|
|
const chantiersEnRetard = chantiers.filter(c => c.retard > 0).length;
|
|
const avancementMoyen = chantiers.length > 0 ?
|
|
chantiers.reduce((sum, c) => sum + c.avancement, 0) / chantiers.length : 0;
|
|
|
|
return (
|
|
<div className="grid">
|
|
<Toast ref={toast} />
|
|
|
|
{/* En-tête avec filtres */}
|
|
<div className="col-12">
|
|
<Card>
|
|
<div className="flex justify-content-between align-items-center mb-4">
|
|
<h2 className="text-2xl font-bold m-0">Dashboard Chantiers</h2>
|
|
<Button
|
|
label="Nouveau chantier"
|
|
icon="pi pi-plus"
|
|
onClick={() => router.push('/chantiers/nouveau')}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-3 align-items-center">
|
|
<div className="field">
|
|
<label htmlFor="period" className="font-semibold">Période</label>
|
|
<Dropdown
|
|
id="period"
|
|
value={selectedPeriod}
|
|
options={periodOptions}
|
|
onChange={(e) => setSelectedPeriod(e.value)}
|
|
className="w-full md:w-14rem"
|
|
/>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<label htmlFor="statut" className="font-semibold">Statut</label>
|
|
<Dropdown
|
|
id="statut"
|
|
value={selectedStatut}
|
|
options={statutOptions}
|
|
onChange={(e) => setSelectedStatut(e.value)}
|
|
className="w-full md:w-14rem"
|
|
/>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<label htmlFor="dateRange" className="font-semibold">Plage de dates</label>
|
|
<Calendar
|
|
id="dateRange"
|
|
value={dateRange}
|
|
onChange={(e) => setDateRange(e.value as Date[])}
|
|
selectionMode="range"
|
|
readOnlyInput
|
|
hideOnRangeSelection
|
|
className="w-full md:w-14rem"
|
|
placeholder="Sélectionner une période"
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
icon="pi pi-refresh"
|
|
className="p-button-outlined"
|
|
onClick={loadChantiers}
|
|
loading={loading}
|
|
tooltip="Actualiser"
|
|
/>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Métriques principales */}
|
|
<div className="col-12 lg:col-3 md:col-6">
|
|
<Card className="h-full">
|
|
<div className="flex justify-content-between mb-3">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">Total Chantiers</span>
|
|
<div className="text-900 font-medium text-xl">{chantiers.length}</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-building text-blue-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 lg:col-3 md:col-6">
|
|
<Card className="h-full">
|
|
<div className="flex justify-content-between mb-3">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">Budget Total</span>
|
|
<div className="text-900 font-medium text-xl">
|
|
{new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR', notation: 'compact' }).format(totalBudget)}
|
|
</div>
|
|
</div>
|
|
<div className="flex align-items-center justify-content-center bg-green-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
|
|
<i className="pi pi-euro text-green-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 lg:col-3 md:col-6">
|
|
<Card className="h-full">
|
|
<div className="flex justify-content-between mb-3">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">En Retard</span>
|
|
<div className="text-900 font-medium text-xl">{chantiersEnRetard}</div>
|
|
</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-exclamation-triangle text-orange-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 lg:col-3 md:col-6">
|
|
<Card className="h-full">
|
|
<div className="flex justify-content-between mb-3">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">Avancement Moyen</span>
|
|
<div className="text-900 font-medium text-xl">{avancementMoyen.toFixed(1)}%</div>
|
|
</div>
|
|
<div className="flex align-items-center justify-content-center bg-cyan-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
|
|
<i className="pi pi-chart-line text-cyan-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Graphique de répartition */}
|
|
<div className="col-12 lg:col-6">
|
|
<Card>
|
|
<h6>Répartition par Statut</h6>
|
|
<Chart type="doughnut" data={chartData} options={chartOptions} className="w-full md:w-30rem" />
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Indicateurs de performance */}
|
|
<div className="col-12 lg:col-6">
|
|
<Card>
|
|
<h6>Indicateurs de Performance</h6>
|
|
<div className="grid">
|
|
<div className="col-6">
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-green-500">
|
|
{((totalBudget - totalCoutReel) / totalBudget * 100).toFixed(1)}%
|
|
</div>
|
|
<div className="text-sm text-500">Économies réalisées</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-6">
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-blue-500">
|
|
{chantiers.filter(c => c.statut === 'EN_COURS').length}
|
|
</div>
|
|
<div className="text-sm text-500">Chantiers actifs</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-6">
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-purple-500">
|
|
{chantiers.reduce((sum, c) => sum + c.nombreEmployes, 0)}
|
|
</div>
|
|
<div className="text-sm text-500">Employés mobilisés</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-6">
|
|
<div className="text-center">
|
|
<div className="text-2xl font-bold text-orange-500">
|
|
{(chantiersEnRetard / chantiers.length * 100).toFixed(1)}%
|
|
</div>
|
|
<div className="text-sm text-500">Taux de retard</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Tableau des chantiers */}
|
|
<div className="col-12">
|
|
<Card>
|
|
<div className="flex justify-content-between align-items-center mb-4">
|
|
<h6>Liste des Chantiers ({chantiers.length})</h6>
|
|
<Badge value={`${chantiers.filter(c => c.statut === 'EN_COURS').length} actifs`} severity="success" />
|
|
</div>
|
|
|
|
<DataTable
|
|
value={chantiers}
|
|
loading={loading}
|
|
responsiveLayout="scroll"
|
|
paginator
|
|
rows={10}
|
|
rowsPerPageOptions={[5, 10, 25]}
|
|
emptyMessage="Aucun chantier trouvé"
|
|
sortMode="multiple"
|
|
>
|
|
<Column field="nom" header="Chantier" sortable />
|
|
<Column field="client" header="Client" sortable />
|
|
<Column field="statut" header="Statut" body={statutBodyTemplate} sortable />
|
|
<Column field="priorite" header="Priorité" body={prioriteBodyTemplate} sortable />
|
|
<Column field="avancement" header="Avancement" body={avancementBodyTemplate} sortable />
|
|
<Column field="budget" header="Budget" body={budgetBodyTemplate} sortable />
|
|
<Column field="retard" header="Retard" body={retardBodyTemplate} sortable />
|
|
<Column field="localisation" header="Localisation" sortable />
|
|
<Column header="Actions" body={actionBodyTemplate} style={{ width: '120px' }} />
|
|
</DataTable>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DashboardChantiers;
|