# 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>
```
