Skip to content

[UI/UX] Build Comprehensive User Dashboard aligned with Figma #10

Closed
#23
Closed
[UI/UX] Build Comprehensive User Dashboard aligned with Figma#10
#23
Assignees
dahgold001
Labels
GrantFox OSSIssue tracked in GrantFox OSSMaybe RewardedIssue may be eligible for a GrantFox rewardThird CampaignCampaign: Third Campaign

Description

@Queenode
Queenode
opened on Jul 18, 2026

🔴 Priority: Critical
Difficulty: Hard
Estimated Effort: 4-5 days
Relevant Files: src/app/(dashboard)/dashboard/page.tsx, src/components/dashboard/
Labels: enhancement, priority:critical, ui

Requirements

  1. Dashboard Layout

    • Implement the User Dashboard screen exactly as defined in Figma.
    • Build reusable widgets for: Wallet balance, Total savings, Active savings groups, Contribution statistics, Recent transactions, and Quick actions.

  2. Data Integration

    • Wire the static UI up to the backend API/React Query hooks to display real user data.
    • Ensure the layout remains intact when data is missing, loading, or in an error state.

  3. Responsive Grid

    • The dashboard must use CSS Grid to gracefully collapse from a multi-column desktop layout into a single-column scrollable mobile view.

  4. Testing

    • Component testing for each dashboard widget with mocked API data.

Activity

  1. grantfox-oss
    added
    GrantFox OSSIssue tracked in GrantFox OSS
    Maybe RewardedIssue may be eligible for a GrantFox reward
    Official Campaign | FWC26Campaign: Official Campaign | FWC26
    on Jul 18, 2026

  2. web3nova commented on Jul 18, 2026

    @web3nova
    web3nova
    on Jul 18, 2026 – with GrantFox OSS

    Hi Maintainer,

    I'd like to work on this issue. I have experience with backend pagination, React performance optimization, and can submit a clean PR within 48 hours.

  3. grantfox-oss
    added
    Third CampaignCampaign: Third Campaign
    and removed
    Official Campaign | FWC26Campaign: Official Campaign | FWC26
    on Aug 17, 2026

  4. dahgold001 commented on Aug 21, 2026

    @dahgold001
    dahgold001
    on Aug 21, 2026 – with GrantFox OSS
    Contributor

    I’d like to work on this issue because it aligns closely with my experience building responsive React/Next.js interfaces and integrating frontend applications with APIs.

    My approach would be to:

    • Recreate the Figma dashboard accurately using reusable components.
    • Build independent widgets for balances, savings, groups, contributions, transactions, and quick actions.
    • Integrate the existing API/React Query hooks while handling loading, empty, and error states.
    • Use CSS Grid to create a responsive desktop-to-mobile layout.
    • Add component tests with mocked API responses for each dashboard widget.
    • Ensure the implementation remains consistent with the project's existing UI and component patterns.

    I’ll focus on making the dashboard reusable, responsive, and reliable while keeping the implementation clean and maintainable.

  5. grantfox-oss
    assigned
    dahgold001
    on Aug 22, 2026

  6. grantfox-oss commented on Aug 22, 2026

    @grantfox-oss
    grantfox-ossBot
    on Aug 22, 2026 – with GrantFox OSS

    🦊 GrantFox — @dahgold001 has been assigned to this issue as part of the Third Campaign campaign!

    Next steps:

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

    Good luck! Track your progress on GrantFox.

  7. grantfox-oss commented on Aug 26, 2026

    @grantfox-oss
    grantfox-ossBot
    on Aug 26, 2026 – with GrantFox OSS

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

    @dahgold001's PR #23 was approved and merged by @Queenode.

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

    👏 Great work, @dahgold001! Keep contributing to Kolo-Org.

  8. Queenode
    closed this as completedin #23on Aug 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

GrantFox OSSIssue tracked in GrantFox OSSMaybe RewardedIssue may be eligible for a GrantFox rewardThird CampaignCampaign: Third Campaign

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions