Initial commit
This commit is contained in:
dahoud
448
app/(main)/maintenances/planifiees/page.tsx
Normal file
448
app/(main)/maintenances/planifiees/page.tsx
Normal file
@@ -0,0 +1,448 @@
|
||||
'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 { Calendar } from 'primereact/calendar';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Card } from 'primereact/card';
|
||||
import { FilterMatchMode } from 'primereact/api';
|
||||
import { Timeline } from 'primereact/timeline';
|
||||
import { maintenanceService } from '../../../../services/api';
|
||||
import { MaintenanceMateriel, TypeMaintenance, StatutMaintenance } from '../../../../types/btp';
|
||||
import { formatDate } from '../../../../utils/formatters';
|
||||
|
||||
const MaintenancesPlanifieesPage = () => {
|
||||
const [maintenances, setMaintenances] = useState<MaintenanceMateriel[]>([]);
|
||||
const [selectedMaintenances, setSelectedMaintenances] = useState<MaintenanceMateriel[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
const [dateDebut, setDateDebut] = useState<Date | null>(new Date());
|
||||
const [dateFin, setDateFin] = useState<Date | null>(new Date(Date.now() + 30 * 24 * 60 * 60 * 1000)); // +30 jours
|
||||
const toast = useRef<Toast>(null);
|
||||
const dt = useRef<DataTable<MaintenanceMateriel[]>>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadMaintenancesPlanifiees();
|
||||
}, [dateDebut, dateFin]);
|
||||
|
||||
const loadMaintenancesPlanifiees = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await maintenanceService.getAll();
|
||||
|
||||
// Filtrer les maintenances planifiées
|
||||
const planifiees = data.filter(m =>
|
||||
m.statut === StatutMaintenance.PLANIFIEE &&
|
||||
new Date(m.datePrevue) >= (dateDebut || new Date()) &&
|
||||
new Date(m.datePrevue) <= (dateFin || new Date(Date.now() + 30 * 24 * 60 * 60 * 1000))
|
||||
);
|
||||
|
||||
setMaintenances(planifiees);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger les maintenances planifiées',
|
||||
life: 3000
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const demarrerMaintenance = async (maintenance: MaintenanceMateriel) => {
|
||||
try {
|
||||
const updatedMaintenance = {
|
||||
...maintenance,
|
||||
statut: StatutMaintenance.EN_COURS,
|
||||
dateRealisee: new Date().toISOString()
|
||||
};
|
||||
|
||||
await maintenanceService.update(maintenance.id, updatedMaintenance);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Maintenance démarrée',
|
||||
life: 3000
|
||||
});
|
||||
|
||||
loadMaintenancesPlanifiees();
|
||||
} catch (error: any) {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: error?.userMessage || 'Erreur lors du démarrage',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const reporterMaintenance = async (maintenance: MaintenanceMateriel, nouveauJours: number = 7) => {
|
||||
try {
|
||||
const nouvelleDate = new Date();
|
||||
nouvelleDate.setDate(nouvelleDate.getDate() + nouveauJours);
|
||||
|
||||
const updatedMaintenance = {
|
||||
...maintenance,
|
||||
datePrevue: nouvelleDate,
|
||||
notes: `${maintenance.notes || ''}\nReportée le ${formatDate(new Date())}`
|
||||
};
|
||||
|
||||
await maintenanceService.update(maintenance.id, updatedMaintenance);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Maintenance reportée',
|
||||
detail: `Nouvelle date: ${formatDate(nouvelleDate)}`,
|
||||
life: 3000
|
||||
});
|
||||
|
||||
loadMaintenancesPlanifiees();
|
||||
} catch (error: any) {
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: error?.userMessage || 'Erreur lors du report',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const exportCSV = () => {
|
||||
dt.current?.exportCSV();
|
||||
};
|
||||
|
||||
// Templates pour les colonnes
|
||||
const materielBodyTemplate = (rowData: MaintenanceMateriel) => {
|
||||
return (
|
||||
<div>
|
||||
<div className="font-semibold">{rowData.materiel?.nom}</div>
|
||||
<div className="text-sm text-500">{rowData.materiel?.marque} {rowData.materiel?.modele}</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const typeBodyTemplate = (rowData: MaintenanceMateriel) => {
|
||||
return (
|
||||
<Tag
|
||||
value={rowData.type?.replace('_', ' ')}
|
||||
severity={getTypeSeverity(rowData.type)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const prioriteBodyTemplate = (rowData: MaintenanceMateriel) => {
|
||||
const daysDiff = Math.ceil((new Date(rowData.datePrevue).getTime() - Date.now()) / (1000 * 60 * 60 * 24));
|
||||
|
||||
let severity;
|
||||
let label;
|
||||
|
||||
if (daysDiff < 0) {
|
||||
severity = 'danger';
|
||||
label = 'EN RETARD';
|
||||
} else if (daysDiff <= 3) {
|
||||
severity = 'warning';
|
||||
label = 'URGENT';
|
||||
} else if (daysDiff <= 7) {
|
||||
severity = 'info';
|
||||
label = 'PRIORITAIRE';
|
||||
} else {
|
||||
severity = 'success';
|
||||
label = 'NORMAL';
|
||||
}
|
||||
|
||||
return <Tag value={label} severity={severity} />;
|
||||
};
|
||||
|
||||
const dateBodyTemplate = (rowData: MaintenanceMateriel) => {
|
||||
const date = new Date(rowData.datePrevue);
|
||||
const today = new Date();
|
||||
const daysDiff = Math.ceil((date.getTime() - today.getTime()) / (1000 * 60 * 60 * 24));
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={daysDiff < 0 ? 'text-red-500 font-semibold' : daysDiff <= 3 ? 'text-orange-500' : ''}>
|
||||
{formatDate(rowData.datePrevue)}
|
||||
</div>
|
||||
<div className="text-xs text-500">
|
||||
{daysDiff < 0 ? `${Math.abs(daysDiff)} jour(s) de retard` :
|
||||
daysDiff === 0 ? 'Aujourd\'hui' :
|
||||
`Dans ${daysDiff} jour(s)`}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: MaintenanceMateriel) => {
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
<Button
|
||||
icon="pi pi-play"
|
||||
size="small"
|
||||
severity="success"
|
||||
className="p-button-text p-button-rounded"
|
||||
tooltip="Démarrer"
|
||||
onClick={() => demarrerMaintenance(rowData)}
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-calendar-plus"
|
||||
size="small"
|
||||
severity="info"
|
||||
className="p-button-text p-button-rounded"
|
||||
tooltip="Reporter (+7 jours)"
|
||||
onClick={() => reporterMaintenance(rowData, 7)}
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-calendar-times"
|
||||
size="small"
|
||||
severity="warning"
|
||||
className="p-button-text p-button-rounded"
|
||||
tooltip="Reporter (+14 jours)"
|
||||
onClick={() => reporterMaintenance(rowData, 14)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getTypeSeverity = (type?: TypeMaintenance) => {
|
||||
switch (type) {
|
||||
case TypeMaintenance.PREVENTIVE:
|
||||
return 'success';
|
||||
case TypeMaintenance.CORRECTIVE:
|
||||
return 'danger';
|
||||
case TypeMaintenance.REVISION:
|
||||
return 'info';
|
||||
case TypeMaintenance.CONTROLE_TECHNIQUE:
|
||||
return 'warning';
|
||||
case TypeMaintenance.NETTOYAGE:
|
||||
return 'secondary';
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2 align-items-center">
|
||||
<h4 className="m-0">Maintenances Planifiées</h4>
|
||||
<span className="text-500">({maintenances.length} maintenances)</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<Button
|
||||
label="Exporter"
|
||||
icon="pi pi-upload"
|
||||
severity="help"
|
||||
className="p-button-text p-button-rounded"
|
||||
onClick={exportCSV}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const header = (
|
||||
<div className="flex flex-wrap gap-2 align-items-center justify-content-between">
|
||||
<div className="flex flex-wrap gap-2 align-items-center">
|
||||
<Calendar
|
||||
placeholder="Date début"
|
||||
value={dateDebut}
|
||||
onChange={(e) => setDateDebut(e.value)}
|
||||
dateFormat="dd/mm/yy"
|
||||
showIcon
|
||||
/>
|
||||
<Calendar
|
||||
placeholder="Date fin"
|
||||
value={dateFin}
|
||||
onChange={(e) => setDateFin(e.value)}
|
||||
dateFormat="dd/mm/yy"
|
||||
showIcon
|
||||
/>
|
||||
</div>
|
||||
<span className="p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText
|
||||
type="search"
|
||||
placeholder="Rechercher..."
|
||||
onInput={(e) => setGlobalFilter(e.currentTarget.value)}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const filters = {
|
||||
global: { value: globalFilter, matchMode: FilterMatchMode.CONTAINS }
|
||||
};
|
||||
|
||||
// Statistiques pour les cards
|
||||
const maintenancesUrgentes = maintenances.filter(m => {
|
||||
const daysDiff = Math.ceil((new Date(m.datePrevue).getTime() - Date.now()) / (1000 * 60 * 60 * 24));
|
||||
return daysDiff <= 3;
|
||||
}).length;
|
||||
|
||||
const maintenancesRetard = maintenances.filter(m => {
|
||||
const daysDiff = Math.ceil((new Date(m.datePrevue).getTime() - Date.now()) / (1000 * 60 * 60 * 24));
|
||||
return daysDiff < 0;
|
||||
}).length;
|
||||
|
||||
const maintenancesSemaine = maintenances.filter(m => {
|
||||
const daysDiff = Math.ceil((new Date(m.datePrevue).getTime() - Date.now()) / (1000 * 60 * 60 * 24));
|
||||
return daysDiff >= 0 && daysDiff <= 7;
|
||||
}).length;
|
||||
|
||||
// Timeline des prochaines maintenances
|
||||
const timelineEvents = maintenances
|
||||
.sort((a, b) => new Date(a.datePrevue).getTime() - new Date(b.datePrevue).getTime())
|
||||
.slice(0, 5)
|
||||
.map(m => ({
|
||||
date: formatDate(m.datePrevue),
|
||||
icon: 'pi pi-wrench',
|
||||
color: new Date(m.datePrevue) < new Date() ? '#e74c3c' : '#3498db',
|
||||
content: (
|
||||
<div>
|
||||
<div className="font-semibold">{m.materiel?.nom}</div>
|
||||
<div className="text-sm text-500">{m.description}</div>
|
||||
<Tag value={m.type?.replace('_', ' ')} severity={getTypeSeverity(m.type)} size="small" className="mt-1" />
|
||||
</div>
|
||||
)
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Toast ref={toast} />
|
||||
|
||||
{/* Cards de statistiques */}
|
||||
<div className="grid mb-4">
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="flex align-items-center">
|
||||
<div className="mr-3">
|
||||
<i className="pi pi-clock text-blue-500 text-3xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-semibold">{maintenances.length}</div>
|
||||
<div className="text-500">Planifiées</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="flex align-items-center">
|
||||
<div className="mr-3">
|
||||
<i className="pi pi-exclamation-triangle text-orange-500 text-3xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-semibold">{maintenancesUrgentes}</div>
|
||||
<div className="text-500">Urgentes</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="flex align-items-center">
|
||||
<div className="mr-3">
|
||||
<i className="pi pi-times-circle text-red-500 text-3xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-semibold">{maintenancesRetard}</div>
|
||||
<div className="text-500">En retard</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="flex align-items-center">
|
||||
<div className="mr-3">
|
||||
<i className="pi pi-calendar text-green-500 text-3xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-semibold">{maintenancesSemaine}</div>
|
||||
<div className="text-500">Cette semaine</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid">
|
||||
<div className="col-12 lg:col-8">
|
||||
<div className="card">
|
||||
<Toolbar
|
||||
className="mb-4"
|
||||
left={leftToolbarTemplate}
|
||||
right={rightToolbarTemplate}
|
||||
/>
|
||||
|
||||
<DataTable
|
||||
ref={dt}
|
||||
value={maintenances}
|
||||
selection={selectedMaintenances}
|
||||
onSelectionChange={(e) => setSelectedMaintenances(e.value)}
|
||||
dataKey="id"
|
||||
paginator
|
||||
rows={10}
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
currentPageReportTemplate="Affichage {first} à {last} de {totalRecords} maintenances"
|
||||
filters={filters}
|
||||
filterDisplay="menu"
|
||||
loading={loading}
|
||||
globalFilterFields={['description', 'materiel.nom', 'type']}
|
||||
header={header}
|
||||
emptyMessage="Aucune maintenance planifiée."
|
||||
sortField="datePrevue"
|
||||
sortOrder={1}
|
||||
>
|
||||
<Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
|
||||
<Column header="Matériel" body={materielBodyTemplate} />
|
||||
<Column field="type" header="Type" body={typeBodyTemplate} />
|
||||
<Column header="Priorité" body={prioriteBodyTemplate} />
|
||||
<Column field="datePrevue" header="Date prévue" body={dateBodyTemplate} sortable />
|
||||
<Column field="description" header="Description" />
|
||||
<Column body={actionBodyTemplate} exportable={false} style={{ minWidth: '8rem' }} />
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-4">
|
||||
<Card title="Prochaines maintenances">
|
||||
<Timeline
|
||||
value={timelineEvents}
|
||||
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) => item.content}
|
||||
opposite={(item) => <small className="text-color-secondary">{item.date}</small>}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MaintenancesPlanifieesPage;
|
||||
Reference in New Issue
Block a user