From bc8e76f00eaa74eb0cc51b79662a53ef34a3ed67 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 24 Mar 2023 17:05:47 +0700
Subject: -

---
 .../elements/Navbar/NavbarUserDropdown.jsx         |  18 +-
 src/core/hooks/useDevice.js                        |   2 -
 src/lib/cart/components/Cart.jsx                   |  15 +-
 src/lib/product/api/productPriceApi.js             |   8 +
 src/lib/product/components/ProductCard.jsx         |  12 +
 .../components/TransactionStatusBadge.jsx          |   2 +-
 src/lib/transaction/components/Transactions.jsx    | 340 ++++++++++++---------
 src/pages/my/transactions.jsx                      |  17 +-
 src/styles/globals.css                             |  32 +-
 9 files changed, 277 insertions(+), 169 deletions(-)
 create mode 100644 src/lib/product/api/productPriceApi.js

diff --git a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
index b735c13f..c08d81ce 100644
--- a/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
+++ b/src/core/components/elements/Navbar/NavbarUserDropdown.jsx
@@ -1,17 +1,25 @@
 import { deleteAuth } from '@/core/utils/auth'
 import Link from '../Link/Link'
+import { useRouter } from 'next/router'
 
 const NavbarUserDropdown = () => {
+  const router = useRouter()
+
+  const logout = () => {
+    deleteAuth()
+    router.push('/login')
+  }
+
   return (
     <div className='navbar-user-dropdown-wrapper'>
       <div className='navbar-user-dropdown'>
-        <Link href='/'>Daftar Transaksi</Link>
-        <Link href='/'>Invoice & Faktur Pajak</Link>
-        <Link href='/'>Wishlist</Link>
+        <Link href='/my/transactions'>Daftar Transaksi</Link>
+        <Link href='/my/invoices'>Invoice & Faktur Pajak</Link>
+        <Link href='/my/wishlist'>Wishlist</Link>
         <Link href='/'>Pengaturan Akun</Link>
-        <Link href='/login' onClick={deleteAuth}>
+        <button type='button' onClick={logout}>
           Keluar Akun
-        </Link>
+        </button>
       </div>
     </div>
   )
diff --git a/src/core/hooks/useDevice.js b/src/core/hooks/useDevice.js
index 387330b0..a8584692 100644
--- a/src/core/hooks/useDevice.js
+++ b/src/core/hooks/useDevice.js
@@ -9,11 +9,9 @@ const useDevice = () => {
       if (window.innerWidth < 768) {
         setIsMobile(true)
         setIsDesktop(false)
-        console.count('m: true | d: false')
       } else {
         setIsMobile(false)
         setIsDesktop(true)
-        console.count('m: false | d: true')
       }
     }
     handleResize()
diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 8bd9e362..8cd6df96 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -128,16 +128,16 @@ const Cart = () => {
           Apakah anda yakin menghapus barang{' '}
           <span className='underline'>{deleteConfirmation?.name}</span> dari keranjang?
         </div>
-        <div className='flex mt-6 gap-x-4'>
+        <div className='flex mt-6 gap-x-4 md:justify-end'>
           <button
-            className='btn-solid-red flex-1'
+            className='btn-solid-red flex-1 md:flex-none'
             type='button'
             onClick={() => deleteProduct(deleteConfirmation?.id)}
           >
             Ya, Hapus
           </button>
           <button
-            className='btn-light flex-1'
+            className='btn-light flex-1 md:flex-none'
             type='button'
             onClick={() => setDeleteConfirmation(null)}
           >
@@ -302,6 +302,15 @@ const Cart = () => {
                 </tr>
               </thead>
               <tbody>
+                {cart.isLoading && (
+                  <tr>
+                    <td colSpan={6}>
+                      <div className='flex justify-center my-2'>
+                        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+                      </div>
+                    </td>
+                  </tr>
+                )}
                 {!cart.isLoading && (!products || products?.length == 0) && (
                   <tr>
                     <td colSpan={6}>Keranjang belanja anda masih kosong</td>
diff --git a/src/lib/product/api/productPriceApi.js b/src/lib/product/api/productPriceApi.js
new file mode 100644
index 00000000..94a68216
--- /dev/null
+++ b/src/lib/product/api/productPriceApi.js
@@ -0,0 +1,8 @@
+import odooApi from '@/core/api/odooApi'
+
+const productPriceApi = async ({ id }) => {
+  const dataProductPrice = await odooApi('GET', `/api/v1/product/template/price/${id}`)
+  return dataProductPrice
+}
+
+export default productPriceApi
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 3454d4fd..5710e9ea 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -2,8 +2,20 @@ import Image from '@/core/components/elements/Image/Image'
 import Link from '@/core/components/elements/Link/Link'
 import currencyFormat from '@/core/utils/currencyFormat'
 import { createSlug } from '@/core/utils/slug'
+import { useEffect, useState } from 'react'
+import productPriceApi from '../api/productPriceApi'
 
 const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
+  const [price, setPrice] = useState(null)
+
+  useEffect(() => {
+    const loadPrice = async () => {
+      const dataPrice = await productPriceApi({ id: product.id })
+      // console.log(dataPrice)
+    }
+    loadPrice()
+  })
+
   if (variant == 'vertical') {
     return (
       <div className='rounded shadow-sm border border-gray_r-4 h-full bg-white'>
diff --git a/src/lib/transaction/components/TransactionStatusBadge.jsx b/src/lib/transaction/components/TransactionStatusBadge.jsx
index 7372e4da..88467c2b 100644
--- a/src/lib/transaction/components/TransactionStatusBadge.jsx
+++ b/src/lib/transaction/components/TransactionStatusBadge.jsx
@@ -1,6 +1,6 @@
 const TransactionStatusBadge = ({ status }) => {
   let badgeProps = {
-    className: ['h-fit'],
+    className: ['h-fit md:text-caption-2'],
     text: ''
   }
   switch (status) {
diff --git a/src/lib/transaction/components/Transactions.jsx b/src/lib/transaction/components/Transactions.jsx
index ccbdede2..3d3dd533 100644
--- a/src/lib/transaction/components/Transactions.jsx
+++ b/src/lib/transaction/components/Transactions.jsx
@@ -15,6 +15,8 @@ import Pagination from '@/core/components/elements/Pagination/Pagination'
 import { toQuery } from 'lodash-contrib'
 import _ from 'lodash'
 import Alert from '@/core/components/elements/Alert/Alert'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
 
 const Transactions = () => {
   const router = useRouter()
@@ -55,161 +57,201 @@ const Transactions = () => {
   }
 
   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 Transaksi...'
-          value={inputQuery}
-          onChange={(e) => setInputQuery(e.target.value)}
-        />
-        <button
-          className='btn-light bg-transparent px-3'
-          type='submit'
-        >
-          <MagnifyingGlassIcon className='w-6' />
-        </button>
-      </form>
-
-      {transactions.isLoading && (
-        <div className='flex justify-center my-4'>
-          <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
-        </div>
-      )}
-
-      {!transactions.isLoading && transactions.data?.saleOrders?.length === 0 && (
-        <Alert
-          type='info'
-          className='text-center'
-        >
-          Tidak ada data transaksi
-        </Alert>
-      )}
-
-      {transactions.data?.saleOrders?.map((saleOrder, index) => (
-        <div
-          className='p-4 shadow border border-gray_r-3 rounded-md'
-          key={index}
-        >
-          <div className='grid grid-cols-2'>
-            <Link href={`/my/transaction/${saleOrder.id}`}>
-              <span className='text-caption-2 text-gray_r-11'>No. Transaksi</span>
-              <h2 className='text-red_r-11 mt-1'>{saleOrder.name}</h2>
-            </Link>
-            <div className='flex gap-x-1 justify-end'>
-              <TransactionStatusBadge status={saleOrder.status} />
-              <EllipsisVerticalIcon
-                className='w-5 h-5'
-                onClick={() => setToOthers(saleOrder)}
-              />
+    <>
+      <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 Transaksi...'
+              value={inputQuery}
+              onChange={(e) => setInputQuery(e.target.value)}
+            />
+            <button className='btn-light bg-transparent px-3' type='submit'>
+              <MagnifyingGlassIcon className='w-6' />
+            </button>
+          </form>
+
+          {transactions.isLoading && (
+            <div className='flex justify-center my-4'>
+              <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
             </div>
-          </div>
-          <Link href={`/my/transaction/${saleOrder.id}`}>
-            <div className='grid grid-cols-2 mt-3'>
-              <div>
-                <span className='text-caption-2 text-gray_r-11'>No. Purchase Order</span>
-                <p className='mt-1 font-medium text-gray_r-12'>
-                  {saleOrder.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'>{saleOrder.invoiceCount} Invoice</p>
+          )}
+
+          {!transactions.isLoading && transactions.data?.saleOrders?.length === 0 && (
+            <Alert type='info' className='text-center'>
+              Tidak ada data transaksi
+            </Alert>
+          )}
+
+          {transactions.data?.saleOrders?.map((saleOrder, index) => (
+            <div className='p-4 shadow border border-gray_r-3 rounded-md' key={index}>
+              <div className='grid grid-cols-2'>
+                <Link href={`/my/transaction/${saleOrder.id}`}>
+                  <span className='text-caption-2 text-gray_r-11'>No. Transaksi</span>
+                  <h2 className='text-red_r-11 mt-1'>{saleOrder.name}</h2>
+                </Link>
+                <div className='flex gap-x-1 justify-end'>
+                  <TransactionStatusBadge status={saleOrder.status} />
+                  <EllipsisVerticalIcon
+                    className='w-5 h-5'
+                    onClick={() => setToOthers(saleOrder)}
+                  />
+                </div>
               </div>
+              <Link href={`/my/transaction/${saleOrder.id}`}>
+                <div className='grid grid-cols-2 mt-3'>
+                  <div>
+                    <span className='text-caption-2 text-gray_r-11'>No. Purchase Order</span>
+                    <p className='mt-1 font-medium text-gray_r-12'>
+                      {saleOrder.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'>
+                      {saleOrder.invoiceCount} Invoice
+                    </p>
+                  </div>
+                </div>
+                <div className='grid grid-cols-2 mt-3'>
+                  <div>
+                    <span className='text-caption-2 text-gray_r-11'>Sales</span>
+                    <p className='mt-1 font-medium text-gray_r-12'>{saleOrder.sales}</p>
+                  </div>
+                  <div className='text-right'>
+                    <span className='text-caption-2 text-gray_r-11'>Total Harga</span>
+                    <p className='mt-1 font-medium text-gray_r-12'>
+                      {currencyFormat(saleOrder.amountTotal)}
+                    </p>
+                  </div>
+                </div>
+              </Link>
             </div>
-            <div className='grid grid-cols-2 mt-3'>
-              <div>
-                <span className='text-caption-2 text-gray_r-11'>Sales</span>
-                <p className='mt-1 font-medium text-gray_r-12'>{saleOrder.sales}</p>
-              </div>
-              <div className='text-right'>
-                <span className='text-caption-2 text-gray_r-11'>Total Harga</span>
-                <p className='mt-1 font-medium text-gray_r-12'>
-                  {currencyFormat(saleOrder.amountTotal)}
-                </p>
-              </div>
+          ))}
+
+          <Pagination
+            pageCount={pageCount}
+            currentPage={parseInt(page)}
+            url={`/my/transactions${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'
+                disabled={!toOthers?.purchaseOrderFile}
+                onClick={() => {
+                  downloadPurchaseOrder(toOthers)
+                  setToOthers(null)
+                }}
+              >
+                Download PO
+              </button>
+              <button
+                className='text-left disabled:opacity-60'
+                disabled={toOthers?.status != 'draft'}
+                onClick={() => {
+                  downloadQuotation(toOthers)
+                  setToOthers(null)
+                }}
+              >
+                Download Quotation
+              </button>
+              <button
+                className='text-left disabled:opacity-60'
+                disabled={toOthers?.status != 'waiting'}
+                onClick={() => {
+                  setToCancel(toOthers)
+                  setToOthers(null)
+                }}
+              >
+                Batalkan Transaksi
+              </button>
             </div>
-          </Link>
-        </div>
-      ))}
-
-      <Pagination
-        pageCount={pageCount}
-        currentPage={parseInt(page)}
-        url={`/my/transactions${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'
-            disabled={!toOthers?.purchaseOrderFile}
-            onClick={() => {
-              downloadPurchaseOrder(toOthers)
-              setToOthers(null)
-            }}
-          >
-            Download PO
-          </button>
-          <button
-            className='text-left disabled:opacity-60'
-            disabled={toOthers?.status != 'draft'}
-            onClick={() => {
-              downloadQuotation(toOthers)
-              setToOthers(null)
-            }}
-          >
-            Download Quotation
-          </button>
-          <button
-            className='text-left disabled:opacity-60'
-            disabled={toOthers?.status != 'waiting'}
-            onClick={() => {
-              setToCancel(toOthers)
-              setToOthers(null)
-            }}
-          >
-            Batalkan Transaksi
-          </button>
-        </div>
-      </BottomPopup>
-
-      <BottomPopup
-        active={toCancel}
-        close={() => setToCancel(null)}
-        title='Batalkan Transaksi'
-      >
-        <div className='leading-7 text-gray_r-12/80'>
-          Apakah anda yakin membatalkan transaksi{' '}
-          <span className='underline'>{toCancel?.name}</span>?
+          </BottomPopup>
+
+          <BottomPopup active={toCancel} close={() => setToCancel(null)} title='Batalkan Transaksi'>
+            <div className='leading-7 text-gray_r-12/80'>
+              Apakah anda yakin membatalkan transaksi{' '}
+              <span className='underline'>{toCancel?.name}</span>?
+            </div>
+            <div className='flex mt-6 gap-x-4'>
+              <button
+                className='btn-solid-red flex-1'
+                type='button'
+                onClick={submitCancelTransaction}
+              >
+                Ya, Batalkan
+              </button>
+              <button className='btn-light flex-1' type='button' onClick={() => setToCancel(null)}>
+                Batal
+              </button>
+            </div>
+          </BottomPopup>
         </div>
-        <div className='flex mt-6 gap-x-4'>
-          <button
-            className='btn-solid-red flex-1'
-            type='button'
-            onClick={submitCancelTransaction}
-          >
-            Ya, Batalkan
-          </button>
-          <button
-            className='btn-light flex-1'
-            type='button'
-            onClick={() => setToCancel(null)}
-          >
-            Batal
-          </button>
+      </MobileView>
+
+      <DesktopView>
+        <div className='container mx-auto flex py-10'>
+          <div className='w-3/12'></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'>Daftar Transaksi</h1>
+              <form className='flex gap-x-2' onSubmit={handleSubmit}>
+                <input
+                  type='text'
+                  className='form-input'
+                  placeholder='Cari Transaksi...'
+                  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 w-full'>
+              <thead>
+                <tr>
+                  <th>No. Transaksi</th>
+                  <th>Tanggal</th>
+                  <th className='!text-left'>Sales Person</th>
+                  <th className='!text-left'>Total</th>
+                  <th>Status</th>
+                </tr>
+              </thead>
+              <tbody>
+                {transactions.data?.saleOrders?.map((saleOrder) => (
+                  <tr key={saleOrder.id}>
+                    <td>
+                      <Link href={`/my/transaction/${saleOrder.id}`}>{saleOrder.name}</Link>
+                    </td>
+                    <td>-</td>
+                    <td className='!text-left'>{saleOrder.sales}</td>
+                    <td className='!text-left'>{currencyFormat(saleOrder.amountTotal)}</td>
+                    <td>
+                      <div className='flex justify-center'>
+                        <TransactionStatusBadge status={saleOrder.status} />
+                      </div>
+                    </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/pages/my/transactions.jsx b/src/pages/my/transactions.jsx
index 30b9be07..a8ca78b8 100644
--- a/src/pages/my/transactions.jsx
+++ b/src/pages/my/transactions.jsx
@@ -1,4 +1,7 @@
 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 IsAuth from '@/lib/auth/components/IsAuth'
 import dynamic from 'next/dynamic'
 
@@ -7,9 +10,17 @@ const TransactionsComponent = dynamic(() => import('@/lib/transaction/components
 export default function Transactions() {
   return (
     <IsAuth>
-      <AppLayout title='Transaksi'>
-        <TransactionsComponent />
-      </AppLayout>
+      <MobileView>
+        <AppLayout title='Transaksi'>
+          <TransactionsComponent />
+        </AppLayout>
+      </MobileView>
+
+      <DesktopView>
+        <BasicLayout>
+          <TransactionsComponent />
+        </BasicLayout>
+      </DesktopView>
     </IsAuth>
   )
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 90761309..7f33abe8 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -394,10 +394,6 @@ button {
     @apply !border-yellow_r-9;
 }
 
-nav:has(> div.overlay) {
-    @apply z-0;
-}
-
 .table-specification {
     @apply max-h-[500px] overflow-y-auto border border-gray_r-6;
 }
@@ -463,6 +459,29 @@ nav:has(> div.overlay) {
     @apply font-medium;
 }
 
+.table-data thead tr {
+    @apply bg-gray_r-3;
+}
+
+.table-data thead th {
+    @apply font-medium;
+}
+
+.table-data thead th,
+.table-data tbody td {
+    @apply py-3
+        text-center;
+}
+
+.table-data tbody td {
+    @apply text-gray_r-12/90;
+}
+
+.table-data tbody tr {
+    @apply border-b
+        border-gray_r-6;
+}
+
 .navbar-user-dropdown-button {
     @apply flex-1
         flex
@@ -480,8 +499,9 @@ nav:has(> div.overlay) {
     @apply line-clamp-1;
 }
 
-.navbar-user-dropdown-wrapper a {
-    @apply text-gray_r-12/80 hover:bg-gray_r-5 font-medium py-2 px-4;
+.navbar-user-dropdown-wrapper a,
+.navbar-user-dropdown-wrapper button {
+    @apply text-gray_r-12/80 hover:bg-gray_r-5 font-medium py-2 px-4 w-full text-left;
 }
 
 .navbar-user-dropdown {
-- 
cgit v1.2.3