Upload components/RevenueChart.jsx with huggingface_hub

components/RevenueChart.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  AreaChart,
+  Area
+} from 'recharts';
+
+const data = [
+  { name: 'Jan', value: 4000 },
+  { name: 'Feb', value: 3000 },
+  { name: 'Mar', value: 5000 },
+  { name: 'Apr', value: 4500 },
+  { name: 'May', value: 6000 },
+  { name: 'Jun', value: 5500 },
+  { name: 'Jul', value: 7000 },
+  { name: 'Aug', value: 6500 },
+  { name: 'Sep', value: 8000 },
+  { name: 'Oct', value: 7500 },
+  { name: 'Nov', value: 9000 },
+  { name: 'Dec', value: 10000 },
+];
+
+function CustomTooltip({ active, payload, label }) {
+  if (active && payload && payload.length) {
+    return (
+      <div className="bg-white dark:bg-dark-surface p-3 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg">
+        <p className="text-xs text-gray-500 dark:text-gray-400">{label}</p>
+        <p className="text-sm font-bold text-gray-900 dark:text-white">
+          ${payload[0].value.toLocaleString()}
+        </p>
+      </div>
+    );
+  }
+  return null;
+}
+
+export default function RevenueChart() {
+  return (
+    <div className="w-full h-full">
+      <ResponsiveContainer width="100%" height="100%">
+        <AreaChart data={data}>
+          <defs>
+            <linearGradient id="colorValue" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor="#3b82f6" stopOpacity={0.3}/>
+              <stop offset="95%" stopColor="#3b82f6" stopOpacity={0}/>
+            </linearGradient>
+          </defs>
+          <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" vertical={false} className="dark:stroke-gray-700" />
+          <XAxis 
+            dataKey="name" 
+            axisLine={false}
+            tickLine={false}
+            tick={{ fill: '#9ca3af', fontSize: 12 }}
+          />
+          <YAxis 
+            axisLine={false}
+            tickLine={false}
+            tick={{ fill: '#9ca3af', fontSize: 12 }}
+            tickFormatter={(value) => `$${value / 1000}k`}
+          />
+          <Tooltip content={<CustomTooltip />} cursor={{ fill: 'transparent' }} />
+          <Area 
+            type="monotone" 
+            dataKey="value" 
+            stroke="#3b82f6" 
+            strokeWidth={2}
+            fillOpacity={1} 
+            fill="url(#colorValue)" 
+          />
+        </AreaChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}