@lastbrain/module-auth 0.1.6 → 0.1.8

package/src/auth.build.config.ts

@@ -38,6 +38,11 @@ const authBuildConfig: ModuleBuildConfig = {
       path: "/users",
       componentExport: "AdminUsersPage",
     },
+    {
+      section: "admin",
+      path: "/users/[id]",
+      componentExport: "UserPage",
+    },
   ],
   apis: [
     {
@@ -82,6 +87,20 @@ const authBuildConfig: ModuleBuildConfig = {
       entryPoint: "api/admin/users",
       authRequired: true,
     },
+    {
+      method: "GET",
+      path: "/api/admin/users/[id]",
+      handlerExport: "GET",
+      entryPoint: "api/admin/users/[id]",
+      authRequired: true,
+    },
+    {
+      method: "POST",
+      path: "/api/admin/users/[id]/notifications",
+      handlerExport: "POST",
+      entryPoint: "api/admin/users/[id]/notifications",
+      authRequired: true,
+    },
   ],
   migrations: {
     enabled: true,
@@ -91,6 +110,7 @@ const authBuildConfig: ModuleBuildConfig = {
       "20251112000000_user_init.sql",
       "20251112000001_auto_profile_and_admin_view.sql",
       "20251112000002_sync_avatars.sql",
+      "20251124000001_add_get_admin_user_details.sql",
     ],
     migrationsDownPath: "supabase/migrations-down",
   },
@@ -151,6 +171,32 @@ const authBuildConfig: ModuleBuildConfig = {
       },
     ],
   },
+  realtime: {
+    moduleId: "module-auth",
+    tables: [
+      {
+        schema: "public",
+        table: "user_notifications",
+        event: "*",
+        filter: "owner_id=eq.${USER_ID}",
+        broadcast: "user_notifications_updated",
+      },
+      {
+        schema: "public",
+        table: "user_profil",
+        event: "*",
+        filter: "owner_id=eq.${USER_ID}",
+        broadcast: "user_profil_updated",
+      },
+      {
+        schema: "public",
+        table: "user_addresses",
+        event: "*",
+        filter: "owner_id=eq.${USER_ID}",
+        broadcast: "user_address_updated",
+      },
+    ],
+  },
 };
 
 export default authBuildConfig;

package/src/index.ts

@@ -6,6 +6,7 @@ export { DashboardPage } from "./web/auth/dashboard.js";
 export { ProfilePage } from "./web/auth/profile.js";
 export { ReglagePage } from "./web/auth/reglage.js";
 export { AdminUsersPage } from "./web/admin/users.js";
+export { default as UserPage } from "./web/admin/users/[id].js";
 // Documentation
 export { AuthModuleDoc } from "./components/Doc.js";
 // Configuration de build (utilisée par les scripts)

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

@@ -0,0 +1,348 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  Tabs,
+  Tab,
+  Avatar,
+  Chip,
+  Button,
+  Input,
+  Textarea,
+  Select,
+  SelectItem,
+  Spacer,
+  Spinner,
+  addToast,
+} from "@lastbrain/ui";
+import { User, Bell, Settings, Save } from "lucide-react";
+import { useAuth } from "@lastbrain/core";
+
+interface UserProfile {
+  id: string;
+  email: string;
+  full_name: string;
+  avatar_url: string;
+  created_at: string;
+  last_sign_in_at: string;
+  raw_app_meta_data: Record<string, unknown>;
+  raw_user_meta_data: Record<string, unknown>;
+}
+
+interface UserDetailPageProps {
+  userId: string;
+}
+
+export function UserDetailPage({ userId }: UserDetailPageProps) {
+  const { user: _currentUser } = useAuth();
+  const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [notificationTitle, setNotificationTitle] = useState("");
+  const [notificationMessage, setNotificationMessage] = useState("");
+  const [notificationType, setNotificationType] = useState("info");
+  const [sendingNotification, setSendingNotification] = useState(false);
+
+  // Fonction pour charger les données de l'utilisateur
+  const fetchUserProfile = useCallback(async () => {
+    try {
+      setLoading(true);
+
+      // Utiliser l'API route pour récupérer les détails de l'utilisateur
+      const response = await fetch(`/api/admin/users/${userId}`);
+
+      if (!response.ok) {
+        if (response.status === 404) {
+          console.error("Utilisateur non trouvé");
+          setUserProfile(null);
+          return;
+        }
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Failed to fetch user details");
+      }
+
+      const userDetails = await response.json();
+      setUserProfile(userDetails);
+    } catch (error) {
+      console.error("Erreur lors du chargement du profil:", error);
+      setUserProfile(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [userId]);
+
+  // Charger les données de l'utilisateur
+  useEffect(() => {
+    fetchUserProfile();
+  }, [fetchUserProfile]);
+
+  const handleSendNotification = async () => {
+    if (!notificationTitle.trim() || !notificationMessage.trim()) {
+      addToast({
+        color: "danger",
+        title: "Veuillez remplir le titre et le message",
+      });
+      return;
+    }
+
+    try {
+      setSendingNotification(true);
+
+      // Utiliser l'API route pour envoyer la notification
+      const response = await fetch(`/api/admin/users/${userId}/notifications`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          title: notificationTitle.trim(),
+          message: notificationMessage.trim(),
+          type: notificationType,
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Failed to send notification");
+      }
+
+      // Reset du formulaire
+      setNotificationTitle("");
+      setNotificationMessage("");
+      setNotificationType("info");
+
+      addToast({
+        color: "success",
+        title: "Notification envoyée avec succès",
+      });
+    } catch {
+      addToast({
+        color: "danger",
+        title: "Erreur lors de l'envoi de la notification",
+      });
+    } finally {
+      setSendingNotification(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-64">
+        <Spinner size="lg" />
+      </div>
+    );
+  }
+
+  if (!userProfile) {
+    return (
+      <Card>
+        <CardBody>
+          <p className="text-center text-gray-500">Utilisateur non trouvé</p>
+        </CardBody>
+      </Card>
+    );
+  }
+
+  const isAdmin =
+    Array.isArray(userProfile.raw_app_meta_data?.roles) &&
+    userProfile.raw_app_meta_data.roles.includes("admin");
+
+  return (
+    <div className="mt-4 space-y-6">
+      {/* Header utilisateur */}
+      <Card>
+        <CardHeader className="flex gap-4">
+          <Avatar
+            src={userProfile.avatar_url}
+            name={userProfile.full_name || userProfile.email}
+            size="lg"
+          />
+          <div className="flex flex-col gap-1">
+            <h1 className="text-2xl font-bold">
+              {userProfile.full_name || userProfile.email}
+            </h1>
+            <p className="text-gray-500">{userProfile.email}</p>
+            <div className="flex gap-2">
+              <Chip color={isAdmin ? "danger" : "primary"} size="sm">
+                {isAdmin ? "Administrateur" : "Utilisateur"}
+              </Chip>
+              <Chip color="default" size="sm">
+                ID: {userId}
+              </Chip>
+            </div>
+          </div>
+        </CardHeader>
+      </Card>
+
+      {/* Tabs */}
+      <Card>
+        <CardBody>
+          <Tabs
+            aria-label="Options utilisateur"
+            color="primary"
+            variant="underlined"
+          >
+            {/* Tab Profil */}
+            <Tab
+              key="profile"
+              title={
+                <div className="flex items-center space-x-2">
+                  <User size={16} />
+                  <span>Profil</span>
+                </div>
+              }
+            >
+              <div className="space-y-4 mt-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <h3 className="font-semibold mb-2">
+                      Informations personnelles
+                    </h3>
+                    <div className="space-y-2 text-sm">
+                      <p>
+                        <span className="font-medium">Nom complet:</span>{" "}
+                        {userProfile.full_name || "Non renseigné"}
+                      </p>
+                      <p>
+                        <span className="font-medium">Email:</span>{" "}
+                        {userProfile.email}
+                      </p>
+                      <p>
+                        <span className="font-medium">Date de création:</span>{" "}
+                        {userProfile.created_at
+                          ? new Date(
+                              userProfile.created_at,
+                            ).toLocaleDateString()
+                          : "N/A"}
+                      </p>
+                      <p>
+                        <span className="font-medium">Dernière connexion:</span>{" "}
+                        {userProfile.last_sign_in_at
+                          ? new Date(
+                              userProfile.last_sign_in_at,
+                            ).toLocaleDateString()
+                          : "N/A"}
+                      </p>
+                    </div>
+                  </div>
+                  <div>
+                    <h3 className="font-semibold mb-2">Rôles et permissions</h3>
+                    <div className="space-y-2">
+                      <Chip color={isAdmin ? "danger" : "default"}>
+                        {isAdmin ? "Administrateur" : "Utilisateur standard"}
+                      </Chip>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </Tab>
+
+            {/* Tab Notifications */}
+            <Tab
+              key="notifications"
+              title={
+                <div className="flex items-center space-x-2">
+                  <Bell size={16} />
+                  <span>Notifications</span>
+                </div>
+              }
+            >
+              <div className="space-y-4 mt-4">
+                <h3 className="font-semibold">Envoyer une notification</h3>
+
+                <div className="space-y-4">
+                  <Input
+                    label="Titre de la notification"
+                    placeholder="Ex: Nouveau message important"
+                    value={notificationTitle}
+                    onChange={(e) => setNotificationTitle(e.target.value)}
+                    maxLength={100}
+                  />
+
+                  <Textarea
+                    label="Message"
+                    placeholder="Contenu de la notification..."
+                    value={notificationMessage}
+                    onChange={(e) => setNotificationMessage(e.target.value)}
+                    maxLength={500}
+                    minRows={3}
+                  />
+
+                  <Select
+                    label="Type de notification"
+                    selectedKeys={[notificationType]}
+                    onSelectionChange={(keys) =>
+                      setNotificationType(Array.from(keys)[0] as string)
+                    }
+                  >
+                    <SelectItem key="info">Information</SelectItem>
+                    <SelectItem key="warning">Avertissement</SelectItem>
+                    <SelectItem key="danger">Danger</SelectItem>
+                    <SelectItem key="success">Succès</SelectItem>
+                  </Select>
+
+                  <Button
+                    color="primary"
+                    onPress={handleSendNotification}
+                    isLoading={sendingNotification}
+                    startContent={<Bell size={16} />}
+                    isDisabled={
+                      !notificationTitle.trim() || !notificationMessage.trim()
+                    }
+                  >
+                    Envoyer la notification
+                  </Button>
+                </div>
+              </div>
+            </Tab>
+
+            {/* Tab Paramètres */}
+            <Tab
+              key="settings"
+              title={
+                <div className="flex items-center space-x-2">
+                  <Settings size={16} />
+                  <span>Paramètres</span>
+                </div>
+              }
+            >
+              <div className="space-y-4 mt-4">
+                <h3 className="font-semibold">Actions administrateur</h3>
+
+                <div className="space-y-3 space-x-5">
+                  <Button color="warning" variant="bordered" size="sm">
+                    Réinitialiser le mot de passe
+                  </Button>
+
+                  <Button color="danger" variant="bordered" size="sm">
+                    Suspendre le compte
+                  </Button>
+
+                  <Button color="secondary" variant="bordered" size="sm">
+                    Promouvoir en administrateur
+                  </Button>
+                </div>
+
+                <div className="mt-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+                  <h4 className="font-medium mb-2">Métadonnées techniques</h4>
+                  <pre className="text-xs text-gray-600 dark:text-gray-400 overflow-auto">
+                    {JSON.stringify(
+                      {
+                        app_metadata: userProfile.raw_app_meta_data,
+                        user_metadata: userProfile.raw_user_meta_data,
+                      },
+                      null,
+                      2,
+                    )}
+                  </pre>
+                </div>
+              </div>
+            </Tab>
+          </Tabs>
+        </CardBody>
+      </Card>
+    </div>
+  );
+}

package/src/web/admin/users/[id].tsx

@@ -0,0 +1,12 @@
+import { UserDetailPage } from "../user-detail.js";
+
+interface UserPageProps {
+  params: Promise<{
+    id: string;
+  }>;
+}
+
+export default async function UserPage({ params }: UserPageProps) {
+  const { id } = await params;
+  return <UserDetailPage userId={id} />;
+}

package/src/web/admin/users.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState, useId } from "react";
 import {
   Card,
   CardBody,
@@ -17,32 +17,17 @@ import {
   Button,
   Pagination,
   Avatar,
-  addToast,
 } from "@lastbrain/ui";
-import { Users, Search, RefreshCw } from "lucide-react";
+import { Users, Search, RefreshCw, Eye } from "lucide-react";
+import { useRouter } from "next/navigation";
 
 interface User {
   id: string;
   email: string;
   created_at: string;
-  email_confirmed_at?: string;
   last_sign_in_at?: string;
-  role?: string;
   full_name?: string;
-  avatar_path?: string;
-  metadata?: Record<string, unknown>;
-  profile: {
-    first_name?: string;
-    last_name?: string;
-    avatar_url?: string;
-    company?: string;
-    location?: string;
-    bio?: string;
-    phone?: string;
-    website?: string;
-    language?: string;
-    timezone?: string;
-  };
+  avatar_url?: string;
 }
 
 interface PaginationData {
@@ -53,6 +38,8 @@ interface PaginationData {
 }
 
 export function AdminUsersPage() {
+  const router = useRouter();
+  const searchInputId = useId();
   const [users, setUsers] = useState<User[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -67,44 +54,41 @@ export function AdminUsersPage() {
   const fetchUsers = useCallback(async () => {
     try {
       setIsLoading(true);
+
+      // Utiliser l'API route au lieu d'appeler directement Supabase
       const params = new URLSearchParams({
         page: pagination.page.toString(),
         per_page: pagination.per_page.toString(),
       });
 
-      if (searchQuery) {
-        params.append("search", searchQuery);
+      if (searchQuery.trim()) {
+        params.append("search", searchQuery.trim());
       }
 
       const response = await fetch(`/api/admin/users?${params}`);
 
-      if (response.status === 403) {
-        setError("You don't have permission to access this page");
-        addToast({
-          title: "Access Denied",
-          description: "Superadmin access required",
-          color: "danger",
-        });
-        return;
-      }
-
       if (!response.ok) {
-        throw new Error("Failed to fetch users");
+        const errorData = await response.json();
+        throw new Error(errorData.error || "Failed to fetch users");
       }
 
       const result = await response.json();
-      setUsers(result.data || []);
-      if (result.pagination) {
-        setPagination(result.pagination);
-      }
+
+      // L'API retourne soit { data, pagination } soit directement { users, pagination }
+      const usersData = result.data || result.users || [];
+      const paginationData = result.pagination || {
+        page: pagination.page,
+        per_page: pagination.per_page,
+        total: 0,
+        total_pages: 0,
+      };
+
+      setUsers(usersData);
+      setPagination(paginationData);
       setError(null);
     } catch (err) {
       setError(err instanceof Error ? err.message : "An error occurred");
-      addToast({
-        title: "Error",
-        description: "Failed to load users",
-        color: "danger",
-      });
+      console.error("Erreur lors du chargement des utilisateurs:", err);
     } finally {
       setIsLoading(false);
     }
@@ -114,17 +98,23 @@ export function AdminUsersPage() {
     fetchUsers();
   }, [fetchUsers]);
 
-  const handleSearch = () => {
+  const handleSearch = useCallback(() => {
     setPagination((prev) => ({ ...prev, page: 1 }));
-    fetchUsers();
-  };
+  }, []);
 
-  const handlePageChange = (page: number) => {
+  const handlePageChange = useCallback((page: number) => {
     setPagination((prev) => ({ ...prev, page }));
-  };
+  }, []);
+
+  const handleViewUser = useCallback(
+    (userId: string) => {
+      router.push(`/admin/auth/users/${userId}`);
+    },
+    [router],
+  );
 
   const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString("en-US", {
+    return new Date(dateString).toLocaleDateString("fr-FR", {
       year: "numeric",
       month: "short",
       day: "numeric",
@@ -155,6 +145,7 @@ export function AdminUsersPage() {
           <div className="flex flex-col md:flex-row gap-4 w-full">
             <div className="flex gap-2 flex-1">
               <Input
+                id={searchInputId}
                 placeholder="Search by email or name..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
@@ -199,58 +190,40 @@ export function AdminUsersPage() {
                 <TableHeader>
                   <TableColumn>USER</TableColumn>
                   <TableColumn>EMAIL</TableColumn>
-                  <TableColumn>ROLE</TableColumn>
-                  <TableColumn>COMPANY</TableColumn>
                   <TableColumn>LAST SIGN IN</TableColumn>
                   <TableColumn>CREATED</TableColumn>
-                  <TableColumn>STATUS</TableColumn>
+                  <TableColumn>ACTIONS</TableColumn>
                 </TableHeader>
                 <TableBody>
                   {users.map((user) => {
-                    const fullName =
-                      user.profile?.first_name && user.profile?.last_name
-                        ? `${user.profile.first_name} ${user.profile.last_name}`
-                        : user.full_name || "N/A";
-
-                    const roleColor =
-                      user.role === "admin" || user.role === "superadmin"
-                        ? "danger"
-                        : user.role === "moderator"
-                          ? "secondary"
-                          : "default";
+                    const displayName = user.full_name || user.email;
 
                     return (
                       <TableRow key={user.id}>
                         <TableCell>
                           <div className="flex items-center gap-2">
                             <Avatar
-                              src={`/api/storage/${user.profile?.avatar_url}`}
-                              name={fullName}
+                              src={
+                                user.avatar_url
+                                  ? `/api/storage/${user.avatar_url}`
+                                  : undefined
+                              }
+                              name={displayName}
                               size="sm"
                             />
                             <span className="text-small font-medium">
-                              {fullName}
+                              {displayName}
                             </span>
                           </div>
                         </TableCell>
                         <TableCell>
                           <span className="text-small">{user.email}</span>
                         </TableCell>
-                        <TableCell>
-                          <Chip color={roleColor} size="sm" variant="flat">
-                            {user.role || "user"}
-                          </Chip>
-                        </TableCell>
-                        <TableCell>
-                          <span className="text-small">
-                            {user.profile?.company || "-"}
-                          </span>
-                        </TableCell>
                         <TableCell>
                           <span className="text-small">
                             {user.last_sign_in_at
                               ? formatDate(user.last_sign_in_at)
-                              : "Never"}
+                              : "Jamais"}
                           </span>
                         </TableCell>
                         <TableCell>
@@ -259,9 +232,15 @@ export function AdminUsersPage() {
                           </span>
                         </TableCell>
                         <TableCell>
-                          <Chip color="success" size="sm" variant="flat">
-                            Active
-                          </Chip>
+                          <Button
+                            size="sm"
+                            variant="flat"
+                            color="primary"
+                            onPress={() => handleViewUser(user.id)}
+                            startContent={<Eye size={14} />}
+                          >
+                            Voir
+                          </Button>
                         </TableCell>
                       </TableRow>
                     );