@almadar/cli 0.3.2 → 0.3.3

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

@@ -0,0 +1,1582 @@
+/**
+ * InspectionProcessTemplate
+ *
+ * Comprehensive template representing the entire inspection process.
+ * Implements all 5 phases from the inspection-system requirements:
+ *
+ * 1. Introduction Phase: Case Info → Company Data → Participants → Field Selection
+ * 2. Content Phase: Rule Checking with ad-hoc actions (add participant, collect document, pause, SOS)
+ * 3. Preparation Phase: Findings → Decisions
+ * 4. Record Phase: Document Generation → Merchant Review → Objections
+ * 5. Closing Phase: End Time → Signatures → Complete
+ *
+ * This template composes all inspection-system atoms, molecules, and organisms
+ * to represent the full application workflow.
+ */
+
+import React, { useState } 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";
+import { LawReferenceBadge } from "../atoms/LawReferenceBadge";
+
+// Molecules
+import { ProgressHeader, ProgressStep } from "../molecules/ProgressHeader";
+import {
+  ComplianceSummary,
+  ComplianceStats,
+} from "../molecules/ComplianceSummary";
+import { RuleCheckItem, RuleCheckItemProps } from "../molecules/RuleCheckItem";
+import { EntitySearch, SearchResult } from "../molecules/EntitySearch";
+import { ParticipantList, Participant } from "../molecules/ParticipantList";
+import { CardSelector, CardSelectorOption } from "../molecules/CardSelector";
+import { ConditionalField } from "../molecules/ConditionalField";
+import { RepeatableFormSection } from "../molecules/RepeatableFormSection";
+import { PhotoAttachment, Photo } from "../molecules/PhotoAttachment";
+import { ObjectionRecorder } from "../molecules/ObjectionRecorder";
+import { DocumentPreview } from "../molecules/DocumentPreview";
+import {
+  InspectionTimeline,
+  TimelineItem,
+} from "../molecules/InspectionTimeline";
+
+// Organisms
+import {
+  FloatingActionMenu,
+  QuickAction,
+} from "../organisms/FloatingActionMenu";
+import { SignatureCapture } from "../organisms/SignatureCapture";
+
+import {
+  ArrowLeft,
+  ArrowRight,
+  Save,
+  CheckCircle,
+  Building2,
+  Users,
+  ClipboardCheck,
+  FileText,
+  PenTool,
+  AlertTriangle,
+  FileCheck,
+  Scale,
+  Clock,
+  Briefcase,
+  Search,
+  Plus,
+  UserPlus,
+  FilePlus,
+  Camera,
+  Pause,
+  Play,
+} from "lucide-react";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+export type ProcessPhase =
+  | "introduction"
+  | "content"
+  | "preparation"
+  | "record"
+  | "closing";
+
+export type IntroductionStep =
+  | "case-info"
+  | "company-data"
+  | "participants"
+  | "field-selection";
+
+export type ContentStep = "rule-checking";
+
+export type PreparationStep = "findings" | "decisions";
+
+export type RecordStep =
+  | "document-generation"
+  | "merchant-review"
+  | "objections";
+
+export type ClosingStep = "end-time" | "signatures" | "complete";
+
+export type ProcessStep =
+  | IntroductionStep
+  | ContentStep
+  | PreparationStep
+  | RecordStep
+  | ClosingStep;
+
+export interface Inspector {
+  id: string;
+  name: string;
+  surname: string;
+  department: string;
+  badgeNumber: string;
+}
+
+export interface Company {
+  id: string;
+  name: string;
+  legalName: string;
+  registrationNumber: string;
+  taxNumber: string;
+  address: {
+    street: string;
+    city: string;
+    postalCode: string;
+  };
+}
+
+export interface AccompanyingPerson {
+  id: string;
+  name: string;
+  organization: string;
+  role: string;
+}
+
+export interface InspectionField {
+  id: string;
+  name: string;
+  description: string;
+  ruleCount: number;
+}
+
+export interface InspectionRule {
+  id: string;
+  ruleText: string;
+  lawReference: {
+    gazetteNumber: string;
+    article: string;
+  };
+  severity: "critical" | "major" | "minor";
+  canBeSkipped: boolean;
+}
+
+export interface RuleCheck {
+  ruleId: string;
+  answer: "compliant" | "non-compliant" | "not-applicable" | null;
+  notes?: string;
+  photos: Photo[];
+}
+
+export interface Finding {
+  id: string;
+  description: string;
+  severity: "critical" | "major" | "minor" | "observation";
+  relatedRuleIds: string[];
+  recommendation: string;
+}
+
+export interface Decision {
+  id: string;
+  orderText: string;
+  deadline: string;
+  relatedFindingIds: string[];
+  status: "pending" | "acknowledged" | "completed";
+}
+
+export interface Objection {
+  id: string;
+  sectionRef: string;
+  objectionText: string;
+  response?: string;
+  status: "pending" | "resolved";
+}
+
+export interface InspectionData {
+  id: string;
+  caseNumber: string;
+  inspector?: Inspector;
+  company?: Company;
+  participants: Participant[];
+  accompanyingPersons: AccompanyingPerson[];
+  selectedField?: InspectionField;
+  rules: InspectionRule[];
+  ruleChecks: Record<string, RuleCheck>;
+  findings: Finding[];
+  decisions: Decision[];
+  objections: Objection[];
+  collectedDocuments: Array<{
+    id: string;
+    name: string;
+    type: string;
+    fileUrl: string;
+  }>;
+  startDateTime?: string;
+  endDateTime?: string;
+  inspectorSignature?: string;
+  merchantSignature?: string;
+  currentPhase: ProcessPhase;
+  currentStep: ProcessStep;
+  timeline: TimelineItem[];
+}
+
+export interface InspectionProcessTemplateProps {
+  /** Full inspection data */
+  data: InspectionData;
+  /** Available inspectors for selection */
+  availableInspectors?: Inspector[];
+  /** Available inspection fields */
+  availableFields?: InspectionField[];
+  /** Company search results */
+  companySearchResults?: SearchResult[];
+  /** Is searching for company */
+  isSearchingCompany?: boolean;
+  /** Additional class names */
+  className?: string;
+  /** Phase change handler */
+  onPhaseChange?: (phase: ProcessPhase) => void;
+  /** Step change handler */
+  onStepChange?: (step: ProcessStep) => void;
+  /** Data update handler */
+  onDataUpdate?: (data: Partial<InspectionData>) => void;
+  /** Company search handler */
+  onCompanySearch?: (query: string) => void;
+  /** Save draft handler */
+  onSaveDraft?: () => void;
+  /** Complete handler */
+  onComplete?: () => void;
+}
+
+// =============================================================================
+// Phase Configuration
+// =============================================================================
+
+interface PhaseConfig {
+  id: ProcessPhase;
+  label: string;
+  icon: typeof Building2;
+  steps: Array<{
+    id: ProcessStep;
+    label: string;
+    documentSection?: string;
+  }>;
+}
+
+const phases: PhaseConfig[] = [
+  {
+    id: "introduction",
+    label: "Introduction",
+    icon: Briefcase,
+    steps: [
+      {
+        id: "case-info",
+        label: "Case Info",
+        documentSection: "1. SPLOŠNI PODATKI",
+      },
+      {
+        id: "company-data",
+        label: "Company Data",
+        documentSection: "2. PODATKI O ZAVEZANCU",
+      },
+      {
+        id: "participants",
+        label: "Participants",
+        documentSection: "3. PRISOTNE OSEBE",
+      },
+      {
+        id: "field-selection",
+        label: "Field Selection",
+        documentSection: "4. PREDMET PREGLEDA",
+      },
+    ],
+  },
+  {
+    id: "content",
+    label: "Inspection",
+    icon: ClipboardCheck,
+    steps: [
+      {
+        id: "rule-checking",
+        label: "Rule Checking",
+        documentSection: "5. UGOTOVITVE PRI PREGLEDU",
+      },
+    ],
+  },
+  {
+    id: "preparation",
+    label: "Preparation",
+    icon: FileText,
+    steps: [
+      { id: "findings", label: "Findings", documentSection: "6. UGOTOVITVE" },
+      {
+        id: "decisions",
+        label: "Decisions",
+        documentSection: "7. ODLOČBE IN UKREPI",
+      },
+    ],
+  },
+  {
+    id: "record",
+    label: "Record",
+    icon: FileCheck,
+    steps: [
+      { id: "document-generation", label: "Generate Document" },
+      { id: "merchant-review", label: "Merchant Review" },
+      {
+        id: "objections",
+        label: "Objections",
+        documentSection: "9. PRIPOMBE ZAVEZANCA",
+      },
+    ],
+  },
+  {
+    id: "closing",
+    label: "Closing",
+    icon: PenTool,
+    steps: [
+      { id: "end-time", label: "End Time", documentSection: "10. ZAKLJUČEK" },
+      { id: "signatures", label: "Signatures" },
+      { id: "complete", label: "Complete" },
+    ],
+  },
+];
+
+// =============================================================================
+// Helper Functions
+// =============================================================================
+
+function getPhaseForStep(step: ProcessStep): ProcessPhase {
+  for (const phase of phases) {
+    if (phase.steps.some((s) => s.id === step)) {
+      return phase.id;
+    }
+  }
+  return "introduction";
+}
+
+function getStepIndex(step: ProcessStep): number {
+  let index = 0;
+  for (const phase of phases) {
+    for (const s of phase.steps) {
+      if (s.id === step) return index;
+      index++;
+    }
+  }
+  return 0;
+}
+
+function getAllSteps(): ProcessStep[] {
+  return phases.flatMap((p) => p.steps.map((s) => s.id));
+}
+
+function mapPhaseToIndicator(phase: ProcessPhase): InspectionPhase {
+  const mapping: Record<ProcessPhase, InspectionPhase> = {
+    introduction: "preparation",
+    content: "execution",
+    preparation: "documentation",
+    record: "review",
+    closing: "completed",
+  };
+  return mapping[phase];
+}
+
+// =============================================================================
+// Component
+// =============================================================================
+
+export const InspectionProcessTemplate: React.FC<
+  InspectionProcessTemplateProps
+> = ({
+  data,
+  availableInspectors = [],
+  availableFields = [],
+  companySearchResults = [],
+  isSearchingCompany = false,
+  className,
+  onPhaseChange,
+  onStepChange,
+  onDataUpdate,
+  onCompanySearch,
+  onSaveDraft,
+  onComplete,
+}) => {
+  const eventBus = useEventBus();
+  const [isPaused, setIsPaused] = useState(false);
+
+  const { currentPhase, currentStep } = data;
+  const allSteps = getAllSteps();
+  const currentStepIndex = getStepIndex(currentStep);
+  const isFirstStep = currentStepIndex === 0;
+  const isLastStep = currentStepIndex === allSteps.length - 1;
+
+  // Calculate compliance stats
+  const totalRules = data.rules.length;
+  const checkedRules = Object.keys(data.ruleChecks).length;
+  const compliant = Object.values(data.ruleChecks).filter(
+    (r) => r.answer === "compliant",
+  ).length;
+  const nonCompliant = Object.values(data.ruleChecks).filter(
+    (r) => r.answer === "non-compliant",
+  ).length;
+  const notChecked = totalRules - checkedRules;
+
+  const complianceStats: ComplianceStats = {
+    total: totalRules,
+    compliant,
+    nonCompliant,
+    notChecked,
+    critical: Object.values(data.ruleChecks).filter(
+      (r) =>
+        r.answer === "non-compliant" &&
+        data.rules.find((rule) => rule.id === r.ruleId)?.severity ===
+          "critical",
+    ).length,
+    major: Object.values(data.ruleChecks).filter(
+      (r) =>
+        r.answer === "non-compliant" &&
+        data.rules.find((rule) => rule.id === r.ruleId)?.severity === "major",
+    ).length,
+    minor: Object.values(data.ruleChecks).filter(
+      (r) =>
+        r.answer === "non-compliant" &&
+        data.rules.find((rule) => rule.id === r.ruleId)?.severity === "minor",
+    ).length,
+  };
+
+  // Build progress steps for header
+  const progressSteps: ProgressStep[] = allSteps.map((step, index) => ({
+    id: step,
+    label:
+      phases.flatMap((p) => p.steps).find((s) => s.id === step)?.label || step,
+    completed: index < currentStepIndex,
+    current: step === currentStep,
+  }));
+
+  // Navigation handlers
+  const handlePrevious = () => {
+    if (isFirstStep) return;
+    const prevStep = allSteps[currentStepIndex - 1];
+    const prevPhase = getPhaseForStep(prevStep);
+    if (prevPhase !== currentPhase) {
+      onPhaseChange?.(prevPhase);
+    }
+    onStepChange?.(prevStep);
+    eventBus.emit("UI:STEP_BACK", { step: prevStep, phase: prevPhase });
+  };
+
+  const handleNext = () => {
+    if (isLastStep) {
+      onComplete?.();
+      eventBus.emit("UI:INSPECTION_COMPLETE", { inspectionId: data.id });
+      return;
+    }
+    const nextStep = allSteps[currentStepIndex + 1];
+    const nextPhase = getPhaseForStep(nextStep);
+    if (nextPhase !== currentPhase) {
+      onPhaseChange?.(nextPhase);
+    }
+    onStepChange?.(nextStep);
+    eventBus.emit("UI:STEP_NEXT", { step: nextStep, phase: nextPhase });
+  };
+
+  const handleSaveDraft = () => {
+    onSaveDraft?.();
+    eventBus.emit("UI:SAVE_DRAFT", { inspectionId: data.id, currentStep });
+  };
+
+  // Floating action menu actions
+  const floatingActions: QuickAction[] = [
+    {
+      id: "add-participant",
+      label: "Add Participant",
+      icon: UserPlus,
+    },
+    {
+      id: "collect-document",
+      label: "Collect Document",
+      icon: FilePlus,
+    },
+    {
+      id: "take-photo",
+      label: "Take Photo",
+      icon: Camera,
+    },
+    {
+      id: "pause",
+      label: isPaused ? "Resume" : "Pause",
+      icon: isPaused ? Play : Pause,
+    },
+    {
+      id: "sos",
+      label: "SOS Exception",
+      icon: AlertTriangle,
+      color: "text-red-600",
+      bgColor: "bg-red-100",
+    },
+  ];
+
+  // ==========================================================================
+  // Step Content Renderers
+  // ==========================================================================
+
+  const renderCaseInfo = () => (
+    <VStack gap="lg" align="stretch">
+      <Typography variant="h3">Case Information</Typography>
+      <Card className="p-4">
+        <VStack gap="md" align="stretch">
+          <Box>
+            <Typography variant="small" className="text-neutral-500 mb-1">
+              Case Number
+            </Typography>
+            <Typography variant="h4">
+              {data.caseNumber || "Auto-generated"}
+            </Typography>
+          </Box>
+
+          <Box>
+            <Typography variant="small" className="text-neutral-500 mb-1">
+              Inspector
+            </Typography>
+            <EntitySearch
+              label="Select Inspector"
+              placeholder="Search inspectors..."
+              results={availableInspectors.map((i) => ({
+                id: i.id,
+                label: `${i.name} ${i.surname}`,
+                sublabel: `${i.department} - ${i.badgeNumber}`,
+              }))}
+              selectedId={data.inspector?.id}
+              onSearch={(q) =>
+                eventBus.emit("UI:SEARCH_INSPECTOR", { query: q })
+              }
+              onSelect={(result) => {
+                if (result) {
+                  onDataUpdate?.({
+                    inspector: availableInspectors.find(
+                      (i) => i.id === result.id,
+                    ),
+                  });
+                }
+              }}
+              allowCreate={false}
+            />
+          </Box>
+
+          <Box>
+            <Typography variant="small" className="text-neutral-500 mb-1">
+              Start Date/Time
+            </Typography>
+            <input
+              type="datetime-local"
+              className="w-full p-2 border rounded"
+              value={data.startDateTime || ""}
+              onChange={(e) =>
+                onDataUpdate?.({ startDateTime: e.target.value })
+              }
+            />
+          </Box>
+
+          <Box>
+            <Typography variant="small" className="text-neutral-500 mb-1">
+              Accompanying Persons
+            </Typography>
+            <RepeatableFormSection
+              sectionType="accompanying-persons"
+              title="Accompanying Persons"
+              items={data.accompanyingPersons.map((p) => ({
+                id: p.id,
+                data: p as unknown as Record<string, unknown>,
+              }))}
+              renderItem={(item) => {
+                const itemData = item.data as
+                  | { name?: string; organization?: string; role?: string }
+                  | undefined;
+                return (
+                  <HStack gap="md" className="flex-1">
+                    <Typography>{itemData?.name}</Typography>
+                    <Badge variant="default">{itemData?.organization}</Badge>
+                    <Typography variant="small" className="text-neutral-500">
+                      {itemData?.role}
+                    </Typography>
+                  </HStack>
+                );
+              }}
+              renderForm={(onAdd) => (
+                <VStack gap="sm" align="stretch">
+                  <input
+                    type="text"
+                    placeholder="Name"
+                    className="p-2 border rounded"
+                    id="acc-name"
+                  />
+                  <input
+                    type="text"
+                    placeholder="Organization"
+                    className="p-2 border rounded"
+                    id="acc-org"
+                  />
+                  <input
+                    type="text"
+                    placeholder="Role"
+                    className="p-2 border rounded"
+                    id="acc-role"
+                  />
+                  <Button
+                    variant="primary"
+                    size="sm"
+                    onClick={() => {
+                      const name = (
+                        document.getElementById("acc-name") as HTMLInputElement
+                      )?.value;
+                      const org = (
+                        document.getElementById("acc-org") as HTMLInputElement
+                      )?.value;
+                      const role = (
+                        document.getElementById("acc-role") as HTMLInputElement
+                      )?.value;
+                      if (name && org) {
+                        onAdd({ name, organization: org, role });
+                      }
+                    }}
+                  >
+                    Add Person
+                  </Button>
+                </VStack>
+              )}
+              onAdd={(person) => {
+                const p = person as Record<string, unknown> | undefined;
+                const newPerson: AccompanyingPerson = {
+                  id: `acc-${Date.now()}`,
+                  name: String(p?.name ?? ""),
+                  organization: String(p?.organization ?? ""),
+                  role: String(p?.role ?? ""),
+                };
+                onDataUpdate?.({
+                  accompanyingPersons: [...data.accompanyingPersons, newPerson],
+                });
+              }}
+              onRemove={(id) => {
+                onDataUpdate?.({
+                  accompanyingPersons: data.accompanyingPersons.filter(
+                    (p) => p.id !== id,
+                  ),
+                });
+              }}
+            />
+          </Box>
+        </VStack>
+      </Card>
+    </VStack>
+  );
+
+  const renderCompanyData = () => (
+    <VStack gap="lg" align="stretch">
+      <Typography variant="h3">Company Data</Typography>
+      <Card className="p-4">
+        <VStack gap="md" align="stretch">
+          <EntitySearch
+            label="Search Company"
+            placeholder="Search by name or registration number..."
+            results={companySearchResults}
+            isLoading={isSearchingCompany}
+            selectedId={data.company?.id}
+            onSearch={(q) => onCompanySearch?.(q)}
+            onSelect={(result) =>
+              result &&
+              eventBus.emit("UI:COMPANY_SELECTED", { companyId: result.id })
+            }
+            onCreateNew={() => eventBus.emit("UI:CREATE_NEW_COMPANY", {})}
+            allowCreate
+            createLabel="Create New Company"
+          />
+
+          {data.company && (
+            <Card className="p-4 bg-blue-50 border-blue-200">
+              <VStack gap="sm" align="stretch">
+                <HStack justify="between">
+                  <Typography variant="h4">{data.company.name}</Typography>
+                  <Badge variant="primary">Selected</Badge>
+                </HStack>
+                <Typography variant="small" className="text-neutral-600">
+                  Legal Name: {data.company.legalName}
+                </Typography>
+                <HStack gap="lg">
+                  <Box>
+                    <Typography variant="small" className="text-neutral-500">
+                      Registration #
+                    </Typography>
+                    <Typography>{data.company.registrationNumber}</Typography>
+                  </Box>
+                  <Box>
+                    <Typography variant="small" className="text-neutral-500">
+                      Tax ID
+                    </Typography>
+                    <Typography>{data.company.taxNumber}</Typography>
+                  </Box>
+                </HStack>
+                <Box>
+                  <Typography variant="small" className="text-neutral-500">
+                    Address
+                  </Typography>
+                  <Typography>
+                    {data.company.address.street},{" "}
+                    {data.company.address.postalCode}{" "}
+                    {data.company.address.city}
+                  </Typography>
+                </Box>
+              </VStack>
+            </Card>
+          )}
+        </VStack>
+      </Card>
+    </VStack>
+  );
+
+  const renderParticipants = () => (
+    <VStack gap="lg" align="stretch">
+      <Typography variant="h3">Participants</Typography>
+      <Typography variant="body" className="text-neutral-600">
+        At least one company representative must be present during the
+        inspection.
+      </Typography>
+      <Card className="p-4">
+        <ParticipantList
+          participants={data.participants}
+          onAdd={(participant) => {
+            const newParticipant: Participant = {
+              ...participant,
+              id: `part-${Date.now()}`,
+            };
+            onDataUpdate?.({
+              participants: [...data.participants, newParticipant],
+            });
+          }}
+          onRemove={(id) => {
+            if (data.participants.length > 1) {
+              onDataUpdate?.({
+                participants: data.participants.filter((p) => p.id !== id),
+              });
+            }
+          }}
+          minParticipants={1}
+        />
+      </Card>
+      {data.participants.length === 0 && (
+        <Card className="p-4 bg-yellow-50 border-yellow-200">
+          <HStack gap="sm">
+            <AlertTriangle className="h-5 w-5 text-yellow-600" />
+            <Typography className="text-yellow-700">
+              At least one participant is required to proceed (ZIN Art. 22)
+            </Typography>
+          </HStack>
+        </Card>
+      )}
+    </VStack>
+  );
+
+  const renderFieldSelection = () => (
+    <VStack gap="lg" align="stretch">
+      <Typography variant="h3">Inspection Field</Typography>
+      <Typography variant="body" className="text-neutral-600">
+        Select the type of inspection to determine which rules apply.
+      </Typography>
+      <CardSelector
+        options={availableFields.map((field) => ({
+          id: field.id,
+          title: field.name,
+          description: `${field.description} (${field.ruleCount} rules)`,
+        }))}
+        selectedId={data.selectedField?.id}
+        onChange={(id) => {
+          const field = availableFields.find((f) => f.id === id);
+          if (field) {
+            onDataUpdate?.({ selectedField: field });
+            eventBus.emit("UI:FIELD_SELECTED", { fieldId: id });
+          }
+        }}
+      />
+    </VStack>
+  );
+
+  const renderRuleChecking = () => (
+    <VStack gap="lg" align="stretch">
+      <HStack justify="between" align="center">
+        <Typography variant="h3">Rule Checking</Typography>
+        <Badge variant="default">
+          {checkedRules} / {totalRules} checked
+        </Badge>
+      </HStack>
+
+      <ComplianceSummary stats={complianceStats} variant="full" />
+
+      <VStack gap="md" align="stretch">
+        {data.rules.map((rule) => {
+          const check = data.ruleChecks[rule.id];
+          return (
+            <RuleCheckItem
+              key={rule.id}
+              ruleId={rule.id}
+              ruleText={rule.ruleText}
+              gazetteNumber={rule.lawReference.gazetteNumber}
+              article={rule.lawReference.article}
+              severity={rule.severity}
+              answer={check?.answer || null}
+              notes={check?.notes}
+              photoCount={check?.photos?.length || 0}
+              onCheck={(answer, notes) => {
+                onDataUpdate?.({
+                  ruleChecks: {
+                    ...data.ruleChecks,
+                    [rule.id]: {
+                      ruleId: rule.id,
+                      answer,
+                      notes,
+                      photos: check?.photos || [],
+                    },
+                  },
+                });
+              }}
+              onAddPhoto={() =>
+                eventBus.emit("UI:ADD_RULE_PHOTO", { ruleId: rule.id })
+              }
+            />
+          );
+        })}
+      </VStack>
+    </VStack>
+  );
+
+  const renderFindings = () => (
+    <VStack gap="lg" align="stretch">
+      <Typography variant="h3">Findings</Typography>
+
+      {/* Summary of non-compliant rules */}
+      <Card className="p-4 bg-red-50 border-red-200">
+        <VStack gap="sm" align="stretch">
+          <Typography variant="h4" className="text-red-700">
+            Non-Compliant Items ({nonCompliant})
+          </Typography>
+          {Object.entries(data.ruleChecks)
+            .filter(([, check]) => check.answer === "non-compliant")
+            .map(([ruleId, check]) => {
+              const rule = data.rules.find((r) => r.id === ruleId);
+              return (
+                <HStack key={ruleId} gap="sm" className="text-red-600">
+                  <Badge
+                    variant={
+                      rule?.severity === "critical" ? "danger" : "warning"
+                    }
+                  >
+                    {rule?.severity}
+                  </Badge>
+                  <Typography variant="small">{rule?.ruleText}</Typography>
+                </HStack>
+              );
+            })}
+        </VStack>
+      </Card>
+
+      {/* Add findings */}
+      <RepeatableFormSection
+        sectionType="findings"
+        title="Formal Findings"
+        items={data.findings.map((f) => ({
+          id: f.id,
+          data: f as unknown as Record<string, unknown>,
+        }))}
+        renderItem={(item) => {
+          const d = item.data as Record<string, unknown> | undefined;
+          return (
+            <VStack gap="sm" align="stretch" className="flex-1">
+              <HStack justify="between">
+                <Typography weight="medium">
+                  {String(d?.description ?? "")}
+                </Typography>
+                <Badge
+                  variant={
+                    d?.severity === "critical"
+                      ? "danger"
+                      : d?.severity === "major"
+                        ? "warning"
+                        : "default"
+                  }
+                >
+                  {String(d?.severity ?? "")}
+                </Badge>
+              </HStack>
+              <Typography variant="small" className="text-neutral-500">
+                {String(d?.recommendation ?? "")}
+              </Typography>
+            </VStack>
+          );
+        }}
+        renderForm={(onAdd) => (
+          <VStack gap="sm" align="stretch">
+            <textarea
+              placeholder="Finding description..."
+              className="p-2 border rounded min-h-[80px]"
+              id="finding-desc"
+            />
+            <select className="p-2 border rounded" id="finding-severity">
+              <option value="observation">Observation</option>
+              <option value="minor">Minor</option>
+              <option value="major">Major</option>
+              <option value="critical">Critical</option>
+            </select>
+            <textarea
+              placeholder="Recommendation..."
+              className="p-2 border rounded"
+              id="finding-rec"
+            />
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={() => {
+                const desc = (
+                  document.getElementById("finding-desc") as HTMLTextAreaElement
+                )?.value;
+                const severity = (
+                  document.getElementById(
+                    "finding-severity",
+                  ) as HTMLSelectElement
+                )?.value;
+                const rec = (
+                  document.getElementById("finding-rec") as HTMLTextAreaElement
+                )?.value;
+                if (desc) {
+                  onAdd({ description: desc, severity, recommendation: rec });
+                }
+              }}
+            >
+              Add Finding
+            </Button>
+          </VStack>
+        )}
+        onAdd={(findingData) => {
+          const fd = findingData as Record<string, unknown> | undefined;
+          const newFinding: Finding = {
+            id: `finding-${Date.now()}`,
+            description: String(fd?.description ?? ""),
+            severity: (fd?.severity as Finding["severity"]) ?? "observation",
+            relatedRuleIds: [],
+            recommendation: String(fd?.recommendation ?? ""),
+          };
+          onDataUpdate?.({ findings: [...data.findings, newFinding] });
+        }}
+        onRemove={(id) => {
+          onDataUpdate?.({
+            findings: data.findings.filter((f) => f.id !== id),
+          });
+        }}
+      />
+    </VStack>
+  );
+
+  const renderDecisions = () => (
+    <VStack gap="lg" align="stretch">
+      <Typography variant="h3">Decisions & Orders</Typography>
+
+      <RepeatableFormSection
+        sectionType="decisions"
+        title="Required Actions"
+        items={data.decisions.map((d) => ({
+          id: d.id,
+          data: d as unknown as Record<string, unknown>,
+        }))}
+        renderItem={(item) => {
+          const d = item.data as Record<string, unknown> | undefined;
+          return (
+            <VStack gap="sm" align="stretch" className="flex-1">
+              <Typography weight="medium">
+                {String(d?.orderText ?? "")}
+              </Typography>
+              <HStack gap="md">
+                <Badge variant="default">
+                  <Clock className="h-3 w-3 mr-1" />
+                  Due: {String(d?.deadline ?? "")}
+                </Badge>
+                <Badge
+                  variant={
+                    d?.status === "completed"
+                      ? "success"
+                      : d?.status === "acknowledged"
+                        ? "primary"
+                        : "warning"
+                  }
+                >
+                  {String(d?.status ?? "")}
+                </Badge>
+              </HStack>
+            </VStack>
+          );
+        }}
+        renderForm={(onAdd) => (
+          <VStack gap="sm" align="stretch">
+            <textarea
+              placeholder="Order/Action required..."
+              className="p-2 border rounded min-h-[80px]"
+              id="decision-text"
+            />
+            <input
+              type="date"
+              className="p-2 border rounded"
+              id="decision-deadline"
+            />
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={() => {
+                const text = (
+                  document.getElementById(
+                    "decision-text",
+                  ) as HTMLTextAreaElement
+                )?.value;
+                const deadline = (
+                  document.getElementById(
+                    "decision-deadline",
+                  ) as HTMLInputElement
+                )?.value;
+                if (text && deadline) {
+                  onAdd({ orderText: text, deadline });
+                }
+              }}
+            >
+              Add Decision
+            </Button>
+          </VStack>
+        )}
+        onAdd={(decisionData) => {
+          const dd = decisionData as Record<string, unknown> | undefined;
+          const newDecision: Decision = {
+            id: `decision-${Date.now()}`,
+            orderText: String(dd?.orderText ?? ""),
+            deadline: String(dd?.deadline ?? ""),
+            relatedFindingIds: [],
+            status: "pending",
+          };
+          onDataUpdate?.({ decisions: [...data.decisions, newDecision] });
+        }}
+        onRemove={(id) => {
+          onDataUpdate?.({
+            decisions: data.decisions.filter((d) => d.id !== id),
+          });
+        }}
+      />
+    </VStack>
+  );
+
+  const renderDocumentGeneration = () => (
+    <VStack gap="lg" align="stretch">
+      <Typography variant="h3">Document Generation</Typography>
+      <Typography variant="body" className="text-neutral-600">
+        Review the compiled inspection document before presenting to the
+        merchant.
+      </Typography>
+
+      <DocumentPreview
+        title="Inspection Record"
+        subtitle={`Case #${data.caseNumber}`}
+        previewUrl={`/api/inspections/${data.id}/preview`}
+        downloadUrl={`/api/inspections/${data.id}/download`}
+        onDownload={() =>
+          eventBus.emit("UI:DOWNLOAD_DOCUMENT", { inspectionId: data.id })
+        }
+        onPrint={() =>
+          eventBus.emit("UI:PRINT_DOCUMENT", { inspectionId: data.id })
+        }
+      />
+
+      <Card className="p-4">
+        <VStack gap="md" align="stretch">
+          <Typography variant="h4">Document Sections</Typography>
+          {phases.map((phase) => (
+            <Box key={phase.id}>
+              <Typography variant="small" className="text-neutral-500 mb-1">
+                {phase.label}
+              </Typography>
+              {phase.steps
+                .filter((s) => s.documentSection)
+                .map((step) => (
+                  <HStack key={step.id} gap="sm" className="ml-4">
+                    <CheckCircle className="h-4 w-4 text-green-500" />
+                    <Typography variant="small">
+                      {step.documentSection}
+                    </Typography>
+                  </HStack>
+                ))}
+            </Box>
+          ))}
+        </VStack>
+      </Card>
+    </VStack>
+  );
+
+  const renderMerchantReview = () => (
+    <VStack gap="lg" align="stretch">
+      <Typography variant="h3">Merchant Review</Typography>
+      <Typography variant="body" className="text-neutral-600">
+        Present the inspection document to the merchant for review.
+      </Typography>
+
+      <Card className="p-4 bg-blue-50 border-blue-200">
+        <VStack gap="sm" align="stretch">
+          <HStack gap="sm">
+            <Scale className="h-5 w-5 text-blue-600" />
+            <Typography className="text-blue-700 font-medium">
+              The merchant has the right to review all findings and raise
+              objections.
+            </Typography>
+          </HStack>
+        </VStack>
+      </Card>
+
+      <DocumentPreview
+        title="Inspection Record"
+        subtitle="For Merchant Review"
+        previewUrl={`/api/inspections/${data.id}/preview`}
+        isReadOnly
+      />
+    </VStack>
+  );
+
+  const renderObjections = () => (
+    <VStack gap="lg" align="stretch">
+      <Typography variant="h3">Objections</Typography>
+
+      {data.objections.length === 0 ? (
+        <Card className="p-4 bg-green-50 border-green-200">
+          <HStack gap="sm">
+            <CheckCircle className="h-5 w-5 text-green-600" />
+            <Typography className="text-green-700">
+              No objections have been raised by the merchant.
+            </Typography>
+          </HStack>
+        </Card>
+      ) : (
+        <VStack gap="md" align="stretch">
+          {data.objections.map((objection) => (
+            <Card key={objection.id} className="p-4">
+              <VStack gap="sm" align="stretch">
+                <HStack justify="between">
+                  <Badge variant="default">
+                    Section: {objection.sectionRef}
+                  </Badge>
+                  <Badge
+                    variant={
+                      objection.status === "resolved" ? "success" : "warning"
+                    }
+                  >
+                    {objection.status}
+                  </Badge>
+                </HStack>
+                <Typography>{objection.objectionText}</Typography>
+                {objection.response && (
+                  <Box className="bg-neutral-50 p-2 rounded">
+                    <Typography variant="small" className="text-neutral-500">
+                      Inspector Response:
+                    </Typography>
+                    <Typography variant="small">
+                      {objection.response}
+                    </Typography>
+                  </Box>
+                )}
+              </VStack>
+            </Card>
+          ))}
+        </VStack>
+      )}
+
+      <ObjectionRecorder
+        onSubmit={(sectionRefOrObj, text) => {
+          const sectionRef =
+            typeof sectionRefOrObj === "string"
+              ? sectionRefOrObj
+              : (sectionRefOrObj?.participantId ?? "");
+          const objText =
+            typeof sectionRefOrObj === "string"
+              ? (text ?? "")
+              : (sectionRefOrObj?.text ?? "");
+          const newObjection: Objection = {
+            id: `obj-${Date.now()}`,
+            sectionRef,
+            objectionText: objText,
+            status: "pending",
+          };
+          onDataUpdate?.({ objections: [...data.objections, newObjection] });
+        }}
+      />
+    </VStack>
+  );
+
+  const renderEndTime = () => (
+    <VStack gap="lg" align="stretch">
+      <Typography variant="h3">Closing Information</Typography>
+
+      <Card className="p-4">
+        <VStack gap="md" align="stretch">
+          <Box>
+            <Typography variant="small" className="text-neutral-500 mb-1">
+              Inspection Start
+            </Typography>
+            <Typography>{data.startDateTime || "Not recorded"}</Typography>
+          </Box>
+          <Box>
+            <Typography variant="small" className="text-neutral-500 mb-1">
+              Inspection End
+            </Typography>
+            <input
+              type="datetime-local"
+              className="w-full p-2 border rounded"
+              value={data.endDateTime || ""}
+              onChange={(e) => onDataUpdate?.({ endDateTime: e.target.value })}
+            />
+          </Box>
+        </VStack>
+      </Card>
+
+      <InspectionTimeline items={data.timeline} />
+    </VStack>
+  );
+
+  const renderSignatures = () => (
+    <VStack gap="lg" align="stretch">
+      <Typography variant="h3">Signatures</Typography>
+      <Typography variant="body" className="text-neutral-600">
+        Both the inspector and merchant representative must sign the inspection
+        record.
+      </Typography>
+
+      <Card className="p-4">
+        <VStack gap="lg" align="stretch">
+          <SignatureCapture
+            title="Inspector Signature"
+            subtitle={
+              data.inspector
+                ? `${data.inspector.name} ${data.inspector.surname}`
+                : "Inspector"
+            }
+            onCapture={(signatureData) => {
+              onDataUpdate?.({ inspectorSignature: signatureData });
+              eventBus.emit("UI:INSPECTOR_SIGNED", { inspectionId: data.id });
+            }}
+          />
+
+          <SignatureCapture
+            title="Merchant Signature"
+            subtitle={
+              data.participants[0]
+                ? `${data.participants[0].name} ${data.participants[0].surname}`
+                : "Company Representative"
+            }
+            onCapture={(signatureData) => {
+              onDataUpdate?.({ merchantSignature: signatureData });
+              eventBus.emit("UI:MERCHANT_SIGNED", { inspectionId: data.id });
+            }}
+          />
+        </VStack>
+      </Card>
+
+      {(!data.inspectorSignature || !data.merchantSignature) && (
+        <Card className="p-4 bg-yellow-50 border-yellow-200">
+          <HStack gap="sm">
+            <AlertTriangle className="h-5 w-5 text-yellow-600" />
+            <Typography className="text-yellow-700">
+              Both signatures are required to complete the inspection (ZIN Art.
+              28)
+            </Typography>
+          </HStack>
+        </Card>
+      )}
+    </VStack>
+  );
+
+  const renderComplete = () => (
+    <VStack gap="lg" align="center" className="py-8">
+      <Box className="p-4 rounded-full bg-green-100">
+        <CheckCircle className="h-16 w-16 text-green-600" />
+      </Box>
+      <Typography variant="h2">Inspection Complete</Typography>
+      <Typography
+        variant="body"
+        className="text-neutral-600 text-center max-w-md"
+      >
+        The inspection has been successfully completed. You can download the
+        final document or archive it to the information system.
+      </Typography>
+
+      <Card className="p-4 w-full max-w-md">
+        <VStack gap="sm" align="stretch">
+          <HStack justify="between">
+            <Typography>Case Number</Typography>
+            <Typography weight="medium">{data.caseNumber}</Typography>
+          </HStack>
+          <HStack justify="between">
+            <Typography>Company</Typography>
+            <Typography weight="medium">{data.company?.name}</Typography>
+          </HStack>
+          <HStack justify="between">
+            <Typography>Rules Checked</Typography>
+            <Typography weight="medium">{checkedRules}</Typography>
+          </HStack>
+          <HStack justify="between">
+            <Typography>Findings</Typography>
+            <Typography weight="medium">{data.findings.length}</Typography>
+          </HStack>
+          <HStack justify="between">
+            <Typography>Decisions</Typography>
+            <Typography weight="medium">{data.decisions.length}</Typography>
+          </HStack>
+        </VStack>
+      </Card>
+
+      <HStack gap="md">
+        <Button
+          variant="default"
+          onClick={() =>
+            eventBus.emit("UI:DOWNLOAD_FINAL", { inspectionId: data.id })
+          }
+        >
+          <FileText className="h-4 w-4 mr-2" />
+          Download PDF
+        </Button>
+        <Button
+          variant="primary"
+          onClick={() =>
+            eventBus.emit("UI:ARCHIVE_INSPECTION", { inspectionId: data.id })
+          }
+        >
+          <CheckCircle className="h-4 w-4 mr-2" />
+          Archive to System
+        </Button>
+      </HStack>
+    </VStack>
+  );
+
+  // Step content renderer
+  const renderStepContent = () => {
+    switch (currentStep) {
+      case "case-info":
+        return renderCaseInfo();
+      case "company-data":
+        return renderCompanyData();
+      case "participants":
+        return renderParticipants();
+      case "field-selection":
+        return renderFieldSelection();
+      case "rule-checking":
+        return renderRuleChecking();
+      case "findings":
+        return renderFindings();
+      case "decisions":
+        return renderDecisions();
+      case "document-generation":
+        return renderDocumentGeneration();
+      case "merchant-review":
+        return renderMerchantReview();
+      case "objections":
+        return renderObjections();
+      case "end-time":
+        return renderEndTime();
+      case "signatures":
+        return renderSignatures();
+      case "complete":
+        return renderComplete();
+      default:
+        return null;
+    }
+  };
+
+  // Can proceed check
+  const canProceed = (): boolean => {
+    switch (currentStep) {
+      case "case-info":
+        return !!data.caseNumber && !!data.inspector && !!data.startDateTime;
+      case "company-data":
+        return !!data.company;
+      case "participants":
+        return data.participants.length >= 1;
+      case "field-selection":
+        return !!data.selectedField;
+      case "rule-checking":
+        return checkedRules === totalRules;
+      case "findings":
+        return true; // Optional
+      case "decisions":
+        return true; // Optional
+      case "document-generation":
+        return true;
+      case "merchant-review":
+        return true;
+      case "objections":
+        return data.objections.every((o) => o.status === "resolved");
+      case "end-time":
+        return !!data.endDateTime;
+      case "signatures":
+        return !!data.inspectorSignature && !!data.merchantSignature;
+      case "complete":
+        return true;
+      default:
+        return true;
+    }
+  };
+
+  // ==========================================================================
+  // Render
+  // ==========================================================================
+
+  return (
+    <VStack gap="none" className={cn("min-h-screen bg-neutral-50", className)}>
+      {/* Header */}
+      <Box className="bg-white border-b sticky top-0 z-40">
+        <Box className="max-w-6xl mx-auto p-4">
+          <HStack justify="between" align="center">
+            <VStack gap="xs">
+              <Typography variant="h3">
+                Field Inspection - {data.caseNumber || "New"}
+              </Typography>
+              <Typography variant="small" className="text-neutral-500">
+                {data.company?.name || "No company selected"}
+              </Typography>
+            </VStack>
+            <PhaseIndicator phase={mapPhaseToIndicator(currentPhase)} />
+          </HStack>
+        </Box>
+      </Box>
+
+      {/* Phase Navigation */}
+      <Box className="bg-white border-b">
+        <Box className="max-w-6xl mx-auto p-2">
+          <HStack gap="none" className="overflow-x-auto">
+            {phases.map((phase, phaseIndex) => {
+              const phaseStepIndices = phase.steps.map((s) =>
+                getStepIndex(s.id),
+              );
+              const isPhaseComplete = phaseStepIndices.every(
+                (i) => i < currentStepIndex,
+              );
+              const isCurrentPhase = phase.id === currentPhase;
+              const Icon = phase.icon;
+
+              return (
+                <Box
+                  key={phase.id}
+                  className={cn(
+                    "flex-1 p-3 border-b-2 transition-all",
+                    isCurrentPhase && "border-blue-500 bg-blue-50",
+                    isPhaseComplete && !isCurrentPhase && "border-green-500",
+                    !isCurrentPhase && !isPhaseComplete && "border-transparent",
+                  )}
+                >
+                  <HStack gap="sm" justify="center">
+                    {isPhaseComplete ? (
+                      <CheckCircle className="h-5 w-5 text-green-500" />
+                    ) : (
+                      <Icon
+                        className={cn(
+                          "h-5 w-5",
+                          isCurrentPhase ? "text-blue-600" : "text-neutral-400",
+                        )}
+                      />
+                    )}
+                    <Typography
+                      variant="small"
+                      weight={isCurrentPhase ? "semibold" : "normal"}
+                      className={cn(
+                        isCurrentPhase && "text-blue-700",
+                        isPhaseComplete && !isCurrentPhase && "text-green-700",
+                      )}
+                    >
+                      {phase.label}
+                    </Typography>
+                  </HStack>
+                </Box>
+              );
+            })}
+          </HStack>
+        </Box>
+      </Box>
+
+      {/* Step Progress */}
+      <Box className="max-w-6xl mx-auto w-full px-4 py-4">
+        <ProgressHeader
+          title={phases.find((p) => p.id === currentPhase)?.label || ""}
+          subtitle={`Step ${currentStepIndex + 1} of ${allSteps.length}`}
+          phase={mapPhaseToIndicator(currentPhase)}
+          steps={progressSteps.slice(
+            getStepIndex(
+              phases.find((p) => p.id === currentPhase)?.steps[0].id ||
+                "case-info",
+            ),
+            getStepIndex(
+              phases.find((p) => p.id === currentPhase)?.steps[
+                phases.find((p) => p.id === currentPhase)!.steps.length - 1
+              ].id || "case-info",
+            ) + 1,
+          )}
+          compact
+        />
+      </Box>
+
+      {/* Main Content */}
+      <Box className="max-w-6xl mx-auto w-full px-4 pb-24 flex-1">
+        <Card className="p-6">{renderStepContent()}</Card>
+      </Box>
+
+      {/* Footer Navigation */}
+      <Box className="bg-white border-t fixed bottom-0 left-0 right-0 z-40">
+        <Box className="max-w-6xl mx-auto p-4">
+          <HStack justify="between" align="center">
+            <Button
+              variant="default"
+              onClick={handlePrevious}
+              disabled={isFirstStep}
+              className="gap-2"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Previous
+            </Button>
+
+            <HStack gap="sm">
+              <Button
+                variant="ghost"
+                onClick={handleSaveDraft}
+                className="gap-2"
+              >
+                <Save className="h-4 w-4" />
+                Save Draft
+              </Button>
+            </HStack>
+
+            <Button
+              variant="primary"
+              onClick={handleNext}
+              disabled={!canProceed()}
+              className="gap-2"
+            >
+              {isLastStep ? (
+                <>
+                  <CheckCircle className="h-4 w-4" />
+                  Archive Inspection
+                </>
+              ) : (
+                <>
+                  Next
+                  <ArrowRight className="h-4 w-4" />
+                </>
+              )}
+            </Button>
+          </HStack>
+        </Box>
+      </Box>
+
+      {/* Floating Action Menu (only during content phase) */}
+      {currentPhase === "content" && (
+        <FloatingActionMenu
+          actions={floatingActions}
+          context={{ inspectionId: data.id, currentStep }}
+        />
+      )}
+    </VStack>
+  );
+};
+
+InspectionProcessTemplate.displayName = "InspectionProcessTemplate";