feat: add logo field to settings schema and update settings client to handle file uploads

feat: integrate dialog close context in vendor select field and CRUD dialog components

feat: enhance vendor general info to format status using utility function

feat: implement form dialog context for managing dialog close actions

feat: add async select field dialog close context for better form handling

fix: update form mutation hook to close dialog on successful submission

feat: extend document print types to include expense and credit note

feat: add settings update payload type to include logo and other fields

feat: create employee attendance and work history pages with resource management

feat: implement payment made and received detail pages with actions

feat: add quick shortcuts component for easy navigation in the dashboard

feat: create actions for payment made and received with print and delete options

feat: implement dialog close context for better dialog management

feat: add error parsing utility for improved error handling in API responses

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

@@ -0,0 +1,100 @@
+"use client"
+
+import { use } from "react"
+import { ResourcePage } from "@/shared/data-view/resource-page"
+import { ColumnHeader } from "@/shared/data-view/table-view"
+import { Badge } from "@/shared/components/ui/badge"
+import { TIME_SHEET_ROUTES } from "@garage/api"
+import type { TimeSheetsClient } from "@garage/api"
+import { ClockIcon } from "lucide-react"
+
+const ACTIVITY_VARIANT: Record<string, "default" | "secondary" | "outline"> = {
+    general: "secondary",
+    order: "default",
+    task: "outline",
+}
+
+function formatTime(value: unknown) {
+    if (!value || typeof value !== "string") return "—"
+    return value.length >= 5 ? value.slice(0, 5) : value
+}
+
+function formatDate(value: unknown) {
+    if (!value || typeof value !== "string") return "—"
+    const d = new Date(value)
+    return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString()
+}
+
+function formatCost(value: unknown) {
+    if (value === null || value === undefined) return "—"
+    const n = Number(value)
+    if (!Number.isFinite(n)) return "—"
+    return n.toFixed(2)
+}
+
+export default function EmployeeAttendancePage({ params }: { params: Promise<{ id: string }> }) {
+    const { id: employeeId } = use(params)
+
+    return (
+        <ResourcePage<TimeSheetsClient>
+            pageTitle="Attendance"
+            routeKey={TIME_SHEET_ROUTES.INDEX}
+            getClient={(api) => api.timeSheets}
+            extraParams={{ employee_id: employeeId }}
+            header={null}
+            statusFilter={{
+                statuses: ["general", "order", "task"],
+                paramKey: "activity_type",
+                allLabel: "All",
+            }}
+            columns={() => [
+                {
+                    accessorKey: "date",
+                    header: ({ column }) => <ColumnHeader column={column} title="Date" />,
+                    cell: ({ row }) => (
+                        <div className="flex items-center gap-2">
+                            <ClockIcon className="size-4 text-muted-foreground" />
+                            <span>{formatDate((row.original as any).date)}</span>
+                        </div>
+                    ),
+                },
+                {
+                    accessorKey: "clock_in",
+                    header: ({ column }) => <ColumnHeader column={column} title="Clock In" />,
+                    cell: ({ row }) => <span className="font-mono text-xs">{formatTime((row.original as any).clock_in)}</span>,
+                },
+                {
+                    accessorKey: "clock_out",
+                    header: ({ column }) => <ColumnHeader column={column} title="Clock Out" />,
+                    cell: ({ row }) => <span className="font-mono text-xs">{formatTime((row.original as any).clock_out)}</span>,
+                },
+                {
+                    accessorKey: "duration",
+                    header: ({ column }) => <ColumnHeader column={column} title="Duration" />,
+                    cell: ({ row }) => <span className="font-mono text-xs">{formatTime((row.original as any).duration)}</span>,
+                },
+                {
+                    accessorKey: "activity_type",
+                    header: ({ column }) => <ColumnHeader column={column} title="Activity" />,
+                    cell: ({ row }) => {
+                        const type = (row.original as any).activity_type ?? "general"
+                        return <Badge variant={ACTIVITY_VARIANT[type] ?? "secondary"}>{type}</Badge>
+                    },
+                },
+                {
+                    accessorKey: "calculated_total_cost",
+                    header: ({ column }) => <ColumnHeader column={column} title="Cost" />,
+                    cell: ({ row }) => formatCost((row.original as any).calculated_total_cost),
+                },
+                {
+                    accessorKey: "note",
+                    header: ({ column }) => <ColumnHeader column={column} title="Note" />,
+                    cell: ({ row }) => {
+                        const v = (row.original as any).note
+                        return v ? <span className="text-sm">{v}</span> : "—"
+                    },
+                },
+            ]}
+        />
+    )
+}

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

@@ -28,6 +28,8 @@ export default async function layout(props: {
                     actions={<EmployeeActions employeeId={id} />}
                     tabs={[
                         { href: `/productivity/employees/${id}`, label: 'Details' },
+                        { href: `/productivity/employees/${id}/attendance`, label: 'Attendance' },
+                        { href: `/productivity/employees/${id}/work-history`, label: 'Work History' },
                         { href: `/productivity/employees/${id}/permissions`, label: 'Permissions' },
                     ]}
                 >

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

@@ -0,0 +1,110 @@
+"use client"
+
+import { use, useState } from "react"
+import { ResourcePage } from "@/shared/data-view/resource-page"
+import { ColumnHeader } from "@/shared/data-view/table-view"
+import { Badge } from "@/shared/components/ui/badge"
+import { Tabs, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
+import { JOB_CARD_ROUTES } from "@garage/api"
+import type { JobCardsClient } from "@garage/api"
+import { useRouter } from "next/navigation"
+import { WrenchIcon } from "lucide-react"
+import { formatEnum } from "@/shared/utils/formatters"
+
+const ROLE_PARAM = {
+    technician: "primary_technician_id",
+    sales: "sales_person_id",
+    writer: "service_writer_id",
+} as const
+
+type RoleKey = keyof typeof ROLE_PARAM
+
+function formatDate(value: unknown) {
+    if (!value || typeof value !== "string") return "—"
+    const d = new Date(value)
+    return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString()
+}
+
+function statusVariant(status: string | undefined): "default" | "secondary" | "outline" | "destructive" {
+    if (!status) return "secondary"
+    if (status === "completed" || status === "delivered") return "default"
+    if (status === "cancelled") return "destructive"
+    return "outline"
+}
+
+export default function EmployeeWorkHistoryPage({ params }: { params: Promise<{ id: string }> }) {
+    const { id: employeeId } = use(params)
+    const router = useRouter()
+    const [role, setRole] = useState<RoleKey>("technician")
+    const paramKey = ROLE_PARAM[role]
+
+    return (
+        <div className="space-y-3">
+            <div className="px-4 pt-4">
+                <Tabs value={role} onValueChange={(v) => setRole(v as RoleKey)}>
+                    <TabsList variant="line">
+                        <TabsTrigger value="technician">As Technician</TabsTrigger>
+                        <TabsTrigger value="sales">As Sales Person</TabsTrigger>
+                        <TabsTrigger value="writer">As Service Writer</TabsTrigger>
+                    </TabsList>
+                </Tabs>
+            </div>
+
+            <ResourcePage<JobCardsClient>
+                key={role}
+                pageTitle="Work History"
+                routeKey={JOB_CARD_ROUTES.INDEX}
+                searchable
+                searchPlaceholder="Search by job number, plate, customer..."
+                getClient={(api) => api.jobCards}
+                extraParams={{ [paramKey]: employeeId }}
+                header={null}
+                onRowClick={(row) => router.push(`/sales/job-cards/${(row as any).id}`)}
+                columns={() => [
+                    {
+                        accessorKey: "order_number",
+                        header: ({ column }) => <ColumnHeader column={column} title="Job #" />,
+                        cell: ({ row }) => (
+                            <div className="flex items-center gap-2">
+                                <WrenchIcon className="size-4 text-muted-foreground" />
+                                <span className="font-mono text-xs">{(row.original as any).order_number ?? "—"}</span>
+                            </div>
+                        ),
+                    },
+                    {
+                        accessorKey: "customer",
+                        header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
+                        cell: ({ row }) => {
+                            const c = (row.original as any).customer
+                            if (!c) return "—"
+                            return `${c.first_name ?? ""} ${c.last_name ?? ""}`.trim() || c.email || "—"
+                        },
+                    },
+                    {
+                        accessorKey: "vehicle",
+                        header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
+                        cell: ({ row }) => {
+                            const v = (row.original as any).vehicle
+                            if (!v) return "—"
+                            const display = `${v.make ?? ""} ${v.model ?? ""}`.trim()
+                            return display || v.license_plate || "—"
+                        },
+                    },
+                    {
+                        accessorKey: "status",
+                        header: ({ column }) => <ColumnHeader column={column} title="Status" />,
+                        cell: ({ row }) => {
+                            const s = (row.original as any).status
+                            return s ? <Badge variant={statusVariant(s)}>{formatEnum(s)}</Badge> : "—"
+                        },
+                    },
+                    {
+                        accessorKey: "created_at",
+                        header: ({ column }) => <ColumnHeader column={column} title="Opened" />,
+                        cell: ({ row }) => formatDate((row.original as any).created_at),
+                    },
+                ]}
+            />
+        </div>
+    )
+}

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

@@ -1,15 +1,45 @@
 "use client"
 
+import { useMemo, useState } from "react"
 import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
 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 { Avatar, AvatarFallback } from "@/shared/components/ui/avatar"
+import { Badge } from "@/shared/components/ui/badge"
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/shared/components/ui/select"
 import { useRouter } from "next/navigation"
+import { formatEnum } from "@/shared/utils/formatters"
+
+const TYPE_OPTIONS = [
+    { value: "all", label: "All types" },
+    { value: "employee", label: "Employee" },
+    { value: "sales_person", label: "Sales Person" },
+]
+
+function initialsOf(first?: string | null, last?: string | null) {
+    const f = (first ?? "").trim()[0] ?? ""
+    const l = (last ?? "").trim()[0] ?? ""
+    return (f + l).toUpperCase() || "?"
+}
 
 export default function EmployeesPage() {
     const router = useRouter()
+    const [typeFilter, setTypeFilter] = useState<string>("all")
+
+    const extraParams = useMemo(() => {
+        if (typeFilter === "all") return undefined
+        return { type: typeFilter }
+    }, [typeFilter])
+
     return (
         <ResourcePage<EmployeesClient>
             pageTitle="Employees"
@@ -17,8 +47,25 @@ export default function EmployeesPage() {
             searchable
             searchPlaceholder="Search employees..."
             statusFilter={{ statuses: ["active", "inactive"] }}
+            extraParams={extraParams}
             getClient={(api) => api.employees}
             onRowClick={(row) => router.push(`/productivity/employees/${(row as any).id}`)}
+            tableHeader={() => (
+                <div className="flex items-center gap-2">
+                    <Select value={typeFilter} onValueChange={setTypeFilter}>
+                        <SelectTrigger className="w-44">
+                            <SelectValue placeholder="All types" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {TYPE_OPTIONS.map((o) => (
+                                <SelectItem key={o.value} value={o.value}>
+                                    {o.label}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+            )}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
                     <FormDialog title="Employee">
@@ -37,8 +84,16 @@ export default function EmployeesPage() {
                     accessorKey: "first_name",
                     header: ({ column }) => <ColumnHeader column={column} title="Name" />,
                     cell: ({ row }) => {
-                        const { first_name, last_name } = row.original
-                        return `${first_name ?? ""} ${last_name ?? ""}`.trim()
+                        const r = row.original as any
+                        const fullName = `${r.first_name ?? ""} ${r.last_name ?? ""}`.trim() || "—"
+                        return (
+                            <div className="flex items-center gap-2">
+                                <Avatar size="sm">
+                                    <AvatarFallback>{initialsOf(r.first_name, r.last_name)}</AvatarFallback>
+                                </Avatar>
+                                <span className="font-medium">{fullName}</span>
+                            </div>
+                        )
                     },
                 },
                 {
@@ -48,15 +103,32 @@ export default function EmployeesPage() {
                 {
                     accessorKey: "phone",
                     header: ({ column }) => <ColumnHeader column={column} title="Phone" />,
+                    cell: ({ row }) => (row.original as any).phone ?? "—",
                 },
                 {
-                    accessorKey: "position",
-                    header: ({ column }) => <ColumnHeader column={column} title="Position" />,
+                    accessorKey: "type",
+                    header: ({ column }) => <ColumnHeader column={column} title="Type" />,
+                    cell: ({ row }) => {
+                        const t = (row.original as any).type
+                        if (!t) return "—"
+                        return <Badge variant="outline">{t === "sales_person" ? "Sales Person" : "Employee"}</Badge>
+                    },
                 },
                 {
                     accessorKey: "department",
                     header: ({ column }) => <ColumnHeader column={column} title="Department" />,
-                    cell: ({ row }) => (row.original as any).department?.name ?? "—",
+                    cell: ({ row }) => {
+                        const d = (row.original as any).department?.name
+                        return d ? <Badge variant="secondary">{d}</Badge> : "—"
+                    },
+                },
+                {
+                    accessorKey: "role",
+                    header: ({ column }) => <ColumnHeader column={column} title="Role" />,
+                    cell: ({ row }) => {
+                        const r = (row.original as any).role?.name
+                        return r ? <Badge variant="secondary">{r}</Badge> : "—"
+                    },
                 },
                 {
                     accessorKey: "status",
@@ -65,7 +137,7 @@ export default function EmployeesPage() {
                         const status = row.original.status
                         return (
                             <span className={status === "active" ? "text-green-600" : "text-red-600"}>
-                                {status}
+                                {formatEnum(status)}
                             </span>
                         )
                     },