[UI/UX] Build Administrative Dashboard with Real-time Metrics

[Queenode]

🟢 Priority: Medium
Difficulty: Hard
Estimated Effort: 5-6 days
Relevant Files: src/app/(admin)/admin/page.tsx, src/components/admin/
Labels: enhancement, priority:medium, ui

Requirements

1. Admin Layout Implementation

   • Translate the Admin Dashboard Figma screens into code.
   • Build complex data tables and charts for: Platform metrics, User management, Active savings groups, Transaction analytics, Smart contract health indicators, and Activity logs.

2. Data Tables

   • Use @tanstack/react-table to implement the required sorting, filtering, and pagination for the user management and transaction analytics views.

3. Security Integration

   • Ensure these UI components are strictly wrapped in authorization checks so they only render for authenticated admin users.

4. Testing

   • Unit tests for table sorting and filtering logic.

---

[OluRemiFour]

Hi Maintainer,
Interested in working on this issue. I'll implement the requested changes and ensure everything is properly tested before submission.

[Primex-hub]

I would love to solve this issue and I can submit within 24hrs

[Feyisara2108]

Hello maintainer, I'd like to work on this issue.
I've built admin dashboards before and have hands-on experience with TanStack Table, so the core requirements here are familiar territory.
My plan: start with the admin layout and wire up the main metrics views, then build out the data tables for user management and transaction analytics using @tanstack/react-table sorting, filtering, and pagination configured from the start rather than bolted on later. For the charts, I'll use whatever charting library is already in the project, or flag it if there isn't one yet.
On the security side, I'll wrap every admin component and route in authorization checks so nothing renders without a verified admin session, not just route-level guards but component-level too, so partial renders on slow auth checks don't accidentally expose UI.
I'll write unit tests for the table sorting and filtering logic as the requirements specify, and translate the Figma screens as closely as possible if there are any design ambiguities, I'll flag them early rather than guessing and having to redo work.
One heads-up: the issue estimates 5-6 days of effort, so I want to be upfront that I'd deliver this in stages rather than one large PR, which makes review easier and reduces the risk of a hard-to-merge diff.
Ready to start once assigned.

[grantfox-oss]

🦊 GrantFox — @Feyisara2108 has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

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

Good luck! Track your progress on GrantFox.

[Queenode]

hi @Feyisara2108 the issue has been assigned to you, please make sure the requirement are met, i await your contribution