@lastbrain/module-auth 0.1.22 → 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>

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/public/SignUpPage.tsx

@@ -33,7 +33,7 @@ function SignUpForm() {
   const [success, setSuccess] = useState<string | null>(null);
 
   // Récupérer le paramètre redirect
-  const redirectUrl = searchParams.get("redirect");
+  const redirectUrl = searchParams?.get("redirect") || "";
 
   const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
@@ -53,43 +53,34 @@ function SignUpForm() {
     setLoading(true);
 
     try {
-      const { data, error: signUpError } =
-        await supabaseBrowserClient.auth.signUp({
+      // Appeler la nouvelle route API signup (signupSource sera déterminé côté serveur via VERCEL_URL)
+      const response = await fetch("/api/auth/signup", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
           email,
           password,
-          options: {
-            emailRedirectTo: `${window.location.origin}/api/auth/callback${
-              redirectUrl ? `?next=${encodeURIComponent(redirectUrl)}` : ""
-            }`,
-            data: {
-              full_name: fullName,
-            },
-          },
-        });
+          fullName,
+        }),
+      });
+
+      const result = await response.json();
 
-      if (signUpError) {
-        setError(signUpError.message);
+      if (!response.ok) {
+        setError(result.error || "Erreur lors de l'inscription");
         return;
       }
 
       // Si la confirmation par email est requise
-      if (data.user && !data.session) {
+      if (result.data.user && !result.data.session) {
         setSuccess(
           "Compte créé avec succès ! Veuillez vérifier votre email pour confirmer votre compte."
         );
         return;
       }
 
-      // Si l'utilisateur est directement connecté (confirmation email désactivée)
-      if (data.session) {
-        if (redirectUrl) {
-          window.location.href = redirectUrl;
-        } else {
-          window.location.href = "/auth/dashboard";
-        }
-        return;
-      }
-
       setSuccess("Compte créé. Vous pouvez désormais vous connecter.");
       setTimeout(() => {
         if (redirectUrl) {

package/supabase/migrations/20251112000000_user_init.sql

@@ -177,4 +177,21 @@ CREATE TRIGGER set_user_notifications_updated_at
 -- =====================================================
 -- Enable Realtime for user_notifications
 -- =====================================================
-ALTER PUBLICATION supabase_realtime ADD TABLE public.user_notifications;
+ALTER PUBLICATION supabase_realtime ADD TABLE public.user_notifications;
+
+-- Add signup_source to user_profil table
+-- Track where users signed up from (e.g., 'lastbrain', 'recipe', etc.)
+
+-- Add the column
+ALTER TABLE public.user_profil 
+ADD COLUMN IF NOT EXISTS signup_source TEXT DEFAULT 'lastbrain';
+
+
+
+-- Create an index for stats queries
+CREATE INDEX IF NOT EXISTS idx_user_profil_signup_source 
+ON public.user_profil(signup_source);
+
+-- Create an index for date range queries
+CREATE INDEX IF NOT EXISTS idx_user_profil_created_at_source 
+ON public.user_profil(signup_source, created_at DESC);