Merge branch 'release' into CR/product_detail

29 files changed, 2279 insertions, 647 deletions

diff --git a/public/images/NO-SPPKP-FORMAT-TEMPLATE.jpg b/public/images/NO-SPPKP-FORMAT-TEMPLATE.jpg
new file mode 100644
index 00000000..63001bb5
--- /dev/null
+++ b/public/images/NO-SPPKP-FORMAT-TEMPLATE.jpg
diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index b834f97a..38e9c810 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -1,179 +1,169 @@
-import { ChangeEvent, useMemo } from "react";
-import { useMutation } from "react-query";
-import { useRegisterStore } from "../stores/useRegisterStore";
-import { RegisterProps } from "~/types/auth";
-import { registerUser } from "~/services/auth";
-import TermCondition from "./TermCondition";
-import FormCaptcha from "./FormCaptcha";
-import { useRouter } from "next/router";
-import { UseToastOptions, useToast } from "@chakra-ui/react";
-import Link from "next/link";
-
-const Form = () => {
-  const {
-    form,
-    isCheckedTNC,
-    isValidCaptcha,
-    errors,
-    updateForm,
-    validate,
-  } = useRegisterStore()
-
-  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
-
-  const router = useRouter()
-  const toast = useToast()
+import { ChangeEvent, useMemo, useEffect, useRef, useState } from 'react';
+import { useMutation } from 'react-query';
+import { useRegisterStore } from '../stores/useRegisterStore';
+import { RegisterProps } from '~/types/auth';
+import { registerUser } from '~/services/auth';
+import TermCondition from './TermCondition';
+import FormCaptcha from './FormCaptcha';
+import { useRouter } from 'next/router';
+import { UseToastOptions, useToast } from '@chakra-ui/react';
+import Link from 'next/link';
+
+interface FormProps {
+  type: string;
+  required: boolean;
+  isBisnisRegist: boolean;
+  chekValid: boolean;
+  buttonSubmitClick: boolean;
+}
+
+const Form: React.FC<FormProps> = ({
+  type,
+  required,
+  isBisnisRegist = false,
+  chekValid,
+  buttonSubmitClick,
+}) => {
+  const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } =
+    useRegisterStore();
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
+
+  const router = useRouter();
+  const toast = useToast();
+
+  const emailRef = useRef<HTMLInputElement>(null);
+  const nameRef = useRef<HTMLInputElement>(null);
+  const passwordRef = useRef<HTMLInputElement>(null);
+  const phoneRef = useRef<HTMLInputElement>(null);
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
-    updateForm(name, value)
-    validate()
-  }
-
-  const mutation = useMutation({
-    mutationFn: (data: RegisterProps) => registerUser(data)
-  })
-
-  const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
-    e.preventDefault()
-
-    const response = await mutation.mutateAsync(form)
-
-    if (response?.register === true) {
-      const urlParams = new URLSearchParams({
-        activation: 'otp',
-        email: form.email,
-        redirect: (router.query?.next || '/') as string
-      })
-      router.push(`${router.route}?${urlParams}`)
-    }
-
-    const toastProps: UseToastOptions = {
-      duration: 5000,
-      isClosable: true
-    }
-
-    switch (response?.reason) {
-      case 'EMAIL_USED':
-        toast({
-          ...toastProps,
-          title: 'Email sudah digunakan',
-          status: 'warning'
-        })
-        break;
-      case 'NOT_ACTIVE':
-        const activationUrl = `${router.route}?activation=email`
-        toast({
-          ...toastProps,
-          title: 'Akun belum aktif',
-          description: <>Akun sudah terdaftar namun belum aktif. <Link href={activationUrl} className="underline">Klik untuk aktivasi akun</Link></>,
-          status: 'warning'
-        })
-        break
-    }
-  }
+    updateForm(name, value);
+    validate();
+  };
+  useEffect(() => {
+    const loadIndustries = async () => {
+      if (!isFormValid) {
+        const options: ScrollIntoViewOptions = {
+          behavior: 'smooth',
+          block: 'center',
+        };
+
+        if (errors.email_partner && emailRef.current) {
+          emailRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.name && nameRef.current) {
+          nameRef.current.scrollIntoView(options);
+          return;
+        }
+
+        if (errors.password && passwordRef.current) {
+          passwordRef.current.scrollIntoView(options);
+          return;
+        }
+
+        if (errors.phone && phoneRef.current) {
+          phoneRef.current.scrollIntoView(options);
+          return;
+        }
+      }
+    };
+    loadIndustries();
+  }, [buttonSubmitClick, chekValid]);
 
   return (
-    <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
+    <form className='mt-6 grid grid-cols-1 gap-y-4'>
       <div>
-        <label htmlFor="company">
-          Nama Perusahaan <span className='text-gray_r-11'>(opsional)</span>
+        <label htmlFor='name' className='text-black font-bold'>
+          Nama Lengkap
         </label>
 
         <input
-          type="text"
-          name="company"
-          id="company"
-          className="form-input mt-3"
-          placeholder="cth: INDOTEKNIK DOTCOM GEMILANG"
-          autoCapitalize="true"
-          value={form.company}
-          onChange={handleInputChange}
-        />
-      </div>
-
-      <div>
-        <label htmlFor='name'>Nama Lengkap</label>
-
-        <input
           type='text'
           id='name'
           name='name'
-          className='form-input mt-3'
+          className='form-input mt-3 transition-all duration-700'
           placeholder='Masukan nama lengkap anda'
           value={form.name}
+          ref={nameRef}
           onChange={handleInputChange}
-          aria-invalid={!!errors.name}
-        />
-
-        {!!errors.name && <span className="form-msg-danger">{errors.name}</span>}
-      </div>
-
-      <div>
-        <label htmlFor='phone'>No Handphone</label>
-
-        <input
-          type='tel'
-          id='phone'
-          name='phone'
-          className='form-input mt-3'
-          placeholder='08xxxxxxxx'
-          value={form.phone}
-          onChange={handleInputChange}
-          aria-invalid={!!errors.phone}
+          aria-invalid={chekValid && !!errors.name}
         />
 
-        {!!errors.phone && <span className="form-msg-danger">{errors.phone}</span>}
+        {chekValid && !!errors.name && (
+          <span className='form-msg-danger'>{errors.name}</span>
+        )}
       </div>
 
       <div>
-        <label htmlFor='email'>Alamat Email</label>
+        <label htmlFor='email' className='text-black font-bold'>
+          Alamat Email
+        </label>
 
         <input
           type='text'
           id='email'
           name='email'
-          className='form-input mt-3'
+          className='form-input mt-3 transition-all duration-500'
           placeholder='Masukan alamat email anda'
           value={form.email}
+          ref={emailRef}
           onChange={handleInputChange}
-          autoComplete="username"
-          aria-invalid={!!errors.email}
+          autoComplete='username'
+          aria-invalid={chekValid && !!errors.email}
         />
 
-        {!!errors.email && <span className="form-msg-danger">{errors.email}</span>}
+        {chekValid && !!errors.email && (
+          <span className='form-msg-danger'>{errors.email}</span>
+        )}
       </div>
 
       <div>
-        <label htmlFor='password'>Kata Sandi</label>
+        <label htmlFor='password' className='text-black font-bold'>
+          Kata Sandi
+        </label>
         <input
           type='password'
           name='password'
           id='password'
-          className='form-input mt-3'
+          className='form-input mt-3 transition-all duration-500'
           placeholder='••••••••••••'
           value={form.password}
+          ref={passwordRef}
           onChange={handleInputChange}
-          autoComplete="current-password"
-          aria-invalid={!!errors.password}
+          autoComplete='current-password'
+          aria-invalid={chekValid && !!errors.password}
         />
 
-        {!!errors.password && <span className="form-msg-danger">{errors.password}</span>}
+        {chekValid && !!errors.password && (
+          <span className='form-msg-danger'>{errors.password}</span>
+        )}
       </div>
 
-      <FormCaptcha />
+      <div>
+        <label htmlFor='phone' className='text-black font-bold'>
+          No Handphone
+        </label>
 
-      <TermCondition />
+        <input
+          type='tel'
+          id='phone'
+          name='phone'
+          className='form-input mt-3 transition-all duration-500'
+          placeholder='08xxxxxxxx'
+          value={form.phone}
+          ref={phoneRef}
+          onChange={handleInputChange}
+          aria-invalid={chekValid && !!errors.phone}
+        />
 
-      <button
-        type="submit"
-        className="btn-yellow w-full mt-2"
-        disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
-      >
-        {mutation.isLoading ? 'Loading...' : 'Daftar'}
-      </button>
+        {chekValid && !!errors.phone && (
+          <span className='form-msg-danger'>{errors.phone}</span>
+        )}
+      </div>
     </form>
-  )
-}
+  );
+};
 
-export default Form
\ No newline at end of file
+export default Form;
diff --git a/src-migrate/modules/register/components/FormBisnis.tsx b/src-migrate/modules/register/components/FormBisnis.tsx
new file mode 100644
index 00000000..5ee19e58
--- /dev/null
+++ b/src-migrate/modules/register/components/FormBisnis.tsx
@@ -0,0 +1,715 @@
+import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react';
+import { useMutation } from 'react-query';
+import { useRegisterStore } from '../stores/useRegisterStore';
+import { RegisterProps } from '~/types/auth';
+import { registerUser } from '~/services/auth';
+import { useRouter } from 'next/router';
+import {
+  Button,
+  Checkbox,
+  UseToastOptions,
+  color,
+  useToast,
+} from '@chakra-ui/react';
+import Link from 'next/link';
+import getFileBase64 from '@/core/utils/getFileBase64';
+import { Controller, useForm } from 'react-hook-form';
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import odooApi from '~/libs/odooApi';
+import { toast } from 'react-hot-toast';
+import { EyeIcon } from '@heroicons/react/24/outline';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import Image from 'next/image';
+import useDevice from '@/core/hooks/useDevice';
+interface FormProps {
+  type: string;
+  required: boolean;
+  isPKP: boolean;
+  chekValid: boolean;
+  buttonSubmitClick: boolean;
+}
+
+interface industry_id {
+  label: string;
+  value: string;
+  category: string;
+}
+
+interface companyType {
+  value: string;
+  label: string;
+}
+
+const form: React.FC<FormProps> = ({
+  type,
+  required,
+  isPKP,
+  chekValid,
+  buttonSubmitClick,
+}) => {
+  const { form, errors, updateForm, validate } = useRegisterStore();
+  const { control, watch, setValue } = useForm();
+  const [selectedCategory, setSelectedCategory] = useState<string>('');
+  const [isChekBox, setIsChekBox] = useState<boolean>(false);
+  const [isExample, setIsExample] = useState<boolean>(false);
+  const { isDesktop, isMobile } = useDevice();
+  // Inside your component
+  const [formattedNpwp, setFormattedNpwp] = useState<string>(''); // State for formatted NPWP
+  const [unformattedNpwp, setUnformattedNpwp] = useState<string>(''); // State for unformatted NPWP
+
+  const [industries, setIndustries] = useState<industry_id[]>([]);
+  const [companyTypes, setCompanyTypes] = useState<companyType[]>([]);
+
+  const router = useRouter();
+  const toast = useToast();
+
+  const emailRef = useRef<HTMLInputElement>(null);
+  const businessNameRef = useRef<HTMLInputElement>(null);
+  const companyTypeRef = useRef<HTMLInputElement>(null);
+  const industryRef = useRef<HTMLDivElement>(null);
+  const addressRef = useRef<HTMLInputElement>(null);
+  const namaWajibPajakRef = useRef<HTMLInputElement>(null);
+  const alamatWajibPajakRef = useRef<HTMLInputElement>(null);
+  const npwpRef = useRef<HTMLInputElement>(null);
+  const sppkpRef = useRef<HTMLInputElement>(null);
+  const docsSppkpRef = useRef<HTMLInputElement>(null);
+  const docsNpwpRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const loadCompanyTypes = async () => {
+      const dataCompanyTypes = await odooApi(
+        'GET',
+        '/api/v1/partner/company_type'
+      );
+      setCompanyTypes(
+        dataCompanyTypes?.map((o: { id: any; name: any }) => ({
+          value: o.id,
+          label: o.name,
+        }))
+      );
+    };
+    loadCompanyTypes();
+  }, []);
+
+  useEffect(() => {
+    const selectedCompanyType = companyTypes.find(
+      (company) => company.value === watch('companyType')
+    );
+    if (selectedCompanyType) {
+      updateForm('company_type_id', `${selectedCompanyType?.value}`);
+      validate();
+    }
+  }, [watch('companyType'), companyTypes]);
+
+  useEffect(() => {
+    const selectedIndustryType = industries.find(
+      (industry) => industry.value === watch('industry_id')
+    );
+    if (selectedIndustryType) {
+      updateForm('industry_id', `${selectedIndustryType?.value}`);
+      setSelectedCategory(selectedIndustryType.category);
+      validate();
+    }
+  }, [watch('industry_id'), industries]);
+
+  useEffect(() => {
+    const loadIndustries = async () => {
+      const dataIndustries = await odooApi('GET', '/api/v1/partner/industry');
+      setIndustries(
+        dataIndustries?.map((o: { id: any; name: any; category: any }) => ({
+          value: o.id,
+          label: o.name,
+          category: o.category,
+        }))
+      );
+    };
+    loadIndustries();
+  }, []);
+
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+
+    updateForm('type_acc', 'business');
+    updateForm('is_pkp', `${isPKP}`);
+
+    // Update form dengan nilai terbaru dari input yang berubah
+    updateForm(name, value);
+
+    // Jika checkbox aktif, sinkronisasi alamat_wajib_pajak dengan alamat_bisnis
+    if (isChekBox) {
+      if (name === 'alamat_wajib_pajak') {
+        updateForm('alamat_bisnis', value);
+      } else if (name === 'alamat_bisnis') {
+        updateForm('alamat_wajib_pajak', value);
+      }
+    }
+
+    // Validasi setelah perubahan dilakukan
+    validate();
+  };
+
+  const handleInputChangeNpwp = (event: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    updateForm('type_acc', `business`);
+    updateForm('is_pkp', `${isPKP}`);
+    updateForm('npwp', value);
+    validate();
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setIsChekBox(!isChekBox);
+  };
+
+  const formatNpwp = (value: string) => {
+    try {
+      const cleaned = ('' + value).replace(/\D/g, '');
+      let match;
+      if (cleaned.length <= 15) {
+        match = cleaned.match(
+          /(\d{0,2})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/
+        );
+      } else {
+        match = cleaned.match(
+          /(\d{0,3})?(\d{0,3})?(\d{0,3})?(\d{0,1})?(\d{0,3})?(\d{0,3})$/
+        );
+      }
+
+      if (match) {
+        return [
+          match[1],
+          match[2] ? '.' : '',
+          match[2],
+          match[3] ? '.' : '',
+          match[3],
+          match[4] ? '.' : '',
+          match[4],
+          match[5] ? '-' : '',
+          match[5],
+          match[6] ? '.' : '',
+          match[6],
+        ].join('');
+      }
+
+      // If match is null, return the original cleaned string or handle as needed
+      return cleaned;
+    } catch (error) {
+      // Handle error or return a default value
+      console.error('Error formatting NPWP:', error);
+      return value;
+    }
+  };
+
+  useEffect(() => {
+    if (isChekBox) {
+      updateForm('isChekBox', 'true');
+      updateForm('alamat_wajib_pajak', `${form.alamat_bisnis}`);
+      validate();
+    } else {
+      updateForm('isChekBox', 'false');
+      validate();
+    }
+  }, [isChekBox]);
+
+  const handleFileChange = async (event: ChangeEvent<HTMLInputElement>) => {
+    const toastProps: UseToastOptions = {
+      duration: 5000,
+      isClosable: true,
+      position: 'top',
+    };
+
+    let fileBase64 = '';
+    const { name } = event.target;
+    const file = event.target.files?.[0];
+
+    // Allowed file extensions
+    const allowedExtensions = ['pdf', 'doc', 'docx', 'png', 'jpg', 'jpeg'];
+
+    if (file) {
+      const fileExtension = file.name.split('.').pop()?.toLowerCase(); // Extract file extension
+
+      // Check if the file extension is allowed
+      if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+        toast({
+          ...toastProps,
+          title:
+            'Format file yang diijinkan adalah .pdf, .doc, .docx, .png, .jpg, atau .jpeg',
+          status: 'error',
+        });
+        event.target.value = '';
+        return;
+      }
+
+      // Check for file size
+      if (file.size > 5000000) {
+        toast({
+          ...toastProps,
+          title: 'Maksimal ukuran file adalah 5MB',
+          status: 'error',
+        });
+        event.target.value = '';
+        return;
+      }
+
+      // Convert file to Base64
+      fileBase64 = await getFileBase64(file);
+      updateForm(name, fileBase64); // Update form with the Base64 string
+      validate(); // Perform form validation
+    }
+  };
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
+
+  useEffect(() => {
+    const loadIndustries = async () => {
+      if (!isFormValid) {
+        const options: ScrollIntoViewOptions = {
+          behavior: 'smooth',
+          block: 'center',
+        };
+        if (errors.email_partner && emailRef.current) {
+          emailRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.company_type_id && companyTypeRef.current) {
+          companyTypeRef.current.scrollIntoView(options);
+          return;
+        }
+
+        if (errors.business_name && businessNameRef.current) {
+          businessNameRef.current.scrollIntoView(options);
+          return;
+        }
+
+        if (errors.industry_id && industryRef.current) {
+          industryRef.current.scrollIntoView(options);
+          return;
+        }
+
+        if (errors.alamat_bisnis && addressRef.current) {
+          addressRef.current.scrollIntoView(options);
+          return;
+        }
+
+        if (errors.npwp && npwpRef.current) {
+          npwpRef.current.scrollIntoView(options);
+          return;
+        }
+
+        if (errors.sppkp && sppkpRef.current) {
+          sppkpRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.sppkp_document && docsSppkpRef.current) {
+          docsSppkpRef.current.scrollIntoView(options);
+          return;
+        }
+        if (errors.npwp_document && docsNpwpRef.current) {
+          docsNpwpRef.current.scrollIntoView(options);
+          return;
+        }
+      }
+    };
+    loadIndustries();
+  }, [buttonSubmitClick, chekValid]);
+  return (
+    <>
+      <BottomPopup
+        className=''
+        title='Contoh SPPKP'
+        active={isExample}
+        close={() => setIsExample(false)}
+      >
+        <div className='flex p-2'>
+          <Image
+            src='/images/NO-SPPKP-FORMAT-TEMPLATE.jpg'
+            alt='Contoh SPPKP'
+            className='w-full h-full '
+            width={800}
+            height={800}
+            quality={100}
+          />
+        </div>
+      </BottomPopup>
+      <form
+        className={` ${
+          type === 'bisnis'
+            ? 'mt-6 grid grid-cols-1 gap-y-4'
+            : 'mt-6 grid grid-cols-2 gap-x-4 gap-y-2'
+        }`}
+      >
+        <div>
+          <label htmlFor='email' className='font-bold'>
+            Email Bisnis{' '}
+            {!isPKP && !required && (
+              <span className='font-normal text-gray_r-11'>(opsional)</span>
+            )}
+          </label>
+
+          <input
+            type='text'
+            id='email_partner'
+            name='email_partner'
+            placeholder='example@email.com'
+            value={!required ? form.email_partner : ''}
+            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
+            disabled={required}
+            contentEditable={required}
+            readOnly={required}
+            onChange={handleInputChange}
+            autoComplete='username'
+            ref={emailRef}
+            aria-invalid={
+              chekValid && !required && isPKP && !!errors.email_partner
+            }
+          />
+
+          {chekValid && !required && isPKP && !!errors.email_partner && (
+            <span className='form-msg-danger'>{errors.email_partner}</span>
+          )}
+        </div>
+
+        <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 mt-3'>
+            <div
+              className='w-4/5 pr-1 max-h-11 transition-all duration-500'
+              ref={companyTypeRef}
+            >
+              <Controller
+                name='companyType'
+                control={control}
+                render={(props) => (
+                  <HookFormSelect
+                    {...props}
+                    options={companyTypes}
+                    disabled={required}
+                    placeholder='Badan Usaha'
+                  />
+                )}
+              />
+              {chekValid && !required && !!errors.company_type_id && (
+                <span className='form-msg-danger'>
+                  {errors.company_type_id}
+                </span>
+              )}
+            </div>
+            <div className='w-[120%] '>
+              <input
+                type='text'
+                name='business_name'
+                id='business_name'
+                className='form-input max-h-11 transition-all duration-500'
+                placeholder='Nama Perusahaan'
+                autoCapitalize='true'
+                value={form.business_name}
+                ref={businessNameRef}
+                aria-invalid={chekValid && !!errors.business_name}
+                onChange={handleInputChange}
+              />
+
+              {chekValid && !!errors.business_name && (
+                <span className='form-msg-danger'>{errors.business_name}</span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className='mt-8 md:mt-0'>
+          <label className='font-bold' htmlFor='business_name'>
+            Klasifikasi Jenis Usaha
+          </label>
+          <div
+            className='max-h-10 transition-all duration-500'
+            ref={industryRef}
+          >
+            <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}
+            </span>
+          )}
+          {chekValid && !required && !!errors.industry_id && (
+            <span className='form-msg-danger'>{errors.industry_id}</span>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor='alamat_bisnis' className='font-bold'>
+            Alamat Bisnis
+          </label>
+
+          <input
+            type='text'
+            id='alamat_bisnis'
+            name='alamat_bisnis'
+            placeholder='Masukan alamat bisnis anda'
+            value={!required ? form.alamat_bisnis : ''}
+            className={`form-input mt-3 max-h-11 transition-all duration-500 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
+            disabled={required}
+            contentEditable={required}
+            readOnly={required}
+            ref={addressRef}
+            onChange={handleInputChange}
+            aria-invalid={chekValid && !required && !!errors.alamat_bisnis}
+          />
+
+          {chekValid && !required && !!errors.alamat_bisnis && (
+            <span className='form-msg-danger'>{errors.alamat_bisnis}</span>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor='nama_wajib_pajak' className='font-bold'>
+            Nama Wajib Pajak{' '}
+            {!isPKP && !required && (
+              <span className='font-normal text-gray_r-11'>(opsional)</span>
+            )}
+          </label>
+
+          <input
+            type='text'
+            id='nama_wajib_pajak'
+            name='nama_wajib_pajak'
+            placeholder='Masukan nama lengkap anda'
+            value={!required ? form.nama_wajib_pajak : ''}
+            className={`form-input mt-3 max-h-11 transition-all duration-500${
+              required ? 'cursor-no-drop' : ''
+            }`}
+            disabled={required}
+            contentEditable={required}
+            readOnly={required}
+            onChange={handleInputChange}
+            ref={namaWajibPajakRef}
+            aria-invalid={
+              chekValid && isPKP && !required && !!errors.nama_wajib_pajak
+            }
+          />
+
+          {chekValid && isPKP && !required && !!errors.nama_wajib_pajak && (
+            <span className='form-msg-danger'>{errors.nama_wajib_pajak}</span>
+          )}
+        </div>
+
+        <div>
+          <label
+            htmlFor='alamat_wajib_pajak'
+            className='font-bold flex items-center'
+          >
+            <p>
+              Alamat Wajib Pajak{' '}
+              {!isPKP && !required && (
+                <span className='font-normal text-gray_r-11'>(opsional)</span>
+              )}
+            </p>
+            <div className='flex items-center ml-2 mt-1 '>
+              <Checkbox
+                borderColor='gray.600'
+                colorScheme='red'
+                size='md'
+                isChecked={isChekBox}
+                onChange={handleChange}
+              />
+              <span className='text-caption-2 ml-2 font-normal italic'>
+                sama dengan alamat bisnis?
+              </span>
+            </div>
+          </label>
+
+          <input
+            type='text'
+            id='alamat_wajib_pajak'
+            name='alamat_wajib_pajak'
+            placeholder='Masukan alamat wajib pajak anda'
+            value={
+              !required
+                ? isChekBox
+                  ? form.alamat_bisnis
+                  : form.alamat_wajib_pajak
+                : ''
+            }
+            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
+            disabled={isChekBox || required}
+            contentEditable={required}
+            readOnly={required}
+            onChange={handleInputChange}
+            ref={alamatWajibPajakRef}
+            aria-invalid={
+              chekValid && isPKP && !required && !!errors.alamat_wajib_pajak
+            }
+          />
+
+          {chekValid && isPKP && !required && !!errors.alamat_wajib_pajak && (
+            <span className='form-msg-danger'>{errors.alamat_wajib_pajak}</span>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor='npwp' className='font-bold'>
+            Nomor NPWP{' '}
+            {!isPKP && !required && (
+              <span className='font-normal text-gray_r-11'>(opsional)</span>
+            )}
+          </label>
+
+          <input
+            type='tel'
+            id='npwp'
+            name='npwp'
+            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
+            disabled={required}
+            contentEditable={required}
+            readOnly={required}
+            ref={npwpRef}
+            placeholder='000.000.000.0-000.000'
+            value={!required ? formattedNpwp : ''}
+            maxLength={21} // Set maximum length to 16 characters
+            onChange={(e) => {
+              if (!required) {
+                const unformatted = e.target.value.replace(/\D/g, ''); // Remove all non-digit characters
+                const formattedValue = formatNpwp(unformatted); // Format the value
+                setUnformattedNpwp(unformatted); // Store unformatted value
+                setFormattedNpwp(formattedValue); // Store formatted value
+                handleInputChangeNpwp({
+                  ...e,
+                  target: { ...e.target, value: unformatted },
+                }); // Update form state with unformatted value
+              }
+            }}
+            aria-invalid={chekValid && !required && !!errors.npwp}
+          />
+
+          {chekValid && !required && !!errors.npwp && (
+            <span className='form-msg-danger'>{errors.npwp}</span>
+          )}
+        </div>
+
+        <div>
+          <label
+            htmlFor='sppkp'
+            className='font-bold flex flex-row items-center justify-between'
+          >
+            <div className='flex flex-row items-center'>
+              Nomor SPPKP{' '}
+              {!required && (
+                <span className='ml-2 font-normal text-gray_r-11'>
+                  (opsional){' '}
+                </span>
+              )}
+            </div>
+            {
+              <div
+                onClick={() => setIsExample(!isExample)}
+                className='rounded text-white p-2 flex flex-row bg-red-500 hover:cursor-pointer hover:bg-red-400'
+              >
+                <EyeIcon className={`w-4 ${isDesktop && 'mr-2'}`} />
+                {isDesktop && (
+                  <p className='font-light text-xs'>Lihat Contoh</p>
+                )}
+              </div>
+            }
+          </label>
+
+          <input
+            type='tel'
+            id='sppkp'
+            name='sppkp'
+            className={`form-input max-h-11 mt-3 transition-all duration-500 ${
+              required ? 'cursor-no-drop' : ''
+            }`}
+            disabled={required}
+            contentEditable={required}
+            readOnly={required}
+            ref={sppkpRef}
+            placeholder='X-XXXPKP/WJPXXX/XX.XXXX/XXXX'
+            onChange={handleInputChange}
+            value={!required ? form.sppkp : ''}
+            aria-invalid={chekValid && !required && !!errors.sppkp}
+          />
+
+          {chekValid && !required && !!errors.sppkp && (
+            <span className='form-msg-danger'>{errors.sppkp}</span>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor='npwp_document' className='font-bold'>
+            Dokumen NPWP{' '}
+            {!isPKP && !required && (
+              <span className='font-normal text-gray_r-11'>(opsional)</span>
+            )}
+          </label>
+
+          <input
+            type='file'
+            id='npwp_document'
+            name='npwp_document'
+            className={`form-input transition-all duration-500 ${
+              type === 'bisnis' ? '' : 'border-none'
+            } mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            disabled={required}
+            contentEditable={required}
+            ref={docsNpwpRef}
+            readOnly={required}
+            onChange={handleFileChange}
+            accept='.pdf,.doc,.docx,.png,.jpg,.jpeg' // Filter file types
+          />
+
+          {chekValid && isPKP && !required && !!errors.npwp_document && (
+            <span className='form-msg-danger'>{errors.npwp_document}</span>
+          )}
+        </div>
+
+        <div>
+          <label htmlFor='sppkp_document' className='font-bold'>
+            Dokumen SPPKP{' '}
+            {!isPKP && !required && (
+              <span className='font-normal text-gray_r-11'>(opsional)</span>
+            )}
+          </label>
+
+          <input
+            type='file'
+            id='sppkp_document'
+            name='sppkp_document'
+            className={`form-input transition-all duration-500 ${
+              type === 'bisnis' ? '' : 'border-none'
+            } mt-3 ${required ? 'cursor-no-drop' : ''}`}
+            disabled={required}
+            contentEditable={required}
+            ref={docsSppkpRef}
+            readOnly={required}
+            onChange={handleFileChange}
+            accept='.pdf,.doc,.docx,.png,.jpg,.jpeg' // Filter file types
+          />
+
+          {chekValid && isPKP && !required && !!errors.sppkp_document && (
+            <span className='form-msg-danger'>{errors.sppkp_document}</span>
+          )}
+        </div>
+      </form>
+    </>
+  );
+};
+
+export default form;
diff --git a/src-migrate/modules/register/components/RegistrasiBisnis.tsx b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
new file mode 100644
index 00000000..ce4d3972
--- /dev/null
+++ b/src-migrate/modules/register/components/RegistrasiBisnis.tsx
@@ -0,0 +1,197 @@
+import { ChangeEvent, useEffect, useMemo, useState } from 'react';
+import FormBisnis from './FormBisnis';
+import Form from './Form';
+import TermCondition from './TermCondition';
+import FormCaptcha from './FormCaptcha';
+import { Radio, RadioGroup, Stack, Divider, Button } from '@chakra-ui/react';
+import React from 'react';
+import { ChevronDownIcon, ChevronRightIcon } from '@heroicons/react/24/outline';
+import { useRegisterStore } from '../stores/useRegisterStore';
+import { useMutation } from 'react-query';
+import { RegisterProps } from '~/types/auth';
+import { registerUser } from '~/services/auth';
+import router from 'next/router';
+import { useRouter } from 'next/router';
+import { UseToastOptions, useToast } from '@chakra-ui/react';
+import Link from 'next/link';
+interface FormProps {
+  chekValid: boolean;
+  buttonSubmitClick: boolean;
+}
+const RegistrasiBisnis: React.FC<FormProps> = ({
+  chekValid,
+  buttonSubmitClick,
+}) => {
+  const [isPKP, setIsPKP] = useState(true);
+  const [isTerdaftar, setIsTerdaftar] = useState(false);
+  const [isDropIndividu, setIsDropIndividu] = useState(true);
+  const [isBisnisClicked, setisBisnisClicked] = useState(true);
+  const [selectedValue, setSelectedValue] = useState('PKP');
+  const [selectedValueBisnis, setSelectedValueBisnis] = useState('false');
+  const { form, isCheckedTNC, isValidCaptcha, errors, validate, updateForm } =
+    useRegisterStore();
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
+  const toast = useToast();
+  const mutation = useMutation({
+    mutationFn: (data: RegisterProps) => registerUser(data),
+  });
+
+  useEffect(() => {
+    if (selectedValue === 'PKP') {
+      updateForm('is_pkp', 'true');
+      validate();
+    } else {
+      updateForm('is_pkp', 'false');
+      validate();
+    }
+  }, [selectedValue]);
+
+  useEffect(() => {
+    if (isTerdaftar) {
+      updateForm('is_terdaftar', 'true');
+      validate();
+    } else {
+      updateForm('is_terdaftar', 'false');
+      validate();
+    }
+  }, [isTerdaftar]);
+
+  const handleChange = (value: string) => {
+    setSelectedValue(value);
+    if (value === 'PKP') {
+      validate();
+      setIsPKP(true);
+    } else {
+      validate();
+      setIsPKP(false);
+      setIsPKP(false);
+    }
+  };
+
+  const handleChangeBisnis = (value: string) => {
+    setSelectedValueBisnis(value);
+    if (value === 'true') {
+      validate();
+      setIsTerdaftar(true);
+    } else {
+      validate();
+      setIsTerdaftar(false);
+    }
+  };
+
+  const handleClick = () => {
+    setIsDropIndividu(!isDropIndividu);
+  };
+
+  const handleClickBisnis = () => {
+    setisBisnisClicked(!isBisnisClicked);
+  };
+
+  return (
+    <>
+      <div className='mt-4 border'>
+        <div className='p-4'>
+          <div onClick={handleClick} className='flex justify-between'>
+            <p className='text-2xl font-semibold text-center md:text-left'>
+              Data Akun
+            </p>
+            {isDropIndividu ? (
+              <div className='flex'>
+                <ChevronDownIcon
+                  onClick={handleClick}
+                  className='h-6 w-6 text-black'
+                />
+              </div>
+            ) : (
+              <ChevronRightIcon
+                onClick={handleClick}
+                className='h-6 w-6 text-black'
+              />
+            )}
+          </div>
+          {isDropIndividu && (
+            <div>
+              <Divider my={4} />
+              <Form
+                type='bisnis'
+                required={true}
+                isBisnisRegist={true}
+                chekValid={chekValid}
+                buttonSubmitClick={buttonSubmitClick}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+      <div className='mt-4 border'>
+        <div className='p-4'>
+          <div onClick={handleClickBisnis} className='flex justify-between'>
+            <p className='text-2xl font-semibold text-center md:text-left'>
+              Data Bisnis
+            </p>
+            {isBisnisClicked ? (
+              <div className='flex'>
+                <ChevronDownIcon
+                  onClick={handleClickBisnis}
+                  className='h-6 w-6 text-black'
+                />
+              </div>
+            ) : (
+              <ChevronRightIcon
+                onClick={handleClickBisnis}
+                className='h-6 w-6 text-black'
+              />
+            )}
+          </div>
+          {isBisnisClicked && (
+            <div>
+              <Divider my={4} />
+              <div>
+                <p className='text-black font-bold mb-2'>
+                  Bisnis Terdaftar di Indoteknik?
+                </p>
+                <RadioGroup
+                  onChange={handleChangeBisnis}
+                  value={selectedValueBisnis}
+                >
+                  <Stack direction='row'>
+                    <Radio colorScheme='red' value='true'>
+                      Sudah Terdaftar
+                    </Radio>
+                    <Radio colorScheme='red' value='false' className='ml-2'>
+                      Belum Terdaftar
+                    </Radio>
+                  </Stack>
+                </RadioGroup>
+              </div>
+              <div className='mt-4'>
+                <p className='text-black font-bold mb-2'>Tipe Bisnis</p>
+                <RadioGroup onChange={handleChange} value={selectedValue}>
+                  <Stack direction='row' className='font-bold'>
+                    <Radio colorScheme='red' value='PKP'>
+                      PKP
+                    </Radio>
+                    <Radio colorScheme='red' value='Non-PKP' className='ml-4'>
+                      Non-PKP
+                    </Radio>
+                  </Stack>
+                </RadioGroup>
+              </div>
+              <FormBisnis
+                type='bisnis'
+                required={isTerdaftar}
+                isPKP={isPKP}
+                chekValid={chekValid}
+                buttonSubmitClick={buttonSubmitClick}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <h1 className=''></h1>
+    </>
+  );
+};
+
+export default RegistrasiBisnis;
diff --git a/src-migrate/modules/register/components/RegistrasiIndividu.tsx b/src-migrate/modules/register/components/RegistrasiIndividu.tsx
new file mode 100644
index 00000000..84049065
--- /dev/null
+++ b/src-migrate/modules/register/components/RegistrasiIndividu.tsx
@@ -0,0 +1,34 @@
+import Form from './Form';
+import { useRegisterStore } from '../stores/useRegisterStore';
+import { useEffect } from 'react';
+interface FormProps {
+  chekValid: boolean;
+  buttonSubmitClick: boolean;
+}
+const RegistrasiIndividu: React.FC<FormProps> = ({
+  chekValid,
+  buttonSubmitClick,
+}) => {
+  const { form, errors, updateForm, validate } = useRegisterStore();
+
+  useEffect(() => {
+    updateForm('is_pkp', 'false');
+    updateForm('is_terdaftar', 'false');
+    updateForm('type_acc', 'individu');
+    validate();
+  }, []);
+
+  return (
+    <>
+      <Form
+        type='individu'
+        required={false}
+        isBisnisRegist={false}
+        chekValid={chekValid}
+        buttonSubmitClick={buttonSubmitClick}
+      />
+    </>
+  );
+};
+
+export default RegistrasiIndividu;
diff --git a/src-migrate/modules/register/components/TermCondition.tsx b/src-migrate/modules/register/components/TermCondition.tsx
index b7729deb..d54fe921 100644
--- a/src-migrate/modules/register/components/TermCondition.tsx
+++ b/src-migrate/modules/register/components/TermCondition.tsx
@@ -10,7 +10,7 @@ const TermCondition = () => {
   return (
     <>
       <div className="mt-4 flex items-center gap-x-2">
-        <Checkbox id='tnc' name='tnc' isChecked={isCheckedTNC} onChange={toggleCheckTNC} />
+        <Checkbox id='tnc' name='tnc' colorScheme='red' isChecked={isCheckedTNC} onChange={toggleCheckTNC} />
         <div>
           <label htmlFor="tnc" className="cursor-pointer">Dengan ini saya menyetujui</label>
           {' '}
diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx
index 00931284..da41fd8b 100644
--- a/src-migrate/modules/register/index.tsx
+++ b/src-migrate/modules/register/index.tsx
@@ -1,54 +1,212 @@
-import PageContent from "~/modules/page-content"
-import Form from "./components/Form"
-import Link from "next/link"
-import Image from "next/image"
-import IndoteknikLogo from "~/images/logo.png"
-import AccountActivation from "../account-activation"
+import PageContent from '~/modules/page-content';
+import RegistrasiIndividu from './components/RegistrasiIndividu';
+import RegistrasiBisnis from './components/RegistrasiBisnis';
+import Link from 'next/link';
+import Image from 'next/image';
+import IndoteknikLogo from '~/images/logo.png';
+import AccountActivation from '../account-activation';
+import { useMemo, useState } from 'react';
+import { useRegisterStore } from './stores/useRegisterStore';
+import FormCaptcha from './components/FormCaptcha';
+import TermCondition from './components/TermCondition';
+import { Button } from '@chakra-ui/react';
+import { useMutation } from 'react-query';
+import { UseToastOptions, useToast } from '@chakra-ui/react';
+import { RegisterProps } from '~/types/auth';
+import { registerUser } from '~/services/auth';
+import { useRouter } from 'next/router';
 
 const LOGO_WIDTH = 150;
 const LOGO_HEIGHT = LOGO_WIDTH / 3;
 
 const Register = () => {
+  const [isIndividuClicked, setIsIndividuClicked] = useState(true);
+  const [notValid, setNotValid] = useState(false);
+  const [buttonSubmitClick, setButtonSubmitClick] = useState(false);
+  const [isBisnisClicked, setIsBisnisClicked] = useState(false);
+  const { form, isCheckedTNC, isValidCaptcha, resetForm, errors, updateForm } =
+    useRegisterStore();
+
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]);
+  const toast = useToast();
+  const router = useRouter();
+  const mutation = useMutation({
+    mutationFn: (data: RegisterProps) => registerUser(data),
+  });
+
+  const handleIndividuClick = () => {
+    resetForm();
+    setIsIndividuClicked(true);
+    setIsBisnisClicked(false);
+  };
+
+  const handleBisnisClick = () => {
+    resetForm();
+    updateForm('is_terdaftar', 'false');
+    updateForm('type_acc', 'business');
+    setIsIndividuClicked(false);
+    setIsBisnisClicked(true);
+  };
+  const handleSubmit = async () => {
+    if (!isFormValid) {
+      setNotValid(true);
+      setButtonSubmitClick(!buttonSubmitClick);
+      return;
+    } else {
+      setButtonSubmitClick(!buttonSubmitClick);
+      setNotValid(false);
+    }
+    const response = await mutation.mutateAsync(form);
+    if (response?.register === true) {
+      const urlParams = new URLSearchParams({
+        activation: 'otp',
+        email: form.email,
+        redirect: (router.query?.next || '/') as string,
+      });
+      router.push(`${router.route}?${urlParams}`);
+    }
+
+    const toastProps: UseToastOptions = {
+      duration: 5000,
+      isClosable: true,
+      position: 'top',
+    };
+
+    switch (response?.reason) {
+      case 'EMAIL_USED':
+        toast({
+          ...toastProps,
+          title: 'Email sudah digunakan',
+          status: 'warning',
+        });
+        break;
+      case 'NOT_ACTIVE':
+        const activationUrl = `${router.route}?activation=email`;
+        toast({
+          ...toastProps,
+          title: 'Akun belum aktif',
+          description: (
+            <>
+              Akun sudah terdaftar namun belum aktif.{' '}
+              <Link href={activationUrl} className='underline'>
+                Klik untuk aktivasi akun
+              </Link>
+            </>
+          ),
+          status: 'warning',
+        });
+        break;
+    }
+  };
   return (
-    <div className="container">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 pt-10 px-2 md:pt-16">
-        <section>
-          <Link href='/' className="block md:hidden">
-            <Image src={IndoteknikLogo} alt='Logo Indoteknik' width={LOGO_WIDTH} height={LOGO_HEIGHT} className="mx-auto mb-4 w-auto h-auto" priority />
-          </Link>
-
-          <h1 className="text-2xl font-semibold text-center md:text-left">
-            Daftar Akun Indoteknik
-          </h1>
-          <h2 className="text-gray_r-11 mt-1 mb-10 text-center md:text-left">
-            Buat akun sekarang lebih mudah dan terverifikasi
-          </h2>
-
-          <Form />
-
-          <div className='text-gray_r-11 mt-4 text-center md:text-left'>
-            Sudah punya akun Indoteknik?{' '}
-            <Link href='/login' className='inline font-medium text-danger-500'>
-              Masuk
+    <div className='container'>
+      <div className='grid grid-cols-1 md:grid-cols-2 gap-x-8 pt-10 px-2 md:pt-16'>
+        <section className=''>
+          <div className='px-8 py-4 border'>
+            <Link href='/' className='block md:hidden'>
+              <Image
+                src={IndoteknikLogo}
+                alt='Logo Indoteknik'
+                width={LOGO_WIDTH}
+                height={LOGO_HEIGHT}
+                className='mx-auto mb-4 w-auto h-auto'
+                priority
+              />
             </Link>
-          </div>
 
-          <div className='text-gray_r-11 mt-4 text-center md:text-left'>
-            Akun anda belum aktif?{' '}
-            <Link href='/register?activation=email' className='inline font-medium text-danger-500'>
-              Aktivasi
-            </Link>
+            <h1 className='text-2xl font-semibold text-center md:text-left'>
+              Daftar Akun Indoteknik
+            </h1>
+            <h2 className='text-gray_r-11 mt-1 mb-4 text-center md:text-left'>
+              Buat akun sekarang lebih mudah dan terverifikasi
+            </h2>
+
+            <label htmlFor='name' className='text-black font-bold'>
+              Tipe Akun
+            </label>
+            <div className='grid grid-cols-2 gap-x-3 mt-2 h-14 font-bold text-black hover:cursor-pointer'>
+              <div
+                className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${
+                  isIndividuClicked ? 'bg-red-500 text-white' : ''
+                }`}
+                onClick={handleIndividuClick}
+              >
+                <p>Individu</p>
+              </div>
+              <div
+                className={` border rounded-md flex justify-center items-center transition-colors duration-300 ease-in-out ${
+                  isBisnisClicked ? 'bg-red-500 text-white' : ''
+                }`}
+                onClick={handleBisnisClick}
+              >
+                <p>Bisnis</p>
+              </div>
+            </div>
+            <div className='transition-opacity duration-300 ease-in-out'>
+              {isIndividuClicked && (
+                <div className='opacity-100'>
+                  <RegistrasiIndividu
+                    chekValid={notValid}
+                    buttonSubmitClick={buttonSubmitClick}
+                  />
+                </div>
+              )}
+              {isBisnisClicked && (
+                <div className='opacity-100'>
+                  <RegistrasiBisnis
+                    chekValid={notValid}
+                    buttonSubmitClick={buttonSubmitClick}
+                  />
+                </div>
+              )}
+            </div>
+            <section className='mt-2'>
+              <FormCaptcha />
+              <TermCondition />
+              <Button
+                type='submit'
+                colorScheme='red'
+                className='w-full mt-2'
+                size='lg'
+                onClick={handleSubmit}
+                isDisabled={
+                  !isCheckedTNC || mutation.isLoading || !isValidCaptcha
+                }
+              >
+                {mutation.isLoading ? 'Loading...' : 'Daftar'}
+              </Button>
+            </section>
+            <section className='flex justify-center items-center flex-col'>
+              <div className='text-gray_r-11 mt-4 text-center md:text-left'>
+                Sudah punya akun Indoteknik?{' '}
+                <Link
+                  href='/login'
+                  className='inline font-medium text-danger-500'
+                >
+                  Masuk
+                </Link>
+              </div>
+              <div className='text-gray_r-11 mt-4 text-center md:text-left'>
+                Akun anda belum aktif?{' '}
+                <Link
+                  href='/register?activation=email'
+                  className='inline font-medium text-danger-500'
+                >
+                  Aktivasi
+                </Link>
+              </div>
+            </section>
           </div>
         </section>
 
-        <section className="my-10 md:my-0">
-          <PageContent path="/register" />
+        <section className='my-10 md:my-0'>
+          <PageContent path='/register' />
         </section>
       </div>
 
       <AccountActivation />
     </div>
-  )
-}
+  );
+};
 
-export default Register
\ No newline at end of file
+export default Register;
diff --git a/src-migrate/modules/register/stores/useRegisterStore.ts b/src-migrate/modules/register/stores/useRegisterStore.ts
index d8abf52b..273472be 100644
--- a/src-migrate/modules/register/stores/useRegisterStore.ts
+++ b/src-migrate/modules/register/stores/useRegisterStore.ts
@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import { RegisterProps } from '~/types/auth';
 import { registerSchema } from '~/validations/auth';
-import { ZodError } from 'zod';
+import { boolean, ZodError } from 'zod';
 
 type State = {
   form: RegisterProps;
@@ -20,18 +20,33 @@ type Action = {
   openTNC: () => void;
   closeTNC: () => void;
   validate: () => void;
+  resetForm: () => void;
 };
 
 export const useRegisterStore = create<State & Action>((set, get) => ({
   form: {
-    company: '',
+    company_type_id: '',
+    business_name: '',
     name: '',
+    nama_wajib_pajak : '',
     email: '',
+    email_partner: '',
     password: '',
     phone: '',
+    sppkp_document: '',
+    npwp_document: '',
+    industry_id: '',
+    npwp: '',
+    sppkp: '',
+    is_pkp: '',
+    type_acc:'',
+    is_terdaftar:'',
+    alamat_bisnis:'',
+    alamat_wajib_pajak:'',
   },
   updateForm: (name, value) =>
     set((state) => ({ form: { ...state.form, [name]: value } })),
+  
 
   errors: {},
   validate: () => {
@@ -48,6 +63,7 @@ export const useRegisterStore = create<State & Action>((set, get) => ({
       }
     }
   },
+
   isCheckedTNC: false,
   toggleCheckTNC: () => set((state) => ({ isCheckedTNC: !state.isCheckedTNC })),
 
@@ -57,4 +73,27 @@ export const useRegisterStore = create<State & Action>((set, get) => ({
 
   isValidCaptcha: false,
   updateValidCaptcha: (value) => set(() => ({ isValidCaptcha: value })),
+
+  resetForm: () => set({
+    form: {
+    company_type_id: '',
+    business_name: '',
+    name: '',
+    nama_wajib_pajak : '',
+    email: '',
+    email_partner: '',
+    password: '',
+    phone: '',
+    sppkp_document: '',
+    npwp_document: '',
+    industry_id: '',
+    npwp: '',
+    sppkp: '',
+    is_pkp: '',
+    type_acc:'',
+    is_terdaftar:'',
+    alamat_bisnis:'',
+    alamat_wajib_pajak:'',
+  },
+  }),
 }));
diff --git a/src-migrate/types/auth.ts b/src-migrate/types/auth.ts
index e93a475a..593e120f 100644
--- a/src-migrate/types/auth.ts
+++ b/src-migrate/types/auth.ts
@@ -10,6 +10,7 @@ export type AuthProps = {
   name: string;
   email: string;
   phone: string;
+  npwp: string;
   mobile: string;
   external: boolean;
   company: boolean;
diff --git a/src-migrate/validations/auth.ts b/src-migrate/validations/auth.ts
index 78fc5e71..3abdfb57 100644
--- a/src-migrate/validations/auth.ts
+++ b/src-migrate/validations/auth.ts
@@ -1,17 +1,147 @@
 import { z } from 'zod';
 
-export const registerSchema = z.object({
-  name: z.string().min(1, { message: 'Nama harus diisi' }),
-  email: z
-    .string()
-    .min(1, { message: 'Email harus diisi' })
-    .email({ message: 'Email harus menggunakan format example@mail.com' }),
-  password: z.string().min(6, { message: 'Password minimal 6 karakter' }),
-  company: z.string().optional(),
-  phone: z
-    .string()
-    .min(1, { message: 'Nomor telepon harus diisi' })
-    .refine((val) => /^\d{10,12}$/.test(val), {
-      message: 'Format nomor telepon tidak valid, contoh: 081234567890',
+export const registerSchema = z
+  .object({
+    name: z.string().min(1, { message: 'Nama harus diisi' }),
+    email: z
+      .string()
+      .min(1, { message: 'Email harus diisi' })
+      .email({ message: 'Email harus menggunakan format example@mail.com' }),
+    password: z.string().min(6, { message: 'Password minimal 6 karakter' }),
+    phone: z
+      .string()
+      .min(1, { message: 'Nomor telepon harus diisi' })
+      .refine((val) => /^\d{10,12}$/.test(val), {
+        message: 'Format nomor telepon tidak valid, contoh: 081234567890',
+      }),
+    type_acc: z.string().optional(),
+    nama_wajib_pajak: z.string().optional(),
+    alamat_bisnis: z.string().optional(),
+    alamat_wajib_pajak: z.string().optional(),
+    is_pkp: z.string(),
+    is_terdaftar: z.string(),
+    sppkp_document: z.string().optional(),
+    npwp_document: z.string().optional(),
+    industry_id: z.string().optional(),
+    email_partner: z.string().optional(),
+    business_name: z.string().optional(),
+    company_type_id: z.string().optional(),
+    isChekBox: z.string().optional(),
+    npwp: z.string().optional().refine((val) => !val || /^\d{15,16}$/.test(val), {
+      message: 'Format NPWP tidak valid, NPWP harus terdiri dari 15-16 digit angka.',
     }),
-});
+    sppkp: z.string().optional(),
+  })
+  .superRefine((data, ctx) => {
+    if (data.type_acc === 'business') {
+      if (data.is_terdaftar === 'false') {
+        if (data.is_pkp === 'true') {
+          const requiredFields: { field: keyof typeof data; message: string }[] = [
+            { field: 'business_name', message: 'Nama perusahaan harus diisi' },
+            { field: 'alamat_bisnis', message: 'Alamat perusahaan harus diisi' },
+            // { field: 'alamat_wajib_pajak', message: 'Alamat wajib pajak harus diisi' },
+            { field: 'company_type_id', message: 'Badan usaha wajib dipilih' },
+            { field: 'industry_id', message: 'Jenis usaha harus dipilih' },
+            { field: 'sppkp_document', message: 'Document harus diisi' },
+            { field: 'npwp_document', message: 'Document harus diisi' },
+            { field: 'npwp', message: 'Format NPWP tidak valid, NPWP harus terdiri dari 15-16 digit angka.' },
+            { field: 'nama_wajib_pajak', message: 'Nama wajib pajak harus diisi' },
+          ];
+
+          requiredFields.forEach(({ field, message }) => {
+            if (!data[field]) {
+              ctx.addIssue({
+                code: 'custom',
+                path: [field],
+                message,
+              });
+            }
+          });
+          
+          if (!data.email_partner || !z.string().email().safeParse(data.email_partner).success) {
+            ctx.addIssue({
+              code: 'custom',
+              path: ['email_partner'],
+              message: 'Email partner harus diisi dengan format example@mail.com',
+            });
+          }
+          if(data.isChekBox === 'false'){
+            if (!data.alamat_wajib_pajak) {
+              ctx.addIssue({
+                code: 'custom',
+                path: ['alamat_wajib_pajak'],
+                message: 'Alamat wajib pajak harus diisi',
+              });
+            }
+          }
+
+        } else {
+          if (!data.business_name) {
+            ctx.addIssue({
+              code: 'custom',
+              path: ['business_name'],
+              message: 'Nama perusahaan harus diisi',
+            });
+          }
+          if (!data.alamat_bisnis) {
+            ctx.addIssue({
+              code: 'custom',
+              path: ['alamat_bisnis'],
+              message: 'Alamat perusahaan harus diisi',
+            });
+          }
+
+          if (!data.company_type_id) {
+            ctx.addIssue({
+              code: 'custom',
+              path: ['company_type_id'],
+              message: 'Badan usaha wajib dipilih',
+            });
+          }
+          if (!data.industry_id) {
+            ctx.addIssue({
+              code: 'custom',
+              path: ['industry_id'],
+              message: 'Jenis usaha harus dipilih',
+            });
+          }
+
+          if (data.npwp && !/^\d{15,16}$/.test(data.npwp)) {
+            ctx.addIssue({
+              code: 'custom',
+              path: ['npwp'],
+              message: 'Format NPWP tidak valid, NPWP harus terdiri dari 15-16 digit angka.',
+            });
+          }
+          
+        }
+      }else{
+        if (data.is_pkp === 'true') {
+          if (!data.business_name) {
+            ctx.addIssue({
+              code: 'custom',
+              path: ['business_name'],
+              message: 'Nama perusahaan harus diisi',
+            });
+          }
+        } else {
+          if (!data.business_name) {
+            ctx.addIssue({
+              code: 'custom',
+              path: ['business_name'],
+              message: 'Nama perusahaan harus diisi',
+            });
+          }
+        }
+      }
+
+      // Remove this unconditional issue addition to prevent blocking form submission
+      // ctx.addIssue({
+      //   code: 'custom',
+      //   path: ['business_name'],
+      //   message: 'Nama perusahaan harus diisi',
+      // });
+    }else{
+
+    }
+  });
diff --git a/src/core/components/elements/Navbar/NavbarDesktop.jsx b/src/core/components/elements/Navbar/NavbarDesktop.jsx
index ebbcf857..2a51c41f 100644
--- a/src/core/components/elements/Navbar/NavbarDesktop.jsx
+++ b/src/core/components/elements/Navbar/NavbarDesktop.jsx
@@ -293,7 +293,7 @@ const NavbarDesktop = () => {
                   />
                   </div>
               )}
-                <p className="absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10">Semua Promo</p>
+                <span className="absolute inset-0 flex justify-center items-center group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200 z-10">Semua Promo</span>
               </Link>
               {/* {showPopup && router.pathname === '/' && (
                 <div className={`fixed ${isTop ? 'top-[170px]' : 'top-[90px]'} rounded-3xl left-[700px] w-fit object-center bg-green-50 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20 text-center p-2 z-50 transition-all duration-300`}>
@@ -312,7 +312,7 @@ const NavbarDesktop = () => {
                 target='_blank'
                 rel='noreferrer'
               >
-               <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Semua Brand</p>
+               <span className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Semua Brand</span>
               </Link>
               <Link
                 href='/shop/search?orderBy=stock'
@@ -323,7 +323,7 @@ const NavbarDesktop = () => {
                 target='_blank'
                 rel='noreferrer'
               >
-                <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Ready Stock</p>
+                <span className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Ready Stock</span>
               </Link>
               <Link
                 href='https://blog.indoteknik.com/'
@@ -331,7 +331,7 @@ const NavbarDesktop = () => {
                 target='_blank'
                 rel='noreferrer noopener'
               >
-                <p className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Blog Indoteknik</p>
+                <span className="group-hover:scale-105 group-hover:text-red-500 transition-transform duration-200">Blog Indoteknik</span>
               </Link>
               {/* <Link
                 href='/video'
diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
index 42bdc12a..c0698b6e 100644
--- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
+++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
@@ -1,37 +1,38 @@
-import { deleteAuth } from '@/core/utils/auth'
-import Link from '../Link/Link'
-import { useRouter } from 'next/router'
-import { signOut, useSession } from 'next-auth/react'
-import useAuth from '@/core/hooks/useAuth'
+import { deleteAuth } from '@/core/utils/auth';
+import Link from '../Link/Link';
+import { useRouter } from 'next/router';
+import { signOut, useSession } from 'next-auth/react';
+import useAuth from '@/core/hooks/useAuth';
 
 const NavbarUserDropdown = () => {
-  const router = useRouter()
-  const atuh = useAuth()
+  const router = useRouter();
+  const atuh = useAuth();
 
   const logout = async () => {
     deleteAuth().then(() => {
-      router.push('/login')
-    })
-  }
+      router.push('/login');
+    });
+  };
 
   return (
     <div className='navbar-user-dropdown-wrapper'>
       <div className='navbar-user-dropdown'>
+        <Link href='/my/profile'>Profil Saya</Link>
         <Link href='/my/quotations'>Daftar Quotation</Link>
         <Link href='/my/transactions'>Daftar Transaksi</Link>
         <Link href='/my/shipments'>Daftar Pengiriman</Link>
         <Link href='/my/invoices'>Invoice & Faktur Pajak</Link>
         <Link href='/my/wishlist'>Wishlist</Link>
         <Link href='/my/address'>Daftar Alamat</Link>
-        {!atuh?.external &&
+        {!atuh?.external && (
           <Link href='/my/recomendation'>Dashboard Recomendation</Link>
-        }
+        )}
         <button type='button' onClick={logout}>
           Keluar Akun
         </button>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default NavbarUserDropdown
+export default NavbarUserDropdown;
diff --git a/src/core/components/layouts/AppLayout.jsx b/src/core/components/layouts/AppLayout.jsx
index ebbc1ad5..ec61ca06 100644
--- a/src/core/components/layouts/AppLayout.jsx
+++ b/src/core/components/layouts/AppLayout.jsx
@@ -10,13 +10,15 @@ const BasicFooter = dynamic(() => import('../elements/Footer/BasicFooter'), {
 
 const AppLayout = ({ children, title, withFooter = true }) => {
   return (
-    <>
-      <AnimationLayout>
-        <AppBar title={title} />
-        {children}
-      </AnimationLayout>
-      {withFooter && <BasicFooter />}
-    </>
+    <div className='flex flex-col min-h-screen max-h-screen overflow-y-auto'>
+      <AppBar title={title} />
+      <div className='flex-grow p-4'>{children}</div>
+      {withFooter && (
+        <div className='mt-auto'>
+          <BasicFooter />
+        </div>
+      )}
+    </div>
   );
 };
 
diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx
index a610d371..9ca617ae 100644
--- a/src/lib/address/components/Addresses.jsx
+++ b/src/lib/address/components/Addresses.jsx
@@ -1,34 +1,72 @@
-import Link from '@/core/components/elements/Link/Link'
-import Spinner from '@/core/components/elements/Spinner/Spinner'
-import useAuth from '@/core/hooks/useAuth'
-import { getItemAddress, updateItemAddress } from '@/core/utils/address'
-import { useRouter } from 'next/router'
-import useAddresses from '../hooks/useAddresses'
-import MobileView from '@/core/components/views/MobileView'
-import DesktopView from '@/core/components/views/DesktopView'
-import Menu from '@/lib/auth/components/Menu'
+import { useState } from 'react';
+import Link from '@/core/components/elements/Link/Link';
+import Spinner from '@/core/components/elements/Spinner/Spinner';
+import useAuth from '@/core/hooks/useAuth';
+import { getItemAddress, updateItemAddress } from '@/core/utils/address';
+import { useRouter } from 'next/router';
+import useAddresses from '../hooks/useAddresses';
+import MobileView from '@/core/components/views/MobileView';
+import DesktopView from '@/core/components/views/DesktopView';
+import Menu from '@/lib/auth/components/Menu';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
 
 const Addresses = () => {
-  const router = useRouter()
-  const { select = null } = router.query
-  const { addresses } = useAddresses()
-  const selectedAddress = getItemAddress(select || '')
+  const router = useRouter();
+  const { select = null } = router.query;
+  const { addresses } = useAddresses();
+  const selectedAddress = getItemAddress(select || '');
+  const [changeConfirmation, setChangeConfirmation] = useState(false);
+  const [selectedForChange, setSelectedForChange] = useState(null); // State baru untuk simpan alamat yang akan diubah
+
   const changeSelectedAddress = (id) => {
-    if (!select) return
-    updateItemAddress(select, id)
-    router.back()
-  }
+    if (!select) return;
+    updateItemAddress(select, id);
+    router.back();
+  };
+
+  const handleConfirmSubmit = () => {
+    setChangeConfirmation(false);
+    if (selectedForChange) {
+      router.push(`/my/address/${selectedForChange}/edit`);
+    }
+  };
 
   if (addresses.isLoading) {
     return (
       <div className='flex justify-center my-6'>
         <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
       </div>
-    )
+    );
   }
 
   return (
     <>
+      <BottomPopup
+        active={changeConfirmation}
+        close={() => setChangeConfirmation(false)} // Menutup popup
+        title='Ubah alamat Bisnis'
+      >
+        <div className='leading-7 text-gray_r-12/80'>
+          Anda akan mengubah alamat utama bisnis?
+        </div>
+        <div className='flex mt-6 gap-x-4 md:justify-end'>
+          <button
+            className='btn-solid-red flex-1 md:flex-none'
+            type='button'
+            onClick={handleConfirmSubmit}
+          >
+            Yakin
+          </button>
+          <button
+            className='btn-light flex-1 md:flex-none'
+            type='button'
+            onClick={() => setChangeConfirmation(false)}
+          >
+            Batal
+          </button>
+        </div>
+      </BottomPopup>
+
       <MobileView>
         <div className='p-4'>
           <div className='text-right'>
@@ -37,7 +75,10 @@ const Addresses = () => {
 
           <div className='grid gap-y-4 mt-4'>
             {addresses.data?.map((address, index) => {
-              const type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
+              const type =
+                address.type.charAt(0).toUpperCase() +
+                address.type.slice(1) +
+                ' Address';
               return (
                 <AddressCard
                   key={index}
@@ -45,9 +86,11 @@ const Addresses = () => {
                   type={type}
                   changeSelectedAddress={changeSelectedAddress}
                   selectedAddress={selectedAddress}
+                  setChangeConfirmation={setChangeConfirmation} // Memanggil popup
+                  setSelectedForChange={setSelectedForChange} // Simpan id address yang akan diubah
                   select={select}
                 />
-              )
+              );
             })}
           </div>
         </div>
@@ -72,7 +115,9 @@ const Addresses = () => {
             <div className='grid grid-cols-2 gap-4'>
               {addresses.data?.map((address, index) => {
                 const type =
-                  address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
+                  address.type.charAt(0).toUpperCase() +
+                  address.type.slice(1) +
+                  ' Address';
                 return (
                   <AddressCard
                     key={index}
@@ -80,20 +125,31 @@ const Addresses = () => {
                     type={type}
                     changeSelectedAddress={changeSelectedAddress}
                     selectedAddress={selectedAddress}
+                    setChangeConfirmation={setChangeConfirmation}
+                    setSelectedForChange={setSelectedForChange}
                     select={select}
                   />
-                )
+                );
               })}
             </div>
           </div>
         </div>
       </DesktopView>
     </>
-  )
-}
+  );
+};
 
-const AddressCard = ({ address, selectedAddress, changeSelectedAddress, type, select }) => {
-  const auth = useAuth()
+const AddressCard = ({
+  address,
+  selectedAddress,
+  changeSelectedAddress,
+  type,
+  select,
+  setChangeConfirmation,
+  setSelectedForChange,
+}) => {
+  const auth = useAuth();
+  const router = useRouter();
 
   return (
     <div
@@ -106,23 +162,37 @@ const AddressCard = ({ address, selectedAddress, changeSelectedAddress, type, se
           (select && 'cursor-pointer hover:bg-gray_r-4 transition')
         }`}
     >
-      <div onClick={() => changeSelectedAddress(address.id)} className={select && 'cursor-pointer'}>
+      <div
+        onClick={() => changeSelectedAddress(address.id)}
+        className={select && 'cursor-pointer'}
+      >
         <div className='flex gap-x-2'>
           <div className='badge-red'>{type}</div>
-          {auth?.partnerId == address.id && <div className='badge-green'>Utama</div>}
+          {auth?.partnerId == address.id && (
+            <div className='badge-green'>Utama</div>
+          )}
         </div>
         <p className='font-medium mt-2'>{address.name}</p>
-        {address.mobile && <p className='mt-2 text-gray_r-11'>{address.mobile}</p>}
+        {address.mobile && (
+          <p className='mt-2 text-gray_r-11'>{address.mobile}</p>
+        )}
         <p className='mt-1 leading-6 text-gray_r-11'>{address.street}</p>
       </div>
-      <Link
-        href={`/my/address/${address.id}/edit`}
+      <button
+        onClick={() => {
+          if (type == 'Contact Address' && auth.parentId) {
+            setSelectedForChange(address.id); // Set alamat yang dipilih
+            setChangeConfirmation(true); // Tampilkan popup konfirmasi
+          } else {
+            router.push(`/my/address/${address.id}/edit`);
+          }
+        }}
         className='btn-light bg-white mt-3 w-full !text-gray_r-11'
       >
         Ubah Alamat
-      </Link>
+      </button>
     </div>
-  )
-}
+  );
+};
 
-export default Addresses
+export default Addresses;
diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index 86519147..e315affe 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -1,76 +1,101 @@
-import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
-import useAuth from '@/core/hooks/useAuth'
-import { useRouter } from 'next/router'
-import { Controller, useForm } from 'react-hook-form'
-import * as Yup from 'yup'
-import cityApi from '../api/cityApi'
-import districtApi from '../api/districtApi'
-import subDistrictApi from '../api/subDistrictApi'
-import { useEffect, useState } from 'react'
-import createAddressApi from '../api/createAddressApi'
-import { toast } from 'react-hot-toast'
-import { yupResolver } from '@hookform/resolvers/yup'
-import Menu from '@/lib/auth/components/Menu'
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import useAuth from '@/core/hooks/useAuth';
+import { useRouter } from 'next/router';
+import { Controller, useForm } from 'react-hook-form';
+import * as Yup from 'yup';
+import cityApi from '../api/cityApi';
+import districtApi from '../api/districtApi';
+import subDistrictApi from '../api/subDistrictApi';
+import { useEffect, useState } from 'react';
+import createAddressApi from '../api/createAddressApi';
+import { toast } from 'react-hot-toast';
+import { yupResolver } from '@hookform/resolvers/yup';
+import Menu from '@/lib/auth/components/Menu';
+import useAddresses from '../hooks/useAddresses';
 
 const CreateAddress = () => {
-  const auth = useAuth()
-  const router = useRouter()
+  const auth = useAuth();
+  const router = useRouter();
   const {
     register,
     formState: { errors },
     handleSubmit,
     watch,
     setValue,
-    control
+    control,
   } = useForm({
     resolver: yupResolver(validationSchema),
-    defaultValues
-  })
-
-  const [cities, setCities] = useState([])
-  const [districts, setDistricts] = useState([])
-  const [subDistricts, setSubDistricts] = useState([])
+    defaultValues,
+  });
+  const { addresses = [] } = useAddresses(); // Ensure addresses is an array
+  const [cities, setCities] = useState([]);
+  const [districts, setDistricts] = useState([]);
+  const [subDistricts, setSubDistricts] = useState([]);
+  const [filteredTypes, setFilteredTypes] = useState(types); // State to manage filtered types
 
   useEffect(() => {
     const loadCities = async () => {
-      let dataCities = await cityApi()
-      dataCities = dataCities.map((city) => ({ value: city.id, label: city.name }))
-      setCities(dataCities)
+      let dataCities = await cityApi();
+      dataCities = dataCities.map((city) => ({
+        value: city.id,
+        label: city.name,
+      }));
+      setCities(dataCities);
+    };
+    loadCities();
+  }, []);
+
+  useEffect(() => {
+    if (addresses) {
+      let hasContactAddress = false;
+
+      for (let i = 0; i < addresses?.data?.length; i++) {
+        if (addresses.data[i].type === 'contact') {
+          hasContactAddress = true;
+          break;
+        }
+      }
+      if (hasContactAddress) {
+        setFilteredTypes(types.filter((type) => type.value !== 'contact'));
+      } else {
+        setFilteredTypes(types);
+      }
     }
-    loadCities()
-  }, [])
+  }, [auth]);
 
-  const watchCity = watch('city')
+  const watchCity = watch('city');
   useEffect(() => {
-    setValue('district', '')
+    setValue('district', '');
     if (watchCity) {
       const loadDistricts = async () => {
-        let dataDistricts = await districtApi({ cityId: watchCity })
+        let dataDistricts = await districtApi({ cityId: watchCity });
         dataDistricts = dataDistricts.map((district) => ({
           value: district.id,
-          label: district.name
-        }))
-        setDistricts(dataDistricts)
-      }
-      loadDistricts()
+          label: district.name,
+        }));
+        setDistricts(dataDistricts);
+      };
+      loadDistricts();
     }
-  }, [watchCity, setValue])
+  }, [watchCity, setValue]);
 
-  const watchDistrict = watch('district')
+  const watchDistrict = watch('district');
   useEffect(() => {
-    setValue('subDistrict', '')
+    setValue('subDistrict', '');
     if (watchDistrict) {
       const loadSubDistricts = async () => {
-        let dataSubDistricts = await subDistrictApi({ districtId: watchDistrict })
+        let dataSubDistricts = await subDistrictApi({
+          districtId: watchDistrict,
+        });
         dataSubDistricts = dataSubDistricts.map((district) => ({
           value: district.id,
-          label: district.name
-        }))
-        setSubDistricts(dataSubDistricts)
-      }
-      loadSubDistricts()
+          label: district.name,
+        }));
+        setSubDistricts(dataSubDistricts);
+      };
+      loadSubDistricts();
     }
-  }, [watchDistrict, setValue])
+  }, [watchDistrict, setValue]);
 
   const onSubmitHandler = async (values) => {
     const data = {
@@ -78,15 +103,15 @@ const CreateAddress = () => {
       city_id: values.city,
       district_id: values.district,
       sub_district_id: values.subDistrict,
-      parent_id: auth.partnerId
-    }
+      parent_id: auth.partnerId,
+    };
 
-    const address = await createAddressApi({ data })
+    const address = await createAddressApi({ data });
     if (address?.id) {
-      toast.success('Berhasil menambahkan alamat')
-      router.back()
+      toast.success('Berhasil menambahkan alamat');
+      router.back();
     }
-  }
+  };
 
   return (
     <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
@@ -102,10 +127,16 @@ const CreateAddress = () => {
                 name='type'
                 control={control}
                 render={(props) => (
-                  <HookFormSelect {...props} isSearchable={false} options={types} />
+                  <HookFormSelect
+                    {...props}
+                    isSearchable={false}
+                    options={filteredTypes}
+                  />
                 )}
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.type?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.type?.message}
+              </div>
             </div>
 
             <div>
@@ -116,7 +147,9 @@ const CreateAddress = () => {
                 type='text'
                 className='form-input'
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.name?.message}
+              </div>
             </div>
 
             <div>
@@ -127,7 +160,9 @@ const CreateAddress = () => {
                 type='email'
                 className='form-input'
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.email?.message}
+              </div>
             </div>
 
             <div>
@@ -138,7 +173,9 @@ const CreateAddress = () => {
                 type='tel'
                 className='form-input'
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.mobile?.message}
+              </div>
             </div>
 
             <div>
@@ -149,7 +186,9 @@ const CreateAddress = () => {
                 type='text'
                 className='form-input'
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.street?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.street?.message}
+              </div>
             </div>
 
             <div>
@@ -160,7 +199,9 @@ const CreateAddress = () => {
                 type='number'
                 className='form-input'
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.zip?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.zip?.message}
+              </div>
             </div>
 
             <div>
@@ -168,9 +209,13 @@ const CreateAddress = () => {
               <Controller
                 name='city'
                 control={control}
-                render={(props) => <HookFormSelect {...props} options={cities} />}
+                render={(props) => (
+                  <HookFormSelect {...props} options={cities} />
+                )}
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.city?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.city?.message}
+              </div>
             </div>
 
             <div>
@@ -179,10 +224,16 @@ const CreateAddress = () => {
                 name='district'
                 control={control}
                 render={(props) => (
-                  <HookFormSelect {...props} options={districts} disabled={!watchCity} />
+                  <HookFormSelect
+                    {...props}
+                    options={districts}
+                    disabled={!watchCity}
+                  />
                 )}
               />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.district?.message}</div>
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.district?.message}
+              </div>
             </div>
 
             <div>
@@ -191,31 +242,37 @@ const CreateAddress = () => {
                 name='subDistrict'
                 control={control}
                 render={(props) => (
-                  <HookFormSelect {...props} options={subDistricts} disabled={!watchDistrict} />
+                  <HookFormSelect
+                    {...props}
+                    options={subDistricts}
+                    disabled={!watchDistrict}
+                  />
                 )}
               />
             </div>
           </div>
 
-          <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
+          <button
+            type='submit'
+            className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
+          >
             Simpan
           </button>
         </form>
       </div>
     </div>
-  )
-}
+  );
+};
 
 const validationSchema = Yup.object().shape({
   type: Yup.string().required('Harus di-pilih'),
   name: Yup.string().min(3, 'Minimal 3 karakter').required('Harus di-isi'),
-  // email: Yup.string().email('Format harus seperti contoh@email.com').required('Harus di-isi'),
   mobile: Yup.string().required('Harus di-isi'),
   street: Yup.string().required('Harus di-isi'),
   zip: Yup.string().required('Harus di-isi'),
   city: Yup.string().required('Harus di-pilih'),
-  district: Yup.string().required('Harus di-pilih')
-})
+  district: Yup.string().required('Harus di-pilih'),
+});
 
 const defaultValues = {
   type: '',
@@ -226,14 +283,14 @@ const defaultValues = {
   city: '',
   district: '',
   subDistrict: '',
-  zip: ''
-}
+  zip: '',
+};
 
 const types = [
   { value: 'contact', label: 'Contact Address' },
   { value: 'invoice', label: 'Invoice Address' },
   { value: 'delivery', label: 'Delivery Address' },
-  { value: 'other', label: 'Other Address' }
-]
+  { value: 'other', label: 'Other Address' },
+];
 
-export default CreateAddress
+export default CreateAddress;
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx
index 520bba51..ff6b1f12 100644
--- a/src/lib/address/components/EditAddress.jsx
+++ b/src/lib/address/components/EditAddress.jsx
@@ -1,18 +1,22 @@
-import { yupResolver } from '@hookform/resolvers/yup'
-import { useRouter } from 'next/router'
-import { useEffect, useState } from 'react'
-import * as Yup from 'yup'
-import cityApi from '../api/cityApi'
-import { Controller, useForm } from 'react-hook-form'
-import districtApi from '../api/districtApi'
-import subDistrictApi from '../api/subDistrictApi'
-import editAddressApi from '../api/editAddressApi'
-import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
-import { toast } from 'react-hot-toast'
-import Menu from '@/lib/auth/components/Menu'
+import { yupResolver } from '@hookform/resolvers/yup';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import * as Yup from 'yup';
+import cityApi from '../api/cityApi';
+import { Controller, useForm } from 'react-hook-form';
+import districtApi from '../api/districtApi';
+import subDistrictApi from '../api/subDistrictApi';
+import addressApi from '@/lib/address/api/addressApi';
+import editAddressApi from '../api/editAddressApi';
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import { toast } from 'react-hot-toast';
+import Menu from '@/lib/auth/components/Menu';
+import useAuth from '@/core/hooks/useAuth';
+import odooApi from '@/core/api/odooApi';
 
 const EditAddress = ({ id, defaultValues }) => {
-  const router = useRouter()
+  const auth = useAuth();
+  const router = useRouter();
   const {
     register,
     formState: { errors },
@@ -20,205 +24,283 @@ const EditAddress = ({ id, defaultValues }) => {
     watch,
     setValue,
     getValues,
-    control
+    control,
   } = useForm({
     resolver: yupResolver(validationSchema),
-    defaultValues
-  })
+    defaultValues,
+  });
+  const [cities, setCities] = useState([]);
+  const [districts, setDistricts] = useState([]);
+  const [subDistricts, setSubDistricts] = useState([]);
 
-  const [cities, setCities] = useState([])
-  const [districts, setDistricts] = useState([])
-  const [subDistricts, setSubDistricts] = useState([])
+  useEffect(() => {
+    const loadProfile = async () => {
+      const dataProfile = await addressApi({ id: auth.parentId });
+      setValue('industry', dataProfile.industryId);
+      setValue('companyType', dataProfile.companyTypeId);
+      setValue('taxName', dataProfile.taxName);
+      setValue('npwp', dataProfile.npwp);
+      setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak);
+      setValue('alamat_bisnis', dataProfile.alamatBisnis);
+      setValue('business_name', dataProfile.name);
+    };
+    if (auth) loadProfile();
+  }, [auth, setValue]);
 
   useEffect(() => {
     const loadCities = async () => {
-      let dataCities = await cityApi()
+      let dataCities = await cityApi();
       dataCities = dataCities.map((city) => ({
         value: city.id,
-        label: city.name
-      }))
-      setCities(dataCities)
-    }
-    loadCities()
-  }, [])
+        label: city.name,
+      }));
+      setCities(dataCities);
+    };
+    loadCities();
+  }, []);
 
-  const watchCity = watch('city')
+  const watchCity = watch('city');
   useEffect(() => {
-    setValue('district', '')
+    setValue('district', '');
     if (watchCity) {
       const loadDistricts = async () => {
-        let dataDistricts = await districtApi({ cityId: watchCity })
+        let dataDistricts = await districtApi({ cityId: watchCity });
         dataDistricts = dataDistricts.map((district) => ({
           value: district.id,
-          label: district.name
-        }))
-        setDistricts(dataDistricts)
-        let oldDistrict = getValues('oldDistrict')
+          label: district.name,
+        }));
+        setDistricts(dataDistricts);
+        let oldDistrict = getValues('oldDistrict');
         if (oldDistrict) {
-          setValue('district', oldDistrict)
-          setValue('oldDistrict', '')
+          setValue('district', oldDistrict);
+          setValue('oldDistrict', '');
         }
-      }
-      loadDistricts()
+      };
+      loadDistricts();
     }
-  }, [watchCity, setValue, getValues])
+  }, [watchCity, setValue, getValues]);
 
-  const watchDistrict = watch('district')
+  const watchDistrict = watch('district');
   useEffect(() => {
-    setValue('subDistrict', '')
+    setValue('subDistrict', '');
     if (watchDistrict) {
       const loadSubDistricts = async () => {
         let dataSubDistricts = await subDistrictApi({
-          districtId: watchDistrict
-        })
+          districtId: watchDistrict,
+        });
         dataSubDistricts = dataSubDistricts.map((district) => ({
           value: district.id,
-          label: district.name
-        }))
-        setSubDistricts(dataSubDistricts)
-        let oldSubDistrict = getValues('oldSubDistrict')
+          label: district.name,
+        }));
+        setSubDistricts(dataSubDistricts);
+        let oldSubDistrict = getValues('oldSubDistrict');
 
         if (oldSubDistrict) {
-          setValue('subDistrict', oldSubDistrict)
-          setValue('oldSubDistrict', '')
+          setValue('subDistrict', oldSubDistrict);
+          setValue('oldSubDistrict', '');
         }
-      }
-      loadSubDistricts()
+      };
+      loadSubDistricts();
     }
-  }, [watchDistrict, setValue, getValues])
-
+  }, [watchDistrict, setValue, getValues]);
   const onSubmitHandler = async (values) => {
     const data = {
       ...values,
+      phone: values.mobile,
       city_id: values.city,
       district_id: values.district,
-      sub_district_id: values.subDistrict
+      sub_district_id: values.subDistrict,
+    };
+    const address = await editAddressApi({ id, data });
+    let dataAlamat;
+    let isUpdated = true;
+    if (auth?.partnerId == id) {
+      dataAlamat = {
+        id_user: auth.partnerId,
+        company_type_id: values.companyType,
+        industry_id: values.industry,
+        tax_name: values.taxName,
+        alamat_lengkap_text: values.alamat_wajib_pajak,
+        street: values.street,
+        business_name: values.business_name,
+        name: values.business_name,
+        npwp: values.npwp,
+      };
+      isUpdated = await odooApi(
+        'PUT',
+        `/api/v1/partner/${auth.parentId}`,
+        dataAlamat
+      );
     }
 
-    const address = await editAddressApi({ id, data })
-    if (address?.id) {
-      toast.success('Berhasil mengubah alamat')
-      router.back()
+    // if (isUpdated?.id) {
+    if (address?.id && isUpdated?.id) {
+      toast.success('Berhasil mengubah alamat');
+      router.back();
+    } else {
+      toast.error('Terjadi kesalahan internal');
+      router.back();
     }
-  }
+  };
 
   return (
-    <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
-      <div className='hidden md:block w-3/12 pr-4'>
-        <Menu />
-      </div>
-      <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
-        <h1 className='text-title-sm font-semibold mb-6 hidden md:block'>Ubah Alamat</h1>
-        <form onSubmit={handleSubmit(onSubmitHandler)}>
-          <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
-            <div>
-              <label className='form-label mb-2'>Label Alamat</label>
-              <Controller
-                name='type'
-                control={control}
-                render={(props) => (
-                  <HookFormSelect {...props} isSearchable={false} options={types} />
-                )}
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.type?.message}</div>
-            </div>
+    <>
+      <div className='max-w-none md:container mx-auto flex p-0 md:py-10'>
+        <div className='hidden md:block w-3/12 pr-4'>
+          <Menu />
+        </div>
+        <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+          <div className='flex justify-start items-center mb-6'>
+            <h1 className='text-title-sm font-semibold hidden md:block mr-2'>
+              Ubah Alamat
+            </h1>
+            {auth?.partnerId == id && <div className='badge-green'>Utama</div>}
+          </div>
+          <form onSubmit={handleSubmit(onSubmitHandler)}>
+            <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+              <div>
+                <label className='form-label mb-2'>Label Alamat</label>
+                <Controller
+                  name='type'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect
+                      {...props}
+                      isSearchable={false}
+                      options={types}
+                    />
+                  )}
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.type?.message}
+                </div>
+              </div>
 
-            <div>
-              <label className='form-label mb-2'>Nama</label>
-              <input
-                {...register('name')}
-                placeholder='John Doe'
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.name?.message}</div>
-            </div>
+              <div>
+                <label className='form-label mb-2'>Nama</label>
+                <input
+                  {...register('name')}
+                  placeholder='John Doe'
+                  type='text'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.name?.message}
+                </div>
+              </div>
 
-            <div>
-              <label className='form-label mb-2'>Email</label>
-              <input
-                {...register('email')}
-                placeholder='johndoe@example.com'
-                type='email'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.email?.message}</div>
-            </div>
+              <div>
+                <label className='form-label mb-2'>Email</label>
+                <input
+                  {...register('email')}
+                  placeholder='johndoe@example.com'
+                  type='email'
+                  className='form-input'
+                  disabled={auth?.partnerId == id && true}
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.email?.message}
+                </div>
+              </div>
 
-            <div>
-              <label className='form-label mb-2'>Mobile</label>
-              <input
-                {...register('mobile')}
-                placeholder='08xxxxxxxx'
-                type='tel'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.mobile?.message}</div>
-            </div>
+              <div>
+                <label className='form-label mb-2'>Mobile</label>
+                <input
+                  {...register('mobile')}
+                  placeholder='08xxxxxxxx'
+                  type='tel'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.mobile?.message}
+                </div>
+              </div>
 
-            <div>
-              <label className='form-label mb-2'>Alamat</label>
-              <input
-                {...register('street')}
-                placeholder='Jl. Bandengan Utara 85A'
-                type='text'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.street?.message}</div>
-            </div>
+              <div>
+                <label className='form-label mb-2'>Alamat</label>
+                <input
+                  {...register('street')}
+                  placeholder='Jl. Bandengan Utara 85A'
+                  type='text'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.street?.message}
+                </div>
+              </div>
 
-            <div>
-              <label className='form-label mb-2'>Kode Pos</label>
-              <input
-                {...register('zip')}
-                placeholder='10100'
-                type='number'
-                className='form-input'
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.zip?.message}</div>
-            </div>
+              <div>
+                <label className='form-label mb-2'>Kode Pos</label>
+                <input
+                  {...register('zip')}
+                  placeholder='10100'
+                  type='number'
+                  className='form-input'
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.zip?.message}
+                </div>
+              </div>
 
-            <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>
+                <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>
-              <label className='form-label mb-2'>Kecamatan</label>
-              <Controller
-                name='district'
-                control={control}
-                render={(props) => (
-                  <HookFormSelect {...props} options={districts} disabled={!watchCity} />
-                )}
-              />
-              <div className='text-caption-2 text-danger-500 mt-1'>{errors.district?.message}</div>
-            </div>
+              <div>
+                <label className='form-label mb-2'>Kecamatan</label>
+                <Controller
+                  name='district'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect
+                      {...props}
+                      options={districts}
+                      disabled={!watchCity}
+                    />
+                  )}
+                />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.district?.message}
+                </div>
+              </div>
 
-            <div>
-              <label className='form-label mb-2'>Kelurahan</label>
-              <Controller
-                name='subDistrict'
-                control={control}
-                render={(props) => (
-                  <HookFormSelect {...props} options={subDistricts} disabled={!watchDistrict} />
-                )}
-              />
+              <div>
+                <label className='form-label mb-2'>Kelurahan</label>
+                <Controller
+                  name='subDistrict'
+                  control={control}
+                  render={(props) => (
+                    <HookFormSelect
+                      {...props}
+                      options={subDistricts}
+                      disabled={!watchDistrict}
+                    />
+                  )}
+                />
+              </div>
             </div>
-          </div>
-          <button type='submit' className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'>
-            Simpan
-          </button>
-        </form>
+            <button
+              type='submit'
+              className='btn-yellow w-full md:w-fit mt-6 ml-0 md:ml-auto'
+            >
+              Simpan
+            </button>
+          </form>
+        </div>
       </div>
-    </div>
-  )
-}
+    </>
+  );
+};
 
 const validationSchema = Yup.object().shape({
   type: Yup.string().required('Harus di-pilih'),
@@ -228,14 +310,14 @@ const validationSchema = Yup.object().shape({
   street: Yup.string().required('Harus di-isi'),
   zip: Yup.string().required('Harus di-isi'),
   city: Yup.string().required('Harus di-pilih'),
-  district: Yup.string().required('Harus di-pilih')
-})
+  district: Yup.string().required('Harus di-pilih'),
+});
 
 const types = [
   { value: 'contact', label: 'Contact Address' },
   { value: 'invoice', label: 'Invoice Address' },
   { value: 'delivery', label: 'Delivery Address' },
-  { value: 'other', label: 'Other Address' }
-]
+  { value: 'other', label: 'Other Address' },
+];
 
-export default EditAddress
+export default EditAddress;
diff --git a/src/lib/auth/components/CompanyProfile.jsx b/src/lib/auth/components/CompanyProfile.jsx
index 2faede9b..7bda992f 100644
--- a/src/lib/auth/components/CompanyProfile.jsx
+++ b/src/lib/auth/components/CompanyProfile.jsx
@@ -1,78 +1,136 @@
-import odooApi from '@/core/api/odooApi'
-import HookFormSelect from '@/core/components/elements/Select/HookFormSelect'
-import useAuth from '@/core/hooks/useAuth'
-import addressApi from '@/lib/address/api/addressApi'
-import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline'
-import { useEffect, useState } from 'react'
-import { Controller, useForm } from 'react-hook-form'
-import { toast } from 'react-hot-toast'
+import odooApi from '@/core/api/odooApi';
+import HookFormSelect from '@/core/components/elements/Select/HookFormSelect';
+import useAuth from '@/core/hooks/useAuth';
+import addressApi from '@/lib/address/api/addressApi';
+import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import { useEffect, useState } from 'react';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import BottomPopup from '@/core/components/elements/Popup/BottomPopup';
+import { yupResolver } from '@hookform/resolvers/yup';
+import * as Yup from 'yup';
 
 const CompanyProfile = () => {
-  const auth = useAuth()
-  const [isOpen, setIsOpen] = useState(false)
-  const toggle = () => setIsOpen(!isOpen)
-  const { register, setValue, control, handleSubmit } = useForm({
-    defaultValues: {
-      industry: '',
-      companyType: '',
-      name: '',
-      taxName: '',
-      npwp: ''
-    }
-  })
+  const [changeConfirmation, setChangeConfirmation] = useState(false);
+  const auth = useAuth();
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = () => setIsOpen(!isOpen);
+  const {
+    register,
+    formState: { errors },
+    setValue,
+    control,
+    handleSubmit,
+  } = useForm({
+    resolver: yupResolver(validationSchema),
+    defaultValues,
+  });
 
-  const [industries, setIndustries] = useState([])
+  const [industries, setIndustries] = useState([]);
   useEffect(() => {
     const loadIndustries = async () => {
-      const dataIndustries = await odooApi('GET', '/api/v1/partner/industry')
-      setIndustries(dataIndustries?.map((o) => ({ value: o.id, label: o.name })))
-    }
-    loadIndustries()
-  }, [])
+      const dataIndustries = await odooApi('GET', '/api/v1/partner/industry');
+      setIndustries(
+        dataIndustries?.map((o) => ({ value: o.id, label: o.name }))
+      );
+    };
+    loadIndustries();
+  }, []);
 
-  const [companyTypes, setCompanyTypes] = useState([])
+  const [companyTypes, setCompanyTypes] = useState([]);
   useEffect(() => {
     const loadCompanyTypes = async () => {
-      const dataCompanyTypes = await odooApi('GET', '/api/v1/partner/company_type')
-      setCompanyTypes(dataCompanyTypes?.map((o) => ({ value: o.id, label: o.name })))
-    }
-    loadCompanyTypes()
-  }, [])
+      const dataCompanyTypes = await odooApi(
+        'GET',
+        '/api/v1/partner/company_type'
+      );
+      setCompanyTypes(
+        dataCompanyTypes?.map((o) => ({ value: o.id, label: o.name }))
+      );
+    };
+    loadCompanyTypes();
+  }, []);
 
   useEffect(() => {
     const loadProfile = async () => {
-      const dataProfile = await addressApi({ id: auth.parentId })
-      setValue('name', dataProfile.name)
-      setValue('industry', dataProfile.industryId)
-      setValue('companyType', dataProfile.companyTypeId)
-      setValue('taxName', dataProfile.taxName)
-      setValue('npwp', dataProfile.npwp)
-    }
-    if (auth) loadProfile()
-  }, [auth, setValue])
+      const dataProfile = await addressApi({ id: auth.parentId });
+      setValue('name', dataProfile.name);
+      setValue('industry', dataProfile.industryId);
+      setValue('companyType', dataProfile.companyTypeId);
+      setValue('taxName', dataProfile.taxName);
+      setValue('npwp', dataProfile.npwp);
+      setValue('alamat_wajib_pajak', dataProfile.alamatWajibPajak);
+      setValue('alamat_bisnis', dataProfile.alamatBisnis);
+    };
+    if (auth) loadProfile();
+  }, [auth, setValue]);
 
   const onSubmitHandler = async (values) => {
-    const data = {
-      ...values,
-      company_type_id: values.companyType,
-      industry_id: values.industry,
-      tax_name: values.taxName
+    if (changeConfirmation) {
+      const data = {
+        ...values,
+        id_user: auth.partnerId,
+        company_type_id: values.companyType,
+        industry_id: values.industry,
+        tax_name: values.taxName,
+        alamat_lengkap_text: values.alamat_wajib_pajak,
+        street: values.alamat_bisnis,
+      };
+      const isUpdated = await odooApi(
+        'PUT',
+        `/api/v1/partner/${auth.parentId}`,
+        data
+      );
+      if (isUpdated?.id) {
+        toast.success('Berhasil mengubah profil', { duration: 1500 });
+        return;
+      }
+      toast.error('Terjadi kesalahan internal');
     }
-    const isUpdated = await odooApi('PUT', `/api/v1/partner/${auth.parentId}`, data)
-    if (isUpdated?.id) {
-      toast.success('Berhasil mengubah profil', { duration: 1500 })
-      return
-    }
-    toast.error('Terjadi kesalahan internal')
-  }
+  };
+
+  const handleConfirmSubmit = () => {
+    setChangeConfirmation(false);
+    handleSubmit(onSubmitHandler)();
+  };
 
   return (
     <>
-      <button type='button' onClick={toggle} className='p-4 flex items-center text-left w-full'>
+      <BottomPopup
+        active={changeConfirmation}
+        close={() => setChangeConfirmation(true)}
+        title='Ubah profil Bisnis'
+      >
+        <div className='leading-7 text-gray_r-12/80'>
+          Apakah anda yakin mengubah data bisnis?
+        </div>
+        <div className='flex mt-6 gap-x-4 md:justify-end'>
+          <button
+            className='btn-solid-red flex-1 md:flex-none'
+            type='button'
+            onClick={handleConfirmSubmit}
+          >
+            Ya, Ubah
+          </button>
+          <button
+            className='btn-light flex-1 md:flex-none'
+            type='button'
+            onClick={() => setChangeConfirmation(false)}
+          >
+            Batal
+          </button>
+        </div>
+      </BottomPopup>
+      <button
+        type='button'
+        onClick={toggle}
+        className='p-4 flex items-center text-left w-full'
+      >
         <div>
           <div className='font-semibold mb-2'>Informasi Usaha</div>
           <div className='text-gray_r-11'>
-            Dibawah ini adalah data usaha yang anda masukkan, periksa kembali data usaha anda.
+            Dibawah ini adalah data usaha yang anda masukkan, periksa kembali
+            data usaha anda.
           </div>
         </div>
         <div className='ml-auto p-2 bg-gray_r-3 rounded'>
@@ -82,15 +140,26 @@ const CompanyProfile = () => {
       </button>
 
       {isOpen && (
-        <form className='p-4 border-t border-gray_r-6' onSubmit={handleSubmit(onSubmitHandler)}>
+        <form
+          className='p-4 border-t border-gray_r-6'
+          onSubmit={(e) => {
+            e.preventDefault();
+            setChangeConfirmation(true);
+          }}
+        >
           <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
             <div>
               <label className='block mb-3'>Klasifikasi Jenis Usaha</label>
               <Controller
                 name='industry'
                 control={control}
-                render={(props) => <HookFormSelect {...props} options={industries} />}
+                render={(props) => (
+                  <HookFormSelect {...props} options={industries} />
+                )}
               />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.industry?.message}
+              </div>
             </div>
             <div className='flex flex-wrap'>
               <div className='w-full mb-3'>Badan Usaha</div>
@@ -98,8 +167,13 @@ const CompanyProfile = () => {
                 <Controller
                   name='companyType'
                   control={control}
-                  render={(props) => <HookFormSelect {...props} options={companyTypes} />}
+                  render={(props) => (
+                    <HookFormSelect {...props} options={companyTypes} />
+                  )}
                 />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.companyType?.message}
+                </div>
               </div>
               <div className='w-9/12 pl-1'>
                 <input
@@ -108,15 +182,55 @@ const CompanyProfile = () => {
                   className='form-input'
                   placeholder='Cth: Indoteknik Dotcom Gemilang'
                 />
+                <div className='text-caption-2 text-danger-500 mt-1'>
+                  {errors.name?.message}
+                </div>
               </div>
             </div>
             <div>
               <label>Nama Wajib Pajak</label>
-              <input {...register('taxName')} type='text' className='form-input mt-3' />
+              <input
+                {...register('taxName')}
+                type='text'
+                className='form-input mt-3'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.taxName?.message}
+              </div>
+            </div>
+            <div>
+              <label>Alamat Wajib Pajak</label>
+              <input
+                {...register('alamat_wajib_pajak')}
+                type='text'
+                className='form-input mt-3'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.alamat_wajib_pajak?.message}
+              </div>
+            </div>
+            <div>
+              <label>Alamat Bisnis</label>
+              <input
+                {...register('alamat_bisnis')}
+                type='text'
+                className='form-input mt-3'
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.alamat_bisnis?.message}
+              </div>
             </div>
             <div>
               <label>Nomor NPWP</label>
-              <input {...register('npwp')} type='text' className='form-input mt-3' />
+              <input
+                {...register('npwp')}
+                type='text'
+                className='form-input mt-3'
+                maxLength={16}
+              />
+              <div className='text-caption-2 text-danger-500 mt-1'>
+                {errors.npwp?.message}
+              </div>
             </div>
           </div>
           <button type='submit' className='btn-yellow w-full mt-6'>
@@ -125,7 +239,27 @@ const CompanyProfile = () => {
         </form>
       )}
     </>
-  )
-}
+  );
+};
+
+export default CompanyProfile;
+
+const validationSchema = Yup.object().shape({
+  alamat_bisnis: Yup.string().required('Harus di-isi'),
+  alamat_wajib_pajak: Yup.string().required('Harus di-isi'),
+  taxName: Yup.string().required('Harus di-isi'),
+  npwp: Yup.string().required('Harus di-isi'),
+  name: Yup.string().required('Harus di-isi'),
+  industry: Yup.string().required('Harus di-pilih'),
+  companyType: Yup.string().required('Harus di-pilih'),
+});
 
-export default CompanyProfile
+const defaultValues = {
+  industry: '',
+  companyType: '',
+  name: '',
+  taxName: '',
+  npwp: '',
+  alamat_wajib_pajak: '',
+  alamat_bisnis: '',
+};
diff --git a/src/lib/checkout/components/Checkout.jsx b/src/lib/checkout/components/Checkout.jsx
index f63ef457..4c7e852f 100644
--- a/src/lib/checkout/components/Checkout.jsx
+++ b/src/lib/checkout/components/Checkout.jsx
@@ -77,6 +77,9 @@ const Checkout = () => {
     if (!addresses) return;
 
     const matchAddress = (key) => {
+      if (key === 'invoicing') {
+        key = 'invoice';
+      }
       const addressToMatch = getItemAddress(key);
       const foundAddress = addresses.filter(
         (address) => address.id == addressToMatch
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
index b30fa5c9..eefced60 100644
--- a/src/lib/home/components/PreferredBrand.jsx
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -9,7 +9,7 @@ import Link from '@/core/components/elements/Link/Link'
 import axios from 'axios'
 
 const PreferredBrand = () => {
-  let query = 'level_s'
+  let query = ''
   let params = 'prioritas'
   const [isLoading, setIsLoading] = useState(true)
   const [startWith, setStartWith] = useState(null)
@@ -18,7 +18,7 @@ const PreferredBrand = () => {
   const loadBrand = useCallback(async () => {
     setIsLoading(true)
     const name = startWith ? `${startWith}*` : ''
-    const result = await axios(`${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/brands?params=${name}`)
+    const result = await axios(`${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/brands?rows=20`)
     
     setIsLoading(false)
     setManufactures((manufactures) => [...result.data])
@@ -35,9 +35,9 @@ const PreferredBrand = () => {
 
   useEffect(() => {
     loadBrand()
-  }, [loadBrand])
+  }, [])
 
-  const { preferredBrands } = usePreferredBrand(query)
+  // const { preferredBrands } = usePreferredBrand(query)
   const { isMobile, isDesktop } = useDevice()
   const swiperBanner = {
     modules:[Navigation, Pagination, Autoplay],
@@ -59,7 +59,7 @@ const PreferredBrand = () => {
   return (
     <div className='px-4 sm:px-0'>
       <div className='flex justify-between items-center mb-4'>
-        <div className='font-semibold sm:text-h-lg'>Brand Pilihan</div>
+        <h1 className='font-semibold text-[14px] sm:text-h-lg'><Link href='/shop/brands' className='!text-black font-semibold'>Brand Pilihan</Link></h1>
         {isDesktop && (
           <Link href='/shop/brands' className='!text-red-500 font-semibold'>
             Lihat Semua
diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx
index c2f76069..ae8d5d6f 100644
--- a/src/lib/home/components/PromotionProgram.jsx
+++ b/src/lib/home/components/PromotionProgram.jsx
@@ -16,7 +16,7 @@ const BannerSection = () => {
   return (
     <div className='px-4 sm:px-0'>
       <div className='flex justify-between items-center mb-4 '>
-        <div className='font-semibold sm:text-h-lg'>Promo Tersedia</div>
+        <h1 className='font-semibold text-[14px] sm:text-h-lg'> <Link href='/shop/promo' className='!text-black font-semibold' >Promo Tersedia</Link></h1>
         {isDesktop && (
           <Link href='/shop/promo' className='!text-red-500 font-semibold'>
           Lihat Semua
diff --git a/src/lib/product/api/productSimilarApi.js b/src/lib/product/api/productSimilarApi.js
index ecd6724a..51cc17fa 100644
--- a/src/lib/product/api/productSimilarApi.js
+++ b/src/lib/product/api/productSimilarApi.js
@@ -19,7 +19,7 @@ const productSimilarApi = async ({ query, source }) => {
     }
   }
   const dataProductSimilar = await axios(
-    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=${query}&page=1&orderBy=popular-weekly&operation=OR&priceFrom=1`
+    `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/search?q=${query}&page=1&orderBy=popular-weekly&operation=OR&priceFrom=1&source=similar`
   )
   if (dataflashSale) {
     dataProductSimilar.data.response.products = [
diff --git a/src/pages/api/activation-request.js b/src/pages/api/activation-request.js
index 98d27f78..2b8ccec3 100644
--- a/src/pages/api/activation-request.js
+++ b/src/pages/api/activation-request.js
@@ -1,27 +1,29 @@
-import odooApi from '@/core/api/odooApi'
-import mailer from '@/core/utils/mailer'
+import odooApi from '@/core/api/odooApi';
+import mailer from '@/core/utils/mailer';
 
 export default async function handler(req, res) {
   try {
-    const { email } = req.body
-    let result = await odooApi('POST', '/api/v1/user/activation-request', { email })
+    const { email } = req.body;
+    let result = await odooApi('POST', '/api/v1/user/activation-request', {
+      email,
+    });
     if (result.activationRequest) {
       mailer.sendMail({
-        from: 'Indoteknik.com <noreply@indoteknik.com>',
+        from: 'noreply@indoteknik.com',
         to: result.user.email,
         subject: 'Permintaan Aktivasi Akun Indoteknik',
         html: `
           <h1>Permintaan Aktivasi Akun Indoteknik</h1>
           <br>
           <p>Aktivasi akun anda melalui link berikut: <a href="${process.env.NEXT_PUBLIC_SELF_HOST}/activate?token=${result.token}">Aktivasi Akun</a></p>
-        `
-      })
+        `,
+      });
     }
-    delete result.user
-    delete result.token
-    res.status(200).json(result)
+    delete result.user;
+    delete result.token;
+    res.status(200).json(result);
   } catch (error) {
-    console.log(error)
-    res.status(400).json({ error: error.message })
+    console.log(error);
+    res.status(400).json({ error: error.message });
   }
 }
diff --git a/src/pages/api/shop/brands.js b/src/pages/api/shop/brands.js
index cc64a7e7..9c2824b3 100644
--- a/src/pages/api/shop/brands.js
+++ b/src/pages/api/shop/brands.js
@@ -24,6 +24,8 @@ export default async function handler(req, res) {
           params = `name_s:${req.query.params}`.toLowerCase();
       }
     }
+    if(req.query.rows) rows = req.query.rows;
+    
     const url = `${SOLR_HOST}/solr/brands/select?q=${params}&q.op=OR&indent=true&rows=${rows}&${sort}`;
     let brands = await axios(url);
     let dataBrands = responseMap(brands.data.response.docs);
diff --git a/src/pages/api/shop/finish-checkout.js b/src/pages/api/shop/finish-checkout.js
index 9eaa36db..4dcc915c 100644
--- a/src/pages/api/shop/finish-checkout.js
+++ b/src/pages/api/shop/finish-checkout.js
@@ -1,60 +1,66 @@
-import odooApi from '@/core/api/odooApi'
-import mailer from '@/core/utils/mailer'
-import FinishCheckoutEmail from '@/lib/checkout/email/FinishCheckoutEmail'
-import { render } from '@react-email/render'
-import axios from 'axios'
-import camelcaseObjectDeep from 'camelcase-object-deep'
+import odooApi from '@/core/api/odooApi';
+import mailer from '@/core/utils/mailer';
+import FinishCheckoutEmail from '@/lib/checkout/email/FinishCheckoutEmail';
+import { render } from '@react-email/render';
+import axios from 'axios';
+import camelcaseObjectDeep from 'camelcase-object-deep';
 
 export default async function handler(req, res) {
-  const { orderName = null } = req.query
+  const { orderName = null } = req.query;
 
   if (!orderName) {
-    return res.status(422).json({ error: 'parameter missing' })
+    return res.status(422).json({ error: 'parameter missing' });
   }
 
-  let { auth } = req.cookies
+  let { auth } = req.cookies;
 
   if (!auth) {
-    return res.status(401).json({ error: 'Unauthorized' })
+    return res.status(401).json({ error: 'Unauthorized' });
   }
-  auth = JSON.parse(auth)
+  auth = JSON.parse(auth);
 
-  const midtransAuthKey = btoa(process.env.MIDTRANS_SERVER_KEY + ':')
+  const midtransAuthKey = btoa(process.env.MIDTRANS_SERVER_KEY + ':');
   const midtransHeaders = {
     Accept: 'application/json',
     'Content-Type': 'application/json',
-    Authorization: `Basic ${midtransAuthKey}`
-  }
-  let midtransStatus = {}
+    Authorization: `Basic ${midtransAuthKey}`,
+  };
+  let midtransStatus = {};
   try {
-    midtransStatus = await axios.get(`${process.env.MIDTRANS_HOST}/v2/${orderName}/status`, {
-      headers: midtransHeaders
-    })
-    midtransStatus = camelcaseObjectDeep(midtransStatus.data)
+    midtransStatus = await axios.get(
+      `${process.env.MIDTRANS_HOST}/v2/${orderName}/status`,
+      {
+        headers: midtransHeaders,
+      }
+    );
+    midtransStatus = camelcaseObjectDeep(midtransStatus.data);
   } catch (error) {
-    console.log(error)
+    console.log(error);
   }
 
-  let statusPayment = 'manual'
+  let statusPayment = 'manual';
   if (midtransStatus?.orderId) {
-    const transactionStatus = midtransStatus.transactionStatus
-    statusPayment = 'failed'
+    const transactionStatus = midtransStatus.transactionStatus;
+    statusPayment = 'failed';
     if (['capture', 'settlement'].includes(transactionStatus)) {
-      statusPayment = 'success'
+      statusPayment = 'success';
     } else if (transactionStatus == 'pending') {
-      statusPayment = 'pending'
+      statusPayment = 'pending';
     }
   }
 
-  const query = `name=${orderName.replaceAll('-', '/')}&limit=1&context=quotation`
+  const query = `name=${orderName.replaceAll(
+    '-',
+    '/'
+  )}&limit=1&context=quotation`;
   const searchTransaction = await odooApi(
     'GET',
     `/api/v1/partner/${auth.partnerId}/sale_order?${query}`,
     {},
     { Token: auth.token }
-  )
+  );
   if (searchTransaction.saleOrderTotal == 0) {
-    return res.status(400).json({ error: 'Transaction Not Found' })
+    return res.status(400).json({ error: 'Transaction Not Found' });
   }
 
   let transaction = await odooApi(
@@ -62,17 +68,17 @@ export default async function handler(req, res) {
     `/api/v1/partner/${auth.partnerId}/sale_order/${searchTransaction.saleOrders[0].id}`,
     {},
     { Token: auth.token }
-  )
+  );
   if (!transaction?.id) {
-    return res.status(400).json({ error: 'Transaction Detail Not Found' })
+    return res.status(400).json({ error: 'Transaction Detail Not Found' });
   }
 
-  transaction.subtotal = 0
-  transaction.discountTotal = 0
+  transaction.subtotal = 0;
+  transaction.discountTotal = 0;
   for (const product of transaction.products) {
-    transaction.subtotal += product.price.price * product.quantity
+    transaction.subtotal += product.price.price * product.quantity;
     transaction.discountTotal -=
-      (product.price.price - product.price.priceDiscount) * product.quantity
+      (product.price.price - product.price.priceDiscount) * product.quantity;
   }
 
   const emailMessage = render(
@@ -81,14 +87,14 @@ export default async function handler(req, res) {
       payment={midtransStatus}
       statusPayment={statusPayment}
     />
-  )
+  );
 
   mailer.sendMail({
-    from: 'sales@indoteknik.com',
+    from: 'noreply@indoteknik.com',
     to: transaction.address.customer.email,
     subject: 'Pembelian di Indoteknik.com',
-    html: emailMessage
-  })
+    html: emailMessage,
+  });
 
-  return res.status(200).json({ description: 'success' })
+  return res.status(200).json({ description: 'success' });
 }
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 0e87205e..6077c192 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -18,7 +18,7 @@ import { getAuth } from '~/libs/auth';
 import useProductDetail from '~/modules/product-detail/stores/useProductDetail';
 
 const BasicLayout = dynamic(() =>
-  import('@/core/components/layouts/BasicLayout')
+  import('@/core/components/layouts/BasicLayout'),{ssr: false}
 );
 const HeroBanner = dynamic(() => import('@/components/ui/HeroBanner'), {
   loading: () => <HeroBannerSkeleton />,
@@ -55,24 +55,24 @@ const ProgramPromotion = dynamic(() =>
 );
 
 const BannerSection = dynamic(() =>
-  import('@/lib/home/components/BannerSection')
+  import('@/lib/home/components/BannerSection'), {ssr: false}
 );  
 const CategoryHomeId = dynamic(() =>
-  import('@/lib/home/components/CategoryHomeId')
+  import('@/lib/home/components/CategoryHomeId'), {ssr: false}
 );
 
 const CategoryDynamic = dynamic(() =>
-  import('@/lib/home/components/CategoryDynamic')
+  import('@/lib/home/components/CategoryDynamic'), {ssr: false}
 );
 
 const CategoryDynamicMobile = dynamic(() =>
-import('@/lib/home/components/CategoryDynamicMobile')
+import('@/lib/home/components/CategoryDynamicMobile'), {ssr: false}
 );
 
 const CustomerReviews = dynamic(() =>
-  import('@/lib/review/components/CustomerReviews')
+  import('@/lib/review/components/CustomerReviews'), {ssr: false}
 ); // need to ssr:false
-const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList')); // need to ssr: false
+const ServiceList = dynamic(() => import('@/lib/home/components/ServiceList'), {ssr: false}); // need to ssr: false
 
 
 
@@ -148,11 +148,11 @@ export default function Home({categoryId}) {
               </DelayRender>
               </>
             )}
-            <PromotinProgram />
+            {/* <PromotinProgram /> */}
             {dataCategories &&(
               <CategoryPilihan categories={dataCategories} />
             )}
-            <CategoryDynamic />
+            <CategoryDynamic /> 
             <CategoryHomeId />
             <BannerSection />
             <CustomerReviews />
@@ -183,7 +183,7 @@ export default function Home({categoryId}) {
             </>
           )}
           <DelayRender renderAfter={600}>
-            <PromotinProgram />
+            {/* <PromotinProgram /> */}
           </DelayRender>
           <DelayRender renderAfter={600}>
             {dataCategories &&(
diff --git a/src/pages/login.jsx b/src/pages/login.jsx
index 9a1aa85b..07d13784 100644
--- a/src/pages/login.jsx
+++ b/src/pages/login.jsx
@@ -1,3 +1,5 @@
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
 import Seo from '@/core/components/Seo';
 import SimpleFooter from '@/core/components/elements/Footer/SimpleFooter';
 import BasicLayout from '@/core/components/layouts/BasicLayout';
@@ -5,8 +7,18 @@ import DesktopView from '@/core/components/views/DesktopView';
 import MobileView from '@/core/components/views/MobileView';
 import LoginComponent from '@/lib/auth/components/Login';
 import AccountActivation from '~/modules/account-activation';
+import useAuth from '@/core/hooks/useAuth';
 
 export default function Login() {
+  const router = useRouter();
+  const auth = useAuth();
+
+  useEffect(() => {
+    if (auth) {
+      router.push('/');
+    }
+  }, [auth, router]);
+
   return (
     <>
       <Seo title='Login - Indoteknik.com' />
diff --git a/src/pages/my/address/[id]/edit.jsx b/src/pages/my/address/[id]/edit.jsx
index bd680b90..c552659b 100644
--- a/src/pages/my/address/[id]/edit.jsx
+++ b/src/pages/my/address/[id]/edit.jsx
@@ -1,11 +1,11 @@
-import Seo from '@/core/components/Seo'
-import AppLayout from '@/core/components/layouts/AppLayout'
-import BasicLayout from '@/core/components/layouts/BasicLayout'
-import DesktopView from '@/core/components/views/DesktopView'
-import MobileView from '@/core/components/views/MobileView'
-import addressApi from '@/lib/address/api/addressApi'
-import EditAddressComponent from '@/lib/address/components/EditAddress'
-import IsAuth from '@/lib/auth/components/IsAuth'
+import Seo from '@/core/components/Seo';
+import AppLayout from '@/core/components/layouts/AppLayout';
+import BasicLayout from '@/core/components/layouts/BasicLayout';
+import DesktopView from '@/core/components/views/DesktopView';
+import MobileView from '@/core/components/views/MobileView';
+import addressApi from '@/lib/address/api/addressApi';
+import EditAddressComponent from '@/lib/address/components/EditAddress';
+import IsAuth from '@/lib/auth/components/IsAuth';
 
 export default function EditAddress({ id, defaultValues }) {
   return (
@@ -24,12 +24,12 @@ export default function EditAddress({ id, defaultValues }) {
         </BasicLayout>
       </DesktopView>
     </IsAuth>
-  )
+  );
 }
 
 export async function getServerSideProps(context) {
-  const { id } = context.query
-  const address = await addressApi({ id })
+  const { id } = context.query;
+  const address = await addressApi({ id });
   const defaultValues = {
     type: address.type,
     name: address.name,
@@ -41,7 +41,8 @@ export async function getServerSideProps(context) {
     oldDistrict: address.district?.id || '',
     district: '',
     oldSubDistrict: address.subDistrict?.id || '',
-    subDistrict: ''
-  }
-  return { props: { id, defaultValues } }
+    subDistrict: '',
+    business_name: '',
+  };
+  return { props: { id, defaultValues } };
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index b3ca85f4..6447284e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -98,7 +98,7 @@ button {
             border
             text-gray_r-12
             border-gray_r-7
-            !bg-white
+            bg-white
             bg-transparent
             w-full
             leading-none
@@ -117,7 +117,7 @@ button {
     }
 
     .form-msg-danger {
-        @apply text-danger-600 mt-2 block;
+        @apply text-danger-600 mt-2 block text-sm;
     }
 
     .btn-yellow,
diff --git a/tsconfig.json b/tsconfig.json
index 3afcd9ea..96670169 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES5",
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ESNext"
-    ],
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -33,10 +29,10 @@
     "**/*.ts",
     "**/*.tsx",
     "**/*.jsx",
-    ".next/types/**/*.ts"
-, "src/pages/shop/promo/index.tsx", "src/pages/shop/promo/[slug].jsx", "src/lib/promo/hooks/usePromotionSearch.js"  ],
-  "exclude": [
-    "node_modules",
-    "src"
-  ]
+    ".next/types/**/*.ts",
+    "src-migrate/**/*",
+    "src/pages/shop/promo/index.tsx",
+    "src/pages/shop/promo/[slug].jsx"
+  ],
+  "exclude": ["node_modules", "src"]
 }