调整首页页面布局

src/actions/resources.ts

@@ -28,7 +28,11 @@ export async function listResourceShort(params: ResourceListParams) {
   )
 }
 
-export async function updateResource(data: { id: number; active?: boolean; checkip?: boolean}) {
+export async function updateResource(data: {
+  id: number
+  active?: boolean
+  checkip?: boolean
+}) {
   return callByUser<Resources>("/api/admin/resource/update", data)
 }
 

src/app/(root)/(dashboard)/page.tsx

@@ -1,514 +1,438 @@
+"use client"
+
+import { format, subDays } from "date-fns"
+import {
+  Activity,
+  ArrowDownRight,
+  ArrowUpRight,
+  BarChart3,
+  Calendar,
+  DoorOpenIcon,
+  Server,
+  TrendingUp,
+  UserPlus,
+  Users,
+} from "lucide-react"
 import Link from "next/link"
+import { useMemo, useState } from "react"
+import {
+  SimpleBarChart,
+  SimpleHorizontalBarChart,
+  SimpleLineChart,
+} from "@/components/charts"
+import { Page } from "@/components/page"
 
-export type DashboardPageProps = {}
+type TimeRange = "today" | "7d" | "30d" | "90d" | "custom"
+
+const timeRangeLabels: Record<TimeRange, string> = {
+  today: "今日",
+  "7d": "近7天",
+  "30d": "近30天",
+  "90d": "近90天",
+  custom: "自定义",
+}
+
+function mulberry32(seed: number) {
+  let t = seed
+  return () => {
+    t |= 0
+    t = (t + 0x6d2b79f5) | 0
+    let n = Math.imul(t ^ (t >>> 15), 1 | t)
+    n = (n + Math.imul(n ^ (n >>> 7), 61 | n)) ^ n
+    return ((n ^ (n >>> 14)) >>> 0) / 4294967296
+  }
+}
+
+export default function DashboardPage() {
+  const [timeRange, setTimeRange] = useState<TimeRange>("7d")
+  const [showCustomPicker, setShowCustomPicker] = useState(false)
+  const [startDate, setStartDate] = useState("")
+  const [endDate, setEndDate] = useState("")
+
+  const chartData = useMemo(() => {
+    const days = 14
+    const seed = 42
+    const rng = mulberry32(seed)
+    const proxyData = []
+    const tradeData = []
+    const customerData = []
+    const extractData = []
+
+    for (let i = days - 1; i >= 0; i--) {
+      const date = subDays(new Date(), i)
+      const dateStr = format(date, "MM-dd")
+      proxyData.push({
+        date: dateStr,
+        value: Math.floor(rng() * 50) + 80,
+      })
+      tradeData.push({
+        date: dateStr,
+        value: Math.floor(rng() * 3000) + 5000,
+      })
+      customerData.push({
+        date: dateStr,
+        value: Math.floor(rng() * 20) + 5,
+      })
+      extractData.push({
+        date: dateStr,
+        value: Math.floor(rng() * 800) + 1200,
+      })
+    }
+
+    const userData = [
+      { name: "张三", activity: 287 },
+      { name: "李四", activity: 245 },
+      { name: "王五", activity: 198 },
+      { name: "赵六", activity: 156 },
+      { name: "孙七", activity: 132 },
+      { name: "周八", activity: 98 },
+      { name: "吴九", activity: 76 },
+    ]
+
+    return { proxyData, tradeData, customerData, extractData, userData }
+  }, [])
+
+  // 处理自定义日期按钮点击
+  const handleCustomClick = () => {
+    setShowCustomPicker(true)
+    setTimeRange("custom")
+    // 清空之前的日期
+    setStartDate("")
+    setEndDate("")
+  }
+
+  // 处理日期确认
+  const handleDateConfirm = () => {
+    if (startDate && endDate) {
+      console.log("自定义日期范围:", startDate, "~", endDate)
+      setShowCustomPicker(false)
+    }
+  }
+
+  // 处理取消
+  const handleCancel = () => {
+    setShowCustomPicker(false)
+    setTimeRange("7d") 
+  }
 
-export default function DashboardPage(props: DashboardPageProps) {
   return (
-    <div className="space-y-5">
-      {/* 欢迎区域 - 全宽 */}
-      <div className="bg-white border border-gray-200 rounded-md">
-        <div className="flex items-center justify-between p-5">
+    <Page className="overflow-auto">
+      {/* 欢迎栏 */}
+      <div className="bg-card rounded-lg border p-2 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
         <div>
-            <h1 className="text-xl font-bold text-gray-800">
-              IP代理管理控制台
-            </h1>
-            <p className="text-gray-500 mt-1">上次更新: -</p>
+          <h1 className="text-lg font-bold">IP代理管理控制台</h1>
+          <p className="text-sm text-muted-foreground mt-1">上次更新: --</p>
         </div>
-          <div className="flex space-x-3">
-            <button className="px-4 py-2 bg-gray-100 text-gray-700 border border-gray-200 rounded-md hover:bg-gray-200 transition-colors text-sm font-medium">
-              查看使用报告
-            </button>
-            <button className="px-4 py-2 bg-blue-600 text-white border border-blue-700 rounded-md hover:bg-blue-700 transition-colors text-sm font-medium">
-              添加新代理
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* 主体内容 - 双栏布局 */}
-      <div className="flex flex-col lg:flex-row space-y-5 lg:space-y-0 lg:space-x-5">
-        {/* 左侧栏 - 占比较大 */}
-        <div className="w-full lg:w-8/12 space-y-5">
-          {/* 代理资源统计卡片组 */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-5">
-            <DataCard
-              title="在线代理"
-              value="14,283"
-              change="+12.5%"
-              isIncrease={true}
-              icon={
-                <svg
-                  className="h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M5 12h14M12 5l7 7-7 7"
-                  />
-                </svg>
-              }
-            />
-            <DataCard
-              title="总请求数"
-              value="851,492"
-              change="+8.2%"
-              isIncrease={true}
-              icon={
-                <svg
-                  className="h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
-                  />
-                </svg>
-              }
-            />
-            <DataCard
-              title="成功率"
-              value="98.5%"
-              change="+2.4%"
-              isIncrease={true}
-              icon={
-                <svg
-                  className="h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-              }
-            />
-            <DataCard
-              title="平均响应时间"
-              value="0.82s"
-              change="-12.3%"
-              isIncrease={true}
-              icon={
-                <svg
-                  className="h-6 w-6"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
-                  />
-                </svg>
-              }
-            />
-          </div>
-
-          {/* 代理使用图表 */}
-          <div className="bg-white border border-gray-200 rounded-md">
-            <div className="flex justify-between items-center p-5 border-b border-gray-200">
-              <h2 className="font-bold text-gray-800">代理使用趋势</h2>
-              <div className="flex items-center space-x-2">
-                <select className="text-sm border border-gray-200 rounded-md px-3 py-1 bg-white">
-                  <option>今日</option>
-                  <option>本周</option>
-                  <option>本月</option>
-                  <option>全年</option>
-                </select>
-              </div>
-            </div>
-            <div className="h-80 bg-white p-5 flex items-center justify-center text-gray-400 border-b border-gray-200">
-              请求量与响应时间统计图表
-            </div>
-            <div className="flex justify-between p-5 text-sm">
-              <div className="text-gray-500">
-                <span className="inline-block w-3 h-3 rounded-full bg-blue-500 mr-1"></span>
-                请求数量
-              </div>
-              <div className="text-gray-500">
-                <span className="inline-block w-3 h-3 rounded-full bg-green-500 mr-1"></span>
-                成功率
-              </div>
-              <div className="text-gray-500">
-                <span className="inline-block w-3 h-3 rounded-full bg-orange-500 mr-1"></span>
-                响应时间
-              </div>
-            </div>
-          </div>
-
-          {/* IP代理列表 */}
-          <div className="bg-white border border-gray-200 rounded-md">
-            <div className="p-5 border-b border-gray-200">
-              <div className="flex justify-between items-center">
-                <h2 className="font-bold text-gray-800">活跃代理IP</h2>
+        <div className="flex gap-2 flex-wrap">
           <Link
-                  href="/proxies"
-                  className="text-blue-600 text-sm hover:underline"
+            href="/cust"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border text-sm text-muted-foreground hover:bg-accent transition-colors"
           >
-                  查看全部
+            <Users className="h-4 w-4" />
+            客户管理
+          </Link>
+          <Link
+            href="/trade"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border text-sm text-muted-foreground hover:bg-accent transition-colors"
+          >
+            <Activity className="h-4 w-4" />
+            交易明细
+          </Link>
+          <Link
+            href="/gateway"
+            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md border text-sm text-muted-foreground hover:bg-accent transition-colors"
+          >
+            <DoorOpenIcon className="h-4 w-4" />
+            网关列表
           </Link>
         </div>
       </div>
-            <div className="overflow-x-auto">
-              <table className="w-full">
-                <thead>
-                  <tr className="bg-gray-50 text-left text-xs text-gray-500 uppercase tracking-wider border-b border-gray-200">
-                    <th className="px-5 py-3">IP地址</th>
-                    <th className="px-5 py-3">位置</th>
-                    <th className="px-5 py-3">状态</th>
-                    <th className="px-5 py-3">请求次数</th>
-                    <th className="px-5 py-3">成功率</th>
-                    <th className="px-5 py-3">操作</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-200">
-                  {[1, 2, 3, 4, 5].map(item => (
-                    <ContentRow
-                      key={item}
-                      ip={`192.168.${item}.${item * 10}`}
-                      location={item % 2 === 0 ? "中国" : "美国"}
-                      status={
-                        item % 3 === 0
-                          ? "error"
-                          : item % 2 === 0
-                            ? "warning"
-                            : "active"
-                      }
-                      requests={1}
-                      successRate={`2%`}
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+        {/* 指标卡片 */}
+        <div className="lg:col-span-2 space-y-4">
+          <div className="space-y-3">
+            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
+              <StatCard
+                title="待认领客户数量"
+                value="--"
+                change="--"
+                trend="up"
+                icon={Users}
+                iconColor="text-cyan-600"
+                iconBg="bg-cyan-50 border-cyan-100"
               />
+              <StatCard
+                title="活跃代理数"
+                value="--"
+                change="--"
+                trend="up"
+                icon={Server}
+                iconColor="text-blue-600"
+                iconBg="bg-blue-50 border-blue-100"
+              />
+              <StatCard
+                title="今日交易额"
+                value="--"
+                change="--"
+                trend="up"
+                icon={TrendingUp}
+                iconColor="text-amber-600"
+                iconBg="bg-amber-50 border-amber-100"
+              />
+              <StatCard
+                title="今日提取数量"
+                value="--"
+                change="--"
+                trend="up"
+                icon={BarChart3}
+                iconColor="text-rose-600"
+                iconBg="bg-rose-50 border-rose-100"
+              />
+              <StatCard
+                title="今日新增客户"
+                value="--"
+                change="--"
+                trend="up"
+                icon={UserPlus}
+                iconColor="text-blue-600"
+                iconBg="bg-blue-50 border-blue-100"
+              />
+            </div>
+
+            {/* 时间筛选栏 */}
+            <div className="flex flex-col sm:flex-row sm:items-center justify-end gap-3">
+              <div className="flex items-center gap-2">
+                <span className="text-sm text-muted-foreground">数据周期</span>
+                <div className="h-4 w-px bg-border" />
+                <div className="flex rounded-md border overflow-hidden">
+                  {(Object.keys(timeRangeLabels) as TimeRange[]).map(key => (
+                    <button
+                      key={key}
+                      onClick={() => {
+                        if (key === "custom") {
+                          handleCustomClick()
+                        } else {
+                          setTimeRange(key)
+                          setShowCustomPicker(false)
+                        }
+                      }}
+                      className={`px-3 py-1.5 text-xs font-medium transition-colors ${
+                        timeRange === key && !showCustomPicker
+                          ? "bg-primary text-primary-foreground"
+                          : "text-muted-foreground hover:bg-accent"
+                      }`}
+                    >
+                      {timeRangeLabels[key]}
+                    </button>
                   ))}
-                </tbody>
-              </table>
-            </div>
-            <div className="p-3 bg-gray-50 border-t border-gray-200 flex justify-end">
-              <button className="px-3 py-1 bg-white border border-gray-200 rounded-md text-sm mr-2">
-                上一页
-              </button>
-              <button className="px-3 py-1 bg-blue-600 text-white rounded-md text-sm">
-                下一页
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {/* 右侧栏 - 占比较小 */}
-        <div className="w-full lg:w-4/12 space-y-5">
-          {/* 代理资源分布 */}
-          <div className="bg-white border border-gray-200 rounded-md">
-            <div className="p-5 border-b border-gray-200">
-              <h2 className="font-bold text-gray-800">资源分布</h2>
-            </div>
-            <div className="h-64 bg-white p-5 flex items-center justify-center text-gray-400">
-              IP地区分布饼图
-            </div>
-            <div className="grid grid-cols-2 gap-3 p-5 border-t border-gray-200">
-              <div className="flex justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
-                <span className="text-xs text-gray-600">中国</span>
-                <span className="text-xs font-medium">42%</span>
-              </div>
-              <div className="flex justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
-                <span className="text-xs text-gray-600">美国</span>
-                <span className="text-xs font-medium">28%</span>
-              </div>
-              <div className="flex justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
-                <span className="text-xs text-gray-600">欧洲</span>
-                <span className="text-xs font-medium">16%</span>
-              </div>
-              <div className="flex justify-between p-2 bg-gray-50 rounded-md border border-gray-200">
-                <span className="text-xs text-gray-600">其他</span>
-                <span className="text-xs font-medium">14%</span>
-              </div>
-            </div>
-          </div>
-
-          {/* 系统告警 */}
-          <div className="bg-white border border-gray-200 rounded-md">
-            <div className="p-5 border-b border-gray-200">
-              <div className="flex justify-between items-center">
-                <h2 className="font-bold text-gray-800">告警通知</h2>
-                <span className="px-2 py-1 bg-red-100 text-red-800 text-xs rounded-full">
-                  3 个新告警
-                </span>
-              </div>
-            </div>
-            <div className="p-3 space-y-3">
-              <AlertItem
-                title="IP不足告警"
-                severity="high"
-                time="10分钟前"
-                message="特定地区(美国加州)代理IP资源不足，影响用户请求。"
-              />
-              <AlertItem
-                title="响应延迟"
-                severity="medium"
-                time="30分钟前"
-                message="欧洲区域代理响应时间超过阈值(1.5s)，请检查网络状况。"
-              />
-              <AlertItem
-                title="异常请求"
-                severity="low"
-                time="2小时前"
-                message="检测到异常请求模式，可能存在爬虫攻击行为。"
-              />
-            </div>
-            <div className="p-4 border-t border-gray-200">
-              <button className="w-full py-2 bg-gray-100 text-gray-600 border border-gray-200 rounded-md text-sm hover:bg-gray-200 transition-colors">
-                查看全部告警
-              </button>
                 </div>
               </div>
 
-          {/* 系统状态 */}
-          <div className="bg-white border border-gray-200 rounded-md">
-            <div className="p-5 border-b border-gray-200">
-              <div className="flex justify-between items-center">
-                <h2 className="font-bold text-gray-800">系统状态</h2>
-                <span className="px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full font-medium">
-                  运行正常
-                </span>
-              </div>
-            </div>
-            <div className="p-3 space-y-3">
-              <StatusBar title="代理服务器负载" value={28} status="normal" />
-              <StatusBar title="带宽使用率" value={65} status="normal" />
-              <StatusBar title="存储空间" value={82} status="warning" />
-              <StatusBar title="API请求队列" value={45} status="normal" />
-            </div>
-            <div className="p-4 border-t border-gray-200">
-              <Link
-                href="/system/status"
-                className="block w-full py-2 text-center bg-gray-100 text-gray-600 border border-gray-200 rounded-md text-sm hover:bg-gray-200 transition-colors"
+              {/* 点击自定义时显示 */}
+              {showCustomPicker && (
+                <div className="flex gap-2 items-center p-1 rounded-md">
+                  <input 
+                    type="date" 
+                    className="px-2 py-1 border rounded text-sm bg-background"
+                    value={startDate}
+                    onChange={(e) => setStartDate(e.target.value)}
+                  />
+                  <span className="text-muted-foreground">~</span>
+                  <input 
+                    type="date" 
+                    className="px-2 py-1 border rounded text-sm bg-background"
+                    value={endDate}
+                    onChange={(e) => setEndDate(e.target.value)}
+                  />
+                  <button
+                    onClick={handleDateConfirm}
+                    disabled={!startDate || !endDate}
+                    className="px-3 py-1 bg-primary text-primary-foreground rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed"
                   >
-                查看详细状态
-              </Link>
+                    确定
+                  </button>
+                  <button
+                    onClick={handleCancel}
+                    className="px-3 py-1 border rounded text-sm hover:bg-accent"
+                  >
+                    取消
+                  </button>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* 图表区域 */}
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+            {/* 每日活跃代理 */}
+            <div className="bg-card rounded-lg border p-4">
+              <h3 className="font-semibold text-sm mb-4">每日活跃代理</h3>
+              <SimpleLineChart
+                data={chartData.proxyData}
+                dataKey="value"
+                xAxisKey="date"
+                stroke="#3b82f6"
+                height={250}
+              />
+            </div>
+
+            {/* 每日交易额 */}
+            <div className="bg-card rounded-lg border p-4">
+              <h3 className="font-semibold text-sm mb-4">每日交易额</h3>
+              <SimpleBarChart
+                data={chartData.tradeData}
+                dataKey="value"
+                xAxisKey="date"
+                fill="#f59e0b"
+                height={250}
+              />
+            </div>
+
+            {/* 每日新增客户 */}
+            <div className="bg-card rounded-lg border p-4">
+              <h3 className="font-semibold text-sm mb-4">每日新增客户</h3>
+              <SimpleLineChart
+                data={chartData.customerData}
+                dataKey="value"
+                xAxisKey="date"
+                stroke="#10b981"
+                height={250}
+              />
+            </div>
+
+            {/* 每日提取量 */}
+            <div className="bg-card rounded-lg border p-4">
+              <h3 className="font-semibold text-sm mb-4">每日提取量</h3>
+              <SimpleBarChart
+                data={chartData.extractData}
+                dataKey="value"
+                xAxisKey="date"
+                fill="#ef4444"
+                height={250}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/*套餐统计 */}
+        <div className="lg:col-span-1 space-y-4">
+          <div className="bg-card rounded-lg border">
+            <div className="p-5 border-b">
+              <h2 className="font-semibold">套餐统计</h2>
+            </div>
+            <div className="p-5">
+              <div className="flex flex-col gap-4">
+                <ResourceItem
+                  label="长效套餐"
+                  active="--"
+                  total="--"
+                  color="bg-blue-500"
+                />
+                <ResourceItem
+                  label="短效套餐"
+                  active="--"
+                  total="--"
+                  color="bg-emerald-500"
+                />
+                <div className="pt-3 border-t flex justify-between text-sm">
+                  <span className="text-muted-foreground">总可用IP</span>
+                  <span className="font-semibold">--</span>
                 </div>
               </div>
             </div>
           </div>
+
+          {/* 最近活跃用户 */}
+          <div className="bg-card rounded-lg border">
+            <div className="p-5 border-b">
+              <h2 className="font-semibold">最近活跃用户</h2>
             </div>
+            <div className="p-4">
+              <SimpleHorizontalBarChart
+                data={chartData.userData}
+                dataKey="activity"
+                labelKey="name"
+                fill="#6366f1"
+                width={300}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </Page>
   )
 }
 
-// 数据卡片组件 - 显示关键指标
-function DataCard({
+function StatCard({
   title,
   value,
   change,
-  isIncrease,
-  icon,
+  trend,
+  icon: Icon,
+  iconColor,
+  iconBg,
 }: {
   title: string
   value: string
   change: string
-  isIncrease: boolean
-  icon: React.ReactNode
+  trend: "up" | "down"
+  icon: React.ComponentType<{ className?: string }>
+  iconColor: string
+  iconBg: string
 }) {
   return (
-    <div className="bg-white border border-gray-200 rounded-md p-5">
-      <div className="flex justify-between items-center">
-        <div>
-          <h3 className="text-sm text-gray-500">{title}</h3>
-          <p className="text-xl font-bold mt-1 text-gray-800">{value}</p>
-          <div className="flex items-center mt-2">
+    <div className="bg-card rounded-lg border p-4">
+      <div className="flex items-start justify-between">
+        <div className="flex-1 min-w-0">
+          <p className="text-xs text-muted-foreground truncate">{title}</p>
+          <p className="text-xl font-bold mt-1 truncate">{value}</p>
+          <div className="flex items-center gap-1 mt-1.5">
+            {trend === "up" ? (
+              <ArrowUpRight className="h-3 w-3 text-green-600 shrink-0" />
+            ) : (
+              <ArrowDownRight className="h-3 w-3 text-red-600 shrink-0" />
+            )}
             <span
-              className={`text-xs font-medium ${isIncrease ? "text-green-600" : "text-red-600"}`}
+              className={`text-xs font-medium ${trend === "up" ? "text-green-600" : "text-red-600"}`}
             >
               {change}
             </span>
-            <span className="text-xs text-gray-400 ml-1">相比上周期</span>
+            <span className="text-xs text-muted-foreground">较昨日</span>
           </div>
         </div>
-        <div
-          className={`p-3 rounded-md ${isIncrease ? "bg-blue-50 text-blue-600" : "bg-orange-50 text-orange-500"} border ${isIncrease ? "border-blue-100" : "border-orange-100"}`}
-        >
-          {icon}
+        <div className={`p-2 rounded-md border shrink-0 ${iconBg}`}>
+          <Icon className={`h-5 w-5 ${iconColor}`} />
         </div>
       </div>
     </div>
   )
 }
 
-// 代理IP内容行组件
-function ContentRow({
-  ip,
-  location,
-  status,
-  requests,
-  successRate,
+function ResourceItem({
+  label,
+  active,
+  total,
+  color,
 }: {
-  ip: string
-  location: string
-  status: "active" | "warning" | "error"
-  requests: number
-  successRate: string
+  label: string
+  active: string
+  total: string
+  color: string
 }) {
-  const statusConfig = {
-    active: {
-      color: "bg-green-100 text-green-800 border-green-200",
-      label: "在线",
-    },
-    warning: {
-      color: "bg-yellow-100 text-yellow-800 border-yellow-200",
-      label: "不稳定",
-    },
-    error: { color: "bg-red-100 text-red-800 border-red-200", label: "离线" },
-  }
-
   return (
-    <tr className="hover:bg-gray-50">
-      <td className="px-5 py-4">
-        <div className="font-mono text-sm">{ip}</div>
-      </td>
-      <td className="px-5 py-4">
-        <div className="text-sm text-gray-700">{location}</div>
-      </td>
-      <td className="px-5 py-4">
-        <span
-          className={`px-2 py-1 text-xs rounded-md ${statusConfig[status].color} border`}
-        >
-          {statusConfig[status].label}
+    <div>
+      <div className="flex justify-between text-sm mb-1.5">
+        <span className="text-muted-foreground">{label}</span>
+        <span className="font-medium">
+          {active} / {total}
         </span>
-      </td>
-      <td className="px-5 py-4 text-sm text-gray-700">
-        {requests.toLocaleString()}
-      </td>
-      <td className="px-5 py-4 text-sm text-gray-700">{successRate}</td>
-      <td className="px-5 py-4">
-        <div className="flex space-x-2">
-          <button className="p-1 border border-gray-200 rounded-md hover:bg-gray-50">
-            <svg
-              className="h-4 w-4 text-gray-500"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-              />
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-              />
-            </svg>
-          </button>
-          <button className="p-1 border border-gray-200 rounded-md hover:bg-gray-50">
-            <svg
-              className="h-4 w-4 text-gray-500"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-              />
-            </svg>
-          </button>
-          <button className="p-1 border border-red-200 rounded-md hover:bg-red-50">
-            <svg
-              className="h-4 w-4 text-red-500"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-        </div>
-      </td>
-    </tr>
-  )
-}
-
-// 告警通知组件
-function AlertItem({
-  title,
-  severity,
-  time,
-  message,
-}: {
-  title: string
-  severity: "high" | "medium" | "low"
-  time: string
-  message: string
-}) {
-  const severityConfig = {
-    high: { color: "bg-red-50 border-red-200", dot: "bg-red-500" },
-    medium: { color: "bg-yellow-50 border-yellow-200", dot: "bg-yellow-500" },
-    low: { color: "bg-blue-50 border-blue-200", dot: "bg-blue-500" },
-  }
-
-  return (
-    <div className={`p-3 rounded-md ${severityConfig[severity].color} border`}>
-      <div className="flex justify-between items-start">
-        <div className="flex items-center">
-          <span
-            className={`h-2 w-2 rounded-full ${severityConfig[severity].dot} mr-2`}
-          ></span>
-          <span className="font-medium text-gray-800 text-sm">{title}</span>
-        </div>
-        <span className="text-xs text-gray-500">{time}</span>
-      </div>
-      <p className="mt-2 text-xs text-gray-600">{message}</p>
-    </div>
-  )
-}
-
-// 系统状态条组件
-function StatusBar({
-  title,
-  value,
-  status,
-}: {
-  title: string
-  value: number
-  status: "normal" | "warning" | "error"
-}) {
-  const statusConfig = {
-    normal: { color: "bg-green-500", bgColor: "bg-green-100" },
-    warning: { color: "bg-yellow-500", bgColor: "bg-yellow-100" },
-    error: { color: "bg-red-500", bgColor: "bg-red-100" },
-  }
-
-  return (
-    <div className="p-3 border border-gray-200 rounded-md">
-      <div className="flex justify-between mb-2">
-        <span className="text-sm text-gray-700">{title}</span>
-        <span className="text-sm font-medium">{value}%</span>
       </div>
+      <div className="w-full h-2 bg-muted rounded-full overflow-hidden">
         <div
-        className={`w-full h-2 ${statusConfig[status].bgColor} rounded-full`}
-      >
-        <div
-          className={`h-2 ${statusConfig[status].color} rounded-full`}
-          style={{ width: `${value}%` }}
-        ></div>
+          className={`h-full ${color} rounded-full transition-all`}
+          style={{ width: "0%" }}
+        />
       </div>
     </div>
   )

src/app/(root)/_navigation/index.tsx

@@ -164,7 +164,7 @@ const menuSections: { title: string; items: NavItemProps[] }[] = [
     title: "概览",
     items: [
       { href: "/", icon: Home, label: "首页" },
-      { href: "/statistics", icon: BarChart3, label: "数据统计" },
+      // { href: "/statistics", icon: BarChart3, label: "数据统计" },
     ],
   },
   {

src/app/(root)/balance/page.tsx

@@ -238,13 +238,13 @@ export default function BalancePage() {
               header: "创建时间",
               accessorKey: "created_at",
               cell: ({ row }) => {
-                const createdAt = row.original.created_at;
-                if (!createdAt) return <span>-</span>;
+                const createdAt = row.original.created_at
+                if (!createdAt) return <span>-</span>
 
-                const date = new Date(createdAt);
-                if (isNaN(date.getTime())) return <span>-</span>;
+                const date = new Date(createdAt)
+                if (isNaN(date.getTime())) return <span>-</span>
 
-                return format(date, "yyyy-MM-dd HH:mm:ss");
+                return format(date, "yyyy-MM-dd HH:mm:ss")
               },
             },
           ]}

src/app/(root)/coupon/create.tsx

@@ -25,40 +25,45 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 
-const schema = z.object({
+const schema = z
+  .object({
     name: z.string().min(1, "请输入优惠券名称"),
-  amount: z.string()
+    amount: z
+      .string()
       .min(1, "请输入优惠券金额")
       .regex(/^\d+(\.\d+)?$/, "请输入有效的金额数字")
       .refine(val => Number(val) > 0, "优惠券金额必须大于0"),
-  count: z.string()
+    count: z
+      .string()
       .min(1, "请输入优惠券数量")
       .regex(/^\d+$/, "请输入正整数")
       .refine(val => Number(val) >= 1, "优惠券数量至少为1"),
-  min_amount: z.string()
+    min_amount: z
+      .string()
       .min(1, "请输入最低消费金额")
       .regex(/^\d+(\.\d+)?$/, "请输入有效的金额数字")
       .refine(val => Number(val) >= 0, "最低消费金额不能为负数"),
     expire_at: z.string().optional(),
     expire_type: z.string().min(1, "请选择过期类型"),
     expire_in: z.string().optional(),
-  status:z.string().optional()
-}).superRefine((data, ctx) => {
-  const expireType = Number(data.expire_type);
-  if (!data.expire_type) return;
+    status: z.string().optional(),
+  })
+  .superRefine((data, ctx) => {
+    const expireType = Number(data.expire_type)
+    if (!data.expire_type) return
     if (expireType === 1 && !data.expire_at) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
         message: "请选择过期时间",
-      path: ["expire_at"]
-    });
+        path: ["expire_at"],
+      })
     }
     if (expireType === 2 && !data.expire_in) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
         message: "请输入过期时长天数",
-      path: ["expire_in"]
-    });
+        path: ["expire_in"],
+      })
     }
   })
 
@@ -258,7 +263,9 @@ export function CreateDiscount(props: { onSuccess?: () => void }) {
                 name="expire_in"
                 render={({ field, fieldState }) => (
                   <div className="flex items-start gap-4">
-                    <FieldLabel className="w-28 pt-2">过期时长（天）:</FieldLabel>
+                    <FieldLabel className="w-28 pt-2">
+                      过期时长（天）:
+                    </FieldLabel>
                     <div className="flex-1">
                       <Input
                         type="number"

src/app/(root)/coupon/update.tsx

@@ -25,40 +25,45 @@ import {
 } from "@/components/ui/select"
 import type { Coupon } from "@/models/coupon"
 
-const schema = z.object({
+const schema = z
+  .object({
     name: z.string().min(1, "请输入优惠券名称"),
-  amount: z.string()
+    amount: z
+      .string()
       .min(1, "请输入优惠券金额")
       .regex(/^\d+(\.\d+)?$/, "请输入有效的金额数字")
       .refine(val => Number(val) > 0, "优惠券金额必须大于0"),
-  count: z.string()
+    count: z
+      .string()
       .min(1, "请输入优惠券数量")
       .regex(/^\d+$/, "请输入正整数")
       .refine(val => Number(val) >= 1, "优惠券数量至少为1"),
-  min_amount: z.string()
+    min_amount: z
+      .string()
       .min(1, "请输入最低消费金额")
       .regex(/^\d+(\.\d+)?$/, "请输入有效的金额数字")
       .refine(val => Number(val) >= 0, "最低消费金额不能为负数"),
     expire_at: z.string().optional(),
     expire_type: z.string().min(1, "请选择过期类型"),
     expire_in: z.string().optional(),
-  status:z.string().optional()
-}).superRefine((data, ctx) => {
-  const expireType = Number(data.expire_type);
-  if (!data.expire_type) return;
+    status: z.string().optional(),
+  })
+  .superRefine((data, ctx) => {
+    const expireType = Number(data.expire_type)
+    if (!data.expire_type) return
     if (expireType === 1 && !data.expire_at) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
         message: "请选择过期时间",
-      path: ["expire_at"]
-    });
+        path: ["expire_at"],
+      })
     }
     if (expireType === 2 && !data.expire_in) {
       ctx.addIssue({
         code: z.ZodIssueCode.custom,
         message: "请输入过期时长天数",
-      path: ["expire_in"]
-    });
+        path: ["expire_in"],
+      })
     }
   })
 
@@ -271,7 +276,9 @@ export function UpdateCoupon(props: {
                 name="expire_in"
                 render={({ field, fieldState }) => (
                   <div className="flex items-start gap-4">
-                    <FieldLabel className="w-28 pt-2">过期时长（天）:</FieldLabel>
+                    <FieldLabel className="w-28 pt-2">
+                      过期时长（天）:
+                    </FieldLabel>
                     <div className="flex-1">
                       <Input
                         type="number"

src/components/charts/SimpleBarChart.tsx

@@ -0,0 +1,175 @@
+"use client"
+
+import { useMemo, useState } from "react"
+
+interface SimpleBarChartProps {
+  data: Record<string, string | number>[]
+  dataKey: string
+  xAxisKey: string
+  fill?: string
+  height?: number
+}
+
+export function SimpleBarChart({
+  data,
+  dataKey,
+  xAxisKey,
+  fill = "#f59e0b",
+  height = 250,
+}: SimpleBarChartProps) {
+  const [tooltip, setTooltip] = useState<{
+    x: number
+    y: number
+    label: string
+    value: number
+  } | null>(null)
+
+  const padding = { top: 20, right: 20, bottom: 40, left: 50 }
+  const chartWidth = 600
+  const chartHeight = height
+  const innerWidth = chartWidth - padding.left - padding.right
+  const innerHeight = chartHeight - padding.top - padding.bottom
+
+  const { bars, xLabels, yLabels } = useMemo(() => {
+    if (data.length === 0) return { bars: [], xLabels: [], yLabels: [] }
+
+    const values = data.map(d => Number(d[dataKey]) || 0)
+    const maxVal = Math.max(...values, 1)
+    const yMax = Math.ceil(maxVal * 1.2)
+
+    const barCount = data.length
+    const barGap = barCount > 1 ? (innerWidth * 0.1) / (barCount - 1) : 0
+    const totalGap = barGap * (barCount - 1)
+    const barWidth = Math.min((innerWidth - totalGap) / barCount, 50)
+
+    const startX =
+      padding.left + (innerWidth - (barWidth * barCount + totalGap)) / 2
+
+    const brs = data.map((d, i) => {
+      const val = Number(d[dataKey]) || 0
+      const barHeight = (val / yMax) * innerHeight
+      return {
+        x: startX + i * (barWidth + barGap),
+        y: padding.top + innerHeight - barHeight,
+        width: barWidth,
+        height: barHeight,
+        label: String(d[xAxisKey] ?? ""),
+        value: val,
+      }
+    })
+
+    const xLbls = brs.map(b => ({
+      x: b.x + b.width / 2,
+      label: b.label,
+    }))
+
+    const yTickCount = 5
+    const yLbls = Array.from({ length: yTickCount + 1 }, (_, i) => {
+      const val = Math.round((yMax / yTickCount) * i)
+      return {
+        y: padding.top + innerHeight - (val / yMax) * innerHeight,
+        label: String(val),
+      }
+    })
+
+    return { bars: brs, xLabels: xLbls, yLabels: yLbls }
+  }, [data, dataKey, xAxisKey, innerWidth, innerHeight])
+
+  if (data.length === 0) {
+    return (
+      <div
+        className="flex items-center justify-center text-muted-foreground text-sm"
+        style={{ height }}
+      >
+        暂无数据
+      </div>
+    )
+  }
+
+  return (
+    <div className="relative" style={{ height }}>
+      <svg
+        viewBox={`0 0 ${chartWidth} ${chartHeight}`}
+        className="w-full h-full"
+        preserveAspectRatio="xMidYMid meet"
+      >
+        {yLabels.map(yl => (
+          <g key={yl.label}>
+            <line
+              x1={padding.left}
+              y1={yl.y}
+              x2={padding.left + innerWidth}
+              y2={yl.y}
+              stroke="hsl(var(--border))"
+              strokeDasharray="4 4"
+              strokeWidth={0.5}
+            />
+            <text
+              x={padding.left - 8}
+              y={yl.y + 4}
+              textAnchor="end"
+              className="fill-muted-foreground"
+              fontSize={11}
+            >
+              {yl.label}
+            </text>
+          </g>
+        ))}
+
+        {bars.map((bar, i) => (
+          <rect
+            key={i}
+            x={bar.x}
+            y={bar.y}
+            width={bar.width}
+            height={bar.height}
+            rx={3}
+            fill={fill}
+            role="button"
+            aria-label={`${bar.label}: ${bar.value}`}
+            className="cursor-pointer opacity-90 hover:opacity-100 transition-opacity"
+            onMouseEnter={() =>
+              setTooltip({
+                x: bar.x + bar.width / 2,
+                y: bar.y,
+                label: bar.label,
+                value: bar.value,
+              })
+            }
+            onMouseLeave={() => setTooltip(null)}
+          />
+        ))}
+
+        {xLabels.map((xl, i) =>
+          i % Math.ceil(xLabels.length / 10) === 0 ||
+          i === xLabels.length - 1 ? (
+            <text
+              key={i}
+              x={xl.x}
+              y={padding.top + innerHeight + 20}
+              textAnchor="middle"
+              className="fill-muted-foreground"
+              fontSize={11}
+            >
+              {xl.label}
+            </text>
+          ) : null,
+        )}
+      </svg>
+
+      {tooltip && (
+        <div
+          className="absolute pointer-events-none bg-popover border rounded-md px-2 py-1 text-xs shadow-sm z-10"
+          style={{
+            left: `${((tooltip.x / chartWidth) * 100).toFixed(1)}%`,
+            top: tooltip.y - 30,
+            transform: "translate(-50%, -100%)",
+          }}
+        >
+          <div className="text-muted-foreground">{tooltip.label}</div>
+          <div className="font-semibold">{tooltip.value}</div>
+        </div>
+      )}
+    </div>
+  )
+}

src/components/charts/SimpleHorizontalBarChart.tsx

@@ -0,0 +1,101 @@
+"use client"
+
+import { useMemo } from "react"
+
+interface SimpleHorizontalBarChartProps {
+  data: Record<string, string | number>[]
+  dataKey: string
+  labelKey: string
+  fill?: string
+  width?: number
+}
+
+export function SimpleHorizontalBarChart({
+  data,
+  dataKey,
+  labelKey,
+  fill = "#6366f1",
+  width = 300,
+}: SimpleHorizontalBarChartProps) {
+  const chartWidth = width
+  const chartHeight = Math.max(data.length * 40 + 20, 120)
+  const padding = { top: 10, right: 10, bottom: 10, left: 80 }
+  const innerWidth = chartWidth - padding.left - padding.right
+
+  const bars = useMemo(() => {
+    if (data.length === 0) return []
+
+    const values = data.map(d => Number(d[dataKey]) || 0)
+    const maxVal = Math.max(...values, 1)
+
+    return data.map((d, i) => {
+      const val = Number(d[dataKey]) || 0
+      const barWidth = (val / maxVal) * innerWidth * 0.9
+      const y =
+        padding.top +
+        (i * (chartHeight - padding.top - padding.bottom)) / data.length
+      return {
+        x: padding.left,
+        y,
+        width: barWidth,
+        height: Math.min(
+          24,
+          (chartHeight - padding.top - padding.bottom) / data.length - 4,
+        ),
+        label: String(d[labelKey] ?? ""),
+        value: val,
+      }
+    })
+  }, [data, dataKey, labelKey, innerWidth, chartHeight])
+
+  if (data.length === 0) {
+    return (
+      <div
+        className="flex items-center justify-center text-muted-foreground text-sm"
+        style={{ height: 120 }}
+      >
+        暂无数据
+      </div>
+    )
+  }
+
+  return (
+    <svg
+      viewBox={`0 0 ${chartWidth} ${chartHeight}`}
+      className="w-full"
+      preserveAspectRatio="xMidYMid meet"
+      style={{ height: chartHeight }}
+    >
+      {bars.map((bar, i) => (
+        <g key={i}>
+          <text
+            x={padding.left - 8}
+            y={bar.y + bar.height / 2 + 4}
+            textAnchor="end"
+            className="fill-muted-foreground"
+            fontSize={12}
+          >
+            {bar.label.length > 6 ? `${bar.label.slice(0, 6)}...` : bar.label}
+          </text>
+          <rect
+            x={bar.x}
+            y={bar.y}
+            width={bar.width}
+            height={bar.height}
+            rx={4}
+            fill={fill}
+            opacity={0.8}
+          />
+          <text
+            x={bar.x + bar.width + 6}
+            y={bar.y + bar.height / 2 + 4}
+            className="fill-muted-foreground"
+            fontSize={11}
+          >
+            {bar.value}
+          </text>
+        </g>
+      ))}
+    </svg>
+  )
+}

src/components/charts/SimpleLineChart.tsx

@@ -0,0 +1,193 @@
+"use client"
+
+import { useMemo, useState } from "react"
+
+interface SimpleLineChartProps {
+  data: Record<string, string | number>[]
+  dataKey: string
+  xAxisKey: string
+  stroke?: string
+  height?: number
+}
+
+export function SimpleLineChart({
+  data,
+  dataKey,
+  xAxisKey,
+  stroke = "#3b82f6",
+  height = 250,
+}: SimpleLineChartProps) {
+  const [tooltip, setTooltip] = useState<{
+    x: number
+    y: number
+    label: string
+    value: number
+  } | null>(null)
+
+  const padding = { top: 20, right: 20, bottom: 40, left: 50 }
+  const chartWidth = 600
+  const chartHeight = height
+  const innerWidth = chartWidth - padding.left - padding.right
+  const innerHeight = chartHeight - padding.top - padding.bottom
+
+  const { points, xLabels, yLabels } = useMemo(() => {
+    if (data.length === 0) return { points: [], xLabels: [], yLabels: [] }
+
+    const values = data.map(d => Number(d[dataKey]) || 0)
+    const maxVal = Math.max(...values, 1)
+    const yMax = Math.ceil(maxVal * 1.2)
+
+    const step = innerWidth / Math.max(data.length - 1, 1)
+
+    const pts = data.map((d, i) => ({
+      x: padding.left + i * step,
+      y: padding.top + innerHeight - (Number(d[dataKey]) / yMax) * innerHeight,
+    }))
+
+    const xLbls = data.map((d, i) => ({
+      x: padding.left + i * step,
+      label: String(d[xAxisKey] ?? ""),
+    }))
+
+    const yTickCount = 5
+    const yLbls = Array.from({ length: yTickCount + 1 }, (_, i) => {
+      const val = Math.round((yMax / yTickCount) * i)
+      return {
+        y: padding.top + innerHeight - (val / yMax) * innerHeight,
+        label: String(val),
+      }
+    })
+
+    return { points: pts, xLabels: xLbls, yLabels: yLbls }
+  }, [data, dataKey, xAxisKey, innerWidth, innerHeight])
+
+  if (data.length === 0) {
+    return (
+      <div
+        className="flex items-center justify-center text-muted-foreground text-sm"
+        style={{ height }}
+      >
+        暂无数据
+      </div>
+    )
+  }
+
+  const linePath = points
+    .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
+    .join(" ")
+  const areaPath =
+    points.length > 0
+      ? `${linePath} L ${points[points.length - 1].x} ${padding.top + innerHeight} L ${points[0].x} ${padding.top + innerHeight} Z`
+      : ""
+
+  return (
+    <div className="relative" style={{ height }}>
+      <svg
+        viewBox={`0 0 ${chartWidth} ${chartHeight}`}
+        className="w-full h-full"
+        preserveAspectRatio="xMidYMid meet"
+      >
+        <defs>
+          <linearGradient
+            id={`area-${stroke.replace("#", "")}`}
+            x1="0"
+            y1="0"
+            x2="0"
+            y2="1"
+          >
+            <stop offset="0%" stopColor={stroke} stopOpacity={0.2} />
+            <stop offset="100%" stopColor={stroke} stopOpacity={0} />
+          </linearGradient>
+        </defs>
+
+        {yLabels.map(yl => (
+          <g key={yl.label}>
+            <line
+              x1={padding.left}
+              y1={yl.y}
+              x2={padding.left + innerWidth}
+              y2={yl.y}
+              stroke="hsl(var(--border))"
+              strokeDasharray="4 4"
+              strokeWidth={0.5}
+            />
+            <text
+              x={padding.left - 8}
+              y={yl.y + 4}
+              textAnchor="end"
+              className="fill-muted-foreground"
+              fontSize={11}
+            >
+              {yl.label}
+            </text>
+          </g>
+        ))}
+
+        <path d={areaPath} fill={`url(#area-${stroke.replace("#", "")})`} />
+
+        <path
+          d={linePath}
+          fill="none"
+          stroke={stroke}
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+
+        {points.map((p, i) => (
+          <circle
+            key={i}
+            cx={p.x}
+            cy={p.y}
+            r={3}
+            fill="#fff"
+            stroke={stroke}
+            strokeWidth={2}
+            role="button"
+            aria-label={`${String(data[i]?.[xAxisKey] ?? "")}: ${Number(data[i]?.[dataKey]) || 0}`}
+            className="cursor-pointer"
+            onMouseEnter={() =>
+              setTooltip({
+                x: p.x,
+                y: p.y,
+                label: String(data[i]?.[xAxisKey] ?? ""),
+                value: Number(data[i]?.[dataKey]) || 0,
+              })
+            }
+            onMouseLeave={() => setTooltip(null)}
+          />
+        ))}
+
+        {xLabels.map((xl, i) =>
+          i % Math.ceil(xLabels.length / 7) === 0 ||
+          i === xLabels.length - 1 ? (
+            <text
+              key={i}
+              x={xl.x}
+              y={padding.top + innerHeight + 20}
+              textAnchor="middle"
+              className="fill-muted-foreground"
+              fontSize={11}
+            >
+              {xl.label}
+            </text>
+          ) : null,
+        )}
+      </svg>
+
+      {tooltip && (
+        <div
+          className="absolute pointer-events-none bg-popover border rounded-md px-2 py-1 text-xs shadow-sm"
+          style={{
+            left: `${((tooltip.x / chartWidth) * 100).toFixed(1)}%`,
+            top: tooltip.y - 30,
+            transform: "translate(-50%, -100%)",
+          }}
+        >
+          <div className="text-muted-foreground">{tooltip.label}</div>
+          <div className="font-semibold">{tooltip.value}</div>
+        </div>
+      )}
+    </div>
+  )
+}

src/components/charts/index.ts

@@ -0,0 +1,3 @@
+export { SimpleBarChart } from "./SimpleBarChart"
+export { SimpleHorizontalBarChart } from "./SimpleHorizontalBarChart"
+export { SimpleLineChart } from "./SimpleLineChart"