feat: added export as csv in event data

pages/admin/events/[...slug].tsx

@@ -28,6 +28,7 @@ import { TEAM_PARTICIPATION_STATUS } from "@/constants/enum";
 import { stylesConfig, switchDateFormat } from "@/utils/functions";
 import styles from "@/styles/pages/admin/Event.module.scss";
 import Footer from "@/components/Footer";
+import { exportAsCSV } from "@/services/files";
 
 const classes = stylesConfig(styles, "admin-event");
 
@@ -241,6 +242,43 @@ const AdminEventPage: React.FC = () => {
 		}
 	};
 
+	const exportData = () => {
+		let parsedData = [];
+		if (!eventDetails.teamSize) return;
+		if (eventDetails.teamSize > 1) {
+			parsedData = registrations
+				.map((team: any) => {
+					if (team.participants.length > 0) {
+						return team.participants.map((participant: any) => ({
+							Name: participant.name,
+							Email: participant.email,
+							Team: team.name,
+							Status:
+								team.createdBy === participant.userId
+									? "Team Leader"
+									: participant.status === "accepted"
+									? "Accepted"
+									: "Pending",
+						}));
+					}
+					return null;
+				})
+				.flat()
+				.sort((a: any, b: any) => a.Team.localeCompare(b.Team));
+		} else {
+			parsedData = registrations.map((participant: any) => ({
+				Name: participant.name,
+				Email: participant.email,
+			}));
+		}
+		exportAsCSV(
+			parsedData,
+			`${eventDetails.name}-${
+				eventDetails._id
+			}-${Date.now()} Registrations`
+		);
+	};
+
 	useEffect(() => {
 		if (isLoggedIn) getEventDetails();
 		// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -444,6 +482,15 @@ const AdminEventPage: React.FC = () => {
 								>
 									Registrations
 								</Typography>
+								<Button
+									variant="outline"
+									onClick={() => {
+										exportData();
+									}}
+									size="medium"
+								>
+									Download as CSV
+								</Button>
 							</div>
 							{registrations.length === 0 ? (
 								<Typography

pages/admin/index.tsx

@@ -19,6 +19,8 @@ import useDevice from "@/hooks/device";
 import styles from "@/styles/pages/admin/Dashboard.module.scss";
 import { fetchGlobalStats } from "@/utils/api/stats";
 import { exportAsCSV } from "@/services/files";
+import Link from "next/link";
+import { FaExternalLinkAlt } from "react-icons/fa";
 
 const classes = stylesConfig(styles, "admin-dashboard");
 
@@ -309,8 +311,23 @@ const AdminDashboard: React.FC = () => {
 								</thead>
 								<tbody>
 									{globalStats.map((stat) => (
-										<tr key={stat.event._id}>
-											<td>{stat.event.name}</td>
+										<tr
+											key={`state-event-${stat.event.id}`}
+										>
+											<td className="cursor-pointer">
+												<Link
+													href={`/admin/events/${stat.event.id}`}
+												>
+													{stat.event.name}
+													<FaExternalLinkAlt
+														style={{
+															width: "14px",
+															height: "14px",
+															marginLeft: "12px",
+														}}
+													/>
+												</Link>
+											</td>
 											<td>{stat.teams ?? "-"}</td>
 											<td>{stat.participants}</td>
 										</tr>

styles/pages/admin/Dashboard.module.scss

@@ -128,6 +128,10 @@
 				font-weight: unset;
 				padding-left: 16px;
 				text-align: left;
+
+				@include responsive(phone) {
+					font-size: 16px;
+				}
 			}
 
 			tbody tr {
@@ -138,8 +142,17 @@
 				line-height: 1.2;
 				font-weight: unset;
 
+				@include responsive(phone) {
+					font-size: 16px;
+				}
+
 				td {
 					padding: 0 16px;
+
+					a {
+						text-decoration: none;
+						color: inherit;
+					}
 				}
 
 				&:last-child {

styles/pages/admin/Event.module.scss

@@ -106,7 +106,7 @@
 		&-header {
 			width: 100%;
 			display: flex;
-			justify-content: center;
+			justify-content: space-between;
 			align-items: center;
 			padding: 0 24px;
 			padding: 24px 48px 56px 48px;

types/event.ts

@@ -13,7 +13,7 @@ export interface IEvent {
 
 export interface IStat {
 	event: {
-		_id: string;
+		id: string;
 		name: string;
 		teamSize: number;
 	};