Merged in Feature/popup_information (pull request #120)

Feature/popup information

6 files changed, 414 insertions, 321 deletions

diff --git a/src/lib/form/components/KunjunganSales.jsx b/src/lib/form/components/KunjunganSales.jsx
index 7064f807..7470395a 100644
--- a/src/lib/form/components/KunjunganSales.jsx
+++ b/src/lib/form/components/KunjunganSales.jsx
@@ -8,6 +8,7 @@ import { Controller, useForm } from 'react-hook-form'
 import { toast } from 'react-hot-toast'
 import * as Yup from 'yup'
 import createLeadApi from '../api/createLeadApi'
+import PageContent from '@/lib/content/components/PageContent'
 
 const KunjunganSales = () => {
   const {
@@ -74,7 +75,7 @@ const KunjunganSales = () => {
     <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
       <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Kunjungan Sales</h1>
 
-      <div className='w-full grid grid-cols-1 md:grid-cols-2'>
+      <div className='w-full grid grid-cols-1 md:grid-cols-2 gap-x-2'>
         <form onSubmit={handleSubmit(onSubmitHandler)} className='grid grid-cols-1 gap-y-6'>
           <div
             className='flex items-center bg-blue-100 border border-blue-300 text-blue-500 font-medium px-4 py-3 rounded leading-6'
@@ -174,6 +175,7 @@ const KunjunganSales = () => {
             Simpan
           </button>
         </form>
+        <PageContent path='/kunjungan-sales' />
       </div>
     </div>
   )
diff --git a/src/lib/form/components/KunjunganService.jsx b/src/lib/form/components/KunjunganService.jsx
index 965fbc89..1cb0b446 100644
--- a/src/lib/form/components/KunjunganService.jsx
+++ b/src/lib/form/components/KunjunganService.jsx
@@ -7,6 +7,7 @@ import { Controller, useForm } from 'react-hook-form'
 import { toast } from 'react-hot-toast'
 import * as Yup from 'yup'
 import createLeadApi from '../api/createLeadApi'
+import PageContent from '@/lib/content/components/PageContent'
 
 const CreateKunjunganService = () => {
   const {
@@ -82,8 +83,10 @@ const CreateKunjunganService = () => {
             kami untuk melakukan kunjungan ke tempat Anda di Jabodetabek.
           </p>
         </div>
+        <div className='w-full grid grid-cols-2 gap-x-2'>
+
         <form onSubmit={handleSubmit(onSubmitHandler)}>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+          <div className=''>
             <div>
               <label className='form-label mb-2'>Nama Perusahan *</label>
               <input
@@ -95,7 +98,7 @@ const CreateKunjunganService = () => {
               <div className='text-caption-2 text-danger-500 mt-1'>{errors.company?.message}</div>
             </div>
           </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+          <div className=''>
             <div>
               <label className='form-label mb-2'>No. Telp *</label>
               <input
@@ -107,7 +110,7 @@ const CreateKunjunganService = () => {
               <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.message}</div>
             </div>
           </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+          <div className=''>
             <div>
               <label className='form-label mb-2'>Alamat*</label>
               <input
@@ -119,7 +122,7 @@ const CreateKunjunganService = () => {
               <div className='text-caption-2 text-danger-500 mt-1'>{errors.address?.message}</div>
             </div>
           </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+          <div className=''>
             <div>
               <label className='form-label mb-2'>Kota*</label>
               <Controller
@@ -130,7 +133,7 @@ const CreateKunjunganService = () => {
               <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div>
             </div>
           </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+          <div className=''>
             <div>
               <label className='form-label mb-2'>Contact Person*</label>
               <input
@@ -142,7 +145,7 @@ const CreateKunjunganService = () => {
               <div className='text-caption-2 text-danger-500 mt-1'>{errors.cp?.message}</div>
             </div>
           </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+          <div className=''>
             <div>
               <label className='form-label mb-2'>No HP *</label>
               <input
@@ -154,7 +157,7 @@ const CreateKunjunganService = () => {
               <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div>
             </div>
           </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+          <div className=''>
             <div>
               <label className='form-label mb-2'>Alamat Email *</label>
               <input
@@ -166,7 +169,7 @@ const CreateKunjunganService = () => {
               <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
             </div>
           </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+          <div className=''>
             <div>
               <label className='form-label mb-2'>
                 Sebutkan: Merek, Tipe, Permasalahan, Service, Perawatan
@@ -177,12 +180,12 @@ const CreateKunjunganService = () => {
               </div>
             </div>
           </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+          <div className=''>
             <div>
               <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
             </div>
           </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
+          <div className=''>
             <div>
               <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
                 Simpan
@@ -190,6 +193,8 @@ const CreateKunjunganService = () => {
             </div>
           </div>
         </form>
+        <PageContent path='/kunjungan-service' />
+        </div>
       </div>
     </div>
   )
diff --git a/src/lib/form/components/Merchant.jsx b/src/lib/form/components/Merchant.jsx
index 24b58a7c..6c1af231 100644
--- a/src/lib/form/components/Merchant.jsx
+++ b/src/lib/form/components/Merchant.jsx
@@ -1,12 +1,13 @@
-import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
-import cityApi from '@/lib/address/api/cityApi'
-import { yupResolver } from '@hookform/resolvers/yup'
-import React, { useEffect, useRef, useState } from 'react'
-import ReCAPTCHA from 'react-google-recaptcha'
-import { Controller, useForm } from 'react-hook-form'
-import { toast } from 'react-hot-toast'
-import * as Yup from 'yup'
-import createLeadApi from '../api/createLeadApi'
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import cityApi from '@/lib/address/api/cityApi';
+import { yupResolver } from '@hookform/resolvers/yup';
+import React, { useEffect, useRef, useState } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+import createLeadApi from '../api/createLeadApi';
+import PageContent from '@/lib/content/components/PageContent';
 
 const CreateMerchant = () => {
   const {
@@ -14,56 +15,59 @@ const CreateMerchant = () => {
     handleSubmit,
     formState: { errors },
     control,
-    reset
+    reset,
   } = useForm({
     resolver: yupResolver(validationSchema),
-    defaultValues
-  })
+    defaultValues,
+  });
   const list_unit = [
     {
       value: 'Manufacturing',
-      label: 'Manufacturing'
+      label: 'Manufacturing',
     },
     {
       value: 'Hospitality',
-      label: 'Hospitality'
+      label: 'Hospitality',
     },
     {
       value: 'Automotive',
-      label: 'Automotive'
+      label: 'Automotive',
     },
     {
       value: 'Retail',
-      label: 'Retail'
+      label: 'Retail',
     },
     {
       value: 'Maining',
-      label: 'Maining'
+      label: 'Maining',
     },
     {
       value: 'Lain - Lain',
-      label: 'Lain - Lain'
-    }
-  ]
-  const [cities, setCities] = useState([])
-  const [company_unit, setCompany_unit] = useState(list_unit)
+      label: 'Lain - Lain',
+    },
+  ];
+  const [cities, setCities] = useState([]);
+  const [company_unit, setCompany_unit] = useState(list_unit);
 
-  const recaptchaRef = useRef(null)
+  const recaptchaRef = useRef(null);
 
   useEffect(() => {
     const loadCities = async () => {
-      let dataCities = await cityApi()
-      dataCities = dataCities.map((city) => ({ value: city.id, label: city.name }))
-      setCities(dataCities)
-    }
-    loadCities()
-  }, [])
+      let dataCities = await cityApi();
+      dataCities = dataCities.map((city) => ({
+        value: city.id,
+        label: city.name,
+      }));
+      setCities(dataCities);
+    };
+    loadCities();
+  }, []);
 
   const onSubmitHandler = async (values) => {
-    const recaptchaValue = recaptchaRef.current.getValue()
+    const recaptchaValue = recaptchaRef.current.getValue();
     if (!recaptchaValue) {
-      toast.error('Catcha harus diisi')
-      return
+      toast.error('Catcha harus diisi');
+      return;
     }
     const data = {
       ...values,
@@ -89,166 +93,200 @@ const CreateMerchant = () => {
         ' \r\n No Hp : ' +
         values.mobile +
         'Keterangan  : ' +
-        values.description
-    }
-    const create_leads = await createLeadApi({ data })
+        values.description,
+    };
+    const create_leads = await createLeadApi({ data });
     if (create_leads) {
-      toast.success('Berhasil menambahkan data')
-      reset()
-      recaptchaRef.current.reset()
+      toast.success('Berhasil menambahkan data');
+      reset();
+      recaptchaRef.current.reset();
     }
-  }
+  };
   return (
     <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
-      <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Form Merchant</h1>
+      <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>
+        Form Merchant
+      </h1>
       <div className='w-full  p-4 bg-white border border-gray_r-6 rounded'>
         <div
           className='flex items-center bg-blue-100 border border-blue-400 text-blue-500 font-bold px-4 py-3 mb-4'
           role='alert'
         >
           <p>
-            Penjualan online adalah hal yang HARUS dilakukan mulai sekarang. Perubahan dalam banyak
-            industri dan pola pembelian. Gabung dengan platform kami dan mulai penjualan lansung di
-            ribuan perusahaan d seluruh Indonesia.{' '}
+            Penjualan online adalah hal yang HARUS dilakukan mulai sekarang.
+            Perubahan dalam banyak industri dan pola pembelian. Gabung dengan
+            platform kami dan mulai penjualan lansung di ribuan perusahaan d
+            seluruh Indonesia.{' '}
           </p>
         </div>
-        <form onSubmit={handleSubmit(onSubmitHandler)}>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>Nama Perusahan *</label>
-              <input
-                {...register('company')}
-                placeholder='PT.Indoteknik'
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.company?.message}</div>
+        <div className='w-full grid grid-cols-2 gap-x-2'>
+          <form onSubmit={handleSubmit(onSubmitHandler)}>
+            <div className=''>
+              <div>
+                <label className='form-label mb-2'>Nama Perusahan *</label>
+                <input
+                  {...register('company')}
+                  placeholder='PT.Indoteknik'
+                  type='text'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.company?.message}
+                </div>
+              </div>
             </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>Alamat*</label>
-              <input
-                {...register('address')}
-                placeholder='jl. Bandengan no.31 '
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.address?.message}</div>
+            <div className=''>
+              <div>
+                <label className='form-label mb-2'>Alamat*</label>
+                <input
+                  {...register('address')}
+                  placeholder='jl. Bandengan no.31 '
+                  type='text'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.address?.message}
+                </div>
+              </div>
             </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>No. Telp *</label>
-              <input
-                {...register('phone')}
-                placeholder='021-XXXX'
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.message}</div>
+            <div className=''>
+              <div>
+                <label className='form-label mb-2'>No. Telp *</label>
+                <input
+                  {...register('phone')}
+                  placeholder='021-XXXX'
+                  type='text'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.phone?.message}
+                </div>
+              </div>
             </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>Kota*</label>
-              <Controller
-                name='city'
-                control={control}
-                render={(props) => <HookFormSelect {...props} options={cities} />}
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div>
+            <div className=''>
+              <div>
+                <label className='form-label mb-2'>Kota*</label>
+                <Controller
+                  name='city'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect {...props} options={cities} />
+                  )}
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.city?.message}
+                </div>
+              </div>
             </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>Unit Perusahaan*</label>
-              <Controller
-                name='company_unit'
-                control={control}
-                render={(props) => <HookFormSelect {...props} options={company_unit} />}
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.company_unit?.message}
+            <div className=''>
+              <div>
+                <label className='form-label mb-2'>Unit Perusahaan*</label>
+                <Controller
+                  name='company_unit'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect {...props} options={company_unit} />
+                  )}
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.company_unit?.message}
+                </div>
               </div>
             </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>Website *</label>
-              <input
-                {...register('website')}
-                placeholder='https://indoteknik.com'
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.website?.message}</div>
+            <div className=''>
+              <div>
+                <label className='form-label mb-2'>Website *</label>
+                <input
+                  {...register('website')}
+                  placeholder='https://indoteknik.com'
+                  type='text'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.website?.message}
+                </div>
+              </div>
             </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>Contact Person*</label>
-              <input
-                {...register('cp')}
-                placeholder='Jhone doe'
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.cp?.message}</div>
+            <div className=''>
+              <div>
+                <label className='form-label mb-2'>Contact Person*</label>
+                <input
+                  {...register('cp')}
+                  placeholder='Jhone doe'
+                  type='text'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.cp?.message}
+                </div>
+              </div>
             </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>No HP *</label>
-              <input
-                {...register('mobile')}
-                placeholder='628XXXXXXX'
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div>
+            <div className=''>
+              <div>
+                <label className='form-label mb-2'>No HP *</label>
+                <input
+                  {...register('mobile')}
+                  placeholder='628XXXXXXX'
+                  type='text'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.mobile?.message}
+                </div>
+              </div>
             </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>Alamat Email *</label>
-              <input
-                {...register('email')}
-                placeholder='contoh@email.com'
-                type='email'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
+            <div className=''>
+              <div>
+                <label className='form-label mb-2'>Alamat Email *</label>
+                <input
+                  {...register('email')}
+                  placeholder='contoh@email.com'
+                  type='email'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.email?.message}
+                </div>
+              </div>
             </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
+            <div className=''>
+              <div>
+                <ReCAPTCHA
+                  ref={recaptchaRef}
+                  sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+                />
+              </div>
             </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
-                Simpan
-              </button>
+            <div className=''>
+              <div>
+                <button
+                  type='submit'
+                  className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
+                >
+                  Simpan
+                </button>
+              </div>
             </div>
-          </div>
-        </form>
+          </form>
+          <PageContent path='/daftar-merchant' />
+        </div>
       </div>
     </div>
-  )
-}
+  );
+};
 const validationSchema = Yup.object().shape({
   company: Yup.string().required('Harus di-isi'),
-  email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
+  email: Yup.string()
+    .email('Format harus seperti contoh@email.com')
+    .required('Harus di-isi'),
   phone: Yup.string().required('Harus di-isi'),
   cp: Yup.string().required('Harus di-isi'),
   city: Yup.string().required('Harus di-isi'),
   company_unit: Yup.string().required('Harus di-isi'),
   address: Yup.string().required('Harus di-isi'),
   website: Yup.string().required('Harus di-isi'),
-  mobile: Yup.string().required('Harus di-isi')
-})
+  mobile: Yup.string().required('Harus di-isi'),
+});
 const defaultValues = {
   company: '',
   email: '',
@@ -258,7 +296,7 @@ const defaultValues = {
   cp: '',
   address: '',
   website: '',
-  mobile: ''
-}
+  mobile: '',
+};
 
-export default CreateMerchant
+export default CreateMerchant;
diff --git a/src/lib/form/components/PembayaranTempo.jsx b/src/lib/form/components/PembayaranTempo.jsx
index ffdb0961..8c624fe2 100644
--- a/src/lib/form/components/PembayaranTempo.jsx
+++ b/src/lib/form/components/PembayaranTempo.jsx
@@ -6,6 +6,8 @@ import { useForm } from 'react-hook-form'
 import { toast } from 'react-hot-toast'
 import * as Yup from 'yup'
 import createLeadApi from '../api/createLeadApi'
+import PageContent from '@/lib/content/components/PageContent'
+
 
 const PembayaranTempo = () => {
   const {
@@ -134,6 +136,7 @@ const PembayaranTempo = () => {
 
           <div></div>
         </form>
+        <PageContent path='/pembayaran-tempo' />
       </div>
     </div>
   )
diff --git a/src/lib/form/components/RequestForQuotation.jsx b/src/lib/form/components/RequestForQuotation.jsx
index 31efb5d6..fa526d5f 100644
--- a/src/lib/form/components/RequestForQuotation.jsx
+++ b/src/lib/form/components/RequestForQuotation.jsx
@@ -9,6 +9,7 @@ import { toast } from 'react-hot-toast'
 import * as Yup from 'yup'
 import createLeadApi from '../api/createLeadApi'
 import getFileBase64 from '@/core/utils/getFileBase64'
+import PageContent from '@/lib/content/components/PageContent'
 
 const RequestForQuotation = () => {
   const {
@@ -79,7 +80,7 @@ const RequestForQuotation = () => {
     <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
       <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Request for Quotation</h1>
 
-      <div className='w-full grid grid-cols-1 md:grid-cols-2'>
+      <div className='w-full grid grid-cols-1 md:grid-cols-2 gap-x-2'>
         <form onSubmit={handleSubmit(onSubmitHandler)} className='grid grid-cols-1 gap-y-6'>
           <div
             className='flex items-center bg-blue-100 border border-blue-300 text-blue-500 font-medium px-4 py-3 rounded leading-6'
@@ -176,6 +177,7 @@ const RequestForQuotation = () => {
             Simpan
           </button>
         </form>
+        <PageContent path='/request-for-quotation' />
       </div>
     </div>
   )
diff --git a/src/lib/form/components/SuratDukungan.jsx b/src/lib/form/components/SuratDukungan.jsx
index 360dd838..d73c3fab 100644
--- a/src/lib/form/components/SuratDukungan.jsx
+++ b/src/lib/form/components/SuratDukungan.jsx
@@ -1,12 +1,14 @@
-import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
-import cityApi from '@/lib/address/api/cityApi'
-import { yupResolver } from '@hookform/resolvers/yup'
-import React, { useEffect, useRef, useState } from 'react'
-import ReCAPTCHA from 'react-google-recaptcha'
-import { Controller, useForm } from 'react-hook-form'
-import { toast } from 'react-hot-toast'
-import * as Yup from 'yup'
-import createLeadsApi from '../api/createLeadApi'
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import cityApi from '@/lib/address/api/cityApi';
+import { yupResolver } from '@hookform/resolvers/yup';
+import React, { useEffect, useRef, useState } from 'react';
+import ReCAPTCHA from 'react-google-recaptcha';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import * as Yup from 'yup';
+import createLeadsApi from '../api/createLeadApi';
+
+import PageContent from '@/lib/content/components/PageContent';
 
 const CreateSuratDukungan = () => {
   const {
@@ -14,30 +16,33 @@ const CreateSuratDukungan = () => {
     handleSubmit,
     formState: { errors },
     control,
-    reset
+    reset,
   } = useForm({
     resolver: yupResolver(validationSchema),
-    defaultValues
-  })
-  const [cities, setCities] = useState([])
-  const [company_unit, setCompany_unit] = useState([])
+    defaultValues,
+  });
+  const [cities, setCities] = useState([]);
+  const [company_unit, setCompany_unit] = useState([]);
 
-  const recaptchaRef = useRef(null)
+  const recaptchaRef = useRef(null);
 
   useEffect(() => {
     const loadCities = async () => {
-      let dataCities = await cityApi()
-      dataCities = dataCities.map((city) => ({ value: city.id, label: city.name }))
-      setCities(dataCities)
-    }
-    loadCities()
-  }, [])
+      let dataCities = await cityApi();
+      dataCities = dataCities.map((city) => ({
+        value: city.id,
+        label: city.name,
+      }));
+      setCities(dataCities);
+    };
+    loadCities();
+  }, []);
 
   const onSubmitHandler = async (values) => {
-    const recaptchaValue = recaptchaRef.current.getValue()
+    const recaptchaValue = recaptchaRef.current.getValue();
     if (!recaptchaValue) {
-      toast.error('Catcha harus diisi')
-      return
+      toast.error('Catcha harus diisi');
+      return;
     }
     const data = {
       ...values,
@@ -61,19 +66,21 @@ const CreateSuratDukungan = () => {
         ' \r\n  Alamat 2 : ' +
         values.address2 +
         'Keterangan  : ' +
-        values.description
-    }
+        values.description,
+    };
 
-    const create_leads = await createLeadsApi({ data })
+    const create_leads = await createLeadsApi({ data });
     if (create_leads) {
-      toast.success('Berhasil menambahkan alamat')
-      reset()
-      recaptchaRef.current.reset()
+      toast.success('Berhasil menambahkan alamat');
+      reset();
+      recaptchaRef.current.reset();
     }
-  }
+  };
   return (
     <div className='container mx-auto p-4 md:p-0 my-0 md:my-10'>
-      <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>Form Surat Dukungan</h1>
+      <h1 className='text-h-sm md:text-title-sm font-semibold mb-6'>
+        Form Surat Dukungan
+      </h1>
       <div className='w-full  p-4 bg-white border border-gray_r-6 rounded'>
         <div
           className='flex items-center bg-blue-100 border border-blue-400 text-blue-500 font-bold px-4 py-3 mb-4'
@@ -81,132 +88,168 @@ const CreateSuratDukungan = () => {
         >
           <p>Lengkapi form berikut untuk melakukan konfirmasi pembayaran.</p>
         </div>
-        <div className=' w-full md:w-[50%] p-4 bg-gray-50 border border-gray_r-6 rounded text-center'>
-          <h1>Data Peserta</h1>
-        </div>
-        <form onSubmit={handleSubmit(onSubmitHandler)}>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>Nama Perusahan *</label>
-              <input
-                {...register('company')}
-                placeholder='PT.Indoteknik'
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.company?.message}</div>
-            </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>Alamat*</label>
-              <input
-                {...register('address')}
-                placeholder='jl. Bandengan no.31 '
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.address?.message}</div>
-            </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>No. Telp *</label>
-              <input
-                {...register('phone')}
-                placeholder='021-XXXX'
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.phone?.message}</div>
-            </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>NPWP *</label>
-              <input
-                {...register('npwp')}
-                placeholder='npwp number'
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.npwp?.message}</div>
-            </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>Alamat Email *</label>
-              <input
-                {...register('email')}
-                placeholder='contoh@email.com'
-                type='email'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
+        <div className=' w-full grid grid-cols-2 gap-x-2'>
+          <div className='group'>
+            <div className=' w-full md:w-[50%] p-4 bg-gray-50 border border-gray_r-6 rounded text-center'>
+              <h1>Data Peserta</h1>
             </div>
-          </div>
-          <div className='w-[50%] mt-10 p-4 bg-gray-50 border border-gray_r-6 rounded text-center'>
-            <h1>Data Peserta</h1>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>Pengadaan *</label>
-              <input {...register('pengadaan')} placeholder='' type='text' className='form-input' />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.pengadaan?.message}</div>
-            </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>Alamat *</label>
-              <textarea
-                {...register('address2')}
-                placeholder=''
-                type='text'
-                className='form-input  h-[120px]'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.address2?.message}</div>
-            </div>
-          </div>
-          <div className='w-[50%] mt-10 p-4 bg-gray-50 border border-gray_r-6 rounded text-center'>
-            <h1>Data Produk</h1>
-          </div>
+            <form onSubmit={handleSubmit(onSubmitHandler)}>
+              <div className=''>
+                <div>
+                  <label className='form-label mb-2'>Nama Perusahan *</label>
+                  <input
+                    {...register('company')}
+                    placeholder='PT.Indoteknik'
+                    type='text'
+                    className='form-input'
+                  />
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.company?.message}
+                  </div>
+                </div>
+              </div>
+              <div className=''>
+                <div>
+                  <label className='form-label mb-2'>Alamat*</label>
+                  <input
+                    {...register('address')}
+                    placeholder='jl. Bandengan no.31 '
+                    type='text'
+                    className='form-input'
+                  />
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.address?.message}
+                  </div>
+                </div>
+              </div>
+              <div className=''>
+                <div>
+                  <label className='form-label mb-2'>No. Telp *</label>
+                  <input
+                    {...register('phone')}
+                    placeholder='021-XXXX'
+                    type='text'
+                    className='form-input'
+                  />
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.phone?.message}
+                  </div>
+                </div>
+              </div>
+              <div className=''>
+                <div>
+                  <label className='form-label mb-2'>NPWP *</label>
+                  <input
+                    {...register('npwp')}
+                    placeholder='npwp number'
+                    type='text'
+                    className='form-input'
+                  />
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.npwp?.message}
+                  </div>
+                </div>
+              </div>
+              <div className=''>
+                <div>
+                  <label className='form-label mb-2'>Alamat Email *</label>
+                  <input
+                    {...register('email')}
+                    placeholder='contoh@email.com'
+                    type='email'
+                    className='form-input'
+                  />
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.email?.message}
+                  </div>
+                </div>
+              </div>
+              <div className='w-[50%] mt-10 p-4 bg-gray-50 border border-gray_r-6 rounded text-center'>
+                <h1>Data Peserta</h1>
+              </div>
+              <div className=''>
+                <div>
+                  <label className='form-label mb-2'>Pengadaan *</label>
+                  <input
+                    {...register('pengadaan')}
+                    placeholder=''
+                    type='text'
+                    className='form-input'
+                  />
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.pengadaan?.message}
+                  </div>
+                </div>
+              </div>
+              <div className=''>
+                <div>
+                  <label className='form-label mb-2'>Alamat *</label>
+                  <textarea
+                    {...register('address2')}
+                    placeholder=''
+                    type='text'
+                    className='form-input  h-[120px]'
+                  />
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.address2?.message}
+                  </div>
+                </div>
+              </div>
+              <div className='mt-10 p-4 bg-gray-50 border border-gray_r-6 rounded text-center'>
+                <h1>Data Produk</h1>
+              </div>
 
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <label className='form-label mb-2'>Produk</label>
-              <textarea {...register('description')} type='text' className='form-input h-[120px]' />
-              <div className='text-caption-2 text-danger-500 mt-1'>
-                {errors.description?.message}
+              <div className=''>
+                <div>
+                  <label className='form-label mb-2'>Produk</label>
+                  <textarea
+                    {...register('description')}
+                    type='text'
+                    className='form-input h-[120px]'
+                  />
+                  <div className='text-caption-2 text-danger-500 mt-1'>
+                    {errors.description?.message}
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <ReCAPTCHA ref={recaptchaRef} sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE} />
-            </div>
-          </div>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mt-4'>
-            <div>
-              <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
-                Simpan
-              </button>
-            </div>
+              <div className=''>
+                <div>
+                  <ReCAPTCHA
+                    ref={recaptchaRef}
+                    sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_GOOGLE}
+                  />
+                </div>
+              </div>
+              <div className=''>
+                <div>
+                  <button
+                    type='submit'
+                    className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
+                  >
+                    Simpan
+                  </button>
+                </div>
+              </div>
+            </form>
           </div>
-        </form>
+          <PageContent path='/surat-dukungan'/>
+        </div>
       </div>
     </div>
-  )
-}
+  );
+};
 const validationSchema = Yup.object().shape({
   company: Yup.string().required('Harus di-isi'),
-  email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
+  email: Yup.string()
+    .email('Format harus seperti contoh@email.com')
+    .required('Harus di-isi'),
   phone: Yup.string().required('Harus di-isi'),
   npwp: Yup.string().required('Harus di-isi'),
   pengadaan: Yup.string().required('Harus di-isi'),
   email: Yup.string().required('Harus di-isi'),
   address: Yup.string().required('Harus di-isi'),
-  address2: Yup.string().required('Harus di-isi')
-})
+  address2: Yup.string().required('Harus di-isi'),
+});
 const defaultValues = {
   company: '',
   email: '',
@@ -215,7 +258,7 @@ const defaultValues = {
   npwp: '',
   email: '',
   address: '',
-  address2: ''
-}
+  address2: '',
+};
 
-export default CreateSuratDukungan
+export default CreateSuratDukungan;