Skip to content

Commit 6997c81

Browse files
Tuyisenge2Tuyisenge2
committed
ft-admin-dashboard-can-vieww-table-teams
1 parent a052325 commit 6997c81

File tree

3 files changed

+72
-106
lines changed

3 files changed

+72
-106
lines changed

‎src/components/AdminDashboardTable.tsx‎

Lines changed: 53 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,62 @@
1+
import { useQuery } from '@apollo/client';
12
import React from 'react';
23
import { FaEye } from 'react-icons/fa';
4+
import { useTranslation } from 'react-i18next';
5+
import DataTable from './DataTable';
6+
import { GET_TEAMS_CARDS } from './CoordinatorCard';
37

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-
];
8+
function DashboardTableDesign() {
9+
const { t } = useTranslation();
10+
const {
11+
data: TeamsData,
12+
loading,
13+
error,
14+
refetch,
15+
} = useQuery(GET_TEAMS_CARDS, {
16+
variables: {
17+
orgToken: localStorage.getItem('orgToken'),
18+
},
19+
fetchPolicy: 'network-only',
20+
});
21+
const TableData = TeamsData?.getAllTeams.map((items: any) => ({
22+
teams: items.name,
23+
users: items.members.length,
24+
logins: items.members.reduce(
25+
(total: number, i: any) => total + i.profile.activity.length,
26+
0,
27+
),
28+
}));
1229

30+
const organizationColumns = [
31+
{ Header: t('Teams'), accessor: 'teams' },
32+
{ Header: t('Logins'), accessor: 'logins' },
33+
{ Header: t('Users'), accessor: 'users' },
34+
{
35+
Header: t('action'),
36+
accessor: '',
37+
Cell: () => (
38+
<>
39+
<button
40+
type="button"
41+
className="flex items-center space-x-2 text-blue-500 hover:text-blue-700"
42+
aria-label="View"
43+
>
44+
<FaEye className="w-4 h-4" />
45+
<span>{t('View')}</span>
46+
</button>
47+
</>
48+
),
49+
},
50+
];
1351
return (
1452
<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-800 dark: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-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"
22-
/>
23-
</div>
24-
</div>
25-
26-
<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">
27-
<div className="overflow-x-auto">
28-
<table className="w-full table-fixed">
29-
<thead>
30-
<tr className="bg-gray-50 dark: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-700 dark: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-700 dark: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-700 dark: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-700 dark: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-200 dark:border-gray-700 hover:bg-gray-50 dark: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-800 dark:text-gray-200 font-medium">{row.team}</span>
63-
</div>
64-
</td>
65-
<td className="px-6 py-4">
66-
<div className="text-gray-600 dark: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-100 dark:bg-gray-700 text-gray-700 dark: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-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">
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-50 dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between">
86-
<div className="text-sm text-gray-500 dark: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-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">
91-
Previous
92-
</button>
93-
<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">
94-
Next
95-
</button>
96-
</div>
97-
</div>
98-
</div>
53+
<DataTable
54+
columns={organizationColumns}
55+
data={TableData ? (TableData as any[]) : []}
56+
title={t('Teams metrices')}
57+
/>
9958
</div>
10059
);
101-
};
60+
}
10261

103-
export default DashboardTableDesign;
62+
export default DashboardTableDesign;

‎src/components/CoordinatorCard.tsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,19 @@ export const GET_TEAMS_CARDS = gql`
3131
name
3232
lastName
3333
firstName
34+
address
35+
activity {
36+
date
37+
city
38+
IPv4
39+
state
40+
latitude
41+
longitude
42+
postal
43+
failed
44+
}
3445
}
35-
status{
46+
status {
3647
status
3748
}
3849
}
@@ -147,12 +158,12 @@ function ManagerCard() {
147158
rating = 'text-red-700';
148159
}
149160

150-
const activeMembers = team.members.filter(
151-
(member: any) => member.status?.status === 'active'
152-
).length;
153-
const droppedMembers = team.members.filter(
154-
(member: any) => member.status?.status === 'drop'
155-
).length;
161+
const activeMembers = team.members.filter(
162+
(member: any) => member.status?.status === 'active',
163+
).length;
164+
const droppedMembers = team.members.filter(
165+
(member: any) => member.status?.status === 'drop',
166+
).length;
156167

157168
return {
158169
stylebg,

‎src/pages/AdminDashboard.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { t } from 'i18next';
33
import { useTranslation } from 'react-i18next';
44
import { useMutation } from '@apollo/client';
55
import { toast } from 'react-toastify';
6+
import { FaEye } from 'react-icons/fa';
67
import PieChart from '../Chart/PieChart';
78
import BarChart from '../Chart/BarChart';
89
import UsersChart from '../Chart/usersChart';
@@ -12,7 +13,6 @@ import Comingsoon from './Comingsoon';
1213
import Button from '../components/Buttons';
1314
import { UserContext } from '../hook/useAuth';
1415
import { INVITE_USER_MUTATION } from '../Mutations/manageStudentMutations';
15-
import { FaEye } from 'react-icons/fa';
1616
import DashboardTableDesign from '../components/AdminDashboardTable';
1717

1818
function AdminDashboard() {
@@ -153,7 +153,3 @@ function AdminDashboard() {
153153
}
154154

155155
export default AdminDashboard;
156-
157-
158-
159-

0 commit comments

Comments
 (0)