@lastbrain/app 2.0.31 → 2.0.35

package/src/templates/DefaultDoc.tsx

@@ -1,6 +1,7 @@
 // GENERATED FILE - DO NOT EDIT MANUALLY
 // This file is auto-generated from markdown files in docs/
 // Run 'pnpm sync:docs' to regenerate
+"use client";
 import React from "react";
 import { Card, CardBody, CardHeader, Snippet, Alert } from "@lastbrain/ui";
 import {
@@ -21,6 +22,211 @@ import {
 export function DefaultDocumentation() {
   return (
     <div className="space-y-6">
+      <Card className="bg-linear-to-r from-blue-50 to-indigo-50 dark:from-blue-950 dark:to-indigo-950 border-l-4 border-blue-500 sticky top-0 z-10">
+        <CardHeader>
+          <h2 className="text-2xl font-bold flex items-center gap-2">
+            <BookOpen size={24} className="text-blue-600 dark:text-blue-400" />
+            Sommaire de la Documentation
+          </h2>
+        </CardHeader>
+        <CardBody>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <a
+              href="#section-welcome"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <FileText
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                LastBrain
+              </span>
+            </a>
+            <a
+              href="#section-quickstart"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <Rocket
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                Démarrage rapide
+              </span>
+            </a>
+            <a
+              href="#section-architecture"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <Building2
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                Architecture
+              </span>
+            </a>
+            <a
+              href="#section-create-module"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <BookOpen
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                Documentation des modules
+              </span>
+            </a>
+            <a
+              href="#section-database"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <Database
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                Base de données
+              </span>
+            </a>
+            <a
+              href="#section-admin"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <User
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                Créer un Compte Administrateur
+              </span>
+            </a>
+            <a
+              href="#section-development"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <Rocket
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                Développement
+              </span>
+            </a>
+            <a
+              href="#section-routes"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <Shield
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                Routes Protégées
+              </span>
+            </a>
+            <a
+              href="#section-workflow"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <Zap
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                Workflow de Développement
+              </span>
+            </a>
+            <a
+              href="#section-ui"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <Palette
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                Interface utilisateur
+              </span>
+            </a>
+            <a
+              href="#section-storage"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <HardDrive
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                Système de Proxy Storage
+              </span>
+            </a>
+            <a
+              href="#section-realtime"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <Zap
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                Système Realtime
+              </span>
+            </a>
+            <a
+              href="#section-module-docs"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <FileText
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                Documenter ses modules
+              </span>
+            </a>
+            <a
+              href="#section-links"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <Link
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                Liens utiles & remerciements 🙏
+              </span>
+            </a>
+            <a
+              href="#section-modules"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <Package
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                Modules
+              </span>
+            </a>
+            <a
+              href="#section-i18n"
+              className="flex items-center gap-2 p-2 rounded hover:bg-blue-100 dark:hover:bg-blue-900 transition-colors group"
+            >
+              <FileText
+                size={16}
+                className="text-blue-600 dark:text-blue-400 shrink-0 group-hover:scale-110 transition-transform"
+              />
+              <span className="text-sm font-medium text-slate-700 dark:text-slate-300 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+                Système de traduction i18n
+              </span>
+            </a>
+          </div>
+        </CardBody>
+      </Card>
+
       <Card id="section-welcome" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
@@ -484,6 +690,145 @@ export function DefaultDocumentation() {
           <Snippet symbol="" hideSymbol className="text-sm mb-2">
             {`pnpm dev`}
           </Snippet>
+          <h3 className="text-lg font-semibold mb-2">
+            Écouter les webhooks Stripe (local)
+          </h3>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Pré-requis:
+          </p>
+          <div className="space-y-2">
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                Avoir installé la Stripe CLI: https://stripe.com/docs/stripe-cli
+              </span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                Avoir une clé test dans votre{" "}
+                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  .env.local
+                </code>
+                :{" "}
+                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  STRIPE_SECRET_KEY=sk_test_...
+                </code>
+              </span>
+            </div>
+          </div>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Endpoint local utilisé par la plateforme:
+          </p>
+          <div className="space-y-2">
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  POST /api/public/payment/stripe/webhook
+                </code>
+              </span>
+            </div>
+          </div>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            1. Connexion Stripe CLI
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            stripe login
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            2. Démarrez votre app en local (remplacez le port si besoin)
+          </p>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`pnpm dev`}
+          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            3. Écoutez les événements et transférez-les vers l'endpoint local
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            stripe listen --forward-to
+            http://localhost:3000/api/public/payment/stripe/webhook
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            La commande affiche un secret de signature sous la forme{" "}
+            <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+              whsec_...
+            </code>
+            .
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Exportez-le dans votre terminal pour la vérification des signatures:
+          </p>
+          <Snippet symbol="" hideSymbol className="text-sm mb-2">
+            {`export STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxxxxx`}
+          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            4. Déclencher des événements de test (optionnel)
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            # Paiement réussi
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            stripe trigger payment_intent.succeeded
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            # Checkout complété
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            stripe trigger checkout.session.completed
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            # Abonnement (création/mise à jour/suppression)
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            stripe trigger customer.subscription.created
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            stripe trigger customer.subscription.updated
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            stripe trigger customer.subscription.deleted
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Notes:
+          </p>
+          <div className="space-y-2">
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                L'endpoint est exposé dans les apps: voir{" "}
+                <a
+                  href="apps/lastbrain/app/api/public/payment/stripe/webhook/route.ts"
+                  className="text-blue-600 hover:underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  apps/lastbrain/app/api/public/payment/stripe/webhook/route.ts
+                </a>{" "}
+                et{" "}
+                <a
+                  href="apps/recipe/app/api/public/payment/stripe/webhook/route.ts"
+                  className="text-blue-600 hover:underline"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  apps/recipe/app/api/public/payment/stripe/webhook/route.ts
+                </a>
+                .
+              </span>
+            </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                En production (Vercel), créez un endpoint de webhook dans Stripe
+                et renseignez{" "}
+                <code className="text-sm bg-slate-100 dark:bg-slate-800 px-2 py-1 rounded">
+                  STRIPE_WEBHOOK_SECRET
+                </code>{" "}
+                dans les variables d'environnement du projet.
+              </span>
+            </div>
+          </div>
         </CardBody>
       </Card>
 
@@ -1012,7 +1357,7 @@ const proxyUrl = storagePathToProxyUrl("avatar/user_128_123456.webp");
       },
       {
         schema: "public",
-        table: "user_profiles",
+        table: "user_profil",
         event: "*",
         filter: "owner_id=eq.\${USER_ID}",
         broadcast: "user_profile_updated",
@@ -1171,7 +1516,7 @@ function MonComposant() {
       <Card id="section-module-docs" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
-            <BookOpen size={24} />
+            <FileText size={24} />
             Documenter ses modules
           </h2>
         </CardHeader>
@@ -1635,6 +1980,29 @@ export function DocUsageCustom() {
                   </a>
                 </CardBody>
               </Card>
+              <Card className="hover:shadow-lg transition-shadow border-l-4 border-l-purple-500">
+                <CardBody className="space-y-3">
+                  <div className="flex items-start justify-between">
+                    <h3 className="text-lg font-semibold">Audit Pro</h3>
+                    <span className="text-xs bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 px-2 py-1 rounded">
+                      PRO
+                    </span>
+                  </div>
+                  <p className="text-sm text-slate-600 dark:text-slate-400">
+                    Module LastBrain
+                  </p>
+                  <p className="text-xs text-slate-500 dark:text-slate-500">
+                    <strong>Pages:</strong> 3 publique(s)
+                  </p>
+
+                  <Snippet symbol="💻" hideSymbol className="text-sm">
+                    {`pnpm lastbrain add-module audit-pro`}
+                  </Snippet>
+                  <span className="text-xs text-slate-500 dark:text-slate-400 inline-flex items-center gap-1">
+                    🔒 Documentation privée
+                  </span>
+                </CardBody>
+              </Card>
               <Card className="hover:shadow-lg transition-shadow border-l-4 border-l-blue-500">
                 <CardBody className="space-y-3">
                   <div className="flex items-start justify-between">
@@ -1647,7 +2015,7 @@ export function DocUsageCustom() {
                     Module LastBrain
                   </p>
                   <p className="text-xs text-slate-500 dark:text-slate-500">
-                    <strong>Pages:</strong> 3 publique(s), 4 auth, 2 admin
+                    <strong>Pages:</strong> 5 publique(s), 3 auth, 2 admin
                   </p>
 
                   <Snippet symbol="💻" hideSymbol className="text-sm">
@@ -1675,7 +2043,7 @@ export function DocUsageCustom() {
                     Module LastBrain
                   </p>
                   <p className="text-xs text-slate-500 dark:text-slate-500">
-                    <strong>Pages:</strong> 3 auth, 2 admin
+                    <strong>Pages:</strong> 1 publique(s), 3 auth, 5 admin
                   </p>
 
                   <Snippet symbol="💻" hideSymbol className="text-sm">
@@ -1709,6 +2077,29 @@ export function DocUsageCustom() {
                   </span>
                 </CardBody>
               </Card>
+              <Card className="hover:shadow-lg transition-shadow border-l-4 border-l-purple-500">
+                <CardBody className="space-y-3">
+                  <div className="flex items-start justify-between">
+                    <h3 className="text-lg font-semibold">Contact Pro</h3>
+                    <span className="text-xs bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 px-2 py-1 rounded">
+                      PRO
+                    </span>
+                  </div>
+                  <p className="text-sm text-slate-600 dark:text-slate-400">
+                    Module LastBrain
+                  </p>
+                  <p className="text-xs text-slate-500 dark:text-slate-500">
+                    <strong>Pages:</strong> 1 publique(s), 2 admin
+                  </p>
+
+                  <Snippet symbol="💻" hideSymbol className="text-sm">
+                    {`pnpm lastbrain add-module contact-pro`}
+                  </Snippet>
+                  <span className="text-xs text-slate-500 dark:text-slate-400 inline-flex items-center gap-1">
+                    🔒 Documentation privée
+                  </span>
+                </CardBody>
+              </Card>
               <Card className="hover:shadow-lg transition-shadow border-l-4 border-l-purple-500">
                 <CardBody className="space-y-3">
                   <div className="flex items-start justify-between">
@@ -1861,7 +2252,7 @@ export function DocUsageCustom() {
                     Module LastBrain
                   </p>
                   <p className="text-xs text-slate-500 dark:text-slate-500">
-                    <strong>Pages:</strong> 2 auth
+                    <strong>Pages:</strong> 1 publique(s), 2 auth
                   </p>
 
                   <Snippet symbol="💻" hideSymbol className="text-sm">
@@ -1889,7 +2280,7 @@ export function DocUsageCustom() {
                     Module LastBrain
                   </p>
                   <p className="text-xs text-slate-500 dark:text-slate-500">
-                    <strong>Pages:</strong> 4 auth
+                    <strong>Pages:</strong> 5 auth
                   </p>
 
                   <Snippet symbol="💻" hideSymbol className="text-sm">

package/src/templates/DocPage.tsx

@@ -128,11 +128,16 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
         "default",
         "section-welcome",
         "section-quickstart",
+        "section-development",
+        "section-admin",
         "section-architecture",
         "section-create-module",
+        "section-routes",
+        "section-workflow",
         "section-database",
         "section-storage",
         "section-realtime",
+        "section-i18n",
         "section-ui",
         "section-module-docs",
         "section-links",
@@ -215,6 +220,13 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
       icon: Rocket,
       color: "default" as const,
     },
+    {
+      id: "section-development",
+      name: "Développement",
+      description: "",
+      icon: Rocket,
+      color: "default" as const,
+    },
     {
       id: "section-architecture",
       name: "Architecture",
@@ -222,6 +234,13 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
       icon: Building2,
       color: "default" as const,
     },
+    {
+      id: "section-admin",
+      name: "Administration",
+      description: "",
+      icon: Building2,
+      color: "default" as const,
+    },
     {
       id: "section-create-module",
       name: "Créer un module",
@@ -229,6 +248,20 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
       icon: Package,
       color: "default" as const,
     },
+    {
+      id: "section-routes",
+      name: "Routes & API",
+      description: "",
+      icon: Link,
+      color: "default" as const,
+    },
+    {
+      id: "section-workflow",
+      name: "Workflow",
+      description: "",
+      icon: RotateCcw,
+      color: "default" as const,
+    },
     {
       id: "section-database",
       name: "Base de données",
@@ -257,6 +290,13 @@ export function DocPage({ modules = [], defaultContent }: DocPageProps) {
       icon: Palette,
       color: "default" as const,
     },
+    {
+      id: "section-i18n",
+      name: "Internationalisation",
+      description: "",
+      icon: BookOpen,
+      color: "default" as const,
+    },
     {
       id: "section-module-docs",
       name: "Doc des modules",

package/src/templates/MigrationsGuidePage.tsx

@@ -1,5 +1,5 @@
+"use client";
 // GENERATED BY LASTBRAIN TEMPLATE (Migrations Guide)
-import React from "react";
 import { Card, Code, Divider, Chip } from "@lastbrain/ui";
 
 export function MigrationsGuidePage() {

package/src/templates/ModuleGuidePage.tsx

@@ -1,6 +1,7 @@
+"use client";
 // GENERATED BY LASTBRAIN TEMPLATE (Module Guide)
-import React from "react";
-import { Card, Code, Divider, Chip } from "@lastbrain/ui";
+import { Code } from "@lastbrain/ui";
+import { Card, Divider, Chip } from "@lastbrain/ui/ui-server";
 
 export function ModuleGuidePage() {
   return (

package/src/templates/SimpleHomePage.tsx

@@ -1,5 +1,5 @@
+"use client";
 // SIMPLE VERSION FOR DEBUGGING
-import React from "react";
 import NextLink from "next/link";
 import {
   Button,