summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/lib/transaction/components/Transaction.jsx278
1 files changed, 260 insertions, 18 deletions
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>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 02:22:09 +0000