Initial commit
This commit is contained in:
dahoud
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;
|
||||
Reference in New Issue
Block a user