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;
|
||||
565
app/(main)/maintenance/calendrier/page.tsx
Normal file
565
app/(main)/maintenance/calendrier/page.tsx
Normal file
@@ -0,0 +1,565 @@
|
||||
'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;
|
||||
576
app/(main)/maintenance/corrective/page.tsx
Normal file
576
app/(main)/maintenance/corrective/page.tsx
Normal file
@@ -0,0 +1,576 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { Button } from 'primereact/button';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { apiClient } from '../../../../services/api-client';
|
||||
|
||||
interface MaintenanceCorrective {
|
||||
id: number;
|
||||
materielId: number;
|
||||
materielNom: string;
|
||||
materielType: string;
|
||||
typeMaintenance: 'CORRECTIVE';
|
||||
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;
|
||||
description: string;
|
||||
problemeSignale: string;
|
||||
solutionApportee?: string;
|
||||
dureeEstimee: number;
|
||||
dureeReelle?: number;
|
||||
coutEstime?: number;
|
||||
coutReel?: number;
|
||||
piecesUtilisees: Array<{
|
||||
nom: string;
|
||||
quantite: number;
|
||||
cout: number;
|
||||
}>;
|
||||
gravite: 'MINEURE' | 'MODEREE' | 'MAJEURE' | 'CRITIQUE';
|
||||
impactProduction: 'AUCUN' | 'FAIBLE' | 'MOYEN' | 'ELEVE';
|
||||
causeRacine?: string;
|
||||
actionPreventive?: string;
|
||||
}
|
||||
|
||||
const MaintenanceCorrectivePage = () => {
|
||||
const [maintenances, setMaintenances] = useState<MaintenanceCorrective[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
const [filterStatut, setFilterStatut] = useState<string | null>(null);
|
||||
const [filterGravite, setFilterGravite] = useState<string | null>(null);
|
||||
const [filterImpact, setFilterImpact] = useState<string | null>(null);
|
||||
const [dateDebut, setDateDebut] = useState<Date | null>(null);
|
||||
const [dateFin, setDateFin] = useState<Date | null>(null);
|
||||
const [diagnosticDialog, setDiagnosticDialog] = useState(false);
|
||||
const [selectedMaintenance, setSelectedMaintenance] = useState<MaintenanceCorrective | null>(null);
|
||||
const [diagnostic, setDiagnostic] = useState({
|
||||
solutionApportee: '',
|
||||
causeRacine: '',
|
||||
actionPreventive: ''
|
||||
});
|
||||
const router = useRouter();
|
||||
|
||||
const statutOptions = [
|
||||
{ label: 'Tous', value: null },
|
||||
{ label: 'Planifiée', value: 'PLANIFIEE' },
|
||||
{ label: 'En cours', value: 'EN_COURS' },
|
||||
{ label: 'Terminée', value: 'TERMINEE' },
|
||||
{ label: 'Annulée', value: 'ANNULEE' },
|
||||
{ label: 'En attente', value: 'EN_ATTENTE' }
|
||||
];
|
||||
|
||||
const graviteOptions = [
|
||||
{ label: 'Toutes', value: null },
|
||||
{ label: 'Mineure', value: 'MINEURE' },
|
||||
{ label: 'Modérée', value: 'MODEREE' },
|
||||
{ label: 'Majeure', value: 'MAJEURE' },
|
||||
{ label: 'Critique', value: 'CRITIQUE' }
|
||||
];
|
||||
|
||||
const impactOptions = [
|
||||
{ label: 'Tous', value: null },
|
||||
{ label: 'Aucun', value: 'AUCUN' },
|
||||
{ label: 'Faible', value: 'FAIBLE' },
|
||||
{ label: 'Moyen', value: 'MOYEN' },
|
||||
{ label: 'Élevé', value: 'ELEVE' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
loadMaintenancesCorrectives();
|
||||
}, [filterStatut, filterGravite, filterImpact, dateDebut, dateFin]);
|
||||
|
||||
const loadMaintenancesCorrectives = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('🔄 Chargement des maintenances correctives...');
|
||||
|
||||
const params = new URLSearchParams();
|
||||
params.append('type', 'CORRECTIVE');
|
||||
if (filterStatut) params.append('statut', filterStatut);
|
||||
if (filterGravite) params.append('gravite', filterGravite);
|
||||
if (filterImpact) params.append('impact', filterImpact);
|
||||
if (dateDebut) params.append('dateDebut', dateDebut.toISOString().split('T')[0]);
|
||||
if (dateFin) params.append('dateFin', dateFin.toISOString().split('T')[0]);
|
||||
|
||||
const response = await apiClient.get(`/api/maintenances/correctives?${params.toString()}`);
|
||||
console.log('✅ Maintenances correctives chargées:', response.data);
|
||||
setMaintenances(response.data || []);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du chargement:', error);
|
||||
setMaintenances([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const demarrerMaintenance = async (maintenanceId: number) => {
|
||||
try {
|
||||
await apiClient.post(`/api/maintenances/${maintenanceId}/demarrer`);
|
||||
console.log('✅ Maintenance démarrée');
|
||||
loadMaintenancesCorrectives();
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du démarrage:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const ouvrirDiagnostic = (maintenance: MaintenanceCorrective) => {
|
||||
setSelectedMaintenance(maintenance);
|
||||
setDiagnostic({
|
||||
solutionApportee: maintenance.solutionApportee || '',
|
||||
causeRacine: maintenance.causeRacine || '',
|
||||
actionPreventive: maintenance.actionPreventive || ''
|
||||
});
|
||||
setDiagnosticDialog(true);
|
||||
};
|
||||
|
||||
const sauvegarderDiagnostic = async () => {
|
||||
if (!selectedMaintenance) return;
|
||||
|
||||
try {
|
||||
await apiClient.put(`/api/maintenances/${selectedMaintenance.id}/diagnostic`, diagnostic);
|
||||
console.log('✅ Diagnostic sauvegardé');
|
||||
setDiagnosticDialog(false);
|
||||
loadMaintenancesCorrectives();
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de la sauvegarde:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const terminerMaintenance = async (maintenanceId: number) => {
|
||||
try {
|
||||
await apiClient.post(`/api/maintenances/${maintenanceId}/terminer`);
|
||||
console.log('✅ Maintenance terminée');
|
||||
loadMaintenancesCorrectives();
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de la finalisation:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const statutBodyTemplate = (rowData: MaintenanceCorrective) => {
|
||||
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';
|
||||
}
|
||||
};
|
||||
|
||||
return <Tag value={rowData.statut} severity={getStatutSeverity(rowData.statut)} />;
|
||||
};
|
||||
|
||||
const graviteBodyTemplate = (rowData: MaintenanceCorrective) => {
|
||||
const getGraviteSeverity = (gravite: string) => {
|
||||
switch (gravite) {
|
||||
case 'MINEURE': return 'info';
|
||||
case 'MODEREE': return 'warning';
|
||||
case 'MAJEURE': return 'danger';
|
||||
case 'CRITIQUE': return 'danger';
|
||||
default: return 'secondary';
|
||||
}
|
||||
};
|
||||
|
||||
return <Tag value={rowData.gravite} severity={getGraviteSeverity(rowData.gravite)} />;
|
||||
};
|
||||
|
||||
const impactBodyTemplate = (rowData: MaintenanceCorrective) => {
|
||||
const getImpactSeverity = (impact: string) => {
|
||||
switch (impact) {
|
||||
case 'AUCUN': return 'success';
|
||||
case 'FAIBLE': return 'info';
|
||||
case 'MOYEN': return 'warning';
|
||||
case 'ELEVE': return 'danger';
|
||||
default: return 'secondary';
|
||||
}
|
||||
};
|
||||
|
||||
return <Tag value={rowData.impactProduction} severity={getImpactSeverity(rowData.impactProduction)} />;
|
||||
};
|
||||
|
||||
const materielBodyTemplate = (rowData: MaintenanceCorrective) => {
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className="font-medium">{rowData.materielNom}</span>
|
||||
<span className="text-sm text-500">{rowData.materielType}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const problemeBodyTemplate = (rowData: MaintenanceCorrective) => {
|
||||
return (
|
||||
<div className="max-w-20rem">
|
||||
<p className="m-0 text-sm line-height-3">
|
||||
{rowData.problemeSignale.length > 100
|
||||
? `${rowData.problemeSignale.substring(0, 100)}...`
|
||||
: rowData.problemeSignale
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const solutionBodyTemplate = (rowData: MaintenanceCorrective) => {
|
||||
if (rowData.solutionApportee) {
|
||||
return (
|
||||
<div className="max-w-20rem">
|
||||
<p className="m-0 text-sm line-height-3 text-green-600">
|
||||
{rowData.solutionApportee.length > 80
|
||||
? `${rowData.solutionApportee.substring(0, 80)}...`
|
||||
: rowData.solutionApportee
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <span className="text-500">En attente de diagnostic</span>;
|
||||
};
|
||||
|
||||
const dateBodyTemplate = (rowData: MaintenanceCorrective) => {
|
||||
const dateCreation = new Date(rowData.dateCreation);
|
||||
const datePlanifiee = new Date(rowData.datePlanifiee);
|
||||
const delai = Math.ceil((datePlanifiee.getTime() - dateCreation.getTime()) / (1000 * 3600 * 24));
|
||||
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className="text-sm text-500">
|
||||
Signalé: {dateCreation.toLocaleDateString('fr-FR')}
|
||||
</span>
|
||||
<span className="font-medium">
|
||||
Planifié: {datePlanifiee.toLocaleDateString('fr-FR')}
|
||||
</span>
|
||||
<span className={`text-xs ${delai > 3 ? 'text-red-500' : 'text-green-500'}`}>
|
||||
Délai: {delai} jour{delai > 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const technicienBodyTemplate = (rowData: MaintenanceCorrective) => {
|
||||
if (rowData.technicienNom) {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<i className="pi pi-user text-blue-500" />
|
||||
<span>{rowData.technicienNom}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Button
|
||||
label="Assigner"
|
||||
icon="pi pi-user-plus"
|
||||
className="p-button-outlined p-button-sm"
|
||||
onClick={() => router.push(`/maintenance/${rowData.id}/assigner`)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const coutBodyTemplate = (rowData: MaintenanceCorrective) => {
|
||||
const coutTotal = rowData.coutReel || rowData.coutEstime || 0;
|
||||
const coutPieces = rowData.piecesUtilisees?.reduce((total, piece) => total + piece.cout, 0) || 0;
|
||||
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className="font-medium">
|
||||
{coutTotal.toLocaleString('fr-FR')} €
|
||||
</span>
|
||||
{coutPieces > 0 && (
|
||||
<span className="text-sm text-500">
|
||||
Pièces: {coutPieces.toLocaleString('fr-FR')} €
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: MaintenanceCorrective) => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-eye"
|
||||
className="p-button-rounded p-button-info p-button-sm"
|
||||
onClick={() => router.push(`/maintenance/${rowData.id}`)}
|
||||
tooltip="Voir détails"
|
||||
/>
|
||||
{rowData.statut === 'PLANIFIEE' && (
|
||||
<Button
|
||||
icon="pi pi-play"
|
||||
className="p-button-rounded p-button-warning p-button-sm"
|
||||
onClick={() => demarrerMaintenance(rowData.id)}
|
||||
tooltip="Démarrer"
|
||||
/>
|
||||
)}
|
||||
{rowData.statut === 'EN_COURS' && (
|
||||
<>
|
||||
<Button
|
||||
icon="pi pi-cog"
|
||||
className="p-button-rounded p-button-secondary p-button-sm"
|
||||
onClick={() => ouvrirDiagnostic(rowData)}
|
||||
tooltip="Diagnostic"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-check"
|
||||
className="p-button-rounded p-button-success p-button-sm"
|
||||
onClick={() => terminerMaintenance(rowData.id)}
|
||||
tooltip="Terminer"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<Button
|
||||
icon="pi pi-pencil"
|
||||
className="p-button-rounded p-button-success p-button-sm"
|
||||
onClick={() => router.push(`/maintenance/${rowData.id}/edit`)}
|
||||
tooltip="Modifier"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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 Corrective"
|
||||
icon="pi pi-plus"
|
||||
className="p-button-success"
|
||||
onClick={() => router.push('/maintenance/nouveau?type=CORRECTIVE')}
|
||||
/>
|
||||
<Button
|
||||
label="Signaler Panne"
|
||||
icon="pi pi-exclamation-triangle"
|
||||
className="p-button-danger"
|
||||
onClick={() => router.push('/maintenance/signaler-panne')}
|
||||
/>
|
||||
<Button
|
||||
label="Rapport"
|
||||
icon="pi pi-file-pdf"
|
||||
className="p-button-secondary"
|
||||
onClick={() => router.push('/maintenance/rapport-corrective')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<span className="p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText
|
||||
type="search"
|
||||
placeholder="Rechercher..."
|
||||
value={globalFilter}
|
||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
<Button
|
||||
icon="pi pi-refresh"
|
||||
className="p-button-outlined"
|
||||
onClick={loadMaintenancesCorrectives}
|
||||
tooltip="Actualiser"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const header = (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h2 className="m-0">Maintenance Corrective</h2>
|
||||
<div className="flex gap-2 mt-2 md:mt-0">
|
||||
<Badge value={maintenances.filter(m => m.gravite === 'CRITIQUE').length} severity="danger" />
|
||||
<span>Critiques</span>
|
||||
<Badge value={maintenances.filter(m => m.impactProduction === 'ELEVE').length} severity="warning" />
|
||||
<span>Impact élevé</span>
|
||||
<Badge value={maintenances.filter(m => m.statut === 'EN_COURS').length} severity="info" />
|
||||
<span>En cours</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<Toolbar
|
||||
className="mb-4"
|
||||
left={leftToolbarTemplate}
|
||||
right={rightToolbarTemplate}
|
||||
/>
|
||||
|
||||
{/* Filtres */}
|
||||
<div className="grid mb-4">
|
||||
<div className="col-12 md:col-2">
|
||||
<label className="font-medium mb-2 block">Statut</label>
|
||||
<Dropdown
|
||||
value={filterStatut}
|
||||
options={statutOptions}
|
||||
onChange={(e) => setFilterStatut(e.value)}
|
||||
placeholder="Tous"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-2">
|
||||
<label className="font-medium mb-2 block">Gravité</label>
|
||||
<Dropdown
|
||||
value={filterGravite}
|
||||
options={graviteOptions}
|
||||
onChange={(e) => setFilterGravite(e.value)}
|
||||
placeholder="Toutes"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-2">
|
||||
<label className="font-medium mb-2 block">Impact</label>
|
||||
<Dropdown
|
||||
value={filterImpact}
|
||||
options={impactOptions}
|
||||
onChange={(e) => setFilterImpact(e.value)}
|
||||
placeholder="Tous"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-2">
|
||||
<label className="font-medium mb-2 block">Date début</label>
|
||||
<Calendar
|
||||
value={dateDebut}
|
||||
onChange={(e) => setDateDebut(e.value as Date)}
|
||||
showIcon
|
||||
dateFormat="dd/mm/yy"
|
||||
placeholder="Date début"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-2">
|
||||
<label className="font-medium mb-2 block">Date fin</label>
|
||||
<Calendar
|
||||
value={dateFin}
|
||||
onChange={(e) => setDateFin(e.value as Date)}
|
||||
showIcon
|
||||
dateFormat="dd/mm/yy"
|
||||
placeholder="Date fin"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-2">
|
||||
<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={() => {
|
||||
setFilterStatut(null);
|
||||
setFilterGravite(null);
|
||||
setFilterImpact(null);
|
||||
setDateDebut(null);
|
||||
setDateFin(null);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
value={maintenances}
|
||||
loading={loading}
|
||||
dataKey="id"
|
||||
paginator
|
||||
rows={10}
|
||||
rowsPerPageOptions={[5, 10, 25, 50]}
|
||||
className="datatable-responsive"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} maintenances correctives"
|
||||
globalFilter={globalFilter}
|
||||
emptyMessage="Aucune maintenance corrective trouvée."
|
||||
header={header}
|
||||
responsiveLayout="scroll"
|
||||
>
|
||||
<Column field="gravite" header="Gravité" body={graviteBodyTemplate} sortable style={{ width: '8rem' }} />
|
||||
<Column field="impactProduction" header="Impact" body={impactBodyTemplate} sortable style={{ width: '8rem' }} />
|
||||
<Column field="materielNom" header="Matériel" body={materielBodyTemplate} sortable />
|
||||
<Column field="statut" header="Statut" body={statutBodyTemplate} sortable style={{ width: '8rem' }} />
|
||||
<Column field="problemeSignale" header="Problème" body={problemeBodyTemplate} style={{ width: '15rem' }} />
|
||||
<Column field="solutionApportee" header="Solution" body={solutionBodyTemplate} style={{ width: '15rem' }} />
|
||||
<Column field="dateCreation" header="Dates" body={dateBodyTemplate} sortable style={{ width: '12rem' }} />
|
||||
<Column field="technicienNom" header="Technicien" body={technicienBodyTemplate} style={{ width: '10rem' }} />
|
||||
<Column field="coutEstime" header="Coût" body={coutBodyTemplate} sortable style={{ width: '8rem' }} />
|
||||
<Column body={actionBodyTemplate} header="Actions" style={{ width: '14rem' }} />
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Dialog Diagnostic */}
|
||||
<Dialog
|
||||
visible={diagnosticDialog}
|
||||
style={{ width: '50vw' }}
|
||||
header="Diagnostic de maintenance"
|
||||
modal
|
||||
onHide={() => setDiagnosticDialog(false)}
|
||||
footer={
|
||||
<div>
|
||||
<Button
|
||||
label="Annuler"
|
||||
icon="pi pi-times"
|
||||
className="p-button-outlined"
|
||||
onClick={() => setDiagnosticDialog(false)}
|
||||
/>
|
||||
<Button
|
||||
label="Sauvegarder"
|
||||
icon="pi pi-check"
|
||||
className="p-button-success"
|
||||
onClick={sauvegarderDiagnostic}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="grid p-fluid">
|
||||
<div className="col-12">
|
||||
<label className="font-medium">Solution apportée *</label>
|
||||
<InputTextarea
|
||||
value={diagnostic.solutionApportee}
|
||||
onChange={(e) => setDiagnostic({ ...diagnostic, solutionApportee: e.target.value })}
|
||||
rows={3}
|
||||
placeholder="Décrivez la solution mise en œuvre..."
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<label className="font-medium">Cause racine</label>
|
||||
<InputTextarea
|
||||
value={diagnostic.causeRacine}
|
||||
onChange={(e) => setDiagnostic({ ...diagnostic, causeRacine: e.target.value })}
|
||||
rows={2}
|
||||
placeholder="Identifiez la cause racine du problème..."
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<label className="font-medium">Action préventive</label>
|
||||
<InputTextarea
|
||||
value={diagnostic.actionPreventive}
|
||||
onChange={(e) => setDiagnostic({ ...diagnostic, actionPreventive: e.target.value })}
|
||||
rows={2}
|
||||
placeholder="Proposez une action pour éviter la récurrence..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MaintenanceCorrectivePage;
|
||||
490
app/(main)/maintenance/nouveau/page.tsx
Normal file
490
app/(main)/maintenance/nouveau/page.tsx
Normal file
@@ -0,0 +1,490 @@
|
||||
'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 { Tag } from 'primereact/tag';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { apiClient } from '../../../../services/api-client';
|
||||
|
||||
interface NouvelleMaintenance {
|
||||
materielId: number;
|
||||
typeMaintenance: 'PREVENTIVE' | 'CORRECTIVE' | 'PLANIFIEE' | 'URGENTE';
|
||||
priorite: 'BASSE' | 'NORMALE' | 'HAUTE' | 'CRITIQUE';
|
||||
datePlanifiee: Date | null;
|
||||
technicienId?: number;
|
||||
description: string;
|
||||
problemeSignale?: string;
|
||||
coutEstime?: number;
|
||||
dureeEstimee: number;
|
||||
observations?: string;
|
||||
}
|
||||
|
||||
interface Materiel {
|
||||
id: number;
|
||||
nom: string;
|
||||
type: string;
|
||||
marque: string;
|
||||
modele: string;
|
||||
statut: string;
|
||||
derniereMaintenance?: string;
|
||||
prochaineMaintenance?: string;
|
||||
}
|
||||
|
||||
interface Technicien {
|
||||
id: number;
|
||||
nom: string;
|
||||
prenom: string;
|
||||
specialites: string[];
|
||||
disponible: boolean;
|
||||
}
|
||||
|
||||
const NouvellMaintenancePage = () => {
|
||||
const [maintenance, setMaintenance] = useState<NouvelleMaintenance>({
|
||||
materielId: 0,
|
||||
typeMaintenance: 'PREVENTIVE',
|
||||
priorite: 'NORMALE',
|
||||
datePlanifiee: null,
|
||||
description: '',
|
||||
dureeEstimee: 2
|
||||
});
|
||||
const [materiels, setMateriels] = useState<Materiel[]>([]);
|
||||
const [techniciens, setTechniciens] = useState<Technicien[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [errors, setErrors] = useState<{ [key: string]: string }>({});
|
||||
const router = useRouter();
|
||||
|
||||
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(() => {
|
||||
loadMateriels();
|
||||
loadTechniciens();
|
||||
}, []);
|
||||
|
||||
const loadMateriels = async () => {
|
||||
try {
|
||||
console.log('🔄 Chargement des matériels...');
|
||||
const response = await apiClient.get('/api/materiels');
|
||||
console.log('✅ Matériels chargés:', response.data);
|
||||
setMateriels(response.data || []);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du chargement des matériels:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const loadTechniciens = async () => {
|
||||
try {
|
||||
console.log('🔄 Chargement des techniciens...');
|
||||
const response = await apiClient.get('/api/employes/techniciens');
|
||||
console.log('✅ Techniciens chargés:', response.data);
|
||||
setTechniciens(response.data || []);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du chargement des techniciens:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: { [key: string]: string } = {};
|
||||
|
||||
if (!maintenance.materielId) {
|
||||
newErrors.materielId = 'Le matériel est requis';
|
||||
}
|
||||
|
||||
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('🔄 Création de la maintenance...', maintenance);
|
||||
|
||||
const maintenanceData = {
|
||||
...maintenance,
|
||||
datePlanifiee: maintenance.datePlanifiee?.toISOString().split('T')[0]
|
||||
};
|
||||
|
||||
const response = await apiClient.post('/api/maintenances', maintenanceData);
|
||||
console.log('✅ Maintenance créée avec succès:', response.data);
|
||||
|
||||
router.push('/maintenance');
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de la création:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const materielOptionTemplate = (option: Materiel) => {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<div>
|
||||
<div className="font-medium">{option.nom}</div>
|
||||
<div className="text-sm text-500">{option.type} - {option.marque} {option.modele}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const technicienOptionTemplate = (option: Technicien) => {
|
||||
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(', ')}
|
||||
{option.disponible ? (
|
||||
<Tag value="Disponible" severity="success" className="ml-2 p-tag-sm" />
|
||||
) : (
|
||||
<Tag value="Occupé" severity="warning" className="ml-2 p-tag-sm" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getStatutColor = (statut: string) => {
|
||||
switch (statut) {
|
||||
case 'DISPONIBLE': return 'success';
|
||||
case 'EN_UTILISATION': return 'warning';
|
||||
case 'EN_MAINTENANCE': return 'danger';
|
||||
case 'HORS_SERVICE': return 'danger';
|
||||
default: return 'secondary';
|
||||
}
|
||||
};
|
||||
|
||||
const statutBodyTemplate = (rowData: Materiel) => {
|
||||
return <Tag value={rowData.statut} severity={getStatutColor(rowData.statut)} />;
|
||||
};
|
||||
|
||||
const maintenanceBodyTemplate = (rowData: Materiel) => {
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
{rowData.derniereMaintenance && (
|
||||
<span className="text-sm">
|
||||
Dernière: {new Date(rowData.derniereMaintenance).toLocaleDateString('fr-FR')}
|
||||
</span>
|
||||
)}
|
||||
{rowData.prochaineMaintenance && (
|
||||
<span className="text-sm text-orange-500">
|
||||
Prochaine: {new Date(rowData.prochaineMaintenance).toLocaleDateString('fr-FR')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
label="Retour à la maintenance"
|
||||
icon="pi pi-arrow-left"
|
||||
className="p-button-outlined"
|
||||
onClick={() => router.push('/maintenance')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
label="Annuler"
|
||||
icon="pi pi-times"
|
||||
className="p-button-outlined"
|
||||
onClick={() => router.push('/maintenance')}
|
||||
/>
|
||||
<Button
|
||||
label="Créer la maintenance"
|
||||
icon="pi pi-check"
|
||||
className="p-button-success"
|
||||
loading={loading}
|
||||
onClick={handleSubmit}
|
||||
/>
|
||||
</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="Nouvelle Maintenance">
|
||||
<form onSubmit={handleSubmit} className="p-fluid">
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="materiel" className="font-medium">
|
||||
Matériel *
|
||||
</label>
|
||||
<Dropdown
|
||||
id="materiel"
|
||||
value={maintenance.materielId}
|
||||
options={materiels}
|
||||
onChange={(e) => setMaintenance({ ...maintenance, materielId: e.value })}
|
||||
optionLabel="nom"
|
||||
optionValue="id"
|
||||
placeholder="Sélectionner un matériel"
|
||||
itemTemplate={materielOptionTemplate}
|
||||
className={errors.materielId ? 'p-invalid' : ''}
|
||||
filter
|
||||
/>
|
||||
{errors.materielId && <small className="p-error">{errors.materielId}</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 md:col-4">
|
||||
<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-4">
|
||||
<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-4">
|
||||
<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' : ''}
|
||||
minDate={new Date()}
|
||||
/>
|
||||
{errors.datePlanifiee && <small className="p-error">{errors.datePlanifiee}</small>}
|
||||
</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 à effectuer..."
|
||||
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>
|
||||
)}
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="duree" className="font-medium">
|
||||
Durée estimée (heures) *
|
||||
</label>
|
||||
<InputNumber
|
||||
id="duree"
|
||||
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>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label htmlFor="cout" className="font-medium">
|
||||
Coût estimé (€)
|
||||
</label>
|
||||
<InputNumber
|
||||
id="cout"
|
||||
value={maintenance.coutEstime}
|
||||
onValueChange={(e) => setMaintenance({ ...maintenance, coutEstime: 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>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-4">
|
||||
<Card title="Matériels disponibles" className="mb-4">
|
||||
<DataTable
|
||||
value={materiels.filter(m => m.statut !== 'HORS_SERVICE')}
|
||||
responsiveLayout="scroll"
|
||||
paginator
|
||||
rows={5}
|
||||
emptyMessage="Aucun matériel disponible"
|
||||
>
|
||||
<Column field="nom" header="Nom" />
|
||||
<Column field="type" header="Type" />
|
||||
<Column field="statut" header="Statut" body={statutBodyTemplate} />
|
||||
<Column field="derniereMaintenance" header="Maintenance" body={maintenanceBodyTemplate} />
|
||||
</DataTable>
|
||||
</Card>
|
||||
|
||||
<Card title="Conseils">
|
||||
<div className="text-sm">
|
||||
<p className="mb-2">
|
||||
<i className="pi pi-info-circle text-blue-500 mr-2" />
|
||||
Planifiez les maintenances préventives en avance.
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
<i className="pi pi-exclamation-triangle text-orange-500 mr-2" />
|
||||
Les maintenances urgentes ont la priorité absolue.
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
<i className="pi pi-user text-green-500 mr-2" />
|
||||
Assignez un technicien qualifié pour le type de matériel.
|
||||
</p>
|
||||
<p>
|
||||
<i className="pi pi-euro text-purple-500 mr-2" />
|
||||
Estimez le coût pour le suivi budgétaire.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NouvellMaintenancePage;
|
||||
477
app/(main)/maintenance/page.tsx
Normal file
477
app/(main)/maintenance/page.tsx
Normal file
@@ -0,0 +1,477 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { Button } from 'primereact/button';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { ConfirmDialog } from 'primereact/confirmdialog';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { apiClient } from '../../../services/api-client';
|
||||
|
||||
interface Maintenance {
|
||||
id: number;
|
||||
materielId: number;
|
||||
materielNom: string;
|
||||
materielType: 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;
|
||||
description: string;
|
||||
problemeSignale?: string;
|
||||
solutionApportee?: string;
|
||||
coutEstime?: number;
|
||||
coutReel?: number;
|
||||
piecesUtilisees: Array<{
|
||||
nom: string;
|
||||
quantite: number;
|
||||
cout: number;
|
||||
}>;
|
||||
dureeEstimee: number; // en heures
|
||||
dureeReelle?: number; // en heures
|
||||
prochaineMaintenance?: string;
|
||||
observations?: string;
|
||||
}
|
||||
|
||||
const MaintenancePage = () => {
|
||||
const [maintenances, setMaintenances] = useState<Maintenance[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
const [selectedMaintenances, setSelectedMaintenances] = useState<Maintenance[]>([]);
|
||||
const [deleteDialog, setDeleteDialog] = useState(false);
|
||||
const [maintenanceToDelete, setMaintenanceToDelete] = useState<Maintenance | null>(null);
|
||||
const [filterType, setFilterType] = useState<string | null>(null);
|
||||
const [filterStatut, setFilterStatut] = useState<string | null>(null);
|
||||
const [filterPriorite, setFilterPriorite] = useState<string | null>(null);
|
||||
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 statutOptions = [
|
||||
{ label: 'Tous', value: null },
|
||||
{ label: 'Planifiée', value: 'PLANIFIEE' },
|
||||
{ label: 'En cours', value: 'EN_COURS' },
|
||||
{ label: 'Terminée', value: 'TERMINEE' },
|
||||
{ label: 'Annulée', value: 'ANNULEE' },
|
||||
{ label: 'En attente', value: 'EN_ATTENTE' }
|
||||
];
|
||||
|
||||
const prioriteOptions = [
|
||||
{ label: 'Toutes', value: null },
|
||||
{ label: 'Basse', value: 'BASSE' },
|
||||
{ label: 'Normale', value: 'NORMALE' },
|
||||
{ label: 'Haute', value: 'HAUTE' },
|
||||
{ label: 'Critique', value: 'CRITIQUE' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
loadMaintenances();
|
||||
}, [filterType, filterStatut, filterPriorite]);
|
||||
|
||||
const loadMaintenances = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('🔄 Chargement des maintenances...');
|
||||
|
||||
const params = new URLSearchParams();
|
||||
if (filterType) params.append('type', filterType);
|
||||
if (filterStatut) params.append('statut', filterStatut);
|
||||
if (filterPriorite) params.append('priorite', filterPriorite);
|
||||
|
||||
const response = await apiClient.get(`/api/maintenances?${params.toString()}`);
|
||||
console.log('✅ Maintenances chargées:', response.data);
|
||||
setMaintenances(response.data || []);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du chargement des maintenances:', error);
|
||||
setMaintenances([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const confirmDeleteMaintenance = (maintenance: Maintenance) => {
|
||||
setMaintenanceToDelete(maintenance);
|
||||
setDeleteDialog(true);
|
||||
};
|
||||
|
||||
const deleteMaintenance = async () => {
|
||||
if (maintenanceToDelete) {
|
||||
try {
|
||||
await apiClient.delete(`/api/maintenances/${maintenanceToDelete.id}`);
|
||||
setMaintenances(maintenances.filter(m => m.id !== maintenanceToDelete.id));
|
||||
setDeleteDialog(false);
|
||||
setMaintenanceToDelete(null);
|
||||
console.log('✅ Maintenance supprimée avec succès');
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de la suppression:', error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const changerStatutMaintenance = async (maintenance: Maintenance, nouveauStatut: string) => {
|
||||
try {
|
||||
await apiClient.post(`/api/maintenances/${maintenance.id}/statut`, { statut: nouveauStatut });
|
||||
|
||||
setMaintenances(maintenances.map(m =>
|
||||
m.id === maintenance.id ? { ...m, statut: nouveauStatut as any } : m
|
||||
));
|
||||
|
||||
console.log(`✅ Statut maintenance changé: ${nouveauStatut}`);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du changement de statut:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const typeBodyTemplate = (rowData: Maintenance) => {
|
||||
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';
|
||||
}
|
||||
};
|
||||
|
||||
return <Tag value={rowData.typeMaintenance} severity={getTypeSeverity(rowData.typeMaintenance)} />;
|
||||
};
|
||||
|
||||
const statutBodyTemplate = (rowData: Maintenance) => {
|
||||
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';
|
||||
}
|
||||
};
|
||||
|
||||
return <Tag value={rowData.statut} severity={getStatutSeverity(rowData.statut)} />;
|
||||
};
|
||||
|
||||
const prioriteBodyTemplate = (rowData: Maintenance) => {
|
||||
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';
|
||||
}
|
||||
};
|
||||
|
||||
return <Tag value={rowData.priorite} severity={getPrioriteSeverity(rowData.priorite)} />;
|
||||
};
|
||||
|
||||
const materielBodyTemplate = (rowData: Maintenance) => {
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className="font-medium">{rowData.materielNom}</span>
|
||||
<span className="text-sm text-500">{rowData.materielType}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const technicienBodyTemplate = (rowData: Maintenance) => {
|
||||
if (rowData.technicienNom) {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<i className="pi pi-user text-blue-500" />
|
||||
<span>{rowData.technicienNom}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <span className="text-500">Non assigné</span>;
|
||||
};
|
||||
|
||||
const dateBodyTemplate = (rowData: Maintenance) => {
|
||||
const datePlanifiee = new Date(rowData.datePlanifiee);
|
||||
const isUrgent = rowData.typeMaintenance === 'URGENTE';
|
||||
const isRetard = datePlanifiee < new Date() && rowData.statut !== 'TERMINEE';
|
||||
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className={`font-medium ${isRetard ? 'text-red-500' : ''}`}>
|
||||
{datePlanifiee.toLocaleDateString('fr-FR')}
|
||||
</span>
|
||||
{isUrgent && <Tag value="URGENT" severity="danger" className="p-tag-sm" />}
|
||||
{isRetard && <Tag value="RETARD" severity="danger" className="p-tag-sm" />}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const coutBodyTemplate = (rowData: Maintenance) => {
|
||||
const coutAffiche = rowData.coutReel || rowData.coutEstime;
|
||||
const isReel = !!rowData.coutReel;
|
||||
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
{coutAffiche && (
|
||||
<span className={`font-medium ${isReel ? 'text-green-500' : 'text-orange-500'}`}>
|
||||
{coutAffiche.toLocaleString('fr-FR')} €
|
||||
</span>
|
||||
)}
|
||||
<span className="text-sm text-500">
|
||||
{isReel ? 'Coût réel' : 'Coût estimé'}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const dureeBodyTemplate = (rowData: Maintenance) => {
|
||||
const dureeAffichee = rowData.dureeReelle || rowData.dureeEstimee;
|
||||
const isReelle = !!rowData.dureeReelle;
|
||||
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className={`font-medium ${isReelle ? 'text-green-500' : 'text-orange-500'}`}>
|
||||
{dureeAffichee}h
|
||||
</span>
|
||||
<span className="text-sm text-500">
|
||||
{isReelle ? 'Durée réelle' : 'Durée estimée'}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: Maintenance) => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-eye"
|
||||
className="p-button-rounded p-button-info p-button-sm"
|
||||
onClick={() => router.push(`/maintenance/${rowData.id}`)}
|
||||
tooltip="Voir détails"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-pencil"
|
||||
className="p-button-rounded p-button-success p-button-sm"
|
||||
onClick={() => router.push(`/maintenance/${rowData.id}/edit`)}
|
||||
tooltip="Modifier"
|
||||
/>
|
||||
{rowData.statut === 'PLANIFIEE' && (
|
||||
<Button
|
||||
icon="pi pi-play"
|
||||
className="p-button-rounded p-button-warning p-button-sm"
|
||||
onClick={() => changerStatutMaintenance(rowData, 'EN_COURS')}
|
||||
tooltip="Démarrer"
|
||||
/>
|
||||
)}
|
||||
{rowData.statut === 'EN_COURS' && (
|
||||
<Button
|
||||
icon="pi pi-check"
|
||||
className="p-button-rounded p-button-success p-button-sm"
|
||||
onClick={() => changerStatutMaintenance(rowData, 'TERMINEE')}
|
||||
tooltip="Terminer"
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
icon="pi pi-trash"
|
||||
className="p-button-rounded p-button-danger p-button-sm"
|
||||
onClick={() => confirmDeleteMaintenance(rowData)}
|
||||
tooltip="Supprimer"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
label="Nouvelle Maintenance"
|
||||
icon="pi pi-plus"
|
||||
className="p-button-success"
|
||||
onClick={() => router.push('/maintenance/nouveau')}
|
||||
/>
|
||||
<Button
|
||||
label="Préventive"
|
||||
icon="pi pi-calendar-clock"
|
||||
className="p-button-info"
|
||||
onClick={() => router.push('/maintenance/preventive')}
|
||||
/>
|
||||
<Button
|
||||
label="Corrective"
|
||||
icon="pi pi-wrench"
|
||||
className="p-button-warning"
|
||||
onClick={() => router.push('/maintenance/corrective')}
|
||||
/>
|
||||
<Button
|
||||
label="Urgente"
|
||||
icon="pi pi-exclamation-triangle"
|
||||
className="p-button-danger"
|
||||
onClick={() => router.push('/maintenance/urgente')}
|
||||
/>
|
||||
<Button
|
||||
label="Calendrier"
|
||||
icon="pi pi-calendar"
|
||||
className="p-button-secondary"
|
||||
onClick={() => router.push('/maintenance/calendrier')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<span className="p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText
|
||||
type="search"
|
||||
placeholder="Rechercher..."
|
||||
value={globalFilter}
|
||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
<Button
|
||||
icon="pi pi-refresh"
|
||||
className="p-button-outlined"
|
||||
onClick={loadMaintenances}
|
||||
tooltip="Actualiser"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const header = (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h2 className="m-0">Gestion de la Maintenance</h2>
|
||||
<div className="flex gap-2 mt-2 md:mt-0">
|
||||
<Badge value={maintenances.filter(m => m.statut === 'EN_COURS').length} severity="warning" />
|
||||
<span>En cours</span>
|
||||
<Badge value={maintenances.filter(m => m.typeMaintenance === 'URGENTE').length} severity="danger" />
|
||||
<span>Urgentes</span>
|
||||
<Badge value={maintenances.filter(m => new Date(m.datePlanifiee) < new Date() && m.statut !== 'TERMINEE').length} severity="danger" />
|
||||
<span>En retard</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<Toolbar
|
||||
className="mb-4"
|
||||
left={leftToolbarTemplate}
|
||||
right={rightToolbarTemplate}
|
||||
/>
|
||||
|
||||
{/* Filtres */}
|
||||
<div className="grid mb-4">
|
||||
<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">Statut</label>
|
||||
<Dropdown
|
||||
value={filterStatut}
|
||||
options={statutOptions}
|
||||
onChange={(e) => setFilterStatut(e.value)}
|
||||
placeholder="Tous les statuts"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<label className="font-medium mb-2 block">Priorité</label>
|
||||
<Dropdown
|
||||
value={filterPriorite}
|
||||
options={prioriteOptions}
|
||||
onChange={(e) => setFilterPriorite(e.value)}
|
||||
placeholder="Toutes les priorités"
|
||||
/>
|
||||
</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);
|
||||
setFilterStatut(null);
|
||||
setFilterPriorite(null);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
value={maintenances}
|
||||
loading={loading}
|
||||
dataKey="id"
|
||||
paginator
|
||||
rows={10}
|
||||
rowsPerPageOptions={[5, 10, 25, 50]}
|
||||
className="datatable-responsive"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} maintenances"
|
||||
globalFilter={globalFilter}
|
||||
emptyMessage="Aucune maintenance trouvée."
|
||||
header={header}
|
||||
selection={selectedMaintenances}
|
||||
onSelectionChange={(e) => setSelectedMaintenances(e.value)}
|
||||
responsiveLayout="scroll"
|
||||
>
|
||||
<Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
|
||||
<Column field="typeMaintenance" header="Type" body={typeBodyTemplate} sortable />
|
||||
<Column field="priorite" header="Priorité" body={prioriteBodyTemplate} sortable />
|
||||
<Column field="materielNom" header="Matériel" body={materielBodyTemplate} sortable />
|
||||
<Column field="statut" header="Statut" body={statutBodyTemplate} sortable />
|
||||
<Column field="technicienNom" header="Technicien" body={technicienBodyTemplate} sortable />
|
||||
<Column field="datePlanifiee" header="Date planifiée" body={dateBodyTemplate} sortable />
|
||||
<Column field="coutEstime" header="Coût" body={coutBodyTemplate} sortable />
|
||||
<Column field="dureeEstimee" header="Durée" body={dureeBodyTemplate} sortable />
|
||||
<Column field="description" header="Description" />
|
||||
<Column body={actionBodyTemplate} header="Actions" style={{ minWidth: '14rem' }} />
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
visible={deleteDialog}
|
||||
onHide={() => setDeleteDialog(false)}
|
||||
message={`Êtes-vous sûr de vouloir supprimer cette maintenance ?`}
|
||||
header="Confirmation de suppression"
|
||||
icon="pi pi-exclamation-triangle"
|
||||
accept={deleteMaintenance}
|
||||
reject={() => setDeleteDialog(false)}
|
||||
acceptLabel="Oui"
|
||||
rejectLabel="Non"
|
||||
acceptClassName="p-button-danger"
|
||||
/>
|
||||
|
||||
<Toast />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MaintenancePage;
|
||||
593
app/(main)/maintenance/pieces/page.tsx
Normal file
593
app/(main)/maintenance/pieces/page.tsx
Normal file
@@ -0,0 +1,593 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Button } from 'primereact/button';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import { FilterMatchMode } from 'primereact/api';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { apiClient } from '../../../../services/api-client';
|
||||
|
||||
interface PieceDetachee {
|
||||
id: number;
|
||||
nom: string;
|
||||
reference: string;
|
||||
description: string;
|
||||
categorie: string;
|
||||
fournisseur: string;
|
||||
coutUnitaire: number;
|
||||
quantiteStock: number;
|
||||
seuilAlerte: number;
|
||||
seuilCritique: number;
|
||||
uniteStock: string;
|
||||
localisation: string;
|
||||
dateAchat?: string;
|
||||
garantie?: number; // en mois
|
||||
materielsCompatibles: string[];
|
||||
frequenceUtilisation: number;
|
||||
derniereMaintenance?: string;
|
||||
prochainCommande?: string;
|
||||
statut: 'DISPONIBLE' | 'RUPTURE' | 'ALERTE' | 'COMMANDE';
|
||||
historiqueUtilisation: Array<{
|
||||
date: string;
|
||||
quantite: number;
|
||||
maintenanceId: number;
|
||||
technicien: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
interface NouvellePiece {
|
||||
nom: string;
|
||||
reference: string;
|
||||
description: string;
|
||||
categorie: string;
|
||||
fournisseur: string;
|
||||
coutUnitaire: number;
|
||||
quantiteStock: number;
|
||||
seuilAlerte: number;
|
||||
seuilCritique: number;
|
||||
uniteStock: string;
|
||||
localisation: string;
|
||||
garantie?: number;
|
||||
materielsCompatibles: string[];
|
||||
}
|
||||
|
||||
const PiecesDetacheesPage = () => {
|
||||
const [pieces, setPieces] = useState<PieceDetachee[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [pieceDialog, setPieceDialog] = useState(false);
|
||||
const [nouvellePiece, setNouvellePiece] = useState<NouvellePiece>({
|
||||
nom: '',
|
||||
reference: '',
|
||||
description: '',
|
||||
categorie: '',
|
||||
fournisseur: '',
|
||||
coutUnitaire: 0,
|
||||
quantiteStock: 0,
|
||||
seuilAlerte: 10,
|
||||
seuilCritique: 5,
|
||||
uniteStock: 'unité',
|
||||
localisation: '',
|
||||
materielsCompatibles: []
|
||||
});
|
||||
const [selectedPieces, setSelectedPieces] = useState<PieceDetachee[]>([]);
|
||||
const [globalFilterValue, setGlobalFilterValue] = useState('');
|
||||
const [filters, setFilters] = useState({
|
||||
global: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
||||
nom: { value: null, matchMode: FilterMatchMode.STARTS_WITH },
|
||||
reference: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
||||
categorie: { value: null, matchMode: FilterMatchMode.EQUALS },
|
||||
fournisseur: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
||||
statut: { value: null, matchMode: FilterMatchMode.EQUALS }
|
||||
});
|
||||
const router = useRouter();
|
||||
|
||||
const categorieOptions = [
|
||||
{ label: 'Moteur', value: 'MOTEUR' },
|
||||
{ label: 'Hydraulique', value: 'HYDRAULIQUE' },
|
||||
{ label: 'Électrique', value: 'ELECTRIQUE' },
|
||||
{ label: 'Mécanique', value: 'MECANIQUE' },
|
||||
{ label: 'Pneumatique', value: 'PNEUMATIQUE' },
|
||||
{ label: 'Filtres', value: 'FILTRES' },
|
||||
{ label: 'Lubrifiants', value: 'LUBRIFIANTS' },
|
||||
{ label: 'Consommables', value: 'CONSOMMABLES' }
|
||||
];
|
||||
|
||||
const uniteOptions = [
|
||||
{ label: 'Unité', value: 'unité' },
|
||||
{ label: 'Litre', value: 'litre' },
|
||||
{ label: 'Kilogramme', value: 'kg' },
|
||||
{ label: 'Mètre', value: 'mètre' },
|
||||
{ label: 'Boîte', value: 'boîte' },
|
||||
{ label: 'Lot', value: 'lot' }
|
||||
];
|
||||
|
||||
const statutOptions = [
|
||||
{ label: 'Tous', value: null },
|
||||
{ label: 'Disponible', value: 'DISPONIBLE' },
|
||||
{ label: 'Alerte', value: 'ALERTE' },
|
||||
{ label: 'Rupture', value: 'RUPTURE' },
|
||||
{ label: 'En commande', value: 'COMMANDE' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
loadPieces();
|
||||
}, []);
|
||||
|
||||
const loadPieces = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('🔄 Chargement des pièces détachées...');
|
||||
const response = await apiClient.get('/api/maintenance/pieces-detachees');
|
||||
console.log('✅ Pièces chargées:', response.data);
|
||||
setPieces(response.data || []);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du chargement des pièces:', error);
|
||||
setPieces([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const ajouterPiece = async () => {
|
||||
try {
|
||||
console.log('🔄 Ajout d\'une nouvelle pièce...', nouvellePiece);
|
||||
const response = await apiClient.post('/api/maintenance/pieces-detachees', nouvellePiece);
|
||||
console.log('✅ Pièce ajoutée avec succès:', response.data);
|
||||
|
||||
setPieceDialog(false);
|
||||
setNouvellePiece({
|
||||
nom: '',
|
||||
reference: '',
|
||||
description: '',
|
||||
categorie: '',
|
||||
fournisseur: '',
|
||||
coutUnitaire: 0,
|
||||
quantiteStock: 0,
|
||||
seuilAlerte: 10,
|
||||
seuilCritique: 5,
|
||||
uniteStock: 'unité',
|
||||
localisation: '',
|
||||
materielsCompatibles: []
|
||||
});
|
||||
loadPieces();
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de l\'ajout de la pièce:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const supprimerPieces = async () => {
|
||||
try {
|
||||
console.log('🔄 Suppression des pièces sélectionnées...');
|
||||
await Promise.all(
|
||||
selectedPieces.map(piece =>
|
||||
apiClient.delete(`/api/maintenance/pieces-detachees/${piece.id}`)
|
||||
)
|
||||
);
|
||||
console.log('✅ Pièces supprimées avec succès');
|
||||
setSelectedPieces([]);
|
||||
loadPieces();
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de la suppression:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const commanderPieces = async () => {
|
||||
try {
|
||||
console.log('🔄 Commande des pièces sélectionnées...');
|
||||
const pieceIds = selectedPieces.map(p => p.id);
|
||||
await apiClient.post('/api/maintenance/pieces-detachees/commander', { pieceIds });
|
||||
console.log('✅ Commande créée avec succès');
|
||||
setSelectedPieces([]);
|
||||
loadPieces();
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de la commande:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const onGlobalFilterChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
let _filters = { ...filters };
|
||||
_filters['global'].value = value;
|
||||
|
||||
setFilters(_filters);
|
||||
setGlobalFilterValue(value);
|
||||
};
|
||||
|
||||
const pieceBodyTemplate = (rowData: PieceDetachee) => {
|
||||
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-xs text-500">{rowData.description}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const stockBodyTemplate = (rowData: PieceDetachee) => {
|
||||
const pourcentageStock = (rowData.quantiteStock / (rowData.seuilAlerte * 2)) * 100;
|
||||
const couleur = rowData.quantiteStock <= rowData.seuilCritique ? 'danger' :
|
||||
rowData.quantiteStock <= rowData.seuilAlerte ? 'warning' : 'success';
|
||||
|
||||
return (
|
||||
<div className="flex flex-column gap-2">
|
||||
<div className="flex align-items-center gap-2">
|
||||
<span className="font-medium">{rowData.quantiteStock} {rowData.uniteStock}</span>
|
||||
<ProgressBar
|
||||
value={Math.min(pourcentageStock, 100)}
|
||||
className="flex-1"
|
||||
color={couleur === 'danger' ? '#f87171' : couleur === 'warning' ? '#fbbf24' : '#10b981'}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-xs text-500">
|
||||
Alerte: {rowData.seuilAlerte} | Critique: {rowData.seuilCritique}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const statutBodyTemplate = (rowData: PieceDetachee) => {
|
||||
const getStatutSeverity = (statut: string) => {
|
||||
switch (statut) {
|
||||
case 'DISPONIBLE': return 'success';
|
||||
case 'ALERTE': return 'warning';
|
||||
case 'RUPTURE': return 'danger';
|
||||
case 'COMMANDE': return 'info';
|
||||
default: return 'secondary';
|
||||
}
|
||||
};
|
||||
|
||||
return <Tag value={rowData.statut} severity={getStatutSeverity(rowData.statut)} />;
|
||||
};
|
||||
|
||||
const coutBodyTemplate = (rowData: PieceDetachee) => {
|
||||
const valeurStock = rowData.quantiteStock * rowData.coutUnitaire;
|
||||
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className="font-medium">{rowData.coutUnitaire.toLocaleString('fr-FR')} €</span>
|
||||
<span className="text-sm text-500">
|
||||
Stock: {valeurStock.toLocaleString('fr-FR')} €
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const materielsBodyTemplate = (rowData: PieceDetachee) => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{rowData.materielsCompatibles.slice(0, 3).map((materiel, index) => (
|
||||
<Tag key={index} value={materiel} className="p-tag-sm" />
|
||||
))}
|
||||
{rowData.materielsCompatibles.length > 3 && (
|
||||
<Badge value={`+${rowData.materielsCompatibles.length - 3}`} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: PieceDetachee) => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-eye"
|
||||
className="p-button-rounded p-button-info p-button-sm"
|
||||
onClick={() => router.push(`/maintenance/pieces/${rowData.id}`)}
|
||||
tooltip="Voir détails"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-pencil"
|
||||
className="p-button-rounded p-button-success p-button-sm"
|
||||
onClick={() => router.push(`/maintenance/pieces/${rowData.id}/edit`)}
|
||||
tooltip="Modifier"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-shopping-cart"
|
||||
className="p-button-rounded p-button-warning p-button-sm"
|
||||
onClick={() => commanderPieces()}
|
||||
tooltip="Commander"
|
||||
disabled={rowData.statut === 'COMMANDE'}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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 Pièce"
|
||||
icon="pi pi-plus"
|
||||
className="p-button-success"
|
||||
onClick={() => setPieceDialog(true)}
|
||||
/>
|
||||
<Button
|
||||
label="Commander Sélection"
|
||||
icon="pi pi-shopping-cart"
|
||||
className="p-button-warning"
|
||||
onClick={commanderPieces}
|
||||
disabled={selectedPieces.length === 0}
|
||||
/>
|
||||
<Button
|
||||
label="Supprimer"
|
||||
icon="pi pi-trash"
|
||||
className="p-button-danger"
|
||||
onClick={supprimerPieces}
|
||||
disabled={selectedPieces.length === 0}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
label="Inventaire"
|
||||
icon="pi pi-list"
|
||||
className="p-button-info"
|
||||
onClick={() => router.push('/maintenance/inventaire')}
|
||||
/>
|
||||
<Button
|
||||
label="Commandes"
|
||||
icon="pi pi-shopping-bag"
|
||||
className="p-button-secondary"
|
||||
onClick={() => router.push('/maintenance/commandes')}
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-refresh"
|
||||
className="p-button-outlined"
|
||||
onClick={loadPieces}
|
||||
tooltip="Actualiser"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const header = (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h2 className="m-0">Gestion des Pièces Détachées</h2>
|
||||
<div className="flex gap-2 mt-2 md:mt-0">
|
||||
<Badge value={pieces.filter(p => p.statut === 'RUPTURE').length} severity="danger" />
|
||||
<span>Ruptures</span>
|
||||
<Badge value={pieces.filter(p => p.statut === 'ALERTE').length} severity="warning" />
|
||||
<span>Alertes</span>
|
||||
<Badge value={pieces.filter(p => p.statut === 'COMMANDE').length} severity="info" />
|
||||
<span>Commandes</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const renderHeader = () => {
|
||||
return (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between gap-2">
|
||||
<div className="flex gap-2">
|
||||
<Dropdown
|
||||
value={filters.statut.value}
|
||||
options={statutOptions}
|
||||
onChange={(e) => {
|
||||
let _filters = { ...filters };
|
||||
_filters.statut.value = e.value;
|
||||
setFilters(_filters);
|
||||
}}
|
||||
placeholder="Filtrer par statut"
|
||||
showClear
|
||||
/>
|
||||
<Dropdown
|
||||
value={filters.categorie.value}
|
||||
options={categorieOptions}
|
||||
onChange={(e) => {
|
||||
let _filters = { ...filters };
|
||||
_filters.categorie.value = e.value;
|
||||
setFilters(_filters);
|
||||
}}
|
||||
placeholder="Filtrer par catégorie"
|
||||
showClear
|
||||
/>
|
||||
</div>
|
||||
<span className="p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText
|
||||
value={globalFilterValue}
|
||||
onChange={onGlobalFilterChange}
|
||||
placeholder="Rechercher..."
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Toolbar
|
||||
className="mb-4"
|
||||
left={leftToolbarTemplate}
|
||||
right={rightToolbarTemplate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<DataTable
|
||||
value={pieces}
|
||||
loading={loading}
|
||||
dataKey="id"
|
||||
paginator
|
||||
rows={10}
|
||||
rowsPerPageOptions={[5, 10, 25, 50]}
|
||||
className="datatable-responsive"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} pièces"
|
||||
emptyMessage="Aucune pièce détachée trouvée."
|
||||
filters={filters}
|
||||
filterDisplay="menu"
|
||||
globalFilterFields={['nom', 'reference', 'description', 'fournisseur']}
|
||||
header={header}
|
||||
subHeader={renderHeader()}
|
||||
selection={selectedPieces}
|
||||
onSelectionChange={(e) => setSelectedPieces(e.value)}
|
||||
responsiveLayout="scroll"
|
||||
>
|
||||
<Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
|
||||
<Column field="statut" header="Statut" body={statutBodyTemplate} sortable style={{ width: '8rem' }} />
|
||||
<Column field="nom" header="Pièce" body={pieceBodyTemplate} sortable />
|
||||
<Column field="categorie" header="Catégorie" sortable style={{ width: '10rem' }} />
|
||||
<Column field="quantiteStock" header="Stock" body={stockBodyTemplate} sortable style={{ width: '15rem' }} />
|
||||
<Column field="coutUnitaire" header="Prix" body={coutBodyTemplate} sortable style={{ width: '10rem' }} />
|
||||
<Column field="fournisseur" header="Fournisseur" sortable style={{ width: '12rem' }} />
|
||||
<Column field="materielsCompatibles" header="Matériels" body={materielsBodyTemplate} style={{ width: '15rem' }} />
|
||||
<Column body={actionBodyTemplate} header="Actions" style={{ width: '12rem' }} />
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Dialog Nouvelle Pièce */}
|
||||
<Dialog
|
||||
visible={pieceDialog}
|
||||
style={{ width: '70vw' }}
|
||||
header="Ajouter une Pièce Détachée"
|
||||
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 fabricant"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<label className="font-medium">Description</label>
|
||||
<InputText
|
||||
value={nouvellePiece.description}
|
||||
onChange={(e) => setNouvellePiece({ ...nouvellePiece, description: e.target.value })}
|
||||
placeholder="Description de la pièce"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<label className="font-medium">Catégorie *</label>
|
||||
<Dropdown
|
||||
value={nouvellePiece.categorie}
|
||||
options={categorieOptions}
|
||||
onChange={(e) => setNouvellePiece({ ...nouvellePiece, categorie: e.value })}
|
||||
placeholder="Sélectionner une catégorie"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<label className="font-medium">Fournisseur *</label>
|
||||
<InputText
|
||||
value={nouvellePiece.fournisseur}
|
||||
onChange={(e) => setNouvellePiece({ ...nouvellePiece, fournisseur: e.target.value })}
|
||||
placeholder="Nom du fournisseur"
|
||||
/>
|
||||
</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">Quantité en stock *</label>
|
||||
<InputNumber
|
||||
value={nouvellePiece.quantiteStock}
|
||||
onValueChange={(e) => setNouvellePiece({ ...nouvellePiece, quantiteStock: e.value || 0 })}
|
||||
min={0}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-4">
|
||||
<label className="font-medium">Unité *</label>
|
||||
<Dropdown
|
||||
value={nouvellePiece.uniteStock}
|
||||
options={uniteOptions}
|
||||
onChange={(e) => setNouvellePiece({ ...nouvellePiece, uniteStock: e.value })}
|
||||
placeholder="Unité de mesure"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<label className="font-medium">Seuil d'alerte *</label>
|
||||
<InputNumber
|
||||
value={nouvellePiece.seuilAlerte}
|
||||
onValueChange={(e) => setNouvellePiece({ ...nouvellePiece, seuilAlerte: e.value || 10 })}
|
||||
min={1}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<label className="font-medium">Seuil critique *</label>
|
||||
<InputNumber
|
||||
value={nouvellePiece.seuilCritique}
|
||||
onValueChange={(e) => setNouvellePiece({ ...nouvellePiece, seuilCritique: e.value || 5 })}
|
||||
min={1}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<label className="font-medium">Localisation</label>
|
||||
<InputText
|
||||
value={nouvellePiece.localisation}
|
||||
onChange={(e) => setNouvellePiece({ ...nouvellePiece, localisation: e.target.value })}
|
||||
placeholder="Emplacement de stockage"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<label className="font-medium">Garantie (mois)</label>
|
||||
<InputNumber
|
||||
value={nouvellePiece.garantie}
|
||||
onValueChange={(e) => setNouvellePiece({ ...nouvellePiece, garantie: e.value || undefined })}
|
||||
min={0}
|
||||
max={120}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PiecesDetacheesPage;
|
||||
524
app/(main)/maintenance/planification/page.tsx
Normal file
524
app/(main)/maintenance/planification/page.tsx
Normal file
@@ -0,0 +1,524 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Button } from 'primereact/button';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { apiClient } from '../../../../services/api-client';
|
||||
|
||||
interface PlanificationMaintenance {
|
||||
materielId: number;
|
||||
materielNom: string;
|
||||
materielType: string;
|
||||
derniereMaintenance?: string;
|
||||
prochaineMaintenance: string;
|
||||
frequenceMaintenance: number; // en jours
|
||||
heuresUtilisation: number;
|
||||
seuilMaintenanceHeures: number;
|
||||
pourcentageUsure: number;
|
||||
prioriteRecommandee: 'BASSE' | 'NORMALE' | 'HAUTE' | 'CRITIQUE';
|
||||
typeMaintenanceRecommande: 'PREVENTIVE' | 'CORRECTIVE';
|
||||
coutEstime: number;
|
||||
dureeEstimee: number;
|
||||
technicienRecommande?: {
|
||||
id: number;
|
||||
nom: string;
|
||||
specialites: string[];
|
||||
disponibilite: boolean;
|
||||
};
|
||||
risqueDefaillance: number; // pourcentage
|
||||
impactArret: 'FAIBLE' | 'MOYEN' | 'ELEVE' | 'CRITIQUE';
|
||||
}
|
||||
|
||||
interface ConfigurationPlanification {
|
||||
periodeAnalyse: number; // en mois
|
||||
seuilUrgence: number; // pourcentage d'usure
|
||||
optimiserCouts: boolean;
|
||||
optimiserDisponibilite: boolean;
|
||||
prendreCompteMeteo: boolean;
|
||||
grouperMaintenances: boolean;
|
||||
}
|
||||
|
||||
const PlanificationMaintenancePage = () => {
|
||||
const [planifications, setPlanifications] = useState<PlanificationMaintenance[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [configuration, setConfiguration] = useState<ConfigurationPlanification>({
|
||||
periodeAnalyse: 6,
|
||||
seuilUrgence: 80,
|
||||
optimiserCouts: true,
|
||||
optimiserDisponibilite: true,
|
||||
prendreCompteMeteo: false,
|
||||
grouperMaintenances: true
|
||||
});
|
||||
const [configDialog, setConfigDialog] = useState(false);
|
||||
const [selectedMateriels, setSelectedMateriels] = useState<PlanificationMaintenance[]>([]);
|
||||
const [dateDebutPlanification, setDateDebutPlanification] = useState<Date>(new Date());
|
||||
const [dateFinPlanification, setDateFinPlanification] = useState<Date>(
|
||||
new Date(Date.now() + 6 * 30 * 24 * 60 * 60 * 1000) // +6 mois
|
||||
);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
loadPlanificationMaintenance();
|
||||
}, [configuration]);
|
||||
|
||||
const loadPlanificationMaintenance = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('🔄 Chargement de la planification maintenance...');
|
||||
|
||||
const params = new URLSearchParams();
|
||||
params.append('periodeAnalyse', configuration.periodeAnalyse.toString());
|
||||
params.append('seuilUrgence', configuration.seuilUrgence.toString());
|
||||
params.append('optimiserCouts', configuration.optimiserCouts.toString());
|
||||
params.append('optimiserDisponibilite', configuration.optimiserDisponibilite.toString());
|
||||
params.append('grouper', configuration.grouperMaintenances.toString());
|
||||
|
||||
const response = await apiClient.get(`/api/maintenances/planification-automatique?${params.toString()}`);
|
||||
console.log('✅ Planification chargée:', response.data);
|
||||
setPlanifications(response.data || []);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du chargement de la planification:', error);
|
||||
setPlanifications([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const genererPlanningOptimal = async () => {
|
||||
try {
|
||||
console.log('🔄 Génération du planning optimal...');
|
||||
|
||||
const params = {
|
||||
materiels: selectedMateriels.map(m => m.materielId),
|
||||
dateDebut: dateDebutPlanification.toISOString().split('T')[0],
|
||||
dateFin: dateFinPlanification.toISOString().split('T')[0],
|
||||
configuration
|
||||
};
|
||||
|
||||
const response = await apiClient.post('/api/maintenances/generer-planning-optimal', params);
|
||||
console.log('✅ Planning optimal généré:', response.data);
|
||||
|
||||
// Rediriger vers le calendrier avec le nouveau planning
|
||||
router.push('/maintenance/calendrier?planning=optimal');
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de la génération du planning:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const planifierMaintenanceAutomatique = async (materielId: number) => {
|
||||
try {
|
||||
await apiClient.post(`/api/maintenances/planifier-automatique/${materielId}`);
|
||||
console.log('✅ Maintenance planifiée automatiquement');
|
||||
loadPlanificationMaintenance();
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de la planification automatique:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const planifierToutesMaintenances = async () => {
|
||||
try {
|
||||
console.log('🔄 Planification de toutes les maintenances...');
|
||||
await apiClient.post('/api/maintenances/planifier-toutes-automatique', configuration);
|
||||
console.log('✅ Toutes les maintenances planifiées');
|
||||
loadPlanificationMaintenance();
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de la planification globale:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const materielBodyTemplate = (rowData: PlanificationMaintenance) => {
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className="font-medium">{rowData.materielNom}</span>
|
||||
<span className="text-sm text-500">{rowData.materielType}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const usureBodyTemplate = (rowData: PlanificationMaintenance) => {
|
||||
const couleur = rowData.pourcentageUsure > 80 ? 'danger' :
|
||||
rowData.pourcentageUsure > 60 ? 'warning' : 'success';
|
||||
|
||||
return (
|
||||
<div className="flex flex-column gap-2">
|
||||
<div className="flex align-items-center gap-2">
|
||||
<ProgressBar
|
||||
value={rowData.pourcentageUsure}
|
||||
className="flex-1"
|
||||
color={couleur === 'danger' ? '#f87171' : couleur === 'warning' ? '#fbbf24' : '#10b981'}
|
||||
/>
|
||||
<span className="text-sm font-medium">{rowData.pourcentageUsure}%</span>
|
||||
</div>
|
||||
<div className="text-xs text-500">
|
||||
{rowData.heuresUtilisation}h / {rowData.seuilMaintenanceHeures}h
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const risqueBodyTemplate = (rowData: PlanificationMaintenance) => {
|
||||
const couleur = rowData.risqueDefaillance > 70 ? 'danger' :
|
||||
rowData.risqueDefaillance > 40 ? 'warning' : 'success';
|
||||
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<ProgressBar
|
||||
value={rowData.risqueDefaillance}
|
||||
className="flex-1"
|
||||
color={couleur === 'danger' ? '#f87171' : couleur === 'warning' ? '#fbbf24' : '#10b981'}
|
||||
/>
|
||||
<span className="text-sm font-medium">{rowData.risqueDefaillance}%</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const prioriteBodyTemplate = (rowData: PlanificationMaintenance) => {
|
||||
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';
|
||||
}
|
||||
};
|
||||
|
||||
return <Tag value={rowData.prioriteRecommandee} severity={getPrioriteSeverity(rowData.prioriteRecommandee)} />;
|
||||
};
|
||||
|
||||
const impactBodyTemplate = (rowData: PlanificationMaintenance) => {
|
||||
const getImpactSeverity = (impact: string) => {
|
||||
switch (impact) {
|
||||
case 'FAIBLE': return 'info';
|
||||
case 'MOYEN': return 'warning';
|
||||
case 'ELEVE': return 'danger';
|
||||
case 'CRITIQUE': return 'danger';
|
||||
default: return 'secondary';
|
||||
}
|
||||
};
|
||||
|
||||
return <Tag value={rowData.impactArret} severity={getImpactSeverity(rowData.impactArret)} />;
|
||||
};
|
||||
|
||||
const dateBodyTemplate = (rowData: PlanificationMaintenance) => {
|
||||
const prochaineMaintenance = new Date(rowData.prochaineMaintenance);
|
||||
const joursRestants = Math.ceil((prochaineMaintenance.getTime() - new Date().getTime()) / (1000 * 3600 * 24));
|
||||
const isUrgent = joursRestants <= 7;
|
||||
const isRetard = joursRestants < 0;
|
||||
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className={`font-medium ${isRetard ? 'text-red-500' : isUrgent ? 'text-orange-500' : ''}`}>
|
||||
{prochaineMaintenance.toLocaleDateString('fr-FR')}
|
||||
</span>
|
||||
<span className="text-xs text-500">
|
||||
{isRetard ? `Retard: ${Math.abs(joursRestants)} j` :
|
||||
isUrgent ? `Urgent: ${joursRestants} j` :
|
||||
`Dans ${joursRestants} jours`}
|
||||
</span>
|
||||
{rowData.derniereMaintenance && (
|
||||
<span className="text-xs text-500">
|
||||
Dernière: {new Date(rowData.derniereMaintenance).toLocaleDateString('fr-FR')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const technicienBodyTemplate = (rowData: PlanificationMaintenance) => {
|
||||
if (rowData.technicienRecommande) {
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className="font-medium">{rowData.technicienRecommande.nom}</span>
|
||||
<div className="flex gap-1">
|
||||
{rowData.technicienRecommande.specialites.slice(0, 2).map((spec, index) => (
|
||||
<Tag key={index} value={spec} className="p-tag-sm" />
|
||||
))}
|
||||
</div>
|
||||
{rowData.technicienRecommande.disponibilite ? (
|
||||
<Tag value="Disponible" severity="success" className="p-tag-sm" />
|
||||
) : (
|
||||
<Tag value="Occupé" severity="warning" className="p-tag-sm" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <span className="text-500">À assigner</span>;
|
||||
};
|
||||
|
||||
const coutBodyTemplate = (rowData: PlanificationMaintenance) => {
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className="font-medium">{rowData.coutEstime.toLocaleString('fr-FR')} €</span>
|
||||
<span className="text-sm text-500">{rowData.dureeEstimee}h estimées</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: PlanificationMaintenance) => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-calendar-plus"
|
||||
className="p-button-rounded p-button-success p-button-sm"
|
||||
onClick={() => planifierMaintenanceAutomatique(rowData.materielId)}
|
||||
tooltip="Planifier automatiquement"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-pencil"
|
||||
className="p-button-rounded p-button-info p-button-sm"
|
||||
onClick={() => router.push(`/maintenance/nouveau?materielId=${rowData.materielId}&type=${rowData.typeMaintenanceRecommande}`)}
|
||||
tooltip="Planifier manuellement"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-eye"
|
||||
className="p-button-rounded p-button-secondary p-button-sm"
|
||||
onClick={() => router.push(`/materiels/${rowData.materielId}`)}
|
||||
tooltip="Voir matériel"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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="Planifier Toutes"
|
||||
icon="pi pi-calendar-plus"
|
||||
className="p-button-success"
|
||||
onClick={planifierToutesMaintenances}
|
||||
/>
|
||||
<Button
|
||||
label="Planning Optimal"
|
||||
icon="pi pi-cog"
|
||||
className="p-button-info"
|
||||
onClick={genererPlanningOptimal}
|
||||
disabled={selectedMateriels.length === 0}
|
||||
/>
|
||||
<Button
|
||||
label="Configuration"
|
||||
icon="pi pi-sliders-h"
|
||||
className="p-button-secondary"
|
||||
onClick={() => setConfigDialog(true)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
label="Exporter"
|
||||
icon="pi pi-download"
|
||||
className="p-button-outlined"
|
||||
onClick={() => router.push('/maintenance/export-planification')}
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-refresh"
|
||||
className="p-button-outlined"
|
||||
onClick={loadPlanificationMaintenance}
|
||||
tooltip="Actualiser"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const header = (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h2 className="m-0">Planification Automatique de Maintenance</h2>
|
||||
<div className="flex gap-2 mt-2 md:mt-0">
|
||||
<Badge value={planifications.filter(p => p.prioriteRecommandee === 'CRITIQUE').length} severity="danger" />
|
||||
<span>Critiques</span>
|
||||
<Badge value={planifications.filter(p => p.pourcentageUsure > 80).length} severity="warning" />
|
||||
<span>Usure élevée</span>
|
||||
<Badge value={planifications.filter(p => p.risqueDefaillance > 70).length} severity="info" />
|
||||
<span>Risque élevé</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Toolbar
|
||||
className="mb-4"
|
||||
left={leftToolbarTemplate}
|
||||
right={rightToolbarTemplate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Paramètres de planification */}
|
||||
<div className="col-12">
|
||||
<Card title="Paramètres de Planification" className="mb-4">
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-3">
|
||||
<label className="font-medium mb-2 block">Période d'analyse</label>
|
||||
<Dropdown
|
||||
value={configuration.periodeAnalyse}
|
||||
options={[
|
||||
{ label: '3 mois', value: 3 },
|
||||
{ label: '6 mois', value: 6 },
|
||||
{ label: '12 mois', value: 12 },
|
||||
{ label: '24 mois', value: 24 }
|
||||
]}
|
||||
onChange={(e) => setConfiguration({ ...configuration, periodeAnalyse: e.value })}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<label className="font-medium mb-2 block">Date début planning</label>
|
||||
<Calendar
|
||||
value={dateDebutPlanification}
|
||||
onChange={(e) => setDateDebutPlanification(e.value as Date)}
|
||||
showIcon
|
||||
dateFormat="dd/mm/yy"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<label className="font-medium mb-2 block">Date fin planning</label>
|
||||
<Calendar
|
||||
value={dateFinPlanification}
|
||||
onChange={(e) => setDateFinPlanification(e.value as Date)}
|
||||
showIcon
|
||||
dateFormat="dd/mm/yy"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<label className="font-medium mb-2 block">Seuil urgence (%)</label>
|
||||
<InputNumber
|
||||
value={configuration.seuilUrgence}
|
||||
onValueChange={(e) => setConfiguration({ ...configuration, seuilUrgence: e.value || 80 })}
|
||||
min={50}
|
||||
max={95}
|
||||
suffix="%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Tableau de planification */}
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<DataTable
|
||||
value={planifications}
|
||||
loading={loading}
|
||||
dataKey="materielId"
|
||||
paginator
|
||||
rows={10}
|
||||
rowsPerPageOptions={[5, 10, 25, 50]}
|
||||
className="datatable-responsive"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} matériels"
|
||||
emptyMessage="Aucune planification trouvée."
|
||||
header={header}
|
||||
selection={selectedMateriels}
|
||||
onSelectionChange={(e) => setSelectedMateriels(e.value)}
|
||||
responsiveLayout="scroll"
|
||||
>
|
||||
<Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
|
||||
<Column field="prioriteRecommandee" header="Priorité" body={prioriteBodyTemplate} sortable style={{ width: '8rem' }} />
|
||||
<Column field="materielNom" header="Matériel" body={materielBodyTemplate} sortable />
|
||||
<Column field="pourcentageUsure" header="Usure" body={usureBodyTemplate} sortable style={{ width: '12rem' }} />
|
||||
<Column field="risqueDefaillance" header="Risque" body={risqueBodyTemplate} sortable style={{ width: '10rem' }} />
|
||||
<Column field="impactArret" header="Impact" body={impactBodyTemplate} sortable style={{ width: '8rem' }} />
|
||||
<Column field="prochaineMaintenance" header="Prochaine maintenance" body={dateBodyTemplate} sortable style={{ width: '12rem' }} />
|
||||
<Column field="technicienRecommande" header="Technicien" body={technicienBodyTemplate} style={{ width: '12rem' }} />
|
||||
<Column field="coutEstime" header="Coût" body={coutBodyTemplate} sortable style={{ width: '10rem' }} />
|
||||
<Column body={actionBodyTemplate} header="Actions" style={{ width: '12rem' }} />
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Dialog Configuration */}
|
||||
<Dialog
|
||||
visible={configDialog}
|
||||
style={{ width: '50vw' }}
|
||||
header="Configuration de la Planification"
|
||||
modal
|
||||
onHide={() => setConfigDialog(false)}
|
||||
footer={
|
||||
<div>
|
||||
<Button
|
||||
label="Annuler"
|
||||
icon="pi pi-times"
|
||||
className="p-button-outlined"
|
||||
onClick={() => setConfigDialog(false)}
|
||||
/>
|
||||
<Button
|
||||
label="Appliquer"
|
||||
icon="pi pi-check"
|
||||
className="p-button-success"
|
||||
onClick={() => {
|
||||
setConfigDialog(false);
|
||||
loadPlanificationMaintenance();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<h4>Optimisations</h4>
|
||||
<div className="field-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="optimiserCouts"
|
||||
checked={configuration.optimiserCouts}
|
||||
onChange={(e) => setConfiguration({ ...configuration, optimiserCouts: e.target.checked })}
|
||||
/>
|
||||
<label htmlFor="optimiserCouts" className="ml-2">Optimiser les coûts</label>
|
||||
</div>
|
||||
<div className="field-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="optimiserDisponibilite"
|
||||
checked={configuration.optimiserDisponibilite}
|
||||
onChange={(e) => setConfiguration({ ...configuration, optimiserDisponibilite: e.target.checked })}
|
||||
/>
|
||||
<label htmlFor="optimiserDisponibilite" className="ml-2">Optimiser la disponibilité</label>
|
||||
</div>
|
||||
<div className="field-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="grouperMaintenances"
|
||||
checked={configuration.grouperMaintenances}
|
||||
onChange={(e) => setConfiguration({ ...configuration, grouperMaintenances: e.target.checked })}
|
||||
/>
|
||||
<label htmlFor="grouperMaintenances" className="ml-2">Grouper les maintenances</label>
|
||||
</div>
|
||||
<div className="field-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="prendreCompteMeteo"
|
||||
checked={configuration.prendreCompteMeteo}
|
||||
onChange={(e) => setConfiguration({ ...configuration, prendreCompteMeteo: e.target.checked })}
|
||||
/>
|
||||
<label htmlFor="prendreCompteMeteo" className="ml-2">Prendre en compte la météo</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PlanificationMaintenancePage;
|
||||
455
app/(main)/maintenance/preventive/page.tsx
Normal file
455
app/(main)/maintenance/preventive/page.tsx
Normal file
@@ -0,0 +1,455 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { Button } from 'primereact/button';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { apiClient } from '../../../../services/api-client';
|
||||
|
||||
interface MaintenancePreventive {
|
||||
id: number;
|
||||
materielId: number;
|
||||
materielNom: string;
|
||||
materielType: string;
|
||||
typeMaintenance: 'PREVENTIVE';
|
||||
statut: 'PLANIFIEE' | 'EN_COURS' | 'TERMINEE' | 'EN_RETARD';
|
||||
priorite: 'BASSE' | 'NORMALE' | 'HAUTE' | 'CRITIQUE';
|
||||
datePlanifiee: string;
|
||||
dateDebut?: string;
|
||||
dateFin?: string;
|
||||
technicienId?: number;
|
||||
technicienNom?: string;
|
||||
description: string;
|
||||
dureeEstimee: number;
|
||||
dureeReelle?: number;
|
||||
coutEstime?: number;
|
||||
coutReel?: number;
|
||||
prochaineMaintenance?: string;
|
||||
frequenceMaintenance: number; // en jours
|
||||
derniereMaintenance?: string;
|
||||
heuresUtilisation: number;
|
||||
seuilMaintenanceHeures: number;
|
||||
pourcentageUsure: number;
|
||||
}
|
||||
|
||||
const MaintenancePreventivePage = () => {
|
||||
const [maintenances, setMaintenances] = useState<MaintenancePreventive[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
const [filterStatut, setFilterStatut] = useState<string | null>(null);
|
||||
const [filterPriorite, setFilterPriorite] = useState<string | null>(null);
|
||||
const [dateDebut, setDateDebut] = useState<Date | null>(null);
|
||||
const [dateFin, setDateFin] = useState<Date | null>(null);
|
||||
const router = useRouter();
|
||||
|
||||
const statutOptions = [
|
||||
{ label: 'Tous', value: null },
|
||||
{ label: 'Planifiée', value: 'PLANIFIEE' },
|
||||
{ label: 'En cours', value: 'EN_COURS' },
|
||||
{ label: 'Terminée', value: 'TERMINEE' },
|
||||
{ label: 'En retard', value: 'EN_RETARD' }
|
||||
];
|
||||
|
||||
const prioriteOptions = [
|
||||
{ label: 'Toutes', value: null },
|
||||
{ label: 'Basse', value: 'BASSE' },
|
||||
{ label: 'Normale', value: 'NORMALE' },
|
||||
{ label: 'Haute', value: 'HAUTE' },
|
||||
{ label: 'Critique', value: 'CRITIQUE' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
loadMaintenancesPreventives();
|
||||
}, [filterStatut, filterPriorite, dateDebut, dateFin]);
|
||||
|
||||
const loadMaintenancesPreventives = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('🔄 Chargement des maintenances préventives...');
|
||||
|
||||
const params = new URLSearchParams();
|
||||
params.append('type', 'PREVENTIVE');
|
||||
if (filterStatut) params.append('statut', filterStatut);
|
||||
if (filterPriorite) params.append('priorite', filterPriorite);
|
||||
if (dateDebut) params.append('dateDebut', dateDebut.toISOString().split('T')[0]);
|
||||
if (dateFin) params.append('dateFin', dateFin.toISOString().split('T')[0]);
|
||||
|
||||
const response = await apiClient.get(`/api/maintenances/preventives?${params.toString()}`);
|
||||
console.log('✅ Maintenances préventives chargées:', response.data);
|
||||
setMaintenances(response.data || []);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du chargement:', error);
|
||||
setMaintenances([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const planifierMaintenanceAutomatique = async (materielId: number) => {
|
||||
try {
|
||||
console.log('🔄 Planification automatique de maintenance...', materielId);
|
||||
await apiClient.post(`/api/maintenances/planifier-automatique/${materielId}`);
|
||||
console.log('✅ Maintenance planifiée automatiquement');
|
||||
loadMaintenancesPreventives();
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de la planification automatique:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const demarrerMaintenance = async (maintenanceId: number) => {
|
||||
try {
|
||||
await apiClient.post(`/api/maintenances/${maintenanceId}/demarrer`);
|
||||
console.log('✅ Maintenance démarrée');
|
||||
loadMaintenancesPreventives();
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du démarrage:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const terminerMaintenance = async (maintenanceId: number) => {
|
||||
try {
|
||||
await apiClient.post(`/api/maintenances/${maintenanceId}/terminer`);
|
||||
console.log('✅ Maintenance terminée');
|
||||
loadMaintenancesPreventives();
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de la finalisation:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const statutBodyTemplate = (rowData: MaintenancePreventive) => {
|
||||
const getStatutSeverity = (statut: string) => {
|
||||
switch (statut) {
|
||||
case 'PLANIFIEE': return 'info';
|
||||
case 'EN_COURS': return 'warning';
|
||||
case 'TERMINEE': return 'success';
|
||||
case 'EN_RETARD': return 'danger';
|
||||
default: return 'secondary';
|
||||
}
|
||||
};
|
||||
|
||||
return <Tag value={rowData.statut} severity={getStatutSeverity(rowData.statut)} />;
|
||||
};
|
||||
|
||||
const prioriteBodyTemplate = (rowData: MaintenancePreventive) => {
|
||||
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';
|
||||
}
|
||||
};
|
||||
|
||||
return <Tag value={rowData.priorite} severity={getPrioriteSeverity(rowData.priorite)} />;
|
||||
};
|
||||
|
||||
const materielBodyTemplate = (rowData: MaintenancePreventive) => {
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className="font-medium">{rowData.materielNom}</span>
|
||||
<span className="text-sm text-500">{rowData.materielType}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const usureBodyTemplate = (rowData: MaintenancePreventive) => {
|
||||
const couleur = rowData.pourcentageUsure > 80 ? 'danger' :
|
||||
rowData.pourcentageUsure > 60 ? 'warning' : 'success';
|
||||
|
||||
return (
|
||||
<div className="flex flex-column gap-2">
|
||||
<div className="flex align-items-center gap-2">
|
||||
<ProgressBar
|
||||
value={rowData.pourcentageUsure}
|
||||
className="flex-1"
|
||||
color={couleur === 'danger' ? '#f87171' : couleur === 'warning' ? '#fbbf24' : '#10b981'}
|
||||
/>
|
||||
<span className="text-sm font-medium">{rowData.pourcentageUsure}%</span>
|
||||
</div>
|
||||
<div className="text-xs text-500">
|
||||
{rowData.heuresUtilisation}h / {rowData.seuilMaintenanceHeures}h
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const frequenceBodyTemplate = (rowData: MaintenancePreventive) => {
|
||||
const joursDepuisDerniere = rowData.derniereMaintenance ?
|
||||
Math.floor((new Date().getTime() - new Date(rowData.derniereMaintenance).getTime()) / (1000 * 3600 * 24)) : 0;
|
||||
|
||||
const pourcentageFrequence = (joursDepuisDerniere / rowData.frequenceMaintenance) * 100;
|
||||
const couleur = pourcentageFrequence > 100 ? 'danger' :
|
||||
pourcentageFrequence > 80 ? 'warning' : 'success';
|
||||
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className="text-sm font-medium">
|
||||
Tous les {rowData.frequenceMaintenance} jours
|
||||
</span>
|
||||
{rowData.derniereMaintenance && (
|
||||
<div className="text-xs text-500">
|
||||
Dernière: {new Date(rowData.derniereMaintenance).toLocaleDateString('fr-FR')}
|
||||
<br />
|
||||
Il y a {joursDepuisDerniere} jours
|
||||
</div>
|
||||
)}
|
||||
{rowData.prochaineMaintenance && (
|
||||
<div className="text-xs text-orange-500">
|
||||
Prochaine: {new Date(rowData.prochaineMaintenance).toLocaleDateString('fr-FR')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const dateBodyTemplate = (rowData: MaintenancePreventive) => {
|
||||
const datePlanifiee = new Date(rowData.datePlanifiee);
|
||||
const isRetard = datePlanifiee < new Date() && rowData.statut !== 'TERMINEE';
|
||||
const joursRestants = Math.ceil((datePlanifiee.getTime() - new Date().getTime()) / (1000 * 3600 * 24));
|
||||
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className={`font-medium ${isRetard ? 'text-red-500' : ''}`}>
|
||||
{datePlanifiee.toLocaleDateString('fr-FR')}
|
||||
</span>
|
||||
{!isRetard && joursRestants >= 0 && (
|
||||
<span className="text-xs text-500">
|
||||
Dans {joursRestants} jour{joursRestants > 1 ? 's' : ''}
|
||||
</span>
|
||||
)}
|
||||
{isRetard && (
|
||||
<Tag value={`Retard: ${Math.abs(joursRestants)} j`} severity="danger" className="p-tag-sm" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const technicienBodyTemplate = (rowData: MaintenancePreventive) => {
|
||||
if (rowData.technicienNom) {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<i className="pi pi-user text-blue-500" />
|
||||
<span>{rowData.technicienNom}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Button
|
||||
label="Assigner"
|
||||
icon="pi pi-user-plus"
|
||||
className="p-button-outlined p-button-sm"
|
||||
onClick={() => router.push(`/maintenance/${rowData.id}/assigner`)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: MaintenancePreventive) => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-eye"
|
||||
className="p-button-rounded p-button-info p-button-sm"
|
||||
onClick={() => router.push(`/maintenance/${rowData.id}`)}
|
||||
tooltip="Voir détails"
|
||||
/>
|
||||
{rowData.statut === 'PLANIFIEE' && (
|
||||
<Button
|
||||
icon="pi pi-play"
|
||||
className="p-button-rounded p-button-warning p-button-sm"
|
||||
onClick={() => demarrerMaintenance(rowData.id)}
|
||||
tooltip="Démarrer"
|
||||
/>
|
||||
)}
|
||||
{rowData.statut === 'EN_COURS' && (
|
||||
<Button
|
||||
icon="pi pi-check"
|
||||
className="p-button-rounded p-button-success p-button-sm"
|
||||
onClick={() => terminerMaintenance(rowData.id)}
|
||||
tooltip="Terminer"
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
icon="pi pi-calendar-plus"
|
||||
className="p-button-rounded p-button-secondary p-button-sm"
|
||||
onClick={() => planifierMaintenanceAutomatique(rowData.materielId)}
|
||||
tooltip="Planifier prochaine"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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 Préventive"
|
||||
icon="pi pi-plus"
|
||||
className="p-button-success"
|
||||
onClick={() => router.push('/maintenance/nouveau?type=PREVENTIVE')}
|
||||
/>
|
||||
<Button
|
||||
label="Planification Auto"
|
||||
icon="pi pi-cog"
|
||||
className="p-button-info"
|
||||
onClick={() => router.push('/maintenance/planification')}
|
||||
/>
|
||||
<Button
|
||||
label="Calendrier"
|
||||
icon="pi pi-calendar"
|
||||
className="p-button-secondary"
|
||||
onClick={() => router.push('/maintenance/calendrier')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<span className="p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText
|
||||
type="search"
|
||||
placeholder="Rechercher..."
|
||||
value={globalFilter}
|
||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
<Button
|
||||
icon="pi pi-refresh"
|
||||
className="p-button-outlined"
|
||||
onClick={loadMaintenancesPreventives}
|
||||
tooltip="Actualiser"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const header = (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h2 className="m-0">Maintenance Préventive</h2>
|
||||
<div className="flex gap-2 mt-2 md:mt-0">
|
||||
<Badge value={maintenances.filter(m => m.statut === 'EN_RETARD').length} severity="danger" />
|
||||
<span>En retard</span>
|
||||
<Badge value={maintenances.filter(m => m.pourcentageUsure > 80).length} severity="warning" />
|
||||
<span>Usure critique</span>
|
||||
<Badge value={maintenances.filter(m => m.statut === 'PLANIFIEE').length} severity="info" />
|
||||
<span>Planifiées</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<Toolbar
|
||||
className="mb-4"
|
||||
left={leftToolbarTemplate}
|
||||
right={rightToolbarTemplate}
|
||||
/>
|
||||
|
||||
{/* Filtres */}
|
||||
<div className="grid mb-4">
|
||||
<div className="col-12 md:col-2">
|
||||
<label className="font-medium mb-2 block">Statut</label>
|
||||
<Dropdown
|
||||
value={filterStatut}
|
||||
options={statutOptions}
|
||||
onChange={(e) => setFilterStatut(e.value)}
|
||||
placeholder="Tous"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-2">
|
||||
<label className="font-medium mb-2 block">Priorité</label>
|
||||
<Dropdown
|
||||
value={filterPriorite}
|
||||
options={prioriteOptions}
|
||||
onChange={(e) => setFilterPriorite(e.value)}
|
||||
placeholder="Toutes"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-2">
|
||||
<label className="font-medium mb-2 block">Date début</label>
|
||||
<Calendar
|
||||
value={dateDebut}
|
||||
onChange={(e) => setDateDebut(e.value as Date)}
|
||||
showIcon
|
||||
dateFormat="dd/mm/yy"
|
||||
placeholder="Date début"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-2">
|
||||
<label className="font-medium mb-2 block">Date fin</label>
|
||||
<Calendar
|
||||
value={dateFin}
|
||||
onChange={(e) => setDateFin(e.value as Date)}
|
||||
showIcon
|
||||
dateFormat="dd/mm/yy"
|
||||
placeholder="Date fin"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-4">
|
||||
<label className="font-medium mb-2 block">Actions</label>
|
||||
<Button
|
||||
label="Réinitialiser filtres"
|
||||
icon="pi pi-filter-slash"
|
||||
className="p-button-outlined w-full"
|
||||
onClick={() => {
|
||||
setFilterStatut(null);
|
||||
setFilterPriorite(null);
|
||||
setDateDebut(null);
|
||||
setDateFin(null);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
value={maintenances}
|
||||
loading={loading}
|
||||
dataKey="id"
|
||||
paginator
|
||||
rows={10}
|
||||
rowsPerPageOptions={[5, 10, 25, 50]}
|
||||
className="datatable-responsive"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} maintenances préventives"
|
||||
globalFilter={globalFilter}
|
||||
emptyMessage="Aucune maintenance préventive trouvée."
|
||||
header={header}
|
||||
responsiveLayout="scroll"
|
||||
>
|
||||
<Column field="priorite" header="Priorité" body={prioriteBodyTemplate} sortable style={{ width: '8rem' }} />
|
||||
<Column field="materielNom" header="Matériel" body={materielBodyTemplate} sortable />
|
||||
<Column field="statut" header="Statut" body={statutBodyTemplate} sortable style={{ width: '8rem' }} />
|
||||
<Column field="pourcentageUsure" header="Usure" body={usureBodyTemplate} sortable style={{ width: '12rem' }} />
|
||||
<Column field="frequenceMaintenance" header="Fréquence" body={frequenceBodyTemplate} style={{ width: '12rem' }} />
|
||||
<Column field="datePlanifiee" header="Date planifiée" body={dateBodyTemplate} sortable style={{ width: '10rem' }} />
|
||||
<Column field="technicienNom" header="Technicien" body={technicienBodyTemplate} style={{ width: '10rem' }} />
|
||||
<Column field="description" header="Description" style={{ width: '15rem' }} />
|
||||
<Column body={actionBodyTemplate} header="Actions" style={{ width: '12rem' }} />
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MaintenancePreventivePage;
|
||||
649
app/(main)/maintenance/signaler-panne/page.tsx
Normal file
649
app/(main)/maintenance/signaler-panne/page.tsx
Normal file
@@ -0,0 +1,649 @@
|
||||
'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 { Button } from 'primereact/button';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Message } from 'primereact/message';
|
||||
import { FileUpload } from 'primereact/fileupload';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Steps } from 'primereact/steps';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { apiClient } from '../../../../services/api-client';
|
||||
|
||||
interface SignalementPanne {
|
||||
materielId: number;
|
||||
chantierImpacte?: number;
|
||||
gravite: 'MINEURE' | 'MODEREE' | 'MAJEURE' | 'CRITIQUE';
|
||||
impactProduction: 'AUCUN' | 'FAIBLE' | 'MOYEN' | 'ELEVE' | 'ARRET_TOTAL';
|
||||
problemeSignale: string;
|
||||
symptomesObserves: string;
|
||||
circonstancesApparition: string;
|
||||
mesuresTemporaires?: string;
|
||||
personneSignalement: string;
|
||||
contactUrgence: string;
|
||||
photos: File[];
|
||||
prioriteUrgence: boolean;
|
||||
interventionImmediate: boolean;
|
||||
}
|
||||
|
||||
interface Materiel {
|
||||
id: number;
|
||||
nom: string;
|
||||
type: string;
|
||||
marque: string;
|
||||
modele: string;
|
||||
localisation: string;
|
||||
statut: string;
|
||||
}
|
||||
|
||||
interface Chantier {
|
||||
id: number;
|
||||
nom: string;
|
||||
localisation: string;
|
||||
statut: string;
|
||||
}
|
||||
|
||||
const SignalerPannePage = () => {
|
||||
const [signalement, setSignalement] = useState<SignalementPanne>({
|
||||
materielId: 0,
|
||||
gravite: 'MODEREE',
|
||||
impactProduction: 'MOYEN',
|
||||
problemeSignale: '',
|
||||
symptomesObserves: '',
|
||||
circonstancesApparition: '',
|
||||
personneSignalement: '',
|
||||
contactUrgence: '',
|
||||
photos: [],
|
||||
prioriteUrgence: false,
|
||||
interventionImmediate: false
|
||||
});
|
||||
const [materiels, setMateriels] = useState<Materiel[]>([]);
|
||||
const [chantiers, setChantiers] = useState<Chantier[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [errors, setErrors] = useState<{ [key: string]: string }>({});
|
||||
const [etapeActuelle, setEtapeActuelle] = useState(0);
|
||||
const [signalementEnvoye, setSignalementEnvoye] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const graviteOptions = [
|
||||
{ label: 'Mineure - Fonctionnement dégradé', value: 'MINEURE' },
|
||||
{ label: 'Modérée - Dysfonctionnement notable', value: 'MODEREE' },
|
||||
{ label: 'Majeure - Panne importante', value: 'MAJEURE' },
|
||||
{ label: 'Critique - Arrêt complet', value: 'CRITIQUE' }
|
||||
];
|
||||
|
||||
const impactOptions = [
|
||||
{ label: 'Aucun impact', value: 'AUCUN' },
|
||||
{ label: 'Impact faible', value: 'FAIBLE' },
|
||||
{ label: 'Impact moyen', value: 'MOYEN' },
|
||||
{ label: 'Impact élevé', value: 'ELEVE' },
|
||||
{ label: 'Arrêt total de production', value: 'ARRET_TOTAL' }
|
||||
];
|
||||
|
||||
const etapes = [
|
||||
{ label: 'Matériel' },
|
||||
{ label: 'Problème' },
|
||||
{ label: 'Impact' },
|
||||
{ label: 'Contact' },
|
||||
{ label: 'Confirmation' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
loadMateriels();
|
||||
loadChantiers();
|
||||
}, []);
|
||||
|
||||
const loadMateriels = async () => {
|
||||
try {
|
||||
console.log('🔄 Chargement des matériels...');
|
||||
const response = await apiClient.get('/api/materiels');
|
||||
console.log('✅ Matériels chargés:', response.data);
|
||||
setMateriels(response.data || []);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du chargement des matériels:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const loadChantiers = async () => {
|
||||
try {
|
||||
const response = await apiClient.get('/api/chantiers');
|
||||
setChantiers(response.data || []);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du chargement des chantiers:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const validateEtape = (etape: number) => {
|
||||
const newErrors: { [key: string]: string } = {};
|
||||
|
||||
switch (etape) {
|
||||
case 0: // Matériel
|
||||
if (!signalement.materielId) {
|
||||
newErrors.materielId = 'Le matériel est requis';
|
||||
}
|
||||
break;
|
||||
case 1: // Problème
|
||||
if (!signalement.problemeSignale.trim()) {
|
||||
newErrors.problemeSignale = 'La description du problème est requise';
|
||||
}
|
||||
if (!signalement.symptomesObserves.trim()) {
|
||||
newErrors.symptomesObserves = 'Les symptômes observés sont requis';
|
||||
}
|
||||
break;
|
||||
case 2: // Impact
|
||||
if (!signalement.circonstancesApparition.trim()) {
|
||||
newErrors.circonstancesApparition = 'Les circonstances d\'apparition sont requises';
|
||||
}
|
||||
break;
|
||||
case 3: // Contact
|
||||
if (!signalement.personneSignalement.trim()) {
|
||||
newErrors.personneSignalement = 'Le nom de la personne est requis';
|
||||
}
|
||||
if (!signalement.contactUrgence.trim()) {
|
||||
newErrors.contactUrgence = 'Le contact d\'urgence est requis';
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const etapeSuivante = () => {
|
||||
if (validateEtape(etapeActuelle)) {
|
||||
setEtapeActuelle(etapeActuelle + 1);
|
||||
}
|
||||
};
|
||||
|
||||
const etapePrecedente = () => {
|
||||
setEtapeActuelle(etapeActuelle - 1);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!validateEtape(3)) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('🔄 Envoi du signalement de panne...', signalement);
|
||||
|
||||
// Créer FormData pour inclure les photos
|
||||
const formData = new FormData();
|
||||
Object.entries(signalement).forEach(([key, value]) => {
|
||||
if (key === 'photos') {
|
||||
signalement.photos.forEach((photo, index) => {
|
||||
formData.append(`photo_${index}`, photo);
|
||||
});
|
||||
} else {
|
||||
formData.append(key, value.toString());
|
||||
}
|
||||
});
|
||||
|
||||
const response = await apiClient.post('/api/maintenances/signaler-panne', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
});
|
||||
console.log('✅ Signalement envoyé avec succès:', response.data);
|
||||
|
||||
setSignalementEnvoye(true);
|
||||
setEtapeActuelle(4);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de l\'envoi du signalement:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const materielOptionTemplate = (option: Materiel) => {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<div>
|
||||
<div className="font-medium">{option.nom}</div>
|
||||
<div className="text-sm text-500">{option.type} - {option.marque} {option.modele}</div>
|
||||
<div className="text-sm text-500">📍 {option.localisation}</div>
|
||||
</div>
|
||||
<Tag
|
||||
value={option.statut}
|
||||
severity={option.statut === 'DISPONIBLE' ? 'success' : 'warning'}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const chantierOptionTemplate = (option: Chantier) => {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<div>
|
||||
<div className="font-medium">{option.nom}</div>
|
||||
<div className="text-sm text-500">📍 {option.localisation}</div>
|
||||
</div>
|
||||
<Tag value={option.statut} severity="info" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const onPhotoUpload = (event: any) => {
|
||||
const files = Array.from(event.files) as File[];
|
||||
setSignalement({ ...signalement, photos: [...signalement.photos, ...files] });
|
||||
};
|
||||
|
||||
const supprimerPhoto = (index: number) => {
|
||||
const nouvellesPhotos = signalement.photos.filter((_, i) => i !== index);
|
||||
setSignalement({ ...signalement, photos: nouvellesPhotos });
|
||||
};
|
||||
|
||||
const getGraviteSeverity = (gravite: string) => {
|
||||
switch (gravite) {
|
||||
case 'MINEURE': return 'info';
|
||||
case 'MODEREE': return 'warning';
|
||||
case 'MAJEURE': return 'danger';
|
||||
case 'CRITIQUE': return 'danger';
|
||||
default: return 'secondary';
|
||||
}
|
||||
};
|
||||
|
||||
const getImpactSeverity = (impact: string) => {
|
||||
switch (impact) {
|
||||
case 'AUCUN': return 'success';
|
||||
case 'FAIBLE': return 'info';
|
||||
case 'MOYEN': return 'warning';
|
||||
case 'ELEVE': return 'danger';
|
||||
case 'ARRET_TOTAL': return 'danger';
|
||||
default: return 'secondary';
|
||||
}
|
||||
};
|
||||
|
||||
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')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
label="Urgence"
|
||||
icon="pi pi-exclamation-triangle"
|
||||
className="p-button-danger"
|
||||
onClick={() => router.push('/maintenance/urgence')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
if (signalementEnvoye) {
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Toolbar
|
||||
className="mb-4"
|
||||
left={leftToolbarTemplate}
|
||||
right={rightToolbarTemplate}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<i className="pi pi-check-circle text-green-500 text-6xl mb-4" />
|
||||
<h2 className="text-green-600 mb-4">Signalement envoyé avec succès !</h2>
|
||||
<p className="text-lg mb-4">
|
||||
Votre signalement de panne a été transmis à l'équipe de maintenance.
|
||||
</p>
|
||||
<p className="text-500 mb-4">
|
||||
Un technicien sera assigné dans les plus brefs délais selon la priorité définie.
|
||||
</p>
|
||||
<div className="flex gap-2 justify-content-center">
|
||||
<Button
|
||||
label="Retour à la maintenance"
|
||||
icon="pi pi-arrow-left"
|
||||
className="p-button-outlined"
|
||||
onClick={() => router.push('/maintenance')}
|
||||
/>
|
||||
<Button
|
||||
label="Nouveau signalement"
|
||||
icon="pi pi-plus"
|
||||
className="p-button-success"
|
||||
onClick={() => {
|
||||
setSignalementEnvoye(false);
|
||||
setEtapeActuelle(0);
|
||||
setSignalement({
|
||||
materielId: 0,
|
||||
gravite: 'MODEREE',
|
||||
impactProduction: 'MOYEN',
|
||||
problemeSignale: '',
|
||||
symptomesObserves: '',
|
||||
circonstancesApparition: '',
|
||||
personneSignalement: '',
|
||||
contactUrgence: '',
|
||||
photos: [],
|
||||
prioriteUrgence: false,
|
||||
interventionImmediate: false
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</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">
|
||||
<Card title="🚨 Signaler une Panne">
|
||||
<Steps model={etapes} activeIndex={etapeActuelle} className="mb-4" />
|
||||
|
||||
{etapeActuelle === 0 && (
|
||||
<div className="p-fluid">
|
||||
<h4>Sélection du matériel</h4>
|
||||
<div className="field">
|
||||
<label htmlFor="materiel" className="font-medium">
|
||||
Matériel en panne *
|
||||
</label>
|
||||
<Dropdown
|
||||
id="materiel"
|
||||
value={signalement.materielId}
|
||||
options={materiels}
|
||||
onChange={(e) => setSignalement({ ...signalement, materielId: e.value })}
|
||||
optionLabel="nom"
|
||||
optionValue="id"
|
||||
placeholder="Sélectionner le matériel en panne"
|
||||
itemTemplate={materielOptionTemplate}
|
||||
className={errors.materielId ? 'p-invalid' : ''}
|
||||
filter
|
||||
/>
|
||||
{errors.materielId && <small className="p-error">{errors.materielId}</small>}
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="chantier" className="font-medium">
|
||||
Chantier impacté (optionnel)
|
||||
</label>
|
||||
<Dropdown
|
||||
id="chantier"
|
||||
value={signalement.chantierImpacte}
|
||||
options={chantiers}
|
||||
onChange={(e) => setSignalement({ ...signalement, chantierImpacte: e.value })}
|
||||
optionLabel="nom"
|
||||
optionValue="id"
|
||||
placeholder="Sélectionner le chantier impacté"
|
||||
itemTemplate={chantierOptionTemplate}
|
||||
filter
|
||||
showClear
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{etapeActuelle === 1 && (
|
||||
<div className="p-fluid">
|
||||
<h4>Description du problème</h4>
|
||||
<div className="field">
|
||||
<label htmlFor="probleme" className="font-medium">
|
||||
Description du problème *
|
||||
</label>
|
||||
<InputTextarea
|
||||
id="probleme"
|
||||
value={signalement.problemeSignale}
|
||||
onChange={(e) => setSignalement({ ...signalement, problemeSignale: e.target.value })}
|
||||
rows={4}
|
||||
placeholder="Décrivez précisément le problème rencontré..."
|
||||
className={errors.problemeSignale ? 'p-invalid' : ''}
|
||||
/>
|
||||
{errors.problemeSignale && <small className="p-error">{errors.problemeSignale}</small>}
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="symptomes" className="font-medium">
|
||||
Symptômes observés *
|
||||
</label>
|
||||
<InputTextarea
|
||||
id="symptomes"
|
||||
value={signalement.symptomesObserves}
|
||||
onChange={(e) => setSignalement({ ...signalement, symptomesObserves: e.target.value })}
|
||||
rows={3}
|
||||
placeholder="Bruits anormaux, fumée, vibrations, arrêt soudain..."
|
||||
className={errors.symptomesObserves ? 'p-invalid' : ''}
|
||||
/>
|
||||
{errors.symptomesObserves && <small className="p-error">{errors.symptomesObserves}</small>}
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-medium">Photos (optionnel)</label>
|
||||
<FileUpload
|
||||
mode="basic"
|
||||
accept="image/*"
|
||||
maxFileSize={5000000}
|
||||
multiple
|
||||
onSelect={onPhotoUpload}
|
||||
chooseLabel="Ajouter des photos"
|
||||
/>
|
||||
{signalement.photos.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mt-2">
|
||||
{signalement.photos.map((photo, index) => (
|
||||
<div key={index} className="relative">
|
||||
<img
|
||||
src={URL.createObjectURL(photo)}
|
||||
alt={`Photo ${index + 1}`}
|
||||
className="w-6rem h-4rem object-cover border-round"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-times"
|
||||
className="p-button-rounded p-button-danger p-button-sm absolute"
|
||||
style={{ top: '-0.5rem', right: '-0.5rem' }}
|
||||
onClick={() => supprimerPhoto(index)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{etapeActuelle === 2 && (
|
||||
<div className="p-fluid">
|
||||
<h4>Évaluation de l'impact</h4>
|
||||
<div className="field">
|
||||
<label htmlFor="gravite" className="font-medium">
|
||||
Gravité de la panne *
|
||||
</label>
|
||||
<Dropdown
|
||||
id="gravite"
|
||||
value={signalement.gravite}
|
||||
options={graviteOptions}
|
||||
onChange={(e) => setSignalement({ ...signalement, gravite: e.value })}
|
||||
placeholder="Évaluer la gravité"
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="impact" className="font-medium">
|
||||
Impact sur la production *
|
||||
</label>
|
||||
<Dropdown
|
||||
id="impact"
|
||||
value={signalement.impactProduction}
|
||||
options={impactOptions}
|
||||
onChange={(e) => setSignalement({ ...signalement, impactProduction: e.value })}
|
||||
placeholder="Évaluer l'impact"
|
||||
/>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="circonstances" className="font-medium">
|
||||
Circonstances d'apparition *
|
||||
</label>
|
||||
<InputTextarea
|
||||
id="circonstances"
|
||||
value={signalement.circonstancesApparition}
|
||||
onChange={(e) => setSignalement({ ...signalement, circonstancesApparition: e.target.value })}
|
||||
rows={3}
|
||||
placeholder="Quand et comment le problème est-il apparu ? Conditions météo, charge de travail..."
|
||||
className={errors.circonstancesApparition ? 'p-invalid' : ''}
|
||||
/>
|
||||
{errors.circonstancesApparition && <small className="p-error">{errors.circonstancesApparition}</small>}
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="mesures" className="font-medium">
|
||||
Mesures temporaires prises (optionnel)
|
||||
</label>
|
||||
<InputTextarea
|
||||
id="mesures"
|
||||
value={signalement.mesuresTemporaires || ''}
|
||||
onChange={(e) => setSignalement({ ...signalement, mesuresTemporaires: e.target.value })}
|
||||
rows={2}
|
||||
placeholder="Actions déjà entreprises pour limiter l'impact..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{etapeActuelle === 3 && (
|
||||
<div className="p-fluid">
|
||||
<h4>Informations de contact</h4>
|
||||
<div className="field">
|
||||
<label htmlFor="personne" className="font-medium">
|
||||
Personne signalant la panne *
|
||||
</label>
|
||||
<InputText
|
||||
id="personne"
|
||||
value={signalement.personneSignalement}
|
||||
onChange={(e) => setSignalement({ ...signalement, personneSignalement: e.target.value })}
|
||||
placeholder="Nom et prénom"
|
||||
className={errors.personneSignalement ? 'p-invalid' : ''}
|
||||
/>
|
||||
{errors.personneSignalement && <small className="p-error">{errors.personneSignalement}</small>}
|
||||
</div>
|
||||
<div className="field">
|
||||
<label htmlFor="contact" className="font-medium">
|
||||
Contact d'urgence *
|
||||
</label>
|
||||
<InputText
|
||||
id="contact"
|
||||
value={signalement.contactUrgence}
|
||||
onChange={(e) => setSignalement({ ...signalement, contactUrgence: e.target.value })}
|
||||
placeholder="Numéro de téléphone ou email"
|
||||
className={errors.contactUrgence ? 'p-invalid' : ''}
|
||||
/>
|
||||
{errors.contactUrgence && <small className="p-error">{errors.contactUrgence}</small>}
|
||||
</div>
|
||||
<div className="field-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="priorite"
|
||||
checked={signalement.prioriteUrgence}
|
||||
onChange={(e) => setSignalement({ ...signalement, prioriteUrgence: e.target.checked })}
|
||||
/>
|
||||
<label htmlFor="priorite" className="ml-2">
|
||||
🚨 Marquer comme priorité urgente
|
||||
</label>
|
||||
</div>
|
||||
<div className="field-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="intervention"
|
||||
checked={signalement.interventionImmediate}
|
||||
onChange={(e) => setSignalement({ ...signalement, interventionImmediate: e.target.checked })}
|
||||
/>
|
||||
<label htmlFor="intervention" className="ml-2">
|
||||
⚡ Demander une intervention immédiate
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{etapeActuelle === 4 && (
|
||||
<div>
|
||||
<h4>Récapitulatif du signalement</h4>
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label className="font-medium">Matériel:</label>
|
||||
<p>{materiels.find(m => m.id === signalement.materielId)?.nom}</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-medium">Gravité:</label>
|
||||
<p><Tag value={signalement.gravite} severity={getGraviteSeverity(signalement.gravite)} /></p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-medium">Impact:</label>
|
||||
<p><Tag value={signalement.impactProduction} severity={getImpactSeverity(signalement.impactProduction)} /></p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<div className="field">
|
||||
<label className="font-medium">Signalé par:</label>
|
||||
<p>{signalement.personneSignalement}</p>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="font-medium">Contact:</label>
|
||||
<p>{signalement.contactUrgence}</p>
|
||||
</div>
|
||||
{signalement.prioriteUrgence && (
|
||||
<div className="field">
|
||||
<Tag value="PRIORITÉ URGENTE" severity="danger" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<div className="field">
|
||||
<label className="font-medium">Problème:</label>
|
||||
<p>{signalement.problemeSignale}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-content-between mt-4">
|
||||
<Button
|
||||
label="Précédent"
|
||||
icon="pi pi-chevron-left"
|
||||
className="p-button-outlined"
|
||||
onClick={etapePrecedente}
|
||||
disabled={etapeActuelle === 0}
|
||||
/>
|
||||
{etapeActuelle < 4 ? (
|
||||
<Button
|
||||
label="Suivant"
|
||||
icon="pi pi-chevron-right"
|
||||
iconPos="right"
|
||||
onClick={etapeSuivante}
|
||||
/>
|
||||
) : (
|
||||
<Button
|
||||
label="Envoyer le signalement"
|
||||
icon="pi pi-send"
|
||||
className="p-button-success"
|
||||
loading={loading}
|
||||
onClick={handleSubmit}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignalerPannePage;
|
||||
569
app/(main)/maintenance/stats/page.tsx
Normal file
569
app/(main)/maintenance/stats/page.tsx
Normal file
@@ -0,0 +1,569 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Chart } from 'primereact/chart';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { apiClient } from '../../../../services/api-client';
|
||||
|
||||
interface StatistiquesMaintenance {
|
||||
periode: {
|
||||
debut: string;
|
||||
fin: string;
|
||||
};
|
||||
resume: {
|
||||
totalMaintenances: number;
|
||||
maintenancesTerminees: number;
|
||||
maintenancesEnCours: number;
|
||||
maintenancesPlanifiees: number;
|
||||
tauxReussite: number;
|
||||
coutTotal: number;
|
||||
dureeMovenneMaintenance: number;
|
||||
tempsMovenReponse: number;
|
||||
tempsMovenResolution: number;
|
||||
};
|
||||
repartitionParType: Array<{
|
||||
type: string;
|
||||
nombre: number;
|
||||
pourcentage: number;
|
||||
coutMoyen: number;
|
||||
}>;
|
||||
repartitionParPriorite: Array<{
|
||||
priorite: string;
|
||||
nombre: number;
|
||||
pourcentage: number;
|
||||
tempsMovenResolution: number;
|
||||
}>;
|
||||
evolutionMensuelle: Array<{
|
||||
mois: string;
|
||||
preventives: number;
|
||||
correctives: number;
|
||||
urgentes: number;
|
||||
cout: number;
|
||||
}>;
|
||||
performanceTechniciens: Array<{
|
||||
technicienId: number;
|
||||
technicienNom: string;
|
||||
nombreMaintenances: number;
|
||||
tauxReussite: number;
|
||||
dureeMovenne: number;
|
||||
evaluationMoyenne: number;
|
||||
specialites: string[];
|
||||
}>;
|
||||
materielsProblematiques: Array<{
|
||||
materielId: number;
|
||||
materielNom: string;
|
||||
materielType: string;
|
||||
nombrePannes: number;
|
||||
coutMaintenance: number;
|
||||
tempsArret: number;
|
||||
dernierePanne: string;
|
||||
fiabilite: number;
|
||||
}>;
|
||||
indicateursPerformance: {
|
||||
mtbf: number; // Mean Time Between Failures
|
||||
mttr: number; // Mean Time To Repair
|
||||
disponibilite: number;
|
||||
fiabilite: number;
|
||||
maintenabilite: number;
|
||||
};
|
||||
coutParCategorie: Array<{
|
||||
categorie: string;
|
||||
cout: number;
|
||||
pourcentage: number;
|
||||
}>;
|
||||
tendances: {
|
||||
evolutionCouts: number; // pourcentage d'évolution
|
||||
evolutionNombreMaintenances: number;
|
||||
evolutionTempsReponse: number;
|
||||
evolutionDisponibilite: number;
|
||||
};
|
||||
}
|
||||
|
||||
const StatistiquesMaintenancePage = () => {
|
||||
const [statistiques, setStatistiques] = useState<StatistiquesMaintenance | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [dateDebut, setDateDebut] = useState<Date>(new Date(Date.now() - 6 * 30 * 24 * 60 * 60 * 1000)); // -6 mois
|
||||
const [dateFin, setDateFin] = useState<Date>(new Date());
|
||||
const [filterType, setFilterType] = useState<string | null>(null);
|
||||
const [chartOptions] = useState({
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top' as const,
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
});
|
||||
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' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
loadStatistiques();
|
||||
}, [dateDebut, dateFin, filterType]);
|
||||
|
||||
const loadStatistiques = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('🔄 Chargement des statistiques maintenance...');
|
||||
|
||||
const params = new URLSearchParams();
|
||||
params.append('dateDebut', dateDebut.toISOString().split('T')[0]);
|
||||
params.append('dateFin', dateFin.toISOString().split('T')[0]);
|
||||
if (filterType) params.append('type', filterType);
|
||||
|
||||
const response = await apiClient.get(`/api/maintenances/statistiques?${params.toString()}`);
|
||||
console.log('✅ Statistiques chargées:', response.data);
|
||||
setStatistiques(response.data);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du chargement des statistiques:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getEvolutionChartData = () => {
|
||||
if (!statistiques?.evolutionMensuelle) return {};
|
||||
|
||||
return {
|
||||
labels: statistiques.evolutionMensuelle.map(e => e.mois),
|
||||
datasets: [
|
||||
{
|
||||
label: 'Préventives',
|
||||
data: statistiques.evolutionMensuelle.map(e => e.preventives),
|
||||
borderColor: '#3b82f6',
|
||||
backgroundColor: 'rgba(59, 130, 246, 0.1)',
|
||||
tension: 0.4
|
||||
},
|
||||
{
|
||||
label: 'Correctives',
|
||||
data: statistiques.evolutionMensuelle.map(e => e.correctives),
|
||||
borderColor: '#f59e0b',
|
||||
backgroundColor: 'rgba(245, 158, 11, 0.1)',
|
||||
tension: 0.4
|
||||
},
|
||||
{
|
||||
label: 'Urgentes',
|
||||
data: statistiques.evolutionMensuelle.map(e => e.urgentes),
|
||||
borderColor: '#ef4444',
|
||||
backgroundColor: 'rgba(239, 68, 68, 0.1)',
|
||||
tension: 0.4
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
const getRepartitionTypeChartData = () => {
|
||||
if (!statistiques?.repartitionParType) return {};
|
||||
|
||||
return {
|
||||
labels: statistiques.repartitionParType.map(r => r.type),
|
||||
datasets: [{
|
||||
data: statistiques.repartitionParType.map(r => r.nombre),
|
||||
backgroundColor: [
|
||||
'#3b82f6',
|
||||
'#f59e0b',
|
||||
'#10b981',
|
||||
'#ef4444'
|
||||
]
|
||||
}]
|
||||
};
|
||||
};
|
||||
|
||||
const getCoutChartData = () => {
|
||||
if (!statistiques?.coutParCategorie) return {};
|
||||
|
||||
return {
|
||||
labels: statistiques.coutParCategorie.map(c => c.categorie),
|
||||
datasets: [{
|
||||
data: statistiques.coutParCategorie.map(c => c.cout),
|
||||
backgroundColor: [
|
||||
'#8b5cf6',
|
||||
'#06b6d4',
|
||||
'#84cc16',
|
||||
'#f97316',
|
||||
'#ec4899'
|
||||
]
|
||||
}]
|
||||
};
|
||||
};
|
||||
|
||||
const performanceBodyTemplate = (rowData: any) => {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<ProgressBar value={rowData.tauxReussite} className="flex-1" />
|
||||
<span className="text-sm font-medium">{rowData.tauxReussite}%</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const evaluationBodyTemplate = (rowData: any) => {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<span className="font-medium">{rowData.evaluationMoyenne}/5</span>
|
||||
<div className="flex">
|
||||
{[1, 2, 3, 4, 5].map((star) => (
|
||||
<i
|
||||
key={star}
|
||||
className={`pi pi-star${star <= rowData.evaluationMoyenne ? '-fill' : ''} text-yellow-500`}
|
||||
style={{ fontSize: '0.8rem' }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const fiabiliteBodyTemplate = (rowData: any) => {
|
||||
const couleur = rowData.fiabilite > 80 ? 'success' :
|
||||
rowData.fiabilite > 60 ? 'warning' : 'danger';
|
||||
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<ProgressBar
|
||||
value={rowData.fiabilite}
|
||||
className="flex-1"
|
||||
color={couleur === 'success' ? '#10b981' : couleur === 'warning' ? '#fbbf24' : '#f87171'}
|
||||
/>
|
||||
<span className="text-sm font-medium">{rowData.fiabilite}%</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const coutBodyTemplate = (rowData: any) => {
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className="font-medium text-red-600">
|
||||
{rowData.coutMaintenance.toLocaleString('fr-FR')} €
|
||||
</span>
|
||||
<span className="text-sm text-500">
|
||||
{rowData.nombrePannes} pannes
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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="Rapport Détaillé"
|
||||
icon="pi pi-file-pdf"
|
||||
className="p-button-info"
|
||||
onClick={() => router.push('/maintenance/rapport-detaille')}
|
||||
/>
|
||||
<Button
|
||||
label="Exporter Données"
|
||||
icon="pi pi-download"
|
||||
className="p-button-secondary"
|
||||
onClick={() => router.push('/maintenance/export-statistiques')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-refresh"
|
||||
className="p-button-outlined"
|
||||
onClick={loadStatistiques}
|
||||
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 (!statistiques) {
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<p>Aucune donnée disponible pour la période sélectionnée</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</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">Date début</label>
|
||||
<Calendar
|
||||
value={dateDebut}
|
||||
onChange={(e) => setDateDebut(e.value as Date)}
|
||||
showIcon
|
||||
dateFormat="dd/mm/yy"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<label className="font-medium mb-2 block">Date fin</label>
|
||||
<Calendar
|
||||
value={dateFin}
|
||||
onChange={(e) => setDateFin(e.value as Date)}
|
||||
showIcon
|
||||
dateFormat="dd/mm/yy"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<label className="font-medium mb-2 block">Type</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">Actions</label>
|
||||
<Button
|
||||
label="Réinitialiser"
|
||||
icon="pi pi-filter-slash"
|
||||
className="p-button-outlined w-full"
|
||||
onClick={() => {
|
||||
setDateDebut(new Date(Date.now() - 6 * 30 * 24 * 60 * 60 * 1000));
|
||||
setDateFin(new Date());
|
||||
setFilterType(null);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Métriques principales */}
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-blue-600">{statistiques.resume.totalMaintenances}</div>
|
||||
<div className="text-500">Total maintenances</div>
|
||||
</div>
|
||||
<i className="pi pi-wrench text-blue-500 text-3xl" />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-green-600">{statistiques.resume.tauxReussite}%</div>
|
||||
<div className="text-500">Taux de réussite</div>
|
||||
</div>
|
||||
<i className="pi pi-check-circle text-green-500 text-3xl" />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-orange-600">
|
||||
{statistiques.resume.coutTotal.toLocaleString('fr-FR')} €
|
||||
</div>
|
||||
<div className="text-500">Coût total</div>
|
||||
</div>
|
||||
<i className="pi pi-euro text-orange-500 text-3xl" />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<div className="text-2xl font-bold text-purple-600">
|
||||
{statistiques.indicateursPerformance.disponibilite}%
|
||||
</div>
|
||||
<div className="text-500">Disponibilité</div>
|
||||
</div>
|
||||
<i className="pi pi-chart-line text-purple-500 text-3xl" />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Graphiques */}
|
||||
<div className="col-12 lg:col-6">
|
||||
<Card title="Évolution des Maintenances">
|
||||
<Chart type="line" data={getEvolutionChartData()} options={chartOptions} />
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-6">
|
||||
<Card title="Répartition par Type">
|
||||
<Chart type="doughnut" data={getRepartitionTypeChartData()} />
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-6">
|
||||
<Card title="Coûts par Catégorie">
|
||||
<Chart type="pie" data={getCoutChartData()} />
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-6">
|
||||
<Card title="Indicateurs de Performance">
|
||||
<div className="grid">
|
||||
<div className="col-6">
|
||||
<div className="text-center">
|
||||
<div className="text-xl font-bold text-blue-600">{statistiques.indicateursPerformance.mtbf}h</div>
|
||||
<div className="text-500 text-sm">MTBF</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<div className="text-center">
|
||||
<div className="text-xl font-bold text-green-600">{statistiques.indicateursPerformance.mttr}h</div>
|
||||
<div className="text-500 text-sm">MTTR</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<div className="text-center">
|
||||
<div className="text-xl font-bold text-orange-600">{statistiques.indicateursPerformance.fiabilite}%</div>
|
||||
<div className="text-500 text-sm">Fiabilité</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-6">
|
||||
<div className="text-center">
|
||||
<div className="text-xl font-bold text-purple-600">{statistiques.indicateursPerformance.maintenabilite}%</div>
|
||||
<div className="text-500 text-sm">Maintenabilité</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Tableaux détaillés */}
|
||||
<div className="col-12 lg:col-6">
|
||||
<Card title="Performance des Techniciens">
|
||||
<DataTable
|
||||
value={statistiques.performanceTechniciens}
|
||||
responsiveLayout="scroll"
|
||||
paginator
|
||||
rows={5}
|
||||
>
|
||||
<Column field="technicienNom" header="Technicien" />
|
||||
<Column field="nombreMaintenances" header="Nb" />
|
||||
<Column field="tauxReussite" header="Réussite" body={performanceBodyTemplate} />
|
||||
<Column field="evaluationMoyenne" header="Évaluation" body={evaluationBodyTemplate} />
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-6">
|
||||
<Card title="Matériels Problématiques">
|
||||
<DataTable
|
||||
value={statistiques.materielsProblematiques}
|
||||
responsiveLayout="scroll"
|
||||
paginator
|
||||
rows={5}
|
||||
>
|
||||
<Column field="materielNom" header="Matériel" />
|
||||
<Column field="nombrePannes" header="Pannes" />
|
||||
<Column field="fiabilite" header="Fiabilité" body={fiabiliteBodyTemplate} />
|
||||
<Column field="coutMaintenance" header="Coût" body={coutBodyTemplate} />
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Tendances */}
|
||||
<div className="col-12">
|
||||
<Card title="Tendances">
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-3">
|
||||
<div className="text-center">
|
||||
<div className={`text-xl font-bold ${statistiques.tendances.evolutionCouts > 0 ? 'text-red-600' : 'text-green-600'}`}>
|
||||
{statistiques.tendances.evolutionCouts > 0 ? '+' : ''}{statistiques.tendances.evolutionCouts}%
|
||||
</div>
|
||||
<div className="text-500">Évolution coûts</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<div className="text-center">
|
||||
<div className={`text-xl font-bold ${statistiques.tendances.evolutionNombreMaintenances > 0 ? 'text-red-600' : 'text-green-600'}`}>
|
||||
{statistiques.tendances.evolutionNombreMaintenances > 0 ? '+' : ''}{statistiques.tendances.evolutionNombreMaintenances}%
|
||||
</div>
|
||||
<div className="text-500">Évolution nombre</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<div className="text-center">
|
||||
<div className={`text-xl font-bold ${statistiques.tendances.evolutionTempsReponse > 0 ? 'text-red-600' : 'text-green-600'}`}>
|
||||
{statistiques.tendances.evolutionTempsReponse > 0 ? '+' : ''}{statistiques.tendances.evolutionTempsReponse}%
|
||||
</div>
|
||||
<div className="text-500">Temps réponse</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-12 md:col-3">
|
||||
<div className="text-center">
|
||||
<div className={`text-xl font-bold ${statistiques.tendances.evolutionDisponibilite > 0 ? 'text-green-600' : 'text-red-600'}`}>
|
||||
{statistiques.tendances.evolutionDisponibilite > 0 ? '+' : ''}{statistiques.tendances.evolutionDisponibilite}%
|
||||
</div>
|
||||
<div className="text-500">Disponibilité</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default StatistiquesMaintenancePage;
|
||||
550
app/(main)/maintenance/urgente/page.tsx
Normal file
550
app/(main)/maintenance/urgente/page.tsx
Normal file
@@ -0,0 +1,550 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { Button } from 'primereact/button';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { apiClient } from '../../../../services/api-client';
|
||||
|
||||
interface MaintenanceUrgente {
|
||||
id: number;
|
||||
materielId: number;
|
||||
materielNom: string;
|
||||
materielType: string;
|
||||
typeMaintenance: 'URGENTE';
|
||||
statut: 'PLANIFIEE' | 'EN_COURS' | 'TERMINEE' | 'ANNULEE';
|
||||
priorite: 'CRITIQUE';
|
||||
dateCreation: string;
|
||||
datePlanifiee: string;
|
||||
dateDebut?: string;
|
||||
dateFin?: string;
|
||||
technicienId?: number;
|
||||
technicienNom?: string;
|
||||
description: string;
|
||||
problemeSignale: string;
|
||||
solutionApportee?: string;
|
||||
dureeEstimee: number;
|
||||
dureeReelle?: number;
|
||||
coutEstime?: number;
|
||||
coutReel?: number;
|
||||
impactProduction: 'AUCUN' | 'FAIBLE' | 'MOYEN' | 'ELEVE' | 'ARRET_TOTAL';
|
||||
tempsReponse: number; // en minutes
|
||||
tempsResolution?: number; // en minutes
|
||||
escalade: boolean;
|
||||
personneSignalement: string;
|
||||
chantierImpacte?: string;
|
||||
mesuresTemporaires?: string;
|
||||
}
|
||||
|
||||
const MaintenanceUrgentePage = () => {
|
||||
const [maintenances, setMaintenances] = useState<MaintenanceUrgente[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
const [filterStatut, setFilterStatut] = useState<string | null>(null);
|
||||
const [filterImpact, setFilterImpact] = useState<string | null>(null);
|
||||
const [interventionDialog, setInterventionDialog] = useState(false);
|
||||
const [selectedMaintenance, setSelectedMaintenance] = useState<MaintenanceUrgente | null>(null);
|
||||
const [intervention, setIntervention] = useState({
|
||||
mesuresTemporaires: '',
|
||||
technicienId: 0,
|
||||
dateIntervention: new Date()
|
||||
});
|
||||
const [techniciens, setTechniciens] = useState<any[]>([]);
|
||||
const router = useRouter();
|
||||
|
||||
const statutOptions = [
|
||||
{ label: 'Tous', value: null },
|
||||
{ label: 'Planifiée', value: 'PLANIFIEE' },
|
||||
{ label: 'En cours', value: 'EN_COURS' },
|
||||
{ label: 'Terminée', value: 'TERMINEE' },
|
||||
{ label: 'Annulée', value: 'ANNULEE' }
|
||||
];
|
||||
|
||||
const impactOptions = [
|
||||
{ label: 'Tous', value: null },
|
||||
{ label: 'Aucun', value: 'AUCUN' },
|
||||
{ label: 'Faible', value: 'FAIBLE' },
|
||||
{ label: 'Moyen', value: 'MOYEN' },
|
||||
{ label: 'Élevé', value: 'ELEVE' },
|
||||
{ label: 'Arrêt total', value: 'ARRET_TOTAL' }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
loadMaintenancesUrgentes();
|
||||
loadTechniciens();
|
||||
}, [filterStatut, filterImpact]);
|
||||
|
||||
const loadMaintenancesUrgentes = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
console.log('🔄 Chargement des maintenances urgentes...');
|
||||
|
||||
const params = new URLSearchParams();
|
||||
params.append('type', 'URGENTE');
|
||||
if (filterStatut) params.append('statut', filterStatut);
|
||||
if (filterImpact) params.append('impact', filterImpact);
|
||||
|
||||
const response = await apiClient.get(`/api/maintenances/urgentes?${params.toString()}`);
|
||||
console.log('✅ Maintenances urgentes chargées:', response.data);
|
||||
setMaintenances(response.data || []);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du chargement:', error);
|
||||
setMaintenances([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadTechniciens = async () => {
|
||||
try {
|
||||
const response = await apiClient.get('/api/employes/techniciens/disponibles');
|
||||
setTechniciens(response.data || []);
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du chargement des techniciens:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const escaladerMaintenance = async (maintenanceId: number) => {
|
||||
try {
|
||||
await apiClient.post(`/api/maintenances/${maintenanceId}/escalader`);
|
||||
console.log('✅ Maintenance escaladée');
|
||||
loadMaintenancesUrgentes();
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de l\'escalade:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const ouvrirIntervention = (maintenance: MaintenanceUrgente) => {
|
||||
setSelectedMaintenance(maintenance);
|
||||
setIntervention({
|
||||
mesuresTemporaires: maintenance.mesuresTemporaires || '',
|
||||
technicienId: maintenance.technicienId || 0,
|
||||
dateIntervention: new Date()
|
||||
});
|
||||
setInterventionDialog(true);
|
||||
};
|
||||
|
||||
const planifierIntervention = async () => {
|
||||
if (!selectedMaintenance) return;
|
||||
|
||||
try {
|
||||
await apiClient.post(`/api/maintenances/${selectedMaintenance.id}/intervention-urgente`, intervention);
|
||||
console.log('✅ Intervention urgente planifiée');
|
||||
setInterventionDialog(false);
|
||||
loadMaintenancesUrgentes();
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de la planification:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const demarrerMaintenance = async (maintenanceId: number) => {
|
||||
try {
|
||||
await apiClient.post(`/api/maintenances/${maintenanceId}/demarrer`);
|
||||
console.log('✅ Maintenance démarrée');
|
||||
loadMaintenancesUrgentes();
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors du démarrage:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const terminerMaintenance = async (maintenanceId: number) => {
|
||||
try {
|
||||
await apiClient.post(`/api/maintenances/${maintenanceId}/terminer`);
|
||||
console.log('✅ Maintenance terminée');
|
||||
loadMaintenancesUrgentes();
|
||||
} catch (error) {
|
||||
console.error('❌ Erreur lors de la finalisation:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const statutBodyTemplate = (rowData: MaintenanceUrgente) => {
|
||||
const getStatutSeverity = (statut: string) => {
|
||||
switch (statut) {
|
||||
case 'PLANIFIEE': return 'danger'; // Urgent = rouge même planifié
|
||||
case 'EN_COURS': return 'warning';
|
||||
case 'TERMINEE': return 'success';
|
||||
case 'ANNULEE': return 'secondary';
|
||||
default: return 'secondary';
|
||||
}
|
||||
};
|
||||
|
||||
return <Tag value={rowData.statut} severity={getStatutSeverity(rowData.statut)} />;
|
||||
};
|
||||
|
||||
const impactBodyTemplate = (rowData: MaintenanceUrgente) => {
|
||||
const getImpactSeverity = (impact: string) => {
|
||||
switch (impact) {
|
||||
case 'AUCUN': return 'success';
|
||||
case 'FAIBLE': return 'info';
|
||||
case 'MOYEN': return 'warning';
|
||||
case 'ELEVE': return 'danger';
|
||||
case 'ARRET_TOTAL': return 'danger';
|
||||
default: return 'secondary';
|
||||
}
|
||||
};
|
||||
|
||||
return <Tag value={rowData.impactProduction} severity={getImpactSeverity(rowData.impactProduction)} />;
|
||||
};
|
||||
|
||||
const materielBodyTemplate = (rowData: MaintenanceUrgente) => {
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className="font-medium text-red-600">{rowData.materielNom}</span>
|
||||
<span className="text-sm text-500">{rowData.materielType}</span>
|
||||
{rowData.chantierImpacte && (
|
||||
<span className="text-xs text-orange-500">
|
||||
Chantier: {rowData.chantierImpacte}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const problemeBodyTemplate = (rowData: MaintenanceUrgente) => {
|
||||
return (
|
||||
<div className="max-w-20rem">
|
||||
<p className="m-0 text-sm line-height-3 font-medium text-red-600">
|
||||
{rowData.problemeSignale.length > 100
|
||||
? `${rowData.problemeSignale.substring(0, 100)}...`
|
||||
: rowData.problemeSignale
|
||||
}
|
||||
</p>
|
||||
<div className="text-xs text-500 mt-1">
|
||||
Signalé par: {rowData.personneSignalement}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const tempsBodyTemplate = (rowData: MaintenanceUrgente) => {
|
||||
const tempsEcoule = Math.floor((new Date().getTime() - new Date(rowData.dateCreation).getTime()) / (1000 * 60));
|
||||
const heures = Math.floor(tempsEcoule / 60);
|
||||
const minutes = tempsEcoule % 60;
|
||||
|
||||
const couleur = tempsEcoule > 120 ? 'text-red-500' :
|
||||
tempsEcoule > 60 ? 'text-orange-500' : 'text-green-500';
|
||||
|
||||
return (
|
||||
<div className="flex flex-column gap-1">
|
||||
<span className={`font-medium ${couleur}`}>
|
||||
{heures > 0 ? `${heures}h ${minutes}min` : `${minutes}min`}
|
||||
</span>
|
||||
<span className="text-xs text-500">
|
||||
Depuis signalement
|
||||
</span>
|
||||
{rowData.tempsResolution && (
|
||||
<span className="text-xs text-green-600">
|
||||
Résolu en {Math.floor(rowData.tempsResolution / 60)}h{rowData.tempsResolution % 60}min
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const escaladeBodyTemplate = (rowData: MaintenanceUrgente) => {
|
||||
if (rowData.escalade) {
|
||||
return <Tag value="ESCALADÉ" severity="danger" />;
|
||||
}
|
||||
|
||||
const tempsEcoule = Math.floor((new Date().getTime() - new Date(rowData.dateCreation).getTime()) / (1000 * 60));
|
||||
if (tempsEcoule > 120 && rowData.statut !== 'TERMINEE') {
|
||||
return (
|
||||
<Button
|
||||
label="Escalader"
|
||||
icon="pi pi-exclamation-triangle"
|
||||
className="p-button-danger p-button-sm"
|
||||
onClick={() => escaladerMaintenance(rowData.id)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return <span className="text-500">Normal</span>;
|
||||
};
|
||||
|
||||
const technicienBodyTemplate = (rowData: MaintenanceUrgente) => {
|
||||
if (rowData.technicienNom) {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<i className="pi pi-user text-blue-500" />
|
||||
<span>{rowData.technicienNom}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Button
|
||||
label="Assigner"
|
||||
icon="pi pi-user-plus"
|
||||
className="p-button-danger p-button-sm"
|
||||
onClick={() => ouvrirIntervention(rowData)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const mesuresBodyTemplate = (rowData: MaintenanceUrgente) => {
|
||||
if (rowData.mesuresTemporaires) {
|
||||
return (
|
||||
<div className="max-w-15rem">
|
||||
<p className="m-0 text-sm line-height-3 text-blue-600">
|
||||
{rowData.mesuresTemporaires.length > 80
|
||||
? `${rowData.mesuresTemporaires.substring(0, 80)}...`
|
||||
: rowData.mesuresTemporaires
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <span className="text-500">Aucune mesure</span>;
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: MaintenanceUrgente) => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-eye"
|
||||
className="p-button-rounded p-button-info p-button-sm"
|
||||
onClick={() => router.push(`/maintenance/${rowData.id}`)}
|
||||
tooltip="Voir détails"
|
||||
/>
|
||||
{rowData.statut === 'PLANIFIEE' && (
|
||||
<>
|
||||
<Button
|
||||
icon="pi pi-cog"
|
||||
className="p-button-rounded p-button-warning p-button-sm"
|
||||
onClick={() => ouvrirIntervention(rowData)}
|
||||
tooltip="Planifier intervention"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-play"
|
||||
className="p-button-rounded p-button-danger p-button-sm"
|
||||
onClick={() => demarrerMaintenance(rowData.id)}
|
||||
tooltip="Démarrer"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{rowData.statut === 'EN_COURS' && (
|
||||
<Button
|
||||
icon="pi pi-check"
|
||||
className="p-button-rounded p-button-success p-button-sm"
|
||||
onClick={() => terminerMaintenance(rowData.id)}
|
||||
tooltip="Terminer"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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="Signaler Urgence"
|
||||
icon="pi pi-exclamation-triangle"
|
||||
className="p-button-danger"
|
||||
onClick={() => router.push('/maintenance/signaler-urgence')}
|
||||
/>
|
||||
<Button
|
||||
label="Protocole Urgence"
|
||||
icon="pi pi-book"
|
||||
className="p-button-warning"
|
||||
onClick={() => router.push('/maintenance/protocole-urgence')}
|
||||
/>
|
||||
<Button
|
||||
label="Équipes d'Astreinte"
|
||||
icon="pi pi-users"
|
||||
className="p-button-info"
|
||||
onClick={() => router.push('/maintenance/astreinte')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<span className="p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText
|
||||
type="search"
|
||||
placeholder="Rechercher..."
|
||||
value={globalFilter}
|
||||
onChange={(e) => setGlobalFilter(e.target.value)}
|
||||
/>
|
||||
</span>
|
||||
<Button
|
||||
icon="pi pi-refresh"
|
||||
className="p-button-outlined"
|
||||
onClick={loadMaintenancesUrgentes}
|
||||
tooltip="Actualiser"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const header = (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h2 className="m-0 text-red-600">🚨 Maintenance Urgente</h2>
|
||||
<div className="flex gap-2 mt-2 md:mt-0">
|
||||
<Badge value={maintenances.filter(m => m.impactProduction === 'ARRET_TOTAL').length} severity="danger" />
|
||||
<span>Arrêt total</span>
|
||||
<Badge value={maintenances.filter(m => m.escalade).length} severity="warning" />
|
||||
<span>Escaladées</span>
|
||||
<Badge value={maintenances.filter(m => m.statut === 'EN_COURS').length} severity="info" />
|
||||
<span>En cours</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<Toolbar
|
||||
className="mb-4"
|
||||
left={leftToolbarTemplate}
|
||||
right={rightToolbarTemplate}
|
||||
/>
|
||||
|
||||
{/* Filtres */}
|
||||
<div className="grid mb-4">
|
||||
<div className="col-12 md:col-4">
|
||||
<label className="font-medium mb-2 block">Statut</label>
|
||||
<Dropdown
|
||||
value={filterStatut}
|
||||
options={statutOptions}
|
||||
onChange={(e) => setFilterStatut(e.value)}
|
||||
placeholder="Tous les statuts"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-4">
|
||||
<label className="font-medium mb-2 block">Impact production</label>
|
||||
<Dropdown
|
||||
value={filterImpact}
|
||||
options={impactOptions}
|
||||
onChange={(e) => setFilterImpact(e.value)}
|
||||
placeholder="Tous les impacts"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12 md:col-4">
|
||||
<label className="font-medium mb-2 block">Actions</label>
|
||||
<Button
|
||||
label="Réinitialiser filtres"
|
||||
icon="pi pi-filter-slash"
|
||||
className="p-button-outlined w-full"
|
||||
onClick={() => {
|
||||
setFilterStatut(null);
|
||||
setFilterImpact(null);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
value={maintenances}
|
||||
loading={loading}
|
||||
dataKey="id"
|
||||
paginator
|
||||
rows={10}
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
className="datatable-responsive"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} maintenances urgentes"
|
||||
globalFilter={globalFilter}
|
||||
emptyMessage="Aucune maintenance urgente trouvée."
|
||||
header={header}
|
||||
responsiveLayout="scroll"
|
||||
rowClassName={(rowData) => rowData.impactProduction === 'ARRET_TOTAL' ? 'bg-red-50' : ''}
|
||||
>
|
||||
<Column field="statut" header="Statut" body={statutBodyTemplate} sortable style={{ width: '8rem' }} />
|
||||
<Column field="impactProduction" header="Impact" body={impactBodyTemplate} sortable style={{ width: '8rem' }} />
|
||||
<Column field="materielNom" header="Matériel" body={materielBodyTemplate} sortable />
|
||||
<Column field="problemeSignale" header="Problème Urgent" body={problemeBodyTemplate} style={{ width: '18rem' }} />
|
||||
<Column field="dateCreation" header="Temps" body={tempsBodyTemplate} sortable style={{ width: '10rem' }} />
|
||||
<Column field="escalade" header="Escalade" body={escaladeBodyTemplate} style={{ width: '10rem' }} />
|
||||
<Column field="technicienNom" header="Technicien" body={technicienBodyTemplate} style={{ width: '10rem' }} />
|
||||
<Column field="mesuresTemporaires" header="Mesures" body={mesuresBodyTemplate} style={{ width: '12rem' }} />
|
||||
<Column body={actionBodyTemplate} header="Actions" style={{ width: '12rem' }} />
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Dialog Intervention Urgente */}
|
||||
<Dialog
|
||||
visible={interventionDialog}
|
||||
style={{ width: '50vw' }}
|
||||
header="🚨 Planifier Intervention Urgente"
|
||||
modal
|
||||
onHide={() => setInterventionDialog(false)}
|
||||
footer={
|
||||
<div>
|
||||
<Button
|
||||
label="Annuler"
|
||||
icon="pi pi-times"
|
||||
className="p-button-outlined"
|
||||
onClick={() => setInterventionDialog(false)}
|
||||
/>
|
||||
<Button
|
||||
label="Planifier"
|
||||
icon="pi pi-check"
|
||||
className="p-button-danger"
|
||||
onClick={planifierIntervention}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<div className="grid p-fluid">
|
||||
<div className="col-12">
|
||||
<label className="font-medium">Technicien d'intervention *</label>
|
||||
<Dropdown
|
||||
value={intervention.technicienId}
|
||||
options={techniciens}
|
||||
onChange={(e) => setIntervention({ ...intervention, technicienId: e.value })}
|
||||
optionLabel="nom"
|
||||
optionValue="id"
|
||||
placeholder="Sélectionner un technicien disponible"
|
||||
filter
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<label className="font-medium">Date/Heure d'intervention *</label>
|
||||
<Calendar
|
||||
value={intervention.dateIntervention}
|
||||
onChange={(e) => setIntervention({ ...intervention, dateIntervention: e.value as Date })}
|
||||
showTime
|
||||
showIcon
|
||||
dateFormat="dd/mm/yy"
|
||||
timeFormat="24"
|
||||
placeholder="Sélectionner date et heure"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-12">
|
||||
<label className="font-medium">Mesures temporaires</label>
|
||||
<InputTextarea
|
||||
value={intervention.mesuresTemporaires}
|
||||
onChange={(e) => setIntervention({ ...intervention, mesuresTemporaires: e.target.value })}
|
||||
rows={3}
|
||||
placeholder="Décrivez les mesures temporaires mises en place..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MaintenanceUrgentePage;
|
||||
Reference in New Issue
Block a user