Pembuat Halaman & Menu Baru Otomatis Sekali Klik

Tantangan & Kebutuhan Pengguna

Pada arsitektur enterprise yang ketat, menambah satu modul CRUD baru membutuhkan pembuatan 8 hingga 10 file yang saling terhubung: skema Zod, service Prisma dengan audit log, queries paginasi, Server Actions ber-permission, hooks React Query, komponen Modal, komponen Tabel, halaman Server, route wrapper App Router, dan endpoint API. Membuat seluruh file tersebut secara manual berulang kali sangat memakan waktu dan rentan menghasilkan inkonsistensi standar kode, baik oleh developer manusia maupun asisten AI.

Cara terbaik menjaga konsistensi arsitektur bukanlah lewat dokumen aturan yang panjang, melainkan lewat kakas otomatis yang menghasilkan kode sesuai standar sejak detik pertama.

Solusi & Cara Kerja

Skrip `scripts/make-feature.mjs` menerima parameter `<feature_key> "<Label>" [plural_slug]` beserta flag opsional `--with-image`. Generator ini mengubah nama fitur ke berbagai konvensi penamaan (`camelCase`, `PascalCase`, `kebab-case`, `snake_case`), lalu menulis seluruh file modul di `modules/dashboard/<key>/`, route halaman di `app/(dashboard)/dashboard/<slug>/page.tsx` lengkap dengan `<Suspense fallback={<DashboardPageSkeleton />}>`, serta Route Handler di `app/api/<slug>/route.ts`. Lebih jauh lagi, skrip ini memodifikasi `prisma/schema.prisma`, `common/constants/rbac.constant.ts`, dan `common/constants/navigation.constant.ts` secara idempoten.

Detail & Hal yang Diperhatikan

• Dukungan Upload Gambar Terlokalisasi (`--with-image`): Jika flag `-i` diaktifkan, generator otomatis menyertakan verifikasi magic bytes (JPEG/PNG/WebP), server action upload khusus, dan komponen `<Feature>ImageField.tsx` di dalam modul terkait tanpa mengotori folder `common/`.
• Injeksi AST/Regex Idempoten: Skrip memeriksa apakah model Prisma atau key RBAC sudah terdaftar sebelum menyisipkan kode, sehingga aman dari duplikasi.
• Kepatuhan Penuh pada Design System: Seluruh kode yang dihasilkan sudah otomatis menggunakan `inputCls`, `labelCls`, `Modal.tsx`, `Pagination.tsx`, dan bebas dari inline style.

Setelah menjalankan `npm run make:feature`, developer cukup menyesuaikan kolom tambahan di `schema.prisma` lalu menjalankan `npm run db:migrate` dan `npm run db:sync`.