@lastbrain/app 0.1.43 → 0.1.44

package/src/templates/DefaultDoc.tsx

@@ -15,6 +15,7 @@ import {
   Palette,
   HardDrive,
   Link,
+  Package,
 } from "lucide-react";
 
 export function DefaultDocumentation() {
@@ -32,17 +33,6 @@ export function DefaultDocumentation() {
             Framework modulaire pour créer rapidement des applications Next.js
             avec système de modules, authentification et base de données.
           </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            !
-            <a
-              href="https://img.shields.io/github/package-json/dependency-version/lastpublication/starter/next?label=Next.js&path=packages/app/package.json"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Next.js
-            </a>
-          </p>
           <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
             <strong>Require\</strong>*
           </p>
@@ -122,39 +112,40 @@ export function DefaultDocumentation() {
             </code>
             . Tous ces packages sont nécessaires pour le bon fonctionnement.
           </p>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`# 1. Lancer Docker Desktop`}
-          </Snippet>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`Attendre que Docker soit “Running”.`}
-          </Snippet>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`# 2. Installer Supabase CLI (si pas déjà installé)`}
-          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            # 1. Lancer Docker Desktop
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            Attendre que Docker soit “Running”.
+          </p>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            # 2. Installer Supabase CLI (si pas déjà installé)
+          </p>
           <Snippet symbol="" hideSymbol className="text-sm mb-2">
             {`brew install supabase/tap/supabase`}
           </Snippet>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`# 3. Créer une nouvelle application (utilise @latest pour la version la plus récente)`}
-          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            # 3. Créer une nouvelle application (utilise @latest pour la version
+            la plus récente)
+          </p>
           <Snippet symbol="" hideSymbol className="text-sm mb-2">
             {`pnpx @lastbrain/app@latest init mon-app`}
           </Snippet>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`# 4. Accéder au dossier`}
-          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            # 4. Accéder au dossier
+          </p>
           <Snippet symbol="" hideSymbol className="text-sm mb-2">
             {`cd mon-app`}
           </Snippet>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`# 5. Initialiser Supabase`}
-          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            # 5. Initialiser Supabase
+          </p>
           <Snippet symbol="" hideSymbol className="text-sm mb-2">
             {`pnpm db:init`}
           </Snippet>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`# 6. Démarrer l'application si pas déjà lancé port :3000 par default`}
-          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            # 6. Démarrer l'application si pas déjà lancé port :3000 par default
+          </p>
           <Snippet symbol="" hideSymbol className="text-sm mb-2">
             {`pnpm dev`}
           </Snippet>
@@ -240,33 +231,26 @@ export function DefaultDocumentation() {
               <span className="text-green-600">✅</span>
               <span>Générer les routes des modules sélectionnés</span>
             </div>
+            <div className="flex items-start gap-2">
+              <span className="text-green-600">✅</span>
+              <span>
+                Générer le .env.local avec les variables d'environnement
+                Supabase
+              </span>
+            </div>
           </div>
           <h3 className="text-lg font-semibold mb-2">
             Création du Compte Admin
           </h3>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`# Promouvoir votre compte en admin via Supabase`}
-          </Snippet>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`update auth.users`}
-          </Snippet>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`set raw_app_meta_data = jsonb_set(`}
-          </Snippet>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`  coalesce(raw_app_meta_data, '{}'::jsonb),`}
-          </Snippet>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`  '{roles}',`}
-          </Snippet>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`  '["admin"]'::jsonb`}
-          </Snippet>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`)`}
-          </Snippet>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`where email = 'votre@email.com';`}
+          <Snippet hideSymbol color="primary" className="text-sm mb-2">
+            <span>{`# Promouvoir votre compte en admin via Supabase`}</span>
+            <span>{`update auth.users`}</span>
+            <span>{`set raw_app_meta_data = jsonb_set(`}</span>
+            <span>{`  coalesce(raw_app_meta_data, '{}'::jsonb),`}</span>
+            <span>{`  '{roles}',`}</span>
+            <span>{`  '["admin"]'::jsonb`}</span>
+            <span>{`)`}</span>
+            <span>{`where email = 'votre@email.com';`}</span>
           </Snippet>
           <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
             Votre application est maintenant disponible sur{" "}
@@ -405,9 +389,9 @@ export function DefaultDocumentation() {
             {`pnpm db:migrations:sync`}
           </Snippet>
           <h4 className="font-medium mb-2">Créer une migration</h4>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`supabase migration new ma_migration`}
-          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            supabase migration new ma_migration
+          </p>
           <h3 className="text-lg font-semibold mb-2">Migrations des modules</h3>
           <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
             Les modules peuvent avoir leurs propres migrations dans{" "}
@@ -446,20 +430,13 @@ export function DefaultDocumentation() {
             ) ou via psql :
           </p>
           <Snippet hideSymbol color="primary" className="text-sm mb-2">
-            <span>{`update auth.users
-`}</span>
-            <span>{`set raw_app_meta_data = jsonb_set(
-`}</span>
-            <span>{`  coalesce(raw_app_meta_data, '{}'::jsonb),
-`}</span>
-            <span>{`  '{roles}',
-`}</span>
-            <span>{`  '["admin"]'::jsonb
-`}</span>
-            <span>{`)
-`}</span>
-            <span>{`where email = 'votre@email.com';
-`}</span>
+            <span>{`update auth.users`}</span>
+            <span>{`set raw_app_meta_data = jsonb_set(`}</span>
+            <span>{`  coalesce(raw_app_meta_data, '{}'::jsonb),`}</span>
+            <span>{`  '{roles}',`}</span>
+            <span>{`  '["admin"]'::jsonb`}</span>
+            <span>{`)`}</span>
+            <span>{`where email = 'votre@email.com';`}</span>
           </Snippet>
           <h3 className="text-lg font-semibold mb-2">
             3. Accéder à l'interface admin
@@ -592,9 +569,9 @@ export function DefaultDocumentation() {
           <h3 className="text-lg font-semibold mb-2">
             4. Appliquer les migrations
           </h3>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`supabase migration up`}
-          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            supabase migration up
+          </p>
           <h3 className="text-lg font-semibold mb-2">5. Tester</h3>
           <Snippet symbol="" hideSymbol className="text-sm mb-2">
             {`pnpm dev`}
@@ -658,15 +635,15 @@ export function DefaultDocumentation() {
           <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
             <strong>❌ URL Supabase classique (longue)</strong>
           </p>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`https://xxx.supabase.co/storage/v1/object/public/avatar/user_128_123456.webp`}
-          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            https://xxx.supabase.co/storage/v1/object/public/avatar/user_128_123456.webp
+          </p>
           <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
             <strong>✅ URL Proxy (propre)</strong>
           </p>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`/api/storage/avatar/user_128_123456.webp`}
-          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            /api/storage/avatar/user_128_123456.webp
+          </p>
           <h3 className="text-lg font-semibold mb-2">
             Configuration des Buckets
           </h3>
@@ -674,17 +651,17 @@ export function DefaultDocumentation() {
           <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
             Photos de profil et avatars • 10MB max • Types: JPEG, PNG, WebP, GIF
           </p>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`/api/storage/avatar/user_128_123456.webp`}
-          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            /api/storage/avatar/user_128_123456.webp
+          </p>
           <h4 className="font-medium mb-2">🔒 app (Privé)</h4>
           <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
             Fichiers privés des utilisateurs • 100MB max • Authentification
             requise
           </p>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`/api/storage/app/user-id/documents/file.pdf`}
-          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            /api/storage/app/user-id/documents/file.pdf
+          </p>
           <h3 className="text-lg font-semibold mb-2">
             Utilisation dans le code
           </h3>
@@ -975,9 +952,9 @@ function MonComposant() {
           <Snippet symbol="" hideSymbol className="text-sm mb-2">
             {`pnpm update:module-docs`}
           </Snippet>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`# ou pour un module spécifique`}
-          </Snippet>
+          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+            # ou pour un module spécifique
+          </p>
           <Snippet symbol="" hideSymbol className="text-sm mb-2">
             {`pnpm update:module-docs auth`}
           </Snippet>
@@ -1023,7 +1000,7 @@ export function DocUsageCustom() {
     <div className="space-y-6">
       <Alert color="primary" className="mb-6">
         <div className="flex items-start gap-2">
-          <Lightbulb size={20} className="mt-0.5 flex-shrink-0" />
+          <Lightbulb size={20} className="mt-0.5 shrink-0" />
           <div>
             <p className="font-semibold">Introduction</p>
             <p className="text-sm mt-1">
@@ -1354,413 +1331,290 @@ export function DocUsageCustom() {
       <Card id="section-modules" className="scroll-mt-32">
         <CardHeader>
           <h2 className="text-2xl font-semibold flex items-center gap-2">
-            <FileText size={24} />
+            <Package size={24} />
             Modules
           </h2>
         </CardHeader>
-        <CardBody className="space-y-4">
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
+        <CardBody className="space-y-6">
+          <p className="text-slate-600 dark:text-slate-400">
             Les modules LastBrain permettent d'ajouter des fonctionnalités
             complètes à votre application de manière modulaire.
           </p>
-          <h3 className="text-lg font-semibold mb-2">Modules Disponibles</h3>
-          <h4 className="font-medium mb-2">
-            [module-ai](../packages/module-ai/README.md)
-          </h4>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            !
-            <a
-              href="https://img.shields.io/npm/v/@lastbrain/module-ai?label=%40lastbrain%2Fmodule-ai"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              npm version
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Pages</strong>: 1 auth, 1 admin
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Tables</strong>: user_token_ledger, user_prompts
-          </p>
-          <h4 className="font-medium mb-2">Installation du module ai</h4>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`pnpm lastbrain add-module ai`}
-          </Snippet>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <a
-              href="../packages/module-ai/README.md"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              📖 Documentation complète →
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
-          <h4 className="font-medium mb-2">
-            [module-auth](../packages/module-auth/README.md)
-          </h4>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            !
-            <a
-              href="https://img.shields.io/npm/v/@lastbrain/module-auth?label=%40lastbrain%2Fmodule-auth"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              npm version
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Pages</strong>: 3 publique(s), 4 auth, 2 admin
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Tables</strong>: user_profil, user_address,
-            user_notifications
-          </p>
-          <h4 className="font-medium mb-2">Installation du module auth</h4>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`pnpm lastbrain add-module auth`}
-          </Snippet>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <a
-              href="../packages/module-auth/README.md"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              📖 Documentation complète →
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
-          <h4 className="font-medium mb-2">
-            [module-billing](../packages/module-billing/README.md)
-          </h4>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            !
-            <a
-              href="https://img.shields.io/npm/v/@lastbrain/module-billing?label=%40lastbrain%2Fmodule-billing"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              npm version
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Pages</strong>: 3 auth, 2 admin
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Tables</strong>: billing_invoice, billing_invoice_line,
-            billing_invoice_payment, billing_invoice_log,
-            billing_invoice_counter, billing_settings
-          </p>
-          <h4 className="font-medium mb-2">Installation du module billing</h4>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`pnpm lastbrain add-module billing`}
-          </Snippet>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <a
-              href="../packages/module-billing/README.md"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              📖 Documentation complète →
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
-          <h4 className="font-medium mb-2">
-            [module-core-cart](../packages/module-core-cart/README.md)
-          </h4>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            !
-            <a
-              href="https://img.shields.io/npm/v/@lastbrain/module-core-cart?label=%40lastbrain%2Fmodule-core-cart"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              npm version
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Pages</strong>: 2 auth, 1 admin
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Tables</strong>: carts, cart_items
-          </p>
-          <h4 className="font-medium mb-2">Installation du module core-cart</h4>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`pnpm lastbrain add-module core-cart`}
-          </Snippet>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <a
-              href="../packages/module-core-cart/README.md"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              📖 Documentation complète →
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
-          <h4 className="font-medium mb-2">
-            [module-core-commerce](../packages/module-core-commerce/README.md)
-          </h4>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            !
-            <a
-              href="https://img.shields.io/npm/v/@lastbrain/module-core-commerce?label=%40lastbrain%2Fmodule-core-commerce"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              npm version
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Tables</strong>: commerce_events, commerce_stats_daily
-          </p>
-          <h4 className="font-medium mb-2">
-            Installation du module core-commerce
-          </h4>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`pnpm lastbrain add-module core-commerce`}
-          </Snippet>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <a
-              href="../packages/module-core-commerce/README.md"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              📖 Documentation complète →
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
-          <h4 className="font-medium mb-2">
-            [module-core-order](../packages/module-core-order/README.md)
-          </h4>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            !
-            <a
-              href="https://img.shields.io/npm/v/@lastbrain/module-core-order?label=%40lastbrain%2Fmodule-core-order"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              npm version
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Pages</strong>: 2 auth
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Tables</strong>: orders, order_items, order_status_logs
-          </p>
-          <h4 className="font-medium mb-2">
-            Installation du module core-order
-          </h4>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`pnpm lastbrain add-module core-order`}
-          </Snippet>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <a
-              href="../packages/module-core-order/README.md"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              📖 Documentation complète →
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
-          <h4 className="font-medium mb-2">
-            [module-core-payment](../packages/module-core-payment/README.md)
-          </h4>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            !
-            <a
-              href="https://img.shields.io/npm/v/@lastbrain/module-core-payment?label=%40lastbrain%2Fmodule-core-payment"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              npm version
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Pages</strong>: 1 admin
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Tables</strong>: payments
-          </p>
-          <h4 className="font-medium mb-2">
-            Installation du module core-payment
-          </h4>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`pnpm lastbrain add-module core-payment`}
-          </Snippet>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <a
-              href="../packages/module-core-payment/README.md"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              📖 Documentation complète →
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
-          <h4 className="font-medium mb-2">
-            [module-core-product](../packages/module-core-product/README.md)
-          </h4>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            !
-            <a
-              href="https://img.shields.io/npm/v/@lastbrain/module-core-product?label=%40lastbrain%2Fmodule-core-product"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              npm version
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Pages</strong>: 2 publique(s)
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Tables</strong>: products, product_variants, product_stock,
-            product_images, product_seo, product_variant_families,
-            product_variant_options, product_delivery, product_additional_info,
-            product_stats
-          </p>
-          <h4 className="font-medium mb-2">
-            Installation du module core-product
-          </h4>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`pnpm lastbrain add-module core-product`}
-          </Snippet>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <a
-              href="../packages/module-core-product/README.md"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              📖 Documentation complète →
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
-          <h4 className="font-medium mb-2">
-            [module-legal](../packages/module-legal/README.md)
-          </h4>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            !
-            <a
-              href="https://img.shields.io/npm/v/@lastbrain/module-legal?label=%40lastbrain%2Fmodule-legal"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              npm version
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Pages</strong>: 4 publique(s), 2 admin
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Tables</strong>: legal_settings, legal_pages
-          </p>
-          <h4 className="font-medium mb-2">Installation du module legal</h4>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`pnpm lastbrain add-module legal`}
-          </Snippet>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <a
-              href="../packages/module-legal/README.md"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              📖 Documentation complète →
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
-          <h4 className="font-medium mb-2">
-            [module-recipes](../packages/module-recipes/README.md)
-          </h4>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            !
-            <a
-              href="https://img.shields.io/npm/v/@lastbrain/module-recipes?label=%40lastbrain%2Fmodule-recipes"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              npm version
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Pages</strong>: 4 auth
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Tables</strong>: recipes, recipe_favorites, recipe_comments,
-            recipe_image_queue, recipe_embeddings
-          </p>
-          <h4 className="font-medium mb-2">Installation du module recipes</h4>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`pnpm lastbrain add-module recipes`}
-          </Snippet>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <a
-              href="../packages/module-recipes/README.md"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              📖 Documentation complète →
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
-          <h4 className="font-medium mb-2">
-            [module-tasks](../packages/module-tasks/README.md)
-          </h4>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            !
-            <a
-              href="https://img.shields.io/npm/v/@lastbrain/module-tasks?label=%40lastbrain%2Fmodule-tasks"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              npm version
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Pages</strong>: 2 auth, 1 admin
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <strong>Tables</strong>: tasks, tasks_logs
-          </p>
-          <h4 className="font-medium mb-2">Installation du module tasks</h4>
-          <Snippet symbol="" hideSymbol className="text-sm mb-2">
-            {`pnpm lastbrain add-module tasks`}
-          </Snippet>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">
-            <a
-              href="../packages/module-tasks/README.md"
-              className="text-blue-600 hover:underline"
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              📖 Documentation complète →
-            </a>
-          </p>
-          <p className="text-sm text-slate-600 dark:text-slate-400 mb-2">---</p>
+          <div>
+            <h3 className="text-xl font-semibold mb-4">Modules Disponibles</h3>
+            <div className="grid grid-cols-1 gap-4">
+              <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">
+                    <h3 className="text-lg font-semibold">Ai</h3>
+                    <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
+                      FREE
+                    </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 auth, 1 admin
+                  </p>
+
+                  <Snippet symbol="💻" hideSymbol className="text-sm">
+                    {`pnpm lastbrain add-module ai`}
+                  </Snippet>
+                  <a
+                    href="https://github.com/Lastbrain-labs/lb-starter/tree/main/packages/module-ai"
+                    className="text-sm text-blue-600 dark:text-blue-400 hover:underline inline-flex items-center gap-1"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    📖 Documentation →
+                  </a>
+                </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">
+                    <h3 className="text-lg font-semibold">Auth</h3>
+                    <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
+                      FREE
+                    </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), 4 auth, 2 admin
+                  </p>
+
+                  <Snippet symbol="💻" hideSymbol className="text-sm">
+                    {`pnpm lastbrain add-module auth`}
+                  </Snippet>
+                  <a
+                    href="https://github.com/Lastbrain-labs/lb-starter/tree/main/packages/module-auth"
+                    className="text-sm text-blue-600 dark:text-blue-400 hover:underline inline-flex items-center gap-1"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    📖 Documentation →
+                  </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">Billing 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 auth, 2 admin
+                  </p>
+
+                  <Snippet symbol="💻" hideSymbol className="text-sm">
+                    {`pnpm lastbrain add-module billing-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">
+                    <h3 className="text-lg font-semibold">Core Cart 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> 2 auth, 1 admin
+                  </p>
+
+                  <Snippet symbol="💻" hideSymbol className="text-sm">
+                    {`pnpm lastbrain add-module core-cart-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">
+                    <h3 className="text-lg font-semibold">Core Commerce 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>
+
+                  <Snippet symbol="💻" hideSymbol className="text-sm">
+                    {`pnpm lastbrain add-module core-commerce-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">
+                    <h3 className="text-lg font-semibold">Core Order 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> 2 auth
+                  </p>
+
+                  <Snippet symbol="💻" hideSymbol className="text-sm">
+                    {`pnpm lastbrain add-module core-order-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">
+                    <h3 className="text-lg font-semibold">Core Payment 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 admin
+                  </p>
+
+                  <Snippet symbol="💻" hideSymbol className="text-sm">
+                    {`pnpm lastbrain add-module core-payment-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">
+                    <h3 className="text-lg font-semibold">Core Product 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> 2 publique(s)
+                  </p>
+
+                  <Snippet symbol="💻" hideSymbol className="text-sm">
+                    {`pnpm lastbrain add-module core-product-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">
+                    <h3 className="text-lg font-semibold">Legal</h3>
+                    <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
+                      FREE
+                    </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> 4 publique(s), 2 admin
+                  </p>
+
+                  <Snippet symbol="💻" hideSymbol className="text-sm">
+                    {`pnpm lastbrain add-module legal`}
+                  </Snippet>
+                  <a
+                    href="https://github.com/Lastbrain-labs/lb-starter/tree/main/packages/module-legal"
+                    className="text-sm text-blue-600 dark:text-blue-400 hover:underline inline-flex items-center gap-1"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    📖 Documentation →
+                  </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">Recipes 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> 4 auth
+                  </p>
+
+                  <Snippet symbol="💻" hideSymbol className="text-sm">
+                    {`pnpm lastbrain add-module recipes-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">
+                    <h3 className="text-lg font-semibold">Tasks</h3>
+                    <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 px-2 py-1 rounded">
+                      FREE
+                    </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> 2 auth, 1 admin
+                  </p>
+
+                  <Snippet symbol="💻" hideSymbol className="text-sm">
+                    {`pnpm lastbrain add-module nom-du-module`}
+                  </Snippet>
+                  <a
+                    href="https://github.com/Lastbrain-labs/lb-starter/tree/main/packages/module-tasks"
+                    className="text-sm text-blue-600 dark:text-blue-400 hover:underline inline-flex items-center gap-1"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    📖 Documentation →
+                  </a>
+                </CardBody>
+              </Card>
+            </div>
+          </div>
           <h3 className="text-lg font-semibold mb-2">Commandes</h3>
           <h4 className="font-medium mb-2">Installer un module</h4>
           <Snippet symbol="" hideSymbol className="text-sm mb-2">