TransactionDetailDrawer

v1.0.0

bash

npm install @hua-labs/hua

tsx

import { TransactionDetailDrawer } from "@hua-labs/ui/advanced/dashboard";

Props


`open*`	`boolean`	-	Drawer open state
`onClose*`	`() => void`	-	Close handler
`transaction`	`TransactionDetail`	-	Transaction detail information
`metadata`	`TransactionMetadataItem[]`	`[]`	Additional metadata items
`settlement`	`SettlementInfo`	-	Settlement information
`fees`	`FeeBreakdown[]`	`[]`	Fee breakdown items
`events`	`TransactionEvent[]`	`[]`	Event log items
`actions`	`React.ReactNode`	-	Footer action buttons
`summary`	`React.ReactNode`	-	Custom summary component
`loading`	`boolean`	`false`	Loading state
`locale`	`string`	`"ko-KR"`	Locale for formatting
`defaultCurrency`	`string`	`"KRW"`	Default currency
`emptyState`	`React.ReactNode`	-	Custom empty state when no transaction

TransactionDetail


`id*`	`string`	-	Transaction ID
`status*`	`TransactionStatus`	-	Transaction status
`amount*`	`number`	-	Transaction amount
`currency`	`string`	-	Currency code
`merchant`	`string`	-	Merchant name
`method`	`string`	-	Payment method
`createdAt`	`string \| Date`	-	Created date
`approvedAt`	`string \| Date`	-	Approved date
`customer`	`string`	-	Customer information
`reference`	`string`	-	Reference number

BasicTransactionDrawer.tsxtsx

import { useState } from "react";
import { TransactionDetailDrawer } from "@hua-labs/ui/advanced/dashboard";
import { Button } from "@hua-labs/ui";

export function BasicTransactionDrawer() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>
        View Transaction
      </Button>
      <TransactionDetailDrawer
        open={open}
        onClose={() => setOpen(false)}
        transaction={{
          id: "tx_123456",
          status: "approved",
          amount: 150000,
          currency: "KRW",
          merchant: "Test Merchant",
          method: "Credit Card",
          createdAt: new Date(),
          customer: "John Doe"
        }}
        metadata={[
          { label: "Transaction ID", value: "tx_123456", icon: "wallet" },
          { label: "Customer", value: "John Doe", icon: "user" }
        ]}
      />
    </>
  );
}

TransactionsTablePro SettlementTimelinePro