Implement Dashboard Stats Cards (Figma)

[Baskarayelu]

Description

Implement the four dashboard stats cards from the Figma design. Total Sent, Savings, Bills Paid, Insurance—each with icon, title, main value, and contextual details.

Design reference (Figma): RemitWise Design

Design Requirements

Layout (four cards in a row)

• Total Sent: Red-outline paper airplane icon. "Total Sent" (grey). "$1,200" (large bold white). "+$300" (red), "+25%" with upward trend icon (grey, top-right).
• Savings: Red-outline piggy bank icon. "Savings" (grey). "$360" (large bold white). "+$90" (red), "+33%" with trend icon (top-right).
• Bills Paid: Red-outline document icon. "Bills Paid" (grey). "$180" (large bold white). "3 bills", "This month" (grey).
• Insurance: Red-outline shield icon. "Insurance" (grey). "$60" (large bold white). "2 policies", "Active" (grey).

Visual Design

• Dark cards, rounded corners; red icons and positive change indicators
• Consistent spacing and alignment

Technical Requirements

• Next.js App Router
• TypeScript
• Tailwind CSS
• Data from API/contract or placeholders; support loading/error states
• Responsive grid (4 cols → 2x2 → stack on mobile)

Acceptance Criteria

• Four cards: Total Sent, Savings, Bills Paid, Insurance
• Each card has red-outline icon, title, main amount
• Total Sent and Savings show +amount and +percentage with trend icon
• Bills Paid shows "3 bills" / "This month"
• Insurance shows "2 policies" / "Active"
• Dark theme and layout match design
• Responsive layout

[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.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 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

[devchant]

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

Hello 👋, I’d like to work on this issue.

I’ll implement the requested feature according to the provided requirements and design references, making sure it aligns with the project’s existing architecture and coding standards. I’ll focus on clean, maintainable code, responsiveness where applicable, and meeting all acceptance criteria.

I’ll include proper testing or verification as needed and ensure the PR is well-documented and ready for review. Looking forward to contributing

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

[EA10-lite]

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

Hi, I'd love to work on this issue, my name is Emmanuel. I am a full-stack developer with 4 years of experience building Web and mobile applications.

I can confidently handle this task. The four dashboard stats cards align with my experience in building responsive dashboard components, dynamic data displays, and interactive UI elements using Next.js, TypeScript, and Tailwind CSS. I’m skilled at converting Figma designs into pixel-perfect, accessible, and functional components, including icons, dynamic values, trends, and responsive layouts.

Here is my portfolio and projects I have handled:

https://ecohotels.com
https://loveping.vercel.app
https://proposelyai.com
https://www.usememora.xyz
https://360comms.network
https://ea10.vercel.app

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

[Macnelson9]

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

Hi team, I’d like to work on this issue.

I’m a Frontend Developer who thrives at the intersection of UI polish + product usability, and I’ve shipped responsive components/pages using Next.js/React + Tailwind (including interactions, animations, and pixel-accurate Figma builds).

What I’ll deliver

Dashboard stats cards implemented to match the design/spec

Responsive behavior (mobile + desktop), no layout breakage

Hover/focus states + accessible semantics

Clean, reusable components and consistent styling

Approach

Review the design/spec and existing code patterns

Build the UI + interactions

QA on multiple breakpoints + open a PR with screenshots/video

If assigned, I’ll start immediately and share progress updates in the PR.

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

[NueloSE]

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

I can implement the four dashboard stat cards using Next.js App Router, TypeScript, and Tailwind CSS. I’ll match the Figma design precisely (icons, typography, dark theme, spacing), handle loading/error states, and build a responsive grid (4→2→1). Data will be cleanly typed and easily swappable between placeholders and API/contract sources.

ETA <=12hrs

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

[OluRemiFour]

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

Well-designed stats cards turn raw data into actionable insights.

I clearly understands this request because users rely on clear, at-a-glance dashboards to understand key metrics like spending, savings, bills, and insurance. Implementing these cards with proper hierarchy, iconography, and responsive layout improves comprehension, usability, and engagement.

I have experience building responsive, reusable dashboard components in Next.js with TypeScript and Tailwind CSS, integrating API data with loading and error states. I’ve delivered card-based interfaces that visually communicate financial metrics while maintaining accessibility and performance.

For this task, I will implement the four stats cards according to the Figma design, with dynamic or placeholder data, responsive grid layouts, trend indicators, and clean, reusable component structure ensuring consistency and scalability across the dashboard.

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

[jahrulezfrancis]

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

Hello, I can implement the Dashboard Stats Cards exactly per the Figma — four responsive cards (Total Sent, Savings, Bills Paid, Insurance) with the correct icons, hierarchy, trend indicators, and dark theme styling.

I’ll build it using Next.js App Router, TypeScript, and Tailwind, support loading/error states with placeholder data for now, and ensure the grid behaves cleanly across desktop, tablet, and mobile.

I’ll reference the issue ID and include screenshots in the PR.

ETA: ~8 hours max

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

[drips-wave]

Congratulations, @OluRemiFour! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on January 31, 2026.

🧑‍💻 @OluRemiFour: 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 issued 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 🌊

[OluRemiFour]

Done, Implemented the four dashboard stats cards from the Figma design.
Please kindly check the PR