Initial commit
This commit is contained in:
dahoud
719
app/(main)/maintenance/[id]/edit/page.tsx
Normal file
719
app/(main)/maintenance/[id]/edit/page.tsx
Normal file
@@ -0,0 +1,719 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card } from 'primereact/card';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Message } from 'primereact/message';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { useRouter, useParams } from 'next/navigation';
|
||||
import { apiClient } from '../../../../../services/api-client';
|
||||
|
||||
interface MaintenanceEdit {
|
||||
typeMaintenance: 'PREVENTIVE' | 'CORRECTIVE' | 'PLANIFIEE' | 'URGENTE';
|
||||
priorite: 'BASSE' | 'NORMALE' | 'HAUTE' | 'CRITIQUE';
|
||||
datePlanifiee: Date | null;
|
||||
technicienId?: number;
|
||||
description: string;
|
||||
problemeSignale?: string;
|
||||
solutionApportee?: string;
|
||||
coutEstime?: number;
|
||||
coutReel?: number;
|
||||
dureeEstimee: number;
|
||||
dureeReelle?: number;
|
||||
observations?: string;
|
||||
evaluationQualite?: number;
|
||||
commentaireQualite?: string;
|
||||
causeRacine?: string;
|
||||
actionPreventive?: string;
|
||||
}
|
||||
|
||||
interface Piece {
|
||||
id: number;
|
||||
nom: string;
|
||||
reference: string;
|
||||
quantite: number;
|
||||
coutUnitaire: number;
|
||||
cout: number;
|
||||
fournisseur: string;
|
||||
}
|
||||
|
||||
const EditMaintenancePage = () => {
|
||||
const [maintenance, setMaintenance] = useState<MaintenanceEdit>({
|
||||
typeMaintenance: 'PREVENTIVE',
|
||||
priorite: 'NORMALE',
|
||||
datePlanifiee: null,
|
||||
description: '',
|
||||
dureeEstimee: 2
|
||||
});
|
||||
const [maintenanceOriginale, setMaintenanceOriginale] = useState<any>(null);
|
||||
const [techniciens, setTechniciens] = useState<any[]>([]);
|
||||
const [pieces, setPieces] = useState<Piece[]>([]);
|
||||
const [pieceDialog, setPieceDialog] = useState(false);
|
||||
const [nouvellePiece, setNouvellePiece] = useState<Piece>({
|
||||
id: 0,
|
||||
nom: '',
|
||||
reference: '',
|
||||
quantite: 1,
|
||||
coutUnitaire: 0,
|
||||
cout: 0,
|
||||
fournisseur: ''
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [loadingData, setLoadingData] = useState(true);
|
||||
const [errors, setErrors] = useState<{ [key: string]: string }>({});
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const maintenanceId = params.id;
|
||||
|
||||
const typeOptions = [
|
||||
{ label: 'Préventive', value: 'PREVENTIVE' },
|
||||
{ label: 'Corrective', value: 'CORRECTIVE' },
|
||||
{ label: 'Planifiée', value: 'PLANIFIEE' },
|
||||
{ label: 'Urgente', value: 'URGENTE' }
|
||||
];
|
||||
|
||||
const prioriteOptions = [
|
||||
{ label: 'Basse', value: 'BASSE' },
|
||||
{ label: 'Normale', value: 'NORMALE' },
|
||||
{ label: 'Haute', value: 'HAUTE' },
|
||||
{ label: 'Critique', value: 'CRITIQUE' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
if (maintenanceId) {
|
||||
loadMaintenanceData();
|
||||
loadTechniciens();
|
||||
}
|
||||
}, [maintenanceId]);
|
||||
|
||||
const loadMaintenanceData = async () => {
|
||||
try {
|
||||
console.log('🔄 Chargement des données maintenance...', maintenanceId);
|
||||
const response = await apiClient.get(`/api/maintenances/${maintenanceId}`);
|
||||
const maintenanceData = response.data;
|
||||
console.log('✅ Données maintenance chargées:', maintenanceData);
|
||||
|
||||
setMaintenanceOriginale(maintenanceData);
|
||||
setMaintenance({
|
||||
typeMaintenance: maintenanceData.typeMaintenance,
|
||||
priorite: maintenanceData.priorite,
|
||||
datePlanifiee: new Date(maintenanceData.datePlanifiee),
|
||||
technicienId: maintenanceData.technicienId,
|
||||
description: maintenanceData.description,
|
||||
problemeSignale: maintenanceData.problemeSignale || '',
|
||||
solutionApportee: maintenanceData.solutionApportee || '',
|
||||
coutEstime: maintenanceData.coutEstime,
|
||||
coutReel: maintenanceData.coutReel,
|
||||
dureeEstimee: maintenanceData.dureeEstimee,
|
||||
dureeReelle: maintenanceData.dureeReelle,
|
||||
observations: maintenanceData.observations || '',
|
||||
evaluationQualite: maintenanceData.evaluationQualite,
|
||||
commentaireQualite: maintenanceData.commentaireQualite || '',
|
||||
causeRacine: maintenanceData.causeRacine || '',
|
||||
actionPreventive: maintenanceData.actionPreventive || ''
|
||||
});
|
||||
|
||||
setPieces(maintenanceData.piecesUtilisees || []);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du chargement:', error);
|
||||
} finally {
|
||||
setLoadingData(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 validateForm = () => {
|
||||
const newErrors: { [key: string]: string } = {};
|
||||
|
||||
if (!maintenance.description.trim()) {
|
||||
newErrors.description = 'La description est requise';
|
||||
}
|
||||
|
||||
if (!maintenance.datePlanifiee) {
|
||||
newErrors.datePlanifiee = 'La date planifiée est requise';
|
||||
}
|
||||
|
||||
if (maintenance.dureeEstimee <= 0) {
|
||||
newErrors.dureeEstimee = 'La durée estimée doit être positive';
|
||||
}
|
||||
|
||||
if (maintenance.typeMaintenance === 'CORRECTIVE' && !maintenance.problemeSignale?.trim()) {
|
||||
newErrors.problemeSignale = 'Le problème signalé est requis pour une maintenance corrective';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('🔄 Mise à jour de la maintenance...', maintenance);
|
||||
|
||||
const maintenanceData = {
|
||||
...maintenance,
|
||||
datePlanifiee: maintenance.datePlanifiee?.toISOString().split('T')[0],
|
||||
piecesUtilisees: pieces
|
||||
};
|
||||
|
||||
const response = await apiClient.put(`/api/maintenances/${maintenanceId}`, maintenanceData);
|
||||
console.log('✅ Maintenance mise à jour avec succès:', response.data);
|
||||
|
||||
router.push(`/maintenance/${maintenanceId}`);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de la mise à jour:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const ajouterPiece = () => {
|
||||
if (nouvellePiece.nom && nouvellePiece.quantite > 0) {
|
||||
const piece = {
|
||||
...nouvellePiece,
|
||||
id: Date.now(), // ID temporaire
|
||||
cout: nouvellePiece.quantite * nouvellePiece.coutUnitaire
|
||||
};
|
||||
setPieces([...pieces, piece]);
|
||||
setNouvellePiece({
|
||||
id: 0,
|
||||
nom: '',
|
||||
reference: '',
|
||||
quantite: 1,
|
||||
coutUnitaire: 0,
|
||||
cout: 0,
|
||||
fournisseur: ''
|
||||
});
|
||||
setPieceDialog(false);
|
||||
}
|
||||
};
|
||||
|
||||
const supprimerPiece = (pieceId: number) => {
|
||||
setPieces(pieces.filter(p => p.id !== pieceId));
|
||||
};
|
||||
|
||||
const technicienOptionTemplate = (option: any) => {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<div>
|
||||
<div className="font-medium">{option.prenom} {option.nom}</div>
|
||||
<div className="text-sm text-500">{option.specialites?.join(', ')}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const pieceBodyTemplate = (rowData: Piece) => {
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const coutPieceBodyTemplate = (rowData: Piece) => {
|
||||
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 actionPieceBodyTemplate = (rowData: Piece) => {
|
||||
return (
|
||||
<Button
|
||||
icon="pi pi-trash"
|
||||
className="p-button-rounded p-button-danger p-button-sm"
|
||||
onClick={() => supprimerPiece(rowData.id)}
|
||||
tooltip="Supprimer"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
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/${maintenanceId}`)}
|
||||
/>
|
||||
<Button
|
||||
label="Annuler"
|
||||
icon="pi pi-times"
|
||||
className="p-button-outlined"
|
||||
onClick={() => router.push(`/maintenance/${maintenanceId}`)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
label="Réinitialiser"
|
||||
icon="pi pi-refresh"
|
||||
className="p-button-outlined"
|
||||
onClick={() => {
|
||||
if (maintenanceOriginale) {
|
||||
setMaintenance({
|
||||
typeMaintenance: maintenanceOriginale.typeMaintenance,
|
||||
priorite: maintenanceOriginale.priorite,
|
||||
datePlanifiee: new Date(maintenanceOriginale.datePlanifiee),
|
||||
technicienId: maintenanceOriginale.technicienId,
|
||||
description: maintenanceOriginale.description,
|
||||
problemeSignale: maintenanceOriginale.problemeSignale || '',
|
||||
solutionApportee: maintenanceOriginale.solutionApportee || '',
|
||||
coutEstime: maintenanceOriginale.coutEstime,
|
||||
coutReel: maintenanceOriginale.coutReel,
|
||||
dureeEstimee: maintenanceOriginale.dureeEstimee,
|
||||
dureeReelle: maintenanceOriginale.dureeReelle,
|
||||
observations: maintenanceOriginale.observations || '',
|
||||
evaluationQualite: maintenanceOriginale.evaluationQualite,
|
||||
commentaireQualite: maintenanceOriginale.commentaireQualite || '',
|
||||
causeRacine: maintenanceOriginale.causeRacine || '',
|
||||
actionPreventive: maintenanceOriginale.actionPreventive || ''
|
||||
});
|
||||
setPieces(maintenanceOriginale.piecesUtilisees || []);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
label="Enregistrer"
|
||||
icon="pi pi-check"
|
||||
className="p-button-success"
|
||||
loading={loading}
|
||||
onClick={handleSubmit}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (loadingData) {
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Toolbar
|
||||
className="mb-4"
|
||||
left={leftToolbarTemplate}
|
||||
right={rightToolbarTemplate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-8">
|
||||
<Card title={`Modifier la maintenance #${maintenanceId}`}>
|
||||
<form onSubmit={handleSubmit} className="p-fluid">
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="type" className="font-medium">
|
||||
Type de maintenance *
|
||||
</label>
|
||||
<Dropdown
|
||||
id="type"
|
||||
value={maintenance.typeMaintenance}
|
||||
options={typeOptions}
|
||||
onChange={(e) => setMaintenance({ ...maintenance, typeMaintenance: e.value })}
|
||||
placeholder="Sélectionner le type"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="priorite" className="font-medium">
|
||||
Priorité *
|
||||
</label>
|
||||
<Dropdown
|
||||
id="priorite"
|
||||
value={maintenance.priorite}
|
||||
options={prioriteOptions}
|
||||
onChange={(e) => setMaintenance({ ...maintenance, priorite: e.value })}
|
||||
placeholder="Sélectionner la priorité"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="datePlanifiee" className="font-medium">
|
||||
Date planifiée *
|
||||
</label>
|
||||
<Calendar
|
||||
id="datePlanifiee"
|
||||
value={maintenance.datePlanifiee}
|
||||
onChange={(e) => setMaintenance({ ...maintenance, datePlanifiee: e.value as Date })}
|
||||
showIcon
|
||||
dateFormat="dd/mm/yy"
|
||||
placeholder="Sélectionner une date"
|
||||
className={errors.datePlanifiee ? 'p-invalid' : ''}
|
||||
/>
|
||||
{errors.datePlanifiee && <small className="p-error">{errors.datePlanifiee}</small>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="technicien" className="font-medium">
|
||||
Technicien assigné
|
||||
</label>
|
||||
<Dropdown
|
||||
id="technicien"
|
||||
value={maintenance.technicienId}
|
||||
options={techniciens}
|
||||
onChange={(e) => setMaintenance({ ...maintenance, technicienId: e.value })}
|
||||
optionLabel="nom"
|
||||
optionValue="id"
|
||||
placeholder="Sélectionner un technicien"
|
||||
itemTemplate={technicienOptionTemplate}
|
||||
filter
|
||||
showClear
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<div className="field">
|
||||
<label htmlFor="description" className="font-medium">
|
||||
Description *
|
||||
</label>
|
||||
<InputTextarea
|
||||
id="description"
|
||||
value={maintenance.description}
|
||||
onChange={(e) => setMaintenance({ ...maintenance, description: e.target.value })}
|
||||
rows={3}
|
||||
placeholder="Description détaillée de la maintenance..."
|
||||
className={errors.description ? 'p-invalid' : ''}
|
||||
/>
|
||||
{errors.description && <small className="p-error">{errors.description}</small>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{maintenance.typeMaintenance === 'CORRECTIVE' && (
|
||||
<div className="col-12">
|
||||
<div className="field">
|
||||
<label htmlFor="probleme" className="font-medium">
|
||||
Problème signalé *
|
||||
</label>
|
||||
<InputTextarea
|
||||
id="probleme"
|
||||
value={maintenance.problemeSignale || ''}
|
||||
onChange={(e) => setMaintenance({ ...maintenance, problemeSignale: e.target.value })}
|
||||
rows={2}
|
||||
placeholder="Description du problème rencontré..."
|
||||
className={errors.problemeSignale ? 'p-invalid' : ''}
|
||||
/>
|
||||
{errors.problemeSignale && <small className="p-error">{errors.problemeSignale}</small>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{maintenanceOriginale?.statut === 'EN_COURS' || maintenanceOriginale?.statut === 'TERMINEE' ? (
|
||||
<div className="col-12">
|
||||
<div className="field">
|
||||
<label htmlFor="solution" className="font-medium">
|
||||
Solution apportée
|
||||
</label>
|
||||
<InputTextarea
|
||||
id="solution"
|
||||
value={maintenance.solutionApportee || ''}
|
||||
onChange={(e) => setMaintenance({ ...maintenance, solutionApportee: e.target.value })}
|
||||
rows={3}
|
||||
placeholder="Décrivez la solution mise en œuvre..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
<div className="col-12 md:col-3">
|
||||
<div className="field">
|
||||
<label htmlFor="dureeEstimee" className="font-medium">
|
||||
Durée estimée (h) *
|
||||
</label>
|
||||
<InputNumber
|
||||
id="dureeEstimee"
|
||||
value={maintenance.dureeEstimee}
|
||||
onValueChange={(e) => setMaintenance({ ...maintenance, dureeEstimee: e.value || 0 })}
|
||||
min={0.5}
|
||||
max={100}
|
||||
step={0.5}
|
||||
suffix=" h"
|
||||
className={errors.dureeEstimee ? 'p-invalid' : ''}
|
||||
/>
|
||||
{errors.dureeEstimee && <small className="p-error">{errors.dureeEstimee}</small>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{maintenanceOriginale?.statut === 'TERMINEE' && (
|
||||
<div className="col-12 md:col-3">
|
||||
<div className="field">
|
||||
<label htmlFor="dureeReelle" className="font-medium">
|
||||
Durée réelle (h)
|
||||
</label>
|
||||
<InputNumber
|
||||
id="dureeReelle"
|
||||
value={maintenance.dureeReelle}
|
||||
onValueChange={(e) => setMaintenance({ ...maintenance, dureeReelle: e.value || undefined })}
|
||||
min={0.5}
|
||||
max={100}
|
||||
step={0.5}
|
||||
suffix=" h"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="col-12 md:col-3">
|
||||
<div className="field">
|
||||
<label htmlFor="coutEstime" className="font-medium">
|
||||
Coût estimé (€)
|
||||
</label>
|
||||
<InputNumber
|
||||
id="coutEstime"
|
||||
value={maintenance.coutEstime}
|
||||
onValueChange={(e) => setMaintenance({ ...maintenance, coutEstime: e.value || undefined })}
|
||||
min={0}
|
||||
mode="currency"
|
||||
currency="EUR"
|
||||
locale="fr-FR"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{maintenanceOriginale?.statut === 'TERMINEE' && (
|
||||
<div className="col-12 md:col-3">
|
||||
<div className="field">
|
||||
<label htmlFor="coutReel" className="font-medium">
|
||||
Coût réel (€)
|
||||
</label>
|
||||
<InputNumber
|
||||
id="coutReel"
|
||||
value={maintenance.coutReel}
|
||||
onValueChange={(e) => setMaintenance({ ...maintenance, coutReel: e.value || undefined })}
|
||||
min={0}
|
||||
mode="currency"
|
||||
currency="EUR"
|
||||
locale="fr-FR"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="col-12">
|
||||
<div className="field">
|
||||
<label htmlFor="observations" className="font-medium">
|
||||
Observations
|
||||
</label>
|
||||
<InputTextarea
|
||||
id="observations"
|
||||
value={maintenance.observations || ''}
|
||||
onChange={(e) => setMaintenance({ ...maintenance, observations: e.target.value })}
|
||||
rows={2}
|
||||
placeholder="Observations particulières..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Analyse post-maintenance */}
|
||||
{maintenanceOriginale?.statut === 'TERMINEE' && (
|
||||
<>
|
||||
<div className="col-12">
|
||||
<h4>Analyse post-maintenance</h4>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="causeRacine" className="font-medium">
|
||||
Cause racine
|
||||
</label>
|
||||
<InputTextarea
|
||||
id="causeRacine"
|
||||
value={maintenance.causeRacine || ''}
|
||||
onChange={(e) => setMaintenance({ ...maintenance, causeRacine: e.target.value })}
|
||||
rows={2}
|
||||
placeholder="Identifiez la cause racine du problème..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="actionPreventive" className="font-medium">
|
||||
Action préventive
|
||||
</label>
|
||||
<InputTextarea
|
||||
id="actionPreventive"
|
||||
value={maintenance.actionPreventive || ''}
|
||||
onChange={(e) => setMaintenance({ ...maintenance, actionPreventive: e.target.value })}
|
||||
rows={2}
|
||||
placeholder="Proposez une action pour éviter la récurrence..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
|
||||
{/* Pièces utilisées */}
|
||||
<Card title="Pièces utilisées" className="mt-4">
|
||||
<div className="flex justify-content-end mb-3">
|
||||
<Button
|
||||
label="Ajouter une pièce"
|
||||
icon="pi pi-plus"
|
||||
className="p-button-success"
|
||||
onClick={() => setPieceDialog(true)}
|
||||
/>
|
||||
</div>
|
||||
<DataTable
|
||||
value={pieces}
|
||||
emptyMessage="Aucune pièce utilisée"
|
||||
responsiveLayout="scroll"
|
||||
>
|
||||
<Column field="nom" header="Pièce" body={pieceBodyTemplate} />
|
||||
<Column field="quantite" header="Quantité" />
|
||||
<Column field="fournisseur" header="Fournisseur" />
|
||||
<Column field="cout" header="Coût" body={coutPieceBodyTemplate} />
|
||||
<Column body={actionPieceBodyTemplate} header="Actions" />
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-4">
|
||||
<Card title="Informations">
|
||||
<div className="text-sm">
|
||||
<p className="mb-2">
|
||||
<i className="pi pi-info-circle text-blue-500 mr-2" />
|
||||
Modifiez les informations selon l'avancement de la maintenance.
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
<i className="pi pi-clock text-orange-500 mr-2" />
|
||||
Les durées et coûts réels ne sont modifiables qu'après finalisation.
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
<i className="pi pi-cog text-green-500 mr-2" />
|
||||
Ajoutez les pièces utilisées pour un suivi précis des coûts.
|
||||
</p>
|
||||
<p>
|
||||
<i className="pi pi-exclamation-triangle text-red-500 mr-2" />
|
||||
L'analyse post-maintenance aide à prévenir les récurrences.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Dialog Ajouter Pièce */}
|
||||
<Dialog
|
||||
visible={pieceDialog}
|
||||
style={{ width: '50vw' }}
|
||||
header="Ajouter une pièce"
|
||||
modal
|
||||
onHide={() => setPieceDialog(false)}
|
||||
footer={
|
||||
<div>
|
||||
<Button
|
||||
label="Annuler"
|
||||
icon="pi pi-times"
|
||||
className="p-button-outlined"
|
||||
onClick={() => setPieceDialog(false)}
|
||||
/>
|
||||
<Button
|
||||
label="Ajouter"
|
||||
icon="pi pi-check"
|
||||
className="p-button-success"
|
||||
onClick={ajouterPiece}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="grid p-fluid">
|
||||
<div className="col-12 md:col-6">
|
||||
<label className="font-medium">Nom de la pièce *</label>
|
||||
<InputText
|
||||
value={nouvellePiece.nom}
|
||||
onChange={(e) => setNouvellePiece({ ...nouvellePiece, nom: e.target.value })}
|
||||
placeholder="Nom de la pièce"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<label className="font-medium">Référence</label>
|
||||
<InputText
|
||||
value={nouvellePiece.reference}
|
||||
onChange={(e) => setNouvellePiece({ ...nouvellePiece, reference: e.target.value })}
|
||||
placeholder="Référence"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-4">
|
||||
<label className="font-medium">Quantité *</label>
|
||||
<InputNumber
|
||||
value={nouvellePiece.quantite}
|
||||
onValueChange={(e) => setNouvellePiece({ ...nouvellePiece, quantite: e.value || 1 })}
|
||||
min={1}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-4">
|
||||
<label className="font-medium">Coût unitaire (€)</label>
|
||||
<InputNumber
|
||||
value={nouvellePiece.coutUnitaire}
|
||||
onValueChange={(e) => setNouvellePiece({ ...nouvellePiece, coutUnitaire: e.value || 0 })}
|
||||
min={0}
|
||||
mode="currency"
|
||||
currency="EUR"
|
||||
locale="fr-FR"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-4">
|
||||
<label className="font-medium">Fournisseur</label>
|
||||
<InputText
|
||||
value={nouvellePiece.fournisseur}
|
||||
onChange={(e) => setNouvellePiece({ ...nouvellePiece, fournisseur: e.target.value })}
|
||||
placeholder="Fournisseur"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default EditMaintenancePage;
|
||||
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