@almadar/cli 0.3.1 → 0.3.3

package/shells/typescript-shell/packages/client/src/clients/blaz-kelemnc/templates/SessionsTemplate.stories.tsx

@@ -0,0 +1,207 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SessionsTemplate } from "./SessionsTemplate";
+
+// Define types inline to avoid bundling issues
+interface TrainingSessionData {
+  id: string;
+  traineeId?: string;
+  trainerId?: string;
+  title: string;
+  scheduledAt: Date;
+  duration: number;
+  status: "scheduled" | "in-progress" | "completed" | "cancelled";
+  isGroupSession?: boolean;
+  maxParticipants?: number;
+  youtubeLink?: string;
+  location?: string;
+}
+
+const meta: Meta<typeof SessionsTemplate> = {
+  title: "Blaz-Klemenc/Templates/SessionsTemplate",
+  component: SessionsTemplate,
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    showHeader: { control: "boolean" },
+    showSearch: { control: "boolean" },
+    showFilters: { control: "boolean" },
+    defaultStatusFilter: {
+      control: { type: "select" },
+      options: ["all", "scheduled", "in-progress", "completed", "cancelled"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof SessionsTemplate>;
+
+// Helper to generate dates
+const getDate = (daysFromNow: number, hours: number = 10): Date => {
+  const date = new Date();
+  date.setDate(date.getDate() + daysFromNow);
+  date.setHours(hours, 0, 0, 0);
+  return date;
+};
+
+// Sample sessions data
+const sampleSessions: TrainingSessionData[] = [
+  {
+    id: "session-1",
+    traineeId: "trainee-1",
+    trainerId: "trainer-1",
+    title: "Upper Body Strength",
+    scheduledAt: getDate(0, 9),
+    duration: 60,
+    status: "scheduled",
+    isGroupSession: false,
+  },
+  {
+    id: "session-2",
+    traineeId: "trainee-2",
+    trainerId: "trainer-1",
+    title: "HIIT Training",
+    scheduledAt: getDate(0, 14),
+    duration: 45,
+    status: "in-progress",
+    isGroupSession: true,
+    maxParticipants: 8,
+    youtubeLink: "https://youtube.com/watch?v=example",
+  },
+  {
+    id: "session-3",
+    traineeId: "trainee-3",
+    trainerId: "trainer-1",
+    title: "Flexibility & Mobility",
+    scheduledAt: getDate(1, 10),
+    duration: 45,
+    status: "scheduled",
+    isGroupSession: true,
+    maxParticipants: 12,
+  },
+  {
+    id: "session-4",
+    traineeId: "trainee-1",
+    trainerId: "trainer-1",
+    title: "Lower Body Focus",
+    scheduledAt: getDate(2, 11),
+    duration: 60,
+    status: "scheduled",
+    isGroupSession: false,
+  },
+  {
+    id: "session-5",
+    traineeId: "trainee-4",
+    trainerId: "trainer-1",
+    title: "Core & Stability",
+    scheduledAt: getDate(-1, 9),
+    duration: 45,
+    status: "completed",
+    isGroupSession: false,
+  },
+  {
+    id: "session-6",
+    traineeId: "trainee-2",
+    trainerId: "trainer-1",
+    title: "Personal Training",
+    scheduledAt: getDate(-2, 15),
+    duration: 60,
+    status: "cancelled",
+    isGroupSession: false,
+  },
+  {
+    id: "session-7",
+    traineeId: "trainee-5",
+    trainerId: "trainer-1",
+    title: "Functional Training",
+    scheduledAt: getDate(3, 8),
+    duration: 60,
+    status: "scheduled",
+    isGroupSession: false,
+  },
+  {
+    id: "session-8",
+    traineeId: "trainee-6",
+    trainerId: "trainer-1",
+    title: "Boxing Cardio",
+    scheduledAt: getDate(-3, 17),
+    duration: 45,
+    status: "completed",
+    isGroupSession: true,
+    maxParticipants: 6,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    items: sampleSessions,
+    title: "Training Sessions",
+    subtitle: "Manage training sessions for your trainees",
+    showHeader: true,
+    showSearch: true,
+    showFilters: true,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    items: [],
+    isLoading: true,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    items: [],
+    error: { message: "Failed to load sessions. Please try again." } as Error,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    items: [],
+    title: "Training Sessions",
+    subtitle: "Manage training sessions for your trainees",
+  },
+};
+
+export const ScheduledOnly: Story = {
+  args: {
+    items: sampleSessions.filter((s) => s.status === "scheduled"),
+    defaultStatusFilter: "scheduled",
+    title: "Upcoming Sessions",
+  },
+};
+
+export const CompletedOnly: Story = {
+  args: {
+    items: sampleSessions.filter((s) => s.status === "completed"),
+    defaultStatusFilter: "completed",
+    title: "Completed Sessions",
+  },
+};
+
+export const InProgressOnly: Story = {
+  args: {
+    items: sampleSessions.filter((s) => s.status === "in-progress"),
+    defaultStatusFilter: "in-progress",
+    title: "Active Sessions",
+  },
+};
+
+export const NoHeader: Story = {
+  args: {
+    items: sampleSessions,
+    showHeader: false,
+  },
+};
+
+export const MinimalView: Story = {
+  args: {
+    items: sampleSessions,
+    showHeader: true,
+    showSearch: false,
+    showFilters: false,
+  },
+};

package/shells/typescript-shell/packages/client/src/clients/blaz-kelemnc/templates/SessionsTemplate.tsx

@@ -0,0 +1,508 @@
+/**
+ * SessionsTemplate
+ *
+ * Template for the Training Sessions list page (/training-sessions).
+ * Displays TrainingSession entities with filtering by status and type.
+ *
+ * Page: TrainingSessionsPage
+ * Entity: TrainingSession
+ * ViewType: list
+ * Traits: TrainingSessionManagement, GroupSessionManagement
+ *
+ * Event Contract:
+ * - Emits: UI:CREATE - create new session
+ * - Emits: UI:VIEW - view session details
+ * - Emits: UI:EDIT - edit session
+ * - Emits: UI:START - start a session
+ * - Emits: UI:COMPLETE - complete a session
+ * - Emits: UI:CANCEL - cancel a session
+ * - Emits: UI:DELETE - delete session
+ */
+
+import React, { useState, 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 { 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 {
+  Plus,
+  Search,
+  Calendar,
+  Clock,
+  Eye,
+  Edit,
+  PlayCircle,
+  CheckCircle2,
+  XCircle,
+  Trash2,
+  Users,
+  User,
+  Youtube,
+  LayoutGrid,
+  List,
+} from "lucide-react";
+
+/**
+ * TrainingSession entity data from blaz-klemenc.orb
+ */
+export interface TrainingSessionData {
+  id: string;
+  traineeId?: string;
+  trainerId?: string;
+  title: string;
+  scheduledAt: string | Date;
+  duration: number;
+  youtubeLink?: string;
+  status?: "scheduled" | "in-progress" | "completed" | "cancelled";
+  isGroupSession?: boolean;
+  maxParticipants?: number;
+  createdAt?: string | Date;
+  updatedAt?: string | Date;
+}
+
+export interface SessionsTemplateProps {
+  /** Session items to display */
+  items?: readonly TrainingSessionData[];
+  /** Data prop alias */
+  data?: readonly TrainingSessionData[];
+  /** Loading state */
+  isLoading?: boolean;
+  /** Error state */
+  error?: Error | null;
+  /** Page title */
+  title?: string;
+  /** Page subtitle */
+  subtitle?: string;
+  /** Show header */
+  showHeader?: boolean;
+  /** Show search */
+  showSearch?: boolean;
+  /** Show filters */
+  showFilters?: boolean;
+  /** Default status filter */
+  defaultStatusFilter?: "all" | "scheduled" | "in-progress" | "completed" | "cancelled";
+  /** Entity context for events */
+  entity?: string;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+const statusConfig = {
+  scheduled: {
+    label: "Scheduled",
+    color: "bg-blue-100 text-blue-700",
+    icon: Calendar,
+  },
+  "in-progress": {
+    label: "In Progress",
+    color: "bg-amber-100 text-amber-700",
+    icon: PlayCircle,
+  },
+  completed: {
+    label: "Completed",
+    color: "bg-green-100 text-green-700",
+    icon: CheckCircle2,
+  },
+  cancelled: {
+    label: "Cancelled",
+    color: "bg-red-100 text-red-700",
+    icon: XCircle,
+  },
+};
+
+const formatDateTime = (date: string | Date): string => {
+  const d = new Date(date);
+  return d.toLocaleDateString("en-US", {
+    weekday: "short",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+};
+
+const formatDuration = (minutes: number): string => {
+  if (minutes < 60) return `${minutes}min`;
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  return mins > 0 ? `${hours}h ${mins}m` : `${hours}h`;
+};
+
+const SessionCard: React.FC<{
+  session: TrainingSessionData;
+  onAction: (action: string, session: TrainingSessionData) => void;
+}> = ({ session, onAction }) => {
+  const status = statusConfig[session.status || "scheduled"];
+  const StatusIcon = status.icon;
+
+  return (
+    <Card className="p-4 hover:shadow-md transition-shadow">
+      <VStack gap="md">
+        {/* Header */}
+        <HStack justify="between" align="start">
+          <VStack gap="xs">
+            <Typography variant="body" className="font-medium">
+              {session.title}
+            </Typography>
+            <HStack gap="sm" align="center" className="text-neutral-500">
+              <Calendar className="h-3 w-3" />
+              <Typography variant="small">{formatDateTime(session.scheduledAt)}</Typography>
+            </HStack>
+          </VStack>
+          <Badge className={status.color}>
+            <StatusIcon className="h-3 w-3 mr-1" />
+            {status.label}
+          </Badge>
+        </HStack>
+
+        {/* Info */}
+        <HStack gap="md" className="text-neutral-500">
+          <HStack gap="xs" align="center">
+            <Clock className="h-3 w-3" />
+            <Typography variant="small">{formatDuration(session.duration)}</Typography>
+          </HStack>
+          <HStack gap="xs" align="center">
+            {session.isGroupSession ? (
+              <>
+                <Users className="h-3 w-3" />
+                <Typography variant="small">
+                  Group ({session.maxParticipants || "unlimited"})
+                </Typography>
+              </>
+            ) : (
+              <>
+                <User className="h-3 w-3" />
+                <Typography variant="small">1-on-1</Typography>
+              </>
+            )}
+          </HStack>
+          {session.youtubeLink && (
+            <HStack gap="xs" align="center">
+              <Youtube className="h-3 w-3 text-red-500" />
+              <Typography variant="small">Video</Typography>
+            </HStack>
+          )}
+        </HStack>
+
+        {/* Actions */}
+        <HStack gap="sm" className="pt-2 border-t" wrap>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onAction("VIEW", session)}
+            className="gap-1"
+          >
+            <Eye className="h-3 w-3" />
+            View
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onAction("EDIT", session)}
+            className="gap-1"
+          >
+            <Edit className="h-3 w-3" />
+            Edit
+          </Button>
+          {session.status === "scheduled" && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onAction("START", session)}
+              className="gap-1 text-green-600 hover:text-green-700"
+            >
+              <PlayCircle className="h-3 w-3" />
+              Start
+            </Button>
+          )}
+          {session.status === "in-progress" && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onAction("COMPLETE", session)}
+              className="gap-1 text-green-600 hover:text-green-700"
+            >
+              <CheckCircle2 className="h-3 w-3" />
+              Complete
+            </Button>
+          )}
+          {(session.status === "scheduled" || session.status === "in-progress") && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onAction("CANCEL", session)}
+              className="gap-1 text-amber-600 hover:text-amber-700"
+            >
+              <XCircle className="h-3 w-3" />
+              Cancel
+            </Button>
+          )}
+          <Box className="flex-1" />
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onAction("DELETE", session)}
+            className="gap-1 text-red-600 hover:text-red-700"
+          >
+            <Trash2 className="h-3 w-3" />
+          </Button>
+        </HStack>
+      </VStack>
+    </Card>
+  );
+};
+
+export const SessionsTemplate: React.FC<SessionsTemplateProps> = ({
+  items,
+  data,
+  isLoading = false,
+  error = null,
+  title = "Training Sessions",
+  subtitle = "Manage training sessions for your trainees",
+  showHeader = true,
+  showSearch = true,
+  showFilters = true,
+  defaultStatusFilter = "all",
+  entity = "TrainingSession",
+  className,
+}) => {
+  const eventBus = useEventBus();
+  const [searchTerm, setSearchTerm] = useState("");
+  const [statusFilter, setStatusFilter] = useState<
+    "all" | "scheduled" | "in-progress" | "completed" | "cancelled"
+  >(defaultStatusFilter);
+  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
+
+  const sessions = items || data || [];
+
+  // Handle search
+  const handleSearch = useCallback(
+    (value: string) => {
+      setSearchTerm(value);
+      eventBus.emit("UI:SEARCH", { searchTerm: value, entity });
+    },
+    [eventBus, entity]
+  );
+
+  // Handle create
+  const handleCreate = useCallback(() => {
+    eventBus.emit("UI:CREATE", { entity });
+  }, [eventBus, entity]);
+
+  // Handle status filter
+  const handleStatusFilter = useCallback(
+    (status: "all" | "scheduled" | "in-progress" | "completed" | "cancelled") => {
+      setStatusFilter(status);
+      eventBus.emit("UI:FILTER", { status, entity });
+    },
+    [eventBus, entity]
+  );
+
+  // Handle session actions
+  const handleAction = useCallback(
+    (action: string, session: TrainingSessionData) => {
+      eventBus.emit(`UI:${action}`, { row: session, entity });
+    },
+    [eventBus, entity]
+  );
+
+  // Filter sessions
+  const filteredSessions = sessions.filter((session) => {
+    const matchesSearch =
+      !searchTerm || session.title.toLowerCase().includes(searchTerm.toLowerCase());
+
+    const matchesStatus = statusFilter === "all" || session.status === statusFilter;
+
+    return matchesSearch && matchesStatus;
+  });
+
+  // Count by status
+  const scheduledCount = sessions.filter((s) => s.status === "scheduled").length;
+  const inProgressCount = sessions.filter((s) => s.status === "in-progress").length;
+  const completedCount = sessions.filter((s) => s.status === "completed").length;
+
+  return (
+    <VStack gap="lg" className={cn("p-6", className)}>
+      {/* Page Header */}
+      {showHeader && (
+        <HStack justify="between" align="center" wrap>
+          <VStack gap="xs">
+            <Typography variant="h1">{title}</Typography>
+            <Typography variant="body" className="text-neutral-500">
+              {subtitle}
+            </Typography>
+          </VStack>
+
+          <Button variant="primary" onClick={handleCreate} className="gap-2">
+            <Plus className="h-4 w-4" />
+            Schedule Session
+          </Button>
+        </HStack>
+      )}
+
+      {/* Stats */}
+      <HStack gap="md">
+        <Card className="p-3 flex-1">
+          <HStack gap="sm" align="center">
+            <Calendar className="h-5 w-5 text-blue-500" />
+            <VStack gap="none">
+              <Typography variant="h3">{scheduledCount}</Typography>
+              <Typography variant="small" className="text-neutral-500">
+                Scheduled
+              </Typography>
+            </VStack>
+          </HStack>
+        </Card>
+        <Card className="p-3 flex-1">
+          <HStack gap="sm" align="center">
+            <PlayCircle className="h-5 w-5 text-amber-500" />
+            <VStack gap="none">
+              <Typography variant="h3">{inProgressCount}</Typography>
+              <Typography variant="small" className="text-neutral-500">
+                In Progress
+              </Typography>
+            </VStack>
+          </HStack>
+        </Card>
+        <Card className="p-3 flex-1">
+          <HStack gap="sm" align="center">
+            <CheckCircle2 className="h-5 w-5 text-green-500" />
+            <VStack gap="none">
+              <Typography variant="h3">{completedCount}</Typography>
+              <Typography variant="small" className="text-neutral-500">
+                Completed
+              </Typography>
+            </VStack>
+          </HStack>
+        </Card>
+      </HStack>
+
+      {/* Toolbar */}
+      {(showSearch || showFilters) && (
+        <HStack justify="between" align="center" wrap gap="sm">
+          <HStack gap="sm" align="center">
+            {showSearch && (
+              <Box className="w-full max-w-sm">
+                <Input
+                  placeholder="Search sessions..."
+                  value={searchTerm}
+                  onChange={(e) => handleSearch(e.target.value)}
+                  leftIcon={<Search className="h-4 w-4 text-neutral-400" />}
+                />
+              </Box>
+            )}
+          </HStack>
+
+          <HStack gap="sm">
+            {showFilters && (
+              <>
+                <Button
+                  variant={statusFilter === "all" ? "primary" : "secondary"}
+                  size="sm"
+                  onClick={() => handleStatusFilter("all")}
+                >
+                  All
+                </Button>
+                <Button
+                  variant={statusFilter === "scheduled" ? "primary" : "secondary"}
+                  size="sm"
+                  onClick={() => handleStatusFilter("scheduled")}
+                >
+                  Scheduled
+                </Button>
+                <Button
+                  variant={statusFilter === "in-progress" ? "primary" : "secondary"}
+                  size="sm"
+                  onClick={() => handleStatusFilter("in-progress")}
+                >
+                  In Progress
+                </Button>
+                <Button
+                  variant={statusFilter === "completed" ? "primary" : "secondary"}
+                  size="sm"
+                  onClick={() => handleStatusFilter("completed")}
+                >
+                  Completed
+                </Button>
+              </>
+            )}
+            <HStack gap="xs" className="border-l pl-2 ml-2">
+              <Button
+                variant={viewMode === "grid" ? "primary" : "ghost"}
+                size="sm"
+                onClick={() => setViewMode("grid")}
+              >
+                <LayoutGrid className="h-4 w-4" />
+              </Button>
+              <Button
+                variant={viewMode === "list" ? "primary" : "ghost"}
+                size="sm"
+                onClick={() => setViewMode("list")}
+              >
+                <List className="h-4 w-4" />
+              </Button>
+            </HStack>
+          </HStack>
+        </HStack>
+      )}
+
+      {/* Loading State */}
+      {isLoading && (
+        <VStack align="center" justify="center" className="py-12">
+          <Spinner size="lg" />
+          <Typography variant="body" className="text-neutral-500">
+            Loading sessions...
+          </Typography>
+        </VStack>
+      )}
+
+      {/* Error State */}
+      {error && (
+        <VStack align="center" justify="center" className="py-12">
+          <Typography variant="body" className="text-red-500">
+            Error: {error.message}
+          </Typography>
+        </VStack>
+      )}
+
+      {/* Sessions Grid/List */}
+      {!isLoading && !error && (
+        <>
+          {filteredSessions.length === 0 ? (
+            <VStack align="center" justify="center" className="py-12">
+              <Calendar className="h-12 w-12 text-neutral-300" />
+              <Typography variant="h3" className="text-neutral-500">
+                No sessions found
+              </Typography>
+              <Typography variant="body" className="text-neutral-400">
+                {searchTerm
+                  ? "Try a different search term"
+                  : "Schedule your first session to get started"}
+              </Typography>
+            </VStack>
+          ) : (
+            <Box
+              className={
+                viewMode === "grid"
+                  ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
+                  : "flex flex-col gap-3"
+              }
+            >
+              {filteredSessions.map((session) => (
+                <SessionCard key={session.id} session={session} onAction={handleAction} />
+              ))}
+            </Box>
+          )}
+        </>
+      )}
+    </VStack>
+  );
+};
+
+SessionsTemplate.displayName = "SessionsTemplate";