From c61477111b95d83a9b862f242923b911364f3612 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 19 Oct 2024 11:49:38 +0700
Subject: <iman> fix section pengiriman

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 365 ++++++++++++++++++++++++
 1 file changed, 365 insertions(+)
 create mode 100644 src/lib/pengajuan-tempo/component/Referensi.jsx

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
new file mode 100644
index 00000000..cb0bb5fe
--- /dev/null
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -0,0 +1,365 @@
+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';
+const Referensi = ({ chekValid, buttonSubmitClick }) => {
+  const { control, watch } = useForm();
+  const {
+    formKontakPerson,
+    errorsKontakPerson,
+    validateKontakPerson,
+    updateFormKontakPerson,
+  } = usePengajuanTempoStoreKontakPerson();
+
+  const handleInputChange = (event) => {
+    const { name, value } = event.target;
+    updateFormKontakPerson(name, value);
+    validateKontakPerson();
+  };
+
+  const isFormValid = useMemo(
+    () => Object.keys(errorsKontakPerson).length === 0,
+    [errorsKontakPerson]
+  );
+
+  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);
+
+  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]);
+
+  useEffect(() => {
+    validateKontakPerson();
+  }, [buttonSubmitClick]);
+  return (
+    <>
+      <div className='flex justify-start'>
+        <h1 className='font-bold'>
+          Referensi Supplier / Rekanan Bisnis Perusahaan{' '}
+          <span className=' opacity-60'>(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>
+      </form>
+    </>
+  );
+};
+
+export default Referensi;
-- 
cgit v1.2.3


From 3a0f3c6ed7ef886d3205d51937b1ecbb035b1a87 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 21 Oct 2024 16:16:34 +0700
Subject: <iman> update and fix section dokumen

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 639 +++++++++++-------------
 1 file changed, 300 insertions(+), 339 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

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;
-- 
cgit v1.2.3


From d6ede238658d90315a5dc5b864f20037e8a776f6 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 22 Oct 2024 11:24:43 +0700
Subject: <iman> update & add section dokumen

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index e2a341e6..dd8b66ad 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -152,9 +152,18 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
   useEffect(() => {
     updateFormSupplier(supplierData);
   }, [buttonSubmit]);
+  const getFromLocalStorage = (key) => {
+    const itemStr = localStorage.getItem(key);
+    if (!itemStr) return null;
+
+    const item = JSON.parse(itemStr);
+    return item;
+  };
   useEffect(() => {
-    if (formSupplier) {
-      setSupplierData(formSupplier);
+    const cachedData = getFromLocalStorage('Referensi');
+    if (cachedData) {
+      setSupplierData(cachedData);
+      updateFormSupplier(cachedData);
     }
   }, [buttonSubmitClick]);
   return (
-- 
cgit v1.2.3


From c19c7eee924b70d25cb47d40fd7c8e00d5efa867 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 23 Oct 2024 17:07:37 +0700
Subject: <iman> update pengajuan tempo section konfirmasi

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index dd8b66ad..b7c112a6 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -168,11 +168,15 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
   }, [buttonSubmitClick]);
   return (
     <>
-      <div className='flex justify-start'>
-        <h1 className='font-bold'>
+      <div className='flex flex-col justify-start'>
+        <h1 className='font-bold text-2xl'>
           Referensi Supplier / Rekanan Bisnis Perusahaan{' '}
-          <span className=' opacity-60 text-2xl'>(Opsional)</span>
+          <span className=' opacity-60 text-xl'>(Opsional)</span>
         </h1>
+        <p className='opacity-60'>
+          Data yang anda berikan hanya untuk bahan referensi internal kami untuk
+          memberikan anda credit limit dan durasi tempo
+        </p>
       </div>
       <form className='flex mt-4 flex-col w-full '>
         <table className='border' border='1' cellPadding='10'>
@@ -295,7 +299,7 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
           </tbody>
         </table>
       </form>
-      <div className='flex items-start gap-4 mt-8'>
+      <div className='flex items-center 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'
@@ -309,6 +313,9 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
         >
           simpan data
         </button>
+        <span className='text-sm opacity-60 text-red-500'>
+          *Klik simpan sebelum lanjut ke tahap selanjutnya
+        </span>
       </div>
       {/* <button className='mt-8' onClick={cetakData}>
         CETAK
-- 
cgit v1.2.3


From b5701645ce23deed5e32afc4a0f98bd523c6c92c Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 31 Oct 2024 13:58:23 +0700
Subject: <iman> update pengajuan tempo

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index b7c112a6..8732c60f 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -18,7 +18,8 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
     resolver: yupResolver(validationSchema),
     defaultValues,
   });
-  const { formSupplier, updateFormSupplier } = usePengajuanTempoStoreSupplier();
+  const { formSupplier, updateFormSupplier, updateHasSave } =
+    usePengajuanTempoStoreSupplier();
   const [formData, setFormData] = useState([
     {
       supplier: '',
@@ -54,6 +55,7 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
     );
 
     setSupplierData(editData);
+    updateHasSave(false);
   };
 
   const handleNewSupplierChange = (e) => {
@@ -84,6 +86,7 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
     //     creditLimit: '',
     //   });
     // }
+    updateHasSave(false);
   };
 
   const handleAddNewSupplier = () => {
@@ -103,6 +106,7 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
         creditLimit: '',
       });
     }
+    updateHasSave(false);
   };
 
   useEffect(() => {
@@ -127,6 +131,7 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
         creditLimit: '',
       });
     }
+    updateHasSave(true);
   };
   const formatRupiah = (value) => {
     if (!value) return '';
-- 
cgit v1.2.3


From 3550c262e5eeb1b861ae100cd26ae853c7f153fe Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 4 Nov 2024 14:25:02 +0700
Subject: <iman> update pengajuan tempo mobile 80%

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 557 ++++++++++++++++--------
 1 file changed, 379 insertions(+), 178 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index 8732c60f..1b83358b 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -4,9 +4,14 @@ import { usePengajuanTempoStoreSupplier } from '../../../../src-migrate/modules/
 import * as Yup from 'yup';
 import { yupResolver } from '@hookform/resolvers/yup';
 import { PlusCircleIcon } from '@heroicons/react/24/outline';
-
+import useDevice from '@/core/hooks/useDevice';
+import { Trash2Icon } from 'lucide-react';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 const initialData = [];
 const Referensi = ({ chekValid, buttonSubmitClick }) => {
+  const { isDesktop, isMobile } = useDevice();
+  const [openIndexes, setOpenIndexes] = useState([]);
+
   const {
     register,
     formState: { errors },
@@ -71,33 +76,16 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
 
     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: '',
-    //   });
-    // }
     updateHasSave(false);
   };
 
   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: '',
@@ -122,7 +110,6 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
         return newData;
       });
 
-      // Reset newSupplier setelah menambahkan
       setNewSupplier({
         supplier: '',
         pic: '',
@@ -147,13 +134,7 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
 
     return numberString ? numberString.replace(/Hari/g, '') + ' Hari' : '';
   };
-  // useEffect(() => {
-  // setSupplierData((prevData) => {
-  //   const newData = [...prevData, newSupplier];
-  //   return newData;
-  // });
-  // updateFormSupplier(supplierData);
-  // }, [buttonSubmitClick]);
+
   useEffect(() => {
     updateFormSupplier(supplierData);
   }, [buttonSubmit]);
@@ -171,160 +152,380 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
       updateFormSupplier(cachedData);
     }
   }, [buttonSubmitClick]);
+
+  useEffect(() => {
+    setOpenIndexes(supplierData.map((_, index) => index));
+  }, [supplierData]);
+
+  const toggleOpen = (index) => {
+    setOpenIndexes((prev) =>
+      prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
+    );
+  };
   return (
     <>
-      <div className='flex flex-col justify-start'>
-        <h1 className='font-bold text-2xl'>
-          Referensi Supplier / Rekanan Bisnis Perusahaan{' '}
-          <span className=' opacity-60 text-xl'>(Opsional)</span>
-        </h1>
-        <p className='opacity-60'>
-          Data yang anda berikan hanya untuk bahan referensi internal kami untuk
-          memberikan anda credit limit dan durasi tempo
-        </p>
-      </div>
-      <form className='flex mt-4 flex-col w-full '>
-        <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-center 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>
-        <span className='text-sm opacity-60 text-red-500'>
-          *Klik simpan sebelum lanjut ke tahap selanjutnya
-        </span>
-      </div>
-      {/* <button className='mt-8' onClick={cetakData}>
-        CETAK
-      </button> */}
+      {isDesktop && (
+        <div>
+          <div className='flex flex-col justify-start'>
+            <h1 className='font-bold text-2xl'>
+              Referensi Supplier / Rekanan Bisnis Perusahaan{' '}
+              <span className=' opacity-60 text-xl'>(Opsional)</span>
+            </h1>
+            <p className='opacity-60'>
+              Data yang anda berikan hanya untuk bahan referensi internal kami
+              untuk memberikan anda credit limit dan durasi tempo
+            </p>
+          </div>
+          <form className='flex mt-4 flex-col w-full '>
+            <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-center 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>
+            <span className='text-sm opacity-60 text-red-500'>
+              *Klik simpan sebelum lanjut ke tahap selanjutnya
+            </span>
+          </div>
+        </div>
+      )}
+      {isMobile && (
+        <div className='text-sm'>
+          <div className='flex flex-col py-4 mt-8 justify-start'>
+            <h1 className='font-bold text-xl'>
+              Referensi Supplier / Rekanan Bisnis Perusahaan{' '}
+              <span className=' opacity-60 text-xl'>(Opsional)</span>
+            </h1>
+            <p className='opacity-60'>
+              Data yang anda berikan hanya untuk bahan referensi internal kami
+              untuk memberikan anda credit limit dan durasi tempo
+            </p>
+          </div>
+          <div className='flex gap-4 flex-col'>
+            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+            <h2 className='py-2 font-semibold text-base'>
+              Daftar Nama Supplier
+            </h2>
+            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+            <div className=''>
+              {supplierData.map((supplier, index) => (
+                <div key={index}>
+                  <div
+                    className='flex flex-row justify-center items-center py-4'
+                    onClick={() => toggleOpen(index)}
+                  >
+                    <p className='font-semibold text-base w-4/5'>
+                      {supplier.supplier}
+                    </p>
+                    <div className='w-1/5 flex justify-end items-center gap-2'>
+                      <Trash2Icon size={16} color='red' />
+                      {openIndexes.includes(index) ? (
+                        <ChevronUpIcon className='w-4' />
+                      ) : (
+                        <ChevronDownIcon className='w-4' />
+                      )}
+                    </div>
+                  </div>
+                  {openIndexes.includes(index) && (
+                    <form className='flex flex-col w-full'>
+                      <div className='w-full grid grid-row-2 gap-4'>
+                        <div className='flex flex-row justify-start items-start'>
+                          <div className='w-2/5'>
+                            <label className='form-label text-nowrap'>
+                              Nama Supplier
+                            </label>
+                          </div>
+                          <div className='w-3/5 opacity-70'>
+                            {supplier.supplier}
+                          </div>
+                        </div>
+
+                        <div className='flex flex-row justify-start items-start'>
+                          <div className='w-2/5'>
+                            <label className='form-label text-nowrap'>
+                              PIC
+                            </label>
+                          </div>
+                          <div className='w-3/5 opacity-70'>{supplier.pic}</div>
+                        </div>
+
+                        <div className='flex flex-row justify-start items-start'>
+                          <div className='w-2/5'>
+                            <label className='form-label text-nowrap'>
+                              Telepon
+                            </label>
+                          </div>
+                          <div className='w-3/5 opacity-70'>
+                            {supplier.telepon}
+                          </div>
+                        </div>
+
+                        <div className='flex flex-row justify-start items-start'>
+                          <div className='w-2/5'>
+                            <label className='form-label text-nowrap'>
+                              Durasi Tempo
+                            </label>
+                          </div>
+                          <div className='w-3/5 opacity-70'>
+                            {formatHari(supplier.durasiTempo)}
+                          </div>
+                        </div>
+
+                        <div className='flex flex-row justify-start items-start'>
+                          <div className='w-2/5'>
+                            <label className='form-label text-nowrap'>
+                              Kredit Limit
+                            </label>
+                          </div>
+                          <div className='w-3/5 opacity-70'>
+                            {formatRupiah(supplier.creditLimit)}
+                          </div>
+                        </div>
+                      </div>
+                    </form>
+                  )}
+                </div>
+              ))}
+            </div>
+            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+            <h2 className='py-2 font-semibold text-base text-red-500 flex flex-row'>
+              <PlusCircleIcon className='w-5 mr-2' />
+              Tambah Data Baru
+            </h2>
+            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+            <form className='flex flex-col w-full'>
+              <div className='w-full grid grid-row-2 gap-2'>
+                <div className='flex flex-row justify-start items-start'>
+                  <div className='w-2/5'>
+                    <label className='form-label text-nowrap'>
+                      Nama Supplier
+                    </label>
+                  </div>
+                  <div className='w-3/5 opacity-70'>
+                    <input
+                      name='supplier'
+                      value={newSupplier.supplier}
+                      type='text'
+                      className='form-input border px-4 py-2'
+                      onChange={handleNewSupplierChange}
+                      placeholder='Format: PT. ABC TESTING INDONESIA'
+                    />
+                  </div>
+                </div>
+
+                <div className='flex flex-row justify-start items-start'>
+                  <div className='w-2/5'>
+                    <label className='form-label text-nowrap'>PIC</label>
+                  </div>
+                  <div className='w-3/5 opacity-70'>
+                    <input
+                      name='pic'
+                      value={newSupplier.pic}
+                      type='text'
+                      className='form-input border px-4 py-2'
+                      onChange={handleNewSupplierChange}
+                      placeholder='John Doe'
+                    />
+                  </div>
+                </div>
+
+                <div className='flex flex-row justify-start items-start'>
+                  <div className='w-2/5'>
+                    <label className='form-label text-nowrap'>Telepon</label>
+                  </div>
+                  <div className='w-3/5 opacity-70'>
+                    <input
+                      name='telepon'
+                      value={newSupplier.telepon}
+                      type='text'
+                      onChange={handleNewSupplierChange}
+                      placeholder='Format: 08123456789'
+                      className='form-input border px-4 py-2'
+                    />
+                  </div>
+                </div>
+
+                <div className='flex flex-row justify-start items-start'>
+                  <div className='w-2/5'>
+                    <label className='form-label text-nowrap'>
+                      Durasi Tempo
+                    </label>
+                  </div>
+                  <div className='w-3/5 opacity-70'>
+                    <input
+                      name='durasiTempo'
+                      value={formatHari(newSupplier.durasiTempo)}
+                      type='text'
+                      onChange={handleNewSupplierChange}
+                      className='form-input border px-4 py-2'
+                      placeholder='Isi durasi tempo supplier anda (hari)'
+                    />
+                  </div>
+                </div>
+
+                <div className='flex flex-row justify-start items-start'>
+                  <div className='w-2/5'>
+                    <label className='form-label text-nowrap'>
+                      Kredit Limit
+                    </label>
+                  </div>
+                  <div className='w-3/5 opacity-70'>
+                    <input
+                      name='creditLimit'
+                      value={formatRupiah(newSupplier.creditLimit)}
+                      type='text'
+                      className='form-input border px-4 py-2'
+                      onChange={handleNewSupplierChange}
+                      placeholder='Rp 999.999.999'
+                    />
+                  </div>
+                </div>
+              </div>
+            </form>
+          </div>
+          <div className='flex flex-col justify-start items-start gap-4 mt-8'>
+            <span className='text-xs opacity-60 text-red-500'>
+              *Klik simpan sebelum lanjut ke tahap selanjutnya
+            </span>
+            <button
+              onClick={simpanData}
+              className='bg-gray-200 border border-gray-500 rounded-md w-full text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
+            >
+              simpan data
+            </button>
+          </div>
+        </div>
+      )}
     </>
   );
 };
-- 
cgit v1.2.3


From f751fa6d398a8aab96380c832da927c60c6ccbe4 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 4 Nov 2024 16:10:09 +0700
Subject: <iman> update pengajuan tempo mobile view fix

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index 1b83358b..8cb3b0c3 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -165,7 +165,7 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
   return (
     <>
       {isDesktop && (
-        <div>
+        <div className='py-4'>
           <div className='flex flex-col justify-start'>
             <h1 className='font-bold text-2xl'>
               Referensi Supplier / Rekanan Bisnis Perusahaan{' '}
-- 
cgit v1.2.3


From 6bbf1dbd94355f34f58f4b72f134f3dbeac776aa Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 23 Nov 2024 11:55:59 +0700
Subject: <iman> update tempo

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index 8cb3b0c3..5ec64611 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -309,7 +309,7 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
             </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'
+              className='bg-red-500 border border-red-500 opacity-70 rounded-md text-sm text-white p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
             >
               simpan data
             </button>
-- 
cgit v1.2.3


From 654fbb128ab331c3272d6e8733dda1b5b71f4253 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 25 Nov 2024 10:05:02 +0700
Subject: <iman> update pengajuan tempo

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index 5ec64611..17ac6cb0 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -79,6 +79,13 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
     updateHasSave(false);
   };
 
+  const handleDeleteSupplier = (index) => {
+    const updatedData = supplierData.filter((_, i) => i !== index);
+    setSupplierData(updatedData);
+    updateFormSupplier(updatedData); // Update store atau state terkait
+    updateHasSave(false); // Indikasi bahwa data telah berubah
+  };
+
   const handleAddNewSupplier = () => {
     if (Object.values(newSupplier).every((val) => val.trim() !== '')) {
       setSupplierData((prevData) => {
@@ -232,7 +239,7 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
                         placeholder='Type Durasi Tempo'
                       />
                     </td>
-                    <td>
+                    <td className='flex flex-row gap-2'>
                       <input
                         name='creditLimit'
                         type='text'
@@ -241,6 +248,10 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
                         onChange={(e) => onChangeInput(e, index)}
                         placeholder='Type Credit Limit'
                       />
+                      <Trash2Icon
+                        size={18}
+                        onClick={() => handleDeleteSupplier(index)}
+                      />
                     </td>
                   </tr>
                 ))}
@@ -285,7 +296,7 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
                       placeholder='Durasi jatuh tempo'
                     />
                   </td>
-                  <td>
+                  <td className='flex flex-row items-center gap-2 '>
                     <input
                       name='creditLimit'
                       value={formatRupiah(newSupplier.creditLimit)}
@@ -294,6 +305,10 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
                       onChange={handleNewSupplierChange}
                       placeholder='limit kredit'
                     />
+                    <Trash2Icon
+                      size={18}
+                      onClick={() => handleDeleteSupplier(index)}
+                    />
                   </td>
                 </tr>
               </tbody>
-- 
cgit v1.2.3


From 494909f40b918e4273d6258a74f12ac42253a4a7 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 25 Nov 2024 17:04:51 +0700
Subject: <iman> pengajuan tempo

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index 17ac6cb0..b8c2f7eb 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -1,6 +1,9 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react';
 import { useForm } from 'react-hook-form';
-import { usePengajuanTempoStoreSupplier } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+import {
+  usePengajuanTempoStoreSupplier,
+  usePengajuanTempoStore,
+} 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';
@@ -8,7 +11,7 @@ import useDevice from '@/core/hooks/useDevice';
 import { Trash2Icon } from 'lucide-react';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
 const initialData = [];
-const Referensi = ({ chekValid, buttonSubmitClick }) => {
+const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
   const { isDesktop, isMobile } = useDevice();
   const [openIndexes, setOpenIndexes] = useState([]);
 
@@ -25,6 +28,7 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
   });
   const { formSupplier, updateFormSupplier, updateHasSave } =
     usePengajuanTempoStoreSupplier();
+  const { form } = usePengajuanTempoStore();
   const [formData, setFormData] = useState([
     {
       supplier: '',
@@ -153,10 +157,13 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
     return item;
   };
   useEffect(() => {
-    const cachedData = getFromLocalStorage('Referensi');
-    if (cachedData) {
-      setSupplierData(cachedData);
-      updateFormSupplier(cachedData);
+    console.log('supplierData', supplierData);
+    console.log('form supplier', formSupplier);
+    console.log('data', data);
+    // const cachedData = getFromLocalStorage('Referensi');
+    if (data) {
+      setSupplierData(data);
+      updateFormSupplier(data);
     }
   }, [buttonSubmitClick]);
 
@@ -169,6 +176,7 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
       prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index]
     );
   };
+
   return (
     <>
       {isDesktop && (
-- 
cgit v1.2.3


From c7b437cd0541cde9e2a829ec3c5689dc237505a8 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 26 Nov 2024 09:00:01 +0700
Subject: <iman> pengajuan tempo

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index b8c2f7eb..24f44728 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -84,6 +84,8 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
   };
 
   const handleDeleteSupplier = (index) => {
+    console.log('index', index);
+
     const updatedData = supplierData.filter((_, i) => i !== index);
     setSupplierData(updatedData);
     updateFormSupplier(updatedData); // Update store atau state terkait
@@ -313,10 +315,10 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
                       onChange={handleNewSupplierChange}
                       placeholder='limit kredit'
                     />
-                    <Trash2Icon
+                    {/* <Trash2Icon
                       size={18}
                       onClick={() => handleDeleteSupplier(index)}
-                    />
+                    /> */}
                   </td>
                 </tr>
               </tbody>
-- 
cgit v1.2.3


From 9a49b8d84761781531cb417731cb9ef802f63541 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 4 Dec 2024 10:59:21 +0700
Subject: <iman> update pengajuan tempo

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index 24f44728..e285c2b9 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -84,7 +84,6 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
   };
 
   const handleDeleteSupplier = (index) => {
-    console.log('index', index);
 
     const updatedData = supplierData.filter((_, i) => i !== index);
     setSupplierData(updatedData);
@@ -159,9 +158,6 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
     return item;
   };
   useEffect(() => {
-    console.log('supplierData', supplierData);
-    console.log('form supplier', formSupplier);
-    console.log('data', data);
     // const cachedData = getFromLocalStorage('Referensi');
     if (data) {
       setSupplierData(data);
-- 
cgit v1.2.3


From e9cd13307f0095dc4edc5048752675d80c551564 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 6 Dec 2024 17:06:26 +0700
Subject: <iman> pengajuan tempo

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index e285c2b9..6d9d0bd6 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -49,6 +49,7 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
     creditLimit: '',
   });
   const onChangeInput = (e, index) => {
+    updateHasSave(false);
     const { name, value } = e.target;
 
     let formattedValue = value;
@@ -64,10 +65,13 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
     );
 
     setSupplierData(editData);
-    updateHasSave(false);
+    if (value == '') {
+      updateHasSave(true);
+    }
   };
 
   const handleNewSupplierChange = (e) => {
+    updateHasSave(false);
     const { name, value } = e.target;
 
     let formattedValue = value;
@@ -80,18 +84,21 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
 
     const updatedSupplier = { ...newSupplier, [name]: formattedValue };
     setNewSupplier(updatedSupplier);
-    updateHasSave(false);
+    if (value == '') {
+      updateHasSave(true);
+    }
   };
 
   const handleDeleteSupplier = (index) => {
+    // updateHasSave(false); // Indikasi bahwa data telah berubah
 
     const updatedData = supplierData.filter((_, i) => i !== index);
     setSupplierData(updatedData);
     updateFormSupplier(updatedData); // Update store atau state terkait
-    updateHasSave(false); // Indikasi bahwa data telah berubah
   };
 
   const handleAddNewSupplier = () => {
+    // updateHasSave(false);
     if (Object.values(newSupplier).every((val) => val.trim() !== '')) {
       setSupplierData((prevData) => {
         const newData = [...prevData, newSupplier];
@@ -106,7 +113,6 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
         creditLimit: '',
       });
     }
-    updateHasSave(false);
   };
 
   useEffect(() => {
-- 
cgit v1.2.3


From 0f84963214ee6dc5b5a44d945540826a66bec9e0 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 11 Dec 2024 11:51:45 +0700
Subject: <iman> update pengajuan tempo

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 81 ++++++++++++++++++++-----
 1 file changed, 66 insertions(+), 15 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index 6d9d0bd6..1b7b0f4c 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -10,8 +10,12 @@ import { PlusCircleIcon } from '@heroicons/react/24/outline';
 import useDevice from '@/core/hooks/useDevice';
 import { Trash2Icon } from 'lucide-react';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
 const initialData = [];
 const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
+  const [changeConfirmation, setChangeConfirmation] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(null);
+
   const { isDesktop, isMobile } = useDevice();
   const [openIndexes, setOpenIndexes] = useState([]);
 
@@ -26,7 +30,7 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
     resolver: yupResolver(validationSchema),
     defaultValues,
   });
-  const { formSupplier, updateFormSupplier, updateHasSave } =
+  const { formSupplier, updateFormSupplier, updateHasSave, hasSavedata } =
     usePengajuanTempoStoreSupplier();
   const { form } = usePengajuanTempoStore();
   const [formData, setFormData] = useState([
@@ -63,9 +67,8 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
     const editData = supplierData.map((item, i) =>
       i === index ? { ...item, [name]: formattedValue } : item
     );
-
     setSupplierData(editData);
-    if (value == '') {
+    if (value == '' && supplierData.supplier) {
       updateHasSave(true);
     }
   };
@@ -89,12 +92,26 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
     }
   };
 
-  const handleDeleteSupplier = (index) => {
-    // updateHasSave(false); // Indikasi bahwa data telah berubah
-
-    const updatedData = supplierData.filter((_, i) => i !== index);
-    setSupplierData(updatedData);
-    updateFormSupplier(updatedData); // Update store atau state terkait
+  useEffect(() => {
+    const isAllFieldsEmpty = Object.values(newSupplier).every(
+      (value) => value === ''
+    );
+    if (isAllFieldsEmpty) {
+      updateHasSave(true);
+    } else {
+      updateHasSave(false);
+    }
+  }, [newSupplier]);
+
+  const handleDeleteSupplier = () => {
+    if (selectedIndex !== null) {
+      // Logika untuk menghapus supplier
+      const updatedSuppliers = supplierData.filter(
+        (_, idx) => idx !== selectedIndex
+      );
+      setSupplierData(updatedSuppliers);
+      setChangeConfirmation(false);
+    }
   };
 
   const handleAddNewSupplier = () => {
@@ -181,8 +198,37 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
     );
   };
 
+  const handleOpenConfirmation = (index) => {
+    setSelectedIndex(index);
+    setChangeConfirmation(true);
+  };
   return (
     <>
+      <BottomPopup
+        active={changeConfirmation}
+        close={() => setChangeConfirmation(false)}
+        title='Ubah profil Bisnis'
+      >
+        <div className='leading-7 text-gray_r-12/80'>
+          Apakah anda yakin menghapus data?
+        </div>
+        <div className='flex mt-6 gap-x-4 md:justify-end'>
+          <button
+            className='btn-solid-red flex-1 md:flex-none'
+            type='button'
+            onClick={handleDeleteSupplier}
+          >
+            Ya, Hapus
+          </button>
+          <button
+            className='btn-light flex-1 md:flex-none'
+            type='button'
+            onClick={() => setChangeConfirmation(false)}
+          >
+            Batal
+          </button>
+        </div>
+      </BottomPopup>
       {isDesktop && (
         <div className='py-4'>
           <div className='flex flex-col justify-start'>
@@ -262,7 +308,8 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
                       />
                       <Trash2Icon
                         size={18}
-                        onClick={() => handleDeleteSupplier(index)}
+                        onClick={() => handleOpenConfirmation(index)}
+                        className='cursor-pointer'
                       />
                     </td>
                   </tr>
@@ -332,13 +379,15 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
               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
+              {''} Tambah Data Baru
             </button>
             <button
               onClick={simpanData}
-              className='bg-red-500 border border-red-500 opacity-70 rounded-md text-sm text-white p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
+              className={`bg-red-500 border border-red-500 rounded-md text-sm text-white p-2 h-11 mb-1 content-center flex flex-row justify-center items-center ${
+                hasSavedata ? 'hidden' : ''
+              }`}
             >
-              simpan data
+              Simpan Data
             </button>
             <span className='text-sm opacity-60 text-red-500'>
               *Klik simpan sebelum lanjut ke tahap selanjutnya
@@ -546,9 +595,11 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
             </span>
             <button
               onClick={simpanData}
-              className='bg-gray-200 border border-gray-500 rounded-md w-full text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center'
+              className={`bg-gray-200 border border-gray-500 rounded-md w-full text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center ${
+                hasSavedata ? 'hidden' : ''
+              }`}
             >
-              simpan data
+              Simpan Data
             </button>
           </div>
         </div>
-- 
cgit v1.2.3


From 915dc67e1ce31eab1f2415cc8df95cebb75a137d Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 13 Dec 2024 14:18:03 +0700
Subject: <iman>update pengajuan tempo request

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 64 ++++++++++++++-----------
 1 file changed, 37 insertions(+), 27 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index 1b7b0f4c..9e154166 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -111,6 +111,7 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
       );
       setSupplierData(updatedSuppliers);
       setChangeConfirmation(false);
+      updateHasSave(false);
     }
   };
 
@@ -207,7 +208,7 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
       <BottomPopup
         active={changeConfirmation}
         close={() => setChangeConfirmation(false)}
-        title='Ubah profil Bisnis'
+        title='Konfirmasi Hapus Data'
       >
         <div className='leading-7 text-gray_r-12/80'>
           Apakah anda yakin menghapus data?
@@ -297,7 +298,7 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
                         placeholder='Type Durasi Tempo'
                       />
                     </td>
-                    <td className='flex flex-row gap-2'>
+                    <td className='flex flex-row gap-2 justify-center items-center'>
                       <input
                         name='creditLimit'
                         type='text'
@@ -374,24 +375,26 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
             </table>
           </form>
           <div className='flex items-center gap-4 mt-8'>
-            <button
+            {/* <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-red-500 border border-red-500 rounded-md text-sm text-white p-2 h-11 mb-1 content-center flex flex-row justify-center items-center ${
-                hasSavedata ? 'hidden' : ''
-              }`}
-            >
-              Simpan Data
-            </button>
-            <span className='text-sm opacity-60 text-red-500'>
-              *Klik simpan sebelum lanjut ke tahap selanjutnya
-            </span>
+            </button> */}
+            {!hasSavedata && (
+              <>
+                <button
+                  onClick={simpanData}
+                  className={`bg-red-500 border border-red-500 rounded-md text-sm text-white p-2 h-11 mb-1 content-center flex flex-row justify-center items-center `}
+                >
+                  Simpan Data
+                </button>
+                <span className='text-sm opacity-60 text-red-500'>
+                  *Klik simpan sebelum lanjut ke tahap selanjutnya
+                </span>
+              </>
+            )}
           </div>
         </div>
       )}
@@ -424,7 +427,12 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
                       {supplier.supplier}
                     </p>
                     <div className='w-1/5 flex justify-end items-center gap-2'>
-                      <Trash2Icon size={16} color='red' />
+                      <Trash2Icon
+                        size={16}
+                        color='red'
+                        onClick={() => handleOpenConfirmation(index)}
+                        className='cursor-pointer'
+                      />
                       {openIndexes.includes(index) ? (
                         <ChevronUpIcon className='w-4' />
                       ) : (
@@ -590,17 +598,19 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
             </form>
           </div>
           <div className='flex flex-col justify-start items-start gap-4 mt-8'>
-            <span className='text-xs opacity-60 text-red-500'>
-              *Klik simpan sebelum lanjut ke tahap selanjutnya
-            </span>
-            <button
-              onClick={simpanData}
-              className={`bg-gray-200 border border-gray-500 rounded-md w-full text-sm text-gray-500 p-2 h-11 mb-1 content-center flex flex-row justify-center items-center ${
-                hasSavedata ? 'hidden' : ''
-              }`}
-            >
-              Simpan Data
-            </button>
+            {!hasSavedata && (
+              <>
+                <span className='text-xs opacity-60 text-red-500'>
+                  *Klik simpan sebelum lanjut ke tahap selanjutnya
+                </span>
+                <button
+                  onClick={simpanData}
+                  className={`bg-red-500 border border-red-500 rounded-md w-full text-sm text-white p-2 h-11 mb-1 content-center flex flex-row justify-center items-center`}
+                >
+                  Simpan Data
+                </button>
+              </>
+            )}
           </div>
         </div>
       )}
-- 
cgit v1.2.3


From 0178a1f88d7d34824562e1413be073c0795a47cf Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 16 Dec 2024 17:42:31 +0700
Subject: <iman> update code

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index 9e154166..38693d18 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -501,11 +501,11 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
                 </div>
               ))}
             </div>
-            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
-            <h2 className='py-2 font-semibold text-base text-red-500 flex flex-row'>
+            {/* <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div> */}
+            {/* <h2 className='py-2 font-semibold text-base text-red-500 flex flex-row'>
               <PlusCircleIcon className='w-5 mr-2' />
               Tambah Data Baru
-            </h2>
+            </h2> */}
             <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
             <form className='flex flex-col w-full'>
               <div className='w-full grid grid-row-2 gap-2'>
-- 
cgit v1.2.3


From dd8a56ad12d054e121965c41bcb077158690b208 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 17 Dec 2024 17:07:44 +0700
Subject: <iman> update code

---
 src/lib/pengajuan-tempo/component/Referensi.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/pengajuan-tempo/component/Referensi.jsx')

diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index 38693d18..8db321d1 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -415,7 +415,7 @@ const Referensi = ({ chekValid, buttonSubmitClick, data }) => {
             <h2 className='py-2 font-semibold text-base'>
               Daftar Nama Supplier
             </h2>
-            <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+            {/* <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div> */}
             <div className=''>
               {supplierData.map((supplier, index) => (
                 <div key={index}>
-- 
cgit v1.2.3

