[HARD][DASHBOARD] Build unified role-based dashboard shell and navigation system

[Obiajulu-gif]

Overview

Build a unified dashboard shell that adapts navigation, layout, and quick actions based on the authenticated user's role: admin, driver, or investor.

Problem

ChainMove has multiple user roles with different workflows. A scalable dashboard shell is needed so contributors can add new dashboard modules without duplicating layout logic or creating inconsistent navigation patterns.

Expected solution

Implement a reusable dashboard layout system that includes:

• role-aware sidebar navigation
• mobile-friendly collapsible navigation
• dashboard header with user profile, notifications, and role badge
• quick action slots per role
• active route highlighting
• protected route handling
• graceful loading and unauthorized states

Role examples

Investor

• Portfolio
• Pools
• Wallet
• Transactions
• Governance

Driver

• Repayments
• Vehicle progress
• Wallet
• Notifications
• Profile/KYC

Admin

• Users
• KYC
• Fleet
• Investments
• Reports
• Payments
• Settings

Files likely involved

• dashboard layout files
• sidebar/navigation components
• auth/current-user helpers
• route guard utilities
• dashboard pages
• shared UI components

Acceptance criteria

• A reusable role-based dashboard shell exists.
• Navigation changes based on user role.
• Unauthorized users cannot access protected dashboard sections.
• Layout works on desktop and mobile.
• Loading and empty states are handled.
• Existing dashboard routes are not broken.
• npm run lint and npm run build pass.

Suggested labels

dashboard, frontend, auth, hard, architecture

Difficulty

Hard

[ZuLu0890]

I would love to work on this issue

[Babigdk]

I'd like to work on this issue. I have experience building React/Next.js dashboards with role-based access control, protected routes, reusable layouts, and responsive navigation. I can implement a scalable dashboard shell with role-aware navigation, route guards, mobile support, loading/unauthorized states, and active route highlighting while ensuring existing routes remain unaffected and all build checks pass.

[pope-h]

Hi, I'd like to work on this issue.
This is a reusable, role-driven dashboard shell — one layout system that swaps sidebar nav, quick actions, and protected-route behavior based on whether the user is admin, driver, or investor, rather than three separate dashboard implementations. The "scalable" part is the real ask: new modules should plug into the shell via config, not by duplicating layout code.
My approach: define role-to-nav-items as data (not JSX per role), so the sidebar, quick actions, and route guards all read from one role config rather than branching logic scattered across components. Before building new auth/routing utilities, I'll check what already exists in the auth/current-user helpers and route guard utilities mentioned in the issue, and extend those rather than introduce a second pattern. Mobile handling via a collapsible sidebar with the same nav-from-config source, active-route highlighting via current path match, and explicit loading/unauthorized states (not just blank screens) on protected routes.
Verification: confirm existing dashboard routes still render correctly post-refactor, test unauthorized access is blocked per role, test nav/quick-actions correctly differ across all three roles, check mobile breakpoint behavior, and confirm npm run lint and npm run build pass.

Happy to take this on.

[grantfox-oss]

🦊 GrantFox — @pope-h has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #42)
2. Your PR will be reviewed by the Chainmove maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@pope-h's PR #57 was approved and merged by @Obiajulu-gif.

🏆 @pope-h: You earned 35 FoxPoints for this contribution! Your current tier: Explorer (188 total points). Track your full progress on GrantFox.

👏 Great work, @pope-h! Keep contributing to Chainmove.