@almadar/cli 0.3.2 → 0.3.3

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

@@ -0,0 +1,227 @@
+/**
+ * ParticipantList
+ *
+ * List of participants in an inspection with add/remove actions.
+ * Displays company representatives who participated in the inspection.
+ *
+ * Event Contract:
+ * - Emits: UI:ADD_PARTICIPANT { inspectionId }
+ * - Emits: UI:REMOVE_PARTICIPANT { participantId, inspectionId }
+ * - Emits: UI:EDIT_PARTICIPANT { participant }
+ */
+
+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 { Avatar } from "../../../components/atoms/Avatar";
+import { Badge } from "../../../components/atoms/Badge";
+import { useEventBus } from "../../../hooks/useEventBus";
+import { Plus, Trash2, Edit, User, Briefcase, Phone } from "lucide-react";
+
+export interface Participant {
+  id: string;
+  name?: string;
+  surname?: string;
+  positionInCompany?: string;
+  contactInfo?: string;
+  addedAt?: string;
+}
+
+export interface ParticipantListProps {
+  /** Inspection ID */
+  inspectionId?: string;
+  /** List of participants */
+  participants: Participant[];
+  /** Allow adding participants */
+  allowAdd?: boolean;
+  /** Allow removing participants */
+  allowRemove?: boolean;
+  /** Allow editing participants */
+  allowEdit?: boolean;
+  /** Minimum required participants */
+  minParticipants?: number;
+  /** Title */
+  title?: string;
+  /** Read-only mode */
+  readOnly?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Add handler - can receive participant data */
+  onAdd?: (participant?: Participant) => void;
+  /** Remove handler */
+  onRemove?: (participantId: string) => void;
+  /** Edit handler */
+  onEdit?: (participant: Participant) => void;
+}
+
+export const ParticipantList: React.FC<ParticipantListProps> = ({
+  inspectionId,
+  participants,
+  allowAdd = true,
+  allowRemove = true,
+  allowEdit = true,
+  minParticipants = 1,
+  title = "Participants",
+  readOnly = false,
+  className,
+  onAdd,
+  onRemove,
+  onEdit,
+}) => {
+  const eventBus = useEventBus();
+
+  const handleAdd = useCallback(() => {
+    onAdd?.();
+    eventBus.emit("UI:ADD_PARTICIPANT", { inspectionId });
+  }, [inspectionId, onAdd, eventBus]);
+
+  const handleRemove = useCallback(
+    (participantId: string) => {
+      onRemove?.(participantId);
+      eventBus.emit("UI:REMOVE_PARTICIPANT", { participantId, inspectionId });
+    },
+    [inspectionId, onRemove, eventBus],
+  );
+
+  const handleEdit = useCallback(
+    (participant: Participant) => {
+      onEdit?.(participant);
+      eventBus.emit("UI:EDIT_PARTICIPANT", { participant });
+    },
+    [onEdit, eventBus],
+  );
+
+  const canRemove =
+    !readOnly && allowRemove && participants.length > minParticipants;
+
+  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>
+          <Badge variant="default">{participants.length}</Badge>
+        </HStack>
+
+        {!readOnly && allowAdd && (
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={handleAdd}
+            className="gap-1"
+          >
+            <Plus className="h-4 w-4" />
+            Add Participant
+          </Button>
+        )}
+      </HStack>
+
+      {/* Participant cards */}
+      {participants.length === 0 ? (
+        <Card className="p-6">
+          <VStack align="center" gap="sm" className="text-neutral-400">
+            <User className="h-8 w-8" />
+            <Typography variant="body">No participants added yet</Typography>
+            {!readOnly && allowAdd && (
+              <Button
+                variant="primary"
+                size="sm"
+                onClick={handleAdd}
+                className="gap-1"
+              >
+                <Plus className="h-4 w-4" />
+                Add First Participant
+              </Button>
+            )}
+          </VStack>
+        </Card>
+      ) : (
+        <VStack gap="sm">
+          {participants.map((participant) => (
+            <Card key={participant.id} className="p-4">
+              <HStack justify="between" align="start">
+                <HStack gap="sm" align="start">
+                  <Avatar
+                    name={`${participant.name} ${participant.surname}`}
+                    size="md"
+                  />
+                  <VStack gap="xs">
+                    <Typography
+                      variant="body"
+                      className="font-medium text-neutral-800"
+                    >
+                      {participant.name} {participant.surname}
+                    </Typography>
+                    <HStack
+                      gap="xs"
+                      align="center"
+                      className="text-neutral-500"
+                    >
+                      <Briefcase className="h-3 w-3" />
+                      <Typography variant="small">
+                        {participant.positionInCompany}
+                      </Typography>
+                    </HStack>
+                    {participant.contactInfo && (
+                      <HStack
+                        gap="xs"
+                        align="center"
+                        className="text-neutral-500"
+                      >
+                        <Phone className="h-3 w-3" />
+                        <Typography variant="small">
+                          {participant.contactInfo}
+                        </Typography>
+                      </HStack>
+                    )}
+                  </VStack>
+                </HStack>
+
+                {!readOnly && (
+                  <HStack gap="xs">
+                    {allowEdit && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleEdit(participant)}
+                        className="text-neutral-400 hover:text-neutral-600"
+                      >
+                        <Edit className="h-4 w-4" />
+                      </Button>
+                    )}
+                    {canRemove && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleRemove(participant.id)}
+                        className="text-red-400 hover:text-red-600"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    )}
+                  </HStack>
+                )}
+              </HStack>
+            </Card>
+          ))}
+        </VStack>
+      )}
+
+      {/* Minimum participants warning */}
+      {participants.length < minParticipants && (
+        <Typography variant="small" className="text-amber-600">
+          At least {minParticipants} participant
+          {minParticipants !== 1 ? "s" : ""} required
+        </Typography>
+      )}
+    </VStack>
+  );
+};
+
+ParticipantList.displayName = "ParticipantList";

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

@@ -0,0 +1,276 @@
+/**
+ * PhotoAttachment
+ *
+ * Photo capture and display component for inspection evidence.
+ * Supports camera capture and file upload.
+ *
+ * Event Contract:
+ * - Emits: UI:PHOTO_CAPTURED { photo, context }
+ * - Emits: UI:PHOTO_REMOVED { photoId, context }
+ */
+
+import React, { useState, useCallback, useRef } 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 { useEventBus } from "../../../hooks/useEventBus";
+import { Camera, Upload, X, Image, ZoomIn, Trash2 } from "lucide-react";
+
+export interface Photo {
+  id: string;
+  url: string;
+  thumbnail?: string;
+  caption?: string;
+  timestamp?: string;
+}
+
+export interface PhotoAttachmentProps {
+  /** Attached photos */
+  photos?: Photo[];
+  /** Context for events (e.g., ruleId, findingId) */
+  context?: Record<string, string>;
+  /** Maximum photos allowed */
+  maxPhotos?: number;
+  /** Allow camera capture */
+  allowCamera?: boolean;
+  /** Allow file upload */
+  allowUpload?: boolean;
+  /** Read-only mode */
+  readOnly?: boolean;
+  /** Compact mode (thumbnails only) */
+  compact?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Photo added handler */
+  onPhotoAdded?: (file: File) => void;
+  /** Photo removed handler */
+  onPhotoRemoved?: (photoId: string) => void;
+  /** Photo clicked handler */
+  onPhotoClick?: (photo: Photo) => void;
+}
+
+export const PhotoAttachment: React.FC<PhotoAttachmentProps> = ({
+  photos = [],
+  context = {},
+  maxPhotos = 5,
+  allowCamera = true,
+  allowUpload = true,
+  readOnly = false,
+  compact = false,
+  className,
+  onPhotoAdded,
+  onPhotoRemoved,
+  onPhotoClick,
+}) => {
+  const eventBus = useEventBus();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [previewPhoto, setPreviewPhoto] = useState<Photo | null>(null);
+
+  const canAddMore = photos.length < maxPhotos && !readOnly;
+
+  const handleFileSelect = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const files = event.target.files;
+      if (!files || files.length === 0) return;
+
+      const file = files[0];
+      onPhotoAdded?.(file);
+      eventBus.emit("UI:PHOTO_CAPTURED", { photo: file, context });
+
+      // Reset input
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    },
+    [context, onPhotoAdded, eventBus]
+  );
+
+  const handleRemove = useCallback(
+    (photoId: string) => {
+      onPhotoRemoved?.(photoId);
+      eventBus.emit("UI:PHOTO_REMOVED", { photoId, context });
+    },
+    [context, onPhotoRemoved, eventBus]
+  );
+
+  const handlePhotoClick = useCallback(
+    (photo: Photo) => {
+      onPhotoClick?.(photo);
+      setPreviewPhoto(photo);
+    },
+    [onPhotoClick]
+  );
+
+  const triggerFileInput = useCallback((capture?: boolean) => {
+    if (fileInputRef.current) {
+      if (capture) {
+        fileInputRef.current.setAttribute("capture", "environment");
+      } else {
+        fileInputRef.current.removeAttribute("capture");
+      }
+      fileInputRef.current.click();
+    }
+  }, []);
+
+  return (
+    <VStack gap="sm" className={cn("w-full", className)}>
+      {/* Photo grid */}
+      {photos.length > 0 && (
+        <Box
+          className={cn(
+            "grid gap-2",
+            compact ? "grid-cols-6" : "grid-cols-3 md:grid-cols-4"
+          )}
+        >
+          {photos.map((photo) => (
+            <Box
+              key={photo.id}
+              rounded="lg"
+              className={cn(
+                "relative group overflow-hidden bg-neutral-100",
+                compact ? "aspect-square" : "aspect-video"
+              )}
+            >
+              <img
+                src={photo.thumbnail || photo.url}
+                alt={photo.caption || "Photo"}
+                className="w-full h-full object-cover cursor-pointer"
+                onClick={() => handlePhotoClick(photo)}
+              />
+
+              {/* Overlay actions */}
+              <Box
+                className={cn(
+                  "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity",
+                  "flex items-center justify-center gap-2"
+                )}
+              >
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => handlePhotoClick(photo)}
+                  className="text-white hover:text-white hover:bg-white/20"
+                >
+                  <ZoomIn className="h-4 w-4" />
+                </Button>
+                {!readOnly && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => handleRemove(photo.id)}
+                    className="text-white hover:text-red-300 hover:bg-white/20"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                )}
+              </Box>
+
+              {/* Caption */}
+              {!compact && photo.caption && (
+                <Box
+                  padding="xs"
+                  className="absolute bottom-0 left-0 right-0 bg-black/60"
+                >
+                  <Typography variant="small" className="text-white truncate">
+                    {photo.caption}
+                  </Typography>
+                </Box>
+              )}
+            </Box>
+          ))}
+        </Box>
+      )}
+
+      {/* Add photo buttons */}
+      {canAddMore && (
+        <HStack gap="sm">
+          {/* Hidden file input */}
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            onChange={handleFileSelect}
+            className="hidden"
+          />
+
+          {allowCamera && (
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => triggerFileInput(true)}
+              className="gap-1"
+            >
+              <Camera className="h-4 w-4" />
+              {!compact && "Camera"}
+            </Button>
+          )}
+
+          {allowUpload && (
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => triggerFileInput(false)}
+              className="gap-1"
+            >
+              <Upload className="h-4 w-4" />
+              {!compact && "Upload"}
+            </Button>
+          )}
+
+          {photos.length > 0 && (
+            <Typography variant="small" className="text-neutral-500 self-center">
+              {photos.length}/{maxPhotos}
+            </Typography>
+          )}
+        </HStack>
+      )}
+
+      {/* Empty state */}
+      {photos.length === 0 && !canAddMore && (
+        <Box
+          rounded="lg"
+          padding="md"
+          className="bg-neutral-50 border border-dashed border-neutral-300"
+        >
+          <VStack align="center" gap="xs" className="text-neutral-400">
+            <Image className="h-6 w-6" />
+            <Typography variant="small">No photos attached</Typography>
+          </VStack>
+        </Box>
+      )}
+
+      {/* Photo preview modal - simplified */}
+      {previewPhoto && (
+        <Box
+          className="fixed inset-0 z-50 bg-black/80 flex items-center justify-center p-4"
+          onClick={() => setPreviewPhoto(null)}
+        >
+          <Box className="relative max-w-4xl max-h-full">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setPreviewPhoto(null)}
+              className="absolute top-2 right-2 text-white hover:bg-white/20"
+            >
+              <X className="h-6 w-6" />
+            </Button>
+            <img
+              src={previewPhoto.url}
+              alt={previewPhoto.caption || "Photo preview"}
+              className="max-w-full max-h-[80vh] object-contain rounded-lg"
+            />
+            {previewPhoto.caption && (
+              <Typography variant="body" className="text-white text-center mt-2">
+                {previewPhoto.caption}
+              </Typography>
+            )}
+          </Box>
+        </Box>
+      )}
+    </VStack>
+  );
+};
+
+PhotoAttachment.displayName = "PhotoAttachment";

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

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProgressHeader } from "./ProgressHeader";
+
+const meta: Meta<typeof ProgressHeader> = {
+  title: "Clients/Inspection-System/Molecules/ProgressHeader",
+  component: ProgressHeader,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof ProgressHeader>;
+
+export const Default: Story = {
+  args: {
+    title: "Field Inspection",
+    subtitle: "ABC Company Ltd.",
+    phase: "execution",
+    progress: 45,
+  },
+};
+
+export const WithSteps: Story = {
+  args: {
+    title: "Restaurant Inspection",
+    subtitle: "Golden Dragon Restaurant",
+    phase: "execution",
+    steps: [
+      { id: "1", label: "Preparation", completed: true },
+      { id: "2", label: "Company Info", completed: true },
+      { id: "3", label: "Rule Check", completed: false, current: true },
+      { id: "4", label: "Documentation", completed: false },
+      { id: "5", label: "Signatures", completed: false },
+    ],
+  },
+};
+
+export const Preparation: Story = {
+  args: {
+    title: "New Inspection",
+    subtitle: "Pending company selection",
+    phase: "preparation",
+    progress: 10,
+  },
+};
+
+export const Documentation: Story = {
+  args: {
+    title: "Market Inspection",
+    subtitle: "Fresh Foods Market",
+    phase: "documentation",
+    progress: 75,
+    steps: [
+      { id: "1", label: "Preparation", completed: true },
+      { id: "2", label: "Company Info", completed: true },
+      { id: "3", label: "Rule Check", completed: true },
+      { id: "4", label: "Documentation", completed: false, current: true },
+      { id: "5", label: "Signatures", completed: false },
+    ],
+  },
+};
+
+export const Completed: Story = {
+  args: {
+    title: "Completed Inspection",
+    subtitle: "Tech Solutions Inc.",
+    phase: "completed",
+    progress: 100,
+    steps: [
+      { id: "1", label: "Preparation", completed: true },
+      { id: "2", label: "Company Info", completed: true },
+      { id: "3", label: "Rule Check", completed: true },
+      { id: "4", label: "Documentation", completed: true },
+      { id: "5", label: "Signatures", completed: true },
+    ],
+  },
+};
+
+export const NoSteps: Story = {
+  args: {
+    title: "Quick Inspection",
+    subtitle: "Mobile Food Vendor",
+    phase: "execution",
+    progress: 60,
+    showSteps: false,
+  },
+};