@hed-hog/operations 0.0.285 → 0.0.286

package/hedhog/frontend/app/tasks/page.tsx.ejs

@@ -1,47 +1,999 @@
 'use client';
 
 import { Page } from '@/components/entity-list';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandShortcut,
+} from '@/components/ui/command';
 import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { cn } from '@/lib/utils';
+import { Plus, Rows3, Search, Sparkles, Trash2 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import { useMemo, useState } from 'react';
-import { KanbanBoard } from '../_components/kanban-board';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  KanbanBoard,
+  TASK_UNASSIGNED_LANE,
+  type MoveTasksPayload,
+} from '../_components/kanban-board';
 import { OperationsHeader } from '../_components/operations-header';
-import { SectionCard } from '../_components/section-card';
 import { useOperationsData } from '../_lib/hooks/use-operations-data';
+import type { Task, TaskPriority, TaskStatus } from '../_lib/types/operations';
+
+const BOARD_PREFERENCES_KEY = 'operations:tasks:board-preferences';
+const TASK_STATUSES: TaskStatus[] = [
+  'backlog',
+  'todo',
+  'in-progress',
+  'review',
+  'done',
+];
+
+type ColumnMeta = {
+  laneId: string;
+  status: TaskStatus;
+  rowIndex: number;
+};
+
+function getLaneId(task: Task) {
+  return task.assignedUserId || TASK_UNASSIGNED_LANE;
+}
+
+function isTypingElement(target: EventTarget | null) {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+
+  const tag = target.tagName;
+  return (
+    tag === 'INPUT' ||
+    tag === 'TEXTAREA' ||
+    tag === 'SELECT' ||
+    Boolean(target.closest('[contenteditable=true]'))
+  );
+}
+
+function buildContainerKey(laneId: string, status: TaskStatus) {
+  return `${laneId}::${status}`;
+}
+
+function parseContainerKey(
+  key: string
+): { laneId: string; status: TaskStatus } | null {
+  const [laneId, status] = key.split('::');
+
+  if (!laneId || !status || !TASK_STATUSES.includes(status as TaskStatus)) {
+    return null;
+  }
+
+  return {
+    laneId,
+    status: status as TaskStatus,
+  };
+}
+
+function getPriorityValue(priority: TaskPriority) {
+  return {
+    low: 1,
+    medium: 2,
+    high: 3,
+    critical: 4,
+  }[priority];
+}
 
 export default function TasksPage() {
   const t = useTranslations('operations.TasksPage');
   const { tasks, users } = useOperationsData();
-  const [search, setSearch] = useState('');
+  const searchInputRef = useRef<HTMLInputElement>(null);
 
-  const filteredTasks = useMemo(
+  const [boardTasks, setBoardTasks] = useState<Task[]>(() => tasks);
+  const [searchDraft, setSearchDraft] = useState('');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [assigneeFilter, setAssigneeFilter] = useState('all');
+  const [projectFilter, setProjectFilter] = useState('all');
+  const [selectedTaskIds, setSelectedTaskIds] = useState<string[]>([]);
+  const [focusedTaskId, setFocusedTaskId] = useState<string | null>(null);
+  const [keyboardDragMode, setKeyboardDragMode] = useState(false);
+  const [commandOpen, setCommandOpen] = useState(false);
+  const [detailTaskId, setDetailTaskId] = useState<string | null>(null);
+  const [collapsedLaneIds, setCollapsedLaneIds] = useState<string[]>([]);
+
+  useEffect(() => {
+    setBoardTasks(tasks);
+  }, [tasks]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    const raw = window.localStorage.getItem(BOARD_PREFERENCES_KEY);
+    if (!raw) {
+      return;
+    }
+
+    try {
+      const parsed = JSON.parse(raw) as {
+        assigneeFilter?: string;
+        projectFilter?: string;
+        collapsedLaneIds?: string[];
+      };
+
+      if (parsed.assigneeFilter) {
+        setAssigneeFilter(parsed.assigneeFilter);
+      }
+
+      if (parsed.projectFilter) {
+        setProjectFilter(parsed.projectFilter);
+      }
+
+      if (Array.isArray(parsed.collapsedLaneIds)) {
+        setCollapsedLaneIds(parsed.collapsedLaneIds);
+      }
+    } catch {
+      window.localStorage.removeItem(BOARD_PREFERENCES_KEY);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+
+    window.localStorage.setItem(
+      BOARD_PREFERENCES_KEY,
+      JSON.stringify({
+        assigneeFilter,
+        projectFilter,
+        collapsedLaneIds,
+      })
+    );
+  }, [assigneeFilter, collapsedLaneIds, projectFilter]);
+
+  const activeTasks = useMemo(
+    () => boardTasks.filter((task) => !task.archived),
+    [boardTasks]
+  );
+
+  const projectOptions = useMemo(
     () =>
-      tasks.filter((task) =>
-        `${task.title} ${task.projectName} ${task.labels.join(' ')}`
-          .toLowerCase()
-          .includes(search.toLowerCase())
+      Array.from(new Set(activeTasks.map((task) => task.projectName))).sort(
+        (a, b) => a.localeCompare(b)
       ),
-    [tasks, search]
+    [activeTasks]
+  );
+
+  const totalSelected = selectedTaskIds.length;
+
+  const filteredTasks = useMemo(() => {
+    const normalizedSearch = searchQuery.trim().toLowerCase();
+
+    return activeTasks
+      .filter((task) => {
+        if (assigneeFilter !== 'all') {
+          if (assigneeFilter === TASK_UNASSIGNED_LANE && task.assignedUserId) {
+            return false;
+          }
+
+          if (
+            assigneeFilter !== TASK_UNASSIGNED_LANE &&
+            task.assignedUserId !== assigneeFilter
+          ) {
+            return false;
+          }
+        }
+
+        if (projectFilter !== 'all' && task.projectName !== projectFilter) {
+          return false;
+        }
+
+        if (!normalizedSearch) {
+          return true;
+        }
+
+        return `${task.title} ${task.projectName} ${task.labels.join(' ')} ${task.description}`
+          .toLowerCase()
+          .includes(normalizedSearch);
+      })
+      .sort((a, b) => a.order - b.order);
+  }, [activeTasks, assigneeFilter, projectFilter, searchQuery]);
+
+  const boardNavigationModel = useMemo(() => {
+    const laneOrder = [
+      ...users.map((user) => user.id),
+      ...(filteredTasks.some((task) => !task.assignedUserId)
+        ? [TASK_UNASSIGNED_LANE]
+        : []),
+    ];
+
+    const byColumn = new Map<string, string[]>();
+    const byTask = new Map<string, ColumnMeta>();
+    const linearTaskOrder: string[] = [];
+
+    laneOrder.forEach((laneId) => {
+      TASK_STATUSES.forEach((status) => {
+        const ids = filteredTasks
+          .filter(
+            (task) => getLaneId(task) === laneId && task.status === status
+          )
+          .sort((a, b) => a.order - b.order)
+          .map((task) => task.id);
+
+        byColumn.set(buildContainerKey(laneId, status), ids);
+
+        ids.forEach((taskId, rowIndex) => {
+          byTask.set(taskId, {
+            laneId,
+            status,
+            rowIndex,
+          });
+          linearTaskOrder.push(taskId);
+        });
+      });
+    });
+
+    return {
+      laneOrder,
+      byColumn,
+      byTask,
+      linearTaskOrder,
+    };
+  }, [filteredTasks, users]);
+
+  const taskById = useMemo(
+    () => new Map(boardTasks.map((task) => [task.id, task])),
+    [boardTasks]
+  );
+
+  const metrics = useMemo(() => {
+    const inProgress = activeTasks.filter(
+      (task) => task.status === 'in-progress'
+    ).length;
+
+    const review = activeTasks.filter(
+      (task) => task.status === 'review'
+    ).length;
+    const done = activeTasks.filter((task) => task.status === 'done').length;
+    const critical = activeTasks.filter(
+      (task) => getPriorityValue(task.priority) >= getPriorityValue('high')
+    ).length;
+
+    return [
+      {
+        title: t('stats.totalTasks'),
+        value: activeTasks.length,
+      },
+      {
+        title: t('stats.inProgress'),
+        value: inProgress,
+      },
+      {
+        title: t('stats.review'),
+        value: review,
+      },
+      {
+        title: t('stats.done'),
+        value: done,
+      },
+      {
+        title: t('stats.critical'),
+        value: critical,
+      },
+    ];
+  }, [activeTasks, t]);
+
+  const createTask = useCallback(() => {
+    const generatedId = `tsk-${Date.now()}`;
+    const now = new Date();
+    const suggestedUserId =
+      assigneeFilter !== 'all' && assigneeFilter !== TASK_UNASSIGNED_LANE
+        ? assigneeFilter
+        : '';
+
+    setBoardTasks((previous) => {
+      const nextOrder =
+        previous
+          .filter(
+            (task) =>
+              !task.archived &&
+              getLaneId(task) === (suggestedUserId || TASK_UNASSIGNED_LANE) &&
+              task.status === 'backlog'
+          )
+          .reduce((maxOrder, task) => Math.max(maxOrder, task.order), 0) + 1;
+
+      return [
+        {
+          id: generatedId,
+          title: t('newTaskTitle'),
+          projectId: 'prj-orion-web',
+          projectName:
+            projectFilter === 'all' ? 'Orion Commerce Revamp' : projectFilter,
+          status: 'backlog',
+          priority: 'medium',
+          labels: ['Planning'],
+          assignedUserId: suggestedUserId,
+          dueDate: new Date(now.setDate(now.getDate() + 7))
+            .toISOString()
+            .slice(0, 10),
+          estimatedHours: 6,
+          order: nextOrder,
+          description: t('newTaskDescription'),
+          archived: false,
+        },
+        ...previous,
+      ];
+    });
+
+    setFocusedTaskId(generatedId);
+    setSelectedTaskIds([generatedId]);
+  }, [assigneeFilter, projectFilter, t]);
+
+  const archiveCurrentSelection = useCallback(() => {
+    const idsToArchive = selectedTaskIds.length
+      ? selectedTaskIds
+      : focusedTaskId
+        ? [focusedTaskId]
+        : [];
+
+    if (!idsToArchive.length) {
+      return;
+    }
+
+    const archiveSet = new Set(idsToArchive);
+
+    setBoardTasks((previous) =>
+      previous.map((task) =>
+        archiveSet.has(task.id) ? { ...task, archived: true } : task
+      )
+    );
+    setSelectedTaskIds([]);
+    setFocusedTaskId(null);
+    setDetailTaskId(null);
+  }, [focusedTaskId, selectedTaskIds]);
+
+  const moveFocus = useCallback(
+    (direction: 'up' | 'down' | 'left' | 'right') => {
+      if (!boardNavigationModel.linearTaskOrder.length) {
+        return;
+      }
+
+      if (!focusedTaskId || !boardNavigationModel.byTask.has(focusedTaskId)) {
+        const firstTaskId = boardNavigationModel.linearTaskOrder[0];
+
+        if (!firstTaskId) {
+          return;
+        }
+
+        setFocusedTaskId(firstTaskId);
+        setSelectedTaskIds([firstTaskId]);
+        return;
+      }
+
+      const currentMeta = boardNavigationModel.byTask.get(focusedTaskId);
+
+      if (!currentMeta) {
+        return;
+      }
+
+      if (direction === 'up' || direction === 'down') {
+        const columnIds =
+          boardNavigationModel.byColumn.get(
+            buildContainerKey(currentMeta.laneId, currentMeta.status)
+          ) || [];
+        const delta = direction === 'up' ? -1 : 1;
+        const nextId = columnIds[currentMeta.rowIndex + delta];
+
+        if (nextId) {
+          setFocusedTaskId(nextId);
+          setSelectedTaskIds([nextId]);
+        }
+
+        return;
+      }
+
+      const statusIndex = TASK_STATUSES.findIndex(
+        (status) => status === currentMeta.status
+      );
+      const nextStatusIndex =
+        direction === 'left' ? statusIndex - 1 : statusIndex + 1;
+
+      if (nextStatusIndex < 0 || nextStatusIndex >= TASK_STATUSES.length) {
+        return;
+      }
+
+      const targetStatus = TASK_STATUSES[nextStatusIndex];
+
+      if (!targetStatus) {
+        return;
+      }
+
+      const targetColumn =
+        boardNavigationModel.byColumn.get(
+          buildContainerKey(currentMeta.laneId, targetStatus)
+        ) || [];
+
+      const nextId =
+        targetColumn[Math.min(currentMeta.rowIndex, targetColumn.length - 1)] ||
+        targetColumn[0];
+
+      if (nextId) {
+        setFocusedTaskId(nextId);
+        setSelectedTaskIds([nextId]);
+      }
+    },
+    [boardNavigationModel, focusedTaskId]
+  );
+
+  const toggleLane = useCallback((laneId: string) => {
+    setCollapsedLaneIds((previous) =>
+      previous.includes(laneId)
+        ? previous.filter((item) => item !== laneId)
+        : [...previous, laneId]
+    );
+  }, []);
+
+  const handleSelectionChange = useCallback(
+    (taskId: string, multi: boolean) => {
+      setFocusedTaskId(taskId);
+
+      setSelectedTaskIds((previous) => {
+        if (!multi) {
+          return [taskId];
+        }
+
+        if (previous.includes(taskId)) {
+          return previous.filter((id) => id !== taskId);
+        }
+
+        return [...previous, taskId];
+      });
+    },
+    []
+  );
+
+  const handleMoveTasks = useCallback(
+    ({ draggedTaskId, toLaneId, toStatus, beforeTaskId }: MoveTasksPayload) => {
+      setBoardTasks((previous) => {
+        const taskMap = new Map(previous.map((task) => [task.id, task]));
+        const grouped = new Map<string, string[]>();
+
+        previous
+          .filter((task) => !task.archived)
+          .sort((a, b) => a.order - b.order)
+          .forEach((task) => {
+            const key = buildContainerKey(getLaneId(task), task.status);
+            const list = grouped.get(key) || [];
+            list.push(task.id);
+            grouped.set(key, list);
+          });
+
+        const selectedSet = new Set(
+          selectedTaskIds.includes(draggedTaskId)
+            ? selectedTaskIds
+            : [draggedTaskId]
+        );
+
+        const movingTaskIds = Array.from(selectedSet)
+          .filter((taskId) => {
+            const task = taskMap.get(taskId);
+            return Boolean(task && !task.archived);
+          })
+          .sort(
+            (left, right) =>
+              (taskMap.get(left)?.order || 0) - (taskMap.get(right)?.order || 0)
+          );
+
+        if (!movingTaskIds.length) {
+          return previous;
+        }
+
+        grouped.forEach((ids, key) => {
+          grouped.set(
+            key,
+            ids.filter((id) => !selectedSet.has(id))
+          );
+        });
+
+        let targetContainerKey = buildContainerKey(toLaneId, toStatus);
+
+        if (beforeTaskId && !selectedSet.has(beforeTaskId)) {
+          const beforeTask = taskMap.get(beforeTaskId);
+
+          if (beforeTask) {
+            targetContainerKey = buildContainerKey(
+              getLaneId(beforeTask),
+              beforeTask.status
+            );
+          }
+        }
+
+        const targetContainer = grouped.get(targetContainerKey) || [];
+        const insertionIndex =
+          beforeTaskId && targetContainer.includes(beforeTaskId)
+            ? targetContainer.indexOf(beforeTaskId)
+            : targetContainer.length;
+
+        targetContainer.splice(insertionIndex, 0, ...movingTaskIds);
+        grouped.set(targetContainerKey, targetContainer);
+
+        const updates = new Map<
+          string,
+          {
+            laneId: string;
+            status: TaskStatus;
+            order: number;
+          }
+        >();
+
+        grouped.forEach((ids, key) => {
+          const parsed = parseContainerKey(key);
+
+          if (!parsed) {
+            return;
+          }
+
+          ids.forEach((taskId, index) => {
+            updates.set(taskId, {
+              laneId: parsed.laneId,
+              status: parsed.status,
+              order: index + 1,
+            });
+          });
+        });
+
+        return previous.map((task) => {
+          const update = updates.get(task.id);
+
+          if (!update) {
+            return task;
+          }
+
+          return {
+            ...task,
+            assignedUserId:
+              update.laneId === TASK_UNASSIGNED_LANE ? '' : update.laneId,
+            status: update.status,
+            order: update.order,
+          };
+        });
+      });
+    },
+    [selectedTaskIds]
   );
 
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      const key = event.key.toLowerCase();
+      const typing = isTypingElement(event.target);
+
+      if ((event.ctrlKey || event.metaKey) && key === 'f') {
+        event.preventDefault();
+        searchInputRef.current?.focus();
+        return;
+      }
+
+      if ((event.ctrlKey || event.metaKey) && event.shiftKey && key === 'n') {
+        event.preventDefault();
+        createTask();
+        return;
+      }
+
+      if ((event.ctrlKey || event.metaKey) && key === 'k') {
+        event.preventDefault();
+        setCommandOpen((open) => !open);
+        return;
+      }
+
+      if (typing || commandOpen) {
+        return;
+      }
+
+      if (event.key === 'Delete') {
+        event.preventDefault();
+        archiveCurrentSelection();
+        return;
+      }
+
+      if (event.key === 'Enter') {
+        if (focusedTaskId) {
+          event.preventDefault();
+          setDetailTaskId(focusedTaskId);
+        }
+        return;
+      }
+
+      if (event.key === ' ') {
+        event.preventDefault();
+        setKeyboardDragMode((enabled) => !enabled);
+        return;
+      }
+
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        moveFocus('up');
+        return;
+      }
+
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        moveFocus('down');
+        return;
+      }
+
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        moveFocus('left');
+        return;
+      }
+
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        moveFocus('right');
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', onKeyDown);
+    };
+  }, [
+    archiveCurrentSelection,
+    commandOpen,
+    createTask,
+    focusedTaskId,
+    moveFocus,
+  ]);
+
+  const detailTask = detailTaskId ? taskById.get(detailTaskId) || null : null;
+
+  const clearFilters = () => {
+    setSearchDraft('');
+    setSearchQuery('');
+    setAssigneeFilter('all');
+    setProjectFilter('all');
+  };
+
+  const openFocusedTask = () => {
+    if (focusedTaskId) {
+      setDetailTaskId(focusedTaskId);
+    }
+  };
+
+  const shortcuts = [
+    { key: 'Ctrl + Shift + N', label: t('shortcuts.create') },
+    { key: 'Ctrl + F', label: t('shortcuts.focusSearch') },
+    { key: 'Space', label: t('shortcuts.toggleKeyboardDrag') },
+    { key: 'Enter', label: t('shortcuts.openTask') },
+    { key: 'Delete', label: t('shortcuts.archive') },
+    { key: 'Arrows', label: t('shortcuts.navigate') },
+  ];
+
   return (
     <Page>
       <OperationsHeader
         title={t('title')}
         description={t('description')}
         current={t('breadcrumb')}
+        actions={
+          <div className="flex flex-wrap items-center gap-2">
+            <Button variant="outline" onClick={() => setCommandOpen(true)}>
+              <Sparkles className="mr-2 size-4" />
+              {t('openCommands')}
+            </Button>
+            <Button onClick={createTask}>
+              <Plus className="mr-2 size-4" />
+              {t('newTask')}
+            </Button>
+          </div>
+        }
       />
 
-      <SectionCard title={t('boardTitle')} description={t('boardDescription')}>
-        <div className="mb-4">
+      <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-5">
+        {metrics.map((metric) => (
+          <Card key={metric.title} className="shadow-none">
+            <CardHeader className="pb-2">
+              <CardTitle className="text-xs font-medium tracking-wide text-muted-foreground uppercase">
+                {metric.title}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-semibold">{metric.value}</div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      <div className="rounded-2xl border bg-background p-3 shadow-xs">
+        <div className="grid gap-2 md:grid-cols-[minmax(0,2fr)_minmax(180px,1fr)_minmax(200px,1fr)_auto_auto]">
           <Input
-            value={search}
-            onChange={(event) => setSearch(event.target.value)}
+            ref={searchInputRef}
+            value={searchDraft}
+            onChange={(event) => setSearchDraft(event.target.value)}
             placeholder={t('searchPlaceholder')}
           />
+          <Select value={assigneeFilter} onValueChange={setAssigneeFilter}>
+            <SelectTrigger>
+              <SelectValue placeholder={t('filters.assignee')} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t('filters.allAssignees')}</SelectItem>
+              <SelectItem value={TASK_UNASSIGNED_LANE}>
+                {t('filters.unassigned')}
+              </SelectItem>
+              {users.map((user) => (
+                <SelectItem key={user.id} value={user.id}>
+                  {user.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Select value={projectFilter} onValueChange={setProjectFilter}>
+            <SelectTrigger>
+              <SelectValue placeholder={t('filters.project')} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t('filters.allProjects')}</SelectItem>
+              {projectOptions.map((projectName) => (
+                <SelectItem key={projectName} value={projectName}>
+                  {projectName}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Button onClick={() => setSearchQuery(searchDraft)}>
+            <Search className="mr-2 size-4" />
+            {t('applyFilters')}
+          </Button>
+
+          <Button variant="outline" onClick={clearFilters}>
+            {t('clearFilters')}
+          </Button>
+        </div>
+
+        <div className="mt-3 flex flex-wrap items-center gap-2">
+          <Badge
+            className={cn(
+              'border-transparent',
+              keyboardDragMode
+                ? 'bg-blue-100 text-blue-700'
+                : 'bg-slate-200 text-slate-700'
+            )}
+          >
+            {keyboardDragMode
+              ? t('keyboardMode.enabled')
+              : t('keyboardMode.disabled')}
+          </Badge>
+
+          <Badge variant="secondary" className="bg-slate-100 text-slate-700">
+            {t('selectedCount', { count: totalSelected })}
+          </Badge>
+
+          {totalSelected ? (
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={archiveCurrentSelection}
+            >
+              <Trash2 className="mr-2 size-4" />
+              {t('archiveSelection')}
+            </Button>
+          ) : null}
+
+          <Button size="sm" variant="outline" onClick={openFocusedTask}>
+            <Rows3 className="mr-2 size-4" />
+            {t('openFocused')}
+          </Button>
+        </div>
+
+        <div className="mt-3 flex flex-wrap gap-1.5">
+          {shortcuts.map((shortcut) => (
+            <Badge
+              key={shortcut.key}
+              variant="outline"
+              className="border-slate-300 text-[11px]"
+            >
+              {shortcut.key} - {shortcut.label}
+            </Badge>
+          ))}
         </div>
-        <KanbanBoard tasks={filteredTasks} users={users} />
-      </SectionCard>
+      </div>
+
+      {filteredTasks.length ? (
+        <KanbanBoard
+          tasks={filteredTasks}
+          users={users}
+          selectedTaskIds={selectedTaskIds}
+          focusedTaskId={focusedTaskId}
+          keyboardDragMode={keyboardDragMode}
+          collapsedLaneIds={collapsedLaneIds}
+          onToggleLane={toggleLane}
+          onTaskFocus={setFocusedTaskId}
+          onTaskOpen={setDetailTaskId}
+          onSelectionChange={handleSelectionChange}
+          onMoveTasks={handleMoveTasks}
+        />
+      ) : (
+        <div className="rounded-2xl border border-dashed border-slate-300 bg-background p-8 text-center">
+          <p className="text-base font-semibold">{t('empty.title')}</p>
+          <p className="mx-auto mt-1 max-w-xl text-sm text-muted-foreground">
+            {t('empty.description')}
+          </p>
+          <div className="mt-4 flex justify-center gap-2">
+            <Button onClick={clearFilters} variant="outline">
+              {t('clearFilters')}
+            </Button>
+            <Button onClick={createTask}>{t('newTask')}</Button>
+          </div>
+        </div>
+      )}
+
+      <CommandDialog
+        open={commandOpen}
+        onOpenChange={setCommandOpen}
+        title={t('commands.title')}
+        description={t('commands.description')}
+      >
+        <CommandInput placeholder={t('commands.placeholder')} />
+        <CommandList>
+          <CommandEmpty>{t('commands.empty')}</CommandEmpty>
+          <CommandGroup heading={t('commands.actions')}>
+            <CommandItem
+              onSelect={() => {
+                createTask();
+                setCommandOpen(false);
+              }}
+            >
+              {t('commands.newTask')}
+              <CommandShortcut>Ctrl+Shift+N</CommandShortcut>
+            </CommandItem>
+            <CommandItem
+              onSelect={() => {
+                setKeyboardDragMode((enabled) => !enabled);
+                setCommandOpen(false);
+              }}
+            >
+              {keyboardDragMode
+                ? t('commands.disableKeyboardDrag')
+                : t('commands.enableKeyboardDrag')}
+              <CommandShortcut>Space</CommandShortcut>
+            </CommandItem>
+            <CommandItem
+              onSelect={() => {
+                archiveCurrentSelection();
+                setCommandOpen(false);
+              }}
+            >
+              {t('commands.archiveSelected')}
+              <CommandShortcut>Del</CommandShortcut>
+            </CommandItem>
+            <CommandItem
+              onSelect={() => {
+                openFocusedTask();
+                setCommandOpen(false);
+              }}
+            >
+              {t('commands.openFocused')}
+              <CommandShortcut>Enter</CommandShortcut>
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </CommandDialog>
+
+      <Sheet
+        open={Boolean(detailTask)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setDetailTaskId(null);
+          }
+        }}
+      >
+        <SheetContent className="w-full sm:max-w-xl">
+          {detailTask ? (
+            <>
+              <SheetHeader>
+                <SheetTitle>{detailTask.title}</SheetTitle>
+                <SheetDescription>{detailTask.projectName}</SheetDescription>
+              </SheetHeader>
+
+              <div className="grid gap-4 px-4 pb-4">
+                <div className="rounded-lg border p-3">
+                  <p className="text-xs font-medium text-muted-foreground uppercase">
+                    {t('detail.descriptionLabel')}
+                  </p>
+                  <p className="mt-2 text-sm">{detailTask.description}</p>
+                </div>
+
+                <div className="grid gap-3 sm:grid-cols-2">
+                  <div className="rounded-lg border p-3">
+                    <p className="text-xs font-medium text-muted-foreground uppercase">
+                      {t('detail.priority')}
+                    </p>
+                    <p className="mt-1 text-sm font-semibold capitalize">
+                      {detailTask.priority}
+                    </p>
+                  </div>
+                  <div className="rounded-lg border p-3">
+                    <p className="text-xs font-medium text-muted-foreground uppercase">
+                      {t('detail.estimate')}
+                    </p>
+                    <p className="mt-1 text-sm font-semibold">
+                      {detailTask.estimatedHours}h
+                    </p>
+                  </div>
+                </div>
+
+                <div className="rounded-lg border p-3">
+                  <p className="text-xs font-medium text-muted-foreground uppercase">
+                    {t('detail.labels')}
+                  </p>
+                  <div className="mt-2 flex flex-wrap gap-1.5">
+                    {detailTask.labels.map((label) => (
+                      <Badge
+                        key={label}
+                        variant="secondary"
+                        className="bg-slate-100"
+                      >
+                        {label}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="rounded-lg border p-3">
+                  <p className="text-xs font-medium text-muted-foreground uppercase">
+                    {t('detail.quickActions')}
+                  </p>
+                  <div className="mt-2 grid grid-cols-2 gap-2 sm:grid-cols-5">
+                    {TASK_STATUSES.map((status) => (
+                      <Button
+                        key={status}
+                        size="sm"
+                        variant={
+                          detailTask.status === status ? 'default' : 'outline'
+                        }
+                        onClick={() => {
+                          handleMoveTasks({
+                            draggedTaskId: detailTask.id,
+                            toLaneId: getLaneId(detailTask),
+                            toStatus: status,
+                          });
+                          setDetailTaskId(detailTask.id);
+                        }}
+                      >
+                        {status}
+                      </Button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </>
+          ) : null}
+        </SheetContent>
+      </Sheet>
     </Page>
   );
 }