+ {/* Left Section (Login Box) */}
+
+
+
Log in to your account
+ {/* Email Input */}
+
-
-
- {/* Right Section (Blurred Image Background) */}
-
-
-
-
- Text Overlay
+ {/* Password Input */}
+
+ {/* Login Button */}
+
+
OR
+ {/* Login with Google Button */}
+
+ {/* Forgot Password Link */}
+
-
+
+ {/* Right Section (Blurred Image Background) */}
+
+
);
}
diff --git a/frontend/src/components/icons/plusIcon.jsx b/frontend/src/components/icons/plusIcon.jsx
new file mode 100644
index 0000000..080d990
--- /dev/null
+++ b/frontend/src/components/icons/plusIcon.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+function PlusIcon() {
+ return (
+
+ );
+}
+
+export default PlusIcon;
diff --git a/frontend/src/components/icons/trashIcon.jsx b/frontend/src/components/icons/trashIcon.jsx
new file mode 100644
index 0000000..f0be9fc
--- /dev/null
+++ b/frontend/src/components/icons/trashIcon.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+function TrashIcon() {
+ return (
+ React.createElement(
+ "svg",
+ {
+ xmlns: "http://www.w3.org/2000/svg",
+ fill: "none",
+ viewBox: "0 0 24 24",
+ strokeWidth: 1.5,
+ className: "w-6 h-6"
+ },
+ React.createElement("path", {
+ strokeLinecap: "round",
+ strokeLinejoin: "round",
+ d: "M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+ })
+ )
+ );
+}
+
+export default TrashIcon;
diff --git a/frontend/src/components/kanbanBoard/columnContainer.jsx b/frontend/src/components/kanbanBoard/columnContainer.jsx
new file mode 100644
index 0000000..5ff2333
--- /dev/null
+++ b/frontend/src/components/kanbanBoard/columnContainer.jsx
@@ -0,0 +1,178 @@
+import { SortableContext, useSortable } from "@dnd-kit/sortable";
+import TrashIcon from "../icons/trashIcon";
+import { CSS } from "@dnd-kit/utilities";
+import { useMemo, useState } from "react";
+import PlusIcon from "../icons/plusIcon";
+import TaskCard from "./taskCard";
+
+function ColumnContainer({
+ column,
+ deleteColumn,
+ updateColumn,
+ createTask,
+ tasks,
+ deleteTask,
+ updateTask,
+}) {
+ const [editMode, setEditMode] = useState(false);
+
+ const tasksIds = useMemo(() => {
+ return tasks.map((task) => task.id);
+ }, [tasks]);
+
+ const {
+ setNodeRef,
+ attributes,
+ listeners,
+ transform,
+ transition,
+ isDragging,
+ } = useSortable({
+ id: column.id,
+ data: {
+ type: "Column",
+ column,
+ },
+ disabled: editMode,
+ });
+
+ const style = {
+ transition,
+ transform: CSS.Transform.toString(transform),
+ };
+
+ if (isDragging) {
+ return (
+
+ );
+ }
+
+ return (
+
+ {/* Column title */}
+
{
+ setEditMode(true);
+ }}
+ className="
+ bg-mainBackgroundColor
+ text-md
+ h-[60px]
+ cursor-grab
+ rounded-md
+ rounded-b-none
+ p-3
+ font-bold
+ border-columnBackgroundColor
+ border-4
+ flex
+ items-center
+ justify-between
+ "
+ >
+
+
+ 0
+
+ {!editMode && column.title}
+ {editMode && (
+
updateColumn(column.id, e.target.value)}
+ autoFocus
+ onBlur={() => {
+ setEditMode(false);
+ }}
+ onKeyDown={(e) => {
+ if (e.key !== "Enter") return;
+ setEditMode(false);
+ }}
+ />
+ )}
+
+
+
+
+ {/* Column task container */}
+
+
+ {tasks.map((task) => (
+
+ ))}
+
+
+ {/* Column footer */}
+
+
+ );
+}
+
+export default ColumnContainer;
diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
new file mode 100644
index 0000000..1ec76b5
--- /dev/null
+++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
@@ -0,0 +1,336 @@
+import PlusIcon from "../icons/plusIcon"
+import { useMemo, useState } from "react";
+import ColumnContainer from "./columnContainer";
+import {
+ DndContext,
+ DragOverlay,
+ PointerSensor,
+ useSensor,
+ useSensors,
+} from "@dnd-kit/core";
+import { SortableContext, arrayMove } from "@dnd-kit/sortable";
+import { createPortal } from "react-dom";
+import TaskCard from "./taskCard";
+
+const defaultCols = [
+ {
+ id: "todo",
+ title: "Todo",
+ },
+ {
+ id: "doing",
+ title: "Work in progress",
+ },
+ {
+ id: "done",
+ title: "Done",
+ },
+];
+
+const defaultTasks = [
+ {
+ id: "1",
+ columnId: "todo",
+ content: "List admin APIs for dashboard",
+ },
+ {
+ id: "2",
+ columnId: "todo",
+ content:
+ "Develop user registration functionality with OTP delivered on SMS after email confirmation and phone number confirmation",
+ },
+ {
+ id: "3",
+ columnId: "doing",
+ content: "Conduct security testing",
+ },
+ {
+ id: "4",
+ columnId: "doing",
+ content: "Analyze competitors",
+ },
+ {
+ id: "5",
+ columnId: "done",
+ content: "Create UI kit documentation",
+ },
+ {
+ id: "6",
+ columnId: "done",
+ content: "Dev meeting",
+ },
+ {
+ id: "7",
+ columnId: "done",
+ content: "Deliver dashboard prototype",
+ },
+ {
+ id: "8",
+ columnId: "todo",
+ content: "Optimize application performance",
+ },
+ {
+ id: "9",
+ columnId: "todo",
+ content: "Implement data validation",
+ },
+ {
+ id: "10",
+ columnId: "todo",
+ content: "Design database schema",
+ },
+ {
+ id: "11",
+ columnId: "todo",
+ content: "Integrate SSL web certificates into workflow",
+ },
+ {
+ id: "12",
+ columnId: "doing",
+ content: "Implement error logging and monitoring",
+ },
+ {
+ id: "13",
+ columnId: "doing",
+ content: "Design and implement responsive UI",
+ },
+];
+
+function KanbanBoard() {
+ const [columns, setColumns] = useState(defaultCols);
+ const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
+
+ const [tasks, setTasks] = useState(defaultTasks);
+
+ const [activeColumn, setActiveColumn] = useState(null);
+
+ const [activeTask, setActiveTask] = useState(null);
+
+ const sensors = useSensors(
+ useSensor(PointerSensor, {
+ activationConstraint: {
+ distance: 10,
+ },
+ })
+ );
+
+ return (
+
+
+
+
+
+ {columns.map((col) => (
+ task.columnId === col.id)}
+ />
+ ))}
+
+
+
+
+
+ );
+
+ function createTask(columnId) {
+ const newTask = {
+ id: generateId(),
+ columnId,
+ content: `Task ${tasks.length + 1}`,
+ };
+
+ setTasks([...tasks, newTask]);
+ }
+
+ function deleteTask(id) {
+ const newTasks = tasks.filter((task) => task.id !== id);
+ setTasks(newTasks);
+ }
+
+ function updateTask(id, content) {
+ const newTasks = tasks.map((task) => {
+ if (task.id !== id) return task;
+ return { ...task, content };
+ });
+
+ setTasks(newTasks);
+ }
+
+ function createNewColumn() {
+ const columnToAdd = {
+ id: generateId(),
+ title: `Column ${columns.length + 1}`,
+ };
+
+ setColumns([...columns, columnToAdd]);
+ }
+
+ function deleteColumn(id) {
+ const filteredColumns = columns.filter((col) => col.id !== id);
+ setColumns(filteredColumns);
+
+ const newTasks = tasks.filter((t) => t.columnId !== id);
+ setTasks(newTasks);
+ }
+
+ function updateColumn(id, title) {
+ const newColumns = columns.map((col) => {
+ if (col.id !== id) return col;
+ return { ...col, title };
+ });
+
+ setColumns(newColumns);
+ }
+
+ function onDragStart(event) {
+ if (event.active.data.current?.type === "Column") {
+ setActiveColumn(event.active.data.current.column);
+ return;
+ }
+
+ if (event.active.data.current?.type === "Task") {
+ setActiveTask(event.active.data.current.task);
+ return;
+ }
+ }
+
+ function onDragEnd(event) {
+ setActiveColumn(null);
+ setActiveTask(null);
+
+ const { active, over } = event;
+ if (!over) return;
+
+ const activeId = active.id;
+ const overId = over.id;
+
+ if (activeId === overId) return;
+
+ const isActiveAColumn = active.data.current?.type === "Column";
+ if (!isActiveAColumn) return;
+
+ setColumns((columns) => {
+ const activeColumnIndex = columns.findIndex((col) => col.id === activeId);
+
+ const overColumnIndex = columns.findIndex((col) => col.id === overId);
+
+ return arrayMove(columns, activeColumnIndex, overColumnIndex);
+ });
+ }
+
+ function onDragOver(event) {
+ const { active, over } = event;
+ if (!over) return;
+
+ const activeId = active.id;
+ const overId = over.id;
+
+ if (activeId === overId) return;
+
+ const isActiveATask = active.data.current?.type === "Task";
+ const isOverATask = over.data.current?.type === "Task";
+
+ if (!isActiveATask) return;
+
+ if (isActiveATask && isOverATask) {
+ setTasks((tasks) => {
+ const activeIndex = tasks.findIndex((t) => t.id === activeId);
+ const overIndex = tasks.findIndex((t) => t.id === overId);
+
+ if (tasks[activeIndex].columnId !== tasks[overIndex].columnId) {
+ tasks[activeIndex].columnId = tasks[overIndex].columnId;
+ return arrayMove(tasks, activeIndex, overIndex - 1);
+ }
+
+ return arrayMove(tasks, activeIndex, overIndex);
+ });
+ }
+
+ const isOverAColumn = over.data.current?.type === "Column";
+
+ if (isActiveATask && isOverAColumn) {
+ setTasks((tasks) => {
+ const activeIndex = tasks.findIndex((t) => t.id === activeId);
+
+ tasks[activeIndex].columnId = overId;
+ return arrayMove(tasks, activeIndex, activeIndex);
+ });
+ }
+ }
+
+ function generateId() {
+ return Math.floor(Math.random() * 10001);
+ }
+}
+
+export default KanbanBoard;
diff --git a/frontend/src/components/kanbanBoard/taskCard.jsx b/frontend/src/components/kanbanBoard/taskCard.jsx
new file mode 100644
index 0000000..c6fb391
--- /dev/null
+++ b/frontend/src/components/kanbanBoard/taskCard.jsx
@@ -0,0 +1,111 @@
+import { useState } from "react";
+import TrashIcon from "../icons/trashIcon";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+function TaskCard({ task, deleteTask, updateTask }) {
+ const [mouseIsOver, setMouseIsOver] = useState(false);
+ const [editMode, setEditMode] = useState(true);
+
+ const {
+ setNodeRef,
+ attributes,
+ listeners,
+ transform,
+ transition,
+ isDragging,
+ } = useSortable({
+ id: task.id,
+ data: {
+ type: "Task",
+ task,
+ },
+ disabled: editMode,
+ });
+
+ const style = {
+ transition,
+ transform: CSS.Transform.toString(transform),
+ };
+
+ const toggleEditMode = () => {
+ setEditMode((prev) => !prev);
+ setMouseIsOver(false);
+ };
+
+ if (isDragging) {
+ return (
+
+ );
+ }
+
+ if (editMode) {
+ return (
+
+