699 lines
29 KiB
TypeScript
699 lines
29 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect, useRef } from 'react';
|
|
import { Card } from 'primereact/card';
|
|
import { DataTable } from 'primereact/datatable';
|
|
import { Column } from 'primereact/column';
|
|
import { Tag } from 'primereact/tag';
|
|
import { Button } from 'primereact/button';
|
|
import { Toast } from 'primereact/toast';
|
|
import { Dropdown } from 'primereact/dropdown';
|
|
import { Calendar } from 'primereact/calendar';
|
|
import { Badge } from 'primereact/badge';
|
|
import { Timeline } from 'primereact/timeline';
|
|
import { Message } from 'primereact/message';
|
|
import { Divider } from 'primereact/divider';
|
|
import { ProgressBar } from 'primereact/progressbar';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
interface Alerte {
|
|
id: string;
|
|
titre: string;
|
|
description: string;
|
|
type: string;
|
|
severite: string;
|
|
statut: string;
|
|
dateCreation: Date;
|
|
dateEcheance?: Date;
|
|
source: string;
|
|
entite: string;
|
|
entiteId: string;
|
|
actions: string[];
|
|
responsable?: string;
|
|
lu: boolean;
|
|
archive: boolean;
|
|
}
|
|
|
|
const DashboardAlertes = () => {
|
|
const toast = useRef<Toast>(null);
|
|
const router = useRouter();
|
|
|
|
const [alertes, setAlertes] = useState<Alerte[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [selectedType, setSelectedType] = useState('');
|
|
const [selectedSeverite, setSelectedSeverite] = useState('');
|
|
const [selectedStatut, setSelectedStatut] = useState('');
|
|
const [showArchived, setShowArchived] = useState(false);
|
|
|
|
const [timelineEvents, setTimelineEvents] = useState([]);
|
|
|
|
const typeOptions = [
|
|
{ label: 'Tous les types', value: '' },
|
|
{ label: 'Sécurité', value: 'SECURITE' },
|
|
{ label: 'Maintenance', value: 'MAINTENANCE' },
|
|
{ label: 'Budget', value: 'BUDGET' },
|
|
{ label: 'Planning', value: 'PLANNING' },
|
|
{ label: 'Qualité', value: 'QUALITE' },
|
|
{ label: 'Ressources', value: 'RESSOURCES' },
|
|
{ label: 'Conformité', value: 'CONFORMITE' },
|
|
{ label: 'Système', value: 'SYSTEME' }
|
|
];
|
|
|
|
const severiteOptions = [
|
|
{ label: 'Toutes les sévérités', value: '' },
|
|
{ label: 'Critique', value: 'CRITIQUE' },
|
|
{ label: 'Élevée', value: 'ELEVEE' },
|
|
{ label: 'Moyenne', value: 'MOYENNE' },
|
|
{ label: 'Faible', value: 'FAIBLE' },
|
|
{ label: 'Info', value: 'INFO' }
|
|
];
|
|
|
|
const statutOptions = [
|
|
{ label: 'Tous les statuts', value: '' },
|
|
{ label: 'Nouvelle', value: 'NOUVELLE' },
|
|
{ label: 'En cours', value: 'EN_COURS' },
|
|
{ label: 'Résolue', value: 'RESOLUE' },
|
|
{ label: 'Fermée', value: 'FERMEE' },
|
|
{ label: 'Ignorée', value: 'IGNOREE' }
|
|
];
|
|
|
|
useEffect(() => {
|
|
loadAlertes();
|
|
initTimeline();
|
|
}, [selectedType, selectedSeverite, selectedStatut, showArchived]);
|
|
|
|
const loadAlertes = async () => {
|
|
try {
|
|
setLoading(true);
|
|
|
|
// TODO: Remplacer par un vrai appel API
|
|
// const response = await alerteService.getDashboardData({
|
|
// type: selectedType,
|
|
// severite: selectedSeverite,
|
|
// statut: selectedStatut,
|
|
// archived: showArchived
|
|
// });
|
|
|
|
// Données simulées pour la démonstration
|
|
const mockAlertes: Alerte[] = [
|
|
{
|
|
id: '1',
|
|
titre: 'Maintenance urgente requise',
|
|
description: 'La pelleteuse CAT 320D présente des signes de défaillance hydraulique',
|
|
type: 'MAINTENANCE',
|
|
severite: 'CRITIQUE',
|
|
statut: 'NOUVELLE',
|
|
dateCreation: new Date('2024-12-28T10:30:00'),
|
|
dateEcheance: new Date('2024-12-29T17:00:00'),
|
|
source: 'Système de monitoring',
|
|
entite: 'Matériel',
|
|
entiteId: 'MAT-002',
|
|
actions: ['Arrêt immédiat', 'Inspection technique', 'Réparation'],
|
|
responsable: 'Marie Martin',
|
|
lu: false,
|
|
archive: false
|
|
},
|
|
{
|
|
id: '2',
|
|
titre: 'Dépassement budget chantier',
|
|
description: 'Le chantier Résidence Les Jardins dépasse le budget prévu de 15%',
|
|
type: 'BUDGET',
|
|
severite: 'ELEVEE',
|
|
statut: 'EN_COURS',
|
|
dateCreation: new Date('2024-12-27T14:15:00'),
|
|
dateEcheance: new Date('2024-12-30T12:00:00'),
|
|
source: 'Contrôle de gestion',
|
|
entite: 'Chantier',
|
|
entiteId: 'CHT-001',
|
|
actions: ['Analyse des coûts', 'Révision budget', 'Validation client'],
|
|
responsable: 'Jean Dupont',
|
|
lu: true,
|
|
archive: false
|
|
},
|
|
{
|
|
id: '3',
|
|
titre: 'Retard de livraison matériaux',
|
|
description: 'Livraison d\'acier reportée de 3 jours pour le Centre Commercial Atlantis',
|
|
type: 'PLANNING',
|
|
severite: 'MOYENNE',
|
|
statut: 'EN_COURS',
|
|
dateCreation: new Date('2024-12-26T09:45:00'),
|
|
dateEcheance: new Date('2025-01-02T08:00:00'),
|
|
source: 'Fournisseur',
|
|
entite: 'Chantier',
|
|
entiteId: 'CHT-002',
|
|
actions: ['Replanification', 'Contact fournisseur', 'Solutions alternatives'],
|
|
responsable: 'Pierre Leroy',
|
|
lu: true,
|
|
archive: false
|
|
},
|
|
{
|
|
id: '4',
|
|
titre: 'Certification CACES expirée',
|
|
description: 'La certification CACES de Luc Bernard expire dans 7 jours',
|
|
type: 'CONFORMITE',
|
|
severite: 'ELEVEE',
|
|
statut: 'NOUVELLE',
|
|
dateCreation: new Date('2024-12-25T16:20:00'),
|
|
dateEcheance: new Date('2025-01-01T23:59:00'),
|
|
source: 'Gestion RH',
|
|
entite: 'Employé',
|
|
entiteId: 'EMP-004',
|
|
actions: ['Planifier formation', 'Restriction temporaire', 'Renouvellement'],
|
|
responsable: 'Sophie Dubois',
|
|
lu: false,
|
|
archive: false
|
|
},
|
|
{
|
|
id: '5',
|
|
titre: 'Incident sécurité mineur',
|
|
description: 'Chute d\'un ouvrier sans blessure grave sur le chantier Hôtel Luxe',
|
|
type: 'SECURITE',
|
|
severite: 'MOYENNE',
|
|
statut: 'RESOLUE',
|
|
dateCreation: new Date('2024-12-24T11:30:00'),
|
|
source: 'Chef de chantier',
|
|
entite: 'Chantier',
|
|
entiteId: 'CHT-003',
|
|
actions: ['Rapport incident', 'Analyse causes', 'Mesures préventives'],
|
|
responsable: 'Marc Rousseau',
|
|
lu: true,
|
|
archive: false
|
|
},
|
|
{
|
|
id: '6',
|
|
titre: 'Surcharge serveur de monitoring',
|
|
description: 'Le serveur de monitoring des équipements approche 90% de capacité',
|
|
type: 'SYSTEME',
|
|
severite: 'FAIBLE',
|
|
statut: 'EN_COURS',
|
|
dateCreation: new Date('2024-12-23T08:15:00'),
|
|
source: 'Système automatique',
|
|
entite: 'Infrastructure',
|
|
entiteId: 'SYS-001',
|
|
actions: ['Optimisation', 'Augmentation capacité', 'Surveillance'],
|
|
responsable: 'Admin Système',
|
|
lu: true,
|
|
archive: false
|
|
}
|
|
];
|
|
|
|
// Filtrer selon les critères sélectionnés
|
|
let filteredAlertes = mockAlertes;
|
|
|
|
if (selectedType) {
|
|
filteredAlertes = filteredAlertes.filter(a => a.type === selectedType);
|
|
}
|
|
|
|
if (selectedSeverite) {
|
|
filteredAlertes = filteredAlertes.filter(a => a.severite === selectedSeverite);
|
|
}
|
|
|
|
if (selectedStatut) {
|
|
filteredAlertes = filteredAlertes.filter(a => a.statut === selectedStatut);
|
|
}
|
|
|
|
if (!showArchived) {
|
|
filteredAlertes = filteredAlertes.filter(a => !a.archive);
|
|
}
|
|
|
|
setAlertes(filteredAlertes);
|
|
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement des alertes:', error);
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Impossible de charger les alertes'
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const initTimeline = () => {
|
|
const recentAlertes = alertes
|
|
.filter(a => a.severite === 'CRITIQUE' || a.severite === 'ELEVEE')
|
|
.sort((a, b) => b.dateCreation.getTime() - a.dateCreation.getTime())
|
|
.slice(0, 5)
|
|
.map(a => ({
|
|
status: a.severite === 'CRITIQUE' ? 'danger' : 'warning',
|
|
date: a.dateCreation.toLocaleDateString('fr-FR'),
|
|
time: a.dateCreation.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' }),
|
|
icon: getTypeIcon(a.type),
|
|
color: getSeveriteColor(a.severite),
|
|
titre: a.titre,
|
|
description: a.description,
|
|
statut: a.statut
|
|
}));
|
|
|
|
setTimelineEvents(recentAlertes);
|
|
};
|
|
|
|
const getTypeIcon = (type: string) => {
|
|
switch (type) {
|
|
case 'SECURITE': return 'pi pi-shield';
|
|
case 'MAINTENANCE': return 'pi pi-wrench';
|
|
case 'BUDGET': return 'pi pi-euro';
|
|
case 'PLANNING': return 'pi pi-calendar';
|
|
case 'QUALITE': return 'pi pi-star';
|
|
case 'RESSOURCES': return 'pi pi-users';
|
|
case 'CONFORMITE': return 'pi pi-verified';
|
|
case 'SYSTEME': return 'pi pi-server';
|
|
default: return 'pi pi-info-circle';
|
|
}
|
|
};
|
|
|
|
const getSeveriteColor = (severite: string) => {
|
|
switch (severite) {
|
|
case 'CRITIQUE': return '#dc2626';
|
|
case 'ELEVEE': return '#ea580c';
|
|
case 'MOYENNE': return '#d97706';
|
|
case 'FAIBLE': return '#65a30d';
|
|
case 'INFO': return '#2563eb';
|
|
default: return '#6b7280';
|
|
}
|
|
};
|
|
|
|
const getSeveriteSeverity = (severite: string) => {
|
|
switch (severite) {
|
|
case 'CRITIQUE': return 'danger';
|
|
case 'ELEVEE': return 'warning';
|
|
case 'MOYENNE': return 'info';
|
|
case 'FAIBLE': return 'success';
|
|
case 'INFO': return 'info';
|
|
default: return 'secondary';
|
|
}
|
|
};
|
|
|
|
const getStatutSeverity = (statut: string) => {
|
|
switch (statut) {
|
|
case 'NOUVELLE': return 'danger';
|
|
case 'EN_COURS': return 'warning';
|
|
case 'RESOLUE': return 'success';
|
|
case 'FERMEE': return 'secondary';
|
|
case 'IGNOREE': return 'secondary';
|
|
default: return 'info';
|
|
}
|
|
};
|
|
|
|
const getTypeSeverity = (type: string) => {
|
|
switch (type) {
|
|
case 'SECURITE': return 'danger';
|
|
case 'MAINTENANCE': return 'warning';
|
|
case 'BUDGET': return 'info';
|
|
case 'PLANNING': return 'info';
|
|
case 'QUALITE': return 'success';
|
|
case 'RESSOURCES': return 'info';
|
|
case 'CONFORMITE': return 'warning';
|
|
case 'SYSTEME': return 'secondary';
|
|
default: return 'info';
|
|
}
|
|
};
|
|
|
|
const severiteBodyTemplate = (rowData: Alerte) => (
|
|
<Tag value={rowData.severite} severity={getSeveriteSeverity(rowData.severite) as any} />
|
|
);
|
|
|
|
const statutBodyTemplate = (rowData: Alerte) => (
|
|
<Tag value={rowData.statut} severity={getStatutSeverity(rowData.statut) as any} />
|
|
);
|
|
|
|
const typeBodyTemplate = (rowData: Alerte) => (
|
|
<div className="flex align-items-center">
|
|
<i className={`${getTypeIcon(rowData.type)} mr-2`} style={{ color: getSeveriteColor(rowData.severite) }}></i>
|
|
<Tag value={rowData.type} severity={getTypeSeverity(rowData.type) as any} />
|
|
</div>
|
|
);
|
|
|
|
const titreBodyTemplate = (rowData: Alerte) => (
|
|
<div className="flex align-items-center">
|
|
{!rowData.lu && (
|
|
<div className="w-1rem h-1rem bg-primary border-circle mr-2"></div>
|
|
)}
|
|
<div>
|
|
<div className={`font-medium ${!rowData.lu ? 'font-bold' : ''}`}>
|
|
{rowData.titre}
|
|
</div>
|
|
<div className="text-sm text-500 mt-1">
|
|
{rowData.description.substring(0, 80)}...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const echeanceBodyTemplate = (rowData: Alerte) => {
|
|
if (!rowData.dateEcheance) return <span className="text-500">-</span>;
|
|
|
|
const now = new Date();
|
|
const echeance = rowData.dateEcheance;
|
|
const diffHours = (echeance.getTime() - now.getTime()) / (1000 * 60 * 60);
|
|
|
|
let severity = 'info';
|
|
if (diffHours < 0) severity = 'danger';
|
|
else if (diffHours < 24) severity = 'warning';
|
|
else if (diffHours < 72) severity = 'info';
|
|
|
|
return (
|
|
<div>
|
|
<div className="text-sm">{echeance.toLocaleDateString('fr-FR')}</div>
|
|
<Tag
|
|
value={diffHours < 0 ? 'Échue' : `${Math.ceil(diffHours)}h restantes`}
|
|
severity={severity as any}
|
|
className="text-xs mt-1"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const actionsBodyTemplate = (rowData: Alerte) => (
|
|
<div className="flex flex-wrap gap-1">
|
|
{rowData.actions.slice(0, 2).map((action, index) => (
|
|
<Tag key={index} value={action} severity="info" className="text-xs" />
|
|
))}
|
|
{rowData.actions.length > 2 && (
|
|
<Tag value={`+${rowData.actions.length - 2}`} severity="info" className="text-xs" />
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
const actionButtonsTemplate = (rowData: Alerte) => (
|
|
<div className="flex gap-2">
|
|
{!rowData.lu && (
|
|
<Button
|
|
icon="pi pi-eye"
|
|
className="p-button-text p-button-sm"
|
|
tooltip="Marquer comme lu"
|
|
onClick={() => handleMarkAsRead(rowData)}
|
|
/>
|
|
)}
|
|
<Button
|
|
icon="pi pi-pencil"
|
|
className="p-button-text p-button-sm"
|
|
tooltip="Traiter"
|
|
onClick={() => handleTreatAlert(rowData)}
|
|
/>
|
|
<Button
|
|
icon="pi pi-check"
|
|
className="p-button-text p-button-sm p-button-success"
|
|
tooltip="Résoudre"
|
|
onClick={() => handleResolveAlert(rowData)}
|
|
disabled={rowData.statut === 'RESOLUE' || rowData.statut === 'FERMEE'}
|
|
/>
|
|
<Button
|
|
icon="pi pi-times"
|
|
className="p-button-text p-button-sm p-button-danger"
|
|
tooltip="Ignorer"
|
|
onClick={() => handleIgnoreAlert(rowData)}
|
|
disabled={rowData.statut === 'IGNOREE'}
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
const handleMarkAsRead = (alerte: Alerte) => {
|
|
// TODO: Appel API pour marquer comme lu
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Alerte marquée comme lue',
|
|
detail: alerte.titre,
|
|
life: 3000
|
|
});
|
|
loadAlertes();
|
|
};
|
|
|
|
const handleTreatAlert = (alerte: Alerte) => {
|
|
router.push(`/alertes/${alerte.id}/traiter`);
|
|
};
|
|
|
|
const handleResolveAlert = (alerte: Alerte) => {
|
|
// TODO: Appel API pour résoudre
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Alerte résolue',
|
|
detail: alerte.titre,
|
|
life: 3000
|
|
});
|
|
loadAlertes();
|
|
};
|
|
|
|
const handleIgnoreAlert = (alerte: Alerte) => {
|
|
// TODO: Appel API pour ignorer
|
|
toast.current?.show({
|
|
severity: 'info',
|
|
summary: 'Alerte ignorée',
|
|
detail: alerte.titre,
|
|
life: 3000
|
|
});
|
|
loadAlertes();
|
|
};
|
|
|
|
// Calculs des métriques
|
|
const alertesCritiques = alertes.filter(a => a.severite === 'CRITIQUE').length;
|
|
const alertesNonLues = alertes.filter(a => !a.lu).length;
|
|
const alertesEchues = alertes.filter(a => a.dateEcheance && a.dateEcheance < new Date()).length;
|
|
const alertesEnCours = alertes.filter(a => a.statut === 'EN_COURS').length;
|
|
|
|
return (
|
|
<div className="grid">
|
|
<Toast ref={toast} />
|
|
|
|
{/* En-tête avec filtres */}
|
|
<div className="col-12">
|
|
<Card>
|
|
<div className="flex justify-content-between align-items-center mb-4">
|
|
<h2 className="text-2xl font-bold m-0">Dashboard Alertes</h2>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
label="Marquer tout comme lu"
|
|
icon="pi pi-check-circle"
|
|
className="p-button-outlined"
|
|
onClick={() => {
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Toutes les alertes marquées comme lues',
|
|
life: 3000
|
|
});
|
|
}}
|
|
/>
|
|
<Button
|
|
label="Nouvelle alerte"
|
|
icon="pi pi-plus"
|
|
onClick={() => router.push('/alertes/nouvelle')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-3 align-items-center">
|
|
<div className="field">
|
|
<label htmlFor="type" className="font-semibold">Type</label>
|
|
<Dropdown
|
|
id="type"
|
|
value={selectedType}
|
|
options={typeOptions}
|
|
onChange={(e) => setSelectedType(e.value)}
|
|
className="w-full md:w-14rem"
|
|
/>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<label htmlFor="severite" className="font-semibold">Sévérité</label>
|
|
<Dropdown
|
|
id="severite"
|
|
value={selectedSeverite}
|
|
options={severiteOptions}
|
|
onChange={(e) => setSelectedSeverite(e.value)}
|
|
className="w-full md:w-14rem"
|
|
/>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<label htmlFor="statut" className="font-semibold">Statut</label>
|
|
<Dropdown
|
|
id="statut"
|
|
value={selectedStatut}
|
|
options={statutOptions}
|
|
onChange={(e) => setSelectedStatut(e.value)}
|
|
className="w-full md:w-14rem"
|
|
/>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<div className="flex align-items-center">
|
|
<input
|
|
type="checkbox"
|
|
id="archived"
|
|
checked={showArchived}
|
|
onChange={(e) => setShowArchived(e.target.checked)}
|
|
className="mr-2"
|
|
/>
|
|
<label htmlFor="archived" className="font-semibold">Inclure archivées</label>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
icon="pi pi-refresh"
|
|
className="p-button-outlined"
|
|
onClick={loadAlertes}
|
|
loading={loading}
|
|
tooltip="Actualiser"
|
|
/>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Métriques principales */}
|
|
<div className="col-12 lg:col-3 md:col-6">
|
|
<Card className="h-full">
|
|
<div className="flex justify-content-between mb-3">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">Critiques</span>
|
|
<div className="text-900 font-medium text-xl">{alertesCritiques}</div>
|
|
</div>
|
|
<div className="flex align-items-center justify-content-center bg-red-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
|
|
<i className="pi pi-exclamation-triangle text-red-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 lg:col-3 md:col-6">
|
|
<Card className="h-full">
|
|
<div className="flex justify-content-between mb-3">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">Non lues</span>
|
|
<div className="text-900 font-medium text-xl">{alertesNonLues}</div>
|
|
</div>
|
|
<div className="flex align-items-center justify-content-center bg-blue-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
|
|
<i className="pi pi-envelope text-blue-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 lg:col-3 md:col-6">
|
|
<Card className="h-full">
|
|
<div className="flex justify-content-between mb-3">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">Échues</span>
|
|
<div className="text-900 font-medium text-xl">{alertesEchues}</div>
|
|
</div>
|
|
<div className="flex align-items-center justify-content-center bg-orange-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
|
|
<i className="pi pi-clock text-orange-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 lg:col-3 md:col-6">
|
|
<Card className="h-full">
|
|
<div className="flex justify-content-between mb-3">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">En cours</span>
|
|
<div className="text-900 font-medium text-xl">{alertesEnCours}</div>
|
|
</div>
|
|
<div className="flex align-items-center justify-content-center bg-yellow-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
|
|
<i className="pi pi-cog text-yellow-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Alertes critiques en cours */}
|
|
{alertesCritiques > 0 && (
|
|
<div className="col-12">
|
|
<Message
|
|
severity="error"
|
|
text={`${alertesCritiques} alerte(s) critique(s) nécessitent une attention immédiate`}
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Timeline des alertes récentes */}
|
|
<div className="col-12 lg:col-6">
|
|
<Card>
|
|
<h6>Alertes Récentes (Critiques & Élevées)</h6>
|
|
<Timeline
|
|
value={timelineEvents}
|
|
align="alternate"
|
|
className="customized-timeline"
|
|
marker={(item) => <span className={`flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1`} style={{ backgroundColor: item.color }}>
|
|
<i className={item.icon}></i>
|
|
</span>}
|
|
content={(item) => (
|
|
<Card title={item.titre} subTitle={`${item.date} à ${item.time}`}>
|
|
<p className="text-sm mb-2">{item.description}</p>
|
|
<Tag value={item.statut} severity={getStatutSeverity(item.statut) as any} />
|
|
</Card>
|
|
)}
|
|
/>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Répartition par type */}
|
|
<div className="col-12 lg:col-6">
|
|
<Card>
|
|
<h6>Répartition par Type</h6>
|
|
<div className="grid">
|
|
{typeOptions.slice(1).map((type, index) => {
|
|
const count = alertes.filter(a => a.type === type.value).length;
|
|
const percentage = alertes.length > 0 ? (count / alertes.length) * 100 : 0;
|
|
|
|
return (
|
|
<div key={index} className="col-12 mb-3">
|
|
<div className="flex justify-content-between align-items-center mb-2">
|
|
<div className="flex align-items-center">
|
|
<i className={`${getTypeIcon(type.value)} mr-2`}></i>
|
|
<span className="font-medium">{type.label}</span>
|
|
</div>
|
|
<Badge value={count} />
|
|
</div>
|
|
<ProgressBar value={percentage} showValue={false} style={{ height: '6px' }} />
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Tableau des alertes */}
|
|
<div className="col-12">
|
|
<Card>
|
|
<div className="flex justify-content-between align-items-center mb-4">
|
|
<h6>Liste des Alertes ({alertes.length})</h6>
|
|
<div className="flex gap-2">
|
|
<Badge value={`${alertesNonLues} non lues`} severity="danger" />
|
|
<Badge value={`${alertesEnCours} en cours`} severity="warning" />
|
|
</div>
|
|
</div>
|
|
|
|
<DataTable
|
|
value={alertes}
|
|
loading={loading}
|
|
responsiveLayout="scroll"
|
|
paginator
|
|
rows={10}
|
|
rowsPerPageOptions={[5, 10, 25]}
|
|
emptyMessage="Aucune alerte trouvée"
|
|
sortMode="multiple"
|
|
sortField="dateCreation"
|
|
sortOrder={-1}
|
|
>
|
|
<Column field="titre" header="Titre" body={titreBodyTemplate} sortable style={{ width: '25%' }} />
|
|
<Column field="type" header="Type" body={typeBodyTemplate} sortable />
|
|
<Column field="severite" header="Sévérité" body={severiteBodyTemplate} sortable />
|
|
<Column field="statut" header="Statut" body={statutBodyTemplate} sortable />
|
|
<Column field="dateCreation" header="Créée le" body={(rowData) => rowData.dateCreation.toLocaleDateString('fr-FR')} sortable />
|
|
<Column field="dateEcheance" header="Échéance" body={echeanceBodyTemplate} sortable />
|
|
<Column field="responsable" header="Responsable" sortable />
|
|
<Column field="actions" header="Actions suggérées" body={actionsBodyTemplate} />
|
|
<Column header="Actions" body={actionButtonsTemplate} style={{ width: '150px' }} />
|
|
</DataTable>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DashboardAlertes;
|