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

