@almadar/cli 1.0.6 → 1.0.7

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

@@ -1,518 +0,0 @@
-/**
- * SessionDetailTemplate
- *
- * Template for viewing detailed information about a training session.
- * Shows session info, participants, exercises, and video link.
- *
- * Page: SessionDetailPage (derived)
- * Entity: TrainingSession
- * ViewType: detail
- *
- * Event Contract:
- * - Emits: UI:EDIT - edit session
- * - Emits: UI:START - start session
- * - Emits: UI:COMPLETE - complete session
- * - Emits: UI:CANCEL - cancel session
- * - Emits: UI:DELETE - delete session
- * - Emits: UI:BACK - navigate back
- */
-
-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 { Spinner } from "../../../components/atoms/Spinner";
-import { useEventBus } from "../../../hooks/useEventBus";
-import { ExerciseVideoLink } from "../atoms/ExerciseVideoLink";
-import {
-  ArrowLeft,
-  Edit,
-  PlayCircle,
-  CheckCircle2,
-  XCircle,
-  Trash2,
-  Calendar,
-  Clock,
-  Users,
-  User,
-  Youtube,
-  Dumbbell,
-  MapPin,
-  FileText,
-} from "lucide-react";
-
-/**
- * TrainingSession entity data
- */
-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;
-  notes?: string;
-  location?: string;
-  createdAt?: string | Date;
-  updatedAt?: string | Date;
-}
-
-/**
- * Participant data
- */
-export interface ParticipantData {
-  id: string;
-  name: string;
-  email?: string;
-  profileImage?: string;
-  attended?: boolean;
-}
-
-/**
- * Exercise data for the session
- */
-export interface SessionExercise {
-  name: string;
-  sets: number;
-  reps: number;
-  weight?: number;
-  notes?: string;
-}
-
-export interface SessionDetailTemplateProps {
-  /** Session data */
-  data?: TrainingSessionData;
-  /** Trainer data */
-  trainer?: { id: string; name: string; email?: string };
-  /** Trainee or participants */
-  participants?: ParticipantData[];
-  /** Exercises in this session */
-  exercises?: SessionExercise[];
-  /** Loading state */
-  isLoading?: boolean;
-  /** Error state */
-  error?: Error | null;
-  /** Entity context for events */
-  entity?: string;
-  /** Additional CSS classes */
-  className?: string;
-}
-
-type SessionAction = "START" | "COMPLETE" | "CANCEL";
-
-const statusConfig: Record<
-  string,
-  {
-    label: string;
-    color: string;
-    icon: typeof Calendar;
-    actions: SessionAction[];
-  }
-> = {
-  scheduled: {
-    label: "Scheduled",
-    color: "bg-blue-100 text-blue-700",
-    icon: Calendar,
-    actions: ["START", "CANCEL"],
-  },
-  "in-progress": {
-    label: "In Progress",
-    color: "bg-amber-100 text-amber-700",
-    icon: PlayCircle,
-    actions: ["COMPLETE", "CANCEL"],
-  },
-  completed: {
-    label: "Completed",
-    color: "bg-green-100 text-green-700",
-    icon: CheckCircle2,
-    actions: [],
-  },
-  cancelled: {
-    label: "Cancelled",
-    color: "bg-red-100 text-red-700",
-    icon: XCircle,
-    actions: [],
-  },
-};
-
-const formatDateTime = (date: string | Date): string => {
-  const d = new Date(date);
-  return d.toLocaleDateString("en-US", {
-    weekday: "long",
-    month: "long",
-    day: "numeric",
-    year: "numeric",
-    hour: "numeric",
-    minute: "2-digit",
-  });
-};
-
-const formatDuration = (minutes: number): string => {
-  if (minutes < 60) return `${minutes} minutes`;
-  const hours = Math.floor(minutes / 60);
-  const mins = minutes % 60;
-  return mins > 0
-    ? `${hours}h ${mins}m`
-    : `${hours} hour${hours > 1 ? "s" : ""}`;
-};
-
-export const SessionDetailTemplate: React.FC<SessionDetailTemplateProps> = ({
-  data,
-  trainer,
-  participants,
-  exercises,
-  isLoading = false,
-  error = null,
-  entity = "TrainingSession",
-  className,
-}) => {
-  const eventBus = useEventBus();
-
-  // Handle back navigation
-  const handleBack = useCallback(() => {
-    eventBus.emit("UI:BACK", { entity });
-  }, [eventBus, entity]);
-
-  // Handle edit
-  const handleEdit = useCallback(() => {
-    eventBus.emit("UI:EDIT", { row: data, entity });
-  }, [eventBus, data, entity]);
-
-  // Handle start
-  const handleStart = useCallback(() => {
-    eventBus.emit("UI:START", { row: data, entity });
-  }, [eventBus, data, entity]);
-
-  // Handle complete
-  const handleComplete = useCallback(() => {
-    eventBus.emit("UI:COMPLETE", { row: data, entity });
-  }, [eventBus, data, entity]);
-
-  // Handle cancel
-  const handleCancel = useCallback(() => {
-    eventBus.emit("UI:CANCEL", { row: data, entity });
-  }, [eventBus, data, entity]);
-
-  // Handle delete
-  const handleDelete = useCallback(() => {
-    eventBus.emit("UI:DELETE", { row: data, entity });
-  }, [eventBus, data, entity]);
-
-  // Loading state
-  if (isLoading) {
-    return (
-      <VStack
-        align="center"
-        justify="center"
-        className={cn("p-6 min-h-[400px]", className)}
-      >
-        <Spinner size="lg" />
-        <Typography variant="body" className="text-neutral-500">
-          Loading session details...
-        </Typography>
-      </VStack>
-    );
-  }
-
-  // Error state
-  if (error) {
-    return (
-      <VStack
-        align="center"
-        justify="center"
-        className={cn("p-6 min-h-[400px]", className)}
-      >
-        <Typography variant="body" className="text-red-500">
-          Error: {error.message}
-        </Typography>
-      </VStack>
-    );
-  }
-
-  // No data state
-  if (!data) {
-    return (
-      <VStack
-        align="center"
-        justify="center"
-        className={cn("p-6 min-h-[400px]", className)}
-      >
-        <Calendar className="h-12 w-12 text-neutral-300" />
-        <Typography variant="h3" className="text-neutral-500">
-          Session not found
-        </Typography>
-      </VStack>
-    );
-  }
-
-  const status = statusConfig[data.status || "scheduled"];
-  const StatusIcon = status.icon;
-
-  return (
-    <VStack gap="lg" className={cn("p-6", className)}>
-      {/* Header */}
-      <HStack justify="between" align="start" wrap>
-        <HStack gap="md" align="center">
-          <Button variant="ghost" size="sm" onClick={handleBack}>
-            <ArrowLeft className="h-4 w-4" />
-          </Button>
-          <VStack gap="xs">
-            <HStack gap="sm" align="center">
-              <Typography variant="h1">{data.title}</Typography>
-              <Badge className={status.color}>
-                <StatusIcon className="h-3 w-3 mr-1" />
-                {status.label}
-              </Badge>
-            </HStack>
-            <HStack gap="md" align="center" className="text-neutral-500">
-              <HStack gap="xs" align="center">
-                <Calendar className="h-4 w-4" />
-                <Typography variant="body">
-                  {formatDateTime(data.scheduledAt)}
-                </Typography>
-              </HStack>
-              <HStack gap="xs" align="center">
-                <Clock className="h-4 w-4" />
-                <Typography variant="body">
-                  {formatDuration(data.duration)}
-                </Typography>
-              </HStack>
-            </HStack>
-          </VStack>
-        </HStack>
-
-        <HStack gap="sm">
-          <Button variant="secondary" onClick={handleEdit}>
-            <Edit className="h-4 w-4 mr-1" />
-            Edit
-          </Button>
-          {status.actions.includes("START") && (
-            <Button variant="primary" onClick={handleStart}>
-              <PlayCircle className="h-4 w-4 mr-1" />
-              Start Session
-            </Button>
-          )}
-          {status.actions.includes("COMPLETE") && (
-            <Button variant="primary" onClick={handleComplete}>
-              <CheckCircle2 className="h-4 w-4 mr-1" />
-              Complete
-            </Button>
-          )}
-          {status.actions.includes("CANCEL") && (
-            <Button
-              variant="ghost"
-              onClick={handleCancel}
-              className="text-amber-600 hover:text-amber-700"
-            >
-              <XCircle className="h-4 w-4 mr-1" />
-              Cancel
-            </Button>
-          )}
-          <Button
-            variant="ghost"
-            onClick={handleDelete}
-            className="text-red-500 hover:text-red-600 hover:bg-red-50"
-          >
-            <Trash2 className="h-4 w-4" />
-          </Button>
-        </HStack>
-      </HStack>
-
-      {/* Main Content Grid */}
-      <HStack gap="lg" wrap className="w-full items-start">
-        {/* Left Column - Details */}
-        <VStack gap="md" className="flex-1 min-w-[300px]">
-          {/* Session Info */}
-          <Card className="p-4">
-            <VStack gap="md">
-              <Typography variant="h4">Session Details</Typography>
-              <VStack gap="sm">
-                <HStack justify="between">
-                  <Typography variant="body" className="text-neutral-500">
-                    Type
-                  </Typography>
-                  <HStack gap="xs" align="center">
-                    {data.isGroupSession ? (
-                      <>
-                        <Users className="h-4 w-4 text-blue-500" />
-                        <Typography variant="body">
-                          Group Session ({data.maxParticipants || "unlimited"}{" "}
-                          max)
-                        </Typography>
-                      </>
-                    ) : (
-                      <>
-                        <User className="h-4 w-4 text-green-500" />
-                        <Typography variant="body">1-on-1 Session</Typography>
-                      </>
-                    )}
-                  </HStack>
-                </HStack>
-                <HStack justify="between">
-                  <Typography variant="body" className="text-neutral-500">
-                    Duration
-                  </Typography>
-                  <Typography variant="body">
-                    {formatDuration(data.duration)}
-                  </Typography>
-                </HStack>
-                {data.location && (
-                  <HStack justify="between">
-                    <Typography variant="body" className="text-neutral-500">
-                      Location
-                    </Typography>
-                    <HStack gap="xs" align="center">
-                      <MapPin className="h-4 w-4 text-neutral-400" />
-                      <Typography variant="body">{data.location}</Typography>
-                    </HStack>
-                  </HStack>
-                )}
-                {trainer && (
-                  <HStack justify="between">
-                    <Typography variant="body" className="text-neutral-500">
-                      Trainer
-                    </Typography>
-                    <Typography variant="body">{trainer.name}</Typography>
-                  </HStack>
-                )}
-              </VStack>
-            </VStack>
-          </Card>
-
-          {/* Notes */}
-          {data.notes && (
-            <Card className="p-4">
-              <VStack gap="sm">
-                <HStack gap="xs" align="center">
-                  <FileText className="h-4 w-4 text-neutral-400" />
-                  <Typography variant="h4">Notes</Typography>
-                </HStack>
-                <Typography variant="body" className="text-neutral-600">
-                  {data.notes}
-                </Typography>
-              </VStack>
-            </Card>
-          )}
-
-          {/* Video Link */}
-          {data.youtubeLink && (
-            <Card className="p-4">
-              <VStack gap="sm">
-                <HStack gap="xs" align="center">
-                  <Youtube className="h-4 w-4 text-red-500" />
-                  <Typography variant="h4">Session Video</Typography>
-                </HStack>
-                <ExerciseVideoLink
-                  videoUrl={data.youtubeLink}
-                  exerciseName="Session Recording"
-                />
-              </VStack>
-            </Card>
-          )}
-        </VStack>
-
-        {/* Right Column - Participants & Exercises */}
-        <VStack gap="md" className="flex-1 min-w-[300px]">
-          {/* Participants */}
-          {participants && participants.length > 0 && (
-            <Card className="p-4">
-              <VStack gap="md">
-                <HStack justify="between" align="center">
-                  <HStack gap="xs" align="center">
-                    <Users className="h-4 w-4 text-neutral-400" />
-                    <Typography variant="h4">
-                      Participants ({participants.length})
-                    </Typography>
-                  </HStack>
-                </HStack>
-                <VStack gap="sm">
-                  {participants.map((participant) => (
-                    <HStack
-                      key={participant.id}
-                      justify="between"
-                      align="center"
-                      className="py-2 border-b border-neutral-100 last:border-0"
-                    >
-                      <HStack gap="sm" align="center">
-                        <Box
-                          display="flex"
-                          rounded="full"
-                          className="items-center justify-center h-8 w-8 bg-neutral-100"
-                        >
-                          {participant.profileImage ? (
-                            <img
-                              src={participant.profileImage}
-                              alt={participant.name}
-                              className="h-8 w-8 rounded-full object-cover"
-                            />
-                          ) : (
-                            <User className="h-4 w-4 text-neutral-400" />
-                          )}
-                        </Box>
-                        <Typography variant="body">
-                          {participant.name}
-                        </Typography>
-                      </HStack>
-                      {participant.attended !== undefined && (
-                        <Badge
-                          className={
-                            participant.attended
-                              ? "bg-green-100 text-green-700"
-                              : "bg-neutral-100 text-neutral-600"
-                          }
-                          size="sm"
-                        >
-                          {participant.attended ? "Attended" : "Absent"}
-                        </Badge>
-                      )}
-                    </HStack>
-                  ))}
-                </VStack>
-              </VStack>
-            </Card>
-          )}
-
-          {/* Exercises */}
-          {exercises && exercises.length > 0 && (
-            <Card className="p-4">
-              <VStack gap="md">
-                <HStack gap="xs" align="center">
-                  <Dumbbell className="h-4 w-4 text-neutral-400" />
-                  <Typography variant="h4">
-                    Exercises ({exercises.length})
-                  </Typography>
-                </HStack>
-                <VStack gap="sm">
-                  {exercises.map((exercise, index) => (
-                    <HStack
-                      key={index}
-                      justify="between"
-                      align="center"
-                      className="py-2 border-b border-neutral-100 last:border-0"
-                    >
-                      <Typography variant="body">{exercise.name}</Typography>
-                      <Typography variant="small" className="text-neutral-500">
-                        {exercise.sets}x{exercise.reps}
-                        {exercise.weight ? ` @ ${exercise.weight}kg` : ""}
-                      </Typography>
-                    </HStack>
-                  ))}
-                </VStack>
-              </VStack>
-            </Card>
-          )}
-        </VStack>
-      </HStack>
-    </VStack>
-  );
-};
-
-SessionDetailTemplate.displayName = "SessionDetailTemplate";