@atlashub/smartstack-cli 1.5.1 → 1.5.3

package/templates/commands/documentation/templates.md

@@ -1,432 +1,432 @@
-# Templates de Documentation
-
-## Template User Module
-
-```tsx
-// web/smartstack-web/src/pages/docs/user/{context}/{ModuleName}DocPage.tsx
-
-import { Link } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { ArrowRight, ChevronRight, CheckCircle, AlertTriangle } from 'lucide-react';
-
-// MOCK DATA - Données fictives pour illustrer l'interface
-const mockData = {
-  items: [
-    { id: 1, name: 'Item 1', status: 'active', value: 125 },
-    { id: 2, name: 'Item 2', status: 'pending', value: 89 },
-  ],
-  stats: { total: 256, active: 180, pending: 52, warning: 24 },
-};
-
-export function {ModuleName}DocPage() {
-  const { t } = useTranslation('docs');
-
-  return (
-    <div className="space-y-8">
-      {/* 1. BREADCRUMB */}
-      <div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
-        <Link to="/docs" className="hover:text-[var(--color-primary-600)]">
-          {t('breadcrumb.documentation')}
-        </Link>
-        <span>/</span>
-        <Link to="/docs/user" className="hover:text-[var(--color-primary-600)]">
-          {t('breadcrumb.user')}
-        </Link>
-        <span>/</span>
-        <span>{t('breadcrumb.moduleName')}</span>
-      </div>
-
-      {/* 2. HEADER */}
-      <div>
-        <h1 className="text-3xl font-bold mb-4 flex items-center gap-3">
-          <IconName className="w-8 h-8 text-[var(--color-primary-600)]" />
-          {t('module.moduleName.title')}
-        </h1>
-        <p className="text-lg text-[var(--text-secondary)]">
-          {t('module.moduleName.subtitle')}
-        </p>
-      </div>
-
-      {/* 3. TABLE DES MATIÈRES */}
-      <div className="card p-4">
-        <h2 className="font-semibold mb-3">{t('common.tableOfContents')}</h2>
-        <nav className="grid grid-cols-2 md:grid-cols-3 gap-2">
-          {['introduction', 'access', 'overview', 'features', 'faq', 'api'].map((section) => (
-            <a key={section} href={`#${section}`} className="flex items-center gap-2 p-2 rounded hover:bg-[var(--bg-secondary)]">
-              <ChevronRight className="w-4 h-4 text-[var(--color-primary-600)]" />
-              {t(`module.moduleName.sections.${section}.title`)}
-            </a>
-          ))}
-        </nav>
-      </div>
-
-      {/* 4. SECTIONS NUMÉROTÉES */}
-      <section id="introduction" className="scroll-mt-4">
-        <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
-          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold">1</span>
-          {t('module.moduleName.sections.introduction.title')}
-        </h2>
-        <div className="card p-6">
-          {/* Contenu de la section */}
-        </div>
-      </section>
-
-      {/* 5. MAQUETTE UI AVEC MOCK DATA */}
-      <section id="overview" className="scroll-mt-4">
-        <div className="card p-6">
-          <div className="border-2 border-dashed border-[var(--border-color)] rounded-lg p-4">
-            <div className="text-xs text-[var(--text-tertiary)] mb-4 text-center">
-              {t('common.mockupPreview')}
-            </div>
-            {/* Stats Cards */}
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-              <div className="p-4 rounded-lg bg-[var(--bg-secondary)] text-center">
-                <div className="text-2xl font-bold text-[var(--color-primary-600)]">{mockData.stats.total}</div>
-                <div className="text-sm text-[var(--text-secondary)]">{t('common.total')}</div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* 6. FAQ */}
-      <section id="faq" className="scroll-mt-4">
-        <div className="space-y-4">
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="card p-4">
-              <h3 className="font-medium mb-2">{t(`module.moduleName.faq.q${i}.question`)}</h3>
-              <p className="text-sm text-[var(--text-secondary)]">{t(`module.moduleName.faq.q${i}.answer`)}</p>
-            </div>
-          ))}
-        </div>
-      </section>
-
-      {/* 7. NAVIGATION FOOTER */}
-      <div className="flex justify-between pt-6 border-t border-[var(--border-color)]">
-        <Link to="/docs/user/previous" className="flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--color-primary-600)]">
-          <ArrowRight className="w-4 h-4 rotate-180" />
-          {t('nav.previous')}
-        </Link>
-        <Link to="/docs/user/next" className="flex items-center gap-2 text-[var(--color-primary-600)]">
-          {t('nav.next')}
-          <ArrowRight className="w-4 h-4" />
-        </Link>
-      </div>
-    </div>
-  );
-}
-```
-
-## Template Developer Tool
-
-```tsx
-// web/smartstack-web/src/pages/docs/developer/tools/{ToolName}Page.tsx
-
-import { Link } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { Terminal, CheckCircle, Copy, ExternalLink } from 'lucide-react';
-import { useState } from 'react';
-
-function CodeBlock({ code, language = 'bash' }: { code: string; language?: string }) {
-  const [copied, setCopied] = useState(false);
-  const handleCopy = () => {
-    navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  return (
-    <div className="relative group">
-      <pre className="bg-[var(--bg-tertiary)] p-4 rounded-lg overflow-x-auto text-sm font-mono">
-        <code>{code}</code>
-      </pre>
-      <button onClick={handleCopy} className="absolute top-2 right-2 p-2 rounded bg-[var(--bg-secondary)] opacity-0 group-hover:opacity-100">
-        {copied ? <CheckCircle className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
-      </button>
-    </div>
-  );
-}
-
-export function {ToolName}Page() {
-  const { t } = useTranslation('docs');
-
-  return (
-    <div className="space-y-8">
-      {/* Breadcrumb */}
-      <div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
-        <Link to="/docs">Documentation</Link>
-        <span>/</span>
-        <Link to="/docs/developer">Developer</Link>
-        <span>/</span>
-        <Link to="/docs/developer/tools">Tools</Link>
-        <span>/</span>
-        <span>{t('developer.tools.toolName.title')}</span>
-      </div>
-
-      {/* Header avec badges */}
-      <div>
-        <h1 className="text-3xl font-bold mb-4 flex items-center gap-3">
-          <Terminal className="w-8 h-8 text-[var(--color-primary-600)]" />
-          {t('developer.tools.toolName.title')}
-        </h1>
-        <div className="flex gap-2 mt-4">
-          <span className="px-3 py-1 rounded-full bg-green-500/10 text-green-600 text-sm">Gratuit</span>
-          <span className="px-3 py-1 rounded-full bg-blue-500/10 text-blue-600 text-sm">.NET</span>
-        </div>
-      </div>
-
-      {/* Sections: Prérequis, Installation, Configuration, Usage, CI/CD */}
-      <section id="installation">
-        <h2 className="text-xl font-semibold mb-4">Installation</h2>
-        <CodeBlock code="dotnet add package ToolName" />
-      </section>
-
-      {/* Liens externes */}
-      <div className="card p-4 bg-blue-500/5 border border-blue-500/20">
-        <div className="flex items-center gap-2 mb-2">
-          <ExternalLink className="w-4 h-4 text-blue-600" />
-          <span className="font-medium">Ressources</span>
-        </div>
-        <div className="flex gap-4">
-          <a href="#" className="text-blue-600 hover:underline text-sm">Documentation officielle</a>
-          <a href="#" className="text-blue-600 hover:underline text-sm">GitHub</a>
-        </div>
-      </div>
-    </div>
-  );
-}
-```
-
-## Template Database Schema (avec MCD en HTML)
-
-```tsx
-// web/smartstack-web/src/pages/docs/developer/database/{SchemaName}SchemaPage.tsx
-
-import { Link } from 'react-router-dom';
-import { Database, Table, Key, Link2, ArrowRight } from 'lucide-react';
-
-const schemaData = {
-  name: 'schema_name',
-  tables: [
-    {
-      name: 'TableName',
-      columns: [
-        { name: 'Id', type: 'UNIQUEIDENTIFIER', isPK: true, isFK: false, required: true, description: 'Identifiant unique' },
-        { name: 'ForeignId', type: 'UNIQUEIDENTIFIER', isPK: false, isFK: true, fkTable: 'OtherTable', required: true, description: 'Référence vers OtherTable' },
-      ],
-      relations: [
-        { type: '1:N', target: 'ChildTable', description: 'Une entrée a plusieurs enfants' },
-      ]
-    },
-  ]
-};
-
-// Composant pour afficher une table dans le diagramme MCD
-function McdTableCard({ table, schema }: { table: typeof schemaData.tables[0]; schema: string }) {
-  return (
-    <div className="card p-4 min-w-[200px]">
-      <div className="flex items-center gap-2 mb-3 pb-2 border-b border-[var(--border-color)]">
-        <Table className="w-4 h-4 text-[var(--color-primary-600)]" />
-        <span className="font-semibold">{schema}.{table.name}</span>
-      </div>
-      <div className="space-y-1 text-sm">
-        {table.columns.map((col) => (
-          <div key={col.name} className="flex items-center gap-2">
-            {col.isPK && <Key className="w-3 h-3 text-amber-500" />}
-            {col.isFK && <Link2 className="w-3 h-3 text-blue-500" />}
-            {!col.isPK && !col.isFK && <span className="w-3" />}
-            <span className={`font-mono text-xs ${col.isPK ? 'font-bold' : ''}`}>
-              {col.name}
-            </span>
-            {col.required && <span className="text-red-500">*</span>}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}
-
-// Composant pour afficher une relation entre tables
-function McdRelation({ from, to, type, description }: { from: string; to: string; type: string; description: string }) {
-  return (
-    <div className="flex items-center gap-4 py-2">
-      <span className="font-mono text-sm bg-[var(--bg-secondary)] px-2 py-1 rounded">{from}</span>
-      <div className="flex items-center gap-2">
-        <div className="w-8 h-0.5 bg-[var(--border-color)]" />
-        <span className="px-2 py-0.5 rounded bg-purple-500/10 text-purple-600 text-xs font-medium">{type}</span>
-        <ArrowRight className="w-4 h-4 text-[var(--text-tertiary)]" />
-      </div>
-      <span className="font-mono text-sm bg-[var(--bg-secondary)] px-2 py-1 rounded">{to}</span>
-      <span className="text-sm text-[var(--text-secondary)]">{description}</span>
-    </div>
-  );
-}
-
-export function {SchemaName}SchemaPage() {
-  return (
-    <div className="space-y-8">
-      {/* Section MCD - Diagramme HTML */}
-      <section id="mcd">
-        <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
-          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold">1</span>
-          Modèle Conceptuel de Données (MCD)
-        </h2>
-        <div className="card p-6">
-          {/* Diagramme visuel des tables */}
-          <div className="flex flex-wrap gap-6 justify-center mb-8">
-            {schemaData.tables.map((table) => (
-              <McdTableCard key={table.name} table={table} schema={schemaData.name} />
-            ))}
-          </div>
-
-          {/* Relations entre tables */}
-          <div className="border-t border-[var(--border-color)] pt-4">
-            <h4 className="font-medium mb-3 text-sm text-[var(--text-secondary)]">Relations</h4>
-            <div className="space-y-2">
-              {schemaData.tables.flatMap((table) =>
-                table.relations.map((rel, idx) => (
-                  <McdRelation
-                    key={`${table.name}-${idx}`}
-                    from={table.name}
-                    to={rel.target}
-                    type={rel.type}
-                    description={rel.description}
-                  />
-                ))
-              )}
-            </div>
-          </div>
-
-          {/* Légende */}
-          <div className="mt-6 pt-4 border-t border-[var(--border-color)] flex flex-wrap gap-4 text-xs text-[var(--text-secondary)]">
-            <div className="flex items-center gap-1">
-              <Key className="w-3 h-3 text-amber-500" /> PK = Clé primaire
-            </div>
-            <div className="flex items-center gap-1">
-              <Link2 className="w-3 h-3 text-blue-500" /> FK = Clé étrangère
-            </div>
-            <div className="flex items-center gap-1">
-              <span className="text-red-500">*</span> = Obligatoire
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* Section Tables détaillées */}
-      <section id="tables">
-        <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
-          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold">2</span>
-          Tables détaillées
-        </h2>
-        {schemaData.tables.map((table) => (
-          <div key={table.name} className="card p-6 mb-4">
-            <h3 className="font-semibold flex items-center gap-2 mb-4">
-              <Table className="w-5 h-5 text-[var(--color-primary-600)]" />
-              {schemaData.name}.{table.name}
-            </h3>
-            <div className="overflow-x-auto">
-              <table className="w-full text-sm">
-                <thead>
-                  <tr className="bg-[var(--bg-secondary)]">
-                    <th className="text-left py-2 px-3 rounded-tl-lg">Colonne</th>
-                    <th className="text-left py-2 px-3">Type SQL</th>
-                    <th className="text-left py-2 px-3">Clés</th>
-                    <th className="text-left py-2 px-3 rounded-tr-lg">Description</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {table.columns.map((col, idx) => (
-                    <tr key={col.name} className={idx % 2 === 1 ? 'bg-[var(--bg-secondary)]/50' : ''}>
-                      <td className="py-2 px-3 font-mono text-sm">
-                        {col.name}
-                        {col.required && <span className="text-red-500 ml-1">*</span>}
-                      </td>
-                      <td className="py-2 px-3 text-[var(--text-secondary)]">{col.type}</td>
-                      <td className="py-2 px-3">
-                        {col.isPK && (
-                          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-amber-500/10 text-amber-600 text-xs mr-1">
-                            <Key className="w-3 h-3" /> PK
-                          </span>
-                        )}
-                        {col.isFK && (
-                          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-blue-500/10 text-blue-600 text-xs">
-                            <Link2 className="w-3 h-3" /> FK
-                          </span>
-                        )}
-                      </td>
-                      <td className="py-2 px-3 text-[var(--text-secondary)]">{col.description}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-
-            {/* Relations de cette table */}
-            {table.relations.length > 0 && (
-              <div className="mt-4 pt-4 border-t border-[var(--border-color)]">
-                <h4 className="font-medium mb-2 text-sm">Relations</h4>
-                <div className="flex flex-wrap gap-2">
-                  {table.relations.map((rel, idx) => (
-                    <div key={idx} className="flex items-center gap-2 px-3 py-1 rounded-lg bg-[var(--bg-secondary)] text-sm">
-                      <span className="font-mono text-[var(--color-primary-600)]">{rel.type}</span>
-                      <ArrowRight className="w-4 h-4 text-[var(--text-tertiary)]" />
-                      <span>{rel.target}</span>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-          </div>
-        ))}
-      </section>
-    </div>
-  );
-}
-```
-
-## Patterns Réutilisables
-
-### Stats Cards
-```tsx
-<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-  <div className="p-4 rounded-lg bg-[var(--bg-secondary)] text-center">
-    <div className="text-2xl font-bold text-[var(--color-primary-600)]">{value}</div>
-    <div className="text-sm text-[var(--text-secondary)]">{label}</div>
-  </div>
-</div>
-```
-
-### Badges de statut
-```tsx
-const statusColors = {
-  active: 'bg-green-500/10 text-green-600',
-  pending: 'bg-yellow-500/10 text-yellow-600',
-  error: 'bg-red-500/10 text-red-600',
-};
-
-<span className={`px-2 py-1 rounded text-xs ${statusColors[status]}`}>{status}</span>
-```
-
-### Section numérotée
-```tsx
-<section id="section-id" className="scroll-mt-4">
-  <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
-    <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold">
-      {number}
-    </span>
-    {title}
-  </h2>
-  <div className="card p-6">{children}</div>
-</section>
-```
-
-### Alert/Info Box
-```tsx
-<div className="p-4 rounded-lg bg-amber-500/10 border border-amber-500/20 flex items-start gap-3">
-  <AlertTriangle className="w-5 h-5 text-amber-600 flex-shrink-0" />
-  <div>
-    <div className="font-medium text-amber-600">Attention</div>
-    <p className="text-sm text-[var(--text-secondary)]">{message}</p>
-  </div>
-</div>
-```
+# Templates de Documentation
+
+## Template User Module
+
+```tsx
+// web/smartstack-web/src/pages/docs/user/{context}/{ModuleName}DocPage.tsx
+
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { ArrowRight, ChevronRight, CheckCircle, AlertTriangle } from 'lucide-react';
+
+// MOCK DATA - Données fictives pour illustrer l'interface
+const mockData = {
+  items: [
+    { id: 1, name: 'Item 1', status: 'active', value: 125 },
+    { id: 2, name: 'Item 2', status: 'pending', value: 89 },
+  ],
+  stats: { total: 256, active: 180, pending: 52, warning: 24 },
+};
+
+export function {ModuleName}DocPage() {
+  const { t } = useTranslation('docs');
+
+  return (
+    <div className="space-y-8">
+      {/* 1. BREADCRUMB */}
+      <div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+        <Link to="/docs" className="hover:text-[var(--color-primary-600)]">
+          {t('breadcrumb.documentation')}
+        </Link>
+        <span>/</span>
+        <Link to="/docs/user" className="hover:text-[var(--color-primary-600)]">
+          {t('breadcrumb.user')}
+        </Link>
+        <span>/</span>
+        <span>{t('breadcrumb.moduleName')}</span>
+      </div>
+
+      {/* 2. HEADER */}
+      <div>
+        <h1 className="text-3xl font-bold mb-4 flex items-center gap-3">
+          <IconName className="w-8 h-8 text-[var(--color-primary-600)]" />
+          {t('module.moduleName.title')}
+        </h1>
+        <p className="text-lg text-[var(--text-secondary)]">
+          {t('module.moduleName.subtitle')}
+        </p>
+      </div>
+
+      {/* 3. TABLE DES MATIÈRES */}
+      <div className="card p-4">
+        <h2 className="font-semibold mb-3">{t('common.tableOfContents')}</h2>
+        <nav className="grid grid-cols-2 md:grid-cols-3 gap-2">
+          {['introduction', 'access', 'overview', 'features', 'faq', 'api'].map((section) => (
+            <a key={section} href={`#${section}`} className="flex items-center gap-2 p-2 rounded hover:bg-[var(--bg-secondary)]">
+              <ChevronRight className="w-4 h-4 text-[var(--color-primary-600)]" />
+              {t(`module.moduleName.sections.${section}.title`)}
+            </a>
+          ))}
+        </nav>
+      </div>
+
+      {/* 4. SECTIONS NUMÉROTÉES */}
+      <section id="introduction" className="scroll-mt-4">
+        <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
+          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold">1</span>
+          {t('module.moduleName.sections.introduction.title')}
+        </h2>
+        <div className="card p-6">
+          {/* Contenu de la section */}
+        </div>
+      </section>
+
+      {/* 5. MAQUETTE UI AVEC MOCK DATA */}
+      <section id="overview" className="scroll-mt-4">
+        <div className="card p-6">
+          <div className="border-2 border-dashed border-[var(--border-color)] rounded-lg p-4">
+            <div className="text-xs text-[var(--text-tertiary)] mb-4 text-center">
+              {t('common.mockupPreview')}
+            </div>
+            {/* Stats Cards */}
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="p-4 rounded-lg bg-[var(--bg-secondary)] text-center">
+                <div className="text-2xl font-bold text-[var(--color-primary-600)]">{mockData.stats.total}</div>
+                <div className="text-sm text-[var(--text-secondary)]">{t('common.total')}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* 6. FAQ */}
+      <section id="faq" className="scroll-mt-4">
+        <div className="space-y-4">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="card p-4">
+              <h3 className="font-medium mb-2">{t(`module.moduleName.faq.q${i}.question`)}</h3>
+              <p className="text-sm text-[var(--text-secondary)]">{t(`module.moduleName.faq.q${i}.answer`)}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      {/* 7. NAVIGATION FOOTER */}
+      <div className="flex justify-between pt-6 border-t border-[var(--border-color)]">
+        <Link to="/docs/user/previous" className="flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--color-primary-600)]">
+          <ArrowRight className="w-4 h-4 rotate-180" />
+          {t('nav.previous')}
+        </Link>
+        <Link to="/docs/user/next" className="flex items-center gap-2 text-[var(--color-primary-600)]">
+          {t('nav.next')}
+          <ArrowRight className="w-4 h-4" />
+        </Link>
+      </div>
+    </div>
+  );
+}
+```
+
+## Template Developer Tool
+
+```tsx
+// web/smartstack-web/src/pages/docs/developer/tools/{ToolName}Page.tsx
+
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Terminal, CheckCircle, Copy, ExternalLink } from 'lucide-react';
+import { useState } from 'react';
+
+function CodeBlock({ code, language = 'bash' }: { code: string; language?: string }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="relative group">
+      <pre className="bg-[var(--bg-tertiary)] p-4 rounded-lg overflow-x-auto text-sm font-mono">
+        <code>{code}</code>
+      </pre>
+      <button onClick={handleCopy} className="absolute top-2 right-2 p-2 rounded bg-[var(--bg-secondary)] opacity-0 group-hover:opacity-100">
+        {copied ? <CheckCircle className="w-4 h-4 text-green-500" /> : <Copy className="w-4 h-4" />}
+      </button>
+    </div>
+  );
+}
+
+export function {ToolName}Page() {
+  const { t } = useTranslation('docs');
+
+  return (
+    <div className="space-y-8">
+      {/* Breadcrumb */}
+      <div className="flex items-center gap-2 text-sm text-[var(--text-secondary)]">
+        <Link to="/docs">Documentation</Link>
+        <span>/</span>
+        <Link to="/docs/developer">Developer</Link>
+        <span>/</span>
+        <Link to="/docs/developer/tools">Tools</Link>
+        <span>/</span>
+        <span>{t('developer.tools.toolName.title')}</span>
+      </div>
+
+      {/* Header avec badges */}
+      <div>
+        <h1 className="text-3xl font-bold mb-4 flex items-center gap-3">
+          <Terminal className="w-8 h-8 text-[var(--color-primary-600)]" />
+          {t('developer.tools.toolName.title')}
+        </h1>
+        <div className="flex gap-2 mt-4">
+          <span className="px-3 py-1 rounded-full bg-green-500/10 text-green-600 text-sm">Gratuit</span>
+          <span className="px-3 py-1 rounded-full bg-blue-500/10 text-blue-600 text-sm">.NET</span>
+        </div>
+      </div>
+
+      {/* Sections: Prérequis, Installation, Configuration, Usage, CI/CD */}
+      <section id="installation">
+        <h2 className="text-xl font-semibold mb-4">Installation</h2>
+        <CodeBlock code="dotnet add package ToolName" />
+      </section>
+
+      {/* Liens externes */}
+      <div className="card p-4 bg-blue-500/5 border border-blue-500/20">
+        <div className="flex items-center gap-2 mb-2">
+          <ExternalLink className="w-4 h-4 text-blue-600" />
+          <span className="font-medium">Ressources</span>
+        </div>
+        <div className="flex gap-4">
+          <a href="#" className="text-blue-600 hover:underline text-sm">Documentation officielle</a>
+          <a href="#" className="text-blue-600 hover:underline text-sm">GitHub</a>
+        </div>
+      </div>
+    </div>
+  );
+}
+```
+
+## Template Database Schema (avec MCD en HTML)
+
+```tsx
+// web/smartstack-web/src/pages/docs/developer/database/{SchemaName}SchemaPage.tsx
+
+import { Link } from 'react-router-dom';
+import { Database, Table, Key, Link2, ArrowRight } from 'lucide-react';
+
+const schemaData = {
+  name: 'schema_name',
+  tables: [
+    {
+      name: 'TableName',
+      columns: [
+        { name: 'Id', type: 'UNIQUEIDENTIFIER', isPK: true, isFK: false, required: true, description: 'Identifiant unique' },
+        { name: 'ForeignId', type: 'UNIQUEIDENTIFIER', isPK: false, isFK: true, fkTable: 'OtherTable', required: true, description: 'Référence vers OtherTable' },
+      ],
+      relations: [
+        { type: '1:N', target: 'ChildTable', description: 'Une entrée a plusieurs enfants' },
+      ]
+    },
+  ]
+};
+
+// Composant pour afficher une table dans le diagramme MCD
+function McdTableCard({ table, schema }: { table: typeof schemaData.tables[0]; schema: string }) {
+  return (
+    <div className="card p-4 min-w-[200px]">
+      <div className="flex items-center gap-2 mb-3 pb-2 border-b border-[var(--border-color)]">
+        <Table className="w-4 h-4 text-[var(--color-primary-600)]" />
+        <span className="font-semibold">{schema}.{table.name}</span>
+      </div>
+      <div className="space-y-1 text-sm">
+        {table.columns.map((col) => (
+          <div key={col.name} className="flex items-center gap-2">
+            {col.isPK && <Key className="w-3 h-3 text-amber-500" />}
+            {col.isFK && <Link2 className="w-3 h-3 text-blue-500" />}
+            {!col.isPK && !col.isFK && <span className="w-3" />}
+            <span className={`font-mono text-xs ${col.isPK ? 'font-bold' : ''}`}>
+              {col.name}
+            </span>
+            {col.required && <span className="text-red-500">*</span>}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// Composant pour afficher une relation entre tables
+function McdRelation({ from, to, type, description }: { from: string; to: string; type: string; description: string }) {
+  return (
+    <div className="flex items-center gap-4 py-2">
+      <span className="font-mono text-sm bg-[var(--bg-secondary)] px-2 py-1 rounded">{from}</span>
+      <div className="flex items-center gap-2">
+        <div className="w-8 h-0.5 bg-[var(--border-color)]" />
+        <span className="px-2 py-0.5 rounded bg-purple-500/10 text-purple-600 text-xs font-medium">{type}</span>
+        <ArrowRight className="w-4 h-4 text-[var(--text-tertiary)]" />
+      </div>
+      <span className="font-mono text-sm bg-[var(--bg-secondary)] px-2 py-1 rounded">{to}</span>
+      <span className="text-sm text-[var(--text-secondary)]">{description}</span>
+    </div>
+  );
+}
+
+export function {SchemaName}SchemaPage() {
+  return (
+    <div className="space-y-8">
+      {/* Section MCD - Diagramme HTML */}
+      <section id="mcd">
+        <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
+          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold">1</span>
+          Modèle Conceptuel de Données (MCD)
+        </h2>
+        <div className="card p-6">
+          {/* Diagramme visuel des tables */}
+          <div className="flex flex-wrap gap-6 justify-center mb-8">
+            {schemaData.tables.map((table) => (
+              <McdTableCard key={table.name} table={table} schema={schemaData.name} />
+            ))}
+          </div>
+
+          {/* Relations entre tables */}
+          <div className="border-t border-[var(--border-color)] pt-4">
+            <h4 className="font-medium mb-3 text-sm text-[var(--text-secondary)]">Relations</h4>
+            <div className="space-y-2">
+              {schemaData.tables.flatMap((table) =>
+                table.relations.map((rel, idx) => (
+                  <McdRelation
+                    key={`${table.name}-${idx}`}
+                    from={table.name}
+                    to={rel.target}
+                    type={rel.type}
+                    description={rel.description}
+                  />
+                ))
+              )}
+            </div>
+          </div>
+
+          {/* Légende */}
+          <div className="mt-6 pt-4 border-t border-[var(--border-color)] flex flex-wrap gap-4 text-xs text-[var(--text-secondary)]">
+            <div className="flex items-center gap-1">
+              <Key className="w-3 h-3 text-amber-500" /> PK = Clé primaire
+            </div>
+            <div className="flex items-center gap-1">
+              <Link2 className="w-3 h-3 text-blue-500" /> FK = Clé étrangère
+            </div>
+            <div className="flex items-center gap-1">
+              <span className="text-red-500">*</span> = Obligatoire
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Section Tables détaillées */}
+      <section id="tables">
+        <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
+          <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold">2</span>
+          Tables détaillées
+        </h2>
+        {schemaData.tables.map((table) => (
+          <div key={table.name} className="card p-6 mb-4">
+            <h3 className="font-semibold flex items-center gap-2 mb-4">
+              <Table className="w-5 h-5 text-[var(--color-primary-600)]" />
+              {schemaData.name}.{table.name}
+            </h3>
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="bg-[var(--bg-secondary)]">
+                    <th className="text-left py-2 px-3 rounded-tl-lg">Colonne</th>
+                    <th className="text-left py-2 px-3">Type SQL</th>
+                    <th className="text-left py-2 px-3">Clés</th>
+                    <th className="text-left py-2 px-3 rounded-tr-lg">Description</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {table.columns.map((col, idx) => (
+                    <tr key={col.name} className={idx % 2 === 1 ? 'bg-[var(--bg-secondary)]/50' : ''}>
+                      <td className="py-2 px-3 font-mono text-sm">
+                        {col.name}
+                        {col.required && <span className="text-red-500 ml-1">*</span>}
+                      </td>
+                      <td className="py-2 px-3 text-[var(--text-secondary)]">{col.type}</td>
+                      <td className="py-2 px-3">
+                        {col.isPK && (
+                          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-amber-500/10 text-amber-600 text-xs mr-1">
+                            <Key className="w-3 h-3" /> PK
+                          </span>
+                        )}
+                        {col.isFK && (
+                          <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded bg-blue-500/10 text-blue-600 text-xs">
+                            <Link2 className="w-3 h-3" /> FK
+                          </span>
+                        )}
+                      </td>
+                      <td className="py-2 px-3 text-[var(--text-secondary)]">{col.description}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {/* Relations de cette table */}
+            {table.relations.length > 0 && (
+              <div className="mt-4 pt-4 border-t border-[var(--border-color)]">
+                <h4 className="font-medium mb-2 text-sm">Relations</h4>
+                <div className="flex flex-wrap gap-2">
+                  {table.relations.map((rel, idx) => (
+                    <div key={idx} className="flex items-center gap-2 px-3 py-1 rounded-lg bg-[var(--bg-secondary)] text-sm">
+                      <span className="font-mono text-[var(--color-primary-600)]">{rel.type}</span>
+                      <ArrowRight className="w-4 h-4 text-[var(--text-tertiary)]" />
+                      <span>{rel.target}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        ))}
+      </section>
+    </div>
+  );
+}
+```
+
+## Patterns Réutilisables
+
+### Stats Cards
+```tsx
+<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+  <div className="p-4 rounded-lg bg-[var(--bg-secondary)] text-center">
+    <div className="text-2xl font-bold text-[var(--color-primary-600)]">{value}</div>
+    <div className="text-sm text-[var(--text-secondary)]">{label}</div>
+  </div>
+</div>
+```
+
+### Badges de statut
+```tsx
+const statusColors = {
+  active: 'bg-green-500/10 text-green-600',
+  pending: 'bg-yellow-500/10 text-yellow-600',
+  error: 'bg-red-500/10 text-red-600',
+};
+
+<span className={`px-2 py-1 rounded text-xs ${statusColors[status]}`}>{status}</span>
+```
+
+### Section numérotée
+```tsx
+<section id="section-id" className="scroll-mt-4">
+  <h2 className="text-xl font-semibold mb-4 flex items-center gap-2">
+    <span className="w-8 h-8 rounded-full bg-[var(--color-primary-600)] text-white flex items-center justify-center text-sm font-bold">
+      {number}
+    </span>
+    {title}
+  </h2>
+  <div className="card p-6">{children}</div>
+</section>
+```
+
+### Alert/Info Box
+```tsx
+<div className="p-4 rounded-lg bg-amber-500/10 border border-amber-500/20 flex items-start gap-3">
+  <AlertTriangle className="w-5 h-5 text-amber-600 flex-shrink-0" />
+  <div>
+    <div className="font-medium text-amber-600">Attention</div>
+    <p className="text-sm text-[var(--text-secondary)]">{message}</p>
+  </div>
+</div>
+```