Skip to content

Commit 0a889bd

Browse files
Tuyisenge2Tuyisenge2
committed
ft-admin-dashboard-can-vieww-table-teams
2 parents 6997c81 + f99dac5 commit 0a889bd

File tree

2 files changed

+211
-12
lines changed

2 files changed

+211
-12
lines changed

‎src/components/AdminDashboardTable.tsx‎

Lines changed: 27 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import { useQuery } from '@apollo/client';
2-
import React from 'react';
2+
import React, { useState } from 'react';
33
import { FaEye } from 'react-icons/fa';
44
import { useTranslation } from 'react-i18next';
55
import DataTable from './DataTable';
66
import { GET_TEAMS_CARDS } from './CoordinatorCard';
7+
import TeamDetailsModal from './AdminTeamDetails';
78

89
function DashboardTableDesign() {
910
const { t } = useTranslation();
11+
const [selectedTeam, setSelectedTeam] = useState<any | null>(null);
12+
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
13+
1014
const {
1115
data: TeamsData,
1216
loading,
@@ -18,6 +22,7 @@ function DashboardTableDesign() {
1822
},
1923
fetchPolicy: 'network-only',
2024
});
25+
2126
const TableData = TeamsData?.getAllTeams.map((items: any) => ({
2227
teams: items.name,
2328
users: items.members.length,
@@ -27,24 +32,28 @@ function DashboardTableDesign() {
2732
),
2833
}));
2934

35+
const handleViewClick = (team: any) => {
36+
setSelectedTeam(team);
37+
setIsModalOpen(true);
38+
};
39+
3040
const organizationColumns = [
3141
{ Header: t('Teams'), accessor: 'teams' },
3242
{ Header: t('Logins'), accessor: 'logins' },
3343
{ Header: t('Users'), accessor: 'users' },
3444
{
3545
Header: t('action'),
3646
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-
</>
47+
Cell: ({ row }: any) => (
48+
<button
49+
type="button"
50+
className="flex items-center space-x-2 text-blue-500 hover:text-blue-700"
51+
aria-label="View"
52+
onClick={() => handleViewClick(row.original)}
53+
>
54+
<FaEye className="w-4 h-4" />
55+
<span>{t('View')}</span>
56+
</button>
4857
),
4958
},
5059
];
@@ -54,6 +63,12 @@ function DashboardTableDesign() {
5463
columns={organizationColumns}
5564
data={TableData ? (TableData as any[]) : []}
5665
title={t('Teams metrices')}
66+
loading={loading}
67+
/>
68+
<TeamDetailsModal
69+
isOpen={isModalOpen}
70+
onClose={() => setIsModalOpen(false)}
71+
teamData={selectedTeam}
5772
/>
5873
</div>
5974
);

‎src/components/AdminTeamDetails.tsx‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import React, { useState } from 'react';
2+
import { FaAngleDown } from 'react-icons/fa6';
3+
4+
interface TeamData {
5+
ttlName?: string;
6+
team?: string;
7+
organization?: string;
8+
program?: string;
9+
phase?: string;
10+
cohort?: string;
11+
activeUsers?: number;
12+
droppedUsers?: number;
13+
rating?: number;
14+
}
15+
16+
interface TeamDetailsModalProps {
17+
isOpen: boolean;
18+
onClose: () => void;
19+
teamData: TeamData | null;
20+
}
21+
22+
function TeamDetailsModal({
23+
isOpen,
24+
onClose,
25+
teamData,
26+
}: TeamDetailsModalProps) {
27+
if (!isOpen) return null;
28+
29+
const [showAttendanceSummary, setShowAttendanceSummary] = useState(false);
30+
31+
const handleAttendanceSummaryEnter = () => {
32+
setShowAttendanceSummary(true);
33+
};
34+
35+
const handleAttendanceSummaryLeave = () => {
36+
setShowAttendanceSummary(false);
37+
};
38+
39+
return (
40+
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm">
41+
<div
42+
className="w-full max-w-4xl max-h-[90vh] overflow-y-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-600"
43+
style={{ scrollbarWidth: 'thin' }}
44+
>
45+
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
46+
<div className="flex gap-10">
47+
<h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200">
48+
Overview
49+
</h2>
50+
<h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200">
51+
Logins
52+
</h2>
53+
</div>
54+
<button
55+
type="button"
56+
onClick={onClose}
57+
className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
58+
>
59+
<p>Close</p>
60+
</button>
61+
</div>
62+
63+
<div className="p-6 space-y-4">
64+
<div className="grid grid-cols-2 gap-4">
65+
<div className="space-y-2">
66+
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
67+
TTL Name
68+
</label>
69+
<p className="text-gray-800 dark:text-gray-200">
70+
{teamData?.ttlName || 'Sostene'}
71+
</p>
72+
</div>
73+
74+
<div className="space-y-2">
75+
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
76+
Team Name
77+
</label>
78+
<p className="text-gray-800 dark:text-gray-200">
79+
{teamData?.team}
80+
</p>
81+
</div>
82+
83+
<div className="space-y-2">
84+
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
85+
Organization
86+
</label>
87+
<p className="text-gray-800 dark:text-gray-200">
88+
{teamData?.organization || 'Organization Name'}
89+
</p>
90+
</div>
91+
92+
<div className="space-y-2">
93+
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
94+
Program
95+
</label>
96+
<p className="text-gray-800 dark:text-gray-200">
97+
{teamData?.program || 'Program Name'}
98+
</p>
99+
</div>
100+
101+
<div className="space-y-2">
102+
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
103+
Phase
104+
</label>
105+
<p className="text-gray-800 dark:text-gray-200">
106+
{teamData?.phase || 'Current Phase'}
107+
</p>
108+
</div>
109+
110+
<div className="space-y-2">
111+
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
112+
Cohort
113+
</label>
114+
<p className="text-gray-800 dark:text-gray-200">
115+
{teamData?.cohort || 'Current Cohort'}
116+
</p>
117+
</div>
118+
</div>
119+
120+
<div className="space-y-4 mt-6">
121+
<div className="space-y-2">
122+
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
123+
Users
124+
</label>
125+
<div className="grid grid-cols-2 gap-4">
126+
<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
127+
<p className="text-sm text-gray-600 dark:text-gray-400">
128+
Active Members
129+
</p>
130+
<p className="text-xl font-semibold text-green-600 dark:text-green-400">
131+
{teamData?.activeUsers || '0'}
132+
</p>
133+
</div>
134+
<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
135+
<p className="text-sm text-gray-600 dark:text-gray-400">
136+
Dropped Members
137+
</p>
138+
<p className="text-xl font-semibold text-red-600 dark:text-red-400">
139+
{teamData?.droppedUsers || '0'}
140+
</p>
141+
</div>
142+
</div>
143+
</div>
144+
145+
<div
146+
className="space-y-2 relative"
147+
onMouseEnter={handleAttendanceSummaryEnter}
148+
onMouseLeave={handleAttendanceSummaryLeave}
149+
>
150+
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
151+
Attendance Summary
152+
<FaAngleDown
153+
className={`ml-2 inline-block ${
154+
showAttendanceSummary ? 'rotate-180' : ''
155+
}`}
156+
/>
157+
</label>
158+
{showAttendanceSummary && (
159+
<div className="absolute z-10 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg w-[200px]">
160+
<p>Quality: 1.5</p>
161+
<p>Quantity: 2.3</p>
162+
<p>Professionalism: 3.1</p>
163+
</div>
164+
)}
165+
</div>
166+
167+
<div className="space-y-2">
168+
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
169+
Rating Summary
170+
</label>
171+
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
172+
<p className="text-lg font-semibold text-blue-600 dark:text-blue-400">
173+
{teamData?.rating || '4.5'} / 5.0
174+
</p>
175+
</div>
176+
</div>
177+
</div>
178+
</div>
179+
</div>
180+
</div>
181+
);
182+
}
183+
184+
export default TeamDetailsModal;

0 commit comments

Comments
 (0)