Configure Maven repository for unionflow-server-api dependency
This commit is contained in:
dahoud
533
target/classes/META-INF/resources/pages/secure/dashboard.xhtml
Normal file
533
target/classes/META-INF/resources/pages/secure/dashboard.xhtml
Normal file
@@ -0,0 +1,533 @@
|
||||
<!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">UnionFlow - Tableau de bord</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<!-- Header avec informations contextuelles -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="flex flex-column lg:flex-row lg:align-items-center lg:justify-content-between">
|
||||
<div>
|
||||
<h2 class="text-900 font-medium text-4xl">Tableau de bord UnionFlow</h2>
|
||||
<p class="text-600 text-lg mt-0 mb-3">Bienvenue #{userSession.currentUser.nom}, voici un aperçu de votre union</p>
|
||||
<div class="flex align-items-center">
|
||||
<i class="pi pi-calendar text-blue-500"></i>
|
||||
<span class="text-700 ml-2">#{dashboardBean.currentDate}</span>
|
||||
<span class="mx-3">|</span>
|
||||
<i class="pi pi-users text-green-500"></i>
|
||||
<span class="text-700 ml-2">#{dashboardBean.totalMembers} membres inscrits</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-3 lg:mt-0">
|
||||
<ui:include src="/templates/components/buttons/button-success.xhtml">
|
||||
<ui:param name="value" value="Rapport mensuel" />
|
||||
<ui:param name="icon" value="pi pi-download" />
|
||||
<ui:param name="action" value="#{dashboardBean.generateRapport}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
<ui:param name="styleClass" value="mr-2" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Aide" />
|
||||
<ui:param name="icon" value="pi pi-question-circle" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
<ui:param name="styleClass" value="ui-button-help" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alertes URGENTES - En premier pour l'attention immédiate -->
|
||||
<ui:fragment rendered="#{dashboardBean.hasAlerts}">
|
||||
<div class="col-12">
|
||||
<div class="card surface-50 border-round">
|
||||
<h5 class="text-900 font-bold mb-3">
|
||||
<i class="pi pi-exclamation-circle text-orange-500 mr-2"></i>
|
||||
Actions requises aujourd'hui
|
||||
</h5>
|
||||
<div class="grid">
|
||||
<!-- URGENT : Cotisations en retard -->
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card border-round p-3 border-left-3 border-red-500 hover-elevate-2">
|
||||
<div class="flex align-items-center">
|
||||
<div class="bg-red-100 border-round flex align-items-center justify-content-center mr-3"
|
||||
style="width: 2.5rem; height: 2.5rem;">
|
||||
<i class="pi pi-exclamation-triangle text-red-600"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="text-red-900 font-bold text-2xl">#{dashboardBean.cotisationsRetard}</div>
|
||||
<div class="text-red-700 text-sm font-medium">Cotisations en retard</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IMPORTANT : Adhésions à renouveler -->
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card border-round p-3 border-left-3 border-orange-500 hover-elevate-2">
|
||||
<div class="flex align-items-center">
|
||||
<div class="bg-orange-100 border-round flex align-items-center justify-content-center mr-3"
|
||||
style="width: 2.5rem; height: 2.5rem;">
|
||||
<i class="pi pi-clock text-orange-600"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="text-orange-900 font-bold text-2xl">#{dashboardBean.adhesionsExpiration}</div>
|
||||
<div class="text-orange-700 text-sm font-medium">Expire dans 7 jours</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- À TRAITER : Demandes en attente -->
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card border-round p-3 border-left-3 border-blue-500 hover-elevate-2">
|
||||
<div class="flex align-items-center">
|
||||
<div class="bg-blue-100 border-round flex align-items-center justify-content-center mr-3"
|
||||
style="width: 2.5rem; height: 2.5rem;">
|
||||
<i class="pi pi-inbox text-blue-600"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="text-blue-900 font-bold text-2xl">#{dashboardBean.demandesToTraiter}</div>
|
||||
<div class="text-blue-700 text-sm font-medium">Demandes en attente</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SUCCÈS : Tâches complétées -->
|
||||
<div class="col-12 md:col-6 lg:col-3">
|
||||
<div class="surface-card border-round p-3 border-left-3 border-green-500 hover-elevate-2">
|
||||
<div class="flex align-items-center">
|
||||
<div class="bg-green-100 border-round flex align-items-center justify-content-center mr-3"
|
||||
style="width: 2.5rem; height: 2.5rem;">
|
||||
<i class="pi pi-check-circle text-green-600"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="text-green-900 font-bold text-2xl">#{dashboardBean.tachesCompletees}</div>
|
||||
<div class="text-green-700 text-sm font-medium">Complétées aujourd'hui</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:fragment>
|
||||
|
||||
<!-- KPIs principaux - Ordre psychologique optimal -->
|
||||
<div class="col-12">
|
||||
<h5 class="text-900 font-bold mb-3">
|
||||
<i class="pi pi-chart-bar text-primary mr-2"></i>
|
||||
Vue d'ensemble
|
||||
</h5>
|
||||
</div>
|
||||
|
||||
<!-- 1. MEMBRES : L'humain d'abord - le plus important -->
|
||||
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
||||
<ui:param name="title" value="Membres Actifs" />
|
||||
<ui:param name="value" value="#{dashboardBean.activeMembers}" />
|
||||
<ui:param name="icon" value="pi-users" />
|
||||
<ui:param name="iconColor" value="blue-600" />
|
||||
<ui:param name="growthValue" value="#{dashboardBean.membresEvolutionPourcent}" />
|
||||
<ui:param name="growthLabel" value="ce mois" />
|
||||
<ui:param name="progressValue" value="#{dashboardBean.tauxActivite}" />
|
||||
</ui:include>
|
||||
|
||||
<!-- 2. FINANCES : Santé financière - crucial pour la survie -->
|
||||
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
||||
<ui:param name="title" value="FCFA Collectés" />
|
||||
<ui:param name="value" value="#{dashboardBean.totalCotisations}" />
|
||||
<ui:param name="icon" value="pi-dollar" />
|
||||
<ui:param name="iconColor" value="green-600" />
|
||||
<ui:param name="growthValue" value="#{dashboardBean.cotisationsEvolutionPourcent}" />
|
||||
<ui:param name="growthLabel" value="vs mois dernier" />
|
||||
<ui:param name="progressValue" value="#{dashboardBean.tauxObjectifCotisations}" />
|
||||
</ui:include>
|
||||
|
||||
<!-- 3. SOLIDARITÉ : Impact social - raison d'être -->
|
||||
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
||||
<ui:param name="title" value="FCFA Distribués" />
|
||||
<ui:param name="value" value="#{dashboardBean.aidesDistribuees}" />
|
||||
<ui:param name="icon" value="pi-heart" />
|
||||
<ui:param name="iconColor" value="purple-600" />
|
||||
<ui:param name="statusIcon" value="pi-circle-fill" />
|
||||
<ui:param name="statusLabel" value="Demandes en attente" />
|
||||
<ui:param name="statusValue" value="#{dashboardBean.pendingAides}" />
|
||||
<ui:param name="progressValue" value="#{dashboardBean.tauxAidesTraitees}" />
|
||||
</ui:include>
|
||||
|
||||
<!-- 4. ENGAGEMENT : Vitalité de l'organisation -->
|
||||
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
||||
<ui:param name="title" value="Taux de Participation" />
|
||||
<ui:param name="value" value="#{dashboardBean.tauxParticipation}%" />
|
||||
<ui:param name="icon" value="pi-chart-line" />
|
||||
<ui:param name="iconColor" value="orange-600" />
|
||||
<ui:param name="statusIcon" value="pi-calendar" />
|
||||
<ui:param name="statusLabel" value="Événements prévus" />
|
||||
<ui:param name="statusValue" value="#{dashboardBean.upcomingEvents}" />
|
||||
<ui:param name="progressValue" value="#{dashboardBean.tauxEngagement}" />
|
||||
</ui:include>
|
||||
|
||||
<!-- Tendances financières et analyses -->
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="card">
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<h5>Évolution financière (3 derniers mois)</h5>
|
||||
<div>
|
||||
<h:form>
|
||||
<p:selectOneButton value="#{dashboardBean.periodeGraph}">
|
||||
<f:selectItem itemLabel="3M" itemValue="3M" />
|
||||
<f:selectItem itemLabel="6M" itemValue="6M" />
|
||||
<f:selectItem itemLabel="1A" itemValue="1A" />
|
||||
<p:ajax update="tendancesPanel" />
|
||||
</p:selectOneButton>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h:panelGroup id="tendancesPanel" layout="block">
|
||||
<!-- Graphique avec données dynamiques -->
|
||||
<div class="grid">
|
||||
<ui:repeat value="#{dashboardBean.evolutionFinanciere}" var="mois">
|
||||
<div class="col-4 text-center">
|
||||
<h6 class="text-600 mb-2">#{mois.libelle}</h6>
|
||||
<div class="flex flex-column align-items-center">
|
||||
<div class="bg-blue-500 border-round mb-2" style="width:20px;height:#{mois.hauteur}px;"></div>
|
||||
<span class="text-sm text-600">#{mois.montantFormatte}</span>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
|
||||
<!-- Indicateurs de tendance dynamiques -->
|
||||
<div class="grid mt-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="flex align-items-center">
|
||||
<i class="#{dashboardBean.evolutionRecettesIcon} text-2xl mr-2"></i>
|
||||
<div>
|
||||
<div class="text-900 font-medium">#{dashboardBean.evolutionRecettesPrefix}#{dashboardBean.evolutionRecettesPourcent}%</div>
|
||||
<span class="text-600 text-sm">Recettes vs mois dernier</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="flex align-items-center">
|
||||
<i class="#{dashboardBean.evolutionDepensesIcon} text-2xl mr-2"></i>
|
||||
<div>
|
||||
<div class="text-900 font-medium">#{dashboardBean.evolutionDepensesPrefix}#{dashboardBean.evolutionDepensesPourcent}%</div>
|
||||
<span class="text-600 text-sm">Dépenses vs mois dernier</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="flex align-items-center">
|
||||
<i class="pi pi-minus text-blue-500 text-2xl mr-2"></i>
|
||||
<div>
|
||||
<div class="text-900 font-medium">#{dashboardBean.tendanceParticipation}</div>
|
||||
<span class="text-600 text-sm">Taux de participation</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:panelGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="card">
|
||||
<h5>État des cotisations</h5>
|
||||
|
||||
<!-- Graphique circulaire dynamique -->
|
||||
<div class="text-center mb-4">
|
||||
<div class="relative inline-block">
|
||||
<div class="w-8rem h-8rem border-circle border-8 border-blue-200 mx-auto mb-3 relative">
|
||||
<div class="absolute top-50 left-50 bg-white border-circle flex align-items-center justify-content-center" style="width: 60px; height: 60px; margin-top: -30px; margin-left: -30px;">
|
||||
<span class="text-900 font-bold">#{dashboardBean.cotisationsAJourPourcent}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Légende avec données dynamiques -->
|
||||
<div class="mt-3">
|
||||
<div class="flex align-items-center justify-content-between py-2">
|
||||
<div class="flex align-items-center">
|
||||
<div class="w-1rem h-1rem bg-blue-500 border-round mr-2"></div>
|
||||
<span class="text-600">À jour</span>
|
||||
</div>
|
||||
<span class="text-900 font-medium">#{dashboardBean.cotisationsAJourPourcent}%</span>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between py-2">
|
||||
<div class="flex align-items-center">
|
||||
<div class="w-1rem h-1rem bg-orange-500 border-round mr-2"></div>
|
||||
<span class="text-600">En retard</span>
|
||||
</div>
|
||||
<span class="text-900 font-medium">#{dashboardBean.cotisationsRetardPourcent}%</span>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between py-2">
|
||||
<div class="flex align-items-center">
|
||||
<div class="w-1rem h-1rem bg-red-500 border-round mr-2"></div>
|
||||
<span class="text-600">Impayées</span>
|
||||
</div>
|
||||
<span class="text-900 font-medium">#{dashboardBean.cotisationsImpayeesPourcent}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barres de progression dynamiques -->
|
||||
<div class="mt-4">
|
||||
<div class="mb-3">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<span class="text-600">Taux de collecte</span>
|
||||
<span class="text-900 font-medium">#{dashboardBean.tauxCollecte}%</span>
|
||||
</div>
|
||||
<div class="bg-gray-200 border-round overflow-hidden" style="height: 8px;">
|
||||
<div class="bg-green-500 h-full border-round" style="width: #{dashboardBean.tauxCollecte}%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<span class="text-600">Objectif mensuel</span>
|
||||
<span class="text-900 font-medium">#{dashboardBean.tauxObjectifCotisations}%</span>
|
||||
</div>
|
||||
<div class="bg-gray-200 border-round overflow-hidden" style="height: 8px;">
|
||||
<div class="bg-blue-500 h-full border-round" style="width: #{dashboardBean.tauxObjectifCotisations}%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Journal d'activités et Tâches prioritaires -->
|
||||
<div class="col-12 lg:col-8">
|
||||
<h:form>
|
||||
<div class="card">
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<h5>Journal d'activités</h5>
|
||||
<div>
|
||||
<p:selectOneMenu value="#{dashboardBean.filtreActivite}">
|
||||
<f:selectItem itemLabel="Toutes" itemValue="ALL" />
|
||||
<f:selectItem itemLabel="Cotisations" itemValue="COTISATION" />
|
||||
<f:selectItem itemLabel="Adhésions" itemValue="ADHESION" />
|
||||
<f:selectItem itemLabel="Aides" itemValue="AIDE" />
|
||||
<f:selectItem itemLabel="Événements" itemValue="EVENEMENT" />
|
||||
<p:ajax update="activitiesTable" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
<p:dataTable id="activitiesTable" value="#{dashboardBean.recentActivities}" var="activity"
|
||||
rows="8" paginator="true" paginatorPosition="bottom">
|
||||
<p:column headerText="Date" style="width:120px">
|
||||
<div class="flex flex-column">
|
||||
<span class="text-900 font-medium">
|
||||
<h:outputText value="#{activity.date}">
|
||||
<f:convertDateTime pattern="dd/MM HH:mm" type="localDateTime"/>
|
||||
</h:outputText>
|
||||
</span>
|
||||
<small class="text-500">
|
||||
<h:outputText value="#{activity.date}">
|
||||
<f:convertDateTime pattern="yyyy" type="localDateTime"/>
|
||||
</h:outputText>
|
||||
</small>
|
||||
</div>
|
||||
</p:column>
|
||||
<p:column headerText="Activité" style="width:100px">
|
||||
<p:tag value="#{activity.type}" severity="#{activity.severity}"
|
||||
icon="#{activity.icon}" styleClass="mr-2"/>
|
||||
</p:column>
|
||||
<p:column headerText="Description">
|
||||
<div>
|
||||
<div class="text-900 font-medium">#{activity.titre}</div>
|
||||
<div class="text-600 mt-1">#{activity.description}</div>
|
||||
<ui:fragment rendered="#{activity.montant != null}">
|
||||
<div class="mt-2">
|
||||
<span class="text-green-600 font-medium">#{activity.montant} FCFA</span>
|
||||
</div>
|
||||
</ui:fragment>
|
||||
</div>
|
||||
</p:column>
|
||||
<p:column headerText="Acteur" style="width:150px">
|
||||
<div class="flex align-items-center">
|
||||
<p:graphicImage name="images/avatar/profile.jpg" library="demo"
|
||||
styleClass="w-2rem h-2rem border-circle mr-2"/>
|
||||
<div>
|
||||
<div class="text-900 font-medium">#{activity.userNom}</div>
|
||||
<small class="text-500">#{activity.userRole}</small>
|
||||
</div>
|
||||
</div>
|
||||
</p:column>
|
||||
<p:column headerText="Action" style="width:80px">
|
||||
<ui:include src="/templates/components/buttons/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-eye" />
|
||||
<ui:param name="title" value="Voir détails" />
|
||||
</ui:include>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Actions rapides et Tâches -->
|
||||
<div class="col-12 lg:col-4">
|
||||
<h:form>
|
||||
<div class="card mb-4">
|
||||
<h5>Actions rapides</h5>
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Nouveau membre" />
|
||||
<ui:param name="icon" value="pi pi-user-plus" />
|
||||
<ui:param name="action" value="#{dashboardBean.redirectToNewMember}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
<ui:param name="styleClass" value="w-full mb-2" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<ui:include src="/templates/components/buttons/button-success.xhtml">
|
||||
<ui:param name="value" value="Collecter" />
|
||||
<ui:param name="icon" value="pi pi-wallet" />
|
||||
<ui:param name="action" value="#{dashboardBean.redirectToCotisation}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
<ui:param name="styleClass" value="w-full mb-2" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<ui:include src="/templates/components/buttons/button-info.xhtml">
|
||||
<ui:param name="value" value="Événement" />
|
||||
<ui:param name="icon" value="pi pi-calendar-plus" />
|
||||
<ui:param name="action" value="#{dashboardBean.redirectToEvenement}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
<ui:param name="styleClass" value="w-full mb-2" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<ui:include src="/templates/components/buttons/button-warning.xhtml">
|
||||
<ui:param name="value" value="Rapport" />
|
||||
<ui:param name="icon" value="pi pi-chart-bar" />
|
||||
<ui:param name="action" value="#{dashboardBean.generateRapport}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
<ui:param name="styleClass" value="w-full mb-2" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
|
||||
<div class="card">
|
||||
<h5>Tâches prioritaires</h5>
|
||||
<div class="flex flex-column gap-3">
|
||||
<div class="flex align-items-center p-3 border-round bg-blue-50 border-blue-200">
|
||||
<i class="pi pi-check-circle text-blue-500 text-xl mr-3"></i>
|
||||
<div class="flex-1">
|
||||
<div class="text-900 font-medium">Valider #{dashboardBean.adhesionsPendantes} adhésions</div>
|
||||
<small class="text-600">Demandes en attente de validation</small>
|
||||
</div>
|
||||
<ui:include src="/templates/components/buttons/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-arrow-right" />
|
||||
<ui:param name="action" value="#{dashboardBean.redirectToAdhesionValidation}" />
|
||||
<ui:param name="severity" value="info" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="flex align-items-center p-3 border-round bg-orange-50 border-orange-200">
|
||||
<i class="pi pi-exclamation-triangle text-orange-500 text-xl mr-3"></i>
|
||||
<div class="flex-1">
|
||||
<div class="text-900 font-medium">Relancer #{dashboardBean.cotisationsRetard} cotisations</div>
|
||||
<small class="text-600">Paiements en retard</small>
|
||||
</div>
|
||||
<ui:include src="/templates/components/buttons/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-arrow-right" />
|
||||
<ui:param name="action" value="#{dashboardBean.redirectToRelances}" />
|
||||
<ui:param name="severity" value="warning" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="flex align-items-center p-3 border-round bg-green-50 border-green-200">
|
||||
<i class="pi pi-heart text-green-500 text-xl mr-3"></i>
|
||||
<div class="flex-1">
|
||||
<div class="text-900 font-medium">Traiter #{dashboardBean.aidesEnAttente} aides</div>
|
||||
<small class="text-600">Demandes d'aide à examiner</small>
|
||||
</div>
|
||||
<ui:include src="/templates/components/buttons/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-arrow-right" />
|
||||
<ui:param name="action" value="#{dashboardBean.redirectToAidesTraitement}" />
|
||||
<ui:param name="severity" value="success" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="flex align-items-center p-3 border-round bg-purple-50 border-purple-200">
|
||||
<i class="pi pi-calendar text-purple-500 text-xl mr-3"></i>
|
||||
<div class="flex-1">
|
||||
<div class="text-900 font-medium">Organiser prochains événements</div>
|
||||
<small class="text-600">#{dashboardBean.evenementsAPlanifier} événements à planifier</small>
|
||||
</div>
|
||||
<ui:include src="/templates/components/buttons/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-arrow-right" />
|
||||
<ui:param name="action" value="#{dashboardBean.redirectToEvenementPlanning}" />
|
||||
<ui:param name="styleClass" value="ui-button-help" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tableau de bord financier détaillé -->
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<h5>Résumé financier mensuel</h5>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<h:form>
|
||||
<p:calendar value="#{dashboardBean.moisSelectionne}" view="month"
|
||||
yearNavigator="true" yearRange="2020:2030">
|
||||
<p:ajax update="financialSummary" listener="#{dashboardBean.onMoisChange}"/>
|
||||
</p:calendar>
|
||||
<ui:include src="/templates/components/buttons/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Exporter" />
|
||||
<ui:param name="icon" value="pi pi-download" />
|
||||
<ui:param name="action" value="#{dashboardBean.exportFinancialReport}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
<ui:param name="styleClass" value="ui-button-sm" />
|
||||
</ui:include>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h:panelGroup id="financialSummary" layout="block" styleClass="grid">
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="text-center p-3 border-round bg-green-50">
|
||||
<div class="text-green-600 font-medium text-xl">#{dashboardBean.recettesMois} FCFA</div>
|
||||
<div class="text-500">Recettes totales</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="text-center p-3 border-round bg-red-50">
|
||||
<div class="text-red-600 font-medium text-xl">#{dashboardBean.depensesMois} FCFA</div>
|
||||
<div class="text-500">Dépenses totales</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="text-center p-3 border-round bg-blue-50">
|
||||
<div class="text-blue-600 font-medium text-xl">#{dashboardBean.soldeMois} FCFA</div>
|
||||
<div class="text-500">Solde net</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="text-center p-3 border-round bg-purple-50">
|
||||
<div class="text-purple-600 font-medium text-xl">#{dashboardBean.tresorerie} FCFA</div>
|
||||
<div class="text-500">Trésorerie actuelle</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:panelGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
Reference in New Issue
Block a user