@atlashub/smartstack-cli 3.39.0 → 3.40.0

package/scripts/generate-doc-with-mock-ui.ts

@@ -1,804 +1,804 @@
-#!/usr/bin/env node
-/**
- * Generate Documentation with Mock UI for SmartStack Modules
- *
- * This script generates complete documentation pages with embedded mock UI components
- * that visually represent the module's interface without requiring real screenshots.
- *
- * Usage:
- *   node generate-doc-with-mock-ui.ts \
- *     --module users \
- *     --application administration \
- *     --app-path "D:/01 - projets/SmartStack.app/02-Develop"
- *
- * Output: Complete TSX file with mock UI (e.g., UsersDocPage.tsx)
- */
-
-import * as fs from 'fs';
-import * as path from 'path';
-import { glob } from 'glob';
-import { execSync } from 'child_process';
-
-interface ModuleInfo {
-  module: string;        // e.g., "users"
-  application: string;   // e.g., "administration"
-  appPath: string;
-}
-
-interface EntityProperty {
-  name: string;          // e.g., "Email", "FirstName"
-  type: string;          // e.g., "string", "bool", "DateTime?"
-  isRequired: boolean;
-  isNullable: boolean;
-}
-
-interface MockDataField {
-  propertyName: string;
-  mockValue: string;     // Generated mock value
-}
-
-interface PageStructure {
-  hasTable: boolean;
-  hasKPIs: boolean;
-  hasForm: boolean;
-  hasFilters: boolean;
-  columns: string[];     // Table column names
-}
-
-/**
- * Parse command line arguments
- */
-function parseArgs(): ModuleInfo {
-  const args = process.argv.slice(2);
-
-  const getArg = (flag: string): string | null => {
-    const index = args.indexOf(flag);
-    return index !== -1 && index + 1 < args.length ? args[index + 1] : null;
-  };
-
-  const module = getArg('--module');
-  const application = getArg('--application');
-  const appPath = getArg('--app-path');
-
-  if (!module || !application || !appPath) {
-    console.error('Usage: node generate-doc-with-mock-ui.ts --module <name> --application <app> --app-path <path>');
-    process.exit(1);
-  }
-
-  return { module, application, appPath };
-}
-
-/**
- * Find Domain entity file
- * Tries both singular and plural forms (e.g., users → User.cs)
- */
-async function findEntityFile(appPath: string, module: string): Promise<string | null> {
-  const domainPath = path.join(appPath, 'src/SmartStack.Domain');
-
-  // Try singular form first (most common: users → User.cs)
-  const singularForm = capitalize(singularize(module));
-  const singularPattern = `**/${singularForm}.cs`;
-
-  try {
-    let files = await glob(singularPattern, { cwd: domainPath, absolute: true });
-    if (files.length > 0) {
-      return files[0];
-    }
-
-    // Fallback to plural form
-    const pluralForm = capitalize(module);
-    const pluralPattern = `**/${pluralForm}.cs`;
-    files = await glob(pluralPattern, { cwd: domainPath, absolute: true });
-    return files.length > 0 ? files[0] : null;
-  } catch (error) {
-    console.error('Error finding entity:', error);
-    return null;
-  }
-}
-
-/**
- * Find React page file
- */
-async function findPageFile(appPath: string, module: string, application: string): Promise<string | null> {
-  const pagesPath = path.join(appPath, `web/smartstack-web/src/pages/${application}/${module}`);
-  const pattern = `${capitalize(module)}Page.tsx`;
-
-  const fullPath = path.join(pagesPath, pattern);
-  return fs.existsSync(fullPath) ? fullPath : null;
-}
-
-/**
- * Extract entity properties from Domain entity file
- */
-function extractEntityProperties(entityPath: string): EntityProperty[] {
-  const content = fs.readFileSync(entityPath, 'utf-8');
-  const lines = content.split('\n');
-  const properties: EntityProperty[] = [];
-
-  for (const line of lines) {
-    // Match property declarations: public string Email { get; private set; }
-    const propMatch = line.match(/public\s+(\w+\??)\s+(\w+)\s*\{\s*get;/);
-    if (propMatch) {
-      const type = propMatch[1];
-      const name = propMatch[2];
-
-      // Skip base entity properties and navigation properties
-      if (['Id', 'CreatedAt', 'UpdatedAt', 'CreatedBy', 'UpdatedBy'].includes(name)) {
-        continue;
-      }
-
-      // Skip collections (List, IReadOnlyCollection, etc.)
-      if (line.includes('List<') || line.includes('IReadOnlyCollection<') || line.includes('ICollection<')) {
-        continue;
-      }
-
-      properties.push({
-        name,
-        type,
-        isRequired: !type.endsWith('?'),
-        isNullable: type.endsWith('?'),
-      });
-    }
-  }
-
-  return properties;
-}
-
-/**
- * Analyze React page structure
- */
-function analyzePageStructure(pagePath: string): PageStructure {
-  const content = fs.readFileSync(pagePath, 'utf-8');
-
-  const structure: PageStructure = {
-    hasTable: content.includes('<table') || content.includes('Table'),
-    hasKPIs: content.includes('KPI') || content.includes('stat') || content.includes('metric'),
-    hasForm: content.includes('<form') || content.includes('Form') || content.includes('input'),
-    hasFilters: content.includes('filter') || content.includes('Filter') || content.includes('search'),
-    columns: [],
-  };
-
-  // Try to extract table column names
-  const thRegex = /<th[^>]*>([^<]+)<\/th>/g;
-  let match;
-  while ((match = thRegex.exec(content)) !== null) {
-    structure.columns.push(match[1].trim());
-  }
-
-  return structure;
-}
-
-/**
- * Generate mock value for a property
- */
-function generateMockValue(property: EntityProperty, index: number): string {
-  const type = property.type.replace('?', '');
-
-  switch (type.toLowerCase()) {
-    case 'string':
-      if (property.name.toLowerCase().includes('email')) {
-        const names = ['john.doe', 'jane.smith', 'bob.johnson', 'alice.williams', 'charlie.brown'];
-        return `"${names[index % names.length]}@example.com"`;
-      }
-      if (property.name.toLowerCase().includes('name')) {
-        if (property.name.toLowerCase().includes('first')) {
-          const names = ['John', 'Jane', 'Bob', 'Alice', 'Charlie'];
-          return `"${names[index % names.length]}"`;
-        }
-        if (property.name.toLowerCase().includes('last')) {
-          const names = ['Doe', 'Smith', 'Johnson', 'Williams', 'Brown'];
-          return `"${names[index % names.length]}"`;
-        }
-        return `"${property.name} ${index + 1}"`;
-      }
-      if (property.name.toLowerCase().includes('title')) {
-        return `"Sample ${property.name} ${index + 1}"`;
-      }
-      if (property.name.toLowerCase().includes('description')) {
-        return `"This is a sample description for item ${index + 1}"`;
-      }
-      return `"Sample ${property.name}"`;
-
-    case 'bool':
-    case 'boolean':
-      return index % 2 === 0 ? 'true' : 'false';
-
-    case 'int':
-    case 'int32':
-    case 'long':
-      return String((index + 1) * 10);
-
-    case 'decimal':
-    case 'double':
-    case 'float':
-      return String((index + 1) * 10.5);
-
-    case 'datetime':
-      const dates = ['2026-01-15', '2026-01-20', '2026-02-01', '2026-02-10', '2026-02-15'];
-      return `"${dates[index % dates.length]}"`;
-
-    case 'guid':
-      // Generate a fixed mock GUID based on index to keep consistent data
-      const mockGuids = [
-        '"550e8400-e29b-41d4-a716-446655440000"',
-        '"6ba7b810-9dad-11d1-80b4-00c04fd430c8"',
-        '"6ba7b811-9dad-11d1-80b4-00c04fd430c9"',
-        '"6ba7b812-9dad-11d1-80b4-00c04fd430ca"',
-        '"6ba7b813-9dad-11d1-80b4-00c04fd430cb"'
-      ];
-      return mockGuids[index % mockGuids.length];
-
-    default:
-      return property.isNullable ? 'null' : '""';
-  }
-}
-
-/**
- * Generate mock data array
- */
-function generateMockData(properties: EntityProperty[], module: string, count: number = 5): string {
-  const mockItems: string[] = [];
-
-  for (let i = 0; i < count; i++) {
-    const fields = properties
-      .filter(p => !p.name.includes('Hash') && !p.name.includes('Token')) // Skip sensitive fields
-      .map(p => `${p.name.charAt(0).toLowerCase() + p.name.slice(1)}: ${generateMockValue(p, i)}`)
-      .join(', ');
-
-    mockItems.push(`  { ${fields} }`);
-  }
-
-  const singularName = module.endsWith('s') ? module.slice(0, -1) : module;
-  return `const mock${capitalize(module)} = [\n${mockItems.join(',\n')}\n];`;
-}
-
-/**
- * Generate KPI stats based on entity properties
- */
-function generateKPIStats(properties: EntityProperty[], module: string, count: number = 5): string {
-  const stats: string[] = [];
-
-  // Always add total count
-  stats.push(`  { label: 'Total', value: '${count * 10}', color: 'var(--text-primary)' }`);
-
-  // Check for IsActive/Status property
-  const activeProperty = properties.find(p =>
-    p.name.toLowerCase() === 'isactive' && (p.type.toLowerCase() === 'bool' || p.type.toLowerCase() === 'boolean')
-  );
-
-  if (activeProperty) {
-    const activeCount = Math.floor(count * 10 * 0.6); // 60% active
-    const inactiveCount = count * 10 - activeCount;
-    stats.push(`  { label: 'Active', value: '${activeCount}', color: 'var(--success-text)', border: 'var(--success-border)' }`);
-    stats.push(`  { label: 'Inactive', value: '${inactiveCount}', color: 'var(--error-text)', border: 'var(--error-border)' }`);
-  }
-
-  // Check for Status property (enum/string)
-  const statusProperty = properties.find(p =>
-    p.name.toLowerCase() === 'status' && p.type.toLowerCase() === 'string'
-  );
-
-  if (statusProperty) {
-    stats.push(`  { label: 'Pending', value: '${Math.floor(count * 2)}', color: 'var(--warning-text)', border: 'var(--warning-border)' }`);
-    stats.push(`  { label: 'In Progress', value: '${Math.floor(count * 3)}', color: 'var(--info-text)', border: 'var(--info-border)' }`);
-    stats.push(`  { label: 'Completed', value: '${Math.floor(count * 5)}', color: 'var(--success-text)', border: 'var(--success-border)' }`);
-  }
-
-  // Check for DateTime property (e.g., CreatedAt, LastLoginAt)
-  const dateProperty = properties.find(p =>
-    p.type.toLowerCase() === 'datetime' &&
-    (p.name.toLowerCase().includes('created') || p.name.toLowerCase().includes('login'))
-  );
-
-  if (dateProperty) {
-    stats.push(`  { label: 'Last 7 days', value: '${Math.floor(count * 1.5)}', color: 'var(--info-text)', border: 'var(--info-border)' }`);
-  }
-
-  return `const ${module}Stats = [\n${stats.join(',\n')}\n];`;
-}
-
-/**
- * Generate form fields based on entity properties
- */
-function generateFormSection(properties: EntityProperty[], module: string): string {
-  const ModuleName = capitalize(singularize(module));
-
-  // Filter properties suitable for form input
-  const formProps = properties.filter(p => {
-    const name = p.name.toLowerCase();
-    // Exclude read-only, computed, and sensitive fields
-    return !name.includes('hash') &&
-           !name.includes('token') &&
-           !name.includes('normalized') &&
-           !name.endsWith('id') &&
-           !name.includes('createdat') &&
-           !name.includes('updatedat') &&
-           !name.includes('createdby') &&
-           !name.includes('updatedby') &&
-           !name.includes('data') &&
-           !name.includes('proxy') &&
-           p.name !== 'Id';
-  }).slice(0, 6); // Limit to 6 most relevant fields
-
-  const formFields = formProps.map(p => {
-    const fieldName = p.name.charAt(0).toLowerCase() + p.name.slice(1);
-    const label = p.name.replace(/([A-Z])/g, ' $1').trim();
-    const isRequired = p.isRequired;
-
-    if (p.type.toLowerCase() === 'bool' || p.type.toLowerCase() === 'boolean') {
-      return `            <div className="flex items-center gap-2">
-              <input type="checkbox" id="${fieldName}" className="w-4 h-4" />
-              <label htmlFor="${fieldName}" className="text-sm">${label}</label>
-            </div>`;
-    }
-
-    if (p.type.toLowerCase() === 'datetime') {
-      return `            <div>
-              <label className="block text-sm font-medium mb-1">${label}${isRequired ? ' *' : ''}</label>
-              <input type="date" className="w-full px-3 py-2 border border-[var(--border-color)] rounded-lg" />
-            </div>`;
-    }
-
-    if (p.name.toLowerCase().includes('email')) {
-      return `            <div>
-              <label className="block text-sm font-medium mb-1">${label}${isRequired ? ' *' : ''}</label>
-              <input type="email" placeholder="user@example.com" className="w-full px-3 py-2 border border-[var(--border-color)] rounded-lg" />
-            </div>`;
-    }
-
-    if (p.name.toLowerCase().includes('description') || p.name.toLowerCase().includes('notes')) {
-      return `            <div className="md:col-span-2">
-              <label className="block text-sm font-medium mb-1">${label}</label>
-              <textarea rows={3} className="w-full px-3 py-2 border border-[var(--border-color)] rounded-lg" />
-            </div>`;
-    }
-
-    // Default text input
-    return `            <div>
-              <label className="block text-sm font-medium mb-1">${label}${isRequired ? ' *' : ''}</label>
-              <input type="text" className="w-full px-3 py-2 border border-[var(--border-color)] rounded-lg" />
-            </div>`;
-  }).join('\n');
-
-  return `      {/* Section 4: Create Form Example */}
-      <section id="create-form" className="card p-6">
-        <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">4</span>
-          Create ${ModuleName} Form
-        </h2>
-        <p className="text-[var(--text-secondary)] mb-4">
-          Form interface for creating new ${module}.
-        </p>
-
-        <div className="border border-[var(--border-color)] rounded-lg p-6 bg-[var(--bg-secondary)]">
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-${formFields}
-          </div>
-
-          <div className="flex items-center gap-3 mt-6 pt-6 border-t border-[var(--border-color)]">
-            <button className="px-4 py-2 bg-[var(--color-primary-600)] text-white rounded-lg flex items-center gap-2">
-              <Plus className="w-4 h-4" />
-              Create ${ModuleName}
-            </button>
-            <button className="px-4 py-2 border border-[var(--border-color)] rounded-lg">
-              Cancel
-            </button>
-          </div>
-        </div>
-      </section>`;
-}
-
-/**
- * Generate KPI section UI
- */
-function generateKPISection(module: string): string {
-  return `          {/* Stats */}
-          <div className="p-4 border-b border-[var(--border-color)] bg-[var(--bg-secondary)]">
-            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2">
-              {${module}Stats.map((stat) => (
-                <div
-                  key={stat.label}
-                  className="p-3 bg-[var(--bg-primary)] rounded-lg text-center"
-                  style={{ borderLeft: stat.border ? \`3px solid \${stat.border}\` : undefined }}
-                >
-                  <div className="text-2xl font-bold" style={{ color: stat.color }}>{stat.value}</div>
-                  <div className="text-xs text-[var(--text-secondary)] mt-1">{stat.label}</div>
-                </div>
-              ))}
-            </div>
-          </div>`;
-}
-
-/**
- * Generate table mock UI section
- */
-function generateTableMockUI(properties: EntityProperty[], module: string): string {
-  // Smart property selection for table display
-  const filteredProps = properties.filter(p => {
-    const name = p.name.toLowerCase();
-    // Exclude sensitive, internal, and FK properties
-    return !name.includes('hash') &&
-           !name.includes('token') &&
-           !name.includes('password') &&
-           !name.endsWith('id') &&  // Skip foreign keys
-           !name.includes('normalized') &&
-           !name.includes('data') &&  // Skip JSON/blob fields
-           !name.includes('proxy') &&
-           !name.includes('im') &&
-           p.name !== 'Sponsors' &&
-           p.name !== 'ProxyAddresses' &&
-           p.name !== 'ImAddresses';
-  });
-
-  // Prioritize display properties: name/title > email > status > date
-  const priorityProps: EntityProperty[] = [];
-
-  // Add name/title properties first
-  priorityProps.push(...filteredProps.filter(p =>
-    p.name.toLowerCase().includes('name') ||
-    p.name.toLowerCase().includes('title')
-  ).slice(0, 2));
-
-  // Add email if available
-  const emailProp = filteredProps.find(p => p.name.toLowerCase().includes('email'));
-  if (emailProp && !priorityProps.includes(emailProp)) {
-    priorityProps.push(emailProp);
-  }
-
-  // Add status/active properties
-  const statusProp = filteredProps.find(p =>
-    p.name.toLowerCase().includes('active') ||
-    p.name.toLowerCase().includes('status')
-  );
-  if (statusProp && !priorityProps.includes(statusProp)) {
-    priorityProps.push(statusProp);
-  }
-
-  // Fill remaining slots with other properties (max 6 total)
-  const remainingProps = filteredProps.filter(p => !priorityProps.includes(p));
-  priorityProps.push(...remainingProps.slice(0, 6 - priorityProps.length));
-
-  const displayProps = priorityProps.slice(0, 6);
-
-  const headers = displayProps.map(p => `<th className="text-left p-3 font-medium">${p.name}</th>`).join('\n                  ');
-
-  const cells = displayProps.map(p => {
-    const propName = p.name.charAt(0).toLowerCase() + p.name.slice(1);
-
-    if (p.type.toLowerCase() === 'bool' || p.type.toLowerCase() === 'boolean') {
-      return `<td className="p-3">
-                      <span className={\`px-2 py-1 text-xs rounded \${item.${propName} ? 'bg-green-500/10 text-green-600' : 'bg-gray-500/10 text-gray-600'}\`}>
-                        {item.${propName} ? 'Yes' : 'No'}
-                      </span>
-                    </td>`;
-    }
-
-    if (p.type.toLowerCase() === 'datetime') {
-      return `<td className="p-3 text-[var(--text-secondary)]">{new Date(item.${propName}).toLocaleDateString()}</td>`;
-    }
-
-    return `<td className="p-3">{item.${propName}}</td>`;
-  }).join('\n                    ');
-
-  return `        {/* Table */}
-        <div className="overflow-x-auto">
-          <table className="w-full text-sm">
-            <thead className="bg-[var(--bg-secondary)]">
-              <tr>
-                ${headers}
-                <th className="text-right p-3 font-medium">Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              {mock${capitalize(module)}.map((item, idx) => (
-                <tr key={idx} className="border-b border-[var(--border-color)] hover:bg-[var(--bg-hover)]">
-                  ${cells}
-                  <td className="p-3 text-right">
-                    <div className="flex items-center justify-end gap-1">
-                      <button className="p-1.5 hover:bg-[var(--bg-secondary)] rounded">
-                        <Eye className="w-4 h-4" />
-                      </button>
-                      <button className="p-1.5 hover:bg-[var(--bg-secondary)] rounded text-[var(--error-text)]">
-                        <Trash2 className="w-4 h-4" />
-                      </button>
-                    </div>
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>`;
-}
-
-/**
- * Generate complete TSX documentation file
- */
-function generateDocumentationTSX(
-  moduleInfo: ModuleInfo,
-  properties: EntityProperty[],
-  apiEndpoints: any[],
-  businessRules: any[],
-  pageStructure: PageStructure
-): string {
-  const { module, application } = moduleInfo;
-  const ModuleName = capitalize(module);
-
-  // Generate mock data
-  const mockDataCode = generateMockData(properties, module);
-
-  // Generate KPI stats
-  const kpiStatsCode = generateKPIStats(properties, module);
-  const kpiSectionUI = generateKPISection(module);
-
-  // Generate table UI
-  const tableMockUI = generateTableMockUI(properties, module);
-
-  // Generate form section
-  const formSectionUI = generateFormSection(properties, module);
-
-  // Generate API endpoints mock data
-  const apiEndpointsCode = `const apiEndpoints = ${JSON.stringify(apiEndpoints, null, 2)};`;
-
-  return `import { Link } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import {
-  ArrowRight,
-  Shield,
-  Eye,
-  Trash2,
-  Plus,
-  Info,
-  MessageSquare,
-  HelpCircle,
-} from 'lucide-react';
-
-// Mock data for ${ModuleName}
-${mockDataCode}
-
-// KPI Stats
-${kpiStatsCode}
-
-// API endpoints
-${apiEndpointsCode}
-
-export function ${ModuleName}DocPage() {
-  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="/system/docs" className="hover:text-[var(--color-primary-600)]">Documentation</Link>
-        <span>/</span>
-        <Link to="/system/docs/user" className="hover:text-[var(--color-primary-600)]">User</Link>
-        <span>/</span>
-        <span>${ModuleName}</span>
-      </div>
-
-      {/* Header */}
-      <div>
-        <h1 className="text-3xl font-bold mb-4">
-          ${ModuleName} Management
-        </h1>
-        <p className="text-lg text-[var(--text-secondary)]">
-          Complete management interface for ${module}
-        </p>
-      </div>
-
-      {/* Section 1: Introduction */}
-      <section id="introduction" className="card p-6">
-        <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>
-          Introduction
-        </h2>
-        <p className="text-[var(--text-secondary)]">
-          The ${ModuleName} module provides comprehensive management capabilities including
-          viewing, creating, updating, and deleting ${module}.
-        </p>
-      </section>
-
-      {/* Section 2: Access */}
-      <section id="access" className="card p-6">
-        <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>
-          Access
-        </h2>
-
-        <div className="mb-4">
-          <div className="text-sm font-medium mb-2">Navigation</div>
-          <div className="flex items-center gap-2 text-sm bg-[var(--bg-secondary)] p-3 rounded-lg">
-            <span className="px-2 py-1 bg-[var(--bg-primary)] rounded">${capitalize(application)}</span>
-            <ArrowRight className="w-4 h-4 text-[var(--text-tertiary)]" />
-            <span className="px-2 py-1 bg-[var(--color-primary-600)] text-white rounded">${ModuleName}</span>
-          </div>
-        </div>
-
-        <div className="mb-4">
-          <div className="text-sm font-medium mb-2">URL</div>
-          <code className="block p-3 bg-[var(--bg-secondary)] rounded-lg text-sm font-mono">
-            /${application}/${module}
-          </code>
-        </div>
-      </section>
-
-      {/* Section 3: Overview - MOCK UI */}
-      <section id="overview" className="card p-6">
-        <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">3</span>
-          Interface Overview
-        </h2>
-        <p className="text-[var(--text-secondary)] mb-4">
-          The main ${module} interface displays all records in a table format with search and filter capabilities.
-        </p>
-
-        {/* Mock UI - Complete Interface */}
-        <div className="border border-[var(--border-color)] rounded-lg overflow-hidden">
-          {/* Header */}
-          <div className="p-4 border-b border-[var(--border-color)] flex items-center justify-between">
-            <div>
-              <div className="font-bold">${ModuleName} Management</div>
-              <div className="text-sm text-[var(--text-secondary)]">Manage all ${module}</div>
-            </div>
-            <button className="px-4 py-2 bg-[var(--color-primary-600)] text-white rounded-lg flex items-center gap-2 text-sm">
-              <Plus className="w-4 h-4" />
-              New ${ModuleName}
-            </button>
-          </div>
-
-${kpiSectionUI}
-
-          {/* Table */}
-${tableMockUI}
-        </div>
-      </section>
-
-${formSectionUI}
-
-      {/* Section 5: API Reference */}
-      <section id="api" className="card p-6">
-        <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">5</span>
-          API Reference
-        </h2>
-
-        <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">Method</th>
-                <th className="text-left py-2 px-3">Endpoint</th>
-                <th className="text-left py-2 px-3 rounded-tr-lg">Handler</th>
-              </tr>
-            </thead>
-            <tbody>
-              {apiEndpoints.map((endpoint, index) => (
-                <tr key={index} className="border-b border-[var(--border-color)]">
-                  <td className="py-2 px-3">
-                    <span className={\`px-2 py-0.5 rounded text-xs font-medium \${
-                      endpoint.method === 'GET' ? 'bg-green-500/10 text-green-600' :
-                      endpoint.method === 'POST' ? 'bg-yellow-500/10 text-yellow-600' :
-                      endpoint.method === 'PUT' ? 'bg-blue-500/10 text-blue-600' :
-                      'bg-red-500/10 text-red-600'
-                    }\`}>
-                      {endpoint.method}
-                    </span>
-                  </td>
-                  <td className="py-2 px-3 font-mono text-xs">{endpoint.path}</td>
-                  <td className="py-2 px-3 text-[var(--text-secondary)]">{endpoint.handler}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </section>
-    </div>
-  );
-}
-`;
-}
-
-/**
- * Capitalize first letter
- */
-function capitalize(str: string): string {
-  return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-/**
- * Simple singularize function for common English plurals
- */
-function singularize(str: string): string {
-  if (str.endsWith('ies')) {
-    return str.slice(0, -3) + 'y';
-  }
-  if (str.endsWith('sses') || str.endsWith('shes') || str.endsWith('ches') || str.endsWith('xes')) {
-    return str.slice(0, -2);
-  }
-  if (str.endsWith('s') && !str.endsWith('ss')) {
-    return str.slice(0, -1);
-  }
-  return str;
-}
-
-/**
- * Main execution
- */
-async function main() {
-  const moduleInfo = parseArgs();
-  const { module, application, appPath } = moduleInfo;
-
-  console.error(`\n🚀 Generating documentation for: ${application}/${module}\n`);
-
-  // 1. Find entity file
-  console.error('📁 Finding entity file...');
-  const entityPath = await findEntityFile(appPath, module);
-  if (!entityPath) {
-    console.error(`❌ Entity not found for module: ${module}`);
-    process.exit(1);
-  }
-  console.error(`✅ Found: ${entityPath}`);
-
-  // 2. Extract entity properties
-  console.error('\n📊 Extracting entity properties...');
-  const properties = extractEntityProperties(entityPath);
-  console.error(`✅ Extracted ${properties.length} properties`);
-
-  // 3. Find page file
-  console.error('\n📄 Finding React page...');
-  const pagePath = await findPageFile(appPath, module, application);
-  if (pagePath) {
-    console.error(`✅ Found: ${pagePath}`);
-  } else {
-    console.error(`⚠️  Page not found (will use defaults)`);
-  }
-
-  // 4. Analyze page structure
-  const pageStructure = pagePath ? analyzePageStructure(pagePath) : {
-    hasTable: true,
-    hasKPIs: false,
-    hasForm: false,
-    hasFilters: false,
-    columns: [],
-  };
-
-  // 5. Extract API endpoints using existing script
-  console.error('\n🔌 Extracting API endpoints...');
-  let apiEndpoints: any[] = [];
-  try {
-    const endpointsOutput = execSync(
-      `npx tsx "${__dirname}/extract-api-endpoints.ts" --module ${module} --app-path "${appPath}"`,
-      { encoding: 'utf-8' }
-    );
-    apiEndpoints = JSON.parse(endpointsOutput);
-    console.error(`✅ Extracted ${apiEndpoints.length} endpoints`);
-  } catch (error) {
-    console.error(`⚠️  Could not extract endpoints`);
-  }
-
-  // 6. Extract business rules using existing script
-  console.error('\n📋 Extracting business rules...');
-  let businessRules: any[] = [];
-  try {
-    const rulesOutput = execSync(
-      `npx tsx "${__dirname}/extract-business-rules.ts" --module ${module} --app-path "${appPath}"`,
-      { encoding: 'utf-8' }
-    );
-    businessRules = JSON.parse(rulesOutput);
-    console.error(`✅ Extracted ${businessRules.length} business rules`);
-  } catch (error) {
-    console.error(`⚠️  Could not extract business rules`);
-  }
-
-  // 7. Generate documentation TSX
-  console.error('\n✨ Generating documentation TSX...');
-  const tsx = generateDocumentationTSX(moduleInfo, properties, apiEndpoints, businessRules, pageStructure);
-
-  // 8. Output
-  console.log(tsx);
-  console.error('\n✅ Documentation generated successfully!');
-}
-
-main().catch((error) => {
-  console.error('❌ Fatal error:', error);
-  process.exit(1);
-});
+#!/usr/bin/env node
+/**
+ * Generate Documentation with Mock UI for SmartStack Modules
+ *
+ * This script generates complete documentation pages with embedded mock UI components
+ * that visually represent the module's interface without requiring real screenshots.
+ *
+ * Usage:
+ *   node generate-doc-with-mock-ui.ts \
+ *     --module users \
+ *     --application administration \
+ *     --app-path "D:/01 - projets/SmartStack.app/02-Develop"
+ *
+ * Output: Complete TSX file with mock UI (e.g., UsersDocPage.tsx)
+ */
+
+import * as fs from 'fs';
+import * as path from 'path';
+import { glob } from 'glob';
+import { execSync } from 'child_process';
+
+interface ModuleInfo {
+  module: string;        // e.g., "users"
+  application: string;   // e.g., "administration"
+  appPath: string;
+}
+
+interface EntityProperty {
+  name: string;          // e.g., "Email", "FirstName"
+  type: string;          // e.g., "string", "bool", "DateTime?"
+  isRequired: boolean;
+  isNullable: boolean;
+}
+
+interface MockDataField {
+  propertyName: string;
+  mockValue: string;     // Generated mock value
+}
+
+interface PageStructure {
+  hasTable: boolean;
+  hasKPIs: boolean;
+  hasForm: boolean;
+  hasFilters: boolean;
+  columns: string[];     // Table column names
+}
+
+/**
+ * Parse command line arguments
+ */
+function parseArgs(): ModuleInfo {
+  const args = process.argv.slice(2);
+
+  const getArg = (flag: string): string | null => {
+    const index = args.indexOf(flag);
+    return index !== -1 && index + 1 < args.length ? args[index + 1] : null;
+  };
+
+  const module = getArg('--module');
+  const application = getArg('--application');
+  const appPath = getArg('--app-path');
+
+  if (!module || !application || !appPath) {
+    console.error('Usage: node generate-doc-with-mock-ui.ts --module <name> --application <app> --app-path <path>');
+    process.exit(1);
+  }
+
+  return { module, application, appPath };
+}
+
+/**
+ * Find Domain entity file
+ * Tries both singular and plural forms (e.g., users → User.cs)
+ */
+async function findEntityFile(appPath: string, module: string): Promise<string | null> {
+  const domainPath = path.join(appPath, 'src/SmartStack.Domain');
+
+  // Try singular form first (most common: users → User.cs)
+  const singularForm = capitalize(singularize(module));
+  const singularPattern = `**/${singularForm}.cs`;
+
+  try {
+    let files = await glob(singularPattern, { cwd: domainPath, absolute: true });
+    if (files.length > 0) {
+      return files[0];
+    }
+
+    // Fallback to plural form
+    const pluralForm = capitalize(module);
+    const pluralPattern = `**/${pluralForm}.cs`;
+    files = await glob(pluralPattern, { cwd: domainPath, absolute: true });
+    return files.length > 0 ? files[0] : null;
+  } catch (error) {
+    console.error('Error finding entity:', error);
+    return null;
+  }
+}
+
+/**
+ * Find React page file
+ */
+async function findPageFile(appPath: string, module: string, application: string): Promise<string | null> {
+  const pagesPath = path.join(appPath, `web/smartstack-web/src/pages/${application}/${module}`);
+  const pattern = `${capitalize(module)}Page.tsx`;
+
+  const fullPath = path.join(pagesPath, pattern);
+  return fs.existsSync(fullPath) ? fullPath : null;
+}
+
+/**
+ * Extract entity properties from Domain entity file
+ */
+function extractEntityProperties(entityPath: string): EntityProperty[] {
+  const content = fs.readFileSync(entityPath, 'utf-8');
+  const lines = content.split('\n');
+  const properties: EntityProperty[] = [];
+
+  for (const line of lines) {
+    // Match property declarations: public string Email { get; private set; }
+    const propMatch = line.match(/public\s+(\w+\??)\s+(\w+)\s*\{\s*get;/);
+    if (propMatch) {
+      const type = propMatch[1];
+      const name = propMatch[2];
+
+      // Skip base entity properties and navigation properties
+      if (['Id', 'CreatedAt', 'UpdatedAt', 'CreatedBy', 'UpdatedBy'].includes(name)) {
+        continue;
+      }
+
+      // Skip collections (List, IReadOnlyCollection, etc.)
+      if (line.includes('List<') || line.includes('IReadOnlyCollection<') || line.includes('ICollection<')) {
+        continue;
+      }
+
+      properties.push({
+        name,
+        type,
+        isRequired: !type.endsWith('?'),
+        isNullable: type.endsWith('?'),
+      });
+    }
+  }
+
+  return properties;
+}
+
+/**
+ * Analyze React page structure
+ */
+function analyzePageStructure(pagePath: string): PageStructure {
+  const content = fs.readFileSync(pagePath, 'utf-8');
+
+  const structure: PageStructure = {
+    hasTable: content.includes('<table') || content.includes('Table'),
+    hasKPIs: content.includes('KPI') || content.includes('stat') || content.includes('metric'),
+    hasForm: content.includes('<form') || content.includes('Form') || content.includes('input'),
+    hasFilters: content.includes('filter') || content.includes('Filter') || content.includes('search'),
+    columns: [],
+  };
+
+  // Try to extract table column names
+  const thRegex = /<th[^>]*>([^<]+)<\/th>/g;
+  let match;
+  while ((match = thRegex.exec(content)) !== null) {
+    structure.columns.push(match[1].trim());
+  }
+
+  return structure;
+}
+
+/**
+ * Generate mock value for a property
+ */
+function generateMockValue(property: EntityProperty, index: number): string {
+  const type = property.type.replace('?', '');
+
+  switch (type.toLowerCase()) {
+    case 'string':
+      if (property.name.toLowerCase().includes('email')) {
+        const names = ['john.doe', 'jane.smith', 'bob.johnson', 'alice.williams', 'charlie.brown'];
+        return `"${names[index % names.length]}@example.com"`;
+      }
+      if (property.name.toLowerCase().includes('name')) {
+        if (property.name.toLowerCase().includes('first')) {
+          const names = ['John', 'Jane', 'Bob', 'Alice', 'Charlie'];
+          return `"${names[index % names.length]}"`;
+        }
+        if (property.name.toLowerCase().includes('last')) {
+          const names = ['Doe', 'Smith', 'Johnson', 'Williams', 'Brown'];
+          return `"${names[index % names.length]}"`;
+        }
+        return `"${property.name} ${index + 1}"`;
+      }
+      if (property.name.toLowerCase().includes('title')) {
+        return `"Sample ${property.name} ${index + 1}"`;
+      }
+      if (property.name.toLowerCase().includes('description')) {
+        return `"This is a sample description for item ${index + 1}"`;
+      }
+      return `"Sample ${property.name}"`;
+
+    case 'bool':
+    case 'boolean':
+      return index % 2 === 0 ? 'true' : 'false';
+
+    case 'int':
+    case 'int32':
+    case 'long':
+      return String((index + 1) * 10);
+
+    case 'decimal':
+    case 'double':
+    case 'float':
+      return String((index + 1) * 10.5);
+
+    case 'datetime':
+      const dates = ['2026-01-15', '2026-01-20', '2026-02-01', '2026-02-10', '2026-02-15'];
+      return `"${dates[index % dates.length]}"`;
+
+    case 'guid':
+      // Generate a fixed mock GUID based on index to keep consistent data
+      const mockGuids = [
+        '"550e8400-e29b-41d4-a716-446655440000"',
+        '"6ba7b810-9dad-11d1-80b4-00c04fd430c8"',
+        '"6ba7b811-9dad-11d1-80b4-00c04fd430c9"',
+        '"6ba7b812-9dad-11d1-80b4-00c04fd430ca"',
+        '"6ba7b813-9dad-11d1-80b4-00c04fd430cb"'
+      ];
+      return mockGuids[index % mockGuids.length];
+
+    default:
+      return property.isNullable ? 'null' : '""';
+  }
+}
+
+/**
+ * Generate mock data array
+ */
+function generateMockData(properties: EntityProperty[], module: string, count: number = 5): string {
+  const mockItems: string[] = [];
+
+  for (let i = 0; i < count; i++) {
+    const fields = properties
+      .filter(p => !p.name.includes('Hash') && !p.name.includes('Token')) // Skip sensitive fields
+      .map(p => `${p.name.charAt(0).toLowerCase() + p.name.slice(1)}: ${generateMockValue(p, i)}`)
+      .join(', ');
+
+    mockItems.push(`  { ${fields} }`);
+  }
+
+  const singularName = module.endsWith('s') ? module.slice(0, -1) : module;
+  return `const mock${capitalize(module)} = [\n${mockItems.join(',\n')}\n];`;
+}
+
+/**
+ * Generate KPI stats based on entity properties
+ */
+function generateKPIStats(properties: EntityProperty[], module: string, count: number = 5): string {
+  const stats: string[] = [];
+
+  // Always add total count
+  stats.push(`  { label: 'Total', value: '${count * 10}', color: 'var(--text-primary)' }`);
+
+  // Check for IsActive/Status property
+  const activeProperty = properties.find(p =>
+    p.name.toLowerCase() === 'isactive' && (p.type.toLowerCase() === 'bool' || p.type.toLowerCase() === 'boolean')
+  );
+
+  if (activeProperty) {
+    const activeCount = Math.floor(count * 10 * 0.6); // 60% active
+    const inactiveCount = count * 10 - activeCount;
+    stats.push(`  { label: 'Active', value: '${activeCount}', color: 'var(--success-text)', border: 'var(--success-border)' }`);
+    stats.push(`  { label: 'Inactive', value: '${inactiveCount}', color: 'var(--error-text)', border: 'var(--error-border)' }`);
+  }
+
+  // Check for Status property (enum/string)
+  const statusProperty = properties.find(p =>
+    p.name.toLowerCase() === 'status' && p.type.toLowerCase() === 'string'
+  );
+
+  if (statusProperty) {
+    stats.push(`  { label: 'Pending', value: '${Math.floor(count * 2)}', color: 'var(--warning-text)', border: 'var(--warning-border)' }`);
+    stats.push(`  { label: 'In Progress', value: '${Math.floor(count * 3)}', color: 'var(--info-text)', border: 'var(--info-border)' }`);
+    stats.push(`  { label: 'Completed', value: '${Math.floor(count * 5)}', color: 'var(--success-text)', border: 'var(--success-border)' }`);
+  }
+
+  // Check for DateTime property (e.g., CreatedAt, LastLoginAt)
+  const dateProperty = properties.find(p =>
+    p.type.toLowerCase() === 'datetime' &&
+    (p.name.toLowerCase().includes('created') || p.name.toLowerCase().includes('login'))
+  );
+
+  if (dateProperty) {
+    stats.push(`  { label: 'Last 7 days', value: '${Math.floor(count * 1.5)}', color: 'var(--info-text)', border: 'var(--info-border)' }`);
+  }
+
+  return `const ${module}Stats = [\n${stats.join(',\n')}\n];`;
+}
+
+/**
+ * Generate form fields based on entity properties
+ */
+function generateFormSection(properties: EntityProperty[], module: string): string {
+  const ModuleName = capitalize(singularize(module));
+
+  // Filter properties suitable for form input
+  const formProps = properties.filter(p => {
+    const name = p.name.toLowerCase();
+    // Exclude read-only, computed, and sensitive fields
+    return !name.includes('hash') &&
+           !name.includes('token') &&
+           !name.includes('normalized') &&
+           !name.endsWith('id') &&
+           !name.includes('createdat') &&
+           !name.includes('updatedat') &&
+           !name.includes('createdby') &&
+           !name.includes('updatedby') &&
+           !name.includes('data') &&
+           !name.includes('proxy') &&
+           p.name !== 'Id';
+  }).slice(0, 6); // Limit to 6 most relevant fields
+
+  const formFields = formProps.map(p => {
+    const fieldName = p.name.charAt(0).toLowerCase() + p.name.slice(1);
+    const label = p.name.replace(/([A-Z])/g, ' $1').trim();
+    const isRequired = p.isRequired;
+
+    if (p.type.toLowerCase() === 'bool' || p.type.toLowerCase() === 'boolean') {
+      return `            <div className="flex items-center gap-2">
+              <input type="checkbox" id="${fieldName}" className="w-4 h-4" />
+              <label htmlFor="${fieldName}" className="text-sm">${label}</label>
+            </div>`;
+    }
+
+    if (p.type.toLowerCase() === 'datetime') {
+      return `            <div>
+              <label className="block text-sm font-medium mb-1">${label}${isRequired ? ' *' : ''}</label>
+              <input type="date" className="w-full px-3 py-2 border border-[var(--border-color)] rounded-lg" />
+            </div>`;
+    }
+
+    if (p.name.toLowerCase().includes('email')) {
+      return `            <div>
+              <label className="block text-sm font-medium mb-1">${label}${isRequired ? ' *' : ''}</label>
+              <input type="email" placeholder="user@example.com" className="w-full px-3 py-2 border border-[var(--border-color)] rounded-lg" />
+            </div>`;
+    }
+
+    if (p.name.toLowerCase().includes('description') || p.name.toLowerCase().includes('notes')) {
+      return `            <div className="md:col-span-2">
+              <label className="block text-sm font-medium mb-1">${label}</label>
+              <textarea rows={3} className="w-full px-3 py-2 border border-[var(--border-color)] rounded-lg" />
+            </div>`;
+    }
+
+    // Default text input
+    return `            <div>
+              <label className="block text-sm font-medium mb-1">${label}${isRequired ? ' *' : ''}</label>
+              <input type="text" className="w-full px-3 py-2 border border-[var(--border-color)] rounded-lg" />
+            </div>`;
+  }).join('\n');
+
+  return `      {/* Section 4: Create Form Example */}
+      <section id="create-form" className="card p-6">
+        <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">4</span>
+          Create ${ModuleName} Form
+        </h2>
+        <p className="text-[var(--text-secondary)] mb-4">
+          Form interface for creating new ${module}.
+        </p>
+
+        <div className="border border-[var(--border-color)] rounded-lg p-6 bg-[var(--bg-secondary)]">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+${formFields}
+          </div>
+
+          <div className="flex items-center gap-3 mt-6 pt-6 border-t border-[var(--border-color)]">
+            <button className="px-4 py-2 bg-[var(--color-primary-600)] text-white rounded-lg flex items-center gap-2">
+              <Plus className="w-4 h-4" />
+              Create ${ModuleName}
+            </button>
+            <button className="px-4 py-2 border border-[var(--border-color)] rounded-lg">
+              Cancel
+            </button>
+          </div>
+        </div>
+      </section>`;
+}
+
+/**
+ * Generate KPI section UI
+ */
+function generateKPISection(module: string): string {
+  return `          {/* Stats */}
+          <div className="p-4 border-b border-[var(--border-color)] bg-[var(--bg-secondary)]">
+            <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-2">
+              {${module}Stats.map((stat) => (
+                <div
+                  key={stat.label}
+                  className="p-3 bg-[var(--bg-primary)] rounded-lg text-center"
+                  style={{ borderLeft: stat.border ? \`3px solid \${stat.border}\` : undefined }}
+                >
+                  <div className="text-2xl font-bold" style={{ color: stat.color }}>{stat.value}</div>
+                  <div className="text-xs text-[var(--text-secondary)] mt-1">{stat.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>`;
+}
+
+/**
+ * Generate table mock UI section
+ */
+function generateTableMockUI(properties: EntityProperty[], module: string): string {
+  // Smart property selection for table display
+  const filteredProps = properties.filter(p => {
+    const name = p.name.toLowerCase();
+    // Exclude sensitive, internal, and FK properties
+    return !name.includes('hash') &&
+           !name.includes('token') &&
+           !name.includes('password') &&
+           !name.endsWith('id') &&  // Skip foreign keys
+           !name.includes('normalized') &&
+           !name.includes('data') &&  // Skip JSON/blob fields
+           !name.includes('proxy') &&
+           !name.includes('im') &&
+           p.name !== 'Sponsors' &&
+           p.name !== 'ProxyAddresses' &&
+           p.name !== 'ImAddresses';
+  });
+
+  // Prioritize display properties: name/title > email > status > date
+  const priorityProps: EntityProperty[] = [];
+
+  // Add name/title properties first
+  priorityProps.push(...filteredProps.filter(p =>
+    p.name.toLowerCase().includes('name') ||
+    p.name.toLowerCase().includes('title')
+  ).slice(0, 2));
+
+  // Add email if available
+  const emailProp = filteredProps.find(p => p.name.toLowerCase().includes('email'));
+  if (emailProp && !priorityProps.includes(emailProp)) {
+    priorityProps.push(emailProp);
+  }
+
+  // Add status/active properties
+  const statusProp = filteredProps.find(p =>
+    p.name.toLowerCase().includes('active') ||
+    p.name.toLowerCase().includes('status')
+  );
+  if (statusProp && !priorityProps.includes(statusProp)) {
+    priorityProps.push(statusProp);
+  }
+
+  // Fill remaining slots with other properties (max 6 total)
+  const remainingProps = filteredProps.filter(p => !priorityProps.includes(p));
+  priorityProps.push(...remainingProps.slice(0, 6 - priorityProps.length));
+
+  const displayProps = priorityProps.slice(0, 6);
+
+  const headers = displayProps.map(p => `<th className="text-left p-3 font-medium">${p.name}</th>`).join('\n                  ');
+
+  const cells = displayProps.map(p => {
+    const propName = p.name.charAt(0).toLowerCase() + p.name.slice(1);
+
+    if (p.type.toLowerCase() === 'bool' || p.type.toLowerCase() === 'boolean') {
+      return `<td className="p-3">
+                      <span className={\`px-2 py-1 text-xs rounded \${item.${propName} ? 'bg-green-500/10 text-green-600' : 'bg-gray-500/10 text-gray-600'}\`}>
+                        {item.${propName} ? 'Yes' : 'No'}
+                      </span>
+                    </td>`;
+    }
+
+    if (p.type.toLowerCase() === 'datetime') {
+      return `<td className="p-3 text-[var(--text-secondary)]">{new Date(item.${propName}).toLocaleDateString()}</td>`;
+    }
+
+    return `<td className="p-3">{item.${propName}}</td>`;
+  }).join('\n                    ');
+
+  return `        {/* Table */}
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead className="bg-[var(--bg-secondary)]">
+              <tr>
+                ${headers}
+                <th className="text-right p-3 font-medium">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {mock${capitalize(module)}.map((item, idx) => (
+                <tr key={idx} className="border-b border-[var(--border-color)] hover:bg-[var(--bg-hover)]">
+                  ${cells}
+                  <td className="p-3 text-right">
+                    <div className="flex items-center justify-end gap-1">
+                      <button className="p-1.5 hover:bg-[var(--bg-secondary)] rounded">
+                        <Eye className="w-4 h-4" />
+                      </button>
+                      <button className="p-1.5 hover:bg-[var(--bg-secondary)] rounded text-[var(--error-text)]">
+                        <Trash2 className="w-4 h-4" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>`;
+}
+
+/**
+ * Generate complete TSX documentation file
+ */
+function generateDocumentationTSX(
+  moduleInfo: ModuleInfo,
+  properties: EntityProperty[],
+  apiEndpoints: any[],
+  businessRules: any[],
+  pageStructure: PageStructure
+): string {
+  const { module, application } = moduleInfo;
+  const ModuleName = capitalize(module);
+
+  // Generate mock data
+  const mockDataCode = generateMockData(properties, module);
+
+  // Generate KPI stats
+  const kpiStatsCode = generateKPIStats(properties, module);
+  const kpiSectionUI = generateKPISection(module);
+
+  // Generate table UI
+  const tableMockUI = generateTableMockUI(properties, module);
+
+  // Generate form section
+  const formSectionUI = generateFormSection(properties, module);
+
+  // Generate API endpoints mock data
+  const apiEndpointsCode = `const apiEndpoints = ${JSON.stringify(apiEndpoints, null, 2)};`;
+
+  return `import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import {
+  ArrowRight,
+  Shield,
+  Eye,
+  Trash2,
+  Plus,
+  Info,
+  MessageSquare,
+  HelpCircle,
+} from 'lucide-react';
+
+// Mock data for ${ModuleName}
+${mockDataCode}
+
+// KPI Stats
+${kpiStatsCode}
+
+// API endpoints
+${apiEndpointsCode}
+
+export function ${ModuleName}DocPage() {
+  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="/system/docs" className="hover:text-[var(--color-primary-600)]">Documentation</Link>
+        <span>/</span>
+        <Link to="/system/docs/user" className="hover:text-[var(--color-primary-600)]">User</Link>
+        <span>/</span>
+        <span>${ModuleName}</span>
+      </div>
+
+      {/* Header */}
+      <div>
+        <h1 className="text-3xl font-bold mb-4">
+          ${ModuleName} Management
+        </h1>
+        <p className="text-lg text-[var(--text-secondary)]">
+          Complete management interface for ${module}
+        </p>
+      </div>
+
+      {/* Section 1: Introduction */}
+      <section id="introduction" className="card p-6">
+        <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>
+          Introduction
+        </h2>
+        <p className="text-[var(--text-secondary)]">
+          The ${ModuleName} module provides comprehensive management capabilities including
+          viewing, creating, updating, and deleting ${module}.
+        </p>
+      </section>
+
+      {/* Section 2: Access */}
+      <section id="access" className="card p-6">
+        <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>
+          Access
+        </h2>
+
+        <div className="mb-4">
+          <div className="text-sm font-medium mb-2">Navigation</div>
+          <div className="flex items-center gap-2 text-sm bg-[var(--bg-secondary)] p-3 rounded-lg">
+            <span className="px-2 py-1 bg-[var(--bg-primary)] rounded">${capitalize(application)}</span>
+            <ArrowRight className="w-4 h-4 text-[var(--text-tertiary)]" />
+            <span className="px-2 py-1 bg-[var(--color-primary-600)] text-white rounded">${ModuleName}</span>
+          </div>
+        </div>
+
+        <div className="mb-4">
+          <div className="text-sm font-medium mb-2">URL</div>
+          <code className="block p-3 bg-[var(--bg-secondary)] rounded-lg text-sm font-mono">
+            /${application}/${module}
+          </code>
+        </div>
+      </section>
+
+      {/* Section 3: Overview - MOCK UI */}
+      <section id="overview" className="card p-6">
+        <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">3</span>
+          Interface Overview
+        </h2>
+        <p className="text-[var(--text-secondary)] mb-4">
+          The main ${module} interface displays all records in a table format with search and filter capabilities.
+        </p>
+
+        {/* Mock UI - Complete Interface */}
+        <div className="border border-[var(--border-color)] rounded-lg overflow-hidden">
+          {/* Header */}
+          <div className="p-4 border-b border-[var(--border-color)] flex items-center justify-between">
+            <div>
+              <div className="font-bold">${ModuleName} Management</div>
+              <div className="text-sm text-[var(--text-secondary)]">Manage all ${module}</div>
+            </div>
+            <button className="px-4 py-2 bg-[var(--color-primary-600)] text-white rounded-lg flex items-center gap-2 text-sm">
+              <Plus className="w-4 h-4" />
+              New ${ModuleName}
+            </button>
+          </div>
+
+${kpiSectionUI}
+
+          {/* Table */}
+${tableMockUI}
+        </div>
+      </section>
+
+${formSectionUI}
+
+      {/* Section 5: API Reference */}
+      <section id="api" className="card p-6">
+        <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">5</span>
+          API Reference
+        </h2>
+
+        <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">Method</th>
+                <th className="text-left py-2 px-3">Endpoint</th>
+                <th className="text-left py-2 px-3 rounded-tr-lg">Handler</th>
+              </tr>
+            </thead>
+            <tbody>
+              {apiEndpoints.map((endpoint, index) => (
+                <tr key={index} className="border-b border-[var(--border-color)]">
+                  <td className="py-2 px-3">
+                    <span className={\`px-2 py-0.5 rounded text-xs font-medium \${
+                      endpoint.method === 'GET' ? 'bg-green-500/10 text-green-600' :
+                      endpoint.method === 'POST' ? 'bg-yellow-500/10 text-yellow-600' :
+                      endpoint.method === 'PUT' ? 'bg-blue-500/10 text-blue-600' :
+                      'bg-red-500/10 text-red-600'
+                    }\`}>
+                      {endpoint.method}
+                    </span>
+                  </td>
+                  <td className="py-2 px-3 font-mono text-xs">{endpoint.path}</td>
+                  <td className="py-2 px-3 text-[var(--text-secondary)]">{endpoint.handler}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}
+`;
+}
+
+/**
+ * Capitalize first letter
+ */
+function capitalize(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+/**
+ * Simple singularize function for common English plurals
+ */
+function singularize(str: string): string {
+  if (str.endsWith('ies')) {
+    return str.slice(0, -3) + 'y';
+  }
+  if (str.endsWith('sses') || str.endsWith('shes') || str.endsWith('ches') || str.endsWith('xes')) {
+    return str.slice(0, -2);
+  }
+  if (str.endsWith('s') && !str.endsWith('ss')) {
+    return str.slice(0, -1);
+  }
+  return str;
+}
+
+/**
+ * Main execution
+ */
+async function main() {
+  const moduleInfo = parseArgs();
+  const { module, application, appPath } = moduleInfo;
+
+  console.error(`\n🚀 Generating documentation for: ${application}/${module}\n`);
+
+  // 1. Find entity file
+  console.error('📁 Finding entity file...');
+  const entityPath = await findEntityFile(appPath, module);
+  if (!entityPath) {
+    console.error(`❌ Entity not found for module: ${module}`);
+    process.exit(1);
+  }
+  console.error(`✅ Found: ${entityPath}`);
+
+  // 2. Extract entity properties
+  console.error('\n📊 Extracting entity properties...');
+  const properties = extractEntityProperties(entityPath);
+  console.error(`✅ Extracted ${properties.length} properties`);
+
+  // 3. Find page file
+  console.error('\n📄 Finding React page...');
+  const pagePath = await findPageFile(appPath, module, application);
+  if (pagePath) {
+    console.error(`✅ Found: ${pagePath}`);
+  } else {
+    console.error(`⚠️  Page not found (will use defaults)`);
+  }
+
+  // 4. Analyze page structure
+  const pageStructure = pagePath ? analyzePageStructure(pagePath) : {
+    hasTable: true,
+    hasKPIs: false,
+    hasForm: false,
+    hasFilters: false,
+    columns: [],
+  };
+
+  // 5. Extract API endpoints using existing script
+  console.error('\n🔌 Extracting API endpoints...');
+  let apiEndpoints: any[] = [];
+  try {
+    const endpointsOutput = execSync(
+      `npx tsx "${__dirname}/extract-api-endpoints.ts" --module ${module} --app-path "${appPath}"`,
+      { encoding: 'utf-8' }
+    );
+    apiEndpoints = JSON.parse(endpointsOutput);
+    console.error(`✅ Extracted ${apiEndpoints.length} endpoints`);
+  } catch (error) {
+    console.error(`⚠️  Could not extract endpoints`);
+  }
+
+  // 6. Extract business rules using existing script
+  console.error('\n📋 Extracting business rules...');
+  let businessRules: any[] = [];
+  try {
+    const rulesOutput = execSync(
+      `npx tsx "${__dirname}/extract-business-rules.ts" --module ${module} --app-path "${appPath}"`,
+      { encoding: 'utf-8' }
+    );
+    businessRules = JSON.parse(rulesOutput);
+    console.error(`✅ Extracted ${businessRules.length} business rules`);
+  } catch (error) {
+    console.error(`⚠️  Could not extract business rules`);
+  }
+
+  // 7. Generate documentation TSX
+  console.error('\n✨ Generating documentation TSX...');
+  const tsx = generateDocumentationTSX(moduleInfo, properties, apiEndpoints, businessRules, pageStructure);
+
+  // 8. Output
+  console.log(tsx);
+  console.error('\n✅ Documentation generated successfully!');
+}
+
+main().catch((error) => {
+  console.error('❌ Fatal error:', error);
+  process.exit(1);
+});