Refactroring
This commit is contained in:
dahoud
@@ -11,7 +11,8 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<!-- Obsolète : apple-mobile-web-app-capable. Remplacé par mobile-web-app-capable -->
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<link rel="icon" href="#{request.contextPath}/resources/freya-layout/images/favicon.ico" type="image/x-icon" />
|
||||
</f:facet>
|
||||
|
||||
|
||||
@@ -9,414 +9,432 @@
|
||||
<ui:define name="title">Journal d'Audit - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="ui-fluid">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-history text-indigo-500" />
|
||||
<ui:param name="title" value="Journal d'Audit" />
|
||||
<ui:param name="description" value="Traçabilité complète des actions et modifications système" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActions">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Exporter" />
|
||||
<ui:param name="icon" value="pi pi-download" />
|
||||
<ui:param name="onclick" value="PF('exportDialog').show(); return false;" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{auditBean.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 -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{auditBean.totalEvenements}" />
|
||||
<ui:param name="label" value="Événements Totaux" />
|
||||
<ui:param name="icon" value="pi pi-history" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<!-- En-tête avec statistiques -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-900 font-bold text-4xl mb-2">
|
||||
<i class="pi pi-history text-indigo-500 mr-3"></i>
|
||||
Journal d'Audit
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-0">
|
||||
Traçabilité complète des actions et modifications système
|
||||
</p>
|
||||
</div>
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{auditBean.connexionsReussies}" />
|
||||
<ui:param name="label" value="Connexions Réussies" />
|
||||
<ui:param name="icon" value="pi pi-check-circle" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{auditBean.tentativesEchouees}" />
|
||||
<ui:param name="label" value="Tentatives Échouées" />
|
||||
<ui:param name="icon" value="pi pi-times-circle" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{auditBean.alertesSecurite}" />
|
||||
<ui:param name="label" value="Alertes Sécurité" />
|
||||
<ui:param name="icon" value="pi pi-exclamation-triangle" />
|
||||
<ui:param name="bgColor" value="red" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Filtres -->
|
||||
<div class="card">
|
||||
<h:form id="formFiltres">
|
||||
<h5>Filtres de Recherche</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateDebut" />
|
||||
<ui:param name="label" value="Date Début" />
|
||||
<ui:param name="value" value="#{auditBean.dateDebut}" />
|
||||
<ui:param name="update" value=":formTableau:tableauAudit" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateFin" />
|
||||
<ui:param name="label" value="Date Fin" />
|
||||
<ui:param name="value" value="#{auditBean.dateFin}" />
|
||||
<ui:param name="update" value=":formTableau:tableauAudit" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="typeAction" />
|
||||
<ui:param name="label" value="Type d'Action" />
|
||||
<ui:param name="value" value="#{auditBean.typeAction}" />
|
||||
<ui:param name="update" value=":formTableau:tableauAudit" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Tous les types" itemValue="" />
|
||||
<f:selectItem itemLabel="Connexion" itemValue="CONNEXION" />
|
||||
<f:selectItem itemLabel="Déconnexion" itemValue="DECONNEXION" />
|
||||
<f:selectItem itemLabel="Création" itemValue="CREATION" />
|
||||
<f:selectItem itemLabel="Modification" itemValue="MODIFICATION" />
|
||||
<f:selectItem itemLabel="Suppression" itemValue="SUPPRESSION" />
|
||||
<f:selectItem itemLabel="Consultation" itemValue="CONSULTATION" />
|
||||
<f:selectItem itemLabel="Export" itemValue="EXPORT" />
|
||||
<f:selectItem itemLabel="Configuration" itemValue="CONFIGURATION" />
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="severite" />
|
||||
<ui:param name="label" value="Sévérité" />
|
||||
<ui:param name="value" value="#{auditBean.severite}" />
|
||||
<ui:param name="update" value=":formTableau:tableauAudit" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Toutes" itemValue="" />
|
||||
<f:selectItem itemLabel="Info" itemValue="INFO" />
|
||||
<f:selectItem itemLabel="Succès" itemValue="SUCCESS" />
|
||||
<f:selectItem itemLabel="Avertissement" itemValue="WARNING" />
|
||||
<f:selectItem itemLabel="Erreur" itemValue="ERROR" />
|
||||
<f:selectItem itemLabel="Critique" itemValue="CRITICAL" />
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-search-text.xhtml">
|
||||
<ui:param name="id" value="utilisateur" />
|
||||
<ui:param name="label" value="Utilisateur" />
|
||||
<ui:param name="value" value="#{auditBean.utilisateur}" />
|
||||
<ui:param name="placeholder" value="Nom ou email..." />
|
||||
<ui:param name="update" value=":formTableau:tableauAudit" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="module" />
|
||||
<ui:param name="label" value="Module" />
|
||||
<ui:param name="value" value="#{auditBean.module}" />
|
||||
<ui:param name="update" value=":formTableau:tableauAudit" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Tous les modules" itemValue="" />
|
||||
<f:selectItem itemLabel="Authentification" itemValue="AUTH" />
|
||||
<f:selectItem itemLabel="Membres" itemValue="MEMBRES" />
|
||||
<f:selectItem itemLabel="Cotisations" itemValue="COTISATIONS" />
|
||||
<f:selectItem itemLabel="Événements" itemValue="EVENTS" />
|
||||
<f:selectItem itemLabel="Documents" itemValue="DOCUMENTS" />
|
||||
<f:selectItem itemLabel="Configuration" itemValue="CONFIG" />
|
||||
<f:selectItem itemLabel="Rapports" itemValue="RAPPORTS" />
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-search-text.xhtml">
|
||||
<ui:param name="id" value="ipAddress" />
|
||||
<ui:param name="label" value="Adresse IP" />
|
||||
<ui:param name="value" value="#{auditBean.ipAddress}" />
|
||||
<ui:param name="placeholder" value="Ex: 192.168.1.1" />
|
||||
<ui:param name="update" value=":formTableau:tableauAudit" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="field">
|
||||
<p:outputLabel />
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Exporter"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-download"
|
||||
onclick="PF('exportDialog').show()" />
|
||||
<p:commandButton value="Paramètres"
|
||||
styleClass="p-button-info p-button-outlined"
|
||||
icon="pi pi-cog" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPIs -->
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round-lg p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-indigo-500 mb-2">#{auditBean.totalEvenements}</div>
|
||||
<div class="text-900 font-semibold mb-1">Événements Totaux</div>
|
||||
<div class="text-600 text-sm">Derniers 30 jours</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round-lg p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-green-500 mb-2">#{auditBean.connexionsReussies}</div>
|
||||
<div class="text-900 font-semibold mb-1">Connexions Réussies</div>
|
||||
<div class="text-600 text-sm">Aujourd'hui</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round-lg p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-orange-500 mb-2">#{auditBean.tentativesEchouees}</div>
|
||||
<div class="text-900 font-semibold mb-1">Tentatives Échouées</div>
|
||||
<div class="text-600 text-sm">Cette semaine</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round-lg p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-red-500 mb-2">#{auditBean.alertesSecurite}</div>
|
||||
<div class="text-900 font-semibold mb-1">Alertes Sécurité</div>
|
||||
<div class="text-600 text-sm">Non résolues</div>
|
||||
</div>
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Rechercher" />
|
||||
<ui:param name="icon" value="pi pi-search" />
|
||||
<ui:param name="action" value="#{auditBean.rechercher}" />
|
||||
<ui:param name="update" value=":formTableau:tableauAudit" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Réinitialiser" />
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{auditBean.reinitialiserFiltres}" />
|
||||
<ui:param name="update" value="@form :formTableau:tableauAudit" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Filtres avancés -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
|
||||
<h:form id="filtresForm">
|
||||
<div class="formgrid grid">
|
||||
<!-- Ligne 1 -->
|
||||
<div class="field col-12 lg:col-3">
|
||||
<label for="dateDebut" class="block text-900 font-semibold mb-2">
|
||||
<i class="pi pi-calendar mr-2"></i>Date Début
|
||||
</label>
|
||||
<p:datePicker id="dateDebut"
|
||||
value="#{auditBean.dateDebut}"
|
||||
pattern="dd/MM/yyyy"
|
||||
showIcon="true"
|
||||
showOnFocus="false"
|
||||
styleClass="w-full">
|
||||
<p:ajax event="dateSelect" update=":tableauForm:tableauAudit" />
|
||||
</p:datePicker>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-3">
|
||||
<label for="dateFin" class="block text-900 font-semibold mb-2">
|
||||
<i class="pi pi-calendar mr-2"></i>Date Fin
|
||||
</label>
|
||||
<p:datePicker id="dateFin"
|
||||
value="#{auditBean.dateFin}"
|
||||
pattern="dd/MM/yyyy"
|
||||
showIcon="true"
|
||||
showOnFocus="false"
|
||||
styleClass="w-full">
|
||||
<p:ajax event="dateSelect" update=":tableauForm:tableauAudit" />
|
||||
</p:datePicker>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-3">
|
||||
<label for="typeAction" class="block text-900 font-semibold mb-2">
|
||||
<i class="pi pi-tag mr-2"></i>Type d'Action
|
||||
</label>
|
||||
<p:selectOneMenu id="typeAction"
|
||||
value="#{auditBean.typeAction}"
|
||||
styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tous les types" itemValue="" />
|
||||
<f:selectItem itemLabel="Connexion" itemValue="CONNEXION" />
|
||||
<f:selectItem itemLabel="Déconnexion" itemValue="DECONNEXION" />
|
||||
<f:selectItem itemLabel="Création" itemValue="CREATION" />
|
||||
<f:selectItem itemLabel="Modification" itemValue="MODIFICATION" />
|
||||
<f:selectItem itemLabel="Suppression" itemValue="SUPPRESSION" />
|
||||
<f:selectItem itemLabel="Consultation" itemValue="CONSULTATION" />
|
||||
<f:selectItem itemLabel="Export" itemValue="EXPORT" />
|
||||
<f:selectItem itemLabel="Configuration" itemValue="CONFIGURATION" />
|
||||
<p:ajax update=":tableauForm:tableauAudit" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-3">
|
||||
<label for="severite" class="block text-900 font-semibold mb-2">
|
||||
<i class="pi pi-exclamation-triangle mr-2"></i>Sévérité
|
||||
</label>
|
||||
<p:selectOneMenu id="severite"
|
||||
value="#{auditBean.severite}"
|
||||
styleClass="w-full">
|
||||
<f:selectItem itemLabel="Toutes" itemValue="" />
|
||||
<f:selectItem itemLabel="Info" itemValue="INFO" />
|
||||
<f:selectItem itemLabel="Succès" itemValue="SUCCESS" />
|
||||
<f:selectItem itemLabel="Avertissement" itemValue="WARNING" />
|
||||
<f:selectItem itemLabel="Erreur" itemValue="ERROR" />
|
||||
<f:selectItem itemLabel="Critique" itemValue="CRITICAL" />
|
||||
<p:ajax update=":tableauForm:tableauAudit" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<!-- Ligne 2 -->
|
||||
<div class="field col-12 lg:col-3">
|
||||
<label for="utilisateur" class="block text-900 font-semibold mb-2">
|
||||
<i class="pi pi-user mr-2"></i>Utilisateur
|
||||
</label>
|
||||
<p:inputText id="utilisateur"
|
||||
value="#{auditBean.utilisateur}"
|
||||
placeholder="Nom ou email..."
|
||||
styleClass="w-full">
|
||||
<p:ajax event="keyup" update=":tableauForm:tableauAudit" delay="500" />
|
||||
</p:inputText>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-3">
|
||||
<label for="module" class="block text-900 font-semibold mb-2">
|
||||
<i class="pi pi-box mr-2"></i>Module
|
||||
</label>
|
||||
<p:selectOneMenu id="module"
|
||||
value="#{auditBean.module}"
|
||||
styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tous les modules" itemValue="" />
|
||||
<f:selectItem itemLabel="Authentification" itemValue="AUTH" />
|
||||
<f:selectItem itemLabel="Membres" itemValue="MEMBRES" />
|
||||
<f:selectItem itemLabel="Cotisations" itemValue="COTISATIONS" />
|
||||
<f:selectItem itemLabel="Événements" itemValue="EVENTS" />
|
||||
<f:selectItem itemLabel="Documents" itemValue="DOCUMENTS" />
|
||||
<f:selectItem itemLabel="Configuration" itemValue="CONFIG" />
|
||||
<f:selectItem itemLabel="Rapports" itemValue="RAPPORTS" />
|
||||
<p:ajax update=":tableauForm:tableauAudit" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-3">
|
||||
<label for="ipAddress" class="block text-900 font-semibold mb-2">
|
||||
<i class="pi pi-globe mr-2"></i>Adresse IP
|
||||
</label>
|
||||
<p:inputText id="ipAddress"
|
||||
value="#{auditBean.ipAddress}"
|
||||
placeholder="Ex: 192.168.1.1"
|
||||
styleClass="w-full">
|
||||
<p:ajax event="keyup" update=":tableauForm:tableauAudit" delay="500" />
|
||||
</p:inputText>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-3">
|
||||
<label class="block text-900 font-semibold mb-2"> </label>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Rechercher"
|
||||
icon="pi pi-search"
|
||||
styleClass="p-button-primary"
|
||||
action="#{auditBean.rechercher}"
|
||||
update=":tableauForm:tableauAudit" />
|
||||
<p:commandButton value="Réinitialiser"
|
||||
icon="pi pi-refresh"
|
||||
styleClass="p-button-outlined"
|
||||
action="#{auditBean.reinitialiserFiltres}"
|
||||
update="@form :tableauForm:tableauAudit" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Tableau du journal d'audit -->
|
||||
<div class="card">
|
||||
<h:form id="formTableau">
|
||||
<h5>Journal d'Audit</h5>
|
||||
|
||||
<p:dataTable id="tableauAudit"
|
||||
value="#{auditBean.evenementsFiltres}"
|
||||
var="log"
|
||||
paginator="true"
|
||||
rows="20"
|
||||
rowsPerPageTemplate="10,20,50,100"
|
||||
emptyMessage="Aucun événement trouvé"
|
||||
styleClass="p-datatable-sm p-datatable-striped"
|
||||
sortMode="multiple"
|
||||
rowKey="#{log.id}">
|
||||
|
||||
<p:column headerText="Date/Heure" sortBy="#{log.dateHeure}" style="width: 12%">
|
||||
<div>
|
||||
<div class="font-semibold">#{log.dateFormatee}</div>
|
||||
<div class="text-sm text-600">#{log.heureFormatee}</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Sévérité" sortBy="#{log.severite}" style="width: 8%" styleClass="text-center">
|
||||
<p:tag value="#{log.severiteLibelle}"
|
||||
severity="#{log.severiteSeverity}"
|
||||
icon="#{log.severiteIcon}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Utilisateur" sortBy="#{log.utilisateur}" style="width: 15%">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-user text-blue-500"></i>
|
||||
<div>
|
||||
<div class="font-semibold">#{log.utilisateur}</div>
|
||||
<div class="text-sm text-600">#{log.role}</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<!-- Tableau du journal d'audit -->
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card surface-0 hover:surface-100 border-round-lg transition-all transition-duration-200">
|
||||
<h:form id="tableauForm">
|
||||
<p:dataTable id="tableauAudit"
|
||||
value="#{auditBean.evenementsFiltres}"
|
||||
var="event"
|
||||
paginator="true"
|
||||
rows="15"
|
||||
paginatorPosition="both"
|
||||
rowsPerPageTemplate="10,15,25,50,100"
|
||||
paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown} {CurrentPageReport}"
|
||||
currentPageReportTemplate="Affichage {startRecord}-{endRecord} sur {totalRecords} événements"
|
||||
emptyMessage="Aucun événement trouvé"
|
||||
styleClass="p-datatable-sm p-datatable-striped"
|
||||
sortMode="multiple"
|
||||
allowUnsorting="true"
|
||||
rowStyleClass="#{event.severite == 'CRITICAL' ? 'bg-red-50' : (event.severite == 'ERROR' ? 'bg-orange-50' : '')}">
|
||||
<p:column headerText="Action" sortBy="#{log.typeAction}" style="width: 12%">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="#{log.actionIcon} text-lg"></i>
|
||||
<span class="font-semibold">#{log.actionLibelle}</span>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date/Heure" sortBy="#{event.dateHeure}" style="width: 12%">
|
||||
<div class="text-900 font-semibold">#{event.dateFormatee}</div>
|
||||
<div class="text-600 text-sm">#{event.heureFormatee}</div>
|
||||
</p:column>
|
||||
<p:column headerText="Module" sortBy="#{log.module}" style="width: 10%">
|
||||
<p:tag value="#{log.moduleLibelle}"
|
||||
severity="info" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Sévérité" sortBy="#{event.severite}" style="width: 8%" styleClass="text-center">
|
||||
<p:tag value="#{event.severiteLibelle}"
|
||||
severity="#{event.severiteSeverity}"
|
||||
icon="#{event.severiteIcon}"
|
||||
styleClass="font-semibold" />
|
||||
</p:column>
|
||||
<p:column headerText="Description" style="width: 25%">
|
||||
<div>#{log.description}</div>
|
||||
<div class="text-sm text-600 mt-1" rendered="#{not empty log.details}">
|
||||
<i class="pi pi-info-circle"></i> #{log.details}
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Utilisateur" sortBy="#{event.utilisateur}" style="width: 15%">
|
||||
<div class="flex align-items-center">
|
||||
<div class="w-2rem h-2rem border-circle bg-blue-100 text-blue-600 flex align-items-center justify-content-center mr-2">
|
||||
<i class="pi pi-user text-sm"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-900 font-semibold">#{event.utilisateur}</div>
|
||||
<div class="text-600 text-xs">#{event.role}</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:column>
|
||||
<p:column headerText="IP/Appareil" style="width: 12%">
|
||||
<div class="text-sm">
|
||||
<i class="pi pi-globe"></i> #{log.ipAddress}
|
||||
</div>
|
||||
<div class="text-xs text-600">#{log.userAgentCourt}</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Action" sortBy="#{event.action}" style="width: 12%">
|
||||
<div class="flex align-items-center">
|
||||
<i class="#{event.actionIcon} text-lg mr-2" style="color: #{event.actionColor}"></i>
|
||||
<span class="text-900 font-semibold">#{event.action}</span>
|
||||
</div>
|
||||
</p:column>
|
||||
<p:column headerText="Actions" style="width: 6%" styleClass="text-center">
|
||||
<div class="flex justify-content-center gap-1">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
title="Voir les détails"
|
||||
styleClass="p-button-sm p-button-rounded p-button-info"
|
||||
action="#{auditBean.selectionnerLog(log)}"
|
||||
update=":formDetails:dlgDetails"
|
||||
oncomplete="PF('dlgDetails').show();" />
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<p:column headerText="Module" sortBy="#{event.module}" style="width: 10%">
|
||||
<p:tag value="#{event.moduleLibelle}"
|
||||
severity="info"
|
||||
styleClass="text-xs" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Description" style="width: 25%">
|
||||
<div class="text-900">#{event.description}</div>
|
||||
<div class="text-600 text-xs mt-1" rendered="#{not empty event.details}">
|
||||
<i class="pi pi-info-circle mr-1"></i>#{event.details}
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="IP/Appareil" style="width: 12%">
|
||||
<div class="text-900 text-sm">
|
||||
<i class="pi pi-globe mr-1"></i>#{event.ipAddress}
|
||||
</div>
|
||||
<div class="text-600 text-xs">#{event.userAgent}</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width: 6%" styleClass="text-center">
|
||||
<div class="flex justify-content-center gap-1">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
styleClass="p-button-sm p-button-rounded"
|
||||
style="background-color: #17a2b8 !important; border-color: #17a2b8 !important; color: white !important;"
|
||||
title="Voir les détails"
|
||||
action="#{auditBean.voirDetails(event)}"
|
||||
onclick="PF('detailsDialog').show()" />
|
||||
<p:commandButton icon="pi pi-flag"
|
||||
styleClass="p-button-sm p-button-rounded"
|
||||
style="background-color: #dc3545 !important; border-color: #dc3545 !important; color: white !important;"
|
||||
title="Signaler"
|
||||
rendered="#{event.severite == 'WARNING' or event.severite == 'ERROR' or event.severite == 'CRITICAL'}"
|
||||
action="#{auditBean.signalerEvenement(event)}" />
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Détails -->
|
||||
<p:dialog id="detailsDialog"
|
||||
widgetVar="detailsDialog"
|
||||
<!-- Dialog Détails -->
|
||||
<h:form id="formDetails">
|
||||
<p:dialog id="dlgDetails"
|
||||
widgetVar="dlgDetails"
|
||||
header="Détails de l'Événement"
|
||||
modal="true"
|
||||
width="700"
|
||||
height="500"
|
||||
styleClass="surface-0">
|
||||
<div class="ui-fluid">
|
||||
<div class="grid" rendered="#{auditBean.evenementSelectionne != null}">
|
||||
<div class="col-12">
|
||||
<div class="surface-100 border-round-lg p-4 mb-4">
|
||||
<h4 class="text-900 font-bold mb-3">Informations Générales</h4>
|
||||
resizable="false"
|
||||
style="width: 90vw; max-width: 800px;">
|
||||
<div class="grid" rendered="#{auditBean.evenementSelectionne != null}">
|
||||
<div class="col-12">
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:define name="title">Informations Générales</ui:define>
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<label class="text-600 font-semibold">Date/Heure :</label>
|
||||
<p class="text-900 mt-1">#{auditBean.evenementSelectionne.dateHeureComplete}</p>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Date/Heure</label>
|
||||
<div>#{auditBean.evenementSelectionne.dateHeureComplete}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="text-600 font-semibold">Sévérité :</label>
|
||||
<p class="mt-1">
|
||||
<p:tag value="#{auditBean.evenementSelectionne.severiteLibelle}"
|
||||
severity="#{auditBean.evenementSelectionne.severiteSeverity}" />
|
||||
</p>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Sévérité</label>
|
||||
<div>
|
||||
<p:tag value="#{auditBean.evenementSelectionne.severiteLibelle}"
|
||||
severity="#{auditBean.evenementSelectionne.severiteSeverity}" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="text-600 font-semibold">Utilisateur :</label>
|
||||
<p class="text-900 mt-1">#{auditBean.evenementSelectionne.utilisateur}</p>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Utilisateur</label>
|
||||
<div>#{auditBean.evenementSelectionne.utilisateur}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="text-600 font-semibold">Rôle :</label>
|
||||
<p class="text-900 mt-1">#{auditBean.evenementSelectionne.role}</p>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Rôle</label>
|
||||
<div>#{auditBean.evenementSelectionne.role}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round-lg p-4 mb-4">
|
||||
<h4 class="text-900 font-bold mb-3">Détails de l'Action</h4>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:define name="title">Détails de l'Action</ui:define>
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<label class="text-600 font-semibold">Description :</label>
|
||||
<p class="text-900 mt-1">#{auditBean.evenementSelectionne.descriptionComplete}</p>
|
||||
<div class="field">
|
||||
<label class="font-semibold">Description</label>
|
||||
<div>#{auditBean.evenementSelectionne.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" rendered="#{not empty auditBean.evenementSelectionne.details}">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Détails</label>
|
||||
<div class="surface-50 p-3 border-round">#{auditBean.evenementSelectionne.details}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" rendered="#{not empty auditBean.evenementSelectionne.donneesAvant}">
|
||||
<label class="text-600 font-semibold">Données Avant :</label>
|
||||
<pre class="surface-200 border-round p-2 mt-1 text-sm">#{auditBean.evenementSelectionne.donneesAvant}</pre>
|
||||
<div class="field">
|
||||
<label class="font-semibold">Données Avant</label>
|
||||
<pre class="surface-200 border-round p-2 text-sm">#{auditBean.evenementSelectionne.donneesAvant}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" rendered="#{not empty auditBean.evenementSelectionne.donneesApres}">
|
||||
<label class="text-600 font-semibold">Données Après :</label>
|
||||
<pre class="surface-200 border-round p-2 mt-1 text-sm">#{auditBean.evenementSelectionne.donneesApres}</pre>
|
||||
<div class="field">
|
||||
<label class="font-semibold">Données Après</label>
|
||||
<pre class="surface-200 border-round p-2 text-sm">#{auditBean.evenementSelectionne.donneesApres}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round-lg p-4">
|
||||
<h4 class="text-900 font-bold mb-3">Informations Techniques</h4>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:define name="title">Informations Techniques</ui:define>
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<label class="text-600 font-semibold">Adresse IP :</label>
|
||||
<p class="text-900 mt-1">#{auditBean.evenementSelectionne.ipAddress}</p>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Adresse IP</label>
|
||||
<div>#{auditBean.evenementSelectionne.ipAddress}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="text-600 font-semibold">Session ID :</label>
|
||||
<p class="text-900 mt-1 text-xs">#{auditBean.evenementSelectionne.sessionId}</p>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Session ID</label>
|
||||
<div class="text-sm">#{auditBean.evenementSelectionne.sessionId}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<label class="text-600 font-semibold">User Agent :</label>
|
||||
<p class="text-900 mt-1 text-sm">#{auditBean.evenementSelectionne.userAgentComplet}</p>
|
||||
<div class="field">
|
||||
<label class="font-semibold">User Agent</label>
|
||||
<div class="text-sm">#{auditBean.evenementSelectionne.userAgent}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<f:facet name="footer">
|
||||
<p:commandButton value="Fermer"
|
||||
icon="pi pi-times"
|
||||
onclick="PF('dlgDetails').hide();"
|
||||
styleClass="p-button-outlined" />
|
||||
</f:facet>
|
||||
</p:dialog>
|
||||
</h:form>
|
||||
|
||||
<!-- Dialog Export -->
|
||||
<!-- Dialog Export -->
|
||||
<h:form id="formExport">
|
||||
<p:dialog id="exportDialog"
|
||||
widgetVar="exportDialog"
|
||||
header="Exporter le Journal d'Audit"
|
||||
modal="true"
|
||||
width="500"
|
||||
styleClass="surface-0">
|
||||
<h:form id="exportForm">
|
||||
<div class="ui-fluid">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12">
|
||||
<label for="formatExport" class="block text-900 font-semibold mb-2">Format d'Export</label>
|
||||
<p:selectOneRadio id="formatExport"
|
||||
value="#{auditBean.formatExport}"
|
||||
layout="grid"
|
||||
columns="1">
|
||||
<f:selectItem itemLabel="Excel (.xlsx)" itemValue="EXCEL" />
|
||||
<f:selectItem itemLabel="PDF" itemValue="PDF" />
|
||||
<f:selectItem itemLabel="CSV" itemValue="CSV" />
|
||||
<f:selectItem itemLabel="JSON" itemValue="JSON" />
|
||||
</p:selectOneRadio>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label class="block text-900 font-semibold mb-2">Options</label>
|
||||
<p:selectBooleanCheckbox id="inclureFiltres"
|
||||
value="#{auditBean.inclureFiltresExport}"
|
||||
itemLabel="Inclure uniquement les données filtrées" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-4">
|
||||
<p:commandButton value="Annuler"
|
||||
styleClass="p-button-outlined"
|
||||
onclick="PF('exportDialog').hide()"
|
||||
type="button" />
|
||||
<p:commandButton value="Exporter"
|
||||
styleClass="p-button-success"
|
||||
icon="pi pi-download"
|
||||
action="#{auditBean.exporter}"
|
||||
ajax="false" />
|
||||
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="#{auditBean.formatExport}"
|
||||
layout="grid"
|
||||
columns="1">
|
||||
<f:selectItem itemLabel="Excel (.xlsx)" itemValue="EXCEL" />
|
||||
<f:selectItem itemLabel="PDF" itemValue="PDF" />
|
||||
<f:selectItem itemLabel="CSV" itemValue="CSV" />
|
||||
<f:selectItem itemLabel="JSON" itemValue="JSON" />
|
||||
</p:selectOneRadio>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<p:selectBooleanCheckbox id="inclureFiltres"
|
||||
value="#{auditBean.inclureFiltresExport}"
|
||||
itemLabel="Inclure uniquement les données filtrées" />
|
||||
</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('exportDialog').hide();"
|
||||
type="button" />
|
||||
<p:commandButton value="Exporter"
|
||||
icon="pi pi-download"
|
||||
styleClass="p-button-success"
|
||||
action="#{auditBean.exporter}" />
|
||||
</div>
|
||||
</f:facet>
|
||||
</p:dialog>
|
||||
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
</ui:composition>
|
||||
|
||||
@@ -1,51 +1,114 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">Demande d'Adhésion - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-user-plus text-green-500" />
|
||||
<ui:param name="title" value="Demande d'Adhésion" />
|
||||
<ui:param name="description" value="Formulaire de demande d'adhésion à une organisation" />
|
||||
</ui:include>
|
||||
|
||||
<!-- Formulaire de demande -->
|
||||
<div class="card">
|
||||
<h5>Demande d'Adhésion</h5>
|
||||
<p>Formulaire de demande d'adhésion à l'union.</p>
|
||||
|
||||
<h:form>
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="membreNom">Nom du Membre</label>
|
||||
<p:selectOneMenu id="membreNom">
|
||||
<f:selectItem itemLabel="Sélectionner un membre" itemValue="" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<label for="typeAdhesion">Type d'Adhésion</label>
|
||||
<p:selectOneMenu id="typeAdhesion">
|
||||
<f:selectItem itemLabel="Adhésion Standard" itemValue="standard" />
|
||||
<f:selectItem itemLabel="Adhésion Premium" itemValue="premium" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="motifAdhesion">Motif de la demande</label>
|
||||
<p:inputTextarea id="motifAdhesion" rows="4" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Soumettre la demande" />
|
||||
<ui:param name="icon" value="pi pi-send" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="outlined" value="false" />
|
||||
<ui:param name="styleClass" value="ml-2" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<h:form id="formDemande">
|
||||
<h5>Nouvelle Demande d'Adhésion</h5>
|
||||
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:param name="title" value="Informations du Membre" />
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="membreId" value="Membre" />
|
||||
<p:selectOneMenu id="membreId"
|
||||
value="#{adhesionsBean.nouvelleAdhesion.membreId}"
|
||||
required="true"
|
||||
requiredMessage="Veuillez sélectionner un membre"
|
||||
filter="true"
|
||||
filterMatchMode="contains"
|
||||
styleClass="w-full">
|
||||
<f:selectItems value="#{adhesionsBean.membresSelectItems}" />
|
||||
</p:selectOneMenu>
|
||||
<p:message for="membreId" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="organisationId" value="Organisation" />
|
||||
<p:selectOneMenu id="organisationId"
|
||||
value="#{adhesionsBean.nouvelleAdhesion.organisationId}"
|
||||
required="true"
|
||||
requiredMessage="Veuillez sélectionner une organisation"
|
||||
filter="true"
|
||||
filterMatchMode="contains"
|
||||
styleClass="w-full">
|
||||
<f:selectItems value="#{adhesionsBean.associationsSelectItems}" />
|
||||
</p:selectOneMenu>
|
||||
<p:message for="organisationId" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:param name="title" value="Frais d'Adhésion" />
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="fraisAdhesion" value="Frais d'adhésion (FCFA)" />
|
||||
<p:inputNumber id="fraisAdhesion"
|
||||
value="#{adhesionsBean.nouvelleAdhesion.fraisAdhesion}"
|
||||
symbol=""
|
||||
minValue="0"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:param name="title" value="Observations" />
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="observations" />
|
||||
<ui:param name="label" value="Observations (optionnel)" />
|
||||
<ui:param name="value" value="#{adhesionsBean.nouvelleAdhesion.observations}" />
|
||||
<ui:param name="rows" value="4" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="action" value="#{navigationBean.goToDashboard}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Soumettre la demande" />
|
||||
<ui:param name="icon" value="pi pi-send" />
|
||||
<ui:param name="action" value="#{adhesionsBean.enregistrerAdhesion}" />
|
||||
<ui:param name="update" value="@form" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
@@ -5,16 +5,254 @@
|
||||
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
<ui:define name="title">UnionFlow - History</ui:define>
|
||||
|
||||
<ui:define name="title">Historique des Adhésions - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h2>History - Adhesion</h2>
|
||||
<p>Page en cours de développement...</p>
|
||||
<p:button value="Retour" icon="pi pi-arrow-left" outcome="/pages/secure/dashboard"/>
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-history text-blue-500" />
|
||||
<ui:param name="title" value="Historique des Adhésions" />
|
||||
<ui:param name="description" value="Consultation de l'historique complet des adhésions" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsHistory">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Exporter" />
|
||||
<ui:param name="icon" value="pi pi-download" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{adhesionsBean.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 d'historique -->
|
||||
<div class="card">
|
||||
<h:form id="formFiltresHistory">
|
||||
<h5>Filtres de Recherche</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateDebut" />
|
||||
<ui:param name="label" value="Date début" />
|
||||
<ui:param name="value" value="#{adhesionsBean.filtres.dateDebut}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateFin" />
|
||||
<ui:param name="label" value="Date fin" />
|
||||
<ui:param name="value" value="#{adhesionsBean.filtres.dateFin}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="statutHistory" />
|
||||
<ui:param name="label" value="Statut" />
|
||||
<ui:param name="value" value="#{adhesionsBean.filtres.statut}" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Tous" itemValue="" />
|
||||
<f:selectItem itemLabel="En attente" itemValue="EN_ATTENTE" />
|
||||
<f:selectItem itemLabel="Approuvée" itemValue="APPROUVEE" />
|
||||
<f:selectItem itemLabel="Rejetée" itemValue="REJETEE" />
|
||||
<f:selectItem itemLabel="Payée" itemValue="PAYEE" />
|
||||
<f:selectItem itemLabel="En paiement" itemValue="EN_PAIEMENT" />
|
||||
<f:selectItem itemLabel="Annulée" itemValue="ANNULEE" />
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="field">
|
||||
<p:outputLabel />
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Rechercher" />
|
||||
<ui:param name="icon" value="pi pi-search" />
|
||||
<ui:param name="action" value="#{adhesionsBean.rechercher}" />
|
||||
<ui:param name="update" value=":formHistory" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Réinitialiser" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="action" value="#{adhesionsBean.reinitialiserFiltres}" />
|
||||
<ui:param name="update" value="@form :formHistory" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Tableau d'historique -->
|
||||
<div class="card">
|
||||
<h:form id="formHistory">
|
||||
<h5>Historique des Adhésions</h5>
|
||||
|
||||
<p:dataTable id="dtHistory"
|
||||
value="#{adhesionsBean.adhesionsFiltrees}"
|
||||
var="adhesion"
|
||||
paginator="true"
|
||||
rows="20"
|
||||
rowsPerPageTemplate="10,20,50,100"
|
||||
sortMode="multiple"
|
||||
emptyMessage="Aucune adhésion trouvée">
|
||||
|
||||
<f:facet name="header">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span>Historique (#{adhesionsBean.adhesionsFiltrees.size()} adhésion(s))</span>
|
||||
</div>
|
||||
</f:facet>
|
||||
|
||||
<p:column headerText="Date" sortBy="#{adhesion.dateDemande}" style="width:120px">
|
||||
<h:outputText value="#{adhesion.dateDemandeFormatee}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Référence" sortBy="#{adhesion.numeroReference}" style="width:150px">
|
||||
<h:outputText value="#{adhesion.numeroReference}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Membre" sortBy="#{adhesion.nomMembre}">
|
||||
<div>
|
||||
<div class="font-medium">#{adhesion.nomMembre}</div>
|
||||
<div class="text-600 text-sm">#{adhesion.numeroMembre}</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Organisation" sortBy="#{adhesion.nomOrganisation}">
|
||||
<h:outputText value="#{adhesion.nomOrganisation}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Frais" sortBy="#{adhesion.fraisAdhesion}" style="width:120px">
|
||||
<h:outputText value="#{adhesion.fraisAdhesionFormatte}" styleClass="font-bold" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut" sortBy="#{adhesion.statut}" style="width:150px">
|
||||
<p:tag value="#{adhesion.statutLibelle}"
|
||||
severity="#{adhesion.statutSeverity}"
|
||||
icon="#{adhesion.statutIcon}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date Approbation" sortBy="#{adhesion.dateApprobation}" style="width:150px">
|
||||
<h:outputText value="#{adhesion.dateApprobationFormatee}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date Paiement" sortBy="#{adhesion.datePaiement}" style="width:150px">
|
||||
<h:outputText value="#{adhesion.datePaiementFormatee}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:100px">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
title="Voir les détails"
|
||||
styleClass="p-button-rounded p-button-text p-button-info"
|
||||
action="#{adhesionsBean.selectionnerAdhesion(adhesion)}"
|
||||
update=":formDetailsAdhesion"
|
||||
oncomplete="PF('dlgDetailsAdhesion').show();" />
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Détails Adhésion -->
|
||||
<p:dialog header="Détails de l'Adhésion" widgetVar="dlgDetailsAdhesion" modal="true" width="600" resizable="false">
|
||||
<h:form id="formDetailsAdhesion">
|
||||
<div class="ui-fluid">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Référence</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.numeroReference}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Statut</label>
|
||||
<p:tag value="#{adhesionsBean.adhesionSelectionnee.statutLibelle}"
|
||||
severity="#{adhesionsBean.adhesionSelectionnee.statutSeverity}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<label class="font-medium">Membre</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.nomMembre}</p>
|
||||
<p class="text-500 text-sm">N° #{adhesionsBean.adhesionSelectionnee.numeroMembre}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<label class="font-medium">Organisation</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.nomOrganisation}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Date de demande</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.dateDemandeFormatee}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Frais d'adhésion</label>
|
||||
<p class="text-600 font-bold">#{adhesionsBean.adhesionSelectionnee.fraisAdhesionFormatte}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<label class="font-medium">Montant payé</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.montantPayeFormatte}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<label class="font-medium">Montant restant</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.montantRestantFormatte}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<label class="font-medium">Date d'approbation</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.dateApprobationFormatee}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Date de paiement</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.datePaiementFormatee}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Méthode de paiement</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.methodePaiementLibelle}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" rendered="#{adhesionsBean.adhesionSelectionnee.observations != null}">
|
||||
<div class="field">
|
||||
<label class="font-medium">Observations</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.observations}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" rendered="#{adhesionsBean.adhesionSelectionnee.motifRejet != null}">
|
||||
<div class="field">
|
||||
<label class="font-medium">Motif de rejet</label>
|
||||
<p class="text-600 text-red-500">#{adhesionsBean.adhesionSelectionnee.motifRejet}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
@@ -1,39 +1,416 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">Liste Adhésions - UnionFlow</ui:define>
|
||||
<ui:define name="title">Liste des Adhésions - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="card">
|
||||
<h5>Liste des Adhésions</h5>
|
||||
<p>Vue d'ensemble de toutes les adhésions.</p>
|
||||
|
||||
<p:dataTable var="adhesion" value="#{[]}" paginator="true" rows="10">
|
||||
<p:column headerText="Membre">
|
||||
<h:outputText value="#{adhesion.membre}" />
|
||||
</p:column>
|
||||
<p:column headerText="Date Adhésion">
|
||||
<h:outputText value="#{adhesion.dateAdhesion}" />
|
||||
</p:column>
|
||||
<p:column headerText="Statut">
|
||||
<h:outputText value="#{adhesion.statut}" />
|
||||
</p:column>
|
||||
<p:column headerText="Actions">
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-eye" />
|
||||
<ui:param name="severity" value="info" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-pencil" />
|
||||
<ui:param name="severity" value="success" />
|
||||
</ui:include>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</div>
|
||||
</ui:define>
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-users text-blue-500" />
|
||||
<ui:param name="title" value="Liste des Adhésions" />
|
||||
<ui:param name="description" value="Gestion complète des demandes d'adhésion" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsListe">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Nouvelle adhésion" />
|
||||
<ui:param name="icon" value="pi pi-plus" />
|
||||
<ui:param name="onclick" value="PF('dlgNouvelleAdhesion').show();" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{adhesionsBean.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>
|
||||
|
||||
</ui:composition>
|
||||
<!-- Statistiques -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.totalAdhesions}" />
|
||||
<ui:param name="label" value="Total Adhésions" />
|
||||
<ui:param name="icon" value="pi pi-users" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsEnAttente}" />
|
||||
<ui:param name="label" value="En Attente" />
|
||||
<ui:param name="icon" value="pi pi-clock" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsApprouvees}" />
|
||||
<ui:param name="label" value="Approuvées" />
|
||||
<ui:param name="icon" value="pi pi-check-circle" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.tauxApprobationInt}%" />
|
||||
<ui:param name="label" value="Taux d'Approbation" />
|
||||
<ui:param name="icon" value="pi pi-percentage" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Filtres -->
|
||||
<div class="card">
|
||||
<h:form id="formFiltres">
|
||||
<h5>Filtres de Recherche</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="filtreStatut" />
|
||||
<ui:param name="label" value="Statut" />
|
||||
<ui:param name="value" value="#{adhesionsBean.filtres.statut}" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Tous" itemValue="" />
|
||||
<f:selectItem itemLabel="En attente" itemValue="EN_ATTENTE" />
|
||||
<f:selectItem itemLabel="Approuvée" itemValue="APPROUVEE" />
|
||||
<f:selectItem itemLabel="Rejetée" itemValue="REJETEE" />
|
||||
<f:selectItem itemLabel="Payée" itemValue="PAYEE" />
|
||||
<f:selectItem itemLabel="En paiement" itemValue="EN_PAIEMENT" />
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="filtreNomMembre" />
|
||||
<ui:param name="label" value="Nom du membre" />
|
||||
<ui:param name="value" value="#{adhesionsBean.filtres.nomMembre}" />
|
||||
<ui:param name="placeholder" value="Rechercher par nom..." />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="filtreDateDebut" />
|
||||
<ui:param name="label" value="Date début" />
|
||||
<ui:param name="value" value="#{adhesionsBean.filtres.dateDebut}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="field">
|
||||
<p:outputLabel />
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Rechercher" />
|
||||
<ui:param name="icon" value="pi pi-search" />
|
||||
<ui:param name="action" value="#{adhesionsBean.rechercher}" />
|
||||
<ui:param name="update" value=":formListe" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Réinitialiser" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="action" value="#{adhesionsBean.reinitialiserFiltres}" />
|
||||
<ui:param name="update" value="@form :formListe" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Liste des adhésions -->
|
||||
<div class="card">
|
||||
<h:form id="formListe">
|
||||
<h5>Adhésions</h5>
|
||||
|
||||
<p:dataTable id="dtAdhesions"
|
||||
value="#{adhesionsBean.adhesionsFiltrees}"
|
||||
var="adhesion"
|
||||
paginator="true"
|
||||
rows="20"
|
||||
rowsPerPageTemplate="10,20,50,100"
|
||||
sortMode="multiple"
|
||||
emptyMessage="Aucune adhésion trouvée"
|
||||
selection="#{adhesionsBean.adhesionsSelectionnees}"
|
||||
selectionMode="multiple">
|
||||
|
||||
<f:facet name="header">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span>Liste des adhésions (#{adhesionsBean.adhesionsFiltrees.size()} adhésion(s))</span>
|
||||
</div>
|
||||
</f:facet>
|
||||
|
||||
<p:column selectionMode="multiple" style="width:50px" />
|
||||
|
||||
<p:column headerText="Référence" sortBy="#{adhesion.numeroReference}" style="width:150px">
|
||||
<h:outputText value="#{adhesion.numeroReference}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Membre" sortBy="#{adhesion.nomMembre}">
|
||||
<div>
|
||||
<div class="font-medium">#{adhesion.nomMembre}</div>
|
||||
<div class="text-600 text-sm">#{adhesion.numeroMembre}</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Organisation" sortBy="#{adhesion.nomOrganisation}">
|
||||
<h:outputText value="#{adhesion.nomOrganisation}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date Demande" sortBy="#{adhesion.dateDemande}" style="width:120px">
|
||||
<h:outputText value="#{adhesion.dateDemandeFormatee}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Frais" sortBy="#{adhesion.fraisAdhesion}" style="width:120px">
|
||||
<h:outputText value="#{adhesion.fraisAdhesionFormatte}" styleClass="font-bold" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut" sortBy="#{adhesion.statut}" style="width:150px">
|
||||
<p:tag value="#{adhesion.statutLibelle}"
|
||||
severity="#{adhesion.statutSeverity}"
|
||||
icon="#{adhesion.statutIcon}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:200px">
|
||||
<div class="flex gap-1">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
title="Voir les détails"
|
||||
styleClass="p-button-rounded p-button-text p-button-info"
|
||||
action="#{adhesionsBean.selectionnerAdhesion(adhesion)}"
|
||||
update=":formDetailsAdhesion"
|
||||
oncomplete="PF('dlgDetailsAdhesion').show();" />
|
||||
<p:commandButton icon="pi pi-check"
|
||||
title="Approuver"
|
||||
styleClass="p-button-rounded p-button-text p-button-success"
|
||||
rendered="#{'EN_ATTENTE' == adhesion.statut}"
|
||||
action="#{adhesionsBean.selectionnerAdhesion(adhesion)}"
|
||||
update=":formApprobation"
|
||||
oncomplete="PF('dlgApprobation').show();" />
|
||||
<p:commandButton icon="pi pi-times"
|
||||
title="Rejeter"
|
||||
styleClass="p-button-rounded p-button-text p-button-danger"
|
||||
rendered="#{'EN_ATTENTE' == adhesion.statut}"
|
||||
action="#{adhesionsBean.selectionnerAdhesion(adhesion)}"
|
||||
update=":formRejet"
|
||||
oncomplete="PF('dlgRejet').show();" />
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Nouvelle Adhésion -->
|
||||
<p:dialog header="Nouvelle Adhésion" widgetVar="dlgNouvelleAdhesion" modal="true" width="600" resizable="false">
|
||||
<h:form id="formNouvelleAdhesion">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<p:outputLabel for="membreId" value="Membre" />
|
||||
<p:selectOneMenu id="membreId"
|
||||
value="#{adhesionsBean.nouvelleAdhesion.membreId}"
|
||||
required="true"
|
||||
requiredMessage="Veuillez sélectionner un membre"
|
||||
filter="true"
|
||||
filterMatchMode="contains"
|
||||
styleClass="w-full">
|
||||
<f:selectItems value="#{adhesionsBean.membresSelectItems}" />
|
||||
</p:selectOneMenu>
|
||||
<p:message for="membreId" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="organisationId" value="Organisation" />
|
||||
<p:selectOneMenu id="organisationId"
|
||||
value="#{adhesionsBean.nouvelleAdhesion.organisationId}"
|
||||
required="true"
|
||||
requiredMessage="Veuillez sélectionner une organisation"
|
||||
filter="true"
|
||||
filterMatchMode="contains"
|
||||
styleClass="w-full">
|
||||
<f:selectItems value="#{adhesionsBean.associationsSelectItems}" />
|
||||
</p:selectOneMenu>
|
||||
<p:message for="organisationId" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="fraisAdhesion" value="Frais d'adhésion (FCFA)" />
|
||||
<p:inputNumber id="fraisAdhesion"
|
||||
value="#{adhesionsBean.nouvelleAdhesion.fraisAdhesion}"
|
||||
symbol=""
|
||||
minValue="0"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="observations" />
|
||||
<ui:param name="label" value="Observations" />
|
||||
<ui:param name="value" value="#{adhesionsBean.nouvelleAdhesion.observations}" />
|
||||
<ui:param name="rows" value="3" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgNouvelleAdhesion').hide();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Créer" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{adhesionsBean.enregistrerAdhesion}" />
|
||||
<ui:param name="update" value="@form :formListe" />
|
||||
<ui:param name="oncomplete" value="PF('dlgNouvelleAdhesion').hide();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
<!-- Dialog Détails Adhésion -->
|
||||
<p:dialog header="Détails de l'Adhésion" widgetVar="dlgDetailsAdhesion" modal="true" width="600" resizable="false">
|
||||
<h:form id="formDetailsAdhesion">
|
||||
<div class="ui-fluid">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Référence</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.numeroReference}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Statut</label>
|
||||
<p:tag value="#{adhesionsBean.adhesionSelectionnee.statutLibelle}"
|
||||
severity="#{adhesionsBean.adhesionSelectionnee.statutSeverity}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<label class="font-medium">Membre</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.nomMembre}</p>
|
||||
<p class="text-500 text-sm">N° #{adhesionsBean.adhesionSelectionnee.numeroMembre}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<label class="font-medium">Organisation</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.nomOrganisation}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Date de demande</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.dateDemandeFormatee}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Frais d'adhésion</label>
|
||||
<p class="text-600 font-bold">#{adhesionsBean.adhesionSelectionnee.fraisAdhesionFormatte}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Montant payé</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.montantPayeFormatte}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Montant restant</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.montantRestantFormatte}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" rendered="#{adhesionsBean.adhesionSelectionnee.dateApprobation != null}">
|
||||
<div class="field">
|
||||
<label class="font-medium">Date d'approbation</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.dateApprobationFormatee}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" rendered="#{adhesionsBean.adhesionSelectionnee.observations != null}">
|
||||
<div class="field">
|
||||
<label class="font-medium">Observations</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.observations}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
<!-- Dialog Approbation -->
|
||||
<p:dialog header="Approuver l'Adhésion" widgetVar="dlgApprobation" modal="true" width="500" resizable="false">
|
||||
<h:form id="formApprobation">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<label class="font-medium">Adhésion</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.numeroReference} - #{adhesionsBean.adhesionSelectionnee.nomMembre}</p>
|
||||
<p class="text-500 text-sm">Frais: #{adhesionsBean.adhesionSelectionnee.fraisAdhesionFormatte}</p>
|
||||
</div>
|
||||
|
||||
<p:message id="msgApprobation" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgApprobation').hide();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Approuver" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{adhesionsBean.approuverAdhesion}" />
|
||||
<ui:param name="update" value="@form :formListe" />
|
||||
<ui:param name="oncomplete" value="PF('dlgApprobation').hide();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
<!-- Dialog Rejet -->
|
||||
<p:dialog header="Rejeter l'Adhésion" widgetVar="dlgRejet" modal="true" width="500" resizable="false">
|
||||
<h:form id="formRejet">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<label class="font-medium">Adhésion</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.numeroReference} - #{adhesionsBean.adhesionSelectionnee.nomMembre}</p>
|
||||
</div>
|
||||
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="motifRejet" />
|
||||
<ui:param name="label" value="Motif du rejet" />
|
||||
<ui:param name="value" value="#{adhesionsBean.adhesionSelectionnee.motifRejet}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="rows" value="4" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgRejet').hide();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<p:commandButton value="Rejeter"
|
||||
icon="pi pi-times"
|
||||
styleClass="p-button-danger"
|
||||
action="#{adhesionsBean.rejeterAdhesion(adhesionsBean.adhesionSelectionnee.motifRejet)}"
|
||||
update="@form :formListe"
|
||||
oncomplete="PF('dlgRejet').hide();" />
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
@@ -5,16 +5,110 @@
|
||||
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
<ui:define name="title">UnionFlow - New</ui:define>
|
||||
|
||||
<ui:define name="title">Nouvelle Adhésion - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h2>New - Adhesion</h2>
|
||||
<p>Page en cours de développement...</p>
|
||||
<p:button value="Retour" icon="pi pi-arrow-left" outcome="/pages/secure/dashboard"/>
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-user-plus text-green-500" />
|
||||
<ui:param name="title" value="Nouvelle Adhésion" />
|
||||
<ui:param name="description" value="Création d'une nouvelle demande d'adhésion" />
|
||||
</ui:include>
|
||||
|
||||
<!-- Formulaire de nouvelle adhésion -->
|
||||
<div class="card">
|
||||
<h:form id="formNouvelleAdhesion">
|
||||
<h5>Créer une Nouvelle Adhésion</h5>
|
||||
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:param name="title" value="Informations du Membre" />
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="membreId" value="Membre" />
|
||||
<p:selectOneMenu id="membreId"
|
||||
value="#{adhesionsBean.nouvelleAdhesion.membreId}"
|
||||
required="true"
|
||||
requiredMessage="Veuillez sélectionner un membre"
|
||||
filter="true"
|
||||
filterMatchMode="contains"
|
||||
styleClass="w-full">
|
||||
<f:selectItems value="#{adhesionsBean.membresSelectItems}" />
|
||||
</p:selectOneMenu>
|
||||
<p:message for="membreId" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="organisationId" value="Organisation" />
|
||||
<p:selectOneMenu id="organisationId"
|
||||
value="#{adhesionsBean.nouvelleAdhesion.organisationId}"
|
||||
required="true"
|
||||
requiredMessage="Veuillez sélectionner une organisation"
|
||||
filter="true"
|
||||
filterMatchMode="contains"
|
||||
styleClass="w-full">
|
||||
<f:selectItems value="#{adhesionsBean.associationsSelectItems}" />
|
||||
</p:selectOneMenu>
|
||||
<p:message for="organisationId" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:param name="title" value="Frais d'Adhésion" />
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="fraisAdhesion" value="Frais d'adhésion (FCFA)" />
|
||||
<p:inputNumber id="fraisAdhesion"
|
||||
value="#{adhesionsBean.nouvelleAdhesion.fraisAdhesion}"
|
||||
symbol=""
|
||||
minValue="0"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:param name="title" value="Observations" />
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="observations" />
|
||||
<ui:param name="label" value="Observations (optionnel)" />
|
||||
<ui:param name="value" value="#{adhesionsBean.nouvelleAdhesion.observations}" />
|
||||
<ui:param name="rows" value="4" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="action" value="#{navigationBean.goToDashboard}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Créer l'adhésion" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{adhesionsBean.enregistrerAdhesion}" />
|
||||
<ui:param name="update" value="@form" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
@@ -0,0 +1,260 @@
|
||||
<!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">Paiement des Adhésions - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-credit-card text-green-500" />
|
||||
<ui:param name="title" value="Paiement des Adhésions" />
|
||||
<ui:param name="description" value="Enregistrement et suivi des paiements d'adhésion" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsPaiement">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{adhesionsBean.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 de paiement -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.totalCollecteFormatte}" />
|
||||
<ui:param name="label" value="Total Collecté" />
|
||||
<ui:param name="icon" value="pi pi-wallet" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsPayees}" />
|
||||
<ui:param name="label" value="Adhésions Payées" />
|
||||
<ui:param name="icon" value="pi pi-check-circle" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.tauxPaiementInt}%" />
|
||||
<ui:param name="label" value="Taux de Paiement" />
|
||||
<ui:param name="icon" value="pi pi-percentage" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsApprouvees - adhesionsBean.statistiques.adhesionsPayees}" />
|
||||
<ui:param name="label" value="En Attente de Paiement" />
|
||||
<ui:param name="icon" value="pi pi-clock" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Adhésions approuvées en attente de paiement -->
|
||||
<div class="card">
|
||||
<h:form id="formPaiements">
|
||||
<h5>Adhésions Approuvées en Attente de Paiement</h5>
|
||||
|
||||
<p:dataTable id="dtPaiements"
|
||||
value="#{adhesionsBean.adhesionsFiltrees}"
|
||||
var="adhesion"
|
||||
filteredValue="#{adhesionsBean.adhesionsFiltrees}"
|
||||
paginator="true"
|
||||
rows="20"
|
||||
emptyMessage="Aucune adhésion en attente de paiement"
|
||||
selection="#{adhesionsBean.adhesionSelectionnee}"
|
||||
selectionMode="single">
|
||||
|
||||
<f:facet name="header">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span>Adhésions à payer</span>
|
||||
<p:selectOneMenu value="#{adhesionsBean.filtres.statut}" styleClass="w-12rem">
|
||||
<f:selectItem itemLabel="Tous" itemValue="" />
|
||||
<f:selectItem itemLabel="Approuvée" itemValue="APPROUVEE" />
|
||||
<f:selectItem itemLabel="En paiement" itemValue="EN_PAIEMENT" />
|
||||
<p:ajax update="dtPaiements" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</f:facet>
|
||||
|
||||
<p:column headerText="Membre" sortBy="#{adhesion.nomMembre}">
|
||||
<div>
|
||||
<div class="font-medium">#{adhesion.nomMembre}</div>
|
||||
<div class="text-600 text-sm">#{adhesion.numeroMembre}</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Organisation" sortBy="#{adhesion.nomOrganisation}">
|
||||
<h:outputText value="#{adhesion.nomOrganisation}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Frais" sortBy="#{adhesion.fraisAdhesion}" style="width:120px">
|
||||
<h:outputText value="#{adhesion.fraisAdhesionFormatte}" styleClass="font-bold" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Montant Payé" sortBy="#{adhesion.montantPaye}" style="width:120px">
|
||||
<h:outputText value="#{adhesion.montantPayeFormatte}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Restant" style="width:120px">
|
||||
<h:outputText value="#{adhesion.montantRestantFormatte}"
|
||||
styleClass="#{adhesion.montantRestant.compareTo(java.math.BigDecimal.ZERO) > 0 ? 'text-orange-500 font-bold' : 'text-green-500'}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date Approbation" sortBy="#{adhesion.dateApprobation}" style="width:150px">
|
||||
<h:outputText value="#{adhesion.dateApprobationFormatee}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:200px">
|
||||
<div class="flex gap-1">
|
||||
<p:commandButton value="Payer"
|
||||
icon="pi pi-check"
|
||||
styleClass="p-button-success p-button-sm"
|
||||
action="#{adhesionsBean.selectionnerAdhesion(adhesion)}"
|
||||
update=":formPaiement"
|
||||
oncomplete="PF('dlgPaiement').show();" />
|
||||
<p:commandButton value="Partiel"
|
||||
icon="pi pi-minus"
|
||||
styleClass="p-button-info p-button-sm"
|
||||
action="#{adhesionsBean.selectionnerAdhesion(adhesion)}"
|
||||
update=":formPaiementPartiel"
|
||||
oncomplete="PF('dlgPaiementPartiel').show();" />
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Paiement Complet -->
|
||||
<p:dialog header="Enregistrer un Paiement" widgetVar="dlgPaiement" modal="true" width="500" resizable="false">
|
||||
<h:form id="formPaiement">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<label class="font-medium">Adhésion</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.numeroReference} - #{adhesionsBean.adhesionSelectionnee.nomMembre}</p>
|
||||
<p class="text-500 text-sm">Frais d'adhésion: #{adhesionsBean.adhesionSelectionnee.fraisAdhesionFormatte}</p>
|
||||
</div>
|
||||
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="methodePaiement" />
|
||||
<ui:param name="label" value="Méthode de paiement" />
|
||||
<ui:param name="value" value="#{adhesionsBean.adhesionSelectionnee.methodePaiement}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Wave Money" itemValue="WAVE_MONEY" />
|
||||
<f:selectItem itemLabel="Espèces" itemValue="ESPECES" />
|
||||
<f:selectItem itemLabel="Virement bancaire" itemValue="VIREMENT" />
|
||||
<f:selectItem itemLabel="Chèque" itemValue="CHEQUE" />
|
||||
<f:selectItem itemLabel="Orange Money" itemValue="ORANGE_MONEY" />
|
||||
<f:selectItem itemLabel="Free Money" itemValue="FREE_MONEY" />
|
||||
<f:selectItem itemLabel="Carte bancaire" itemValue="CARTE_BANCAIRE" />
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="referencePaiement" />
|
||||
<ui:param name="label" value="Référence de paiement" />
|
||||
<ui:param name="value" value="#{adhesionsBean.adhesionSelectionnee.referencePaiement}" />
|
||||
<ui:param name="placeholder" value="Ex: WAVE-123456789" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="observationsPaiement" />
|
||||
<ui:param name="label" value="Observations" />
|
||||
<ui:param name="value" value="#{adhesionsBean.adhesionSelectionnee.observations}" />
|
||||
<ui:param name="rows" value="3" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgPaiement').hide();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Enregistrer" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{adhesionsBean.enregistrerPaiement(adhesionsBean.adhesionSelectionnee.fraisAdhesion, adhesionsBean.adhesionSelectionnee.methodePaiement, adhesionsBean.adhesionSelectionnee.referencePaiement)}" />
|
||||
<ui:param name="update" value="@form :formPaiements" />
|
||||
<ui:param name="oncomplete" value="PF('dlgPaiement').hide();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
<!-- Dialog Paiement Partiel -->
|
||||
<p:dialog header="Enregistrer un Paiement Partiel" widgetVar="dlgPaiementPartiel" modal="true" width="500" resizable="false">
|
||||
<h:form id="formPaiementPartiel">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<label class="font-medium">Adhésion</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.numeroReference} - #{adhesionsBean.adhesionSelectionnee.nomMembre}</p>
|
||||
<p class="text-500 text-sm">Frais d'adhésion: #{adhesionsBean.adhesionSelectionnee.fraisAdhesionFormatte}</p>
|
||||
<p class="text-500 text-sm">Montant restant: #{adhesionsBean.adhesionSelectionnee.montantRestantFormatte}</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="montantPaye" value="Montant à payer (FCFA)" />
|
||||
<p:inputNumber id="montantPaye"
|
||||
value="#{adhesionsBean.adhesionSelectionnee.montantPaye}"
|
||||
symbol=""
|
||||
minValue="0"
|
||||
maxValue="#{adhesionsBean.adhesionSelectionnee.fraisAdhesion}"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="methodePaiementPartiel" />
|
||||
<ui:param name="label" value="Méthode de paiement" />
|
||||
<ui:param name="value" value="#{adhesionsBean.adhesionSelectionnee.methodePaiement}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Wave Money" itemValue="WAVE_MONEY" />
|
||||
<f:selectItem itemLabel="Espèces" itemValue="ESPECES" />
|
||||
<f:selectItem itemLabel="Virement bancaire" itemValue="VIREMENT" />
|
||||
<f:selectItem itemLabel="Chèque" itemValue="CHEQUE" />
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="referencePaiementPartiel" />
|
||||
<ui:param name="label" value="Référence de paiement" />
|
||||
<ui:param name="value" value="#{adhesionsBean.adhesionSelectionnee.referencePaiement}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgPaiementPartiel').hide();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Enregistrer" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{adhesionsBean.enregistrerPaiement(adhesionsBean.adhesionSelectionnee.montantPaye, adhesionsBean.adhesionSelectionnee.methodePaiement, adhesionsBean.adhesionSelectionnee.referencePaiement)}" />
|
||||
<ui:param name="update" value="@form :formPaiements" />
|
||||
<ui:param name="oncomplete" value="PF('dlgPaiementPartiel').hide();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
@@ -5,16 +5,252 @@
|
||||
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
<ui:define name="title">UnionFlow - Pending</ui:define>
|
||||
|
||||
<ui:define name="title">Adhésions en Attente - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-clock text-orange-500" />
|
||||
<ui:param name="title" value="Adhésions en Attente" />
|
||||
<ui:param name="description" value="Validation et traitement des demandes d'adhésion en attente" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsPending">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{adhesionsBean.chargerAdhesionsEnAttente}" />
|
||||
<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 -->
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h2>Pending - Adhesion</h2>
|
||||
<p>Page en cours de développement...</p>
|
||||
<p:button value="Retour" icon="pi pi-arrow-left" outcome="/pages/secure/dashboard"/>
|
||||
</div>
|
||||
</div>
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsEnAttente}" />
|
||||
<ui:param name="label" value="En Attente" />
|
||||
<ui:param name="icon" value="pi pi-clock" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsApprouvees}" />
|
||||
<ui:param name="label" value="Approuvées" />
|
||||
<ui:param name="icon" value="pi pi-check-circle" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.tauxApprobationInt}%" />
|
||||
<ui:param name="label" value="Taux d'Approbation" />
|
||||
<ui:param name="icon" value="pi pi-percentage" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.totalCollecteFormatte}" />
|
||||
<ui:param name="label" value="Total Collecté" />
|
||||
<ui:param name="icon" value="pi pi-wallet" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Liste des adhésions en attente -->
|
||||
<div class="card">
|
||||
<h:form id="formPending">
|
||||
<h5>Adhésions en Attente de Validation</h5>
|
||||
|
||||
<p:dataTable id="dtPending"
|
||||
value="#{adhesionsBean.adhesionsFiltrees}"
|
||||
var="adhesion"
|
||||
paginator="true"
|
||||
rows="20"
|
||||
emptyMessage="Aucune adhésion en attente">
|
||||
|
||||
<f:facet name="header">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span>Demandes en attente d'approbation</span>
|
||||
</div>
|
||||
</f:facet>
|
||||
|
||||
<p:column headerText="Référence" sortBy="#{adhesion.numeroReference}" style="width:150px">
|
||||
<h:outputText value="#{adhesion.numeroReference}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Membre" sortBy="#{adhesion.nomMembre}">
|
||||
<div>
|
||||
<div class="font-medium">#{adhesion.nomMembre}</div>
|
||||
<div class="text-600 text-sm">#{adhesion.numeroMembre}</div>
|
||||
<div class="text-500 text-xs">#{adhesion.emailMembre}</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Organisation" sortBy="#{adhesion.nomOrganisation}">
|
||||
<h:outputText value="#{adhesion.nomOrganisation}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date Demande" sortBy="#{adhesion.dateDemande}" style="width:120px">
|
||||
<h:outputText value="#{adhesion.dateDemandeFormatee}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Jours" style="width:80px">
|
||||
<h:outputText value="#{adhesion.joursDepuisDemande} jour(s)" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Frais" sortBy="#{adhesion.fraisAdhesion}" style="width:120px">
|
||||
<h:outputText value="#{adhesion.fraisAdhesionFormatte}" styleClass="font-bold" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:200px">
|
||||
<div class="flex gap-1">
|
||||
<p:commandButton icon="pi pi-check"
|
||||
title="Approuver"
|
||||
styleClass="p-button-rounded p-button-text p-button-success"
|
||||
action="#{adhesionsBean.selectionnerAdhesion(adhesion)}"
|
||||
update=":formApprobation"
|
||||
oncomplete="PF('dlgApprobation').show();" />
|
||||
<p:commandButton icon="pi pi-times"
|
||||
title="Rejeter"
|
||||
styleClass="p-button-rounded p-button-text p-button-danger"
|
||||
action="#{adhesionsBean.selectionnerAdhesion(adhesion)}"
|
||||
update=":formRejet"
|
||||
oncomplete="PF('dlgRejet').show();" />
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
title="Voir les détails"
|
||||
styleClass="p-button-rounded p-button-text p-button-info"
|
||||
action="#{adhesionsBean.selectionnerAdhesion(adhesion)}"
|
||||
update=":formDetailsAdhesion"
|
||||
oncomplete="PF('dlgDetailsAdhesion').show();" />
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Approbation -->
|
||||
<p:dialog header="Approuver l'Adhésion" widgetVar="dlgApprobation" modal="true" width="500" resizable="false">
|
||||
<h:form id="formApprobation">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<label class="font-medium">Adhésion</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.numeroReference} - #{adhesionsBean.adhesionSelectionnee.nomMembre}</p>
|
||||
<p class="text-500 text-sm">Frais: #{adhesionsBean.adhesionSelectionnee.fraisAdhesionFormatte}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgApprobation').hide();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Approuver" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{adhesionsBean.approuverAdhesion}" />
|
||||
<ui:param name="update" value="@form :formPending" />
|
||||
<ui:param name="oncomplete" value="PF('dlgApprobation').hide();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
<!-- Dialog Rejet -->
|
||||
<p:dialog header="Rejeter l'Adhésion" widgetVar="dlgRejet" modal="true" width="500" resizable="false">
|
||||
<h:form id="formRejet">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<label class="font-medium">Adhésion</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.numeroReference} - #{adhesionsBean.adhesionSelectionnee.nomMembre}</p>
|
||||
</div>
|
||||
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="motifRejet" />
|
||||
<ui:param name="label" value="Motif du rejet" />
|
||||
<ui:param name="value" value="#{adhesionsBean.adhesionSelectionnee.motifRejet}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="rows" value="4" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgRejet').hide();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<p:commandButton value="Rejeter"
|
||||
icon="pi pi-times"
|
||||
styleClass="p-button-danger"
|
||||
action="#{adhesionsBean.rejeterAdhesion(adhesionsBean.adhesionSelectionnee.motifRejet)}"
|
||||
update="@form :formPending"
|
||||
oncomplete="PF('dlgRejet').hide();" />
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
<!-- Dialog Détails Adhésion -->
|
||||
<p:dialog header="Détails de l'Adhésion" widgetVar="dlgDetailsAdhesion" modal="true" width="600" resizable="false">
|
||||
<h:form id="formDetailsAdhesion">
|
||||
<div class="ui-fluid">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Référence</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.numeroReference}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Statut</label>
|
||||
<p:tag value="#{adhesionsBean.adhesionSelectionnee.statutLibelle}"
|
||||
severity="#{adhesionsBean.adhesionSelectionnee.statutSeverity}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<label class="font-medium">Membre</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.nomMembre}</p>
|
||||
<p class="text-500 text-sm">N° #{adhesionsBean.adhesionSelectionnee.numeroMembre} - #{adhesionsBean.adhesionSelectionnee.emailMembre}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<label class="font-medium">Organisation</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.nomOrganisation}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Date de demande</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.dateDemandeFormatee}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Frais d'adhésion</label>
|
||||
<p class="text-600 font-bold">#{adhesionsBean.adhesionSelectionnee.fraisAdhesionFormatte}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" rendered="#{adhesionsBean.adhesionSelectionnee.observations != null}">
|
||||
<div class="field">
|
||||
<label class="font-medium">Observations</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.observations}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
@@ -1,47 +1,166 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">Renouvellement Adhésion - UnionFlow</ui:define>
|
||||
<ui:define name="title">Renouvellement d'Adhésion - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="card">
|
||||
<h5>Renouvellement d'Adhésion</h5>
|
||||
<p>Gestion des renouvellements d'adhésion.</p>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h6>Adhésions à Renouveler</h6>
|
||||
<p:dataTable var="adhesion" value="#{[]}">
|
||||
<p:column headerText="Membre">
|
||||
<h:outputText value="#{adhesion.membre}" />
|
||||
</p:column>
|
||||
<p:column headerText="Expiration">
|
||||
<h:outputText value="#{adhesion.dateExpiration}" />
|
||||
</p:column>
|
||||
<p:column headerText="Action">
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Renouveler" />
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="styleClass" value="ui-button-sm" />
|
||||
</ui:include>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh text-blue-500" />
|
||||
<ui:param name="title" value="Renouvellement d'Adhésion" />
|
||||
<ui:param name="description" value="Gestion des renouvellements d'adhésion" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsRenouvellement">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{adhesionsBean.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>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card">
|
||||
<h6>Statistiques</h6>
|
||||
<p>Adhésions expirant ce mois : <strong>5</strong></p>
|
||||
<p>Adhésions renouvelées : <strong>12</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
</ui:composition>
|
||||
<!-- Statistiques -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsPayees}" />
|
||||
<ui:param name="label" value="Adhésions Actives" />
|
||||
<ui:param name="icon" value="pi pi-check-circle" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="0" />
|
||||
<ui:param name="label" value="À Renouveler (ce mois)" />
|
||||
<ui:param name="icon" value="pi pi-clock" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="0" />
|
||||
<ui:param name="label" value="Renouvelées (ce mois)" />
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.totalAdhesions}" />
|
||||
<ui:param name="label" value="Total Adhésions" />
|
||||
<ui:param name="icon" value="pi pi-users" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Liste des adhésions à renouveler -->
|
||||
<div class="card">
|
||||
<h:form id="formRenouvellement">
|
||||
<h5>Adhésions à Renouveler</h5>
|
||||
|
||||
<p:dataTable id="dtRenouvellement"
|
||||
value="#{adhesionsBean.adhesionsFiltrees}"
|
||||
var="adhesion"
|
||||
paginator="true"
|
||||
rows="20"
|
||||
emptyMessage="Aucune adhésion à renouveler">
|
||||
|
||||
<f:facet name="header">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span>Adhésions nécessitant un renouvellement</span>
|
||||
</div>
|
||||
</f:facet>
|
||||
|
||||
<p:column headerText="Membre" sortBy="#{adhesion.nomMembre}">
|
||||
<div>
|
||||
<div class="font-medium">#{adhesion.nomMembre}</div>
|
||||
<div class="text-600 text-sm">#{adhesion.numeroMembre}</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Organisation" sortBy="#{adhesion.nomOrganisation}">
|
||||
<h:outputText value="#{adhesion.nomOrganisation}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date Approbation" sortBy="#{adhesion.dateApprobation}" style="width:150px">
|
||||
<h:outputText value="#{adhesion.dateApprobationFormatee}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Frais" sortBy="#{adhesion.fraisAdhesion}" style="width:120px">
|
||||
<h:outputText value="#{adhesion.fraisAdhesionFormatte}" styleClass="font-bold" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut" style="width:150px">
|
||||
<p:tag value="#{adhesion.statutLibelle}"
|
||||
severity="#{adhesion.statutSeverity}"
|
||||
icon="#{adhesion.statutIcon}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:150px">
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Renouveler" />
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="onclick" value="PF('dlgRenouvellement').show(); adhesionsBean.selectionnerAdhesion(adhesion);" />
|
||||
<ui:param name="styleClass" value="p-button-sm" />
|
||||
</ui:include>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Renouvellement -->
|
||||
<p:dialog header="Renouveler l'Adhésion" widgetVar="dlgRenouvellement" modal="true" width="500" resizable="false">
|
||||
<h:form id="formRenouvellement">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<label class="font-medium">Adhésion actuelle</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.numeroReference} - #{adhesionsBean.adhesionSelectionnee.nomMembre}</p>
|
||||
<p class="text-500 text-sm">Frais actuel: #{adhesionsBean.adhesionSelectionnee.fraisAdhesionFormatte}</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="nouveauxFrais" value="Nouveaux frais d'adhésion (FCFA)" />
|
||||
<p:inputNumber id="nouveauxFrais"
|
||||
value="#{adhesionsBean.nouvelleAdhesion.fraisAdhesion}"
|
||||
symbol=""
|
||||
minValue="0"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="observationsRenouvellement" />
|
||||
<ui:param name="label" value="Observations" />
|
||||
<ui:param name="value" value="#{adhesionsBean.nouvelleAdhesion.observations}" />
|
||||
<ui:param name="rows" value="3" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgRenouvellement').hide();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Créer le renouvellement" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{adhesionsBean.enregistrerAdhesion}" />
|
||||
<ui:param name="update" value="@form :formRenouvellement" />
|
||||
<ui:param name="oncomplete" value="PF('dlgRenouvellement').hide();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
@@ -1,41 +1,253 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">Validation Adhésion - UnionFlow</ui:define>
|
||||
<ui:define name="title">Validation des Adhésions - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="card">
|
||||
<h5>Validation des Adhésions</h5>
|
||||
<p>Traitement et validation des demandes d'adhésion en attente.</p>
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-check-circle text-green-500" />
|
||||
<ui:param name="title" value="Validation des Adhésions" />
|
||||
<ui:param name="description" value="Approbation et rejet des demandes d'adhésion" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsValidation">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{adhesionsBean.chargerAdhesionsEnAttente}" />
|
||||
<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 -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsEnAttente}" />
|
||||
<ui:param name="label" value="En Attente" />
|
||||
<ui:param name="icon" value="pi pi-clock" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
|
||||
<p:dataTable var="adhesion" value="#{[]}">
|
||||
<p:column headerText="Membre">
|
||||
<h:outputText value="#{adhesion.membre}" />
|
||||
</p:column>
|
||||
<p:column headerText="Date Demande">
|
||||
<h:outputText value="#{adhesion.dateDemande}" />
|
||||
</p:column>
|
||||
<p:column headerText="Type">
|
||||
<h:outputText value="#{adhesion.type}" />
|
||||
</p:column>
|
||||
<p:column headerText="Actions">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.adhesionsApprouvees}" />
|
||||
<ui:param name="label" value="Approuvées" />
|
||||
<ui:param name="icon" value="pi pi-check-circle" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.tauxApprobationInt}%" />
|
||||
<ui:param name="label" value="Taux d'Approbation" />
|
||||
<ui:param name="icon" value="pi pi-percentage" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{adhesionsBean.statistiques.totalAdhesions}" />
|
||||
<ui:param name="label" value="Total" />
|
||||
<ui:param name="icon" value="pi pi-users" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Liste des adhésions en attente -->
|
||||
<div class="card">
|
||||
<h:form id="formValidation">
|
||||
<h5>Adhésions en Attente de Validation</h5>
|
||||
|
||||
<p:dataTable id="dtValidation"
|
||||
value="#{adhesionsBean.adhesionsFiltrees}"
|
||||
var="adhesion"
|
||||
paginator="true"
|
||||
rows="20"
|
||||
emptyMessage="Aucune adhésion en attente">
|
||||
|
||||
<f:facet name="header">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span>Demandes nécessitant une validation</span>
|
||||
</div>
|
||||
</f:facet>
|
||||
|
||||
<p:column headerText="Référence" sortBy="#{adhesion.numeroReference}" style="width:150px">
|
||||
<h:outputText value="#{adhesion.numeroReference}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Membre" sortBy="#{adhesion.nomMembre}">
|
||||
<div>
|
||||
<div class="font-medium">#{adhesion.nomMembre}</div>
|
||||
<div class="text-600 text-sm">#{adhesion.numeroMembre}</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Organisation" sortBy="#{adhesion.nomOrganisation}">
|
||||
<h:outputText value="#{adhesion.nomOrganisation}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date Demande" sortBy="#{adhesion.dateDemande}" style="width:120px">
|
||||
<h:outputText value="#{adhesion.dateDemandeFormatee}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Frais" sortBy="#{adhesion.fraisAdhesion}" style="width:120px">
|
||||
<h:outputText value="#{adhesion.fraisAdhesionFormatte}" styleClass="font-bold" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:250px">
|
||||
<div class="flex gap-1">
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Approuver" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{adhesionsBean.selectionnerAdhesion(adhesion)}" />
|
||||
<ui:param name="update" value=":formApprobation" />
|
||||
<ui:param name="oncomplete" value="PF('dlgApprobation').show();" />
|
||||
<ui:param name="styleClass" value="p-button-sm" />
|
||||
</ui:include>
|
||||
<p:commandButton value="Rejeter"
|
||||
icon="pi pi-times"
|
||||
styleClass="p-button-danger p-button-sm"
|
||||
action="#{adhesionsBean.selectionnerAdhesion(adhesion)}"
|
||||
update=":formRejet"
|
||||
oncomplete="PF('dlgRejet').show();" />
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
title="Voir les détails"
|
||||
styleClass="p-button-rounded p-button-text p-button-info p-button-sm"
|
||||
action="#{adhesionsBean.selectionnerAdhesion(adhesion)}"
|
||||
update=":formDetailsAdhesion"
|
||||
oncomplete="PF('dlgDetailsAdhesion').show();" />
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Approbation -->
|
||||
<p:dialog header="Approuver l'Adhésion" widgetVar="dlgApprobation" modal="true" width="500" resizable="false">
|
||||
<h:form id="formApprobation">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<label class="font-medium">Adhésion</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.numeroReference} - #{adhesionsBean.adhesionSelectionnee.nomMembre}</p>
|
||||
<p class="text-500 text-sm">Frais: #{adhesionsBean.adhesionSelectionnee.fraisAdhesionFormatte}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgApprobation').hide();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Approuver" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="styleClass" value="ui-button-sm" />
|
||||
<ui:param name="action" value="#{adhesionsBean.approuverAdhesion}" />
|
||||
<ui:param name="update" value="@form :formValidation" />
|
||||
<ui:param name="oncomplete" value="PF('dlgApprobation').hide();" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Rejeter" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="styleClass" value="ui-button-danger ui-button-sm" />
|
||||
</ui:include>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</div>
|
||||
</ui:define>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</ui:composition>
|
||||
<!-- Dialog Rejet -->
|
||||
<p:dialog header="Rejeter l'Adhésion" widgetVar="dlgRejet" modal="true" width="500" resizable="false">
|
||||
<h:form id="formRejet">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<label class="font-medium">Adhésion</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.numeroReference} - #{adhesionsBean.adhesionSelectionnee.nomMembre}</p>
|
||||
</div>
|
||||
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="motifRejet" />
|
||||
<ui:param name="label" value="Motif du rejet" />
|
||||
<ui:param name="value" value="#{adhesionsBean.adhesionSelectionnee.motifRejet}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="rows" value="4" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgRejet').hide();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<p:commandButton value="Rejeter"
|
||||
icon="pi pi-times"
|
||||
styleClass="p-button-danger"
|
||||
action="#{adhesionsBean.rejeterAdhesion(adhesionsBean.adhesionSelectionnee.motifRejet)}"
|
||||
update="@form :formValidation"
|
||||
oncomplete="PF('dlgRejet').hide();" />
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
<!-- Dialog Détails Adhésion -->
|
||||
<p:dialog header="Détails de l'Adhésion" widgetVar="dlgDetailsAdhesion" modal="true" width="600" resizable="false">
|
||||
<h:form id="formDetailsAdhesion">
|
||||
<div class="ui-fluid">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Référence</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.numeroReference}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Statut</label>
|
||||
<p:tag value="#{adhesionsBean.adhesionSelectionnee.statutLibelle}"
|
||||
severity="#{adhesionsBean.adhesionSelectionnee.statutSeverity}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<label class="font-medium">Membre</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.nomMembre}</p>
|
||||
<p class="text-500 text-sm">N° #{adhesionsBean.adhesionSelectionnee.numeroMembre}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<label class="font-medium">Organisation</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.nomOrganisation}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Date de demande</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.dateDemandeFormatee}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Frais d'adhésion</label>
|
||||
<p class="text-600 font-bold">#{adhesionsBean.adhesionSelectionnee.fraisAdhesionFormatte}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" rendered="#{adhesionsBean.adhesionSelectionnee.observations != null}">
|
||||
<div class="field">
|
||||
<label class="font-medium">Observations</label>
|
||||
<p class="text-600">#{adhesionsBean.adhesionSelectionnee.observations}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
@@ -1,19 +1,29 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Journal d'Audit - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- Redirection vers la page principale d'audit -->
|
||||
<div class="card">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
<div class="text-center p-4">
|
||||
<i class="pi pi-history text-4xl text-indigo-500 mb-3"></i>
|
||||
<h5>Journal d'Audit</h5>
|
||||
<p class="text-600 mt-2">
|
||||
Redirection vers la page principale du journal d'audit...
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Accéder au Journal d'Audit" />
|
||||
<ui:param name="icon" value="pi pi-arrow-right" />
|
||||
<ui:param name="outcome" value="/pages/admin/audit/journal.xhtml" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
@@ -1,19 +1,44 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Paramètres Système - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-cog text-orange-500" />
|
||||
<ui:param name="title" value="Paramètres Système" />
|
||||
<ui:param name="description" value="Configuration des paramètres généraux de l'application" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActions">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Enregistrer" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{configurationBean.enregistrer}" />
|
||||
<ui:param name="update" value="@form" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<!-- Information -->
|
||||
<div class="card">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
<div class="text-center p-4">
|
||||
<i class="pi pi-info-circle text-4xl text-orange-500 mb-3"></i>
|
||||
<h5>Configuration Système</h5>
|
||||
<p class="text-600 mt-2">
|
||||
La page de configuration système sera disponible prochainement.
|
||||
</p>
|
||||
<p class="text-600 mt-2">
|
||||
Elle permettra de configurer les paramètres généraux de l'application.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
@@ -1,19 +1,50 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Gestion des Rôles - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-shield text-purple-500" />
|
||||
<ui:param name="title" value="Gestion des Rôles" />
|
||||
<ui:param name="description" value="Gestion des rôles et permissions via Keycloak" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActions">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-info.xhtml">
|
||||
<ui:param name="value" value="Documentation Keycloak" />
|
||||
<ui:param name="icon" value="pi pi-book" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<!-- Information -->
|
||||
<div class="card">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
<div class="text-center p-4">
|
||||
<i class="pi pi-info-circle text-4xl text-purple-500 mb-3"></i>
|
||||
<h5>Gestion des Rôles via Keycloak</h5>
|
||||
<p class="text-600 mt-2">
|
||||
La gestion des rôles et permissions se fait directement via Keycloak Admin Console.
|
||||
</p>
|
||||
<p class="text-600 mt-2">
|
||||
Les rôles disponibles incluent : SUPER_ADMIN, ADMIN_ORG, SECRETAIRE, TRESORIER, MEMBRE, etc.
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Accéder à Keycloak Admin" />
|
||||
<ui:param name="icon" value="pi pi-external-link" />
|
||||
<ui:param name="onclick" value="window.open('https://security.lions.dev/admin', '_blank');" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
@@ -1,19 +1,42 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Sauvegarde et Restauration - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-database text-green-500" />
|
||||
<ui:param name="title" value="Sauvegarde et Restauration" />
|
||||
<ui:param name="description" value="Gestion des sauvegardes et restauration de la base de données" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActions">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Créer une sauvegarde" />
|
||||
<ui:param name="icon" value="pi pi-save" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<!-- Information -->
|
||||
<div class="card">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
<div class="text-center p-4">
|
||||
<i class="pi pi-info-circle text-4xl text-green-500 mb-3"></i>
|
||||
<h5>Sauvegarde et Restauration</h5>
|
||||
<p class="text-600 mt-2">
|
||||
La fonctionnalité de sauvegarde et restauration sera disponible prochainement.
|
||||
</p>
|
||||
<p class="text-600 mt-2">
|
||||
Elle permettra de créer des sauvegardes de la base de données et de restaurer des sauvegardes précédentes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
@@ -1,19 +1,50 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Gestion des Utilisateurs - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-users text-blue-500" />
|
||||
<ui:param name="title" value="Gestion des Utilisateurs" />
|
||||
<ui:param name="description" value="Gestion des utilisateurs et de leurs accès via Keycloak" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActions">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-info.xhtml">
|
||||
<ui:param name="value" value="Documentation Keycloak" />
|
||||
<ui:param name="icon" value="pi pi-book" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<!-- Information -->
|
||||
<div class="card">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
<div class="text-center p-4">
|
||||
<i class="pi pi-info-circle text-4xl text-blue-500 mb-3"></i>
|
||||
<h5>Gestion des Utilisateurs via Keycloak</h5>
|
||||
<p class="text-600 mt-2">
|
||||
La gestion des utilisateurs se fait directement via Keycloak Admin Console.
|
||||
</p>
|
||||
<p class="text-600 mt-2">
|
||||
Pour accéder à la console d'administration Keycloak, veuillez utiliser l'interface dédiée.
|
||||
</p>
|
||||
<div class="mt-4">
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Accéder à Keycloak Admin" />
|
||||
<ui:param name="icon" value="pi pi-external-link" />
|
||||
<ui:param name="onclick" value="window.open('https://security.lions.dev/admin', '_blank');" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
@@ -5,16 +5,429 @@
|
||||
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
<ui:define name="title">UnionFlow - Collect</ui:define>
|
||||
|
||||
<ui:define name="title">Gestion des Cotisations - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-money-bill text-green-500" />
|
||||
<ui:param name="title" value="Gestion des Cotisations" />
|
||||
<ui:param name="description" value="Suivi et gestion des cotisations des membres" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsCotisations">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Nouvelle cotisation" />
|
||||
<ui:param name="icon" value="pi pi-plus" />
|
||||
<ui:param name="onclick" value="PF('dlgNouvelleCotisation').show();" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Exporter" />
|
||||
<ui:param name="icon" value="pi pi-download" />
|
||||
<ui:param name="action" value="#{cotisationsBean.exporterCotisations}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{cotisationsBean.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 -->
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h2>Collect - Cotisation</h2>
|
||||
<p>Page en cours de développement...</p>
|
||||
<p:button value="Retour" icon="pi pi-arrow-left" outcome="/pages/secure/dashboard"/>
|
||||
</div>
|
||||
</div>
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.statistiques.totalCollecteFormatte}" />
|
||||
<ui:param name="label" value="Total Collecté" />
|
||||
<ui:param name="icon" value="pi pi-wallet" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.statistiques.tauxRecouvrementInt}%" />
|
||||
<ui:param name="label" value="Taux de Recouvrement" />
|
||||
<ui:param name="icon" value="pi pi-percentage" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.statistiques.cotisationsEnRetard}" />
|
||||
<ui:param name="label" value="En Retard" />
|
||||
<ui:param name="icon" value="pi pi-exclamation-triangle" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.statistiques.montantRetardFormatte}" />
|
||||
<ui:param name="label" value="Montant Retard" />
|
||||
<ui:param name="icon" value="pi pi-clock" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Liste des cotisations -->
|
||||
<div class="card">
|
||||
<h:form id="formCotisations">
|
||||
<h5>Liste des Cotisations</h5>
|
||||
|
||||
<!-- Filtres -->
|
||||
<p:toolbar>
|
||||
<p:toolbarGroup>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<span class="p-input-icon-left">
|
||||
<i class="pi pi-search"></i>
|
||||
<p:inputText placeholder="Rechercher par membre..."
|
||||
value="#{cotisationsBean.filtres.nomMembre}"
|
||||
styleClass="w-full">
|
||||
<p:ajax event="keyup" update="dtCotisations" />
|
||||
</p:inputText>
|
||||
</span>
|
||||
|
||||
<p:selectOneMenu value="#{cotisationsBean.filtres.statut}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tous les statuts" itemValue="" />
|
||||
<f:selectItem itemLabel="En attente" itemValue="EN_ATTENTE" />
|
||||
<f:selectItem itemLabel="Payée" itemValue="PAYEE" />
|
||||
<f:selectItem itemLabel="Partiellement payée" itemValue="PARTIELLEMENT_PAYEE" />
|
||||
<f:selectItem itemLabel="En retard" itemValue="EN_RETARD" />
|
||||
<f:selectItem itemLabel="Annulée" itemValue="ANNULEE" />
|
||||
<p:ajax update="dtCotisations" />
|
||||
</p:selectOneMenu>
|
||||
|
||||
<p:selectOneMenu value="#{cotisationsBean.filtres.typeCotisation}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tous les types" itemValue="" />
|
||||
<f:selectItem itemLabel="Mensuelle" itemValue="MENSUELLE" />
|
||||
<f:selectItem itemLabel="Trimestrielle" itemValue="TRIMESTRIELLE" />
|
||||
<f:selectItem itemLabel="Semestrielle" itemValue="SEMESTRIELLE" />
|
||||
<f:selectItem itemLabel="Annuelle" itemValue="ANNUELLE" />
|
||||
<f:selectItem itemLabel="Adhésion" itemValue="ADHESION" />
|
||||
<f:selectItem itemLabel="Exceptionnelle" itemValue="EXCEPTIONNELLE" />
|
||||
<p:ajax update="dtCotisations" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</p:toolbarGroup>
|
||||
|
||||
<p:toolbarGroup align="right">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Filtres avancés" />
|
||||
<ui:param name="icon" value="pi pi-filter" />
|
||||
<ui:param name="onclick" value="PF('dlgFiltresAvances').show();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
<ui:param name="styleClass" value="mr-2" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Réinitialiser" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="action" value="#{cotisationsBean.reinitialiserFiltres}" />
|
||||
<ui:param name="update" value="@form" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
</p:toolbarGroup>
|
||||
</p:toolbar>
|
||||
|
||||
<!-- Tableau des cotisations -->
|
||||
<p:dataTable id="dtCotisations"
|
||||
value="#{cotisationsBean.cotisationsFiltrees}"
|
||||
var="cotisation"
|
||||
paginator="true"
|
||||
rows="20"
|
||||
rowsPerPageTemplate="10,20,50,100"
|
||||
paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}"
|
||||
currentPageReportTemplate="{startRecord} - {endRecord} sur {totalRecords}"
|
||||
emptyMessage="Aucune cotisation trouvée"
|
||||
selection="#{cotisationsBean.cotisationsSelectionnees}"
|
||||
selectionMode="multiple">
|
||||
|
||||
<f:facet name="header">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span>Cotisations (#{cotisationsBean.cotisationsFiltrees.size()})</span>
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-warning.xhtml">
|
||||
<ui:param name="value" value="Rappels groupés" />
|
||||
<ui:param name="icon" value="pi pi-send" />
|
||||
<ui:param name="action" value="#{cotisationsBean.envoyerRappelsGroupes}" />
|
||||
<ui:param name="update" value="@form" />
|
||||
<ui:param name="disabled" value="#{empty cotisationsBean.cotisationsSelectionnees}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</f:facet>
|
||||
|
||||
<p:column selectionMode="multiple" style="width:50px" />
|
||||
|
||||
<p:column headerText="Référence" sortBy="#{cotisation.numeroReference}" style="width:150px">
|
||||
<h:outputText value="#{cotisation.numeroReference}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Membre" sortBy="#{cotisation.nomMembre}">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div>
|
||||
<div class="font-medium">#{cotisation.nomMembre}</div>
|
||||
<div class="text-600 text-sm">#{cotisation.numeroMembre}</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Type" sortBy="#{cotisation.typeCotisation}" style="width:120px">
|
||||
<p:tag value="#{cotisation.typeCotisationLibelle}"
|
||||
severity="info"
|
||||
icon="#{cotisation.typeCotisation == 'ADHESION' ? 'pi-user-plus' : 'pi-calendar'}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Montant Dû" sortBy="#{cotisation.montantDu}" style="width:120px">
|
||||
<h:outputText value="#{cotisation.montantDuFormatte}" styleClass="font-bold" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Montant Payé" sortBy="#{cotisation.montantPaye}" style="width:120px">
|
||||
<h:outputText value="#{cotisation.montantPayeFormatte}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut" sortBy="#{cotisation.statut}" style="width:150px">
|
||||
<p:tag value="#{cotisation.statutLibelle}"
|
||||
severity="#{cotisation.statutSeverity}"
|
||||
icon="#{cotisation.statutIcon}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Échéance" sortBy="#{cotisation.dateEcheance}" style="width:120px">
|
||||
<h:outputText value="#{cotisation.dateEcheanceFormatee}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:200px">
|
||||
<div class="flex gap-1">
|
||||
<p:commandButton icon="pi pi-check"
|
||||
title="Marquer comme payée"
|
||||
styleClass="p-button-rounded p-button-text p-button-success"
|
||||
disabled="#{cotisation.statut == 'PAYEE'}"
|
||||
action="#{cotisationsBean.marquerCommePaye(cotisation)}"
|
||||
update="@form" />
|
||||
<p:commandButton icon="pi pi-send"
|
||||
title="Envoyer un rappel"
|
||||
styleClass="p-button-rounded p-button-text p-button-warning"
|
||||
action="#{cotisationsBean.envoyerRappel(cotisation)}"
|
||||
update="@form" />
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
title="Voir les détails"
|
||||
styleClass="p-button-rounded p-button-text p-button-info"
|
||||
action="#{cotisationsBean.selectionnerCotisation(cotisation)}"
|
||||
update=":formDetailsCotisation"
|
||||
oncomplete="PF('dlgDetailsCotisation').show();" />
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Nouvelle Cotisation -->
|
||||
<p:dialog header="Nouvelle Cotisation" widgetVar="dlgNouvelleCotisation" modal="true" width="600" resizable="false">
|
||||
<h:form id="formNouvelleCotisation">
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:define name="title">Informations de la cotisation</ui:define>
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="libelle" />
|
||||
<ui:param name="label" value="Libellé" />
|
||||
<ui:param name="value" value="#{cotisationsBean.nouvelleCotisation.libelle}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="placeholder" value="Ex: Cotisation mensuelle janvier 2024" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="typeCotisation" />
|
||||
<ui:param name="label" value="Type de cotisation" />
|
||||
<ui:param name="value" value="#{cotisationsBean.nouvelleCotisation.typeCotisation}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Mensuelle" itemValue="MENSUELLE" />
|
||||
<f:selectItem itemLabel="Trimestrielle" itemValue="TRIMESTRIELLE" />
|
||||
<f:selectItem itemLabel="Semestrielle" itemValue="SEMESTRIELLE" />
|
||||
<f:selectItem itemLabel="Annuelle" itemValue="ANNUELLE" />
|
||||
<f:selectItem itemLabel="Adhésion" itemValue="ADHESION" />
|
||||
<f:selectItem itemLabel="Exceptionnelle" itemValue="EXCEPTIONNELLE" />
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateEcheance" />
|
||||
<ui:param name="label" value="Date d'échéance" />
|
||||
<ui:param name="value" value="#{cotisationsBean.nouvelleCotisation.dateEcheance}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="montantDu" value="Montant dû (FCFA)" />
|
||||
<p:inputNumber id="montantDu"
|
||||
value="#{cotisationsBean.nouvelleCotisation.montantDu}"
|
||||
symbol=""
|
||||
minValue="0"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="observations" />
|
||||
<ui:param name="label" value="Observations" />
|
||||
<ui:param name="value" value="#{cotisationsBean.nouvelleCotisation.observations}" />
|
||||
<ui:param name="rows" value="3" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgNouvelleCotisation').hide();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Enregistrer" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{cotisationsBean.enregistrerCotisation}" />
|
||||
<ui:param name="update" value="@form :formCotisations" />
|
||||
<ui:param name="oncomplete" value="PF('dlgNouvelleCotisation').hide();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
<!-- Dialog Filtres Avancés -->
|
||||
<p:dialog header="Filtres Avancés" widgetVar="dlgFiltresAvances" modal="true" width="500" resizable="false">
|
||||
<h:form id="formFiltresAvances">
|
||||
<div class="ui-fluid">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="club" />
|
||||
<ui:param name="label" value="Club/Association" />
|
||||
<ui:param name="value" value="#{cotisationsBean.filtres.club}" />
|
||||
<ui:param name="placeholder" value="Rechercher par club..." />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="methodePaiement" />
|
||||
<ui:param name="label" value="Méthode de paiement" />
|
||||
<ui:param name="value" value="#{cotisationsBean.filtres.methodePaiement}" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Toutes" itemValue="" />
|
||||
<f:selectItem itemLabel="Wave Money" itemValue="WAVE_MONEY" />
|
||||
<f:selectItem itemLabel="Espèces" itemValue="ESPECES" />
|
||||
<f:selectItem itemLabel="Virement" itemValue="VIREMENT" />
|
||||
<f:selectItem itemLabel="Chèque" itemValue="CHEQUE" />
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateDebut" />
|
||||
<ui:param name="label" value="Date début" />
|
||||
<ui:param name="value" value="#{cotisationsBean.filtres.dateDebut}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateFin" />
|
||||
<ui:param name="label" value="Date fin" />
|
||||
<ui:param name="value" value="#{cotisationsBean.filtres.dateFin}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgFiltresAvances').hide();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Appliquer" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{cotisationsBean.rechercher}" />
|
||||
<ui:param name="update" value=":formCotisations" />
|
||||
<ui:param name="oncomplete" value="PF('dlgFiltresAvances').hide();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
<!-- Dialog Détails Cotisation -->
|
||||
<p:dialog header="Détails de la Cotisation" widgetVar="dlgDetailsCotisation" modal="true" width="600" resizable="false">
|
||||
<h:form id="formDetailsCotisation">
|
||||
<div class="ui-fluid">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Référence</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.numeroReference}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Statut</label>
|
||||
<p:tag value="#{cotisationsBean.cotisationSelectionnee.statutLibelle}"
|
||||
severity="#{cotisationsBean.cotisationSelectionnee.statutSeverity}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Membre</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.nomMembre}</p>
|
||||
<p class="text-500 text-sm">#{cotisationsBean.cotisationSelectionnee.numeroMembre}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Type</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.typeCotisationLibelle}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Montant dû</label>
|
||||
<p class="text-600 font-bold">#{cotisationsBean.cotisationSelectionnee.montantDuFormatte}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Montant payé</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.montantPayeFormatte}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Date d'échéance</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.dateEcheanceFormatee}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Date de paiement</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.datePaiementFormatee}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
@@ -1,21 +1,252 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Historique des Cotisations - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="card">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-history text-blue-500" />
|
||||
<ui:param name="title" value="Historique des Cotisations" />
|
||||
<ui:param name="description" value="Consultation de l'historique complet des cotisations et paiements" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsHistorique">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Exporter" />
|
||||
<ui:param name="icon" value="pi pi-download" />
|
||||
<ui:param name="action" value="#{cotisationsBean.exporterCotisations}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{cotisationsBean.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 d'historique -->
|
||||
<div class="card">
|
||||
<h:form id="formFiltresHistorique">
|
||||
<h5>Filtres de Recherche</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateDebut" />
|
||||
<ui:param name="label" value="Date début" />
|
||||
<ui:param name="value" value="#{cotisationsBean.filtres.dateDebut}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateFin" />
|
||||
<ui:param name="label" value="Date fin" />
|
||||
<ui:param name="value" value="#{cotisationsBean.filtres.dateFin}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="statutHistorique" />
|
||||
<ui:param name="label" value="Statut" />
|
||||
<ui:param name="value" value="#{cotisationsBean.filtres.statut}" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Tous" itemValue="" />
|
||||
<f:selectItem itemLabel="Payée" itemValue="PAYEE" />
|
||||
<f:selectItem itemLabel="Partiellement payée" itemValue="PARTIELLEMENT_PAYEE" />
|
||||
<f:selectItem itemLabel="En attente" itemValue="EN_ATTENTE" />
|
||||
<f:selectItem itemLabel="En retard" itemValue="EN_RETARD" />
|
||||
<f:selectItem itemLabel="Annulée" itemValue="ANNULEE" />
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="field">
|
||||
<p:outputLabel />
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Rechercher" />
|
||||
<ui:param name="icon" value="pi pi-search" />
|
||||
<ui:param name="action" value="#{cotisationsBean.rechercher}" />
|
||||
<ui:param name="update" value=":formHistorique" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Réinitialiser" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="action" value="#{cotisationsBean.reinitialiserFiltres}" />
|
||||
<ui:param name="update" value="@form :formHistorique" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Tableau d'historique -->
|
||||
<div class="card">
|
||||
<h:form id="formHistorique">
|
||||
<h5>Historique des Cotisations</h5>
|
||||
|
||||
<p:dataTable id="dtHistorique"
|
||||
value="#{cotisationsBean.cotisationsFiltrees}"
|
||||
var="cotisation"
|
||||
paginator="true"
|
||||
rows="20"
|
||||
rowsPerPageTemplate="10,20,50,100"
|
||||
sortMode="multiple"
|
||||
emptyMessage="Aucune cotisation trouvée">
|
||||
|
||||
<f:facet name="header">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span>Historique (#{cotisationsBean.cotisationsFiltrees.size()} cotisation(s))</span>
|
||||
</div>
|
||||
</f:facet>
|
||||
|
||||
<p:column headerText="Date" sortBy="#{cotisation.dateCreation}" style="width:120px">
|
||||
<h:outputText value="#{cotisation.dateCreation}" rendered="#{cotisation.dateCreation != null}">
|
||||
<f:convertDateTime pattern="dd/MM/yyyy" />
|
||||
</h:outputText>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Référence" sortBy="#{cotisation.numeroReference}" style="width:150px">
|
||||
<h:outputText value="#{cotisation.numeroReference}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Membre" sortBy="#{cotisation.nomMembre}">
|
||||
<div>
|
||||
<div class="font-medium">#{cotisation.nomMembre}</div>
|
||||
<div class="text-600 text-sm">#{cotisation.numeroMembre}</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Type" sortBy="#{cotisation.typeCotisation}" style="width:120px">
|
||||
<p:tag value="#{cotisation.typeCotisationLibelle}" severity="info" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Montant Dû" sortBy="#{cotisation.montantDu}" style="width:120px">
|
||||
<h:outputText value="#{cotisation.montantDuFormatte}" styleClass="font-bold" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Montant Payé" sortBy="#{cotisation.montantPaye}" style="width:120px">
|
||||
<h:outputText value="#{cotisation.montantPayeFormatte}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut" sortBy="#{cotisation.statut}" style="width:150px">
|
||||
<p:tag value="#{cotisation.statutLibelle}"
|
||||
severity="#{cotisation.statutSeverity}"
|
||||
icon="#{cotisation.statutIcon}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date Paiement" sortBy="#{cotisation.datePaiement}" style="width:150px">
|
||||
<h:outputText value="#{cotisation.datePaiementFormatee}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Méthode" style="width:120px">
|
||||
<h:outputText value="#{cotisation.methodePaiementLibelle}" rendered="#{cotisation.methodePaiement != null}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:100px">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
title="Voir les détails"
|
||||
styleClass="p-button-rounded p-button-text p-button-info"
|
||||
action="#{cotisationsBean.selectionnerCotisation(cotisation)}"
|
||||
update=":formDetailsCotisation"
|
||||
oncomplete="PF('dlgDetailsCotisation').show();" />
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Détails Cotisation -->
|
||||
<p:dialog header="Détails de la Cotisation" widgetVar="dlgDetailsCotisation" modal="true" width="600" resizable="false">
|
||||
<h:form id="formDetailsCotisation">
|
||||
<div class="ui-fluid">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Référence</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.numeroReference}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Statut</label>
|
||||
<p:tag value="#{cotisationsBean.cotisationSelectionnee.statutLibelle}"
|
||||
severity="#{cotisationsBean.cotisationSelectionnee.statutSeverity}" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<label class="font-medium">Membre</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.nomMembre}</p>
|
||||
<p class="text-500 text-sm">N° #{cotisationsBean.cotisationSelectionnee.numeroMembre}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Type</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.typeCotisationLibelle}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Date d'échéance</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.dateEcheanceFormatee}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<label class="font-medium">Montant dû</label>
|
||||
<p class="text-600 font-bold">#{cotisationsBean.cotisationSelectionnee.montantDuFormatte}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<label class="font-medium">Montant payé</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.montantPayeFormatte}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<label class="font-medium">Montant restant</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.montantRestantFormatte}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Date de paiement</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.datePaiementFormatee}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-medium">Méthode de paiement</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.methodePaiementLibelle}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12" rendered="#{cotisationsBean.cotisationSelectionnee.observations != null}">
|
||||
<div class="field">
|
||||
<label class="font-medium">Observations</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.observations}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
@@ -1,21 +1,306 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">Paiement Cotisation - UnionFlow</ui:define>
|
||||
<ui:define name="title">Paiement de Cotisations - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-credit-card text-green-500" />
|
||||
<ui:param name="title" value="Paiement de Cotisations" />
|
||||
<ui:param name="description" value="Enregistrement et suivi des paiements de cotisations" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsPaiement">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{cotisationsBean.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 de paiement -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.statistiques.totalCollecteFormatte}" />
|
||||
<ui:param name="label" value="Total Collecté" />
|
||||
<ui:param name="icon" value="pi pi-wallet" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.statistiques.moyenneMensuelleFormattee}" />
|
||||
<ui:param name="label" value="Moyenne Mensuelle" />
|
||||
<ui:param name="icon" value="pi pi-chart-line" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.statistiques.objectifAnnuelFormatte}" />
|
||||
<ui:param name="label" value="Objectif Annuel" />
|
||||
<ui:param name="icon" value="pi pi-target" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.statistiques.tauxRecouvrementInt}%" />
|
||||
<ui:param name="label" value="Taux de Recouvrement" />
|
||||
<ui:param name="icon" value="pi pi-percentage" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Répartition par méthode de paiement -->
|
||||
<div class="card">
|
||||
<h5>Paiement de Cotisation</h5>
|
||||
<p>Interface de paiement des cotisations membres.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-credit-card" style="font-size: 3rem; color: #28a745;"></i>
|
||||
<p class="mt-3">Fonctionnalité de paiement en développement</p>
|
||||
<h5>
|
||||
<i class="pi pi-chart-pie mr-2"></i>
|
||||
Répartition par Méthode de Paiement
|
||||
</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="flex flex-column gap-3">
|
||||
<ui:repeat value="#{cotisationsBean.repartitionMethodes}" var="methode">
|
||||
<div class="flex align-items-center justify-content-between p-3 border-round surface-50">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="border-round text-white text-center"
|
||||
style="width: 2.5rem; height: 2.5rem; line-height: 2.5rem; background: var(--#{methode.couleur});">
|
||||
<i class="#{methode.icon}"></i>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-medium">#{methode.methode}</div>
|
||||
<div class="text-600 text-sm">#{methode.montantFormatte}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="font-bold text-xl">#{methode.pourcentageInt}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="flex flex-column gap-2">
|
||||
<ui:repeat value="#{cotisationsBean.repartitionMethodes}" var="methode">
|
||||
<div>
|
||||
<div class="flex justify-content-between mb-1">
|
||||
<span class="font-medium">#{methode.methode}</span>
|
||||
<span class="text-600">#{methode.pourcentageInt}%</span>
|
||||
</div>
|
||||
<p:progressBar value="#{methode.pourcentageInt}"
|
||||
showValue="false"
|
||||
styleClass="progressbar-custom" />
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
<!-- Cotisations en attente de paiement -->
|
||||
<div class="card">
|
||||
<h:form id="formPaiements">
|
||||
<h5>Cotisations en Attente de Paiement</h5>
|
||||
|
||||
<p:dataTable id="dtPaiements"
|
||||
value="#{cotisationsBean.cotisationsFiltrees}"
|
||||
var="cotisation"
|
||||
filteredValue="#{cotisationsBean.cotisationsFiltrees}"
|
||||
paginator="true"
|
||||
rows="20"
|
||||
emptyMessage="Aucune cotisation en attente"
|
||||
selection="#{cotisationsBean.cotisationSelectionnee}"
|
||||
selectionMode="single">
|
||||
|
||||
<f:facet name="header">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span>Cotisations à payer</span>
|
||||
<p:selectOneMenu value="#{cotisationsBean.filtres.statut}" styleClass="w-12rem">
|
||||
<f:selectItem itemLabel="Tous" itemValue="" />
|
||||
<f:selectItem itemLabel="En attente" itemValue="EN_ATTENTE" />
|
||||
<f:selectItem itemLabel="Partiellement payée" itemValue="PARTIELLEMENT_PAYEE" />
|
||||
<f:selectItem itemLabel="En retard" itemValue="EN_RETARD" />
|
||||
<p:ajax update="dtPaiements" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</f:facet>
|
||||
|
||||
<p:column headerText="Membre" sortBy="#{cotisation.nomMembre}">
|
||||
<div>
|
||||
<div class="font-medium">#{cotisation.nomMembre}</div>
|
||||
<div class="text-600 text-sm">#{cotisation.numeroMembre}</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Type" sortBy="#{cotisation.typeCotisation}" style="width:120px">
|
||||
<p:tag value="#{cotisation.typeCotisationLibelle}" severity="info" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Montant Dû" sortBy="#{cotisation.montantDu}" style="width:120px">
|
||||
<h:outputText value="#{cotisation.montantDuFormatte}" styleClass="font-bold" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Montant Payé" sortBy="#{cotisation.montantPaye}" style="width:120px">
|
||||
<h:outputText value="#{cotisation.montantPayeFormatte}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Restant" style="width:120px">
|
||||
<h:outputText value="#{cotisation.montantRestantFormatte}"
|
||||
styleClass="#{cotisation.montantRestant.compareTo(java.math.BigDecimal.ZERO) > 0 ? 'text-orange-500 font-bold' : 'text-green-500'}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Échéance" sortBy="#{cotisation.dateEcheance}" style="width:120px">
|
||||
<h:outputText value="#{cotisation.dateEcheanceFormatee}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:200px">
|
||||
<div class="flex gap-1">
|
||||
<p:commandButton value="Payer"
|
||||
icon="pi pi-check"
|
||||
styleClass="p-button-success p-button-sm"
|
||||
action="#{cotisationsBean.selectionnerCotisation(cotisation)}"
|
||||
update=":formPaiement"
|
||||
oncomplete="PF('dlgPaiement').show();" />
|
||||
<p:commandButton value="Partiel"
|
||||
icon="pi pi-minus"
|
||||
styleClass="p-button-info p-button-sm"
|
||||
action="#{cotisationsBean.selectionnerCotisation(cotisation)}"
|
||||
update=":formPaiementPartiel"
|
||||
oncomplete="PF('dlgPaiementPartiel').show();" />
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Paiement Complet -->
|
||||
<p:dialog header="Enregistrer un Paiement" widgetVar="dlgPaiement" modal="true" width="500" resizable="false">
|
||||
<h:form id="formPaiement">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<label class="font-medium">Cotisation</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.numeroReference} - #{cotisationsBean.cotisationSelectionnee.nomMembre}</p>
|
||||
<p class="text-500 text-sm">Montant dû: #{cotisationsBean.cotisationSelectionnee.montantDuFormatte}</p>
|
||||
</div>
|
||||
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="methodePaiement" />
|
||||
<ui:param name="label" value="Méthode de paiement" />
|
||||
<ui:param name="value" value="#{cotisationsBean.cotisationSelectionnee.methodePaiement}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Wave Money" itemValue="WAVE_MONEY" />
|
||||
<f:selectItem itemLabel="Espèces" itemValue="ESPECES" />
|
||||
<f:selectItem itemLabel="Virement bancaire" itemValue="VIREMENT" />
|
||||
<f:selectItem itemLabel="Chèque" itemValue="CHEQUE" />
|
||||
<f:selectItem itemLabel="Orange Money" itemValue="ORANGE_MONEY" />
|
||||
<f:selectItem itemLabel="Free Money" itemValue="FREE_MONEY" />
|
||||
<f:selectItem itemLabel="Carte bancaire" itemValue="CARTE_BANCAIRE" />
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="referencePaiement" />
|
||||
<ui:param name="label" value="Référence de paiement" />
|
||||
<ui:param name="value" value="#{cotisationsBean.cotisationSelectionnee.referencePaiement}" />
|
||||
<ui:param name="placeholder" value="Ex: WAVE-123456789" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="observationsPaiement" />
|
||||
<ui:param name="label" value="Observations" />
|
||||
<ui:param name="value" value="#{cotisationsBean.cotisationSelectionnee.observations}" />
|
||||
<ui:param name="rows" value="3" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgPaiement').hide();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Enregistrer" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{cotisationsBean.marquerCommePaye}" />
|
||||
<ui:param name="update" value="@form :formPaiements" />
|
||||
<ui:param name="oncomplete" value="PF('dlgPaiement').hide();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
<!-- Dialog Paiement Partiel -->
|
||||
<p:dialog header="Enregistrer un Paiement Partiel" widgetVar="dlgPaiementPartiel" modal="true" width="500" resizable="false">
|
||||
<h:form id="formPaiementPartiel">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<label class="font-medium">Cotisation</label>
|
||||
<p class="text-600">#{cotisationsBean.cotisationSelectionnee.numeroReference} - #{cotisationsBean.cotisationSelectionnee.nomMembre}</p>
|
||||
<p class="text-500 text-sm">Montant dû: #{cotisationsBean.cotisationSelectionnee.montantDuFormatte}</p>
|
||||
<p class="text-500 text-sm">Montant restant: #{cotisationsBean.cotisationSelectionnee.montantRestantFormatte}</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="montantPaye" value="Montant à payer (FCFA)" />
|
||||
<p:inputNumber id="montantPaye"
|
||||
value="#{cotisationsBean.cotisationSelectionnee.montantPaye}"
|
||||
symbol=""
|
||||
minValue="0"
|
||||
maxValue="#{cotisationsBean.cotisationSelectionnee.montantDu}"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="methodePaiementPartiel" />
|
||||
<ui:param name="label" value="Méthode de paiement" />
|
||||
<ui:param name="value" value="#{cotisationsBean.cotisationSelectionnee.methodePaiement}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Wave Money" itemValue="WAVE_MONEY" />
|
||||
<f:selectItem itemLabel="Espèces" itemValue="ESPECES" />
|
||||
<f:selectItem itemLabel="Virement bancaire" itemValue="VIREMENT" />
|
||||
<f:selectItem itemLabel="Chèque" itemValue="CHEQUE" />
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="referencePaiementPartiel" />
|
||||
<ui:param name="label" value="Référence de paiement" />
|
||||
<ui:param name="value" value="#{cotisationsBean.cotisationSelectionnee.referencePaiement}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgPaiementPartiel').hide();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Enregistrer" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{cotisationsBean.enregistrerPaiementPartiel(cotisationsBean.cotisationSelectionnee.montantPaye, cotisationsBean.cotisationSelectionnee.methodePaiement, cotisationsBean.cotisationSelectionnee.referencePaiement)}" />
|
||||
<ui:param name="update" value="@form :formPaiements" />
|
||||
<ui:param name="oncomplete" value="PF('dlgPaiementPartiel').hide();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
@@ -1,21 +1,184 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Rapports Financiers - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="card">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-chart-bar text-purple-500" />
|
||||
<ui:param name="title" value="Rapports Financiers" />
|
||||
<ui:param name="description" value="Analyse et rapports détaillés sur les cotisations et paiements" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsRapports">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Générer rapport" />
|
||||
<ui:param name="icon" value="pi pi-file-pdf" />
|
||||
<ui:param name="action" value="#{cotisationsBean.genererRapportFinancier}" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{cotisationsBean.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>
|
||||
|
||||
<!-- Vue d'ensemble -->
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-8">
|
||||
<div class="card">
|
||||
<h5>
|
||||
<i class="pi pi-chart-line mr-2"></i>
|
||||
Évolution des Paiements (12 derniers mois)
|
||||
</h5>
|
||||
<div class="flex flex-column gap-2 mt-3">
|
||||
<ui:repeat value="#{cotisationsBean.evolutionPaiements}" var="evolution">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="text-600" style="width: 60px;">#{evolution.mois}</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="bg-blue-500 border-round"
|
||||
style="width: #{evolution.hauteur}px; height: 20px; min-width: 10px;"></div>
|
||||
<span class="text-600 text-sm">#{evolution.montantFormatte}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="card">
|
||||
<h5>
|
||||
<i class="pi pi-chart-pie mr-2"></i>
|
||||
Répartition par Méthode
|
||||
</h5>
|
||||
<div class="flex flex-column gap-3 mt-3">
|
||||
<ui:repeat value="#{cotisationsBean.repartitionMethodes}" var="methode">
|
||||
<div>
|
||||
<div class="flex justify-content-between mb-1">
|
||||
<span class="font-medium">#{methode.methode}</span>
|
||||
<span class="text-600">#{methode.pourcentageInt}%</span>
|
||||
</div>
|
||||
<p:progressBar value="#{methode.pourcentageInt}"
|
||||
showValue="false" />
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
<!-- Statistiques détaillées -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.statistiques.totalCollecteFormatte}" />
|
||||
<ui:param name="label" value="Total Collecté" />
|
||||
<ui:param name="icon" value="pi pi-wallet" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.statistiques.objectifAnnuelFormatte}" />
|
||||
<ui:param name="label" value="Objectif Annuel" />
|
||||
<ui:param name="icon" value="pi pi-target" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.statistiques.moyenneMensuelleFormattee}" />
|
||||
<ui:param name="label" value="Moyenne Mensuelle" />
|
||||
<ui:param name="icon" value="pi pi-chart-line" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.statistiques.tauxRecouvrementInt}%" />
|
||||
<ui:param name="label" value="Taux de Recouvrement" />
|
||||
<ui:param name="icon" value="pi pi-percentage" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Résumé des cotisations -->
|
||||
<div class="card">
|
||||
<h5>
|
||||
<i class="pi pi-list mr-2"></i>
|
||||
Résumé des Cotisations
|
||||
</h5>
|
||||
|
||||
<div class="grid mt-3">
|
||||
<div class="col-12 md:col-6">
|
||||
<h6 class="mb-3">Par Statut</h6>
|
||||
<div class="flex flex-column gap-2">
|
||||
<div class="flex justify-content-between align-items-center p-2 border-round surface-50">
|
||||
<span class="font-medium">Payées</span>
|
||||
<p:tag value="#{cotisationsBean.compterParStatut('PAYEE')}"
|
||||
severity="success" />
|
||||
</div>
|
||||
<div class="flex justify-content-between align-items-center p-2 border-round surface-50">
|
||||
<span class="font-medium">Partiellement payées</span>
|
||||
<p:tag value="#{cotisationsBean.compterParStatut('PARTIELLEMENT_PAYEE')}"
|
||||
severity="info" />
|
||||
</div>
|
||||
<div class="flex justify-content-between align-items-center p-2 border-round surface-50">
|
||||
<span class="font-medium">En attente</span>
|
||||
<p:tag value="#{cotisationsBean.compterParStatut('EN_ATTENTE')}"
|
||||
severity="warning" />
|
||||
</div>
|
||||
<div class="flex justify-content-between align-items-center p-2 border-round surface-50">
|
||||
<span class="font-medium">En retard</span>
|
||||
<p:tag value="#{cotisationsBean.compterParStatut('EN_RETARD')}"
|
||||
severity="danger" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<h6 class="mb-3">Par Type</h6>
|
||||
<div class="flex flex-column gap-2">
|
||||
<div class="flex justify-content-between align-items-center p-2 border-round surface-50">
|
||||
<span class="font-medium">Mensuelle</span>
|
||||
<p:tag value="#{cotisationsBean.compterParType('MENSUELLE')}" severity="info" />
|
||||
</div>
|
||||
<div class="flex justify-content-between align-items-center p-2 border-round surface-50">
|
||||
<span class="font-medium">Trimestrielle</span>
|
||||
<p:tag value="#{cotisationsBean.compterParType('TRIMESTRIELLE')}" severity="info" />
|
||||
</div>
|
||||
<div class="flex justify-content-between align-items-center p-2 border-round surface-50">
|
||||
<span class="font-medium">Semestrielle</span>
|
||||
<p:tag value="#{cotisationsBean.compterParType('SEMESTRIELLE')}" severity="info" />
|
||||
</div>
|
||||
<div class="flex justify-content-between align-items-center p-2 border-round surface-50">
|
||||
<span class="font-medium">Annuelle</span>
|
||||
<p:tag value="#{cotisationsBean.compterParType('ANNUELLE')}" severity="info" />
|
||||
</div>
|
||||
<div class="flex justify-content-between align-items-center p-2 border-round surface-50">
|
||||
<span class="font-medium">Adhésion</span>
|
||||
<p:tag value="#{cotisationsBean.compterParType('ADHESION')}" severity="info" />
|
||||
</div>
|
||||
<div class="flex justify-content-between align-items-center p-2 border-round surface-50">
|
||||
<span class="font-medium">Exceptionnelle</span>
|
||||
<p:tag value="#{cotisationsBean.compterParType('EXCEPTIONNELLE')}" severity="info" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
@@ -1,21 +1,228 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Relances de Cotisations - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="card">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-send text-orange-500" />
|
||||
<ui:param name="title" value="Relances de Cotisations" />
|
||||
<ui:param name="description" value="Gestion et envoi des relances pour les cotisations en retard" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsRelances">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-warning.xhtml">
|
||||
<ui:param name="value" value="Relances groupées" />
|
||||
<ui:param name="icon" value="pi pi-send" />
|
||||
<ui:param name="onclick" value="PF('dlgRelancesGroupes').show();" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{cotisationsBean.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 de relances -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.statistiques.cotisationsEnRetard}" />
|
||||
<ui:param name="label" value="Cotisations en Retard" />
|
||||
<ui:param name="icon" value="pi pi-exclamation-triangle" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.statistiques.montantRetardFormatte}" />
|
||||
<ui:param name="label" value="Montant en Retard" />
|
||||
<ui:param name="icon" value="pi pi-clock" />
|
||||
<ui:param name="bgColor" value="red" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.rappelsEnAttente.size()}" />
|
||||
<ui:param name="label" value="Rappels en Attente" />
|
||||
<ui:param name="icon" value="pi pi-bell" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{cotisationsBean.statistiques.tauxRecouvrementInt}%" />
|
||||
<ui:param name="label" value="Taux de Recouvrement" />
|
||||
<ui:param name="icon" value="pi pi-percentage" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Liste des rappels en attente -->
|
||||
<div class="card">
|
||||
<h5>
|
||||
<i class="pi pi-bell mr-2"></i>
|
||||
Rappels en Attente
|
||||
</h5>
|
||||
|
||||
<p:dataTable id="dtRappels"
|
||||
value="#{cotisationsBean.rappelsEnAttente}"
|
||||
var="rappel"
|
||||
paginator="true"
|
||||
rows="20"
|
||||
emptyMessage="Aucun rappel en attente">
|
||||
|
||||
<p:column headerText="Membre" sortBy="#{rappel.nomMembre}">
|
||||
<div>
|
||||
<div class="font-medium">#{rappel.nomMembre}</div>
|
||||
<div class="text-600 text-sm">#{rappel.club}</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Montant Dû" sortBy="#{rappel.montantDu}" style="width:120px">
|
||||
<h:outputText value="#{rappel.montantDuFormatte}" styleClass="font-bold" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Jours de Retard" sortBy="#{rappel.joursRetard}" style="width:120px">
|
||||
<h:outputText value="#{rappel.joursRetard} jour(s)" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Priorité" sortBy="#{rappel.priorite}" style="width:120px">
|
||||
<p:tag value="#{rappel.priorite}"
|
||||
severity="#{rappel.prioriteSeverity}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:150px">
|
||||
<ui:include src="/templates/components/button-warning.xhtml">
|
||||
<ui:param name="value" value="Envoyer" />
|
||||
<ui:param name="icon" value="pi pi-send" />
|
||||
<ui:param name="action" value="#{cotisationsBean.envoyerRappel}" />
|
||||
<ui:param name="update" value="@form" />
|
||||
<ui:param name="styleClass" value="p-button-sm" />
|
||||
</ui:include>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</div>
|
||||
|
||||
<!-- Cotisations en retard -->
|
||||
<div class="card">
|
||||
<h:form id="formRelances">
|
||||
<h5>Cotisations en Retard</h5>
|
||||
|
||||
<p:dataTable id="dtRetard"
|
||||
value="#{cotisationsBean.cotisationsFiltrees}"
|
||||
var="cotisation"
|
||||
filteredValue="#{cotisationsBean.cotisationsFiltrees}"
|
||||
paginator="true"
|
||||
rows="20"
|
||||
emptyMessage="Aucune cotisation en retard"
|
||||
selection="#{cotisationsBean.cotisationsSelectionnees}"
|
||||
selectionMode="multiple">
|
||||
|
||||
<f:facet name="header">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span>Cotisations nécessitant une relance</span>
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-warning.xhtml">
|
||||
<ui:param name="value" value="Relancer sélectionnées" />
|
||||
<ui:param name="icon" value="pi pi-send" />
|
||||
<ui:param name="action" value="#{cotisationsBean.envoyerRappelsGroupes}" />
|
||||
<ui:param name="update" value="@form" />
|
||||
<ui:param name="disabled" value="#{empty cotisationsBean.cotisationsSelectionnees}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</f:facet>
|
||||
|
||||
<p:column selectionMode="multiple" style="width:50px" />
|
||||
|
||||
<p:column headerText="Membre" sortBy="#{cotisation.nomMembre}">
|
||||
<div>
|
||||
<div class="font-medium">#{cotisation.nomMembre}</div>
|
||||
<div class="text-600 text-sm">#{cotisation.numeroMembre}</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Type" sortBy="#{cotisation.typeCotisation}" style="width:120px">
|
||||
<p:tag value="#{cotisation.typeCotisationLibelle}" severity="info" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Montant Dû" sortBy="#{cotisation.montantDu}" style="width:120px">
|
||||
<h:outputText value="#{cotisation.montantDuFormatte}" styleClass="font-bold" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Échéance" sortBy="#{cotisation.dateEcheance}" style="width:120px">
|
||||
<h:outputText value="#{cotisation.dateEcheanceFormatee}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Jours Retard" style="width:120px">
|
||||
<h:outputText value="#{cotisation.joursRetard} jour(s)"
|
||||
styleClass="#{cotisation.joursRetard > 30 ? 'text-red-500 font-bold' : cotisation.joursRetard > 15 ? 'text-orange-500' : 'text-yellow-500'}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width:150px">
|
||||
<div class="flex gap-1">
|
||||
<p:commandButton icon="pi pi-send"
|
||||
title="Envoyer un rappel"
|
||||
styleClass="p-button-rounded p-button-text p-button-warning"
|
||||
action="#{cotisationsBean.envoyerRappel(cotisation)}"
|
||||
update="@form" />
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Relances Groupées -->
|
||||
<p:dialog header="Relances Groupées" widgetVar="dlgRelancesGroupes" modal="true" width="500" resizable="false">
|
||||
<h:form id="formRelancesGroupes">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<p:outputLabel for="messageRelance" value="Message de relance" />
|
||||
<p:inputTextarea id="messageRelance"
|
||||
rows="5"
|
||||
styleClass="w-full"
|
||||
placeholder="Message personnalisé pour les relances..." />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:selectBooleanCheckbox id="relanceUrgente" />
|
||||
<p:outputLabel for="relanceUrgente" value=" Marquer comme urgente" />
|
||||
</div>
|
||||
|
||||
<div class="surface-50 p-3 border-round">
|
||||
<div class="font-medium mb-2">Destinataires :</div>
|
||||
<div class="text-600 text-sm">#{cotisationsBean.cotisationsSelectionnees.size()} cotisation(s) sélectionnée(s)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-3">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgRelancesGroupes').hide();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-warning.xhtml">
|
||||
<ui:param name="value" value="Envoyer les relances" />
|
||||
<ui:param name="icon" value="pi pi-send" />
|
||||
<ui:param name="action" value="#{cotisationsBean.envoyerRappelsGroupes}" />
|
||||
<ui:param name="update" value="@form :formRelances" />
|
||||
<ui:param name="oncomplete" value="PF('dlgRelancesGroupes').hide();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
@@ -243,47 +243,35 @@
|
||||
</div>
|
||||
|
||||
<h:panelGroup id="tendancesPanel" layout="block">
|
||||
<!-- Simulation graphique avec barres -->
|
||||
<!-- Graphique avec données dynamiques -->
|
||||
<div class="grid">
|
||||
<div class="col-4 text-center">
|
||||
<h6 class="text-600 mb-2">Mai 2024</h6>
|
||||
<div class="flex flex-column align-items-center">
|
||||
<div class="bg-blue-500 border-round mb-2" style="width:20px;height:80px;"></div>
|
||||
<span class="text-sm text-600">2.5M FCFA</span>
|
||||
<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>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<h6 class="text-600 mb-2">Juin 2024</h6>
|
||||
<div class="flex flex-column align-items-center">
|
||||
<div class="bg-green-500 border-round mb-2" style="width:20px;height:120px;"></div>
|
||||
<span class="text-sm text-600">3.8M FCFA</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4 text-center">
|
||||
<h6 class="text-600 mb-2">Juillet 2024</h6>
|
||||
<div class="flex flex-column align-items-center">
|
||||
<div class="bg-blue-600 border-round mb-2" style="width:20px;height:100px;"></div>
|
||||
<span class="text-sm text-600">3.2M FCFA</span>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
|
||||
<!-- Indicateurs de tendance -->
|
||||
<!-- Indicateurs de tendance dynamiques -->
|
||||
<div class="grid mt-4">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="flex align-items-center">
|
||||
<i class="pi pi-arrow-up text-green-500 text-2xl mr-2"></i>
|
||||
<i class="#{dashboardBean.evolutionRecettesIcon} text-2xl mr-2"></i>
|
||||
<div>
|
||||
<div class="text-900 font-medium">+28%</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="pi pi-arrow-down text-red-500 text-2xl mr-2"></i>
|
||||
<i class="#{dashboardBean.evolutionDepensesIcon} text-2xl mr-2"></i>
|
||||
<div>
|
||||
<div class="text-900 font-medium">-12%</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>
|
||||
@@ -292,7 +280,7 @@
|
||||
<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">Stable</div>
|
||||
<div class="text-900 font-medium">#{dashboardBean.tendanceParticipation}</div>
|
||||
<span class="text-600 text-sm">Taux de participation</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -306,61 +294,60 @@
|
||||
<div class="card">
|
||||
<h5>État des cotisations</h5>
|
||||
|
||||
<!-- Simulation graphique circulaire avec CSS -->
|
||||
<!-- 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" style="top: 10px; left: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 50%; background: conic-gradient(#3b82f6 0deg 216deg, #f97316 216deg 288deg, #ef4444 288deg 360deg);"></div>
|
||||
<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">85%</span>
|
||||
<span class="text-900 font-bold">#{dashboardBean.cotisationsAJourPourcent}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Légende avec indicateurs visuels -->
|
||||
<!-- 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">60%</span>
|
||||
<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">20%</span>
|
||||
<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">20%</span>
|
||||
<span class="text-900 font-medium">#{dashboardBean.cotisationsImpayeesPourcent}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Barres de progression détaillées -->
|
||||
<!-- 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">75%</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: 75%;"></div>
|
||||
<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">82%</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: 82%;"></div>
|
||||
<div class="bg-blue-500 h-full border-round" style="width: #{dashboardBean.tauxObjectifCotisations}%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,182 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Calendrier des Événements - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-calendar-plus text-blue-500" />
|
||||
<ui:param name="title" value="Calendrier des Événements" />
|
||||
<ui:param name="description" value="Vue calendrier de tous les événements de l'organisation" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsCalendrier">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Nouvel événement" />
|
||||
<ui:param name="icon" value="pi pi-plus" />
|
||||
<ui:param name="outcome" value="/pages/secure/evenement/creation.xhtml" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{evenementsBean.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>
|
||||
|
||||
<!-- Calendrier -->
|
||||
<div class="card">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
</div>
|
||||
<h:form id="formCalendrier">
|
||||
<h5>Calendrier</h5>
|
||||
|
||||
<div class="text-center p-4">
|
||||
<i class="pi pi-calendar text-4xl text-blue-500 mb-3"></i>
|
||||
<h5>Calendrier des Événements</h5>
|
||||
<p class="text-600">La vue calendrier interactive sera disponible prochainement</p>
|
||||
<p class="text-600 mt-2">En attendant, utilisez la liste des événements à venir ci-dessous</p>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Liste des événements à venir -->
|
||||
<div class="card">
|
||||
<h:form id="formListeProchains">
|
||||
<h5>Événements à Venir</h5>
|
||||
|
||||
<p:dataTable id="dtProchains"
|
||||
value="#{evenementsBean.evenementsProchains}"
|
||||
var="evenement"
|
||||
paginator="false"
|
||||
emptyMessage="Aucun événement à venir"
|
||||
rowKey="#{evenement.id}">
|
||||
|
||||
<p:column headerText="Date">
|
||||
<div>
|
||||
<div class="font-medium">#{evenement.dateDebutFormatee}</div>
|
||||
<div class="text-sm text-600">#{evenement.heureDebutFormatee} - #{evenement.heureFinFormatee}</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Événement">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="#{evenement.typeEvenementIcon} text-#{evenement.typeEvenementSeverity}"></i>
|
||||
<div>
|
||||
<div class="font-semibold">#{evenement.titre}</div>
|
||||
<div class="text-sm text-600">#{evenement.lieu}</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut">
|
||||
<p:tag value="#{evenement.statutLibelle}"
|
||||
severity="#{evenement.statutSeverity}"
|
||||
icon="#{evenement.statutIcon}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Participants">
|
||||
<div>#{evenement.participantsInscrits} / #{evenement.capaciteMax}</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
title="Voir détails"
|
||||
styleClass="p-button-text p-button-rounded"
|
||||
action="#{evenementsBean.selectionnerEvenement(evenement)}"
|
||||
update=":formCalendrier:dlgDetails"
|
||||
oncomplete="PF('dlgDetails').show();" />
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Détails -->
|
||||
<h:form id="formDetails">
|
||||
<p:dialog id="dlgDetails" header="Détails de l'Événement"
|
||||
widgetVar="dlgDetails"
|
||||
modal="true"
|
||||
resizable="false"
|
||||
style="width: 90vw; max-width: 700px;">
|
||||
<div class="grid" rendered="#{evenementsBean.evenementSelectionne != null}">
|
||||
<div class="col-12">
|
||||
<h4>#{evenementsBean.evenementSelectionne.titre}</h4>
|
||||
<p class="text-600">#{evenementsBean.evenementSelectionne.description}</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Type</label>
|
||||
<p:tag value="#{evenementsBean.evenementSelectionne.typeEvenementLibelle}"
|
||||
severity="#{evenementsBean.evenementSelectionne.typeEvenementSeverity}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Statut</label>
|
||||
<p:tag value="#{evenementsBean.evenementSelectionne.statutLibelle}"
|
||||
severity="#{evenementsBean.evenementSelectionne.statutSeverity}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Date de début</label>
|
||||
<div>#{evenementsBean.evenementSelectionne.dateDebutFormatee}</div>
|
||||
<div class="text-sm text-600">#{evenementsBean.evenementSelectionne.heureDebutFormatee}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Lieu</label>
|
||||
<div>#{evenementsBean.evenementSelectionne.lieu}</div>
|
||||
<div class="text-sm text-600">#{evenementsBean.evenementSelectionne.adresseComplete}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Participants</label>
|
||||
<div>#{evenementsBean.evenementSelectionne.participantsInscrits} / #{evenementsBean.evenementSelectionne.capaciteMax}</div>
|
||||
<p:progressBar value="#{evenementsBean.evenementSelectionne.tauxRemplissage}"
|
||||
showValue="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Budget</label>
|
||||
<div>#{evenementsBean.evenementSelectionne.budgetFormate}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<f:facet name="footer">
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Voir détails"
|
||||
icon="pi pi-eye"
|
||||
outcome="/pages/secure/evenement/gestion.xhtml"
|
||||
styleClass="p-button-outlined" />
|
||||
<p:commandButton value="Fermer"
|
||||
icon="pi pi-times"
|
||||
onclick="PF('dlgDetails').hide();"
|
||||
styleClass="p-button-secondary p-button-outlined" />
|
||||
</div>
|
||||
</f:facet>
|
||||
</p:dialog>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
|
||||
@@ -1,20 +1,266 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Création d'Événement - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-plus-circle text-green-500" />
|
||||
<ui:param name="title" value="Créer un Nouvel Événement" />
|
||||
<ui:param name="description" value="Remplissez le formulaire pour créer un nouvel événement" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsCreation">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Retour" />
|
||||
<ui:param name="icon" value="pi pi-arrow-left" />
|
||||
<ui:param name="outcome" value="/pages/secure/evenement/gestion.xhtml" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<!-- Formulaire de création -->
|
||||
<div class="card">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
</div>
|
||||
<h:form id="formCreation">
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:define name="title">Informations Générales</ui:define>
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="titre" />
|
||||
<ui:param name="label" value="Titre de l'événement *" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.titre}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="placeholder" value="Ex: Assemblée Générale Annuelle 2025" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="description" />
|
||||
<ui:param name="label" value="Description" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.description}" />
|
||||
<ui:param name="rows" value="4" />
|
||||
<ui:param name="placeholder" value="Description détaillée de l'événement..." />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="typeEvenement" />
|
||||
<ui:param name="label" value="Type d'événement *" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.typeEvenement}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="items">
|
||||
<f:selectItem itemLabel="Sélectionner un type" itemValue="" />
|
||||
<f:selectItem itemLabel="Assemblée Générale" itemValue="ASSEMBLEE_GENERALE" />
|
||||
<f:selectItem itemLabel="Formation" itemValue="FORMATION" />
|
||||
<f:selectItem itemLabel="Activité Sociale" itemValue="ACTIVITE_SOCIALE" />
|
||||
<f:selectItem itemLabel="Action Caritative" itemValue="ACTION_CARITATIVE" />
|
||||
<f:selectItem itemLabel="Réunion de Bureau" itemValue="REUNION_BUREAU" />
|
||||
<f:selectItem itemLabel="Conférence" itemValue="CONFERENCE" />
|
||||
<f:selectItem itemLabel="Atelier" itemValue="ATELIER" />
|
||||
<f:selectItem itemLabel="Cérémonie" itemValue="CEREMONIE" />
|
||||
<f:selectItem itemLabel="Autre" itemValue="AUTRE" />
|
||||
</ui:param>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="priorite" />
|
||||
<ui:param name="label" value="Priorité" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.priorite}" />
|
||||
<ui:param name="items">
|
||||
<f:selectItem itemLabel="Normale" itemValue="NORMALE" />
|
||||
<f:selectItem itemLabel="Haute" itemValue="HAUTE" />
|
||||
<f:selectItem itemLabel="Critique" itemValue="CRITIQUE" />
|
||||
<f:selectItem itemLabel="Basse" itemValue="BASSE" />
|
||||
</ui:param>
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:define name="title">Dates et Horaires</ui:define>
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateDebut" />
|
||||
<ui:param name="label" value="Date de début *" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.dateDebut}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateFin" />
|
||||
<ui:param name="label" value="Date de fin" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.dateFin}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="heureDebut" value="Heure de début" />
|
||||
<p:inputMask id="heureDebut"
|
||||
value="#{evenementsBean.nouvelEvenement.heureDebut}"
|
||||
mask="99:99"
|
||||
placeholder="HH:mm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="heureFin" value="Heure de fin" />
|
||||
<p:inputMask id="heureFin"
|
||||
value="#{evenementsBean.nouvelEvenement.heureFin}"
|
||||
mask="99:99"
|
||||
placeholder="HH:mm" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:define name="title">Localisation</ui:define>
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="lieu" />
|
||||
<ui:param name="label" value="Lieu *" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.lieu}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="placeholder" value="Ex: Salle de conférence" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="adresse" />
|
||||
<ui:param name="label" value="Adresse" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.adresse}" />
|
||||
<ui:param name="placeholder" value="Adresse complète" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="ville" />
|
||||
<ui:param name="label" value="Ville" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.ville}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="region" />
|
||||
<ui:param name="label" value="Région" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.region}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:define name="title">Organisation et Participants</ui:define>
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="organisateur" />
|
||||
<ui:param name="label" value="Organisateur" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.organisateur}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-number.xhtml">
|
||||
<ui:param name="id" value="capaciteMax" />
|
||||
<ui:param name="label" value="Capacité maximale" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.capaciteMax}" />
|
||||
<ui:param name="min" value="1" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateLimiteInscription" />
|
||||
<ui:param name="label" value="Date limite d'inscription" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.dateLimiteInscription}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-boolean.xhtml">
|
||||
<ui:param name="id" value="inscriptionObligatoire" />
|
||||
<ui:param name="label" value="Inscription obligatoire" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.inscriptionObligatoire}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:define name="title">Budget</ui:define>
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-number.xhtml">
|
||||
<ui:param name="id" value="budget" />
|
||||
<ui:param name="label" value="Budget prévu" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.budget}" />
|
||||
<ui:param name="min" value="0" />
|
||||
<ui:param name="suffix" value=" FCFA" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="codeDevise" />
|
||||
<ui:param name="label" value="Devise" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.codeDevise}" />
|
||||
<ui:param name="placeholder" value="XOF" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-content-end gap-2 mt-4">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="outcome" value="/pages/secure/evenement/gestion.xhtml" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Créer l'événement" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{evenementsBean.creerEvenement}" />
|
||||
<ui:param name="update" value="@form" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
|
||||
@@ -1,21 +1,493 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Gestion des Événements - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="card">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
</div>
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-calendar text-blue-500" />
|
||||
<ui:param name="title" value="Gestion des Événements" />
|
||||
<ui:param name="description" value="Création, suivi et gestion des événements de l'organisation" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsEvenements">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Nouvel événement" />
|
||||
<ui:param name="icon" value="pi pi-plus" />
|
||||
<ui:param name="onclick" value="PF('dlgNouvelEvenement').show();" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Exporter" />
|
||||
<ui:param name="icon" value="pi pi-download" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{evenementsBean.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 -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{evenementsBean.statistiques.totalEvenements}" />
|
||||
<ui:param name="label" value="Total Événements" />
|
||||
<ui:param name="icon" value="pi pi-calendar" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{evenementsBean.statistiques.evenementsActifs}" />
|
||||
<ui:param name="label" value="Événements Actifs" />
|
||||
<ui:param name="icon" value="pi pi-check-circle" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{evenementsBean.statistiques.participantsTotal}" />
|
||||
<ui:param name="label" value="Total Participants" />
|
||||
<ui:param name="icon" value="pi pi-users" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{evenementsBean.statistiques.budgetTotal}" />
|
||||
<ui:param name="label" value="Budget Total" />
|
||||
<ui:param name="icon" value="pi pi-wallet" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Liste des événements -->
|
||||
<div class="card">
|
||||
<h:form id="formEvenements">
|
||||
<h5>Liste des Événements</h5>
|
||||
|
||||
<!-- Filtres -->
|
||||
<p:toolbar>
|
||||
<p:toolbarGroup>
|
||||
<div class="flex align-items-center gap-2 flex-wrap">
|
||||
<ui:include src="/templates/components/form-field-search-text.xhtml">
|
||||
<ui:param name="id" value="searchTitre" />
|
||||
<ui:param name="value" value="#{evenementsBean.filtres.titre}" />
|
||||
<ui:param name="placeholder" value="Rechercher par titre..." />
|
||||
<ui:param name="update" value="dtEvenements" />
|
||||
</ui:include>
|
||||
|
||||
<p:selectOneMenu value="#{evenementsBean.filtres.type}" styleClass="w-full" style="min-width: 200px;">
|
||||
<f:selectItem itemLabel="Tous les types" itemValue="" />
|
||||
<f:selectItem itemLabel="Assemblée Générale" itemValue="ASSEMBLEE_GENERALE" />
|
||||
<f:selectItem itemLabel="Formation" itemValue="FORMATION" />
|
||||
<f:selectItem itemLabel="Activité Sociale" itemValue="ACTIVITE_SOCIALE" />
|
||||
<f:selectItem itemLabel="Action Caritative" itemValue="ACTION_CARITATIVE" />
|
||||
<f:selectItem itemLabel="Réunion de Bureau" itemValue="REUNION_BUREAU" />
|
||||
<f:selectItem itemLabel="Conférence" itemValue="CONFERENCE" />
|
||||
<f:selectItem itemLabel="Atelier" itemValue="ATELIER" />
|
||||
<f:selectItem itemLabel="Cérémonie" itemValue="CEREMONIE" />
|
||||
<f:selectItem itemLabel="Autre" itemValue="AUTRE" />
|
||||
<p:ajax event="change" update="dtEvenements" />
|
||||
</p:selectOneMenu>
|
||||
|
||||
<p:selectOneMenu value="#{evenementsBean.filtres.statut}" styleClass="w-full" style="min-width: 200px;">
|
||||
<f:selectItem itemLabel="Tous les statuts" itemValue="" />
|
||||
<f:selectItem itemLabel="Planifié" itemValue="PLANIFIE" />
|
||||
<f:selectItem itemLabel="Confirmé" itemValue="CONFIRME" />
|
||||
<f:selectItem itemLabel="En cours" itemValue="EN_COURS" />
|
||||
<f:selectItem itemLabel="Terminé" itemValue="TERMINE" />
|
||||
<f:selectItem itemLabel="Annulé" itemValue="ANNULE" />
|
||||
<f:selectItem itemLabel="Reporté" itemValue="REPORTE" />
|
||||
<p:ajax event="change" update="dtEvenements" />
|
||||
</p:selectOneMenu>
|
||||
|
||||
<p:selectOneMenu value="#{evenementsBean.filtres.priorite}" styleClass="w-full" style="min-width: 150px;">
|
||||
<f:selectItem itemLabel="Toutes les priorités" itemValue="" />
|
||||
<f:selectItem itemLabel="Critique" itemValue="CRITIQUE" />
|
||||
<f:selectItem itemLabel="Haute" itemValue="HAUTE" />
|
||||
<f:selectItem itemLabel="Normale" itemValue="NORMALE" />
|
||||
<f:selectItem itemLabel="Basse" itemValue="BASSE" />
|
||||
<p:ajax event="change" update="dtEvenements" />
|
||||
</p:selectOneMenu>
|
||||
|
||||
<p:commandButton value="Réinitialiser" icon="pi pi-filter-slash"
|
||||
action="#{evenementsBean.reinitialiserFiltres}"
|
||||
update="dtEvenements, formEvenements"
|
||||
styleClass="p-button-outlined" />
|
||||
</div>
|
||||
</p:toolbarGroup>
|
||||
</p:toolbar>
|
||||
|
||||
<!-- Tableau des événements -->
|
||||
<p:dataTable id="dtEvenements"
|
||||
value="#{evenementsBean.evenementsFiltres}"
|
||||
var="evenement"
|
||||
paginator="true"
|
||||
rows="20"
|
||||
rowsPerPageTemplate="10,20,50,100"
|
||||
emptyMessage="Aucun événement trouvé"
|
||||
selection="#{evenementsBean.evenementSelectionne}"
|
||||
selectionMode="single"
|
||||
rowKey="#{evenement.id}">
|
||||
|
||||
<p:column headerText="Titre" sortBy="#{evenement.titre}" filterBy="#{evenement.titre}">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="#{evenement.typeEvenementIcon} text-#{evenement.typeEvenementSeverity}"></i>
|
||||
<span class="font-semibold">#{evenement.titre}</span>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Type" sortBy="#{evenement.typeEvenement}">
|
||||
<p:tag value="#{evenement.typeEvenementLibelle}"
|
||||
severity="#{evenement.typeEvenementSeverity}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date" sortBy="#{evenement.dateDebut}">
|
||||
<div>
|
||||
<div class="font-medium">#{evenement.dateDebutFormatee}</div>
|
||||
<div class="text-sm text-600">#{evenement.heureDebutFormatee} - #{evenement.heureFinFormatee}</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Lieu">
|
||||
<div>
|
||||
<div class="font-medium">#{evenement.lieu}</div>
|
||||
<div class="text-sm text-600">#{evenement.ville}</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut" sortBy="#{evenement.statut}">
|
||||
<p:tag value="#{evenement.statutLibelle}"
|
||||
severity="#{evenement.statutSeverity}"
|
||||
icon="#{evenement.statutIcon}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Priorité" sortBy="#{evenement.priorite}">
|
||||
<p:tag value="#{evenement.prioriteLibelle}"
|
||||
severity="#{evenement.prioriteSeverity}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Participants">
|
||||
<div>
|
||||
<div class="font-medium">#{evenement.participantsInscrits} / #{evenement.capaciteMax}</div>
|
||||
<p:progressBar value="#{evenement.tauxRemplissage}"
|
||||
styleClass="mt-1"
|
||||
showValue="false" />
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width: 200px;">
|
||||
<div class="flex gap-1">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
title="Voir détails"
|
||||
styleClass="p-button-text p-button-rounded"
|
||||
action="#{evenementsBean.selectionnerEvenement(evenement)}"
|
||||
update=":formEvenements:dlgDetails"
|
||||
oncomplete="PF('dlgDetails').show();" />
|
||||
|
||||
<p:commandButton icon="pi pi-pencil"
|
||||
title="Modifier"
|
||||
styleClass="p-button-text p-button-rounded p-button-success"
|
||||
action="#{evenementsBean.selectionnerEvenement(evenement)}"
|
||||
update=":formEvenements:dlgModifier"
|
||||
oncomplete="PF('dlgModifier').show();" />
|
||||
|
||||
<p:commandButton icon="pi pi-trash"
|
||||
title="Supprimer"
|
||||
styleClass="p-button-text p-button-rounded p-button-danger"
|
||||
action="#{evenementsBean.supprimerEvenement}"
|
||||
update="@form"
|
||||
onclick="return confirm('Êtes-vous sûr de vouloir supprimer cet événement ?');" />
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Nouvel Événement -->
|
||||
<h:form id="formNouvelEvenement">
|
||||
<p:dialog id="dlgNouvelEvenement" header="Nouvel Événement"
|
||||
widgetVar="dlgNouvelEvenement"
|
||||
modal="true"
|
||||
resizable="false"
|
||||
style="width: 90vw; max-width: 800px;">
|
||||
<ui:include src="/templates/components/form-section.xhtml">
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="titre" />
|
||||
<ui:param name="label" value="Titre *" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.titre}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="description" />
|
||||
<ui:param name="label" value="Description" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.description}" />
|
||||
<ui:param name="rows" value="3" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="typeEvenement" />
|
||||
<ui:param name="label" value="Type d'événement *" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.typeEvenement}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="items">
|
||||
<f:selectItem itemLabel="Assemblée Générale" itemValue="ASSEMBLEE_GENERALE" />
|
||||
<f:selectItem itemLabel="Formation" itemValue="FORMATION" />
|
||||
<f:selectItem itemLabel="Activité Sociale" itemValue="ACTIVITE_SOCIALE" />
|
||||
<f:selectItem itemLabel="Action Caritative" itemValue="ACTION_CARITATIVE" />
|
||||
<f:selectItem itemLabel="Réunion de Bureau" itemValue="REUNION_BUREAU" />
|
||||
<f:selectItem itemLabel="Conférence" itemValue="CONFERENCE" />
|
||||
<f:selectItem itemLabel="Atelier" itemValue="ATELIER" />
|
||||
<f:selectItem itemLabel="Cérémonie" itemValue="CEREMONIE" />
|
||||
<f:selectItem itemLabel="Autre" itemValue="AUTRE" />
|
||||
</ui:param>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="priorite" />
|
||||
<ui:param name="label" value="Priorité" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.priorite}" />
|
||||
<ui:param name="items">
|
||||
<f:selectItem itemLabel="Critique" itemValue="CRITIQUE" />
|
||||
<f:selectItem itemLabel="Haute" itemValue="HAUTE" />
|
||||
<f:selectItem itemLabel="Normale" itemValue="NORMALE" />
|
||||
<f:selectItem itemLabel="Basse" itemValue="BASSE" />
|
||||
</ui:param>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateDebut" />
|
||||
<ui:param name="label" value="Date de début *" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.dateDebut}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateFin" />
|
||||
<ui:param name="label" value="Date de fin" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.dateFin}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="lieu" />
|
||||
<ui:param name="label" value="Lieu *" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.lieu}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-number.xhtml">
|
||||
<ui:param name="id" value="capaciteMax" />
|
||||
<ui:param name="label" value="Capacité maximale" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.capaciteMax}" />
|
||||
<ui:param name="min" value="1" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-number.xhtml">
|
||||
<ui:param name="id" value="budget" />
|
||||
<ui:param name="label" value="Budget prévu" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.budget}" />
|
||||
<ui:param name="min" value="0" />
|
||||
<ui:param name="suffix" value=" FCFA" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="organisateur" />
|
||||
<ui:param name="label" value="Organisateur" />
|
||||
<ui:param name="value" value="#{evenementsBean.nouvelEvenement.organisateur}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<f:facet name="footer">
|
||||
<div class="flex justify-content-end gap-2">
|
||||
<p:commandButton value="Annuler"
|
||||
icon="pi pi-times"
|
||||
onclick="PF('dlgNouvelEvenement').hide();"
|
||||
styleClass="p-button-outlined" />
|
||||
<p:commandButton value="Créer"
|
||||
icon="pi pi-check"
|
||||
action="#{evenementsBean.creerEvenement}"
|
||||
update="@form"
|
||||
oncomplete="if(!args.validationFailed) { PF('dlgNouvelEvenement').hide(); }" />
|
||||
</div>
|
||||
</f:facet>
|
||||
</p:dialog>
|
||||
</h:form>
|
||||
|
||||
<!-- Dialog Détails -->
|
||||
<h:form id="formDetails">
|
||||
<p:dialog id="dlgDetails" header="Détails de l'Événement"
|
||||
widgetVar="dlgDetails"
|
||||
modal="true"
|
||||
resizable="false"
|
||||
style="width: 90vw; max-width: 700px;">
|
||||
<div class="grid" rendered="#{evenementsBean.evenementSelectionne != null}">
|
||||
<div class="col-12">
|
||||
<h4>#{evenementsBean.evenementSelectionne.titre}</h4>
|
||||
<p class="text-600">#{evenementsBean.evenementSelectionne.description}</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Type</label>
|
||||
<p:tag value="#{evenementsBean.evenementSelectionne.typeEvenementLibelle}"
|
||||
severity="#{evenementsBean.evenementSelectionne.typeEvenementSeverity}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Statut</label>
|
||||
<p:tag value="#{evenementsBean.evenementSelectionne.statutLibelle}"
|
||||
severity="#{evenementsBean.evenementSelectionne.statutSeverity}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Date de début</label>
|
||||
<div>#{evenementsBean.evenementSelectionne.dateDebutFormatee}</div>
|
||||
<div class="text-sm text-600">#{evenementsBean.evenementSelectionne.heureDebutFormatee}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Lieu</label>
|
||||
<div>#{evenementsBean.evenementSelectionne.lieu}</div>
|
||||
<div class="text-sm text-600">#{evenementsBean.evenementSelectionne.adresseComplete}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Participants</label>
|
||||
<div>#{evenementsBean.evenementSelectionne.participantsInscrits} / #{evenementsBean.evenementSelectionne.capaciteMax}</div>
|
||||
<p:progressBar value="#{evenementsBean.evenementSelectionne.tauxRemplissage}"
|
||||
showValue="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Budget</label>
|
||||
<div>#{evenementsBean.evenementSelectionne.budgetFormate}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<f:facet name="footer">
|
||||
<p:commandButton value="Fermer"
|
||||
icon="pi pi-times"
|
||||
onclick="PF('dlgDetails').hide();"
|
||||
styleClass="p-button-outlined" />
|
||||
</f:facet>
|
||||
</p:dialog>
|
||||
</h:form>
|
||||
|
||||
<!-- Dialog Modifier -->
|
||||
<h:form id="formModifier">
|
||||
<p:dialog id="dlgModifier" header="Modifier l'Événement"
|
||||
widgetVar="dlgModifier"
|
||||
modal="true"
|
||||
resizable="false"
|
||||
style="width: 90vw; max-width: 800px;">
|
||||
<div class="grid" rendered="#{evenementsBean.evenementSelectionne != null}">
|
||||
<div class="col-12">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="titreModif" />
|
||||
<ui:param name="label" value="Titre *" />
|
||||
<ui:param name="value" value="#{evenementsBean.evenementSelectionne.titre}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="descriptionModif" />
|
||||
<ui:param name="label" value="Description" />
|
||||
<ui:param name="value" value="#{evenementsBean.evenementSelectionne.description}" />
|
||||
<ui:param name="rows" value="3" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="statutModif" />
|
||||
<ui:param name="label" value="Statut" />
|
||||
<ui:param name="value" value="#{evenementsBean.evenementSelectionne.statut}" />
|
||||
<ui:param name="items">
|
||||
<f:selectItem itemLabel="Planifié" itemValue="PLANIFIE" />
|
||||
<f:selectItem itemLabel="Confirmé" itemValue="CONFIRME" />
|
||||
<f:selectItem itemLabel="En cours" itemValue="EN_COURS" />
|
||||
<f:selectItem itemLabel="Terminé" itemValue="TERMINE" />
|
||||
<f:selectItem itemLabel="Annulé" itemValue="ANNULE" />
|
||||
<f:selectItem itemLabel="Reporté" itemValue="REPORTE" />
|
||||
</ui:param>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateDebutModif" />
|
||||
<ui:param name="label" value="Date de début *" />
|
||||
<ui:param name="value" value="#{evenementsBean.evenementSelectionne.dateDebut}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<f:facet name="footer">
|
||||
<div class="flex justify-content-end gap-2">
|
||||
<p:commandButton value="Annuler"
|
||||
icon="pi pi-times"
|
||||
onclick="PF('dlgModifier').hide();"
|
||||
styleClass="p-button-outlined" />
|
||||
<p:commandButton value="Enregistrer"
|
||||
icon="pi pi-check"
|
||||
action="#{evenementsBean.modifierEvenement}"
|
||||
update="@form"
|
||||
oncomplete="if(!args.validationFailed) { PF('dlgModifier').hide(); }" />
|
||||
</div>
|
||||
</f:facet>
|
||||
</p:dialog>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
|
||||
@@ -5,16 +5,115 @@
|
||||
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
<ui:define name="title">UnionFlow - Participants</ui:define>
|
||||
|
||||
<ui:define name="title">Gestion des Participants - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h2>Participants - Evenement</h2>
|
||||
<p>Page en cours de développement...</p>
|
||||
<p:button value="Retour" icon="pi pi-arrow-left" outcome="/pages/secure/dashboard"/>
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-users text-green-500" />
|
||||
<ui:param name="title" value="Gestion des Participants" />
|
||||
<ui:param name="description" value="Gérer les participants et les inscriptions aux événements" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsParticipants">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Retour" />
|
||||
<ui:param name="icon" value="pi pi-arrow-left" />
|
||||
<ui:param name="outcome" value="/pages/secure/evenement/gestion.xhtml" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{evenementsBean.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>
|
||||
|
||||
<!-- Sélection d'événement -->
|
||||
<div class="card">
|
||||
<h:form id="formSelection">
|
||||
<h5>Sélectionner un Événement</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<p:selectOneMenu value="#{evenementsBean.evenementSelectionne}"
|
||||
styleClass="w-full"
|
||||
filter="true"
|
||||
filterMatchMode="contains"
|
||||
placeholder="Sélectionner un événement...">
|
||||
<f:selectItem itemLabel="Sélectionner un événement" itemValue="#{null}" />
|
||||
<f:selectItems value="#{evenementsBean.tousLesEvenements}"
|
||||
var="evt"
|
||||
itemLabel="#{evt.titre} - #{evt.dateDebutFormatee}"
|
||||
itemValue="#{evt}" />
|
||||
<p:ajax event="change" update=":formParticipants" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Liste des participants -->
|
||||
<div class="card" rendered="#{evenementsBean.evenementSelectionne != null}">
|
||||
<h:form id="formParticipants">
|
||||
<h5>Participants - #{evenementsBean.evenementSelectionne.titre}</h5>
|
||||
|
||||
<div class="grid mb-3">
|
||||
<div class="col-12 md:col-4">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{evenementsBean.evenementSelectionne.participantsInscrits}" />
|
||||
<ui:param name="label" value="Inscrits" />
|
||||
<ui:param name="icon" value="pi pi-user-plus" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{evenementsBean.evenementSelectionne.participantsPresents}" />
|
||||
<ui:param name="label" value="Présents" />
|
||||
<ui:param name="icon" value="pi pi-check-circle" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{evenementsBean.evenementSelectionne.placesDisponibles}" />
|
||||
<ui:param name="label" value="Places disponibles" />
|
||||
<ui:param name="icon" value="pi pi-ticket" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center p-4">
|
||||
<i class="pi pi-info-circle text-4xl text-blue-500 mb-3"></i>
|
||||
<h5>Gestion des Participants</h5>
|
||||
<p class="text-600">La gestion détaillée des participants sera disponible prochainement</p>
|
||||
<p class="text-600 mt-2">
|
||||
Participants inscrits: <strong>#{evenementsBean.evenementSelectionne.participantsInscrits}</strong> /
|
||||
Capacité: <strong>#{evenementsBean.evenementSelectionne.capaciteMax}</strong>
|
||||
</p>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Message si aucun événement sélectionné -->
|
||||
<div class="card" rendered="#{evenementsBean.evenementSelectionne == null}">
|
||||
<div class="text-center p-4">
|
||||
<i class="pi pi-info-circle text-4xl text-blue-500 mb-3"></i>
|
||||
<h5>Sélectionnez un événement</h5>
|
||||
<p class="text-600">Veuillez sélectionner un événement pour voir ses participants</p>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
|
||||
@@ -1,21 +1,254 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Participation aux Événements - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-calendar-check text-purple-500" />
|
||||
<ui:param name="title" value="Participation aux Événements" />
|
||||
<ui:param name="description" value="Consultez et inscrivez-vous aux événements disponibles" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsParticipation">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{evenementsBean.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 -->
|
||||
<div class="card">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
</div>
|
||||
<h:form id="formFiltres">
|
||||
<h5>Filtres</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<p:selectOneMenu value="#{evenementsBean.filtres.type}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tous les types" itemValue="" />
|
||||
<f:selectItem itemLabel="Assemblée Générale" itemValue="ASSEMBLEE_GENERALE" />
|
||||
<f:selectItem itemLabel="Formation" itemValue="FORMATION" />
|
||||
<f:selectItem itemLabel="Activité Sociale" itemValue="ACTIVITE_SOCIALE" />
|
||||
<f:selectItem itemLabel="Action Caritative" itemValue="ACTION_CARITATIVE" />
|
||||
<p:ajax event="change" update=":formListe" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<p:selectOneMenu value="#{evenementsBean.filtres.statut}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tous les statuts" itemValue="" />
|
||||
<f:selectItem itemLabel="Planifié" itemValue="PLANIFIE" />
|
||||
<f:selectItem itemLabel="Confirmé" itemValue="CONFIRME" />
|
||||
<f:selectItem itemLabel="En cours" itemValue="EN_COURS" />
|
||||
<p:ajax event="change" update=":formListe" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Rechercher"
|
||||
icon="pi pi-search"
|
||||
action="#{evenementsBean.rechercher}"
|
||||
update=":formListe"
|
||||
styleClass="p-button-primary" />
|
||||
<p:commandButton value="Réinitialiser"
|
||||
icon="pi pi-filter-slash"
|
||||
action="#{evenementsBean.reinitialiserFiltres}"
|
||||
update="@form :formListe"
|
||||
styleClass="p-button-outlined" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Liste des événements disponibles -->
|
||||
<div class="card">
|
||||
<h:form id="formListe">
|
||||
<h5>Événements Disponibles</h5>
|
||||
|
||||
<p:dataTable id="dtEvenements"
|
||||
value="#{evenementsBean.evenementsFiltres}"
|
||||
var="evenement"
|
||||
paginator="true"
|
||||
rows="10"
|
||||
emptyMessage="Aucun événement disponible"
|
||||
rowKey="#{evenement.id}">
|
||||
|
||||
<p:column headerText="Événement" style="width: 40%;">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="#{evenement.typeEvenementIcon} text-2xl text-#{evenement.typeEvenementSeverity}"></i>
|
||||
<div>
|
||||
<div class="font-semibold text-lg">#{evenement.titre}</div>
|
||||
<div class="text-sm text-600">#{evenement.description}</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date et Heure">
|
||||
<div>
|
||||
<div class="font-medium">#{evenement.dateDebutFormatee}</div>
|
||||
<div class="text-sm text-600">
|
||||
<i class="pi pi-clock"></i> #{evenement.heureDebutFormatee} - #{evenement.heureFinFormatee}
|
||||
</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Lieu">
|
||||
<div>
|
||||
<div class="font-medium">#{evenement.lieu}</div>
|
||||
<div class="text-sm text-600">#{evenement.ville}</div>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Places">
|
||||
<div>
|
||||
<div class="font-medium">#{evenement.participantsInscrits} / #{evenement.capaciteMax}</div>
|
||||
<p:progressBar value="#{evenement.tauxRemplissage}"
|
||||
showValue="true"
|
||||
styleClass="mt-1" />
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut">
|
||||
<p:tag value="#{evenement.statutLibelle}"
|
||||
severity="#{evenement.statutSeverity}"
|
||||
icon="#{evenement.statutIcon}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width: 150px;">
|
||||
<div class="flex gap-1">
|
||||
<p:commandButton value="Voir détails"
|
||||
icon="pi pi-eye"
|
||||
styleClass="p-button-text p-button-sm"
|
||||
action="#{evenementsBean.selectionnerEvenement(evenement)}"
|
||||
update=":formDetails:dlgDetails"
|
||||
oncomplete="PF('dlgDetails').show();" />
|
||||
|
||||
<p:commandButton value="S'inscrire"
|
||||
icon="pi pi-check"
|
||||
styleClass="p-button-success p-button-sm"
|
||||
rendered="#{evenement.sontInscriptionsOuvertes()}"
|
||||
action="#{evenementsBean.sinscrireEvenement(evenement)}"
|
||||
update="@form"
|
||||
onclick="return confirm('Confirmer votre inscription à cet événement ?');" />
|
||||
|
||||
<p:tag value="Complet"
|
||||
severity="error"
|
||||
rendered="#{evenement.isComplet()}" />
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Détails -->
|
||||
<h:form id="formDetails">
|
||||
<p:dialog id="dlgDetails" header="Détails de l'Événement"
|
||||
widgetVar="dlgDetails"
|
||||
modal="true"
|
||||
resizable="false"
|
||||
style="width: 90vw; max-width: 800px;">
|
||||
<div class="grid" rendered="#{evenementsBean.evenementSelectionne != null}">
|
||||
<div class="col-12">
|
||||
<h3>#{evenementsBean.evenementSelectionne.titre}</h3>
|
||||
<p class="text-600 mt-2">#{evenementsBean.evenementSelectionne.description}</p>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Type</label>
|
||||
<p:tag value="#{evenementsBean.evenementSelectionne.typeEvenementLibelle}"
|
||||
severity="#{evenementsBean.evenementSelectionne.typeEvenementSeverity}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Statut</label>
|
||||
<p:tag value="#{evenementsBean.evenementSelectionne.statutLibelle}"
|
||||
severity="#{evenementsBean.evenementSelectionne.statutSeverity}" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Date de début</label>
|
||||
<div>#{evenementsBean.evenementSelectionne.dateDebutFormatee}</div>
|
||||
<div class="text-sm text-600">#{evenementsBean.evenementSelectionne.heureDebutFormatee}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Date de fin</label>
|
||||
<div>#{evenementsBean.evenementSelectionne.dateFinFormatee}</div>
|
||||
<div class="text-sm text-600">#{evenementsBean.evenementSelectionne.heureFinFormatee}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Lieu</label>
|
||||
<div>#{evenementsBean.evenementSelectionne.adresseComplete}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Participants</label>
|
||||
<div>#{evenementsBean.evenementSelectionne.participantsInscrits} / #{evenementsBean.evenementSelectionne.capaciteMax}</div>
|
||||
<p:progressBar value="#{evenementsBean.evenementSelectionne.tauxRemplissage}"
|
||||
showValue="true" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Organisateur</label>
|
||||
<div>#{evenementsBean.evenementSelectionne.organisateur}</div>
|
||||
<div class="text-sm text-600">#{evenementsBean.evenementSelectionne.emailOrganisateur}</div>
|
||||
<div class="text-sm text-600">#{evenementsBean.evenementSelectionne.telephoneOrganisateur}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12" rendered="#{evenementsBean.evenementSelectionne.instructions != null}">
|
||||
<div class="field">
|
||||
<label class="font-semibold">Instructions</label>
|
||||
<div class="surface-50 p-3 border-round">#{evenementsBean.evenementSelectionne.instructions}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<f:facet name="footer">
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="S'inscrire"
|
||||
icon="pi pi-check"
|
||||
rendered="#{evenementsBean.evenementSelectionne != null and evenementsBean.evenementSelectionne.sontInscriptionsOuvertes()}"
|
||||
action="#{evenementsBean.sinscrireEvenement(evenementsBean.evenementSelectionne)}"
|
||||
update="@form"
|
||||
onclick="PF('dlgDetails').hide(); return confirm('Confirmer votre inscription ?');" />
|
||||
<p:commandButton value="Fermer"
|
||||
icon="pi pi-times"
|
||||
onclick="PF('dlgDetails').hide();"
|
||||
styleClass="p-button-secondary p-button-outlined" />
|
||||
</div>
|
||||
</f:facet>
|
||||
</p:dialog>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
|
||||
@@ -10,35 +10,28 @@
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<div class="grid">
|
||||
<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-user-plus text-primary mr-2"></i>
|
||||
Inscription Nouveau Membre
|
||||
</h3>
|
||||
<p class="text-600 m-0">Formulaire complet d'inscription avec photo et documents</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-900 font-medium">Numéro: #{membreInscriptionBean.numeroGenere}</div>
|
||||
<small class="text-600">Généré automatiquement</small>
|
||||
</div>
|
||||
</div>
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-user-plus text-primary" />
|
||||
<ui:param name="title" value="Inscription Nouveau Membre" />
|
||||
<ui:param name="description" value="Formulaire complet d'inscription avec photo et documents" />
|
||||
<ui:define name="actions">
|
||||
<div>
|
||||
<div class="text-900 font-medium">Numéro: #{membreInscriptionBean.numeroGenere}</div>
|
||||
<small class="text-600">Généré automatiquement</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<h:form>
|
||||
<p:messages id="messages" showDetail="true" closable="true" />
|
||||
<p:messages id="messages" showDetail="true" closable="true" globalOnly="false" />
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card ui-fluid">
|
||||
<h5>Informations personnelles</h5>
|
||||
|
||||
<!-- Section photo intégrée -->
|
||||
<ui:decorate template="/templates/components/form-section.xhtml">
|
||||
<ui:param name="title" value="Informations personnelles" />
|
||||
<ui:param name="fluid" value="true" />
|
||||
<ui:define name="content">
|
||||
<!-- Section photo intégrée -->
|
||||
<div class="text-center mb-4 pb-3" style="border-bottom: 1px solid var(--surface-border);">
|
||||
<div class="mb-3 relative">
|
||||
<div id="photoContainer" style="width: 120px; height: 120px; margin: 0 auto; position: relative; overflow: hidden; border-radius: 50%; border: 3px solid var(--surface-border); background: #f8f9fa;">
|
||||
@@ -84,274 +77,292 @@
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Champs d'informations personnelles -->
|
||||
<div class="field">
|
||||
<p:outputLabel for="prenom" value="Prénom" />
|
||||
<p:inputText id="prenom" value="#{membreInscriptionBean.prenom}" required="true" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="nom" value="Nom" />
|
||||
<p:inputText id="nom" value="#{membreInscriptionBean.nom}" required="true" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="dateNaissance" value="Date de naissance" />
|
||||
<p:calendar id="dateNaissance" value="#{membreInscriptionBean.dateNaissance}"
|
||||
showIcon="true" navigator="true" required="true"
|
||||
locale="fr" pattern="dd/MM/yyyy" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="lieuNaissance" value="Lieu de naissance" />
|
||||
<p:inputText id="lieuNaissance" value="#{membreInscriptionBean.lieuNaissance}" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="sexe" value="Sexe" />
|
||||
<p:selectOneMenu id="sexe" value="#{membreInscriptionBean.sexe}" required="true">
|
||||
<f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" />
|
||||
<f:selectItems value="#{membreInscriptionBean.sexeOptions}" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="nationalite" value="Nationalité" />
|
||||
<p:inputText id="nationalite" value="#{membreInscriptionBean.nationalite}" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="situationMatrimoniale" value="Situation matrimoniale" />
|
||||
<p:selectOneMenu id="situationMatrimoniale" value="#{membreInscriptionBean.situationMatrimoniale}">
|
||||
<f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" />
|
||||
<f:selectItems value="#{membreInscriptionBean.situationMatrimonialeOptions}" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="profession" value="Profession" />
|
||||
<p:inputText id="profession" value="#{membreInscriptionBean.profession}" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="employeur" value="Employeur / Entreprise" />
|
||||
<p:inputText id="employeur" value="#{membreInscriptionBean.employeur}" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Champs d'informations personnelles -->
|
||||
<div class="field">
|
||||
<p:outputLabel for="prenom" value="Prénom" />
|
||||
<p:inputText id="prenom" value="#{membreInscriptionBean.prenom}" required="true"
|
||||
requiredMessage="Le prénom est obligatoire" styleClass="w-full" />
|
||||
<p:message for="prenom" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="nom" value="Nom" />
|
||||
<p:inputText id="nom" value="#{membreInscriptionBean.nom}" required="true"
|
||||
requiredMessage="Le nom est obligatoire" styleClass="w-full" />
|
||||
<p:message for="nom" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="dateNaissance" value="Date de naissance" />
|
||||
<p:calendar id="dateNaissance" value="#{membreInscriptionBean.dateNaissance}" required="true"
|
||||
pattern="dd/MM/yyyy" showIcon="true" yearNavigator="true" yearRange="1920:2030"
|
||||
monthNavigator="true" requiredMessage="La date de naissance est obligatoire"
|
||||
styleClass="w-full" />
|
||||
<p:message for="dateNaissance" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="lieuNaissance" value="Lieu de naissance" />
|
||||
<p:inputText id="lieuNaissance" value="#{membreInscriptionBean.lieuNaissance}" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="sexe" value="Sexe" />
|
||||
<p:selectOneMenu id="sexe" value="#{membreInscriptionBean.sexe}" required="true" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" />
|
||||
<f:selectItems value="#{membreInscriptionBean.sexeOptions}" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="nationalite" value="Nationalité" />
|
||||
<p:inputText id="nationalite" value="#{membreInscriptionBean.nationalite}" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="situationMatrimoniale" value="Situation matrimoniale" />
|
||||
<p:selectOneMenu id="situationMatrimoniale" value="#{membreInscriptionBean.situationMatrimoniale}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" />
|
||||
<f:selectItems value="#{membreInscriptionBean.situationMatrimonialeOptions}" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="profession" value="Profession" />
|
||||
<p:inputText id="profession" value="#{membreInscriptionBean.profession}" styleClass="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="employeur" value="Employeur / Entreprise" />
|
||||
<p:inputText id="employeur" value="#{membreInscriptionBean.employeur}" styleClass="w-full" />
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:decorate>
|
||||
|
||||
<div class="card ui-fluid">
|
||||
<h5>Contact d'urgence</h5>
|
||||
<div class="field">
|
||||
<p:outputLabel for="contactUrgenceNom" value="Nom complet" />
|
||||
<p:inputText id="contactUrgenceNom" value="#{membreInscriptionBean.contactUrgenceNom}" required="true" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="contactUrgenceTelephone" value="Téléphone" />
|
||||
<p:inputText id="contactUrgenceTelephone" value="#{membreInscriptionBean.contactUrgenceTelephone}" required="true" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="contactUrgenceLien" value="Lien de parenté" />
|
||||
<p:selectOneMenu id="contactUrgenceLien" value="#{membreInscriptionBean.contactUrgenceLien}" required="true">
|
||||
<f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" />
|
||||
<f:selectItems value="#{membreInscriptionBean.contactUrgenceLienOptions}" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
<ui:decorate template="/templates/components/form-section.xhtml">
|
||||
<ui:param name="title" value="Contact d'urgence" />
|
||||
<ui:param name="fluid" value="true" />
|
||||
<ui:define name="content">
|
||||
<div class="field">
|
||||
<p:outputLabel for="contactUrgenceNom" value="Nom complet" />
|
||||
<p:inputText id="contactUrgenceNom" value="#{membreInscriptionBean.contactUrgenceNom}"
|
||||
required="true" requiredMessage="Le nom du contact d'urgence est obligatoire"
|
||||
styleClass="w-full" />
|
||||
<p:message for="contactUrgenceNom" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="contactUrgenceTelephone" value="Téléphone" />
|
||||
<p:inputText id="contactUrgenceTelephone" value="#{membreInscriptionBean.contactUrgenceTelephone}"
|
||||
required="true" requiredMessage="Le téléphone du contact d'urgence est obligatoire"
|
||||
styleClass="w-full" />
|
||||
<p:message for="contactUrgenceTelephone" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="contactUrgenceLien" value="Lien de parenté" />
|
||||
<p:selectOneMenu id="contactUrgenceLien" value="#{membreInscriptionBean.contactUrgenceLien}" required="true" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" />
|
||||
<f:selectItems value="#{membreInscriptionBean.contactUrgenceLienOptions}" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:decorate>
|
||||
|
||||
<div class="card">
|
||||
<h5>Documents justificatifs</h5>
|
||||
<p:fileUpload listener="#{membreInscriptionBean.handleFileUpload}"
|
||||
mode="advanced"
|
||||
dragDropSupport="true"
|
||||
multiple="true"
|
||||
update="messages documentsListPanel"
|
||||
sizeLimit="5000000"
|
||||
fileLimit="5"
|
||||
allowTypes="/(\.|\/)(pdf|doc|docx|jpg|jpeg|png)$/"
|
||||
uploadLabel="Télécharger"
|
||||
cancelLabel="Annuler"
|
||||
chooseLabel="Sélectionner les fichiers"
|
||||
invalidFileMessage="Type de fichier non supporté"
|
||||
fileLimitMessage="Nombre maximum de fichiers dépassé"
|
||||
invalidSizeMessage="Taille de fichier trop importante"
|
||||
style="width:100%" />
|
||||
|
||||
<h:panelGroup id="documentsListPanel" layout="block" styleClass="mt-3">
|
||||
<h6 class="mb-2" rendered="#{not empty membreInscriptionBean.documentsJoints}">Fichiers ajoutés:</h6>
|
||||
<ui:repeat value="#{membreInscriptionBean.documentsJoints}" var="document">
|
||||
<div class="flex align-items-center justify-content-between p-2 border-round mb-2"
|
||||
style="background: var(--surface-50);">
|
||||
<div class="flex align-items-center">
|
||||
<i class="pi pi-file text-blue-500 mr-2"></i>
|
||||
<span class="text-900">#{document}</span>
|
||||
<ui:decorate template="/templates/components/form-section.xhtml">
|
||||
<ui:param name="title" value="Documents justificatifs" />
|
||||
<ui:define name="content">
|
||||
<p:fileUpload listener="#{membreInscriptionBean.handleFileUpload}"
|
||||
mode="advanced"
|
||||
dragDropSupport="true"
|
||||
multiple="true"
|
||||
update="messages documentsListPanel"
|
||||
sizeLimit="5000000"
|
||||
fileLimit="5"
|
||||
allowTypes="/(\.|\/)(pdf|doc|docx|jpg|jpeg|png)$/"
|
||||
uploadLabel="Télécharger"
|
||||
cancelLabel="Annuler"
|
||||
chooseLabel="Sélectionner les fichiers"
|
||||
invalidFileMessage="Type de fichier non supporté"
|
||||
fileLimitMessage="Nombre maximum de fichiers dépassé"
|
||||
invalidSizeMessage="Taille de fichier trop importante"
|
||||
style="width:100%" />
|
||||
|
||||
<h:panelGroup id="documentsListPanel" layout="block" styleClass="mt-3">
|
||||
<h6 class="mb-2" rendered="#{not empty membreInscriptionBean.documentsJoints}">Fichiers ajoutés:</h6>
|
||||
<ui:repeat value="#{membreInscriptionBean.documentsJoints}" var="document">
|
||||
<div class="flex align-items-center justify-content-between p-2 border-round mb-2"
|
||||
style="background: var(--surface-50);">
|
||||
<div class="flex align-items-center">
|
||||
<i class="pi pi-file text-blue-500 mr-2"></i>
|
||||
<span class="text-900">#{document}</span>
|
||||
</div>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="action" value="#{membreInscriptionBean.supprimerDocument(document)}" />
|
||||
<ui:param name="update" value="documentsListPanel" />
|
||||
<ui:param name="title" value="Supprimer le fichier" />
|
||||
<ui:param name="severity" value="danger" />
|
||||
<ui:param name="styleClass" value="ui-button-sm" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="action" value="#{membreInscriptionBean.supprimerDocument(document)}" />
|
||||
<ui:param name="update" value="documentsListPanel" />
|
||||
<ui:param name="title" value="Supprimer le fichier" />
|
||||
<ui:param name="severity" value="danger" />
|
||||
<ui:param name="styleClass" value="ui-button-sm" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</h:panelGroup>
|
||||
|
||||
<small class="text-600">Formats acceptés: PDF, DOC, DOCX, JPG, PNG - Maximum 5 fichiers de 5MB chacun</small>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</h:panelGroup>
|
||||
|
||||
<small class="text-600">Formats acceptés: PDF, DOC, DOCX, JPG, PNG - Maximum 5 fichiers de 5MB chacun</small>
|
||||
</ui:define>
|
||||
</ui:decorate>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="card ui-fluid">
|
||||
<h5>Coordonnées</h5>
|
||||
<div class="field">
|
||||
<p:outputLabel for="adresse" value="Adresse complète" />
|
||||
<p:inputTextarea id="adresse" value="#{membreInscriptionBean.adresse}" rows="4" required="true" />
|
||||
</div>
|
||||
<div class="formgrid grid">
|
||||
<div class="field col">
|
||||
<p:outputLabel for="ville" value="Ville" />
|
||||
<p:inputText id="ville" value="#{membreInscriptionBean.ville}" required="true" />
|
||||
<ui:decorate template="/templates/components/form-section.xhtml">
|
||||
<ui:param name="title" value="Coordonnées" />
|
||||
<ui:param name="fluid" value="true" />
|
||||
<ui:define name="content">
|
||||
<div class="field">
|
||||
<p:outputLabel for="adresse" value="Adresse complète" />
|
||||
<p:inputTextarea id="adresse" value="#{membreInscriptionBean.adresse}" rows="4"
|
||||
required="true" requiredMessage="L'adresse est obligatoire"
|
||||
styleClass="w-full" />
|
||||
<p:message for="adresse" />
|
||||
</div>
|
||||
<div class="field col">
|
||||
<p:outputLabel for="codePostal" value="Code postal" />
|
||||
<p:inputText id="codePostal" value="#{membreInscriptionBean.codePostal}" />
|
||||
|
||||
<div class="formgrid grid">
|
||||
<div class="field col">
|
||||
<p:outputLabel for="ville" value="Ville" />
|
||||
<p:inputText id="ville" value="#{membreInscriptionBean.ville}" required="true"
|
||||
requiredMessage="La ville est obligatoire" styleClass="w-full" />
|
||||
<p:message for="ville" />
|
||||
</div>
|
||||
<div class="field col">
|
||||
<p:outputLabel for="codePostal" value="Code postal" />
|
||||
<p:inputText id="codePostal" value="#{membreInscriptionBean.codePostal}" styleClass="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="pays" value="Pays" />
|
||||
<p:inputText id="pays" value="#{membreInscriptionBean.pays}" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="email" value="Email" />
|
||||
<p:inputText id="email" value="#{membreInscriptionBean.email}" required="true">
|
||||
<f:validateRegex pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" />
|
||||
</p:inputText>
|
||||
</div>
|
||||
<div class="formgrid grid">
|
||||
<div class="field col">
|
||||
<p:outputLabel for="telephone" value="Téléphone fixe" />
|
||||
<p:inputText id="telephone" value="#{membreInscriptionBean.telephone}" />
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="pays" value="Pays" />
|
||||
<p:inputText id="pays" value="#{membreInscriptionBean.pays}" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col">
|
||||
<p:outputLabel for="telephoneMobile" value="Téléphone mobile" />
|
||||
<p:inputText id="telephoneMobile" value="#{membreInscriptionBean.telephoneMobile}" required="true" />
|
||||
<div class="field">
|
||||
<p:outputLabel for="email" value="Email" />
|
||||
<p:inputText id="email" value="#{membreInscriptionBean.email}" required="true" styleClass="w-full">
|
||||
<f:validateRegex pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" />
|
||||
</p:inputText>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formgrid grid">
|
||||
<div class="field col">
|
||||
<p:outputLabel for="telephone" value="Téléphone fixe" />
|
||||
<p:inputText id="telephone" value="#{membreInscriptionBean.telephone}" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col">
|
||||
<p:outputLabel for="telephoneMobile" value="Téléphone mobile" />
|
||||
<p:inputText id="telephoneMobile" value="#{membreInscriptionBean.telephoneMobile}"
|
||||
required="true" requiredMessage="Le téléphone mobile est obligatoire"
|
||||
styleClass="w-full" />
|
||||
<p:message for="telephoneMobile" />
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:decorate>
|
||||
|
||||
<div class="card ui-fluid">
|
||||
<h5>Adhésion</h5>
|
||||
<div class="field">
|
||||
<p:outputLabel for="typeAdhesion" value="Type d'adhésion" />
|
||||
<p:selectOneMenu id="typeAdhesion" value="#{membreInscriptionBean.typeAdhesion}" required="true">
|
||||
<f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" />
|
||||
<f:selectItems value="#{membreInscriptionBean.typeAdhesionOptions}" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="numeroParrain" value="N° Membre parrain" />
|
||||
<div class="ui-inputgroup">
|
||||
<p:inputText id="numeroParrain" value="#{membreInscriptionBean.numeroParrain}" />
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-search" />
|
||||
<ui:param name="action" value="#{membreInscriptionBean.rechercherParrain}" />
|
||||
<ui:param name="severity" value="info" />
|
||||
<ui:param name="rounded" value="false" />
|
||||
<ui:param name="text" value="false" />
|
||||
</ui:include>
|
||||
<ui:decorate template="/templates/components/form-section.xhtml">
|
||||
<ui:param name="title" value="Adhésion" />
|
||||
<ui:param name="fluid" value="true" />
|
||||
<ui:define name="content">
|
||||
<div class="field">
|
||||
<p:outputLabel for="organisationId" value="Organisation *" styleClass="font-bold text-primary" />
|
||||
<p:selectOneMenu id="organisationId" value="#{membreInscriptionBean.organisationId}" required="true" requiredMessage="Vous devez sélectionner une organisation" styleClass="w-full">
|
||||
<f:selectItem itemLabel="--- Sélectionner une organisation ---" itemValue="" noSelectionOption="true" />
|
||||
<f:selectItems value="#{membreInscriptionBean.organisationsDisponibles}"
|
||||
var="org"
|
||||
itemLabel="#{org.nom} (#{org.ville})"
|
||||
itemValue="#{org.id}" />
|
||||
</p:selectOneMenu>
|
||||
<p:message for="organisationId" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="nomParrain" value="Nom du parrain" />
|
||||
<p:inputText id="nomParrain" value="#{membreInscriptionBean.nomParrain}" readonly="true" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="motifAdhesion" value="Motif d'adhésion" />
|
||||
<p:inputTextarea id="motifAdhesion" value="#{membreInscriptionBean.motifAdhesion}" rows="3" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="typeAdhesion" value="Type d'adhésion" />
|
||||
<p:selectOneMenu id="typeAdhesion" value="#{membreInscriptionBean.typeAdhesion}" required="true" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" />
|
||||
<f:selectItems value="#{membreInscriptionBean.typeAdhesionOptions}" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="numeroParrain" value="N° Membre parrain" />
|
||||
<div class="ui-inputgroup">
|
||||
<p:inputText id="numeroParrain" value="#{membreInscriptionBean.numeroParrain}" styleClass="w-full" />
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-search" />
|
||||
<ui:param name="action" value="#{membreInscriptionBean.rechercherParrain}" />
|
||||
<ui:param name="severity" value="info" />
|
||||
<ui:param name="rounded" value="false" />
|
||||
<ui:param name="text" value="false" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="nomParrain" value="Nom du parrain" />
|
||||
<p:inputText id="nomParrain" value="#{membreInscriptionBean.nomParrain}" readonly="true" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<p:outputLabel for="motifAdhesion" value="Motif d'adhésion" />
|
||||
<p:inputTextarea id="motifAdhesion" value="#{membreInscriptionBean.motifAdhesion}"
|
||||
rows="3" styleClass="w-full" />
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:decorate>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h5>Informations complémentaires</h5>
|
||||
<div class="ui-fluid formgrid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<p:outputLabel for="nomBanque" value="Nom de la banque" />
|
||||
<p:inputText id="nomBanque" value="#{membreInscriptionBean.nomBanque}" />
|
||||
<ui:decorate template="/templates/components/form-section.xhtml">
|
||||
<ui:param name="title" value="Informations complémentaires" />
|
||||
<ui:define name="content">
|
||||
<div class="ui-fluid formgrid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<p:outputLabel for="nomBanque" value="Nom de la banque" />
|
||||
<p:inputText id="nomBanque" value="#{membreInscriptionBean.nomBanque}" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<p:outputLabel for="numeroBanque" value="Numéro de compte" />
|
||||
<p:inputText id="numeroBanque" value="#{membreInscriptionBean.numeroBanque}" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<p:outputLabel for="ribIban" value="RIB / IBAN" />
|
||||
<p:inputText id="ribIban" value="#{membreInscriptionBean.ribIban}" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<p:outputLabel for="competencesSpeciales" value="Compétences spéciales" />
|
||||
<p:inputTextarea id="competencesSpeciales" value="#{membreInscriptionBean.competencesSpeciales}"
|
||||
rows="3" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<p:outputLabel for="centresInteret" value="Centres d'intérêt" />
|
||||
<p:inputTextarea id="centresInteret" value="#{membreInscriptionBean.centresInteret}"
|
||||
rows="3" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<p:outputLabel for="commentaires" value="Commentaires" />
|
||||
<p:inputTextarea id="commentaires" value="#{membreInscriptionBean.commentaires}"
|
||||
rows="3" styleClass="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<p:outputLabel for="numeroBanque" value="Numéro de compte" />
|
||||
<p:inputText id="numeroBanque" value="#{membreInscriptionBean.numeroBanque}" />
|
||||
|
||||
<h5>Autorisations</h5>
|
||||
<div class="formgroup-inline">
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="accepteReglement" value="#{membreInscriptionBean.accepteReglement}" />
|
||||
<p:outputLabel for="accepteReglement" value="J'accepte le règlement intérieur" />
|
||||
</div>
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="acceptePrelevement" value="#{membreInscriptionBean.acceptePrelevement}" />
|
||||
<p:outputLabel for="acceptePrelevement" value="J'autorise le prélèvement automatique" />
|
||||
</div>
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="autorisationMarketing" value="#{membreInscriptionBean.autorisationMarketing}" />
|
||||
<p:outputLabel for="autorisationMarketing" value="J'accepte de recevoir des communications" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<p:outputLabel for="ribIban" value="RIB / IBAN" />
|
||||
<p:inputText id="ribIban" value="#{membreInscriptionBean.ribIban}" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<p:outputLabel for="competencesSpeciales" value="Compétences spéciales" />
|
||||
<p:inputTextarea id="competencesSpeciales" value="#{membreInscriptionBean.competencesSpeciales}" rows="3" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-6">
|
||||
<p:outputLabel for="centresInteret" value="Centres d'intérêt" />
|
||||
<p:inputTextarea id="centresInteret" value="#{membreInscriptionBean.centresInteret}" rows="3" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<p:outputLabel for="commentaires" value="Commentaires" />
|
||||
<p:inputTextarea id="commentaires" value="#{membreInscriptionBean.commentaires}" rows="3" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5>Autorisations</h5>
|
||||
<div class="formgroup-inline">
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="accepteReglement" value="#{membreInscriptionBean.accepteReglement}" />
|
||||
<p:outputLabel for="accepteReglement" value="J'accepte le règlement intérieur" />
|
||||
</div>
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="acceptePrelevement" value="#{membreInscriptionBean.acceptePrelevement}" />
|
||||
<p:outputLabel for="acceptePrelevement" value="J'autorise le prélèvement automatique" />
|
||||
</div>
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="autorisationMarketing" value="#{membreInscriptionBean.autorisationMarketing}" />
|
||||
<p:outputLabel for="autorisationMarketing" value="J'accepte de recevoir des communications" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:decorate>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progression -->
|
||||
<div class="card">
|
||||
<h5>Progression de l'inscription</h5>
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="text-center p-3">
|
||||
<i class="pi pi-user text-2xl text-primary mb-2"></i>
|
||||
<div class="text-sm font-medium">Informations personnelles</div>
|
||||
<i class="pi pi-check-circle text-green-500 mt-1" style="display: #{membreInscriptionBean.etapePersonnelleComplete ? 'inline' : 'none'};"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="text-center p-3">
|
||||
<i class="pi pi-home text-2xl text-primary mb-2"></i>
|
||||
<div class="text-sm font-medium">Coordonnées</div>
|
||||
<i class="pi pi-check-circle text-green-500 mt-1" style="display: #{membreInscriptionBean.etapeCoordonneeComplete ? 'inline' : 'none'};"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="text-center p-3">
|
||||
<i class="pi pi-id-card text-2xl text-primary mb-2"></i>
|
||||
<div class="text-sm font-medium">Adhésion</div>
|
||||
<i class="pi pi-check-circle text-green-500 mt-1" style="display: #{membreInscriptionBean.etapeAdhesionComplete ? 'inline' : 'none'};"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="text-center p-3">
|
||||
<i class="pi pi-file text-2xl text-primary mb-2"></i>
|
||||
<div class="text-sm font-medium">Documents</div>
|
||||
<i class="pi pi-check-circle text-green-500 mt-1" style="display: #{membreInscriptionBean.etapeDocumentsComplete ? 'inline' : 'none'};"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p:progressBar value="#{membreInscriptionBean.progressionPourcentage}"
|
||||
labelTemplate="{value}% complété"
|
||||
styleClass="mb-3" />
|
||||
</div>
|
||||
|
||||
<!-- Actions finales -->
|
||||
<div class="card">
|
||||
<h5>Finaliser l'inscription</h5>
|
||||
@@ -366,14 +377,16 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="🎯 Inscrire le membre" />
|
||||
<ui:param name="icon" value="pi pi-user-plus" />
|
||||
<ui:param name="onclick" value="return preparePhotoForSubmission(this);" />
|
||||
<ui:param name="action" value="#{membreInscriptionBean.inscrire}" />
|
||||
<ui:param name="update" value="messages" />
|
||||
<ui:param name="disabled" value="#{!membreInscriptionBean.formulaireValide}" />
|
||||
</ui:include>
|
||||
<p:commandButton
|
||||
value="🎯 Inscrire le membre"
|
||||
icon="pi pi-user-plus"
|
||||
action="#{membreInscriptionBean.inscrire}"
|
||||
update="@form"
|
||||
process="@form"
|
||||
onclick="PF('statusDialog').show();"
|
||||
oncomplete="PF('statusDialog').hide();"
|
||||
styleClass="ui-button-success"
|
||||
title="Soumettre l'inscription" />
|
||||
|
||||
<ui:include src="/templates/components/button-info.xhtml">
|
||||
<ui:param name="value" value="💾 Enregistrer brouillon" />
|
||||
@@ -731,6 +744,16 @@
|
||||
return true; // Permettre la soumission si pas de photo
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Dialogue de chargement -->
|
||||
<p:dialog id="statusDialog" widgetVar="statusDialog" modal="true" closable="false"
|
||||
showHeader="false" styleClass="no-border" resizable="false">
|
||||
<div class="flex flex-column align-items-center p-4">
|
||||
<i class="pi pi-spin pi-spinner text-4xl text-primary mb-3"></i>
|
||||
<div class="text-xl font-medium text-900">Traitement en cours...</div>
|
||||
<div class="text-600">Veuillez patienter pendant l'enregistrement</div>
|
||||
</div>
|
||||
</p:dialog>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
@@ -1,26 +0,0 @@
|
||||
<!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 - Liste des membres</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h2>Liste des membres</h2>
|
||||
<p>Gestion des membres de l'union</p>
|
||||
|
||||
<p:button value="Retour au tableau de bord"
|
||||
icon="pi pi-arrow-left"
|
||||
outcome="/pages/secure/dashboard"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
@@ -10,36 +10,28 @@
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<div class="grid">
|
||||
<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-users text-blue-500 mr-2"></i>
|
||||
Liste des Membres
|
||||
</h3>
|
||||
<p class="text-600 m-0">Gestion et suivi des membres de l'association</p>
|
||||
</div>
|
||||
<h:form id="formActionsMembres">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Nouveau membre" />
|
||||
<ui:param name="icon" value="pi pi-user-plus" />
|
||||
<ui:param name="action" value="/pages/secure/membre/inscription?faces-redirect=true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Import/Export" />
|
||||
<ui:param name="icon" value="pi pi-upload" />
|
||||
<ui:param name="onclick" value="PF('dlgImportExport').show();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-users text-blue-500" />
|
||||
<ui:param name="title" value="Liste des Membres" />
|
||||
<ui:param name="description" value="Gestion et suivi des membres de l'association" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsMembres">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Nouveau membre" />
|
||||
<ui:param name="icon" value="pi pi-user-plus" />
|
||||
<ui:param name="outcome" value="/pages/secure/membre/inscription" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Import/Export" />
|
||||
<ui:param name="icon" value="pi pi-upload" />
|
||||
<ui:param name="onclick" value="PF('dlgImportExport').show();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
|
||||
<!-- Liste des membres -->
|
||||
@@ -292,17 +284,17 @@
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="ageMin" value="Âge minimum" />
|
||||
<p:inputNumber id="ageMin" value="#{membreListeBean.ageMin}" symbol="" />
|
||||
<p:inputNumber id="ageMin" value="#{membreListeBean.ageMin}" symbol="" styleClass="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="ageMax" value="Âge maximum" />
|
||||
<p:inputNumber id="ageMax" value="#{membreListeBean.ageMax}" symbol="" />
|
||||
<p:inputNumber id="ageMax" value="#{membreListeBean.ageMax}" symbol="" styleClass="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="genre" value="Genre" />
|
||||
<p:selectOneMenu id="genre" value="#{membreListeBean.genreFilter}">
|
||||
<p:selectOneMenu id="genre" value="#{membreListeBean.genreFilter}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tous" itemValue="" />
|
||||
<f:selectItem itemLabel="Homme" itemValue="M" />
|
||||
<f:selectItem itemLabel="Femme" itemValue="F" />
|
||||
@@ -314,34 +306,36 @@
|
||||
<p:autoComplete id="ville"
|
||||
value="#{membreListeBean.villeFilter}"
|
||||
completeMethod="#{membreListeBean.completerVilles}"
|
||||
placeholder="Saisir une ville..." />
|
||||
placeholder="Saisir une ville..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="dateAdhesionDebut" value="Adhésion après le" />
|
||||
<p:calendar id="dateAdhesionDebut" value="#{membreListeBean.dateAdhesionDebut}"
|
||||
pattern="dd/MM/yyyy" showIcon="true" />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateAdhesionDebut" />
|
||||
<ui:param name="label" value="Adhésion après le" />
|
||||
<ui:param name="value" value="#{membreListeBean.dateAdhesionDebut}" />
|
||||
</ui:include>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="dateAdhesionFin" value="Adhésion avant le" />
|
||||
<p:calendar id="dateAdhesionFin" value="#{membreListeBean.dateAdhesionFin}"
|
||||
pattern="dd/MM/yyyy" showIcon="true" />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateAdhesionFin" />
|
||||
<ui:param name="label" value="Adhésion avant le" />
|
||||
<ui:param name="value" value="#{membreListeBean.dateAdhesionFin}" />
|
||||
</ui:include>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="profession" value="Profession" />
|
||||
<p:autoComplete id="profession"
|
||||
value="#{membreListeBean.professionFilter}"
|
||||
completeMethod="#{membreListeBean.completerProfessions}"
|
||||
placeholder="Saisir une profession..." />
|
||||
placeholder="Saisir une profession..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<p:selectBooleanCheckbox id="aDesEnfants" value="#{membreListeBean.aDesEnfants}" />
|
||||
<p:outputLabel for="aDesEnfants" value=" A des enfants déclarés" />
|
||||
<p:selectBooleanCheckbox id="desEnfants" value="#{membreListeBean.desEnfants}" />
|
||||
<p:outputLabel for="desEnfants" value=" A des enfants déclarés" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -377,22 +371,26 @@
|
||||
<p:dialog header="Envoyer un Message Groupé" widgetVar="dlgMessageGroupe" modal="true" width="600">
|
||||
<h:form id="formMessageGroupe">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<p:outputLabel for="sujetMessage" value="Sujet" />
|
||||
<p:inputText id="sujetMessage" value="#{membreListeBean.sujetMessage}"
|
||||
required="true" placeholder="Objet du message" />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="sujetMessage" />
|
||||
<ui:param name="label" value="Sujet" />
|
||||
<ui:param name="value" value="#{membreListeBean.sujetMessage}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="placeholder" value="Objet du message" />
|
||||
</ui:include>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="contenuMessage" value="Message" />
|
||||
<p:inputTextarea id="contenuMessage" value="#{membreListeBean.contenuMessage}"
|
||||
rows="6" required="true" placeholder="Votre message..." />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="contenuMessage" />
|
||||
<ui:param name="label" value="Message" />
|
||||
<ui:param name="value" value="#{membreListeBean.contenuMessage}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="rows" value="6" />
|
||||
</ui:include>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="canauxMessage" value="Canaux de diffusion" />
|
||||
<p:selectCheckboxMenu id="canauxMessage" value="#{membreListeBean.canauxMessage}"
|
||||
multiple="true">
|
||||
multiple="true" styleClass="w-full">
|
||||
<f:selectItem itemLabel="📧 Email" itemValue="EMAIL" />
|
||||
<f:selectItem itemLabel="📱 SMS" itemValue="SMS" />
|
||||
<f:selectItem itemLabel="💬 WhatsApp" itemValue="WHATSAPP" />
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
<!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 - Nouveau membre</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h2>Nouveau membre</h2>
|
||||
<p>Inscription d'un nouveau membre</p>
|
||||
|
||||
<p:button value="Retour au tableau de bord"
|
||||
icon="pi pi-arrow-left"
|
||||
outcome="/pages/secure/dashboard"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
@@ -85,22 +85,30 @@
|
||||
<!-- Actions principales -->
|
||||
<h:form id="formActionsPrincipales">
|
||||
<div class="flex flex-column gap-2">
|
||||
<p:commandButton value="Modifier"
|
||||
icon="pi pi-pencil"
|
||||
styleClass="ui-button-outlined ui-button-warning"
|
||||
onclick="PF('dlgModifierProfil').show();" />
|
||||
<p:commandButton value="Cotisations"
|
||||
icon="pi pi-dollar"
|
||||
styleClass="ui-button-outlined ui-button-success"
|
||||
action="#{membreProfilBean.gererCotisations}" />
|
||||
<p:commandButton value="Contacter"
|
||||
icon="pi pi-envelope"
|
||||
styleClass="ui-button-outlined ui-button-info"
|
||||
onclick="PF('dlgContacter').show();" />
|
||||
<p:commandButton value="Actions"
|
||||
icon="pi pi-cog"
|
||||
styleClass="ui-button-outlined ui-button-secondary"
|
||||
onclick="PF('dlgActions').show();" />
|
||||
<ui:include src="/templates/components/button-warning.xhtml">
|
||||
<ui:param name="value" value="Modifier" />
|
||||
<ui:param name="icon" value="pi pi-pencil" />
|
||||
<ui:param name="onclick" value="PF('dlgModifierProfil').show();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Cotisations" />
|
||||
<ui:param name="icon" value="pi pi-dollar" />
|
||||
<ui:param name="action" value="#{membreProfilBean.gererCotisations}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-info.xhtml">
|
||||
<ui:param name="value" value="Contacter" />
|
||||
<ui:param name="icon" value="pi pi-envelope" />
|
||||
<ui:param name="onclick" value="PF('dlgContacter').show();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Actions" />
|
||||
<ui:param name="icon" value="pi pi-cog" />
|
||||
<ui:param name="onclick" value="PF('dlgActions').show();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
@@ -282,14 +290,17 @@
|
||||
|
||||
<h:form id="formCotisationsActions">
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Nouveau paiement"
|
||||
icon="pi pi-plus"
|
||||
styleClass="ui-button-success"
|
||||
onclick="PF('dlgNouveauPaiement').show();" />
|
||||
<p:commandButton value="Envoyer rappel"
|
||||
icon="pi pi-bell"
|
||||
styleClass="ui-button-outlined ui-button-warning"
|
||||
action="#{membreProfilBean.envoyerRappelCotisation}" />
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Nouveau paiement" />
|
||||
<ui:param name="icon" value="pi pi-plus" />
|
||||
<ui:param name="onclick" value="PF('dlgNouveauPaiement').show();" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-warning.xhtml">
|
||||
<ui:param name="value" value="Envoyer rappel" />
|
||||
<ui:param name="icon" value="pi pi-bell" />
|
||||
<ui:param name="action" value="#{membreProfilBean.envoyerRappelCotisation}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
@@ -430,10 +441,13 @@
|
||||
</p:dataTable>
|
||||
|
||||
<h:form id="formNouvelleDemande">
|
||||
<p:commandButton value="Nouvelle demande"
|
||||
icon="pi pi-plus"
|
||||
styleClass="ui-button-outlined ui-button-success w-full mt-3"
|
||||
onclick="PF('dlgNouvelleDemande').show();" />
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Nouvelle demande" />
|
||||
<ui:param name="icon" value="pi pi-plus" />
|
||||
<ui:param name="onclick" value="PF('dlgNouvelleDemande').show();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
<ui:param name="styleClass" value="w-full mt-3" />
|
||||
</ui:include>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
@@ -483,56 +497,71 @@
|
||||
<div class="ui-fluid">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="editPrenom" value="Prénom" />
|
||||
<p:inputText id="editPrenom" value="#{membreProfilBean.membreEdit.prenom}" required="true" />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="editPrenom" />
|
||||
<ui:param name="label" value="Prénom" />
|
||||
<ui:param name="value" value="#{membreProfilBean.membreEdit.prenom}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="editNom" value="Nom" />
|
||||
<p:inputText id="editNom" value="#{membreProfilBean.membreEdit.nom}" required="true" />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="editNom" />
|
||||
<ui:param name="label" value="Nom" />
|
||||
<ui:param name="value" value="#{membreProfilBean.membreEdit.nom}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="editEmail" value="Email" />
|
||||
<p:inputText id="editEmail" value="#{membreProfilBean.membreEdit.email}" required="true" />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="editEmail" />
|
||||
<ui:param name="label" value="Email" />
|
||||
<ui:param name="value" value="#{membreProfilBean.membreEdit.email}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="editTelephone" value="Téléphone" />
|
||||
<p:inputText id="editTelephone" value="#{membreProfilBean.membreEdit.telephone}" required="true" />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="editTelephone" />
|
||||
<ui:param name="label" value="Téléphone" />
|
||||
<ui:param name="value" value="#{membreProfilBean.membreEdit.telephone}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="editDateNaissance" value="Date de naissance" />
|
||||
<p:calendar id="editDateNaissance" value="#{membreProfilBean.membreEdit.dateNaissance}"
|
||||
pattern="dd/MM/yyyy" showIcon="true" />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="editDateNaissance" />
|
||||
<ui:param name="label" value="Date de naissance" />
|
||||
<ui:param name="value" value="#{membreProfilBean.membreEdit.dateNaissance}" />
|
||||
</ui:include>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="editProfession" value="Profession" />
|
||||
<p:inputText id="editProfession" value="#{membreProfilBean.membreEdit.profession}" />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="editProfession" />
|
||||
<ui:param name="label" value="Profession" />
|
||||
<ui:param name="value" value="#{membreProfilBean.membreEdit.profession}" />
|
||||
</ui:include>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="editAdresse" value="Adresse" />
|
||||
<p:inputTextarea id="editAdresse" value="#{membreProfilBean.membreEdit.adresse}" rows="3" />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="editAdresse" />
|
||||
<ui:param name="label" value="Adresse" />
|
||||
<ui:param name="value" value="#{membreProfilBean.membreEdit.adresse}" />
|
||||
<ui:param name="rows" value="3" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-3">
|
||||
<p:commandButton value="Enregistrer" icon="pi pi-check"
|
||||
styleClass="ui-button-success"
|
||||
action="#{membreProfilBean.sauvegarderModifications}"
|
||||
update="@form"
|
||||
oncomplete="if(!args.validationFailed) PF('dlgModifierProfil').hide();" />
|
||||
<p:commandButton value="Annuler" icon="pi pi-times"
|
||||
styleClass="ui-button-secondary"
|
||||
onclick="PF('dlgModifierProfil').hide();" type="button" />
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Enregistrer" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{membreProfilBean.sauvegarderModifications}" />
|
||||
<ui:param name="update" value="@form" />
|
||||
<ui:param name="onclick" value="if(!args.validationFailed) PF('dlgModifierProfil').hide();" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgModifierProfil').hide();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
@@ -10,95 +10,59 @@
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<div class="grid">
|
||||
<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-search text-blue-500 mr-2"></i>
|
||||
Recherche Avancée des Membres
|
||||
</h3>
|
||||
<p class="text-600 m-0">Outil de recherche puissant pour retrouver et analyser les membres</p>
|
||||
</div>
|
||||
<h:form id="formActionsEntete">
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Recherches sauvegardées"
|
||||
icon="pi pi-bookmark"
|
||||
styleClass="ui-button-outlined ui-button-info"
|
||||
onclick="PF('dlgRecherchesSauvegardees').show();" />
|
||||
<p:commandButton value="Nouvelle recherche"
|
||||
icon="pi pi-plus"
|
||||
styleClass="ui-button-outlined ui-button-success"
|
||||
action="#{membreRechercheBean.nouvelleRecherche}" />
|
||||
</div>
|
||||
</h:form>
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-search text-blue-500" />
|
||||
<ui:param name="title" value="Recherche Avancée des Membres" />
|
||||
<ui:param name="description" value="Outil de recherche puissant pour retrouver et analyser les membres" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActionsEntete">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-info.xhtml">
|
||||
<ui:param name="value" value="Recherches sauvegardées" />
|
||||
<ui:param name="icon" value="pi pi-bookmark" />
|
||||
<ui:param name="onclick" value="PF('dlgRecherchesSauvegardees').show();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Nouvelle recherche" />
|
||||
<ui:param name="icon" value="pi pi-plus" />
|
||||
<ui:param name="action" value="#{membreRechercheBean.nouvelleRecherche}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<!-- Statistiques de recherche -->
|
||||
<div class="grid">
|
||||
<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-xl">#{membreRechercheBean.statistiques.totalMembres}</div>
|
||||
<div class="text-blue-700">Total Membres</div>
|
||||
</div>
|
||||
<div class="bg-blue-500 text-white border-round text-center"
|
||||
style="width: 2.5rem; height: 2.5rem; line-height: 2.5rem;">
|
||||
<i class="pi pi-users text-lg"></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-xl">#{membreRechercheBean.statistiques.resultatsActuels}</div>
|
||||
<div class="text-green-700">Résultats trouvés</div>
|
||||
</div>
|
||||
<div class="bg-green-500 text-white border-round text-center"
|
||||
style="width: 2.5rem; height: 2.5rem; line-height: 2.5rem;">
|
||||
<i class="pi pi-check text-lg"></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-xl">#{membreRechercheBean.statistiques.filtresActifs}</div>
|
||||
<div class="text-orange-700">Filtres actifs</div>
|
||||
</div>
|
||||
<div class="bg-orange-500 text-white border-round text-center"
|
||||
style="width: 2.5rem; height: 2.5rem; line-height: 2.5rem;">
|
||||
<i class="pi pi-filter text-lg"></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-xl">#{membreRechercheBean.statistiques.tempsRecherche}ms</div>
|
||||
<div class="text-purple-700">Temps de recherche</div>
|
||||
</div>
|
||||
<div class="bg-purple-500 text-white border-round text-center"
|
||||
style="width: 2.5rem; height: 2.5rem; line-height: 2.5rem;">
|
||||
<i class="pi pi-clock text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{membreRechercheBean.statistiques.totalMembres}" />
|
||||
<ui:param name="label" value="Total Membres" />
|
||||
<ui:param name="icon" value="pi pi-users" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{membreRechercheBean.statistiques.resultatsActuels}" />
|
||||
<ui:param name="label" value="Résultats trouvés" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{membreRechercheBean.statistiques.filtresActifs}" />
|
||||
<ui:param name="label" value="Filtres actifs" />
|
||||
<ui:param name="icon" value="pi pi-filter" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{membreRechercheBean.statistiques.tempsRecherche}ms" />
|
||||
<ui:param name="label" value="Temps de recherche" />
|
||||
<ui:param name="icon" value="pi pi-clock" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Formulaire de recherche avancée -->
|
||||
@@ -115,65 +79,58 @@
|
||||
<div class="ui-fluid">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<p:outputLabel for="searchNom" value="Nom" />
|
||||
<p:inputText id="searchNom" value="#{membreRechercheBean.filtres.nom}"
|
||||
placeholder="Rechercher par nom...">
|
||||
<p:ajax event="keyup" update="dtResultats @(.search-summary)" />
|
||||
</p:inputText>
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-search-text.xhtml">
|
||||
<ui:param name="id" value="searchNom" />
|
||||
<ui:param name="label" value="Nom" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.nom}" />
|
||||
<ui:param name="placeholder" value="Rechercher par nom..." />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<p:outputLabel for="searchPrenom" value="Prénom" />
|
||||
<p:inputText id="searchPrenom" value="#{membreRechercheBean.filtres.prenom}"
|
||||
placeholder="Rechercher par prénom...">
|
||||
<p:ajax event="keyup" update="dtResultats @(.search-summary)" />
|
||||
</p:inputText>
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-search-text.xhtml">
|
||||
<ui:param name="id" value="searchPrenom" />
|
||||
<ui:param name="label" value="Prénom" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.prenom}" />
|
||||
<ui:param name="placeholder" value="Rechercher par prénom..." />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<p:outputLabel for="searchEmail" value="Email" />
|
||||
<p:inputText id="searchEmail" value="#{membreRechercheBean.filtres.email}"
|
||||
placeholder="Rechercher par email...">
|
||||
<p:ajax event="keyup" update="dtResultats @(.search-summary)" />
|
||||
</p:inputText>
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-search-text.xhtml">
|
||||
<ui:param name="id" value="searchEmail" />
|
||||
<ui:param name="label" value="Email" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.email}" />
|
||||
<ui:param name="placeholder" value="Rechercher par email..." />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<p:outputLabel for="searchTelephone" value="Téléphone" />
|
||||
<p:inputText id="searchTelephone" value="#{membreRechercheBean.filtres.telephone}"
|
||||
placeholder="Rechercher par téléphone...">
|
||||
<p:ajax event="keyup" update="dtResultats @(.search-summary)" />
|
||||
</p:inputText>
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-search-text.xhtml">
|
||||
<ui:param name="id" value="searchTelephone" />
|
||||
<ui:param name="label" value="Téléphone" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.telephone}" />
|
||||
<ui:param name="placeholder" value="Rechercher par téléphone..." />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<p:outputLabel for="searchNumeroMembre" value="Numéro membre" />
|
||||
<p:inputText id="searchNumeroMembre" value="#{membreRechercheBean.filtres.numeroMembre}"
|
||||
placeholder="Ex: M2024001">
|
||||
<p:ajax event="keyup" update="dtResultats @(.search-summary)" />
|
||||
</p:inputText>
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-search-text.xhtml">
|
||||
<ui:param name="id" value="searchNumeroMembre" />
|
||||
<ui:param name="label" value="Numéro membre" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.numeroMembre}" />
|
||||
<ui:param name="placeholder" value="Ex: M2024001" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<p:outputLabel for="searchProfession" value="Profession" />
|
||||
<p:autoComplete id="searchProfession"
|
||||
value="#{membreRechercheBean.filtres.profession}"
|
||||
completeMethod="#{membreRechercheBean.completerProfessions}"
|
||||
placeholder="Saisir une profession...">
|
||||
<p:ajax event="itemSelect" update="dtResultats @(.search-summary)" />
|
||||
</p:autoComplete>
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-autocomplete.xhtml">
|
||||
<ui:param name="id" value="searchProfession" />
|
||||
<ui:param name="label" value="Profession" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.profession}" />
|
||||
<ui:param name="completeMethod" value="#{membreRechercheBean.completerProfessions}" />
|
||||
<ui:param name="placeholder" value="Saisir une profession..." />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -184,80 +141,76 @@
|
||||
<div class="ui-fluid">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="field">
|
||||
<p:outputLabel for="searchStatut" value="Statut" />
|
||||
<p:selectCheckboxMenu id="searchStatut" value="#{membreRechercheBean.filtres.statuts}"
|
||||
multiple="true">
|
||||
<ui:include src="/templates/components/form-field-checkbox-menu.xhtml">
|
||||
<ui:param name="id" value="searchStatut" />
|
||||
<ui:param name="label" value="Statut" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.statuts}" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Actif" itemValue="ACTIF" />
|
||||
<f:selectItem itemLabel="Inactif" itemValue="INACTIF" />
|
||||
<f:selectItem itemLabel="Suspendu" itemValue="SUSPENDU" />
|
||||
<f:selectItem itemLabel="Radié" itemValue="RADIE" />
|
||||
<p:ajax update="dtResultats @(.search-summary)" />
|
||||
</p:selectCheckboxMenu>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="field">
|
||||
<p:outputLabel for="searchTypeMembre" value="Type de membre" />
|
||||
<p:selectCheckboxMenu id="searchTypeMembre" value="#{membreRechercheBean.filtres.typesMembre}"
|
||||
multiple="true">
|
||||
<ui:include src="/templates/components/form-field-checkbox-menu.xhtml">
|
||||
<ui:param name="id" value="searchTypeMembre" />
|
||||
<ui:param name="label" value="Type de membre" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.typesMembre}" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Actif" itemValue="ACTIF" />
|
||||
<f:selectItem itemLabel="Associé" itemValue="ASSOCIE" />
|
||||
<f:selectItem itemLabel="Bienfaiteur" itemValue="BIENFAITEUR" />
|
||||
<f:selectItem itemLabel="Honoraire" itemValue="HONORAIRE" />
|
||||
<p:ajax update="dtResultats @(.search-summary)" />
|
||||
</p:selectCheckboxMenu>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="field">
|
||||
<p:outputLabel for="searchEntite" value="Entité" />
|
||||
<p:selectCheckboxMenu id="searchEntite" value="#{membreRechercheBean.filtres.entites}"
|
||||
multiple="true">
|
||||
multiple="true" styleClass="w-full">
|
||||
<f:selectItems value="#{membreRechercheBean.entitesDisponibles}"
|
||||
var="entite"
|
||||
itemLabel="#{entite.nom}"
|
||||
itemValue="#{entite.id}" />
|
||||
<p:ajax update="dtResultats @(.search-summary)" />
|
||||
<p:ajax update=":formResultats:dtResultats @(.search-summary)" />
|
||||
</p:selectCheckboxMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="field">
|
||||
<p:outputLabel for="searchCotisationStatut" value="Statut cotisations" />
|
||||
<p:selectCheckboxMenu id="searchCotisationStatut" value="#{membreRechercheBean.filtres.statutsCotisation}"
|
||||
multiple="true">
|
||||
<ui:include src="/templates/components/form-field-checkbox-menu.xhtml">
|
||||
<ui:param name="id" value="searchCotisationStatut" />
|
||||
<ui:param name="label" value="Statut cotisations" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.statutsCotisation}" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="À jour" itemValue="A_JOUR" />
|
||||
<f:selectItem itemLabel="En retard" itemValue="EN_RETARD" />
|
||||
<f:selectItem itemLabel="Jamais payé" itemValue="JAMAIS_PAYE" />
|
||||
<p:ajax update="dtResultats @(.search-summary)" />
|
||||
</p:selectCheckboxMenu>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="adhesionDateDebut" value="Adhésion après le" />
|
||||
<p:calendar id="adhesionDateDebut" value="#{membreRechercheBean.filtres.dateAdhesionDebut}"
|
||||
pattern="dd/MM/yyyy" showIcon="true">
|
||||
<p:ajax event="dateSelect" update="dtResultats @(.search-summary)" />
|
||||
</p:calendar>
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="adhesionDateDebut" />
|
||||
<ui:param name="label" value="Adhésion après le" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.dateAdhesionDebut}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="adhesionDateFin" value="Adhésion avant le" />
|
||||
<p:calendar id="adhesionDateFin" value="#{membreRechercheBean.filtres.dateAdhesionFin}"
|
||||
pattern="dd/MM/yyyy" showIcon="true">
|
||||
<p:ajax event="dateSelect" update="dtResultats @(.search-summary)" />
|
||||
</p:calendar>
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="adhesionDateFin" />
|
||||
<ui:param name="label" value="Adhésion avant le" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.dateAdhesionFin}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -268,47 +221,43 @@
|
||||
<div class="ui-fluid">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="field">
|
||||
<p:outputLabel for="searchGenre" value="Genre" />
|
||||
<p:selectCheckboxMenu id="searchGenre" value="#{membreRechercheBean.filtres.genres}"
|
||||
multiple="true">
|
||||
<ui:include src="/templates/components/form-field-checkbox-menu.xhtml">
|
||||
<ui:param name="id" value="searchGenre" />
|
||||
<ui:param name="label" value="Genre" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.genres}" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Masculin" itemValue="M" />
|
||||
<f:selectItem itemLabel="Féminin" itemValue="F" />
|
||||
<p:ajax update="dtResultats @(.search-summary)" />
|
||||
</p:selectCheckboxMenu>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="field">
|
||||
<p:outputLabel for="ageMin" value="Âge minimum" />
|
||||
<p:inputNumber id="ageMin" value="#{membreRechercheBean.filtres.ageMin}"
|
||||
symbol="" placeholder="Ex: 25">
|
||||
<p:ajax event="change" update="dtResultats @(.search-summary)" />
|
||||
</p:inputNumber>
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-number.xhtml">
|
||||
<ui:param name="id" value="ageMin" />
|
||||
<ui:param name="label" value="Âge minimum" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.ageMin}" />
|
||||
<ui:param name="placeholder" value="Ex: 25" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="field">
|
||||
<p:outputLabel for="ageMax" value="Âge maximum" />
|
||||
<p:inputNumber id="ageMax" value="#{membreRechercheBean.filtres.ageMax}"
|
||||
symbol="" placeholder="Ex: 65">
|
||||
<p:ajax event="change" update="dtResultats @(.search-summary)" />
|
||||
</p:inputNumber>
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-number.xhtml">
|
||||
<ui:param name="id" value="ageMax" />
|
||||
<ui:param name="label" value="Âge maximum" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.ageMax}" />
|
||||
<ui:param name="placeholder" value="Ex: 65" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="field">
|
||||
<p:outputLabel for="searchVille" value="Ville" />
|
||||
<p:autoComplete id="searchVille"
|
||||
value="#{membreRechercheBean.filtres.ville}"
|
||||
completeMethod="#{membreRechercheBean.completerVilles}"
|
||||
placeholder="Saisir une ville...">
|
||||
<p:ajax event="itemSelect" update="dtResultats @(.search-summary)" />
|
||||
</p:autoComplete>
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-autocomplete.xhtml">
|
||||
<ui:param name="id" value="searchVille" />
|
||||
<ui:param name="label" value="Ville" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.ville}" />
|
||||
<ui:param name="completeMethod" value="#{membreRechercheBean.completerVilles}" />
|
||||
<ui:param name="placeholder" value="Saisir une ville..." />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -319,51 +268,45 @@
|
||||
<div class="ui-fluid">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<p:outputLabel for="tauxParticipationMin" value="Taux participation min (%)" />
|
||||
<p:inputNumber id="tauxParticipationMin" value="#{membreRechercheBean.filtres.tauxParticipationMin}"
|
||||
symbol="" minValue="0" maxValue="100">
|
||||
<p:ajax event="change" update="dtResultats @(.search-summary)" />
|
||||
</p:inputNumber>
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-number.xhtml">
|
||||
<ui:param name="id" value="tauxParticipationMin" />
|
||||
<ui:param name="label" value="Taux participation min (%)" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.tauxParticipationMin}" />
|
||||
<ui:param name="minValue" value="0" />
|
||||
<ui:param name="maxValue" value="100" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<p:outputLabel for="evenementsMin" value="Événements min (cette année)" />
|
||||
<p:inputNumber id="evenementsMin" value="#{membreRechercheBean.filtres.evenementsMin}"
|
||||
symbol="">
|
||||
<p:ajax event="change" update="dtResultats @(.search-summary)" />
|
||||
</p:inputNumber>
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-number.xhtml">
|
||||
<ui:param name="id" value="evenementsMin" />
|
||||
<ui:param name="label" value="Événements min (cette année)" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.evenementsMin}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<p:outputLabel for="cotisationsMin" value="Cotisations payées min" />
|
||||
<p:inputNumber id="cotisationsMin" value="#{membreRechercheBean.filtres.cotisationsMin}"
|
||||
symbol="">
|
||||
<p:ajax event="change" update="dtResultats @(.search-summary)" />
|
||||
</p:inputNumber>
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-number.xhtml">
|
||||
<ui:param name="id" value="cotisationsMin" />
|
||||
<ui:param name="label" value="Cotisations payées min" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.cotisationsMin}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:selectBooleanCheckbox id="aDesEnfants" value="#{membreRechercheBean.filtres.aDesEnfants}">
|
||||
<p:ajax update="dtResultats @(.search-summary)" />
|
||||
</p:selectBooleanCheckbox>
|
||||
<p:outputLabel for="aDesEnfants" value=" A des enfants déclarés" />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-boolean.xhtml">
|
||||
<ui:param name="id" value="aDesEnfants" />
|
||||
<ui:param name="label" value=" A des enfants déclarés" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.aDesEnfants}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:selectBooleanCheckbox id="aRecuAides" value="#{membreRechercheBean.filtres.aRecuAides}">
|
||||
<p:ajax update="dtResultats @(.search-summary)" />
|
||||
</p:selectBooleanCheckbox>
|
||||
<p:outputLabel for="aRecuAides" value=" A reçu des aides" />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-boolean.xhtml">
|
||||
<ui:param name="id" value="aRecuAides" />
|
||||
<ui:param name="label" value=" A reçu des aides" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.filtres.aRecuAides}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -372,25 +315,32 @@
|
||||
|
||||
<!-- Actions de recherche -->
|
||||
<div class="flex gap-2 mt-4">
|
||||
<p:commandButton value="Rechercher"
|
||||
icon="pi pi-search"
|
||||
styleClass="ui-button-success"
|
||||
action="#{membreRechercheBean.effectuerRecherche}"
|
||||
update="dtResultats @(.search-summary)" />
|
||||
<p:commandButton value="Réinitialiser"
|
||||
icon="pi pi-refresh"
|
||||
styleClass="ui-button-outlined ui-button-secondary"
|
||||
action="#{membreRechercheBean.reinitialiserFiltres}"
|
||||
update="@form dtResultats @(.search-summary)" />
|
||||
<p:commandButton value="Sauvegarder recherche"
|
||||
icon="pi pi-bookmark"
|
||||
styleClass="ui-button-outlined ui-button-info"
|
||||
onclick="PF('dlgSauvegarderRecherche').show();" />
|
||||
<p:commandButton value="Exporter résultats"
|
||||
icon="pi pi-download"
|
||||
styleClass="ui-button-outlined ui-button-warning"
|
||||
onclick="PF('dlgExporterResultats').show();"
|
||||
disabled="#{empty membreRechercheBean.resultats}" />
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Rechercher" />
|
||||
<ui:param name="icon" value="pi pi-search" />
|
||||
<ui:param name="action" value="#{membreRechercheBean.effectuerRecherche}" />
|
||||
<ui:param name="update" value=":formResultats:dtResultats @(.search-summary)" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Réinitialiser" />
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{membreRechercheBean.reinitialiserFiltres}" />
|
||||
<ui:param name="update" value="@form :formResultats:dtResultats @(.search-summary)" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-info.xhtml">
|
||||
<ui:param name="value" value="Sauvegarder recherche" />
|
||||
<ui:param name="icon" value="pi pi-bookmark" />
|
||||
<ui:param name="onclick" value="PF('dlgSauvegarderRecherche').show();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-warning.xhtml">
|
||||
<ui:param name="value" value="Exporter résultats" />
|
||||
<ui:param name="icon" value="pi pi-download" />
|
||||
<ui:param name="onclick" value="PF('dlgExporterResultats').show();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
<ui:param name="disabled" value="#{empty membreRechercheBean.resultats}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
@@ -439,15 +389,23 @@
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<span>Liste des membres</span>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton icon="pi pi-refresh"
|
||||
styleClass="ui-button-rounded ui-button-outlined ui-button-secondary"
|
||||
action="#{membreRechercheBean.actualiserResultats}"
|
||||
update="@form"
|
||||
title="Actualiser" />
|
||||
<p:commandButton icon="pi pi-cog"
|
||||
styleClass="ui-button-rounded ui-button-outlined ui-button-secondary"
|
||||
onclick="PF('dlgOptionsAffichage').show();"
|
||||
title="Options d'affichage" />
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{membreRechercheBean.actualiserResultats}" />
|
||||
<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>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-cog" />
|
||||
<ui:param name="onclick" value="PF('dlgOptionsAffichage').show();" />
|
||||
<ui:param name="title" value="Options d'affichage" />
|
||||
<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>
|
||||
</div>
|
||||
</f:facet>
|
||||
@@ -520,18 +478,29 @@
|
||||
|
||||
<p:column headerText="Actions" style="width:150px">
|
||||
<div class="flex gap-1">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
styleClass="ui-button-rounded ui-button-text ui-button-info"
|
||||
action="#{membreRechercheBean.voirProfil(membre)}"
|
||||
title="Voir profil" />
|
||||
<p:commandButton icon="pi pi-envelope"
|
||||
styleClass="ui-button-rounded ui-button-text ui-button-secondary"
|
||||
action="#{membreRechercheBean.contacterMembre(membre)}"
|
||||
title="Contacter" />
|
||||
<p:commandButton icon="pi pi-plus"
|
||||
styleClass="ui-button-rounded ui-button-text ui-button-success"
|
||||
onclick="#{membreRechercheBean.ajouterAuGroupe(membre)}"
|
||||
title="Ajouter au groupe de travail" />
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-eye" />
|
||||
<ui:param name="action" value="#{membreRechercheBean.voirProfil(membre)}" />
|
||||
<ui:param name="title" value="Voir profil" />
|
||||
<ui:param name="severity" value="info" />
|
||||
<ui:param name="rounded" value="true" />
|
||||
<ui:param name="text" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-envelope" />
|
||||
<ui:param name="action" value="#{membreRechercheBean.contacterMembre(membre)}" />
|
||||
<ui:param name="title" value="Contacter" />
|
||||
<ui:param name="rounded" value="true" />
|
||||
<ui:param name="text" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-plus" />
|
||||
<ui:param name="action" value="#{membreRechercheBean.ajouterAuGroupe(membre)}" />
|
||||
<ui:param name="title" value="Ajouter au groupe de travail" />
|
||||
<ui:param name="severity" value="success" />
|
||||
<ui:param name="rounded" value="true" />
|
||||
<ui:param name="text" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
@@ -542,21 +511,27 @@
|
||||
<span class="text-600">#{membreRechercheBean.selectedMembres.size()} membre(s) sélectionné(s)</span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Envoyer message groupé"
|
||||
icon="pi pi-envelope"
|
||||
styleClass="ui-button-outlined ui-button-info"
|
||||
onclick="PF('dlgMessageGroupe').show();"
|
||||
disabled="#{empty membreRechercheBean.selectedMembres}" />
|
||||
<p:commandButton value="Créer groupe de travail"
|
||||
icon="pi pi-users"
|
||||
styleClass="ui-button-outlined ui-button-success"
|
||||
onclick="PF('dlgCreerGroupe').show();"
|
||||
disabled="#{empty membreRechercheBean.selectedMembres}" />
|
||||
<p:commandButton value="Exporter sélection"
|
||||
icon="pi pi-file-excel"
|
||||
styleClass="ui-button-outlined ui-button-warning"
|
||||
action="#{membreRechercheBean.exporterSelection}"
|
||||
disabled="#{empty membreRechercheBean.selectedMembres}" />
|
||||
<ui:include src="/templates/components/button-info.xhtml">
|
||||
<ui:param name="value" value="Envoyer message groupé" />
|
||||
<ui:param name="icon" value="pi pi-envelope" />
|
||||
<ui:param name="onclick" value="PF('dlgMessageGroupe').show();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
<ui:param name="disabled" value="#{empty membreRechercheBean.selectedMembres}" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Créer groupe de travail" />
|
||||
<ui:param name="icon" value="pi pi-users" />
|
||||
<ui:param name="onclick" value="PF('dlgCreerGroupe').show();" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
<ui:param name="disabled" value="#{empty membreRechercheBean.selectedMembres}" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-warning.xhtml">
|
||||
<ui:param name="value" value="Exporter sélection" />
|
||||
<ui:param name="icon" value="pi pi-file-excel" />
|
||||
<ui:param name="action" value="#{membreRechercheBean.exporterSelection}" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
<ui:param name="disabled" value="#{empty membreRechercheBean.selectedMembres}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
@@ -566,17 +541,20 @@
|
||||
<p:dialog header="Sauvegarder la Recherche" widgetVar="dlgSauvegarderRecherche" modal="true" width="500">
|
||||
<h:form id="formSauvegarderRecherche">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<p:outputLabel for="nomRecherche" value="Nom de la recherche" />
|
||||
<p:inputText id="nomRecherche" value="#{membreRechercheBean.nouvelleRechercheSauvegardee.nom}"
|
||||
required="true" placeholder="Ex: Membres actifs 2024" />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="nomRecherche" />
|
||||
<ui:param name="label" value="Nom de la recherche" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.nouvelleRechercheSauvegardee.nom}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="placeholder" value="Ex: Membres actifs 2024" />
|
||||
</ui:include>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="descriptionRecherche" value="Description" />
|
||||
<p:inputTextarea id="descriptionRecherche" value="#{membreRechercheBean.nouvelleRechercheSauvegardee.description}"
|
||||
rows="3" placeholder="Description optionnelle..." />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="descriptionRecherche" />
|
||||
<ui:param name="label" value="Description" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.nouvelleRechercheSauvegardee.description}" />
|
||||
<ui:param name="rows" value="3" />
|
||||
</ui:include>
|
||||
|
||||
<div class="field">
|
||||
<p:selectBooleanCheckbox id="recherchePublique" value="#{membreRechercheBean.nouvelleRechercheSauvegardee.publique}" />
|
||||
@@ -590,14 +568,18 @@
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-3">
|
||||
<p:commandButton value="Sauvegarder" icon="pi pi-check"
|
||||
styleClass="ui-button-success"
|
||||
action="#{membreRechercheBean.sauvegarderRecherche}"
|
||||
update="@form"
|
||||
oncomplete="if(!args.validationFailed) PF('dlgSauvegarderRecherche').hide();" />
|
||||
<p:commandButton value="Annuler" icon="pi pi-times"
|
||||
styleClass="ui-button-secondary"
|
||||
onclick="PF('dlgSauvegarderRecherche').hide();" type="button" />
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Sauvegarder" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="action" value="#{membreRechercheBean.sauvegarderRecherche}" />
|
||||
<ui:param name="update" value="@form" />
|
||||
<ui:param name="onclick" value="if(!args.validationFailed) PF('dlgSauvegarderRecherche').hide();" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgSauvegarderRecherche').hide();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
@@ -627,26 +609,36 @@
|
||||
</p:column>
|
||||
<p:column headerText="Actions">
|
||||
<div class="flex gap-1">
|
||||
<p:commandButton icon="pi pi-play"
|
||||
styleClass="ui-button-rounded ui-button-text ui-button-success"
|
||||
action="#{membreRechercheBean.chargerRecherche(recherche)}"
|
||||
update=":formRechercheAvancee :formResultats"
|
||||
oncomplete="PF('dlgRecherchesSauvegardees').hide();"
|
||||
title="Charger" />
|
||||
<p:commandButton icon="pi pi-trash"
|
||||
styleClass="ui-button-rounded ui-button-text ui-button-danger"
|
||||
action="#{membreRechercheBean.supprimerRecherche(recherche)}"
|
||||
update="@form"
|
||||
onclick="return confirm('Supprimer cette recherche ?');"
|
||||
title="Supprimer" />
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-play" />
|
||||
<ui:param name="action" value="#{membreRechercheBean.chargerRecherche(recherche)}" />
|
||||
<ui:param name="update" value=":formRechercheAvancee :formResultats" />
|
||||
<ui:param name="onclick" value="PF('dlgRecherchesSauvegardees').hide();" />
|
||||
<ui:param name="title" value="Charger" />
|
||||
<ui:param name="severity" value="success" />
|
||||
<ui:param name="rounded" value="true" />
|
||||
<ui:param name="text" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-trash" />
|
||||
<ui:param name="action" value="#{membreRechercheBean.supprimerRecherche(recherche)}" />
|
||||
<ui:param name="update" value="@form" />
|
||||
<ui:param name="onclick" value="return confirm('Supprimer cette recherche ?');" />
|
||||
<ui:param name="title" value="Supprimer" />
|
||||
<ui:param name="severity" value="danger" />
|
||||
<ui:param name="rounded" value="true" />
|
||||
<ui:param name="text" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
|
||||
<div class="flex justify-content-end mt-3">
|
||||
<p:commandButton value="Fermer" icon="pi pi-times"
|
||||
styleClass="ui-button-secondary"
|
||||
onclick="PF('dlgRecherchesSauvegardees').hide();" type="button" />
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Fermer" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgRecherchesSauvegardees').hide();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
@@ -655,22 +647,26 @@
|
||||
<p:dialog header="Envoyer un Message Groupé" widgetVar="dlgMessageGroupe" modal="true" width="600">
|
||||
<h:form id="formMessageGroupe">
|
||||
<div class="ui-fluid">
|
||||
<div class="field">
|
||||
<p:outputLabel for="sujetMessageGroupe" value="Sujet" />
|
||||
<p:inputText id="sujetMessageGroupe" value="#{membreRechercheBean.messageGroupe.sujet}"
|
||||
required="true" placeholder="Objet du message" />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="sujetMessageGroupe" />
|
||||
<ui:param name="label" value="Sujet" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.messageGroupe.sujet}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="placeholder" value="Objet du message" />
|
||||
</ui:include>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="contenuMessageGroupe" value="Message" />
|
||||
<p:inputTextarea id="contenuMessageGroupe" value="#{membreRechercheBean.messageGroupe.contenu}"
|
||||
rows="6" required="true" placeholder="Votre message..." />
|
||||
</div>
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="contenuMessageGroupe" />
|
||||
<ui:param name="label" value="Message" />
|
||||
<ui:param name="value" value="#{membreRechercheBean.messageGroupe.contenu}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="rows" value="6" />
|
||||
</ui:include>
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="canauxMessageGroupe" value="Canaux de diffusion" />
|
||||
<p:selectCheckboxMenu id="canauxMessageGroupe" value="#{membreRechercheBean.messageGroupe.canaux}"
|
||||
multiple="true">
|
||||
multiple="true" styleClass="w-full">
|
||||
<f:selectItem itemLabel="📧 Email" itemValue="EMAIL" />
|
||||
<f:selectItem itemLabel="📱 SMS" itemValue="SMS" />
|
||||
<f:selectItem itemLabel="💬 WhatsApp" itemValue="WHATSAPP" />
|
||||
@@ -685,14 +681,18 @@
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2 mt-3">
|
||||
<p:commandButton value="Envoyer" icon="pi pi-send"
|
||||
styleClass="ui-button-success"
|
||||
action="#{membreRechercheBean.envoyerMessageGroupe}"
|
||||
update="@form"
|
||||
oncomplete="if(!args.validationFailed) PF('dlgMessageGroupe').hide();" />
|
||||
<p:commandButton value="Annuler" icon="pi pi-times"
|
||||
styleClass="ui-button-secondary"
|
||||
onclick="PF('dlgMessageGroupe').hide();" type="button" />
|
||||
<ui:include src="/templates/components/button-success.xhtml">
|
||||
<ui:param name="value" value="Envoyer" />
|
||||
<ui:param name="icon" value="pi pi-send" />
|
||||
<ui:param name="action" value="#{membreRechercheBean.envoyerMessageGroupe}" />
|
||||
<ui:param name="update" value="@form" />
|
||||
<ui:param name="onclick" value="if(!args.validationFailed) PF('dlgMessageGroupe').hide();" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Annuler" />
|
||||
<ui:param name="icon" value="pi pi-times" />
|
||||
<ui:param name="onclick" value="PF('dlgMessageGroupe').hide();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
<!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 - Rechercher membre</ui:define>
|
||||
<ui:define name="content">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<h2>Rechercher un membre</h2>
|
||||
<p>Page en cours de développement...</p>
|
||||
<p:button value="Retour" icon="pi pi-arrow-left" outcome="/pages/secure/dashboard"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
@@ -0,0 +1,331 @@
|
||||
<!DOCTYPE html>
|
||||
<html 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:composition template="/templates/main-template.xhtml">
|
||||
<ui:define name="title">Gestion des Organisations</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<h:form id="formOrganisations">
|
||||
<p:messages id="messages" showDetail="true" closable="true"/>
|
||||
|
||||
<!-- En-tête avec statistiques (DRY/WOU: utilisation de stat-card) -->
|
||||
<div class="grid mb-4">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{organisationsBean.totalOrganisations}" />
|
||||
<ui:param name="label" value="Total" />
|
||||
<ui:param name="icon" value="pi pi-building" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{organisationsBean.organisationsActives}" />
|
||||
<ui:param name="label" value="Actives" />
|
||||
<ui:param name="icon" value="pi pi-check-circle" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{organisationsBean.organisationsInactives}" />
|
||||
<ui:param name="label" value="Inactives" />
|
||||
<ui:param name="icon" value="pi pi-times-circle" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Barre de recherche et filtres (DRY/WOU: utilisation de form-field) -->
|
||||
<div class="card">
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="field">
|
||||
<p:outputLabel for="rechercheGlobale" value="Rechercher" />
|
||||
<p:inputText id="rechercheGlobale"
|
||||
value="#{organisationsBean.rechercheGlobale}"
|
||||
placeholder="Rechercher..."
|
||||
styleClass="w-full">
|
||||
<p:ajax event="keyup" update="dtOrganisations" listener="#{organisationsBean.appliquerFiltres}" delay="500"/>
|
||||
</p:inputText>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-2">
|
||||
<div class="field">
|
||||
<p:outputLabel for="filtreStatut" value="Statut" />
|
||||
<p:selectOneMenu id="filtreStatut"
|
||||
value="#{organisationsBean.filtreStatut}"
|
||||
styleClass="w-full">
|
||||
<f:selectItems value="#{organisationsBean.statutsSelectItems}" />
|
||||
<p:ajax event="change" update="dtOrganisations" listener="#{organisationsBean.appliquerFiltres}"/>
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-2">
|
||||
<div class="field">
|
||||
<p:outputLabel for="filtreType" value="Type" />
|
||||
<p:selectOneMenu id="filtreType"
|
||||
value="#{organisationsBean.filtreType}"
|
||||
styleClass="w-full">
|
||||
<f:selectItems value="#{organisationsBean.typesSelectItems}" />
|
||||
<p:ajax event="change" update="dtOrganisations" listener="#{organisationsBean.appliquerFiltres}"/>
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 md:col-2">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Réinitialiser" />
|
||||
<ui:param name="icon" value="pi pi-filter-slash" />
|
||||
<ui:param name="action" value="#{organisationsBean.reinitialiserFiltres}" />
|
||||
<ui:param name="update" value="dtOrganisations rechercheGlobale filtreStatut filtreType" />
|
||||
<ui:param name="styleClass" value="w-full" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-2">
|
||||
<p:commandButton value="Nouvelle"
|
||||
icon="pi pi-plus"
|
||||
action="#{organisationsBean.preparerNouvelleOrganisation}"
|
||||
update=":formNouvelle @form"
|
||||
oncomplete="PF('dlgNouvelle').show();"
|
||||
styleClass="ui-button-success w-full"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table des organisations -->
|
||||
<div class="card">
|
||||
<h5>Liste des Organisations</h5>
|
||||
<p:dataTable id="dtOrganisations"
|
||||
value="#{organisationsBean.organisationsFiltrees}"
|
||||
var="org"
|
||||
paginator="true"
|
||||
rows="20"
|
||||
rowsPerPageTemplate="10,20,50,100"
|
||||
paginatorPosition="bottom"
|
||||
emptyMessage="Aucune organisation trouvée"
|
||||
styleClass="table-responsive">
|
||||
|
||||
<p:column headerText="Logo" styleClass="text-center" style="width: 80px;">
|
||||
<i class="pi pi-building text-4xl text-primary"></i>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Nom" sortBy="#{org.nom}" filterBy="#{org.nom}">
|
||||
<h:outputText value="#{org.nom}" styleClass="font-bold"/>
|
||||
<br/>
|
||||
<h:outputText value="#{org.typeLibelle}" styleClass="text-sm text-500"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Type" sortBy="#{org.typeAssociation}" style="width: 150px;">
|
||||
<p:tag value="#{org.typeLibelle}"
|
||||
severity="#{org.typeAssociation == 'LIONS_CLUB' ? 'info' : 'primary'}"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Localisation" style="width: 200px;">
|
||||
<i class="pi pi-map-marker mr-1"></i>
|
||||
<h:outputText value="#{org.ville}, #{org.region}"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Membres" styleClass="text-center" style="width: 100px;">
|
||||
<p:tag value="#{org.nombreMembres}" severity="info" icon="pi pi-users"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut" sortBy="#{org.statut}" styleClass="text-center" style="width: 100px;">
|
||||
<p:tag value="#{org.statut}"
|
||||
severity="#{org.statut == organisationsBean.statutActive ? 'success' : 'warning'}"
|
||||
icon="#{org.statut == organisationsBean.statutActive ? 'pi pi-check' : 'pi pi-times'}"/>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" styleClass="text-center" style="width: 180px;">
|
||||
<p:commandButton icon="pi pi-pencil"
|
||||
title="Modifier"
|
||||
action="#{organisationsBean.setOrganisationSelectionnee(org)}"
|
||||
oncomplete="PF('dlgModifier').show();"
|
||||
update=":formModifier"
|
||||
styleClass="ui-button-rounded ui-button-warning mr-2"/>
|
||||
|
||||
<p:commandButton icon="#{org.statut == organisationsBean.statutActive ? 'pi pi-ban' : 'pi pi-check'}"
|
||||
title="#{org.statut == organisationsBean.statutActive ? 'Désactiver' : 'Activer'}"
|
||||
action="#{organisationsBean.basculerStatutOrganisation(org)}"
|
||||
update="dtOrganisations messages"
|
||||
styleClass="ui-button-rounded #{org.statut == organisationsBean.statutActive ? 'ui-button-secondary' : 'ui-button-success'} mr-2">
|
||||
<p:confirm header="Confirmation"
|
||||
message="Êtes-vous sûr de vouloir #{org.statut == organisationsBean.statutActive ? 'désactiver' : 'activer'} cette organisation ?"
|
||||
icon="pi pi-exclamation-triangle"/>
|
||||
</p:commandButton>
|
||||
|
||||
<p:commandButton icon="pi pi-trash"
|
||||
title="Supprimer"
|
||||
action="#{organisationsBean.supprimerOrganisation(org)}"
|
||||
update="dtOrganisations messages"
|
||||
styleClass="ui-button-rounded ui-button-danger">
|
||||
<p:confirm header="Confirmation"
|
||||
message="Êtes-vous sûr de vouloir supprimer cette organisation ? Cette action est irréversible."
|
||||
icon="pi pi-exclamation-triangle"/>
|
||||
</p:commandButton>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</div>
|
||||
|
||||
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" responsive="true" width="350">
|
||||
<p:commandButton value="Non" type="button" styleClass="ui-button-secondary" icon="pi pi-times"
|
||||
onclick="PF('confirmDialog').hide()"/>
|
||||
<p:commandButton value="Oui" type="button" styleClass="ui-button-danger" icon="pi pi-check"/>
|
||||
</p:confirmDialog>
|
||||
</h:form>
|
||||
|
||||
<!-- Dialogue Nouvelle Organisation (DRY/WOU: utilisation de form-dialog) -->
|
||||
<ui:decorate template="/templates/components/form-dialog.xhtml">
|
||||
<ui:param name="dialogId" value="dlgNouvelle" />
|
||||
<ui:param name="header" value="Nouvelle Organisation" />
|
||||
<ui:param name="widgetVar" value="dlgNouvelle" />
|
||||
<ui:param name="formId" value="formNouvelle" />
|
||||
<ui:param name="width" value="800" />
|
||||
<ui:define name="content">
|
||||
<div class="col-12 md:col-8">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="nom" />
|
||||
<ui:param name="label" value="Nom complet *" />
|
||||
<ui:param name="value" value="#{organisationsBean.nouvelleOrganisation.nom}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="type" />
|
||||
<ui:param name="label" value="Type *" />
|
||||
<ui:param name="value" value="#{organisationsBean.nouvelleOrganisation.typeAssociation}" />
|
||||
<ui:param name="items" value="#{organisationsBean.typesSelectItemsForForm}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="email" />
|
||||
<ui:param name="label" value="Email *" />
|
||||
<ui:param name="value" value="#{organisationsBean.nouvelleOrganisation.email}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="telephone" />
|
||||
<ui:param name="label" value="Téléphone" />
|
||||
<ui:param name="value" value="#{organisationsBean.nouvelleOrganisation.telephone}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="ville" />
|
||||
<ui:param name="label" value="Ville *" />
|
||||
<ui:param name="value" value="#{organisationsBean.nouvelleOrganisation.ville}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="region" />
|
||||
<ui:param name="label" value="Région" />
|
||||
<ui:param name="value" value="#{organisationsBean.nouvelleOrganisation.region}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="pays" />
|
||||
<ui:param name="label" value="Pays" />
|
||||
<ui:param name="value" value="#{organisationsBean.nouvelleOrganisation.pays}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="description" />
|
||||
<ui:param name="label" value="Description" />
|
||||
<ui:param name="value" value="#{organisationsBean.nouvelleOrganisation.description}" />
|
||||
<ui:param name="rows" value="3" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</ui:define>
|
||||
<ui:define name="footer">
|
||||
<p:commandButton value="Annuler"
|
||||
icon="pi pi-times"
|
||||
onclick="PF('dlgNouvelle').hide();"
|
||||
styleClass="ui-button-secondary"/>
|
||||
<p:commandButton value="Créer"
|
||||
icon="pi pi-check"
|
||||
action="#{organisationsBean.creerOrganisation}"
|
||||
update=":formOrganisations:dtOrganisations :formOrganisations:messages"
|
||||
oncomplete="if(!args.validationFailed) PF('dlgNouvelle').hide();"
|
||||
styleClass="ui-button-success"/>
|
||||
</ui:define>
|
||||
</ui:decorate>
|
||||
|
||||
<!-- Dialogue Modifier Organisation (DRY/WOU: utilisation de form-dialog) -->
|
||||
<ui:decorate template="/templates/components/form-dialog.xhtml">
|
||||
<ui:param name="dialogId" value="dlgModifier" />
|
||||
<ui:param name="header" value="Modifier Organisation" />
|
||||
<ui:param name="widgetVar" value="dlgModifier" />
|
||||
<ui:param name="formId" value="formModifier" />
|
||||
<ui:param name="width" value="800" />
|
||||
<ui:define name="content">
|
||||
<ui:fragment rendered="#{organisationsBean.organisationSelectionnee != null}">
|
||||
<div class="col-12 md:col-8">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="nomMod" />
|
||||
<ui:param name="label" value="Nom complet *" />
|
||||
<ui:param name="value" value="#{organisationsBean.organisationSelectionnee.nom}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="emailMod" />
|
||||
<ui:param name="label" value="Email *" />
|
||||
<ui:param name="value" value="#{organisationsBean.organisationSelectionnee.email}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="telephoneMod" />
|
||||
<ui:param name="label" value="Téléphone" />
|
||||
<ui:param name="value" value="#{organisationsBean.organisationSelectionnee.telephone}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="villeMod" />
|
||||
<ui:param name="label" value="Ville *" />
|
||||
<ui:param name="value" value="#{organisationsBean.organisationSelectionnee.ville}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12 md:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="regionMod" />
|
||||
<ui:param name="label" value="Région" />
|
||||
<ui:param name="value" value="#{organisationsBean.organisationSelectionnee.region}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="descriptionMod" />
|
||||
<ui:param name="label" value="Description" />
|
||||
<ui:param name="value" value="#{organisationsBean.organisationSelectionnee.description}" />
|
||||
<ui:param name="rows" value="3" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</ui:fragment>
|
||||
</ui:define>
|
||||
<ui:define name="footer">
|
||||
<p:commandButton value="Annuler"
|
||||
icon="pi pi-times"
|
||||
onclick="PF('dlgModifier').hide();"
|
||||
styleClass="ui-button-secondary"/>
|
||||
<p:commandButton value="Enregistrer"
|
||||
icon="pi pi-check"
|
||||
action="#{organisationsBean.modifierOrganisation}"
|
||||
update=":formOrganisations:dtOrganisations :formOrganisations:messages"
|
||||
oncomplete="if(!args.validationFailed) PF('dlgModifier').hide();"
|
||||
styleClass="ui-button-success"/>
|
||||
</ui:define>
|
||||
</ui:decorate>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
</html>
|
||||
@@ -9,417 +9,91 @@
|
||||
<ui:define name="title">Mes Activités - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="ui-fluid">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-history text-purple-500" />
|
||||
<ui:param name="title" value="Mes Activités" />
|
||||
<ui:param name="description" value="Suivez toutes vos interactions et participations dans UnionFlow" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActions">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Exporter" />
|
||||
<ui:param name="icon" value="pi pi-download" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Filtrer" />
|
||||
<ui:param name="icon" value="pi pi-filter" />
|
||||
<ui:param name="onclick" value="PF('dlgFiltres').show();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<!-- Statistiques d'activité -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.actionsRealisees}" />
|
||||
<ui:param name="label" value="Actions Totales" />
|
||||
<ui:param name="subLabel" value="Toutes périodes" />
|
||||
<ui:param name="icon" value="pi pi-check-circle" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<!-- En-tête -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.evenementsParticipes}" />
|
||||
<ui:param name="label" value="Événements" />
|
||||
<ui:param name="subLabel" value="Participés" />
|
||||
<ui:param name="icon" value="pi pi-calendar" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.tauxParticipation}%" />
|
||||
<ui:param name="label" value="Taux Participation" />
|
||||
<ui:param name="subLabel" value="Global" />
|
||||
<ui:param name="icon" value="pi pi-chart-line" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="8h" />
|
||||
<ui:param name="label" value="Temps Connecté" />
|
||||
<ui:param name="subLabel" value="Cette semaine" />
|
||||
<ui:param name="icon" value="pi pi-clock" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Activités récentes -->
|
||||
<div class="card">
|
||||
<h5>Activités Récentes</h5>
|
||||
|
||||
<ui:repeat value="#{personnelBean.activitesRecentes}" var="activite">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-#{activite.couleur}-100 flex align-items-center justify-content-center">
|
||||
<i class="pi #{activite.icon} text-#{activite.couleur}-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-900 font-bold text-4xl mb-2">
|
||||
<i class="pi pi-history text-purple-500 mr-3"></i>
|
||||
Mes Activités
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-0">
|
||||
Suivez toutes vos interactions et participations dans UnionFlow
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Exporter"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-download" />
|
||||
<p:commandButton value="Filtrer"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-filter" />
|
||||
<h6 class="text-900 font-semibold mb-1">#{activite.titre}</h6>
|
||||
<p class="text-600 text-sm mb-0">#{activite.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques d'activité -->
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-blue-500 mb-2">247</div>
|
||||
<div class="text-900 font-semibold mb-1">Actions Totales</div>
|
||||
<div class="text-600 text-sm">Toutes périodes</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-green-500 mb-2">34</div>
|
||||
<div class="text-900 font-semibold mb-1">Ce Mois-ci</div>
|
||||
<div class="text-600 text-sm">Janvier 2024</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-purple-500 mb-2">15</div>
|
||||
<div class="text-900 font-semibold mb-1">Événements</div>
|
||||
<div class="text-600 text-sm">Participés</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-orange-500 mb-2">8h</div>
|
||||
<div class="text-900 font-semibold mb-1">Temps Connectée</div>
|
||||
<div class="text-600 text-sm">Cette semaine</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-900 font-semibold text-sm">#{activite.dateHeure}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
|
||||
<div class="text-center text-600 text-sm" rendered="#{empty personnelBean.activitesRecentes}">
|
||||
Aucune activité récente
|
||||
</div>
|
||||
|
||||
<!-- Filtres -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h:form id="filtresForm">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="typeActivite" class="block text-900 font-semibold mb-2">Type d'activité</label>
|
||||
<p:selectOneMenu id="typeActivite" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Toutes les activités" itemValue="" />
|
||||
<f:selectItem itemLabel="Connexions" itemValue="connexion" />
|
||||
<f:selectItem itemLabel="Modifications" itemValue="modification" />
|
||||
<f:selectItem itemLabel="Événements" itemValue="evenement" />
|
||||
<f:selectItem itemLabel="Paiements" itemValue="paiement" />
|
||||
<f:selectItem itemLabel="Documents" itemValue="document" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="periodeActivite" class="block text-900 font-semibold mb-2">Période</label>
|
||||
<p:selectOneMenu id="periodeActivite" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Toutes les périodes" itemValue="" />
|
||||
<f:selectItem itemLabel="Aujourd'hui" itemValue="aujourdhui" />
|
||||
<f:selectItem itemLabel="Cette semaine" itemValue="semaine" />
|
||||
<f:selectItem itemLabel="Ce mois-ci" itemValue="mois" />
|
||||
<f:selectItem itemLabel="3 derniers mois" itemValue="trimestre" />
|
||||
<f:selectItem itemLabel="Cette année" itemValue="annee" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="statutActivite" class="block text-900 font-semibold mb-2">Statut</label>
|
||||
<p:selectOneMenu id="statutActivite" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tous les statuts" itemValue="" />
|
||||
<f:selectItem itemLabel="Réussie" itemValue="reussie" />
|
||||
<f:selectItem itemLabel="Échouée" itemValue="echec" />
|
||||
<f:selectItem itemLabel="En attente" itemValue="attente" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="rechercheActivite" class="block text-900 font-semibold mb-2">Rechercher</label>
|
||||
<p:inputText id="rechercheActivite"
|
||||
placeholder="Action, détail..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activités récentes -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-clock mr-2"></i>
|
||||
Activités Récentes
|
||||
</h4>
|
||||
|
||||
<!-- Activité 1 - Connexion -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-green-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-sign-in text-green-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Connexion au système</h6>
|
||||
<p class="text-600 text-sm mb-1">Connexion réussie depuis Chrome sur Windows</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<p:tag value="RÉUSSIE" severity="success" styleClass="text-xs" />
|
||||
<span class="text-500 text-xs">IP: 192.168.1.45</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-900 font-semibold text-sm">il y a 2 heures</div>
|
||||
<div class="text-600 text-xs">18 jan. 2024, 14:30</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activité 2 - Modification profil -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-blue-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-user-edit text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Modification du profil</h6>
|
||||
<p class="text-600 text-sm mb-1">Mise à jour du numéro de téléphone</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<p:tag value="MODIFIÉ" severity="info" styleClass="text-xs" />
|
||||
<span class="text-500 text-xs">Champ: Téléphone</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-900 font-semibold text-sm">il y a 1 jour</div>
|
||||
<div class="text-600 text-xs">17 jan. 2024, 09:15</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activité 3 - Participation événement -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-purple-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-calendar text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Participation à un événement</h6>
|
||||
<p class="text-600 text-sm mb-1">Assemblée Générale Extraordinaire 2024</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<p:tag value="PRÉSENTE" severity="success" styleClass="text-xs" />
|
||||
<span class="text-500 text-xs">Durée: 3h 45min</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-900 font-semibold text-sm">il y a 3 jours</div>
|
||||
<div class="text-600 text-xs">15 jan. 2024, 14:00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activité 4 - Paiement -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-orange-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-credit-card text-orange-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Paiement cotisation</h6>
|
||||
<p class="text-600 text-sm mb-1">Cotisation mensuelle janvier 2024</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<p:tag value="PAYÉ" severity="success" styleClass="text-xs" />
|
||||
<span class="text-500 text-xs">Montant: 25,000 FCFA</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-900 font-semibold text-sm">il y a 1 semaine</div>
|
||||
<div class="text-600 text-xs">11 jan. 2024, 16:22</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activité 5 - Téléchargement document -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-cyan-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-download text-cyan-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Téléchargement de document</h6>
|
||||
<p class="text-600 text-sm mb-1">Rapport financier annuel 2023.pdf</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<p:tag value="TÉLÉCHARGÉ" severity="info" styleClass="text-xs" />
|
||||
<span class="text-500 text-xs">Taille: 2.4 MB</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-900 font-semibold text-sm">il y a 2 semaines</div>
|
||||
<div class="text-600 text-xs">4 jan. 2024, 11:30</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activité 6 - Création ticket -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-pink-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-ticket text-pink-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Création ticket support</h6>
|
||||
<p class="text-600 text-sm mb-1">Problème d'export Excel des rapports</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<p:tag value="CRÉÉ" severity="warning" styleClass="text-xs" />
|
||||
<span class="text-500 text-xs">Ticket #TK-2024-0157</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-900 font-semibold text-sm">il y a 3 semaines</div>
|
||||
<div class="text-600 text-xs">28 déc. 2023, 15:45</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Graphiques d'activité -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="surface-card border-round p-4 h-full">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-chart-line text-blue-500 mr-2"></i>
|
||||
Évolution de l'Activité
|
||||
</h4>
|
||||
|
||||
<div class="surface-100 p-4 border-round text-center">
|
||||
<div class="text-2xl font-bold text-primary mb-2">📊</div>
|
||||
<div class="text-600">Graphique d'activité par jour</div>
|
||||
<div class="text-500 text-sm mt-2">Derniers 30 jours</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-card border-round p-4 h-full">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-chart-pie text-purple-500 mr-2"></i>
|
||||
Répartition par Type
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<div class="text-center mb-3">
|
||||
<div class="text-xl font-bold text-blue-500">35%</div>
|
||||
<div class="text-600 text-sm">Connexions</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="text-center mb-3">
|
||||
<div class="text-xl font-bold text-green-500">25%</div>
|
||||
<div class="text-600 text-sm">Événements</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="text-center mb-3">
|
||||
<div class="text-xl font-bold text-purple-500">20%</div>
|
||||
<div class="text-600 text-sm">Modifications</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="text-center mb-3">
|
||||
<div class="text-xl font-bold text-orange-500">20%</div>
|
||||
<div class="text-600 text-sm">Autres</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 p-3 border-round mt-3">
|
||||
<h6 class="text-900 font-semibold mb-2">Recommandations</h6>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-start mb-2">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Activité régulière détectée</span>
|
||||
</li>
|
||||
<li class="flex align-items-start">
|
||||
<i class="pi pi-info-circle text-blue-500 mr-2 mt-1"></i>
|
||||
<span class="text-700 text-sm">Participez plus aux événements</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sessions de connexion -->
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-mobile mr-2"></i>
|
||||
Sessions de Connexion
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Session active -->
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4 border-2 border-green-500">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-desktop text-green-500 text-xl"></i>
|
||||
<h6 class="text-900 font-semibold mb-0">Session Actuelle</h6>
|
||||
</div>
|
||||
<p:tag value="ACTIVE" severity="success" styleClass="text-xs" />
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<div class="text-600 text-sm mb-1">Navigateur</div>
|
||||
<div class="text-900 font-semibold text-sm">Chrome 120.0</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="text-600 text-sm mb-1">Système</div>
|
||||
<div class="text-900 font-semibold text-sm">Windows 11</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="text-600 text-sm mb-1">IP</div>
|
||||
<div class="text-900 font-semibold text-sm">192.168.1.45</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="text-600 text-sm mb-1">Début</div>
|
||||
<div class="text-900 font-semibold text-sm">14:30</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Session mobile -->
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-mobile text-blue-500 text-xl"></i>
|
||||
<h6 class="text-900 font-semibold mb-0">Session Mobile</h6>
|
||||
</div>
|
||||
<p:tag value="FERMÉE" severity="secondary" styleClass="text-xs" />
|
||||
</div>
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<div class="text-600 text-sm mb-1">Appareil</div>
|
||||
<div class="text-900 font-semibold text-sm">iPhone 14</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="text-600 text-sm mb-1">App</div>
|
||||
<div class="text-900 font-semibold text-sm">UnionFlow v2.1</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="text-600 text-sm mb-1">Dernière activité</div>
|
||||
<div class="text-900 font-semibold text-sm">il y a 2h</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="text-600 text-sm mb-1">Durée</div>
|
||||
<div class="text-900 font-semibold text-sm">45 min</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<p:commandButton value="Voir Toutes les Sessions"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-eye" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
</ui:composition>
|
||||
|
||||
@@ -9,628 +9,78 @@
|
||||
<ui:define name="title">Mon Agenda - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="ui-fluid">
|
||||
|
||||
<!-- En-tête -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-900 font-bold text-4xl mb-2">
|
||||
<i class="pi pi-calendar text-blue-500 mr-3"></i>
|
||||
Mon Agenda
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-0">
|
||||
Organisez votre planning et ne manquez aucun événement important
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Synchroniser"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-sync" />
|
||||
<p:commandButton value="Nouvel Événement"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-plus"
|
||||
onclick="PF('nouvelEvenementDialog').show()" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation calendrier -->
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<p:commandButton icon="pi pi-chevron-left"
|
||||
styleClass="p-button-outlined p-button-rounded" />
|
||||
<h4 class="text-900 font-bold mb-0">Janvier 2024</h4>
|
||||
<p:commandButton icon="pi pi-chevron-right"
|
||||
styleClass="p-button-outlined p-button-rounded" />
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Aujourd'hui"
|
||||
styleClass="p-button-outlined p-button-sm" />
|
||||
<p:commandButton value="Mois"
|
||||
styleClass="p-button-primary p-button-sm" />
|
||||
<p:commandButton value="Semaine"
|
||||
styleClass="p-button-outlined p-button-sm" />
|
||||
<p:commandButton value="Jour"
|
||||
styleClass="p-button-outlined p-button-sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques agenda -->
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-blue-500 mb-2">7</div>
|
||||
<div class="text-900 font-semibold mb-1">Cette Semaine</div>
|
||||
<div class="text-600 text-sm">Événements</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-green-500 mb-2">3</div>
|
||||
<div class="text-900 font-semibold mb-1">Aujourd'hui</div>
|
||||
<div class="text-600 text-sm">Rendez-vous</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-purple-500 mb-2">15</div>
|
||||
<div class="text-900 font-semibold mb-1">Ce Mois</div>
|
||||
<div class="text-600 text-sm">Total</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-orange-500 mb-2">85%</div>
|
||||
<div class="text-900 font-semibold mb-1">Taux Présence</div>
|
||||
<div class="text-600 text-sm">Moyenne</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vue calendrier et événements -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-calendar-plus mr-2"></i>
|
||||
Calendrier Mensuel
|
||||
</h4>
|
||||
|
||||
<!-- Calendrier simplifié -->
|
||||
<div class="surface-100 border-round p-4">
|
||||
<!-- En-tête des jours -->
|
||||
<div class="grid mb-2">
|
||||
<div class="col text-center">
|
||||
<div class="text-600 font-semibold text-sm">Lun</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="text-600 font-semibold text-sm">Mar</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="text-600 font-semibold text-sm">Mer</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="text-600 font-semibold text-sm">Jeu</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="text-600 font-semibold text-sm">Ven</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="text-600 font-semibold text-sm">Sam</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="text-600 font-semibold text-sm">Dim</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Semaine 1 -->
|
||||
<div class="grid mb-2">
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">3</div>
|
||||
<div class="w-0-5rem h-0-5rem border-circle bg-blue-500 mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">5</div>
|
||||
<div class="w-0-5rem h-0-5rem border-circle bg-green-500 mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">6</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">7</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Semaine actuelle -->
|
||||
<div class="grid mb-2">
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">8</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">9</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">10</div>
|
||||
<div class="w-0-5rem h-0-5rem border-circle bg-purple-500 mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">11</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">12</div>
|
||||
<div class="w-0-5rem h-0-5rem border-circle bg-orange-500 mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">13</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">14</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Semaine avec jour actuel -->
|
||||
<div class="grid mb-2">
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">15</div>
|
||||
<div class="w-0-5rem h-0-5rem border-circle bg-red-500 mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">16</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">17</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="bg-primary border-round p-2 cursor-pointer">
|
||||
<div class="text-white font-bold text-sm">18</div>
|
||||
<div class="text-xs text-primary-100">Aujourd'hui</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">19</div>
|
||||
<div class="w-0-5rem h-0-5rem border-circle bg-green-500 mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">20</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">21</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dernières semaines -->
|
||||
<div class="grid mb-2">
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">22</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">23</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">24</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">25</div>
|
||||
<div class="w-0-5rem h-0-5rem border-circle bg-blue-500 mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">26</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">27</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">28</div>
|
||||
<div class="w-0-5rem h-0-5rem border-circle bg-purple-500 mx-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">29</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">30</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center">
|
||||
<div class="border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="text-600 text-sm">31</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col text-center"></div>
|
||||
<div class="col text-center"></div>
|
||||
<div class="col text-center"></div>
|
||||
<div class="col text-center"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Légende -->
|
||||
<div class="flex align-items-center justify-content-center gap-4 mt-3">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="w-0-75rem h-0-75rem border-circle bg-blue-500"></div>
|
||||
<span class="text-600 text-sm">Réunions</span>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="w-0-75rem h-0-75rem border-circle bg-green-500"></div>
|
||||
<span class="text-600 text-sm">Événements</span>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="w-0-75rem h-0-75rem border-circle bg-purple-500"></div>
|
||||
<span class="text-600 text-sm">Formations</span>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="w-0-75rem h-0-75rem border-circle bg-orange-500"></div>
|
||||
<span class="text-600 text-sm">Personnel</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-card border-round p-4 h-full">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-clock mr-2"></i>
|
||||
Aujourd'hui - 18 Janvier
|
||||
</h4>
|
||||
|
||||
<!-- Événement 1 -->
|
||||
<div class="surface-blue-50 border-left-3 border-blue-500 p-3 mb-3">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<h6 class="text-blue-800 font-semibold mb-0">Réunion équipe</h6>
|
||||
<p:tag value="OBLIGATOIRE" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
<div class="text-blue-700 text-sm mb-2">14:00 - 16:00</div>
|
||||
<div class="text-blue-600 text-sm">Salle de conférence, 2ème étage</div>
|
||||
</div>
|
||||
|
||||
<!-- Événement 2 -->
|
||||
<div class="surface-green-50 border-left-3 border-green-500 p-3 mb-3">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<h6 class="text-green-800 font-semibold mb-0">Formation Excel</h6>
|
||||
<p:tag value="OPTIONNEL" severity="success" styleClass="text-xs" />
|
||||
</div>
|
||||
<div class="text-green-700 text-sm mb-2">16:30 - 18:00</div>
|
||||
<div class="text-green-600 text-sm">En ligne - Lien Zoom dans l'email</div>
|
||||
</div>
|
||||
|
||||
<!-- Événement 3 -->
|
||||
<div class="surface-orange-50 border-left-3 border-orange-500 p-3 mb-4">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<h6 class="text-orange-800 font-semibold mb-0">Rappel personnel</h6>
|
||||
<p:tag value="PRIVÉ" severity="warning" styleClass="text-xs" />
|
||||
</div>
|
||||
<div class="text-orange-700 text-sm mb-2">19:00</div>
|
||||
<div class="text-orange-600 text-sm">Appeler Dr. Diallo pour RDV</div>
|
||||
</div>
|
||||
|
||||
<h6 class="text-900 font-semibold mb-3">Prochains événements</h6>
|
||||
|
||||
<!-- Prochain événement 1 -->
|
||||
<div class="surface-100 border-round p-3 mb-2">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<div class="text-900 font-semibold text-sm">Assemblée Générale</div>
|
||||
<div class="text-600 text-xs">25 janvier, 09:00</div>
|
||||
</div>
|
||||
<i class="pi pi-calendar text-blue-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prochain événement 2 -->
|
||||
<div class="surface-100 border-round p-3">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<div class="text-900 font-semibold text-sm">Formation Leadership</div>
|
||||
<div class="text-600 text-xs">28 janvier, 14:00</div>
|
||||
</div>
|
||||
<i class="pi pi-graduation-cap text-purple-500"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Planning de la semaine -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-calendar-times mr-2"></i>
|
||||
Planning de la Semaine
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Lundi -->
|
||||
<div class="col-12 lg:col-7">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<h6 class="text-900 font-semibold mb-3">Lundi 15 Janvier</h6>
|
||||
<div class="surface-red-50 border-left-3 border-red-500 p-2 mb-2">
|
||||
<div class="text-red-800 font-semibold text-sm">10:00 - Cotisation en retard</div>
|
||||
<div class="text-red-600 text-xs">Rappel automatique système</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mardi -->
|
||||
<div class="col-12 lg:col-7">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<h6 class="text-900 font-semibold mb-3">Mardi 16 Janvier</h6>
|
||||
<div class="text-600 text-sm">Aucun événement prévu</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mercredi -->
|
||||
<div class="col-12 lg:col-7">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<h6 class="text-900 font-semibold mb-3">Mercredi 17 Janvier</h6>
|
||||
<div class="text-600 text-sm">Aucun événement prévu</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Jeudi (aujourd'hui) -->
|
||||
<div class="col-12 lg:col-7">
|
||||
<div class="surface-primary-50 border-round p-3 mb-3 border-2 border-primary">
|
||||
<h6 class="text-primary font-bold mb-3">Jeudi 18 Janvier (Aujourd'hui)</h6>
|
||||
<div class="surface-blue-50 border-left-3 border-blue-500 p-2 mb-2">
|
||||
<div class="text-blue-800 font-semibold text-sm">14:00 - Réunion équipe</div>
|
||||
<div class="text-blue-600 text-xs">Salle de conférence</div>
|
||||
</div>
|
||||
<div class="surface-green-50 border-left-3 border-green-500 p-2 mb-2">
|
||||
<div class="text-green-800 font-semibold text-sm">16:30 - Formation Excel</div>
|
||||
<div class="text-green-600 text-xs">En ligne</div>
|
||||
</div>
|
||||
<div class="surface-orange-50 border-left-3 border-orange-500 p-2">
|
||||
<div class="text-orange-800 font-semibold text-sm">19:00 - Rappel personnel</div>
|
||||
<div class="text-orange-600 text-xs">Appel Dr. Diallo</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vendredi -->
|
||||
<div class="col-12 lg:col-7">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<h6 class="text-900 font-semibold mb-3">Vendredi 19 Janvier</h6>
|
||||
<div class="surface-green-50 border-left-3 border-green-500 p-2">
|
||||
<div class="text-green-800 font-semibold text-sm">15:00 - Célébration nouvel an</div>
|
||||
<div class="text-green-600 text-xs">Événement associatif</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions rapides -->
|
||||
<div class="col-12 lg:col-5">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-3">Actions Rapides</h6>
|
||||
|
||||
<p:commandButton value="Synchroniser avec Outlook"
|
||||
styleClass="p-button-outlined w-full mb-2"
|
||||
icon="pi pi-sync" />
|
||||
|
||||
<p:commandButton value="Exporter planning PDF"
|
||||
styleClass="p-button-outlined w-full mb-2"
|
||||
icon="pi pi-download" />
|
||||
|
||||
<p:commandButton value="Partager disponibilités"
|
||||
styleClass="p-button-outlined w-full mb-2"
|
||||
icon="pi pi-share-alt" />
|
||||
|
||||
<p:commandButton value="Configurer rappels"
|
||||
styleClass="p-button-outlined w-full"
|
||||
icon="pi pi-bell" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Calendriers synchronisés -->
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-sync mr-2"></i>
|
||||
Calendriers Synchronisés
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center">
|
||||
<i class="pi pi-microsoft text-3xl text-blue-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Outlook</h6>
|
||||
<p class="text-600 text-sm mb-3">Dernière sync: il y a 15 min</p>
|
||||
<p:tag value="CONNECTÉ" severity="success" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center">
|
||||
<i class="pi pi-google text-3xl text-red-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Google Calendar</h6>
|
||||
<p class="text-600 text-sm mb-3">Dernière sync: il y a 2h</p>
|
||||
<p:tag value="CONNECTÉ" severity="success" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center">
|
||||
<i class="pi pi-apple text-3xl text-600 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">iCloud</h6>
|
||||
<p class="text-600 text-sm mb-3">Non configuré</p>
|
||||
<p:tag value="DÉCONNECTÉ" severity="secondary" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-plus-circle text-3xl text-primary mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Ajouter</h6>
|
||||
<p class="text-600 text-sm mb-3">Nouveau calendrier</p>
|
||||
<p:commandButton value="Configurer"
|
||||
styleClass="p-button-outlined p-button-sm" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Nouvel Événement -->
|
||||
<p:dialog id="nouvelEvenementDialog"
|
||||
widgetVar="nouvelEvenementDialog"
|
||||
header="Créer un Nouvel Événement"
|
||||
modal="true"
|
||||
width="800"
|
||||
styleClass="surface-0">
|
||||
<h:form id="nouvelEvenementForm">
|
||||
<div class="ui-fluid">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12">
|
||||
<label for="titreEvenement" class="block text-900 font-semibold mb-2">Titre *</label>
|
||||
<p:inputText id="titreEvenement"
|
||||
placeholder="Nom de l'événement"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="dateDebut" class="block text-900 font-semibold mb-2">Date de début *</label>
|
||||
<p:calendar id="dateDebut"
|
||||
showTime="true"
|
||||
pattern="dd/MM/yyyy HH:mm"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="dateFin" class="block text-900 font-semibold mb-2">Date de fin *</label>
|
||||
<p:calendar id="dateFin"
|
||||
showTime="true"
|
||||
pattern="dd/MM/yyyy HH:mm"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="categorieEvenement" class="block text-900 font-semibold mb-2">Catégorie</label>
|
||||
<p:selectOneMenu id="categorieEvenement" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Sélectionnez" itemValue="" />
|
||||
<f:selectItem itemLabel="Réunion" itemValue="reunion" />
|
||||
<f:selectItem itemLabel="Formation" itemValue="formation" />
|
||||
<f:selectItem itemLabel="Événement" itemValue="evenement" />
|
||||
<f:selectItem itemLabel="Personnel" itemValue="personnel" />
|
||||
<f:selectItem itemLabel="Rappel" itemValue="rappel" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="prioriteEvenement" class="block text-900 font-semibold mb-2">Priorité</label>
|
||||
<p:selectOneMenu id="prioriteEvenement" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Normale" itemValue="normale" />
|
||||
<f:selectItem itemLabel="Haute" itemValue="haute" />
|
||||
<f:selectItem itemLabel="Urgente" itemValue="urgente" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="lieuEvenement" class="block text-900 font-semibold mb-2">Lieu</label>
|
||||
<p:inputText id="lieuEvenement"
|
||||
placeholder="Adresse, salle ou lien de visioconférence"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="descriptionEvenement" class="block text-900 font-semibold mb-2">Description</label>
|
||||
<p:inputTextarea id="descriptionEvenement"
|
||||
rows="4"
|
||||
placeholder="Détails de l'événement, ordre du jour..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="rappelEvenement" />
|
||||
<label for="rappelEvenement" class="ml-2">Activer les rappels</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-4">
|
||||
<p:commandButton value="Annuler"
|
||||
styleClass="p-button-outlined"
|
||||
onclick="PF('nouvelEvenementDialog').hide()"
|
||||
type="button" />
|
||||
<p:commandButton value="Créer l'Événement"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-save" />
|
||||
</div>
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-calendar text-blue-500" />
|
||||
<ui:param name="title" value="Mon Agenda" />
|
||||
<ui:param name="description" value="Organisez votre planning et ne manquez aucun événement important" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActions">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Synchroniser" />
|
||||
<ui:param name="icon" value="pi pi-sync" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Nouvel Événement" />
|
||||
<ui:param name="icon" value="pi pi-plus" />
|
||||
<ui:param name="onclick" value="PF('nouvelEvenementDialog').show();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<!-- Statistiques agenda -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="7" />
|
||||
<ui:param name="label" value="Cette Semaine" />
|
||||
<ui:param name="subLabel" value="Événements" />
|
||||
<ui:param name="icon" value="pi pi-calendar" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="3" />
|
||||
<ui:param name="label" value="Aujourd'hui" />
|
||||
<ui:param name="subLabel" value="Rendez-vous" />
|
||||
<ui:param name="icon" value="pi pi-clock" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.evenementsParticipes}" />
|
||||
<ui:param name="label" value="Ce Mois" />
|
||||
<ui:param name="subLabel" value="Total" />
|
||||
<ui:param name="icon" value="pi pi-calendar-times" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.tauxParticipation}%" />
|
||||
<ui:param name="label" value="Taux Présence" />
|
||||
<ui:param name="subLabel" value="Moyenne" />
|
||||
<ui:param name="icon" value="pi pi-chart-bar" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Calendrier -->
|
||||
<div class="card">
|
||||
<h5>Calendrier Mensuel</h5>
|
||||
<p:schedule value="#{evenementsBean.evenementsCalendrier}"
|
||||
widgetVar="scheduleWidget"
|
||||
view="month"
|
||||
locale="fr"
|
||||
timeZone="Africa/Dakar"
|
||||
styleClass="w-full"
|
||||
height="600">
|
||||
<p:ajax event="dateSelect" listener="#{evenementsBean.onDateSelect}" />
|
||||
<p:ajax event="eventSelect" listener="#{evenementsBean.onEventSelect}" />
|
||||
</p:schedule>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
</ui:composition>
|
||||
|
||||
@@ -9,592 +9,137 @@
|
||||
<ui:define name="title">Mes Documents - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="ui-fluid">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-folder text-green-500" />
|
||||
<ui:param name="title" value="Mes Documents" />
|
||||
<ui:param name="description" value="Gérez vos documents personnels et accédez aux fichiers partagés" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActions">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Nouveau Dossier" />
|
||||
<ui:param name="icon" value="pi pi-folder-plus" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Télécharger" />
|
||||
<ui:param name="icon" value="pi pi-upload" />
|
||||
<ui:param name="onclick" value="PF('uploadDialog').show();" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<!-- Statistiques stockage -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.documents != null ? personnelBean.documents.size() : 0}" />
|
||||
<ui:param name="label" value="Documents" />
|
||||
<ui:param name="subLabel" value="Personnels" />
|
||||
<ui:param name="icon" value="pi pi-file" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<!-- En-tête -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-900 font-bold text-4xl mb-2">
|
||||
<i class="pi pi-folder text-green-500 mr-3"></i>
|
||||
Mes Documents
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-0">
|
||||
Gérez vos documents personnels et accédez aux fichiers partagés
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Nouveau Dossier"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-folder-plus" />
|
||||
<p:commandButton value="Télécharger"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-upload"
|
||||
onclick="PF('uploadDialog').show()" />
|
||||
</div>
|
||||
</div>
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="2.4 GB" />
|
||||
<ui:param name="label" value="Utilisé" />
|
||||
<ui:param name="subLabel" value="Sur 5 GB" />
|
||||
<ui:param name="icon" value="pi pi-database" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques stockage -->
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-blue-500 mb-2">67</div>
|
||||
<div class="text-900 font-semibold mb-1">Documents</div>
|
||||
<div class="text-600 text-sm">Personnels</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-green-500 mb-2">2.4 GB</div>
|
||||
<div class="text-900 font-semibold mb-1">Utilisé</div>
|
||||
<div class="text-600 text-sm">Sur 5 GB</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-purple-500 mb-2">156</div>
|
||||
<div class="text-900 font-semibold mb-1">Partagés</div>
|
||||
<div class="text-600 text-sm">Accès autorisé</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-orange-500 mb-2">12</div>
|
||||
<div class="text-900 font-semibold mb-1">En Attente</div>
|
||||
<div class="text-600 text-sm">Validation</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Liste des documents -->
|
||||
<div class="card">
|
||||
<h5>Mes Documents</h5>
|
||||
|
||||
<p:dataTable value="#{personnelBean.documents}" var="document"
|
||||
emptyMessage="Aucun document disponible"
|
||||
styleClass="p-datatable-sm">
|
||||
|
||||
<p:column headerText="Nom">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-file text-lg"></i>
|
||||
<span class="font-semibold">#{document.nom}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation et filtres -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<!-- Fil d'Ariane -->
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-home text-600"></i>
|
||||
<span class="text-600">/</span>
|
||||
<span class="text-primary cursor-pointer">Mes Documents</span>
|
||||
<span class="text-600">/</span>
|
||||
<span class="text-900 font-semibold">Dossier Personnel</span>
|
||||
</div>
|
||||
|
||||
<!-- Options d'affichage -->
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton icon="pi pi-th-large"
|
||||
styleClass="p-button-outlined p-button-sm" />
|
||||
<p:commandButton icon="pi pi-list"
|
||||
styleClass="p-button-primary p-button-sm" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h:form id="filtresForm">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="typeDocument" class="block text-900 font-semibold mb-2">Type</label>
|
||||
<p:selectOneMenu id="typeDocument" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tous les types" itemValue="" />
|
||||
<f:selectItem itemLabel="Documents (PDF, DOC)" itemValue="document" />
|
||||
<f:selectItem itemLabel="Images (JPG, PNG)" itemValue="image" />
|
||||
<f:selectItem itemLabel="Tableurs (XLS, CSV)" itemValue="tableur" />
|
||||
<f:selectItem itemLabel="Présentations (PPT)" itemValue="presentation" />
|
||||
<f:selectItem itemLabel="Archives (ZIP, RAR)" itemValue="archive" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="categorieDocument" class="block text-900 font-semibold mb-2">Catégorie</label>
|
||||
<p:selectOneMenu id="categorieDocument" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Toutes les catégories" itemValue="" />
|
||||
<f:selectItem itemLabel="Personnel" itemValue="personnel" />
|
||||
<f:selectItem itemLabel="Professionnel" itemValue="professionnel" />
|
||||
<f:selectItem itemLabel="Association" itemValue="association" />
|
||||
<f:selectItem itemLabel="Formation" itemValue="formation" />
|
||||
<f:selectItem itemLabel="Administratif" itemValue="administratif" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="periodeDocument" class="block text-900 font-semibold mb-2">Période</label>
|
||||
<p:selectOneMenu id="periodeDocument" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Toutes les périodes" itemValue="" />
|
||||
<f:selectItem itemLabel="Aujourd'hui" itemValue="aujourdhui" />
|
||||
<f:selectItem itemLabel="Cette semaine" itemValue="semaine" />
|
||||
<f:selectItem itemLabel="Ce mois-ci" itemValue="mois" />
|
||||
<f:selectItem itemLabel="Cette année" itemValue="annee" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="rechercheDocument" class="block text-900 font-semibold mb-2">Rechercher</label>
|
||||
<p:inputText id="rechercheDocument"
|
||||
placeholder="Nom, contenu..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Type">
|
||||
<span>#{document.type}</span>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date">
|
||||
<span>#{document.dateCreation}</span>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Taille">
|
||||
<span>#{document.taille} bytes</span>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" styleClass="text-center">
|
||||
<div class="flex justify-content-center gap-1">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
title="Voir"
|
||||
styleClass="p-button-sm p-button-rounded p-button-info" />
|
||||
<p:commandButton icon="pi pi-download"
|
||||
title="Télécharger"
|
||||
styleClass="p-button-sm p-button-rounded p-button-success" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</div>
|
||||
|
||||
<!-- Accès rapide -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-star mr-2"></i>
|
||||
Accès Rapide
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-clock text-3xl text-blue-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Récents</h6>
|
||||
<p class="text-600 text-sm mb-0">Documents modifiés récemment</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-share-alt text-3xl text-green-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Partagés</h6>
|
||||
<p class="text-600 text-sm mb-0">Documents partagés avec vous</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-star-fill text-3xl text-yellow-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Favoris</h6>
|
||||
<p class="text-600 text-sm mb-0">Vos documents marqués</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200">
|
||||
<i class="pi pi-trash text-3xl text-red-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Corbeille</h6>
|
||||
<p class="text-600 text-sm mb-0">Documents supprimés</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Arborescence et documents -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-card border-round p-4 h-full">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-sitemap mr-2"></i>
|
||||
Mes Dossiers
|
||||
</h4>
|
||||
|
||||
<!-- Dossier racine -->
|
||||
<div class="surface-100 border-round p-3 mb-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-folder text-blue-500"></i>
|
||||
<span class="text-900 font-semibold text-sm">Documents Personnels</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sous-dossiers -->
|
||||
<div class="ml-3">
|
||||
<div class="surface-100 border-round p-2 mb-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-folder text-green-500"></i>
|
||||
<span class="text-900 text-sm">Certificats</span>
|
||||
<p:tag value="8" severity="info" styleClass="text-xs ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-2 mb-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-folder text-purple-500"></i>
|
||||
<span class="text-900 text-sm">Formations</span>
|
||||
<p:tag value="15" severity="info" styleClass="text-xs ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-2 mb-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-folder text-orange-500"></i>
|
||||
<span class="text-900 text-sm">Rapports</span>
|
||||
<p:tag value="23" severity="info" styleClass="text-xs ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-2 mb-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-folder text-cyan-500"></i>
|
||||
<span class="text-900 text-sm">Images</span>
|
||||
<p:tag value="34" severity="info" styleClass="text-xs ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dossiers partagés -->
|
||||
<div class="surface-100 border-round p-3 mb-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-users text-blue-500"></i>
|
||||
<span class="text-900 font-semibold text-sm">Partagés avec moi</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ml-3">
|
||||
<div class="surface-100 border-round p-2 mb-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-share-alt text-green-500"></i>
|
||||
<span class="text-900 text-sm">Équipe Admin</span>
|
||||
<p:tag value="45" severity="success" styleClass="text-xs ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-2 cursor-pointer hover:surface-200 transition-duration-200">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-share-alt text-purple-500"></i>
|
||||
<span class="text-900 text-sm">Ressources Communes</span>
|
||||
<p:tag value="78" severity="help" styleClass="text-xs ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-9">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-folder-open mr-2"></i>
|
||||
Dossier Personnel / Certificats
|
||||
</h4>
|
||||
|
||||
<!-- Document 1 -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-red-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-file-pdf text-red-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Certificat_Formation_Leadership_2023.pdf</h6>
|
||||
<div class="flex align-items-center gap-3 mb-1">
|
||||
<span class="text-600 text-sm">Modifié le 15 déc. 2023</span>
|
||||
<span class="text-600 text-sm">2.4 MB</span>
|
||||
<p:tag value="PERSONNEL" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-700 text-sm mb-0">
|
||||
Certificat de completion de la formation en leadership obtenu en décembre 2023
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Prévisualiser" />
|
||||
<p:commandButton icon="pi pi-download"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Télécharger" />
|
||||
<p:commandButton icon="pi pi-ellipsis-v"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Plus d'options" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document 2 -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-blue-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-file text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Fiche_Adhesion_2024.docx</h6>
|
||||
<div class="flex align-items-center gap-3 mb-1">
|
||||
<span class="text-600 text-sm">Modifié le 8 jan. 2024</span>
|
||||
<span class="text-600 text-sm">156 KB</span>
|
||||
<p:tag value="ASSOCIATION" severity="success" styleClass="text-xs" />
|
||||
<i class="pi pi-star-fill text-yellow-500" title="Favori"></i>
|
||||
</div>
|
||||
<p class="text-700 text-sm mb-0">
|
||||
Formulaire d'adhésion pour l'année 2024 avec informations mises à jour
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Prévisualiser" />
|
||||
<p:commandButton icon="pi pi-download"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Télécharger" />
|
||||
<p:commandButton icon="pi pi-ellipsis-v"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Plus d'options" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document 3 -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-green-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-file-excel text-green-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Budget_Personnel_2024.xlsx</h6>
|
||||
<div class="flex align-items-center gap-3 mb-1">
|
||||
<span class="text-600 text-sm">Modifié le 3 jan. 2024</span>
|
||||
<span class="text-600 text-sm">89 KB</span>
|
||||
<p:tag value="PERSONNEL" severity="info" styleClass="text-xs" />
|
||||
<p:tag value="CONFIDENTIEL" severity="danger" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-700 text-sm mb-0">
|
||||
Feuille de calcul pour la gestion du budget personnel et des cotisations
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Prévisualiser" />
|
||||
<p:commandButton icon="pi pi-download"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Télécharger" />
|
||||
<p:commandButton icon="pi pi-ellipsis-v"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Plus d'options" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document 4 -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-purple-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-image text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Photo_Evenement_AG2023.jpg</h6>
|
||||
<div class="flex align-items-center gap-3 mb-1">
|
||||
<span class="text-600 text-sm">Modifié le 28 nov. 2023</span>
|
||||
<span class="text-600 text-sm">3.2 MB</span>
|
||||
<p:tag value="PARTAGÉ" severity="help" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-700 text-sm mb-0">
|
||||
Photo de groupe prise lors de l'assemblée générale 2023
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Prévisualiser" />
|
||||
<p:commandButton icon="pi pi-download"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Télécharger" />
|
||||
<p:commandButton icon="pi pi-ellipsis-v"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Plus d'options" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document 5 - En attente -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 opacity-70 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-orange-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-file text-orange-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Demande_Conge_Janvier.pdf</h6>
|
||||
<div class="flex align-items-center gap-3 mb-1">
|
||||
<span class="text-600 text-sm">Modifié le 10 jan. 2024</span>
|
||||
<span class="text-600 text-sm">245 KB</span>
|
||||
<p:tag value="EN ATTENTE" severity="warning" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-700 text-sm mb-0">
|
||||
Demande de congé en attente de validation par l'administrateur
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton icon="pi pi-clock"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="En attente" />
|
||||
<p:commandButton icon="pi pi-ellipsis-v"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Plus d'options" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Utilisation stockage -->
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-chart-pie mr-2"></i>
|
||||
Utilisation du Stockage
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-8">
|
||||
<!-- Barre de progression -->
|
||||
<div class="mb-4">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<span class="text-900 font-semibold">Espace utilisé: 2.4 GB sur 5 GB</span>
|
||||
<span class="text-600 text-sm">48% utilisé</span>
|
||||
</div>
|
||||
<div class="surface-300 border-round" style="height: 1rem">
|
||||
<div class="bg-primary border-round h-full" style="width: 48%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Répartition par type -->
|
||||
<div class="grid">
|
||||
<div class="col-6 lg:col-3">
|
||||
<div class="text-center">
|
||||
<div class="text-xl font-bold text-red-500">35%</div>
|
||||
<div class="text-600 text-sm">Documents PDF</div>
|
||||
<div class="text-500 text-xs">840 MB</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 lg:col-3">
|
||||
<div class="text-center">
|
||||
<div class="text-xl font-bold text-blue-500">28%</div>
|
||||
<div class="text-600 text-sm">Images</div>
|
||||
<div class="text-500 text-xs">672 MB</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 lg:col-3">
|
||||
<div class="text-center">
|
||||
<div class="text-xl font-bold text-green-500">22%</div>
|
||||
<div class="text-600 text-sm">Tableurs</div>
|
||||
<div class="text-500 text-xs">528 MB</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6 lg:col-3">
|
||||
<div class="text-center">
|
||||
<div class="text-xl font-bold text-purple-500">15%</div>
|
||||
<div class="text-600 text-sm">Autres</div>
|
||||
<div class="text-500 text-xs">360 MB</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-3">Optimisations</h6>
|
||||
|
||||
<div class="surface-orange-50 border-left-3 border-orange-500 p-3 mb-3">
|
||||
<h6 class="text-orange-800 font-semibold mb-2">
|
||||
<i class="pi pi-exclamation-triangle mr-2"></i>Attention
|
||||
</h6>
|
||||
<p class="text-orange-700 text-sm mb-0">
|
||||
Vous approchez de la limite de stockage.
|
||||
Supprimez des fichiers ou augmentez votre quota.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p:commandButton value="Nettoyer la corbeille"
|
||||
styleClass="p-button-outlined w-full mb-2"
|
||||
icon="pi pi-trash" />
|
||||
|
||||
<p:commandButton value="Augmenter le quota"
|
||||
styleClass="p-button-primary w-full"
|
||||
icon="pi pi-plus-circle" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Upload -->
|
||||
<!-- Dialog Upload -->
|
||||
<h:form id="formUpload">
|
||||
<p:dialog id="uploadDialog"
|
||||
widgetVar="uploadDialog"
|
||||
header="Télécharger des Documents"
|
||||
modal="true"
|
||||
width="700"
|
||||
styleClass="surface-0">
|
||||
<h:form id="uploadForm" enctype="multipart/form-data">
|
||||
<div class="ui-fluid">
|
||||
resizable="false"
|
||||
style="width: 90vw; max-width: 700px;">
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<label for="dossierDestination" class="block text-900 font-semibold mb-2">Dossier de destination</label>
|
||||
<p:outputLabel for="dossierDestination" value="Dossier de destination" />
|
||||
<p:selectOneMenu id="dossierDestination" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Documents Personnels" itemValue="personnel" />
|
||||
<f:selectItem itemLabel="Certificats" itemValue="certificats" />
|
||||
<f:selectItem itemLabel="Formations" itemValue="formations" />
|
||||
<f:selectItem itemLabel="Rapports" itemValue="rapports" />
|
||||
<f:selectItem itemLabel="Images" itemValue="images" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<label for="categorieUpload" class="block text-900 font-semibold mb-2">Catégorie</label>
|
||||
<p:selectOneMenu id="categorieUpload" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Personnel" itemValue="personnel" />
|
||||
<f:selectItem itemLabel="Professionnel" itemValue="professionnel" />
|
||||
<f:selectItem itemLabel="Association" itemValue="association" />
|
||||
<f:selectItem itemLabel="Formation" itemValue="formation" />
|
||||
<f:selectItem itemLabel="Administratif" itemValue="administratif" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="block text-900 font-semibold mb-2">Fichiers à télécharger</label>
|
||||
<p:fileUpload mode="advanced"
|
||||
<p:outputLabel for="fichierUpload" value="Fichier" />
|
||||
<p:fileUpload id="fichierUpload"
|
||||
mode="advanced"
|
||||
multiple="true"
|
||||
uploadLabel="Télécharger"
|
||||
cancelLabel="Annuler"
|
||||
chooseLabel="Choisir les fichiers"
|
||||
dragDropSupport="true"
|
||||
sizeLimit="10485760"
|
||||
allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|docx?|xlsx?|pptx?)$/"
|
||||
styleClass="w-full" />
|
||||
<small class="text-500">Formats acceptés: Images, PDF, Office. Taille max: 10MB par fichier</small>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="descriptionUpload" class="block text-900 font-semibold mb-2">Description (optionnel)</label>
|
||||
<p:inputTextarea id="descriptionUpload"
|
||||
rows="3"
|
||||
placeholder="Description des documents téléchargés..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="partageUpload" />
|
||||
<label for="partageUpload" class="ml-2">Partager avec l'équipe d'administration</label>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-4">
|
||||
<p:commandButton value="Annuler"
|
||||
styleClass="p-button-outlined"
|
||||
onclick="PF('uploadDialog').hide()"
|
||||
type="button" />
|
||||
<p:commandButton value="Télécharger"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-upload" />
|
||||
allowTypes="/(\.|\/)(gif|jpe?g|png|pdf|docx?|xlsx?|pptx?)$/" />
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<f:facet name="footer">
|
||||
<div class="flex justify-content-end gap-2">
|
||||
<p:commandButton value="Annuler"
|
||||
styleClass="p-button-outlined"
|
||||
onclick="PF('uploadDialog').hide();"
|
||||
type="button" />
|
||||
<p:commandButton value="Télécharger"
|
||||
icon="pi pi-upload"
|
||||
styleClass="p-button-primary"
|
||||
action="#{personnelBean.actualiser}" />
|
||||
</div>
|
||||
</f:facet>
|
||||
</p:dialog>
|
||||
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
</ui:composition>
|
||||
|
||||
@@ -31,7 +31,10 @@
|
||||
icon="pi pi-sort" />
|
||||
<p:commandButton value="Tout nettoyer"
|
||||
styleClass="p-button-secondary"
|
||||
icon="pi pi-trash" />
|
||||
icon="pi pi-trash"
|
||||
action="#{favorisBean.nettoyerTousFavoris}"
|
||||
update="@form"
|
||||
process="@this" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -39,28 +42,28 @@
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-yellow-500 mb-2">23</div>
|
||||
<div class="text-2xl font-bold text-yellow-500 mb-2">#{favorisBean.totalFavoris}</div>
|
||||
<div class="text-900 font-semibold mb-1">Favoris</div>
|
||||
<div class="text-600 text-sm">Total</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-blue-500 mb-2">8</div>
|
||||
<div class="text-2xl font-bold text-blue-500 mb-2">#{favorisBean.totalPages}</div>
|
||||
<div class="text-900 font-semibold mb-1">Pages</div>
|
||||
<div class="text-600 text-sm">Fonctionnalités</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-green-500 mb-2">12</div>
|
||||
<div class="text-2xl font-bold text-green-500 mb-2">#{favorisBean.totalDocuments}</div>
|
||||
<div class="text-900 font-semibold mb-1">Documents</div>
|
||||
<div class="text-600 text-sm">Fichiers</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-purple-500 mb-2">3</div>
|
||||
<div class="text-2xl font-bold text-purple-500 mb-2">#{favorisBean.totalContacts}</div>
|
||||
<div class="text-900 font-semibold mb-1">Contacts</div>
|
||||
<div class="text-600 text-sm">Personnes</div>
|
||||
</div>
|
||||
@@ -80,21 +83,31 @@
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Favori 1 - Page la plus utilisée -->
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-blue-50 hover:surface-blue-100 border-round p-4 cursor-pointer transition-duration-200 border-2 border-blue-500">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<i class="pi pi-chart-bar text-blue-600 text-2xl"></i>
|
||||
<p:tag value="PLUS UTILISÉ" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
<h6 class="text-blue-800 font-bold mb-2">Mes Activités</h6>
|
||||
<p class="text-blue-600 text-sm mb-2">Historique et suivi de vos actions</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-clock text-blue-500"></i>
|
||||
<span class="text-blue-600 text-xs">Utilisé il y a 5 min</span>
|
||||
<ui:repeat value="#{favorisBean.pagesFavorites}" var="page" varStatus="status">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-#{page.couleur}-50 hover:surface-#{page.couleur}-100 border-round p-4 cursor-pointer transition-duration-200 border-2 border-#{page.couleur}-500">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<i class="pi #{page.icon} text-#{page.couleur}-600 text-2xl"></i>
|
||||
<p:tag value="#{page.estPlusUtilise ? 'PLUS UTILISÉ' : ''}" severity="info" styleClass="text-xs" rendered="#{page.estPlusUtilise}" />
|
||||
<i class="pi pi-star-fill text-yellow-500" rendered="#{!page.estPlusUtilise}"></i>
|
||||
</div>
|
||||
<h6 class="text-#{page.couleur}-800 font-bold mb-2">#{page.titre}</h6>
|
||||
<p class="text-#{page.couleur}-600 text-sm mb-2">#{page.description}</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-clock text-#{page.couleur}-500"></i>
|
||||
<span class="text-#{page.couleur}-600 text-xs">#{page.derniereVisite}</span>
|
||||
</div>
|
||||
<div class="flex justify-content-end mt-2">
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm p-button-rounded"
|
||||
title="Retirer des favoris"
|
||||
action="#{favorisBean.retirerPageFavorite(page.id)}"
|
||||
update="@form"
|
||||
process="@this" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
|
||||
<!-- Favori 2 -->
|
||||
<div class="col-12 lg:col-3">
|
||||
@@ -158,74 +171,32 @@
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Page favorite 1 -->
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<ui:repeat value="#{favorisBean.pagesFavorites}" var="page" varStatus="status">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi #{page.icon} text-#{page.couleur}-500 text-xl"></i>
|
||||
<h6 class="text-900 font-semibold mb-0">#{page.titre}</h6>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm p-button-rounded"
|
||||
title="Retirer des favoris"
|
||||
action="#{favorisBean.retirerPageFavorite(page.id)}"
|
||||
update="@form"
|
||||
process="@this" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-2">#{page.description}</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-chart-bar text-blue-500 text-xl"></i>
|
||||
<h6 class="text-900 font-semibold mb-0">Rapports Financiers</h6>
|
||||
<p:tag value="#{page.categorie}" severity="success" styleClass="text-xs" />
|
||||
<span class="text-500 text-xs">#{page.nbVisites} visite#{page.nbVisites > 1 ? 's' : ''} cette semaine</span>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm p-button-rounded"
|
||||
title="Retirer des favoris" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-2">Consultez vos rapports financiers personnels</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<p:tag value="FINANCE" severity="success" styleClass="text-xs" />
|
||||
<span class="text-500 text-xs">3 visites cette semaine</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page favorite 2 -->
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-graduation-cap text-purple-500 text-xl"></i>
|
||||
<h6 class="text-900 font-semibold mb-0">Mes Formations</h6>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm p-button-rounded"
|
||||
title="Retirer des favoris" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-2">Catalogue et suivi de vos formations</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<p:tag value="FORMATION" severity="help" styleClass="text-xs" />
|
||||
<span class="text-500 text-xs">1 visite cette semaine</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page favorite 3 -->
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="pi pi-book text-green-500 text-xl"></i>
|
||||
<h6 class="text-900 font-semibold mb-0">Guide Utilisateur</h6>
|
||||
</div>
|
||||
<div class="flex gap-1">
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm p-button-rounded"
|
||||
title="Retirer des favoris" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-600 text-sm mb-2">Documentation et aide à l'utilisation</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<p:tag value="AIDE" severity="info" styleClass="text-xs" />
|
||||
<span class="text-500 text-xs">5 visites cette semaine</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
@@ -246,92 +217,38 @@
|
||||
Documents Favoris
|
||||
</h4>
|
||||
|
||||
<!-- Document favori 1 -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-red-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-file-pdf text-red-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Certificat_Formation_Leadership_2023.pdf</h6>
|
||||
<div class="flex align-items-center gap-3 mb-1">
|
||||
<span class="text-600 text-sm">2.4 MB</span>
|
||||
<span class="text-600 text-sm">Ajouté aux favoris le 15 déc. 2023</span>
|
||||
<p:tag value="CERTIFICAT" severity="success" styleClass="text-xs" />
|
||||
<ui:repeat value="#{favorisBean.documentsFavoris}" var="doc">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-red-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-file-#{doc.type == 'PDF' ? 'pdf' : doc.type == 'XLSX' ? 'excel' : 'file'} text-red-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">#{doc.nom}</h6>
|
||||
<div class="flex align-items-center gap-3 mb-1">
|
||||
<span class="text-600 text-sm">#{doc.tailleFormatee}</span>
|
||||
<span class="text-600 text-sm">Ajouté aux favoris le #{doc.dateAjout}</span>
|
||||
<p:tag value="#{doc.categorie}" severity="success" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-700 text-sm mb-0">#{doc.description}</p>
|
||||
</div>
|
||||
<p class="text-700 text-sm mb-0">Certification de leadership obtenue en 2023</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<i class="pi pi-star-fill text-yellow-500 text-xl"></i>
|
||||
<p:commandButton icon="pi pi-download"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Télécharger" />
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm"
|
||||
title="Retirer des favoris" />
|
||||
<div class="flex gap-2">
|
||||
<i class="pi pi-star-fill text-yellow-500 text-xl"></i>
|
||||
<p:commandButton icon="pi pi-download"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Télécharger" />
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm"
|
||||
title="Retirer des favoris"
|
||||
action="#{favorisBean.retirerDocumentFavorite(doc.id)}"
|
||||
update="@form"
|
||||
process="@this" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document favori 2 -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-green-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-file-excel text-green-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Budget_Personnel_2024.xlsx</h6>
|
||||
<div class="flex align-items-center gap-3 mb-1">
|
||||
<span class="text-600 text-sm">89 KB</span>
|
||||
<span class="text-600 text-sm">Ajouté aux favoris le 3 jan. 2024</span>
|
||||
<p:tag value="BUDGET" severity="warning" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-700 text-sm mb-0">Feuille de calcul pour la gestion budgétaire</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<i class="pi pi-star-fill text-yellow-500 text-xl"></i>
|
||||
<p:commandButton icon="pi pi-download"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Télécharger" />
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm"
|
||||
title="Retirer des favoris" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Document favori 3 -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-blue-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-file text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Reglement_Interieur_2024.docx</h6>
|
||||
<div class="flex align-items-center gap-3 mb-1">
|
||||
<span class="text-600 text-sm">245 KB</span>
|
||||
<span class="text-600 text-sm">Ajouté aux favoris le 28 déc. 2023</span>
|
||||
<p:tag value="RÈGLEMENT" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-700 text-sm mb-0">Règlement intérieur de l'association mis à jour</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<i class="pi pi-star-fill text-yellow-500 text-xl"></i>
|
||||
<p:commandButton icon="pi pi-download"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
title="Télécharger" />
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm"
|
||||
title="Retirer des favoris" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -346,71 +263,36 @@
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Contact favori 1 -->
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-blue-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-user text-blue-600 text-xl"></i>
|
||||
<ui:repeat value="#{favorisBean.contactsFavoris}" var="contact">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-blue-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-user text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">#{contact.nom}</h6>
|
||||
<p class="text-600 text-sm mb-0">#{contact.fonction}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Thomas Martin</h6>
|
||||
<p class="text-600 text-sm mb-0">Président de l'association</p>
|
||||
<div class="flex gap-2">
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm"
|
||||
title="Retirer des favoris"
|
||||
action="#{favorisBean.retirerContactFavorite(contact.id)}"
|
||||
update="@form"
|
||||
process="@this" />
|
||||
</div>
|
||||
</div>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="text-600 text-sm">thomas.martin@email.com</span>
|
||||
<p:tag value="ADMIN" severity="warning" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact favori 2 -->
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-green-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-user text-green-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Sophie Leroy</h6>
|
||||
<p class="text-600 text-sm mb-0">Responsable formations</p>
|
||||
</div>
|
||||
<span class="text-600 text-sm">#{contact.email}</span>
|
||||
<p:tag value="#{contact.categorie}" severity="warning" styleClass="text-xs" />
|
||||
</div>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="text-600 text-sm">sophie.leroy@email.com</span>
|
||||
<p:tag value="FORMATION" severity="help" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact favori 3 -->
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<div class="flex align-items-center gap-3">
|
||||
<div class="w-3rem h-3rem border-circle bg-purple-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-user text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Marc Durand</h6>
|
||||
<p class="text-600 text-sm mb-0">Support technique</p>
|
||||
</div>
|
||||
</div>
|
||||
<i class="pi pi-star-fill text-yellow-500"></i>
|
||||
</div>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="text-600 text-sm">marc.durand@email.com</span>
|
||||
<p:tag value="SUPPORT" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -426,57 +308,28 @@
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Raccourci 1 -->
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<i class="pi pi-bookmark text-blue-500 text-2xl"></i>
|
||||
<p:commandButton icon="pi pi-pencil"
|
||||
styleClass="p-button-text p-button-sm p-button-rounded"
|
||||
title="Modifier" />
|
||||
<ui:repeat value="#{favorisBean.raccourcis}" var="racc">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<i class="pi #{racc.icon} text-#{racc.couleur}-500 text-2xl"></i>
|
||||
<p:commandButton icon="pi pi-times"
|
||||
styleClass="p-button-text p-button-sm p-button-rounded"
|
||||
title="Supprimer"
|
||||
action="#{favorisBean.supprimerRaccourci(racc.id)}"
|
||||
update="@form"
|
||||
process="@this" />
|
||||
</div>
|
||||
<h6 class="text-900 font-semibold mb-2">#{racc.titre}</h6>
|
||||
<p class="text-600 text-sm mb-3">#{racc.description}</p>
|
||||
<p:commandButton value="Accéder"
|
||||
styleClass="p-button-outlined p-button-sm w-full"
|
||||
icon="pi pi-external-link"
|
||||
onclick="window.location.href='#{racc.url}'; return false;" />
|
||||
</div>
|
||||
<h6 class="text-900 font-semibold mb-2">Nouveau Membre</h6>
|
||||
<p class="text-600 text-sm mb-3">Lien direct vers le formulaire d'inscription</p>
|
||||
<p:commandButton value="Accéder"
|
||||
styleClass="p-button-outlined p-button-sm w-full"
|
||||
icon="pi pi-external-link" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Raccourci 2 -->
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<i class="pi pi-calculator text-green-500 text-2xl"></i>
|
||||
<p:commandButton icon="pi pi-pencil"
|
||||
styleClass="p-button-text p-button-sm p-button-rounded"
|
||||
title="Modifier" />
|
||||
</div>
|
||||
<h6 class="text-900 font-semibold mb-2">Calculateur</h6>
|
||||
<p class="text-600 text-sm mb-3">Calcul automatique des cotisations</p>
|
||||
<p:commandButton value="Accéder"
|
||||
styleClass="p-button-outlined p-button-sm w-full"
|
||||
icon="pi pi-external-link" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Raccourci 3 -->
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<i class="pi pi-print text-purple-500 text-2xl"></i>
|
||||
<p:commandButton icon="pi pi-pencil"
|
||||
styleClass="p-button-text p-button-sm p-button-rounded"
|
||||
title="Modifier" />
|
||||
</div>
|
||||
<h6 class="text-900 font-semibold mb-2">Impression Rapide</h6>
|
||||
<p class="text-600 text-sm mb-3">Templates prêts à imprimer</p>
|
||||
<p:commandButton value="Accéder"
|
||||
styleClass="p-button-outlined p-button-sm w-full"
|
||||
icon="pi pi-external-link" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ui:repeat>
|
||||
|
||||
<!-- Ajouter nouveau raccourci -->
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 text-center cursor-pointer transition-duration-200 border-dashed border-primary">
|
||||
|
||||
@@ -9,420 +9,90 @@
|
||||
<ui:define name="title">Mes Notifications - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="ui-fluid">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-bell text-orange-500" />
|
||||
<ui:param name="title" value="Mes Notifications" />
|
||||
<ui:param name="description" value="Gérez vos notifications et restez informé des événements importants" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActions">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/button-secondary.xhtml">
|
||||
<ui:param name="value" value="Marquer toutes comme lues" />
|
||||
<ui:param name="icon" value="pi pi-check" />
|
||||
<ui:param name="outlined" value="true" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Paramètres" />
|
||||
<ui:param name="icon" value="pi pi-cog" />
|
||||
<ui:param name="outcome" value="/pages/secure/personnel/parametres" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
|
||||
<!-- Statistiques notifications -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.notifications != null ? personnelBean.notifications.stream().filter(n -> !n.lue).count() : 0}" />
|
||||
<ui:param name="label" value="Non Lues" />
|
||||
<ui:param name="subLabel" value="Nouvelles" />
|
||||
<ui:param name="icon" value="pi pi-bell" />
|
||||
<ui:param name="bgColor" value="red" />
|
||||
</ui:include>
|
||||
|
||||
<!-- En-tête -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<div>
|
||||
<h2 class="text-900 font-bold text-4xl mb-2">
|
||||
<i class="pi pi-bell text-orange-500 mr-3"></i>
|
||||
Mes Notifications
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-0">
|
||||
Gérez vos notifications et restez informé des événements importants
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Marquer toutes comme lues"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-check" />
|
||||
<p:commandButton value="Paramètres"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-cog" />
|
||||
</div>
|
||||
</div>
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.notifications != null ? personnelBean.notifications.size() : 0}" />
|
||||
<ui:param name="label" value="Total" />
|
||||
<ui:param name="subLabel" value="Notifications" />
|
||||
<ui:param name="icon" value="pi pi-inbox" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques notifications -->
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-red-500 mb-2">8</div>
|
||||
<div class="text-900 font-semibold mb-1">Non Lues</div>
|
||||
<div class="text-600 text-sm">Nouvelles</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-blue-500 mb-2">34</div>
|
||||
<div class="text-900 font-semibold mb-1">Aujourd'hui</div>
|
||||
<div class="text-600 text-sm">Reçues</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-green-500 mb-2">156</div>
|
||||
<div class="text-900 font-semibold mb-1">Cette Semaine</div>
|
||||
<div class="text-600 text-sm">Total</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-purple-500 mb-2">12</div>
|
||||
<div class="text-900 font-semibold mb-1">Importantes</div>
|
||||
<div class="text-600 text-sm">En attente</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Liste des notifications -->
|
||||
<div class="card">
|
||||
<h5>Notifications Récentes</h5>
|
||||
|
||||
<p:dataTable value="#{personnelBean.notifications}" var="notification"
|
||||
emptyMessage="Aucune notification"
|
||||
styleClass="p-datatable-sm">
|
||||
|
||||
<p:column headerText="Titre">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<div class="w-1rem h-1rem border-circle"
|
||||
styleClass="#{notification.lue ? 'bg-gray-300' : 'bg-blue-500'}"></div>
|
||||
<span class="font-semibold">#{notification.titre}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filtres -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h:form id="filtresForm">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="typeNotification" class="block text-900 font-semibold mb-2">Type</label>
|
||||
<p:selectOneMenu id="typeNotification" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Toutes" itemValue="" />
|
||||
<f:selectItem itemLabel="Système" itemValue="systeme" />
|
||||
<f:selectItem itemLabel="Événements" itemValue="evenement" />
|
||||
<f:selectItem itemLabel="Cotisations" itemValue="cotisation" />
|
||||
<f:selectItem itemLabel="Messages" itemValue="message" />
|
||||
<f:selectItem itemLabel="Rappels" itemValue="rappel" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="statutNotification" class="block text-900 font-semibold mb-2">Statut</label>
|
||||
<p:selectOneMenu id="statutNotification" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tous les statuts" itemValue="" />
|
||||
<f:selectItem itemLabel="Non lues" itemValue="non_lue" />
|
||||
<f:selectItem itemLabel="Lues" itemValue="lue" />
|
||||
<f:selectItem itemLabel="Importantes" itemValue="importante" />
|
||||
<f:selectItem itemLabel="Archivées" itemValue="archivee" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="periodeNotification" class="block text-900 font-semibold mb-2">Période</label>
|
||||
<p:selectOneMenu id="periodeNotification" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Toutes" itemValue="" />
|
||||
<f:selectItem itemLabel="Aujourd'hui" itemValue="aujourdhui" />
|
||||
<f:selectItem itemLabel="Cette semaine" itemValue="semaine" />
|
||||
<f:selectItem itemLabel="Ce mois-ci" itemValue="mois" />
|
||||
<f:selectItem itemLabel="Plus anciennes" itemValue="anciennes" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
<div class="field col-12 md:col-3">
|
||||
<label for="rechercheNotification" class="block text-900 font-semibold mb-2">Rechercher</label>
|
||||
<p:inputText id="rechercheNotification"
|
||||
placeholder="Mots-clés..."
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Message">
|
||||
<span>#{notification.message}</span>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date">
|
||||
<span>#{notification.dateCreation}</span>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut">
|
||||
<p:tag value="#{notification.lue ? 'Lue' : 'Non lue'}"
|
||||
severity="#{notification.lue ? 'success' : 'warning'}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" styleClass="text-center">
|
||||
<div class="flex justify-content-center gap-1">
|
||||
<p:commandButton icon="pi pi-check"
|
||||
title="Marquer comme lue"
|
||||
styleClass="p-button-sm p-button-rounded p-button-success"
|
||||
rendered="#{!notification.lue}" />
|
||||
<p:commandButton icon="pi pi-trash"
|
||||
title="Supprimer"
|
||||
styleClass="p-button-sm p-button-rounded p-button-danger" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notifications urgentes -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4 border-2 border-red-500">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-exclamation-triangle text-red-500 mr-2"></i>
|
||||
Notifications Urgentes
|
||||
</h4>
|
||||
|
||||
<!-- Notification urgente 1 -->
|
||||
<div class="surface-red-50 hover:surface-red-100 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-start justify-content-between">
|
||||
<div class="flex align-items-start gap-3 flex-1">
|
||||
<div class="w-3rem h-3rem border-circle bg-red-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-shield text-red-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex align-items-center gap-2 mb-2">
|
||||
<h6 class="text-900 font-bold mb-0">Tentative de connexion suspecte détectée</h6>
|
||||
<p:tag value="URGENT" severity="danger" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-700 line-height-3 mb-2">
|
||||
Une tentative de connexion depuis un appareil non reconnu a été détectée sur votre compte.
|
||||
Si ce n'était pas vous, changez immédiatement votre mot de passe.
|
||||
</p>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="text-600 text-sm">IP: 185.234.56.78 • Localisation: Nigeria</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right ml-3">
|
||||
<div class="text-900 font-semibold text-sm">il y a 15 min</div>
|
||||
<div class="flex gap-2 mt-2">
|
||||
<p:commandButton value="Sécuriser"
|
||||
styleClass="p-button-danger p-button-sm"
|
||||
icon="pi pi-lock" />
|
||||
<p:commandButton value="Ignorer"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
icon="pi pi-times" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notification urgente 2 -->
|
||||
<div class="surface-orange-50 hover:surface-orange-100 border-round p-4 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-start justify-content-between">
|
||||
<div class="flex align-items-start gap-3 flex-1">
|
||||
<div class="w-3rem h-3rem border-circle bg-orange-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-clock text-orange-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex align-items-center gap-2 mb-2">
|
||||
<h6 class="text-900 font-bold mb-0">Cotisation en retard - Action requise</h6>
|
||||
<p:tag value="ÉCHÉANCE" severity="warning" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-700 line-height-3 mb-2">
|
||||
Votre cotisation mensuelle de janvier 2024 est en retard de 5 jours.
|
||||
Effectuez le paiement pour éviter la suspension de votre adhésion.
|
||||
</p>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="text-600 text-sm">Montant: 25,000 FCFA • Échéance: 15 jan. 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right ml-3">
|
||||
<div class="text-900 font-semibold text-sm">il y a 2h</div>
|
||||
<div class="flex gap-2 mt-2">
|
||||
<p:commandButton value="Payer"
|
||||
styleClass="p-button-warning p-button-sm"
|
||||
icon="pi pi-credit-card" />
|
||||
<p:commandButton value="Reporter"
|
||||
styleClass="p-button-outlined p-button-sm"
|
||||
icon="pi pi-calendar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notifications récentes -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-clock mr-2"></i>
|
||||
Notifications Récentes
|
||||
</h4>
|
||||
|
||||
<!-- Notification 1 - Événement -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-start justify-content-between">
|
||||
<div class="flex align-items-start gap-3 flex-1">
|
||||
<div class="w-3rem h-3rem border-circle bg-blue-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-calendar text-blue-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex align-items-center gap-2 mb-2">
|
||||
<h6 class="text-900 font-semibold mb-0">Nouvel événement ajouté</h6>
|
||||
<p:tag value="ÉVÉNEMENT" severity="info" styleClass="text-xs" />
|
||||
<div class="w-0-5rem h-0-5rem border-circle bg-blue-500"></div>
|
||||
</div>
|
||||
<p class="text-700 line-height-3 mb-2">
|
||||
"Formation sur les nouvelles technologies" a été programmée pour le 25 janvier 2024.
|
||||
Inscrivez-vous dès maintenant, places limitées.
|
||||
</p>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="text-600 text-sm">Organisé par: Thomas Martin</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right ml-3">
|
||||
<div class="text-900 font-semibold text-sm">il y a 1h</div>
|
||||
<div class="text-600 text-xs">18 jan. 2024, 15:30</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notification 2 - Message -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200 opacity-70">
|
||||
<div class="flex align-items-start justify-content-between">
|
||||
<div class="flex align-items-start gap-3 flex-1">
|
||||
<div class="w-3rem h-3rem border-circle bg-green-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-envelope text-green-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex align-items-center gap-2 mb-2">
|
||||
<h6 class="text-900 font-semibold mb-0">Nouveau message privé</h6>
|
||||
<p:tag value="MESSAGE" severity="success" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-700 line-height-3 mb-2">
|
||||
Sophie Leroy vous a envoyé un message concernant la prochaine assemblée générale.
|
||||
</p>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="text-600 text-sm">Objet: "Préparation AG 2024"</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right ml-3">
|
||||
<div class="text-600 font-semibold text-sm">il y a 3h</div>
|
||||
<div class="text-600 text-xs">18 jan. 2024, 13:15</div>
|
||||
<i class="pi pi-check-circle text-green-500 mt-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notification 3 - Système -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200">
|
||||
<div class="flex align-items-start justify-content-between">
|
||||
<div class="flex align-items-start gap-3 flex-1">
|
||||
<div class="w-3rem h-3rem border-circle bg-purple-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-cog text-purple-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex align-items-center gap-2 mb-2">
|
||||
<h6 class="text-900 font-semibold mb-0">Mise à jour système disponible</h6>
|
||||
<p:tag value="SYSTÈME" severity="help" styleClass="text-xs" />
|
||||
<div class="w-0-5rem h-0-5rem border-circle bg-purple-500"></div>
|
||||
</div>
|
||||
<p class="text-700 line-height-3 mb-2">
|
||||
UnionFlow v2.1.4 est maintenant disponible avec des améliorations de sécurité
|
||||
et de nouvelles fonctionnalités.
|
||||
</p>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="text-600 text-sm">Taille: 15.2 MB • Redémarrage requis</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right ml-3">
|
||||
<div class="text-900 font-semibold text-sm">il y a 6h</div>
|
||||
<div class="text-600 text-xs">18 jan. 2024, 10:00</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notification 4 - Rappel -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 mb-3 cursor-pointer transition-duration-200 opacity-70">
|
||||
<div class="flex align-items-start justify-content-between">
|
||||
<div class="flex align-items-start gap-3 flex-1">
|
||||
<div class="w-3rem h-3rem border-circle bg-orange-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-bell text-orange-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex align-items-center gap-2 mb-2">
|
||||
<h6 class="text-900 font-semibold mb-0">Rappel: Réunion équipe demain</h6>
|
||||
<p:tag value="RAPPEL" severity="warning" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-700 line-height-3 mb-2">
|
||||
N'oubliez pas la réunion d'équipe administrative prévue demain à 14h00
|
||||
en salle de conférence.
|
||||
</p>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="text-600 text-sm">Durée estimée: 2h • Présence obligatoire</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right ml-3">
|
||||
<div class="text-600 font-semibold text-sm">il y a 1 jour</div>
|
||||
<div class="text-600 text-xs">17 jan. 2024, 16:45</div>
|
||||
<i class="pi pi-check-circle text-green-500 mt-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notification 5 - Félicitations -->
|
||||
<div class="surface-100 hover:surface-200 border-round p-4 cursor-pointer transition-duration-200 opacity-70">
|
||||
<div class="flex align-items-start justify-content-between">
|
||||
<div class="flex align-items-start gap-3 flex-1">
|
||||
<div class="w-3rem h-3rem border-circle bg-yellow-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-star text-yellow-600 text-xl"></i>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div class="flex align-items-center gap-2 mb-2">
|
||||
<h6 class="text-900 font-semibold mb-0">Félicitations! Badge obtenu</h6>
|
||||
<p:tag value="RÉCOMPENSE" severity="secondary" styleClass="text-xs" />
|
||||
</div>
|
||||
<p class="text-700 line-height-3 mb-2">
|
||||
Vous avez obtenu le badge "Membre Actif" pour votre participation régulière
|
||||
aux activités de l'association.
|
||||
</p>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<span class="text-600 text-sm">Points gagnés: +50 • Niveau: Bronze</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right ml-3">
|
||||
<div class="text-600 font-semibold text-sm">il y a 2 jours</div>
|
||||
<div class="text-600 text-xs">16 jan. 2024, 09:30</div>
|
||||
<i class="pi pi-check-circle text-green-500 mt-2"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Paramètres de notification rapides -->
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-cog mr-2"></i>
|
||||
Paramètres Rapides
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center">
|
||||
<i class="pi pi-bell text-3xl text-blue-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Notifications Push</h6>
|
||||
<p:inputSwitch styleClass="mb-3" />
|
||||
<p class="text-600 text-sm">Activer/désactiver</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center">
|
||||
<i class="pi pi-envelope text-3xl text-green-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Emails</h6>
|
||||
<p:inputSwitch value="true" styleClass="mb-3" />
|
||||
<p class="text-600 text-sm">Résumé quotidien</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center">
|
||||
<i class="pi pi-mobile text-3xl text-purple-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">SMS</h6>
|
||||
<p:inputSwitch styleClass="mb-3" />
|
||||
<p class="text-600 text-sm">Urgences uniquement</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center">
|
||||
<i class="pi pi-volume-off text-3xl text-orange-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Mode Silencieux</h6>
|
||||
<p:inputSwitch styleClass="mb-3" />
|
||||
<p class="text-600 text-sm">Pause notifications</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex align-items-center justify-content-between mt-4 pt-4 border-top-1 border-200">
|
||||
<div>
|
||||
<h6 class="text-900 font-semibold mb-1">Gestion des notifications</h6>
|
||||
<p class="text-600 text-sm mb-0">Configurez finement vos préférences</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Tout marquer comme lu"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-check-square" />
|
||||
<p:commandButton value="Paramètres avancés"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-cog" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
</ui:composition>
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
<div>
|
||||
<h6 class="text-green-800 font-semibold mb-1">Compte sécurisé</h6>
|
||||
<p class="text-green-700 text-sm mb-0">
|
||||
Votre compte respecte toutes les bonnes pratiques de sécurité. Score: 95/100
|
||||
Votre compte respecte toutes les bonnes pratiques de sécurité. Score: #{parametresBean.scoreSecurite}/100
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-auto">
|
||||
|
||||
@@ -28,10 +28,14 @@
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Réinitialiser"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-refresh" />
|
||||
icon="pi pi-refresh"
|
||||
action="#{preferencesBean.reinitialiserPreferences}"
|
||||
update="@form" />
|
||||
<p:commandButton value="Enregistrer"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-save" />
|
||||
icon="pi pi-save"
|
||||
action="#{preferencesBean.sauvegarderPreferences}"
|
||||
update="@form" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -77,10 +81,14 @@
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-3">Thème</h6>
|
||||
<p:selectOneRadio id="theme" value="#{preferencesBean.theme}" layout="custom">
|
||||
<f:selectItem itemLabel="Clair" itemValue="light" />
|
||||
<f:selectItem itemLabel="Sombre" itemValue="dark" />
|
||||
</p:selectOneRadio>
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<div class="field-radiobutton">
|
||||
<p:radioButton id="themeLight" name="theme" value="light" />
|
||||
<p:radioButton id="themeLight" for="theme" itemIndex="0" />
|
||||
<label for="themeLight" class="ml-2">
|
||||
<div class="surface-100 border-round p-3 cursor-pointer">
|
||||
<i class="pi pi-sun text-yellow-500 text-xl mb-2"></i>
|
||||
@@ -92,7 +100,7 @@
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="field-radiobutton">
|
||||
<p:radioButton id="themeDark" name="theme" value="dark" />
|
||||
<p:radioButton id="themeDark" for="theme" itemIndex="1" />
|
||||
<label for="themeDark" class="ml-2">
|
||||
<div class="surface-800 border-round p-3 cursor-pointer">
|
||||
<i class="pi pi-moon text-blue-400 text-xl mb-2"></i>
|
||||
@@ -109,28 +117,34 @@
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-3">Couleur d'accent</h6>
|
||||
<p:selectOneRadio id="accentColor" value="#{preferencesBean.couleurAccent}" layout="custom">
|
||||
<f:selectItem itemLabel="Bleu" itemValue="blue" />
|
||||
<f:selectItem itemLabel="Vert" itemValue="green" />
|
||||
<f:selectItem itemLabel="Violet" itemValue="purple" />
|
||||
<f:selectItem itemLabel="Orange" itemValue="orange" />
|
||||
</p:selectOneRadio>
|
||||
<div class="grid">
|
||||
<div class="col-3">
|
||||
<div class="field-radiobutton">
|
||||
<p:radioButton id="colorBlue" name="accentColor" value="blue" />
|
||||
<p:radioButton id="colorBlue" for="accentColor" itemIndex="0" />
|
||||
<label for="colorBlue" class="w-2rem h-2rem border-circle bg-blue-500 cursor-pointer block ml-2"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="field-radiobutton">
|
||||
<p:radioButton id="colorGreen" name="accentColor" value="green" />
|
||||
<p:radioButton id="colorGreen" for="accentColor" itemIndex="1" />
|
||||
<label for="colorGreen" class="w-2rem h-2rem border-circle bg-green-500 cursor-pointer block ml-2"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="field-radiobutton">
|
||||
<p:radioButton id="colorPurple" name="accentColor" value="purple" />
|
||||
<p:radioButton id="colorPurple" for="accentColor" itemIndex="2" />
|
||||
<label for="colorPurple" class="w-2rem h-2rem border-circle bg-purple-500 cursor-pointer block ml-2"></label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="field-radiobutton">
|
||||
<p:radioButton id="colorOrange" name="accentColor" value="orange" />
|
||||
<p:radioButton id="colorOrange" for="accentColor" itemIndex="3" />
|
||||
<label for="colorOrange" class="w-2rem h-2rem border-circle bg-orange-500 cursor-pointer block ml-2"></label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -141,7 +155,7 @@
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="field">
|
||||
<label for="langue" class="block text-900 font-semibold mb-2">Langue</label>
|
||||
<p:selectOneMenu id="langue" styleClass="w-full">
|
||||
<p:selectOneMenu id="langue" value="#{preferencesBean.langue}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Français" itemValue="fr" />
|
||||
<f:selectItem itemLabel="English" itemValue="en" />
|
||||
<f:selectItem itemLabel="العربية" itemValue="ar" />
|
||||
@@ -153,7 +167,7 @@
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="field">
|
||||
<label for="fuseau" class="block text-900 font-semibold mb-2">Fuseau horaire</label>
|
||||
<p:selectOneMenu id="fuseau" styleClass="w-full">
|
||||
<p:selectOneMenu id="fuseau" value="#{preferencesBean.fuseauHoraire}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="GMT (Casablanca)" itemValue="GMT" />
|
||||
<f:selectItem itemLabel="GMT+1 (Paris)" itemValue="CET" />
|
||||
<f:selectItem itemLabel="GMT-5 (New York)" itemValue="EST" />
|
||||
@@ -164,7 +178,7 @@
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="field">
|
||||
<label for="format" class="block text-900 font-semibold mb-2">Format de date</label>
|
||||
<p:selectOneMenu id="format" styleClass="w-full">
|
||||
<p:selectOneMenu id="format" value="#{preferencesBean.formatDate}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="DD/MM/YYYY" itemValue="dd/mm/yyyy" />
|
||||
<f:selectItem itemLabel="MM/DD/YYYY" itemValue="mm/dd/yyyy" />
|
||||
<f:selectItem itemLabel="YYYY-MM-DD" itemValue="yyyy-mm-dd" />
|
||||
@@ -195,22 +209,22 @@
|
||||
</h6>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="notifEvenements" />
|
||||
<p:selectBooleanCheckbox id="notifEvenements" value="#{preferencesBean.notifEvenements}" />
|
||||
<label for="notifEvenements" class="ml-2 text-900">Nouveaux événements</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="notifMessages" />
|
||||
<p:selectBooleanCheckbox id="notifMessages" value="#{preferencesBean.notifMessages}" />
|
||||
<label for="notifMessages" class="ml-2 text-900">Messages privés</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="notifCotisations" />
|
||||
<p:selectBooleanCheckbox id="notifCotisations" value="#{preferencesBean.notifCotisations}" />
|
||||
<label for="notifCotisations" class="ml-2 text-900">Rappels cotisations</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="notifSysteme" />
|
||||
<p:selectBooleanCheckbox id="notifSysteme" value="#{preferencesBean.notifSysteme}" />
|
||||
<label for="notifSysteme" class="ml-2 text-900">Mises à jour système</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -223,22 +237,22 @@
|
||||
</h6>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="emailQuotidien" />
|
||||
<p:selectBooleanCheckbox id="emailQuotidien" value="#{preferencesBean.emailQuotidien}" />
|
||||
<label for="emailQuotidien" class="ml-2 text-900">Résumé quotidien</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="emailHebdo" />
|
||||
<p:selectBooleanCheckbox id="emailHebdo" value="#{preferencesBean.emailHebdo}" />
|
||||
<label for="emailHebdo" class="ml-2 text-900">Newsletter hebdomadaire</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="emailUrgent" />
|
||||
<p:selectBooleanCheckbox id="emailUrgent" value="#{preferencesBean.emailUrgent}" />
|
||||
<label for="emailUrgent" class="ml-2 text-900">Alertes urgentes</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="emailPromo" />
|
||||
<p:selectBooleanCheckbox id="emailPromo" value="#{preferencesBean.emailPromo}" />
|
||||
<label for="emailPromo" class="ml-2 text-900">Offres promotionnelles</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -251,23 +265,23 @@
|
||||
</h6>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="smsUrgent" />
|
||||
<p:selectBooleanCheckbox id="smsUrgent" value="#{preferencesBean.smsUrgent}" />
|
||||
<label for="smsUrgent" class="ml-2 text-900">Urgences uniquement</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="smsRappels" />
|
||||
<p:selectBooleanCheckbox id="smsRappels" value="#{preferencesBean.smsRappels}" />
|
||||
<label for="smsRappels" class="ml-2 text-900">Rappels importants</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="smsEvenements" />
|
||||
<p:selectBooleanCheckbox id="smsEvenements" value="#{preferencesBean.smsEvenements}" />
|
||||
<label for="smsEvenements" class="ml-2 text-900">Événements du jour</label>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="heuresSMS" class="block text-900 font-semibold mb-2">Heures autorisées</label>
|
||||
<p:selectOneMenu id="heuresSMS" styleClass="w-full">
|
||||
<p:selectOneMenu id="heuresSMS" value="#{preferencesBean.heuresSMS}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="08h - 20h" itemValue="08-20" />
|
||||
<f:selectItem itemLabel="09h - 18h" itemValue="09-18" />
|
||||
<f:selectItem itemLabel="24h/24" itemValue="00-24" />
|
||||
@@ -295,9 +309,14 @@
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-4">
|
||||
<h6 class="text-900 font-semibold mb-3">Visibilité du profil</h6>
|
||||
<p:selectOneRadio id="visibilite" value="#{preferencesBean.visibiliteProfil}" layout="custom">
|
||||
<f:selectItem itemLabel="Public" itemValue="publique" />
|
||||
<f:selectItem itemLabel="Limité" itemValue="limitee" />
|
||||
<f:selectItem itemLabel="Privé" itemValue="prive" />
|
||||
</p:selectOneRadio>
|
||||
|
||||
<div class="field-radiobutton mb-3">
|
||||
<p:radioButton id="visibilitePublique" name="visibilite" value="publique" />
|
||||
<p:radioButton id="visibilitePublique" for="visibilite" itemIndex="0" />
|
||||
<label for="visibilitePublique" class="ml-2">
|
||||
<div class="text-900 font-semibold">Public</div>
|
||||
<div class="text-600 text-sm">Visible par tous les membres</div>
|
||||
@@ -305,7 +324,7 @@
|
||||
</div>
|
||||
|
||||
<div class="field-radiobutton mb-3">
|
||||
<p:radioButton id="visibiliteLimitee" name="visibilite" value="limitee" />
|
||||
<p:radioButton id="visibiliteLimitee" for="visibilite" itemIndex="1" />
|
||||
<label for="visibiliteLimitee" class="ml-2">
|
||||
<div class="text-900 font-semibold">Limité</div>
|
||||
<div class="text-600 text-sm">Visible par les administrateurs</div>
|
||||
@@ -313,7 +332,7 @@
|
||||
</div>
|
||||
|
||||
<div class="field-radiobutton">
|
||||
<p:radioButton id="visibilitePrive" name="visibilite" value="prive" />
|
||||
<p:radioButton id="visibilitePrive" for="visibilite" itemIndex="2" />
|
||||
<label for="visibilitePrive" class="ml-2">
|
||||
<div class="text-900 font-semibold">Privé</div>
|
||||
<div class="text-600 text-sm">Visible par vous uniquement</div>
|
||||
@@ -327,17 +346,17 @@
|
||||
<h6 class="text-900 font-semibold mb-3">Paramètres de sécurité</h6>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="doubleAuth" value="true" />
|
||||
<p:selectBooleanCheckbox id="doubleAuth" value="#{preferencesBean.doubleAuth}" />
|
||||
<label for="doubleAuth" class="ml-2 text-900">Authentification à deux facteurs</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="connexionSecure" value="true" />
|
||||
<p:selectBooleanCheckbox id="connexionSecure" value="#{preferencesBean.connexionSecure}" />
|
||||
<label for="connexionSecure" class="ml-2 text-900">Connexion HTTPS obligatoire</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-3">
|
||||
<p:selectBooleanCheckbox id="deconnexionAuto" />
|
||||
<p:selectBooleanCheckbox id="deconnexionAuto" value="#{preferencesBean.deconnexionAuto}" />
|
||||
<label for="deconnexionAuto" class="ml-2 text-900">Déconnexion automatique</label>
|
||||
</div>
|
||||
|
||||
@@ -375,32 +394,32 @@
|
||||
<h6 class="text-900 font-semibold mb-3">Widgets à afficher</h6>
|
||||
|
||||
<div class="field-checkbox mb-2">
|
||||
<p:selectBooleanCheckbox id="widgetActivites" value="true" />
|
||||
<p:selectBooleanCheckbox id="widgetActivites" value="#{preferencesBean.widgetActivites}" />
|
||||
<label for="widgetActivites" class="ml-2 text-900">Activités récentes</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-2">
|
||||
<p:selectBooleanCheckbox id="widgetEvenements" value="true" />
|
||||
<p:selectBooleanCheckbox id="widgetEvenements" value="#{preferencesBean.widgetEvenements}" />
|
||||
<label for="widgetEvenements" class="ml-2 text-900">Événements à venir</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-2">
|
||||
<p:selectBooleanCheckbox id="widgetCotisations" />
|
||||
<p:selectBooleanCheckbox id="widgetCotisations" value="#{preferencesBean.widgetCotisations}" />
|
||||
<label for="widgetCotisations" class="ml-2 text-900">État des cotisations</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-2">
|
||||
<p:selectBooleanCheckbox id="widgetNotifications" value="true" />
|
||||
<p:selectBooleanCheckbox id="widgetNotifications" value="#{preferencesBean.widgetNotifications}" />
|
||||
<label for="widgetNotifications" class="ml-2 text-900">Notifications récentes</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox mb-2">
|
||||
<p:selectBooleanCheckbox id="widgetStatistiques" />
|
||||
<p:selectBooleanCheckbox id="widgetStatistiques" value="#{preferencesBean.widgetStatistiques}" />
|
||||
<label for="widgetStatistiques" class="ml-2 text-900">Mes statistiques</label>
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="widgetMeteo" />
|
||||
<p:selectBooleanCheckbox id="widgetMeteo" value="#{preferencesBean.widgetMeteo}" />
|
||||
<label for="widgetMeteo" class="ml-2 text-900">Météo locale</label>
|
||||
</div>
|
||||
</div>
|
||||
@@ -412,7 +431,7 @@
|
||||
|
||||
<div class="field">
|
||||
<label for="layoutDashboard" class="block text-900 font-semibold mb-2">Disposition</label>
|
||||
<p:selectOneMenu id="layoutDashboard" styleClass="w-full">
|
||||
<p:selectOneMenu id="layoutDashboard" value="#{preferencesBean.layoutDashboard}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Grille 2 colonnes" itemValue="grid-2" />
|
||||
<f:selectItem itemLabel="Grille 3 colonnes" itemValue="grid-3" />
|
||||
<f:selectItem itemLabel="Liste verticale" itemValue="list" />
|
||||
@@ -422,7 +441,7 @@
|
||||
|
||||
<div class="field">
|
||||
<label for="pageAccueil" class="block text-900 font-semibold mb-2">Page d'accueil</label>
|
||||
<p:selectOneMenu id="pageAccueil" styleClass="w-full">
|
||||
<p:selectOneMenu id="pageAccueil" value="#{preferencesBean.pageAccueil}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Tableau de bord" itemValue="dashboard" />
|
||||
<f:selectItem itemLabel="Mes activités" itemValue="activites" />
|
||||
<f:selectItem itemLabel="Mon agenda" itemValue="agenda" />
|
||||
@@ -432,7 +451,7 @@
|
||||
|
||||
<div class="field">
|
||||
<label for="elementsPage" class="block text-900 font-semibold mb-2">Éléments par page</label>
|
||||
<p:selectOneMenu id="elementsPage" styleClass="w-full">
|
||||
<p:selectOneMenu id="elementsPage" value="#{preferencesBean.elementsPage}" styleClass="w-full">
|
||||
<f:selectItem itemLabel="10" itemValue="10" />
|
||||
<f:selectItem itemLabel="25" itemValue="25" />
|
||||
<f:selectItem itemLabel="50" itemValue="50" />
|
||||
@@ -441,7 +460,7 @@
|
||||
</div>
|
||||
|
||||
<div class="field-checkbox">
|
||||
<p:selectBooleanCheckbox id="animations" value="true" />
|
||||
<p:selectBooleanCheckbox id="animations" value="#{preferencesBean.animations}" />
|
||||
<label for="animations" class="ml-2 text-900">Activer les animations</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -9,8 +9,7 @@
|
||||
<ui:define name="title">Mon Profil - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<div class="ui-fluid">
|
||||
|
||||
<h:form id="formProfil">
|
||||
<!-- En-tête profil -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12">
|
||||
@@ -18,66 +17,87 @@
|
||||
<div class="flex align-items-center justify-content-between mb-4">
|
||||
<div class="flex align-items-center gap-4">
|
||||
<div class="w-6rem h-6rem border-circle bg-primary-100 flex align-items-center justify-content-center">
|
||||
<i class="pi pi-user text-primary text-4xl"></i>
|
||||
<h:graphicImage value="#{personnelBean.membre.photoUrl}"
|
||||
style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;"
|
||||
rendered="#{personnelBean.membre != null and personnelBean.membre.photoUrl != null}" />
|
||||
<i class="pi pi-user text-primary text-4xl"
|
||||
rendered="#{personnelBean.membre == null or personnelBean.membre.photoUrl == null}"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-900 font-bold text-3xl mb-2">Marie Dubois</h2>
|
||||
<p class="text-600 text-lg mb-1">Membre depuis le 15 mars 2020</p>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<p:tag value="ACTIF" severity="success" styleClass="text-sm" />
|
||||
<p:tag value="PREMIUM" severity="info" styleClass="text-sm" />
|
||||
<p:tag value="ADMIN" severity="warning" styleClass="text-sm" />
|
||||
<h2 class="text-900 font-bold text-3xl mb-2">
|
||||
#{personnelBean.membre != null ? personnelBean.membre.nomComplet : 'Chargement...'}
|
||||
</h2>
|
||||
<p class="text-600 text-lg mb-1" rendered="#{personnelBean.membre != null and personnelBean.membre.dateAdhesion != null}">
|
||||
Membre depuis le #{personnelBean.membre.dateAdhesionFormatee}
|
||||
</p>
|
||||
<div class="flex align-items-center gap-2" rendered="#{personnelBean.membre != null}">
|
||||
<p:tag value="#{personnelBean.membre.statut}"
|
||||
severity="#{personnelBean.membre.statutSeverity}"
|
||||
styleClass="text-sm" />
|
||||
<p:tag value="#{personnelBean.membre.typeMembre}"
|
||||
severity="#{personnelBean.membre.typeSeverity}"
|
||||
styleClass="text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Modifier"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-pencil"
|
||||
onclick="PF('modifierProfilDialog').show()" />
|
||||
<p:commandButton value="Exporter"
|
||||
styleClass="p-button-outlined"
|
||||
icon="pi pi-download" />
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Modifier" />
|
||||
<ui:param name="icon" value="pi pi-pencil" />
|
||||
<ui:param name="onclick" value="PF('modifierProfilDialog').show();" />
|
||||
</ui:include>
|
||||
<ui:include src="/templates/components/button-icon.xhtml">
|
||||
<ui:param name="icon" value="pi pi-refresh" />
|
||||
<ui:param name="action" value="#{personnelBean.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>
|
||||
</div>
|
||||
|
||||
<!-- Statistiques profil -->
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-blue-500 mb-2">156</div>
|
||||
<div class="text-900 font-semibold mb-1">Actions Réalisées</div>
|
||||
<div class="text-600 text-sm">Ce mois-ci</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-green-500 mb-2">12</div>
|
||||
<div class="text-900 font-semibold mb-1">Événements</div>
|
||||
<div class="text-600 text-sm">Participés</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-purple-500 mb-2">98%</div>
|
||||
<div class="text-900 font-semibold mb-1">Taux Participation</div>
|
||||
<div class="text-600 text-sm">Global</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-3">
|
||||
<div class="surface-100 border-round p-4 text-center" style="min-height: 9rem">
|
||||
<div class="text-2xl font-bold text-orange-500 mb-2">4.9★</div>
|
||||
<div class="text-900 font-semibold mb-1">Évaluation</div>
|
||||
<div class="text-600 text-sm">Moyenne</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid" rendered="#{personnelBean.statistiques != null}">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.actionsRealisees}" />
|
||||
<ui:param name="label" value="Actions Réalisées" />
|
||||
<ui:param name="subLabel" value="Ce mois-ci" />
|
||||
<ui:param name="icon" value="pi pi-check-circle" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.evenementsParticipes}" />
|
||||
<ui:param name="label" value="Événements" />
|
||||
<ui:param name="subLabel" value="Participés" />
|
||||
<ui:param name="icon" value="pi pi-calendar" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.tauxParticipation}%" />
|
||||
<ui:param name="label" value="Taux Participation" />
|
||||
<ui:param name="subLabel" value="Global" />
|
||||
<ui:param name="icon" value="pi pi-chart-line" />
|
||||
<ui:param name="bgColor" value="purple" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{personnelBean.statistiques.evaluationMoyenne}★" />
|
||||
<ui:param name="label" value="Évaluation" />
|
||||
<ui:param name="subLabel" value="Moyenne" />
|
||||
<ui:param name="icon" value="pi pi-star" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Informations personnelles -->
|
||||
<div class="grid mb-4">
|
||||
<div class="grid mb-4" rendered="#{personnelBean.membre != null}">
|
||||
<div class="col-12 lg:col-8">
|
||||
<div class="surface-card border-round p-4 h-full">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
@@ -89,43 +109,37 @@
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Nom complet</div>
|
||||
<div class="text-900 font-semibold">Marie Dubois</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.nomComplet}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Email</div>
|
||||
<div class="text-900 font-semibold">marie.dubois@email.com</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.email}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Téléphone</div>
|
||||
<div class="text-900 font-semibold">+221 77 123 45 67</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.telephone}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="col-12 lg:col-6" rendered="#{personnelBean.membre.dateNaissance != null}">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Date de naissance</div>
|
||||
<div class="text-900 font-semibold">15 avril 1985</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.dateNaissanceFormatee}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-12" rendered="#{personnelBean.membre.adresse != null}">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Adresse</div>
|
||||
<div class="text-900 font-semibold">123 Avenue Léopold Sédar Senghor, Dakar, Sénégal</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.adresse}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="col-12 lg:col-6" rendered="#{personnelBean.membre.profession != null}">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Profession</div>
|
||||
<div class="text-900 font-semibold">Enseignante</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Situation familiale</div>
|
||||
<div class="text-900 font-semibold">Mariée, 2 enfants</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.profession}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -141,41 +155,23 @@
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Numéro de membre</div>
|
||||
<div class="text-900 font-bold text-lg">#M-2020-0347</div>
|
||||
<div class="text-900 font-bold text-lg">#{personnelBean.membre.numeroMembre}</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="surface-100 border-round p-3 mb-3" rendered="#{personnelBean.membre.typeMembre != null}">
|
||||
<div class="text-600 text-sm mb-1">Type d'adhésion</div>
|
||||
<div class="text-900 font-semibold">Premium Annuelle</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.typeMembre}</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="surface-100 border-round p-3 mb-3" rendered="#{personnelBean.membre.dateAdhesion != null}">
|
||||
<div class="text-600 text-sm mb-1">Date d'inscription</div>
|
||||
<div class="text-900 font-semibold">15 mars 2020</div>
|
||||
<div class="text-900 font-semibold">#{personnelBean.membre.dateAdhesionFormatee}</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="text-600 text-sm mb-1">Prochaine échéance</div>
|
||||
<div class="text-900 font-semibold">15 mars 2025</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-green-50 border-left-3 border-green-500 p-3 mb-3">
|
||||
<h6 class="text-green-800 font-semibold mb-2">
|
||||
<i class="pi pi-check-circle mr-2"></i>Cotisations à jour
|
||||
</h6>
|
||||
<p class="text-green-700 text-sm mb-0">
|
||||
Toutes vos cotisations sont à jour jusqu'en mars 2025.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p:commandButton value="Renouveler Adhésion"
|
||||
styleClass="p-button-success w-full"
|
||||
icon="pi pi-refresh" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Activités récentes et permissions -->
|
||||
<!-- Activités récentes -->
|
||||
<div class="grid mb-4">
|
||||
<div class="col-12 lg:col-6">
|
||||
<div class="surface-card border-round p-4 h-full">
|
||||
@@ -184,36 +180,18 @@
|
||||
Activités Récentes
|
||||
</h4>
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<span class="text-900 font-semibold text-sm">Connexion système</span>
|
||||
<span class="text-600 text-xs">il y a 2h</span>
|
||||
<ui:repeat value="#{personnelBean.activitesRecentes}" var="activite">
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<span class="text-900 font-semibold text-sm">#{activite.titre}</span>
|
||||
<span class="text-600 text-xs">#{activite.dateHeure}</span>
|
||||
</div>
|
||||
<div class="text-600 text-sm">#{activite.description}</div>
|
||||
</div>
|
||||
<div class="text-600 text-sm">Dernière connexion réussie</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<span class="text-900 font-semibold text-sm">Modification profil</span>
|
||||
<span class="text-600 text-xs">il y a 1 jour</span>
|
||||
</div>
|
||||
<div class="text-600 text-sm">Mise à jour numéro de téléphone</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-3 mb-3">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<span class="text-900 font-semibold text-sm">Participation événement</span>
|
||||
<span class="text-600 text-xs">il y a 3 jours</span>
|
||||
</div>
|
||||
<div class="text-600 text-sm">Assemblée générale 2024</div>
|
||||
</div>
|
||||
|
||||
<div class="surface-100 border-round p-3">
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<span class="text-900 font-semibold text-sm">Paiement cotisation</span>
|
||||
<span class="text-600 text-xs">il y a 1 semaine</span>
|
||||
</div>
|
||||
<div class="text-600 text-sm">Cotisation mensuelle janvier 2024</div>
|
||||
</ui:repeat>
|
||||
|
||||
<div class="text-center text-600 text-sm" rendered="#{empty personnelBean.activitesRecentes}">
|
||||
Aucune activité récente
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -225,177 +203,98 @@
|
||||
Rôles et Permissions
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-6">
|
||||
<div class="surface-100 border-round p-3 text-center">
|
||||
<i class="pi pi-user text-2xl text-blue-500 mb-2"></i>
|
||||
<h6 class="text-900 font-semibold mb-1">Membre</h6>
|
||||
<p class="text-600 text-xs">Droits de base</p>
|
||||
<div class="text-600 text-sm" rendered="#{userSession != null and userSession.roles != null}">
|
||||
<ui:repeat value="#{userSession.roles}" var="role">
|
||||
<div class="mb-2">
|
||||
<p:tag value="#{role}" severity="info" styleClass="text-xs" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="surface-100 border-round p-3 text-center">
|
||||
<i class="pi pi-users text-2xl text-green-500 mb-2"></i>
|
||||
<h6 class="text-900 font-semibold mb-1">Administrateur</h6>
|
||||
<p class="text-600 text-xs">Gestion membres</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="surface-100 border-round p-3 text-center">
|
||||
<i class="pi pi-calendar text-2xl text-purple-500 mb-2"></i>
|
||||
<h6 class="text-900 font-semibold mb-1">Organisateur</h6>
|
||||
<p class="text-600 text-xs">Gestion événements</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="surface-100 border-round p-3 text-center">
|
||||
<i class="pi pi-eye text-2xl text-orange-500 mb-2"></i>
|
||||
<h6 class="text-900 font-semibold mb-1">Superviseur</h6>
|
||||
<p class="text-600 text-xs">Lecture étendue</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<h6 class="text-900 font-semibold mb-3">Permissions actives</h6>
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="flex align-items-center mb-2">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span class="text-700 text-sm">Gestion des membres</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-2">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span class="text-700 text-sm">Organisation d'événements</span>
|
||||
</li>
|
||||
<li class="flex align-items-center mb-2">
|
||||
<i class="pi pi-check-circle text-green-500 mr-2"></i>
|
||||
<span class="text-700 text-sm">Accès aux rapports</span>
|
||||
</li>
|
||||
<li class="flex align-items-center">
|
||||
<i class="pi pi-times-circle text-red-500 mr-2"></i>
|
||||
<span class="text-700 text-sm">Gestion financière</span>
|
||||
</li>
|
||||
</ul>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
|
||||
<!-- Paramètres de sécurité -->
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="surface-card border-round p-4">
|
||||
<h4 class="text-900 font-bold mb-4">
|
||||
<i class="pi pi-lock text-red-500 mr-2"></i>
|
||||
Sécurité du Compte
|
||||
</h4>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 border-round p-4 text-center">
|
||||
<i class="pi pi-key text-3xl text-blue-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Mot de Passe</h6>
|
||||
<p class="text-600 text-sm mb-3">Dernière modification il y a 2 mois</p>
|
||||
<p:commandButton value="Changer"
|
||||
styleClass="p-button-outlined p-button-sm w-full"
|
||||
icon="pi pi-pencil" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 border-round p-4 text-center">
|
||||
<i class="pi pi-shield text-3xl text-green-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Authentification 2FA</h6>
|
||||
<p class="text-600 text-sm mb-3">
|
||||
<p:tag value="ACTIVÉE" severity="success" styleClass="text-xs" />
|
||||
</p>
|
||||
<p:commandButton value="Configurer"
|
||||
styleClass="p-button-outlined p-button-sm w-full"
|
||||
icon="pi pi-cog" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 lg:col-4">
|
||||
<div class="surface-100 border-round p-4 text-center">
|
||||
<i class="pi pi-mobile text-3xl text-purple-500 mb-3"></i>
|
||||
<h6 class="text-900 font-semibold mb-2">Sessions Actives</h6>
|
||||
<p class="text-600 text-sm mb-3">3 appareils connectés</p>
|
||||
<p:commandButton value="Gérer"
|
||||
styleClass="p-button-outlined p-button-sm w-full"
|
||||
icon="pi pi-eye" />
|
||||
</div>
|
||||
</div>
|
||||
<!-- Dialog Modifier Profil -->
|
||||
<p:dialog id="modifierProfilDialog"
|
||||
widgetVar="modifierProfilDialog"
|
||||
header="Modifier Mon Profil"
|
||||
modal="true"
|
||||
width="900"
|
||||
styleClass="surface-0">
|
||||
<h:form id="modifierProfilForm">
|
||||
<div class="ui-fluid">
|
||||
<div class="formgrid grid" rendered="#{personnelBean.membre != null}">
|
||||
<div class="field col-12 lg:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="nom" />
|
||||
<ui:param name="label" value="Nom *" />
|
||||
<ui:param name="value" value="#{personnelBean.membre.nom}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="prenom" />
|
||||
<ui:param name="label" value="Prénom *" />
|
||||
<ui:param name="value" value="#{personnelBean.membre.prenom}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="email" />
|
||||
<ui:param name="label" value="Email *" />
|
||||
<ui:param name="value" value="#{personnelBean.membre.email}" />
|
||||
<ui:param name="required" value="true" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="telephone" />
|
||||
<ui:param name="label" value="Téléphone" />
|
||||
<ui:param name="value" value="#{personnelBean.membre.telephone}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="dateNaissance" />
|
||||
<ui:param name="label" value="Date de naissance" />
|
||||
<ui:param name="value" value="#{personnelBean.membre.dateNaissance}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="adresse" />
|
||||
<ui:param name="label" value="Adresse" />
|
||||
<ui:param name="value" value="#{personnelBean.membre.adresse}" />
|
||||
<ui:param name="rows" value="3" />
|
||||
</ui:include>
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="profession" />
|
||||
<ui:param name="label" value="Profession" />
|
||||
<ui:param name="value" value="#{personnelBean.membre.profession}" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-4">
|
||||
<p:commandButton value="Annuler"
|
||||
styleClass="p-button-outlined"
|
||||
onclick="PF('modifierProfilDialog').hide();"
|
||||
type="button" />
|
||||
<p:commandButton value="Enregistrer"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-save"
|
||||
action="#{personnelBean.mettreAJourProfil}"
|
||||
update="@form :formProfil"
|
||||
onclick="if(!args.validationFailed) PF('modifierProfilDialog').hide();" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Modifier Profil -->
|
||||
<p:dialog id="modifierProfilDialog"
|
||||
widgetVar="modifierProfilDialog"
|
||||
header="Modifier Mon Profil"
|
||||
modal="true"
|
||||
width="900"
|
||||
styleClass="surface-0">
|
||||
<h:form id="modifierProfilForm">
|
||||
<div class="ui-fluid">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="nom" class="block text-900 font-semibold mb-2">Nom *</label>
|
||||
<p:inputText id="nom" value="Dubois" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="prenom" class="block text-900 font-semibold mb-2">Prénom *</label>
|
||||
<p:inputText id="prenom" value="Marie" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="email" class="block text-900 font-semibold mb-2">Email *</label>
|
||||
<p:inputText id="email" value="marie.dubois@email.com" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="telephone" class="block text-900 font-semibold mb-2">Téléphone</label>
|
||||
<p:inputText id="telephone" value="+221 77 123 45 67" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="dateNaissance" class="block text-900 font-semibold mb-2">Date de naissance</label>
|
||||
<p:calendar id="dateNaissance" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label for="adresse" class="block text-900 font-semibold mb-2">Adresse</label>
|
||||
<p:inputTextarea id="adresse"
|
||||
value="123 Avenue Léopold Sédar Senghor, Dakar, Sénégal"
|
||||
rows="3"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="profession" class="block text-900 font-semibold mb-2">Profession</label>
|
||||
<p:inputText id="profession" value="Enseignante" styleClass="w-full" />
|
||||
</div>
|
||||
<div class="field col-12 lg:col-6">
|
||||
<label for="situationFamiliale" class="block text-900 font-semibold mb-2">Situation familiale</label>
|
||||
<p:selectOneMenu id="situationFamiliale" styleClass="w-full">
|
||||
<f:selectItem itemLabel="Célibataire" itemValue="celibataire" />
|
||||
<f:selectItem itemLabel="Marié(e)" itemValue="marie" />
|
||||
<f:selectItem itemLabel="Divorcé(e)" itemValue="divorce" />
|
||||
<f:selectItem itemLabel="Veuf/Veuve" itemValue="veuf" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-content-end gap-2 mt-4">
|
||||
<p:commandButton value="Annuler"
|
||||
styleClass="p-button-outlined"
|
||||
onclick="PF('modifierProfilDialog').hide()"
|
||||
type="button" />
|
||||
<p:commandButton value="Enregistrer"
|
||||
styleClass="p-button-primary"
|
||||
icon="pi pi-save" />
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
|
||||
</div>
|
||||
</h:form>
|
||||
</p:dialog>
|
||||
</ui:define>
|
||||
|
||||
</ui:composition>
|
||||
</ui:composition>
|
||||
|
||||
@@ -1,21 +1,120 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Rapports Activités - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-calendar text-orange-500" />
|
||||
<ui:param name="title" value="Rapports Activités" />
|
||||
<ui:param name="description" value="Analyse des activités et événements" />
|
||||
<ui:define name="actions">
|
||||
<h:form id="formActions">
|
||||
<div class="flex gap-2">
|
||||
<ui:include src="/templates/components/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/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 activités -->
|
||||
<div class="grid">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{rapportsBean.indicateurs.totalEvenements}" />
|
||||
<ui:param name="label" value="Total Événements" />
|
||||
<ui:param name="icon" value="pi pi-calendar" />
|
||||
<ui:param name="bgColor" value="orange" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{rapportsBean.indicateurs.croissanceEvenements}%" />
|
||||
<ui:param name="label" value="Croissance Événements" />
|
||||
<ui:param name="icon" value="pi pi-arrow-up" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- KPIs Activités -->
|
||||
<div class="card">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
<h5>Indicateurs d'Activité</h5>
|
||||
<div class="grid">
|
||||
<ui:repeat value="#{rapportsBean.kpis}" var="kpi">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="surface-100 border-round-lg p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="#{kpi.icon} text-2xl text-#{kpi.couleur}"></i>
|
||||
<span class="font-semibold">#{kpi.libelle}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-3xl font-bold text-#{kpi.couleur} mb-2">#{kpi.valeur}</div>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="#{kpi.variation > 0 ? 'pi pi-arrow-up text-green-500' : kpi.variation < 0 ? 'pi pi-arrow-down text-red-500' : 'pi pi-minus text-gray-500'}"></i>
|
||||
<span class="text-sm">#{kpi.variation}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dialog Export -->
|
||||
<h:form id="formExport">
|
||||
<p:dialog id="dlgExport"
|
||||
widgetVar="dlgExport"
|
||||
header="Exporter le Rapport Activités"
|
||||
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>
|
||||
|
||||
@@ -1,20 +1,168 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Export de Rapports - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-download text-indigo-500" />
|
||||
<ui:param name="title" value="Export de Rapports" />
|
||||
<ui:param name="description" value="Générer et exporter des rapports personnalisés" />
|
||||
</ui:include>
|
||||
|
||||
<!-- Formulaire de génération de rapport -->
|
||||
<div class="card">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
</div>
|
||||
<h:form id="formRapport">
|
||||
<h5>Nouveau Rapport</h5>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="typeRapport" value="Type de Rapport *" />
|
||||
<p:selectOneMenu id="typeRapport"
|
||||
value="#{rapportsBean.nouveauRapport.type}"
|
||||
styleClass="w-full"
|
||||
required="true">
|
||||
<f:selectItem itemLabel="Sélectionner un type" itemValue="" />
|
||||
<f:selectItem itemLabel="Rapport Financier" itemValue="FINANCIER" />
|
||||
<f:selectItem itemLabel="Rapport Membres" itemValue="MEMBRES" />
|
||||
<f:selectItem itemLabel="Rapport Activités" itemValue="ACTIVITES" />
|
||||
<f:selectItem itemLabel="Rapport Performance" itemValue="PERFORMANCE" />
|
||||
<f:selectItem itemLabel="Rapport Complet" itemValue="COMPLET" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="formatRapport" value="Format *" />
|
||||
<p:selectOneMenu id="formatRapport"
|
||||
value="#{rapportsBean.nouveauRapport.format}"
|
||||
styleClass="w-full"
|
||||
required="true">
|
||||
<f:selectItem itemLabel="PDF" itemValue="PDF" />
|
||||
<f:selectItem itemLabel="Excel (.xlsx)" itemValue="EXCEL" />
|
||||
<f:selectItem itemLabel="CSV" itemValue="CSV" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="periodeRapport" value="Période *" />
|
||||
<p:selectOneMenu id="periodeRapport"
|
||||
value="#{rapportsBean.nouveauRapport.periode}"
|
||||
styleClass="w-full"
|
||||
required="true">
|
||||
<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" />
|
||||
<f:selectItem itemLabel="Période personnalisée" itemValue="PERSONNALISEE" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="field">
|
||||
<p:outputLabel for="detailRapport" value="Niveau de Détail" />
|
||||
<p:selectOneMenu id="detailRapport"
|
||||
value="#{rapportsBean.nouveauRapport.detail}"
|
||||
styleClass="w-full">
|
||||
<f:selectItem itemLabel="Résumé" itemValue="RESUME" />
|
||||
<f:selectItem itemLabel="Standard" itemValue="STANDARD" />
|
||||
<f:selectItem itemLabel="Détaillé" itemValue="DETAILLE" />
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="field">
|
||||
<p:outputLabel for="commentairesRapport" value="Commentaires (optionnel)" />
|
||||
<p:inputTextarea id="commentairesRapport"
|
||||
value="#{rapportsBean.nouveauRapport.commentaires}"
|
||||
rows="3"
|
||||
styleClass="w-full"
|
||||
placeholder="Ajoutez des commentaires ou notes pour ce rapport..." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12">
|
||||
<div class="flex justify-content-end gap-2">
|
||||
<p:commandButton value="Réinitialiser"
|
||||
icon="pi pi-refresh"
|
||||
styleClass="p-button-outlined p-button-secondary"
|
||||
action="#{rapportsBean.nouveauRapport = null}"
|
||||
update="@form" />
|
||||
<ui:include src="/templates/components/button-primary.xhtml">
|
||||
<ui:param name="value" value="Générer le Rapport" />
|
||||
<ui:param name="icon" value="pi pi-file" />
|
||||
<ui:param name="action" value="#{rapportsBean.genererRapport}" />
|
||||
<ui:param name="update" value="@form :formHistorique" />
|
||||
</ui:include>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:form>
|
||||
</div>
|
||||
|
||||
<!-- Historique des rapports -->
|
||||
<div class="card">
|
||||
<h:form id="formHistorique">
|
||||
<h5>Historique des Rapports</h5>
|
||||
|
||||
<p:dataTable value="#{rapportsBean.historiqueRapports}" var="rapport"
|
||||
emptyMessage="Aucun rapport généré"
|
||||
paginator="true"
|
||||
rows="10"
|
||||
styleClass="p-datatable-sm">
|
||||
|
||||
<p:column headerText="Type">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="#{rapport.typeIcon} text-#{rapport.typeCouleur}"></i>
|
||||
<span class="font-semibold">#{rapport.typeLibelle}</span>
|
||||
</div>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Période">
|
||||
<span>#{rapport.periodeCouverte}</span>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Date Génération">
|
||||
<span>#{rapport.dateGenerationFormatee}</span>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Généré par">
|
||||
<span>#{rapport.generePar}</span>
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Statut">
|
||||
<p:tag value="#{rapport.statut}"
|
||||
severity="#{rapport.statutSeverity}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" styleClass="text-center">
|
||||
<div class="flex justify-content-center gap-1">
|
||||
<p:commandButton icon="pi pi-eye"
|
||||
title="Voir"
|
||||
styleClass="p-button-sm p-button-rounded p-button-info"
|
||||
action="#{rapportsBean.voirRapport(rapport)}" />
|
||||
<p:commandButton icon="pi pi-download"
|
||||
title="Télécharger"
|
||||
styleClass="p-button-sm p-button-rounded p-button-success"
|
||||
action="#{rapportsBean.telechargerRapport(rapport)}"
|
||||
rendered="#{rapport.statut == 'GENERE'}" />
|
||||
</div>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</h:form>
|
||||
</div>
|
||||
</ui:define>
|
||||
|
||||
|
||||
@@ -1,21 +1,213 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Rapports Financiers - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/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/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/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">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
<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/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/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/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/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/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/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/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/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="grid">
|
||||
<ui:repeat value="#{rapportsBean.kpis}" var="kpi">
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="surface-100 border-round-lg p-4">
|
||||
<div class="flex align-items-center justify-content-between mb-3">
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="#{kpi.icon} text-2xl text-#{kpi.couleur}"></i>
|
||||
<span class="font-semibold">#{kpi.libelle}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-3xl font-bold text-#{kpi.couleur} mb-2">#{kpi.valeur}</div>
|
||||
<div class="flex align-items-center gap-2">
|
||||
<i class="#{kpi.variation > 0 ? 'pi pi-arrow-up text-green-500' : kpi.variation < 0 ? 'pi pi-arrow-down text-red-500' : 'pi pi-minus text-gray-500'}"></i>
|
||||
<span class="text-sm">#{kpi.variation}%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@@ -1,21 +1,145 @@
|
||||
<ui:composition template="/templates/main-template.xhtml"
|
||||
xmlns="http://www.w3.org/1999/xhtml"
|
||||
<!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">
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">PAGE_TITLE - UnionFlow</ui:define>
|
||||
<ui:define name="title">Rapports Membres - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête -->
|
||||
<ui:include src="/templates/components/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/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/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="grid">
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{rapportsBean.indicateurs.totalMembres}" />
|
||||
<ui:param name="label" value="Total Membres" />
|
||||
<ui:param name="icon" value="pi pi-users" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
|
||||
<ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{rapportsBean.indicateurs.croissanceMembres}%" />
|
||||
<ui:param name="label" value="Croissance" />
|
||||
<ui:param name="icon" value="pi pi-arrow-up" />
|
||||
<ui:param name="bgColor" value="green" />
|
||||
</ui:include>
|
||||
</div>
|
||||
|
||||
<!-- Répartition des membres -->
|
||||
<div class="card">
|
||||
<h5>PAGE_TITLE</h5>
|
||||
<p>Cette page est en cours de développement.</p>
|
||||
<div class="text-center">
|
||||
<i class="pi pi-cog" style="font-size: 3rem; color: #6c757d;"></i>
|
||||
<p class="mt-3">Fonctionnalité en développement</p>
|
||||
<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>
|
||||
|
||||
@@ -0,0 +1,166 @@
|
||||
<!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">Catalogue des Types d'Organisation</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<h:form id="formTypes">
|
||||
<p:messages id="messages" showDetail="true" closable="true" />
|
||||
|
||||
<div class="card mb-3">
|
||||
<div class="flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<h5 class="mb-1">Catalogue des Types d'Organisation</h5>
|
||||
<span class="text-600">
|
||||
Gestion centrale des types utilisés par les organisations (Lions Club, Association, Coopérative, ...).
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<p:commandButton value="Nouveau type"
|
||||
icon="pi pi-plus"
|
||||
styleClass="ui-button-success"
|
||||
actionListener="#{typeOrganisationsAdminBean.preparerNouveauType}"
|
||||
update=":formTypes:dlgType"
|
||||
oncomplete="PF('dlgType').show();" />
|
||||
<p:commandButton value="Rafraîchir"
|
||||
icon="pi pi-refresh"
|
||||
styleClass="ui-button-secondary ml-2"
|
||||
actionListener="#{typeOrganisationsAdminBean.chargerTypes}"
|
||||
update="@form" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<p:dataTable id="dtTypes"
|
||||
value="#{typeOrganisationsAdminBean.types}"
|
||||
var="type"
|
||||
paginator="true"
|
||||
rows="20"
|
||||
rowsPerPageTemplate="10,20,50"
|
||||
paginatorPosition="bottom"
|
||||
emptyMessage="Aucun type trouvé">
|
||||
|
||||
<p:column headerText="Code" sortBy="#{type.code}" style="width: 160px;">
|
||||
<h:outputText value="#{type.code}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Libellé" sortBy="#{type.libelle}">
|
||||
<h:outputText value="#{type.libelle}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Description">
|
||||
<h:outputText value="#{type.description}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Ordre" style="width: 80px; text-align: center;">
|
||||
<h:outputText value="#{type.ordreAffichage}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actif" style="width: 90px; text-align: center;">
|
||||
<p:tag value="#{type.actif ? 'Actif' : 'Inactif'}"
|
||||
severity="#{type.actif ? 'success' : 'danger'}" />
|
||||
</p:column>
|
||||
|
||||
<p:column headerText="Actions" style="width: 140px; text-align: center;">
|
||||
<p:commandButton icon="pi pi-pencil"
|
||||
title="Modifier"
|
||||
styleClass="ui-button-rounded ui-button-warning mr-2"
|
||||
update=":formTypes:dlgType"
|
||||
actionListener="#{typeOrganisationsAdminBean.setTypeSelectionne(type)}"
|
||||
oncomplete="PF('dlgType').show();" />
|
||||
|
||||
<p:commandButton icon="pi pi-ban"
|
||||
title="Désactiver"
|
||||
styleClass="ui-button-rounded ui-button-secondary"
|
||||
update="@form"
|
||||
actionListener="#{typeOrganisationsAdminBean.desactiverType(type.id)}">
|
||||
<p:confirm header="Confirmation"
|
||||
message="Désactiver ce type d'organisation ?"
|
||||
icon="pi pi-exclamation-triangle" />
|
||||
</p:commandButton>
|
||||
</p:column>
|
||||
</p:dataTable>
|
||||
</div>
|
||||
|
||||
<p:confirmDialog global="true" showEffect="fade" hideEffect="fade" responsive="true" width="350">
|
||||
<p:commandButton value="Non" type="button" styleClass="ui-button-secondary" icon="pi pi-times"
|
||||
onclick="PF('confirmDialog').hide()" />
|
||||
<p:commandButton value="Oui" type="button" styleClass="ui-button-danger" icon="pi pi-check" />
|
||||
</p:confirmDialog>
|
||||
|
||||
<!-- Dialogue création / édition type -->
|
||||
<p:dialog id="dlgType"
|
||||
widgetVar="dlgType"
|
||||
header="Type d'Organisation"
|
||||
modal="true"
|
||||
resizable="false"
|
||||
responsive="true"
|
||||
width="600">
|
||||
|
||||
<div class="ui-fluid">
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-12 md:col-4">
|
||||
<p:outputLabel for="code" value="Code *" />
|
||||
<p:inputText id="code"
|
||||
value="#{typeOrganisationsAdminBean.typeCourant.code}"
|
||||
required="true"
|
||||
requiredMessage="Code: une donnée est requise."
|
||||
maxlength="50" />
|
||||
<p:message for="code" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-8">
|
||||
<p:outputLabel for="libelle" value="Libellé *" />
|
||||
<p:inputText id="libelle"
|
||||
value="#{typeOrganisationsAdminBean.typeCourant.libelle}"
|
||||
required="true"
|
||||
requiredMessage="Libellé: une donnée est requise."
|
||||
maxlength="150" />
|
||||
<p:message for="libelle" />
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<p:outputLabel for="description" value="Description" />
|
||||
<p:inputTextarea id="description"
|
||||
value="#{typeOrganisationsAdminBean.typeCourant.description}"
|
||||
rows="3"
|
||||
maxlength="500" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<p:outputLabel for="ordre" value="Ordre d'affichage" />
|
||||
<p:inputNumber id="ordre"
|
||||
value="#{typeOrganisationsAdminBean.typeCourant.ordreAffichage}"
|
||||
decimalPlaces="0"
|
||||
minValue="0" />
|
||||
</div>
|
||||
<div class="field col-12 md:col-4">
|
||||
<p:selectBooleanCheckbox id="actif"
|
||||
value="#{typeOrganisationsAdminBean.typeCourant.actif}" />
|
||||
<p:outputLabel for="actif" value="Actif" styleClass="ml-2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<f:facet name="footer">
|
||||
<p:commandButton value="Annuler"
|
||||
icon="pi pi-times"
|
||||
onclick="PF('dlgType').hide();"
|
||||
styleClass="ui-button-secondary" />
|
||||
|
||||
<p:commandButton value="Enregistrer"
|
||||
icon="pi pi-check"
|
||||
process="@form"
|
||||
update=":formTypes:dtTypes :formTypes:messages"
|
||||
actionListener="#{typeOrganisationsAdminBean.enregistrerType}"
|
||||
oncomplete="if(!args.validationFailed) PF('dlgType').hide();" />
|
||||
</f:facet>
|
||||
</p:dialog>
|
||||
</h:form>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
|
||||
|
||||
@@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html 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">
|
||||
|
||||
<!--
|
||||
Composant dialogue de formulaire réutilisable (WOU/DRY)
|
||||
Usage: <ui:include src="/templates/components/form-dialog.xhtml">
|
||||
<ui:param name="dialogId" value="dlgNouvelle" />
|
||||
<ui:param name="header" value="Nouvelle Organisation" />
|
||||
<ui:param name="widgetVar" value="dlgNouvelle" />
|
||||
<ui:param name="formId" value="formNouvelle" />
|
||||
<ui:param name="width" value="800" />
|
||||
<ui:param name="saveAction" value="#{bean.creerOrganisation}" />
|
||||
<ui:param name="saveLabel" value="Créer" />
|
||||
<ui:param name="updateTarget" value=":formOrganisations:dtOrganisations :formOrganisations:messages" />
|
||||
<ui:define name="content">
|
||||
Contenu du formulaire
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
-->
|
||||
|
||||
<ui:composition>
|
||||
<h:form id="#{formId}">
|
||||
<p:dialog id="#{dialogId}"
|
||||
header="#{header}"
|
||||
widgetVar="#{widgetVar}"
|
||||
modal="#{empty modal ? 'true' : modal}"
|
||||
resizable="#{empty resizable ? 'false' : resizable}"
|
||||
width="#{empty width ? '600' : width}"
|
||||
responsive="#{empty responsive ? 'true' : responsive}"
|
||||
closable="#{empty closable ? 'true' : closable}"
|
||||
draggable="#{empty draggable ? 'true' : draggable}"
|
||||
dynamic="true">
|
||||
|
||||
<div class="ui-fluid">
|
||||
<div class="grid">
|
||||
<ui:insert name="content">
|
||||
<!-- Contenu du formulaire -->
|
||||
</ui:insert>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<f:facet name="footer">
|
||||
<ui:insert name="footer">
|
||||
<!-- Footer par défaut si non fourni -->
|
||||
<ui:fragment rendered="#{not empty cancelLabel}">
|
||||
<p:commandButton value="#{cancelLabel}"
|
||||
icon="pi pi-times"
|
||||
onclick="PF('#{widgetVar}').hide();"
|
||||
styleClass="ui-button-secondary"/>
|
||||
</ui:fragment>
|
||||
<ui:fragment rendered="#{empty cancelLabel}">
|
||||
<p:commandButton value="Annuler"
|
||||
icon="pi pi-times"
|
||||
onclick="PF('#{widgetVar}').hide();"
|
||||
styleClass="ui-button-secondary"/>
|
||||
</ui:fragment>
|
||||
</ui:insert>
|
||||
</f:facet>
|
||||
</p:dialog>
|
||||
</h:form>
|
||||
</ui:composition>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<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">
|
||||
|
||||
<!--
|
||||
Composant autoComplete réutilisable (WOU/DRY)
|
||||
Usage: <ui:include src="/templates/components/form-field-autocomplete.xhtml">
|
||||
<ui:param name="id" value="searchProfession" />
|
||||
<ui:param name="label" value="Profession" />
|
||||
<ui:param name="value" value="#{bean.filtres.profession}" />
|
||||
<ui:param name="completeMethod" value="#{bean.completerProfessions}" />
|
||||
<ui:param name="placeholder" value="Saisir une profession..." />
|
||||
<ui:param name="update" value=":formResultats:dtResultats @(.search-summary)" />
|
||||
</ui:include>
|
||||
-->
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="#{id}" value="#{label}" />
|
||||
<p:autoComplete id="#{id}"
|
||||
value="#{value}"
|
||||
completeMethod="#{completeMethod}"
|
||||
placeholder="#{placeholder}"
|
||||
styleClass="w-full">
|
||||
<p:ajax event="itemSelect"
|
||||
update="#{not empty update ? update : ':formResultats:dtResultats @(.search-summary)'}" />
|
||||
</p:autoComplete>
|
||||
</div>
|
||||
</ui:composition>
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<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">
|
||||
|
||||
<!--
|
||||
Composant checkbox booléenne réutilisable (WOU/DRY)
|
||||
Usage: <ui:include src="/templates/components/form-field-boolean.xhtml">
|
||||
<ui:param name="id" value="desEnfants" />
|
||||
<ui:param name="label" value=" A des enfants déclarés" />
|
||||
<ui:param name="value" value="#{bean.filtres.desEnfants}" />
|
||||
<ui:param name="update" value=":formResultats:dtResultats @(.search-summary)" />
|
||||
</ui:include>
|
||||
-->
|
||||
|
||||
<div class="field">
|
||||
<p:selectBooleanCheckbox id="#{id}" value="#{value}">
|
||||
<p:ajax update="#{not empty update ? update : ':formResultats:dtResultats @(.search-summary)'}" />
|
||||
</p:selectBooleanCheckbox>
|
||||
<p:outputLabel for="#{id}" value="#{label}" />
|
||||
</div>
|
||||
</ui:composition>
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<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">
|
||||
|
||||
<!--
|
||||
Composant champ date réutilisable (WOU/DRY)
|
||||
Usage: <ui:include src="/templates/components/form-field-calendar.xhtml">
|
||||
<ui:param name="id" value="fieldId" />
|
||||
<ui:param name="label" value="Label du champ" />
|
||||
<ui:param name="value" value="#{bean.property}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="pattern" value="dd/MM/yyyy" />
|
||||
</ui:include>
|
||||
-->
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="#{id}" value="#{label}" />
|
||||
<p:calendar id="#{id}"
|
||||
value="#{value}"
|
||||
showIcon="true"
|
||||
navigator="true"
|
||||
required="#{not empty required and required}"
|
||||
locale="fr"
|
||||
pattern="#{not empty pattern ? pattern : 'dd/MM/yyyy'}"
|
||||
styleClass="w-full">
|
||||
<p:ajax event="dateSelect"
|
||||
update="#{not empty update ? update : '@form'}" />
|
||||
</p:calendar>
|
||||
</div>
|
||||
</ui:composition>
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
<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">
|
||||
|
||||
<!--
|
||||
Composant selectCheckboxMenu réutilisable (WOU/DRY)
|
||||
Usage: <ui:include src="/templates/components/form-field-checkbox-menu.xhtml">
|
||||
<ui:param name="id" value="searchStatut" />
|
||||
<ui:param name="label" value="Statut" />
|
||||
<ui:param name="value" value="#{bean.filtres.statuts}" />
|
||||
<ui:param name="update" value=":formResultats:dtResultats @(.search-summary)" />
|
||||
<ui:define name="items">
|
||||
<f:selectItem itemLabel="Actif" itemValue="ACTIF" />
|
||||
<f:selectItem itemLabel="Inactif" itemValue="INACTIF" />
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
-->
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="#{id}" value="#{label}" />
|
||||
<p:selectCheckboxMenu id="#{id}"
|
||||
value="#{value}"
|
||||
multiple="true"
|
||||
styleClass="w-full">
|
||||
<ui:insert name="items" />
|
||||
<p:ajax update="#{not empty update ? update : ':formResultats:dtResultats @(.search-summary)'}" />
|
||||
</p:selectCheckboxMenu>
|
||||
</div>
|
||||
</ui:composition>
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
<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">
|
||||
|
||||
<!--
|
||||
Composant groupe de champs (formgrid) réutilisable (WOU/DRY)
|
||||
Usage: <ui:include src="/templates/components/form-field-group.xhtml">
|
||||
<ui:param name="content" value="contenu des champs groupés" />
|
||||
</ui:include>
|
||||
-->
|
||||
|
||||
<div class="formgrid grid">
|
||||
<ui:fragment rendered="#{not empty content}">
|
||||
#{content}
|
||||
</ui:fragment>
|
||||
<ui:insert />
|
||||
</div>
|
||||
</ui:composition>
|
||||
|
||||
@@ -0,0 +1,34 @@
|
||||
<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">
|
||||
|
||||
<!--
|
||||
Composant champ numérique réutilisable (WOU/DRY)
|
||||
Usage: <ui:include src="/templates/components/form-field-number.xhtml">
|
||||
<ui:param name="id" value="ageMin" />
|
||||
<ui:param name="label" value="Âge minimum" />
|
||||
<ui:param name="value" value="#{bean.filtres.ageMin}" />
|
||||
<ui:param name="placeholder" value="Ex: 25" />
|
||||
<ui:param name="minValue" value="0" />
|
||||
<ui:param name="maxValue" value="100" />
|
||||
<ui:param name="update" value=":formResultats:dtResultats @(.search-summary)" />
|
||||
</ui:include>
|
||||
-->
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="#{id}" value="#{label}" />
|
||||
<p:inputNumber id="#{id}"
|
||||
value="#{value}"
|
||||
symbol=""
|
||||
placeholder="#{placeholder}"
|
||||
minValue="#{minValue}"
|
||||
maxValue="#{maxValue}"
|
||||
styleClass="w-full">
|
||||
<p:ajax event="change"
|
||||
update="#{not empty update ? update : ':formResultats:dtResultats @(.search-summary)'}" />
|
||||
</p:inputNumber>
|
||||
</div>
|
||||
</ui:composition>
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<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">
|
||||
|
||||
<!--
|
||||
Composant champ de recherche texte avec AJAX réutilisable (WOU/DRY)
|
||||
Usage: <ui:include src="/templates/components/form-field-search-text.xhtml">
|
||||
<ui:param name="id" value="searchNom" />
|
||||
<ui:param name="label" value="Nom" />
|
||||
<ui:param name="value" value="#{bean.filtres.nom}" />
|
||||
<ui:param name="placeholder" value="Rechercher par nom..." />
|
||||
<ui:param name="update" value=":formResultats:dtResultats @(.search-summary)" />
|
||||
<ui:param name="event" value="keyup" />
|
||||
</ui:include>
|
||||
event: keyup, change, blur
|
||||
-->
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="#{id}" value="#{label}" />
|
||||
<p:inputText id="#{id}"
|
||||
value="#{value}"
|
||||
placeholder="#{placeholder}"
|
||||
styleClass="w-full">
|
||||
<p:ajax event="#{not empty event ? event : 'keyup'}"
|
||||
update="#{not empty update ? update : ':formResultats:dtResultats @(.search-summary)'}" />
|
||||
</p:inputText>
|
||||
</div>
|
||||
</ui:composition>
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
<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">
|
||||
|
||||
<!--
|
||||
Composant champ sélection réutilisable (WOU/DRY)
|
||||
Usage: <ui:include src="/templates/components/form-field-select.xhtml">
|
||||
<ui:param name="id" value="fieldId" />
|
||||
<ui:param name="label" value="Label du champ" />
|
||||
<ui:param name="value" value="#{bean.property}" />
|
||||
<ui:param name="items" value="#{bean.options}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="var" value="item" />
|
||||
<ui:param name="itemLabel" value="#{item.label}" />
|
||||
<ui:param name="itemValue" value="#{item.value}" />
|
||||
</ui:include>
|
||||
-->
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="#{id}" value="#{label}" />
|
||||
<p:selectOneMenu id="#{id}"
|
||||
value="#{value}"
|
||||
required="#{not empty required and required}"
|
||||
styleClass="w-full">
|
||||
<f:selectItem itemLabel="Sélectionner..." itemValue="" noSelectionOption="true" rendered="#{not empty required and required}" />
|
||||
<ui:fragment rendered="#{not empty var and not empty itemLabel and not empty itemValue}">
|
||||
<f:selectItems value="#{items}"
|
||||
var="#{var}"
|
||||
itemLabel="#{itemLabel}"
|
||||
itemValue="#{itemValue}" />
|
||||
</ui:fragment>
|
||||
<ui:fragment rendered="#{empty var}">
|
||||
<f:selectItems value="#{items}" />
|
||||
</ui:fragment>
|
||||
</p:selectOneMenu>
|
||||
</div>
|
||||
</ui:composition>
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<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">
|
||||
|
||||
<!--
|
||||
Composant champ texte réutilisable (WOU/DRY)
|
||||
Usage: <ui:include src="/templates/components/form-field-text.xhtml">
|
||||
<ui:param name="id" value="fieldId" />
|
||||
<ui:param name="label" value="Label du champ" />
|
||||
<ui:param name="value" value="#{bean.property}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="placeholder" value="Placeholder" />
|
||||
</ui:include>
|
||||
-->
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="#{id}" value="#{label}" />
|
||||
<p:inputText id="#{id}"
|
||||
value="#{value}"
|
||||
required="#{not empty required and required}"
|
||||
placeholder="#{placeholder}"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
</ui:composition>
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<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">
|
||||
|
||||
<!--
|
||||
Composant champ textarea réutilisable (WOU/DRY)
|
||||
Usage: <ui:include src="/templates/components/form-field-textarea.xhtml">
|
||||
<ui:param name="id" value="fieldId" />
|
||||
<ui:param name="label" value="Label du champ" />
|
||||
<ui:param name="value" value="#{bean.property}" />
|
||||
<ui:param name="required" value="true" />
|
||||
<ui:param name="rows" value="4" />
|
||||
</ui:include>
|
||||
-->
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="#{id}" value="#{label}" />
|
||||
<p:inputTextarea id="#{id}"
|
||||
value="#{value}"
|
||||
required="#{not empty required and required}"
|
||||
rows="#{not empty rows ? rows : 3}"
|
||||
styleClass="w-full" />
|
||||
</div>
|
||||
</ui:composition>
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<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">
|
||||
|
||||
<!--
|
||||
Wrapper de champ de formulaire réutilisable (WOU/DRY)
|
||||
Usage: <ui:include src="/templates/components/form-field-wrapper.xhtml">
|
||||
<ui:param name="id" value="fieldId" />
|
||||
<ui:param name="label" value="Label du champ" />
|
||||
<ui:define name="input">
|
||||
<p:inputText id="#{id}" value="#{bean.property}" styleClass="w-full" />
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
-->
|
||||
|
||||
<div class="field">
|
||||
<p:outputLabel for="#{id}" value="#{label}" rendered="#{not empty label}" />
|
||||
<ui:insert name="input" />
|
||||
<p:message for="#{id}" />
|
||||
</div>
|
||||
</ui:composition>
|
||||
|
||||
@@ -0,0 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html 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">
|
||||
|
||||
<!--
|
||||
Composant section de formulaire réutilisable (WOU/DRY)
|
||||
Usage: <ui:decorate template="/templates/components/form-section.xhtml">
|
||||
<ui:param name="title" value="Titre de la section" />
|
||||
<ui:param name="fluid" value="true" />
|
||||
<ui:define name="content">
|
||||
Contenu de la section
|
||||
</ui:define>
|
||||
</ui:decorate>
|
||||
-->
|
||||
|
||||
<ui:composition>
|
||||
<div class="card #{fluid ? 'ui-fluid' : ''}">
|
||||
<h:panelGroup rendered="#{not empty title}">
|
||||
<h5>#{title}</h5>
|
||||
</h:panelGroup>
|
||||
<ui:insert name="content">
|
||||
<!-- Contenu par défaut si aucun content n'est fourni -->
|
||||
</ui:insert>
|
||||
</div>
|
||||
</ui:composition>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
<p:submenu id="m_super_admin" label="Super Administration" icon="pi pi-shield">
|
||||
<p:menuitem id="m_super_dashboard" value="Dashboard Super-Admin" icon="pi pi-chart-bar" outcome="/pages/super-admin/dashboard" />
|
||||
<p:menuitem id="m_gestion_entites" value="Gestion des Entités" icon="pi pi-sitemap" outcome="/pages/super-admin/entites/gestion" />
|
||||
<p:menuitem id="m_gestion_types_organisations" value="Types d'Organisation" icon="pi pi-tags" outcome="/pages/super-admin/types/organisations" />
|
||||
<p:menuitem id="m_config_systeme" value="Configuration Système" icon="pi pi-cog" outcome="/pages/super-admin/configuration/systeme" />
|
||||
</p:submenu>
|
||||
|
||||
@@ -50,6 +51,13 @@
|
||||
<p:menuitem id="m_export_membres" value="Export Membres" icon="pi pi-download" url="#" />
|
||||
</p:submenu>
|
||||
|
||||
<!-- Gestion des Organisations -->
|
||||
<p:submenu id="m_organisations" label="Organisations" icon="pi pi-building">
|
||||
<p:menuitem id="m_liste_organisations" value="Liste des Organisations" icon="pi pi-list" outcome="/pages/secure/organisation/liste" />
|
||||
<p:menuitem id="m_nouvelle_organisation" value="Nouvelle Organisation" icon="pi pi-plus" outcome="/pages/secure/organisation/liste" />
|
||||
<p:menuitem id="m_statistiques_orga" value="Statistiques" icon="pi pi-chart-bar" url="#" />
|
||||
</p:submenu>
|
||||
|
||||
<!-- Gestion des Adhésions -->
|
||||
<p:submenu id="m_adhesions" label="Gestion des Adhésions" icon="pi pi-bookmark">
|
||||
<p:menuitem id="m_demande_adhesion" value="Nouvelle Demande" icon="pi pi-plus-circle" outcome="/pages/secure/adhesion/demande" />
|
||||
|
||||
@@ -0,0 +1,38 @@
|
||||
<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">
|
||||
|
||||
<!--
|
||||
Composant en-tête de page réutilisable (WOU/DRY)
|
||||
Usage: <ui:include src="/templates/components/page-header.xhtml">
|
||||
<ui:param name="icon" value="pi pi-icon-name" />
|
||||
<ui:param name="title" value="Titre de la page" />
|
||||
<ui:param name="description" value="Description de la page" />
|
||||
<ui:define name="actions">
|
||||
Contenu des actions (boutons, etc.)
|
||||
</ui:define>
|
||||
</ui:include>
|
||||
-->
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h3 class="mb-2">
|
||||
<i class="#{icon} text-primary mr-2"></i>
|
||||
#{title}
|
||||
</h3>
|
||||
<p class="text-600 m-0" rendered="#{not empty description}">#{description}</p>
|
||||
</div>
|
||||
<div>
|
||||
<ui:insert name="actions" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:composition>
|
||||
|
||||
@@ -0,0 +1,33 @@
|
||||
<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">
|
||||
|
||||
<!--
|
||||
Composant carte de statistique réutilisable (WOU/DRY)
|
||||
Usage: <ui:include src="/templates/components/stat-card.xhtml">
|
||||
<ui:param name="value" value="#{bean.valeur}" />
|
||||
<ui:param name="label" value="Label de la statistique" />
|
||||
<ui:param name="icon" value="pi pi-icon-name" />
|
||||
<ui:param name="bgColor" value="blue" />
|
||||
</ui:include>
|
||||
bgColor: blue, green, orange, purple, etc.
|
||||
-->
|
||||
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="card bg-#{bgColor}-100 border-left-3 border-#{bgColor}-500">
|
||||
<div class="flex justify-content-between">
|
||||
<div>
|
||||
<div class="text-#{bgColor}-900 font-bold text-xl">#{value}</div>
|
||||
<div class="text-#{bgColor}-700">#{label}</div>
|
||||
</div>
|
||||
<div class="bg-#{bgColor}-500 text-white border-round text-center"
|
||||
style="width: 2.5rem; height: 2.5rem; line-height: 2.5rem;">
|
||||
<i class="#{icon} text-lg"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ui:composition>
|
||||
|
||||
@@ -97,7 +97,7 @@
|
||||
|
||||
</ul>
|
||||
<a href="#" class="layout-rightpanel-button">
|
||||
<i class="pi pi-arrow-left"/>
|
||||
<i class="pi pi-arrow-left"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,8 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<!-- Obsolète : apple-mobile-web-app-capable. Remplacé par mobile-web-app-capable -->
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
<link rel="icon" href="#{request.contextPath}/resources/freya-layout/images/favicon.ico" type="image/x-icon"></link>
|
||||
</f:facet>
|
||||
<title><ui:insert name="title">UnionFlow</ui:insert></title>
|
||||
|
||||
@@ -10,7 +10,8 @@
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
<!-- Obsolète : apple-mobile-web-app-capable. Remplacé par mobile-web-app-capable -->
|
||||
<meta name="mobile-web-app-capable" content="yes"/>
|
||||
<link rel="icon" type="image/x-icon" href="#{resource['images/favicon.ico']}"/>
|
||||
</f:facet>
|
||||
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:composite="http://xmlns.jcp.org/jsf/composite"
|
||||
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
||||
xmlns:p="http://primefaces.org/ui">
|
||||
|
||||
<!--
|
||||
Composant Composite pour calendrier réutilisable avec binding bidirectionnel
|
||||
Usage: <uf:calendar id="dateNaissance" label="Date de naissance" value="#{bean.dateNaissance}" />
|
||||
-->
|
||||
|
||||
<composite:interface>
|
||||
<composite:attribute name="id" required="true" type="java.lang.String" />
|
||||
<composite:attribute name="label" required="true" type="java.lang.String" />
|
||||
<composite:attribute name="value" required="true" />
|
||||
<composite:attribute name="required" type="java.lang.Boolean" default="false" />
|
||||
<composite:attribute name="pattern" type="java.lang.String" default="dd/MM/yyyy" />
|
||||
<composite:attribute name="placeholder" type="java.lang.String" default="jj/mm/aaaa" />
|
||||
<composite:attribute name="maxdate" />
|
||||
<composite:attribute name="mindate" />
|
||||
<composite:attribute name="disabled" type="java.lang.Boolean" default="false" />
|
||||
<composite:attribute name="readonly" type="java.lang.Boolean" default="false" />
|
||||
</composite:interface>
|
||||
|
||||
<composite:implementation>
|
||||
<div class="field">
|
||||
<p:outputLabel for="#{cc.clientId}:cal" value="#{cc.attrs.label}" />
|
||||
<p:calendar id="cal"
|
||||
value="#{cc.attrs.value}"
|
||||
required="#{cc.attrs.required}"
|
||||
requiredMessage="#{cc.attrs.label} est obligatoire"
|
||||
pattern="#{cc.attrs.pattern}"
|
||||
placeholder="#{cc.attrs.placeholder}"
|
||||
showIcon="true"
|
||||
maxdate="#{cc.attrs.maxdate}"
|
||||
mindate="#{cc.attrs.mindate}"
|
||||
disabled="#{cc.attrs.disabled}"
|
||||
readonly="#{cc.attrs.readonly}"
|
||||
yearNavigator="true"
|
||||
yearRange="1920:2030"
|
||||
monthNavigator="true"
|
||||
styleClass="w-full" />
|
||||
<p:message for="#{cc.clientId}:cal" />
|
||||
</div>
|
||||
</composite:implementation>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,40 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:composite="http://xmlns.jcp.org/jsf/composite"
|
||||
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
||||
xmlns:p="http://primefaces.org/ui">
|
||||
|
||||
<!--
|
||||
Composant Composite pour champ texte réutilisable avec binding bidirectionnel
|
||||
Usage: <uf:inputText id="nom" label="Nom" value="#{bean.nom}" required="true" />
|
||||
-->
|
||||
|
||||
<composite:interface>
|
||||
<composite:attribute name="id" required="true" type="java.lang.String" />
|
||||
<composite:attribute name="label" required="true" type="java.lang.String" />
|
||||
<composite:attribute name="value" required="true" />
|
||||
<composite:attribute name="required" type="java.lang.Boolean" default="false" />
|
||||
<composite:attribute name="placeholder" type="java.lang.String" default="" />
|
||||
<composite:attribute name="disabled" type="java.lang.Boolean" default="false" />
|
||||
<composite:attribute name="readonly" type="java.lang.Boolean" default="false" />
|
||||
<composite:attribute name="styleClass" type="java.lang.String" default="" />
|
||||
<composite:attribute name="maxlength" type="java.lang.Integer" />
|
||||
</composite:interface>
|
||||
|
||||
<composite:implementation>
|
||||
<div class="field">
|
||||
<p:outputLabel for="#{cc.clientId}:input" value="#{cc.attrs.label}" />
|
||||
<p:inputText id="input"
|
||||
value="#{cc.attrs.value}"
|
||||
required="#{cc.attrs.required}"
|
||||
requiredMessage="#{cc.attrs.label} est obligatoire"
|
||||
placeholder="#{cc.attrs.placeholder}"
|
||||
disabled="#{cc.attrs.disabled}"
|
||||
readonly="#{cc.attrs.readonly}"
|
||||
maxlength="#{cc.attrs.maxlength}"
|
||||
styleClass="w-full #{cc.attrs.styleClass}" />
|
||||
<p:message for="#{cc.clientId}:input" />
|
||||
</div>
|
||||
</composite:implementation>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:composite="http://xmlns.jcp.org/jsf/composite"
|
||||
xmlns:h="http://xmlns.jcp.org/jsf/html"
|
||||
xmlns:p="http://primefaces.org/ui">
|
||||
|
||||
<!--
|
||||
Composant Composite pour textarea réutilisable avec binding bidirectionnel
|
||||
Usage: <uf:inputTextarea id="adresse" label="Adresse" value="#{bean.adresse}" rows="4" />
|
||||
-->
|
||||
|
||||
<composite:interface>
|
||||
<composite:attribute name="id" required="true" type="java.lang.String" />
|
||||
<composite:attribute name="label" required="true" type="java.lang.String" />
|
||||
<composite:attribute name="value" required="true" />
|
||||
<composite:attribute name="required" type="java.lang.Boolean" default="false" />
|
||||
<composite:attribute name="rows" type="java.lang.Integer" default="3" />
|
||||
<composite:attribute name="cols" type="java.lang.Integer" default="30" />
|
||||
<composite:attribute name="placeholder" type="java.lang.String" default="" />
|
||||
<composite:attribute name="disabled" type="java.lang.Boolean" default="false" />
|
||||
<composite:attribute name="readonly" type="java.lang.Boolean" default="false" />
|
||||
<composite:attribute name="maxlength" type="java.lang.Integer" />
|
||||
</composite:interface>
|
||||
|
||||
<composite:implementation>
|
||||
<div class="field">
|
||||
<p:outputLabel for="#{cc.clientId}:textarea" value="#{cc.attrs.label}" />
|
||||
<p:inputTextarea id="textarea"
|
||||
value="#{cc.attrs.value}"
|
||||
required="#{cc.attrs.required}"
|
||||
requiredMessage="#{cc.attrs.label} est obligatoire"
|
||||
rows="#{cc.attrs.rows}"
|
||||
cols="#{cc.attrs.cols}"
|
||||
placeholder="#{cc.attrs.placeholder}"
|
||||
disabled="#{cc.attrs.disabled}"
|
||||
readonly="#{cc.attrs.readonly}"
|
||||
maxlength="#{cc.attrs.maxlength}"
|
||||
styleClass="w-full" />
|
||||
<p:message for="#{cc.clientId}:textarea" />
|
||||
</div>
|
||||
</composite:implementation>
|
||||
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<facelet-taglib xmlns="https://xmlns.jcp.org/xml/ns/javaee"
|
||||
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||
xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee
|
||||
https://xmlns.jcp.org/xml/ns/javaee/web-facelettaglibrary_2_3.xsd"
|
||||
version="2.3">
|
||||
<namespace>http://unionflow.lions.dev/jsf</namespace>
|
||||
<composite-library-name>unionflow</composite-library-name>
|
||||
</facelet-taglib>
|
||||
@@ -61,8 +61,8 @@ quarkus.rest-client."unionflow-api".scope=jakarta.inject.Singleton
|
||||
quarkus.rest-client."unionflow-api".connect-timeout=5000
|
||||
quarkus.rest-client."unionflow-api".read-timeout=30000
|
||||
|
||||
# Gestion des erreurs REST
|
||||
quarkus.rest-client."unionflow-api".providers=dev.lions.unionflow.client.service.RestClientExceptionMapper
|
||||
# Gestion des erreurs REST + propagation JWT vers le backend
|
||||
quarkus.rest-client."unionflow-api".providers=dev.lions.unionflow.client.service.RestClientExceptionMapper,dev.lions.unionflow.client.security.JwtClientRequestFilter
|
||||
|
||||
# Configuration Keycloak OIDC
|
||||
quarkus.oidc.enabled=true
|
||||
|
||||
Reference in New Issue
Block a user