From a91a34dbf8fe3deafd616102d56279e816e014ed Mon Sep 17 00:00:00 2001 From: DahoudG Date: Fri, 31 Oct 2025 11:52:21 +0000 Subject: [PATCH] =?UTF-8?q?feat:=20Pages=20de=20d=C3=A9tails=20compl=C3=A8?= =?UTF-8?q?tes=20pour=20chantiers,=20clients=20et=20mat=C3=A9riels?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- app/(main)/chantiers/[id]/budget/page.tsx | 301 +++++++++++++++++ app/(main)/chantiers/[id]/documents/page.tsx | 131 ++++++++ app/(main)/chantiers/[id]/equipe/page.tsx | 197 +++++++++++ app/(main)/chantiers/[id]/page.tsx | 336 +++++++++++++++++++ app/(main)/chantiers/[id]/planning/page.tsx | 288 ++++++++++++++++ app/(main)/clients/[id]/page.tsx | 222 ++++++++++++ app/(main)/materiels/[id]/page.tsx | 197 +++++++++++ 7 files changed, 1672 insertions(+) create mode 100644 app/(main)/chantiers/[id]/budget/page.tsx create mode 100644 app/(main)/chantiers/[id]/documents/page.tsx create mode 100644 app/(main)/chantiers/[id]/equipe/page.tsx create mode 100644 app/(main)/chantiers/[id]/page.tsx create mode 100644 app/(main)/chantiers/[id]/planning/page.tsx create mode 100644 app/(main)/clients/[id]/page.tsx create mode 100644 app/(main)/materiels/[id]/page.tsx diff --git a/app/(main)/chantiers/[id]/budget/page.tsx b/app/(main)/chantiers/[id]/budget/page.tsx new file mode 100644 index 0000000..8993b84 --- /dev/null +++ b/app/(main)/chantiers/[id]/budget/page.tsx @@ -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(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 ( + + ); + }; + + const progressionBodyTemplate = (rowData: LigneBudget) => { + const severity = rowData.pourcentageUtilisation > 100 ? 'danger' : + rowData.pourcentageUtilisation > 80 ? 'warning' : 'success'; + + return ( +
+ + {rowData.pourcentageUtilisation.toFixed(1)}% +
+ ); + }; + + 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 ( +
+
+
+
+
+
+
+ + {/* Vue d'ensemble */} +
+ +
+
+ {budget ? formatMontant(budget.budgetTotal) : formatMontant(0)} +
+
Montant budgété
+
+ +
+ +
+ +
+
+ {budget ? formatMontant(budget.depenseTotal) : formatMontant(0)} +
+
Montant dépensé
+
+ +
+ +
+ +
+
+ {budget ? formatMontant(budget.resteAEngager) : formatMontant(0)} +
+
Montant disponible
+
+ +
+ + {/* Progression */} +
+ +
+ 100 ? '#ef4444' : getPourcentageUtilisation() > 80 ? '#f59e0b' : '#10b981'} + style={{ height: '30px' }} + /> +
+
+ {getPourcentageUtilisation().toFixed(1)}% du budget utilisé +
+ +
+ + {/* Graphique */} +
+ + + +
+ + {/* Répartition */} +
+ + l.categorie) || [], + datasets: [{ + data: budget?.lignesBudget?.map(l => l.budgetPrevu) || [], + backgroundColor: [ + '#42A5F5', + '#66BB6A', + '#FFA726', + '#EF5350', + '#AB47BC', + '#26C6DA' + ] + }] + }} + style={{ height: '400px' }} + /> + +
+ + {/* Tableau détaillé */} +
+ + + + montantBodyTemplate(rowData, 'budgetPrevu')} + sortable + /> + montantBodyTemplate(rowData, 'depenseReel')} + sortable + /> + + + ( +
+
+ )} + /> + + +
+
+ ); +} diff --git a/app/(main)/chantiers/[id]/documents/page.tsx b/app/(main)/chantiers/[id]/documents/page.tsx new file mode 100644 index 0000000..d6a2e5c --- /dev/null +++ b/app/(main)/chantiers/[id]/documents/page.tsx @@ -0,0 +1,131 @@ +'use client'; + +import React, { useState } 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 { FileUpload } from 'primereact/fileupload'; +import { Tag } from 'primereact/tag'; + +interface Document { + id: number; + nom: string; + type: string; + taille: number; + dateAjout: string; + ajoutePar: string; + categorie: string; +} + +export default function ChantierDocumentsPage() { + const params = useParams(); + const router = useRouter(); + const id = params.id as string; + + const [documents] = useState([ + { + id: 1, + nom: 'Plan d\'architecte.pdf', + type: 'PDF', + taille: 2500000, + dateAjout: '2025-01-15', + ajoutePar: 'Jean Dupont', + categorie: 'Plans' + }, + { + id: 2, + nom: 'Devis matériaux.xlsx', + type: 'Excel', + taille: 150000, + dateAjout: '2025-01-20', + ajoutePar: 'Marie Martin', + categorie: 'Devis' + } + ]); + + const formatTaille = (bytes: number) => { + if (bytes === 0) return '0 Bytes'; + const k = 1024; + const sizes = ['Bytes', 'KB', 'MB', 'GB']; + const i = Math.floor(Math.log(bytes) / Math.log(k)); + return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]; + }; + + const typeBodyTemplate = (rowData: Document) => { + const icon = rowData.type === 'PDF' ? 'pi-file-pdf' : + rowData.type === 'Excel' ? 'pi-file-excel' : 'pi-file'; + return ; + }; + + const tailleBodyTemplate = (rowData: Document) => { + return formatTaille(rowData.taille); + }; + + const categorieBodyTemplate = (rowData: Document) => { + return ; + }; + + const actionsBodyTemplate = () => { + return ( +
+
+ ); + }; + + return ( +
+
+
+
+
+
+
+ +
+ + Glissez-déposez vos fichiers ici

} + chooseLabel="Choisir des fichiers" + uploadLabel="Téléverser" + cancelLabel="Annuler" + /> + +
+ +
+ + + + + + + + + + + +
+
+ ); +} diff --git a/app/(main)/chantiers/[id]/equipe/page.tsx b/app/(main)/chantiers/[id]/equipe/page.tsx new file mode 100644 index 0000000..e15328a --- /dev/null +++ b/app/(main)/chantiers/[id]/equipe/page.tsx @@ -0,0 +1,197 @@ +'use client'; + +import React, { useState } 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 { Avatar } from 'primereact/avatar'; +import { Tag } from 'primereact/tag'; +import { Badge } from 'primereact/badge'; + +interface MembreEquipe { + id: number; + nom: string; + prenom: string; + role: string; + specialite: string; + email: string; + telephone: string; + dateAffectation: string; + statut: string; +} + +export default function ChantierEquipePage() { + const params = useParams(); + const router = useRouter(); + const id = params.id as string; + + const [membres] = useState([ + { + id: 1, + nom: 'Dupont', + prenom: 'Jean', + role: 'Chef de chantier', + specialite: 'Gestion', + email: 'jean.dupont@btpxpress.fr', + telephone: '06 12 34 56 78', + dateAffectation: '2025-01-01', + statut: 'Actif' + }, + { + id: 2, + nom: 'Martin', + prenom: 'Marie', + role: 'Maçon', + specialite: 'Maçonnerie', + email: 'marie.martin@btpxpress.fr', + telephone: '06 23 45 67 89', + dateAffectation: '2025-01-05', + statut: 'Actif' + } + ]); + + const nomBodyTemplate = (rowData: MembreEquipe) => { + return ( +
+ +
+
{rowData.prenom} {rowData.nom}
+
{rowData.role}
+
+
+ ); + }; + + const specialiteBodyTemplate = (rowData: MembreEquipe) => { + return ; + }; + + const statutBodyTemplate = (rowData: MembreEquipe) => { + const severity = rowData.statut === 'Actif' ? 'success' : 'danger'; + return ; + }; + + const actionsBodyTemplate = () => { + return ( +
+
+ ); + }; + + return ( +
+
+
+
+
+
+
+ + {/* Statistiques équipe */} +
+ +
+
+ Total membres +
{membres.length}
+
+
+ +
+
+ +
+ +
+ +
+
+ Membres actifs +
+ {membres.filter(m => m.statut === 'Actif').length} +
+
+
+ +
+
+ +
+ +
+ +
+
+ Spécialités +
+ {new Set(membres.map(m => m.specialite)).size} +
+
+
+ +
+
+ +
+ +
+ +
+
+ Chef de chantier +
+ {membres.filter(m => m.role === 'Chef de chantier').length} +
+
+
+ +
+
+ +
+ + {/* Liste des membres */} +
+ + + + + + + + + + + +
+
+ ); +} diff --git a/app/(main)/chantiers/[id]/page.tsx b/app/(main)/chantiers/[id]/page.tsx new file mode 100644 index 0000000..f38f29c --- /dev/null +++ b/app/(main)/chantiers/[id]/page.tsx @@ -0,0 +1,336 @@ +'use client'; + +import React, { useState, useEffect } from 'react'; +import { useParams, useRouter } from 'next/navigation'; +import { Card } from 'primereact/card'; +import { TabView, TabPanel } from 'primereact/tabview'; +import { Button } from 'primereact/button'; +import { Tag } from 'primereact/tag'; +import { ProgressBar } from 'primereact/progressbar'; +import { Divider } from 'primereact/divider'; +import { Skeleton } from 'primereact/skeleton'; + +interface Chantier { + id: number; + nom: string; + description: string; + adresse: string; + ville: string; + codePostal: string; + dateDebut: string; + dateFin: string; + dateLivraison: string; + statut: string; + budget: number; + client: { + id: number; + nom: string; + email: string; + telephone: string; + }; + responsable: { + id: number; + nom: string; + prenom: string; + }; + progression: number; +} + +export default function ChantierDetailsPage() { + const params = useParams(); + const router = useRouter(); + const id = params.id as string; + + const [chantier, setChantier] = useState(null); + const [loading, setLoading] = useState(true); + const [activeTab, setActiveTab] = useState(0); + + useEffect(() => { + if (id) { + loadChantier(); + } + }, [id]); + + const loadChantier = async () => { + try { + setLoading(true); + const API_URL = process.env.NEXT_PUBLIC_API_URL || 'https://api.lions.dev/btpxpress'; + const response = await fetch(`${API_URL}/api/v1/chantiers/${id}`); + + if (!response.ok) { + throw new Error('Erreur lors du chargement du chantier'); + } + + const data = await response.json(); + setChantier(data); + } catch (error) { + console.error('Erreur:', error); + // TODO: Afficher un toast d'erreur + } finally { + setLoading(false); + } + }; + + const getStatutSeverity = (statut: string) => { + switch (statut?.toUpperCase()) { + case 'PLANIFIE': + return 'info'; + case 'EN_COURS': + return 'warning'; + case 'TERMINE': + return 'success'; + case 'SUSPENDU': + return 'danger'; + case 'ANNULE': + return 'secondary'; + default: + return 'info'; + } + }; + + const getStatutLabel = (statut: string) => { + const labels: { [key: string]: string } = { + 'PLANIFIE': 'Planifié', + 'EN_COURS': 'En cours', + 'TERMINE': 'Terminé', + 'SUSPENDU': 'Suspendu', + 'ANNULE': 'Annulé' + }; + return labels[statut] || statut; + }; + + const formatDate = (dateString: string) => { + if (!dateString) return 'N/A'; + return new Date(dateString).toLocaleDateString('fr-FR'); + }; + + const formatMontant = (montant: number) => { + return new Intl.NumberFormat('fr-FR', { + style: 'currency', + currency: 'EUR' + }).format(montant); + }; + + if (loading) { + return ( +
+
+ + + + + +
+
+ ); + } + + if (!chantier) { + return ( +
+
+ +
+ +

Chantier non trouvé

+

Le chantier demandé n'existe pas ou a été supprimé.

+
+ +
+
+ ); + } + + return ( +
+ {/* En-tête du chantier */} +
+ +
+
+
+
+ +
+
+ +
+
+

{chantier.description}

+ +
+ + {chantier.adresse}, {chantier.codePostal} {chantier.ville} +
+ +
+ + Client: {chantier.client?.nom} +
+ +
+ + Responsable: {chantier.responsable?.prenom} {chantier.responsable?.nom} +
+
+ +
+
+
+ Progression + +
+ +
+ Début +
{formatDate(chantier.dateDebut)}
+
+ +
+ Fin prévue +
{formatDate(chantier.dateFin)}
+
+ +
+ Budget +
{formatMontant(chantier.budget)}
+
+
+
+
+ +
+ + {/* Onglets */} +
+ + setActiveTab(e.index)}> + +
+
+ + +
Durée
+
+ {Math.ceil((new Date(chantier.dateFin).getTime() - new Date(chantier.dateDebut).getTime()) / (1000 * 60 * 60 * 24))} jours +
+ +
+ +
+ + +
Avancement
+
{chantier.progression || 0}%
+ +
+ +
+ + +
Budget
+
{formatMontant(chantier.budget)}
+ +
+ +
+ + +
Équipe
+
0
+ +
+
+ + + +
+
+

Accès rapides

+
+
+
+
+ + + +
+
+ ); +} diff --git a/app/(main)/chantiers/[id]/planning/page.tsx b/app/(main)/chantiers/[id]/planning/page.tsx new file mode 100644 index 0000000..22929aa --- /dev/null +++ b/app/(main)/chantiers/[id]/planning/page.tsx @@ -0,0 +1,288 @@ +'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 { Calendar } from 'primereact/calendar'; +import { Timeline } from 'primereact/timeline'; +import { Tag } from 'primereact/tag'; +import { DataTable } from 'primereact/datatable'; +import { Column } from 'primereact/column'; + +interface TacheChantier { + id: number; + nom: string; + description: string; + dateDebut: string; + dateFin: string; + statut: string; + responsable: { + nom: string; + prenom: string; + }; + equipe: { + nom: string; + }; + progression: number; +} + +export default function ChantierPlanningPage() { + const params = useParams(); + const router = useRouter(); + const id = params.id as string; + + const [taches, setTaches] = useState([]); + const [loading, setLoading] = useState(true); + const [selectedDate, setSelectedDate] = useState(new Date()); + + useEffect(() => { + if (id) { + loadPlanning(); + } + }, [id]); + + const loadPlanning = async () => { + try { + setLoading(true); + const API_URL = process.env.NEXT_PUBLIC_API_URL || 'https://api.lions.dev/btpxpress'; + + // Charger les tâches du chantier + const response = await fetch(`${API_URL}/api/v1/chantiers/${id}/taches`); + + if (!response.ok) { + throw new Error('Erreur lors du chargement du planning'); + } + + const data = await response.json(); + setTaches(data); + } catch (error) { + console.error('Erreur:', error); + } finally { + setLoading(false); + } + }; + + const formatDate = (dateString: string) => { + if (!dateString) return 'N/A'; + return new Date(dateString).toLocaleDateString('fr-FR'); + }; + + const getStatutSeverity = (statut: string) => { + switch (statut?.toUpperCase()) { + case 'A_FAIRE': + return 'info'; + case 'EN_COURS': + return 'warning'; + case 'TERMINE': + return 'success'; + case 'EN_RETARD': + return 'danger'; + default: + return 'info'; + } + }; + + const getStatutLabel = (statut: string) => { + const labels: { [key: string]: string } = { + 'A_FAIRE': 'À faire', + 'EN_COURS': 'En cours', + 'TERMINE': 'Terminé', + 'EN_RETARD': 'En retard' + }; + return labels[statut] || statut; + }; + + const statutBodyTemplate = (rowData: TacheChantier) => { + return ( + + ); + }; + + const dateBodyTemplate = (rowData: TacheChantier) => { + return ( +
+
Début: {formatDate(rowData.dateDebut)}
+
Fin: {formatDate(rowData.dateFin)}
+
+ ); + }; + + const responsableBodyTemplate = (rowData: TacheChantier) => { + return `${rowData.responsable?.prenom} ${rowData.responsable?.nom}`; + }; + + const equipeBodyTemplate = (rowData: TacheChantier) => { + return rowData.equipe?.nom || 'Non assignée'; + }; + + const progressionBodyTemplate = (rowData: TacheChantier) => { + return ( +
+
+
+
+
+
+ {rowData.progression}% +
+ ); + }; + + const actionsBodyTemplate = (rowData: TacheChantier) => { + return ( +
+
+ ); + }; + + const customizedMarker = (item: TacheChantier) => { + return ( + + + + ); + }; + + const customizedContent = (item: TacheChantier) => { + return ( + +
+ {item.nom} + +
+

{item.description}

+
+
Responsable: {item.responsable?.prenom} {item.responsable?.nom}
+
Équipe: {item.equipe?.nom || 'Non assignée'}
+
Dates: {formatDate(item.dateDebut)} - {formatDate(item.dateFin)}
+
+ + ); + }; + + return ( +
+
+
+
+
+
+
+
+
+ + {/* Calendrier */} +
+ + setSelectedDate(e.value as Date)} + inline + showWeek + /> + +
+

Légende

+
+
+
+ En cours +
+
+
+ Terminé +
+
+
+ En retard +
+
+
+ À faire +
+
+
+ +
+ + {/* Timeline */} +
+ + + +
+ + {/* Tableau des tâches */} +
+ + + + + + + + + + + +
+
+ ); +} diff --git a/app/(main)/clients/[id]/page.tsx b/app/(main)/clients/[id]/page.tsx new file mode 100644 index 0000000..58e9359 --- /dev/null +++ b/app/(main)/clients/[id]/page.tsx @@ -0,0 +1,222 @@ +'use client'; + +import React, { useState, useEffect } from 'react'; +import { useParams, useRouter } from 'next/navigation'; +import { Card } from 'primereact/card'; +import { TabView, TabPanel } from 'primereact/tabview'; +import { Button } from 'primereact/button'; +import { Avatar } from 'primereact/avatar'; +import { Divider } from 'primereact/divider'; +import { DataTable } from 'primereact/datatable'; +import { Column } from 'primereact/column'; +import { Tag } from 'primereact/tag'; + +interface Client { + id: number; + nom: string; + email: string; + telephone: string; + adresse: string; + ville: string; + codePostal: string; + typeClient: string; + dateCreation: string; + chantiers: Chantier[]; + factures: Facture[]; +} + +interface Chantier { + id: number; + nom: string; + statut: string; + dateDebut: string; + budget: number; +} + +interface Facture { + id: number; + numero: string; + montant: number; + dateEmission: string; + statut: string; +} + +export default function ClientDetailsPage() { + const params = useParams(); + const router = useRouter(); + const id = params.id as string; + + const [client, setClient] = useState(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + if (id) { + loadClient(); + } + }, [id]); + + const loadClient = async () => { + try { + setLoading(true); + const API_URL = process.env.NEXT_PUBLIC_API_URL || 'https://api.lions.dev/btpxpress'; + const response = await fetch(`${API_URL}/api/v1/clients/${id}`); + + if (response.ok) { + const data = await response.json(); + setClient(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 statutChantierTemplate = (rowData: Chantier) => { + const severity = rowData.statut === 'EN_COURS' ? 'warning' : + rowData.statut === 'TERMINE' ? 'success' : 'info'; + return ; + }; + + const statutFactureTemplate = (rowData: Facture) => { + const severity = rowData.statut === 'PAYEE' ? 'success' : + rowData.statut === 'EN_ATTENTE' ? 'warning' : 'danger'; + return ; + }; + + if (loading || !client) { + return
Chargement...
; + } + + return ( +
+
+ +
+
+
+
+ + + +
+
+

Coordonnées

+
+ + {client.email} +
+
+ + {client.telephone} +
+
+ + {client.adresse}, {client.codePostal} {client.ville} +
+
+ +
+

Statistiques

+
+
+ +
Chantiers
+
{client.chantiers?.length || 0}
+ +
+
+ +
Factures
+
{client.factures?.length || 0}
+ +
+
+
+
+ +
+ +
+ + + + + + + + formatMontant(rowData.budget)} + sortable + /> + ( +
+
+ ); +} diff --git a/app/(main)/materiels/[id]/page.tsx b/app/(main)/materiels/[id]/page.tsx new file mode 100644 index 0000000..7682439 --- /dev/null +++ b/app/(main)/materiels/[id]/page.tsx @@ -0,0 +1,197 @@ +'use client'; + +import React, { useState, useEffect } from 'react'; +import { useParams, useRouter } from 'next/navigation'; +import { Card } from 'primereact/card'; +import { TabView, TabPanel } from 'primereact/tabview'; +import { Button } from 'primereact/button'; +import { Tag } from 'primereact/tag'; +import { Calendar } from 'primereact/calendar'; +import { DataTable } from 'primereact/datatable'; +import { Column } from 'primereact/column'; +import { Timeline } from 'primereact/timeline'; + +interface Materiel { + id: number; + nom: string; + reference: string; + type: string; + marque: string; + modele: string; + statut: string; + dateAchat: string; + prixAchat: number; + tauxJournalier: number; + disponibilite: string; + reservations: Reservation[]; + maintenances: Maintenance[]; +} + +interface Reservation { + id: number; + chantier: string; + dateDebut: string; + dateFin: string; + statut: string; +} + +interface Maintenance { + id: number; + type: string; + date: string; + description: string; + cout: number; +} + +export default function MaterielDetailsPage() { + const params = useParams(); + const router = useRouter(); + const id = params.id as string; + + const [materiel, setMateriel] = useState(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + if (id) { + loadMateriel(); + } + }, [id]); + + const loadMateriel = async () => { + try { + setLoading(true); + const API_URL = process.env.NEXT_PUBLIC_API_URL || 'https://api.lions.dev/btpxpress'; + const response = await fetch(`${API_URL}/api/v1/materiels/${id}`); + + if (response.ok) { + const data = await response.json(); + setMateriel(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 getStatutSeverity = (statut: string) => { + switch (statut?.toUpperCase()) { + case 'DISPONIBLE': + return 'success'; + case 'EN_UTILISATION': + return 'warning'; + case 'EN_MAINTENANCE': + return 'info'; + case 'HORS_SERVICE': + return 'danger'; + default: + return 'info'; + } + }; + + const statutTemplate = (rowData: Reservation) => { + return ; + }; + + if (loading || !materiel) { + return
Chargement...
; + } + + return ( +
+
+ +
+
+
+
+ +
+
+ +
+
+

Informations

+
Type: {materiel.type}
+
Marque: {materiel.marque}
+
Modèle: {materiel.modele}
+
Date d'achat: {materiel.dateAchat}
+
Prix d'achat: {formatMontant(materiel.prixAchat)}
+
Tarif journalier: {formatMontant(materiel.tauxJournalier)}
+
+ +
+

Disponibilité

+ +
+
+ +
+ +
+ + + + + + + + + ( +
+
+ ); +}