@hed-hog/operations 0.0.294 → 0.0.296

package/hedhog/frontend/app/_components/kanban-board.tsx.ejs

@@ -1,626 +0,0 @@
-'use client';
-
-import { Badge } from '@/components/ui/badge';
-import { Button } from '@/components/ui/button';
-import { cn } from '@/lib/utils';
-import {
-  DndContext,
-  DragEndEvent,
-  DragOverlay,
-  DragStartEvent,
-  KeyboardSensor,
-  PointerSensor,
-  closestCorners,
-  useDroppable,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
-import {
-  SortableContext,
-  sortableKeyboardCoordinates,
-  useSortable,
-  verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-import {
-  AlertCircle,
-  CalendarClock,
-  ChevronDown,
-  ChevronRight,
-  Clock3,
-  UserRound,
-} from 'lucide-react';
-import { memo, useMemo, useState } from 'react';
-import type {
-  OperationsUser,
-  Task,
-  TaskPriority,
-  TaskStatus,
-} from '../_lib/types/operations';
-import { getTaskBadgeClasses, getTaskStatusLabel } from '../_lib/utils/status';
-import { StatusBadge } from './status-badge';
-
-export const TASK_UNASSIGNED_LANE = 'unassigned';
-
-const columns: TaskStatus[] = [
-  'backlog',
-  'todo',
-  'in-progress',
-  'review',
-  'done',
-];
-
-type Lane = {
-  id: string;
-  name: string;
-  role?: string;
-};
-
-type ColumnMeta = {
-  laneId: string;
-  status: TaskStatus;
-};
-
-export interface MoveTasksPayload {
-  draggedTaskId: string;
-  toLaneId: string;
-  toStatus: TaskStatus;
-  beforeTaskId?: string;
-}
-
-interface KanbanBoardProps {
-  tasks: Task[];
-  users: OperationsUser[];
-  selectedTaskIds?: string[];
-  focusedTaskId?: string | null;
-  keyboardDragMode?: boolean;
-  collapsedLaneIds?: string[];
-  onToggleLane?: (laneId: string) => void;
-  onTaskFocus?: (taskId: string) => void;
-  onTaskOpen?: (taskId: string) => void;
-  onSelectionChange?: (taskId: string, multi: boolean) => void;
-  onMoveTasks?: (payload: MoveTasksPayload) => void;
-}
-
-function getLaneId(task: Task) {
-  return task.assignedUserId || TASK_UNASSIGNED_LANE;
-}
-
-function getColumnId(laneId: string, status: TaskStatus) {
-  return `col:${laneId}:${status}`;
-}
-
-function parseColumnId(columnId: string): ColumnMeta | null {
-  if (!columnId.startsWith('col:')) {
-    return null;
-  }
-
-  const [, laneId, status] = columnId.split(':');
-
-  if (!laneId || !status) {
-    return null;
-  }
-
-  if (!columns.includes(status as TaskStatus)) {
-    return null;
-  }
-
-  return {
-    laneId,
-    status: status as TaskStatus,
-  };
-}
-
-function getPriorityClass(priority: TaskPriority) {
-  return {
-    low: 'bg-emerald-100 text-emerald-700',
-    medium: 'bg-slate-200 text-slate-700',
-    high: 'bg-orange-100 text-orange-700',
-    critical: 'bg-rose-100 text-rose-700',
-  }[priority];
-}
-
-function formatDueDate(dueDate: string) {
-  const date = new Date(`${dueDate}T00:00:00`);
-
-  if (Number.isNaN(date.getTime())) {
-    return dueDate;
-  }
-
-  return new Intl.DateTimeFormat('en-US', {
-    month: 'short',
-    day: 'numeric',
-  }).format(date);
-}
-
-const TaskCard = memo(function TaskCard({
-  task,
-  selected,
-  focused,
-  userName,
-  keyboardDragMode,
-  onFocus,
-  onOpen,
-  onSelect,
-}: {
-  task: Task;
-  selected: boolean;
-  focused: boolean;
-  userName: string;
-  keyboardDragMode: boolean;
-  onFocus: (taskId: string) => void;
-  onOpen: (taskId: string) => void;
-  onSelect: (taskId: string, multi: boolean) => void;
-}) {
-  const sortable = useSortable({
-    id: task.id,
-    data: {
-      type: 'task',
-      laneId: getLaneId(task),
-      status: task.status,
-    },
-    disabled: false,
-  });
-
-  const style = {
-    transform: CSS.Transform.toString(sortable.transform),
-    transition: sortable.transition,
-  };
-
-  return (
-    <article
-      ref={sortable.setNodeRef}
-      style={style}
-      aria-label={`Task ${task.title}`}
-      onFocus={() => onFocus(task.id)}
-      onClick={(event) => {
-        const useMulti = event.ctrlKey || event.metaKey;
-        onSelect(task.id, useMulti);
-      }}
-      onDoubleClick={() => onOpen(task.id)}
-      onKeyDown={(event) => {
-        if (event.key === 'Enter') {
-          event.preventDefault();
-          onOpen(task.id);
-          return;
-        }
-
-        if (
-          event.key.toLowerCase() === 'a' &&
-          (event.ctrlKey || event.metaKey)
-        ) {
-          event.preventDefault();
-          onSelect(task.id, true);
-        }
-      }}
-      className={cn(
-        'rounded-xl border bg-background p-3 shadow-xs outline-hidden transition',
-        'focus-visible:ring-2 focus-visible:ring-primary/40',
-        selected && 'border-primary bg-primary/5',
-        focused && 'ring-2 ring-primary/40',
-        sortable.isDragging && 'opacity-40',
-        sortable.isOver && 'border-primary/60'
-      )}
-      {...sortable.attributes}
-      {...sortable.listeners}
-    >
-      <div className="mb-2 flex items-start justify-between gap-2">
-        <p className="line-clamp-2 text-sm font-semibold">{task.title}</p>
-        <StatusBadge
-          label={getTaskStatusLabel(task.status)}
-          className={getTaskBadgeClasses(task.status)}
-        />
-      </div>
-      <div className="mb-2 flex flex-wrap gap-1.5">
-        <Badge
-          className={cn('border-transparent', getPriorityClass(task.priority))}
-        >
-          {task.priority}
-        </Badge>
-        {task.labels.map((label) => (
-          <Badge
-            key={label}
-            variant="secondary"
-            className="bg-slate-100 text-[11px] text-slate-700"
-          >
-            {label}
-          </Badge>
-        ))}
-      </div>
-      <div className="grid gap-1 text-xs text-muted-foreground">
-        <div className="flex items-center gap-1.5">
-          <UserRound className="size-3.5" />
-          <span>{userName}</span>
-        </div>
-        <div className="flex items-center gap-1.5">
-          <CalendarClock className="size-3.5" />
-          <span>{formatDueDate(task.dueDate)}</span>
-        </div>
-        <div className="flex items-center gap-1.5">
-          <Clock3 className="size-3.5" />
-          <span>{task.estimatedHours}h</span>
-          {keyboardDragMode ? (
-            <span className="ml-auto inline-flex items-center gap-1 text-[10px] uppercase text-primary">
-              <AlertCircle className="size-3" />
-              KBD drag
-            </span>
-          ) : null}
-        </div>
-      </div>
-    </article>
-  );
-});
-
-const KanbanColumn = memo(function KanbanColumn({
-  laneId,
-  status,
-  tasks,
-  selectedTaskIds,
-  focusedTaskId,
-  usersById,
-  keyboardDragMode,
-  onTaskFocus,
-  onTaskOpen,
-  onSelectionChange,
-}: {
-  laneId: string;
-  status: TaskStatus;
-  tasks: Task[];
-  selectedTaskIds: Set<string>;
-  focusedTaskId: string | null;
-  usersById: Map<string, OperationsUser>;
-  keyboardDragMode: boolean;
-  onTaskFocus: (taskId: string) => void;
-  onTaskOpen: (taskId: string) => void;
-  onSelectionChange: (taskId: string, multi: boolean) => void;
-}) {
-  const columnId = getColumnId(laneId, status);
-
-  const droppable = useDroppable({
-    id: columnId,
-    data: {
-      type: 'column',
-      laneId,
-      status,
-    },
-  });
-
-  return (
-    <section
-      ref={droppable.setNodeRef}
-      className={cn(
-        'rounded-xl border bg-slate-50/80 p-3',
-        droppable.isOver && 'border-primary/70 bg-primary/5'
-      )}
-      aria-label={`${getTaskStatusLabel(status)} column`}
-    >
-      <header className="mb-3 flex items-center justify-between gap-2">
-        <h3 className="text-xs font-semibold tracking-wide text-muted-foreground uppercase">
-          {getTaskStatusLabel(status)}
-        </h3>
-        <span className="rounded-md bg-background px-2 py-0.5 text-xs font-medium text-muted-foreground">
-          {tasks.length}
-        </span>
-      </header>
-
-      <SortableContext
-        items={tasks.map((task) => task.id)}
-        strategy={verticalListSortingStrategy}
-      >
-        <div className="space-y-2.5">
-          {tasks.map((task) => (
-            <TaskCard
-              key={task.id}
-              task={task}
-              selected={selectedTaskIds.has(task.id)}
-              focused={focusedTaskId === task.id}
-              userName={
-                usersById.get(task.assignedUserId)?.name || 'Unassigned'
-              }
-              keyboardDragMode={keyboardDragMode}
-              onFocus={onTaskFocus}
-              onOpen={onTaskOpen}
-              onSelect={onSelectionChange}
-            />
-          ))}
-        </div>
-      </SortableContext>
-    </section>
-  );
-});
-
-const LaneSection = memo(function LaneSection({
-  lane,
-  columnsByStatus,
-  collapsed,
-  onToggle,
-  selectedTaskIds,
-  focusedTaskId,
-  usersById,
-  keyboardDragMode,
-  onTaskFocus,
-  onTaskOpen,
-  onSelectionChange,
-}: {
-  lane: Lane;
-  columnsByStatus: Record<TaskStatus, Task[]>;
-  collapsed: boolean;
-  onToggle: (laneId: string) => void;
-  selectedTaskIds: Set<string>;
-  focusedTaskId: string | null;
-  usersById: Map<string, OperationsUser>;
-  keyboardDragMode: boolean;
-  onTaskFocus: (taskId: string) => void;
-  onTaskOpen: (taskId: string) => void;
-  onSelectionChange: (taskId: string, multi: boolean) => void;
-}) {
-  const total = columns.reduce(
-    (acc, status) => acc + columnsByStatus[status].length,
-    0
-  );
-
-  return (
-    <div className="rounded-2xl border bg-background p-3 shadow-xs">
-      <button
-        type="button"
-        onClick={() => onToggle(lane.id)}
-        className="mb-3 flex w-full items-center justify-between rounded-lg px-2 py-1.5 text-left transition hover:bg-muted/60"
-      >
-        <span>
-          <span className="text-sm font-semibold">{lane.name}</span>
-          {lane.role ? (
-            <span className="ml-2 text-xs text-muted-foreground">
-              {lane.role}
-            </span>
-          ) : null}
-        </span>
-        <span className="inline-flex items-center gap-2 text-xs text-muted-foreground">
-          {total} cards
-          {collapsed ? (
-            <ChevronRight className="size-4" />
-          ) : (
-            <ChevronDown className="size-4" />
-          )}
-        </span>
-      </button>
-
-      {collapsed ? null : (
-        <div className="overflow-x-auto pb-1">
-          <div className="grid min-w-[1120px] grid-cols-5 gap-3">
-            {columns.map((status) => (
-              <KanbanColumn
-                key={`${lane.id}-${status}`}
-                laneId={lane.id}
-                status={status}
-                tasks={columnsByStatus[status]}
-                selectedTaskIds={selectedTaskIds}
-                focusedTaskId={focusedTaskId}
-                usersById={usersById}
-                keyboardDragMode={keyboardDragMode}
-                onTaskFocus={onTaskFocus}
-                onTaskOpen={onTaskOpen}
-                onSelectionChange={onSelectionChange}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-});
-
-export function KanbanBoard({
-  tasks,
-  users,
-  selectedTaskIds = [],
-  focusedTaskId = null,
-  keyboardDragMode = false,
-  collapsedLaneIds = [],
-  onToggleLane = () => {},
-  onTaskFocus = () => {},
-  onTaskOpen = () => {},
-  onSelectionChange = () => {},
-  onMoveTasks = () => {},
-}: KanbanBoardProps) {
-  const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
-
-  const selectedSet = useMemo(
-    () => new Set(selectedTaskIds),
-    [selectedTaskIds]
-  );
-
-  const usersById = useMemo(
-    () => new Map(users.map((user) => [user.id, user])),
-    [users]
-  );
-
-  const lanes = useMemo(() => {
-    const byId = new Map<string, Lane>();
-
-    users.forEach((user) => {
-      byId.set(user.id, {
-        id: user.id,
-        name: user.name,
-        role: user.role,
-      });
-    });
-
-    if (tasks.some((task) => !task.assignedUserId)) {
-      byId.set(TASK_UNASSIGNED_LANE, {
-        id: TASK_UNASSIGNED_LANE,
-        name: 'Unassigned',
-      });
-    }
-
-    tasks.forEach((task) => {
-      const laneId = getLaneId(task);
-      if (!byId.has(laneId)) {
-        byId.set(laneId, {
-          id: laneId,
-          name: laneId,
-        });
-      }
-    });
-
-    return Array.from(byId.values());
-  }, [tasks, users]);
-
-  const tasksByLaneAndStatus = useMemo(() => {
-    const map = new Map<string, Record<TaskStatus, Task[]>>();
-
-    lanes.forEach((lane) => {
-      map.set(lane.id, {
-        backlog: [],
-        todo: [],
-        'in-progress': [],
-        review: [],
-        done: [],
-      });
-    });
-
-    tasks.forEach((task) => {
-      const laneId = getLaneId(task);
-
-      if (!map.has(laneId)) {
-        map.set(laneId, {
-          backlog: [],
-          todo: [],
-          'in-progress': [],
-          review: [],
-          done: [],
-        });
-      }
-
-      map.get(laneId)?.[task.status].push(task);
-    });
-
-    for (const laneTasks of map.values()) {
-      columns.forEach((status) => {
-        laneTasks[status].sort((a, b) => a.order - b.order);
-      });
-    }
-
-    return map;
-  }, [lanes, tasks]);
-
-  const tasksById = useMemo(
-    () => new Map(tasks.map((task) => [task.id, task])),
-    [tasks]
-  );
-
-  const sensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 6 } }),
-    ...(keyboardDragMode
-      ? [
-          useSensor(KeyboardSensor, {
-            coordinateGetter: sortableKeyboardCoordinates,
-          }),
-        ]
-      : [])
-  );
-
-  const handleDragStart = (event: DragStartEvent) => {
-    if (typeof event.active.id === 'string') {
-      setActiveTaskId(event.active.id);
-      onTaskFocus(event.active.id);
-    }
-  };
-
-  const handleDragEnd = (event: DragEndEvent) => {
-    const draggedTaskId =
-      typeof event.active.id === 'string' ? event.active.id : null;
-    const overId = typeof event.over?.id === 'string' ? event.over.id : null;
-
-    setActiveTaskId(null);
-
-    if (!draggedTaskId || !overId) {
-      return;
-    }
-
-    if (draggedTaskId === overId) {
-      return;
-    }
-
-    const overColumn = parseColumnId(overId);
-
-    if (overColumn) {
-      onMoveTasks({
-        draggedTaskId,
-        toLaneId: overColumn.laneId,
-        toStatus: overColumn.status,
-      });
-      return;
-    }
-
-    const overTask = tasksById.get(overId);
-
-    if (!overTask) {
-      return;
-    }
-
-    onMoveTasks({
-      draggedTaskId,
-      toLaneId: getLaneId(overTask),
-      toStatus: overTask.status,
-      beforeTaskId: overTask.id,
-    });
-  };
-
-  return (
-    <DndContext
-      sensors={sensors}
-      collisionDetection={closestCorners}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-    >
-      <div className="space-y-4">
-        {lanes.map((lane) => {
-          const columnsByStatus = tasksByLaneAndStatus.get(lane.id);
-
-          if (!columnsByStatus) {
-            return null;
-          }
-
-          return (
-            <LaneSection
-              key={lane.id}
-              lane={lane}
-              columnsByStatus={columnsByStatus}
-              collapsed={collapsedLaneIds.includes(lane.id)}
-              onToggle={onToggleLane}
-              selectedTaskIds={selectedSet}
-              focusedTaskId={focusedTaskId}
-              usersById={usersById}
-              keyboardDragMode={keyboardDragMode}
-              onTaskFocus={onTaskFocus}
-              onTaskOpen={onTaskOpen}
-              onSelectionChange={onSelectionChange}
-            />
-          );
-        })}
-      </div>
-
-      <DragOverlay>
-        {activeTaskId ? (
-          <div className="w-[280px] rounded-xl border bg-background p-3 shadow-lg">
-            <p className="mb-1 text-sm font-semibold">
-              {tasksById.get(activeTaskId)?.title}
-            </p>
-            <p className="text-xs text-muted-foreground">
-              {tasksById.get(activeTaskId)?.projectName}
-            </p>
-          </div>
-        ) : null}
-      </DragOverlay>
-
-      {!tasks.length ? (
-        <div className="rounded-xl border border-dashed border-slate-300 p-6 text-center">
-          <p className="text-sm text-muted-foreground">No tasks to display.</p>
-          <Button variant="outline" className="mt-3" size="sm">
-            Adjust filters
-          </Button>
-        </div>
-      ) : null}
-    </DndContext>
-  );
-}