470 lines
31 KiB
HTML
470 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
|
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
|
xmlns:f="http://xmlns.jcp.org/jsf/core"
|
|
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
|
xmlns:p="http://primefaces.org/ui"
|
|
template="/templates/main-template.xhtml">
|
|
|
|
<ui:define name="title">Dashboard Super-Administrateur - UnionFlow</ui:define>
|
|
|
|
<ui:define name="content">
|
|
<div class="ui-fluid">
|
|
<!-- En-tête principal avec disposition Freya stricte -->
|
|
<div class="card">
|
|
<div class="formgrid grid">
|
|
<div class="field col-12 lg:col-8">
|
|
<h2 class="text-primary font-bold mb-2">
|
|
<i class="pi pi-crown text-yellow-500 mr-2"></i>
|
|
Tableau de bord Super-Administrateur
|
|
</h2>
|
|
<p class="text-600 mt-0">
|
|
Vue globale de la plateforme UnionFlow •
|
|
<span class="font-semibold">#{superAdminBean.totalEntites} organisations</span> •
|
|
<span class="font-semibold text-green-600">#{superAdminBean.totalMembres} membres actifs</span>
|
|
</p>
|
|
</div>
|
|
<div class="field col-12 lg:col-4 text-right">
|
|
<div class="text-900 font-bold text-lg">#{superAdminBean.nomComplet}</div>
|
|
<div class="text-500 text-sm">Dernière connexion: #{superAdminBean.derniereConnexion}</div>
|
|
<h:form id="formActionsRapidesHeader" styleClass="mt-2">
|
|
<p:commandButton icon="pi pi-plus"
|
|
title="Nouvelle organisation"
|
|
styleClass="ui-button-success ui-button-sm mr-3"
|
|
action="#{superAdminBean.creerEntite}" />
|
|
<p:commandButton icon="pi pi-chart-bar"
|
|
title="Rapport global"
|
|
styleClass="ui-button-info ui-button-outlined ui-button-sm mr-3"
|
|
action="#{superAdminBean.genererRapport}" />
|
|
<p:commandButton icon="pi pi-cog"
|
|
title="Configuration"
|
|
styleClass="ui-button-secondary ui-button-outlined ui-button-sm"
|
|
action="#{superAdminBean.configurer}" />
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPIs Principaux avec grille Freya stricte et alignement parfait -->
|
|
<div class="formgrid grid">
|
|
<!-- KPI 1: Membres Actifs -->
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="Membres Actifs" />
|
|
<ui:param name="value" value="#{superAdminBean.totalMembres}" />
|
|
<ui:param name="icon" value="pi-users" />
|
|
<ui:param name="iconColor" value="blue-600" />
|
|
<ui:param name="growthValue" value="#{superAdminBean.croissanceMembres}" />
|
|
<ui:param name="growthLabel" value="ce mois" />
|
|
<ui:param name="progressValue" value="#{superAdminBean.pourcentageMembres}" />
|
|
</ui:include>
|
|
|
|
<!-- KPI 2: Organisations -->
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="Organisations" />
|
|
<ui:param name="value" value="#{superAdminBean.totalEntites}" />
|
|
<ui:param name="icon" value="pi-sitemap" />
|
|
<ui:param name="iconColor" value="green-600" />
|
|
<ui:param name="growthValue" value="#{superAdminBean.nouvellesEntites}" />
|
|
<ui:param name="growthLabel" value="nouvelles" />
|
|
<ui:param name="growthType" value="number" />
|
|
<ui:param name="noDataLabel" value="Aucune nouvelle entité ce mois" />
|
|
<ui:param name="progressValue" value="#{superAdminBean.pourcentageOrganisations}" />
|
|
</ui:include>
|
|
|
|
<!-- KPI 3: Revenus Globaux -->
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="Revenus (FCFA)" />
|
|
<ui:param name="value" value="#{superAdminBean.revenusGlobaux}" />
|
|
<ui:param name="icon" value="pi-dollar" />
|
|
<ui:param name="iconColor" value="purple-600" />
|
|
<ui:param name="growthValue" value="#{superAdminBean.croissanceRevenus}" />
|
|
<ui:param name="growthLabel" value="vs mois dernier" />
|
|
<ui:param name="progressValue" value="#{superAdminBean.pourcentageRevenus}" />
|
|
</ui:include>
|
|
|
|
<!-- KPI 4: Activité du Jour -->
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="Activité du Jour" />
|
|
<ui:param name="value" value="#{superAdminBean.activiteJournaliere}" />
|
|
<ui:param name="icon" value="pi-chart-line" />
|
|
<ui:param name="iconColor" value="orange-600" />
|
|
<ui:param name="statusIcon" value="pi-check-circle" />
|
|
<ui:param name="statusLabel" value="En ligne" />
|
|
<ui:param name="statusValue" value="#{superAdminBean.utilisateursActifs} actifs" />
|
|
<ui:param name="progressValue" value="#{superAdminBean.pourcentageActivite}" />
|
|
</ui:include>
|
|
</div>
|
|
|
|
<!-- Section Analytics et Actions avec disposition Freya stricte -->
|
|
<div class="formgrid grid">
|
|
<!-- Actions Rapides -->
|
|
<div class="field col-12 lg:col-6">
|
|
<div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
|
|
<div class="p-4">
|
|
<h5 class="text-900 font-bold mb-4">
|
|
<i class="pi pi-bolt text-orange-500 mr-2"></i>
|
|
Actions Rapides
|
|
</h5>
|
|
<h:form id="formActionsRapides">
|
|
<div class="formgrid grid">
|
|
<div class="field col-12 md:col-6">
|
|
<p:commandButton value="Nouvelle Entité"
|
|
icon="pi pi-plus"
|
|
styleClass="ui-button-success ui-button-outlined ui-button-sm w-full"
|
|
action="#{superAdminBean.creerEntite}" />
|
|
</div>
|
|
<div class="field col-12 md:col-6">
|
|
<p:commandButton value="Gestion Entités"
|
|
icon="pi pi-building"
|
|
styleClass="ui-button-info ui-button-outlined ui-button-sm w-full"
|
|
action="#{superAdminBean.gererEntites}" />
|
|
</div>
|
|
<div class="field col-12 md:col-6">
|
|
<p:commandButton value="Rapport Global"
|
|
icon="pi pi-chart-bar"
|
|
styleClass="ui-button-warning ui-button-outlined ui-button-sm w-full"
|
|
action="#{superAdminBean.genererRapport}" />
|
|
</div>
|
|
<div class="field col-12 md:col-6">
|
|
<p:commandButton value="Configuration"
|
|
icon="pi pi-cog"
|
|
styleClass="ui-button-secondary ui-button-outlined ui-button-sm w-full"
|
|
action="#{superAdminBean.configurer}" />
|
|
</div>
|
|
<div class="field col-12 md:col-6">
|
|
<p:commandButton value="Audit Système"
|
|
icon="pi pi-shield"
|
|
styleClass="ui-button-danger ui-button-outlined ui-button-sm w-full"
|
|
action="#{superAdminBean.auditSysteme}" />
|
|
</div>
|
|
<div class="field col-12 md:col-6">
|
|
<p:commandButton value="Backup"
|
|
icon="pi pi-save"
|
|
styleClass="ui-button-primary ui-button-outlined ui-button-sm w-full"
|
|
action="#{superAdminBean.backup}" />
|
|
</div>
|
|
</div>
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alertes Système -->
|
|
<div class="field col-12 lg:col-6">
|
|
<div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
|
|
<div class="p-4">
|
|
<div class="flex align-items-center justify-content-between mb-4">
|
|
<h5 class="text-900 font-bold m-0">
|
|
<i class="pi pi-exclamation-triangle text-orange-500 mr-2"></i>
|
|
Alertes Système
|
|
</h5>
|
|
<p:tag value="#{superAdminBean.alertesCount} alertes"
|
|
severity="warning" styleClass="text-xs" />
|
|
</div>
|
|
|
|
<div class="surface-100 border-round-lg p-3 mb-3">
|
|
<div class="flex align-items-center">
|
|
<i class="pi pi-info-circle text-blue-500 mr-2"></i>
|
|
<span class="text-600 text-sm">#{superAdminBean.alertesCount} alertes nécessitent votre attention</span>
|
|
</div>
|
|
</div>
|
|
|
|
<ui:repeat value="#{superAdminBean.alertesRecentes}" var="alerte">
|
|
<div class="surface-100 border-round-lg p-3 mb-3 hover:surface-200 transition-colors transition-duration-150">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="flex align-items-center">
|
|
<i class="pi #{alerte.icone} #{alerte.couleur} mr-3 text-lg"></i>
|
|
<div>
|
|
<div class="text-900 font-medium">#{alerte.titre}</div>
|
|
<div class="text-500 text-xs">#{alerte.entite} • #{alerte.date}</div>
|
|
</div>
|
|
</div>
|
|
<h:form id="formAlerte#{alerte.id}">
|
|
<p:commandButton icon="pi pi-eye"
|
|
styleClass="ui-button-rounded ui-button-text ui-button-info ui-button-sm"
|
|
action="#{superAdminBean.voirAlerte(alerte)}"
|
|
title="Voir détails" />
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
|
|
<div class="text-center mt-3">
|
|
<h:form id="formVoirToutesAlertes">
|
|
<p:commandButton value="Voir toutes les alertes"
|
|
icon="pi pi-arrow-right"
|
|
styleClass="ui-button-link ui-button-sm"
|
|
action="#{superAdminBean.voirToutesAlertes}" />
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section Évolution et Top Entités avec Freya stricte -->
|
|
<div class="formgrid grid">
|
|
<!-- Évolution des Entités -->
|
|
<div class="field col-12 lg:col-8">
|
|
<div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
|
|
<div class="p-4">
|
|
<div class="flex align-items-center justify-content-between mb-4">
|
|
<h5 class="text-900 font-bold m-0">
|
|
<i class="pi pi-chart-bar text-blue-500 mr-2"></i>
|
|
Évolution des Entités
|
|
</h5>
|
|
<p:selectOneMenu value="#{superAdminBean.periodeEvolution}" styleClass="w-8rem">
|
|
<f:selectItem itemLabel="6 mois" itemValue="6M" />
|
|
<f:selectItem itemLabel="12 mois" itemValue="12M" />
|
|
<f:selectItem itemLabel="24 mois" itemValue="24M" />
|
|
</p:selectOneMenu>
|
|
</div>
|
|
|
|
<div class="surface-100 border-round-lg p-4">
|
|
<div class="flex align-items-end justify-content-around" style="height: 150px;">
|
|
<ui:repeat value="#{superAdminBean.evolutionEntites}" var="mois">
|
|
<div class="flex flex-column align-items-center" style="width: 100%;">
|
|
<div class="text-500 text-xs mb-1">#{mois.valeur}</div>
|
|
<div class="bg-primary border-round"
|
|
style="width: 40px; height: #{mois.hauteur}px; min-height: 20px;"></div>
|
|
<div class="text-500 text-xs mt-2">#{mois.periode}</div>
|
|
</div>
|
|
</ui:repeat>
|
|
</div>
|
|
<div class="flex align-items-center justify-content-between mt-3 pt-3 border-top-1 surface-border">
|
|
<div class="flex align-items-center">
|
|
<i class="pi pi-arrow-up text-green-500 mr-2"></i>
|
|
<span class="text-green-600 font-semibold">+#{superAdminBean.croissanceEntites}%</span>
|
|
<span class="text-500 text-sm ml-2">ce mois</span>
|
|
</div>
|
|
<div class="text-600 text-sm">
|
|
Total: <span class="font-semibold">#{superAdminBean.totalEntites}</span> entités
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top Entités -->
|
|
<div class="field col-12 lg:col-4">
|
|
<div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
|
|
<div class="p-4">
|
|
<h5 class="text-900 font-bold mb-4">
|
|
<i class="pi pi-trophy text-yellow-500 mr-2"></i>
|
|
Top 5 Entités
|
|
</h5>
|
|
|
|
<ui:repeat value="#{superAdminBean.topEntites}" var="entite" varStatus="status">
|
|
<div class="surface-100 border-round-lg p-3 mb-3 hover:surface-200 transition-colors transition-duration-150">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="flex align-items-center">
|
|
<div class="flex align-items-center justify-content-center surface-200 border-circle mr-3"
|
|
style="width: 2rem; height: 2rem;">
|
|
<span class="text-primary font-bold">#{status.index + 1}</span>
|
|
</div>
|
|
<div>
|
|
<div class="text-900 font-medium">#{entite.nom}</div>
|
|
<div class="text-500 text-xs">#{entite.typeEntite}</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-900 font-bold">#{entite.nombreMembres}</div>
|
|
<div class="text-500 text-xs">membres</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Section Répartition et Activité avec Freya stricte -->
|
|
<div class="formgrid grid">
|
|
<!-- Répartition par Type -->
|
|
<div class="field col-12 lg:col-6">
|
|
<div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
|
|
<div class="p-4">
|
|
<h5 class="text-900 font-bold mb-4">
|
|
<i class="pi pi-chart-pie text-purple-500 mr-2"></i>
|
|
Répartition par Type
|
|
</h5>
|
|
|
|
<ui:repeat value="#{superAdminBean.repartitionTypes}" var="type">
|
|
<div class="surface-100 border-round-lg p-3 mb-3 hover:surface-200 transition-colors transition-duration-150">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="flex align-items-center">
|
|
<div class="flex align-items-center justify-content-center #{type.couleurBg} border-round-lg mr-3"
|
|
style="width: 2.5rem; height: 2.5rem;">
|
|
<i class="pi #{type.icone} #{type.couleurTexte}"></i>
|
|
</div>
|
|
<div>
|
|
<div class="text-900 font-medium">#{type.nom}</div>
|
|
<div class="text-500 text-xs">#{type.description}</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-900 font-bold text-lg">#{type.nombre}</div>
|
|
<p:tag value="#{type.pourcentage}%" severity="info" styleClass="text-xs" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
|
|
<!-- Barre de progression globale -->
|
|
<div class="surface-100 border-round-lg p-3 mt-3">
|
|
<div class="flex align-items-center justify-content-between mb-2">
|
|
<span class="text-600 font-medium text-sm">Répartition globale</span>
|
|
<span class="text-900 font-semibold">#{superAdminBean.totalEntites} entités</span>
|
|
</div>
|
|
<div class="flex border-round overflow-hidden" style="height: 8px;">
|
|
<ui:repeat value="#{superAdminBean.repartitionTypes}" var="type">
|
|
<div class="#{type.couleurBg}"
|
|
style="width: #{type.pourcentage}%; height: 100%;"></div>
|
|
</ui:repeat>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Activité Récente (Timeline) -->
|
|
<div class="field col-12 lg:col-6">
|
|
<div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
|
|
<div class="p-4">
|
|
<h5 class="text-900 font-bold mb-4">
|
|
<i class="pi pi-history text-teal-500 mr-2"></i>
|
|
Activité Récente
|
|
</h5>
|
|
|
|
<div style="max-height: 400px; overflow-y: auto;">
|
|
<ui:repeat value="#{superAdminBean.activitesRecentes}" var="activite" varStatus="status">
|
|
<div class="flex mb-3">
|
|
<!-- Timeline -->
|
|
<div class="flex flex-column align-items-center mr-3" style="min-width: 40px;">
|
|
<div class="flex align-items-center justify-content-center surface-200 border-circle"
|
|
style="width: 2rem; height: 2rem;">
|
|
<i class="pi #{activite.icone} text-primary text-sm"></i>
|
|
</div>
|
|
<div class="surface-300" style="width: 2px; flex: 1; margin-top: 0.5rem;"
|
|
rendered="#{!status.last}"></div>
|
|
</div>
|
|
|
|
<!-- Contenu -->
|
|
<div class="flex-1">
|
|
<div class="surface-100 border-round-lg p-3">
|
|
<div class="flex align-items-center justify-content-between mb-2">
|
|
<span class="text-900 font-medium text-sm">#{activite.description}</span>
|
|
<span class="text-500 text-xs">#{activite.date}</span>
|
|
</div>
|
|
<div class="text-600 text-xs mb-1">#{activite.entite}</div>
|
|
<div class="text-700 text-xs" rendered="#{activite.details != null}">
|
|
#{activite.details}
|
|
</div>
|
|
<div class="flex align-items-center mt-2" rendered="#{activite.utilisateur != null}">
|
|
<div class="surface-300 border-circle mr-2" style="width: 1.5rem; height: 1.5rem;"></div>
|
|
<span class="text-500 text-xs">Par #{activite.utilisateur}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
</div>
|
|
|
|
<div class="text-center mt-3 pt-3 border-top-1 surface-border">
|
|
<h:form id="formVoirTouteActivite">
|
|
<p:commandButton value="Voir toute l'activité"
|
|
icon="pi pi-arrow-right"
|
|
styleClass="ui-button-link ui-button-sm"
|
|
action="#{superAdminBean.voirTouteActivite}" />
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Performance Financière Globale avec Freya stricte -->
|
|
<div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
|
|
<div class="p-4">
|
|
<h5 class="text-900 font-bold mb-4">
|
|
<i class="pi pi-dollar text-green-500 mr-2"></i>
|
|
Performance Financière Globale
|
|
</h5>
|
|
|
|
<div class="formgrid grid">
|
|
<div class="field col-12 md:col-6 lg:col-3">
|
|
<div class="surface-100 border-round-lg p-4 text-center hover:surface-200 transition-colors transition-duration-150">
|
|
<div class="text-500 text-sm mb-2">Revenus Ce Mois</div>
|
|
<div class="text-900 font-bold text-2xl mb-2">#{superAdminBean.revenus.mensuel}</div>
|
|
<div class="flex align-items-center justify-content-center">
|
|
<i class="pi pi-arrow-up text-green-500 text-xs mr-2"></i>
|
|
<span class="text-green-600 text-sm">+#{superAdminBean.revenus.croissanceMensuelle}%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field col-12 md:col-6 lg:col-3">
|
|
<div class="surface-100 border-round-lg p-4 text-center hover:surface-200 transition-colors transition-duration-150">
|
|
<div class="text-500 text-sm mb-2">Revenus Annuels</div>
|
|
<div class="text-900 font-bold text-2xl mb-2">#{superAdminBean.revenus.annuel}</div>
|
|
<div class="text-600 text-xs">
|
|
Objectif: #{superAdminBean.revenus.objectifAnnuel}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field col-12 md:col-6 lg:col-3">
|
|
<div class="surface-100 border-round-lg p-4 text-center hover:surface-200 transition-colors transition-duration-150">
|
|
<div class="text-500 text-sm mb-2">Croissance Annuelle</div>
|
|
<div class="text-900 font-bold text-2xl mb-2">#{superAdminBean.revenus.croissance}%</div>
|
|
<div class="flex align-items-center justify-content-center">
|
|
<i class="pi pi-trending-up text-orange-500 text-xs mr-2"></i>
|
|
<span class="text-orange-600 text-sm">Tendance positive</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="field col-12 md:col-6 lg:col-3">
|
|
<div class="surface-100 border-round-lg p-4 text-center hover:surface-200 transition-colors transition-duration-150">
|
|
<div class="text-500 text-sm mb-2">Revenu Moyen/Entité</div>
|
|
<div class="text-900 font-bold text-2xl mb-2">#{superAdminBean.revenus.moyenne}</div>
|
|
<div class="text-600 text-xs">
|
|
Sur #{superAdminBean.totalEntites} entités
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Graphique de revenus -->
|
|
<div class="surface-100 border-round-lg p-4 mt-3">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<span class="text-600 font-medium">Évolution des revenus (6 derniers mois)</span>
|
|
<h:form id="formExportFinancier">
|
|
<p:commandButton icon="pi pi-download"
|
|
title="Exporter"
|
|
styleClass="ui-button-secondary ui-button-outlined ui-button-sm"
|
|
action="#{superAdminBean.exporterRapportFinancier}" />
|
|
</h:form>
|
|
</div>
|
|
<div class="flex align-items-end justify-content-around" style="height: 120px;">
|
|
<ui:repeat value="#{superAdminBean.revenus.evolution}" var="mois">
|
|
<div class="flex flex-column align-items-center" style="width: 100%;">
|
|
<div class="text-500 text-xs mb-1">#{mois.valeur}</div>
|
|
<div class="bg-green-500 border-round"
|
|
style="width: 30px; height: #{mois.hauteur}px; min-height: 20px;"></div>
|
|
<div class="text-500 text-xs mt-2">#{mois.nom}</div>
|
|
</div>
|
|
</ui:repeat>
|
|
</div>
|
|
<div class="text-500 text-xs text-right mt-2">
|
|
<i class="pi pi-calendar mr-1"></i>
|
|
Dernière mise à jour: #{superAdminBean.revenus.derniereMAJ}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ui:define>
|
|
</ui:composition> |