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",
@@ -109,6 +111,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

@@ -75,13 +75,14 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
           <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">
@@ -113,8 +114,8 @@ 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}
@@ -167,7 +168,7 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
           pageCount={pageCount}
           pageIndex={pageIndex}
         />
-      </div>
+      </div> 
     </div>
   );
 }

src/components/DataTable.tsx

@@ -37,36 +37,39 @@ const TraineeChart: React.FC<TraineeChartProps> = ({ barChartData }) => {
 
   return (
     <div className="Trainee-chart font-serif">
-      <LineChart width={1000} height={220} data={chartData}>
+      <LineChart width={1000} height={230} data={chartData}>
         <CartesianGrid stroke="#ccc" />
         <XAxis
           dataKey="name"
-          label={{ value: 'Sprint', position: 'insideBottom', offset: -2 }}
+          label={{ value: 'Sprints', position: 'insideBottom', offset: -2 }}
+          interval={0}
+          tickFormatter={(value) => `${value}`} 
         />
         <YAxis label={{ value: 'Score', angle: -90, position: 'insideLeft' }} />
         <Tooltip />
-        <Legend iconType="circle" iconSize={10} />
-
+        <div className='mt-3'></div>
+          <Legend iconType="circle" iconSize={10} />
+        
         <Line
           type="monotone"
           dataKey="Professionalism"
           stroke="#1b5e20"
           strokeWidth={2}
-          dot={false}
+          dot={true}
         />
         <Line
           type="monotone"
           dataKey="Quality"
           stroke="#8667f2"
           strokeWidth={2}
-          dot={false}
+          dot={true}
         />
         <Line
           type="monotone"
           dataKey="Quantity"
           stroke="#b5a72a"
           strokeWidth={2}
-          dot={false}
+          dot={true}
         />
       </LineChart>
     </div>