@lastbrain/module-auth 2.0.27 → 2.0.31

package/src/web/admin/user-detail.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect, useCallback } from "react";
-import { useModuleTranslation, useLanguage } from "@lastbrain/core";
+import { useModuleTranslation, useLanguage, logger } from "@lastbrain/core";
 import {
   Card,
   CardHeader,
@@ -18,8 +18,15 @@ import {
   Spinner,
   addToast,
   Snippet,
+  StorageUsageCard,
+  Table,
+  TableHeader,
+  TableColumn,
+  TableBody,
+  TableRow,
+  TableCell,
 } from "@lastbrain/ui";
-import { User, Bell, Settings } from "lucide-react";
+import { User, Bell, Settings, HardDrive, Package } from "lucide-react";
 import { useAuth } from "@lastbrain/core";
 import * as LucideIcons from "lucide-react";
 
@@ -81,6 +88,29 @@ export function UserDetailPage({
   const [notificationMessage, setNotificationMessage] = useState("");
   const [notificationType, setNotificationType] = useState("info");
   const [sendingNotification, setSendingNotification] = useState(false);
+  const [storageAddons, setStorageAddons] = useState<any[]>([]);
+  const [loadingAddons, setLoadingAddons] = useState(false);
+
+  // Fonction pour charger les addons de stockage de l'utilisateur
+  const fetchStorageAddons = useCallback(async () => {
+    try {
+      setLoadingAddons(true);
+      const response = await fetch(
+        `/api/admin/billing/user-addons?userId=${userId}`
+      );
+      if (response.ok) {
+        const data = await response.json();
+        const storageAddonsOnly = (data.addons || []).filter(
+          (addon: any) => addon.addon_type === "storage"
+        );
+        setStorageAddons(storageAddonsOnly);
+      }
+    } catch (err) {
+      logger.error("Error fetching storage addons:", err);
+    } finally {
+      setLoadingAddons(false);
+    }
+  }, [userId]);
 
   // Fonction pour charger les données de l'utilisateur
   const fetchUserProfile = useCallback(async () => {
@@ -92,7 +122,7 @@ export function UserDetailPage({
 
       if (!response.ok) {
         if (response.status === 404) {
-          console.error("Utilisateur non trouvé");
+          logger.error("Utilisateur non trouvé");
           setUserProfile(null);
           return;
         }
@@ -103,7 +133,7 @@ export function UserDetailPage({
       const userDetails = await response.json();
       setUserProfile(userDetails);
     } catch (error) {
-      console.error(
+      logger.error(
         t("user_detail.profile_loading_error") ||
           "Erreur lors du chargement du profil:",
         error
@@ -117,7 +147,8 @@ export function UserDetailPage({
   // Charger les données de l'utilisateur
   useEffect(() => {
     fetchUserProfile();
-  }, [fetchUserProfile]);
+    fetchStorageAddons();
+  }, [fetchUserProfile, fetchStorageAddons]);
 
   const handleSendNotification = async () => {
     if (!notificationTitle.trim() || !notificationMessage.trim()) {
@@ -174,9 +205,109 @@ export function UserDetailPage({
     }
   };
 
+  const handleResetPassword = async () => {
+    try {
+      if (!userProfile?.email) {
+        addToast({
+          color: "danger",
+          title: t("user_detail.no_email") || "Email introuvable",
+        });
+        return;
+      }
+
+      const resp = await fetch(`/api/auth/account/reset-password`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email: userProfile.email }),
+      });
+
+      if (!resp.ok) {
+        const err = await resp.json().catch(() => ({}));
+        throw new Error(
+          err?.error || "Erreur lors de l'envoi du lien de réinitialisation"
+        );
+      }
+
+      addToast({
+        color: "success",
+        title:
+          t("user_detail.reset_password_sent") ||
+          "Lien de réinitialisation envoyé",
+      });
+    } catch (err: any) {
+      addToast({
+        color: "danger",
+        title:
+          t("user_detail.reset_password_error") || (err?.message ?? "Erreur"),
+      });
+    }
+  };
+
+  const handleSuspendAccount = async () => {
+    if (
+      !confirm(
+        t("user_detail.suspend_confirm") ||
+          "Confirmer la suspension du compte ?"
+      )
+    )
+      return;
+    try {
+      const resp = await fetch(`/api/admin/users/suspend/${userId}`, {
+        method: "POST",
+      });
+      if (!resp.ok) {
+        const err = await resp.json().catch(() => ({}));
+        throw new Error(err?.error || "Failed to suspend user");
+      }
+
+      addToast({
+        color: "success",
+        title: t("user_detail.suspend_success") || "Compte suspendu",
+      });
+      // refresh profile
+      fetchUserProfile();
+    } catch (err: any) {
+      addToast({
+        color: "danger",
+        title: t("user_detail.suspend_error") || (err?.message ?? "Erreur"),
+      });
+    }
+  };
+
+  const handleReactivateAccount = async () => {
+    if (
+      !confirm(
+        t("user_detail.reactivate_confirm") ||
+          "Confirmer la réactivation du compte ?"
+      )
+    )
+      return;
+    try {
+      const resp = await fetch(`/api/admin/users/reactivate/${userId}`, {
+        method: "POST",
+      });
+      if (!resp.ok) {
+        const err = await resp.json().catch(() => ({}));
+        throw new Error(err?.error || "Failed to reactivate user");
+      }
+
+      addToast({
+        color: "success",
+        title: t("user_detail.reactivate_success") || "Compte réactivé",
+      });
+      // refresh profile
+      fetchUserProfile();
+    } catch (err: any) {
+      addToast({
+        color: "danger",
+        title: t("user_detail.reactivate_error") || (err?.message ?? "Erreur"),
+      });
+    }
+  };
+
   if (loading) {
     return (
-      <div className="flex justify-center items-center min-h-64">
+      <div className="mt-16 flex justify-center items-center min-h-64">
         <Spinner size="lg" />
       </div>
     );
@@ -198,8 +329,14 @@ export function UserDetailPage({
     Array.isArray(userProfile.raw_app_meta_data?.roles) &&
     userProfile.raw_app_meta_data.roles.includes("admin");
 
+  const isSuspended = Boolean(
+    (userProfile as any).raw_app_meta_data?.suspended ||
+    (userProfile as any).raw_app_meta_data?.app_metadata?.suspended ||
+    (userProfile as any).app_metadata?.suspended
+  );
+
   return (
-    <div className="max-w-[calc(100vw-8rem)] mx-auto mt-4 space-y-6">
+    <div className="mt-16 max-w-7xl mx-auto mt-4 space-y-6 pt-12 ">
       {/* Header utilisateur */}
       <Card>
         <CardHeader className="flex flex-col md:flex-row gap-4">
@@ -242,6 +379,15 @@ export function UserDetailPage({
                   ? t("user_detail.administrator") || "Administrateur"
                   : t("user_detail.user") || "Utilisateur"}
               </Chip>
+              {isSuspended ? (
+                <Chip variant="flat" color="danger" size="sm">
+                  {t("user_detail.suspended") || "Suspendu"}
+                </Chip>
+              ) : (
+                <Chip variant="flat" color="success" size="sm">
+                  {t("user_detail.active") || "Actif"}
+                </Chip>
+              )}
               {userProfile.profile?.signup_source && (
                 <Chip
                   variant="flat"
@@ -608,20 +754,42 @@ export function UserDetailPage({
                 </h3>
 
                 <div className="space-y-3 space-x-5">
-                  <Button color="warning" variant="bordered" size="sm">
+                  <Button
+                    color="warning"
+                    variant="bordered"
+                    size="sm"
+                    onPress={handleResetPassword}
+                  >
                     {t("user_detail.reset_password_btn") ||
                       "Réinitialiser le mot de passe"}
                   </Button>
 
-                  <Button color="danger" variant="bordered" size="sm">
-                    {t("user_detail.suspend_account_btn") ||
-                      "Suspendre le compte"}
-                  </Button>
-
-                  <Button color="secondary" variant="bordered" size="sm">
+                  {isSuspended ? (
+                    <Button
+                      color="success"
+                      variant="bordered"
+                      size="sm"
+                      onPress={handleReactivateAccount}
+                    >
+                      {t("user_detail.reactivate_account_btn") ||
+                        "Réactiver le compte"}
+                    </Button>
+                  ) : (
+                    <Button
+                      color="danger"
+                      variant="bordered"
+                      size="sm"
+                      onPress={handleSuspendAccount}
+                    >
+                      {t("user_detail.suspend_account_btn") ||
+                        "Suspendre le compte"}
+                    </Button>
+                  )}
+
+                  {/* <Button color="secondary" variant="bordered" size="sm">
                     {t("user_detail.promote_admin_btn") ||
                       "Promouvoir en administrateur"}
-                  </Button>
+                  </Button> */}
                 </div>
 
                 <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
@@ -642,6 +810,137 @@ export function UserDetailPage({
                 </div>
               </div>
             </Tab>
+
+            {/* Tab Stockage */}
+            <Tab
+              key="storage"
+              title={
+                <div className="flex items-center space-x-2">
+                  <HardDrive size={16} />
+                  <span>{t("user_detail.tab_storage") || "Stockage"}</span>
+                </div>
+              }
+            >
+              <div className="space-y-6 mt-4">
+                {/* Carte d'usage du stockage */}
+                <Card>
+                  <CardBody>
+                    <h3 className="font-semibold text-lg mb-4 flex items-center gap-2">
+                      <HardDrive size={18} />
+                      {t("user_detail.storage_usage") || "Usage du stockage"}
+                    </h3>
+                    <StorageUsageCard
+                      ownerId={userId}
+                      title=""
+                      showDetails={true}
+                      apiEndpoint="/api/admin/storage/usage"
+                    />
+                  </CardBody>
+                </Card>
+
+                {/* Addons de stockage */}
+                <Card>
+                  <CardBody>
+                    <h3 className="font-semibold text-lg mb-4 flex items-center gap-2">
+                      <Package size={18} />
+                      {t("user_detail.storage_addons") ||
+                        "Addons de stockage actifs"}
+                    </h3>
+
+                    {loadingAddons ? (
+                      <div className="flex justify-center py-8">
+                        <Spinner size="md" />
+                      </div>
+                    ) : storageAddons.length === 0 ? (
+                      <div className="text-center py-8 text-default-500">
+                        {t("user_detail.no_storage_addons") ||
+                          "Aucun addon de stockage actif"}
+                      </div>
+                    ) : (
+                      <Table aria-label="Storage addons">
+                        <TableHeader>
+                          <TableColumn>NOM</TableColumn>
+                          <TableColumn>QUOTA</TableColumn>
+                          <TableColumn>QUANTITÉ</TableColumn>
+                          <TableColumn>STATUT</TableColumn>
+                          <TableColumn>DATE D'AJOUT</TableColumn>
+                        </TableHeader>
+                        <TableBody>
+                          {storageAddons.map((addon) => (
+                            <TableRow key={addon.id}>
+                              <TableCell>
+                                <div>
+                                  <div className="font-medium">
+                                    {addon.name}
+                                  </div>
+                                  {addon.description && (
+                                    <div className="text-xs text-default-500">
+                                      {addon.description}
+                                    </div>
+                                  )}
+                                </div>
+                              </TableCell>
+                              <TableCell>
+                                {addon.quota_value} {addon.quota_unit}
+                              </TableCell>
+                              <TableCell>
+                                <Chip size="sm" variant="flat">
+                                  × {addon.quantity}
+                                </Chip>
+                              </TableCell>
+                              <TableCell>
+                                <Chip
+                                  size="sm"
+                                  color={
+                                    addon.status === "active"
+                                      ? "success"
+                                      : addon.status === "cancelled"
+                                        ? "warning"
+                                        : "default"
+                                  }
+                                  variant="flat"
+                                >
+                                  {addon.status === "active"
+                                    ? "Actif"
+                                    : addon.status === "cancelled"
+                                      ? "Résilié"
+                                      : addon.status}
+                                </Chip>
+                              </TableCell>
+                              <TableCell>
+                                {new Date(addon.created_at).toLocaleDateString(
+                                  "fr-FR",
+                                  {
+                                    year: "numeric",
+                                    month: "short",
+                                    day: "numeric",
+                                  }
+                                )}
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    )}
+
+                    {storageAddons.length > 0 && (
+                      <div className="mt-4 p-3 bg-primary-50 dark:bg-primary-900/20 rounded-lg">
+                        <p className="text-sm text-primary-700 dark:text-primary-300">
+                          <strong>Total addons :</strong>{" "}
+                          {storageAddons.reduce(
+                            (sum, addon) =>
+                              sum + addon.quota_value * addon.quantity,
+                            0
+                          )}{" "}
+                          GB additionnels
+                        </p>
+                      </div>
+                    )}
+                  </CardBody>
+                </Card>
+              </div>
+            </Tab>
+
             {/* Tabs dynamiques depuis les modules */}
             {moduleUserTabs.map((tab) => {
               const TabComponent = tab.component;

package/src/web/admin/users-by-signup-source.tsx

@@ -124,7 +124,7 @@ export function UsersBySignupSourcePage() {
 
   if (error) {
     return (
-      <div className="p-6">
+      <div className="mt-16 p-6">
         <Card className="border border-danger-200 bg-danger-50/50">
           <CardBody>
             <p className="text-danger-600">{error}</p>
@@ -135,7 +135,7 @@ export function UsersBySignupSourcePage() {
   }
 
   return (
-    <div className="space-y-6 p-6">
+    <div className="mt-16 space-y-6 p-6">
       {/* Header */}
       <div className="flex items-center gap-2 mb-8">
         <Users size={28} className="text-primary-600" />

package/src/web/admin/users.tsx

@@ -19,7 +19,7 @@ import {
   Avatar,
 } from "@lastbrain/ui";
 import { Search, RefreshCw, Eye, Users2 } from "lucide-react";
-import { useModuleTranslation } from "@lastbrain/core";
+import { logger, useModuleTranslation } from "@lastbrain/core";
 import { useLocalizedRouter } from "@lastbrain/core";
 
 interface User {
@@ -35,6 +35,10 @@ interface User {
     large?: string;
   };
   role?: string;
+  app_metadata?: {
+    suspended?: boolean;
+  };
+  raw_app_meta_data?: any;
 }
 
 interface PaginationData {
@@ -97,7 +101,7 @@ export function AdminUsersPage() {
       setError(null);
     } catch (err) {
       setError(err instanceof Error ? err.message : "An error occurred");
-      console.error("Erreur lors du chargement des utilisateurs:", err);
+      logger.error("Erreur lors du chargement des utilisateurs:", err);
     } finally {
       setIsLoading(false);
     }
@@ -132,7 +136,7 @@ export function AdminUsersPage() {
 
   if (error && users.length === 0) {
     return (
-      <div className="pt-12 pb-12 max-w-7xl mx-auto px-4">
+      <div className="mt-16 pt-12 pb-12 max-w-7xl mx-auto px-4">
         <Card>
           <CardBody>
             <p className="text-danger">{error}</p>
@@ -143,7 +147,7 @@ export function AdminUsersPage() {
   }
 
   return (
-    <div className="pt-12 pb-12 max-w-7xl mx-auto px-4">
+    <div className="mt-16 pt-12 pb-12 max-w-7xl mx-auto px-4">
       <div className="flex items-center gap-2 mb-8">
         <Users2 className="w-8 h-8" />
         <h1 className="text-3xl font-bold">
@@ -212,13 +216,14 @@ export function AdminUsersPage() {
                     {t("users.column_email") || "EMAIL"}
                   </TableColumn>
                   <TableColumn>{t("users.column_role") || "ROLE"}</TableColumn>
+                  <TableColumn>{"STATUT"}</TableColumn>
                   <TableColumn>
                     {t("users.column_last_sign_in") || "LAST SIGN IN"}
                   </TableColumn>
                   <TableColumn>
                     {t("users.column_created") || "CREATED"}
                   </TableColumn>
-                  <TableColumn>
+                  <TableColumn align="end">
                     {t("users.column_actions") || "ACTIONS"}
                   </TableColumn>
                 </TableHeader>
@@ -226,6 +231,24 @@ export function AdminUsersPage() {
                   {users.map((user) => {
                     const displayName = user.full_name || user.email;
 
+                    const isSuspended = (() => {
+                      const u = user as any;
+                      // check multiple possible locations returned by different RPCs
+                      if (u.app_metadata?.suspended) return true;
+                      if (u.raw_app_meta_data?.suspended) return true;
+                      if (u.raw_app_meta_data?.app_metadata?.suspended)
+                        return true;
+                      // some RPCs may wrap app metadata twice
+                      if (u.raw_app_meta_data?.raw_app_meta_data?.suspended)
+                        return true;
+                      if (
+                        u.raw_app_meta_data?.raw_app_meta_data?.app_metadata
+                          ?.suspended
+                      )
+                        return true;
+                      return false;
+                    })();
+
                     return (
                       <TableRow key={user.id}>
                         <TableCell>
@@ -257,6 +280,17 @@ export function AdminUsersPage() {
                             {user.role || "user"}
                           </Chip>
                         </TableCell>
+                        <TableCell>
+                          <Chip
+                            size="sm"
+                            variant="flat"
+                            color={isSuspended ? "danger" : "success"}
+                          >
+                            {isSuspended
+                              ? t("user_detail.suspended") || "Suspendu"
+                              : t("user_detail.active") || "Actif"}
+                          </Chip>
+                        </TableCell>
                         <TableCell>
                           <span className="text-small">
                             {user.last_sign_in_at
@@ -270,15 +304,17 @@ export function AdminUsersPage() {
                           </span>
                         </TableCell>
                         <TableCell>
-                          <Button
-                            size="sm"
-                            variant="flat"
-                            color="primary"
-                            onPress={() => handleViewUser(user.id)}
-                            startContent={<Eye size={14} />}
-                          >
-                            {t("users.view_button") || "Voir"}
-                          </Button>
+                          <div className="flex justify-end">
+                            <Button
+                              size="sm"
+                              variant="flat"
+                              color="primary"
+                              onPress={() => handleViewUser(user.id)}
+                              startContent={<Eye size={14} />}
+                            >
+                              {t("users.view_button") || "Voir"}
+                            </Button>
+                          </div>
                         </TableCell>
                       </TableRow>
                     );

package/src/web/auth/folder.tsx

@@ -1,7 +1,13 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Card, CardBody, Spinner } from "@lastbrain/ui";
+import {
+  Alert,
+  Card,
+  CardBody,
+  Spinner,
+  StorageUsageCard,
+} from "@lastbrain/ui";
 import { FileManager } from "@lastbrain/ui";
 import { useModuleTranslation } from "@lastbrain/core";
 
@@ -32,7 +38,7 @@ export function FolderPage() {
   const fetchUserData = async () => {
     try {
       setIsLoading(true);
-      const response = await fetch("/api/auth/me");
+      const response = await fetch("/api/auth/me", { credentials: "include" });
 
       if (!response.ok) {
         throw new Error("Failed to fetch user data");
@@ -80,9 +86,16 @@ export function FolderPage() {
 
   return (
     <div className="pt-4 pb-12 max-w-8xl mx-auto px-4">
-      <h1 className="text-3xl font-bold mb-8">
-        {t("folder.title") || "Dossier"}
-      </h1>
+      <div className="flex justify-between items-center mb-4 gap-4">
+        <h1 className="text-3xl font-bold">{t("folder.title") || "Dossier"}</h1>
+
+        <StorageUsageCard
+          ownerId={userData.id}
+          title={t("folder.storage_usage") || "Espace de stockage"}
+          showDetails={false}
+          size="sm"
+        />
+      </div>
 
       <FileManager
         bucket="app"
@@ -92,6 +105,11 @@ export function FolderPage() {
         allowAIImageGeneration={false}
         className="min-h-[80vh]"
       />
+
+      <Alert color="primary" className="mt-6">
+        {t("folder.note") ||
+          "Note : Cet espace regroupe les fichiers générés par vos différentes applications et modules. Tous les fichiers restent centralisés et accessibles depuis votre espace personnel."}
+      </Alert>
     </div>
   );
 }