@almadar/cli 1.0.6 → 1.0.7

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

@@ -1,249 +0,0 @@
-/**
- * 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

@@ -1,290 +0,0 @@
-/**
- * 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

@@ -1,138 +0,0 @@
-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",
-      },
-    ],
-  },
-};