updating-trainee-dashboard

Author: kanu-cast

package-lock.json

@@ -32,8 +32,8 @@
   "homepage": "https://github.com/atlp-rwanda/atlp-pulse-fn#readme",
   "dependencies": {
     "@babel/preset-react": "^7.22.5",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
     "@fullcalendar/interaction": "^6.1.15",
@@ -44,8 +44,10 @@
     "@heroicons/react": "^1.0.6",
     "@iconify/react": "^3.2.2",
     "@mui/icons-material": "^5.14.0",
-    "@mui/material": "^5.14.0",
+    "@mui/material": "^5.16.7",
     "@mui/styled-engine": "^5.13.2",
+    "@mui/styled-engine-sc": "^6.1.3",
+    "@mui/x-charts": "^7.19.0",
     "@mui/x-data-grid": "^5.17.26",
     "@react-pdf-viewer/core": "^3.12.0",
     "@tanstack/react-table": "^8.20.5",
@@ -110,6 +112,7 @@
     "recharts": "^2.7.2",
     "sheetjs-style": "^0.15.8",
     "sinon": "^14.0.2",
+    "styled-components": "^6.1.13",
     "subscriptions-transport-ws": "^0.11.0",
     "tailwindcss": "^3.3.3",
     "url-polyfill": "^1.1.12",

package.json

@@ -68,23 +68,24 @@ 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%] overflow-scroll "lg:ml-60 mx-auto"} mb-10 ${className}`}
+      className={`relative font-serif bg-indigo-100 dark:bg-dark-bg shadow-lg h-fit px-5 md:py-4 lg:py-5 rounded-md w-[100%] overflow-auto custom-scrollbar "lg:ml-60 mx-auto"} mb-10 ${className}`}
     >
       <div className="flex flex-col md:flex-row items-center justify-between pb-6 space-y-4 md:space-y-0">
         <div>
           <h2 className="text-lg md:text-xl font-semibold text-gray-800 dark:text-white">
             {t(title)}
           </h2>
-          <input
+          {/* Uncomment if you want a filter input */}
+          {/* <input
             value={filterInput}
             aria-label="Filter table data"
             placeholder="Filter"
             className="px-4 py-2 mt-4 font-sans text-xs md:text-sm border rounded outline-none border-primary dark:bg-neutral-600 dark:text-white w-full sm:w-52 md:w-96"
             onChange={handleFilterChange}
-          />
+          /> */}
         </div>
       </div>
-      <div className="overflow-x-auto">
+      <div className="overflow-x-auto custom-scrollbar">
         <table
           className="min-w-full leading-normal text-xs md:text-sm"
           {...getTableProps()}
@@ -94,7 +95,9 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
               <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
                 {headerGroup.headers.map((column) => (
                   <th
-                    className={`thead ${column.isSorted ? 'sort-asc' : ''}`}
+                    className={`thead w-1/${columns.length} text-center  ${
+                      column.isSorted ? 'sort-asc' : ''
+                    }`}
                     {...column.getHeaderProps(column.getSortByToggleProps())}
                     key={column.id}
                   >
@@ -113,15 +116,15 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
                   <tr
                     className={`border-b dark:border-gray-700 ${
                       row.index % 2 === 0
-                        ? 'bg-light-bg dark:bg-neutral-600'
-                        : 'bg-white dark:bg-dark-bg'
+                        ? 'bg-gray-600 dark:bg-neutral-600'
+                        : 'bg-transparent'
                     }`}
                     {...row.getRowProps()}
                     key={row.id}
                   >
                     {row.cells.map((cell) => (
                       <td
-                        className="data-cell px-4 py-2"
+                        className={`w-1/${columns.length} data-cell px-4 py-2 text-center`}
                         {...cell.getCellProps()}
                         key={cell.column.id}
                       >