Initial commit
This commit is contained in:
dahoud
374
app/(main)/materiels/stats/page.tsx
Normal file
374
app/(main)/materiels/stats/page.tsx
Normal file
@@ -0,0 +1,374 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Chart } from 'primereact/chart';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Divider } from 'primereact/divider';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import { materielService, maintenanceService } from '../../../../services/api';
|
||||
import { Materiel, MaintenanceMateriel, TypeMateriel, StatutMateriel } from '../../../../types/btp';
|
||||
import { formatCurrency } from '../../../../utils/formatters';
|
||||
|
||||
const MaterielsStatsPage = () => {
|
||||
const [materiels, setMateriels] = useState<Materiel[]>([]);
|
||||
const [maintenances, setMaintenances] = useState<MaintenanceMateriel[]>([]);
|
||||
const [stats, setStats] = useState<any>(null);
|
||||
const [valeurTotale, setValeurTotale] = useState<number>(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
// Options des graphiques
|
||||
const chartOptions = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
position: 'bottom'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [materielsData, maintenancesData, statsData, valeurData] = await Promise.all([
|
||||
materielService.getAll(),
|
||||
maintenanceService.getAll(),
|
||||
materielService.getStats(),
|
||||
materielService.getValeurTotale()
|
||||
]);
|
||||
|
||||
setMateriels(materielsData);
|
||||
setMaintenances(maintenancesData);
|
||||
setStats(statsData);
|
||||
setValeurTotale(valeurData);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger les statistiques',
|
||||
life: 3000
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Calculs des statistiques
|
||||
const getStatutStats = () => {
|
||||
const statutCounts = materiels.reduce((acc, materiel) => {
|
||||
acc[materiel.statut] = (acc[materiel.statut] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<StatutMateriel, number>);
|
||||
|
||||
return {
|
||||
labels: Object.keys(statutCounts).map(s => s.replace('_', ' ')),
|
||||
datasets: [{
|
||||
label: 'Matériels par statut',
|
||||
data: Object.values(statutCounts),
|
||||
backgroundColor: [
|
||||
'#4CAF50', // DISPONIBLE
|
||||
'#FF9800', // EN_UTILISATION
|
||||
'#2196F3', // EN_MAINTENANCE
|
||||
'#f44336' // HORS_SERVICE
|
||||
]
|
||||
}]
|
||||
};
|
||||
};
|
||||
|
||||
const getTypeStats = () => {
|
||||
const typeCounts = materiels.reduce((acc, materiel) => {
|
||||
acc[materiel.type] = (acc[materiel.type] || 0) + 1;
|
||||
return acc;
|
||||
}, {} as Record<TypeMateriel, number>);
|
||||
|
||||
return {
|
||||
labels: Object.keys(typeCounts).map(t => t.replace('_', ' ')),
|
||||
datasets: [{
|
||||
label: 'Matériels par type',
|
||||
data: Object.values(typeCounts),
|
||||
backgroundColor: [
|
||||
'#FF6384',
|
||||
'#36A2EB',
|
||||
'#FFCE56',
|
||||
'#4BC0C0',
|
||||
'#9966FF',
|
||||
'#FF9F40'
|
||||
]
|
||||
}]
|
||||
};
|
||||
};
|
||||
|
||||
const getValeurStats = () => {
|
||||
const valeurParType = materiels.reduce((acc, materiel) => {
|
||||
const valeur = materiel.valeurActuelle || materiel.valeurAchat || 0;
|
||||
acc[materiel.type] = (acc[materiel.type] || 0) + valeur;
|
||||
return acc;
|
||||
}, {} as Record<TypeMateriel, number>);
|
||||
|
||||
return {
|
||||
labels: Object.keys(valeurParType).map(t => t.replace('_', ' ')),
|
||||
datasets: [{
|
||||
label: 'Valeur par type (€)',
|
||||
data: Object.values(valeurParType),
|
||||
backgroundColor: '#42A5F5',
|
||||
borderColor: '#1976D2',
|
||||
borderWidth: 1
|
||||
}]
|
||||
};
|
||||
};
|
||||
|
||||
const getMaintenanceStats = () => {
|
||||
const monthlyMaintenance = new Array(12).fill(0);
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
maintenances.forEach(maintenance => {
|
||||
const date = new Date(maintenance.dateRealisation || maintenance.datePrevue);
|
||||
if (date.getFullYear() === currentYear) {
|
||||
monthlyMaintenance[date.getMonth()]++;
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
labels: [
|
||||
'Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun',
|
||||
'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'
|
||||
],
|
||||
datasets: [{
|
||||
label: 'Maintenances par mois',
|
||||
data: monthlyMaintenance,
|
||||
backgroundColor: 'rgba(255, 193, 7, 0.2)',
|
||||
borderColor: '#FFC107',
|
||||
borderWidth: 2,
|
||||
fill: true
|
||||
}]
|
||||
};
|
||||
};
|
||||
|
||||
// Template pour les matériels les plus coûteux
|
||||
const valeurBodyTemplate = (rowData: Materiel) => {
|
||||
return formatCurrency(rowData.valeurActuelle || rowData.valeurAchat);
|
||||
};
|
||||
|
||||
const typeBodyTemplate = (rowData: Materiel) => {
|
||||
return (
|
||||
<Tag
|
||||
value={rowData.type?.replace('_', ' ')}
|
||||
severity={getTypeSeverity(rowData.type)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const getTypeSeverity = (type?: TypeMateriel) => {
|
||||
switch (type) {
|
||||
case TypeMateriel.ENGIN_CHANTIER:
|
||||
return 'danger';
|
||||
case TypeMateriel.OUTILLAGE:
|
||||
return 'warning';
|
||||
case TypeMateriel.EQUIPEMENT_SECURITE:
|
||||
return 'success';
|
||||
case TypeMateriel.VEHICULE:
|
||||
return 'info';
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
};
|
||||
|
||||
// Matériels triés par valeur décroissante
|
||||
const materielsCouteux = [...materiels]
|
||||
.sort((a, b) => (b.valeurActuelle || b.valeurAchat || 0) - (a.valeurActuelle || a.valeurAchat || 0))
|
||||
.slice(0, 5);
|
||||
|
||||
// Calcul des KPI
|
||||
const tauxDisponibilite = materiels.length > 0
|
||||
? (materiels.filter(m => m.statut === StatutMateriel.DISPONIBLE).length / materiels.length) * 100
|
||||
: 0;
|
||||
|
||||
const tauxMaintenance = materiels.length > 0
|
||||
? (materiels.filter(m => m.statut === StatutMateriel.EN_MAINTENANCE).length / materiels.length) * 100
|
||||
: 0;
|
||||
|
||||
const tauxUtilisation = materiels.length > 0
|
||||
? (materiels.filter(m => m.statut === StatutMateriel.EN_UTILISATION).length / materiels.length) * 100
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Toast ref={toast} />
|
||||
|
||||
<div className="flex align-items-center justify-content-between mb-4">
|
||||
<h2 className="m-0">Statistiques du Parc Matériel</h2>
|
||||
<Button
|
||||
label="Actualiser"
|
||||
icon="pi pi-refresh"
|
||||
className="p-button-text p-button-rounded"
|
||||
onClick={loadData}
|
||||
loading={loading}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* KPI Cards */}
|
||||
<div className="grid mb-4">
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="flex align-items-center">
|
||||
<div className="mr-3">
|
||||
<i className="pi pi-cog text-blue-500 text-3xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-semibold">{materiels.length}</div>
|
||||
<div className="text-500">Total matériels</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="flex align-items-center">
|
||||
<div className="mr-3">
|
||||
<i className="pi pi-euro text-green-500 text-3xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-semibold">{formatCurrency(valeurTotale)}</div>
|
||||
<div className="text-500">Valeur totale</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="flex align-items-center">
|
||||
<div className="mr-3">
|
||||
<i className="pi pi-check-circle text-green-500 text-3xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-semibold">{tauxDisponibilite.toFixed(1)}%</div>
|
||||
<div className="text-500">Disponibilité</div>
|
||||
<ProgressBar value={tauxDisponibilite} showValue={false} style={{height: '6px'}} />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="flex align-items-center">
|
||||
<div className="mr-3">
|
||||
<i className="pi pi-wrench text-orange-500 text-3xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-semibold">{maintenances.length}</div>
|
||||
<div className="text-500">Maintenances</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Indicateurs de performance */}
|
||||
<div className="grid mb-4">
|
||||
<div className="col-12 md:col-4">
|
||||
<Card title="Taux de Disponibilité">
|
||||
<div className="text-center">
|
||||
<div className="text-6xl font-bold text-green-500 mb-2">
|
||||
{tauxDisponibilite.toFixed(0)}%
|
||||
</div>
|
||||
<ProgressBar value={tauxDisponibilite} showValue={false} className="mb-3" />
|
||||
<div className="text-500">
|
||||
{materiels.filter(m => m.statut === StatutMateriel.DISPONIBLE).length} / {materiels.length} disponibles
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-4">
|
||||
<Card title="Taux d'Utilisation">
|
||||
<div className="text-center">
|
||||
<div className="text-6xl font-bold text-blue-500 mb-2">
|
||||
{tauxUtilisation.toFixed(0)}%
|
||||
</div>
|
||||
<ProgressBar value={tauxUtilisation} showValue={false} className="mb-3" />
|
||||
<div className="text-500">
|
||||
{materiels.filter(m => m.statut === StatutMateriel.EN_UTILISATION).length} / {materiels.length} en utilisation
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-4">
|
||||
<Card title="Taux de Maintenance">
|
||||
<div className="text-center">
|
||||
<div className="text-6xl font-bold text-orange-500 mb-2">
|
||||
{tauxMaintenance.toFixed(0)}%
|
||||
</div>
|
||||
<ProgressBar value={tauxMaintenance} showValue={false} className="mb-3" />
|
||||
<div className="text-500">
|
||||
{materiels.filter(m => m.statut === StatutMateriel.EN_MAINTENANCE).length} / {materiels.length} en maintenance
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Graphiques */}
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6">
|
||||
<Card title="Répartition par Statut">
|
||||
<Chart type="doughnut" data={getStatutStats()} options={chartOptions} style={{ height: '400px' }} />
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<Card title="Répartition par Type">
|
||||
<Chart type="pie" data={getTypeStats()} options={chartOptions} style={{ height: '400px' }} />
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<Card title="Valeur par Type de Matériel">
|
||||
<Chart type="bar" data={getValeurStats()} options={chartOptions} style={{ height: '400px' }} />
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6">
|
||||
<Card title="Évolution des Maintenances">
|
||||
<Chart type="line" data={getMaintenanceStats()} options={chartOptions} style={{ height: '400px' }} />
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Top matériels les plus coûteux */}
|
||||
<div className="col-12">
|
||||
<Card title="Top 5 - Matériels les plus coûteux">
|
||||
<DataTable
|
||||
value={materielsCouteux}
|
||||
showGridlines
|
||||
emptyMessage="Aucun matériel trouvé."
|
||||
>
|
||||
<Column field="nom" header="Nom" />
|
||||
<Column field="marque" header="Marque" />
|
||||
<Column field="type" header="Type" body={typeBodyTemplate} />
|
||||
<Column field="valeurActuelle" header="Valeur" body={valeurBodyTemplate} />
|
||||
<Column field="localisation" header="Localisation" />
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MaterielsStatsPage;
|
||||
Reference in New Issue
Block a user