Working on kanban table.

frontend/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@asseinfo/react-kanban": "^2.2.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@material-ui/core": "^4.12.4",
@@ -18,6 +19,8 @@
     "@mui/material": "^5.14.15",
     "@mui/system": "^5.14.15",
     "@react-oauth/google": "^0.11.1",
+    "@syncfusion/ej2-base": "^23.1.41",
+    "@syncfusion/ej2-kanban": "^23.1.36",
     "axios": "^1.5.1",
     "bootstrap": "^5.3.2",
     "dotenv": "^16.3.1",
@@ -25,6 +28,7 @@
     "gapi-script": "^1.2.0",
     "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-bootstrap": "^2.9.1",
     "react-dom": "^18.2.0",
     "react-google-login": "^5.2.2",

frontend/pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@asseinfo/react-kanban':
+    specifier: ^2.2.0
+    version: 2.2.0(react-dom@18.2.0)(react@18.2.0)
   '@emotion/react':
     specifier: ^11.11.1
     version: 11.11.1(@types/react@18.2.33)(react@18.2.0)
@@ -29,6 +32,12 @@ dependencies:
   '@react-oauth/google':
     specifier: ^0.11.1
     version: 0.11.1(react-dom@18.2.0)(react@18.2.0)
+  '@syncfusion/ej2-base':
+    specifier: ^23.1.41
+    version: 23.1.41
+  '@syncfusion/ej2-kanban':
+    specifier: ^23.1.36
+    version: 23.1.36
   axios:
     specifier: ^1.5.1
     version: 1.5.1
@@ -50,6 +59,9 @@ dependencies:
   react:
     specifier: ^18.2.0
     version: 18.2.0
+  react-beautiful-dnd:
+    specifier: ^13.1.1
+    version: 13.1.1(react-dom@18.2.0)(react@18.2.0)
   react-bootstrap:
     specifier: ^2.9.1
     version: 2.9.1(@types/react@18.2.33)(react-dom@18.2.0)(react@18.2.0)
@@ -121,6 +133,19 @@ packages:
       '@jridgewell/trace-mapping': 0.3.20
     dev: true
 
+  /@asseinfo/react-kanban@2.2.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-/gCigrNXRHeP9VCo8RipTOrA0vAPRIOThJhR4ibVxe6BLkaWFUEuJ1RMT4fODpRRsE3XsdrfVGKkfpRBKgvxXg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0
+      react-dom: ^16.8.0 || ^17.0.0
+    dependencies:
+      react: 18.2.0
+      react-beautiful-dnd: 13.1.1(react-dom@18.2.0)(react@18.2.0)
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - react-native
+    dev: false
+
   /@babel/code-frame@7.22.13:
     resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
     engines: {node: '>=6.9.0'}
@@ -1173,6 +1198,111 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@syncfusion/ej2-base@23.1.41:
+    resolution: {integrity: sha512-ROtvuLIVkKl4eL+ubQjQQLleRMY98nYlxlBaFw4axtiDLoBbzOYtiFXmdP/KE+uNrMquZAwl+aduPX0loG3EAw==}
+    hasBin: true
+    dependencies:
+      '@syncfusion/ej2-icons': 23.1.36
+    dev: false
+
+  /@syncfusion/ej2-buttons@23.1.43:
+    resolution: {integrity: sha512-Jg1cC/2o6ds+xDwQSlAF7cEYP4O4C9wojKFllcVvZTwTKWVxZ2KfYeAFM1kV1GR/WuJd+TmvNhwkvmkWz8UgQw==}
+    dependencies:
+      '@syncfusion/ej2-base': 23.1.41
+    dev: false
+
+  /@syncfusion/ej2-data@23.1.43:
+    resolution: {integrity: sha512-kiuyuKsVogLvIP72Bd2IwETk9mOpZrbtfbOx5/y7Q1A05FQkaxlJqKFoOjkzbfMtKV5iDjAxz/Q3VHqq+hZoYA==}
+    dependencies:
+      '@syncfusion/ej2-base': 23.1.41
+    dev: false
+
+  /@syncfusion/ej2-dropdowns@23.1.43:
+    resolution: {integrity: sha512-75tWTEoEJU/fJ8V3CvwOeQ7svZoyftlVp7DO3oSl6nR4LuyG0Uf7BP+bSMvKVXuEyulyZmHo1/xeqjYoVp4M7g==}
+    dependencies:
+      '@syncfusion/ej2-base': 23.1.41
+      '@syncfusion/ej2-data': 23.1.43
+      '@syncfusion/ej2-inputs': 23.1.43
+      '@syncfusion/ej2-lists': 23.1.43
+      '@syncfusion/ej2-navigations': 23.1.43
+      '@syncfusion/ej2-notifications': 23.1.40
+      '@syncfusion/ej2-popups': 23.1.43
+    dev: false
+
+  /@syncfusion/ej2-icons@23.1.36:
+    resolution: {integrity: sha512-Q7S50bOzXL9X46doNIGSGr61RCY/1RW9iz1U7yyARr2XBQhWnijk+t/FVBk1piR0nioRXbKQcPZOLiEo6zf1xw==}
+    dev: false
+
+  /@syncfusion/ej2-inputs@23.1.43:
+    resolution: {integrity: sha512-G4HhneF2HXe6Tcig5pDlTaEgR46vQJgshcEym6WEVm0G39xiUSR5NIvyvS54IldGRyWwoyWEucbpM1kWGJC+7g==}
+    dependencies:
+      '@syncfusion/ej2-base': 23.1.41
+      '@syncfusion/ej2-buttons': 23.1.43
+      '@syncfusion/ej2-popups': 23.1.43
+      '@syncfusion/ej2-splitbuttons': 23.1.43
+    dev: false
+
+  /@syncfusion/ej2-kanban@23.1.36:
+    resolution: {integrity: sha512-qkp7ZS+o40I9oWj/lDJ4D20ygsOuDmjJ1CEkpz2xQgzXuHcA+/89OGeKS8WGFtK2uPSl+U2ub2PdopXF4OqL+w==}
+    dependencies:
+      '@syncfusion/ej2-base': 23.1.41
+      '@syncfusion/ej2-buttons': 23.1.43
+      '@syncfusion/ej2-data': 23.1.43
+      '@syncfusion/ej2-dropdowns': 23.1.43
+      '@syncfusion/ej2-inputs': 23.1.43
+      '@syncfusion/ej2-layouts': 23.1.36
+      '@syncfusion/ej2-navigations': 23.1.43
+      '@syncfusion/ej2-notifications': 23.1.40
+      '@syncfusion/ej2-popups': 23.1.43
+    dev: false
+
+  /@syncfusion/ej2-layouts@23.1.36:
+    resolution: {integrity: sha512-vS1KpUxLcrFNjRgkaotWWMmja9x1XjY06r70P/1JbxT66oJZwv5YRfBBqT1rFeYEWUGm0ciMEMehyTsPE3Pefw==}
+    dependencies:
+      '@syncfusion/ej2-base': 23.1.41
+    dev: false
+
+  /@syncfusion/ej2-lists@23.1.43:
+    resolution: {integrity: sha512-AoEpXn7F8AmXq74PmGCqQjURHnriyhimVreenDWrB1HlMUPcAw7Lkep4gYQdJXYyfWlT+GE+lr6lfS7hgAFT+A==}
+    dependencies:
+      '@syncfusion/ej2-base': 23.1.41
+      '@syncfusion/ej2-buttons': 23.1.43
+      '@syncfusion/ej2-data': 23.1.43
+    dev: false
+
+  /@syncfusion/ej2-navigations@23.1.43:
+    resolution: {integrity: sha512-3eiMnciQx8X5FSQd4CONd5yZfTvphcgH3U+tQNFecntCh/3hfoYoj0yGkayakIR0DP08YE32y3/8yztwK+GwUQ==}
+    dependencies:
+      '@syncfusion/ej2-base': 23.1.41
+      '@syncfusion/ej2-buttons': 23.1.43
+      '@syncfusion/ej2-data': 23.1.43
+      '@syncfusion/ej2-inputs': 23.1.43
+      '@syncfusion/ej2-lists': 23.1.43
+      '@syncfusion/ej2-popups': 23.1.43
+    dev: false
+
+  /@syncfusion/ej2-notifications@23.1.40:
+    resolution: {integrity: sha512-xB0U/THNVQN09AK+5DV6f9e7YbvWi5UqhdObCdpZarAMOFUEZBtAIVQRxc1LrINRmRapGU7NMFQj1F1xU7DVyw==}
+    dependencies:
+      '@syncfusion/ej2-base': 23.1.41
+      '@syncfusion/ej2-buttons': 23.1.43
+      '@syncfusion/ej2-popups': 23.1.43
+    dev: false
+
+  /@syncfusion/ej2-popups@23.1.43:
+    resolution: {integrity: sha512-I3CT7LmJHJ4r+4kRrVMgOTUrV7xpVHkjk67ApbJFucpN++Qo18b9Qy/QetRera5mS26ZVG78T3TST3g9dvO5Zw==}
+    dependencies:
+      '@syncfusion/ej2-base': 23.1.41
+      '@syncfusion/ej2-buttons': 23.1.43
+    dev: false
+
+  /@syncfusion/ej2-splitbuttons@23.1.43:
+    resolution: {integrity: sha512-NbT5XMCU87QPRr4svcEn/zEwIFAmwZiAYYLz2WjiuKVOnFw6htAKT81FF7X4CLl4HN0o1S7w09N9r5HQxv3mgQ==}
+    dependencies:
+      '@syncfusion/ej2-base': 23.1.41
+      '@syncfusion/ej2-popups': 23.1.43
+    dev: false
+
   /@types/babel__core@7.20.3:
     resolution: {integrity: sha512-54fjTSeSHwfan8AyHWrKbfBWiEUrNTZsUwPTDSNaaP1QDQIZbeNUg3a59E9D+375MzUw/x1vx2/0F5LBz+AeYA==}
     dependencies:

frontend/src/App.jsx

@@ -7,7 +7,7 @@ import AuthenticantionPage from './components/authentication/AuthenticationPage'
 import SignUpPage from './components/authentication/SignUpPage';
 import NavBar from './components/Nav/Navbar';
 import Home from './components/Home';
-import UncontrolledBoard from './components/kanbanBoard/kanbanBoard';
+import KanbanBoard from './components/kanbanBoard/kanbanBoard';
 
 
 const App = () => {
@@ -23,7 +23,7 @@ const App = () => {
                     </Routes>
         </div>
         <IconSideNav />
-        <UncontrolledBoard/>
+        <KanbanBoard/>
         </BrowserRouter>
     );
 }

frontend/src/components/kanbanBoard/kanbanBoard.jsx

@@ -1,30 +1,50 @@
-import React, { useState } from "react";
+import React, { useEffect } from 'react';
-import Column from "./Column";
+import * as ej from '@syncfusion/ej2-base'; // Import necessary Syncfusion modules and styles
+import '@syncfusion/ej2-base/styles/material.css';
+import '@syncfusion/ej2-buttons/styles/material.css';
+import '@syncfusion/ej2-lists/styles/material.css';
+import '@syncfusion/ej2-inputs/styles/material.css';
+import '@syncfusion/ej2-popups/styles/material.css';
+import '@syncfusion/ej2-dropdowns/styles/material.css';
+import '@syncfusion/ej2-splitbuttons/styles/material.css';
+import '@syncfusion/ej2-navigations/styles/material.css';
+import '@syncfusion/ej2-kanban/styles/material.css';
+import '@syncfusion/ej2-react-kanban/styles/material.css';
 
 const KanbanBoard = () => {
-  const [tasks, setTasks] = useState([
+  useEffect(() => {
-    { id: 1, content: "Task 1" },
+    const kanbanData = [
-    { id: 2, content: "Task 2" },
+      // Your Kanban data here
-    { id: 3, content: "Task 3" },
+    ];
-  ]);
 
-  const [columns, setColumns] = useState({
+    const kanbanObj = new ej.kanban.Kanban({
-    backlog: tasks,
+      dataSource: kanbanData,
-    inProgress: [],
+      keyField: 'Status',
-    done: [],
+      columns: [
-  });
+        { headerText: 'Backlog', keyField: 'Open' },
+        { headerText: 'In Progress', keyField: 'InProgress' },
+        { headerText: 'Testing', keyField: 'Testing' },
+        { headerText: 'Done', keyField: 'Close' }
+      ],
+      cardSettings: {
+        contentField: 'Summary',
+        headerField: 'Id',
+      },
+      swimlaneSettings: {
+        keyField: 'Assignee'
+      }
+    });
 
-  const handleTaskDelete = (taskId) => {
+    kanbanObj.appendTo('#Kanban'); 
-    const updatedTasks = tasks.filter((task) => task.id !== taskId);
+    
-    setTasks(updatedTasks);
+    return () => {
-
+      kanbanObj.destroy();
-    const updatedColumns = {
-      ...columns,
-      backlog: updatedTasks,
-      inProgress: columns.inProgress.filter((task) => task.id !== taskId),
-      done: columns.done.filter((task) => task.id !== taskId),
     };
-    setColumns(updatedColumns);
+  }, []);
-  };
 
+  return (
+    <div id="Kanban"></div>
+  );
+};
 
+export default KanbanBoard;