Preview

Open in new tab

Approval system

Turn ad hoc review flows into reusable approval surfaces.

Approval Workflows package queue framing, context cards, and action placement for faster travel and expense reviews.

3

queue modes

4

approval states

2

action clusters

State	Owner	Action
Pending	Manager	Approve or reject
Needs info	Traveler	Add justification
Escalated	Finance	Review exception

Built from: Card, StatCard, Stepper, Timeline, ButtonGroup, and Chip.
Designed for: Travel approvals, expense reimbursements, and finance review queues.

Included patterns

• Queue header with counts

• Context summary rail

• Approval chain treatment

Variants

Approval inbox

Queue layout for pending trip or expense review.

Proposal review

Proposal detail with justification and action cluster.

Approval chain

Status chain with completed, pending, and escalation states.

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>Approval system</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="#">Needs info</Sidebar.Item>
            <Sidebar.Item href="#">Approved</Sidebar.Item>
            <Sidebar.Item href="#">Escalated</Sidebar.Item>
        </Sidebar.Group>
      </Sidebar.Content>
    </Sidebar.Root>
  </PageLayout.Sidebar>
  <PageLayout.Content>
    <Stack gap="lg">
      <PageHeader.Root>
        <PageHeader.Content>
          <PageHeader.Title level={1}>Turn ad hoc review flows into reusable approval surfaces.</PageHeader.Title>
          <PageHeader.Description>Approval Workflows package queue framing, context cards, and action placement for faster travel and expense reviews.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">queue modes</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">approval states</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">action clusters</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
        <Table.Root>
          <Table.Header>
            <Table.Row>
              <Table.Head>State</Table.Head>
              <Table.Head>Owner</Table.Head>
              <Table.Head>Action</Table.Head>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            <Table.Row>
              <Table.Cell>Pending</Table.Cell>
              <Table.Cell>Manager</Table.Cell>
              <Table.Cell>Approve or reject</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Needs info</Table.Cell>
              <Table.Cell>Traveler</Table.Cell>
              <Table.Cell>Add justification</Table.Cell>
            </Table.Row>
            <Table.Row>
              <Table.Cell>Escalated</Table.Cell>
              <Table.Cell>Finance</Table.Cell>
              <Table.Cell>Review exception</Table.Cell>
            </Table.Row>
          </Table.Body>
        </Table.Root>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built from</DescriptionList.Term>
        <DescriptionList.Description>Card, StatCard, Stepper, Timeline, ButtonGroup, and Chip.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Designed for</DescriptionList.Term>
        <DescriptionList.Description>Travel approvals, expense reimbursements, and finance review queues.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Queue header with counts</Text>
        <Text as="p">• Context summary rail</Text>
        <Text as="p">• Approval chain treatment</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>