@almadar/cli 0.3.2 → 0.3.3

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

@@ -0,0 +1,174 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InspectionWizardTemplate } from "./InspectionWizardTemplate";
+import { VStack } from "../../../components/atoms/Stack";
+import { Typography } from "../../../components/atoms/Typography";
+import { RuleCheckItem } from "../molecules/RuleCheckItem";
+import { ParticipantList } from "../molecules/ParticipantList";
+import { SignatureCapture } from "../organisms/SignatureCapture";
+
+const meta: Meta<typeof InspectionWizardTemplate> = {
+  title: "Clients/Inspection-System/Templates/InspectionWizardTemplate",
+  component: InspectionWizardTemplate,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof InspectionWizardTemplate>;
+
+const sampleComplianceStats = {
+  total: 25,
+  compliant: 15,
+  nonCompliant: 5,
+  notChecked: 5,
+  critical: 1,
+  major: 3,
+  minor: 1,
+};
+
+export const CompanyStep: Story = {
+  args: {
+    inspectionId: "insp-123",
+    companyName: "Golden Dragon Restaurant",
+    currentStep: "company",
+    children: (
+      <VStack gap="md">
+        <Typography variant="h3">Company Information</Typography>
+        <Typography variant="body" className="text-neutral-500">
+          Verify the company details before proceeding with the inspection.
+        </Typography>
+        {/* Company form would go here */}
+      </VStack>
+    ),
+  },
+};
+
+export const ParticipantsStep: Story = {
+  args: {
+    inspectionId: "insp-123",
+    companyName: "Golden Dragon Restaurant",
+    currentStep: "participants",
+    children: (
+      <ParticipantList
+        inspectionId="insp-123"
+        participants={[
+          {
+            id: "p1",
+            name: "John",
+            surname: "Smith",
+            positionInCompany: "General Manager",
+            contactInfo: "+1 555-0123",
+          },
+        ]}
+      />
+    ),
+  },
+};
+
+export const RulesStep: Story = {
+  args: {
+    inspectionId: "insp-123",
+    companyName: "Golden Dragon Restaurant",
+    currentStep: "rules",
+    complianceStats: sampleComplianceStats,
+    children: (
+      <VStack gap="md">
+        <RuleCheckItem
+          id="rule-1"
+          description="Business premises must display valid operating license"
+          gazetteNumber="2023/45"
+          article="12"
+          severity="major"
+        />
+        <RuleCheckItem
+          id="rule-2"
+          description="Fire extinguishers must be inspected within the last 12 months"
+          gazetteNumber="2022/18"
+          article="8"
+          severity="critical"
+          isCompliant={true}
+        />
+        <RuleCheckItem
+          id="rule-3"
+          description="Emergency exits must be clearly marked"
+          gazetteNumber="2021/32"
+          article="15"
+          severity="critical"
+          isCompliant={false}
+          notes="Exit sign not illuminated"
+        />
+      </VStack>
+    ),
+  },
+};
+
+export const DocumentationStep: Story = {
+  args: {
+    inspectionId: "insp-123",
+    companyName: "Golden Dragon Restaurant",
+    currentStep: "documentation",
+    children: (
+      <VStack gap="md">
+        <Typography variant="h3">Documentation</Typography>
+        <Typography variant="body" className="text-neutral-500">
+          Review and add any additional notes or evidence.
+        </Typography>
+      </VStack>
+    ),
+  },
+};
+
+export const SignaturesStep: Story = {
+  args: {
+    inspectionId: "insp-123",
+    companyName: "Golden Dragon Restaurant",
+    currentStep: "signatures",
+    children: (
+      <VStack gap="lg">
+        <SignatureCapture
+          title="Inspector Signature"
+          participantName="Ahmad Hassan"
+          participantId="inspector-1"
+          required
+        />
+        <SignatureCapture
+          title="Company Representative"
+          participantName="John Smith"
+          participantId="participant-1"
+          required
+        />
+      </VStack>
+    ),
+  },
+};
+
+export const CannotProceed: Story = {
+  args: {
+    inspectionId: "insp-123",
+    companyName: "Golden Dragon Restaurant",
+    currentStep: "participants",
+    canProceed: false,
+    children: (
+      <VStack gap="md">
+        <Typography variant="h3">Participants Required</Typography>
+        <Typography variant="body" className="text-red-500">
+          At least one participant must be added before proceeding.
+        </Typography>
+      </VStack>
+    ),
+  },
+};
+
+export const NoFloatingMenu: Story = {
+  args: {
+    inspectionId: "insp-123",
+    companyName: "Golden Dragon Restaurant",
+    currentStep: "rules",
+    showFloatingMenu: false,
+    children: (
+      <Typography variant="body">Floating menu is hidden</Typography>
+    ),
+  },
+};

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

@@ -0,0 +1,264 @@
+/**
+ * InspectionWizardTemplate
+ *
+ * Multi-step wizard template for conducting inspections.
+ * Guides inspectors through the inspection process.
+ *
+ * Page: InspectionWizardPage
+ * Entity: Inspection
+ * ViewType: wizard
+ */
+
+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 { useEventBus } from "../../../hooks/useEventBus";
+import { ProgressHeader } from "../molecules/ProgressHeader";
+import { ComplianceSummary, ComplianceStats } from "../molecules/ComplianceSummary";
+import { FloatingActionMenu } from "../organisms/FloatingActionMenu";
+import {
+  ArrowLeft,
+  ArrowRight,
+  Save,
+  CheckCircle,
+  Building2,
+  Users,
+  ClipboardCheck,
+  FileText,
+  PenTool,
+} from "lucide-react";
+
+export type WizardStep =
+  | "company"
+  | "participants"
+  | "rules"
+  | "documentation"
+  | "signatures";
+
+export interface InspectionWizardTemplateProps {
+  /** Inspection ID */
+  inspectionId: string;
+  /** Company name */
+  companyName: string;
+  /** Current step */
+  currentStep: WizardStep;
+  /** Compliance stats */
+  complianceStats?: ComplianceStats;
+  /** Step content render prop */
+  children?: React.ReactNode;
+  /** Can proceed to next step */
+  canProceed?: boolean;
+  /** Show floating action menu */
+  showFloatingMenu?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+  /** Step change handler */
+  onStepChange?: (step: WizardStep) => void;
+  /** Save draft handler */
+  onSaveDraft?: () => void;
+  /** Complete handler */
+  onComplete?: () => void;
+}
+
+const steps: Array<{ id: WizardStep; label: string; icon: typeof Building2 }> = [
+  { id: "company", label: "Company Info", icon: Building2 },
+  { id: "participants", label: "Participants", icon: Users },
+  { id: "rules", label: "Rule Check", icon: ClipboardCheck },
+  { id: "documentation", label: "Documentation", icon: FileText },
+  { id: "signatures", label: "Signatures", icon: PenTool },
+];
+
+export const InspectionWizardTemplate: React.FC<InspectionWizardTemplateProps> = ({
+  inspectionId,
+  companyName,
+  currentStep,
+  complianceStats,
+  children,
+  canProceed = true,
+  showFloatingMenu = true,
+  className,
+  onStepChange,
+  onSaveDraft,
+  onComplete,
+}) => {
+  const eventBus = useEventBus();
+
+  const currentStepIndex = steps.findIndex((s) => s.id === currentStep);
+  const isFirstStep = currentStepIndex === 0;
+  const isLastStep = currentStepIndex === steps.length - 1;
+
+  const progressSteps = steps.map((step, index) => ({
+    id: step.id,
+    label: step.label,
+    completed: index < currentStepIndex,
+    current: step.id === currentStep,
+  }));
+
+  const handlePrevious = () => {
+    if (isFirstStep) return;
+    const prevStep = steps[currentStepIndex - 1].id;
+    onStepChange?.(prevStep);
+    eventBus.emit("UI:WIZARD_BACK", { step: prevStep });
+  };
+
+  const handleNext = () => {
+    if (isLastStep) {
+      onComplete?.();
+      eventBus.emit("UI:WIZARD_COMPLETE", { inspectionId });
+    } else {
+      const nextStep = steps[currentStepIndex + 1].id;
+      onStepChange?.(nextStep);
+      eventBus.emit("UI:WIZARD_NEXT", { step: nextStep });
+    }
+  };
+
+  const handleSaveDraft = () => {
+    onSaveDraft?.();
+    eventBus.emit("UI:SAVE_DRAFT", { inspectionId, currentStep });
+  };
+
+  const handleStepClick = (stepId: WizardStep) => {
+    const stepIndex = steps.findIndex((s) => s.id === stepId);
+    // Only allow clicking on completed steps or the current step
+    if (stepIndex <= currentStepIndex) {
+      onStepChange?.(stepId);
+      eventBus.emit("UI:WIZARD_STEP_CHANGE", { step: stepId });
+    }
+  };
+
+  return (
+    <VStack gap="lg" 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-5xl mx-auto p-4">
+          <ProgressHeader
+            title="Field Inspection"
+            subtitle={companyName}
+            phase="execution"
+            steps={progressSteps}
+          />
+        </Box>
+      </Box>
+
+      {/* Step Navigation */}
+      <Box className="max-w-5xl mx-auto w-full px-4">
+        <Card className="p-2">
+          <HStack gap="none" className="overflow-x-auto">
+            {steps.map((step, index) => {
+              const Icon = step.icon;
+              const isCompleted = index < currentStepIndex;
+              const isCurrent = step.id === currentStep;
+              const isClickable = index <= currentStepIndex;
+
+              return (
+                <button
+                  key={step.id}
+                  type="button"
+                  onClick={() => handleStepClick(step.id)}
+                  disabled={!isClickable}
+                  className={cn(
+                    "flex-1 min-w-[120px] p-3 rounded-lg transition-all",
+                    "flex flex-col items-center gap-1",
+                    isCurrent && "bg-blue-50 text-blue-700",
+                    isCompleted && "text-green-600",
+                    !isCurrent && !isCompleted && "text-neutral-400",
+                    isClickable && "hover:bg-neutral-50 cursor-pointer",
+                    !isClickable && "cursor-not-allowed"
+                  )}
+                >
+                  <Box
+                    rounded="full"
+                    padding="sm"
+                    className={cn(
+                      isCompleted && "bg-green-100",
+                      isCurrent && "bg-blue-100",
+                      !isCompleted && !isCurrent && "bg-neutral-100"
+                    )}
+                  >
+                    {isCompleted ? (
+                      <CheckCircle className="h-5 w-5" />
+                    ) : (
+                      <Icon className="h-5 w-5" />
+                    )}
+                  </Box>
+                  <Typography
+                    variant="small"
+                    className={cn("font-medium", isCurrent && "text-blue-700")}
+                  >
+                    {step.label}
+                  </Typography>
+                </button>
+              );
+            })}
+          </HStack>
+        </Card>
+      </Box>
+
+      {/* Compliance Summary (shown on rules step) */}
+      {currentStep === "rules" && complianceStats && (
+        <Box className="max-w-5xl mx-auto w-full px-4">
+          <ComplianceSummary stats={complianceStats} />
+        </Box>
+      )}
+
+      {/* Step Content */}
+      <Box className="max-w-5xl mx-auto w-full px-4 flex-1">
+        <Card className="p-6 min-h-[400px]">{children}</Card>
+      </Box>
+
+      {/* Footer Navigation */}
+      <Box className="bg-white border-t sticky bottom-0 z-40">
+        <Box className="max-w-5xl mx-auto p-4">
+          <HStack justify="between" align="center">
+            <Button
+              variant="secondary"
+              onClick={handlePrevious}
+              disabled={isFirstStep}
+              className="gap-2"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Previous
+            </Button>
+
+            <Button variant="ghost" onClick={handleSaveDraft} className="gap-2">
+              <Save className="h-4 w-4" />
+              Save Draft
+            </Button>
+
+            <Button
+              variant="primary"
+              onClick={handleNext}
+              disabled={!canProceed}
+              className="gap-2"
+            >
+              {isLastStep ? (
+                <>
+                  <CheckCircle className="h-4 w-4" />
+                  Complete Inspection
+                </>
+              ) : (
+                <>
+                  Next
+                  <ArrowRight className="h-4 w-4" />
+                </>
+              )}
+            </Button>
+          </HStack>
+        </Box>
+      </Box>
+
+      {/* Floating Action Menu */}
+      {showFloatingMenu && (
+        <FloatingActionMenu
+          context={{ inspectionId, currentStep }}
+        />
+      )}
+    </VStack>
+  );
+};
+
+InspectionWizardTemplate.displayName = "InspectionWizardTemplate";

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

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InspectionsTemplate, InspectionData } from "./InspectionsTemplate";
+
+const meta: Meta<typeof InspectionsTemplate> = {
+  title: "Clients/Inspection-System/Templates/InspectionsTemplate",
+  component: InspectionsTemplate,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof InspectionsTemplate>;
+
+const sampleInspections: InspectionData[] = [
+  {
+    id: "insp-1",
+    companyName: "Golden Dragon Restaurant",
+    companyId: "comp-1",
+    inspectorName: "Ahmad Hassan",
+    inspectorId: "insp-1",
+    phase: "preparation",
+    fieldType: "Restaurant",
+    scheduledDate: "2024-01-20T09:00:00Z",
+  },
+  {
+    id: "insp-2",
+    companyName: "Fresh Foods Market",
+    companyId: "comp-2",
+    inspectorName: "Sarah Ali",
+    inspectorId: "insp-2",
+    phase: "execution",
+    fieldType: "Retail",
+    scheduledDate: "2024-01-19T10:00:00Z",
+    startedAt: "2024-01-19T10:15:00Z",
+    rulesChecked: 12,
+    totalRules: 25,
+    complianceRate: 75,
+  },
+  {
+    id: "insp-3",
+    companyName: "Tech Solutions Inc.",
+    companyId: "comp-3",
+    inspectorName: "Mohammad Khan",
+    inspectorId: "insp-3",
+    phase: "documentation",
+    fieldType: "Office",
+    scheduledDate: "2024-01-18T14:00:00Z",
+    startedAt: "2024-01-18T14:10:00Z",
+    rulesChecked: 18,
+    totalRules: 20,
+    complianceRate: 90,
+  },
+  {
+    id: "insp-4",
+    companyName: "City Warehouse Ltd.",
+    companyId: "comp-4",
+    inspectorName: "Ahmad Hassan",
+    inspectorId: "insp-1",
+    phase: "completed",
+    fieldType: "Warehouse",
+    scheduledDate: "2024-01-15T08:00:00Z",
+    startedAt: "2024-01-15T08:05:00Z",
+    completedAt: "2024-01-15T12:30:00Z",
+    rulesChecked: 30,
+    totalRules: 30,
+    complianceRate: 87,
+  },
+  {
+    id: "insp-5",
+    companyName: "Sunset Cafe",
+    companyId: "comp-5",
+    inspectorName: "Sarah Ali",
+    inspectorId: "insp-2",
+    phase: "completed",
+    fieldType: "Restaurant",
+    scheduledDate: "2024-01-14T11:00:00Z",
+    completedAt: "2024-01-14T15:00:00Z",
+    rulesChecked: 22,
+    totalRules: 22,
+    complianceRate: 95,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    items: sampleInspections,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    items: [],
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    error: new Error("Failed to load inspections"),
+  },
+};
+
+export const PreparationOnly: Story = {
+  args: {
+    items: sampleInspections.filter((i) => i.phase === "preparation"),
+    title: "Scheduled Inspections",
+  },
+};
+
+export const InProgressOnly: Story = {
+  args: {
+    items: sampleInspections.filter((i) => i.phase === "execution" || i.phase === "documentation"),
+    title: "Active Inspections",
+  },
+};
+
+export const CompletedOnly: Story = {
+  args: {
+    items: sampleInspections.filter((i) => i.phase === "completed"),
+    title: "Completed Inspections",
+  },
+};