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>

app/traffic-pool/components/pool-usage-chart.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { Card } from "@/components/ui/card"
+import { Progress } from "@/components/ui/progress"
+
+interface PoolUsageChartProps {
+  deviceStats: {
+    [key: string]: number
+  }
+  poolLimit: number
+}
+
+export function PoolUsageChart({ deviceStats, poolLimit }: PoolUsageChartProps) {
+  return (
+    <Card className="p-3">
+      <h3 className="text-sm font-medium mb-2">设备流量池使用情况</h3>
+      <div className="space-y-3">
+        {Object.entries(deviceStats).map(([device, count]) => (
+          <div key={device} className="space-y-1">
+            <div className="flex justify-between text-xs">
+              <span>设备{device}</span>
+              <span className="text-gray-500">
+                {count}/{poolLimit}
+              </span>
+            </div>
+            <Progress value={(count / poolLimit) * 100} />
+          </div>
+        ))}
+      </div>
+    </Card>
+  )
+}