SettlementTimeline

v1.0.0

bash

npm install @hua-labs/hua

tsx

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

정산 타임라인

처리 단계별 상태와 금액을 확인하세요.

Settlement Request Received정산 완료Auto processed
Settlement request received from merchant
₩1,500,000
2026. 2. 18. 오후 5:36
Fee Settlement정산 완료
Fees have been deducted
₩1,455,000
2026. 2. 19. 오후 5:36
Bank Transfer Processing처리 중
Transfer request in progress
₩1,455,000
Deposit Expected대기
Expected within 1-2 business days
₩1,455,000
2026. 2. 22. 오후 5:36

정산 타임라인

처리 단계별 상태와 금액을 확인하세요.

Settlement Request Received정산 완료Auto processed
Settlement request received from merchant
₩1,500,000
2026. 2. 18. 오후 5:36
Fee Settlement정산 완료
Fees have been deducted
₩1,455,000
2026. 2. 19. 오후 5:36
Bank Transfer Processing처리 중
Transfer request in progress
₩1,455,000
Deposit Expected대기
Expected within 1-2 business days
₩1,455,000
2026. 2. 22. 오후 5:36

Success Flow

정산 타임라인

처리 단계별 상태와 금액을 확인하세요.

Completed정산 완료
₩100,000
Processing처리 중
₩100,000
Pending대기
₩100,000

Failed Flow

정산 타임라인

처리 단계별 상태와 금액을 확인하세요.

Settlement Request정산 완료
₩500,000
2026. 2. 19. 오후 5:36
Processing Failed실패
Failed due to account information error
₩500,000

정산 타임라인

처리 단계별 상태와 금액을 확인하세요.

정산 단계가 없습니다

정산 요청이 생성되면 자동으로 단계가 채워집니다.

Props


`items*`	`SettlementTimelineItem[]`	-	Array of timeline items
`highlightedId`	`string`	-	ID of the item to highlight
`locale`	`string`	`"ko-KR"`	Locale for formatting
`defaultCurrency`	`string`	`"KRW"`	Default currency
`emptyState`	`React.ReactNode`	-	Custom empty state component
`className`	`string`	-	Additional CSS classes

SettlementTimelineItem


`id*`	`string`	-	Unique item identifier
`title*`	`string`	-	Item title
`description`	`string`	-	Item description
`status*`	`"pending" \| "processing" \| "completed" \| "failed"`	-	Settlement status
`amount`	`number`	-	Settlement amount
`currency`	`string`	-	Currency code
`date`	`string \| Date`	-	Date/time of the step
`meta`	`string`	-	Additional meta information
`icon`	`IconName`	-	Custom icon

BasicSettlementTimeline.tsxtsx

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

export function BasicSettlementTimeline() {
  const items = [
    {
      id: "1",
      title: "Settlement Request",
      status: "completed" as const,
      amount: 1000000,
      currency: "KRW",
      date: new Date("2024-01-01")
    },
    {
      id: "2",
      title: "Processing",
      status: "processing" as const,
      amount: 1000000,
      currency: "KRW"
    },
    {
      id: "3",
      title: "Settlement Expected",
      status: "pending" as const,
      amount: 1000000,
      currency: "KRW",
      date: new Date("2024-01-05")
    }
  ];

  return <SettlementTimeline items={items} />;
}

TransactionDetailDrawerPro RoutingBreakdownCardPro