feat(FE-33): create customers table and details

src/app/master-data/customer/add/page.tsx

@@ -2,7 +2,7 @@ import CustomerForm from "@/components/pages/master-data/customer/form/CustomerF
 
 const AddNonstock = () => {
   return (
-    <section>
+    <section className="w-full p-4 flex flex-row justify-center">
       <CustomerForm/>
     </section>
   );

src/app/master-data/customer/detail/edit/page.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import { CustomerApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import CustomerForm from '@/components/pages/master-data/customer/form/CustomerForm';
+
+const CustomerEdit = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const costumerId = searchParams.get('customerId');
+
+  const { data: costumer, isLoading: isLoadingCostumer } = useSWR(
+    costumerId,
+    (id: number) => CustomerApi.getSingle(id)
+  );
+
+  if (!costumerId) {
+    router.back();
+
+    return (
+      <div className='w-full flex flex-row justify-center items-center p-4'>
+        <span className='loading loading-spinner loading-xl' />
+      </div>
+    );
+  }
+
+  if (!isLoadingCostumer && (!costumer || isResponseError(costumer))) {
+    router.replace('/404');
+    return;
+  }
+
+  return (
+    <div className='w-full p-4 flex flex-row justify-center'>
+      {isLoadingCostumer && (
+        <span className='loading loading-spinner loading-xl' />
+      )}
+      {!isLoadingCostumer && isResponseSuccess(costumer) && (
+        <CustomerForm formType='edit' initialValues={costumer.data} />
+      )}
+    </div>
+  );
+};
+
+export default CustomerEdit;

src/app/master-data/customer/detail/page.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useRouter, useSearchParams } from "next/navigation";
+import useSWR from "swr";
+import { CustomerApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
+import CustomerForm from "@/components/pages/master-data/customer/form/CustomerForm";
+
+const CustomerDetail = () => {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const costumerId = searchParams.get("customerId");
+
+  const { data: costumer, isLoading: isLoadingCostumer } = useSWR(
+    costumerId,
+    (id: number) => CustomerApi.getSingle(id)
+  );
+
+  if(!costumerId){
+    router.back();
+
+    return (
+      <div className="w-full flex flex-row justify-center items-center p-4">
+        <span className="loading loading-spinner loading-xl" />
+      </div>
+    );
+  }
+
+  if(!isLoadingCostumer && (!costumer || isResponseError(costumer))){
+    router.replace("/404");
+    return;
+  }
+
+  return (
+    <div className="w-full p-4 flex flex-row justify-center">
+      {isLoadingCostumer && <span className="loading loading-spinner loading-xl" />}
+      {!isLoadingCostumer && isResponseSuccess(costumer) && (
+        <CustomerForm formType="detail" initialValues={costumer.data} />
+      )}
+    </div>
+  )
+};
+
+export default CustomerDetail;

src/components/pages/master-data/customer/CustomersTable.tsx

@@ -1,33 +1,36 @@
-'use client'
+'use client';
 
-import Button from "@/components/Button";
-import DebouncedTextInput from "@/components/input/DebouncedTextInput";
-import { useModal } from "@/components/Modal";
-import ConfirmationModal from "@/components/modal/ConfirmationModal";
-import Table from "@/components/Table";
-import RowCollapseOptions from "@/components/table/RowCollapseOptions";
-import RowDropdownOptions from "@/components/table/RowDropdownOptions";
-import { isResponseSuccess } from "@/lib/api-helper";
-import { cn } from "@/lib/helper";
-import { CustomerApi } from "@/services/api/master-data";
-import { useTableFilter } from "@/services/hooks/useTableFilter";
-import { Customer } from "@/types/api/master-data/customer";
-import { Icon } from "@iconify/react";
+import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import { useModal } from '@/components/Modal';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import Table from '@/components/Table';
+import RowCollapseOptions from '@/components/table/RowCollapseOptions';
+import RowDropdownOptions from '@/components/table/RowDropdownOptions';
+import { ROWS_OPTIONS } from '@/config/constant';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { cn } from '@/lib/helper';
+import { CustomerApi } from '@/services/api/master-data';
+import { useTableFilter } from '@/services/hooks/useTableFilter';
+import { Customer } from '@/types/api/master-data/customer';
+import { Icon } from '@iconify/react';
 import {
   CellContext,
   ColumnDef,
   ColumnSort,
   SortingState,
- } from "@tanstack/react-table";
-import { useState } from "react";
-import useSWR from "swr";
+} from '@tanstack/react-table';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useSWR from 'swr';
 
 const RowOptionsMenu = ({
   type = 'dropdown',
   props,
   deleteClickHandler,
-} : {
-  type: 'dropdown' | 'collapse',
+}: {
+  type: 'dropdown' | 'collapse';
   props: CellContext<Customer, unknown>;
   deleteClickHandler: () => void;
 }) => {
@@ -37,25 +40,33 @@ const RowOptionsMenu = ({
       className={cn(
         {
           'dropdown-content': type === 'dropdown',
-          'mt-2': type === 'collapse'
+          'mt-2': type === 'collapse',
         },
         'p-2.5 mr-2 flex flex-col gap-1 bg-base-100 rounded-box z-10 border border-black/10 shadow'
-        )
-      }
-      >
+      )}
+    >
       <Button
+        href={`/master-data/customer/detail/?customerId=${props.row.original.id}`}
+        variant='ghost'
+        color='primary'
         className='justify-start text-sm'
       >
-        <Icon icon='mdi:eye-outline' width={16} height={16}/> 
+        <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
       </Button>
       <Button
         className='justify-start text-sm'
+        href={`/master-data/customer/detail/edit/?customerId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
       >
         <Icon icon='material-symbols:edit-outline' width={16} height={16} />
         Edit
       </Button>
       <Button
+        onClick={deleteClickHandler}
+        variant='ghost'
+        color='error'
         className='text-error hover:text-inherit'
       >
         <Icon
@@ -64,10 +75,11 @@ const RowOptionsMenu = ({
           height={16}
           className='justify-start text-sm'
         />
+        Delete
       </Button>
     </div>
   );
-}
+};
 
 const CustomersTable = () => {
   const {
@@ -76,31 +88,34 @@ const CustomersTable = () => {
     setPage,
     setPageSize,
     toQueryString: getTableFilterQueryString,
-  } = useTableFilter ({
-    initial: { search: '', nameSort: '', picSort: ''},
+  } = useTableFilter({
+    initial: { search: '', nameSort: '', picSort: '' },
     paramMap: {
       page: 'page',
       pageSize: 'limit',
       nameSort: 'sort_name',
       picSort: 'sort_pic',
-    }
+    },
   });
 
+  // Fetch Data
   const {
     data: customers,
     isLoading,
-    mutate: refreshCustomers 
+    mutate: refreshCustomers,
   } = useSWR(
     `${CustomerApi.basePath}${getTableFilterQueryString()}`,
     CustomerApi.getAllFetcher
   );
 
+  // State
   const deleteModal = useModal();
-
-  const [selectedCustomer, setSelectedCustomer] = useState<Customer | undefined>(undefined);
-
+  const [selectedCustomer, setSelectedCustomer] = useState<
+    Customer | undefined
+  >(undefined);
   const [isDeleteLoading, setIsDeleteLoading] = useState(false);
 
+  // Columns Definition
   const customersColumns: ColumnDef<Customer>[] = [
     {
       header: '#',
@@ -173,6 +188,24 @@ const CustomersTable = () => {
     },
   ];
 
+  // Handler
+  const confirmationModalDeleteClickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await CustomerApi.delete(selectedCustomer?.id as number);
+    refreshCustomers();
+
+    deleteModal.closeModal();
+    toast.success('Successfully delete Customer!');
+    setIsDeleteLoading(false);
+  };
+  const searchChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    updateFilter('search', e.target.value);
+  };
+  const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    const newVal = val as OptionType;
+    setPageSize(newVal.value as number);
+  };
 
   return (
     <>
@@ -190,11 +223,22 @@ const CustomersTable = () => {
               name='search'
               placeholder='Cari Kandang'
               value={tableFilterState.search}
+              onChange={searchChangeHandler}
               className={{ wrapper: 'sm:max-w-3xs' }}
             />
           </div>
 
           <div className='flex flex-row justify-end'>
+            <SelectInput
+              label='Baris'
+              options={ROWS_OPTIONS}
+              value={{
+                label: String(tableFilterState.pageSize),
+                value: tableFilterState.pageSize,
+              }}
+              onChange={pageSizeChangeHandler}
+              className={{ wrapper: 'max-w-28' }}
+            />
           </div>
         </div>
 
@@ -236,10 +280,11 @@ const CustomersTable = () => {
           text: 'Ya',
           color: 'error',
           isLoading: isDeleteLoading,
+          onClick: confirmationModalDeleteClickHandler,
         }}
       />
     </>
   );
-}
+};
 
 export default CustomersTable;

src/components/pages/master-data/customer/form/CustomerForm.schema.ts

@@ -1,24 +1,29 @@
 import * as Yup from 'yup';
 
 export const CustomerFormSchema = Yup.object({
-  name: Yup.string()
-    .required('Nama wajib diisi!'),
+  name: Yup.string().required('Nama wajib diisi!'),
 
-  picId: Yup.number()
-    .min(1, 'PIC wajib diisi!')
-    .required('PIC wajib diisi!'),
+  picId: Yup.number().min(1, 'PIC wajib diisi!').required('PIC wajib diisi!'),
 
   pic: Yup.object({
     value: Yup.number().min(1).required(),
     label: Yup.string().required(),
-  }).nullable(),
+  }).required('PIC wajib diisi!'),
 
-  type: Yup.string()
-    .oneOf(['INDIVIDUAL', 'BISNIS'], 'Tipe harus INDIVIDUAL atau BISNIS')
+  type: Yup.object({
+    value: Yup.string().required(),
+    label: Yup.string().required(),
+  })
+    .oneOf(
+      [
+        { value: 'INDIVIDUAL', label: 'INDIVIDUAL' },
+        { value: 'BISNIS', label: 'BISNIS' },
+      ],
+      'Tipe harus INDIVIDUAL atau BISNIS'
+    )
     .required('Tipe wajib diisi!'),
 
-  address: Yup.string()
-    .required('Alamat wajib diisi!'),
+  address: Yup.string().required('Alamat wajib diisi!'),
 
   phone: Yup.string()
     .matches(/^[0-9]+$/, 'Nomor telepon hanya boleh berisi angka!')

src/components/pages/master-data/customer/form/CustomerForm.tsx

@@ -1,190 +1,205 @@
-'use client'
+'use client';
 
-import { useModal } from "@/components/Modal";
-import { isResponseError, isResponseSuccess } from "@/lib/api-helper";
-import { CustomerApi } from "@/services/api/master-data";
-import { CreateCustomerPayload, Customer, UpdateCustomerPayload } from "@/types/api/master-data/customer";
-import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import toast from "react-hot-toast";
-import { CustomerFormValues } from "./CustomerForm.schema";
-import { useFormik } from "formik";
-import Button from "@/components/Button";
-import { Icon } from "@iconify/react";
-import TextInput from "@/components/input/TextInput";
-import { cn } from "@/lib/helper";
-import ConfirmationModal from "@/components/modal/ConfirmationModal";
-import TextArea from "@/components/input/TextArea";
-import SelectInput, { OptionType } from "@/components/input/SelectInput";
-import useSWR from "swr";
-import { UserApi } from "@/services/api/user";
-import { CUSTOMER_TYPE_OPTIONS } from "@/config/constant";
+import { useModal } from '@/components/Modal';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { CustomerApi } from '@/services/api/master-data';
+import {
+  CreateCustomerPayload,
+  Customer,
+  UpdateCustomerPayload,
+} from '@/types/api/master-data/customer';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+import { CustomerFormValues } from './CustomerForm.schema';
+import { useFormik } from 'formik';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import TextInput from '@/components/input/TextInput';
+import { cn } from '@/lib/helper';
+import ConfirmationModal from '@/components/modal/ConfirmationModal';
+import TextArea from '@/components/input/TextArea';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import useSWR from 'swr';
+import { UserApi } from '@/services/api/user';
+import { CUSTOMER_TYPE_OPTIONS } from '@/config/constant';
 
 interface CustomerFormProps {
   formType?: 'add' | 'edit' | 'detail';
   initialValues?: Customer;
 }
 
-const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) => {
-    // Setup Kebutuhan Form
-    const router = useRouter();
-    const deleteModal = useModal();
+const CustomerForm = ({
+  formType = 'add',
+  initialValues,
+}: CustomerFormProps) => {
+  // Setup Kebutuhan Form
+  const router = useRouter();
+  const deleteModal = useModal();
 
-    // Setup State
-    const [customerFormErrorMessage, setCustomerFormErrorMessage] = useState('');
-    const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-    const [picSelectInputValue, setPicSelectInputValue] = useState('');
-    const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
+  // Setup State
+  const [customerFormErrorMessage, setCustomerFormErrorMessage] = useState('');
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [picSelectInputValue, setPicSelectInputValue] = useState('');
+  const [typeSelectInputValue, setTypeSelectInputValue] = useState('');
 
-    // Fetch Data
-    const picUrl = `${UserApi.basePath}?${new URLSearchParams({
-      search: picSelectInputValue ?? '',
-    })}`;
+  // Fetch Data
+  const picUrl = `${UserApi.basePath}?${new URLSearchParams({
+    search: picSelectInputValue ?? '',
+  })}`;
 
-    const { data: pic, isLoading: isLoadingPic } = useSWR(
-      picUrl,
-      UserApi.getAllFetcher
-    );
+  const { data: pic, isLoading: isLoadingPic } = useSWR(
+    picUrl,
+    UserApi.getAllFetcher
+  );
 
-    // -- Options data mapping
-    const picOptions = isResponseSuccess(pic)
-      ? pic?.data.map((area) => ({
-          value: area.id,
-          label: area.name,
-        }))
-      : [];
-    const typeOptions = CUSTOMER_TYPE_OPTIONS;  
+  // -- Options data mapping
+  const picOptions = isResponseSuccess(pic)
+    ? pic?.data.map((area) => ({
+        value: area.id,
+        label: area.name,
+      }))
+    : [];
+  const typeOptions = CUSTOMER_TYPE_OPTIONS;
 
+  // Handler Event
+  const createCustomerHandler = useCallback(
+    async (payload: CreateCustomerPayload) => {
+      const createCustomerRes = await CustomerApi.create(payload);
 
-    // Handler Event
-    const createCustomerHandler = useCallback(
-        async (payload : CreateCustomerPayload) => {
-            const createCustomerRes = await CustomerApi.create(payload);
+      if (isResponseError(createCustomerRes)) {
+        setCustomerFormErrorMessage(createCustomerRes.message);
+        return;
+      }
 
-            if(isResponseError(createCustomerRes)){
-                setCustomerFormErrorMessage(createCustomerRes.message);
-                return;
-            }
-
-            toast.success(createCustomerRes?.message as string);
-            router.push('/master-data/customer');
-        },
-        [router]
-    );
-    const updateCustomerHandler = useCallback(
-        async (customerId : number, payload : UpdateCustomerPayload) => {
-            const updateCustomerRes = await CustomerApi.update(customerId, payload);
-
-            if(isResponseError(updateCustomerRes)){
-                setCustomerFormErrorMessage(updateCustomerRes.message);
-                return;
-            }
-
-            toast.success(updateCustomerRes?.message as string);
-            router.push('/master-data/customer');
-        },
-        [router]
-    );
-
-    const deleteCustomerHandler = () => {
-      deleteModal.openModal();
-    }
-
-    const confirmationModalDeleteclickHandler = async () => {
-      setIsDeleteLoading(true);
-
-      await CustomerApi.delete(initialValues?.id as number);
-
-      deleteModal.closeModal();
-      setIsDeleteLoading(false);
+      toast.success(createCustomerRes?.message as string);
       router.push('/master-data/customer');
+    },
+    [router]
+  );
+  const updateCustomerHandler = useCallback(
+    async (customerId: number, payload: UpdateCustomerPayload) => {
+      const updateCustomerRes = await CustomerApi.update(customerId, payload);
+
+      if (isResponseError(updateCustomerRes)) {
+        setCustomerFormErrorMessage(updateCustomerRes.message);
+        return;
+      }
+
+      toast.success(updateCustomerRes?.message as string);
+      router.push('/master-data/customer');
+    },
+    [router]
+  );
+
+  const deleteCustomerHandler = () => {
+    deleteModal.openModal();
+  };
+
+  const confirmationModalDeleteclickHandler = async () => {
+    setIsDeleteLoading(true);
+
+    await CustomerApi.delete(initialValues?.id as number);
+
+    deleteModal.closeModal();
+    setIsDeleteLoading(false);
+    router.push('/master-data/customer');
+  };
+
+  // -- Option Handler
+  const picChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('pic', true);
+    formik.setFieldValue('pic', val);
+
+    formik.setFieldTouched('picId', true);
+    formik.setFieldValue('picId', (val as OptionType)?.value);
+  };
+  const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
+    formik.setFieldTouched('type', true);
+    formik.setFieldValue('type', val);
+  };
+
+  // Utils Functions
+  const normalizeType = (type?: string | { value: string; label: string }) => {
+    if (!type) return CUSTOMER_TYPE_OPTIONS[0];
+    return typeof type === 'string' ? { value: type, label: type } : type;
+  };
+
+  // Memo untuk simpan input sebelumnya
+  const formikInitialValues = useMemo<CustomerFormValues>(() => {
+    return {
+      name: initialValues?.name ?? '',
+      email: initialValues?.email ?? '',
+      phone: initialValues?.phone ?? '',
+      picId: initialValues?.pic?.id ?? 0,
+      pic: initialValues?.pic
+        ? {
+            value: initialValues.pic.id,
+            label: initialValues.pic.name,
+          }
+        : {
+            value: 0,
+            label: '',
+          },
+      type: normalizeType(initialValues?.type),
+      address: initialValues?.address ?? '',
+      account_number: initialValues?.account_number ?? '',
     };
+  }, [initialValues]);
 
-    // -- Option Handler
-    const picChangeHandler = (val: OptionType | OptionType[] | null) => {
-      formik.setFieldTouched('pic', true);
-      formik.setFieldValue('pic', val);
+  // Formik
+  const formik = useFormik<CustomerFormValues>({
+    initialValues: formikInitialValues,
+    enableReinitialize: true,
+    onSubmit: async (values) => {
+      // reset error message
+      setCustomerFormErrorMessage('');
 
-      formik.setFieldTouched('picId', true);
-      formik.setFieldValue('picId', (val as OptionType)?.value);
-    }
-    const typeChangeHandler = (val: OptionType | OptionType[] | null) => {
-      formik.setFieldTouched('type', true);
-      formik.setFieldValue('type', val);
-    }
+      // create payload
+      const payload: CreateCustomerPayload = {
+        name: values.name,
+        email: values.email,
+        phone: values.phone,
+        pic_id: values.picId,
+        type: (values.type as OptionType).value as string,
+        address: values.address,
+        account_number: values.account_number,
+      };
 
-    // Memo untuk simpan input sebelumnya
-    const formikInitialValues = useMemo<CustomerFormValues>(() => {
-        return {
-            name: initialValues?.name as string ?? '',
-            email: initialValues?.email ?? '',
-            phone: initialValues?.phone ?? '',
-            picId: initialValues?.pic?.id ?? 0,
-            pic: initialValues?.pic ? {
-                value: initialValues.pic.id,
-                label: initialValues.pic.name,
-            } : null,
-            type: initialValues?.type ?? 'INDIVIDUAL',
-            address: initialValues?.address ?? '',
-            account_number: initialValues?.account_number ?? '',
-        };
-    }, [initialValues]);
+      // cek type form yang disubmit
+      switch (formType) {
+        case 'add':
+          await createCustomerHandler(payload);
+          break;
+        case 'edit':
+          await updateCustomerHandler(initialValues?.id as number, payload);
+          break;
+      }
+    },
+  });
 
-    // Formik
-    const formik = useFormik<CustomerFormValues>({
-        initialValues: formikInitialValues,
-        enableReinitialize: true,
-        onSubmit: async (values) => {
-            // reset error message
-            setCustomerFormErrorMessage('');
+  const { setValues: formikSetValues } = formik;
 
-            // create payload
-            const payload: CreateCustomerPayload = {
-                name: values.name,
-                email: values.email,
-                phone: values.phone,
-                pic_id: values.picId,
-                type: values.type,
-                address: values.address,
-                account_number: values.account_number,
-            };
+  // Initialize Formik
+  useEffect(() => {
+    formikSetValues(formikInitialValues);
+  }, [formikSetValues, formikInitialValues]);
 
-            // cek type form yang disubmit
-            switch (formType) {
-              case 'add':
-                await createCustomerHandler(payload);
-                break;
-              case 'edit':
-                await updateCustomerHandler(initialValues?.id as number, payload);
-                break;
-            }
-        }
-        
-    });
-
-    const {setValues: formikSetValues} = formik;
-
-    // Initialize Formik
-    useEffect(() => {
-      formikSetValues(formikInitialValues);
-    }, [formikSetValues, formikInitialValues]);
-
-    
-    // Render
-    return (
-      <>
-      <section className="mx-auto my-8 max-w-xl">
-        <header className="flex flex-col gap-4">
+  // Render
+  return (
+    <>
+      <section className='w-full max-w-xl'>
+        <header className='flex flex-col gap-4'>
           <Button
-            href="/master-data/customer"
-            variant="link"
-            className="w-fit p-0 text-primary"
+            href='/master-data/customer'
+            variant='link'
+            className='w-fit p-0 text-primary'
           >
             <Icon icon='uil:arrow-left' width={24} height={24} />
             Kembali
           </Button>
 
-          <h1 className="text-2xl font-bold text-center">
+          <h1 className='text-2xl font-bold text-center'>
             {formType === 'add' && 'Tambah Customer'}
             {formType === 'edit' && 'Ubah Customer'}
             {formType === 'detail' && 'Detail Customer'}
@@ -194,16 +209,16 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
         <form
           onSubmit={formik.handleSubmit}
           onReset={formik.handleReset}
-          className="w-full mt-8 flex flex-col gap-6"
-          >
-
+          className='w-full mt-8 flex flex-col gap-6'
+        >
           {/* Fields Form */}
-          <div className="flex flex-col gap-4">
+          <div className='flex flex-col gap-4'>
+            {formik.values.picId}
             <TextInput
               required
-              label="Nama"
-              name="name"
-              placeholder="Masukkan nama customer"
+              label='Nama'
+              name='name'
+              placeholder='Masukkan nama customer'
               value={formik.values.name}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -213,7 +228,7 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
             />
             <SelectInput
               required
-              placeholder="Pilih PIC"
+              placeholder='Pilih PIC'
               label='PIC'
               value={formik.values.pic ?? undefined}
               onChange={picChangeHandler}
@@ -228,9 +243,13 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
             />
             <SelectInput
               required
-              placeholder="Pilih Tipe"
+              placeholder='Pilih Tipe'
               label='Tipe'
-              value={typeOptions.find((item) => item.value === formik.values.type) ?? undefined}
+              value={
+                typeOptions.find(
+                  (item) => item.value === formik.values.type.value
+                ) ?? undefined
+              }
               onChange={typeChangeHandler}
               options={typeOptions}
               onInputChange={setTypeSelectInputValue}
@@ -242,9 +261,9 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
             />
             <TextInput
               required
-              label="Email"
-              name="email"
-              placeholder="Masukkan email customer"
+              label='Email'
+              name='email'
+              placeholder='Masukkan email customer'
               value={formik.values.email}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -254,33 +273,36 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
             />
             <TextInput
               required
-              label="Nomor Telepon"
-              name="phone"
-              placeholder="Masukkan nomor telepon customer"
+              label='Nomor Telepon'
+              name='phone'
+              placeholder='Masukkan nomor telepon customer'
               value={formik.values.phone}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
               isError={formik.touched.phone && Boolean(formik.errors.phone)}
               errorMessage={formik.errors.phone}
               readOnly={formType === 'detail'}
-              />
+            />
             <TextInput
               required
-              label="Nomor Rekening"
-              name="account_number"
-              placeholder="Masukkan nomor rekening customer"
+              label='Nomor Rekening'
+              name='account_number'
+              placeholder='Masukkan nomor rekening customer'
               value={formik.values.account_number}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
-              isError={formik.touched.account_number && Boolean(formik.errors.account_number)}
+              isError={
+                formik.touched.account_number &&
+                Boolean(formik.errors.account_number)
+              }
               errorMessage={formik.errors.account_number}
               readOnly={formType === 'detail'}
             />
             <TextArea
               required
-              label="Alamat"
-              name="address"
-              placeholder="Masukkan alamat customer"
+              label='Alamat'
+              name='address'
+              placeholder='Masukkan alamat customer'
               value={formik.values.address}
               onChange={formik.handleChange}
               onBlur={formik.handleBlur}
@@ -314,7 +336,7 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
                   <Button
                     type='button'
                     color='warning'
-                    href={`/master-data/area/detail/edit/?areaId=${initialValues?.id}`}
+                    href={`/master-data/customer/detail/edit/?customerId=${initialValues?.id}`}
                     className='px-4'
                   >
                     <Icon
@@ -351,6 +373,17 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
               </div>
             )}
           </div>
+
+          {customerFormErrorMessage && (
+            <div role='alert' className='alert alert-error'>
+              <Icon
+                icon='material-symbols:error-outline'
+                width={24}
+                height={24}
+              />
+              <span>{customerFormErrorMessage}</span>
+            </div>
+          )}
         </form>
       </section>
 
@@ -370,8 +403,8 @@ const CustomerForm = ({formType = 'add', initialValues} : CustomerFormProps) =>
           }}
         />
       )}
-      </>
-    );
-}
+    </>
+  );
+};
 
 export default CustomerForm;

src/types/api/master-data/customer.d.ts

@@ -5,7 +5,7 @@ export type BaseCustomer = {
     name: string;
     pic_id: number;
     pic: CreatedUser;
-    type: 'INDIVIDUAL' | 'BISNIS';
+    type: string;
     address: string;
     phone: string;
     email: string;
@@ -17,7 +17,7 @@ export type Customer = BaseMetadata & BaseCustomer;
 export type CreateCustomerPayload = {
     name: string;
     pic_id: number;
-    type: 'INDIVIDUAL' | 'BISNIS';
+    type: string;
     address: string;
     phone: string;
     email: string;