@lastbrain/module-auth 0.1.21 → 0.1.23

package/src/web/admin/signup-stats.tsx

@@ -0,0 +1,304 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Chip,
+  Spinner,
+  Tab,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+  Tabs,
+} from "@lastbrain/ui";
+import { BarChart3, TrendingUp } from "lucide-react";
+
+interface SignupStats {
+  total: number;
+  bySource: {
+    lastbrain: number;
+    recipe: number;
+  };
+  byDate: Array<{
+    date: string;
+    lastbrain: number;
+    recipe: number;
+    total: number;
+  }>;
+}
+
+export function SignupStatsPage() {
+  const [stats, setStats] = useState<SignupStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetchStats();
+  }, []);
+
+  const fetchStats = async () => {
+    try {
+      setLoading(true);
+      const response = await fetch("/api/admin/signup-stats");
+
+      if (!response.ok) {
+        throw new Error("Erreur lors du chargement des statistiques");
+      }
+
+      const result = await response.json();
+      setStats(result.data);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Erreur lors du chargement"
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center min-h-screen">
+        <Spinner size="lg" label="Chargement des statistiques..." />
+      </div>
+    );
+  }
+
+  if (error || !stats) {
+    return (
+      <div className="p-6">
+        <Card className="border border-danger-200 bg-danger-50/50">
+          <CardBody>
+            <p className="text-danger-600">{error || "Erreur de chargement"}</p>
+          </CardBody>
+        </Card>
+      </div>
+    );
+  }
+
+  const lastbrainPercentage = (
+    (stats.bySource.lastbrain / stats.total) *
+    100
+  ).toFixed(1);
+  const recipePercentage = (
+    (stats.bySource.recipe / stats.total) *
+    100
+  ).toFixed(1);
+
+  return (
+    <div className="space-y-6 px-2 md:p-6">
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-8">
+        <BarChart3 size={28} className="text-primary-600" />
+        <h1 className="text-3xl font-bold">Statistiques d'inscriptions</h1>
+      </div>
+
+      {/* Key Metrics Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
+        {/* Total Signups */}
+        <Card className="bg-content2 border border-primary-200 dark:border-primary-800">
+          <CardBody className="gap-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium text-primary-600 dark:text-primary-400">
+                Total d'inscriptions
+              </span>
+              <TrendingUp size={20} className="text-primary-600" />
+            </div>
+            <p className="text-4xl font-bold text-primary-700 dark:text-primary-300">
+              {stats.total}
+            </p>
+          </CardBody>
+        </Card>
+
+        {/* LastBrain Signups */}
+        <Card className="bg-content2  border border-secondary-200 dark:border-secondary-800">
+          <CardBody className="gap-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium text-secondary-600 dark:text-secondary-400">
+                Inscriptions LastBrain
+              </span>
+            </div>
+            <div className="flex items-end gap-2">
+              <p className="text-4xl font-bold text-secondary-700 dark:text-secondary-300">
+                {stats.bySource.lastbrain}
+              </p>
+              <Chip size="sm" color="secondary" variant="flat">
+                {lastbrainPercentage}%
+              </Chip>
+            </div>
+          </CardBody>
+        </Card>
+
+        {/* Recipe Signups */}
+        <Card className="bg-content2  border border-success-200 dark:border-success-800">
+          <CardBody className="gap-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium text-success-600 dark:text-success-400">
+                Inscriptions Recipe
+              </span>
+            </div>
+            <div className="flex items-end gap-2">
+              <p className="text-4xl font-bold text-success-700 dark:text-success-300">
+                {stats.bySource.recipe}
+              </p>
+              <Chip size="sm" color="success" variant="flat">
+                {recipePercentage}%
+              </Chip>
+            </div>
+          </CardBody>
+        </Card>
+      </div>
+
+      {/* Tabs for different views */}
+      <Tabs
+        aria-label="Vues des statistiques"
+        color="primary"
+        variant="bordered"
+      >
+        {/* By Source Tab */}
+        <Tab key="by-source" title="Par Source">
+          <Card className="mt-6">
+            <CardHeader>
+              <h3 className="text-lg font-semibold">Résumé par source</h3>
+            </CardHeader>
+            <CardBody>
+              <div className="space-y-4">
+                {/* LastBrain */}
+                <div className="p-4 rounded-lg border border-secondary-800 dark:border-secondary-800">
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="font-medium text-secondary-700 dark:text-secondary-300">
+                      LastBrain
+                    </span>
+                    <Chip size="sm" color="secondary" variant="flat">
+                      {stats.bySource.lastbrain} inscriptions
+                    </Chip>
+                  </div>
+                  <div className="w-full bg-default-200 rounded-full h-2 dark:bg-default-700">
+                    <div
+                      className="bg-secondary-500 h-2 rounded-full"
+                      style={{
+                        width: `${(stats.bySource.lastbrain / stats.total) * 100}%`,
+                      }}
+                    />
+                  </div>
+                  <p className="text-xs text-default-500 mt-2">
+                    {lastbrainPercentage}% du total
+                  </p>
+                </div>
+
+                {/* Recipe */}
+                <div className="p-4 rounded-lg border border-success-200 dark:border-success-800">
+                  <div className="flex items-center justify-between mb-2">
+                    <span className="font-medium text-success-700 dark:text-success-300">
+                      Recipe
+                    </span>
+                    <Chip size="sm" color="success" variant="flat">
+                      {stats.bySource.recipe} inscriptions
+                    </Chip>
+                  </div>
+                  <div className="w-full bg-default-200 rounded-full h-2 dark:bg-default-700">
+                    <div
+                      className="bg-success-500 h-2 rounded-full"
+                      style={{
+                        width: `${(stats.bySource.recipe / stats.total) * 100}%`,
+                      }}
+                    />
+                  </div>
+                  <p className="text-xs text-default-500 mt-2">
+                    {recipePercentage}% du total
+                  </p>
+                </div>
+              </div>
+            </CardBody>
+          </Card>
+        </Tab>
+
+        {/* By Date Tab */}
+        <Tab key="by-date" title="Par Date (30 derniers jours)">
+          <Card className="mt-6">
+            <CardHeader>
+              <h3 className="text-lg font-semibold">Inscriptions par date</h3>
+              <p className="text-sm text-default-500">
+                Derniers 30 jours avec répartition par source
+              </p>
+            </CardHeader>
+            <CardBody>
+              <Table
+                aria-label="Tableau des inscriptions par date"
+                className="rounded-lg"
+              >
+                <TableHeader>
+                  <TableColumn>Date</TableColumn>
+                  <TableColumn className="text-right">LastBrain</TableColumn>
+                  <TableColumn className="text-right">Recipe</TableColumn>
+                  <TableColumn className="text-right">Total</TableColumn>
+                </TableHeader>
+                <TableBody>
+                  {stats.byDate.map((row) => (
+                    <TableRow key={row.date}>
+                      <TableCell>
+                        <span className="font-medium">
+                          {new Date(row.date).toLocaleDateString("fr-FR", {
+                            weekday: "short",
+                            year: "2-digit",
+                            month: "2-digit",
+                            day: "2-digit",
+                          })}
+                        </span>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Chip
+                          size="sm"
+                          color={row.lastbrain > 0 ? "secondary" : "default"}
+                          variant="flat"
+                        >
+                          {row.lastbrain}
+                        </Chip>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <Chip
+                          size="sm"
+                          color={row.recipe > 0 ? "success" : "default"}
+                          variant="flat"
+                        >
+                          {row.recipe}
+                        </Chip>
+                      </TableCell>
+                      <TableCell className="text-right">
+                        <span className="font-semibold text-primary-600 dark:text-primary-400">
+                          {row.total}
+                        </span>
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+
+              {stats.byDate.length === 0 && (
+                <div className="text-center py-8 text-default-500">
+                  <p>Aucune donnée disponible pour les 30 derniers jours</p>
+                </div>
+              )}
+            </CardBody>
+          </Card>
+        </Tab>
+      </Tabs>
+
+      {/* Info Card */}
+      <Card className="border-l-4 border-l-primary-500 bg-primary-50/30 dark:bg-primary-950/20">
+        <CardBody className="py-3">
+          <p className="text-sm text-primary-700 dark:text-primary-300">
+            <strong>💡 Info:</strong> Ces statistiques vous permettent de suivre
+            les inscriptions en fonction de la source (LastBrain ou Recipe) pour
+            mieux comprendre d'où proviennent vos utilisateurs.
+          </p>
+        </CardBody>
+      </Card>
+    </div>
+  );
+}

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

@@ -58,6 +58,7 @@ interface UserProfile {
     avatar_url?: string;
     created_at?: string;
     updated_at?: string;
+    signup_source?: string;
   };
 }
 
@@ -223,6 +224,21 @@ export function UserDetailPage({
               >
                 {isAdmin ? "Administrateur" : "Utilisateur"}
               </Chip>
+              {userProfile.profile?.signup_source && (
+                <Chip
+                  variant="flat"
+                  color={
+                    userProfile.profile.signup_source.toLowerCase() === "recipe"
+                      ? "success"
+                      : "secondary"
+                  }
+                  size="sm"
+                >
+                  {userProfile.profile.signup_source.toLowerCase() === "recipe"
+                    ? "Recipe"
+                    : "LastBrain"}
+                </Chip>
+              )}
               <Snippet color="default" size="sm" symbol="#">
                 {userId}
               </Snippet>
@@ -414,7 +430,7 @@ export function UserDetailPage({
                         <p className="font-medium mt-1">
                           {userProfile.created_at
                             ? new Date(
-                                userProfile.created_at,
+                                userProfile.created_at
                               ).toLocaleDateString("fr-FR", {
                                 year: "numeric",
                                 month: "long",
@@ -430,7 +446,7 @@ export function UserDetailPage({
                         <p className="font-medium mt-1">
                           {userProfile.last_sign_in_at
                             ? new Date(
-                                userProfile.last_sign_in_at,
+                                userProfile.last_sign_in_at
                               ).toLocaleDateString("fr-FR", {
                                 year: "numeric",
                                 month: "long",
@@ -542,7 +558,7 @@ export function UserDetailPage({
                         user_metadata: userProfile.raw_user_meta_data,
                       },
                       null,
-                      2,
+                      2
                     )}
                   </pre>
                 </div>

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

@@ -0,0 +1,262 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Card,
+  CardBody,
+  CardHeader,
+  Chip,
+  Input,
+  Pagination,
+  Select,
+  SelectItem,
+  Spinner,
+  Table,
+  TableBody,
+  TableCell,
+  TableColumn,
+  TableHeader,
+  TableRow,
+} from "@lastbrain/ui";
+import { Search, Users } from "lucide-react";
+
+interface User {
+  id: string;
+  owner_id: string;
+  email: string;
+  name: string;
+  signup_source: string;
+  created_at: string;
+}
+
+interface PaginationData {
+  page: number;
+  limit: number;
+  total: number;
+  totalPages: number;
+}
+
+export function UsersBySignupSourcePage() {
+  const [users, setUsers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [pagination, setPagination] = useState<PaginationData>({
+    page: 1,
+    limit: 25,
+    total: 0,
+    totalPages: 0,
+  });
+  const [source, setSource] = useState<string>(""); // '' for all, 'lastbrain', 'recipe'
+  const [searchQuery, setSearchQuery] = useState("");
+
+  useEffect(() => {
+    fetchUsers(pagination.page, source, searchQuery);
+  }, []);
+
+  const fetchUsers = async (
+    page: number,
+    selectedSource: string,
+    query: string
+  ) => {
+    try {
+      setLoading(true);
+
+      let url = `/api/admin/users-by-source?page=${page}&limit=25`;
+      if (selectedSource) {
+        url += `&source=${selectedSource}`;
+      }
+
+      const response = await fetch(url);
+
+      if (!response.ok) {
+        throw new Error("Erreur lors du chargement des utilisateurs");
+      }
+
+      const result = await response.json();
+
+      // Filter by search query if provided
+      let filteredUsers = result.data;
+      if (query) {
+        filteredUsers = filteredUsers.filter(
+          (user: User) =>
+            user.email.toLowerCase().includes(query.toLowerCase()) ||
+            user.name.toLowerCase().includes(query.toLowerCase())
+        );
+      }
+
+      setUsers(filteredUsers);
+      setPagination(result.pagination);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Erreur lors du chargement"
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSourceChange = (value: string) => {
+    setSource(value);
+    fetchUsers(1, value, searchQuery);
+  };
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const query = e.target.value;
+    setSearchQuery(query);
+    fetchUsers(1, source, query);
+  };
+
+  const handlePageChange = (page: number) => {
+    fetchUsers(page, source, searchQuery);
+  };
+
+  const getSourceColor = (src: string) => {
+    return src.toLowerCase() === "recipe" ? "success" : "secondary";
+  };
+
+  if (error) {
+    return (
+      <div className="p-6">
+        <Card className="border border-danger-200 bg-danger-50/50">
+          <CardBody>
+            <p className="text-danger-600">{error}</p>
+          </CardBody>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6 p-6">
+      {/* Header */}
+      <div className="flex items-center gap-2 mb-8">
+        <Users size={28} className="text-primary-600" />
+        <h1 className="text-3xl font-bold">
+          Utilisateurs par source d'inscription
+        </h1>
+      </div>
+
+      {/* Filters */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Input
+          placeholder="Rechercher par email ou nom..."
+          value={searchQuery}
+          onChange={handleSearch}
+          startContent={<Search size={16} />}
+          isClearable
+          onClear={() => {
+            setSearchQuery("");
+            fetchUsers(1, source, "");
+          }}
+        />
+
+        <Select
+          label="Filtrer par source"
+          selectedKeys={[source]}
+          onChange={(e) => handleSourceChange(e.target.value)}
+        >
+          <SelectItem key="">Toutes les sources</SelectItem>
+          <SelectItem key="lastbrain">LastBrain</SelectItem>
+          <SelectItem key="recipe">Recipe</SelectItem>
+        </Select>
+      </div>
+
+      {/* Results info */}
+      <div className="text-sm text-default-600">
+        Affichage de{" "}
+        <span className="font-semibold">
+          {(pagination.page - 1) * pagination.limit + 1}-
+          {Math.min(pagination.page * pagination.limit, pagination.total)}
+        </span>{" "}
+        sur <span className="font-semibold">{pagination.total}</span>{" "}
+        utilisateurs
+      </div>
+
+      {/* Users Table */}
+      <Card>
+        <CardHeader>
+          <h3 className="text-lg font-semibold">Liste des utilisateurs</h3>
+        </CardHeader>
+        <CardBody>
+          {loading ? (
+            <div className="flex justify-center py-8">
+              <Spinner size="lg" label="Chargement..." />
+            </div>
+          ) : (
+            <>
+              <Table aria-label="Tableau des utilisateurs">
+                <TableHeader>
+                  <TableColumn>Nom</TableColumn>
+                  <TableColumn>Email</TableColumn>
+                  <TableColumn>Source</TableColumn>
+                  <TableColumn>Date d'inscription</TableColumn>
+                </TableHeader>
+                <TableBody>
+                  {users.length > 0 ? (
+                    users.map((user) => (
+                      <TableRow key={user.id}>
+                        <TableCell>
+                          <span className="font-medium">{user.name}</span>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-sm text-default-600">
+                            {user.email}
+                          </span>
+                        </TableCell>
+                        <TableCell>
+                          <Chip
+                            size="sm"
+                            color={getSourceColor(user.signup_source)}
+                            variant="flat"
+                          >
+                            {user.signup_source.toLowerCase() === "recipe"
+                              ? "🍳 Recipe"
+                              : "🧠 LastBrain"}
+                          </Chip>
+                        </TableCell>
+                        <TableCell>
+                          <span className="text-sm text-default-500">
+                            {new Date(user.created_at).toLocaleDateString(
+                              "fr-FR",
+                              {
+                                year: "2-digit",
+                                month: "2-digit",
+                                day: "2-digit",
+                                hour: "2-digit",
+                                minute: "2-digit",
+                              }
+                            )}
+                          </span>
+                        </TableCell>
+                      </TableRow>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell colSpan={4} className="text-center py-8">
+                        <p className="text-default-500">
+                          Aucun utilisateur trouvé
+                        </p>
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+
+              {/* Pagination */}
+              {pagination.totalPages > 1 && (
+                <div className="flex justify-center mt-6">
+                  <Pagination
+                    total={pagination.totalPages}
+                    page={pagination.page}
+                    onChange={handlePageChange}
+                    showControls
+                  />
+                </div>
+              )}
+            </>
+          )}
+        </CardBody>
+      </Card>
+    </div>
+  );
+}

package/src/web/admin/users.tsx

@@ -117,7 +117,7 @@ export function AdminUsersPage() {
     (userId: string) => {
       router.push(`/admin/auth/users/${userId}`);
     },
-    [router],
+    [router]
   );
 
   const formatDate = (dateString: string) => {

package/src/web/auth/dashboard.tsx

@@ -196,7 +196,7 @@ export function DashboardPage() {
                 <p className="text-2xl font-bold text-secondary">
                   {Math.floor(
                     (Date.now() - new Date(userData.created_at).getTime()) /
-                      (1000 * 60 * 60 * 24),
+                      (1000 * 60 * 60 * 24)
                   )}
                 </p>
                 <p className="text-small text-default-500">Days active</p>

package/src/web/auth/folder.tsx

@@ -1,16 +1,9 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import {
-  Card,
-  CardBody,
-  CardHeader,
-  Spinner,
-  Chip,
-  Divider,
-  Avatar,
-} from "@lastbrain/ui";
+import { Card, CardBody, Spinner } from "@lastbrain/ui";
 import { FileManager } from "@lastbrain/ui";
+import { ImageGenerative } from "@lastbrain/module-ai";
 
 interface UserData {
   id: string;
@@ -80,11 +73,6 @@ export function FolderPage() {
     return null;
   }
 
-  const fullName =
-    userData.profile?.first_name && userData.profile?.last_name
-      ? `${userData.profile.first_name} ${userData.profile.last_name}`
-      : "User";
-
   return (
     <div className="pt-4 pb-12 max-w-8xl mx-auto px-4">
       <h1 className="text-3xl font-bold mb-8">Dossier</h1>
@@ -94,6 +82,8 @@ export function FolderPage() {
         basePath={userData.id}
         allowUpload={true}
         allowCreateFolder={true}
+        allowAIImageGeneration={true}
+        renderImageGenerator={(props) => <ImageGenerative {...props} />}
         className="min-h-[80vh]"
       />
     </div>