@hed-hog/operations 0.0.294 → 0.0.296

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

@@ -1,999 +0,0 @@
-'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 { 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 { 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 searchInputRef = useRef<HTMLInputElement>(null);
-
-  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(
-    () =>
-      Array.from(new Set(activeTasks.map((task) => task.projectName))).sort(
-        (a, b) => a.localeCompare(b)
-      ),
-    [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>
-        }
-      />
-
-      <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
-            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>
-      </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>
-  );
-}