<iman> update switch account

1 files changed, 124 insertions, 63 deletions

diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index f475db1f..ddbb0760 100644
--- a/src/lib/auth/components/Menu.jsx
+++ b/src/lib/auth/components/Menu.jsx
@@ -1,76 +1,137 @@
-import Link from '@/core/components/elements/Link/Link'
-import { useRouter } from 'next/router'
-import ImageNext from 'next/image'
-import whatsappUrl from '@/core/utils/whatsappUrl'
+import Link from '@/core/components/elements/Link/Link';
+import { useRouter } from 'next/router';
+import ImageNext from 'next/image';
+import whatsappUrl from '@/core/utils/whatsappUrl';
+import useAuth from '@/core/hooks/useAuth';
+import Divider from '@/core/components/elements/Divider/Divider';
 
 const Menu = () => {
-  const router = useRouter()
-
-  const routeStartWith = (route) => router.pathname.startsWith(route)
-
+  const router = useRouter();
+  const auth = useAuth();
+  const routeStartWith = (route) => router.pathname.startsWith(route);
   return (
     <div className='grid grid-cols-1 bg-white border border-gray_r-6 rounded py-2 px-4 sticky top-48'>
-      <div className='mt-4 mb-1 font-medium'>Menu</div>
-      <LinkItem href='/my/quotations' active={routeStartWith('/my/quotations')}>
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext src='/images/icon/icon_daftar_quotation.svg' width={18} height={20} />
-          <p>Daftar Quotation</p>
-        </div>
-      </LinkItem>
-      <LinkItem href='/my/transactions' active={routeStartWith('/my/transactions')}>
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext src='/images/icon/icon_daftar_transaksi.svg' width={18} height={20} />
-          <p>Daftar Transaksi</p>
-        </div>
-      </LinkItem>
-      <LinkItem href='/my/shipments' active={routeStartWith('/my/shipments')}>
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext src='/images/icon/icon_pengiriman.svg' width={18} height={20} />
-          <p>Daftar Pengiriman</p>
-        </div>
-      </LinkItem>
-      <LinkItem href='/my/invoices' active={routeStartWith('/my/invoices')}>
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext src='/images/icon/icon_invoice.svg' width={18} height={20} />
-          <p>Invoice & Faktur Pajak</p>
-        </div>
-      </LinkItem>
-      <LinkItem href='/my/wishlist' active={routeStartWith('/my/wishlist')}>
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext src='/images/icon/icon_wishlist.svg' width={18} height={20} />
-          <p>Wishlist</p>
-        </div>
-      </LinkItem>
+      <div className='flex justify-between py-4'>
+        <div className='font-semibold text-gray_r-12'>Akun Saya</div>
+        {auth?.company && (
+          <div className='badge-solid-red mt-1 p-2'>Akun Bisnis</div>
+        )}
+        {!auth?.company && (
+          <div className='badge-gray mt-1 p-2'>Akun Individu</div>
+        )}
+      </div>
+      <div className='mt-2 mb-1 font-medium'>Menu</div>
+      <div className='flex flex-col gap-y-2'>
+        <LinkItem
+          href='/my/quotations'
+          active={routeStartWith('/my/quotations')}
+          className=''
+        >
+          <div className='flex gap-x-3  items-center'>
+            <ImageNext
+              src='/images/icon/icon_daftar_quotation.svg'
+              width={18}
+              height={20}
+            />
+            <p>Daftar Quotation</p>
+          </div>
+        </LinkItem>
+        <LinkItem
+          href='/my/transactions'
+          active={routeStartWith('/my/transactions')}
+        >
+          <div className='flex gap-x-3 items-center'>
+            <ImageNext
+              src='/images/icon/icon_daftar_transaksi.svg'
+              width={18}
+              height={20}
+            />
+            <p>Daftar Transaksi</p>
+          </div>
+        </LinkItem>
+        <LinkItem href='/my/shipments' active={routeStartWith('/my/shipments')}>
+          <div className='flex gap-x-3 items-center'>
+            <ImageNext
+              src='/images/icon/icon_pengiriman.svg'
+              width={18}
+              height={20}
+            />
+            <p>Daftar Pengiriman</p>
+          </div>
+        </LinkItem>
+        <LinkItem href='/my/invoices' active={routeStartWith('/my/invoices')}>
+          <div className='flex gap-x-3 items-center'>
+            <ImageNext
+              src='/images/icon/icon_invoice.svg'
+              width={18}
+              height={20}
+            />
+            <p>Invoice & Faktur Pajak</p>
+          </div>
+        </LinkItem>
+        <LinkItem href='/my/wishlist' active={routeStartWith('/my/wishlist')}>
+          <div className='flex gap-x-3 items-center'>
+            <ImageNext
+              src='/images/icon/icon_wishlist.svg'
+              width={18}
+              height={20}
+            />
+            <p>Wishlist</p>
+          </div>
+        </LinkItem>
+      </div>
       <div className='mt-4 mb-1 font-medium'>Pusat Bantuan</div>
 
-      <LinkItem href={whatsappUrl('', '', '')} rel='noopener noreferrer' target='_blank'>
+      <LinkItem
+        href={whatsappUrl('', '', '')}
+        rel='noopener noreferrer'
+        target='_blank'
+      >
         <div className='flex gap-x-3 items-center'>
-          <ImageNext src='/images/icon/icon_layanan_pelanggan.svg' width={18} height={20} />
+          <ImageNext
+            src='/images/icon/icon_layanan_pelanggan.svg'
+            width={18}
+            height={20}
+          />
           <p>Layanan Pelanggan</p>
         </div>
       </LinkItem>
       <div className='mt-4 mb-1 font-medium'>Pengaturan Akun</div>
-      <LinkItem href='/my/address' active={routeStartWith('/my/address')}>
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext src='/images/icon/icon_daftar_alamat.svg' width={18} height={20} />
-          <p>Daftar Alamat</p>
-        </div>
-      </LinkItem>
-      <LinkItem href='/my/profile' active={routeStartWith('/my/profile')}>
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext src='/images/icon/icon_profile.svg' width={18} height={20} />
-          <p>Profil Saya</p>
-        </div>
-      </LinkItem>
-      <button type='button' className='text-gray_r-12/80 p-2 text-left'>
-        <div className='flex gap-x-3 items-center'>
-          <ImageNext src='/images/icon/icon_logout.svg' width={18} height={20} />
-          <p>Keluar Akun</p>
-        </div>
-      </button>
+      <div className='flex flex-col gap-y-2'>
+        <LinkItem href='/my/address' active={routeStartWith('/my/address')}>
+          <div className='flex gap-x-3 items-center'>
+            <ImageNext
+              src='/images/icon/icon_daftar_alamat.svg'
+              width={18}
+              height={20}
+            />
+            <p>Daftar Alamat</p>
+          </div>
+        </LinkItem>
+        <LinkItem href='/my/profile' active={routeStartWith('/my/profile')}>
+          <div className='flex gap-x-3 items-center'>
+            <ImageNext
+              src='/images/icon/icon_profile.svg'
+              width={18}
+              height={20}
+            />
+            <p>Profil Saya</p>
+          </div>
+        </LinkItem>
+        <button type='button' className='text-gray_r-12/80 p-2 text-left'>
+          <div className='flex gap-x-3 items-center'>
+            <ImageNext
+              src='/images/icon/icon_logout.svg'
+              width={18}
+              height={20}
+            />
+            <p>Keluar Akun</p>
+          </div>
+        </button>
+      </div>
     </div>
-  )
-}
+  );
+};
 
 const LinkItem = ({ children, ...props }) => (
   <Link
@@ -81,6 +142,6 @@ const LinkItem = ({ children, ...props }) => (
   >
     {children}
   </Link>
-)
+);
 
-export default Menu
+export default Menu;