Skeleton

1 files changed, 72 insertions, 63 deletions

diff --git a/src/pages/my/transactions/[id].js b/src/pages/my/transactions/[id].js
index 79337a29..c56493ad 100644
--- a/src/pages/my/transactions/[id].js
+++ b/src/pages/my/transactions/[id].js
@@ -11,6 +11,7 @@ import currencyFormat from "@/core/utils/currencyFormat";
 import Disclosure from "@/components/elements/Disclosure";
 import DescriptionRow from "@/components/elements/DescriptionRow";
 import { CustomerSection } from "@/components/transactions/TransactionDetail";
+import { SkeletonList } from "@/components/elements/Skeleton";
 
 export default function DetailTransactions() {
   const router = useRouter();
@@ -44,79 +45,87 @@ export default function DetailTransactions() {
     <WithAuth>
       <Layout className="pb-4">
         <AppBar title="Detail Transaksi" />
-          
-        <div className="p-4 flex flex-col gap-y-4">
-          <DescriptionRow label="Status Transaksi">
-            <span className="badge-green">Pending Quotation</span>
-          </DescriptionRow>
-          <DescriptionRow label="No Transaksi">
-            { transaction?.name }
-          </DescriptionRow>
-          <DescriptionRow label="Purchase Order">
-            { transaction?.po_name || '-' }
-          </DescriptionRow>
-          <DescriptionRow label="Ketentuan Pembayaran">
-            { transaction?.payment_term }
-          </DescriptionRow>
-          <DescriptionRow label="Nama Sales">
-            { transaction?.sales }
-          </DescriptionRow>
-          <DescriptionRow label="Waktu Transaksi">
-            { transaction?.date_order }
-          </DescriptionRow>
-        </div>
+        
+        { transaction ? (
+          <>
+            <div className="p-4 flex flex-col gap-y-4">
+              <DescriptionRow label="Status Transaksi">
+                <span className="badge-green">Pending Quotation</span>
+              </DescriptionRow>
+              <DescriptionRow label="No Transaksi">
+                { transaction?.name }
+              </DescriptionRow>
+              <DescriptionRow label="Purchase Order">
+                { transaction?.po_name || '-' }
+              </DescriptionRow>
+              <DescriptionRow label="Ketentuan Pembayaran">
+                { transaction?.payment_term }
+              </DescriptionRow>
+              <DescriptionRow label="Nama Sales">
+                { transaction?.sales }
+              </DescriptionRow>
+              <DescriptionRow label="Waktu Transaksi">
+                { transaction?.date_order }
+              </DescriptionRow>
+            </div>
 
-        <LineDivider />
+            <LineDivider />
 
-        <Disclosure 
-          label="Detail Produk"
-        />
-
-        <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
-          { transaction?.products?.map((product, index) => (
-            <VariantCard
-              key={index}
-              data={product}
+            <Disclosure 
+              label="Detail Produk"
             />
-          )) }
-          <div className="flex justify-between mt-3 font-medium">
-            <p>Total Belanja</p>
-            <p>{ currencyFormat(transaction?.amount_total || 0) }</p>
-          </div>
-        </div>
 
+            <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3">
+              { transaction?.products?.map((product, index) => (
+                <VariantCard
+                  key={index}
+                  data={product}
+                />
+              )) }
+              <div className="flex justify-between mt-3 font-medium">
+                <p>Total Belanja</p>
+                <p>{ currencyFormat(transaction?.amount_total || 0) }</p>
+              </div>
+            </div>
 
-        <LineDivider />
 
-        <Disclosure 
-          label="Detail Pembeli" 
-          active={activeSection.purchase} 
-          onClick={() => toggleSection('purchase')} 
-        />
-        { activeSection.purchase && (
-          <CustomerSection address={transaction?.address?.customer} />
-        ) }
+            <LineDivider />
 
-        <LineDivider />
+            <Disclosure 
+              label="Detail Pembeli" 
+              active={activeSection.purchase} 
+              onClick={() => toggleSection('purchase')} 
+            />
+            { activeSection.purchase && (
+              <CustomerSection address={transaction?.address?.customer} />
+            ) }
 
-        <Disclosure 
-          label="Detail Pengiriman" 
-          active={activeSection.shipping} 
-          onClick={() => toggleSection('shipping')} 
-        />
-        { activeSection.shipping && (
-          <CustomerSection address={transaction?.address?.shipping} />
-        ) }
+            <LineDivider />
 
-        <LineDivider />
+            <Disclosure 
+              label="Detail Pengiriman" 
+              active={activeSection.shipping} 
+              onClick={() => toggleSection('shipping')} 
+            />
+            { activeSection.shipping && (
+              <CustomerSection address={transaction?.address?.shipping} />
+            ) }
+
+            <LineDivider />
 
-        <Disclosure 
-          label="Detail Penagihan" 
-          active={activeSection.invoice} 
-          onClick={() => toggleSection('invoice')} 
-        />
-        { activeSection.invoice && (
-          <CustomerSection address={transaction?.address?.invoice} />
+            <Disclosure 
+              label="Detail Penagihan" 
+              active={activeSection.invoice} 
+              onClick={() => toggleSection('invoice')} 
+            />
+            { activeSection.invoice && (
+              <CustomerSection address={transaction?.address?.invoice} />
+            ) }
+          </>
+        ) : (
+          <div className="p-4">
+            <SkeletonList number={12} />
+          </div>
         ) }
       </Layout>
     </WithAuth>