= {
- none: 'bg-gray-500/20 text-gray-400',
- low: 'bg-green-500/20 text-green-400',
- medium: 'bg-yellow-500/20 text-yellow-400',
- high: 'bg-red-500/20 text-red-400',
-};
-
-interface KanbanBoardProps {
- tasks: ProjectTask[];
- selectedTaskId: number | null;
- kanbanParentTask?: ProjectTask | null;
- onSelectTask: (taskId: number) => void;
- onStatusChange: (taskId: number, status: string) => void;
- onBackToAllTasks?: () => void;
-}
-
-function KanbanColumn({
- column,
- tasks,
- selectedTaskId,
- onSelectTask,
-}: {
- column: (typeof COLUMNS)[0];
- tasks: ProjectTask[];
- selectedTaskId: number | null;
- onSelectTask: (taskId: number) => void;
-}) {
- const { setNodeRef, isOver } = useDroppable({ id: column.id });
-
- return (
-
- {/* Column header */}
-
-
-
- {column.label}
-
-
- {tasks.length}
-
-
-
-
- {/* Cards */}
-
- {tasks.map((task) => (
- onSelectTask(task.id)}
- />
- ))}
-
-
- );
-}
-
-function KanbanCard({
- task,
- isSelected,
- onSelect,
-}: {
- task: ProjectTask;
- isSelected: boolean;
- onSelect: () => void;
-}) {
- const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
- id: task.id,
- data: { task },
- });
-
- const style = transform
- ? {
- transform: `translate(${transform.x}px, ${transform.y}px)`,
- opacity: isDragging ? 0.5 : 1,
- }
- : undefined;
-
- const completedSubtasks = task.subtasks?.filter((s) => s.status === 'completed').length ?? 0;
- const totalSubtasks = task.subtasks?.length ?? 0;
-
- return (
-
-
{task.title}
-
-
- {task.priority}
-
- {task.due_date && (
-
- {format(parseISO(task.due_date), 'MMM d')}
-
- )}
- {totalSubtasks > 0 && (
-
- {completedSubtasks}/{totalSubtasks}
-
- )}
-
-
- );
-}
-
-export default function KanbanBoard({
- tasks,
- selectedTaskId,
- kanbanParentTask,
- onSelectTask,
- onStatusChange,
- onBackToAllTasks,
-}: KanbanBoardProps) {
- const sensors = useSensors(
- useSensor(PointerSensor, { activationConstraint: { distance: 5 } })
- );
-
- // Subtask view is driven by kanbanParentTask (decoupled from selected task)
- const isSubtaskView = kanbanParentTask != null && (kanbanParentTask.subtasks?.length ?? 0) > 0;
- const activeTasks: ProjectTask[] = isSubtaskView ? (kanbanParentTask.subtasks ?? []) : tasks;
-
- const handleDragEnd = (event: DragEndEvent) => {
- const { active, over } = event;
- if (!over) return;
-
- const taskId = active.id as number;
- const newStatus = over.id as string;
-
- const task = activeTasks.find((t) => t.id === taskId);
- if (task && task.status !== newStatus && COLUMNS.some((c) => c.id === newStatus)) {
- onStatusChange(taskId, newStatus);
- }
- };
-
- const tasksByStatus = COLUMNS.map((col) => ({
- column: col,
- tasks: activeTasks.filter((t) => t.status === col.id),
- }));
-
- return (
-
- {/* Subtask view header */}
- {isSubtaskView && kanbanParentTask && (
-
-
- /
-
- Subtasks of: {kanbanParentTask.title}
-
-
- )}
-
-
-
- {tasksByStatus.map(({ column, tasks: colTasks }) => (
-
- ))}
-
-
-
- );
-}
+ TouchSensor,
+ useSensor,
+ useSensors,
+ type DragEndEvent,
+ useDroppable,
+ useDraggable,
+} from '@dnd-kit/core';
+import { format, parseISO } from 'date-fns';
+import type { ProjectTask } from '@/types';
+import { Badge } from '@/components/ui/badge';
+
+const COLUMNS: { id: string; label: string; color: string }[] = [
+ { id: 'pending', label: 'Pending', color: 'text-gray-400' },
+ { id: 'in_progress', label: 'In Progress', color: 'text-blue-400' },
+ { id: 'blocked', label: 'Blocked', color: 'text-red-400' },
+ { id: 'on_hold', label: 'On Hold', color: 'text-orange-400' },
+ { id: 'review', label: 'Review', color: 'text-yellow-400' },
+ { id: 'completed', label: 'Completed', color: 'text-green-400' },
+];
+
+const priorityColors: Record
= {
+ none: 'bg-gray-500/20 text-gray-400',
+ low: 'bg-green-500/20 text-green-400',
+ medium: 'bg-yellow-500/20 text-yellow-400',
+ high: 'bg-red-500/20 text-red-400',
+};
+
+interface KanbanBoardProps {
+ tasks: ProjectTask[];
+ selectedTaskId: number | null;
+ kanbanParentTask?: ProjectTask | null;
+ onSelectTask: (taskId: number) => void;
+ onStatusChange: (taskId: number, status: string) => void;
+ onBackToAllTasks?: () => void;
+}
+
+function KanbanColumn({
+ column,
+ tasks,
+ selectedTaskId,
+ onSelectTask,
+}: {
+ column: (typeof COLUMNS)[0];
+ tasks: ProjectTask[];
+ selectedTaskId: number | null;
+ onSelectTask: (taskId: number) => void;
+}) {
+ const { setNodeRef, isOver } = useDroppable({ id: column.id });
+
+ return (
+
+ {/* Column header */}
+
+
+
+ {column.label}
+
+
+ {tasks.length}
+
+
+
+
+ {/* Cards */}
+
+ {tasks.map((task) => (
+ onSelectTask(task.id)}
+ />
+ ))}
+
+
+
{task.title}
+
+
+ {task.priority}
+
+ {task.due_date && (
+
+ {format(parseISO(task.due_date), 'MMM d')}
+
+ )}
+ {totalSubtasks > 0 && (
+
+ {completedSubtasks}/{totalSubtasks}
+
+ )}
+
+
+ {/* Subtask view header */}
+ {isSubtaskView && kanbanParentTask && (
+
+
+ /
+
+ Subtasks of: {kanbanParentTask.title}
+
+
+ )}
+
+
+
+ {tasksByStatus.map(({ column, tasks: colTasks }) => (
+
+ ))}
+
+
+
-
+
-
Loading...
+
Loading...
-
@@ -375,14 +378,14 @@ export default function ProjectDetail() {
return (
{/* Header */}
-
+
-
+
{project.name}
-
+
{statusLabels[project.status]}
-
{/* Content area */}
{/* Summary section - scrolls with left panel on small, fixed on large */}
-
+
{/* Description */}
{project.description && (
{project.description}
@@ -426,7 +427,7 @@ export default function ProjectDetail() {
{/* Project Summary Card */}
-
+
Overall Progress
@@ -444,7 +445,7 @@ export default function ProjectDetail() {
{completedTasks} of {totalTasks} tasks completed
-
+
@@ -490,7 +491,7 @@ export default function ProjectDetail() {
{/* Task list header + view controls */}
-
+
Tasks
{/* View toggle */}
@@ -544,7 +545,7 @@ export default function ProjectDetail() {
{/* Left panel: task list or kanban */}
-
+
{topLevelTasks.length === 0 ? (
{/* Expanded subtasks */}
{isExpanded && hasSubtasks && (
-
+
{task.subtasks.map((subtask) => (
- {/* Right panel: task detail (hidden on small screens) */}
-
-
-
openTaskForm(null, parentId)}
- onClose={() => setSelectedTaskId(null)}
- onSelectTask={setSelectedTaskId}
- />
+ {/* Right panel: task detail (desktop only) */}
+ {selectedTaskId && isDesktop && (
+
+
+ openTaskForm(null, parentId)}
+ onClose={() => setSelectedTaskId(null)}
+ onSelectTask={setSelectedTaskId}
+ />
+
+ )}
{/* Mobile: show detail panel as overlay when task selected on small screens */}
- {selectedTaskId && selectedTask && (
-
+ {selectedTaskId && selectedTask && !isDesktop && (
+
Task Details
diff --git a/frontend/src/components/projects/ProjectsPage.tsx b/frontend/src/components/projects/ProjectsPage.tsx
index d14054c..8980863 100644
--- a/frontend/src/components/projects/ProjectsPage.tsx
+++ b/frontend/src/components/projects/ProjectsPage.tsx
@@ -5,6 +5,7 @@ import { useQuery } from '@tanstack/react-query';
import api from '@/lib/api';
import type { Project } from '@/types';
import { Button } from '@/components/ui/button';
+import { Select } from '@/components/ui/select';
import { Input } from '@/components/ui/input';
import { Card, CardContent } from '@/components/ui/card';
import { GridSkeleton } from '@/components/ui/skeleton';
@@ -70,10 +71,19 @@ export default function ProjectsPage() {
return (
{/* Header */}
-
-
Projects
+
+
Projects
-
+
+
{statusFilters.map((sf) => (
-
+
{/* Summary stats */}
{!isLoading && projects.length > 0 && (
-
+
-
-
+
+
-
Total
-
{projects.length}
+
Total
+
{projects.length}
+
+
-
In Progress
-
{inProgressCount}
+
In Progress
+
{inProgressCount}
+
+
-
Completed
-
{completedCount}
+
Completed
+
{completedCount}
diff --git a/frontend/src/components/projects/TaskDetailPanel.tsx b/frontend/src/components/projects/TaskDetailPanel.tsx
index 2f7c144..3f15928 100644
--- a/frontend/src/components/projects/TaskDetailPanel.tsx
+++ b/frontend/src/components/projects/TaskDetailPanel.tsx
@@ -484,7 +484,7 @@ export default function TaskDetailPanel({