fix: Add return true to Chip onRemove handlers and resolve conflicts

This commit is contained in:
dahoud
2025-10-13 08:11:00 +00:00
38 changed files with 10116 additions and 383 deletions

View File

@@ -560,4 +560,8 @@ const ExecutionGranulaireChantier = () => {
);
};
<<<<<<< HEAD
export default ExecutionGranulaireChantier;
=======
export default ExecutionGranulaireChantier;
>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1

View File

@@ -1,3 +1,4 @@
<<<<<<< HEAD
'use client';
import React, { useState, useRef, useEffect } from 'react';
@@ -327,3 +328,334 @@ const PhasesCleanPage: React.FC = () => {
export default PhasesCleanPage;
=======
'use client';
import React, { useState, useRef, useEffect } from 'react';
import { useParams } from 'next/navigation';
import { Card } from 'primereact/card';
import { Button } from 'primereact/button';
import { Dialog } from 'primereact/dialog';
import { InputText } from 'primereact/inputtext';
import { InputTextarea } from 'primereact/inputtextarea';
import { Calendar } from 'primereact/calendar';
import { InputNumber } from 'primereact/inputnumber';
import { Dropdown } from 'primereact/dropdown';
import { Checkbox } from 'primereact/checkbox';
import { Toast } from 'primereact/toast';
import { Toolbar } from 'primereact/toolbar';
import { Badge } from 'primereact/badge';
import PhasesTable from '../../../../../components/phases/PhasesTable';
import usePhasesManager from '../../../../../hooks/usePhasesManager';
import type { PhaseChantier, PhaseFormData } from '../../../../../types/btp-extended';
const PhasesCleanPage: React.FC = () => {
const params = useParams();
const chantierId = params?.id as string;
const toast = useRef<Toast>(null);
// Hook de gestion des phases
const {
phases,
loading,
selectedPhase,
setSelectedPhase,
loadPhases,
createPhase,
updatePhase,
deletePhase,
startPhase,
setToastRef
} = usePhasesManager({ chantierId });
const [globalFilter, setGlobalFilter] = useState('');
// États pour les dialogues
const [showPhaseDialog, setShowPhaseDialog] = useState(false);
const [editingPhase, setEditingPhase] = useState(false);
// États pour les formulaires
const [phaseForm, setPhaseForm] = useState<PhaseFormData>({
nom: '',
description: '',
dateDebutPrevue: '',
dateFinPrevue: '',
dureeEstimeeHeures: 8,
priorite: 'MOYENNE',
critique: false,
statut: 'PLANIFIEE',
ordreExecution: 1,
budgetPrevu: 0,
coutReel: 0,
prerequisPhases: [],
competencesRequises: [],
materielsNecessaires: [],
fournisseursRecommandes: []
});
// Initialisation
useEffect(() => {
setToastRef(toast.current);
if (chantierId) {
loadPhases();
}
}, [chantierId, setToastRef, loadPhases]);
// Gestionnaires d'événements
const handleEditPhase = (phase: PhaseChantier) => {
setSelectedPhase(phase);
setEditingPhase(true);
setPhaseForm({
nom: phase.nom,
description: phase.description || '',
dateDebutPrevue: phase.dateDebutPrevue || '',
dateFinPrevue: phase.dateFinPrevue || '',
dureeEstimeeHeures: phase.dureeEstimeeHeures || 8,
priorite: phase.priorite || 'MOYENNE',
critique: phase.critique || false,
statut: phase.statut,
ordreExecution: phase.ordreExecution || 1,
budgetPrevu: phase.budgetPrevu || 0,
coutReel: phase.coutReel || 0,
prerequisPhases: phase.prerequisPhases || [],
competencesRequises: phase.competencesRequises || [],
materielsNecessaires: phase.materielsNecessaires || [],
fournisseursRecommandes: phase.fournisseursRecommandes || []
});
setShowPhaseDialog(true);
};
const handleSavePhase = async () => {
if (!phaseForm.nom.trim()) {
toast.current?.show({
severity: 'warn',
summary: 'Données manquantes',
detail: 'Veuillez remplir le nom de la phase',
life: 3000
});
return;
}
try {
const phaseData = {
...phaseForm,
chantierId: chantierId
};
if (editingPhase && selectedPhase) {
await updatePhase(selectedPhase.id!, phaseData);
} else {
await createPhase(phaseData);
}
setShowPhaseDialog(false);
setEditingPhase(false);
setSelectedPhase(null);
resetPhaseForm();
} catch (error) {
console.error('Erreur lors de la sauvegarde de la phase:', error);
}
};
const resetPhaseForm = () => {
setPhaseForm({
nom: '',
description: '',
dateDebutPrevue: '',
dateFinPrevue: '',
dureeEstimeeHeures: 8,
priorite: 'MOYENNE',
critique: false,
statut: 'PLANIFIEE',
ordreExecution: 1,
budgetPrevu: 0,
coutReel: 0,
prerequisPhases: [],
competencesRequises: [],
materielsNecessaires: [],
fournisseursRecommandes: []
});
};
// Templates de la toolbar
const toolbarStartTemplate = (
<div className="flex align-items-center gap-2">
<h5 className="m-0 text-color">Phases - Version Clean</h5>
<Badge value={phases.length} />
</div>
);
const toolbarEndTemplate = (
<div className="flex gap-2">
<span className="p-input-icon-left">
<i className="pi pi-search" />
<InputText
value={globalFilter}
onChange={(e) => setGlobalFilter(e.target.value)}
placeholder="Rechercher..."
/>
</span>
<Button
label="Nouvelle phase"
icon="pi pi-plus"
className="p-button-success"
onClick={() => {
resetPhaseForm();
setEditingPhase(false);
setShowPhaseDialog(true);
}}
/>
</div>
);
return (
<div className="grid">
<Toast ref={toast} />
<div className="col-12">
<Card>
<Toolbar
start={toolbarStartTemplate}
end={toolbarEndTemplate}
className="mb-4"
/>
<PhasesTable
phases={phases}
loading={loading}
chantierId={chantierId}
showStats={false}
showChantierColumn={false}
showSubPhases={true}
showBudget={true}
showExpansion={true}
actions={['view', 'edit', 'delete', 'start']}
onRefresh={loadPhases}
onPhaseEdit={handleEditPhase}
onPhaseDelete={deletePhase}
onPhaseStart={startPhase}
rows={15}
globalFilter={globalFilter}
showGlobalFilter={true}
/>
</Card>
</div>
{/* Dialog pour créer/modifier une phase */}
<Dialog
header={editingPhase ? "Modifier la phase" : "Nouvelle phase"}
visible={showPhaseDialog}
onHide={() => {
setShowPhaseDialog(false);
setEditingPhase(false);
resetPhaseForm();
}}
footer={
<div>
<Button
label="Annuler"
icon="pi pi-times"
className="p-button-text"
onClick={() => {
setShowPhaseDialog(false);
setEditingPhase(false);
resetPhaseForm();
}}
/>
<Button
label={editingPhase ? "Modifier" : "Créer"}
icon="pi pi-check"
className="p-button-success"
onClick={handleSavePhase}
/>
</div>
}
style={{ width: '50vw', maxWidth: '600px' }}
modal
>
<div className="grid">
<div className="col-12">
<div className="field">
<label htmlFor="phaseNom" className="font-semibold">
Nom de la phase <span className="text-red-500">*</span>
</label>
<InputText
id="phaseNom"
value={phaseForm.nom}
onChange={(e) => setPhaseForm(prev => ({ ...prev, nom: e.target.value }))}
className="w-full"
placeholder="Ex: Fondations, Gros œuvre..."
/>
</div>
</div>
<div className="col-12">
<div className="field">
<label htmlFor="phaseDescription" className="font-semibold">Description</label>
<InputTextarea
id="phaseDescription"
value={phaseForm.description}
onChange={(e) => setPhaseForm(prev => ({ ...prev, description: e.target.value }))}
className="w-full"
rows={3}
placeholder="Description détaillée de la phase..."
/>
</div>
</div>
<div className="col-12 md:col-6">
<div className="field">
<label htmlFor="phaseDuree" className="font-semibold">Durée estimée (heures)</label>
<InputNumber
id="phaseDuree"
value={phaseForm.dureeEstimeeHeures}
onChange={(e) => setPhaseForm(prev => ({ ...prev, dureeEstimeeHeures: e.value || 0 }))}
className="w-full"
min={1}
suffix=" h"
/>
</div>
</div>
<div className="col-12 md:col-6">
<div className="field">
<label htmlFor="phasePriorite" className="font-semibold">Priorité</label>
<Dropdown
id="phasePriorite"
value={phaseForm.priorite}
options={[
{ label: 'Faible', value: 'FAIBLE' },
{ label: 'Moyenne', value: 'MOYENNE' },
{ label: 'Élevée', value: 'ELEVEE' },
{ label: 'Critique', value: 'CRITIQUE' }
]}
onChange={(e) => setPhaseForm(prev => ({ ...prev, priorite: e.value }))}
className="w-full"
/>
</div>
</div>
<div className="col-12">
<div className="field-checkbox">
<Checkbox
id="phaseCritique"
checked={phaseForm.critique}
onChange={(e) => setPhaseForm(prev => ({ ...prev, critique: e.checked }))}
/>
<label htmlFor="phaseCritique" className="ml-2 font-semibold">
Phase critique
</label>
</div>
</div>
</div>
</Dialog>
</div>
);
};
export default PhasesCleanPage;
>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1

File diff suppressed because it is too large Load Diff

View File

@@ -1,3 +1,4 @@
<<<<<<< HEAD
'use client';
import React, { useState, useEffect, useRef } from 'react';
@@ -339,3 +340,346 @@ export default ChantiersEnCoursPage;
=======
'use client';
import React, { useState, useEffect, useRef } from 'react';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Button } from 'primereact/button';
import { InputText } from 'primereact/inputtext';
import { Card } from 'primereact/card';
import { Toast } from 'primereact/toast';
import { Toolbar } from 'primereact/toolbar';
import { Tag } from 'primereact/tag';
import { ProgressBar } from 'primereact/progressbar';
import { Dialog } from 'primereact/dialog';
import { Calendar } from 'primereact/calendar';
import { InputNumber } from 'primereact/inputnumber';
import { chantierService } from '../../../../services/api';
import { formatDate, formatCurrency } from '../../../../utils/formatters';
import type { Chantier, StatutChantier } from '../../../../types/btp';
const ChantiersEnCoursPage = () => {
const [chantiers, setChantiers] = useState<Chantier[]>([]);
const [loading, setLoading] = useState(true);
const [globalFilter, setGlobalFilter] = useState('');
const [selectedChantiers, setSelectedChantiers] = useState<Chantier[]>([]);
const [updateDialog, setUpdateDialog] = useState(false);
const [selectedChantier, setSelectedChantier] = useState<Chantier | null>(null);
const [updateData, setUpdateData] = useState({ dateFinReelle: null, montantReel: 0 });
const toast = useRef<Toast>(null);
const dt = useRef<DataTable<Chantier[]>>(null);
useEffect(() => {
loadChantiers();
}, []);
const loadChantiers = async () => {
try {
setLoading(true);
const data = await chantierService.getAll();
// Filtrer seulement les chantiers en cours
const chantiersEnCours = data.filter(chantier => chantier.statut === 'EN_COURS');
setChantiers(chantiersEnCours);
} catch (error) {
console.error('Erreur lors du chargement des chantiers:', error);
toast.current?.show({
severity: 'error',
summary: 'Erreur',
detail: 'Impossible de charger les chantiers en cours',
life: 3000
});
} finally {
setLoading(false);
}
};
const calculateProgress = (chantier: Chantier) => {
if (!chantier.dateDebut || !chantier.dateFinPrevue) return 0;
const now = new Date();
const start = new Date(chantier.dateDebut);
const end = new Date(chantier.dateFinPrevue);
const totalDays = (end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24);
const elapsedDays = (now.getTime() - start.getTime()) / (1000 * 60 * 60 * 24);
return Math.min(Math.max((elapsedDays / totalDays) * 100, 0), 100);
};
const isLate = (chantier: Chantier) => {
if (!chantier.dateFinPrevue) return false;
const today = new Date();
const endDate = new Date(chantier.dateFinPrevue);
return today > endDate;
};
const markAsCompleted = (chantier: Chantier) => {
setSelectedChantier(chantier);
setUpdateData({
dateFinReelle: new Date(),
montantReel: chantier.montantReel || chantier.montantPrevu || 0
});
setUpdateDialog(true);
};
const handleCompleteChantier = async () => {
if (!selectedChantier) return;
try {
const updatedChantier = {
...selectedChantier,
statut: 'TERMINE' as StatutChantier,
dateFinReelle: updateData.dateFinReelle,
montantReel: updateData.montantReel
};
await chantierService.update(selectedChantier.id, updatedChantier);
// Retirer le chantier de la liste car il n'est plus "en cours"
setChantiers(prev => prev.filter(c => c.id !== selectedChantier.id));
setUpdateDialog(false);
toast.current?.show({
severity: 'success',
summary: 'Succès',
detail: 'Chantier marqué comme terminé',
life: 3000
});
} catch (error) {
console.error('Erreur lors de la mise à jour:', error);
toast.current?.show({
severity: 'error',
summary: 'Erreur',
detail: 'Impossible de mettre à jour le chantier',
life: 3000
});
}
};
const exportCSV = () => {
dt.current?.exportCSV();
};
const leftToolbarTemplate = () => {
return (
<div className="my-2">
<h5 className="m-0">Chantiers en cours ({chantiers.length})</h5>
</div>
);
};
const rightToolbarTemplate = () => {
return (
<Button
label="Exporter"
icon="pi pi-upload"
severity="help"
onClick={exportCSV}
/>
);
};
const actionBodyTemplate = (rowData: Chantier) => {
return (
<div className="flex gap-2">
<Button
icon="pi pi-check"
rounded
severity="success"
size="small"
tooltip="Marquer comme terminé"
onClick={() => markAsCompleted(rowData)}
/>
<Button
icon="pi pi-eye"
rounded
severity="info"
size="small"
tooltip="Voir détails"
onClick={() => {
toast.current?.show({
severity: 'info',
summary: 'Info',
detail: `Détails du chantier ${rowData.nom}`,
life: 3000
});
}}
/>
</div>
);
};
const statusBodyTemplate = (rowData: Chantier) => {
const late = isLate(rowData);
return (
<div className="flex align-items-center gap-2">
<Tag value="En cours" severity="success" />
{late && <Tag value="En retard" severity="danger" />}
</div>
);
};
const progressBodyTemplate = (rowData: Chantier) => {
const progress = calculateProgress(rowData);
const late = isLate(rowData);
return (
<div className="flex align-items-center gap-2">
<ProgressBar
value={progress}
style={{ height: '6px', width: '100px' }}
color={late ? '#ef4444' : undefined}
/>
<span className={`text-sm ${late ? 'text-red-500' : ''}`}>
{Math.round(progress)}%
</span>
</div>
);
};
const clientBodyTemplate = (rowData: Chantier) => {
if (!rowData.client) return '';
return `${rowData.client.prenom} ${rowData.client.nom}`;
};
const dateBodyTemplate = (rowData: Chantier, field: string) => {
const date = (rowData as any)[field];
const late = field === 'dateFinPrevue' && isLate(rowData);
return (
<span className={late ? 'text-red-500 font-bold' : ''}>
{date ? formatDate(date) : ''}
{late && <i className="pi pi-exclamation-triangle ml-1"></i>}
</span>
);
};
const budgetBodyTemplate = (rowData: Chantier) => {
const prevu = rowData.montantPrevu || 0;
const reel = rowData.montantReel || 0;
const progress = calculateProgress(rowData);
const estimated = prevu * (progress / 100);
return (
<div className="text-sm">
<div>Prévu: {formatCurrency(prevu)}</div>
<div className="text-600">Estimé: {formatCurrency(estimated)}</div>
</div>
);
};
const header = (
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
<h5 className="m-0">Chantiers en cours de réalisation</h5>
<span className="block mt-2 md:mt-0 p-input-icon-left">
<i className="pi pi-search" />
<InputText
type="search"
placeholder="Rechercher..."
onInput={(e) => setGlobalFilter(e.currentTarget.value)}
/>
</span>
</div>
);
const completeDialogFooter = (
<>
<Button
label="Annuler"
icon="pi pi-times"
text
onClick={() => setUpdateDialog(false)}
/>
<Button
label="Marquer comme terminé"
icon="pi pi-check"
text
onClick={handleCompleteChantier}
/>
</>
);
return (
<div className="grid">
<div className="col-12">
<Card>
<Toast ref={toast} />
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
<DataTable
ref={dt}
value={chantiers}
selection={selectedChantiers}
onSelectionChange={(e) => setSelectedChantiers(e.value)}
selectionMode="multiple"
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} chantiers"
globalFilter={globalFilter}
emptyMessage="Aucun chantier en cours trouvé."
header={header}
responsiveLayout="scroll"
loading={loading}
>
<Column selectionMode="multiple" headerStyle={{ width: '4rem' }} />
<Column field="nom" header="Nom" sortable headerStyle={{ minWidth: '12rem' }} />
<Column field="client" header="Client" body={clientBodyTemplate} sortable headerStyle={{ minWidth: '12rem' }} />
<Column field="adresse" header="Adresse" sortable headerStyle={{ minWidth: '12rem' }} />
<Column field="dateDebut" header="Date début" body={(rowData) => dateBodyTemplate(rowData, 'dateDebut')} sortable headerStyle={{ minWidth: '10rem' }} />
<Column field="dateFinPrevue" header="Date fin prévue" body={(rowData) => dateBodyTemplate(rowData, 'dateFinPrevue')} sortable headerStyle={{ minWidth: '10rem' }} />
<Column field="statut" header="Statut" body={statusBodyTemplate} headerStyle={{ minWidth: '10rem' }} />
<Column field="progress" header="Progression" body={progressBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
<Column field="budget" header="Budget" body={budgetBodyTemplate} headerStyle={{ minWidth: '12rem' }} />
<Column body={actionBodyTemplate} headerStyle={{ minWidth: '8rem' }} />
</DataTable>
<Dialog
visible={updateDialog}
style={{ width: '450px' }}
header="Finaliser le chantier"
modal
className="p-fluid"
footer={completeDialogFooter}
onHide={() => setUpdateDialog(false)}
>
<div className="formgrid grid">
<div className="field col-12">
<label htmlFor="dateFinReelle">Date de fin réelle</label>
<Calendar
id="dateFinReelle"
value={updateData.dateFinReelle}
onChange={(e) => setUpdateData(prev => ({ ...prev, dateFinReelle: e.value }))}
dateFormat="dd/mm/yy"
showIcon
/>
</div>
<div className="field col-12">
<label htmlFor="montantReel">Montant réel ()</label>
<InputNumber
id="montantReel"
value={updateData.montantReel}
onValueChange={(e) => setUpdateData(prev => ({ ...prev, montantReel: e.value || 0 }))}
mode="currency"
currency="EUR"
locale="fr-FR"
/>
</div>
</div>
</Dialog>
</Card>
</div>
</div>
);
};
export default ChantiersEnCoursPage;
>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1

View File

@@ -374,6 +374,12 @@ const ChantiersExecutionGranulaire = () => {
);
};
<<<<<<< HEAD
export default ChantiersExecutionGranulaire;
=======
export default ChantiersExecutionGranulaire;
>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1

File diff suppressed because it is too large Load Diff

View File

@@ -375,5 +375,10 @@ const ChantiersPlanifiesPage = () => {
};
export default ChantiersPlanifiesPage;
<<<<<<< HEAD
=======
>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1

View File

@@ -473,5 +473,10 @@ STATISTIQUES:
};
export default ChantiersRetardPage;
<<<<<<< HEAD
=======
>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1

View File

@@ -403,5 +403,10 @@ Variance budgétaire: ${formatCurrency(totalCost - totalBudget)} (${Math.round((
};
export default ChantiersTerminesPage;
<<<<<<< HEAD
=======
>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1

View File

@@ -581,7 +581,14 @@ const WorkflowChantiers = () => {
};
export default WorkflowChantiers;
<<<<<<< HEAD
=======
>>>>>>> 5ed9a80339c59d689b9655e8be1a68312d19d4a1