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/7] 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/7] 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/7] 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/7] 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 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 5/7] 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);
 

From 3801a6446c49c141733c8d25f8602b830d339a90 Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Thu, 23 Nov 2023 21:52:12 +0700
Subject: [PATCH 6/7] Board and list retrieve need authentication

---
 backend/boards/views.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/backend/boards/views.py b/backend/boards/views.py
index 8b3fd47..d405c87 100644
--- a/backend/boards/views.py
+++ b/backend/boards/views.py
@@ -1,11 +1,13 @@
 from rest_framework import viewsets
 from rest_framework.response import Response
 from rest_framework import status
+from rest_framework.permissions import IsAuthenticated
 
 from boards.models import Board, ListBoard
 from boards.serializers import BoardSerializer, ListBoardSerializer
 
 class BoardViewSet(viewsets.ModelViewSet):
+    permission_classes = (IsAuthenticated,)
     queryset = Board.objects.all()
     serializer_class = BoardSerializer
     http_method_names = ['get']
@@ -16,6 +18,7 @@ class BoardViewSet(viewsets.ModelViewSet):
 
 
 class ListBoardViewSet(viewsets.ModelViewSet):
+    permission_classes = (IsAuthenticated,)
     serializer_class = ListBoardSerializer
 
     def get_queryset(self):

From 128e8a1ea6d78c6d3438541953f74a71c95428f3 Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Thu, 23 Nov 2023 21:52:56 +0700
Subject: [PATCH 7/7] Comment bug before deploy

---
 frontend/src/components/calendar/calendar.jsx |  8 +--
 .../components/kanbanBoard/kanbanBoard.jsx    | 54 +++++++++++++------
 .../src/components/kanbanBoard/kanbanPage.jsx |  4 +-
 .../components/navigations/IconSideNav.jsx    |  4 +-
 .../src/components/navigations/Navbar.jsx     |  8 +--
 5 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/calendar/calendar.jsx b/frontend/src/components/calendar/calendar.jsx
index a85ea2d..79dae97 100644
--- a/frontend/src/components/calendar/calendar.jsx
+++ b/frontend/src/components/calendar/calendar.jsx
@@ -1,11 +1,10 @@
-import React from "react";
+import React, { useState } from "react";
 import { formatDate } from "@fullcalendar/core";
 import FullCalendar from "@fullcalendar/react";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import { getEvents, createEventId } from "./TaskDataHandler";
-import { axiosInstance } from "src/api/AxiosConfig";
 
 export class Calendar extends React.Component {
   state = {
@@ -62,10 +61,13 @@ export class Calendar extends React.Component {
               type="checkbox"
               checked={this.state.weekendsVisible}
               onChange={this.handleWeekendsToggle}
-              className="mr-2"
+              className="mr-2 mb-4"
             />
             Toggle weekends
           </label>
+          <button className="btn btn-info" onClick={() => alert("Commit soon🥺")}>
+            Load Data from Google
+          </button>
         </div>
 
         {/* Show all task */}
diff --git a/frontend/src/components/kanbanBoard/kanbanBoard.jsx b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
index b79cf50..2bda08b 100644
--- a/frontend/src/components/kanbanBoard/kanbanBoard.jsx
+++ b/frontend/src/components/kanbanBoard/kanbanBoard.jsx
@@ -224,30 +224,24 @@ export function KanbanBoard() {
 
     const isActiveATask = active.data.current?.type === "Task";
     const isOverAColumn = over.data.current?.type === "Column";
-    const isOverATask = over.data.current?.type === "Task";
-
-    // 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);
-
-        const reorderedTasks = arrayMove(tasks, activeIndex, overIndex);
-
-        return reorderedTasks;
-      });
-    }
 
     // Move tasks between columns and update columnId
     if (isActiveATask && isOverAColumn) {
       setTasks((tasks) => {
         const activeIndex = tasks.findIndex((t) => t.id === activeId);
 
-        tasks[activeIndex].columnId = overId;
+        // Extract the column ID from overId
+        const columnId = extractColumnId(overId);
+
+        tasks[activeIndex].columnId = columnId;
 
         // 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 })
+          .put(`todo/change_task_list_board/`, {
+            todo_id: activeId,
+            new_list_board_id: over.data.current.task.columnId,
+            new_index: 0,
+          })
           .then((response) => {})
           .catch((error) => {
             console.error("Error updating task columnId:", error);
@@ -258,6 +252,14 @@ export function KanbanBoard() {
     }
   }
 
+  // Helper function to extract the column ID from the element ID
+  function extractColumnId(elementId) {
+    // Implement logic to extract the column ID from elementId
+    // For example, if elementId is in the format "column-123", you can do:
+    const parts = elementId.split("-");
+    return parts.length === 2 ? parseInt(parts[1], 10) : null;
+  }
+
   // Handle the drag-over event
   function onDragOver(event) {
     const { active, over } = event;
@@ -284,7 +286,16 @@ export function KanbanBoard() {
           tasks[activeIndex].columnId = tasks[overIndex].columnId;
           return arrayMove(tasks, activeIndex, overIndex - 1);
         }
-
+        axiosInstance
+          .put(`todo/change_task_list_board/`, {
+            todo_id: activeId,
+            new_list_board_id: over.data.current.task.columnId,
+            new_index: 0,
+          })
+          .then((response) => {})
+          .catch((error) => {
+            console.error("Error updating task columnId:", error);
+          });
         return arrayMove(tasks, activeIndex, overIndex);
       });
     }
@@ -294,7 +305,16 @@ export function KanbanBoard() {
     if (isActiveATask && isOverAColumn && tasks.some((task) => task.columnId !== overId)) {
       setTasks((tasks) => {
         const activeIndex = tasks.findIndex((t) => t.id === activeId);
-
+        axiosInstance
+          .put(`todo/change_task_list_board/`, {
+            todo_id: activeId,
+            new_list_board_id: over.data.current.task.columnId,
+            new_index: 0,
+          })
+          .then((response) => {})
+          .catch((error) => {
+            console.error("Error updating task columnId:", error);
+          });
         tasks[activeIndex].columnId = overId;
         return arrayMove(tasks, activeIndex, activeIndex);
       });
diff --git a/frontend/src/components/kanbanBoard/kanbanPage.jsx b/frontend/src/components/kanbanBoard/kanbanPage.jsx
index 399bfc3..92a8536 100644
--- a/frontend/src/components/kanbanBoard/kanbanPage.jsx
+++ b/frontend/src/components/kanbanBoard/kanbanPage.jsx
@@ -19,12 +19,12 @@ export const KanbanPage = () => {
               onClick={() => handleTabClick("kanban")}>
               Kanban
             </a>
-            <a
+            {/* <a
               id="table"
               className={`tab ${activeTab === "table" ? "tab-active" : ""}`}
               onClick={() => handleTabClick("table")}>
               Table
-            </a>
+            </a> */}
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/navigations/IconSideNav.jsx b/frontend/src/components/navigations/IconSideNav.jsx
index c5d1708..9f9ad4b 100644
--- a/frontend/src/components/navigations/IconSideNav.jsx
+++ b/frontend/src/components/navigations/IconSideNav.jsx
@@ -9,9 +9,9 @@ const menuItems = [
   { id: 0, path: "/", icon: <AiOutlineHome /> },
   { id: 1, path: "/tasks", icon: <AiOutlineUnorderedList /> },
   { id: 2, path: "/calendar", icon: <AiOutlineSchedule /> },
-  { id: 3, path: "/settings", icon: <IoSettingsOutline /> },
-  { id: 4, path: "/priority", icon: <PiStepsDuotone /> },
+  { id: 3, path: "/priority", icon: <PiStepsDuotone /> },
 ];
+// { id: 3, path: "/settings", icon: <IoSettingsOutline /> },
 
 export const SideNav = () => {
   const [selected, setSelected] = useState(0);
diff --git a/frontend/src/components/navigations/Navbar.jsx b/frontend/src/components/navigations/Navbar.jsx
index 46dd45e..22120b3 100644
--- a/frontend/src/components/navigations/Navbar.jsx
+++ b/frontend/src/components/navigations/Navbar.jsx
@@ -25,14 +25,14 @@ export function NavBar() {
         </a>
       </div>
       <div className="flex-none gap-2">
-        <div className="form-control">
-          <input type="text" placeholder="Search" className="input input-bordered w-24 md:w-auto" />
-        </div>
+        {/* <div className="form-control">
+          <button className="btn btn-success">Sync Data</button>
+        </div> */}
         {isAuthenticated ? (
           <div className="dropdown dropdown-end">
             <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
               <div className="w-10 rounded-full">
-                <img src="https://us-tuna-sounds-images.voicemod.net/f322631f-689a-43ac-81ab-17a70f27c443-1692187175560.png" />
+                <img src="https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png" />
               </div>
             </label>
             <ul