fix: Update PrimeReact to v10.8.3 and fix all compilation errors
This commit is contained in:
dahoud
@@ -58,13 +58,12 @@ import { InputNumber } from 'primereact/inputnumber';
|
||||
import { ColorPicker } from 'primereact/colorpicker';
|
||||
import { ListBox } from 'primereact/listbox';
|
||||
import { Fieldset } from 'primereact/fieldset';
|
||||
// import { MeterGroup } from 'primereact/metergroup'; // Module not available
|
||||
// import { ProgressBar } from 'primereact/progressbar'; // Module not available
|
||||
import { TreeTable } from 'primereact/treetable';
|
||||
import { Tree } from 'primereact/tree';
|
||||
import { ScrollTop } from 'primereact/scrolltop';
|
||||
import { VirtualScroller } from 'primereact/virtualscroller';
|
||||
import { DeferredContent } from 'primereact/deferredcontent';
|
||||
import { InlineMessage } from 'primereact/inlinemessage';
|
||||
import { Carousel } from 'primereact/carousel';
|
||||
import { Terminal } from 'primereact/terminal';
|
||||
|
||||
@@ -144,7 +143,7 @@ const DemandesAccesAdmin = () => {
|
||||
const overlayPanel = useRef<OverlayPanel>(null);
|
||||
const contextMenu = useRef<ContextMenu>(null);
|
||||
const terminal = useRef<Terminal>(null);
|
||||
const dt = useRef<DataTable>(null);
|
||||
const dt = useRef<DataTable<any>>(null);
|
||||
|
||||
const statusOptions = [
|
||||
{ label: 'Tous', value: '', icon: 'pi pi-list' },
|
||||
@@ -237,7 +236,7 @@ const DemandesAccesAdmin = () => {
|
||||
case 'APPROVED': return 'success';
|
||||
case 'REJECTED': return 'danger';
|
||||
case 'SUSPENDED': return 'info';
|
||||
default: return 'secondary';
|
||||
default: return 'info';
|
||||
}
|
||||
};
|
||||
|
||||
@@ -251,6 +250,19 @@ const DemandesAccesAdmin = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Filtrage des demandes
|
||||
const filteredDemandes = demandes.filter(demande => {
|
||||
const matchesGlobal = !globalFilter ||
|
||||
demande.nom.toLowerCase().includes(globalFilter.toLowerCase()) ||
|
||||
demande.prenom.toLowerCase().includes(globalFilter.toLowerCase()) ||
|
||||
demande.email.toLowerCase().includes(globalFilter.toLowerCase()) ||
|
||||
demande.entreprise.toLowerCase().includes(globalFilter.toLowerCase());
|
||||
|
||||
const matchesStatus = !statusFilter || demande.status === statusFilter;
|
||||
|
||||
return matchesGlobal && matchesStatus;
|
||||
});
|
||||
|
||||
const statusBodyTemplate = (rowData: DemandeAcces) => {
|
||||
return <Tag value={getStatusLabel(rowData.status)} severity={getStatusSeverity(rowData.status)} />;
|
||||
};
|
||||
@@ -677,17 +689,8 @@ const DemandesAccesAdmin = () => {
|
||||
</div>
|
||||
);
|
||||
|
||||
const filteredDemandes = demandes.filter(demande => {
|
||||
const matchesGlobal = !globalFilter ||
|
||||
demande.nom.toLowerCase().includes(globalFilter.toLowerCase()) ||
|
||||
demande.prenom.toLowerCase().includes(globalFilter.toLowerCase()) ||
|
||||
demande.email.toLowerCase().includes(globalFilter.toLowerCase()) ||
|
||||
demande.entreprise.toLowerCase().includes(globalFilter.toLowerCase());
|
||||
|
||||
const matchesStatus = !statusFilter || demande.status === statusFilter;
|
||||
|
||||
return matchesGlobal && matchesStatus;
|
||||
});
|
||||
|
||||
|
||||
|
||||
const renderKPIDashboard = () => (
|
||||
<div className="grid mb-4">
|
||||
@@ -949,7 +952,7 @@ const DemandesAccesAdmin = () => {
|
||||
<Avatar
|
||||
label={item.prenom.charAt(0) + item.nom.charAt(0)}
|
||||
className="mr-2"
|
||||
size="small"
|
||||
size="normal"
|
||||
/>
|
||||
<div>
|
||||
<div className="font-bold">{item.prenom} {item.nom}</div>
|
||||
@@ -1279,7 +1282,7 @@ const DemandesAccesAdmin = () => {
|
||||
<label>Demandes approuvées</label>
|
||||
</div>
|
||||
<div className="flex align-items-center gap-2">
|
||||
<Checkbox />
|
||||
<Checkbox checked={false} onChange={() => {}} />
|
||||
<label>Demandes en retard</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1668,7 +1671,7 @@ const DemandesAccesAdmin = () => {
|
||||
<label className="text-sm">Envoyer un email de bienvenue</label>
|
||||
</div>
|
||||
<div className="flex align-items-center gap-2 mt-2">
|
||||
<Checkbox />
|
||||
<Checkbox checked={false} onChange={() => {}} />
|
||||
<label className="text-sm">Programmer une formation</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1793,4 +1796,6 @@ if (typeof document !== 'undefined') {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = customStyles;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -59,14 +59,13 @@ import { BlockUI } from 'primereact/blockui';
|
||||
import { PickList } from 'primereact/picklist';
|
||||
import { OrderList } from 'primereact/orderlist';
|
||||
import { DataScroller } from 'primereact/datascroller';
|
||||
import { VirtualScroller } from 'primереact/virtualscroller';
|
||||
import { VirtualScroller } from 'primereact/virtualscroller';
|
||||
import { Galleria } from 'primereact/galleria';
|
||||
import { Image } from 'primereact/image';
|
||||
import { Carousel } from 'primereact/carousel';
|
||||
import { Chart } from 'primereact/chart';
|
||||
import { Terminal } from 'primereact/terminal';
|
||||
import { DeferredContent } from 'primereact/deferredcontent';
|
||||
import { InlineMessage } from 'primereact/inlinemessage';
|
||||
import { ScrollTop } from 'primereact/scrolltop';
|
||||
import { CascadeSelect } from 'primereact/cascadeselect';
|
||||
import { TreeSelect } from 'primereact/treeselect';
|
||||
@@ -641,7 +640,7 @@ const ParametresPage = () => {
|
||||
<Button
|
||||
label="Réinitialiser"
|
||||
icon="pi pi-refresh"
|
||||
severity="secondary"
|
||||
severity={"secondary" as any}
|
||||
onClick={() => resetSettings('entreprise')}
|
||||
/>
|
||||
</div>
|
||||
@@ -768,7 +767,7 @@ const ParametresPage = () => {
|
||||
<Button
|
||||
label="Réinitialiser"
|
||||
icon="pi pi-refresh"
|
||||
severity="secondary"
|
||||
severity={"secondary" as any}
|
||||
onClick={() => resetSettings('facturation')}
|
||||
/>
|
||||
</div>
|
||||
@@ -900,7 +899,7 @@ const ParametresPage = () => {
|
||||
<Button
|
||||
label="Réinitialiser"
|
||||
icon="pi pi-refresh"
|
||||
severity="secondary"
|
||||
severity={"secondary" as any}
|
||||
onClick={() => resetSettings('email')}
|
||||
/>
|
||||
</div>
|
||||
@@ -1038,7 +1037,7 @@ const ParametresPage = () => {
|
||||
<Button
|
||||
label="Réinitialiser"
|
||||
icon="pi pi-refresh"
|
||||
severity="secondary"
|
||||
severity={"secondary" as any}
|
||||
onClick={() => resetSettings('système')}
|
||||
/>
|
||||
<Button
|
||||
@@ -1178,7 +1177,7 @@ const ParametresPage = () => {
|
||||
severity={
|
||||
item.status === 'connected' ? 'success' :
|
||||
item.status === 'error' ? 'danger' :
|
||||
item.status === 'pending' ? 'warning' : 'secondary'
|
||||
item.status === 'pending' ? 'warning' : 'info'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
@@ -1237,7 +1236,7 @@ const ParametresPage = () => {
|
||||
<AccordionTab header="Authentification">
|
||||
<div className="field">
|
||||
<label>Authentification à deux facteurs</label>
|
||||
<InputSwitch className="ml-2" />
|
||||
<InputSwitch checked={false} onChange={() => {}} className="ml-2" />
|
||||
</div>
|
||||
<div className="field">
|
||||
<label>Durée de session (minutes)</label>
|
||||
@@ -1392,7 +1391,6 @@ const ParametresPage = () => {
|
||||
offIcon="pi pi-play"
|
||||
onLabel="Auto-refresh"
|
||||
offLabel="Manual"
|
||||
size="small"
|
||||
/>
|
||||
|
||||
<Button
|
||||
@@ -1696,4 +1694,7 @@ if (typeof document !== 'undefined') {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = customStyles;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -421,6 +421,7 @@ const RolesPermissionsPage = () => {
|
||||
value={roles}
|
||||
selection={selectedRoles}
|
||||
onSelectionChange={(e) => setSelectedRoles(e.value)}
|
||||
selectionMode="multiple"
|
||||
dataKey="id"
|
||||
paginator
|
||||
rows={10}
|
||||
@@ -708,4 +709,4 @@ const ProtectedRolesPermissionsPage = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ProtectedRolesPermissionsPage;
|
||||
export default ProtectedRolesPermissionsPage;
|
||||
|
||||
@@ -62,7 +62,6 @@ import { Image } from 'primereact/image';
|
||||
import { Carousel } from 'primereact/carousel';
|
||||
import { Terminal } from 'primereact/terminal';
|
||||
import { DeferredContent } from 'primereact/deferredcontent';
|
||||
import { InlineMessage } from 'primereact/inlinemessage';
|
||||
import { ScrollTop } from 'primereact/scrolltop';
|
||||
import { BlockUI } from 'primereact/blockui';
|
||||
import { TreeTable } from 'primereact/treetable';
|
||||
@@ -186,7 +185,7 @@ const SauvegardePage = () => {
|
||||
const overlayPanel = useRef<OverlayPanel>(null);
|
||||
const contextMenu = useRef<ContextMenu>(null);
|
||||
const terminal = useRef<Terminal>(null);
|
||||
const dt = useRef<DataTable>(null);
|
||||
const dt = useRef<DataTable<any>>(null);
|
||||
|
||||
// Configuration pour l'interface utilisateur ultra-avancée
|
||||
const frequenceOptions = [
|
||||
@@ -620,7 +619,7 @@ const SauvegardePage = () => {
|
||||
value={provider.status}
|
||||
severity={
|
||||
provider.status === 'connected' ? 'success' :
|
||||
provider.status === 'error' ? 'danger' : 'secondary'
|
||||
provider.status === 'error' ? 'danger' : 'info'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
@@ -727,7 +726,6 @@ const SauvegardePage = () => {
|
||||
onIcon="pi pi-pause"
|
||||
offIcon="pi pi-play"
|
||||
className="ml-2"
|
||||
size="small"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1278,4 +1276,6 @@ if (typeof document !== 'undefined') {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = customStyles;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,885 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { Card } from 'primereact/card';
|
||||
import { Button } from 'primereact/button';
|
||||
import { DataTable } from 'primereact/datatable';
|
||||
import { Column } from 'primereact/column';
|
||||
import { Toast } from 'primereact/toast';
|
||||
import { Toolbar } from 'primereact/toolbar';
|
||||
import { Tag } from 'primereact/tag';
|
||||
import { Dialog } from 'primereact/dialog';
|
||||
import { Calendar } from 'primereact/calendar';
|
||||
import { Dropdown } from 'primereact/dropdown';
|
||||
import { InputSwitch } from 'primereact/inputswitch';
|
||||
import { InputNumber } from 'primereact/inputnumber';
|
||||
import { ProgressBar } from 'primereact/progressbar';
|
||||
import { FileUpload } from 'primereact/fileupload';
|
||||
import { Checkbox } from 'primereact/checkbox';
|
||||
import { RadioButton } from 'primereact/radiobutton';
|
||||
import { Timeline } from 'primereact/timeline';
|
||||
import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
|
||||
import { Divider } from 'primereact/divider';
|
||||
import { Panel } from 'primereact/panel';
|
||||
import { Badge } from 'primereact/badge';
|
||||
import { formatDate, formatDateTime } from '../../../../utils/formatters';
|
||||
|
||||
interface Backup {
|
||||
id: string;
|
||||
nom: string;
|
||||
type: 'MANUEL' | 'AUTOMATIQUE' | 'PLANIFIE';
|
||||
statut: 'EN_COURS' | 'COMPLETE' | 'ECHOUE' | 'PARTIEL';
|
||||
dateCreation: Date;
|
||||
taille: number;
|
||||
duree: number;
|
||||
fichiers: number;
|
||||
destination: string;
|
||||
chiffre: boolean;
|
||||
compresse: boolean;
|
||||
notes?: string;
|
||||
utilisateur: string;
|
||||
prochaineSauvegarde?: Date;
|
||||
}
|
||||
|
||||
interface BackupSchedule {
|
||||
id: string;
|
||||
nom: string;
|
||||
actif: boolean;
|
||||
frequence: 'HORAIRE' | 'QUOTIDIEN' | 'HEBDOMADAIRE' | 'MENSUEL';
|
||||
heure: Date;
|
||||
joursSelection?: number[];
|
||||
retention: number;
|
||||
destination: string;
|
||||
chiffrement: boolean;
|
||||
compression: boolean;
|
||||
inclureBase: boolean;
|
||||
inclureFichiers: boolean;
|
||||
inclureConfig: boolean;
|
||||
}
|
||||
|
||||
interface RestorePoint {
|
||||
id: string;
|
||||
backupId: string;
|
||||
nom: string;
|
||||
date: Date;
|
||||
type: string;
|
||||
statut: 'DISPONIBLE' | 'CORROMPU' | 'EXPIRE';
|
||||
taille: number;
|
||||
}
|
||||
|
||||
const SauvegardePage = () => {
|
||||
const [backups, setBackups] = useState<Backup[]>([]);
|
||||
const [schedules, setSchedules] = useState<BackupSchedule[]>([]);
|
||||
const [restorePoints, setRestorePoints] = useState<RestorePoint[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [backupInProgress, setBackupInProgress] = useState(false);
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [globalFilter, setGlobalFilter] = useState('');
|
||||
const [scheduleDialog, setScheduleDialog] = useState(false);
|
||||
const [restoreDialog, setRestoreDialog] = useState(false);
|
||||
const [selectedBackup, setSelectedBackup] = useState<Backup | null>(null);
|
||||
const [selectedSchedule, setSelectedSchedule] = useState<BackupSchedule | null>(null);
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const toast = useRef<Toast>(null);
|
||||
|
||||
const [newSchedule, setNewSchedule] = useState<BackupSchedule>({
|
||||
id: '',
|
||||
nom: '',
|
||||
actif: true,
|
||||
frequence: 'QUOTIDIEN',
|
||||
heure: new Date(),
|
||||
retention: 30,
|
||||
destination: 'local',
|
||||
chiffrement: true,
|
||||
compression: true,
|
||||
inclureBase: true,
|
||||
inclureFichiers: true,
|
||||
inclureConfig: true
|
||||
});
|
||||
|
||||
const frequenceOptions = [
|
||||
{ label: 'Toutes les heures', value: 'HORAIRE' },
|
||||
{ label: 'Quotidien', value: 'QUOTIDIEN' },
|
||||
{ label: 'Hebdomadaire', value: 'HEBDOMADAIRE' },
|
||||
{ label: 'Mensuel', value: 'MENSUEL' }
|
||||
];
|
||||
|
||||
const destinationOptions = [
|
||||
{ label: 'Stockage local', value: 'local' },
|
||||
{ label: 'Google Drive', value: 'google' },
|
||||
{ label: 'Dropbox', value: 'dropbox' },
|
||||
{ label: 'AWS S3', value: 's3' },
|
||||
{ label: 'Serveur FTP', value: 'ftp' }
|
||||
];
|
||||
|
||||
const joursSemaine = [
|
||||
{ label: 'Lundi', value: 1 },
|
||||
{ label: 'Mardi', value: 2 },
|
||||
{ label: 'Mercredi', value: 3 },
|
||||
{ label: 'Jeudi', value: 4 },
|
||||
{ label: 'Vendredi', value: 5 },
|
||||
{ label: 'Samedi', value: 6 },
|
||||
{ label: 'Dimanche', value: 0 }
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
loadBackupData();
|
||||
}, []);
|
||||
|
||||
const loadBackupData = () => {
|
||||
setLoading(true);
|
||||
|
||||
// TODO: Remplacer par un appel API réel pour charger l'historique des sauvegardes
|
||||
// Exemple: const response = await fetch('/api/admin/backups');
|
||||
// const backups = await response.json();
|
||||
const mockBackups: Backup[] = [];
|
||||
|
||||
// TODO: Remplacer par un appel API réel pour charger les planifications de sauvegarde
|
||||
// Exemple: const response = await fetch('/api/admin/backup-schedules');
|
||||
// const schedules = await response.json();
|
||||
const mockSchedules: BackupSchedule[] = [];
|
||||
|
||||
// TODO: Remplacer par un appel API réel pour charger les points de restauration
|
||||
// Exemple: const response = await fetch('/api/admin/restore-points');
|
||||
// const restorePoints = await response.json();
|
||||
const mockRestorePoints: RestorePoint[] = [];
|
||||
|
||||
setTimeout(() => {
|
||||
setBackups(mockBackups);
|
||||
setSchedules(mockSchedules);
|
||||
setRestorePoints(mockRestorePoints);
|
||||
setLoading(false);
|
||||
}, 1000);
|
||||
};
|
||||
|
||||
const startManualBackup = () => {
|
||||
confirmDialog({
|
||||
message: 'Voulez-vous lancer une sauvegarde manuelle maintenant ?',
|
||||
header: 'Confirmation de sauvegarde',
|
||||
icon: 'pi pi-save',
|
||||
acceptLabel: 'Lancer',
|
||||
rejectLabel: 'Annuler',
|
||||
accept: () => {
|
||||
performBackup();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const performBackup = () => {
|
||||
setBackupInProgress(true);
|
||||
setProgress(0);
|
||||
|
||||
const interval = setInterval(() => {
|
||||
setProgress(prev => {
|
||||
if (prev >= 100) {
|
||||
clearInterval(interval);
|
||||
setBackupInProgress(false);
|
||||
|
||||
const newBackup: Backup = {
|
||||
id: Date.now().toString(),
|
||||
nom: `Sauvegarde manuelle ${new Date().toLocaleString()}`,
|
||||
type: 'MANUEL',
|
||||
statut: 'COMPLETE',
|
||||
dateCreation: new Date(),
|
||||
taille: Math.floor(Math.random() * 2000000000) + 500000000,
|
||||
duree: Math.floor(Math.random() * 300) + 60,
|
||||
fichiers: Math.floor(Math.random() * 10000) + 1000,
|
||||
destination: 'local',
|
||||
chiffre: true,
|
||||
compresse: true,
|
||||
utilisateur: 'admin'
|
||||
};
|
||||
|
||||
setBackups([newBackup, ...backups]);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Sauvegarde terminée',
|
||||
detail: 'La sauvegarde a été effectuée avec succès',
|
||||
life: 5000
|
||||
});
|
||||
|
||||
return 100;
|
||||
}
|
||||
return prev + 5;
|
||||
});
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const deleteBackup = (backup: Backup) => {
|
||||
confirmDialog({
|
||||
message: `Êtes-vous sûr de vouloir supprimer la sauvegarde "${backup.nom}" ?`,
|
||||
header: 'Confirmation de suppression',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
acceptLabel: 'Supprimer',
|
||||
rejectLabel: 'Annuler',
|
||||
acceptClassName: 'p-button-danger',
|
||||
accept: () => {
|
||||
setBackups(backups.filter(b => b.id !== backup.id));
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Suppression réussie',
|
||||
detail: 'La sauvegarde a été supprimée',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const restoreBackup = (backup: Backup) => {
|
||||
setSelectedBackup(backup);
|
||||
setRestoreDialog(true);
|
||||
};
|
||||
|
||||
const performRestore = () => {
|
||||
setRestoreDialog(false);
|
||||
toast.current?.show({
|
||||
severity: 'info',
|
||||
summary: 'Restauration en cours',
|
||||
detail: 'La restauration a été lancée en arrière-plan',
|
||||
life: 5000
|
||||
});
|
||||
};
|
||||
|
||||
const saveSchedule = () => {
|
||||
if (newSchedule.nom) {
|
||||
const schedule = {
|
||||
...newSchedule,
|
||||
id: Date.now().toString()
|
||||
};
|
||||
|
||||
setSchedules([...schedules, schedule]);
|
||||
setScheduleDialog(false);
|
||||
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Planification créée',
|
||||
detail: 'La planification de sauvegarde a été créée',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const toggleSchedule = (schedule: BackupSchedule) => {
|
||||
const updated = schedules.map(s =>
|
||||
s.id === schedule.id ? { ...s, actif: !s.actif } : s
|
||||
);
|
||||
setSchedules(updated);
|
||||
|
||||
toast.current?.show({
|
||||
severity: schedule.actif ? 'warn' : 'success',
|
||||
summary: schedule.actif ? 'Planification désactivée' : 'Planification activée',
|
||||
detail: `La planification "${schedule.nom}" a été ${schedule.actif ? 'désactivée' : 'activée'}`,
|
||||
life: 3000
|
||||
});
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes: number) => {
|
||||
if (bytes === 0) return '0 Bytes';
|
||||
const k = 1024;
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
};
|
||||
|
||||
const formatDuration = (seconds: number) => {
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const secs = seconds % 60;
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}h ${minutes}m ${secs}s`;
|
||||
} else if (minutes > 0) {
|
||||
return `${minutes}m ${secs}s`;
|
||||
}
|
||||
return `${secs}s`;
|
||||
};
|
||||
|
||||
const leftToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
label="Nouvelle sauvegarde"
|
||||
icon="pi pi-save"
|
||||
severity="success"
|
||||
onClick={startManualBackup}
|
||||
disabled={backupInProgress}
|
||||
/>
|
||||
<Button
|
||||
label="Nouvelle planification"
|
||||
icon="pi pi-calendar-plus"
|
||||
onClick={() => {
|
||||
setNewSchedule({
|
||||
id: '',
|
||||
nom: '',
|
||||
actif: true,
|
||||
frequence: 'QUOTIDIEN',
|
||||
heure: new Date(),
|
||||
retention: 30,
|
||||
destination: 'local',
|
||||
chiffrement: true,
|
||||
compression: true,
|
||||
inclureBase: true,
|
||||
inclureFichiers: true,
|
||||
inclureConfig: true
|
||||
});
|
||||
setScheduleDialog(true);
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
label="Importer"
|
||||
icon="pi pi-upload"
|
||||
severity="info"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const rightToolbarTemplate = () => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button
|
||||
label="Nettoyer"
|
||||
icon="pi pi-trash"
|
||||
severity="warning"
|
||||
tooltip="Supprimer les anciennes sauvegardes"
|
||||
onClick={() => {
|
||||
confirmDialog({
|
||||
message: 'Supprimer toutes les sauvegardes de plus de 90 jours ?',
|
||||
header: 'Nettoyage des sauvegardes',
|
||||
icon: 'pi pi-exclamation-triangle',
|
||||
acceptLabel: 'Nettoyer',
|
||||
rejectLabel: 'Annuler',
|
||||
acceptClassName: 'p-button-warning',
|
||||
accept: () => {
|
||||
toast.current?.show({
|
||||
severity: 'success',
|
||||
summary: 'Nettoyage effectué',
|
||||
detail: '3 anciennes sauvegardes supprimées',
|
||||
life: 3000
|
||||
});
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
label="Actualiser"
|
||||
icon="pi pi-refresh"
|
||||
onClick={loadBackupData}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const statusBodyTemplate = (rowData: Backup) => {
|
||||
const getSeverity = (status: string) => {
|
||||
switch (status) {
|
||||
case 'COMPLETE': return 'success';
|
||||
case 'EN_COURS': return 'info';
|
||||
case 'PARTIEL': return 'warning';
|
||||
case 'ECHOUE': return 'danger';
|
||||
default: return 'secondary';
|
||||
}
|
||||
};
|
||||
|
||||
const getLabel = (status: string) => {
|
||||
switch (status) {
|
||||
case 'COMPLETE': return 'Complète';
|
||||
case 'EN_COURS': return 'En cours';
|
||||
case 'PARTIEL': return 'Partielle';
|
||||
case 'ECHOUE': return 'Échouée';
|
||||
default: return status;
|
||||
}
|
||||
};
|
||||
|
||||
return <Tag value={getLabel(rowData.statut)} severity={getSeverity(rowData.statut)} />;
|
||||
};
|
||||
|
||||
const typeBodyTemplate = (rowData: Backup) => {
|
||||
const getIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case 'MANUEL': return 'pi-user';
|
||||
case 'AUTOMATIQUE': return 'pi-clock';
|
||||
case 'PLANIFIE': return 'pi-calendar';
|
||||
default: return 'pi-save';
|
||||
}
|
||||
};
|
||||
|
||||
const getLabel = (type: string) => {
|
||||
switch (type) {
|
||||
case 'MANUEL': return 'Manuelle';
|
||||
case 'AUTOMATIQUE': return 'Automatique';
|
||||
case 'PLANIFIE': return 'Planifiée';
|
||||
default: return type;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex align-items-center">
|
||||
<i className={`pi ${getIcon(rowData.type)} mr-2`} />
|
||||
{getLabel(rowData.type)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const actionBodyTemplate = (rowData: Backup) => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
icon="pi pi-download"
|
||||
rounded
|
||||
severity="info"
|
||||
size="small"
|
||||
tooltip="Télécharger"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-replay"
|
||||
rounded
|
||||
severity="success"
|
||||
size="small"
|
||||
tooltip="Restaurer"
|
||||
onClick={() => restoreBackup(rowData)}
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-trash"
|
||||
rounded
|
||||
severity="danger"
|
||||
size="small"
|
||||
tooltip="Supprimer"
|
||||
onClick={() => deleteBackup(rowData)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const scheduleActionTemplate = (rowData: BackupSchedule) => {
|
||||
return (
|
||||
<div className="flex gap-2">
|
||||
<InputSwitch
|
||||
checked={rowData.actif}
|
||||
onChange={() => toggleSchedule(rowData)}
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-pencil"
|
||||
rounded
|
||||
severity="secondary"
|
||||
size="small"
|
||||
tooltip="Modifier"
|
||||
/>
|
||||
<Button
|
||||
icon="pi pi-trash"
|
||||
rounded
|
||||
severity="danger"
|
||||
size="small"
|
||||
tooltip="Supprimer"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderBackupList = () => (
|
||||
<Card>
|
||||
{backupInProgress && (
|
||||
<div className="mb-4">
|
||||
<h6>Sauvegarde en cours...</h6>
|
||||
<ProgressBar value={progress} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DataTable
|
||||
value={backups}
|
||||
paginator
|
||||
rows={10}
|
||||
dataKey="id"
|
||||
loading={loading}
|
||||
globalFilter={globalFilter}
|
||||
emptyMessage="Aucune sauvegarde trouvée"
|
||||
header={
|
||||
<div className="flex justify-content-between align-items-center">
|
||||
<h5 className="m-0">Historique des sauvegardes</h5>
|
||||
<span className="p-input-icon-left">
|
||||
<i className="pi pi-search" />
|
||||
<InputText
|
||||
placeholder="Rechercher..."
|
||||
onInput={(e) => setGlobalFilter(e.currentTarget.value)}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Column field="nom" header="Nom" sortable />
|
||||
<Column field="type" header="Type" body={typeBodyTemplate} sortable />
|
||||
<Column field="statut" header="Statut" body={statusBodyTemplate} sortable />
|
||||
<Column
|
||||
field="dateCreation"
|
||||
header="Date"
|
||||
body={(rowData) => formatDateTime(rowData.dateCreation)}
|
||||
sortable
|
||||
/>
|
||||
<Column
|
||||
field="taille"
|
||||
header="Taille"
|
||||
body={(rowData) => formatFileSize(rowData.taille)}
|
||||
sortable
|
||||
/>
|
||||
<Column
|
||||
field="duree"
|
||||
header="Durée"
|
||||
body={(rowData) => formatDuration(rowData.duree)}
|
||||
/>
|
||||
<Column field="destination" header="Destination" />
|
||||
<Column
|
||||
field="chiffre"
|
||||
header="Sécurité"
|
||||
body={(rowData) => (
|
||||
<div className="flex gap-1">
|
||||
{rowData.chiffre && <Tag value="Chiffré" severity="success" />}
|
||||
{rowData.compresse && <Tag value="Compressé" severity="info" />}
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<Column body={actionBodyTemplate} headerStyle={{ width: '10rem' }} />
|
||||
</DataTable>
|
||||
</Card>
|
||||
);
|
||||
|
||||
const renderSchedules = () => (
|
||||
<Card>
|
||||
<DataTable
|
||||
value={schedules}
|
||||
dataKey="id"
|
||||
emptyMessage="Aucune planification trouvée"
|
||||
header={<h5>Planifications de sauvegarde</h5>}
|
||||
>
|
||||
<Column field="nom" header="Nom" />
|
||||
<Column
|
||||
field="frequence"
|
||||
header="Fréquence"
|
||||
body={(rowData) => {
|
||||
const freq = frequenceOptions.find(f => f.value === rowData.frequence);
|
||||
return freq ? freq.label : rowData.frequence;
|
||||
}}
|
||||
/>
|
||||
<Column
|
||||
field="heure"
|
||||
header="Heure"
|
||||
body={(rowData) => rowData.heure.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}
|
||||
/>
|
||||
<Column field="destination" header="Destination" />
|
||||
<Column
|
||||
field="retention"
|
||||
header="Rétention"
|
||||
body={(rowData) => `${rowData.retention} jours`}
|
||||
/>
|
||||
<Column
|
||||
field="actif"
|
||||
header="Statut"
|
||||
body={(rowData) => (
|
||||
<Tag
|
||||
value={rowData.actif ? 'Active' : 'Inactive'}
|
||||
severity={rowData.actif ? 'success' : 'secondary'}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Column body={scheduleActionTemplate} headerStyle={{ width: '12rem' }} />
|
||||
</DataTable>
|
||||
</Card>
|
||||
);
|
||||
|
||||
const renderStatistics = () => (
|
||||
<div className="grid">
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<i className="pi pi-database text-4xl text-primary mb-3" />
|
||||
<div className="text-3xl font-bold text-primary">
|
||||
{formatFileSize(backups.reduce((sum, b) => sum + b.taille, 0))}
|
||||
</div>
|
||||
<div className="text-color-secondary">Espace total utilisé</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<i className="pi pi-save text-4xl text-green-500 mb-3" />
|
||||
<div className="text-3xl font-bold text-green-500">
|
||||
{backups.length}
|
||||
</div>
|
||||
<div className="text-color-secondary">Sauvegardes totales</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<i className="pi pi-check-circle text-4xl text-blue-500 mb-3" />
|
||||
<div className="text-3xl font-bold text-blue-500">
|
||||
{backups.filter(b => b.statut === 'COMPLETE').length}
|
||||
</div>
|
||||
<div className="text-color-secondary">Sauvegardes réussies</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="col-12 md:col-3">
|
||||
<Card>
|
||||
<div className="text-center">
|
||||
<i className="pi pi-calendar text-4xl text-purple-500 mb-3" />
|
||||
<div className="text-3xl font-bold text-purple-500">
|
||||
{schedules.filter(s => s.actif).length}
|
||||
</div>
|
||||
<div className="text-color-secondary">Planifications actives</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
const scheduleDialogFooter = (
|
||||
<div className="flex justify-content-end gap-2">
|
||||
<Button label="Annuler" icon="pi pi-times" outlined onClick={() => setScheduleDialog(false)} />
|
||||
<Button label="Créer" icon="pi pi-check" onClick={saveSchedule} />
|
||||
</div>
|
||||
);
|
||||
|
||||
const restoreDialogFooter = (
|
||||
<div className="flex justify-content-end gap-2">
|
||||
<Button label="Annuler" icon="pi pi-times" outlined onClick={() => setRestoreDialog(false)} />
|
||||
<Button label="Restaurer" icon="pi pi-replay" severity="success" onClick={performRestore} />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<Card title="Gestion des sauvegardes">
|
||||
<Toast ref={toast} />
|
||||
<ConfirmDialog />
|
||||
|
||||
<Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate} />
|
||||
|
||||
{renderStatistics()}
|
||||
|
||||
<div className="mt-4">
|
||||
{renderBackupList()}
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
{renderSchedules()}
|
||||
</div>
|
||||
|
||||
{/* Dialog pour nouvelle planification */}
|
||||
<Dialog
|
||||
visible={scheduleDialog}
|
||||
style={{ width: '600px' }}
|
||||
header="Nouvelle planification de sauvegarde"
|
||||
modal
|
||||
footer={scheduleDialogFooter}
|
||||
onHide={() => setScheduleDialog(false)}
|
||||
>
|
||||
<div className="formgrid grid">
|
||||
<div className="field col-12">
|
||||
<label htmlFor="nom">Nom de la planification</label>
|
||||
<InputText
|
||||
id="nom"
|
||||
value={newSchedule.nom}
|
||||
onChange={(e) => setNewSchedule({...newSchedule, nom: e.target.value})}
|
||||
className="w-full"
|
||||
placeholder="Ex: Sauvegarde quotidienne"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="frequence">Fréquence</label>
|
||||
<Dropdown
|
||||
id="frequence"
|
||||
value={newSchedule.frequence}
|
||||
options={frequenceOptions}
|
||||
onChange={(e) => setNewSchedule({...newSchedule, frequence: e.value})}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="heure">Heure d'exécution</label>
|
||||
<Calendar
|
||||
id="heure"
|
||||
value={newSchedule.heure}
|
||||
onChange={(e) => setNewSchedule({...newSchedule, heure: e.value || new Date()})}
|
||||
timeOnly
|
||||
hourFormat="24"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{newSchedule.frequence === 'HEBDOMADAIRE' && (
|
||||
<div className="field col-12">
|
||||
<label>Jours de la semaine</label>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{joursSemaine.map(jour => (
|
||||
<div key={jour.value} className="flex align-items-center">
|
||||
<Checkbox
|
||||
inputId={`jour-${jour.value}`}
|
||||
value={jour.value}
|
||||
onChange={(e) => {
|
||||
const jours = newSchedule.joursSelection || [];
|
||||
if (e.checked) {
|
||||
setNewSchedule({...newSchedule, joursSelection: [...jours, jour.value]});
|
||||
} else {
|
||||
setNewSchedule({...newSchedule, joursSelection: jours.filter(j => j !== jour.value)});
|
||||
}
|
||||
}}
|
||||
checked={newSchedule.joursSelection?.includes(jour.value) || false}
|
||||
/>
|
||||
<label htmlFor={`jour-${jour.value}`} className="ml-2">{jour.label}</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="destination">Destination</label>
|
||||
<Dropdown
|
||||
id="destination"
|
||||
value={newSchedule.destination}
|
||||
options={destinationOptions}
|
||||
onChange={(e) => setNewSchedule({...newSchedule, destination: e.value})}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-6">
|
||||
<label htmlFor="retention">Rétention (jours)</label>
|
||||
<InputNumber
|
||||
id="retention"
|
||||
value={newSchedule.retention}
|
||||
onValueChange={(e) => setNewSchedule({...newSchedule, retention: e.value || 30})}
|
||||
min={1}
|
||||
max={365}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<div className="field col-12">
|
||||
<h6>Options de sauvegarde</h6>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-4">
|
||||
<div className="flex align-items-center">
|
||||
<Checkbox
|
||||
inputId="chiffrement"
|
||||
checked={newSchedule.chiffrement}
|
||||
onChange={(e) => setNewSchedule({...newSchedule, chiffrement: e.checked || false})}
|
||||
/>
|
||||
<label htmlFor="chiffrement" className="ml-2">Chiffrement</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-4">
|
||||
<div className="flex align-items-center">
|
||||
<Checkbox
|
||||
inputId="compression"
|
||||
checked={newSchedule.compression}
|
||||
onChange={(e) => setNewSchedule({...newSchedule, compression: e.checked || false})}
|
||||
/>
|
||||
<label htmlFor="compression" className="ml-2">Compression</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field col-12">
|
||||
<h6>Éléments à sauvegarder</h6>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-4">
|
||||
<div className="flex align-items-center">
|
||||
<Checkbox
|
||||
inputId="inclureBase"
|
||||
checked={newSchedule.inclureBase}
|
||||
onChange={(e) => setNewSchedule({...newSchedule, inclureBase: e.checked || false})}
|
||||
/>
|
||||
<label htmlFor="inclureBase" className="ml-2">Base de données</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-4">
|
||||
<div className="flex align-items-center">
|
||||
<Checkbox
|
||||
inputId="inclureFichiers"
|
||||
checked={newSchedule.inclureFichiers}
|
||||
onChange={(e) => setNewSchedule({...newSchedule, inclureFichiers: e.checked || false})}
|
||||
/>
|
||||
<label htmlFor="inclureFichiers" className="ml-2">Fichiers</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="field col-12 md:col-4">
|
||||
<div className="flex align-items-center">
|
||||
<Checkbox
|
||||
inputId="inclureConfig"
|
||||
checked={newSchedule.inclureConfig}
|
||||
onChange={(e) => setNewSchedule({...newSchedule, inclureConfig: e.checked || false})}
|
||||
/>
|
||||
<label htmlFor="inclureConfig" className="ml-2">Configuration</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
{/* Dialog pour restauration */}
|
||||
<Dialog
|
||||
visible={restoreDialog}
|
||||
style={{ width: '500px' }}
|
||||
header="Restaurer une sauvegarde"
|
||||
modal
|
||||
footer={restoreDialogFooter}
|
||||
onHide={() => setRestoreDialog(false)}
|
||||
>
|
||||
{selectedBackup && (
|
||||
<div>
|
||||
<div className="mb-3">
|
||||
<strong>Sauvegarde:</strong> {selectedBackup.nom}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<strong>Date:</strong> {formatDateTime(selectedBackup.dateCreation)}
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<strong>Taille:</strong> {formatFileSize(selectedBackup.taille)}
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
<div className="p-message p-message-warn mb-3">
|
||||
<i className="pi pi-exclamation-triangle mr-2"></i>
|
||||
<span>
|
||||
La restauration remplacera toutes les données actuelles.
|
||||
Cette action est irréversible.
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h6>Options de restauration</h6>
|
||||
<div className="field-radiobutton mb-2">
|
||||
<RadioButton inputId="complete" name="restoreType" value="complete" checked />
|
||||
<label htmlFor="complete" className="ml-2">Restauration complète</label>
|
||||
</div>
|
||||
<div className="field-radiobutton mb-2">
|
||||
<RadioButton inputId="selective" name="restoreType" value="selective" />
|
||||
<label htmlFor="selective" className="ml-2">Restauration sélective</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Dialog>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SauvegardePage;
|
||||
@@ -340,7 +340,7 @@ const UtilisateursPage = () => {
|
||||
const suspendUser = (utilisateur: Utilisateur) => {
|
||||
const updatedUtilisateurs = utilisateurs.map(u =>
|
||||
u.id === utilisateur.id
|
||||
? { ...u, statut: u.statut === 'SUSPENDU' ? 'ACTIF' : 'SUSPENDU' as const }
|
||||
? { ...u, statut: u.statut === 'SUSPENDU' ? 'ACTIF' : 'SUSPENDU' } as Utilisateur
|
||||
: u
|
||||
);
|
||||
setUtilisateurs(updatedUtilisateurs);
|
||||
@@ -405,13 +405,13 @@ const UtilisateursPage = () => {
|
||||
/>
|
||||
<ActionButton
|
||||
icon="pi pi-key"
|
||||
color="warning"
|
||||
color="orange"
|
||||
onClick={() => resetPassword(rowData)}
|
||||
tooltip="Réinitialiser mot de passe"
|
||||
/>
|
||||
<ActionButton
|
||||
icon={rowData.statut === 'SUSPENDU' ? 'pi pi-check' : 'pi pi-ban'}
|
||||
color={rowData.statut === 'SUSPENDU' ? 'info' : 'danger'}
|
||||
color={rowData.statut === 'SUSPENDU' ? 'blue' : 'red'}
|
||||
onClick={() => suspendUser(rowData)}
|
||||
tooltip={rowData.statut === 'SUSPENDU' ? 'Réactiver' : 'Suspendre'}
|
||||
/>
|
||||
@@ -425,7 +425,7 @@ const UtilisateursPage = () => {
|
||||
|
||||
const statusBodyTemplate = (rowData: Utilisateur) => {
|
||||
let severity: "success" | "warning" | "danger" | "info" = 'success';
|
||||
let label = rowData.statut;
|
||||
let label: string = rowData.statut;
|
||||
|
||||
switch (rowData.statut) {
|
||||
case 'ACTIF':
|
||||
@@ -472,7 +472,7 @@ const UtilisateursPage = () => {
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
{rowData.deuxFacteursActive && <Chip label="2FA" className="p-0 text-xs" style={{ fontSize: '0.75rem', padding: '0.25rem 0.5rem' }} />}
|
||||
{rowData.motDePasseExpire && <Chip label="PWD" severity="danger" className="p-0 text-xs" style={{ fontSize: '0.75rem', padding: '0.25rem 0.5rem' }} />}
|
||||
{rowData.motDePasseExpire && <Chip label="PWD" className="p-0 text-xs" style={{ fontSize: '0.75rem', padding: '0.25rem 0.5rem' }} />}
|
||||
{rowData.tentativesConnexion > 0 && <Badge value={rowData.tentativesConnexion} severity="warning" />}
|
||||
</div>
|
||||
);
|
||||
@@ -570,6 +570,7 @@ const UtilisateursPage = () => {
|
||||
value={utilisateurs}
|
||||
selection={selectedUtilisateurs}
|
||||
onSelectionChange={(e) => setSelectedUtilisateurs(e.value)}
|
||||
selectionMode="multiple"
|
||||
dataKey="id"
|
||||
paginator
|
||||
rows={10}
|
||||
@@ -987,4 +988,4 @@ const ProtectedUtilisateursPage = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ProtectedUtilisateursPage;
|
||||
export default ProtectedUtilisateursPage;
|
||||
|
||||
Reference in New Issue
Block a user