<iman> update reaject button & component position

1 files changed, 207 insertions, 109 deletions

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 03c94ded..8e7cede0 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -143,6 +143,15 @@ const Transaction = ({ id }) => {
     [transaction.data]
   );
 
+  const memoizeVariantGroupCardReject = useMemo(
+    () => (
+      <div className='p-4 pt-0 flex flex-col gap-y-3'>
+        <VariantGroupCard variants={transaction.data?.productsRejectLine} buyMore />
+      </div>
+    ),
+    [transaction.data]
+  );
+
   if (transaction.isLoading) {
     return (
       <div className='flex justify-center my-6'>
@@ -176,7 +185,7 @@ const Transaction = ({ id }) => {
         let idProduct = selectedProduct?.id
         await rejectProductApi({ idSo, idProduct, reason}); 
         closeModal();
-        toast.success("Produk berhasil di reaject")
+        toast.success("Produk berhasil di reject")
         setTimeout(() => {
           window.location.reload();
         }, 1500); 
@@ -329,6 +338,37 @@ const Transaction = ({ id }) => {
 
           <Divider />
 
+          <div className='p-4'>
+            <p className='font-medium'>Invoice</p>
+            <div className='flex flex-col gap-y-3 mt-4'>
+              {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-2'>{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>
+                    <ChevronRightIcon className='w-5 stroke-2' />
+                  </div>
+                </Link>
+              ))}
+              {transaction.data?.invoices?.length === 0 && (
+                <div className='badge-red text-sm px-2'>Belum ada invoice</div>
+              )}
+            </div>
+          </div>
+
+          <Divider />
+
           {!auth?.feature.soApproval && (
             <div className='p-4 flex flex-col gap-y-4'>
               <DescriptionRow label='Purchase Order'>
@@ -354,8 +394,20 @@ const Transaction = ({ id }) => {
           <Divider />
 
           <div className='font-medium p-4'>Detail Produk</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>
+            )}
 
-          {memoizeVariantGroupCard}
+          {transaction?.data?.productsRejectLine.length > 0 && (
+            <div>
+              <div className='font-medium p-4'>Detail Produk Reject</div>
+              {memoizeVariantGroupCardReject}
+            </div>
+          )}
 
           <Divider />
 
@@ -363,37 +415,6 @@ const Transaction = ({ id }) => {
 
           <Divider />
 
-          <div className='p-4'>
-            <p className='font-medium'>Invoice</p>
-            <div className='flex flex-col gap-y-3 mt-4'>
-              {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-2'>{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>
-                    <ChevronRightIcon className='w-5 stroke-2' />
-                  </div>
-                </Link>
-              ))}
-              {transaction.data?.invoices?.length === 0 && (
-                <div className='badge-red text-sm px-2'>Belum ada invoice</div>
-              )}
-            </div>
-          </div>
-
-          <Divider />
-
           <div className='p-4 pt-0'>
             {transaction.data?.status == 'draft' && auth?.feature.soApproval && (
               <div className='flex gap-x-2'>
@@ -561,51 +582,83 @@ const Transaction = ({ id }) => {
                   />
                 </div>
               </div>
-
-              <div className='text-h-sm font-semibold mt-10 mb-4'>
-                Pengiriman
-              </div>
-              <div className='grid grid-cols-3 gap-1'>
-                {transaction?.data?.pickings?.map((airway) => (
-                  <button
-                    className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left'
-                    key={airway?.id}
-                    onClick={() => setIdAWB(airway?.id)}
-                  >
-                    <div>
-                      <span className='text-sm text-gray_r-11'>
-                        No Resi : {airway?.trackingNumber || '-'}{' '}
-                      </span>
-                      <p className='mt-1 font-medium'>{airway?.name}</p>
-                    </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'}
-                      </div>
-                      <ChevronRightIcon className='w-5 stroke-2' />
+              <div className='flex '>
+                <div className='w-1/2'>
+                  <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>
+                    )}
+                  <div className='grid grid-cols-1 gap-1 w-2/3'>
+                    {transaction?.data?.pickings?.map((airway) => (
+                      <button
+                        className='shadow rounded-md p-3 text-gray_r-12 font-normal flex justify-between items-center text-left h-20'
+                        key={airway?.id}
+                        onClick={() => setIdAWB(airway?.id)}
+                      >
+                        <div>
+                          <span className='text-sm text-gray_r-11'>
+                            No Resi : {airway?.trackingNumber || '-'}{' '}
+                          </span>
+                          <p className='mt-1 font-medium'>{airway?.name}</p>
+                        </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'}
+                          </div>
+                          <ChevronRightIcon className='w-5 stroke-2' />
+                        </div>
+                      </button>
+                    ))}
+                  </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>
+                            <ChevronRightIcon className='w-5 stroke-2' />
+                          </div>
+                        </Link>
+                      ))}
                     </div>
-                  </button>
-                ))}
+                </div>
               </div>
-              {transaction?.data?.pickings.length == 0 && (
-                <div className='badge-red text-sm'>Belum ada pengiriman</div>
-              )}
 
-              <div className='text-h-sm font-semibold mt-10 mb-4'>
+              <div className='text-h-sm font-semibold mt-4 mb-4'>
                 Rincian Pembelian
               </div>
-              <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'>
@@ -668,21 +721,14 @@ const Transaction = ({ id }) => {
                           </button>
                         </td>
                       )}
-                      {/* {transaction.data.isReaject && (
-                        <td>
-                          <button
-                            className="bg-gray-400 text-white py-1 px-3 rounded"
-                            onClick={() => openModal(product)}
-                            disabled
-                          >
-                            Direject
-                          </button>
-                        </td>
-                      )} */}
                     </tr>
                   ))}
                 </tbody>
               </table>
+              ) : (
+                <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
@@ -713,6 +759,7 @@ const Transaction = ({ id }) => {
                 </div>
               )}
 
+            {transaction?.data?.products?.map((product) => (
               <div className='flex justify-end mt-4'>
                 <div className='w-1/4 grid grid-cols-2 gap-y-3 text-gray_r-12/80'>
                   <div className='text-right'>Subtotal</div>
@@ -738,33 +785,84 @@ const Transaction = ({ id }) => {
                   </div>
                 </div>
               </div>
+            ))}
 
-              <div className='text-h-sm font-semibold mt-10 mb-4'>Invoice</div>
-              <div className='grid grid-cols-3 gap-4'>
-                {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-2'>{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>
-                      <ChevronRightIcon className='w-5 stroke-2' />
-                    </div>
-                  </Link>
-                ))}
-              </div>
-              {transaction.data?.invoices?.length === 0 && (
-                <div className='badge-red text-sm'>Belum ada invoice</div>
+
+
+              {transaction?.data?.productsRejectLine.length > 0 && (
+                  <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'>
+                            <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='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.price.discountPercentage > 0
+                              ? `${product.price.discountPercentage}%`
+                              : ''}
+                          </td> */}
+                          <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>{currencyFormat(product.quantity * product.price.priceDiscount)}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
               )}
+              
             </div>
           </div>
         </DesktopView>