Feature/kanban board

frontend/package.json

@@ -64,6 +64,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
     "postcss": "^8.4.31",
+    "prettier": "^3.1.0",
+    "prettier-plugin-tailwindcss": "^0.5.7",
     "tailwindcss": "^3.3.5",
     "vite": "^4.5.0"
   }

frontend/src/components/calendar/TaskDataHandler.jsx

@@ -1,4 +1,5 @@
 import { readTodoTasks } from "src/api/TaskApi";
+import { axiosInstance } from "src/api/AxiosConfig";
 
 let eventGuid = 0;
 

frontend/src/components/calendar/calendar.jsx

@@ -13,6 +13,14 @@ export class Calendar extends React.Component {
     currentEvents: [],
   };
 
+  async handleGoogleClick() {
+    try {
+      const response = await axiosInstance.get("calendar-events/");
+    } catch (error) {
+      console.error("Error fetching data from Google:", error);
+    }
+  }
+
   render() {
     return (
       <div className="flex font-sans w-full h-screen">
@@ -47,10 +55,7 @@ export class Calendar extends React.Component {
       <div className="w-72 bg-blue-100 border-r border-blue-200 p-8 flex flex-col">
         {/* Description Zone */}
         <div className="mb-8">
-          <h2 className="text-xl font-bold">Instructions</h2>
           <ul className="list-disc pl-4">
-            <li>Select dates and you will be prompted to create a new event</li>
-            <li>Drag, drop, and resize events</li>
             <li>Click an event to delete it</li>
           </ul>
         </div>
@@ -66,7 +71,7 @@ export class Calendar extends React.Component {
             />
             Toggle weekends
           </label>
-          <button className="btn btn-info" onClick={() => alert("Commit soon🥺")}>
+          <button className="btn btn-info" onClick={() => this.handleGoogleClick()}>
             Load Data from Google
           </button>
         </div>

frontend/src/components/kanbanBoard/kanbanPage.jsx

@@ -1,5 +1,6 @@
 import { KanbanBoard } from "./kanbanBoard";
 import { useState } from "react";
+import { TableBoard } from "./tableBoard";
 
 export const KanbanPage = () => {
   const [activeTab, setActiveTab] = useState("kanban");
@@ -16,19 +17,21 @@ export const KanbanPage = () => {
             <a
               id="kanban"
               className={`tab ${activeTab === "kanban" ? "tab-active" : ""}`}
-              onClick={() => handleTabClick("kanban")}>
+              onClick={() => handleTabClick("kanban")}
+            >
               Kanban
             </a>
-            {/* <a
+            <a
               id="table"
               className={`tab ${activeTab === "table" ? "tab-active" : ""}`}
-              onClick={() => handleTabClick("table")}>
+              onClick={() => handleTabClick("table")}
+            >
               Table
-            </a> */}
+            </a>
           </div>
         </div>
       </div>
-      <KanbanBoard />
+      {activeTab === "kanban" ? <KanbanBoard /> : <TableBoard />}
     </div>
   );
 };

frontend/src/components/kanbanBoard/tableBoard.jsx

@@ -0,0 +1,102 @@
+import { useState, useEffect } from "react";
+import { axiosInstance } from "src/api/AxiosConfig";
+
+export function TableBoard() {
+  const [tasks, setTasks] = useState([]);
+
+  // ---------------- Fetch Data ----------------
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const tasksResponse = await axiosInstance.get("/todo");
+
+        // Transform
+        const transformedTasks = tasksResponse.data.map((task) => ({
+          id: task.id,
+          columnId: task.list_board,
+          content: task.title,
+          difficulty: task.difficulty,
+          notes: task.notes,
+          importance: task.importance,
+          challenge: task.challenge,
+          fromSystem: task.fromSystem,
+          creation_date: task.creation_date,
+          last_update: task.last_update,
+          is_active: task.is_active,
+          is_full_day_event: task.is_full_day_event,
+          start_event: task.start_event,
+          end_event: task.end_event,
+          google_calendar_id: task.google_calendar_id,
+          completed: task.completed,
+          completion_date: task.completion_date,
+          priority: task.priority,
+          user: task.user,
+          list_board: task.list_board,
+          tags: task.tags,
+          subtaskCount: task.sub_task_count,
+        }));
+        setTasks(transformedTasks);
+      } catch (error) {
+        console.error("Error fetching data from API:", error);
+      }
+    };
+    fetchData();
+  }, []);
+
+  // ---------------- END Fetch Data ----------------
+
+  return (
+    <div className="overflow-x-auto">
+      <table className="table">
+        {/* head */}
+        <thead>
+          <tr>
+            <th></th>
+            <th>Title</th>
+            <th>Description</th>
+            <th>Priority</th>
+            <th>Due Date</th>
+          </tr>
+        </thead>
+        <tbody>
+          {/* BODY */}
+          {tasks.map((task, index) => (
+            <tr key={index}>
+              <th>
+                <label></label>
+              </th>
+              <td>
+                <div className="flex items-center gap-3">
+                  <div>
+                    <div className="font-bold">{task.content}</div>
+                    <div className="text-sm opacity-50">{task.content}</div>
+                  </div>
+                </div>
+              </td>
+              <td>
+                {task.notes}
+                <br />
+                <span className="badge badge-ghost badge-sm">Description</span>
+              </td>
+              <td>{task.priority}</td>
+              <th>
+                <button className="btn btn-ghost btn-xs">{task.end_event}</button>
+              </th>
+            </tr>
+          ))}
+          {/* END BODY */}
+        </tbody>
+        {/* foot */}
+        <tfoot>
+          <tr>
+            <th></th>
+            <th>Title</th>
+            <th>Description</th>
+            <th>Priority</th>
+            <th>Due Date</th>
+          </tr>
+        </tfoot>
+      </table>
+    </div>
+  );
+}

frontend/src/components/kanbanBoard/taskCard.jsx

@@ -50,12 +50,12 @@ export function TaskCard({ task, deleteTask, updateTask }) {
         task.difficulty === 1
           ? "bg-blue-200 text-blue-700"
           : task.difficulty === 2
-          ? "bg-green-200 text-green-700"
-          : task.difficulty === 3
-          ? "bg-yellow-200 text-yellow-700"
-          : task.difficulty === 4
-          ? "bg-red-200 text-red-700"
-          : "bg-purple-200 text-purple-700"
+            ? "bg-green-200 text-green-700"
+            : task.difficulty === 3
+              ? "bg-yellow-200 text-yellow-700"
+              : task.difficulty === 4
+                ? "bg-red-200 text-red-700"
+                : "bg-purple-200 text-purple-700"
       }`}>
       difficulty
     </span>
@@ -71,12 +71,12 @@ export function TaskCard({ task, deleteTask, updateTask }) {
             daysUntilDue >= 365
               ? "gray-200"
               : daysUntilDue >= 30
-              ? "blue-200"
-              : daysUntilDue >= 7
-              ? "green-200"
-              : daysUntilDue > 0
-              ? "yellow-200"
-              : "red-200";
+                ? "blue-200"
+                : daysUntilDue >= 7
+                  ? "green-200"
+                  : daysUntilDue > 0
+                    ? "yellow-200"
+                    : "red-200";
 
           const formattedDueDate =
             daysUntilDue >= 365
@@ -85,7 +85,10 @@ export function TaskCard({ task, deleteTask, updateTask }) {
                   month: "short",
                   year: "numeric",
                 })
-              : new Date(task.end_event).toLocaleDateString("en-US", { day: "numeric", month: "short" });
+              : new Date(task.end_event).toLocaleDateString("en-US", {
+                  day: "numeric",
+                  month: "short",
+                });
 
           return (
             <span className={`bg-${colorClass} text-[10px] font-xl font-bold px-2 py-1 rounded-full`}>
@@ -122,13 +125,15 @@ export function TaskCard({ task, deleteTask, updateTask }) {
       <TaskDetailModal
         taskId={task.id}
         title={task.content}
-        description={task.description}
+        description={task.notes}
         tags={task.tags}
         difficulty={task.difficulty}
         challenge={task.challenge}
         importance={task.importance}
         updateTask={updateTask}
         completed={task.completed}
+        start_event={task.start_event}
+        end_event={task.end_event}
       />
 
       {/* -------- Task Card -------- */}