566 lines
25 KiB
TypeScript
566 lines
25 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Card } from 'primereact/card';
|
|
import { Button } from 'primereact/button';
|
|
import { Calendar } from 'primereact/calendar';
|
|
import { Dropdown } from 'primereact/dropdown';
|
|
import { Toolbar } from 'primereact/toolbar';
|
|
import { Badge } from 'primereact/badge';
|
|
import { Tag } from 'primereact/tag';
|
|
import { Dialog } from 'primereact/dialog';
|
|
import { DataTable } from 'primereact/datatable';
|
|
import { Column } from 'primereact/column';
|
|
import { useRouter } from 'next/navigation';
|
|
import { apiClient } from '../../../../services/api-client';
|
|
|
|
interface EvenementMaintenance {
|
|
id: number;
|
|
title: string;
|
|
start: Date;
|
|
end?: Date;
|
|
type: 'PREVENTIVE' | 'CORRECTIVE' | 'PLANIFIEE' | 'URGENTE';
|
|
statut: 'PLANIFIEE' | 'EN_COURS' | 'TERMINEE' | 'ANNULEE';
|
|
priorite: 'BASSE' | 'NORMALE' | 'HAUTE' | 'CRITIQUE';
|
|
materielNom: string;
|
|
technicienNom?: string;
|
|
description: string;
|
|
dureeEstimee: number;
|
|
color: string;
|
|
}
|
|
|
|
interface VueCalendrier {
|
|
date: Date;
|
|
evenements: EvenementMaintenance[];
|
|
conflits: Array<{
|
|
technicienId: number;
|
|
technicienNom: string;
|
|
maintenances: EvenementMaintenance[];
|
|
}>;
|
|
}
|
|
|
|
const CalendrierMaintenancePage = () => {
|
|
const [vueCalendrier, setVueCalendrier] = useState<VueCalendrier>({
|
|
date: new Date(),
|
|
evenements: [],
|
|
conflits: []
|
|
});
|
|
const [loading, setLoading] = useState(true);
|
|
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
|
|
const [filterType, setFilterType] = useState<string | null>(null);
|
|
const [filterTechnicien, setFilterTechnicien] = useState<string | null>(null);
|
|
const [detailDialog, setDetailDialog] = useState(false);
|
|
const [selectedEvenement, setSelectedEvenement] = useState<EvenementMaintenance | null>(null);
|
|
const [techniciens, setTechniciens] = useState<any[]>([]);
|
|
const [vueMode, setVueMode] = useState<'mois' | 'semaine' | 'jour'>('mois');
|
|
const router = useRouter();
|
|
|
|
const typeOptions = [
|
|
{ label: 'Tous', value: null },
|
|
{ label: 'Préventive', value: 'PREVENTIVE' },
|
|
{ label: 'Corrective', value: 'CORRECTIVE' },
|
|
{ label: 'Planifiée', value: 'PLANIFIEE' },
|
|
{ label: 'Urgente', value: 'URGENTE' }
|
|
];
|
|
|
|
const vueModeOptions = [
|
|
{ label: 'Mois', value: 'mois' },
|
|
{ label: 'Semaine', value: 'semaine' },
|
|
{ label: 'Jour', value: 'jour' }
|
|
];
|
|
|
|
useEffect(() => {
|
|
loadCalendrierMaintenance();
|
|
loadTechniciens();
|
|
}, [selectedDate, filterType, filterTechnicien, vueMode]);
|
|
|
|
const loadCalendrierMaintenance = async () => {
|
|
try {
|
|
setLoading(true);
|
|
console.log('🔄 Chargement du calendrier de maintenance...');
|
|
|
|
const params = new URLSearchParams();
|
|
params.append('date', selectedDate.toISOString().split('T')[0]);
|
|
params.append('vue', vueMode);
|
|
if (filterType) params.append('type', filterType);
|
|
if (filterTechnicien) params.append('technicienId', filterTechnicien);
|
|
|
|
const response = await apiClient.get(`/api/maintenances/calendrier?${params.toString()}`);
|
|
console.log('✅ Calendrier chargé:', response.data);
|
|
|
|
// Transformer les données pour le calendrier
|
|
const evenements = response.data.maintenances?.map((m: any) => ({
|
|
...m,
|
|
start: new Date(m.datePlanifiee),
|
|
end: m.dateFin ? new Date(m.dateFin) : new Date(new Date(m.datePlanifiee).getTime() + m.dureeEstimee * 60 * 60 * 1000),
|
|
title: `${m.materielNom} - ${m.typeMaintenance}`,
|
|
color: getTypeColor(m.typeMaintenance, m.statut)
|
|
})) || [];
|
|
|
|
setVueCalendrier({
|
|
date: selectedDate,
|
|
evenements,
|
|
conflits: response.data.conflits || []
|
|
});
|
|
} catch (error) {
|
|
console.error('❌ Erreur lors du chargement du calendrier:', error);
|
|
setVueCalendrier({ date: selectedDate, evenements: [], conflits: [] });
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadTechniciens = async () => {
|
|
try {
|
|
const response = await apiClient.get('/api/employes/techniciens');
|
|
setTechniciens(response.data || []);
|
|
} catch (error) {
|
|
console.error('❌ Erreur lors du chargement des techniciens:', error);
|
|
}
|
|
};
|
|
|
|
const getTypeColor = (type: string, statut: string) => {
|
|
if (statut === 'TERMINEE') return '#10b981'; // vert
|
|
if (statut === 'ANNULEE') return '#6b7280'; // gris
|
|
|
|
switch (type) {
|
|
case 'PREVENTIVE': return '#3b82f6'; // bleu
|
|
case 'CORRECTIVE': return '#f59e0b'; // orange
|
|
case 'PLANIFIEE': return '#8b5cf6'; // violet
|
|
case 'URGENTE': return '#ef4444'; // rouge
|
|
default: return '#6b7280';
|
|
}
|
|
};
|
|
|
|
const getStatutSeverity = (statut: string) => {
|
|
switch (statut) {
|
|
case 'PLANIFIEE': return 'info';
|
|
case 'EN_COURS': return 'warning';
|
|
case 'TERMINEE': return 'success';
|
|
case 'ANNULEE': return 'danger';
|
|
default: return 'secondary';
|
|
}
|
|
};
|
|
|
|
const getTypeSeverity = (type: string) => {
|
|
switch (type) {
|
|
case 'PREVENTIVE': return 'info';
|
|
case 'CORRECTIVE': return 'warning';
|
|
case 'PLANIFIEE': return 'success';
|
|
case 'URGENTE': return 'danger';
|
|
default: return 'secondary';
|
|
}
|
|
};
|
|
|
|
const ouvrirDetail = (evenement: EvenementMaintenance) => {
|
|
setSelectedEvenement(evenement);
|
|
setDetailDialog(true);
|
|
};
|
|
|
|
const planifierMaintenance = () => {
|
|
router.push(`/maintenance/nouveau?date=${selectedDate.toISOString().split('T')[0]}`);
|
|
};
|
|
|
|
const resoudreConflit = async (conflitId: number) => {
|
|
try {
|
|
await apiClient.post(`/api/maintenances/conflits/${conflitId}/resoudre`);
|
|
console.log('✅ Conflit résolu');
|
|
loadCalendrierMaintenance();
|
|
} catch (error) {
|
|
console.error('❌ Erreur lors de la résolution du conflit:', error);
|
|
}
|
|
};
|
|
|
|
const genererJoursCalendrier = () => {
|
|
const debut = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), 1);
|
|
const fin = new Date(selectedDate.getFullYear(), selectedDate.getMonth() + 1, 0);
|
|
const jours = [];
|
|
|
|
// Ajouter les jours du mois précédent pour compléter la première semaine
|
|
const premierJourSemaine = debut.getDay();
|
|
for (let i = premierJourSemaine - 1; i >= 0; i--) {
|
|
const jour = new Date(debut);
|
|
jour.setDate(jour.getDate() - i - 1);
|
|
jours.push(jour);
|
|
}
|
|
|
|
// Ajouter tous les jours du mois
|
|
for (let jour = 1; jour <= fin.getDate(); jour++) {
|
|
jours.push(new Date(selectedDate.getFullYear(), selectedDate.getMonth(), jour));
|
|
}
|
|
|
|
// Ajouter les jours du mois suivant pour compléter la dernière semaine
|
|
const dernierJourSemaine = fin.getDay();
|
|
for (let i = 1; i <= 6 - dernierJourSemaine; i++) {
|
|
const jour = new Date(fin);
|
|
jour.setDate(jour.getDate() + i);
|
|
jours.push(jour);
|
|
}
|
|
|
|
return jours;
|
|
};
|
|
|
|
const getEvenementsJour = (jour: Date) => {
|
|
return vueCalendrier.evenements.filter(evt => {
|
|
const dateEvt = new Date(evt.start);
|
|
return dateEvt.toDateString() === jour.toDateString();
|
|
});
|
|
};
|
|
|
|
const leftToolbarTemplate = () => {
|
|
return (
|
|
<div className="flex flex-wrap gap-2">
|
|
<Button
|
|
label="Retour Maintenance"
|
|
icon="pi pi-arrow-left"
|
|
className="p-button-outlined"
|
|
onClick={() => router.push('/maintenance')}
|
|
/>
|
|
<Button
|
|
label="Nouvelle Maintenance"
|
|
icon="pi pi-plus"
|
|
className="p-button-success"
|
|
onClick={planifierMaintenance}
|
|
/>
|
|
<Button
|
|
label="Optimiser Planning"
|
|
icon="pi pi-cog"
|
|
className="p-button-info"
|
|
onClick={() => router.push('/maintenance/optimiser-planning')}
|
|
/>
|
|
<Button
|
|
label="Exporter"
|
|
icon="pi pi-download"
|
|
className="p-button-secondary"
|
|
onClick={() => router.push('/maintenance/export-calendrier')}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const rightToolbarTemplate = () => {
|
|
return (
|
|
<div className="flex gap-2">
|
|
<Dropdown
|
|
value={vueMode}
|
|
options={vueModeOptions}
|
|
onChange={(e) => setVueMode(e.value)}
|
|
placeholder="Vue"
|
|
/>
|
|
<Button
|
|
icon="pi pi-chevron-left"
|
|
className="p-button-outlined"
|
|
onClick={() => {
|
|
const nouvellDate = new Date(selectedDate);
|
|
if (vueMode === 'mois') {
|
|
nouvellDate.setMonth(nouvellDate.getMonth() - 1);
|
|
} else if (vueMode === 'semaine') {
|
|
nouvellDate.setDate(nouvellDate.getDate() - 7);
|
|
} else {
|
|
nouvellDate.setDate(nouvellDate.getDate() - 1);
|
|
}
|
|
setSelectedDate(nouvellDate);
|
|
}}
|
|
/>
|
|
<Button
|
|
label="Aujourd'hui"
|
|
className="p-button-outlined"
|
|
onClick={() => setSelectedDate(new Date())}
|
|
/>
|
|
<Button
|
|
icon="pi pi-chevron-right"
|
|
className="p-button-outlined"
|
|
onClick={() => {
|
|
const nouvellDate = new Date(selectedDate);
|
|
if (vueMode === 'mois') {
|
|
nouvellDate.setMonth(nouvellDate.getMonth() + 1);
|
|
} else if (vueMode === 'semaine') {
|
|
nouvellDate.setDate(nouvellDate.getDate() + 7);
|
|
} else {
|
|
nouvellDate.setDate(nouvellDate.getDate() + 1);
|
|
}
|
|
setSelectedDate(nouvellDate);
|
|
}}
|
|
/>
|
|
<Button
|
|
icon="pi pi-refresh"
|
|
className="p-button-outlined"
|
|
onClick={loadCalendrierMaintenance}
|
|
tooltip="Actualiser"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const conflitBodyTemplate = (rowData: any) => {
|
|
return (
|
|
<div className="flex gap-2">
|
|
<Button
|
|
label="Résoudre"
|
|
icon="pi pi-check"
|
|
className="p-button-success p-button-sm"
|
|
onClick={() => resoudreConflit(rowData.id)}
|
|
/>
|
|
<Button
|
|
label="Reporter"
|
|
icon="pi pi-calendar"
|
|
className="p-button-warning p-button-sm"
|
|
onClick={() => router.push(`/maintenance/reporter/${rowData.id}`)}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="grid">
|
|
<div className="col-12">
|
|
<Toolbar
|
|
className="mb-4"
|
|
left={leftToolbarTemplate}
|
|
right={rightToolbarTemplate}
|
|
/>
|
|
</div>
|
|
|
|
{/* Filtres */}
|
|
<div className="col-12">
|
|
<Card className="mb-4">
|
|
<div className="grid">
|
|
<div className="col-12 md:col-3">
|
|
<label className="font-medium mb-2 block">Type de maintenance</label>
|
|
<Dropdown
|
|
value={filterType}
|
|
options={typeOptions}
|
|
onChange={(e) => setFilterType(e.value)}
|
|
placeholder="Tous les types"
|
|
/>
|
|
</div>
|
|
<div className="col-12 md:col-3">
|
|
<label className="font-medium mb-2 block">Technicien</label>
|
|
<Dropdown
|
|
value={filterTechnicien}
|
|
options={techniciens}
|
|
onChange={(e) => setFilterTechnicien(e.value)}
|
|
optionLabel="nom"
|
|
optionValue="id"
|
|
placeholder="Tous les techniciens"
|
|
filter
|
|
/>
|
|
</div>
|
|
<div className="col-12 md:col-3">
|
|
<label className="font-medium mb-2 block">Date</label>
|
|
<Calendar
|
|
value={selectedDate}
|
|
onChange={(e) => setSelectedDate(e.value as Date)}
|
|
showIcon
|
|
dateFormat="dd/mm/yy"
|
|
placeholder="Sélectionner une date"
|
|
/>
|
|
</div>
|
|
<div className="col-12 md:col-3">
|
|
<label className="font-medium mb-2 block">Actions</label>
|
|
<Button
|
|
label="Réinitialiser"
|
|
icon="pi pi-filter-slash"
|
|
className="p-button-outlined w-full"
|
|
onClick={() => {
|
|
setFilterType(null);
|
|
setFilterTechnicien(null);
|
|
setSelectedDate(new Date());
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Calendrier */}
|
|
<div className="col-12 lg:col-8">
|
|
<Card title={`Calendrier de Maintenance - ${selectedDate.toLocaleDateString('fr-FR', { month: 'long', year: 'numeric' })}`}>
|
|
{vueMode === 'mois' && (
|
|
<div className="grid">
|
|
{/* En-têtes des jours */}
|
|
{['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'].map(jour => (
|
|
<div key={jour} className="col-12 md:col text-center font-medium p-2 bg-gray-100">
|
|
{jour}
|
|
</div>
|
|
))}
|
|
|
|
{/* Jours du calendrier */}
|
|
{genererJoursCalendrier().map((jour, index) => {
|
|
const evenementsJour = getEvenementsJour(jour);
|
|
const estAujourdhui = jour.toDateString() === new Date().toDateString();
|
|
const estMoisCourant = jour.getMonth() === selectedDate.getMonth();
|
|
|
|
return (
|
|
<div
|
|
key={index}
|
|
className={`col-12 md:col border-1 border-gray-200 p-2 min-h-6rem cursor-pointer
|
|
${estAujourdhui ? 'bg-blue-50' : ''}
|
|
${!estMoisCourant ? 'text-gray-400' : ''}
|
|
`}
|
|
onClick={() => setSelectedDate(jour)}
|
|
>
|
|
<div className={`font-medium mb-1 ${estAujourdhui ? 'text-blue-600' : ''}`}>
|
|
{jour.getDate()}
|
|
</div>
|
|
<div className="flex flex-column gap-1">
|
|
{evenementsJour.slice(0, 3).map(evt => (
|
|
<div
|
|
key={evt.id}
|
|
className="text-xs p-1 border-round cursor-pointer"
|
|
style={{ backgroundColor: evt.color, color: 'white' }}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
ouvrirDetail(evt);
|
|
}}
|
|
>
|
|
{evt.title.length > 20 ? `${evt.title.substring(0, 20)}...` : evt.title}
|
|
</div>
|
|
))}
|
|
{evenementsJour.length > 3 && (
|
|
<div className="text-xs text-500">
|
|
+{evenementsJour.length - 3} autres
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{vueMode === 'jour' && (
|
|
<div>
|
|
<h3>{selectedDate.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' })}</h3>
|
|
<div className="flex flex-column gap-2">
|
|
{getEvenementsJour(selectedDate).map(evt => (
|
|
<div
|
|
key={evt.id}
|
|
className="p-3 border-round cursor-pointer"
|
|
style={{ backgroundColor: evt.color + '20', borderLeft: `4px solid ${evt.color}` }}
|
|
onClick={() => ouvrirDetail(evt)}
|
|
>
|
|
<div className="flex justify-content-between align-items-center">
|
|
<div>
|
|
<div className="font-medium">{evt.title}</div>
|
|
<div className="text-sm text-500">{evt.description}</div>
|
|
<div className="text-xs text-500 mt-1">
|
|
{evt.start.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}
|
|
{evt.end && ` - ${evt.end.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}`}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-column gap-1">
|
|
<Tag value={evt.type} severity={getTypeSeverity(evt.type)} />
|
|
<Tag value={evt.statut} severity={getStatutSeverity(evt.statut)} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{getEvenementsJour(selectedDate).length === 0 && (
|
|
<div className="text-center text-500 p-4">
|
|
Aucune maintenance planifiée pour cette date
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Panneau latéral */}
|
|
<div className="col-12 lg:col-4">
|
|
{/* Conflits */}
|
|
{vueCalendrier.conflits.length > 0 && (
|
|
<Card title="⚠️ Conflits de Planning" className="mb-4">
|
|
<DataTable value={vueCalendrier.conflits} responsiveLayout="scroll">
|
|
<Column field="technicienNom" header="Technicien" />
|
|
<Column
|
|
field="maintenances"
|
|
header="Conflits"
|
|
body={(rowData) => <Badge value={rowData.maintenances.length} severity="danger" />}
|
|
/>
|
|
<Column body={conflitBodyTemplate} header="Actions" />
|
|
</DataTable>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Statistiques */}
|
|
<Card title="📊 Statistiques">
|
|
<div className="flex flex-column gap-3">
|
|
<div className="flex justify-content-between">
|
|
<span>Total maintenances:</span>
|
|
<Badge value={vueCalendrier.evenements.length} severity="info" />
|
|
</div>
|
|
<div className="flex justify-content-between">
|
|
<span>Urgentes:</span>
|
|
<Badge value={vueCalendrier.evenements.filter(e => e.type === 'URGENTE').length} severity="danger" />
|
|
</div>
|
|
<div className="flex justify-content-between">
|
|
<span>Préventives:</span>
|
|
<Badge value={vueCalendrier.evenements.filter(e => e.type === 'PREVENTIVE').length} severity="info" />
|
|
</div>
|
|
<div className="flex justify-content-between">
|
|
<span>En cours:</span>
|
|
<Badge value={vueCalendrier.evenements.filter(e => e.statut === 'EN_COURS').length} severity="warning" />
|
|
</div>
|
|
<div className="flex justify-content-between">
|
|
<span>Terminées:</span>
|
|
<Badge value={vueCalendrier.evenements.filter(e => e.statut === 'TERMINEE').length} severity="success" />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Dialog Détail Événement */}
|
|
<Dialog
|
|
visible={detailDialog}
|
|
style={{ width: '50vw' }}
|
|
header="Détail de la Maintenance"
|
|
modal
|
|
onHide={() => setDetailDialog(false)}
|
|
footer={
|
|
<div>
|
|
<Button
|
|
label="Fermer"
|
|
icon="pi pi-times"
|
|
className="p-button-outlined"
|
|
onClick={() => setDetailDialog(false)}
|
|
/>
|
|
<Button
|
|
label="Voir Détails"
|
|
icon="pi pi-eye"
|
|
className="p-button-info"
|
|
onClick={() => {
|
|
if (selectedEvenement) {
|
|
router.push(`/maintenance/${selectedEvenement.id}`);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
}
|
|
>
|
|
{selectedEvenement && (
|
|
<div className="grid">
|
|
<div className="col-12">
|
|
<h4>{selectedEvenement.title}</h4>
|
|
<div className="flex gap-2 mb-3">
|
|
<Tag value={selectedEvenement.type} severity={getTypeSeverity(selectedEvenement.type)} />
|
|
<Tag value={selectedEvenement.statut} severity={getStatutSeverity(selectedEvenement.statut)} />
|
|
</div>
|
|
</div>
|
|
<div className="col-12">
|
|
<p><strong>Matériel:</strong> {selectedEvenement.materielNom}</p>
|
|
<p><strong>Technicien:</strong> {selectedEvenement.technicienNom || 'Non assigné'}</p>
|
|
<p><strong>Date:</strong> {selectedEvenement.start.toLocaleDateString('fr-FR')}</p>
|
|
<p><strong>Durée estimée:</strong> {selectedEvenement.dureeEstimee}h</p>
|
|
<p><strong>Description:</strong> {selectedEvenement.description}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CalendrierMaintenancePage;
|