@kematjaya/crud-ui-generator 0.1.0 → 0.2.0

package/README.md

@@ -55,8 +55,7 @@ Appended to (multi-entity, idempotent — each entity gets one marker-guarded bl
 
 ## Assumptions / caveats
 
-- **Ids are UUID strings.** `validId()` in the generated `[id]/route.ts` checks a 36-char
-  hex-with-dashes pattern. Adjust by hand if an entity uses a different id type.
+- **Id type comes from the spec's `idType`** (`uuid`/`int`/`string`, written by `ApiCrudRenderer::detectIdType()` off the entity's actual id column) — `validId()` in the generated `[id]/route.ts` and the `is{Entity}` type guard in `api-shapes.ts` are generated to match. Older spec files without `idType` default to `uuid`.
 - **The list search box only searches one field.** If more than one field is marked
   `searchable` in the spec, the list view (backed by ApiPlatform's `SearchFilter`, one query
   param per property) only wires up the first one. The export endpoint ORs across all of them.

package/dist/cli.js

@@ -6,6 +6,7 @@ import { appendBlock, appendBlockWithImport, newLog, writeIfMissing, writeNewFil
 import * as shared from './templates/sharedComponents.js';
 import { editPage, listPage, newPage } from './templates/pages.js';
 import { table } from './templates/table.js';
+import { entityHook } from './templates/hook.js';
 import { form } from './templates/form.js';
 import { useExportHook } from './templates/useExport.js';
 import { queryLib } from './templates/queryLib.js';
@@ -81,6 +82,7 @@ function main() {
     writeNewFile(join(compDir, `${names.entityPascal}Table.tsx`), table(spec, names), log);
     writeNewFile(join(compDir, `${names.entityPascal}Form.tsx`), form(spec, names), log);
     writeNewFile(join(compDir, `use${names.entitiesPascal}Export.ts`), useExportHook(spec, names), log);
+    writeNewFile(join(compDir, `use${names.entitiesPascal}.ts`), entityHook(spec, names), log);
     const libDir = join(src, 'lib');
     writeNewFile(join(libDir, `${names.entitiesKebab}-query.ts`), queryLib(spec, names), log);
     writeNewFile(join(libDir, `${names.entitiesKebab}-csv.ts`), csvLib(spec, names), log);
@@ -100,7 +102,7 @@ function main() {
     if (searchableFields(spec).length > 1) {
         console.log(`  4. Note: multiple searchable fields were configured (${searchableFields(spec).join(', ')}); the list view's single search box only queries by "${searchField(spec)}" (ApiPlatform SearchFilter's per-property param convention doesn't support one box matching several properties). The export endpoint does OR across all of them.`);
     }
-    console.log(`  Assumes UUID-shaped ids (matches this boilerplate's convention) — see validId() in the generated app/api/${names.entitiesKebab}/[id]/route.ts if this entity uses a different id type.`);
+    console.log(`  Id type: "${spec.idType}" (from the spec's "idType") — validId() in the generated app/api/${names.entitiesKebab}/[id]/route.ts was generated to match.`);
     console.log(`  Run "npm run format" afterwards — generated files aren't pre-formatted to this project's Prettier config.`);
 }
 main();

package/dist/spec.js

@@ -37,11 +37,13 @@ export function loadSpec(specPath) {
     if (!Array.isArray(spec.fields) || !spec.fields.every(isFieldSpec)) {
         throw new Error(`Spec file "fields" is missing or malformed: ${specPath}`);
     }
+    const idType = spec.idType === 'int' || spec.idType === 'string' || spec.idType === 'uuid' ? spec.idType : 'uuid';
     return {
         entity: spec.entity,
         permissionPrefix: spec.permissionPrefix,
         ownerProperty: typeof spec.ownerProperty === 'string' ? spec.ownerProperty : null,
         timestampField: typeof spec.timestampField === 'string' ? spec.timestampField : null,
+        idType,
         fields: spec.fields,
     };
 }

package/dist/templates/apiShapes.js

@@ -18,7 +18,8 @@ export function apiShapesImport(names) {
 }
 export function apiShapesBlock(spec, names) {
     const { entityPascal, entitiesPascal } = names;
-    const checks = ['isRecord(value)', "typeof value.id === 'string'"];
+    const idJsType = 'int' === spec.idType ? 'number' : 'string';
+    const checks = ['isRecord(value)', `typeof value.id === '${idJsType}'`];
     for (const field of spec.fields) {
         checks.push(`typeof value.${field.name} === '${tsType(field)}'`);
     }

package/dist/templates/bffRoutes.js

@@ -35,7 +35,14 @@ export const dynamic = 'force-dynamic';
 export const revalidate = 0;
 `;
 }
-export function itemRoute(_spec, names) {
+function validIdCheck(idType) {
+    if (idType === 'int')
+        return 'return /^[1-9][0-9]*$/.test(id);';
+    if (idType === 'string')
+        return "return id.length > 0;";
+    return "return /^[0-9a-fA-F-]{36}$/.test(id);";
+}
+export function itemRoute(spec, names) {
     const { entityCamel, entitiesKebab } = names;
     return `import type { NextRequest } from 'next/server';
 import { authedBackend } from '@/lib/bff';
@@ -45,7 +52,7 @@ import { ${entityCamel}Schema } from '@/lib/schemas';
 type Params = { params: Promise<{ id: string }> };
 
 function validId(id: string) {
-    return /^[0-9a-fA-F-]{36}$/.test(id);
+    ${validIdCheck(spec.idType)}
 }
 
 export async function GET(_request: NextRequest, context: Params) {

package/dist/templates/hook.js

@@ -0,0 +1,269 @@
+import { lowerWords, searchField } from '../naming.js';
+export function entityHook(spec, names) {
+    const { entityPascal, entitiesPascal, entitiesKebab } = names;
+    const field = searchField(spec);
+    const pluralNoun = lowerWords(entitiesPascal);
+    const hasSearchLine = field
+        ? `    const hasSearch = Boolean(query.search);\n`
+        : `    const hasSearch = false;\n`;
+    return `import { useRouter, useSearchParams } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { is${entityPascal}Collection } from '@/lib/api-shapes';
+import {
+    build${entitiesPascal}ApiPath,
+    build${entitiesPascal}Href,
+    clampPageToTotal,
+    parse${entitiesPascal}Query,
+    type ${entitiesPascal}Query
+} from '@/lib/${entitiesKebab}-query';
+import type { ${entityPascal} } from '@/types/api';
+import { use${entitiesPascal}Export } from './use${entitiesPascal}Export';
+
+export function use${entitiesPascal}() {
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const query = useMemo(() => parse${entitiesPascal}Query(searchParams), [searchParams]);
+    const [items, setItems] = useState<${entityPascal}[]>([]);
+    const [totalItems, setTotalItems] = useState(0);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    const [deleteTarget, setDeleteTarget] = useState<${entityPascal} | null>(null);
+    const [deleting, setDeleting] = useState(false);
+    const [selectedIds, setSelectedIds] = useState<Set<${entityPascal}['id']>>(new Set());
+    const [bulkDeleteConfirming, setBulkDeleteConfirming] = useState(false);
+    const [bulkDeleting, setBulkDeleting] = useState(false);
+    const [toastMessage, setToastMessage] = useState(
+        () => searchParams.get('toast') ?? ''
+    );
+    const { exportingSelected, exportingAll, exportSelected, exportAll } =
+        use${entitiesPascal}Export();
+    const requestId = useRef(0);
+
+    const loadItems = useCallback(
+        async (signal?: AbortSignal) => {
+            const id = requestId.current + 1;
+            requestId.current = id;
+            setError('');
+            setLoading(true);
+            setItems([]);
+            setTotalItems(0);
+            let response: Response;
+            try {
+                response = await fetch(build${entitiesPascal}ApiPath(query), {
+                    cache: 'no-store',
+                    signal
+                });
+            } catch (fetchError) {
+                if (
+                    fetchError instanceof DOMException &&
+                    fetchError.name === 'AbortError'
+                )
+                    return;
+                if (requestId.current !== id) return;
+                setError('Network error while loading ${pluralNoun}.');
+                setLoading(false);
+                return;
+            }
+            if (requestId.current !== id || signal?.aborted) return;
+            if (response.status === 401) {
+                router.push('/login');
+                return;
+            }
+            if (!response.ok) {
+                setError('Could not load ${pluralNoun}.');
+                setLoading(false);
+                return;
+            }
+            const data: unknown = await response.json();
+            if (!is${entityPascal}Collection(data)) {
+                setError('Unexpected response.');
+                setLoading(false);
+                return;
+            }
+            const clampedPage = clampPageToTotal(
+                query.page,
+                query.itemsPerPage,
+                data.totalItems
+            );
+            if (clampedPage !== query.page) {
+                router.replace(build${entitiesPascal}Href(query, { page: clampedPage }));
+                return;
+            }
+            setItems(data.member);
+            setTotalItems(data.totalItems);
+            setLoading(false);
+        },
+        [query, router]
+    );
+
+    useEffect(() => {
+        const controller = new AbortController();
+        const timer = window.setTimeout(
+            () => void loadItems(controller.signal),
+            0
+        );
+        return () => {
+            window.clearTimeout(timer);
+            controller.abort();
+        };
+    }, [loadItems]);
+
+    const [selectionQuery, setSelectionQuery] = useState(query);
+    if (selectionQuery !== query) {
+        setSelectionQuery(query);
+        setSelectedIds(new Set());
+    }
+
+    function navigateTo(nextQuery: ${entitiesPascal}Query) {
+        router.push(build${entitiesPascal}Href(nextQuery));
+    }
+
+${hasSearchLine}    const trueEmpty = !loading && !error && !hasSearch && totalItems === 0;
+    const filteredEmpty = !loading && !error && hasSearch && totalItems === 0;
+    const hasItems = !loading && items.length > 0;
+    const selectedItems = useMemo(
+        () => items.filter((item) => selectedIds.has(item.id)),
+        [items, selectedIds]
+    );
+    const allOnPageSelected =
+        items.length > 0 && items.every((item) => selectedIds.has(item.id));
+    const someOnPageSelected = items.some((item) => selectedIds.has(item.id));
+
+    function toggleSelect(id: ${entityPascal}['id']) {
+        setSelectedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(id)) next.delete(id);
+            else next.add(id);
+            return next;
+        });
+    }
+
+    function toggleSelectAll() {
+        setSelectedIds((prev) => {
+            const allSelected =
+                items.length > 0 && items.every((item) => prev.has(item.id));
+            return allSelected
+                ? new Set()
+                : new Set(items.map((item) => item.id));
+        });
+    }
+
+    function clearSelection() {
+        setSelectedIds(new Set());
+    }
+
+    async function confirmDelete() {
+        if (!deleteTarget) return;
+        setDeleting(true);
+        let response: Response;
+        try {
+            response = await fetch(\`/api/${entitiesKebab}/\${deleteTarget.id}\`, {
+                method: 'DELETE'
+            });
+        } catch {
+            setError('Network error while deleting.');
+            setDeleting(false);
+            return;
+        }
+        setDeleting(false);
+        if (!response.ok && response.status !== 204) {
+            setError('Could not delete.');
+            return;
+        }
+        setDeleteTarget(null);
+        setToastMessage('Deleted.');
+        await loadItems();
+    }
+
+    async function confirmBulkDelete() {
+        const ids = Array.from(selectedIds);
+        if (ids.length === 0) return;
+        setBulkDeleting(true);
+        const outcomes = await Promise.allSettled(
+            ids.map(async (id) => {
+                const response = await fetch(\`/api/${entitiesKebab}/\${id}\`, {
+                    method: 'DELETE'
+                });
+                if (!response.ok && response.status !== 204) {
+                    throw new Error('delete failed');
+                }
+            })
+        );
+        setBulkDeleting(false);
+        setBulkDeleteConfirming(false);
+        const failedIds = ids.filter(
+            (_, index) => outcomes[index]?.status === 'rejected'
+        );
+        const deletedCount = ids.length - failedIds.length;
+        if (failedIds.length === ids.length) {
+            setError('Could not delete selected ${pluralNoun}.');
+        } else if (failedIds.length > 0) {
+            setError(
+                \`Deleted \${deletedCount} of \${ids.length}. Some deletions failed.\`
+            );
+            setToastMessage(\`\${deletedCount} deleted.\`);
+        } else {
+            setToastMessage(\`\${deletedCount} deleted.\`);
+        }
+        setSelectedIds(new Set(failedIds));
+        await loadItems();
+    }
+
+    function handleExportSelected() {
+        setError('');
+        if (0 === selectedItems.length) return;
+        const result = exportSelected(selectedItems);
+        if (result.ok) {
+            setSelectedIds(new Set());
+            return;
+        }
+        setError(result.message);
+    }
+
+    async function handleExportAll() {
+        setError('');
+        const result = await exportAll(query);
+        if (result.ok) return;
+        if (401 === result.status) {
+            router.push('/login');
+            return;
+        }
+        setError(result.message);
+    }
+
+    return {
+        query,
+        items,
+        totalItems,
+        loading,
+        error,
+        hasSearch,
+        trueEmpty,
+        filteredEmpty,
+        hasItems,
+        navigateTo,
+        selectedIds,
+        selectedItems,
+        allOnPageSelected,
+        someOnPageSelected,
+        toggleSelect,
+        toggleSelectAll,
+        clearSelection,
+        deleteTarget,
+        setDeleteTarget,
+        deleting,
+        confirmDelete,
+        bulkDeleteConfirming,
+        setBulkDeleteConfirming,
+        bulkDeleting,
+        confirmBulkDelete,
+        toastMessage,
+        setToastMessage,
+        exportingSelected,
+        exportingAll,
+        handleExportSelected,
+        handleExportAll
+    };
+}
+`;
+}

package/dist/templates/table.js

@@ -33,154 +33,68 @@ export function table(spec, names) {
                 pending={loading}
                 disabled={trueEmpty}
                 onSearch={(search) =>
-                    router.push(build${entitiesPascal}Href(query, { page: 1, search }))
+                    navigateTo({ ...query, page: 1, search })
                 }
                 onClear={() =>
-                    router.push(build${entitiesPascal}Href(query, { page: 1, search: '' }))
+                    navigateTo({ ...query, page: 1, search: '' })
                 }
             />
 
 `
         : '';
-    const hasTitleFilterLine = field
-        ? `    const hasSearch = Boolean(query.search);\n`
-        : `    const hasSearch = false;\n`;
     return `'use client';
 
 import { Button, EmptyState, LinkButton, ListPageCard, Toast } from '@kematjaya/bootstrap-ui-kit';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef } from 'react';
 import { usePermissions } from '@kematjaya/access-control-ui';
 import { BulkActionsBar } from '@/components/crud/BulkActionsBar';
 import { DeleteConfirmModal } from '@/components/crud/DeleteConfirmModal';
 import { ExportAllButton } from '@/components/crud/ExportAllButton';
 import { PaginationBar } from '@/components/crud/PaginationBar';
 import { SearchPanel } from '@/components/crud/SearchPanel';
-import { is${entityPascal}Collection } from '@/lib/api-shapes';
 import {
     ${constPrefix}_PAGE_SIZES,
-    build${entitiesPascal}ApiPath,
     build${entitiesPascal}Href,
-    clampPageToTotal,
-    nextItemsPerPagePage,
-    parse${entitiesPascal}Query,
-    type ${entitiesPascal}Query
+    nextItemsPerPagePage
 } from '@/lib/${entitiesKebab}-query';
-import type { ${entityPascal} } from '@/types/api';
-import { use${entitiesPascal}Export } from './use${entitiesPascal}Export';
+import { use${entitiesPascal} } from './use${entitiesPascal}';
 
 export function ${entityPascal}Table() {
-    const router = useRouter();
-    const searchParams = useSearchParams();
-    const query = useMemo(() => parse${entitiesPascal}Query(searchParams), [searchParams]);
-    const [items, setItems] = useState<${entityPascal}[]>([]);
-    const [totalItems, setTotalItems] = useState(0);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState('');
-    const [deleteTarget, setDeleteTarget] = useState<${entityPascal} | null>(null);
-    const [deleting, setDeleting] = useState(false);
-    const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
-    const [bulkDeleteConfirming, setBulkDeleteConfirming] = useState(false);
-    const [bulkDeleting, setBulkDeleting] = useState(false);
-    const [toastMessage, setToastMessage] = useState(
-        () => searchParams.get('toast') ?? ''
-    );
-    const { exportingSelected, exportingAll, exportSelected, exportAll } =
-        use${entitiesPascal}Export();
+    const {
+        query,
+        items,
+        totalItems,
+        loading,
+        error,
+        hasSearch,
+        trueEmpty,
+        filteredEmpty,
+        hasItems,
+        navigateTo,
+        selectedIds,
+        allOnPageSelected,
+        someOnPageSelected,
+        toggleSelect,
+        toggleSelectAll,
+        clearSelection,
+        deleteTarget,
+        setDeleteTarget,
+        deleting,
+        confirmDelete,
+        bulkDeleteConfirming,
+        setBulkDeleteConfirming,
+        bulkDeleting,
+        confirmBulkDelete,
+        toastMessage,
+        setToastMessage,
+        exportingSelected,
+        exportingAll,
+        handleExportSelected,
+        handleExportAll
+    } = use${entitiesPascal}();
     const { has: hasPermission, loading: permissionsLoading } = usePermissions();
-    const requestId = useRef(0);
     const selectAllRef = useRef<HTMLInputElement>(null);
 
-    const loadItems = useCallback(
-        async (signal?: AbortSignal) => {
-            const id = requestId.current + 1;
-            requestId.current = id;
-            setError('');
-            setLoading(true);
-            setItems([]);
-            setTotalItems(0);
-            let response: Response;
-            try {
-                response = await fetch(build${entitiesPascal}ApiPath(query), {
-                    cache: 'no-store',
-                    signal
-                });
-            } catch (fetchError) {
-                if (
-                    fetchError instanceof DOMException &&
-                    fetchError.name === 'AbortError'
-                )
-                    return;
-                if (requestId.current !== id) return;
-                setError('Network error while loading ${pluralNoun}.');
-                setLoading(false);
-                return;
-            }
-            if (requestId.current !== id || signal?.aborted) return;
-            if (response.status === 401) {
-                router.push('/login');
-                return;
-            }
-            if (!response.ok) {
-                setError('Could not load ${pluralNoun}.');
-                setLoading(false);
-                return;
-            }
-            const data: unknown = await response.json();
-            if (!is${entityPascal}Collection(data)) {
-                setError('Unexpected response.');
-                setLoading(false);
-                return;
-            }
-            const clampedPage = clampPageToTotal(
-                query.page,
-                query.itemsPerPage,
-                data.totalItems
-            );
-            if (clampedPage !== query.page) {
-                router.replace(build${entitiesPascal}Href(query, { page: clampedPage }));
-                return;
-            }
-            setItems(data.member);
-            setTotalItems(data.totalItems);
-            setLoading(false);
-        },
-        [query, router]
-    );
-
-    useEffect(() => {
-        const controller = new AbortController();
-        const timer = window.setTimeout(
-            () => void loadItems(controller.signal),
-            0
-        );
-        return () => {
-            window.clearTimeout(timer);
-            controller.abort();
-        };
-    }, [loadItems]);
-
-    const [selectionQuery, setSelectionQuery] = useState(query);
-    if (selectionQuery !== query) {
-        setSelectionQuery(query);
-        setSelectedIds(new Set());
-    }
-
-    function navigateTo(nextQuery: ${entitiesPascal}Query) {
-        router.push(build${entitiesPascal}Href(nextQuery));
-    }
-
-${hasTitleFilterLine}    const trueEmpty = !loading && !error && !hasSearch && totalItems === 0;
-    const filteredEmpty = !loading && !error && hasSearch && totalItems === 0;
-    const hasItems = !loading && items.length > 0;
-    const selectedItems = useMemo(
-        () => items.filter((item) => selectedIds.has(item.id)),
-        [items, selectedIds]
-    );
-    const allOnPageSelected =
-        items.length > 0 && items.every((item) => selectedIds.has(item.id));
-    const someOnPageSelected = items.some((item) => selectedIds.has(item.id));
-
     useEffect(() => {
         if (selectAllRef.current) {
             selectAllRef.current.indeterminate =
@@ -188,104 +102,6 @@ ${hasTitleFilterLine}    const trueEmpty = !loading && !error && !hasSearch && t
         }
     }, [someOnPageSelected, allOnPageSelected]);
 
-    function toggleSelect(id: string) {
-        setSelectedIds((prev) => {
-            const next = new Set(prev);
-            if (next.has(id)) next.delete(id);
-            else next.add(id);
-            return next;
-        });
-    }
-
-    function toggleSelectAll() {
-        setSelectedIds((prev) => {
-            const allSelected =
-                items.length > 0 && items.every((item) => prev.has(item.id));
-            return allSelected
-                ? new Set()
-                : new Set(items.map((item) => item.id));
-        });
-    }
-
-    async function confirmDelete() {
-        if (!deleteTarget) return;
-        setDeleting(true);
-        let response: Response;
-        try {
-            response = await fetch(\`/api/${entitiesKebab}/\${deleteTarget.id}\`, {
-                method: 'DELETE'
-            });
-        } catch {
-            setError('Network error while deleting.');
-            setDeleting(false);
-            return;
-        }
-        setDeleting(false);
-        if (!response.ok && response.status !== 204) {
-            setError('Could not delete.');
-            return;
-        }
-        setDeleteTarget(null);
-        setToastMessage('Deleted.');
-        await loadItems();
-    }
-
-    async function confirmBulkDelete() {
-        const ids = Array.from(selectedIds);
-        if (ids.length === 0) return;
-        setBulkDeleting(true);
-        const outcomes = await Promise.allSettled(
-            ids.map(async (id) => {
-                const response = await fetch(\`/api/${entitiesKebab}/\${id}\`, {
-                    method: 'DELETE'
-                });
-                if (!response.ok && response.status !== 204) {
-                    throw new Error('delete failed');
-                }
-            })
-        );
-        setBulkDeleting(false);
-        setBulkDeleteConfirming(false);
-        const failedIds = ids.filter(
-            (_, index) => outcomes[index]?.status === 'rejected'
-        );
-        const deletedCount = ids.length - failedIds.length;
-        if (failedIds.length === ids.length) {
-            setError('Could not delete selected ${pluralNoun}.');
-        } else if (failedIds.length > 0) {
-            setError(
-                \`Deleted \${deletedCount} of \${ids.length}. Some deletions failed.\`
-            );
-            setToastMessage(\`\${deletedCount} deleted.\`);
-        } else {
-            setToastMessage(\`\${deletedCount} deleted.\`);
-        }
-        setSelectedIds(new Set(failedIds));
-        await loadItems();
-    }
-
-    function handleExportSelected() {
-        setError('');
-        if (0 === selectedItems.length) return;
-        const result = exportSelected(selectedItems);
-        if (result.ok) {
-            setSelectedIds(new Set());
-            return;
-        }
-        setError(result.message);
-    }
-
-    async function handleExportAll() {
-        setError('');
-        const result = await exportAll(query);
-        if (result.ok) return;
-        if (401 === result.status) {
-            router.push('/login');
-            return;
-        }
-        setError(result.message);
-    }
-
     return (
         <ListPageCard
             title="${entitiesPascal}"
@@ -331,9 +147,7 @@ ${searchPanelBlock}            {trueEmpty && (
                         <Button
                             variant="outline"
                             onClick={() =>
-                                router.push(
-                                    build${entitiesPascal}Href(query, { page: 1${field ? ", search: ''" : ''} })
-                                )
+                                navigateTo({ ...query, page: 1${field ? ", search: ''" : ''} })
                             }
                         >
                             Clear search
@@ -350,7 +164,7 @@ ${searchPanelBlock}            {trueEmpty && (
                     disabled={bulkDeleting || exportingSelected}
                     onDelete={permissionsLoading || hasPermission('${prefix}.bulk_delete') || hasPermission('${prefix}.delete') ? () => setBulkDeleteConfirming(true) : undefined}
                     onExportSelected={permissionsLoading || hasPermission('${prefix}.export_selected') ? handleExportSelected : undefined}
-                    onClearSelection={() => setSelectedIds(new Set())}
+                    onClearSelection={clearSelection}
                 />
             )}
 
@@ -435,9 +249,7 @@ ${bodyCells}
                     totalItems={totalItems}
                     loadedItems={items.length}
                     buildHref={(patch) => build${entitiesPascal}Href(query, patch)}
-                    onPageChange={(page) =>
-                        router.push(build${entitiesPascal}Href(query, { page }))
-                    }
+                    onPageChange={(page) => navigateTo({ ...query, page })}
                     onPageSizeChange={(itemsPerPage) =>
                         navigateTo({
                             ...query,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kematjaya/crud-ui-generator",
-    "version": "0.1.0",
+    "version": "0.2.0",
     "description": "Next.js CRUD frontend generator that reads crud-specs/{Entity}.json sidecars written by kematjaya/crud-maker-bundle's make:kmj-api-crud and generates pages, components, and BFF routes matching the boilerplate's hand-written Notes feature.",
     "type": "module",
     "license": "MIT",