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

F-073 — Implementer evidence: Activate/deactivate VAT types in admin tax rates page

Problem

The /tax-rates page required entering inline edit mode (click ✏️ RowActions → change dropdown → save) just to toggle the active/inactive state of a VAT type. This was cumbersome UX for a simple binary toggle.

Changes

project/apps/admin/src/app/(dashboard)/tax-rates/page.tsx:

• Added toggling state (Record<string, boolean>) to track in-flight toggle API calls
• Added toggleActive(id, newActive) async function that calls taxApi.update(id, { active: newActive }) and optimistically updates local state
• Replaced the badge-only display in the "Estado" column with a pill-style toggle switch:
  • Green (bg-green-500) when active, gray (bg-gray-300) when inactive
  • Animated white circle slides left/right
  • Loading spinner (animate-pulse) while API call is in flight
  • focus:ring-2 for keyboard accessibility
  • disabled when toggling[r.id] or saving
• Existing inline edit mode (for name/rate changes) is preserved as-is

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)/tax-rates/page.tsx   (modified)
work/artifacts/F-073/implementer.md                          (this file)