Skip to content

Commit 21063b0

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

File tree

5 files changed

+223
-12
lines changed

5 files changed

+223
-12
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

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import React from 'react';
2+
import { FaEye } from 'react-icons/fa';
3+
4+
const DashboardTableDesign = () => {
5+
const dummyData = [
6+
{ team: 'Nova', logins: '2.4k', users: 45 },
7+
{ team: 'Fighters', logins: '1.8k', users: 32 },
8+
{ team: 'Bitcrafters', logins: '1.2k', users: 28},
9+
{ team: 'Team1', logins: '3.1k', users: 52 },
10+
{ team: 'Team2', logins: '0.9k', users: 19 },
11+
];
12+
13+
return (
14+
<div className="w-full max-w-7xl mx-auto px-6 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 table-fixed">
29+
<thead>
30+
<tr className="bg-gray-900">
31+
<th className="w-[30%] 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+
</div>
35+
</th>
36+
<th className="w-[25%] px-6 py-4 text-left">
37+
<div className="flex items-center gap-2 text-sm font-semibold text-gray-300">
38+
Logins
39+
</div>
40+
</th>
41+
<th className="w-[25%] px-6 py-4 text-left">
42+
<div className="flex items-center gap-2 text-sm font-semibold text-gray-300">
43+
Users
44+
</div>
45+
</th>
46+
<th className="w-[20%] px-10 py-4 text-left">
47+
<div className="flex items-center gap-2 text-sm font-semibold text-gray-300">
48+
Actions
49+
</div>
50+
</th>
51+
</tr>
52+
</thead>
53+
<tbody>
54+
{dummyData.map((row, index) => (
55+
<tr
56+
key={index}
57+
className="border-t border-gray-700 hover:bg-gray-700/50 transition-colors"
58+
>
59+
<td className="px-6 py-4">
60+
<div className="flex items-center gap-3">
61+
<div className="w-2 h-2 rounded-full bg-blue-500"></div>
62+
<span className="text-gray-200 font-medium">{row.team}</span>
63+
</div>
64+
</td>
65+
<td className="px-6 py-4">
66+
<div className="text-gray-300">{row.logins}</div>
67+
</td>
68+
<td className="px-6 py-4">
69+
<div className="inline-flex items-center px-3 py-1 rounded-full bg-gray-700 text-gray-300">
70+
{row.users}
71+
</div>
72+
</td>
73+
<td className="px-6 py-4">
74+
<button className="flex items-center justify-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">
75+
<FaEye className="text-xs" />
76+
View
77+
</button>
78+
</td>
79+
</tr>
80+
))}
81+
</tbody>
82+
</table>
83+
</div>
84+
85+
<div className="px-6 py-4 bg-gray-900 border-t border-gray-700 flex items-center justify-between">
86+
<div className="text-sm text-gray-400">
87+
Showing 5 of 12 teams
88+
</div>
89+
<div className="flex gap-2">
90+
<button className="px-4 py-2 text-sm text-gray-300 bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors">
91+
Previous
92+
</button>
93+
<button className="px-4 py-2 text-sm text-gray-300 bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors">
94+
Next
95+
</button>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
);
101+
};
102+
103+
export default DashboardTableDesign;

Diff for: ‎src/pages/AdminDashboard.tsx

+17-5
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,19 @@ 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

15-
function SupAdDashboard() {
18+
function AdminDashboard() {
1619
const { user } = useContext(UserContext);
1720
const { t }: any = useTranslation();
1821

@@ -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

147-
export default SupAdDashboard;
155+
export default AdminDashboard;
156+
157+
158+
159+

0 commit comments

Comments
 (0)