chore: FRON 38 initial selection lists for season and event

src/app/dashboard/layout.tsx

@@ -19,7 +19,7 @@ export default function DashboardLayout({
         <Suspense fallback={<div className='container h-48 animate-pulse' />}>
           <Sidebar />
         </Suspense>
-        <main className='col-span-3 min-h-96'>{children}</main>
+        <main className='col-span-3 w-full'>{children}</main>
       </div>
     </>
   );

src/app/dashboard/page.tsx

@@ -1,5 +1,20 @@
 // {serverError ? <Error statusCode={422} title={serverError} /> : children}
 
+import { Suspense } from 'react';
+
+import { SelectionList } from '@/components/SelectionData/SelectionList';
+
 export default function Page() {
-  return <h1>Hello, Dashboard Page!</h1>;
+  return (
+    <>
+      <div className='grid grid-cols-3'>
+        <div className='col-span-1 row-span-3'>
+          <Suspense fallback={<div className='h-16 animate-pulse' />}>
+            <SelectionList />
+          </Suspense>
+        </div>
+        <div>{/* Selection Query Action List Options goes here */}</div>
+      </div>
+    </>
+  );
 }

src/components/SelectionData/SelectionItem.tsx

@@ -0,0 +1,17 @@
+export const SelectionItem = ({
+  children,
+  clickHandler,
+}: {
+  children: React.ReactNode | React.ReactNode[];
+  clickHandler: () => void;
+}) => {
+  return (
+    <a
+      onClick={clickHandler}
+      tabIndex={0}
+      className='cursor-pointer border-b bg-card px-4 py-2 text-card-foreground hover:bg-accent hover:text-accent-foreground'
+    >
+      {children}
+    </a>
+  );
+};

src/components/SelectionData/SelectionList.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import { useAtom } from 'jotai';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+import {
+  EventListState,
+  EventState,
+  SessionListState,
+  SessionState,
+} from '@/state-mgmt/atoms';
+
+import { SelectionItem } from './SelectionItem';
+
+const titles: { [key: string]: string } = {
+  Season: 'Season Events',
+  Event: 'Event Sessions',
+};
+
+export const SelectionList = () => {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  // Default view is Season
+  const view = searchParams.get('view') || 'Season';
+
+  // Event atoms
+  const [, setEvent] = useAtom(EventState);
+  const [eventList] = useAtom(EventListState);
+
+  // Session atoms
+  const [, setSession] = useAtom(SessionState);
+  const [sessionList] = useAtom(SessionListState);
+
+  const handleSelection = (value: string) => {
+    const params = new URLSearchParams(searchParams);
+
+    if (view === 'Season') {
+      params.set('view', 'Event');
+      setEvent(value);
+    }
+
+    if (view === 'Event') {
+      params.set('view', 'Session');
+      setSession(value);
+    }
+
+    router.push(`${pathname}?${params.toString()}`);
+  };
+
+  const dataListComponents: { [key: string]: React.ReactNode[] } = {
+    // Season view
+    Season: eventList.map((event, i) => (
+      <SelectionItem
+        key={event.EventDate}
+        clickHandler={() => handleSelection(event.EventName)}
+      >
+        <h2>
+          {i + 1}. {event.EventName}
+        </h2>
+        {/* <p>{event.EventDate}</p> */}
+      </SelectionItem>
+    )),
+    // Event view
+    Event: sessionList.map((session) => (
+      <SelectionItem
+        key={session}
+        clickHandler={() => handleSelection(session)}
+      >
+        <h2>{session}</h2>
+      </SelectionItem>
+    )),
+  };
+
+  return (
+    <>
+      <h1 className='px-4 text-2xl font-extrabold tracking-tight lg:text-3xl'>
+        {titles[view] || 'Invalid view selected'}
+      </h1>
+      <div className='my-2 grid overflow-hidden rounded-xl border shadow'>
+        {dataListComponents[view] || 'No data available'}
+      </div>
+    </>
+  );
+};