invoice, invoice detail, address, create address, edit address, wishlist

9 files changed, 803 insertions, 495 deletions

diff --git a/src/lib/address/components/Addresses.jsx b/src/lib/address/components/Addresses.jsx
index 3ac06b6c..a2adecb1 100644
--- a/src/lib/address/components/Addresses.jsx
+++ b/src/lib/address/components/Addresses.jsx
@@ -4,13 +4,15 @@ 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'
 
 const Addresses = () => {
   const router = useRouter()
   const { select = null } = router.query
-  const auth = useAuth()
   const { addresses } = useAddresses()
-  const selectedAdress = getItemAddress(select || '')
+  const selectedAddress = getItemAddress(select || '')
   const changeSelectedAddress = (id) => {
     if (!select) return
     updateItemAddress(select, id)
@@ -26,43 +28,96 @@ const Addresses = () => {
   }
 
   return (
-    <div className='p-4'>
-      <div className='text-right'>
-        <Link href='/my/address/create'>Tambah Alamat</Link>
-      </div>
+    <>
+      <MobileView>
+        <div className='p-4'>
+          <div className='text-right'>
+            <Link href='/my/address/create'>Tambah Alamat</Link>
+          </div>
+
+          <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'
+              return (
+                <AddressCard
+                  key={index}
+                  address={address}
+                  type={type}
+                  changeSelectedAddress={changeSelectedAddress}
+                  selectedAddress={selectedAddress}
+                  select={select}
+                />
+              )
+            })}
+          </div>
+        </div>
+      </MobileView>
 
-      <div className='grid gap-y-4 mt-4'>
-        {addresses.data?.map((address, index) => {
-          let type = address.type.charAt(0).toUpperCase() + address.type.slice(1) + ' Address'
-          return (
-            <div
-              key={index}
-              className={
-                'p-4 rounded-md border ' +
-                (selectedAdress && selectedAdress == address.id
-                  ? 'border-gray_r-7 bg-gray_r-4'
-                  : 'border-gray_r-7')
-              }
-            >
-              <div onClick={() => changeSelectedAddress(address.id)}>
-                <div className='flex gap-x-2'>
-                  <div className='badge-red'>{type}</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>}
-                <p className='mt-1 leading-6 text-gray_r-11'>{address.street}</p>
-              </div>
-              <Link
-                href={`/my/address/${address.id}/edit`}
-                className='btn-light bg-white mt-3 w-full !text-gray_r-11'
-              >
-                Ubah Alamat
+      <DesktopView>
+        <div className='container mx-auto flex py-10'>
+          <div className='w-3/12 pr-4'>
+            <Menu />
+          </div>
+          <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+            <div className='flex items-center mb-6'>
+              <h1 className='text-title-sm font-semibold'>Daftar Alamat</h1>
+              <Link href='/my/address/create' className='btn-solid-red py-2 px-3 text-gray_r-1 h-fit ml-auto'>
+                Tambah Alamat
               </Link>
             </div>
-          )
-        })}
+
+            <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'
+                return (
+                  <AddressCard
+                    key={index}
+                    address={address}
+                    type={type}
+                    changeSelectedAddress={changeSelectedAddress}
+                    selectedAddress={selectedAddress}
+                    select={select}
+                  />
+                )
+              })}
+            </div>
+          </div>
+        </div>
+      </DesktopView>
+    </>
+  )
+}
+
+const AddressCard = ({ address, selectedAddress, changeSelectedAddress, type, select }) => {
+  const auth = useAuth()
+
+  return (
+    <div
+      className={`p-4 rounded-md border 
+        ${
+          (selectedAddress && selectedAddress == address.id
+            ? 'border-gray_r-7 bg-gray_r-4'
+            : 'border-gray_r-7') +
+          ' ' +
+          (select && 'cursor-pointer hover:bg-gray_r-4 transition')
+        }`}
+    >
+      <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>}
+        </div>
+        <p className='font-medium mt-2'>{address.name}</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`}
+        className='btn-light bg-white mt-3 w-full !text-gray_r-11'
+      >
+        Ubah Alamat
+      </Link>
     </div>
   )
 }
diff --git a/src/lib/address/components/CreateAddress.jsx b/src/lib/address/components/CreateAddress.jsx
index 849b4c01..475d8548 100644
--- a/src/lib/address/components/CreateAddress.jsx
+++ b/src/lib/address/components/CreateAddress.jsx
@@ -10,6 +10,7 @@ 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'
 
 const CreateAddress = () => {
   const auth = useAuth()
@@ -88,133 +89,119 @@ const CreateAddress = () => {
   }
 
   return (
-    <form
-      className='p-4 flex flex-col gap-y-4'
-      onSubmit={handleSubmit(onSubmitHandler)}
-    >
-      <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-red_r-11 mt-1'>{errors.type?.message}</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>
-        <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-red_r-11 mt-1'>{errors.name?.message}</div>
-      </div>
-
-      <div>
-        <label className='form-label mb-2'>Email</label>
-        <input
-          {...register('email')}
-          placeholder='contoh@email.com'
-          type='email'
-          className='form-input'
-        />
-        <div className='text-caption-2 text-red_r-11 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-red_r-11 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-red_r-11 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-red_r-11 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-red_r-11 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>
-
-      <div>
-        <label className='form-label mb-2'>Kelurahan</label>
-        <Controller
-          name='subDistrict'
-          control={control}
-          render={(props) => (
-            <HookFormSelect
-              {...props}
-              options={subDistricts}
-              disabled={!watchDistrict}
-            />
-          )}
-        />
+      <div className='w-full md:w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+        <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-red_r-11 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-red_r-11 mt-1'>{errors.name?.message}</div>
+            </div>
+
+            <div>
+              <label className='form-label mb-2'>Email</label>
+              <input
+                {...register('email')}
+                placeholder='contoh@email.com'
+                type='email'
+                className='form-input'
+              />
+              <div className='text-caption-2 text-red_r-11 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-red_r-11 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-red_r-11 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-red_r-11 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-red_r-11 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>
+
+            <div>
+              <label className='form-label mb-2'>Kelurahan</label>
+              <Controller
+                name='subDistrict'
+                control={control}
+                render={(props) => (
+                  <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'>
+            Simpan
+          </button>
+        </form>
       </div>
-
-      <button
-        type='submit'
-        className='btn-yellow mt-2 w-full'
-      >
-        Simpan
-      </button>
-    </form>
+    </div>
   )
 }
 
diff --git a/src/lib/address/components/EditAddress.jsx b/src/lib/address/components/EditAddress.jsx
index a832edbc..d754cbd9 100644
--- a/src/lib/address/components/EditAddress.jsx
+++ b/src/lib/address/components/EditAddress.jsx
@@ -9,6 +9,7 @@ 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'
 
 const EditAddress = ({ id, defaultValues }) => {
   const router = useRouter()
@@ -102,133 +103,119 @@ const EditAddress = ({ id, defaultValues }) => {
   }
 
   return (
-    <form
-      className='p-4 flex flex-col gap-y-4'
-      onSubmit={handleSubmit(onSubmitHandler)}
-    >
-      <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-red_r-11 mt-1'>{errors.type?.message}</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>
-        <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-red_r-11 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-red_r-11 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-red_r-11 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-red_r-11 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-red_r-11 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-red_r-11 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>
-
-      <div>
-        <label className='form-label mb-2'>Kelurahan</label>
-        <Controller
-          name='subDistrict'
-          control={control}
-          render={(props) => (
-            <HookFormSelect
-              {...props}
-              options={subDistricts}
-              disabled={!watchDistrict}
-            />
-          )}
-        />
+      <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-red_r-11 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-red_r-11 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-red_r-11 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-red_r-11 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-red_r-11 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-red_r-11 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-red_r-11 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>
+
+            <div>
+              <label className='form-label mb-2'>Kelurahan</label>
+              <Controller
+                name='subDistrict'
+                control={control}
+                render={(props) => (
+                  <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'>
+            Simpan
+          </button>
+        </form>
       </div>
-
-      <button
-        type='submit'
-        className='btn-yellow mt-2 w-full'
-      >
-        Simpan
-      </button>
-    </form>
+    </div>
   )
 }
 
diff --git a/src/lib/auth/components/Menu.jsx b/src/lib/auth/components/Menu.jsx
index 3f2b2fb2..9a73609d 100644
--- a/src/lib/auth/components/Menu.jsx
+++ b/src/lib/auth/components/Menu.jsx
@@ -7,7 +7,7 @@ const Menu = () => {
   const routeStartWith = (route) => router.pathname.startsWith(route)
 
   return (
-    <div className='grid grid-cols-1 border border-gray_r-6 rounded py-2 px-4'>
+    <div className='grid grid-cols-1 bg-white border border-gray_r-6 rounded py-2 px-4'>
       <div className='mt-4 mb-1 font-medium'>Menu</div>
       <LinkItem href='/my/transactions' active={routeStartWith('/my/transaction')}>
         Daftar Transaksi
diff --git a/src/lib/invoice/components/Invoice.jsx b/src/lib/invoice/components/Invoice.jsx
index e34ad8c2..355f36e5 100644
--- a/src/lib/invoice/components/Invoice.jsx
+++ b/src/lib/invoice/components/Invoice.jsx
@@ -4,10 +4,34 @@ import { downloadInvoice, downloadTaxInvoice } from '../utils/invoices'
 import Divider from '@/core/components/elements/Divider/Divider'
 import VariantGroupCard from '@/lib/variant/components/VariantGroupCard'
 import currencyFormat from '@/core/utils/currencyFormat'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
+import Menu from '@/lib/auth/components/Menu'
+import Link from '@/core/components/elements/Link/Link'
+import Image from '@/core/components/elements/Image/Image'
+import { createSlug } from '@/core/utils/slug'
+import { useEffect, useState } from 'react'
 
 const Invoice = ({ id }) => {
   const { invoice } = useInvoice({ id })
 
+  const [totalAmount, setTotalAmount] = useState(0)
+  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0)
+
+  useEffect(() => {
+    if (invoice?.data?.products) {
+      let calculateTotalAmount = 0
+      let calculateTotalDiscountAmount = 0
+      invoice.data.products.forEach((product) => {
+        calculateTotalAmount += product.price.price * product.quantity
+        calculateTotalDiscountAmount +=
+          (product.price.price - product.price.priceDiscount) * product.quantity
+      })
+      setTotalAmount(calculateTotalAmount)
+      setTotalDiscountAmount(calculateTotalDiscountAmount)
+    }
+  }, [invoice])
+
   if (invoice.isLoading) {
     return (
       <div className='flex justify-center my-6'>
@@ -27,74 +51,226 @@ const Invoice = ({ id }) => {
   return (
     invoice.data?.name && (
       <>
-        <div className='flex flex-col gap-y-4 p-4'>
-          <DescriptionRow label='No Invoice'>{invoice.data?.name}</DescriptionRow>
-          <DescriptionRow label='Status Transaksi'>
-            {invoice.data?.amountResidual > 0 ? (
-              <span className='badge-solid-red'>Belum Lunas</span>
-            ) : (
-              <span className='badge-solid-green'>Lunas</span>
-            )}
-          </DescriptionRow>
-          <DescriptionRow label='Purchase Order'>
-            {invoice.data?.purchaseOrderName || '-'}
-          </DescriptionRow>
-          <DescriptionRow label='Ketentuan Pembayaran'>{invoice.data?.paymentTerm}</DescriptionRow>
-          {invoice.data?.amountResidual > 0 && invoice.invoiceDate != invoice.invoiceDateDue && (
-            <DescriptionRow label='Tanggal Jatuh Tempo'>
-              {invoice.data?.invoiceDateDue}
+        <MobileView>
+          <div className='flex flex-col gap-y-4 p-4'>
+            <DescriptionRow label='No Invoice'>{invoice.data?.name}</DescriptionRow>
+            <DescriptionRow label='Status Transaksi'>
+              {invoice.data?.amountResidual > 0 ? (
+                <span className='badge-solid-red'>Belum Lunas</span>
+              ) : (
+                <span className='badge-solid-green'>Lunas</span>
+              )}
+            </DescriptionRow>
+            <DescriptionRow label='Purchase Order'>
+              {invoice.data?.purchaseOrderName || '-'}
+            </DescriptionRow>
+            <DescriptionRow label='Ketentuan Pembayaran'>
+              {invoice.data?.paymentTerm}
             </DescriptionRow>
-          )}
-          <DescriptionRow label='Nama Sales'>{invoice.data?.sales}</DescriptionRow>
-          <DescriptionRow label='Tanggal Invoice'>{invoice.data?.invoiceDate}</DescriptionRow>
-          <div className='flex items-center'>
-            <p className='text-gray_r-11 leading-none'>Invoice</p>
-            <button
-              type='button'
-              className='btn-light py-1.5 px-3 ml-auto'
-              onClick={() => downloadInvoice(invoice.data)}
-            >
-              Download
-            </button>
+            {invoice.data?.amountResidual > 0 && invoice.invoiceDate != invoice.invoiceDateDue && (
+              <DescriptionRow label='Tanggal Jatuh Tempo'>
+                {invoice.data?.invoiceDateDue}
+              </DescriptionRow>
+            )}
+            <DescriptionRow label='Nama Sales'>{invoice.data?.sales}</DescriptionRow>
+            <DescriptionRow label='Tanggal Invoice'>{invoice.data?.invoiceDate}</DescriptionRow>
+            <div className='flex items-center'>
+              <p className='text-gray_r-11 leading-none'>Invoice</p>
+              <button
+                type='button'
+                className='btn-light py-1.5 px-3 ml-auto'
+                onClick={() => downloadInvoice(invoice.data)}
+              >
+                Download
+              </button>
+            </div>
+            <div className='flex items-center'>
+              <p className='text-gray_r-11 leading-none'>Faktur Pajak</p>
+              <button
+                type='button'
+                className='btn-light py-1.5 px-3 ml-auto'
+                onClick={() => downloadTaxInvoice(invoice.data)}
+                disabled={!invoice.data?.efaktur}
+              >
+                Download
+              </button>
+            </div>
           </div>
-          <div className='flex items-center'>
-            <p className='text-gray_r-11 leading-none'>Faktur Pajak</p>
-            <button
-              type='button'
-              className='btn-light py-1.5 px-3 ml-auto'
-              onClick={() => downloadTaxInvoice(invoice.data)}
-              disabled={!invoice.data?.efaktur}
-            >
-              Download
-            </button>
+
+          <Divider />
+
+          <div className='p-4 font-medium'>Detail Penagihan</div>
+
+          <div className='flex flex-col gap-y-4 p-4 border-t border-gray_r-6'>
+            <DescriptionRow label='Nama'>{address?.name}</DescriptionRow>
+            <DescriptionRow label='Email'>{address?.email || '-'}</DescriptionRow>
+            <DescriptionRow label='No Telepon'>{address?.mobile || '-'}</DescriptionRow>
+            <DescriptionRow label='Alamat'>{fullAddress}</DescriptionRow>
           </div>
-        </div>
 
-        <Divider />
+          <Divider />
+
+          <div className='font-medium p-4'>Detail Produk</div>
+
+          <div className='p-4 pt-0 flex flex-col gap-y-3'>
+            <VariantGroupCard variants={invoice.data?.products} buyMore />
+            <div className='flex justify-between mt-3 font-medium'>
+              <p>Total Belanja</p>
+              <p>{currencyFormat(invoice.data?.amountTotal)}</p>
+            </div>
+          </div>
+        </MobileView>
+
+        <DesktopView>
+          <div className='container mx-auto flex py-10'>
+            <div className='w-3/12 pr-4'>
+              <Menu />
+            </div>
+            <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+              <h1 className='text-title-sm font-semibold mb-6'>Invoice & Faktur Pajak</h1>
+
+              <div className='flex items-center gap-x-2 mb-3'>
+                <span className='text-h-sm font-medium'>{invoice?.data?.name}</span>
+                {invoice?.data?.amountResidual > 0 ? (
+                  <div className='badge-solid-red h-fit'>Belum Lunas</div>
+                ) : (
+                  <div className='badge-solid-green h-fit'>Lunas</div>
+                )}
+              </div>
+
+              <button
+                type='button'
+                className='btn-solid-red px-3 py-2'
+                onClick={() => downloadInvoice(invoice.data)}
+              >
+                Download
+              </button>
+
+              <div className='grid grid-cols-2 gap-x-6 mt-6'>
+                <div className='h-fit grid grid-cols-2 gap-y-4'>
+                  <div>Tanggal Invoice</div>
+                  <div>: {invoice?.data?.invoiceDate}</div>
+
+                  <div>Purchase Order</div>
+                  <div>
+                    :{' '}
+                    <button
+                      type='button'
+                      className='inline-block text-red_r-11'
+                      onClick={() => downloadInvoice(invoice.data)}
+                    >
+                      Download
+                    </button>
+                  </div>
+
+                  <div>Ketentuan Pembayaran</div>
+                  <div>: {invoice?.data?.paymentTerm}</div>
+                </div>
+                <div className='h-fit grid grid-cols-2 gap-y-4'>
+                  <div>Nama Sales</div>
+                  <div>: {invoice?.data?.sales}</div>
+
+                  <div>Faktur Pajak</div>
+                  <div>
+                    :{' '}
+                    {invoice.data?.efaktur ? (
+                      <button
+                        type='button'
+                        className='inline-block text-red_r-11'
+                        onClick={() => downloadTaxInvoice(invoice?.data)}
+                      >
+                        Download
+                      </button>
+                    ) : (
+                      '-'
+                    )}
+                  </div>
+                </div>
+              </div>
 
-        <div className='p-4 font-medium'>Detail Penagihan</div>
+              <div className='text-h-sm font-semibold mt-6 mb-4'>Rincian Pembelian</div>
+              <table className='table-data'>
+                <thead>
+                  <tr>
+                    <th>Nama Produk</th>
+                    <th>Jumlah</th>
+                    <th>Harga</th>
+                    <th>Diskon</th>
+                    <th>Subtotal</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {invoice?.data?.products?.map((product) => (
+                    <tr key={product.id}>
+                      <td className='flex'>
+                        <Link
+                          href={createSlug(
+                            '/shop/product/',
+                            product?.parent.name,
+                            product?.parent.id
+                          )}
+                          className='w-[30%] flex-shrink-0'
+                        >
+                          <Image
+                            src={product?.parent?.image}
+                            alt={product?.name}
+                            className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
+                          />
+                        </Link>
+                        <div className='px-2 text-left'>
+                          <Link
+                            href={createSlug(
+                              '/shop/product/',
+                              product?.parent.name,
+                              product?.parent.id
+                            )}
+                            className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
+                          >
+                            {product?.parent?.name}
+                          </Link>
+                          <div className='text-gray_r-11 mt-2'>
+                            {product?.code}{' '}
+                            {product?.attributes.length > 0
+                              ? `| ${product?.attributes.join(', ')}`
+                              : ''}
+                          </div>
+                        </div>
+                      </td>
+                      <td>{product.quantity}</td>
+                      <td>{currencyFormat(product.price.price)}</td>
+                      <td>
+                        {product.price.discountPercentage > 0
+                          ? `${product.price.discountPercentage}%`
+                          : ''}
+                      </td>
+                      <td>{currencyFormat(product.price.priceDiscount * product.quantity)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
 
-        <div className='flex flex-col gap-y-4 p-4 border-t border-gray_r-6'>
-          <DescriptionRow label='Nama'>{address?.name}</DescriptionRow>
-          <DescriptionRow label='Email'>{address?.email || '-'}</DescriptionRow>
-          <DescriptionRow label='No Telepon'>{address?.mobile || '-'}</DescriptionRow>
-          <DescriptionRow label='Alamat'>{fullAddress}</DescriptionRow>
-        </div>
+              <div className='flex justify-end mt-4'>
+                <div className='w-1/4 grid grid-cols-2 gap-y-2 text-gray_r-12/80'>
+                  <div className='text-right'>Subtotal</div>
+                  <div className='text-right font-medium'>{currencyFormat(totalAmount)}</div>
 
-        <Divider />
+                  <div className='text-right'>Total Diskon</div>
+                  <div className='text-right font-medium'>
+                    {currencyFormat(-totalDiscountAmount)}
+                  </div>
 
-        <div className='font-medium p-4'>Detail Produk</div>
+                  <div className='text-right'>PPN 11% (Incl.)</div>
+                  <div className='text-right font-medium'>{currencyFormat(totalAmount * 0.11)}</div>
 
-        <div className='p-4 pt-0 flex flex-col gap-y-3'>
-          <VariantGroupCard
-            variants={invoice.data?.products}
-            buyMore
-          />
-          <div className='flex justify-between mt-3 font-medium'>
-            <p>Total Belanja</p>
-            <p>{currencyFormat(invoice.data?.amountTotal)}</p>
+                  <div className='text-right'>Grand Total</div>
+                  <div className='text-right font-medium text-gray_r-12'>
+                    {currencyFormat(invoice.data?.amountTotal)}
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
-        </div>
+        </DesktopView>
       </>
     )
   )
diff --git a/src/lib/invoice/components/Invoices.jsx b/src/lib/invoice/components/Invoices.jsx
index ab318a3c..51041316 100644
--- a/src/lib/invoice/components/Invoices.jsx
+++ b/src/lib/invoice/components/Invoices.jsx
@@ -16,6 +16,9 @@ import Link from '@/core/components/elements/Link/Link'
 import currencyFormat from '@/core/utils/currencyFormat'
 import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
 import { downloadInvoice, downloadTaxInvoice } from '../utils/invoices'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
+import Menu from '@/lib/auth/components/Menu'
 
 const Invoices = () => {
   const router = useRouter()
@@ -44,133 +47,201 @@ const Invoices = () => {
   }
 
   return (
-    <div className='p-4 flex flex-col gap-y-4'>
-      <form
-        className='flex gap-x-3'
-        onSubmit={handleSubmit}
-      >
-        <input
-          type='text'
-          className='form-input'
-          placeholder='Cari Invoice...'
-          value={inputQuery}
-          onChange={(e) => setInputQuery(e.target.value)}
-        />
-        <button
-          className='btn-light bg-transparent px-3'
-          type='submit'
-        >
-          <MagnifyingGlassIcon className='w-6' />
-        </button>
-      </form>
-
-      {invoices.isLoading && (
-        <div className='flex justify-center my-4'>
-          <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
-        </div>
-      )}
-
-      {!invoices.isLoading && invoices.data?.invoices?.length === 0 && (
-        <Alert
-          type='info'
-          className='text-center'
-        >
-          Tidak ada data invoice
-        </Alert>
-      )}
-
-      {invoices.data?.invoices?.map((invoice, index) => (
-        <div
-          className='p-4 shadow border border-gray_r-3 rounded-md'
-          key={index}
-        >
-          <div className='grid grid-cols-2'>
-            <Link href={`/my/invoice/${invoice.id}`}>
-              <span className='text-caption-2 text-gray_r-11'>No. Invoice</span>
-              <h2 className='text-red_r-11 mt-1'>{invoice.name}</h2>
-            </Link>
-            <div className='flex gap-x-1 justify-end'>
-              {invoice.amountResidual > 0 ? (
-                <div className='badge-solid-red h-fit ml-auto'>Belum Lunas</div>
-              ) : (
-                <div className='badge-solid-green h-fit ml-auto'>Lunas</div>
-              )}
-              <EllipsisVerticalIcon
-                className='w-5 h-5'
-                onClick={() => setToOthers(invoice)}
-              />
-            </div>
-          </div>
-          <Link href={`/my/invoice/${invoice.id}`}>
-            <div className='grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal'>
-              <p>{invoice.invoiceDate}</p>
-              <p className='text-right'>{invoice.paymentTerm}</p>
+    <>
+      <MobileView>
+        <div className='p-4 flex flex-col gap-y-4'>
+          <form className='flex gap-x-3' onSubmit={handleSubmit}>
+            <input
+              type='text'
+              className='form-input'
+              placeholder='Cari Invoice...'
+              value={inputQuery}
+              onChange={(e) => setInputQuery(e.target.value)}
+            />
+            <button className='btn-light bg-transparent px-3' type='submit'>
+              <MagnifyingGlassIcon className='w-6' />
+            </button>
+          </form>
+
+          {invoices.isLoading && (
+            <div className='flex justify-center my-4'>
+              <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
             </div>
-            <hr className='my-3' />
-            <div className='grid grid-cols-2'>
-              <div>
-                <span className='text-caption-2 text-gray_r-11'>No. Purchase Order</span>
-                <p className='mt-1 font-medium text-gray_r-12'>
-                  {invoice.purchaseOrderName || '-'}
-                </p>
-              </div>
-              <div className='text-right'>
-                <span className='text-caption-2 text-gray_r-11'>Total Invoice</span>
-                <p className='mt-1 font-medium text-gray_r-12'>
-                  {currencyFormat(invoice.amountTotal)}
-                </p>
+          )}
+
+          {!invoices.isLoading && invoices.data?.invoices?.length === 0 && (
+            <Alert type='info' className='text-center'>
+              Tidak ada data invoice
+            </Alert>
+          )}
+
+          {invoices.data?.invoices?.map((invoice, index) => (
+            <div className='p-4 shadow border border-gray_r-3 rounded-md' key={index}>
+              <div className='grid grid-cols-2'>
+                <Link href={`/my/invoice/${invoice.id}`}>
+                  <span className='text-caption-2 text-gray_r-11'>No. Invoice</span>
+                  <h2 className='text-red_r-11 mt-1'>{invoice.name}</h2>
+                </Link>
+                <div className='flex gap-x-1 justify-end'>
+                  {invoice.amountResidual > 0 ? (
+                    <div className='badge-solid-red h-fit ml-auto'>Belum Lunas</div>
+                  ) : (
+                    <div className='badge-solid-green h-fit ml-auto'>Lunas</div>
+                  )}
+                  <EllipsisVerticalIcon className='w-5 h-5' onClick={() => setToOthers(invoice)} />
+                </div>
               </div>
+              <Link href={`/my/invoice/${invoice.id}`}>
+                <div className='grid grid-cols-2 text-caption-2 text-gray_r-11 mt-2 font-normal'>
+                  <p>{invoice.invoiceDate}</p>
+                  <p className='text-right'>{invoice.paymentTerm}</p>
+                </div>
+                <hr className='my-3' />
+                <div className='grid grid-cols-2'>
+                  <div>
+                    <span className='text-caption-2 text-gray_r-11'>No. Purchase Order</span>
+                    <p className='mt-1 font-medium text-gray_r-12'>
+                      {invoice.purchaseOrderName || '-'}
+                    </p>
+                  </div>
+                  <div className='text-right'>
+                    <span className='text-caption-2 text-gray_r-11'>Total Invoice</span>
+                    <p className='mt-1 font-medium text-gray_r-12'>
+                      {currencyFormat(invoice.amountTotal)}
+                    </p>
+                  </div>
+                </div>
+              </Link>
+              {invoice.efaktur ? (
+                <div className='badge-green h-fit mt-3 ml-auto flex items-center gap-x-0.5'>
+                  <CheckIcon className='w-4 stroke-2' />
+                  Faktur Pajak
+                </div>
+              ) : (
+                <div className='badge-red h-fit mt-3 ml-auto flex items-center gap-x-0.5'>
+                  <ClockIcon className='w-4 stroke-2' />
+                  Faktur Pajak
+                </div>
+              )}
             </div>
-          </Link>
-          {invoice.efaktur ? (
-            <div className='badge-green h-fit mt-3 ml-auto flex items-center gap-x-0.5'>
-              <CheckIcon className='w-4 stroke-2' />
-              Faktur Pajak
-            </div>
-          ) : (
-            <div className='badge-red h-fit mt-3 ml-auto flex items-center gap-x-0.5'>
-              <ClockIcon className='w-4 stroke-2' />
-              Faktur Pajak
+          ))}
+
+          <Pagination
+            pageCount={pageCount}
+            currentPage={parseInt(page)}
+            url={`/my/invoices${pageQuery}`}
+            className='mt-2 mb-2'
+          />
+
+          <BottomPopup title='Lainnya' active={toOthers} close={() => setToOthers(null)}>
+            <div className='flex flex-col gap-y-4 mt-2'>
+              <button
+                className='text-left disabled:opacity-60'
+                onClick={() => {
+                  downloadInvoice(toOthers)
+                  setToOthers(null)
+                }}
+              >
+                Download Invoice
+              </button>
+              <button
+                className='text-left disabled:opacity-60'
+                disabled={!toOthers?.efaktur}
+                onClick={() => {
+                  downloadTaxInvoice(toOthers)
+                  setToOthers(null)
+                }}
+              >
+                Download Faktur Pajak
+              </button>
             </div>
-          )}
+          </BottomPopup>
         </div>
-      ))}
-
-      <Pagination
-        pageCount={pageCount}
-        currentPage={parseInt(page)}
-        url={`/my/invoices${pageQuery}`}
-        className='mt-2 mb-2'
-      />
-
-      <BottomPopup
-        title='Lainnya'
-        active={toOthers}
-        close={() => setToOthers(null)}
-      >
-        <div className='flex flex-col gap-y-4 mt-2'>
-          <button
-            className='text-left disabled:opacity-60'
-            onClick={() => {
-              downloadInvoice(toOthers)
-              setToOthers(null)
-            }}
-          >
-            Download Invoice
-          </button>
-          <button
-            className='text-left disabled:opacity-60'
-            disabled={!toOthers?.efaktur}
-            onClick={() => {
-              downloadTaxInvoice(toOthers)
-              setToOthers(null)
-            }}
-          >
-            Download Faktur Pajak
-          </button>
+      </MobileView>
+
+      <DesktopView>
+        <div className='container mx-auto flex py-10'>
+          <div className='w-3/12 pr-4'>
+            <Menu />
+          </div>
+          <div className='w-9/12 p-4 bg-white border border-gray_r-6 rounded'>
+            <div className='flex mb-6 items-center justify-between'>
+              <h1 className='text-title-sm font-semibold'>
+                Invoice & Faktur Pajak{' '}
+                {invoices?.data?.invoices ? `(${invoices?.data?.invoices.length})` : ''}
+              </h1>
+              <form className='flex gap-x-2' onSubmit={handleSubmit}>
+                <input
+                  type='text'
+                  className='form-input'
+                  placeholder='Cari Invoice...'
+                  value={inputQuery}
+                  onChange={(e) => setInputQuery(e.target.value)}
+                />
+                <button className='btn-light bg-transparent px-3' type='submit'>
+                  <MagnifyingGlassIcon className='w-6' />
+                </button>
+              </form>
+            </div>
+
+            <table className='table-data'>
+              <thead>
+                <tr>
+                  <th>No. Invoice</th>
+                  <th>No. PO</th>
+                  <th>Tanggal</th>
+                  <th className='!text-left'>Salesperson</th>
+                  <th>Status</th>
+                  <th className='!text-left'>Total</th>
+                </tr>
+              </thead>
+              <tbody>
+                {invoices.isLoading && (
+                  <tr>
+                    <td colSpan={5}>
+                      <div className='flex justify-center my-2'>
+                        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+                      </div>
+                    </td>
+                  </tr>
+                )}
+                {!invoices.isLoading &&
+                  (!invoices?.data?.invoices || invoices?.data?.invoices?.length == 0) && (
+                    <tr>
+                      <td colSpan={6}>Tidak ada data invoice</td>
+                    </tr>
+                  )}
+                {invoices.data?.invoices?.map((invoice) => (
+                  <tr key={invoice.id}>
+                    <td>
+                      <Link href={`/my/invoice/${invoice.id}`}>{invoice.name}</Link>
+                    </td>
+                    <td>{invoice.purchaseOrderName || '-'}</td>
+                    <td>{invoice.invoiceDate}</td>
+                    <td className='!text-left'>{invoice.sales}</td>
+                    <td>
+                      {invoice.amountResidual > 0 ? (
+                        <div className='badge-solid-red h-fit mx-auto'>Belum Lunas</div>
+                      ) : (
+                        <div className='badge-solid-green h-fit mx-auto'>Lunas</div>
+                      )}
+                    </td>
+                    <td className='!text-left'>{currencyFormat(invoice.amountTotal)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+
+            <Pagination
+              pageCount={pageCount}
+              currentPage={parseInt(page)}
+              url={`/my/transactions${pageQuery}`}
+              className='mt-2 mb-2'
+            />
+          </div>
         </div>
-      </BottomPopup>
-    </div>
+      </DesktopView>
+    </>
   )
 }
 
diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index cba7646f..104a7f2d 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -298,14 +298,14 @@ const Transaction = ({ id }) => {
               </button>
 
               <div className='grid grid-cols-2 gap-x-6 mt-6'>
-                <div className='grid grid-cols-2 gap-y-3'>
+                <div className='grid grid-cols-2 gap-y-4'>
                   <div>Nama Sales</div>
                   <div>: {transaction?.data?.sales}</div>
 
                   <div>Tanggal Transaksi</div>
                   <div>: {transaction?.data?.dateOrder}</div>
                 </div>
-                <div className='grid grid-cols-2 gap-y-3'>
+                <div className='grid grid-cols-2 gap-y-4'>
                   <div>Ketentuan Pembayaran</div>
                   <div>: {transaction?.data?.paymentTerm}</div>
 
@@ -398,7 +398,7 @@ const Transaction = ({ id }) => {
                           ? `${product.price.discountPercentage}%`
                           : ''}
                       </td>
-                      <td>{currencyFormat(product.price.priceDiscount)}</td>
+                      <td>{currencyFormat(product.price.priceDiscount * product.quantity)}</td>
                     </tr>
                   ))}
                 </tbody>
diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index 0a772967..30c670ae 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -224,12 +224,28 @@ const Transactions = () => {
                 <tr>
                   <th>No. Transaksi</th>
                   <th>Tanggal</th>
-                  <th className='!text-left'>Sales Person</th>
+                  <th className='!text-left'>Salesperson</th>
                   <th className='!text-left'>Total</th>
                   <th>Status</th>
                 </tr>
               </thead>
               <tbody>
+                {transactions.isLoading && (
+                  <tr>
+                    <td colSpan={5}>
+                      <div className='flex justify-center my-2'>
+                        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+                      </div>
+                    </td>
+                  </tr>
+                )}
+                {!transactions.isLoading &&
+                  (!transactions?.data?.saleOrders ||
+                    transactions?.data?.saleOrders?.length == 0) && (
+                    <tr>
+                      <td colSpan={5}>Tidak ada data transaksi</td>
+                    </tr>
+                  )}
                 {transactions.data?.saleOrders?.map((saleOrder) => (
                   <tr key={saleOrder.id}>
                     <td>
diff --git a/src/lib/wishlist/components/Wishlists.jsx b/src/lib/wishlist/components/Wishlists.jsx
index e61efcc3..e13c61e5 100644
--- a/src/lib/wishlist/components/Wishlists.jsx
+++ b/src/lib/wishlist/components/Wishlists.jsx
@@ -4,6 +4,9 @@ import Spinner from '@/core/components/elements/Spinner/Spinner'
 import ProductCard from '@/lib/product/components/ProductCard'
 import { useRouter } from 'next/router'
 import useWishlists from '../hooks/useWishlists'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
+import Menu from '@/lib/auth/components/Menu'
 
 const Wishlists = () => {
   const router = useRouter()
@@ -22,33 +25,46 @@ const Wishlists = () => {
   }
 
   return (
-    <div className='px-4 py-6'>
-      {wishlists.data?.products?.length == 0 && (
-        <Alert
-          type='info'
-          className='text-center'
-        >
-          Wishlist anda masih kosong
-        </Alert>
-      )}
-
-      <div className='grid grid-cols-2 gap-3'>
-        {wishlists.data?.products.map((product) => (
-          <ProductCard
-            key={product.id}
-            product={product}
-          />
-        ))}
-      </div>
+    <>
+      <MobileView>
+        <div className='px-4 py-6'>
+          {wishlists.data?.products?.length == 0 && (
+            <Alert type='info' className='text-center'>
+              Wishlist anda masih kosong
+            </Alert>
+          )}
 
-      <div className='mt-6'>
-        <Pagination
-          currentPage={page}
-          pageCount={pageCount}
-          url={`/my/wishlist`}
-        />
-      </div>
-    </div>
+          <div className='grid grid-cols-2 gap-3'>
+            {wishlists.data?.products.map((product) => (
+              <ProductCard key={product.id} product={product} />
+            ))}
+          </div>
+
+          <div className='mt-6'>
+            <Pagination currentPage={page} pageCount={pageCount} url={`/my/wishlist`} />
+          </div>
+        </div>
+      </MobileView>
+
+      <DesktopView>
+        <div className='container mx-auto flex py-10'>
+          <div className='w-3/12 pr-4'>
+            <Menu />
+          </div>
+          <div className='w-9/12'>
+            <div className='grid grid-cols-5 gap-3'>
+              {wishlists.data?.products.map((product) => (
+                <ProductCard key={product.id} product={product} />
+              ))}
+            </div>
+
+            <div className='mt-6'>
+              <Pagination currentPage={page} pageCount={pageCount} url={`/my/wishlist`} />
+            </div>
+          </div>
+        </div>
+      </DesktopView>
+    </>
   )
 }