@kematjaya/crud-ui-generator 0.3.0 → 0.5.0

package/README.md

@@ -1,85 +1,134 @@
 # @kematjaya/crud-ui-generator
 
-Next.js CRUD frontend generator that reads the `crud-specs/{Entity}.json` sidecar written by
-[kematjaya/crud-maker-bundle](https://github.com/kematjaya0/crud-maker-bundle)'s
-`make:kmj-api-crud`, and generates pages, components, and BFF routes matching the shape of a
-hand-written CRUD feature (list/create/edit pages, table with search/pagination/bulk-delete/CSV
-export, form, BFF proxy routes).
+Generator frontend CRUD untuk Next.js yang membaca sidecar `crud-specs/{Entity}.json` yang
+ditulis oleh `make:kmj-api-crud` dari
+[kematjaya/crud-maker-bundle](https://github.com/kematjaya0/crud-maker-bundle), lalu
+menghasilkan halaman, komponen, dan BFF routes dengan bentuk yang sama seperti fitur CRUD yang
+ditulis manual (halaman list/create/edit, tabel dengan search/pagination/bulk-delete/export CSV,
+form, BFF proxy routes).
 
-This is a dev-time code generator (like Plop/Hygen), not a runtime component library. It targets
-projects that already follow this monorepo's Next.js conventions:
+Ini adalah code generator yang dijalankan saat development (seperti Plop/Hygen), bukan library
+komponen runtime. Generator ini menyasar project yang sudah mengikuti konvensi Next.js di
+monorepo ini:
 
-- `@kematjaya/bootstrap-ui-kit` for `ListPageCard`/`TextField`/`Button`/etc.
-- `@kematjaya/access-control-ui` for `usePermissions()`
-- `src/lib/http.ts`, `src/lib/bff.ts` (BFF proxy helpers — `authedBackend`, `validateOrigin`, `parseJson`, `jsonProblem`)
-- `src/lib/permissions.ts` exporting `requirePermission()`
-- `src/types/api.ts` + `src/types/api.generated.ts` (OpenAPI types via `openapi-typescript`)
+- `@kematjaya/bootstrap-ui-kit` untuk `ListPageCard`/`TextField`/`Button`/dll.
+- `@kematjaya/access-control-ui` untuk `usePermissions()`
+- `src/lib/http.ts`, `src/lib/bff.ts` (helper proxy BFF — `authedBackend`, `validateOrigin`, `parseJson`, `jsonProblem`)
+- `src/lib/permissions.ts` yang meng-export `requirePermission()`
+- `src/types/api.ts` + `src/types/api.generated.ts` (tipe dari OpenAPI via `openapi-typescript`)
 
-It is not a general-purpose Next.js scaffolder — running it against a project that doesn't already
-have those pieces will produce files that don't compile until you add them.
+Ini bukan scaffolder Next.js serba-guna — menjalankannya pada project yang belum punya
+komponen-komponen di atas akan menghasilkan file yang tidak bisa di-compile sampai Anda
+menambahkannya.
 
-## Usage
+## Instalasi
+
+Tidak perlu instalasi terpisah untuk pemakaian sekali pakai — `npx` akan mengambilnya otomatis:
+
+```
+npx @kematjaya/crud-ui-generator <spec-path> [--src <dir>]
+```
+
+Kalau ingin dipasang sebagai dev dependency permanen alih-alih `npx` setiap kali:
+
+```
+npm install --save-dev @kematjaya/crud-ui-generator
+```
+
+## Cara pakai
 
 ```
 npx @kematjaya/crud-ui-generator <spec-path> [--src <dir>]
 ```
 
-- `<spec-path>` — path to the `crud-specs/{Entity}.json` file written by `make:kmj-api-crud`.
-- `--src <dir>` — the frontend project's `src/` directory to generate into (default: `src`).
+- `<spec-path>` — path ke file `crud-specs/{Entity}.json` yang ditulis oleh `make:kmj-api-crud`.
+- `--src <dir>` — direktori `src/` project frontend tempat hasil generate ditulis (default: `src`).
 
-Example, run from the frontend project root, with the backend as a sibling directory:
+Contoh, dijalankan dari root project frontend, dengan backend sebagai direktori bertetangga:
 
 ```
 npx @kematjaya/crud-ui-generator ../backend/crud-specs/Note.json --src src
 ```
 
-## What it generates
+## Apa saja yang di-generate
 
-Per entity (skipped if the file already exists — safe to re-run):
+Per entity (dilewati kalau file sudah ada — aman dijalankan ulang):
 
 - `app/dashboard/{entities}/page.tsx`, `new/page.tsx`, `[id]/edit/page.tsx`
 - `components/{entities}/{Entity}Table.tsx`, `{Entity}Form.tsx`, `use{Entities}Export.ts`
 - `lib/{entities}-query.ts`, `lib/{entities}-csv.ts`
 - `app/api/{entities}/route.ts`, `[id]/route.ts`, `export/route.ts` (BFF proxy)
 
-Shared, entity-agnostic UI primitives (written once, reused by every entity):
+Primitive UI yang dipakai bersama, tidak spesifik ke satu entity (ditulis sekali, dipakai ulang
+oleh semua entity):
 
 - `components/crud/DeleteConfirmModal.tsx`, `BulkActionsBar.tsx`, `PaginationBar.tsx`,
   `SearchPanel.tsx`, `ExportAllButton.tsx`
 
-Appended to (multi-entity, idempotent — each entity gets one marker-guarded block):
-
-- `lib/api-shapes.ts` — `is{Entity}`/`is{Entity}Collection` type guards
-- `lib/schemas.ts` — a Zod schema per entity
-- `types/api.ts` — types derived from the OpenAPI-generated `paths`/`components`
-
-## Assumptions / caveats
-
-- **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 filter panel covers every `searchable` field except `textarea`.**
-  `naming.ts`'s `filterableFields()` renders one control per such field — text/number inputs
-  (ApiPlatform `SearchFilter` `'partial'`/`'exact'` strategy) and a boolean Any/Yes/No select
-  (`'exact'`) — all AND-combined into the same list query (one query param per property, backed
-  by a single `#[ApiFilter(SearchFilter::class, properties: [...])]` on the entity). The table's
-  collapsible Filter button toggles a `crud-filter-collapse` panel around the generated
-  `FilterPanel` component, and only appears when at least one field is filterable.
-  `searchable` `textarea` fields are excluded (same exclusion as table/CSV columns) — `cli.ts`
-  prints a next-steps note when that applies.
-- **CSV export ("Export all") only reflects the first filterable field's current value**, sent as
-  a single OR-search `search` param the backend matches across *every* `searchable` field
-  (textarea included) server-side — a separate, broader contract from the list's precise
-  AND-per-property filtering. The other filter panel fields don't currently narrow the export.
-- **The table/CSV export skip `textarea` fields** (long text), mirroring the hand-written Notes
-  feature (shows `title`, not `body`). Everything else (`text`/`number`/`boolean`) becomes a
-  column.
-- **Getters are assumed on the entity/generated types** in the conventional `get{Field}()` /
-  camelCase-property shape used throughout this boilerplate.
-- **`npm run api:types` must be run first** (after adding the backend's `#[ApiResource]`/
-  `#[ApiFilter]` attributes — see `make:kmj-api-crud`'s printed next-steps) so
-  `src/types/api.ts`'s `paths['/api/{entities}']` / `components['schemas'][...]` lookups resolve.
-  If the entity's `#[ApiResource]` uses a custom `uriTemplate` that doesn't match
-  `permissionPrefix`, fix those lookups by hand.
-- Generated files aren't run through Prettier — run `npm run format` afterwards.
+Ditambahkan ke (multi-entity, idempotent — tiap entity dapat satu blok yang dijaga marker):
+
+- `lib/api-shapes.ts` — type guard `is{Entity}`/`is{Entity}Collection`
+- `lib/schemas.ts` — satu Zod schema per entity
+- `types/api.ts` — tipe hasil turunan dari `paths`/`components` OpenAPI
+
+## Asumsi / catatan penting
+
+- **Tipe id diambil dari `idType` di spec** (`uuid`/`int`/`string`, ditulis oleh
+  `ApiCrudRenderer::detectIdType()` berdasarkan kolom id sebenarnya di entity) — `validId()` di
+  `[id]/route.ts` hasil generate dan type guard `is{Entity}` di `api-shapes.ts` dibuat
+  menyesuaikan. Spec lama tanpa `idType` default ke `uuid`.
+- **Panel filter di halaman list mencakup semua field `searchable` kecuali `textarea`, `date`,
+  dan `datetime`.** `filterableFields()` di `naming.ts` merender satu kontrol per field yang
+  tersisa — input text/number (strategi ApiPlatform `SearchFilter` `'partial'`/`'exact'`) dan
+  select boolean Any/Yes/No (`'exact'`) — semuanya digabung dengan AND dalam satu query list
+  (satu query param per properti, didukung satu
+  `#[ApiFilter(SearchFilter::class, properties: [...])]` di entity). Tombol Filter yang bisa
+  dilipat di tabel membuka panel `crud-filter-collapse` berisi komponen `FilterPanel` hasil
+  generate, dan hanya muncul kalau minimal satu field bisa difilter. Field `searchable` yang
+  dikecualikan akan dapat catatan next-steps di `cli.ts` — belum ada kontrol filter rentang
+  tanggal (iterasi berikutnya), dan teks panjang memang bukan input filter yang masuk akal.
+- **Export CSV ("Export all") hanya mencerminkan nilai field filterable pertama saat ini**,
+  dikirim sebagai satu parameter `search` (OR-search) yang di backend dicocokkan ke *semua*
+  field `searchable` (termasuk textarea) — kontrak yang berbeda dan lebih longgar dari filter
+  AND-per-properti yang presisi di halaman list. Field filter lain belum mempersempit hasil
+  export.
+- **Field `date`/`datetime` adalah field form dan kolom tabel/CSV sungguhan.** Didukung
+  `DateField`/`DateTimeField` dari `ui-kit` (native `<input type="date">`/
+  `type="datetime-local">`). Field `date` bolak-balik sebagai string `"Y-m-d"` polos — maker di
+  sisi backend menulis mapping serializer Symfony `config/serializer/{Entity}.yaml` yang
+  mengunci format itu (kalau tidak, `DateTimeNormalizer` default Symfony akan menghasilkan
+  datetime RFC3339 lengkap dengan jam/timezone yang tidak seharusnya ada untuk kolom
+  date-only). Field `datetime` tetap pakai format wire RFC3339 default; form hasil generate
+  mengonversi ke/dari string local-wall-clock `<input type="datetime-local">` lewat
+  `src/lib/datetime.ts` (ditulis sekali, dipakai bersama semua entity) di boundary
+  `reset()`/`submit()` — parsing local-time dari constructor `Date` membuat konversi ini aman
+  terhadap timezone.
+- **Tabel/export CSV melewati field `textarea`** (teks panjang), meniru fitur Notes yang ditulis
+  manual (menampilkan `title`, bukan `body`). Selain itu (`text`/`number`/`boolean`/`date`/
+  `datetime`) menjadi kolom.
+- **Getter diasumsikan ada** pada entity/tipe hasil generate, dalam bentuk konvensional
+  `get{Field}()` / properti camelCase yang dipakai di seluruh boilerplate ini.
+- **`npm run api:types` harus dijalankan lebih dulu** (setelah atribut `#[ApiResource]`/
+  `#[ApiFilter]` backend ditambahkan — lihat next-steps yang dicetak `make:kmj-api-crud`) supaya
+  lookup `paths['/api/{entities}']` / `components['schemas'][...]` di `src/types/api.ts`
+  berhasil. Lookup ini berdasarkan `apiResourcePath` (catatan literal URI ApiPlatform
+  sebenarnya milik entity, dari spec), **bukan** `permissionPrefix` — kalau `#[ApiResource]`
+  entity memakai `uriTemplate` custom yang tidak cocok dengan `apiResourcePath`, atau project
+  meng-override `api_platform.path_segment_name_generator` dari default-nya, perbaiki lookup itu
+  secara manual.
+- **Panggilan BFF ke backend (`app/api/{entities}/route.ts`, `[id]/route.ts`,
+  `build{Entities}BackendPath` di `lib/{entities}-query.ts`) selalu memakai `apiResourcePath`
+  dari spec, tidak pernah `permissionPrefix`.** `permissionPrefix` hanya menamai route/folder
+  frontend sendiri dan permission key — nilainya bebas (free text) dan bisa berbeda dari URI
+  plural asli ApiPlatform (misalnya entity `Category` yang di-generate dengan
+  `permissionPrefix: "category"` tetap saja disajikan backend di `/api/categories`).
+  `apiResourcePath` ditulis oleh `make:kmj-api-crud` sebagai `pluralize(tableize($shortName))`,
+  meniru persis `path_segment_name_generator` default ApiPlatform — frontend wajib mengikuti
+  nilai ini apa adanya, karena backend digenerate lebih dulu dan menjadi satu-satunya sumber
+  kebenaran untuk URL miliknya sendiri. Spec lama dari sebelum field ini ada akan gagal dimuat
+  dengan pesan error yang jelas; tambahkan `"apiResourcePath"` secara manual (atau generate
+  ulang).
+- File hasil generate tidak melewati Prettier — jalankan `npm run format` setelahnya.
 
 ## Development
 

package/dist/cli.js

@@ -15,6 +15,7 @@ import { apiShapesBlock, apiShapesFileHeader, apiShapesImport, apiShapesMarker }
 import { schemasBlock, schemasFileHeader, schemasMarker } from './templates/schemas.js';
 import { typesApiBlock, typesApiFileHeader, typesApiMarker } from './templates/typesApi.js';
 import { exportRoute, itemRoute, listRoute } from './templates/bffRoutes.js';
+import { dateLib } from './templates/dateLib.js';
 function parseArgs(argv) {
     const positional = [];
     let srcDir = 'src';
@@ -86,6 +87,9 @@ function main() {
     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);
+    if (spec.fields.some((f) => f.type === 'datetime')) {
+        writeIfMissing(join(libDir, 'datetime.ts'), dateLib, log);
+    }
     appendBlockWithImport(join(libDir, 'api-shapes.ts'), apiShapesFileHeader, apiShapesImport(names), apiShapesMarker(names.entityPascal), apiShapesBlock(spec, names), log);
     appendBlock(join(libDir, 'schemas.ts'), schemasFileHeader, schemasMarker(names.entityCamel), schemasBlock(spec, names), log);
     appendBlock(join(src, 'types', 'api.ts'), typesApiFileHeader, typesApiMarker(names.entityPascal), typesApiBlock(spec, names), log);
@@ -99,9 +103,11 @@ function main() {
     console.log(`  1. Run the backend maker's printed next-steps (ApiResource/ApiFilter attributes, permission keys, rate limiter config).`);
     console.log(`  2. Run "npm run api:types" in the frontend project so src/types/api.ts's paths/components lookups resolve.`);
     console.log(`  3. Confirm the OpenAPI collection path is "/api/${names.entitiesKebab}" — if the entity's #[ApiResource] uses a custom uriTemplate, fix the "paths[...]" lookups in the appended src/types/api.ts block by hand.`);
-    const excludedTextareaFields = spec.fields.filter((f) => f.searchable && f.type === 'textarea').map((f) => f.name);
-    if (excludedTextareaFields.length > 0) {
-        console.log(`  4. Note: "${excludedTextareaFields.join(', ')}" ${excludedTextareaFields.length > 1 ? 'are' : 'is'} marked searchable but excluded from the generated Filter panel (long text isn't a sensible filter input) — same exclusion as table/CSV columns.`);
+    const excludedFilterFields = spec.fields
+        .filter((f) => f.searchable && ['textarea', 'date', 'datetime'].includes(f.type))
+        .map((f) => f.name);
+    if (excludedFilterFields.length > 0) {
+        console.log(`  4. Note: "${excludedFilterFields.join(', ')}" ${excludedFilterFields.length > 1 ? 'are' : 'is'} marked searchable but excluded from the generated Filter panel (long text and date/datetime don't have a filter control yet) — long-text fields are also excluded from table/CSV columns.`);
     }
     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.`);

package/dist/naming.js

@@ -13,16 +13,20 @@ export function namesFromSpec(spec) {
     const entitiesCamel = entitiesPascal.charAt(0).toLowerCase() + entitiesPascal.slice(1);
     return { entityPascal, entityCamel, entitiesKebab, entitiesPascal, entitiesCamel };
 }
+/** Field types with no filter-panel control yet — excluded from `filterableFields()`. */
+const UNFILTERABLE_TYPES = ['textarea', 'date', 'datetime'];
 /**
  * Fields rendered as controls in the list view's Filter panel: every `searchable` field except
- * `textarea` (long text doesn't make a sensible filter input), mirroring `displayFields()`'s
- * exclusion. All of these are wired into the list query and AND-combined. The CSV export
- * endpoint's OR-search (against every `searchable` field, textarea included) is a separate,
- * server-side-only concept — it reuses this list's first filterable field's current value as
- * its convenience search text (see `useExport.ts` / `bffRoutes.ts`'s `exportRoute`).
+ * `textarea` (long text doesn't make a sensible filter input) and `date`/`datetime` (no
+ * date-range filter control exists yet — a future iteration), mirroring `displayFields()`'s
+ * `textarea` exclusion plus this narrower one. All of these are wired into the list query and
+ * AND-combined. The CSV export endpoint's OR-search (against every `searchable` field, textarea
+ * included) is a separate, server-side-only concept — it reuses this list's first filterable
+ * field's current value as its convenience search text (see `useExport.ts` / `bffRoutes.ts`'s
+ * `exportRoute`).
  */
 export function filterableFields(spec) {
-    return spec.fields.filter((f) => f.searchable && f.type !== 'textarea');
+    return spec.fields.filter((f) => f.searchable && !UNFILTERABLE_TYPES.includes(f.type));
 }
 /** "createdAt" -> "Created At", "TestArticle" -> "Test Article". */
 export function humanize(identifier) {

package/dist/spec.js

@@ -4,7 +4,7 @@ function isFieldSpec(value) {
         return false;
     const f = value;
     return (typeof f.name === 'string' &&
-        ['text', 'textarea', 'number', 'boolean'].includes(f.type) &&
+        ['text', 'textarea', 'number', 'boolean', 'date', 'datetime'].includes(f.type) &&
         typeof f.required === 'boolean' &&
         (f.maxLength === null || typeof f.maxLength === 'number') &&
         typeof f.searchable === 'boolean');
@@ -31,6 +31,12 @@ export function loadSpec(specPath) {
     if (typeof spec.entity !== 'string' || spec.entity === '') {
         throw new Error(`Spec file missing "entity": ${specPath}`);
     }
+    if (typeof spec.apiResourcePath !== 'string' || spec.apiResourcePath === '') {
+        throw new Error(`Spec file missing "apiResourcePath": ${specPath}\n` +
+            'Regenerate it with a current version of make:kmj-api-crud, or add the field by ' +
+            "hand — it must match the entity's real ApiPlatform collection/item URI (e.g. " +
+            '"/api/categories"), not a guess derived from "permissionPrefix" or "entity".');
+    }
     if (typeof spec.permissionPrefix !== 'string' || spec.permissionPrefix === '') {
         throw new Error(`Spec file missing "permissionPrefix": ${specPath}`);
     }
@@ -40,6 +46,7 @@ export function loadSpec(specPath) {
     const idType = spec.idType === 'int' || spec.idType === 'string' || spec.idType === 'uuid' ? spec.idType : 'uuid';
     return {
         entity: spec.entity,
+        apiResourcePath: spec.apiResourcePath,
         permissionPrefix: spec.permissionPrefix,
         ownerProperty: typeof spec.ownerProperty === 'string' ? spec.ownerProperty : null,
         timestampField: typeof spec.timestampField === 'string' ? spec.timestampField : null,

package/dist/templates/bffRoutes.js

@@ -6,17 +6,18 @@ function tsType(field) {
         return 'boolean';
     return 'string';
 }
-export function listRoute(_spec, names) {
+export function listRoute(spec, names) {
     const { entityCamel, entitiesKebab } = names;
+    const backendPath = spec.apiResourcePath;
     return `import type { NextRequest } from 'next/server';
 import { authedBackend } from '@/lib/bff';
 import { parseJson, validateOrigin } from '@/lib/http';
-import { build${names.entitiesPascal}ApiPath, parse${names.entitiesPascal}Query } from '@/lib/${entitiesKebab}-query';
+import { build${names.entitiesPascal}ApiPath, build${names.entitiesPascal}BackendPath, parse${names.entitiesPascal}Query } from '@/lib/${entitiesKebab}-query';
 import { ${entityCamel}Schema } from '@/lib/schemas';
 
 export async function GET(request: NextRequest) {
     return authedBackend(
-        build${names.entitiesPascal}ApiPath(parse${names.entitiesPascal}Query(request.nextUrl.searchParams))
+        build${names.entitiesPascal}BackendPath(parse${names.entitiesPascal}Query(request.nextUrl.searchParams))
     );
 }
 
@@ -25,7 +26,7 @@ export async function POST(request: NextRequest) {
     if (badOrigin) return badOrigin;
     const parsed = await parseJson(request, ${entityCamel}Schema);
     if ('error' in parsed) return parsed.error;
-    return authedBackend('/api/${entitiesKebab}', {
+    return authedBackend('${backendPath}', {
         method: 'POST',
         body: JSON.stringify(parsed.data)
     });
@@ -43,7 +44,8 @@ function validIdCheck(idType) {
     return "return /^[0-9a-fA-F-]{36}$/.test(id);";
 }
 export function itemRoute(spec, names) {
-    const { entityCamel, entitiesKebab } = names;
+    const { entityCamel } = names;
+    const backendPath = spec.apiResourcePath;
     return `import type { NextRequest } from 'next/server';
 import { authedBackend } from '@/lib/bff';
 import { jsonProblem, parseJson, validateOrigin } from '@/lib/http';
@@ -58,7 +60,7 @@ function validId(id: string) {
 export async function GET(_request: NextRequest, context: Params) {
     const { id } = await context.params;
     if (!validId(id)) return jsonProblem(404, { title: 'Not Found' });
-    return authedBackend(\`/api/${entitiesKebab}/\${id}\`);
+    return authedBackend(\`${backendPath}/\${id}\`);
 }
 
 export async function PATCH(request: NextRequest, context: Params) {
@@ -70,7 +72,7 @@ export async function PATCH(request: NextRequest, context: Params) {
     if ('error' in parsed) return parsed.error;
     // Backend only exposes a Put operation (full replacement) — no Patch operation exists,
     // so the upstream call uses PUT even though the BFF's own contract to the browser stays PATCH.
-    return authedBackend(\`/api/${entitiesKebab}/\${id}\`, {
+    return authedBackend(\`${backendPath}/\${id}\`, {
         method: 'PUT',
         body: JSON.stringify(parsed.data)
     });
@@ -81,7 +83,7 @@ export async function DELETE(request: NextRequest, context: Params) {
     if (badOrigin) return badOrigin;
     const { id } = await context.params;
     if (!validId(id)) return jsonProblem(404, { title: 'Not Found' });
-    return authedBackend(\`/api/${entitiesKebab}/\${id}\`, { method: 'DELETE' });
+    return authedBackend(\`${backendPath}/\${id}\`, { method: 'DELETE' });
 }
 
 export const dynamic = 'force-dynamic';

package/dist/templates/dateLib.js

@@ -0,0 +1,25 @@
+/**
+ * Written once (via `writeIfMissing`, shared across every generated entity that has a
+ * `datetime` field) into `src/lib/datetime.ts` — converts between the API's RFC3339 wire value
+ * (`2026-09-03T14:30:00+07:00`) and `<input type="datetime-local">`'s native value
+ * (`2026-09-03T14:30`, local wall-clock, no offset). Both directions go through the `Date`
+ * constructor, which parses a string with no offset suffix as LOCAL time per spec — that makes
+ * `fromDatetimeLocalValue`'s `.toISOString()` call a correct, timezone-safe local -> UTC
+ * conversion, not a naive string transform.
+ */
+export const dateLib = `function pad(n: number): string {
+    return String(n).padStart(2, '0');
+}
+
+export function toDatetimeLocalValue(iso: string): string {
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime())) return '';
+    return \`\${date.getFullYear()}-\${pad(date.getMonth() + 1)}-\${pad(date.getDate())}T\${pad(date.getHours())}:\${pad(date.getMinutes())}\`;
+}
+
+export function fromDatetimeLocalValue(local: string): string {
+    const date = new Date(local);
+    if (Number.isNaN(date.getTime())) return local;
+    return date.toISOString();
+}
+`;

package/dist/templates/form.js

@@ -13,17 +13,12 @@ function fieldMarkup(field, entitiesKebab, autoFocus) {
                 />`;
     }
     if (field.type === 'boolean') {
-        return `                <div className="form-check mb-3">
-                    <input
-                        id="${id}"
-                        type="checkbox"
-                        className="form-check-input"
-                        {...register('${field.name}')}
-                    />
-                    <label htmlFor="${id}" className="form-check-label">
-                        ${label}
-                    </label>
-                </div>`;
+        return `                <CheckboxField
+                    id="${id}"
+                    label="${label}"
+                    error={errors.${field.name}}
+                    registration={register('${field.name}')}
+                />`;
     }
     if (field.type === 'number') {
         return `                <TextField
@@ -34,6 +29,22 @@ function fieldMarkup(field, entitiesKebab, autoFocus) {
                     registration={register('${field.name}', { valueAsNumber: true })}
                 />`;
     }
+    if (field.type === 'date') {
+        return `                <DateField
+                    id="${id}"
+                    label="${label}"${autoFocusProp}
+                    error={errors.${field.name}}
+                    registration={register('${field.name}')}
+                />`;
+    }
+    if (field.type === 'datetime') {
+        return `                <DateTimeField
+                    id="${id}"
+                    label="${label}"${autoFocusProp}
+                    error={errors.${field.name}}
+                    registration={register('${field.name}')}
+                />`;
+    }
     return `                <TextField
                     id="${id}"
                     label="${label}"
@@ -47,13 +58,28 @@ export function form(spec, names) {
     const { entityPascal, entityCamel, entitiesKebab } = names;
     const usesTextarea = spec.fields.some((f) => f.type === 'textarea');
     const usesText = spec.fields.some((f) => f.type === 'text' || f.type === 'number');
-    const fieldComponents = [usesText ? 'TextField' : null, usesTextarea ? 'TextareaField' : null]
+    const usesBoolean = spec.fields.some((f) => f.type === 'boolean');
+    const usesDate = spec.fields.some((f) => f.type === 'date');
+    const usesDateTime = spec.fields.some((f) => f.type === 'datetime');
+    const fieldComponents = [
+        usesText ? 'TextField' : null,
+        usesTextarea ? 'TextareaField' : null,
+        usesBoolean ? 'CheckboxField' : null,
+        usesDate ? 'DateField' : null,
+        usesDateTime ? 'DateTimeField' : null
+    ]
         .filter((c) => c !== null)
         .join(', ');
     const fieldsMarkup = spec.fields
         .map((f, i) => fieldMarkup(f, entitiesKebab, i === 0))
         .join('\n');
-    const resetFields = spec.fields.map((f) => `${f.name}: data.${f.name}`).join(', ');
+    const resetFields = spec.fields
+        .map((f) => (f.type === 'datetime' ? `${f.name}: toDatetimeLocalValue(data.${f.name})` : `${f.name}: data.${f.name}`))
+        .join(', ');
+    const submitFields = spec.fields
+        .map((f) => (f.type === 'datetime' ? `${f.name}: fromDatetimeLocalValue(values.${f.name})` : null))
+        .filter((c) => c !== null)
+        .join(', ');
     return `'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -62,7 +88,7 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { is${entityPascal} } from '@/lib/api-shapes';
-import { ${entityCamel}Schema, type ${entityPascal}FormValues } from '@/lib/schemas';
+import { ${entityCamel}Schema, type ${entityPascal}FormValues } from '@/lib/schemas';${usesDateTime ? "\nimport { toDatetimeLocalValue, fromDatetimeLocalValue } from '@/lib/datetime';" : ''}
 
 type Props = {
     mode: 'create' | 'edit';
@@ -126,7 +152,7 @@ export function ${entityPascal}Form({ mode, ${entityCamel}Id }: Props) {
             response = await fetch(path, {
                 method: mode === 'edit' ? 'PATCH' : 'POST',
                 headers: { 'content-type': 'application/json' },
-                body: JSON.stringify(values)
+                body: JSON.stringify(${usesDateTime ? `{ ...values, ${submitFields} }` : 'values'})
             });
         } catch {
             setError('Network error while saving. Check your connection and try again.');
@@ -148,7 +174,7 @@ export function ${entityPascal}Form({ mode, ${entityCamel}Id }: Props) {
         <ListPageCard
             title={mode === 'edit' ? 'Edit' : 'New'}
             error={error}
-            style={{ maxWidth: 640 }}
+            style={{ width: '100%' }}
         >
             <form onSubmit={handleSubmit(submit)} noValidate>
 ${fieldsMarkup}

package/dist/templates/queryLib.js

@@ -63,6 +63,15 @@ export function build${entitiesPascal}ApiPath(state: ${entitiesPascal}Query): st
     return query ? \`/api/${entitiesKebab}?\${query}\` : '/api/${entitiesKebab}';
 }
 
+// The BFF's own route (above) is a free-to-choose frontend slug. The real backend resource
+// lives at a URI ApiPlatform derives from the entity name (see crud-specs/${spec.entity}.json's
+// "apiResourcePath") — used only by the BFF route handler's server-side call to the backend,
+// never by the browser.
+export function build${entitiesPascal}BackendPath(state: ${entitiesPascal}Query): string {
+    const query = buildParams(state).toString();
+    return query ? \`${spec.apiResourcePath}?\${query}\` : '${spec.apiResourcePath}';
+}
+
 export function clampPageToTotal(
     page: number,
     itemsPerPage: number,

package/dist/templates/sharedComponents.js

@@ -418,7 +418,7 @@ export function SearchPanel({
 }
 `;
 export const filterPanel = `import { useId } from 'react';
-import { Button } from '@kematjaya/bootstrap-ui-kit';
+import { Button, Input, Select } from '@kematjaya/bootstrap-ui-kit';
 
 type FilterFieldDef =
     | { name: string; label: string; kind: 'text' }
@@ -482,9 +482,8 @@ export function FilterPanel({
                             {field.label}
                         </label>
                         {field.kind === 'boolean' ? (
-                            <select
+                            <Select
                                 id={\`\${idPrefix}-\${field.name}\`}
-                                className="form-select"
                                 name={field.name}
                                 defaultValue={values[field.name] ?? ''}
                                 disabled={controlsDisabled}
@@ -492,12 +491,11 @@ export function FilterPanel({
                                 <option value="">Any</option>
                                 <option value="true">Yes</option>
                                 <option value="false">No</option>
-                            </select>
+                            </Select>
                         ) : (
-                            <input
+                            <Input
                                 id={\`\${idPrefix}-\${field.name}\`}
                                 type={field.kind === 'number' ? 'number' : 'text'}
-                                className="form-control"
                                 name={field.name}
                                 defaultValue={values[field.name] ?? ''}
                                 placeholder={field.label}

package/dist/templates/table.js

@@ -1,12 +1,21 @@
 import { displayFields, filterableFields, humanize, labelField, lowerWords } from '../naming.js';
-function columnCell(fieldName, timestampField) {
-    if (fieldName === timestampField) {
+function columnCell(fieldName, fieldType, timestampField) {
+    if (fieldName === timestampField || fieldType === 'datetime') {
         return `                                    <td>
                                         {new Date(
                                             item.${fieldName}
                                         ).toLocaleString()}
                                     </td>`;
     }
+    if (fieldType === 'date') {
+        // "YYYY-MM-DD" alone parses as UTC midnight per spec (wrong day in timezones behind
+        // UTC); appending a time forces local-time parsing instead.
+        return `                                    <td>
+                                        {new Date(
+                                            \`\${item.${fieldName}}T00:00:00\`
+                                        ).toLocaleDateString()}
+                                    </td>`;
+    }
     return `                                    <td>{String(item.${fieldName})}</td>`;
 }
 function filterFieldKind(type) {
@@ -23,6 +32,7 @@ export function table(spec, names) {
     if (null !== spec.timestampField && !cols.includes(spec.timestampField)) {
         cols.push(spec.timestampField);
     }
+    const fieldTypeByName = new Map(spec.fields.map((f) => [f.name, f.type]));
     const label = labelField(spec);
     const noun = lowerWords(entityPascal);
     const pluralNoun = lowerWords(entitiesPascal);
@@ -31,7 +41,9 @@ export function table(spec, names) {
     const hasFilter = filters.length > 0;
     const filterPanelId = `${noun}-filter-panel`;
     const headCells = cols.map((c) => `                                <th>${humanize(c)}</th>`).join('\n');
-    const bodyCells = cols.map((c) => columnCell(c, spec.timestampField)).join('\n');
+    const bodyCells = cols
+        .map((c) => columnCell(c, fieldTypeByName.get(c) ?? null, spec.timestampField))
+        .join('\n');
     const filterButtonBlock = hasFilter
         ? `                    <Button
                         variant="outline"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@kematjaya/crud-ui-generator",
-    "version": "0.3.0",
+    "version": "0.5.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",