Management: edit form for store fields in inventory details sheet #27

New issue

Open

opened 2026-07-25 14:27:58 +00:00 by yuris · 0 comments

yuris commented

2026-07-25 14:27:58 +00:00

Owner

Problem

The inventory details sheet shows stock/price but has no way to set slug, description, images, or is_published. Staff cannot prepare catalog items for the store without using SQL or the API directly.

Target

apps/management/app/(dashboard)/stok/inventory-details-sheet.tsx
New file: apps/management/app/(dashboard)/stok/inventory-edit-form.tsx

Change

Add a third tab "Toko" (store) to the details sheet beside "Detail" and "Riwayat".
The Toko tab contains an edit form using existing FormField/FormInput primitives with:
- Slug — text input; placeholder nama-produk-singkat; show the validator pattern ^[a-z0-9]+(?:-[a-z0-9]+)*$.
- Deskripsi — textarea.
- Gambar — list of URL inputs with add/remove; each entry is a URL string (no file upload — images are hosted externally via R2 and referenced by URL).
- Tampilkan di toko — checkbox / toggle. Disabled when slug is empty (published requires slug).
On submit, call updateInventory server action with the changed fields only.
After a successful save, call router.refresh() and show a sonner toast.
Extract the form into inventory-edit-form.tsx to keep the sheet file readable.

Patterns to follow

AdjustmentModal for form shape (FormDialog, FormField, FormInput, useRouter, sonner toast).
DetailsActions already in the sheet footer — keep it.

Acceptance

"Toko" tab renders slug/description/images/publish fields.
Submit calls updateInventory; success toasts and refreshes; error toasts.
Saving is_published: true without a slug is blocked at the UI (button disabled).
tsc --noEmit and biome check pass.

## Problem The inventory details sheet shows stock/price but has no way to set `slug`, `description`, `images`, or `is_published`. Staff cannot prepare catalog items for the store without using SQL or the API directly. ## Target - `apps/management/app/(dashboard)/stok/inventory-details-sheet.tsx` - New file: `apps/management/app/(dashboard)/stok/inventory-edit-form.tsx` ## Change - Add a third tab "Toko" (store) to the details sheet beside "Detail" and "Riwayat". - The Toko tab contains an edit form using existing `FormField`/`FormInput` primitives with: - **Slug** — text input; placeholder `nama-produk-singkat`; show the validator pattern `^[a-z0-9]+(?:-[a-z0-9]+)*$`. - **Deskripsi** — textarea. - **Gambar** — list of URL inputs with add/remove; each entry is a URL string (no file upload — images are hosted externally via R2 and referenced by URL). - **Tampilkan di toko** — checkbox / toggle. Disabled when slug is empty (published requires slug). - On submit, call `updateInventory` server action with the changed fields only. - After a successful save, call `router.refresh()` and show a sonner toast. - Extract the form into `inventory-edit-form.tsx` to keep the sheet file readable. ## Patterns to follow - `AdjustmentModal` for form shape (`FormDialog`, `FormField`, `FormInput`, `useRouter`, sonner `toast`). - `DetailsActions` already in the sheet footer — keep it. ## Acceptance - "Toko" tab renders slug/description/images/publish fields. - Submit calls `updateInventory`; success toasts and refreshes; error toasts. - Saving `is_published: true` without a slug is blocked at the UI (button disabled). - `tsc --noEmit` and `biome check` pass.

yuris referenced this issue from a pull request that will close it,

2026-07-25 14:35:55 +00:00

feat(management): store readiness — MCP fields, inventory edit form, add item modal #29

yuris referenced this issue from a commit

2026-07-25 14:35:57 +00:00

feat(stok): add Toko tab with store fields edit form (#27)