<iman> update switch account

1 files changed, 38 insertions, 14 deletions

diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index 042b1842..06eb6c2d 100644
--- a/src/lib/auth/components/Menu.jsx
+++ b/src/lib/auth/components/Menu.jsx
@@ -5,21 +5,18 @@ import whatsappUrl from '@/core/utils/whatsappUrl';
 import useAuth from '@/core/hooks/useAuth';
 import switchAccountProgresApi from '@/lib/auth/api/switchAccountProgresApi.js';
 import { useState, useEffect } from 'react';
+import { InfoIcon } from 'lucide-react';
 
 const Menu = () => {
   const router = useRouter();
   const auth = useAuth();
-  // console.log('auth', auth);
   const [ubahAkun, setUbahAkun] = useState();
-  // const [isAprove, setIsAprove] = useState();
   useEffect(() => {
     const loadProgres = async () => {
       const progresSwitchAccount = await switchAccountProgresApi();
-      console.log('progresSwitchAccount', progresSwitchAccount);
-      // if (progresSwitchAccount) {
-      // setIsAprove(progresSwitchAccount.status);
-      setUbahAkun(progresSwitchAccount.status);
-      // }
+      if (progresSwitchAccount) {
+        setUbahAkun(progresSwitchAccount.status);
+      }
     };
     loadProgres();
   }, []);
@@ -28,13 +25,40 @@ const Menu = () => {
     <div className='grid grid-cols-1 bg-white border border-gray_r-6 rounded py-2 px-4 sticky top-48'>
       <div className='flex justify-between py-4'>
         <div className='font-semibold text-gray_r-12'>Akun Saya</div>
-        {auth?.company && !ubahAkun && (
-          <div className='badge-solid-red mt-1 p-2'>Akun Bisnis</div>
-        )}
-        {ubahAkun && <div className='badge-solid-red mt-1 p-2'>Review</div>}
-        {!auth?.company && !ubahAkun && (
-          <div className='badge-gray mt-1 p-2'>Akun Individu</div>
-        )}
+        <div className='relative group'>
+          {auth?.company && !(ubahAkun === 'pending') && (
+            <>
+              <div className='badge-solid-red mt-1 p-2 flex flex-row items-center gap-x-2'>
+                <p>Akun Bisnis</p> <InfoIcon size={14} />
+              </div>
+              <div className='absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-700 text-white text-xs rounded py-1 px-2 w-24'>
+                Ini adalah akun bisnis.
+              </div>
+            </>
+          )}
+          {ubahAkun === 'pending' && (
+            <>
+              <div className='badge-yellow mt-1 p-2 flex flex-row items-center gap-x-2'>
+                <p>Review</p>
+                <InfoIcon size={14} />
+              </div>
+              <div className='absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-700 text-white text-xs rounded py-1 px-2'>
+                Akun sedang dalam proses review.
+              </div>
+            </>
+          )}
+          {!auth?.company && !(ubahAkun === 'pending') && (
+            <>
+              <div className='badge-gray mt-1 p-2 flex flex-row items-center gap-x-2'>
+                <p>Akun Individu</p>
+                <InfoIcon size={14} />
+              </div>
+              <div className='absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 hidden group-hover:block bg-gray-700 text-white text-xs rounded py-1 px-2'>
+                Ini adalah akun individu.
+              </div>
+            </>
+          )}
+        </div>
       </div>
       <div className='mt-2 mb-1 font-medium'>Menu</div>
       <div className='flex flex-col gap-y-2'>