Initial commit
This commit is contained in:
dahoud
336
app/(main)/notifications/automatiques/page.tsx
Normal file
336
app/(main)/notifications/automatiques/page.tsx
Normal file
@@ -0,0 +1,336 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Card } from 'primereact/card';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { InputSwitch } from 'primereact/inputswitch';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Divider } from 'primereact/divider';
|
||||
import { Message } from 'primereact/message';
|
||||
|
||||
interface NotificationRule {
|
||||
id: string;
|
||||
nom: string;
|
||||
description: string;
|
||||
type: 'info' | 'warning' | 'success' | 'error';
|
||||
evenement: string;
|
||||
actif: boolean;
|
||||
categorie: string;
|
||||
}
|
||||
|
||||
const NotificationsAutomatiquesPage = () => {
|
||||
const toast = useRef<Toast>(null);
|
||||
const [rules, setRules] = useState<NotificationRule[]>([
|
||||
{
|
||||
id: '1',
|
||||
nom: 'Nouveau chantier créé',
|
||||
description: 'Notification envoyée lors de la création d\'un nouveau chantier',
|
||||
type: 'success',
|
||||
evenement: 'chantier.created',
|
||||
actif: true,
|
||||
categorie: 'Chantiers'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
nom: 'Chantier terminé',
|
||||
description: 'Notification envoyée lorsqu\'un chantier est marqué comme terminé',
|
||||
type: 'success',
|
||||
evenement: 'chantier.completed',
|
||||
actif: true,
|
||||
categorie: 'Chantiers'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
nom: 'Dépassement de budget',
|
||||
description: 'Alerte envoyée lorsque le budget d\'un chantier est dépassé',
|
||||
type: 'warning',
|
||||
evenement: 'budget.exceeded',
|
||||
actif: true,
|
||||
categorie: 'Budget'
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
nom: 'Retard de chantier',
|
||||
description: 'Notification envoyée lorsqu\'un chantier est en retard',
|
||||
type: 'warning',
|
||||
evenement: 'chantier.delayed',
|
||||
actif: true,
|
||||
categorie: 'Chantiers'
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
nom: 'Phase terminée',
|
||||
description: 'Notification envoyée lorsqu\'une phase de chantier est terminée',
|
||||
type: 'success',
|
||||
evenement: 'phase.completed',
|
||||
actif: false,
|
||||
categorie: 'Phases'
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
nom: 'Nouveau client',
|
||||
description: 'Notification envoyée lors de l\'ajout d\'un nouveau client',
|
||||
type: 'info',
|
||||
evenement: 'client.created',
|
||||
actif: true,
|
||||
categorie: 'Clients'
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
nom: 'Stock faible',
|
||||
description: 'Alerte envoyée lorsque le stock d\'un matériel est faible',
|
||||
type: 'warning',
|
||||
evenement: 'stock.low',
|
||||
actif: true,
|
||||
categorie: 'Stock'
|
||||
},
|
||||
{
|
||||
id: '8',
|
||||
nom: 'Erreur système',
|
||||
description: 'Notification envoyée en cas d\'erreur système critique',
|
||||
type: 'error',
|
||||
evenement: 'system.error',
|
||||
actif: true,
|
||||
categorie: 'Système'
|
||||
},
|
||||
{
|
||||
id: '9',
|
||||
nom: 'Facture créée',
|
||||
description: 'Notification envoyée lors de la création d\'une facture',
|
||||
type: 'info',
|
||||
evenement: 'facture.created',
|
||||
actif: false,
|
||||
categorie: 'Facturation'
|
||||
},
|
||||
{
|
||||
id: '10',
|
||||
nom: 'Paiement reçu',
|
||||
description: 'Notification envoyée lors de la réception d\'un paiement',
|
||||
type: 'success',
|
||||
evenement: 'paiement.received',
|
||||
actif: true,
|
||||
categorie: 'Facturation'
|
||||
}
|
||||
]);
|
||||
|
||||
const toggleRule = (ruleId: string) => {
|
||||
setRules(rules.map(rule => {
|
||||
if (rule.id === ruleId) {
|
||||
const newActif = !rule.actif;
|
||||
toast.current?.show({
|
||||
severity: newActif ? 'success' : 'info',
|
||||
summary: newActif ? 'Activée' : 'Désactivée',
|
||||
detail: `La règle "${rule.nom}" a été ${newActif ? 'activée' : 'désactivée'}`,
|
||||
life: 3000
|
||||
});
|
||||
return { ...rule, actif: newActif };
|
||||
}
|
||||
return rule;
|
||||
}));
|
||||
};
|
||||
|
||||
const activerTout = () => {
|
||||
setRules(rules.map(rule => ({ ...rule, actif: true })));
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Toutes les notifications automatiques ont été activées',
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const desactiverTout = () => {
|
||||
setRules(rules.map(rule => ({ ...rule, actif: false })));
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Désactivé',
|
||||
detail: 'Toutes les notifications automatiques ont été désactivées',
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const typeBodyTemplate = (rowData: NotificationRule) => {
|
||||
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 statusBodyTemplate = (rowData: NotificationRule) => {
|
||||
return (
|
||||
<Tag
|
||||
value={rowData.actif ? 'Activée' : 'Désactivée'}
|
||||
severity={rowData.actif ? 'success' : 'secondary'}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: NotificationRule) => {
|
||||
return (
|
||||
<InputSwitch
|
||||
checked={rowData.actif}
|
||||
onChange={() => toggleRule(rowData.id)}
|
||||
tooltip={rowData.actif ? 'Désactiver' : 'Activer'}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const categorieBodyTemplate = (rowData: NotificationRule) => {
|
||||
const getCategorieColor = (categorie: string) => {
|
||||
switch (categorie) {
|
||||
case 'Chantiers': return 'info';
|
||||
case 'Budget': return 'warning';
|
||||
case 'Phases': return 'success';
|
||||
case 'Clients': return 'info';
|
||||
case 'Stock': return 'warning';
|
||||
case 'Système': return 'danger';
|
||||
case 'Facturation': return 'success';
|
||||
default: return 'info';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Tag value={rowData.categorie} severity={getCategorieColor(rowData.categorie)} />
|
||||
);
|
||||
};
|
||||
|
||||
const header = (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 className="m-0">Règles de notifications automatiques</h5>
|
||||
<div className="flex gap-2 mt-2 md:mt-0">
|
||||
<Button
|
||||
label="Tout activer"
|
||||
icon="pi pi-check-square"
|
||||
className="p-button-text p-button-success"
|
||||
onClick={activerTout}
|
||||
/>
|
||||
<Button
|
||||
label="Tout désactiver"
|
||||
icon="pi pi-times"
|
||||
className="p-button-text p-button-secondary"
|
||||
onClick={desactiverTout}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const activeCount = rules.filter(r => r.actif).length;
|
||||
const totalCount = rules.length;
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<h2>Notifications Automatiques</h2>
|
||||
<p className="text-color-secondary">
|
||||
Configurez les notifications automatiques envoyées lors d'événements spécifiques
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<Toast ref={toast} />
|
||||
|
||||
<Card>
|
||||
<Message
|
||||
severity="info"
|
||||
content={
|
||||
<div>
|
||||
<div className="font-bold mb-2">Configuration des notifications automatiques</div>
|
||||
<div className="text-sm">
|
||||
{activeCount} règle{activeCount > 1 ? 's' : ''} activée{activeCount > 1 ? 's' : ''} sur {totalCount}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
className="mb-4"
|
||||
/>
|
||||
|
||||
<DataTable
|
||||
value={rules}
|
||||
dataKey="id"
|
||||
paginator
|
||||
rows={10}
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
className="datatable-responsive"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} règles"
|
||||
emptyMessage="Aucune règle configurée."
|
||||
header={header}
|
||||
responsiveLayout="scroll"
|
||||
>
|
||||
<Column field="nom" header="Nom" sortable style={{ minWidth: '15rem' }} />
|
||||
<Column field="description" header="Description" style={{ minWidth: '20rem' }} />
|
||||
<Column field="categorie" header="Catégorie" body={categorieBodyTemplate} sortable style={{ minWidth: '10rem' }} />
|
||||
<Column field="type" header="Type" body={typeBodyTemplate} sortable style={{ minWidth: '8rem' }} />
|
||||
<Column field="actif" header="Statut" body={statusBodyTemplate} sortable style={{ minWidth: '8rem' }} />
|
||||
<Column header="Activer/Désactiver" body={actionBodyTemplate} style={{ minWidth: '10rem' }} />
|
||||
</DataTable>
|
||||
|
||||
<Divider />
|
||||
|
||||
<div className="text-sm text-color-secondary">
|
||||
<h5 className="mt-0 mb-3">Informations sur les notifications automatiques</h5>
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6">
|
||||
<h6 className="text-color">Événements de chantiers</h6>
|
||||
<ul className="pl-3 mt-2">
|
||||
<li>Création de nouveau chantier</li>
|
||||
<li>Chantier terminé</li>
|
||||
<li>Retard détecté</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<h6 className="text-color">Événements de budget</h6>
|
||||
<ul className="pl-3 mt-2">
|
||||
<li>Dépassement de budget</li>
|
||||
<li>Seuil d'alerte atteint</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<h6 className="text-color">Événements de stock</h6>
|
||||
<ul className="pl-3 mt-2">
|
||||
<li>Stock faible</li>
|
||||
<li>Rupture de stock</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="col-12 md:col-6">
|
||||
<h6 className="text-color">Événements système</h6>
|
||||
<ul className="pl-3 mt-2">
|
||||
<li>Erreurs critiques</li>
|
||||
<li>Mises à jour importantes</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationsAutomatiquesPage;
|
||||
|
||||
283
app/(main)/notifications/broadcast/page.tsx
Normal file
283
app/(main)/notifications/broadcast/page.tsx
Normal file
@@ -0,0 +1,283 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Card } from 'primereact/card';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { InputTextarea } from 'primereact/inputtextarea';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Divider } from 'primereact/divider';
|
||||
import { Message } from 'primereact/message';
|
||||
import notificationService from '../../../../services/notificationService';
|
||||
|
||||
const NotificationsBroadcastPage = () => {
|
||||
const [titre, setTitre] = useState('');
|
||||
const [message, setMessage] = useState('');
|
||||
const [type, setType] = useState<'info' | 'warning' | 'success' | 'error'>('info');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [submitted, setSubmitted] = useState(false);
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
const types = [
|
||||
{ label: 'Information', value: 'info', icon: 'pi-info-circle', color: '#3B82F6' },
|
||||
{ label: 'Avertissement', value: 'warning', icon: 'pi-exclamation-triangle', color: '#F59E0B' },
|
||||
{ label: 'Succès', value: 'success', icon: 'pi-check-circle', color: '#10B981' },
|
||||
{ label: 'Erreur', value: 'error', icon: 'pi-times-circle', color: '#EF4444' }
|
||||
];
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSubmitted(true);
|
||||
|
||||
if (!titre.trim() || !message.trim()) {
|
||||
toast.current?.show({
|
||||
severity: 'warn',
|
||||
summary: 'Attention',
|
||||
detail: 'Veuillez remplir tous les champs obligatoires',
|
||||
life: 3000
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
await notificationService.broadcastNotification({
|
||||
type,
|
||||
titre: titre.trim(),
|
||||
message: message.trim()
|
||||
});
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Notification diffusée avec succès à tous les utilisateurs',
|
||||
life: 5000
|
||||
});
|
||||
|
||||
// Réinitialiser le formulaire
|
||||
setTitre('');
|
||||
setMessage('');
|
||||
setType('info');
|
||||
setSubmitted(false);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors de la diffusion:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de diffuser la notification',
|
||||
life: 3000
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReset = () => {
|
||||
setTitre('');
|
||||
setMessage('');
|
||||
setType('info');
|
||||
setSubmitted(false);
|
||||
};
|
||||
|
||||
const typeOptionTemplate = (option: any) => {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<i className={`pi ${option.icon}`} style={{ color: option.color }}></i>
|
||||
<span>{option.label}</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const selectedTypeTemplate = (option: any, props: any) => {
|
||||
if (option) {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<i className={`pi ${option.icon}`} style={{ color: option.color }}></i>
|
||||
<span>{option.label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return <span>{props.placeholder}</span>;
|
||||
};
|
||||
|
||||
const getPreviewSeverity = () => {
|
||||
switch (type) {
|
||||
case 'info': return 'info';
|
||||
case 'warning': return 'warn';
|
||||
case 'success': return 'success';
|
||||
case 'error': return 'error';
|
||||
default: return 'info';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<h2>Diffuser une Notification</h2>
|
||||
<p className="text-color-secondary">
|
||||
Envoyez une notification à tous les utilisateurs de l'application
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-8">
|
||||
<Card>
|
||||
<Toast ref={toast} />
|
||||
|
||||
<Message
|
||||
severity="info"
|
||||
text="Cette notification sera envoyée à tous les utilisateurs connectés et apparaîtra dans leur liste de notifications."
|
||||
className="mb-4"
|
||||
/>
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="field">
|
||||
<label htmlFor="type" className="font-medium">
|
||||
Type de notification <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<Dropdown
|
||||
id="type"
|
||||
value={types.find(t => t.value === type)}
|
||||
options={types}
|
||||
onChange={(e) => setType(e.value.value)}
|
||||
optionLabel="label"
|
||||
placeholder="Sélectionnez un type"
|
||||
className="w-full"
|
||||
itemTemplate={typeOptionTemplate}
|
||||
valueTemplate={selectedTypeTemplate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label htmlFor="titre" className="font-medium">
|
||||
Titre <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<InputText
|
||||
id="titre"
|
||||
value={titre}
|
||||
onChange={(e) => setTitre(e.target.value)}
|
||||
placeholder="Entrez le titre de la notification"
|
||||
className={`w-full ${submitted && !titre.trim() ? 'p-invalid' : ''}`}
|
||||
maxLength={100}
|
||||
/>
|
||||
{submitted && !titre.trim() && (
|
||||
<small className="p-error">Le titre est obligatoire</small>
|
||||
)}
|
||||
<small className="text-color-secondary">
|
||||
{titre.length}/100 caractères
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
<label htmlFor="message" className="font-medium">
|
||||
Message <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<InputTextarea
|
||||
id="message"
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
placeholder="Entrez le message de la notification"
|
||||
rows={5}
|
||||
className={`w-full ${submitted && !message.trim() ? 'p-invalid' : ''}`}
|
||||
maxLength={500}
|
||||
/>
|
||||
{submitted && !message.trim() && (
|
||||
<small className="p-error">Le message est obligatoire</small>
|
||||
)}
|
||||
<small className="text-color-secondary">
|
||||
{message.length}/500 caractères
|
||||
</small>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<div className="flex gap-2 justify-content-end">
|
||||
<Button
|
||||
label="Réinitialiser"
|
||||
icon="pi pi-times"
|
||||
type="button"
|
||||
className="p-button-text"
|
||||
onClick={handleReset}
|
||||
disabled={loading}
|
||||
/>
|
||||
<Button
|
||||
label="Diffuser"
|
||||
icon="pi pi-megaphone"
|
||||
type="submit"
|
||||
loading={loading}
|
||||
disabled={loading}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 lg:col-4">
|
||||
<Card title="Aperçu">
|
||||
<div className="mb-3">
|
||||
<h4 className="text-color-secondary text-sm font-normal mb-2">
|
||||
Voici comment apparaîtra votre notification :
|
||||
</h4>
|
||||
</div>
|
||||
|
||||
{titre || message ? (
|
||||
<Message
|
||||
severity={getPreviewSeverity()}
|
||||
content={
|
||||
<div>
|
||||
<div className="font-bold mb-2">
|
||||
{titre || 'Titre de la notification'}
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
{message || 'Message de la notification'}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="text-center p-4 border-1 border-dashed border-300 border-round">
|
||||
<i className="pi pi-eye-slash text-3xl text-400 mb-2"></i>
|
||||
<p className="text-color-secondary text-sm m-0">
|
||||
Remplissez le formulaire pour voir l'aperçu
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
<div className="text-sm text-color-secondary">
|
||||
<h5 className="mt-0 mb-2">Informations</h5>
|
||||
<ul className="pl-3 mt-0">
|
||||
<li className="mb-2">La notification sera visible immédiatement</li>
|
||||
<li className="mb-2">Tous les utilisateurs recevront cette notification</li>
|
||||
<li className="mb-2">Elle apparaîtra dans leur liste de notifications</li>
|
||||
<li>Un badge indiquera qu'elle n'a pas été lue</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card title="Conseils" className="mt-3">
|
||||
<div className="text-sm text-color-secondary">
|
||||
<ul className="pl-3 mt-0 mb-0">
|
||||
<li className="mb-2">
|
||||
<strong>Info :</strong> Pour les informations générales
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<strong>Avertissement :</strong> Pour les alertes importantes
|
||||
</li>
|
||||
<li className="mb-2">
|
||||
<strong>Succès :</strong> Pour les bonnes nouvelles
|
||||
</li>
|
||||
<li>
|
||||
<strong>Erreur :</strong> Pour les problèmes critiques
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationsBroadcastPage;
|
||||
|
||||
214
app/(main)/notifications/non-lues/page.tsx
Normal file
214
app/(main)/notifications/non-lues/page.tsx
Normal file
@@ -0,0 +1,214 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { Button } from 'primereact/button';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import notificationService, { Notification } from '../../../../services/notificationService';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
import { fr } from 'date-fns/locale';
|
||||
|
||||
const NotificationsNonLuesPage = () => {
|
||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
const toast = useRef<Toast>(null);
|
||||
const dt = useRef<DataTable<Notification[]>>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadNotifications();
|
||||
}, []);
|
||||
|
||||
const loadNotifications = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await notificationService.getUnreadNotifications();
|
||||
setNotifications(data);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des notifications:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger les notifications non lues',
|
||||
life: 3000
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const markAsRead = async (notification: Notification) => {
|
||||
try {
|
||||
await notificationService.markAsRead(notification.id);
|
||||
setNotifications(notifications.filter(n => n.id !== notification.id));
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Notification marquée comme lue',
|
||||
life: 2000
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const markAllAsRead = async () => {
|
||||
try {
|
||||
await notificationService.markAllAsRead();
|
||||
setNotifications([]);
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Toutes les notifications ont été marquées comme lues',
|
||||
life: 3000
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
}
|
||||
};
|
||||
|
||||
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 (
|
||||
<Button
|
||||
icon="pi pi-check"
|
||||
className="p-button-rounded p-button-text p-button-success"
|
||||
tooltip="Marquer comme lue"
|
||||
onClick={() => markAsRead(rowData)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<h5 className="m-0">Notifications non lues</h5>
|
||||
{notifications.length > 0 && (
|
||||
<Badge value={notifications.length} severity="danger" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
label="Tout marquer comme lu"
|
||||
icon="pi pi-check-square"
|
||||
className="p-button-text"
|
||||
onClick={markAllAsRead}
|
||||
disabled={notifications.length === 0}
|
||||
/>
|
||||
<Button
|
||||
label="Actualiser"
|
||||
icon="pi pi-refresh"
|
||||
className="p-button-text"
|
||||
onClick={loadNotifications}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const header = (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 className="m-0">Notifications non lues</h5>
|
||||
<span className="block mt-2 md:mt-0 p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText
|
||||
type="search"
|
||||
placeholder="Rechercher..."
|
||||
onInput={(e) => setGlobalFilter(e.currentTarget.value)}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<Toast ref={toast} />
|
||||
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
|
||||
|
||||
{notifications.length === 0 && !loading ? (
|
||||
<div className="text-center p-5">
|
||||
<i className="pi pi-check-circle text-6xl text-green-500 mb-3"></i>
|
||||
<h3>Aucune notification non lue</h3>
|
||||
<p className="text-color-secondary">Vous êtes à jour !</p>
|
||||
</div>
|
||||
) : (
|
||||
<DataTable
|
||||
ref={dt}
|
||||
value={notifications}
|
||||
dataKey="id"
|
||||
paginator
|
||||
rows={10}
|
||||
rowsPerPageOptions={[5, 10, 25]}
|
||||
className="datatable-responsive"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} notifications"
|
||||
globalFilter={globalFilter}
|
||||
emptyMessage="Aucune notification non lue."
|
||||
header={header}
|
||||
responsiveLayout="scroll"
|
||||
loading={loading}
|
||||
rowClassName={() => 'bg-blue-50'}
|
||||
>
|
||||
<Column field="type" header="Type" body={typeBodyTemplate} sortable style={{ minWidth: '8rem' }} />
|
||||
<Column field="titre" header="Titre" sortable style={{ minWidth: '15rem' }} />
|
||||
<Column field="message" header="Message" sortable style={{ minWidth: '20rem' }} />
|
||||
<Column field="date" header="Date" body={dateBodyTemplate} sortable style={{ minWidth: '10rem' }} />
|
||||
<Column header="Actions" body={actionBodyTemplate} style={{ minWidth: '8rem' }} />
|
||||
</DataTable>
|
||||
)}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationsNonLuesPage;
|
||||
|
||||
265
app/(main)/notifications/page.tsx
Normal file
265
app/(main)/notifications/page.tsx
Normal file
@@ -0,0 +1,265 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { Button } from 'primereact/button';
|
||||
import { InputText } from 'primereact/inputtext';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { Chip } from 'primereact/chip';
|
||||
import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
|
||||
import notificationService, { Notification } from '../../../services/notificationService';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
import { fr } from 'date-fns/locale';
|
||||
|
||||
const NotificationsPage = () => {
|
||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
const [selectedNotifications, setSelectedNotifications] = useState<Notification[]>([]);
|
||||
const toast = useRef<Toast>(null);
|
||||
const dt = useRef<DataTable<Notification[]>>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadNotifications();
|
||||
}, []);
|
||||
|
||||
const loadNotifications = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await notificationService.getNotifications();
|
||||
setNotifications(data);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des notifications:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger les notifications',
|
||||
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
|
||||
));
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Notification marquée comme lue',
|
||||
life: 2000
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const markAllAsRead = async () => {
|
||||
try {
|
||||
await notificationService.markAllAsRead();
|
||||
setNotifications(notifications.map(n => ({ ...n, lu: true })));
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Toutes les notifications ont été marquées comme lues',
|
||||
life: 3000
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const deleteNotification = async (notification: Notification) => {
|
||||
confirmDialog({
|
||||
message: 'Êtes-vous sûr de vouloir supprimer cette notification ?',
|
||||
header: 'Confirmation',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
acceptLabel: 'Oui',
|
||||
rejectLabel: 'Non',
|
||||
accept: async () => {
|
||||
try {
|
||||
await notificationService.deleteNotification(notification.id);
|
||||
setNotifications(notifications.filter(n => n.id !== notification.id));
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Notification supprimée',
|
||||
life: 3000
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de supprimer la notification',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
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 statusBodyTemplate = (rowData: Notification) => {
|
||||
return rowData.lu ? (
|
||||
<Chip label="Lue" className="bg-gray-300" />
|
||||
) : (
|
||||
<Chip label="Non lue" className="bg-blue-500 text-white" />
|
||||
);
|
||||
};
|
||||
|
||||
const dateBodyTemplate = (rowData: Notification) => {
|
||||
return formatDistanceToNow(new Date(rowData.date), {
|
||||
addSuffix: true,
|
||||
locale: fr
|
||||
});
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: Notification) => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
{!rowData.lu && (
|
||||
<Button
|
||||
icon="pi pi-check"
|
||||
className="p-button-rounded p-button-text p-button-success"
|
||||
tooltip="Marquer comme lue"
|
||||
onClick={() => markAsRead(rowData)}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
icon="pi pi-trash"
|
||||
className="p-button-rounded p-button-text p-button-danger"
|
||||
tooltip="Supprimer"
|
||||
onClick={() => deleteNotification(rowData)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
const unreadCount = notifications.filter(n => !n.lu).length;
|
||||
return (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<h5 className="m-0">Notifications</h5>
|
||||
{unreadCount > 0 && (
|
||||
<Badge value={unreadCount} severity="danger" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
label="Tout marquer comme lu"
|
||||
icon="pi pi-check-square"
|
||||
className="p-button-text"
|
||||
onClick={markAllAsRead}
|
||||
disabled={notifications.filter(n => !n.lu).length === 0}
|
||||
/>
|
||||
<Button
|
||||
label="Actualiser"
|
||||
icon="pi pi-refresh"
|
||||
className="p-button-text"
|
||||
onClick={loadNotifications}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const header = (
|
||||
<div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
|
||||
<h5 className="m-0">Toutes les notifications</h5>
|
||||
<span className="block mt-2 md:mt-0 p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText
|
||||
type="search"
|
||||
placeholder="Rechercher..."
|
||||
onInput={(e) => setGlobalFilter(e.currentTarget.value)}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<Toast ref={toast} />
|
||||
<ConfirmDialog />
|
||||
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
|
||||
|
||||
<DataTable
|
||||
ref={dt}
|
||||
value={notifications}
|
||||
selection={selectedNotifications}
|
||||
onSelectionChange={(e) => setSelectedNotifications(e.value)}
|
||||
dataKey="id"
|
||||
paginator
|
||||
rows={10}
|
||||
rowsPerPageOptions={[5, 10, 25, 50]}
|
||||
className="datatable-responsive"
|
||||
paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
|
||||
currentPageReportTemplate="Affichage de {first} à {last} sur {totalRecords} notifications"
|
||||
globalFilter={globalFilter}
|
||||
emptyMessage="Aucune notification trouvée."
|
||||
header={header}
|
||||
responsiveLayout="scroll"
|
||||
loading={loading}
|
||||
rowClassName={(data) => !data.lu ? 'bg-blue-50' : ''}
|
||||
>
|
||||
<Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
|
||||
<Column field="type" header="Type" body={typeBodyTemplate} sortable style={{ minWidth: '8rem' }} />
|
||||
<Column field="titre" header="Titre" sortable style={{ minWidth: '15rem' }} />
|
||||
<Column field="message" header="Message" sortable style={{ minWidth: '20rem' }} />
|
||||
<Column field="date" header="Date" body={dateBodyTemplate} sortable style={{ minWidth: '10rem' }} />
|
||||
<Column field="lu" header="Statut" body={statusBodyTemplate} sortable style={{ minWidth: '8rem' }} />
|
||||
<Column header="Actions" body={actionBodyTemplate} style={{ minWidth: '10rem' }} />
|
||||
</DataTable>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationsPage;
|
||||
|
||||
206
app/(main)/notifications/recentes/page.tsx
Normal file
206
app/(main)/notifications/recentes/page.tsx
Normal file
@@ -0,0 +1,206 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Button } from 'primereact/button';
|
||||
import { Timeline } from 'primereact/timeline';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import notificationService, { Notification } from '../../../../services/notificationService';
|
||||
import { formatDistanceToNow, format } from 'date-fns';
|
||||
import { fr } from 'date-fns/locale';
|
||||
|
||||
const NotificationsRecentesPage = () => {
|
||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadNotifications();
|
||||
}, []);
|
||||
|
||||
const loadNotifications = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await notificationService.getNotifications();
|
||||
// Filtrer les notifications des 7 derniers jours
|
||||
const sevenDaysAgo = new Date();
|
||||
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
|
||||
const recentNotifications = data.filter(n => new Date(n.date) >= sevenDaysAgo);
|
||||
// Trier par date décroissante
|
||||
recentNotifications.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
||||
setNotifications(recentNotifications);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des notifications:', error);
|
||||
toast.current?.show({
|
||||
severity: 'error',
|
||||
summary: 'Erreur',
|
||||
detail: 'Impossible de charger les notifications récentes',
|
||||
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
|
||||
));
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Succès',
|
||||
detail: 'Notification marquée comme lue',
|
||||
life: 2000
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Erreur:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeIcon = (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';
|
||||
}
|
||||
};
|
||||
|
||||
const getTypeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case 'info': return '#3B82F6';
|
||||
case 'warning': return '#F59E0B';
|
||||
case 'success': return '#10B981';
|
||||
case 'error': return '#EF4444';
|
||||
default: return '#3B82F6';
|
||||
}
|
||||
};
|
||||
|
||||
const customizedMarker = (item: Notification) => {
|
||||
return (
|
||||
<span
|
||||
className="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1"
|
||||
style={{ backgroundColor: getTypeColor(item.type) }}
|
||||
>
|
||||
<i className={`pi ${getTypeIcon(item.type)}`}></i>
|
||||
</span>
|
||||
);
|
||||
};
|
||||
|
||||
const customizedContent = (item: Notification) => {
|
||||
return (
|
||||
<Card className={!item.lu ? 'bg-blue-50' : ''}>
|
||||
<div className="flex justify-content-between align-items-start mb-3">
|
||||
<div className="flex-1">
|
||||
<div className="flex align-items-center gap-2 mb-2">
|
||||
<h4 className="m-0">{item.titre}</h4>
|
||||
{!item.lu && <Badge value="Nouveau" severity="info" />}
|
||||
</div>
|
||||
<p className="text-color-secondary m-0">{item.message}</p>
|
||||
</div>
|
||||
{!item.lu && (
|
||||
<Button
|
||||
icon="pi pi-check"
|
||||
className="p-button-rounded p-button-text p-button-success"
|
||||
tooltip="Marquer comme lue"
|
||||
onClick={() => markAsRead(item)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex align-items-center gap-3 text-sm text-color-secondary">
|
||||
<span>
|
||||
<i className="pi pi-clock mr-2"></i>
|
||||
{formatDistanceToNow(new Date(item.date), { addSuffix: true, locale: fr })}
|
||||
</span>
|
||||
<span>
|
||||
<i className="pi pi-calendar mr-2"></i>
|
||||
{format(new Date(item.date), 'dd/MM/yyyy HH:mm', { locale: fr })}
|
||||
</span>
|
||||
</div>
|
||||
{item.metadata && (
|
||||
<div className="mt-3 pt-3 border-top-1 border-200">
|
||||
{item.metadata.chantierNom && (
|
||||
<div className="flex align-items-center gap-2">
|
||||
<Tag icon="pi pi-building" value={item.metadata.chantierNom} />
|
||||
</div>
|
||||
)}
|
||||
{item.metadata.clientNom && (
|
||||
<div className="flex align-items-center gap-2 mt-2">
|
||||
<Tag icon="pi pi-user" value={item.metadata.clientNom} severity="info" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
const unreadCount = notifications.filter(n => !n.lu).length;
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<div className="flex justify-content-between align-items-center mb-4">
|
||||
<div className="flex align-items-center gap-2">
|
||||
<h2 className="m-0">Notifications Récentes</h2>
|
||||
{unreadCount > 0 && (
|
||||
<Badge value={unreadCount} severity="danger" />
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
label="Actualiser"
|
||||
icon="pi pi-refresh"
|
||||
className="p-button-text"
|
||||
onClick={loadNotifications}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12">
|
||||
<Toast ref={toast} />
|
||||
{loading ? (
|
||||
<Card>
|
||||
<div className="text-center p-5">
|
||||
<i className="pi pi-spin pi-spinner text-4xl"></i>
|
||||
<p>Chargement des notifications...</p>
|
||||
</div>
|
||||
</Card>
|
||||
) : notifications.length === 0 ? (
|
||||
<Card>
|
||||
<div className="text-center p-5">
|
||||
<i className="pi pi-inbox text-6xl text-gray-400 mb-3"></i>
|
||||
<h3>Aucune notification récente</h3>
|
||||
<p className="text-color-secondary">Aucune notification au cours des 7 derniers jours</p>
|
||||
</div>
|
||||
</Card>
|
||||
) : (
|
||||
<Card>
|
||||
<div className="mb-3 p-3 bg-blue-50 border-round">
|
||||
<div className="flex align-items-center gap-2">
|
||||
<i className="pi pi-info-circle text-blue-500"></i>
|
||||
<span className="text-sm">
|
||||
Affichage des notifications des 7 derniers jours ({notifications.length} notification{notifications.length > 1 ? 's' : ''})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Timeline
|
||||
value={notifications}
|
||||
align="alternate"
|
||||
className="customized-timeline"
|
||||
marker={customizedMarker}
|
||||
content={customizedContent}
|
||||
/>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationsRecentesPage;
|
||||
|
||||
290
app/(main)/notifications/statistiques/page.tsx
Normal file
290
app/(main)/notifications/statistiques/page.tsx
Normal file
@@ -0,0 +1,290 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Chart } from 'primereact/chart';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import notificationService, { NotificationStats } from '../../../../services/notificationService';
|
||||
|
||||
const NotificationsStatistiquesPage = () => {
|
||||
const [stats, setStats] = useState<NotificationStats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadStats();
|
||||
}, []);
|
||||
|
||||
const loadStats = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await notificationService.getNotificationStats();
|
||||
setStats(data);
|
||||
} catch (error) {
|
||||
console.error('Erreur lors du chargement des statistiques:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const chartData = {
|
||||
labels: ['Info', 'Avertissement', 'Succès', 'Erreur'],
|
||||
datasets: [
|
||||
{
|
||||
data: stats ? [
|
||||
stats.parType.info || 0,
|
||||
stats.parType.warning || 0,
|
||||
stats.parType.success || 0,
|
||||
stats.parType.error || 0
|
||||
] : [0, 0, 0, 0],
|
||||
backgroundColor: [
|
||||
'#3B82F6',
|
||||
'#F59E0B',
|
||||
'#10B981',
|
||||
'#EF4444'
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
'#2563EB',
|
||||
'#D97706',
|
||||
'#059669',
|
||||
'#DC2626'
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const chartOptions = {
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
usePointStyle: true
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const tendanceChartData = {
|
||||
labels: stats?.tendance.map(t => t.periode) || [],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Notifications',
|
||||
data: stats?.tendance.map(t => t.nombre) || [],
|
||||
fill: false,
|
||||
borderColor: '#3B82F6',
|
||||
tension: 0.4
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const tendanceChartOptions = {
|
||||
maintainAspectRatio: false,
|
||||
aspectRatio: 0.6,
|
||||
plugins: {
|
||||
legend: {
|
||||
labels: {
|
||||
color: '#495057'
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
ticks: {
|
||||
color: '#495057'
|
||||
},
|
||||
grid: {
|
||||
color: '#ebedef'
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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 des statistiques...</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!stats) {
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card>
|
||||
<div className="text-center p-5">
|
||||
<i className="pi pi-exclamation-triangle text-4xl text-orange-500"></i>
|
||||
<p>Impossible de charger les statistiques</p>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const pourcentageLues = stats.total > 0
|
||||
? Math.round(((stats.total - stats.nonLues) / stats.total) * 100)
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<h2>Statistiques des Notifications</h2>
|
||||
</div>
|
||||
|
||||
{/* 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}</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}</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.total - stats.nonLues}</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 par type */}
|
||||
<div className="col-12 md:col-6">
|
||||
<Card title="Répartition par type">
|
||||
<Chart type="pie" data={chartData} options={chartOptions} />
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Graphique de tendance */}
|
||||
<div className="col-12 md:col-6">
|
||||
<Card title="Tendance hebdomadaire">
|
||||
<Chart type="line" data={tendanceChartData} options={tendanceChartOptions} style={{ height: '300px' }} />
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Détails par type */}
|
||||
<div className="col-12">
|
||||
<Card title="Détails par type">
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-6 lg:col-3">
|
||||
<div className="mb-3">
|
||||
<span className="text-500 font-medium">Info</span>
|
||||
<div className="flex align-items-center mt-2">
|
||||
<ProgressBar
|
||||
value={stats.total > 0 ? (stats.parType.info / stats.total) * 100 : 0}
|
||||
showValue={false}
|
||||
className="flex-1 mr-2"
|
||||
color="#3B82F6"
|
||||
/>
|
||||
<span className="font-bold">{stats.parType.info}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6 lg:col-3">
|
||||
<div className="mb-3">
|
||||
<span className="text-500 font-medium">Avertissement</span>
|
||||
<div className="flex align-items-center mt-2">
|
||||
<ProgressBar
|
||||
value={stats.total > 0 ? (stats.parType.warning / stats.total) * 100 : 0}
|
||||
showValue={false}
|
||||
className="flex-1 mr-2"
|
||||
color="#F59E0B"
|
||||
/>
|
||||
<span className="font-bold">{stats.parType.warning}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6 lg:col-3">
|
||||
<div className="mb-3">
|
||||
<span className="text-500 font-medium">Succès</span>
|
||||
<div className="flex align-items-center mt-2">
|
||||
<ProgressBar
|
||||
value={stats.total > 0 ? (stats.parType.success / stats.total) * 100 : 0}
|
||||
showValue={false}
|
||||
className="flex-1 mr-2"
|
||||
color="#10B981"
|
||||
/>
|
||||
<span className="font-bold">{stats.parType.success}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-6 lg:col-3">
|
||||
<div className="mb-3">
|
||||
<span className="text-500 font-medium">Erreur</span>
|
||||
<div className="flex align-items-center mt-2">
|
||||
<ProgressBar
|
||||
value={stats.total > 0 ? (stats.parType.error / stats.total) * 100 : 0}
|
||||
showValue={false}
|
||||
className="flex-1 mr-2"
|
||||
color="#EF4444"
|
||||
/>
|
||||
<span className="font-bold">{stats.parType.error}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default NotificationsStatistiquesPage;
|
||||
|
||||
328
app/(main)/notifications/tableau-bord/page.tsx
Normal file
328
app/(main)/notifications/tableau-bord/page.tsx
Normal file
@@ -0,0 +1,328 @@
|
||||
'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;
|
||||
|
||||
Reference in New Issue
Block a user