@almadar/cli 0.3.2 → 0.3.3

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

@@ -0,0 +1,287 @@
+/**
+ * InspectionsTemplate
+ *
+ * Template for the Inspections list page (/inspections).
+ * Displays Inspection entities with filtering and actions.
+ *
+ * Page: InspectionsPage
+ * Entity: Inspection
+ * ViewType: list
+ */
+
+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 { Input } from "../../../components/atoms/Input";
+import { Card } from "../../../components/atoms/Card";
+import { Badge } from "../../../components/atoms/Badge";
+import { Spinner } from "../../../components/atoms/Spinner";
+import { useEventBus } from "../../../hooks/useEventBus";
+import { PhaseIndicator, InspectionPhase } from "../atoms/PhaseIndicator";
+import {
+  Plus,
+  Search,
+  Filter,
+  ClipboardList,
+  Building2,
+  Calendar,
+  User,
+  Eye,
+  Play,
+  FileText,
+} from "lucide-react";
+
+export interface InspectionData {
+  id: string;
+  companyName: string;
+  companyId: string;
+  inspectorName: string;
+  inspectorId: string;
+  phase: InspectionPhase;
+  fieldType: string;
+  scheduledDate?: string;
+  startedAt?: string;
+  completedAt?: string;
+  rulesChecked?: number;
+  totalRules?: number;
+  complianceRate?: number;
+}
+
+export interface InspectionsTemplateProps {
+  /** Inspection items */
+  items?: readonly InspectionData[];
+  /** Data prop alias */
+  data?: readonly InspectionData[];
+  /** Loading state */
+  isLoading?: boolean;
+  /** Error state */
+  error?: Error | null;
+  /** Page title */
+  title?: string;
+  /** Show header */
+  showHeader?: boolean;
+  /** Show search */
+  showSearch?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const getComplianceColor = (rate: number | undefined) => {
+  if (rate === undefined) return "neutral";
+  if (rate >= 90) return "success";
+  if (rate >= 70) return "warning";
+  return "error";
+};
+
+const InspectionCard: React.FC<{
+  inspection: InspectionData;
+  onAction: (action: string, inspection: InspectionData) => void;
+}> = ({ inspection, onAction }) => {
+  return (
+    <Card className="p-4 hover:shadow-md transition-shadow">
+      <VStack gap="md">
+        <HStack justify="between" align="start">
+          <VStack gap="xs">
+            <Typography variant="body" className="font-medium text-neutral-800">
+              {inspection.companyName}
+            </Typography>
+            <HStack gap="sm" wrap>
+              <Badge variant="default">{inspection.fieldType}</Badge>
+              <PhaseIndicator phase={inspection.phase} size="sm" />
+            </HStack>
+          </VStack>
+        </HStack>
+
+        <VStack gap="xs" className="text-neutral-500">
+          <HStack gap="xs" align="center">
+            <User className="h-3 w-3" />
+            <Typography variant="small">{inspection.inspectorName}</Typography>
+          </HStack>
+          {inspection.scheduledDate && (
+            <HStack gap="xs" align="center">
+              <Calendar className="h-3 w-3" />
+              <Typography variant="small">
+                {new Date(inspection.scheduledDate).toLocaleDateString()}
+              </Typography>
+            </HStack>
+          )}
+        </VStack>
+
+        {inspection.complianceRate !== undefined && (
+          <HStack gap="sm" align="center">
+            <Typography variant="small" className="text-neutral-500">
+              Compliance:
+            </Typography>
+            <Badge variant={getComplianceColor(inspection.complianceRate)}>
+              {inspection.complianceRate}%
+            </Badge>
+            <Typography variant="small" className="text-neutral-400">
+              ({inspection.rulesChecked}/{inspection.totalRules} rules)
+            </Typography>
+          </HStack>
+        )}
+
+        <HStack gap="sm" className="pt-2 border-t">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onAction("VIEW", inspection)}
+            className="gap-1"
+          >
+            <Eye className="h-3 w-3" />
+            View
+          </Button>
+          {inspection.phase === "preparation" && (
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={() => onAction("START", inspection)}
+              className="gap-1"
+            >
+              <Play className="h-3 w-3" />
+              Start
+            </Button>
+          )}
+          {inspection.phase === "execution" && (
+            <Button
+              variant="primary"
+              size="sm"
+              onClick={() => onAction("CONTINUE", inspection)}
+              className="gap-1"
+            >
+              <Play className="h-3 w-3" />
+              Continue
+            </Button>
+          )}
+          {inspection.phase === "completed" && (
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => onAction("REPORT", inspection)}
+              className="gap-1"
+            >
+              <FileText className="h-3 w-3" />
+              Report
+            </Button>
+          )}
+        </HStack>
+      </VStack>
+    </Card>
+  );
+};
+
+export const InspectionsTemplate: React.FC<InspectionsTemplateProps> = ({
+  items,
+  data,
+  isLoading = false,
+  error = null,
+  title = "Inspections",
+  showHeader = true,
+  showSearch = true,
+  className,
+}) => {
+  const eventBus = useEventBus();
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const inspections = items || data || [];
+
+  const handleSearch = (value: string) => {
+    setSearchTerm(value);
+    eventBus.emit("UI:SEARCH", { searchTerm: value });
+  };
+
+  const handleCreate = () => {
+    eventBus.emit("UI:CREATE", { entity: "Inspection" });
+  };
+
+  const handleAction = (action: string, inspection: InspectionData) => {
+    eventBus.emit(`UI:${action}`, { row: inspection, entity: "Inspection" });
+  };
+
+  const filteredInspections = searchTerm
+    ? inspections.filter(
+        (i) =>
+          i.companyName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          i.inspectorName.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    : inspections;
+
+  return (
+    <VStack gap="lg" className={cn("p-6", className)}>
+      {showHeader && (
+        <HStack justify="between" align="center" wrap>
+          <VStack gap="xs">
+            <Typography variant="h1">{title}</Typography>
+            <Typography variant="body" className="text-neutral-500">
+              Manage field inspections
+            </Typography>
+          </VStack>
+
+          <Button variant="primary" onClick={handleCreate} className="gap-2">
+            <Plus className="h-4 w-4" />
+            New Inspection
+          </Button>
+        </HStack>
+      )}
+
+      {showSearch && (
+        <Box className="w-full max-w-sm">
+          <Input
+            placeholder="Search inspections..."
+            value={searchTerm}
+            onChange={(e) => handleSearch(e.target.value)}
+            leftIcon={<Search className="h-4 w-4 text-neutral-400" />}
+          />
+        </Box>
+      )}
+
+      {isLoading && (
+        <VStack align="center" justify="center" className="py-12">
+          <Spinner size="lg" />
+          <Typography variant="body" className="text-neutral-500">
+            Loading inspections...
+          </Typography>
+        </VStack>
+      )}
+
+      {error && (
+        <VStack align="center" justify="center" className="py-12">
+          <Typography variant="body" className="text-red-500">
+            Error: {error.message}
+          </Typography>
+        </VStack>
+      )}
+
+      {!isLoading && !error && (
+        <>
+          {filteredInspections.length === 0 ? (
+            <VStack align="center" justify="center" className="py-12">
+              <ClipboardList className="h-12 w-12 text-neutral-300" />
+              <Typography variant="h3" className="text-neutral-500">
+                No inspections found
+              </Typography>
+              <Typography variant="body" className="text-neutral-400">
+                Create a new inspection to get started
+              </Typography>
+            </VStack>
+          ) : (
+            <Box className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {filteredInspections.map((inspection) => (
+                <InspectionCard
+                  key={inspection.id}
+                  inspection={inspection}
+                  onAction={handleAction}
+                />
+              ))}
+            </Box>
+          )}
+        </>
+      )}
+    </VStack>
+  );
+};
+
+InspectionsTemplate.displayName = "InspectionsTemplate";

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

@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InspectorsTemplate, InspectorData } from "./InspectorsTemplate";
+
+const meta: Meta<typeof InspectorsTemplate> = {
+  title: "Clients/Inspection-System/Templates/InspectorsTemplate",
+  component: InspectorsTemplate,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+};
+
+export default meta;
+type Story = StoryObj<typeof InspectorsTemplate>;
+
+const sampleInspectors: InspectorData[] = [
+  {
+    id: "insp-1",
+    name: "Ahmad",
+    surname: "Hassan",
+    email: "ahmad.hassan@gov.ly",
+    phone: "+218 91 1234567",
+    department: "Food Safety",
+    employeeId: "GOV-2020-001",
+    isActive: true,
+    inspectionCount: 45,
+    lastInspectionDate: "2024-01-15T00:00:00Z",
+  },
+  {
+    id: "insp-2",
+    name: "Sarah",
+    surname: "Ali",
+    email: "sarah.ali@gov.ly",
+    phone: "+218 92 2345678",
+    department: "Fire Safety",
+    employeeId: "GOV-2021-015",
+    isActive: true,
+    inspectionCount: 32,
+    lastInspectionDate: "2024-01-18T00:00:00Z",
+  },
+  {
+    id: "insp-3",
+    name: "Mohammad",
+    surname: "Khan",
+    email: "mohammad.khan@gov.ly",
+    phone: "+218 93 3456789",
+    department: "Building Compliance",
+    employeeId: "GOV-2019-008",
+    isActive: true,
+    inspectionCount: 67,
+  },
+  {
+    id: "insp-4",
+    name: "Fatima",
+    surname: "Omar",
+    email: "fatima.omar@gov.ly",
+    phone: "+218 94 4567890",
+    department: "Environmental",
+    employeeId: "GOV-2022-023",
+    isActive: false,
+    inspectionCount: 12,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    items: sampleInspectors,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    items: [],
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
+};
+
+export const ActiveOnly: Story = {
+  args: {
+    items: sampleInspectors.filter((i) => i.isActive),
+    title: "Active Inspectors",
+  },
+};
+
+export const SingleInspector: Story = {
+  args: {
+    items: [sampleInspectors[0]],
+  },
+};

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

@@ -0,0 +1,255 @@
+/**
+ * InspectorsTemplate
+ *
+ * Template for the Inspectors list page (/inspectors).
+ * Displays Inspector entities (government inspectors).
+ *
+ * Page: InspectorsPage
+ * Entity: Inspector
+ * ViewType: list
+ */
+
+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 { Input } from "../../../components/atoms/Input";
+import { Card } from "../../../components/atoms/Card";
+import { Badge } from "../../../components/atoms/Badge";
+import { Avatar } from "../../../components/atoms/Avatar";
+import { Spinner } from "../../../components/atoms/Spinner";
+import { useEventBus } from "../../../hooks/useEventBus";
+import {
+  Plus,
+  Search,
+  User,
+  Mail,
+  Phone,
+  Building,
+  Eye,
+  Edit,
+  UserX,
+  ClipboardList,
+} from "lucide-react";
+
+export interface InspectorData {
+  id: string;
+  name: string;
+  surname: string;
+  email: string;
+  phone: string;
+  department: string;
+  employeeId: string;
+  isActive: boolean;
+  inspectionCount?: number;
+  lastInspectionDate?: string;
+}
+
+export interface InspectorsTemplateProps {
+  /** Inspector items */
+  items?: readonly InspectorData[];
+  /** Data prop alias */
+  data?: readonly InspectorData[];
+  /** Loading state */
+  isLoading?: boolean;
+  /** Error state */
+  error?: Error | null;
+  /** Page title */
+  title?: string;
+  /** Show header */
+  showHeader?: boolean;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const InspectorCard: React.FC<{
+  inspector: InspectorData;
+  onAction: (action: string, inspector: InspectorData) => void;
+}> = ({ inspector, onAction }) => {
+  const fullName = `${inspector.name} ${inspector.surname}`;
+
+  return (
+    <Card className="p-4 hover:shadow-md transition-shadow">
+      <VStack gap="md">
+        <HStack justify="between" align="start">
+          <HStack gap="sm" align="center">
+            <Avatar name={fullName} size="md" />
+            <VStack gap="xs">
+              <Typography variant="body" className="font-medium text-neutral-800">
+                {fullName}
+              </Typography>
+              <Typography variant="small" className="text-neutral-500">
+                {inspector.employeeId}
+              </Typography>
+            </VStack>
+          </HStack>
+          <Badge variant={inspector.isActive ? "success" : "neutral"}>
+            {inspector.isActive ? "Active" : "Inactive"}
+          </Badge>
+        </HStack>
+
+        <VStack gap="xs" className="text-neutral-500">
+          <HStack gap="xs" align="center">
+            <Building className="h-3 w-3" />
+            <Typography variant="small">{inspector.department}</Typography>
+          </HStack>
+          <HStack gap="xs" align="center">
+            <Mail className="h-3 w-3" />
+            <Typography variant="small">{inspector.email}</Typography>
+          </HStack>
+          <HStack gap="xs" align="center">
+            <Phone className="h-3 w-3" />
+            <Typography variant="small">{inspector.phone}</Typography>
+          </HStack>
+        </VStack>
+
+        {inspector.inspectionCount !== undefined && (
+          <HStack gap="xs" align="center" className="text-neutral-500">
+            <ClipboardList className="h-3 w-3" />
+            <Typography variant="small">
+              {inspector.inspectionCount} inspection{inspector.inspectionCount !== 1 ? "s" : ""}
+            </Typography>
+          </HStack>
+        )}
+
+        <HStack gap="sm" className="pt-2 border-t">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onAction("VIEW", inspector)}
+            className="gap-1"
+          >
+            <Eye className="h-3 w-3" />
+            View
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onAction("EDIT", inspector)}
+            className="gap-1"
+          >
+            <Edit className="h-3 w-3" />
+            Edit
+          </Button>
+          {inspector.isActive && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onAction("DEACTIVATE", inspector)}
+              className="gap-1 text-red-600"
+            >
+              <UserX className="h-3 w-3" />
+              Deactivate
+            </Button>
+          )}
+        </HStack>
+      </VStack>
+    </Card>
+  );
+};
+
+export const InspectorsTemplate: React.FC<InspectorsTemplateProps> = ({
+  items,
+  data,
+  isLoading = false,
+  error = null,
+  title = "Inspectors",
+  showHeader = true,
+  className,
+}) => {
+  const eventBus = useEventBus();
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const inspectors = items || data || [];
+
+  const handleSearch = (value: string) => {
+    setSearchTerm(value);
+    eventBus.emit("UI:SEARCH", { searchTerm: value });
+  };
+
+  const handleCreate = () => {
+    eventBus.emit("UI:CREATE", { entity: "Inspector" });
+  };
+
+  const handleAction = (action: string, inspector: InspectorData) => {
+    eventBus.emit(`UI:${action}`, { row: inspector, entity: "Inspector" });
+  };
+
+  const filteredInspectors = searchTerm
+    ? inspectors.filter(
+        (i) =>
+          i.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          i.surname.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          i.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          i.department.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    : inspectors;
+
+  return (
+    <VStack gap="lg" className={cn("p-6", className)}>
+      {showHeader && (
+        <HStack justify="between" align="center" wrap>
+          <VStack gap="xs">
+            <Typography variant="h1">{title}</Typography>
+            <Typography variant="body" className="text-neutral-500">
+              Manage government inspectors
+            </Typography>
+          </VStack>
+
+          <Button variant="primary" onClick={handleCreate} className="gap-2">
+            <Plus className="h-4 w-4" />
+            Add Inspector
+          </Button>
+        </HStack>
+      )}
+
+      <Box className="w-full max-w-sm">
+        <Input
+          placeholder="Search inspectors..."
+          value={searchTerm}
+          onChange={(e) => handleSearch(e.target.value)}
+          leftIcon={<Search className="h-4 w-4 text-neutral-400" />}
+        />
+      </Box>
+
+      {isLoading && (
+        <VStack align="center" justify="center" className="py-12">
+          <Spinner size="lg" />
+        </VStack>
+      )}
+
+      {error && (
+        <Typography variant="body" className="text-red-500 text-center py-12">
+          Error: {error.message}
+        </Typography>
+      )}
+
+      {!isLoading && !error && (
+        <>
+          {filteredInspectors.length === 0 ? (
+            <VStack align="center" justify="center" className="py-12">
+              <User className="h-12 w-12 text-neutral-300" />
+              <Typography variant="h3" className="text-neutral-500">
+                No inspectors found
+              </Typography>
+            </VStack>
+          ) : (
+            <Box className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {filteredInspectors.map((inspector) => (
+                <InspectorCard
+                  key={inspector.id}
+                  inspector={inspector}
+                  onAction={handleAction}
+                />
+              ))}
+            </Box>
+          )}
+        </>
+      )}
+    </VStack>
+  );
+};
+
+InspectorsTemplate.displayName = "InspectorsTemplate";

package/shells/typescript-shell/packages/client/src/clients/inspection-system/templates/index.ts

@@ -0,0 +1,47 @@
+/**
+ * Inspection System Templates
+ *
+ * Page-level templates for the inspection system.
+ */
+
+export { InspectionsTemplate, type InspectionsTemplateProps, type InspectionData } from "./InspectionsTemplate";
+export { CompaniesTemplate, type CompaniesTemplateProps, type CompanyData } from "./CompaniesTemplate";
+export { InspectorsTemplate, type InspectorsTemplateProps, type InspectorData } from "./InspectorsTemplate";
+export { InspectionWizardTemplate, type InspectionWizardTemplateProps, type WizardStep } from "./InspectionWizardTemplate";
+
+// Comprehensive process template that represents the full inspection workflow
+export {
+  InspectionProcessTemplate,
+  type InspectionProcessTemplateProps,
+  type ProcessPhase,
+  type ProcessStep,
+  type IntroductionStep,
+  type ContentStep,
+  type PreparationStep,
+  type RecordStep,
+  type ClosingStep,
+  type InspectionData as FullInspectionData,
+  type Inspector,
+  type Company,
+  type AccompanyingPerson,
+  type InspectionField,
+  type InspectionRule,
+  type RuleCheck,
+  type Finding,
+  type Decision,
+  type Objection,
+} from "./InspectionProcessTemplate";
+
+// Config-driven demo template for client presentations
+export {
+  InspectionFormDemoTemplate,
+  type InspectionFormDemoTemplateProps,
+  type DemoPhase,
+  type FormTabConfig,
+  type FormSection,
+  type FormField,
+  type FormState,
+  type ViolationRecord,
+  type PhaseDefinition,
+  type SExpression,
+} from "./InspectionFormDemoTemplate";