dcb-backoffice/src/app/modules/subscriptions/subscriptions.html

77 lines
2.9 KiB
HTML

<div class="container-fluid">
<app-page-title
title="Abonnements DCB"
subTitle="Gestion et suivi des abonnements de paiement mobile"
[badge]="{icon:'lucideRepeat', text:'Abonnements'}"
/>
<!-- Indicateur de permissions -->
@if (currentUserRole) {
<div class="row mb-3">
<div class="col-12">
<div class="alert alert-info py-2">
<div class="d-flex align-items-center">
<ng-icon name="lucideInfo" class="me-2"></ng-icon>
<div class="flex-grow-1">
<small>
<strong>Rôle actuel :</strong>
<span [class]="getUserBadgeClass()" class="badge">
<ng-icon [name]="getUserBadgeIcon()" class="me-1"></ng-icon>
{{ getUserBadgeText() }}
</span>
@if (currentMerchantId) {
<span class="ms-2">
<strong>Merchant ID :</strong> {{ currentMerchantId }}
</span>
}
</small>
</div>
</div>
</div>
</div>
</div>
}
<!-- Navigation -->
<div class="row mb-4">
<div class="col-12">
@if (activeView === 'list') {
<app-subscriptions-list
(subscriptionSelected)="showDetailsView($event)"
(viewPaymentsRequested)="onViewPaymentsRequested($event)"
/>
} @else if (activeView === 'details' && selectedSubscriptionId) {
<div class="d-flex align-items-center mb-3">
<button class="btn btn-outline-secondary btn-sm me-2" (click)="showListView()">
<ng-icon name="lucideArrowLeft" class="me-1"></ng-icon>
Retour à la liste
</button>
<button class="btn btn-outline-primary btn-sm me-2"
(click)="showPaymentsView(selectedSubscriptionId)">
<ng-icon name="lucideCreditCard" class="me-1"></ng-icon>
Voir les paiements
</button>
<h5 class="mb-0">Détails de l'abonnement</h5>
</div>
<app-subscription-details [subscriptionId]="selectedSubscriptionId" />
} @else if (activeView === 'payments' && selectedSubscriptionId) { <!-- AJOUTER -->
<div class="d-flex align-items-center mb-3">
<button class="btn btn-outline-secondary btn-sm me-2" (click)="showListView()">
<ng-icon name="lucideArrowLeft" class="me-1"></ng-icon>
Retour à la liste
</button>
<button class="btn btn-outline-primary btn-sm me-2"
(click)="showDetailsView(selectedSubscriptionId)">
<ng-icon name="lucideEye" class="me-1"></ng-icon>
Voir les détails
</button>
<h5 class="mb-0">Paiements de l'abonnement</h5>
</div>
<app-subscription-payments
[subscriptionId]="selectedSubscriptionId"
(back)="showListView()"
/>
}
</div>
</div>
</div>