From f4adb008ae55e4b340c58c32d45af6d0eaf6eb57 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 12 Mar 2025 14:29:42 +0700
Subject: <iman> update detail transaction

---
 src/lib/transaction/components/Transaction.jsx | 278 +++++++++++++++++++++++--
 1 file changed, 260 insertions(+), 18 deletions(-)

(limited to 'src/lib/transaction/components/Transaction.jsx')

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index b2fb2c17..32416bc0 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -49,18 +49,19 @@ const Transaction = ({ id }) => {
   const [reason, setReason] = useState('');
   const auth = useAuth();
   const { transaction } = useTransaction({ id });
+  console.log('transaction', transaction);
   const statusApprovalWeb = transaction.data?.approvalStep;
   const [isLoading, setIsLoading] = useState(false);
   const { queryAirwayBill } = useAirwayBill({ orderId: id });
   const [airwayBillPopup, setAirwayBillPopup] = useState(null);
-
+  const [isOpen, setIsOpen] = useState(false);
   const poNumber = useRef(null);
   const poFile = useRef(null);
   const [uploadPo, setUploadPo] = useState(false);
   const [idAWB, setIdAWB] = useState(null);
   const openUploadPo = () => setUploadPo(true);
   const closeUploadPo = () => setUploadPo(false);
-
+  const [copied, setCopied] = useState(false);
   const submitUploadPo = async () => {
     const file = poFile.current.files[0];
     const name = poNumber.current.value;
@@ -208,7 +209,9 @@ const Transaction = ({ id }) => {
           <p>{currencyFormat(transaction.data?.amountUntaxed)}</p>
         </div>
         <div className='flex justify-between mt-1'>
-          <p className='text-gray_r-12/70'>PPN {((PPN - 1) * 100).toFixed(0)}%</p>
+          <p className='text-gray_r-12/70'>
+            PPN {((PPN - 1) * 100).toFixed(0)}%
+          </p>
           <p>{currencyFormat(transaction.data?.amountTax)}</p>
         </div>
         <div className='flex justify-between mt-1'>
@@ -279,6 +282,35 @@ const Transaction = ({ id }) => {
     }
   };
 
+  const handleCopyClick = (waybillNumber) => {
+    const textToCopy = waybillNumber;
+    console.log('textToCopy', textToCopy);
+    navigator.clipboard.writeText(textToCopy);
+    setCopied(true);
+    toast.success('No Resi Berhasil di Copy');
+    setTimeout(() => setCopied(false), 2000); // Reset copied state after 2 seconds
+  };
+
+  const formatDate = (dateString) => {
+    const months = [
+      'Januari',
+      'Februari',
+      'Maret',
+      'April',
+      'Mei',
+      'Juni',
+      'Juli',
+      'Agustus',
+      'September',
+      'Oktober',
+      'November',
+      'Desember',
+    ];
+
+    const [day, month, year] = dateString.split('/');
+    return `${day} ${months[parseInt(month, 10) - 1]} ${year}`;
+  };
+
   return (
     transaction.data?.name && (
       <>
@@ -615,13 +647,50 @@ const Transaction = ({ id }) => {
                 )}
               </div>
 
-              <div className='flex items-center gap-x-2 mb-3'>
-                <span className='text-h-sm font-medium'>
-                  {transaction?.data?.name}
-                </span>
-                <TransactionStatusBadge status={transaction?.data?.status} />
+              <div className=''>
+                <div
+                  class='flex items-center p-4 mb-4 text-sm border border-yellow-500 text-yellow-800 rounded-lg bg-yellow-50'
+                  role='alert'
+                >
+                  <svg
+                    class='flex-shrink-0 inline w-5 h-5 mr-2'
+                    aria-hidden='true'
+                    fill='currentColor'
+                    viewBox='0 0 20 20'
+                  >
+                    <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
+                  </svg>
+                  <span class='sr-only'>Info Transaksi</span>
+                  <div className='text-justify flex flex-col gap-1'>
+                    <p className='font-bold text-black'>Info Transaksi</p>
+                    <span className='text-black'>
+                      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                      sed do eiusmod tempor incididunt ut labore et dolore magna
+                      aliqua.
+                    </span>
+                  </div>
+                </div>
               </div>
-              <div className='flex gap-x-4'>
+              <div className='flex flex-row items-center justify-between'>
+                <div className='flex items-center gap-x-2 mb-3'>
+                  <span className='text-h-sm font-medium'>
+                    {transaction?.data?.name}
+                  </span>
+                  <TransactionStatusBadge status={transaction?.data?.status} />
+                </div>
+                <div>
+                  <div className='relative inline-block text-left'>
+                    <button
+                      onClick={() => downloadQuotation(transaction.data)}
+                      type='button'
+                      className='btn-light bg-slate-50 mt-3 w-full gap-2 items-center flex flex-row !text-gray_r-11 px-4 py-3 mb-2'
+                    >
+                      <p>Export to PDF</p>
+                    </button>
+                  </div>
+                </div>
+              </div>
+              {/* <div className='flex gap-x-4'>
                 <button
                   type='button'
                   className='btn-solid-red px-3 py-2 mr-auto'
@@ -684,19 +753,15 @@ const Transaction = ({ id }) => {
                       Batalkan Transaksi
                     </button>
                   )}
-              </div>
+              </div> */}
 
               <div className='grid grid-cols-2 gap-x-6 mt-6'>
-                <div className='grid grid-cols-2 gap-y-4'>
+                <div className='grid grid-cols-[35%_65%] gap-y-4'>
                   <div>Nama Sales</div>
                   <div>: {transaction?.data?.sales}</div>
 
                   <div>Tanggal Transaksi</div>
                   <div>: {transaction?.data?.dateOrder}</div>
-                </div>
-                <div className='grid grid-cols-2 gap-y-4'>
-                  <div>Ketentuan Pembayaran</div>
-                  <div>: {transaction?.data?.paymentTerm}</div>
 
                   {!auth?.feature?.soApproval ? (
                     <>
@@ -729,9 +794,184 @@ const Transaction = ({ id }) => {
                     </>
                   )}
                 </div>
+                <div className='grid grid-cols-[35%_65%] gap-y-4'>
+                  <div>Payment Term</div>
+                  <div>: {transaction?.data?.paymentTerm}</div>
+
+                  <div>Dokumen Pengiriman</div>
+                  <div>
+                    :{' '}
+                    {transaction.data?.pickings?.length === 0
+                      ? 'Belum ada pengiriman'
+                      : transaction?.data?.pickings[0].name}
+                  </div>
+
+                  <div>Invoice Pembelian</div>
+                  <div>
+                    :{' '}
+                    {transaction.data?.invoices?.length === 0
+                      ? 'Belum ada invoice'
+                      : transaction.data?.invoices?.map((invoice, index) => (
+                          <Link
+                            href={`/my/invoices/${invoice.id}`}
+                            className='contents'
+                            key={index}
+                          >
+                            {invoice?.name}
+                            {/* <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>
+                </div>
+              </div>
+              <hr className='mt-4 mb-4 border border-gray-100' />
+              {/* <div className='grid grid-cols-2 gap-x-6'> */}
+              <div className='flex flex-row justify-between items-start w-full h-fit '>
+                <div className='flex flex-col w-1/2 justify-start items-start'>
+                  <span className='text-h-sm font-medium mb-2'>
+                    Alamat Pengiriman
+                  </span>
+                  <div className='grid grid-cols-[34%_2%_64%] gap-y-4'>
+                    <div>Nama Penerima</div>
+                    <div>: </div>
+                    <div>{transaction?.data?.address?.customer?.name}</div>
+
+                    <div>No. Telepon</div>
+                    <div>: </div>
+                    <div>{transaction?.data?.address?.customer?.phone}</div>
+
+                    <div>Email</div>
+                    <div>: </div>
+                    <div>{transaction?.data?.address?.customer?.email}</div>
+
+                    <div>Alamat Pengiriman</div>
+                    <div>: </div>
+                    <div className='text-indent-[2px]'>
+                      {transaction?.data?.address?.customer?.alamatBisnis}
+                    </div>
+                  </div>
+                </div>
+                <div className='flex flex-col w-1/2 justify-start items-start'>
+                  <span className='text-h-sm font-medium mb-2'>
+                    Info Pengiriman
+                  </span>
+                  <div className='grid grid-cols-[34%_2%_64%] gap-y-4  w-full'>
+                    <div>Nomor Resi</div>
+                    <div>: </div>
+                    <div className='flex flex-row gap-1 '>
+                      {transaction?.data?.pickings[0]?.trackingNumber || '-'}
+                      {transaction?.data?.pickings[0]?.trackingNumber && (
+                        <button
+                          className={`${
+                            copied ? 'text-gray-400' : 'text-red-600 '
+                          }`}
+                          onClick={() =>
+                            handleCopyClick(
+                              transaction?.data?.pickings[0]?.trackingNumber
+                            )
+                          }
+                        >
+                          <svg
+                            aria-hidden='true'
+                            fill='none'
+                            stroke='currentColor'
+                            stroke-width='1.5'
+                            viewBox='0 0 24 24'
+                            className='w-5 h-6'
+                          >
+                            <path
+                              d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75'
+                              stroke-linecap='round'
+                              stroke-linejoin='round'
+                            ></path>
+                          </svg>
+                        </button>
+                      )}
+                    </div>
+
+                    <div>Kurir</div>
+                    <div>: </div>
+                    <div className='flex flex-row gap-1 items-center justify-start'>
+                      {transaction?.data?.pickings[0]?.carrierName ? (
+                        <>
+                          <p>{transaction?.data?.pickings[0]?.carrierName}</p>
+                          <span
+                            className='text-red-500 text-xs font-semibold hover:cursor-pointer'
+                            onClick={() =>
+                              setIdAWB(transaction?.data?.pickings[0]?.id)
+                            }
+                          >
+                            Lacak Pengiriman
+                          </span>
+                        </>
+                      ) : (
+                        '-'
+                      )}
+                    </div>
+
+                    <div>Jenis Service</div>
+                    <div>: </div>
+                    <div>BELUM TAU AMBIL DARI MANA</div>
+
+                    <div>Tanggal Kirim</div>
+                    <div>: </div>
+                    <div>
+                      {transaction?.data?.pickings[0]?.date
+                        ? formatDate(transaction?.data?.pickings[0]?.date)
+                        : '-'}
+                    </div>
+
+                    <div>Estimasi Tiba</div>
+                    <div>: </div>
+                    <div className='text-red-500'>
+                      {transaction?.data?.pickings[0]?.eta
+                        ? transaction?.data?.pickings[0]?.eta
+                        : '-'}
+                    </div>
+                    {transaction?.data?.pickings[0] && (
+                      <div className='w-full bagian-informasi col-span-3'>
+                        <div
+                          class='flex items-center w-fit py-2 px-3 mb-4 text-sm border border-yellow-500 text-yellow-800 rounded-lg bg-yellow-50'
+                          role='alert'
+                        >
+                          <svg
+                            class='flex-shrink-0 inline w-4 h-4 mr-2'
+                            aria-hidden='true'
+                            fill='currentColor'
+                            viewBox='0 0 20 20'
+                          >
+                            <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
+                          </svg>
+                          <div className='text-justify flex flex-col gap-1'>
+                            <span className='text-black text-xs'>
+                              Pesanan anda mungkin mengalami keterlambatan tiba
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
               </div>
 
-              <div className='text-h-sm font-semibold mt-10 mb-4'>
+              <hr className='mt-4 mb-4 border border-gray-100' />
+
+              {/* <div className='text-h-sm font-semibold mt-10 mb-4'>
                 Informasi Pelanggan
               </div>
               <div className='grid grid-cols-2 gap-x-4'>
@@ -807,7 +1047,7 @@ const Transaction = ({ id }) => {
                     ))}
                   </div>
                 </div>
-              </div>
+              </div> */}
 
               <div className='text-h-sm font-semibold mt-4 mb-4'>
                 Rincian Pembelian
@@ -976,7 +1216,9 @@ const Transaction = ({ id }) => {
                       {currencyFormat(transaction.data?.amountUntaxed)}
                     </div>
 
-                    <div className='text-right'>PPN {((PPN - 1) * 100).toFixed(0)}%</div>
+                    <div className='text-right'>
+                      PPN {((PPN - 1) * 100).toFixed(0)}%
+                    </div>
                     <div className='text-right font-medium'>
                       {currencyFormat(transaction.data?.amountTax)}
                     </div>
-- 
cgit v1.2.3


From b4a595eaa8600e7bd1bafcef38abe4c01a5b664c Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 12 Mar 2025 16:59:18 +0700
Subject: <iman> fix transaction

---
 src/lib/transaction/components/Transaction.jsx | 58 ++++++++++++++++----------
 1 file changed, 35 insertions(+), 23 deletions(-)

(limited to 'src/lib/transaction/components/Transaction.jsx')

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 07f9573d..8369c425 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -49,7 +49,6 @@ const Transaction = ({ id }) => {
   const [reason, setReason] = useState('');
   const auth = useAuth();
   const { transaction } = useTransaction({ id });
-  console.log('transaction', transaction);
   const statusApprovalWeb = transaction.data?.approvalStep;
   const [isLoading, setIsLoading] = useState(false);
   const { queryAirwayBill } = useAirwayBill({ orderId: id });
@@ -284,7 +283,6 @@ const Transaction = ({ id }) => {
 
   const handleCopyClick = (waybillNumber) => {
     const textToCopy = waybillNumber;
-    console.log('textToCopy', textToCopy);
     navigator.clipboard.writeText(textToCopy);
     setCopied(true);
     toast.success('No Resi Berhasil di Copy');
@@ -755,7 +753,7 @@ const Transaction = ({ id }) => {
                   )}
               </div> */}
 
-              <div className='grid grid-cols-2 gap-x-6 mt-6'>
+              <div className='grid grid-cols-2 gap-x-6 mt-4'>
                 <div className='grid grid-cols-[35%_65%] gap-y-4'>
                   <div>Nama Sales</div>
                   <div>: {transaction?.data?.sales}</div>
@@ -853,11 +851,19 @@ const Transaction = ({ id }) => {
 
                     <div>No. Telepon</div>
                     <div>: </div>
-                    <div>{transaction?.data?.address?.customer?.phone}</div>
+                    <div>
+                      {transaction?.data?.address?.customer?.phone
+                        ? transaction?.data?.address?.customer?.phone
+                        : '-'}
+                    </div>
 
                     <div>Email</div>
                     <div>: </div>
-                    <div>{transaction?.data?.address?.customer?.email}</div>
+                    <div>
+                      {transaction?.data?.address?.customer?.email
+                        ? transaction?.data?.address?.customer?.email
+                        : '-'}
+                    </div>
 
                     <div>Alamat Pengiriman</div>
                     <div>: </div>
@@ -906,27 +912,33 @@ const Transaction = ({ id }) => {
 
                     <div>Kurir</div>
                     <div>: </div>
-                    <div className='flex flex-row gap-1 items-center justify-start'>
-                      {transaction?.data?.pickings[0]?.carrierName ? (
-                        <>
-                          <p>{transaction?.data?.pickings[0]?.carrierName}</p>
-                          <span
-                            className='text-red-500 text-xs font-semibold hover:cursor-pointer'
-                            onClick={() =>
-                              setIdAWB(transaction?.data?.pickings[0]?.id)
-                            }
-                          >
-                            Lacak Pengiriman
-                          </span>
-                        </>
-                      ) : (
-                        '-'
-                      )}
-                    </div>
+                    {transaction?.data?.pickings[0]?.carrierName ? (
+                      <div className='flex flex-row  w-full gap-1 items-start justify-start '>
+                        <p className=' text-nowrap'>
+                          {transaction?.data?.pickings[0]?.carrierName}
+                        </p>
+                        <span
+                          className='text-red-500 text-sm  font-semibold hover:cursor-pointer'
+                          onClick={() =>
+                            setIdAWB(transaction?.data?.pickings[0]?.id)
+                          }
+                        >
+                          Lacak Pengiriman
+                        </span>
+                      </div>
+                    ) : (
+                      '-'
+                    )}
 
                     <div>Jenis Service</div>
                     <div>: </div>
-                    <div>BELUM TAU AMBIL DARI MANA</div>
+                    <div>
+                      {' '}
+                      {transaction?.data?.pickings[0]?.serviceType &&
+                      transaction?.data?.pickings[0]?.carrierName
+                        ? transaction?.data?.pickings[0]?.serviceType
+                        : '-'}
+                    </div>
 
                     <div>Tanggal Kirim</div>
                     <div>: </div>
-- 
cgit v1.2.3


From 1904419f7aa7d2c6ee8644166e270703e969d4b2 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 13 Mar 2025 15:10:18 +0700
Subject: <iman> update mobile

---
 src/lib/transaction/components/Transaction.jsx | 84 +++++++++++++++++++++++++-
 1 file changed, 81 insertions(+), 3 deletions(-)

(limited to 'src/lib/transaction/components/Transaction.jsx')

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 8369c425..2e328a7e 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -17,6 +17,7 @@ import getFileBase64 from '@/core/utils/getFileBase64';
 import currencyFormat from '@/core/utils/currencyFormat';
 import VariantGroupCard from '@/lib/variant/components/VariantGroupCard';
 import {
+  EllipsisVerticalIcon,
   ChevronDownIcon,
   ChevronRightIcon,
   ChevronUpIcon,
@@ -61,6 +62,7 @@ const Transaction = ({ id }) => {
   const openUploadPo = () => setUploadPo(true);
   const closeUploadPo = () => setUploadPo(false);
   const [copied, setCopied] = useState(false);
+  const [toOthers, setToOthers] = useState(null);
   const submitUploadPo = async () => {
     const file = poFile.current.files[0];
     const name = poNumber.current.value;
@@ -418,9 +420,74 @@ const Transaction = ({ id }) => {
             </button>
           </div>
         </BottomPopup>
+
+        <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>
+
         <Manifest idAWB={idAWB} closePopup={closePopup}></Manifest>
 
         <MobileView>
+          <div className='p-4'>
+            <div className='flex flex-row w-full justify-between items-center py-2 px-3 mb-4 text-sm border border-yellow-500 text-yellow-800 rounded-lg bg-yellow-50 gap-2'>
+              <div class='flex items-center w-full ' role='alert'>
+                <svg
+                  class='flex-shrink-0 inline w-4 h-4 mr-2'
+                  aria-hidden='true'
+                  fill='currentColor'
+                  viewBox='0 0 20 20'
+                >
+                  <path d='M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z' />
+                </svg>
+                <div className='text-justify flex flex-col gap-1'>
+                  <span className='text-black text-xs text-start'>
+                    Pesanan anda mungkin mengalami keterlambatan tiba
+                  </span>
+                </div>
+              </div>
+              <span
+                className='text-red-500 text-xs hover:cursor-pointer text-nowrap z-50'
+                onClick={() => setIdAWB(transaction?.data?.pickings[0]?.id)}
+              >
+                Lihat Detail
+              </span>
+            </div>
+          </div>
           <div className='p-4'>
             {auth?.feature?.soApproval && (
               <StepApproval
@@ -430,11 +497,22 @@ const Transaction = ({ id }) => {
               />
             )}
           </div>
+
+          <div className='flex flex-row justify-between items-center gap-2 px-4'>
+            <div className='flex flex-col justify-start items-start gap-2'>
+              <div className='font-medium'>Pengiriman</div>
+              <TransactionStatusBadge status={transaction.data?.status} />
+            </div>
+            <div>
+              <EllipsisVerticalIcon
+                className='w-5 h-5'
+                onClick={() => setToOthers(transaction?.data)}
+              />
+            </div>
+          </div>
           <div className='flex flex-col gap-y-4 p-4'>
             <DescriptionRow label='Status Transaksi'>
-              <div className='flex justify-end'>
-                <TransactionStatusBadge status={transaction.data?.status} />
-              </div>
+              <div className='flex justify-end'></div>
             </DescriptionRow>
             <DescriptionRow label='No Transaksi'>
               {transaction.data?.name}
-- 
cgit v1.2.3


From af311a10854f092efa57716ffd5329cce0c7d8db Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 13 Mar 2025 16:33:00 +0700
Subject: <iman> update mobile

---
 src/lib/transaction/components/Transaction.jsx | 39 ++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 6 deletions(-)

(limited to 'src/lib/transaction/components/Transaction.jsx')

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 2e328a7e..299f7a07 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -41,6 +41,10 @@ import rejectProductApi from '../api/rejectProductApi';
 import { useRouter } from 'next/router';
 import { gtagPurchase } from '@/core/utils/googleTag';
 import { deleteItemCart } from '@/core/utils/cart';
+import {
+  downloadInvoice,
+  downloadTaxInvoice,
+} from '@/lib/invoice/utils/invoices';
 import axios from 'axios';
 const Transaction = ({ id }) => {
   const PPN = process.env.NEXT_PUBLIC_PPN;
@@ -50,6 +54,7 @@ const Transaction = ({ id }) => {
   const [reason, setReason] = useState('');
   const auth = useAuth();
   const { transaction } = useTransaction({ id });
+  console.log('transaction', transaction);
   const statusApprovalWeb = transaction.data?.approvalStep;
   const [isLoading, setIsLoading] = useState(false);
   const { queryAirwayBill } = useAirwayBill({ orderId: id });
@@ -463,7 +468,7 @@ const Transaction = ({ id }) => {
         <Manifest idAWB={idAWB} closePopup={closePopup}></Manifest>
 
         <MobileView>
-          <div className='p-4'>
+          <div className='px-4'>
             <div className='flex flex-row w-full justify-between items-center py-2 px-3 mb-4 text-sm border border-yellow-500 text-yellow-800 rounded-lg bg-yellow-50 gap-2'>
               <div class='flex items-center w-full ' role='alert'>
                 <svg
@@ -488,19 +493,19 @@ const Transaction = ({ id }) => {
               </span>
             </div>
           </div>
-          <div className='p-4'>
-            {auth?.feature?.soApproval && (
+          {auth?.feature?.soApproval && (
+            <div className='p-4'>
               <StepApproval
                 layer={statusApprovalWeb}
                 status={transaction?.data?.status}
                 className='ml-auto'
               />
-            )}
-          </div>
+            </div>
+          )}
 
           <div className='flex flex-row justify-between items-center gap-2 px-4'>
             <div className='flex flex-col justify-start items-start gap-2'>
-              <div className='font-medium'>Pengiriman</div>
+              <div className='font-medium'>Status Transaksi</div>
               <TransactionStatusBadge status={transaction.data?.status} />
             </div>
             <div>
@@ -510,6 +515,28 @@ const Transaction = ({ id }) => {
               />
             </div>
           </div>
+
+          {transaction.data?.invoices?.length === 0 ? (
+            <div className='px-4'>-</div>
+          ) : (
+            transaction.data?.invoices?.map((invoice, index) => (
+              <div
+                className='flex flex-row justify-between items-center gap-2 p-4'
+                key={index}
+              >
+                <div className=''>{invoice?.name}</div>
+                <span
+                  className='text-red-500'
+                  onClick={() => downloadInvoice(invoice)}
+                >
+                  Download
+                </span>
+              </div>
+            ))
+          )}
+
+          <Divider />
+
           <div className='flex flex-col gap-y-4 p-4'>
             <DescriptionRow label='Status Transaksi'>
               <div className='flex justify-end'></div>
-- 
cgit v1.2.3


From 45a4a67274dcd8172eba3a9ed171a631c6d1c3b3 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 14 Mar 2025 16:16:47 +0700
Subject: <iman> fix code

---
 src/lib/transaction/components/Transaction.jsx | 348 +++++++++++++++++++++----
 1 file changed, 295 insertions(+), 53 deletions(-)

(limited to 'src/lib/transaction/components/Transaction.jsx')

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 299f7a07..5f17b623 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -68,6 +68,25 @@ const Transaction = ({ id }) => {
   const closeUploadPo = () => setUploadPo(false);
   const [copied, setCopied] = useState(false);
   const [toOthers, setToOthers] = useState(null);
+  const [totalAmount, setTotalAmount] = useState(0);
+  const [totalDiscountAmount, setTotalDiscountAmount] = useState(0);
+
+  useEffect(() => {
+    if (transaction?.data?.products) {
+      let calculateTotalAmount = 0;
+      let calculateTotalDiscountAmount = 0;
+      transaction.data.products.forEach((product) => {
+        calculateTotalAmount += product.price.price * product.quantity;
+        calculateTotalDiscountAmount +=
+          (product.price.price - product.price.priceDiscount) *
+          product.quantity;
+      });
+      setTotalAmount(calculateTotalAmount);
+      setTotalDiscountAmount(calculateTotalDiscountAmount);
+    }
+  }, [transaction.data, transaction.isLoading]);
+  console.log('totalAmount', totalAmount);
+  console.log('totalDiscountAmount', totalDiscountAmount);
   const submitUploadPo = async () => {
     const file = poFile.current.files[0];
     const name = poNumber.current.value;
@@ -206,32 +225,70 @@ const Transaction = ({ id }) => {
     transaction.refetch();
   };
 
-  const memoizeVariantGroupCard = useMemo(
-    () => (
-      <div className='p-4 pt-0 flex flex-col gap-y-3'>
-        <VariantGroupCard variants={transaction.data?.products} buyMore />
-        <div className='flex justify-between mt-1'>
-          <p className='text-gray_r-12/70'>Subtotal</p>
-          <p>{currencyFormat(transaction.data?.amountUntaxed)}</p>
-        </div>
-        <div className='flex justify-between mt-1'>
-          <p className='text-gray_r-12/70'>
-            PPN {((PPN - 1) * 100).toFixed(0)}%
-          </p>
-          <p>{currencyFormat(transaction.data?.amountTax)}</p>
-        </div>
-        <div className='flex justify-between mt-1'>
-          <p className='text-gray_r-12/70'>Biaya Pengiriman</p>
-          <p>{currencyFormat(transaction.data?.deliveryAmount)}</p>
-        </div>
-        <div className='flex justify-between mt-1 font-medium'>
-          <p>Grand Total</p>
-          <p>{currencyFormat(transaction.data?.amountTotal)}</p>
-        </div>
-      </div>
-    ),
-    [transaction.data]
-  );
+  const countWeight = (products) => {
+    if (!products || !Array.isArray(products)) return 0.0;
+
+    const weight = products.reduce(
+      (total, product) => total + (product.weight * product.quantity || 0),
+      0
+    );
+    return weight + ' Kg';
+  };
+
+  // const memoizeVariantGroupCard = useMemo(
+  //   () => (
+  //     <div className='p-4 pt-0 flex flex-col gap-y-3'>
+  //       <VariantGroupCard variants={transaction.data?.products} buyMore />
+  //       <div className='font-medium'>Info Pengiriman</div>
+  //       <div className='flex justify-between mt-1'>
+  //         <p className='text-gray_r-12/70'>Metode Pembayaran</p>
+  //         <p>
+  //           {transaction.data?.paymentType
+  //             ? transaction.data?.paymentType
+  //                 ?.replace(/_/g, ' ')
+  //                 .replace(/\b\w/g, (char) => char.toUpperCase())
+  //             : '-'}
+  //         </p>
+  //       </div>
+  //       <div className='flex justify-between mt-1'>
+  //         <p className='text-gray_r-12/70'>Berat Barang</p>
+  //         <p>{transaction.data?.pickings[0]?.weightTotal}</p>
+  //       </div>
+  //       <hr className='mt-1 border border-gray-100' />
+  //       <div className='flex justify-between mt-1'>
+  //         <p className='text-gray_r-12/70'>Total Belanja</p>
+  //         <p>{currencyFormat(totalAmount)}</p>
+  //       </div>
+  //       <div className='flex justify-between mt-1'>
+  //         <p className='text-gray_r-12/70'>Diskon Belanja</p>
+  //         <p>{'- ' + currencyFormat(totalDiscountAmount)}</p>
+  //       </div>
+  //       <div className='flex justify-between mt-1'>
+  //         <p className='text-gray_r-12/70'>Subtotal</p>
+  //         <p>{currencyFormat(transaction.data?.amountUntaxed)}</p>
+  //       </div>
+  //       <div className='flex justify-between mt-1'>
+  //         <p className='text-gray_r-12/70'>
+  //           PPN {((PPN - 1) * 100).toFixed(0)}%
+  //         </p>
+  //         <p>{currencyFormat(transaction.data?.amountTax)}</p>
+  //       </div>
+  //       <div className='flex justify-between mt-1'>
+  //         <p className='text-gray_r-12/70'>Biaya Pengiriman</p>
+  //         <p>{currencyFormat(transaction.data?.deliveryAmount)}</p>
+  //       </div>
+  //       <div className='flex justify-between mt-1 font-medium'>
+  //         <p className='text-gray_r-12/70'>Asuransi Pengiriman</p>
+  //         <p>{currencyFormat(transaction.data?.amountTotal)}</p>
+  //       </div>
+  //       <div className='flex justify-between mt-1 font-medium'>
+  //         <p>Grand Total</p>
+  //         <p>{currencyFormat(transaction.data?.amountTotal)}</p>
+  //       </div>
+  //     </div>
+  //   ),
+  //   [transaction.data]
+  // );
 
   const memoizeVariantGroupCardReject = useMemo(
     () => (
@@ -538,28 +595,121 @@ const Transaction = ({ id }) => {
           <Divider />
 
           <div className='flex flex-col gap-y-4 p-4'>
-            <DescriptionRow label='Status Transaksi'>
-              <div className='flex justify-end'></div>
-            </DescriptionRow>
             <DescriptionRow label='No Transaksi'>
-              {transaction.data?.name}
+              <p className='font-semibold'>{transaction.data?.name}</p>
+            </DescriptionRow>
+            <DescriptionRow label='Tanggal Transaksi'>
+              {transaction.data?.dateOrder
+                ? formatDate(transaction.data?.dateOrder)
+                : '-'}
+            </DescriptionRow>
+            <DescriptionRow label='Purchase Order'>
+              {transaction.data?.purchaseOrderName || '-'}
             </DescriptionRow>
             <DescriptionRow label='Ketentuan Pembayaran'>
-              {transaction.data?.paymentTerm}
+              {transaction.data?.paymentTerm || '-'}
             </DescriptionRow>
             <DescriptionRow label='Nama Sales'>
               {transaction.data?.sales}
             </DescriptionRow>
-            <DescriptionRow label='Waktu Transaksi'>
-              {transaction.data?.dateOrder}
-            </DescriptionRow>
           </div>
 
           <Divider />
 
           <div className='p-4'>
-            <div className='font-medium'>Pengiriman</div>
-            <div className='flex flex-col gap-y-3 mt-4'>
+            <div className='flex flex-row justify-between items-center'>
+              <div className='font-medium'>Info Pengiriman</div>
+              <span
+                className='text-red-500'
+                onClick={() => setIdAWB(transaction?.data?.pickings[0]?.id)}
+              >
+                Lihat Detail
+              </span>
+            </div>
+            <hr className='mt-4 mb-4 border border-gray-100' />
+            <div className='flex flex-col gap-y-4'>
+              <DescriptionRow label='Dokumen Pengiriman'>
+                <p className='text-red-500 font-semibold text-start'>
+                  {transaction.data?.pickings?.length == 0
+                    ? 'Belum ada pengiriman'
+                    : transaction?.data?.pickings[0].name}
+                </p>
+              </DescriptionRow>
+              <DescriptionRow label='Kurir'>
+                <p className='text-start'>
+                  {transaction?.data?.pickings[0]?.carrierName ? (
+                    <p className=' text-nowrap'>
+                      {transaction?.data?.pickings[0]?.carrierName}
+                    </p>
+                  ) : (
+                    '-'
+                  )}
+                </p>
+              </DescriptionRow>
+              <DescriptionRow label='Jenis Service'>
+                <p className='text-start'>
+                  {transaction?.data?.pickings[0]?.serviceType &&
+                  transaction?.data?.pickings[0]?.carrierName
+                    ? transaction?.data?.pickings[0]?.serviceType
+                    : '-'}
+                </p>
+              </DescriptionRow>
+              <DescriptionRow label='Nomor Resi'>
+                <div className='flex flex-row gap-1 text-start'>
+                  {transaction?.data?.pickings[0]?.trackingNumber || '-'}
+                  {transaction?.data?.pickings[0]?.trackingNumber && (
+                    <button
+                      className={`${
+                        copied ? 'text-gray-400' : 'text-red-600 '
+                      }`}
+                      onClick={() =>
+                        handleCopyClick(
+                          transaction?.data?.pickings[0]?.trackingNumber
+                        )
+                      }
+                    >
+                      <svg
+                        aria-hidden='true'
+                        fill='none'
+                        stroke='currentColor'
+                        stroke-width='1.5'
+                        viewBox='0 0 24 24'
+                        className='w-5 h-6'
+                      >
+                        <path
+                          d='M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75'
+                          stroke-linecap='round'
+                          stroke-linejoin='round'
+                        ></path>
+                      </svg>
+                    </button>
+                  )}
+                </div>
+              </DescriptionRow>
+              <DescriptionRow label='Estimasi Tiba'>
+                <p className='text-start'>
+                  {transaction?.data?.pickings[0]?.eta
+                    ? transaction?.data?.pickings[0]?.eta
+                    : '-'}
+                </p>
+              </DescriptionRow>
+              <DescriptionRow label='Alamat Pengiriman'>
+                <div className='flex flex-col justify-start items-start'>
+                  <div className='text-start text-nowrap truncate w-full'>
+                    {transaction?.data?.address?.customer?.name}
+                  </div>
+                  <div className='text-start'>
+                    {transaction?.data?.address?.customer?.phone
+                      ? transaction?.data?.address?.customer?.phone
+                      : '-'}
+                  </div>
+                  <div className='text-start'>
+                    {transaction?.data?.address?.customer?.alamatBisnis}
+                  </div>
+                </div>
+              </DescriptionRow>
+            </div>
+            {/* <div className='flex flex-col gap-y-3 mt-4'>
               {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'
@@ -583,10 +733,10 @@ const Transaction = ({ id }) => {
             </div>
             {transaction?.data?.pickings == 0 && (
               <div className='badge-red text-sm px-2'>Belum ada pengiriman</div>
-            )}
+            )} */}
           </div>
 
-          <Divider />
+          {/* <Divider />
 
           <div className='p-4'>
             <p className='font-medium'>Invoice</p>
@@ -615,11 +765,11 @@ const Transaction = ({ id }) => {
                 <div className='badge-red text-sm px-2'>Belum ada invoice</div>
               )}
             </div>
-          </div>
+          </div> */}
 
           <Divider />
 
-          {!auth?.feature.soApproval && (
+          {/* {!auth?.feature.soApproval && (
             <div className='p-4 flex flex-col gap-y-4'>
               <DescriptionRow label='Purchase Order'>
                 {transaction.data?.purchaseOrderName || '-'}
@@ -647,11 +797,59 @@ const Transaction = ({ id }) => {
             </div>
           )}
 
-          <Divider />
+          <Divider /> */}
 
           <div className='font-medium p-4'>Detail Produk</div>
           {transaction?.data?.products.length > 0 ? (
-            <div>{memoizeVariantGroupCard}</div>
+            <div className='p-4 pt-0 flex flex-col gap-y-3'>
+              <VariantGroupCard variants={transaction.data?.products} buyMore />
+              <div className='font-medium'>Rincian Pembayaran</div>
+              <div className='flex justify-between mt-1'>
+                <p className='text-gray_r-12/70'>Metode Pembayaran</p>
+                <p>
+                  {transaction.data?.paymentType
+                    ? transaction.data?.paymentType
+                        ?.replace(/_/g, ' ')
+                        .replace(/\b\w/g, (char) => char.toUpperCase())
+                    : '-'}
+                </p>
+              </div>
+              <div className='flex justify-between mt-1'>
+                <p className='text-gray_r-12/70'>Berat Barang</p>
+                <p>{transaction.data?.pickings[0]?.weightTotal + ' Kg'}</p>
+              </div>
+              <hr className='mt-1 border border-gray-100' />
+              <div className='flex justify-between mt-1'>
+                <p className='text-gray_r-12/70'>Total Belanja</p>
+                <p>{currencyFormat(totalAmount)}</p>
+              </div>
+              <div className='flex justify-between mt-1'>
+                <p className='text-gray_r-12/70'>Diskon Belanja</p>
+                <p>{'- ' + currencyFormat(totalDiscountAmount)}</p>
+              </div>
+              <div className='flex justify-between mt-1'>
+                <p className='text-gray_r-12/70'>Subtotal</p>
+                <p>{currencyFormat(transaction.data?.amountUntaxed)}</p>
+              </div>
+              <div className='flex justify-between mt-1'>
+                <p className='text-gray_r-12/70'>
+                  PPN {((PPN - 1) * 100).toFixed(0)}%
+                </p>
+                <p>{currencyFormat(transaction.data?.amountTax)}</p>
+              </div>
+              <div className='flex justify-between mt-1'>
+                <p className='text-gray_r-12/70'>Biaya Pengiriman</p>
+                <p>{currencyFormat(transaction.data?.deliveryAmount)}</p>
+              </div>
+              <div className='flex justify-between mt-1 font-medium'>
+                <p className='text-gray_r-12/70'>Asuransi Pengiriman</p>
+                <p>-</p>
+              </div>
+              <div className='flex justify-between mt-1 font-medium'>
+                <p>Grand Total</p>
+                <p>{currencyFormat(transaction.data?.amountTotal)}</p>
+              </div>
+            </div>
           ) : (
             <div className='badge-red text-sm px-2 ml-4'>
               Semua produk telah di reject
@@ -665,13 +863,13 @@ const Transaction = ({ id }) => {
             </div>
           )}
 
-          <Divider />
+          {/* <Divider /> */}
 
-          <SectionAddress address={transaction.data?.address} />
+          {/* <SectionAddress address={transaction.data?.address} /> */}
 
-          <Divider />
+          {/* <Divider /> */}
 
-          <div className='p-4 pt-0'>
+          {/* <div className='p-4 pt-0'>
             {transaction.data?.status == 'draft' &&
               auth?.feature.soApproval && (
                 <div className='flex gap-x-2'>
@@ -728,7 +926,7 @@ const Transaction = ({ id }) => {
                 Batalkan Transaksi
               </button>
             )}
-          </div>
+          </div> */}
         </MobileView>
 
         <DesktopView>
@@ -1018,7 +1216,7 @@ const Transaction = ({ id }) => {
                     <div>Kurir</div>
                     <div>: </div>
                     {transaction?.data?.pickings[0]?.carrierName ? (
-                      <div className='flex flex-row  w-full gap-1 items-start justify-start '>
+                      <div className='flex flex-row  w-full gap-1 items-center justify-start '>
                         <p className=' text-nowrap'>
                           {transaction?.data?.pickings[0]?.carrierName}
                         </p>
@@ -1326,7 +1524,49 @@ const Transaction = ({ id }) => {
               )}
 
               {transaction?.data?.products?.length > 0 && (
-                <div className='flex justify-end mt-4'>
+                // <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>
+                //     <div className='text-right font-medium'>
+                //       {currencyFormat(transaction.data?.amountUntaxed)}
+                //     </div>
+
+                //     <div className='text-right'>
+                //       PPN {((PPN - 1) * 100).toFixed(0)}%
+                //     </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'>Grand Total</div>
+                //     <div className='text-right font-medium text-gray_r-12'>
+                //       {currencyFormat(transaction.data?.amountTotal)}
+                //     </div>
+                //   </div>
+                // </div>
+
+                <div className='flex justify-end mt-4 flex-col items-end'>
+                  <div className='w-1/4 grid grid-cols-2 gap-y-3 text-gray_r-12/80'>
+                    <div className='text-right'>Total Belanja</div>
+                    <div className='text-right font-medium'>
+                      {currencyFormat(totalAmount)}
+                    </div>
+
+                    <div className='text-right'>Total Diskon</div>
+                    <div className='text-right font-medium'>
+                      {'- ' + currencyFormat(totalDiscountAmount)}
+                    </div>
+                  </div>
+
+                  <hr className='w-full border border-gray-100 mt-4 mb-4 self-stretch' />
+
                   <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'>
@@ -1340,15 +1580,17 @@ const Transaction = ({ id }) => {
                       {currencyFormat(transaction.data?.amountTax)}
                     </div>
 
-                    <div className='text-right whitespace-nowrap'>
-                      Biaya Pengiriman
-                    </div>
+                    <div className='text-right'>Biaya Pengiriman</div>
                     <div className='text-right font-medium'>
                       {currencyFormat(transaction.data?.deliveryAmount)}
                     </div>
+                  </div>
 
+                  <hr className='w-full border border-gray-100 mt-4 mb-4 self-stretch' />
+
+                  <div className='w-1/4 grid grid-cols-2 gap-y-3 font-semibold'>
                     <div className='text-right'>Grand Total</div>
-                    <div className='text-right font-medium text-gray_r-12'>
+                    <div className='text-right'>
                       {currencyFormat(transaction.data?.amountTotal)}
                     </div>
                   </div>
-- 
cgit v1.2.3


From 6499f025995f13fcf32b2b5f79c8ee14585668fc Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 14 Mar 2025 16:42:45 +0700
Subject: <iman> fix mobile

---
 src/lib/transaction/components/Transaction.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/transaction/components/Transaction.jsx')

diff --git a/src/lib/transaction/components/Transaction.jsx b/src/lib/transaction/components/Transaction.jsx
index 5f17b623..9216f7f7 100644
--- a/src/lib/transaction/components/Transaction.jsx
+++ b/src/lib/transaction/components/Transaction.jsx
@@ -574,7 +574,7 @@ const Transaction = ({ id }) => {
           </div>
 
           {transaction.data?.invoices?.length === 0 ? (
-            <div className='px-4'>-</div>
+            <h1 className=''></h1>
           ) : (
             transaction.data?.invoices?.map((invoice, index) => (
               <div
-- 
cgit v1.2.3

