feat(teams): add tab routing to people page

src/app/(dashboard)/people/page.tsx

@@ -13,21 +13,36 @@ import {
   type PersonDepartmentCopy,
   type PersonFallbackCopy,
 } from "./_components/person.copy"
+import TeamsTab from "./_components/teams.tab"
 import {
   formatUserRole,
   type UserFallbackCopy,
   type UserRoleCopy,
 } from "./_components/user.copy"
 
+const VALID_TABS = ["people", "teams"] as const
+
+type Tab = (typeof VALID_TABS)[number]
+
+function resolveTab(raw: string | undefined): Tab {
+  if (raw && VALID_TABS.includes(raw as Tab)) {
+    return raw as Tab
+  }
+
+  return "people"
+}
+
 export default async function PeoplePage(props: {
   searchParams?: Promise<{
     page?: string
     search?: string
+    tab?: string
   }>
 }) {
   const searchParams = await props.searchParams
   const currentPage = searchParams?.page ? parseInt(searchParams.page, 10) : 1
   const search = searchParams?.search || ""
+  const activeTab = resolveTab(searchParams?.tab)
   const { data: people, totalPages } = await PersonService.findAllPaginated({
     page: currentPage,
     pageSize: 10,
@@ -35,6 +50,7 @@ export default async function PeoplePage(props: {
   })
   const { dictionary } = await getI18n()
   const copy = dictionary.inventory.people
+  const teamCopy = dictionary.inventory.teams
   const userCopy = dictionary.admin.users
   const userStatusCopy = userCopy.status
   const userRoleLabels = userCopy.roles as UserRoleCopy
@@ -42,7 +58,7 @@ export default async function PeoplePage(props: {
   const departmentCopy = copy.departments as PersonDepartmentCopy
   const personFallbackCopy = copy.fallback as PersonFallbackCopy
 
-  return (
+  const peopleList = (
     <div className="flex flex-col gap-4">
       <PageHeader
         title={copy.list.title}
@@ -160,4 +176,33 @@ export default async function PeoplePage(props: {
       )}
     </div>
   )
+
+  return (
+    <div className="flex flex-col gap-4">
+      <nav aria-label="People sections">
+        <ul className="flex gap-4 border-b">
+          <li>
+            <Link
+              href="/people?tab=people"
+              aria-current={activeTab === "people" ? "page" : undefined}
+              className={`inline-block px-4 py-2 ${activeTab === "people" ? "border-b-2 border-primary font-semibold" : ""}`}
+            >
+              {copy.list.title}
+            </Link>
+          </li>
+          <li>
+            <Link
+              href="/people?tab=teams"
+              aria-current={activeTab === "teams" ? "page" : undefined}
+              className={`inline-block px-4 py-2 ${activeTab === "teams" ? "border-b-2 border-primary font-semibold" : ""}`}
+            >
+              {teamCopy.list.title}
+            </Link>
+          </li>
+        </ul>
+      </nav>
+      {activeTab === "teams" && <TeamsTab />}
+      {activeTab === "people" && peopleList}
+    </div>
+  )
 }

tests/unit/app/people/person-pages.test.ts

@@ -44,6 +44,10 @@ vi.mock("@/components/common/pagination", () => ({
     createElement("nav", { "aria-label": "Pagination" }, totalPages),
 }))
 
+vi.mock("@/app/(dashboard)/people/_components/teams.tab", () => ({
+  default: () => null,
+}))
+
 describe("person pages", () => {
   beforeEach(() => {
     vi.clearAllMocks()