Design & Implement Dashboard Page

[Baskarayelu]

Create a comprehensive financial dashboard that provides users with an overview of their remittance activity, savings progress, bills, and insurance status.

Design Requirements

Layout Structure:

1. Header Section:

   • Back button to home
   • Page title: "Dashboard"
   • User profile/account indicator (optional)

2. Stats Overview Cards (4 cards in grid):

   • Total Sent: $1,200 with "+$300 this month" indicator
   • Savings: $360 with "+$90 this month" indicator
   • Bills Paid: $180 with "3 bills this month" indicator
   • Insurance: $60 with "2 active policies" indicator
   • Each card: Icon, title, value, change indicator (green for positive)

3. Money Split Visualization:

   • Section title: "Current Money Split"
   • 4 horizontal progress bars:
     • Daily Spending (50% - blue)
     • Savings (30% - green)
     • Bills (15% - yellow)
     • Insurance (5% - purple)
   • Each bar shows: Label, amount, percentage, colored progress bar
   • Link to "Configure Split Settings"

4. Recent Transactions Table:

   • Section title: "Recent Transactions"
   • Table/list with columns: Date, Description, Amount, Status
   • Status badges: "completed" (green), "pending" (yellow), "failed" (red)
   • Link to "View All Transactions"

5. Savings Goals Progress:

   • Section title: "Savings Goals"
   • Goal cards showing:
     • Goal name
     • Progress bar (current/target)
     • Percentage complete
     • Deadline date
   • Link to "Manage Goals"

Visual Design:

• Clean, card-based layout
• White cards on gray background
• Color-coded progress bars
• Icons for visual hierarchy
• Responsive grid layout

Data Visualization:

• Progress bars for split allocation
• Progress bars for savings goals
• Status indicators with colors

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[peternnadi1999]

@Baskarayelu I’m interested in tackling this frontend task. I have hands-on experience with Web3 UI integration, wallet connectivity, and building responsive React/nextjs interfaces. Thank you!

[martinvibes]

@martinvibes has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I’d like to work on this issue because it aligns with my experience building and contributing to web and blockchain projects. I’m comfortable working across frontend and smart contract codebases and delivering clean, well-structured solutions.

I’ve reviewed the issue and repository and can implement a reliable fix while following the project’s standards. I communicate progress clearly and iterate quickly based on feedback. I’d be happy to take this on and would appreciate being assigned.

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

[mayasimi]

@mayasimi has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I would love to work on this issue

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

[EsaKris]

@EsaKris has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I have hands-on experience building responsive, card-based dashboards with clear data visualization, including stats overview cards, progress bars, transaction tables, and goal-tracking components. My approach prioritizes usability, visual hierarchy, and scalability, ensuring users can quickly understand their financial position while maintaining a modern, professional aesthetic.

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

[TheDEV111]

@TheDEV111 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hello there, I’m Henry a software engineer with experience building live projects personally and contributing to open source projects.

I am familiar with JavaScript and its core libraries and frameworks including D3.js for analytic data rendering.

I build mobile responsive and awesome pages which and dynamic with great user experience

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

[peternnadi1999]

@peternnadi1999 has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I’d like to work on the financial dashboard feature. I have experience building data-rich, card-based dashboards with clear visual hierarchy, progress indicators, and responsive layouts. I can implement the stats overview, money split visualizations, transaction tables, and savings goal progress while ensuring clean UX, accessibility, and consistency with the design requirements. Thank you!

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

[Awointa]

@Awointa has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi, I’d like to work on this. I can design and implement the dashboard page with stat cards, progress visualizations, transactions table, and responsive, accessible UI.

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

[davedumto]

@davedumto has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

Hi, my name is David, and I am a fullstack and smart contract developer skilled in React, Next.js, JavaScript, TypeScript, Tailwind CSS, and Soroban. For this task, I will:

1. Build the header section and stats overview grid with four cards displaying Total Sent, Savings, Bills Paid, and Insurance metrics with icons and change indicators.
2. Create the Money Split visualization section with four color-coded horizontal progress bars, amounts, percentages, and a link to configure split settings.
3. Implement the Recent Transactions table with date, description, amount, and color-coded status badges (completed, pending, failed) plus a "View All" link.
4. Design the Savings Goals section with goal cards showing progress bars, percentage complete, deadline dates, and a "Manage Goals" link, ensuring responsive grid layout throughout.

ETA: 8 hours

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

[Gbangbolaoluwagbemiga]

@Gbangbolaoluwagbemiga has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I would like to work on this issue because I have over 4 years of professional frontend development experience, specializing in building complex, data-rich dashboards and financial interfaces.

Professional Experience:

• 4+ years as a Frontend Developer working with top companies including Web3Bridge
• Won the Scaffold Stellar Hackathon with SecureFlow, demonstrating my ability to deliver production-ready applications
• Built multiple financial dashboards with real-time data visualization, progress tracking, and responsive layouts
• Expert in React/Next.js, TypeScript, and modern CSS frameworks
• Extensive experience with data visualization libraries (Chart.js, Recharts, D3.js)
• Strong UI/UX design implementation skills with pixel-perfect accuracy

Why I'm Perfect for This Dashboard:

• Financial UI Expertise: I've built similar dashboards with transaction tables, progress bars, and stat cards
• Component Architecture: I excel at creating reusable, maintainable component systems
• Data Visualization: Experienced with progress bars, charts, and visual indicators
• Responsive Design: All my projects work flawlessly across mobile, tablet, and desktop
• Code Quality: Clean, well-documented code following best practices

What I'll Deliver:

1. Stats Overview Cards - Clean, responsive grid with animated counters and trend indicators
2. Money Split Visualization - Interactive progress bars with smooth animations
3. Recent Transactions Table - Sortable, filterable table with status badges
4. Savings Goals Progress - Visual progress tracking with deadline indicators
5. Fully Responsive - Mobile-first design that scales beautifully
6. Polished Animations - Subtle micro-interactions for enhanced UX

Timeline: I can complete this comprehensive dashboard within 4-5 days, including full implementation, responsive design testing, and documentation.

I'm excited to contribute to Remitwise and create a dashboard that users will love!

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

[samieazubike]

@samieazubike has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I will implement the frontend pixel-perfect, exactly the way it in the Figma file.
Experience: https://dashboard.easiffy.com

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

[pheobeayo]

@pheobeayo has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I am a full-stack blockchain developer skilled in Typescript, Javascript, Nextjs and React. I would love to implement the page pixel to pixel as it aligns with my skills and experience.

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

[ReinaMaze]

@ReinaMaze has applied to work on this issue as part of the Stellar Wave Program's 1st wave.

I would love to work on this issue

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