@hed-hog/operations 0.0.285 → 0.0.291

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

@@ -1,11 +1,47 @@
-import { formatDate, formatHours } from '../_lib/utils/format';
+'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 {
-  getTaskBadgeClasses,
-  getTaskStatusLabel,
-} from '../_lib/utils/status';
-import type { OperationsUser, Task, TaskStatus } from '../_lib/types/operations';
+  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',
@@ -14,70 +50,577 @@ const columns: TaskStatus[] = [
   '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];
 }
 
-export function KanbanBoard({ tasks, users }: KanbanBoardProps) {
+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 (
-    <div className="grid gap-4 xl:grid-cols-5">
-      {columns.map((column) => {
-        const columnTasks = tasks.filter((task) => task.status === column);
-
-        return (
-          <div
-            key={column}
-            className="rounded-xl border bg-muted/30 p-3 shadow-sm"
+    <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"
           >
-            <div className="mb-3 flex items-center justify-between">
-              <h3 className="text-sm font-semibold">{getTaskStatusLabel(column)}</h3>
-              <span className="text-xs text-muted-foreground">
-                {columnTasks.length}
-              </span>
-            </div>
-            <div className="space-y-3">
-              {columnTasks.map((task) => {
-                const assignedUser = users.find(
-                  (user) => user.id === task.assignedUserId
-                );
-
-                return (
-                  <div
-                    key={task.id}
-                    className="rounded-lg border bg-background p-3 shadow-sm"
-                  >
-                    <div className="space-y-2">
-                      <div className="flex items-start justify-between gap-2">
-                        <p className="text-sm font-medium">{task.title}</p>
-                        <StatusBadge
-                          label={getTaskStatusLabel(task.status)}
-                          className={getTaskBadgeClasses(task.status)}
-                        />
-                      </div>
-                      <div className="flex flex-wrap gap-2">
-                        {task.labels.map((label) => (
-                          <span
-                            key={label}
-                            className="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] text-slate-700"
-                          >
-                            {label}
-                          </span>
-                        ))}
-                      </div>
-                      <div className="text-xs text-muted-foreground">
-                        <p>{assignedUser?.name ?? 'Unassigned'}</p>
-                        <p>{formatDate(task.dueDate)}</p>
-                        <p>{formatHours(task.estimatedHours)}</p>
-                      </div>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
+            {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>
+  );
 }