refactor: Create a reusable Data Metric card component

[AlAfiz]

Description

On our Analytics and Portfolio pages, we are repeatedly coding the same UI layout for statistics (e.g., a small gray title with a large white number).
We need to extract this into a highly reusable <DataMetric /> component to DRY (Don't Repeat Yourself) up our codebase.
This component will ensure that all numbers across the entire application have perfectly consistent padding, font sizes, and color contrast.
It is a crucial step for maintaining a clean UI architecture as the project scales.

Requirements

• Create components/ui/DataMetric.tsx.
• Accept props for title (string), value (string or number), and an optional trend percentage (e.g., "+5%").
• Style the title with a muted text color (text-slate-400 text-sm).
• Style the value with a bold, high-contrast font (text-white text-2xl font-bold).
• If the trend prop is passed, render it next to the value with a conditional green/red color based on positive/negative signs.