From 689ee880bde0fae548e55316789e8bae852fe7d7 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 11 Sep 2024 11:40:32 +0700
Subject: <iman> update mobile view

---
 .../modules/register/components/FormBisnis.tsx     | 79 ++++++++++++++--------
 1 file changed, 52 insertions(+), 27 deletions(-)

(limited to 'src-migrate/modules/register')

diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx
index 2080ae75..bc3e1405 100644
--- a/src-migrate/modules/register/components/FormBisnis.tsx
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -292,7 +292,14 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
           />
         </div>
       </BottomPopup>
-      <form className='mt-6 grid grid-cols-1 gap-y-4' onSubmit={handleSubmit}>
+      <form
+        className={` ${
+          type === 'bisnis'
+            ? 'mt-6 grid grid-cols-1 gap-y-4'
+            : 'mt-6 grid grid-rows-5 grid-flow-col gap-x-4 gap-y-2'
+        }`}
+        onSubmit={handleSubmit}
+      >
         <div>
           <label htmlFor='email' className='font-bold'>
             Email Bisnis{' '}
@@ -307,7 +314,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             name='email_partner'
             placeholder='example@email.com'
             value={!required ? form.email_partner : ''}
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input max-h-11 mt-3 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
             disabled={required}
             contentEditable={required}
             readOnly={required}
@@ -323,12 +332,12 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
           )}
         </div>
 
-        <div className=''>
+        <div>
           <label className='font-bold' htmlFor='company'>
             Nama Bisnis
           </label>
-          <div className='flex justify-between items-start gap-2 max-h-12 min-h-12 text-sm'>
-            <div className='w-4/5 pr-1'>
+          <div className='flex justify-between items-start gap-2 max-h-12 min-h-12 text-sm mt-3'>
+            <div className='w-4/5 pr-1 max-h-11'>
               <Controller
                 name='companyType'
                 control={control}
@@ -347,12 +356,12 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
                 </span>
               )}
             </div>
-            <div className='w-[120%]'>
+            <div className='w-[120%] '>
               <input
                 type='text'
                 name='business_name'
                 id='business_name'
-                className='form-input h-12 '
+                className='form-input max-h-11'
                 placeholder='Nama Perusahaan'
                 autoCapitalize='true'
                 value={form.business_name}
@@ -367,22 +376,24 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
           </div>
         </div>
 
-        <div className='mt-8 sm:mt-8'>
+        <div className='mt-8 md:mt-0'>
           <label className='font-bold' htmlFor='business_name'>
             Klasifikasi Jenis Usaha
           </label>
-          <Controller
-            name='industry_id'
-            control={control}
-            render={(props) => (
-              <HookFormSelect
-                {...props}
-                options={industries}
-                disabled={required}
-                placeholder={'Select industry'}
-              />
-            )}
-          />
+          <div className='mt-5 max-h-10'>
+            <Controller
+              name='industry_id'
+              control={control}
+              render={(props) => (
+                <HookFormSelect
+                  {...props}
+                  options={industries}
+                  disabled={required}
+                  placeholder={'Select industry'}
+                />
+              )}
+            />
+          </div>
           {selectedCategory && (
             <span className='text-gray_r-11 text-xs'>
               Kategori : {selectedCategory}
@@ -404,7 +415,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             name='alamat_bisnis'
             placeholder='Masukan alamat bisnis anda'
             value={!required ? form.alamat_bisnis : ''}
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input mt-3 max-h-11 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
             disabled={required}
             contentEditable={required}
             readOnly={required}
@@ -431,7 +444,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             name='nama_wajib_pajak'
             placeholder='Masukan nama lengkap anda'
             value={!required ? form.nama_wajib_pajak : ''}
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input mt-3 max-h-11 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
             disabled={required}
             contentEditable={required}
             readOnly={required}
@@ -483,7 +498,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
                   : form.alamat_wajib_pajak
                 : ''
             }
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input max-h-11 mt-3 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
             disabled={isChekBox || required}
             contentEditable={required}
             readOnly={required}
@@ -510,7 +527,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             type='tel'
             id='npwp'
             name='npwp'
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input max-h-11 mt-3 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
             disabled={required}
             contentEditable={required}
             readOnly={required}
@@ -567,7 +586,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             type='tel'
             id='sppkp'
             name='sppkp'
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input max-h-11 mt-3 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
             disabled={required}
             contentEditable={required}
             readOnly={required}
@@ -594,7 +615,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             type='file'
             id='npwp_document'
             name='npwp_document'
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input ${
+              type === 'bisnis' ? '' : 'border-none'
+            } mt-3 ${required ? 'cursor-no-drop' : ''}`}
             disabled={required}
             contentEditable={required}
             readOnly={required}
@@ -619,7 +642,9 @@ const form: React.FC<FormProps> = ({ type, required, isPKP, chekValid }) => {
             type='file'
             id='sppkp_document'
             name='sppkp_document'
-            className={`form-input mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            className={`form-input ${
+              type === 'bisnis' ? '' : 'border-none'
+            } mt-3 ${required ? 'cursor-no-drop' : ''}`}
             disabled={required}
             contentEditable={required}
             readOnly={required}
-- 
cgit v1.2.3