Add leaderboard to staff/admin dashboard

components/Layout/Layout.tsx

@@ -19,8 +19,8 @@ const roleNavigations = {
     "vault",
     "identifier",
   ],
-  admin: ["scanner", "visitors", "badges", "users", "events"],
-  manager: ["badges", "prizes", "identifier"],
+  admin: ["scanner", "visitors", "badges", "leaderboard", "users", "events"],
+  manager: ["badges", "leaderboard", "prizes", "identifier"],
 };
 
 type LayoutProps = {
@@ -35,15 +35,14 @@ export default function Layout({
   title,
   description,
   basePath = "attendee",
-  navigation,
   children,
 }: LayoutProps) {
   const { user, logout } = useAuth();
   const [isNavbarOpen, setIsNavbarOpen] = useState(false);
   const router = useRouter();
 
   const currentHref = router.asPath;
-  const links = navigation || roleNavigations[user.type];
+  const links = roleNavigations[user.type];
 
   const openNavbar = () => {
     setIsNavbarOpen(true);

components/Navbar/index.jsx

@@ -26,6 +26,7 @@ const userNavigation = (type) => {
       return [{ name: "Dashboard", slug: "/attendee/profile" }];
     case USER.ROLES.MANAGER:
       return [
+        { name: "Leaderboard", slug: "/manager/leaderboard" },
         { name: "Give Badges", slug: "/manager/badges" },
         { name: "Give Prizes", slug: "/manager/prizes" },
       ];

context/Auth/withAuth.js

@@ -39,6 +39,7 @@ export function withAuth(WrappedComponent) {
             "/manager/prizes",
             "/manager/prizes/[uuid]",
             "/manager/identifier",
+            "/manager/leaderboard",
             "/attendees/[uuid]",
           ].includes(router.pathname)
         ) {

layout/Manager/Badges/Badges.tsx

@@ -9,8 +9,6 @@ import ErrorMessage from "@components/ErrorMessage";
 import Filter from "@components/BadgeFilter";
 import QRScanner, { FEEDBACK } from "@components/QRScanner";
 
-const navigation = ["badges", "prizes", "identifier"];
-
 function Badges() {
   const [allBadges, updateAllBadges] = useState([]);
   const [filter, updateFilter] = useState(null);
@@ -71,12 +69,7 @@ function Badges() {
   };
 
   return (
-    <Layout
-      title="Badges"
-      description="Award a badge"
-      navigation={navigation}
-      basePath="manager"
-    >
+    <Layout title="Badges" description="Award a badge" basePath="manager">
       {showScanner ? (
         <div className="mt-5">
           <QRScanner

layout/Manager/Identifier/Identifier.tsx

@@ -7,8 +7,6 @@ import { withAuth } from "@context/Auth";
 import Layout from "@components/Layout";
 import QRScanner, { FEEDBACK } from "@components/QRScanner";
 
-const navigation = ["badges", "prizes", "identifier"];
-
 function Identifier() {
   const pauseRef = useRef(false);
   const [text, setText] = useState("None");
@@ -54,7 +52,6 @@ function Identifier() {
     <Layout
       title="Identifier"
       description="Identify an attendee"
-      navigation={navigation}
       basePath="manager"
     >
       <div className="mt-5">

layout/Manager/Prize/Prize.tsx

@@ -8,8 +8,6 @@ import { withAuth } from "@context/Auth";
 import Layout from "@components/Layout";
 import Button from "@components/Button";
 
-const navigation = ["badges", "prizes", "identifier"];
-
 function Prize() {
   const router = useRouter();
   const { uuid } = router.query;
@@ -61,7 +59,6 @@ function Prize() {
     <Layout
       title="Prizes"
       description="Mark a prize as redeemed"
-      navigation={navigation}
       basePath="manager"
     >
       <div className="my-5">

layout/Manager/Prizes/Prizes.tsx

@@ -6,8 +6,6 @@ import { withAuth, useAuth } from "@context/Auth";
 import Layout from "@components/Layout";
 import QRScanner, { FEEDBACK } from "@components/QRScanner";
 
-const navigation = ["badges", "prizes", "identifier"];
-
 function Prizes() {
   const { user } = useAuth();
   const router = useRouter();
@@ -23,7 +21,6 @@ function Prizes() {
     <Layout
       title="Prizes"
       description="Mark a prize as redeemed"
-      navigation={navigation}
       basePath="manager"
     >
       <div className="mt-5">

layout/Sponsor/Dashboard/Dashboard.tsx

@@ -8,19 +8,15 @@ import SponsorPrizeButton from "@layout/moonstone/sponsor/dashboard/SponsorPrize
 import SponsorBadgeButton from "@layout/moonstone/sponsor/dashboard/SponsorBadgeButton";
 import ParticipantSelector from "@layout/moonstone/sponsor/dashboard/ParticipantSelector";
 
-interface Props {}
-
-const SponsorDashboard: React.FC<Props> = () => {
+const SponsorDashboard: React.FC = () => {
   const participants: string[] = ["Nome 1", "Nome 2", "Nome 3", "Nome 4"];
 
   const onParticipantChange = (p: string) => {};
-  const navigation = ["scanner", "dashboard", "visitors"];
 
   return (
     <Layout
       title="Dashboard"
       description="Neste local, pode dar badges ao participantes que se encontram no seu stand"
-      navigation={navigation}
       basePath="sponsor"
     >
       <div className="mt-10 grid grid-cols-1 lg:grid-cols-2">

layout/Sponsor/Scanner/Scanner.tsx

@@ -5,11 +5,7 @@ import { withAuth, useAuth } from "@context/Auth";
 import QRScanner, { FEEDBACK } from "@components/QRScanner";
 import Layout from "@components/Layout";
 
-interface Props {}
-
-const navigation = ["scanner", "visitors"];
-
-const SponsorBadges: React.FC<Props> = () => {
+const SponsorBadges: React.FC = () => {
   const { user } = useAuth();
   const pauseRef = useRef(false);
   const [feedback, setFeedback] = useState<typeof FEEDBACK.SCANNING>(
@@ -51,7 +47,6 @@ const SponsorBadges: React.FC<Props> = () => {
     <Layout
       title="Scanner"
       description="Recompensa os teus visitantes com o badge"
-      navigation={navigation}
       basePath="sponsor"
     >
       <div className="mt-5">

layout/Sponsor/Spotlight/Spotlight.tsx

@@ -1,19 +1,12 @@
 import { withAuth } from "@context/Auth";
 
-import SpotlightButton from "@layout/moonstone/sponsor/spotlight/SpotlightButton";
-
 import Layout from "@components/Layout";
 
-interface Props {}
-
-const Spotlight: React.FC<Props> = () => {
-  const navigation = ["scanner", "dashboard", "spotlight", "visitors"];
-
+const Spotlight: React.FC = () => {
   return (
     <Layout
       title="Spotlight"
       description="Coloque a sua empresa em destaque"
-      navigation={navigation}
       basePath="sponsor"
     >
       <div>

layout/Sponsor/Visitors/Visitors.tsx

@@ -1,13 +1,10 @@
 import { useState, useEffect } from "react";
 import { withAuth, useAuth } from "@context/Auth";
 
-import Pagination from "../components/Pagination";
 import Layout from "@components/Layout";
 
 import { downloadCVInBulk, getCompanyVisitors } from "@lib/api";
 
-interface Props {}
-
 interface Visitor {
   id: string;
   name: string;
@@ -16,9 +13,7 @@ interface Visitor {
   cv: string;
 }
 
-const navigation = ["scanner", "visitors"];
-
-const SponsorVisitors: React.FC<Props> = () => {
+const SponsorVisitors: React.FC = () => {
   const { user } = useAuth();
   const [visitors, setVisitors] = useState<Visitor[]>([]);
   const [downloading, setDownloading] = useState<boolean>(false);
@@ -65,7 +60,6 @@ const SponsorVisitors: React.FC<Props> = () => {
     <Layout
       title="Visitantes"
       description="Veja quem está a visitar a sua empresa e já recebeu o seu badge"
-      navigation={navigation}
       basePath="sponsor"
     >
       <div className="mt-5 h-screen text-white">

pages/attendee/leaderboard.tsx

@@ -1 +1 @@
-export { default } from "@layout/Attendee/Leaderboard";
+export { default } from "@layout/shared/Leaderboard";

pages/manager/leaderboard.tsx

@@ -0,0 +1 @@
+export { default } from "@layout/shared/Leaderboard";