Skip to content
Docs
Back to Components

RoutingBreakdownCard

@hua-labs/ui/advanced/dashboard
v1.0.0

bash
npm install @hua-labs/hua
tsx
import { RoutingBreakdownCard } from "@hua-labs/ui/advanced/dashboard";

PG Routing Breakdown

Processing by payment gateway

총 거래: 100,000
Toss Payments정상
Primary PG
45,000
45%
Nice Pay정상
Backup PG
30,000
30%
KG Inicis감시
Latency detected
15,000
15%
Kakao Pay정상
10,000
10%

By Payment Method

Transactions by payment method

총 거래: ₩100,000,000
Credit Card
65,000
65%
Bank Transfer
20,000
20%
Virtual Account
10,000
10%
Mobile Pay
5,000
5%

PG / 결제수단 비중

라우팅별 처리 비율과 상태

총 거래: 100,000
Toss Payments정상
Primary PG
45,000
45%
Nice Pay정상
Backup PG
30,000
30%
KG Inicis감시
Latency detected
15,000
15%
Kakao Pay정상
10,000
10%

Status Examples

라우팅별 처리 비율과 상태

총 거래: 100
Normal정상
50
50%
Warning감시
30
30%
Critical장애
20
20%

PG / 결제수단 비중

라우팅별 처리 비율과 상태

라우팅 데이터가 없습니다

PG 라우팅 혹은 결제수단 정보가 수집되면 자동으로 표시됩니다.

Props

segments*RoutingBreakdownSegment[]-Array of routing segments
titlestring"PG / Payment Method"Card title
descriptionstring"Routing ratio and status"Card description
totalLabelstring"Total"Label for total value
totalValueReact.ReactNode-Custom total value display
highlightIdstring-ID of segment to highlight
actionsReact.ReactNode-Action buttons
emptyStateReact.ReactNode-Custom empty state component
formatter(segment, percentage) => React.ReactNode-Custom value formatter

RoutingBreakdownSegment

id*string-Unique segment identifier
label*string-Segment label
value*number-Segment value
colorstring-Custom color (hex)
status"normal" | "warning" | "critical"-Health status
iconstring-Icon name
detailstring-Detail information

BasicRoutingBreakdown.tsxtsx
import { RoutingBreakdownCard } from "@hua-labs/ui/advanced/dashboard";

export function BasicRoutingBreakdown() {
  const segments = [
    { id: "pg1", label: "PG A", value: 5000, status: "normal" as const },
    { id: "pg2", label: "PG B", value: 3000, status: "warning" as const },
    { id: "pg3", label: "PG C", value: 2000, status: "normal" as const }
  ];

  return (
    <RoutingBreakdownCard
      title="PG Routing Breakdown"
      segments={segments}
      totalValue="10,000"
    />
  );
}
SettlementTimelineProMerchantListPro