@specverse/engines 4.1.0

package/libs/instance-factories/views/templates/react/components-generator.ts

@@ -0,0 +1,887 @@
+/**
+ * React Components Generator — Pattern-Aware
+ *
+ * Generates React components following app-demo's design patterns:
+ * - Field classification (business, lifecycle, relationship, metadata)
+ * - Relationship resolution (FK → display name)
+ * - Lifecycle badges with status colors
+ * - Smart field ordering and grouping
+ *
+ * Components import shared utilities from src/lib/ (generated by shared-utils-generator).
+ */
+
+import type { TemplateContext } from '@specverse/types';
+
+// ============================================================================
+// Entry point
+// ============================================================================
+
+export default function generateReactComponent(context: TemplateContext): string {
+  const { view, model, spec } = context;
+  if (!view) throw new Error('View is required in template context');
+
+  const componentName = view.name || `${model?.name || 'Unknown'}View`;
+  let modelName: string;
+  if (model?.name) modelName = model.name;
+  else if (Array.isArray(view.model)) modelName = view.model[0];
+  else if (view.model) modelName = view.model;
+  else modelName = view.modelReference || 'Unknown';
+
+  const viewType = view.type || 'list';
+  const lower = modelName.charAt(0).toLowerCase() + modelName.slice(1);
+  const plural = `${lower}s`;
+  const api = `/api/${plural}`;
+  const attrs = getModelAttributes(model);
+  const belongsTo = getBelongsToRelationships(model);
+  const hasMany = getHasManyRelationships(model);
+  const lifecycle = getLifecycle(model);
+  const classified = classifyAttrs(attrs, lifecycle);
+
+  switch (viewType) {
+    case 'list':
+      return generateListView(componentName, modelName, lower, plural, api, classified, belongsTo, lifecycle, view);
+    case 'detail':
+      return generateDetailView(componentName, modelName, lower, plural, api, classified, belongsTo, hasMany, lifecycle, view);
+    case 'form':
+      return generateFormView(componentName, modelName, lower, plural, api, classified, belongsTo, lifecycle, view);
+    case 'dashboard':
+      return generateDashboardView(componentName, modelName, lower, plural, api, classified, view, model);
+    case 'board':
+    case 'workflow':
+      return generateBoardView(componentName, modelName, lower, plural, api, lifecycle, view);
+    case 'timeline':
+      return generateTimelineView(componentName, modelName, lower, plural, api, view);
+    case 'calendar':
+      return generateCalendarView(componentName, modelName, lower, plural, api, view, model);
+    case 'analytics':
+      return generateAnalyticsView(componentName, modelName, lower, plural, api, classified, lifecycle, view, model);
+    default:
+      return generateListView(componentName, modelName, lower, plural, api, classified, belongsTo, lifecycle, view);
+  }
+}
+
+// ============================================================================
+// Model introspection helpers
+// ============================================================================
+
+interface Attr { name: string; type: string; required?: boolean; auto?: string; values?: string[] }
+interface Rel { name: string; target: string; type: string; cascade?: boolean }
+interface Lifecycle { name: string; states: string[]; statusField: string }
+interface ClassifiedAttrs { business: Attr[]; lifecycle: Attr[]; metadata: Attr[]; all: Attr[] }
+
+function getModelAttributes(model: any): Attr[] {
+  if (!model?.attributes) return [];
+  const attrs = Array.isArray(model.attributes) ? model.attributes
+    : Object.entries(model.attributes).map(([name, def]: [string, any]) => {
+        if (typeof def === 'string') {
+          const parts = def.split(' ');
+          return { name, type: parts[0], required: parts.includes('required'), auto: parts.find((p: string) => p.startsWith('auto='))?.split('=')[1], values: extractValues(def) };
+        }
+        return { name, ...def };
+      });
+  return attrs;
+}
+
+function extractValues(def: string): string[] | undefined {
+  const match = def.match(/values=\[([^\]]+)\]/);
+  if (match) return match[1].split(',').map((s: string) => s.trim());
+  return undefined;
+}
+
+function getBelongsToRelationships(model: any): Rel[] {
+  if (!model?.relationships) return [];
+  const rels = Array.isArray(model.relationships) ? model.relationships
+    : Object.entries(model.relationships).map(([name, def]: [string, any]) => {
+        if (typeof def === 'string') {
+          const parts = def.split(' ');
+          return { name, type: parts[0], target: parts[1], cascade: parts.includes('cascade') };
+        }
+        return { name, ...def };
+      });
+  return rels.filter((r: any) => r.type === 'belongsTo');
+}
+
+function getHasManyRelationships(model: any): Rel[] {
+  if (!model?.relationships) return [];
+  const rels = Array.isArray(model.relationships) ? model.relationships
+    : Object.entries(model.relationships).map(([name, def]: [string, any]) => {
+        if (typeof def === 'string') {
+          const parts = def.split(' ');
+          return { name, type: parts[0], target: parts[1] };
+        }
+        return { name, ...def };
+      });
+  return rels.filter((r: any) => r.type === 'hasMany');
+}
+
+function getLifecycle(model: any): Lifecycle | null {
+  if (!model?.lifecycles) return null;
+  const entries = Array.isArray(model.lifecycles) ? model.lifecycles
+    : Object.entries(model.lifecycles).map(([name, lc]: [string, any]) => ({ name, ...lc }));
+  if (entries.length === 0) return null;
+  const lc = entries[0];
+  const states = lc.states || lc.flow?.split(/\s*->\s*/) || [];
+  return { name: lc.name || 'status', states, statusField: lc.name || 'status' };
+}
+
+const METADATA_FIELDS = new Set(['id', 'createdAt', 'updatedAt', 'createdBy', 'updatedBy', 'deletedAt', 'version']);
+
+function classifyAttrs(attrs: Attr[], lifecycle: Lifecycle | null): ClassifiedAttrs {
+  const business: Attr[] = [];
+  const lifecycleAttrs: Attr[] = [];
+  const metadata: Attr[] = [];
+  for (const a of attrs) {
+    if (a.auto || METADATA_FIELDS.has(a.name)) metadata.push(a);
+    else if (lifecycle && a.name === lifecycle.statusField) lifecycleAttrs.push(a);
+    else if (['status', 'state', 'phase'].includes(a.name)) lifecycleAttrs.push(a);
+    else business.push(a);
+  }
+  return { business, lifecycle: lifecycleAttrs, metadata, all: attrs };
+}
+
+function pluralize(s: string): string {
+  if (s.endsWith('s')) return s;
+  if (s.endsWith('y')) return s.slice(0, -1) + 'ies';
+  return s + 's';
+}
+
+// ============================================================================
+// LIST VIEW
+// ============================================================================
+
+function generateListView(name: string, model: string, lower: string, plural: string, api: string, classified: ClassifiedAttrs, belongsTo: Rel[], lifecycle: Lifecycle | null, view: any): string {
+  const displayCols = classified.business.slice(0, 5);
+  const statusField = lifecycle?.statusField || classified.lifecycle[0]?.name;
+
+  // Build relationship lookup fetches
+  const relFetches = belongsTo.map(r => {
+    const tLower = r.target.charAt(0).toLowerCase() + r.target.slice(1);
+    return `  const [${tLower}Map, set${r.target}Map] = useState<Record<string, any>>({});`;
+  }).join('\n');
+
+  const relEffects = belongsTo.map(r => {
+    const tLower = r.target.charAt(0).toLowerCase() + r.target.slice(1);
+    return `    fetch('/api/${tLower}s').then(r => r.json()).then(data => {
+      if (Array.isArray(data)) {
+        const m: Record<string, any> = {};
+        data.forEach(e => { m[e.id] = e; });
+        set${r.target}Map(m);
+      }
+    }).catch(() => {});`;
+  }).join('\n');
+
+  const relColumns = belongsTo.map(r => {
+    const tLower = r.target.charAt(0).toLowerCase() + r.target.slice(1);
+    const fk = `${r.name}_id`;
+    return { header: r.target, cell: `{${tLower}Map[item.${fk}] ? getEntityDisplayName(${tLower}Map[item.${fk}]) : (item.${fk} ? item.${fk}.slice(0,8)+'...' : '—')}` };
+  });
+
+  return `import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { getEntityDisplayName } from '../lib/field-helpers';
+import { formatValue, formatDate, StatusBadge } from '../lib/view-helpers';
+
+function ${name}() {
+  const [items, setItems] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+${relFetches}
+
+  useEffect(() => {
+    fetch('${api}').then(r => r.json()).then(data => {
+      setItems(Array.isArray(data) ? data : []);
+      setLoading(false);
+    }).catch(() => setLoading(false));
+${relEffects}
+  }, []);
+
+  if (loading) return <div className="flex items-center justify-center h-64 text-gray-400">Loading...</div>;
+
+  return (
+    <div className="p-6">
+      <div className="flex justify-between items-center mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">${pluralize(model)}</h1>
+          <p className="text-sm text-gray-500 mt-1">{items.length} ${lower}{items.length !== 1 ? 's' : ''}</p>
+        </div>
+        <Link to="/${lower}form" className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
+          + New ${model}
+        </Link>
+      </div>
+
+      {items.length === 0 ? (
+        <div className="text-center py-16 bg-white rounded-lg border border-dashed border-gray-300">
+          <p className="text-gray-500">No ${plural} yet</p>
+          <Link to="/${lower}form" className="mt-3 inline-block text-blue-600 hover:text-blue-700 text-sm font-medium">Create your first ${lower} →</Link>
+        </div>
+      ) : (
+        <div className="bg-white rounded-lg border border-gray-200 shadow-sm overflow-hidden">
+          <table className="min-w-full divide-y divide-gray-200">
+            <thead className="bg-gray-50 sticky top-0">
+              <tr>
+${displayCols.map(c => `                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">${c.name}</th>`).join('\n')}
+${relColumns.map(r => `                <th className="px-4 py-3 text-left text-xs font-medium text-blue-600 uppercase tracking-wider">${r.header}</th>`).join('\n')}
+${statusField ? `                <th className="px-4 py-3 text-left text-xs font-medium text-purple-600 uppercase tracking-wider">Status</th>` : ''}
+                <th className="px-4 py-3 text-left text-xs font-medium text-gray-400 uppercase tracking-wider italic">Created</th>
+                <th className="px-4 py-3"></th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-gray-200">
+              {items.map((item) => (
+                <tr key={item.id} className="hover:bg-gray-50 cursor-pointer transition-colors" onClick={() => window.location.href = \`/${lower}detail?id=\${item.id}\`}>
+${displayCols.map(c => `                  <td className="px-4 py-3 text-sm text-gray-900">{formatValue(item.${c.name}, '${c.type}')}</td>`).join('\n')}
+${relColumns.map(r => `                  <td className="px-4 py-3 text-sm text-blue-700">${r.cell}</td>`).join('\n')}
+${statusField ? `                  <td className="px-4 py-3"><StatusBadge status={item.${statusField}} variant="lifecycle" /></td>` : ''}
+                  <td className="px-4 py-3 text-xs text-gray-400 font-mono">{formatDate(item.createdAt)}</td>
+                  <td className="px-4 py-3 text-right">
+                    <Link to={\`/${lower}form?id=\${item.id}\`} className="text-blue-600 hover:text-blue-800 text-sm font-medium" onClick={e => e.stopPropagation()}>Edit</Link>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ${name};
+`;
+}
+
+// ============================================================================
+// DETAIL VIEW
+// ============================================================================
+
+function generateDetailView(name: string, model: string, lower: string, plural: string, api: string, classified: ClassifiedAttrs, belongsTo: Rel[], hasMany: Rel[], lifecycle: Lifecycle | null, view: any): string {
+  const statusField = lifecycle?.statusField || classified.lifecycle[0]?.name;
+
+  const relFetches = belongsTo.map(r => {
+    const tLower = r.target.charAt(0).toLowerCase() + r.target.slice(1);
+    return `  const [${tLower}Ref, set${r.target}Ref] = useState<any>(null);`;
+  }).join('\n');
+
+  const relEffects = belongsTo.map(r => {
+    const tLower = r.target.charAt(0).toLowerCase() + r.target.slice(1);
+    const fk = `${r.name}_id`;
+    return `      if (data.${fk}) fetch(\`/api/${tLower}s/\${data.${fk}}\`).then(r => r.json()).then(d => set${r.target}Ref(d)).catch(() => {});`;
+  }).join('\n');
+
+  const hasManyFetches = hasMany.map(r => {
+    const tLower = r.target.charAt(0).toLowerCase() + r.target.slice(1);
+    return `  const [${r.name}Items, set${capitalize(r.name)}Items] = useState<any[]>([]);`;
+  }).join('\n');
+
+  const hasManyEffects = hasMany.map(r => {
+    const tLower = r.target.charAt(0).toLowerCase() + r.target.slice(1);
+    return `      fetch(\`/api/${tLower}s?${lower}Id=\${data.id}\`).then(r => r.json()).then(d => set${capitalize(r.name)}Items(Array.isArray(d) ? d : [])).catch(() => {});`;
+  }).join('\n');
+
+  return `import { useState, useEffect } from 'react';
+import { Link, useSearchParams, useNavigate } from 'react-router-dom';
+import { getEntityDisplayName } from '../lib/field-helpers';
+import { formatValue, formatDate, StatusBadge } from '../lib/view-helpers';
+
+function ${name}() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const id = searchParams.get('id');
+  const [item, setItem] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+${relFetches}
+${hasManyFetches}
+
+  useEffect(() => {
+    if (!id) { setLoading(false); return; }
+    fetch(\`${api}/\${id}\`).then(r => r.ok ? r.json() : null).then(data => {
+      setItem(data);
+      setLoading(false);
+      if (data) {
+${relEffects}
+${hasManyEffects}
+      }
+    }).catch(() => setLoading(false));
+  }, [id]);
+
+  if (loading) return <div className="flex items-center justify-center h-64 text-gray-400">Loading...</div>;
+  if (!item) return <div className="p-6 text-gray-500">Not found</div>;
+
+  const handleDelete = async () => {
+    if (!confirm('Delete this ${lower}?')) return;
+    await fetch(\`${api}/\${id}\`, { method: 'DELETE' });
+    navigate('/${lower}list');
+  };
+
+  return (
+    <div className="p-6 max-w-3xl">
+      {/* Header */}
+      <div className="flex items-start justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">{getEntityDisplayName(item)}</h1>
+${statusField ? `          <div className="mt-2"><StatusBadge status={item.${statusField}} /></div>` : ''}
+        </div>
+        <div className="flex gap-2">
+          <Link to={\`/${lower}form?id=\${id}\`} className="px-3 py-1.5 text-sm font-medium text-blue-600 border border-blue-200 rounded-lg hover:bg-blue-50">Edit</Link>
+          <button onClick={handleDelete} className="px-3 py-1.5 text-sm font-medium text-red-600 border border-red-200 rounded-lg hover:bg-red-50">Delete</button>
+        </div>
+      </div>
+
+      {/* Business Fields */}
+      <div className="bg-white rounded-lg border border-gray-200 shadow-sm mb-6">
+        <div className="divide-y divide-gray-100">
+${classified.business.map(a => `          <div className="px-5 py-3 flex justify-between">
+            <span className="text-sm text-gray-500">${a.name.charAt(0).toUpperCase() + a.name.slice(1)}</span>
+            <span className="text-sm text-gray-900">{formatValue(item.${a.name}, '${a.type}')}</span>
+          </div>`).join('\n')}
+        </div>
+      </div>
+
+${belongsTo.length > 0 ? `      {/* Relationships */}
+      <div className="bg-white rounded-lg border border-gray-200 shadow-sm mb-6">
+        <div className="px-5 py-3 border-b border-gray-100">
+          <h3 className="text-sm font-medium text-gray-700">Related</h3>
+        </div>
+        <div className="divide-y divide-gray-100">
+${belongsTo.map(r => {
+  const tLower = r.target.charAt(0).toLowerCase() + r.target.slice(1);
+  return `          <div className="px-5 py-3 flex justify-between items-center">
+            <span className="text-sm text-gray-500">${r.target}</span>
+            {${tLower}Ref ? (
+              <Link to={\`/${tLower}detail?id=\${${tLower}Ref.id}\`} className="text-sm text-blue-600 hover:text-blue-800">{getEntityDisplayName(${tLower}Ref)}</Link>
+            ) : <span className="text-sm text-gray-400">—</span>}
+          </div>`;
+}).join('\n')}
+        </div>
+      </div>` : ''}
+
+${hasMany.map(r => {
+  const tLower = r.target.charAt(0).toLowerCase() + r.target.slice(1);
+  return `      {/* ${r.target} */}
+      <div className="bg-white rounded-lg border border-gray-200 shadow-sm mb-6">
+        <div className="px-5 py-3 border-b border-gray-100 flex justify-between items-center">
+          <h3 className="text-sm font-medium text-gray-700">${pluralize(r.target)} ({${r.name}Items.length})</h3>
+          <Link to={\`/${tLower}form?${lower}Id=\${id}\`} className="text-xs text-blue-600 hover:text-blue-800">+ Add</Link>
+        </div>
+        <ul className="divide-y divide-gray-100">
+          {${r.name}Items.slice(0, 10).map((child: any, i: number) => (
+            <li key={i} className="px-5 py-2.5 flex justify-between items-center hover:bg-gray-50">
+              <Link to={\`/${tLower}detail?id=\${child.id}\`} className="text-sm text-gray-900 hover:text-blue-600">{getEntityDisplayName(child)}</Link>
+              {child.status && <StatusBadge status={child.status} />}
+            </li>
+          ))}
+          {${r.name}Items.length === 0 && <li className="px-5 py-3 text-sm text-gray-400">None yet</li>}
+        </ul>
+      </div>`;
+}).join('\n')}
+
+      {/* Metadata */}
+      <div className="text-xs text-gray-400 space-y-1">
+        <div>ID: {item.id}</div>
+        {item.createdAt && <div>Created: {formatDate(item.createdAt)}</div>}
+        {item.updatedAt && <div>Updated: {formatDate(item.updatedAt)}</div>}
+      </div>
+    </div>
+  );
+}
+
+export default ${name};
+`;
+}
+
+// ============================================================================
+// FORM VIEW
+// ============================================================================
+
+function generateFormView(name: string, model: string, lower: string, plural: string, api: string, classified: ClassifiedAttrs, belongsTo: Rel[], lifecycle: Lifecycle | null, view: any): string {
+  // Only show editable fields (business + lifecycle, not metadata/auto)
+  const editableFields = [...classified.business, ...classified.lifecycle];
+  const statusField = lifecycle?.statusField;
+
+  const relStates = belongsTo.map(r => {
+    return `  const [${r.target.charAt(0).toLowerCase() + r.target.slice(1)}Options, set${r.target}Options] = useState<any[]>([]);`;
+  }).join('\n');
+
+  const relEffects = belongsTo.map(r => {
+    const tLower = r.target.charAt(0).toLowerCase() + r.target.slice(1);
+    return `    fetch('/api/${tLower}s').then(r => r.json()).then(d => set${r.target}Options(Array.isArray(d) ? d : [])).catch(() => {});`;
+  }).join('\n');
+
+  function inputForField(attr: Attr): string {
+    const { name: n, type, required, values } = attr;
+    const req = required ? ' required' : '';
+
+    // Enum dropdown
+    if (values && values.length > 0) {
+      return `        <select name="${n}" value={form.${n} || ''} onChange={handleChange} className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"${req}>
+          <option value="">Select...</option>
+${values.map(v => `          <option value="${v}">${v}</option>`).join('\n')}
+        </select>`;
+    }
+
+    // Lifecycle status dropdown
+    if (lifecycle && n === statusField) {
+      return `        <select name="${n}" value={form.${n} || ''} onChange={handleChange} className="w-full px-3 py-2 border border-gray-300 border-l-4 border-l-purple-600 rounded text-sm focus:outline-none focus:ring-2 focus:ring-purple-500"${req}>
+          <option value="">Select status...</option>
+${lifecycle.states.map(s => `          <option value="${s}">${s.replace(/[_-]/g, ' ')}</option>`).join('\n')}
+        </select>`;
+    }
+
+    const t = type.toLowerCase();
+    if (t === 'boolean') return `        <input type="checkbox" name="${n}" checked={!!form.${n}} onChange={e => setForm(f => ({...f, ${n}: e.target.checked}))} className="h-4 w-4 text-blue-600 rounded" />`;
+    if (t.includes('date') || t.includes('timestamp')) return `        <input type="datetime-local" name="${n}" value={form.${n} || ''} onChange={handleChange} className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"${req} />`;
+    if (t === 'integer' || t === 'number' || t === 'money' || t === 'decimal' || t === 'float') return `        <input type="number" name="${n}" value={form.${n} || ''} onChange={handleChange} className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"${req} />`;
+    if (n.toLowerCase().includes('description') || n.toLowerCase().includes('content') || n.toLowerCase().includes('body')) return `        <textarea name="${n}" value={form.${n} || ''} onChange={handleChange} rows={4} className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"${req} />`;
+    if (t === 'email') return `        <input type="email" name="${n}" value={form.${n} || ''} onChange={handleChange} className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"${req} />`;
+    return `        <input type="text" name="${n}" value={form.${n} || ''} onChange={handleChange} className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"${req} />`;
+  }
+
+  return `import { useState, useEffect } from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import { getEntityDisplayName } from '../lib/field-helpers';
+
+function ${name}() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const editId = searchParams.get('id');
+  const [form, setForm] = useState<any>({});
+  const [error, setError] = useState('');
+  const [saving, setSaving] = useState(false);
+${relStates}
+
+  useEffect(() => {
+    if (editId) {
+      fetch(\`${api}/\${editId}\`).then(r => r.json()).then(data => setForm(data || {})).catch(() => {});
+    }
+${relEffects}
+  }, [editId]);
+
+  const handleChange = (e: any) => {
+    const { name, value, type } = e.target;
+    setForm((f: any) => ({ ...f, [name]: type === 'number' ? Number(value) : value }));
+  };
+
+  const handleSubmit = async (e: any) => {
+    e.preventDefault();
+    setSaving(true);
+    setError('');
+    try {
+      const method = editId ? 'PUT' : 'POST';
+      const url = editId ? \`${api}/\${editId}\` : '${api}';
+      const res = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(form),
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.message || 'Save failed');
+      }
+      navigate('/${lower}list');
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="p-6 max-w-2xl">
+      <h1 className="text-2xl font-bold text-gray-900 mb-6">{editId ? 'Edit' : 'New'} ${model}</h1>
+
+      {error && (
+        <div className="mb-4 p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">{error}</div>
+      )}
+
+      <form onSubmit={handleSubmit} className="bg-white rounded-lg border border-gray-200 shadow-sm">
+        <div className="p-6 space-y-5">
+${editableFields.map(a => `          {/* ${a.name} */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              ${a.name.charAt(0).toUpperCase() + a.name.slice(1)}${a.required ? ' *' : ''}
+            </label>
+${inputForField(a)}
+          </div>`).join('\n\n')}
+
+${belongsTo.map(r => {
+  const tLower = r.target.charAt(0).toLowerCase() + r.target.slice(1);
+  const fk = `${r.name}_id`;
+  return `          {/* ${r.target} (relationship) */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">${r.target}</label>
+            <select name="${fk}" value={form.${fk} || ''} onChange={handleChange} className="w-full px-3 py-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+              <option value="">Select ${r.target}...</option>
+              {${tLower}Options.map((opt: any) => (
+                <option key={opt.id} value={opt.id}>{getEntityDisplayName(opt)}</option>
+              ))}
+            </select>
+          </div>`;
+}).join('\n\n')}
+        </div>
+
+        <div className="px-6 py-4 bg-gray-50 border-t border-gray-200 rounded-b-lg flex justify-end gap-3">
+          <button type="button" onClick={() => navigate(-1)} className="px-4 py-2 text-sm font-medium text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-100">
+            Cancel
+          </button>
+          <button type="submit" disabled={saving} className="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50">
+            {saving ? 'Saving...' : (editId ? 'Update' : 'Create')}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default ${name};
+`;
+}
+
+// ============================================================================
+// DASHBOARD VIEW
+// ============================================================================
+
+function generateDashboardView(name: string, model: string, lower: string, plural: string, api: string, classified: ClassifiedAttrs, view: any, modelDef: any): string {
+  const numericAttrs = classified.business.filter(a => ['integer', 'number', 'money', 'decimal', 'float'].includes(a.type.toLowerCase()));
+  const metricNames = numericAttrs.map(a => a.name).slice(0, 4);
+
+  return `import { useState, useEffect } from 'react';
+import { getEntityDisplayName } from '../lib/field-helpers';
+import { formatDate, StatusBadge } from '../lib/view-helpers';
+
+function ${name}() {
+  const [items, setItems] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('${api}').then(r => r.json()).then(data => {
+      setItems(Array.isArray(data) ? data : []);
+      setLoading(false);
+    }).catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <div className="flex items-center justify-center h-64 text-gray-400">Loading...</div>;
+
+  const total = items.length;
+${metricNames.map(m => `  const ${m}Total = items.reduce((sum, item) => sum + (Number(item.${m}) || 0), 0);`).join('\n')}
+
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold text-gray-900">${model} Dashboard</h1>
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <div className="bg-white rounded-lg border border-gray-200 shadow-sm p-5">
+          <p className="text-sm text-gray-500">Total</p>
+          <p className="text-3xl font-bold text-blue-600">{total}</p>
+        </div>
+${metricNames.map(m => `        <div className="bg-white rounded-lg border border-gray-200 shadow-sm p-5">
+          <p className="text-sm text-gray-500">${m.charAt(0).toUpperCase() + m.slice(1)}</p>
+          <p className="text-3xl font-bold text-blue-600">{${m}Total}</p>
+        </div>`).join('\n')}
+      </div>
+
+      <div className="bg-white rounded-lg border border-gray-200 shadow-sm">
+        <div className="px-5 py-4 border-b border-gray-200">
+          <h2 className="text-lg font-medium text-gray-900">Recent</h2>
+        </div>
+        <ul className="divide-y divide-gray-100">
+          {items.slice(0, 8).map((item, i) => (
+            <li key={i} className="px-5 py-3 flex justify-between items-center">
+              <span className="text-sm text-gray-900">{getEntityDisplayName(item)}</span>
+              <div className="flex items-center gap-3">
+                {item.status && <StatusBadge status={item.status} />}
+                <span className="text-xs text-gray-400">{formatDate(item.createdAt)}</span>
+              </div>
+            </li>
+          ))}
+          {items.length === 0 && <li className="px-5 py-3 text-sm text-gray-400">No ${plural} yet</li>}
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default ${name};
+`;
+}
+
+// ============================================================================
+// BOARD VIEW (lifecycle kanban)
+// ============================================================================
+
+function generateBoardView(name: string, model: string, lower: string, plural: string, api: string, lifecycle: Lifecycle | null, view: any): string {
+  const states = lifecycle?.states || ['todo', 'in_progress', 'done'];
+  const statusField = lifecycle?.statusField || 'status';
+
+  return `import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { getEntityDisplayName } from '../lib/field-helpers';
+import { statusColor } from '../lib/view-helpers';
+
+function ${name}() {
+  const [items, setItems] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('${api}').then(r => r.json()).then(data => {
+      setItems(Array.isArray(data) ? data : []);
+      setLoading(false);
+    }).catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <div className="flex items-center justify-center h-64 text-gray-400">Loading...</div>;
+
+  const columns = ${JSON.stringify(states)};
+  const grouped: Record<string, any[]> = {};
+  columns.forEach(col => { grouped[col] = []; });
+  items.forEach(item => {
+    const col = item.${statusField} || columns[0];
+    if (grouped[col]) grouped[col].push(item);
+    else grouped[columns[columns.length - 1]]?.push(item);
+  });
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold text-gray-900 mb-6">${model} Board</h1>
+      <div className="flex gap-4 overflow-x-auto pb-4">
+        {columns.map(col => {
+          const colors = statusColor(col);
+          return (
+            <div key={col} className="flex-shrink-0 w-72 bg-gray-50 rounded-lg border border-gray-200">
+              <div className="p-3 border-b border-gray-200 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <span className={\`w-2 h-2 rounded-full \${colors.dot}\`}></span>
+                  <h3 className="text-sm font-semibold text-gray-700">{col.replace(/[_-]/g, ' ')}</h3>
+                </div>
+                <span className="text-xs text-gray-400 font-medium">{(grouped[col] || []).length}</span>
+              </div>
+              <div className="p-2 space-y-2 min-h-[200px]">
+                {(grouped[col] || []).map((item, i) => (
+                  <Link key={i} to={\`/${lower}detail?id=\${item.id}\`} className="block bg-white rounded-md border border-gray-200 p-3 hover:shadow-md transition-shadow">
+                    <p className="text-sm font-medium text-gray-900">{getEntityDisplayName(item)}</p>
+                    {item.description && <p className="text-xs text-gray-500 mt-1 line-clamp-2">{item.description}</p>}
+                  </Link>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default ${name};
+`;
+}
+
+// ============================================================================
+// TIMELINE VIEW
+// ============================================================================
+
+function generateTimelineView(name: string, model: string, lower: string, plural: string, api: string, view: any): string {
+  return `import { useState, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { getEntityDisplayName } from '../lib/field-helpers';
+import { formatDate, StatusBadge } from '../lib/view-helpers';
+
+function ${name}() {
+  const [items, setItems] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('${api}').then(r => r.json()).then(data => {
+      const sorted = (Array.isArray(data) ? data : []).sort((a, b) =>
+        new Date(b.createdAt || 0).getTime() - new Date(a.createdAt || 0).getTime()
+      );
+      setItems(sorted);
+      setLoading(false);
+    }).catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <div className="flex items-center justify-center h-64 text-gray-400">Loading...</div>;
+
+  return (
+    <div className="p-6 max-w-3xl">
+      <h1 className="text-2xl font-bold text-gray-900 mb-6">${model} Timeline</h1>
+      <div className="relative">
+        <div className="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200"></div>
+        <div className="space-y-4">
+          {items.map((item, i) => (
+            <div key={i} className="relative flex items-start ml-4 pl-6">
+              <div className="absolute -left-1.5 mt-2 w-3 h-3 rounded-full bg-blue-500 border-2 border-white shadow"></div>
+              <Link to={\`/${lower}detail?id=\${item.id}\`} className="bg-white rounded-lg border border-gray-200 shadow-sm p-4 flex-1 hover:shadow-md transition-shadow">
+                <div className="flex justify-between items-start">
+                  <h3 className="text-sm font-medium text-gray-900">{getEntityDisplayName(item)}</h3>
+                  <time className="text-xs text-gray-400 ml-4">{formatDate(item.createdAt)}</time>
+                </div>
+                {item.description && <p className="text-sm text-gray-500 mt-1 line-clamp-2">{item.description}</p>}
+                {item.status && <div className="mt-2"><StatusBadge status={item.status} /></div>}
+              </Link>
+            </div>
+          ))}
+          {items.length === 0 && <p className="ml-10 text-sm text-gray-400">No ${plural} yet</p>}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ${name};
+`;
+}
+
+// ============================================================================
+// CALENDAR VIEW
+// ============================================================================
+
+function generateCalendarView(name: string, model: string, lower: string, plural: string, api: string, view: any, modelDef: any): string {
+  const attrs = getModelAttributes(modelDef);
+  const dateField = attrs.find(a =>
+    ['startdate', 'duedate', 'scheduledat', 'eventdate', 'date'].includes(a.name.toLowerCase())
+  )?.name || 'createdAt';
+
+  return `import { useState, useEffect } from 'react';
+import { getEntityDisplayName } from '../lib/field-helpers';
+
+function ${name}() {
+  const [items, setItems] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [currentMonth, setCurrentMonth] = useState(new Date());
+
+  useEffect(() => {
+    fetch('${api}').then(r => r.json()).then(data => {
+      setItems(Array.isArray(data) ? data : []);
+      setLoading(false);
+    }).catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <div className="flex items-center justify-center h-64 text-gray-400">Loading...</div>;
+
+  const year = currentMonth.getFullYear();
+  const month = currentMonth.getMonth();
+  const firstDay = new Date(year, month, 1).getDay();
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+  const blanks = Array.from({ length: firstDay }, (_, i) => i);
+
+  const getItemsForDay = (day: number) => items.filter(item => {
+    const d = new Date(item.${dateField} || item.createdAt);
+    return d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
+  });
+
+  return (
+    <div className="p-6">
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-bold text-gray-900">${model} Calendar</h1>
+        <div className="flex items-center gap-3">
+          <button onClick={() => setCurrentMonth(new Date(year, month - 1, 1))} className="p-2 hover:bg-gray-100 rounded-lg text-gray-600">&larr;</button>
+          <span className="text-lg font-medium text-gray-900 w-48 text-center">{currentMonth.toLocaleString('default', { month: 'long', year: 'numeric' })}</span>
+          <button onClick={() => setCurrentMonth(new Date(year, month + 1, 1))} className="p-2 hover:bg-gray-100 rounded-lg text-gray-600">&rarr;</button>
+        </div>
+      </div>
+      <div className="grid grid-cols-7 gap-px bg-gray-200 rounded-lg overflow-hidden border border-gray-200">
+        {['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].map(d => (
+          <div key={d} className="bg-gray-50 p-2 text-xs font-medium text-gray-500 text-center">{d}</div>
+        ))}
+        {blanks.map(i => <div key={\`b\${i}\`} className="bg-white p-2 min-h-[80px]"></div>)}
+        {days.map(day => {
+          const dayItems = getItemsForDay(day);
+          const isToday = day === new Date().getDate() && month === new Date().getMonth() && year === new Date().getFullYear();
+          return (
+            <div key={day} className="bg-white p-2 min-h-[80px]">
+              <span className={\`text-sm \${isToday ? 'bg-blue-600 text-white w-6 h-6 rounded-full inline-flex items-center justify-center' : dayItems.length > 0 ? 'font-bold text-blue-600' : 'text-gray-700'}\`}>{day}</span>
+              {dayItems.slice(0, 2).map((item, i) => (
+                <div key={i} className="mt-1 text-xs bg-blue-50 text-blue-700 rounded px-1.5 py-0.5 truncate">{getEntityDisplayName(item)}</div>
+              ))}
+              {dayItems.length > 2 && <div className="mt-1 text-xs text-gray-400">+{dayItems.length - 2} more</div>}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default ${name};
+`;
+}
+
+// ============================================================================
+// ANALYTICS VIEW
+// ============================================================================
+
+function generateAnalyticsView(name: string, model: string, lower: string, plural: string, api: string, classified: ClassifiedAttrs, lifecycle: Lifecycle | null, view: any, modelDef: any): string {
+  const numericAttrs = classified.business.filter(a => ['integer', 'number', 'money', 'decimal', 'float'].includes(a.type.toLowerCase()));
+  const statusField = lifecycle?.statusField || 'status';
+
+  return `import { useState, useEffect } from 'react';
+
+function ${name}() {
+  const [items, setItems] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch('${api}').then(r => r.json()).then(data => {
+      setItems(Array.isArray(data) ? data : []);
+      setLoading(false);
+    }).catch(() => setLoading(false));
+  }, []);
+
+  if (loading) return <div className="flex items-center justify-center h-64 text-gray-400">Loading...</div>;
+
+  const statusCounts: Record<string, number> = {};
+  items.forEach(item => {
+    const s = item.${statusField} || 'unknown';
+    statusCounts[s] = (statusCounts[s] || 0) + 1;
+  });
+  const maxCount = Math.max(...Object.values(statusCounts), 1);
+
+  return (
+    <div className="p-6 space-y-6">
+      <h1 className="text-2xl font-bold text-gray-900">${model} Analytics</h1>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="bg-white rounded-lg border border-gray-200 shadow-sm p-5">
+          <h2 className="text-lg font-medium text-gray-900 mb-4">Status Distribution</h2>
+          <div className="space-y-3">
+            {Object.entries(statusCounts).map(([status, count]) => (
+              <div key={status}>
+                <div className="flex justify-between text-sm mb-1">
+                  <span className="text-gray-600">{status.replace(/[_-]/g, ' ')}</span>
+                  <span className="font-medium">{count}</span>
+                </div>
+                <div className="w-full bg-gray-100 rounded-full h-2">
+                  <div className="bg-blue-500 h-2 rounded-full transition-all" style={{ width: \`\${(count / maxCount) * 100}%\` }}></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+${numericAttrs.length > 0 ? `        <div className="bg-white rounded-lg border border-gray-200 shadow-sm p-5">
+          <h2 className="text-lg font-medium text-gray-900 mb-4">Metrics</h2>
+          <div className="space-y-4">
+${numericAttrs.slice(0, 4).map(a => `            <div className="flex justify-between items-baseline">
+              <span className="text-sm text-gray-600">${a.name.charAt(0).toUpperCase() + a.name.slice(1)}</span>
+              <div className="text-right">
+                <p className="text-lg font-bold text-gray-900">{items.reduce((s, i) => s + (Number(i.${a.name}) || 0), 0)}</p>
+                <p className="text-xs text-gray-400">avg: {items.length ? (items.reduce((s, i) => s + (Number(i.${a.name}) || 0), 0) / items.length).toFixed(1) : 0}</p>
+              </div>
+            </div>`).join('\n')}
+          </div>
+        </div>` : ''}
+      </div>
+    </div>
+  );
+}
+
+export default ${name};
+`;
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function capitalize(s: string): string {
+  return s.charAt(0).toUpperCase() + s.slice(1);
+}