corrosion-admin-panel/frontend/src/views/admin/WipeHistoryView.vue

<script setup lang="ts">
import { onMounted } from 'vue'
import { useWipeStore } from '@/stores/wipe'
import { safeDate } from '@/utils/formatters'
import Panel from '@/components/ds/data/Panel.vue'
import Button from '@/components/ds/core/Button.vue'
import Badge from '@/components/ds/core/Badge.vue'
import Icon from '@/components/ds/core/Icon.vue'
import EmptyState from '@/components/ds/feedback/EmptyState.vue'

const wipeStore = useWipeStore()

function wipeTone(status: string): 'online' | 'offline' | 'warn' | 'neutral' {
  if (status === 'success') return 'online'
  if (status === 'failed' || status === 'rolled_back') return 'offline'
  if (status === 'wiping' || status === 'pre_wipe' || status === 'post_wipe') return 'warn'
  return 'neutral'
}

function duration(start: string | null, end: string | null): string {
  if (!start || !end) return '—'
  const ms = new Date(end).getTime() - new Date(start).getTime()
  const s = Math.floor(ms / 1000)
  const m = Math.floor(s / 60)
  if (m > 0) return `${m}m ${s % 60}s`
  return `${s}s`
}

onMounted(() => {
  wipeStore.fetchHistory()
})
</script>

<template>
  <div class="wh">
    <!-- Page head -->
    <div class="wh__head">
      <div class="wh__head-id">
        <div class="wh__head-chip">
          <Icon name="clock" :size="20" :stroke-width="2" />
        </div>
        <div>
          <div class="t-eyebrow">Auto-wiper</div>
          <h1 class="wh__title">Wipe history</h1>
        </div>
      </div>
      <Button
        variant="secondary"
        size="sm"
        icon="refresh-cw"
        :loading="wipeStore.isLoading"
        :disabled="wipeStore.isLoading"
        @click="wipeStore.fetchHistory()"
      >Refresh</Button>
    </div>

    <!-- Summary line -->
    <div v-if="!wipeStore.isLoading" class="wh__summary">
      {{ wipeStore.history.length }} wipe{{ wipeStore.history.length === 1 ? '' : 's' }} recorded
    </div>

    <!-- History table -->
    <Panel :flush-body="true" title="All wipes">
      <EmptyState
        v-if="wipeStore.history.length === 0 && !wipeStore.isLoading"
        icon="trash-2"
        title="No wipe history"
        description="Wipes will appear here once they run."
      />

      <div v-else-if="wipeStore.isLoading" class="wh__loading">
        <Icon name="loader" :size="20" class="wh__spin" />
        <span>Loading history…</span>
      </div>

      <table v-else class="cc-table">
        <thead>
          <tr>
            <th>Type</th>
            <th>Trigger</th>
            <th>Status</th>
            <th>Started</th>
            <th>Duration</th>
            <th>Map</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="wipe in wipeStore.history"
            :key="wipe.id"
          >
            <td class="td-primary">{{ wipe.wipe_type }}</td>
            <td>{{ wipe.trigger_type.replace('_', ' ') }}</td>
            <td>
              <Badge :tone="wipeTone(wipe.status)">{{ wipe.status.replace('_', ' ') }}</Badge>
            </td>
            <td class="td-mono">{{ safeDate(wipe.started_at, '—') }}</td>
            <td class="td-mono">{{ duration(wipe.started_at, wipe.completed_at) }}</td>
            <td>{{ wipe.map_used || '—' }}</td>
          </tr>
        </tbody>
      </table>
    </Panel>
  </div>
</template>

<style scoped>
.wh {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Page head */
.wh__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.wh__head-id { display: flex; align-items: center; gap: 12px; }
.wh__head-chip {
  width: 40px; height: 40px; flex: none; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.wh__title {
  font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-primary); margin-top: 3px;
}
.wh__summary {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  margin-top: -4px;
}

/* Loading state */
.wh__loading {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 36px 16px;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}
@keyframes wh-spin { to { transform: rotate(360deg); } }
.wh__spin { animation: wh-spin 0.7s linear infinite; }

/* Table */
.cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.cc-table thead tr {
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-inset);
}
.cc-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.cc-table tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: var(--transition-colors);
}
.cc-table tbody tr:last-child { border-bottom: 0; }
.cc-table tbody tr:hover { background: var(--surface-hover); }
.cc-table td {
  padding: 11px 16px;
  color: var(--text-secondary);
  vertical-align: middle;
}
.td-primary { color: var(--text-primary); font-weight: 500; text-transform: capitalize; }
.td-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
</style>