refactor(FE-Storyless): enhance ProductCategoryForm schema and validation, improve UI text and layout

src/components/pages/master-data/product-category/form/ProductCategoryForm.schema.ts

@@ -1,9 +1,17 @@
 import * as Yup from 'yup';
 
-export const ProductCategoryFormSchema = Yup.object({
+type ProductCategoryFormSchemaType = {
-  code: Yup.string().required('Kode wajib diisi!').max(3, 'Kode kategori produk melebihi 3 karakter!'),
+  code: string;
-  name: Yup.string().required('Nama wajib diisi!'),
+  name: string;
-});
+};
+
+export const ProductCategoryFormSchema: Yup.ObjectSchema<ProductCategoryFormSchemaType> =
+  Yup.object({
+    code: Yup.string()
+      .required('Kode wajib diisi!')
+      .max(3, 'Kode kategori produk melebihi 3 karakter!'),
+    name: Yup.string().required('Nama wajib diisi!'),
+  });
 
 export const UpdateProductCategoryFormSchema = ProductCategoryFormSchema;
 

src/components/pages/master-data/product-category/form/ProductCategoryForm.tsx

@@ -30,7 +30,10 @@ interface ProductCategoryFormProps {
   initialValues?: ProductCategory;
 }
 
-const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFormProps) => {
+const ProductCategoryForm = ({
+  type = 'add',
+  initialValues,
+}: ProductCategoryFormProps) => {
   const router = useRouter();
   const deleteModal = useModal();
 
@@ -68,16 +71,20 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
     [router]
   );
 
-  const formikInitialValues = useMemo<ProductCategoryFormValues>(() => {
+  const formikInitialValues = useMemo<ProductCategoryFormValues>(
-    return {
+    () => ({
       code: initialValues?.code ?? '',
       name: initialValues?.name ?? '',
-    };
+    }),
-  }, [initialValues]);
+    [initialValues]
+  );
 
   const formik = useFormik<ProductCategoryFormValues>({
     initialValues: formikInitialValues,
-    validationSchema: type === 'edit' ? UpdateProductCategoryFormSchema : ProductCategoryFormSchema,
+    validationSchema:
+      type === 'edit'
+        ? UpdateProductCategoryFormSchema
+        : ProductCategoryFormSchema,
     onSubmit: async (values) => {
       setFormErrorMessage('');
 
@@ -91,7 +98,10 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
           await createProductCategoryHandler(payload);
           break;
         case 'edit':
-          await updateProductCategoryHandler(initialValues?.id as number, payload);
+          await updateProductCategoryHandler(
+            initialValues?.id as number,
+            payload
+          );
           break;
       }
     },
@@ -109,7 +119,7 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
     await ProductCategoryApi.delete(initialValues?.id as number);
 
     deleteModal.closeModal();
-    toast.success('Successfully delete Product Category!');
+    toast.success('Berhasil menghapus data Kategori Produk!');
     setIsDeleteLoading(false);
     router.push('/master-data/product-category');
   };
@@ -120,7 +130,7 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
 
   return (
     <>
-      <section className='w-full max-w-xl'>
+      <section className='w-full max-w-2xl'>
         <header className='flex flex-col gap-4'>
           <Button
             href='/master-data/product-category'
@@ -132,9 +142,9 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
           </Button>
 
           <h1 className='text-2xl font-bold text-center'>
-            {type === 'add' && 'Tambah Product Category'}
+            {type === 'add' && 'Tambah Kategori Produk'}
-            {type === 'edit' && 'Edit Product Category'}
+            {type === 'edit' && 'Edit Kategori Produk'}
-            {type === 'detail' && 'Detail Product Category'}
+            {type === 'detail' && 'Detail Kategori Produk'}
           </h1>
         </header>
 
@@ -148,7 +158,7 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
               required
               label='Kode'
               name='code'
-              placeholder='Masukkan kode kategori produk'
+              placeholder='Masukkan kode...'
               value={formik.values.code}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -160,7 +170,7 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
               required
               label='Nama'
               name='name'
-              placeholder='Masukkan nama kategori produk'
+              placeholder='Masukkan nama...'
               value={formik.values.name}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -247,7 +257,7 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
         <ConfirmationModal
           ref={deleteModal.ref}
           type='error'
-          text={`Apakah anda yakin ingin menghapus data Product Category ini (${initialValues?.name})?`}
+          text={`Apakah anda yakin ingin menghapus data Kategori Produk ini (${initialValues?.name})?`}
           secondaryButton={{
             text: 'Tidak',
           }}
@@ -263,4 +273,4 @@ const ProductCategoryForm = ({ type = 'add', initialValues }: ProductCategoryFor
   );
 };
 
-export default ProductCategoryForm;
+export default ProductCategoryForm;