bugfix upload po

1 files changed, 213 insertions, 187 deletions

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 9bef895a..85f6163b 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -1,6 +1,6 @@
 import Spinner from '@/core/components/elements/Spinner/Spinner';
 import NextImage from 'next/image';
-import rejectImage from "../../../../public/images/reject.png"
+import rejectImage from '../../../../public/images/reject.png';
 import useTransaction from '../hooks/useTransaction';
 import TransactionStatusBadge from './TransactionStatusBadge';
 import Divider from '@/core/components/elements/Divider/Divider';
@@ -40,7 +40,7 @@ import rejectProductApi from '../api/rejectProductApi';
 import { useRouter } from 'next/router';
 
 const Transaction = ({ id }) => {
-  const router = useRouter()
+  const router = useRouter();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [selectedProduct, setSelectedProduct] = useState(null);
   const [reason, setReason] = useState('');
@@ -152,7 +152,10 @@ const Transaction = ({ id }) => {
   const memoizeVariantGroupCardReject = useMemo(
     () => (
       <div className='p-4 pt-0 flex flex-col gap-y-3'>
-        <VariantGroupCard variants={transaction.data?.productsRejectLine} buyMore />
+        <VariantGroupCard
+          variants={transaction.data?.productsRejectLine}
+          buyMore
+        />
       </div>
     ),
     [transaction.data]
@@ -182,26 +185,25 @@ const Transaction = ({ id }) => {
   };
 
   const handleRejectProduct = async () => {
-    try{
+    try {
       if (!reason.trim()) {
         toast.error('Masukkan alasan terlebih dahulu');
         return;
-      }else{
-        let idSo = transaction?.data.id
-        let idProduct = selectedProduct?.id
-        await rejectProductApi({ idSo, idProduct, reason}); 
+      } else {
+        let idSo = transaction?.data.id;
+        let idProduct = selectedProduct?.id;
+        await rejectProductApi({ idSo, idProduct, reason });
         closeModal();
-        toast.success("Produk berhasil di reject")
+        toast.success('Produk berhasil di reject');
         setTimeout(() => {
           window.location.reload();
-        }, 1500); 
+        }, 1500);
       }
-    }catch(error){
+    } catch (error) {
       toast.error('Gagal reject produk. Silakan coba lagi.');
     }
   };
 
-
   return (
     transaction.data?.name && (
       <>
@@ -390,14 +392,20 @@ const Transaction = ({ id }) => {
                 <p className='text-gray_r-11 leading-none'>Dokumen PO</p>
                 <button
                   type='button'
-                  className='btn-light py-1.5 px-3 ml-auto'
+                  className='inline-block text-danger-500'
                   onClick={
                     transaction.data?.purchaseOrderFile
                       ? () => downloadPurchaseOrder(transaction.data)
-                      : openUploadPo
+                      : transaction?.data.invoices.length < 1
+                      ? openUploadPo
+                      : ''
                   }
                 >
-                  {transaction.data?.purchaseOrderFile ? 'Download' : 'Upload'}
+                  {transaction?.data?.purchaseOrderFile
+                    ? 'Download'
+                    : transaction?.data.invoices.length < 1
+                    ? 'Upload'
+                    : '-'}
                 </button>
               </div>
             </div>
@@ -406,13 +414,13 @@ const Transaction = ({ id }) => {
           <Divider />
 
           <div className='font-medium p-4'>Detail Produk</div>
-          {transaction?.data?.products.length > 0? (
-            <div>
-              {memoizeVariantGroupCard}
-            </div>
+          {transaction?.data?.products.length > 0 ? (
+            <div>{memoizeVariantGroupCard}</div>
           ) : (
-            <div className='badge-red text-sm px-2 ml-4'>Semua produk telah di reject</div>
-            )}
+            <div className='badge-red text-sm px-2 ml-4'>
+              Semua produk telah di reject
+            </div>
+          )}
 
           {transaction?.data?.productsRejectLine.length > 0 && (
             <div>
@@ -594,12 +602,16 @@ const Transaction = ({ id }) => {
                           onClick={
                             transaction.data?.purchaseOrderFile
                               ? () => downloadPurchaseOrder(transaction.data)
-                              : openUploadPo
+                              : transaction?.data.invoices.length < 1
+                              ? openUploadPo
+                              : ''
                           }
                         >
                           {transaction?.data?.purchaseOrderFile
                             ? 'Download'
-                            : 'Upload'}
+                            : transaction?.data.invoices.length < 1
+                            ? 'Upload'
+                            : '-'}
                         </button>
                       </div>
                     </>
@@ -628,9 +640,11 @@ const Transaction = ({ id }) => {
                   <div className='text-h-sm font-semibold mt-10 mb-4'>
                     Pengiriman
                   </div>
-                    {transaction?.data?.pickings.length == 0 && (
-                      <div className='badge-red text-sm'>Belum ada pengiriman</div>
-                    )}
+                  {transaction?.data?.pickings.length == 0 && (
+                    <div className='badge-red text-sm'>
+                      Belum ada pengiriman
+                    </div>
+                  )}
                   <div className='grid grid-cols-1 gap-1 w-2/3'>
                     {transaction?.data?.pickings?.map((airway) => (
                       <button
@@ -646,7 +660,9 @@ const Transaction = ({ id }) => {
                         </div>
                         <div className='flex gap-x-2'>
                           <div className='text-sm text-gray-600 badge-green leading-[1.5] mt-1'>
-                            {airway?.delivered ? 'Pesanan Tiba' : 'Sedang Dikirim'}
+                            {airway?.delivered
+                              ? 'Pesanan Tiba'
+                              : 'Sedang Dikirim'}
                           </div>
                           <ChevronRightIcon className='w-5 stroke-2' />
                         </div>
@@ -655,51 +671,53 @@ const Transaction = ({ id }) => {
                   </div>
                 </div>
                 <div className='invoice w-1/2 '>
-                  <div className='text-h-sm font-semibold mt-10 mb-4 '>Invoice</div>
-                      {transaction.data?.invoices?.length === 0 && (
-                        <div className='badge-red text-sm'>Belum ada invoice</div>
-                      )}
-                    <div className='grid grid-cols-1 gap-1 w-2/3 '>
-                      {transaction.data?.invoices?.map((invoice, index) => (
-                        <Link href={`/my/invoices/${invoice.id}`} key={index}>
-                          <div className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between'>
-                            <div>
-                              <p className='mb-1'>{invoice?.name}</p>
-                              <div className='flex items-center gap-x-1'>
-                                {invoice.amountResidual > 0 ? (
-                                  <div className='badge-red'>Belum Lunas</div>
-                                ) : (
-                                  <div className='badge-green'>Lunas</div>
-                                )}
-                                <p className='text-caption-2 text-gray_r-11'>
-                                  {currencyFormat(invoice.amountTotal)}
-                                </p>
-                              </div>
+                  <div className='text-h-sm font-semibold mt-10 mb-4 '>
+                    Invoice
+                  </div>
+                  {transaction.data?.invoices?.length === 0 && (
+                    <div className='badge-red text-sm'>Belum ada invoice</div>
+                  )}
+                  <div className='grid grid-cols-1 gap-1 w-2/3 '>
+                    {transaction.data?.invoices?.map((invoice, index) => (
+                      <Link href={`/my/invoices/${invoice.id}`} key={index}>
+                        <div className='shadow rounded-md p-4 text-gray_r-12 font-normal flex justify-between'>
+                          <div>
+                            <p className='mb-1'>{invoice?.name}</p>
+                            <div className='flex items-center gap-x-1'>
+                              {invoice.amountResidual > 0 ? (
+                                <div className='badge-red'>Belum Lunas</div>
+                              ) : (
+                                <div className='badge-green'>Lunas</div>
+                              )}
+                              <p className='text-caption-2 text-gray_r-11'>
+                                {currencyFormat(invoice.amountTotal)}
+                              </p>
                             </div>
-                            <ChevronRightIcon className='w-5 stroke-2' />
                           </div>
-                        </Link>
-                      ))}
-                    </div>
+                          <ChevronRightIcon className='w-5 stroke-2' />
+                        </div>
+                      </Link>
+                    ))}
+                  </div>
                 </div>
               </div>
 
               <div className='text-h-sm font-semibold mt-4 mb-4'>
                 Rincian Pembelian
               </div>
-                {transaction?.data?.products?.length > 0? (
-                  <table className='table-data'>
-                    <thead>
-                      <tr>
-                        <th>Nama Produk</th>
-                        {/* <th>Diskon</th> */}
-                        <th>Jumlah</th>
-                        <th>Harga</th>
-                        <th>Subtotal</th>
-                        <th></th>
-                      </tr>
-                    </thead>
-                    <tbody>
+              {transaction?.data?.products?.length > 0 ? (
+                <table className='table-data'>
+                  <thead>
+                    <tr>
+                      <th>Nama Produk</th>
+                      {/* <th>Diskon</th> */}
+                      <th>Jumlah</th>
+                      <th>Harga</th>
+                      <th>Subtotal</th>
+                      <th></th>
+                    </tr>
+                  </thead>
+                  <tbody>
                     {transaction?.data?.products?.map((product) => (
                       <tr key={product.id}>
                         <td className='flex'>
@@ -711,37 +729,37 @@ const Transaction = ({ id }) => {
                             )}
                             className='w-[20%] flex-shrink-0'
                           >
-                          <div className='relative'>
+                            <div className='relative'>
                               <Image
                                 src={product?.parent?.image}
                                 alt={product?.name}
                                 className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md'
                               />
-                            <div className='absolute top-0 right-4 flex  mt-3'>
-                              <div className='gambarB '>
-                                {product.isSni && (
-                                  <ImageNext
-                                    src='/images/sni-logo.png'
-                                    alt='SNI Logo'
-                                    className='w-2 h-4 object-contain object-top   sm:h-4'
-                                    width={50}
-                                    height={50}
-                                  />
-                                )}
-                              </div>
-                              <div className='gambarC  '>
-                                {product.isTkdn && (
-                                  <ImageNext
-                                    src='/images/TKDN.png'
-                                    alt='TKDN'
-                                    className='w-5 h-4 object-contain object-top  ml-1 sm:h-4'
-                                    width={50}
-                                    height={50}
-                                  />
-                                )}
+                              <div className='absolute top-0 right-4 flex  mt-3'>
+                                <div className='gambarB '>
+                                  {product.isSni && (
+                                    <ImageNext
+                                      src='/images/sni-logo.png'
+                                      alt='SNI Logo'
+                                      className='w-2 h-4 object-contain object-top   sm:h-4'
+                                      width={50}
+                                      height={50}
+                                    />
+                                  )}
+                                </div>
+                                <div className='gambarC  '>
+                                  {product.isTkdn && (
+                                    <ImageNext
+                                      src='/images/TKDN.png'
+                                      alt='TKDN'
+                                      className='w-5 h-4 object-contain object-top  ml-1 sm:h-4'
+                                      width={50}
+                                      height={50}
+                                    />
+                                  )}
+                                </div>
                               </div>
                             </div>
-                          </div>
                           </Link>
                           <div className='px-2 text-left'>
                             <Link
@@ -774,33 +792,42 @@ const Transaction = ({ id }) => {
                               {currencyFormat(product.price.price)}
                             </div>
                           )} */}
-                          <div>{currencyFormat(product.price.priceDiscount)}</div>
+                          <div>
+                            {currencyFormat(product.price.priceDiscount)}
+                          </div>
                         </td>
                         <td>{currencyFormat(product.price.subtotal)}</td>
                         {/* {auth?.feature.soApproval && (auth.webRole == 2 || auth.webRole == 3) && (transaction.data.isReaject == false) && ( */}
-                        {auth?.feature.soApproval && (auth.webRole == 2 || auth.webRole == 3) &&  (router.asPath.includes("/my/quotations/"))  && transaction.data?.status == 'draft' && (
-                          <td>
-                            <button
-                              className="bg-red-500 text-white py-1 px-3 rounded"
-                              onClick={() => openModal(product)}
-                            >
-                              Reject
-                            </button>
-                          </td>
-                        )}
+                        {auth?.feature.soApproval &&
+                          (auth.webRole == 2 || auth.webRole == 3) &&
+                          router.asPath.includes('/my/quotations/') &&
+                          transaction.data?.status == 'draft' && (
+                            <td>
+                              <button
+                                className='bg-red-500 text-white py-1 px-3 rounded'
+                                onClick={() => openModal(product)}
+                              >
+                                Reject
+                              </button>
+                            </td>
+                          )}
                       </tr>
                     ))}
                   </tbody>
                 </table>
               ) : (
-                <div className='badge-red text-sm'>Semua produk telah di reject</div>
+                <div className='badge-red text-sm'>
+                  Semua produk telah di reject
+                </div>
               )}
-              
+
               {isModalOpen && (
                 <div className='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center'>
-                  <div className='bg-white p-4 rounded w-96
+                  <div
+                    className='bg-white p-4 rounded w-96
                      ease-in-out opacity-100
-                    transform transition-transform duration-300  scale-100'>
+                    transform transition-transform duration-300  scale-100'
+                  >
                     <h2 className='text-lg mb-2'>Berikan Alasan</h2>
                     <textarea
                       value={reason}
@@ -826,117 +853,116 @@ const Transaction = ({ id }) => {
                 </div>
               )}
 
-            {transaction?.data?.products?.map((product) => (
-              <div className='flex justify-end mt-4' key={product.id}>
-                <div className='w-1/4 grid grid-cols-2 gap-y-3 text-gray_r-12/80'>
-                  <div className='text-right'>Subtotal</div>
-                  <div className='text-right font-medium'>
-                    {currencyFormat(transaction.data?.amountUntaxed)}
-                  </div>
+              {transaction?.data?.products?.map((product) => (
+                <div className='flex justify-end mt-4' key={product.id}>
+                  <div className='w-1/4 grid grid-cols-2 gap-y-3 text-gray_r-12/80'>
+                    <div className='text-right'>Subtotal</div>
+                    <div className='text-right font-medium'>
+                      {currencyFormat(transaction.data?.amountUntaxed)}
+                    </div>
 
-                  <div className='text-right'>PPN 11%</div>
-                  <div className='text-right font-medium'>
-                    {currencyFormat(transaction.data?.amountTax)}
-                  </div>
+                    <div className='text-right'>PPN 11%</div>
+                    <div className='text-right font-medium'>
+                      {currencyFormat(transaction.data?.amountTax)}
+                    </div>
 
-                  <div className='text-right whitespace-nowrap'>
-                    Biaya Pengiriman
-                  </div>
-                  <div className='text-right font-medium'>
-                    {currencyFormat(transaction.data?.deliveryAmount)}
-                  </div>
+                    <div className='text-right whitespace-nowrap'>
+                      Biaya Pengiriman
+                    </div>
+                    <div className='text-right font-medium'>
+                      {currencyFormat(transaction.data?.deliveryAmount)}
+                    </div>
 
-                  <div className='text-right'>Grand Total</div>
-                  <div className='text-right font-medium text-gray_r-12'>
-                    {currencyFormat(transaction.data?.amountTotal)}
+                    <div className='text-right'>Grand Total</div>
+                    <div className='text-right font-medium text-gray_r-12'>
+                      {currencyFormat(transaction.data?.amountTotal)}
+                    </div>
                   </div>
                 </div>
-              </div>
-            ))}
-
-
+              ))}
 
               {transaction?.data?.productsRejectLine.length > 0 && (
-                  <div className='text-h-sm font-semibold mt-10 mb-4'>
-                    Rincian Produk Reject
-                  </div>
+                <div className='text-h-sm font-semibold mt-10 mb-4'>
+                  Rincian Produk Reject
+                </div>
               )}
               {transaction?.data?.productsRejectLine.length > 0 && (
-                  <table className='table-data'>
-                    <thead>
-                      <tr>
-                        <th>Nama Produk</th>
-                        {/* <th>Diskon</th> */}
-                        <th>Jumlah</th>
-                        <th>Harga</th>
-                        <th>Subtotal</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {transaction?.data?.productsRejectLine?.map((product) => (
-                        <tr key={product.id}>
-                          <td className='flex'>
+                <table className='table-data'>
+                  <thead>
+                    <tr>
+                      <th>Nama Produk</th>
+                      {/* <th>Diskon</th> */}
+                      <th>Jumlah</th>
+                      <th>Harga</th>
+                      <th>Subtotal</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {transaction?.data?.productsRejectLine?.map((product) => (
+                      <tr key={product.id}>
+                        <td className='flex'>
+                          <Link
+                            href={createSlug(
+                              '/shop/product/',
+                              product?.parent.name,
+                              product?.parent.id
+                            )}
+                            className='w-[20%] flex-shrink-0'
+                          >
+                            <Image
+                              src={product?.parent?.image}
+                              alt={product?.name}
+                              className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md'
+                            />
+                          </Link>
+                          <div className='px-2 text-left'>
                             <Link
                               href={createSlug(
                                 '/shop/product/',
                                 product?.parent.name,
                                 product?.parent.id
                               )}
-                              className='w-[20%] flex-shrink-0'
+                              className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
                             >
-                              <Image
-                                src={product?.parent?.image}
-                                alt={product?.name}
-                                className='object-contain object-center border border-gray_r-6 h-32 w-full rounded-md'
-                              />
+                              {product?.parent?.name}
                             </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 className='text-gray_r-11 mt-2'>
+                              {product?.code}{' '}
+                              {product?.attributes.length > 0
+                                ? `| ${product?.attributes.join(', ')}`
+                                : ''}
                             </div>
-                          </td>
-                          {/* <td>
+                          </div>
+                        </td>
+                        {/* <td>
                             {product.price.discountPercentage > 0
                               ? `${product.price.discountPercentage}%`
                               : ''}
                           </td> */}
-                          <td>{product.quantity}</td>
-                          <td>
-                            {/* {product.price.discountPercentage > 0 && (
+                        <td>{product.quantity}</td>
+                        <td>
+                          {/* {product.price.discountPercentage > 0 && (
                               <div className='line-through mb-1 text-caption-1 text-gray_r-12/70'>
                                 {currencyFormat(product.price.price)}
                               </div>
                             )} */}
-                            <div>{currencyFormat(product.price.priceDiscount)}</div>
-                          </td>
-                          <td className='flex justify-center'>
-                            <NextImage
-                              src={rejectImage}
-                              alt='Reject'
-                              width={90}
-                              height={30}
-                            /> 
-                          </td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
+                          <div>
+                            {currencyFormat(product.price.priceDiscount)}
+                          </div>
+                        </td>
+                        <td className='flex justify-center'>
+                          <NextImage
+                            src={rejectImage}
+                            alt='Reject'
+                            width={90}
+                            height={30}
+                          />
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
               )}
-                           
             </div>
           </div>
         </DesktopView>