@almadar/cli 0.3.2 → 1.0.3

package/shells/typescript-shell/packages/client/src/clients/inspection-system/templates/InspectionFormDemoTemplate.tsx

@@ -0,0 +1,1428 @@
+/**
+ * InspectionFormDemoTemplate
+ *
+ * A comprehensive demo template that showcases all 5 inspection phases
+ * with config-driven dynamic forms. This template is designed for presenting
+ * to the client to demonstrate the complete inspection workflow.
+ *
+ * Features:
+ * - Loads form configs from config/tabs/*.json
+ * - Renders forms with conditional fields
+ * - Shows global variable propagation between tabs
+ * - Displays violation tracking
+ * - Debug panel for HG-* variables
+ */
+
+import React, { useState, useCallback, useMemo } from "react";
+import { cn } from "../../../lib/cn";
+import { Box } from "../../../components/atoms/Box";
+import { VStack, HStack } from "../../../components/atoms/Stack";
+import { Typography } from "../../../components/atoms/Typography";
+import { Button } from "../../../components/atoms/Button";
+import { Card } from "../../../components/atoms/Card";
+import { Badge } from "../../../components/atoms/Badge";
+import { useEventBus } from "../../../hooks/useEventBus";
+
+// Atoms
+import { PhaseIndicator, InspectionPhase } from "../atoms/PhaseIndicator";
+
+// Molecules
+import { RepeatableFormSection } from "../molecules/RepeatableFormSection";
+import { CardSelector, CardSelectorOption } from "../molecules/CardSelector";
+
+// Organisms
+import { SignatureCapture } from "../organisms/SignatureCapture";
+
+// Components
+import { StatCard } from "../../../components/organisms/StatCard";
+
+// Evaluator - stub implementation for design system (actual implementation in @almadar/shared)
+class SExpressionEvaluator {
+  evaluate(expr: unknown, _context: Record<string, unknown>): unknown {
+    // Stub implementation - always returns true for design system demos
+    if (typeof expr === "boolean") return expr;
+    return true;
+  }
+}
+const createMinimalContext = (
+  _options?: Record<string, unknown>,
+): Record<string, unknown> => ({});
+
+import {
+  ArrowLeft,
+  ArrowRight,
+  ChevronDown,
+  ChevronRight,
+  CheckCircle,
+  AlertTriangle,
+  Bug,
+  Briefcase,
+  ClipboardCheck,
+  FileText,
+  FileCheck,
+  PenTool,
+} from "lucide-react";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type DemoPhase =
+  | "introduction"
+  | "content"
+  | "preparation"
+  | "record"
+  | "closing";
+
+export interface FormTabConfig {
+  tabId: string;
+  name: string;
+  globalVariablesSet?: string[];
+  globalVariablesRequired?: string[];
+  localVariables?: string[];
+  sections: FormSection[];
+}
+
+export interface FormSection {
+  id: string;
+  title: string;
+  condition?: SExpression;
+  fields: FormField[];
+  subsections?: FormSection[];
+}
+
+export interface FormField {
+  id: string;
+  label: string;
+  type:
+    | "text"
+    | "textarea"
+    | "date"
+    | "datetime"
+    | "dropdown"
+    | "radio"
+    | "checkbox"
+    | "comment"
+    | "currency"
+    | "integer"
+    | "decimal"
+    | "person"
+    | "info-display"
+    | "card-selector"
+    | "signature"
+    | "stats-grid"
+    | "multi-select"
+    | "entity-list"
+    | "entity-cards"
+    | "checklist";
+  required?: boolean;
+  repeatable?: boolean;
+  options?: Array<{
+    value: string;
+    label: string;
+    isDefault?: boolean;
+    icon?: string;
+    description?: string;
+  }>;
+  defaultValue?: string;
+  condition?: SExpression;
+  contextMenu?: string[];
+  lawReference?: { law: string; article: string };
+  hiddenCalculation?: { variable: string; scope: "global" | "local" };
+  violationTrigger?: {
+    id: string;
+    condition: SExpression;
+    lawReference: string;
+  };
+  entityField?: string;
+  // Info-display specific
+  displayContent?: string;
+  displayVariant?: "info" | "warning" | "success" | "error";
+  // Card-selector specific
+  columns?: 1 | 2 | 3 | 4;
+  multiple?: boolean;
+  // Stats-grid specific
+  stats?: Array<{ label: string; value: string | number; icon?: string }>;
+  // Entity-list/cards specific
+  entityType?: string;
+  displayFields?: string[];
+  // Checklist specific
+  checklistItems?: Array<{ id: string; label: string; required?: boolean }>;
+}
+
+export type SExpression = string | number | boolean | SExpression[];
+
+export interface ViolationRecord {
+  id: string;
+  tabId: string;
+  fieldId: string;
+  lawReference: string;
+  adminAction?: string;
+  penaltyAction?: string;
+  description?: string;
+  timestamp: string;
+}
+
+export interface FormState {
+  formValues: Record<string, unknown>;
+  globalVariables: Record<string, unknown>;
+  localVariables: Record<string, unknown>;
+  violations: ViolationRecord[];
+  completedTabs: string[];
+}
+
+export interface PhaseDefinition {
+  id: DemoPhase;
+  label: string;
+  labelSl: string;
+  icon: typeof Briefcase;
+  tabs: string[];
+}
+
+/**
+ * Mock entity data structure matching the .orb schema entity definitions.
+ * Keys are entity names (e.g., "InspectionField", "Company", "Participant")
+ * Values are arrays of entity records with fields matching the schema.
+ */
+export type MockEntityData = Record<string, Array<Record<string, unknown>>>;
+
+export interface InspectionFormDemoTemplateProps {
+  /** Form tab configs keyed by tabId */
+  configs: Record<string, FormTabConfig>;
+  /** Initial form state */
+  initialState?: Partial<FormState>;
+  /**
+   * Mock entity data for dynamic field types (card-selector, entity-list, etc.)
+   * Structure matches .orb schema entities. Example:
+   * ```
+   * {
+   *   InspectionField: [
+   *     { id: "1", name: "Trgovina", description: "...", fieldType: "merchant", isActive: true, ruleCount: 45 },
+   *     { id: "2", name: "Gostinstvo", description: "...", fieldType: "merchant", isActive: true, ruleCount: 32 }
+   *   ],
+   *   Company: [
+   *     { id: "1", name: "Podjetje d.o.o.", registrationNumber: "123456", ... }
+   *   ]
+   * }
+   * ```
+   */
+  mockData?: MockEntityData;
+  /** Current phase override */
+  currentPhase?: DemoPhase;
+  /** Current tab override */
+  currentTab?: string;
+  /** Show debug panel */
+  showDebugPanel?: boolean;
+  /** Additional class names */
+  className?: string;
+  /** Tab change handler */
+  onTabChange?: (tabId: string) => void;
+  /** Phase change handler */
+  onPhaseChange?: (phase: DemoPhase) => void;
+  /** Form value change handler */
+  onFormValueChange?: (fieldId: string, value: unknown) => void;
+  /** Violation detected handler */
+  onViolationDetected?: (violation: ViolationRecord) => void;
+}
+
+// =============================================================================
+// Phase Configuration
+// =============================================================================
+
+const phases: PhaseDefinition[] = [
+  {
+    id: "introduction",
+    label: "Introduction",
+    labelSl: "Uvod",
+    icon: Briefcase,
+    tabs: ["T-001", "T-002", "T-003", "T-004"],
+  },
+  {
+    id: "content",
+    label: "Content",
+    labelSl: "Vsebina",
+    icon: ClipboardCheck,
+    tabs: ["T-005", "T2-1"],
+  },
+  {
+    id: "preparation",
+    label: "Preparation",
+    labelSl: "Priprava",
+    icon: FileText,
+    tabs: ["T-006", "T-007"],
+  },
+  {
+    id: "record",
+    label: "Record",
+    labelSl: "Zapisnik",
+    icon: FileCheck,
+    tabs: ["T-008"],
+  },
+  {
+    id: "closing",
+    label: "Closing",
+    labelSl: "Zaključek",
+    icon: PenTool,
+    tabs: ["T-009"],
+  },
+];
+
+// =============================================================================
+// S-Expression Evaluator (using real evaluator from almadar-shared)
+// =============================================================================
+
+// Create a singleton evaluator instance
+const sexprEvaluator = new SExpressionEvaluator();
+
+function evaluateSExpression(
+  expr: SExpression | undefined,
+  context: {
+    formValues: Record<string, unknown>;
+    globalVariables: Record<string, unknown>;
+  },
+): boolean {
+  if (expr === undefined || expr === null) return true;
+  if (typeof expr === "boolean") return expr;
+  if (typeof expr === "string" || typeof expr === "number")
+    return Boolean(expr);
+  if (!Array.isArray(expr) || expr.length === 0) return true;
+
+  try {
+    // Create evaluation context with entity bindings
+    const evalContext = createMinimalContext({
+      entity: {
+        formValues: context.formValues,
+        globalVariables: context.globalVariables,
+      },
+    });
+
+    // Evaluate the expression using the real evaluator
+    const result = sexprEvaluator.evaluate(expr, evalContext);
+    return Boolean(result);
+  } catch (error) {
+    console.warn("S-expression evaluation error:", error, "Expression:", expr);
+    return true; // Default to visible on error
+  }
+}
+
+// =============================================================================
+// Sub-Components
+// =============================================================================
+
+interface FieldRendererProps {
+  field: FormField;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  isVisible: boolean;
+  mockData?: MockEntityData;
+}
+
+// Single field input renderer (used by both single and repeatable fields)
+const SingleFieldInput: React.FC<{
+  field: FormField;
+  value: unknown;
+  onChange: (value: unknown) => void;
+  inputClasses: string;
+  instanceId?: string;
+  mockData?: MockEntityData;
+}> = ({ field, value, onChange, inputClasses, instanceId, mockData = {} }) => {
+  const radioName = instanceId ? `${field.id}-${instanceId}` : field.id;
+
+  return (
+    <>
+      {field.type === "text" && (
+        <input
+          type="text"
+          className={inputClasses}
+          value={String(value || "")}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      )}
+
+      {field.type === "textarea" && (
+        <textarea
+          className={cn(inputClasses, "min-h-[80px]")}
+          value={String(value || "")}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      )}
+
+      {field.type === "date" && (
+        <input
+          type="date"
+          className={inputClasses}
+          value={String(value || "")}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      )}
+
+      {field.type === "dropdown" && (
+        <select
+          className={inputClasses}
+          value={String(value || field.defaultValue || "")}
+          onChange={(e) => onChange(e.target.value)}
+        >
+          {field.options?.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      )}
+
+      {field.type === "radio" && (
+        <div className="flex gap-4">
+          {field.options?.map((opt) => (
+            <label
+              key={opt.value}
+              className="flex items-center gap-2 cursor-pointer"
+            >
+              <input
+                type="radio"
+                name={radioName}
+                value={opt.value}
+                checked={String(value || field.defaultValue) === opt.value}
+                onChange={(e) => onChange(e.target.value)}
+                className="w-4 h-4"
+              />
+              <span className={opt.isDefault ? "font-semibold" : ""}>
+                {opt.label}
+              </span>
+            </label>
+          ))}
+        </div>
+      )}
+
+      {field.type === "checkbox" && (
+        <input
+          type="checkbox"
+          className="w-4 h-4"
+          checked={Boolean(value)}
+          onChange={(e) => onChange(e.target.checked)}
+        />
+      )}
+
+      {(field.type === "currency" || field.type === "decimal") && (
+        <input
+          type="number"
+          step="0.01"
+          className={inputClasses}
+          value={String(value || "")}
+          onChange={(e) => onChange(parseFloat(e.target.value))}
+        />
+      )}
+
+      {field.type === "integer" && (
+        <input
+          type="number"
+          step="1"
+          className={inputClasses}
+          value={String(value || "")}
+          onChange={(e) => onChange(parseInt(e.target.value))}
+        />
+      )}
+
+      {field.type === "person" && (
+        <input
+          type="text"
+          className={inputClasses}
+          placeholder="Search person..."
+          value={String(value || "")}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      )}
+
+      {/* === NEW FIELD TYPES === */}
+
+      {/* 1. Info-display: Read-only informational text */}
+      {field.type === "info-display" && (
+        <Box
+          className={cn(
+            "p-4 rounded-lg border-l-4",
+            field.displayVariant === "warning" &&
+              "bg-yellow-50 border-yellow-400 text-yellow-800",
+            field.displayVariant === "success" &&
+              "bg-green-50 border-green-400 text-green-800",
+            field.displayVariant === "error" &&
+              "bg-red-50 border-red-400 text-red-800",
+            (!field.displayVariant || field.displayVariant === "info") &&
+              "bg-blue-50 border-blue-400 text-blue-800",
+          )}
+        >
+          <Typography variant="body">
+            {field.displayContent || field.label}
+          </Typography>
+        </Box>
+      )}
+
+      {/* 2. Card-selector: Card-based selection component */}
+      {field.type === "card-selector" &&
+        (() => {
+          // If entityType is specified, use mockData; otherwise use static options
+          const entityData = field.entityType
+            ? mockData[field.entityType] || []
+            : [];
+          const optionsFromEntity = entityData.map(
+            (item) =>
+              ({
+                id: String(item.id),
+                title: String(item.name || item.label || item.id),
+                description: item.description
+                  ? String(item.description)
+                  : undefined,
+              }) as CardSelectorOption,
+          );
+
+          const optionsFromConfig = (field.options || []).map(
+            (opt) =>
+              ({
+                id: opt.value,
+                title: opt.label,
+                description: opt.description,
+              }) as CardSelectorOption,
+          );
+
+          // Prefer entity data if available, fall back to config options
+          const options =
+            optionsFromEntity.length > 0
+              ? optionsFromEntity
+              : optionsFromConfig;
+
+          return (
+            <CardSelector
+              options={options}
+              selectedId={field.multiple ? undefined : String(value || "")}
+              selectedIds={
+                field.multiple && Array.isArray(value)
+                  ? (value as string[])
+                  : []
+              }
+              multiple={field.multiple}
+              columns={field.columns || 3}
+              onChange={(selectedId) => onChange(selectedId)}
+              onMultiChange={(selectedIds) => onChange(selectedIds)}
+            />
+          );
+        })()}
+
+      {/* 3. Signature: Canvas-based signature capture */}
+      {field.type === "signature" && (
+        <SignatureCapture
+          title={field.label}
+          participantId={instanceId || field.id}
+          required={field.required}
+          onCapture={(signatureData) => onChange(signatureData)}
+          onClear={() => onChange(null)}
+        />
+      )}
+
+      {/* 4. Stats-grid: Grid of statistic cards */}
+      {field.type === "stats-grid" && (
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+          {(field.stats || []).map((stat, idx) => (
+            <StatCard key={idx} label={stat.label} value={stat.value} />
+          ))}
+        </div>
+      )}
+
+      {/* 5. Multi-select: Multiple selection dropdown/checkboxes */}
+      {field.type === "multi-select" && (
+        <div className="space-y-2 p-3 border rounded bg-neutral-50">
+          {field.options?.map((opt) => {
+            const selectedValues = Array.isArray(value) ? value : [];
+            const isChecked = selectedValues.includes(opt.value);
+            return (
+              <label
+                key={opt.value}
+                className="flex items-center gap-2 cursor-pointer"
+              >
+                <input
+                  type="checkbox"
+                  className="w-4 h-4"
+                  checked={isChecked}
+                  onChange={(e) => {
+                    if (e.target.checked) {
+                      onChange([...selectedValues, opt.value]);
+                    } else {
+                      onChange(
+                        selectedValues.filter((v: string) => v !== opt.value),
+                      );
+                    }
+                  }}
+                />
+                <span>{opt.label}</span>
+              </label>
+            );
+          })}
+        </div>
+      )}
+
+      {/* 6. Entity-list: Display a list of entities */}
+      {field.type === "entity-list" &&
+        (() => {
+          // Use mockData if entityType specified, otherwise use value (which may be set via formValues)
+          const entityData = field.entityType
+            ? mockData[field.entityType] || []
+            : [];
+          const items =
+            entityData.length > 0
+              ? entityData
+              : Array.isArray(value)
+                ? value
+                : [];
+
+          return (
+            <Box className="border rounded overflow-hidden">
+              <table className="w-full text-sm">
+                <thead className="bg-neutral-100">
+                  <tr>
+                    {(field.displayFields || ["name"]).map((fieldName) => (
+                      <th
+                        key={fieldName}
+                        className="px-3 py-2 text-left font-medium text-neutral-700"
+                      >
+                        {fieldName.charAt(0).toUpperCase() + fieldName.slice(1)}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {items.length > 0 ? (
+                    items.map((item: Record<string, unknown>, idx: number) => (
+                      <tr key={idx} className="border-t hover:bg-neutral-50">
+                        {(field.displayFields || ["name"]).map((fieldName) => (
+                          <td
+                            key={fieldName}
+                            className="px-3 py-2 text-neutral-600"
+                          >
+                            {String(item[fieldName] || "-")}
+                          </td>
+                        ))}
+                      </tr>
+                    ))
+                  ) : (
+                    <tr>
+                      <td
+                        colSpan={(field.displayFields || ["name"]).length}
+                        className="px-3 py-4 text-center text-neutral-500"
+                      >
+                        No items to display
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </Box>
+          );
+        })()}
+
+      {/* 7. Entity-cards: Display entities as cards */}
+      {field.type === "entity-cards" &&
+        (() => {
+          // Use mockData if entityType specified, otherwise use value
+          const entityData = field.entityType
+            ? mockData[field.entityType] || []
+            : [];
+          const items =
+            entityData.length > 0
+              ? entityData
+              : Array.isArray(value)
+                ? value
+                : [];
+
+          return (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {items.length > 0 ? (
+                items.map((item: Record<string, unknown>, idx: number) => (
+                  <Card key={idx} className="p-4">
+                    <VStack gap="xs">
+                      {(field.displayFields || ["name"]).map((fieldName) => (
+                        <Typography key={fieldName} variant="body">
+                          <span className="font-medium">{fieldName}:</span>{" "}
+                          {String(item[fieldName] || "-")}
+                        </Typography>
+                      ))}
+                    </VStack>
+                  </Card>
+                ))
+              ) : (
+                <Box className="col-span-full p-4 text-center text-neutral-500 border rounded">
+                  No items to display
+                </Box>
+              )}
+            </div>
+          );
+        })()}
+
+      {/* 8. Datetime: Date and time input */}
+      {field.type === "datetime" && (
+        <input
+          type="datetime-local"
+          className={inputClasses}
+          value={String(value || "")}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      )}
+
+      {/* 9. Checklist: List of checkable items */}
+      {field.type === "checklist" && (
+        <div className="space-y-2 p-3 border rounded bg-neutral-50">
+          {(field.checklistItems || field.options || []).map(
+            (item: { id?: string; value?: string; label: string }) => {
+              const itemId = item.id ?? item.value ?? "";
+              const itemLabel = item.label;
+              const checklistValue = (value as Record<string, boolean>) || {};
+              const isChecked = Boolean(checklistValue[itemId]);
+              return (
+                <label
+                  key={itemId}
+                  className="flex items-start gap-3 cursor-pointer p-2 hover:bg-neutral-100 rounded"
+                >
+                  <input
+                    type="checkbox"
+                    className="w-5 h-5 mt-0.5"
+                    checked={isChecked}
+                    onChange={(e) => {
+                      onChange({
+                        ...checklistValue,
+                        [itemId]: e.target.checked,
+                      });
+                    }}
+                  />
+                  <span
+                    className={cn(isChecked && "line-through text-neutral-500")}
+                  >
+                    {String(itemLabel)}
+                    {"required" in item &&
+                      (item as { required?: boolean }).required && (
+                        <span className="text-red-500 ml-1">*</span>
+                      )}
+                  </span>
+                </label>
+              );
+            },
+          )}
+        </div>
+      )}
+    </>
+  );
+};
+
+const FieldRenderer: React.FC<FieldRendererProps> = ({
+  field,
+  value,
+  onChange,
+  isVisible,
+  mockData = {},
+}) => {
+  if (!isVisible) return null;
+  if (field.type === "comment") {
+    return (
+      <Box className="p-3 bg-blue-50 border-l-4 border-blue-400 rounded">
+        <Typography variant="small" className="text-blue-800">
+          {field.label}
+        </Typography>
+      </Box>
+    );
+  }
+
+  const inputClasses =
+    "w-full p-2 border rounded focus:ring-2 focus:ring-blue-500 focus:border-blue-500";
+
+  // Handle repeatable fields
+  if (field.repeatable) {
+    // Value should be an array of items for repeatable fields
+    const items = Array.isArray(value)
+      ? value
+      : value
+        ? [{ id: "1", value }]
+        : [];
+
+    const handleAdd = () => {
+      const newItem = { id: String(Date.now()), value: "" };
+      onChange([...items, newItem]);
+    };
+
+    const handleRemove = (itemId: string) => {
+      onChange(items.filter((item: { id: string }) => item.id !== itemId));
+    };
+
+    const handleItemChange = (itemId: string, newValue: unknown) => {
+      onChange(
+        items.map((item: { id: string; value: unknown }) =>
+          item.id === itemId ? { ...item, value: newValue } : item,
+        ),
+      );
+    };
+
+    return (
+      <RepeatableFormSection
+        sectionType={field.id}
+        title={field.label}
+        items={items}
+        minItems={field.required ? 1 : 0}
+        addLabel={`Add ${field.label}`}
+        emptyMessage={`No ${field.label.toLowerCase()} added yet`}
+        onAdd={handleAdd}
+        onRemove={handleRemove}
+        renderItem={(item) => (
+          <Box className="space-y-1">
+            <SingleFieldInput
+              field={field}
+              value={item.value}
+              onChange={(newValue) => handleItemChange(item.id, newValue)}
+              inputClasses={inputClasses}
+              instanceId={item.id}
+              mockData={mockData}
+            />
+            {field.lawReference && (
+              <Typography variant="small" className="text-green-600">
+                ({field.lawReference.law} {field.lawReference.article})
+              </Typography>
+            )}
+          </Box>
+        )}
+      />
+    );
+  }
+
+  // Non-repeatable field
+  return (
+    <Box className="space-y-1">
+      <label className="flex items-center gap-1 text-sm font-medium text-neutral-700">
+        {field.label}
+        {field.required && <span className="text-red-500">*</span>}
+      </label>
+
+      <SingleFieldInput
+        field={field}
+        value={value}
+        onChange={onChange}
+        inputClasses={inputClasses}
+        mockData={mockData}
+      />
+
+      {field.lawReference && (
+        <Typography variant="small" className="text-green-600">
+          ({field.lawReference.law} {field.lawReference.article})
+        </Typography>
+      )}
+    </Box>
+  );
+};
+
+interface SectionRendererProps {
+  section: FormSection;
+  formValues: Record<string, unknown>;
+  globalVariables: Record<string, unknown>;
+  onFieldChange: (fieldId: string, value: unknown) => void;
+  mockData?: MockEntityData;
+  depth?: number;
+}
+
+const SectionRenderer: React.FC<SectionRendererProps> = ({
+  section,
+  formValues,
+  globalVariables,
+  onFieldChange,
+  mockData = {},
+  depth = 0,
+}) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+
+  const isVisible = evaluateSExpression(section.condition, {
+    formValues,
+    globalVariables,
+  });
+  if (!isVisible) return null;
+
+  return (
+    <Card className={cn("p-4", depth > 0 && "ml-4 border-l-4 border-blue-200")}>
+      <button
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex items-center gap-2 w-full text-left mb-3"
+      >
+        {isExpanded ? (
+          <ChevronDown className="h-4 w-4 text-neutral-500" />
+        ) : (
+          <ChevronRight className="h-4 w-4 text-neutral-500" />
+        )}
+        <Typography variant="h4" className="text-neutral-800">
+          {section.title}
+        </Typography>
+        <Badge variant="default" className="ml-auto">
+          {section.id}
+        </Badge>
+      </button>
+
+      {isExpanded && (
+        <VStack gap="md" align="stretch">
+          {section.fields.map((field) => {
+            const fieldVisible = evaluateSExpression(field.condition, {
+              formValues,
+              globalVariables,
+            });
+            return (
+              <FieldRenderer
+                key={field.id}
+                field={field}
+                value={formValues[field.id]}
+                onChange={(val) => onFieldChange(field.id, val)}
+                isVisible={fieldVisible}
+                mockData={mockData}
+              />
+            );
+          })}
+
+          {section.subsections?.map((sub) => (
+            <SectionRenderer
+              key={sub.id}
+              section={sub}
+              formValues={formValues}
+              globalVariables={globalVariables}
+              onFieldChange={onFieldChange}
+              mockData={mockData}
+              depth={depth + 1}
+            />
+          ))}
+        </VStack>
+      )}
+    </Card>
+  );
+};
+
+interface DebugPanelProps {
+  globalVariables: Record<string, unknown>;
+  localVariables: Record<string, unknown>;
+  violations: ViolationRecord[];
+  completedTabs: string[];
+  isOpen: boolean;
+  onToggle: () => void;
+}
+
+const DebugPanel: React.FC<DebugPanelProps> = ({
+  globalVariables,
+  localVariables,
+  violations,
+  completedTabs,
+  isOpen,
+  onToggle,
+}) => {
+  return (
+    <Card className="bg-neutral-900 text-neutral-100 overflow-hidden">
+      <button
+        onClick={onToggle}
+        className="flex items-center gap-2 w-full p-3 bg-neutral-800 hover:bg-neutral-700"
+      >
+        <Bug className="h-4 w-4" />
+        <Typography variant="small" className="font-mono">
+          Debug Panel
+        </Typography>
+        {isOpen ? (
+          <ChevronDown className="h-4 w-4 ml-auto" />
+        ) : (
+          <ChevronRight className="h-4 w-4 ml-auto" />
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="p-3 space-y-4 font-mono text-xs">
+          <div>
+            <Typography variant="small" className="text-green-400 mb-1">
+              Global Variables (HG-*)
+            </Typography>
+            <pre className="bg-neutral-800 p-2 rounded overflow-x-auto">
+              {JSON.stringify(globalVariables, null, 2) || "{}"}
+            </pre>
+          </div>
+
+          <div>
+            <Typography variant="small" className="text-blue-400 mb-1">
+              Local Variables (H-*)
+            </Typography>
+            <pre className="bg-neutral-800 p-2 rounded overflow-x-auto">
+              {JSON.stringify(localVariables, null, 2) || "{}"}
+            </pre>
+          </div>
+
+          <div>
+            <Typography variant="small" className="text-red-400 mb-1">
+              Violations ({violations.length})
+            </Typography>
+            <pre className="bg-neutral-800 p-2 rounded overflow-x-auto">
+              {JSON.stringify(violations, null, 2) || "[]"}
+            </pre>
+          </div>
+
+          <div>
+            <Typography variant="small" className="text-yellow-400 mb-1">
+              Completed Tabs
+            </Typography>
+            <pre className="bg-neutral-800 p-2 rounded">
+              {completedTabs.join(", ") || "(none)"}
+            </pre>
+          </div>
+        </div>
+      )}
+    </Card>
+  );
+};
+
+// =============================================================================
+// Main Component
+// =============================================================================
+
+export const InspectionFormDemoTemplate: React.FC<
+  InspectionFormDemoTemplateProps
+> = ({
+  configs,
+  initialState,
+  mockData = {},
+  currentPhase: controlledPhase,
+  currentTab: controlledTab,
+  showDebugPanel = true,
+  className,
+  onTabChange,
+  onPhaseChange,
+  onFormValueChange,
+  onViolationDetected,
+}) => {
+  const eventBus = useEventBus();
+
+  // State
+  const [formState, setFormState] = useState<FormState>({
+    formValues: initialState?.formValues || {},
+    globalVariables: initialState?.globalVariables || {},
+    localVariables: initialState?.localVariables || {},
+    violations: initialState?.violations || [],
+    completedTabs: initialState?.completedTabs || [],
+  });
+
+  const [activePhase, setActivePhase] = useState<DemoPhase>(
+    controlledPhase || "introduction",
+  );
+  const [activeTab, setActiveTab] = useState<string>(controlledTab || "T-001");
+  const [isDebugOpen, setIsDebugOpen] = useState(false);
+
+  // Derived state
+  const currentPhaseConfig = useMemo(
+    () => phases.find((p) => p.id === activePhase) || phases[0],
+    [activePhase],
+  );
+
+  const currentTabConfig = useMemo(
+    () => configs[activeTab],
+    [configs, activeTab],
+  );
+
+  const phaseIndex = phases.findIndex((p) => p.id === activePhase);
+  const tabIndex = currentPhaseConfig.tabs.indexOf(activeTab);
+  const isFirstTab = phaseIndex === 0 && tabIndex === 0;
+  const isLastTab =
+    phaseIndex === phases.length - 1 &&
+    tabIndex === currentPhaseConfig.tabs.length - 1;
+
+  // Handlers
+  const handleFieldChange = useCallback(
+    (fieldId: string, value: unknown) => {
+      setFormState((prev) => ({
+        ...prev,
+        formValues: {
+          ...prev.formValues,
+          [fieldId]: value,
+        },
+      }));
+
+      onFormValueChange?.(fieldId, value);
+      eventBus.emit("UI:FIELD_CHANGED", { fieldId, value, tabId: activeTab });
+
+      // Check for hidden calculations that set global variables
+      const field = currentTabConfig?.sections
+        .flatMap((s) => [
+          ...s.fields,
+          ...(s.subsections?.flatMap((ss) => ss.fields) || []),
+        ])
+        .find((f) => f.id === fieldId);
+
+      if (field?.hiddenCalculation?.scope === "global") {
+        setFormState((prev) => ({
+          ...prev,
+          globalVariables: {
+            ...prev.globalVariables,
+            [field.hiddenCalculation!.variable]: value,
+          },
+        }));
+        eventBus.emit("UI:GLOBAL_VARIABLE_SET", {
+          variable: field.hiddenCalculation!.variable,
+          value,
+          sourceTab: activeTab,
+        });
+      }
+    },
+    [activeTab, currentTabConfig, eventBus, onFormValueChange],
+  );
+
+  const handlePhaseChange = useCallback(
+    (phase: DemoPhase) => {
+      setActivePhase(phase);
+      const firstTab = phases.find((p) => p.id === phase)?.tabs[0];
+      if (firstTab) {
+        setActiveTab(firstTab);
+        onTabChange?.(firstTab);
+      }
+      onPhaseChange?.(phase);
+    },
+    [onPhaseChange, onTabChange],
+  );
+
+  const handleTabChange = useCallback(
+    (tabId: string) => {
+      setActiveTab(tabId);
+      onTabChange?.(tabId);
+    },
+    [onTabChange],
+  );
+
+  const handlePrevious = useCallback(() => {
+    if (tabIndex > 0) {
+      handleTabChange(currentPhaseConfig.tabs[tabIndex - 1]);
+    } else if (phaseIndex > 0) {
+      const prevPhase = phases[phaseIndex - 1];
+      handlePhaseChange(prevPhase.id);
+      handleTabChange(prevPhase.tabs[prevPhase.tabs.length - 1]);
+    }
+  }, [
+    tabIndex,
+    phaseIndex,
+    currentPhaseConfig.tabs,
+    handleTabChange,
+    handlePhaseChange,
+  ]);
+
+  const handleNext = useCallback(() => {
+    // Mark current tab as complete
+    if (!formState.completedTabs.includes(activeTab)) {
+      setFormState((prev) => ({
+        ...prev,
+        completedTabs: [...prev.completedTabs, activeTab],
+      }));
+    }
+
+    if (tabIndex < currentPhaseConfig.tabs.length - 1) {
+      handleTabChange(currentPhaseConfig.tabs[tabIndex + 1]);
+    } else if (phaseIndex < phases.length - 1) {
+      const nextPhase = phases[phaseIndex + 1];
+      handlePhaseChange(nextPhase.id);
+    }
+  }, [
+    tabIndex,
+    phaseIndex,
+    currentPhaseConfig.tabs,
+    activeTab,
+    formState.completedTabs,
+    handleTabChange,
+    handlePhaseChange,
+  ]);
+
+  const mapPhaseToIndicator = (phase: DemoPhase): InspectionPhase => {
+    const mapping: Record<DemoPhase, InspectionPhase> = {
+      introduction: "preparation",
+      content: "execution",
+      preparation: "documentation",
+      record: "review",
+      closing: "completed",
+    };
+    return mapping[phase];
+  };
+
+  // ==========================================================================
+  // Render
+  // ==========================================================================
+
+  return (
+    <VStack gap="none" className={cn("min-h-screen bg-neutral-100", className)}>
+      {/* Header */}
+      <Box className="bg-white border-b shadow-sm sticky top-0 z-50">
+        <Box className="max-w-7xl mx-auto p-4">
+          <HStack justify="between" align="center">
+            <VStack gap="xs">
+              <Typography variant="h3">Inspection Form Demo</Typography>
+              <Typography variant="small" className="text-neutral-500">
+                Config-driven dynamic forms with all 5 phases
+              </Typography>
+            </VStack>
+            <PhaseIndicator phase={mapPhaseToIndicator(activePhase)} />
+          </HStack>
+        </Box>
+      </Box>
+
+      {/* Phase Navigation */}
+      <Box className="bg-white border-b">
+        <Box className="max-w-7xl mx-auto">
+          <HStack gap="none" className="overflow-x-auto">
+            {phases.map((phase, idx) => {
+              const isActive = phase.id === activePhase;
+              const isComplete = idx < phaseIndex;
+              const Icon = phase.icon;
+
+              return (
+                <button
+                  key={phase.id}
+                  onClick={() => handlePhaseChange(phase.id)}
+                  className={cn(
+                    "flex-1 p-4 border-b-3 transition-all flex items-center justify-center gap-2",
+                    isActive && "border-blue-500 bg-blue-50",
+                    isComplete && !isActive && "border-green-500 bg-green-50",
+                    !isActive &&
+                      !isComplete &&
+                      "border-transparent hover:bg-neutral-50",
+                  )}
+                >
+                  {isComplete ? (
+                    <CheckCircle className="h-5 w-5 text-green-600" />
+                  ) : (
+                    <Icon
+                      className={cn(
+                        "h-5 w-5",
+                        isActive ? "text-blue-600" : "text-neutral-400",
+                      )}
+                    />
+                  )}
+                  <VStack gap="none" align="start">
+                    <Typography
+                      variant="small"
+                      weight={isActive ? "semibold" : "normal"}
+                      className={cn(
+                        isActive && "text-blue-700",
+                        isComplete && !isActive && "text-green-700",
+                      )}
+                    >
+                      {phase.label}
+                    </Typography>
+                    <Typography variant="small" className="text-neutral-500">
+                      {phase.labelSl}
+                    </Typography>
+                  </VStack>
+                </button>
+              );
+            })}
+          </HStack>
+        </Box>
+      </Box>
+
+      {/* Tab Navigation */}
+      <Box className="bg-white border-b">
+        <Box className="max-w-7xl mx-auto px-4">
+          <HStack gap="sm" className="py-2 overflow-x-auto">
+            {currentPhaseConfig.tabs.map((tabId) => {
+              const tabConfig = configs[tabId];
+              const isActive = tabId === activeTab;
+              const isComplete = formState.completedTabs.includes(tabId);
+
+              return (
+                <button
+                  key={tabId}
+                  onClick={() => handleTabChange(tabId)}
+                  className={cn(
+                    "px-4 py-2 rounded-lg transition-all flex items-center gap-2 whitespace-nowrap",
+                    isActive && "bg-blue-100 text-blue-700",
+                    !isActive && isComplete && "bg-green-100 text-green-700",
+                    !isActive &&
+                      !isComplete &&
+                      "bg-neutral-100 text-neutral-600 hover:bg-neutral-200",
+                  )}
+                >
+                  {isComplete && <CheckCircle className="h-4 w-4" />}
+                  <span className="font-medium">{tabId}</span>
+                  {tabConfig && (
+                    <span className="text-xs opacity-70">{tabConfig.name}</span>
+                  )}
+                </button>
+              );
+            })}
+          </HStack>
+        </Box>
+      </Box>
+
+      {/* Main Content */}
+      <Box className="flex-1">
+        <Box className="max-w-5xl mx-auto p-4">
+          <VStack gap="lg" align="stretch">
+            {/* Form Area */}
+            <div>
+              {currentTabConfig ? (
+                <VStack gap="md" align="stretch">
+                  <Card className="p-4 bg-blue-50 border-blue-200">
+                    <HStack justify="between" align="center">
+                      <VStack gap="xs">
+                        <Typography variant="h3">
+                          {currentTabConfig.name}
+                        </Typography>
+                        <Typography
+                          variant="small"
+                          className="text-neutral-600"
+                        >
+                          Tab {currentTabConfig.tabId}
+                        </Typography>
+                      </VStack>
+                      {currentTabConfig.globalVariablesSet &&
+                        currentTabConfig.globalVariablesSet.length > 0 && (
+                          <Badge variant="primary">
+                            Sets:{" "}
+                            {currentTabConfig.globalVariablesSet.join(", ")}
+                          </Badge>
+                        )}
+                    </HStack>
+                  </Card>
+
+                  {currentTabConfig.sections.map((section) => (
+                    <SectionRenderer
+                      key={section.id}
+                      section={section}
+                      formValues={formState.formValues}
+                      globalVariables={formState.globalVariables}
+                      onFieldChange={handleFieldChange}
+                      mockData={mockData}
+                    />
+                  ))}
+                </VStack>
+              ) : (
+                <Card className="p-8 text-center">
+                  <AlertTriangle className="h-12 w-12 text-yellow-500 mx-auto mb-4" />
+                  <Typography variant="h4" className="text-neutral-600">
+                    Config not found for tab: {activeTab}
+                  </Typography>
+                  <Typography variant="small" className="text-neutral-500 mt-2">
+                    Make sure the config file exists in config/tabs/
+                  </Typography>
+                </Card>
+              )}
+            </div>
+
+            {/* Violations Summary - at bottom */}
+            {formState.violations.length > 0 && (
+              <Card className="p-4">
+                <Typography
+                  variant="h4"
+                  className="mb-3 flex items-center gap-2"
+                >
+                  <AlertTriangle className="h-5 w-5 text-red-500" />
+                  Violations ({formState.violations.length})
+                </Typography>
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
+                  {formState.violations.map((violation) => (
+                    <Box
+                      key={violation.id}
+                      className="p-2 bg-red-50 border border-red-200 rounded text-sm"
+                    >
+                      <HStack justify="between" align="center">
+                        <Typography
+                          variant="small"
+                          className="font-medium text-red-700"
+                        >
+                          {violation.id}
+                        </Typography>
+                        <Badge className="bg-red-100 text-red-700">
+                          {violation.lawReference}
+                        </Badge>
+                      </HStack>
+                      {violation.description && (
+                        <Typography
+                          variant="small"
+                          className="text-red-600 mt-1"
+                        >
+                          {violation.description}
+                        </Typography>
+                      )}
+                    </Box>
+                  ))}
+                </div>
+              </Card>
+            )}
+
+            {/* Global Variables Panel - at bottom */}
+            <Card className="p-4">
+              <Typography variant="h4" className="mb-3">
+                Global Variables
+              </Typography>
+              {Object.keys(formState.globalVariables).length > 0 ? (
+                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
+                  {Object.entries(formState.globalVariables).map(
+                    ([key, value]) => (
+                      <HStack
+                        key={key}
+                        justify="between"
+                        className="text-sm bg-neutral-50 p-2 rounded"
+                      >
+                        <code className="text-blue-600 text-xs">{key}</code>
+                        <Badge variant="default">{String(value)}</Badge>
+                      </HStack>
+                    ),
+                  )}
+                </div>
+              ) : (
+                <Typography variant="small" className="text-neutral-500">
+                  No global variables set yet
+                </Typography>
+              )}
+            </Card>
+
+            {/* Debug Panel - at bottom */}
+            {showDebugPanel && (
+              <DebugPanel
+                globalVariables={formState.globalVariables}
+                localVariables={formState.localVariables}
+                violations={formState.violations}
+                completedTabs={formState.completedTabs}
+                isOpen={isDebugOpen}
+                onToggle={() => setIsDebugOpen(!isDebugOpen)}
+              />
+            )}
+          </VStack>
+        </Box>
+      </Box>
+
+      {/* Footer Navigation */}
+      <Box className="bg-white border-t sticky bottom-0 z-40">
+        <Box className="max-w-7xl mx-auto p-4">
+          <HStack justify="between" align="center">
+            <Button
+              variant="secondary"
+              onClick={handlePrevious}
+              disabled={isFirstTab}
+              className="gap-2"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Previous
+            </Button>
+
+            <Typography variant="small" className="text-neutral-500">
+              {currentPhaseConfig.label} • {activeTab}
+            </Typography>
+
+            <Button
+              variant="primary"
+              onClick={handleNext}
+              disabled={isLastTab}
+              className="gap-2"
+            >
+              {isLastTab ? (
+                <>
+                  <CheckCircle className="h-4 w-4" />
+                  Complete
+                </>
+              ) : (
+                <>
+                  Next
+                  <ArrowRight className="h-4 w-4" />
+                </>
+              )}
+            </Button>
+          </HStack>
+        </Box>
+      </Box>
+    </VStack>
+  );
+};
+
+InspectionFormDemoTemplate.displayName = "InspectionFormDemoTemplate";