dezky/apps/operator/pages/audit.vue

<script setup lang="ts">
import { OP_AUDIT, type AuditEntry } from '~/data/fixtures'

const search = ref('')

const filtered = computed(() => {
  const q = search.value.trim().toLowerCase()
  if (!q) return OP_AUDIT
  return OP_AUDIT.filter((a) => {
    return (
      a.action.toLowerCase().includes(q) ||
      a.actor.toLowerCase().includes(q) ||
      a.target.toLowerCase().includes(q) ||
      a.tenant.toLowerCase().includes(q)
    )
  })
})

function tone(a: AuditEntry): 'info' | 'warn' | 'bad' {
  return a.tone
}
function label(a: AuditEntry) {
  return a.tone === 'bad' ? 'fail' : a.tone === 'warn' ? 'warn' : 'ok'
}
</script>

<template>
  <div>
    <PageHeader
      eyebrow="Compliance"
      title="Global audit log"
      subtitle="Every operator action, every system event — across all tenants, immutable."
    />

    <div class="stage">
      <div class="toolbar">
        <div class="search">
          <UiIcon name="search" :size="13" />
          <input v-model="search" placeholder="action.type, actor, target…" type="text" />
        </div>
        <div class="streaming">
          <StatusDot color="var(--ok)" :size="6" />
          <Mono dim>streaming · mock</Mono>
        </div>
        <UiButton variant="secondary" disabled>
          <template #leading><UiIcon name="external" :size="13" /></template>
          Export CSV
        </UiButton>
      </div>

      <Card :pad="0">
        <table v-if="filtered.length">
          <thead>
            <tr>
              <th>Time</th>
              <th>Actor</th>
              <th>Action</th>
              <th>Target</th>
              <th>Tenant</th>
              <th>IP</th>
              <th class="r">Result</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="a in filtered" :key="a.id">
              <td><Mono>{{ a.when }}</Mono></td>
              <td class="actor">
                <div v-if="a.actor === 'system'" class="sys">sys</div>
                <Avatar v-else :name="a.actor" :size="22" />
                <div>
                  <div class="name">{{ a.actor }}</div>
                  <Mono dim>{{ a.role }}</Mono>
                </div>
              </td>
              <td><Mono class="action">{{ a.action }}</Mono></td>
              <td><span class="target">{{ a.target }}</span></td>
              <td>
                <Mono v-if="a.tenant !== '—'">{{ a.tenant }}</Mono>
                <Mono v-else dim>—</Mono>
              </td>
              <td><Mono dim>{{ a.ip }}</Mono></td>
              <td class="r"><Badge :tone="tone(a)" dot>{{ label(a) }}</Badge></td>
            </tr>
          </tbody>
        </table>
        <div v-else class="empty"><Mono dim>// no matching entries</Mono></div>
      </Card>

      <Mono dim class="note">// retention 7 years · write-once · mock fixtures — replace with real append-only audit collection</Mono>
    </div>
  </div>
</template>

<style scoped>
.stage { padding: 24px 40px 64px 40px; display: flex; flex-direction: column; gap: 16px; }

.toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-mute);
  min-width: 320px;
}
.search input {
  background: transparent;
  border: 0;
  outline: 0;
  flex: 1;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
}
.streaming { display: flex; align-items: center; gap: 8px; margin-left: auto; }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 12px 16px;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}
th.r, td.r { text-align: right; }
td { padding: 10px 16px; font-size: 12px; border-top: 1px solid var(--border); vertical-align: middle; }
td.actor { display: flex; align-items: center; gap: 10px; }
.name { font-size: 12px; font-weight: 500; }
.action { font-weight: 500; }
.target { font-size: 12px; color: var(--text-dim); }
.sys {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: var(--text);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-family: var(--font-mono);
}

.empty { padding: 40px 20px; text-align: center; }
.note { display: block; padding: 4px 4px 0 4px; }
</style>