329 lines
14 KiB
TypeScript
329 lines
14 KiB
TypeScript
'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 { Toast } from 'primereact/toast';
|
|
import { Tag } from 'primereact/tag';
|
|
import { Badge } from 'primereact/badge';
|
|
import { ProgressBar } from 'primereact/progressbar';
|
|
import notificationService, { Notification, NotificationStats } from '../../../../services/notificationService';
|
|
import { formatDistanceToNow } from 'date-fns';
|
|
import { fr } from 'date-fns/locale';
|
|
|
|
const NotificationsTableauBordPage = () => {
|
|
const [notifications, setNotifications] = useState<Notification[]>([]);
|
|
const [stats, setStats] = useState<NotificationStats | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const toast = useRef<Toast>(null);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
}, []);
|
|
|
|
const loadData = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const [notifData, statsData] = await Promise.all([
|
|
notificationService.getNotifications(),
|
|
notificationService.getNotificationStats()
|
|
]);
|
|
// Prendre les 5 dernières notifications
|
|
const recentNotifications = notifData
|
|
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
|
|
.slice(0, 5);
|
|
setNotifications(recentNotifications);
|
|
setStats(statsData);
|
|
} catch (error) {
|
|
console.error('Erreur lors du chargement des données:', error);
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Impossible de charger le tableau de bord',
|
|
life: 3000
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const markAsRead = async (notification: Notification) => {
|
|
try {
|
|
await notificationService.markAsRead(notification.id);
|
|
setNotifications(notifications.map(n =>
|
|
n.id === notification.id ? { ...n, lu: true } : n
|
|
));
|
|
loadData(); // Recharger pour mettre à jour les stats
|
|
} catch (error) {
|
|
console.error('Erreur:', error);
|
|
}
|
|
};
|
|
|
|
const chartData = stats ? {
|
|
labels: ['Info', 'Avertissement', 'Succès', 'Erreur'],
|
|
datasets: [
|
|
{
|
|
data: [
|
|
stats.parType.info || 0,
|
|
stats.parType.warning || 0,
|
|
stats.parType.success || 0,
|
|
stats.parType.error || 0
|
|
],
|
|
backgroundColor: [
|
|
'#3B82F6',
|
|
'#F59E0B',
|
|
'#10B981',
|
|
'#EF4444'
|
|
]
|
|
}
|
|
]
|
|
} : null;
|
|
|
|
const typeBodyTemplate = (rowData: Notification) => {
|
|
const getSeverity = (type: string) => {
|
|
switch (type) {
|
|
case 'info': return 'info';
|
|
case 'warning': return 'warning';
|
|
case 'success': return 'success';
|
|
case 'error': return 'danger';
|
|
default: return 'info';
|
|
}
|
|
};
|
|
|
|
const getIcon = (type: string) => {
|
|
switch (type) {
|
|
case 'info': return 'pi-info-circle';
|
|
case 'warning': return 'pi-exclamation-triangle';
|
|
case 'success': return 'pi-check-circle';
|
|
case 'error': return 'pi-times-circle';
|
|
default: return 'pi-info-circle';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Tag
|
|
value={rowData.type.toUpperCase()}
|
|
severity={getSeverity(rowData.type)}
|
|
icon={`pi ${getIcon(rowData.type)}`}
|
|
/>
|
|
);
|
|
};
|
|
|
|
const dateBodyTemplate = (rowData: Notification) => {
|
|
return formatDistanceToNow(new Date(rowData.date), {
|
|
addSuffix: true,
|
|
locale: fr
|
|
});
|
|
};
|
|
|
|
const actionBodyTemplate = (rowData: Notification) => {
|
|
return !rowData.lu ? (
|
|
<Button
|
|
icon="pi pi-check"
|
|
className="p-button-rounded p-button-text p-button-success"
|
|
tooltip="Marquer comme lue"
|
|
onClick={() => markAsRead(rowData)}
|
|
/>
|
|
) : null;
|
|
};
|
|
|
|
const pourcentageLues = stats && stats.total > 0
|
|
? Math.round(((stats.total - stats.nonLues) / stats.total) * 100)
|
|
: 0;
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="grid">
|
|
<div className="col-12">
|
|
<Card>
|
|
<div className="text-center p-5">
|
|
<i className="pi pi-spin pi-spinner text-4xl"></i>
|
|
<p>Chargement du tableau de bord...</p>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid">
|
|
<div className="col-12">
|
|
<div className="flex justify-content-between align-items-center mb-4">
|
|
<h2 className="m-0">Tableau de Bord des Notifications</h2>
|
|
<Button
|
|
label="Actualiser"
|
|
icon="pi pi-refresh"
|
|
className="p-button-text"
|
|
onClick={loadData}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Toast ref={toast} />
|
|
|
|
{/* Cartes de statistiques */}
|
|
<div className="col-12 md:col-6 lg:col-3">
|
|
<Card>
|
|
<div className="flex justify-content-between align-items-center">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">Total</span>
|
|
<div className="text-900 font-medium text-xl">{stats?.total || 0}</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-bell text-blue-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 md:col-6 lg:col-3">
|
|
<Card>
|
|
<div className="flex justify-content-between align-items-center">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">Non lues</span>
|
|
<div className="text-900 font-medium text-xl">{stats?.nonLues || 0}</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-exclamation-circle text-orange-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 md:col-6 lg:col-3">
|
|
<Card>
|
|
<div className="flex justify-content-between align-items-center">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">Lues</span>
|
|
<div className="text-900 font-medium text-xl">{stats ? stats.total - stats.nonLues : 0}</div>
|
|
</div>
|
|
<div className="flex align-items-center justify-content-center bg-green-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
|
|
<i className="pi pi-check-circle text-green-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 md:col-6 lg:col-3">
|
|
<Card>
|
|
<div className="flex justify-content-between align-items-center">
|
|
<div>
|
|
<span className="block text-500 font-medium mb-3">Taux de lecture</span>
|
|
<div className="text-900 font-medium text-xl">{pourcentageLues}%</div>
|
|
</div>
|
|
<div className="flex align-items-center justify-content-center bg-cyan-100 border-round" style={{ width: '2.5rem', height: '2.5rem' }}>
|
|
<i className="pi pi-chart-line text-cyan-500 text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Graphique et notifications récentes */}
|
|
<div className="col-12 lg:col-6">
|
|
<Card title="Répartition par type">
|
|
{chartData && <Chart type="doughnut" data={chartData} />}
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 lg:col-6">
|
|
<Card title="Notifications récentes">
|
|
<DataTable
|
|
value={notifications}
|
|
dataKey="id"
|
|
responsiveLayout="scroll"
|
|
emptyMessage="Aucune notification"
|
|
rowClassName={(data) => !data.lu ? 'bg-blue-50' : ''}
|
|
>
|
|
<Column field="type" header="Type" body={typeBodyTemplate} style={{ width: '100px' }} />
|
|
<Column field="titre" header="Titre" style={{ minWidth: '200px' }} />
|
|
<Column field="date" header="Date" body={dateBodyTemplate} style={{ width: '150px' }} />
|
|
<Column header="Actions" body={actionBodyTemplate} style={{ width: '80px' }} />
|
|
</DataTable>
|
|
<div className="mt-3 text-center">
|
|
<Button
|
|
label="Voir toutes les notifications"
|
|
icon="pi pi-arrow-right"
|
|
className="p-button-text"
|
|
onClick={() => window.location.href = '/notifications'}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Détails par type */}
|
|
<div className="col-12">
|
|
<Card title="Activité par type">
|
|
<div className="grid">
|
|
<div className="col-12 md:col-6 lg:col-3">
|
|
<div className="p-3 border-round bg-blue-50">
|
|
<div className="flex justify-content-between align-items-center mb-3">
|
|
<span className="text-blue-700 font-medium">Info</span>
|
|
<i className="pi pi-info-circle text-blue-500 text-2xl"></i>
|
|
</div>
|
|
<div className="text-blue-900 font-bold text-2xl mb-2">{stats?.parType.info || 0}</div>
|
|
<ProgressBar
|
|
value={stats && stats.total > 0 ? (stats.parType.info / stats.total) * 100 : 0}
|
|
showValue={false}
|
|
color="#3B82F6"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-12 md:col-6 lg:col-3">
|
|
<div className="p-3 border-round bg-orange-50">
|
|
<div className="flex justify-content-between align-items-center mb-3">
|
|
<span className="text-orange-700 font-medium">Avertissement</span>
|
|
<i className="pi pi-exclamation-triangle text-orange-500 text-2xl"></i>
|
|
</div>
|
|
<div className="text-orange-900 font-bold text-2xl mb-2">{stats?.parType.warning || 0}</div>
|
|
<ProgressBar
|
|
value={stats && stats.total > 0 ? (stats.parType.warning / stats.total) * 100 : 0}
|
|
showValue={false}
|
|
color="#F59E0B"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-12 md:col-6 lg:col-3">
|
|
<div className="p-3 border-round bg-green-50">
|
|
<div className="flex justify-content-between align-items-center mb-3">
|
|
<span className="text-green-700 font-medium">Succès</span>
|
|
<i className="pi pi-check-circle text-green-500 text-2xl"></i>
|
|
</div>
|
|
<div className="text-green-900 font-bold text-2xl mb-2">{stats?.parType.success || 0}</div>
|
|
<ProgressBar
|
|
value={stats && stats.total > 0 ? (stats.parType.success / stats.total) * 100 : 0}
|
|
showValue={false}
|
|
color="#10B981"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="col-12 md:col-6 lg:col-3">
|
|
<div className="p-3 border-round bg-red-50">
|
|
<div className="flex justify-content-between align-items-center mb-3">
|
|
<span className="text-red-700 font-medium">Erreur</span>
|
|
<i className="pi pi-times-circle text-red-500 text-2xl"></i>
|
|
</div>
|
|
<div className="text-red-900 font-bold text-2xl mb-2">{stats?.parType.error || 0}</div>
|
|
<ProgressBar
|
|
value={stats && stats.total > 0 ? (stats.parType.error / stats.total) * 100 : 0}
|
|
showValue={false}
|
|
color="#EF4444"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NotificationsTableauBordPage;
|
|
|