Preview

Transaction review

Review, categorize, and act on transactions without leaving the list.

Transaction Management compositions use DataGrid (with row expansion and bulk select), Badge, Chip/ChipGroup, Button, ButtonGroup, and Checkbox.

6

column types

4

filter options

3

bulk actions

Best for: Corporate card reconciliation, expense categorization, and audit review.
Pairs with: Receipt Capture, Budget Tracking, Corporate Card Management.

Included patterns

• DataGrid with expandable rows

• Bulk selection with action bar

• ChipGroup filter bar

• Category and status badges

Variants

Transaction list

Filterable DataGrid with category, date, and status columns.

Inline detail expansion

Expandable row showing receipt, notes, and policy status.

Bulk action bar

Floating bar for batch categorize, approve, or flag operations.

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>Transaction review</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="#">Transactions</Sidebar.Item>
            <Sidebar.Item href="#">Reports</Sidebar.Item>
            <Sidebar.Item href="#">Cards</Sidebar.Item>
            <Sidebar.Item href="#">Budgets</Sidebar.Item>
            <Sidebar.Item href="#">Settings</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Review, categorize, and act on transactions without leaving the list.</PageHeader.Title>
          <PageHeader.Description>Transaction Management compositions use DataGrid (with row expansion and bulk select), Badge, Chip/ChipGroup, Button, ButtonGroup, and Checkbox.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>6</Heading>
          <Text as="p">column types</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">filter options</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">bulk actions</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>Corporate card reconciliation, expense categorization, and audit review.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Pairs with</DescriptionList.Term>
        <DescriptionList.Description>Receipt Capture, Budget Tracking, Corporate Card Management.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• DataGrid with expandable rows</Text>
        <Text as="p">• Bulk selection with action bar</Text>
        <Text as="p">• ChipGroup filter bar</Text>
        <Text as="p">• Category and status badges</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>