+
+ = ({ eventId }) => {
+ const { data, loading } = useQuery(EVENT_DETAILS, {
+ variables: { id: eventId },
+ });
+
+ if (loading) return
+
+
+
+ );
+};
+
+export default AttendedEventList;
diff --git a/src/components/EventManagement/EventAttendance/EventAttendance.test.tsx b/src/components/EventManagement/EventAttendance/EventAttendance.test.tsx
new file mode 100644
index 0000000000..e47ff8440b
--- /dev/null
+++ b/src/components/EventManagement/EventAttendance/EventAttendance.test.tsx
@@ -0,0 +1,117 @@
+// import React from 'react';
+// import { render, screen, waitFor } from '@testing-library/react';
+// import { MockedProvider } from '@apollo/react-testing';
+// import { BrowserRouter } from 'react-router-dom';
+// import { Provider } from 'react-redux';
+// import { I18nextProvider } from 'react-i18next';
+// import { LocalizationProvider } from '@mui/x-date-pickers';
+// import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+// import EventAttendance from './EventAttendance';
+// import { MEMBERS_LIST } from 'GraphQl/Queries/Queries';
+// import { store } from 'state/store';
+// import i18nForTest from 'utils/i18nForTest';
+
+// const mockMembers = [
+// {
+// _id: 'user1',
+// firstName: 'John',
+// lastName: 'Doe',
+// email: 'johndoe@example.com',
+// image: '',
+// createdAt: '2023-01-01',
+// organizationsBlockedBy: [],
+// __typename: 'User',
+// eventsAttended: ['event1', 'event2'],
+// },
+// {
+// _id: 'user2',
+// firstName: 'Jane',
+// lastName: 'Smith',
+// email: 'janesmith@example.com',
+// image: '',
+// createdAt: '2023-01-02',
+// organizationsBlockedBy: [],
+// __typename: 'Admin',
+// eventsAttended: [],
+// },
+// ];
+
+// const mocks = [
+// {
+// request: {
+// query: MEMBERS_LIST,
+// variables: { id: 'org123' },
+// },
+// result: {
+// data: {
+// organizations: [
+// {
+// _id: 'org123',
+// members: mockMembers,
+// },
+// ],
+// },
+// },
+// },
+// ];
+
+// describe('EventAttendance Component', () => {
+// const renderComponent = () =>
+// render(
+//
+//
+//
+//
+//
+//
+//
+//
+//
+// ,
+// );
+
+// // test('renders EventAttendance component', async () => {
+// // renderComponent();
+
+// // await waitFor(() => {
+// // expect(screen.getByText('Attendance Statistics')).toBeInTheDocument();
+// // expect(screen.getByText('Sort')).toBeInTheDocument();
+// // expect(screen.getByPlaceholderText('Search event')).toBeInTheDocument();
+// // });
+// // });
+
+// // test('displays correct table headers', async () => {
+// // renderComponent();
+
+// // await waitFor(() => {
+// // expect(screen.getByText('#')).toBeInTheDocument();
+// // expect(screen.getByText('Member Name')).toBeInTheDocument();
+// // expect(screen.getByText('Status')).toBeInTheDocument();
+// // expect(screen.getByText('Events Attended')).toBeInTheDocument();
+// // expect(screen.getByText('Task Assigned')).toBeInTheDocument();
+// // });
+// // });
+
+// // test('displays correct member information', async () => {
+// // renderComponent();
+
+// // await waitFor(() => {
+// // expect(screen.getByText('John Doe')).toBeInTheDocument();
+// // expect(screen.getByText('Jane Smith')).toBeInTheDocument();
+// // expect(screen.getByText('Member')).toBeInTheDocument();
+// // expect(screen.getByText('Admin')).toBeInTheDocument();
+// // expect(screen.getByText('2')).toBeInTheDocument();
+// // expect(screen.getByText('0')).toBeInTheDocument();
+// // });
+// // });
+
+// // test('displays correct number of table rows', async () => {
+// // renderComponent();
+
+// // await waitFor(() => {
+// // const rows = screen.getAllByTestId('row');
+// // expect(rows.length).toBe(3);
+// // });
+// // });
+// });
diff --git a/src/components/EventManagement/EventAttendance/EventAttendance.tsx b/src/components/EventManagement/EventAttendance/EventAttendance.tsx
new file mode 100644
index 0000000000..cc3d476515
--- /dev/null
+++ b/src/components/EventManagement/EventAttendance/EventAttendance.tsx
@@ -0,0 +1,248 @@
+import React, { useEffect, useState } from 'react';
+import { Search } from '@mui/icons-material';
+import {
+ Paper,
+ TableBody,
+ TableCell,
+ TableContainer,
+ TableHead,
+ TableRow,
+ Tooltip,
+} from '@mui/material';
+import {
+ Button,
+ Dropdown,
+ DropdownButton,
+ Table,
+ FormControl,
+} from 'react-bootstrap';
+import styles from './EventsAttendance.module.css';
+import { useLazyQuery } from '@apollo/client';
+import { EVENT_ATTENDEES } from 'GraphQl/Queries/Queries';
+import { useParams, Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { AttendanceStatisticsModal } from './EventStatistics';
+import AttendedEventList from './AttendedEventList';
+
+interface InterfaceMember {
+ createdAt: string;
+ firstName: string;
+ lastName: string;
+ email: string;
+ gender: string;
+ eventsAttended?: {
+ _id: string;
+ }[];
+ birthDate: Date;
+ __typename: string;
+ _id: string;
+ tagsAssignedWith: {
+ edges: {
+ node: {
+ name: string;
+ };
+ }[];
+ };
+}
+interface InterfaceEvent {
+ _id: string;
+ title: string;
+}
+
+
+function EventAttendance(): JSX.Element {
+ const { t } = useTranslation();
+ const { eventId } = useParams<{ eventId: string }>();
+ const { orgId: currentUrl } = useParams();
+ const [setSearchText] = useState('');
+ const [filteredAttendees, setFilteredAttendees] = useState([]);
+ const [sortOrder, setSortOrder] = useState<'ascending' | 'descending'>(
+ 'ascending',
+ );
+ const [show, setShow] = useState(false);
+
+ const { data: memberData, refetch: memberRefetch } = useLazyQuery(
+ EVENT_ATTENDEES,
+ {
+ variables: {
+ id: eventId,
+ },
+ },
+ );
+
+ useEffect(() => {
+ memberRefetch({
+ id: eventId,
+ });
+ }, [eventId, memberRefetch]);
+
+ useEffect(() => {
+ if (memberData?.event?.attendees) {
+ sortAttendees(memberData.event.attendees);
+ }
+ }, [sortOrder, memberData]);
+
+ const sortAttendees = (attendees: InterfaceMember[]): void => {
+ const sorted = [...attendees].sort((a, b) => {
+ const nameA = `${a.firstName} ${a.lastName}`.toLowerCase();
+ const nameB = `${b.firstName} ${b.lastName}`.toLowerCase();
+ return sortOrder === 'ascending'
+ ? nameA.localeCompare(nameB)
+ : nameB.localeCompare(nameA);
+ });
+ setFilteredAttendees(sorted);
+ };
+
+ const searchEventAttendees = (value: string): void => {
+ setSearchText(value);
+ if (memberData?.event?.attendees) {
+ const filtered = memberData?.event?.attendees.filter(
+ (attendee: InterfaceMember) =>
+ attendee.firstName?.toLowerCase().includes(value.toLowerCase()) ||
+ attendee.lastName?.toLowerCase().includes(value.toLowerCase()) ||
+ attendee.email?.toLowerCase().includes(value.toLowerCase()),
+ );
+ sortAttendees(filtered);
+ }
+ };
+
+ const showModal = (): void => setShow(true);
+ const handleClose = (): void => setShow(false);
+
+ const totalMembers = filteredAttendees.length;
+ const membersAttended = filteredAttendees.filter(
+ (member) => member?.eventsAttended && member.eventsAttended.length > 0,
+ ).length;
+ const attendanceRate =
+ totalMembers > 0 ? (membersAttended / totalMembers) * 100 : 0;
+
+ return (
+ = ({ show, handleClose, statistics, memberData }): JSX.Element => {
+ console.log('stats', memberData);
+ const [selectedCategory, setSelectedCategory] = useState('Gender');
+ const { eventId } = useParams<{ eventId: string }>();
+ const handleCategoryChange = (category: string) => {
+ setSelectedCategory(category);
+};
+ const { data: eventData, refetch: eventRefetch } = useLazyQuery(
+ EVENT_DETAILS,
+ {
+ variables: {
+ id: eventId,
+ },
+ },
+ )[1];
+
+ useEffect(() => {
+ eventRefetch({
+ id: eventId,
+ });
+ }, [eventId, eventRefetch]);
+
+ const isEventRecurring = eventData?.event?.recurring;
+ console.log('Event Recurring Status:', isEventRecurring);
+ const data = {
+ labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept'],
+ datasets: [
+ {
+ label: 'Attendee Count',
+ data: [33, 25, 35, 51, 54, 76, 67, 56, 40],
+ fill: true,
+ borderColor: '#008000',
+ },
+ ],
+ };
+ return (
+
+
+ Attendance Statistics
+
+
+
+
+ );
+};
diff --git a/src/components/EventManagement/EventAttendance/EventsAttendance.module.css b/src/components/EventManagement/EventAttendance/EventsAttendance.module.css
new file mode 100644
index 0000000000..526db10fc5
--- /dev/null
+++ b/src/components/EventManagement/EventAttendance/EventsAttendance.module.css
@@ -0,0 +1,32 @@
+.input {
+ display: flex;
+ width: 75%;
+ position: relative;
+ }
+.customcell {
+ background-color: #31bb6b !important;
+ color: white !important;
+ font-size: medium !important;
+ font-weight: 500 !important;
+ padding-top: 10px !important;
+ padding-bottom: 10px !important;
+}
+.actionBtn{
+ /* color:#39a440 !important; */
+ background-color:#ffffff !important;
+}
+.actionBtn:hover, .actionBtn:focus, .actionBtn:active{
+ color:#39a440 !important;
+
+}
+
+/* Add this to your CSS file */
+.small-doughnut {
+ width: 200px; /* Adjust as needed */
+ height: 200px; /* Adjust as needed */
+ }
+
+ .large-doughnut {
+ width: 400px; /* Adjust as needed */
+ height: 400px; /* Adjust as needed */
+ }
\ No newline at end of file
diff --git a/src/components/OrganizationScreen/OrganizationScreen.tsx b/src/components/OrganizationScreen/OrganizationScreen.tsx
index a8f9d16b9c..5bf0d566fa 100644
--- a/src/components/OrganizationScreen/OrganizationScreen.tsx
+++ b/src/components/OrganizationScreen/OrganizationScreen.tsx
@@ -2,13 +2,26 @@ import LeftDrawerOrg from 'components/LeftDrawerOrg/LeftDrawerOrg';
import React, { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
-import { Navigate, Outlet, useLocation, useParams } from 'react-router-dom';
+import {
+ Navigate,
+ Outlet,
+ useLocation,
+ useParams,
+ useMatch,
+} from 'react-router-dom';
import { updateTargets } from 'state/action-creators';
import type { RootState } from 'state/reducers';
import type { TargetsType } from 'state/reducers/routesReducer';
import styles from './OrganizationScreen.module.css';
import ProfileDropdown from 'components/ProfileDropdown/ProfileDropdown';
import { Button } from 'react-bootstrap';
+import { useQuery } from '@apollo/client';
+import { ORGANIZATION_EVENT_LIST } from 'GraphQl/Queries/Queries';
+
+interface InterfaceEvent {
+ _id: string;
+ title: string;
+}
const OrganizationScreen = (): JSX.Element => {
const location = useLocation();
@@ -16,6 +29,9 @@ const OrganizationScreen = (): JSX.Element => {
const { t } = useTranslation('translation', { keyPrefix: titleKey });
const [hideDrawer, setHideDrawer] = useState(null);
const { orgId } = useParams();
+ const [eventName, setEventName] = useState(null);
+
+ const isEventPath = useMatch('/event/:orgId/:eventId');
if (!orgId) {
return
);
+ case 'attendance':
+ return (
+
+
+ 
+
+
+
+
+ + {eventData.event.attendees.length} +
+ No of Registrations +
+
+
+
+
+
+ + {eventData.event.attendees.length} +
+ No of Attendees +
+ 
+
+
+
+
+ + 4/5 +
+ Average Feedback +
-
+
+
+
-
- - - {eventData.event.startTime !== null - ? `${formatTime(eventData.event.startTime)}` - : ``} - {' '} - - {formatDate(eventData.event.startDate)}{' '} - -
-{t('to')}
-- - {' '} - {eventData.event.endTime !== null - ? `${formatTime(eventData.event.endTime)}` - : ``} - {' '} - - {formatDate(eventData.event.endDate)}{' '} - -
-{eventData.event.title}
+ + +{eventData.event.description}
@@ -96,7 +154,41 @@ const EventDashboard = (props: { eventId: string }): JSX.Element => { Registrants:{' '} {eventData.event.attendees.length} -+
+ Recurring Event:{' '}
+
+ {eventData.event.recurring ? (
+ Active Inactive
+
+ + {eventData.event.startTime !== null + ? `${formatTime(eventData.event.startTime)}` + : ``} + {' '} + + {formatDate(eventData.event.startDate)}{' '} + +
+{t('to')}
++ + {' '} + {eventData.event.endTime !== null + ? `${formatTime(eventData.event.endTime)}` + : ``} + {' '} + + {formatDate(eventData.event.endDate)}{' '} + +
Loading...
; + + const event = data?.event; + + return ( +
+
+
+
+
+
+ );
+}
+
+export default EventAttendance;
diff --git a/src/components/EventManagement/EventAttendance/EventStatistics.tsx b/src/components/EventManagement/EventAttendance/EventStatistics.tsx
new file mode 100644
index 0000000000..ccced22229
--- /dev/null
+++ b/src/components/EventManagement/EventAttendance/EventStatistics.tsx
@@ -0,0 +1,366 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Button, ButtonGroup } from 'react-bootstrap';
+import 'chart.js/auto';
+import { Doughnut, Line } from 'react-chartjs-2';
+import { useParams } from 'react-router-dom';
+import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
+import { useLazyQuery } from '@apollo/client';
+
+interface InterfaceAttendanceStatisticsModalProps {
+ show: boolean;
+ handleClose: () => void;
+ statistics: {
+ totalMembers: number;
+ membersAttended: number;
+ attendanceRate: number;
+ };
+ memberData: InterfaceMember[];
+}
+
+interface InterfaceMember {
+ createdAt: string;
+ firstName: string;
+ lastName: string;
+ email: string;
+ gender: string;
+ eventsAttended?: {
+ _id: string;
+ }[];
+ birthDate: Date;
+ __typename: string;
+ _id: string;
+ tagsAssignedWith: {
+ edges: {
+ node: {
+ name: string;
+ };
+ }[];
+ };
+}
+
+export const AttendanceStatisticsModal: React.FC
+
+
+
+
+
+
+ 
+ Sort
+
+ }
+ onSelect={(eventKey) =>
+ setSortOrder(eventKey as 'ascending' | 'descending')
+ }
+ >
+ Ascending
+ Descending
+
+
+
+ searchEventAttendees(e.target.value)}
+ />
+
+
+
+ Sort
+
+ }
+ onSelect={(eventKey) =>
+ setSortOrder(eventKey as 'ascending' | 'descending')
+ }
+ >
+
+ {isEventRecurring ? (
+
+
+
+ ) : (
+
+
+ Trends
+
+
+ )}
+ + {statistics.totalMembers} +
+
+
+ Attendance Count
+
+
+
+
+
+
+ member.gender === 'MALE',
+ ).length,
+ memberData.filter(
+ (member: InterfaceMember) =>
+ member.gender === 'FEMALE',
+ ).length,
+ memberData.filter(
+ (member: InterfaceMember) =>
+ member.gender === 'OTHER',
+ ).length,
+ ]
+ : [
+ memberData.filter(
+ (member: InterfaceMember) =>
+ new Date().getFullYear() -
+ new Date(member.birthDate).getFullYear() <
+ 18,
+ ).length,
+ memberData.filter(
+ (member: InterfaceMember) =>
+ new Date().getFullYear() -
+ new Date(member.birthDate).getFullYear() >=
+ 18 &&
+ new Date().getFullYear() -
+ new Date(member.birthDate).getFullYear() <=
+ 40,
+ ).length,
+ memberData.filter(
+ (member: InterfaceMember) =>
+ new Date().getFullYear() -
+ new Date(member.birthDate).getFullYear() >
+ 40,
+ ).length,
+ ],
+ backgroundColor: [
+ 'rgba(40, 167, 69, 0.2)',
+ 'rgba(57, 255, 20, 0.2)',
+ 'rgba(255, 99, 132, 0.2)',
+ 'rgba(54, 162, 235, 0.2)',
+ 'rgba(255, 206, 86, 0.2)',
+ 'rgba(153, 102, 255, 0.2)',
+ ],
+ borderColor: [
+ 'rgba(40, 167, 69, 1)',
+ 'rgba(57, 255, 20, 0.2)',
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)',
+ 'rgba(153, 102, 255, 1)',
+ ],
+ borderWidth: 2,
+ },
+ ],
+ }}
+ />
+
+
+ {selectedCategory === 'Gender' && (
+
+
+
+ )}
+ {selectedCategory === 'Age' && (
+ + {' '} + Men:{' '} + { + memberData.filter( + (member: InterfaceMember) => member.gender === 'MALE', + ).length + } +
++ {' '} + Women:{' '} + { + memberData.filter( + (member: InterfaceMember) => member.gender === 'FEMALE', + ).length + } +
++ {' '} + Other:{' '} + { + memberData.filter( + (member: InterfaceMember) => member.gender === 'OTHER', + ).length + } +
+
+
+ )}
+ + {' '} + Under 18:{' '} + { + memberData.filter( + (member: InterfaceMember) => + new Date().getFullYear() - + new Date(member.birthDate).getFullYear() < + 18, + ).length + } +
++ {' '} + 19-40:{' '} + { + memberData.filter( + (member: InterfaceMember) => + new Date().getFullYear() - + new Date(member.birthDate).getFullYear() >= + 18 && + new Date().getFullYear() - + new Date(member.birthDate).getFullYear() <= + 40, + ).length + } +
++ {' '} + 40+:{' '} + { + memberData.filter( + (member: InterfaceMember) => + new Date().getFullYear() - + new Date(member.birthDate).getFullYear() > + 40, + ).length + } +
+
+
+ Demography
+{t('title')}
+ {eventName &&{eventName}
}Event Statistics
+
+ );
}
})()}
diff --git a/src/screens/MemberDetail/MemberDetail.tsx b/src/screens/MemberDetail/MemberDetail.tsx
index 49b9f60a7a..698ed9dedd 100644
--- a/src/screens/MemberDetail/MemberDetail.tsx
+++ b/src/screens/MemberDetail/MemberDetail.tsx
@@ -77,7 +77,7 @@ const MemberDetail: React.FC
+ {/*
*/}
{selectedCategory === 'Gender' && (
)}
-
+ {
case 'registrants':
return (
= ({ eventId }) => {
{event && (
-
- {event.title}
+
+
diff --git a/src/components/EventManagement/EventAttendance/EventAttendance.tsx b/src/components/EventManagement/EventAttendance/EventAttendance.tsx
index 144a8d3cc0..c24496cb42 100644
--- a/src/components/EventManagement/EventAttendance/EventAttendance.tsx
+++ b/src/components/EventManagement/EventAttendance/EventAttendance.tsx
@@ -23,6 +23,7 @@ import { useParams, Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { AttendanceStatisticsModal } from './EventStatistics';
import AttendedEventList from './AttendedEventList';
+import { maxHeight } from '@mui/system';
interface InterfaceMember {
createdAt: string;
@@ -49,16 +50,16 @@ interface InterfaceEvent {
// title: string;
}
-
function EventAttendance(): JSX.Element {
const { t } = useTranslation();
const { eventId } = useParams<{ eventId: string }>();
const { orgId: currentUrl } = useParams();
- const [searchText, setSearchText] = useState('');
+ const [searchText, setSearchText] = useState('');
const [filteredAttendees, setFilteredAttendees] = useState([]);
const [sortOrder, setSortOrder] = useState<'ascending' | 'descending'>(
'ascending',
);
+ const [filteringBy, setFilteringBy] = useState<'This Month' | 'This Year' | 'All'>('All');
const [show, setShow] = useState(false);
const { data: memberData, refetch: memberRefetch } = useLazyQuery(
@@ -78,19 +79,47 @@ function EventAttendance(): JSX.Element {
useEffect(() => {
if (memberData?.event?.attendees) {
- sortAttendees(memberData.event.attendees);
+ const updatedAttendees = filterAndSortAttendees(memberData.event.attendees);
+ setFilteredAttendees(updatedAttendees);
}
- }, [sortOrder, memberData]);
+ }, [sortOrder, filteringBy, memberData]);
- const sortAttendees = (attendees: InterfaceMember[]): void => {
- const sorted = [...attendees].sort((a, b) => {
+ const sortAttendees = (attendees: InterfaceMember[]): InterfaceMember[] => {
+ return [...attendees].sort((a, b) => {
const nameA = `${a.firstName} ${a.lastName}`.toLowerCase();
const nameB = `${b.firstName} ${b.lastName}`.toLowerCase();
return sortOrder === 'ascending'
? nameA.localeCompare(nameB)
: nameB.localeCompare(nameA);
});
- setFilteredAttendees(sorted);
+ };
+
+ const filterAttendees = (attendees: InterfaceMember[]): InterfaceMember[] => {
+ const now = new Date();
+ let filtered = [...attendees];
+
+ if (filteringBy === 'This Month') {
+ filtered = filtered.filter((attendee) => {
+ const attendeeDate = new Date(attendee.createdAt);
+ return (
+ attendeeDate.getMonth() === now.getMonth() &&
+ attendeeDate.getFullYear() === now.getFullYear()
+ );
+ });
+ } else if (filteringBy === 'This Year') {
+ filtered = filtered.filter((attendee) => {
+ const attendeeDate = new Date(attendee.createdAt);
+ return attendeeDate.getFullYear() === now.getFullYear();
+ });
+ }
+
+ return filtered;
+ };
+
+ const filterAndSortAttendees = (attendees: InterfaceMember[]): InterfaceMember[] => {
+ const filtered = filterAttendees(attendees);
+ const sorted = sortAttendees(filtered);
+ return sorted;
};
const searchEventAttendees = (value: string): void => {
@@ -102,7 +131,8 @@ function EventAttendance(): JSX.Element {
attendee.lastName?.toLowerCase().includes(value.toLowerCase()) ||
attendee.email?.toLowerCase().includes(value.toLowerCase()),
);
- sortAttendees(filtered);
+ const updatedAttendees = filterAndSortAttendees(filtered);
+ setFilteredAttendees(updatedAttendees);
}
};
@@ -126,7 +156,7 @@ function EventAttendance(): JSX.Element {
/>
-
);
case 'eventActions':
From 65b1640a856bf15fb77fbbf6f3e926847a96e457 Mon Sep 17 00:00:00 2001
From: duplixx <90516956+duplixx@users.noreply.github.com>
Date: Fri, 9 Aug 2024 19:34:32 +0530
Subject: [PATCH 03/48] major chart and ui fixes
---
src/GraphQl/Queries/Queries.ts | 14 +
.../Dashboard/EventDashboard.tsx | 26 +-
.../EventAttendance/AttendedEventList.tsx | 17 +-
.../EventAttendance/EventAttendance.tsx | 91 ++++-
.../EventAttendance/EventStatistics.tsx | 385 +++++++++---------
.../EventsAttendance.module.css | 2 +-
.../OrganizationEvents/OrganizationEvents.tsx | 2 +
src/utils/dateFormatter.ts | 29 ++
8 files changed, 333 insertions(+), 233 deletions(-)
create mode 100644 src/utils/dateFormatter.ts
diff --git a/src/GraphQl/Queries/Queries.ts b/src/GraphQl/Queries/Queries.ts
index 47fc8fa2cb..2f58ede1aa 100644
--- a/src/GraphQl/Queries/Queries.ts
+++ b/src/GraphQl/Queries/Queries.ts
@@ -594,6 +594,7 @@ export const ORGANIZATION_EVENT_CONNECTION_LIST = gql`
$location_contains: String
$first: Int
$skip: Int
+ $id_starts_with: ID
) {
eventsByOrganizationConnection(
where: {
@@ -601,6 +602,7 @@ export const ORGANIZATION_EVENT_CONNECTION_LIST = gql`
title_contains: $title_contains
description_contains: $description_contains
location_contains: $location_contains
+ id_starts_with: $id_starts_with
}
first: $first
skip: $skip
@@ -615,6 +617,18 @@ export const ORGANIZATION_EVENT_CONNECTION_LIST = gql`
endTime
allDay
recurring
+ attendees {
+ _id
+ createdAt
+ firstName
+ lastName
+ gender
+ eventsAttended {
+ _id
+ endDate
+ }
+
+ }
recurrenceRule {
recurrenceStartDate
recurrenceEndDate
diff --git a/src/components/EventManagement/Dashboard/EventDashboard.tsx b/src/components/EventManagement/Dashboard/EventDashboard.tsx
index 04e8c191c6..95082d0243 100644
--- a/src/components/EventManagement/Dashboard/EventDashboard.tsx
+++ b/src/components/EventManagement/Dashboard/EventDashboard.tsx
@@ -8,6 +8,7 @@ import Loader from 'components/Loader/Loader';
import { Edit } from '@mui/icons-material';
import EventListCardModals from 'components/EventListCard/EventListCardModals';
import type { InterfaceEventListCardProps } from 'components/EventListCard/EventListCard';
+import { formatDate } from 'utils/dateFormatter';
const EventDashboard = (props: { eventId: string }): JSX.Element => {
const { eventId } = props;
@@ -36,32 +37,7 @@ const EventDashboard = (props: { eventId: string }): JSX.Element => {
return `${hours}:${minutes}`;
}
- function formatDate(dateString: string): string {
- const date = new Date(dateString);
- const day = date.getDate();
- const monthIndex = date.getMonth();
- const year = date.getFullYear();
- const suffixes = ['th', 'st', 'nd', 'rd'];
- const suffix = suffixes[day % 10 > 3 ? 0 : day % 10];
-
- const monthNames = [
- 'Jan',
- 'Feb',
- 'Mar',
- 'Apr',
- 'May',
- 'Jun',
- 'Jul',
- 'Aug',
- 'Sep',
- 'Oct',
- 'Nov',
- 'Dec',
- ];
-
- return `${day}${suffix} ${monthNames[monthIndex]} ${year}`;
- }
const showViewModal = (): void => {
setEventModalIsOpen(true);
diff --git a/src/components/EventManagement/EventAttendance/AttendedEventList.tsx b/src/components/EventManagement/EventAttendance/AttendedEventList.tsx
index 03d9e59f35..60fe8be3c5 100644
--- a/src/components/EventManagement/EventAttendance/AttendedEventList.tsx
+++ b/src/components/EventManagement/EventAttendance/AttendedEventList.tsx
@@ -8,6 +8,8 @@ import {
import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
import { useQuery } from '@apollo/client';
import { Link } from 'react-router-dom';
+import { formatDate } from 'utils/dateFormatter';
+import { ReactComponent as DateIcon } from 'assets/svgs/cardItemDate.svg';
interface InterfaceEventsAttended {
@@ -30,8 +32,19 @@ const AttendedEventList: React.FCEvent Registrants
+
+
+
{event.title}
+ {formatDate(event.startDate)}
+
-
+
-
+
+
+ Filter
+
+ }
+ onSelect={(eventKey) =>
+ setFilteringBy(eventKey as 'This Month' | 'This Year' | 'All')
+ }
+ >
+ This Month
+ This Year
+ All
+
(
-
+
{member.eventsAttended
? member.eventsAttended.length
: '0'}
-
+
{member.tagsAssignedWith ? (
diff --git a/src/components/EventManagement/EventAttendance/EventStatistics.tsx b/src/components/EventManagement/EventAttendance/EventStatistics.tsx
index 1b7e6d8db4..4dce1f68cf 100644
--- a/src/components/EventManagement/EventAttendance/EventStatistics.tsx
+++ b/src/components/EventManagement/EventAttendance/EventStatistics.tsx
@@ -3,7 +3,10 @@ import { Modal, Button, ButtonGroup } from 'react-bootstrap';
import 'chart.js/auto';
import { Bar, Line } from 'react-chartjs-2';
import { useParams } from 'react-router-dom';
-import { EVENT_DETAILS } from 'GraphQl/Queries/Queries';
+import {
+ EVENT_DETAILS,
+ ORGANIZATION_EVENT_CONNECTION_LIST,
+} from 'GraphQl/Queries/Queries';
import { useLazyQuery } from '@apollo/client';
interface InterfaceAttendanceStatisticsModalProps {
@@ -37,48 +40,190 @@ interface InterfaceMember {
}[];
};
}
+interface InterfaceEvent {
+ _id: string;
+ title: string;
+ description: string;
+ startDate: string;
+ endDate: string;
+ location: string;
+ startTime: string;
+ endTime: string;
+ allDay: boolean;
+ recurring: boolean;
+ recurrenceRule: {
+ recurrenceStartDate: string;
+ recurrenceEndDate?: string | null;
+ frequency: string;
+ weekDays: string[];
+ interval: number;
+ count?: number;
+ weekDayOccurenceInMonth?: number;
+ };
+ isRecurringEventException: boolean;
+ isPublic: boolean;
+ isRegisterable: boolean;
+ attendees: {
+ _id: string;
+ firstName: string;
+ lastName: string;
+ email: string;
+ gender: string;
+ birthDate: string;
+ }[];
+ __typename: string;
+}
-export const AttendanceStatisticsModal: React.FC = ({ show, handleClose, statistics, memberData }): JSX.Element => {
- console.log('stats', memberData);
+export const AttendanceStatisticsModal: React.FC<
+ InterfaceAttendanceStatisticsModalProps
+> = ({ show, handleClose, statistics, memberData }): JSX.Element => {
const [selectedCategory, setSelectedCategory] = useState('Gender');
- const { eventId } = useParams<{ eventId: string }>();
- const handleCategoryChange = (category: string):void => {
+ const { eventId, orgId } = useParams();
+ const handleCategoryChange = (category: string): void => {
setSelectedCategory(category);
-};
- const { data: eventData, refetch: eventRefetch } = useLazyQuery(
- EVENT_DETAILS,
- {
- variables: {
- id: eventId,
- },
- },
- )[1];
+ };
+
+ const eventIdPrefix = eventId?.slice(0, 21).toString();
+ const [loadEventDetails, { data: eventData, refetch: eventRefetch }] =
+ useLazyQuery(EVENT_DETAILS);
+ const [loadRecurringEvents, { data: recurringData }] = useLazyQuery(
+ ORGANIZATION_EVENT_CONNECTION_LIST,
+ );
+ const [currentPage, setCurrentPage] = useState(0);
+ const eventsPerPage = 20;
+ useEffect(() => {
+ if (eventId) {
+ loadEventDetails({ variables: { id: eventId } });
+ }
+ }, [eventId, loadEventDetails]);
useEffect(() => {
- eventRefetch({
- id: eventId,
- });
- }, [eventId, eventRefetch]);
+ if (eventIdPrefix && orgId) {
+ loadRecurringEvents({
+ variables: {
+ organization_id: orgId,
+ id_starts_with: eventIdPrefix,
+ first: eventsPerPage,
+ orderBy: 'endDate_ASC',
+ skip: currentPage * eventsPerPage,
+ },
+ });
+ }
+ }, [eventIdPrefix, orgId, loadRecurringEvents, currentPage]);
+ useEffect(() => {
+ if (recurringData) {
+ console.log(
+ 'Recurring events data:',
+ recurringData.eventsByOrganizationConnection,
+ );
+ }
+ }, [recurringData]);
const isEventRecurring = eventData?.event?.recurring;
- console.log('Event Recurring Status:', isEventRecurring);
- const data = {
- labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept'],
+ console.log('recurring data');
+ const attendeeCounts =
+ recurringData?.eventsByOrganizationConnection.map(
+ (event: InterfaceEvent) => event.attendees.length,
+ ) || [];
+ const eventLabels =
+ recurringData?.eventsByOrganizationConnection.map((event: InterfaceEvent) =>
+ new Date(event.endDate).toLocaleDateString('en-US', { month: 'short' }),
+ ) || [];
+ const maleCounts =
+ recurringData?.eventsByOrganizationConnection.map(
+ (event: InterfaceEvent) =>
+ event.attendees.filter((attendee) => attendee.gender === 'MALE').length,
+ ) || [];
+ const femaleCounts =
+ recurringData?.eventsByOrganizationConnection.map(
+ (event: InterfaceEvent) =>
+ event.attendees.filter((attendee) => attendee.gender === 'FEMALE')
+ .length,
+ ) || [];
+ const otherCounts =
+ recurringData?.eventsByOrganizationConnection.map(
+ (event: InterfaceEvent) =>
+ event.attendees.filter((attendee) => attendee.gender === 'OTHER')
+ .length,
+ ) || [];
+
+ const chartData = {
+ labels: eventLabels,
datasets: [
{
label: 'Attendee Count',
- data: [33, 25, 35, 51, 54, 76, 67, 56, 40],
+ data: attendeeCounts,
fill: true,
borderColor: '#008000',
},
+ {
+ label: 'Male Attendees',
+ data: maleCounts,
+ fill: false,
+ borderColor: '#0000FF',
+ },
+ {
+ label: 'Female Attendees',
+ data: femaleCounts,
+ fill: false,
+ borderColor: '#FF1493',
+ },
+ {
+ label: 'Other Attendees',
+ data: otherCounts,
+ fill: false,
+ borderColor: '#FFD700',
+ },
],
};
+ const handlePreviousPage = () => {
+ setCurrentPage((prevPage) => Math.max(prevPage - 1, 0));
+ };
+
+ const handleNextPage = () => {
+ setCurrentPage((prevPage) => prevPage + 1);
+ };
+ const categoryLabels =
+ selectedCategory === 'Gender'
+ ? ['Male', 'Female', 'Other']
+ : ['Under 18', '18-40', 'Over 40'];
+ const categoryData =
+ selectedCategory === 'Gender'
+ ? [
+ memberData.filter((member) => member.gender === 'MALE').length,
+ memberData.filter((member) => member.gender === 'FEMALE').length,
+ memberData.filter((member) => member.gender === 'OTHER').length,
+ ]
+ : [
+ memberData.filter(
+ (member) =>
+ new Date().getFullYear() -
+ new Date(member.birthDate).getFullYear() <
+ 18,
+ ).length,
+ memberData.filter(
+ (member) =>
+ new Date().getFullYear() -
+ new Date(member.birthDate).getFullYear() >=
+ 18 &&
+ new Date().getFullYear() -
+ new Date(member.birthDate).getFullYear() <=
+ 40,
+ ).length,
+ memberData.filter(
+ (member) =>
+ new Date().getFullYear() -
+ new Date(member.birthDate).getFullYear() >
+ 40,
+ ).length,
+ ];
+
return (
Attendance Statistics
@@ -87,11 +232,11 @@ export const AttendanceStatisticsModal: React.FC
{isEventRecurring ? (
+
) : (
- member.gender === 'MALE',
- ).length,
- memberData.filter(
- (member: InterfaceMember) =>
- member.gender === 'FEMALE',
- ).length,
- memberData.filter(
- (member: InterfaceMember) =>
- member.gender === 'OTHER',
- ).length,
- ] : [
- memberData.filter(
- (member: InterfaceMember) =>
- new Date().getFullYear() -
- new Date(member.birthDate).getFullYear() <
- 18,
- ).length,
- memberData.filter(
- (member: InterfaceMember) =>
- new Date().getFullYear() -
- new Date(member.birthDate).getFullYear() >=
- 18 &&
- new Date().getFullYear() -
- new Date(member.birthDate).getFullYear() <=
- 40,
- ).length,
- memberData.filter(
- (member: InterfaceMember) =>
- new Date().getFullYear() -
- new Date(member.birthDate).getFullYear() >
- 40,
- ).length,
- ],
+ label:
+ selectedCategory === 'Gender'
+ ? 'Gender Distribution'
+ : 'Age Distribution',
+ data: categoryData,
backgroundColor: [
'rgba(40, 167, 69, 0.2)',
'rgba(57, 255, 20, 0.2)',
@@ -212,136 +341,6 @@ export const AttendanceStatisticsModal: React.FC
-
+
{member.eventsAttended
? member.eventsAttended.length
: '0'}
-
+
{member.tagsAssignedWith ? (
member.tagsAssignedWith.edges.map(
- (edge: { node: { name: string; }; }, index: number) => (
+ (edge: { node: { name: string } }, index: number) => (
([]);
+ const [isTableCollapsed, setIsTableCollapsed] = useState(true);
const eventIdPrefix = eventId?.slice(0, 21).toString();
const [loadEventDetails, { data: eventData, refetch: eventRefetch }] =
useLazyQuery(EVENT_DETAILS);
@@ -127,7 +135,10 @@ export const AttendanceStatisticsModal: React.FC<
) || [];
const eventLabels =
recurringData?.eventsByOrganizationConnection.map((event: InterfaceEvent) =>
- new Date(event.endDate).toLocaleDateString('en-US', { month: 'short' }),
+ new Date(event.endDate).toLocaleDateString('en-US', {
+ month: 'short',
+ day: 'numeric',
+ }),
) || [];
const maleCounts =
recurringData?.eventsByOrganizationConnection.map(
@@ -226,9 +237,9 @@ export const AttendanceStatisticsModal: React.FC<
size={isEventRecurring ? 'xl' : undefined}
>
- Attendance Statistics
+ Attendance Statistics
-
+
+ Filter
+
+ }
+ onSelect={(eventKey) =>
+ setFilteringBy(eventKey as 'This Month' | 'This Year' | 'All')
+ }
+ >
+ Trends
+
+
+
- {selectedCategory === 'Gender' && (
-
*/}
-
- )}
- {selectedCategory === 'Age' && (
- - {' '} - Men:{' '} - { - memberData.filter( - (member: InterfaceMember) => member.gender === 'MALE', - ).length - } -
-- {' '} - Women:{' '} - { - memberData.filter( - (member: InterfaceMember) => member.gender === 'FEMALE', - ).length - } -
-- {' '} - Other:{' '} - { - memberData.filter( - (member: InterfaceMember) => member.gender === 'OTHER', - ).length - } -
-
-
- )}
- - {' '} - Under 18:{' '} - { - memberData.filter( - (member: InterfaceMember) => - new Date().getFullYear() - - new Date(member.birthDate).getFullYear() < - 18, - ).length - } -
-- {' '} - 19-40:{' '} - { - memberData.filter( - (member: InterfaceMember) => - new Date().getFullYear() - - new Date(member.birthDate).getFullYear() >= - 18 && - new Date().getFullYear() - - new Date(member.birthDate).getFullYear() <= - 40, - ).length - } -
-- {' '} - 40+:{' '} - { - memberData.filter( - (member: InterfaceMember) => - new Date().getFullYear() - - new Date(member.birthDate).getFullYear() > - 40, - ).length - } -
- 3 ? 0 : day % 10];
+
+ const monthNames = [
+ 'Jan',
+ 'Feb',
+ 'Mar',
+ 'Apr',
+ 'May',
+ 'Jun',
+ 'Jul',
+ 'Aug',
+ 'Sep',
+ 'Oct',
+ 'Nov',
+ 'Dec',
+ ];
+
+ return `${day}${suffix} ${monthNames[monthIndex]} ${year}`;
+ }
\ No newline at end of file
From 7f32fd232ec562cf8bcded5038730e1b4cf13b16 Mon Sep 17 00:00:00 2001
From: duplixx <90516956+duplixx@users.noreply.github.com>
Date: Sat, 10 Aug 2024 16:49:08 +0530
Subject: [PATCH 04/48] modal sizing and filtering
---
public/images/svg/arrow-left.svg | 10 ++
public/images/svg/arrow-right.svg | 10 ++
.../EventAttendance/CollapsibleTable.tsx | 61 ++++++++++++
.../EventAttendance/EventAttendance.tsx | 75 ++++++++-------
.../EventAttendance/EventStatistics.tsx | 92 +++++++++++++++----
.../OrganizationEvents/OrganizationEvents.tsx | 2 -
6 files changed, 196 insertions(+), 54 deletions(-)
create mode 100644 public/images/svg/arrow-left.svg
create mode 100644 public/images/svg/arrow-right.svg
create mode 100644 src/components/EventManagement/EventAttendance/CollapsibleTable.tsx
diff --git a/public/images/svg/arrow-left.svg b/public/images/svg/arrow-left.svg
new file mode 100644
index 0000000000..395c38fc25
--- /dev/null
+++ b/public/images/svg/arrow-left.svg
@@ -0,0 +1,10 @@
+
diff --git a/public/images/svg/arrow-right.svg b/public/images/svg/arrow-right.svg
new file mode 100644
index 0000000000..bf754cec86
--- /dev/null
+++ b/public/images/svg/arrow-right.svg
@@ -0,0 +1,10 @@
+
diff --git a/src/components/EventManagement/EventAttendance/CollapsibleTable.tsx b/src/components/EventManagement/EventAttendance/CollapsibleTable.tsx
new file mode 100644
index 0000000000..065b298e07
--- /dev/null
+++ b/src/components/EventManagement/EventAttendance/CollapsibleTable.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { Table, Button } from 'react-bootstrap';
+
+interface InterfaceMember {
+ _id: string;
+ firstName: string;
+ lastName: string;
+ email: string;
+ gender: string;
+ birthDate: Date;
+}
+
+interface CollapsibleTableProps {
+ isTableCollapsed: boolean;
+ clickedData: InterfaceMember[];
+ onToggle: () => void;
+}
+
+const CollapsibleTable: React.FC = ({
+ isTableCollapsed,
+ clickedData,
+ onToggle,
+}) => {
+ if (isTableCollapsed) {
+ return (
+
+ );
+ }
+
+ return (
+ ('');
- const [filteredAttendees, setFilteredAttendees] = useState([]);
+ const [searchText, setSearchText] = useState('');
+ const [filteredAttendees, setFilteredAttendees] = useState(
+ [],
+ );
const [sortOrder, setSortOrder] = useState<'ascending' | 'descending'>(
'ascending',
);
- const [filteringBy, setFilteringBy] = useState<'This Month' | 'This Year' | 'All'>('All');
+ const [filteringBy, setFilteringBy] = useState<
+ 'This Month' | 'This Year' | 'All'
+ >('All');
const [show, setShow] = useState(false);
const { data: memberData, refetch: memberRefetch } = useLazyQuery(
@@ -79,10 +83,12 @@ function EventAttendance(): JSX.Element {
useEffect(() => {
if (memberData?.event?.attendees) {
- const updatedAttendees = filterAndSortAttendees(memberData.event.attendees);
+ const updatedAttendees = filterAndSortAttendees(
+ memberData.event.attendees,
+ );
setFilteredAttendees(updatedAttendees);
}
- }, [sortOrder, filteringBy, memberData]);
+ }, [sortOrder, filteringBy, memberData, searchText]);
const sortAttendees = (attendees: InterfaceMember[]): InterfaceMember[] => {
return [...attendees].sort((a, b) => {
@@ -96,27 +102,30 @@ function EventAttendance(): JSX.Element {
const filterAttendees = (attendees: InterfaceMember[]): InterfaceMember[] => {
const now = new Date();
- let filtered = [...attendees];
-
- if (filteringBy === 'This Month') {
- filtered = filtered.filter((attendee) => {
- const attendeeDate = new Date(attendee.createdAt);
+
+ if (filteringBy === 'All') {
+ return attendees;
+ }
+
+ return attendees.filter((attendee) => {
+ const attendeeDate = new Date(attendee.createdAt);
+
+ if (filteringBy === 'This Month') {
return (
attendeeDate.getMonth() === now.getMonth() &&
attendeeDate.getFullYear() === now.getFullYear()
);
- });
- } else if (filteringBy === 'This Year') {
- filtered = filtered.filter((attendee) => {
- const attendeeDate = new Date(attendee.createdAt);
+ } else if (filteringBy === 'This Year') {
return attendeeDate.getFullYear() === now.getFullYear();
- });
- }
+ }
- return filtered;
+ return true; // This should never happen, but it's a fallback
+ });
};
- const filterAndSortAttendees = (attendees: InterfaceMember[]): InterfaceMember[] => {
+ const filterAndSortAttendees = (
+ attendees: InterfaceMember[],
+ ): InterfaceMember[] => {
const filtered = filterAttendees(attendees);
const sorted = sortAttendees(filtered);
return sorted;
@@ -183,7 +192,7 @@ function EventAttendance(): JSX.Element {
-
+
+
+
+
+
+
+ );
+};
+
+export default CollapsibleTable;
\ No newline at end of file
diff --git a/src/components/EventManagement/EventAttendance/EventAttendance.tsx b/src/components/EventManagement/EventAttendance/EventAttendance.tsx
index c24496cb42..8aa9045005 100644
--- a/src/components/EventManagement/EventAttendance/EventAttendance.tsx
+++ b/src/components/EventManagement/EventAttendance/EventAttendance.tsx
@@ -54,12 +54,16 @@ function EventAttendance(): JSX.Element {
const { t } = useTranslation();
const { eventId } = useParams<{ eventId: string }>();
const { orgId: currentUrl } = useParams();
- const [searchText, setSearchText] = useState| Name | +Gender | +Birth Date | +|
|---|---|---|---|
| {`${member.firstName} ${member.lastName}`} | +{member.email} | +{member.gender} | +{new Date(member.birthDate).toLocaleDateString()} | +
{edge.node.name}
),
)
diff --git a/src/components/EventManagement/EventAttendance/EventStatistics.tsx b/src/components/EventManagement/EventAttendance/EventStatistics.tsx
index 4dce1f68cf..a3c3bfe95f 100644
--- a/src/components/EventManagement/EventAttendance/EventStatistics.tsx
+++ b/src/components/EventManagement/EventAttendance/EventStatistics.tsx
@@ -1,5 +1,11 @@
import React, { useEffect, useState } from 'react';
-import { Modal, Button, ButtonGroup } from 'react-bootstrap';
+import {
+ Modal,
+ Button,
+ ButtonGroup,
+ Tooltip,
+ OverlayTrigger,
+} from 'react-bootstrap';
import 'chart.js/auto';
import { Bar, Line } from 'react-chartjs-2';
import { useParams } from 'react-router-dom';
@@ -8,6 +14,7 @@ import {
ORGANIZATION_EVENT_CONNECTION_LIST,
} from 'GraphQl/Queries/Queries';
import { useLazyQuery } from '@apollo/client';
+import CollapsibleTable from './CollapsibleTable';
interface InterfaceAttendanceStatisticsModalProps {
show: boolean;
@@ -82,7 +89,8 @@ export const AttendanceStatisticsModal: React.FC<
const handleCategoryChange = (category: string): void => {
setSelectedCategory(category);
};
-
+ const [clickedData, setClickedData] = useState
{isEventRecurring ? (
{
+ if (elements.length > 0) {
+ const index = elements[0].index;
+ const eventDate = eventLabels[index];
+ const eventAttendees =
+ recurringData.eventsByOrganizationConnection[index]
+ .attendees;
+ setClickedData(eventAttendees);
+ setIsTableCollapsed(false);
+ }
+ },
+ }}
style={{ paddingBottom: '40px' }}
/>
+ setIsTableCollapsed(!isTableCollapsed)}
+ />
) : (
@@ -292,17 +346,17 @@ export const AttendanceStatisticsModal: React.FC<
)}
Trends
-
-
+
+
-
+