Deduction Claim Builder: Touch Accessibility & Evidence Upload

Version introduced: v0.1.114

Overview

This release addresses two related gaps in the Deduction Claim Builder — both rooted in the same screen (deduction-claim-builder.tsx). The first is a touch-device accessibility failure where action buttons were hidden behind hover states. The second is a missing evidence upload interface, despite the data model already supporting it.

---

Problem 1: Hover-only action buttons

What was wrong

Each DeductionLine item in the claim builder list rendered its Edit and Delete buttons using the Tailwind class pattern:

<!-- Before -->
<button class="opacity-0 group-hover:opacity-100">✏️ Edit</button>
<button class="opacity-0 group-hover:opacity-100">🗑️ Delete</button>

This means both buttons were invisible at all times unless the user was hovering with a pointer device. On touch screens — including mobile phones and tablets — hover is not a reliable interaction model. In most cases, the buttons were entirely unreachable.

Why it matters

• Delete has no alternative path in the list view. A user on a touch device could add a deduction line but not remove it.
• Edit was equally inaccessible, forcing touch users to potentially abandon and re-create claims.
• This affects any landlord, agent, or tenant accessing the dashboard from a mobile device.

Fix

Replace the hover-opacity pattern with a persistent kebab menu (⋮) on every DeductionLine. This follows the same KebabMenu component pattern already established in the WorkQueue feature, ensuring visual and behavioural consistency across the dashboard.

The kebab menu:

• Is always visible — no hover or focus required
• Works identically on touch and pointer devices
• Contains Edit, Delete, and (new) Attach evidence options

---

Problem 2: No evidence upload UI

What was wrong

The DeductionLine data model includes an evidenceKeys field designed to hold references to attached files (photos, invoices, receipts). However, no upload interface was surfaced in the claim builder list view. Users had no way to attach evidence to an individual deduction line from this screen.

// evidenceKeys already exists in the data model
type DeductionLine = {
  // ...other fields
  evidenceKeys: string[]; // ← supported, but no upload UI existed
};

Why it matters

Evidence is central to fair, dispute-proof deduction claims. Without the ability to attach photos or invoices directly to a line item, the claim builder produces incomplete claims that may be harder to defend in a dispute.

Fix

An "Attach evidence" option is added to the kebab menu on each DeductionLine. Selecting it opens an inline file upload drawer that reuses the existing file-upload component already present in the codebase. Uploaded files are stored against the line's evidenceKeys field.

---

Summary of changes

Behaviour	Before v0.1.114	From v0.1.114
Edit button visibility	Hover only	Always visible (kebab menu)
Delete button visibility	Hover only	Always visible (kebab menu)
Touch device support	❌ Broken	✅ Full support
Evidence attachment	No UI	Inline upload drawer via kebab menu
UI pattern	Inconsistent	Consistent with WorkQueue KebabMenu

---

Related

• WorkQueue KebabMenu pattern (existing, used as reference)
• evidenceKeys field on DeductionLine data model
• Existing file-upload component (reused for the drawer)