From 14c56707a8551f2ace60290712e582fc32f2da49 Mon Sep 17 00:00:00 2001
From: sosokker <sirin_29@hotmail.co.th>
Date: Fri, 17 Nov 2023 11:59:43 +0700
Subject: [PATCH] Add tasks view handle

---
 frontend/src/App.jsx                          |  8 ++---
 .../src/components/kanbanBoard/kanbanPage.jsx | 36 +++++++++++++++++++
 .../src/components/kanbanBoard/taskCard.jsx   |  1 -
 .../components/navigations/IconSideNav.jsx    |  2 +-
 4 files changed, 41 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/kanbanBoard/kanbanPage.jsx

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index c9aed19..ad9dc97 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -7,7 +7,7 @@ import SignUpPage from "./components/authentication/SignUpPage";
 import NavBar from "./components/navigations/Navbar";
 import Home from "./components/Home";
 import Calendar from "./components/calendar/calendar";
-import KanbanBoard from "./components/kanbanBoard/kanbanBoard";
+import KanbanPage from "./components/kanbanBoard/kanbanPage";
 import IconSideNav from "./components/navigations/IconSideNav";
 import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
 import PrivateRoute from "./PrivateRoute";
@@ -22,13 +22,13 @@ const App = () => {
   return (
     <div className={isLoginPageOrSignUpPage ? "" : "display: flex"}>
       {!isLoginPageOrSignUpPage && <IconSideNav />}
-      <div className={isLoginPageOrSignUpPage ? "" : "flex-1 ml-[76px]"}>
+      <div className={isLoginPageOrSignUpPage ? "" : "flex-1 ml-[76px] overflow-hidden"}>
         <NavBar />
-        <div className={isLoginPageOrSignUpPage ? "" : "flex items-center justify-center"}>
+        <div className={isLoginPageOrSignUpPage ? "" : "overflow-x-auto"}>
           <Routes>
             <Route path="/" element={<Home />} />
             <Route exact path="/tasks" element={<PrivateRoute />}>
-              <Route exact path="/tasks" element={<KanbanBoard />} />
+              <Route exact path="/tasks" element={<KanbanPage />} />
             </Route>
             <Route path="/testAuth" element={<TestAuth />} />
             <Route exact path="/profile" element={<PrivateRoute />}>
diff --git a/frontend/src/components/kanbanBoard/kanbanPage.jsx b/frontend/src/components/kanbanBoard/kanbanPage.jsx
new file mode 100644
index 0000000..b362330
--- /dev/null
+++ b/frontend/src/components/kanbanBoard/kanbanPage.jsx
@@ -0,0 +1,36 @@
+import KanbanBoard from "./kanbanBoard";
+import React, { useState } from 'react';
+
+const KanbanPage = () => {
+    const [activeTab, setActiveTab] = useState('kanban');
+
+    const handleTabClick = (tabId) => {
+      setActiveTab(tabId);
+    };
+
+  return (
+    <div className="flex flex-col">
+      <div className="flex justify-center border-2 py-3 mb-1">
+        <div>
+          <div className="tabs tabs-boxed">
+            <a
+              id="kanban"
+              className={`tab ${activeTab === "kanban" ? "tab-active" : ""}`}
+              onClick={() => handleTabClick("kanban")}>
+              Kanban
+            </a>
+            <a
+              id="table"
+              className={`tab ${activeTab === "table" ? "tab-active" : ""}`}
+              onClick={() => handleTabClick("table")}>
+              Table
+            </a>
+          </div>
+        </div>
+      </div>
+      <KanbanBoard />
+    </div>
+  );
+};
+
+export default KanbanPage;
diff --git a/frontend/src/components/kanbanBoard/taskCard.jsx b/frontend/src/components/kanbanBoard/taskCard.jsx
index c8d524b..379abf5 100644
--- a/frontend/src/components/kanbanBoard/taskCard.jsx
+++ b/frontend/src/components/kanbanBoard/taskCard.jsx
@@ -43,7 +43,6 @@ function TaskCard({ task, deleteTask, updateTask }) {
         ref={setNodeRef}
         {...attributes}
         {...listeners}
-        onClick={() => document.getElementById("task_detail_modal").showModal()}
         style={style}
         className="justify-center items-center flex text-left rounded-xl cursor-grab relative hover:border-2 hover:border-blue-400 shadow bg-white"
         onMouseEnter={() => {
diff --git a/frontend/src/components/navigations/IconSideNav.jsx b/frontend/src/components/navigations/IconSideNav.jsx
index 3a1ba3e..cc16123 100644
--- a/frontend/src/components/navigations/IconSideNav.jsx
+++ b/frontend/src/components/navigations/IconSideNav.jsx
@@ -24,7 +24,7 @@ const SideNav = () => {
   const [selected, setSelected] = useState(0);
 
   return (
-    <nav className="bg-slate-950 p-4 flex flex-col items-center gap-2 h-full fixed top-0 left-0">
+    <nav className="bg-slate-950 p-4 flex flex-col items-center gap-2 h-full fixed top-0 left-0 z-50">
       {menuItems.map(item => (
         <NavItem
           key={item.id}