From cd9746a40447b7a7e3cc4228145ffbaffbc3028b Mon Sep 17 00:00:00 2001
From: diallolatoile <diallo.latoile@gmail.com>
Date: Tue, 2 Dec 2025 13:31:50 +0000
Subject: [PATCH] feat: add DCB Reporting Dashboard - Comprehensive analytics
 system with real-time charts and API health monitoring

---
 .../components/dcb-reporting-dashboard.html   |  311 ++--
 .../components/dcb-reporting-dashboard.ts     | 1437 +++++++++++------
 .../models/dcb-reporting.models.ts            |   28 +-
 .../services/dcb-reporting.service.ts         |  400 +++--
 4 files changed, 1420 insertions(+), 756 deletions(-)

diff --git a/src/app/modules/dcb-dashboard/components/dcb-reporting-dashboard.html b/src/app/modules/dcb-dashboard/components/dcb-reporting-dashboard.html
index 4bdc5ce..3889907 100644
--- a/src/app/modules/dcb-dashboard/components/dcb-reporting-dashboard.html
+++ b/src/app/modules/dcb-dashboard/components/dcb-reporting-dashboard.html
@@ -5,7 +5,7 @@
       <div>
         <h1 class="h3 mb-0 text-primary">
           <ng-icon name="lucideLayoutDashboard" class="me-2"></ng-icon>
-          Dashboard Reporting DCB
+          Dashboard FinTech Reporting
         </h1>
         <p class="text-muted mb-0">Surveillance en temps réel des transactions et abonnements</p>
       </div>
@@ -57,29 +57,24 @@
               </button>
             </div>
             
-            <div class="dropdown">
+            <div class="dropdown" ngbDropdown>
               <button class="btn btn-outline-secondary btn-sm dropdown-toggle" 
                       type="button" 
-                      data-bs-toggle="dropdown" 
-                      aria-expanded="false">
+                      ngbDropdownToggle>
                 <ng-icon name="lucideSettings" class="me-1"></ng-icon>
                 Options
               </button>
-              <ul class="dropdown-menu dropdown-menu-end">
-                <li>
-                  <a class="dropdown-item" (click)="checkSystemHealth()">
-                    <ng-icon name="lucideHeartPulse" class="me-2"></ng-icon>
-                    Vérifier la santé
-                  </a>
-                </li>
-                <li><hr class="dropdown-divider"></li>
-                <li>
-                  <a class="dropdown-item" (click)="loadAllData()">
-                    <ng-icon name="lucideRefreshCw" class="me-2"></ng-icon>
-                    Rafraîchir tout
-                  </a>
-                </li>
-              </ul>
+              <div class="dropdown-menu dropdown-menu-end" ngbDropdownMenu>
+                <a class="dropdown-item" href="javascript:void(0)" (click)="checkSystemHealth()">
+                  <ng-icon name="lucideHeartPulse" class="me-2"></ng-icon>
+                  Vérifier la santé
+                </a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="javascript:void(0)" (click)="loadAllData()">
+                  <ng-icon name="lucideRefreshCw" class="me-2"></ng-icon>
+                  Rafraîchir tout
+                </a>
+              </div>
             </div>
           </div>
         </div>
@@ -278,75 +273,132 @@
     </div>
   </div>
 
-  <!-- ==================== SECTION DES GRAPHIQUES ==================== -->
-  <div class="charts-section mb-4">
+  <!-- ==================== SECTION DES GRAPHIQUES FLEXIBLES ==================== -->
+  <div class="charts-section mb-4" *ngIf="!loading.all">
     <div class="row g-4">
-      <!-- Revenue Chart -->
+      <!-- Graphique principal dynamique -->
       <div class="col-xl-8">
         <div class="card h-100">
           <div class="card-header bg-transparent border-bottom-0">
             <div class="d-flex justify-content-between align-items-center">
               <div>
                 <h5 class="card-title mb-0">
-                  <ng-icon name="lucideTrendingUp" class="text-primary me-2"></ng-icon>
-                  Évolution du Revenue
+                  <ng-icon [name]="getMetricIcon(dataSelection.metric)" class="text-primary me-2"></ng-icon>
+                  {{ getChartTitle(dataSelection.metric) }}
                 </h5>
-                <p class="text-muted small mb-0">Courbe des revenus par période</p>
+                <p class="text-muted small mb-0">Visualisation en temps réel</p>
               </div>
               <div class="d-flex gap-2 align-items-center">
-                <button class="btn btn-sm btn-outline-primary" 
-                        (click)="refreshDailyTransactions()"
-                        [disabled]="loading.dailyTransactions">
-                  <ng-icon name="lucideRefreshCw" [class.spin]="loading.dailyTransactions" class="me-1"></ng-icon>
-                  Actualiser
-                </button>
-                <div class="dropdown">
-                  <select class="form-select form-select-sm" 
-                          [(ngModel)]="selectedPeriod" 
-                          (change)="onPeriodChange()"
-                          style="width: 120px;">
-                    <option value="7days">7 jours</option>
-                    <option value="30days">30 jours</option>
-                    <option value="90days">90 jours</option>
-                  </select>
+                <!-- Sélection de métrique -->
+                <div class="dropdown" ngbDropdown>
+                  <button class="btn btn-sm btn-outline-secondary dropdown-toggle" 
+                          type="button" 
+                          ngbDropdownToggle>
+                    <ng-icon [name]="getMetricIcon(dataSelection.metric)" class="me-1"></ng-icon>
+                    {{ getCurrentMetricLabel() }}
+                  </button>
+                  <div class="dropdown-menu dropdown-menu-end" ngbDropdownMenu>
+                    <a *ngFor="let metric of availableMetrics" 
+                      class="dropdown-item d-flex align-items-center" 
+                      href="javascript:void(0)"
+                      (click)="changeMetric(metric.id)">
+                      <ng-icon [name]="metric.icon" class="me-2"></ng-icon>
+                      {{ metric.label }}
+                    </a>
+                  </div>
                 </div>
+                
+                <!-- Sélection de type de graphique -->
+                <div class="btn-group btn-group-sm" role="group">
+                  <button *ngFor="let type of availableChartTypes" 
+                          type="button" 
+                          class="btn btn-outline-secondary"
+                          [class.active]="dataSelection.chartType === type"
+                          (click)="changeChartType(type)"
+                          title="{{ type === 'line' ? 'Courbe' : type === 'bar' ? 'Barres' : type === 'pie' ? 'Camembert' : 'Anneau' }}">
+                    <ng-icon [name]="type === 'line' ? 'lucideTrendingUp' : type === 'bar' ? 'lucideBarChart3' : 'lucidePieChart'"></ng-icon>
+                  </button>
+                </div>
+                
+                <button class="btn btn-sm btn-outline-primary" 
+                        (click)="refreshChartData()"
+                        [disabled]="loading.chart">
+                  <ng-icon name="lucideRefreshCw" [class.spin]="loading.chart" class="me-1"></ng-icon>
+                  Rafraîchir
+                </button>
               </div>
             </div>
           </div>
           <div class="card-body pt-0">
-            <div *ngIf="loading.dailyTransactions" class="text-center py-5">
+            <div *ngIf="loading.chart" class="text-center py-5">
               <div class="spinner-border text-primary"></div>
-              <p class="mt-2 text-muted">Chargement des données...</p>
+              <p class="mt-2 text-muted">Chargement du graphique...</p>
             </div>
-            <div *ngIf="!loading.dailyTransactions && revenueChartData.length === 0" 
+            <div *ngIf="!loading.chart && !dailyTransactions" 
                  class="text-center py-5 text-muted">
               <ng-icon name="lucideBarChart3" class="fs-1 opacity-25"></ng-icon>
               <p class="mt-2">Aucune donnée disponible</p>
+              <button class="btn btn-sm btn-outline-primary mt-2" (click)="loadDailyTransactions()">
+                Charger les données
+              </button>
             </div>
-            <div *ngIf="!loading.dailyTransactions && revenueChartData.length > 0" 
+            <div *ngIf="!loading.chart && dailyTransactions" 
                  class="position-relative" style="height: 300px;">
-              <canvas #revenueChart></canvas>
+              <canvas #mainChartCanvas></canvas>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- Performance & Santé -->
+      <!-- Panneau droit avec 2 mini-graphiques -->
       <div class="col-xl-4">
         <div class="row h-100 g-4">
-          <!-- Taux de succès -->
+          <!-- Graphique de comparaison -->
           <div class="col-12">
             <div class="card h-100">
               <div class="card-header bg-transparent border-bottom-0">
-                <h5 class="card-title mb-0">
-                  <ng-icon name="lucideActivity" class="text-success me-2"></ng-icon>
-                  Performance
-                </h5>
+                <div class="d-flex justify-content-between align-items-center">
+                  <h5 class="card-title mb-0">
+                    <ng-icon name="lucideBarChart3" class="text-info me-2"></ng-icon>
+                    Comparaison Hebdo/Mens
+                  </h5>
+                  <small class="text-muted">Dernières 8 périodes</small>
+                </div>
+              </div>
+              <div class="card-body pt-0">
+                <div *ngIf="!weeklyTransactions || !monthlyTransactions" 
+                     class="text-center py-4 text-muted">
+                  <ng-icon name="lucideBarChart3" class="fs-1 opacity-25 mb-2 d-block"></ng-icon>
+                  <small>Données de comparaison indisponibles</small>
+                </div>
+                <div *ngIf="weeklyTransactions && monthlyTransactions" 
+                     class="position-relative" style="height: 180px;">
+                  <canvas #comparisonChartCanvas></canvas>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Taux de succès circulaire -->
+          <div class="col-12">
+            <div class="card h-100">
+              <div class="card-header bg-transparent border-bottom-0">
+                <div class="d-flex justify-content-between align-items-center">
+                  <h5 class="card-title mb-0">
+                    <ng-icon name="lucideActivity" class="text-success me-2"></ng-icon>
+                    Performance Globale
+                  </h5>
+                  <button class="btn btn-sm btn-outline-success btn-sm" 
+                          (click)="refreshDailyTransactions()"
+                          [disabled]="loading.dailyTransactions">
+                    <ng-icon name="lucideRefreshCw" [class.spin]="loading.dailyTransactions"></ng-icon>
+                  </button>
+                </div>
               </div>
               <div class="card-body">
-                <div class="text-center mb-4">
+                <div class="text-center mb-3">
                   <div class="position-relative d-inline-block">
-                    <canvas #successRateChart width="120" height="120"></canvas>
+                    <canvas #successRateChartCanvas width="140" height="140"></canvas>
                     <div class="position-absolute top-50 start-50 translate-middle">
                       <h3 class="fw-bold mb-0" [ngClass]="getSuccessRateClass(stats.successRate)">
                         {{ stats.successRate | number:'1.0-0' }}%
@@ -356,73 +408,115 @@
                   </div>
                 </div>
                 
-                <div class="row text-center">
-                  <div class="col-6">
-                    <div class="border-end">
+                <div class="row text-center g-2">
+                  <div class="col-4">
+                    <div class="p-2 border rounded bg-success bg-opacity-10">
                       <div class="text-success fw-bold">
-                        <ng-icon name="lucideCheckCircle" class="me-1"></ng-icon>
                         {{ formatNumber(dailyTransactions?.items?.[0]?.successCount || 0) }}
                       </div>
                       <small class="text-muted">Réussies</small>
                     </div>
                   </div>
-                  <div class="col-6">
-                    <div class="text-danger fw-bold">
-                      <ng-icon name="lucideXCircle" class="me-1"></ng-icon>
-                      {{ formatNumber(dailyTransactions?.items?.[0]?.failedCount || 0) }}
+                  <div class="col-4">
+                    <div class="p-2 border rounded bg-danger bg-opacity-10">
+                      <div class="text-danger fw-bold">
+                        {{ formatNumber(dailyTransactions?.items?.[0]?.failedCount || 0) }}
+                      </div>
+                      <small class="text-muted">Échouées</small>
+                    </div>
+                  </div>
+                  <div class="col-4">
+                    <div class="p-2 border rounded bg-info bg-opacity-10">
+                      <div class="text-info fw-bold">
+                        {{ formatNumber(dailyTransactions?.items?.[0]?.pendingCount || 0) }}
+                      </div>
+                      <small class="text-muted">En attente</small>
                     </div>
-                    <small class="text-muted">Échouées</small>
                   </div>
                 </div>
               </div>
             </div>
           </div>
+        </div>
+      </div>
+    </div>
+  </div>
 
-          <!-- Santé du système -->
-          <div class="col-12">
-            <div class="card h-100">
-              <div class="card-header bg-transparent border-bottom-0">
-                <div class="d-flex justify-content-between align-items-center">
-                  <h5 class="card-title mb-0">
-                    <ng-icon name="lucideHeartPulse" class="text-danger me-2"></ng-icon>
-                    Santé du système
-                  </h5>
-                  <button class="btn btn-sm btn-outline-danger" 
-                          (click)="refreshHealthCheck()"
-                          [disabled]="loading.healthCheck">
-                    <ng-icon name="lucideRefreshCw" [class.spin]="loading.healthCheck"></ng-icon>
-                  </button>
-                </div>
+  <!-- ==================== SECTION SANTÉ DES APIS ==================== -->
+  <div class="health-section mb-4">
+    <div class="card">
+      <div class="card-header bg-transparent border-bottom-0">
+        <div class="d-flex justify-content-between align-items-center">
+          <div>
+            <h5 class="card-title mb-0">
+              <ng-icon name="lucideServer" class="text-dark me-2"></ng-icon>
+              Santé des APIs DCB
+            </h5>
+            <p class="text-muted small mb-0">Statut en temps réel des services backend</p>
+          </div>
+          <div class="d-flex gap-2 align-items-center">
+            <div class="alert" [ngClass]="'alert-' + overallHealth.color">
+              <div class="d-flex align-items-center">
+                <ng-icon [name]="overallHealth.icon" class="me-2"></ng-icon>
+                <small class="fw-medium">{{ overallHealth.message }}</small>
               </div>
+            </div>
+            <button class="btn btn-sm btn-outline-danger" 
+                    (click)="refreshHealthCheck()"
+                    [disabled]="loading.healthCheck">
+              <ng-icon name="lucideRefreshCw" [class.spin]="loading.healthCheck"></ng-icon>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="row g-3">
+          <div *ngFor="let service of systemHealth" class="col-xl-3 col-md-6">
+            <div class="card h-100" [ngClass]="'border-' + service.color">
               <div class="card-body">
-                <div class="system-health-list">
-                  <div *ngFor="let service of systemHealth" class="health-item mb-2">
-                    <div class="d-flex justify-content-between align-items-center">
-                      <div class="d-flex align-items-center">
-                        <div class="health-indicator me-2" [ngClass]="'indicator-' + service.color"></div>
-                        <span class="small">{{ service.service }}</span>
-                      </div>
-                      <div>
-                        <small class="text-muted me-2" *ngIf="service.responseTime">
-                          {{ service.responseTime }}ms
-                        </small>
-                        <span class="badge" [ngClass]="'bg-' + service.color">
-                          {{ service.status }}
-                        </span>
-                      </div>
-                    </div>
+                <div class="d-flex justify-content-between align-items-start mb-2">
+                  <div>
+                    <h6 class="mb-0">{{ service.service }}</h6>
+                    <small class="text-muted">{{ service.url }}</small>
+                  </div>
+                  <div class="d-flex flex-column align-items-end">
+                    <span class="badge mb-1" [ngClass]="'bg-' + service.color">
+                      {{ service.status }}
+                    </span>
+                    <small class="text-muted" [ngClass]="getStatusCodeClass(service.statusCode)">
+                      {{ service.statusCode }}
+                    </small>
                   </div>
                 </div>
-                <div class="mt-3 text-center">
-                  <small class="text-muted">
-                    <ng-icon name="lucideClock" class="me-1"></ng-icon>
-                    Dernière vérification: {{ formatTimeAgo(systemHealth[0]?.lastChecked) }}
+                <div class="d-flex justify-content-between align-items-center mt-3">
+                  <div>
+                    <small class="text-muted">
+                      <ng-icon name="lucideClock" class="me-1"></ng-icon>
+                      {{ formatTimeAgo(service.checkedAt) }}
+                    </small>
+                  </div>
+                  <div *ngIf="service.responseTime">
+                    <small class="text-muted" [ngClass]="getResponseTimeClass(service.responseTime)">
+                      {{ service.responseTime }}
+                    </small>
+                  </div>
+                </div>
+                <div *ngIf="service.error" class="mt-2">
+                  <small class="text-danger">
+                    <ng-icon name="lucideAlertTriangle" class="me-1"></ng-icon>
+                    {{ service.error }}
                   </small>
                 </div>
               </div>
             </div>
           </div>
         </div>
+        <div class="mt-3 text-center">
+          <small class="text-muted">
+            <ng-icon name="lucideInfo" class="me-1"></ng-icon>
+            Vérification automatique toutes les 5 minutes
+          </small>
+        </div>
       </div>
     </div>
   </div>
@@ -456,28 +550,23 @@
               <table class="table table-hover mb-0">
                 <thead class="table-light">
                   <tr>
-                    <th class="ps-3">Date/Heure</th>
+                    <th class="ps-3">Période</th>
                     <th class="text-end">Montant</th>
-                    <th class="text-end">Statut</th>
-                    <th class="text-end pe-3">Taux</th>
+                    <th class="text-end">Transactions</th>
+                    <th class="text-end pe-3">Succès</th>
                   </tr>
                 </thead>
                 <tbody>
                   <tr *ngFor="let item of (dailyTransactions?.items?.slice(0, 5) || [])">
                     <td class="ps-3">
                       <div>{{ item.period }}</div>
-                      <small class="text-muted">{{ formatNumber(item.count) }} transactions</small>
+                      <small class="text-muted">{{ item.merchantPartnerId ? 'Merchant ' + item.merchantPartnerId : 'Tous' }}</small>
                     </td>
                     <td class="text-end">
                       <div class="fw-medium">{{ formatCurrency(item.totalAmount) }}</div>
                     </td>
                     <td class="text-end">
-                      <span class="badge bg-success bg-opacity-10 text-success">
-                        {{ item.successCount || 0 }} ✓
-                      </span>
-                      <span class="badge bg-danger bg-opacity-10 text-danger ms-1">
-                        {{ item.failedCount || 0 }} ✗
-                      </span>
+                      <div>{{ formatNumber(item.count) }}</div>
                     </td>
                     <td class="text-end pe-3">
                       <span [ngClass]="getSuccessRateClass((item.count > 0 ? (item.successCount / item.count) * 100 : 0))">
@@ -499,7 +588,7 @@
             <div class="d-flex justify-content-between align-items-center">
               <small class="text-muted">
                 <ng-icon name="lucideInfo" class="me-1"></ng-icon>
-                Affichage des {{ (dailyTransactions?.items?.slice(0, 5) || []).length }} dernières périodes
+                {{ (dailyTransactions?.items?.length || 0) }} périodes au total
               </small>
               <a href="#" class="btn btn-sm btn-outline-primary">Voir tout</a>
             </div>
@@ -564,7 +653,7 @@
             <div class="d-flex justify-content-between align-items-center">
               <small class="text-muted">
                 <ng-icon name="lucideClock" class="me-1"></ng-icon>
-                Dernière vérification: {{ lastUpdated | date:'HH:mm:ss' }}
+                Dernière vérification: {{ formatTimeAgo(alerts[0]?.timestamp) || 'Jamais' }}
               </small>
               <button class="btn btn-sm btn-outline-warning" (click)="checkSystemHealth()">
                 <ng-icon name="lucideRefreshCw" class="me-1"></ng-icon>
@@ -584,11 +673,11 @@
         <div class="d-flex justify-content-between align-items-center">
           <div class="text-muted small">
             <ng-icon name="lucideCode" class="me-1"></ng-icon>
-            Dashboard Reporting DCB v1.0
+            Dashboard FinTech v2.0
           </div>
           <div class="text-muted small">
             <ng-icon name="lucideDatabase" class="me-1"></ng-icon>
-            Données extraites de l'API Reporting Service DCB
+            APIs: IAM, Config, Core, Reporting
           </div>
           <div class="text-muted small">
             <ng-icon name="lucideClock" class="me-1"></ng-icon>
diff --git a/src/app/modules/dcb-dashboard/components/dcb-reporting-dashboard.ts b/src/app/modules/dcb-dashboard/components/dcb-reporting-dashboard.ts
index c6dcdba..0c07ec6 100644
--- a/src/app/modules/dcb-dashboard/components/dcb-reporting-dashboard.ts
+++ b/src/app/modules/dcb-dashboard/components/dcb-reporting-dashboard.ts
@@ -1,32 +1,75 @@
-import { Component, OnInit, OnDestroy, AfterViewInit, ChangeDetectorRef, inject } from '@angular/core';
+import { 
+  Component, 
+  OnInit, 
+  OnDestroy, 
+  inject, 
+  ViewChild, 
+  ElementRef, 
+  AfterViewInit, 
+  ChangeDetectorRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { catchError, finalize, tap } from 'rxjs/operators';
 import { of, Subscription, forkJoin, Observable } from 'rxjs';
+import { Chart, ChartConfiguration as ChartJsConfiguration, registerables } from 'chart.js';
+import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap';
 
-import { Chart, ChartConfiguration, registerables } from 'chart.js';
-import { ViewChild, ElementRef } from '@angular/core';
-import { NgIconComponent } from '@ng-icons/core';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { 
+  lucideActivity, lucideAlertCircle, lucideCheckCircle2, lucideRefreshCw, 
+  lucideServer, lucideXCircle, lucideClock, lucideWifi, lucideWifiOff,
+  lucideTrendingUp, lucideBarChart3, lucidePieChart, lucideCalendar,
+  lucideDollarSign, lucideUsers, lucideCreditCard, lucideSettings,
+  lucideLayoutDashboard, lucideStore, lucideFilter, lucideHeartPulse,
+  lucideCpu, lucidePhone, lucideTrophy, lucidePlus, lucideListChecks,
+  lucideDatabase, lucideInfo, lucideBell, lucideCode
+} from '@ng-icons/lucide';
 
-// Import des icônes Lucide
-import { NgIcon } from '@ng-icons/core';
-
-// Import du SERVICE plutôt que de refaire les requêtes HTTP
 import {
-  DcbReportingService,
   TransactionReport,
   SubscriptionReport,
   SyncResponse,
-  ReportParams
-} from '../services/dcb-reporting.service';
+  HealthCheckStatus,
+  ChartDataNormalized,
+  ReportPeriod
+} from '../models/dcb-reporting.models';
+import { ReportService } from '../services/dcb-reporting.service';
+
+// ============ TYPES ET INTERFACES ============
+
+// Types de graphiques supportés
+export type ChartType = 'line' | 'bar' | 'pie' | 'doughnut';
+
+// Alias pour ChartConfiguration pour éviter les conflits de noms
+type ChartConfiguration = ChartJsConfiguration;
+
+// Configuration de graphique personnalisée
+export interface ChartConfig {
+  type: ChartType;
+  data: ChartDataNormalized;
+  title?: string;
+  colors?: {
+    background?: string | string[];
+    border?: string;
+    hover?: string;
+  };
+  options?: {
+    responsive?: boolean;
+    maintainAspectRatio?: boolean;
+    plugins?: any;
+    scales?: any;
+  };
+}
 
 interface ServiceHealth {
   service: string;
-  status: string;
+  status: 'UP' | 'DOWN';
   color: string;
   url: string;
-  responseTime?: number;
-  lastChecked: Date;
+  statusCode: number;
+  responseTime?: string;
+  checkedAt: string;
+  error?: string;
 }
 
 interface Alert {
@@ -37,18 +80,86 @@ interface Alert {
   timestamp: Date;
 }
 
+// État de sélection des données
+interface DataSelection {
+  metric: 'revenue' | 'transactions' | 'successRate' | 'activeSubscriptions';
+  period: ReportPeriod;
+  chartType: ChartType;
+  merchantPartnerId?: number;
+}
+
+// Interface pour les métriques
+interface MetricOption {
+  id: 'revenue' | 'transactions' | 'successRate' | 'activeSubscriptions';
+  label: string;
+  icon: string;
+}
+
+// Interface pour les statistiques de paiement
+interface PaymentStats {
+  daily: {
+    transactions: number;
+    revenue: number;
+    successRate: number;
+  };
+  weekly: {
+    transactions: number;
+    revenue: number;
+    successRate: number;
+  };
+  monthly: {
+    transactions: number;
+    revenue: number;
+    successRate: number;
+  };
+  yearly: {
+    transactions: number;
+    revenue: number;
+    successRate: number;
+  };
+  overallSuccessRate: number;
+}
+
+// Interface pour les statistiques d'abonnement
+interface SubscriptionStats {
+  total: number;
+  active: number;
+  newToday: number;
+  cancelled: number;
+  activePercentage: number;
+}
+
+// ============ COMPOSANT ============
+
 @Component({
   selector: 'app-dcb-reporting-dashboard',
   templateUrl: './dcb-reporting-dashboard.html',
   styleUrls: ['./dcb-reporting-dashboard.css'],
   standalone: true,
-  imports: [CommonModule,NgIcon, FormsModule, NgIconComponent],
-  
+  imports: [CommonModule, FormsModule, NgIconComponent],
+  providers: [
+    provideIcons({ 
+      lucideActivity, lucideAlertCircle, lucideCheckCircle2, lucideRefreshCw, 
+      lucideServer, lucideXCircle, lucideClock, lucideWifi, lucideWifiOff,
+      lucideTrendingUp, lucideBarChart3, lucidePieChart, lucideCalendar,
+      lucideDollarSign, lucideUsers, lucideCreditCard, lucideSettings,
+      lucideLayoutDashboard, lucideStore, lucideFilter, lucideHeartPulse,
+      lucideCpu, lucidePhone, lucideTrophy, lucidePlus, lucideListChecks,
+      lucideDatabase, lucideInfo, lucideBell, lucideCode
+    })
+  ]
 })
 export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
   private subscriptions: Subscription[] = [];
-  private reportingService = inject(DcbReportingService);
-  private cdr = inject(ChangeDetectorRef);
+  private reportService = inject(ReportService);
+  
+  // Canvas pour les graphiques
+  @ViewChild('mainChartCanvas') mainChartCanvas!: ElementRef<HTMLCanvasElement>;
+  @ViewChild('comparisonChartCanvas') comparisonChartCanvas!: ElementRef<HTMLCanvasElement>;
+  @ViewChild('successRateChartCanvas') successRateChartCanvas!: ElementRef<HTMLCanvasElement>;
+
+  @ViewChild('metricDropdown') metricDropdown?: NgbDropdown;
+  @ViewChild('optionsDropdown') optionsDropdown?: NgbDropdown;
 
   // ============ DONNÉES ============
   dailyTransactions: TransactionReport | null = null;
@@ -62,13 +173,40 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
   merchantSubscriptions: SubscriptionReport | null = null;
   
   syncResponse: SyncResponse | null = null;
+  healthStatus: HealthCheckStatus[] = [];
+  
+  // ============ CONFIGURATION DES GRAPHIQUES ============
+  
+  chartConfigs: ChartConfig[] = [];
+  currentChartType: ChartType = 'line';
+  availableChartTypes: ChartType[] = ['line', 'bar', 'pie', 'doughnut'];
+  
+  dataSelection: DataSelection = {
+    metric: 'revenue',
+    period: 'daily',
+    chartType: 'line',
+    merchantPartnerId: undefined
+  };
+  
+  availableMetrics: MetricOption[] = [
+      { id: 'revenue', label: 'Revenue', icon: 'lucideDollarSign' },
+      { id: 'transactions', label: 'Transactions', icon: 'lucideCreditCard' },
+      { id: 'successRate', label: 'Taux de succès', icon: 'lucideActivity' },
+      { id: 'activeSubscriptions', label: 'Abonnements actifs', icon: 'lucideUsers' }
+  ];
+  
+  availablePeriods = [
+    { id: 'daily', label: 'Jour' },
+    { id: 'weekly', label: 'Semaine' },
+    { id: 'monthly', label: 'Mois' },
+    { id: 'yearly', label: 'Année' }
+  ];
   
   // ============ PARAMÈTRES ============
   merchantId: number = 4;
   startDate: string = new Date().toISOString().split('T')[0];
   endDate: string = new Date().toISOString().split('T')[0];
   currentYear = new Date().getFullYear();
-  selectedPeriod: string = '7days';
   
   // ============ ÉTATS ============
   loading = {
@@ -82,66 +220,18 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
     dailySubscriptions: false,
     merchantSubscriptions: false,
     sync: false,
-    healthCheck: false
+    healthCheck: false,
+    chart: false
   };
   
   errors: { [key: string]: string } = {};
   lastUpdated = new Date();
   
   // ============ SANTÉ DU SYSTÈME ============
-  systemHealth: ServiceHealth[] = [
-    { 
-      service: 'Transactions Quotidiennes', 
-      status: 'Checking...', 
-      color: 'warning',
-      url: 'transactions/daily',
-      lastChecked: new Date()
-    },
-    { 
-      service: 'Transactions Hebdomadaires', 
-      status: 'Checking...', 
-      color: 'warning',
-      url: 'transactions/weekly',
-      lastChecked: new Date()
-    },
-    { 
-      service: 'Transactions Mensuelles', 
-      status: 'Checking...', 
-      color: 'warning',
-      url: 'transactions/monthly',
-      lastChecked: new Date()
-    },
-    { 
-      service: 'Abonnements Quotidiens', 
-      status: 'Checking...', 
-      color: 'warning',
-      url: 'subscriptions/daily',
-      lastChecked: new Date()
-    },
-    { 
-      service: 'Abonnements Mensuels', 
-      status: 'Checking...', 
-      color: 'warning',
-      url: 'subscriptions/monthly',
-      lastChecked: new Date()
-    },
-    { 
-      service: 'Synchronisation', 
-      status: 'Checking...', 
-      color: 'warning',
-      url: 'sync/full',
-      lastChecked: new Date()
-    }
-  ];
+  systemHealth: ServiceHealth[] = [];
   
   alerts: Alert[] = [];
   
-  revenueChartData: any[] = [];
-  successChartData: any[] = [];
-  operatorData = [
-    { name: 'Orange', rate: 98.5, color: 'success' }
-  ];
-  
   stats = {
     totalRevenue: 0,
     totalTransactions: 0,
@@ -158,49 +248,125 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
     offlineServices: 0
   };
 
-  @ViewChild('successRateChart') successRateChartRef!: ElementRef<HTMLCanvasElement>;
-  @ViewChild('revenueChart') revenueChartRef!: ElementRef<HTMLCanvasElement>;
-  private successRateChart: Chart | null = null;
-  private revenueChart: Chart | null = null;
+  // Nouveau : Statut global du health check
+  overallHealth: {
+    status: 'healthy' | 'warning' | 'critical';
+    message: string;
+    icon: string;
+    color: string;
+  } = {
+    status: 'healthy',
+    message: 'Tous les services sont opérationnels',
+    icon: 'lucideCheckCircle2',
+    color: 'success'
+  };
   
-  constructor() {
+  // ============ COULEURS POUR LES GRAPHIQUES ============
+  private readonly chartColors = {
+    primary: {
+      background: 'rgba(13, 110, 253, 0.1)',
+      border: '#0d6efd',
+      hover: 'rgba(13, 110, 253, 0.3)'
+    },
+    success: {
+      background: 'rgba(40, 167, 69, 0.1)',
+      border: '#28a745',
+      hover: 'rgba(40, 167, 69, 0.3)'
+    },
+    warning: {
+      background: 'rgba(255, 193, 7, 0.1)',
+      border: '#ffc107',
+      hover: 'rgba(255, 193, 7, 0.3)'
+    },
+    danger: {
+      background: 'rgba(220, 53, 69, 0.1)',
+      border: '#dc3545',
+      hover: 'rgba(220, 53, 69, 0.3)'
+    },
+    info: {
+      background: 'rgba(23, 162, 184, 0.1)',
+      border: '#17a2b8',
+      hover: 'rgba(23, 162, 184, 0.3)'
+    },
+    palette: [
+      '#0d6efd', '#6610f2', '#6f42c1', '#d63384', '#fd7e14',
+      '#20c997', '#198754', '#0dcaf0', '#6c757d', '#ffc107'
+    ]
+  };
+  
+  constructor(
+    private cdr: ChangeDetectorRef
+  ) {
     Chart.register(...registerables);
   }
   
   ngOnInit(): void {
-    // Charger les données immédiatement
+    // Charger les données et vérifier la santé des APIs
     this.loadAllData();
     this.checkSystemHealth();
+    
+    // Planifier des vérifications périodiques toutes les 5 minutes
+    setInterval(() => {
+      this.checkSystemHealth();
+    }, 5 * 60 * 1000);
   }
 
   ngAfterViewInit(): void {
-    // Initialiser les graphiques après que la vue soit rendue
+    // Initialiser les graphiques après le chargement initial
     setTimeout(() => {
-      this.initCharts();
-    }, 100);
+      this.updateAllCharts();
+    }, 500);
   }
 
   ngOnDestroy(): void {
     this.subscriptions.forEach(sub => sub.unsubscribe());
-    if (this.successRateChart) {
-      this.successRateChart.destroy();
-    }
-    if (this.revenueChart) {
-      this.revenueChart.destroy();
-    }
   }
 
-  // ============ MÉTHODES AJOUTÉES POUR LE TEMPLATE ============
-  loadDailySubscriptionsObservable(): Observable<any> {
-    return this.loadDailySubscriptions();
+  // ============ MÉTHODES POUR LE TEMPLATE ============
+  
+  getPaymentStats(): PaymentStats {
+    return {
+      daily: {
+        transactions: this.dailyTransactions?.totalCount || 0,
+        revenue: this.dailyTransactions?.totalAmount || 0,
+        successRate: this.getSuccessRate(this.dailyTransactions)
+      },
+      weekly: {
+        transactions: this.weeklyTransactions?.totalCount || 0,
+        revenue: this.weeklyTransactions?.totalAmount || 0,
+        successRate: this.getSuccessRate(this.weeklyTransactions)
+      },
+      monthly: {
+        transactions: this.monthlyTransactions?.totalCount || 0,
+        revenue: this.monthlyTransactions?.totalAmount || 0,
+        successRate: this.getSuccessRate(this.monthlyTransactions)
+      },
+      yearly: {
+        transactions: this.stats.yearlyTransactions,
+        revenue: this.stats.yearlyRevenue,
+        successRate: this.stats.avgSuccessRate
+      },
+      overallSuccessRate: this.stats.successRate
+    };
   }
 
-  loadMerchantSubscriptionsObservable(): Observable<any> {
-    return this.loadMerchantSubscriptions();
+  getSubscriptionStats(): SubscriptionStats {
+    const dailyItem = this.dailySubscriptions?.items?.[0];
+    return {
+      total: this.dailySubscriptions?.totalCount || 0,
+      active: this.stats.activeSubscriptions,
+      newToday: dailyItem?.count || 0,
+      cancelled: dailyItem?.cancelledCount || 0,
+      activePercentage: this.dailySubscriptions?.totalCount ? 
+        (this.stats.activeSubscriptions / this.dailySubscriptions.totalCount) * 100 : 0
+    };
   }
 
-  loadDailyTransactionsObservable(): Observable<any> {
-    return this.loadDailyTransactions();
+  getPerformanceLabel(successRate: number): string {
+    if (successRate >= 95) return 'Excellent';
+    if (successRate >= 90) return 'Bon';
+    if (successRate >= 80) return 'Moyen';
+    return 'À améliorer';
   }
 
   getAlertBadgeClass(): string {
@@ -210,140 +376,597 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
     return 'bg-info';
   }
 
-  getTotalSuccessCount(): number {
-    if (!this.dailyTransactions?.items) return 0;
-    return this.dailyTransactions.items.reduce((sum: number, item) => 
-      sum + (item.successCount || 0), 0);
-  }
-
-  getTotalActiveCount(): number {
-    if (!this.merchantSubscriptions?.items) return 0;
-    return this.merchantSubscriptions.items.reduce((sum: number, item) => 
-      sum + (item.activeCount || 0), 0);
-  }
-
-  getActiveRate(): number {
-    if (!this.merchantSubscriptions?.totalCount) return 0;
-    return (this.getTotalActiveCount() / this.merchantSubscriptions.totalCount) * 100;
-  }
-
-  getOverallSuccessRate(): number {
-    const totalTransactions = this.getTotalSuccessCount() + 
-      (this.dailyTransactions?.items?.reduce((sum: number, item) => 
-        sum + (item.failedCount || 0), 0) || 0);
+  // ============ GESTION DES GRAPHIQUES ============
+  /**
+   * Met à jour tous les graphiques
+   */
+  updateAllCharts(): void {
+    if (!this.dailyTransactions) {
+      console.warn('Données quotidiennes non disponibles');
+      return;
+    }
     
-    if (totalTransactions === 0) return 0;
-    return (this.getTotalSuccessCount() / totalTransactions) * 100;
+    try {
+      console.log('Mise à jour des graphiques...');
+      
+      if (this.mainChartCanvas?.nativeElement) {
+        console.log('Mise à jour du graphique principal');
+        this.updateMainChart();
+      } else {
+        console.warn('Canvas principal non disponible');
+      }
+      
+      if (this.comparisonChartCanvas?.nativeElement && this.weeklyTransactions && this.monthlyTransactions) {
+        console.log('Mise à jour du graphique de comparaison');
+        this.updateComparisonChart();
+      } else {
+        console.warn('Canvas de comparaison ou données non disponibles');
+      }
+      
+      if (this.successRateChartCanvas?.nativeElement) {
+        console.log('Mise à jour du graphique de taux de succès');
+        this.updateSuccessRateChart();
+      } else {
+        console.warn('Canvas de taux de succès non disponible');
+      }
+      
+      console.log('Graphiques mis à jour avec succès');
+      
+    } catch (error) {
+      console.error('Erreur lors de la mise à jour des graphiques:', error);
+    }
+  }
+  /**
+   * Met à jour le graphique de comparaison
+   */
+  updateComparisonChart(): void {
+    if (!this.comparisonChartCanvas?.nativeElement || !this.weeklyTransactions || !this.monthlyTransactions) {
+      console.warn('Canvas ou données manquants pour le graphique de comparaison');
+      return;
+    }
+    
+    const ctx = this.comparisonChartCanvas.nativeElement.getContext('2d');
+    if (!ctx) {
+      console.error('Impossible d\'obtenir le contexte 2D du canvas');
+      return;
+    }
+    
+    try {
+      // Détruire l'ancien graphique si existe
+      const existingChart = (ctx as any).chart;
+      if (existingChart) {
+        existingChart.destroy();
+      }
+      
+      // Normaliser les données hebdomadaires et mensuelles
+      const weeklyData = this.reportService.normalizeForChart(this.weeklyTransactions, 'totalAmount');
+      const monthlyData = this.reportService.normalizeForChart(this.monthlyTransactions, 'totalAmount');
+      
+      if (!weeklyData || !monthlyData) {
+        console.warn('Données de normalisation manquantes');
+        return;
+      }
+      
+      // Prendre les 8 dernières périodes
+      const labels = weeklyData.labels.slice(-8);
+      const weeklyValues = weeklyData.dataset.slice(-8);
+      const monthlyValues = monthlyData.dataset.slice(-8);
+      
+      const config: ChartJsConfiguration<'bar'> = {
+        type: 'bar',
+        data: {
+          labels: labels,
+          datasets: [
+            {
+              label: 'Hebdomadaire',
+              data: weeklyValues,
+              backgroundColor: this.chartColors.primary.background,
+              borderColor: this.chartColors.primary.border,
+              borderWidth: 1
+            },
+            {
+              label: 'Mensuel',
+              data: monthlyValues,
+              backgroundColor: this.chartColors.success.background,
+              borderColor: this.chartColors.success.border,
+              borderWidth: 1
+            }
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              position: 'top',
+            },
+            tooltip: {
+              callbacks: {
+                label: (context: any) => {
+                  const value = context.raw;
+                  if (this.dataSelection.metric === 'revenue') {
+                    return `${this.formatCurrency(value)}`;
+                  }
+                  return `${this.formatNumber(value)}`;
+                }
+              }
+            }
+          },
+          scales: {
+            y: {
+              beginAtZero: true,
+              ticks: {
+                callback: (value: any) => {
+                  if (typeof value === 'number') {
+                    if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
+                    if (value >= 1000) return `${(value / 1000).toFixed(0)}K`;
+                    return value;
+                  }
+                  return value;
+                }
+              }
+            }
+          }
+        }
+      };
+      
+      // Utilisez Chart directement, pas window.Chart
+      const newChart = new Chart(ctx, config);
+      (ctx as any).chart = newChart;
+      
+    } catch (error) {
+      console.error('Erreur lors de la création du graphique de comparaison:', error);
+    }
   }
 
-  formatTimeAgo(date: Date | undefined): string {
-    if (!date) return 'Jamais';
+  /**
+   * Met à jour le graphique principal
+   */
+  updateMainChart(): void {
+    if (!this.mainChartCanvas?.nativeElement) {
+      console.warn('Canvas non disponible pour le graphique principal');
+      return;
+    }
     
-    const now = new Date();
-    const diffMs = now.getTime() - date.getTime();
-    const diffMins = Math.floor(diffMs / 60000);
+    const ctx = this.mainChartCanvas.nativeElement.getContext('2d');
+    if (!ctx) {
+      console.error('Impossible d\'obtenir le contexte 2D du canvas');
+      return;
+    }
     
-    if (diffMins < 1) return 'À l\'instant';
-    if (diffMins < 60) return `Il y a ${diffMins} min`;
-    if (diffMins < 1440) return `Il y a ${Math.floor(diffMins / 60)} h`;
-    return `Il y a ${Math.floor(diffMins / 1440)} j`;
+    try {
+      // Détruire l'ancien graphique si existe
+      const existingChart = (ctx as any).chart;
+      if (existingChart) {
+        existingChart.destroy();
+      }
+      
+      this.loading.chart = true;
+      
+      // Obtenir les données normalisées
+      const normalizedData = this.getNormalizedDataForMetric(
+        this.dataSelection.metric,
+        this.dataSelection.period,
+        this.dataSelection.merchantPartnerId
+      );
+      
+      if (!normalizedData || normalizedData.labels.length === 0) {
+        console.warn('Données insuffisantes pour le graphique');
+        this.loading.chart = false;
+        return;
+      }
+      
+      // Créer la configuration du graphique
+      const config = this.createChartConfig(
+        normalizedData,
+        this.dataSelection.chartType,
+        this.getChartTitle(this.dataSelection.metric)
+      );
+      
+      // Créer le nouveau graphique
+      const newChart = new Chart(ctx, config);
+      (ctx as any).chart = newChart;
+      
+      this.loading.chart = false;
+      
+      // Forcer la détection de changement
+      this.cdr.detectChanges();
+      
+    } catch (error) {
+      console.error('Erreur lors de la création du graphique principal:', error);
+      this.loading.chart = false;
+      this.cdr.detectChanges();
+    }
+  }
+  
+  /**
+   * Met à jour le graphique de taux de succès
+   */
+  updateSuccessRateChart(): void {
+    if (!this.successRateChartCanvas?.nativeElement || !this.dailyTransactions) {
+      console.warn('Canvas ou données manquants pour le graphique de taux de succès');
+      return;
+    }
+    
+    const ctx = this.successRateChartCanvas.nativeElement.getContext('2d');
+    if (!ctx) {
+      console.error('Impossible d\'obtenir le contexte 2D du canvas');
+      return;
+    }
+    
+    try {
+      // Détruire l'ancien graphique si existe
+      const existingChart = (ctx as any).chart;
+      if (existingChart) {
+        existingChart.destroy();
+      }
+      
+      // Calculer le taux de succès global
+      const successRate = this.getSuccessRate(this.dailyTransactions);
+      const remaining = 100 - successRate;
+      
+      const config: ChartJsConfiguration<'doughnut'> = {
+        type: 'doughnut',
+        data: {
+          datasets: [{
+            data: [successRate, remaining],
+            backgroundColor: [
+              this.getChartColor(successRate),
+              'rgba(0, 0, 0, 0.1)'
+            ],
+            borderWidth: 0
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          cutout: '70%',
+          plugins: {
+            legend: {
+              display: false
+            },
+            tooltip: {
+              callbacks: {
+                label: (context: any) => {
+                  return `${context.raw.toFixed(1)}%`;
+                }
+              }
+            }
+          }
+        }
+      };
+      
+      // Utilisez Chart directement, pas window.Chart
+      const newChart = new Chart(ctx, config);
+      (ctx as any).chart = newChart;
+      
+    } catch (error) {
+      console.error('Erreur lors de la création du graphique de taux de succès:', error);
+    }
+  }  
+  /**
+   * Obtient les données normalisées pour une métrique spécifique
+   */
+  getNormalizedDataForMetric(
+    metric: DataSelection['metric'],
+    period: ReportPeriod,
+    merchantPartnerId?: number
+  ): ChartDataNormalized | null {
+    const params = merchantPartnerId ? { merchantPartnerId } : undefined;
+    
+    switch (metric) {
+      case 'revenue':
+        if (this.dailyTransactions) {
+          const normalized = this.reportService.normalizeForChart(this.dailyTransactions, 'totalAmount');
+          normalized.datasetLabel = 'Revenue (XOF)';
+          normalized.backgroundColor = this.chartColors.primary.background;
+          normalized.borderColor = this.chartColors.primary.border;
+          return normalized;
+        }
+        break;
+      
+      case 'transactions':
+        if (this.dailyTransactions) {
+          const normalized = this.reportService.normalizeForChart(this.dailyTransactions, 'count');
+          normalized.datasetLabel = 'Nombre de transactions';
+          normalized.backgroundColor = this.chartColors.info.background;
+          normalized.borderColor = this.chartColors.info.border;
+          return normalized;
+        }
+        break;
+      
+      case 'successRate':
+        if (this.dailyTransactions) {
+          // Calculer le taux de succès pour chaque période
+          const labels = this.dailyTransactions.items.map(item => item.period);
+          const dataset = this.dailyTransactions.items.map(item => {
+            const total = item.count || 0;
+            const success = item.successCount || 0;
+            return total > 0 ? (success / total) * 100 : 0;
+          });
+          
+          return {
+            labels,
+            dataset,
+            datasetLabel: 'Taux de succès (%)',
+            backgroundColor: this.chartColors.success.background,
+            borderColor: this.chartColors.success.border
+          };
+        }
+        break;
+      
+      case 'activeSubscriptions':
+        if (this.dailySubscriptions) {
+          const normalized = this.reportService.normalizeForChart(this.dailySubscriptions, 'activeCount');
+          normalized.datasetLabel = 'Abonnements actifs';
+          normalized.backgroundColor = this.chartColors.warning.background;
+          normalized.borderColor = this.chartColors.warning.border;
+          return normalized;
+        }
+        break;
+    }
+    
+    return null;
+  }
+  
+  /**
+   * Crée une configuration de graphique
+   */
+  createChartConfig(
+    normalizedData: ChartDataNormalized,
+    chartType: ChartType,
+    title?: string
+  ): ChartConfiguration {
+    const isCircular = chartType === 'pie' || chartType === 'doughnut';
+    
+    const config: ChartConfiguration = {
+      type: chartType,
+      data: {
+        labels: normalizedData.labels,
+        datasets: [{
+          label: normalizedData.datasetLabel || 'Données',
+          data: normalizedData.dataset,
+          backgroundColor: normalizedData.backgroundColor || this.chartColors.palette,
+          borderColor: normalizedData.borderColor || this.chartColors.primary.border,
+          borderWidth: isCircular ? 0 : 2,
+          fill: !isCircular,
+          tension: chartType === 'line' ? 0.4 : 0,
+          pointRadius: chartType === 'line' ? 3 : 0,
+          pointHoverRadius: chartType === 'line' ? 5 : 0
+        }]
+      },
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        plugins: {
+          legend: {
+            position: 'top',
+            display: !isCircular
+          },
+          title: {
+            display: !!title,
+            text: title,
+            font: {
+              size: 14,
+              weight: 'bold'
+            }
+          },
+          tooltip: {
+            callbacks: {
+              label: (context: any) => {
+                const value = context.raw;
+                if (normalizedData.datasetLabel?.includes('XOF')) {
+                  return `${normalizedData.datasetLabel}: ${this.formatCurrency(value)}`;
+                } else if (normalizedData.datasetLabel?.includes('%')) {
+                  return `${normalizedData.datasetLabel}: ${value.toFixed(1)}%`;
+                }
+                return `${normalizedData.datasetLabel}: ${this.formatNumber(value)}`;
+              }
+            }
+          }
+        },
+        scales: isCircular ? {} : {
+          y: {
+            beginAtZero: true,
+            grid: {
+              color: 'rgba(0, 0, 0, 0.05)'
+            },
+            ticks: {
+              callback: (value: any) => {
+                if (typeof value === 'number') {
+                  if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
+                  if (value >= 1000) return `${(value / 1000).toFixed(0)}K`;
+                  return value;
+                }
+                return value;
+              }
+            }
+          },
+          x: {
+            grid: {
+              color: 'rgba(0, 0, 0, 0.05)'
+            },
+            ticks: {
+              maxRotation: 45
+            }
+          }
+        }
+      }
+    };
+    
+    return config;
+  }
+  
+  /**
+   * Change la métrique affichée
+   */
+  changeMetric(metric: 'revenue' | 'transactions' | 'successRate' | 'activeSubscriptions'): void {
+    this.dataSelection.metric = metric;
+    
+    // Fermer le dropdown
+    if (this.metricDropdown) {
+      this.metricDropdown.close();
+    }
+    
+    // Forcer la détection de changement
+    this.cdr.detectChanges();
+    
+    // Mettre à jour le graphique après un court délai
+    setTimeout(() => {
+      this.updateMainChart();
+    }, 50);
   }
 
-  // ============ VÉRIFICATION DE SANTÉ DES ENDPOINTS ============
+  /**
+   * Change la période affichée
+   */
+  changePeriod(period: ReportPeriod): void {
+    this.dataSelection.period = period;
+    
+    // Forcer la détection de changement
+    this.cdr.detectChanges();
+    
+    setTimeout(() => {
+      this.updateMainChart();
+    }, 50);
+  }
+
+  /**
+   * Change le type de graphique principal
+   */
+  changeChartType(type: ChartType): void {
+    this.dataSelection.chartType = type;
+    
+    // Forcer la détection de changement
+    this.cdr.detectChanges();
+    
+    // Mettre à jour le graphique après un court délai
+    setTimeout(() => {
+      this.updateMainChart();
+    }, 50);
+  }
+
+  
+  /**
+   * Obtient le titre du graphique
+   */
+  getChartTitle(metric: DataSelection['metric']): string {
+    const titles: Record<DataSelection['metric'], string> = {
+      revenue: 'Évolution du Revenue',
+      transactions: 'Nombre de Transactions',
+      successRate: 'Taux de Succès',
+      activeSubscriptions: 'Abonnements Actifs'
+    };
+    return titles[metric];
+  }
+  
+  /**
+   * Obtient la couleur en fonction du taux de succès
+   */
+  private getChartColor(rate: number): string {
+    if (rate >= 95) return '#28a745';
+    if (rate >= 90) return '#ffc107';
+    return '#dc3545';
+  }
+
+  // ============ VÉRIFICATION DE SANTÉ DES APIS ============
   checkSystemHealth(): void {
     this.loading.healthCheck = true;
+    this.systemHealth = [];
     this.alerts = [];
-    this.cdr.detectChanges();
 
-    const healthChecks = this.systemHealth.map(service => 
-      this.checkEndpointHealth(service.url, service.service)
-    );
-
-    forkJoin(healthChecks).subscribe({
-      next: (results) => {
-        this.updateSystemHealthStatus(results);
-        this.generateAlertsBasedOnHealth();
-        this.calculateHealthStats();
-        this.loading.healthCheck = false;
-        this.cdr.detectChanges();
-      },
-      error: () => {
-        this.loading.healthCheck = false;
-        this.addAlert('danger', 'Erreur de vérification', 
-          'Impossible de vérifier la santé des services', 'Maintenant');
-        this.cdr.detectChanges();
-      }
-    });
-  }
-
-  private checkEndpointHealth(endpoint: string, serviceName: string) {
-    if (endpoint === 'sync/full') {
-      return this.reportingService.syncHealthCheck().pipe(
+    this.subscriptions.push(
+      this.reportService.detailedHealthCheck().pipe(
+        tap(response => {
+          this.healthStatus = response.details;
+          
+          // Convertir les résultats en format ServiceHealth
+          this.systemHealth = response.details.map(api => ({
+            service: api.service,
+            status: api.status,
+            color: api.status === 'UP' ? 'success' : 'danger',
+            url: api.url,
+            statusCode: api.statusCode,
+            checkedAt: api.checkedAt,
+          }));
+          
+          // Mettre à jour les statistiques
+          this.stats.totalServices = response.summary.total;
+          this.stats.onlineServices = response.summary.up;
+          this.stats.offlineServices = response.summary.down;
+          
+          // Mettre à jour le statut global
+          this.updateOverallHealth();
+          
+          // Générer les alertes
+          this.generateHealthAlerts();
+          this.loading.healthCheck = false;
+          this.cdr.detectChanges();
+        }),
         catchError(err => {
-          return of({
-            service: serviceName,
-            endpoint: endpoint,
-            status: 'error',
-            statusCode: err.status || 0,
-            error: err.message
-          });
+          console.error('Erreur lors du health check:', err);
+          this.loading.healthCheck = false;
+          
+          this.cdr.detectChanges();
+          
+          this.addAlert('danger', 'Erreur de vérification', 
+            'Impossible de vérifier la santé des services', 'Maintenant');
+          return of(null);
         })
-      );
-    }
-    
-    return this.reportingService.healthCheck(endpoint).pipe(
-      catchError(err => {
-        return of({
-          service: serviceName,
-          endpoint: endpoint,
-          status: 'error',
-          statusCode: err.status || 0,
-          error: err.message
-        });
-      })
+      ).subscribe()
     );
   }
 
-  private updateSystemHealthStatus(results: any[]): void {
-    results.forEach((result, index) => {
-      const service = this.systemHealth[index];
-      
-      if (result.status === 'success') {
-        service.status = 'Online';
-        service.color = 'success';
-      } else {
-        service.status = 'Offline';
-        service.color = 'danger';
-        this.addAlert('danger', `${service.service} hors ligne`, 
-          `Impossible de contacter le service ${service.service}`, 'Maintenant');
-      }
-      
-      service.lastChecked = new Date();
-    });
+  private updateOverallHealth(): void {
+    const offlineCount = this.stats.offlineServices;
+    const totalCount = this.stats.totalServices;
+    
+    if (offlineCount === 0) {
+      this.overallHealth = {
+        status: 'healthy',
+        message: `Tous les ${totalCount} services sont opérationnels`,
+        icon: 'lucideCheckCircle2',
+        color: 'success'
+      };
+    } else if (offlineCount === 1) {
+      const offlineService = this.systemHealth.find(s => s.status === 'DOWN')?.service || 'un service';
+      this.overallHealth = {
+        status: 'warning',
+        message: `${offlineService} est hors ligne`,
+        icon: 'lucideAlertCircle',
+        color: 'warning'
+      };
+    } else {
+      this.overallHealth = {
+        status: 'critical',
+        message: `${offlineCount} services sur ${totalCount} sont hors ligne`,
+        icon: 'lucideXCircle',
+        color: 'danger'
+      };
+    }
   }
 
-  private generateAlertsBasedOnHealth(): void {
-    const offlineServices = this.systemHealth.filter(s => s.status === 'Offline');
+  private generateHealthAlerts(): void {
+    // Nettoyer les anciennes alertes de santé
+    this.alerts = this.alerts.filter(alert => 
+      !alert.title.includes('hors ligne') && 
+      !alert.title.includes('opérationnels')
+    );
+    
+    const offlineServices = this.systemHealth.filter(s => s.status === 'DOWN');
     
     if (offlineServices.length > 0) {
-      const servicesList = offlineServices.map(s => s.service).join(', ');
-      this.addAlert('danger', 'Services hors ligne', 
-        `${offlineServices.length} service(s) hors ligne: ${servicesList}`, 'Maintenant');
-    }
-    
-    const onlineServices = this.systemHealth.filter(s => s.status === 'Online').length;
-    if (onlineServices === this.systemHealth.length) {
+      offlineServices.forEach(service => {
+        this.addAlert('danger', `${service.service} hors ligne`, 
+          `Le service ${service.service} ne répond pas (${service.statusCode})`, 
+          this.formatTimeAgo(service.checkedAt));
+      });
+    } else {
       this.addAlert('success', 'Tous les services opérationnels', 
-        'Tous les endpoints sont disponibles et répondent correctement', 'Maintenant');
+        'Toutes les APIs répondent correctement', 'Maintenant');
     }
   }
 
-  private calculateHealthStats(): void {
-    this.stats.totalServices = this.systemHealth.length;
-    this.stats.onlineServices = this.systemHealth.filter(s => s.status === 'Online').length;
-    this.stats.offlineServices = this.systemHealth.filter(s => s.status === 'Offline').length;
-  }
-
   private addAlert(type: 'warning' | 'info' | 'success' | 'danger', 
                   title: string, 
                   description: string, 
@@ -362,10 +985,10 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
   }
 
   // ============ CHARGEMENT DES DONNÉES ============
+// ============ CHARGEMENT DES DONNÉES ============
   loadAllData(): void {
     this.loading.all = true;
     this.lastUpdated = new Date();
-    this.cdr.detectChanges();
 
     const requests = [
       this.loadDailyTransactions(),
@@ -383,28 +1006,51 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
         next: () => {
           this.loading.all = false;
           this.calculateStats();
-          this.prepareChartData();
-          this.initCharts();
+          
+          // Forcer la détection de changement
           this.cdr.detectChanges();
+          
+          // Maintenant initialiser les graphiques
+          setTimeout(() => {
+            this.initializeCharts();
+          }, 100);
         },
         error: (err) => {
           console.error('Error loading all data:', err);
           this.loading.all = false;
           this.addAlert('danger', 'Erreur de chargement', 
             'Impossible de charger toutes les données', 'Maintenant');
+          
           this.cdr.detectChanges();
         }
       })
     );
   }
 
+  /**
+   * Initialise les graphiques après le chargement des données
+   */
+  private initializeCharts(): void {
+    if (this.dailyTransactions && this.mainChartCanvas?.nativeElement) {
+      this.updateAllCharts();
+    } else {
+      // Réessayer après un court délai
+      setTimeout(() => {
+        if (this.dailyTransactions) {
+          this.updateAllCharts();
+        }
+      }, 200);
+    }
+
+    this.cdr.detectChanges();
+  }
+
   // ============ MÉTHODES DE CHARGEMENT ============
-  private loadDailyTransactions(): Observable<any> {
+  loadDailyTransactions(): Observable<any> {
     this.loading.dailyTransactions = true;
     this.errors['dailyTransactions'] = '';
-    this.cdr.detectChanges();
 
-    return this.reportingService.getDailyTransactions().pipe(
+    return this.reportService.getTransactionReport({}, 'daily').pipe(
       catchError(err => {
         this.errors['dailyTransactions'] = err.message || 'Erreur de chargement';
         console.error('Error loading daily transactions:', err);
@@ -422,7 +1068,6 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
       }),
       finalize(() => {
         this.loading.dailyTransactions = false;
-        this.cdr.detectChanges();
       })
     );
   }
@@ -430,13 +1075,12 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
   private loadMerchantTransactions(): Observable<any> {
     this.loading.merchantTransactions = true;
     this.errors['merchantTransactions'] = '';
-    this.cdr.detectChanges();
 
-    const params: ReportParams = {
+    const params = {
       merchantPartnerId: this.merchantId
     };
 
-    return this.reportingService.getDailyTransactions(params).pipe(
+    return this.reportService.getTransactionReport(params, 'daily').pipe(
       catchError(err => {
         this.errors['merchantTransactions'] = err.message || 'Erreur de chargement';
         console.error('Error loading merchant transactions:', err);
@@ -451,7 +1095,6 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
       }),
       finalize(() => {
         this.loading.merchantTransactions = false;
-        this.cdr.detectChanges();
       })
     );
   }
@@ -459,9 +1102,8 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
   private loadWeeklyTransactions(): Observable<any> {
     this.loading.weeklyTransactions = true;
     this.errors['weeklyTransactions'] = '';
-    this.cdr.detectChanges();
 
-    return this.reportingService.getWeeklyTransactions().pipe(
+    return this.reportService.getTransactionReport({}, 'weekly').pipe(
       catchError(err => {
         this.errors['weeklyTransactions'] = err.message || 'Erreur de chargement';
         console.error('Error loading weekly transactions:', err);
@@ -476,7 +1118,6 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
       }),
       finalize(() => {
         this.loading.weeklyTransactions = false;
-        this.cdr.detectChanges();
       })
     );
   }
@@ -484,9 +1125,8 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
   private loadMonthlyTransactions(): Observable<any> {
     this.loading.monthlyTransactions = true;
     this.errors['monthlyTransactions'] = '';
-    this.cdr.detectChanges();
 
-    return this.reportingService.getMonthlyTransactions().pipe(
+    return this.reportService.getTransactionReport({}, 'monthly').pipe(
       catchError(err => {
         this.errors['monthlyTransactions'] = err.message || 'Erreur de chargement';
         console.error('Error loading monthly transactions:', err);
@@ -501,7 +1141,6 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
       }),
       finalize(() => {
         this.loading.monthlyTransactions = false;
-        this.cdr.detectChanges();
       })
     );
   }
@@ -509,12 +1148,11 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
   private loadYearlyTransactions(): Observable<any> {
     this.loading.yearlyTransactions = true;
     this.errors['yearlyTransactions'] = '';
-    this.cdr.detectChanges();
 
     const startDate = `${this.currentYear}-01-01`;
     const endDate = `${this.currentYear}-12-31`;
 
-    return this.reportingService.getTransactionsWithDates(startDate, endDate).pipe(
+    return this.reportService.getTransactionsWithDates(startDate, endDate).pipe(
       catchError(err => {
         this.errors['yearlyTransactions'] = err.message || 'Erreur de chargement';
         console.error('Error loading yearly transactions:', err);
@@ -529,17 +1167,15 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
       }),
       finalize(() => {
         this.loading.yearlyTransactions = false;
-        this.cdr.detectChanges();
       })
     );
   }
 
-  private loadTransactionsWithDates(): Observable<any> {
+  loadTransactionsWithDates(): Observable<any> {
     this.loading.transactionsWithDates = true;
     this.errors['transactionsWithDates'] = '';
-    this.cdr.detectChanges();
 
-    return this.reportingService.getTransactionsWithDates(this.startDate, this.endDate).pipe(
+    return this.reportService.getTransactionsWithDates(this.startDate, this.endDate).pipe(
       catchError(err => {
         this.errors['transactionsWithDates'] = err.message || 'Erreur de chargement';
         console.error('Error loading transactions with dates:', err);
@@ -554,17 +1190,15 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
       }),
       finalize(() => {
         this.loading.transactionsWithDates = false;
-        this.cdr.detectChanges();
       })
     );
   }
 
-  private loadDailySubscriptions(): Observable<any> {
+  loadDailySubscriptions(): Observable<any> {
     this.loading.dailySubscriptions = true;
     this.errors['dailySubscriptions'] = '';
-    this.cdr.detectChanges();
 
-    return this.reportingService.getDailySubscriptions().pipe(
+    return this.reportService.getSubscriptionReport({}, 'daily').pipe(
       catchError(err => {
         this.errors['dailySubscriptions'] = err.message || 'Erreur de chargement';
         console.error('Error loading daily subscriptions:', err);
@@ -579,7 +1213,6 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
       }),
       finalize(() => {
         this.loading.dailySubscriptions = false;
-        this.cdr.detectChanges();
       })
     );
   }
@@ -587,9 +1220,12 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
   private loadMerchantSubscriptions(): Observable<any> {
     this.loading.merchantSubscriptions = true;
     this.errors['merchantSubscriptions'] = '';
-    this.cdr.detectChanges();
 
-    return this.reportingService.getMonthlySubscriptions(this.merchantId).pipe(
+    const params = {
+      merchantPartnerId: this.merchantId
+    };
+
+    return this.reportService.getSubscriptionReport(params, 'monthly').pipe(
       catchError(err => {
         this.errors['merchantSubscriptions'] = err.message || 'Erreur de chargement';
         console.error('Error loading merchant subscriptions:', err);
@@ -604,19 +1240,27 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
       }),
       finalize(() => {
         this.loading.merchantSubscriptions = false;
-        this.cdr.detectChanges();
       })
     );
   }
 
   // ============ MÉTHODES PUBLIQUES ============
+  refreshChartData(): void {
+    this.cdr.detectChanges();
+    setTimeout(() => {
+      this.updateAllCharts();
+    }, 50);
+  }
+
   refreshMerchantData(): void {
     this.subscriptions.push(
-      this.loadMerchantTransactions().subscribe(() => {
-        this.cdr.detectChanges();
-      }),
+      this.loadMerchantTransactions().subscribe(),
       this.loadMerchantSubscriptions().subscribe(() => {
+        this.calculateStats();
         this.cdr.detectChanges();
+        setTimeout(() => {
+          this.updateAllCharts();
+        }, 100);
       })
     );
   }
@@ -625,9 +1269,7 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
     this.subscriptions.push(
       this.loadTransactionsWithDates().subscribe(() => {
         this.calculateStats();
-        this.prepareChartData();
-        this.updateCharts();
-        this.cdr.detectChanges();
+        this.updateAllCharts();
       })
     );
   }
@@ -636,10 +1278,11 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
     this.checkSystemHealth();
   }
 
-  triggerSync(): void {
-    const syncService = this.systemHealth.find(s => s.service === 'Synchronisation');
 
-    if (syncService?.status === 'Offline') {
+  triggerSync(): void {
+    const syncService = this.systemHealth.find(s => s.service === 'SYNC');
+
+    if (syncService?.status === 'DOWN') {
       this.addAlert('danger', 'Synchronisation impossible', 
         'Le service de synchronisation est actuellement hors ligne', 'Maintenant');
       return;
@@ -647,9 +1290,8 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
 
     this.loading.sync = true;
     this.syncResponse = null;
-    this.cdr.detectChanges();
 
-    const sub = this.reportingService.triggerManualSync().pipe(
+    const sub = this.reportService.triggerManualSync().pipe(
       catchError(err => {
         this.errors['sync'] = err.message || 'Erreur de synchronisation';
         this.addAlert('danger', 'Échec de synchronisation', 
@@ -665,7 +1307,6 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
       }),
       finalize(() => {
         this.loading.sync = false;
-        this.cdr.detectChanges();
         setTimeout(() => this.loadAllData(), 2000);
       })
     ).subscribe();
@@ -677,9 +1318,7 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
   refreshDailyTransactions(): void {
     const sub = this.loadDailyTransactions().subscribe(() => {
       this.calculateStats();
-      this.prepareChartData();
-      this.updateCharts();
-      this.cdr.detectChanges();
+      this.updateAllCharts();
     });
     this.subscriptions.push(sub);
   }
@@ -687,9 +1326,7 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
   refreshWeeklyTransactions(): void {
     const sub = this.loadWeeklyTransactions().subscribe(() => {
       this.calculateStats();
-      this.prepareChartData();
-      this.updateCharts();
-      this.cdr.detectChanges();
+      this.updateAllCharts();
     });
     this.subscriptions.push(sub);
   }
@@ -697,9 +1334,7 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
   refreshYearlyTransactions(): void {
     const sub = this.loadYearlyTransactions().subscribe(() => {
       this.calculateStats();
-      this.prepareChartData();
-      this.updateCharts();
-      this.cdr.detectChanges();
+      this.updateAllCharts();
     });
     this.subscriptions.push(sub);
   }
@@ -707,195 +1342,24 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
   refreshDailySubscriptions(): void {
     const sub = this.loadDailySubscriptions().subscribe(() => {
       this.calculateStats();
-      this.cdr.detectChanges();
+      this.updateAllCharts();
     });
     this.subscriptions.push(sub);
   }
 
-  // ============ GRAPHIQUES ============
-  private initCharts(): void {
-    if (this.successRateChartRef?.nativeElement) {
-      this.initSuccessRateChart();
-    }
-    if (this.revenueChartRef?.nativeElement) {
-      this.initRevenueChart();
-    }
-  }
-
-  private initSuccessRateChart(): void {
-    if (!this.successRateChartRef?.nativeElement) return;
-    
-    if (this.successRateChart) {
-      this.successRateChart.destroy();
-    }
-
-    const successRate = this.stats.successRate;
-    const remaining = 100 - successRate;
-
-    const config: ChartConfiguration = {
-      type: 'doughnut',
-      data: {
-        datasets: [{
-          data: [successRate, remaining],
-          backgroundColor: [
-            this.getChartColor(successRate),
-            '#e9ecef'
-          ],
-          borderWidth: 0,
-          borderRadius: 10
-        }]
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: true,
-        plugins: {
-          legend: {
-            display: false
-          },
-          tooltip: {
-            enabled: false
-          }
-        }
-      }
-    };
-
-    this.successRateChart = new Chart(this.successRateChartRef.nativeElement, config);
-  }
-
-  private initRevenueChart(): void {
-    if (!this.revenueChartRef?.nativeElement) return;
-    
-    if (this.revenueChart) {
-      this.revenueChart.destroy();
-    }
-
-    // Sélectionner les données en fonction de la période
-    let dataToShow = this.revenueChartData;
-    if (this.selectedPeriod === '30days' && this.revenueChartData.length > 30) {
-      dataToShow = this.revenueChartData.slice(-30);
-    } else if (this.selectedPeriod === '90days' && this.revenueChartData.length > 90) {
-      dataToShow = this.revenueChartData.slice(-90);
-    } else {
-      // Par défaut, 7 derniers jours
-      dataToShow = this.revenueChartData.slice(-7);
-    }
-
-    const labels = dataToShow.map(d => d.period);
-    const data = dataToShow.map(d => d.revenue);
-
-    const config: ChartConfiguration = {
-      type: 'line', // Changé de 'bar' à 'line' pour une courbe
-      data: {
-        labels: labels,
-        datasets: [{
-          label: 'Revenue (XOF)',
-          data: data,
-          backgroundColor: 'rgba(13, 110, 253, 0.1)',
-          borderColor: '#0d6efd',
-          borderWidth: 2,
-          tension: 0.4, // Courbure de la ligne
-          fill: true,
-          pointBackgroundColor: '#0d6efd',
-          pointBorderColor: '#ffffff',
-          pointBorderWidth: 2,
-          pointRadius: 4,
-          pointHoverRadius: 6
-        }]
-      },
-      options: {
-        responsive: true,
-        maintainAspectRatio: false,
-        plugins: {
-          legend: {
-            display: false
-          },
-          tooltip: {
-            callbacks: {
-              label: (context) => {
-                return `${this.formatCurrency(context.parsed.y ?? 0)}`;
-              }
-            }
-          }
-        },
-        scales: {
-          y: {
-            beginAtZero: true,
-            grid: {
-              color: 'rgba(0,0,0,0.05)'
-            },
-            ticks: {
-              callback: (value) => {
-                if (typeof value === 'number') {
-                  if (value >= 1000000) return `${(value / 1000000).toFixed(1)}M`;
-                  if (value >= 1000) return `${(value / 1000).toFixed(0)}K`;
-                  return value.toString();
-                }
-                return value;
-              }
-            }
-          },
-          x: {
-            grid: {
-              color: 'rgba(0,0,0,0.05)'
-            },
-            ticks: {
-              maxRotation: 45
-            }
-          }
-        },
-        interaction: {
-          intersect: false,
-          mode: 'index'
-        },
-        animation: {
-          duration: 1000
-        }
-      }
-    };
-
-    this.revenueChart = new Chart(this.revenueChartRef.nativeElement, config);
-  }
-
-  private updateCharts(): void {
-    this.prepareChartData();
-    this.initCharts();
-  }
-
-  onPeriodChange(): void {
-    this.initRevenueChart();
-  }
-
-  private getChartColor(rate: number): string {
-    if (rate >= 95) return '#51cf66';
-    if (rate >= 90) return '#ff922b';
-    return '#ff6b6b';
-  }
-
-  // ============ VÉRIFICATIONS DE TYPE ============
+  // ============ UTILITAIRES ============
   private isValidTransactionReport(data: any): data is TransactionReport {
     return data !== null && 
            data !== undefined &&
            typeof data === 'object' &&
-           data.type === 'transaction' &&
-           typeof data.period === 'string' &&
-           typeof data.totalAmount === 'number' &&
-           typeof data.totalCount === 'number' &&
-           Array.isArray(data.items) &&
-           typeof data.summary === 'object' &&
-           typeof data.generatedAt === 'string';
+           Array.isArray(data.items);
   }
 
   private isValidSubscriptionReport(data: any): data is SubscriptionReport {
     return data !== null && 
            data !== undefined &&
            typeof data === 'object' &&
-           data.type === 'subscription' &&
-           typeof data.period === 'string' &&
-           typeof data.totalAmount === 'number' &&
-           typeof data.totalCount === 'number' &&
-           Array.isArray(data.items) &&
-           typeof data.summary === 'object' &&
-           typeof data.generatedAt === 'string';
+           Array.isArray(data.items);
   }
 
   // ============ CALCUL DES STATISTIQUES ============
@@ -922,7 +1386,7 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
 
     const successRates = [];
     if (this.dailyTransactions) {
-      const rate = this.calculateSuccessRate(this.dailyTransactions);
+      const rate = this.getSuccessRate(this.dailyTransactions);
       if (rate > 0) successRates.push(rate);
     }
     
@@ -943,41 +1407,15 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
-  private calculateSuccessRate(transaction: TransactionReport): number {
-    if (!transaction.items || transaction.items.length === 0) return 0;
+  getSuccessRate(transaction: TransactionReport | null): number {
+    if (!transaction || !transaction.items || transaction.items.length === 0) return 0;
     const item = transaction.items[0];
     const total = item.count || 0;
     const success = item.successCount || 0;
     return total > 0 ? (success / total) * 100 : 0;
   }
 
-  private prepareChartData(): void {
-    this.revenueChartData = [];
-    if (this.dailyTransactions?.items) {
-      this.dailyTransactions.items.forEach(item => {
-        this.revenueChartData.push({
-          period: item.period,
-          revenue: item.totalAmount,
-          transactions: item.count,
-          successRate: item.count > 0 ? (item.successCount / item.count) * 100 : 0
-        });
-      });
-    }
-
-    this.successChartData = [];
-    if (this.weeklyTransactions?.items) {
-      this.weeklyTransactions.items.forEach(item => {
-        this.successChartData.push({
-          period: item.period,
-          successRate: item.count > 0 ? (item.successCount / item.count) * 100 : 0,
-          total: item.count,
-          success: item.successCount
-        });
-      });
-    }
-  }
-
-  // ============ UTILITAIRES ============
+  // ============ FORMATAGE ============
   formatCurrency(amount: number): string {
     if (amount >= 1000000) {
       return `${(amount / 1000000).toFixed(1)}M XOF`;
@@ -1005,65 +1443,54 @@ export class DcbReportingDashboard implements OnInit, OnDestroy, AfterViewInit {
     }
   }
 
-  getSuccessRate(transaction: TransactionReport | null): number {
-    if (!transaction || !transaction.items || transaction.items.length === 0) return this.stats.avgSuccessRate;
-    return this.calculateSuccessRate(transaction);
+  formatTimeAgo(date: Date | string | undefined): string {
+    if (!date) return 'Jamais';
+    
+    const checkDate = typeof date === 'string' ? new Date(date) : date;
+    const now = new Date();
+    const diffMs = now.getTime() - checkDate.getTime();
+    const diffMins = Math.floor(diffMs / 60000);
+    
+    if (diffMins < 1) return 'À l\'instant';
+    if (diffMins < 60) return `Il y a ${diffMins} min`;
+    if (diffMins < 1440) return `Il y a ${Math.floor(diffMins / 60)} h`;
+    return `Il y a ${Math.floor(diffMins / 1440)} j`;
   }
 
+  // ============ MÉTHODES POUR LE TEMPLATE ============
   getSuccessRateClass(rate: number): string {
     if (rate >= 95) return 'text-success';
     if (rate >= 90) return 'text-warning';
     return 'text-danger';
   }
 
-  getSuccessRateBgClass(rate: number): string {
-    if (rate >= 90) return 'bg-success-subtle border-success';
-    if (rate >= 80) return 'bg-warning-subtle border-warning';
-    return 'bg-danger-subtle border-danger';
+  getHealthIcon(service: ServiceHealth): string {
+    return service.status === 'UP' ? 'lucideCheckCircle2' : 'lucideXCircle';
   }
 
-  // ============ MÉTHODES POUR LES CARDS ============
-  getPaymentStats() {
-    return {
-      daily: {
-        transactions: this.dailyTransactions?.totalCount || 0,
-        revenue: this.dailyTransactions?.totalAmount || 0,
-        successRate: this.getSuccessRate(this.dailyTransactions)
-      },
-      weekly: {
-        transactions: this.weeklyTransactions?.totalCount || 0,
-        revenue: this.weeklyTransactions?.totalAmount || 0,
-        successRate: this.getSuccessRate(this.weeklyTransactions)
-      },
-      monthly: {
-        transactions: this.monthlyTransactions?.totalCount || 0,
-        revenue: this.monthlyTransactions?.totalAmount || 0,
-        successRate: this.getSuccessRate(this.monthlyTransactions)
-      },
-      yearly: {
-        transactions: this.stats.yearlyTransactions,
-        revenue: this.stats.yearlyRevenue,
-        successRate: this.stats.avgSuccessRate
-      },
-      overallSuccessRate: this.stats.successRate
-    };
+  getStatusCodeClass(statusCode: number): string {
+    if (statusCode >= 200 && statusCode < 300) return 'text-success';
+    if (statusCode >= 300 && statusCode < 400) return 'text-warning';
+    if (statusCode >= 400 && statusCode < 500) return 'text-warning';
+    if (statusCode >= 500) return 'text-danger';
+    return 'text-muted';
   }
 
-  getSubscriptionStats() {
-    return {
-      total: this.dailySubscriptions?.totalCount || 0,
-      active: this.stats.activeSubscriptions,
-      newToday: this.dailySubscriptions?.items?.[0]?.count || 0,
-      cancelled: this.dailySubscriptions?.items?.[0]?.cancelledCount || 0,
-      activePercentage: this.dailySubscriptions?.totalCount ? 
-        (this.stats.activeSubscriptions / this.dailySubscriptions.totalCount) * 100 : 0
-    };
+  getResponseTimeClass(responseTime?: string): string {
+    if (!responseTime) return 'text-muted';
+    const time = parseInt(responseTime.replace('ms', ''));
+    if (time < 500) return 'text-success';
+    if (time < 2000) return 'text-warning';
+    return 'text-danger';
   }
 
-  getPerformanceLabel(successRate: number): string {
-    if (successRate >= 95) return 'Excellent';
-    if (successRate >= 90) return 'Bon';
-    if (successRate >= 80) return 'Moyen';
-    return 'À améliorer';
+  getMetricIcon(metricId: string): string {
+    const metric = this.availableMetrics.find(m => m.id === metricId);
+    return metric?.icon || 'lucideActivity';
+  }
+
+  getCurrentMetricLabel(): string {
+    const metric = this.availableMetrics.find(m => m.id === this.dataSelection.metric);
+    return metric?.label || 'Revenue';
   }
 }
\ No newline at end of file
diff --git a/src/app/modules/dcb-dashboard/models/dcb-reporting.models.ts b/src/app/modules/dcb-dashboard/models/dcb-reporting.models.ts
index e405d3e..8525af8 100644
--- a/src/app/modules/dcb-dashboard/models/dcb-reporting.models.ts
+++ b/src/app/modules/dcb-dashboard/models/dcb-reporting.models.ts
@@ -1,6 +1,8 @@
+export type ReportPeriod = 'daily' | 'weekly' | 'monthly' | 'yearly';
+
 export interface TransactionReport {
   type: 'transaction';
-  period: 'daily' | 'weekly' | 'monthly';
+  period: ReportPeriod;
   startDate: string;
   endDate: string;
   merchantPartnerId?: number;
@@ -12,7 +14,7 @@ export interface TransactionReport {
 }
 
 export interface TransactionItem {
-  period: string;
+  period: string; // day, week, month or year label
   totalAmount: number;
   totalTax: number;
   count: number;
@@ -30,7 +32,7 @@ export interface TransactionSummary {
 
 export interface SubscriptionReport {
   type: 'subscription';
-  period: 'daily' | 'weekly' | 'monthly';
+  period: ReportPeriod;
   startDate: string;
   endDate: string;
   merchantPartnerId?: number;
@@ -65,4 +67,22 @@ export interface ReportParams {
   startDate?: string;
   endDate?: string;
   merchantPartnerId?: number;
-}
\ No newline at end of file
+}
+
+export interface HealthCheckStatus {
+  service: string;
+  url: string;
+  status: 'UP' | 'DOWN';
+  statusCode: number;
+  checkedAt: string;
+}
+
+// ChartDataNormalized : normalisation des données pour tous types de chart
+export interface ChartDataNormalized {
+  labels: string[];       // Périodes : YYYY-MM-DD / YYYY-W05 / YYYY-MM / YYYY
+  dataset: number[];      // Valeurs correspondantes à chaque période
+  datasetLabel?: string;  // Optionnel : nom de la métrique (ex: "Montant total", "Nombre transactions")
+  backgroundColor?: string | string[]; // Optionnel : pour Bar/Pie/Heatmap
+  borderColor?: string;   // Optionnel : pour Line chart
+}
+
diff --git a/src/app/modules/dcb-dashboard/services/dcb-reporting.service.ts b/src/app/modules/dcb-dashboard/services/dcb-reporting.service.ts
index 40ddc20..55b853e 100644
--- a/src/app/modules/dcb-dashboard/services/dcb-reporting.service.ts
+++ b/src/app/modules/dcb-dashboard/services/dcb-reporting.service.ts
@@ -1,168 +1,296 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpParams } from '@angular/common/http';
-import { Observable } from 'rxjs';
-import { map, timeout } from 'rxjs/operators';
+import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
+import { Observable, throwError, forkJoin, of } from 'rxjs';
+import { map, timeout, catchError, retry } from 'rxjs/operators';
+import {
+  ReportParams,
+  TransactionReport,
+  SubscriptionReport,
+  SyncResponse,
+  HealthCheckStatus,
+  ChartDataNormalized
+} from '../models/dcb-reporting.models';
 import { environment } from '@environments/environment';
 
-// ============ INTERFACES EXPORTÉES ============
-export interface TransactionReport {
-  type: 'transaction';
-  period: 'daily' | 'weekly' | 'monthly';
-  startDate: string;
-  endDate: string;
-  merchantPartnerId?: number;
-  totalAmount: number;
-  totalCount: number;
-  items: TransactionItem[];
-  summary: TransactionSummary;
-  generatedAt: string;
-}
+@Injectable({ providedIn: 'root' })
+export class ReportService {
+  private baseUrl = `${environment.reportingApiUrl}/reporting`;
+  private readonly DEFAULT_TIMEOUT = 5000; // Timeout réduit pour les health checks
+  private readonly DEFAULT_RETRY = 1;
+  private readonly REPORTING_TIMEOUT = 10000; // Timeout normal pour les autres requêtes
 
-export interface TransactionItem {
-  period: string;
-  totalAmount: number;
-  totalTax: number;
-  count: number;
-  successCount: number;
-  failedCount: number;
-  pendingCount: number;
-  merchantPartnerId?: number;
-}
-
-export interface TransactionSummary {
-  avgAmount: number;
-  minAmount: number;
-  maxAmount: number;
-}
-
-export interface SubscriptionReport {
-  type: 'subscription';
-  period: 'daily' | 'weekly' | 'monthly';
-  startDate: string;
-  endDate: string;
-  merchantPartnerId?: number;
-  totalAmount: number;
-  totalCount: number;
-  items: SubscriptionItem[];
-  summary: SubscriptionSummary;
-  generatedAt: string;
-}
-
-export interface SubscriptionItem {
-  period: string;
-  totalAmount: number;
-  count: number;
-  activeCount: number;
-  cancelledCount: number;
-  merchantPartnerId?: number;
-}
-
-export interface SubscriptionSummary {
-  avgAmount: number;
-  minAmount: number;
-  maxAmount: number;
-}
-
-export interface SyncResponse {
-  message: string;
-  timestamp: string;
-}
-
-export interface ReportParams {
-  startDate?: string;
-  endDate?: string;
-  merchantPartnerId?: number;
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DcbReportingService {
-  private baseUrl = environment.reportingApiUrl + '/reporting';
+  // Configuration des APIs à scanner
+  private apiEndpoints = {
+    IAM: environment.iamApiUrl,
+    CONFIG: environment.configApiUrl,
+    CORE: environment.apiCoreUrl,
+    REPORTING: environment.reportingApiUrl
+  };
 
   constructor(private http: HttpClient) {}
 
-  healthCheck(endpoint: string): Observable<any> {
-    return this.http.get(`${this.baseUrl}/${endpoint}`, { 
-      observe: 'response',
-      responseType: 'text' 
+  // ---------------------
+  // Helpers
+  // ---------------------
+  private buildParams(params?: ReportParams): HttpParams {
+    let httpParams = new HttpParams();
+    if (!params) return httpParams;
+    Object.entries(params).forEach(([key, value]) => {
+      if (value !== undefined && value !== null) httpParams = httpParams.set(key, value.toString());
+    });
+    return httpParams;
+  }
+
+  private handleError(err: any) {
+    return throwError(() => ({
+      message: err?.message || 'Unknown error',
+      status: err?.status || 0,
+      error: err?.error || null
+    }));
+  }
+
+  formatDate(date: Date): string {
+    const y = date.getFullYear();
+    const m = ('0' + (date.getMonth() + 1)).slice(-2);
+    const d = ('0' + date.getDate()).slice(-2);
+    return `${y}-${m}-${d}`;
+  }
+
+  // ---------------------
+  // Health checks
+  // ---------------------
+
+  private checkApiAvailability(
+    service: string,
+    url: string
+  ): Observable<HealthCheckStatus> {
+    const startTime = Date.now();
+    
+    return this.http.head(url, {
+      observe: 'response'
     }).pipe(
-      timeout(5000),
-      map(response => ({
-        status: 'success',
-        statusCode: response.status
-      }))
+      timeout(this.DEFAULT_TIMEOUT),
+      map((resp: HttpResponse<any>) => {
+        const responseTime = Date.now() - startTime;
+        return {
+          service,
+          url,
+          status: 'UP' as const,
+          statusCode: resp.status,
+          checkedAt: new Date().toISOString(),
+          responseTime: `${responseTime}ms`
+        };
+      }),
+      catchError((error) => {
+        const responseTime = Date.now() - startTime;
+        
+        // Si HEAD échoue, essayez GET sur la racine
+        return this.http.get(url, {
+          observe: 'response'
+        }).pipe(
+          timeout(this.DEFAULT_TIMEOUT),
+          map((resp: HttpResponse<any>) => {
+            const finalResponseTime = Date.now() - startTime;
+            return {
+              service,
+              url,
+              status: 'UP' as const,
+              statusCode: resp.status,
+              checkedAt: new Date().toISOString(),
+              responseTime: `${finalResponseTime}ms`,
+              note: 'Used GET fallback'
+            };
+          }),
+          catchError((finalError) => {
+            const finalResponseTime = Date.now() - startTime;
+            return of({
+              service,
+              url,
+              status: 'DOWN' as const,
+              statusCode: finalError.status || 0,
+              checkedAt: new Date().toISOString(),
+              responseTime: `${finalResponseTime}ms`,
+              error: this.getErrorMessage(finalError)
+            });
+          })
+        );
+      })
     );
   }
 
-  syncHealthCheck(): Observable<any> {
-    return this.http.post(`${this.baseUrl}/sync/full`, {}, {
+  private getErrorMessage(error: any): string {
+    if (error.status === 0) {
+      return 'Network error - Service unreachable';
+    } else if (error.status === 404) {
+      return 'Endpoint not found but service responds';
+    } else if (error.status === 401 || error.status === 403) {
+      return 'Service requires authentication';
+    } else {
+      return error.message || `HTTP ${error.status}`;
+    }
+  }
+
+  private checkApiHealth(
+    service: string,
+    url: string,
+    method: 'GET' | 'POST' | 'HEAD'
+  ): Observable<HealthCheckStatus> {
+    const startTime = Date.now();
+    
+    return this.http.request(method, url, {
       observe: 'response',
       responseType: 'text'
     }).pipe(
-      timeout(5000),
-      map(response => ({
-        status: 'success',
-        statusCode: response.status,
-        service: 'Synchronisation'
-      }))
+      timeout(this.DEFAULT_TIMEOUT),
+      retry(this.DEFAULT_RETRY),
+      map((resp: HttpResponse<any>) => {
+        const responseTime = Date.now() - startTime;
+        return {
+          service,
+          url,
+          status: resp.status >= 200 && resp.status < 500 ? 'UP' as const : 'DOWN' as const,
+          statusCode: resp.status,
+          checkedAt: new Date().toISOString(),
+          responseTime: `${responseTime}ms`
+        };
+      }),
+      catchError((error) => {
+        const responseTime = Date.now() - startTime;
+        return of({
+          service,
+          url,
+          status: 'DOWN' as const,
+          statusCode: error.status || 0,
+          checkedAt: new Date().toISOString(),
+          responseTime: `${responseTime}ms`,
+          error: error.message || 'Connection failed'
+        });
+      })
     );
   }
 
-  // === TRANSACTIONS ===
-  getDailyTransactions(params?: ReportParams): Observable<TransactionReport> {
-    let httpParams = new HttpParams();
+  /**
+   * Health check global de toutes les APIs
+   * Scanne chaque URL d'API directement
+   */
+  globalHealthCheck(): Observable<HealthCheckStatus[]> {
+    const healthChecks: Observable<HealthCheckStatus>[] = [];
     
-    if (params?.startDate) {
-      httpParams = httpParams.set('startDate', params.startDate);
-    }
-    if (params?.endDate) {
-      httpParams = httpParams.set('endDate', params.endDate);
-    }
-    if (params?.merchantPartnerId) {
-      httpParams = httpParams.set('merchantPartnerId', params.merchantPartnerId.toString());
-    }
+    // Vérifiez chaque service avec sa racine
+    Object.entries(this.apiEndpoints).forEach(([service, url]) => {
+      healthChecks.push(this.checkApiAvailability(service, url));
+    });
     
-    return this.http.get<TransactionReport>(`${this.baseUrl}/transactions/daily`, { params: httpParams });
+    return forkJoin(healthChecks);
   }
 
-  getWeeklyTransactions(): Observable<TransactionReport> {
-    return this.http.get<TransactionReport>(`${this.baseUrl}/transactions/weekly`);
+  /**
+   * Health check spécifique pour l'API de synchronisation
+   */
+  syncHealthCheck(): Observable<HealthCheckStatus> {
+    return this.checkApiHealth('SYNC', `${this.baseUrl}/sync/full`, 'POST');
   }
 
-  getMonthlyTransactions(): Observable<TransactionReport> {
-    return this.http.get<TransactionReport>(`${this.baseUrl}/transactions/monthly`);
+  /**
+   * Health check rapide (vérifie seulement si les APIs répondent)
+   */
+  quickHealthCheck(): Observable<{ [key: string]: boolean }> {
+    const services = Object.entries(this.apiEndpoints);
+    const checks = services.map(([service, url]) => 
+      this.checkApiHealth(service, url, 'GET').pipe(
+        map(result => ({ [service]: result.status === 'UP' })),
+        catchError(() => of({ [service]: false }))
+      )
+    );
+
+    return forkJoin(checks).pipe(
+      map(results => {
+        return results.reduce((acc, curr) => ({ ...acc, ...curr }), {});
+      })
+    );
   }
 
-  getTransactionsWithDates(startDate: string, endDate: string): Observable<TransactionReport> {
-    const params = new HttpParams()
-      .set('startDate', startDate)
-      .set('endDate', endDate);
-    
-    return this.http.get<TransactionReport>(`${this.baseUrl}/transactions/daily`, { params });
+  /**
+   * Health check détaillé avec métriques
+   */
+  detailedHealthCheck(): Observable<{
+    summary: { total: number; up: number; down: number; timestamp: string };
+    details: HealthCheckStatus[];
+  }> {
+    return this.globalHealthCheck().pipe(
+      map(results => {
+        const adjustedResults = results.map(result => ({
+          ...result,
+          status: result.statusCode > 0 ? 'UP' as const : 'DOWN' as const
+        }));
+        
+        const upCount = adjustedResults.filter(r => r.status === 'UP').length;
+        const downCount = adjustedResults.filter(r => r.status === 'DOWN').length;
+        
+        return {
+          summary: {
+            total: adjustedResults.length,
+            up: upCount,
+            down: downCount,
+            timestamp: new Date().toISOString()
+          },
+          details: adjustedResults
+        };
+      }),
+      catchError(err => this.handleError(err))
+    );
   }
 
-  // === SUBSCRIPTIONS ===
-  getDailySubscriptions(): Observable<SubscriptionReport> {
-    return this.http.get<SubscriptionReport>(`${this.baseUrl}/subscriptions/daily`);
-  }
-
-  getMonthlySubscriptions(merchantPartnerId?: number): Observable<SubscriptionReport> {
-    let params = new HttpParams();
-    if (merchantPartnerId) {
-      params = params.set('merchantPartnerId', merchantPartnerId.toString());
-    }
-    
-    return this.http.get<SubscriptionReport>(`${this.baseUrl}/subscriptions/monthly`, { params });
-  }
-
-  // === SYNC ===
+ 
   triggerManualSync(): Observable<SyncResponse> {
-    return this.http.post<SyncResponse>(`${this.baseUrl}/sync/full`, {});
+    return this.http.post<SyncResponse>(`${this.baseUrl}/sync/full`, {}).pipe(
+      timeout(this.REPORTING_TIMEOUT),
+      retry(this.DEFAULT_RETRY),
+      catchError(err => this.handleError(err))
+    );
   }
 
-  // === UTILS ===
-  formatDate(date: Date): string {
-    return date.toISOString().split('T')[0];
+  // ---------------------
+  // Transactions & Subscriptions Reports
+  // ---------------------
+  getTransactionReport(params?: ReportParams, period: 'daily' | 'weekly' | 'monthly' | 'yearly' = 'daily'): Observable<TransactionReport> {
+    return this.http.get<TransactionReport>(`${this.baseUrl}/transactions/${period}`, { params: this.buildParams(params) }).pipe(
+      timeout(this.REPORTING_TIMEOUT),
+      retry(this.DEFAULT_RETRY),
+      catchError(err => this.handleError(err))
+    );
+  }
+
+  getSubscriptionReport(params?: ReportParams, period: 'daily' | 'weekly' | 'monthly' | 'yearly' = 'daily'): Observable<SubscriptionReport> {
+    return this.http.get<SubscriptionReport>(`${this.baseUrl}/subscriptions/${period}`, { params: this.buildParams(params) }).pipe(
+      timeout(this.REPORTING_TIMEOUT),
+      retry(this.DEFAULT_RETRY),
+      catchError(err => this.handleError(err))
+    );
+  }
+
+  getTransactionsWithDates(startDate: string, endDate: string, merchantPartnerId?: number) {
+    return this.getTransactionReport({ startDate, endDate, merchantPartnerId }, 'daily');
+  }
+
+  // ---------------------
+  // Multi-partner normalization for charts
+  // ---------------------
+  normalizeForChart(data: TransactionReport | SubscriptionReport, key: string): ChartDataNormalized {
+    const labels = data.items.map(i => i.period);
+    const dataset = data.items.map(i => (i as any)[key] ?? 0);
+    return { labels, dataset };
+  }
+
+  // ---------------------
+  // Multi-period & Multi-partner reporting
+  // ---------------------
+  getMultiPartnerReports(partners: number[], period: 'daily' | 'weekly' | 'monthly' | 'yearly' = 'daily', type: 'transaction' | 'subscription' = 'transaction') {
+    const requests = partners.map(id => {
+      return type === 'transaction'
+        ? this.getTransactionReport({ merchantPartnerId: id }, period)
+        : this.getSubscriptionReport({ merchantPartnerId: id }, period);
+    });
+    return forkJoin(requests);
   }
 }
\ No newline at end of file