Preview

Reimbursement flow

Track every reimbursement from submission to deposit.

Reimbursement Tracker compositions use Stepper (horizontal, clickable), Card, Badge, Alert, FormatNumber, and FormatDate for payment pipeline visibility.

5

pipeline stages

3

payment methods

4

status types

Best for: Employee expense reimbursement tracking and payroll integration views.
Pairs with: Receipt Capture, Transaction Management, Budget Tracking.

Included patterns

• Clickable stepper pipeline

• Payment method display

• Currency formatting

• Failed payment retry flow

Variants

Status pipeline

Horizontal stepper showing reimbursement progress stages.

Payment detail

Card with payment method, amount, and estimated date.

Failed payment alert

Alert with failure reason and retry action.

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>Reimbursement flow</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="#">Pending</Sidebar.Item>
            <Sidebar.Item href="#">In Progress</Sidebar.Item>
            <Sidebar.Item href="#">Completed</Sidebar.Item>
            <Sidebar.Item href="#">Failed</Sidebar.Item>
            <Sidebar.Item href="#">History</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Track every reimbursement from submission to deposit.</PageHeader.Title>
          <PageHeader.Description>Reimbursement Tracker compositions use Stepper (horizontal, clickable), Card, Badge, Alert, FormatNumber, and FormatDate for payment pipeline visibility.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>5</Heading>
          <Text as="p">pipeline stages</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">payment methods</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">status types</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>Employee expense reimbursement tracking and payroll integration views.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Pairs with</DescriptionList.Term>
        <DescriptionList.Description>Receipt Capture, Transaction Management, Budget Tracking.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Clickable stepper pipeline</Text>
        <Text as="p">• Payment method display</Text>
        <Text as="p">• Currency formatting</Text>
        <Text as="p">• Failed payment retry flow</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>