Feat: added ghost legion

package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@azure/storage-blob": "12.15.0",
     "@reduxjs/toolkit": "1.9.5",
-    "@sliit-foss/bashaway-ui": "0.10.6",
+    "@sliit-foss/bashaway-ui": "0.12.3",
     "async-mutex": "^0.4.0",
     "chart.js": "4.4.0",
     "framer-motion": "10.14.0",

src/components/dashboard/ghost-legion.jsx

@@ -0,0 +1,25 @@
+import { twMerge } from "tailwind-merge";
+import { Ghost } from "@sliit-foss/bashaway-ui/icons";
+
+const GhostLegion = ({ ghostLegion, toggleGhostLegion, round }) => {
+  return (
+    <div
+      className={twMerge(
+        "group transition-all duration-medium rounded-full cursor-pointer flex justify-center items-center",
+        ghostLegion ? "bg-[#f00]" : "bg-gray-200 hover:bg-[#f00]",
+        round === 2 ? "w-12 h-12 opacity-100 p-2" : "w-0 h-0 opacity-0 p-0"
+      )}
+      onClick={toggleGhostLegion}
+    >
+      <Ghost
+        className={twMerge(
+          "transition-all duration-medium fill-current",
+          ghostLegion ? "text-white" : "text-black group-hover:text-white",
+          round === 2 ? "w-6 h-6 opacity-100" : "w-0 h-0 opacity-0"
+        )}
+      />
+    </div>
+  );
+};
+
+export default GhostLegion;

src/components/dashboard/index.jsx

@@ -1,2 +1,3 @@
 export { default as DashboardCard } from "./card";
+export { default as GhostLegion } from "./ghost-legion";
 export { default as RegistrationChart } from "./registrations";

src/components/dashboard/registrations.jsx

@@ -19,8 +19,8 @@ import { Body2 } from "@sliit-foss/bashaway-ui/typography";
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, ArcElement, Title, Tooltip, Legend, Filler);
 
-const RegistrationChart = ({ round }) => {
-  const { data: { data: registrationInfo } = {} } = useGetRegistrationInfoQuery({ round });
+const RegistrationChart = ({ round, ghostLegion }) => {
+  const { data: { data: registrationInfo } = {} } = useGetRegistrationInfoQuery({ round, ghostLegion });
 
   const { md, lg } = useBreakpoint();
 

src/pages/dashboard.jsx

@@ -1,18 +1,20 @@
 import { useMemo } from "react";
-import { DashboardCard, RegistrationChart } from "@/components/dashboard";
+import { DashboardCard, GhostLegion, RegistrationChart } from "@/components/dashboard";
 import { useTitle } from "@/hooks";
 import { Building, Folder, UserGroup, Users, Users2 } from "@/icons";
 import { useGetQuestionSubmissionsQuery, useGetRegistrationInfoQuery, useGetTeamSubmissionsQuery } from "@/store/api";
 import { TwinSwitch } from "@sliit-foss/bashaway-ui/components";
-import { useRound } from "@sliit-foss/bashaway-ui/hooks";
+import { useGhostLegion, useRound } from "@sliit-foss/bashaway-ui/hooks";
 import { Title } from "@sliit-foss/bashaway-ui/typography";
 
 const Dashboard = () => {
   const { rounds, round, roundKey, onRoundChange } = useRound();
 
-  const { data: { data: registrationInfo } = {} } = useGetRegistrationInfoQuery({ round });
-  const { data: { data: questionSubmissionInfo } = {} } = useGetQuestionSubmissionsQuery({ round });
-  const { data: { data: teamSubmissionInfo } = {} } = useGetTeamSubmissionsQuery({ round });
+  const { ghostLegion, toggleGhostLegion } = useGhostLegion();
+
+  const { data: { data: registrationInfo } = {} } = useGetRegistrationInfoQuery({ round, ghostLegion });
+  const { data: { data: questionSubmissionInfo } = {} } = useGetQuestionSubmissionsQuery({ round, ghostLegion });
+  const { data: { data: teamSubmissionInfo } = {} } = useGetTeamSubmissionsQuery({ round, ghostLegion });
 
   useTitle("Dashboard | Bashaway");
 
@@ -23,7 +25,10 @@ const Dashboard = () => {
 
   return (
     <div className="w-full min-h-[60vh] flex flex-col gap-7 items-start">
-      <TwinSwitch values={rounds} className="mx-auto mb-3" onChange={onRoundChange} selectedValue={roundKey} />
+      <div className="w-full flex justify-center items-center gap-4 mb-3">
+        <TwinSwitch values={rounds} className="" onChange={onRoundChange} selectedValue={roundKey} />
+        <GhostLegion ghostLegion={ghostLegion} toggleGhostLegion={toggleGhostLegion} round={round} />
+      </div>
       <div className="w-full h-full grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 justify-start items-start gap-5">
         <DashboardCard icon={Building} title="Universities" value={registrationInfo?.university_counts?.length} />
         <DashboardCard icon={Users} title="Teams" value={registrationInfo?.total_registrations} />
@@ -37,7 +42,7 @@ const Dashboard = () => {
         />
       </div>
       <Title>Statistics</Title>
-      <RegistrationChart round={round} />
+      <RegistrationChart round={round} ghostLegion={ghostLegion} />
     </div>
   );
 };

src/store/api/dashboard.js

@@ -6,16 +6,15 @@ export const dashboardApi = createApi({
   baseQuery,
   endpoints: (builder) => ({
     getRegistrationInfo: builder.query({
-      query: ({ round, ghost_legion = false }) =>
-        `/api/dashboard/registrations?round=${round}&ghost_legion=${ghost_legion}`
+      query: ({ round, ghostLegion = false }) =>
+        `/api/dashboard/registrations?round=${round}&ghost_legion=${ghostLegion}`
     }),
     getQuestionSubmissions: builder.query({
-      query: ({ round, ghost_legion = false }) =>
-        `/api/dashboard/submissions?round=${round}&ghost_legion=${ghost_legion}`
+      query: ({ round, ghostLegion = false }) => `/api/dashboard/submissions?round=${round}&ghost_legion=${ghostLegion}`
     }),
     getTeamSubmissions: builder.query({
-      query: ({ round, ghost_legion = false }) =>
-        `/api/dashboard/submissions/team?round=${round}&ghost_legion=${ghost_legion}`
+      query: ({ round, ghostLegion = false }) =>
+        `/api/dashboard/submissions/team?round=${round}&ghost_legion=${ghostLegion}`
     })
   })
 });