Skip to content

Commit

Permalink
Merge branch 'ft-main-admin-dashboard' of https://github.com/atlp-rwa…
Browse files Browse the repository at this point in the history 
…nda/atlp-pulse-fn into ft-main-admin-dashboard
  • Loading branch information
@JacquelineTuyisenge
JacquelineTuyisenge committed Nov 21, 2024
2 parents baff5fa + 2ac898e commit 0b20ce2
Show file tree
Hide file tree
Showing 9 changed files with 314 additions and 220 deletions.
2 changes: 1 addition & 1 deletion src/Chart/PieChart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const PieChart: React.FC = () => {
return (
<div className="flex flex-col items-center -ml-8 mb-8">
<div className="flex space-x-8">
<div className="relative w-[200px] h-[200px] bg-red-200 p-2 rounded">
<div className="relative w-[200px] h-[200px] bg-red-200 p-2 rounded">
<Doughnut data={data} options={options} />
<div className="absolute inset-0 flex items-center justify-center">
<div className="text-center">
Expand Down
41 changes: 41 additions & 0 deletions src/Chart/ProgressBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import React from 'react';

interface ProgressBarProps {
passedPercentage: number; // Percentage of passed logins
failedPercentage: number; // Percentage of failed logins
}

function ProgressBar({ passedPercentage, failedPercentage }: ProgressBarProps) {
return (
<div className="w-1/2 space-y-4">
<div className="relative h-6 rounded-full overflow-hidden bg-gray-200 dark:bg-gray-700">
<div
className="absolute h-full bg-green-500 text-white text-center"
style={{ width: `${passedPercentage}%` }}
>
{passedPercentage}%
</div>
<div
className="absolute h-full bg-red-500 text-white text-center"
style={{
width: `${failedPercentage}%`,
left: `${passedPercentage}%`,
}}
>
{failedPercentage}%
</div>
</div>
<div className="flex justify-between text-sm text-gray-600 dark:text-gray-300">
<p className="text-sm text-gray-600 dark:text-gray-300">
<span className="text-green-500 font-semibold">Green</span>: Passed
Logins
</p>
<p className="text-sm text-gray-600 dark:text-gray-300">
<span className="text-red-500 font-semibold">Red</span>: Failed Logins
</p>
</div>
</div>
);
}

export default ProgressBar;
36 changes: 21 additions & 15 deletions src/components/AdminDashboardTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import { useQuery } from '@apollo/client';
import React from 'react';
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';

function DashboardTableDesign() {
const { t } = useTranslation();
const [selectedTeam, setSelectedTeam] = useState<any | null>(null);
const [isModalOpen, setIsModalOpen] = useState<boolean>(false);

const {
data: TeamsData,
loading,
Expand All @@ -18,6 +22,7 @@ function DashboardTableDesign() {
},
fetchPolicy: 'network-only',
});

const TableData = TeamsData?.getAllTeams.map((items: any) => ({
teams: items.name,
users: items.members.length,
Expand All @@ -27,24 +32,28 @@ function DashboardTableDesign() {
),
}));

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: () => (
<>
<button
type="button"
className="flex items-center space-x-2 text-blue-500 hover:text-blue-700"
aria-label="View"
>
<FaEye className="w-4 h-4" />
<span>{t('View')}</span>
</button>
</>
Cell: ({ row }: any) => (
<button
type="button"
className="flex items-center space-x-2 text-blue-500 hover:text-blue-700"
aria-label="View"
onClick={() => handleViewClick(row.original)}
>
<FaEye className="w-4 h-4" />
<span>{t('View')}</span>
</button>
),
},
];
Expand All @@ -54,16 +63,13 @@ function DashboardTableDesign() {
columns={organizationColumns}
data={TableData ? (TableData as any[]) : []}
title={t('Teams metrices')}
<<<<<<< HEAD
=======
loading={loading}
/>
<TeamDetailsModal
isOpen={isModalOpen}
onClose={() => setIsModalOpen(false)}
selectedteam={selectedTeam}
Teams={TeamsData?.getAllTeams}
>>>>>>> fdc13ed (user Growth overtime chart)
/>
</div>
);
Expand Down
194 changes: 71 additions & 123 deletions src/components/AdminTeamDetails.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
import React, { useState } from 'react';
<<<<<<< HEAD
import { FaAngleDown } from "react-icons/fa6";
=======
import { FaAngleDown } from 'react-icons/fa6';
import TeamChart from '../Chart/TeamChart';
import ProgressBar from '../Chart/ProgressBar';
import UsersChart from '../Chart/usersChart';
>>>>>>> fdc13ed (user Growth overtime chart)

interface TeamData {
ttlName?: string;
Expand All @@ -27,20 +23,6 @@ interface TeamDetailsModalProps {
Teams?: any;
}

<<<<<<< HEAD
const TeamDetailsModal: React.FC<TeamDetailsModalProps> = ({ isOpen, onClose, teamData }) => {
if (!isOpen) return null;

const [showAttendanceSummary, setShowAttendanceSummary] = useState(false);

const handleAttendanceSummaryEnter = () => {
setShowAttendanceSummary(true);
};

const handleAttendanceSummaryLeave = () => {
setShowAttendanceSummary(false);
};
=======
// Add this near the top of your TeamDetailsModal component
const loginStats = {
daily: {
Expand Down Expand Up @@ -145,92 +127,51 @@ function TeamDetailsModal({
totalLogins: total,
};
}
>>>>>>> fdc13ed (user Growth overtime chart)

return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm">
<div 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" style={{ scrollbarWidth: 'thin' }}>
<div
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"
style={{ scrollbarWidth: 'thin' }}
>
<div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
<div className='flex gap-10'>
<h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200">
<div className="flex gap-10">
<button
type="button"
onClick={() => setActiveTab('overview')}
className={`text-xl font-semibold ${
activeTab === 'overview'
? 'text-primary'
: 'text-gray-800 dark:text-gray-200'
}`}
>
Overview
</h2>
<h2 className="text-xl font-semibold text-gray-800 dark:text-gray-200">
</button>
<button
type="button"
onClick={() => setActiveTab('logins')}
className={`text-xl font-semibold ${
activeTab === 'logins'
? 'text-primary'
: 'text-gray-800 dark:text-gray-200'
}`}
>
Logins
</h2>
</button>
</div>
<button
type="button"
onClick={onClose}
className="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
>
<p>Close</p>
Close
</button>
</div>

<div className="p-6 space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
TTL Name
</label>
<p className="text-gray-800 dark:text-gray-200">{teamData?.ttlName || 'Sostene'}</p>
</div>

<div className="space-y-2">
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
Team Name
</label>
<p className="text-gray-800 dark:text-gray-200">{teamData?.team}</p>
</div>

<div className="space-y-2">
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
Organization
</label>
<p className="text-gray-800 dark:text-gray-200">{teamData?.organization || 'Organization Name'}</p>
</div>

<div className="space-y-2">
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
Program
</label>
<p className="text-gray-800 dark:text-gray-200">{teamData?.program || 'Program Name'}</p>
</div>

<div className="space-y-2">
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
Phase
</label>
<p className="text-gray-800 dark:text-gray-200">{teamData?.phase || 'Current Phase'}</p>
</div>

<div className="space-y-2">
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
Cohort
</label>
<p className="text-gray-800 dark:text-gray-200">{teamData?.cohort || 'Current Cohort'}</p>
</div>
</div>

<div className="space-y-4 mt-6">
<div className="space-y-2">
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
Users
</label>
<div className="p-6">
{activeTab === 'overview' && (
<div>
<div className="grid grid-cols-2 gap-4">
<<<<<<< HEAD
<div className="p-4 bg-green-50 dark:bg-green-900/20 rounded-lg">
<p className="text-sm text-gray-600 dark:text-gray-400">Active Members</p>
<p className="text-xl font-semibold text-green-600 dark:text-green-400">
{teamData?.activeUsers || '0'}
</p>
</div>
<div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
<p className="text-sm text-gray-600 dark:text-gray-400">Dropped Members</p>
<p className="text-xl font-semibold text-red-600 dark:text-red-400">
{teamData?.droppedUsers || '0'}
</p>
=======
{[
['TTL Name', CurrentTeam[0]?.ttl?.profile?.name || 'Sostene'],
['Team Name', selectedteam?.teams || 'Team Name'],
Expand Down Expand Up @@ -318,40 +259,48 @@ function TeamDetailsModal({
{average || '0'} / 5.0
</p>
</div>
>>>>>>> fdc13ed (user Growth overtime chart)
</div>
</div>
</div>

<div
className="space-y-2 relative"
onMouseEnter={handleAttendanceSummaryEnter}
onMouseLeave={handleAttendanceSummaryLeave}
>
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
Attendance Summary
<FaAngleDown className={`ml-2 inline-block ${showAttendanceSummary ? 'rotate-180' : ''}`} />
</label>
{showAttendanceSummary && (
<div className="absolute z-10 bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg w-[200px]">
<p>Quality: 1.5</p>
<p>Quantity: 2.3</p>
<p>Professionalism: 3.1</p>
</div>
<<<<<<< HEAD
)}
</div>

<div className="space-y-2">
<label className="text-sm font-medium text-gray-500 dark:text-gray-400">
Rating Summary
</label>
<div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg">
<p className="text-lg font-semibold text-blue-600 dark:text-blue-400">
{teamData?.rating || '4.5'} / 5.0
</p>
)}

{activeTab === 'logins' && (
<div className="flex flex-col items-center w-full">
<div className="w-[24rem] py-2 flex justify-center items-center gap-2 rounded-full border border-gray-200 dark:border-gray-700">
<button
type="button"
onClick={() => setTimeframe('daily')}
className={`w-[7rem] px-4 py-1 border border-gray-600 rounded-full transition-colors ${
timeframe === 'daily'
? 'bg-primary text-white'
: 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
}`}
>
Daily
</button>
<button
type="button"
onClick={() => setTimeframe('weekly')}
className={`w-[7rem] px-4 py-1 border border-gray-600 rounded-full transition-colors ${
timeframe === 'weekly'
? 'bg-primary text-white'
: 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
}`}
>
Weekly
</button>
<button
type="button"
onClick={() => setTimeframe('monthly')}
className={`w-[7rem] px-4 py-1 border border-gray-600 rounded-full transition-colors ${
timeframe === 'monthly'
? 'bg-primary text-white'
: 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
}`}
>
Monthly
</button>
</div>
=======
<div className="mt-6 w-full px-4 flex flex-col justify-center">
<div className="flex w-full justify-center gap-5">
<h3 className="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">
Expand Down Expand Up @@ -382,13 +331,12 @@ function TeamDetailsModal({
CurrentTeam={CurrentTeam}
loginsbyDate={loginsbyDate}
/>
>>>>>>> fdc13ed (user Growth overtime chart)
</div>
</div>
)}
</div>
</div>
</div>
);
};
}

export default TeamDetailsModal;
export default TeamDetailsModal;
Loading

0 comments on commit 0b20ce2

Please sign in to comment.