feat: my space tabs refactor

frontend/src/components/common/Tabs/Tabs.interface.ts

@@ -1,9 +1,8 @@
+import { Option } from '../Combobox';
+
 export interface TabsProps {
-  tabs: {
-    key: string;
-    label: string;
-    href: string;
-  }[];
-  currentTab: string;
-  onTabChange: (tab: string) => void;
+  tabs: Array<Option & { href?: string }>;
+  current: Option;
+  onTabChange: (tab: Option) => void;
+  className?: string;
 }

frontend/src/components/common/Tabs/Tabs.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import { TabsProps } from './Tabs.interface';
 import { generateClassNames } from '@app/utils';
 
-export const Tabs: FC<TabsProps> = ({ tabs, currentTab, onTabChange }) => {
+export const Tabs: FC<TabsProps> = ({ tabs, current, onTabChange, className }) => {
   return (
     <div>
       <div className="sm:hidden">
@@ -12,32 +12,35 @@ export const Tabs: FC<TabsProps> = ({ tabs, currentTab, onTabChange }) => {
         <select
           id="tabs"
           name="tabs"
-          onChange={(e) => onTabChange(e.target.value)}
-          defaultValue={tabs.find((tab) => tab.key === currentTab)?.label}
+          onChange={(e) => {
+            const tab = tabs.find((tab) => tab.name === e.target.value);
+            if (tab) onTabChange(tab);
+          }}
+          defaultValue={tabs.find((tab) => tab.id === current.id)?.id}
           className="block w-full rounded-md border-navy-300 py-2 pl-3 pr-10 text-base focus:border-blue-500 focus:outline-none focus:ring-blue-500 sm:text-sm"
         >
           {tabs.map((tab) => (
-            <option key={tab.key}>{tab.label}</option>
+            <option key={tab.id}>{tab.name}</option>
           ))}
         </select>
       </div>
       <div className="hidden sm:block">
         <div className="border-b border-navy-200">
-          <nav aria-label="Tabs" className="flex justify-center space-x-8">
+          <nav aria-label="Tabs" className={generateClassNames('flex space-x-8', className)}>
             {tabs.map((tab) => (
-              <a
-                key={tab.key}
-                href={tab.href}
-                aria-current={tab.key === currentTab ? 'page' : undefined}
+              <div
+                key={tab.id}
+                onClick={() => onTabChange(tab)}
+                aria-current={tab.id === current.id ? 'page' : undefined}
                 className={generateClassNames(
-                  tab.key === currentTab
+                  'cursor-pointer whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium transition duration-75 first-letter:uppercase',
+                  tab.id === current.id
                     ? 'border-blue-800 text-blue-800'
                     : 'border-transparent text-navy-500 hover:border-navy-300 hover:text-navy-700',
-                  'whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium',
                 )}
               >
-                {tab.label}
-              </a>
+                {tab.name}
+              </div>
             ))}
           </nav>
         </div>

frontend/src/components/pages/MySpace/MySpace.hooks.ts

@@ -1,22 +1,15 @@
 import { useCallback, useEffect, useState } from 'react';
-import { MySpaceHooks } from './MySpace.interface';
-import { useSearchParams, useRouter, usePathname } from 'next/navigation';
-import { DEFAULT_TAB } from './contants';
+import { mySpaceTabs } from './contants';
+import { Option } from '@app/components/common/Combobox';
+import { useQueryParams } from '@app/hooks';
 
-export const useMySpace = (): MySpaceHooks => {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const tab = searchParams.get('tab');
-  const [currentTab, setCurrentTab] = useState<string>(tab ?? DEFAULT_TAB);
+export const useMySpace = () => {
+  const [currentTab, setCurrentTab] = useState<Option>(mySpaceTabs[0]);
+  const { setParams } = useQueryParams();
 
   const handleReplace = useCallback(() => {
-    if (!currentTab) {
-      router.replace(`${pathname}?tab=${DEFAULT_TAB}`);
-    } else {
-      router.replace(`${pathname}?tab=${currentTab}`);
-    }
-  }, [currentTab, pathname, router]);
+    setParams({ tab: currentTab?.id });
+  }, [currentTab?.id, setParams]);
 
   useEffect(() => {
     handleReplace();

frontend/src/components/pages/MySpace/MySpace.interface.ts

@@ -16,8 +16,3 @@ export interface MySpaceProps {
     };
   };
 }
-
-export interface MySpaceHooks {
-  currentTab: string;
-  setCurrentTab: (tab: string) => void;
-}

frontend/src/components/pages/MySpace/MySpace.tsx

@@ -16,7 +16,7 @@ export const MySpace: React.FC<MySpaceProps> = ({ data }) => {
         My Space
       </Typography>
       <Header user={user} currentLevel={currentLevel} nextLevel={nextLevel} />
-      <Tabs tabs={mySpaceTabs} currentTab={currentTab} onTabChange={setCurrentTab} />
+      <Tabs tabs={mySpaceTabs} current={currentTab} onTabChange={setCurrentTab} />
     </div>
   );
 };

frontend/src/components/pages/MySpace/contants.ts

@@ -1,31 +1,22 @@
-import { routes } from '@app/constants';
-
-export const DEFAULT_TAB = 'ladder';
-
 export const mySpaceTabs = [
   {
-    key: 'ladder',
-    label: 'Ladder',
-    href: `${routes.mySpace.index}?tab=ladder`,
+    id: 'ladder',
+    name: 'Ladder',
   },
   {
-    key: 'score-card',
-    label: 'Score Card',
-    href: `${routes.mySpace.index}?tab=score-card`,
+    id: 'score-card',
+    name: 'Score Card',
   },
   {
-    key: 'goals',
-    label: 'Goals',
-    href: `${routes.mySpace.index}?tab=goals`,
+    id: 'goals',
+    name: 'Goals',
   },
   {
-    key: 'projects',
-    label: 'Projects',
-    href: `${routes.mySpace.index}?tab=projects`,
+    id: 'projects',
+    name: 'Projects',
   },
   {
-    key: 'activity',
-    label: 'Activity',
-    href: `${routes.mySpace.index}?tab=activity`,
+    id: 'activity',
+    name: 'Activity',
   },
 ];

frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.interface.ts

@@ -0,0 +1,5 @@
+import { Employee } from '../../People.interface';
+
+export interface PeopleTableProps {
+  people: Employee[];
+}