updates

apps/dashboard/app/(authenticated)/productivity/employees/[id]/layout.tsx

@@ -0,0 +1,39 @@
+import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
+import { getServerApi } from '@garage/api/server'
+import { EmployeeActions } from '@/modules/employees/employee-actions'
+import { EmployeeProvider } from '@/modules/employees/employee-context'
+import React from 'react'
+
+export default async function layout(props: {
+    params: Promise<{ id: string }>
+    children: React.ReactNode
+}) {
+    const { id } = await props.params
+    const api = await getServerApi()
+    const employee = await api.employees.getById(id)
+
+    const firstName = employee.data?.first_name || ''
+    const lastName = employee.data?.last_name || ''
+    const title = [firstName, lastName].filter(Boolean).join(' ') || 'Employee Details'
+    const employeeLabel = title
+
+    return (
+        <>
+            <EmployeeProvider employee={{ id, label: employeeLabel }}>
+                <DashboardDetailsPage
+                    className="p-0 lg:p-0"
+                    title={title}
+                    description={employee.data?.position || employee.data?.designation || undefined}
+                    backHref="/productivity/employees"
+                    actions={<EmployeeActions employeeId={id} />}
+                    tabs={[
+                        { href: `/productivity/employees/${id}`, label: 'Details' },
+                        { href: `/productivity/employees/${id}/permissions`, label: 'Permissions' },
+                    ]}
+                >
+                    {props.children}
+                </DashboardDetailsPage>
+            </EmployeeProvider>
+        </>
+    )
+}

apps/dashboard/app/(authenticated)/productivity/employees/[id]/page.tsx

@@ -0,0 +1,19 @@
+import { getServerApi } from '@garage/api/server'
+import { EmployeeGeneralInfo } from '@/modules/employees/employee-general-info'
+import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
+
+export default async function page(props: { params: Promise<{ id: string }> }) {
+    const { id } = await props.params
+    const api = await getServerApi()
+    const employee = await api.employees.getById(id)
+
+    if (!employee.data) {
+        return <div className="text-muted-foreground">Employee not found.</div>
+    }
+
+    return (
+        <DashboardPage header={null}>
+            <EmployeeGeneralInfo employee={employee.data as any} />
+        </DashboardPage>
+    )
+}

apps/dashboard/app/(authenticated)/productivity/employees/[id]/permissions/page.tsx

@@ -0,0 +1,10 @@
+"use client"
+
+import { use } from "react"
+import { EmployeePermissionsForm } from "@/modules/employees/employee-permissions-form"
+
+export default function EmployeePermissionsPage({ params }: { params: Promise<{ id: string }> }) {
+    const { id } = use(params)
+
+    return <EmployeePermissionsForm employeeId={id} />
+}

apps/dashboard/app/(authenticated)/productivity/employees/page.tsx

@@ -6,13 +6,16 @@ import FormDialog from "@/shared/components/form-dialog"
 import { EmployeeForm } from "@/modules/employees/employee-form"
 import { EMPLOYEE_ROUTES } from "@garage/api"
 import type { EmployeesClient } from "@garage/api"
+import { useRouter } from "next/navigation"
 
 export default function EmployeesPage() {
+    const router = useRouter()
     return (
         <ResourcePage<EmployeesClient>
             pageTitle="Employees"
             routeKey={EMPLOYEE_ROUTES.INDEX}
             getClient={(api) => api.employees}
+            onRowClick={(row) => router.push(`/productivity/employees/${(row as any).id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
                     <FormDialog title="Employee">