From 6e3ffadcb5427a6c92fe0a4b38ba1995874fb33b Mon Sep 17 00:00:00 2001
From: r1skz3ro <mikolaj.schatt@kellton.com>
Date: Fri, 19 Jul 2024 11:58:55 +0200
Subject: [PATCH] feat: my space tabs refactor

---
 .../common/Pagination/Pagination.interface.ts |   8 -
 .../common/Pagination/Pagination.tsx          |  80 --------
 .../components/common/Tabs/Tabs.interface.ts  |  13 +-
 frontend/src/components/common/Tabs/Tabs.tsx  |  29 +--
 .../components/modules/Tabs/Tabs.interface.ts |   9 -
 frontend/src/components/modules/Tabs/Tabs.tsx |  21 --
 frontend/src/components/modules/Tabs/index.ts |   1 -
 .../components/pages/MySpace/MySpace.hooks.ts |  23 +--
 .../pages/MySpace/MySpace.interface.ts        |   5 -
 .../src/components/pages/MySpace/MySpace.tsx  |   2 +-
 .../src/components/pages/MySpace/contants.ts  |  29 +--
 .../PeopleTable/PeopleTable.interface.ts      |   5 +
 .../Modules/PeopleTable/PeopleTable.tsx       | 165 ++++++++++++++++
 .../pages/People/Modules/PeopleTable/index.ts |   1 +
 .../components/pages/People/People.hook.ts    |  27 ++-
 .../pages/People/People.interface.ts          |  32 ++++
 .../src/components/pages/People/People.tsx    | 179 +-----------------
 .../components/pages/People/People.utils.ts   |  24 +--
 frontend/src/components/pages/People/index.ts |   1 +
 frontend/src/hooks/useQueryParams.ts          |  43 ++---
 frontend/src/types/people.ts                  |  32 ----
 21 files changed, 293 insertions(+), 436 deletions(-)
 delete mode 100644 frontend/src/components/common/Pagination/Pagination.interface.ts
 delete mode 100644 frontend/src/components/common/Pagination/Pagination.tsx
 delete mode 100644 frontend/src/components/modules/Tabs/Tabs.interface.ts
 delete mode 100644 frontend/src/components/modules/Tabs/Tabs.tsx
 delete mode 100644 frontend/src/components/modules/Tabs/index.ts
 create mode 100644 frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.interface.ts
 create mode 100644 frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.tsx
 create mode 100644 frontend/src/components/pages/People/Modules/PeopleTable/index.ts

diff --git a/frontend/src/components/common/Pagination/Pagination.interface.ts b/frontend/src/components/common/Pagination/Pagination.interface.ts
deleted file mode 100644
index 03a1ce4d..00000000
--- a/frontend/src/components/common/Pagination/Pagination.interface.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { MouseEvent } from 'react';
-
-export interface PaginationProps {
-  itemsAmount?: number;
-  setPageNumber: (event: MouseEvent<HTMLButtonElement>, number?: number) => void;
-  pageNumber: number;
-  pagePosition: number;
-}
diff --git a/frontend/src/components/common/Pagination/Pagination.tsx b/frontend/src/components/common/Pagination/Pagination.tsx
deleted file mode 100644
index 03a85da4..00000000
--- a/frontend/src/components/common/Pagination/Pagination.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { ChevronRightIcon } from '@app/static/icons/ChevronRightIcon';
-import { PaginationProps } from './Pagination.interface';
-import { generateClassNames } from '@app/utils';
-import { paginationMaxPages, rowsPerPage } from '@app/components/pages/People/People.utils';
-
-export const Pagination = ({ itemsAmount, setPageNumber, pageNumber }: PaginationProps) => {
-  const pagesButtons = itemsAmount && [...Array(Math.ceil(itemsAmount / rowsPerPage))];
-
-  const getResultsNumber = (position?: string) => {
-    if (position === 'start') return pageNumber * rowsPerPage - rowsPerPage + 1;
-
-    return itemsAmount && pageNumber * rowsPerPage > itemsAmount
-      ? (itemsAmount % rowsPerPage) + (pageNumber * rowsPerPage - rowsPerPage)
-      : pageNumber * rowsPerPage;
-  };
-
-  // TO REFACTOR
-  const getPageNumber = (index: number) => {
-    return index + 1;
-  };
-
-  return (
-    <div className="flex items-center justify-between py-4">
-      <p className="text-sm text-navy-600 *:font-semibold">
-        Showing
-        <span> {getResultsNumber('start')} </span>
-        to
-        <span> {getResultsNumber()} </span>
-        of
-        <span> {itemsAmount} </span>
-        results
-      </p>
-
-      <div className="flex items-center gap-2">
-        <button
-          className="flex h-11 w-11 items-center justify-center"
-          onClick={(e) => pageNumber !== 1 && setPageNumber(e, --pageNumber)}
-        >
-          <ChevronRightIcon
-            className={generateClassNames('h-6 w-6 rotate-180 text-navy-600', {
-              'cursor-not-allowed text-navy-300': pageNumber === 1,
-            })}
-            aria-hidden="true"
-          />
-        </button>
-        <div className="flex text-sm font-medium text-navy-600 *:flex *:h-11 *:w-11 *:items-center *:justify-center *:rounded-full *:border *:border-white *:px-5">
-          {pagesButtons &&
-            pagesButtons.map((_, index) => {
-              if (index + 1 <= paginationMaxPages) {
-                return (
-                  <button
-                    key={index + 1}
-                    data-position={index + 1}
-                    data-page={getPageNumber(index)}
-                    {...(pageNumber === index + 1 && {
-                      className: 'bg-blue-100 text-blue-900 [&]:border-blue-800',
-                    })}
-                    onClick={pageNumber !== index + 1 ? setPageNumber : undefined}
-                  >
-                    {getPageNumber(index)}
-                  </button>
-                );
-              }
-            })}
-        </div>
-        <button
-          className="flex h-11 w-11 items-center justify-center"
-          onClick={(e) => pagesButtons && pageNumber !== pagesButtons.length && setPageNumber(e, ++pageNumber)}
-        >
-          <ChevronRightIcon
-            className={generateClassNames('h-6 w-6 text-navy-600', {
-              'cursor-not-allowed text-navy-300': pagesButtons && pageNumber === pagesButtons.length,
-            })}
-            aria-hidden="true"
-          />
-        </button>
-      </div>
-    </div>
-  );
-};
diff --git a/frontend/src/components/common/Tabs/Tabs.interface.ts b/frontend/src/components/common/Tabs/Tabs.interface.ts
index 4894a7a9..a7560d32 100644
--- a/frontend/src/components/common/Tabs/Tabs.interface.ts
+++ b/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;
 }
diff --git a/frontend/src/components/common/Tabs/Tabs.tsx b/frontend/src/components/common/Tabs/Tabs.tsx
index f22a7f4d..75ef5236 100644
--- a/frontend/src/components/common/Tabs/Tabs.tsx
+++ b/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>
diff --git a/frontend/src/components/modules/Tabs/Tabs.interface.ts b/frontend/src/components/modules/Tabs/Tabs.interface.ts
deleted file mode 100644
index ae944240..00000000
--- a/frontend/src/components/modules/Tabs/Tabs.interface.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Option } from '@app/components/common/Combobox';
-import { ComponentProps } from 'react';
-
-export interface TabsProps {
-  tabs: Option[];
-  active: Option;
-  onChange: (active: Option) => void;
-  className?: ComponentProps<'nav'>['className'];
-}
diff --git a/frontend/src/components/modules/Tabs/Tabs.tsx b/frontend/src/components/modules/Tabs/Tabs.tsx
deleted file mode 100644
index d5127c90..00000000
--- a/frontend/src/components/modules/Tabs/Tabs.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { generateClassNames } from '@app/utils';
-import { TabsProps } from './Tabs.interface';
-
-export const Tabs = ({ tabs, active, onChange, className }: TabsProps) => (
-  <div className={`flex ${className}`} aria-label="Tab">
-    <ol role="list" className="flex gap-8 pt-4">
-      {tabs.map((tab) => (
-        <li key={tab.id}>
-          <div
-            className={generateClassNames('flex cursor-pointer gap-x-1 px-2 pb-4 font-medium text-navy-500', {
-              'border-b-2 border-blue-800 text-blue-800': tab.id === active.id,
-            })}
-            onClick={() => onChange(tab)}
-          >
-            <span className="first-letter:uppercase">{tab.name}</span>
-          </div>
-        </li>
-      ))}
-    </ol>
-  </div>
-);
diff --git a/frontend/src/components/modules/Tabs/index.ts b/frontend/src/components/modules/Tabs/index.ts
deleted file mode 100644
index 941e6bab..00000000
--- a/frontend/src/components/modules/Tabs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Tabs } from './Tabs';
diff --git a/frontend/src/components/pages/MySpace/MySpace.hooks.ts b/frontend/src/components/pages/MySpace/MySpace.hooks.ts
index dad772a1..45ecb862 100644
--- a/frontend/src/components/pages/MySpace/MySpace.hooks.ts
+++ b/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();
diff --git a/frontend/src/components/pages/MySpace/MySpace.interface.ts b/frontend/src/components/pages/MySpace/MySpace.interface.ts
index db7a9aeb..be988972 100644
--- a/frontend/src/components/pages/MySpace/MySpace.interface.ts
+++ b/frontend/src/components/pages/MySpace/MySpace.interface.ts
@@ -16,8 +16,3 @@ export interface MySpaceProps {
     };
   };
 }
-
-export interface MySpaceHooks {
-  currentTab: string;
-  setCurrentTab: (tab: string) => void;
-}
diff --git a/frontend/src/components/pages/MySpace/MySpace.tsx b/frontend/src/components/pages/MySpace/MySpace.tsx
index 4afe2def..5df5da3f 100644
--- a/frontend/src/components/pages/MySpace/MySpace.tsx
+++ b/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>
   );
 };
diff --git a/frontend/src/components/pages/MySpace/contants.ts b/frontend/src/components/pages/MySpace/contants.ts
index 5792edd2..f8858254 100644
--- a/frontend/src/components/pages/MySpace/contants.ts
+++ b/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',
   },
 ];
diff --git a/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.interface.ts b/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.interface.ts
new file mode 100644
index 00000000..34c7b48d
--- /dev/null
+++ b/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.interface.ts
@@ -0,0 +1,5 @@
+import { Employee } from '../../People.interface';
+
+export interface PeopleTableProps {
+  people: Employee[];
+}
diff --git a/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.tsx b/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.tsx
new file mode 100644
index 00000000..5e042695
--- /dev/null
+++ b/frontend/src/components/pages/People/Modules/PeopleTable/PeopleTable.tsx
@@ -0,0 +1,165 @@
+import Image from 'next/image';
+
+import { Typography } from '@app/components/common/Typography';
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
+import { FC, Fragment } from 'react';
+import { DotVerticalIcon } from '@app/static/icons/DotVerticalIcon';
+import { CheckMarkIcon } from '@app/static/icons/CheckMarkIcon';
+import Link from 'next/link';
+import { employeeMenuOptions } from '../../People.utils';
+import { PeopleTableProps } from './PeopleTable.interface';
+
+export const PeopleTable: FC<PeopleTableProps> = ({ people }) => {
+  return (
+    <div className="flow-root">
+      <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+        <div className="inline-block w-full py-2 align-middle sm:px-6 lg:px-8">
+          <table className="min-w-full divide-y divide-navy-200 border-b border-navy-200">
+            <thead className="text-left uppercase text-navy-500">
+              <tr>
+                <th scope="col" className="py-3.5 pl-4 pr-3 text-xs font-medium sm:pl-4">
+                  Employee
+                </th>
+                <th scope="col" className="px-3 py-5 text-xs font-medium">
+                  Ladder
+                </th>
+                <th scope="col" className="w-[160px] px-3 py-5 text-right text-xs font-medium">
+                  Current Band
+                </th>
+                <th scope="col" className="w-[160px] px-3 py-5 text-right text-xs font-medium">
+                  Active Goal
+                </th>
+                <th scope="col" className="w-[248px] px-3 py-5 text-center text-xs font-medium">
+                  Goal Progress
+                </th>
+                <th scope="col" className="w-[160px] px-3 py-5 text-center text-xs font-medium">
+                  Latest Activity
+                </th>
+                <th scope="col" className="relative px-4 py-3.5 sm:pr-0">
+                  <span className="sr-only">Edit</span>
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-navy-200 bg-white">
+              {people?.map((person) => (
+                <tr key={person.id}>
+                  <td className="flex whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0">
+                    <div className="flex items-center">
+                      <div className="h-8 w-8">
+                        <Image
+                          width={200}
+                          height={200}
+                          alt="User image"
+                          src="/images/avatar_placeholder.jpeg"
+                          className="h-8 w-8 rounded-full object-cover"
+                        />
+                      </div>
+                      <div className="ml-4">
+                        <Typography variant="body-s/medium">{person.name}</Typography>
+                        <Typography variant="body-s/regular" className="text-navy-600">
+                          {person.title}
+                        </Typography>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="text-gray-500 whitespace-nowrap px-3 py-5 text-sm">
+                    <div className="flex flex-col gap-y-4">
+                      {person?.laddersDetails?.map((ladder) => (
+                        <Typography key={ladder.ladderName} variant="body-s/regular" className="text-navy-700">
+                          {ladder.ladderName}
+                        </Typography>
+                      ))}
+                    </div>
+                  </td>
+                  <td className="text-gray-500 whitespace-nowrap px-3 py-5 text-sm">
+                    <div className="flex flex-col items-end gap-y-4">
+                      {person?.laddersDetails?.map((ladder) => (
+                        <Typography key={ladder.ladderName} variant="body-s/regular" className="text-navy-700">
+                          {ladder?.currentBand}
+                        </Typography>
+                      ))}
+                    </div>
+                  </td>
+                  <td className="text-gray-500 whitespace-nowrap px-3 py-5 text-sm">
+                    <div className="flex flex-col items-end gap-y-4">
+                      {person?.laddersDetails?.map((ladder) => (
+                        <div key={ladder.ladderName} className="mr-2 h-4 w-4 text-navy-700">
+                          {ladder?.activeGoal && <CheckMarkIcon className="text-green-600" width={20} height={20} />}
+                        </div>
+                      ))}
+                    </div>
+                  </td>
+                  <td className="text-gray-500 whitespace-nowrap px-10 py-5 text-sm">
+                    <div className="flex flex-col gap-y-4">
+                      {person?.laddersDetails?.map((ladder) => (
+                        <div key={ladder.ladderName} className="flex h-4 items-center text-navy-700">
+                          {ladder.activeGoal && (
+                            <>
+                              <div className="mr-3 w-full rounded-full bg-navy-300">
+                                <div
+                                  className="h-2 rounded-full bg-blue-800"
+                                  style={{ width: `${ladder.goalProgress}%` }}
+                                />
+                              </div>
+                              <Typography variant="body-s/medium" className="text-navy-600">
+                                {ladder.goalProgress}%
+                              </Typography>
+                            </>
+                          )}
+                        </div>
+                      ))}
+                    </div>
+                  </td>
+                  <td className="text-gray-500 flex flex-col items-center whitespace-nowrap px-3 py-8 text-sm">
+                    {person?.laddersDetails?.map((details) => (
+                      <div key={details.ladderName} className="flex h-8 w-8 items-center justify-center text-navy-700">
+                        {details.activeGoal && (
+                          <div className="flex h-7 w-7 items-center justify-center rounded-full bg-blue-800">
+                            <Typography variant="body-s/semibold" className="text-white">
+                              {details.latestActivity}
+                            </Typography>
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </td>
+                  <td className="relative whitespace-nowrap py-5 text-sm font-medium">
+                    {/* TODO: Create new component Dropdown Menu */}
+                    <Menu as="div" className="relative">
+                      <MenuButton>
+                        <span className="sr-only">Open user menu</span>
+                        <DotVerticalIcon />
+                      </MenuButton>
+                      <Transition
+                        as={Fragment}
+                        enter="transition ease-out duration-100"
+                        enterFrom="transform opacity-0 scale-95"
+                        enterTo="transform opacity-100 scale-100"
+                        leave="transition ease-in duration-75"
+                        leaveFrom="transform opacity-100 scale-100"
+                        leaveTo="transform opacity-0 scale-95"
+                      >
+                        <MenuItems className="absolute right-0 z-10 mt-2 w-48 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1">
+                          {employeeMenuOptions.map(({ href, label }) => (
+                            <MenuItem key={label}>
+                              <Link
+                                href={href}
+                                className="flex items-center gap-3 px-4 py-2 text-sm text-navy-700 hover:bg-navy-100"
+                              >
+                                <span>{label}</span>
+                              </Link>
+                            </MenuItem>
+                          ))}
+                        </MenuItems>
+                      </Transition>
+                    </Menu>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/components/pages/People/Modules/PeopleTable/index.ts b/frontend/src/components/pages/People/Modules/PeopleTable/index.ts
new file mode 100644
index 00000000..1c915cb3
--- /dev/null
+++ b/frontend/src/components/pages/People/Modules/PeopleTable/index.ts
@@ -0,0 +1 @@
+export { PeopleTable } from './PeopleTable';
diff --git a/frontend/src/components/pages/People/People.hook.ts b/frontend/src/components/pages/People/People.hook.ts
index 4ac47d67..8f6b52fa 100644
--- a/frontend/src/components/pages/People/People.hook.ts
+++ b/frontend/src/components/pages/People/People.hook.ts
@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
-import { Employee, PeopleDetails, StatusType } from '@app/types/people';
 import { useSearchParams } from 'next/navigation';
 import { PEOPLE_DETAILS } from './People.utils';
 import { useForm } from 'react-hook-form';
-import { PeopleTableForm, peopleTableFormName } from './People.interface';
+import { Employee, PeopleDetails, PeopleStatus, PeopleTableForm, peopleTableFormName } from './People.interface';
 import { Option } from '@app/components/common/Combobox';
+import { useQueryParams } from '@app/hooks';
 
 export const usePeople = () => {
   const searchParams = useSearchParams();
@@ -22,6 +22,8 @@ export const usePeople = () => {
   const [fetchedPeople, setFetchedPeople] = useState<PeopleDetails>();
   const [filteredPeople, setFilteredPeople] = useState<Employee[]>([]);
   const [tabsData, setTabsData] = useState<Option[]>([]);
+  const { setParams } = useQueryParams();
+  const values = form.watch();
 
   const fetchPeople = useCallback(async () => {
     setFetchedPeople(PEOPLE_DETAILS);
@@ -35,15 +37,15 @@ export const usePeople = () => {
   useEffect(() => {
     if (fetchedPeople) {
       const tabs: Option[] = [
-        { name: `${StatusType.active} (${fetchedPeople.active})`, id: StatusType.active },
-        { name: `${StatusType.deactivated} (${fetchedPeople.deactivated})`, id: StatusType.deactivated },
-        { name: `${StatusType.draft} (${fetchedPeople.draft})`, id: StatusType.draft },
+        { name: `${PeopleStatus.active} (${fetchedPeople.active})`, id: PeopleStatus.active },
+        { name: `${PeopleStatus.deactivated} (${fetchedPeople.deactivated})`, id: PeopleStatus.deactivated },
+        { name: `${PeopleStatus.draft} (${fetchedPeople.draft})`, id: PeopleStatus.draft },
       ];
       setTabsData(tabs);
     }
   }, [fetchedPeople]);
 
-  // INFO: set current tab
+  // INFO: set current tab based on url param
   useEffect(() => {
     if (tabParam) {
       const currentTab = tabsData.find((tab) => tab.id === tabParam);
@@ -52,11 +54,9 @@ export const usePeople = () => {
   }, [tabParam, tabsData]);
 
   // TODO: use url params update hook to set new band in url.
-  // useEffect(() => {
-  //   if (values.band) {
-  //     urlChangeHandler(tab, 1, values.band);
-  //   }
-  // }, [tab, urlChangeHandler, values]);
+  useEffect(() => {
+    setParams({ band: values?.band?.id });
+  }, [setParams, values.band]);
 
   // INFO: set people based on filters
   useEffect(() => {
@@ -70,10 +70,7 @@ export const usePeople = () => {
   }, [fetchedPeople, tab?.id]);
 
   const handleChangeTab = (newTab: Option) => {
-    console.log('newTab', newTab);
-
-    // TODO: use url params update hook to set new tab in url.
-    // urlChangeHandler(pressedTab);
+    setParams({ tab: newTab.id });
   };
 
   const handleClearBand = () => {
diff --git a/frontend/src/components/pages/People/People.interface.ts b/frontend/src/components/pages/People/People.interface.ts
index a8d0f5cb..da7e78ef 100644
--- a/frontend/src/components/pages/People/People.interface.ts
+++ b/frontend/src/components/pages/People/People.interface.ts
@@ -9,3 +9,35 @@ export interface PeopleTableForm {
   [peopleTableFormName.band]: Option | null;
   [peopleTableFormName.search]: string;
 }
+
+export const PeopleStatus = {
+  active: 'active',
+  draft: 'draft',
+  deactivated: 'deactivated',
+} as const;
+
+export interface Employee {
+  id: number;
+  name: string;
+  title: string;
+  laddersDetails: LadderDetails[];
+  status: keyof typeof PeopleStatus;
+}
+
+export interface LadderDetails {
+  ladderName: string;
+  currentBand: number;
+  activeGoal: boolean;
+  goalProgress: number;
+  latestActivity: number;
+}
+
+export interface PeopleDetails {
+  total: number;
+  page: number;
+  count: number;
+  results: Employee[];
+  active: number;
+  draft: number;
+  deactivated: number;
+}
diff --git a/frontend/src/components/pages/People/People.tsx b/frontend/src/components/pages/People/People.tsx
index fb10c122..e178d75a 100644
--- a/frontend/src/components/pages/People/People.tsx
+++ b/frontend/src/components/pages/People/People.tsx
@@ -1,23 +1,17 @@
 'use client';
 import { Breadcrumbs } from '@app/components/modules/Breadcrumbs';
-import { Tabs } from '@app/components/modules/Tabs';
 import { usePeople } from './People.hook';
-import Image from 'next/image';
-
-import { Typography } from '@app/components/common/Typography';
-import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
-import { Fragment } from 'react';
-import { DotVerticalIcon } from '@app/static/icons/DotVerticalIcon';
 import Link from 'next/link';
 import { FormProvider } from '@app/components/common/FormProvider';
 import { Input } from '@app/components/common/Input';
 import { SearchIcon } from '@app/static/icons/SearchIcon';
-import { bands, employeeMenuOptions } from './People.utils';
+import { bands } from './People.utils';
 import { PeopleTableForm, peopleTableFormName } from './People.interface';
-import { CheckMarkIcon } from '@app/static/icons/CheckMarkIcon';
 import { routes } from '@app/constants';
 import { Button } from '@app/components/common/Button';
 import { Listbox } from '@app/components/common/Listbox';
+import { PeopleTable } from './Modules/PeopleTable';
+import { Tabs } from '@app/components/common/Tabs';
 
 export const People = () => {
   const { tab, handleChangeTab, tabsData, filteredPeople, form, handleClearBand } = usePeople();
@@ -32,7 +26,7 @@ export const People = () => {
           </Button>
         </div>
 
-        {tab && <Tabs active={tab} onChange={handleChangeTab} tabs={tabsData} className="border-b border-navy-200" />}
+        {tab && <Tabs current={tab} onTabChange={handleChangeTab} tabs={tabsData} />}
         <div className="flex flex-col gap-2 rounded-2xl bg-white p-6">
           <div className="w-2/5">
             <div className="flex gap-3">
@@ -45,170 +39,7 @@ export const People = () => {
               />
             </div>
           </div>
-
-          {/* TODO: separate component*/}
-          <div className="flow-root">
-            <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-              <div className="inline-block w-full py-2 align-middle sm:px-6 lg:px-8">
-                <table className="min-w-full divide-y divide-navy-200 border-b border-navy-200">
-                  <thead className="text-left uppercase text-navy-500">
-                    <tr>
-                      <th scope="col" className="py-3.5 pl-4 pr-3 text-xs font-medium sm:pl-4">
-                        Employee
-                      </th>
-                      <th scope="col" className="px-3 py-5 text-xs font-medium">
-                        Ladder
-                      </th>
-                      <th scope="col" className="w-[160px] px-3 py-5 text-right text-xs font-medium">
-                        Current Band
-                      </th>
-                      <th scope="col" className="w-[160px] px-3 py-5 text-right text-xs font-medium">
-                        Active Goal
-                      </th>
-                      <th scope="col" className="w-[248px] px-3 py-5 text-center text-xs font-medium">
-                        Goal Progress
-                      </th>
-                      <th scope="col" className="w-[160px] px-3 py-5 text-center text-xs font-medium">
-                        Latest Activity
-                      </th>
-                      <th scope="col" className="relative px-4 py-3.5 sm:pr-0">
-                        <span className="sr-only">Edit</span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody className="divide-y divide-navy-200 bg-white">
-                    {filteredPeople?.map((person) => (
-                      <tr key={person.id}>
-                        <td className="flex whitespace-nowrap py-5 pl-4 pr-3 text-sm sm:pl-0">
-                          <div className="flex items-center">
-                            <div className="h-8 w-8">
-                              <Image
-                                width={200}
-                                height={200}
-                                alt="User image"
-                                src="/images/avatar_placeholder.jpeg"
-                                className="h-8 w-8 rounded-full object-cover"
-                              />
-                            </div>
-                            <div className="ml-4">
-                              <Typography variant="body-s/medium">{person.name}</Typography>
-                              <Typography variant="body-s/regular" className="text-navy-600">
-                                {person.title}
-                              </Typography>
-                            </div>
-                          </div>
-                        </td>
-                        <td className="text-gray-500 whitespace-nowrap px-3 py-5 text-sm">
-                          <div className="flex flex-col gap-y-4">
-                            {person?.laddersDetails?.map((ladder) => (
-                              <Typography key={ladder.ladderName} variant="body-s/regular" className="text-navy-700">
-                                {ladder.ladderName}
-                              </Typography>
-                            ))}
-                          </div>
-                        </td>
-                        <td className="text-gray-500 whitespace-nowrap px-3 py-5 text-sm">
-                          <div className="flex flex-col items-end gap-y-4">
-                            {person?.laddersDetails?.map((ladder) => (
-                              <Typography key={ladder.ladderName} variant="body-s/regular" className="text-navy-700">
-                                {ladder?.currentBand}
-                              </Typography>
-                            ))}
-                          </div>
-                        </td>
-                        <td className="text-gray-500 whitespace-nowrap px-3 py-5 text-sm">
-                          <div className="flex flex-col items-end gap-y-4">
-                            {person?.laddersDetails?.map((ladder) => (
-                              <div key={ladder.ladderName} className="mr-2 h-4 w-4 text-navy-700">
-                                {ladder?.activeGoal && (
-                                  <CheckMarkIcon className="text-green-600" width={20} height={20} />
-                                )}
-                              </div>
-                            ))}
-                          </div>
-                        </td>
-                        <td className="text-gray-500 whitespace-nowrap px-10 py-5 text-sm">
-                          <div className="flex flex-col gap-y-4">
-                            {person?.laddersDetails?.map((ladder) => (
-                              <div key={ladder.ladderName} className="flex h-4 items-center text-navy-700">
-                                {ladder.activeGoal && (
-                                  <>
-                                    <div className="mr-3 w-full rounded-full bg-navy-300">
-                                      <div
-                                        className="h-2 rounded-full bg-blue-800"
-                                        style={{ width: `${ladder.goalProgress}%` }}
-                                      />
-                                    </div>
-                                    <Typography variant="body-s/medium" className="text-navy-600">
-                                      {ladder.goalProgress}%
-                                    </Typography>
-                                  </>
-                                )}
-                              </div>
-                            ))}
-                          </div>
-                        </td>
-                        <td className="text-gray-500 flex flex-col items-center whitespace-nowrap px-3 py-8 text-sm">
-                          {person?.laddersDetails?.map((details) => (
-                            <div
-                              key={details.ladderName}
-                              className="flex h-8 w-8 items-center justify-center text-navy-700"
-                            >
-                              {details.activeGoal && (
-                                <div className="flex h-7 w-7 items-center justify-center rounded-full bg-blue-800">
-                                  <Typography variant="body-s/semibold" className="text-white">
-                                    {details.latestActivity}
-                                  </Typography>
-                                </div>
-                              )}
-                            </div>
-                          ))}
-                        </td>
-                        <td className="relative whitespace-nowrap py-5 text-sm font-medium">
-                          {/* TODO: Create new component Dropdown Menu */}
-                          <Menu as="div" className="relative">
-                            <MenuButton>
-                              <span className="sr-only">Open user menu</span>
-                              <DotVerticalIcon />
-                            </MenuButton>
-                            <Transition
-                              as={Fragment}
-                              enter="transition ease-out duration-100"
-                              enterFrom="transform opacity-0 scale-95"
-                              enterTo="transform opacity-100 scale-100"
-                              leave="transition ease-in duration-75"
-                              leaveFrom="transform opacity-100 scale-100"
-                              leaveTo="transform opacity-0 scale-95"
-                            >
-                              <MenuItems className="absolute right-0 z-10 mt-2 w-48 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1">
-                                {employeeMenuOptions.map(({ href, label }) => (
-                                  <MenuItem key={label}>
-                                    <Link
-                                      href={href}
-                                      className="flex items-center gap-3 px-4 py-2 text-sm text-navy-700 hover:bg-navy-100"
-                                    >
-                                      <span>{label}</span>
-                                    </Link>
-                                  </MenuItem>
-                                ))}
-                              </MenuItems>
-                            </Transition>
-                          </Menu>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            </div>
-          </div>
-
-          {/* <Pagination
-            itemsAmount={peopleTypeAmount}
-            setPageNumber={(e, number) => pageClickHandler(e, number)}
-            pageNumber={page}
-            pagePosition={pagePosition}
-          /> */}
+          <PeopleTable people={filteredPeople} />
         </div>
       </div>
     </FormProvider>
diff --git a/frontend/src/components/pages/People/People.utils.ts b/frontend/src/components/pages/People/People.utils.ts
index fed589d4..abc68cb8 100644
--- a/frontend/src/components/pages/People/People.utils.ts
+++ b/frontend/src/components/pages/People/People.utils.ts
@@ -1,4 +1,4 @@
-import { StatusType } from '@app/types/people';
+import { PeopleStatus } from './People.interface';
 
 export const PEOPLE_DETAILS = {
   total: 100,
@@ -18,7 +18,7 @@ export const PEOPLE_DETAILS = {
           latestActivity: 5,
         },
       ],
-      status: StatusType.active,
+      status: PeopleStatus.active,
     },
     {
       id: 42624,
@@ -47,7 +47,7 @@ export const PEOPLE_DETAILS = {
           latestActivity: 1,
         },
       ],
-      status: StatusType.active,
+      status: PeopleStatus.active,
     },
     {
       id: 9933,
@@ -62,7 +62,7 @@ export const PEOPLE_DETAILS = {
           latestActivity: 3,
         },
       ],
-      status: StatusType.active,
+      status: PeopleStatus.active,
     },
     {
       id: 493683,
@@ -77,7 +77,7 @@ export const PEOPLE_DETAILS = {
           latestActivity: 2,
         },
       ],
-      status: StatusType.active,
+      status: PeopleStatus.active,
     },
     {
       id: 422433,
@@ -92,7 +92,7 @@ export const PEOPLE_DETAILS = {
           latestActivity: 3,
         },
       ],
-      status: StatusType.deactivated,
+      status: PeopleStatus.deactivated,
     },
     {
       id: 4893,
@@ -107,7 +107,7 @@ export const PEOPLE_DETAILS = {
           latestActivity: 3,
         },
       ],
-      status: StatusType.deactivated,
+      status: PeopleStatus.deactivated,
     },
     {
       id: 42673,
@@ -122,7 +122,7 @@ export const PEOPLE_DETAILS = {
           latestActivity: 2,
         },
       ],
-      status: StatusType.deactivated,
+      status: PeopleStatus.deactivated,
     },
     {
       id: 4773,
@@ -137,7 +137,7 @@ export const PEOPLE_DETAILS = {
           latestActivity: 2,
         },
       ],
-      status: StatusType.draft,
+      status: PeopleStatus.draft,
     },
     {
       id: 33,
@@ -152,7 +152,7 @@ export const PEOPLE_DETAILS = {
           latestActivity: 4,
         },
       ],
-      status: StatusType.draft,
+      status: PeopleStatus.draft,
     },
     {
       id: 433,
@@ -167,7 +167,7 @@ export const PEOPLE_DETAILS = {
           latestActivity: 2,
         },
       ],
-      status: StatusType.draft,
+      status: PeopleStatus.draft,
     },
     {
       id: 42243,
@@ -182,7 +182,7 @@ export const PEOPLE_DETAILS = {
           latestActivity: 2,
         },
       ],
-      status: StatusType.draft,
+      status: PeopleStatus.draft,
     },
   ],
   active: 11,
diff --git a/frontend/src/components/pages/People/index.ts b/frontend/src/components/pages/People/index.ts
index 5be87e03..f006a41b 100644
--- a/frontend/src/components/pages/People/index.ts
+++ b/frontend/src/components/pages/People/index.ts
@@ -1 +1,2 @@
 export { People } from './People';
+export type { PeopleStatus } from './People.interface';
diff --git a/frontend/src/hooks/useQueryParams.ts b/frontend/src/hooks/useQueryParams.ts
index 5d1ff12b..e9d5682e 100644
--- a/frontend/src/hooks/useQueryParams.ts
+++ b/frontend/src/hooks/useQueryParams.ts
@@ -1,39 +1,34 @@
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback } from 'react';
 
 interface IQueryParams {
   [key: string]: string | undefined | null;
 }
 
-export const useQueryParams = (
-  defaultParams: IQueryParams,
-): [params: IQueryParams, setParams: (newParams: IQueryParams) => void] => {
+export const useQueryParams = () => {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
-  const [params, setParams] = useState(defaultParams);
+  const setParams = useCallback(
+    (params: IQueryParams) => {
+      const currentParams = new URLSearchParams(searchParams.toString());
 
-  const replaceParams = useCallback(() => {
-    const currentParams = new URLSearchParams(searchParams.toString());
+      Object.keys(params).forEach((key) => {
+        const value = params[key];
 
-    Object.keys(params).forEach((key) => {
-      const value = params[key];
+        if (value === undefined || value === null) {
+          currentParams.delete(key);
+        } else {
+          currentParams.set(key, value);
+        }
+      });
 
-      if (value === undefined || value === null) {
-        currentParams.delete(key);
-      } else {
-        currentParams.set(key, value);
-      }
-    });
+      const newUrl = `${pathname}?${currentParams.toString()}`;
+      router.replace(newUrl);
+    },
+    [pathname, router, searchParams],
+  );
 
-    const newUrl = `${pathname}?${currentParams.toString()}`;
-    router.replace(newUrl);
-  }, [params, searchParams, router, pathname]);
-
-  useEffect(() => {
-    replaceParams();
-  }, [replaceParams]);
-
-  return [params, setParams];
+  return { setParams };
 };
diff --git a/frontend/src/types/people.ts b/frontend/src/types/people.ts
index 301b13e6..ff3fd186 100644
--- a/frontend/src/types/people.ts
+++ b/frontend/src/types/people.ts
@@ -1,35 +1,3 @@
-export const StatusType = {
-  active: 'active',
-  draft: 'draft',
-  deactivated: 'deactivated',
-} as const;
-
-export interface PeopleDetails {
-  total: number;
-  page: number;
-  count: number;
-  results: Employee[];
-  active: number;
-  draft: number;
-  deactivated: number;
-}
-
-export interface Employee {
-  id: number;
-  name: string;
-  title: string;
-  laddersDetails: LadderDetails[];
-  status: keyof typeof StatusType;
-}
-
-export interface LadderDetails {
-  ladderName: string;
-  currentBand: number;
-  activeGoal: boolean;
-  goalProgress: number;
-  latestActivity: number;
-}
-
 export interface User {
   photo?: string;
   firstName: string;