Invoice dan daftar transaksi

4 files changed, 61 insertions, 13 deletions

diff --git a/src/pages/my/invoice/[id].js b/src/pages/my/invoice/[id].js
index 93eae2be..c1cacfc6 100644
--- a/src/pages/my/invoice/[id].js
+++ b/src/pages/my/invoice/[id].js
@@ -105,7 +105,7 @@ export default function DetailInvoice() {
                 />
               )) }
               <div className="flex justify-between mt-3 font-medium">
-                <p>Total Belanja</p>
+                <p className="text-gray_r-11">Total Belanja</p>
                 <p>{ currencyFormat(invoice?.amount_total || 0) }</p>
               </div>
             </div>
diff --git a/src/pages/my/invoices.js b/src/pages/my/invoices.js
index e136f4fd..926b4f99 100644
--- a/src/pages/my/invoices.js
+++ b/src/pages/my/invoices.js
@@ -82,7 +82,7 @@ export default function Invoices() {
             <div className="p-4 shadow rounded-md" key={index}>
               <div className="grid grid-cols-2">
                 <Link href={`/my/invoice/${invoice.id}`}>
-                  <span className="text-caption-2 text-gray_r-11">No. Transaksi</span>
+                  <span className="text-caption-2 text-gray_r-11">No. Invoice</span>
                   <h2 className="text-red_r-11 mt-1">{ invoice.name }</h2>
                 </Link>
                 <div className="flex gap-x-1 justify-end">
@@ -106,7 +106,7 @@ export default function Invoices() {
                 <hr className="my-3"/>
                 <div className="grid grid-cols-2">
                   <div>
-                    <span className="text-caption-2 text-gray_r-11">Nomor PO</span>
+                    <span className="text-caption-2 text-gray_r-11">No. Purchase Order</span>
                     <p className="mt-1 font-medium text-gray_r-12">{ invoice.purchase_order_name || '-' }</p>
                   </div>
                   <div className="text-right">
diff --git a/src/pages/my/transaction/[id].js b/src/pages/my/transaction/[id].js
index 09bf1ec7..4c33c97a 100644
--- a/src/pages/my/transaction/[id].js
+++ b/src/pages/my/transaction/[id].js
@@ -12,6 +12,9 @@ import Disclosure from "@/components/elements/Disclosure";
 import DescriptionRow from "@/components/elements/DescriptionRow";
 import { TransactionDetailAddress } from "@/components/transactions/TransactionDetail";
 import { SkeletonList } from "@/components/elements/Skeleton";
+import Link from "@/components/elements/Link";
+import { ChevronRightIcon } from "@heroicons/react/24/outline";
+import Alert from "@/components/elements/Alert";
 
 export default function DetailTransaction() {
   const router = useRouter();
@@ -59,9 +62,7 @@ export default function DetailTransaction() {
 
             <LineDivider />
 
-            <Disclosure 
-              label="Detail Produk"
-            />
+            <p className="h2 p-4">Detail Produk</p>
 
             <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
               { transaction?.products?.map((product, index) => (
@@ -76,7 +77,42 @@ export default function DetailTransaction() {
               </div>
             </div>
 
+            <LineDivider />
+
             <TransactionDetailAddress transaction={transaction} />
+
+            <LineDivider />
+
+            <div className="p-4">
+              <p className="h2">Invoice</p>
+              <div className="flex flex-col gap-y-3 mt-4">
+                { transaction?.invoices?.map((invoice, index) => (
+                  <Link href={`/my/invoice/${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.amount_residual > 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.amount_total) }
+                          </p>
+                        </div>
+                      </div>
+                      <ChevronRightIcon className="w-5 stroke-2" />
+                    </div>
+                  </Link>
+                )) }
+                { transaction?.invoices?.length === 0 && (
+                  <Alert type='info' className='text-center'>
+                    Belum ada Invoice
+                  </Alert>
+                ) }
+              </div>
+            </div>
           </>
         ) : (
           <div className="p-4 py-6">
diff --git a/src/pages/my/transactions.js b/src/pages/my/transactions.js
index aca5f081..fc2142a3 100644
--- a/src/pages/my/transactions.js
+++ b/src/pages/my/transactions.js
@@ -92,14 +92,26 @@ export default function Transactions() {
                   <EllipsisVerticalIcon className="w-5 h-5" onClick={() => setActivePopupId(transaction.id)} />
                 </div>
               </div>
-              <Link href={`/my/transaction/${transaction.id}`} className="grid grid-cols-2 mt-3">
-                <div>
-                  <span className="text-caption-2 text-gray_r-11">Sales</span>
-                  <p className="mt-1 font-medium text-gray_r-12">{ transaction.sales }</p>
+              <Link href={`/my/transaction/${transaction.id}`}>
+                <div className="grid grid-cols-2 mt-3">
+                  <div>
+                    <span className="text-caption-2 text-gray_r-11">No. Purchase Order</span>
+                    <p className="mt-1 font-medium text-gray_r-12">{ transaction.purchase_order_name || '-' }</p>
+                  </div>
+                  <div className="text-right">
+                    <span className="text-caption-2 text-gray_r-11">Total Invoice</span>
+                    <p className="mt-1 font-medium text-gray_r-12">{ transaction.invoice_count }</p>
+                  </div>
                 </div>
-                <div className="text-right">
-                  <span className="text-caption-2 text-gray_r-11">Total Harga</span>
-                  <p className="mt-1 font-medium text-gray_r-12">{ currencyFormat(transaction.amount_total) }</p>
+                <div className="grid grid-cols-2 mt-3">
+                  <div>
+                    <span className="text-caption-2 text-gray_r-11">Sales</span>
+                    <p className="mt-1 font-medium text-gray_r-12">{ transaction.sales }</p>
+                  </div>
+                  <div className="text-right">
+                    <span className="text-caption-2 text-gray_r-11">Total Harga</span>
+                    <p className="mt-1 font-medium text-gray_r-12">{ currencyFormat(transaction.amount_total) }</p>
+                  </div>
                 </div>
               </Link>
             </div>