feat: Pages de détails complètes pour chantiers, clients et matériels
PHASE 2 - FINALISATIONS FONCTIONNELLES TERMINÉES ✅ Pages Chantiers [id] créées: - /chantiers/[id]: Vue d'ensemble avec statistiques et navigation - /chantiers/[id]/budget: Suivi budgétaire détaillé avec graphiques - /chantiers/[id]/planning: Chronologie et planning des tâches - /chantiers/[id]/documents: Gestion des documents du chantier - /chantiers/[id]/equipe: Liste et gestion de l'équipe affectée ✅ Pages Clients [id] créées: - /clients/[id]: Fiche client complète avec coordonnées - Onglets: Chantiers, Factures, Documents - Statistiques et historique complet ✅ Pages Matériels [id] créées: - /materiels/[id]: Fiche matériel avec informations techniques - Calendrier de disponibilité - Onglets: Réservations, Maintenances, Documents - Timeline des maintenances Fonctionnalités implémentées: - Navigation fluide entre les pages - Boutons retour vers listes principales - DataTables avec tri et filtres - Graphiques budget (bar chart, doughnut) - Calendriers et timeline - Tags de statut colorés - Cards statistiques - Responsive design Technologies utilisées: - PrimeReact (DataTable, Chart, Calendar, Timeline, TabView) - Next.js App Router avec dynamic routes [id] - TypeScript avec interfaces typées - Integration API backend via fetch Prochaines étapes: - Connecter aux vraies APIs backend - Ajouter formulaires de modification - Implémenter actions (supprimer, modifier) - Ajouter toasts de confirmation 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
DahoudG
301
app/(main)/chantiers/[id]/budget/page.tsx
Normal file
301
app/(main)/chantiers/[id]/budget/page.tsx
Normal file
@@ -0,0 +1,301 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Button } from 'primereact/button';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import { Chart } from 'primereact/chart';
|
||||
import { Tag } from 'primereact/tag';
|
||||
|
||||
interface BudgetChantier {
|
||||
id: number;
|
||||
chantierNom: string;
|
||||
budgetTotal: number;
|
||||
depenseTotal: number;
|
||||
resteAEngager: number;
|
||||
lignesBudget: LigneBudget[];
|
||||
}
|
||||
|
||||
interface LigneBudget {
|
||||
id: number;
|
||||
categorie: string;
|
||||
budgetPrevu: number;
|
||||
depenseReel: number;
|
||||
ecart: number;
|
||||
pourcentageUtilisation: number;
|
||||
}
|
||||
|
||||
export default function ChantierBudgetPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const id = params.id as string;
|
||||
|
||||
const [budget, setBudget] = useState<BudgetChantier | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
loadBudget();
|
||||
}
|
||||
}, [id]);
|
||||
|
||||
const loadBudget = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const API_URL = process.env.NEXT_PUBLIC_API_URL || 'https://api.lions.dev/btpxpress';
|
||||
|
||||
// Charger le budget du chantier
|
||||
const response = await fetch(`${API_URL}/api/v1/budgets/chantier/${id}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Erreur lors du chargement du budget');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setBudget(data);
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatMontant = (montant: number) => {
|
||||
return new Intl.NumberFormat('fr-FR', {
|
||||
style: 'currency',
|
||||
currency: 'EUR'
|
||||
}).format(montant);
|
||||
};
|
||||
|
||||
const montantBodyTemplate = (rowData: LigneBudget, field: string) => {
|
||||
const value = (rowData as any)[field];
|
||||
return formatMontant(value);
|
||||
};
|
||||
|
||||
const ecartBodyTemplate = (rowData: LigneBudget) => {
|
||||
const severity = rowData.ecart >= 0 ? 'success' : 'danger';
|
||||
const icon = rowData.ecart >= 0 ? 'pi-check' : 'pi-exclamation-triangle';
|
||||
|
||||
return (
|
||||
<Tag
|
||||
value={formatMontant(Math.abs(rowData.ecart))}
|
||||
severity={severity}
|
||||
icon={`pi ${icon}`}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const progressionBodyTemplate = (rowData: LigneBudget) => {
|
||||
const severity = rowData.pourcentageUtilisation > 100 ? 'danger' :
|
||||
rowData.pourcentageUtilisation > 80 ? 'warning' : 'success';
|
||||
|
||||
return (
|
||||
<div>
|
||||
<ProgressBar value={rowData.pourcentageUtilisation} showValue={false} color={severity === 'danger' ? '#ef4444' : severity === 'warning' ? '#f59e0b' : '#10b981'} />
|
||||
<span className="text-sm">{rowData.pourcentageUtilisation.toFixed(1)}%</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const getChartData = () => {
|
||||
if (!budget) return null;
|
||||
|
||||
return {
|
||||
labels: budget.lignesBudget?.map(l => l.categorie) || [],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Budget prévu',
|
||||
backgroundColor: '#42A5F5',
|
||||
data: budget.lignesBudget?.map(l => l.budgetPrevu) || []
|
||||
},
|
||||
{
|
||||
label: 'Dépenses réelles',
|
||||
backgroundColor: '#FFA726',
|
||||
data: budget.lignesBudget?.map(l => l.depenseReel) || []
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
const getChartOptions = () => {
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.8,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'top',
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
callback: function(value: any) {
|
||||
return formatMontant(value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const getPourcentageUtilisation = () => {
|
||||
if (!budget || budget.budgetTotal === 0) return 0;
|
||||
return (budget.depenseTotal / budget.budgetTotal) * 100;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<div className="flex justify-content-between align-items-center mb-3">
|
||||
<div className="flex align-items-center">
|
||||
<Button
|
||||
icon="pi pi-arrow-left"
|
||||
className="p-button-text mr-2"
|
||||
onClick={() => router.push(`/chantiers/${id}`)}
|
||||
tooltip="Retour"
|
||||
/>
|
||||
<h2 className="m-0">Budget du chantier</h2>
|
||||
</div>
|
||||
<Button
|
||||
label="Ajouter une ligne"
|
||||
icon="pi pi-plus"
|
||||
className="p-button-success"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Vue d'ensemble */}
|
||||
<div className="col-12 lg:col-4">
|
||||
<Card title="Budget total">
|
||||
<div className="text-center">
|
||||
<div className="text-5xl font-bold text-primary mb-2">
|
||||
{budget ? formatMontant(budget.budgetTotal) : formatMontant(0)}
|
||||
</div>
|
||||
<div className="text-600">Montant budgété</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-4">
|
||||
<Card title="Dépenses réelles">
|
||||
<div className="text-center">
|
||||
<div className="text-5xl font-bold text-orange-500 mb-2">
|
||||
{budget ? formatMontant(budget.depenseTotal) : formatMontant(0)}
|
||||
</div>
|
||||
<div className="text-600">Montant dépensé</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-4">
|
||||
<Card title="Reste à engager">
|
||||
<div className="text-center">
|
||||
<div className="text-5xl font-bold text-green-500 mb-2">
|
||||
{budget ? formatMontant(budget.resteAEngager) : formatMontant(0)}
|
||||
</div>
|
||||
<div className="text-600">Montant disponible</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Progression */}
|
||||
<div className="col-12">
|
||||
<Card title="Utilisation du budget">
|
||||
<div className="mb-2">
|
||||
<ProgressBar
|
||||
value={getPourcentageUtilisation()}
|
||||
showValue={false}
|
||||
color={getPourcentageUtilisation() > 100 ? '#ef4444' : getPourcentageUtilisation() > 80 ? '#f59e0b' : '#10b981'}
|
||||
style={{ height: '30px' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="text-center text-xl font-bold">
|
||||
{getPourcentageUtilisation().toFixed(1)}% du budget utilisé
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Graphique */}
|
||||
<div className="col-12 lg:col-6">
|
||||
<Card title="Comparaison Budget / Dépenses">
|
||||
<Chart type="bar" data={getChartData()} options={getChartOptions()} style={{ height: '400px' }} />
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Répartition */}
|
||||
<div className="col-12 lg:col-6">
|
||||
<Card title="Répartition du budget">
|
||||
<Chart
|
||||
type="doughnut"
|
||||
data={{
|
||||
labels: budget?.lignesBudget?.map(l => l.categorie) || [],
|
||||
datasets: [{
|
||||
data: budget?.lignesBudget?.map(l => l.budgetPrevu) || [],
|
||||
backgroundColor: [
|
||||
'#42A5F5',
|
||||
'#66BB6A',
|
||||
'#FFA726',
|
||||
'#EF5350',
|
||||
'#AB47BC',
|
||||
'#26C6DA'
|
||||
]
|
||||
}]
|
||||
}}
|
||||
style={{ height: '400px' }}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Tableau détaillé */}
|
||||
<div className="col-12">
|
||||
<Card title="Détail par catégorie">
|
||||
<DataTable
|
||||
value={budget?.lignesBudget || []}
|
||||
loading={loading}
|
||||
responsiveLayout="scroll"
|
||||
emptyMessage="Aucune ligne budgétaire"
|
||||
>
|
||||
<Column field="categorie" header="Catégorie" sortable />
|
||||
<Column
|
||||
field="budgetPrevu"
|
||||
header="Budget prévu"
|
||||
body={(rowData) => montantBodyTemplate(rowData, 'budgetPrevu')}
|
||||
sortable
|
||||
/>
|
||||
<Column
|
||||
field="depenseReel"
|
||||
header="Dépenses réelles"
|
||||
body={(rowData) => montantBodyTemplate(rowData, 'depenseReel')}
|
||||
sortable
|
||||
/>
|
||||
<Column
|
||||
field="ecart"
|
||||
header="Écart"
|
||||
body={ecartBodyTemplate}
|
||||
sortable
|
||||
/>
|
||||
<Column
|
||||
field="pourcentageUtilisation"
|
||||
header="Utilisation"
|
||||
body={progressionBodyTemplate}
|
||||
sortable
|
||||
/>
|
||||
<Column
|
||||
header="Actions"
|
||||
body={() => (
|
||||
<div className="flex gap-2">
|
||||
<Button icon="pi pi-pencil" className="p-button-text p-button-sm" />
|
||||
<Button icon="pi pi-trash" className="p-button-text p-button-sm p-button-danger" />
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user