Update table-data style

3 files changed, 34 insertions, 26 deletions

diff --git a/src/lib/transaction/components/TransactionStatusBadge.jsx b/src/lib/transaction/components/TransactionStatusBadge.jsx
index 88467c2b..e061587c 100644
--- a/src/lib/transaction/components/TransactionStatusBadge.jsx
+++ b/src/lib/transaction/components/TransactionStatusBadge.jsx
@@ -1,32 +1,32 @@
 const TransactionStatusBadge = ({ status }) => {
   let badgeProps = {
-    className: ['h-fit md:text-caption-2'],
+    className: ['h-fit md:text-caption-2 whitespace-nowrap'],
     text: ''
   }
   switch (status) {
     case 'cancel':
       badgeProps.className.push('badge-solid-red')
-      badgeProps.text = 'Pesanan batal'
+      badgeProps.text = 'Pesanan Batal'
       break
     case 'draft':
       badgeProps.className.push('badge-red')
-      badgeProps.text = 'Pending quotation'
+      badgeProps.text = 'Pending Quotation'
       break
     case 'waiting':
       badgeProps.className.push('badge-yellow')
-      badgeProps.text = 'Pesanan diterima'
+      badgeProps.text = 'Pesanan Diterima'
       break
     case 'sale':
       badgeProps.className.push('badge-yellow')
-      badgeProps.text = 'Pesanan diproses'
+      badgeProps.text = 'Pesanan Diproses'
       break
     case 'shipping':
       badgeProps.className.push('badge-green')
-      badgeProps.text = 'Pesanan dikirim'
+      badgeProps.text = 'Pesanan Dikirim'
       break
     case 'partial_shipping':
       badgeProps.className.push('badge-green')
-      badgeProps.text = 'Dikirim sebagian'
+      badgeProps.text = 'Dikirim Sebagian'
       break
     case 'done':
       badgeProps.className.push('badge-solid-green')
diff --git a/src/pages/google_merchant/products/index.js b/src/pages/google_merchant/products/index.js
index 38b37d29..a1f59d39 100644
--- a/src/pages/google_merchant/products/index.js
+++ b/src/pages/google_merchant/products/index.js
@@ -1,35 +1,42 @@
 import productSearchApi from '@/lib/product/api/productSearchApi'
 import _ from 'lodash-contrib'
 
+const limit = 5000
+
 export async function getServerSideProps() {
-  const limit = 5000
   const queries = {
     limit: 1,
     priceFrom: 1,
     fq: 'image_s:["" TO *]'
   }
   const products = await productSearchApi({ query: _.toQuery(queries) })
-  const pageTotal = Math.ceil(products.response.numFound / limit)
+  const { numFound } = products.response
+  const pageTotal = Math.ceil(numFound / limit)
 
-  return { props: { pageTotal } }
+  return { props: { pageTotal, numFound } }
 }
 
-export default function GoogleMerchantPage({ pageTotal }) {
+export default function GoogleMerchantPage({ pageTotal, numFound }) {
   const numberArray = Array.from({ length: pageTotal }, (_, index) => index)
   return (
     <div className='grid grid-cols-1 gap-y-3 p-4'>
-      <h1 className='text-h-lg font-semibold'>Google Merchant:</h1>
-      {numberArray.map((number) => (
-        <a
-          key={number}
-          href={`/google_merchant/products/${number + 1}.xml`}
-          className='block font-medium text-indigo-600'
-          target='_blank'
-          rel='noreferrer'
-        >
-          Page {number + 1}
-        </a>
-      ))}
+      <h1 className='text-h-lg font-semibold mb-3'>Google Merchant:</h1>
+      {numberArray.map((number) => {
+        const currentPage = number + 1
+        const remainingProducts = numFound - limit * number
+        const productCount = currentPage == pageTotal ? remainingProducts : limit
+        return (
+          <a
+            key={number}
+            href={`/google_merchant/products/${currentPage}.xml`}
+            className='block font-medium text-indigo-600'
+            target='_blank'
+            rel='noreferrer'
+          >
+            Page {currentPage} - ({productCount}) Products
+          </a>
+        )
+      })}
     </div>
   )
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index f1e9f5b1..00c4d08f 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -465,17 +465,18 @@ button {
 }
 
 .table-data thead th {
-    @apply font-medium;
+    @apply font-medium whitespace-nowrap;
 }
 
 .table-data thead th,
 .table-data tbody td {
-    @apply p-3
+    @apply px-3 
+        py-4
         text-center;
 }
 
 .table-data tbody td {
-    @apply text-gray_r-12/90;
+    @apply text-gray_r-12/90 first:whitespace-nowrap;
 }
 
 .table-data tbody tr {