feat: add portfolio performance chart card to Analytics page (#255)

[Luluameh]

Portfolio Performance Chart – Walkthrough

Changes Made

1. Installed recharts

Added the recharts charting library as a dependency.

2. Created PortfolioPerformanceChart.tsx

A "use client" component containing:

• Header: "TOTAL PORTFOLIO VALUE" label, $124,592.45 value, +12.4% growth badge with trending-up icon, and a ... overflow menu button.
• Area Chart: Responsive AreaChart from recharts with 16 data points spanning Oct 01 → Nov 01, cyan stroke, gradient fill, and subtle horizontal grid lines.
• Custom Tooltip: Dark card with cyan border showing date and formatted dollar value on hover.
• Active Dot: Glowing cyan dot with dashed vertical guide line on the hovered data point.

3. Updated page.tsx

Replaced the placeholder card with <PortfolioPerformanceChart />.

Verification

Opened http://localhost:3000/dashboard/analytics in the browser and confirmed all acceptance criteria:

Criteria	Status
Card with header, value, badge	✅
Area chart with gradient fill	✅
X-axis date labels aligned	✅
Tooltip on hover	✅
Responsive layout, no overflow	✅
Matches dashboard visual system	✅

Closes : #255

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
nestera	Error		Mar 26, 2026 7:22pm

[drips-wave]

@Luluameh 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

[Olowodarey]

@Luluameh pls run build in ur local before you push