updates

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>

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

@@ -25,6 +25,7 @@ export type UseResourcePageOptions<TClient extends ResourcePageClient> = {
     getClient: (api: ApiInstance) => TClient
     queryOptions?: Omit<UseQueryOptions<CrudListResponse<TClient>>, "queryKey" | "queryFn">
     paramKey?: string
+    extraParams?: Record<string, unknown>
 }
 
 export function useResourcePage<TClient extends ResourcePageClient>({
@@ -32,6 +33,7 @@ export function useResourcePage<TClient extends ResourcePageClient>({
     getClient,
     queryOptions,
     paramKey,
+    extraParams,
 }: UseResourcePageOptions<TClient>) {
     type TItem = ResourceItem<TClient>
 
@@ -44,6 +46,7 @@ export function useResourcePage<TClient extends ResourcePageClient>({
         queryKey: [routeKey],
         client,
         queryOptions,
+        extraParams,
     })
 
     const { mutateAsync: deleteItem } = useMutation({