Skip to content

Commit 0643d85

Browse files
RWEMAREMYRWEMAREMY
committed
main admin dashboard
1 parent 31852e3 commit 0643d85

File tree

6 files changed

+254
-29
lines changed

6 files changed

+254
-29
lines changed

‎package-lock.json

+6-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
"apollo-upload-client": "^17.0.0",
5858
"autoprefixer": "^10.4.14",
5959
"axios": "^1.6.1",
60-
"chart.js": "^4.3.2",
60+
"chart.js": "^4.4.6",
6161
"cleave.js": "^1.6.0",
6262
"cloudinary": "^1.39.0",
6363
"cloudinary-react": "^1.8.1",

‎src/Chart/AppointmentsChart.tsx

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React from 'react';
2+
import { Line } from 'react-chartjs-2';
3+
import {
4+
Chart as ChartJS,
5+
CategoryScale,
6+
LinearScale,
7+
PointElement,
8+
LineElement,
9+
Title,
10+
Tooltip,
11+
Legend,
12+
} from 'chart.js';
13+
14+
ChartJS.register(
15+
CategoryScale,
16+
LinearScale,
17+
PointElement,
18+
LineElement,
19+
Title,
20+
Tooltip,
21+
Legend,
22+
);
23+
24+
// eslint-disable-next-line react/function-component-definition
25+
const AppointmentsChart: React.FC = () => {
26+
const data = {
27+
labels: [
28+
'01',
29+
'02',
30+
'03',
31+
'04',
32+
'05',
33+
'06',
34+
'07',
35+
'08',
36+
'09',
37+
'10',
38+
'11',
39+
'12',
40+
'13',
41+
'14',
42+
'15',
43+
'16',
44+
'17',
45+
'18',
46+
'19',
47+
'20',
48+
'21',
49+
'22',
50+
'23',
51+
'24',
52+
'25',
53+
'26',
54+
'27',
55+
'28',
56+
'29',
57+
'30',
58+
'31',
59+
],
60+
datasets: [
61+
{
62+
label: 'Last days',
63+
data: [
64+
1, 3, 0, 2, 1, 3, 2, 0, 2, 1, 3, 0, 2, 1, 4, 1, 2, 4, 7, 2, 3, 4, 4,
65+
3, 8, 0, 3, 5, 7,
66+
],
67+
fill: false,
68+
borderColor: '#4F46E5',
69+
tension: 0.4,
70+
},
71+
{
72+
label: 'Last days',
73+
data: [
74+
2, 3, 6, 4, 3, 4, 2, 1, 2, 6, 2, 2, 3, 2, 3, 5, 7, 2, 1, 2, 4, 6, 6,
75+
1, 2, 3, 4, 5, 6.5,
76+
],
77+
fill: false,
78+
borderColor: '#8C8120',
79+
tension: 0.4,
80+
},
81+
],
82+
};
83+
84+
const options = {
85+
responsive: true,
86+
plugins: {
87+
legend: {
88+
position: 'bottom' as const,
89+
},
90+
},
91+
scales: {
92+
y: {
93+
beginAtZero: true,
94+
grid: {
95+
color: '#D1D5DB',
96+
},
97+
},
98+
x: {
99+
grid: {
100+
display: false,
101+
},
102+
},
103+
},
104+
};
105+
106+
return (
107+
<div className="w-full h-[300px]">
108+
<Line data={data} options={options} className="-ml-8" />
109+
</div>
110+
);
111+
};
112+
113+
export default AppointmentsChart;

‎src/Chart/BarChart.tsx

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import React from 'react';
2+
import { Bar } from 'react-chartjs-2';
3+
import {
4+
Chart as ChartJS,
5+
CategoryScale,
6+
LinearScale,
7+
BarElement,
8+
Title,
9+
Tooltip,
10+
Legend,
11+
} from 'chart.js';
12+
13+
ChartJS.register(
14+
CategoryScale,
15+
LinearScale,
16+
BarElement,
17+
Title,
18+
Tooltip,
19+
Legend,
20+
);
21+
22+
interface Props {}
23+
24+
// eslint-disable-next-line react/function-component-definition
25+
const BarChart: React.FC<Props> = () => {
26+
const data = {
27+
labels: [
28+
'01',
29+
'02',
30+
'03',
31+
'04',
32+
'05',
33+
'06',
34+
'07',
35+
'08',
36+
'09',
37+
'10',
38+
'11',
39+
'12',
40+
],
41+
datasets: [
42+
{
43+
label: 'Last 8 days',
44+
data: [12, 19, 3, 5, 2, 3, 12, 14, 5, 7, 9, 11],
45+
backgroundColor: '#5A6ACF',
46+
borderRadius: 0,
47+
barThickness: 8,
48+
},
49+
{
50+
label: 'Last Week',
51+
data: [10, 15, 5, 8, 6, 9, 13, 9, 6, 8, 7, 10],
52+
backgroundColor: '#D1D5DB',
53+
borderRadius: 0,
54+
barThickness: 8,
55+
},
56+
],
57+
};
58+
59+
const options = {
60+
responsive: true,
61+
maintainAspectRatio: false,
62+
plugins: {
63+
legend: {
64+
position: 'bottom' as const,
65+
labels: {
66+
color: '#121212',
67+
},
68+
},
69+
tooltip: {
70+
enabled: true,
71+
},
72+
},
73+
scales: {
74+
x: {
75+
grid: {
76+
display: false,
77+
},
78+
ticks: {
79+
color: '#737B8B',
80+
},
81+
},
82+
y: {
83+
grid: {
84+
borderDash: [5, 5],
85+
color: '#ffffff',
86+
},
87+
ticks: {
88+
color: '#ffffff',
89+
},
90+
},
91+
},
92+
};
93+
94+
return (
95+
<div className="w-full h-[300px]">
96+
<Bar data={data} options={options} className="-ml-8" />
97+
</div>
98+
);
99+
};
100+
101+
export default BarChart;

‎src/components/ProgramUsersModal.tsx

+14-14
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22
import { gql, useQuery } from '@apollo/client';
3-
import DataTable from './DataTable';
43
import Dialog from '@mui/material/Dialog';
54
import DialogContent from '@mui/material/DialogContent';
65
import DialogTitle from '@mui/material/DialogTitle';
76
import { styled } from '@mui/material/styles';
7+
import DataTable from './DataTable';
88

99
interface User {
1010
email: string;
@@ -70,7 +70,7 @@ export function ProgramUsersModal({
7070
isOpen,
7171
onClose,
7272
// defaultProgram = 'default',
73-
programName
73+
programName,
7474
}: ProgramUsersModalProps) {
7575
const { data, loading, error } = useQuery(GET_ALL_USERS, {
7676
variables: {
@@ -79,10 +79,11 @@ export function ProgramUsersModal({
7979
skip: !isOpen,
8080
});
8181

82-
const programUsers = data?.getAllUsers.filter(
83-
(user: User) => user.team?.cohort?.program?.name === programName
82+
const programUsers =
83+
data?.getAllUsers.filter(
84+
(user: User) => user.team?.cohort?.program?.name === programName,
8485
// || (user.team === null && programName === defaultProgram)
85-
) || [];
86+
) || [];
8687

8788
const columns = [
8889
{
@@ -91,7 +92,11 @@ export function ProgramUsersModal({
9192
Cell: ({ value }: CellProps) => (
9293
<div className="flex items-center">
9394
<span className="hidden ml-2 md:inline-block h-8 w-8 rounded-full overflow-hidden bg-gray-100 dark:bg-gray-700">
94-
<svg className="h-full w-full text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 24 24">
95+
<svg
96+
className="h-full w-full text-gray-300 dark:text-gray-500"
97+
fill="currentColor"
98+
viewBox="0 0 24 24"
99+
>
95100
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
96101
</svg>
97102
</span>
@@ -119,7 +124,7 @@ export function ProgramUsersModal({
119124
if (loading) {
120125
return (
121126
<div className="flex justify-center items-center h-48">
122-
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
127+
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
123128
</div>
124129
);
125130
}
@@ -152,12 +157,7 @@ export function ProgramUsersModal({
152157
};
153158

154159
return (
155-
<StyledDialog
156-
open={isOpen}
157-
onClose={onClose}
158-
maxWidth="md"
159-
fullWidth
160-
>
160+
<StyledDialog open={isOpen} onClose={onClose} maxWidth="md" fullWidth>
161161
<div className="bg-white dark:bg-gray-800 rounded-t-lg">
162162
<StyledDialogTitle className="text-gray-900 dark:text-white border-b dark:border-gray-700">
163163
{programName} - Users
@@ -168,4 +168,4 @@ export function ProgramUsersModal({
168168
</div>
169169
</StyledDialog>
170170
);
171-
}
171+
}

‎src/pages/AdminDashboard.tsx

+19-10
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import { t } from 'i18next';
33
import { useTranslation } from 'react-i18next';
44
import { useMutation } from '@apollo/client';
55
import { toast } from 'react-toastify';
6+
import BarChart from '../Chart/BarChart';
7+
import AppointmentsChart from '../Chart/AppointmentsChart';
68
// eslint-disable-next-line import/no-useless-path-segments
79
import useDocumentTitle from '../hook/useDocumentTitle';
810
import Comingsoon from './Comingsoon';
@@ -54,11 +56,10 @@ function SupAdDashboard() {
5456
}, [inviteEmail]);
5557
return (
5658
<>
57-
{/* =========================== Start:: InviteTraineeModel =============================== */}
58-
5959
<div
60-
className={`font-serif overflow-hidden h-screen w-screen bg-black bg-opacity-30 backdrop-blur-sm fixed top-0 left-0 z-20 flex items-center justify-center px-4 ${inviteTraineeModel === true ? 'block' : 'hidden'
61-
}`}
60+
className={`font-serif overflow-hidden h-screen w-screen bg-black bg-opacity-30 backdrop-blur-sm fixed top-0 left-0 z-20 flex items-center justify-center px-4 ${
61+
inviteTraineeModel === true ? 'block' : 'hidden'
62+
}`}
6263
>
6364
<div className="w-full p-4 pb-8 bg-indigo-100 rounded-lg dark:bg-dark-bg sm:w-3/4 xl:w-4/12">
6465
<div className="flex flex-wrap items-center justify-center w-full card-title ">
@@ -122,17 +123,25 @@ function SupAdDashboard() {
122123
</div>
123124
</div>
124125
</div>
125-
{/* =========================== End:: InviteTraineeModel =============================== */}
126-
127126
<div className="flex flex-col grow bg-light-bg dark:bg-dark-frame-bg">
128-
<div className="flex flex-row justify-center pb-8">
129-
<div className="w-[100%] h-[100%]">
130-
<Comingsoon title="Dashboard" />
127+
<div className="flex flex-col justify-between">
128+
<div className="w-[80%] h-[100%] pl-[90px] pb-8 flex flex-row ">
129+
<div className="flex flex-col justify-center">
130+
<span className="mr-[80px] rotate-90 ">Users</span>
131+
</div>
132+
<AppointmentsChart />
133+
</div>
134+
135+
<div className="w-[80%] h-[100%] pl-[90px] pb-8 flex flex-row ">
136+
<div className="flex flex-col justify-center">
137+
<span className="mr-[80px] rotate-90 ">Teams</span>
138+
</div>
139+
<BarChart />
131140
</div>
132141
</div>
133142
</div>
134143
</>
135144
);
136145
}
137146

138-
export default SupAdDashboard;
147+
export default SupAdDashboard;

0 commit comments

Comments
 (0)