[FE-62] Implement dashboard widget customisation — drag-to-reorder and show/hide cards

[yusuftomilola]

Overview

The dashboard currently shows a fixed set of summary cards and charts. Different users care about different metrics — a MANAGER wants to see their department's maintenance schedule while a USER wants quick access to their assigned assets. Allowing personalisation improves the relevance of the dashboard for every role.

Context

• Dashboard page: frontend/app/(dashboard)/dashboard/page.tsx
• dnd-kit is already installed and can power drag-and-drop card reordering
• User preferences (widget order and visibility) should be stored in localStorage keyed by user.id
• The set of available widgets: Summary Stats, Assets by Status chart, Assets by Category chart, Recent Assets table, Upcoming Maintenance, My Assigned Assets, Low Stock Alerts, Overdue Checkouts

Acceptance Criteria

• Add a "Customise Dashboard" button to the dashboard header
• Clicking enters "edit mode": widgets display a drag handle and an eye/hide toggle
• Drag-and-drop reordering using dnd-kit useSortable; the layout updates live as cards are dragged
• Hiding a widget removes it from the dashboard but adds it to a "hidden" list in the customise panel
• "Done" saves the layout and visibility to localStorage and exits edit mode
• "Reset to Default" restores the original widget order and visibility
• The saved layout is loaded on every dashboard visit; the dashboard renders in the user's last configured order

[fathiaoyinloye]

@fathiaoyinloye has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi maintainer, can I work on this now?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @fathiaoyinloye to this issue.

[SharifIbrahimDev]

@SharifIbrahimDev has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi @maintainer, I'd like to work on [FE-62] Implement Dashboard Widget Customisation. I have experience with Next.js, React, TypeScript, and dnd-kit, and I'm confident I can implement drag-and-drop reordering, widget visibility controls, localStorage persistence, and the reset/default functionality while maintaining a clean, responsive UI. I'll ensure the solution meets all the acceptance criteria and follows the project's coding standards.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @SharifIbrahimDev to this issue.

[drips-wave]

Congratulations, @SharifIbrahimDev! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @SharifIbrahimDev: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @SharifIbrahimDev as part of the Stellar Wave Program's 7th Wave 🥳

😎 @SharifIbrahimDev: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.

[grantfox-oss]

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

@SharifIbrahimDev's PR #1247 was approved and merged by @yusuftomilola.

🏆 @SharifIbrahimDev: You earned 40 FoxPoints for this contribution! Your current tier: Builder (1,884 total points). Track your full progress on GrantFox.

👏 Great work, @SharifIbrahimDev! Keep contributing to DistinctCodes.