add kanban

backend/src/db/seeders/20231127130745-sample-data.js

@@ -73,20 +73,6 @@ const AnalyticsData = [
 
     instructor_performance: 87.5,
   },
-
-  {
-    // type code here for "relation_many" field
-
-    // type code here for "relation_many" field
-
-    // type code here for "relation_many" field
-
-    engagement_rate: 77,
-
-    completion_rate: 79.5,
-
-    instructor_performance: 86,
-  },
 ];
 
 const CoursesData = [
@@ -145,20 +131,6 @@ const CoursesData = [
 
     // type code here for "relation_many" field
   },
-
-  {
-    title: 'Data Science Essentials',
-
-    description: 'Understand the fundamentals of data science and analytics.',
-
-    // type code here for "relation_many" field
-
-    // type code here for "relation_many" field
-
-    // type code here for "files" field
-
-    // type code here for "relation_many" field
-  },
 ];
 
 const DiscussionBoardsData = [
@@ -193,14 +165,6 @@ const DiscussionBoardsData = [
 
     // type code here for "relation_many" field
   },
-
-  {
-    // type code here for "relation_one" field
-
-    topic: 'Data Analysis Techniques',
-
-    // type code here for "relation_many" field
-  },
 ];
 
 const EnrollmentsData = [
@@ -209,7 +173,7 @@ const EnrollmentsData = [
 
     // type code here for "relation_one" field
 
-    payment_status: 'Completed',
+    payment_status: 'Failed',
 
     enrollment_date: new Date('2023-01-15T10:00:00Z'),
   },
@@ -219,7 +183,7 @@ const EnrollmentsData = [
 
     // type code here for "relation_one" field
 
-    payment_status: 'Failed',
+    payment_status: 'Pending',
 
     enrollment_date: new Date('2023-02-20T11:30:00Z'),
   },
@@ -229,7 +193,7 @@ const EnrollmentsData = [
 
     // type code here for "relation_one" field
 
-    payment_status: 'Failed',
+    payment_status: 'Completed',
 
     enrollment_date: new Date('2023-03-10T09:45:00Z'),
   },
@@ -243,16 +207,6 @@ const EnrollmentsData = [
 
     enrollment_date: new Date('2023-04-05T14:20:00Z'),
   },
-
-  {
-    // type code here for "relation_one" field
-
-    // type code here for "relation_one" field
-
-    payment_status: 'Pending',
-
-    enrollment_date: new Date('2023-05-25T16:00:00Z'),
-  },
 ];
 
 const InstructorsData = [
@@ -283,7 +237,7 @@ const InstructorsData = [
 
     // type code here for "relation_many" field
 
-    availability: false,
+    availability: true,
   },
 
   {
@@ -295,16 +249,6 @@ const InstructorsData = [
 
     availability: true,
   },
-
-  {
-    // type code here for "relation_one" field
-
-    qualifications: 'MSc in Data Science',
-
-    // type code here for "relation_many" field
-
-    availability: false,
-  },
 ];
 
 const StudentsData = [
@@ -347,67 +291,47 @@ const StudentsData = [
 
     average_grade: 92,
   },
-
-  {
-    // type code here for "relation_one" field
-
-    // type code here for "relation_many" field
-
-    // type code here for "relation_many" field
-
-    average_grade: 87.5,
-  },
 ];
 
 const CategoriesData = [
   {
-    name: 'August Kekule',
+    name: 'Rudolf Virchow',
   },
 
   {
-    name: 'Sheldon Glashow',
+    name: 'J. Robert Oppenheimer',
   },
 
   {
-    name: 'Andreas Vesalius',
+    name: 'Leonard Euler',
   },
 
   {
-    name: 'Edward O. Wilson',
+    name: 'Hans Bethe',
-  },
-
-  {
-    name: 'John Dalton',
   },
 ];
 
 const TasksData = [
   {
-    name: 'Lynn Margulis',
+    name: 'Michael Faraday',
 
     // type code here for "relation_one" field
   },
 
   {
-    name: 'James Clerk Maxwell',
+    name: 'Paul Dirac',
 
     // type code here for "relation_one" field
   },
 
   {
-    name: 'Charles Sherrington',
+    name: 'Neils Bohr',
 
     // type code here for "relation_one" field
   },
 
   {
-    name: 'Gertrude Belle Elion',
+    name: 'Emil Fischer',
-
-    // type code here for "relation_one" field
-  },
-
-  {
-    name: 'Franz Boas',
 
     // type code here for "relation_one" field
   },
@@ -471,17 +395,6 @@ async function associateDiscussionBoardWithCourse() {
   if (DiscussionBoard3?.setCourse) {
     await DiscussionBoard3.setCourse(relatedCourse3);
   }
-
-  const relatedCourse4 = await Courses.findOne({
-    offset: Math.floor(Math.random() * (await Courses.count())),
-  });
-  const DiscussionBoard4 = await DiscussionBoards.findOne({
-    order: [['id', 'ASC']],
-    offset: 4,
-  });
-  if (DiscussionBoard4?.setCourse) {
-    await DiscussionBoard4.setCourse(relatedCourse4);
-  }
 }
 
 // Similar logic for "relation_many"
@@ -530,17 +443,6 @@ async function associateEnrollmentWithStudent() {
   if (Enrollment3?.setStudent) {
     await Enrollment3.setStudent(relatedStudent3);
   }
-
-  const relatedStudent4 = await Students.findOne({
-    offset: Math.floor(Math.random() * (await Students.count())),
-  });
-  const Enrollment4 = await Enrollments.findOne({
-    order: [['id', 'ASC']],
-    offset: 4,
-  });
-  if (Enrollment4?.setStudent) {
-    await Enrollment4.setStudent(relatedStudent4);
-  }
 }
 
 async function associateEnrollmentWithCourse() {
@@ -587,17 +489,6 @@ async function associateEnrollmentWithCourse() {
   if (Enrollment3?.setCourse) {
     await Enrollment3.setCourse(relatedCourse3);
   }
-
-  const relatedCourse4 = await Courses.findOne({
-    offset: Math.floor(Math.random() * (await Courses.count())),
-  });
-  const Enrollment4 = await Enrollments.findOne({
-    order: [['id', 'ASC']],
-    offset: 4,
-  });
-  if (Enrollment4?.setCourse) {
-    await Enrollment4.setCourse(relatedCourse4);
-  }
 }
 
 async function associateInstructorWithUser() {
@@ -644,17 +535,6 @@ async function associateInstructorWithUser() {
   if (Instructor3?.setUser) {
     await Instructor3.setUser(relatedUser3);
   }
-
-  const relatedUser4 = await Users.findOne({
-    offset: Math.floor(Math.random() * (await Users.count())),
-  });
-  const Instructor4 = await Instructors.findOne({
-    order: [['id', 'ASC']],
-    offset: 4,
-  });
-  if (Instructor4?.setUser) {
-    await Instructor4.setUser(relatedUser4);
-  }
 }
 
 // Similar logic for "relation_many"
@@ -703,17 +583,6 @@ async function associateStudentWithUser() {
   if (Student3?.setUser) {
     await Student3.setUser(relatedUser3);
   }
-
-  const relatedUser4 = await Users.findOne({
-    offset: Math.floor(Math.random() * (await Users.count())),
-  });
-  const Student4 = await Students.findOne({
-    order: [['id', 'ASC']],
-    offset: 4,
-  });
-  if (Student4?.setUser) {
-    await Student4.setUser(relatedUser4);
-  }
 }
 
 // Similar logic for "relation_many"
@@ -764,17 +633,6 @@ async function associateTaskWithCategory() {
   if (Task3?.setCategory) {
     await Task3.setCategory(relatedCategory3);
   }
-
-  const relatedCategory4 = await Categories.findOne({
-    offset: Math.floor(Math.random() * (await Categories.count())),
-  });
-  const Task4 = await Tasks.findOne({
-    order: [['id', 'ASC']],
-    offset: 4,
-  });
-  if (Task4?.setCategory) {
-    await Task4.setCategory(relatedCategory4);
-  }
 }
 
 module.exports = {

frontend/src/components/Tasks/TableTasks.tsx

@@ -20,6 +20,9 @@ import _ from 'lodash';
 import dataFormatter from '../../helpers/dataFormatter';
 import { dataGridStyles } from '../../styles';
 
+import KanbanBoard from '../KanbanBoard/KanbanBoard';
+import axios from 'axios';
+
 const perPage = 10;
 
 const TableSampleTasks = ({
@@ -46,6 +49,12 @@ const TableSampleTasks = ({
     },
   ]);
 
+  const [kanbanColumns, setKanbanColumns] = useState<Array<{
+    id: string;
+    label: string;
+  }> | null>(null);
+  const [kanbanFilters, setKanbanFilters] = useState('');
+
   const {
     tasks,
     loading,
@@ -98,6 +107,17 @@ const TableSampleTasks = ({
     setIsModalTrashActive(false);
   };
 
+  useEffect(() => {
+    axios
+      .get('/categories/autocomplete?limit=100')
+      .then((res) => {
+        setKanbanColumns(res.data);
+      })
+      .catch((err) => {
+        console.error('Error fetching kanban columns:', err);
+      });
+  }, []);
+
   const handleDeleteModalAction = (id: string) => {
     setId(id);
     setIsModalTrashActive(true);
@@ -146,12 +166,16 @@ const TableSampleTasks = ({
     } else {
       loadData(0, '');
 
+      setKanbanFilters('');
+
       setFilterItems(newItems);
     }
   };
 
   const handleSubmit = () => {
     loadData(0, generateFilterRequests);
+
+    setKanbanFilters(generateFilterRequests);
   };
 
   const handleChange = (id) => (e) => {
@@ -171,6 +195,8 @@ const TableSampleTasks = ({
   const handleReset = () => {
     setFilterItems([]);
     loadData(0, '');
+
+    setKanbanFilters('');
   };
 
   const onPageChange = (page: number) => {
@@ -461,7 +487,19 @@ const TableSampleTasks = ({
         <p>Are you sure you want to delete this item?</p>
       </CardBoxModal>
 
-      {dataGrid}
+      {!showGrid && kanbanColumns && (
+        <KanbanBoard
+          columnFieldName={'category'}
+          showFieldName={'name'}
+          entityName={'tasks'}
+          filtersQuery={kanbanFilters}
+          deleteThunk={deleteItem}
+          updateThunk={update}
+          columns={kanbanColumns}
+        />
+      )}
+
+      {showGrid && dataGrid}
 
       {selectedRows.length > 0 &&
         createPortal(

frontend/src/pages/tasks/tasks-list.tsx

@@ -125,16 +125,18 @@ const TasksTablesPage = () => {
           <div className='md:inline-flex items-center ms-auto'>
             <div id='delete-rows-button'></div>
           </div>
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <Link href={'/tasks/tasks-table'}>Switch to Table</Link>
+          </div>
         </CardBox>
 
-        <CardBox className='mb-6' hasTable>
+        <TableTasks
-          <TableTasks
+          filterItems={filterItems}
-            filterItems={filterItems}
+          setFilterItems={setFilterItems}
-            setFilterItems={setFilterItems}
+          filters={filters}
-            filters={filters}
+          showGrid={false}
-            showGrid={false}
+        />
-          />
-        </CardBox>
       </SectionMain>
       <CardBoxModal
         title='Upload CSV'

frontend/src/pages/tasks/tasks-table.tsx

@@ -124,6 +124,10 @@ const TasksTablesPage = () => {
 
           <div className='md:inline-flex items-center ms-auto'>
             <div id='delete-rows-button'></div>
+
+            <Link href={'/tasks/tasks-list'}>
+              Back to <span className='capitalize'>kanban</span>
+            </Link>
           </div>
         </CardBox>
         <CardBox className='mb-6' hasTable>

frontend/src/pages/web_pages/services.tsx

@@ -133,7 +133,7 @@ export default function WebSite() {
         <FeaturesSection
           projectName={'hello lo'}
           image={['Dashboard displaying key metrics']}
-          withBg={1}
+          withBg={0}
           features={features_points}
           mainText={`Explore ${projectName}'s Exceptional Features`}
           subTitle={`Discover the powerful features of ${projectName} designed to enhance your online education experience. From intuitive course management to insightful analytics, we offer it all.`}