enhanced ui

frontend/src/components/tasks/KanbanBoard.tsx

@@ -0,0 +1,393 @@
+import React, { useState } from "react";
+import { PlusIcon, HorizontaLDots } from "../../icons";
+
+export interface Task {
+  id: string;
+  title: string;
+  status: "todo" | "in_progress" | "completed";
+  dueDate?: string;
+  commentsCount?: number;
+  attachmentsCount?: number;
+  tags?: { label: string; color?: "brand" | "success" | "warning" | "orange" | "gray" }[];
+  assignee?: {
+    avatar?: string;
+    name?: string;
+  };
+  description?: string;
+  image?: string;
+}
+
+interface KanbanBoardProps {
+  tasks: Task[];
+  onTaskClick?: (task: Task) => void;
+  onTaskMove?: (taskId: string, newStatus: "todo" | "in_progress" | "completed") => void;
+  onAddTask?: () => void;
+  onFilterChange?: (filter: "All" | "Todo" | "InProgress" | "Completed") => void;
+}
+
+const KanbanBoard: React.FC<KanbanBoardProps> = ({
+  tasks,
+  onTaskClick,
+  onTaskMove,
+  onAddTask,
+  onFilterChange,
+}) => {
+  const [selectedFilter, setSelectedFilter] = useState<"All" | "Todo" | "InProgress" | "Completed">("All");
+  const [openDropdowns, setOpenDropdowns] = useState<Record<string, boolean>>({});
+
+  const filteredTasks = selectedFilter === "All" 
+    ? tasks 
+    : tasks.filter(task => {
+        if (selectedFilter === "Todo") return task.status === "todo";
+        if (selectedFilter === "InProgress") return task.status === "in_progress";
+        if (selectedFilter === "Completed") return task.status === "completed";
+        return true;
+      });
+
+  const todoTasks = filteredTasks.filter(t => t.status === "todo");
+  const inProgressTasks = filteredTasks.filter(t => t.status === "in_progress");
+  const completedTasks = filteredTasks.filter(t => t.status === "completed");
+
+  const handleFilterChange = (filter: "All" | "Todo" | "InProgress" | "Completed") => {
+    setSelectedFilter(filter);
+    onFilterChange?.(filter);
+  };
+
+  const toggleDropdown = (id: string) => {
+    setOpenDropdowns(prev => ({ ...prev, [id]: !prev[id] }));
+  };
+
+  const closeDropdown = (id: string) => {
+    setOpenDropdowns(prev => ({ ...prev, [id]: false }));
+  };
+
+  return (
+    <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
+      {/* Task header Start */}
+      <div className="flex flex-col items-center px-4 py-5 xl:px-6 xl:py-6">
+        <div className="flex flex-col w-full gap-5 sm:justify-between xl:flex-row xl:items-center">
+          <div className="flex flex-wrap items-center gap-x-1 gap-y-2 rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900">
+            <button
+              onClick={() => handleFilterChange("All")}
+              className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
+                selectedFilter === "All"
+                  ? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
+                  : "text-gray-500 dark:text-gray-400"
+              }`}
+            >
+              All Tasks
+              <span
+                className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 ${
+                  selectedFilter === "All"
+                    ? "text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15"
+                    : "bg-white dark:bg-white/[0.03]"
+                }`}
+              >
+                {tasks.length}
+              </span>
+            </button>
+
+            <button
+              onClick={() => handleFilterChange("Todo")}
+              className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
+                selectedFilter === "Todo"
+                  ? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
+                  : "text-gray-500 dark:text-gray-400"
+              }`}
+            >
+              To do
+              <span
+                className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 ${
+                  selectedFilter === "Todo"
+                    ? "text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15"
+                    : "bg-white dark:bg-white/[0.03]"
+                }`}
+              >
+                {todoTasks.length}
+              </span>
+            </button>
+
+            <button
+              onClick={() => handleFilterChange("InProgress")}
+              className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
+                selectedFilter === "InProgress"
+                  ? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
+                  : "text-gray-500 dark:text-gray-400"
+              }`}
+            >
+              In Progress
+              <span
+                className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 ${
+                  selectedFilter === "InProgress"
+                    ? "text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15"
+                    : "bg-white dark:bg-white/[0.03]"
+                }`}
+              >
+                {inProgressTasks.length}
+              </span>
+            </button>
+
+            <button
+              onClick={() => handleFilterChange("Completed")}
+              className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
+                selectedFilter === "Completed"
+                  ? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
+                  : "text-gray-500 dark:text-gray-400"
+              }`}
+            >
+              Completed
+              <span
+                className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 ${
+                  selectedFilter === "Completed"
+                    ? "text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15"
+                    : "bg-white dark:bg-white/[0.03]"
+                }`}
+              >
+                {completedTasks.length}
+              </span>
+            </button>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3 xl:justify-end">
+            <button className="inline-flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[0.03]">
+              <svg className="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fillRule="evenodd" clipRule="evenodd" d="M12.0826 4.0835C11.0769 4.0835 10.2617 4.89871 10.2617 5.90433C10.2617 6.90995 11.0769 7.72516 12.0826 7.72516C13.0882 7.72516 13.9034 6.90995 13.9034 5.90433C13.9034 4.89871 13.0882 4.0835 12.0826 4.0835ZM2.29004 6.65409H8.84671C9.18662 8.12703 10.5063 9.22516 12.0826 9.22516C13.6588 9.22516 14.9785 8.12703 15.3184 6.65409H17.7067C18.1209 6.65409 18.4567 6.31831 18.4567 5.90409C18.4567 5.48988 18.1209 5.15409 17.7067 5.15409H15.3183C14.9782 3.68139 13.6586 2.5835 12.0826 2.5835C10.5065 2.5835 9.18691 3.68139 8.84682 5.15409H2.29004C1.87583 5.15409 1.54004 5.48988 1.54004 5.90409C1.54004 6.31831 1.87583 6.65409 2.29004 6.65409ZM4.6816 13.3462H2.29085C1.87664 13.3462 1.54085 13.682 1.54085 14.0962C1.54085 14.5104 1.87664 14.8462 2.29085 14.8462H4.68172C5.02181 16.3189 6.34142 17.4168 7.91745 17.4168C9.49348 17.4168 10.8131 16.3189 11.1532 14.8462H17.7075C18.1217 14.8462 18.4575 14.5104 18.4575 14.0962C18.4575 13.682 18.1217 13.3462 17.7075 13.3462H11.1533C10.8134 11.8733 9.49366 10.7752 7.91745 10.7752C6.34124 10.7752 5.02151 11.8733 4.6816 13.3462ZM9.73828 14.096C9.73828 13.0904 8.92307 12.2752 7.91745 12.2752C6.91183 12.2752 6.09662 13.0904 6.09662 14.096C6.09662 15.1016 6.91183 15.9168 7.91745 15.9168C8.92307 15.9168 9.73828 15.1016 9.73828 14.096Z" fill=""></path>
+              </svg>
+              Filter & Sort
+            </button>
+
+            <button
+              onClick={onAddTask}
+              className="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600"
+            >
+              Add New Task
+              <PlusIcon className="fill-current" width={20} height={20} />
+            </button>
+          </div>
+        </div>
+      </div>
+      {/* Task header End */}
+
+      {/* Task wrapper Start */}
+      <div className="mt-7 grid grid-cols-1 border-t border-gray-200 sm:mt-0 sm:grid-cols-2 xl:grid-cols-3 dark:border-gray-800">
+        {/* To do list */}
+        <KanbanColumn
+          title="To Do"
+          tasks={todoTasks}
+          count={todoTasks.length}
+          status="todo"
+          onTaskClick={onTaskClick}
+          onDropdownToggle={toggleDropdown}
+          onDropdownClose={closeDropdown}
+          openDropdown={openDropdowns["todo"] || false}
+        />
+
+        {/* Progress list */}
+        <KanbanColumn
+          title="In Progress"
+          tasks={inProgressTasks}
+          count={inProgressTasks.length}
+          status="in_progress"
+          onTaskClick={onTaskClick}
+          onDropdownToggle={toggleDropdown}
+          onDropdownClose={closeDropdown}
+          openDropdown={openDropdowns["in_progress"] || false}
+          borderX
+        />
+
+        {/* Completed list */}
+        <KanbanColumn
+          title="Completed"
+          tasks={completedTasks}
+          count={completedTasks.length}
+          status="completed"
+          onTaskClick={onTaskClick}
+          onDropdownToggle={toggleDropdown}
+          onDropdownClose={closeDropdown}
+          openDropdown={openDropdowns["completed"] || false}
+        />
+      </div>
+      {/* Task wrapper End */}
+    </div>
+  );
+};
+
+interface KanbanColumnProps {
+  title: string;
+  tasks: Task[];
+  count: number;
+  status: "todo" | "in_progress" | "completed";
+  onTaskClick?: (task: Task) => void;
+  onDropdownToggle: (id: string) => void;
+  onDropdownClose: (id: string) => void;
+  openDropdown: boolean;
+  borderX?: boolean;
+}
+
+const KanbanColumn: React.FC<KanbanColumnProps> = ({
+  title,
+  tasks,
+  count,
+  status,
+  onTaskClick,
+  onDropdownToggle,
+  onDropdownClose,
+  openDropdown,
+  borderX = false,
+}) => {
+  const getCountBadgeClass = () => {
+    if (status === "in_progress") {
+      return "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-orange-400";
+    }
+    if (status === "completed") {
+      return "bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500";
+    }
+    return "bg-gray-100 text-gray-700 dark:bg-white/[0.03] dark:text-white/80";
+  };
+
+  return (
+    <div className={`swim-lane flex flex-col gap-5 p-4 xl:p-6 ${borderX ? "border-x border-gray-200 dark:border-gray-800" : ""}`}>
+      <div className="mb-1 flex items-center justify-between">
+        <h3 className="flex items-center gap-3 text-base font-medium text-gray-800 dark:text-white/90">
+          {title}
+          <span className={`text-theme-xs inline-flex rounded-full px-2 py-0.5 font-medium ${getCountBadgeClass()}`}>
+            {count}
+          </span>
+        </h3>
+
+        <div className="relative">
+          <button
+            onClick={() => onDropdownToggle(status)}
+            className="text-gray-700 dark:text-gray-400"
+          >
+            <HorizontaLDots className="fill-current" width={24} height={24} />
+          </button>
+          {openDropdown && (
+            <>
+              <div
+                className="fixed inset-0 z-30"
+                onClick={() => onDropdownClose(status)}
+              />
+              <div className="shadow-theme-md dark:bg-gray-dark absolute top-full right-0 z-40 w-[140px] space-y-1 rounded-2xl border border-gray-200 bg-white p-2 dark:border-gray-800">
+                <button className="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
+                  Edit
+                </button>
+                <button className="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
+                  Delete
+                </button>
+                <button className="text-theme-xs flex w-full rounded-lg px-3 py-2 text-left font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
+                  Clear All
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {tasks.map((task) => (
+        <TaskCard key={task.id} task={task} onClick={() => onTaskClick?.(task)} />
+      ))}
+    </div>
+  );
+};
+
+interface TaskCardProps {
+  task: Task;
+  onClick?: () => void;
+}
+
+const TaskCard: React.FC<TaskCardProps> = ({ task, onClick }) => {
+  const getTagClass = (color?: string) => {
+    switch (color) {
+      case "brand":
+        return "bg-brand-50 text-brand-500 dark:bg-brand-500/15 dark:text-brand-400";
+      case "success":
+        return "bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500";
+      case "warning":
+        return "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-orange-400";
+      case "orange":
+        return "bg-orange-400/10 text-orange-400";
+      default:
+        return "bg-gray-100 text-gray-700 dark:bg-white/[0.03] dark:text-white/80";
+    }
+  };
+
+  return (
+    <div
+      draggable
+      onClick={onClick}
+      className="task shadow-theme-sm rounded-xl border border-gray-200 bg-white p-5 dark:border-gray-800 dark:bg-white/5 cursor-pointer hover:shadow-md transition-shadow"
+    >
+      <div className="flex items-start justify-between gap-6">
+        <div className="flex-1">
+          {task.image && (
+            <div className="my-4">
+              <img
+                src={task.image}
+                alt="task"
+                className="overflow-hidden rounded-xl border-[0.5px] border-gray-200 dark:border-gray-800 w-full"
+              />
+            </div>
+          )}
+          <h4 className={`text-base text-gray-800 dark:text-white/90 ${task.image ? "mb-2" : "mb-5"}`}>
+            {task.title}
+          </h4>
+          {task.description && (
+            <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">{task.description}</p>
+          )}
+
+          <div className="flex items-center gap-3">
+            {task.dueDate && (
+              <span className="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
+                <svg className="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path fillRule="evenodd" clipRule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
+                </svg>
+                {task.dueDate}
+              </span>
+            )}
+
+            {task.commentsCount !== undefined && (
+              <span className="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
+                <svg className="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" strokeWidth="1.5" strokeLinejoin="round"></path>
+                </svg>
+                {task.commentsCount}
+              </span>
+            )}
+
+            {task.attachmentsCount !== undefined && (
+              <span className="flex cursor-pointer items-center gap-1 text-sm text-gray-500 dark:text-gray-400">
+                <svg className="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path fillRule="evenodd" clipRule="evenodd" d="M6.88066 3.10905C8.54039 1.44932 11.2313 1.44933 12.8911 3.10906C14.5508 4.76878 14.5508 7.45973 12.8911 9.11946L12.0657 9.94479L11.0051 8.88413L11.8304 8.0588C12.9043 6.98486 12.9043 5.24366 11.8304 4.16972C10.7565 3.09577 9.01526 3.09577 7.94132 4.16971L7.11599 4.99504L6.05533 3.93438L6.88066 3.10905ZM8.88376 11.0055L9.94442 12.0661L9.11983 12.8907C7.4601 14.5504 4.76915 14.5504 3.10942 12.8907C1.44969 11.231 1.44969 8.54002 3.10942 6.88029L3.93401 6.0557L4.99467 7.11636L4.17008 7.94095C3.09614 9.01489 3.09614 10.7561 4.17008 11.83C5.24402 12.904 6.98522 12.904 8.05917 11.83L8.88376 11.0055ZM9.94458 7.11599C10.2375 6.8231 10.2375 6.34823 9.94458 6.05533C9.65169 5.76244 9.17682 5.76244 8.88392 6.05533L6.0555 8.88376C5.7626 9.17665 5.7626 9.65153 6.0555 9.94442C6.34839 10.2373 6.82326 10.2373 7.11616 9.94442L9.94458 7.11599Z" fill=""></path>
+                </svg>
+                {task.attachmentsCount}
+              </span>
+            )}
+          </div>
+
+          {task.tags && task.tags.length > 0 && (
+            <div className="mt-3 flex flex-wrap gap-2">
+              {task.tags.map((tag, index) => (
+                <span
+                  key={index}
+                  className={`text-theme-xs inline-flex rounded-full px-2 py-0.5 font-medium ${getTagClass(tag.color)}`}
+                >
+                  {tag.label}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {task.assignee?.avatar && (
+          <div className="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
+            <img src={task.assignee.avatar} alt={task.assignee.name || "user"} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default KanbanBoard;
+

frontend/src/components/tasks/TaskList.tsx

@@ -0,0 +1,410 @@
+import React, { useState } from "react";
+import { PlusIcon, HorizontaLDots } from "../../icons";
+import { Task } from "./KanbanBoard";
+
+interface TaskListProps {
+  tasks: Task[];
+  onTaskClick?: (task: Task) => void;
+  onTaskToggle?: (taskId: string, completed: boolean) => void;
+  onAddTask?: () => void;
+  onFilterChange?: (filter: "All" | "Todo" | "InProgress" | "Completed") => void;
+}
+
+const TaskList: React.FC<TaskListProps> = ({
+  tasks,
+  onTaskClick,
+  onTaskToggle,
+  onAddTask,
+  onFilterChange,
+}) => {
+  const [selectedFilter, setSelectedFilter] = useState<"All" | "Todo" | "InProgress" | "Completed">("All");
+  const [openDropdowns, setOpenDropdowns] = useState<Record<string, boolean>>({});
+  const [checkedTasks, setCheckedTasks] = useState<Set<string>>(new Set());
+
+  const filteredTasks = selectedFilter === "All" 
+    ? tasks 
+    : tasks.filter(task => {
+        if (selectedFilter === "Todo") return task.status === "todo";
+        if (selectedFilter === "InProgress") return task.status === "in_progress";
+        if (selectedFilter === "Completed") return task.status === "completed";
+        return true;
+      });
+
+  const todoTasks = filteredTasks.filter(t => t.status === "todo");
+  const inProgressTasks = filteredTasks.filter(t => t.status === "in_progress");
+  const completedTasks = filteredTasks.filter(t => t.status === "completed");
+
+  const handleFilterChange = (filter: "All" | "Todo" | "InProgress" | "Completed") => {
+    setSelectedFilter(filter);
+    onFilterChange?.(filter);
+  };
+
+  const toggleDropdown = (id: string) => {
+    setOpenDropdowns(prev => ({ ...prev, [id]: !prev[id] }));
+  };
+
+  const closeDropdown = (id: string) => {
+    setOpenDropdowns(prev => ({ ...prev, [id]: false }));
+  };
+
+  const handleCheckboxChange = (taskId: string, checked: boolean) => {
+    if (checked) {
+      setCheckedTasks(prev => new Set(prev).add(taskId));
+    } else {
+      setCheckedTasks(prev => {
+        const newSet = new Set(prev);
+        newSet.delete(taskId);
+        return newSet;
+      });
+    }
+    onTaskToggle?.(taskId, checked);
+  };
+
+  return (
+    <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
+      {/* Task header Start */}
+      <div className="flex flex-col items-center px-4 py-5 xl:px-6 xl:py-6">
+        <div className="flex flex-col w-full gap-5 sm:justify-between xl:flex-row xl:items-center">
+          <div className="flex flex-wrap items-center gap-x-1 gap-y-2 rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900">
+            <button
+              onClick={() => handleFilterChange("All")}
+              className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
+                selectedFilter === "All"
+                  ? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
+                  : "text-gray-500 dark:text-gray-400"
+              }`}
+            >
+              All Tasks
+              <span
+                className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 ${
+                  selectedFilter === "All"
+                    ? "text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15"
+                    : "bg-white dark:bg-white/[0.03]"
+                }`}
+              >
+                {tasks.length}
+              </span>
+            </button>
+
+            <button
+              onClick={() => handleFilterChange("Todo")}
+              className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
+                selectedFilter === "Todo"
+                  ? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
+                  : "text-gray-500 dark:text-gray-400"
+              }`}
+            >
+              To do
+              <span
+                className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 ${
+                  selectedFilter === "Todo"
+                    ? "text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15"
+                    : "bg-white dark:bg-white/[0.03]"
+                }`}
+              >
+                {todoTasks.length}
+              </span>
+            </button>
+
+            <button
+              onClick={() => handleFilterChange("InProgress")}
+              className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
+                selectedFilter === "InProgress"
+                  ? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
+                  : "text-gray-500 dark:text-gray-400"
+              }`}
+            >
+              In Progress
+              <span
+                className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 ${
+                  selectedFilter === "InProgress"
+                    ? "text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15"
+                    : "bg-white dark:bg-white/[0.03]"
+                }`}
+              >
+                {inProgressTasks.length}
+              </span>
+            </button>
+
+            <button
+              onClick={() => handleFilterChange("Completed")}
+              className={`inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md group hover:text-gray-900 dark:hover:text-white ${
+                selectedFilter === "Completed"
+                  ? "text-gray-900 dark:text-white bg-white dark:bg-gray-800"
+                  : "text-gray-500 dark:text-gray-400"
+              }`}
+            >
+              Completed
+              <span
+                className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium leading-normal group-hover:bg-brand-50 group-hover:text-brand-500 dark:group-hover:bg-brand-500/15 dark:group-hover:text-brand-400 ${
+                  selectedFilter === "Completed"
+                    ? "text-brand-500 dark:text-brand-400 bg-brand-50 dark:bg-brand-500/15"
+                    : "bg-white dark:bg-white/[0.03]"
+                }`}
+              >
+                {completedTasks.length}
+              </span>
+            </button>
+          </div>
+
+          <div className="flex flex-wrap items-center gap-3 xl:justify-end">
+            <button className="inline-flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2.5 text-sm font-medium text-gray-700 shadow-theme-xs hover:bg-gray-50 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-white/[0.03]">
+              <svg className="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path fillRule="evenodd" clipRule="evenodd" d="M12.0826 4.0835C11.0769 4.0835 10.2617 4.89871 10.2617 5.90433C10.2617 6.90995 11.0769 7.72516 12.0826 7.72516C13.0882 7.72516 13.9034 6.90995 13.9034 5.90433C13.9034 4.89871 13.0882 4.0835 12.0826 4.0835ZM2.29004 6.65409H8.84671C9.18662 8.12703 10.5063 9.22516 12.0826 9.22516C13.6588 9.22516 14.9785 8.12703 15.3184 6.65409H17.7067C18.1209 6.65409 18.4567 6.31831 18.4567 5.90409C18.4567 5.48988 18.1209 5.15409 17.7067 5.15409H15.3183C14.9782 3.68139 13.6586 2.5835 12.0826 2.5835C10.5065 2.5835 9.18691 3.68139 8.84682 5.15409H2.29004C1.87583 5.15409 1.54004 5.48988 1.54004 5.90409C1.54004 6.31831 1.87583 6.65409 2.29004 6.65409ZM4.6816 13.3462H2.29085C1.87664 13.3462 1.54085 13.682 1.54085 14.0962C1.54085 14.5104 1.87664 14.8462 2.29085 14.8462H4.68172C5.02181 16.3189 6.34142 17.4168 7.91745 17.4168C9.49348 17.4168 10.8131 16.3189 11.1532 14.8462H17.7075C18.1217 14.8462 18.4575 14.5104 18.4575 14.0962C18.4575 13.682 18.1217 13.3462 17.7075 13.3462H11.1533C10.8134 11.8733 9.49366 10.7752 7.91745 10.7752C6.34124 10.7752 5.02151 11.8733 4.6816 13.3462ZM9.73828 14.096C9.73828 13.0904 8.92307 12.2752 7.91745 12.2752C6.91183 12.2752 6.09662 13.0904 6.09662 14.096C6.09662 15.1016 6.91183 15.9168 7.91745 15.9168C8.92307 15.9168 9.73828 15.1016 9.73828 14.096Z" fill=""></path>
+              </svg>
+              Filter & Sort
+            </button>
+
+            <button
+              onClick={onAddTask}
+              className="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white shadow-theme-xs hover:bg-brand-600"
+            >
+              Add New Task
+              <PlusIcon className="fill-current" width={20} height={20} />
+            </button>
+          </div>
+        </div>
+      </div>
+      {/* Task header End */}
+
+      {/* Task wrapper Start */}
+      <div className="p-4 space-y-8 border-t border-gray-200 mt-7 dark:border-gray-800 sm:mt-0 xl:p-6">
+        {/* To do list */}
+        <TaskListSection
+          title="To Do"
+          tasks={todoTasks}
+          count={todoTasks.length}
+          checkedTasks={checkedTasks}
+          onTaskClick={onTaskClick}
+          onCheckboxChange={handleCheckboxChange}
+          onDropdownToggle={toggleDropdown}
+          onDropdownClose={closeDropdown}
+          openDropdown={openDropdowns["todo"] || false}
+        />
+
+        {/* Progress list */}
+        <TaskListSection
+          title="In Progress"
+          tasks={inProgressTasks}
+          count={inProgressTasks.length}
+          checkedTasks={checkedTasks}
+          onTaskClick={onTaskClick}
+          onCheckboxChange={handleCheckboxChange}
+          onDropdownToggle={toggleDropdown}
+          onDropdownClose={closeDropdown}
+          openDropdown={openDropdowns["in_progress"] || false}
+        />
+
+        {/* Completed list */}
+        <TaskListSection
+          title="Completed"
+          tasks={completedTasks}
+          count={completedTasks.length}
+          checkedTasks={checkedTasks}
+          onTaskClick={onTaskClick}
+          onCheckboxChange={handleCheckboxChange}
+          onDropdownToggle={toggleDropdown}
+          onDropdownClose={closeDropdown}
+          openDropdown={openDropdowns["completed"] || false}
+        />
+      </div>
+      {/* Task wrapper End */}
+    </div>
+  );
+};
+
+interface TaskListSectionProps {
+  title: string;
+  tasks: Task[];
+  count: number;
+  checkedTasks: Set<string>;
+  onTaskClick?: (task: Task) => void;
+  onCheckboxChange: (taskId: string, checked: boolean) => void;
+  onDropdownToggle: (id: string) => void;
+  onDropdownClose: (id: string) => void;
+  openDropdown: boolean;
+}
+
+const TaskListSection: React.FC<TaskListSectionProps> = ({
+  title,
+  tasks,
+  count,
+  checkedTasks,
+  onTaskClick,
+  onCheckboxChange,
+  onDropdownToggle,
+  onDropdownClose,
+  openDropdown,
+}) => {
+  const getCountBadgeClass = () => {
+    if (title === "In Progress") {
+      return "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-orange-400";
+    }
+    if (title === "Completed") {
+      return "bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500";
+    }
+    return "bg-gray-100 text-gray-700 dark:bg-white/[0.03] dark:text-white/80";
+  };
+
+  return (
+    <div className="flex flex-col gap-4 swim-lane">
+      <div className="flex items-center justify-between mb-2">
+        <h3 className="flex items-center gap-3 text-base font-medium text-gray-800 dark:text-white/90">
+          {title}
+          <span className={`inline-flex rounded-full px-2 py-0.5 text-theme-xs font-medium ${getCountBadgeClass()}`}>
+            {count}
+          </span>
+        </h3>
+
+        <div className="relative">
+          <button
+            onClick={() => onDropdownToggle(title.toLowerCase().replace(" ", "_"))}
+            className="text-gray-700 dark:text-gray-400"
+          >
+            <HorizontaLDots className="fill-current" width={24} height={24} />
+          </button>
+          {openDropdown && (
+            <>
+              <div
+                className="fixed inset-0 z-30"
+                onClick={() => onDropdownClose(title.toLowerCase().replace(" ", "_"))}
+              />
+              <div className="absolute right-0 top-full z-40 w-[140px] space-y-1 rounded-2xl border border-gray-200 bg-white p-2 shadow-theme-md dark:border-gray-800 dark:bg-gray-dark">
+                <button className="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
+                  Edit
+                </button>
+                <button className="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
+                  Delete
+                </button>
+                <button className="flex w-full px-3 py-2 font-medium text-left text-gray-500 rounded-lg text-theme-xs hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300">
+                  Clear All
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+
+      {tasks.map((task) => (
+        <TaskListItem
+          key={task.id}
+          task={task}
+          checked={checkedTasks.has(task.id)}
+          onClick={() => onTaskClick?.(task)}
+          onCheckboxChange={(checked) => onCheckboxChange(task.id, checked)}
+        />
+      ))}
+    </div>
+  );
+};
+
+interface TaskListItemProps {
+  task: Task;
+  checked: boolean;
+  onClick?: () => void;
+  onCheckboxChange: (checked: boolean) => void;
+}
+
+const TaskListItem: React.FC<TaskListItemProps> = ({ task, checked, onClick, onCheckboxChange }) => {
+  const getTagClass = (color?: string) => {
+    switch (color) {
+      case "brand":
+        return "bg-brand-50 text-brand-500 dark:bg-brand-500/15 dark:text-brand-400";
+      case "success":
+        return "bg-success-50 text-success-700 dark:bg-success-500/15 dark:text-success-500";
+      case "warning":
+        return "bg-warning-50 text-warning-700 dark:bg-warning-500/15 dark:text-orange-400";
+      case "orange":
+        return "bg-orange-400/10 text-orange-400";
+      default:
+        return "bg-gray-100 text-gray-700 dark:bg-white/[0.03] dark:text-white/80";
+    }
+  };
+
+  return (
+    <div
+      draggable
+      className="p-5 bg-white border border-gray-200 task rounded-xl shadow-theme-sm dark:border-gray-800 dark:bg-white/5"
+    >
+      <div className="flex flex-col gap-5 xl:flex-row xl:items-center xl:justify-between">
+        <div className="flex items-start w-full gap-4">
+          <span className="text-gray-400">
+            <svg className="fill-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path fillRule="evenodd" clipRule="evenodd" d="M2.43311 5.0001C2.43311 4.50304 2.83605 4.1001 3.33311 4.1001L16.6664 4.1001C17.1635 4.1001 17.5664 4.50304 17.5664 5.0001C17.5664 5.49715 17.1635 5.9001 16.6664 5.9001L3.33311 5.9001C2.83605 5.9001 2.43311 5.49716 2.43311 5.0001ZM2.43311 15.0001C2.43311 14.503 2.83605 14.1001 3.33311 14.1001L16.6664 14.1001C17.1635 14.1001 17.5664 14.503 17.5664 15.0001C17.5664 15.4972 17.1635 15.9001 16.6664 15.9001L3.33311 15.9001C2.83605 15.9001 2.43311 15.4972 2.43311 15.0001ZM3.33311 9.1001C2.83605 9.1001 2.43311 9.50304 2.43311 10.0001C2.43311 10.4972 2.83605 10.9001 3.33311 10.9001L16.6664 10.9001C17.1635 10.9001 17.5664 10.4972 17.5664 10.0001C17.5664 9.50304 17.1635 9.1001 16.6664 9.1001L3.33311 9.1001Z" fill=""></path>
+            </svg>
+          </span>
+
+          <label htmlFor={`taskCheckbox-${task.id}`} className="w-full cursor-pointer">
+            <div className="relative flex items-start">
+              <input
+                type="checkbox"
+                id={`taskCheckbox-${task.id}`}
+                className="sr-only taskCheckbox"
+                checked={checked}
+                onChange={(e) => onCheckboxChange(e.target.checked)}
+              />
+              <div className={`flex items-center justify-center w-full h-5 mr-3 border border-gray-300 rounded-md box max-w-5 dark:border-gray-700 ${checked ? "bg-brand-500 border-brand-500" : ""}`}>
+                <span className={checked ? "opacity-100" : "opacity-0"}>
+                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M11.6668 3.5L5.25016 9.91667L2.3335 7" stroke="white" strokeWidth="1.94437" strokeLinecap="round" strokeLinejoin="round"></path>
+                  </svg>
+                </span>
+              </div>
+              <p className="-mt-0.5 text-base text-gray-800 dark:text-white/90" onClick={onClick}>
+                {task.title}
+              </p>
+            </div>
+          </label>
+        </div>
+
+        <div className="flex flex-col-reverse items-start justify-end w-full gap-3 xl:flex-row xl:items-center xl:gap-5">
+          {task.tags && task.tags.length > 0 && (
+            <span className={`inline-flex rounded-full px-2 py-0.5 text-theme-xs font-medium ${getTagClass(task.tags[0].color)}`}>
+              {task.tags[0].label}
+            </span>
+          )}
+
+          <div className="flex items-center justify-between w-full gap-5 xl:w-auto xl:justify-normal">
+            <div className="flex items-center gap-3">
+              {task.dueDate && (
+                <span className="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
+                  <svg className="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fillRule="evenodd" clipRule="evenodd" d="M5.33329 1.0835C5.74751 1.0835 6.08329 1.41928 6.08329 1.8335V2.25016L9.91663 2.25016V1.8335C9.91663 1.41928 10.2524 1.0835 10.6666 1.0835C11.0808 1.0835 11.4166 1.41928 11.4166 1.8335V2.25016L12.3333 2.25016C13.2998 2.25016 14.0833 3.03366 14.0833 4.00016V6.00016L14.0833 12.6668C14.0833 13.6333 13.2998 14.4168 12.3333 14.4168L3.66663 14.4168C2.70013 14.4168 1.91663 13.6333 1.91663 12.6668L1.91663 6.00016L1.91663 4.00016C1.91663 3.03366 2.70013 2.25016 3.66663 2.25016L4.58329 2.25016V1.8335C4.58329 1.41928 4.91908 1.0835 5.33329 1.0835ZM5.33329 3.75016L3.66663 3.75016C3.52855 3.75016 3.41663 3.86209 3.41663 4.00016V5.25016L12.5833 5.25016V4.00016C12.5833 3.86209 12.4714 3.75016 12.3333 3.75016L10.6666 3.75016L5.33329 3.75016ZM12.5833 6.75016L3.41663 6.75016L3.41663 12.6668C3.41663 12.8049 3.52855 12.9168 3.66663 12.9168L12.3333 12.9168C12.4714 12.9168 12.5833 12.8049 12.5833 12.6668L12.5833 6.75016Z" fill=""></path>
+                  </svg>
+                  {task.dueDate}
+                </span>
+              )}
+
+              {task.commentsCount !== undefined && (
+                <span className="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
+                  <svg className="stroke-current" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9 15.6343C12.6244 15.6343 15.5625 12.6961 15.5625 9.07178C15.5625 5.44741 12.6244 2.50928 9 2.50928C5.37563 2.50928 2.4375 5.44741 2.4375 9.07178C2.4375 10.884 3.17203 12.5246 4.35961 13.7122L2.4375 15.6343H9Z" stroke="" strokeWidth="1.5" strokeLinejoin="round"></path>
+                  </svg>
+                  {task.commentsCount}
+                </span>
+              )}
+
+              {task.attachmentsCount !== undefined && (
+                <span className="flex items-center gap-1 text-sm text-gray-500 cursor-pointer dark:text-gray-400">
+                  <svg className="fill-current" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fillRule="evenodd" clipRule="evenodd" d="M6.88066 3.10905C8.54039 1.44932 11.2313 1.44933 12.8911 3.10906C14.5508 4.76878 14.5508 7.45973 12.8911 9.11946L12.0657 9.94479L11.0051 8.88413L11.8304 8.0588C12.9043 6.98486 12.9043 5.24366 11.8304 4.16972C10.7565 3.09577 9.01526 3.09577 7.94132 4.16971L7.11599 4.99504L6.05533 3.93438L6.88066 3.10905ZM8.88376 11.0055L9.94442 12.0661L9.11983 12.8907C7.4601 14.5504 4.76915 14.5504 3.10942 12.8907C1.44969 11.231 1.44969 8.54002 3.10942 6.88029L3.93401 6.0557L4.99467 7.11636L4.17008 7.94095C3.09614 9.01489 3.09614 10.7561 4.17008 11.83C5.24402 12.904 6.98522 12.904 8.05917 11.83L8.88376 11.0055ZM9.94458 7.11599C10.2375 6.8231 10.2375 6.34823 9.94458 6.05533C9.65169 5.76244 9.17682 5.76244 8.88392 6.05533L6.0555 8.88376C5.7626 9.17665 5.7626 9.65153 6.0555 9.94442C6.34839 10.2373 6.82326 10.2373 7.11616 9.94442L9.94458 7.11599Z" fill=""></path>
+                  </svg>
+                  {task.attachmentsCount}
+                </span>
+              )}
+            </div>
+
+            {task.assignee?.avatar && (
+              <div className="h-6 w-full max-w-6 overflow-hidden rounded-full border-[0.5px] border-gray-200 dark:border-gray-800">
+                <img src={task.assignee.avatar} alt={task.assignee.name || "user"} />
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TaskList;
+

frontend/src/components/tasks/index.ts

@@ -0,0 +1,4 @@
+export { default as KanbanBoard } from "./KanbanBoard";
+export { default as TaskList } from "./TaskList";
+export type { Task } from "./KanbanBoard";
+