Preview

Corporate travel platform

A complete corporate travel starter with 12 production-ready screens.

Corporate Travel packages travel search, booking, itineraries, expense management, analytics, duty-of-care mapping, policy configuration, and administration into one cohesive starter kit built entirely on DryUI components.

Built from: StatCard, Chip, AvatarGroup, SegmentedControl, Card, DataGrid, Chart, Map, Stepper, Progress, Badge, Combobox, DateRangePicker, and 30+ more DryUI components.
Designed for: Corporate travel booking, expense management, duty-of-care, approvals, and finance operations.
Architecture: Each screen is a self-contained composition that can be used independently or combined into a full platform.

Included patterns

• Travel Dashboard Home

• Flight Search & Results

• Hotel Search & Results

• Booking Checkout

• Trip Itinerary

• Expense Dashboard

• Receipt Submission

• Admin Analytics

• Traveler Map

• Policy Configuration

• Approval Queue

• Settings & Integrations

Home

Travel Dashboard

StatCard-led home with upcoming trips, approval queue, and spend KPIs.

Search & Booking

Multi-modal search forms, result cards, and checkout with policy compliance.

Expense Management

Transaction grid, receipt capture, budget tracking, and reimbursement pipeline.

Administration

Analytics dashboards, traveler map, policy builder, and integration marketplace.

Variants

Travel Dashboard Home

StatCard row, upcoming trips, approval queue summary, and spend overview.

Flight Search & Results

Trip Search form with flight results, fare comparison, and policy badges.

Hotel Search & Results

Hotel search form with map/list toggle, rate comparison, and availability.

Booking Checkout

Policy compliance summary, traveler details, and payment selection flow.

Trip Itinerary

Full Itinerary Timeline with flight, hotel, and car segments with status.

Expense Dashboard

Transaction management grid with budget tracking and category breakdown.

Receipt Submission

Receipt capture upload zone with OCR preview and categorization.

Admin Analytics

Full analytics dashboard with KPI cards, charts, and date range controls.

Traveler Map

Live traveler map with pins, risk zones, and detail popovers.

Policy Configuration

Policy builder with rule rows, templates, and preview/test mode.

Approval Queue

Approval inbox with proposal cards, context summary, and action buttons.

Settings & Integrations

Integration marketplace grid with category filters and connection status.

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 { Badge, Button, Card, Container, DescriptionList, Fieldset, Grid, Heading, Stack, Text } from '@dryui/ui';
</script>
<Container>
  <Stack gap="xl">
    <Badge variant="outline">Corporate travel platform</Badge>
    <Heading level={1}>A complete corporate travel starter with 12 production-ready screens.</Heading>
    <Text as="p">Corporate Travel packages travel search, booking, itineraries, expense management, analytics, duty-of-care mapping, policy configuration, and administration into one cohesive starter kit built entirely on DryUI components.</Text>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Built from</DescriptionList.Term>
        <DescriptionList.Description>StatCard, Chip, AvatarGroup, SegmentedControl, Card, DataGrid, Chart, Map, Stepper, Progress, Badge, Combobox, DateRangePicker, and 30+ more DryUI components.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Designed for</DescriptionList.Term>
        <DescriptionList.Description>Corporate travel booking, expense management, duty-of-care, approvals, and finance operations.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Architecture</DescriptionList.Term>
        <DescriptionList.Description>Each screen is a self-contained composition that can be used independently or combined into a full platform.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• Travel Dashboard Home</Text>
        <Text as="p">• Flight Search & Results</Text>
        <Text as="p">• Hotel Search & Results</Text>
        <Text as="p">• Booking Checkout</Text>
        <Text as="p">• Trip Itinerary</Text>
        <Text as="p">• Expense Dashboard</Text>
        <Text as="p">• Receipt Submission</Text>
        <Text as="p">• Admin Analytics</Text>
        <Text as="p">• Traveler Map</Text>
        <Text as="p">• Policy Configuration</Text>
        <Text as="p">• Approval Queue</Text>
        <Text as="p">• Settings & Integrations</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            <Badge variant="soft">Home</Badge>
            <Heading level={3}>Travel Dashboard</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">StatCard-led home with upcoming trips, approval queue, and spend KPIs.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Search & Booking</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Multi-modal search forms, result cards, and checkout with policy compliance.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Expense Management</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Transaction grid, receipt capture, budget tracking, and reimbursement pipeline.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Header>
          <Stack gap="xs">
            
            <Heading level={3}>Administration</Heading>
          </Stack>
        </Card.Header>
        <Card.Content>
          <Stack gap="sm">
            <Text as="p">Analytics dashboards, traveler map, policy builder, and integration marketplace.</Text>
            
          </Stack>
        </Card.Content>
      </Card.Root>
    </Grid>
    <Stack gap="sm" style="flex-direction: row; flex-wrap: wrap;">
        <Button>Copy corporate travel kit</Button>
        <Button variant="outline">Browse all 12 screens</Button>
    </Stack>
  </Stack>
</Container>