DashboardToolbar

v1.0.0

bash

npm install @hua-labs/hua

tsx

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

Transactions Dashboard

View all transaction data

Revenue Analytics

업데이트: 2 minutes ago

Settlement History

variant="cards"

Card Style

With border and shadow

variant="plain"

Plain Style

Simple style without border

Props


`title`	`React.ReactNode`	-	Toolbar title
`description`	`React.ReactNode`	-	Toolbar description
`meta`	`React.ReactNode`	-	Meta information
`variant`	`"plain" \| "cards"`	`"cards"`	Visual style variant
`dateRange`	`DateRangeConfig`	-	Date range configuration
`filters`	`React.ReactNode`	-	Filter components
`actions`	`ToolbarAction[]`	-	Action buttons
`onRefresh`	`() => void`	-	Refresh callback
`lastUpdated`	`string`	-	Last updated timestamp

ToolbarAction


`label*`	`string`	-	Action label
`onClick`	`() => void`	-	Click handler
`href`	`string`	-	Link URL
`icon`	`IconName \| React.ReactNode`	-	Action icon
`appearance`	`"primary" \| "secondary" \| "ghost"`	`"secondary"`	Button appearance
`loading`	`boolean`	-	Loading state

DateRangeConfig


`value`	`{ from: Date; to: Date } \| null`	-	Selected date range
`presets`	`DatePreset[]`	-	Preset options
`onSelectPreset`	`(preset: DatePreset) => void`	-	Preset selection callback
`onCustomRange`	`() => void`	-	Custom range callback
`display`	`string`	-	Display text

BasicToolbar.tsxtsx

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

export function BasicToolbar() {
  return (
    <DashboardToolbar
      title="Transactions Dashboard"
      description="View all transaction data"
      actions={[
        { label: "Export", icon: "download", onClick: () => {} },
        { label: "Filter", icon: "funnel", onClick: () => {} }
      ]}
      onRefresh={() => console.log("Refresh")}
    />
  );
}

ToolbarWithDateRange.tsxtsx

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

export function ToolbarWithDateRange() {
  return (
    <DashboardToolbar
      title="Revenue Analytics"
      dateRange={{
        value: { from: new Date("2024-01-01"), to: new Date("2024-12-31") },
        display: "Jan 1, 2024 - Dec 31, 2024",
        presets: [
          { label: "Today", value: "today" },
          { label: "This Week", value: "thisWeek" },
          { label: "This Month", value: "thisMonth" }
        ],
        onSelectPreset: (preset) => console.log(preset),
        onCustomRange: () => console.log("Custom range")
      }}
      lastUpdated="Just now"
    />
  );
}

DashboardSidebarPro TransactionsTablePro