<div class="tabler-dashboard" [attr.data-dashboard-type]="dashboardType">
  
  <!-- Loading State -->
  <div class="loading-overlay" *ngIf="isLoadingDetails">
    <div class="loading-content">
      <div class="loading-spinner"></div>
      <p>Chargement du dashboard...</p>
    </div>
  </div>

  <!-- Dashboard Content -->
  <div class="dashboard-content" *ngIf="!isLoadingDetails">
    
    <!-- Page Header -->
    <div class="page-header">
      <div class="container-xl">
        <div class="row align-items-center">
          <div class="col">
            <div class="page-pretitle">
              {{ getDashboardPretitle() }}
            </div>
            <h2 class="page-title">
              {{ getDashboardTitle() }}
            </h2>
          </div>
          <div class="col-auto ms-auto d-print-none">
            <div class="btn-list">
              <span class="d-none d-sm-inline">
                <a href="#" class="btn">
                  Nouveau rapport 1
                </a>
              </span>
              <a href="#" class="btn btn-primary d-none d-sm-inline-block" (click)="refreshDashboard()">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                  <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"/>
                  <path d="M17 4a2 2 0 0 0 2 2a2 2 0 0 0 -2 2a2 2 0 0 0 -2 -2a2 2 0 0 0 2 -2"/>
                  <path d="M19 11h2m-1 -1v2"/>
                </svg>
                Actualiser
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Page Body -->
    <div class="page-body">
      <div class="container-xl">
        
        <!-- Stats Cards Row -->
        <div class="row row-deck row-cards">
          <div class="col-sm-6 col-lg-3" 
               *ngFor="let badge of generatedBadges; trackBy: trackByBadge; let i = index">
            <div class="card">
              <div class="card-body">
                <div class="d-flex align-items-center">
                  <div class="subheader">{{ badge.title }}</div>
                  <div class="ms-auto lh-1">
                    <div class="dropdown">
                      <a class="dropdown-toggle text-muted" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dernières 7 jours
                      </a>
                    </div>
                  </div>
                </div>
                <div class="d-flex align-items-baseline">
                  <div class="h1 mb-0 me-2">{{ getFormattedValue(badge) }}</div>
                  <div class="me-auto">
                    <span class="text-green d-inline-flex align-items-center lh-1" *ngIf="badge.trend === 'up'">
                      +{{ badge.variation || 0 }}%
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <polyline points="3,17 9,11 13,15 21,7"/>
                        <polyline points="14,7 21,7 21,14"/>
                      </svg>
                    </span>
                    <span class="text-red d-inline-flex align-items-center lh-1" *ngIf="badge.trend === 'down'">
                      -{{ badge.variation || 0 }}%
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon ms-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <polyline points="3,7 9,13 13,9 21,17"/>
                        <polyline points="21,10 21,17 14,17"/>
                      </svg>
                    </span>
                  </div>
                </div>
                <div id="chart-revenue-bg" class="chart-sm"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- Dashboard Content by Type -->
        <div class="row row-deck row-cards">
          
          <!-- Dashboard Général -->
          <ng-container *ngIf="dashboardType === 'general'">
            
            <!-- Graphique Principal -->
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Évolution de l'Activité</h3>
                  <div class="card-actions">
                    <div class="btn-group" role="group">
                      <input type="radio" class="btn-check" name="chart-period" id="chart-today" autocomplete="off" checked>
                      <label for="chart-today" class="btn btn-sm">Aujourd'hui</label>
                      <input type="radio" class="btn-check" name="chart-period" id="chart-week" autocomplete="off">
                      <label for="chart-week" class="btn btn-sm">7 jours</label>
                      <input type="radio" class="btn-check" name="chart-period" id="chart-month" autocomplete="off">
                      <label for="chart-month" class="btn btn-sm">30 jours</label>
                    </div>
                  </div>
                </div>
                <div class="card-body">
                  <div id="chart-mentions" class="chart-lg"></div>
                  <!-- Simulation graphique avec SVG -->
                  <div class="chart-simulation">
                    <svg class="chart-svg" viewBox="0 0 800 300" style="width: 100%; height: 300px;">
                      <defs>
                        <linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
                          <stop offset="0%" style="stop-color:#206bc4;stop-opacity:0.3" />
                          <stop offset="100%" style="stop-color:#206bc4;stop-opacity:0" />
                        </linearGradient>
                        <linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
                          <stop offset="0%" style="stop-color:#79a6dc;stop-opacity:0.3" />
                          <stop offset="100%" style="stop-color:#79a6dc;stop-opacity:0" />
                        </linearGradient>
                      </defs>
                      
                      <!-- Grille de fond -->
                      <g stroke="#f1f5f9" stroke-width="1" opacity="0.5">
                        <line x1="0" y1="60" x2="800" y2="60"/>
                        <line x1="0" y1="120" x2="800" y2="120"/>
                        <line x1="0" y1="180" x2="800" y2="180"/>
                        <line x1="0" y1="240" x2="800" y2="240"/>
                      </g>
                      
                      <!-- Zone 1 -->
                      <path d="M50,200 Q150,180 250,160 T450,140 T650,120 L650,280 L50,280 Z" fill="url(#gradient1)"/>
                      <!-- Ligne 1 -->
                      <path d="M50,200 Q150,180 250,160 T450,140 T650,120" stroke="#206bc4" stroke-width="3" fill="none"/>
                      
                      <!-- Zone 2 -->
                      <path d="M50,240 Q150,220 250,200 T450,180 T650,160 L650,280 L50,280 Z" fill="url(#gradient2)"/>
                      <!-- Ligne 2 -->
                      <path d="M50,240 Q150,220 250,200 T450,180 T650,160" stroke="#79a6dc" stroke-width="3" fill="none"/>
                      
                      <!-- Points de données -->
                      <circle cx="50" cy="200" r="4" fill="#206bc4"/>
                      <circle cx="150" cy="180" r="4" fill="#206bc4"/>
                      <circle cx="250" cy="160" r="4" fill="#206bc4"/>
                      <circle cx="350" cy="150" r="4" fill="#206bc4"/>
                      <circle cx="450" cy="140" r="4" fill="#206bc4"/>
                      <circle cx="550" cy="130" r="4" fill="#206bc4"/>
                      <circle cx="650" cy="120" r="4" fill="#206bc4"/>
                      
                      <!-- Labels -->
                      <text x="50" y="295" text-anchor="middle" fill="#6c757d" font-size="12">Jan</text>
                      <text x="150" y="295" text-anchor="middle" fill="#6c757d" font-size="12">Fév</text>
                      <text x="250" y="295" text-anchor="middle" fill="#6c757d" font-size="12">Mar</text>
                      <text x="350" y="295" text-anchor="middle" fill="#6c757d" font-size="12">Avr</text>
                      <text x="450" y="295" text-anchor="middle" fill="#6c757d" font-size="12">Mai</text>
                      <text x="550" y="295" text-anchor="middle" fill="#6c757d" font-size="12">Jun</text>
                      <text x="650" y="295" text-anchor="middle" fill="#6c757d" font-size="12">Jul</text>
                    </svg>
                  </div>
                </div>
              </div>
            </div>

            <!-- Activité Récente + Projets -->
            <div class="col-md-6">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Activité Récente</h3>
                </div>
                <div class="card-body card-body-scrollable card-body-scrollable-shadow">
                  <div class="divide-y">
                    <div class="row" *ngFor="let activity of recentActivities">
                      <div class="col-auto">
                        <span class="avatar" [style.background-color]="activity.color">{{ activity.initials }}</span>
                      </div>
                      <div class="col">
                        <div class="text-truncate">
                          <strong>{{ activity.user }}</strong> {{ activity.action }}
                        </div>
                        <div class="text-muted">{{ activity.time }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Projets par Statut -->
            <div class="col-md-6">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Projets par Statut</h3>
                </div>
                <div class="card-body">
                  <div class="row">
                    <div class="col-6 col-sm-4" *ngFor="let status of projectStatuses">
                      <div class="text-center">
                        <span class="text-h1 d-block" [style.color]="status.color">{{ status.count }}</span>
                        <div class="text-muted">{{ status.label }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Équipe Active -->
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Équipe Active</h3>
                  <div class="card-actions">
                    <a href="#" class="btn btn-outline-primary btn-sm">
                      Voir tout
                    </a>
                  </div>
                </div>
                <div class="table-responsive">
                  <table class="table table-vcenter card-table">
                    <thead>
                      <tr>
                        <th>Membre</th>
                        <th>Rôle</th>
                        <th>Tâches</th>
                        <th>Performance</th>
                        <th class="w-1"></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let member of activeTeamMembers">
                        <td>
                          <div class="d-flex py-1 align-items-center">
                            <span class="avatar me-2" [style.background-color]="member.color">{{ member.initials }}</span>
                            <div class="flex-fill">
                              <div class="font-weight-medium">{{ member.name }}</div>
                              <div class="text-muted">{{ member.email }}</div>
                            </div>
                          </div>
                        </td>
                        <td>
                          <div class="text-muted">{{ member.role }}</div>
                        </td>
                        <td>
                          <div class="d-flex align-items-center">
                            <span class="me-2">{{ member.completedTasks }}/{{ member.totalTasks }}</span>
                            <div class="progress progress-xs">
                              <div class="progress-bar" 
                                   [style.width.%]="(member.completedTasks / member.totalTasks) * 100"
                                   [style.background-color]="member.color"></div>
                            </div>
                          </div>
                        </td>
                        <td>
                          <span class="badge" [class]="getPerformanceBadgeClass(member.score)">{{ member.score }}%</span>
                        </td>
                        <td>
                          <div class="dropdown">
                            <a href="#" class="btn-action" data-bs-toggle="dropdown" aria-expanded="false">
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                <circle cx="12" cy="12" r="1"/>
                                <circle cx="12" cy="19" r="1"/>
                                <circle cx="12" cy="5" r="1"/>
                              </svg>
                            </a>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

          </ng-container>

          <!-- Dashboard Finance -->
          <ng-container *ngIf="dashboardType === 'finance'">
            
            <!-- Revenus Chart -->
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Revenus & Dépenses</h3>
                  <div class="card-actions">
                    <div class="dropdown">
                      <a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                          <circle cx="12" cy="12" r="1"/>
                          <circle cx="12" cy="19" r="1"/>
                          <circle cx="12" cy="5" r="1"/>
                        </svg>
                      </a>
                    </div>
                  </div>
                </div>
                <div class="card-body">
                  <div id="chart-revenue-bg" class="chart-lg"></div>
                  <!-- Simulation graphique en barres -->
                  <div class="chart-simulation">
                    <svg class="chart-svg" viewBox="0 0 800 250" style="width: 100%; height: 250px;">
                      <!-- Barres revenus -->
                      <g fill="#206bc4">
                        <rect x="60" y="150" width="40" height="80" rx="2"/>
                        <rect x="140" y="120" width="40" height="110" rx="2"/>
                        <rect x="220" y="100" width="40" height="130" rx="2"/>
                        <rect x="300" y="80" width="40" height="150" rx="2"/>
                        <rect x="380" y="90" width="40" height="140" rx="2"/>
                        <rect x="460" y="70" width="40" height="160" rx="2"/>
                        <rect x="540" y="60" width="40" height="170" rx="2"/>
                        <rect x="620" y="50" width="40" height="180" rx="2"/>
                      </g>
                      
                      <!-- Barres dépenses -->
                      <g fill="#79a6dc" opacity="0.7">
                        <rect x="70" y="180" width="20" height="50" rx="1"/>
                        <rect x="150" y="160" width="20" height="70" rx="1"/>
                        <rect x="230" y="140" width="20" height="90" rx="1"/>
                        <rect x="310" y="130" width="20" height="100" rx="1"/>
                        <rect x="390" y="135" width="20" height="95" rx="1"/>
                        <rect x="470" y="120" width="20" height="110" rx="1"/>
                        <rect x="550" y="110" width="20" height="120" rx="1"/>
                        <rect x="630" y="100" width="20" height="130" rx="1"/>
                      </g>
                      
                      <!-- Labels -->
                      <text x="80" y="250" text-anchor="middle" fill="#6c757d" font-size="12">Jan</text>
                      <text x="160" y="250" text-anchor="middle" fill="#6c757d" font-size="12">Fév</text>
                      <text x="240" y="250" text-anchor="middle" fill="#6c757d" font-size="12">Mar</text>
                      <text x="320" y="250" text-anchor="middle" fill="#6c757d" font-size="12">Avr</text>
                      <text x="400" y="250" text-anchor="middle" fill="#6c757d" font-size="12">Mai</text>
                      <text x="480" y="250" text-anchor="middle" fill="#6c757d" font-size="12">Jun</text>
                      <text x="560" y="250" text-anchor="middle" fill="#6c757d" font-size="12">Jul</text>
                      <text x="640" y="250" text-anchor="middle" fill="#6c757d" font-size="12">Aoû</text>
                    </svg>
                  </div>
                </div>
              </div>
            </div>

            <!-- Tâches + Calendrier -->
            <div class="col-md-6">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Tâches à Faire</h3>
                </div>
                <div class="list-group list-group-flush">
                  <div class="list-group-item" *ngFor="let task of upcomingTasks">
                    <div class="row align-items-center">
                      <div class="col-auto">
                        <label class="form-check">
                          <input class="form-check-input" type="checkbox" [checked]="task.completed">
                          <span class="form-check-label"></span>
                        </label>
                      </div>
                      <div class="col text-truncate">
                        <a href="#" class="text-body d-block">{{ task.title }}</a>
                        <div class="d-block text-muted text-truncate mt-n1">{{ task.description }}</div>
                      </div>
                      <div class="col-auto">
                        <span class="badge" [class]="getPriorityBadgeClass(task.priority)">{{ task.priority }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-6">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Calendrier</h3>
                </div>
                <div class="card-body">
                  <div class="datagrid">
                    <div class="datagrid-item" *ngFor="let event of calendarEvents">
                      <div class="datagrid-title">{{ event.title }}</div>
                      <div class="datagrid-content">
                        <div class="d-flex align-items-center">
                          <span class="status-dot" [style.background-color]="event.color"></span>
                          <span class="ms-2">{{ event.date | date:'dd/MM à HH:mm' }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </ng-container>

          <!-- Dashboard Finance -->
          <ng-container *ngIf="dashboardType === 'finance'">
            
            <!-- KPIs Financiers -->
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Indicateurs Financiers</h3>
                  <div class="card-actions">
                    <select class="form-select form-select-sm">
                      <option>Ce mois</option>
                      <option>Ce trimestre</option>
                      <option>Cette année</option>
                    </select>
                  </div>
                </div>
                <div class="card-body">
                  <div class="row">
                    <div class="col-sm-6 col-lg-3" *ngFor="let kpi of financeKPIs">
                      <div class="card card-sm">
                        <div class="card-body">
                          <div class="row align-items-center">
                            <div class="col-auto">
                              <span class="bg-primary text-white avatar">
                                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                  <circle cx="12" cy="12" r="9"/>
                                  <path d="M14.8 9a2 2 0 0 0 -1.8 -1h-2a2 2 0 1 0 0 4h2a2 2 0 1 1 0 4h-2a2 2 0 0 1 -1.8 -1"/>
                                  <path d="M12 7v10"/>
                                </svg>
                              </span>
                            </div>
                            <div class="col">
                              <div class="font-weight-medium">{{ kpi.value }}</div>
                              <div class="text-muted">{{ kpi.title }}</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Transactions Récentes -->
            <div class="col-md-8">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Transactions Récentes</h3>
                </div>
                <div class="table-responsive">
                  <table class="table table-vcenter card-table">
                    <thead>
                      <tr>
                        <th>Date</th>
                        <th>Description</th>
                        <th>Catégorie</th>
                        <th>Montant</th>
                        <th>Statut</th>
                        <th class="w-1"></th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let transaction of recentTransactions">
                        <td class="text-muted">{{ transaction.date }}</td>
                        <td>{{ transaction.description }}</td>
                        <td>
                          <span class="badge badge-outline" [class]="getTransactionCategoryClass(transaction.category)">
                            {{ transaction.category }}
                          </span>
                        </td>
                        <td class="text-end">
                          <span [class]="transaction.amount >= 0 ? 'text-green' : 'text-red'">
                            {{ transaction.amount | currency:'EUR':'symbol':'1.2-2' }}
                          </span>
                        </td>
                        <td>
                          <span class="badge" [class]="getStatusBadgeClass(transaction.status)">
                            {{ getStatusLabel(transaction.status) }}
                          </span>
                        </td>
                        <td>
                          <div class="dropdown">
                            <a href="#" class="btn-action dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                                <circle cx="12" cy="12" r="1"/>
                                <circle cx="12" cy="19" r="1"/>
                                <circle cx="12" cy="5" r="1"/>
                              </svg>
                            </a>
                          </div>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <!-- Top Clients -->
            <div class="col-md-4">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Top Clients</h3>
                </div>
                <div class="card-body card-body-scrollable card-body-scrollable-shadow">
                  <div class="divide-y">
                    <div class="row" *ngFor="let client of topClients; let i = index">
                      <div class="col-auto">
                        <span class="avatar avatar-rounded">{{ i + 1 }}</span>
                      </div>
                      <div class="col">
                        <div class="text-truncate">
                          <strong>{{ client.name }}</strong>
                        </div>
                        <div class="text-muted">{{ client.location }}</div>
                      </div>
                      <div class="col-auto align-self-center">
                        <div class="badge" [class]="client.trend === 'up' ? 'bg-green' : 'bg-red'">
                          {{ client.revenue | currency:'EUR':'symbol':'1.0-0' }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </ng-container>

          <!-- Dashboard Projets -->
          <ng-container *ngIf="dashboardType === 'projects'">
            
            <!-- Vue Kanban -->
            <div class="col-12">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Vue Kanban Projets</h3>
                  <div class="card-actions">
                    <a href="#" class="btn btn-primary">
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                        <line x1="12" y1="5" x2="12" y2="19"/>
                        <line x1="5" y1="12" x2="19" y2="12"/>
                      </svg>
                      Nouveau projet
                    </a>
                  </div>
                </div>
                <div class="card-body">
                  <div class="row">
                    <div class="col-md-3" *ngFor="let column of kanbanColumns">
                      <div class="card card-sm">
                        <div class="card-status-top" [style.background-color]="column.color"></div>
                        <div class="card-header">
                          <h3 class="card-title">{{ column.title }}</h3>
                          <div class="card-actions">
                            <span class="badge">{{ column.count }}</span>
                          </div>
                        </div>
                        <div class="card-body">
                          <div class="divide-y">
                            <div class="row" *ngFor="let project of column.projects.slice(0, 3)">
                              <div class="col">
                                <div class="text-truncate">
                                  <strong>{{ project.title }}</strong>
                                </div>
                                <div class="text-muted">{{ project.assignee }}</div>
                              </div>
                              <div class="col-auto">
                                <span class="badge" [class]="getPriorityBadgeClass(project.priority)">
                                  {{ project.priority }}
                                </span>
                              </div>
                            </div>
                          </div>
                          <div class="text-center mt-3" *ngIf="column.projects.length > 3">
                            <a href="#" class="text-muted">{{ column.projects.length - 3 }} autres projets</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Timeline des Échéances -->
            <div class="col-md-6">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Échéances à Venir</h3>
                </div>
                <div class="card-body card-body-scrollable card-body-scrollable-shadow">
                  <div class="divide-y">
                    <div class="row" *ngFor="let milestone of upcomingMilestones">
                      <div class="col-auto">
                        <div class="avatar avatar-rounded" [style.background-color]="milestone.color">
                          {{ milestone.date | date:'dd' }}
                        </div>
                      </div>
                      <div class="col">
                        <div class="text-truncate">
                          <strong>{{ milestone.title }}</strong>
                        </div>
                        <div class="text-muted">{{ milestone.project }} •  {{ milestone.assignee }}</div>
                      </div>
                      <div class="col-auto align-self-center">
                        <div class="badge" [class]="getStatusBadgeClass(milestone.status)">
                          {{ milestone.status }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            
            </div>

            <!-- Ressources Équipe -->
            <div class="col-md-6">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Charge de Travail Équipe</h3>
                </div>
                <div class="card-body">
                  <div class="divide-y">
                    <div class="row" *ngFor="let member of teamWorkload">
                      <div class="col-auto">
                        <span class="avatar" [style.background-color]="member.color">{{ member.initials }}</span>
                      </div>
                      <div class="col">
                        <div class="text-truncate">
                          <strong>{{ member.name }}</strong>
                        </div>
                        <div class="text-muted">{{ member.role }}</div>
                        <div class="progress progress-xs mt-2">
                          <div class="progress-bar" 
                               [style.width.%]="member.workload"
                               [style.background-color]="getWorkloadColor(member.workload)"></div>
                        </div>
                      </div>
                      <div class="col-auto align-self-center">
                        <div class="text-end">
                          <div class="h4 m-0">{{ member.workload }}%</div>
                          <div class="text-muted">{{ member.activeProjects }} projets</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </ng-container>

          <!-- Dashboard Reporting -->
          <ng-container *ngIf="dashboardType === 'reporting'">

            <!-- Erreur de chargement -->
            <div class="col-12" *ngIf="reportingError">
              <div class="alert alert-danger" role="alert">
                <h4 class="alert-title">Erreur de chargement</h4>
                <div class="text-muted">{{ reportingError }}</div>
              </div>
            </div>

            <!-- Score de santé global -->
            <div class="col-12" *ngIf="reportsDashboard">
              <div class="card">
                <div class="card-body">
                  <div class="row align-items-center">
                    <div class="col-auto">
                      <div class="h1 mb-0 text-center"
                           [class.text-green]="reportsDashboard.global_health.status === 'good'"
                           [class.text-yellow]="reportsDashboard.global_health.status === 'warning'"
                           [class.text-red]="reportsDashboard.global_health.status === 'critical'">
                        {{ (reportsDashboard.global_health.score || 0).toFixed(2) }}%
                      </div>
                    </div>
                    <div class="col">
                      <div class="h3 mb-0">Santé Globale des Rapports</div>
                      <div class="text-muted">
                        Période: {{ reportsDashboard.period.date_from }} au {{ reportsDashboard.period.date_to }}
                      </div>
                    </div>
                    <div class="col-auto">
                      <span class="badge"
                            [class.bg-green]="reportsDashboard.global_health.status === 'good'"
                            [class.bg-yellow]="reportsDashboard.global_health.status === 'warning'"
                            [class.bg-red]="reportsDashboard.global_health.status === 'critical'">
                        {{ reportsDashboard.global_health.status === 'good' ? 'Bon' :
                           reportsDashboard.global_health.status === 'warning' ? 'Attention' : 'Critique' }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Cartes des 6 rapports -->
            <ng-container *ngIf="reportsDashboard">
              <div class="col-sm-6 col-lg-4" *ngFor="let reportKey of getReportKeys()">
                <div class="card">
                  <div class="card-header">
                    <h3 class="card-title">{{ getReportTitleFromKey(reportKey) }}</h3>
                  </div>
                  <div class="card-body">
                    <div class="d-flex align-items-baseline mb-3">
                      <div class="h1 mb-0 me-2">{{ getReportPercentage(reportKey) }}%</div>
                      <div>
                        <span class="badge"
                              [class.bg-green]="getReportStatus(reportKey) === 'good'"
                              [class.bg-yellow]="getReportStatus(reportKey) === 'warning'"
                              [class.bg-red]="getReportStatus(reportKey) === 'critical'">
                          {{ getReportStatusLabel(reportKey) }}
                        </span>
                      </div>
                    </div>

                    <div class="progress progress-sm mb-2">
                      <div class="progress-bar"
                           [class.bg-green]="getReportStatus(reportKey) === 'good'"
                           [class.bg-yellow]="getReportStatus(reportKey) === 'warning'"
                           [class.bg-red]="getReportStatus(reportKey) === 'critical'"
                           [style.width.%]="getReportPercentage(reportKey)"></div>
                    </div>

                    <div class="row">
                      <div class="col">
                        <div class="text-muted">Total</div>
                        <div class="h4 mb-0">{{ getReportTotalValue(reportKey) }}</div>
                      </div>
                      <div class="col">
                        <div class="text-muted">Appariés</div>
                        <div class="h4 mb-0 text-green">{{ getReportMatchedValue(reportKey) }}</div>
                      </div>
                      <div class="col">
                        <div class="text-muted">Écarts</div>
                        <div class="h4 mb-0 text-red">{{ getReportUnmatchedValue(reportKey) }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </ng-container>

            <!-- Alertes -->
            <div class="col-12" *ngIf="reportsDashboard && reportsDashboard.alerts && reportsDashboard.alerts.length > 0">
              <div class="card">
                <div class="card-header">
                  <h3 class="card-title">Alertes</h3>
                </div>
                <div class="list-group list-group-flush">
                  <div class="list-group-item" *ngFor="let alert of reportsDashboard.alerts">
                    <div class="row align-items-center">
                      <div class="col-auto">
                        <span class="status-dot"
                              [class.status-dot-animated]="alert.status === 'critical'"
                              [class.bg-green]="alert.status === 'info'"
                              [class.bg-yellow]="alert.status === 'warning'"
                              [class.bg-red]="alert.status === 'critical'"></span>
                      </div>
                      <div class="col">
                        <div class="text-truncate">
                          <strong>{{ getReportTitleFromKey(alert.report) }}</strong>
                        </div>
                        <div class="text-muted">{{ (alert.percentage || 0).toFixed(2) }}% de correspondance</div>
                      </div>
                      <div class="col-auto">
                        <span class="badge"
                              [class.bg-green]="alert.status === 'info'"
                              [class.bg-yellow]="alert.status === 'warning'"
                              [class.bg-red]="alert.status === 'critical'">
                          {{ alert.status === 'info' ? 'Info' : alert.status === 'warning' ? 'Attention' : 'Critique' }}
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </ng-container>

        </div>
      </div>
    </div>
  </div>
</div>