Add green/yellow/red zones to PaymentVelocityGauge indicating performance bands

[Kingsman-99]

Description

PaymentVelocityGauge renders a gauge needle on a plain arc but provides no visual reference for what velocity is good, acceptable, or poor. Adding colour zones (green = high velocity, yellow = moderate, red = low) on the arc gives users an instant performance signal without reading numbers.

Acceptance Criteria

• The gauge arc is divided into three colour zones: red (0-33%), yellow (34-66%), green (67-100%)
• Zone boundaries are configurable via props (optional; fall back to defaults)
• The needle and current value label are rendered on top of the coloured arc
• Existing tests continue to pass

Context

• Target file: src/components/PaymentVelocityGauge.tsx

[Nuruddeen61]

Hello Stellar-split team,

I would like to take on this issue.

Why me:
I have experience with React + TypeScript and building data visualization components.
I recently shipped compliance and monitoring features for IoT-Billing-Service,
so I understand the importance of clear performance signals for financial products.

My approach:

1. Use SVG or Recharts to render the arc with 3 colored segments
2. Make zone boundaries configurable via props: {red: 33, yellow: 66} with defaults
3. Ensure needle and value label render on top of the colored arc with z-index
4. Add unit tests to verify zone colors and prop overrides
5. Keep existing tests passing

I can deliver this in 2-3 days.

Thanks
Nuruddeen Abubakar