From d049f6c34f98332729bb4bca2c3ca24a22a0c716 Mon Sep 17 00:00:00 2001
From: rstubryan <restubumirr@gmail.com>
Date: Wed, 7 Jan 2026 14:21:37 +0700
Subject: [PATCH] refactor(FE): Tighten product form validation and layout

---
 .../product/form/ProductForm.schema.ts        |  12 +-
 .../master-data/product/form/ProductForm.tsx  | 362 +++++++++---------
 2 files changed, 195 insertions(+), 179 deletions(-)

diff --git a/src/components/pages/master-data/product/form/ProductForm.schema.ts b/src/components/pages/master-data/product/form/ProductForm.schema.ts
index 37881636..e4852792 100644
--- a/src/components/pages/master-data/product/form/ProductForm.schema.ts
+++ b/src/components/pages/master-data/product/form/ProductForm.schema.ts
@@ -29,36 +29,38 @@ export const ProductFormSchema: Yup.ObjectSchema<ProductFormSchemaType> =
     sku: Yup.string().required('SKU wajib diisi!'),
 
     uom: Yup.object({
-      value: Yup.number().min(1).required(),
+      value: Yup.number().min(1, 'Satuan wajib dipilih!').required(),
       label: Yup.string().required(),
     })
       .nullable()
       .required('Satuan wajib diisi!'),
 
     uom_id: Yup.number()
+      .min(1, 'Satuan wajib dipilih!')
       .required('Satuan wajib diisi!')
       .typeError('Satuan wajib diisi!'),
 
     product_category: Yup.object({
-      value: Yup.number().min(1).required(),
+      value: Yup.number().min(1, 'Kategori produk wajib dipilih!').required(),
       label: Yup.string().required(),
     })
       .nullable()
       .required('Kategori produk wajib diisi!'),
 
     product_category_id: Yup.number()
+      .min(1, 'Kategori produk wajib dipilih!')
       .required('Kategori produk wajib diisi!')
       .typeError('Kategori produk wajib diisi!'),
 
     product_price: Yup.number()
       .required('Harga produk wajib diisi!')
       .typeError('Harga produk wajib diisi!')
-      .min(0, 'Harga produk tidak boleh kurang dari 0!'),
+      .min(1, 'Harga produk tidak boleh kurang dari 1!'),
 
     selling_price: Yup.number()
       .required('Harga jual wajib diisi!')
       .typeError('Harga jual wajib diisi!')
-      .min(0, 'Harga jual tidak boleh kurang dari 0!'),
+      .min(1, 'Harga jual tidak boleh kurang dari 1!'),
 
     tax: Yup.number()
       .required('Pajak wajib diisi!')
@@ -69,7 +71,7 @@ export const ProductFormSchema: Yup.ObjectSchema<ProductFormSchemaType> =
     expiry_period: Yup.number()
       .required('Periode kadaluarsa wajib diisi!')
       .typeError('Periode kadaluarsa wajib diisi!')
-      .min(0, 'Periode kadaluarsa tidak boleh kurang dari 0!'),
+      .min(1, 'Periode kadaluarsa tidak boleh kurang dari 1 hari!'),
 
     supplier_ids: Yup.array()
       .of(Yup.number().required().typeError('Supplier tidak valid!'))
diff --git a/src/components/pages/master-data/product/form/ProductForm.tsx b/src/components/pages/master-data/product/form/ProductForm.tsx
index 2a009200..200b9d39 100644
--- a/src/components/pages/master-data/product/form/ProductForm.tsx
+++ b/src/components/pages/master-data/product/form/ProductForm.tsx
@@ -234,7 +234,7 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               <span>{productFormErrorMessage}</span>
             </div>
           )}
-          <div className='flex flex-col gap-4'>
+          <div className='grid grid-cols-1 gap-4'>
             <TextInput
               required
               label='Nama'
@@ -247,179 +247,193 @@ const ProductForm = ({ type = 'add', initialValues }: ProductFormProps) => {
               errorMessage={formik.errors.name}
               readOnly={type === 'detail'}
             />
-            <TextInput
-              required
-              label='Merek'
-              name='brand'
-              placeholder='Masukkan merek...'
-              value={formik.values.brand}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={formik.touched.brand && Boolean(formik.errors.brand)}
-              errorMessage={formik.errors.brand}
-              readOnly={type === 'detail'}
-            />
-            <TextInput
-              required
-              label='SKU'
-              name='sku'
-              placeholder='Masukkan SKU...'
-              value={formik.values.sku}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              isError={formik.touched.sku && Boolean(formik.errors.sku)}
-              errorMessage={formik.errors.sku}
-              readOnly={type === 'detail'}
-            />
-            <SelectInput
-              required
-              label='Satuan'
-              placeholder='Pilih satuan...'
-              value={formik.values.uom ?? undefined}
-              onChange={uomChangeHandler}
-              options={uomOptions}
-              onInputChange={setUomSelectInputValue}
-              isLoading={isLoadingUoms}
-              isError={formik.touched.uom_id && Boolean(formik.errors.uom_id)}
-              errorMessage={formik.errors.uom_id as string}
-              isDisabled={type === 'detail'}
-              isClearable
-            />
-            <SelectInput
-              required
-              label='Kategori Produk'
-              placeholder='Pilih kategori produk...'
-              value={formik.values.product_category ?? undefined}
-              onChange={categoryChangeHandler}
-              options={categoryOptions}
-              onInputChange={setCategorySelectInputValue}
-              isLoading={isLoadingCategories}
-              isError={
-                formik.touched.product_category_id &&
-                Boolean(formik.errors.product_category_id)
-              }
-              errorMessage={formik.errors.product_category_id as string}
-              isDisabled={type === 'detail'}
-              isClearable
-            />
-            <NumberInput
-              required
-              label='Harga Produk'
-              name='product_price'
-              placeholder='Masukkan harga produk...'
-              value={formik.values.product_price}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              decimalScale={2}
-              allowNegative={false}
-              thousandSeparator=','
-              decimalSeparator='.'
-              inputPrefix='Rp '
-              isError={
-                formik.touched.product_price &&
-                Boolean(formik.errors.product_price)
-              }
-              errorMessage={formik.errors.product_price as string}
-              readOnly={type === 'detail'}
-            />
-            <NumberInput
-              required
-              label='Harga Jual'
-              name='selling_price'
-              placeholder='Masukkan harga jual...'
-              value={formik.values.selling_price}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              decimalScale={2}
-              allowNegative={false}
-              thousandSeparator=','
-              decimalSeparator='.'
-              inputPrefix='Rp '
-              isError={
-                formik.touched.selling_price &&
-                Boolean(formik.errors.selling_price)
-              }
-              errorMessage={formik.errors.selling_price as string}
-              readOnly={type === 'detail'}
-            />
-            <NumberInput
-              required
-              label='Pajak (%)'
-              name='tax'
-              placeholder='Masukkan pajak...'
-              value={formik.values.tax}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              decimalScale={2}
-              allowNegative={false}
-              thousandSeparator=','
-              decimalSeparator='.'
-              inputSuffix='%'
-              isError={formik.touched.tax && Boolean(formik.errors.tax)}
-              errorMessage={formik.errors.tax as string}
-              readOnly={type === 'detail'}
-            />
-            <NumberInput
-              required
-              label='Periode Kadaluarsa (hari)'
-              name='expiry_period'
-              placeholder='Masukkan periode kadaluarsa...'
-              value={formik.values.expiry_period}
-              onChange={formik.handleChange}
-              onBlur={formik.handleBlur}
-              decimalScale={0}
-              allowNegative={false}
-              thousandSeparator=','
-              decimalSeparator='.'
-              inputSuffix='hari'
-              isError={
-                formik.touched.expiry_period &&
-                Boolean(formik.errors.expiry_period)
-              }
-              errorMessage={formik.errors.expiry_period as string}
-              readOnly={type === 'detail'}
-            />
-            <SelectInput
-              required
-              label='Supplier'
-              placeholder='Pilih supplier...'
-              isMulti
-              value={supplierOptions.filter((opt) =>
-                (formik.values.supplier_ids || []).includes(opt.value)
-              )}
-              onChange={supplierChangeHandler}
-              options={supplierOptions}
-              onInputChange={setSupplierSelectInputValue}
-              isLoading={isLoadingSuppliers}
-              isError={
-                formik.touched.supplier_ids &&
-                Boolean(formik.errors.supplier_ids)
-              }
-              errorMessage={formik.errors.supplier_ids as string}
-              isDisabled={type === 'detail'}
-              isClearable
-            />
-            <SelectInput
-              required
-              label='Flags'
-              placeholder='Pilih flags...'
-              isMulti
-              value={PRODUCT_FLAG_OPTIONS.filter((opt) =>
-                (formik.values.flags || []).includes(opt.value)
-              )}
-              onChange={(val) => {
-                const arr = Array.isArray(val) ? val : val ? [val] : [];
-                formik.setFieldValue(
-                  'flags',
-                  arr.map((v) => (v as OptionType).value)
-                );
-              }}
-              options={PRODUCT_FLAG_OPTIONS}
-              isError={formik.touched.flags && Boolean(formik.errors.flags)}
-              errorMessage={formik.errors.flags as string}
-              isDisabled={type === 'detail'}
-              isClearable
-            />
+            <div className='grid grid-cols-2 gap-4'>
+              <TextInput
+                required
+                label='Merek'
+                name='brand'
+                placeholder='Masukkan merek...'
+                value={formik.values.brand}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                isError={formik.touched.brand && Boolean(formik.errors.brand)}
+                errorMessage={formik.errors.brand}
+                readOnly={type === 'detail'}
+              />
+              <TextInput
+                required
+                label='SKU'
+                name='sku'
+                placeholder='Masukkan SKU...'
+                value={formik.values.sku}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                isError={formik.touched.sku && Boolean(formik.errors.sku)}
+                errorMessage={formik.errors.sku}
+                readOnly={type === 'detail'}
+              />
+            </div>
+            <div className='grid grid-cols-2 gap-4'>
+              <SelectInput
+                required
+                label='Satuan'
+                placeholder='Pilih satuan...'
+                value={formik.values.uom ?? undefined}
+                onChange={uomChangeHandler}
+                options={uomOptions}
+                onInputChange={setUomSelectInputValue}
+                isLoading={isLoadingUoms}
+                isError={
+                  (formik.touched.uom || formik.touched.uom_id) &&
+                  Boolean(formik.errors.uom_id)
+                }
+                errorMessage={formik.errors.uom_id as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+              <SelectInput
+                required
+                label='Kategori Produk'
+                placeholder='Pilih kategori produk...'
+                value={formik.values.product_category ?? undefined}
+                onChange={categoryChangeHandler}
+                options={categoryOptions}
+                onInputChange={setCategorySelectInputValue}
+                isLoading={isLoadingCategories}
+                isError={
+                  (formik.touched.product_category ||
+                    formik.touched.product_category_id) &&
+                  Boolean(formik.errors.product_category_id)
+                }
+                errorMessage={formik.errors.product_category_id as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+            </div>
+            <div className='grid grid-cols-2 gap-4'>
+              <NumberInput
+                required
+                label='Harga Produk'
+                name='product_price'
+                placeholder='Masukkan harga produk...'
+                value={formik.values.product_price}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                decimalScale={2}
+                allowNegative={false}
+                thousandSeparator=','
+                decimalSeparator='.'
+                inputPrefix='Rp '
+                isError={
+                  formik.touched.product_price &&
+                  Boolean(formik.errors.product_price)
+                }
+                errorMessage={formik.errors.product_price as string}
+                readOnly={type === 'detail'}
+              />
+              <NumberInput
+                required
+                label='Harga Jual'
+                name='selling_price'
+                placeholder='Masukkan harga jual...'
+                value={formik.values.selling_price}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                decimalScale={2}
+                allowNegative={false}
+                thousandSeparator=','
+                decimalSeparator='.'
+                inputPrefix='Rp '
+                isError={
+                  formik.touched.selling_price &&
+                  Boolean(formik.errors.selling_price)
+                }
+                errorMessage={formik.errors.selling_price as string}
+                readOnly={type === 'detail'}
+              />
+            </div>
+            <div className='grid grid-cols-2 gap-4'>
+              <NumberInput
+                required
+                label='Pajak (%)'
+                name='tax'
+                placeholder='Masukkan pajak...'
+                value={formik.values.tax}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                decimalScale={2}
+                allowNegative={false}
+                thousandSeparator=','
+                decimalSeparator='.'
+                inputSuffix='%'
+                isError={formik.touched.tax && Boolean(formik.errors.tax)}
+                errorMessage={formik.errors.tax as string}
+                readOnly={type === 'detail'}
+              />
+              <NumberInput
+                required
+                label='Periode Kadaluarsa (hari)'
+                name='expiry_period'
+                placeholder='Masukkan periode kadaluarsa...'
+                value={formik.values.expiry_period}
+                onChange={formik.handleChange}
+                onBlur={formik.handleBlur}
+                decimalScale={0}
+                allowNegative={false}
+                thousandSeparator=','
+                decimalSeparator='.'
+                inputSuffix='hari'
+                isError={
+                  formik.touched.expiry_period &&
+                  Boolean(formik.errors.expiry_period)
+                }
+                errorMessage={formik.errors.expiry_period as string}
+                readOnly={type === 'detail'}
+              />
+            </div>
+            <div className='grid grid-cols-2 gap-4'>
+              <SelectInput
+                required
+                label='Supplier'
+                placeholder='Pilih supplier...'
+                isMulti
+                value={supplierOptions.filter((opt) =>
+                  (formik.values.supplier_ids || []).includes(opt.value)
+                )}
+                onChange={supplierChangeHandler}
+                options={supplierOptions}
+                onInputChange={setSupplierSelectInputValue}
+                isLoading={isLoadingSuppliers}
+                isError={
+                  formik.touched.supplier_ids &&
+                  Boolean(formik.errors.supplier_ids)
+                }
+                errorMessage={formik.errors.supplier_ids as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+              <SelectInput
+                required
+                label='Flags'
+                placeholder='Pilih flags...'
+                isMulti
+                value={PRODUCT_FLAG_OPTIONS.filter((opt) =>
+                  (formik.values.flags || []).includes(opt.value)
+                )}
+                onChange={(val) => {
+                  const arr = Array.isArray(val) ? val : val ? [val] : [];
+                  formik.setFieldValue(
+                    'flags',
+                    arr.map((v) => (v as OptionType).value)
+                  );
+                }}
+                options={PRODUCT_FLAG_OPTIONS}
+                isError={formik.touched.flags && Boolean(formik.errors.flags)}
+                errorMessage={formik.errors.flags as string}
+                isDisabled={type === 'detail'}
+                isClearable
+              />
+            </div>
           </div>
           <div className='flex flex-row justify-between gap-2 flex-wrap'>
             {type !== 'add' && (