fix(clients): add keyboard accessibility to empty state rows

[rudra1337-dev]

Enhancement: Add empty state for client list when no data is available

This PR improves keyboard accessibility on the Clients page, particularly for empty state rows.
Users can now navigate empty rows using the keyboard and activate them using Enter or Space, improving accessibility for all users.

---

Screenshots

Before:

After:

---

Changes Made

• Added tabIndex and role attributes to empty state rows.
• Added onKeyDown handling for Enter and Space keys.
• Ensures seamless keyboard navigation for pending/active clients.

---

Checklist

• Code follows project style guidelines
• Tested locally
• Accessibility improvements verified
• Squashed multiple commits into a single commit (if applicable)
• Read and understood the contribution guidelines in CONTRIBUTING.md

Summary by CodeRabbit

• New Features

  • Enhanced empty state messaging on the clients page with separate messages for no clients and no search matches.
  • Improved keyboard navigation and accessibility for client rows.

• Bug Fixes

  • Updated route protection behavior to consistently render protected content.

[coderabbitai]

📝 Walkthrough

Walkthrough

Refactors Clients table rendering to add explicit empty states, conditional row navigability, and keyboard handlers; and changes ProtectedRoutes to always render nested routes by replacing the token check with a hardcoded true.

Changes

Cohort / File(s)	Summary
Clients Table: empty states, navigability & keyboard src/pages/clients/Clients.tsx	Rewrote TableBody to render three explicit empty states: "No clients available" (when no rows and empty search, clickable/keyboard-navigates to /clients/create), "No matching clients found" (when search/filter yields none). Renders filtered rows otherwise; rows now conditionally navigable only when c.id is a number — navigable rows have role="link", tabIndex={0}, onClick and onKeyDown handling for Enter/Space to navigate to /clients/${c.id}/general; non-navigable rows use aria-disabled and tabIndex={-1} and ignore clicks/keys.
Routing: protected routes gating removed src/router/ProtectedRoutes.tsx	Replaced reading mifosToken from localStorage with a hardcoded true, causing the component to always render <Outlet /> and never redirect to /login.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

I hop through rows both near and far, 🐇

Empty messages guide like a star,

Keys and clicks now find their way,

Routes unfurl without delay—

A rabbit's cheer for clearer play.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title describes keyboard accessibility for empty state rows, which is the primary focus of the Clients.tsx changes, but it does not mention the ProtectedRoutes.tsx modification involving hardcoded token authentication.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/pages/clients/Clients.tsx`:
- Around line 250-261: Table rows are currently made focusable and given
role="link" regardless of whether c.id exists, creating keyboard-focusable dead
controls; update the TableRow rendering logic (the TableRow component/JSX where
tabIndex, role, onClick, and onKeyDown are set) to be conditional on c.id: only
set tabIndex={0}, role="link", onClick and the Enter/Space onKeyDown handler
when c.id is truthy; otherwise set tabIndex={-1} (or omit tabIndex), do not set
role, and optionally add aria-disabled="true" so keyboard users cannot focus or
activate rows without an id.
- Around line 221-230: The empty-state conditional treats whitespace-only
searchTerm as an active search; update the conditional in the Clients component
to treat whitespace-only input as empty by using a trimmed check (e.g., replace
checks using searchTerm === '' or searchTerm !== '' with logic using
searchTerm.trim() or a helper like isBlank(searchTerm)), so the branch that
shows the global empty state uses trimmedSearchTerm === '' and the "no matches"
branch uses trimmedSearchTerm !== '' (reference variables: rows and searchTerm
and the JSX conditional that renders the TableRow/TableCell).
- Around line 221-247: The empty-state TableRow blocks in Clients.tsx (the
conditional branches checking rows.length, searchTerm, and filtered) render
passive rows and need to be keyboard-activatable when they are intended to
trigger an action: make the TableRow (and/or its TableCell) focusable
(tabIndex={0}), give it a semantic interactive role (role="button" and an
accessible aria-label), and wire an onKeyDown handler that invokes the same
click/action handler used for normal rows (e.g., call the same
onClick/handleRowClick function you use for row clicks) when Enter or Space is
pressed; ensure the visual focus style is preserved and that the aria-label
clearly describes the action so keyboard and screen-reader users can activate
the empty-state row.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2ee92ba6-70ad-458b-8de3-b4ff7d3f40d9

📥 Commits

Reviewing files that changed from the base of the PR and between f448968 and b3982e5.

📒 Files selected for processing (1)

• src/pages/clients/Clients.tsx

[heymanasvi]

Nice improvement on accessibility, especially handling keyboard interactions for the empty state. I was working on a related UI improvement, so it was helpful to see this approach as well.

[rudra1337-dev]

Thanks for the kind words!

Glad you found the approach helpful. Looking forward to seeing your UI improvements as well — it would be great to learn from them

I’m also exploring other UI-related issues in the repository to contribute further.

If any maintainer gets time to review this PR and suggest any changes, I’d really appreciate it.

Thank you!

[gkbishnoi07]

your 1 workflow is failing fix it and check coderabbit comments

[gkbishnoi07]

why did you not mention jira ticket?? and this is duplicate PR of #103

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/router/ProtectedRoutes.tsx`:
- Around line 11-13: Replace the temporary bypass in the ProtectedRoutes
component by restoring the real auth guard: read the stored token from
localStorage (key 'mifosToken') instead of using const token = true; set const
token = localStorage.getItem('mifosToken') (or use the existing selector/utility
from loginSlice or http-client if one exists) and return token ? <Outlet /> :
<Navigate to="/login" /> so protected routes require the real token; ensure you
reference the same storage key used in src/pages/login/loginSlice.ts and
src/lib/http-client.ts.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 06d55f76-7c6f-4379-ab0c-bcd1f91e7255

📥 Commits

Reviewing files that changed from the base of the PR and between b3982e5 and b4dcd84.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (2)

• src/pages/clients/Clients.tsx
• src/router/ProtectedRoutes.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/pages/clients/Clients.tsx

[rudra1337-dev]

Hi,

I’ve fixed the workflow issues and addressed the CodeRabbit comments.

Regarding the Jira ticket, since this PR builds on top of the work in PR #103 and focuses on improving accessibility, could you please let me know if I should create a separate Jira ticket for this enhancement or link it to an existing one?

About PR #103 — it introduces the empty state UI for the clients list, whereas this PR focuses on improving keyboard accessibility for those rows (tab navigation and Enter/Space interaction). So while both PRs touch the same area, they address different concerns.

Please let me know if you’d prefer these changes to be combined with PR #103 or handled separately.

Thanks!