Preview

Budget management

Track departmental and project budgets with category-level visibility.

Budget Tracking compositions use Card, Progress (segments), ProgressRing, StatCard, Alert, DataGrid, and Field for budget lifecycle management.

4

budget views

3

alert thresholds

6

category segments

Best for: Departmental budgets, project cost tracking, and financial planning.
Pairs with: Transaction Management, Analytics Dashboards, Approval Workflows.

Included patterns

• Segmented progress for category breakdown

• Budget vs. actual comparison

• Threshold-based alerting

• Period-over-period trending

Variants

Budget card

Summary card with progress ring, spend vs. allocation, and trend.

Budget creation form

Form for setting budget amount, period, and category allocation.

Budget breakdown table

Category-by-category spend table with segmented progress bars.

Over-budget alert

Alert composition for budgets exceeding threshold.

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>Budget management</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="#">Budgets</Sidebar.Item>
            <Sidebar.Item href="#">Categories</Sidebar.Item>
            <Sidebar.Item href="#">Alerts</Sidebar.Item>
            <Sidebar.Item href="#">Reports</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}>Track departmental and project budgets with category-level visibility.</PageHeader.Title>
          <PageHeader.Description>Budget Tracking compositions use Card, Progress (segments), ProgressRing, StatCard, Alert, DataGrid, and Field for budget lifecycle management.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">budget views</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>3</Heading>
          <Text as="p">alert thresholds</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>6</Heading>
          <Text as="p">category segments</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>Departmental budgets, project cost tracking, and financial planning.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Pairs with</DescriptionList.Term>
        <DescriptionList.Description>Transaction Management, Analytics Dashboards, Approval Workflows.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Segmented progress for category breakdown</Text>
        <Text as="p">• Budget vs. actual comparison</Text>
        <Text as="p">• Threshold-based alerting</Text>
        <Text as="p">• Period-over-period trending</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>