Preview

Open in new tab

Analytics surface

Start from a dashboard that already understands travel and expense metrics.

Analytics Dashboards package StatCard rows, filter controls, and dense data surfaces for admin workflows.

6

kpi cards

3

dashboard layouts

2

summary rails

Dashboard	Primary KPI	Secondary surface
Spend	Total travel spend	Department table
Compliance	In-policy rate	Approval queue
Sustainability	CO2 emissions	Route comparison

Built from: StatCard, Chart, DataGrid, DateRangePicker, Card, and Tabs.
Use when: Travel, finance, and operations teams need one reusable admin dashboard baseline.

Included patterns

• KPI row

• Filter and export controls

• Department breakdown surface

Variants

Spend dashboard

Travel and expense metrics with departmental breakdowns.

Compliance dashboard

KPI-first view for policy adherence and approval backlog.

Sustainability dashboard

Emissions summary with benchmark comparisons and goals.

Source

Copy this source into your app and own it. The theme imports are already included.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { AppBar, Card, DescriptionList, Fieldset, Heading, PageHeader, PageLayout, Sidebar, Stack, Table, Text } from '@dryui/ui';
</script>
<PageLayout.Root fullHeight>
  <PageLayout.Header sticky>
    <AppBar.Root>
      <AppBar.Title>Analytics surface</AppBar.Title>
    </AppBar.Root>
  </PageLayout.Header>
  <PageLayout.Sidebar sticky>
    <Sidebar.Root style="height: 100%;">
      <Sidebar.Content>
        <Sidebar.Group>
          <Sidebar.GroupLabel>Navigation</Sidebar.GroupLabel>
            <Sidebar.Item active href="#">Spend</Sidebar.Item>
            <Sidebar.Item href="#">Compliance</Sidebar.Item>
            <Sidebar.Item href="#">Sustainability</Sidebar.Item>
            <Sidebar.Item href="#">Export</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Start from a dashboard that already understands travel and expense metrics.</PageHeader.Title>
          <PageHeader.Description>Analytics Dashboards package StatCard rows, filter controls, and dense data surfaces for admin workflows.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>6</Heading>
          <Text as="p">kpi cards</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">dashboard layouts</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">summary rails</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
        <Table.Root>
          <Table.Header>
            <Table.Row>
              <Table.Head>Dashboard</Table.Head>
              <Table.Head>Primary KPI</Table.Head>
              <Table.Head>Secondary surface</Table.Head>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.Cell>Spend</Table.Cell>
              <Table.Cell>Total travel spend</Table.Cell>
              <Table.Cell>Department table</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Compliance</Table.Cell>
              <Table.Cell>In-policy rate</Table.Cell>
              <Table.Cell>Approval queue</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Sustainability</Table.Cell>
              <Table.Cell>CO2 emissions</Table.Cell>
              <Table.Cell>Route comparison</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table.Root>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built from</DescriptionList.Term>
        <DescriptionList.Description>StatCard, Chart, DataGrid, DateRangePicker, Card, and Tabs.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Use when</DescriptionList.Term>
        <DescriptionList.Description>Travel, finance, and operations teams need one reusable admin dashboard baseline.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• KPI row</Text>
        <Text as="p">• Filter and export controls</Text>
        <Text as="p">• Department breakdown surface</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>