121 lines
6.2 KiB
HTML
121 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<ui:composition template="/templates/main-template.xhtml"
|
|
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">
|
|
|
|
<ui:param name="page" value="#{demandesAideBean}"/>
|
|
<ui:define name="title">Statistiques des Demandes d'Aide - UnionFlow</ui:define>
|
|
|
|
<ui:define name="content">
|
|
<h:form id="formStatistiques">
|
|
<p:messages id="messages" showDetail="true" closable="true"/>
|
|
|
|
<!-- En-tête -->
|
|
<div class="card mb-3">
|
|
<div class="flex justify-content-between align-items-center flex-column md:flex-row">
|
|
<div>
|
|
<h3 class="m-0">
|
|
<i class="pi pi-chart-bar text-primary mr-2"></i>
|
|
Statistiques des Demandes d'Aide
|
|
</h3>
|
|
<p class="text-600 m-0 mt-2">
|
|
Analyse et statistiques détaillées des demandes d'aide
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-2 mt-2 md:mt-0">
|
|
<p:commandButton value="Actualiser"
|
|
icon="pi pi-refresh"
|
|
styleClass="ui-button-outlined ui-button-secondary"
|
|
action="#{demandesAideBean.actualiser}"
|
|
update="@form"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistiques principales -->
|
|
<div class="grid mb-3">
|
|
<div class="col-12 md:col-3">
|
|
<div class="card bg-blue-100 border-left-3 border-blue-500">
|
|
<div class="flex justify-content-between">
|
|
<div>
|
|
<div class="text-blue-900 font-bold text-2xl">#{demandesAideBean.statistiques.totalDemandes}</div>
|
|
<div class="text-blue-700">Total Demandes</div>
|
|
</div>
|
|
<div class="bg-blue-500 text-white border-round text-center"
|
|
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
|
<i class="pi pi-inbox text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-3">
|
|
<div class="card bg-orange-100 border-left-3 border-orange-500">
|
|
<div class="flex justify-content-between">
|
|
<div>
|
|
<div class="text-orange-900 font-bold text-2xl">#{demandesAideBean.statistiques.demandesEnAttente}</div>
|
|
<div class="text-orange-700">En Attente</div>
|
|
</div>
|
|
<div class="bg-orange-500 text-white border-round text-center"
|
|
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
|
<i class="pi pi-clock text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-3">
|
|
<div class="card bg-green-100 border-left-3 border-green-500">
|
|
<div class="flex justify-content-between">
|
|
<div>
|
|
<div class="text-green-900 font-bold text-2xl">#{demandesAideBean.statistiques.demandesApprouvees}</div>
|
|
<div class="text-green-700">Approuvées</div>
|
|
</div>
|
|
<div class="bg-green-500 text-white border-round text-center"
|
|
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
|
<i class="pi pi-check text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-3">
|
|
<div class="card bg-purple-100 border-left-3 border-purple-500">
|
|
<div class="flex justify-content-between">
|
|
<div>
|
|
<div class="text-purple-900 font-bold text-2xl">#{demandesAideBean.statistiques.montantTotalAide}</div>
|
|
<div class="text-purple-700">Montant Total</div>
|
|
</div>
|
|
<div class="bg-purple-500 text-white border-round text-center"
|
|
style="width: 3rem; height: 3rem; line-height: 3rem;">
|
|
<i class="pi pi-dollar text-xl"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Répartition par type -->
|
|
<div class="card">
|
|
<h5 class="mb-3">Répartition par Type d'Aide</h5>
|
|
<div class="grid">
|
|
<div class="col-12 md:col-6">
|
|
<div class="surface-100 border-round p-4 text-center">
|
|
<i class="pi pi-chart-pie text-6xl text-blue-500 mb-3"></i>
|
|
<p class="text-600">Graphique de répartition par type</p>
|
|
<small class="text-500">À implémenter avec PrimeNG Charts</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 md:col-6">
|
|
<div class="surface-100 border-round p-4 text-center">
|
|
<i class="pi pi-chart-bar text-6xl text-green-500 mb-3"></i>
|
|
<p class="text-600">Graphique de répartition par statut</p>
|
|
<small class="text-500">À implémenter avec PrimeNG Charts</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</h:form>
|
|
</ui:define>
|
|
</ui:composition>
|