updates

.github/skills/resource-details-page/SKILL.md

@@ -0,0 +1,583 @@
+---
+name: resource-details-page
+description: "Create resource details pages with tabbed layouts, context providers, and sub-pages for the carage-erp dashboard. Use when: building a details/show page for a resource, adding tabs to a resource detail view, creating a nested [id] layout, scaffolding sub-pages (owners, documents, estimates), implementing resource context providers, or adding actions menus to detail headers."
+---
+
+# Resource Details Page
+
+Create fully structured resource details pages with tabbed navigation, shared context, and reusable sub-page patterns. This skill covers: layout → context provider → general-info component → actions component → tab sub-pages.
+
+## When to Use
+
+- User asks to create a details/show page for a resource (e.g. "create a customer details page")
+- User asks to add tabs to a resource (e.g. "add an invoices tab to the vehicle page")
+- User asks to scaffold a `[id]` layout with nested pages
+- User wants sub-pages that share parent resource data (e.g. vehicle → estimates)
+- User wants an actions dropdown (edit/delete) on a resource header
+
+## Reference Implementation
+
+The canonical implementation is the **vehicle details page** at:
+```
+app/(authenticated)/sales/vehicles/[id]/
+├── layout.tsx          ← Server component: fetches resource, renders DashboardDetailsPage
+├── page.tsx            ← Details tab: server component, read-only info display
+├── owners/page.tsx     ← Sub-tab: client component, manual DataTable
+├── documents/page.tsx  ← Sub-tab: client component, manual DataTable + upload
+├── estimates/page.tsx  ← Sub-tab: client component, ResourcePage with extraParams
+```
+
+Module files at:
+```
+modules/vehicles/
+├── vehicle.schema.ts
+├── vehicle-form.tsx
+├── vehicle-general-info.tsx   ← Read-only info cards for Details tab
+├── vehicle-actions.tsx         ← Dropdown menu (Edit/Delete)
+├── vehicle-context.tsx         ← React context for sharing resource data to sub-pages
+└── vehicle-document-form.tsx   ← Document-specific form (optional)
+```
+
+## Procedure
+
+### Step 1: Create the Resource Context
+
+Create `modules/<resource>/<resource>-context.tsx`:
+
+This context allows child tab pages to access the parent resource's identity (id + display label) without re-fetching. This is essential for sub-pages that create related records (e.g. creating an estimate pre-populated with the parent vehicle).
+
+```tsx
+"use client"
+
+import { createContext, useContext } from "react"
+
+type <Resource>ContextValue = {
+    id: string
+    label: string
+}
+
+const <Resource>Context = createContext<<Resource>ContextValue | null>(null)
+
+export function <Resource>Provider({
+    <resource>,
+    children,
+}: {
+    <resource>: <Resource>ContextValue
+    children: React.ReactNode
+}) {
+    return (
+        <<Resource>Context.Provider value={<resource>}>
+            {children}
+        </<Resource>Context.Provider>
+    )
+}
+
+export function use<Resource>() {
+    return useContext(<Resource>Context)
+}
+```
+
+**Key rules:**
+- Always a `"use client"` component (context requires client React)
+- Keep the context value minimal — only `id` and `label`
+- `label` is a human-readable display string built from the resource's key fields
+- The hook returns `null` when used outside the provider (no throw — graceful fallback)
+- Do NOT store the full resource object — only identity data needed by sub-pages
+
+### Step 2: Create the Actions Component
+
+Create `modules/<resource>/<resource>-actions.tsx`:
+
+This is a dropdown menu rendered in the `DashboardDetailsPage` header for resource-level actions.
+
+```tsx
+"use client"
+
+import { useAuthApi } from "@/shared/useApi"
+import { useRouter } from "next/navigation"
+import { Button } from "@/shared/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu"
+import { Ellipsis, Pencil, Trash2 } from "lucide-react"
+
+type <Resource>ActionsProps = {
+    <resource>Id: string
+}
+
+export function <Resource>Actions({ <resource>Id }: <Resource>ActionsProps) {
+    const api = useAuthApi()
+    const router = useRouter()
+
+    const handleEdit = () => {
+        router.push(`/<section>/<resources>/${<resource>Id}/edit`)
+    }
+
+    const handleDelete = async () => {
+        await api.<resources>.destroy(<resource>Id)
+        router.push("/<section>/<resources>")
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon">
+                    <Ellipsis className="size-4" />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={handleEdit}>
+                    <Pencil className="size-4" />
+                    Edit
+                </DropdownMenuItem>
+                <DropdownMenuItem variant="destructive" onClick={handleDelete}>
+                    <Trash2 className="size-4" />
+                    Delete
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}
+```
+
+**Key rules:**
+- Always a `"use client"` component
+- Accepts `<resource>Id: string` as the only required prop
+- Uses `useAuthApi()` for API calls, `useRouter()` for navigation
+- `handleDelete` navigates back to the list page after deletion
+- Add confirmation dialog for destructive actions when appropriate
+
+### Step 3: Create the General Info Component
+
+Create `modules/<resource>/<resource>-general-info.tsx`:
+
+A read-only display component for the **Details tab** (the default `page.tsx`). Uses Card-based layout with icon-labeled fields.
+
+```tsx
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import { Badge } from "@/shared/components/ui/badge"
+import { Separator } from "@/shared/components/ui/separator"
+// Import relevant icons from lucide-react
+
+type <Resource>Data = {
+    // Type all fields from the API response
+    id?: number
+    name?: string
+    // ...
+}
+
+type <Resource>GeneralInfoProps = {
+    <resource>: <Resource>Data
+}
+
+function InfoItem({
+    icon: Icon,
+    label,
+    value,
+}: {
+    icon: React.ComponentType<{ className?: string }>
+    label: string
+    value?: string | null
+}) {
+    return (
+        <div className="flex items-start gap-3">
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+                <Icon className="size-4" />
+            </div>
+            <div className="flex flex-col gap-0.5">
+                <span className="text-xs text-muted-foreground">{label}</span>
+                <span className="text-sm font-medium">
+                    {value || <span className="text-muted-foreground">—</span>}
+                </span>
+            </div>
+        </div>
+    )
+}
+
+export function <Resource>GeneralInfo({ <resource> }: <Resource>GeneralInfoProps) {
+    return (
+        <div className="grid gap-6 md:grid-cols-2">
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        {/* Icon */} Section Title
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-4">
+                    <div className="grid gap-4 sm:grid-cols-2">
+                        <InfoItem icon={...} label="Field Name" value={<resource>.field} />
+                        {/* More InfoItems */}
+                    </div>
+                </CardContent>
+            </Card>
+            {/* More Cards for other field groups */}
+        </div>
+    )
+}
+```
+
+**Key rules:**
+- This is a **server component** (no `"use client"`) — it receives data as props
+- Group related fields into separate `Card` sections
+- Use the `InfoItem` helper for consistent icon+label+value layout
+- Show `"—"` dash for missing/null values
+- Use `Badge` for status-like fields, `Separator` between groups
+
+### Step 4: Create the Layout (Server Component)
+
+Create `app/(authenticated)/<section>/<resources>/[id]/layout.tsx`:
+
+This is the **central orchestrator** — it fetches the resource, renders the tabbed shell, and wraps children with the context provider.
+
+```tsx
+import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
+import { getServerApi } from '@garage/api/server'
+import { <Resource>Actions } from '@/modules/<resources>/<resource>-actions'
+import { <Resource>Provider } from '@/modules/<resources>/<resource>-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 <resource> = await api.<resources>.getById(id)
+
+    const title = /* Build display title from resource fields */ ''
+    const <resource>Label = /* Build label for context, e.g. combining key fields */ ''
+
+    return (
+        <>
+            <<Resource>Provider <resource>={{ id, label: <resource>Label || title }}>
+                <DashboardDetailsPage
+                    className="p-0 lg:p-0"
+                    avatarSrc={<resource>.data?.image_url || ""}
+                    title={title}
+                    description={/* subtitle text */}
+                    backHref="/<section>/<resources>"
+                    actions={<<Resource>Actions <resource>Id={id} />}
+                    tabs={[
+                        { href: `/<section>/<resources>/${id}`, label: 'Details' },
+                        { href: `/<section>/<resources>/${id}/<sub-tab>`, label: '<Sub Tab>' },
+                        // More tabs...
+                    ]}
+                >
+                    {props.children}
+                </DashboardDetailsPage>
+            </<Resource>Provider>
+        </>
+    )
+}
+```
+
+**Key rules:**
+- **Server component** (no `"use client"`) — uses `await` for data fetching
+- Params are `Promise<{ id: string }>` in Next.js 15+ (use `await props.params`)
+- Uses `getServerApi()` from `@garage/api/server` for server-side API calls
+- `<Resource>Provider` wraps the entire `DashboardDetailsPage` so all tab children can access context
+- `backHref` points to the resource list page
+- `tabs[0].href` is always the base `/<section>/<resources>/${id}` (Details tab)
+- `className="p-0 lg:p-0"` removes default padding — sub-pages handle their own spacing
+
+**`DashboardDetailsPage` props:**
+
+| Prop | Type | Purpose |
+|---|---|---|
+| `title` | `string` | Primary heading in the header |
+| `description` | `string?` | Subtitle text below the title |
+| `avatarSrc` | `string?` | Avatar image URL |
+| `avatarFallback` | `string?` | Fallback text for avatar (e.g. initials) |
+| `icon` | `ReactNode?` | Icon instead of avatar |
+| `actions` | `ReactNode?` | Action buttons in header (right side) |
+| `backHref` | `string?` | Back navigation URL |
+| `tabs` | `{ href, label }[]?` | Route-based tab navigation |
+| `className` | `string?` | Additional classes for content area |
+| `children` | `ReactNode` | Active tab content (Next.js route children) |
+
+### Step 5: Create the Details Tab (Default Page)
+
+Create `app/(authenticated)/<section>/<resources>/[id]/page.tsx`:
+
+```tsx
+import { getServerApi } from '@garage/api/server'
+import { <Resource>GeneralInfo } from '@/modules/<resources>/<resource>-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 <resource> = await api.<resources>.getById(id)
+
+    if (!<resource>.data) {
+        return <div className="text-muted-foreground"><Resource> not found.</div>
+    }
+
+    return (
+        <DashboardPage header={null}>
+            <<Resource>GeneralInfo <resource>={<resource>.data} />
+        </DashboardPage>
+    )
+}
+```
+
+**Key rules:**
+- **Server component** — fetches resource data on the server
+- Uses `DashboardPage` wrapper with `header={null}` (the layout already has the header)
+- Renders the general-info component with the full resource data
+- Shows a fallback message if the resource is not found
+
+### Step 6: Create Sub-Tab Pages
+
+Choose the appropriate pattern based on the sub-tab's requirements:
+
+#### Pattern A: ResourcePage with `extraParams` (Preferred for CRUD sub-tabs)
+
+Use when the sub-tab needs full CRUD for a **related** resource filtered by the parent ID.
+
+```tsx
+"use client"
+
+import { use } 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 { <Related>Form } from '@/modules/<related>/<related>-form'
+import { <RELATED>_ROUTES } from '@garage/api'
+import type { <Related>Client } from '@garage/api'
+import { use<Resource> } from '@/modules/<resource>/<resource>-context'
+
+export default function <Resource><Related>Page({ params }: { params: Promise<{ id: string }> }) {
+    const { id: <resource>Id } = use(params)
+    const <resource> = use<Resource>()
+
+    return (
+        <ResourcePage<<Related>Client>
+            toolbar={({ invalidateQuery, selectedItem, closeDialog }) => (
+                <FormDialog title="<Related>">
+                    {(resourceId) => (
+                        <<Related>Form
+                            resourceId={resourceId}
+                            initialData={{
+                                <resource>: <resource>
+                                    ? { value: <resource>.id, label: <resource>.label }
+                                    : null,
+                            }}
+                            onSuccess={() => {
+                                closeDialog();
+                                invalidateQuery();
+                            }}
+                        />
+                    )}
+                </FormDialog>
+            )}
+            pageTitle="<Resource> <Related>s"
+            routeKey={<RELATED>_ROUTES.INDEX}
+            getClient={(api) => api.<related>s}
+            extraParams={{ <resource>_id: <resource>Id }}
+            header={null}
+            columns={({ actionsColumn }) => [
+                // Column definitions...
+                actionsColumn(),
+            ]}
+        />
+    )
+}
+```
+
+**Key rules:**
+- `"use client"` — uses hooks (`use()`, `use<Resource>()`)
+- Uses `use(params)` (React 19) to unwrap the params Promise
+- Consumes the parent context via `use<Resource>()` to pre-populate the form's relation field
+- `extraParams={{ <resource>_id: <resource>Id }}` filters the list to only show related records
+- `header={null}` — the layout already provides the header
+- Pass `initialData` with the parent resource as a relation field `{ value, label }`
+
+#### Pattern B: Manual DataTable (For custom interactions)
+
+Use when the sub-tab needs non-standard behavior (link/unlink, file uploads, custom mutations).
+
+```tsx
+"use client"
+
+import { useParams } from "next/navigation"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { useAuthApi } from "@/shared/useApi"
+import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
+import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
+
+export default function <Resource><Tab>Page() {
+    const { id: <resource>Id } = useParams<{ id: string }>()
+    const api = useAuthApi()
+    const queryClient = useQueryClient()
+
+    const queryKey = ["<resource>-<tab>", <resource>Id]
+
+    const { data, isLoading } = useQuery({
+        queryKey,
+        queryFn: () => api.<resources>.get<Tab>(<resource>Id),
+    })
+
+    // Custom mutations (link, unlink, upload, etc.)
+
+    return (
+        <DashboardPage header={null}>
+            <DataTable
+                columns={columns}
+                data={data?.data ?? []}
+                isLoading={isLoading}
+            />
+        </DashboardPage>
+    )
+}
+```
+
+**Key rules:**
+- Use `useParams()` or `use(params)` to get the parent resource ID
+- Custom query key includes the parent resource ID
+- Use `DashboardPage header={null}` as wrapper
+- Implement custom mutations with `useMutation` + `useQueryClient` for cache invalidation
+
+## API Integration
+
+### Server-Side (Layout + Details Tab)
+
+```tsx
+import { getServerApi } from '@garage/api/server'
+
+// In an async server component:
+const api = await getServerApi()
+const resource = await api.<resources>.getById(id)
+```
+
+- `getServerApi()` reads auth cookies server-side — no token passing needed
+- Returns typed responses based on OpenAPI schema
+- Used in `layout.tsx` and the default `page.tsx` (Details tab)
+
+### Client-Side (Sub-Tab Pages)
+
+```tsx
+import { useAuthApi } from "@/shared/useApi"
+
+// In a client component:
+const api = useAuthApi()
+// Then use with React Query:
+useQuery({ queryFn: () => api.<resources>.list() })
+```
+
+- `useAuthApi()` returns the API client with the auth token from the store
+- Always use with React Query (`useQuery`, `useMutation`) for caching and state management
+- `ResourcePage` handles this internally — only needed for manual DataTable pages
+
+### Client Types
+
+API clients live in `packages/api/src/clients/<resource>.ts`. Each exports:
+- `<RESOURCE>_ROUTES` — route constants (`INDEX`, `BY_ID`, etc.)
+- `<Resource>Client` — class with typed methods
+
+These are re-exported from `@garage/api` for use in the dashboard.
+
+## Component Reusability
+
+### Reusable Across Resources
+
+| Component | Location | Reuse Pattern |
+|---|---|---|
+| `DashboardDetailsPage` | `@/base/components/layout/dashboard` | Used by every `[id]/layout.tsx` |
+| `DashboardPage` | `@/base/components/layout/dashboard` | Used by every tab `page.tsx` with `header={null}` |
+| `ResourcePage` | `@/shared/data-view/resource-page` | Used by CRUD sub-tabs with `extraParams` |
+| `FormDialog` | `@/shared/components/form-dialog` | Used for create/edit dialogs in sub-tabs |
+| `DataTable` | `@/shared/data-view/table-view` | Used for custom sub-tabs (non-CRUD) |
+| `ColumnHeader` | `@/shared/data-view/table-view` | Used in all column definitions |
+| `InfoItem` pattern | Copy per resource | Icon+label+value display for general-info |
+
+### Resource-Specific (Create Per Resource)
+
+| Component | Location | Purpose |
+|---|---|---|
+| `<resource>-context.tsx` | `modules/<resource>/` | Context provider for parent resource identity |
+| `<resource>-actions.tsx` | `modules/<resource>/` | Header dropdown menu (edit/delete) |
+| `<resource>-general-info.tsx` | `modules/<resource>/` | Read-only details display for Details tab |
+| `<resource>-form.tsx` | `modules/<resource>/` | CRUD form (shared with list page creation) |
+| `<resource>.schema.ts` | `modules/<resource>/` | Zod schema (shared with form) |
+
+## File Structure Convention
+
+```
+app/(authenticated)/<section>/<resources>/[id]/
+├── layout.tsx                  ← Server: fetch + DashboardDetailsPage + Provider
+├── page.tsx                    ← Server: Details tab (GeneralInfo)
+├── <sub-tab-1>/page.tsx        ← Client: ResourcePage or manual DataTable
+├── <sub-tab-2>/page.tsx        ← Client: ResourcePage or manual DataTable
+└── ...
+
+modules/<resources>/
+├── <resource>.schema.ts        ← Zod form schema
+├── <resource>-form.tsx         ← CRUD form component
+├── <resource>-context.tsx      ← Context provider (id + label)
+├── <resource>-actions.tsx      ← Actions dropdown
+├── <resource>-general-info.tsx ← Read-only info cards
+└── <optional-sub-forms>/       ← e.g. document upload forms
+```
+
+## Naming Conventions
+
+| Item | Pattern | Example |
+|---|---|---|
+| Layout file | `app/.../<resources>/[id]/layout.tsx` | `vehicles/[id]/layout.tsx` |
+| Details page | `app/.../<resources>/[id]/page.tsx` | `vehicles/[id]/page.tsx` |
+| Sub-tab page | `app/.../<resources>/[id]/<tab>/page.tsx` | `vehicles/[id]/estimates/page.tsx` |
+| Context file | `modules/<resources>/<resource>-context.tsx` | `vehicles/vehicle-context.tsx` |
+| Context type | `<Resource>ContextValue` | `VehicleContextValue` |
+| Provider | `<Resource>Provider` | `VehicleProvider` |
+| Hook | `use<Resource>()` | `useVehicle()` |
+| Actions file | `modules/<resources>/<resource>-actions.tsx` | `vehicles/vehicle-actions.tsx` |
+| Actions component | `<Resource>Actions` | `VehicleActions` |
+| General info file | `modules/<resources>/<resource>-general-info.tsx` | `vehicles/vehicle-general-info.tsx` |
+| General info component | `<Resource>GeneralInfo` | `VehicleGeneralInfo` |
+
+## Imports Cheat Sheet
+
+```tsx
+// Layout
+import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
+import { getServerApi } from '@garage/api/server'
+import { <Resource>Actions } from '@/modules/<resources>/<resource>-actions'
+import { <Resource>Provider } from '@/modules/<resources>/<resource>-context'
+
+// Details tab
+import { getServerApi } from '@garage/api/server'
+import { <Resource>GeneralInfo } from '@/modules/<resources>/<resource>-general-info'
+import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
+
+// Sub-tab (ResourcePage pattern)
+import { ResourcePage } from '@/shared/data-view/resource-page'
+import { ColumnHeader } from '@/shared/data-view/table-view'
+import FormDialog from '@/shared/components/form-dialog'
+import { use<Resource> } from '@/modules/<resources>/<resource>-context'
+import type { <Related>Client } from '@garage/api'
+import { <RELATED>_ROUTES } from '@garage/api'
+
+// Sub-tab (Manual DataTable pattern)
+import { useAuthApi } from "@/shared/useApi"
+import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
+
+// Context provider
+import { createContext, useContext } from "react"
+
+// Actions
+import { useAuthApi } from "@/shared/useApi"
+import { useRouter } from "next/navigation"
+import { Button } from "@/shared/components/ui/button"
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/shared/components/ui/dropdown-menu"
+
+// General Info
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import { Badge } from "@/shared/components/ui/badge"
+import { Separator } from "@/shared/components/ui/separator"
+```

apps/dashboard/app/(authenticated)/items/parts/page.tsx

@@ -2,6 +2,7 @@
 
 import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
+import FormDialog from "@/shared/components/form-dialog"
 import { PartForm } from "@/modules/parts/part-form"
 import { Badge } from "@/shared/components/ui/badge"
 import { PARTS_ROUTES } from "@garage/api"
@@ -11,9 +12,21 @@ export default function PartsPage() {
     return (
         <ResourcePage<PartsClient>
             pageTitle="Parts"
-            title="Part"
             routeKey={PARTS_ROUTES.INDEX}
             getClient={(api) => api.parts}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Part">
+                        {(resourceId) => (
+                            <PartForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
             columns={({ actionsColumn }) => [
                 {
                     accessorKey: "title",
@@ -78,13 +91,6 @@ export default function PartsPage() {
                 },
                 actionsColumn(),
             ]}
-            renderForm={({ resourceId, initialData, onSuccess }) => (
-                <PartForm
-                    resourceId={resourceId}
-                    initialData={initialData}
-                    onSuccess={onSuccess}
-                />
-            )}
         />
     )
 }

apps/dashboard/app/(authenticated)/items/service-group/page.tsx

@@ -2,6 +2,7 @@
 
 import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
+import FormDialog from "@/shared/components/form-dialog"
 import { ServiceGroupForm } from "@/modules/service-groups/service-group-form"
 import { Badge } from "@/shared/components/ui/badge"
 import { SERVICE_GROUP_ROUTES } from "@garage/api"
@@ -11,9 +12,21 @@ export default function ServiceGroupPage() {
     return (
         <ResourcePage<ServiceGroupsClient>
             pageTitle="Service Groups"
-            title="Service Group"
             routeKey={SERVICE_GROUP_ROUTES.INDEX}
             getClient={(api) => api.serviceGroups}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Service Group">
+                        {(resourceId) => (
+                            <ServiceGroupForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
             columns={({ actionsColumn }) => [
                 {
                     accessorKey: "name",
@@ -60,13 +73,6 @@ export default function ServiceGroupPage() {
                 },
                 actionsColumn(),
             ]}
-            renderForm={({ resourceId, initialData, onSuccess }) => (
-                <ServiceGroupForm
-                    resourceId={resourceId}
-                    initialData={initialData}
-                    onSuccess={onSuccess}
-                />
-            )}
         />
     )
 }

apps/dashboard/app/(authenticated)/items/services/page.tsx

@@ -2,6 +2,7 @@
 
 import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
+import FormDialog from "@/shared/components/form-dialog"
 import { ServiceForm } from "@/modules/services/service-form"
 import { SERVICE_ROUTES } from "@garage/api"
 import type { ServicesClient } from "@garage/api"
@@ -10,9 +11,21 @@ export default function ServicesPage() {
     return (
         <ResourcePage<ServicesClient>
             pageTitle="Services"
-            title="Service"
             routeKey={SERVICE_ROUTES.INDEX}
             getClient={(api) => api.services}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Service">
+                        {(resourceId) => (
+                            <ServiceForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
             columns={({ actionsColumn }) => [
                 {
                     accessorKey: "labor_name",
@@ -57,13 +70,6 @@ export default function ServicesPage() {
                 },
                 actionsColumn(),
             ]}
-            renderForm={({ resourceId, initialData, onSuccess }) => (
-                <ServiceForm
-                    resourceId={resourceId}
-                    initialData={initialData}
-                    onSuccess={onSuccess}
-                />
-            )}
         />
     )
 }

apps/dashboard/app/(authenticated)/layout.tsx

@@ -1,218 +1,44 @@
-"use client"
 
 import { Suspense } from "react"
-import type { NavGroup } from "@/base/types/navigation"
-import {
-  AlarmClockIcon,
-  AwardIcon,
-  BanknoteArrowDownIcon,
-  BarChart3Icon,
-  BellRingIcon,
-  BookIcon,
-  BriefcaseBusinessIcon,
-  Building2Icon,
-  CalendarCheck2Icon,
-  CalendarDaysIcon,
-  LayoutDashboardIcon,
-  ClipboardListIcon,
-  UsersIcon,
-  CalendarIcon,
-  CarIcon,
-  ClipboardCheckIcon,
-  Clock3Icon,
-  ClockIcon,
-  GemIcon,
-  GitBranchIcon,
-  HandCoinsIcon,
-  ListIcon,
-  ListTodoIcon,
-  MegaphoneIcon,
-  PackageIcon,
-  PhoneCallIcon,
-  PlugZapIcon,
-  ReceiptIcon,
-  ReceiptTextIcon,
-  SettingsIcon,
-  ShoppingBasketIcon,
-  CircleDollarSign,
-  StarIcon,
-  StoreIcon,
-  TimerIcon,
-  UserCogIcon,
-  WalletIcon,
-  WrenchIcon,
-  ShoppingCartIcon,
-} from "lucide-react"
+
 import Image from "next/image"
 import { DashboardLayout } from "@/base/components/layout/dashboard"
 import { useAuth } from "@/shared/hooks/use-auth"
-
-const navGroups: NavGroup[] = [
-  {
-    items: [
-      {
-        title: "Dashboard",
-        href: "/",
-        icon: <LayoutDashboardIcon />,
-      },
-      {
-        title: "Job Cards",
-        href: "/sales/workorder/list",
-        icon: <ClipboardListIcon />,
-      },
-      {
-        title: "Customer & Vehicles",
-        href: "/customer-vehicles",
-        icon: <UsersIcon />,
-      },
-      {
-        title: "Reports",
-        href: "/reports",
-        icon: <BarChart3Icon />,
-      },
-    ],
-  },
-  {
-    label: "Management",
-    items: [
-      {
-        title: "Calendars",
-        href: "/calendars",
-        icon: <CalendarIcon />,
-        items: [
-          { title: "Work Schedule", href: "/calendar/work-schedule/list", icon: <Clock3Icon /> },
-          { title: "Appointments", href: "/calendar/appointment/list", icon: <CalendarCheck2Icon /> },
-        ],
-      },
-      {
-        title: "Sales",
-        href: "/sales",
-        icon: <CircleDollarSign />,
-        items: [
-          { title: "Customers", href: "/sales/customers", icon: <UsersIcon /> },
-          { title: "Vehicles", href: "/sales/vehicles", icon: <CarIcon /> },
-          { title: "Inspections", href: "/sales/inspections", icon: <ClipboardCheckIcon /> },
-          { title: "Estimates", href: "/sales/estimate", icon: <ReceiptTextIcon /> },
-          { title: "Job Cards", href: "/sales/workorder/list", icon: <ClipboardListIcon /> },
-          { title: "Invoices", href: "/sales/invoice", icon: <ReceiptIcon /> },
-          { title: "Payments Received", href: "/sales/payment-received", icon: <HandCoinsIcon /> },
-          { title: "Credit Notes", href: "/sales/credit-notes", icon: <ReceiptTextIcon /> },
-        ],
-      },
-      {
-        title: "Purchases",
-        href: "/purchases",
-        icon: <ShoppingCartIcon />,
-        items: [
-          { title: "Vendors", href: "/purchase/vendor", icon: <StoreIcon /> },
-          { title: "Expenses", href: "/purchase/expense", icon: <WalletIcon /> },
-          { title: "Purchase Orders", href: "/purchase/purchase-order", icon: <ShoppingBasketIcon /> },
-          { title: "Bills", href: "/purchase/bill", icon: <ReceiptIcon /> },
-          { title: "Payments Made", href: "/purchase/payments-made", icon: <BanknoteArrowDownIcon /> },
-          { title: "Vendor Credits", href: "/purchase/vendor-credit", icon: <ReceiptTextIcon /> },
-        ],
-      },
-      {
-        title: "CRM",
-        href: "/crm",
-        icon: <BriefcaseBusinessIcon />,
-        items: [
-          { title: "Leads", href: "/crm/leads/list", icon: <GemIcon /> },
-          { title: "Calls", href: "/crm/calls-follow-up/list", icon: <PhoneCallIcon /> },
-          { title: "Tasks", href: "/crm/tasks/list", icon: <ListTodoIcon /> },
-        ],
-      },
-      {
-        title: "Marketing",
-        href: "/marketing",
-        icon: <MegaphoneIcon />,
-        items: [
-          { title: "Service Reminders", href: "/marketing/service-reminder/list", icon: <AlarmClockIcon /> },
-          { title: "Rating & Reviews", href: "/marketing/rating-review", icon: <StarIcon /> },
-          { title: "Google Business Reviews", href: "/marketing/google-rating-review", icon: <AwardIcon /> },
-        ],
-      },
-      {
-        title: "Accountants",
-        href: "/accountants",
-        icon: <BookIcon />,
-        items: [
-          { title: "Manual Journals", href: "/accountants/manual-journal", icon: <BookIcon /> },
-          { title: "Chart of Accounts", href: "/accountants/chart-of-account", icon: <GitBranchIcon /> },
-        ],
-      },
-      {
-        title: "Employees",
-        href: "/productivity",
-        icon: <UserCogIcon />,
-        items: [
-          { title: "Employees", href: "/productivity/employees", icon: <UsersIcon /> },
-          { title: "Time Clocks", href: "/productivity/time-clocks", icon: <TimerIcon /> },
-          { title: "Time Sheets", href: "/productivity/timesheet", icon: <ClockIcon /> },
-          { title: "Payroll", href: "/productivity/payroll", icon: <WalletIcon /> },
-          { title: "Payments Made", href: "/productivity/employee-payments-made", icon: <HandCoinsIcon /> },
-          { title: "Shop Calendars", href: "/productivity/shop-calendars", icon: <CalendarDaysIcon /> },
-          { title: "Shop Timing", href: "/productivity/shop-timings", icon: <Clock3Icon /> },
-          { title: "Holidays", href: "/productivity/holidays", icon: <CalendarIcon /> },
-        ],
-      },
-      {
-        title: "Items",
-        href: "/items",
-        icon: <PackageIcon />,
-        items: [
-          { title: "Services", href: "/items/services", icon: <WrenchIcon /> },
-          { title: "Parts", href: "/items/parts", icon: <WrenchIcon /> },
-          { title: "Expense Item", href: "/items/expense-item", icon: <WalletIcon /> },
-          { title: "Service Group", href: "/items/service-group", icon: <PackageIcon /> },
-          { title: "Inspections", href: "/items/inspection", icon: <ClipboardCheckIcon /> },
-          { title: "Inventory Adjustments", href: "/items/adjustment", icon: <ListIcon /> },
-        ],
-      },
-      {
-        title: "Settings",
-        href: "/setting",
-        icon: <SettingsIcon />,
-        items: [
-          { title: "Company", href: "/setting/company", icon: <Building2Icon /> },
-          { title: "Shop Types", href: "/setting/shop-type", icon: <CarIcon /> },
-          { title: "Tax & Rates", href: "/setting/tax-rates", icon: <ReceiptTextIcon /> },
-          { title: "Configurations", href: "/setting/configurations/preferences/sales", icon: <SettingsIcon /> },
-          { title: "Templates", href: "/setting/templates", icon: <ClipboardListIcon /> },
-          { title: "Integrations", href: "/setting/integrations/providers", icon: <PlugZapIcon /> },
-          { title: "Master", href: "/setting/master/body-type", icon: <ListIcon /> },
-        ],
-      },
-    ],
-  },
-]
+import { navGroups } from "@/config/navGroups"
+import { getAuthCookies } from "@/modules/auth/auth.actions"
+import { redirect } from "next/navigation"
+ 
 
 function Logo() {
   return (
     <div className="flex items-center gap-2">
-        <Image alt="Logo" src={'/assets/logo.png'} height={200} width={200}/>
+      <Image alt="Logo" src={'/assets/logo.png'} height={200} width={200} />
     </div>
   )
 }
 
-export default function AuthenticatedLayout({
+export default async function AuthenticatedLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
-  const { user } = useAuth()
+  const { token, user } = await getAuthCookies()
+
+  if(!token || !user ) {
+    redirect('/login');
+  }
 
   const userInfo = user
     ? {
-        name: user.name,
-        email: user.email,
-        initials: user.name.charAt(0).toUpperCase(),
-      }
+      name: user.name,
+      email: user.email,
+      initials: user.name.charAt(0).toUpperCase(),
+    }
     : undefined
 
   return (
     <DashboardLayout navGroups={navGroups} logo={<Logo />} user={userInfo}>
-      <Suspense>{children}</Suspense>
+      {children}
     </DashboardLayout>
   )
 }

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

@@ -1,14 +1,11 @@
 import { DashboardHeader } from "@/base/components/layout/dashboard";
 import DashboardPage from "@/base/components/layout/dashboard/dashboard-page";
+import { DashboardContent } from "@/modules/home/dashboard-content";
+
 export default function page() {
   return (
-    <DashboardPage header={<DashboardHeader />} >
-      <div className="space-y-6">
-        <h1 className="text-2xl font-bold tracking-tight">Dashboard</h1>
-        <p className="text-muted-foreground">
-          Welcome to your dashboard. Select an item from the sidebar to get started.
-        </p>
-      </div>
+    <DashboardPage header={<DashboardHeader />} title="Dashboard">
+      <DashboardContent />
     </DashboardPage>
   )
 }

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

@@ -2,6 +2,7 @@
 
 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"
@@ -10,9 +11,21 @@ export default function EmployeesPage() {
     return (
         <ResourcePage<EmployeesClient>
             pageTitle="Employees"
-            title="Employee"
             routeKey={EMPLOYEE_ROUTES.INDEX}
             getClient={(api) => api.employees}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Employee">
+                        {(resourceId) => (
+                            <EmployeeForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
             columns={({ actionsColumn }) => [
                 {
                     accessorKey: "first_name",
@@ -53,13 +66,6 @@ export default function EmployeesPage() {
                 },
                 actionsColumn(),
             ]}
-            renderForm={({ resourceId, initialData, onSuccess }) => (
-                <EmployeeForm
-                    resourceId={resourceId}
-                    initialData={initialData}
-                    onSuccess={onSuccess}
-                />
-            )}
         />
     )
 }

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

@@ -0,0 +1,46 @@
+"use client"
+
+import { ResourcePage } from "@/shared/data-view/resource-page"
+import { ColumnHeader } from "@/shared/data-view/table-view"
+import FormDialog from "@/shared/components/form-dialog"
+import { HolidayYearForm } from "@/modules/settings/holiday-year/holiday-year-form"
+import { HOLIDAY_YEAR_ROUTES } from "@garage/api"
+import type { HolidayYearsClient } from "@garage/api"
+
+export default function HolidayYearsPage() {
+    return (
+        <ResourcePage<HolidayYearsClient>
+            pageTitle="Holiday Years"
+            routeKey={HOLIDAY_YEAR_ROUTES.INDEX}
+            getClient={(api) => api.holidayYears}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Holiday Year">
+                        {(resourceId) => (
+                            <HolidayYearForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
+            columns={({ actionsColumn }) => [
+                {
+                    accessorKey: "year",
+                    header: ({ column }) => <ColumnHeader column={column} title="Year" />,
+                },
+                {
+                    accessorKey: "created_at",
+                    header: ({ column }) => <ColumnHeader column={column} title="Created At" />,
+                    cell: ({ row }) => {
+                        const date = (row.original as any).created_at
+                        return date ? new Date(date).toLocaleDateString() : "—"
+                    },
+                },
+                actionsColumn({ onEdit: undefined }),
+            ]}
+        />
+    )
+}

apps/dashboard/app/(authenticated)/productivity/shop-calendars/page.tsx

@@ -2,6 +2,7 @@
 
 import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
+import FormDialog from "@/shared/components/form-dialog"
 import { ShopCalendarForm } from "@/modules/shop-calendars/shop-calendar-form"
 import { SHOP_CALENDAR_ROUTES } from "@garage/api"
 import type { ShopCalendarsClient } from "@garage/api"
@@ -11,9 +12,21 @@ export default function ShopCalendarsPage() {
     return (
         <ResourcePage<ShopCalendarsClient>
             pageTitle="Shop Calendars"
-            title="Shop Calendar"
             routeKey={SHOP_CALENDAR_ROUTES.INDEX}
             getClient={(api) => api.shopCalendars}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Shop Calendar">
+                        {(resourceId) => (
+                            <ShopCalendarForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
             columns={({ actionsColumn }) => [
                 {
                     accessorKey: "title",
@@ -38,13 +51,6 @@ export default function ShopCalendarsPage() {
                 },
                 actionsColumn({ onEdit: undefined }),
             ]}
-            renderForm={({ resourceId, initialData, onSuccess }) => (
-                <ShopCalendarForm
-                    resourceId={resourceId}
-                    initialData={initialData}
-                    onSuccess={onSuccess}
-                />
-            )}
         />
     )
 }

apps/dashboard/app/(authenticated)/productivity/shop-timings/page.tsx

@@ -2,6 +2,7 @@
 
 import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
+import FormDialog from "@/shared/components/form-dialog"
 import { ShopTimingForm } from "@/modules/shop-timings/shop-timing-form"
 import { SHOP_TIMING_ROUTES } from "@garage/api"
 import type { ShopTimingsClient } from "@garage/api"
@@ -11,9 +12,21 @@ export default function ShopTimingsPage() {
     return (
         <ResourcePage<ShopTimingsClient>
             pageTitle="Shop Timings"
-            title="Shop Timing"
             routeKey={SHOP_TIMING_ROUTES.INDEX}
             getClient={(api) => api.shopTimings}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Shop Timing">
+                        {(resourceId) => (
+                            <ShopTimingForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
             columns={({ actionsColumn }) => [
                 {
                     accessorKey: "title",
@@ -45,13 +58,6 @@ export default function ShopTimingsPage() {
                 },
                 actionsColumn(),
             ]}
-            renderForm={({ resourceId, initialData, onSuccess }) => (
-                <ShopTimingForm
-                    resourceId={resourceId}
-                    initialData={initialData}
-                    onSuccess={onSuccess}
-                />
-            )}
         />
     )
 }

apps/dashboard/app/(authenticated)/purchase/expense/page.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import { ResourcePage } from "@/shared/data-view/resource-page"
+import { ColumnHeader } from "@/shared/data-view/table-view"
+import FormDialog from "@/shared/components/form-dialog"
+import { ExpenseForm } from "@/modules/expenses/expense-form"
+import { Badge } from "@/shared/components/ui/badge"
+import { EXPENSE_ROUTES } from "@garage/api"
+import type { ExpensesClient } from "@garage/api"
+
+export default function ExpensesPage() {
+    return (
+        <ResourcePage<ExpensesClient>
+            pageTitle="Expenses"
+            routeKey={EXPENSE_ROUTES.INDEX}
+            getClient={(api) => api.expenses}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Expense">
+                        {(resourceId) => (
+                            <ExpenseForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
+            columns={({ actionsColumn }) => [
+                {
+                    accessorKey: "title",
+                    header: ({ column }) => <ColumnHeader column={column} title="Title" />,
+                },
+                {
+                    accessorKey: "invoice_number",
+                    header: ({ column }) => <ColumnHeader column={column} title="Invoice #" />,
+                    cell: ({ row }) => (row.original as any).invoice_number || "—",
+                },
+                {
+                    accessorKey: "vendor_name",
+                    header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
+                    cell: ({ row }) => (row.original as any).vendor_name || "—",
+                },
+                {
+                    accessorKey: "expense_date",
+                    header: ({ column }) => <ColumnHeader column={column} title="Date" />,
+                    cell: ({ row }) => {
+                        const val = (row.original as any).expense_date
+                        return val ? new Date(val).toLocaleDateString() : "—"
+                    },
+                },
+                {
+                    accessorKey: "status",
+                    header: ({ column }) => <ColumnHeader column={column} title="Status" />,
+                    cell: ({ row }) => {
+                        const status = (row.original as any).status
+                        return (
+                            <Badge variant={status === "paid" ? "default" : "secondary"}>
+                                {status || "—"}
+                            </Badge>
+                        )
+                    },
+                },
+                {
+                    accessorKey: "created_at",
+                    header: ({ column }) => <ColumnHeader column={column} title="Created" />,
+                    cell: ({ row }) => {
+                        const val = (row.original as any).created_at
+                        return val ? new Date(val).toLocaleDateString() : "—"
+                    },
+                },
+                actionsColumn(),
+            ]}
+        />
+    )
+}

apps/dashboard/app/(authenticated)/purchase/vendor/page.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import { ResourcePage } from "@/shared/data-view/resource-page"
+import { ColumnHeader } from "@/shared/data-view/table-view"
+import FormDialog from "@/shared/components/form-dialog"
+import { VendorForm } from "@/modules/vendors/vendor-form"
+import { VENDOR_ROUTES } from "@garage/api"
+import type { VendorsClient } from "@garage/api"
+
+export default function VendorsPage() {
+    return (
+        <ResourcePage<VendorsClient>
+            pageTitle="Vendors"
+            routeKey={VENDOR_ROUTES.INDEX}
+            getClient={(api) => api.vendors}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Vendor">
+                        {(resourceId) => (
+                            <VendorForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
+            columns={({ actionsColumn }) => [
+                {
+                    accessorKey: "first_name",
+                    header: ({ column }) => <ColumnHeader column={column} title="Name" />,
+                    cell: ({ row }) => {
+                        const r = row.original as any
+                        const name = [r.first_name, r.last_name].filter(Boolean).join(" ")
+                        return name || "—"
+                    },
+                },
+                {
+                    accessorKey: "company_name",
+                    header: ({ column }) => <ColumnHeader column={column} title="Company" />,
+                    cell: ({ row }) => (row.original as any).company_name || "—",
+                },
+                {
+                    accessorKey: "email",
+                    header: ({ column }) => <ColumnHeader column={column} title="Email" />,
+                    cell: ({ row }) => (row.original as any).email || "—",
+                },
+                {
+                    accessorKey: "created_at",
+                    header: ({ column }) => <ColumnHeader column={column} title="Created" />,
+                    cell: ({ row }) => {
+                        const val = (row.original as any).created_at
+                        return val ? new Date(val).toLocaleDateString() : "—"
+                    },
+                },
+                actionsColumn(),
+            ]}
+        />
+    )
+}

apps/dashboard/app/(authenticated)/sales/customers/page.tsx

@@ -2,6 +2,7 @@
 
 import { ResourcePage } from '@/shared/data-view/resource-page'
 import { ColumnHeader } from '@/shared/data-view/table-view'
+import FormDialog from '@/shared/components/form-dialog'
 import { CustomerForm } from '@/modules/customers/customer-form'
 import { CUSTOMER_ROUTES } from '@garage/api'
 import type { CustomersClient } from '@garage/api'
@@ -11,9 +12,21 @@ export default function CustomersPage() {
     return (
         <ResourcePage<CustomersClient>
             pageTitle='Customers'
-            title="Customer"
             routeKey={CUSTOMER_ROUTES.INDEX}
             getClient={(api) => api.customers}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Customer">
+                        {(resourceId) => (
+                            <CustomerForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
             columns={({ actionsColumn }) => [
 
                 {
@@ -42,13 +55,6 @@ export default function CustomersPage() {
                 },
                 actionsColumn(),
             ]}
-            renderForm={({ resourceId, initialData, onSuccess }) => (
-                <CustomerForm
-                    resourceId={resourceId}
-                    initialData={initialData}
-                    onSuccess={onSuccess}
-                />
-            )}
         />
     )
 }

apps/dashboard/app/(authenticated)/sales/estimates/page.tsx

@@ -0,0 +1,91 @@
+"use client"
+
+import { ResourcePage } from '@/shared/data-view/resource-page'
+import { ColumnHeader } from '@/shared/data-view/table-view'
+import FormDialog from '@/shared/components/form-dialog'
+import { EstimateForm } from '@/modules/estimates/estimate-form'
+import { ESTIMATE_ROUTES } from '@garage/api'
+import type { EstimatesClient } from '@garage/api'
+import { FileTextIcon } from 'lucide-react'
+
+type EstimateItem = {
+    id: number
+    title?: string
+    estimate_number?: string
+    date?: string
+    customer_name?: string
+    vehicle_name?: string
+    has_insurance?: boolean
+    created_at?: string
+}
+
+export default function EstimatesPage({ vehicleId }: { vehicleId: string }) {
+    return (
+        <ResourcePage<EstimatesClient>
+            pageTitle="Estimates"
+            routeKey={ESTIMATE_ROUTES.INDEX}
+            getClient={(api) => api.estimates}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Estimate">
+                        {(resourceId) => (
+                            <EstimateForm
+                                resourceId={resourceId}
+                                initialData={{ vehicle:{label: vehicleId, value: vehicleId}}}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
+            columns={({ actionsColumn }) => [
+                {
+                    accessorKey: "title",
+                    header: ({ column }) => <ColumnHeader column={column} title="Title" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as EstimateItem
+                        return (
+                            <div className="flex items-center gap-2">
+                                <FileTextIcon className="text-muted-foreground h-4 w-4" />
+                                <span>{item.title}</span>
+                            </div>
+                        )
+                    },
+                },
+                {
+                    accessorKey: "estimate_number",
+                    header: ({ column }) => <ColumnHeader column={column} title="Estimate #" />,
+                },
+                {
+                    accessorKey: "customer_name",
+                    header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
+                },
+                {
+                    accessorKey: "vehicle_name",
+                    header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
+                },
+                {
+                    accessorKey: "date",
+                    header: ({ column }) => <ColumnHeader column={column} title="Date" />,
+                },
+                {
+                    accessorKey: "has_insurance",
+                    header: ({ column }) => <ColumnHeader column={column} title="Insurance" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as EstimateItem
+                        return item.has_insurance ? "Yes" : "No"
+                    },
+                },
+                {
+                    accessorKey: "created_at",
+                    header: ({ column }) => <ColumnHeader column={column} title="Created" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as EstimateItem
+                        return item.created_at ? new Date(item.created_at).toLocaleDateString() : "—"
+                    },
+                },
+                actionsColumn(),
+            ]}
+        />
+    )
+}

apps/dashboard/app/(authenticated)/sales/inspections/page.tsx

@@ -2,6 +2,7 @@
 
 import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
+import FormDialog from "@/shared/components/form-dialog"
 import { InspectionForm } from "@/modules/inspections/inspection-form"
 import { INSPECTION_ROUTES } from "@garage/api"
 import type { InspectionsClient } from "@garage/api"
@@ -10,9 +11,21 @@ export default function InspectionsPage() {
     return (
         <ResourcePage<InspectionsClient>
             pageTitle="Inspections"
-            title="Inspection"
             routeKey={INSPECTION_ROUTES.INDEX}
             getClient={(api) => api.inspections}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Inspection">
+                        {(resourceId) => (
+                            <InspectionForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
             columns={({ actionsColumn }) => [
                 {
                     accessorKey: "title",
@@ -53,13 +66,6 @@ export default function InspectionsPage() {
                 },
                 actionsColumn(),
             ]}
-            renderForm={({ resourceId, initialData, onSuccess }) => (
-                <InspectionForm
-                    resourceId={resourceId}
-                    initialData={initialData}
-                    onSuccess={onSuccess}
-                />
-            )}
         />
     )
 }

apps/dashboard/app/(authenticated)/sales/invoice/[id]/documents/page.tsx

@@ -0,0 +1,162 @@
+"use client"
+
+import { useParams } from "next/navigation"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { type ColumnDef } from "@tanstack/react-table"
+import { useState } from "react"
+import { Plus, Trash2 } from "lucide-react"
+import { toast } from "sonner"
+
+import { useAuthApi } from "@/shared/useApi"
+import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
+import { confirm } from "@/shared/components/confirm-dialog"
+import { Button } from "@/shared/components/ui/button"
+import { Card, CardContent } from "@/shared/components/ui/card"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
+import { InvoiceDocumentForm } from "@/modules/invoices/invoice-document-form"
+
+type InvoiceDocument = {
+    id: number
+    document_number?: string
+    show_in_invoice?: boolean
+    show_in_estimate?: boolean
+    show_in_statement?: boolean
+    created_at: string
+    updated_at: string
+}
+
+export default function InvoiceDocumentsPage() {
+    const { id: invoiceId } = useParams<{ id: string }>()
+    const api = useAuthApi()
+    const queryClient = useQueryClient()
+    const [dialogOpen, setDialogOpen] = useState(false)
+
+    const queryKey = ["invoice-documents", invoiceId]
+
+    const { data, isLoading } = useQuery({
+        queryKey,
+        queryFn: () => api.invoices.listDocuments({ invoice_id: invoiceId }),
+    })
+
+    const deleteMutation = useMutation({
+        mutationFn: (id: number) => api.invoices.destroyDocument(String(id)),
+        onSuccess: () => {
+            toast.success("Document deleted successfully.")
+            queryClient.invalidateQueries({ queryKey })
+        },
+        onError: () => {
+            toast.error("Failed to delete document.")
+        },
+    })
+
+    const handleDelete = async (doc: InvoiceDocument) => {
+        const confirmed = await confirm({
+            title: "Delete Document",
+            description: `Are you sure you want to delete "${doc.document_number || "this document"}"?`,
+            confirmLabel: "Delete",
+            variant: "destructive",
+        })
+        if (confirmed) {
+            deleteMutation.mutate(doc.id)
+        }
+    }
+
+    const columns: ColumnDef<InvoiceDocument>[] = [
+        {
+            accessorKey: "document_number",
+            header: ({ column }) => <ColumnHeader column={column} title="Document Number" />,
+        },
+        {
+            accessorKey: "show_in_invoice",
+            header: ({ column }) => <ColumnHeader column={column} title="Show in Invoice" />,
+            cell: ({ getValue }) => (getValue<boolean>() ? "Yes" : "No"),
+        },
+        {
+            accessorKey: "show_in_estimate",
+            header: ({ column }) => <ColumnHeader column={column} title="Show in Estimate" />,
+            cell: ({ getValue }) => (getValue<boolean>() ? "Yes" : "No"),
+        },
+        {
+            accessorKey: "show_in_statement",
+            header: ({ column }) => <ColumnHeader column={column} title="Show in Statement" />,
+            cell: ({ getValue }) => (getValue<boolean>() ? "Yes" : "No"),
+        },
+        {
+            accessorKey: "created_at",
+            header: ({ column }) => <ColumnHeader column={column} title="Created" />,
+            cell: ({ getValue }) => {
+                const val = getValue<string>()
+                return val ? new Date(val).toLocaleDateString() : "—"
+            },
+        },
+        {
+            id: "actions",
+            header: () => <span className="sr-only">Actions</span>,
+            cell: ({ row }) => (
+                <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    onClick={() => handleDelete(row.original)}
+                    title="Delete document"
+                >
+                    <Trash2 className="size-4 text-destructive" />
+                </Button>
+            ),
+            enableSorting: false,
+        },
+    ]
+
+    const documents = (data as any)?.data ?? []
+    const meta = (data as any)?.meta
+
+    const pagination = {
+        page: meta?.current_page ?? 1,
+        pageSize: meta?.per_page ?? 15,
+        pageCount: meta?.last_page ?? 1,
+        total: meta?.total ?? 0,
+    }
+
+    return (
+        <div className="flex flex-col gap-4">
+            <div className="flex items-center justify-end">
+                <Button onClick={() => setDialogOpen(true)}>
+                    <Plus className="size-4" />
+                    Add Document
+                </Button>
+            </div>
+
+            <Card>
+                <CardContent>
+                    <DataTable
+                        columns={columns}
+                        data={documents}
+                        pagination={pagination}
+                        sorting={[]}
+                        onChange={() => {}}
+                        isLoading={isLoading}
+                    />
+                </CardContent>
+            </Card>
+
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>Add Document</DialogTitle>
+                    </DialogHeader>
+                    <InvoiceDocumentForm
+                        invoiceId={invoiceId}
+                        onSuccess={() => {
+                            setDialogOpen(false)
+                            queryClient.invalidateQueries({ queryKey })
+                        }}
+                    />
+                </DialogContent>
+            </Dialog>
+        </div>
+    )
+}

apps/dashboard/app/(authenticated)/sales/invoice/[id]/layout.tsx

@@ -0,0 +1,43 @@
+import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
+import { getServerApi } from '@garage/api/server'
+import { InvoiceActions } from '@/modules/invoices/invoice-actions'
+import { InvoiceProvider } from '@/modules/invoices/invoice-context'
+import { ReceiptIcon } from 'lucide-react'
+import React from 'react'
+
+export default async function InvoiceDetailLayout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
+    const { id } = await props.params
+    const api = await getServerApi()
+    const invoice = await api.invoices.show(id)
+    const data = (invoice as any)?.data ?? invoice
+    const title = data?.subject || data?.invoice_number || 'Invoice Details'
+
+    return (
+        <InvoiceProvider invoice={{ id, label: title }}>
+            <DashboardDetailsPage
+                className='p-0 lg:p-0'
+                title={title}
+                description={data?.invoice_number ? `Invoice #: ${data.invoice_number}` : undefined}
+                icon={<ReceiptIcon className="size-5" />}
+                backHref="/sales/invoice"
+                actions={<InvoiceActions invoiceId={id} />}
+                tabs={[
+                    {
+                        href: `/sales/invoice/${id}`,
+                        label: 'Details'
+                    },
+                    {
+                        href: `/sales/invoice/${id}/documents`,
+                        label: 'Documents'
+                    },
+                    {
+                        href: `/sales/invoice/${id}/notes`,
+                        label: 'Notes'
+                    },
+                ]}
+            >
+                {props.children}
+            </DashboardDetailsPage>
+        </InvoiceProvider>
+    )
+}

apps/dashboard/app/(authenticated)/sales/invoice/[id]/notes/page.tsx

@@ -0,0 +1,148 @@
+"use client"
+
+import { useParams } from "next/navigation"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { type ColumnDef } from "@tanstack/react-table"
+import { useState } from "react"
+import { Plus, Trash2 } from "lucide-react"
+import { toast } from "sonner"
+
+import { useAuthApi } from "@/shared/useApi"
+import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
+import { confirm } from "@/shared/components/confirm-dialog"
+import { Button } from "@/shared/components/ui/button"
+import { Card, CardContent } from "@/shared/components/ui/card"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
+import { InvoiceNoteForm } from "@/modules/invoices/invoice-note-form"
+ 
+type InvoiceNote = {
+    id: number
+    note?: string
+    created_at: string
+    updated_at: string
+}
+
+export default function InvoiceNotesPage() {
+    const { id: invoiceId } = useParams<{ id: string }>()
+    const api = useAuthApi()
+    const queryClient = useQueryClient()
+    const [dialogOpen, setDialogOpen] = useState(false)
+
+    const queryKey = ["invoice-notes", invoiceId]
+
+    const { data, isLoading } = useQuery({
+        queryKey,
+        queryFn: () => api.invoices.listNotes({ invoice_id: invoiceId }),
+    })
+
+    const deleteMutation = useMutation({
+        mutationFn: (id: number) => api.invoices.destroyNote(String(id)),
+        onSuccess: () => {
+            toast.success("Note deleted successfully.")
+            queryClient.invalidateQueries({ queryKey })
+        },
+        onError: () => {
+            toast.error("Failed to delete note.")
+        },
+    })
+
+    const handleDelete = async (note: InvoiceNote) => {
+        const confirmed = await confirm({
+            title: "Delete Note",
+            description: "Are you sure you want to delete this note?",
+            confirmLabel: "Delete",
+            variant: "destructive",
+        })
+        if (confirmed) {
+            deleteMutation.mutate(note.id)
+        }
+    }
+
+    const columns: ColumnDef<InvoiceNote>[] = [
+        {
+            accessorKey: "note",
+            header: ({ column }) => <ColumnHeader column={column} title="Note" />,
+            cell: ({ getValue }) => {
+                const val = getValue<string>()
+                return val || "—"
+            },
+        },
+        {
+            accessorKey: "created_at",
+            header: ({ column }) => <ColumnHeader column={column} title="Created" />,
+            cell: ({ getValue }) => {
+                const val = getValue<string>()
+                return val ? new Date(val).toLocaleDateString() : "—"
+            },
+        },
+        {
+            id: "actions",
+            header: () => <span className="sr-only">Actions</span>,
+            cell: ({ row }) => (
+                <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    onClick={() => handleDelete(row.original)}
+                    title="Delete note"
+                >
+                    <Trash2 className="size-4 text-destructive" />
+                </Button>
+            ),
+            enableSorting: false,
+        },
+    ]
+
+    const notes = (data as any)?.data ?? []
+    const meta = (data as any)?.meta
+
+    const pagination = {
+        page: meta?.current_page ?? 1,
+        pageSize: meta?.per_page ?? 15,
+        pageCount: meta?.last_page ?? 1,
+        total: meta?.total ?? 0,
+    }
+
+    return (
+        <div className="flex flex-col gap-4">
+            <div className="flex items-center justify-end">
+                <Button onClick={() => setDialogOpen(true)}>
+                    <Plus className="size-4" />
+                    Add Note
+                </Button>
+            </div>
+
+            <Card>
+                <CardContent>
+                    <DataTable
+                        columns={columns}
+                        data={notes}
+                        pagination={pagination}
+                        sorting={[]}
+                        onChange={() => {}}
+                        isLoading={isLoading}
+                    />
+                </CardContent>
+            </Card>
+
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>Add Note</DialogTitle>
+                    </DialogHeader>
+                    <InvoiceNoteForm
+                        invoiceId={invoiceId}
+                        onSuccess={() => {
+                            setDialogOpen(false)
+                            queryClient.invalidateQueries({ queryKey })
+                        }}
+                    />
+                </DialogContent>
+            </Dialog>
+        </div>
+    )
+}

apps/dashboard/app/(authenticated)/sales/invoice/[id]/page.tsx

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

apps/dashboard/app/(authenticated)/sales/invoice/page.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import { useRouter } from "next/navigation"
+import { ResourcePage } from "@/shared/data-view/resource-page"
+import { ColumnHeader } from "@/shared/data-view/table-view"
+import FormDialog from "@/shared/components/form-dialog"
+import { InvoiceForm } from "@/modules/invoices/invoice-form"
+import { INVOICE_ROUTES } from "@garage/api"
+import type { InvoicesClient } from "@garage/api"
+
+type InvoiceItem = {
+    id: number
+    subject?: string
+    invoice_number?: string
+    customer_name?: string
+    status?: string
+    invoice_date?: string
+    due_date?: string
+    created_at?: string
+}
+
+export default function InvoicesPage() {
+    const router = useRouter()
+
+    return (
+        <ResourcePage<InvoicesClient>
+            pageTitle="Invoices"
+            routeKey={INVOICE_ROUTES.INDEX}
+            getClient={(api) => api.invoices}
+            onRowClick={(row) => router.push(`/sales/invoice/${(row as any).id}`)}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Invoice">
+                        {(resourceId) => (
+                            <InvoiceForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
+            columns={({ actionsColumn }) => [
+                {
+                    accessorKey: "subject",
+                    header: ({ column }) => <ColumnHeader column={column} title="Subject" />,
+                },
+                {
+                    accessorKey: "invoice_number",
+                    header: ({ column }) => <ColumnHeader column={column} title="Invoice #" />,
+                },
+                {
+                    accessorKey: "customer_name",
+                    header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
+                },
+                {
+                    accessorKey: "status",
+                    header: ({ column }) => <ColumnHeader column={column} title="Status" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as InvoiceItem
+                        const status = item.status
+                        const colorMap: Record<string, string> = {
+                            draft: "text-muted-foreground",
+                            open: "text-blue-600",
+                            paid: "text-green-600",
+                            overdue: "text-red-600",
+                            void: "text-gray-400",
+                        }
+                        return (
+                            <span className={colorMap[status ?? ""] ?? ""}>
+                                {status ? status.charAt(0).toUpperCase() + status.slice(1) : "—"}
+                            </span>
+                        )
+                    },
+                },
+                {
+                    accessorKey: "invoice_date",
+                    header: ({ column }) => <ColumnHeader column={column} title="Invoice Date" />,
+                },
+                {
+                    accessorKey: "due_date",
+                    header: ({ column }) => <ColumnHeader column={column} title="Due Date" />,
+                },
+                actionsColumn(),
+            ]}
+        />
+    )
+}

apps/dashboard/app/(authenticated)/sales/job-cards/[id]/attachments/page.tsx

@@ -0,0 +1,166 @@
+"use client"
+
+import { useParams } from "next/navigation"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { useState, useRef } from "react"
+import { Plus, Trash2, FileIcon, ImageIcon, FileTextIcon } from "lucide-react"
+import { toast } from "sonner"
+
+import { useAuthApi } from "@/shared/useApi"
+import { confirm } from "@/shared/components/confirm-dialog"
+import { Button } from "@/shared/components/ui/button"
+import { Card, CardContent } from "@/shared/components/ui/card"
+import { JOB_CARD_ROUTES } from "@garage/api"
+
+type Attachment = {
+    id: number
+    file_name: string
+    url: string
+    mime_type?: string
+    created_at?: string
+}
+
+function getFileIcon(mimeType?: string) {
+    if (mimeType?.startsWith("image/")) return ImageIcon
+    if (mimeType?.includes("pdf")) return FileTextIcon
+    return FileIcon
+}
+
+export default function JobCardAttachmentsPage() {
+    const { id: jobCardId } = useParams<{ id: string }>()
+    const api = useAuthApi()
+    const queryClient = useQueryClient()
+    const fileInputRef = useRef<HTMLInputElement>(null)
+    const [isUploading, setIsUploading] = useState(false)
+
+    const queryKey = [JOB_CARD_ROUTES.INDEX, jobCardId, "attachments"]
+
+    const { data, isLoading } = useQuery({
+        queryKey,
+        queryFn: () => api.jobCards.show(jobCardId),
+    })
+
+    const jobCard = (data as any)?.data ?? data
+    const attachments: Attachment[] = jobCard?.documents ?? jobCard?.attachments ?? []
+
+    const deleteMutation = useMutation({
+        mutationFn: (attachmentId: number) =>
+            api.jobCards.deleteAttachment(jobCardId, attachmentId),
+        onSuccess: () => {
+            toast.success("Attachment deleted successfully.")
+            queryClient.invalidateQueries({ queryKey })
+        },
+        onError: () => {
+            toast.error("Failed to delete attachment.")
+        },
+    })
+
+    const handleDelete = async (attachment: Attachment) => {
+        const confirmed = await confirm({
+            title: "Delete Attachment",
+            description: `Are you sure you want to delete "${attachment.file_name}"?`,
+            confirmLabel: "Delete",
+            variant: "destructive",
+        })
+        if (confirmed) {
+            deleteMutation.mutate(attachment.id)
+        }
+    }
+
+    const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+        const files = e.target.files
+        if (!files || files.length === 0) return
+
+        setIsUploading(true)
+        const promise = api.jobCards.addAttachment(jobCardId, Array.from(files))
+        toast.promise(promise, {
+            loading: "Uploading attachment(s)...",
+            success: "Attachment(s) uploaded successfully",
+            error: "Failed to upload attachment(s)",
+        })
+
+        try {
+            await promise
+            queryClient.invalidateQueries({ queryKey })
+        } finally {
+            setIsUploading(false)
+            if (fileInputRef.current) {
+                fileInputRef.current.value = ""
+            }
+        }
+    }
+
+    return (
+        <div className="flex flex-col gap-4">
+            <div className="flex items-center justify-end">
+                <input
+                    ref={fileInputRef}
+                    type="file"
+                    multiple
+                    className="hidden"
+                    onChange={handleUpload}
+                />
+                <Button
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={isUploading}
+                >
+                    <Plus className="size-4" />
+                    {isUploading ? "Uploading..." : "Upload Attachment"}
+                </Button>
+            </div>
+
+            {isLoading ? (
+                <Card>
+                    <CardContent className="py-8 text-center text-muted-foreground">
+                        Loading attachments...
+                    </CardContent>
+                </Card>
+            ) : attachments.length === 0 ? (
+                <Card>
+                    <CardContent className="py-8 text-center text-muted-foreground">
+                        No attachments yet. Click "Upload Attachment" to add files.
+                    </CardContent>
+                </Card>
+            ) : (
+                <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+                    {attachments.map((attachment) => {
+                        const Icon = getFileIcon(attachment.mime_type)
+                        return (
+                            <Card key={attachment.id}>
+                                <CardContent className="flex items-center gap-3 p-4">
+                                    <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+                                        <Icon className="size-5" />
+                                    </div>
+                                    <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                                        <a
+                                            href={attachment.url}
+                                            target="_blank"
+                                            rel="noopener noreferrer"
+                                            className="truncate text-sm font-medium hover:underline"
+                                            title={attachment.file_name}
+                                        >
+                                            {attachment.file_name}
+                                        </a>
+                                        {attachment.created_at && (
+                                            <span className="text-xs text-muted-foreground">
+                                                {new Date(attachment.created_at).toLocaleDateString()}
+                                            </span>
+                                        )}
+                                    </div>
+                                    <Button
+                                        variant="ghost"
+                                        size="icon-sm"
+                                        onClick={() => handleDelete(attachment)}
+                                        title="Delete attachment"
+                                    >
+                                        <Trash2 className="size-4 text-destructive" />
+                                    </Button>
+                                </CardContent>
+                            </Card>
+                        )
+                    })}
+                </div>
+            )}
+        </div>
+    )
+}

apps/dashboard/app/(authenticated)/sales/job-cards/[id]/customer-remarks/page.tsx

@@ -0,0 +1,152 @@
+"use client"
+
+import { useParams } from "next/navigation"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { type ColumnDef } from "@tanstack/react-table"
+import { useState } from "react"
+import { Plus, Trash2 } from "lucide-react"
+import { toast } from "sonner"
+
+import { useAuthApi } from "@/shared/useApi"
+import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
+import { confirm } from "@/shared/components/confirm-dialog"
+import { Button } from "@/shared/components/ui/button"
+import { Card, CardContent } from "@/shared/components/ui/card"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
+import { JobCardRemarkForm } from "@/modules/job-cards/job-card-remark-form"
+
+type CustomerRemark = {
+    id: number
+    job_card_id?: number
+    remark?: string
+    created_at: string
+    updated_at: string
+}
+
+export default function CustomerRemarksPage() {
+    const { id: jobCardId } = useParams<{ id: string }>()
+    const api = useAuthApi()
+    const queryClient = useQueryClient()
+    const [dialogOpen, setDialogOpen] = useState(false)
+
+    const queryKey = ["job-card-remarks", jobCardId]
+
+    const { data, isLoading } = useQuery({
+        queryKey,
+        queryFn: async () => {
+            const result = await api.jobCards.show(jobCardId)
+            const d = (result as any)?.data ?? result
+            return d?.customer_remarks ?? []
+        },
+    })
+
+    const deleteMutation = useMutation({
+        mutationFn: () => api.jobCards.deleteCustomerRemark(jobCardId),
+        onSuccess: () => {
+            toast.success("Customer remark deleted successfully.")
+            queryClient.invalidateQueries({ queryKey })
+        },
+        onError: () => {
+            toast.error("Failed to delete customer remark.")
+        },
+    })
+
+    const handleDelete = async (remark: CustomerRemark) => {
+        const confirmed = await confirm({
+            title: "Delete Customer Remark",
+            description: "Are you sure you want to delete this remark?",
+            confirmLabel: "Delete",
+            variant: "destructive",
+        })
+        if (confirmed) {
+            deleteMutation.mutate()
+        }
+    }
+
+    const columns: ColumnDef<CustomerRemark>[] = [
+        {
+            accessorKey: "remark",
+            header: ({ column }) => <ColumnHeader column={column} title="Remark" />,
+            cell: ({ getValue }) => {
+                const val = getValue<string>()
+                return val || "—"
+            },
+        },
+        {
+            accessorKey: "created_at",
+            header: ({ column }) => <ColumnHeader column={column} title="Created" />,
+            cell: ({ getValue }) => {
+                const val = getValue<string>()
+                return val ? new Date(val).toLocaleDateString() : "—"
+            },
+        },
+        {
+            id: "actions",
+            header: () => <span className="sr-only">Actions</span>,
+            cell: ({ row }) => (
+                <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    onClick={() => handleDelete(row.original)}
+                    title="Delete remark"
+                >
+                    <Trash2 className="size-4 text-destructive" />
+                </Button>
+            ),
+            enableSorting: false,
+        },
+    ]
+
+    const remarks = Array.isArray(data) ? data : []
+
+    const pagination = {
+        page: 1,
+        pageSize: 100,
+        pageCount: 1,
+        total: remarks.length,
+    }
+
+    return (
+        <div className="flex flex-col gap-4">
+            <div className="flex items-center justify-end">
+                <Button onClick={() => setDialogOpen(true)}>
+                    <Plus className="size-4" />
+                    Add Customer Remark
+                </Button>
+            </div>
+
+            <Card>
+                <CardContent>
+                    <DataTable
+                        columns={columns}
+                        data={remarks}
+                        pagination={pagination}
+                        sorting={[]}
+                        onChange={() => {}}
+                        isLoading={isLoading}
+                    />
+                </CardContent>
+            </Card>
+
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>Add Customer Remark</DialogTitle>
+                    </DialogHeader>
+                    <JobCardRemarkForm
+                        jobCardId={jobCardId}
+                        onSuccess={() => {
+                            setDialogOpen(false)
+                            queryClient.invalidateQueries({ queryKey })
+                        }}
+                    />
+                </DialogContent>
+            </Dialog>
+        </div>
+    )
+}

apps/dashboard/app/(authenticated)/sales/job-cards/[id]/layout.tsx

@@ -0,0 +1,50 @@
+import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
+import { getServerApi } from '@garage/api/server'
+import { JobCardActions } from '@/modules/job-cards/job-card-actions'
+import { JobCardProvider } from '@/modules/job-cards/job-card-context'
+import { JobCardStatusStepper } from '@/modules/job-cards/job-card-status-stepper'
+import { ClipboardListIcon } from 'lucide-react'
+import React from 'react'
+
+export default async function JobCardDetailLayout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
+    const { id } = await props.params
+    const api = await getServerApi()
+    const jobCard = await api.jobCards.show(id)
+    const data = (jobCard as any)?.data ?? jobCard
+    const title = data?.title || 'Job Card Details'
+    const status = data?.status || 'draft'
+
+    return (
+        <JobCardProvider jobCard={{ id, label: title, status }}>
+            <DashboardDetailsPage
+                className='p-0 lg:p-0'
+                title={title}
+                description={data?.status ? `Status: ${data.status.split("_").map((w: string) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ")}` : undefined}
+                icon={<ClipboardListIcon className="size-5" />}
+                backHref="/sales/job-cards"
+                actions={<JobCardActions jobCardId={id} />}
+                subHeader={<JobCardStatusStepper jobCardId={id} />}
+                tabs={[
+                    {
+                        href: `/sales/job-cards/${id}`,
+                        label: 'Details'
+                    },
+                    {
+                        href: `/sales/job-cards/${id}/customer-remarks`,
+                        label: 'Customer Remarks'
+                    },
+                    {
+                        href: `/sales/job-cards/${id}/shop-recommendations`,
+                        label: 'Shop Recommendations'
+                    },
+                    {
+                        href: `/sales/job-cards/${id}/attachments`,
+                        label: 'Attachments'
+                    },
+                ]}
+            >
+                {props.children}
+            </DashboardDetailsPage>
+        </JobCardProvider>
+    )
+}

apps/dashboard/app/(authenticated)/sales/job-cards/[id]/page.tsx

@@ -0,0 +1,20 @@
+import { getServerApi } from '@garage/api/server'
+import { JobCardGeneralInfo } from '@/modules/job-cards/job-card-general-info'
+import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
+
+export default async function JobCardDetailPage(props: { params: Promise<{ id: string }> }) {
+    const { id } = await props.params
+    const api = await getServerApi()
+    const jobCard = await api.jobCards.show(id)
+    const data = (jobCard as any)?.data ?? jobCard
+
+    if (!data) {
+        return <div className="text-muted-foreground">Job card not found.</div>
+    }
+
+    return (
+        <DashboardPage header={null}>
+            <JobCardGeneralInfo jobCard={data} />
+        </DashboardPage>
+    )
+}

apps/dashboard/app/(authenticated)/sales/job-cards/[id]/shop-recommendations/page.tsx

@@ -0,0 +1,152 @@
+"use client"
+
+import { useParams } from "next/navigation"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { type ColumnDef } from "@tanstack/react-table"
+import { useState } from "react"
+import { Plus, Trash2 } from "lucide-react"
+import { toast } from "sonner"
+
+import { useAuthApi } from "@/shared/useApi"
+import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
+import { confirm } from "@/shared/components/confirm-dialog"
+import { Button } from "@/shared/components/ui/button"
+import { Card, CardContent } from "@/shared/components/ui/card"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
+import { JobCardRecommendationForm } from "@/modules/job-cards/job-card-recommendation-form"
+
+type ShopRecommendation = {
+    id: number
+    job_card_id?: number
+    recommendation?: string
+    created_at: string
+    updated_at: string
+}
+
+export default function ShopRecommendationsPage() {
+    const { id: jobCardId } = useParams<{ id: string }>()
+    const api = useAuthApi()
+    const queryClient = useQueryClient()
+    const [dialogOpen, setDialogOpen] = useState(false)
+
+    const queryKey = ["job-card-recommendations", jobCardId]
+
+    const { data, isLoading } = useQuery({
+        queryKey,
+        queryFn: async () => {
+            const result = await api.jobCards.show(jobCardId)
+            const d = (result as any)?.data ?? result
+            return d?.shop_recommendations ?? []
+        },
+    })
+
+    const deleteMutation = useMutation({
+        mutationFn: () => api.jobCards.deleteShopRecommendation(jobCardId),
+        onSuccess: () => {
+            toast.success("Shop recommendation deleted successfully.")
+            queryClient.invalidateQueries({ queryKey })
+        },
+        onError: () => {
+            toast.error("Failed to delete shop recommendation.")
+        },
+    })
+
+    const handleDelete = async (rec: ShopRecommendation) => {
+        const confirmed = await confirm({
+            title: "Delete Shop Recommendation",
+            description: "Are you sure you want to delete this recommendation?",
+            confirmLabel: "Delete",
+            variant: "destructive",
+        })
+        if (confirmed) {
+            deleteMutation.mutate()
+        }
+    }
+
+    const columns: ColumnDef<ShopRecommendation>[] = [
+        {
+            accessorKey: "recommendation",
+            header: ({ column }) => <ColumnHeader column={column} title="Recommendation" />,
+            cell: ({ getValue }) => {
+                const val = getValue<string>()
+                return val || "—"
+            },
+        },
+        {
+            accessorKey: "created_at",
+            header: ({ column }) => <ColumnHeader column={column} title="Created" />,
+            cell: ({ getValue }) => {
+                const val = getValue<string>()
+                return val ? new Date(val).toLocaleDateString() : "—"
+            },
+        },
+        {
+            id: "actions",
+            header: () => <span className="sr-only">Actions</span>,
+            cell: ({ row }) => (
+                <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    onClick={() => handleDelete(row.original)}
+                    title="Delete recommendation"
+                >
+                    <Trash2 className="size-4 text-destructive" />
+                </Button>
+            ),
+            enableSorting: false,
+        },
+    ]
+
+    const recommendations = Array.isArray(data) ? data : []
+
+    const pagination = {
+        page: 1,
+        pageSize: 100,
+        pageCount: 1,
+        total: recommendations.length,
+    }
+
+    return (
+        <div className="flex flex-col gap-4">
+            <div className="flex items-center justify-end">
+                <Button onClick={() => setDialogOpen(true)}>
+                    <Plus className="size-4" />
+                    Add Shop Recommendation
+                </Button>
+            </div>
+
+            <Card>
+                <CardContent>
+                    <DataTable
+                        columns={columns}
+                        data={recommendations}
+                        pagination={pagination}
+                        sorting={[]}
+                        onChange={() => {}}
+                        isLoading={isLoading}
+                    />
+                </CardContent>
+            </Card>
+
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>Add Shop Recommendation</DialogTitle>
+                    </DialogHeader>
+                    <JobCardRecommendationForm
+                        jobCardId={jobCardId}
+                        onSuccess={() => {
+                            setDialogOpen(false)
+                            queryClient.invalidateQueries({ queryKey })
+                        }}
+                    />
+                </DialogContent>
+            </Dialog>
+        </div>
+    )
+}

apps/dashboard/app/(authenticated)/sales/job-cards/page.tsx

@@ -0,0 +1,111 @@
+"use client"
+
+import { ResourcePage } from '@/shared/data-view/resource-page'
+import { ColumnHeader } from '@/shared/data-view/table-view'
+import FormDialog from '@/shared/components/form-dialog'
+import { JobCardForm } from '@/modules/job-cards/job-card-form'
+import { JOB_CARD_ROUTES } from '@garage/api'
+import type { JobCardsClient } from '@garage/api'
+import { ClipboardListIcon } from 'lucide-react'
+import { Badge } from '@/shared/components/ui/badge'
+import { useRouter } from 'next/navigation'
+
+type JobCardItem = {
+    id: number
+    title?: string
+    status?: string
+    check_in_date?: string
+    km_in?: number
+    created_at?: string
+}
+
+const statusColorMap: Record<string, string> = {
+    draft: "secondary",
+    check_in: "default",
+    in_progress: "default",
+    completed: "default",
+    invoiced: "outline",
+    cancelled: "destructive",
+}
+
+const formatStatus = (status?: string) => {
+    if (!status) return "—"
+    return status
+        .split("_")
+        .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+        .join(" ")
+}
+
+export default function JobCardsPage() {
+    const router = useRouter()
+
+    return (
+        <ResourcePage<JobCardsClient>
+            pageTitle="Job Cards"
+            routeKey={JOB_CARD_ROUTES.INDEX}
+            getClient={(api) => api.jobCards}
+            onRowClick={(row) => router.push(`/sales/job-cards/${row.id}`)}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Job Card">
+                        {(resourceId) => (
+                            <JobCardForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
+            columns={({ actionsColumn }) => [
+                {
+                    accessorKey: "title",
+                    header: ({ column }) => <ColumnHeader column={column} title="Title" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as JobCardItem
+                        return (
+                            <div className="flex items-center gap-2">
+                                <ClipboardListIcon className="text-muted-foreground h-4 w-4" />
+                                <span>{item.title}</span>
+                            </div>
+                        )
+                    },
+                },
+                {
+                    accessorKey: "status",
+                    header: ({ column }) => <ColumnHeader column={column} title="Status" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as JobCardItem
+                        return (
+                            <Badge variant={statusColorMap[item.status ?? ""] as any ?? "outline"}>
+                                {formatStatus(item.status)}
+                            </Badge>
+                        )
+                    },
+                },
+                {
+                    accessorKey: "check_in_date",
+                    header: ({ column }) => <ColumnHeader column={column} title="Check-in Date" />,
+                },
+                {
+                    accessorKey: "km_in",
+                    header: ({ column }) => <ColumnHeader column={column} title="KM In" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as JobCardItem
+                        return item.km_in ? Number(item.km_in).toLocaleString() : "—"
+                    },
+                },
+                {
+                    accessorKey: "created_at",
+                    header: ({ column }) => <ColumnHeader column={column} title="Created" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as JobCardItem
+                        return item.created_at ? new Date(item.created_at).toLocaleDateString() : "—"
+                    },
+                },
+                actionsColumn(),
+            ]}
+        />
+    )
+}

apps/dashboard/app/(authenticated)/sales/payment-received/page.tsx

@@ -0,0 +1,166 @@
+"use client"
+
+import { ResourcePage } from "@/shared/data-view/resource-page"
+import { ColumnHeader } from "@/shared/data-view/table-view"
+import FormDialog from "@/shared/components/form-dialog"
+import { PaymentReceivedForm } from "@/modules/payment-received/payment-received-form"
+import { PAYMENT_ROUTES } from "@garage/api"
+import {
+    BadgeDollarSignIcon,
+    CalendarIcon,
+    CreditCardIcon,
+    HashIcon,
+    UserIcon,
+    ClipboardListIcon,
+} from "lucide-react"
+
+type PaymentReceivedItem = {
+    id: number
+    payment_number?: string
+    customer_name?: string
+    job_card_name?: string
+    job_card_number?: string
+    payment_mode_name?: string
+    amount_received?: string | number
+    payment_date?: string
+    note?: string
+    status?: string
+    created_at?: string
+}
+
+export default function PaymentReceivedPage() {
+    return (
+        <ResourcePage<{ list(query?: any): Promise<any>; destroy(id: string): Promise<any> }>
+            pageTitle="Payments Received"
+            routeKey={PAYMENT_ROUTES.RECEIVED}
+            getClient={(api) => ({
+                list: (query?: any) => api.payments.listReceived(query),
+                destroy: (id: string) => api.payments.destroyReceived(id),
+            })}
+            headerProps={({ invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Record Payment">
+                        {(resourceId) => (
+                            <PaymentReceivedForm
+                                resourceId={resourceId}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
+            columns={({ actionsColumn }) => [
+                {
+                    accessorKey: "payment_number",
+                    header: ({ column }) => <ColumnHeader column={column} title="Payment #" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as PaymentReceivedItem
+                        return (
+                            <div className="flex items-center gap-2">
+                                <HashIcon className="h-4 w-4 text-muted-foreground" />
+                                <span className="font-medium">{item.payment_number || "—"}</span>
+                            </div>
+                        )
+                    },
+                },
+                {
+                    accessorKey: "customer_name",
+                    header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as PaymentReceivedItem
+                        return (
+                            <div className="flex items-center gap-2">
+                                <UserIcon className="h-4 w-4 text-muted-foreground" />
+                                <span>{item.customer_name || "—"}</span>
+                            </div>
+                        )
+                    },
+                },
+                {
+                    accessorKey: "job_card_name",
+                    header: ({ column }) => <ColumnHeader column={column} title="Job Card" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as PaymentReceivedItem
+                        const label = item.job_card_number || item.job_card_name
+                        return (
+                            <div className="flex items-center gap-2">
+                                <ClipboardListIcon className="h-4 w-4 text-muted-foreground" />
+                                <span>{label || "—"}</span>
+                            </div>
+                        )
+                    },
+                },
+                {
+                    accessorKey: "amount_received",
+                    header: ({ column }) => <ColumnHeader column={column} title="Amount" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as PaymentReceivedItem
+                        const amount = item.amount_received
+                            ? Number(item.amount_received).toLocaleString(undefined, {
+                                  minimumFractionDigits: 2,
+                                  maximumFractionDigits: 2,
+                              })
+                            : "—"
+                        return (
+                            <div className="flex items-center gap-2">
+                                <BadgeDollarSignIcon className="h-4 w-4 text-emerald-600" />
+                                <span className="font-semibold text-emerald-700 dark:text-emerald-400">
+                                    {amount}
+                                </span>
+                            </div>
+                        )
+                    },
+                },
+                {
+                    accessorKey: "payment_mode_name",
+                    header: ({ column }) => <ColumnHeader column={column} title="Payment Mode" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as PaymentReceivedItem
+                        return (
+                            <div className="flex items-center gap-2">
+                                <CreditCardIcon className="h-4 w-4 text-muted-foreground" />
+                                <span className="capitalize">{item.payment_mode_name || "—"}</span>
+                            </div>
+                        )
+                    },
+                },
+                {
+                    accessorKey: "payment_date",
+                    header: ({ column }) => <ColumnHeader column={column} title="Date" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as PaymentReceivedItem
+                        const formatted = item.payment_date
+                            ? new Date(item.payment_date).toLocaleDateString(undefined, {
+                                  year: "numeric",
+                                  month: "short",
+                                  day: "numeric",
+                              })
+                            : "—"
+                        return (
+                            <div className="flex items-center gap-2">
+                                <CalendarIcon className="h-4 w-4 text-muted-foreground" />
+                                <span>{formatted}</span>
+                            </div>
+                        )
+                    },
+                },
+                {
+                    accessorKey: "note",
+                    header: () => <span>Note</span>,
+                    enableSorting: false,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as PaymentReceivedItem
+                        const note = item.note
+                        if (!note) return <span className="text-muted-foreground">—</span>
+                        return (
+                            <span className="max-w-50 truncate block" title={note}>
+                                {note}
+                            </span>
+                        )
+                    },
+                },
+                actionsColumn(),
+            ]}
+        />
+    )
+}

apps/dashboard/app/(authenticated)/sales/vehicles/[id]/documents/page.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import { useParams } from "next/navigation"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { type ColumnDef } from "@tanstack/react-table"
+import { useState } from "react"
+import { Plus, Trash2 } from "lucide-react"
+import { toast } from "sonner"
+
+import { useAuthApi } from "@/shared/useApi"
+import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
+import { confirm } from "@/shared/components/confirm-dialog"
+import { Button } from "@/shared/components/ui/button"
+import { Card, CardContent } from "@/shared/components/ui/card"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
+import { VehicleDocumentForm } from "@/modules/vehicles/vehicle-document-form"
+
+type VehicleDocument = {
+    id: number
+    name: string
+    created_at: string
+    updated_at: string
+}
+
+export default function VehicleDocumentsPage() {
+    const { id: vehicleId } = useParams<{ id: string }>()
+    const api = useAuthApi()
+    const queryClient = useQueryClient()
+    const [dialogOpen, setDialogOpen] = useState(false)
+
+    const queryKey = ["vehicle-documents", vehicleId]
+
+    const { data, isLoading } = useQuery({
+        queryKey,
+        queryFn: () => api.vehicleDocuments.listDocuments({ vehicle_id: vehicleId }),
+    })
+
+    const deleteMutation = useMutation({
+        mutationFn: (id: number) => api.vehicleDocuments.destroyDocument(String(id)),
+        onSuccess: () => {
+            toast.success("Document deleted successfully.")
+            queryClient.invalidateQueries({ queryKey })
+        },
+        onError: () => {
+            toast.error("Failed to delete document.")
+        },
+    })
+
+    const handleDelete = async (doc: VehicleDocument) => {
+        const confirmed = await confirm({
+            title: "Delete Document",
+            description: `Are you sure you want to delete "${doc.name}"?`,
+            confirmLabel: "Delete",
+            variant: "destructive",
+        })
+        if (confirmed) {
+            deleteMutation.mutate(doc.id)
+        }
+    }
+
+    const columns: ColumnDef<VehicleDocument>[] = [
+        {
+            accessorKey: "name",
+            header: ({ column }) => <ColumnHeader column={column} title="Name" />,
+        },
+        {
+            accessorKey: "created_at",
+            header: ({ column }) => <ColumnHeader column={column} title="Uploaded At" />,
+            cell: ({ getValue }) => {
+                const val = getValue<string>()
+                return val ? new Date(val).toLocaleDateString() : "—"
+            },
+        },
+        {
+            id: "actions",
+            header: () => <span className="sr-only">Actions</span>,
+            cell: ({ row }) => (
+                <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    onClick={() => handleDelete(row.original)}
+                    title="Delete document"
+                >
+                    <Trash2 className="size-4 text-destructive" />
+                </Button>
+            ),
+            enableSorting: false,
+        },
+    ]
+
+    const documents = (data as any)?.data ?? []
+    const meta = (data as any)?.meta
+
+    const pagination = {
+        page: meta?.current_page ?? 1,
+        pageSize: meta?.per_page ?? 15,
+        pageCount: meta?.last_page ?? 1,
+        total: meta?.total ?? 0,
+    }
+
+    return (
+        <div className="flex flex-col gap-4">
+            <div className="flex items-center justify-end">
+                <Button onClick={() => setDialogOpen(true)}>
+                    <Plus className="size-4" />
+                    Upload Document
+                </Button>
+            </div>
+
+            <Card>
+                <CardContent>
+                    <DataTable
+                        columns={columns}
+                        data={documents}
+                        pagination={pagination}
+                        sorting={[]}
+                        onChange={() => {}}
+                        isLoading={isLoading}
+                    />
+                </CardContent>
+            </Card>
+
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent className="min-w-xl">
+                    <DialogHeader>
+                        <DialogTitle>Upload Document</DialogTitle>
+                    </DialogHeader>
+                    <VehicleDocumentForm
+                        vehicleId={vehicleId}
+                        onSuccess={() => {
+                            queryClient.invalidateQueries({ queryKey })
+                            setDialogOpen(false)
+                        }}
+                    />
+                </DialogContent>
+            </Dialog>
+        </div>
+    )
+}

apps/dashboard/app/(authenticated)/sales/vehicles/[id]/estimates/page.tsx

@@ -0,0 +1,102 @@
+
+"use client"
+
+import { use } 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 { EstimateForm } from '@/modules/estimates/estimate-form'
+import { ESTIMATE_ROUTES } from '@garage/api'
+import type { EstimatesClient } from '@garage/api'
+import { FileTextIcon } from 'lucide-react'
+import { useVehicle } from '@/modules/vehicles/vehicle-context'
+
+type EstimateItem = {
+    id: number
+    title?: string
+    estimate_number?: string
+    date?: string
+    customer_name?: string
+    has_insurance?: boolean
+    created_at?: string
+}
+
+export default function VehicleEstimatesPage({ params }: { params: Promise<{ id: string }> }) {
+    const { id: vehicleId } = use(params)
+    const vehicle = useVehicle()
+
+    return (
+        <>
+        <ResourcePage<EstimatesClient>
+            toolbar={({ invalidateQuery, selectedItem, closeDialog }) => (
+                <FormDialog title="Estimate">
+                    {(resourceId) => (
+                        <EstimateForm
+                            resourceId={resourceId}
+                            initialData={{
+                                vehicle: vehicle ? { value: vehicle.id, label: vehicle.label } : null,
+                            }}
+                            onSuccess={() => {
+                                closeDialog();
+                                invalidateQuery();
+                            }}
+                        />
+                    )}
+                </FormDialog>
+            )
+            }
+            pageTitle="Vehicle Estimates"
+            routeKey={ESTIMATE_ROUTES.INDEX}
+            getClient={(api) => api.estimates}
+            extraParams={{ vehicle_id: vehicleId }}
+            header={
+                null
+            }
+            columns={({ actionsColumn }) => [
+                {
+                    accessorKey: "title",
+                    header: ({ column }) => <ColumnHeader column={column} title="Title" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as EstimateItem
+                        return (
+                            <div className="flex items-center gap-2">
+                                <FileTextIcon className="text-muted-foreground h-4 w-4" />
+                                <span>{item.title}</span>
+                            </div>
+                        )
+                    },
+                },
+                {
+                    accessorKey: "estimate_number",
+                    header: ({ column }) => <ColumnHeader column={column} title="Estimate #" />,
+                },
+                {
+                    accessorKey: "customer_name",
+                    header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
+                },
+                {
+                    accessorKey: "date",
+                    header: ({ column }) => <ColumnHeader column={column} title="Date" />,
+                },
+                {
+                    accessorKey: "has_insurance",
+                    header: ({ column }) => <ColumnHeader column={column} title="Insurance" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as EstimateItem
+                        return item.has_insurance ? "Yes" : "No"
+                    },
+                },
+                {
+                    accessorKey: "created_at",
+                    header: ({ column }) => <ColumnHeader column={column} title="Created" />,
+                    cell: ({ row }) => {
+                        const item = row.original as unknown as EstimateItem
+                        return item.created_at ? new Date(item.created_at).toLocaleDateString() : "—"
+                    },
+                },
+                actionsColumn(),
+            ]}
+        />
+        </>
+    )
+}

apps/dashboard/app/(authenticated)/sales/vehicles/[id]/layout.tsx

@@ -0,0 +1,50 @@
+import { DashboardDetailsPageLayoutProps, DashboardDetailsPage } from '@/base/components/layout/dashboard'
+import { getServerApi } from '@garage/api/server'
+import { VehicleActions } from '@/modules/vehicles/vehicle-actions'
+import { Car } from 'lucide-react'
+import React from 'react'
+import { CONSTANTS } from '@/config/constants'
+
+export default async function layout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
+    const { id } = await props.params
+    const api = await getServerApi()
+    const vehicle = await api.vehicles.getById(id)
+    const title = `${vehicle.data?.make || ''} ${vehicle.data?.model || ''}`.trim() || 'Vehicle Details'
+    return (
+        <>
+            <DashboardDetailsPage
+                className='p-0 lg:p-0'
+                avatarSrc={vehicle.data?.image_url || ""}
+                // avatarSrc={vehicle.data?.image_url || ""}
+                title={title}
+                description={vehicle.data?.license_plate ? `License Plate: ${vehicle.data.license_plate}` : undefined}
+                backHref="/sales/vehicles"
+                actions={<VehicleActions vehicleId={id} />}
+                tabs={[
+                    {
+                        href: `/sales/vehicles/${id}`,
+                        label: 'Details'
+                    },
+                    {
+                        href: `/sales/vehicles/${id}/owners`,
+                        label: 'Owners'
+                    },
+                    {
+                        href: `/sales/vehicles/${id}/documents`,
+                        label: "Documents"
+                    },
+                    {
+                        href: `/sales/vehicles/${id}/mileage`,
+                        label: "Mileage"
+                    },
+                    {
+                        href: `/sales/vehicles/${id}/estimates`,
+                        label: "Estimates"
+                    }
+                ]}
+            >
+                {props.children}
+            </DashboardDetailsPage>
+        </>
+    )
+}

apps/dashboard/app/(authenticated)/sales/vehicles/[id]/mileage/page.tsx

@@ -0,0 +1,191 @@
+"use client"
+
+import { useParams } from "next/navigation"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { type ColumnDef } from "@tanstack/react-table"
+import { useState } from "react"
+import { Plus, Pencil, Trash2, MoreHorizontal } from "lucide-react"
+import { toast } from "sonner"
+
+import { useAuthApi } from "@/shared/useApi"
+import { DataTable, ColumnHeader } from "@/shared/data-view/table-view"
+import { confirm } from "@/shared/components/confirm-dialog"
+import { Button } from "@/shared/components/ui/button"
+import { Card, CardContent } from "@/shared/components/ui/card"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu"
+import { MileageForm } from "@/modules/vehicles/mileage-form"
+import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
+
+type MileageRecord = {
+    id: number
+    name: string
+    created_at: string
+    updated_at: string
+}
+
+export default function VehicleMileagePage() {
+    const { id: vehicleId } = useParams<{ id: string }>()
+    const api = useAuthApi()
+    const queryClient = useQueryClient()
+    const [dialogOpen, setDialogOpen] = useState(false)
+    const [editItem, setEditItem] = useState<MileageRecord | null>(null)
+
+    const queryKey = ["vehicle-mileage", vehicleId]
+
+    const { data, isLoading } = useQuery({
+        queryKey,
+        queryFn: () => api.vehicleDocuments.listMileage({ vehicle_id: vehicleId }),
+    })
+
+    const deleteMutation = useMutation({
+        mutationFn: (id: number) => {
+            const promise = api.vehicleDocuments.destroyMileage(String(id))
+            toast.promise(promise, {
+                loading: "Deleting...",
+                success: "Mileage record deleted successfully.",
+                error: "Failed to delete mileage record.",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey })
+        },
+    })
+
+    const handleDelete = async (record: MileageRecord) => {
+        const confirmed = await confirm({
+            title: "Delete Mileage Record",
+            description: `Are you sure you want to delete this mileage record?`,
+            confirmLabel: "Delete",
+            variant: "destructive",
+        })
+        if (confirmed) {
+            deleteMutation.mutate(record.id)
+        }
+    }
+
+    const handleEdit = (record: MileageRecord) => {
+        setEditItem(record)
+        setDialogOpen(true)
+    }
+
+    const handleCreate = () => {
+        setEditItem(null)
+        setDialogOpen(true)
+    }
+
+    const columns: ColumnDef<MileageRecord>[] = [
+        {
+            accessorKey: "name",
+            header: ({ column }) => <ColumnHeader column={column} title="Mileage" />,
+        },
+        {
+            accessorKey: "created_at",
+            header: ({ column }) => <ColumnHeader column={column} title="Recorded At" />,
+            cell: ({ getValue }) => {
+                const val = getValue<string>()
+                return val ? new Date(val).toLocaleDateString() : "—"
+            },
+        },
+        {
+            id: "actions",
+            header: () => <span className="sr-only">Actions</span>,
+            cell: ({ row }) => (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon-sm">
+                            <MoreHorizontal className="size-4" />
+                            <span className="sr-only">Open menu</span>
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuItem onClick={() => handleEdit(row.original)}>
+                            <Pencil className="size-3.5 text-muted-foreground" />
+                            Edit
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                            variant="destructive"
+                            onClick={() => handleDelete(row.original)}
+                        >
+                            <Trash2 className="size-3.5" />
+                            Delete
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            ),
+            enableSorting: false,
+        },
+    ]
+
+    const records = (data as any)?.data ?? []
+    const meta = (data as any)?.meta
+
+    const pagination = {
+        page: meta?.current_page ?? 1,
+        pageSize: meta?.per_page ?? 15,
+        pageCount: meta?.last_page ?? 1,
+        total: meta?.total ?? 0,
+    }
+
+    return (
+        <div className="flex flex-col gap-4">
+           
+    
+        <DashboardPage
+        header={null}    
+        toolbar={
+              <Button onClick={handleCreate}>
+                    <Plus className="size-4" />
+                    Add Mileage
+                </Button>
+        }
+        title='Milage'
+        >
+
+            <Card>
+                <CardContent>
+                    <DataTable
+                        columns={columns}
+                        data={records}
+                        pagination={pagination}
+                        sorting={[]}
+                        onChange={() => {}}
+                        isLoading={isLoading}
+                    />
+                </CardContent>
+            </Card>
+        </DashboardPage>
+
+            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+                <DialogContent className="min-w-md">
+                    <DialogHeader>
+                        <DialogTitle>
+                            {editItem ? "Edit Mileage" : "Add Mileage"}
+                        </DialogTitle>
+                    </DialogHeader>
+                    <MileageForm
+                        vehicleId={vehicleId}
+                        resourceId={editItem ? String(editItem.id) : null}
+                        initialData={editItem}
+                        onSuccess={() => {
+                            queryClient.invalidateQueries({ queryKey })
+                            setDialogOpen(false)
+                            setEditItem(null)
+                        }}
+                    />
+                </DialogContent>
+            </Dialog>
+        </div>
+    )
+}

apps/dashboard/app/(authenticated)/sales/vehicles/[id]/owners/page.tsx

@@ -0,0 +1,240 @@
+"use client"
+
+import { useParams } from "next/navigation"
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
+import { type ColumnDef } from "@tanstack/react-table"
+import { useState } from "react"
+import { Unlink, Plus, Loader2 } from "lucide-react"
+import { toast } from "sonner"
+
+import { useAuthApi } from "@/shared/useApi"
+import { DataTable } from "@/shared/data-view/table-view"
+import { ColumnHeader } from "@/shared/data-view/table-view"
+import { confirm } from "@/shared/components/confirm-dialog"
+import { Button } from "@/shared/components/ui/button"
+import { Card, CardContent } from "@/shared/components/ui/card"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from "@/shared/components/ui/dialog"
+import { RhfAsyncSelectField } from "@/shared/components/form"
+import { Rhform } from "@/shared/components/form"
+import { useForm } from "react-hook-form"
+import { TableCell, TableRow } from "@/shared/components/ui/table"
+import { ApiResponse, CustomersClient } from "@garage/api"
+import { paths } from "@garage/api/types"
+import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
+
+type Owner = {
+    id: number
+    name: string
+    created_at: string
+    updated_at: string
+}
+
+const mapCustomerOption = (item: any) => ({
+    value: String(item.id),
+    label: `${item.first_name ?? ""} ${item.last_name ?? ""}`.trim() || item.name || `Customer #${item.id}`,
+})
+
+const STORE_OBJECT = {
+    getOptionValue: (o: any) => o,
+    getOptionLabel: (o: any) => o.label,
+}
+
+export default function VehicleOwnersPage() {
+    const { id: vehicleId } = useParams<{ id: string }>()
+    const api = useAuthApi()
+    const queryClient = useQueryClient()
+    const [linkDialogOpen, setLinkDialogOpen] = useState(false)
+
+    const queryKey = ["vehicle-owners", vehicleId]
+
+    const { data, isLoading } = useQuery({
+        queryKey,
+        queryFn: () => api.vehicles.getOwners(vehicleId),
+    })
+
+    const unlinkMutation = useMutation({
+        mutationFn: (customerId: number) =>
+            api.vehicles.unlinkCustomer({ customer_id: customerId, vehicle_id: Number(vehicleId) }),
+        onSuccess: () => {
+            toast.success("Owner unlinked successfully.")
+            queryClient.invalidateQueries({ queryKey })
+        },
+        onError: () => {
+            toast.error("Failed to unlink owner.")
+        },
+    })
+
+    const handleUnlink = async (owner: Owner) => {
+        const confirmed = await confirm({
+            title: "Unlink Owner",
+            description: `Are you sure you want to unlink "${owner.name}" from this vehicle?`,
+            confirmLabel: "Unlink",
+            variant: "destructive",
+        })
+        if (confirmed) {
+            unlinkMutation.mutate(owner.id)
+        }
+    }
+
+    const columns: ColumnDef<any>[] = [
+        {
+            accessorKey: "first_name",
+            header: ({ column }) => <ColumnHeader column={column} title="Name" />,
+        },
+        {
+            accessorKey: "phone",
+            header: ({ column }) => <ColumnHeader column={column} title="Phone" />,
+        },
+        {
+            accessorKey: "created_at",
+            header: ({ column }) => <ColumnHeader column={column} title="Linked At" />,
+            cell: ({ getValue }) => {
+                const val = getValue<string>()
+                return val ? new Date(val).toLocaleDateString() : "—"
+            },
+        },
+        {
+            id: "actions",
+            header: () => <span className="sr-only">Actions</span>,
+            cell: ({ row }) => (
+                <Button
+                    variant="ghost"
+                    size="icon-sm"
+                    onClick={() => handleUnlink(row.original)}
+                    title="Unlink owner"
+                >
+                    <Unlink className="size-4 text-destructive" />
+                </Button>
+            ),
+            enableSorting: false,
+        },
+    ]
+
+    const owners = (data as any)?.data ?? []
+
+
+    // [BackendIssue] [FrontendWorkaround] : pagination should be replaced with "meta" property 
+    const meta = (data as any)?.pagination
+
+    const pagination = {
+        page: meta?.current_page ?? 1,
+        pageSize: meta?.per_page ?? 15,
+        pageCount: meta?.last_page ?? 1,
+        total: meta?.total ?? 0,
+    }
+
+    return (
+        <DashboardPage title="Owners" header={null} toolbar={
+            <Button className="w-full" size={'lg'} onClick={() => setLinkDialogOpen(true)}>
+                <Plus />
+                Add Owner
+            </Button>
+        }>
+
+            <Card>
+                <CardContent>
+
+                    <DataTable
+                        columns={columns}
+                        data={owners}
+                        pagination={pagination}
+                        sorting={[]}
+
+                        onChange={() => { }}
+                        isLoading={isLoading}
+                    />
+
+                    <LinkOwnerDialog
+                        vehicleId={vehicleId}
+                        open={linkDialogOpen}
+                        onOpenChange={setLinkDialogOpen}
+                        onSuccess={() => {
+                            queryClient.invalidateQueries({ queryKey })
+                            setLinkDialogOpen(false)
+                        }}
+                    />
+                </CardContent>
+            </Card>
+        </DashboardPage >
+    )
+}
+
+function LinkOwnerDialog({
+    vehicleId,
+    open,
+    onOpenChange,
+    onSuccess,
+}: {
+    vehicleId: string
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    onSuccess: () => void
+}) {
+    const api = useAuthApi()
+
+    const form = useForm<{ customer: { value: string; label: string } | null }>({
+        defaultValues: { customer: null },
+    })
+
+    const linkMutation = useMutation({
+        mutationFn: (customerId: number) =>
+            api.vehicles.linkCustomer({ customer_id: customerId, vehicle_id: Number(vehicleId) }),
+        onSuccess: () => {
+            toast.success("Owner linked successfully.")
+            form.reset()
+            onSuccess()
+        },
+        onError: () => {
+            toast.error("Failed to link owner.")
+        },
+    })
+
+    const handleSubmit = (values: { customer: { value: string; label: string } | null }) => {
+        if (!values.customer) return
+        linkMutation.mutate(Number(values.customer.value))
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="min-w-md">
+                <DialogHeader>
+                    <DialogTitle>Add Owner</DialogTitle>
+                </DialogHeader>
+                <Rhform form={form} onSubmit={handleSubmit}>
+                    <div className="flex flex-col gap-4">
+                        <RhfAsyncSelectField
+                            name="customer"
+                            label="Customer"
+                            placeholder="Search customers..."
+                            queryKey={["customers-lookup"]}
+                            listFn={() => api.customers.list()}
+                            mapOption={mapCustomerOption}
+                            {...STORE_OBJECT}
+                        />
+                        <div className="flex justify-end gap-2">
+                            <Button
+                                type="button"
+                                variant="outline"
+                                onClick={() => onOpenChange(false)}
+                            >
+                                Cancel
+                            </Button>
+                            <Button
+                                type="submit"
+                                disabled={linkMutation.isPending || !form.watch("customer")}
+                            >
+                                {linkMutation.isPending && <Loader2 className="size-4 animate-spin" />}
+                                Link Owner
+                            </Button>
+                        </div>
+                    </div>
+                </Rhform>
+            </DialogContent>
+        </Dialog>
+    )
+}

apps/dashboard/app/(authenticated)/sales/vehicles/[id]/page.tsx

@@ -0,0 +1,18 @@
+
+import { getServerApi } from '@garage/api/server'
+import { VehicleGeneralInfo } from '@/modules/vehicles/vehicle-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 vehicle = await api.vehicles.getById(id)
+
+  if (!vehicle.data) {
+    return <div className="text-muted-foreground">Vehicle not found.</div>
+  }
+
+   return <DashboardPage header={null}>
+    <VehicleGeneralInfo vehicle={vehicle.data} />
+  </DashboardPage>
+}

apps/dashboard/app/(authenticated)/sales/vehicles/page.tsx

@@ -1,21 +1,35 @@
 "use client"
 
+import { useRouter } from 'next/navigation'
 import { ResourcePage } from '@/shared/data-view/resource-page'
 import { ColumnHeader } from '@/shared/data-view/table-view'
+import FormDialog from '@/shared/components/form-dialog'
 import { VehicleForm } from '@/modules/vehicles/vehicle-form'
 import { VEHICLE_ROUTES } from '@garage/api'
 import type { VehiclesClient } from '@garage/api'
 import { CarIcon } from 'lucide-react'
 
 export default function VehiclesPage() {
+    const router = useRouter()
     return (
         <ResourcePage<VehiclesClient>
             pageTitle="Vehicles"
-            title="Vehicle"
             routeKey={VEHICLE_ROUTES.INDEX}
             getClient={(api) => api.vehicles}
-
-            
+            onRowClick={(row) => router.push(`/sales/vehicles/${(row as any).id}`)}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Vehicle">
+                        {(resourceId) => (
+                            <VehicleForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
             columns={({ actionsColumn }) => [
                 {
                     accessorKey: "name",
@@ -86,13 +100,6 @@ export default function VehiclesPage() {
                 },
                 actionsColumn(),
             ]}
-            renderForm={({ resourceId, initialData, onSuccess }) => (
-                <VehicleForm
-                    resourceId={resourceId}
-                    initialData={initialData}
-                    onSuccess={onSuccess}
-                />
-            )}
         />
     )
 }

apps/dashboard/app/(authenticated)/settings/shop-type/page.tsx

@@ -2,6 +2,7 @@
 
 import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
+import FormDialog from "@/shared/components/form-dialog"
 import { ShopTypeForm } from "@/modules/settings/shop-type/shop-type-form"
 import { SHOP_TYPE_ROUTES } from "@garage/api"
 import type { ShopTypesClient } from "@garage/api"
@@ -11,9 +12,21 @@ export default function ShopTypesPage() {
     return (
         <ResourcePage<ShopTypesClient>
             pageTitle="Shop Types"
-            title="Shop Type"
             routeKey={SHOP_TYPE_ROUTES.INDEX}
             getClient={(api) => api.shopTypes}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Shop Type">
+                        {(resourceId) => (
+                            <ShopTypeForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
             columns={({ actionsColumn }) => [
                 {
                     accessorKey: "title",
@@ -42,13 +55,6 @@ export default function ShopTypesPage() {
                 },
                 actionsColumn(),
             ]}
-            renderForm={({ resourceId, initialData, onSuccess }) => (
-                <ShopTypeForm
-                    resourceId={resourceId}
-                    initialData={initialData}
-                    onSuccess={onSuccess}
-                />
-            )}
         />
     )
 }

apps/dashboard/app/(authenticated)/settings/tax-rates/page.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import { TaxForm } from "@/modules/settings/tax-rates/tax-form"
+import { ResourcePage } from "@/shared/data-view/resource-page"
+import { ColumnHeader } from "@/shared/data-view/table-view"
+import FormDialog from "@/shared/components/form-dialog"
+ import { TAX_ROUTES } from "@garage/api"
+import type { TaxesClient } from "@garage/api"
+import { CheckIcon, XIcon } from "lucide-react"
+
+export default function TaxesPage() {
+    return (
+        <ResourcePage<TaxesClient>
+            pageTitle="Tax & Rates"
+            routeKey={TAX_ROUTES.INDEX}
+            getClient={(api) => api.taxes}
+            headerProps={({ selectedItem, invalidateQuery }) => ({
+                actions: (
+                    <FormDialog title="Tax">
+                        {(resourceId) => (
+                            <TaxForm
+                                resourceId={resourceId}
+                                initialData={selectedItem}
+                                onSuccess={invalidateQuery}
+                            />
+                        )}
+                    </FormDialog>
+                ),
+            })}
+            columns={({ actionsColumn }) => [
+                {
+                    accessorKey: "title",
+                    header: ({ column }) => <ColumnHeader column={column} title="Title" />,
+                },
+                {
+                    accessorKey: "rate",
+                    header: ({ column }) => <ColumnHeader column={column} title="Rate (%)" />,
+                    cell: ({ row }) => `${(row.original as any).rate ?? 0}%`,
+                },
+                {
+                    accessorKey: "note",
+                    header: ({ column }) => <ColumnHeader column={column} title="Note" />,
+                    cell: ({ row }) => (
+                        <span className="text-muted-foreground line-clamp-1">
+                            {(row.original as any).note ?? "—"}
+                        </span>
+                    ),
+                },
+                {
+                    accessorKey: "is_default",
+                    header: ({ column }) => <ColumnHeader column={column} title="Default" />,
+                    cell: ({ row }) =>
+                        (row.original as any).is_default
+                            ? <CheckIcon className="h-4 w-4 text-green-600" />
+                            : <XIcon className="h-4 w-4 text-muted-foreground" />,
+                },
+                actionsColumn(),
+            ]}
+        />
+    )
+}

apps/dashboard/base/components/layout/dashboard/dashboard-details-page-layout.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import React from "react"
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { cn } from "@/shared/lib/utils"
+import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar"
+import { Button } from "@/shared/components/ui/button"
+import { ArrowLeft } from "lucide-react"
+import { DashboardHeader } from "./dashboard-header"
+
+type Tab = {
+  /** URL path this tab navigates to */
+  href: string
+  label: string
+}
+
+type DashboardDetailsPageLayoutProps = {
+  /** Primary title displayed in the header */
+  title: string
+  /** Secondary text below the title */
+  description?: string
+  /** Avatar image URL */
+  avatarSrc?: string
+  /** Fallback text for the avatar (e.g. initials) */
+  avatarFallback?: string
+  /** Icon element rendered instead of avatar when no avatar is provided */
+  icon?: React.ReactNode
+  /** Action buttons rendered on the right side of the header */
+  actions?: React.ReactNode
+  /** Optional back navigation URL */
+  backHref?: string
+  /** Content rendered between the header and tabs */
+  subHeader?: React.ReactNode
+  /** Route-based tab definitions */
+  tabs?: Tab[]
+  /** Content from the active route (Next.js children) */
+  children?: React.ReactNode
+  className?: string
+}
+
+export default function DashboardDetailsPageLayout({
+  title,
+  description,
+  avatarSrc,
+  avatarFallback,
+  icon,
+  actions,
+  backHref,
+  subHeader,
+  tabs,
+  children,
+  className,
+}: DashboardDetailsPageLayoutProps) {
+  const pathname = usePathname()
+
+  return (
+    <div className={cn("flex flex-col h-full ")}>
+        
+      {/* Header */}
+      <div className="flex items-center justify-between gap-4 px-4 py-4 lg:px-6 bg-card">
+        <div className="flex items-center gap-3">
+          {backHref && (
+            <Button variant="ghost" size="icon" asChild>
+              <Link href={backHref}>
+                <ArrowLeft className="size-4" />
+              </Link>
+            </Button>
+          )}
+          {(avatarSrc || avatarFallback) && (
+            <Avatar size="lg">
+              {avatarSrc && <AvatarImage src={avatarSrc} alt={title} />}
+              <AvatarFallback>
+                {avatarFallback ?? title.charAt(0).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+          )}
+          {!avatarSrc && !avatarFallback && icon && (
+            <div className="flex items-center justify-center size-10 rounded-full bg-muted text-muted-foreground">
+              {icon}
+            </div>
+          )}
+          <div className="flex flex-col">
+            <h1 className="text-lg font-semibold leading-tight">{title}</h1>
+            {description && (
+              <p className="text-sm text-muted-foreground">{description}</p>
+            )}
+          </div>
+        </div>
+        {actions && (
+          <div className="flex items-center gap-1">{actions}</div>
+        )}
+      </div>
+
+      {/* Sub-header */}
+      {subHeader && (
+        <div className="border-b px-4 py-3 lg:px-6 bg-card">{subHeader}</div>
+      )}
+
+      {/* Navigation tabs */}
+      {tabs && tabs.length > 0 && (
+        <nav className="flex items-center gap-1 border-b px-4 lg:px-6 bg-card">
+          {tabs.map((tab) => {
+            const isActive = pathname === tab.href
+
+            return (
+              <Link
+                key={tab.href}
+                href={tab.href}
+                className={cn(
+                  "relative inline-flex items-center justify-center px-3 py-2 text-sm font-medium whitespace-nowrap transition-colors",
+                  "text-muted-foreground hover:text-foreground",
+                  isActive && "text-foreground after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-foreground"
+                )}
+              >
+                {tab.label}
+              </Link>
+            )
+          })}
+        </nav>
+      )}
+
+      {/* Route content */}
+      <div className={cn("flex-1 p-4 lg:p-6", className)}>{children}</div>
+    </div>
+  )
+}
+
+export type { DashboardDetailsPageLayoutProps, Tab as DashboardDetailsTab }

apps/dashboard/base/components/layout/dashboard/dashboard-header.tsx

@@ -39,7 +39,7 @@ import {
 } from "@/shared/components/ui/dropdown-menu"
 import { Separator } from "@/shared/components/ui/separator"
 
-type DashboardHeaderProps = {
+export type DashboardHeaderProps = {
   user?: UserInfo
   actions?: React.ReactNode
   className?: string

apps/dashboard/base/components/layout/dashboard/dashboard-layout.tsx

@@ -32,8 +32,10 @@ export function DashboardLayout({
     <TooltipProvider>
       <SidebarProvider defaultOpen={defaultOpen}>
         <AppSidebar navGroups={navGroups} logo={logo} />
-        <SidebarInset>  
-          {children}
+        <SidebarInset>
+          <div>
+            {children}
+          </div>
         </SidebarInset>
       </SidebarProvider>
     </TooltipProvider>

apps/dashboard/base/components/layout/dashboard/dashboard-page.tsx

@@ -1,18 +1,43 @@
 import { cn } from '@/shared/lib/utils'
-import { title } from 'process'
 import React from 'react'
+import { DashboardHeader, type DashboardHeaderProps } from './dashboard-header'
+
+type DashboardPageProps = {
+    children: React.ReactNode
+    header?: React.ReactNode | null
+    headerProps?: DashboardHeaderProps
+    toolbar?: React.ReactNode
+    title?: string
+    fullscreen?: boolean
+}
+
+export default function DashboardPage({ children, header, headerProps, title, fullscreen, toolbar }: DashboardPageProps) {
+    const resolvedHeader = header !== undefined
+        ? header
+        : <DashboardHeader {...headerProps} />
 
-export default function DashboardPage({ children, header, title, fullscreen }: { children: React.ReactNode, header: React.ReactNode, title?: string, fullscreen?: boolean }) {
     return (
         <div className='page'>
-            <header>
-                {header}
-            </header>
-            <main className={cn('p-4 lg:p-8 w-full h-full', fullscreen && 'h-screen p-0 lg:p-0')}>
-                {
-                    title &&
-                    <h2 className='text-lg lg:text-2xl font-bold mb-4'>  {title}</h2>
-                }
+            {resolvedHeader !== null && (
+                <header>
+                    {resolvedHeader}
+                </header>
+            )}
+            <main className={cn('p-4 w-full h-full ', fullscreen && 'h-screen p-0 lg:p-0')}>
+                {(title || toolbar) && <div className='flex items-center justify-between gap-4 mb-4'>
+
+                    {
+                        title &&
+                        <h2 className='text-lg lg:text-2xl font-bold '>  {title}</h2>
+                    }
+                    {
+                        toolbar &&
+                        <div className=''>
+                            {toolbar}
+                        </div>
+                    }
+
+                </div>}
                 {children}
             </main>
         </div>

apps/dashboard/base/components/layout/dashboard/index.ts

@@ -1,3 +1,6 @@
 export { DashboardLayout } from "./dashboard-layout"
 export { AppSidebar } from "./app-sidebar"
 export { DashboardHeader } from "./dashboard-header"
+export type { DashboardHeaderProps } from "./dashboard-header"
+export { default as DashboardDetailsPage } from "./dashboard-details-page-layout"
+export type { DashboardDetailsPageLayoutProps, DashboardDetailsTab } from "./dashboard-details-page-layout"

apps/dashboard/config/constants.ts

@@ -0,0 +1,4 @@
+export const CONSTANTS = {
+    apiUrl: process.env.NEXT_PUBLIC_API_URL || "http://localhost:4000",
+    getAssetUrl: (path: string) => `${CONSTANTS.apiUrl}/${path}`,
+}

apps/dashboard/config/navGroups.tsx

@@ -0,0 +1,182 @@
+import type { NavGroup } from "@/base/types/navigation"
+
+import {
+  AlarmClockIcon,
+  AwardIcon,
+  BanknoteArrowDownIcon,
+  BarChart3Icon,
+  BellRingIcon,
+  BookIcon,
+  BriefcaseBusinessIcon,
+  Building2Icon,
+  CalendarCheck2Icon,
+  CalendarDaysIcon,
+  LayoutDashboardIcon,
+  ClipboardListIcon,
+  UsersIcon,
+  CalendarIcon,
+  CarIcon,
+  ClipboardCheckIcon,
+  Clock3Icon,
+  ClockIcon,
+  GemIcon,
+  GitBranchIcon,
+  HandCoinsIcon,
+  ListIcon,
+  ListTodoIcon,
+  MegaphoneIcon,
+  PackageIcon,
+  PhoneCallIcon,
+  PlugZapIcon,
+  ReceiptIcon,
+  ReceiptTextIcon,
+  SettingsIcon,
+  ShoppingBasketIcon,
+  CircleDollarSign,
+  StarIcon,
+  StoreIcon,
+  TimerIcon,
+  UserCogIcon,
+  WalletIcon,
+  WrenchIcon,
+  ShoppingCartIcon,
+} from "lucide-react"
+export const navGroups: NavGroup[] = [
+  {
+    items: [
+      {
+        title: "Dashboard",
+        href: "/",
+        icon: <LayoutDashboardIcon />,
+      },
+      {
+        title: "Job Cards",
+        href: "/sales/job-cards",
+        icon: <ClipboardListIcon />,
+      },
+      {
+        title: "Customer & Vehicles",
+        href: "/customer-vehicles",
+        icon: <UsersIcon />,
+      },
+      {
+        title: "Reports",
+        href: "/reports",
+        icon: <BarChart3Icon />,
+      },
+    ],
+  },
+  {
+    label: "Management",
+    items: [
+      {
+        title: "Calendars",
+        href: "/calendars",
+        icon: <CalendarIcon />,
+        items: [
+          { title: "Work Schedule", href: "/calendar/work-schedule/list", icon: <Clock3Icon /> },
+          { title: "Appointments", href: "/calendar/appointment/list", icon: <CalendarCheck2Icon /> },
+        ],
+      },
+      {
+        title: "Sales",
+        href: "/sales",
+        icon: <CircleDollarSign />,
+        items: [
+          { title: "Customers", href: "/sales/customers", icon: <UsersIcon /> },
+          { title: "Vehicles", href: "/sales/vehicles", icon: <CarIcon /> },
+          { title: "Inspections", href: "/sales/inspections", icon: <ClipboardCheckIcon /> },
+          { title: "Estimates", href: "/sales/estimates", icon: <ReceiptTextIcon /> },
+          { title: "Job Cards", href: "/sales/job-cards", icon: <ClipboardListIcon /> },
+          { title: "Invoices", href: "/sales/invoice", icon: <ReceiptIcon /> },
+          { title: "Payments Received", href: "/sales/payment-received", icon: <HandCoinsIcon /> },
+          { title: "Credit Notes", href: "/sales/credit-notes", icon: <ReceiptTextIcon /> },
+        ],
+      },
+      {
+        title: "Purchases",
+        href: "/purchases",
+        icon: <ShoppingCartIcon />,
+        items: [
+          { title: "Vendors", href: "/purchase/vendor", icon: <StoreIcon /> },
+          { title: "Expenses", href: "/purchase/expense", icon: <WalletIcon /> },
+          { title: "Purchase Orders", href: "/purchase/purchase-order", icon: <ShoppingBasketIcon /> },
+          { title: "Bills", href: "/purchase/bill", icon: <ReceiptIcon /> },
+          { title: "Payments Made", href: "/purchase/payments-made", icon: <BanknoteArrowDownIcon /> },
+          { title: "Vendor Credits", href: "/purchase/vendor-credit", icon: <ReceiptTextIcon /> },
+        ],
+      },
+      {
+        title: "CRM",
+        href: "/crm",
+        icon: <BriefcaseBusinessIcon />,
+        items: [
+          { title: "Leads", href: "/crm/leads/list", icon: <GemIcon /> },
+          { title: "Calls", href: "/crm/calls-follow-up/list", icon: <PhoneCallIcon /> },
+          { title: "Tasks", href: "/crm/tasks/list", icon: <ListTodoIcon /> },
+        ],
+      },
+      {
+        title: "Marketing",
+        href: "/marketing",
+        icon: <MegaphoneIcon />,
+        items: [
+          { title: "Service Reminders", href: "/marketing/service-reminder/list", icon: <AlarmClockIcon /> },
+          { title: "Rating & Reviews", href: "/marketing/rating-review", icon: <StarIcon /> },
+          { title: "Google Business Reviews", href: "/marketing/google-rating-review", icon: <AwardIcon /> },
+        ],
+      },
+      {
+        title: "Accountants",
+        href: "/accountants",
+        icon: <BookIcon />,
+        items: [
+          { title: "Manual Journals", href: "/accountants/manual-journal", icon: <BookIcon /> },
+          { title: "Chart of Accounts", href: "/accountants/chart-of-account", icon: <GitBranchIcon /> },
+        ],
+      },
+      {
+        title: "Employees",
+        href: "/productivity",
+        icon: <UserCogIcon />,
+        items: [
+          { title: "Employees", href: "/productivity/employees", icon: <UsersIcon /> },
+          { title: "Time Clocks", href: "/productivity/time-clocks", icon: <TimerIcon /> },
+          { title: "Time Sheets", href: "/productivity/timesheet", icon: <ClockIcon /> },
+          { title: "Payroll", href: "/productivity/payroll", icon: <WalletIcon /> },
+          { title: "Payments Made", href: "/productivity/employee-payments-made", icon: <HandCoinsIcon /> },
+          { title: "Shop Calendars", href: "/productivity/shop-calendars", icon: <CalendarDaysIcon /> },
+          { title: "Shop Timing", href: "/productivity/shop-timings", icon: <Clock3Icon /> },
+          { title: "Holidays", href: "/productivity/holidays", icon: <CalendarIcon /> },
+        ],
+      },
+      {
+        title: "Items",
+        href: "/items",
+        icon: <PackageIcon />,
+        items: [
+          { title: "Services", href: "/items/services", icon: <WrenchIcon /> },
+          { title: "Parts", href: "/items/parts", icon: <WrenchIcon /> },
+          { title: "Expense Item", href: "/items/expense-item", icon: <WalletIcon /> },
+          { title: "Service Group", href: "/items/service-group", icon: <PackageIcon /> },
+          { title: "Inspections", href: "/items/inspection", icon: <ClipboardCheckIcon /> },
+          { title: "Inventory Adjustments", href: "/items/adjustment", icon: <ListIcon /> },
+        ],
+      },
+      {
+        title: "Settings",
+        href: "/setting",
+        icon: <SettingsIcon />,
+        items: [
+          { title: "Company", href: "/settings/company", icon: <Building2Icon /> },
+          { title: "Shop Types", href: "/settings/shop-type", icon: <CarIcon /> },
+          { title: "Tax & Rates", href: "/settings/tax-rates", icon: <ReceiptTextIcon /> },
+          { title: "Configurations", href: "/settings/configurations/preferences/sales", icon: <SettingsIcon /> },
+          { title: "Templates", href: "/settings/templates", icon: <ClipboardListIcon /> },
+          { title: "Integrations", href: "/settings/integrations/providers", icon: <PlugZapIcon /> },
+          { title: "Master", href: "/settings/master/body-type", icon: <ListIcon /> },
+        ],
+      },
+    ],
+  },
+]

apps/dashboard/modules/estimates/estimate-form.tsx

@@ -0,0 +1,215 @@
+"use client"
+
+import { AlertTriangle, Plus, Save } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import { FieldGroup } from "@/shared/components/ui/field"
+import {
+    Rhform,
+    RhfTextField,
+    RhfTextareaField,
+    RhfCheckboxField,
+    RhfAsyncSelectField,
+    RhfAsyncMultiSelectField,
+} from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+import { useResourceForm } from "@/shared/hooks/use-resource-form"
+import { useFormMutation } from "@/shared/hooks/use-form-mutation"
+import { toRelation, toId } from "@/shared/lib/utils"
+
+import {
+    estimateFormSchema,
+    type EstimateFormValues,
+} from "./estimate.schema"
+import { ESTIMATE_ROUTES, CUSTOMER_ROUTES, VEHICLE_ROUTES, DEPARTMENT_ROUTES, LABEL_ROUTES } from "@garage/api"
+
+// ── Props ──
+
+export type EstimateFormProps = {
+    resourceId?: string | null
+    initialData?: Partial<EstimateFormValues>
+    onSuccess?: () => void
+    defaultVehicleId?: string | null
+}
+
+// ── Default values ──
+
+const DEFAULT_VALUES: EstimateFormValues = {
+    title: "",
+    customer: null,
+    vehicle: null,
+    department: null,
+    estimate_number: "",
+    date: "",
+    has_insurance: false,
+    remarks: "",
+    labels: [],
+}
+
+// ── Mapping helpers ──
+
+function mapToFormValues(data: unknown): EstimateFormValues {
+    const d = (data as any)?.data ?? data ?? {}
+
+    return {
+        title: d.title || "",
+        customer: toRelation(d.customer_id, d.customer_name),
+        vehicle: toRelation(d.vehicle_id, d.vehicle_name),
+        department: toRelation(d.department_id, d.department_name),
+        estimate_number: d.estimate_number || "",
+        date: d.date || "",
+        has_insurance: d.has_insurance ?? false,
+        remarks: Array.isArray(d.remarks) ? d.remarks.join("\n") : d.remarks || "",
+        labels: Array.isArray(d.labels)
+            ? d.labels.map((l: any) => ({ value: String(l.id), label: l.name }))
+            : [],
+    }
+}
+
+function mapFormToPayload(values: EstimateFormValues) {
+    return {
+        title: values.title,
+        customer_id: toId(values.customer),
+        vehicle_id: toId(values.vehicle),
+        department_id: toId(values.department),
+        estimate_number: values.estimate_number || undefined,
+        date: values.date || undefined,
+        has_insurance: values.has_insurance,
+        remarks: values.remarks
+            ? values.remarks.split("\n").filter(Boolean)
+            : [],
+        label_ids: values.labels.map((l) => Number(l.value)),
+    }
+}
+
+// ── Shared mapOption for async selects ──
+
+const mapLookupOption = (item: any) => ({
+    value: String(item.id),
+    label: item.name,
+})
+
+const mapCustomerOption = (item: any) => ({
+    value: String(item.id),
+    label: [item.first_name, item.last_name].filter(Boolean).join(" "),
+})
+
+const mapVehicleOption = (item: any) => ({
+    value: String(item.id),
+    label: [item.year, item.make_name, item.model_name].filter(Boolean).join(" "),
+})
+
+const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
+
+// ── Component ──
+
+export function EstimateForm({ resourceId, initialData, onSuccess }: EstimateFormProps) {
+    const api = useAuthApi()
+
+    const { form, isEditing } = useResourceForm<EstimateFormValues, any>({
+        schema: estimateFormSchema,
+        defaultValues: DEFAULT_VALUES,
+        resourceId,
+        initialData,
+        queryKey: [ESTIMATE_ROUTES.BY_ID, resourceId],
+        mapToFormValues,
+    })
+
+    const { mutate, error, isPending } = useFormMutation(form, {
+        mutationFn: (values: EstimateFormValues) => {
+            const payload = mapFormToPayload(values)
+            const promise = (isEditing && resourceId
+                ? api.estimates.update(resourceId, payload)
+                : api.estimates.create(payload)) as Promise<any>
+            toast.promise(promise, {
+                loading: isEditing ? "Updating estimate..." : "Creating estimate...",
+                success: isEditing ? "Estimate updated successfully" : "Estimate created successfully",
+                error: isEditing ? "Failed to update estimate" : "Failed to create estimate",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            form.reset()
+            onSuccess?.()
+        },
+    })
+
+    return (
+        <Rhform form={form} onSubmit={(values) => mutate(values)}>
+            {error && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTriangle className="me-2 h-4 w-4" />
+                    <AlertTitle>
+                        {isEditing ? "Failed to update estimate" : "Failed to create estimate"}
+                    </AlertTitle>
+                    {error.message}
+                </Alert>
+            )}
+
+            <FieldGroup>
+                <RhfTextField name="title" label="Title" placeholder="Estimate title" required />
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfTextField name="estimate_number" label="Estimate Number" placeholder="EST-001" />
+                    <RhfTextField name="date" label="Date" type="date" />
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfAsyncSelectField
+                        name="customer"
+                        label="Customer"
+                        placeholder="Select customer"
+                        queryKey={[CUSTOMER_ROUTES.INDEX]}
+                        listFn={() => api.customers.list()}
+                        mapOption={mapCustomerOption}
+                        {...STORE_OBJECT}
+                    />
+                    <RhfAsyncSelectField
+                        name="vehicle"
+                        label="Vehicle"
+                        placeholder="Select vehicle"
+                        queryKey={[VEHICLE_ROUTES.INDEX]}
+                        listFn={() => api.vehicles.list()}
+                        mapOption={mapVehicleOption}
+                        {...STORE_OBJECT}
+                    />
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfAsyncSelectField
+                        name="department"
+                        label="Department"
+                        placeholder="Select department"
+                        queryKey={[DEPARTMENT_ROUTES.INDEX]}
+                        listFn={() => api.departments.list()}
+                        mapOption={mapLookupOption}
+                        {...STORE_OBJECT}
+                    />
+                    <RhfAsyncMultiSelectField
+                        name="labels"
+                        label="Labels"
+                        placeholder="Select labels"
+                        multiple
+                        queryKey={[LABEL_ROUTES.INDEX]}
+                        listFn={() => api.labels.list()}
+                        mapOption={mapLookupOption}
+                        {...STORE_OBJECT}
+                    />
+                </div>
+
+                <RhfCheckboxField name="has_insurance" label="Has Insurance" />
+
+                <RhfTextareaField name="remarks" label="Remarks" placeholder="Enter remarks (one per line)" rows={3} />
+
+                <Button type="submit" variant="default" disabled={isPending}>
+                    {isEditing ? <Save /> : <Plus />}
+                    {isPending
+                        ? (isEditing ? "Updating..." : "Creating...")
+                        : (isEditing ? "Update Estimate" : "Create Estimate")}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}

apps/dashboard/modules/estimates/estimate.schema.ts

@@ -0,0 +1,31 @@
+import { z } from "zod"
+
+const relationFieldSchema = z
+    .object({ value: z.string(), label: z.string() })
+    .nullable()
+
+const estimateFormSchema = z.object({
+    // ── Required fields ──
+    title: z.string().min(1, "Title is required"),
+
+    // ── Relations ──
+    customer: relationFieldSchema,
+    vehicle: relationFieldSchema,
+    department: relationFieldSchema,
+
+    // ── Optional fields ──
+    estimate_number: z.string().optional(),
+    date: z.string().optional(),
+    has_insurance: z.boolean().default(false),
+    remarks: z.string().optional(),
+
+    // ── Multi-select relations ──
+    labels: z
+        .array(z.object({ value: z.string(), label: z.string() }))
+        .default([]),
+})
+
+type EstimateFormValues = z.infer<typeof estimateFormSchema>
+
+export { estimateFormSchema, relationFieldSchema }
+export type { EstimateFormValues }

apps/dashboard/modules/expenses/expense-form.tsx

@@ -0,0 +1,209 @@
+"use client"
+
+import { AlertTriangle, Plus, Save } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import { FieldGroup } from "@/shared/components/ui/field"
+import {
+    Rhform,
+    RhfTextField,
+    RhfSelectField,
+    RhfAsyncSelectField,
+    RhfTextareaField,
+} from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+import { useResourceForm } from "@/shared/hooks/use-resource-form"
+import { useFormMutation } from "@/shared/hooks/use-form-mutation"
+import { toRelation, toId } from "@/shared/lib/utils"
+
+import {
+    expenseFormSchema,
+    type ExpenseFormValues,
+} from "./expense.schema"
+import { EXPENSE_ROUTES, JOB_CARD_ROUTES, VENDOR_ROUTES, DEPARTMENT_ROUTES } from "@garage/api"
+
+// ── Constants ──
+
+const STATUS_OPTIONS = [
+    { value: "open", label: "Open" },
+    { value: "paid", label: "Paid" },
+]
+
+// ── Props ──
+
+export type ExpenseFormProps = {
+    resourceId?: string | null
+    initialData?: unknown
+    onSuccess?: () => void
+}
+
+// ── Default values ──
+
+const DEFAULT_VALUES: ExpenseFormValues = {
+    job_card: null,
+    category: null,
+    vendor: null,
+    department: null,
+    title: "",
+    invoice_number: "",
+    expense_date: "",
+    notes: "",
+    status: "open",
+}
+
+// ── Mapping helpers ──
+
+function mapToFormValues(data: unknown): ExpenseFormValues {
+    const d = (data as any)?.data ?? data ?? {}
+
+    return {
+        job_card: toRelation(d.job_card_id, d.job_card_name),
+        category: toRelation(d.category_id, d.category_name),
+        vendor: toRelation(d.vendor_id, d.vendor_name),
+        department: toRelation(d.department_id, d.department_name),
+        title: d.title || "",
+        invoice_number: d.invoice_number || "",
+        expense_date: d.expense_date || "",
+        notes: d.notes || "",
+        status: d.status || "open",
+    }
+}
+
+function mapFormToPayload(values: ExpenseFormValues) {
+    return {
+        job_card_id: toId(values.job_card),
+        category_id: toId(values.category),
+        vendor_id: toId(values.vendor),
+        department_id: toId(values.department),
+        title: values.title,
+        invoice_number: values.invoice_number || undefined,
+        expense_date: values.expense_date || undefined,
+        notes: values.notes || undefined,
+        status: values.status || undefined,
+    }
+}
+
+// ── Shared mapOption for async selects ──
+
+const mapLookupOption = (item: any) => ({
+    value: String(item.id),
+    label: item.name,
+})
+
+const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
+
+// ── Component ──
+
+export function ExpenseForm({ resourceId, initialData, onSuccess }: ExpenseFormProps) {
+    const api = useAuthApi()
+
+    const { form, isEditing } = useResourceForm<ExpenseFormValues, any>({
+        schema: expenseFormSchema,
+        defaultValues: DEFAULT_VALUES,
+        resourceId,
+        initialData,
+        mapToFormValues,
+    })
+
+    const { mutate, error, isPending } = useFormMutation(form, {
+        mutationFn: (values: ExpenseFormValues) => {
+            const payload = mapFormToPayload(values)
+            const promise = isEditing && resourceId
+                ? api.expenses.update(resourceId, payload)
+                : api.expenses.create(payload)
+            toast.promise(promise, {
+                loading: isEditing ? "Updating expense..." : "Creating expense...",
+                success: isEditing ? "Expense updated successfully" : "Expense created successfully",
+                error: isEditing ? "Failed to update expense" : "Failed to create expense",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            form.reset()
+            onSuccess?.()
+        },
+    })
+
+    return (
+        <Rhform form={form} onSubmit={(values) => mutate(values)}>
+            {error && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTriangle className="me-2 h-4 w-4" />
+                    <AlertTitle>
+                        {isEditing ? "Failed to update expense" : "Failed to create expense"}
+                    </AlertTitle>
+                    {error.message}
+                </Alert>
+            )}
+
+            <FieldGroup>
+                <RhfTextField name="title" label="Title" placeholder="Enter expense title" required />
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfSelectField
+                        name="status"
+                        label="Status"
+                        placeholder="Select status"
+                        options={STATUS_OPTIONS}
+                    />
+                    <RhfTextField name="expense_date" label="Expense Date" placeholder="YYYY-MM-DD" type="date" />
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfAsyncSelectField
+                        name="vendor"
+                        label="Vendor"
+                        placeholder="Select vendor"
+                        queryKey={[VENDOR_ROUTES.INDEX]}
+                        listFn={() => api.vendors.list()}
+                        mapOption={mapLookupOption}
+                        {...STORE_OBJECT}
+                    />
+                    <RhfAsyncSelectField
+                        name="department"
+                        label="Department"
+                        placeholder="Select department"
+                        queryKey={[DEPARTMENT_ROUTES.INDEX]}
+                        listFn={() => api.departments.list()}
+                        mapOption={mapLookupOption}
+                        {...STORE_OBJECT}
+                    />
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfAsyncSelectField
+                        name="job_card"
+                        label="Job Card"
+                        placeholder="Select job card"
+                        queryKey={[JOB_CARD_ROUTES.INDEX]}
+                        listFn={() => api.jobCards.list()}
+                        mapOption={(item: any) => ({ value: String(item.id), label: item.job_card_number || item.name || `#${item.id}` })}
+                        {...STORE_OBJECT}
+                    />
+                    <RhfAsyncSelectField
+                        name="category"
+                        label="Category"
+                        placeholder="Select category"
+                        queryKey={[EXPENSE_ROUTES.ITEMS]}
+                        listFn={() => api.expenses.listItems()}
+                        mapOption={mapLookupOption}
+                        {...STORE_OBJECT}
+                    />
+                </div>
+
+                <RhfTextField name="invoice_number" label="Invoice Number" placeholder="INV-001" />
+
+                <RhfTextareaField name="notes" label="Notes" rows={3} />
+
+                <Button type="submit" variant="default" disabled={isPending}>
+                    {isEditing ? <Save /> : <Plus />}
+                    {isPending
+                        ? (isEditing ? "Updating..." : "Creating...")
+                        : (isEditing ? "Update Expense" : "Create Expense")}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}

apps/dashboard/modules/expenses/expense.schema.ts

@@ -0,0 +1,25 @@
+import { z } from "zod"
+
+const relationFieldSchema = z
+    .object({ value: z.string(), label: z.string() })
+    .nullable()
+
+const expenseFormSchema = z.object({
+    // ── Relations ──
+    job_card: relationFieldSchema,
+    category: relationFieldSchema,
+    vendor: relationFieldSchema,
+    department: relationFieldSchema,
+
+    // ── Basic info ──
+    title: z.string().min(1, "Title is required"),
+    invoice_number: z.string().optional(),
+    expense_date: z.string().optional(),
+    notes: z.string().optional(),
+    status: z.string().optional(),
+})
+
+type ExpenseFormValues = z.infer<typeof expenseFormSchema>
+
+export { expenseFormSchema, relationFieldSchema }
+export type { ExpenseFormValues }

apps/dashboard/modules/home/appointments-summary-card.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import { CalendarCheck, CalendarX, Eye, Ban } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import type { DashboardData } from "./use-dashboard-data"
+
+type Props = { data: DashboardData }
+
+export function AppointmentsSummaryCard({ data }: Props) {
+    const totals = data.appointments_summary?.totals
+
+    const stats = [
+        {
+            label: "Completed",
+            value: totals?.completed?.text ?? "0 Appt.",
+            icon: CalendarCheck,
+            color: "text-emerald-600",
+            bg: "bg-emerald-500/10",
+        },
+        {
+            label: "No Shows",
+            value: totals?.no_shows?.text ?? "0 Appt.",
+            icon: Eye,
+            color: "text-amber-600",
+            bg: "bg-amber-500/10",
+        },
+        {
+            label: "No-Show Rate",
+            value: totals?.no_shows_rate?.text ?? "0%",
+            icon: Ban,
+            color: "text-red-600",
+            bg: "bg-red-500/10",
+        },
+        {
+            label: "Cancelled",
+            value: totals?.cancelled?.text ?? "0 Appt.",
+            icon: CalendarX,
+            color: "text-slate-600",
+            bg: "bg-slate-500/10",
+        },
+    ]
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Appointments Summary</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <div className="grid grid-cols-2 gap-4">
+                    {stats.map((stat) => (
+                        <div
+                            key={stat.label}
+                            className="flex items-center gap-3 rounded-lg border p-3"
+                        >
+                            <div className={`rounded-md p-2 ${stat.bg}`}>
+                                <stat.icon className={`h-4 w-4 ${stat.color}`} />
+                            </div>
+                            <div>
+                                <p className="text-sm font-medium">{stat.value}</p>
+                                <p className="text-xs text-muted-foreground">{stat.label}</p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </CardContent>
+        </Card>
+    )
+}

apps/dashboard/modules/home/customers-totals-card.tsx

@@ -0,0 +1,40 @@
+"use client"
+
+import { Users, Building2, Truck, Shield } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import type { DashboardData } from "./use-dashboard-data"
+
+type Props = { data: DashboardData }
+
+export function CustomersTotalsCard({ data }: Props) {
+    const customers = data.customers_totals
+
+    const stats = [
+        { label: "Individuals", value: customers?.individuals ?? 0, icon: Users, color: "text-sky-600", bg: "bg-sky-500/10" },
+        { label: "Companies", value: customers?.companies ?? 0, icon: Building2, color: "text-indigo-600", bg: "bg-indigo-500/10" },
+        { label: "Fleets", value: customers?.fleets ?? 0, icon: Truck, color: "text-teal-600", bg: "bg-teal-500/10" },
+        { label: "Insurers", value: customers?.insurers ?? 0, icon: Shield, color: "text-rose-600", bg: "bg-rose-500/10" },
+    ]
+
+    return (
+        <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+                <CardTitle className="text-sm font-medium">Customers</CardTitle>
+                <span className="text-2xl font-bold">{customers?.total_customers ?? 0}</span>
+            </CardHeader>
+            <CardContent className="space-y-3">
+                {stats.map((stat) => (
+                    <div key={stat.label} className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                            <div className={`rounded-md p-1.5 ${stat.bg}`}>
+                                <stat.icon className={`h-3.5 w-3.5 ${stat.color}`} />
+                            </div>
+                            <span className="text-sm text-muted-foreground">{stat.label}</span>
+                        </div>
+                        <span className="text-sm font-semibold">{stat.value}</span>
+                    </div>
+                ))}
+            </CardContent>
+        </Card>
+    )
+}

apps/dashboard/modules/home/dashboard-content.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import { Loader2 } from "lucide-react"
+import { useDashboardData } from "./use-dashboard-data"
+import { FinancialTotalsCards } from "./financial-totals-cards"
+import { IncomeExpenseChart } from "./income-expense-chart"
+import { FinancialSummaryChart } from "./financial-summary-chart"
+import { WorkOrdersStatusCard } from "./work-orders-status-card"
+import { AppointmentsSummaryCard } from "./appointments-summary-card"
+import { UpcomingAppointmentsCard } from "./upcoming-appointments-card"
+import { ItemsTotalsCard } from "./items-totals-card"
+import { CustomersTotalsCard } from "./customers-totals-card"
+import { SalesPurchaseCards } from "./sales-purchase-cards"
+import { VehicleStatsCards } from "./vehicle-stats-cards"
+
+export function DashboardContent() {
+    const { data, isLoading, isError, error } = useDashboardData()
+
+    if (isLoading) {
+        return (
+            <div className="flex items-center justify-center py-24">
+                <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            </div>
+        )
+    }
+
+    if (isError || !data) {
+        return (
+            <div className="flex flex-col items-center justify-center py-24 text-muted-foreground">
+                <p className="text-lg font-medium">Failed to load dashboard</p>
+                <p className="text-sm">{error?.message ?? "An unexpected error occurred"}</p>
+            </div>
+        )
+    }
+
+    return (
+        <div className="space-y-6">
+            {/* Financial Overview */}
+            <FinancialTotalsCards data={data} />
+
+            {/* Charts Row */}
+            <div className="grid gap-4 lg:grid-cols-2">
+                <IncomeExpenseChart data={data} />
+                <FinancialSummaryChart data={data} />
+            </div>
+
+            {/* Work Orders + Appointments */}
+            <div className="grid gap-4 lg:grid-cols-2">
+                <WorkOrdersStatusCard data={data} />
+                <AppointmentsSummaryCard data={data} />
+            </div>
+
+            {/* Upcoming Appointments */}
+            <UpcomingAppointmentsCard data={data} />
+
+            {/* Sales & Purchase Documents */}
+            <SalesPurchaseCards data={data} />
+
+            {/* Quick Stats Row */}
+            <div className="grid gap-4 md:grid-cols-2">
+                <ItemsTotalsCard data={data} />
+                <CustomersTotalsCard data={data} />
+            </div>
+
+            {/* Vehicle Statistics */}
+            <VehicleStatsCards data={data} />
+        </div>
+    )
+}

apps/dashboard/modules/home/financial-summary-chart.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { Bar, BarChart, XAxis, YAxis, CartesianGrid } from "recharts"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import {
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+    type ChartConfig,
+} from "@/shared/components/ui/chart"
+import type { DashboardData } from "./use-dashboard-data"
+
+const chartConfig = {
+    amount: {
+        label: "Amount",
+        color: "var(--color-blue-500, #3b82f6)",
+    },
+} satisfies ChartConfig
+
+type Props = { data: DashboardData }
+
+export function FinancialSummaryChart({ data }: Props) {
+    const summary = data.financial_summary
+    const currency = summary?.currency ?? ""
+
+    const chartData = (summary?.chart ?? []).map((item) => ({
+        label: item.label ?? "",
+        amount: item.amount ?? 0,
+        count: item.count ?? 0,
+    }))
+
+    const colors = ["#3b82f6", "#f59e0b", "#ef4444"]
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Financial Summary</CardTitle>
+                <CardDescription>
+                    Invoices, expenses & bills breakdown ({currency})
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <ChartContainer config={chartConfig} className="h-75 w-full">
+                    <BarChart data={chartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+                        <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                        <XAxis dataKey="label" tickLine={false} axisLine={false} />
+                        <YAxis tickLine={false} axisLine={false} tickFormatter={(v: number) => v.toLocaleString()} />
+                        <ChartTooltip
+                            content={
+                                <ChartTooltipContent
+                                    formatter={(value, _name, item) => (
+                                        <div className="flex flex-col">
+                                            <span className="font-medium">{currency} {Number(value).toLocaleString()}</span>
+                                            <span className="text-muted-foreground">{item.payload.count} document(s)</span>
+                                        </div>
+                                    )}
+                                />
+                            }
+                        />
+                        <Bar
+                            dataKey="amount"
+                            radius={[6, 6, 0, 0]}
+                            fill="var(--color-amount)"
+                            barSize={48}
+                        >
+                            {chartData.map((_entry, index) => (
+                                <rect key={index} fill={colors[index % colors.length]} />
+                            ))}
+                        </Bar>
+                    </BarChart>
+                </ChartContainer>
+            </CardContent>
+        </Card>
+    )
+}

apps/dashboard/modules/home/financial-totals-cards.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import {
+    DollarSign,
+    TrendingUp,
+    TrendingDown,
+    ArrowUpRight,
+    ArrowDownRight,
+} from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import type { DashboardData } from "./use-dashboard-data"
+
+type Props = { data: DashboardData }
+
+export function FinancialTotalsCards({ data }: Props) {
+    const totals = data.totals
+
+    return (
+        <div className="grid gap-4 md:grid-cols-2">
+            <Card className="relative overflow-hidden">
+                <CardHeader className="flex flex-row items-center justify-between pb-2">
+                    <CardTitle className="text-sm font-medium text-muted-foreground">
+                        Total Income
+                    </CardTitle>
+                    <div className="rounded-md bg-emerald-500/10 p-2">
+                        <TrendingUp className="h-4 w-4 text-emerald-600" />
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <div className="text-2xl font-bold text-emerald-600">
+                        {totals?.total_income_text ?? `${totals?.currency ?? ""} 0.00`}
+                    </div>
+                    <div className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
+                        <ArrowUpRight className="h-3 w-3 text-emerald-500" />
+                        Income this period
+                    </div>
+                </CardContent>
+                <div className="absolute -bottom-4 -right-4 h-24 w-24 rounded-full bg-emerald-500/5" />
+            </Card>
+
+            <Card className="relative overflow-hidden">
+                <CardHeader className="flex flex-row items-center justify-between pb-2">
+                    <CardTitle className="text-sm font-medium text-muted-foreground">
+                        Total Expenses
+                    </CardTitle>
+                    <div className="rounded-md bg-red-500/10 p-2">
+                        <TrendingDown className="h-4 w-4 text-red-600" />
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <div className="text-2xl font-bold text-red-600">
+                        {totals?.total_expense_text ?? `${totals?.currency ?? ""} 0.00`}
+                    </div>
+                    <div className="mt-1 flex items-center gap-1 text-xs text-muted-foreground">
+                        <ArrowDownRight className="h-3 w-3 text-red-500" />
+                        Expenses this period
+                    </div>
+                </CardContent>
+                <div className="absolute -bottom-4 -right-4 h-24 w-24 rounded-full bg-red-500/5" />
+            </Card>
+        </div>
+    )
+}

apps/dashboard/modules/home/income-expense-chart.tsx

@@ -0,0 +1,106 @@
+"use client"
+
+import {
+    Area,
+    AreaChart,
+    CartesianGrid,
+    XAxis,
+    YAxis,
+} from "recharts"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import {
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+    type ChartConfig,
+} from "@/shared/components/ui/chart"
+import type { DashboardData } from "./use-dashboard-data"
+
+const chartConfig = {
+    income: {
+        label: "Income",
+        color: "var(--color-emerald-500, #10b981)",
+    },
+    expense: {
+        label: "Expense",
+        color: "var(--color-red-500, #ef4444)",
+    },
+} satisfies ChartConfig
+
+type Props = { data: DashboardData }
+
+export function IncomeExpenseChart({ data }: Props) {
+    const series = data.chart?.series ?? []
+    const currency = data.chart?.currency ?? ""
+
+    const chartData = series.map((item) => ({
+        date: item.date ?? "",
+        income: item.income ?? 0,
+        expense: item.expense ?? 0,
+    }))
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Income vs Expenses</CardTitle>
+                <CardDescription>
+                    Financial trend over the selected period ({currency})
+                </CardDescription>
+            </CardHeader>
+            <CardContent>
+                <ChartContainer config={chartConfig} className="h-75 w-full">
+                    <AreaChart data={chartData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+                        <defs>
+                            <linearGradient id="fillIncome" x1="0" y1="0" x2="0" y2="1">
+                                <stop offset="5%" stopColor="var(--color-income)" stopOpacity={0.3} />
+                                <stop offset="95%" stopColor="var(--color-income)" stopOpacity={0.05} />
+                            </linearGradient>
+                            <linearGradient id="fillExpense" x1="0" y1="0" x2="0" y2="1">
+                                <stop offset="5%" stopColor="var(--color-expense)" stopOpacity={0.3} />
+                                <stop offset="95%" stopColor="var(--color-expense)" stopOpacity={0.05} />
+                            </linearGradient>
+                        </defs>
+                        <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
+                        <XAxis
+                            dataKey="date"
+                            tickLine={false}
+                            axisLine={false}
+                            tickFormatter={(value: string) => {
+                                const date = new Date(value)
+                                return date.toLocaleDateString("en-US", { month: "short", day: "numeric" })
+                            }}
+                        />
+                        <YAxis tickLine={false} axisLine={false} tickFormatter={(v: number) => `${v.toLocaleString()}`} />
+                        <ChartTooltip
+                            content={
+                                <ChartTooltipContent
+                                    labelFormatter={(value) => {
+                                        return new Date(value).toLocaleDateString("en-US", {
+                                            month: "long",
+                                            day: "numeric",
+                                            year: "numeric",
+                                        })
+                                    }}
+                                />
+                            }
+                        />
+                        <Area
+                            type="monotone"
+                            dataKey="income"
+                            stroke="var(--color-income)"
+                            fill="url(#fillIncome)"
+                            strokeWidth={2}
+                        />
+                        <Area
+                            type="monotone"
+                            dataKey="expense"
+                            stroke="var(--color-expense)"
+                            fill="url(#fillExpense)"
+                            strokeWidth={2}
+                        />
+                    </AreaChart>
+                </ChartContainer>
+            </CardContent>
+        </Card>
+    )
+}

apps/dashboard/modules/home/items-totals-card.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import { Package, Wrench, Layers } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import type { DashboardData } from "./use-dashboard-data"
+
+type Props = { data: DashboardData }
+
+export function ItemsTotalsCard({ data }: Props) {
+    const items = data.items_totals
+
+    const stats = [
+        { label: "Parts", value: items?.parts ?? 0, icon: Package, color: "text-blue-600", bg: "bg-blue-500/10" },
+        { label: "Services", value: items?.services ?? 0, icon: Wrench, color: "text-violet-600", bg: "bg-violet-500/10" },
+        { label: "Service Groups", value: items?.service_groups ?? 0, icon: Layers, color: "text-amber-600", bg: "bg-amber-500/10" },
+    ]
+
+    return (
+        <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+                <CardTitle className="text-sm font-medium">Items</CardTitle>
+                <span className="text-2xl font-bold">{items?.total_items ?? 0}</span>
+            </CardHeader>
+            <CardContent className="space-y-3">
+                {stats.map((stat) => (
+                    <div key={stat.label} className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                            <div className={`rounded-md p-1.5 ${stat.bg}`}>
+                                <stat.icon className={`h-3.5 w-3.5 ${stat.color}`} />
+                            </div>
+                            <span className="text-sm text-muted-foreground">{stat.label}</span>
+                        </div>
+                        <span className="text-sm font-semibold">{stat.value}</span>
+                    </div>
+                ))}
+            </CardContent>
+        </Card>
+    )
+}

apps/dashboard/modules/home/sales-purchase-cards.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import { FileText, FileSearch, Receipt, ShoppingCart } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import type { DashboardData } from "./use-dashboard-data"
+
+type Props = { data: DashboardData }
+
+export function SalesPurchaseCards({ data }: Props) {
+    const sales = data.sales_totals
+    const purchase = data.purchase_totals
+
+    const salesStats = [
+        { label: "Inspections", value: sales?.inspections ?? 0, icon: FileSearch },
+        { label: "Estimates", value: sales?.estimates ?? 0, icon: FileText },
+        { label: "Invoices", value: sales?.invoices ?? 0, icon: Receipt },
+    ]
+
+    const purchaseStats = [
+        { label: "Purchase Orders", value: purchase?.purchase_orders ?? 0, icon: ShoppingCart },
+        { label: "Bills", value: purchase?.bills ?? 0, icon: Receipt },
+        { label: "Expenses", value: purchase?.expenses ?? 0, icon: FileText },
+    ]
+
+    return (
+        <div className="grid gap-4 md:grid-cols-2">
+            <Card>
+                <CardHeader className="flex flex-row items-center justify-between">
+                    <CardTitle className="text-sm font-medium">Sales Documents</CardTitle>
+                    <span className="text-2xl font-bold text-emerald-600">
+                        {sales?.total_sales_documents ?? 0}
+                    </span>
+                </CardHeader>
+                <CardContent>
+                    <div className="grid grid-cols-3 gap-2">
+                        {salesStats.map((stat) => (
+                            <div
+                                key={stat.label}
+                                className="flex flex-col items-center gap-1 rounded-lg border p-3 text-center"
+                            >
+                                <stat.icon className="h-4 w-4 text-muted-foreground" />
+                                <span className="text-lg font-bold">{stat.value}</span>
+                                <span className="text-[11px] text-muted-foreground leading-tight">
+                                    {stat.label}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                </CardContent>
+            </Card>
+
+            <Card>
+                <CardHeader className="flex flex-row items-center justify-between">
+                    <CardTitle className="text-sm font-medium">Purchase Documents</CardTitle>
+                    <span className="text-2xl font-bold text-blue-600">
+                        {purchase?.total_purchase_documents ?? 0}
+                    </span>
+                </CardHeader>
+                <CardContent>
+                    <div className="grid grid-cols-3 gap-2">
+                        {purchaseStats.map((stat) => (
+                            <div
+                                key={stat.label}
+                                className="flex flex-col items-center gap-1 rounded-lg border p-3 text-center"
+                            >
+                                <stat.icon className="h-4 w-4 text-muted-foreground" />
+                                <span className="text-lg font-bold">{stat.value}</span>
+                                <span className="text-[11px] text-muted-foreground leading-tight">
+                                    {stat.label}
+                                </span>
+                            </div>
+                        ))}
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    )
+}

apps/dashboard/modules/home/upcoming-appointments-card.tsx

@@ -0,0 +1,98 @@
+"use client"
+
+import { Calendar, Clock } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import { Badge } from "@/shared/components/ui/badge"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
+import type { DashboardData } from "./use-dashboard-data"
+
+type Props = { data: DashboardData }
+
+const statusBadge: Record<string, string> = {
+    confirmed: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300",
+    pending: "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300",
+    cancelled: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",
+}
+
+type AppointmentDetail = NonNullable<NonNullable<NonNullable<DashboardData["upcoming_appointments"]>["today"]>["details"]>[number]
+
+function AppointmentRow({ appt }: { appt: AppointmentDetail }) {
+    return (
+        <div className="flex items-center justify-between rounded-lg border p-3 transition-colors hover:bg-muted/50">
+            <div className="flex items-center gap-3">
+                <div className="rounded-md bg-primary/10 p-2">
+                    <Calendar className="h-4 w-4 text-primary" />
+                </div>
+                <div>
+                    <p className="text-sm font-medium">{appt.title}</p>
+                    {appt.notes && (
+                        <p className="text-xs text-muted-foreground line-clamp-1">{appt.notes}</p>
+                    )}
+                </div>
+            </div>
+            <div className="flex items-center gap-2">
+                <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                    <Clock className="h-3 w-3" />
+                    {appt.from_time?.slice(0, 5)} - {appt.to_time?.slice(0, 5)}
+                </div>
+                <Badge variant="secondary" className={statusBadge[appt.status ?? ""] ?? ""}>
+                    {appt.status}
+                </Badge>
+            </div>
+        </div>
+    )
+}
+
+function EmptyState() {
+    return (
+        <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+            <Calendar className="h-8 w-8 mb-2 opacity-50" />
+            <p className="text-sm">No appointments</p>
+        </div>
+    )
+}
+
+export function UpcomingAppointmentsCard({ data }: Props) {
+    const upcoming = data.upcoming_appointments
+
+    const tabs = [
+        { key: "today", label: "Today", data: upcoming?.today },
+        { key: "tomorrow", label: "Tomorrow", data: upcoming?.tomorrow },
+        { key: "this_week", label: "This Week", data: upcoming?.this_week },
+        { key: "next_week", label: "Next Week", data: upcoming?.next_week },
+    ]
+
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>Upcoming Appointments</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <Tabs defaultValue="today">
+                    <TabsList className="w-full">
+                        {tabs.map((tab) => (
+                            <TabsTrigger key={tab.key} value={tab.key} className="flex-1 text-xs">
+                                {tab.label}
+                                <Badge variant="secondary" className="ml-1.5 h-5 px-1.5 text-[10px]">
+                                    {tab.data?.count ?? 0}
+                                </Badge>
+                            </TabsTrigger>
+                        ))}
+                    </TabsList>
+
+                    {tabs.map((tab) => (
+                        <TabsContent key={tab.key} value={tab.key} className="space-y-2 mt-3">
+                            {(tab.data?.details as AppointmentDetail[] | undefined)?.length ? (
+                                (tab.data?.details as AppointmentDetail[]).map((appt) => (
+                                    <AppointmentRow key={appt.id} appt={appt} />
+                                ))
+                            ) : (
+                                <EmptyState />
+                            )}
+                        </TabsContent>
+                    ))}
+                </Tabs>
+            </CardContent>
+        </Card>
+    )
+}

apps/dashboard/modules/home/use-dashboard-data.ts

@@ -0,0 +1,16 @@
+"use client"
+
+import { useQuery } from "@tanstack/react-query"
+import { useAuthApi } from "@/shared/useApi"
+import type { HomeDashboardResponse } from "@garage/api"
+
+export type DashboardData = HomeDashboardResponse
+
+export function useDashboardData() {
+    const api = useAuthApi()
+
+    return useQuery<DashboardData>({
+        queryKey: ["home", "dashboard"],
+        queryFn: () => api.home.dashboard(),
+    })
+}

apps/dashboard/modules/home/vehicle-stats-cards.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import { Car } from "lucide-react"
+import { Bar, BarChart, XAxis, YAxis, CartesianGrid, Cell } from "recharts"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import {
+    ChartContainer,
+    ChartTooltip,
+    ChartTooltipContent,
+    type ChartConfig,
+} from "@/shared/components/ui/chart"
+import type { DashboardData } from "./use-dashboard-data"
+
+const chartConfig = {
+    vehicles_count: {
+        label: "Vehicles",
+        color: "var(--color-blue-500, #3b82f6)",
+    },
+} satisfies ChartConfig
+
+const COLORS = ["#3b82f6", "#8b5cf6", "#06b6d4", "#f59e0b", "#ef4444", "#10b981", "#ec4899", "#6366f1"]
+
+type Props = { data: DashboardData }
+
+export function VehicleStatsCards({ data }: Props) {
+    const bodyTypes = data.body_types_vehicle_totals ?? []
+    const makes = data.make_model_vehicle_totals?.makes ?? []
+
+    const bodyData = bodyTypes.map((bt) => ({
+        name: bt.body_type ?? "Unknown",
+        vehicles_count: bt.vehicles_count ?? 0,
+    }))
+
+    const makeData = makes.map((m) => ({
+        name: m.make ?? "Unknown",
+        vehicles_count: m.vehicles_count ?? 0,
+    }))
+
+    return (
+        <div className="grid gap-4 md:grid-cols-2">
+            <Card>
+                <CardHeader>
+                    <div className="flex items-center gap-2">
+                        <Car className="h-5 w-5 text-muted-foreground" />
+                        <div>
+                            <CardTitle>Vehicles by Body Type</CardTitle>
+                            <CardDescription>Distribution across body types</CardDescription>
+                        </div>
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    {bodyData.length > 0 ? (
+                        <ChartContainer config={chartConfig} className="h-55 w-full">
+                            <BarChart data={bodyData} layout="vertical" margin={{ top: 0, right: 10, left: 0, bottom: 0 }}>
+                                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" horizontal={false} />
+                                <XAxis type="number" tickLine={false} axisLine={false} />
+                                <YAxis type="category" dataKey="name" tickLine={false} axisLine={false} width={80} />
+                                <ChartTooltip content={<ChartTooltipContent />} />
+                                <Bar dataKey="vehicles_count" radius={[0, 6, 6, 0]} barSize={24}>
+                                    {bodyData.map((_entry, index) => (
+                                        <Cell key={index} fill={COLORS[index % COLORS.length]} />
+                                    ))}
+                                </Bar>
+                            </BarChart>
+                        </ChartContainer>
+                    ) : (
+                        <p className="text-sm text-muted-foreground text-center py-8">No vehicle data</p>
+                    )}
+                </CardContent>
+            </Card>
+
+            <Card>
+                <CardHeader>
+                    <div className="flex items-center gap-2">
+                        <Car className="h-5 w-5 text-muted-foreground" />
+                        <div>
+                            <CardTitle>Vehicles by Make</CardTitle>
+                            <CardDescription>Top vehicle manufacturers</CardDescription>
+                        </div>
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    {makeData.length > 0 ? (
+                        <ChartContainer config={chartConfig} className="h-55 w-full">
+                            <BarChart data={makeData} layout="vertical" margin={{ top: 0, right: 10, left: 0, bottom: 0 }}>
+                                <CartesianGrid strokeDasharray="3 3" className="stroke-muted" horizontal={false} />
+                                <XAxis type="number" tickLine={false} axisLine={false} />
+                                <YAxis type="category" dataKey="name" tickLine={false} axisLine={false} width={80} />
+                                <ChartTooltip content={<ChartTooltipContent />} />
+                                <Bar dataKey="vehicles_count" radius={[0, 6, 6, 0]} barSize={24}>
+                                    {makeData.map((_entry, index) => (
+                                        <Cell key={index} fill={COLORS[index % COLORS.length]} />
+                                    ))}
+                                </Bar>
+                            </BarChart>
+                        </ChartContainer>
+                    ) : (
+                        <p className="text-sm text-muted-foreground text-center py-8">No vehicle data</p>
+                    )}
+                </CardContent>
+            </Card>
+        </div>
+    )
+}

apps/dashboard/modules/home/work-orders-status-card.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import { ClipboardList } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+import { Badge } from "@/shared/components/ui/badge"
+import { Progress } from "@/shared/components/ui/progress"
+import type { DashboardData } from "./use-dashboard-data"
+
+type Props = { data: DashboardData }
+
+const statusColors: Record<string, string> = {
+    draft: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300",
+    check_in: "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
+    in_progress: "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300",
+    completed: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300",
+    cancelled: "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",
+    invoiced: "bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300",
+}
+
+export function WorkOrdersStatusCard({ data }: Props) {
+    const workOrders = data.work_orders_status
+    const cards = workOrders?.cards ?? []
+    const totals = workOrders?.totals
+    const totalOrders = totals?.orders ?? 0
+
+    return (
+        <Card>
+            <CardHeader className="flex flex-row items-center justify-between">
+                <div className="flex items-center gap-2">
+                    <ClipboardList className="h-5 w-5 text-muted-foreground" />
+                    <CardTitle>Work Orders</CardTitle>
+                </div>
+                <div className="text-right">
+                    <p className="text-2xl font-bold">{totals?.orders_text ?? "0 Orders"}</p>
+                    <p className="text-xs text-muted-foreground">{totals?.amount_text ?? ""}</p>
+                </div>
+            </CardHeader>
+            <CardContent className="space-y-3">
+                {cards.map((card) => {
+                    const percentage = totalOrders > 0 ? ((card.count ?? 0) / totalOrders) * 100 : 0
+                    return (
+                        <div key={card.status} className="space-y-1.5">
+                            <div className="flex items-center justify-between">
+                                <div className="flex items-center gap-2">
+                                    <Badge
+                                        variant="secondary"
+                                        className={statusColors[card.status ?? ""] ?? ""}
+                                    >
+                                        {card.label}
+                                    </Badge>
+                                    <span className="text-sm text-muted-foreground">
+                                        {card.orders_text}
+                                    </span>
+                                </div>
+                                <span className="text-sm font-medium">{card.amount_text}</span>
+                            </div>
+                            <Progress value={percentage} className="h-1.5" />
+                        </div>
+                    )
+                })}
+                {cards.length === 0 && (
+                    <p className="text-sm text-muted-foreground text-center py-4">
+                        No work orders this period
+                    </p>
+                )}
+            </CardContent>
+        </Card>
+    )
+}

apps/dashboard/modules/invoices/invoice-actions.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import { useAuthApi } from "@/shared/useApi"
+import { useRouter } from "next/navigation"
+import { Button } from "@/shared/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu"
+import { Ellipsis, Pencil, Trash2 } from "lucide-react"
+
+type InvoiceActionsProps = {
+    invoiceId: string
+}
+
+export function InvoiceActions({ invoiceId }: InvoiceActionsProps) {
+    const api = useAuthApi()
+    const router = useRouter()
+
+    const handleEdit = () => {
+        router.push(`/sales/invoice/${invoiceId}/edit`)
+    }
+
+    const handleDelete = async () => {
+        await api.invoices.destroy(invoiceId)
+        router.push("/sales/invoice")
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon">
+                    <Ellipsis className="size-4" />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={handleEdit}>
+                    <Pencil className="size-4" />
+                    Edit
+                </DropdownMenuItem>
+                <DropdownMenuItem variant="destructive" onClick={handleDelete}>
+                    <Trash2 className="size-4" />
+                    Delete
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}

apps/dashboard/modules/invoices/invoice-context.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { createContext, useContext } from "react"
+
+type InvoiceContextValue = {
+    id: string
+    label: string
+}
+
+const InvoiceContext = createContext<InvoiceContextValue | null>(null)
+
+export function InvoiceProvider({
+    invoice,
+    children,
+}: {
+    invoice: InvoiceContextValue
+    children: React.ReactNode
+}) {
+    return (
+        <InvoiceContext.Provider value={invoice}>
+            {children}
+        </InvoiceContext.Provider>
+    )
+}
+
+export function useInvoice() {
+    return useContext(InvoiceContext)
+}

apps/dashboard/modules/invoices/invoice-document-form.tsx

@@ -0,0 +1,76 @@
+"use client"
+
+import { z } from "zod"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Plus } from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+import { FieldGroup } from "@/shared/components/ui/field"
+import { Rhform, RhfTextField, RhfCheckboxField } from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+
+const schema = z.object({
+    document_number: z.string().min(1, "Document number is required"),
+    show_in_invoice: z.boolean(),
+    show_in_estimate: z.boolean(),
+    show_in_statement: z.boolean(),
+})
+
+type FormValues = z.infer<typeof schema>
+
+type InvoiceDocumentFormProps = {
+    invoiceId: string
+    onSuccess?: () => void
+}
+
+export function InvoiceDocumentForm({ invoiceId, onSuccess }: InvoiceDocumentFormProps) {
+    const api = useAuthApi()
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(schema),
+        defaultValues: {
+            document_number: "",
+            show_in_invoice: true,
+            show_in_estimate: false,
+            show_in_statement: false,
+        },
+    })
+
+    const handleSubmit = async (values: FormValues) => {
+        try {
+            await api.invoices.createDocument({
+                invoice_id: Number(invoiceId),
+                document_number: values.document_number,
+                show_in_invoice: values.show_in_invoice,
+                show_in_estimate: values.show_in_estimate,
+                show_in_statement: values.show_in_statement,
+            })
+            toast.success("Document created")
+            form.reset()
+            onSuccess?.()
+        } catch {
+            toast.error("Failed to create document")
+        }
+    }
+
+    return (
+        <Rhform form={form} onSubmit={handleSubmit}>
+            <FieldGroup>
+                <RhfTextField
+                    name="document_number"
+                    label="Document Number"
+                    placeholder="e.g. DOC-001"
+                    required
+                />
+                <RhfCheckboxField name="show_in_invoice" label="Show in Invoice" />
+                <RhfCheckboxField name="show_in_estimate" label="Show in Estimate" />
+                <RhfCheckboxField name="show_in_statement" label="Show in Statement" />
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                    <Plus />
+                    {form.formState.isSubmitting ? "Creating..." : "Create Document"}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}

apps/dashboard/modules/invoices/invoice-form.tsx

@@ -0,0 +1,216 @@
+"use client"
+
+import { AlertTriangle, Plus, Save } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import { FieldGroup } from "@/shared/components/ui/field"
+import {
+    Rhform,
+    RhfTextField,
+    RhfSelectField,
+    RhfTextareaField,
+    RhfAsyncSelectField,
+} from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+import { useResourceForm } from "@/shared/hooks/use-resource-form"
+import { useFormMutation } from "@/shared/hooks/use-form-mutation"
+import { toRelation, toId } from "@/shared/lib/utils"
+
+import {
+    invoiceFormSchema,
+    type InvoiceFormValues,
+} from "./invoice.schema"
+import { INVOICE_ROUTES, CUSTOMER_ROUTES, VEHICLE_ROUTES, DEPARTMENT_ROUTES } from "@garage/api"
+
+// ── Constants ──
+
+const STATUS_OPTIONS = [
+    { value: "draft", label: "Draft" },
+    { value: "open", label: "Open" },
+    { value: "paid", label: "Paid" },
+    { value: "overdue", label: "Overdue" },
+    { value: "void", label: "Void" },
+]
+
+// ── Props ──
+
+export type InvoiceFormProps = {
+    resourceId?: string | null
+    initialData?: unknown
+    onSuccess?: () => void
+}
+
+// ── Default values ──
+
+const DEFAULT_VALUES: InvoiceFormValues = {
+    subject: "",
+    customer: null,
+    vehicle: null,
+    department: null,
+    invoice_number: "",
+    invoice_date: "",
+    due_date: "",
+    status: "draft",
+    notes: "",
+}
+
+// ── Mapping helpers ──
+
+function mapToFormValues(data: unknown): InvoiceFormValues {
+    const d = (data as any)?.data ?? data ?? {}
+
+    return {
+        subject: d.subject || "",
+        customer: toRelation(d.customer_id, d.customer_name),
+        vehicle: toRelation(d.vehicle_id, d.vehicle_name),
+        department: toRelation(d.department_id, d.department_name),
+        invoice_number: d.invoice_number || "",
+        invoice_date: d.invoice_date || "",
+        due_date: d.due_date || "",
+        status: d.status || "draft",
+        notes: d.notes || "",
+    }
+}
+
+function mapFormToPayload(values: InvoiceFormValues) {
+    return {
+        subject: values.subject,
+        customer_id: toId(values.customer),
+        vehicle_id: toId(values.vehicle),
+        department_id: toId(values.department),
+        invoice_number: values.invoice_number || undefined,
+        invoice_date: values.invoice_date || undefined,
+        due_date: values.due_date || undefined,
+        status: values.status || undefined,
+        notes: values.notes || undefined,
+    }
+}
+
+// ── Shared mapOption for async selects ──
+
+const mapLookupOption = (item: any) => ({
+    value: String(item.id),
+    label: item.name,
+})
+
+const mapCustomerOption = (item: any) => ({
+    value: String(item.id),
+    label: [item.first_name, item.last_name].filter(Boolean).join(" "),
+})
+
+const mapVehicleOption = (item: any) => ({
+    value: String(item.id),
+    label: [item.year, item.make_name, item.model_name].filter(Boolean).join(" "),
+})
+
+const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
+
+// ── Component ──
+
+export function InvoiceForm({ resourceId, initialData, onSuccess }: InvoiceFormProps) {
+    const api = useAuthApi()
+
+    const { form, isEditing } = useResourceForm<InvoiceFormValues, any>({
+        schema: invoiceFormSchema,
+        defaultValues: DEFAULT_VALUES,
+        resourceId,
+        initialData,
+        queryKey: [INVOICE_ROUTES.BY_ID, resourceId],
+        mapToFormValues,
+    })
+
+    const { mutate, error, isPending } = useFormMutation(form, {
+        mutationFn: (values: InvoiceFormValues) => {
+            const payload = mapFormToPayload(values)
+            const promise = (isEditing && resourceId
+                ? api.invoices.update(resourceId, payload)
+                : api.invoices.create(payload)) as Promise<any>
+            toast.promise(promise, {
+                loading: isEditing ? "Updating invoice..." : "Creating invoice...",
+                success: isEditing ? "Invoice updated successfully" : "Invoice created successfully",
+                error: isEditing ? "Failed to update invoice" : "Failed to create invoice",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            form.reset()
+            onSuccess?.()
+        },
+    })
+
+    return (
+        <Rhform form={form} onSubmit={(values) => mutate(values)}>
+            {error && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTriangle className="me-2 h-4 w-4" />
+                    <AlertTitle>
+                        {isEditing ? "Failed to update invoice" : "Failed to create invoice"}
+                    </AlertTitle>
+                    {error.message}
+                </Alert>
+            )}
+
+            <FieldGroup>
+                <RhfTextField name="subject" label="Subject" placeholder="Invoice subject" required />
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfTextField name="invoice_number" label="Invoice Number" placeholder="INV-0001" />
+                    <RhfSelectField
+                        name="status"
+                        label="Status"
+                        placeholder="Select status"
+                        options={STATUS_OPTIONS}
+                    />
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfTextField name="invoice_date" label="Invoice Date" type="date" />
+                    <RhfTextField name="due_date" label="Due Date" type="date" />
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfAsyncSelectField
+                        name="customer"
+                        label="Customer"
+                        placeholder="Select customer"
+                        queryKey={[CUSTOMER_ROUTES.INDEX]}
+                        listFn={() => api.customers.list()}
+                        mapOption={mapCustomerOption}
+                        {...STORE_OBJECT}
+                    />
+                    <RhfAsyncSelectField
+                        name="vehicle"
+                        label="Vehicle"
+                        placeholder="Select vehicle"
+                        queryKey={[VEHICLE_ROUTES.INDEX]}
+                        listFn={() => api.vehicles.list()}
+                        mapOption={mapVehicleOption}
+                        {...STORE_OBJECT}
+
+                    />
+                </div>
+
+                <RhfAsyncSelectField
+                    name="department"
+                    label="Department"
+                    placeholder="Select department"
+                    queryKey={[DEPARTMENT_ROUTES.INDEX]}
+                    listFn={() => api.departments.list()}
+                    mapOption={mapLookupOption}
+                    {...STORE_OBJECT}
+                />
+
+                <RhfTextareaField name="notes" label="Notes" placeholder="Additional notes" rows={3} />
+
+                <Button type="submit" variant="default" disabled={isPending}>
+                    {isEditing ? <Save /> : <Plus />}
+                    {isPending
+                        ? (isEditing ? "Updating..." : "Creating...")
+                        : (isEditing ? "Update Invoice" : "Create Invoice")}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}

apps/dashboard/modules/invoices/invoice-general-info.tsx

@@ -0,0 +1,161 @@
+import {
+    FileText,
+    Calendar,
+    Hash,
+    Users,
+    Car,
+    Building2,
+    CircleDollarSign,
+    Clock,
+} from "lucide-react"
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+} from "@/shared/components/ui/card"
+import { Badge } from "@/shared/components/ui/badge"
+import { Separator } from "@/shared/components/ui/separator"
+
+type InvoiceData = {
+    id?: number
+    subject?: string
+    invoice_number?: string
+    invoice_date?: string
+    due_date?: string
+    status?: string
+    notes?: string
+    customer_name?: string
+    customer_id?: number
+    vehicle_name?: string
+    vehicle_id?: number
+    department_name?: string
+    department_id?: number
+    created_at?: string
+    updated_at?: string
+}
+
+type InvoiceGeneralInfoProps = {
+    invoice: InvoiceData
+}
+
+function InfoItem({
+    icon: Icon,
+    label,
+    value,
+}: {
+    icon: React.ComponentType<{ className?: string }>
+    label: string
+    value?: string | null
+}) {
+    return (
+        <div className="flex items-start gap-3">
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+                <Icon className="size-4" />
+            </div>
+            <div className="flex flex-col gap-0.5">
+                <span className="text-xs text-muted-foreground">{label}</span>
+                <span className="text-sm font-medium">
+                    {value || <span className="text-muted-foreground">—</span>}
+                </span>
+            </div>
+        </div>
+    )
+}
+
+const statusColorMap: Record<string, string> = {
+    draft: "secondary",
+    open: "default",
+    paid: "default",
+    overdue: "destructive",
+    void: "outline",
+}
+
+export function InvoiceGeneralInfo({ invoice }: InvoiceGeneralInfoProps) {
+    return (
+        <div className="grid gap-6 md:grid-cols-2">
+            {/* Invoice Details */}
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <FileText className="size-4" />
+                        Invoice Details
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-4">
+                    <div className="flex flex-wrap items-center gap-2">
+                        {invoice.subject && (
+                            <Badge variant="secondary">{invoice.subject}</Badge>
+                        )}
+                        {invoice.status && (
+                            <Badge variant={statusColorMap[invoice.status] as any ?? "outline"}>
+                                {invoice.status.charAt(0).toUpperCase() + invoice.status.slice(1)}
+                            </Badge>
+                        )}
+                    </div>
+                    <Separator />
+                    <div className="grid gap-4 sm:grid-cols-2">
+                        <InfoItem
+                            icon={Hash}
+                            label="Invoice Number"
+                            value={invoice.invoice_number}
+                        />
+                        <InfoItem
+                            icon={Calendar}
+                            label="Invoice Date"
+                            value={invoice.invoice_date}
+                        />
+                        <InfoItem
+                            icon={Calendar}
+                            label="Due Date"
+                            value={invoice.due_date}
+                        />
+                        <InfoItem
+                            icon={Clock}
+                            label="Created"
+                            value={invoice.created_at ? new Date(invoice.created_at).toLocaleDateString() : null}
+                        />
+                    </div>
+                </CardContent>
+            </Card>
+
+            {/* Relations */}
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <CircleDollarSign className="size-4" />
+                        Related Information
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-4">
+                    <div className="grid gap-4 sm:grid-cols-2">
+                        <InfoItem
+                            icon={Users}
+                            label="Customer"
+                            value={invoice.customer_name}
+                        />
+                        <InfoItem
+                            icon={Car}
+                            label="Vehicle"
+                            value={invoice.vehicle_name}
+                        />
+                        <InfoItem
+                            icon={Building2}
+                            label="Department"
+                            value={invoice.department_name}
+                        />
+                    </div>
+                    {invoice.notes && (
+                        <>
+                            <Separator />
+                            <div className="flex flex-col gap-1">
+                                <span className="text-xs text-muted-foreground">Notes</span>
+                                <p className="text-sm">{invoice.notes}</p>
+                            </div>
+                        </>
+                    )}
+                </CardContent>
+            </Card>
+        </div>
+    )
+}

apps/dashboard/modules/invoices/invoice-note-form.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import { z } from "zod"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Plus } from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+import { FieldGroup } from "@/shared/components/ui/field"
+import { Rhform, RhfTextareaField } from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+
+const schema = z.object({
+    note: z.string().min(1, "Note is required"),
+})
+
+type FormValues = z.infer<typeof schema>
+
+type InvoiceNoteFormProps = {
+    invoiceId: string
+    onSuccess?: () => void
+}
+
+export function InvoiceNoteForm({ invoiceId, onSuccess }: InvoiceNoteFormProps) {
+    const api = useAuthApi()
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(schema),
+        defaultValues: { note: "" },
+    })
+
+    const handleSubmit = async (values: FormValues) => {
+        try {
+            await api.invoices.createNote({
+                invoice_id: Number(invoiceId),
+                note: values.note,
+            })
+            toast.success("Note created")
+            form.reset()
+            onSuccess?.()
+        } catch {
+            toast.error("Failed to create note")
+        }
+    }
+
+    return (
+        <Rhform form={form} onSubmit={handleSubmit}>
+            <FieldGroup>
+                <RhfTextareaField
+                    name="note"
+                    label="Note"
+                    placeholder="Enter a note..."
+                    rows={4}
+                    required
+                />
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                    <Plus />
+                    {form.formState.isSubmitting ? "Creating..." : "Add Note"}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}

apps/dashboard/modules/invoices/invoice.schema.ts

@@ -0,0 +1,27 @@
+import { z } from "zod"
+
+const relationFieldSchema = z
+    .object({ value: z.string(), label: z.string() })
+    .nullable()
+
+const invoiceFormSchema = z.object({
+    // ── Required fields ──
+    subject: z.string().min(1, "Subject is required"),
+
+    // ── Relations ──
+    customer: relationFieldSchema,
+    vehicle: relationFieldSchema,
+    department: relationFieldSchema,
+
+    // ── Optional fields ──
+    invoice_number: z.string().optional(),
+    invoice_date: z.string().optional(),
+    due_date: z.string().optional(),
+    status: z.string().optional(),
+    notes: z.string().optional(),
+})
+
+type InvoiceFormValues = z.infer<typeof invoiceFormSchema>
+
+export { invoiceFormSchema, relationFieldSchema }
+export type { InvoiceFormValues }

apps/dashboard/modules/job-cards/job-card-actions.tsx

@@ -0,0 +1,289 @@
+"use client"
+
+import { useState, useRef } from "react"
+import { useMutation, useQuery } from "@tanstack/react-query"
+import { useAuthApi } from "@/shared/useApi"
+import { useRouter } from "next/navigation"
+import { Button } from "@/shared/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuSeparator,
+    DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogDescription,
+} from "@/shared/components/ui/dialog"
+import {
+    Combobox,
+    ComboboxInput,
+    ComboboxContent,
+    ComboboxList,
+    ComboboxItem,
+    ComboboxEmpty,
+} from "@/shared/components/ui/combobox"
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "@/shared/components/ui/popover"
+import { Calendar } from "@/shared/components/ui/calendar"
+import { confirm } from "@/shared/components/confirm-dialog"
+import { toast } from "sonner"
+import { Ellipsis, Pencil, Trash2, CalendarIcon, UserCog, UserCheck, Loader2 } from "lucide-react"
+import { format } from "date-fns"
+import { EMPLOYEE_ROUTES } from "@garage/api"
+
+type JobCardActionsProps = {
+    jobCardId: string
+}
+
+type Employee = {
+    id: number
+    first_name?: string
+    last_name?: string
+    name?: string
+}
+
+function getEmployeeName(emp: Employee) {
+    return emp.name || [emp.first_name, emp.last_name].filter(Boolean).join(" ") || `Employee #${emp.id}`
+}
+
+// ── Employee Picker Dialog ──
+
+type EmployeePickerDialogProps = {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    title: string
+    description: string
+    employees: Employee[]
+    loading: boolean
+    isPending: boolean
+    onSelect: (employeeId: number) => void
+}
+
+function EmployeePickerDialog({
+    open,
+    onOpenChange,
+    title,
+    description,
+    employees,
+    loading,
+    isPending,
+    onSelect,
+}: EmployeePickerDialogProps) {
+    const anchorRef = useRef<HTMLDivElement>(null)
+
+    const handleSelect = (emp: Employee | null) => {
+        if (!emp) return
+        onSelect(emp.id)
+    }
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-md">
+                <DialogHeader>
+                    <DialogTitle>{title}</DialogTitle>
+                    <DialogDescription>{description}</DialogDescription>
+                </DialogHeader>
+                <div ref={anchorRef}>
+                    <Combobox
+                        value={null}
+                        onValueChange={handleSelect}
+                        disabled={isPending}
+                    >
+                        <ComboboxInput
+                            placeholder="Search employees..."
+                            showClear={false}
+                        />
+                        <ComboboxContent anchor={anchorRef}>
+                            <ComboboxList>
+                                {loading && (
+                                    <div className="flex items-center justify-center py-4">
+                                        <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+                                    </div>
+                                )}
+                                {!loading &&
+                                    employees.map((emp) => (
+                                        <ComboboxItem key={emp.id} value={emp}>
+                                            {getEmployeeName(emp)}
+                                        </ComboboxItem>
+                                    ))}
+                                {!loading && employees.length === 0 && (
+                                    <ComboboxEmpty>No employees found</ComboboxEmpty>
+                                )}
+                            </ComboboxList>
+                        </ComboboxContent>
+                    </Combobox>
+                </div>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
+// ── Main Component ──
+
+export function JobCardActions({ jobCardId }: JobCardActionsProps) {
+    const api = useAuthApi()
+    const router = useRouter()
+    const [datePickerOpen, setDatePickerOpen] = useState(false)
+    const [serviceWriterDialogOpen, setServiceWriterDialogOpen] = useState(false)
+    const [salesPersonDialogOpen, setSalesPersonDialogOpen] = useState(false)
+
+    const { data: employeesData, isLoading: employeesLoading } = useQuery({
+        queryKey: [EMPLOYEE_ROUTES.INDEX],
+        queryFn: () => api.employees.list(),
+    })
+
+    const employees: Employee[] = (employeesData as any)?.data ?? []
+
+    const handleEdit = () => {
+        router.push(`/sales/job-cards/${jobCardId}/edit`)
+    }
+
+    const handleDelete = async () => {
+        const confirmed = await confirm({
+            title: "Delete Job Card",
+            description: "Are you sure you want to delete this job card? This action cannot be undone.",
+            confirmLabel: "Delete",
+            variant: "destructive",
+        })
+        if (confirmed) {
+            const promise = api.jobCards.destroy(jobCardId)
+            toast.promise(promise, {
+                loading: "Deleting job card...",
+                success: "Job card deleted successfully",
+                error: "Failed to delete job card",
+            })
+            await promise
+            router.push("/sales/job-cards")
+        }
+    }
+
+    const changeDateMutation = useMutation({
+        mutationFn: (date: Date) => {
+            const order_date = format(date, "yyyy-MM-dd")
+            const promise = api.jobCards.changeDate(jobCardId, { order_date })
+            toast.promise(promise, {
+                loading: "Updating date...",
+                success: "Date updated successfully",
+                error: "Failed to update date",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            setDatePickerOpen(false)
+            router.refresh()
+        },
+    })
+
+    const changeServiceWriterMutation = useMutation({
+        mutationFn: (employeeId: number) => {
+            const promise = api.jobCards.changeServiceWriter(jobCardId, { service_writer_id: employeeId })
+            toast.promise(promise, {
+                loading: "Updating service writer...",
+                success: "Service writer updated successfully",
+                error: "Failed to update service writer",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            setServiceWriterDialogOpen(false)
+            router.refresh()
+        },
+    })
+
+    const changeSalesPersonMutation = useMutation({
+        mutationFn: (employeeId: number) => {
+            const promise = api.jobCards.changeSalesPerson(jobCardId, { sales_person_id: employeeId })
+            toast.promise(promise, {
+                loading: "Updating sales person...",
+                success: "Sales person updated successfully",
+                error: "Failed to update sales person",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            setSalesPersonDialogOpen(false)
+            router.refresh()
+        },
+    })
+
+    return (
+        <div className="flex items-center gap-1">
+            <Popover open={datePickerOpen} onOpenChange={setDatePickerOpen}>
+                <PopoverTrigger asChild>
+                    <Button variant="outline" size="sm">
+                        <CalendarIcon className="size-4" />
+                        <span className="hidden sm:inline">Change Date</span>
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-auto p-0" align="end">
+                    <Calendar
+                        mode="single"
+                        onSelect={(date) => {
+                            if (date) changeDateMutation.mutate(date)
+                        }}
+                        disabled={changeDateMutation.isPending}
+                    />
+                </PopoverContent>
+            </Popover>
+
+            <Button variant="outline" size="sm" onClick={() => setServiceWriterDialogOpen(true)}>
+                <UserCog className="size-4" />
+                <span className="hidden sm:inline">Service Writer</span>
+            </Button>
+
+            <Button variant="outline" size="sm" onClick={() => setSalesPersonDialogOpen(true)}>
+                <UserCheck className="size-4" />
+                <span className="hidden sm:inline">Sales Person</span>
+            </Button>
+
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon">
+                        <Ellipsis className="size-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={handleEdit}>
+                        <Pencil className="size-4" />
+                        Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem variant="destructive" onClick={handleDelete}>
+                        <Trash2 className="size-4" />
+                        Delete
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+
+            <EmployeePickerDialog
+                open={serviceWriterDialogOpen}
+                onOpenChange={setServiceWriterDialogOpen}
+                title="Change Service Writer"
+                description="Search and select an employee to assign as service writer."
+                employees={employees}
+                loading={employeesLoading}
+                isPending={changeServiceWriterMutation.isPending}
+                onSelect={(id) => changeServiceWriterMutation.mutate(id)}
+            />
+
+            <EmployeePickerDialog
+                open={salesPersonDialogOpen}
+                onOpenChange={setSalesPersonDialogOpen}
+                title="Change Sales Person"
+                description="Search and select an employee to assign as sales person."
+                employees={employees}
+                loading={employeesLoading}
+                isPending={changeSalesPersonMutation.isPending}
+                onSelect={(id) => changeSalesPersonMutation.mutate(id)}
+            />
+        </div>
+    )
+}

apps/dashboard/modules/job-cards/job-card-context.tsx

@@ -0,0 +1,37 @@
+"use client"
+
+import { createContext, useContext, useState, useCallback } from "react"
+import type { JobCardStatus } from "./job-card.schema"
+
+type JobCardContextValue = {
+    id: string
+    label: string
+    status: JobCardStatus
+    setStatus: (status: JobCardStatus) => void
+}
+
+const JobCardContext = createContext<JobCardContextValue | null>(null)
+
+export function JobCardProvider({
+    jobCard,
+    children,
+}: {
+    jobCard: { id: string; label: string; status: JobCardStatus }
+    children: React.ReactNode
+}) {
+    const [status, setStatusState] = useState<JobCardStatus>(jobCard.status)
+
+    const setStatus = useCallback((newStatus: JobCardStatus) => {
+        setStatusState(newStatus)
+    }, [])
+
+    return (
+        <JobCardContext.Provider value={{ id: jobCard.id, label: jobCard.label, status, setStatus }}>
+            {children}
+        </JobCardContext.Provider>
+    )
+}
+
+export function useJobCard() {
+    return useContext(JobCardContext)
+}

apps/dashboard/modules/job-cards/job-card-form.tsx

@@ -0,0 +1,195 @@
+"use client"
+
+import { AlertTriangle, Plus, Save } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import { FieldGroup } from "@/shared/components/ui/field"
+import {
+    Rhform,
+    RhfTextField,
+    RhfSelectField,
+    RhfAsyncSelectField,
+} from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+import { useResourceForm } from "@/shared/hooks/use-resource-form"
+import { useFormMutation } from "@/shared/hooks/use-form-mutation"
+import { toRelation, toId } from "@/shared/lib/utils"
+
+import {
+    jobCardFormSchema,
+    type JobCardFormValues,
+    TAX_INCLUSIVE_OPTIONS,
+    DISCOUNT_TYPE_OPTIONS,
+    DISCOUNT_AT_OPTIONS,
+} from "./job-card.schema"
+import { JOB_CARD_ROUTES, CUSTOMER_ROUTES, VEHICLE_ROUTES } from "@garage/api"
+
+// ── Props ──
+
+export type JobCardFormProps = {
+    resourceId?: string | null
+    initialData?: unknown
+    onSuccess?: () => void
+}
+
+// ── Default values ──
+
+const DEFAULT_VALUES: JobCardFormValues = {
+    title: "",
+    customer: null,
+    vehicle: null,
+    status: "draft",
+    tax_inclusive: "Tax Inclusive",
+    discount_type: "no",
+    discount_at: "inclusive_of_tax",
+}
+
+// ── Mapping helpers ──
+
+function mapToFormValues(data: unknown): JobCardFormValues {
+    const d = (data as any)?.data ?? data ?? {}
+
+    return {
+        title: d.title || "",
+        customer: toRelation(d.customer_id, d.customer_name),
+        vehicle: toRelation(d.vehicle_id, d.vehicle_name),
+        status: d.status || "draft",
+        tax_inclusive: d.tax_inclusive || "Tax Inclusive",
+        discount_type: d.discount_type || "no",
+        discount_at: d.discount_at || "inclusive_of_tax",
+    }
+}
+
+function mapFormToPayload(values: JobCardFormValues) {
+    return {
+        title: values.title,
+        customer_id: toId(values.customer),
+        vehicle_id: toId(values.vehicle),
+        status: values.status || undefined,
+        tax_inclusive: values.tax_inclusive || undefined,
+        discount_type: values.discount_type || undefined,
+        discount_at: values.discount_at || undefined,
+    }
+}
+
+// ── Shared mapOption for async selects ──
+
+const mapLookupOption = (item: any) => ({
+    value: String(item.id),
+    label: item.name,
+})
+
+const mapCustomerOption = (item: any) => ({
+    value: String(item.id),
+    label: [item.first_name, item.last_name].filter(Boolean).join(" "),
+})
+
+const mapVehicleOption = (item: any) => ({
+    value: String(item.id),
+    label: [item.year, item.make_name, item.model_name].filter(Boolean).join(" "),
+})
+
+const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
+
+// ── Component ──
+
+export function JobCardForm({ resourceId, initialData, onSuccess }: JobCardFormProps) {
+    const api = useAuthApi()
+
+    const { form, isEditing } = useResourceForm<JobCardFormValues, any>({
+        schema: jobCardFormSchema,
+        defaultValues: DEFAULT_VALUES,
+        resourceId,
+        initialData,
+        queryKey: [JOB_CARD_ROUTES.BY_ID, resourceId],
+        mapToFormValues,
+    })
+
+    const { mutate, error, isPending } = useFormMutation(form, {
+        mutationFn: (values: JobCardFormValues) => {
+            const payload = mapFormToPayload(values)
+            const promise = (isEditing && resourceId
+                ? api.jobCards.update(resourceId, payload)
+                : api.jobCards.create(payload)) as Promise<any>
+            toast.promise(promise, {
+                loading: isEditing ? "Updating job card..." : "Creating job card...",
+                success: isEditing ? "Job card updated successfully" : "Job card created successfully",
+                error: isEditing ? "Failed to update job card" : "Failed to create job card",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            form.reset()
+            onSuccess?.()
+        },
+    })
+
+    return (
+        <Rhform form={form} onSubmit={(values) => mutate(values)}>
+            {error && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTriangle className="me-2 h-4 w-4" />
+                    <AlertTitle>
+                        {isEditing ? "Failed to update job card" : "Failed to create job card"}
+                    </AlertTitle>
+                    {error.message}
+                </Alert>
+            )}
+
+            <FieldGroup>
+                <RhfTextField name="title" label="Title" placeholder="Job Card 001" required />
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfAsyncSelectField
+                        name="customer"
+                        label="Customer"
+                        placeholder="Select customer"
+                        queryKey={[CUSTOMER_ROUTES.INDEX]}
+                        listFn={() => api.customers.list()}
+                        mapOption={mapCustomerOption}
+                        {...STORE_OBJECT}
+                    />
+                    <RhfAsyncSelectField
+                        name="vehicle"
+                        label="Vehicle"
+                        placeholder="Select vehicle"
+                        queryKey={[VEHICLE_ROUTES.INDEX]}
+                        listFn={() => api.vehicles.list()}
+                        mapOption={mapVehicleOption}
+                        {...STORE_OBJECT}
+                    />
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                    <RhfSelectField
+                        name="tax_inclusive"
+                        label="Tax"
+                        placeholder="Select tax type"
+                        options={TAX_INCLUSIVE_OPTIONS}
+                    />
+                    <RhfSelectField
+                        name="discount_type"
+                        label="Discount Type"
+                        placeholder="Select discount type"
+                        options={DISCOUNT_TYPE_OPTIONS}
+                    />
+                    <RhfSelectField
+                        name="discount_at"
+                        label="Discount At"
+                        placeholder="Select discount at"
+                        options={DISCOUNT_AT_OPTIONS}
+                    />
+                </div>
+
+                <Button type="submit" variant="default" disabled={isPending}>
+                    {isEditing ? <Save /> : <Plus />}
+                    {isPending
+                        ? (isEditing ? "Updating..." : "Creating...")
+                        : (isEditing ? "Update Job Card" : "Create Job Card")}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}

apps/dashboard/modules/job-cards/job-card-general-info.tsx

@@ -0,0 +1,249 @@
+import {
+    ClipboardList,
+    Calendar,
+    Hash,
+    Users,
+    Car,
+    Building2,
+    Gauge,
+    Clock,
+    UserCheck,
+    Briefcase,
+    Receipt,
+    DollarSign,
+} from "lucide-react"
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+} from "@/shared/components/ui/card"
+import { Badge } from "@/shared/components/ui/badge"
+import { Separator } from "@/shared/components/ui/separator"
+
+type JobCardData = {
+    id?: number
+    title?: string
+    status?: string
+    check_in_date?: string
+    km_in?: number
+    tax_inclusive?: string
+    discount_type?: string
+    discount_at?: string
+    customer_id?: number
+    customer_name?: string
+    vehicle_id?: number
+    vehicle_name?: string
+    department_id?: number
+    department_name?: string
+    sales_person_id?: number
+    sales_person_name?: string
+    service_writer_id?: number
+    service_writer_name?: string
+    purchase_orders_count?: number
+    bills_count?: number
+    expenses_count?: number
+    tasks_count?: number
+    appointments_count?: number
+    created_at?: string
+    updated_at?: string
+}
+
+type JobCardGeneralInfoProps = {
+    jobCard: JobCardData
+}
+
+function InfoItem({
+    icon: Icon,
+    label,
+    value,
+}: {
+    icon: React.ComponentType<{ className?: string }>
+    label: string
+    value?: string | null
+}) {
+    return (
+        <div className="flex items-start gap-3">
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+                <Icon className="size-4" />
+            </div>
+            <div className="flex flex-col gap-0.5">
+                <span className="text-xs text-muted-foreground">{label}</span>
+                <span className="text-sm font-medium">
+                    {value || <span className="text-muted-foreground">—</span>}
+                </span>
+            </div>
+        </div>
+    )
+}
+
+const statusColorMap: Record<string, string> = {
+    draft: "secondary",
+    check_in: "default",
+    in_progress: "default",
+    completed: "default",
+    invoiced: "outline",
+    cancelled: "destructive",
+}
+
+export function JobCardGeneralInfo({ jobCard }: JobCardGeneralInfoProps) {
+    const formatStatus = (status?: string) => {
+        if (!status) return null
+        return status
+            .split("_")
+            .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+            .join(" ")
+    }
+
+    return (
+        <div className="grid gap-6 md:grid-cols-2">
+            {/* Job Card Details */}
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <ClipboardList className="size-4" />
+                        Job Card Details
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-4">
+                    <div className="flex flex-wrap items-center gap-2">
+                        {jobCard.title && (
+                            <Badge variant="secondary">{jobCard.title}</Badge>
+                        )}
+                        {jobCard.status && (
+                            <Badge variant={statusColorMap[jobCard.status] as any ?? "outline"}>
+                                {formatStatus(jobCard.status)}
+                            </Badge>
+                        )}
+                    </div>
+                    <Separator />
+                    <div className="grid gap-4 sm:grid-cols-2">
+                        <InfoItem
+                            icon={Calendar}
+                            label="Check-in Date"
+                            value={jobCard.check_in_date}
+                        />
+                        <InfoItem
+                            icon={Gauge}
+                            label="KM In"
+                            value={jobCard.km_in ? Number(jobCard.km_in).toLocaleString() : null}
+                        />
+                        <InfoItem
+                            icon={Clock}
+                            label="Created"
+                            value={jobCard.created_at ? new Date(jobCard.created_at).toLocaleDateString() : null}
+                        />
+                        <InfoItem
+                            icon={Clock}
+                            label="Updated"
+                            value={jobCard.updated_at ? new Date(jobCard.updated_at).toLocaleDateString() : null}
+                        />
+                    </div>
+                </CardContent>
+            </Card>
+
+            {/* Related Information */}
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <Users className="size-4" />
+                        Related Information
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-4">
+                    <div className="grid gap-4 sm:grid-cols-2">
+                        <InfoItem
+                            icon={Users}
+                            label="Customer"
+                            value={jobCard.customer_name}
+                        />
+                        <InfoItem
+                            icon={Car}
+                            label="Vehicle"
+                            value={jobCard.vehicle_name}
+                        />
+                        <InfoItem
+                            icon={Building2}
+                            label="Department"
+                            value={jobCard.department_name}
+                        />
+                        <InfoItem
+                            icon={Briefcase}
+                            label="Sales Person"
+                            value={jobCard.sales_person_name}
+                        />
+                        <InfoItem
+                            icon={UserCheck}
+                            label="Service Writer"
+                            value={jobCard.service_writer_name}
+                        />
+                    </div>
+                </CardContent>
+            </Card>
+
+            {/* Tax & Discount Settings */}
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <DollarSign className="size-4" />
+                        Tax & Discount Settings
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-4 sm:grid-cols-2">
+                    <InfoItem
+                        icon={Receipt}
+                        label="Tax Inclusive"
+                        value={jobCard.tax_inclusive}
+                    />
+                    <InfoItem
+                        icon={DollarSign}
+                        label="Discount Type"
+                        value={formatStatus(jobCard.discount_type)}
+                    />
+                    <InfoItem
+                        icon={DollarSign}
+                        label="Discount At"
+                        value={formatStatus(jobCard.discount_at)}
+                    />
+                </CardContent>
+            </Card>
+
+            {/* Counts */}
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <Hash className="size-4" />
+                        Related Counts
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-4 sm:grid-cols-2">
+                    <InfoItem
+                        icon={Receipt}
+                        label="Purchase Orders"
+                        value={String(jobCard.purchase_orders_count ?? 0)}
+                    />
+                    <InfoItem
+                        icon={Receipt}
+                        label="Bills"
+                        value={String(jobCard.bills_count ?? 0)}
+                    />
+                    <InfoItem
+                        icon={DollarSign}
+                        label="Expenses"
+                        value={String(jobCard.expenses_count ?? 0)}
+                    />
+                    <InfoItem
+                        icon={ClipboardList}
+                        label="Tasks"
+                        value={String(jobCard.tasks_count ?? 0)}
+                    />
+                    <InfoItem
+                        icon={Calendar}
+                        label="Appointments"
+                        value={String(jobCard.appointments_count ?? 0)}
+                    />
+                </CardContent>
+            </Card>
+        </div>
+    )
+}

apps/dashboard/modules/job-cards/job-card-recommendation-form.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { z } from "zod"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Plus } from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+import { FieldGroup } from "@/shared/components/ui/field"
+import { Rhform, RhfTextareaField } from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+
+const schema = z.object({
+    recommendation: z.string().min(1, "Recommendation is required"),
+})
+
+type FormValues = z.infer<typeof schema>
+
+type JobCardRecommendationFormProps = {
+    jobCardId: string
+    onSuccess?: () => void
+}
+
+export function JobCardRecommendationForm({ jobCardId, onSuccess }: JobCardRecommendationFormProps) {
+    const api = useAuthApi()
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(schema),
+        defaultValues: { recommendation: "" },
+    })
+
+    const handleSubmit = async (values: FormValues) => {
+        try {
+            await api.jobCards.addShopRecommendation(jobCardId, {
+                recommendation: values.recommendation,
+            })
+            toast.success("Shop recommendation added")
+            form.reset()
+            onSuccess?.()
+        } catch {
+            toast.error("Failed to add shop recommendation")
+        }
+    }
+
+    return (
+        <Rhform form={form} onSubmit={handleSubmit}>
+            <FieldGroup>
+                <RhfTextareaField
+                    name="recommendation"
+                    label="Shop Recommendation"
+                    placeholder="Enter shop recommendation..."
+                    rows={4}
+                    required
+                />
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                    <Plus />
+                    {form.formState.isSubmitting ? "Adding..." : "Add Recommendation"}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}

apps/dashboard/modules/job-cards/job-card-remark-form.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { z } from "zod"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Plus } from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+import { FieldGroup } from "@/shared/components/ui/field"
+import { Rhform, RhfTextareaField } from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+
+const schema = z.object({
+    remark: z.string().min(1, "Remark is required"),
+})
+
+type FormValues = z.infer<typeof schema>
+
+type JobCardRemarkFormProps = {
+    jobCardId: string
+    onSuccess?: () => void
+}
+
+export function JobCardRemarkForm({ jobCardId, onSuccess }: JobCardRemarkFormProps) {
+    const api = useAuthApi()
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(schema),
+        defaultValues: { remark: "" },
+    })
+
+    const handleSubmit = async (values: FormValues) => {
+        try {
+            await api.jobCards.addCustomerRemark(jobCardId, {
+                remark: values.remark,
+            })
+            toast.success("Customer remark added")
+            form.reset()
+            onSuccess?.()
+        } catch {
+            toast.error("Failed to add customer remark")
+        }
+    }
+
+    return (
+        <Rhform form={form} onSubmit={handleSubmit}>
+            <FieldGroup>
+                <RhfTextareaField
+                    name="remark"
+                    label="Customer Remark"
+                    placeholder="Enter customer remark..."
+                    rows={4}
+                    required
+                />
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                    <Plus />
+                    {form.formState.isSubmitting ? "Adding..." : "Add Remark"}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}

apps/dashboard/modules/job-cards/job-card-status-stepper.tsx

@@ -0,0 +1,125 @@
+"use client"
+
+import { useMutation } from "@tanstack/react-query"
+import { toast } from "sonner"
+import { cn } from "@/shared/lib/utils"
+import { useAuthApi } from "@/shared/useApi"
+import { useJobCard } from "./job-card-context"
+import { JOB_CARD_STATUSES, type JobCardStatus } from "./job-card.schema"
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "@/shared/components/ui/tooltip"
+import {
+    CircleDot,
+    LogIn,
+    Loader,
+    Pause,
+    PackageCheck,
+    CheckCircle2,
+} from "lucide-react"
+
+// ── Status icon mapping ──
+
+const STATUS_ICONS: Record<JobCardStatus, React.ComponentType<{ className?: string }>> = {
+    draft: CircleDot,
+    check_in: LogIn,
+    in_progress: Loader,
+    on_hold: Pause,
+    ready_to_deliver: PackageCheck,
+    delivered: CheckCircle2,
+}
+
+// ── Component ──
+
+type JobCardStatusStepperProps = {
+    jobCardId: string
+}
+
+export function JobCardStatusStepper({ jobCardId }: JobCardStatusStepperProps) {
+    const api = useAuthApi()
+    const jobCard = useJobCard()
+    const currentStatus = jobCard?.status ?? "draft"
+
+    const currentIndex = JOB_CARD_STATUSES.findIndex((s) => s.value === currentStatus)
+
+    const { mutate, isPending, variables } = useMutation({
+        mutationFn: async (status: JobCardStatus) => {
+            const promise = api.jobCards.changeStatus(jobCardId, { status })
+            toast.promise(promise, {
+                loading: "Updating status...",
+                success: "Status updated successfully",
+                error: "Failed to update status",
+            })
+            return promise
+        },
+        onSuccess: (_data, status) => {
+            jobCard?.setStatus(status)
+        },
+    })
+
+    const handleClick = (status: JobCardStatus, index: number) => {
+        if (isPending) return
+        if (status === currentStatus) return
+        mutate(status)
+    }
+
+    return (
+        <TooltipProvider>
+            <div className="flex items-center gap-0 overflow-x-auto">
+                {JOB_CARD_STATUSES.map((step, index) => {
+                    const Icon = STATUS_ICONS[step.value]
+                    const isActive = step.value === currentStatus
+                    const isCompleted = index < currentIndex
+                    const isTransitioning = isPending && variables === step.value
+                    const isClickable = !isPending && step.value !== currentStatus
+
+                    return (
+                        <div key={step.value} className="flex items-center">
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <button
+                                        type="button"
+                                        onClick={() => handleClick(step.value, index)}
+                                        disabled={!isClickable}
+                                        className={cn(
+                                            "relative flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition-all",
+                                            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                                            isActive && "bg-primary text-primary-foreground shadow-sm",
+                                            isCompleted && !isActive && "bg-primary/10 text-primary hover:bg-primary/20",
+                                            !isActive && !isCompleted && "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground",
+                                            isTransitioning && "animate-pulse",
+                                            !isClickable && !isActive && "opacity-60",
+                                            isClickable && "cursor-pointer",
+                                        )}
+                                    >
+                                        <Icon className={cn(
+                                            "size-4 shrink-0",
+                                            isTransitioning && "animate-spin"
+                                        )} />
+                                        <span className="hidden whitespace-nowrap sm:inline">{step.label}</span>
+                                    </button>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                    {isActive ? `Current: ${step.label}` : `Change to ${step.label}`}
+                                </TooltipContent>
+                            </Tooltip>
+
+                            {/* Connector line */}
+                            {index < JOB_CARD_STATUSES.length - 1 && (
+                                <div
+                                    className={cn(
+                                        "mx-1 h-0.5 w-4 shrink-0 transition-colors",
+                                        index < currentIndex ? "bg-primary/40" : "bg-border"
+                                    )}
+                                />
+                            )}
+                        </div>
+                    )
+                })}
+            </div>
+        </TooltipProvider>
+    )
+}

apps/dashboard/modules/job-cards/job-card.schema.ts

@@ -0,0 +1,53 @@
+import { z } from "zod"
+
+const relationFieldSchema = z
+    .object({ value: z.string(), label: z.string() })
+    .nullable()
+
+// ── Job Card Statuses ──
+
+export const JOB_CARD_STATUSES = [
+    { value: "draft", label: "Draft" },
+    { value: "check_in", label: "Check In" },
+    { value: "in_progress", label: "In Progress" },
+    { value: "on_hold", label: "On Hold" },
+    { value: "ready_to_deliver", label: "Ready to Deliver" },
+    { value: "delivered", label: "Delivered" },
+] as const
+
+export type JobCardStatus = (typeof JOB_CARD_STATUSES)[number]["value"]
+
+const TAX_INCLUSIVE_OPTIONS = [
+    { value: "Tax Inclusive", label: "Tax Inclusive" },
+    { value: "Tax Exclusive", label: "Tax Exclusive" },
+]
+
+const DISCOUNT_TYPE_OPTIONS = [
+    { value: "no", label: "No Discount" },
+    { value: "transaction_level", label: "Transaction Level" },
+]
+
+const DISCOUNT_AT_OPTIONS = [
+    { value: "inclusive_of_tax", label: "Inclusive of Tax" },
+    { value: "exclusive_of_tax", label: "Exclusive of Tax" },
+]
+
+const jobCardFormSchema = z.object({
+    // ── Required fields ──
+    title: z.string().min(1, "Title is required"),
+
+    // ── Relations ──
+    customer: relationFieldSchema,
+    vehicle: relationFieldSchema,
+
+    // ── Settings ──
+    status: z.string().optional(),
+    tax_inclusive: z.string().optional(),
+    discount_type: z.string().optional(),
+    discount_at: z.string().optional(),
+})
+
+type JobCardFormValues = z.infer<typeof jobCardFormSchema>
+
+export { jobCardFormSchema, relationFieldSchema, TAX_INCLUSIVE_OPTIONS, DISCOUNT_TYPE_OPTIONS, DISCOUNT_AT_OPTIONS }
+export type { JobCardFormValues }

apps/dashboard/modules/payment-received/payment-received-form.tsx

@@ -0,0 +1,201 @@
+"use client"
+
+import { AlertTriangle, Plus, Save } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import { FieldGroup } from "@/shared/components/ui/field"
+import {
+    Rhform,
+    RhfTextField,
+    RhfTextareaField,
+    RhfAsyncSelectField,
+} from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+import { useResourceForm } from "@/shared/hooks/use-resource-form"
+import { useFormMutation } from "@/shared/hooks/use-form-mutation"
+import { toRelation, toId } from "@/shared/lib/utils"
+
+import {
+    paymentReceivedFormSchema,
+    type PaymentReceivedFormValues,
+} from "./payment-received.schema"
+import { PAYMENT_ROUTES, CUSTOMER_ROUTES, JOB_CARD_ROUTES } from "@garage/api"
+
+// ── Props ──
+
+export type PaymentReceivedFormProps = {
+    resourceId?: string | null
+    initialData?: unknown
+    onSuccess?: () => void
+}
+
+// ── Default values ──
+
+const DEFAULT_VALUES: PaymentReceivedFormValues = {
+    job_card: null,
+    payment_mode: null,
+    customer: null,
+    amount_received: "",
+    payment_number: "",
+    payment_date: "",
+    note: "",
+}
+
+// ── Mapping helpers ──
+
+function mapToFormValues(data: unknown): PaymentReceivedFormValues {
+    const d = (data as any)?.data ?? data ?? {}
+
+    return {
+        job_card: toRelation(d.job_card_id, d.job_card_name),
+        payment_mode: toRelation(d.payment_mode_id, d.payment_mode_name),
+        customer: toRelation(d.customer_id, d.customer_name),
+        amount_received: d.amount_received ? String(d.amount_received) : "",
+        payment_number: d.payment_number || "",
+        payment_date: d.payment_date || "",
+        note: d.note || "",
+    }
+}
+
+function mapFormToPayload(values: PaymentReceivedFormValues) {
+    return {
+        job_card_id: toId(values.job_card),
+        payment_mode_id: toId(values.payment_mode),
+        customer_id: toId(values.customer),
+        amount_received: values.amount_received,
+        payment_number: values.payment_number || undefined,
+        payment_date: values.payment_date,
+        note: values.note || undefined,
+    }
+}
+
+// ── Shared mapOption for async selects ──
+
+const mapLookupOption = (item: any) => ({
+    value: String(item.id),
+    label: item.name || item.title,
+})
+
+const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
+
+// ── Component ──
+
+export function PaymentReceivedForm({ resourceId, initialData, onSuccess }: PaymentReceivedFormProps) {
+    const api = useAuthApi()
+
+    const { form, isEditing } = useResourceForm<PaymentReceivedFormValues, any>({
+        schema: paymentReceivedFormSchema,
+        defaultValues: DEFAULT_VALUES,
+        resourceId,
+        initialData,
+        mapToFormValues,
+    })
+
+    const { mutate, error, isPending } = useFormMutation(form, {
+        mutationFn: (values: PaymentReceivedFormValues) => {
+            const payload = mapFormToPayload(values)
+            const promise = isEditing && resourceId
+                ? api.payments.updateReceived(resourceId, payload as any)
+                : api.payments.createReceived(payload as any)
+            toast.promise(promise, {
+                loading: isEditing ? "Updating payment..." : "Recording payment...",
+                success: isEditing ? "Payment updated successfully" : "Payment recorded successfully",
+                error: isEditing ? "Failed to update payment" : "Failed to record payment",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            form.reset()
+            onSuccess?.()
+        },
+    })
+
+    return (
+        <Rhform form={form} onSubmit={(values) => mutate(values)}>
+            {error && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTriangle className="me-2 h-4 w-4" />
+                    <AlertTitle>
+                        {isEditing ? "Failed to update payment" : "Failed to record payment"}
+                    </AlertTitle>
+                    {error.message}
+                </Alert>
+            )}
+
+            <FieldGroup>
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfAsyncSelectField
+                        name="customer"
+                        label="Customer"
+                        placeholder="Select customer"
+                        queryKey={[CUSTOMER_ROUTES.INDEX]}
+                        listFn={() => api.customers.list()}
+                        mapOption={(item: any) => ({
+                            value: String(item.id),
+                            label: item.first_name
+                                ? `${item.first_name} ${item.last_name || ""}`.trim()
+                                : item.name || `#${item.id}`,
+                        })}
+                        {...STORE_OBJECT}
+                    />
+                    <RhfAsyncSelectField
+                        name="job_card"
+                        label="Job Card"
+                        placeholder="Select job card"
+                        queryKey={[JOB_CARD_ROUTES.INDEX]}
+                        listFn={() => api.jobCards.list()}
+                        mapOption={(item: any) => ({
+                            value: String(item.id),
+                            label: item.job_card_number || item.name || `#${item.id}`,
+                        })}
+                        {...STORE_OBJECT}
+                    />
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfTextField
+                        name="amount_received"
+                        label="Amount Received"
+                        placeholder="0.00"
+                        type="number"
+                        required
+                    />
+                    <RhfAsyncSelectField
+                        name="payment_mode"
+                        label="Payment Mode"
+                        placeholder="Select payment mode"
+                        queryKey={[PAYMENT_ROUTES.MODES]}
+                        listFn={() => api.payments.listModes()}
+                        mapOption={mapLookupOption}
+                        {...STORE_OBJECT}
+                    />
+                </div>
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfTextField
+                        name="payment_number"
+                        label="Payment Number"
+                        placeholder="PAY-001"
+                    />
+                    <RhfTextField
+                        name="payment_date"
+                        label="Payment Date"
+                        type="date"
+                        required
+                    />
+                </div>
+
+                <RhfTextareaField name="note" label="Note" rows={3} placeholder="Add any notes about this payment..." />
+
+                <Button type="submit" variant="default" disabled={isPending}>
+                    {isEditing ? <Save /> : <Plus />}
+                    {isPending
+                        ? (isEditing ? "Updating..." : "Recording...")
+                        : (isEditing ? "Update Payment" : "Record Payment")}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}

apps/dashboard/modules/payment-received/payment-received.schema.ts

@@ -0,0 +1,23 @@
+import { z } from "zod"
+
+const relationFieldSchema = z
+    .object({ value: z.string(), label: z.string() })
+    .nullable()
+
+const paymentReceivedFormSchema = z.object({
+    // ── Relations ──
+    job_card: relationFieldSchema,
+    payment_mode: relationFieldSchema,
+    customer: relationFieldSchema,
+
+    // ── Payment info ──
+    amount_received: z.string().min(1, "Amount is required"),
+    payment_number: z.string().optional(),
+    payment_date: z.string().min(1, "Payment date is required"),
+    note: z.string().optional(),
+})
+
+type PaymentReceivedFormValues = z.infer<typeof paymentReceivedFormSchema>
+
+export { paymentReceivedFormSchema, relationFieldSchema }
+export type { PaymentReceivedFormValues }

apps/dashboard/modules/settings/holiday-year/holiday-year-form.tsx

@@ -0,0 +1,97 @@
+"use client"
+
+import { AlertTriangle, Plus } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import { FieldGroup } from "@/shared/components/ui/field"
+import {
+    Rhform,
+    RhfTextField,
+} from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+import { useResourceForm } from "@/shared/hooks/use-resource-form"
+import { useFormMutation } from "@/shared/hooks/use-form-mutation"
+
+import { holidayYearFormSchema, type HolidayYearFormValues } from "./holiday-year.schema"
+
+// ── Props ──
+
+export type HolidayYearFormProps = {
+    resourceId?: string | null
+    initialData?: unknown
+    onSuccess?: () => void
+}
+
+// ── Default values ──
+
+const DEFAULT_VALUES: HolidayYearFormValues = {
+    year: new Date().getFullYear(),
+}
+
+// ── Mapping helpers ──
+
+function mapToFormValues(data: unknown): HolidayYearFormValues {
+    const d = (data as any)?.data ?? data ?? {}
+    return {
+        year: d.year ?? new Date().getFullYear(),
+    }
+}
+
+// ── Component ──
+
+export function HolidayYearForm({ resourceId, initialData, onSuccess }: HolidayYearFormProps) {
+    const api = useAuthApi()
+
+    const { form } = useResourceForm<HolidayYearFormValues, any>({
+        schema: holidayYearFormSchema,
+        defaultValues: DEFAULT_VALUES,
+        resourceId: null,
+        initialData,
+        mapToFormValues,
+    })
+
+    const { mutate, error, isPending } = useFormMutation(form, {
+        mutationFn: (values: HolidayYearFormValues) => {
+            const promise = api.holidayYears.create({ year: values.year })
+            toast.promise(promise, {
+                loading: "Creating holiday year...",
+                success: "Holiday year created successfully",
+                error: "Failed to create holiday year",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            form.reset()
+            onSuccess?.()
+        },
+    })
+
+    return (
+        <Rhform form={form} onSubmit={(values) => mutate(values)}>
+            {error && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTriangle className="me-2 h-4 w-4" />
+                    <AlertTitle>Failed to create holiday year</AlertTitle>
+                    {error.message}
+                </Alert>
+            )}
+
+            <FieldGroup>
+                <RhfTextField
+                    name="year"
+                    label="Year"
+                    placeholder="e.g. 2026"
+                    type="number"
+                    required
+                />
+
+                <Button type="submit" variant="default" disabled={isPending}>
+                    <Plus />
+                    {isPending ? "Creating..." : "Create Holiday Year"}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}

apps/dashboard/modules/settings/holiday-year/holiday-year.schema.ts

@@ -0,0 +1,7 @@
+import { z } from "zod"
+
+export const holidayYearFormSchema = z.object({
+    year: z.coerce.number().min(1900, "Year is required").max(2100, "Invalid year"),
+})
+
+export type HolidayYearFormValues = z.infer<typeof holidayYearFormSchema>

apps/dashboard/modules/settings/tax-rates/tax-form.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import { AlertTriangle, Plus, Save } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import { FieldGroup } from "@/shared/components/ui/field"
+import {
+    Rhform,
+    RhfTextField,
+    RhfTextareaField,
+    RhfCheckboxField,
+} from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+import { useResourceForm } from "@/shared/hooks/use-resource-form"
+import { useFormMutation } from "@/shared/hooks/use-form-mutation"
+
+import { taxFormSchema, type TaxFormValues } from "./tax.schema"
+import { TAX_ROUTES } from "@garage/api"
+
+// ── Props ──
+
+export type TaxFormProps = {
+    resourceId?: string | null
+    initialData?: unknown
+    onSuccess?: () => void
+}
+
+// ── Default values ──
+
+const DEFAULT_VALUES: TaxFormValues = {
+    title: "",
+    note: "",
+    rate: 0,
+    is_default: false,
+}
+
+// ── Mapping helpers ──
+
+function mapToFormValues(data: unknown): TaxFormValues {
+    const d = (data as any)?.data ?? data ?? {}
+    return {
+        title: d.title ?? "",
+        note: d.note ?? "",
+        rate: d.rate ? Number(d.rate) : 0,
+        is_default: d.is_default ?? false,
+    }
+}
+
+function mapFormToPayload(values: TaxFormValues) {
+    return {
+        title: values.title,
+        note: values.note || undefined,
+        rate: values.rate,
+        is_default: values.is_default,
+    }
+}
+
+// ── Component ──
+
+export function TaxForm({ resourceId, initialData, onSuccess }: TaxFormProps) {
+    const api = useAuthApi()
+
+    const { form, isEditing } = useResourceForm<TaxFormValues, any>({
+        schema: taxFormSchema,
+        defaultValues: DEFAULT_VALUES,
+        resourceId,
+        initialData,
+        queryKey: [TAX_ROUTES.BY_ID, resourceId],
+        mapToFormValues,
+    })
+
+    const { mutate, error, isPending } = useFormMutation(form, {
+        mutationFn: (values: TaxFormValues) => {
+            const payload = mapFormToPayload(values)
+            const promise = isEditing && resourceId
+                ? api.taxes.update(resourceId, payload)
+                : api.taxes.create(payload)
+            toast.promise(promise, {
+                loading: isEditing ? "Updating tax..." : "Creating tax...",
+                success: isEditing ? "Tax updated successfully" : "Tax created successfully",
+                error: isEditing ? "Failed to update tax" : "Failed to create tax",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            form.reset()
+            onSuccess?.()
+        },
+    })
+
+    return (
+        <Rhform form={form} onSubmit={(values) => mutate(values)}>
+            {error && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTriangle className="me-2 h-4 w-4" />
+                    <AlertTitle>
+                        {isEditing ? "Failed to update tax" : "Failed to create tax"}
+                    </AlertTitle>
+                    {error.message}
+                </Alert>
+            )}
+
+            <FieldGroup>
+                <RhfTextField
+                    name="title"
+                    label="Title"
+                    placeholder="e.g. VAT"
+                    required
+                />
+                <RhfTextField
+                    name="rate"
+                    label="Rate (%)"
+                    placeholder="e.g. 18"
+                    type="number"
+                    required
+                />
+                <RhfTextareaField
+                    name="note"
+                    label="Note"
+                    placeholder="Optional description"
+                    rows={3}
+                />
+                <RhfCheckboxField
+                    name="is_default"
+                    label="Set as default"
+                />
+
+                <Button type="submit" variant="default" disabled={isPending}>
+                    {isEditing ? <Save /> : <Plus />}
+                    {isPending
+                        ? (isEditing ? "Updating..." : "Creating...")
+                        : (isEditing ? "Update Tax" : "Create Tax")}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}

apps/dashboard/modules/settings/tax-rates/tax.schema.ts

@@ -0,0 +1,10 @@
+import { z } from "zod"
+
+export const taxFormSchema = z.object({
+    title: z.string().min(1, "Title is required"),
+    note: z.string().optional(),
+    rate: z.coerce.number().min(0, "Rate must be 0 or more"),
+    is_default: z.boolean().optional(),
+})
+
+export type TaxFormValues = z.infer<typeof taxFormSchema>

apps/dashboard/modules/vehicles/inline-forms/document-type-inline-form.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { z } from "zod"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Plus } from "lucide-react"
+import { Button } from "@/shared/components/ui/button"
+import { FieldGroup } from "@/shared/components/ui/field"
+import { Rhform, RhfTextField, type InlineCreateFormProps } from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+
+const schema = z.object({
+    title: z.string().min(1, "Title is required"),
+})
+
+type FormValues = z.infer<typeof schema>
+
+export function DocumentTypeInlineForm({ onSuccess }: InlineCreateFormProps) {
+    const api = useAuthApi()
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(schema),
+        defaultValues: { title: "" },
+    })
+
+    const handleSubmit = async (values: FormValues) => {
+        try {
+            const result = await api.vehicleDocuments.createDocumentType({ title: values.title })
+            toast.success("Document type created")
+            form.reset()
+            const item = (result as any)?.data ?? result
+            onSuccess({ value: String(item.id), label: item.title ?? item.name ?? String(item.id) })
+        } catch {
+            toast.error("Failed to create document type")
+        }
+    }
+
+    return (
+        <Rhform form={form} onSubmit={handleSubmit}>
+            <FieldGroup>
+                <RhfTextField
+                    name="title"
+                    label="Title"
+                    placeholder="e.g. Registration Certificate"
+                    required
+                />
+                <Button type="submit" disabled={form.formState.isSubmitting}>
+                    <Plus />
+                    {form.formState.isSubmitting ? "Creating..." : "Create Document Type"}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}

apps/dashboard/modules/vehicles/mileage-form.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+import { AlertTriangle, Plus, Save } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import { FieldGroup } from "@/shared/components/ui/field"
+import { Rhform, RhfTextField } from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+import { useResourceForm } from "@/shared/hooks/use-resource-form"
+import { useFormMutation } from "@/shared/hooks/use-form-mutation"
+
+import { mileageFormSchema, type MileageFormValues } from "./mileage.schema"
+
+// ── Props ──
+
+export type MileageFormProps = {
+    vehicleId: string
+    resourceId?: string | null
+    initialData?: unknown
+    onSuccess?: () => void
+}
+
+// ── Default values ──
+
+const DEFAULT_VALUES: MileageFormValues = {
+    mileage: 0,
+    date: "",
+    time: "",
+}
+
+// ── Mapping helpers ──
+
+function mapToFormValues(data: unknown): MileageFormValues {
+    const d = (data as any)?.data ?? data ?? {}
+    return {
+        mileage: d.mileage ?? 0,
+        date: d.date || "",
+        time: d.time || "",
+    }
+}
+
+// ── Component ──
+
+export function MileageForm({ vehicleId, resourceId, initialData, onSuccess }: MileageFormProps) {
+    const api = useAuthApi()
+
+    const { form, isEditing } = useResourceForm<MileageFormValues, any>({
+        schema: mileageFormSchema,
+        defaultValues: DEFAULT_VALUES,
+        resourceId,
+        initialData,
+        mapToFormValues,
+    })
+
+    const { mutate, error, isPending } = useFormMutation(form, {
+        mutationFn: (values: MileageFormValues) => {
+            const payload = { mileage: values.mileage, date: values.date, time: values.time }
+            const promise = isEditing && resourceId
+                ? api.vehicleDocuments.updateMileage(resourceId, payload as any)
+                : api.vehicleDocuments.createMileage({ vehicle_id: Number(vehicleId), ...payload } as any)
+            toast.promise(promise, {
+                loading: isEditing ? "Updating mileage..." : "Adding mileage...",
+                success: isEditing ? "Mileage updated successfully" : "Mileage added successfully",
+                error: isEditing ? "Failed to update mileage" : "Failed to add mileage",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            form.reset()
+            onSuccess?.()
+        },
+    })
+
+    return (
+        <Rhform form={form} onSubmit={(values) => mutate(values)}>
+            {error && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTriangle className="me-2 h-4 w-4" />
+                    <AlertTitle>
+                        {isEditing ? "Failed to update mileage" : "Failed to add mileage"}
+                    </AlertTitle>
+                    {error.message}
+                </Alert>
+            )}
+
+            <FieldGroup>
+                <RhfTextField
+                    name="mileage"
+                    label="Mileage"
+                    placeholder="e.g. 50000"
+                    type="number"
+                    required
+                />
+
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfTextField
+                        name="date"
+                        label="Date"
+                        type="date"
+                        required
+                    />
+                    <RhfTextField
+                        name="time"
+                        label="Time"
+                        type="time"
+                        required
+                    />
+                </div>
+
+                <Button type="submit" disabled={isPending} className="w-full">
+                    {isPending ? null : isEditing ? <Save /> : <Plus />}
+                    {isPending ? "Saving..." : isEditing ? "Update Mileage" : "Add Mileage"}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}

apps/dashboard/modules/vehicles/mileage.schema.ts

@@ -0,0 +1,9 @@
+import { z } from "zod"
+
+export const mileageFormSchema = z.object({
+    mileage: z.coerce.number({ message: "Mileage is required" }).min(0, "Mileage must be 0 or greater"),
+    date: z.string().min(1, "Date is required"),
+    time: z.string().min(1, "Time is required"),
+})
+
+export type MileageFormValues = z.infer<typeof mileageFormSchema>

apps/dashboard/modules/vehicles/vehicle-actions.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import { useAuthApi } from "@/shared/useApi"
+import { useRouter } from "next/navigation"
+import { Button } from "@/shared/components/ui/button"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu"
+import { Ellipsis, Pencil, Trash2 } from "lucide-react"
+
+type VehicleActionsProps = {
+    vehicleId: string
+}
+
+export function VehicleActions({ vehicleId }: VehicleActionsProps) {
+    const api = useAuthApi()
+    const router = useRouter()
+
+    const handleEdit = () => {
+        router.push(`/sales/vehicles/${vehicleId}/edit`)
+    }
+
+    const handleDelete = async () => {
+        await api.vehicles.destroy(vehicleId)
+        router.push("/sales/vehicles")
+    }
+
+    return (
+        <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+                <Button variant="ghost" size="icon">
+                    <Ellipsis className="size-4" />
+                </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={handleEdit}>
+                    <Pencil className="size-4" />
+                    Edit
+                </DropdownMenuItem>
+                <DropdownMenuItem variant="destructive" onClick={handleDelete}>
+                    <Trash2 className="size-4" />
+                    Delete
+                </DropdownMenuItem>
+            </DropdownMenuContent>
+        </DropdownMenu>
+    )
+}

apps/dashboard/modules/vehicles/vehicle-context.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+import { createContext, useContext } from "react"
+
+type VehicleContextValue = {
+    id: string
+    label: string
+}
+
+const VehicleContext = createContext<VehicleContextValue | null>(null)
+
+export function VehicleProvider({ vehicle, children }: { vehicle: VehicleContextValue; children: React.ReactNode }) {
+    return <VehicleContext.Provider value={vehicle}>{children}</VehicleContext.Provider>
+}
+
+export function useVehicle() {
+    return useContext(VehicleContext)
+}

apps/dashboard/modules/vehicles/vehicle-document-form.tsx

@@ -0,0 +1,144 @@
+"use client"
+
+import { AlertTriangle, Plus, Save } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import { FieldGroup } from "@/shared/components/ui/field"
+import {
+    Rhform,
+    RhfTextareaField,
+    RhfAsyncSelectField,
+    RhfDocumentField,
+} from "@/shared/components/form"
+import { DocumentTypeInlineForm } from "./inline-forms/document-type-inline-form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+import { useResourceForm } from "@/shared/hooks/use-resource-form"
+import { useFormMutation } from "@/shared/hooks/use-form-mutation"
+import { toRelation, toId } from "@/shared/lib/utils"
+
+import { vehicleDocumentFormSchema, type VehicleDocumentFormValues } from "./vehicle-document.schema"
+
+// ── Props ──
+
+export type VehicleDocumentFormProps = {
+    vehicleId: string
+    resourceId?: string | null
+    initialData?: unknown
+    onSuccess?: () => void
+}
+
+// ── Default values ──
+
+const DEFAULT_VALUES: VehicleDocumentFormValues = {
+    document_type: null,
+    file: null,
+    note: "",
+}
+
+// ── Mapping helpers ──
+
+const mapLookupOption = (item: any) => ({
+    value: String(item.id),
+    label: item.name ?? item.title ?? String(item.id),
+})
+
+const STORE_OBJECT = { getOptionValue: (o: any) => o, getOptionLabel: (o: any) => o.label }
+
+function mapToFormValues(data: unknown): VehicleDocumentFormValues {
+    const d = (data as any)?.data ?? data ?? {}
+
+    return {
+        document_type: toRelation(d.document_type_id, d.document_type?.name ?? d.document_type?.title),
+        file: null,
+        note: d.note || "",
+    }
+}
+
+function mapToPayload(values: VehicleDocumentFormValues, vehicleId: string) {
+    return {
+        vehicle_id: Number(vehicleId),
+        document_type_id: toId(values.document_type),
+        file: values.file instanceof File ? values.file : undefined,
+        note: values.note || undefined,
+    }
+}
+
+// ── Component ──
+
+export function VehicleDocumentForm({ vehicleId, resourceId, initialData, onSuccess }: VehicleDocumentFormProps) {
+    const api = useAuthApi()
+
+    const { form, isEditing } = useResourceForm<VehicleDocumentFormValues, any>({
+        schema: vehicleDocumentFormSchema,
+        defaultValues: DEFAULT_VALUES,
+        resourceId,
+        initialData,
+        mapToFormValues,
+    })
+
+    const { mutate, error, isPending } = useFormMutation(form, {
+        mutationFn: (values: VehicleDocumentFormValues) => {
+            const payload = mapToPayload(values, vehicleId)
+            const promise = isEditing && resourceId
+                ? api.vehicleDocuments.updateDocument(resourceId, payload)
+                : api.vehicleDocuments.createDocument(payload)
+            toast.promise(promise, {
+                loading: isEditing ? "Updating document..." : "Uploading document...",
+                success: isEditing ? "Document updated successfully" : "Document uploaded successfully",
+                error: isEditing ? "Failed to update document" : "Failed to upload document",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            form.reset()
+            onSuccess?.()
+        },
+    })
+
+    return (
+        <Rhform form={form} onSubmit={(values) => mutate(values)}>
+            {error && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTriangle className="me-2 h-4 w-4" />
+                    <AlertTitle>
+                        {isEditing ? "Failed to update document" : "Failed to upload document"}
+                    </AlertTitle>
+                    {error.message}
+                </Alert>
+            )}
+
+            <FieldGroup>
+                <RhfAsyncSelectField
+                    name="document_type"
+                    label="Document Type"
+                    placeholder="Select document type"
+                    queryKey={["document-types"]}
+                    listFn={() => api.vehicleDocuments.listDocumentTypes()}
+                    mapOption={mapLookupOption}
+                    createForm={(props) => <DocumentTypeInlineForm {...props} />}
+                    createLabel="Document Type"
+                    {...STORE_OBJECT}
+                />
+
+                <RhfDocumentField
+                    name="file"
+                    label="Document File"
+                    required
+                />
+
+                <RhfTextareaField
+                    name="note"
+                    label="Note"
+                    placeholder="Optional notes about this document"
+                />
+
+                <Button type="submit" disabled={isPending} className="w-full">
+                    {isPending ? null : isEditing ? <Save /> : <Plus />}
+                    {isPending ? "Saving..." : isEditing ? "Update Document" : "Upload Document"}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}

apps/dashboard/modules/vehicles/vehicle-document.schema.ts

@@ -0,0 +1,11 @@
+import { z } from "zod"
+
+const relationFieldSchema = z.object({ value: z.string(), label: z.string() }).nullable()
+
+export const vehicleDocumentFormSchema = z.object({
+    document_type: relationFieldSchema,
+    file: z.instanceof(File, { message: "File is required" }).nullable(),
+    note: z.string().optional(),
+})
+
+export type VehicleDocumentFormValues = z.infer<typeof vehicleDocumentFormSchema>

apps/dashboard/modules/vehicles/vehicle-form.tsx

@@ -10,6 +10,7 @@ import {
     RhfTextField,
     RhfTextareaField,
     RhfAsyncSelectField,
+    RhfImageField,
 } from "@/shared/components/form"
 import { ShopTypeInlineForm } from "./inline-forms/shop-type-inline-form"
 import { BodyTypeInlineForm } from "./inline-forms/body-type-inline-form"
@@ -52,6 +53,7 @@ const DEFAULT_VALUES: VehicleFormValues = {
     mileage: "",
     owners_number: "",
     note: "",
+    image: null,
 }
 
 // ── Mapping helpers ──
@@ -83,10 +85,11 @@ function mapToFormValues(data: unknown): VehicleFormValues {
         mileage: d.mileage || "",
         owners_number: d.owners_number || "",
         note: d.note || "",
+        image: null,
     }
 }
 
-function mapCreatePayload(values: VehicleFormValues) {
+function mapToPayload(values: VehicleFormValues) {
     return {
         shop_type_id: toId(values.shop_type),
         vehicle_body_type_id: toId(values.vehicle_body_type),
@@ -104,13 +107,7 @@ function mapCreatePayload(values: VehicleFormValues) {
         mileage: values.mileage || undefined,
         owners_number: values.owners_number || undefined,
         note: values.note || undefined,
-    }
-}
-
-function mapUpdatePayload(values: VehicleFormValues) {
-    return {
-        mileage: values.mileage || undefined,
-        license_plate: values.license_plate || undefined,
+        image: values.image instanceof File ? values.image : undefined,
     }
 }
 
@@ -129,9 +126,10 @@ export function VehicleForm({ resourceId, initialData, onSuccess }: VehicleFormP
 
     const { mutate, error, isPending } = useFormMutation(form, {
         mutationFn: (values: VehicleFormValues) => {
+            const payload = mapToPayload(values)
             const promise = isEditing && resourceId
-                ? api.vehicles.update(resourceId, mapUpdatePayload(values))
-                : api.vehicles.create(mapCreatePayload(values))
+                ? api.vehicles.update(resourceId, payload)
+                : api.vehicles.create(payload)
             toast.promise(promise, {
                 loading: isEditing ? "Updating vehicle..." : "Creating vehicle...",
                 success: isEditing ? "Vehicle updated successfully" : "Vehicle created successfully",
@@ -158,102 +156,97 @@ export function VehicleForm({ resourceId, initialData, onSuccess }: VehicleFormP
             )}
 
             <FieldGroup>
-                {!isEditing && (
-                    <>
-                        {/* Vehicle identity */}
-                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
-                            <RhfTextField name="make" label="Make" placeholder="e.g. Toyota" required />
-                            <RhfTextField name="model" label="Model" placeholder="e.g. Camry" required />
-                            <RhfTextField name="year" label="Year" placeholder="e.g. 2024" required />
-                        </div>
+                {/* Vehicle identity */}
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+                    <RhfTextField name="make" label="Make" placeholder="e.g. Toyota" required />
+                    <RhfTextField name="model" label="Model" placeholder="e.g. Camry" required />
+                    <RhfTextField name="year" label="Year" placeholder="e.g. 2024" required />
+                </div>
 
-                        <RhfTextField name="sub_model" label="Sub Model" placeholder="e.g. LE" />
+                <RhfTextField name="sub_model" label="Sub Model" placeholder="e.g. LE" />
 
-                        {/* Associations */}
-                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                            <RhfAsyncSelectField
-                                name="shop_type"
-                                label="Shop Type"
-                                placeholder="Select shop type"
-                                queryKey={["shop-types"]}
-                                listFn={() => api.shopTypes.list()}
-                                mapOption={mapLookupOption}
-                                createForm={(props) => <ShopTypeInlineForm {...props} />}
-                                createLabel="Shop Type"
-                                {...STORE_OBJECT}
-                            />
-                            <RhfAsyncSelectField
-                                name="vehicle_body_type"
-                                label="Body Type"
-                                placeholder="Select body type"
-                                queryKey={["vehicle-body-types"]}
-                                listFn={() => api.vehicleAttributes.listBodyTypes()}
-                                mapOption={mapLookupOption}
-                                createForm={(props) => <BodyTypeInlineForm {...props} />}
-                                createLabel="Body Type"
-                                {...STORE_OBJECT}
-                            />
-                        </div>
+                {/* Associations */}
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfAsyncSelectField
+                        name="shop_type"
+                        label="Shop Type"
+                        placeholder="Select shop type"
+                        queryKey={["shop-types"]}
+                        listFn={() => api.shopTypes.list()}
+                        mapOption={mapLookupOption}
+                        createForm={(props) => <ShopTypeInlineForm {...props} />}
+                        createLabel="Shop Type"
+                        {...STORE_OBJECT}
+                    />
+                    <RhfAsyncSelectField
+                        name="vehicle_body_type"
+                        label="Body Type"
+                        placeholder="Select body type"
+                        queryKey={["vehicle-body-types"]}
+                        listFn={() => api.vehicleAttributes.listBodyTypes()}
+                        mapOption={mapLookupOption}
+                        createForm={(props) => <BodyTypeInlineForm {...props} />}
+                        createLabel="Body Type"
+                        {...STORE_OBJECT}
+                    />
+                </div>
 
-                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                            <RhfAsyncSelectField
-                                name="vehicle_fuel_type"
-                                label="Fuel Type"
-                                placeholder="Select fuel type"
-                                queryKey={["vehicle-fuel-types"]}
-                                listFn={() => api.vehicleAttributes.listFuelTypes()}
-                                mapOption={mapLookupOption}
-                                createForm={(props) => <FuelTypeInlineForm {...props} />}
-                                createLabel="Fuel Type"
-                                {...STORE_OBJECT}
-                            />
-                            <RhfAsyncSelectField
-                                name="vehicle_transmission"
-                                label="Transmission"
-                                placeholder="Select transmission"
-                                queryKey={["vehicle-transmissions"]}
-                                listFn={() => api.vehicleAttributes.listTransmissions()}
-                                mapOption={mapLookupOption}
-                                createForm={(props) => <TransmissionInlineForm {...props} />}
-                                createLabel="Transmission"
-                                {...STORE_OBJECT}
-                            />
-                        </div>
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfAsyncSelectField
+                        name="vehicle_fuel_type"
+                        label="Fuel Type"
+                        placeholder="Select fuel type"
+                        queryKey={["vehicle-fuel-types"]}
+                        listFn={() => api.vehicleAttributes.listFuelTypes()}
+                        mapOption={mapLookupOption}
+                        createForm={(props) => <FuelTypeInlineForm {...props} />}
+                        createLabel="Fuel Type"
+                        {...STORE_OBJECT}
+                    />
+                    <RhfAsyncSelectField
+                        name="vehicle_transmission"
+                        label="Transmission"
+                        placeholder="Select transmission"
+                        queryKey={["vehicle-transmissions"]}
+                        listFn={() => api.vehicleAttributes.listTransmissions()}
+                        mapOption={mapLookupOption}
+                        createForm={(props) => <TransmissionInlineForm {...props} />}
+                        createLabel="Transmission"
+                        {...STORE_OBJECT}
+                    />
+                </div>
 
-                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                            <RhfAsyncSelectField
-                                name="vehicle_color"
-                                label="Color"
-                                placeholder="Select color"
-                                queryKey={["vehicle-colors"]}
-                                listFn={() => api.vehicleAttributes.listColors()}
-                                mapOption={mapLookupOption}
-                                createForm={(props) => <ColorInlineForm {...props} />}
-                                createLabel="Color"
-                                {...STORE_OBJECT}
-                            />
-                            <RhfTextField name="vin_number" label="VIN Number" placeholder="e.g. 1HGBH41JXMN109186" />
-                        </div>
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfAsyncSelectField
+                        name="vehicle_color"
+                        label="Color"
+                        placeholder="Select color"
+                        queryKey={["vehicle-colors"]}
+                        listFn={() => api.vehicleAttributes.listColors()}
+                        mapOption={mapLookupOption}
+                        createForm={(props) => <ColorInlineForm {...props} />}
+                        createLabel="Color"
+                        {...STORE_OBJECT}
+                    />
+                    <RhfTextField name="vin_number" label="VIN Number" placeholder="e.g. 1HGBH41JXMN109186" />
+                </div>
 
-                        {/* Technical specs */}
-                        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                            <RhfTextField name="engine_size" label="Engine Size" placeholder="e.g. 2.5L" />
-                            <RhfTextField name="drivetrain" label="Drivetrain" placeholder="e.g. FWD" />
-                        </div>
+                {/* Technical specs */}
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfTextField name="engine_size" label="Engine Size" placeholder="e.g. 2.5L" />
+                    <RhfTextField name="drivetrain" label="Drivetrain" placeholder="e.g. FWD" />
+                </div>
 
-                        <RhfTextField name="owners_number" label="Number of Owners" placeholder="e.g. 1" />
-                    </>
-                )}
+                <RhfTextField name="owners_number" label="Number of Owners" placeholder="e.g. 1" />
 
-                {/* Editable in both create and update */}
                 <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
                     <RhfTextField name="license_plate" label="License Plate" placeholder="e.g. ABC-123" />
                     <RhfTextField name="mileage" label="Mileage" placeholder="e.g. 10000" />
                 </div>
 
-                {!isEditing && (
-                    <RhfTextareaField name="note" label="Notes" rows={3} />
-                )}
+                <RhfImageField name="image" label="Image" />
+
+                <RhfTextareaField name="note" label="Notes" rows={3} />
 
                 <Button type="submit" variant="default" disabled={isPending}>
                     {isEditing ? <Save /> : <Plus />}

apps/dashboard/modules/vehicles/vehicle-general-info.tsx

@@ -0,0 +1,244 @@
+import {
+    Car,
+    Calendar,
+    Gauge,
+    Fuel,
+    Cog,
+    Palette,
+    Hash,
+    FileText,
+    Users,
+    Shield,
+    Wrench,
+    CircleDot,
+} from "lucide-react"
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle,
+} from "@/shared/components/ui/card"
+import { Badge } from "@/shared/components/ui/badge"
+import { Separator } from "@/shared/components/ui/separator"
+
+type VehicleData = {
+    id?: number
+    make?: string
+    model?: string
+    year?: string
+    sub_model?: string
+    license_plate?: string
+    vin_number?: string
+    engine_number?: string | null
+    engine_size?: string
+    drivetrain?: string
+    mileage?: string
+    owners_number?: string
+    front_tire_size?: string | null
+    rear_tire_size?: string | null
+    note?: string
+    image_url?: string | null
+    reg_date?: string | null
+    mfg_date?: string | null
+    created_at?: string
+    updated_at?: string
+    shop_type?: { id?: number; title?: string }
+    vehicle_body_type?: { id?: number; title?: string }
+    vehicle_fuel_type?: { id?: number; title?: string }
+    vehicle_transmission?: { id?: number; title?: string }
+    vehicle_color?: { id?: number; title?: string; code?: string }
+}
+
+type VehicleGeneralInfoProps = {
+    vehicle: VehicleData
+}
+
+function InfoItem({
+    icon: Icon,
+    label,
+    value,
+}: {
+    icon: React.ComponentType<{ className?: string }>
+    label: string
+    value?: string | null
+}) {
+    return (
+        <div className="flex items-start gap-3">
+            <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+                <Icon className="size-4" />
+            </div>
+            <div className="flex flex-col gap-0.5">
+                <span className="text-xs text-muted-foreground">{label}</span>
+                <span className="text-sm font-medium">
+                    {value || <span className="text-muted-foreground">—</span>}
+                </span>
+            </div>
+        </div>
+    )
+}
+
+export function VehicleGeneralInfo({ vehicle }: VehicleGeneralInfoProps) {
+    return (
+        <div className="grid gap-6 md:grid-cols-2">
+            {/* Vehicle Identity */}
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <Car className="size-4" />
+                        Vehicle Identity
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-4">
+                    <div className="flex flex-wrap items-center gap-2">
+                        <Badge variant="secondary">
+                            {[vehicle.make, vehicle.model].filter(Boolean).join(" ") || "Unknown"}
+                        </Badge>
+                        {vehicle.year && <Badge variant="outline">{vehicle.year}</Badge>}
+                        {vehicle.sub_model && (
+                            <Badge variant="outline">{vehicle.sub_model}</Badge>
+                        )}
+                    </div>
+                    <Separator />
+                    <div className="grid gap-4 sm:grid-cols-2">
+                        <InfoItem
+                            icon={Hash}
+                            label="License Plate"
+                            value={vehicle.license_plate}
+                        />
+                        <InfoItem
+                            icon={Shield}
+                            label="VIN Number"
+                            value={vehicle.vin_number}
+                        />
+                        <InfoItem
+                            icon={FileText}
+                            label="Engine Number"
+                            value={vehicle.engine_number}
+                        />
+                        <InfoItem
+                            icon={Users}
+                            label="Number of Owners"
+                            value={vehicle.owners_number}
+                        />
+                    </div>
+                </CardContent>
+            </Card>
+
+            {/* Technical Specifications */}
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <Wrench className="size-4" />
+                        Technical Specifications
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-4">
+                    <div className="flex flex-wrap items-center gap-2">
+                        {vehicle.vehicle_body_type?.title && (
+                            <Badge variant="secondary">{vehicle.vehicle_body_type.title}</Badge>
+                        )}
+                        {vehicle.vehicle_transmission?.title && (
+                            <Badge variant="outline">{vehicle.vehicle_transmission.title}</Badge>
+                        )}
+                        {vehicle.vehicle_fuel_type?.title && (
+                            <Badge variant="outline">{vehicle.vehicle_fuel_type.title}</Badge>
+                        )}
+                    </div>
+                    <Separator />
+                    <div className="grid gap-4 sm:grid-cols-2">
+                        <InfoItem
+                            icon={Cog}
+                            label="Engine Size"
+                            value={vehicle.engine_size}
+                        />
+                        <InfoItem
+                            icon={CircleDot}
+                            label="Drivetrain"
+                            value={vehicle.drivetrain}
+                        />
+                        <InfoItem
+                            icon={Gauge}
+                            label="Mileage"
+                            value={vehicle.mileage ? `${Number(vehicle.mileage).toLocaleString()} km` : null}
+                        />
+                        <InfoItem
+                            icon={Fuel}
+                            label="Fuel Type"
+                            value={vehicle.vehicle_fuel_type?.title}
+                        />
+                    </div>
+                </CardContent>
+            </Card>
+
+            {/* Appearance & Shop */}
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <Palette className="size-4" />
+                        Appearance
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-4 sm:grid-cols-2">
+                    <InfoItem
+                        icon={Palette}
+                        label="Color"
+                        value={vehicle.vehicle_color?.title}
+                    />
+                    <InfoItem
+                        icon={Wrench}
+                        label="Shop Type"
+                        value={vehicle.shop_type?.title}
+                    />
+                    <InfoItem
+                        icon={CircleDot}
+                        label="Front Tire Size"
+                        value={vehicle.front_tire_size}
+                    />
+                    <InfoItem
+                        icon={CircleDot}
+                        label="Rear Tire Size"
+                        value={vehicle.rear_tire_size}
+                    />
+                </CardContent>
+            </Card>
+
+            {/* Dates & Notes */}
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        <Calendar className="size-4" />
+                        Dates & Notes
+                    </CardTitle>
+                </CardHeader>
+                <CardContent className="grid gap-4">
+                    <div className="grid gap-4 sm:grid-cols-2">
+                        <InfoItem
+                            icon={Calendar}
+                            label="Registration Date"
+                            value={vehicle.reg_date ? new Date(vehicle.reg_date).toLocaleDateString() : null}
+                        />
+                        <InfoItem
+                            icon={Calendar}
+                            label="Manufacturing Date"
+                            value={vehicle.mfg_date ? new Date(vehicle.mfg_date).toLocaleDateString() : null}
+                        />
+                    </div>
+                    {vehicle.note && (
+                        <>
+                            <Separator />
+                            <div className="flex items-start gap-3">
+                                <div className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-muted text-muted-foreground">
+                                    <FileText className="size-4" />
+                                </div>
+                                <div className="flex flex-col gap-0.5">
+                                    <span className="text-xs text-muted-foreground">Note</span>
+                                    <p className="text-sm whitespace-pre-wrap">{vehicle.note}</p>
+                                </div>
+                            </div>
+                        </>
+                    )}
+                </CardContent>
+            </Card>
+        </div>
+    )
+}

apps/dashboard/modules/vehicles/vehicle.schema.ts

@@ -30,6 +30,9 @@ export const vehicleFormSchema = z.object({
 
     // ── Notes ──
     note: z.string().optional(),
+
+    // ── Image ──
+    image: z.any().optional(),
 })
 
 export type VehicleFormValues = z.infer<typeof vehicleFormSchema>

apps/dashboard/modules/vendors/vendor-form.tsx

@@ -0,0 +1,124 @@
+"use client"
+
+import { AlertTriangle, Plus, Save } from "lucide-react"
+
+import { Button } from "@/shared/components/ui/button"
+import { Alert, AlertTitle } from "@/shared/components/ui/alert"
+import { FieldGroup } from "@/shared/components/ui/field"
+import {
+    Rhform,
+    RhfTextField,
+} from "@/shared/components/form"
+import { toast } from "sonner"
+import { useAuthApi } from "@/shared/useApi"
+import { useResourceForm } from "@/shared/hooks/use-resource-form"
+import { useFormMutation } from "@/shared/hooks/use-form-mutation"
+
+import {
+    vendorFormSchema,
+    type VendorFormValues,
+} from "./vendor.schema"
+import { VENDOR_ROUTES } from "@garage/api"
+
+// ── Props ──
+
+export type VendorFormProps = {
+    resourceId?: string | null
+    initialData?: unknown
+    onSuccess?: () => void
+}
+
+// ── Default values ──
+
+const DEFAULT_VALUES: VendorFormValues = {
+    first_name: "",
+    last_name: "",
+    company_name: "",
+    email: "",
+}
+
+// ── Mapping helpers ──
+
+function mapToFormValues(data: unknown): VendorFormValues {
+    const d = (data as any)?.data ?? data ?? {}
+
+    return {
+        first_name: d.first_name || "",
+        last_name: d.last_name || "",
+        company_name: d.company_name || "",
+        email: d.email || "",
+    }
+}
+
+function mapFormToPayload(values: VendorFormValues) {
+    return {
+        first_name: values.first_name,
+        last_name: values.last_name || undefined,
+        company_name: values.company_name || undefined,
+        email: values.email || undefined,
+    }
+}
+
+// ── Component ──
+
+export function VendorForm({ resourceId, initialData, onSuccess }: VendorFormProps) {
+    const api = useAuthApi()
+
+    const { form, isEditing } = useResourceForm<VendorFormValues, any>({
+        schema: vendorFormSchema,
+        defaultValues: DEFAULT_VALUES,
+        resourceId,
+        initialData,
+        mapToFormValues,
+    })
+
+    const { mutate, error, isPending } = useFormMutation(form, {
+        mutationFn: (values: VendorFormValues) => {
+            const payload = mapFormToPayload(values)
+            const promise = isEditing && resourceId
+                ? api.vendors.update(resourceId, payload)
+                : api.vendors.create(payload)
+            toast.promise(promise, {
+                loading: isEditing ? "Updating vendor..." : "Creating vendor...",
+                success: isEditing ? "Vendor updated successfully" : "Vendor created successfully",
+                error: isEditing ? "Failed to update vendor" : "Failed to create vendor",
+            })
+            return promise
+        },
+        onSuccess: () => {
+            form.reset()
+            onSuccess?.()
+        },
+    })
+
+    return (
+        <Rhform form={form} onSubmit={(values) => mutate(values)}>
+            {error && (
+                <Alert variant="destructive" className="mb-4">
+                    <AlertTriangle className="me-2 h-4 w-4" />
+                    <AlertTitle>
+                        {isEditing ? "Failed to update vendor" : "Failed to create vendor"}
+                    </AlertTitle>
+                    {error.message}
+                </Alert>
+            )}
+
+            <FieldGroup>
+                <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <RhfTextField name="first_name" label="First Name" placeholder="John" required />
+                    <RhfTextField name="last_name" label="Last Name" placeholder="Doe" />
+                </div>
+
+                <RhfTextField name="company_name" label="Company Name" placeholder="Acme Supplies" />
+                <RhfTextField name="email" label="Email" placeholder="vendor@example.com" type="email" />
+
+                <Button type="submit" variant="default" disabled={isPending}>
+                    {isEditing ? <Save /> : <Plus />}
+                    {isPending
+                        ? (isEditing ? "Updating..." : "Creating...")
+                        : (isEditing ? "Update Vendor" : "Create Vendor")}
+                </Button>
+            </FieldGroup>
+        </Rhform>
+    )
+}

apps/dashboard/modules/vendors/vendor.schema.ts

@@ -0,0 +1,15 @@
+import { z } from "zod"
+
+const vendorFormSchema = z.object({
+    first_name: z.string().min(1, "First name is required"),
+    last_name: z.string().optional(),
+    company_name: z.string().optional(),
+    email: z
+        .union([z.string().email("Enter a valid email address"), z.literal("")])
+        .optional(),
+})
+
+type VendorFormValues = z.infer<typeof vendorFormSchema>
+
+export { vendorFormSchema }
+export type { VendorFormValues }

apps/dashboard/package.json

@@ -18,8 +18,8 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.3.0",
-    "@hookform/resolvers": "^5.2.2",
     "@garage/api": "workspace:*",
+    "@hookform/resolvers": "^5.2.2",
     "@tanstack/react-query": "^5.95.2",
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
@@ -32,6 +32,7 @@
     "next": "16.1.7",
     "next-themes": "^0.4.6",
     "nuqs": "^2.8.9",
+    "object-to-formdata": "^4.5.1",
     "radix-ui": "^1.4.3",
     "react": "^19.2.4",
     "react-day-picker": "^9.14.0",

apps/dashboard/shared/components/form/controls/document-input-field.tsx

@@ -0,0 +1,170 @@
+"use client"
+
+import { useCallback, useRef, useState, useEffect } from "react"
+import { FileUp, X, FileText, FileImage, FileSpreadsheet, File } from "lucide-react"
+import type { BaseFieldControlProps } from "../types"
+import { cn } from "@/shared/lib/utils"
+
+export type DocumentInputFieldProps = BaseFieldControlProps<File | null> & {
+    accept?: string
+}
+
+const IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp", "image/svg+xml"]
+
+function getFileIcon(file: File) {
+    if (IMAGE_TYPES.includes(file.type)) return FileImage
+    if (file.type === "application/pdf") return FileText
+    if (
+        file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
+        file.type === "application/vnd.ms-excel" ||
+        file.type === "text/csv"
+    ) return FileSpreadsheet
+    return File
+}
+
+function formatFileSize(bytes: number): string {
+    if (bytes < 1024) return `${bytes} B`
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+}
+
+export function DocumentInputField({
+    value,
+    onChange,
+    onBlur,
+    name,
+    disabled,
+    invalid,
+    accept = "image/*,.pdf,.doc,.docx,.xls,.xlsx,.csv,.txt",
+}: DocumentInputFieldProps) {
+    const inputRef = useRef<HTMLInputElement>(null)
+    const [preview, setPreview] = useState<string | null>(null)
+    const [isDragging, setIsDragging] = useState(false)
+
+    const isImage = value && IMAGE_TYPES.includes(value.type)
+
+    useEffect(() => {
+        if (!value || !isImage) {
+            setPreview(null)
+            return
+        }
+        const url = URL.createObjectURL(value)
+        setPreview(url)
+        return () => URL.revokeObjectURL(url)
+    }, [value, isImage])
+
+    const handleFile = useCallback(
+        (file: File | null) => {
+            onChange(file)
+        },
+        [onChange],
+    )
+
+    const handleDrop = useCallback(
+        (e: React.DragEvent) => {
+            e.preventDefault()
+            setIsDragging(false)
+            if (disabled) return
+            const file = e.dataTransfer.files?.[0] ?? null
+            handleFile(file)
+        },
+        [disabled, handleFile],
+    )
+
+    const handleDragOver = useCallback(
+        (e: React.DragEvent) => {
+            e.preventDefault()
+            if (!disabled) setIsDragging(true)
+        },
+        [disabled],
+    )
+
+    const handleDragLeave = useCallback(() => setIsDragging(false), [])
+
+    const handleClear = useCallback(
+        (e: React.MouseEvent) => {
+            e.stopPropagation()
+            onChange(null)
+            if (inputRef.current) inputRef.current.value = ""
+        },
+        [onChange],
+    )
+
+    const FileIcon = value ? getFileIcon(value) : FileUp
+
+    return (
+        <div
+            role="button"
+            tabIndex={0}
+            onClick={() => !disabled && inputRef.current?.click()}
+            onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault()
+                    inputRef.current?.click()
+                }
+            }}
+            onDrop={handleDrop}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onBlur={onBlur}
+            aria-invalid={invalid || undefined}
+            className={cn(
+                "relative flex min-h-35 cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed border-input bg-background p-4 text-sm transition-colors",
+                isDragging && "border-primary bg-primary/5",
+                invalid && "border-destructive",
+                disabled && "pointer-events-none opacity-50",
+            )}
+        >
+            <input
+                ref={inputRef}
+                type="file"
+                accept={accept}
+                name={name}
+                disabled={disabled}
+                className="hidden"
+                onChange={(e) => handleFile(e.target.files?.[0] ?? null)}
+            />
+
+            {value ? (
+                <>
+                    {isImage && preview ? (
+                        <img
+                            src={preview}
+                            alt="Preview"
+                            className="max-h-30 max-w-full rounded-md object-contain"
+                        />
+                    ) : (
+                        <div className="flex flex-col items-center gap-1.5">
+                            <FileIcon className="h-8 w-8 text-muted-foreground" />
+                            <span className="max-w-48 truncate font-medium text-foreground">
+                                {value.name}
+                            </span>
+                            <span className="text-xs text-muted-foreground">
+                                {formatFileSize(value.size)}
+                            </span>
+                        </div>
+                    )}
+                    {!disabled && (
+                        <button
+                            type="button"
+                            onClick={handleClear}
+                            className="absolute right-2 top-2 rounded-full bg-destructive p-1 text-destructive-foreground shadow-sm hover:bg-destructive/90"
+                        >
+                            <X className="h-3.5 w-3.5" />
+                        </button>
+                    )}
+                </>
+            ) : (
+                <>
+                    <FileUp className="h-8 w-8 text-muted-foreground" />
+                    <span className="text-muted-foreground">
+                        Click or drag & drop a file
+                    </span>
+                    <span className="text-xs text-muted-foreground">
+                        Images, PDF, Word, Excel, CSV, or text files
+                    </span>
+                </>
+            )}
+        </div>
+    )
+}

apps/dashboard/shared/components/form/controls/image-input-field.tsx

@@ -0,0 +1,133 @@
+"use client"
+
+import { useCallback, useRef, useState, useEffect } from "react"
+import { ImagePlus, X } from "lucide-react"
+import type { BaseFieldControlProps } from "../types"
+import { cn } from "@/shared/lib/utils"
+
+export type ImageInputFieldProps = BaseFieldControlProps<File | null> & {
+    accept?: string
+}
+
+export function ImageInputField({
+    value,
+    onChange,
+    onBlur,
+    name,
+    disabled,
+    invalid,
+    accept = "image/*",
+}: ImageInputFieldProps) {
+    const inputRef = useRef<HTMLInputElement>(null)
+    const [preview, setPreview] = useState<string | null>(null)
+    const [isDragging, setIsDragging] = useState(false)
+
+    useEffect(() => {
+        if (!value) {
+            setPreview(null)
+            return
+        }
+        const url = URL.createObjectURL(value)
+        setPreview(url)
+        return () => URL.revokeObjectURL(url)
+    }, [value])
+
+    const handleFile = useCallback(
+        (file: File | null) => {
+            if (file && !file.type.startsWith("image/")) return
+            onChange(file)
+        },
+        [onChange],
+    )
+
+    const handleDrop = useCallback(
+        (e: React.DragEvent) => {
+            e.preventDefault()
+            setIsDragging(false)
+            if (disabled) return
+            const file = e.dataTransfer.files?.[0] ?? null
+            handleFile(file)
+        },
+        [disabled, handleFile],
+    )
+
+    const handleDragOver = useCallback(
+        (e: React.DragEvent) => {
+            e.preventDefault()
+            if (!disabled) setIsDragging(true)
+        },
+        [disabled],
+    )
+
+    const handleDragLeave = useCallback(() => setIsDragging(false), [])
+
+    const handleClear = useCallback(
+        (e: React.MouseEvent) => {
+            e.stopPropagation()
+            onChange(null)
+            if (inputRef.current) inputRef.current.value = ""
+        },
+        [onChange],
+    )
+
+    return (
+        <div
+            role="button"
+            tabIndex={0}
+            onClick={() => !disabled && inputRef.current?.click()}
+            onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault()
+                    inputRef.current?.click()
+                }
+            }}
+            onDrop={handleDrop}
+            onDragOver={handleDragOver}
+            onDragLeave={handleDragLeave}
+            onBlur={onBlur}
+            aria-invalid={invalid || undefined}
+            className={cn(
+                "relative flex min-h-35 cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed border-input bg-background p-4 text-sm transition-colors",
+                isDragging && "border-primary bg-primary/5",
+                invalid && "border-destructive",
+                disabled && "pointer-events-none opacity-50",
+            )}
+        >
+            <input
+                ref={inputRef}
+                type="file"
+                accept={accept}
+                name={name}
+                disabled={disabled}
+                className="hidden"
+                onChange={(e) => handleFile(e.target.files?.[0] ?? null)}
+            />
+
+            {preview ? (
+                <>
+                    <img
+                        src={preview}
+                        alt="Preview"
+                        className="max-h-30 max-w-full rounded-md object-contain"
+                    />
+                    {!disabled && (
+                        <button
+                            type="button"
+                            onClick={handleClear}
+                            className="absolute right-2 top-2 rounded-full bg-destructive p-1 text-destructive-foreground shadow-sm hover:bg-destructive/90"
+                        >
+                            <X className="h-3.5 w-3.5" />
+                        </button>
+                    )}
+                </>
+            ) : (
+                <>
+                    <ImagePlus className="h-8 w-8 text-muted-foreground" />
+                    <span className="text-muted-foreground">
+                        Click or drag & drop an image
+                    </span>
+                </>
+            )}
+        </div>
+    )
+}

apps/dashboard/shared/components/form/fields/rhf-document-field.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import type { FieldValues, FieldPath } from "react-hook-form"
+import { RhfField } from "../rhf-field"
+import { DocumentInputField, type DocumentInputFieldProps } from "../controls/document-input-field"
+import type { BaseFieldControlProps } from "../types"
+
+type RhfDocumentFieldProps<
+    TValues extends FieldValues,
+    TName extends FieldPath<TValues>,
+> = {
+    name: TName
+    label?: string
+    description?: string
+    required?: boolean
+    disabled?: boolean
+} & Omit<DocumentInputFieldProps, keyof BaseFieldControlProps<File | null>>
+
+export function RhfDocumentField<
+    TValues extends FieldValues,
+    TName extends FieldPath<TValues>,
+>(props: RhfDocumentFieldProps<TValues, TName>) {
+    return <RhfField {...props} component={DocumentInputField} />
+}

apps/dashboard/shared/components/form/fields/rhf-image-field.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import type { FieldValues, FieldPath } from "react-hook-form"
+import { RhfField } from "../rhf-field"
+import { ImageInputField, type ImageInputFieldProps } from "../controls/image-input-field"
+import type { BaseFieldControlProps } from "../types"
+
+type RhfImageFieldProps<
+    TValues extends FieldValues,
+    TName extends FieldPath<TValues>,
+> = {
+    name: TName
+    label?: string
+    description?: string
+    required?: boolean
+    disabled?: boolean
+} & Omit<ImageInputFieldProps, keyof BaseFieldControlProps<File | null>>
+
+export function RhfImageField<
+    TValues extends FieldValues,
+    TName extends FieldPath<TValues>,
+>(props: RhfImageFieldProps<TValues, TName>) {
+    return <RhfField {...props} component={ImageInputField} />
+}

apps/dashboard/shared/components/form/index.ts

@@ -22,6 +22,8 @@ export {
   AsyncMultiSelectField, type AsyncMultiSelectFieldProps,
 } from "./controls/async-select-field"
 export { FileInputField, type FileInputFieldProps } from "./controls/file-input-field"
+export { ImageInputField, type ImageInputFieldProps } from "./controls/image-input-field"
+export { DocumentInputField, type DocumentInputFieldProps } from "./controls/document-input-field"
 
 // ── RHF Field Wrappers ──
 export { RhfTextField } from "./fields/rhf-text-field"
@@ -29,5 +31,7 @@ export { RhfTextareaField } from "./fields/rhf-textarea-field"
 export { RhfCheckboxField } from "./fields/rhf-checkbox-field"
 export { RhfSelectField } from "./fields/rhf-select-field"
 export { RhfFileField } from "./fields/rhf-file-field"
+export { RhfImageField } from "./fields/rhf-image-field"
+export { RhfDocumentField } from "./fields/rhf-document-field"
 export { RhfAsyncSelectField, RhfAsyncMultiSelectField, type InlineCreateFormProps, type InlineCreateConfig } from "./fields/rhf-async-select-field"
 export { SimpleTitleForm, type SimpleTitleFormProps } from "./fields/simple-title-form"

apps/dashboard/shared/data-view/resource-page/index.ts

@@ -10,5 +10,7 @@ export type {
 export type {
     ResourceFormProps,
     ResourcePageColumnHelpers,
+    ResourcePageHeaderHelpers,
+    ResourcePageContext,
     ResourcePageProps,
 } from "./resource-page"

apps/dashboard/shared/data-view/resource-page/resource-page.tsx

@@ -1,9 +1,8 @@
 "use client"
 
 import React from "react"
-import { DashboardHeader } from "@/base/components/layout/dashboard"
 import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
-import FormDialog from "@/shared/components/form-dialog"
+import type { DashboardHeaderProps } from "@/base/components/layout/dashboard"
 import { Card, CardContent } from "@/shared/components/ui/card"
 import { DataTable, type ActionsColumnOptions } from "@/shared/data-view/table-view"
 import { useResourcePage, type UseResourcePageOptions, type ResourceItem, type ResourcePageClient } from "./use-resource-page"
@@ -15,32 +14,60 @@ export type ResourceFormProps<TClient extends ResourcePageClient> = {
     onSuccess: () => void
 }
 
+export type ResourcePageHeaderHelpers<TClient extends ResourcePageClient> = {
+    selectedItem: ResourceItem<TClient> | null
+    invalidateQuery: () => void
+}
+
 export type ResourcePageColumnHelpers<TClient extends ResourcePageClient> = {
     actionsColumn: (options?: Partial<ActionsColumnOptions<ResourceItem<TClient>>>) => ColumnDef<ResourceItem<TClient>, unknown>
     openEdit: (row: ResourceItem<TClient>) => void
     deleteItem: (id: string) => Promise<unknown>
 }
 
+export type ResourcePageContext<TClient extends ResourcePageClient> = {
+    selectedItem: ResourceItem<TClient> | null
+    isDialogOpen: boolean
+    dialogResourceId: string | null
+    isLoading: boolean
+    data: ResourceItem<TClient>[]
+    openCreate: () => void
+    openEdit: (row: ResourceItem<TClient>) => void
+    closeDialog: () => void
+    deleteItem: (id: string) => Promise<unknown>
+    invalidateQuery: () => void
+}
+
+type ReactNodeOrRender<TClient extends ResourcePageClient> =
+    | React.ReactNode
+    | ((context: ResourcePageContext<TClient>) => React.ReactNode)
+
 export type ResourcePageProps<TClient extends ResourcePageClient> = UseResourcePageOptions<TClient> & {
-    title: string
     columns: ColumnDef<ResourceItem<TClient>>[] | ((helpers: ResourcePageColumnHelpers<TClient>) => ColumnDef<ResourceItem<TClient>>[])
-    renderForm: (props: ResourceFormProps<TClient>) => React.ReactNode
+    headerProps?: DashboardHeaderProps | ((helpers: ResourcePageHeaderHelpers<TClient>) => DashboardHeaderProps)
+    header?: ReactNodeOrRender<TClient> | null
     pageTitle?: string
     paramKey?: string
+    onRowClick?: (row: ResourceItem<TClient>) => void
+    toolbar?: ReactNodeOrRender<TClient>
+
 }
 
 export function ResourcePage<TClient extends ResourcePageClient>({
-    title,
     columns: columnsProp,
-    renderForm,
+    headerProps: headerPropsProp,
+    header,
     pageTitle,
     routeKey,
     getClient,
     queryOptions,
     paramKey,
+    onRowClick,
+    toolbar,
+    extraParams,
 }: ResourcePageProps<TClient>) {
     type TItem = ResourceItem<TClient>
-    const page = useResourcePage<TClient>({ routeKey, getClient, queryOptions, paramKey })
+    const page = useResourcePage<TClient>({ routeKey, getClient, queryOptions, paramKey, extraParams })
 
     const columns = typeof columnsProp === "function"
         ? columnsProp({
@@ -52,35 +79,48 @@ export function ResourcePage<TClient extends ResourcePageClient>({
 
     type ListResponse = { data?: TItem[] }
     const responseData = page.data as ListResponse | undefined
+    const items = (responseData?.data ?? []) as TItem[]
+
+    const context: ResourcePageContext<TClient> = {
+        selectedItem: page.selectedItem,
+        isDialogOpen: page.isDialogOpen,
+        dialogResourceId: page.dialogResourceId,
+        isLoading: page.isLoading,
+        data: items,
+        openCreate: page.openCreate,
+        openEdit: page.openEdit,
+        closeDialog: page.closeDialog,
+        deleteItem: page.deleteItem,
+        invalidateQuery: () => page.invalidateQuery(),
+    }
+
+    const resolvedHeaderProps = typeof headerPropsProp === "function"
+        ? headerPropsProp({
+            selectedItem: page.selectedItem,
+            invalidateQuery: () => page.invalidateQuery(),
+        })
+        : headerPropsProp
+
+    const resolvedHeader = typeof header === "function" ? header(context) : header
+    const resolvedToolbar = typeof toolbar === "function" ? toolbar(context) : toolbar
 
     return (
         <DashboardPage
-            header={
-                <DashboardHeader
-                    actions={
-                        <FormDialog title={title} paramKey={paramKey}>
-                            {(resourceId) =>
-                                renderForm({
-                                    resourceId,
-                                    initialData: page.selectedItem,
-                                    onSuccess: () => page.invalidateQuery(),
-                                })
-                            }
-                        </FormDialog>
-                    }
-                />
-            }
+            header={resolvedHeader}
+            headerProps={resolvedHeaderProps}
             title={pageTitle}
+            toolbar={resolvedToolbar}
         >
             <Card>
                 <CardContent>
                     <DataTable
                         columns={columns}
-                        data={(responseData?.data ?? []) as TItem[]}
+                        data={items}
                         pagination={page.pagination}
                         sorting={page.sorting}
                         onChange={page.handleChange}
                         isLoading={page.isLoading}
+                        onRowClick={onRowClick}
                     />
                 </CardContent>
             </Card>