Merge pull request #1321 from Dhanus3133/fix/ui-people-tab

fix(ui): Align Employee breadcrumb and highlight People tab

Author: Marfuen

apps/app/src/app/(app)/[orgId]/people/[employeeId]/layout.tsx

@@ -1,50 +1,11 @@
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@comp/ui/breadcrumb';
-import { db } from '@db';
-
-export default async function Layout({
-  children,
-  params,
-}: {
+interface LayoutProps {
   children: React.ReactNode;
-  params: Promise<{ employeeId: string; orgId: string }>;
-}) {
-  const { employeeId, orgId } = await params;
-  const member = await db.member.findUnique({
-    where: {
-      id: employeeId,
-    },
-    select: {
-      user: {
-        select: {
-          name: true,
-        },
-      },
-    },
-  });
+}
 
+export default async function Layout({ children }: LayoutProps) {
   return (
-    <div className="m-auto flex max-w-[1200px] flex-col gap-4">
-      {member?.user?.name && (
-        <Breadcrumb>
-          <BreadcrumbList>
-            <BreadcrumbItem>
-              <BreadcrumbLink href={`/${orgId}/people`}>{'People'}</BreadcrumbLink>
-            </BreadcrumbItem>
-            <BreadcrumbSeparator />
-            <BreadcrumbItem>
-              <BreadcrumbPage>{member.user.name}</BreadcrumbPage>
-            </BreadcrumbItem>
-          </BreadcrumbList>
-        </Breadcrumb>
-      )}
-      {children}
+    <div className="m-auto flex max-w-[1200px] flex-col">
+      <div>{children}</div>
     </div>
   );
 }

apps/app/src/app/(app)/[orgId]/people/[employeeId]/page.tsx

@@ -1,5 +1,6 @@
 import { auth } from '@/utils/auth';
 
+import PageWithBreadcrumb from '@/components/pages/PageWithBreadcrumb';
 import {
   type TrainingVideo,
   trainingVideos as trainingVideosData,
@@ -15,9 +16,9 @@ import { Employee } from './components/Employee';
 export default async function EmployeeDetailsPage({
   params,
 }: {
-  params: Promise<{ employeeId: string }>;
+  params: Promise<{ employeeId: string; orgId: string }>;
 }) {
-  const { employeeId } = await params;
+  const { employeeId, orgId } = await params;
 
   const session = await auth.api.getSession({
     headers: await headers(),
@@ -50,14 +51,21 @@ export default async function EmployeeDetailsPage({
   const { fleetPolicies, device } = await getFleetPolicies(employee);
 
   return (
-    <Employee
-      employee={employee}
-      policies={policies}
-      trainingVideos={employeeTrainingVideos}
-      fleetPolicies={fleetPolicies}
-      host={device}
-      canEdit={canEditMembers}
-    />
+    <PageWithBreadcrumb
+      breadcrumbs={[
+        { label: 'People', href: `/${orgId}/people/all` },
+        { label: employee.user.name, current: true },
+      ]}
+    >
+      <Employee
+        employee={employee}
+        policies={policies}
+        trainingVideos={employeeTrainingVideos}
+        fleetPolicies={fleetPolicies}
+        host={device}
+        canEdit={canEditMembers}
+      />
+    </PageWithBreadcrumb>
   );
 }
 

apps/app/src/app/(app)/[orgId]/people/layout.tsx

@@ -33,6 +33,7 @@ export default async function Layout({ children }: { children: React.ReactNode }
           {
             path: `/${orgId}/people/all`,
             label: 'People',
+            activeOverrideIdPrefix: 'mem_',
           },
           ...(employees.length > 0
             ? [