Initial commit
This commit is contained in:
dahoud
578
app/(main)/maintenance/[id]/page.tsx
Normal file
578
app/(main)/maintenance/[id]/page.tsx
Normal file
@@ -0,0 +1,578 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { TabView, TabPanel } from 'primereact/tabview';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import { Timeline } from 'primereact/timeline';
|
||||
import { useRouter, useParams } from 'next/navigation';
|
||||
import { apiClient } from '../../../../services/api-client';
|
||||
|
||||
interface MaintenanceDetail {
|
||||
id: number;
|
||||
materielId: number;
|
||||
materielNom: string;
|
||||
materielType: string;
|
||||
materielMarque: string;
|
||||
materielModele: string;
|
||||
typeMaintenance: 'PREVENTIVE' | 'CORRECTIVE' | 'PLANIFIEE' | 'URGENTE';
|
||||
statut: 'PLANIFIEE' | 'EN_COURS' | 'TERMINEE' | 'ANNULEE' | 'EN_ATTENTE';
|
||||
priorite: 'BASSE' | 'NORMALE' | 'HAUTE' | 'CRITIQUE';
|
||||
dateCreation: string;
|
||||
datePlanifiee: string;
|
||||
dateDebut?: string;
|
||||
dateFin?: string;
|
||||
technicienId?: number;
|
||||
technicienNom?: string;
|
||||
technicienSpecialites?: string[];
|
||||
description: string;
|
||||
problemeSignale?: string;
|
||||
solutionApportee?: string;
|
||||
dureeEstimee: number;
|
||||
dureeReelle?: number;
|
||||
coutEstime?: number;
|
||||
coutReel?: number;
|
||||
piecesUtilisees: Array<{
|
||||
id: number;
|
||||
nom: string;
|
||||
reference: string;
|
||||
quantite: number;
|
||||
coutUnitaire: number;
|
||||
cout: number;
|
||||
fournisseur: string;
|
||||
}>;
|
||||
outilsUtilises: Array<{
|
||||
id: number;
|
||||
nom: string;
|
||||
type: string;
|
||||
dureeUtilisation: number;
|
||||
}>;
|
||||
prochaineMaintenance?: string;
|
||||
observations?: string;
|
||||
photos: Array<{
|
||||
id: number;
|
||||
nom: string;
|
||||
url: string;
|
||||
type: 'AVANT' | 'PENDANT' | 'APRES';
|
||||
dateAjout: string;
|
||||
}>;
|
||||
historique: Array<{
|
||||
id: number;
|
||||
action: string;
|
||||
utilisateur: string;
|
||||
date: string;
|
||||
commentaire?: string;
|
||||
}>;
|
||||
evaluationQualite?: number;
|
||||
commentaireQualite?: string;
|
||||
tempsReponse?: number;
|
||||
tempsResolution?: number;
|
||||
causeRacine?: string;
|
||||
actionPreventive?: string;
|
||||
}
|
||||
|
||||
const MaintenanceDetailPage = () => {
|
||||
const [maintenance, setMaintenance] = useState<MaintenanceDetail | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const maintenanceId = params.id;
|
||||
|
||||
useEffect(() => {
|
||||
if (maintenanceId) {
|
||||
loadMaintenanceDetail();
|
||||
}
|
||||
}, [maintenanceId]);
|
||||
|
||||
const loadMaintenanceDetail = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('🔄 Chargement du détail maintenance...', maintenanceId);
|
||||
const response = await apiClient.get(`/api/maintenances/${maintenanceId}`);
|
||||
console.log('✅ Détail maintenance chargé:', response.data);
|
||||
setMaintenance(response.data);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du chargement du détail:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const changerStatutMaintenance = async (nouveauStatut: string) => {
|
||||
if (!maintenance) return;
|
||||
|
||||
try {
|
||||
await apiClient.post(`/api/maintenances/${maintenance.id}/statut`, { statut: nouveauStatut });
|
||||
setMaintenance({ ...maintenance, statut: nouveauStatut as any });
|
||||
console.log(`✅ Statut maintenance changé: ${nouveauStatut}`);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du changement de statut:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const getStatutSeverity = (statut: string) => {
|
||||
switch (statut) {
|
||||
case 'PLANIFIEE': return 'info';
|
||||
case 'EN_COURS': return 'warning';
|
||||
case 'TERMINEE': return 'success';
|
||||
case 'ANNULEE': return 'danger';
|
||||
case 'EN_ATTENTE': return 'secondary';
|
||||
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 getPrioriteSeverity = (priorite: string) => {
|
||||
switch (priorite) {
|
||||
case 'BASSE': return 'info';
|
||||
case 'NORMALE': return 'success';
|
||||
case 'HAUTE': return 'warning';
|
||||
case 'CRITIQUE': return 'danger';
|
||||
default: return 'secondary';
|
||||
}
|
||||
};
|
||||
|
||||
const calculerCoutTotal = () => {
|
||||
if (!maintenance) return 0;
|
||||
const coutPieces = maintenance.piecesUtilisees.reduce((total, piece) => total + piece.cout, 0);
|
||||
return (maintenance.coutReel || maintenance.coutEstime || 0) + coutPieces;
|
||||
};
|
||||
|
||||
const calculerEfficacite = () => {
|
||||
if (!maintenance || !maintenance.dureeReelle) return null;
|
||||
const efficacite = (maintenance.dureeEstimee / maintenance.dureeReelle) * 100;
|
||||
return Math.round(efficacite);
|
||||
};
|
||||
|
||||
const pieceBodyTemplate = (rowData: any) => {
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className="font-medium">{rowData.nom}</span>
|
||||
<span className="text-sm text-500">Réf: {rowData.reference}</span>
|
||||
<span className="text-sm text-500">Fournisseur: {rowData.fournisseur}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const coutPieceBodyTemplate = (rowData: any) => {
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className="font-medium">{rowData.cout.toLocaleString('fr-FR')} €</span>
|
||||
<span className="text-sm text-500">
|
||||
{rowData.quantite} × {rowData.coutUnitaire.toLocaleString('fr-FR')} €
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const photoBodyTemplate = (rowData: any) => {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<img
|
||||
src={rowData.url}
|
||||
alt={rowData.nom}
|
||||
className="w-4rem h-3rem object-cover border-round"
|
||||
/>
|
||||
<div>
|
||||
<div className="font-medium">{rowData.nom}</div>
|
||||
<Tag value={rowData.type} severity="info" className="p-tag-sm" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const historiqueItemTemplate = (item: any) => {
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<div className="font-medium">{item.action}</div>
|
||||
<div className="text-sm text-500">Par {item.utilisateur}</div>
|
||||
{item.commentaire && (
|
||||
<div className="text-sm">{item.commentaire}</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
label="Retour"
|
||||
icon="pi pi-arrow-left"
|
||||
className="p-button-outlined"
|
||||
onClick={() => router.push('/maintenance')}
|
||||
/>
|
||||
<Button
|
||||
label="Modifier"
|
||||
icon="pi pi-pencil"
|
||||
className="p-button-success"
|
||||
onClick={() => router.push(`/maintenance/${maintenanceId}/edit`)}
|
||||
/>
|
||||
{maintenance?.statut === 'PLANIFIEE' && (
|
||||
<Button
|
||||
label="Démarrer"
|
||||
icon="pi pi-play"
|
||||
className="p-button-warning"
|
||||
onClick={() => changerStatutMaintenance('EN_COURS')}
|
||||
/>
|
||||
)}
|
||||
{maintenance?.statut === 'EN_COURS' && (
|
||||
<Button
|
||||
label="Terminer"
|
||||
icon="pi pi-check"
|
||||
className="p-button-success"
|
||||
onClick={() => changerStatutMaintenance('TERMINEE')}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
label="Matériel"
|
||||
icon="pi pi-cog"
|
||||
className="p-button-info"
|
||||
onClick={() => router.push(`/materiels/${maintenance?.materielId}`)}
|
||||
/>
|
||||
<Button
|
||||
label="Planifier Suivante"
|
||||
icon="pi pi-calendar-plus"
|
||||
className="p-button-secondary"
|
||||
onClick={() => router.push(`/maintenance/nouveau?materielId=${maintenance?.materielId}`)}
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-refresh"
|
||||
className="p-button-outlined"
|
||||
onClick={loadMaintenanceDetail}
|
||||
tooltip="Actualiser"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<div className="flex justify-content-center">
|
||||
<i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }} />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!maintenance) {
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<p>Maintenance non trouvée</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Toolbar
|
||||
className="mb-4"
|
||||
left={leftToolbarTemplate}
|
||||
right={rightToolbarTemplate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* En-tête maintenance */}
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<div className="flex flex-column lg:flex-row lg:align-items-center gap-4">
|
||||
<div className="flex align-items-center justify-content-center bg-orange-100 border-round" style={{ width: '4rem', height: '4rem' }}>
|
||||
<i className="pi pi-wrench text-orange-500 text-2xl" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h2 className="m-0 mb-2">Maintenance #{maintenance.id}</h2>
|
||||
<div className="flex flex-wrap gap-2 mb-2">
|
||||
<Tag value={maintenance.typeMaintenance} severity={getTypeSeverity(maintenance.typeMaintenance)} />
|
||||
<Tag value={maintenance.statut} severity={getStatutSeverity(maintenance.statut)} />
|
||||
<Tag value={maintenance.priorite} severity={getPrioriteSeverity(maintenance.priorite)} />
|
||||
</div>
|
||||
<div className="text-600">
|
||||
<p className="m-0">🔧 {maintenance.materielNom} ({maintenance.materielType})</p>
|
||||
<p className="m-0">📅 Planifiée: {new Date(maintenance.datePlanifiee).toLocaleDateString('fr-FR')}</p>
|
||||
{maintenance.technicienNom && <p className="m-0">👤 Technicien: {maintenance.technicienNom}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-2xl font-bold text-blue-500 mb-1">
|
||||
{calculerCoutTotal().toLocaleString('fr-FR')} €
|
||||
</div>
|
||||
<div className="text-500 mb-2">Coût total</div>
|
||||
{calculerEfficacite() && (
|
||||
<div>
|
||||
<div className="text-lg font-bold text-green-500">{calculerEfficacite()}%</div>
|
||||
<div className="text-500">Efficacité</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Onglets de détail */}
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<TabView>
|
||||
<TabPanel header="Informations Générales">
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6">
|
||||
<h4>Détails de la maintenance</h4>
|
||||
<div className="field">
|
||||
<label className="font-medium">Description:</label>
|
||||
<p>{maintenance.description}</p>
|
||||
</div>
|
||||
{maintenance.problemeSignale && (
|
||||
<div className="field">
|
||||
<label className="font-medium">Problème signalé:</label>
|
||||
<p className="text-red-600">{maintenance.problemeSignale}</p>
|
||||
</div>
|
||||
)}
|
||||
{maintenance.solutionApportee && (
|
||||
<div className="field">
|
||||
<label className="font-medium">Solution apportée:</label>
|
||||
<p className="text-green-600">{maintenance.solutionApportee}</p>
|
||||
</div>
|
||||
)}
|
||||
{maintenance.observations && (
|
||||
<div className="field">
|
||||
<label className="font-medium">Observations:</label>
|
||||
<p>{maintenance.observations}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<h4>Informations matériel</h4>
|
||||
<div className="field">
|
||||
<label className="font-medium">Matériel:</label>
|
||||
<p>{maintenance.materielNom}</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-medium">Type:</label>
|
||||
<p>{maintenance.materielType}</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-medium">Marque/Modèle:</label>
|
||||
<p>{maintenance.materielMarque} {maintenance.materielModele}</p>
|
||||
</div>
|
||||
{maintenance.prochaineMaintenance && (
|
||||
<div className="field">
|
||||
<label className="font-medium">Prochaine maintenance:</label>
|
||||
<p className="text-orange-500">
|
||||
{new Date(maintenance.prochaineMaintenance).toLocaleDateString('fr-FR')}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Temps et Coûts">
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6">
|
||||
<h4>Planification</h4>
|
||||
<div className="field">
|
||||
<label className="font-medium">Date de création:</label>
|
||||
<p>{new Date(maintenance.dateCreation).toLocaleDateString('fr-FR')}</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-medium">Date planifiée:</label>
|
||||
<p>{new Date(maintenance.datePlanifiee).toLocaleDateString('fr-FR')}</p>
|
||||
</div>
|
||||
{maintenance.dateDebut && (
|
||||
<div className="field">
|
||||
<label className="font-medium">Date de début:</label>
|
||||
<p>{new Date(maintenance.dateDebut).toLocaleDateString('fr-FR')}</p>
|
||||
</div>
|
||||
)}
|
||||
{maintenance.dateFin && (
|
||||
<div className="field">
|
||||
<label className="font-medium">Date de fin:</label>
|
||||
<p>{new Date(maintenance.dateFin).toLocaleDateString('fr-FR')}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<h4>Durée et coûts</h4>
|
||||
<div className="field">
|
||||
<label className="font-medium">Durée estimée:</label>
|
||||
<p>{maintenance.dureeEstimee}h</p>
|
||||
</div>
|
||||
{maintenance.dureeReelle && (
|
||||
<div className="field">
|
||||
<label className="font-medium">Durée réelle:</label>
|
||||
<p className="text-green-600">{maintenance.dureeReelle}h</p>
|
||||
</div>
|
||||
)}
|
||||
<div className="field">
|
||||
<label className="font-medium">Coût estimé:</label>
|
||||
<p>{maintenance.coutEstime?.toLocaleString('fr-FR') || 0} €</p>
|
||||
</div>
|
||||
{maintenance.coutReel && (
|
||||
<div className="field">
|
||||
<label className="font-medium">Coût réel:</label>
|
||||
<p className="text-green-600">{maintenance.coutReel.toLocaleString('fr-FR')} €</p>
|
||||
</div>
|
||||
)}
|
||||
{calculerEfficacite() && (
|
||||
<div className="field">
|
||||
<label className="font-medium">Efficacité:</label>
|
||||
<div className="flex align-items-center gap-2">
|
||||
<ProgressBar value={calculerEfficacite()!} className="flex-1" />
|
||||
<span>{calculerEfficacite()}%</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Pièces et Outils">
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<h4>Pièces utilisées</h4>
|
||||
<DataTable
|
||||
value={maintenance.piecesUtilisees}
|
||||
emptyMessage="Aucune pièce utilisée"
|
||||
responsiveLayout="scroll"
|
||||
>
|
||||
<Column field="nom" header="Pièce" body={pieceBodyTemplate} />
|
||||
<Column field="quantite" header="Quantité" />
|
||||
<Column field="cout" header="Coût" body={coutPieceBodyTemplate} />
|
||||
</DataTable>
|
||||
</div>
|
||||
<div className="col-12 mt-4">
|
||||
<h4>Outils utilisés</h4>
|
||||
<DataTable
|
||||
value={maintenance.outilsUtilises}
|
||||
emptyMessage="Aucun outil spécifique"
|
||||
responsiveLayout="scroll"
|
||||
>
|
||||
<Column field="nom" header="Outil" />
|
||||
<Column field="type" header="Type" />
|
||||
<Column field="dureeUtilisation" header="Durée (h)" />
|
||||
</DataTable>
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Photos">
|
||||
<DataTable
|
||||
value={maintenance.photos}
|
||||
emptyMessage="Aucune photo disponible"
|
||||
responsiveLayout="scroll"
|
||||
>
|
||||
<Column field="nom" header="Photo" body={photoBodyTemplate} />
|
||||
<Column field="type" header="Type" />
|
||||
<Column
|
||||
field="dateAjout"
|
||||
header="Date"
|
||||
body={(rowData) => new Date(rowData.dateAjout).toLocaleDateString('fr-FR')}
|
||||
/>
|
||||
</DataTable>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Historique">
|
||||
<Timeline
|
||||
value={maintenance.historique}
|
||||
content={historiqueItemTemplate}
|
||||
opposite={(item) => new Date(item.date).toLocaleDateString('fr-FR')}
|
||||
/>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Qualité">
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6">
|
||||
<h4>Évaluation qualité</h4>
|
||||
{maintenance.evaluationQualite ? (
|
||||
<div>
|
||||
<div className="flex align-items-center gap-2 mb-2">
|
||||
<span className="text-2xl font-bold text-green-500">
|
||||
{maintenance.evaluationQualite}/5
|
||||
</span>
|
||||
<div className="flex">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<i
|
||||
key={star}
|
||||
className={`pi pi-star${star <= maintenance.evaluationQualite! ? '-fill' : ''} text-yellow-500`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{maintenance.commentaireQualite && (
|
||||
<p>{maintenance.commentaireQualite}</p>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-500">Évaluation en attente</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<h4>Analyse</h4>
|
||||
{maintenance.causeRacine && (
|
||||
<div className="field">
|
||||
<label className="font-medium">Cause racine:</label>
|
||||
<p>{maintenance.causeRacine}</p>
|
||||
</div>
|
||||
)}
|
||||
{maintenance.actionPreventive && (
|
||||
<div className="field">
|
||||
<label className="font-medium">Action préventive:</label>
|
||||
<p className="text-blue-600">{maintenance.actionPreventive}</p>
|
||||
</div>
|
||||
)}
|
||||
{maintenance.tempsReponse && (
|
||||
<div className="field">
|
||||
<label className="font-medium">Temps de réponse:</label>
|
||||
<p>{maintenance.tempsReponse} minutes</p>
|
||||
</div>
|
||||
)}
|
||||
{maintenance.tempsResolution && (
|
||||
<div className="field">
|
||||
<label className="font-medium">Temps de résolution:</label>
|
||||
<p>{maintenance.tempsResolution} minutes</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MaintenanceDetailPage;
|
||||
Reference in New Issue
Block a user