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%

---
 .../pengajuan-tempo/component/KontakPerusahaan.jsx |  735 ++++++----
 .../pengajuan-tempo/component/PengajuanTempo.jsx   |   17 +-
 src/lib/pengajuan-tempo/component/Pengiriman.jsx   | 1486 ++++++++++++++------
 src/lib/pengajuan-tempo/component/Referensi.jsx    |  557 +++++---
 .../component/informasiPerusahaan.jsx              |  176 ++-
 5 files changed, 2012 insertions(+), 959 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
index 1281e387..091873a7 100644
--- a/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/KontakPerusahaan.jsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { usePengajuanTempoStoreKontakPerson } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+import useDevice from '@/core/hooks/useDevice';
 const KontakPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const {
     formKontakPerson,
@@ -7,7 +8,7 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     validateKontakPerson,
     updateFormKontakPerson,
   } = usePengajuanTempoStoreKontakPerson();
-
+  const { isDesktop, isMobile } = useDevice();
   const handleInputChange = (event) => {
     const { name, value } = event.target;
     updateFormKontakPerson(name, value);
@@ -84,279 +85,501 @@ const KontakPerusahaan = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     validateKontakPerson();
   }, [buttonSubmitClick]);
   return (
-    <div className=''>
-      <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
-        Kontak Person
-      </h1>
-      <form className='flex flex-col w-full '>
-        <div className='w-full grid grid-row-2 gap-5'>
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label  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}
+    <>
+      {isDesktop && (
+        <div className=''>
+          <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
+            Kontak Person
+          </h1>
+          <form className='flex flex-col w-full '>
+            <div className='w-full grid grid-row-2 gap-5'>
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    Nama Lengkap Direktur
+                  </label>
                 </div>
-              )}
-            </div>
-          </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 className='w-2/5'>
-              <label className='form-label text-nowrap'>
-                No. Telpon Direktur
-              </label>
-              {!isKonfirmasi && (
-                <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 className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label text-nowrap'>
+                    No. Telpon Direktur
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi nomor telpon direktur di perusahaan kamu
+                    </span>
+                  )}
                 </div>
-              )}
-            </div>
-          </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 className='w-2/5'>
-              <label className='form-label  text-nowrap'>Email Direktur</label>
-              {!isKonfirmasi && (
-                <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 className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    Email Direktur
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi email Direktur yang sesuai
+                    </span>
+                  )}
                 </div>
-              )}
-            </div>
-          </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 className='w-2/5'>
-              <label className='form-label text-nowrap'>Nama Purchasing</label>
-              {!isKonfirmasi && (
-                <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 className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label text-nowrap'>
+                    Nama Purchasing
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi nama purchasing yang bertanggung jawab di perusahaan
+                      anda
+                    </span>
+                  )}
                 </div>
-              )}
-            </div>
-          </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 className='w-2/5'>
-              <label className='form-label  text-nowrap'>
-                No. Telpon Purchasing
-              </label>
-              {!isKonfirmasi && (
-                <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 className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    No. Telpon Purchasing
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi nomor purchasing yang bertanggung jawab di perusahaan
+                      anda
+                    </span>
+                  )}
                 </div>
-              )}
-            </div>
-          </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 className='w-2/5'>
-              <label className='form-label  text-nowrap'>
-                Email Purchasing
-              </label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  isi email purchasing dengan 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 className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    Email Purchasing
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi email purchasing dengan benar
+                    </span>
+                  )}
                 </div>
-              )}
-            </div>
-          </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 className='w-2/5'>
-              <label className='form-label  text-nowrap'>Nama Finance</label>
-              {!isKonfirmasi && (
-                <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 className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    Nama Finance
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      isi nama finance yang bertanggung jawab di perusahaan anda
+                    </span>
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label   text-nowrap'>
-                No. Telpon Finance
-              </label>
-              {!isKonfirmasi && (
-                <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 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>
+              </div>
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label   text-nowrap'>
+                    No. Telpon Finance
+                  </label>
+                  {!isKonfirmasi && (
+                    <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 className='w-2/5'>
-              <label className='form-label text-nowrap'>Email Finance</label>
-              {!isKonfirmasi && (
-                <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 className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label text-nowrap'>
+                    Email Finance
+                  </label>
+                  {!isKonfirmasi && (
+                    <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>
+        </div>
+      )}
+      {isMobile && (
+        <div className='text-sm'>
+          <h1
+            className={`font-bold py-4 mt-8 ${
+              isKonfirmasi ? 'text-xl' : 'text-xl'
+            }`}
+          >
+            Kontak Person
+          </h1>
+          <form className='flex flex-col w-full '>
+            <div className='w-full grid grid-row-2 gap-4'>
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>
+                  Nama Lengkap Direktur
+                </label>
+                <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 className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label text-nowrap'>
+                  No. Telpon Direktur
+                </label>
+                <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 className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>
+                  Email Direktur
+                </label>
+                <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 className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label text-nowrap'>
+                  Nama Purchasing
+                </label>
+                <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 className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>
+                  No. Telpon Purchasing
+                </label>
+                <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 className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>
+                  Email Purchasing
+                </label>
+                <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 className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>Nama Finance</label>
+                <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 className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label   text-nowrap'>
+                  No. Telpon Finance
+                </label>
+                <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 className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label text-nowrap'>Email Finance</label>
+                <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>
         </div>
-      </form>
-    </div>
+      )}
+    </>
   );
 };
 
diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
index 04797c5f..7ed208db 100644
--- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
+++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
@@ -22,7 +22,9 @@ import createPengajuanTempoApi from '../api/createPengajuanTempoApi';
 import { Button, Checkbox, Spinner, Tooltip } from '@chakra-ui/react';
 import clsxm from '~/libs/clsxm';
 import { toast } from 'react-hot-toast';
+import useDevice from '@/core/hooks/useDevice';
 const PengajuanTempo = () => {
+  const { isDesktop, isMobile } = useDevice();
   const [currentStep, setCurrentStep] = React.useState(0);
   const NUMBER_OF_STEPS = 6;
   const [isLoading, setIsLoading] = useState(false);
@@ -298,8 +300,17 @@ const PengajuanTempo = () => {
           <Stepper currentStep={currentStep} numberOfSteps={NUMBER_OF_STEPS} />
         </div>
         <div>{stepDivs[currentStep]}</div>
-        <section className='flex gap-10 mt-10'></section>
-        <div className='flex flex-row justify-end items-center gap-4 mb-8'>
+        {isDesktop && <section className='flex gap-10 mt-10'></section>}
+        {isMobile && (
+          <div className='h-[2px] bg-gray-300 w-[120%] inset-0 mt-4 mb-4 relative transform -translate-x-5'></div>
+        )}
+        <div
+          className={`flex ${
+            isMobile
+              ? 'flex-col justify-start items-start'
+              : 'flex-row justify-end items-center'
+          }   gap-4 mb-8`}
+        >
           <span className='text-xs opacity-60'>
             *Pastikan data yang anda masukan sudah benar dan sesuai
           </span>
@@ -312,7 +323,7 @@ const PengajuanTempo = () => {
             >
               <Button
                 colorScheme='red'
-                w='fit'
+                w={`${isMobile ? 'full' : 'fit'}`}
                 isDisabled={
                   (currentStep === 3 && !hasSavedata) ||
                   currentStep === NUMBER_OF_STEPS - 1
diff --git a/src/lib/pengajuan-tempo/component/Pengiriman.jsx b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
index 956febcc..3ff14e18 100644
--- a/src/lib/pengajuan-tempo/component/Pengiriman.jsx
+++ b/src/lib/pengajuan-tempo/component/Pengiriman.jsx
@@ -6,8 +6,10 @@ 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 { usePengajuanTempoStorePengiriman } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+import useDevice from '@/core/hooks/useDevice';
 const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   const { control, watch, setValue } = useForm();
+  const { isDesktop, isMobile } = useDevice();
   const {
     formPengiriman,
     errorsPengiriman,
@@ -292,8 +294,16 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
       updateFormPengiriman('streetInvoice', formPengiriman.streetPengiriman);
       updateFormPengiriman('stateInvoice', formPengiriman.statePengiriman);
       updateFormPengiriman('cityInvoice', formPengiriman.cityPengiriman);
+    } else {
+      updateFormPengiriman('streetInvoice', '');
+      updateFormPengiriman('stateInvoice', '');
+      updateFormPengiriman('cityInvoice', '');
+      setValue('streetInvoice', '');
+      setValue('stateInvoice', '');
+      setValue('cityInvoice', '');
     }
     updateFormPengiriman('isSameAddrees', `${sameAddress}`);
+    validatePengiriman();
   }, [sameAddress]);
 
   const getFromLocalStorage = (key) => {
@@ -322,6 +332,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
     if (cachedData?.isSameAddrees) {
       updateFormPengiriman('isSameAddrees', `${cachedData?.isSameAddrees}`);
     }
+    validatePengiriman();
   }, [cachedData?.cityPengiriman]);
   useEffect(() => {
     if (cachedData?.everyWeek) {
@@ -357,6 +368,7 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
       );
       setTukarInvoicePembayaran(cachedData?.tukarInvoicePembayaran);
     }
+    validatePengiriman();
   }, [
     cachedData?.everyWeek,
     cachedData?.everyWeekday,
@@ -370,197 +382,73 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
   };
   return (
     <>
-      <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
-        Pengiriman
-      </h1>
-      <form className='flex flex-col w-full '>
-        <div className='w-full grid grid-row-2 gap-5'>
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label  text-nowrap'>
-                Nama PIC Penerimaan Barang
-              </label>
-            </div>
-            <div className='w-3/5'>
-              <input
-                value={formPengiriman.PICName}
-                id='PICName'
-                name='PICName'
-                placeholder='Masukkan nama pic pengiriman disini'
-                type='text'
-                className='form-input'
-                aria-invalid={errorsPengiriman.PICName}
-                ref={PICNameRef}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsPengiriman.PICName}
+      {isDesktop && (
+        <div>
+          <h1 className={`font-bold ${isKonfirmasi ? 'text-xl' : ''}`}>
+            Pengiriman
+          </h1>
+          <form className='flex flex-col w-full '>
+            <div className='w-full grid grid-row-2 gap-5'>
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    Nama PIC Penerimaan Barang
+                  </label>
                 </div>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label   text-nowrap'>
-                Alamat Pengiriman Barang
-              </label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  pastikan alamat yang anda isi sesuai dengan alamat kirim
-                  barang
-                </span>
-              )}
-            </div>
-            <div className='w-3/5 flex gap-3 flex-col'>
-              <div>
-                <input
-                  id='streetPengiriman'
-                  name='streetPengiriman'
-                  ref={streetPengirimanRef}
-                  placeholder='Masukkan alamat lengkap pengiriman barang'
-                  type='text'
-                  value={formPengiriman.streetPengiriman}
-                  className='form-input'
-                  onChange={handleInputChange}
-                />
-                {chekValid && (
-                  <div className='text-caption-2 text-danger-500 mt-1'>
-                    {errorsPengiriman.streetPengiriman}
-                  </div>
-                )}
-              </div>
-              <div className='sub-alamat flex flex-row w-full gap-3'>
-                <div className='w-2/5' ref={statePengirimanRef}>
-                  <Controller
-                    name='statePengiriman'
-                    control={control}
-                    render={(props) => (
-                      <HookFormSelect
-                        {...props}
-                        options={states}
-                        placeholder='Provinsi'
-                      />
-                    )}
-                  />
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errorsPengiriman.statePengiriman}
-                    </div>
-                  )}
-                </div>
-                <div className='w-1/3' ref={cityPengirimanRef}>
-                  <Controller
-                    name='cityPengiriman'
-                    control={control}
-                    render={(props) => (
-                      <HookFormSelect
-                        {...props}
-                        options={cities}
-                        disabled={!watchState}
-                        placeholder='Kota'
-                      />
-                    )}
-                  />
-                  {chekValid && (
-                    <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errorsPengiriman.cityPengiriman}
-                    </div>
-                  )}
-                </div>
-                <div className='w-1/3'>
+                <div className='w-3/5'>
                   <input
-                    id='zipPengiriman'
-                    name='zipPengiriman'
-                    ref={zipRef}
-                    placeholder='Kode Pos'
-                    type='number'
-                    value={formPengiriman.zipPengiriman}
+                    value={formPengiriman.PICName}
+                    id='PICName'
+                    name='PICName'
+                    placeholder='Masukkan nama pic pengiriman disini'
+                    type='text'
                     className='form-input'
+                    aria-invalid={errorsPengiriman.PICName}
+                    ref={PICNameRef}
                     onChange={handleInputChange}
                   />
                   {chekValid && (
                     <div className='text-caption-2 text-danger-500 mt-1'>
-                      {errorsPengiriman.zipPengiriman}
+                      {errorsPengiriman.PICName}
                     </div>
                   )}
                 </div>
               </div>
-            </div>
-          </div>
 
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label  text-nowrap'>
-                Nama PIC Penerimaan Invoice
-              </label>
-            </div>
-            <div className='w-3/5'>
-              <input
-                value={formPengiriman.invoicePic}
-                id='invoicePic'
-                name='invoicePic'
-                placeholder='Masukkan nama pic invoice disini'
-                type='text'
-                className='form-input'
-                aria-invalid={errorsPengiriman.invoicePic}
-                ref={invoicePicRef}
-                onChange={handleInputChange}
-              />
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsPengiriman.invoicePic}
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label   text-nowrap'>
+                    Alamat Pengiriman Barang
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      pastikan alamat yang anda isi sesuai dengan alamat kirim
+                      barang
+                    </span>
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label text-nowrap'>
-                Alamat Pengiriman Invoice
-              </label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  Pastikan alamat yang anda isi sesuai dengan alamat kirim
-                  invoice
-                </span>
-              )}
-            </div>
-            <div className='w-3/5 flex gap-3 flex-col'>
-              <div>
-                <Checkbox
-                  colorScheme='red'
-                  isChecked={sameAddress}
-                  onChange={handleChangeSameAddress}
-                >
-                  Alamat invoice sama dengan alamat pengiriman
-                </Checkbox>
-              </div>
-              {!sameAddress && (
-                <>
+                <div className='w-3/5 flex gap-3 flex-col'>
                   <div>
                     <input
-                      id='streetInvoice'
-                      name='streetInvoice'
-                      ref={streetInvoiceRef}
-                      placeholder='Masukkan alamat lengkap pengiriman invoice'
+                      id='streetPengiriman'
+                      name='streetPengiriman'
+                      ref={streetPengirimanRef}
+                      placeholder='Masukkan alamat lengkap pengiriman barang'
                       type='text'
-                      value={formPengiriman.streetInvoice}
+                      value={formPengiriman.streetPengiriman}
                       className='form-input'
                       onChange={handleInputChange}
                     />
                     {chekValid && (
                       <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errorsPengiriman.streetInvoice}
+                        {errorsPengiriman.streetPengiriman}
                       </div>
                     )}
                   </div>
                   <div className='sub-alamat flex flex-row w-full gap-3'>
-                    <div className='w-3/5' ref={stateInvoiceRef}>
+                    <div className='w-2/5' ref={statePengirimanRef}>
                       <Controller
-                        name='stateInvoice'
+                        name='statePengiriman'
                         control={control}
                         render={(props) => (
                           <HookFormSelect
@@ -572,13 +460,13 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       />
                       {chekValid && (
                         <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errorsPengiriman.stateInvoice}
+                          {errorsPengiriman.statePengiriman}
                         </div>
                       )}
                     </div>
-                    <div className='w-2/5' ref={cityInvoiceRef}>
+                    <div className='w-1/3' ref={cityPengirimanRef}>
                       <Controller
-                        name='cityInvoice'
+                        name='cityPengiriman'
                         control={control}
                         render={(props) => (
                           <HookFormSelect
@@ -591,327 +479,1009 @@ const Pengiriman = ({ chekValid, buttonSubmitClick, isKonfirmasi }) => {
                       />
                       {chekValid && (
                         <div className='text-caption-2 text-danger-500 mt-1'>
-                          {errorsPengiriman.cityInvoice}
+                          {errorsPengiriman.cityPengiriman}
+                        </div>
+                      )}
+                    </div>
+                    <div className='w-1/3'>
+                      <input
+                        id='zipPengiriman'
+                        name='zipPengiriman'
+                        ref={zipRef}
+                        placeholder='Kode Pos'
+                        type='number'
+                        value={formPengiriman.zipPengiriman}
+                        className='form-input'
+                        onChange={handleInputChange}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errorsPengiriman.zipPengiriman}
                         </div>
                       )}
                     </div>
                   </div>
-                </>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label   text-wrap'>
-                Jadwal Penukaran Invoice{' '}
-                <span className=' opacity-60'>(Opsional)</span>
-              </label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  Pilih jika bisnis anda memiliki jadwal penukaran invoice
-                </span>
-              )}
-            </div>
-            <div className='w-3/5 flex gap-3 flex-col'>
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  isChecked={everyWeekday}
-                  onChange={handleEveryWeekday}
-                >
-                  Setiap Minggu dihari
-                </Checkbox>
-                <input
-                  id='everyWeekdayInput'
-                  name='everyWeekdayInput'
-                  ref={everyWeekdayInputRef}
-                  placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
-                  type='text'
-                  value={formPengiriman.everyWeekdayInput}
-                  className='form-input'
-                  onChange={handleInputChange}
-                />
+                </div>
+              </div>
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-nowrap'>
+                    Nama PIC Penerimaan Invoice
+                  </label>
+                </div>
+                <div className='w-3/5'>
+                  <input
+                    value={formPengiriman.invoicePic}
+                    id='invoicePic'
+                    name='invoicePic'
+                    placeholder='Masukkan nama pic invoice disini'
+                    type='text'
+                    className='form-input'
+                    aria-invalid={errorsPengiriman.invoicePic}
+                    ref={invoicePicRef}
+                    onChange={handleInputChange}
+                  />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.invoicePic}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label text-nowrap'>
+                    Alamat Pengiriman Invoice
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      Pastikan alamat yang anda isi sesuai dengan alamat kirim
+                      invoice
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5 flex gap-3 flex-col'>
+                  <div>
+                    <Checkbox
+                      colorScheme='red'
+                      isChecked={sameAddress}
+                      onChange={handleChangeSameAddress}
+                    >
+                      Alamat invoice sama dengan alamat pengiriman
+                    </Checkbox>
+                  </div>
+                  {!sameAddress && (
+                    <>
+                      <div>
+                        <input
+                          id='streetInvoice'
+                          name='streetInvoice'
+                          ref={streetInvoiceRef}
+                          placeholder='Masukkan alamat lengkap pengiriman invoice'
+                          type='text'
+                          value={formPengiriman.streetInvoice}
+                          className='form-input'
+                          onChange={handleInputChange}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errorsPengiriman.streetInvoice}
+                          </div>
+                        )}
+                      </div>
+                      <div className='sub-alamat flex flex-row w-full gap-3'>
+                        <div className='w-3/5' ref={stateInvoiceRef}>
+                          <Controller
+                            name='stateInvoice'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={states}
+                                placeholder='Provinsi'
+                              />
+                            )}
+                          />
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errorsPengiriman.stateInvoice}
+                            </div>
+                          )}
+                        </div>
+                        <div className='w-2/5' ref={cityInvoiceRef}>
+                          <Controller
+                            name='cityInvoice'
+                            control={control}
+                            render={(props) => (
+                              <HookFormSelect
+                                {...props}
+                                options={cities}
+                                disabled={!watchState}
+                                placeholder='Kota'
+                              />
+                            )}
+                          />
+                          {chekValid && (
+                            <div className='text-caption-2 text-danger-500 mt-1'>
+                              {errorsPengiriman.cityInvoice}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </>
+                  )}
+                </div>
+              </div>
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label   text-wrap'>
+                    Jadwal Penukaran Invoice{' '}
+                    <span className=' opacity-60'>(Opsional)</span>
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      Pilih jika bisnis anda memiliki jadwal penukaran invoice
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5 flex gap-3 flex-col'>
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      isChecked={everyWeekday}
+                      onChange={handleEveryWeekday}
+                    >
+                      Setiap Minggu dihari
+                    </Checkbox>
+                    <input
+                      id='everyWeekdayInput'
+                      name='everyWeekdayInput'
+                      ref={everyWeekdayInputRef}
+                      placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+                      type='text'
+                      value={formPengiriman.everyWeekdayInput}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      isChecked={everyWeek}
+                      onChange={handleEveryWeek}
+                    >
+                      Setiap Bulan di minggu ke
+                    </Checkbox>
+                    <input
+                      id='everyWeekInput'
+                      name='everyWeekInput'
+                      ref={everyWeekInputRef}
+                      placeholder='Format: Minggu 1 & Minggu 2'
+                      type='text'
+                      value={formPengiriman.everyWeekInput}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      isChecked={tukarInvoice}
+                      onChange={handleTukarInvoice}
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='tukarInvoiceInput'
+                      name='tukarInvoiceInput'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      value={formPengiriman.tukarInvoiceInput}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label text-nowrap'>
+                    Jadwal Pembayaran{' '}
+                    <span className=' opacity-60'>(Opsional)</span>
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      Pilih jika bisnis anda memiliki jadwal pembayaran
+                    </span>
+                  )}
+                </div>
+                <div className='w-3/5 flex gap-3 flex-col'>
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      isChecked={everyWeekdayPembayaran}
+                      onChange={handleEveryWeekdayPembayaran}
+                    >
+                      Setiap Minggu dihari
+                    </Checkbox>
+                    <input
+                      id='everyWeekdayInputPembayaran'
+                      name='everyWeekdayInputPembayaran'
+                      placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+                      type='text'
+                      value={formPengiriman.everyWeekdayInputPembayaran}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      isChecked={everyWeekPembayaran}
+                      onChange={handleEveryWeekPembayaran}
+                    >
+                      Setiap Bulan di minggu ke
+                    </Checkbox>
+                    <input
+                      id='everyWeekInputPembayaran'
+                      name='everyWeekInputPembayaran'
+                      placeholder='Format: Minggu 1 & Minggu 2'
+                      type='text'
+                      value={formPengiriman.everyWeekInputPembayaran}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      isChecked={tukarInvoicePembayaran}
+                      onChange={handleTukarInvoicePembayaran}
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='tukarInvoiceInputPembayaran'
+                      name='tukarInvoiceInputPembayaran'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      value={formPengiriman.tukarInvoiceInputPembayaran}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                </div>
               </div>
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  isChecked={everyWeek}
-                  onChange={handleEveryWeek}
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label   text-wrap'>
+                    Dokumen saat Pengiriman Barang
+                  </label>
+                  {!isKonfirmasi && (
+                    <span className='text-xs opacity-60'>
+                      Pilih dokumen lampiran saat pengiriman barang
+                    </span>
+                  )}
+                </div>
+                <div
+                  className='w-3/5 flex gap-3 flex-col'
+                  ref={dokumenPengirimanRef}
                 >
-                  Setiap Bulan di minggu ke
-                </Checkbox>
-                <input
-                  id='everyWeekInput'
-                  name='everyWeekInput'
-                  ref={everyWeekInputRef}
-                  placeholder='Format: Minggu 1 & Minggu 2'
-                  type='text'
-                  value={formPengiriman.everyWeekInput}
-                  className='form-input'
-                  onChange={handleInputChange}
-                />
+                  <Checkbox
+                    colorScheme='red'
+                    key='0'
+                    isChecked={isChecked(0)}
+                    onChange={() => handleCheckboxChange(0)}
+                  >
+                    Surat Tanda Terima Barang (STTB)
+                  </Checkbox>
+                  <Checkbox
+                    colorScheme='red'
+                    key='1'
+                    isChecked={isChecked(1)}
+                    onChange={() => handleCheckboxChange(1)}
+                  >
+                    Good Receipt (GR)
+                  </Checkbox>
+                  <Checkbox
+                    colorScheme='red'
+                    key='2'
+                    isChecked={isChecked(2)}
+                    onChange={() => handleCheckboxChange(2)}
+                  >
+                    Surat Terima Barang (STB)
+                  </Checkbox>
+                  <Checkbox
+                    colorScheme='red'
+                    key='3'
+                    isChecked={isChecked(3)}
+                    onChange={() => handleCheckboxChange(3)}
+                  >
+                    Lembar Penerimaan Barang (LPB)
+                  </Checkbox>
+
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      key='4'
+                      isChecked={isChecked(4)}
+                      onChange={() => handleCheckboxChange(4)}
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='dokumenPengirimanInput'
+                      name='dokumenPengirimanInput'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      ref={dokumenPengirimanInputRef}
+                      value={formPengiriman.dokumenPengirimanInput}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.dokumenPengiriman}
+                    </div>
+                  )}
+                </div>
               </div>
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  isChecked={tukarInvoice}
-                  onChange={handleTukarInvoice}
+
+              <div className='flex flex-row  justify-between items-start'>
+                <div className='w-2/5'>
+                  <label className='form-label  text-wrap'>
+                    Dokumen yang dilampirkan saat Pengiriman Invoice
+                  </label>
+                  <span className='text-xs opacity-60'>
+                    Dokumen akan dikirimkan sesuai dengan yang anda pilih
+                  </span>
+                </div>
+                <div
+                  className='w-3/5 flex gap-3 flex-col'
+                  ref={dokumenPengirimanInvoiceRef}
                 >
-                  Lainnya
-                </Checkbox>
-                <textarea
-                  id='tukarInvoiceInput'
-                  name='tukarInvoiceInput'
-                  placeholder='isi manual dokumen yang anda mau'
-                  type='textarea'
-                  value={formPengiriman.tukarInvoiceInput}
-                  className='form-input'
-                  rows={4}
-                  cols={40}
-                  onChange={handleInputChange}
-                />
+                  <Checkbox
+                    colorScheme='red'
+                    key='0'
+                    isChecked={isCheckedInvoice(0)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(0)
+                    }
+                  >
+                    Invoice Pembelian
+                  </Checkbox>
+                  <Checkbox
+                    colorScheme='red'
+                    key='1'
+                    isChecked={isCheckedInvoice(1)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(1)
+                    }
+                  >
+                    Surat Jalan
+                  </Checkbox>
+                  <Checkbox
+                    colorScheme='red'
+                    key='2'
+                    isChecked={isCheckedInvoice(2)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(2)
+                    }
+                  >
+                    Berita Acara Serah Terima (BAST)
+                  </Checkbox>
+                  <Checkbox
+                    colorScheme='red'
+                    key='3'
+                    isChecked={isCheckedInvoice(3)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(3)
+                    }
+                  >
+                    Faktur Pajak
+                  </Checkbox>
+                  <Checkbox
+                    colorScheme='red'
+                    key='4'
+                    isChecked={isCheckedInvoice(4)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(4)
+                    }
+                  >
+                    Good Receipt (GR)
+                  </Checkbox>
+
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      colorScheme='red'
+                      key='5'
+                      isChecked={isCheckedInvoice(5)}
+                      onChange={() =>
+                        handleCheckboxChangeDokumenPengirimanInvoice(5)
+                      }
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='dokumenPengirimanInvoiceInput'
+                      name='dokumenPengirimanInvoiceInput'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      ref={dokumenPengirimanInvoiceInputRef}
+                      value={formPengiriman.dokumenPengirimanInvoiceInput}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.dokumenInvoicePengiriman}
+                    </div>
+                  )}
+                </div>
               </div>
             </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label text-nowrap'>
-                Jadwal Pembayaran{' '}
-                <span className=' opacity-60'>(Opsional)</span>
-              </label>
-              {!isKonfirmasi && (
-                <span className='text-xs opacity-60'>
-                  Pilih jika bisnis anda memiliki jadwal pembayaran
-                </span>
-              )}
-            </div>
-            <div className='w-3/5 flex gap-3 flex-col'>
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  isChecked={everyWeekdayPembayaran}
-                  onChange={handleEveryWeekdayPembayaran}
-                >
-                  Setiap Minggu dihari
-                </Checkbox>
+          </form>
+        </div>
+      )}
+      {isMobile && (
+        <div className='text-sm'>
+          <h1
+            className={`font-bold py-4 mt-8 ${
+              isKonfirmasi ? 'text-xl' : 'text-xl'
+            }`}
+          >
+            Pengiriman
+          </h1>
+          <form className='flex flex-col w-full '>
+            <div className='w-full grid grid-row-2 gap-2'>
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>
+                  Nama PIC Penerimaan Barang
+                </label>
                 <input
-                  id='everyWeekdayInputPembayaran'
-                  name='everyWeekdayInputPembayaran'
-                  placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+                  value={formPengiriman.PICName}
+                  id='PICName'
+                  name='PICName'
+                  placeholder='Masukkan nama pic pengiriman disini'
                   type='text'
-                  value={formPengiriman.everyWeekdayInputPembayaran}
                   className='form-input'
+                  aria-invalid={errorsPengiriman.PICName}
+                  ref={PICNameRef}
                   onChange={handleInputChange}
                 />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsPengiriman.PICName}
+                  </div>
+                )}
               </div>
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  isChecked={everyWeekPembayaran}
-                  onChange={handleEveryWeekPembayaran}
-                >
-                  Setiap Bulan di minggu ke
-                </Checkbox>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label   text-nowrap'>
+                  Alamat Pengiriman Barang
+                </label>
+                <div className='w-full'>
+                  <input
+                    id='streetPengiriman'
+                    name='streetPengiriman'
+                    ref={streetPengirimanRef}
+                    placeholder='Masukkan alamat lengkap pengiriman barang'
+                    type='text'
+                    value={formPengiriman.streetPengiriman}
+                    className='form-input'
+                    onChange={handleInputChange}
+                  />
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.streetPengiriman}
+                    </div>
+                  )}
+                </div>
+                <div className='sub-alamat flex flex-row w-full gap-2'>
+                  <div className='w-2/5' ref={statePengirimanRef}>
+                    <Controller
+                      name='statePengiriman'
+                      control={control}
+                      render={(props) => (
+                        <HookFormSelect
+                          {...props}
+                          options={states}
+                          placeholder='Provinsi'
+                        />
+                      )}
+                    />
+                  </div>
+                  <div className='w-1/3' ref={cityPengirimanRef}>
+                    <Controller
+                      name='cityPengiriman'
+                      control={control}
+                      render={(props) => (
+                        <HookFormSelect
+                          {...props}
+                          options={cities}
+                          disabled={!watchState}
+                          placeholder='Kota'
+                        />
+                      )}
+                    />
+                  </div>
+                  <div className='w-1/3'>
+                    <input
+                      id='zipPengiriman'
+                      name='zipPengiriman'
+                      ref={zipRef}
+                      placeholder='Kode Pos'
+                      type='number'
+                      value={formPengiriman.zipPengiriman}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.statePengiriman}
+                    </div>
+                  )}
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.cityPengiriman}
+                    </div>
+                  )}
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.zipPengiriman}
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-nowrap'>
+                  Nama PIC Penerimaan Invoice
+                </label>
                 <input
-                  id='everyWeekInputPembayaran'
-                  name='everyWeekInputPembayaran'
-                  placeholder='Format: Minggu 1 & Minggu 2'
+                  value={formPengiriman.invoicePic}
+                  id='invoicePic'
+                  name='invoicePic'
+                  placeholder='Masukkan nama pic invoice disini'
                   type='text'
-                  value={formPengiriman.everyWeekInputPembayaran}
                   className='form-input'
+                  aria-invalid={errorsPengiriman.invoicePic}
+                  ref={invoicePicRef}
                   onChange={handleInputChange}
                 />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsPengiriman.invoicePic}
+                  </div>
+                )}
               </div>
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  isChecked={tukarInvoicePembayaran}
-                  onChange={handleTukarInvoicePembayaran}
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label text-nowrap'>
+                  Alamat Pengiriman Invoice
+                </label>
+                <div>
+                  <Checkbox
+                    colorScheme='red'
+                    isChecked={sameAddress}
+                    onChange={handleChangeSameAddress}
+                    size='sm'
+                  >
+                    Alamat invoice sama dengan alamat pengiriman
+                  </Checkbox>
+                </div>
+                {!sameAddress && (
+                  <>
+                    <div className='w-full'>
+                      <input
+                        id='streetInvoice'
+                        name='streetInvoice'
+                        ref={streetInvoiceRef}
+                        placeholder='Masukkan alamat lengkap pengiriman invoice'
+                        type='text'
+                        value={formPengiriman.streetInvoice}
+                        className='form-input'
+                        onChange={handleInputChange}
+                      />
+                      {chekValid && (
+                        <div className='text-caption-2 text-danger-500 mt-1'>
+                          {errorsPengiriman.streetInvoice}
+                        </div>
+                      )}
+                    </div>
+                    <div className='sub-alamat flex flex-row w-full gap-3'>
+                      <div className='w-3/5' ref={stateInvoiceRef}>
+                        <Controller
+                          name='stateInvoice'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={states}
+                              placeholder='Provinsi'
+                            />
+                          )}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errorsPengiriman.stateInvoice}
+                          </div>
+                        )}
+                      </div>
+                      <div className='w-2/5' ref={cityInvoiceRef}>
+                        <Controller
+                          name='cityInvoice'
+                          control={control}
+                          render={(props) => (
+                            <HookFormSelect
+                              {...props}
+                              options={cities}
+                              disabled={!watchState}
+                              placeholder='Kota'
+                            />
+                          )}
+                        />
+                        {chekValid && (
+                          <div className='text-caption-2 text-danger-500 mt-1'>
+                            {errorsPengiriman.cityInvoice}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label   text-wrap'>
+                  Jadwal Penukaran Invoice
+                  <span className=' opacity-60'>(Opsional)</span>
+                </label>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>
+                    Pilih jika bisnis anda memiliki jadwal penukaran invoice
+                  </span>
+                )}
+                <div className='w-full flex gap-2 flex-col'>
+                  <div className='flex gap-2 flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      isChecked={everyWeekday}
+                      onChange={handleEveryWeekday}
+                    >
+                      Setiap Minggu dihari
+                    </Checkbox>
+                    <input
+                      id='everyWeekdayInput'
+                      name='everyWeekdayInput'
+                      ref={everyWeekdayInputRef}
+                      placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+                      type='text'
+                      value={formPengiriman.everyWeekdayInput}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-2 w-full flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      isChecked={everyWeek}
+                      onChange={handleEveryWeek}
+                    >
+                      Setiap Bulan di minggu ke
+                    </Checkbox>
+                    <input
+                      id='everyWeekInput'
+                      name='everyWeekInput'
+                      ref={everyWeekInputRef}
+                      placeholder='Format: Minggu 1 & Minggu 2'
+                      type='text'
+                      value={formPengiriman.everyWeekInput}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-2 flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      isChecked={tukarInvoice}
+                      onChange={handleTukarInvoice}
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='tukarInvoiceInput'
+                      name='tukarInvoiceInput'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      value={formPengiriman.tukarInvoiceInput}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                </div>
+                <div className='w-2/5'></div>
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label text-nowrap'>
+                  Jadwal Pembayaran
+                  <span className=' opacity-60'>(Opsional)</span>
+                </label>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>
+                    Pilih jika bisnis anda memiliki jadwal pembayaran
+                  </span>
+                )}
+                <div className='w-full flex gap-2 flex-col'>
+                  <div className='flex gap-2 flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      isChecked={everyWeekdayPembayaran}
+                      onChange={handleEveryWeekdayPembayaran}
+                    >
+                      Setiap Minggu dihari
+                    </Checkbox>
+                    <input
+                      id='everyWeekdayInputPembayaran'
+                      name='everyWeekdayInputPembayaran'
+                      placeholder='Format: Senin, Selasa, Rabu, Kamis, Jumat, Sabtu, Minggu'
+                      type='text'
+                      value={formPengiriman.everyWeekdayInputPembayaran}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-2 flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      isChecked={everyWeekPembayaran}
+                      onChange={handleEveryWeekPembayaran}
+                    >
+                      Setiap Bulan di minggu ke
+                    </Checkbox>
+                    <input
+                      id='everyWeekInputPembayaran'
+                      name='everyWeekInputPembayaran'
+                      placeholder='Format: Minggu 1 & Minggu 2'
+                      type='text'
+                      value={formPengiriman.everyWeekInputPembayaran}
+                      className='form-input'
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  <div className='flex gap-2 flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      isChecked={tukarInvoicePembayaran}
+                      onChange={handleTukarInvoicePembayaran}
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='tukarInvoiceInputPembayaran'
+                      name='tukarInvoiceInputPembayaran'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      value={formPengiriman.tukarInvoiceInputPembayaran}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label   text-wrap'>
+                  Dokumen saat Pengiriman Barang
+                </label>
+                {!isKonfirmasi && (
+                  <span className='text-xs opacity-60'>
+                    Pilih dokumen lampiran saat pengiriman barang
+                  </span>
+                )}
+                <div
+                  className='w-full flex gap-2 flex-col'
+                  ref={dokumenPengirimanRef}
                 >
-                  Lainnya
-                </Checkbox>
-                <textarea
-                  id='tukarInvoiceInputPembayaran'
-                  name='tukarInvoiceInputPembayaran'
-                  placeholder='isi manual dokumen yang anda mau'
-                  type='textarea'
-                  value={formPengiriman.tukarInvoiceInputPembayaran}
-                  className='form-input'
-                  rows={4}
-                  cols={40}
-                  onChange={handleInputChange}
-                />
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='0'
+                    isChecked={isChecked(0)}
+                    onChange={() => handleCheckboxChange(0)}
+                  >
+                    Surat Tanda Terima Barang (STTB)
+                  </Checkbox>
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='1'
+                    isChecked={isChecked(1)}
+                    onChange={() => handleCheckboxChange(1)}
+                  >
+                    Good Receipt (GR)
+                  </Checkbox>
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='2'
+                    isChecked={isChecked(2)}
+                    onChange={() => handleCheckboxChange(2)}
+                  >
+                    Surat Terima Barang (STB)
+                  </Checkbox>
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='3'
+                    isChecked={isChecked(3)}
+                    onChange={() => handleCheckboxChange(3)}
+                  >
+                    Lembar Penerimaan Barang (LPB)
+                  </Checkbox>
+
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      key='4'
+                      isChecked={isChecked(4)}
+                      onChange={() => handleCheckboxChange(4)}
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='dokumenPengirimanInput'
+                      name='dokumenPengirimanInput'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      ref={dokumenPengirimanInputRef}
+                      value={formPengiriman.dokumenPengirimanInput}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.dokumenPengiriman}
+                    </div>
+                  )}
+                </div>
               </div>
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label   text-wrap'>
-                Dokumen saat Pengiriman Barang
-              </label>
-              {!isKonfirmasi && (
+
+              <div className='flex flex-col gap-2  justify-between items-start'>
+                <label className='form-label  text-wrap'>
+                  Dokumen yang dilampirkan saat Pengiriman Invoice
+                </label>
                 <span className='text-xs opacity-60'>
-                  Pilih dokumen lampiran saat pengiriman barang
+                  Pilih dokumen lampiran saat pengiriman invoice
                 </span>
-              )}
-            </div>
-            <div
-              className='w-3/5 flex gap-3 flex-col'
-              ref={dokumenPengirimanRef}
-            >
-              <Checkbox
-                colorScheme='red'
-                key='0'
-                isChecked={isChecked(0)}
-                onChange={() => handleCheckboxChange(0)}
-              >
-                Surat Tanda Terima Barang (STTB)
-              </Checkbox>
-              <Checkbox
-                colorScheme='red'
-                key='1'
-                isChecked={isChecked(1)}
-                onChange={() => handleCheckboxChange(1)}
-              >
-                Good Receipt (GR)
-              </Checkbox>
-              <Checkbox
-                colorScheme='red'
-                key='2'
-                isChecked={isChecked(2)}
-                onChange={() => handleCheckboxChange(2)}
-              >
-                Surat Terima Barang (STB)
-              </Checkbox>
-              <Checkbox
-                colorScheme='red'
-                key='3'
-                isChecked={isChecked(3)}
-                onChange={() => handleCheckboxChange(3)}
-              >
-                Lembar Penerimaan Barang (LPB)
-              </Checkbox>
-
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  key='4'
-                  isChecked={isChecked(4)}
-                  onChange={() => handleCheckboxChange(4)}
+                <div
+                  className='w-full flex gap-2 flex-col'
+                  ref={dokumenPengirimanInvoiceRef}
                 >
-                  Lainnya
-                </Checkbox>
-                <textarea
-                  id='dokumenPengirimanInput'
-                  name='dokumenPengirimanInput'
-                  placeholder='isi manual dokumen yang anda mau'
-                  type='textarea'
-                  ref={dokumenPengirimanInputRef}
-                  value={formPengiriman.dokumenPengirimanInput}
-                  className='form-input'
-                  rows={4}
-                  cols={40}
-                  onChange={handleInputChange}
-                />
-              </div>
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsPengiriman.dokumenPengiriman}
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='0'
+                    isChecked={isCheckedInvoice(0)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(0)
+                    }
+                  >
+                    Invoice Pembelian
+                  </Checkbox>
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='1'
+                    isChecked={isCheckedInvoice(1)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(1)
+                    }
+                  >
+                    Surat Jalan
+                  </Checkbox>
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='2'
+                    isChecked={isCheckedInvoice(2)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(2)
+                    }
+                  >
+                    Berita Acara Serah Terima (BAST)
+                  </Checkbox>
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='3'
+                    isChecked={isCheckedInvoice(3)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(3)
+                    }
+                  >
+                    Faktur Pajak
+                  </Checkbox>
+                  <Checkbox
+                    size='sm'
+                    colorScheme='red'
+                    key='4'
+                    isChecked={isCheckedInvoice(4)}
+                    onChange={() =>
+                      handleCheckboxChangeDokumenPengirimanInvoice(4)
+                    }
+                  >
+                    Good Receipt (GR)
+                  </Checkbox>
+
+                  <div className='flex gap-3 flex-col'>
+                    <Checkbox
+                      size='sm'
+                      colorScheme='red'
+                      key='5'
+                      isChecked={isCheckedInvoice(5)}
+                      onChange={() =>
+                        handleCheckboxChangeDokumenPengirimanInvoice(5)
+                      }
+                    >
+                      Lainnya
+                    </Checkbox>
+                    <textarea
+                      id='dokumenPengirimanInvoiceInput'
+                      name='dokumenPengirimanInvoiceInput'
+                      placeholder='isi manual dokumen yang anda mau'
+                      type='textarea'
+                      ref={dokumenPengirimanInvoiceInputRef}
+                      value={formPengiriman.dokumenPengirimanInvoiceInput}
+                      className='form-input'
+                      rows={4}
+                      cols={40}
+                      onChange={handleInputChange}
+                    />
+                  </div>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errorsPengiriman.dokumenInvoicePengiriman}
+                    </div>
+                  )}
                 </div>
-              )}
-            </div>
-          </div>
-
-          <div className='flex flex-row  justify-between items-start'>
-            <div className='w-2/5'>
-              <label className='form-label  text-wrap'>
-                Dokumen yang dilampirkan saat Pengiriman Invoice
-              </label>
-              <span className='text-xs opacity-60'>
-                Dokumen akan dikirimkan sesuai dengan yang anda pilih
-              </span>
-            </div>
-            <div
-              className='w-3/5 flex gap-3 flex-col'
-              ref={dokumenPengirimanInvoiceRef}
-            >
-              <Checkbox
-                colorScheme='red'
-                key='0'
-                isChecked={isCheckedInvoice(0)}
-                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(0)}
-              >
-                Invoice Pembelian
-              </Checkbox>
-              <Checkbox
-                colorScheme='red'
-                key='1'
-                isChecked={isCheckedInvoice(1)}
-                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(1)}
-              >
-                Surat Jalan
-              </Checkbox>
-              <Checkbox
-                colorScheme='red'
-                key='2'
-                isChecked={isCheckedInvoice(2)}
-                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(2)}
-              >
-                Berita Acara Serah Terima (BAST)
-              </Checkbox>
-              <Checkbox
-                colorScheme='red'
-                key='3'
-                isChecked={isCheckedInvoice(3)}
-                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(3)}
-              >
-                Faktur Pajak
-              </Checkbox>
-              <Checkbox
-                colorScheme='red'
-                key='4'
-                isChecked={isCheckedInvoice(4)}
-                onChange={() => handleCheckboxChangeDokumenPengirimanInvoice(4)}
-              >
-                Good Receipt (GR)
-              </Checkbox>
-
-              <div className='flex gap-3 flex-col'>
-                <Checkbox
-                  colorScheme='red'
-                  key='5'
-                  isChecked={isCheckedInvoice(5)}
-                  onChange={() =>
-                    handleCheckboxChangeDokumenPengirimanInvoice(5)
-                  }
-                >
-                  Lainnya
-                </Checkbox>
-                <textarea
-                  id='dokumenPengirimanInvoiceInput'
-                  name='dokumenPengirimanInvoiceInput'
-                  placeholder='isi manual dokumen yang anda mau'
-                  type='textarea'
-                  ref={dokumenPengirimanInvoiceInputRef}
-                  value={formPengiriman.dokumenPengirimanInvoiceInput}
-                  className='form-input'
-                  rows={4}
-                  cols={40}
-                  onChange={handleInputChange}
-                />
+                <div className='w-2/5'></div>
               </div>
-              {chekValid && (
-                <div className='text-caption-2 text-danger-500 mt-1'>
-                  {errorsPengiriman.dokumenInvoicePengiriman}
-                </div>
-              )}
             </div>
-          </div>
+          </form>
         </div>
-      </form>
+      )}
     </>
   );
 };
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>
+      )}
     </>
   );
 };
diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
index 90454083..08dbbc8a 100644
--- a/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
+++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.jsx
@@ -941,7 +941,7 @@ const InformasiPerusahaan = ({
         </div>
       )}
       {isMobile && (
-        <div className=''>
+        <div className='text-sm'>
           <h1
             className={`font-bold py-4 mt-8 ${
               isKonfirmasi ? 'text-xl' : 'text-xl'
@@ -1151,7 +1151,7 @@ const InformasiPerusahaan = ({
                       id='accountNumber'
                       name='accountNumber'
                       ref={accountNumberRef}
-                      placeholder='Nomor Rekening Bank'
+                      placeholder='Nomor Rekening'
                       type='text'
                       value={form.accountNumber}
                       className='form-input'
@@ -1214,11 +1214,12 @@ const InformasiPerusahaan = ({
                   </div>
                 )}
               </div>
-              <div className='h-1 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='flex flex-col gap-2  justify-start items-start'>
                 <label className='form-label text-nowrap'>Durasi Tempo</label>
                 <div className='' ref={tempoDurationRef}>
                   <RadioGroup
+                    size='sm'
                     onChange={onChangeTempoDuration}
                     value={form.tempoDuration}
                   >
@@ -1239,40 +1240,61 @@ const InformasiPerusahaan = ({
                       {errors.tempoDuration}
                     </div>
                   )}
-                  <label className='form-label '>Limit Tempo</label>
-                  <div
-                    className='flex flex-col justify-start items-start'
-                    ref={tempoLimitRef}
+                </div>
+              </div>
+              <div className='flex flex-col gap-2  justify-start items-start'>
+                <label className='form-label '>Limit Tempo</label>
+                <div
+                  className='flex justify-between items-center '
+                  ref={tempoLimitRef}
+                >
+                  <RadioGroup
+                    size='sm'
+                    onChange={(value) => {
+                      if (value === 'custom') {
+                        setIsCustom(true);
+                        updateForm('tempoLimit', tempoLimitValue); // Update dengan nilai input custom jika dipilih
+                      } else {
+                        setIsCustom(false);
+                        onChangeTempoLimit(value); // Update dengan nilai radio button yang dipilih
+                      }
+                    }}
+                    className='flex items-center justify-between'
+                    value={isCustom ? 'custom' : form.tempoLimit}
                   >
-                    <RadioGroup
-                      onChange={(value) => {
-                        if (value === 'custom') {
-                          setIsCustom(true);
-                          updateForm('tempoLimit', tempoLimitValue); // Update dengan nilai input custom jika dipilih
-                        } else {
-                          setIsCustom(false);
-                          onChangeTempoLimit(value); // Update dengan nilai radio button yang dipilih
-                        }
-                      }}
-                      className='flex items-center justify-between'
-                      value={isCustom ? 'custom' : form.tempoLimit}
-                    >
-                      <Stack direction='row'>
-                        {/* Kolom 1 */}
-                        <Stack direction='column' spacing={2} className='mr-4'>
-                          {radioOptions.slice(0, 4).map((option) => (
-                            <Radio
-                              key={option.value}
-                              colorScheme='red'
-                              value={option.value}
-                            >
-                              {option.label}
-                            </Radio>
-                          ))}
-                        </Stack>
+                    <Stack direction='row'>
+                      {/* Kolom 1 */}
+                      <Stack direction='row' spacing={2} className='mr-4'>
+                        {radioOptions.slice(0, 3).map((option) => (
+                          <Radio
+                            key={option.value}
+                            colorScheme='red'
+                            value={option.value}
+                          >
+                            {option.label}
+                          </Radio>
+                        ))}
+                        <Radio colorScheme='red' value='custom'></Radio>
 
-                        {/* Kolom 2 */}
-                        <Stack direction='column' className='ml-8' spacing={2}>
+                        <input
+                          placeholder='Isi limit'
+                          type='text'
+                          className='border ml-1 p-1 w-full ' // padding untuk memberi ruang untuk "RP"
+                          value={formatRupiah(tempoLimitValueEx)} // Menampilkan nilai terformat
+                          onChange={(e) => {
+                            const value = e.target.value;
+                            const formattedValue = formatRupiah(value);
+                            setTempoLimitValueEx(formattedValue);
+                            updateForm(
+                              'tempoLimit',
+                              formattedValue.replace(/^Rp\s*/, '')
+                            ); // Mengupdate nilai di react-hook-form
+                          }}
+                        />
+                      </Stack>
+
+                      {/* Kolom 2 */}
+                      {/* <Stack direction='column' className='ml-8' spacing={2}>
                           {radioOptions.slice(4).map((option) => (
                             <Radio
                               key={option.value}
@@ -1282,47 +1304,29 @@ const InformasiPerusahaan = ({
                               {option.label}
                             </Radio>
                           ))}
-                          <div className='flex flex-row items-center'>
-                            <Radio colorScheme='red' value='custom'></Radio>
-
-                            <input
-                              placeholder='Isi limit yang anda inginkan'
-                              type='text'
-                              className='border ml-2 p-1' // padding untuk memberi ruang untuk "RP"
-                              value={formatRupiah(tempoLimitValueEx)} // Menampilkan nilai terformat
-                              onChange={(e) => {
-                                const value = e.target.value;
-                                const formattedValue = formatRupiah(value);
-                                setTempoLimitValueEx(formattedValue);
-                                updateForm(
-                                  'tempoLimit',
-                                  formattedValue.replace(/^Rp\s*/, '')
-                                ); // Mengupdate nilai di react-hook-form
-                              }}
-                            />
-                          </div>
-                        </Stack>
-                      </Stack>
-                    </RadioGroup>
-                    {chekValid && (
-                      <div className='text-caption-2 text-danger-500 mt-1'>
-                        {errors.tempoLimit}
-                      </div>
-                    )}
-                  </div>
+                          <div className='flex flex-row items-center'></div>
+                        </Stack> */}
+                    </Stack>
+                  </RadioGroup>
+                  {chekValid && (
+                    <div className='text-caption-2 text-danger-500 mt-1'>
+                      {errors.tempoLimit}
+                    </div>
+                  )}
                 </div>
               </div>
               <div className='text-red-500 text-xs'>
                 **Durasi & Limit dapat berbeda dengan verifikasi oleh tim
                 indoteknik.com
               </div>
-              <div className='h-1 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='flex flex-col gap justify-between items-start'>
                 <label className='form-label  text-wrap '>
                   Apakah bersedia transaksi via website?
                 </label>
                 <div className='flex gap-x-4' ref={bersediaRef}>
                   <RadioGroup
+                    size='sm'
                     onChange={handleCheckboxBersediaChange}
                     value={form.bersedia}
                   >
@@ -1342,6 +1346,50 @@ const InformasiPerusahaan = ({
                   </div>
                 )}
               </div>
+              <div className='h-[2px] bg-gray-300 w-[120%] inset-0 relative transform -translate-x-5'></div>
+
+              <div
+                className={`flex flex-col gap-2  justify-between ${
+                  isKonfirmasi ? 'items-center' : 'items-start'
+                }`}
+              >
+                <label className='form-label '>
+                  Kategori Produk yang Digunakan
+                </label>
+                <div className='flex flex-col justify-between gap-2 '>
+                  <div className='flex flex-col gap-2' ref={categoryProdukRef}>
+                    {firstColumn.map((item) => (
+                      <Checkbox
+                        size='sm'
+                        colorScheme='red'
+                        key={item.id}
+                        onChange={() => handleCheckboxChange(item.id)}
+                        isChecked={isChecked(item.id)}
+                      >
+                        {item.name}
+                      </Checkbox>
+                    ))}
+                  </div>
+                  <div className='flex flex-col gap-2'>
+                    {secondColumn.map((item) => (
+                      <Checkbox
+                        size='sm'
+                        colorScheme='red'
+                        key={item.id}
+                        isChecked={isChecked(item.id)}
+                        onChange={() => handleCheckboxChange(item.id)}
+                      >
+                        {item.name}
+                      </Checkbox>
+                    ))}
+                  </div>
+                </div>
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.categoryProduk}
+                  </div>
+                )}
+              </div>
             </div>
           </form>
         </div>
-- 
cgit v1.2.3