Skip to content

Commit 3f248c6

Browse files
RWEMAREMYBananayosostene
RWEMAREMY
authored and
Bananayosostene
committed
new piechart and stats updated
1 parent 0643d85 commit 3f248c6

File tree

5 files changed

+238
-10
lines changed

5 files changed

+238
-10
lines changed

Diff for: ‎src/Chart/BarChart.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -40,14 +40,14 @@ const BarChart: React.FC<Props> = () => {
4040
],
4141
datasets: [
4242
{
43-
label: 'Last 8 days',
43+
label: 'Nova',
4444
data: [12, 19, 3, 5, 2, 3, 12, 14, 5, 7, 9, 11],
4545
backgroundColor: '#5A6ACF',
4646
borderRadius: 0,
4747
barThickness: 8,
4848
},
4949
{
50-
label: 'Last Week',
50+
label: 'Fighters',
5151
data: [10, 15, 5, 8, 6, 9, 13, 9, 6, 8, 7, 10],
5252
backgroundColor: '#D1D5DB',
5353
borderRadius: 0,
@@ -63,7 +63,7 @@ const BarChart: React.FC<Props> = () => {
6363
legend: {
6464
position: 'bottom' as const,
6565
labels: {
66-
color: '#121212',
66+
color: '#D1D5DB',
6767
},
6868
},
6969
tooltip: {

Diff for: ‎src/Chart/PieChart.tsx

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
import React from 'react';
2+
import { Doughnut } from 'react-chartjs-2';
3+
import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js';
4+
5+
ChartJS.register(ArcElement, Tooltip, Legend);
6+
7+
// eslint-disable-next-line react/function-component-definition
8+
const PieChart: React.FC = () => {
9+
const data = {
10+
labels: ['new pie chart'],
11+
datasets: [
12+
{
13+
label: 'rates',
14+
data: [30, 100],
15+
backgroundColor: ['#4F46E5', '#A5B4FC'],
16+
hoverOffset: 4,
17+
},
18+
],
19+
};
20+
const data2 = {
21+
labels: ['new pie chart'],
22+
datasets: [
23+
{
24+
label: 'rates',
25+
data: [30, 70],
26+
backgroundColor: ['#4F46E5', '#A5B4FC'],
27+
hoverOffset: 4,
28+
},
29+
],
30+
};
31+
const data3 = {
32+
labels: ['new pie chart'],
33+
datasets: [
34+
{
35+
label: 'rates',
36+
data: [60, 60],
37+
backgroundColor: ['#4F46E5', '#A5B4FC'],
38+
hoverOffset: 4,
39+
},
40+
],
41+
};
42+
43+
const options = {
44+
responsive: true,
45+
cutout: '70%',
46+
plugins: {
47+
tooltip: {
48+
callbacks: {
49+
// eslint-disable-next-line func-names, object-shorthand
50+
label: function (tooltipItem: any) {
51+
return `${tooltipItem.label}: ${tooltipItem.raw}%`;
52+
},
53+
},
54+
},
55+
legend: {
56+
display: false,
57+
},
58+
},
59+
};
60+
61+
return (
62+
<div className="flex flex-col items-center -ml-8 mb-8">
63+
<div className="flex space-x-8">
64+
<div className="relative w-[200px] h-[200px] bg-red-200 p-2 rounded">
65+
<Doughnut data={data} options={options} />
66+
<div className="absolute inset-0 flex items-center justify-center">
67+
<div className="text-center">
68+
<p className="text-2xl font-semibold text-gray-500">10</p>
69+
</div>
70+
</div>
71+
<p className="text-center mt-2">New Invitations & Registration</p>
72+
</div>
73+
<div className="relative w-[200px] h-[200px] bg-green-200 p-2 rounded">
74+
<Doughnut data={data2} options={options} />
75+
<div className="absolute inset-0 flex items-center justify-center">
76+
<div className="text-center">
77+
<p className="text-2xl font-semibold text-gray-500">20</p>
78+
</div>
79+
</div>
80+
<p className="text-center mt-2">Upcoming Events</p>
81+
</div>
82+
<div className="relative w-[200px] h-[200px] bg-yellow-200 p-2 rounded">
83+
<Doughnut data={data3} options={options} />
84+
<div className="absolute inset-0 flex items-center justify-center">
85+
<div className="text-center">
86+
<p className="text-2xl font-semibold text-gray-500">50</p>
87+
</div>
88+
</div>
89+
<p className="text-center mt-2">Active& Progressive Tickets</p>
90+
</div>
91+
</div>
92+
</div>
93+
);
94+
};
95+
96+
export default PieChart;

Diff for: ‎src/Chart/AppointmentsChart.tsx renamed to ‎src/Chart/UsersChart.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ ChartJS.register(
2222
);
2323

2424
// eslint-disable-next-line react/function-component-definition
25-
const AppointmentsChart: React.FC = () => {
25+
const usersChart: React.FC = () => {
2626
const data = {
2727
labels: [
2828
'01',
@@ -59,7 +59,7 @@ const AppointmentsChart: React.FC = () => {
5959
],
6060
datasets: [
6161
{
62-
label: 'Last days',
62+
label: 'Andela',
6363
data: [
6464
1, 3, 0, 2, 1, 3, 2, 0, 2, 1, 3, 0, 2, 1, 4, 1, 2, 4, 7, 2, 3, 4, 4,
6565
3, 8, 0, 3, 5, 7,
@@ -69,7 +69,7 @@ const AppointmentsChart: React.FC = () => {
6969
tension: 0.4,
7070
},
7171
{
72-
label: 'Last days',
72+
label: 'NESA',
7373
data: [
7474
2, 3, 6, 4, 3, 4, 2, 1, 2, 6, 2, 2, 3, 2, 3, 5, 7, 2, 1, 2, 4, 6, 6,
7575
1, 2, 3, 4, 5, 6.5,
@@ -110,4 +110,4 @@ const AppointmentsChart: React.FC = () => {
110110
);
111111
};
112112

113-
export default AppointmentsChart;
113+
export default usersChart;

Diff for: ‎src/components/AdminDashboardTable.tsx

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import React from 'react';
2+
import { FaEye, FaSort } from 'react-icons/fa';
3+
4+
const DashboardTableDesign = () => {
5+
const dummyData = [
6+
{ team: 'Nova', logins: '2.4k', users: 45, status: 'Active' },
7+
{ team: 'Fighters', logins: '1.8k', users: 32, status: 'Active' },
8+
{ team: 'Bitcrafters', logins: '1.2k', users: 28, status: 'Inactive' },
9+
{ team: 'Team1', logins: '3.1k', users: 52, status: 'Active' },
10+
{ team: 'Team2', logins: '0.9k', users: 19, status: 'Active' },
11+
];
12+
13+
return (
14+
<div className="w-full space-y-4">
15+
<div className="flex justify-between items-center mb-6">
16+
<h2 className="text-xl font-semibold text-gray-200">Team Analytics</h2>
17+
<div className="flex gap-3">
18+
<input
19+
type="search"
20+
placeholder="Search teams..."
21+
className="px-4 py-2 bg-gray-700 rounded-lg text-sm text-gray-200 border border-gray-600 focus:outline-none focus:border-blue-500"
22+
/>
23+
</div>
24+
</div>
25+
26+
<div className="bg-gray-800 rounded-xl shadow-xl overflow-hidden border border-gray-700">
27+
<div className="overflow-x-auto">
28+
<table className="w-full">
29+
<thead>
30+
<tr className="bg-gray-900">
31+
<th className="px-6 py-4 text-left">
32+
<div className="flex items-center gap-2 text-sm font-semibold text-gray-300">
33+
Team Name
34+
<FaSort className="text-gray-500 hover:text-gray-300 cursor-pointer" />
35+
</div>
36+
</th>
37+
<th className="px-6 py-4 text-left">
38+
<div className="flex items-center gap-2 text-sm font-semibold text-gray-300">
39+
Logins
40+
</div>
41+
</th>
42+
<th className="px-6 py-4 text-left">
43+
<div className="flex items-center gap-2 text-sm font-semibold text-gray-300">
44+
Users
45+
</div>
46+
</th>
47+
<th className="px-6 py-4 text-left">
48+
<div className="flex items-center gap-2 text-sm font-semibold text-gray-300">
49+
Status
50+
</div>
51+
</th>
52+
<th className="px-6 py-4 text-left">
53+
<div className="flex items-center gap-2 text-sm font-semibold text-gray-300">
54+
Actions
55+
</div>
56+
</th>
57+
</tr>
58+
</thead>
59+
<tbody>
60+
{dummyData.map((row, index) => (
61+
<tr
62+
key={index}
63+
className="border-t border-gray-700 hover:bg-gray-700/50 transition-colors"
64+
>
65+
<td className="px-6 py-4">
66+
<div className="flex items-center gap-3">
67+
<div className="w-2 h-2 rounded-full bg-blue-500"></div>
68+
<span className="text-gray-200 font-medium">{row.team}</span>
69+
</div>
70+
</td>
71+
<td className="px-6 py-4">
72+
<div className="text-gray-300">{row.logins}</div>
73+
</td>
74+
<td className="px-6 py-4">
75+
<div className="inline-flex items-center px-3 py-1 rounded-full bg-gray-700 text-gray-300">
76+
{row.users}
77+
</div>
78+
</td>
79+
<td className="px-6 py-4">
80+
<div className={`inline-flex items-center px-3 py-1 rounded-full ${
81+
row.status === 'Active'
82+
? 'bg-green-500/20 text-green-400'
83+
: 'bg-gray-500/20 text-gray-400'
84+
}`}>
85+
{row.status}
86+
</div>
87+
</td>
88+
<td className="px-6 py-4">
89+
<button
90+
className="flex items-center gap-2 px-4 py-2 text-sm text-blue-400 bg-blue-500/10 rounded-full hover:bg-blue-500/20 transition-colors"
91+
>
92+
<FaEye />
93+
View
94+
</button>
95+
</td>
96+
</tr>
97+
))}
98+
</tbody>
99+
</table>
100+
</div>
101+
102+
<div className="px-6 py-4 bg-gray-900 border-t border-gray-700 flex items-center justify-between">
103+
<div className="text-sm text-gray-400">
104+
Showing 5 of 12 teams
105+
</div>
106+
<div className="flex gap-2">
107+
<button className="px-4 py-2 text-sm text-gray-300 bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors">
108+
Previous
109+
</button>
110+
<button className="px-4 py-2 text-sm text-gray-300 bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors">
111+
Next
112+
</button>
113+
</div>
114+
</div>
115+
</div>
116+
</div>
117+
);
118+
};
119+
120+
export default DashboardTableDesign;

Diff for: ‎src/pages/AdminDashboard.tsx

+15-3
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@ import { t } from 'i18next';
33
import { useTranslation } from 'react-i18next';
44
import { useMutation } from '@apollo/client';
55
import { toast } from 'react-toastify';
6+
import PieChart from '../Chart/PieChart';
67
import BarChart from '../Chart/BarChart';
7-
import AppointmentsChart from '../Chart/AppointmentsChart';
8+
import UsersChart from '../Chart/usersChart';
89
// eslint-disable-next-line import/no-useless-path-segments
910
import useDocumentTitle from '../hook/useDocumentTitle';
1011
import Comingsoon from './Comingsoon';
1112
import Button from '../components/Buttons';
1213
import { UserContext } from '../hook/useAuth';
1314
import { INVITE_USER_MUTATION } from '../Mutations/manageStudentMutations';
15+
import { FaEye } from 'react-icons/fa';
16+
import DashboardTableDesign from '../components/AdminDashboardTable';
1417

1518
function SupAdDashboard() {
1619
const { user } = useContext(UserContext);
@@ -25,7 +28,6 @@ function SupAdDashboard() {
2528
const inviteModel = () => {
2629
const newState = !inviteTraineeModel;
2730
setInviteTraineeModel(newState);
28-
// this is true
2931
};
3032

3133
const [inviteUser] = useMutation(INVITE_USER_MUTATION, {
@@ -125,11 +127,14 @@ function SupAdDashboard() {
125127
</div>
126128
<div className="flex flex-col grow bg-light-bg dark:bg-dark-frame-bg">
127129
<div className="flex flex-col justify-between">
130+
<div className="w-[80%] h-[100%] pl-[210px] pb-8 flex flex-row ">
131+
<PieChart />
132+
</div>
128133
<div className="w-[80%] h-[100%] pl-[90px] pb-8 flex flex-row ">
129134
<div className="flex flex-col justify-center">
130135
<span className="mr-[80px] rotate-90 ">Users</span>
131136
</div>
132-
<AppointmentsChart />
137+
<UsersChart />
133138
</div>
134139

135140
<div className="w-[80%] h-[100%] pl-[90px] pb-8 flex flex-row ">
@@ -140,8 +145,15 @@ function SupAdDashboard() {
140145
</div>
141146
</div>
142147
</div>
148+
<div className="w-full ">
149+
<DashboardTableDesign />
150+
</div>
143151
</>
144152
);
145153
}
146154

147155
export default SupAdDashboard;
156+
157+
158+
159+

0 commit comments

Comments
 (0)