new

app/analytics/page.tsx

@@ -2,6 +2,7 @@ import { Suspense } from "react";
 import { Card, CardContent } from "@/components/ui/card";
 import { UsageAnalytics } from "@/components/dashboard/usage-analytics";
 import { RecentTransactions } from "@/components/dashboard/recent-transactions";
+
 import { BarChart3 } from "lucide-react";
 
 function AnalyticsSkeleton() {
@@ -39,7 +40,7 @@ export default function AnalyticsPage() {
         <div className="space-y-6">
           {/* Analytics des utilisateurs */}
           <UsageAnalytics />
-          
+
           {/* Transactions récentes - toute la largeur */}
           <RecentTransactions />
         </div>

app/api/add-credits/route.ts

@@ -0,0 +1,124 @@
+import { NextResponse } from "next/server";
+import { getDatabase } from "@/lib/db/mongodb";
+
+export async function POST() {
+  try {
+    const db = await getDatabase();
+    const CREDITS_TO_ADD = 5000000; // 5 millions de tokens
+
+    console.log(`🚀 DÉBUT: Ajout de ${CREDITS_TO_ADD.toLocaleString()} crédits à tous les utilisateurs`);
+
+    // Récupérer tous les utilisateurs existants
+    const users = await db.collection("users").find({}).toArray();
+    console.log(`👥 Utilisateurs trouvés: ${users.length}`);
+
+    if (users.length === 0) {
+      return NextResponse.json({
+        success: false,
+        message: "Aucun utilisateur trouvé"
+      });
+    }
+
+    // Récupérer toutes les balances existantes
+    const existingBalances = await db.collection("balances").find({}).toArray();
+    const existingBalanceUserIds = new Set(
+      existingBalances.map(balance => balance.user.toString())
+    );
+
+    console.log(`💰 Balances existantes: ${existingBalances.length}`);
+
+    let updatedCount = 0;
+    let createdCount = 0;
+    let totalCreditsAdded = 0;
+
+    // Pour chaque utilisateur
+    for (const user of users) {
+      const userId = user._id;
+      
+      if (existingBalanceUserIds.has(userId.toString())) {
+        // Utilisateur a déjà une balance - ajouter les crédits
+        const updateResult = await db.collection("balances").updateOne(
+          { user: userId },
+          { 
+            $inc: { tokenCredits: CREDITS_TO_ADD },
+            $set: { lastRefill: new Date() }
+          }
+        );
+        
+        if (updateResult.modifiedCount > 0) {
+          updatedCount++;
+          totalCreditsAdded += CREDITS_TO_ADD;
+          console.log(`✅ Crédits ajoutés pour l'utilisateur: ${user.email || user.name}`);
+        }
+      } else {
+        // Utilisateur n'a pas de balance - créer une nouvelle balance
+        const newBalance = {
+          user: userId,
+          tokenCredits: CREDITS_TO_ADD,
+          autoRefillEnabled: false,
+          lastRefill: new Date(),
+          refillAmount: 0,
+          refillIntervalUnit: "month",
+          refillIntervalValue: 1,
+          __v: 0
+        };
+
+        await db.collection("balances").insertOne(newBalance);
+        createdCount++;
+        totalCreditsAdded += CREDITS_TO_ADD;
+        console.log(`🆕 Nouvelle balance créée pour: ${user.email || user.name}`);
+      }
+    }
+
+    console.log(`✅ TERMINÉ:`);
+    console.log(`- Balances mises à jour: ${updatedCount}`);
+    console.log(`- Nouvelles balances créées: ${createdCount}`);
+    console.log(`- Total crédits ajoutés: ${totalCreditsAdded.toLocaleString()}`);
+
+    return NextResponse.json({
+      success: true,
+      statistics: {
+        totalUsers: users.length,
+        updatedBalances: updatedCount,
+        createdBalances: createdCount,
+        creditsPerUser: CREDITS_TO_ADD,
+        totalCreditsAdded
+      },
+      message: `${CREDITS_TO_ADD.toLocaleString()} crédits ajoutés à ${users.length} utilisateurs (${updatedCount} mis à jour, ${createdCount} créés)`
+    });
+
+  } catch (error) {
+    console.error("Erreur lors de l'ajout des crédits:", error);
+    return NextResponse.json({ 
+      success: false,
+      error: "Erreur serveur lors de l'ajout des crédits" 
+    }, { status: 500 });
+  }
+}
+
+// Endpoint pour vérifier les crédits actuels
+export async function GET() {
+  try {
+    const db = await getDatabase();
+
+    const users = await db.collection("users").find({}).toArray();
+    const balances = await db.collection("balances").find({}).toArray();
+
+    const totalCredits = balances.reduce((sum, balance) => sum + (balance.tokenCredits || 0), 0);
+    const averageCredits = balances.length > 0 ? totalCredits / balances.length : 0;
+
+    return NextResponse.json({
+      statistics: {
+        totalUsers: users.length,
+        totalBalances: balances.length,
+        totalCredits,
+        averageCredits: Math.round(averageCredits),
+        usersWithoutBalance: users.length - balances.length
+      }
+    });
+
+  } catch (error) {
+    console.error("Erreur lors de la récupération des statistiques:", error);
+    return NextResponse.json({ error: "Erreur serveur" }, { status: 500 });
+  }
+}

app/api/cleanup/balances/route.ts

@@ -0,0 +1,104 @@
+import { NextResponse } from "next/server";
+import { getDatabase } from "@/lib/db/mongodb";
+
+export async function POST() {
+  try {
+    const db = await getDatabase();
+
+    // Récupérer tous les utilisateurs existants
+    const users = await db.collection("users").find({}).toArray();
+    const userIds = new Set(users.map(user => user._id.toString()));
+
+    // Récupérer toutes les balances
+    const balances = await db.collection("balances").find({}).toArray();
+
+    // Identifier les balances fantômes
+    const phantomBalances = balances.filter(balance => 
+      !userIds.has(balance.user.toString())
+    );
+
+    // Calculer les statistiques avant nettoyage
+    const totalBalances = balances.length;
+    const phantomCount = phantomBalances.length;
+    const phantomCredits = phantomBalances.reduce(
+      (sum, balance) => sum + (balance.tokenCredits || 0), 
+      0
+    );
+
+    console.log(`🗑️ SUPPRESSION: ${phantomCount} balances fantômes détectées`);
+    console.log(`💰 CRÉDITS FANTÔMES: ${phantomCredits}`);
+
+    // SUPPRESSION DÉFINITIVE des balances fantômes
+    const deleteResult = await db.collection("balances").deleteMany({
+      user: { $nin: Array.from(userIds) }
+    });
+
+    console.log(`✅ SUPPRIMÉES: ${deleteResult.deletedCount} balances`);
+
+    return NextResponse.json({
+      success: true,
+      statistics: {
+        totalBalances,
+        phantomCount,
+        phantomCredits,
+        cleanedCount: deleteResult.deletedCount
+      },
+      message: `${deleteResult.deletedCount} balances fantômes supprimées définitivement`
+    });
+
+  } catch (error) {
+    console.error("Erreur lors du nettoyage des balances:", error);
+    return NextResponse.json({ error: "Erreur serveur" }, { status: 500 });
+  }
+}
+
+// Endpoint pour analyser sans nettoyer
+export async function GET() {
+  try {
+    const db = await getDatabase();
+
+    const users = await db.collection("users").find({}).toArray();
+    const userIds = new Set(users.map(user => user._id.toString()));
+
+    const balances = await db.collection("balances").find({}).toArray();
+
+    const phantomBalances = balances.filter(balance => 
+      !userIds.has(balance.user.toString())
+    );
+
+    const phantomCredits = phantomBalances.reduce(
+      (sum, balance) => sum + (balance.tokenCredits || 0), 
+      0
+    );
+
+    // Analyser les doublons aussi
+    const userCounts = new Map<string, number>();
+    balances.forEach(balance => {
+      const userId = balance.user.toString();
+      userCounts.set(userId, (userCounts.get(userId) || 0) + 1);
+    });
+
+    const duplicates = Array.from(userCounts.entries())
+      .filter(([, count]) => count > 1)
+      .map(([userId, count]) => ({
+        userId,
+        count,
+        isPhantom: !userIds.has(userId)
+      }));
+
+    return NextResponse.json({
+      analysis: {
+        totalBalances: balances.length,
+        totalUsers: users.length,
+        phantomBalances: phantomBalances.length,
+        phantomCredits,
+        duplicateUsers: duplicates.length,
+        duplicates: duplicates.slice(0, 10) // Premiers 10 exemples
+      }
+    });
+
+  } catch (error) {
+    console.error("Erreur lors de l'analyse des balances:", error);
+    return NextResponse.json({ error: "Erreur serveur" }, { status: 500 });
+  }
+}

app/api/metrics/route.ts

@@ -13,21 +13,21 @@ export async function GET() {
       db.collection("balances").find({}).toArray(),
     ]);
 
-    // Calculer les utilisateurs actifs (dernière semaine)
-    const oneWeekAgo = new Date();
-    oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
+    // Calculer les utilisateurs actifs (30 derniers jours)
+    const thirtyDaysAgo = new Date();
+    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
     const activeUsers = users.filter((user) => {
       const lastActivity = new Date(user.updatedAt || user.createdAt);
-      return lastActivity >= oneWeekAgo;
+      return lastActivity >= thirtyDaysAgo;
     }).length;
 
     // Calculer les administrateurs
     const totalAdmins = users.filter(user => user.role === 'ADMIN').length;
 
-    // Calculer les conversations actives (dernière semaine)
+    // Calculer les conversations actives (30 derniers jours)
     const activeConversations = conversations.filter((conv) => {
       const lastActivity = new Date(conv.updatedAt || conv.createdAt);
-      return lastActivity >= oneWeekAgo;
+      return lastActivity >= thirtyDaysAgo;
     }).length;
 
     // Calculer le total des messages
@@ -41,32 +41,27 @@ export async function GET() {
       return sum + Math.abs(Number(transaction.rawAmount) || 0);
     }, 0);
 
-    // Calculer le total des crédits depuis balances
-    const totalCredits = balances.reduce((sum, balance) => {
-      return sum + (Number(balance.tokenCredits) || 0);
-    }, 0);
+    // Calculer le total des crédits
+    const totalCreditsUsed = balances.reduce(
+      (sum, balance) => sum + (balance.tokenCredits || 0),
+      0
+    );
 
     // Récupérer les transactions récentes (dernières 10)
     const recentTransactions = transactions
       .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
-      .slice(0, 10)
-      .map(transaction => ({
-        _id: transaction._id,
-        description: `Transaction ${transaction.tokenType} - ${transaction.model}`,
-        amount: transaction.rawAmount,
-        type: transaction.rawAmount > 0 ? 'credit' : 'debit',
-        createdAt: transaction.createdAt
-      }));
+      .slice(0, 10);
 
     return NextResponse.json({
       totalUsers: users.length,
       activeUsers,
       totalAdmins,
-      totalCredits,
+      totalCredits: totalCreditsUsed,
       activeConversations,
-      totalMessages: totalMessages,
+      totalMessages,
       totalTokensConsumed,
-      recentTransactions
+      totalCreditsUsed,
+      recentTransactions,
     });
   } catch (error) {
     console.error("Erreur lors du calcul des métriques:", error);

app/api/stats/route.ts

@@ -7,6 +7,22 @@ export async function GET() {
 
     // Récupérer toutes les transactions
     const transactions = await db.collection("transactions").find({}).toArray();
+    
+    console.log(`Total transactions trouvées: ${transactions.length}`);
+    
+    // Vérifier les champs de date disponibles dans les transactions
+    if (transactions.length > 0) {
+      const sampleTransaction = transactions[0];
+      console.log("Exemple de transaction:", {
+        _id: sampleTransaction._id,
+        createdAt: sampleTransaction.createdAt,
+        updatedAt: sampleTransaction.updatedAt,
+        date: sampleTransaction.date,
+        timestamp: sampleTransaction.timestamp,
+        rawAmount: sampleTransaction.rawAmount,
+        model: sampleTransaction.model
+      });
+    }
 
     // Calculer les tokens par jour (7 derniers jours)
     const dailyStats = [];
@@ -22,14 +38,44 @@ export async function GET() {
       nextDate.setDate(nextDate.getDate() + 1);
       
       const dayTransactions = transactions.filter(transaction => {
-        const transactionDate = new Date(transaction.createdAt);
+        // Essayer différents champs de date
+        let transactionDate = null;
+        
+        if (transaction.createdAt) {
+          transactionDate = new Date(transaction.createdAt);
+        } else if (transaction.updatedAt) {
+          transactionDate = new Date(transaction.updatedAt);
+        } else if (transaction.date) {
+          transactionDate = new Date(transaction.date);
+        } else if (transaction.timestamp) {
+          transactionDate = new Date(transaction.timestamp);
+        } else if (transaction._id && transaction._id.getTimestamp) {
+          // Utiliser le timestamp de l'ObjectId MongoDB
+          transactionDate = transaction._id.getTimestamp();
+        }
+        
+        if (!transactionDate || isNaN(transactionDate.getTime())) {
+          return false;
+        }
+        
         return transactionDate >= date && transactionDate < nextDate;
       });
       
       const totalTokens = dayTransactions.reduce((sum, transaction) => {
-        return sum + Math.abs(Number(transaction.rawAmount) || 0);
+        // Essayer différents champs pour les tokens
+        let tokens = 0;
+        if (transaction.rawAmount) {
+          tokens = Math.abs(Number(transaction.rawAmount) || 0);
+        } else if (transaction.amount) {
+          tokens = Math.abs(Number(transaction.amount) || 0);
+        } else if (transaction.tokens) {
+          tokens = Math.abs(Number(transaction.tokens) || 0);
+        }
+        return sum + tokens;
       }, 0);
       
+      console.log(`${dayNames[date.getDay()]} (${date.toISOString().split('T')[0]}): ${dayTransactions.length} transactions, ${totalTokens} tokens`);
+      
       dailyStats.push({
         name: dayNames[date.getDay()],
         value: totalTokens
@@ -40,9 +86,19 @@ export async function GET() {
     const modelStats = new Map<string, number>();
     
     transactions.forEach(transaction => {
-      const model = transaction.model || "Inconnu";
-      const tokens = Math.abs(Number(transaction.rawAmount) || 0);
-      modelStats.set(model, (modelStats.get(model) || 0) + tokens);
+      const model = transaction.model || transaction.modelName || "Inconnu";
+      let tokens = 0;
+      if (transaction.rawAmount) {
+        tokens = Math.abs(Number(transaction.rawAmount) || 0);
+      } else if (transaction.amount) {
+        tokens = Math.abs(Number(transaction.amount) || 0);
+      } else if (transaction.tokens) {
+        tokens = Math.abs(Number(transaction.tokens) || 0);
+      }
+      
+      if (tokens > 0) {
+        modelStats.set(model, (modelStats.get(model) || 0) + tokens);
+      }
     });
 
     // Convertir en array et trier par usage
@@ -50,6 +106,12 @@ export async function GET() {
       .map(([name, value]) => ({ name, value }))
       .sort((a, b) => b.value - a.value);
 
+    console.log("Statistiques calculées:", {
+      dailyStats,
+      totalModels: modelData.length,
+      topModel: modelData[0]
+    });
+
     return NextResponse.json({
       dailyTokens: dailyStats,
       modelDistribution: modelData

app/api/user-activity/route.ts

@@ -8,16 +8,16 @@ export async function GET() {
     // Récupérer tous les utilisateurs
     const users = await db.collection("users").find({}).toArray();
 
-    // Calculer les utilisateurs actifs (dernière semaine)
-    const oneWeekAgo = new Date();
-    oneWeekAgo.setDate(oneWeekAgo.getDate() - 7);
+    // Calculer les utilisateurs actifs (30 derniers jours)
+    const thirtyDaysAgo = new Date();
+    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - 30);
 
     let activeUsers = 0;
     let inactiveUsers = 0;
 
     users.forEach(user => {
       const lastActivity = new Date(user.updatedAt || user.createdAt);
-      if (lastActivity >= oneWeekAgo) {
+      if (lastActivity >= thirtyDaysAgo) {
         activeUsers++;
       } else {
         inactiveUsers++;

app/login/page.tsx

@@ -0,0 +1,194 @@
+"use client";
+
+import { useState } from "react";
+import { createClient } from "@/lib/supabase/client";
+import { useRouter } from "next/navigation";
+import Image from "next/image";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Loader2, Mail, Lock, Shield } from "lucide-react";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const router = useRouter();
+
+  // Fonction pour traduire les erreurs Supabase en français
+  const getErrorMessage = (error: string) => {
+    const errorMessages: { [key: string]: string } = {
+      "Invalid login credentials": "Identifiants de connexion invalides",
+      "Email not confirmed": "Email non confirmé",
+      "Too many requests": "Trop de tentatives de connexion",
+      "User not found": "Utilisateur non trouvé",
+      "Invalid email": "Adresse email invalide",
+      "Password should be at least 6 characters": "Le mot de passe doit contenir au moins 6 caractères",
+      "Email rate limit exceeded": "Limite de tentatives dépassée",
+      "Invalid email or password": "Email ou mot de passe incorrect",
+      "Account not found": "Compte non trouvé",
+      "Invalid credentials": "Identifiants incorrects",
+      "Authentication failed": "Échec de l'authentification",
+      "Access denied": "Accès refusé",
+      "Unauthorized": "Non autorisé",
+    };
+
+    // Chercher une correspondance exacte
+    if (errorMessages[error]) {
+      return errorMessages[error];
+    }
+
+    // Chercher une correspondance partielle
+    for (const [englishError, frenchError] of Object.entries(errorMessages)) {
+      if (error.toLowerCase().includes(englishError.toLowerCase())) {
+        return frenchError;
+      }
+    }
+
+    // Message par défaut si aucune correspondance
+    return "Erreur de connexion. Vérifiez vos identifiants.";
+  };
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError("");
+
+    // Validation côté client
+    if (!email || !password) {
+      setError("Veuillez remplir tous les champs");
+      setLoading(false);
+      return;
+    }
+
+    if (!email.includes("@")) {
+      setError("Veuillez entrer une adresse email valide");
+      setLoading(false);
+      return;
+    }
+
+    const supabase = createClient();
+
+    try {
+      const { data, error: authError } = await supabase.auth.signInWithPassword({
+        email,
+        password,
+      });
+
+      if (authError) {
+        setError(getErrorMessage(authError.message));
+        return;
+      }
+
+      if (data.user) {
+        router.push("/");
+        router.refresh();
+      }
+    } catch (error) {
+      console.error('Login error:', error);
+      setError("Une erreur inattendue est survenue. Veuillez réessayer.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+      <Card className="w-full max-w-md shadow-lg border border-gray-200">
+        <CardHeader className="space-y-6 pb-8">
+          <div className="flex justify-center">
+            <div className="relative w-16 h-16 rounded-full bg-gray-100 p-2">
+              <Image
+                src="/img/logo.png"
+                alt="Logo"
+                width={48}
+                height={48}
+                className="rounded-full"
+              />
+            </div>
+          </div>
+          <div className="text-center space-y-2">
+            <CardTitle className="text-2xl font-bold text-gray-900 flex items-center justify-center gap-2">
+              <Shield className="w-6 h-6 text-gray-700" />
+              Admin Dashboard
+            </CardTitle>
+            <p className="text-gray-600 text-sm">
+              Connectez-vous pour accéder au tableau de bord
+            </p>
+          </div>
+        </CardHeader>
+        
+        <CardContent className="space-y-6">
+          {error && (
+            <Alert className="border-red-200 bg-red-50">
+              <AlertDescription className="text-red-700">
+                {error}
+              </AlertDescription>
+            </Alert>
+          )}
+          
+          <form onSubmit={handleLogin} className="space-y-4">
+            <div className="space-y-2">
+              <label htmlFor="email" className="text-sm font-medium text-gray-700">
+                Email
+              </label>
+              <div className="relative">
+                <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Input
+                  id="email"
+                  type="email"
+                  placeholder="admin@example.com"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  className="pl-10 border-gray-300 focus:border-gray-900 focus:ring-gray-900"
+                  required
+                />
+              </div>
+            </div>
+            
+            <div className="space-y-2">
+              <label htmlFor="password" className="text-sm font-medium text-gray-700">
+                Mot de passe
+              </label>
+              <div className="relative">
+                <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Input
+                  id="password"
+                  type="password"
+                  placeholder="••••••••"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  className="pl-10 border-gray-300 focus:border-gray-900 focus:ring-gray-900"
+                  required
+                />
+              </div>
+            </div>
+            
+            <Button
+              type="submit"
+              className="w-full bg-gray-900 hover:bg-gray-800 text-white font-medium py-2.5 transition-colors"
+              disabled={loading}
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Connexion en cours...
+                </>
+              ) : (
+                "Se connecter"
+              )}
+            </Button>
+          </form>
+          
+          <div className="text-center">
+            <p className="text-xs text-gray-500">
+              Accès réservé aux administrateurs autorisés
+            </p>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

app/settings/page.tsx

@@ -1,5 +1,14 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
+import { Database, Server, Settings } from "lucide-react";
+
+import AddCredits from "@/components/dashboard/add-credits";
 
 export default function SettingsPage() {
   return (
@@ -7,65 +16,73 @@ export default function SettingsPage() {
       <div>
         <h1 className="text-3xl font-bold tracking-tight">Paramètres</h1>
         <p className="text-muted-foreground">
-          Configuration du dashboard Cercle GPT
+          Configuration et maintenance du système
         </p>
       </div>
 
+      {/* Informations système */}
       <div className="grid gap-6 md:grid-cols-2">
         <Card>
-          <CardHeader>
-            <CardTitle>Connexion MongoDB</CardTitle>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium flex items-center gap-2">
+              <Database className="h-4 w-4" />
+              Base de données
+            </CardTitle>
           </CardHeader>
           <CardContent>
             <div className="space-y-2">
               <div className="flex justify-between">
-                <span className="text-sm text-muted-foreground">Statut:</span>
+                <span className="text-sm text-muted-foreground">
+                  Statut MongoDB
+                </span>
                 <Badge variant="default">Connecté</Badge>
               </div>
-              <div className="flex justify-between">
-                <span className="text-sm text-muted-foreground">
-                  Base de données:
-                </span>
-                <span className="text-sm font-mono">Cercle GPT</span>
-              </div>
-              <div className="flex justify-between">
-                <span className="text-sm text-muted-foreground">
-                  Collections:
-                </span>
-                <span className="text-sm">29 collections</span>
-              </div>
             </div>
           </CardContent>
         </Card>
 
         <Card>
-          <CardHeader>
-            <CardTitle>Informations système</CardTitle>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium flex items-center gap-2">
+              <Server className="h-4 w-4" />
+              Informations système
+            </CardTitle>
           </CardHeader>
           <CardContent>
             <div className="space-y-2">
               <div className="flex justify-between">
                 <span className="text-sm text-muted-foreground">
-                  Version Next.js:
+                  Version Next.js
                 </span>
-                <span className="text-sm">15.5.4</span>
+                <Badge variant="secondary">14.x</Badge>
               </div>
               <div className="flex justify-between">
                 <span className="text-sm text-muted-foreground">
-                  Version Node.js:
+                  Version Node.js
                 </span>
-                <span className="text-sm">{process.version}</span>
+                <Badge variant="secondary">18.x</Badge>
               </div>
               <div className="flex justify-between">
                 <span className="text-sm text-muted-foreground">
-                  Environnement:
+                  Environnement
                 </span>
-                <Badge variant="outline">{process.env.NODE_ENV}</Badge>
+                <Badge variant="outline">Development</Badge>
               </div>
             </div>
           </CardContent>
         </Card>
       </div>
+
+      {/* Gestion des crédits */}
+      <div>
+        <h2 className="text-2xl font-bold tracking-tight mb-4 flex items-center gap-2">
+          <Settings className="h-6 w-6" />
+          Gestion des Crédits
+        </h2>
+        <div className="space-y-6">
+          <AddCredits />
+        </div>
+      </div>
     </div>
   );
 }