feat(ui): adopt stat strip on the Audit register#160
Conversation
Finishes the register stat-strip rollout: Audit's two stat sections now use the shared StatStrip. Programmes become click-to-filter (they were plain cards); the findings strip keeps Total/Open/Closed on findingStatusFilter, with the Overdue boolean toggle riding alongside as its own chip. Same vertical space reclaimed as every other register. Closes #159.
unidoc-alip
left a comment
There was a problem hiding this comment.
Finishes the register StatStrip rollout (#156) by converting Audit's two stat sections (Programmes, Findings) to the shared StatStrip component, closing #159. This is a faithful, mechanical port: the new programmeStatusStats and findingStatusStats computed arrays reference the exact same underlying counters as the old inline cards, and the Overdue boolean toggle correctly rides alongside the strip as its own chip rather than being forced into StatStrip's single v-model, matching the plan laid out in #158/#159. No correctness or security issues found.
1. [nit] web/src/views/Audit.vue line 232
The new Overdue toggle button hand-copies the exact chip markup structure from StatStrip.vue's active-chip branch (inline-flex items-baseline gap-1.5 rounded-full border px-3 py-1 text-xs transition-colors, plus the same span/count/label layout), just swapping blue for amber and inlining the boolean condition instead of taking props.
Suggested fix — extract a small shared component instead of copy-pasting the class string:
<!-- web/src/components/ToggleChip.vue -->
<template>
<button type="button" @click="$emit('toggle')"
class="inline-flex items-baseline gap-1.5 rounded-full border px-3 py-1 text-xs transition-colors"
:class="active ? activeClasses : 'border-slate-800 bg-slate-900 text-slate-400 hover:border-slate-700 hover:text-slate-300'"
:title="title">
<span class="font-bold tabular-nums" :class="active ? '' : (color || 'text-slate-100')">{{ count }}</span>
<span>{{ label }}</span>
</button>
</template>Then Audit's Overdue chip (and any future boolean-dimension chip) reuses it instead of duplicating the markup. Not blocking — one extra button, ~5 lines, no correctness impact — worth doing once a third register needs the same boolean-chip shape.
2. [nit] web/src/views/Audit.vue line 267
Programmes/Findings tabs show both the click-to-filter StatStrip chip and the pre-existing <select v-model="...StatusFilter"> dropdown bound to the same ref, so status can be set two ways.
Verified this is not new debt from this PR: Suppliers.vue, Legal.vue, Systems.vue, Objectives.vue, and even Tasks.vue (the original #157 reference implementation, predating the rollout) all keep both controls bound to the same ref. That rules out "leftover from a rushed rollout" — it's a deliberate, repo-wide convention: the dropdown supports precise/keyboard selection while the strip gives glanceable click-to-filter.
No fix suggested — flagging only for awareness; working as intended.
Finishes the register stat-strip rollout — Audit was the last holdout. Closes #159.
Audit is shaped differently from the other registers (two stat sections + a boolean "Overdue" toggle), so it was left out of the main rollout. Now:
StatStriponprogrammeStatusFilter(they were plain, non-clickable cards before).StatStriponfindingStatusFilter(Total / Open / Closed); the Overdue toggle rides alongside as its own amber chip, since it's a separate boolean dimension that doesn't fit the strip's singlev-model.Same slim treatment and reclaimed height as the rest.
just build-webgreen.