@almadar/cli 0.3.2 → 0.3.3

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

@@ -0,0 +1,249 @@
+/**
+ * DocumentPreview
+ *
+ * Preview component for inspection documents and reports.
+ * Supports PDF preview with download and print actions.
+ *
+ * Event Contract:
+ * - Emits: UI:DOWNLOAD { documentId, format }
+ * - Emits: UI:PRINT { documentId }
+ */
+
+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 { Badge } from "../../../components/atoms/Badge";
+import { useEventBus } from "../../../hooks/useEventBus";
+import {
+  FileText,
+  Download,
+  Printer,
+  ExternalLink,
+  Eye,
+  Calendar,
+  User,
+} from "lucide-react";
+
+export type DocumentStatus = "draft" | "final" | "signed" | "archived";
+
+export interface DocumentPreviewProps {
+  /** Document ID */
+  id?: string;
+  /** Document title */
+  title: string;
+  /** Document subtitle */
+  subtitle?: string;
+  /** Document type */
+  type?: string;
+  /** Read-only mode */
+  isReadOnly?: boolean;
+  /** Preview URL */
+  previewUrl?: string;
+  /** Download URL */
+  downloadUrl?: string;
+  /** Document status */
+  status?: DocumentStatus;
+  /** Created date */
+  createdAt?: string;
+  /** Created by */
+  createdBy?: string;
+  /** File size */
+  fileSize?: string;
+  /** Show inline preview */
+  showPreview?: boolean;
+  /** Preview height */
+  previewHeight?: string;
+  /** Additional CSS classes */
+  className?: string;
+  /** Download handler */
+  onDownload?: () => void;
+  /** Print handler */
+  onPrint?: () => void;
+  /** View handler */
+  onView?: () => void;
+}
+
+const statusConfig: Record<DocumentStatus, { color: string; label: string }> = {
+  draft: { color: "warning", label: "Draft" },
+  final: { color: "success", label: "Final" },
+  signed: { color: "primary", label: "Signed" },
+  archived: { color: "neutral", label: "Archived" },
+};
+
+export const DocumentPreview: React.FC<DocumentPreviewProps> = ({
+  id,
+  title,
+  type = "PDF",
+  previewUrl,
+  downloadUrl,
+  status = "draft",
+  createdAt,
+  createdBy,
+  fileSize,
+  showPreview = false,
+  previewHeight = "400px",
+  className,
+  onDownload,
+  onPrint,
+  onView,
+}) => {
+  const eventBus = useEventBus();
+  const statusStyle = statusConfig[status];
+
+  const handleDownload = useCallback(() => {
+    onDownload?.();
+    eventBus.emit("UI:DOWNLOAD", { documentId: id, format: type });
+
+    // If download URL provided, trigger download
+    if (downloadUrl) {
+      const link = document.createElement("a");
+      link.href = downloadUrl;
+      link.download = `${title}.${type.toLowerCase()}`;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+    }
+  }, [id, title, type, downloadUrl, onDownload, eventBus]);
+
+  const handlePrint = useCallback(() => {
+    onPrint?.();
+    eventBus.emit("UI:PRINT", { documentId: id });
+
+    // If preview URL provided, open print dialog
+    if (previewUrl) {
+      const printWindow = window.open(previewUrl, "_blank");
+      if (printWindow) {
+        printWindow.onload = () => {
+          printWindow.print();
+        };
+      }
+    }
+  }, [id, previewUrl, onPrint, eventBus]);
+
+  const handleView = useCallback(() => {
+    onView?.();
+    if (previewUrl) {
+      window.open(previewUrl, "_blank");
+    }
+  }, [previewUrl, onView]);
+
+  return (
+    <Card className={cn("overflow-hidden", className)}>
+      <VStack gap="none">
+        {/* Header */}
+        <Box padding="md" className="border-b">
+          <HStack justify="between" align="start">
+            <HStack gap="sm" align="start">
+              <Box rounded="lg" padding="sm" className="bg-red-50 text-red-600">
+                <FileText className="h-6 w-6" />
+              </Box>
+              <VStack gap="xs">
+                <Typography
+                  variant="body"
+                  className="font-medium text-neutral-800"
+                >
+                  {title}
+                </Typography>
+                <HStack gap="sm" wrap>
+                  <Badge variant="default">{type}</Badge>
+                  <Badge variant={statusStyle.color as any}>
+                    {statusStyle.label}
+                  </Badge>
+                  {fileSize && (
+                    <Typography variant="small" className="text-neutral-500">
+                      {fileSize}
+                    </Typography>
+                  )}
+                </HStack>
+              </VStack>
+            </HStack>
+
+            {/* Actions */}
+            <HStack gap="xs">
+              {previewUrl && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={handleView}
+                  className="gap-1"
+                >
+                  <ExternalLink className="h-4 w-4" />
+                </Button>
+              )}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handlePrint}
+                className="gap-1"
+              >
+                <Printer className="h-4 w-4" />
+              </Button>
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={handleDownload}
+                className="gap-1"
+              >
+                <Download className="h-4 w-4" />
+                Download
+              </Button>
+            </HStack>
+          </HStack>
+        </Box>
+
+        {/* Metadata */}
+        {(createdAt || createdBy) && (
+          <Box padding="sm" className="bg-neutral-50 border-b">
+            <HStack gap="md" wrap>
+              {createdAt && (
+                <HStack gap="xs" align="center" className="text-neutral-500">
+                  <Calendar className="h-3 w-3" />
+                  <Typography variant="small">
+                    {new Date(createdAt).toLocaleDateString()}
+                  </Typography>
+                </HStack>
+              )}
+              {createdBy && (
+                <HStack gap="xs" align="center" className="text-neutral-500">
+                  <User className="h-3 w-3" />
+                  <Typography variant="small">{createdBy}</Typography>
+                </HStack>
+              )}
+            </HStack>
+          </Box>
+        )}
+
+        {/* Preview */}
+        {showPreview && previewUrl ? (
+          <Box style={{ height: previewHeight }}>
+            <iframe
+              src={previewUrl}
+              className="w-full h-full border-0"
+              title={`Preview of ${title}`}
+            />
+          </Box>
+        ) : showPreview ? (
+          <Box
+            padding="xl"
+            className="bg-neutral-50 flex items-center justify-center"
+            style={{ height: previewHeight }}
+          >
+            <VStack align="center" gap="sm" className="text-neutral-400">
+              <Eye className="h-12 w-12" />
+              <Typography variant="body">Preview not available</Typography>
+              <Button variant="secondary" size="sm" onClick={handleDownload}>
+                Download to view
+              </Button>
+            </VStack>
+          </Box>
+        ) : null}
+      </VStack>
+    </Card>
+  );
+};
+
+DocumentPreview.displayName = "DocumentPreview";

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

@@ -0,0 +1,290 @@
+/**
+ * EntitySearch
+ *
+ * Search component for finding entities with create option.
+ * Used to select companies, inspectors, etc. in inspection forms.
+ *
+ * Event Contract:
+ * - Emits: UI:ENTITY_SELECTED { entity, item }
+ * - Emits: UI:CREATE_NEW { entity }
+ * - Emits: UI:SEARCH { entity, searchTerm }
+ */
+
+import React, { useState, useCallback, useRef, useEffect } 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 { Input } from "../../../components/atoms/Input";
+import { Button } from "../../../components/atoms/Button";
+import { Card } from "../../../components/atoms/Card";
+import { Spinner } from "../../../components/atoms/Spinner";
+import { useEventBus } from "../../../hooks/useEventBus";
+import { Search, Plus, Building2, User, FileText, X } from "lucide-react";
+
+export interface EntitySearchItem {
+  id: string;
+  name?: string;
+  /** Alias for name */
+  label?: string;
+  subtitle?: string;
+  /** Alias for subtitle */
+  sublabel?: string;
+  metadata?: Record<string, string>;
+}
+
+// Type alias for backwards compatibility
+export type SearchResult = EntitySearchItem;
+
+export interface EntitySearchProps {
+  /** Entity type being searched */
+  entity?: string;
+  /** Label for the field */
+  label?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Currently selected item */
+  selectedItem?: EntitySearchItem | null;
+  /** Currently selected ID (alternative to selectedItem) */
+  selectedId?: string;
+  /** Search results */
+  items?: EntitySearchItem[];
+  /** Search results (alias for items) */
+  results?: EntitySearchItem[];
+  /** Loading state */
+  isLoading?: boolean;
+  /** Allow creating new entities */
+  allowCreate?: boolean;
+  /** Create button label */
+  createLabel?: string;
+  /** Required field */
+  required?: boolean;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Selection change handler */
+  onSelect?: (item: EntitySearchItem | null) => void;
+  /** Search handler */
+  onSearch?: (term: string) => void;
+  /** Create handler */
+  onCreate?: () => void;
+  /** Create new handler (alias for onCreate) */
+  onCreateNew?: () => void;
+}
+
+const entityIcons: Record<string, typeof Building2 | undefined> = {
+  Company: Building2,
+  Inspector: User,
+  Document: FileText,
+};
+
+export const EntitySearch: React.FC<EntitySearchProps> = ({
+  entity,
+  label,
+  placeholder = "Search...",
+  selectedItem,
+  items = [],
+  results,
+  isLoading = false,
+  allowCreate = true,
+  createLabel = "Create New",
+  required = false,
+  disabled = false,
+  className,
+  onSelect,
+  onSearch,
+  onCreate,
+  onCreateNew,
+}) => {
+  const eventBus = useEventBus();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Use items or results (alias)
+  const searchItems = items.length > 0 ? items : (results ?? []);
+
+  const EntityIcon = (entity ? entityIcons[entity] : undefined) || FileText;
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  const handleSearch = useCallback(
+    (value: string) => {
+      setSearchTerm(value);
+      setIsOpen(true);
+      onSearch?.(value);
+      eventBus.emit("UI:SEARCH", { entity, searchTerm: value });
+    },
+    [entity, onSearch, eventBus],
+  );
+
+  const handleSelect = useCallback(
+    (item: EntitySearchItem) => {
+      onSelect?.(item);
+      eventBus.emit("UI:ENTITY_SELECTED", { entity, item });
+      setSearchTerm("");
+      setIsOpen(false);
+    },
+    [entity, onSelect, eventBus],
+  );
+
+  const handleClear = useCallback(() => {
+    onSelect?.(null);
+    setSearchTerm("");
+  }, [onSelect]);
+
+  const handleCreate = useCallback(() => {
+    onCreate?.();
+    onCreateNew?.();
+    eventBus.emit("UI:CREATE_NEW", { entity });
+    setIsOpen(false);
+  }, [entity, onCreate, onCreateNew, eventBus]);
+
+  // Show selected item
+  if (selectedItem) {
+    return (
+      <VStack gap="xs" className={cn("w-full", className)}>
+        {label && (
+          <Typography variant="label" className="text-neutral-700">
+            {label}
+            {required && <span className="text-red-500 ml-1">*</span>}
+          </Typography>
+        )}
+        <Card className="p-3">
+          <HStack justify="between" align="center">
+            <HStack gap="sm" align="center">
+              <Box
+                rounded="lg"
+                padding="sm"
+                className="bg-blue-50 text-blue-600"
+              >
+                <EntityIcon className="h-5 w-5" />
+              </Box>
+              <VStack gap="none">
+                <Typography variant="body" className="font-medium">
+                  {selectedItem.name || selectedItem.label}
+                </Typography>
+                {(selectedItem.subtitle || selectedItem.sublabel) && (
+                  <Typography variant="small" className="text-neutral-500">
+                    {selectedItem.subtitle || selectedItem.sublabel}
+                  </Typography>
+                )}
+              </VStack>
+            </HStack>
+            {!disabled && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleClear}
+                className="text-neutral-400 hover:text-neutral-600"
+              >
+                <X className="h-4 w-4" />
+              </Button>
+            )}
+          </HStack>
+        </Card>
+      </VStack>
+    );
+  }
+
+  return (
+    <Box ref={containerRef} className={cn("w-full relative", className)}>
+      <VStack gap="xs">
+        {label && (
+          <Typography variant="label" className="text-neutral-700">
+            {label}
+            {required && <span className="text-red-500 ml-1">*</span>}
+          </Typography>
+        )}
+
+        <Input
+          type="text"
+          value={searchTerm}
+          onChange={(e) => handleSearch(e.target.value)}
+          onFocus={() => setIsOpen(true)}
+          placeholder={placeholder}
+          disabled={disabled}
+          leftIcon={<Search className="h-4 w-4 text-neutral-400" />}
+          className="w-full"
+        />
+
+        {/* Dropdown */}
+        {isOpen && !disabled && (
+          <Card className="absolute top-full left-0 right-0 mt-1 z-50 max-h-64 overflow-y-auto shadow-lg">
+            <VStack gap="none">
+              {isLoading ? (
+                <Box padding="md" className="flex justify-center">
+                  <Spinner size="sm" />
+                </Box>
+              ) : searchItems.length > 0 ? (
+                searchItems.map((item) => (
+                  <button
+                    key={item.id}
+                    type="button"
+                    onClick={() => handleSelect(item)}
+                    className="w-full p-3 text-left hover:bg-neutral-50 transition-colors border-b last:border-b-0"
+                  >
+                    <HStack gap="sm" align="center">
+                      <EntityIcon className="h-4 w-4 text-neutral-400" />
+                      <VStack gap="none">
+                        <Typography variant="body" className="font-medium">
+                          {item.name || item.label}
+                        </Typography>
+                        {(item.subtitle || item.sublabel) && (
+                          <Typography
+                            variant="small"
+                            className="text-neutral-500"
+                          >
+                            {item.subtitle || item.sublabel}
+                          </Typography>
+                        )}
+                      </VStack>
+                    </HStack>
+                  </button>
+                ))
+              ) : searchTerm ? (
+                <Box padding="md" className="text-center">
+                  <Typography variant="small" className="text-neutral-500">
+                    No results found
+                  </Typography>
+                </Box>
+              ) : null}
+
+              {/* Create new option */}
+              {allowCreate && (
+                <button
+                  type="button"
+                  onClick={handleCreate}
+                  className="w-full p-3 text-left hover:bg-blue-50 transition-colors border-t"
+                >
+                  <HStack gap="sm" align="center" className="text-blue-600">
+                    <Plus className="h-4 w-4" />
+                    <Typography variant="body" className="font-medium">
+                      {createLabel} {entity}
+                    </Typography>
+                  </HStack>
+                </button>
+              )}
+            </VStack>
+          </Card>
+        )}
+      </VStack>
+    </Box>
+  );
+};
+
+EntitySearch.displayName = "EntitySearch";

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

@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InspectionTimeline, TimelineItem } from "./InspectionTimeline";
+
+const meta: Meta<typeof InspectionTimeline> = {
+  title: "Clients/Inspection-System/Molecules/InspectionTimeline",
+  component: InspectionTimeline,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof InspectionTimeline>;
+
+const sampleItems: TimelineItem[] = [
+  {
+    id: "1",
+    type: "start",
+    title: "Inspection Started",
+    description: "Field inspection initiated at business premises",
+    timestamp: new Date(Date.now() - 3600000).toISOString(), // 1 hour ago
+    user: "Inspector Ahmad",
+  },
+  {
+    id: "2",
+    type: "participant_added",
+    title: "Participant Added",
+    description: "John Smith (General Manager) joined the inspection",
+    timestamp: new Date(Date.now() - 3300000).toISOString(),
+    user: "Inspector Ahmad",
+  },
+  {
+    id: "3",
+    type: "rule_checked",
+    title: "Rule Checked: Fire Safety",
+    description: "Fire extinguisher inspection - Compliant",
+    timestamp: new Date(Date.now() - 2400000).toISOString(),
+    user: "Inspector Ahmad",
+  },
+  {
+    id: "4",
+    type: "photo_added",
+    title: "Photo Evidence Added",
+    description: "Photo of fire extinguisher certificate",
+    timestamp: new Date(Date.now() - 2100000).toISOString(),
+    user: "Inspector Ahmad",
+  },
+  {
+    id: "5",
+    type: "finding",
+    title: "Non-Compliance Found",
+    description: "Emergency exit sign not illuminated",
+    timestamp: new Date(Date.now() - 1800000).toISOString(),
+    user: "Inspector Ahmad",
+  },
+  {
+    id: "6",
+    type: "objection",
+    title: "Objection Recorded",
+    description: "Manager disputes finding regarding exit sign",
+    timestamp: new Date(Date.now() - 1500000).toISOString(),
+    user: "John Smith",
+  },
+  {
+    id: "7",
+    type: "pause",
+    title: "Inspection Paused",
+    description: "Lunch break",
+    timestamp: new Date(Date.now() - 1200000).toISOString(),
+    user: "Inspector Ahmad",
+  },
+];
+
+export const Default: Story = {
+  args: {
+    items: sampleItems,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    items: [],
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    items: sampleItems,
+    compact: true,
+  },
+};
+
+export const AbsoluteTime: Story = {
+  args: {
+    items: sampleItems,
+    relativeTime: false,
+  },
+};
+
+export const Clickable: Story = {
+  args: {
+    items: sampleItems,
+    clickable: true,
+    onItemClick: (item) => alert(`Clicked: ${item.title}`),
+  },
+};
+
+export const CompletedInspection: Story = {
+  args: {
+    items: [
+      ...sampleItems,
+      {
+        id: "8",
+        type: "resume",
+        title: "Inspection Resumed",
+        timestamp: new Date(Date.now() - 600000).toISOString(),
+        user: "Inspector Ahmad",
+      },
+      {
+        id: "9",
+        type: "document",
+        title: "Report Generated",
+        description: "Final inspection report created",
+        timestamp: new Date(Date.now() - 300000).toISOString(),
+        user: "System",
+      },
+      {
+        id: "10",
+        type: "complete",
+        title: "Inspection Completed",
+        description: "All procedures completed successfully",
+        timestamp: new Date(Date.now() - 60000).toISOString(),
+        user: "Inspector Ahmad",
+      },
+    ],
+  },
+};