Fix: Corriger toutes les erreurs de build du frontend
- 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>
This commit is contained in:
dahoud
@@ -1,4 +1,6 @@
|
||||
'use client';
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Card } from 'primereact/card';
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
'use client';
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
|
||||
@@ -1,497 +1,499 @@
|
||||
'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 { Toast } from 'primereact/toast';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Panel } from 'primereact/panel';
|
||||
import { Chart } from 'primereact/chart';
|
||||
import { Timeline } from 'primereact/timeline';
|
||||
import { Message } from 'primereact/message';
|
||||
import { Page } from '@/types';
|
||||
import phaseChantierService from '@/services/phaseChantierService';
|
||||
import { PhaseChantier } from '@/types/btp-extended';
|
||||
|
||||
const PhasesEnRetardPage: Page = () => {
|
||||
const [phasesEnRetard, setPhasesEnRetard] = useState<PhaseChantier[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [statistiques, setStatistiques] = useState({
|
||||
total: 0,
|
||||
retardMoyen: 0,
|
||||
impactBudget: 0,
|
||||
phasesUrgentes: 0
|
||||
});
|
||||
const [chartData, setChartData] = useState<any>({});
|
||||
const [chartOptions, setChartOptions] = useState<any>({});
|
||||
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadPhasesEnRetard();
|
||||
initChart();
|
||||
}, []);
|
||||
|
||||
const loadPhasesEnRetard = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await phaseChantierService.getEnRetard();
|
||||
setPhasesEnRetard(data || []);
|
||||
|
||||
// Calculer les statistiques
|
||||
if (data && data.length > 0) {
|
||||
const retards = data.map(phase => phaseChantierService.calculateRetard(phase));
|
||||
const retardMoyen = retards.reduce((a, b) => a + b, 0) / retards.length;
|
||||
|
||||
const impactBudget = data.reduce((total, phase) => {
|
||||
const ecart = (phase.coutReel || 0) - (phase.budgetPrevu || 0);
|
||||
return total + (ecart > 0 ? ecart : 0);
|
||||
}, 0);
|
||||
|
||||
const phasesUrgentes = data.filter(phase =>
|
||||
phaseChantierService.calculateRetard(phase) > 30
|
||||
).length;
|
||||
|
||||
setStatistiques({
|
||||
total: data.length,
|
||||
retardMoyen: Math.round(retardMoyen),
|
||||
impactBudget,
|
||||
phasesUrgentes
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des phases en retard:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger les phases en retard',
|
||||
life: 3000
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = () => {
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
const textColor = documentStyle.getPropertyValue('--text-color');
|
||||
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
|
||||
const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
|
||||
|
||||
const data = {
|
||||
labels: ['1-7 jours', '8-15 jours', '16-30 jours', '> 30 jours'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Phases en retard',
|
||||
backgroundColor: ['#FFF3CD', '#FCF8E3', '#F8D7DA', '#D32F2F'],
|
||||
borderColor: ['#856404', '#856404', '#721C24', '#B71C1C'],
|
||||
data: [0, 0, 0, 0] // Sera calculé dynamiquement
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const options = {
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.6,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
setChartData(data);
|
||||
setChartOptions(options);
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: PhaseChantier) => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-play"
|
||||
rounded
|
||||
severity="warning"
|
||||
onClick={() => relancerPhase(rowData)}
|
||||
tooltip="Relancer la phase"
|
||||
size="small"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-calendar"
|
||||
rounded
|
||||
severity="info"
|
||||
onClick={() => replanifierPhase(rowData)}
|
||||
tooltip="Replanifier"
|
||||
size="small"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-exclamation-triangle"
|
||||
rounded
|
||||
severity="danger"
|
||||
onClick={() => escaladerPhase(rowData)}
|
||||
tooltip="Escalader"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const retardBodyTemplate = (rowData: PhaseChantier) => {
|
||||
const retard = phaseChantierService.calculateRetard(rowData);
|
||||
let severity: 'info' | 'warning' | 'danger' = 'info';
|
||||
|
||||
if (retard > 30) severity = 'danger';
|
||||
else if (retard > 15) severity = 'warning';
|
||||
|
||||
return (
|
||||
<Badge
|
||||
value={`${retard} jours`}
|
||||
severity={severity}
|
||||
size="large"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const impactBodyTemplate = (rowData: PhaseChantier) => {
|
||||
const budgetPrevu = rowData.budgetPrevu || 0;
|
||||
const coutReel = rowData.coutReel || 0;
|
||||
const ecart = coutReel - budgetPrevu;
|
||||
|
||||
if (ecart <= 0) return <Tag value="Budget respecté" severity="success" />;
|
||||
|
||||
const pourcentageEcart = budgetPrevu > 0 ? (ecart / budgetPrevu * 100) : 0;
|
||||
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<Tag
|
||||
value={`+${new Intl.NumberFormat('fr-FR', {
|
||||
style: 'currency',
|
||||
currency: 'EUR'
|
||||
}).format(ecart)}`}
|
||||
severity="danger"
|
||||
/>
|
||||
<small className="text-color-secondary">
|
||||
+{pourcentageEcart.toFixed(1)}%
|
||||
</small>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const prioriteBodyTemplate = (rowData: PhaseChantier) => {
|
||||
const retard = phaseChantierService.calculateRetard(rowData);
|
||||
const critique = rowData.critique;
|
||||
|
||||
let priorite = 'Normale';
|
||||
let severity: 'info' | 'warning' | 'danger' = 'info';
|
||||
|
||||
if (critique && retard > 15) {
|
||||
priorite = 'URGENTE';
|
||||
severity = 'danger';
|
||||
} else if (retard > 30) {
|
||||
priorite = 'Très haute';
|
||||
severity = 'danger';
|
||||
} else if (retard > 15) {
|
||||
priorite = 'Haute';
|
||||
severity = 'warning';
|
||||
}
|
||||
|
||||
return <Tag value={priorite} severity={severity} />;
|
||||
};
|
||||
|
||||
const responsableBodyTemplate = (rowData: PhaseChantier) => {
|
||||
return rowData.responsable ?
|
||||
`${rowData.responsable.prenom} ${rowData.responsable.nom}` :
|
||||
'Non assigné';
|
||||
};
|
||||
|
||||
const relancerPhase = async (phase: PhaseChantier) => {
|
||||
try {
|
||||
if (phase.id) {
|
||||
await phaseChantierService.resume(Number(phase.id));
|
||||
await loadPhasesEnRetard();
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Phase relancée avec succès',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Erreur lors de la relance',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const replanifierPhase = (phase: PhaseChantier) => {
|
||||
// TODO: Ouvrir un dialog de replanification
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Fonctionnalité',
|
||||
detail: 'Replanification à implémenter',
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const escaladerPhase = (phase: PhaseChantier) => {
|
||||
// TODO: Implémenter l'escalade (notification aux responsables)
|
||||
toast.current?.show({
|
||||
severity: 'warn',
|
||||
summary: 'Escalade',
|
||||
detail: `Phase ${phase.nom} escaladée vers la direction`,
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const exportData = () => {
|
||||
// TODO: Implémenter l'export des données
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Export',
|
||||
detail: 'Export en cours...',
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
label="Actualiser"
|
||||
icon="pi pi-refresh"
|
||||
onClick={loadPhasesEnRetard}
|
||||
/>
|
||||
<Button
|
||||
label="Exporter"
|
||||
icon="pi pi-download"
|
||||
severity="help"
|
||||
onClick={exportData}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<Tag
|
||||
value={`${phasesEnRetard.length} phases en retard`}
|
||||
severity="danger"
|
||||
icon="pi pi-exclamation-triangle"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Timeline des actions recommandées
|
||||
const actionsRecommandees = [
|
||||
{
|
||||
status: 'Immédiat',
|
||||
date: 'Aujourd\'hui',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
color: '#FF6B6B',
|
||||
description: `${statistiques.phasesUrgentes} phases critiques à traiter en urgence`
|
||||
},
|
||||
{
|
||||
status: 'Cette semaine',
|
||||
date: '7 jours',
|
||||
icon: 'pi pi-calendar',
|
||||
color: '#4ECDC4',
|
||||
description: 'Replanification des phases avec retard modéré'
|
||||
},
|
||||
{
|
||||
status: 'Ce mois',
|
||||
date: '30 jours',
|
||||
icon: 'pi pi-chart-line',
|
||||
color: '#45B7D1',
|
||||
description: 'Analyse des causes et mise en place d\'actions préventives'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Toast ref={toast} />
|
||||
|
||||
{/* Alerte si phases critiques */}
|
||||
{statistiques.phasesUrgentes > 0 && (
|
||||
<Message
|
||||
severity="error"
|
||||
text={`⚠️ ALERTE: ${statistiques.phasesUrgentes} phases critiques nécessitent une intervention immédiate!`}
|
||||
className="w-full mb-4"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Statistiques de retard */}
|
||||
<div className="grid mb-4">
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-red-500 mb-2">
|
||||
<i className="pi pi-exclamation-triangle mr-2"></i>
|
||||
{statistiques.total}
|
||||
</div>
|
||||
<div className="text-color-secondary">Phases en retard</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-orange-500 mb-2">
|
||||
{statistiques.retardMoyen}j
|
||||
</div>
|
||||
<div className="text-color-secondary">Retard moyen</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-red-600 mb-2">
|
||||
{new Intl.NumberFormat('fr-FR', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
notation: 'compact'
|
||||
}).format(statistiques.impactBudget)}
|
||||
</div>
|
||||
<div className="text-color-secondary">Impact budget</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-purple-500 mb-2">
|
||||
{statistiques.phasesUrgentes}
|
||||
</div>
|
||||
<div className="text-color-secondary">Phases urgentes</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid">
|
||||
{/* Liste des phases en retard */}
|
||||
<div className="col-12 lg:col-8">
|
||||
<Card title="Phases en Retard - Actions Requises">
|
||||
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
|
||||
|
||||
<DataTable
|
||||
value={phasesEnRetard}
|
||||
paginator
|
||||
rows={10}
|
||||
dataKey="id"
|
||||
loading={loading}
|
||||
emptyMessage="Aucune phase en retard (excellente nouvelle !)"
|
||||
className="datatable-responsive"
|
||||
>
|
||||
<Column field="nom" header="Phase" sortable style={{ minWidth: '12rem' }} />
|
||||
<Column
|
||||
header="Chantier"
|
||||
body={(rowData) => rowData.chantier?.nom || 'N/A'}
|
||||
sortable
|
||||
style={{ minWidth: '10rem' }}
|
||||
/>
|
||||
<Column
|
||||
header="Responsable"
|
||||
body={responsableBodyTemplate}
|
||||
style={{ minWidth: '10rem' }}
|
||||
/>
|
||||
<Column
|
||||
header="Retard"
|
||||
body={retardBodyTemplate}
|
||||
sortable
|
||||
style={{ minWidth: '8rem' }}
|
||||
/>
|
||||
<Column
|
||||
header="Priorité"
|
||||
body={prioriteBodyTemplate}
|
||||
style={{ minWidth: '8rem' }}
|
||||
/>
|
||||
<Column
|
||||
header="Impact Budget"
|
||||
body={impactBodyTemplate}
|
||||
style={{ minWidth: '10rem' }}
|
||||
/>
|
||||
<Column
|
||||
body={actionBodyTemplate}
|
||||
exportable={false}
|
||||
style={{ minWidth: '12rem' }}
|
||||
header="Actions"
|
||||
/>
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Actions recommandées */}
|
||||
<div className="col-12 lg:col-4">
|
||||
<Card title="Plan d'Action Recommandé">
|
||||
<Timeline
|
||||
value={actionsRecommandees}
|
||||
align="left"
|
||||
className="customized-timeline"
|
||||
marker={(item) => (
|
||||
<span
|
||||
className="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1"
|
||||
style={{ backgroundColor: item.color }}
|
||||
>
|
||||
<i className={item.icon}></i>
|
||||
</span>
|
||||
)}
|
||||
content={(item) => (
|
||||
<Card className="mt-3">
|
||||
<div className="flex flex-column">
|
||||
<div className="text-lg font-bold mb-2" style={{ color: item.color }}>
|
||||
{item.status}
|
||||
</div>
|
||||
<div className="text-sm text-color-secondary mb-2">
|
||||
{item.date}
|
||||
</div>
|
||||
<div className="text-color">
|
||||
{item.description}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title="Répartition des Retards" className="mt-4">
|
||||
<Chart type="doughnut" data={chartData} options={chartOptions} style={{ height: '300px' }} />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PhasesEnRetardPage;
|
||||
'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 { Toast } from 'primereact/toast';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Panel } from 'primereact/panel';
|
||||
import { Chart } from 'primereact/chart';
|
||||
import { Timeline } from 'primereact/timeline';
|
||||
import { Message } from 'primereact/message';
|
||||
import { Page } from '@/types';
|
||||
import phaseChantierService from '@/services/phaseChantierService';
|
||||
import { PhaseChantier } from '@/types/btp-extended';
|
||||
|
||||
const PhasesEnRetardPage: Page = () => {
|
||||
const [phasesEnRetard, setPhasesEnRetard] = useState<PhaseChantier[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [statistiques, setStatistiques] = useState({
|
||||
total: 0,
|
||||
retardMoyen: 0,
|
||||
impactBudget: 0,
|
||||
phasesUrgentes: 0
|
||||
});
|
||||
const [chartData, setChartData] = useState<any>({});
|
||||
const [chartOptions, setChartOptions] = useState<any>({});
|
||||
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadPhasesEnRetard();
|
||||
initChart();
|
||||
}, []);
|
||||
|
||||
const loadPhasesEnRetard = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await phaseChantierService.getEnRetard();
|
||||
setPhasesEnRetard(data || []);
|
||||
|
||||
// Calculer les statistiques
|
||||
if (data && data.length > 0) {
|
||||
const retards = data.map(phase => phaseChantierService.calculateRetard(phase));
|
||||
const retardMoyen = retards.reduce((a, b) => a + b, 0) / retards.length;
|
||||
|
||||
const impactBudget = data.reduce((total, phase) => {
|
||||
const ecart = (phase.coutReel || 0) - (phase.budgetPrevu || 0);
|
||||
return total + (ecart > 0 ? ecart : 0);
|
||||
}, 0);
|
||||
|
||||
const phasesUrgentes = data.filter(phase =>
|
||||
phaseChantierService.calculateRetard(phase) > 30
|
||||
).length;
|
||||
|
||||
setStatistiques({
|
||||
total: data.length,
|
||||
retardMoyen: Math.round(retardMoyen),
|
||||
impactBudget,
|
||||
phasesUrgentes
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des phases en retard:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger les phases en retard',
|
||||
life: 3000
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const initChart = () => {
|
||||
const documentStyle = getComputedStyle(document.documentElement);
|
||||
const textColor = documentStyle.getPropertyValue('--text-color');
|
||||
const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
|
||||
const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
|
||||
|
||||
const data = {
|
||||
labels: ['1-7 jours', '8-15 jours', '16-30 jours', '> 30 jours'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Phases en retard',
|
||||
backgroundColor: ['#FFF3CD', '#FCF8E3', '#F8D7DA', '#D32F2F'],
|
||||
borderColor: ['#856404', '#856404', '#721C24', '#B71C1C'],
|
||||
data: [0, 0, 0, 0] // Sera calculé dynamiquement
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const options = {
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.6,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
fontColor: textColor
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: textColorSecondary
|
||||
},
|
||||
grid: {
|
||||
color: surfaceBorder
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
setChartData(data);
|
||||
setChartOptions(options);
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: PhaseChantier) => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-play"
|
||||
rounded
|
||||
severity="warning"
|
||||
onClick={() => relancerPhase(rowData)}
|
||||
tooltip="Relancer la phase"
|
||||
size="small"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-calendar"
|
||||
rounded
|
||||
severity="info"
|
||||
onClick={() => replanifierPhase(rowData)}
|
||||
tooltip="Replanifier"
|
||||
size="small"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-exclamation-triangle"
|
||||
rounded
|
||||
severity="danger"
|
||||
onClick={() => escaladerPhase(rowData)}
|
||||
tooltip="Escalader"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const retardBodyTemplate = (rowData: PhaseChantier) => {
|
||||
const retard = phaseChantierService.calculateRetard(rowData);
|
||||
let severity: 'info' | 'warning' | 'danger' = 'info';
|
||||
|
||||
if (retard > 30) severity = 'danger';
|
||||
else if (retard > 15) severity = 'warning';
|
||||
|
||||
return (
|
||||
<Badge
|
||||
value={`${retard} jours`}
|
||||
severity={severity}
|
||||
size="large"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const impactBodyTemplate = (rowData: PhaseChantier) => {
|
||||
const budgetPrevu = rowData.budgetPrevu || 0;
|
||||
const coutReel = rowData.coutReel || 0;
|
||||
const ecart = coutReel - budgetPrevu;
|
||||
|
||||
if (ecart <= 0) return <Tag value="Budget respecté" severity="success" />;
|
||||
|
||||
const pourcentageEcart = budgetPrevu > 0 ? (ecart / budgetPrevu * 100) : 0;
|
||||
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<Tag
|
||||
value={`+${new Intl.NumberFormat('fr-FR', {
|
||||
style: 'currency',
|
||||
currency: 'EUR'
|
||||
}).format(ecart)}`}
|
||||
severity="danger"
|
||||
/>
|
||||
<small className="text-color-secondary">
|
||||
+{pourcentageEcart.toFixed(1)}%
|
||||
</small>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const prioriteBodyTemplate = (rowData: PhaseChantier) => {
|
||||
const retard = phaseChantierService.calculateRetard(rowData);
|
||||
const critique = rowData.critique;
|
||||
|
||||
let priorite = 'Normale';
|
||||
let severity: 'info' | 'warning' | 'danger' = 'info';
|
||||
|
||||
if (critique && retard > 15) {
|
||||
priorite = 'URGENTE';
|
||||
severity = 'danger';
|
||||
} else if (retard > 30) {
|
||||
priorite = 'Très haute';
|
||||
severity = 'danger';
|
||||
} else if (retard > 15) {
|
||||
priorite = 'Haute';
|
||||
severity = 'warning';
|
||||
}
|
||||
|
||||
return <Tag value={priorite} severity={severity} />;
|
||||
};
|
||||
|
||||
const responsableBodyTemplate = (rowData: PhaseChantier) => {
|
||||
return rowData.responsable ?
|
||||
`${rowData.responsable.prenom} ${rowData.responsable.nom}` :
|
||||
'Non assigné';
|
||||
};
|
||||
|
||||
const relancerPhase = async (phase: PhaseChantier) => {
|
||||
try {
|
||||
if (phase.id) {
|
||||
await phaseChantierService.resume(Number(phase.id));
|
||||
await loadPhasesEnRetard();
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Phase relancée avec succès',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Erreur lors de la relance',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const replanifierPhase = (phase: PhaseChantier) => {
|
||||
// TODO: Ouvrir un dialog de replanification
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Fonctionnalité',
|
||||
detail: 'Replanification à implémenter',
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const escaladerPhase = (phase: PhaseChantier) => {
|
||||
// TODO: Implémenter l'escalade (notification aux responsables)
|
||||
toast.current?.show({
|
||||
severity: 'warn',
|
||||
summary: 'Escalade',
|
||||
detail: `Phase ${phase.nom} escaladée vers la direction`,
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const exportData = () => {
|
||||
// TODO: Implémenter l'export des données
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Export',
|
||||
detail: 'Export en cours...',
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
label="Actualiser"
|
||||
icon="pi pi-refresh"
|
||||
onClick={loadPhasesEnRetard}
|
||||
/>
|
||||
<Button
|
||||
label="Exporter"
|
||||
icon="pi pi-download"
|
||||
severity="help"
|
||||
onClick={exportData}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<Tag
|
||||
value={`${phasesEnRetard.length} phases en retard`}
|
||||
severity="danger"
|
||||
icon="pi pi-exclamation-triangle"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Timeline des actions recommandées
|
||||
const actionsRecommandees = [
|
||||
{
|
||||
status: 'Immédiat',
|
||||
date: 'Aujourd\'hui',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
color: '#FF6B6B',
|
||||
description: `${statistiques.phasesUrgentes} phases critiques à traiter en urgence`
|
||||
},
|
||||
{
|
||||
status: 'Cette semaine',
|
||||
date: '7 jours',
|
||||
icon: 'pi pi-calendar',
|
||||
color: '#4ECDC4',
|
||||
description: 'Replanification des phases avec retard modéré'
|
||||
},
|
||||
{
|
||||
status: 'Ce mois',
|
||||
date: '30 jours',
|
||||
icon: 'pi pi-chart-line',
|
||||
color: '#45B7D1',
|
||||
description: 'Analyse des causes et mise en place d\'actions préventives'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Toast ref={toast} />
|
||||
|
||||
{/* Alerte si phases critiques */}
|
||||
{statistiques.phasesUrgentes > 0 && (
|
||||
<Message
|
||||
severity="error"
|
||||
text={`⚠️ ALERTE: ${statistiques.phasesUrgentes} phases critiques nécessitent une intervention immédiate!`}
|
||||
className="w-full mb-4"
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Statistiques de retard */}
|
||||
<div className="grid mb-4">
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-red-500 mb-2">
|
||||
<i className="pi pi-exclamation-triangle mr-2"></i>
|
||||
{statistiques.total}
|
||||
</div>
|
||||
<div className="text-color-secondary">Phases en retard</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-orange-500 mb-2">
|
||||
{statistiques.retardMoyen}j
|
||||
</div>
|
||||
<div className="text-color-secondary">Retard moyen</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-red-600 mb-2">
|
||||
{new Intl.NumberFormat('fr-FR', {
|
||||
style: 'currency',
|
||||
currency: 'EUR',
|
||||
notation: 'compact'
|
||||
}).format(statistiques.impactBudget)}
|
||||
</div>
|
||||
<div className="text-color-secondary">Impact budget</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<div className="text-3xl font-bold text-purple-500 mb-2">
|
||||
{statistiques.phasesUrgentes}
|
||||
</div>
|
||||
<div className="text-color-secondary">Phases urgentes</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid">
|
||||
{/* Liste des phases en retard */}
|
||||
<div className="col-12 lg:col-8">
|
||||
<Card title="Phases en Retard - Actions Requises">
|
||||
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
|
||||
|
||||
<DataTable
|
||||
value={phasesEnRetard}
|
||||
paginator
|
||||
rows={10}
|
||||
dataKey="id"
|
||||
loading={loading}
|
||||
emptyMessage="Aucune phase en retard (excellente nouvelle !)"
|
||||
className="datatable-responsive"
|
||||
>
|
||||
<Column field="nom" header="Phase" sortable style={{ minWidth: '12rem' }} />
|
||||
<Column
|
||||
header="Chantier"
|
||||
body={(rowData) => rowData.chantier?.nom || 'N/A'}
|
||||
sortable
|
||||
style={{ minWidth: '10rem' }}
|
||||
/>
|
||||
<Column
|
||||
header="Responsable"
|
||||
body={responsableBodyTemplate}
|
||||
style={{ minWidth: '10rem' }}
|
||||
/>
|
||||
<Column
|
||||
header="Retard"
|
||||
body={retardBodyTemplate}
|
||||
sortable
|
||||
style={{ minWidth: '8rem' }}
|
||||
/>
|
||||
<Column
|
||||
header="Priorité"
|
||||
body={prioriteBodyTemplate}
|
||||
style={{ minWidth: '8rem' }}
|
||||
/>
|
||||
<Column
|
||||
header="Impact Budget"
|
||||
body={impactBodyTemplate}
|
||||
style={{ minWidth: '10rem' }}
|
||||
/>
|
||||
<Column
|
||||
body={actionBodyTemplate}
|
||||
exportable={false}
|
||||
style={{ minWidth: '12rem' }}
|
||||
header="Actions"
|
||||
/>
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Actions recommandées */}
|
||||
<div className="col-12 lg:col-4">
|
||||
<Card title="Plan d'Action Recommandé">
|
||||
<Timeline
|
||||
value={actionsRecommandees}
|
||||
align="left"
|
||||
className="customized-timeline"
|
||||
marker={(item) => (
|
||||
<span
|
||||
className="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1"
|
||||
style={{ backgroundColor: item.color }}
|
||||
>
|
||||
<i className={item.icon}></i>
|
||||
</span>
|
||||
)}
|
||||
content={(item) => (
|
||||
<Card className="mt-3">
|
||||
<div className="flex flex-column">
|
||||
<div className="text-lg font-bold mb-2" style={{ color: item.color }}>
|
||||
{item.status}
|
||||
</div>
|
||||
<div className="text-sm text-color-secondary mb-2">
|
||||
{item.date}
|
||||
</div>
|
||||
<div className="text-color">
|
||||
{item.description}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title="Répartition des Retards" className="mt-4">
|
||||
<Chart type="doughnut" data={chartData} options={chartOptions} style={{ height: '300px' }} />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PhasesEnRetardPage;
|
||||
|
||||
Reference in New Issue
Block a user