refactor: overhaul UI for streamlined user experience

Redesign navigation, home overview, user portrait, and valuation pages
with improved functionality and responsive design.

Co-authored-by: null <4804959+fnvtk@users.noreply.github.com>

components/charts.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+import type React from "react"
+import {
+  LineChart as RechartsLineChart,
+  Line,
+  BarChart as RechartsBarChart,
+  Bar,
+  PieChart as RechartsPieChart,
+  Pie,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  Cell,
+} from "recharts"
+
+interface ChartProps {
+  data: any
+  height?: number
+}
+
+export const LineChart: React.FC<ChartProps> = ({ data, height = 300 }) => {
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <RechartsLineChart
+        data={data.labels.map((label: string, index: number) => {
+          const dataPoint: any = { name: label }
+          data.datasets.forEach((dataset: any, datasetIndex: number) => {
+            dataPoint[dataset.label] = dataset.data[index]
+          })
+          return dataPoint
+        })}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Legend />
+        {data.datasets.map((dataset: any, index: number) => (
+          <Line
+            key={index}
+            type="monotone"
+            dataKey={dataset.label}
+            stroke={dataset.borderColor}
+            fill={dataset.backgroundColor}
+            activeDot={{ r: 8 }}
+          />
+        ))}
+      </RechartsLineChart>
+    </ResponsiveContainer>
+  )
+}
+
+export const BarChart: React.FC<ChartProps> = ({ data, height = 300 }) => {
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <RechartsBarChart
+        data={data.labels.map((label: string, index: number) => {
+          const dataPoint: any = { name: label }
+          data.datasets.forEach((dataset: any, datasetIndex: number) => {
+            dataPoint[dataset.label] = dataset.data[index]
+          })
+          return dataPoint
+        })}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Legend />
+        {data.datasets.map((dataset: any, index: number) => (
+          <Bar
+            key={index}
+            dataKey={dataset.label}
+            fill={dataset.backgroundColor || `rgba(59, 130, 246, ${0.8 - index * 0.2})`}
+          />
+        ))}
+      </RechartsBarChart>
+    </ResponsiveContainer>
+  )
+}
+
+export const PieChart: React.FC<ChartProps> = ({ data, height = 300 }) => {
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <RechartsPieChart>
+        <Tooltip />
+        <Legend />
+        {data.datasets.map((dataset: any, datasetIndex: number) => (
+          <Pie
+            key={datasetIndex}
+            data={data.labels.map((label: string, index: number) => ({
+              name: label,
+              value: dataset.data[index],
+            }))}
+            cx="50%"
+            cy="50%"
+            outerRadius={80}
+            fill="#8884d8"
+            dataKey="value"
+            label
+          >
+            {data.labels.map((entry: any, index: number) => (
+              <Cell
+                key={`cell-${index}`}
+                fill={
+                  dataset.backgroundColor instanceof Array
+                    ? dataset.backgroundColor[index]
+                    : `rgba(59, 130, 246, ${0.8 - index * 0.1})`
+                }
+              />
+            ))}
+          </Pie>
+        ))}
+      </RechartsPieChart>
+    </ResponsiveContainer>
+  )
+}