a8825a058b
- Correction des erreurs TypeScript dans userService.ts et workflowTester.ts - Ajout des propriétés manquantes aux objets User mockés - Conversion des dates de string vers objets Date - Correction des appels asynchrones et des types incompatibles - Ajout de dynamic rendering pour résoudre les erreurs useSearchParams - Enveloppement de useSearchParams dans Suspense boundary - Configuration de force-dynamic au niveau du layout principal Build réussi: 126 pages générées avec succès 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1804 lines
85 KiB
TypeScript
1804 lines
85 KiB
TypeScript
'use client';
|
|
export const dynamic = 'force-dynamic';
|
|
|
|
|
|
import React, { useState, useRef, useEffect } from 'react';
|
|
import { DataTable } from 'primereact/datatable';
|
|
import { Column } from 'primereact/column';
|
|
import { Button } from 'primereact/button';
|
|
import { Tag } from 'primereact/tag';
|
|
import { Dialog } from 'primereact/dialog';
|
|
import { InputTextarea } from 'primereact/inputtextarea';
|
|
import { Toast } from 'primereact/toast';
|
|
import { Toolbar } from 'primereact/toolbar';
|
|
import { Card } from 'primereact/card';
|
|
import { ProgressBar } from 'primereact/progressbar';
|
|
import { Badge } from 'primereact/badge';
|
|
import { Dropdown } from 'primereact/dropdown';
|
|
import { Calendar } from 'primereact/calendar';
|
|
import { InputText } from 'primereact/inputtext';
|
|
import { Panel } from 'primereact/panel';
|
|
import { TabView, TabPanel } from 'primereact/tabview';
|
|
import { Timeline } from 'primereact/timeline';
|
|
import { Steps } from 'primereact/steps';
|
|
import { MenuItem } from 'primereact/menuitem';
|
|
import { Accordion, AccordionTab } from 'primereact/accordion';
|
|
import { Divider } from 'primereact/divider';
|
|
import { Avatar } from 'primereact/avatar';
|
|
import { AvatarGroup } from 'primereact/avatargroup';
|
|
import { Chip } from 'primereact/chip';
|
|
import { Message } from 'primereact/message';
|
|
import { Messages } from 'primereact/messages';
|
|
import { Skeleton } from 'primereact/skeleton';
|
|
import { SpeedDial } from 'primereact/speeddial';
|
|
import { ScrollPanel } from 'primereact/scrollpanel';
|
|
import { Splitter, SplitterPanel } from 'primereact/splitter';
|
|
import { FileUpload } from 'primereact/fileupload';
|
|
import { Image } from 'primereact/image';
|
|
import { Galleria } from 'primereact/galleria';
|
|
import { DataView } from 'primereact/dataview';
|
|
import { OrderList } from 'primereact/orderlist';
|
|
import { PickList } from 'primereact/picklist';
|
|
import { OverlayPanel } from 'primereact/overlaypanel';
|
|
import { Sidebar } from 'primereact/sidebar';
|
|
import { ContextMenu } from 'primereact/contextmenu';
|
|
import { Menu } from 'primereact/menu';
|
|
import { TieredMenu } from 'primereact/tieredmenu';
|
|
import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
|
|
import { BlockUI } from 'primereact/blockui';
|
|
import { Chart } from 'primereact/chart';
|
|
import { Rating } from 'primereact/rating';
|
|
import { Knob } from 'primereact/knob';
|
|
import { InputSwitch } from 'primereact/inputswitch';
|
|
import { MultiSelect } from 'primereact/multiselect';
|
|
import { Checkbox } from 'primereact/checkbox';
|
|
import { RadioButton } from 'primereact/radiobutton';
|
|
import { Slider } from 'primereact/slider';
|
|
import { ToggleButton } from 'primereact/togglebutton';
|
|
import { SelectButton } from 'primereact/selectbutton';
|
|
import { InputNumber } from 'primereact/inputnumber';
|
|
import { ColorPicker } from 'primereact/colorpicker';
|
|
import { ListBox } from 'primereact/listbox';
|
|
import { Fieldset } from 'primereact/fieldset';
|
|
// 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 { Carousel } from 'primereact/carousel';
|
|
import { Terminal } from 'primereact/terminal';
|
|
|
|
interface DemandeAcces {
|
|
id: string;
|
|
userId: string;
|
|
nom: string;
|
|
prenom: string;
|
|
email: string;
|
|
telephone: string;
|
|
entreprise: string;
|
|
siret: string;
|
|
secteurActivite: string;
|
|
effectif?: number;
|
|
role: string;
|
|
status: 'PENDING' | 'APPROVED' | 'REJECTED' | 'SUSPENDED';
|
|
dateCreation: string;
|
|
dateModification?: string;
|
|
dateTraitement?: string;
|
|
commentaireDemandeur?: string;
|
|
commentaireAdmin?: string;
|
|
kbisUploade?: boolean;
|
|
assuranceRCUploade?: boolean;
|
|
assuranceDecennaleUploade?: boolean;
|
|
attestationUrssafUploade?: boolean;
|
|
pourcentageCompletion?: number;
|
|
validateurNom?: string;
|
|
}
|
|
|
|
const DemandesAccesAdmin = () => {
|
|
const [demandes, setDemandes] = useState<DemandeAcces[]>([]);
|
|
const [selectedDemande, setSelectedDemande] = useState<DemandeAcces | null>(null);
|
|
const [detailDialog, setDetailDialog] = useState(false);
|
|
const [validationDialog, setValidationDialog] = useState(false);
|
|
const [bulkDialog, setBulkDialog] = useState(false);
|
|
const [workflowDialog, setWorkflowDialog] = useState(false);
|
|
const [analyticsDialog, setAnalyticsDialog] = useState(false);
|
|
const [actionType, setActionType] = useState<'APPROVE' | 'REJECT'>('APPROVE');
|
|
const [commentaire, setCommentaire] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [blocked, setBlocked] = useState(false);
|
|
const [globalFilter, setGlobalFilter] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState<string>('');
|
|
const [dateFilter, setDateFilter] = useState<Date | null>(null);
|
|
const [sectorFilter, setSectorFilter] = useState<string>('');
|
|
const [selectedDemandes, setSelectedDemandes] = useState<DemandeAcces[]>([]);
|
|
const [viewMode, setViewMode] = useState<'table' | 'grid' | 'timeline'>('table');
|
|
const [autoRefresh, setAutoRefresh] = useState(true);
|
|
const [refreshInterval, setRefreshInterval] = useState(30);
|
|
const [sidebarVisible, setSidebarVisible] = useState(false);
|
|
const [activeTab, setActiveTab] = useState(0);
|
|
const [processingQueue, setProcessingQueue] = useState<DemandeAcces[]>([]);
|
|
const [approvalWorkflow, setApprovalWorkflow] = useState([]);
|
|
const [auditLog, setAuditLog] = useState([]);
|
|
const [kpiData, setKpiData] = useState({
|
|
totalDemandes: 0,
|
|
enAttente: 0,
|
|
approuvees: 0,
|
|
rejetees: 0,
|
|
tauxApprobation: 0,
|
|
delaiMoyenTraitement: 0
|
|
});
|
|
const [chartData, setChartData] = useState({});
|
|
const [timelineData, setTimelineData] = useState([]);
|
|
const [validationRules, setValidationRules] = useState([]);
|
|
const [notifications, setNotifications] = useState([]);
|
|
const [documentPreview, setDocumentPreview] = useState(null);
|
|
const [compareMode, setCompareMode] = useState(false);
|
|
const [selectedForComparison, setSelectedForComparison] = useState<DemandeAcces[]>([]);
|
|
const [exportProgress, setExportProgress] = useState(0);
|
|
const [aiRecommendations, setAiRecommendations] = useState([]);
|
|
const [riskScore, setRiskScore] = useState(0);
|
|
const [complianceCheck, setComplianceCheck] = useState(true);
|
|
|
|
const toast = useRef<Toast>(null);
|
|
const messages = useRef<Messages>(null);
|
|
const overlayPanel = useRef<OverlayPanel>(null);
|
|
const contextMenu = useRef<ContextMenu>(null);
|
|
const terminal = useRef<Terminal>(null);
|
|
const dt = useRef<DataTable<any>>(null);
|
|
|
|
const statusOptions = [
|
|
{ label: 'Tous', value: '', icon: 'pi pi-list' },
|
|
{ label: 'En attente', value: 'PENDING', icon: 'pi pi-clock', color: '#f59e0b' },
|
|
{ label: 'Approuvé', value: 'APPROVED', icon: 'pi pi-check', color: '#10b981' },
|
|
{ label: 'Rejeté', value: 'REJECTED', icon: 'pi pi-times', color: '#ef4444' },
|
|
{ label: 'Suspendu', value: 'SUSPENDED', icon: 'pi pi-pause', color: '#6b7280' },
|
|
{ label: 'En révision', value: 'UNDER_REVIEW', icon: 'pi pi-eye', color: '#3b82f6' },
|
|
{ label: 'Incomplet', value: 'INCOMPLETE', icon: 'pi pi-exclamation-triangle', color: '#f97316' }
|
|
];
|
|
|
|
const sectorOptions = [
|
|
{ label: 'Tous les secteurs', value: '' },
|
|
{ label: 'BTP Général', value: 'BTP_GENERAL' },
|
|
{ label: 'Électricité', value: 'ELECTRICITE' },
|
|
{ label: 'Plomberie', value: 'PLOMBERIE' },
|
|
{ label: 'Maçonnerie', value: 'MACONNERIE' },
|
|
{ label: 'Menuiserie', value: 'MENUISERIE' },
|
|
{ label: 'Peinture', value: 'PEINTURE' },
|
|
{ label: 'Couverture', value: 'COUVERTURE' },
|
|
{ label: 'Terrassement', value: 'TERRASSEMENT' }
|
|
];
|
|
|
|
const viewModeOptions = [
|
|
{ label: 'Tableau', value: 'table', icon: 'pi pi-table' },
|
|
{ label: 'Grille', value: 'grid', icon: 'pi pi-th-large' },
|
|
{ label: 'Timeline', value: 'timeline', icon: 'pi pi-calendar' }
|
|
];
|
|
|
|
const bulkActions = [
|
|
{ label: 'Approuver sélection', icon: 'pi pi-check', command: () => processBulkAction('APPROVE') },
|
|
{ label: 'Rejeter sélection', icon: 'pi pi-times', command: () => processBulkAction('REJECT') },
|
|
{ label: 'Marquer comme incomplet', icon: 'pi pi-exclamation-triangle', command: () => processBulkAction('INCOMPLETE') },
|
|
{ label: 'Exporter sélection', icon: 'pi pi-download', command: () => exportSelected() },
|
|
{ label: 'Assigner à un validateur', icon: 'pi pi-user', command: () => assignValidator() },
|
|
{ label: 'Envoyer rappel', icon: 'pi pi-send', command: () => sendReminder() }
|
|
];
|
|
|
|
const quickFilters = [
|
|
{ label: 'Nouvelles demandes (24h)', filter: () => filterByDate(1), icon: 'pi pi-clock' },
|
|
{ label: 'En attente > 7 jours', filter: () => filterByDelay(7), icon: 'pi pi-exclamation-triangle' },
|
|
{ label: 'Documents manquants', filter: () => filterByDocuments(), icon: 'pi pi-file' },
|
|
{ label: 'Score de risque élevé', filter: () => filterByRisk(), icon: 'pi pi-shield' },
|
|
{ label: 'Grandes entreprises', filter: () => filterBySize('large'), icon: 'pi pi-building' }
|
|
];
|
|
|
|
const workflowSteps = [
|
|
{ label: 'Soumission', icon: 'pi pi-send' },
|
|
{ label: 'Vérification automatique', icon: 'pi pi-cog' },
|
|
{ label: 'Contrôle documents', icon: 'pi pi-file-check' },
|
|
{ label: 'Validation métier', icon: 'pi pi-user-check' },
|
|
{ label: 'Approbation finale', icon: 'pi pi-check-circle' }
|
|
];
|
|
|
|
const validationCriteria = [
|
|
{ name: 'Informations entreprise', weight: 25, status: 'complete' },
|
|
{ name: 'Documents légaux', weight: 30, status: 'incomplete' },
|
|
{ name: 'Assurances', weight: 20, status: 'complete' },
|
|
{ name: 'Références clients', weight: 15, status: 'pending' },
|
|
{ name: 'Capacité financière', weight: 10, status: 'complete' }
|
|
];
|
|
|
|
useEffect(() => {
|
|
loadDemandes();
|
|
}, []);
|
|
|
|
const loadDemandes = async () => {
|
|
setLoading(true);
|
|
try {
|
|
// TODO: Remplacer par un appel API réel pour charger les demandes d'accès
|
|
// Exemple: const response = await fetch('/api/admin/demandes-acces');
|
|
// const demandesData = await response.json();
|
|
const mockData: DemandeAcces[] = [];
|
|
setDemandes(mockData);
|
|
} catch (error) {
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Impossible de charger les demandes',
|
|
life: 3000
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const getStatusSeverity = (status: string) => {
|
|
switch (status) {
|
|
case 'PENDING': return 'warning';
|
|
case 'APPROVED': return 'success';
|
|
case 'REJECTED': return 'danger';
|
|
case 'SUSPENDED': return 'info';
|
|
default: return 'info';
|
|
}
|
|
};
|
|
|
|
const getStatusLabel = (status: string) => {
|
|
switch (status) {
|
|
case 'PENDING': return 'En attente';
|
|
case 'APPROVED': return 'Approuvé';
|
|
case 'REJECTED': return 'Rejeté';
|
|
case 'SUSPENDED': return 'Suspendu';
|
|
default: return status;
|
|
}
|
|
};
|
|
|
|
// 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)} />;
|
|
};
|
|
|
|
const entrepriseBodyTemplate = (rowData: DemandeAcces) => {
|
|
return (
|
|
<div>
|
|
<div className="font-bold">{rowData.entreprise}</div>
|
|
<div className="text-sm text-500">SIRET: {rowData.siret}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const contactBodyTemplate = (rowData: DemandeAcces) => {
|
|
return (
|
|
<div>
|
|
<div className="font-bold">{rowData.prenom} {rowData.nom}</div>
|
|
<div className="text-sm text-500">{rowData.email}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const documentsBodyTemplate = (rowData: DemandeAcces) => {
|
|
return (
|
|
<div className="flex align-items-center gap-2">
|
|
<ProgressBar
|
|
value={rowData.pourcentageCompletion || 0}
|
|
style={{ width: '60px', height: '6px' }}
|
|
/>
|
|
<span className="text-sm">{rowData.pourcentageCompletion || 0}%</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const dateBodyTemplate = (rowData: DemandeAcces) => {
|
|
return new Date(rowData.dateCreation).toLocaleDateString('fr-FR');
|
|
};
|
|
|
|
const actionsBodyTemplate = (rowData: DemandeAcces) => {
|
|
return (
|
|
<div className="flex gap-2">
|
|
<Button
|
|
icon="pi pi-eye"
|
|
className="p-button-rounded p-button-text"
|
|
onClick={() => {
|
|
setSelectedDemande(rowData);
|
|
setDetailDialog(true);
|
|
}}
|
|
tooltip="Voir détails"
|
|
/>
|
|
{rowData.status === 'PENDING' && (
|
|
<>
|
|
<Button
|
|
icon="pi pi-check"
|
|
className="p-button-rounded p-button-success p-button-text"
|
|
onClick={() => openValidationDialog(rowData, 'APPROVE')}
|
|
tooltip="Approuver"
|
|
/>
|
|
<Button
|
|
icon="pi pi-times"
|
|
className="p-button-rounded p-button-danger p-button-text"
|
|
onClick={() => openValidationDialog(rowData, 'REJECT')}
|
|
tooltip="Rejeter"
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const openValidationDialog = (demande: DemandeAcces, action: 'APPROVE' | 'REJECT') => {
|
|
setSelectedDemande(demande);
|
|
setActionType(action);
|
|
setCommentaire('');
|
|
setValidationDialog(true);
|
|
};
|
|
|
|
const handleValidation = async () => {
|
|
if (!selectedDemande || !commentaire.trim()) {
|
|
toast.current?.show({
|
|
severity: 'warn',
|
|
summary: 'Attention',
|
|
detail: 'Veuillez saisir un commentaire',
|
|
life: 3000
|
|
});
|
|
return;
|
|
}
|
|
|
|
try {
|
|
setLoading(true);
|
|
|
|
// Simuler l'appel API
|
|
const updatedDemandes = demandes.map(d =>
|
|
d.id === selectedDemande.id
|
|
? { ...d, status: actionType === 'APPROVE' ? 'APPROVED' as const : 'REJECTED' as const, commentaireAdmin: commentaire, dateTraitement: new Date().toISOString() }
|
|
: d
|
|
);
|
|
setDemandes(updatedDemandes);
|
|
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Succès',
|
|
detail: `Demande ${actionType === 'APPROVE' ? 'approuvée' : 'rejetée'} avec succès`,
|
|
life: 3000
|
|
});
|
|
|
|
setValidationDialog(false);
|
|
} catch (error) {
|
|
toast.current?.show({
|
|
severity: 'error',
|
|
summary: 'Erreur',
|
|
detail: 'Erreur lors de la validation',
|
|
life: 3000
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadDemandes();
|
|
loadKPIData();
|
|
loadAnalytics();
|
|
|
|
if (autoRefresh) {
|
|
const interval = setInterval(() => {
|
|
loadDemandes();
|
|
loadKPIData();
|
|
}, refreshInterval * 1000);
|
|
return () => clearInterval(interval);
|
|
}
|
|
}, [autoRefresh, refreshInterval]);
|
|
|
|
const loadKPIData = async () => {
|
|
// TODO: Remplacer par un appel API réel
|
|
const mockKPI = {
|
|
totalDemandes: 156,
|
|
enAttente: 23,
|
|
approuvees: 98,
|
|
rejetees: 35,
|
|
tauxApprobation: 73.6,
|
|
delaiMoyenTraitement: 4.2
|
|
};
|
|
setKpiData(mockKPI);
|
|
};
|
|
|
|
const loadAnalytics = async () => {
|
|
// TODO: Remplacer par un appel API réel pour les analytics
|
|
const mockChartData = {
|
|
labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun'],
|
|
datasets: [
|
|
{
|
|
label: 'Demandes reçues',
|
|
data: [25, 32, 28, 45, 38, 42],
|
|
backgroundColor: '#3B82F6',
|
|
borderColor: '#1D4ED8'
|
|
},
|
|
{
|
|
label: 'Demandes approuvées',
|
|
data: [18, 24, 21, 32, 28, 31],
|
|
backgroundColor: '#10B981',
|
|
borderColor: '#047857'
|
|
}
|
|
]
|
|
};
|
|
setChartData(mockChartData);
|
|
|
|
const mockTimeline = [
|
|
{ date: new Date(), event: 'Nouvelle demande reçue', type: 'info', user: 'Système' },
|
|
{ date: new Date(), event: 'Demande approuvée', type: 'success', user: 'Admin' },
|
|
{ date: new Date(), event: 'Documents manquants signalés', type: 'warning', user: 'Validateur' }
|
|
];
|
|
setTimelineData(mockTimeline);
|
|
};
|
|
|
|
const processBulkAction = (action: string) => {
|
|
if (selectedDemandes.length === 0) {
|
|
toast.current?.show({
|
|
severity: 'warn',
|
|
summary: 'Attention',
|
|
detail: 'Veuillez sélectionner au moins une demande',
|
|
life: 3000
|
|
});
|
|
return;
|
|
}
|
|
|
|
confirmDialog({
|
|
message: `Voulez-vous ${action === 'APPROVE' ? 'approuver' : 'rejeter'} ${selectedDemandes.length} demande(s) ?`,
|
|
header: 'Action groupée',
|
|
icon: 'pi pi-question-circle',
|
|
acceptLabel: 'Confirmer',
|
|
rejectLabel: 'Annuler',
|
|
accept: () => {
|
|
setBlocked(true);
|
|
setTimeout(() => {
|
|
setBlocked(false);
|
|
setSelectedDemandes([]);
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Action terminée',
|
|
detail: `${selectedDemandes.length} demandes traitées avec succès`,
|
|
life: 3000
|
|
});
|
|
}, 2000);
|
|
}
|
|
});
|
|
};
|
|
|
|
const exportSelected = () => {
|
|
if (selectedDemandes.length === 0) {
|
|
toast.current?.show({
|
|
severity: 'warn',
|
|
summary: 'Attention',
|
|
detail: 'Veuillez sélectionner au moins une demande',
|
|
life: 3000
|
|
});
|
|
return;
|
|
}
|
|
|
|
setExportProgress(0);
|
|
const interval = setInterval(() => {
|
|
setExportProgress(prev => {
|
|
if (prev >= 100) {
|
|
clearInterval(interval);
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Export terminé',
|
|
detail: `${selectedDemandes.length} demandes exportées`,
|
|
life: 3000
|
|
});
|
|
return 100;
|
|
}
|
|
return prev + 10;
|
|
});
|
|
}, 200);
|
|
};
|
|
|
|
const assignValidator = () => {
|
|
toast.current?.show({
|
|
severity: 'info',
|
|
summary: 'Assignation',
|
|
detail: 'Fonction d\'assignation en cours de développement',
|
|
life: 3000
|
|
});
|
|
};
|
|
|
|
const sendReminder = () => {
|
|
toast.current?.show({
|
|
severity: 'success',
|
|
summary: 'Rappels envoyés',
|
|
detail: `Rappels envoyés pour ${selectedDemandes.length} demandes`,
|
|
life: 3000
|
|
});
|
|
};
|
|
|
|
const filterByDate = (days: number) => {
|
|
const cutoffDate = new Date();
|
|
cutoffDate.setDate(cutoffDate.getDate() - days);
|
|
// Implémentation du filtre
|
|
toast.current?.show({
|
|
severity: 'info',
|
|
summary: 'Filtre appliqué',
|
|
detail: `Affichage des demandes des ${days} derniers jours`,
|
|
life: 3000
|
|
});
|
|
};
|
|
|
|
const filterByDelay = (days: number) => {
|
|
toast.current?.show({
|
|
severity: 'info',
|
|
summary: 'Filtre appliqué',
|
|
detail: `Affichage des demandes en attente depuis plus de ${days} jours`,
|
|
life: 3000
|
|
});
|
|
};
|
|
|
|
const filterByDocuments = () => {
|
|
toast.current?.show({
|
|
severity: 'info',
|
|
summary: 'Filtre appliqué',
|
|
detail: 'Affichage des demandes avec documents manquants',
|
|
life: 3000
|
|
});
|
|
};
|
|
|
|
const filterByRisk = () => {
|
|
toast.current?.show({
|
|
severity: 'info',
|
|
summary: 'Filtre appliqué',
|
|
detail: 'Affichage des demandes à risque élevé',
|
|
life: 3000
|
|
});
|
|
};
|
|
|
|
const filterBySize = (size: string) => {
|
|
toast.current?.show({
|
|
severity: 'info',
|
|
summary: 'Filtre appliqué',
|
|
detail: `Affichage des ${size === 'large' ? 'grandes' : 'petites'} entreprises`,
|
|
life: 3000
|
|
});
|
|
};
|
|
|
|
const advancedToolbar = (
|
|
<div className="flex flex-wrap align-items-center justify-content-between gap-3 p-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white border-round">
|
|
<div className="flex align-items-center gap-3">
|
|
<Avatar icon="pi pi-users" className="bg-white-alpha-20" style={{ color: 'white' }} />
|
|
<div>
|
|
<div className="text-xl font-bold">Gestion des Demandes d'Accès</div>
|
|
<div className="text-sm opacity-90">
|
|
{kpiData.totalDemandes} demandes | {kpiData.enAttente} en attente | Taux d'approbation: {kpiData.tauxApprobation}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex align-items-center gap-2">
|
|
<SelectButton
|
|
value={viewMode}
|
|
options={viewModeOptions}
|
|
onChange={(e) => setViewMode(e.value)}
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
className="view-mode-selector"
|
|
/>
|
|
|
|
<ToggleButton
|
|
checked={autoRefresh}
|
|
onChange={(e) => setAutoRefresh(e.value)}
|
|
onIcon="pi pi-pause"
|
|
offIcon="pi pi-play"
|
|
onLabel=""
|
|
offLabel=""
|
|
className="bg-white-alpha-20"
|
|
tooltip="Auto-refresh"
|
|
/>
|
|
|
|
<Button
|
|
icon="pi pi-chart-bar"
|
|
rounded
|
|
text
|
|
onClick={() => setAnalyticsDialog(true)}
|
|
tooltip="Analytics"
|
|
className="text-white"
|
|
/>
|
|
|
|
<Button
|
|
icon="pi pi-cog"
|
|
rounded
|
|
text
|
|
onClick={() => setSidebarVisible(true)}
|
|
tooltip="Configuration"
|
|
className="text-white"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const searchToolbar = (
|
|
<div className="flex flex-wrap align-items-center justify-content-between gap-3 p-3 bg-gray-50 border-round mb-3">
|
|
<div className="flex flex-wrap align-items-center gap-2">
|
|
<span className="p-input-icon-left">
|
|
<i className="pi pi-search" />
|
|
<InputText
|
|
type="search"
|
|
placeholder="Rechercher par nom, email, entreprise..."
|
|
value={globalFilter}
|
|
onChange={(e) => setGlobalFilter(e.target.value)}
|
|
className="w-20rem"
|
|
/>
|
|
</span>
|
|
|
|
<Dropdown
|
|
value={statusFilter}
|
|
options={statusOptions}
|
|
onChange={(e) => setStatusFilter(e.value)}
|
|
placeholder="Statut"
|
|
className="w-12rem"
|
|
showClear
|
|
/>
|
|
|
|
<Dropdown
|
|
value={sectorFilter}
|
|
options={sectorOptions}
|
|
onChange={(e) => setSectorFilter(e.value)}
|
|
placeholder="Secteur"
|
|
className="w-12rem"
|
|
showClear
|
|
/>
|
|
|
|
<Calendar
|
|
value={dateFilter}
|
|
onChange={(e) => setDateFilter(e.value)}
|
|
placeholder="Date création"
|
|
showIcon
|
|
className="w-12rem"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex align-items-center gap-2">
|
|
<Badge value={filteredDemandes.length} className="mr-2" />
|
|
<span className="text-sm text-600">résultats</span>
|
|
|
|
<Button
|
|
icon="pi pi-filter-slash"
|
|
label="Effacer"
|
|
size="small"
|
|
outlined
|
|
onClick={() => {
|
|
setGlobalFilter('');
|
|
setStatusFilter('');
|
|
setSectorFilter('');
|
|
setDateFilter(null);
|
|
}}
|
|
/>
|
|
|
|
<Button
|
|
icon="pi pi-refresh"
|
|
label="Actualiser"
|
|
size="small"
|
|
onClick={loadDemandes}
|
|
loading={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
|
|
|
|
|
|
const renderKPIDashboard = () => (
|
|
<div className="grid mb-4">
|
|
<div className="col-12 md:col-3">
|
|
<Card className="bg-gradient-to-r from-blue-500 to-blue-600 text-white">
|
|
<div className="flex align-items-center justify-content-between">
|
|
<div>
|
|
<div className="text-2xl font-bold">{kpiData.totalDemandes}</div>
|
|
<div className="text-sm opacity-90">Total demandes</div>
|
|
</div>
|
|
<Avatar icon="pi pi-users" size="large" className="bg-white-alpha-20" />
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 md:col-3">
|
|
<Card className="bg-gradient-to-r from-orange-500 to-orange-600 text-white">
|
|
<div className="flex align-items-center justify-content-between">
|
|
<div>
|
|
<div className="text-2xl font-bold">{kpiData.enAttente}</div>
|
|
<div className="text-sm opacity-90">En attente</div>
|
|
</div>
|
|
<Avatar icon="pi pi-clock" size="large" className="bg-white-alpha-20" />
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 md:col-3">
|
|
<Card className="bg-gradient-to-r from-green-500 to-green-600 text-white">
|
|
<div className="flex align-items-center justify-content-between">
|
|
<div>
|
|
<div className="text-2xl font-bold">{kpiData.tauxApprobation}%</div>
|
|
<div className="text-sm opacity-90">Taux approbation</div>
|
|
</div>
|
|
<Avatar icon="pi pi-check-circle" size="large" className="bg-white-alpha-20" />
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 md:col-3">
|
|
<Card className="bg-gradient-to-r from-purple-500 to-purple-600 text-white">
|
|
<div className="flex align-items-center justify-content-between">
|
|
<div>
|
|
<div className="text-2xl font-bold">{kpiData.delaiMoyenTraitement}j</div>
|
|
<div className="text-sm opacity-90">Délai moyen</div>
|
|
</div>
|
|
<Avatar icon="pi pi-calendar" size="large" className="bg-white-alpha-20" />
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const renderQuickFilters = () => (
|
|
<Card className="mb-4">
|
|
<h6 className="mb-3">Filtres rapides</h6>
|
|
<div className="flex flex-wrap gap-2">
|
|
{quickFilters.map((filter, index) => (
|
|
<Chip
|
|
key={index}
|
|
label={filter.label}
|
|
icon={filter.icon}
|
|
className="cursor-pointer hover:bg-primary-50"
|
|
onClick={filter.filter}
|
|
/>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
);
|
|
|
|
const renderTableView = () => (
|
|
<Card>
|
|
{selectedDemandes.length > 0 && (
|
|
<div className="mb-3 p-3 bg-blue-50 border-round">
|
|
<div className="flex align-items-center justify-content-between">
|
|
<div className="flex align-items-center gap-2">
|
|
<i className="pi pi-check-circle text-blue-500" />
|
|
<span>{selectedDemandes.length} demande(s) sélectionnée(s)</span>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
label="Actions groupées"
|
|
icon="pi pi-chevron-down"
|
|
size="small"
|
|
onClick={(e) => overlayPanel.current?.toggle(e)}
|
|
/>
|
|
<Button
|
|
icon="pi pi-times"
|
|
size="small"
|
|
text
|
|
onClick={() => setSelectedDemandes([])}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<DataTable
|
|
ref={dt}
|
|
value={filteredDemandes}
|
|
selection={selectedDemandes}
|
|
onSelectionChange={(e) => setSelectedDemandes(e.value)}
|
|
paginator
|
|
rows={10}
|
|
rowsPerPageOptions={[10, 25, 50, 100]}
|
|
loading={loading}
|
|
globalFilter={globalFilter}
|
|
emptyMessage="Aucune demande trouvée"
|
|
responsiveLayout="stack"
|
|
breakpoint="768px"
|
|
className="p-datatable-striped"
|
|
showGridlines
|
|
sortMode="multiple"
|
|
removableSort
|
|
reorderableColumns
|
|
resizableColumns
|
|
columnResizeMode="expand"
|
|
contextMenuSelection={selectedDemande}
|
|
onContextMenuSelectionChange={(e) => setSelectedDemande(e.value)}
|
|
onContextMenu={(e) => contextMenu.current?.show(e.originalEvent)}
|
|
>
|
|
<Column selectionMode="multiple" headerStyle={{ width: '3rem' }} />
|
|
<Column
|
|
field="entreprise"
|
|
header="Entreprise"
|
|
body={entrepriseBodyTemplate}
|
|
sortable
|
|
filter
|
|
filterPlaceholder="Rechercher..."
|
|
/>
|
|
<Column
|
|
field="contact"
|
|
header="Contact"
|
|
body={contactBodyTemplate}
|
|
sortable
|
|
/>
|
|
<Column
|
|
field="secteurActivite"
|
|
header="Secteur"
|
|
sortable
|
|
filter
|
|
filterElement={sectorFilterTemplate}
|
|
/>
|
|
<Column
|
|
field="role"
|
|
header="Rôle"
|
|
sortable
|
|
/>
|
|
<Column
|
|
field="status"
|
|
header="Statut"
|
|
body={statusBodyTemplate}
|
|
sortable
|
|
filter
|
|
filterElement={statusFilterTemplate}
|
|
/>
|
|
<Column
|
|
field="documents"
|
|
header="Documents"
|
|
body={documentsBodyTemplate}
|
|
/>
|
|
<Column
|
|
field="dateCreation"
|
|
header="Date création"
|
|
body={dateBodyTemplate}
|
|
sortable
|
|
filter
|
|
filterElement={dateFilterTemplate}
|
|
/>
|
|
<Column
|
|
field="riskScore"
|
|
header="Risque"
|
|
body={riskScoreTemplate}
|
|
sortable
|
|
/>
|
|
<Column
|
|
header="Actions"
|
|
body={actionsBodyTemplate}
|
|
exportable={false}
|
|
frozen
|
|
alignFrozen="right"
|
|
/>
|
|
</DataTable>
|
|
</Card>
|
|
);
|
|
|
|
const renderGridView = () => (
|
|
<div className="grid">
|
|
{filteredDemandes.map((demande) => (
|
|
<div key={demande.id} className="col-12 md:col-6 lg:col-4">
|
|
<Card className="h-full hover:shadow-lg transition-shadow">
|
|
<div className="flex align-items-center justify-content-between mb-3">
|
|
<Avatar
|
|
label={demande.prenom.charAt(0) + demande.nom.charAt(0)}
|
|
className="mr-2"
|
|
style={{ backgroundColor: '#DEE2E6', color: '#495057' }}
|
|
/>
|
|
<Tag
|
|
value={getStatusLabel(demande.status)}
|
|
severity={getStatusSeverity(demande.status)}
|
|
/>
|
|
</div>
|
|
|
|
<h6 className="mb-2">{demande.prenom} {demande.nom}</h6>
|
|
<p className="text-sm text-600 mb-2">{demande.email}</p>
|
|
<p className="font-bold mb-2">{demande.entreprise}</p>
|
|
<p className="text-sm text-500 mb-3">{demande.secteurActivite}</p>
|
|
|
|
<div className="flex align-items-center mb-3">
|
|
<ProgressBar
|
|
value={demande.pourcentageCompletion || 0}
|
|
className="flex-1 mr-2"
|
|
style={{ height: '6px' }}
|
|
/>
|
|
<span className="text-sm">{demande.pourcentageCompletion || 0}%</span>
|
|
</div>
|
|
|
|
<div className="flex justify-content-between">
|
|
<Button
|
|
icon="pi pi-eye"
|
|
size="small"
|
|
outlined
|
|
onClick={() => {
|
|
setSelectedDemande(demande);
|
|
setDetailDialog(true);
|
|
}}
|
|
/>
|
|
{demande.status === 'PENDING' && (
|
|
<div className="flex gap-1">
|
|
<Button
|
|
icon="pi pi-check"
|
|
size="small"
|
|
severity="success"
|
|
onClick={() => openValidationDialog(demande, 'APPROVE')}
|
|
/>
|
|
<Button
|
|
icon="pi pi-times"
|
|
size="small"
|
|
severity="danger"
|
|
onClick={() => openValidationDialog(demande, 'REJECT')}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
|
|
const renderTimelineView = () => (
|
|
<Card>
|
|
<Timeline
|
|
value={filteredDemandes}
|
|
content={(item) => (
|
|
<Card className="ml-3">
|
|
<div className="flex align-items-center justify-content-between mb-2">
|
|
<div className="flex align-items-center">
|
|
<Avatar
|
|
label={item.prenom.charAt(0) + item.nom.charAt(0)}
|
|
className="mr-2"
|
|
size="normal"
|
|
/>
|
|
<div>
|
|
<div className="font-bold">{item.prenom} {item.nom}</div>
|
|
<div className="text-sm text-600">{item.entreprise}</div>
|
|
</div>
|
|
</div>
|
|
<Tag
|
|
value={getStatusLabel(item.status)}
|
|
severity={getStatusSeverity(item.status)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="text-sm text-500 mb-2">
|
|
{new Date(item.dateCreation).toLocaleDateString('fr-FR')}
|
|
</div>
|
|
|
|
<div className="flex justify-content-end gap-2">
|
|
<Button
|
|
icon="pi pi-eye"
|
|
size="small"
|
|
text
|
|
onClick={() => {
|
|
setSelectedDemande(item);
|
|
setDetailDialog(true);
|
|
}}
|
|
/>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
className="w-full"
|
|
/>
|
|
</Card>
|
|
);
|
|
|
|
const sectorFilterTemplate = (options: any) => (
|
|
<Dropdown
|
|
value={options.value}
|
|
options={sectorOptions}
|
|
onChange={(e) => options.filterCallback(e.value)}
|
|
placeholder="Tous"
|
|
className="p-column-filter"
|
|
showClear
|
|
/>
|
|
);
|
|
|
|
const statusFilterTemplate = (options: any) => (
|
|
<Dropdown
|
|
value={options.value}
|
|
options={statusOptions}
|
|
onChange={(e) => options.filterCallback(e.value)}
|
|
placeholder="Tous"
|
|
className="p-column-filter"
|
|
showClear
|
|
/>
|
|
);
|
|
|
|
const dateFilterTemplate = (options: any) => (
|
|
<Calendar
|
|
value={options.value}
|
|
onChange={(e) => options.filterCallback(e.value)}
|
|
placeholder="Sélectionner"
|
|
className="p-column-filter"
|
|
showIcon
|
|
/>
|
|
);
|
|
|
|
const riskScoreTemplate = (rowData: DemandeAcces) => {
|
|
const score = Math.floor(Math.random() * 40) + 30; // Score entre 30-70
|
|
const getSeverity = () => {
|
|
if (score >= 60) return 'danger';
|
|
if (score >= 40) return 'warning';
|
|
return 'success';
|
|
};
|
|
|
|
return (
|
|
<div className="flex align-items-center">
|
|
<Badge value={score} severity={getSeverity()} className="mr-2" />
|
|
<div className="w-4rem">
|
|
<ProgressBar value={score} style={{ height: '4px' }} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="access-requests-management">
|
|
<BlockUI blocked={blocked}>
|
|
<Toast ref={toast} />
|
|
<Messages ref={messages} />
|
|
<ConfirmDialog />
|
|
|
|
{advancedToolbar}
|
|
|
|
{exportProgress > 0 && exportProgress < 100 && (
|
|
<Card className="mb-4">
|
|
<div className="flex align-items-center gap-3">
|
|
<i className="pi pi-spin pi-download text-blue-500" />
|
|
<div className="flex-1">
|
|
<p className="m-0 font-bold">Export en cours...</p>
|
|
<ProgressBar value={exportProgress} className="mt-2" />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
<TabView activeIndex={activeTab} onTabChange={(e) => setActiveTab(e.index)}>
|
|
<TabPanel header="Demandes" leftIcon="pi pi-list mr-2">
|
|
{renderKPIDashboard()}
|
|
{renderQuickFilters()}
|
|
{searchToolbar}
|
|
|
|
{viewMode === 'table' && renderTableView()}
|
|
{viewMode === 'grid' && renderGridView()}
|
|
{viewMode === 'timeline' && renderTimelineView()}
|
|
</TabPanel>
|
|
|
|
<TabPanel header="Workflow" leftIcon="pi pi-sitemap mr-2">
|
|
<Card title="Processus d'approbation">
|
|
<Steps
|
|
model={workflowSteps}
|
|
activeIndex={2}
|
|
className="mb-4"
|
|
/>
|
|
|
|
<div className="grid">
|
|
<div className="col-12 md:col-6">
|
|
<h6>File d'attente de traitement</h6>
|
|
<DataView
|
|
value={processingQueue}
|
|
itemTemplate={(item) => (
|
|
<div className="p-3 border-bottom-1 surface-border">
|
|
<div className="flex align-items-center justify-content-between">
|
|
<div>
|
|
<div className="font-bold">{item.entreprise}</div>
|
|
<div className="text-sm text-600">{item.prenom} {item.nom}</div>
|
|
</div>
|
|
<Badge value="En cours" severity="info" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
emptyMessage="Aucune demande en cours de traitement"
|
|
/>
|
|
</div>
|
|
|
|
<div className="col-12 md:col-6">
|
|
<h6>Règles de validation</h6>
|
|
{validationCriteria.map((criteria, index) => (
|
|
<div key={index} className="flex align-items-center justify-content-between mb-2 p-2 border-round bg-gray-50">
|
|
<span className="text-sm">{criteria.name}</span>
|
|
<div className="flex align-items-center gap-2">
|
|
<Badge value={`${criteria.weight}%`} />
|
|
<Tag
|
|
value={criteria.status}
|
|
severity={
|
|
criteria.status === 'complete' ? 'success' :
|
|
criteria.status === 'incomplete' ? 'danger' : 'warning'
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</TabPanel>
|
|
|
|
<TabPanel header="Analytics" leftIcon="pi pi-chart-bar mr-2">
|
|
<div className="grid">
|
|
<div className="col-12 md:col-8">
|
|
<Card title="Tendances des demandes">
|
|
<Chart type="bar" data={chartData} className="w-full" />
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 md:col-4">
|
|
<Card title="Répartition par secteur">
|
|
<Chart
|
|
type="doughnut"
|
|
data={{
|
|
labels: ['BTP Général', 'Électricité', 'Plomberie', 'Autres'],
|
|
datasets: [{
|
|
data: [45, 25, 20, 10],
|
|
backgroundColor: ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6']
|
|
}]
|
|
}}
|
|
options={{
|
|
plugins: {
|
|
legend: { position: 'bottom' }
|
|
}
|
|
}}
|
|
/>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12">
|
|
<Card title="Activité récente">
|
|
<Timeline
|
|
value={timelineData}
|
|
content={(item) => (
|
|
<div className="flex align-items-center">
|
|
<Badge
|
|
value={item.type}
|
|
severity={
|
|
item.type === 'success' ? 'success' :
|
|
item.type === 'warning' ? 'warning' : 'info'
|
|
}
|
|
className="mr-2"
|
|
/>
|
|
<div>
|
|
<div className="font-bold">{item.event}</div>
|
|
<div className="text-sm text-600">{item.user} - {item.date.toLocaleTimeString()}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
/>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</TabPanel>
|
|
|
|
<TabPanel header="Audit" leftIcon="pi pi-shield mr-2">
|
|
<Card>
|
|
<Terminal
|
|
ref={terminal}
|
|
welcomeMessage="Console d'audit - Tapez 'help' pour les commandes disponibles"
|
|
prompt="audit $"
|
|
className="bg-gray-900 text-white"
|
|
/>
|
|
</Card>
|
|
</TabPanel>
|
|
</TabView>
|
|
|
|
<SpeedDial
|
|
model={bulkActions}
|
|
radius={80}
|
|
type="semi-circle"
|
|
direction="up-left"
|
|
style={{ left: 'calc(50% - 2rem)', bottom: 0 }}
|
|
buttonClassName="p-button-help"
|
|
maskClassName="bg-black-alpha-30"
|
|
visible={selectedDemandes.length > 0}
|
|
/>
|
|
|
|
<OverlayPanel ref={overlayPanel}>
|
|
<div className="flex flex-column gap-2">
|
|
{bulkActions.map((action, index) => (
|
|
<Button
|
|
key={index}
|
|
label={action.label}
|
|
icon={action.icon}
|
|
text
|
|
className="justify-content-start"
|
|
onClick={() => {
|
|
action.command();
|
|
overlayPanel.current?.hide();
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</OverlayPanel>
|
|
|
|
<ContextMenu
|
|
ref={contextMenu}
|
|
model={[
|
|
{ label: 'Voir détails', icon: 'pi pi-eye', command: () => setDetailDialog(true) },
|
|
{ label: 'Approuver', icon: 'pi pi-check', command: () => openValidationDialog(selectedDemande, 'APPROVE') },
|
|
{ label: 'Rejeter', icon: 'pi pi-times', command: () => openValidationDialog(selectedDemande, 'REJECT') },
|
|
{ separator: true },
|
|
{ label: 'Dupliquer', icon: 'pi pi-copy' },
|
|
{ label: 'Exporter', icon: 'pi pi-download' }
|
|
]}
|
|
/>
|
|
|
|
<Sidebar
|
|
visible={sidebarVisible}
|
|
onHide={() => setSidebarVisible(false)}
|
|
position="right"
|
|
className="w-25rem"
|
|
>
|
|
<h3>Configuration avancée</h3>
|
|
|
|
<Accordion multiple>
|
|
<AccordionTab header="Paramètres d'affichage">
|
|
<div className="field">
|
|
<label>Mode d'affichage</label>
|
|
<SelectButton
|
|
value={viewMode}
|
|
options={viewModeOptions}
|
|
onChange={(e) => setViewMode(e.value)}
|
|
optionLabel="label"
|
|
optionValue="value"
|
|
className="w-full mt-2"
|
|
/>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<div className="flex align-items-center gap-2">
|
|
<InputSwitch
|
|
checked={autoRefresh}
|
|
onChange={(e) => setAutoRefresh(e.value)}
|
|
/>
|
|
<label>Auto-refresh</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<label>Intervalle de refresh (secondes)</label>
|
|
<Slider
|
|
value={refreshInterval}
|
|
onChange={(e) => setRefreshInterval(e.value as number)}
|
|
min={10}
|
|
max={300}
|
|
step={10}
|
|
className="w-full mt-2"
|
|
/>
|
|
</div>
|
|
</AccordionTab>
|
|
|
|
<AccordionTab header="Notifications">
|
|
<div className="field">
|
|
<div className="flex align-items-center gap-2 mb-2">
|
|
<Checkbox checked />
|
|
<label>Nouvelles demandes</label>
|
|
</div>
|
|
<div className="flex align-items-center gap-2 mb-2">
|
|
<Checkbox checked />
|
|
<label>Demandes approuvées</label>
|
|
</div>
|
|
<div className="flex align-items-center gap-2">
|
|
<Checkbox checked={false} onChange={() => {}} />
|
|
<label>Demandes en retard</label>
|
|
</div>
|
|
</div>
|
|
</AccordionTab>
|
|
|
|
<AccordionTab header="Validation automatique">
|
|
<div className="field">
|
|
<div className="flex align-items-center gap-2 mb-3">
|
|
<InputSwitch checked={complianceCheck} onChange={(e) => setComplianceCheck(e.value)} />
|
|
<label>Vérification conformité</label>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<label>Seuil de risque</label>
|
|
<Knob
|
|
value={riskScore}
|
|
onChange={(e) => setRiskScore(e.value)}
|
|
min={0}
|
|
max={100}
|
|
size={80}
|
|
className="mt-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</AccordionTab>
|
|
</Accordion>
|
|
</Sidebar>
|
|
|
|
<ScrollTop threshold={600} className="w-3rem h-3rem border-round bg-primary" />
|
|
|
|
{/* Dialog de détails ultra-avancé */}
|
|
<Dialog
|
|
visible={detailDialog}
|
|
onHide={() => setDetailDialog(false)}
|
|
header={(
|
|
<div className="flex align-items-center gap-3">
|
|
<Avatar
|
|
label={selectedDemande?.prenom?.charAt(0) + selectedDemande?.nom?.charAt(0)}
|
|
size="large"
|
|
style={{ backgroundColor: '#3B82F6', color: 'white' }}
|
|
/>
|
|
<div>
|
|
<div className="text-lg font-bold">Détails de la demande d'accès</div>
|
|
<div className="text-sm text-600">
|
|
{selectedDemande?.entreprise} - {selectedDemande?.secteurActivite}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
style={{ width: '95vw', maxWidth: '1200px', height: '90vh' }}
|
|
modal
|
|
maximizable
|
|
>
|
|
{selectedDemande && (
|
|
<Splitter style={{ height: '70vh' }}>
|
|
<SplitterPanel size={70}>
|
|
<ScrollPanel style={{ width: '100%', height: '100%' }}>
|
|
<TabView>
|
|
<TabPanel header="Informations générales" leftIcon="pi pi-user mr-2">
|
|
<div className="grid">
|
|
<div className="col-12 md:col-6">
|
|
<Fieldset legend="Contact">
|
|
<div className="grid">
|
|
<div className="col-6">
|
|
<div className="field">
|
|
<label className="font-bold text-sm">Prénom</label>
|
|
<InputText value={selectedDemande.prenom} disabled className="w-full" />
|
|
</div>
|
|
</div>
|
|
<div className="col-6">
|
|
<div className="field">
|
|
<label className="font-bold text-sm">Nom</label>
|
|
<InputText value={selectedDemande.nom} disabled className="w-full" />
|
|
</div>
|
|
</div>
|
|
<div className="col-12">
|
|
<div className="field">
|
|
<label className="font-bold text-sm">Email</label>
|
|
<InputText value={selectedDemande.email} disabled className="w-full" />
|
|
</div>
|
|
</div>
|
|
<div className="col-12">
|
|
<div className="field">
|
|
<label className="font-bold text-sm">Téléphone</label>
|
|
<InputText value={selectedDemande.telephone} disabled className="w-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Fieldset>
|
|
</div>
|
|
|
|
<div className="col-12 md:col-6">
|
|
<Fieldset legend="Entreprise">
|
|
<div className="grid">
|
|
<div className="col-12">
|
|
<div className="field">
|
|
<label className="font-bold text-sm">Raison sociale</label>
|
|
<InputText value={selectedDemande.entreprise} disabled className="w-full" />
|
|
</div>
|
|
</div>
|
|
<div className="col-8">
|
|
<div className="field">
|
|
<label className="font-bold text-sm">SIRET</label>
|
|
<InputText value={selectedDemande.siret} disabled className="w-full" />
|
|
</div>
|
|
</div>
|
|
<div className="col-4">
|
|
<div className="field">
|
|
<label className="font-bold text-sm">Effectif</label>
|
|
<InputNumber value={selectedDemande.effectif} disabled className="w-full" />
|
|
</div>
|
|
</div>
|
|
<div className="col-12">
|
|
<div className="field">
|
|
<label className="font-bold text-sm">Secteur d'activité</label>
|
|
<InputText value={selectedDemande.secteurActivite} disabled className="w-full" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Fieldset>
|
|
</div>
|
|
</div>
|
|
</TabPanel>
|
|
|
|
<TabPanel header="Documents" leftIcon="pi pi-file mr-2">
|
|
<div className="grid">
|
|
<div className="col-12">
|
|
<Card title="État des documents">
|
|
<div className="grid">
|
|
<div className="col-12 md:col-3">
|
|
<div className="text-center p-3 border-round bg-gray-50">
|
|
<i className={`pi ${selectedDemande.kbisUploade ? 'pi-check-circle text-green-500' : 'pi-times-circle text-red-500'} text-4xl mb-2`}></i>
|
|
<div className="font-bold">KBIS</div>
|
|
<Tag
|
|
value={selectedDemande.kbisUploade ? 'Fourni' : 'Manquant'}
|
|
severity={selectedDemande.kbisUploade ? 'success' : 'danger'}
|
|
className="mt-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 md:col-3">
|
|
<div className="text-center p-3 border-round bg-gray-50">
|
|
<i className={`pi ${selectedDemande.assuranceRCUploade ? 'pi-check-circle text-green-500' : 'pi-times-circle text-red-500'} text-4xl mb-2`}></i>
|
|
<div className="font-bold">Assurance RC</div>
|
|
<Tag
|
|
value={selectedDemande.assuranceRCUploade ? 'Fournie' : 'Manquante'}
|
|
severity={selectedDemande.assuranceRCUploade ? 'success' : 'danger'}
|
|
className="mt-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 md:col-3">
|
|
<div className="text-center p-3 border-round bg-gray-50">
|
|
<i className={`pi ${selectedDemande.assuranceDecennaleUploade ? 'pi-check-circle text-green-500' : 'pi-times-circle text-red-500'} text-4xl mb-2`}></i>
|
|
<div className="font-bold">Décennale</div>
|
|
<Tag
|
|
value={selectedDemande.assuranceDecennaleUploade ? 'Fournie' : 'Manquante'}
|
|
severity={selectedDemande.assuranceDecennaleUploade ? 'success' : 'danger'}
|
|
className="mt-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-12 md:col-3">
|
|
<div className="text-center p-3 border-round bg-gray-50">
|
|
<i className={`pi ${selectedDemande.attestationUrssafUploade ? 'pi-check-circle text-green-500' : 'pi-times-circle text-red-500'} text-4xl mb-2`}></i>
|
|
<div className="font-bold">URSSAF</div>
|
|
<Tag
|
|
value={selectedDemande.attestationUrssafUploade ? 'Fournie' : 'Manquante'}
|
|
severity={selectedDemande.attestationUrssafUploade ? 'success' : 'danger'}
|
|
className="mt-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Divider />
|
|
|
|
<div className="flex align-items-center justify-content-between">
|
|
<div>
|
|
<label className="font-bold">Progression globale</label>
|
|
<div className="text-sm text-600">Complétude du dossier</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<Knob
|
|
value={selectedDemande.pourcentageCompletion || 0}
|
|
readOnly
|
|
size={60}
|
|
strokeWidth={8}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</TabPanel>
|
|
|
|
<TabPanel header="Historique" leftIcon="pi pi-history mr-2">
|
|
<Timeline
|
|
value={[
|
|
{ date: selectedDemande.dateCreation, event: 'Demande soumise', status: 'info' },
|
|
{ date: selectedDemande.dateModification, event: 'Documents vérifiés', status: 'success' },
|
|
{ date: selectedDemande.dateTraitement, event: 'En cours de validation', status: 'warning' }
|
|
].filter(item => item.date)}
|
|
content={(item) => (
|
|
<div className="flex align-items-center">
|
|
<Badge
|
|
value={item.status}
|
|
severity={item.status === 'success' ? 'success' : item.status === 'warning' ? 'warning' : 'info'}
|
|
className="mr-2"
|
|
/>
|
|
<div>
|
|
<div className="font-bold">{item.event}</div>
|
|
<div className="text-sm text-600">{new Date(item.date).toLocaleString('fr-FR')}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
/>
|
|
</TabPanel>
|
|
|
|
<TabPanel header="Analyse" leftIcon="pi pi-chart-line mr-2">
|
|
<div className="grid">
|
|
<div className="col-12 md:col-6">
|
|
<Card title="Score de conformité">
|
|
<div className="text-center">
|
|
<Rating
|
|
value={4}
|
|
readOnly
|
|
stars={5}
|
|
className="mb-3"
|
|
/>
|
|
<div className="text-lg font-bold text-green-600">Excellent</div>
|
|
<div className="text-sm text-600">Toutes les exigences sont respectées</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
<div className="col-12 md:col-6">
|
|
<Card title="Recommandations IA">
|
|
<div className="flex flex-column gap-2">
|
|
<Message
|
|
severity="success"
|
|
text="Dossier complet - Approbation recommandée"
|
|
className="w-full"
|
|
/>
|
|
<Message
|
|
severity="info"
|
|
text="Entreprise avec historique positif"
|
|
className="w-full"
|
|
/>
|
|
<Message
|
|
severity="warn"
|
|
text="Vérifier la validité des assurances"
|
|
className="w-full"
|
|
/>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</TabPanel>
|
|
</TabView>
|
|
</ScrollPanel>
|
|
</SplitterPanel>
|
|
|
|
<SplitterPanel size={30}>
|
|
<ScrollPanel style={{ width: '100%', height: '100%' }}>
|
|
<div className="p-3">
|
|
<h6>Actions rapides</h6>
|
|
|
|
<div className="flex flex-column gap-2 mb-4">
|
|
<Button
|
|
label="Approuver"
|
|
icon="pi pi-check"
|
|
severity="success"
|
|
className="w-full"
|
|
onClick={() => openValidationDialog(selectedDemande, 'APPROVE')}
|
|
/>
|
|
<Button
|
|
label="Rejeter"
|
|
icon="pi pi-times"
|
|
severity="danger"
|
|
className="w-full"
|
|
onClick={() => openValidationDialog(selectedDemande, 'REJECT')}
|
|
/>
|
|
<Button
|
|
label="Demander complément"
|
|
icon="pi pi-exclamation-triangle"
|
|
severity="warning"
|
|
className="w-full"
|
|
outlined
|
|
/>
|
|
<Button
|
|
label="Programmer entretien"
|
|
icon="pi pi-calendar"
|
|
className="w-full"
|
|
outlined
|
|
/>
|
|
</div>
|
|
|
|
<Divider />
|
|
|
|
<h6>Informations système</h6>
|
|
<div className="text-sm text-600 mb-2">
|
|
<div><strong>ID:</strong> {selectedDemande.id}</div>
|
|
<div><strong>Créée le:</strong> {new Date(selectedDemande.dateCreation).toLocaleDateString('fr-FR')}</div>
|
|
<div><strong>Statut:</strong> {getStatusLabel(selectedDemande.status)}</div>
|
|
{selectedDemande.validateurNom && (
|
|
<div><strong>Validateur:</strong> {selectedDemande.validateurNom}</div>
|
|
)}
|
|
</div>
|
|
|
|
<Divider />
|
|
|
|
{selectedDemande.commentaireDemandeur && (
|
|
<div className="mb-3">
|
|
<h6>Commentaire demandeur</h6>
|
|
<Panel>
|
|
<p className="text-sm">{selectedDemande.commentaireDemandeur}</p>
|
|
</Panel>
|
|
</div>
|
|
)}
|
|
|
|
{selectedDemande.commentaireAdmin && (
|
|
<div>
|
|
<h6>Commentaire admin</h6>
|
|
<Panel>
|
|
<p className="text-sm">{selectedDemande.commentaireAdmin}</p>
|
|
{selectedDemande.validateurNom && (
|
|
<div className="text-xs text-500 mt-2">Par: {selectedDemande.validateurNom}</div>
|
|
)}
|
|
</Panel>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ScrollPanel>
|
|
</SplitterPanel>
|
|
</Splitter>
|
|
)}
|
|
</Dialog>
|
|
|
|
{/* Dialog de validation amélioré */}
|
|
<Dialog
|
|
visible={validationDialog}
|
|
onHide={() => setValidationDialog(false)}
|
|
header={(
|
|
<div className="flex align-items-center gap-2">
|
|
<i className={`pi ${actionType === 'APPROVE' ? 'pi-check text-green-500' : 'pi-times text-red-500'} text-xl`} />
|
|
<span>{actionType === 'APPROVE' ? 'Approuver' : 'Rejeter'} la demande</span>
|
|
</div>
|
|
)}
|
|
style={{ width: '500px' }}
|
|
modal
|
|
>
|
|
<div className="formgrid grid">
|
|
<div className="field col-12">
|
|
<Message
|
|
severity={actionType === 'APPROVE' ? 'success' : 'warn'}
|
|
text={actionType === 'APPROVE'
|
|
? 'Cette action accordera l\'accès à l\'entreprise'
|
|
: 'Cette action refusera définitivement l\'accès'}
|
|
className="w-full mb-3"
|
|
/>
|
|
</div>
|
|
|
|
<div className="field col-12">
|
|
<label htmlFor="commentaire" className="font-bold">
|
|
Commentaire {actionType === 'REJECT' ? '(obligatoire)' : ''}
|
|
</label>
|
|
<InputTextarea
|
|
id="commentaire"
|
|
value={commentaire}
|
|
onChange={(e) => setCommentaire(e.target.value)}
|
|
rows={4}
|
|
placeholder={actionType === 'APPROVE'
|
|
? 'Commentaire d\'approbation...'
|
|
: 'Motif du rejet...'
|
|
}
|
|
className="w-full"
|
|
autoResize
|
|
/>
|
|
</div>
|
|
|
|
{actionType === 'APPROVE' && (
|
|
<div className="field col-12">
|
|
<div className="flex align-items-center gap-2">
|
|
<Checkbox checked />
|
|
<label className="text-sm">Envoyer un email de bienvenue</label>
|
|
</div>
|
|
<div className="flex align-items-center gap-2 mt-2">
|
|
<Checkbox checked={false} onChange={() => {}} />
|
|
<label className="text-sm">Programmer une formation</label>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex justify-content-end gap-2 mt-4">
|
|
<Button
|
|
label="Annuler"
|
|
icon="pi pi-times"
|
|
outlined
|
|
onClick={() => setValidationDialog(false)}
|
|
/>
|
|
<Button
|
|
label={actionType === 'APPROVE' ? 'Approuver' : 'Rejeter'}
|
|
icon={actionType === 'APPROVE' ? 'pi pi-check' : 'pi pi-times'}
|
|
severity={actionType === 'APPROVE' ? 'success' : 'danger'}
|
|
onClick={handleValidation}
|
|
loading={loading}
|
|
/>
|
|
</div>
|
|
</Dialog>
|
|
</BlockUI>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DemandesAccesAdmin;
|
|
|
|
// Styles CSS personnalisés pour l'interface ultra-professionnelle
|
|
const customStyles = `
|
|
.access-requests-management .p-tabview-nav {
|
|
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 10px 10px 0 0;
|
|
}
|
|
|
|
.access-requests-management .p-tabview-nav li .p-tabview-nav-link {
|
|
color: white;
|
|
border: none;
|
|
}
|
|
|
|
.access-requests-management .p-tabview-nav li.p-highlight .p-tabview-nav-link {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: 8px;
|
|
margin: 4px;
|
|
}
|
|
|
|
.view-mode-selector .p-button {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
}
|
|
|
|
.view-mode-selector .p-button.p-highlight {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
.p-datatable-striped .p-datatable-tbody > tr:nth-child(odd) {
|
|
background: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.p-datatable .p-datatable-tbody > tr:hover {
|
|
background: rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.hover\\:shadow-lg:hover {
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.transition-shadow {
|
|
transition: box-shadow 0.3s ease;
|
|
}
|
|
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.bg-gradient-to-r {
|
|
background: linear-gradient(90deg, var(--tw-gradient-stops));
|
|
}
|
|
|
|
.from-blue-500 {
|
|
--tw-gradient-from: #3b82f6;
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
|
|
}
|
|
|
|
.to-purple-600 {
|
|
--tw-gradient-to: #9333ea;
|
|
}
|
|
|
|
.from-orange-500 {
|
|
--tw-gradient-from: #f97316;
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 115, 22, 0));
|
|
}
|
|
|
|
.to-orange-600 {
|
|
--tw-gradient-to: #ea580c;
|
|
}
|
|
|
|
.from-green-500 {
|
|
--tw-gradient-from: #22c55e;
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 197, 94, 0));
|
|
}
|
|
|
|
.to-green-600 {
|
|
--tw-gradient-to: #16a34a;
|
|
}
|
|
|
|
.from-purple-500 {
|
|
--tw-gradient-from: #a855f7;
|
|
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168, 85, 247, 0));
|
|
}
|
|
|
|
.to-purple-600 {
|
|
--tw-gradient-to: #9333ea;
|
|
}
|
|
`;
|
|
|
|
// Injection du style dans le document
|
|
if (typeof document !== 'undefined') {
|
|
const style = document.createElement('style');
|
|
style.textContent = customStyles;
|
|
document.head.appendChild(style);
|
|
}
|
|
|
|
|