From 5051f1f460f5d64c81f88722763a9c32f1c44860 Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Thu, 23 Nov 2023 12:39:09 +0700
Subject: [PATCH 1/6] Make Column undruggable

---
 .../kanbanBoard/columnContainer.jsx           | 93 +++++--------------
 .../kanbanBoard/columnContainerWrapper.jsx    |  6 +-
 .../components/kanbanBoard/kanbanBoard.jsx    | 92 +++++-------------
 .../components/navigations/IconSideNav.jsx    |  4 +-
 4 files changed, 47 insertions(+), 148 deletions(-)

diff --git a/frontend/src/components/kanbanBoard/columnContainer.jsx b/frontend/src/components/kanbanBoard/columnContainer.jsx
index 819a980..5b9648e 100644
--- a/frontend/src/components/kanbanBoard/columnContainer.jsx
+++ b/frontend/src/components/kanbanBoard/columnContainer.jsx
@@ -1,53 +1,31 @@
 import { SortableContext, useSortable } from "@dnd-kit/sortable";
-import { BsFillTrashFill } from "react-icons/bs";
 import { AiOutlinePlusCircle } from "react-icons/ai";
-import { CSS } from "@dnd-kit/utilities";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { TaskCard } from "./taskCard";
 
-export function ColumnContainer({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
-  const [editMode, setEditMode] = useState(false);
-
+export function ColumnContainer({ column, createTask, tasks, deleteTask, updateTask }) {
   const tasksIds = useMemo(() => {
     return tasks.map((task) => task.id);
   }, [tasks]);
 
-  const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
+  const {
+    setNodeRef: columnNodeRef,
+    attributes: columnAttributes,
+    listeners: columnListeners,
+  } = useSortable({
     id: column.id,
     data: {
       type: "Column",
       column,
     },
-    disabled: editMode,
+    disabled: true, // Disable drag for the entire column
   });
 
-  const style = {
-    transition,
-    transform: CSS.Transform.toString(transform),
-  };
-
-  if (isDragging) {
-    return (
-      <div
-        ref={setNodeRef}
-        style={style}
-        className="
-      opacity-40
-      border-2
-      border-blue-500
-      w-[350px]
-      max-h-[400px]
-      rounded-md
-      flex
-      flex-col
-      "></div>
-    );
-  }
-
   return (
     <div
-      ref={setNodeRef}
-      style={style}
+      ref={columnNodeRef}
+      {...columnAttributes}
+      {...columnListeners}
       className="
   bg-[#f1f2f4]
   w-[280px]
@@ -58,62 +36,33 @@ export function ColumnContainer({ column, deleteColumn, updateColumn, createTask
   ">
       {/* Column title */}
       <div
-        {...attributes}
-        {...listeners}
-        onClick={() => {
-          setEditMode(true);
-        }}
         className="
       ml-3
       text-md
-      cursor-grab
       font-bold
       flex
       items-center
       justify-between
       ">
-        <div className="flex gap-2">
-          {!editMode && column.title}
-          {editMode && (
-            <input
-              className="bg-gray-200 focus:border-blue-500 border rounded-md outline-none px-2"
-              value={column.title}
-              onChange={(e) => updateColumn(column.id, e.target.value)}
-              autoFocus
-              onBlur={() => {
-                setEditMode(false);
-              }}
-              onKeyDown={(e) => {
-                if (e.key !== "Enter") return;
-                setEditMode(false);
-              }}
-            />
-          )}
-        </div>
-        <button
-          onClick={() => {
-            deleteColumn(column.id);
-          }}
-          className="
-        stroke-gray-500
-        hover:stroke-white
-        hover:bg-columnBackgroundColor
-        rounded
-        px-1
-        py-2
-        ">
-          <BsFillTrashFill />
-        </button>
+        <div className="flex gap-2">{column.title}</div>
       </div>
 
       {/* Column task container */}
       <div className="flex flex-grow flex-col gap-2 p-1 overflow-x-hidden overflow-y-auto">
         <SortableContext items={tasksIds}>
           {tasks.map((task) => (
-            <TaskCard key={task.id} task={task} deleteTask={deleteTask} updateTask={updateTask} />
+            <TaskCard
+              key={task.id}
+              task={task}
+              deleteTask={deleteTask}
+              updateTask={updateTask}
+              // Adjust the useSortable hook for tasks
+              useSortable={(props) => useSortable({ ...props, disabled: false })}
+            />
           ))}
         </SortableContext>
       </div>
+
       {/* Column footer */}
       <button
         className="flex gap-2 items-center rounded-md p-2 my-2 hover:bg-zinc-200 active:bg-zinc-400"
diff --git a/frontend/src/components/kanbanBoard/columnContainerWrapper.jsx b/frontend/src/components/kanbanBoard/columnContainerWrapper.jsx
index b14adb1..40d90af 100644
--- a/frontend/src/components/kanbanBoard/columnContainerWrapper.jsx
+++ b/frontend/src/components/kanbanBoard/columnContainerWrapper.jsx
@@ -1,12 +1,10 @@
 import { ColumnContainer } from "./columnContainer";
 
-export function ColumnContainerCard({ column, deleteColumn, updateColumn, createTask, tasks, deleteTask, updateTask }) {
+export function ColumnContainerCard({ column, createTask, tasks, deleteTask, updateTask }) {
   return (
-    <div className="card bg-[#f1f2f4] shadow p-1 my-2 border-2">
+    <div className="card bg-[#f1f2f4] shadow border p-1 my-2">
       <ColumnContainer
         column={column}
-        deleteColumn={deleteColumn}
-        updateColumn={updateColumn}
         createTask={createTask}
         tasks={tasks}
         deleteTask={deleteTask}
diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
index a91b2db..69cf2f4 100644
--- a/frontend/src/components/kanbanBoard/kanbanBoard.jsx
+++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
@@ -10,7 +10,7 @@ export function KanbanBoard() {
   const [columns, setColumns] = useState([]);
   const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
   const [boardId, setBoardData] = useState();
-
+  const [isLoading, setLoading] = useState(false);
   const [tasks, setTasks] = useState([]);
 
   const [activeColumn, setActiveColumn] = useState(null);
@@ -74,13 +74,16 @@ export function KanbanBoard() {
   useEffect(() => {
     const fetchBoardData = async () => {
       try {
+        setLoading(true);
         const response = await axiosInstance.get("boards/");
         if (response.data && response.data.length > 0) {
           setBoardData(response.data[0]);
         }
       } catch (error) {
         console.error("Error fetching board data:", error);
+        setLoading(false);
       }
+      setLoading(false);
     };
     fetchBoardData();
   }, []);
@@ -92,26 +95,29 @@ export function KanbanBoard() {
       flex
       w-full
       items-center
+      justify-center
       overflow-x-auto
       overflow-y-hidden
   ">
       <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd} onDragOver={onDragOver}>
-        <div className="ml-2 flex gap-4">
+        <div className="flex gap-4">
           <div className="flex gap-4">
-            <SortableContext items={columnsId}>
-              {columns.map((col) => (
-                <ColumnContainerCard
-                  key={col.id}
-                  column={col}
-                  deleteColumn={deleteColumn}
-                  updateColumn={updateColumn}
-                  createTask={createTask}
-                  deleteTask={deleteTask}
-                  updateTask={updateTask}
-                  tasks={tasks.filter((task) => task.columnId === col.id)}
-                />
-              ))}
-            </SortableContext>
+            {!isLoading ? (
+              <SortableContext items={columnsId}>
+                {columns.map((col) => (
+                  <ColumnContainerCard
+                    key={col.id}
+                    column={col}
+                    createTask={createTask}
+                    deleteTask={deleteTask}
+                    updateTask={updateTask}
+                    tasks={tasks.filter((task) => task.columnId === col.id)}
+                  />
+                ))}{" "}
+              </SortableContext>
+            ) : (
+              <span className="loading loading-dots loading-lg"></span>
+            )}
           </div>
         </div>
 
@@ -120,8 +126,6 @@ export function KanbanBoard() {
             {activeColumn && (
               <ColumnContainerCard
                 column={activeColumn}
-                deleteColumn={deleteColumn}
-                updateColumn={updateColumn}
                 createTask={createTask}
                 deleteTask={deleteTask}
                 updateTask={updateTask}
@@ -187,58 +191,6 @@ export function KanbanBoard() {
     setTasks(newTasks);
   }
 
-  function createNewColumn() {
-    axiosInstance
-      .post("lists/", { name: `Column ${columns.length + 1}`, position: 1, board: boardId.id })
-      .then((response) => {
-        const newColumn = {
-          id: response.data.id,
-          title: response.data.name,
-        };
-
-        setColumns((prevColumns) => [...prevColumns, newColumn]);
-      })
-      .catch((error) => {
-        console.error("Error creating ListBoard:", error);
-      });
-  }
-
-  function deleteColumn(id) {
-    axiosInstance
-      .delete(`lists/${id}/`)
-      .then((response) => {
-        setColumns((prevColumns) => prevColumns.filter((col) => col.id !== id));
-      })
-      .catch((error) => {
-        console.error("Error deleting ListBoard:", error);
-      });
-
-    const tasksToDelete = tasks.filter((t) => t.columnId === id);
-
-    tasksToDelete.forEach((task) => {
-      axiosInstance
-        .delete(`todo/${task.id}/`)
-        .then((response) => {
-          setTasks((prevTasks) => prevTasks.filter((t) => t.id !== task.id));
-        })
-        .catch((error) => {
-          console.error("Error deleting Task:", error);
-        });
-    });
-  }
-
-  function updateColumn(id, title) {
-    // Update the column
-    axiosInstance
-      .patch(`lists/${id}/`, { name: title }) // Adjust the payload based on your API requirements
-      .then((response) => {
-        setColumns((prevColumns) => prevColumns.map((col) => (col.id === id ? { ...col, title } : col)));
-      })
-      .catch((error) => {
-        console.error("Error updating ListBoard:", error);
-      });
-  }
-
   function onDragStart(event) {
     if (event.active.data.current?.type === "Column") {
       setActiveColumn(event.active.data.current.column);
diff --git a/frontend/src/components/navigations/IconSideNav.jsx b/frontend/src/components/navigations/IconSideNav.jsx
index 02cc1a0..c5d1708 100644
--- a/frontend/src/components/navigations/IconSideNav.jsx
+++ b/frontend/src/components/navigations/IconSideNav.jsx
@@ -32,12 +32,12 @@ export const SideNav = () => {
   );
 };
 
-const NavItem = ({ icon, selected, id, setSelected, logo, path }) => {
+const NavItem = ({ icon, selected, id, setSelected, path }) => {
   const navigate = useNavigate();
 
   return (
     <motion.button
-      className="p-3 text-xl bg-slate-800 hover-bg-slate-700 rounded-md transition-colors relative"
+      className="p-3 text-xl text-white bg-slate-800 hover-bg-slate-700 rounded-md transition-colors relative"
       onClick={() => {
         setSelected(id);
         navigate(path);

From fd052fb613a610653abdc6ef3217d38df6e21c25 Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Thu, 23 Nov 2023 13:14:24 +0700
Subject: [PATCH 2/6] Completely remove drag functionality of column

---
 .../kanbanBoard/columnContainer.jsx           |  21 +--
 .../components/kanbanBoard/kanbanBoard.jsx    | 177 +++++++++---------
 2 files changed, 93 insertions(+), 105 deletions(-)

diff --git a/frontend/src/components/kanbanBoard/columnContainer.jsx b/frontend/src/components/kanbanBoard/columnContainer.jsx
index 5b9648e..d6f4565 100644
--- a/frontend/src/components/kanbanBoard/columnContainer.jsx
+++ b/frontend/src/components/kanbanBoard/columnContainer.jsx
@@ -4,28 +4,13 @@ import { useMemo } from "react";
 import { TaskCard } from "./taskCard";
 
 export function ColumnContainer({ column, createTask, tasks, deleteTask, updateTask }) {
+  // Memoize task IDs to prevent unnecessary recalculations
   const tasksIds = useMemo(() => {
     return tasks.map((task) => task.id);
   }, [tasks]);
 
-  const {
-    setNodeRef: columnNodeRef,
-    attributes: columnAttributes,
-    listeners: columnListeners,
-  } = useSortable({
-    id: column.id,
-    data: {
-      type: "Column",
-      column,
-    },
-    disabled: true, // Disable drag for the entire column
-  });
-
   return (
     <div
-      ref={columnNodeRef}
-      {...columnAttributes}
-      {...columnListeners}
       className="
   bg-[#f1f2f4]
   w-[280px]
@@ -49,14 +34,16 @@ export function ColumnContainer({ column, createTask, tasks, deleteTask, updateT
 
       {/* Column task container */}
       <div className="flex flex-grow flex-col gap-2 p-1 overflow-x-hidden overflow-y-auto">
+        {/* Provide a SortableContext for the tasks within the column */}
         <SortableContext items={tasksIds}>
+          {/* Render TaskCard for each task in the column */}
           {tasks.map((task) => (
             <TaskCard
               key={task.id}
               task={task}
               deleteTask={deleteTask}
               updateTask={updateTask}
-              // Adjust the useSortable hook for tasks
+              // Adjust the useSortable hook for tasks to enable dragging
               useSortable={(props) => useSortable({ ...props, disabled: false })}
             />
           ))}
diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
index 69cf2f4..ca393c5 100644
--- a/frontend/src/components/kanbanBoard/kanbanBoard.jsx
+++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
@@ -8,14 +8,13 @@ import { axiosInstance } from "src/api/AxiosConfig";
 
 export function KanbanBoard() {
   const [columns, setColumns] = useState([]);
-  const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
   const [boardId, setBoardData] = useState();
   const [isLoading, setLoading] = useState(false);
   const [tasks, setTasks] = useState([]);
-
-  const [activeColumn, setActiveColumn] = useState(null);
-
   const [activeTask, setActiveTask] = useState(null);
+  const columnsId = useMemo(() => columns.map((col) => col.id), [columns]);
+
+  // ---------------- END STATE INITIATE ----------------
 
   const sensors = useSensors(
     useSensor(PointerSensor, {
@@ -25,6 +24,76 @@ export function KanbanBoard() {
     })
   );
 
+  // ---------------- Task Handlers ----------------
+  const handleTaskUpdate = (tasks, setTasks, updatedTask) => {
+    const updatedTasks = tasks.map((task) => (task.id === updatedTask.id ? updatedTask : task));
+    setTasks(updatedTasks);
+  };
+
+  const handleApiError = (error, action) => {
+    console.error(`Error ${action}:`, error);
+  };
+
+  const createTask = async (columnId, setTasks) => {
+    try {
+      const response = await axiosInstance.post("todo/", {
+        title: `Task ${tasks.length + 1}`,
+        importance: 1,
+        difficulty: 1,
+        challenge: false,
+        fromSystem: false,
+        is_active: false,
+        is_full_day_event: false,
+        completed: false,
+        priority: 1,
+        list_board: columnId,
+      });
+
+      const newTask = {
+        id: response.data.id,
+        columnId,
+        content: response.data.title,
+      };
+
+      setTasks((tasks) => [...tasks, newTask]);
+    } catch (error) {
+      handleApiError(error, "creating task");
+    }
+  };
+
+  const deleteTask = async (id, tasks, setTasks) => {
+    try {
+      await axiosInstance.delete(`todo/${id}/`);
+      const newTasks = tasks.filter((task) => task.id !== id);
+      setTasks(newTasks);
+    } catch (error) {
+      handleApiError(error, "deleting task");
+    }
+  };
+
+  const updateTask = async (id, content, tasks, setTasks) => {
+    try {
+      if (content === "") {
+        await deleteTask(id, tasks, setTasks);
+      } else {
+        const response = await axiosInstance.put(`todo/${id}/`, { content });
+
+        const updatedTask = {
+          id,
+          columnId: response.data.list_board,
+          content: response.data.title,
+        };
+
+        handleTaskUpdate(tasks, setTasks, updatedTask);
+      }
+    } catch (error) {
+      handleApiError(error, "updating task");
+    }
+  };
+
+  // ---------------- END Task Handlers ----------------
+
+  // ---------------- Fetch Data ----------------
   useEffect(() => {
     const fetchData = async () => {
       try {
@@ -88,6 +157,8 @@ export function KanbanBoard() {
     fetchBoardData();
   }, []);
 
+  // ---------------- END Fetch Data ----------------
+
   return (
     <div
       className="
@@ -123,15 +194,6 @@ export function KanbanBoard() {
 
         {createPortal(
           <DragOverlay className="bg-white" dropAnimation={null} zIndex={20}>
-            {activeColumn && (
-              <ColumnContainerCard
-                column={activeColumn}
-                createTask={createTask}
-                deleteTask={deleteTask}
-                updateTask={updateTask}
-                tasks={tasks.filter((task) => task.columnId === activeColumn.id)}
-              />
-            )}
             {activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />}
           </DragOverlay>,
           document.body
@@ -140,97 +202,31 @@ export function KanbanBoard() {
     </div>
   );
 
-  function createTask(columnId, setTasks) {
-    const newTaskData = {
-      title: `Task ${tasks.length + 1}`,
-      importance: 1,
-      difficulty: 1,
-      challenge: false,
-      fromSystem: false,
-      is_active: false,
-      is_full_day_event: false,
-      completed: false,
-      priority: 1,
-      list_board: columnId,
-    };
-
-    axiosInstance
-      .post("todo/", newTaskData)
-      .then((response) => {
-        const newTask = {
-          id: response.data.id,
-          columnId,
-          content: response.data.title,
-        };
-      })
-      .catch((error) => {
-        console.error("Error creating task:", error);
-      });
-    setTasks((tasks) => [...tasks, newTask]);
-  }
-
-  function deleteTask(id) {
-    const newTasks = tasks.filter((task) => task.id !== id);
-    axiosInstance
-      .delete(`todo/${id}/`)
-      .then((response) => {
-        setTasks(newTasks);
-      })
-      .catch((error) => {
-        console.error("Error deleting Task:", error);
-      });
-    setTasks(newTasks);
-  }
-
-  function updateTask(id, content) {
-    const newTasks = tasks.map((task) => {
-      if (task.id !== id) return task;
-      return { ...task, content };
-    });
-    if (content === "") return deleteTask(id);
-    setTasks(newTasks);
-  }
-
+  // Handle the start of a drag event
   function onDragStart(event) {
-    if (event.active.data.current?.type === "Column") {
-      setActiveColumn(event.active.data.current.column);
-      return;
-    }
-
+    // Check if the dragged item is a Task
     if (event.active.data.current?.type === "Task") {
       setActiveTask(event.active.data.current.task);
       return;
     }
   }
 
+  // Handle the end of a drag event
   function onDragEnd(event) {
-    setActiveColumn(null);
+    // Reset active column and task after the drag ends
     setActiveTask(null);
 
     const { active, over } = event;
-    if (!over) return;
+    if (!over) return; // If not dropped over anything, exit
 
     const activeId = active.id;
     const overId = over.id;
 
-    const isActiveAColumn = active.data.current?.type === "Column";
     const isActiveATask = active.data.current?.type === "Task";
     const isOverAColumn = over.data.current?.type === "Column";
     const isOverATask = over.data.current?.type === "Task";
 
-    // Reorder columns if the dragged item is a column
-    if (isActiveAColumn && isOverAColumn) {
-      setColumns((columns) => {
-        const activeColumnIndex = columns.findIndex((col) => col.id === activeId);
-        const overColumnIndex = columns.findIndex((col) => col.id === overId);
-
-        const reorderedColumns = arrayMove(columns, activeColumnIndex, overColumnIndex);
-
-        return reorderedColumns;
-      });
-    }
-
-    // Reorder tasks within the same column
+    // Reorder logic for Tasks within the same column
     if (isActiveATask && isOverATask) {
       setTasks((tasks) => {
         const activeIndex = tasks.findIndex((t) => t.id === activeId);
@@ -249,6 +245,7 @@ export function KanbanBoard() {
 
         tasks[activeIndex].columnId = overId;
 
+        // API call to update task's columnId
         axiosInstance
           .put(`todo/change_task_list_board/`, { todo_id: activeId, new_list_board_id: overId, new_index: 0 })
           .then((response) => {})
@@ -261,25 +258,28 @@ export function KanbanBoard() {
     }
   }
 
+  // Handle the drag-over event
   function onDragOver(event) {
     const { active, over } = event;
-    if (!over) return;
+    if (!over) return; // If not over anything, exit
 
     const activeId = active.id;
     const overId = over.id;
 
-    if (activeId === overId) return;
+    if (activeId === overId) return; // If over the same element, exit
 
     const isActiveATask = active.data.current?.type === "Task";
     const isOverATask = over.data.current?.type === "Task";
 
-    if (!isActiveATask) return;
+    if (!isActiveATask) return; // If not dragging a Task, exit
 
+    // Reorder logic for Tasks within the same column
     if (isActiveATask && isOverATask) {
       setTasks((tasks) => {
         const activeIndex = tasks.findIndex((t) => t.id === activeId);
         const overIndex = tasks.findIndex((t) => t.id === overId);
 
+        // If moving to a different column, update columnId
         if (tasks[activeIndex].columnId !== tasks[overIndex].columnId) {
           tasks[activeIndex].columnId = tasks[overIndex].columnId;
           return arrayMove(tasks, activeIndex, overIndex - 1);
@@ -291,6 +291,7 @@ export function KanbanBoard() {
 
     const isOverAColumn = over.data.current?.type === "Column";
 
+    // Move the Task to a different column and update columnId
     if (isActiveATask && isOverAColumn) {
       setTasks((tasks) => {
         const activeIndex = tasks.findIndex((t) => t.id === activeId);

From aa00fc1cb8cbe7f540bd1679343b09b2edf1d995 Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Thu, 23 Nov 2023 13:33:02 +0700
Subject: [PATCH 3/6] Create 4 default board for all users

---
 backend/boards/signals.py | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/backend/boards/signals.py b/backend/boards/signals.py
index c416de9..2c44daa 100644
--- a/backend/boards/signals.py
+++ b/backend/boards/signals.py
@@ -8,8 +8,10 @@ from users.models import CustomUser
 def create_default_board(sender, instance, created, **kwargs):
     """Signal handler to automatically create a default Board for a user upon creation."""
     if created:
-        board = Board.objects.create(user=instance, name="My Default Board")
-
-        ListBoard.objects.create(board=board, name="Todo", position=1)
-        ListBoard.objects.create(board=board, name="In Progress", position=2)
-        ListBoard.objects.create(board=board, name="Done", position=3)
\ No newline at end of file
+        # Create unique board by user id
+        user_id = instance.id
+        board = Board.objects.create(user=instance, name=f"Board of #{user_id}")
+        ListBoard.objects.create(board=board, name="Backlog", position=1)
+        ListBoard.objects.create(board=board, name="Doing", position=2)
+        ListBoard.objects.create(board=board, name="Review", position=3)
+        ListBoard.objects.create(board=board, name="Done", position=4)
\ No newline at end of file

From fc817d96775ebe11bf246721dbf7c87fc8a90c67 Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Thu, 23 Nov 2023 13:55:19 +0700
Subject: [PATCH 4/6] Remove footer in kanban + remove import function to
 function (setTask))

---
 .../components/kanbanBoard/kanbanBoard.jsx    | 19 +++++++++++++------
 .../src/components/kanbanBoard/kanbanPage.jsx |  1 -
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
index ca393c5..2e79835 100644
--- a/frontend/src/components/kanbanBoard/kanbanBoard.jsx
+++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
@@ -7,6 +7,7 @@ import { TaskCard } from "./taskCard";
 import { axiosInstance } from "src/api/AxiosConfig";
 
 export function KanbanBoard() {
+  const [refreshKey, setRefreshKey] = useState(0);
   const [columns, setColumns] = useState([]);
   const [boardId, setBoardData] = useState();
   const [isLoading, setLoading] = useState(false);
@@ -16,6 +17,10 @@ export function KanbanBoard() {
 
   // ---------------- END STATE INITIATE ----------------
 
+  const refreshSortableContext = () => {
+    setRefreshKey((prevKey) => prevKey + 1);
+  };
+
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -25,7 +30,7 @@ export function KanbanBoard() {
   );
 
   // ---------------- Task Handlers ----------------
-  const handleTaskUpdate = (tasks, setTasks, updatedTask) => {
+  const handleTaskUpdate = (tasks, updatedTask) => {
     const updatedTasks = tasks.map((task) => (task.id === updatedTask.id ? updatedTask : task));
     setTasks(updatedTasks);
   };
@@ -34,7 +39,7 @@ export function KanbanBoard() {
     console.error(`Error ${action}:`, error);
   };
 
-  const createTask = async (columnId, setTasks) => {
+  const createTask = async (columnId) => {
     try {
       const response = await axiosInstance.post("todo/", {
         title: `Task ${tasks.length + 1}`,
@@ -55,13 +60,14 @@ export function KanbanBoard() {
         content: response.data.title,
       };
 
-      setTasks((tasks) => [...tasks, newTask]);
+      setTasks((prevTasks) => [...prevTasks, newTask]);
+      refreshSortableContext();
     } catch (error) {
       handleApiError(error, "creating task");
     }
   };
 
-  const deleteTask = async (id, tasks, setTasks) => {
+  const deleteTask = async (id, tasks) => {
     try {
       await axiosInstance.delete(`todo/${id}/`);
       const newTasks = tasks.filter((task) => task.id !== id);
@@ -71,7 +77,7 @@ export function KanbanBoard() {
     }
   };
 
-  const updateTask = async (id, content, tasks, setTasks) => {
+  const updateTask = async (id, content, tasks) => {
     try {
       if (content === "") {
         await deleteTask(id, tasks, setTasks);
@@ -84,7 +90,7 @@ export function KanbanBoard() {
           content: response.data.title,
         };
 
-        handleTaskUpdate(tasks, setTasks, updatedTask);
+        handleTaskUpdate(tasks, updatedTask);
       }
     } catch (error) {
       handleApiError(error, "updating task");
@@ -194,6 +200,7 @@ export function KanbanBoard() {
 
         {createPortal(
           <DragOverlay className="bg-white" dropAnimation={null} zIndex={20}>
+            {/* Render the active task as a draggable overlay */}
             {activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />}
           </DragOverlay>,
           document.body
diff --git a/frontend/src/components/kanbanBoard/kanbanPage.jsx b/frontend/src/components/kanbanBoard/kanbanPage.jsx
index 9225ae7..399bfc3 100644
--- a/frontend/src/components/kanbanBoard/kanbanPage.jsx
+++ b/frontend/src/components/kanbanBoard/kanbanPage.jsx
@@ -29,7 +29,6 @@ export const KanbanPage = () => {
         </div>
       </div>
       <KanbanBoard />
-      <div className="flex justify-center border-2 "></div>
     </div>
   );
 };

From d827f5b8a2857098c513360eca5890ee381fa096 Mon Sep 17 00:00:00 2001
From: Pattadon <pattadon2546pn@gmail.com>
Date: Thu, 23 Nov 2023 14:40:47 +0700
Subject: [PATCH 5/6] Refactor login and signup pages, add floating particles
 component

---
 frontend/src/components/FlaotingParticles.jsx |  9 +------
 .../components/authentication/LoginPage.jsx   | 27 +++++++++++++------
 .../components/authentication/SignUpPage.jsx  | 14 +++++++---
 .../components/landingPage/LandingPage.jsx    | 17 +++++++-----
 4 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/FlaotingParticles.jsx b/frontend/src/components/FlaotingParticles.jsx
index c6d103a..e621f55 100644
--- a/frontend/src/components/FlaotingParticles.jsx
+++ b/frontend/src/components/FlaotingParticles.jsx
@@ -8,14 +8,7 @@ export function FloatingParticles() {
   }, []);
 
   return (
-    <div
-      style={{
-        position: "absolute",
-        width: "100%",
-        height: "100vh",
-        zIndex: 0,
-        backgroundColor: "#EBF2FA",
-      }}>
+    <div style={{ width: "0%", height: "100vh" }}>
       <Particles
         id="particles"
         init={particlesInit}
diff --git a/frontend/src/components/authentication/LoginPage.jsx b/frontend/src/components/authentication/LoginPage.jsx
index 3b306a2..28dd0a1 100644
--- a/frontend/src/components/authentication/LoginPage.jsx
+++ b/frontend/src/components/authentication/LoginPage.jsx
@@ -65,8 +65,15 @@ export function LoginPage() {
 
   return (
     <div>
-      <NavPreLogin text="Don't have account?" btn_text="Sign Up" link="/signup" />
-      <div className="flex flex-row bg-neutral-400">
+      <NavPreLogin
+        text="Don't have account?"
+        btn_text="Sign Up"
+        link="/signup"
+      />
+      <div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
+        {/* Particles Container */}
+
+        <FloatingParticles />
         {/* Login Box */}
         <div className="flex items-center justify-center flex-1 z-50">
           <div className="w-100 bg-white border-solid rounded-lg p-8 shadow space-y-4">
@@ -78,7 +85,8 @@ export function LoginPage() {
                   xmlns="http://www.w3.org/2000/svg"
                   className="stroke-current shrink-0 h-6 w-6"
                   fill="none"
-                  viewBox="0 0 24 24">
+                  viewBox="0 0 24 24"
+                >
                   <path
                     strokeLinecap="round"
                     strokeLinejoin="round"
@@ -122,20 +130,23 @@ export function LoginPage() {
               />
             </div>
             {/* Login Button */}
-            <button className="btn bg-blue-700 hover:bg-blue-900 w-full text-white font-bold" onClick={handleSubmit}>
+            <button
+              className="btn bg-blue-700 hover:bg-blue-900 w-full text-white font-bold"
+              onClick={handleSubmit}
+            >
               Login
             </button>
             <div className="divider">OR</div>
             {/* Login with Google Button */}
-            <button className="btn bg-gray-200 btn-outline w-full " onClick={() => googleLoginImplicit()}>
+            <button
+              className="btn bg-gray-200 btn-outline w-full "
+              onClick={() => googleLoginImplicit()}
+            >
               <FcGoogle className="rounded-full bg-white" />
               Login with Google
             </button>
           </div>
         </div>
-        <div className="basis-1/2 bg-#ebf2fa h-screen z-0">
-          <FloatingParticles />
-        </div>
       </div>
     </div>
   );
diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx
index 08628e8..0492412 100644
--- a/frontend/src/components/authentication/SignUpPage.jsx
+++ b/frontend/src/components/authentication/SignUpPage.jsx
@@ -5,6 +5,7 @@ import { useGoogleLogin } from "@react-oauth/google";
 import { NavPreLogin } from "../navigations/NavPreLogin";
 import { useAuth } from "src/hooks/AuthHooks";
 import { createUser, googleLogin } from "src/api/AuthenticationApi";
+import { FloatingParticles } from "../FlaotingParticles";
 
 export function SignUp() {
   const Navigate = useNavigate();
@@ -76,9 +77,13 @@ export function SignUp() {
 
   return (
     <div>
-      <NavPreLogin text="Already have an account?" btn_text="Log In" link="/login" />
+      <NavPreLogin
+        text="Already have an account?"
+        btn_text="Log In"
+        link="/login"
+      />
       <div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
-        {/* ... (other code) */}
+        <FloatingParticles />
         <div className="w-1/4 h-1 flex items-center justify-center z-10">
           <div className="w-96 bg-white rounded-lg p-8 space-y-4 z-10">
             {/* Register Form */}
@@ -136,7 +141,10 @@ export function SignUp() {
             </button>
             <div className="divider">OR</div>
             {/* Login with Google Button */}
-            <button className="btn btn-outline btn-secondary w-full " onClick={() => googleLoginImplicit()}>
+            <button
+              className="btn btn-outline btn-secondary w-full "
+              onClick={() => googleLoginImplicit()}
+            >
               <FcGoogle className="rounded-full bg-white" />
               Login with Google
             </button>
diff --git a/frontend/src/components/landingPage/LandingPage.jsx b/frontend/src/components/landingPage/LandingPage.jsx
index e26a44a..1b0bd9e 100644
--- a/frontend/src/components/landingPage/LandingPage.jsx
+++ b/frontend/src/components/landingPage/LandingPage.jsx
@@ -2,13 +2,10 @@ import { FloatingParticles } from "../FlaotingParticles";
 
 export function LandingPage() {
   return (
-    <div>
+    <div className="h-screen flex items-center justify-center bg-gradient-to-r from-zinc-100 via-gray-200 to-zinc-100">
       {/* Particles Container */}
       <FloatingParticles />
       {/* Navbar */}
-      <div className="navbar bg-white z-10">
-        <div className="navbar-end space-x-3 z-10"></div>
-      </div>
       <div className="relative" id="home">
         <div className="max-w-7xl mx-auto px-6 md:px-12 xl:px-6">
           <div className="relative pt-36 ml-auto">
@@ -24,12 +21,18 @@ export function LandingPage() {
                   </label>
                 </span>
               </h1>
-              <p className="mt-8 text-#143D6C">Unleash productivity with our personal task and project management.</p>
+              <p className="mt-8 text-#143D6C">
+                Unleash productivity with our personal task and project
+                management.
+              </p>
               <div className="mt-8 flex flex-wrap justify-center gap-y-4 gap-x-6">
                 <a
                   href="/login"
-                  className="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max">
-                  <span className="relative text-base font-semibold text-white">Get started</span>
+                  className="relative flex h-11 w-full items-center justify-center px-6 before:absolute before:inset-0 before:rounded-full before:bg-primary before:transition before:duration-300 hover:before:scale-105 active:duration-75 active:before:scale-95 sm:w-max"
+                >
+                  <span className="relative text-base font-semibold text-white">
+                    Get started
+                  </span>
                 </a>
               </div>
             </div>

From e83e58db0740e9c18af52c2bde982c1fa31f22df Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Thu, 23 Nov 2023 16:12:50 +0700
Subject: [PATCH 6/6] Make Kanban More responsive, auto add task for new user

---
 backend/tasks/signals.py                      | 66 ++++++++++++++++---
 .../components/authentication/SignUpPage.jsx  |  2 +
 .../components/kanbanBoard/kanbanBoard.jsx    | 20 ++----
 3 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/backend/tasks/signals.py b/backend/tasks/signals.py
index 063292e..4c9e6f2 100644
--- a/backend/tasks/signals.py
+++ b/backend/tasks/signals.py
@@ -27,15 +27,63 @@ def update_priority(sender, instance, **kwargs):
         instance.priority = Todo.EisenhowerMatrix.NOT_IMPORTANT_NOT_URGENT
 
 
-@receiver(post_save, sender=Todo)
-def assign_todo_to_listboard(sender, instance, created, **kwargs):
-    """Signal handler to automatically assign a Todo to the first ListBoard in the user's Board upon creation."""
+# @receiver(post_save, sender=Todo)
+# def assign_todo_to_listboard(sender, instance, created, **kwargs):
+#     """Signal handler to automatically assign a Todo to the first ListBoard in the user's Board upon creation."""
+#     if created:
+#         user_board = instance.user.board_set.first()
+
+#         if user_board:
+#             first_list_board = user_board.listboard_set.order_by('position').first()
+
+#             if first_list_board:
+#                 instance.list_board = first_list_board
+#                 instance.save()
+
+
+@receiver(post_save, sender=ListBoard)
+def create_placeholder_tasks(sender, instance, created, **kwargs):
+    """
+    Signal handler to create placeholder tasks for each ListBoard.
+    """
     if created:
-        user_board = instance.user.board_set.first()
+        list_board_position = instance.position
 
-        if user_board:
-            first_list_board = user_board.listboard_set.order_by('position').first()
+        if list_board_position == 1:
+            placeholder_tasks = [
+                {"title": "Normal Task Example"},
+                {"title": "Task with Extra Information Example", "description": "Description for Task 2"},
+            ]
+        elif list_board_position == 2:
+            placeholder_tasks = [
+                {"title": "Time Task Example #1", "description": "Description for Task 2",
+                 "start_event": timezone.now(), "end_event": timezone.now() + timezone.timedelta(days=5)},
+            ]
+        elif list_board_position == 3:
+            placeholder_tasks = [
+                {"title": "Time Task Example #2", "description": "Description for Task 2",
+                 "start_event": timezone.now(), "end_event": timezone.now() + timezone.timedelta(days=30)},
+            ]
+        elif list_board_position == 4:
+            placeholder_tasks = [
+                {"title": "Completed Task Example", "description": "Description for Task 2",
+                 "start_event": timezone.now(), "completed": True},
+            ]
+        else:
+            placeholder_tasks = [
+                {"title": "Default Task Example"},
+            ]
 
-            if first_list_board:
-                instance.list_board = first_list_board
-                instance.save()
\ No newline at end of file
+        for task_data in placeholder_tasks:
+            Todo.objects.create(
+                list_board=instance,
+                user=instance.board.user,
+                title=task_data["title"],
+                notes=task_data.get("description", ""),
+                is_active=True,
+                start_event=task_data.get("start_event"),
+                end_event=task_data.get("end_event"),
+                completed=task_data.get("completed", False),
+                creation_date=timezone.now(),
+                last_update=timezone.now(),
+            )
\ No newline at end of file
diff --git a/frontend/src/components/authentication/SignUpPage.jsx b/frontend/src/components/authentication/SignUpPage.jsx
index 08628e8..b0fdc60 100644
--- a/frontend/src/components/authentication/SignUpPage.jsx
+++ b/frontend/src/components/authentication/SignUpPage.jsx
@@ -55,6 +55,8 @@ export function SignUp() {
   const googleLoginImplicit = useGoogleLogin({
     flow: "auth-code",
     redirect_uri: "postmessage",
+    scope:
+      "https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/calendar.acls.readonly https://www.googleapis.com/auth/calendar.events.readonly",
     onSuccess: async (response) => {
       try {
         const loginResponse = await googleLogin(response.code);
diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
index 2e79835..b79cf50 100644
--- a/frontend/src/components/kanbanBoard/kanbanBoard.jsx
+++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
@@ -7,7 +7,6 @@ import { TaskCard } from "./taskCard";
 import { axiosInstance } from "src/api/AxiosConfig";
 
 export function KanbanBoard() {
-  const [refreshKey, setRefreshKey] = useState(0);
   const [columns, setColumns] = useState([]);
   const [boardId, setBoardData] = useState();
   const [isLoading, setLoading] = useState(false);
@@ -17,10 +16,6 @@ export function KanbanBoard() {
 
   // ---------------- END STATE INITIATE ----------------
 
-  const refreshSortableContext = () => {
-    setRefreshKey((prevKey) => prevKey + 1);
-  };
-
   const sensors = useSensors(
     useSensor(PointerSensor, {
       activationConstraint: {
@@ -42,7 +37,7 @@ export function KanbanBoard() {
   const createTask = async (columnId) => {
     try {
       const response = await axiosInstance.post("todo/", {
-        title: `Task ${tasks.length + 1}`,
+        title: `New Task`,
         importance: 1,
         difficulty: 1,
         challenge: false,
@@ -53,7 +48,6 @@ export function KanbanBoard() {
         priority: 1,
         list_board: columnId,
       });
-
       const newTask = {
         id: response.data.id,
         columnId,
@@ -61,13 +55,12 @@ export function KanbanBoard() {
       };
 
       setTasks((prevTasks) => [...prevTasks, newTask]);
-      refreshSortableContext();
     } catch (error) {
       handleApiError(error, "creating task");
     }
   };
 
-  const deleteTask = async (id, tasks) => {
+  const deleteTask = async (id) => {
     try {
       await axiosInstance.delete(`todo/${id}/`);
       const newTasks = tasks.filter((task) => task.id !== id);
@@ -80,7 +73,7 @@ export function KanbanBoard() {
   const updateTask = async (id, content, tasks) => {
     try {
       if (content === "") {
-        await deleteTask(id, tasks, setTasks);
+        await deleteTask(id);
       } else {
         const response = await axiosInstance.put(`todo/${id}/`, { content });
 
@@ -188,7 +181,7 @@ export function KanbanBoard() {
                     createTask={createTask}
                     deleteTask={deleteTask}
                     updateTask={updateTask}
-                    tasks={tasks.filter((task) => task.columnId === col.id)}
+                    tasks={(tasks || []).filter((task) => task.columnId === col.id)}
                   />
                 ))}{" "}
               </SortableContext>
@@ -201,7 +194,7 @@ export function KanbanBoard() {
         {createPortal(
           <DragOverlay className="bg-white" dropAnimation={null} zIndex={20}>
             {/* Render the active task as a draggable overlay */}
-            {activeTask && <TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />}
+            <TaskCard task={activeTask} deleteTask={deleteTask} updateTask={updateTask} />
           </DragOverlay>,
           document.body
         )}
@@ -297,9 +290,8 @@ export function KanbanBoard() {
     }
 
     const isOverAColumn = over.data.current?.type === "Column";
-
     // Move the Task to a different column and update columnId
-    if (isActiveATask && isOverAColumn) {
+    if (isActiveATask && isOverAColumn && tasks.some((task) => task.columnId !== overId)) {
       setTasks((tasks) => {
         const activeIndex = tasks.findIndex((t) => t.id === activeId);