(fix): add coordinator dashboard page

Author: Tuyisenge2

src/components/DataTable.tsx

@@ -66,7 +66,7 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
 
   return (
     <div
-      className={`relative font-serif bg-indigo-100 dark:bg-dark-bg shadow-lg h-fit px-5 py-8 rounded-md w-[100%] "lg:ml-60 mx-auto"} mb-10`}
+      className={`relative font-serif bg-indigo-100 dark:bg-dark-bg shadow-lg h-fit px-5 py-8 rounded-md w-[100%] overflow-scroll "lg:ml-60 mx-auto"} mb-10`}
     >
       <div className="flex items-center justify-between pb-6 ">
         <div>
@@ -112,7 +112,6 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
               !loading &&
               page.map((row) => {
                 prepareRow(row);
-                // console.log(row.getRowProps());
                 return (
                   <tr
                     className={`border-b dark:border-gray-700 ${

src/components/InvitationTable.tsx

@@ -1,11 +1,11 @@
-import React, { useMemo } from "react";
+import React, { useMemo } from 'react';
 import {
   createColumnHelper,
   flexRender,
   getCoreRowModel,
   useReactTable,
-} from "@tanstack/react-table";
-import Pagination from "../components/InvitationDataPagination";
+} from '@tanstack/react-table';
+import Pagination from '../components/InvitationDataPagination';
 import SkeletonTable from '../Skeletons/SkeletonTable';
 
 interface Column {
@@ -19,7 +19,10 @@ interface TableProps {
   data: any[];
   loading: boolean;
   rowCount: number;
-  onPaginationChange: (pagination: { pageIndex: number; pageSize: number }) => void;
+  onPaginationChange: (pagination: {
+    pageIndex: number;
+    pageSize: number;
+  }) => void;
   pagination: { pageSize: number; pageIndex: number };
 }
 
@@ -42,22 +45,29 @@ function InvitationTable({
       cols.map((column) => {
         if (typeof column.accessor === 'string') {
           return columnHelper.accessor(column.accessor, {
-            header: typeof column.header === 'string' ? column.header : column.header(),
+            header:
+              typeof column.header === 'string'
+                ? column.header
+                : column.header(),
             cell: column.cell,
           });
-        } else if (typeof column.accessor === 'function') {
+        }
+        if (typeof column.accessor === 'function') {
           return columnHelper.accessor((row) => column.accessor(row), {
-            header: typeof column.header === 'string' ? column.header : column.header(),
-            cell: column.cell,
-          });
-        } else {
-          return columnHelper.display({
-            header: typeof column.header === 'string' ? column.header : column.header(),
+            header:
+              typeof column.header === 'string'
+                ? column.header
+                : column.header(),
             cell: column.cell,
           });
         }
+        return columnHelper.display({
+          header:
+            typeof column.header === 'string' ? column.header : column.header(),
+          cell: column.cell,
+        });
       }),
-    [cols]
+    [cols],
   );
 
   const tableLib = useReactTable({
@@ -83,11 +93,11 @@ function InvitationTable({
               {tableLib.getHeaderGroups().map((headerGroup) => (
                 <tr key={headerGroup.id}>
                   {headerGroup.headers.map((header) => (
-                    <th
-                      key={header.id}
-                      className="thead"
-                    >
-                      {flexRender(header.column.columnDef.header, header.getContext())}
+                    <th key={header.id} className="thead">
+                      {flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )}
                     </th>
                   ))}
                 </tr>
@@ -116,18 +126,21 @@ function InvitationTable({
                   }`}
                 >
                   {row.getVisibleCells().map((cell) => (
-                    <td
-                      key={cell.id}
-                      className="data-cell "
-                    >
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    <td key={cell.id} className="data-cell ">
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
                     </td>
                   ))}
                 </tr>
               ))}
               {!loading && data.length === 0 && (
                 <tr>
-                  <td colSpan={tableColumns.length || 100} className="text-center p-4">
+                  <td
+                    colSpan={tableColumns.length || 100}
+                    className="text-center p-4"
+                  >
                     <div className="flex flex-col items-center justify-center space-y-4">
                       <p className="text-gray-600 dark:text-gray-400 text-lg font-medium">
                         No records available

src/components/NotFoundPage.tsx

@@ -1,19 +1,21 @@
-
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const NotFound=() => {
+function NotFound() {
   return (
     <div className="flex items-center justify-center h-screen bg-gray-100">
       <div className="text-center">
         <h1 className="text-4xl font-bold text-red-600">404</h1>
         <p className="text-lg text-gray-700 mt-4">Page not found</p>
-        <Link to="/" className="mt-6 inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+        <Link
+          to="/"
+          className="mt-6 inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+        >
           Go Back Home
         </Link>
       </div>
     </div>
   );
-};
+}
 
 export default NotFound;