375 lines
21 KiB
HTML
375 lines
21 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 Enhanced - UnionFlow</ui:define>
|
|
|
|
<ui:define name="head">
|
|
<style>
|
|
.metric-card {
|
|
transition: transform 0.2s ease;
|
|
}
|
|
.metric-card:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.revenue-breakdown {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
border-radius: 12px;
|
|
color: white;
|
|
}
|
|
|
|
.system-health {
|
|
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
|
border-radius: 12px;
|
|
color: white;
|
|
}
|
|
|
|
.subscription-stats {
|
|
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
|
border-radius: 12px;
|
|
color: white;
|
|
}
|
|
|
|
.alert-critical { border-left: 4px solid #ef4444; }
|
|
.alert-warning { border-left: 4px solid #f59e0b; }
|
|
.alert-success { border-left: 4px solid #10b981; }
|
|
.alert-info { border-left: 4px solid #3b82f6; }
|
|
</style>
|
|
</ui:define>
|
|
|
|
<ui:define name="content">
|
|
<div class="grid">
|
|
<!-- En-tête avec informations utilisateur -->
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div>
|
|
<h3 class="mb-2">
|
|
<i class="pi pi-crown text-yellow-500 mr-2"></i>
|
|
Dashboard Super-Administrateur
|
|
</h3>
|
|
<p class="text-600 m-0">Vue globale de la plateforme UnionFlow - Stratégie Volume</p>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-900 font-medium">#{superAdminBean.nomComplet}</div>
|
|
<small class="text-600">Dernière connexion: #{superAdminBean.derniereConnexion}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPIs Principaux - Ordre psychologique optimal -->
|
|
<!-- 1. MEMBRES : Le plus important - Les personnes d'abord -->
|
|
<div class="col-12 md:col-3">
|
|
<div class="card metric-card bg-blue-100 border-left-3 border-blue-500">
|
|
<div class="flex justify-content-between align-items-start">
|
|
<div>
|
|
<div class="text-blue-900 font-bold text-3xl mb-1">#{superAdminBean.totalMembres}</div>
|
|
<div class="text-blue-700 font-medium">Membres Actifs</div>
|
|
<div class="flex align-items-center mt-2">
|
|
<i class="pi pi-arrow-up text-green-500 mr-1"></i>
|
|
<span class="text-green-500 font-bold text-sm">+12.5%</span>
|
|
<span class="text-600 text-xs ml-2">ce mois</span>
|
|
</div>
|
|
<div class="text-600 text-xs mt-1">Moyenne: 146/organisation</div>
|
|
</div>
|
|
<div class="bg-blue-500 text-white border-round flex align-items-center justify-content-center"
|
|
style="width: 3.5rem; height: 3.5rem;">
|
|
<i class="pi pi-users text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. ORGANISATIONS : Structure organisationnelle -->
|
|
<div class="col-12 md:col-3">
|
|
<div class="card metric-card bg-green-100 border-left-3 border-green-500">
|
|
<div class="flex justify-content-between align-items-start">
|
|
<div>
|
|
<div class="text-green-900 font-bold text-3xl mb-1">#{superAdminBean.totalEntites}</div>
|
|
<div class="text-green-700 font-medium">Organisations</div>
|
|
<div class="flex align-items-center mt-2">
|
|
<i class="pi pi-arrow-up text-green-500 mr-1"></i>
|
|
<span class="text-green-500 font-bold text-sm">+8</span>
|
|
<span class="text-600 text-xs ml-2">nouvelles</span>
|
|
</div>
|
|
<div class="text-600 text-xs mt-1">#{superAdminBean.souscriptionsActives} souscriptions actives</div>
|
|
</div>
|
|
<div class="bg-green-500 text-white border-round flex align-items-center justify-content-center"
|
|
style="width: 3.5rem; height: 3.5rem;">
|
|
<i class="pi pi-sitemap text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. REVENUS : Santé financière -->
|
|
<div class="col-12 md:col-3">
|
|
<div class="card metric-card bg-purple-100 border-left-3 border-purple-500">
|
|
<div class="flex justify-content-between align-items-start">
|
|
<div>
|
|
<div class="text-purple-900 font-bold text-2xl mb-1">#{superAdminBean.revenusGlobaux}</div>
|
|
<div class="text-purple-700 font-medium">Revenus Mensuels</div>
|
|
<div class="flex align-items-center mt-2">
|
|
<i class="pi pi-arrow-up text-green-500 mr-1"></i>
|
|
<span class="text-green-500 font-bold text-sm">+23%</span>
|
|
<span class="text-600 text-xs ml-2">vs mois dernier</span>
|
|
</div>
|
|
<div class="text-600 text-xs mt-1">Taux conversion: #{superAdminBean.tauxConversionFormat}</div>
|
|
</div>
|
|
<div class="bg-purple-500 text-white border-round flex align-items-center justify-content-center"
|
|
style="width: 3.5rem; height: 3.5rem;">
|
|
<i class="pi pi-dollar text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. SYSTÈME : Santé technique -->
|
|
<div class="col-12 md:col-3">
|
|
<div class="card metric-card bg-indigo-100 border-left-3 border-indigo-500">
|
|
<div class="flex justify-content-between align-items-start">
|
|
<div>
|
|
<div class="text-indigo-900 font-bold text-3xl mb-1">#{superAdminBean.disponibiliteSystemeFormat}</div>
|
|
<div class="text-indigo-700 font-medium">Disponibilité</div>
|
|
<div class="flex align-items-center mt-2">
|
|
<div class="bg-green-500 border-round mr-1" style="width: 8px; height: 8px;"></div>
|
|
<span class="text-green-600 font-bold text-sm">Opérationnel</span>
|
|
</div>
|
|
<div class="text-600 text-xs mt-1">#{superAdminBean.tempsReponsMoyen}ms temps réponse</div>
|
|
</div>
|
|
<div class="bg-indigo-500 text-white border-round flex align-items-center justify-content-center"
|
|
style="width: 3.5rem; height: 3.5rem;">
|
|
<i class="pi pi-server text-2xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Panel de Souscriptions -->
|
|
<div class="col-12 lg:col-8">
|
|
<div class="card subscription-stats p-4">
|
|
<h5 class="text-white mb-4">
|
|
<i class="pi pi-credit-card mr-2"></i>
|
|
Analyse des Souscriptions par Forfait
|
|
</h5>
|
|
<div class="grid">
|
|
<div class="col-6 md:col-3">
|
|
<div class="text-center">
|
|
<div class="text-white font-bold text-2xl mb-1">44</div>
|
|
<div class="text-blue-100 text-sm mb-2">Starter</div>
|
|
<div class="text-blue-200 text-xs">#{superAdminBean.revenusStarterFormat}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 md:col-3">
|
|
<div class="text-center">
|
|
<div class="text-white font-bold text-2xl mb-1">60</div>
|
|
<div class="text-blue-100 text-sm mb-2">Standard</div>
|
|
<div class="text-blue-200 text-xs">#{superAdminBean.revenusStandardFormat}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 md:col-3">
|
|
<div class="text-center">
|
|
<div class="text-white font-bold text-2xl mb-1">20</div>
|
|
<div class="text-blue-100 text-sm mb-2">Premium</div>
|
|
<div class="text-blue-200 text-xs">#{superAdminBean.revenusPremmiumFormat}</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 md:col-3">
|
|
<div class="text-center">
|
|
<div class="text-white font-bold text-2xl mb-1">3</div>
|
|
<div class="text-blue-100 text-sm mb-2">Cristal</div>
|
|
<div class="text-blue-200 text-xs">#{superAdminBean.revenusCristalFormat}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alertes souscriptions -->
|
|
<div class="mt-4 pt-3 border-top-1 border-blue-400">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<div class="flex align-items-center">
|
|
<i class="pi pi-exclamation-triangle text-yellow-300 mr-2"></i>
|
|
<span class="text-white">#{superAdminBean.souscriptionsExpirantSous30Jours} souscriptions expirent sous 30 jours</span>
|
|
</div>
|
|
<p:commandButton value="Gérer"
|
|
styleClass="p-button-warning p-button-sm"
|
|
action="/pages/super-admin/souscriptions"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Support Client -->
|
|
<div class="col-12 lg:col-4">
|
|
<div class="card system-health p-4">
|
|
<h5 class="text-white mb-4">
|
|
<i class="pi pi-headphones mr-2"></i>
|
|
Support Client
|
|
</h5>
|
|
|
|
<div class="grid">
|
|
<div class="col-6">
|
|
<div class="text-center">
|
|
<div class="text-white font-bold text-3xl mb-1">#{superAdminBean.ticketsSupportOuverts}</div>
|
|
<div class="text-pink-100 text-sm">Tickets ouverts</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6">
|
|
<div class="text-center">
|
|
<div class="text-white font-bold text-3xl mb-1">#{superAdminBean.satisfactionClientFormat}</div>
|
|
<div class="text-pink-100 text-sm">Satisfaction</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 pt-3 border-top-1 border-pink-400">
|
|
<div class="flex align-items-center justify-content-between">
|
|
<span class="text-white text-sm">Temps de résolution moyen: 2.3h</span>
|
|
<p:commandButton value="Dashboard Support"
|
|
styleClass="p-button-outlined p-button-sm"
|
|
style="color: white; border-color: white;"
|
|
action="/pages/super-admin/support"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alertes Système Enrichies -->
|
|
<div class="col-12 lg:col-6">
|
|
<div class="card">
|
|
<h5>Alertes Critiques <span class="bg-red-500 text-white border-round px-2 py-1 text-xs ml-2">#{superAdminBean.alertesCount}</span></h5>
|
|
|
|
<ui:repeat value="#{superAdminBean.alertesRecentes}" var="alerte" varStatus="status">
|
|
<div class="flex align-items-center justify-content-between p-3 border-round mb-2 alert-#{alerte.couleur.contains('red') ? 'critical' : alerte.couleur.contains('orange') ? 'warning' : alerte.couleur.contains('green') ? 'success' : 'info'}"
|
|
style="background: var(--surface-50);">
|
|
<div class="flex align-items-center">
|
|
<i class="pi #{alerte.icone} #{alerte.couleur} mr-3"></i>
|
|
<div>
|
|
<div class="text-900 font-medium">#{alerte.titre}</div>
|
|
<small class="text-600">#{alerte.entite} - #{alerte.date}</small>
|
|
</div>
|
|
</div>
|
|
<h:form id="formAlertes#{alerte.id}">
|
|
<p:commandButton icon="pi pi-eye"
|
|
styleClass="p-button-rounded p-button-text"
|
|
action="#{superAdminBean.voirAlerte(alerte)}"
|
|
title="Voir détails" />
|
|
</h:form>
|
|
</div>
|
|
</ui:repeat>
|
|
|
|
<div class="text-center mt-3">
|
|
<h:form id="formVoirToutesAlertes">
|
|
<p:commandButton value="Voir toutes les alertes"
|
|
styleClass="p-button-outlined p-button-sm"
|
|
action="#{superAdminBean.voirToutesAlertes}" />
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Actions Rapides Enrichies -->
|
|
<div class="col-12 lg:col-6">
|
|
<div class="card">
|
|
<h5>Actions Rapides</h5>
|
|
<h:form id="formActionsRapides">
|
|
<div class="grid">
|
|
<div class="col-12 md:col-6">
|
|
<p:commandButton value="Nouvelle Entité"
|
|
icon="pi pi-plus"
|
|
styleClass="p-button-outlined p-button-success w-full mb-2"
|
|
action="#{superAdminBean.creerEntite}" />
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<p:commandButton value="Gestion Formulaires"
|
|
icon="pi pi-credit-card"
|
|
styleClass="p-button-outlined p-button-info w-full mb-2"
|
|
action="/pages/super-admin/formulaires" />
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<p:commandButton value="Rapport Financier"
|
|
icon="pi pi-chart-bar"
|
|
styleClass="p-button-outlined p-button-warning w-full mb-2"
|
|
action="#{superAdminBean.genererRapport}" />
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<p:commandButton value="Configuration"
|
|
icon="pi pi-cog"
|
|
styleClass="p-button-outlined p-button-secondary w-full mb-2"
|
|
action="#{superAdminBean.configurer}" />
|
|
</div>
|
|
</div>
|
|
</h:form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Performance par Région (si pertinent) -->
|
|
<div class="col-12 lg:col-8">
|
|
<div class="card">
|
|
<h5>Performance Régionale</h5>
|
|
<div class="grid">
|
|
<div class="col-12 md:col-3">
|
|
<div class="text-center p-3 surface-50 border-round">
|
|
<div class="text-2xl font-bold text-blue-500 mb-1">45</div>
|
|
<div class="text-600 mb-2">Dakar</div>
|
|
<div class="text-green-600 text-sm">+12%</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-3">
|
|
<div class="text-center p-3 surface-50 border-round">
|
|
<div class="text-2xl font-bold text-green-500 mb-1">32</div>
|
|
<div class="text-600 mb-2">Thiès</div>
|
|
<div class="text-green-600 text-sm">+8%</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-3">
|
|
<div class="text-center p-3 surface-50 border-round">
|
|
<div class="text-2xl font-bold text-purple-500 mb-1">28</div>
|
|
<div class="text-600 mb-2">Kaolack</div>
|
|
<div class="text-green-600 text-sm">+15%</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-3">
|
|
<div class="text-center p-3 surface-50 border-round">
|
|
<div class="text-2xl font-bold text-orange-500 mb-1">22</div>
|
|
<div class="text-600 mb-2">Autres</div>
|
|
<div class="text-green-600 text-sm">+5%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Top Entités et Activité Récente (conservés du dashboard original) -->
|
|
<div class="col-12 lg:col-4">
|
|
<div class="card">
|
|
<h5>Top Entités (Membres)</h5>
|
|
<ui:repeat value="#{superAdminBean.topEntites}" var="entite" varStatus="status">
|
|
<div class="flex align-items-center justify-content-between p-3 mb-2 border-round"
|
|
style="background: var(--surface-50);">
|
|
<div class="flex align-items-center">
|
|
<div class="bg-primary text-white border-round text-center mr-3"
|
|
style="width: 2rem; height: 2rem; line-height: 2rem;">
|
|
#{status.index + 1}
|
|
</div>
|
|
<div>
|
|
<div class="text-900 font-medium">#{entite.nom}</div>
|
|
<small class="text-600">#{entite.typeEntite}</small>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-900 font-bold">#{entite.nombreMembres}</div>
|
|
<small class="text-600">membres</small>
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ui:define>
|
|
</ui:composition> |