Add competition admin section

Author: coder13

src/App.tsx

@@ -6,6 +6,7 @@ import { usePageTracking } from './hooks/usePageTracking';
 import { CompetitionLayout } from './layouts/CompetitionLayout';
 import { RootLayout } from './layouts/RootLayout';
 import About from './pages/About';
+import CompetitionAdmin from './pages/Competition/Admin';
 import CompetitionEvents from './pages/Competition/ByGroup/Events';
 import CompetitionGroup from './pages/Competition/ByGroup/Group';
 import CompetitionGroupList from './pages/Competition/ByGroup/GroupList';
@@ -85,6 +86,12 @@ const PsychSheet = () => {
   return null;
 };
 
+const CompetitionRedirect = ({ to }: { to: string }) => {
+  const { competitionId } = useParams() as { competitionId: string };
+
+  return <Navigate to={`/competitions/${competitionId}/${to}`} replace />;
+};
+
 const Navigation = () => {
   usePageTracking(import.meta.env.VITE_GA_MEASUREMENT_ID);
 
@@ -112,11 +119,16 @@ const Navigation = () => {
 
           <Route path="psych-sheet" element={<PsychSheet />} />
           <Route path="psych-sheet/:eventId" element={<PsychSheetEvent />} />
-          <Route path="remote" element={<CompetitionRemote />} />
           <Route path="results" element={<CompetitionResults />} />
           <Route path="results/:roundId" element={<CompetitionResults />} />
 
-          <Route path="scramblers" element={<CompetitionScramblerSchedule />} />
+          <Route path="admin" element={<CompetitionAdmin />} />
+          <Route path="admin/remote" element={<CompetitionRemote />} />
+          <Route path="admin/scramblers" element={<CompetitionScramblerSchedule />} />
+          <Route path="admin/stats" element={<CompetitionStats />} />
+          <Route path="admin/sum-of-ranks" element={<CompetitionSumOfRanks />} />
+          <Route path="remote" element={<CompetitionRedirect to="admin/remote" />} />
+          <Route path="scramblers" element={<CompetitionRedirect to="admin/scramblers" />} />
           <Route path="stream" element={<CompetitionStreamSchedule />} />
           <Route path="information" element={<CompetitionInformation />} />
           <Route path="live" element={<CompetitionLive />} />
@@ -125,8 +137,8 @@ const Navigation = () => {
           <Route path="personal-schedule" element={<PersonalSchedule />} />
           <Route path="explore" element={<CompetitionGroupsOverview />} />
           <Route path="groups-schedule" element={<CompetitionGroupsSchedule />} />
-          <Route path="stats" element={<CompetitionStats />} />
-          <Route path="sum-of-ranks" element={<CompetitionSumOfRanks />} />
+          <Route path="stats" element={<CompetitionRedirect to="admin/stats" />} />
+          <Route path="sum-of-ranks" element={<CompetitionRedirect to="admin/sum-of-ranks" />} />
           <Route path="*" element={<p>Path not resolved</p>} />
         </Route>
         <Route path="/users/:userId" element={<UserLogin />} />

src/components/StyledNavLink/StyledNavLink.tsx

@@ -11,11 +11,12 @@ export const StyledNavLink: React.FC<StyledNavLinkProps> = ({
   to,
   text,
   className,
+  end = true,
   ...props
 }: StyledNavLinkProps) => (
   <NavLink
     {...props}
-    end
+    end={end}
     to={to}
     className={({ isActive }) =>
       classNames('link-nav', className, {

src/containers/CompetitionStats/CompetitionStats.tsx

@@ -21,29 +21,26 @@ export function CompetitionStatsContainer() {
   const acceptedRegistrationsCount = acceptedRegistrations?.length || 0;
 
   return (
-    <Container className="space-y-2 p-2">
-      <div className="type-heading flex justify-evenly">
+    <Container className="space-y-4 p-2">
+      <div className="grid grid-cols-2 gap-2 type-heading">
         <StatsBox title="Competitors" value={acceptedRegistrationsCount} />
         <StatsBox title="Events" value={eventCount} />
       </div>
-      <hr />
-      <div
-        className="grid w-full"
-        style={{
-          gridTemplateColumns: `repeat(${eventCount}, 1fr)`,
-        }}>
-        {wcif?.events?.map(({ id }) => (
-          <span key={id} className={`cubing-icon event-${id} mx-1 type-body`} />
-        ))}
-        {wcif?.events?.map(({ id }) => (
-          <span key={id} className="type-body-sm text-center">
-            {
-              acceptedRegistrations?.filter(({ registration }) =>
-                registration?.eventIds.includes(id),
-              ).length
-            }
-          </span>
-        ))}
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4">
+        {wcif?.events?.map(({ id }) => {
+          const registrationCount =
+            acceptedRegistrations?.filter(({ registration }) => registration?.eventIds.includes(id))
+              .length ?? 0;
+
+          return (
+            <div
+              key={id}
+              className="flex items-center justify-between gap-2 rounded-md border border-tertiary-weak bg-panel px-3 py-2 shadow-sm">
+              <span className={`cubing-icon event-${id} shrink-0 type-body`} />
+              <span className="type-label text-default">{registrationCount}</span>
+            </div>
+          );
+        })}
       </div>
     </Container>
   );

src/containers/CompetitionSumOfRanks/CompetitionSumOfRanks.tsx

@@ -101,7 +101,7 @@ export function CompetitionSumOfRanksContainer({
                     <KinchTooltip />
                   </span>
                 </th>
-                <th className="px-3 py-2 text-right font-semibold">Medals</th>
+                <th className="hidden px-3 py-2 text-right font-semibold md:table-cell">Medals</th>
               </tr>
             </thead>
             <tbody>
@@ -117,7 +117,9 @@ export function CompetitionSumOfRanksContainer({
                   </td>
                   <td className="px-3 py-2 text-right font-semibold">{ranking.sumOfRanks}</td>
                   <td className="px-3 py-2 text-right">{formatKinch(ranking.kinch)}</td>
-                  <td className="px-3 py-2 text-right">{formatMedals(ranking)}</td>
+                  <td className="hidden px-3 py-2 text-right md:table-cell">
+                    {formatMedals(ranking)}
+                  </td>
                 </tr>
               ))}
             </tbody>

src/i18n/en/translation.yaml

@@ -158,6 +158,9 @@ header:
     results: 'Results'
     scramblers: 'Scramblers'
     stream: 'Stream'
+    admin: 'Admin'
+    sumOfRanks: 'Sum of Rankings'
+    stats: 'Stats'
 home:
   subtitle: 'Learn all you need about your WCA competition assignments!'
   explanation: 'Note: This site is a convenience tool for organizers, delegates, and competitors. It uses scheduled data, so check with organizers for the latest details. Start and end times may change.'

src/i18n/fr/translation.yaml

@@ -118,6 +118,9 @@ header:
     rankings: 'Classements'
     scramblers: 'Mélangeurs'
     stream: 'Stream'
+    admin: 'Admin'
+    sumOfRanks: 'Somme des classements'
+    stats: 'Stats'
 home:
   subtitle: 'Apprenez tout ce que vous devez savoir sur les tâches qui vous ont été attribuées aux compétitions WCA !'
   explanation: 'Remarque : Ce site web est un outil pratique pour les organisateurs, délégués et compétiteurs. Les informations fournies sont basées sur le planning prévisionnel. Pensez à consulter régulièrement la page de la compétition pour obtenir les informations les plus récentes. Les horaires de début et de fin peuvent varier.'

src/layouts/CompetitionLayout/CompetitionLayout.tabs.tsx

@@ -11,22 +11,31 @@ interface CompetitionLayoutTabsProps {
   wcif?: Competition;
 }
 
+export interface CompetitionLayoutTab {
+  href: string;
+  text: string;
+  end?: boolean;
+  hiddenOnMobile?: boolean;
+}
+
+interface CompetitionLayoutTabs {
+  tabs: CompetitionLayoutTab[];
+  adminTabs: CompetitionLayoutTab[];
+}
+
 export const useCompetitionLayoutTabs = ({ competitionId, wcif }: CompetitionLayoutTabsProps) => {
   const { t } = useTranslation();
   const { user } = useAuth();
   const userId = user?.id;
 
-  return useMemo(() => {
+  return useMemo<CompetitionLayoutTabs>(() => {
     const hasStream = wcif && streamActivities(wcif).length > 0;
     const person = wcif?.persons.find((p) => p.wcaUserId === userId);
     const isPersonStaff = person && isStaff(person);
     const canManageRemote = isCompetitionDelegateOrOrganizer(wcif, userId ? { id: userId } : null);
 
-    const _tabs: {
-      href: string;
-      text: string;
-      hiddenOnMobile?: boolean;
-    }[] = [];
+    const _tabs: CompetitionLayoutTab[] = [];
+    const _adminTabs: CompetitionLayoutTab[] = [];
 
     _tabs.push({
       href: `/competitions/${competitionId}`,
@@ -54,15 +63,15 @@ export const useCompetitionLayoutTabs = ({ competitionId, wcif }: CompetitionLay
     );
 
     if (isPersonStaff) {
-      _tabs.push({
-        href: `/competitions/${competitionId}/scramblers`,
+      _adminTabs.push({
+        href: `/competitions/${competitionId}/admin/scramblers`,
         text: t('header.tabs.scramblers'),
       });
     }
 
     if (canManageRemote) {
-      _tabs.push({
-        href: `/competitions/${competitionId}/remote`,
+      _adminTabs.push({
+        href: `/competitions/${competitionId}/admin/remote`,
         text: t('header.tabs.remote', {
           defaultValue: 'Remote',
         }),
@@ -76,6 +85,34 @@ export const useCompetitionLayoutTabs = ({ competitionId, wcif }: CompetitionLay
       });
     }
 
-    return _tabs;
+    if (isPersonStaff || canManageRemote) {
+      _adminTabs.push(
+        {
+          href: `/competitions/${competitionId}/admin/sum-of-ranks`,
+          text: t('header.tabs.sumOfRanks', {
+            defaultValue: 'Sum of Rankings',
+          }),
+        },
+        {
+          href: `/competitions/${competitionId}/admin/stats`,
+          text: t('header.tabs.stats', {
+            defaultValue: 'Stats',
+          }),
+        },
+      );
+    }
+
+    if (_adminTabs.length > 0) {
+      _tabs.push({
+        href: `/competitions/${competitionId}/admin`,
+        text: t('header.tabs.admin'),
+        end: false,
+      });
+    }
+
+    return {
+      tabs: _tabs,
+      adminTabs: _adminTabs,
+    };
   }, [wcif, competitionId, userId, t]);
 };

src/layouts/CompetitionLayout/CompetitionLayout.tsx

@@ -20,7 +20,7 @@ export function CompetitionLayout() {
 
   const { data: wcif, dataUpdatedAt, isFetching } = useWcif(competitionId!);
 
-  const tabs = useCompetitionLayoutTabs({
+  const { tabs } = useCompetitionLayoutTabs({
     competitionId: competitionId!,
     wcif: wcif,
   });
@@ -39,6 +39,7 @@ export function CompetitionLayout() {
               className={classNames({
                 'hidden md:block': i.hiddenOnMobile,
               })}
+              end={i.end}
               to={i.href}
               text={i.text}
             />

src/pages/Competition/Admin/index.tsx

@@ -0,0 +1,55 @@
+import { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { Container, NoteBox } from '@/components';
+import { useCompetitionLayoutTabs } from '@/layouts/CompetitionLayout/CompetitionLayout.tabs';
+import { useWCIF } from '@/providers/WCIFProvider';
+
+const adminDescriptions: Record<string, string> = {
+  scramblers: 'View scrambler assignments by event and round.',
+  remote: 'Control Live Activities updates for the competition.',
+  'sum-of-ranks': 'Review competitor rankings across completed rounds.',
+  stats: 'View competition registration and event counts.',
+};
+
+const adminItemId = (href: string) => href.split('/').pop() ?? href;
+
+export default function CompetitionAdmin() {
+  const { competitionId, wcif, setTitle } = useWCIF();
+  const { adminTabs } = useCompetitionLayoutTabs({ competitionId, wcif });
+
+  useEffect(() => {
+    setTitle('Admin');
+  }, [setTitle]);
+
+  return (
+    <Container className="space-y-4 p-2 pt-4">
+      <h1 className="type-heading">Admin</h1>
+      {adminTabs.length === 0 ? (
+        <NoteBox text="No admin tools are available for your account at this competition." />
+      ) : (
+        <div className="space-y-2">
+          {adminTabs.map((tab) => {
+            const itemId = adminItemId(tab.href);
+
+            return (
+              <Link
+                key={tab.href}
+                to={tab.href}
+                className="block rounded-md border border-tertiary-weak bg-panel px-4 py-3 shadow-sm hover-bg-tertiary">
+                <div className="flex items-center justify-between gap-4">
+                  <div className="min-w-0 space-y-1">
+                    <div className="type-label text-default">{tab.text}</div>
+                    {adminDescriptions[itemId] && (
+                      <div className="type-body-sm text-subtle">{adminDescriptions[itemId]}</div>
+                    )}
+                  </div>
+                  <i className="fa fa-chevron-right shrink-0 text-muted" aria-hidden="true" />
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+      )}
+    </Container>
+  );
+}