|
| 1 | +# ID-691 — Dashboard table hover cursor should not change when there is no action |
| 2 | + |
| 3 | +**For:** Sonnet (implementer) |
| 4 | +**Source task:** Asana ID-691 "Hover cursor on Dashboard table should not change if there is no new action" |
| 5 | +**Working dir:** `/home/cpride/code/devWork/ULWork/v2/UnlockEdv2` |
| 6 | +**Stack:** React + TypeScript + Tailwind CSS, frontend in `frontend/` |
| 7 | + |
| 8 | +--- |
| 9 | + |
| 10 | +## Problem |
| 11 | + |
| 12 | +On the admin Dashboard, hovering over rows of the **Facility Health table** changes the mouse |
| 13 | +cursor to a pointer (hand) and applies clickable-looking hover styling (the facility name |
| 14 | +changes to the brand/accent color). This signals that the row is clickable, but the row has |
| 15 | +**no `onClick` handler and no navigation** — nothing happens when clicked. This false affordance |
| 16 | +is the bug shown in the attached `dashboard_cursor_err.mp4`. |
| 17 | + |
| 18 | +Desired rule: **the cursor (and clickable hover affordances) should only change on hover when the |
| 19 | +row actually has an action.** |
| 20 | + |
| 21 | +## Root cause (confirmed) |
| 22 | + |
| 23 | +File: `frontend/src/pages/Dashboard.tsx` |
| 24 | +Component: `FacilityHealthTable` (lines ~581–703) |
| 25 | + |
| 26 | +The `<tr>` is rendered with `cursor-pointer` and link-colored hover text, but has **no `onClick`**: |
| 27 | + |
| 28 | +```tsx |
| 29 | +// Dashboard.tsx ~line 634-642 |
| 30 | +{rows.map((row) => ( |
| 31 | + <tr |
| 32 | + key={row.facility_id} |
| 33 | + className="hover:bg-surface-hover/50 dark:hover:bg-[#262626]/50 cursor-pointer transition-colors" |
| 34 | + > |
| 35 | + <td className="px-6 py-4"> |
| 36 | + <div className="text-brand-dark dark:text-white hover:text-brand dark:hover:text-[#8fb55e] transition-colors"> |
| 37 | + {row.facility_name} |
| 38 | + </div> |
| 39 | + </td> |
| 40 | + ... |
| 41 | +``` |
| 42 | + |
| 43 | +Two misleading affordances: |
| 44 | +1. `cursor-pointer` on the `<tr>` — changes the cursor to a hand. |
| 45 | +2. `hover:text-brand dark:hover:text-[#8fb55e]` on the facility-name `<div>` — makes the name |
| 46 | + look like a link on hover. |
| 47 | + |
| 48 | +The neutral row background highlight (`hover:bg-surface-hover/50 ...`) is fine to keep — it only |
| 49 | +indicates the hovered row, not clickability. |
| 50 | + |
| 51 | +## Convention in this codebase (confirms intended fix) |
| 52 | + |
| 53 | +- `frontend/src/components/shared/DataTable.tsx` (~line 102-113): `onRowClick && 'cursor-pointer'` |
| 54 | + — pointer only when a click handler exists. |
| 55 | +- `frontend/src/pages/Dashboard.tsx` `MissingAttendanceWidget` (~line 463-480): `cursor-pointer` |
| 56 | + only when `isDepartment` is true, which is also the only case it navigates. |
| 57 | +- `frontend/src/components/ui/table.tsx` `TableRow` (~line 55-65): base row has hover background |
| 58 | + but no `cursor-pointer` by default. |
| 59 | + |
| 60 | +Only `FacilityHealthTable` violates this. `TodaysSchedule`, `MissingAttendanceWidget`, and |
| 61 | +`MetricCards` already gate cursor/click correctly. |
| 62 | + |
| 63 | +## Implementation plan |
| 64 | + |
| 65 | +The facility rows are not clickable today, so remove the clickable affordances. Do **not** invent |
| 66 | +a navigation target — that is a product decision, not part of this bug. |
| 67 | + |
| 68 | +### Step 1 — `FacilityHealthTable` row className (line ~637) |
| 69 | + |
| 70 | +From: |
| 71 | +```tsx |
| 72 | +className="hover:bg-surface-hover/50 dark:hover:bg-[#262626]/50 cursor-pointer transition-colors" |
| 73 | +``` |
| 74 | +To (drop `cursor-pointer`): |
| 75 | +```tsx |
| 76 | +className="hover:bg-surface-hover/50 dark:hover:bg-[#262626]/50 transition-colors" |
| 77 | +``` |
| 78 | + |
| 79 | +### Step 2 — facility-name `<div>` (line ~640) |
| 80 | + |
| 81 | +From: |
| 82 | +```tsx |
| 83 | +<div className="text-brand-dark dark:text-white hover:text-brand dark:hover:text-[#8fb55e] transition-colors"> |
| 84 | + {row.facility_name} |
| 85 | +</div> |
| 86 | +``` |
| 87 | +To: |
| 88 | +```tsx |
| 89 | +<div className="text-brand-dark dark:text-white"> |
| 90 | + {row.facility_name} |
| 91 | +</div> |
| 92 | +``` |
| 93 | + |
| 94 | +### Step 3 — sanity scan |
| 95 | + |
| 96 | +Grep `Dashboard.tsx` for any other element pairing `cursor-pointer` with no `onClick`/navigation. |
| 97 | +Per investigation, only `FacilityHealthTable` is wrong — confirm. |
| 98 | + |
| 99 | +## Verification |
| 100 | + |
| 101 | +1. `cd frontend && npm run typecheck` and `npm run lint` — no new errors (className-only changes). |
| 102 | +2. Run the app, open the admin Dashboard, hover Facility Health rows: |
| 103 | + - Cursor stays the default arrow (no hand/pointer). |
| 104 | + - Facility name no longer changes color on hover. |
| 105 | + - Subtle row background highlight on hover is acceptable to keep. |
| 106 | +3. Confirm against `dashboard_cursor_err.mp4` that the reported behavior no longer occurs. |
| 107 | + |
| 108 | +## Out of scope / notes |
| 109 | + |
| 110 | +- This fix intentionally does **not** add click navigation to facility rows. If the team later |
| 111 | + decides facility rows should navigate (e.g., to a facility detail view), the correct change is |
| 112 | + to **add** an `onClick`/navigation handler — at which point `cursor-pointer` and the |
| 113 | + link-colored name become correct affordances again. Separate feature, not this bug. |
| 114 | +- Keep changes minimal, match surrounding Tailwind style, no new deps. |
| 115 | +- Branch off `main` (e.g. `fix/dashboard-hover-cursor`); commit message references ID-691. |
| 116 | + Include a short before/after screen capture in the PR since it's a visual change. |
0 commit comments