Refactor

2 files changed, 112 insertions, 0 deletions

diff --git a/src2/components/transactions/TransactionDetail.js b/src2/components/transactions/TransactionDetail.js
new file mode 100644
index 00000000..295a4f9f
--- /dev/null
+++ b/src2/components/transactions/TransactionDetail.js
@@ -0,0 +1,67 @@
+import { useState } from "react";
+import DescriptionRow from "../elements/DescriptionRow";
+import Disclosure from "../elements/Disclosure";
+
+const DetailAddress = ({ address }) => {
+  const fullAddress = [];
+  if (address?.street) fullAddress.push(address.street);
+  if (address?.sub_district?.name) fullAddress.push(address.sub_district.name);
+  if (address?.district?.name) fullAddress.push(address.district.name);
+  if (address?.city?.name) fullAddress.push(address.city.name);
+  return (
+    <div className="p-4 flex flex-col gap-y-4">
+      <DescriptionRow label="Nama">{ address?.name }</DescriptionRow>
+      <DescriptionRow label="Email">{ address?.email || '-' }</DescriptionRow>
+      <DescriptionRow label="No Telepon">{ address?.mobile || '-' }</DescriptionRow>
+      <DescriptionRow label="Alamat">{ fullAddress.join(', ') }</DescriptionRow>
+    </div>
+  );
+};
+
+const TransactionDetailAddress = ({ transaction }) => {
+  const [ activeSection, setActiveSection ] = useState({
+    purchase: false,
+    shipping: false,
+    invoice: false,
+  });
+
+  const toggleSection = ( name ) => {
+    setActiveSection({
+      ...activeSection,
+      [name]: !activeSection[name] 
+    });
+  };
+
+  return (
+    <div className="m-4 rounded-md border border-gray_r-6 divide-y divide-gray_r-6">
+      <Disclosure 
+        label="Detail Pelanggan" 
+        active={activeSection.purchase} 
+        onClick={() => toggleSection('purchase')} 
+      />
+      { activeSection.purchase && (
+        <DetailAddress address={transaction?.address?.customer} />
+      ) }
+
+      <Disclosure 
+        label="Detail Pengiriman" 
+        active={activeSection.shipping} 
+        onClick={() => toggleSection('shipping')} 
+      />
+      { activeSection.shipping && (
+        <DetailAddress address={transaction?.address?.shipping} />
+      ) }
+
+      <Disclosure 
+        label="Detail Penagihan" 
+        active={activeSection.invoice} 
+        onClick={() => toggleSection('invoice')} 
+      />
+      { activeSection.invoice && (
+        <DetailAddress address={transaction?.address?.invoice} />
+      ) }
+    </div>
+  );
+};
+
+export { TransactionDetailAddress };
\ No newline at end of file
diff --git a/src2/components/transactions/TransactionStatusBadge.js b/src2/components/transactions/TransactionStatusBadge.js
new file mode 100644
index 00000000..f94fd3fd
--- /dev/null
+++ b/src2/components/transactions/TransactionStatusBadge.js
@@ -0,0 +1,45 @@
+const TransactionStatusBadge = ({ status }) => {
+  let badgeProps = {
+    className: ['h-fit'],
+    text: ''
+  };
+  switch (status) {
+    case 'cancel':
+      badgeProps.className.push('badge-solid-red');
+      badgeProps.text = 'Pesanan Batal'
+      break;
+    case 'draft':
+      badgeProps.className.push('badge-red');
+      badgeProps.text = 'Pending Quotation'
+      break;
+    case 'waiting':
+      badgeProps.className.push('badge-yellow');
+      badgeProps.text = 'Pesanan diterima'
+      break;
+    case 'sale':
+      badgeProps.className.push('badge-yellow');
+      badgeProps.text = 'Pesanan diproses'
+      break;
+    case 'shipping':
+      badgeProps.className.push('badge-green');
+      badgeProps.text = 'Pesanan dikirim'
+      break;
+    case 'partial_shipping':
+      badgeProps.className.push('badge-green');
+      badgeProps.text = 'Dikirim sebagian'
+      break;
+    case 'done':
+      badgeProps.className.push('badge-solid-green');
+      badgeProps.text = 'Pesanan Selesai'
+      break;
+  }
+  badgeProps.className = badgeProps.className.join(' ');
+
+  return (
+    <div className={badgeProps.className}>
+      { badgeProps.text }
+    </div>
+  )
+};
+
+export default TransactionStatusBadge;
\ No newline at end of file