@almadar/cli 0.3.2 → 1.0.3

package/shells/typescript-shell/packages/client/src/clients/inspection-system/molecules/ProgressHeader.tsx

@@ -0,0 +1,157 @@
+/**
+ * ProgressHeader
+ *
+ * Header component showing inspection progress with steps.
+ * Used at the top of inspection wizard pages.
+ *
+ * Event Contract:
+ * - Emits: none (display only)
+ * - entityAware: true
+ */
+
+import React 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 { ProgressBar } from "../../../components/atoms/ProgressBar";
+import { PhaseIndicator, InspectionPhase } from "../atoms/PhaseIndicator";
+import { CheckCircle, Circle } from "lucide-react";
+
+export interface ProgressStep {
+  id: string;
+  label: string;
+  completed: boolean;
+  current?: boolean;
+}
+
+export interface ProgressHeaderProps {
+  /** Inspection title */
+  title: string;
+  /** Inspection subtitle (e.g., company name) */
+  subtitle?: string;
+  /** Current phase */
+  phase?: InspectionPhase;
+  /** Progress steps */
+  steps?: ProgressStep[];
+  /** Current step index (0-based) */
+  currentStep?: number;
+  /** Total steps */
+  totalSteps?: number;
+  /** Progress percentage (0-100) */
+  progress?: number;
+  /** Show step indicators */
+  showSteps?: boolean;
+  /** Compact mode */
+  compact?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const ProgressHeader: React.FC<ProgressHeaderProps> = ({
+  title,
+  subtitle,
+  phase,
+  steps,
+  currentStep = 0,
+  totalSteps,
+  progress,
+  showSteps = true,
+  className,
+}) => {
+  // Calculate progress from steps if not provided
+  const calculatedProgress =
+    progress ??
+    (steps
+      ? Math.round(
+          (steps.filter((s) => s.completed).length / steps.length) * 100,
+        )
+      : totalSteps
+        ? Math.round((currentStep / totalSteps) * 100)
+        : 0);
+
+  return (
+    <Box
+      padding="lg"
+      border
+      rounded="lg"
+      className={cn("bg-white shadow-sm", className)}
+    >
+      <VStack gap="md">
+        {/* Title row */}
+        <HStack justify="between" align="start" wrap>
+          <VStack gap="xs">
+            <Typography variant="h2" className="text-neutral-900">
+              {title}
+            </Typography>
+            {subtitle && (
+              <Typography variant="body" className="text-neutral-500">
+                {subtitle}
+              </Typography>
+            )}
+          </VStack>
+          {phase && <PhaseIndicator phase={phase} />}
+        </HStack>
+
+        {/* Progress bar */}
+        <VStack gap="xs">
+          <HStack justify="between" align="center">
+            <Typography variant="small" className="text-neutral-600">
+              Progress
+            </Typography>
+            <Typography
+              variant="small"
+              className="font-medium text-neutral-700"
+            >
+              {calculatedProgress}%
+            </Typography>
+          </HStack>
+          <ProgressBar
+            value={calculatedProgress}
+            max={100}
+            variant="primary"
+            size="md"
+          />
+        </VStack>
+
+        {/* Step indicators */}
+        {showSteps && steps && steps.length > 0 && (
+          <HStack gap="sm" wrap className="pt-2 border-t">
+            {steps.map((step, index) => (
+              <HStack
+                key={step.id}
+                gap="xs"
+                align="center"
+                className={cn(
+                  "px-2 py-1 rounded",
+                  step.current && "bg-blue-50",
+                  step.completed && !step.current && "text-green-600",
+                )}
+              >
+                {step.completed ? (
+                  <CheckCircle className="h-4 w-4 text-green-500" />
+                ) : step.current ? (
+                  <Circle className="h-4 w-4 text-blue-500 fill-blue-500" />
+                ) : (
+                  <Circle className="h-4 w-4 text-neutral-300" />
+                )}
+                <Typography
+                  variant="small"
+                  className={cn(
+                    step.current
+                      ? "font-medium text-blue-700"
+                      : "text-neutral-600",
+                  )}
+                >
+                  {step.label}
+                </Typography>
+              </HStack>
+            ))}
+          </HStack>
+        )}
+      </VStack>
+    </Box>
+  );
+};
+
+ProgressHeader.displayName = "ProgressHeader";

package/shells/typescript-shell/packages/client/src/clients/inspection-system/molecules/RepeatableFormSection.tsx

@@ -0,0 +1,189 @@
+/**
+ * RepeatableFormSection
+ *
+ * A form section that can be repeated multiple times.
+ * Used for collecting multiple entries (participants, findings, etc.)
+ *
+ * Event Contract:
+ * - Emits: UI:SECTION_ADDED { sectionType, index }
+ * - Emits: UI:SECTION_REMOVED { sectionType, index, itemId }
+ */
+
+import React, { useCallback } 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 { useEventBus } from "../../../hooks/useEventBus";
+import { Plus, Trash2, GripVertical } from "lucide-react";
+
+export interface RepeatableFormSectionProps {
+  /** Section type identifier */
+  sectionType: string;
+  /** Section title */
+  title: string;
+  /** Items in the section */
+  items: Array<{
+    id: string;
+    data?: Record<string, unknown>;
+    [key: string]: unknown;
+  }>;
+  /** Render function for each item */
+  renderItem: (
+    item: {
+      id: string;
+      data?: Record<string, unknown>;
+      [key: string]: unknown;
+    },
+    index: number,
+  ) => React.ReactNode;
+  /** Minimum items required */
+  minItems?: number;
+  /** Maximum items allowed */
+  maxItems?: number;
+  /** Allow reordering */
+  allowReorder?: boolean;
+  /** Add button label */
+  addLabel?: string;
+  /** Empty state message */
+  emptyMessage?: string;
+  /** Read-only mode */
+  readOnly?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Add handler - can accept data from renderForm */
+  onAdd?: (data?: Record<string, unknown>) => void;
+  /** Remove handler */
+  onRemove?: (itemId: string, index: number) => void;
+  /** Reorder handler */
+  onReorder?: (fromIndex: number, toIndex: number) => void;
+  /** Render custom form for adding items */
+  renderForm?: (
+    onAdd: (data: Record<string, unknown>) => void,
+  ) => React.ReactNode;
+}
+
+export const RepeatableFormSection: React.FC<RepeatableFormSectionProps> = ({
+  sectionType,
+  title,
+  items,
+  renderItem,
+  minItems = 0,
+  maxItems = Infinity,
+  allowReorder = false,
+  addLabel = "Add Item",
+  emptyMessage = "No items added yet",
+  readOnly = false,
+  className,
+  onAdd,
+  onRemove,
+  onReorder,
+}) => {
+  const eventBus = useEventBus();
+
+  const canAdd = !readOnly && items.length < maxItems;
+  const canRemove = !readOnly && items.length > minItems;
+
+  const handleAdd = useCallback(() => {
+    onAdd?.();
+    eventBus.emit("UI:SECTION_ADDED", { sectionType, index: items.length });
+  }, [sectionType, items.length, onAdd, eventBus]);
+
+  const handleRemove = useCallback(
+    (itemId: string, index: number) => {
+      onRemove?.(itemId, index);
+      eventBus.emit("UI:SECTION_REMOVED", { sectionType, index, itemId });
+    },
+    [sectionType, onRemove, eventBus],
+  );
+
+  return (
+    <VStack gap="md" className={cn("w-full", className)}>
+      {/* Header */}
+      <HStack justify="between" align="center">
+        <HStack gap="sm" align="center">
+          <Typography variant="h4" className="text-neutral-800">
+            {title}
+          </Typography>
+          <Typography variant="small" className="text-neutral-500">
+            ({items.length}
+            {maxItems !== Infinity ? `/${maxItems}` : ""})
+          </Typography>
+        </HStack>
+
+        {canAdd && (
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleAdd}
+            className="gap-1"
+          >
+            <Plus className="h-4 w-4" />
+            {addLabel}
+          </Button>
+        )}
+      </HStack>
+
+      {/* Items */}
+      {items.length === 0 ? (
+        <Card className="p-6">
+          <VStack align="center" gap="sm" className="text-neutral-400">
+            <Typography variant="body">{emptyMessage}</Typography>
+            {canAdd && (
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={handleAdd}
+                className="gap-1"
+              >
+                <Plus className="h-4 w-4" />
+                {addLabel}
+              </Button>
+            )}
+          </VStack>
+        </Card>
+      ) : (
+        <VStack gap="sm">
+          {items.map((item, index) => (
+            <Card key={item.id} className="p-4">
+              <HStack gap="sm" align="start">
+                {/* Drag handle */}
+                {allowReorder && !readOnly && (
+                  <Box className="pt-2 cursor-move text-neutral-400 hover:text-neutral-600">
+                    <GripVertical className="h-5 w-5" />
+                  </Box>
+                )}
+
+                {/* Item content */}
+                <Box className="flex-1">{renderItem(item, index)}</Box>
+
+                {/* Remove button */}
+                {canRemove && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleRemove(item.id, index)}
+                    className="text-red-400 hover:text-red-600 hover:bg-red-50"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                )}
+              </HStack>
+            </Card>
+          ))}
+        </VStack>
+      )}
+
+      {/* Min items warning */}
+      {items.length < minItems && (
+        <Typography variant="small" className="text-amber-600">
+          At least {minItems} item{minItems !== 1 ? "s" : ""} required
+        </Typography>
+      )}
+    </VStack>
+  );
+};
+
+RepeatableFormSection.displayName = "RepeatableFormSection";

package/shells/typescript-shell/packages/client/src/clients/inspection-system/molecules/RuleCheckItem.stories.tsx

@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { RuleCheckItem } from "./RuleCheckItem";
+import { VStack } from "../../../components/atoms/Stack";
+
+const meta: Meta<typeof RuleCheckItem> = {
+  title: "Clients/Inspection-System/Molecules/RuleCheckItem",
+  component: RuleCheckItem,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    severity: {
+      control: "select",
+      options: ["critical", "major", "minor", "info"],
+    },
+    isCompliant: {
+      control: "select",
+      options: [null, true, false],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RuleCheckItem>;
+
+export const Default: Story = {
+  args: {
+    id: "rule-1",
+    description: "Business premises must display valid operating license in visible location",
+    gazetteNumber: "2023/45",
+    article: "12",
+    severity: "major",
+  },
+};
+
+export const Compliant: Story = {
+  args: {
+    id: "rule-2",
+    description: "Fire extinguishers must be inspected within the last 12 months",
+    gazetteNumber: "2022/18",
+    article: "8",
+    severity: "critical",
+    isCompliant: true,
+  },
+};
+
+export const NonCompliant: Story = {
+  args: {
+    id: "rule-3",
+    description: "Emergency exits must be clearly marked with illuminated signs",
+    gazetteNumber: "2021/32",
+    article: "15",
+    severity: "critical",
+    isCompliant: false,
+    notes: "Exit sign on back door is not illuminated. Bulb appears to be burned out.",
+  },
+};
+
+export const WithPhotos: Story = {
+  args: {
+    id: "rule-4",
+    description: "Food storage areas must maintain temperature below 5°C",
+    gazetteNumber: "2023/12",
+    article: "24",
+    severity: "major",
+    isCompliant: false,
+    notes: "Refrigerator showing 8°C at time of inspection",
+    photoCount: 3,
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    id: "rule-5",
+    description: "Staff hygiene training certificates must be current",
+    gazetteNumber: "2022/08",
+    article: "31",
+    severity: "minor",
+    isCompliant: true,
+    readOnly: true,
+  },
+};
+
+export const AllSeverities: Story = {
+  render: () => (
+    <VStack gap="md">
+      <RuleCheckItem
+        id="critical-1"
+        description="Critical safety requirement that must be addressed immediately"
+        severity="critical"
+        gazetteNumber="2023/01"
+        article="1"
+      />
+      <RuleCheckItem
+        id="major-1"
+        description="Major compliance issue requiring prompt attention"
+        severity="major"
+        gazetteNumber="2023/02"
+        article="2"
+      />
+      <RuleCheckItem
+        id="minor-1"
+        description="Minor issue that should be addressed within 30 days"
+        severity="minor"
+        gazetteNumber="2023/03"
+        article="3"
+      />
+      <RuleCheckItem
+        id="info-1"
+        description="Informational guideline for best practices"
+        severity="info"
+        gazetteNumber="2023/04"
+        article="4"
+      />
+    </VStack>
+  ),
+};

package/shells/typescript-shell/packages/client/src/clients/inspection-system/molecules/RuleCheckItem.tsx

@@ -0,0 +1,237 @@
+/**
+ * RuleCheckItem
+ *
+ * A compliance rule item with toggle and notes.
+ * Used in inspection wizard to check rule compliance.
+ *
+ * Event Contract:
+ * - Emits: UI:RULE_CHECKED { ruleId, isCompliant, notes }
+ */
+
+import React, { useState, useCallback } 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 { Badge } from "../../../components/atoms/Badge";
+import { Card } from "../../../components/atoms/Card";
+import { Textarea } from "../../../components/atoms/Textarea";
+import { useEventBus } from "../../../hooks/useEventBus";
+import { LawReferenceBadge } from "../atoms/LawReferenceBadge";
+import { Check, X, AlertTriangle, Camera } from "lucide-react";
+
+export type RuleSeverity = "critical" | "major" | "minor" | "info";
+
+export type RuleAnswer =
+  | "compliant"
+  | "non-compliant"
+  | "not-applicable"
+  | null;
+
+export interface RuleCheckItemProps {
+  /** Rule ID */
+  id?: string;
+  /** Rule ID alias */
+  ruleId?: string;
+  /** Rule description */
+  description?: string;
+  /** Rule text alias */
+  ruleText?: string;
+  /** Official Gazette reference */
+  gazetteNumber?: string;
+  /** Article reference */
+  article?: string;
+  /** Severity level */
+  severity?: RuleSeverity;
+  /** Current compliance status */
+  isCompliant?: boolean | null;
+  /** Answer (alternative to isCompliant) */
+  answer?: RuleAnswer;
+  /** Notes for non-compliance */
+  notes?: string;
+  /** Photos attached */
+  photoCount?: number;
+  /** Show notes input */
+  showNotes?: boolean;
+  /** Read-only mode */
+  readOnly?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Change handler */
+  onChange?: (data: { isCompliant: boolean | null; notes: string }) => void;
+  /** Check handler (alternative to onChange) */
+  onCheck?: (answer: RuleAnswer, notes?: string) => void;
+  /** Add photo handler */
+  onAddPhoto?: () => void;
+}
+
+const severityConfig: Record<
+  RuleSeverity,
+  { color: string; bgColor: string; label: string }
+> = {
+  critical: { color: "text-red-600", bgColor: "bg-red-100", label: "Critical" },
+  major: { color: "text-orange-600", bgColor: "bg-orange-100", label: "Major" },
+  minor: { color: "text-yellow-600", bgColor: "bg-yellow-100", label: "Minor" },
+  info: { color: "text-blue-600", bgColor: "bg-blue-100", label: "Info" },
+};
+
+export const RuleCheckItem: React.FC<RuleCheckItemProps> = ({
+  id,
+  description,
+  gazetteNumber,
+  article,
+  severity = "major",
+  isCompliant = null,
+  notes = "",
+  photoCount = 0,
+  showNotes = true,
+  readOnly = false,
+  className,
+  onChange,
+}) => {
+  const eventBus = useEventBus();
+  const [localNotes, setLocalNotes] = useState(notes);
+  const [localCompliant, setLocalCompliant] = useState(isCompliant);
+
+  const severityStyle = severityConfig[severity];
+
+  const handleComplianceChange = useCallback(
+    (value: boolean) => {
+      if (readOnly) return;
+      setLocalCompliant(value);
+      const data = { isCompliant: value, notes: localNotes };
+      onChange?.(data);
+      eventBus.emit("UI:RULE_CHECKED", { ruleId: id, ...data });
+    },
+    [id, localNotes, readOnly, onChange, eventBus],
+  );
+
+  const handleNotesChange = useCallback(
+    (value: string) => {
+      if (readOnly) return;
+      setLocalNotes(value);
+      const data = { isCompliant: localCompliant, notes: value };
+      onChange?.(data);
+    },
+    [localCompliant, readOnly, onChange],
+  );
+
+  return (
+    <Card className={cn("p-4", className)}>
+      <VStack gap="md">
+        {/* Header */}
+        <HStack justify="between" align="start" wrap>
+          <VStack gap="xs" className="flex-1">
+            <HStack gap="sm" wrap>
+              {(gazetteNumber || article) && (
+                <LawReferenceBadge
+                  gazette={gazetteNumber}
+                  article={article}
+                  size="sm"
+                />
+              )}
+              <Badge
+                variant="default"
+                className={cn(severityStyle.bgColor, severityStyle.color)}
+              >
+                {severityStyle.label}
+              </Badge>
+            </HStack>
+            <Typography variant="body" className="font-medium text-neutral-800">
+              {description}
+            </Typography>
+          </VStack>
+
+          {/* Compliance Toggle */}
+          {!readOnly && (
+            <HStack gap="xs">
+              <button
+                type="button"
+                onClick={() => handleComplianceChange(true)}
+                className={cn(
+                  "p-2 rounded-lg border transition-all",
+                  localCompliant === true
+                    ? "bg-green-100 border-green-300 text-green-600"
+                    : "bg-neutral-50 border-neutral-200 text-neutral-400 hover:bg-green-50",
+                )}
+              >
+                <Check className="h-5 w-5" />
+              </button>
+              <button
+                type="button"
+                onClick={() => handleComplianceChange(false)}
+                className={cn(
+                  "p-2 rounded-lg border transition-all",
+                  localCompliant === false
+                    ? "bg-red-100 border-red-300 text-red-600"
+                    : "bg-neutral-50 border-neutral-200 text-neutral-400 hover:bg-red-50",
+                )}
+              >
+                <X className="h-5 w-5" />
+              </button>
+            </HStack>
+          )}
+
+          {/* Read-only status */}
+          {readOnly && localCompliant !== null && (
+            <Box
+              rounded="lg"
+              padding="sm"
+              className={cn(
+                localCompliant
+                  ? "bg-green-100 text-green-600"
+                  : "bg-red-100 text-red-600",
+              )}
+            >
+              {localCompliant ? (
+                <Check className="h-5 w-5" />
+              ) : (
+                <X className="h-5 w-5" />
+              )}
+            </Box>
+          )}
+        </HStack>
+
+        {/* Notes section - shown when non-compliant or explicitly requested */}
+        {showNotes && (localCompliant === false || localNotes) && (
+          <VStack gap="xs">
+            <HStack gap="xs" align="center">
+              <AlertTriangle className="h-4 w-4 text-amber-500" />
+              <Typography
+                variant="small"
+                className="font-medium text-neutral-600"
+              >
+                Non-compliance Notes
+              </Typography>
+            </HStack>
+            {readOnly ? (
+              <Typography variant="body" className="text-neutral-700">
+                {localNotes || "No notes provided"}
+              </Typography>
+            ) : (
+              <Textarea
+                value={localNotes}
+                onChange={(e) => handleNotesChange(e.target.value)}
+                placeholder="Describe the non-compliance issue..."
+                rows={2}
+                className="w-full"
+              />
+            )}
+          </VStack>
+        )}
+
+        {/* Photo indicator */}
+        {photoCount > 0 && (
+          <HStack gap="xs" align="center" className="text-neutral-500">
+            <Camera className="h-4 w-4" />
+            <Typography variant="small">
+              {photoCount} photo{photoCount !== 1 ? "s" : ""} attached
+            </Typography>
+          </HStack>
+        )}
+      </VStack>
+    </Card>
+  );
+};
+
+RuleCheckItem.displayName = "RuleCheckItem";