@lastbrain/module-ai 2.0.26 → 2.0.30

package/dist/web/auth/TokenPage.js

@@ -1,12 +1,17 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect, useCallback } from "react";
-import { Card, CardBody, CardHeader, Spinner, Chip, Button, Select, SelectItem, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, addToast, } from "@lastbrain/ui";
-import { Coins, TrendingUp, TrendingDown, Calendar, ShoppingCart, AlertCircle, Gift, Eye, } from "lucide-react";
-import { useAuth, useModuleTranslation } from "@lastbrain/core";
+import { useSearchParams } from "next/navigation";
+import confetti from "canvas-confetti";
+import { Card, CardBody, CardHeader, Spinner, Chip, Button, Select, SelectItem, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, addToast, Progress, Alert, } from "@lastbrain/ui";
+import { Coins, TrendingUp, TrendingDown, Calendar, ShoppingCart, AlertCircle, Crown, } from "lucide-react";
+import { logger, useAuth, useModuleTranslation, useLocalizedRouter, } from "@lastbrain/core";
+import { formatDateFr } from "../../utils/date";
 export function TokenPage() {
     const t = useModuleTranslation("ai");
     const { user } = useAuth();
+    const router = useLocalizedRouter();
+    const searchParams = useSearchParams();
     const [loading, setLoading] = useState(true);
     const [balance, setBalance] = useState(null);
     const [transactions, setTransactions] = useState([]);
@@ -14,6 +19,31 @@ export function TokenPage() {
     const [monthlyStats, setMonthlyStats] = useState(null);
     const [tokenPacks, setTokenPacks] = useState([]);
     const [checkoutLoading, setCheckoutLoading] = useState(null);
+    const [successMessage, setSuccessMessage] = useState(null);
+    // Check for success/canceled params from Stripe redirect
+    useEffect(() => {
+        if (searchParams.get("token_success") === "true") {
+            setSuccessMessage(t("tokens.purchase_success") || "🎉 Tokens achetés avec succès !");
+            // Trigger confetti
+            confetti({
+                particleCount: 100,
+                spread: 600,
+                origin: { y: 0.4 },
+            });
+            setTimeout(() => {
+                router.replace("/auth/ai/token");
+            }, 100);
+        }
+        if (searchParams.get("token_canceled") === "true") {
+            addToast({
+                title: t("tokens.purchase_canceled") || "Achat annulé",
+                description: t("tokens.purchase_canceled_desc") ||
+                    "L'achat de tokens a été annulé.",
+                color: "warning",
+            });
+            router.replace("/auth/ai/token");
+        }
+    }, [searchParams, router, t]);
     // Générer les 12 derniers mois
     const availableMonths = Array.from({ length: 12 }, (_, i) => {
         const date = new Date();
@@ -25,31 +55,30 @@ export function TokenPage() {
             return;
         try {
             setLoading(true);
-            // Récupérer le solde et l'historique
-            const response = await fetch("/api/ai/user/tokens");
-            if (!response.ok) {
+            // Récupérer le solde combiné (quota + achetés) et l'historique
+            const [balanceResponse, historyResponse] = await Promise.all([
+                fetch("/api/ai/auth/token-balance"),
+                fetch("/api/ai/user/tokens"),
+            ]);
+            if (!balanceResponse.ok || !historyResponse.ok) {
                 throw new Error(t("tokens.error.loading") || "Erreur lors du chargement des données");
             }
-            const data = await response.json();
+            const balanceData = await balanceResponse.json();
+            const historyData = await historyResponse.json();
             // Historique complet pour calculs globaux
-            const allTransactions = data.history || [];
-            // Total offert/ajusté (tous les temps) via les transactions de type "adjust"
-            const totalGifted = allTransactions
-                .filter((t) => t.type === "adjust" && t.amount > 0)
-                .reduce((sum, t) => sum + t.amount, 0);
-            setBalance({
-                balance: data.balance || 0,
-                totalAdded: data.stats?.totalPurchased + data.stats?.totalGifted || 0,
-                totalUsed: data.stats?.totalUsed || 0,
-                totalGifted,
-            });
+            const allTransactions = historyData.history || [];
+            setBalance(balanceData);
             // Filtrer les transactions par mois
             const filtered = allTransactions.filter((t) => t.created_at.startsWith(selectedMonth));
-            // Calculer le running balance
-            let runningBalance = data.balance || 0;
+            // Calculer le running balance (tokens achetés uniquement, pas quota)
+            let runningBalance = balanceData.purchased?.balance || 0;
             const withBalance = filtered.map((t) => {
                 const txWithBalance = { ...t, running_balance: runningBalance };
-                runningBalance -= t.amount;
+                // Ne décrémenter le running_balance que pour les transactions achetées
+                // Les transactions quota ne changent pas le solde des tokens achetés
+                if (t.source !== "quota") {
+                    runningBalance -= t.amount;
+                }
                 return txWithBalance;
             });
             setTransactions(withBalance);
@@ -74,7 +103,7 @@ export function TokenPage() {
             }
         }
         catch (error) {
-            console.error(t("tokens.error.loading") || "Erreur:", error);
+            logger.error(t("tokens.error.loading") || "Erreur:", error);
             addToast({
                 color: "danger",
                 title: t("tokens.error.loading") || "Erreur lors du chargement des données",
@@ -96,21 +125,31 @@ export function TokenPage() {
             minute: "2-digit",
         });
     };
-    const getTypeLabel = (type) => {
+    const getTypeLabel = (type, source) => {
+        // Différencier les débits quota des débits achat
+        if (type === "use" && source === "quota") {
+            return t("tokens.type.quota_use") || "Quota utilisé";
+        }
         const labels = {
             purchase: t("tokens.type.purchase") || "Achat",
             gift: t("tokens.type.gift") || "Cadeau",
             use: t("tokens.type.use") || "Utilisation",
             adjust: t("tokens.type.adjust") || "Ajustement",
+            quota_use: t("tokens.type.quota_use") || "Quota utilisé",
         };
         return labels[type] || type;
     };
-    const getTypeColor = (type) => {
+    const getTypeColor = (type, source) => {
+        // Différencier les débits quota des débits achat
+        if (type === "use" && source === "quota") {
+            return "danger"; // Bleu pour quota
+        }
         const colors = {
             purchase: "success",
             gift: "primary",
             use: "danger",
             adjust: "warning",
+            quota_use: "primary",
         };
         return colors[type] || "default";
     };
@@ -164,12 +203,30 @@ export function TokenPage() {
         return (_jsx("div", { className: "flex justify-center items-center min-h-96", children: _jsx(Spinner, { size: "lg" }) }));
     }
     return (_jsxs("div", { className: " container mx-auto p-2 md:p-6 max-w-7xl", children: [_jsxs("div", { className: "mb-6", children: [_jsx("h1", { className: "text-3xl font-bold mb-2", children: t("tokens.page.title") || "Mes Tokens IA" }), _jsx("p", { className: "text-gray-500", children: t("tokens.page.description") ||
-                            "Gérez votre solde et consultez votre historique de consommation" })] }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4 mb-6", children: [_jsx(Card, { children: _jsxs(CardBody, { className: "text-center py-6", children: [_jsxs("div", { className: "flex items-center justify-center gap-2 mb-2", children: [_jsx(Coins, { size: 24, className: "text-primary" }), _jsx("h3", { className: "text-sm font-medium text-gray-500", children: t("tokens.balance.current") || "Solde actuel" })] }), _jsx("p", { className: "text-4xl font-bold text-primary", children: formatTokensShort(balance?.balance || 0) }), _jsx("p", { className: "text-xs text-gray-400 mt-1", children: t("tokens.balance.available") || "tokens disponibles" })] }) }), _jsx(Card, { children: _jsxs(CardBody, { className: "text-center py-6", children: [_jsxs("div", { className: "flex items-center justify-center gap-2 mb-2", children: [_jsx(TrendingUp, { size: 24, className: "text-success" }), _jsx("h3", { className: "text-sm font-medium text-gray-500", children: t("tokens.balance.total") || "Total" })] }), _jsx("p", { className: "text-4xl font-bold text-success", children: formatTokensShort(balance?.totalAdded || 0) }), _jsx("p", { className: "text-xs text-gray-400 mt-1", children: t("tokens.balance.purchased") || "tokens acheté" })] }) }), _jsx(Card, { children: _jsxs(CardBody, { className: "text-center py-6", children: [_jsxs("div", { className: "flex items-center justify-center gap-2 mb-2", children: [_jsx(TrendingDown, { size: 24, className: "text-danger" }), _jsx("h3", { className: "text-sm font-medium text-gray-500", children: t("tokens.balance.total_used") || "Total utilisé" })] }), _jsx("p", { className: "text-4xl font-bold text-danger", children: formatTokensShort(balance?.totalUsed || 0) }), _jsx("p", { className: "text-xs text-gray-400 mt-1", children: t("tokens.balance.consumed") || "tokens consommés" })] }) }), _jsx(Card, { children: _jsxs(CardBody, { className: "text-center py-6", children: [_jsxs("div", { className: "flex items-center justify-center gap-2 mb-2", children: [_jsx(Gift, { size: 24, className: "text-warning" }), _jsx("h3", { className: "text-sm font-medium text-gray-500", children: t("tokens.balance.gifted") || "Tokens offerts / ajustements" })] }), _jsx("p", { className: "text-4xl font-bold text-warning", children: formatTokensShort(balance?.totalGifted || 0) }), _jsx("p", { className: "text-xs text-gray-400 mt-1", children: t("tokens.balance.credited") || "tokens crédités" })] }) })] }), monthlyStats && (_jsxs(Card, { className: "mb-6", children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { size: 20 }), _jsx("h3", { className: "text-lg font-semibold", children: t("tokens.stats.monthly_title") || "Statistiques du mois" })] }), _jsx(Select, { size: "sm", selectedKeys: [selectedMonth], onSelectionChange: (keys) => setSelectedMonth(Array.from(keys)[0]), className: "w-48", "aria-label": t("tokens.stats.select_month") || "Sélectionner un mois", children: availableMonths.map((month) => (_jsx(SelectItem, { textValue: month, children: new Date(month + "-01").toLocaleDateString("fr-FR", {
+                            "Gérez votre solde et consultez votre historique de consommation" })] }), successMessage && (_jsx(Alert, { color: "success", title: successMessage, className: "mb-6", onClose: () => setSuccessMessage(null) })), balance?.quota.hasQuota && balance.quota.isActive && (_jsxs(_Fragment, { children: [_jsxs(Card, { className: "mb-6 border-2 border-warning", children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Coins, { size: 20, className: "text-primary" }), _jsx("h3", { className: "text-lg font-semibold", children: t("tokens.quota.title") }), _jsx(Chip, { variant: "flat", color: "warning", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Crown, { size: 14 }), _jsx("span", { children: "PRO" })] }) })] }) }), _jsxs(CardBody, { children: [_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-4 bg-primary-50 dark:bg-success-300/20 rounded-lg", children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: t("tokens.quota.included") || "Inclus ce mois" }), _jsx("p", { className: "text-3xl font-bold text-primary", children: formatTokensShort(balance.quota.effectiveQuota) })] }), _jsxs("div", { className: "text-center p-4 bg-warning-50 dark:bg-danger-300/20 rounded-lg", children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: t("tokens.quota.used") || "Utilisés" }), _jsx("p", { className: "text-3xl font-bold text-warning dark:text-danger", children: formatTokensShort(balance.quota.usedQuota) })] }), _jsxs("div", { className: "text-center p-4 bg-success-50 dark:bg-success-300/20 rounded-lg", children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: t("tokens.quota.remaining") || "Restants" }), _jsx("p", { className: "text-3xl font-bold text-success", children: formatTokensShort(balance.quota.remainingQuota) })] })] }), balance.quota.effectiveQuota > 0 && (_jsxs("div", { className: "mt-6", children: [_jsxs("div", { className: "flex justify-between mb-2", children: [_jsx("p", { className: "text-sm font-medium", children: t("tokens.quota.usage") || "Utilisation du quota" }), _jsxs("p", { className: "text-sm font-semibold", children: [Math.round((balance.quota.usedQuota /
+                                                                balance.quota.effectiveQuota) *
+                                                                100), "%"] })] }), _jsx(Progress, { value: (balance.quota.usedQuota / balance.quota.effectiveQuota) *
+                                                    100, color: balance.quota.usedQuota / balance.quota.effectiveQuota >
+                                                    0.9
+                                                    ? "danger"
+                                                    : balance.quota.usedQuota /
+                                                        balance.quota.effectiveQuota >
+                                                        0.7
+                                                        ? "warning"
+                                                        : "success", className: "h-2" })] })), _jsxs("div", { className: "mt-4 text-center text-sm text-gray-500", children: [_jsxs("p", { children: [t("tokens.quota.period") || "Période:", " ", balance.quota.periodStart &&
+                                                        formatDateFr(balance.quota.periodStart), " - ", balance.quota.periodEnd &&
+                                                        formatDateFr(balance.quota.periodEnd)] }), _jsx("p", { className: "mt-2 text-xs", children: t("tokens.quota.info") ||
+                                                    "Le quota se réinitialise automatiquement à chaque renouvellement." })] })] })] }), balance?.quota?.hasQuota && (_jsx(Alert, { color: "primary", title: t("tokens.purchased.priority_info") ||
+                            "Priorité de débit des tokens", className: "mb-6", startContent: _jsx(Coins, { size: 20 }) }))] })), _jsxs("div", { className: "mb-6", children: [_jsx("h2", { className: "text-xl font-semibold mb-4", children: t("tokens.purchased.title") || "Tokens achetés" }), _jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [_jsx(Card, { children: _jsxs(CardBody, { className: "text-center py-6", children: [_jsxs("div", { className: "flex items-center justify-center gap-2 mb-2", children: [_jsx(Coins, { size: 24, className: "text-primary" }), _jsx("h3", { className: "text-sm font-medium text-gray-500", children: t("tokens.purchased.balance") || "Solde actuel" })] }), _jsx("p", { className: `text-4xl font-bold ${Number(balance?.purchased.balance) > 0 ? "text-primary" : "text-danger"}`, children: formatTokensShort(balance?.purchased.balance || 0) }), _jsx("p", { className: "text-xs text-gray-400 mt-1", children: t("tokens.purchased.available") || "tokens disponibles" })] }) }), _jsx(Card, { children: _jsxs(CardBody, { className: "text-center py-6", children: [_jsxs("div", { className: "flex items-center justify-center gap-2 mb-2", children: [_jsx(TrendingUp, { size: 24, className: "text-success" }), _jsx("h3", { className: "text-sm font-medium text-gray-500", children: t("tokens.purchased.total_added") || "Total ajouté" })] }), _jsx("p", { className: "text-4xl font-bold text-success", children: formatTokensShort(balance?.purchased.totalAdded || 0) }), _jsx("p", { className: "text-xs text-gray-400 mt-1", children: t("tokens.purchased.cumulative") || "cumulés" })] }) }), _jsx(Card, { children: _jsxs(CardBody, { className: "text-center py-6", children: [_jsxs("div", { className: "flex items-center justify-center gap-2 mb-2", children: [_jsx(TrendingDown, { size: 24, className: "text-danger" }), _jsx("h3", { className: "text-sm font-medium text-gray-500", children: t("tokens.purchased.total_used") || "Total utilisé" })] }), _jsx("p", { className: "text-4xl font-bold text-danger", children: formatTokensShort(balance?.purchased.totalUsed || 0) }), _jsx("p", { className: "text-xs text-gray-400 mt-1", children: t("tokens.purchased.consumed") || "consommés" })] }) })] }), _jsx("div", { className: "mt-4 text-center text-sm text-gray-500", children: _jsx("p", { children: t("tokens.purchased.info") ||
+                                "Les tokens achetés restent disponibles jusqu'à consommation complète." }) })] }), monthlyStats && (_jsxs(Card, { className: "mb-6", children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { size: 20 }), _jsx("h3", { className: "text-lg font-semibold", children: t("tokens.stats.monthly_title") || "Statistiques du mois" })] }), _jsx(Select, { size: "sm", selectedKeys: [selectedMonth], onSelectionChange: (keys) => setSelectedMonth(Array.from(keys)[0]), className: "w-48", "aria-label": t("tokens.stats.select_month") || "Sélectionner un mois", children: availableMonths.map((month) => (_jsx(SelectItem, { textValue: month, children: new Date(month + "-01").toLocaleDateString("fr-FR", {
                                             month: "long",
                                             year: "numeric",
-                                        }) }, month))) })] }) }), _jsx(CardBody, { children: _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-4 bg-success-50 dark:bg-success-900/20 rounded-lg", children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: t("tokens.stats.added") || "Ajoutés" }), _jsxs("p", { className: "text-2xl font-bold text-success", children: ["+", formatTokensShort(monthlyStats.added)] })] }), _jsxs("div", { className: "text-center p-4 bg-danger-50 dark:bg-danger-900/20 rounded-lg", children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: t("tokens.stats.used") || "Utilisés" }), _jsxs("p", { className: "text-2xl font-bold text-danger", children: ["-", formatTokensShort(monthlyStats.used)] })] }), _jsxs("div", { className: "text-center p-4 bg-primary-50 dark:bg-primary-900/20 rounded-lg", children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: t("tokens.stats.net_balance") || "Solde net" }), _jsxs("p", { className: `text-2xl font-bold ${monthlyStats.net >= 0 ? "text-success" : "text-danger"}`, children: [monthlyStats.net >= 0 ? "+" : "", formatTokensShort(Math.abs(monthlyStats.net))] })] })] }) })] })), _jsxs(Card, { className: "mb-6", children: [_jsx(CardHeader, { children: _jsx("h3", { className: "text-lg font-semibold", children: t("tokens.history.title") || "Historique des transactions" }) }), _jsx(CardBody, { children: transactions.length === 0 ? (_jsxs("div", { className: "text-center py-12 text-gray-500", children: [_jsx(Coins, { size: 48, className: "mx-auto mb-4 opacity-20" }), _jsx("p", { children: t("tokens.history.no_transactions") ||
-                                        "Aucune transaction pour ce mois" })] })) : (_jsxs(Table, { "aria-label": t("tokens.history.aria_label") || "Historique des transactions", children: [_jsxs(TableHeader, { children: [_jsx(TableColumn, { className: "min-w-[120px]", children: t("tokens.history.column_date") || "DATE" }), _jsx(TableColumn, { children: t("tokens.history.column_type") || "TYPE" }), _jsx(TableColumn, { children: t("tokens.history.column_description") || "DESCRIPTION" }), _jsx(TableColumn, { children: t("tokens.history.column_amount") || "MONTANT" }), _jsx(TableColumn, { children: t("tokens.history.column_prompt") || "PROMPT" }), _jsx(TableColumn, { align: "end", children: t("tokens.history.column_balance") || "SOLDE APRÈS" })] }), _jsx(TableBody, { children: transactions.map((transaction) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx("span", { className: " text-sm text-gray-600", children: formatDate(transaction.created_at) }) }), _jsx(TableCell, { children: _jsx(Chip, { size: "sm", variant: "flat", color: getTypeColor(transaction.type), children: getTypeLabel(transaction.type) }) }), _jsx(TableCell, { children: _jsx("div", { className: "max-w-md", children: _jsx("p", { className: "text-sm truncate", children: transaction.description || transaction.model || "-" }) }) }), _jsx(TableCell, { children: _jsxs("span", { className: `font-semibold ${transaction.amount > 0
-                                                        ? "text-success"
-                                                        : "text-danger"}`, children: [transaction.amount > 0 ? "+" : "", formatTokensShort(Math.abs(transaction.amount))] }) }), _jsx(TableCell, { children: transaction.prompt && (_jsxs("div", { className: "flex flex-inline gap-2 items-center", children: [_jsx("p", { className: "max-w-xs truncate", children: transaction.prompt?.slice(0, 100) }), _jsx(Button, { size: "sm", variant: "flat", isIconOnly: true, className: "truncate max-w-xs", startContent: _jsx(Eye, { size: 12 }) })] })) }), _jsx(TableCell, { children: _jsx("span", { className: "text-sm text-gray-600", children: formatTokensShort(transaction.running_balance) }) })] }, transaction.id))) })] })) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ShoppingCart, { size: 20 }), _jsx("h3", { className: "text-lg font-semibold", children: t("tokens.buy.title") || "Acheter des tokens" })] }) }), _jsx(CardBody, { children: tokenPacks.length === 0 ? (_jsxs("div", { className: "text-center py-8", children: [_jsx(ShoppingCart, { size: 48, className: "mx-auto mb-4 text-gray-300 dark:text-gray-600" }), _jsx("p", { className: "text-gray-500 mb-4", children: t("tokens.buy.no_packs") ||
-                                        "Aucun pack disponible pour le moment" })] })) : (_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", children: tokenPacks.map((pack) => (_jsx(Card, { children: _jsxs(CardBody, { className: "text-center py-6", children: [_jsx("div", { className: "mx-auto", children: _jsx(Coins, { size: 24, className: "mx-auto mb-2 text-gray-400" }) }), _jsx("h4", { className: "text-lg font-bold mb-2", children: pack.name }), pack.description && (_jsx("p", { className: "text-sm text-gray-500 mb-4", children: pack.description })), _jsxs("div", { className: "mb-4", children: [_jsx("p", { className: "text-3xl font-bold text-primary", children: formatTokensShort(pack.tokens) }), _jsx("p", { className: "text-xs text-gray-400", children: t("chip.tokens") || "tokens" })] }), _jsx("p", { className: "text-xl font-semibold mb-4", children: formatPrice(pack.price_cents, pack.currency) }), _jsx(Button, { color: "primary", className: "w-full", onPress: () => handleBuyTokens(pack.id), isLoading: checkoutLoading === pack.id, startContent: checkoutLoading !== pack.id && (_jsx(ShoppingCart, { size: 16 })), children: t("tokens.buy.button") || "Acheter" })] }) }, pack.id))) })) })] })] }));
+                                        }) }, month))) })] }) }), _jsx(CardBody, { children: _jsxs("div", { className: "grid grid-cols-3 gap-4", children: [_jsxs("div", { className: "text-center p-4 bg-success-50 dark:bg-success-300/20 rounded-lg", children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: t("tokens.stats.added") || "Ajoutés" }), _jsxs("p", { className: "text-2xl font-bold text-success", children: ["+", formatTokensShort(monthlyStats.added)] })] }), _jsxs("div", { className: "text-center p-4 bg-danger-50 dark:bg-danger-300/20 rounded-lg", children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: t("tokens.stats.used") || "Utilisés" }), _jsxs("p", { className: "text-2xl font-bold text-danger", children: ["-", formatTokensShort(monthlyStats.used)] })] }), _jsxs("div", { className: `text-center p-4 ${monthlyStats.net >= 0 ? "bg-primary-50 dark:bg-success-300/20" : "bg-danger-50 dark:bg-danger-300/20"} rounded-lg`, children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400 mb-1", children: t("tokens.stats.net_balance") || "Solde net" }), _jsxs("p", { className: `text-2xl font-bold ${monthlyStats.net >= 0 ? "text-success" : "text-danger"}`, children: [monthlyStats.net >= 0 ? "+" : "-", formatTokensShort(Math.abs(monthlyStats.net))] })] })] }) })] })), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ShoppingCart, { size: 20 }), _jsx("h3", { className: "text-lg font-semibold", children: t("tokens.buy.title") || "Acheter des tokens" })] }) }), _jsx(CardBody, { children: tokenPacks.length === 0 ? (_jsxs("div", { className: "text-center py-8", children: [_jsx(ShoppingCart, { size: 48, className: "mx-auto mb-4 text-gray-300 dark:text-gray-600" }), _jsx("p", { className: "text-gray-500 mb-4", children: t("tokens.buy.no_packs") ||
+                                        "Aucun pack disponible pour le moment" })] })) : (_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4", children: tokenPacks.map((pack) => (_jsx(Card, { children: _jsxs(CardBody, { className: "text-center py-6", children: [_jsx("div", { className: "mx-auto", children: _jsx(Coins, { size: 24, className: "mx-auto mb-2 text-gray-400" }) }), _jsx("h4", { className: "text-lg font-bold mb-2", children: pack.name }), pack.description && (_jsx("p", { className: "text-sm text-gray-500 mb-4", children: pack.description })), _jsxs("div", { className: "mb-4", children: [_jsx("p", { className: "text-3xl font-bold text-primary", children: formatTokensShort(pack.tokens) }), _jsx("p", { className: "text-xs text-gray-400", children: t("chip.tokens") || "tokens" })] }), _jsx("p", { className: "text-xl font-semibold mb-4", children: formatPrice(pack.price_cents, pack.currency) }), _jsx(Button, { color: "primary", className: "w-full", onPress: () => handleBuyTokens(pack.id), isLoading: checkoutLoading === pack.id, startContent: checkoutLoading !== pack.id && (_jsx(ShoppingCart, { size: 16 })), children: t("tokens.buy.button") || "Acheter" })] }) }, pack.id))) })) })] }), _jsxs(Card, { className: "my-6", children: [_jsx(CardHeader, { children: _jsx("h3", { className: "text-lg font-semibold", children: t("tokens.history.title") || "Historique des transactions" }) }), _jsx(CardBody, { children: transactions.length === 0 ? (_jsxs("div", { className: "text-center py-12 text-gray-500", children: [_jsx(Coins, { size: 48, className: "mx-auto mb-4 opacity-20" }), _jsx("p", { children: t("tokens.history.no_transactions") ||
+                                        "Aucune transaction pour ce mois" })] })) : (_jsxs(Table, { "aria-label": t("tokens.history.aria_label") || "Historique des transactions", children: [_jsxs(TableHeader, { children: [_jsx(TableColumn, { className: "min-w-[120px]", children: t("tokens.history.column_date") || "DATE" }), _jsx(TableColumn, { children: t("tokens.history.column_type") || "TYPE" }), _jsx(TableColumn, { children: t("tokens.history.column_description") || "DESCRIPTION" }), _jsx(TableColumn, { children: t("tokens.history.column_amount") || "MONTANT" }), _jsx(TableColumn, { children: t("tokens.history.column_prompt") || "PROMPT" }), _jsx(TableColumn, { align: "end", children: t("tokens.history.column_balance") || "SOLDE APRÈS" })] }), _jsx(TableBody, { children: transactions.map((transaction) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: _jsx("span", { className: " text-sm text-gray-600", children: formatDate(transaction.created_at) }) }), _jsx(TableCell, { children: _jsx(Chip, { size: "sm", variant: "flat", color: getTypeColor(transaction.type, transaction.source), children: getTypeLabel(transaction.type, transaction.source) }) }), _jsx(TableCell, { children: _jsx("div", { className: "max-w-md", children: _jsx("p", { className: "text-sm truncate", children: transaction.description || transaction.model || "-" }) }) }), _jsx(TableCell, { children: _jsxs("span", { className: `font-semibold ${transaction.source === "quota"
+                                                        ? "text-danger" // Quota toujours en rouge (danger)
+                                                        : transaction.amount > 0
+                                                            ? "text-success" // Vert pour les ajouts (achetés, cadeaux)
+                                                            : "text-danger" // Rouge pour les utilisations
+                                                    }`, children: [transaction.amount > 0 ? "+" : "", formatTokensShort(Math.abs(transaction.amount))] }) }), _jsx(TableCell, { children: transaction.prompt && (_jsx("div", { className: "flex flex-inline gap-2 items-center", children: _jsx("p", { className: "max-w-xs truncate", children: transaction.prompt?.slice(0, 100) }) })) }), _jsx(TableCell, { children: _jsx("span", { className: "text-sm text-default-700", children: formatTokensShort(transaction.running_balance) }) })] }, transaction.id))) })] })) })] })] }));
 }

package/dist/web/auth/UsageAndTokensPage.d.ts

@@ -0,0 +1,2 @@
+export declare function UsageAndTokensPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UsageAndTokensPage.d.ts.map

package/dist/web/auth/UsageAndTokensPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsageAndTokensPage.d.ts","sourceRoot":"","sources":["../../../src/web/auth/UsageAndTokensPage.tsx"],"names":[],"mappings":"AAuEA,wBAAgB,kBAAkB,4CAoPjC"}

package/dist/web/auth/UsageAndTokensPage.js

@@ -0,0 +1,157 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { useSearchParams } from "next/navigation";
+import confetti from "canvas-confetti";
+import { Spinner, addToast, Alert } from "@lastbrain/ui";
+import { AlertCircle } from "lucide-react";
+import { logger, useAuth, useModuleTranslation } from "@lastbrain/core";
+import { UsageByModelBarChart } from "./components/UsageByModelBarChart";
+import { ApiKeyFilterSelect } from "./components/ApiKeyFilterSelect";
+import { PurchaseButton } from "./components/PurchaseButton";
+import { UsageByDayChart } from "./components/UsageByDayChart";
+import { WalletStatusCard } from "./components/WalletStatusCard";
+import { ModelUsageTable } from "./components/ModelUsageTable";
+export function UsageAndTokensPage() {
+    const t = useModuleTranslation("ai");
+    const { user } = useAuth();
+    const searchParams = useSearchParams();
+    const [loading, setLoading] = useState(true);
+    const [loadingUsage, setLoadingUsage] = useState(false);
+    const [wallet, setWallet] = useState(null);
+    const [modelUsage, setModelUsage] = useState([]);
+    const [usageByModel, setUsageByModel] = useState([]);
+    const [usageByDay, setUsageByDay] = useState([]);
+    const [apiKeys, setApiKeys] = useState([]);
+    const [selectedApiKey, setSelectedApiKey] = useState("all");
+    const [selectedMonth, setSelectedMonth] = useState("all");
+    const [successMessage, setSuccessMessage] = useState(null);
+    // Check for success/canceled params from Stripe redirect
+    useEffect(() => {
+        if (searchParams.get("token_success") === "true") {
+            setSuccessMessage(t("tokens.purchase_success") || "🎉 Tokens achetés avec succès !");
+            confetti({
+                particleCount: 100,
+                spread: 600,
+                origin: { y: 0.4 },
+            });
+            // Clean URL
+            window.history.replaceState({}, "", window.location.pathname);
+        }
+        if (searchParams.get("token_canceled") === "true") {
+            addToast({
+                title: t("tokens.purchase_canceled") || "Achat annulé",
+                description: t("tokens.purchase_canceled_desc") ||
+                    "L'achat de tokens a été annulé.",
+                color: "warning",
+            });
+            window.history.replaceState({}, "", window.location.pathname);
+        }
+    }, [searchParams, t]);
+    // Fetch initial data (balance, transactions, API keys) - runs once on mount
+    const fetchInitialData = useCallback(async () => {
+        if (!user)
+            return;
+        try {
+            setLoading(true);
+            // Fetch wallet and api keys in parallel
+            const [walletResponse, apiKeysResponse] = await Promise.all([
+                fetch("/api/ai/auth/wallet"),
+                fetch("/api/ai/auth/api-keys"),
+            ]);
+            if (!walletResponse.ok) {
+                throw new Error(t("tokens.error.loading") || "Erreur lors du chargement des données");
+            }
+            const walletData = await walletResponse.json();
+            // Process wallet
+            setWallet(walletData);
+            // Process API keys
+            if (apiKeysResponse.ok) {
+                const keysData = await apiKeysResponse.json();
+                setApiKeys(keysData.data || []);
+            }
+        }
+        catch (error) {
+            logger.error(t("tokens.error.loading") || "Erreur:", error);
+            addToast({
+                color: "danger",
+                title: t("tokens.error.loading") || "Erreur lors du chargement des données",
+            });
+        }
+        finally {
+            setLoading(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [user]);
+    // Fetch usage data (filtered by API key and month) - runs when selectedApiKey or selectedMonth changes
+    const fetchUsageData = useCallback(async () => {
+        if (!user)
+            return;
+        try {
+            setLoadingUsage(true);
+            // Build query params
+            const params = new URLSearchParams();
+            if (selectedApiKey !== "all") {
+                params.append("api_key_id", selectedApiKey);
+            }
+            if (selectedMonth !== "all") {
+                params.append("month", selectedMonth);
+            }
+            // Fetch model usage and charts in parallel
+            const [modelUsageResponse, usageResponse] = await Promise.all([
+                fetch(`/api/ai/auth/usage-by-model?${params.toString()}`),
+                fetch(`/api/ai/auth/usage?${params.toString()}`),
+            ]);
+            if (!modelUsageResponse.ok || !usageResponse.ok) {
+                throw new Error(t("tokens.error.loading") || "Erreur lors du chargement des données");
+            }
+            const modelUsageData = await modelUsageResponse.json();
+            const usageDataRaw = await usageResponse.json();
+            // L'API retourne {data: {...}} donc on doit extraire la propriété data
+            const usageData = usageDataRaw.data;
+            // Process model usage (new detailed table)
+            setModelUsage(modelUsageData.data || []);
+            // Process usage by model (chart)
+            if (usageData.usage_by_model) {
+                setUsageByModel(usageData.usage_by_model);
+            }
+            else {
+                setUsageByModel([]);
+            }
+            // Process usage by day
+            if (usageData.usage_by_day) {
+                setUsageByDay(usageData.usage_by_day);
+            }
+            else {
+                setUsageByDay([]);
+            }
+        }
+        catch (error) {
+            logger.error(t("tokens.error.loading") || "Erreur:", error);
+            addToast({
+                color: "danger",
+                title: t("tokens.error.loading") ||
+                    "Erreur lors du chargement des statistiques",
+            });
+        }
+        finally {
+            setLoadingUsage(false);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [user, selectedApiKey, selectedMonth]);
+    // Initial data load (once on mount)
+    useEffect(() => {
+        fetchInitialData();
+    }, [fetchInitialData]);
+    // Usage data load (when API key changes)
+    useEffect(() => {
+        fetchUsageData();
+    }, [fetchUsageData]);
+    if (!user) {
+        return (_jsx("div", { className: "flex justify-center items-center min-h-96", children: _jsxs("div", { className: "text-center", children: [_jsx(AlertCircle, { className: "mx-auto mb-4", size: 48 }), _jsx("p", { className: "text-gray-500", children: t("tokens.error.login_required") || "Veuillez vous connecter" })] }) }));
+    }
+    if (loading) {
+        return (_jsx("div", { className: "flex justify-center items-center min-h-96", children: _jsx(Spinner, { size: "lg" }) }));
+    }
+    return (_jsxs("div", { className: "container mx-auto p-2 md:p-6 max-w-7xl space-y-6", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-center md:justify-between gap-4", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-bold mb-2", children: t("usage.page_title") }), _jsx("p", { className: "text-gray-500", children: t("usage.page_subtitle") })] }), _jsxs("div", { className: "flex-1 flex flex-col justify-end sm:flex-row items-start sm:items-center gap-4", children: [_jsx(ApiKeyFilterSelect, { apiKeys: apiKeys, selectedKey: selectedApiKey, onSelectionChange: setSelectedApiKey }), _jsx(PurchaseButton, {})] })] }), successMessage && (_jsx(Alert, { color: "success", title: successMessage, onClose: () => setSuccessMessage(null) })), wallet && (_jsx(WalletStatusCard, { walletSellValueUsd: wallet.walletSellValueUsd, percentRemaining: wallet.percentRemaining, status: wallet.status, loading: loading })), _jsxs("div", { className: "grid grid-cols-1 gap-6", children: [_jsx("div", { className: "col-span-1", children: _jsx(ModelUsageTable, { data: modelUsage, loading: loadingUsage, totalRemaining: wallet?.walletSellValueUsd || 0, onMonthChange: setSelectedMonth, selectedMonth: selectedMonth }) }), _jsx("div", { className: "col-span-1", children: _jsx(UsageByModelBarChart, { data: usageByModel, loading: loadingUsage }) }), _jsx("div", { className: "col-span-1", children: _jsx(UsageByDayChart, { data: usageByDay, loading: loadingUsage }) })] })] }));
+}

package/dist/web/auth/UsagePage.d.ts

@@ -0,0 +1,2 @@
+export declare function UsagePage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=UsagePage.d.ts.map

package/dist/web/auth/UsagePage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UsagePage.d.ts","sourceRoot":"","sources":["../../../src/web/auth/UsagePage.tsx"],"names":[],"mappings":"AA4CA,wBAAgB,SAAS,4CA6MxB"}

package/dist/web/auth/UsagePage.js

@@ -0,0 +1,62 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Card, CardBody, CardHeader, Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Spinner, addToast, Chip, Select, SelectItem, } from "@lastbrain/ui";
+import { BarChart3, TrendingUp } from "lucide-react";
+import { useAuth, useModuleTranslation } from "@lastbrain/core";
+export function UsagePage() {
+    const t = useModuleTranslation("ai");
+    const { user } = useAuth();
+    const [loading, setLoading] = useState(true);
+    const [logs, setLogs] = useState([]);
+    const [stats, setStats] = useState(null);
+    const [filterEndpoint, setFilterEndpoint] = useState("");
+    const [filterProvider, setFilterProvider] = useState("");
+    useEffect(() => {
+        fetchUsage();
+    }, []);
+    const fetchUsage = async () => {
+        try {
+            setLoading(true);
+            const response = await fetch("/api/ai/auth/usage");
+            if (!response.ok)
+                throw new Error("Error loading usage data");
+            const result = await response.json();
+            setLogs(result.data?.logs || []);
+            setStats(result.data?.stats || null);
+        }
+        catch (error) {
+            addToast({ color: "danger", title: error.message });
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    const formatDate = (dateString) => {
+        return new Date(dateString).toLocaleString();
+    };
+    const filteredLogs = logs.filter((log) => {
+        if (filterEndpoint && log.endpoint !== filterEndpoint)
+            return false;
+        if (filterProvider && log.provider !== filterProvider)
+            return false;
+        return true;
+    });
+    const uniqueEndpoints = Array.from(new Set(logs.map((l) => l.endpoint)));
+    const uniqueProviders = Array.from(new Set(logs.map((l) => l.provider).filter(Boolean)));
+    if (loading) {
+        return (_jsx("div", { className: "flex justify-center py-8", children: _jsx(Spinner, {}) }));
+    }
+    return (_jsxs("div", { className: "container mx-auto py-8 space-y-6", children: [stats && (_jsxs("div", { className: "grid grid-cols-1 md:grid-cols-4 gap-4", children: [_jsx(Card, { children: _jsx(CardBody, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(BarChart3, { size: 20, className: "text-blue-500" }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-gray-600", children: "Total Calls" }), _jsx("p", { className: "text-2xl font-bold", children: stats.total_calls })] })] }) }) }), _jsx(Card, { children: _jsx(CardBody, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TrendingUp, { size: 20, className: "text-green-500" }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-gray-600", children: "Total Tokens" }), _jsx("p", { className: "text-2xl font-bold", children: stats.total_tokens.toLocaleString() })] })] }) }) }), _jsx(Card, { children: _jsx(CardBody, { children: _jsxs("div", { children: [_jsx("p", { className: "text-sm text-gray-600", children: "Success Rate" }), _jsxs("p", { className: "text-2xl font-bold", children: [stats.success_rate.toFixed(1), "%"] })] }) }) }), _jsx(Card, { children: _jsx(CardBody, { children: _jsxs("div", { children: [_jsx("p", { className: "text-sm text-gray-600", children: "Avg Latency" }), _jsxs("p", { className: "text-2xl font-bold", children: [logs.length > 0
+                                                ? Math.round(logs.reduce((sum, l) => sum + (l.latency_ms || 0), 0) /
+                                                    logs.length)
+                                                : 0, "ms"] })] }) }) })] })), _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx("h1", { className: "text-2xl font-bold", children: "API Usage Logs" }), _jsx("p", { className: "text-sm text-gray-600", children: "Recent API calls and usage analytics" })] }), _jsxs(CardBody, { children: [_jsxs("div", { className: "flex gap-4 mb-4", children: [_jsx(Select, { label: "Filter by Endpoint", selectedKeys: filterEndpoint ? [filterEndpoint] : [], onSelectionChange: (keys) => {
+                                            const selected = Array.from(keys)[0];
+                                            setFilterEndpoint(selected ? String(selected) : "");
+                                        }, className: "w-48", children: ["all", ...uniqueEndpoints].map((endpoint) => (_jsx(SelectItem, { children: endpoint }, endpoint))) }), _jsx(Select, { label: "Filter by Provider", selectedKeys: filterProvider ? [filterProvider] : [], onSelectionChange: (keys) => {
+                                            const selected = Array.from(keys)[0];
+                                            setFilterProvider(selected ? String(selected) : "");
+                                        }, className: "w-48", children: ["all", ...uniqueProviders].map((provider) => (_jsx(SelectItem, { children: provider }, provider))) })] }), filteredLogs.length === 0 ? (_jsx("div", { className: "text-center py-8", children: _jsx("p", { className: "text-gray-600", children: "No usage data yet" }) })) : (_jsxs(Table, { "aria-label": "Usage logs table", children: [_jsxs(TableHeader, { children: [_jsx(TableColumn, { children: "DATE" }), _jsx(TableColumn, { children: "ENDPOINT" }), _jsx(TableColumn, { children: "PROVIDER" }), _jsx(TableColumn, { children: "MODEL" }), _jsx(TableColumn, { children: "TOKENS" }), _jsx(TableColumn, { children: "LATENCY" }), _jsx(TableColumn, { children: "STATUS" })] }), _jsx(TableBody, { children: filteredLogs.map((log) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: formatDate(log.created_at) }), _jsx(TableCell, { children: _jsx(Chip, { size: "sm", variant: "flat", children: log.endpoint }) }), _jsx(TableCell, { children: log.provider || "-" }), _jsx(TableCell, { children: _jsx("code", { className: "text-xs", children: log.model || "-" }) }), _jsxs(TableCell, { children: [log.tokens_total
+                                                            ? log.tokens_total.toLocaleString()
+                                                            : "-", log.tokens_in && log.tokens_out && (_jsxs("span", { className: "text-xs text-gray-500", children: [" ", "(", log.tokens_in, "+", log.tokens_out, ")"] }))] }), _jsx(TableCell, { children: log.latency_ms ? `${log.latency_ms}ms` : "-" }), _jsx(TableCell, { children: _jsx(Chip, { color: log.status_code === 200 ? "success" : "danger", variant: "flat", size: "sm", children: log.status_code }) })] }, log.id))) })] }))] })] })] }));
+}

package/dist/web/auth/components/ApiKeyFilterSelect.d.ts

@@ -0,0 +1,13 @@
+interface ApiKey {
+    id: string;
+    name: string;
+    prefix: string;
+}
+interface ApiKeyFilterSelectProps {
+    apiKeys: ApiKey[];
+    selectedKey: string;
+    onSelectionChange: (key: string) => void;
+}
+export declare function ApiKeyFilterSelect({ apiKeys, selectedKey, onSelectionChange, }: ApiKeyFilterSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ApiKeyFilterSelect.d.ts.map

package/dist/web/auth/components/ApiKeyFilterSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ApiKeyFilterSelect.d.ts","sourceRoot":"","sources":["../../../../src/web/auth/components/ApiKeyFilterSelect.tsx"],"names":[],"mappings":"AAMA,UAAU,MAAM;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,uBAAuB;IAC/B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAO,EACP,WAAW,EACX,iBAAiB,GAClB,EAAE,uBAAuB,2CAwBzB"}

package/dist/web/auth/components/ApiKeyFilterSelect.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Select, SelectItem } from "@lastbrain/ui";
+import { Key as KeyIcon } from "lucide-react";
+import { useModuleTranslation } from "@lastbrain/core";
+export function ApiKeyFilterSelect({ apiKeys, selectedKey, onSelectionChange, }) {
+    const t = useModuleTranslation("ai");
+    return (_jsx(Select, { label: t("usage.filter.by_api_key"), size: "sm", selectedKeys: selectedKey ? [selectedKey] : ["all"], onSelectionChange: (keys) => {
+            const selected = Array.from(keys)[0];
+            onSelectionChange(selected ? String(selected) : "all");
+        }, className: "max-w-xs", startContent: _jsx(KeyIcon, { size: 16 }), children: [
+            { id: "all", name: t("usage.filter.all_keys") },
+            { id: "web", name: "Interface Web" },
+            ...apiKeys,
+        ].map((apiKey) => (_jsx(SelectItem, { children: apiKey.name }, apiKey.id))) }));
+}

package/dist/web/auth/components/ModelUsageTable.d.ts

@@ -0,0 +1,19 @@
+interface ModelUsageItem {
+    model: string;
+    provider?: string;
+    endpoint?: string;
+    total_cost_usd: number;
+    total_sell_usd: number;
+    call_count: number;
+    avg_cost_per_call: number;
+}
+interface ModelUsageTableProps {
+    data: ModelUsageItem[];
+    loading?: boolean;
+    totalRemaining?: number;
+    onMonthChange?: (month: string) => void;
+    selectedMonth?: string;
+}
+export declare function ModelUsageTable({ data, loading, totalRemaining, onMonthChange, selectedMonth, }: ModelUsageTableProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ModelUsageTable.d.ts.map

package/dist/web/auth/components/ModelUsageTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModelUsageTable.d.ts","sourceRoot":"","sources":["../../../../src/web/auth/components/ModelUsageTable.tsx"],"names":[],"mappings":"AAaA,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAED,UAAU,oBAAoB;IAC5B,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,OAAO,EACP,cAAkB,EAClB,aAAa,EACb,aAAqB,GACtB,EAAE,oBAAoB,2CA8KtB"}

package/dist/web/auth/components/ModelUsageTable.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardBody, CardHeader, Spinner, Select, SelectItem, } from "@lastbrain/ui";
+import { TrendingUp, Calendar } from "lucide-react";
+import { useModuleTranslation } from "@lastbrain/core";
+export function ModelUsageTable({ data, loading, totalRemaining = 0, onMonthChange, selectedMonth = "all", }) {
+    const t = useModuleTranslation("ai");
+    // Generate last 12 months for filter
+    const months = [];
+    const now = new Date();
+    for (let i = 0; i < 12; i++) {
+        const date = new Date(now.getFullYear(), now.getMonth() - i, 1);
+        const value = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}`;
+        const label = date.toLocaleDateString("fr-FR", {
+            year: "numeric",
+            month: "long",
+        });
+        months.push({ value, label });
+    }
+    const totalSpent = data.reduce((sum, item) => sum + item.total_sell_usd, 0);
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TrendingUp, { className: "w-5 h-5" }), _jsx("h3", { className: "text-lg font-semibold", children: t("usage.by_model_title") || "Utilisation par modèle" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { className: "w-4 h-4 text-gray-500" }), _jsx(Select, { size: "sm", label: "", placeholder: t("usage.period.label") || "Période", selectedKeys: [selectedMonth], onSelectionChange: (keys) => {
+                                    const key = Array.from(keys)[0];
+                                    onMonthChange?.(key);
+                                }, className: "min-w-[180px]", children: [
+                                    {
+                                        value: "all",
+                                        label: t("usage.period.all_months") || "Tous les mois",
+                                    },
+                                    ...months,
+                                ].map((month) => (_jsx(SelectItem, { children: month.label }, month.value))) })] })] }), _jsx(CardBody, { children: loading ? (_jsx("div", { className: "flex justify-center items-center py-12", children: _jsx(Spinner, { size: "lg" }) })) : data.length === 0 ? (_jsx("div", { className: "text-center py-12 text-gray-500", children: t("usage.no_usage") || "Aucune utilisation enregistrée" })) : (_jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/20 dark:to-indigo-950/20 p-4 rounded-lg border border-blue-200 dark:border-blue-800", children: _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsxs("div", { children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: t("usage.summary.total_spent") ||
+                                                    "Total dépensé (période)" }), _jsxs("p", { className: "text-2xl font-bold text-blue-600 dark:text-blue-400", children: ["$", totalSpent.toFixed(2)] })] }), _jsxs("div", { children: [_jsx("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: t("usage.summary.remaining_credit") || "Crédit restant" }), _jsxs("p", { className: "text-2xl font-bold text-green-600 dark:text-green-400", children: ["$", totalRemaining.toFixed(2)] })] })] }) }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-gray-200 dark:border-gray-700", children: [_jsx("th", { className: "text-left py-3 px-2 text-sm font-semibold text-gray-700 dark:text-gray-300", children: t("usage.table.model") || "Modèle" }), _jsx("th", { className: "text-left py-3 px-2 text-sm font-semibold text-gray-700 dark:text-gray-300", children: t("usage.table.provider") || "Provider" }), _jsx("th", { className: "text-right py-3 px-2 text-sm font-semibold text-gray-700 dark:text-gray-300", children: t("usage.table.total_cost") || "Coût total" }), _jsx("th", { className: "text-right py-3 px-2 text-sm font-semibold text-gray-700 dark:text-gray-300", children: t("usage.table.calls") || "Appels" }), _jsx("th", { className: "text-right py-3 px-2 text-sm font-semibold text-gray-700 dark:text-gray-300", children: t("usage.table.cost_per_call") || "Coût/appel" })] }) }), _jsx("tbody", { children: data.map((item, index) => {
+                                            const percentOfTotal = totalSpent > 0
+                                                ? (item.total_sell_usd / totalSpent) * 100
+                                                : 0;
+                                            return (_jsxs("tr", { className: "border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors", children: [_jsx("td", { className: "py-3 px-2", children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium text-sm", children: item.model }), item.endpoint && (_jsx("span", { className: "text-xs text-gray-500", children: item.endpoint }))] }) }), _jsx("td", { className: "py-3 px-2", children: _jsx("span", { className: "text-sm text-gray-600 dark:text-gray-400 capitalize", children: item.provider || "—" }) }), _jsx("td", { className: "py-3 px-2 text-right", children: _jsx("div", { className: "flex flex-col items-end", children: _jsxs("span", { className: "font-semibold text-sm", children: ["$", item.total_sell_usd.toFixed(2)] }) }) }), _jsx("td", { className: "py-3 px-2 text-right", children: _jsx("span", { className: "text-sm font-medium", children: item.call_count.toLocaleString() }) }), _jsx("td", { className: "py-3 px-2 text-right", children: _jsxs("span", { className: "text-sm text-gray-600 dark:text-gray-400", children: ["$", item.avg_cost_per_call.toFixed(4)] }) })] }, `${item.model}-${index}`));
+                                        }) })] }) })] })) })] }));
+}

package/dist/web/auth/components/PurchaseButton.d.ts

@@ -0,0 +1,7 @@
+interface PurchaseButtonProps {
+    text?: string;
+    className?: string;
+}
+export declare function PurchaseButton({ text, className }: PurchaseButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PurchaseButton.d.ts.map

package/dist/web/auth/components/PurchaseButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PurchaseButton.d.ts","sourceRoot":"","sources":["../../../../src/web/auth/components/PurchaseButton.tsx"],"names":[],"mappings":"AAMA,UAAU,mBAAmB;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE,mBAAmB,2CAmBtE"}

package/dist/web/auth/components/PurchaseButton.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from "@lastbrain/ui";
+import { ShoppingCart } from "lucide-react";
+import { useLocalizedRouter, useModuleTranslation } from "@lastbrain/core";
+export function PurchaseButton({ text, className }) {
+    const router = useLocalizedRouter();
+    const t = useModuleTranslation("ai");
+    const handlePurchase = () => {
+        router.push("/purchase-tokens");
+    };
+    return (_jsx(Button, { color: "primary", size: "lg", startContent: _jsx(ShoppingCart, { size: 20 }), onPress: handlePurchase, className: className, children: text || t("usage.button.buy_tokens") }));
+}