refactor(FE): Refactor flags field to boolean and update form handling

src/components/pages/master-data/nonstock/form/NonstockForm.schema.ts

@@ -17,7 +17,7 @@ export const NonstockFormSchema = Yup.object({
     })
   ),
 
-  flags: Yup.array().of(Yup.string()).notRequired(),
+  flags: Yup.boolean().default(false),
 });
 
 export const UpdateNonstockFormSchema = NonstockFormSchema;

src/components/pages/master-data/nonstock/form/NonstockForm.tsx

@@ -12,6 +12,7 @@ import SelectInput, {
   OptionType,
   useSelect,
 } from '@/components/input/SelectInput';
+import { RadioGroup } from '@/components/input/RadioInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
 import RequirePermission from '@/components/helper/RequirePermission';
@@ -29,8 +30,7 @@ import {
 } from '@/types/api/master-data/nonstock';
 import { NonstockApi, SupplierApi, UomApi } from '@/services/api/master-data';
 import { cn } from '@/lib/helper';
-import { flags } from '@/types/api/api-general';
+
-import { SUPPLIER_FLAG_OPTIONS } from '@/config/constant';
 import { useFormikErrorList } from '@/services/hooks/useFormikErrorList';
 import AlertErrorList from '@/components/helper/form/FormErrors';
 import { Supplier } from '@/types/api/master-data/supplier';
@@ -97,7 +97,7 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
           label: supplier.name,
         })) ?? [],
 
-      flags: initialValues?.flags ?? [],
+      flags: initialValues?.flags?.includes('EKSPEDISI') ?? false,
     };
   }, [initialValues]);
 
@@ -112,7 +112,7 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
         name: values.name,
         uom_id: values.uomId,
         supplier_ids: values.supplierIds as number[],
-        flags: values.flags as flags[],
+        flags: values.flags ? ['EKSPEDISI'] : [],
       };
 
       switch (type) {
@@ -183,12 +183,8 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
     router.push('/master-data/nonstock');
   };
 
-  const flagsChangeHandler = (val: OptionType | OptionType[] | null) => {
+  const expeditionChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const formattedFlags = (val as OptionType[]).map(
+    formik.setFieldValue('isExpedition', e.target.value === 'true');
-      (flag) => flag.value as string
-    );
-
-    formik.setFieldValue('flags', formattedFlags);
   };
 
   useEffect(() => {
@@ -268,18 +264,19 @@ const NonstockForm = ({ type = 'add', initialValues }: NonstockFormProps) => {
               isDisabled={type === 'detail'}
             />
 
-            <SelectInput
+            <RadioGroup
-              label='Flags'
+              label='Ekspedisi?'
-              isMulti
+              name='flags'
-              value={SUPPLIER_FLAG_OPTIONS.filter((opt) =>
+              value={String(formik.values.flags)}
-                formik.values.flags?.includes(opt.value)
+              onChange={expeditionChangeHandler}
-              )}
+              onBlur={formik.handleBlur}
-              onChange={flagsChangeHandler}
+              options={[
-              options={SUPPLIER_FLAG_OPTIONS}
+                { label: 'Ya', value: 'true' },
+                { label: 'Tidak', value: 'false' },
+              ]}
               isError={formik.touched.flags && Boolean(formik.errors.flags)}
               errorMessage={formik.errors.flags as string}
-              isDisabled={type === 'detail'}
+              disabled={type === 'detail'}
-              isClearable
             />
           </div>