Files

210 lines
11 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 Financiers - 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-dollar text-green-500" />
<ui:param name="title" value="Rapports Financiers" />
<ui:param name="description" value="Analyse financière et suivi des revenus" />
<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>
<!-- Filtres de période -->
<div class="card">
<h:form id="formFiltres">
<h5>Période d'Analyse</h5>
<div class="grid">
<div class="col-12 md:col-3">
<ui:include src="/templates/components/forms/form-field-select.xhtml">
<ui:param name="id" value="periodeRapide" />
<ui:param name="label" value="Période Rapide" />
<ui:param name="value" value="#{rapportsBean.periodeRapide}" />
<ui:param name="update" value="@form" />
<ui:define name="items">
<f:selectItem itemLabel="7 derniers jours" itemValue="7_JOURS" />
<f:selectItem itemLabel="30 derniers jours" itemValue="30_JOURS" />
<f:selectItem itemLabel="3 derniers mois" itemValue="3_MOIS" />
<f:selectItem itemLabel="6 derniers mois" itemValue="6_MOIS" />
<f:selectItem itemLabel="Année en cours" itemValue="ANNEE_COURANTE" />
</ui:define>
</ui:include>
</div>
<div class="col-12 md:col-3">
<ui:include src="/templates/components/forms/form-field-calendar.xhtml">
<ui:param name="id" value="dateDebut" />
<ui:param name="label" value="Date Début" />
<ui:param name="value" value="#{rapportsBean.dateDebut}" />
<ui:param name="update" value="@form" />
</ui:include>
</div>
<div class="col-12 md:col-3">
<ui:include src="/templates/components/forms/form-field-calendar.xhtml">
<ui:param name="id" value="dateFin" />
<ui:param name="label" value="Date Fin" />
<ui:param name="value" value="#{rapportsBean.dateFin}" />
<ui:param name="update" value="@form" />
</ui:include>
</div>
<div class="col-12 md:col-3">
<div class="field">
<p:outputLabel />
<ui:include src="/templates/components/buttons/button-primary.xhtml">
<ui:param name="value" value="Appliquer" />
<ui:param name="icon" value="pi pi-check" />
<ui:param name="action" value="#{rapportsBean.chargerDonnees}" />
<ui:param name="update" value="@form" />
</ui:include>
</div>
</div>
</div>
</h:form>
</div>
<!-- Indicateurs financiers -->
<div class="grid">
<ui:include src="/templates/components/cards/stat-card.xhtml">
<ui:param name="value" value="#{rapportsBean.indicateurs.revenus}" />
<ui:param name="label" value="Revenus Totaux" />
<ui:param name="icon" value="pi pi-dollar" />
<ui:param name="bgColor" value="green" />
</ui:include>
<ui:include src="/templates/components/cards/stat-card.xhtml">
<ui:param name="value" value="#{rapportsBean.indicateurs.croissanceRevenus}%" />
<ui:param name="label" value="Croissance Revenus" />
<ui:param name="icon" value="pi pi-arrow-up" />
<ui:param name="bgColor" value="blue" />
</ui:include>
<ui:include src="/templates/components/cards/stat-card.xhtml">
<ui:param name="value" value="#{rapportsBean.indicateurs.totalMembres}" />
<ui:param name="label" value="Membres Actifs" />
<ui:param name="icon" value="pi pi-users" />
<ui:param name="bgColor" value="purple" />
</ui:include>
<ui:include src="/templates/components/cards/stat-card.xhtml">
<ui:param name="value" value="#{rapportsBean.indicateurs.croissanceMembres}%" />
<ui:param name="label" value="Croissance Membres" />
<ui:param name="icon" value="pi pi-chart-line" />
<ui:param name="bgColor" value="orange" />
</ui:include>
</div>
<!-- Sources de revenus -->
<div class="card">
<h5>Sources de Revenus</h5>
<p:dataTable value="#{rapportsBean.sourceRevenus}" var="source"
emptyMessage="Aucune donnée disponible"
styleClass="p-datatable-sm">
<p:column headerText="Source">
<div class="flex align-items-center gap-2">
<i class="#{source.icon} text-lg"></i>
<span class="font-semibold">#{source.libelle}</span>
</div>
</p:column>
<p:column headerText="Montant">
<span class="font-bold">#{source.montant} FCFA</span>
</p:column>
<p:column headerText="Pourcentage">
<p:progressBar value="#{source.pourcentage}"
showValue="true"
styleClass="p-progressbar-sm" />
</p:column>
</p:dataTable>
</div>
<!-- KPIs Financiers -->
<div class="card">
<h5>Indicateurs Clés de Performance</h5>
<div class="formgrid grid">
<ui:repeat value="#{rapportsBean.kpis}" var="kpi">
<ui:include src="/templates/components/cards/kpi-card.xhtml">
<ui:param name="title" value="#{kpi.libelle}" />
<ui:param name="value" value="#{kpi.valeur}" />
<ui:param name="icon" value="#{kpi.icon}" />
<ui:param name="iconColor" value="#{kpi.couleur}" />
<ui:param name="growthValue" value="#{kpi.variation}" />
<ui:param name="growthLabel" value="variation" />
<ui:param name="colSize" value="col-12 md:col-4" />
<ui:param name="showProgress" value="false" />
</ui:include>
</ui:repeat>
</div>
</div>
<!-- Dialog Export -->
<h:form id="formExport">
<p:dialog id="dlgExport"
widgetVar="dlgExport"
header="Exporter le Rapport Financier"
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>