Riyadh
a60ea914f4
Made the leaderboard rows on the admin dashboard interactive so admins can
drill in directly to investigate.
Changes:
- artifacts/teaboy-os/src/pages/admin.tsx
- DashboardSection: each "Top apps" and "Most active users" row is now a
real <button type="button"> with a descriptive aria-label
("View details for ..."), focus-visible ring, and hover styles.
- New onSelectApp / onSelectUser props passed from AdminPage:
* Top apps row -> switches to the Apps section AND opens the existing
Edit App modal prefilled with that app's data (uses the apps list
already loaded via useListApps to look up the full record).
* Most active users row -> switches to the Users section, scrolls the
matching user row into view, and applies a temporary primary-colored
ring highlight that fades after ~2.5s.
- Added userRowRefs (Map of id -> div) and a highlightedUserId state +
effect to drive the scroll/highlight behavior.
- artifacts/teaboy-os/src/locales/{en,ar}.json
- Added admin.dashboard.viewAppDetails / viewUserDetails strings used as
aria-labels.
Verification: e2e tested via the testing skill — login as admin, click a
top app row (modal opens), Cancel, click a most-active-users row (users
section opens with highlighted row), and Tab+Enter on a top apps row also
opens the modal (keyboard accessibility confirmed).
Notes / deviations: pre-existing TypeScript errors in the project's API
client types (topApps/mostActiveUsers/rangeFrom not yet on AdminStats,
and unrelated chat.tsx/home.tsx errors) are not introduced by this task
and were not addressed.