<iman> update & add section dokumen

7 files changed, 613 insertions, 5 deletions

diff --git a/package.json b/package.json
index a846749c..54ce592f 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "@emotion/styled": "^11.11.0",
     "@heroicons/react": "^2.0.13",
     "@hookform/resolvers": "^2.9.10",
+    "@ramonak/react-progress-bar": "^5.3.0",
     "@react-email/components": "^0.0.2",
     "@react-email/render": "^0.0.6",
     "@tailwindcss/line-clamp": "^0.4.2",
diff --git a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts
index 08053e42..9c97b8a0 100644
--- a/src-migrate/modules/register/stores/usePengajuanTempoStore.ts
+++ b/src-migrate/modules/register/stores/usePengajuanTempoStore.ts
@@ -4,12 +4,14 @@ import {
   TempoPropsKontakPerson,
   TempoPropsPengiriman,
   TempoPropsSupplier,
+  TempoPropsDokumen,
 } from '~/types/tempo';
 import {
   TempoSchema,
   TempoSchemaKontakPerson,
   TempoSchemaPengiriman,
   TempoSchemaSupplier,
+  TempoSchemaDokumen,
 } from '~/validations/tempo';
 import { boolean, ZodError } from 'zod';
 
@@ -262,6 +264,93 @@ export const usePengajuanTempoStorePengiriman = create<
       },
     }),
 }));
+type StateDokumen = {
+  formDokumen: TempoPropsDokumen;
+  errorsDokumen: {
+    [key in keyof TempoPropsDokumen]?: string;
+  };
+};
+type ActionDokumen = {
+  updateFormDokumen: (
+    name: string,
+    fileName: string,
+    fileFormat: string,
+    value: string
+  ) => void;
+
+  validateDokumen: () => void;
+  resetFormDokumen: () => void;
+  getJumlahDokumenDiisi: () => void;
+};
+export const usePengajuanTempoStoreDokumen = create<
+  StateDokumen & ActionDokumen
+>((set, get) => ({
+  formDokumen: {
+    dokumenNib: { name: '', format: '', base64: '' },
+    dokumenNpwp: { name: '', format: '', base64: '' },
+    dokumenSppkp: { name: '', format: '', base64: '' },
+    dokumenAktaPerubahan: { name: '', format: '', base64: '' },
+    dokumenKtpDirut: { name: '', format: '', base64: '' },
+    dokumenAktaPendirian: { name: '', format: '', base64: '' },
+    dokumenLaporanKeuangan: { name: '', format: '', base64: '' },
+    dokumenFotoKantor: { name: '', format: '', base64: '' },
+    dokumenTempatBekerja: { name: '', format: '', base64: '' },
+  },
+
+  // Memperbarui dokumen dengan name, format, dan base64
+  updateFormDokumen: (name, fileName, fileFormat, value) =>
+    set((state) => ({
+      formDokumen: {
+        ...state.formDokumen,
+        [name]: {
+          name: fileName,
+          format: fileFormat,
+          base64: value,
+        },
+      },
+    })),
+
+  errorsDokumen: {},
+  validateDokumen: () => {
+    try {
+      TempoSchemaDokumen.parse(get().formDokumen);
+      set({ errorsDokumen: {} });
+    } catch (error) {
+      if (error instanceof ZodError) {
+        const errorsDokumen: StateDokumen['errorsDokumen'] = {};
+        error.errors.forEach(
+          (e) =>
+            (errorsDokumen[e.path[0] as keyof TempoPropsDokumen] = e.message)
+        );
+        set({ errorsDokumen });
+      }
+    }
+  },
+
+  getJumlahDokumenDiisi: () => {
+    const formDokumen = get().formDokumen;
+    // Menghitung jumlah field yang base64 tidak kosong
+    const jumlahTerisi = Object.values(formDokumen).filter(
+      (dokumen) => dokumen.base64 !== ''
+    ).length;
+    return jumlahTerisi;
+  },
+
+  resetFormDokumen: () =>
+    set({
+      formDokumen: {
+        dokumenNib: { name: '', format: '', base64: '' },
+        dokumenNpwp: { name: '', format: '', base64: '' },
+        dokumenSppkp: { name: '', format: '', base64: '' },
+        dokumenAktaPerubahan: { name: '', format: '', base64: '' },
+        dokumenKtpDirut: { name: '', format: '', base64: '' },
+        dokumenAktaPendirian: { name: '', format: '', base64: '' },
+        dokumenLaporanKeuangan: { name: '', format: '', base64: '' },
+        dokumenFotoKantor: { name: '', format: '', base64: '' },
+        dokumenTempatBekerja: { name: '', format: '', base64: '' },
+      },
+    }),
+}));
 
 type StateSupplier = {
   formSupplier: TempoPropsSupplier[];
diff --git a/src-migrate/types/tempo.ts b/src-migrate/types/tempo.ts
index 17c4c906..d928d9c3 100644
--- a/src-migrate/types/tempo.ts
+++ b/src-migrate/types/tempo.ts
@@ -3,6 +3,7 @@ import {
   TempoSchemaKontakPerson,
   TempoSchemaPengiriman,
   TempoSchemaSupplier,
+  TempoSchemaDokumen,
 } from '~/validations/tempo';
 import { OdooApiRes } from './odoo';
 import { z } from 'zod';
@@ -68,6 +69,17 @@ export type tempoPropsSupplier = {
   durasiTempo: string;
   creditLimit: string;
 };
+export type tempoPropsDokumen = {
+  dokumenNib: { name: string; format: string; base64: string };
+  dokumenNpwp: { name: string; format: string; base64: string };
+  dokumenSppkp: { name: string; format: string; base64: string };
+  dokumenAktaPerubahan: { name: string; format: string; base64: string };
+  dokumenKtpDirut: { name: string; format: string; base64: string };
+  dokumenAktaPendirian: { name: string; format: string; base64: string };
+  dokumenLaporanKeuangan: { name: string; format: string; base64: string };
+  dokumenFotoKantor: { name: string; format: string; base64: string };
+  dokumenTempatBekerja: { name: string; format: string; base64: string };
+};
 
 export type TempoApiProps = OdooApiRes<TempoProps>;
 
@@ -75,6 +87,7 @@ export type TempoProps = z.infer<typeof TempoSchema>;
 export type TempoPropsKontakPerson = z.infer<typeof TempoSchemaKontakPerson>;
 export type TempoPropsPengiriman = z.infer<typeof TempoSchemaPengiriman>;
 export type TempoPropsSupplier = z.infer<typeof TempoSchemaSupplier>;
+export type TempoPropsDokumen = z.infer<typeof TempoSchemaDokumen>;
 
 export type TempoResApiProps = {
   Tempo: boolean;
diff --git a/src-migrate/validations/tempo.ts b/src-migrate/validations/tempo.ts
index 86bcf6d1..ccef8d83 100644
--- a/src-migrate/validations/tempo.ts
+++ b/src-migrate/validations/tempo.ts
@@ -107,3 +107,50 @@ export const TempoSchemaSupplier = z.object({
   durasiTempo: z.string().min(1, { message: 'Durasi tempo harus diisi' }),
   creditLimit: z.string().min(1, { message: 'Limit Kredit harus diisi' }),
 });
+export const TempoSchemaDokumen = z.object({
+  dokumenNib: z.object({
+    name: z.string().min(1, { message: 'Nama file harus diisi' }),
+    format: z.string().min(1, { message: 'Format file harus diisi' }),
+    base64: z.string().min(1, { message: 'Dokumen harus diisi' }),
+  }),
+  dokumenNpwp: z.object({
+    name: z.string().min(1, { message: 'Nama file harus diisi' }),
+    format: z.string().min(1, { message: 'Format file harus diisi' }),
+    base64: z.string().min(1, { message: 'Dokumen harus diisi' }),
+  }),
+  dokumenSppkp: z.object({
+    name: z.string().optional(),
+    format: z.string().optional(),
+    base64: z.string().optional(),
+  }),
+  dokumenAktaPerubahan: z.object({
+    name: z.string().optional(),
+    format: z.string().optional(),
+    base64: z.string().optional(),
+  }),
+  dokumenKtpDirut: z.object({
+    name: z.string().optional(),
+    format: z.string().optional(),
+    base64: z.string().optional(),
+  }),
+  dokumenAktaPendirian: z.object({
+    name: z.string().optional(),
+    format: z.string().optional(),
+    base64: z.string().optional(),
+  }),
+  dokumenLaporanKeuangan: z.object({
+    name: z.string().optional(),
+    format: z.string().optional(),
+    base64: z.string().optional(),
+  }),
+  dokumenFotoKantor: z.object({
+    name: z.string().min(1, { message: 'Nama file harus diisi' }),
+    format: z.string().min(1, { message: 'Format file harus diisi' }),
+    base64: z.string().min(1, { message: 'Dokumen harus diisi' }),
+  }),
+  dokumenTempatBekerja: z.object({
+    name: z.string().min(1, { message: 'Nama file harus diisi' }),
+    format: z.string().min(1, { message: 'Format file harus diisi' }),
+    base64: z.string().min(1, { message: 'Dokumen harus diisi' }),
+  }),
+});
diff --git a/src/lib/pengajuan-tempo/component/Dokumen.jsx b/src/lib/pengajuan-tempo/component/Dokumen.jsx
new file mode 100644
index 00000000..65220b27
--- /dev/null
+++ b/src/lib/pengajuan-tempo/component/Dokumen.jsx
@@ -0,0 +1,441 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { Controller, set, useForm } from 'react-hook-form';
+import { usePengajuanTempoStoreDokumen } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
+import ProgressBar from '@ramonak/react-progress-bar';
+import { UseToastOptions } from '@chakra-ui/react';
+import { toast } from 'react-hot-toast';
+import getFileBase64 from '@/core/utils/getFileBase64';
+const Dokumen = ({ chekValid, buttonSubmitClick }) => {
+  const { control, watch } = useForm();
+  const {
+    formDokumen,
+    errorsDokumen,
+    validateDokumen,
+    updateFormDokumen,
+    getJumlahDokumenDiisi,
+  } = usePengajuanTempoStoreDokumen();
+
+  // const handleInputChange = (event) => {
+  //   const { name, value } = event.target;
+  //   updateFormDokumen(name, value);
+  //   validateDokumen();
+  // };
+  const handleInputChange = async (event) => {
+    let fileBase64 = '';
+    const { name } = event.target;
+    const file = event.target.files?.[0];
+    console.log('file', file);
+    // Allowed file extensions
+    const allowedExtensions = ['pdf', 'png', 'jpg', 'jpeg'];
+    let fileExtension = '';
+    if (file) {
+      fileExtension = file.name.split('.').pop()?.toLowerCase(); // Extract file extension
+
+      // Check if the file extension is allowed
+      if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+        toast.error(
+          'Format file yang diijinkan adalah .pdf, .png, .jpg, atau .jpeg',
+          { duration: 4000 }
+        );
+
+        event.target.value = '';
+        return;
+      }
+
+      // Check for file size
+      if (file.size > 2000000) {
+        toast.error('Maksimal ukuran file adalah 2MB', { duration: 4000 });
+
+        event.target.value = '';
+        return;
+      }
+
+      // Convert file to Base64
+      fileBase64 = await getFileBase64(file);
+      updateFormDokumen(name, file.name, fileExtension, fileBase64);
+      validateDokumen();
+    }
+  };
+
+  const isFormValid = useMemo(
+    () => Object.keys(errorsDokumen).length === 0,
+    [errorsDokumen]
+  );
+  console.log('formDokumen', formDokumen?.dokumenNib?.name);
+  const dokumenNibRef = useRef(null);
+  const dokumenNpwpRef = useRef(null);
+  const dokumenSppkpRef = useRef(null);
+  const dokumenAktaPerubahanRef = useRef(null);
+  const dokumenKtpDirutRef = useRef(null);
+  const dokumenAktaPendirianRef = useRef(null);
+  const dokumenLaporanKeuanganRef = useRef(null);
+  const dokumenFotoKantorRef = useRef(null);
+  const dokumenTempatBekerjaRef = useRef(null);
+
+  useEffect(() => {
+    const loadIndustries = async () => {
+      if (!isFormValid) {
+        const options = {
+          behavior: 'smooth',
+          block: 'center',
+        };
+        if (errorsDokumen.dokumenNib && dokumenNibRef.current) {
+          dokumenNibRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsDokumen.dokumenNpwp && dokumenNpwpRef.current) {
+          dokumenNpwpRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsDokumen.dokumenSppkp && dokumenSppkpRef.current) {
+          dokumenSppkpRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          errorsDokumen.dokumenAktaPerubahan &&
+          dokumenAktaPerubahanRef.current
+        ) {
+          dokumenAktaPerubahanRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsDokumen.dokumenKtpDirut && dokumenKtpDirutRef.current) {
+          dokumenKtpDirutRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          errorsDokumen.dokumenAktaPendirian &&
+          dokumenAktaPendirianRef.current
+        ) {
+          dokumenAktaPendirianRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          errorsDokumen.dokumenLaporanKeuangan &&
+          dokumenLaporanKeuanganRef.current
+        ) {
+          dokumenLaporanKeuanganRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errorsDokumen.dokumenFotoKantor && dokumenFotoKantorRef.current) {
+          dokumenFotoKantorRef.current.scrollIntoView(options);
+          return;
+        }
+        if (
+          errorsDokumen.dokumenTempatBekerja &&
+          dokumenTempatBekerjaRef.current
+        ) {
+          dokumenTempatBekerjaRef.current.scrollIntoView(options);
+          return;
+        }
+      }
+    };
+    loadIndustries();
+  }, [buttonSubmitClick, chekValid]);
+
+  useEffect(() => {
+    validateDokumen();
+  }, [buttonSubmitClick]);
+  return (
+    <>
+      <div className='flex justify-start'>
+        <h1 className='font-bold'>Dokumen</h1>
+      </div>
+      <form className='flex mt-4 flex-col w-full '>
+        <div className='w-full grid grid-cols-[1fr_auto_1fr] gap-5'>
+          <div className='kolom-kiri w-full grid grid-rows-2 gap-10 '>
+            <div className='w-full grid grid-cols-2 gap-5'>
+              <div>
+                <label className='form-label  text-nowrap'>
+                  NIB (SIUP/TDP/SKDP)
+                </label>
+                <span className='text-xs opacity-60'>
+                  Pastikan dokumen yang anda upload sudah benar
+                </span>
+              </div>
+              <div className=''>
+                <input
+                  // value={formDokumen?.dokumenNib?.name}
+                  id='dokumenNib'
+                  name='dokumenNib'
+                  type='file'
+                  ref={dokumenNibRef}
+                  className='form-input'
+                  aria-invalid={errorsDokumen.dokumenNib}
+                  onChange={handleInputChange}
+                  accept='.pdf,.png,.jpg,.jpeg'
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenNib}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className='w-full grid grid-cols-2 gap-5'>
+              <div>
+                <label className='form-label  text-nowrap'>
+                  NPWP Perusahaan
+                </label>
+                <span className='text-xs opacity-60'>
+                  Pastikan dokumen yang anda upload sudah benar
+                </span>
+              </div>
+              <div className=''>
+                <input
+                  // value={formDokumen.dokumenNpwp}
+                  id='dokumenNpwp'
+                  name='dokumenNpwp'
+                  type='file'
+                  ref={dokumenNpwpRef}
+                  className='form-input'
+                  aria-invalid={errorsDokumen.dokumenNpwp}
+                  onChange={handleInputChange}
+                  accept='.pdf,.png,.jpg,.jpeg'
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenNpwp}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className='w-full grid grid-cols-2 gap-5'>
+              <div>
+                <label className='form-label  text-nowrap'>SPPKP</label>
+                <span className='text-xs opacity-60'>
+                  Pastikan dokumen yang anda upload sudah benar
+                </span>
+              </div>
+              <div className=''>
+                <input
+                  // value={formDokumen.dokumenSppkp}
+                  id='dokumenSppkp'
+                  name='dokumenSppkp'
+                  type='file'
+                  ref={dokumenSppkpRef}
+                  className='form-input'
+                  aria-invalid={errorsDokumen.dokumenSppkp}
+                  onChange={handleInputChange}
+                  accept='.pdf,.png,.jpg,.jpeg'
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenSppkp}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className='w-full grid grid-cols-2 gap-5'>
+              <div>
+                <label className='form-label  text-nowrap'>
+                  Akta Perubahan <span className=' opacity-60'>(Opsional)</span>
+                </label>
+                <span className='text-xs opacity-60'>
+                  Pastikan dokumen yang anda upload sudah benar
+                </span>
+              </div>
+              <div className=''>
+                <input
+                  // value={formDokumen.dokumenAktaPerubahan}
+                  id='dokumenAktaPerubahan'
+                  name='dokumenAktaPerubahan'
+                  type='file'
+                  ref={dokumenAktaPerubahanRef}
+                  className='form-input'
+                  aria-invalid={errorsDokumen.dokumenAktaPerubahan}
+                  onChange={handleInputChange}
+                  accept='.pdf,.png,.jpg,.jpeg'
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenAktaPerubahan}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className='w-full grid grid-cols-2 gap-5'>
+              <div>
+                <label className='form-label  text-nowrap'>
+                  KTP Dirut/Direktur{' '}
+                  <span className=' opacity-60'>(Opsional)</span>
+                </label>
+                <span className='text-xs opacity-60'>
+                  Pastikan dokumen yang anda upload sudah benar
+                </span>
+              </div>
+              <div className=''>
+                <input
+                  // value={formDokumen.dokumenKtpDirut}
+                  id='dokumenKtpDirut'
+                  name='dokumenKtpDirut'
+                  type='file'
+                  ref={dokumenKtpDirutRef}
+                  className='form-input'
+                  aria-invalid={errorsDokumen.dokumenKtpDirut}
+                  onChange={handleInputChange}
+                  accept='.pdf,.png,.jpg,.jpeg'
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenKtpDirut}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+          <div className='w-px bg-gray-300'></div>
+          <div className='kolom kanan w-full grid grid-rows-2 gap-10 '>
+            <div className='w-full grid grid-cols-2 gap-5'>
+              <div>
+                <label className='form-label  text-nowrap'>
+                  Akta Pendirian <span className=' opacity-60'>(Opsional)</span>
+                </label>
+                <span className='text-xs opacity-60'>
+                  Pastikan dokumen yang anda upload sudah benar
+                </span>
+              </div>
+              <div className=''>
+                <input
+                  // value={formDokumen.dokumenAktaPendirian}
+                  id='dokumenAktaPendirian'
+                  name='dokumenAktaPendirian'
+                  type='file'
+                  ref={dokumenAktaPendirianRef}
+                  className='form-input'
+                  aria-invalid={errorsDokumen.dokumenAktaPendirian}
+                  onChange={handleInputChange}
+                  accept='.pdf,.png,.jpg,.jpeg'
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenAktaPendirian}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className='w-full grid grid-cols-2 gap-5'>
+              <div>
+                <label className='form-label  text-nowrap'>
+                  Laporan Keuangan
+                  <span className=' opacity-60'>(Opsional)</span>
+                </label>
+                <span className='text-xs opacity-60'>
+                  Pastikan dokumen yang anda upload sudah benar
+                </span>
+              </div>
+              <div className=''>
+                <input
+                  // value={formDokumen.dokumenLaporanKeuangan}
+                  id='dokumenLaporanKeuangan'
+                  name='dokumenLaporanKeuangan'
+                  type='file'
+                  ref={dokumenLaporanKeuanganRef}
+                  className='form-input'
+                  aria-invalid={errorsDokumen.dokumenLaporanKeuangan}
+                  onChange={handleInputChange}
+                  accept='.pdf,.png,.jpg,.jpeg'
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenLaporanKeuangan}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className='w-full grid grid-cols-2 gap-5'>
+              <div>
+                <label className='form-label  text-nowrap'>
+                  Foto Kantor (Tampak Depan)
+                </label>
+                <span className='text-xs opacity-60'>
+                  Pastikan dokumen yang anda upload sudah benar
+                </span>
+              </div>
+              <div className=''>
+                <input
+                  // value={formDokumen.dokumenFotoKantor}
+                  id='dokumenFotoKantor'
+                  name='dokumenFotoKantor'
+                  type='file'
+                  ref={dokumenFotoKantorRef}
+                  className='form-input'
+                  aria-invalid={errorsDokumen.dokumenFotoKantor}
+                  onChange={handleInputChange}
+                  accept='.pdf,.png,.jpg,.jpeg'
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenFotoKantor}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div className='w-full grid grid-cols-2 gap-5'>
+              <div>
+                <label className='form-label  text-nowrap'>
+                  Tempat Bekerja
+                </label>
+                <span className='text-xs opacity-60'>
+                  Pastikan dokumen yang anda upload sudah benar
+                </span>
+              </div>
+              <div className=''>
+                <input
+                  // value={formDokumen.dokumenTempatBekerja}
+                  id='dokumenTempatBekerja'
+                  name='dokumenTempatBekerja'
+                  type='file'
+                  ref={dokumenTempatBekerjaRef}
+                  className='form-input'
+                  aria-invalid={errorsDokumen.dokumenTempatBekerja}
+                  onChange={handleInputChange}
+                  accept='.pdf,.png,.jpg,.jpeg'
+                />
+                {chekValid && (
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errorsDokumen.dokumenTempatBekerja}
+                  </div>
+                )}
+              </div>
+            </div>
+            <div></div>
+          </div>
+        </div>
+      </form>
+      <div className='w-1/2 mt-8 flex gap-3 flex-col'>
+        <div className='flex justify-between'>
+          <p className='font-bold'>Upload Progress</p>
+          <p>
+            <span className='text-red-500 font-bold'>
+              {parseInt((getJumlahDokumenDiisi() / 9) * 100)} %
+            </span>
+            <span className='ml-2 opacity-60'>
+              {getJumlahDokumenDiisi() > 5
+                ? getJumlahDokumenDiisi() == 9
+                  ? 'Selesai'
+                  : 'Sedikit Lagi'
+                : ''}
+            </span>
+          </p>
+        </div>
+        {/* 50 keatas baru muncul kata kata sedikit lagi */}
+        <ProgressBar
+          completed={getJumlahDokumenDiisi()}
+          bgColor='#ef4444'
+          labelAlignment='outside'
+          isLabelVisible={false}
+          baseBgColor='#E5E7EB'
+          labelColor='#e80909'
+          labelSize='0'
+          maxCompleted={9}
+        />
+        <span className='opacity-75'>
+          Tingkatin sedikit lagi agar pengajuan tempo kamu dapat kami proses
+          dengan cepat
+        </span>
+      </div>
+    </>
+  );
+};
+
+export default Dokumen;
diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
index 2ab7c21a..238c5e4e 100644
--- a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
+++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
@@ -5,12 +5,14 @@ import InformasiPerusahaan from './informasiPerusahaan';
 import KontakPerusahaan from './KontakPerusahaan';
 import Pengiriman from './Pengiriman';
 import Referensi from './Referensi';
+import Dokumen from './Dokumen';
 import { Controller, useForm } from 'react-hook-form';
 import {
   usePengajuanTempoStore,
   usePengajuanTempoStoreKontakPerson,
   usePengajuanTempoStorePengiriman,
   usePengajuanTempoStoreSupplier,
+  usePengajuanTempoStoreDokumen,
 } from '../../../../src-migrate/modules/register/stores/usePengajuanTempoStore';
 import { ChevronRightIcon, ChevronLeftIcon } from '@heroicons/react/24/outline';
 const PengajuanTempo = () => {
@@ -18,6 +20,8 @@ const PengajuanTempo = () => {
   const NUMBER_OF_STEPS = 6;
   const { form, errors, validate, updateForm } = usePengajuanTempoStore();
   const { control, watch, setValue } = useForm();
+  const { formDokumen, errorsDokumen, validateDokumen, updateFormDokumen } =
+    usePengajuanTempoStoreDokumen();
   const {
     formKontakPerson,
     errorsKontakPerson,
@@ -45,6 +49,7 @@ const PengajuanTempo = () => {
     />,
     <Pengiriman chekValid={notValid} buttonSubmitClick={buttonSubmitClick} />,
     <Referensi chekValid={notValid} buttonSubmitClick={buttonSubmitClick} />,
+    <Dokumen chekValid={notValid} buttonSubmitClick={buttonSubmitClick} />,
     <div>Dokumen</div>,
     <div>Konfirmasi</div>,
   ];
@@ -53,7 +58,7 @@ const PengajuanTempo = () => {
     errorsKontakPerson,
     errorsPengiriman,
     errorsSupplier,
-    <div>Dokumen</div>,
+    errorsDokumen,
     <div>Konfirmasi</div>,
   ];
   const stepDivsForm = [
@@ -61,7 +66,7 @@ const PengajuanTempo = () => {
     formKontakPerson,
     formPengiriman,
     formSupplier,
-    <div>Dokumen</div>,
+    formDokumen,
     <div>Konfirmasi</div>,
   ];
   const stepDivsUpdateForm = [
@@ -69,7 +74,7 @@ const PengajuanTempo = () => {
     updateFormKontakPerson,
     updateFormPengiriman,
     updateFormSupplier,
-    <div>Dokumen</div>,
+    updateFormDokumen,
     <div>Konfirmasi</div>,
   ];
   const stepLabels = [
@@ -89,6 +94,7 @@ const PengajuanTempo = () => {
     validate();
     validateKontakPerson();
     validatePengiriman();
+    validateDokumen();
 
     window.scrollTo({
       top: 0,
@@ -108,6 +114,8 @@ const PengajuanTempo = () => {
         });
       }
     }
+    if (formSupplier) {
+    }
   }, [currentStep]);
   const goToNextStep = () => {
     if (!isFormValid) {
diff --git a/src/lib/pengajuan-tempo/component/Referensi.jsx b/src/lib/pengajuan-tempo/component/Referensi.jsx
index e2a341e6..dd8b66ad 100644
--- a/src/lib/pengajuan-tempo/component/Referensi.jsx
+++ b/src/lib/pengajuan-tempo/component/Referensi.jsx
@@ -152,9 +152,18 @@ const Referensi = ({ chekValid, buttonSubmitClick }) => {
   useEffect(() => {
     updateFormSupplier(supplierData);
   }, [buttonSubmit]);
+  const getFromLocalStorage = (key) => {
+    const itemStr = localStorage.getItem(key);
+    if (!itemStr) return null;
+
+    const item = JSON.parse(itemStr);
+    return item;
+  };
   useEffect(() => {
-    if (formSupplier) {
-      setSupplierData(formSupplier);
+    const cachedData = getFromLocalStorage('Referensi');
+    if (cachedData) {
+      setSupplierData(cachedData);
+      updateFormSupplier(cachedData);
     }
   }, [buttonSubmitClick]);
   return (