564 lines
24 KiB
TypeScript
564 lines
24 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import { useParams } from 'next/navigation';
|
|
import { Card } from 'primereact/card';
|
|
import { Checkbox } from 'primereact/checkbox';
|
|
import { Button } from 'primereact/button';
|
|
import { ProgressBar } from 'primereact/progressbar';
|
|
import { Badge } from 'primereact/badge';
|
|
import { Toast } from 'primereact/toast';
|
|
import { Accordion, AccordionTab } from 'primereact/accordion';
|
|
import { TreeTable } from 'primereact/treetable';
|
|
import { Column } from 'primereact/column';
|
|
import { Dialog } from 'primereact/dialog';
|
|
import { InputTextarea } from 'primereact/inputtextarea';
|
|
import { Avatar } from 'primereact/avatar';
|
|
import { apiClient } from '../../../../../services/api-client';
|
|
|
|
/**
|
|
* Interface pour les tâches d'exécution avec état de completion
|
|
*/
|
|
interface TacheExecution {
|
|
id: string;
|
|
nom: string;
|
|
description?: string;
|
|
ordreExecution: number;
|
|
dureeEstimeeMinutes?: number;
|
|
critique: boolean;
|
|
bloquante: boolean;
|
|
priorite: 'BASSE' | 'NORMALE' | 'HAUTE';
|
|
niveauQualification?: string;
|
|
nombreOperateursRequis: number;
|
|
conditionsMeteo: string;
|
|
outilsRequis?: string[];
|
|
materiauxRequis?: string[];
|
|
|
|
// État d'exécution
|
|
terminee: boolean;
|
|
dateCompletion?: Date;
|
|
completeepar?: string;
|
|
commentaires?: string;
|
|
tempsRealise?: number; // en minutes
|
|
difficulteRencontree?: 'AUCUNE' | 'FAIBLE' | 'MOYENNE' | 'ELEVEE';
|
|
}
|
|
|
|
interface SousPhaseExecution {
|
|
id: string;
|
|
nom: string;
|
|
description?: string;
|
|
ordreExecution: number;
|
|
taches: TacheExecution[];
|
|
|
|
// Calculé automatiquement
|
|
avancement: number; // % basé sur les tâches terminées
|
|
tachesTerminees: number;
|
|
totalTaches: number;
|
|
dureeRealisee: number; // en minutes
|
|
dureeEstimee: number; // en minutes
|
|
}
|
|
|
|
interface PhaseExecution {
|
|
id: string;
|
|
nom: string;
|
|
description?: string;
|
|
ordreExecution: number;
|
|
sousPhases: SousPhaseExecution[];
|
|
|
|
// Calculé automatiquement
|
|
avancement: number; // % basé sur les sous-phases
|
|
sousPhasesTerminees: number;
|
|
totalSousPhases: number;
|
|
}
|
|
|
|
interface ChantierExecution {
|
|
id: string;
|
|
nom: string;
|
|
client: string;
|
|
dateDebut: Date;
|
|
dateFinPrevue: Date;
|
|
phases: PhaseExecution[];
|
|
|
|
// Avancement global calculé
|
|
avancementGlobal: number; // % basé sur toutes les tâches
|
|
totalTachesTerminees: number;
|
|
totalTaches: number;
|
|
}
|
|
|
|
/**
|
|
* Page d'exécution granulaire d'un chantier
|
|
* Permet de cocher les tâches terminées pour un suivi précis de l'avancement
|
|
*/
|
|
const ExecutionGranulaireChantier = () => {
|
|
const { id } = useParams();
|
|
const toast = useRef<Toast>(null);
|
|
|
|
// États principaux
|
|
const [chantier, setChantier] = useState<ChantierExecution | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
// États pour les modals
|
|
const [showCommentDialog, setShowCommentDialog] = useState(false);
|
|
const [selectedTache, setSelectedTache] = useState<TacheExecution | null>(null);
|
|
const [commentaires, setCommentaires] = useState('');
|
|
const [tempsRealise, setTempsRealise] = useState<number>(0);
|
|
const [difficulte, setDifficulte] = useState<'AUCUNE' | 'FAIBLE' | 'MOYENNE' | 'ELEVEE'>('AUCUNE');
|
|
|
|
// États pour la vue
|
|
const [activeIndex, setActiveIndex] = useState<number | number[]>(0);
|
|
const [expandedKeys, setExpandedKeys] = useState<any>({});
|
|
|
|
useEffect(() => {
|
|
if (id) {
|
|
loadChantierExecution(id as string);
|
|
}
|
|
}, [id]);
|
|
|
|
/**
|
|
* Charge les données d'exécution du chantier
|
|
*/
|
|
const loadChantierExecution = async (chantierId: string) => {
|
|
try {
|
|
setLoading(true);
|
|
|
|
// Charger les informations de base du chantier
|
|
const chantierResponse = await apiClient.get(`/chantiers/${chantierId}`);
|
|
const chantierData = chantierResponse.data;
|
|
|
|
// Charger les phases avec leurs sous-phases et tâches
|
|
const phasesResponse = await apiClient.get(`/chantiers/${chantierId}/phases`);
|
|
const phasesData = phasesResponse.data;
|
|
|
|
// Pour chaque phase, charger les tâches d'exécution
|
|
const phasesWithExecution = await Promise.all(
|
|
phasesData.map(async (phase: any) => {
|
|
const sousPhasesWithTaches = await Promise.all(
|
|
phase.sousPhases?.map(async (sousPhase: any) => {
|
|
// Charger les tâches et leur état d'exécution
|
|
const tachesExecution = await loadTachesExecution(chantierId, sousPhase.id);
|
|
|
|
// Calculer l'avancement de la sous-phase
|
|
const tachesTerminees = tachesExecution.filter(t => t.terminee).length;
|
|
const avancement = tachesExecution.length > 0 ?
|
|
(tachesTerminees / tachesExecution.length) * 100 : 0;
|
|
|
|
const dureeRealisee = tachesExecution
|
|
.filter(t => t.terminee && t.tempsRealise)
|
|
.reduce((sum, t) => sum + (t.tempsRealise || 0), 0);
|
|
|
|
const dureeEstimee = tachesExecution
|
|
.reduce((sum, t) => sum + (t.dureeEstimeeMinutes || 0), 0);
|
|
|
|
return {
|
|
...sousPhase,
|
|
taches: tachesExecution,
|
|
avancement: Math.round(avancement),
|
|
tachesTerminees,
|
|
totalTaches: tachesExecution.length,
|
|
dureeRealisee,
|
|
dureeEstimee
|
|
};
|
|
}) || []
|
|
);
|
|
|
|
// Calculer l'avancement de la phase
|
|
const totalTaches = sousPhasesWithTaches.reduce((sum, sp) => sum + sp.totalTaches, 0);
|
|
const totalTachesTerminees = sousPhasesWithTaches.reduce((sum, sp) => sum + sp.tachesTerminees, 0);
|
|
const avancement = totalTaches > 0 ? (totalTachesTerminees / totalTaches) * 100 : 0;
|
|
|
|
return {
|
|
...phase,
|
|
sousPhases: sousPhasesWithTaches,
|
|
avancement: Math.round(avancement),
|
|
totalSousPhases: sousPhasesWithTaches.length,
|
|
sousPhasesTerminees: sousPhasesWithTaches.filter(sp => sp.avancement === 100).length
|
|
};
|
|
})
|
|
);
|
|
|
|
// Calculer l'avancement global du chantier
|
|
const totalTaches = phasesWithExecution.reduce((sum, phase) =>
|
|
sum + phase.sousPhases.reduce((spSum, sp) => spSum + sp.totalTaches, 0), 0
|
|
);
|
|
const totalTachesTerminees = phasesWithExecution.reduce((sum, phase) =>
|
|
sum + phase.sousPhases.reduce((spSum, sp) => spSum + sp.tachesTerminees, 0), 0
|
|
);
|
|
const avancementGlobal = totalTaches > 0 ? (totalTachesTerminees / totalTaches) * 100 : 0;
|
|
|
|
setChantier({
|
|
id: chantierData.id,
|
|
nom: chantierData.nom,
|
|
client: chantierData.client?.nom || chantierData.client,
|
|
dateDebut: new Date(chantierData.dateDebut),
|
|
dateFinPrevue: new Date(chantierData.dateFinPrevue),
|
|
phases: phasesWithExecution,
|
|
avancementGlobal: Math.round(avancementGlobal),
|
|
totalTaches,
|
|
totalTachesTerminees
|
|
});
|
|
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement:', error);
|
|
showToast('error', 'Erreur', 'Impossible de charger les données d\'exécution');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Charge les tâches d'exécution pour une sous-phase
|
|
*/
|
|
const loadTachesExecution = async (chantierId: string, sousPhaseId: string): Promise<TacheExecution[]> => {
|
|
try {
|
|
// Charger les templates de tâches
|
|
const templatesResponse = await apiClient.get(`/tache-templates/by-sous-phase/${sousPhaseId}`);
|
|
const templates = templatesResponse.data;
|
|
|
|
// Charger les états d'exécution (s'ils existent)
|
|
let etatsExecution = [];
|
|
try {
|
|
const etatsResponse = await apiClient.get(`/chantiers/${chantierId}/taches-execution/${sousPhaseId}`);
|
|
etatsExecution = etatsResponse.data;
|
|
} catch (error) {
|
|
// Pas encore d'états d'exécution, on démarre avec toutes les tâches non terminées
|
|
console.log('Aucun état d\'exécution trouvé, initialisation...');
|
|
}
|
|
|
|
// Combiner templates avec états d'exécution
|
|
return templates.map((template: any) => {
|
|
const etat = etatsExecution.find((e: any) => e.tacheTemplateId === template.id);
|
|
return {
|
|
...template,
|
|
terminee: etat?.terminee || false,
|
|
dateCompletion: etat?.dateCompletion ? new Date(etat.dateCompletion) : undefined,
|
|
completeepar: etat?.completeepar,
|
|
commentaires: etat?.commentaires,
|
|
tempsRealise: etat?.tempsRealise,
|
|
difficulteRencontree: etat?.difficulteRencontree || 'AUCUNE'
|
|
};
|
|
});
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement des tâches:', error);
|
|
return [];
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Marque une tâche comme terminée ou non terminée
|
|
*/
|
|
const toggleTacheTerminee = async (tache: TacheExecution) => {
|
|
if (!tache.terminee) {
|
|
// Marquer comme terminée - ouvrir le dialog pour les détails
|
|
setSelectedTache(tache);
|
|
setCommentaires(tache.commentaires || '');
|
|
setTempsRealise(tache.tempsRealise || tache.dureeEstimeeMinutes || 0);
|
|
setDifficulte(tache.difficulteRencontree || 'AUCUNE');
|
|
setShowCommentDialog(true);
|
|
} else {
|
|
// Marquer comme non terminée
|
|
await saveTacheExecution(tache, false);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Sauvegarde l'état d'exécution d'une tâche
|
|
*/
|
|
const saveTacheExecution = async (tache: TacheExecution, terminee: boolean, details?: any) => {
|
|
try {
|
|
setSaving(true);
|
|
|
|
const executionData = {
|
|
chantierID: id,
|
|
tacheTemplateId: tache.id,
|
|
terminee,
|
|
dateCompletion: terminee ? new Date().toISOString() : null,
|
|
completeepar: terminee ? 'CURRENT_USER' : null, // À remplacer par l'utilisateur connecté
|
|
commentaires: details?.commentaires || '',
|
|
tempsRealise: details?.tempsRealise || null,
|
|
difficulteRencontree: details?.difficulte || 'AUCUNE'
|
|
};
|
|
|
|
await apiClient.post(`/chantiers/${id}/taches-execution`, executionData);
|
|
|
|
showToast('success', 'Succès',
|
|
terminee ? 'Tâche marquée comme terminée' : 'Tâche marquée comme non terminée'
|
|
);
|
|
|
|
// Recharger les données pour mettre à jour l'avancement
|
|
await loadChantierExecution(id as string);
|
|
|
|
} catch (error) {
|
|
console.error('Erreur lors de la sauvegarde:', error);
|
|
showToast('error', 'Erreur', 'Impossible de sauvegarder l\'état de la tâche');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Confirme la completion d'une tâche avec les détails
|
|
*/
|
|
const confirmerCompletion = async () => {
|
|
if (!selectedTache) return;
|
|
|
|
await saveTacheExecution(selectedTache, true, {
|
|
commentaires,
|
|
tempsRealise,
|
|
difficulte
|
|
});
|
|
|
|
setShowCommentDialog(false);
|
|
setSelectedTache(null);
|
|
};
|
|
|
|
/**
|
|
* Affiche un toast message
|
|
*/
|
|
const showToast = (severity: 'success' | 'info' | 'warn' | 'error', summary: string, detail: string) => {
|
|
toast.current?.show({ severity, summary, detail, life: 3000 });
|
|
};
|
|
|
|
/**
|
|
* Template pour l'affichage d'une tâche avec checkbox
|
|
*/
|
|
const renderTacheCheckbox = (tache: TacheExecution) => {
|
|
const isDisabled = saving;
|
|
|
|
return (
|
|
<div
|
|
className={`flex align-items-center gap-3 p-3 border-round transition-colors ${
|
|
tache.terminee ? 'bg-green-50 border-green-200' : 'bg-white border-gray-200'
|
|
} border-1 hover:bg-gray-50`}
|
|
>
|
|
<Checkbox
|
|
checked={tache.terminee}
|
|
onChange={() => toggleTacheTerminee(tache)}
|
|
disabled={isDisabled}
|
|
/>
|
|
|
|
<div className="flex-1">
|
|
<div className={`font-medium ${tache.terminee ? 'line-through text-600' : ''}`}>
|
|
{tache.nom}
|
|
</div>
|
|
{tache.description && (
|
|
<div className="text-sm text-600 mt-1">{tache.description}</div>
|
|
)}
|
|
|
|
<div className="flex gap-2 mt-2">
|
|
{tache.critique && <Badge value="Critique" severity="danger" className="p-badge-sm" />}
|
|
{tache.bloquante && <Badge value="Bloquante" severity="warning" className="p-badge-sm" />}
|
|
{tache.priorite === 'HAUTE' && <Badge value="Haute priorité" severity="info" className="p-badge-sm" />}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-right text-sm">
|
|
{tache.dureeEstimeeMinutes && (
|
|
<div className="text-600">
|
|
Estimé: {Math.floor(tache.dureeEstimeeMinutes / 60)}h{tache.dureeEstimeeMinutes % 60}min
|
|
</div>
|
|
)}
|
|
{tache.terminee && tache.tempsRealise && (
|
|
<div className="text-green-600 font-medium">
|
|
Réalisé: {Math.floor(tache.tempsRealise / 60)}h{tache.tempsRealise % 60}min
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex justify-content-center align-items-center h-20rem">
|
|
<i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
|
|
<span className="ml-2">Chargement de l'exécution du chantier...</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!chantier) {
|
|
return (
|
|
<div className="text-center">
|
|
<h5>Chantier non trouvé</h5>
|
|
<p>Impossible de charger les données d'exécution du chantier.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid">
|
|
<Toast ref={toast} />
|
|
|
|
{/* En-tête avec avancement global */}
|
|
<div className="col-12">
|
|
<Card>
|
|
<div className="flex justify-content-between align-items-start">
|
|
<div className="flex-1">
|
|
<h4 className="mt-0 mb-2">{chantier.nom}</h4>
|
|
<div className="text-600 mb-3">
|
|
Client: {chantier.client} •
|
|
Début: {chantier.dateDebut.toLocaleDateString('fr-FR')} •
|
|
Fin prévue: {chantier.dateFinPrevue.toLocaleDateString('fr-FR')}
|
|
</div>
|
|
|
|
<div className="flex align-items-center gap-4">
|
|
<div className="flex-1">
|
|
<div className="flex justify-content-between mb-2">
|
|
<span className="font-medium">Avancement Global</span>
|
|
<span className="font-bold text-lg">{chantier.avancementGlobal}%</span>
|
|
</div>
|
|
<ProgressBar
|
|
value={chantier.avancementGlobal}
|
|
className="mb-2"
|
|
style={{ height: '12px' }}
|
|
/>
|
|
<div className="text-sm text-600">
|
|
{chantier.totalTachesTerminees} / {chantier.totalTaches} tâches terminées
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-right">
|
|
<Avatar
|
|
icon="pi pi-chart-line"
|
|
size="xlarge"
|
|
className="bg-blue-100 text-blue-800"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Phases avec sous-phases et tâches */}
|
|
<div className="col-12">
|
|
<Accordion activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
|
|
{chantier.phases.map((phase, phaseIndex) => (
|
|
<AccordionTab
|
|
key={phase.id}
|
|
header={
|
|
<div className="flex justify-content-between align-items-center w-full pr-4">
|
|
<div className="flex align-items-center gap-3">
|
|
<Badge value={phase.ordreExecution} />
|
|
<span className="font-medium">{phase.nom}</span>
|
|
</div>
|
|
<div className="flex align-items-center gap-2">
|
|
<span className="text-sm">{phase.avancement}%</span>
|
|
<ProgressBar
|
|
value={phase.avancement}
|
|
style={{ width: '100px', height: '8px' }}
|
|
showValue={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
}
|
|
>
|
|
<div className="grid">
|
|
{phase.sousPhases.map((sousPhase) => (
|
|
<div key={sousPhase.id} className="col-12">
|
|
<Card className="mb-3">
|
|
<div className="flex justify-content-between align-items-center mb-3">
|
|
<div>
|
|
<h6 className="mt-0 mb-1">{sousPhase.nom}</h6>
|
|
{sousPhase.description && (
|
|
<p className="text-600 mt-0 mb-2">{sousPhase.description}</p>
|
|
)}
|
|
<div className="text-sm text-500">
|
|
{sousPhase.tachesTerminees} / {sousPhase.totalTaches} tâches terminées
|
|
</div>
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-lg font-bold mb-1">{sousPhase.avancement}%</div>
|
|
<ProgressBar
|
|
value={sousPhase.avancement}
|
|
style={{ width: '120px', height: '8px' }}
|
|
showValue={false}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-column gap-2">
|
|
{sousPhase.taches.map((tache) => (
|
|
<div key={tache.id}>
|
|
{renderTacheCheckbox(tache)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</AccordionTab>
|
|
))}
|
|
</Accordion>
|
|
</div>
|
|
|
|
{/* Dialog de completion de tâche */}
|
|
<Dialog
|
|
header="Finaliser la tâche"
|
|
visible={showCommentDialog}
|
|
onHide={() => setShowCommentDialog(false)}
|
|
style={{ width: '50vw' }}
|
|
breakpoints={{ '960px': '75vw', '641px': '90vw' }}
|
|
modal
|
|
>
|
|
{selectedTache && (
|
|
<div className="p-fluid">
|
|
<div className="mb-4">
|
|
<h6 className="text-primary">{selectedTache.nom}</h6>
|
|
{selectedTache.description && (
|
|
<p className="text-600 mt-1">{selectedTache.description}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="field">
|
|
<label htmlFor="commentaires">Commentaires (optionnel)</label>
|
|
<InputTextarea
|
|
id="commentaires"
|
|
value={commentaires}
|
|
onChange={(e) => setCommentaires(e.target.value)}
|
|
rows={3}
|
|
placeholder="Commentaires sur la réalisation de cette tâche..."
|
|
/>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<label>Temps réalisé (minutes)</label>
|
|
<input
|
|
type="number"
|
|
className="p-inputtext p-component"
|
|
value={tempsRealise}
|
|
onChange={(e) => setTempsRealise(parseInt(e.target.value) || 0)}
|
|
min={0}
|
|
/>
|
|
{selectedTache.dureeEstimeeMinutes && (
|
|
<small className="text-600">
|
|
Temps estimé: {selectedTache.dureeEstimeeMinutes} minutes
|
|
</small>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex justify-content-end gap-2 mt-4">
|
|
<Button
|
|
label="Annuler"
|
|
icon="pi pi-times"
|
|
className="p-button-text"
|
|
onClick={() => setShowCommentDialog(false)}
|
|
/>
|
|
<Button
|
|
label="Marquer comme terminée"
|
|
icon="pi pi-check"
|
|
onClick={confirmerCompletion}
|
|
loading={saving}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ExecutionGranulaireChantier;
|