diff options
| -rw-r--r-- | src/components/elements/Skeleton.js | 18 | ||||
| -rw-r--r-- | src/pages/my/transactions/[id].js | 135 |
2 files changed, 90 insertions, 63 deletions
diff --git a/src/components/elements/Skeleton.js b/src/components/elements/Skeleton.js new file mode 100644 index 00000000..843b200f --- /dev/null +++ b/src/components/elements/Skeleton.js @@ -0,0 +1,18 @@ +const SkeletonList = ({ number }) => ( + <div role="status" className="space-y-5 animate-pulse"> + { Array.from(Array(number), (e, i) => ( + <div className="flex items-center justify-between" key={i}> + <div> + <div className="h-2.5 bg-gray-300 rounded-full w-24 mb-2.5"></div> + <div className="w-32 h-2 bg-gray-200 rounded-full"></div> + </div> + <div className="h-2.5 bg-gray-300 rounded-full w-12"></div> + </div> + )) } + <span className="sr-only">Loading...</span> + </div> +); + +export { + SkeletonList +};
\ No newline at end of file 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> |