Update with chakra UI theme

1 files changed, 29 insertions, 60 deletions

diff --git a/src/lib/product/components/Product/ColumnsSLA.jsx b/src/lib/product/components/Product/ColumnsSLA.jsx
index 33da703a..e5296f96 100644
--- a/src/lib/product/components/Product/ColumnsSLA.jsx
+++ b/src/lib/product/components/Product/ColumnsSLA.jsx
@@ -1,8 +1,9 @@
 import odooApi from '@/core/api/odooApi'
 import { createSlug } from '@/core/utils/slug'
 import whatsappUrl from '@/core/utils/whatsappUrl'
-import { Button, Spinner } from 'flowbite-react'
-import { memo, useEffect, useState } from 'react'
+import { Box, Skeleton, Tooltip } from '@chakra-ui/react'
+import { Info } from 'lucide-react'
+import { memo } from 'react'
 import { useQuery } from 'react-query'
 
 const ColumnSLA = ({ variant, product }) => {
@@ -12,67 +13,35 @@ const ColumnSLA = ({ variant, product }) => {
   return (
     <>
       <td>
-        {dataSLA.isFetching ? (
-          <div className='text-center'>
-            <Spinner aria-label='Center-aligned spinner example' />
-          </div>
-        ) : dataSLA?.data?.qty > 0 ? (
-          dataSLA?.data?.qty
-        ) : (
-          <a
-            href={whatsappUrl('product', {
-              name: variant.name,
-              manufacture: product.manufacture?.name,
-              url: createSlug('/shop/product/', product.name, product.id, true)
-            })}
-            className='text-danger-500 font-medium'
-            target='_blank'
-            rel='noreferrer noopener'
-          >
-            Tanya Admin
-          </a>
-        )}
+        <Skeleton isLoaded={!dataSLA.isFetching} w='full'>
+          {dataSLA?.data?.qty > 0 ? (
+            dataSLA?.data?.qty
+          ) : (
+            <a
+              href={whatsappUrl('product', {
+                name: variant.name,
+                manufacture: product.manufacture?.name,
+                url: createSlug('/shop/product/', product.name, product.id, true)
+              })}
+              className='text-danger-500 font-medium'
+              target='_blank'
+              rel='noreferrer noopener'
+            >
+              Tanya Admin
+            </a>
+          )}
+        </Skeleton>
       </td>
+
       <td className='flex justify-center'>
-        {dataSLA.isFetching ? (
-          <Button color='gray'>
-            <Spinner aria-label='Alternate spinner button example' />
-            <span className='pl-3'>Loading...</span>
-          </Button>
-        ) : dataSLA?.data?.slaDate != '-' ? (
-          <button
-            type='button'
-            title={`Masa Persiapan Barang ${dataSLA?.data?.slaDate}`}
-            className={`flex gap-x-1 items-center p-2 rounded-lg w-full ${
-              dataSLA?.data?.slaDate === 'indent' ? 'bg-indigo-900' : 'btn-light'
-            }`}
-          >
-            <div
-              className={`flex-1 text-caption-1  ${
-                dataSLA?.data?.slaDate === 'indent' ? 'text-white' : ''
-              }`}
-            >
+        <Skeleton isLoaded={!dataSLA.isFetching} w='75%'>
+          <Tooltip placement='top' label={`Masa Persiapan Barang ${dataSLA?.data?.slaDate}`}>
+            <Box className='border border-gray_r-7 rounded-md p-2 flex justify-center items-center gap-x-2'>
               {dataSLA?.data?.slaDate}
-            </div>
-            <div className='flex-end'>
-              <svg
-                aria-hidden='true'
-                fill='none'
-                stroke='currentColor'
-                stroke-width='1.5'
-                className={`w-7 h-7 ${dataSLA?.data?.slaDate === 'indent' ? 'text-white' : ''}`}
-              >
-                <path
-                  d='M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z'
-                  stroke-linecap='round'
-                  stroke-linejoin='round'
-                ></path>
-              </svg>
-            </div>
-          </button>
-        ) : (
-          '-'
-        )}
+              <Info size={16} />
+            </Box>
+          </Tooltip>
+        </Skeleton>
       </td>
     </>
   )