<iman> update and fix section dokumen

6 files changed, 393 insertions, 363 deletions

diff --git a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts
index e531c3d0..08053e42 100644
--- a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts
+++ b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts
@@ -3,11 +3,13 @@ import {
   TempoProps,
   TempoPropsKontakPerson,
   TempoPropsPengiriman,
+  TempoPropsSupplier,
 } from '~/types/tempo';
 import {
   TempoSchema,
   TempoSchemaKontakPerson,
   TempoSchemaPengiriman,
+  TempoSchemaSupplier,
 } from '~/validations/tempo';
 import { boolean, ZodError } from 'zod';
 
@@ -260,3 +262,42 @@ export const usePengajuanTempoStorePengiriman = create<
       },
     }),
 }));
+
+type StateSupplier = {
+  formSupplier: TempoPropsSupplier[];
+  errorsSupplier: {
+    [key in keyof TempoPropsSupplier]?: string;
+  };
+};
+type ActionSupplier = {
+  updateFormSupplier: (data: TempoPropsSupplier[]) => void;
+
+  validateSupplier: () => void;
+};
+export const usePengajuanTempoStoreSupplier = create<
+  StateSupplier & ActionSupplier
+>((set, get) => ({
+  formSupplier: [],
+  updateFormSupplier: (data) => {
+    set(() => ({
+      formSupplier: data, // Menyimpan data baru ke dalam formSupplier
+    }));
+  },
+
+  errorsSupplier: {},
+  validateSupplier: () => {
+    // try {
+    //   TempoSchemaSupplier.parse(get().formSupplier);
+    //   set({ errorsSupplier: {} });
+    // } catch (error) {
+    //   if (error instanceof ZodError) {
+    //     const errorsSupplier: StateSupplier['errorsSupplier'] = {};
+    //     error.errors.forEach(
+    //       (e) =>
+    //         (errorsSupplier[e.path[0] as keyof TempoPropsSupplier] = e.message)
+    //     );
+    //     set({ errorsSupplier });
+    //   }
+    // }
+  },
+}));
diff --git a/src-migrate/types/tempo.ts b/src-migrate/types/tempo.ts
index b40ef8d7..17c4c906 100644
--- a/src-migrate/types/tempo.ts
+++ b/src-migrate/types/tempo.ts
@@ -2,6 +2,7 @@ import {
   TempoSchema,
   TempoSchemaKontakPerson,
   TempoSchemaPengiriman,
+  TempoSchemaSupplier,
 } from '~/validations/tempo';
 import { OdooApiRes } from './odoo';
 import { z } from 'zod';
@@ -60,12 +61,20 @@ export type tempoPropsPengiriman = {
   dokumenPengirimanInvoice: string;
   dokumenPengirimanInvoiceInput: string;
 };
+export type tempoPropsSupplier = {
+  supplier: string;
+  pic: string;
+  telepon: string;
+  durasiTempo: string;
+  creditLimit: string;
+};
 
 export type TempoApiProps = OdooApiRes<TempoProps>;
 
 export type TempoProps = z.infer<typeof TempoSchema>;
 export type TempoPropsKontakPerson = z.infer<typeof TempoSchemaKontakPerson>;
 export type TempoPropsPengiriman = z.infer<typeof TempoSchemaPengiriman>;
+export type TempoPropsSupplier = z.infer<typeof TempoSchemaSupplier>;
 
 export type TempoResApiProps = {
   Tempo: boolean;
diff --git a/src-migrate/validations/tempo.ts b/src-migrate/validations/tempo.ts
index 9a0df8bb..86bcf6d1 100644
--- a/src-migrate/validations/tempo.ts
+++ b/src-migrate/validations/tempo.ts
@@ -95,3 +95,15 @@ export const TempoSchemaPengiriman = z.object({
   }),
   dokumenPengirimanInvoiceInput: z.string().optional(),
 });
+export const TempoSchemaSupplier = z.object({
+  supplier: z.string().min(1, { message: 'Nama supplier harus diisi' }),
+  pic: z.string().min(1, { message: 'Nama PIC harus diisi' }),
+  telepon: z
+    .string()
+    .min(1, { message: 'Nomor telepon harus diisi' })
+    .refine((val) => /^\d{10,12}$/.test(val), {
+      message: 'Format nomor telepon tidak valid, contoh: 081234567890',
+    }),
+  durasiTempo: z.string().min(1, { message: 'Durasi tempo harus diisi' }),
+  creditLimit: z.string().min(1, { message: 'Limit Kredit harus diisi' }),
+});
diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
index 612b009a..2ab7c21a 100644
--- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
+++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
@@ -4,11 +4,13 @@ import Stepper from './Stepper';
 import InformasiPerusahaan from './informasiPerusahaan';
 import KontakPerusahaan from './KontakPerusahaan';
 import Pengiriman from './Pengiriman';
+import Referensi from './Referensi';
 import { Controller, useForm } from 'react-hook-form';
 import {
   usePengajuanTempoStore,
   usePengajuanTempoStoreKontakPerson,
   usePengajuanTempoStorePengiriman,
+  usePengajuanTempoStoreSupplier,
 } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
 import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
 const PengajuanTempo = () => {
@@ -22,6 +24,8 @@ const PengajuanTempo = () => {
     validateKontakPerson,
     updateFormKontakPerson,
   } = usePengajuanTempoStoreKontakPerson();
+  const { formSupplier, errorsSupplier, validateSupplier, updateFormSupplier } =
+    usePengajuanTempoStoreSupplier();
   const {
     formPengiriman,
     errorsPengiriman,
@@ -40,7 +44,7 @@ const PengajuanTempo = () => {
       buttonSubmitClick={buttonSubmitClick}
     />,
     <Pengiriman chekValid={notValid} buttonSubmitClick={buttonSubmitClick} />,
-    <div>Referensi</div>,
+    <Referensi chekValid={notValid} buttonSubmitClick={buttonSubmitClick} />,
     <div>Dokumen</div>,
     <div>Konfirmasi</div>,
   ];
@@ -48,7 +52,7 @@ const PengajuanTempo = () => {
     errors,
     errorsKontakPerson,
     errorsPengiriman,
-    <div>Referensi</div>,
+    errorsSupplier,
     <div>Dokumen</div>,
     <div>Konfirmasi</div>,
   ];
@@ -56,7 +60,7 @@ const PengajuanTempo = () => {
     form,
     formKontakPerson,
     formPengiriman,
-    <div>Referensi</div>,
+    formSupplier,
     <div>Dokumen</div>,
     <div>Konfirmasi</div>,
   ];
@@ -64,7 +68,7 @@ const PengajuanTempo = () => {
     updateForm,
     updateFormKontakPerson,
     updateFormPengiriman,
-    <div>Referensi</div>,
+    updateFormSupplier,
     <div>Dokumen</div>,
     <div>Konfirmasi</div>,
   ];
@@ -96,9 +100,13 @@ const PengajuanTempo = () => {
     const cachedData = getFromLocalStorage(stepLabels[currentStep]);
     if (cachedData) {
       // const formData = JSON.parse(cachedData);
-      Object.keys(cachedData).forEach((key) => {
-        stepDivsUpdateForm[currentStep](key, cachedData[key]);
-      });
+      if (currentStep == 3) {
+        stepDivsUpdateForm[currentStep](cachedData);
+      } else {
+        Object.keys(cachedData).forEach((key) => {
+          stepDivsUpdateForm[currentStep](key, cachedData[key]);
+        });
+      }
     }
   }, [currentStep]);
   const goToNextStep = () => {
diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
index a281916c..2e1b1bba 100644
--- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx
+++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
@@ -272,23 +272,6 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
     }
   }, [sameAddress]);
 
-  useEffect(() => {
-    if (formPengiriman.statePengiriman) {
-      setValue('statePengiriman', parseInt(formPengiriman.statePengiriman));
-    }
-    if (formPengiriman.stateInvoice) {
-      setValue('stateInvoice', parseInt(formPengiriman.stateInvoice));
-    }
-    if (formPengiriman.cityInvoice) {
-      setValue('cityInvoice', parseInt(formPengiriman.cityInvoice));
-    }
-  }, [formPengiriman]);
-  useEffect(() => {
-    const cachedData = getFromLocalStorage('Pengiriman');
-    if (cachedData) {
-      setValue('cityPengiriman', parseInt(cachedData.cityPengiriman));
-    }
-  }, [formPengiriman]);
   const getFromLocalStorage = (key) => {
     const itemStr = localStorage.getItem(key);
     if (!itemStr) return null;
@@ -296,6 +279,22 @@ const Pengiriman = ({ chekValid, buttonSubmitClick }) => {
     const item = JSON.parse(itemStr);
     return item;
   };
+  const cachedData = getFromLocalStorage('Pengiriman');
+  useEffect(() => {
+    if (cachedData) {
+      setValue('cityPengiriman', parseInt(cachedData.cityPengiriman));
+      updateFormPengiriman('cityPengiriman', `${cachedData.cityPengiriman}`);
+    }
+    if (cachedData.statePengiriman) {
+      setValue('statePengiriman', parseInt(cachedData.statePengiriman));
+    }
+    if (cachedData.stateInvoice) {
+      setValue('stateInvoice', parseInt(cachedData.stateInvoice));
+    }
+    if (cachedData.cityInvoice) {
+      setValue('cityInvoice', parseInt(cachedData.cityInvoice));
+    }
+  }, [cachedData.cityPengiriman]);
   return (
     <>
       <div className='flex justify-start'>
diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index cb0bb5fe..e2a341e6 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -1,365 +1,326 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react';
-import { Controller, set, useForm } from 'react-hook-form';
-import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
-import odooApi from '~/libs/odooApi';
-import stateApi from '@/lib/address/api/stateApi.js';
-import cityApi from '@/lib/address/api/cityApi';
-import { Radio, RadioGroup, Stack, Checkbox } from '@chakra-ui/react';
-import { usePengajuanTempoStoreKontakPerson } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+import { useForm } from 'react-hook-form';
+import { usePengajuanTempoStoreSupplier } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+import * as Yup from 'yup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import { PlusCircleIcon } from '@heroicons/react/24/outline';
+
+const initialData = [];
 const Referensi = ({ chekValid, buttonSubmitClick }) => {
-  const { control, watch } = useForm();
   const {
-    formKontakPerson,
-    errorsKontakPerson,
-    validateKontakPerson,
-    updateFormKontakPerson,
-  } = usePengajuanTempoStoreKontakPerson();
+    register,
+    formState: { errors },
+    handleSubmit,
+    watch,
+    setValue,
+    control,
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+    defaultValues,
+  });
+  const { formSupplier, updateFormSupplier } = usePengajuanTempoStoreSupplier();
+  const [formData, setFormData] = useState([
+    {
+      supplier: '',
+      pic: '',
+      telepon: '',
+      durasiTempo: '',
+      creditLimit: '',
+    },
+  ]);
+
+  const [buttonSubmit, setButtonSubmit] = useState(false);
+  const [supplierData, setSupplierData] = useState(initialData);
+  const [newSupplier, setNewSupplier] = useState({
+    supplier: '',
+    pic: '',
+    telepon: '',
+    durasiTempo: '',
+    creditLimit: '',
+  });
+  const onChangeInput = (e, index) => {
+    const { name, value } = e.target;
+
+    let formattedValue = value;
+
+    if (name === 'durasiTempo') {
+      formattedValue = value.replace(/\s*Hari\s*/g, '');
+    } else if (name === 'creditLimit') {
+      formattedValue = value.replace(/^Rp\s*/, '');
+    }
 
-  const handleInputChange = (event) => {
-    const { name, value } = event.target;
-    updateFormKontakPerson(name, value);
-    validateKontakPerson();
+    const editData = supplierData.map((item, i) =>
+      i === index ? { ...item, [name]: formattedValue } : item
+    );
+
+    setSupplierData(editData);
   };
 
-  const isFormValid = useMemo(
-    () => Object.keys(errorsKontakPerson).length === 0,
-    [errorsKontakPerson]
-  );
+  const handleNewSupplierChange = (e) => {
+    const { name, value } = e.target;
+
+    let formattedValue = value;
+
+    if (name === 'durasiTempo') {
+      formattedValue = value.replace(/\s*Hari\s*/g, '');
+    } else if (name === 'creditLimit') {
+      formattedValue = value.replace(/^Rp\s*/, '');
+    }
 
-  const direkturNameRef = useRef(null);
-  const direkturMobileRef = useRef(null);
-  const direkturEmailRef = useRef(null);
-  const purchasingNameRef = useRef(null);
-  const purchasingEmailRef = useRef(null);
-  const purchasingMobileRef = useRef(null);
-  const financeNameRef = useRef(null);
-  const financeMobileRef = useRef(null);
-  const financeEmailRef = useRef(null);
+    const updatedSupplier = { ...newSupplier, [name]: formattedValue };
+    setNewSupplier(updatedSupplier);
+
+    // if (Object.values(updatedSupplier).every((val) => val.trim() !== '')) {
+    //   setSupplierData((prevData) => {
+    //     const newData = [...prevData, updatedSupplier];
+    //     return newData;
+    //   });
+
+    //   setNewSupplier({
+    //     supplier: '',
+    //     pic: '',
+    //     telepon: '',
+    //     durasiTempo: '',
+    //     creditLimit: '',
+    //   });
+    // }
+  };
+
+  const handleAddNewSupplier = () => {
+    // Pastikan semua field sudah diisi sebelum menambahkan supplier baru
+    if (Object.values(newSupplier).every((val) => val.trim() !== '')) {
+      setSupplierData((prevData) => {
+        const newData = [...prevData, newSupplier];
+        return newData;
+      });
+
+      // Reset newSupplier setelah menambahkan
+      setNewSupplier({
+        supplier: '',
+        pic: '',
+        telepon: '',
+        durasiTempo: '',
+        creditLimit: '',
+      });
+    }
+  };
 
   useEffect(() => {
-    const loadIndustries = async () => {
-      if (!isFormValid) {
-        const options = {
-          behavior: 'smooth',
-          block: 'center',
-        };
-        if (errorsKontakPerson.direkturName && direkturNameRef.current) {
-          direkturNameRef.current.scrollIntoView(options);
-          return;
-        }
-        if (errorsKontakPerson.direkturMobile && direkturMobileRef.current) {
-          direkturMobileRef.current.scrollIntoView(options);
-          return;
-        }
-        if (errorsKontakPerson.direkturEmail && direkturEmailRef.current) {
-          direkturEmailRef.current.scrollIntoView(options);
-          return;
-        }
-        if (errorsKontakPerson.purchasingName && purchasingNameRef.current) {
-          purchasingNameRef.current.scrollIntoView(options);
-          return;
-        }
-        if (
-          errorsKontakPerson.purchasingMobile &&
-          purchasingMobileRef.current
-        ) {
-          purchasingMobileRef.current.scrollIntoView(options);
-          return;
-        }
-        if (errorsKontakPerson.purchasingEmail && purchasingEmailRef.current) {
-          purchasingEmailRef.current.scrollIntoView(options);
-          return;
-        }
-        if (errorsKontakPerson.financeName && financeNameRef.current) {
-          financeNameRef.current.scrollIntoView(options);
-          return;
-        }
-        if (errorsKontakPerson.financeMobile && financeMobileRef.current) {
-          financeMobileRef.current.scrollIntoView(options);
-          return;
-        }
-        if (errorsKontakPerson.financeEmail && financeEmailRef.current) {
-          financeEmailRef.current.scrollIntoView(options);
-          return;
-        }
-      }
-    };
-    loadIndustries();
-  }, [buttonSubmitClick, chekValid]);
+    handleAddNewSupplier();
+    updateFormSupplier(supplierData);
+    setButtonSubmit(!buttonSubmit);
+  }, [buttonSubmitClick]);
+  const simpanData = () => {
+    setButtonSubmit(!buttonSubmit);
+    if (Object.values(newSupplier).every((val) => val.trim() !== '')) {
+      setSupplierData((prevData) => {
+        const newData = [...prevData, newSupplier];
+        return newData;
+      });
 
+      // Reset newSupplier setelah menambahkan
+      setNewSupplier({
+        supplier: '',
+        pic: '',
+        telepon: '',
+        durasiTempo: '',
+        creditLimit: '',
+      });
+    }
+  };
+  const formatRupiah = (value) => {
+    if (!value) return '';
+    const numberString = value.replace(/[^0-9]/g, '');
+    return numberString
+      ? 'Rp ' + new Intl.NumberFormat('id-ID').format(numberString)
+      : '';
+  };
+  const formatHari = (value) => {
+    if (!value) return '';
+
+    const numberString = value.replace(/[^0-9]/g, '');
+
+    return numberString ? numberString.replace(/Hari/g, '') + ' Hari' : '';
+  };
+  // useEffect(() => {
+  // setSupplierData((prevData) => {
+  //   const newData = [...prevData, newSupplier];
+  //   return newData;
+  // });
+  // updateFormSupplier(supplierData);
+  // }, [buttonSubmitClick]);
   useEffect(() => {
-    validateKontakPerson();
+    updateFormSupplier(supplierData);
+  }, [buttonSubmit]);
+  useEffect(() => {
+    if (formSupplier) {
+      setSupplierData(formSupplier);
+    }
   }, [buttonSubmitClick]);
   return (
     <>
       <div className='flex justify-start'>
         <h1 className='font-bold'>
           Referensi Supplier / Rekanan Bisnis Perusahaan{' '}
-          <span className=' opacity-60'>(Opsional)</span>
+          <span className=' opacity-60 text-2xl'>(Opsional)</span>
         </h1>
       </div>
       <form className='flex mt-4 flex-col w-full '>
-        <div className='w-full grid grid-row-2 gap-5'>
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Nama Lengkap Direktur
-              </label>
-            </div>
-            <div className='w-3/5'>
-              <input
-                value={formKontakPerson.direkturName}
-                id='direkturName'
-                name='direkturName'
-                placeholder='Masukkan nama direktur anda'
-                type='text'
-                className='form-input'
-                aria-invalid={errorsKontakPerson.direkturName}
-                ref={direkturNameRef}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.direkturName}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                No. Telpon Direktur
-              </label>
-              <span className='text-xs opacity-60'>
-                isi nomor telpon direktur di perusahaan kamu
-              </span>
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='direkturMobile'
-                name='direkturMobile'
-                ref={direkturMobileRef}
-                placeholder='Masukkan nomor direktur anda'
-                type='tel'
-                value={formKontakPerson.direkturMobile}
-                className='form-input'
-                aria-invalid={errorsKontakPerson.direkturMobile}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.direkturMobile}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Email Direktur
-              </label>
-              <span className='text-xs opacity-60'>
-                isi email Direktur yang sesuai
-              </span>
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='direkturEmail'
-                name='direkturEmail'
-                ref={direkturEmailRef}
-                placeholder='contoh@email.com'
-                type='email'
-                value={formKontakPerson.direkturEmail}
-                className='form-input'
-                aria-invalid={errorsKontakPerson.direkturEmail}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.direkturEmail}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Nama Purchasing
-              </label>
-              <span className='text-xs opacity-60'>
-                isi nama purchasing yang bertanggung jawab di perusahaan anda
-              </span>
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='purchasingName'
-                name='purchasingName'
-                ref={purchasingNameRef}
-                placeholder='Masukkan nama purchasing anda'
-                value={formKontakPerson.purchasingName}
-                type='text'
-                className='form-input'
-                aria-invalid={errorsKontakPerson.purchasingName}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.purchasingName}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                No. Telpon Purchasing
-              </label>
-              <span className='text-xs opacity-60'>
-                isi nomor purchasing yang bertanggung jawab di perusahaan anda
-              </span>
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='purchasingMobile'
-                name='purchasingMobile'
-                ref={financeMobileRef}
-                placeholder='Masukkan nomor purchasing anda'
-                value={formKontakPerson.purchasingMobile}
-                type='tel'
-                className='form-input'
-                aria-invalid={errorsKontakPerson.purchasingMobile}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.purchasingMobile}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Email Purchasing
-              </label>
-              <span className='text-xs opacity-60'>
-                isi email purchasing benar
-              </span>
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='purchasingEmail'
-                name='purchasingEmail'
-                ref={purchasingEmailRef}
-                placeholder='contoh@email.com'
-                value={formKontakPerson.purchasingEmail}
-                type='email'
-                className='form-input'
-                aria-invalid={errorsKontakPerson.purchasingEmail}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.purchasingEmail}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Nama Finance
-              </label>
-              <span className='text-xs opacity-60'>
-                isi nama finance yang bertanggung jawab di perusahaan anda
-              </span>
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='financeName'
-                name='financeName'
-                ref={financeNameRef}
-                placeholder='Masukkan nama finance'
-                value={formKontakPerson.financeName}
-                type='text'
-                className='form-input'
-                aria-invalid={errorsKontakPerson.financeName}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.financeName}
-                </div>
-              )}
-            </div>
-          </div>
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                No. Telpon Finance
-              </label>
-              <span className='text-xs opacity-60'>
-                isi nomor finance yang bertanggung jawab di perusahaan anda
-              </span>
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='financeMobile'
-                name='financeMobile'
-                ref={financeMobileRef}
-                placeholder='Masukkan nomor finance'
-                value={formKontakPerson.financeMobile}
-                type='tel'
-                className='form-input'
-                aria-invalid={errorsKontakPerson.financeMobile}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.financeMobile}
-                </div>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div>
-              <label className='form-label w-2/5 text-nowrap'>
-                Email Finance
-              </label>
-              <span className='text-xs opacity-60'>
-                isi email finance dengan benar
-              </span>
-            </div>
-            <div className='w-3/5'>
-              <input
-                id='financeEmail'
-                name='financeEmail'
-                ref={financeEmailRef}
-                placeholder='contoh@email.com'
-                type='email'
-                value={formKontakPerson.financeEmail}
-                className='form-input'
-                aria-invalid={errorsKontakPerson.financeEmail}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsKontakPerson.financeEmail}
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
+        <table className='border' border='1' cellPadding='10'>
+          <thead>
+            <tr className='border '>
+              <th className='text-left px-5 py-2'>Nama Supplier / Rekanan</th>
+              <th className='text-left px-5 py-2'>PIC</th>
+              <th className='text-left px-5 py-2'>Telepon</th>
+              <th className='text-left px-5 py-2'>Durasi Tempo</th>
+              <th className='text-left px-5 py-2'>Credit Limit</th>
+            </tr>
+          </thead>
+          <tbody>
+            {supplierData.map((supplier, index) => (
+              <tr key={index}>
+                <td>
+                  <input
+                    name='supplier'
+                    value={supplier.supplier}
+                    type='text'
+                    onChange={(e) => onChangeInput(e, index)}
+                    className='form-input border px-4 py-2'
+                    placeholder='Type Supplier'
+                  />
+                </td>
+                <td>
+                  <input
+                    name='pic'
+                    value={supplier.pic}
+                    type='text'
+                    className='form-input border px-4 py-2'
+                    onChange={(e) => onChangeInput(e, index)}
+                    placeholder='Type PIC'
+                  />
+                </td>
+                <td>
+                  <input
+                    name='telepon'
+                    type='text'
+                    className='form-input border px-4 py-2'
+                    value={supplier.telepon}
+                    onChange={(e) => onChangeInput(e, index)}
+                    placeholder='Type Telepon'
+                  />
+                </td>
+                <td>
+                  <input
+                    name='durasiTempo'
+                    type='text'
+                    className='form-input border px-4 py-2'
+                    value={formatHari(supplier.durasiTempo)}
+                    onChange={(e) => onChangeInput(e, index)}
+                    placeholder='Type Durasi Tempo'
+                  />
+                </td>
+                <td>
+                  <input
+                    name='creditLimit'
+                    type='text'
+                    value={formatRupiah(supplier.creditLimit)}
+                    className='form-input border px-4 py-2'
+                    onChange={(e) => onChangeInput(e, index)}
+                    placeholder='Type Credit Limit'
+                  />
+                </td>
+              </tr>
+            ))}
+            <tr>
+              <td>
+                <input
+                  name='supplier'
+                  value={newSupplier.supplier}
+                  type='text'
+                  className='form-input border px-4 py-2'
+                  onChange={handleNewSupplierChange}
+                  placeholder='Isi nama supplier anda'
+                />
+              </td>
+              <td>
+                <input
+                  name='pic'
+                  value={newSupplier.pic}
+                  type='text'
+                  className='form-input border px-4 py-2'
+                  onChange={handleNewSupplierChange}
+                  placeholder='Isi PIC supplier anda'
+                />
+              </td>
+              <td>
+                <input
+                  name='telepon'
+                  value={newSupplier.telepon}
+                  type='text'
+                  onChange={handleNewSupplierChange}
+                  placeholder='Isi telepon supplier anda'
+                  className='form-input border px-4 py-2'
+                />
+              </td>
+              <td>
+                <input
+                  name='durasiTempo'
+                  value={formatHari(newSupplier.durasiTempo)}
+                  type='text'
+                  onChange={handleNewSupplierChange}
+                  className='form-input border px-4 py-2'
+                  placeholder='Durasi jatuh tempo'
+                />
+              </td>
+              <td>
+                <input
+                  name='creditLimit'
+                  value={formatRupiah(newSupplier.creditLimit)}
+                  type='text'
+                  className='form-input border px-4 py-2'
+                  onChange={handleNewSupplierChange}
+                  placeholder='limit kredit'
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
       </form>
+      <div className='flex items-start gap-4 mt-8'>
+        <button
+          onClick={handleAddNewSupplier}
+          className='bg-gray-200 border border-gray-500 rounded-md text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
+        >
+          {<PlusCircleIcon className='w-5 mr-2' />}
+          {''} Tambah data baru
+        </button>
+        <button
+          onClick={simpanData}
+          className='bg-gray-200 border border-gray-500 rounded-md text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
+        >
+          simpan data
+        </button>
+      </div>
+      {/* <button className='mt-8' onClick={cetakData}>
+        CETAK
+      </button> */}
     </>
   );
 };
 
+const validationSchema = Yup.object().shape({
+  supplier: Yup.string().required('Harus di-isi'),
+  pic: Yup.string().required('Harus di-isi'),
+  telepon: Yup.string().required('Harus di-isi'),
+  durasiTempo: Yup.string().required('Harus di-isi'),
+  creditLimit: Yup.string().required('Harus di-isi'),
+});
+
+const defaultValues = {
+  supplier: '',
+  pic: '',
+  telepon: '',
+  durasiTempo: '',
+  creditLimit: '',
+};
 export default Referensi;