diff --git a/src/Chart/UsersChart.tsx b/src/Chart/UsersChart.tsx index ee3ab2aa..f43442a4 100644 --- a/src/Chart/UsersChart.tsx +++ b/src/Chart/UsersChart.tsx @@ -22,58 +22,25 @@ ChartJS.register( ); // eslint-disable-next-line react/function-component-definition -const usersChart: React.FC = () => { +// Rename the function component from usersChart to UsersChart +const UsersChart: React.FC = () => { const data = { labels: [ - '01', - '02', - '03', - '04', - '05', - '06', - '07', - '08', - '09', - '10', - '11', - '12', - '13', - '14', - '15', - '16', - '17', - '18', - '19', - '20', - '21', - '22', - '23', - '24', - '25', - '26', - '27', - '28', - '29', - '30', - '31', + '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', + '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', + '27', '28', '29', '30', '31', ], datasets: [ { label: 'Andela', - data: [ - 1, 3, 0, 2, 1, 3, 2, 0, 2, 1, 3, 0, 2, 1, 4, 1, 2, 4, 7, 2, 3, 4, 4, - 3, 8, 0, 3, 5, 7, - ], + data: [1, 3, 0, 2, 1, 3, 2, 0, 2, 1, 3, 0, 2, 1, 4, 1, 2, 4, 7, 2, 3, 4, 4, 3, 8, 0, 3, 5, 7], fill: false, borderColor: '#4F46E5', tension: 0.4, }, { label: 'NESA', - data: [ - 2, 3, 6, 4, 3, 4, 2, 1, 2, 6, 2, 2, 3, 2, 3, 5, 7, 2, 1, 2, 4, 6, 6, - 1, 2, 3, 4, 5, 6.5, - ], + data: [2, 3, 6, 4, 3, 4, 2, 1, 2, 6, 2, 2, 3, 2, 3, 5, 7, 2, 1, 2, 4, 6, 6, 1, 2, 3, 4, 5, 6.5], fill: false, borderColor: '#8C8120', tension: 0.4, @@ -110,4 +77,4 @@ const usersChart: React.FC = () => { ); }; -export default usersChart; +export default UsersChart; diff --git a/src/components/AdminDashboardTable.tsx b/src/components/AdminDashboardTable.tsx index df3f4e41..bb5182d5 100644 --- a/src/components/AdminDashboardTable.tsx +++ b/src/components/AdminDashboardTable.tsx @@ -1,195 +1,77 @@ +import { useQuery } from '@apollo/client'; import React, { useState } from 'react'; import { FaEye } from 'react-icons/fa'; +import { useTranslation } from 'react-i18next'; +import DataTable from './DataTable'; +import { GET_TEAMS_CARDS } from './CoordinatorCard'; import TeamDetailsModal from './AdminTeamDetails'; -interface TeamData { - ttlName?: string; - team?: string; - organization?: string; - program?: string; - phase?: string; - cohort?: string; - activeUsers?: number; - droppedUsers?: number; - rating?: number; - logins: string; - users: number; -} - -const DashboardTableDesign: React.FC = () => { - const [selectedTeam, setSelectedTeam] = useState(null); +function DashboardTableDesign() { + const { t } = useTranslation(); + const [selectedTeam, setSelectedTeam] = useState(null); const [isModalOpen, setIsModalOpen] = useState(false); - const dummyData: TeamData[] = [ - { - team: 'Nova', - logins: '2.4k', - users: 45, - ttlName: 'Sostene', - organization: 'Tech Corp', - program: 'Atlp1', - phase: 'Phase 2', - cohort: 'Cohort 3', - activeUsers: 42, - droppedUsers: 3, - rating: 4.8 - }, - { - team: 'Fighters', - logins: '1.8k', - users: 32, - ttlName: 'Sostene', - organization: 'Andela', - program: 'Atlp1', - phase: 'Phase 1', - cohort: 'Cohort 2', - activeUsers: 30, - droppedUsers: 2, - rating: 4.5 - }, - { - team: 'Bitcrafters', - logins: '1.2k', - users: 28, - ttlName: 'Jacqueline', - organization: 'Irembo', - program: 'Data Science', - phase: 'Phase 3', - cohort: 'Cohort 1', - activeUsers: 25, - droppedUsers: 3, - rating: 4.6 + const { + data: TeamsData, + loading, + error, + refetch, + } = useQuery(GET_TEAMS_CARDS, { + variables: { + orgToken: localStorage.getItem('orgToken'), }, - { - team: 'Team1', - logins: '3.1k', - users: 52, - ttlName: 'Alice', - organization: 'Tech Corp', - program: 'Cloud Computing', - phase: 'Phase 2', - cohort: 'Cohort 4', - activeUsers: 48, - droppedUsers: 4, - rating: 4.7 - }, - { - team: 'Team2', - logins: '0.9k', - users: 19, - ttlName: 'Bob', - organization: 'Tech', - program: 'DevOps', - phase: 'Phase 1', - cohort: 'Cohort 2', - activeUsers: 17, - droppedUsers: 2, - rating: 4.4 - } - ]; + fetchPolicy: 'network-only', + }); + + const TableData = TeamsData?.getAllTeams.map((items: any) => ({ + teams: items.name, + users: items.members.length, + logins: items.members.reduce( + (total: number, i: any) => total + i.profile.activity.length, + 0, + ), + })); - const handleViewClick = (team: TeamData) => { + const handleViewClick = (team: any) => { setSelectedTeam(team); setIsModalOpen(true); }; + const organizationColumns = [ + { Header: t('Teams'), accessor: 'teams' }, + { Header: t('Logins'), accessor: 'logins' }, + { Header: t('Users'), accessor: 'users' }, + { + Header: t('action'), + accessor: '', + Cell: ({ row }: any) => ( + + ), + }, + ]; return (
-
-

Team Analytics

-
- -
-
- -
-
- - - - - - - - - - - {dummyData.map((row, index) => ( - - - - - - - ))} - -
-
- Team Name -
- 		-
- Logins -
- 		-
- Users -
- 		-
- Actions -
-
-
-
- {row.team} -
- 		-
{row.logins}
- 		-
- {row.users} -
- 		- -
-
- -
-
- Showing 5 of 12 teams -
-
- - -
-
-
- - + setIsModalOpen(false)} teamData={selectedTeam} />
); -}; +} -export default DashboardTableDesign; \ No newline at end of file +export default DashboardTableDesign; diff --git a/src/components/AdminTeamDetails.tsx b/src/components/AdminTeamDetails.tsx index dfe5588c..d42955da 100644 --- a/src/components/AdminTeamDetails.tsx +++ b/src/components/AdminTeamDetails.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; -import { FaAngleDown } from "react-icons/fa6"; - +import { FaAngleDown } from 'react-icons/fa6'; +import UsersChart from '../Chart/usersChart'; interface TeamData { ttlName?: string; team?: string; @@ -19,138 +19,162 @@ interface TeamDetailsModalProps { teamData: TeamData | null; } -const TeamDetailsModal: React.FC = ({ isOpen, onClose, teamData }) => { - if (!isOpen) return null; - - const [showAttendanceSummary, setShowAttendanceSummary] = useState(false); +function TeamDetailsModal({ + isOpen, + onClose, + teamData, +}: TeamDetailsModalProps) { + const [activeTab, setActiveTab] = useState<'overview' | 'logins'>('overview'); + const [showAttendanceSummary, setShowAttendanceSummary] = useState(false); - const handleAttendanceSummaryEnter = () => { - setShowAttendanceSummary(true); - }; + const handleAttendanceSummaryEnter = () => setShowAttendanceSummary(true); + const handleAttendanceSummaryLeave = () => setShowAttendanceSummary(false); - const handleAttendanceSummaryLeave = () => { - setShowAttendanceSummary(false); - }; + if (!isOpen) return null; return (
-
+
-
-

+ {/* Tabs for switching */} +
+

-

+ +

+
-
-
-
- -

{teamData?.ttlName || 'Sostene'}

-
- -
- -

{teamData?.team}

-
- -
- -

{teamData?.organization || 'Organization Name'}

-
- -
- -

{teamData?.program || 'Program Name'}

-
- -
- -

{teamData?.phase || 'Current Phase'}

-
+
+ {activeTab === 'overview' && ( +
+ {/* Overview Content */} +
+ {/* Display team details */} + {[ + ['TTL Name', teamData?.ttlName || 'Sostene'], + ['Team Name', teamData?.team || 'Team Name'], + ['Organization', teamData?.organization || 'Organization Name'], + ['Program', teamData?.program || 'Program Name'], + ['Phase', teamData?.phase || 'Current Phase'], + ['Cohort', teamData?.cohort || 'Current Cohort'], + ].map(([label, value], idx) => ( +
+ +

{value}

+
+ ))} +
-
- -

{teamData?.cohort || 'Current Cohort'}

-
-
+
+
+ +
+
+

+ Active Members +

+

+ {teamData?.activeUsers || '0'} +

+
+
+

+ Dropped Members +

+

+ {teamData?.droppedUsers || '0'} +

+
+
+
-
-
- -
-
-

Active Members

-

- {teamData?.activeUsers || '0'} -

+
+ + {showAttendanceSummary && ( +
+

Quality: 1.5

+

Quantity: 2.3

+

Professionalism: 3.1

+
+ )}
-
-

Dropped Members

-

- {teamData?.droppedUsers || '0'} -

+ +
+ +
+

+ {teamData?.rating || '4.5'} / 5.0 +

+
+ )} + +{activeTab === 'logins' && ( +
+ {/* Logins Content */} +

+ Logins +

+

+ Daily login statistics. +

+ {/* Include the chart */} + +
+)} -
- - {showAttendanceSummary && ( -
-

Quality: 1.5

-

Quantity: 2.3

-

Professionalism: 3.1

-
- )} -
-
- -
-

- {teamData?.rating || '4.5'} / 5.0 -

-
-
-
); -}; +} -export default TeamDetailsModal; \ No newline at end of file +export default TeamDetailsModal; diff --git a/src/components/CoordinatorCard.tsx b/src/components/CoordinatorCard.tsx index 4b856735..19258afc 100644 --- a/src/components/CoordinatorCard.tsx +++ b/src/components/CoordinatorCard.tsx @@ -31,8 +31,19 @@ export const GET_TEAMS_CARDS = gql` name lastName firstName + address + activity { + date + city + IPv4 + state + latitude + longitude + postal + failed + } } - status{ + status { status } } @@ -147,12 +158,12 @@ function ManagerCard() { rating = 'text-red-700'; } - const activeMembers = team.members.filter( - (member: any) => member.status?.status === 'active' - ).length; - const droppedMembers = team.members.filter( - (member: any) => member.status?.status === 'drop' - ).length; + const activeMembers = team.members.filter( + (member: any) => member.status?.status === 'active', + ).length; + const droppedMembers = team.members.filter( + (member: any) => member.status?.status === 'drop', + ).length; return { stylebg, diff --git a/src/pages/AdminDashboard.tsx b/src/pages/AdminDashboard.tsx index 216ac3c1..1323d7a9 100644 --- a/src/pages/AdminDashboard.tsx +++ b/src/pages/AdminDashboard.tsx @@ -3,6 +3,7 @@ import { t } from 'i18next'; import { useTranslation } from 'react-i18next'; import { useMutation } from '@apollo/client'; import { toast } from 'react-toastify'; +import { FaEye } from 'react-icons/fa'; import PieChart from '../Chart/PieChart'; import BarChart from '../Chart/BarChart'; import UsersChart from '../Chart/usersChart'; @@ -12,7 +13,6 @@ import Comingsoon from './Comingsoon'; import Button from '../components/Buttons'; import { UserContext } from '../hook/useAuth'; import { INVITE_USER_MUTATION } from '../Mutations/manageStudentMutations'; -import { FaEye } from 'react-icons/fa'; import DashboardTableDesign from '../components/AdminDashboardTable'; function AdminDashboard() { @@ -153,7 +153,3 @@ function AdminDashboard() { } export default AdminDashboard; - - - -