151 lines
7.4 KiB
HTML
151 lines
7.4 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:param name="page" value="#{rapportsBean}"/>
|
|
<ui:define name="title">Rapports Membres - UnionFlow</ui:define>
|
|
|
|
<ui:define name="content">
|
|
<!-- En-tête -->
|
|
<ui:include src="/templates/components/layout/page-header.xhtml">
|
|
<ui:param name="icon" value="pi pi-users text-blue-500" />
|
|
<ui:param name="title" value="Rapports Membres" />
|
|
<ui:param name="description" value="Analyse et statistiques sur les membres" />
|
|
<ui:define name="actions">
|
|
<h:form id="formActions">
|
|
<div class="flex gap-2">
|
|
<ui:include src="/templates/components/buttons/button-success.xhtml">
|
|
<ui:param name="value" value="Exporter" />
|
|
<ui:param name="icon" value="pi pi-download" />
|
|
<ui:param name="onclick" value="PF('dlgExport').show();" />
|
|
</ui:include>
|
|
<ui:include src="/templates/components/buttons/button-icon.xhtml">
|
|
<ui:param name="icon" value="pi pi-refresh" />
|
|
<ui:param name="action" value="#{rapportsBean.actualiser}" />
|
|
<ui:param name="update" value="@form" />
|
|
<ui:param name="title" value="Actualiser" />
|
|
<ui:param name="rounded" value="true" />
|
|
<ui:param name="text" value="false" />
|
|
<ui:param name="styleClass" value="ui-button-outlined ui-button-secondary" />
|
|
</ui:include>
|
|
</div>
|
|
</h:form>
|
|
</ui:define>
|
|
</ui:include>
|
|
|
|
<!-- Statistiques membres -->
|
|
<div class="formgrid grid">
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="Total Membres" />
|
|
<ui:param name="value" value="#{rapportsBean.indicateurs.totalMembres}" />
|
|
<ui:param name="icon" value="pi-users" />
|
|
<ui:param name="iconColor" value="blue-600" />
|
|
<ui:param name="showGrowth" value="false" />
|
|
<ui:param name="showProgress" value="false" />
|
|
</ui:include>
|
|
|
|
<ui:include src="/templates/components/cards/kpi-card.xhtml">
|
|
<ui:param name="title" value="Croissance" />
|
|
<ui:param name="value" value="#{rapportsBean.indicateurs.croissanceMembres}%" />
|
|
<ui:param name="icon" value="pi-arrow-up" />
|
|
<ui:param name="iconColor" value="green-600" />
|
|
<ui:param name="showGrowth" value="false" />
|
|
<ui:param name="showProgress" value="false" />
|
|
</ui:include>
|
|
</div>
|
|
|
|
<!-- Répartition des membres -->
|
|
<div class="card">
|
|
<h5>Répartition des Membres</h5>
|
|
<p:dataTable value="#{rapportsBean.repartitionMembres}" var="repartition"
|
|
emptyMessage="Aucune donnée disponible"
|
|
styleClass="p-datatable-sm">
|
|
<p:column headerText="Statut">
|
|
<div class="flex align-items-center gap-2">
|
|
<div class="w-1rem h-1rem border-circle bg-#{repartition.couleur}"></div>
|
|
<span class="font-semibold">#{repartition.libelle}</span>
|
|
</div>
|
|
</p:column>
|
|
|
|
<p:column headerText="Nombre">
|
|
<span class="font-bold">#{repartition.nombre}</span>
|
|
</p:column>
|
|
|
|
<p:column headerText="Pourcentage">
|
|
<p:progressBar value="#{repartition.pourcentage}"
|
|
showValue="true"
|
|
styleClass="p-progressbar-sm" />
|
|
</p:column>
|
|
</p:dataTable>
|
|
</div>
|
|
|
|
<!-- Objectifs -->
|
|
<div class="card">
|
|
<h5>Objectifs</h5>
|
|
<div class="grid">
|
|
<ui:repeat value="#{rapportsBean.objectifs}" var="objectif">
|
|
<div class="col-12 md:col-6">
|
|
<div class="surface-100 border-round-lg p-4">
|
|
<div class="flex align-items-center justify-content-between mb-3">
|
|
<span class="font-semibold">#{objectif.libelle}</span>
|
|
<span class="text-sm text-600">#{objectif.pourcentage}%</span>
|
|
</div>
|
|
<p:progressBar value="#{objectif.pourcentage}"
|
|
showValue="false"
|
|
styleClass="p-progressbar-sm mb-2" />
|
|
<div class="flex justify-content-between text-sm">
|
|
<span class="text-600">Réalisé: #{objectif.realise}</span>
|
|
<span class="text-600">Cible: #{objectif.cible}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ui:repeat>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dialog Export -->
|
|
<h:form id="formExport">
|
|
<p:dialog id="dlgExport"
|
|
widgetVar="dlgExport"
|
|
header="Exporter le Rapport Membres"
|
|
modal="true"
|
|
resizable="false"
|
|
style="width: 90vw; max-width: 500px;">
|
|
<div class="grid">
|
|
<div class="col-12">
|
|
<div class="field">
|
|
<p:outputLabel for="formatExport" value="Format d'Export" />
|
|
<p:selectOneRadio id="formatExport"
|
|
value="#{rapportsBean.nouveauRapport.format}"
|
|
layout="grid"
|
|
columns="1">
|
|
<f:selectItem itemLabel="PDF" itemValue="PDF" />
|
|
<f:selectItem itemLabel="Excel (.xlsx)" itemValue="EXCEL" />
|
|
<f:selectItem itemLabel="CSV" itemValue="CSV" />
|
|
</p:selectOneRadio>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<f:facet name="footer">
|
|
<div class="flex justify-content-end gap-2">
|
|
<p:commandButton value="Annuler"
|
|
styleClass="p-button-outlined"
|
|
onclick="PF('dlgExport').hide();"
|
|
type="button" />
|
|
<p:commandButton value="Exporter"
|
|
icon="pi pi-download"
|
|
styleClass="p-button-success"
|
|
action="#{rapportsBean.exporterDonnees}" />
|
|
</div>
|
|
</f:facet>
|
|
</p:dialog>
|
|
</h:form>
|
|
</ui:define>
|
|
|
|
</ui:composition>
|