@spacemade/ui 0.0.1

package/scripts/crud-scaffold/src/frontend/index.mjs

@@ -0,0 +1,1078 @@
+import { quote } from '../core/fields.mjs'
+import {
+  camel,
+  getResourceScope,
+  hasAnyProjectScopedResource,
+  namespace,
+  pageRoute,
+  pascalFromRoute,
+  snakeToCamel,
+  titleize,
+  unique,
+} from '../core/utils.mjs'
+
+export function createFrontendModel(resources) {
+  return resources
+    .map((resource) => {
+      const fields = resource.fields
+        .map((item) => {
+          const tsType = item.tsType.replaceAll('Date', 'string').replaceAll("'", '"')
+          return `  ${snakeToCamel(item.name)}: ${tsType}`
+        })
+        .join('\n')
+
+      return `export interface ${resource.name} {
+  id: string
+${fields}
+  createdAt: string
+  updatedAt: string
+}
+
+export type ${resource.name}Payload = Partial<${resource.name}>
+`
+    })
+    .join('\n')
+}
+
+export function createApiSlice(resources, options) {
+  const ns = namespace(options)
+  const hasProjectScope = hasAnyProjectScopedResource(resources, options)
+  const listFilters = unique(resources.flatMap((resource) => resource.listFilters || []))
+  const listFilterParamTypes = listFilters
+    .map((fieldName) => `\n  ${snakeToCamel(fieldName)}?: string`)
+    .join('')
+  const collectionActions = resources.flatMap((resource) =>
+    (resource.collectionActions || []).map((action) => ({ ...action, resource }))
+  )
+  const endpoints = resources
+    .map((resource) => {
+      const plural = pascalFromRoute(resource.route)
+      const singular = resource.name
+      const resourceHasProjectScope = !!getResourceScope(resource, options).projectField
+      const resourceListFilters = (resource.listFilters || [])
+        .map((fieldName) => `\n              ${fieldName}: params.${snakeToCamel(fieldName)},`)
+        .join('')
+
+      return `    get${plural}: builder.query<ApiPagingResponse<${singular}>, GetParams | void>({
+      query: (params) => ({
+        url: '/${resource.route}',
+        params: params
+          ? {
+              q: params.q,
+              nameLike: params.nameLike,
+              limit: params.limit,
+              page: params.page,${resourceHasProjectScope ? '\n              project_id: params.projectId,' : ''}
+${resourceListFilters}
+            }
+          : undefined,
+      }),
+      providesTags: (result) => {
+        const list = [{ type: '${plural}' as const, id: 'LIST' }]
+        const ids =
+          result?.results?.map((item: any) => ({
+            type: '${plural}' as const,
+            id: String(item.id),
+          })) ?? []
+
+        return [...list, ...ids]
+      },
+      transformResponse: (res) => keysToCamel(res),
+    }),
+    getOne${singular}: builder.query<${singular}, { id: string }>({
+      query: ({ id }) => '/${resource.route}/' + id,
+      providesTags: (_result, _error, { id }) => [{ type: '${plural}' as const, id }],
+      transformResponse: ({ ${resource.responseKey} }: { ${resource.responseKey}: ${singular} }) => keysToCamel(${resource.responseKey}),
+    }),
+    create${singular}: builder.mutation<${singular}, { payload: ${singular}Payload }>({
+      query: ({ payload }) => ({
+        url: '/${resource.route}',
+        method: 'POST',
+        body: keysToSnake(payload),
+      }),
+      invalidatesTags: [{ type: '${plural}', id: 'LIST' }],
+      transformResponse: ({ ${resource.responseKey} }: { ${resource.responseKey}: ${singular} }) => keysToCamel(${resource.responseKey}),
+    }),
+    update${singular}: builder.mutation<${singular}, { id: string; payload: ${singular}Payload }>({
+      query: ({ id, payload }) => ({
+        url: '/${resource.route}/' + id,
+        method: 'PATCH',
+        body: keysToSnake(payload),
+      }),
+      invalidatesTags: (_result, _error, { id }) => [
+        { type: '${plural}', id: 'LIST' },
+        { type: '${plural}', id },
+      ],
+      transformResponse: ({ ${resource.responseKey} }: { ${resource.responseKey}: ${singular} }) => keysToCamel(${resource.responseKey}),
+    }),
+    delete${singular}: builder.mutation<void, { id: string }>({
+      query: ({ id }) => ({
+        url: '/${resource.route}/' + id,
+        method: 'DELETE',
+      }),
+      invalidatesTags: (_result, _error, { id }) => [
+        { type: '${plural}', id: 'LIST' },
+        { type: '${plural}', id },
+      ],
+    }),`
+    })
+    .join('\n\n')
+  const actionStoreImports = unique(collectionActions.flatMap((action) => action.storeImports || []))
+    .join('\n')
+  const actionStoreTypes = collectionActions
+    .map((action) => action.storeTypes || '')
+    .filter(Boolean)
+    .join('\n\n')
+  const actionEndpoints = collectionActions
+    .map((action) => action.storeEndpoint)
+    .filter(Boolean)
+    .join('\n\n')
+
+  const exports = resources
+    .flatMap((resource) => {
+      const plural = pascalFromRoute(resource.route)
+      return [
+        `  useGet${plural}Query`,
+        `  useGetOne${resource.name}Query`,
+        `  useCreate${resource.name}Mutation`,
+        `  useUpdate${resource.name}Mutation`,
+        `  useDelete${resource.name}Mutation`,
+      ]
+    })
+    .concat(collectionActions.map((action) => `  ${action.storeHook}`))
+    .join(',\n')
+
+  const imports = resources
+    .flatMap((resource) => [resource.name, `${resource.name}Payload`])
+    .join(',\n  ')
+
+  const tagTypes = resources.map((resource) => `'${pascalFromRoute(resource.route)}'`).join(', ')
+
+return `import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+import { HYDRATE } from '@store/hydrate'
+import {
+  ${imports},
+} from '${options.src.importRoot}/store/model/${ns.modelFile}'
+import { BASE_API_URL } from '@helpers/api'
+import { keysToCamel } from '@helpers/data-transform'
+import { ApiPagingResponse } from '@helpers/types'
+${actionStoreImports ? `${actionStoreImports}\n` : ''}
+
+type GetParams = {
+  q?: string
+  nameLike?: string
+  limit?: number
+  page?: number${hasProjectScope ? '\n  projectId?: string' : ''}${listFilterParamTypes}
+}
+${actionStoreTypes ? `\n${actionStoreTypes}\n` : ''}
+
+const camelToSnake = (value: string) => value.replace(/[A-Z]/g, (letter) => '_' + letter.toLowerCase())
+
+const keysToSnake = (value: any): any => {
+  if (Array.isArray(value)) return value.map(keysToSnake)
+  if (!value || typeof value !== 'object' || value instanceof Date) return value
+
+  return Object.fromEntries(
+    Object.entries(value).map(([key, entry]) => [camelToSnake(key), keysToSnake(entry)])
+  )
+}
+
+export const ${options.store.apiSliceName} = createApi({
+  reducerPath: '${options.store.reducerPath}',
+  baseQuery: fetchBaseQuery({
+    baseUrl: BASE_API_URL,
+    credentials: 'include',
+  }),
+  extractRehydrationInfo(action, { reducerPath }) {
+    if (action.type === HYDRATE) {
+      return (action as any).payload[reducerPath]
+    }
+  },
+  tagTypes: [${tagTypes}],
+  endpoints: (builder) => ({
+${actionEndpoints ? `${actionEndpoints}\n\n` : ''}${endpoints}
+  }),
+})
+
+export const {
+${exports},
+  util: { getRunningQueriesThunk },
+} = ${options.store.apiSliceName}
+`
+}
+
+export function createResourceConfig(resources, options) {
+  const ns = namespace(options)
+  const entries = resources
+    .map((resource) => {
+      const key = camel(resource.name)
+      const route = pageRoute(resource, options)
+      const scope = getResourceScope(resource, options)
+      const defaultColumns = resource.fields
+        .filter((item) => !item.hideInTable)
+        .map((item) => {
+          const key = snakeToCamel(item.name)
+          return { key, label: item.label || titleize(key) }
+        })
+        .concat([{ key: 'updatedAt', label: 'Updated' }])
+      const columns = (resource.tableColumns || defaultColumns)
+        .map((item) => {
+          const columnKey = typeof item === 'string' ? item : item.key
+          const label = typeof item === 'string' ? titleize(item) : item.label || titleize(item.key)
+          return `      { key: '${columnKey}', label: '${label}' },`
+        })
+        .join('\n')
+      const formFields = resource.fields
+        .filter((item) => !item.skipSchema)
+        .map((item) => {
+          const key = snakeToCamel(item.name)
+          const label = item.label || titleize(key)
+          const inputType = item.enumValues
+            ? 'select'
+            : item.isJson || String(item.dataType || '').includes('TEXT')
+              ? 'textarea'
+              : item.tsType === 'boolean'
+                ? 'checkbox'
+                : 'input'
+          const options = item.enumValues
+            ? `, options: [${item.enumValues.map((value) => `{ label: '${titleize(value)}', value: '${value}' }`).join(', ')}]`
+            : ''
+          return `      { key: '${key}', label: '${label}', type: '${inputType}', required: ${String(item.schema?.includes('isRequired: true'))}${options} },`
+        })
+        .join('\n')
+      const detailActions = (resource.detailActions || [])
+        .map((action) => `      { label: '${action.label}', href: '${action.href}', icon: '${action.icon || ''}' },`)
+        .join('\n')
+      const detailSidebarItems = (resource.detailSidebarItems || [])
+        .map((item) => `      { label: '${item.label}', href: '${item.href}', icon: '${item.icon || ''}' },`)
+        .join('\n')
+
+      return `  ${key}: {
+    key: '${key}',
+    title: '${resource.title}',
+    description: '${resource.description}',
+    href: '/${route}',
+    icon: '${resource.icon}',
+    projectScoped: ${scope.includeProjectPicker ? 'true' : 'false'},
+    searchPlaceholder: '${resource.searchPlaceholder || `Search ${resource.title.toLowerCase()}`}',
+    detailRoute: '${resource.detailRoute || '[id]'}',
+    columns: [
+${columns}
+    ],
+    formFields: [
+${formFields}
+    ],
+    detailActions: [
+${detailActions}
+    ],
+    detailSidebarItems: [
+${detailSidebarItems}
+    ],
+  },`
+    })
+    .join('\n')
+
+  return `export type ${ns.pascal}ResourceKey =
+${resources.map((resource) => `  | '${camel(resource.name)}'`).join('\n')}
+
+export type ${ns.pascal}ResourceColumn = {
+  key: string
+  label: string
+}
+
+export type ${ns.pascal}ResourceConfig = {
+  key: ${ns.pascal}ResourceKey
+  title: string
+  description: string
+  href: string
+  icon: string
+  projectScoped: boolean
+  searchPlaceholder: string
+  detailRoute: string
+  columns: ${ns.pascal}ResourceColumn[]
+  formFields: Array<{
+    key: string
+    label: string
+    type: 'input' | 'textarea' | 'select' | 'checkbox'
+    required: boolean
+    options?: Array<{ label: string; value: string }>
+  }>
+  detailActions: Array<{
+    label: string
+    href: string
+    icon?: string
+  }>
+  detailSidebarItems: Array<{
+    label: string
+    href: string
+    icon?: string
+  }>
+}
+
+export const ${ns.camel}Resources: Record<${ns.pascal}ResourceKey, ${ns.pascal}ResourceConfig> = {
+${entries}
+}
+
+export const ${ns.camel}ResourceList = Object.values(${ns.camel}Resources)
+`
+}
+
+export function createSideNav(options) {
+  const ns = namespace(options)
+  const label = options.sideNav?.label || ns.title
+
+  return `import Link from 'next/link'
+import { useRouter } from '@lib/next-router'
+import { ${ns.camel}ResourceList } from '${options.src.importRoot}/config/${ns.resourcesFile}'
+
+export function ${ns.pascal}SideNav() {
+  const router = useRouter()
+  const currentPath = (router.asPath || router.pathname || '').split('?')[0]
+
+  return (
+    <nav aria-label="${label}">
+      <h2 className="sidebar-heading">${label}</h2>
+      <ul className="sidebar-list mb-5">
+        {${ns.camel}ResourceList.map((resource) => {
+          const isActive =
+            currentPath === resource.href ||
+            currentPath.startsWith(resource.href + '/')
+
+          return (
+            <li key={resource.key} className="sidebar-item" title={resource.title}>
+              <Link
+                href={resource.href}
+                className={isActive ? 'sidebar-link active' : 'sidebar-link'}
+              >
+                <i className={resource.icon} />
+                <span>{resource.title}</span>
+              </Link>
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}
+`
+}
+
+export function createResourceTable(options) {
+  const ns = namespace(options)
+
+  return `import isEmpty from 'lodash/isEmpty'
+import Button from '@components/common/button/Button'
+import Spinner from '@components/common/loading/Spinner'
+import TablePaging from '@components/common/table/TablePaging'
+import { FullDateAndTimeFormat } from '@helpers/date'
+import type { ApiPagingResponse } from '@helpers/types'
+import type { ${ns.pascal}ResourceConfig } from '${options.src.importRoot}/config/${ns.resourcesFile}'
+
+type ${ns.pascal}ResourceTableProps = {
+  resource: ${ns.pascal}ResourceConfig
+  data?: ApiPagingResponse<Record<string, any>>
+  isFetching: boolean
+  isLoading: boolean
+  onCreate?: () => void
+  onRowClick?: (item: Record<string, any>) => void
+  onDelete?: (item: Record<string, any>) => void
+}
+
+function formatValue(value: unknown) {
+  if (value === null || value === undefined) return ''
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No'
+  if (typeof value === 'string' && /^\\d{4}-\\d{2}-\\d{2}T/.test(value)) {
+    return FullDateAndTimeFormat(value)
+  }
+  if (typeof value === 'object') return JSON.stringify(value)
+
+  return String(value)
+}
+
+export function ${ns.pascal}ResourceTable({
+  resource,
+  data,
+  isFetching,
+  isLoading,
+  onCreate,
+  onRowClick,
+  onDelete,
+}: ${ns.pascal}ResourceTableProps) {
+  return (
+    <div className="mt-4">
+      {onCreate && (
+        <div className="d-flex align-items-center justify-content-end flex-wrap gap-2 mb-3">
+          <Button color="primary" size="sm" className="text-white" onClick={onCreate}>
+            Add {resource.title.slice(0, -1)}
+          </Button>
+        </div>
+      )}
+
+      <table className="table">
+        <thead>
+          <tr>
+            {resource.columns.map((column) => (
+              <th key={column.key} scope="col">
+                {column.label}
+              </th>
+            ))}
+            {onDelete && <th scope="col" className="text-end" aria-label="Actions" />}
+          </tr>
+        </thead>
+        <tbody>
+          {data?.results.map((item) => (
+            <tr
+              key={String(item.id)}
+              className={onRowClick ? 'pointer' : undefined}
+              onClick={() => onRowClick?.(item)}
+            >
+              {resource.columns.map((column) => (
+                <td key={column.key}>{formatValue(item[column.key])}</td>
+              ))}
+              {onDelete && (
+                <td className="text-end" onClick={(event) => event.stopPropagation()}>
+                  <Button
+                    size="sm"
+                    ariaLabel={'Delete ' + String(item.name || item.slug || item.id)}
+                    onClick={() => onDelete(item)}
+                  >
+                    <i className="bi bi-trash" aria-hidden="true" />
+                  </Button>
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      {isFetching && (
+        <div className="w-100 d-flex justify-content-center py-4">
+          <Spinner color="primary" />
+        </div>
+      )}
+
+      {!isLoading && !isFetching && isEmpty(data?.results) && (
+        <div className="d-flex flex-column align-items-center justify-content-center py-4">
+          <p className="mb-0">No {resource.title.toLowerCase()} found.</p>
+        </div>
+      )}
+
+      {!isEmpty(data?.results) && data?.count !== undefined && (
+        <TablePaging totalCount={data.count} defaultLimit={50} />
+      )}
+    </div>
+  )
+}
+`
+}
+
+export function createResourceModal(options) {
+  const ns = namespace(options)
+
+  return `import { useEffect } from 'react'
+import {
+  Drawer,
+  DrawerBody,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+} from '@chakra-ui/react'
+import { FieldValues, SubmitHandler, useForm } from 'react-hook-form'
+import Button from '@components/common/button/Button'
+import Input from '@components/common/forms/Input'
+import Select from '@components/common/forms/Select'
+import Textarea from '@components/common/forms/Textarea'
+import type { ${ns.pascal}ResourceConfig } from '${options.src.importRoot}/config/${ns.resourcesFile}'
+
+type ${ns.pascal}ResourceModalProps = {
+  resource: ${ns.pascal}ResourceConfig
+  item?: Record<string, any> | null
+  isOpen: boolean
+  onClose: () => void
+  onSave: (payload: Record<string, any>) => Promise<void>
+}
+
+export function ${ns.pascal}ResourceModal({
+  resource,
+  item,
+  isOpen,
+  onClose,
+  onSave,
+}: ${ns.pascal}ResourceModalProps) {
+  const {
+    register,
+    control,
+    getValues,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<FieldValues>()
+
+  useEffect(() => {
+    const defaults = Object.fromEntries(
+      resource.formFields.map((field) => {
+        const value = item?.[field.key]
+        if (field.type === 'checkbox') return [field.key, Boolean(value)]
+        return [field.key, value ?? '']
+      })
+    )
+    reset(defaults)
+  }, [item, resource.formFields, reset])
+
+  const onSubmit: SubmitHandler<FieldValues> = async (data) => {
+    const payload = Object.fromEntries(
+      resource.formFields.map((field) => {
+        const value = data[field.key]
+        if (field.type === 'checkbox') return [field.key, Boolean(value)]
+        if (value === '') return [field.key, null]
+        return [field.key, value]
+      })
+    )
+
+    await onSave(payload)
+    onClose()
+  }
+
+  return (
+    <Drawer isOpen={isOpen} onClose={onClose} size="xl">
+      <DrawerOverlay />
+      <DrawerContent className="drawer">
+        <DrawerCloseButton />
+        <DrawerHeader>{item?.id ? 'Update' : 'Create'} {resource.title.slice(0, -1)}</DrawerHeader>
+        <DrawerBody>
+          <form id={resource.key + '-resource-form'} onSubmit={handleSubmit(onSubmit)}>
+            {resource.formFields.map((field) => {
+              const validation = field.required ? { required: 'This field is required' } : undefined
+
+              if (field.type === 'select') {
+                return (
+                  <div key={field.key} className="mb-4 mt-3">
+                    <label>{field.label}</label>
+                    <p className="small mt-1 text-muted">Select {field.label.toLowerCase()}</p>
+                    <Select
+                      register={register(field.key, validation)}
+                      options={field.options || []}
+                      control={control}
+                      getValues={getValues}
+                      errors={errors}
+                      setFirstAsDefault={false}
+                    />
+                  </div>
+                )
+              }
+
+              if (field.type === 'textarea') {
+                return (
+                  <div key={field.key} className="mb-4 mt-3">
+                    <label>{field.label}</label>
+                    <p className="small mt-1 text-muted">Enter {field.label.toLowerCase()}</p>
+                    <Textarea
+                      label={field.label}
+                      register={register(field.key, validation)}
+                      errors={errors}
+                      getValues={getValues}
+                    />
+                  </div>
+                )
+              }
+
+              if (field.type === 'checkbox') {
+                return (
+                  <div key={field.key} className="form-check mb-4 mt-3">
+                    <input
+                      id={field.key}
+                      type="checkbox"
+                      className="form-check-input"
+                      {...register(field.key)}
+                    />
+                    <label className="form-check-label" htmlFor={field.key}>{field.label}</label>
+                  </div>
+                )
+              }
+
+              return (
+                <div key={field.key} className="mb-4 mt-3">
+                  <label>{field.label}</label>
+                  <p className="small mt-1 text-muted">Enter {field.label.toLowerCase()}</p>
+                  <Input
+                    label={field.label}
+                    placeholder={field.label}
+                    register={register(field.key, validation)}
+                    errors={errors}
+                    getValues={getValues}
+                  />
+                </div>
+              )
+            })}
+          </form>
+        </DrawerBody>
+        <DrawerFooter className="d-flex justify-content-end gap-2">
+          <Button onClick={onClose}>Cancel</Button>
+          <Button
+            type="submit"
+            color="primary"
+            className="text-white"
+            form={resource.key + '-resource-form'}
+            isLoading={isSubmitting}
+            disabled={isSubmitting}
+          >
+            Save
+          </Button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+`
+}
+
+export function createResourcePage(options) {
+  const ns = namespace(options)
+  const includeProjectPicker = hasAnyProjectScopedResource(options.resources || [], options)
+  const includeResourceSidebar = options.sideNav?.resourceSidebar !== false
+
+  return `import { useDisclosure } from '@chakra-ui/react'
+import { toast } from 'react-toastify'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import { useRouter } from '@lib/next-router'
+import { useSearchAndFilterCommon } from '@hooks'
+import type { ApiPagingResponse } from '@helpers/types'
+${includeResourceSidebar ? `import { ${ns.pascal}SideNav } from '${options.src.importRoot}/components/${ns.pascal}SideNav'\n` : ''}import { ${ns.pascal}ResourceModal } from '${options.src.importRoot}/components/${ns.pascal}ResourceModal'
+import { ${ns.pascal}ResourceTable } from '${options.src.importRoot}/components/${ns.pascal}ResourceTable'
+import type { ${ns.pascal}ResourceConfig } from '${options.src.importRoot}/config/${ns.resourcesFile}'
+${includeProjectPicker ? "import ProjectPickerNav from '@components/projects/ProjectPickerNav'\nimport { useGetActiveProjectQuery } from '@store/slice/api/projectApiSlice'\n" : ''}
+
+type QueryArgs = {
+  q?: string
+  nameLike?: string
+  limit?: number
+  page?: number${includeProjectPicker ? '\n  projectId?: string' : ''}
+}
+
+type UseListQuery = (args: QueryArgs) => {
+  data?: ApiPagingResponse<Record<string, any>>
+  isFetching: boolean
+  isLoading: boolean
+}
+
+type ${ns.pascal}ResourcePageProps = {
+  resource: ${ns.pascal}ResourceConfig
+  useListQuery: UseListQuery
+  useCreateMutation: any
+  useDeleteMutation: any
+}
+
+function slugifyDetailSegment(value: unknown) {
+  return String(value || '')
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '') || 'detail'
+}
+
+function resourceDetailHref(resource: ${ns.pascal}ResourceConfig, item: Record<string, any>) {
+  const id = encodeURIComponent(String(item.id || ''))
+  const name = encodeURIComponent(slugifyDetailSegment(item.name || item.slug || item.id))
+
+  return [resource.href, resource.detailRoute]
+    .join('/')
+    .replaceAll('[id]', id)
+    .replaceAll(':id', id)
+    .replaceAll('[name]', name)
+    .replaceAll(':name', name)
+}
+
+export function ${ns.pascal}ResourcePage({
+  resource,
+  useListQuery,
+  useCreateMutation,
+  useDeleteMutation,
+}: ${ns.pascal}ResourcePageProps) {
+  const router = useRouter()
+  const {
+    query: { q, limit, page },
+  } = router
+  const createDialog = useDisclosure()
+  const {
+    getLimitFromQuery,
+    calculateProperPageNumber,
+  } = useSearchAndFilterCommon()
+  const pageLimit = getLimitFromQuery(limit, 50)
+  const search = q?.toString()
+${includeProjectPicker ? `  const { data: activeProjectData } = useGetActiveProjectQuery(undefined, {
+    skip: !resource.projectScoped,
+  })
+  const activeProjectId =
+    resource.projectScoped && typeof activeProjectData?.projectId === 'string'
+      ? activeProjectData.projectId.trim()
+      : undefined
+` : ''}
+
+  const { data, isFetching, isLoading } = useListQuery({
+    q: search,
+    nameLike: search,
+    limit: pageLimit,
+    page: calculateProperPageNumber(page),
+${includeProjectPicker ? "    ...(resource.projectScoped && activeProjectId ? { projectId: activeProjectId } : {})," : ''}
+  })
+  const [createResource] = useCreateMutation()
+  const [deleteResource] = useDeleteMutation()
+
+  const handleCreate = async (payload: Record<string, any>) => {
+    try {
+      await createResource({ payload }).unwrap()
+      toast.success(resource.title.slice(0, -1) + ' created.')
+    } catch {
+      toast.error(resource.title.slice(0, -1) + ' could not be created.')
+      throw new Error('Create failed')
+    }
+  }
+
+  const handleDelete = async (item: Record<string, any>) => {
+    if (!item.id || !window.confirm('Delete this ' + resource.title.slice(0, -1).toLowerCase() + '?')) return
+
+    try {
+      await deleteResource({ id: String(item.id) }).unwrap()
+      toast.success(resource.title.slice(0, -1) + ' deleted.')
+    } catch {
+      toast.error(resource.title.slice(0, -1) + ' could not be deleted.')
+    }
+  }
+
+  return (
+    <SideNavLayout
+      useMainContentAreaId={false}
+      mainNavMode="list"
+${includeProjectPicker ? "      sidebarTopContent={(isCollapsed) => resource.projectScoped ? <ProjectPickerNav isCollapsed={isCollapsed} appPath={resource.href} /> : null}" : ''}
+${includeResourceSidebar ? `      sidebarContent={(isCollapsed) => (!isCollapsed ? <${ns.pascal}SideNav /> : null)}` : ''}
+    >
+      <div className="mt-5 w-100">
+        <div className="d-flex align-items-start justify-content-between gap-3">
+          <div>
+            <h1 className="mb-2">{resource.title}</h1>
+            <p className="text-muted mb-0">{resource.description}</p>
+          </div>
+        </div>
+
+        <${ns.pascal}ResourceTable
+          resource={resource}
+          data={data}
+          isFetching={isFetching}
+          isLoading={isLoading}
+          onCreate={createDialog.onOpen}
+          onRowClick={(item) => item.id ? router.push(resourceDetailHref(resource, item)) : undefined}
+          onDelete={handleDelete}
+        />
+        <${ns.pascal}ResourceModal
+          resource={resource}
+          isOpen={createDialog.isOpen}
+          onClose={createDialog.onClose}
+          onSave={handleCreate}
+        />
+      </div>
+    </SideNavLayout>
+  )
+}
+`
+}
+
+export function createPage(resource, options) {
+  const ns = namespace(options)
+  const plural = pascalFromRoute(resource.route)
+  const key = camel(resource.name)
+
+  if (resource.pageSource) {
+    return typeof resource.pageSource === 'function'
+      ? resource.pageSource({ resource, options, ns, plural, key, pageRoute: pageRoute(resource, options) })
+      : resource.pageSource
+  }
+
+  return `import type { NextPage } from 'next'
+import WithAuth from '@components/hoc/WithAuth'
+import { ${ns.pascal}ResourcePage } from '${options.src.importRoot}/components/${ns.pascal}ResourcePage'
+import { ${ns.camel}Resources } from '${options.src.importRoot}/config/${ns.resourcesFile}'
+import {
+  useCreate${resource.name}Mutation,
+  useDelete${resource.name}Mutation,
+  useGet${plural}Query,
+} from '${options.src.importRoot}/store/slice/api/${options.store.apiSliceName}'
+
+const ${resource.name}Page: NextPage = () => {
+  return (
+    <${ns.pascal}ResourcePage
+      resource={${ns.camel}Resources.${key}}
+      useListQuery={useGet${plural}Query}
+      useCreateMutation={useCreate${resource.name}Mutation}
+      useDeleteMutation={useDelete${resource.name}Mutation}
+    />
+  )
+}
+
+${resource.name}Page.getInitialProps = async () => {
+  return {
+    pageTitle: '${resource.title}',
+  }
+}
+
+export default WithAuth(${resource.name}Page)
+`
+}
+
+export function createDetailPage(resource, options) {
+  const ns = namespace(options)
+  const plural = pascalFromRoute(resource.route)
+  const key = camel(resource.name)
+  const title = resource.title.slice(0, -1)
+  const includeResourceSidebar = options.sideNav?.resourceSidebar !== false
+  const includeDetailSidebar = Array.isArray(resource.detailSidebarItems) && resource.detailSidebarItems.length > 0
+  const includeSidebarContent = includeResourceSidebar || includeDetailSidebar
+
+  return `import type { NextPage } from 'next'
+import Link from 'next/link'
+import {
+  IconButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  useDisclosure,
+} from '@chakra-ui/react'
+import { toast } from 'react-toastify'
+import WithAuth from '@components/hoc/WithAuth'
+import Button from '@components/common/button/Button'
+import { DeleteDialog } from '@components/common/dialog/DeleteDialog'
+import Spinner from '@components/common/loading/Spinner'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import { FullDateAndTimeFormat } from '@helpers/date'
+import { useRouter } from '@lib/next-router'
+${includeResourceSidebar ? `import { ${ns.pascal}SideNav } from '${options.src.importRoot}/components/${ns.pascal}SideNav'\n` : ''}import { ${ns.pascal}ResourceModal } from '${options.src.importRoot}/components/${ns.pascal}ResourceModal'
+import { ${ns.camel}Resources } from '${options.src.importRoot}/config/${ns.resourcesFile}'
+import {
+  useDelete${resource.name}Mutation,
+  useGetOne${resource.name}Query,
+  useUpdate${resource.name}Mutation,
+} from '${options.src.importRoot}/store/slice/api/${options.store.apiSliceName}'
+
+function formatValue(value: unknown) {
+  if (value === null || value === undefined || value === '') return '-'
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No'
+  if (typeof value === 'string' && /^\\d{4}-\\d{2}-\\d{2}T/.test(value)) {
+    return FullDateAndTimeFormat(value)
+  }
+  if (typeof value === 'object') return JSON.stringify(value)
+
+  return String(value)
+}
+
+const ${resource.name}DetailPage: NextPage = () => {
+  const router = useRouter()
+  const editDialog = useDisclosure()
+  const deleteDialog = useDisclosure()
+  const resource = ${ns.camel}Resources.${key}
+  const id = typeof router.query.id === 'string' ? router.query.id : ''
+  const { data: item, isFetching, isLoading } = useGetOne${resource.name}Query(
+    { id },
+    { skip: !id }
+  )
+  const [updateResource] = useUpdate${resource.name}Mutation()
+  const [deleteResource] = useDelete${resource.name}Mutation()
+  const detailColumns = [...resource.columns, { key: 'createdAt', label: 'Created' }, { key: 'updatedAt', label: 'Updated' }]
+    .filter((column, index, columns) => columns.findIndex((item) => item.key === column.key) === index)
+  const detailName = String((item as any)?.name || (item as any)?.slug || router.query.name || id)
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '') || id
+  const resolveDetailHref = (href: string) =>
+    href
+      .replaceAll('{id}', encodeURIComponent(id))
+      .replaceAll(':id', encodeURIComponent(id))
+      .replaceAll('{name}', encodeURIComponent(detailName))
+      .replaceAll(':name', encodeURIComponent(detailName))
+
+  const handleUpdate = async (payload: Record<string, any>) => {
+    if (!id) return
+
+    try {
+      await updateResource({ id, payload }).unwrap()
+      toast.success('${title} updated.')
+    } catch {
+      toast.error('${title} could not be updated.')
+      throw new Error('Update failed')
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!id) return
+
+    try {
+      await deleteResource({ id }).unwrap()
+      toast.success('${title} deleted.')
+      router.push(resource.href)
+    } catch {
+      toast.error('${title} could not be deleted.')
+    }
+  }
+
+  return (
+    <SideNavLayout
+      useMainContentAreaId={false}
+      mainNavMode="list"
+      renderMainNav={() => null}
+      sidebarTopContent={() => (
+        <>
+          <h2 className="sidebar-heading">{resource.title}</h2>
+          <ul className="sidebar-list mb-5">
+            <li className="sidebar-item" title={'Back to ' + resource.title}>
+              <Link href={resource.href} className="sidebar-link">
+                <i className="bi bi-arrow-left" /> <span>Back</span>
+              </Link>
+            </li>
+          </ul>
+        </>
+      )}
+${includeSidebarContent ? `      sidebarContent={(isCollapsed) =>
+        !isCollapsed ? (
+          <>
+${includeResourceSidebar ? `            <${ns.pascal}SideNav />` : ''}
+${includeDetailSidebar ? `            <nav className="sidebar-section mt-4" aria-label="${title} navigation">
+              <ul className="sidebar-list">
+                {resource.detailSidebarItems.map((item) => (
+                  <li key={item.href} className="sidebar-item" title={item.label}>
+                    <Link href={resolveDetailHref(item.href)} className="sidebar-link">
+                      {item.icon ? <i className={item.icon} /> : null} <span>{item.label}</span>
+                    </Link>
+                  </li>
+                ))}
+              </ul>
+            </nav>` : ''}
+          </>
+        ) : null
+      }` : ''}
+    >
+      <div className="mt-5 w-100">
+        <div className="d-flex align-items-start justify-content-between gap-3">
+          <div>
+            <h1 className="mb-2">{formatValue((item as any)?.name || (item as any)?.slug || id)}</h1>
+            <p className="text-muted mb-0">{resource.description}</p>
+          </div>
+          <div className="group-detail-actions">
+            <Button
+              color="primary"
+              size="sm"
+              className="text-white rounded-pill fw-bold px-3"
+              onClick={editDialog.onOpen}
+              disabled={!item}
+            >
+              Update
+            </Button>
+
+            <Menu placement="bottom-end">
+              {({ isOpen, onClose }) => (
+                <>
+                  <MenuButton
+                    as={IconButton}
+                    aria-label="${title} actions"
+                    isDisabled={!item}
+                    className={\`btn btn-outline-light-gray d-flex align-items-center justify-content-center no-min-size w-xs-30p h-xs-30p rounded-pill border-0 text-dark \${isOpen ? 'bg-light-gray' : ''}\`}
+                    icon={<span className="bi bi-three-dots-vertical fs-5" aria-hidden="true" />}
+                  />
+
+                  <MenuList className="bg-white p-1 shadow rounded-md menu-list-container group-detail-menu-list">
+                    {resource.detailActions.map((action) => (
+                      <MenuItem
+                        key={action.href}
+                        className="border-0 bg-white bg-hover-background rounded-md px-3 group-detail-menu-item"
+                        icon={action.icon ? <span className={action.icon} /> : undefined}
+                        onClick={() => {
+                          onClose()
+                          router.push(action.href)
+                        }}
+                      >
+                        {action.label}
+                      </MenuItem>
+                    ))}
+
+                    <MenuItem
+                      className="border-0 bg-white bg-hover-background rounded-md px-3 group-detail-menu-item text-danger"
+                      icon={<span className="bi bi-trash" />}
+                      onClick={() => {
+                        onClose()
+                        deleteDialog.onOpen()
+                      }}
+                    >
+                      Delete
+                    </MenuItem>
+                  </MenuList>
+                </>
+              )}
+            </Menu>
+          </div>
+        </div>
+
+        {(isLoading || isFetching) && (
+          <div className="w-100 d-flex justify-content-center py-5">
+            <Spinner color="primary" />
+          </div>
+        )}
+
+        {item && (
+          <div className="border rounded bg-white mt-4">
+            <div className="border-bottom p-4">
+              <h2 className="h5 mb-0">${title} summary</h2>
+            </div>
+            <div className="row g-0">
+              {detailColumns.map((column) => (
+                <div key={column.key} className="col-12 col-md-6 col-xl-4 border-bottom p-4">
+                  <dt className="text-muted fw-normal">{column.label}</dt>
+                  <dd className="mb-0">{formatValue((item as any)[column.key])}</dd>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        <${ns.pascal}ResourceModal
+          resource={resource}
+          item={item as any}
+          isOpen={editDialog.isOpen}
+          onClose={editDialog.onClose}
+          onSave={handleUpdate}
+        />
+        <DeleteDialog
+          isOpen={deleteDialog.isOpen}
+          onClose={deleteDialog.onClose}
+          entityDescription={(item as any)?.name || (item as any)?.slug || '${title.toLowerCase()}'}
+          titleOverride={'Delete "' + formatValue((item as any)?.name || (item as any)?.slug || '${title.toLowerCase()}') + '"?'}
+          onDelete={handleDelete}
+        />
+      </div>
+    </SideNavLayout>
+  )
+}
+
+${resource.name}DetailPage.getInitialProps = async () => {
+  return {
+    pageTitle: '${title}',
+  }
+}
+
+export default WithAuth(${resource.name}DetailPage)
+`
+}
+
+export function createDetailChildPage(resource, childPage, options) {
+  if (typeof childPage.pageSource === 'function') {
+    const ns = namespace(options)
+    return childPage.pageSource({
+      resource,
+      childPage,
+      options,
+      ns,
+      pageRoute: pageRoute(resource, options),
+    })
+  }
+
+  throw new Error(`crud scaffold detail child page ${childPage.path || childPage.key} requires pageSource`)
+}