Skip to content

Commit 05f1cc0

Browse files
Tuyisenge2Tuyisenge2
committed
(fix): add coordinator dashboard page
1 parent 4321d94 commit 05f1cc0

File tree

6 files changed

+1764
-31
lines changed

6 files changed

+1764
-31
lines changed

‎src/components/DataTable.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
6666

6767
return (
6868
<div
69-
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`}
69+
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`}
7070
>
7171
<div className="flex items-center justify-between pb-6 ">
7272
<div>
@@ -112,7 +112,6 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
112112
!loading &&
113113
page.map((row) => {
114114
prepareRow(row);
115-
// console.log(row.getRowProps());
116115
return (
117116
<tr
118117
className={`border-b dark:border-gray-700 ${

‎src/components/InvitationTable.tsx‎

Lines changed: 37 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React, { useMemo } from "react";
1+
import React, { useMemo } from 'react';
22
import {
33
createColumnHelper,
44
flexRender,
55
getCoreRowModel,
66
useReactTable,
7-
} from "@tanstack/react-table";
8-
import Pagination from "../components/InvitationDataPagination";
7+
} from '@tanstack/react-table';
8+
import Pagination from '../components/InvitationDataPagination';
99
import SkeletonTable from '../Skeletons/SkeletonTable';
1010

1111
interface Column {
@@ -19,7 +19,10 @@ interface TableProps {
1919
data: any[];
2020
loading: boolean;
2121
rowCount: number;
22-
onPaginationChange: (pagination: { pageIndex: number; pageSize: number }) => void;
22+
onPaginationChange: (pagination: {
23+
pageIndex: number;
24+
pageSize: number;
25+
}) => void;
2326
pagination: { pageSize: number; pageIndex: number };
2427
}
2528

@@ -42,22 +45,29 @@ function InvitationTable({
4245
cols.map((column) => {
4346
if (typeof column.accessor === 'string') {
4447
return columnHelper.accessor(column.accessor, {
45-
header: typeof column.header === 'string' ? column.header : column.header(),
48+
header:
49+
typeof column.header === 'string'
50+
? column.header
51+
: column.header(),
4652
cell: column.cell,
4753
});
48-
} else if (typeof column.accessor === 'function') {
54+
}
55+
if (typeof column.accessor === 'function') {
4956
return columnHelper.accessor((row) => column.accessor(row), {
50-
header: typeof column.header === 'string' ? column.header : column.header(),
51-
cell: column.cell,
52-
});
53-
} else {
54-
return columnHelper.display({
55-
header: typeof column.header === 'string' ? column.header : column.header(),
57+
header:
58+
typeof column.header === 'string'
59+
? column.header
60+
: column.header(),
5661
cell: column.cell,
5762
});
5863
}
64+
return columnHelper.display({
65+
header:
66+
typeof column.header === 'string' ? column.header : column.header(),
67+
cell: column.cell,
68+
});
5969
}),
60-
[cols]
70+
[cols],
6171
);
6272

6373
const tableLib = useReactTable({
@@ -83,11 +93,11 @@ function InvitationTable({
8393
{tableLib.getHeaderGroups().map((headerGroup) => (
8494
<tr key={headerGroup.id}>
8595
{headerGroup.headers.map((header) => (
86-
<th
87-
key={header.id}
88-
className="thead"
89-
>
90-
{flexRender(header.column.columnDef.header, header.getContext())}
96+
<th key={header.id} className="thead">
97+
{flexRender(
98+
header.column.columnDef.header,
99+
header.getContext(),
100+
)}
91101
</th>
92102
))}
93103
</tr>
@@ -116,18 +126,21 @@ function InvitationTable({
116126
}`}
117127
>
118128
{row.getVisibleCells().map((cell) => (
119-
<td
120-
key={cell.id}
121-
className="data-cell "
122-
>
123-
{flexRender(cell.column.columnDef.cell, cell.getContext())}
129+
<td key={cell.id} className="data-cell ">
130+
{flexRender(
131+
cell.column.columnDef.cell,
132+
cell.getContext(),
133+
)}
124134
</td>
125135
))}
126136
</tr>
127137
))}
128138
{!loading && data.length === 0 && (
129139
<tr>
130-
<td colSpan={tableColumns.length || 100} className="text-center p-4">
140+
<td
141+
colSpan={tableColumns.length || 100}
142+
className="text-center p-4"
143+
>
131144
<div className="flex flex-col items-center justify-center space-y-4">
132145
<p className="text-gray-600 dark:text-gray-400 text-lg font-medium">
133146
No records available

‎src/components/NotFoundPage.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1-
21
import React from 'react';
32
import { Link } from 'react-router-dom';
43

5-
const NotFound=() => {
4+
function NotFound() {
65
return (
76
<div className="flex items-center justify-center h-screen bg-gray-100">
87
<div className="text-center">
98
<h1 className="text-4xl font-bold text-red-600">404</h1>
109
<p className="text-lg text-gray-700 mt-4">Page not found</p>
11-
<Link to="/" className="mt-6 inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
10+
<Link
11+
to="/"
12+
className="mt-6 inline-block px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
13+
>
1214
Go Back Home
1315
</Link>
1416
</div>
1517
</div>
1618
);
17-
};
19+
}
1820

1921
export default NotFound;

‎src/pages/CoordinatorDashboard.tsx‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
/* eslint-disable jsx-a11y/no-redundant-roles */
2+
3+
import React, { useContext, useEffect, useState } from 'react';
4+
import { useTranslation } from 'react-i18next';
5+
// eslint-disable-next-line import/no-useless-path-segments
6+
import { Link } from 'react-router-dom';
7+
import { UserContext } from '../hook/useAuth';
8+
import AdminTraineeDashboard from './AdminTraineeDashboard';
9+
import CoordinatorTraineeDashboard from './coordinatorTraineDashboard';
10+
11+
function CoordinatorDashboard() {
12+
const { user } = useContext(UserContext);
13+
const { t }: any = useTranslation();
14+
const organizationToken = localStorage.getItem('orgToken');
15+
return (
16+
<>
17+
<div className="flex flex-col grow bg-light-bg dark:bg-dark-frame-bg">
18+
<div className="flex flex-row">
19+
<div className="flex flex-col w-[80%] mdl:w-[100%] mdl:justify-between gap-5 xmd:flex-row xmd:flex-wrap bg-light-bg dark:bg-dark-frame-bg py-4 font-serif">
20+
<div className="w-[20rem] p-4 bg-indigo-100 border border-gray-200 rounded-lg shadow sm:p-8 dark:bg-gray-800 dark:border-gray-700">
21+
<div className="flex items-center justify-between mb-4 h-8">
22+
<h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">
23+
Top perfoming cohorts
24+
</h5>
25+
</div>
26+
<div className="flow-root">
27+
<ul
28+
role="list"
29+
className="divide-y divide-gray-200 dark:divide-gray-700"
30+
>
31+
<li
32+
className={`py-3 sm:py-4 border-t border-t-black dark:border-t-gray-200 `}
33+
>
34+
<div className="flex items-center ">
35+
<div className="flex-shrink-0">
36+
<div className="w-8 h-8 rounded-full bg-white text-black flex items-center justify-center">
37+
B
38+
</div>
39+
</div>
40+
<div className="flex-1 min-w-0 ms-4">
41+
<p className="text-sm font-medium text-gray-900 truncate dark:text-white">
42+
Bonnie Green
43+
</p>
44+
<p className="text-sm text-gray-500 truncate dark:text-gray-400">
45+
[email protected]
46+
</p>
47+
</div>
48+
</div>
49+
</li>
50+
</ul>
51+
</div>
52+
</div>
53+
54+
<div className="w-[20rem] p-4 bg-indigo-100 border border-gray-200 rounded-lg shadow sm:p-8 dark:bg-gray-800 dark:border-gray-700">
55+
<div className="flex items-center justify-between mb-4 h-8">
56+
<h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">
57+
Top 3 Trainees
58+
</h5>
59+
</div>
60+
<div className="flow-root">
61+
<ul
62+
role="list"
63+
className="divide-y divide-gray-200 dark:divide-gray-700"
64+
>
65+
<li
66+
className={`py-3 sm:py-4 border-t border-t-black dark:border-t-gray-200 `}
67+
>
68+
<div className="flex items-center ">
69+
<div className="flex-shrink-0">
70+
<div className="w-8 h-8 rounded-full bg-white text-black flex items-center justify-center">
71+
B
72+
</div>
73+
</div>
74+
<div className="flex-1 min-w-0 ms-4">
75+
<p className="text-sm font-medium text-gray-900 truncate dark:text-white">
76+
Bonnie Green
77+
</p>
78+
<p className="text-sm text-gray-500 truncate dark:text-gray-400">
79+
[email protected]
80+
</p>
81+
</div>
82+
</div>
83+
</li>
84+
</ul>
85+
</div>
86+
</div>
87+
88+
<div className="w-[20rem] p-4 bg-indigo-100 border border-gray-200 rounded-lg shadow sm:p-8 dark:bg-gray-800 dark:border-gray-700">
89+
<div className="flex items-center justify-between mb-4 h-8">
90+
<h5 className="text-xl font-bold leading-none text-gray-900 dark:text-white">
91+
Last 3 Trainees
92+
</h5>
93+
</div>
94+
<div className="flow-root">
95+
<ul
96+
role="list"
97+
className="divide-y divide-gray-200 dark:divide-gray-700"
98+
>
99+
<li
100+
className={`py-3 sm:py-4 border-t border-t-black dark:border-t-gray-200 `}
101+
>
102+
<div className="flex items-center ">
103+
<div className="flex-shrink-0">
104+
<div className="w-8 h-8 rounded-full bg-white text-black flex items-center justify-center">
105+
B
106+
</div>
107+
</div>
108+
<div className="flex-1 min-w-0 ms-4">
109+
<p className="text-sm font-medium text-gray-900 truncate dark:text-white">
110+
Bonnie Green
111+
</p>
112+
<p className="text-sm text-gray-500 truncate dark:text-gray-400">
113+
[email protected]
114+
</p>
115+
</div>
116+
</div>
117+
</li>
118+
</ul>
119+
</div>
120+
</div>
121+
</div>
122+
</div>
123+
<div className=" fex-row justify-ceter w-[100%] pb8">
124+
<CoordinatorTraineeDashboard />
125+
</div>
126+
</div>
127+
</>
128+
);
129+
}
130+
131+
export default CoordinatorDashboard;

‎src/pages/Dashboard.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import SupAdDashboard from './SupAdDashboard';
44
import AdminDashboard from './AdminDashboard';
55
import TraineeDashboard from './TraineeDashboard';
66
import ManagerCard from '../components/ManagerCard';
7+
import CoordinatorDashboard from './CoordinatorDashboard';
78

89
export function Dashboard() {
910
return (
@@ -21,7 +22,7 @@ export function Dashboard() {
2122
<TraineeDashboard />
2223
</CheckRole>
2324
<CheckRole roles={['coordinator']}>
24-
<AdminDashboard />
25+
<CoordinatorDashboard />
2526
</CheckRole>
2627
<CheckRole roles={['manager']}>
2728
<ManagerCard />

0 commit comments

Comments
 (0)