Feature/reusable kpi issue fix

[connelevalsam]

Description

Extracted the repeated KPI stat card pattern (~11 instances across 3 pages) into a reusable StatCard component at components/shared/StatCard.tsx. Props: title, value (ReactNode), icon, trend (with optional icon + color), color (amber/blue/emerald/purple/primary), and variant (default/destructive). The component handles the gradient overlay, icon-in-rounded-box, and trend display internally. Reduces ~100 lines of duplicated Card boilerplate.
Trade-off: Admin overview cards had a distinct visual style (bare icons, normal-case titles) that was standardized to the dashboard pattern (rounded icon boxes, uppercase titles) for consistency. The destructive variant preserves the original destructive colour scheme.

Fixes / Closes: #74

---

Type of Change

• Bug Fix (non-breaking change which fixes an issue)
• New Feature (non-breaking change which adds functionality)
• Breaking Change (fix or feature that would cause existing functionality to not work as expected)
• [ x ] Refactoring / Performance (clean-up or performance optimization without behavioral changes)
• Documentation / CI (changes to docs, workflows, config files)

---

Verification & Test Plan

Please outline how you verified these changes. Include steps to reproduce, test scripts, or command logs where applicable.

Automated Tests

For example: cargo test in contract package, pnpm test in backend.

pnpm build

Manual Verification

1. Visit merchant dashboard — verify all 4 KPI cards render correctly with gradients, icons, values, and trend text.
2. Visit settlement page — verify 3 balance summary cards render correctly (amber gradient on first, trend icons on second/third).
3. Visit admin overview — verify 4 cards render correctly (3 default, 1 destructive variant with red tones).
4. Hover each card — verify subtle shadow transition.

---

Sub-System Checklist

1. Smart Contracts (BettaPay-Contract)

• Code compiles without warnings (cargo build --release --target wasm32-unknown-unknown)
• Cargo test suite passes locally (cargo test)
• Emits events for state changes
• Implemented proper authorization controls (auth.require_auth())

2. Backend Services (BettaPay-Backend)

• Prisma models updated and migrated (if database schema changes)
• Zod validation checks added/updated
• API routes and services build successfully (pnpm build)
• Local env variables updated in .env.example

3. Frontend Dashboard (BettaPay-Frontend)

• [ x ] Local build completes successfully (pnpm build)
• [ x ] Focus states, labels, and aria attributes tested for accessibility
• [ x ] No regression on styling or components
• [ x ] Env parameters documented in .env.local

---

Checklist

• [ x ] My code follows the style guidelines of this project (run formatters/linters)
• [ x ] I have performed a self-review of my own code
• [ x ] I have commented my code, particularly in hard-to-understand areas
• [ x ] I have made corresponding changes to the documentation
• [ x ] My changes generate no new warnings

[vercel]

@connelevalsam is attempting to deploy a commit to the therealjhay's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@connelevalsam Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[therealjhay]

Kindly resolve conflicts

[connelevalsam]

conflicts resolved successfully