@locusai/web 0.1.7 → 0.2.2

package/src/views/Board.tsx

@@ -1,306 +0,0 @@
-"use client";
-
-import { SprintStatus, TaskStatus } from "@locusai/shared";
-import { useQuery } from "@tanstack/react-query";
-import { AnimatePresence } from "framer-motion";
-import { MoreHorizontal, Plus } from "lucide-react";
-import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
-import { BoardFilter } from "@/components/BoardFilter";
-import { TaskCard } from "@/components/TaskCard";
-import { TaskCreateModal } from "@/components/TaskCreateModal";
-import { TaskPanel } from "@/components/TaskPanel";
-import { Button } from "@/components/ui/Button";
-import { useTasks } from "@/hooks/useTasks";
-import { cn } from "@/lib/utils";
-import { sprintService } from "@/services";
-
-const COLUMNS = [
-  TaskStatus.BACKLOG,
-  TaskStatus.IN_PROGRESS,
-  TaskStatus.REVIEW,
-  TaskStatus.VERIFICATION,
-  TaskStatus.DONE,
-  TaskStatus.BLOCKED,
-];
-
-const STATUS_CONFIG: Record<
-  string,
-  { label: string; color: string; indicator: string }
-> = {
-  [TaskStatus.BACKLOG]: {
-    label: "Backlog",
-    color: "var(--status-backlog)",
-    indicator: "bg-slate-500",
-  },
-  [TaskStatus.IN_PROGRESS]: {
-    label: "In Progress",
-    color: "var(--status-progress)",
-    indicator: "bg-amber-500",
-  },
-  [TaskStatus.REVIEW]: {
-    label: "Review",
-    color: "var(--status-review)",
-    indicator: "bg-purple-500",
-  },
-  [TaskStatus.VERIFICATION]: {
-    label: "Verification",
-    color: "var(--accent)",
-    indicator: "bg-cyan-500",
-  },
-  [TaskStatus.DONE]: {
-    label: "Done",
-    color: "var(--status-done)",
-    indicator: "bg-emerald-500",
-  },
-  [TaskStatus.BLOCKED]: {
-    label: "Blocked",
-    color: "var(--status-blocked)",
-    indicator: "bg-rose-500",
-  },
-};
-
-export function Board() {
-  const router = useRouter();
-  const {
-    searchQuery,
-    setSearchQuery,
-    priorityFilter,
-    setPriorityFilter,
-    assigneeFilter,
-    setAssigneeFilter,
-    hasActiveFilters,
-    clearFilters,
-    getTasksByStatus,
-    updateTaskStatus,
-    deleteTask,
-    refreshTasks,
-  } = useTasks();
-
-  const { data: sprints = [] } = useQuery({
-    queryKey: ["sprints"],
-    queryFn: sprintService.getAll,
-  });
-
-  const activeSprint = sprints.find((s) => s.status === SprintStatus.ACTIVE);
-
-  const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
-  const [createModalStatus, setCreateModalStatus] = useState<TaskStatus>(
-    TaskStatus.BACKLOG
-  );
-  const [selectedTaskId, setSelectedTaskId] = useState<number | null>(null);
-  const [dragOverColumn, setDragOverColumn] = useState<TaskStatus | null>(null);
-
-  const handleOpenCreateModal = useCallback((status: TaskStatus) => {
-    setCreateModalStatus(status);
-    setIsCreateModalOpen(true);
-  }, []);
-
-  // Keyboard shortcuts
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (
-        e.target instanceof HTMLInputElement ||
-        e.target instanceof HTMLTextAreaElement
-      ) {
-        return;
-      }
-      if (e.key === "n" || e.key === "N") {
-        e.preventDefault();
-        handleOpenCreateModal(TaskStatus.BACKLOG);
-      }
-      if (e.key === "/" && !e.metaKey && !e.ctrlKey) {
-        e.preventDefault();
-        const searchInput = document.querySelector(
-          ".search-input"
-        ) as HTMLInputElement;
-        searchInput?.focus();
-      }
-      if (e.key === "Escape" && selectedTaskId) {
-        setSelectedTaskId(null);
-      }
-    };
-
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [selectedTaskId, handleOpenCreateModal]);
-
-  const handleDrop = async (status: TaskStatus, e: React.DragEvent) => {
-    e.preventDefault();
-    setDragOverColumn(null);
-    const taskId = e.dataTransfer.getData("taskId");
-    if (!taskId) return;
-    await updateTaskStatus(Number(taskId), status);
-  };
-
-  const handleDragOver = (status: TaskStatus, e: React.DragEvent) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "move";
-    setDragOverColumn(status);
-  };
-
-  const handleDragLeave = () => {
-    setDragOverColumn(null);
-  };
-
-  if (!activeSprint) {
-    return (
-      <div className="flex-1 flex flex-col items-center justify-center p-8 text-center space-y-4">
-        <div className="bg-primary/5 p-4 rounded-full">
-          <svg
-            className="w-12 h-12 text-primary/40"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <title>Icon</title>
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
-            />
-          </svg>
-        </div>
-        <div>
-          <h2 className="text-xl font-bold">No Active Sprint</h2>
-          <p className="text-muted-foreground mt-2 max-w-sm mx-auto">
-            You need to start a sprint from the Backlog to see tasks on the
-            board.
-          </p>
-        </div>
-        <Button onClick={() => router.push("/backlog")} variant="secondary">
-          Go to Backlog
-        </Button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex-1 overflow-auto bg-background">
-      <div className="mb-6">
-        <div className="flex justify-between items-center">
-          <div>
-            <div className="flex items-center gap-3">
-              <h1 className="text-2xl font-bold tracking-tight text-foreground">
-                {activeSprint.name}
-              </h1>
-              <span className="px-2 py-0.5 rounded-full bg-primary/10 text-primary text-[10px] font-black uppercase tracking-wider">
-                Active
-              </span>
-            </div>
-            <p className="text-muted-foreground text-sm mt-1 flex items-center gap-3">
-              Track and manage engineering tasks
-              <span className="hidden md:inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md bg-secondary/60 text-[10px] font-semibold text-muted-foreground">
-                <kbd className="bg-background/80 px-1.5 py-0.5 rounded text-[9px] font-bold border">
-                  N
-                </kbd>
-                New task
-              </span>
-            </p>
-          </div>
-          <Button
-            onClick={() => handleOpenCreateModal(TaskStatus.BACKLOG)}
-            className="shadow-lg shadow-primary/20"
-          >
-            <Plus size={16} className="mr-1.5" />
-            New Task
-          </Button>
-        </div>
-      </div>
-      <BoardFilter
-        searchQuery={searchQuery}
-        onSearchChange={setSearchQuery}
-        priorityFilter={priorityFilter}
-        onPriorityChange={setPriorityFilter}
-        assigneeFilter={assigneeFilter}
-        onAssigneeChange={setAssigneeFilter}
-        onClearFilters={clearFilters}
-        hasActiveFilters={hasActiveFilters}
-      />
-      <div className="flex gap-4 min-h-[600px] pb-4">
-        {COLUMNS.map((status) => {
-          // Filter tasks by active sprint ID
-          const columnTasks = getTasksByStatus(status).filter(
-            (t) => t.sprintId === activeSprint.id
-          );
-          const isDragOver = dragOverColumn === status;
-
-          return (
-            <div
-              key={status}
-              className={cn(
-                "flex flex-col w-[280px] shrink-0 rounded-xl transition-all border",
-                isDragOver
-                  ? "bg-primary/5 border-primary/40 ring-1 ring-primary/20"
-                  : "bg-card/50 border-border/50"
-              )}
-              onDrop={(e) => handleDrop(status, e)}
-              onDragOver={(e) => handleDragOver(status, e)}
-              onDragLeave={handleDragLeave}
-            >
-              <div className="flex items-center justify-between p-3 border-b border-border/50">
-                <div className="flex items-center gap-2.5">
-                  <div
-                    className={cn(
-                      "h-2.5 w-2.5 rounded-full",
-                      STATUS_CONFIG[status].indicator
-                    )}
-                  />
-                  <span className="text-xs font-semibold text-foreground">
-                    {STATUS_CONFIG[status].label}
-                  </span>
-                  <span className="flex items-center justify-center h-5 min-w-[20px] px-1.5 bg-secondary/80 text-[10px] font-bold rounded-md text-muted-foreground">
-                    {columnTasks.length}
-                  </span>
-                </div>
-                <button className="p-1.5 rounded-lg hover:bg-secondary text-muted-foreground transition-colors">
-                  <MoreHorizontal size={14} />
-                </button>
-              </div>
-
-              <div className="flex flex-col gap-2.5 p-2.5 flex-1 overflow-y-auto">
-                {columnTasks.map((task) => (
-                  <TaskCard
-                    key={task.id}
-                    task={task}
-                    onClick={() => setSelectedTaskId(task.id)}
-                    onDelete={deleteTask}
-                  />
-                ))}
-
-                <Button
-                  variant="ghost"
-                  className="w-full justify-center text-xs font-medium text-muted-foreground/60 hover:text-foreground hover:bg-secondary/40 h-8 border border-dashed border-border/50 hover:border-border rounded-lg"
-                  onClick={() => handleOpenCreateModal(status)}
-                >
-                  <Plus size={14} className="mr-1.5" />
-                  Add
-                </Button>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-      <TaskCreateModal
-        isOpen={isCreateModalOpen}
-        onClose={() => setIsCreateModalOpen(false)}
-        onCreated={refreshTasks}
-        initialStatus={createModalStatus}
-        sprintId={activeSprint?.id}
-      />
-
-      <AnimatePresence>
-        {selectedTaskId && (
-          <TaskPanel
-            key="task-panel"
-            taskId={selectedTaskId}
-            onClose={() => setSelectedTaskId(null)}
-            onDeleted={refreshTasks}
-            onUpdated={refreshTasks}
-          />
-        )}
-      </AnimatePresence>
-    </div>
-  );
-}