feat: add active/inactive clients statistics to admin dashboard

- Add activeClients and inactiveClients to AdminStatistics type
- Add pie chart showing client status (active/inactive)
- Add detailed stats rows for active/inactive clients

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/admin/dashboard/page.tsx

@@ -187,6 +187,12 @@ export default function AdminDashboardAdvanced() {
     { name: "Admins", value: stats.users.admins || 0, color: "#3b82f6" },
   ].filter(item => item.value > 0);
 
+  // Données pour le graphique des clients actifs/inactifs
+  const clientStatusData = [
+    { name: "Actifs", value: stats.users.activeClients || 0, color: "#10b981" },
+    { name: "Inactifs", value: stats.users.inactiveClients || 0, color: "#ef4444" },
+  ].filter(item => item.value > 0);
+
   const ticketDistributedPercent = stats.tickets.total > 0
     ? ((stats.tickets.distributed / stats.tickets.total) * 100).toFixed(1)
     : 0;
@@ -389,6 +395,39 @@ export default function AdminDashboardAdvanced() {
           </div>
         )}
 
+        {/* Graphique Clients Actifs/Inactifs */}
+        {clientStatusData.length > 0 && (
+          <div className="bg-white rounded-2xl shadow-md border border-gray-100 p-6 hover:shadow-lg transition-shadow">
+            <h2 className="text-xl font-bold text-gray-800 mb-4 flex items-center gap-3">
+              <div className="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center">
+                <UserIcon className="w-5 h-5 text-emerald-600" />
+              </div>
+              Statut des Clients
+            </h2>
+            <ResponsiveContainer width="100%" height={300}>
+              <PieChart>
+                <Pie
+                  data={clientStatusData}
+                  cx="50%"
+                  cy="50%"
+                  labelLine={false}
+                  label={({ name, value }) => `${name}: ${value}`}
+                  outerRadius={80}
+                  innerRadius={40}
+                  fill="#8884d8"
+                  dataKey="value"
+                >
+                  {clientStatusData.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.color} />
+                  ))}
+                </Pie>
+                <Tooltip />
+                <Legend />
+              </PieChart>
+            </ResponsiveContainer>
+          </div>
+        )}
+
         {/* Graphique répartition par genre */}
         {genderChartData.length > 0 && (
           <div className="bg-white rounded-2xl shadow-md border border-gray-100 p-6 hover:shadow-lg transition-shadow">
@@ -502,6 +541,8 @@ export default function AdminDashboardAdvanced() {
           <div className="space-y-3">
             <StatRow label="Total" value={stats?.users?.total || 0} />
             <StatRow label="Clients" value={stats?.users?.clients || 0} color="green" />
+            <StatRow label="Clients actifs" value={stats?.users?.activeClients || 0} color="green" />
+            <StatRow label="Clients inactifs" value={stats?.users?.inactiveClients || 0} color="red" />
             <StatRow label="Employés" value={stats?.users?.employees || 0} color="purple" />
             <StatRow label="Admins" value={stats?.users?.admins || 0} color="blue" />
           </div>

types/index.ts

@@ -187,6 +187,8 @@ export interface AdminStatistics {
   users: {
     total: number;
     clients: number;
+    activeClients: number;
+    inactiveClients: number;
     employees: number;
     admins: number;
     verifiedEmails: number;