Configure Maven repository for unionflow-server-api dependency
This commit is contained in:
dahoud
@@ -0,0 +1,355 @@
|
||||
<!DOCTYPE html>
|
||||
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
|
||||
xmlns:ui="http://java.sun.com/jsf/facelets"
|
||||
xmlns:f="http://java.sun.com/jsf/core"
|
||||
xmlns:h="http://java.sun.com/jsf/html"
|
||||
xmlns:p="http://primefaces.org/ui"
|
||||
template="/templates/main-template.xhtml">
|
||||
|
||||
<ui:define name="title">Gestion de la Souscription - UnionFlow</ui:define>
|
||||
|
||||
<ui:define name="head">
|
||||
<style>
|
||||
.subscription-header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 2rem;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.quota-gauge {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.quota-progress {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.quota-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
border-radius: 16px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.feature-active {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.feature-inactive {
|
||||
background: #f3f4f6;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.upgrade-card {
|
||||
border: 2px solid #10b981;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.upgrade-card::before {
|
||||
content: 'RECOMMANDÉ';
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: -30px;
|
||||
background: #10b981;
|
||||
color: white;
|
||||
padding: 4px 40px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
</style>
|
||||
</ui:define>
|
||||
|
||||
<ui:define name="content">
|
||||
<!-- En-tête de souscription -->
|
||||
<div class="subscription-header">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div>
|
||||
<h1 class="text-4xl font-bold mb-2">
|
||||
<i class="#{souscriptionBean.iconeStatut} mr-2"></i>
|
||||
#{souscriptionBean.souscriptionActive.formulaireNom}
|
||||
</h1>
|
||||
<div class="text-xl opacity-90 mb-1">
|
||||
#{souscriptionBean.souscriptionActive.organisationNom}
|
||||
</div>
|
||||
<div class="text-lg opacity-80">
|
||||
Souscription #{souscriptionBean.souscriptionActive.statut.libelle}
|
||||
- #{souscriptionBean.souscriptionActive.typeFacturation.libelle}
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-2xl font-bold mb-1">
|
||||
#{souscriptionBean.souscriptionActive.montantFormat}
|
||||
</div>
|
||||
<div class="opacity-90">
|
||||
Expire le #{souscriptionBean.souscriptionActive.dateFin}
|
||||
</div>
|
||||
<h:panelGroup rendered="#{souscriptionBean.joursAvantExpiration le 30}">
|
||||
<div class="text-yellow-300 font-semibold mt-1">
|
||||
<i class="pi pi-clock mr-1"></i>
|
||||
#{souscriptionBean.joursAvantExpiration} jour(s) restant(s)
|
||||
</div>
|
||||
</h:panelGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alertes quota et expiration -->
|
||||
<h:panelGroup rendered="#{not empty souscriptionBean.alertesQuota}">
|
||||
<div class="grid mb-4">
|
||||
<ui:repeat value="#{souscriptionBean.alertesQuota}" var="alerte">
|
||||
<div class="col-12">
|
||||
<p:message severity="#{alerte.severite}"
|
||||
summary="#{alerte.titre}"
|
||||
detail="#{alerte.message}"
|
||||
closable="false">
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<div class="flex align-items-center">
|
||||
<i class="#{alerte.icone} mr-2"></i>
|
||||
<div>
|
||||
<div class="font-semibold">#{alerte.titre}</div>
|
||||
<div>#{alerte.message}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p:commandButton value="#{alerte.action}"
|
||||
action="#{alerte.actionUrl}"
|
||||
styleClass="p-button-sm p-button-outlined"
|
||||
rendered="#{not empty alerte.action}"/>
|
||||
</div>
|
||||
</p:message>
|
||||
</div>
|
||||
</ui:repeat>
|
||||
</div>
|
||||
</h:panelGroup>
|
||||
|
||||
<div class="grid">
|
||||
<!-- Utilisation du quota -->
|
||||
<div class="col-12 md:col-4">
|
||||
<div class="surface-card p-4 border-round shadow-2">
|
||||
<div class="text-center mb-4">
|
||||
<div class="text-900 font-bold text-xl mb-2">Quota de Membres</div>
|
||||
|
||||
<!-- Jauge circulaire du quota -->
|
||||
<div class="quota-gauge mb-3">
|
||||
<svg width="120" height="120" class="quota-progress">
|
||||
<circle cx="60" cy="60" r="50"
|
||||
stroke="#e5e7eb" stroke-width="8"
|
||||
fill="transparent"/>
|
||||
<circle cx="60" cy="60" r="50"
|
||||
stroke="#{souscriptionBean.couleurJaugeQuota == 'success' ? '#10b981' : souscriptionBean.couleurJaugeQuota == 'warning' ? '#f59e0b' : '#ef4444'}"
|
||||
stroke-width="8"
|
||||
fill="transparent"
|
||||
stroke-dasharray="314"
|
||||
stroke-dashoffset="#{314 - (314 * souscriptionBean.souscriptionActive.pourcentageUtilisation / 100)}"
|
||||
stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div class="quota-text">
|
||||
<div class="text-2xl font-bold text-900">#{souscriptionBean.souscriptionActive.pourcentageUtilisation}%</div>
|
||||
<div class="text-sm text-600">utilisé</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-600 mb-2">
|
||||
#{souscriptionBean.membresActuels} / #{souscriptionBean.quotaMaximum} membres
|
||||
</div>
|
||||
<div class="text-900 font-semibold">
|
||||
#{souscriptionBean.membresRestants} membre(s) restant(s)
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<p:commandButton value="Upgrader"
|
||||
action="#{souscriptionBean.upgraderFormulaire()}"
|
||||
styleClass="p-button-success flex-1"
|
||||
rendered="#{souscriptionBean.alerteQuotaProche or souscriptionBean.quotaAtteint}"/>
|
||||
|
||||
<p:commandButton value="Gérer les membres"
|
||||
action="/pages/secure/membre/liste"
|
||||
styleClass="p-button-outlined flex-1"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Détails de la souscription -->
|
||||
<div class="col-12 md:col-5">
|
||||
<div class="surface-card p-4 border-round shadow-2">
|
||||
<div class="text-900 font-bold text-xl mb-3">Détails de la Souscription</div>
|
||||
|
||||
<div class="formgrid grid">
|
||||
<div class="field col-6">
|
||||
<label class="block text-600 font-medium mb-2">Date de début</label>
|
||||
<div class="text-900">#{souscriptionBean.souscriptionActive.dateDebut}</div>
|
||||
</div>
|
||||
<div class="field col-6">
|
||||
<label class="block text-600 font-medium mb-2">Date de fin</label>
|
||||
<div class="text-900">#{souscriptionBean.souscriptionActive.dateFin}</div>
|
||||
</div>
|
||||
<div class="field col-6">
|
||||
<label class="block text-600 font-medium mb-2">Dernier paiement</label>
|
||||
<div class="text-900">#{souscriptionBean.souscriptionActive.dateDernierPaiement}</div>
|
||||
</div>
|
||||
<div class="field col-6">
|
||||
<label class="block text-600 font-medium mb-2">Prochain paiement</label>
|
||||
<div class="text-900">#{souscriptionBean.souscriptionActive.dateProchainPaiement}</div>
|
||||
</div>
|
||||
<div class="field col-12">
|
||||
<label class="block text-600 font-medium mb-2">Référence de paiement</label>
|
||||
<div class="text-900 font-mono">#{souscriptionBean.souscriptionActive.referencePaiement}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notifications -->
|
||||
<div class="mt-4 pt-3 border-top-1 surface-border">
|
||||
<div class="text-900 font-semibold mb-3">Notifications</div>
|
||||
<div class="flex align-items-center justify-content-between mb-2">
|
||||
<label for="notif-expiration" class="text-900">Expiration de souscription</label>
|
||||
<p:inputSwitch id="notif-expiration"
|
||||
value="#{souscriptionBean.souscriptionActive.notificationExpiration}"
|
||||
onLabel="ON" offLabel="OFF">
|
||||
<p:ajax listener="#{souscriptionBean.activerNotificationExpiration(souscriptionBean.souscriptionActive.notificationExpiration)}" />
|
||||
</p:inputSwitch>
|
||||
</div>
|
||||
<div class="flex align-items-center justify-content-between">
|
||||
<label for="notif-quota" class="text-900">Quota de membres atteint</label>
|
||||
<p:inputSwitch id="notif-quota"
|
||||
value="#{souscriptionBean.souscriptionActive.notificationQuotaAtteint}"
|
||||
onLabel="ON" offLabel="OFF">
|
||||
<p:ajax listener="#{souscriptionBean.activerNotificationQuota(souscriptionBean.souscriptionActive.notificationQuotaAtteint)}" />
|
||||
</p:inputSwitch>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions rapides -->
|
||||
<div class="col-12 md:col-3">
|
||||
<div class="surface-card p-4 border-round shadow-2">
|
||||
<div class="text-900 font-bold text-xl mb-3">Actions</div>
|
||||
|
||||
<div class="flex flex-column gap-3">
|
||||
<p:commandButton value="Renouveler"
|
||||
action="#{souscriptionBean.renouvelerSouscription()}"
|
||||
styleClass="p-button w-full"
|
||||
icon="pi pi-refresh"/>
|
||||
|
||||
<p:commandButton value="Changer de plan"
|
||||
action="#{souscriptionBean.changerFormulaire()}"
|
||||
styleClass="p-button-outlined w-full"
|
||||
icon="pi pi-sync"/>
|
||||
|
||||
<p:commandButton value="Historique des paiements"
|
||||
action="/pages/secure/souscription/historique"
|
||||
styleClass="p-button-outlined w-full"
|
||||
icon="pi pi-history"/>
|
||||
|
||||
<p:commandButton value="Télécharger facture"
|
||||
styleClass="p-button-outlined w-full"
|
||||
icon="pi pi-download"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Formulaires disponibles pour upgrade -->
|
||||
<h:panelGroup rendered="#{souscriptionBean.alerteQuotaProche or souscriptionBean.quotaAtteint}">
|
||||
<div class="surface-card p-6 border-round shadow-2 mt-4">
|
||||
<div class="text-center mb-4">
|
||||
<h2 class="text-900 text-3xl font-bold mb-2">Besoin de plus d'espace ?</h2>
|
||||
<p class="text-600 text-lg">Découvrez nos formules supérieures pour accueillir plus de membres</p>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="surface-border border-round p-4">
|
||||
<div class="text-center mb-3">
|
||||
<div class="bg-green-500 text-white inline-flex align-items-center justify-content-center border-circle mb-3" style="width: 60px; height: 60px;">
|
||||
<i class="pi pi-users text-2xl"></i>
|
||||
</div>
|
||||
<div class="text-900 font-bold text-2xl">Premium</div>
|
||||
<div class="text-600">Jusqu'à 500 membres</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mb-4">
|
||||
<div class="text-900 text-3xl font-bold">4 000 FCFA/mois</div>
|
||||
<div class="text-600">40 000 FCFA/an (économisez 16%)</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-1 mb-4">
|
||||
<span class="feature-badge feature-active">
|
||||
<i class="pi pi-check mr-1"></i>Gestion complète
|
||||
</span>
|
||||
<span class="feature-badge feature-active">
|
||||
<i class="pi pi-check mr-1"></i>Rapports avancés
|
||||
</span>
|
||||
<span class="feature-badge feature-active">
|
||||
<i class="pi pi-check mr-1"></i>Support prioritaire
|
||||
</span>
|
||||
<span class="feature-badge feature-active">
|
||||
<i class="pi pi-check mr-1"></i>Intégrations
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p:commandButton value="Upgrader vers Premium"
|
||||
styleClass="p-button-success w-full"
|
||||
action="/pages/secure/souscription/upgrade?plan=premium"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 md:col-6">
|
||||
<div class="upgrade-card surface-border border-round p-4">
|
||||
<div class="text-center mb-3">
|
||||
<div class="bg-indigo-500 text-white inline-flex align-items-center justify-content-center border-circle mb-3" style="width: 60px; height: 60px;">
|
||||
<i class="pi pi-diamond text-2xl"></i>
|
||||
</div>
|
||||
<div class="text-900 font-bold text-2xl">Cristal</div>
|
||||
<div class="text-600">Jusqu'à 2000 membres</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mb-4">
|
||||
<div class="text-900 text-3xl font-bold">5 000 FCFA/mois</div>
|
||||
<div class="text-600">50 000 FCFA/an (économisez 16%)</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-1 mb-4">
|
||||
<span class="feature-badge feature-active">
|
||||
<i class="pi pi-check mr-1"></i>Tout Premium +
|
||||
</span>
|
||||
<span class="feature-badge feature-active">
|
||||
<i class="pi pi-check mr-1"></i>Personnalisation
|
||||
</span>
|
||||
<span class="feature-badge feature-active">
|
||||
<i class="pi pi-check mr-1"></i>API complète
|
||||
</span>
|
||||
<span class="feature-badge feature-active">
|
||||
<i class="pi pi-check mr-1"></i>Support dédié
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p:commandButton value="Upgrader vers Cristal"
|
||||
styleClass="p-button-help w-full"
|
||||
action="/pages/secure/souscription/upgrade?plan=cristal"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</h:panelGroup>
|
||||
</ui:define>
|
||||
</ui:composition>
|
||||
Reference in New Issue
Block a user