Preview

Audit & compliance

Every action logged, searchable, and exportable for compliance.

Audit Log compositions use DataGrid (with row expansion), Chip, DateRangePicker, Input, and Button for comprehensive audit trail management.

5

log columns

4

filter types

2

export formats

Best for: SOC 2 compliance, security auditing, and admin activity monitoring.
Pairs with: Policy Builder, Integration Marketplace, Settings pages.

Included patterns

• DataGrid with expandable detail rows

• Multi-filter composition

• Date range scoping

• CSV export with presets

Variants

Searchable log table

DataGrid with timestamp, user, action, and resource columns.

Filter bar

Date range, user, and action type filters with chip display.

Detail expansion

Expandable row showing full event payload and metadata.

CSV export

Export button with date range and filter preset selection.

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>Audit & compliance</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="#">Activity</Sidebar.Item>
            <Sidebar.Item href="#">Users</Sidebar.Item>
            <Sidebar.Item href="#">Policies</Sidebar.Item>
            <Sidebar.Item href="#">Exports</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}>Every action logged, searchable, and exportable for compliance.</PageHeader.Title>
          <PageHeader.Description>Audit Log compositions use DataGrid (with row expansion), Chip, DateRangePicker, Input, and Button for comprehensive audit trail management.</PageHeader.Description>
        </PageHeader.Content>
      </PageHeader.Root>
    <Grid columns={3} gap="md">
      <Card.Root>
        <Card.Content>
          <Heading level={3}>5</Heading>
          <Text as="p">log columns</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>4</Heading>
          <Text as="p">filter types</Text>
        </Card.Content>
      </Card.Root>
      <Card.Root>
        <Card.Content>
          <Heading level={3}>2</Heading>
          <Text as="p">export formats</Text>
        </Card.Content>
      </Card.Root>
    </Grid>
    <DescriptionList.Root>
      <DescriptionList.Item>
        <DescriptionList.Term>Best for</DescriptionList.Term>
        <DescriptionList.Description>SOC 2 compliance, security auditing, and admin activity monitoring.</DescriptionList.Description>
      </DescriptionList.Item>
      <DescriptionList.Item>
        <DescriptionList.Term>Pairs with</DescriptionList.Term>
        <DescriptionList.Description>Policy Builder, Integration Marketplace, Settings pages.</DescriptionList.Description>
      </DescriptionList.Item>
    </DescriptionList.Root>
    <Fieldset.Root>
      <Fieldset.Legend>Included patterns</Fieldset.Legend>
      <Fieldset.Content>
        <Text as="p">• DataGrid with expandable detail rows</Text>
        <Text as="p">• Multi-filter composition</Text>
        <Text as="p">• Date range scoping</Text>
        <Text as="p">• CSV export with presets</Text>
      </Fieldset.Content>
    </Fieldset.Root>
    </Stack>
  </PageLayout.Content>
</PageLayout.Root>