Skip to content

Commit 3786c0f

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

File tree

6 files changed

+471
-12
lines changed

6 files changed

+471
-12
lines changed

‎src/Chart/BarChart.tsx‎

Lines changed: 3 additions & 3 deletions
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: {

‎src/Chart/PieChart.tsx‎

Lines changed: 96 additions & 0 deletions
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;

‎src/Chart/AppointmentsChart.tsx‎ renamed to ‎src/Chart/UsersChart.tsx‎

Lines changed: 4 additions & 4 deletions
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;

‎src/components/AdminDashboardTable.tsx‎

Lines changed: 195 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,195 @@
1+
import React, { useState } from 'react';
2+
import { FaEye } from 'react-icons/fa';
3+
import TeamDetailsModal from './AdminTeamDetails';
4+
5+
interface TeamData {
6+
ttlName?: string;
7+
team?: string;
8+
organization?: string;
9+
program?: string;
10+
phase?: string;
11+
cohort?: string;
12+
activeUsers?: number;
13+
droppedUsers?: number;
14+
rating?: number;
15+
logins: string;
16+
users: number;
17+
}
18+
19+
const DashboardTableDesign: React.FC = () => {
20+
const [selectedTeam, setSelectedTeam] = useState<TeamData | null>(null);
21+
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
22+
23+
const dummyData: TeamData[] = [
24+
{
25+
team: 'Nova',
26+
logins: '2.4k',
27+
users: 45,
28+
ttlName: 'Sostene',
29+
organization: 'Tech Corp',
30+
program: 'Atlp1',
31+
phase: 'Phase 2',
32+
cohort: 'Cohort 3',
33+
activeUsers: 42,
34+
droppedUsers: 3,
35+
rating: 4.8
36+
},
37+
{
38+
team: 'Fighters',
39+
logins: '1.8k',
40+
users: 32,
41+
ttlName: 'Sostene',
42+
organization: 'Andela',
43+
program: 'Atlp1',
44+
phase: 'Phase 1',
45+
cohort: 'Cohort 2',
46+
activeUsers: 30,
47+
droppedUsers: 2,
48+
rating: 4.5
49+
},
50+
{
51+
team: 'Bitcrafters',
52+
logins: '1.2k',
53+
users: 28,
54+
ttlName: 'Jacqueline',
55+
organization: 'Irembo',
56+
program: 'Data Science',
57+
phase: 'Phase 3',
58+
cohort: 'Cohort 1',
59+
activeUsers: 25,
60+
droppedUsers: 3,
61+
rating: 4.6
62+
},
63+
{
64+
team: 'Team1',
65+
logins: '3.1k',
66+
users: 52,
67+
ttlName: 'Alice',
68+
organization: 'Tech Corp',
69+
program: 'Cloud Computing',
70+
phase: 'Phase 2',
71+
cohort: 'Cohort 4',
72+
activeUsers: 48,
73+
droppedUsers: 4,
74+
rating: 4.7
75+
},
76+
{
77+
team: 'Team2',
78+
logins: '0.9k',
79+
users: 19,
80+
ttlName: 'Bob',
81+
organization: 'Tech',
82+
program: 'DevOps',
83+
phase: 'Phase 1',
84+
cohort: 'Cohort 2',
85+
activeUsers: 17,
86+
droppedUsers: 2,
87+
rating: 4.4
88+
}
89+
];
90+
91+
const handleViewClick = (team: TeamData) => {
92+
setSelectedTeam(team);
93+
setIsModalOpen(true);
94+
};
95+
96+
return (
97+
<div className="w-full max-w-7xl mx-auto px-6 space-y-4">
98+
<div className="flex justify-between items-center mb-6">
99+
<h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200">Team Analytics</h2>
100+
<div className="flex gap-3">
101+
<input
102+
type="search"
103+
placeholder="Search teams..."
104+
className="px-4 py-2 bg-white dark:bg-gray-700 rounded-lg text-sm text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-gray-600 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
105+
/>
106+
</div>
107+
</div>
108+
109+
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-lg dark:shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
110+
<div className="overflow-x-auto">
111+
<table className="w-full table-fixed">
112+
<thead>
113+
<tr className="bg-gray-50 dark:bg-gray-900">
114+
<th className="w-[30%] px-6 py-4 text-left">
115+
<div className="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
116+
Team Name
117+
</div>
118+
</th>
119+
<th className="w-[25%] px-6 py-4 text-left">
120+
<div className="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
121+
Logins
122+
</div>
123+
</th>
124+
<th className="w-[25%] px-6 py-4 text-left">
125+
<div className="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
126+
Users
127+
</div>
128+
</th>
129+
<th className="w-[20%] px-10 py-4 text-left">
130+
<div className="flex items-center gap-2 text-sm font-semibold text-gray-700 dark:text-gray-300">
131+
Actions
132+
</div>
133+
</th>
134+
</tr>
135+
</thead>
136+
<tbody>
137+
{dummyData.map((row, index) => (
138+
<tr
139+
key={index}
140+
className="border-t border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
141+
>
142+
<td className="px-6 py-4">
143+
<div className="flex items-center gap-3">
144+
<div className="w-2 h-2 rounded-full bg-blue-500"></div>
145+
<span className="text-gray-800 dark:text-gray-200 font-medium">{row.team}</span>
146+
</div>
147+
</td>
148+
<td className="px-6 py-4">
149+
<div className="text-gray-600 dark:text-gray-300">{row.logins}</div>
150+
</td>
151+
<td className="px-6 py-4">
152+
<div className="inline-flex items-center px-3 py-1 rounded-full bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300">
153+
{row.users}
154+
</div>
155+
</td>
156+
<td className="px-6 py-4">
157+
<button
158+
onClick={() => handleViewClick(row)}
159+
className="flex items-center justify-center gap-2 px-4 py-2 text-sm text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-500/10 rounded-full hover:bg-blue-100 dark:hover:bg-blue-500/20 transition-colors"
160+
>
161+
<FaEye className="text-xs" />
162+
View
163+
</button>
164+
</td>
165+
</tr>
166+
))}
167+
</tbody>
168+
</table>
169+
</div>
170+
171+
<div className="px-6 py-4 bg-gray-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
172+
<div className="text-sm text-gray-500 dark:text-gray-400">
173+
Showing 5 of 12 teams
174+
</div>
175+
<div className="flex gap-2">
176+
<button className="px-4 py-2 text-sm text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
177+
Previous
178+
</button>
179+
<button className="px-4 py-2 text-sm text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
180+
Next
181+
</button>
182+
</div>
183+
</div>
184+
</div>
185+
186+
<TeamDetailsModal
187+
isOpen={isModalOpen}
188+
onClose={() => setIsModalOpen(false)}
189+
teamData={selectedTeam}
190+
/>
191+
</div>
192+
);
193+
};
194+
195+
export default DashboardTableDesign;

0 commit comments

Comments
 (0)