Ft trainee dashboard (#252)

* trainee dashboard redsign

* trainee dashboard redsign

* trainee dashboard re-design

* trainee dashboard re-design

* rebase develop

* finished trainee dashboard

src/Mutations/Ratings.tsx

@@ -158,6 +158,7 @@ export const ADD_RATING = gql`
         email
       }
       sprint
+      phase
       cohort {
         name
         id
@@ -301,6 +302,8 @@ export const TRAINEE_RATING = gql`
         email
       }
       sprint
+      phase
+      sprint
       quantity
       quantityRemark
       quality
@@ -309,6 +312,7 @@ export const TRAINEE_RATING = gql`
       professionalRemark
       average
       cohort {
+        name
         phase {
           name
         }
@@ -376,7 +380,7 @@ export const GET_ALL_TRAINEES = gql`
       team {
         name
         cohort {
-          endDate
+          endDateb
           startDate
           phase {
             name

src/components/Sidebar.tsx

@@ -209,4 +209,4 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
   );
 }
 
-export default Sidebar;
+export default Sidebar;

src/components/TraineeDashboardChart.tsx

@@ -0,0 +1,51 @@
+/* eslint-disable react/function-component-definition */
+/* eslint-disable import/no-extraneous-dependencies */
+
+
+import React from 'react';
+import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip, Legend } from 'recharts';
+
+interface TableRow {
+  sprint: number;
+  quality: number;
+  quantity: number;
+  professionalism: number;
+  attendance: number;
+  comment: string;
+}
+
+interface TraineeChartProps {
+  barChartData: TableRow[];
+}
+
+const TraineeChart: React.FC<TraineeChartProps> = ({ barChartData }) => {
+  const chartData = barChartData
+    .map((entry) => ({
+      name: entry.sprint,
+      Professionalism: entry.professionalism,
+      Quality: entry.quality,
+      Quantity: entry.quantity,
+    }))
+    .sort((a, b) => a.name - b.name);
+
+  const xAxisTickValues = chartData.map((entry) => entry.name);
+
+  return (
+    <div className='Trainee-chart'>
+      <LineChart width={1150} height={220} data={chartData}>
+        <Line type="monotone" dataKey="Professionalism" stroke="#1b5e20" strokeWidth={2} dot={false} />
+        <Line type="monotone" dataKey="Quality" stroke="#8667f2" strokeWidth={2} dot={false} />
+        <Line type="monotone" dataKey="Quantity" stroke="#b5a72a" strokeWidth={2} dot={false} />
+        <CartesianGrid stroke="#ccc" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Legend iconType='circle' iconSize={10} />
+      </LineChart>
+    </div>
+  );
+};
+
+export default TraineeChart;
+
+

src/components/TraineeTable.tsx

@@ -0,0 +1,134 @@
+
+/* eslint-disable react/button-has-type */
+// @ts-nocheck
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  useGlobalFilter,
+  usePagination,
+  useSortBy,
+  useTable,
+} from 'react-table';
+import Pagination from '../components/Pagination';
+import DataPagination from './DataPagination';
+
+interface TableData {
+  data: any[];
+  columns: any;
+  title: string;
+  loading?: boolean;
+}
+
+function Table({ data, columns, title, loading }: TableData) {
+  // const sortedData = React.useMemo(() => [...data], []);
+  const sortedColumns = React.useMemo(() => [...columns], [columns]);
+  const sortedData = data;
+  // const sortedColumns = columns;
+  const TableInstance = useTable(
+    { data: sortedData, columns: sortedColumns, initialState: { pageSize: 5 } },
+
+    useGlobalFilter,
+    useSortBy,
+    usePagination,
+  );
+  const { t } = useTranslation();
+
+  const {
+    getTableProps,
+    getTableBodyProps,
+    page,
+    headerGroups,
+    prepareRow,
+    nextPage,
+    canPreviousPage,
+    previousPage,
+    canNextPage,
+    gotoPage,
+    pageCount,
+    setPageSize,
+    pageOptions,
+    state,
+  } = TableInstance;
+  // @ts-ignore
+  const { globalFilter, pageIndex, pageSize } = state;
+
+  return (
+    <div className=" shadow-lg py-6  w-[100%] mb-10 ">
+      <div style={{ overflowX: 'auto' }}>
+        <table className=" leading-3 rounded-full w-[100%]" {...getTableProps()}>
+          <thead>
+            {headerGroups.map((headerGroup) => (
+              <tr {...headerGroup.getHeaderGroupProps()}>
+                {headerGroup.headers.map((column) => (
+                  <th
+                    className={
+                      column.isSorted ? 'sort-asc ' : 'bg-[#B8CDBA] p-4 '
+                    }
+                    {...column.getHeaderProps(column.getSortByToggleProps())}
+                  >
+                    {column.render('Header')}
+                  </th>
+                ))}
+              </tr>
+            ))}
+          </thead>
+          <tbody  {...getTableBodyProps()}>
+            {page.map((row) => {
+              prepareRow(row);
+
+              // eslint-disable-next-line operator-linebreak
+              const rowTheme =
+                row.index % 2 !== 0
+                  ? 'bg-[#f5f8ff] dark:bg-dark-bg'
+                  : 'bg-white dark:bg-dark-bg';
+
+              return (
+                <tr className={` ${rowTheme} `} {...row.getRowProps()}>
+                  {row.cells.map((cell) => (
+                    <td className="border  py-2 px-24" {...cell.getCellProps()}>
+                      {cell.render('Cell')}
+                    </td>
+                  ))}
+                </tr>
+              );
+            })}
+            {loading && (
+              <tr>
+                <td
+                  colSpan={columns.length || 100}
+                  style={{ textAlign: 'center' }}
+                >
+                  loading...
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+
+<DataPagination
+          pageOptions={pageOptions}
+          canNextPage={canNextPage}
+          gotoPage={gotoPage}
+          columnLength={columns.length}
+          canPreviousPage={canPreviousPage}
+          pageSize={pageSize}
+          setPageSize={setPageSize}
+          previousPage={previousPage}
+          nextPage={nextPage}
+          pageCount={pageCount}
+          pageIndex={pageIndex}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Table;
+
+
+
+
+
+
+
+

src/components/TraineesChart.tsx

@@ -70,4 +70,4 @@ const TraineeChart: React.FC<TraineeChartProps> = ({ barChartData }) => {
   );
 };
 
-export default TraineeChart;
+export default TraineeChart;