mercadodevida/work/artifacts/F-074/implementer.md

F-074 — Implementer evidence: Audit shows real-time logs from application services

Problem

The admin audit page (/audit) fetched audit log entries once on mount. New entries from application services only appeared after a page refresh.

Changes

project/apps/admin/src/app/(dashboard)/audit/page.tsx:

• Added useRef import for stable reference to current items without triggering re-renders
• Added itemsRef (useRef) to keep track of current items for deduplication
• Added newCount state to track number of new entries since last view
• Added pollingActive state to track whether polling is active
• Added useEffect that keeps itemsRef in sync with items state
• Added polling useEffect (5-second interval) that fetches latest entries and prepends new ones:
  • Polls only when page === 0 and no filter is active
  • Uses itemsRef (not items) to avoid re-running the effect when items change
  • Deduplicates by id to avoid showing duplicates
  • Prepends new entries to list (slice to PAGE_SIZE)
  • Increments newCount for each new entry
• Header now shows:
  • "● En vivo" (green pulse dot) when polling is active on page 0
  • "+N nuevas" badge when new entries have arrived (click to dismiss)
• Polling stops automatically when navigating to page > 0 or when filter is active

Verification

• npx tsc --noEmit admin — exit 0 ✅
• npx eslint on changed file — exit 0 ✅
• ./scripts/verify.sh — exit 0 ✅

Files touched

project/apps/admin/src/app/(dashboard)/audit/page.tsx   (modified)
work/artifacts/F-074/implementer.md                  (this file)