costhawk 1.0.0

package/costcanary/app/(dashboard)/dashboard/usage/page.tsx

@@ -0,0 +1,354 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { motion } from "framer-motion"
+import { Download, TrendingUp, DollarSign, Activity, BarChart3 } from "lucide-react"
+import {
+  BarChart, Bar, PieChart, Pie, Cell, Legend,
+  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer
+} from "recharts"
+import { chartColors, providerColors, chartConfig } from "@/lib/chart-colors"
+
+interface UsageData {
+  period: string
+  provider: string | null
+  usage: {
+    totalCost: number
+    totalRequests: number
+    avgLatency: number
+    byProvider: Array<{
+      provider: string
+      cost: number
+      requests: number
+    }>
+  }
+  budgets: Array<{
+    name: string
+    spent: number
+    limit: number
+    percentage: number
+    remaining: number
+    status: string
+  }>
+}
+
+// Use consistent provider colors from chart-colors.ts
+
+export default function UsagePage() {
+  const [usageData, setUsageData] = useState<UsageData | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [period, setPeriod] = useState<string>("DAILY")
+  const [selectedProvider, setSelectedProvider] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetchUsageData()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [period, selectedProvider])
+
+  const fetchUsageData = async () => {
+    setLoading(true)
+    try {
+      const params = new URLSearchParams({
+        period,
+        ...(selectedProvider && { provider: selectedProvider }),
+      })
+      const response = await fetch(`/api/usage/current?${params}`)
+      const data = await response.json()
+      setUsageData(data)
+    } catch (error) {
+      console.error("Failed to fetch usage data:", error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleExportCSV = async () => {
+    // TODO: Implement CSV export
+    alert("CSV export coming soon!")
+  }
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat("en-US", {
+      style: "currency",
+      currency: "USD",
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 4,
+    }).format(value)
+  }
+
+  // Prepare chart data - ensure values are numbers (Prisma returns Decimals)
+  const pieData = usageData?.usage?.byProvider?.map((p: any) => ({
+    name: p.provider,
+    value: Number(p.cost) || 0,
+  })) || []
+
+  const barData = usageData?.usage?.byProvider?.map((p: any) => ({
+    provider: p.provider,
+    requests: Number(p.requests) || 0,
+    cost: Number(p.cost) || 0,
+  })) || []
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold text-white">Usage Analytics</h1>
+          <p className="mt-2 text-charcoal-400">
+            Track your API usage and costs across all providers
+          </p>
+        </div>
+        <motion.button
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          onClick={handleExportCSV}
+          className="flex items-center space-x-2 rounded-lg border border-charcoal-700 bg-charcoal-800 px-4 py-2 text-white transition-colors hover:bg-charcoal-700"
+        >
+          <Download className="h-5 w-5" />
+          <span>Export CSV</span>
+        </motion.button>
+      </div>
+
+      {/* Filters */}
+      <div className="flex space-x-4">
+        <select
+          value={period}
+          onChange={(e) => setPeriod(e.target.value)}
+          className="rounded-lg border border-charcoal-700 bg-charcoal-800 px-4 py-2 text-white focus:border-coral-500 focus:outline-none"
+        >
+          <option value="DAILY">Today</option>
+          <option value="WEEKLY">This Week</option>
+          <option value="MONTHLY">This Month</option>
+          <option value="QUARTERLY">This Quarter</option>
+          <option value="YEARLY">This Year</option>
+        </select>
+
+        <select
+          value={selectedProvider || ""}
+          onChange={(e) => setSelectedProvider(e.target.value || null)}
+          className="rounded-lg border border-charcoal-700 bg-charcoal-800 px-4 py-2 text-white focus:border-coral-500 focus:outline-none"
+        >
+          <option value="">All Providers</option>
+          <option value="OPENAI">OpenAI</option>
+          <option value="ANTHROPIC">Anthropic</option>
+          <option value="GOOGLE">Google</option>
+          <option value="GROK">xAI Grok</option>
+        </select>
+      </div>
+
+      {loading ? (
+        <div className="space-y-4">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="h-32 animate-pulse rounded-lg bg-charcoal-900" />
+          ))}
+        </div>
+      ) : (
+        <>
+          {/* Stats Cards */}
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-4">
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="rounded-lg border border-charcoal-800 bg-charcoal-900/50 p-6 backdrop-blur-sm"
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-charcoal-400">Total Cost</p>
+                  <p className="mt-2 text-2xl font-bold text-white">
+                    {formatCurrency(usageData?.usage.totalCost || 0)}
+                  </p>
+                </div>
+                <DollarSign className="h-8 w-8 text-coral-500" />
+              </div>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.1 }}
+              className="rounded-lg border border-charcoal-800 bg-charcoal-900/50 p-6 backdrop-blur-sm"
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-charcoal-400">Total Requests</p>
+                  <p className="mt-2 text-2xl font-bold text-white">
+                    {usageData?.usage.totalRequests.toLocaleString() || 0}
+                  </p>
+                </div>
+                <BarChart3 className="h-8 w-8 text-coral-500" />
+              </div>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.2 }}
+              className="rounded-lg border border-charcoal-800 bg-charcoal-900/50 p-6 backdrop-blur-sm"
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-charcoal-400">Avg Latency</p>
+                  <p className="mt-2 text-2xl font-bold text-white">
+                    {usageData?.usage.avgLatency || 0}ms
+                  </p>
+                </div>
+                <Activity className="h-8 w-8 text-coral-500" />
+              </div>
+            </motion.div>
+
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.3 }}
+              className="rounded-lg border border-charcoal-800 bg-charcoal-900/50 p-6 backdrop-blur-sm"
+            >
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-charcoal-400">Active Providers</p>
+                  <p className="mt-2 text-2xl font-bold text-white">
+                    {usageData?.usage.byProvider.length || 0}
+                  </p>
+                </div>
+                <TrendingUp className="h-8 w-8 text-coral-500" />
+              </div>
+            </motion.div>
+          </div>
+
+          {/* Charts */}
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+            {/* Cost by Provider Pie Chart */}
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              className="rounded-lg border border-charcoal-800 bg-charcoal-900/50 p-6 backdrop-blur-sm"
+            >
+              <h3 className="mb-4 text-lg font-medium text-white">Cost by Provider</h3>
+              {pieData.length > 0 ? (
+                <ResponsiveContainer width="100%" height={300}>
+                  <PieChart>
+                    <Pie
+                      data={pieData}
+                      cx="50%"
+                      cy="45%"
+                      innerRadius={50}
+                      outerRadius={90}
+                      dataKey="value"
+                      nameKey="name"
+                      fill={chartColors.coral}
+                    >
+                      {pieData.map((entry, index) => (
+                        <Cell
+                          key={`cell-${index}`}
+                          fill={providerColors[entry.name] || chartColors.coral}
+                        />
+                      ))}
+                    </Pie>
+                    <Tooltip
+                      content={({ active, payload }) => {
+                        if (active && payload && payload.length) {
+                          const data = payload[0].payload
+                          return (
+                            <div style={{
+                              backgroundColor: '#2D2F36',
+                              border: '1px solid #3D3F47',
+                              borderRadius: '8px',
+                              padding: '12px',
+                            }}>
+                              <p style={{ color: '#F8FAFC', fontWeight: 600, marginBottom: '4px' }}>
+                                {data.name}
+                              </p>
+                              <p style={{ color: '#CBD5E1' }}>
+                                Cost: {formatCurrency(data.value)}
+                              </p>
+                            </div>
+                          )
+                        }
+                        return null
+                      }}
+                    />
+                    <Legend
+                      verticalAlign="bottom"
+                      height={36}
+                      formatter={(value) => <span style={{ color: '#F8FAFC' }}>{value}</span>}
+                    />
+                  </PieChart>
+                </ResponsiveContainer>
+              ) : (
+                <div className="flex h-[300px] items-center justify-center text-charcoal-500">
+                  No data available
+                </div>
+              )}
+            </motion.div>
+
+            {/* Requests by Provider Bar Chart */}
+            <motion.div
+              initial={{ opacity: 0, scale: 0.95 }}
+              animate={{ opacity: 1, scale: 1 }}
+              transition={{ delay: 0.1 }}
+              className="rounded-lg border border-charcoal-800 bg-charcoal-900/50 p-6 backdrop-blur-sm"
+            >
+              <h3 className="mb-4 text-lg font-medium text-white">Requests by Provider</h3>
+              {barData.length > 0 ? (
+                <ResponsiveContainer width="100%" height={300}>
+                  <BarChart data={barData}>
+                    <CartesianGrid {...chartConfig.grid} />
+                    <XAxis dataKey="provider" {...chartConfig.xAxis} />
+                    <YAxis {...chartConfig.yAxis} />
+                    <Tooltip
+                      contentStyle={chartConfig.tooltip.contentStyle}
+                      labelStyle={chartConfig.tooltip.labelStyle}
+                    />
+                    <Bar dataKey="requests" fill={chartColors.coral} radius={[6, 6, 0, 0]} />
+                  </BarChart>
+                </ResponsiveContainer>
+              ) : (
+                <div className="flex h-[300px] items-center justify-center text-charcoal-500">
+                  No data available
+                </div>
+              )}
+            </motion.div>
+          </div>
+
+          {/* Budget Status */}
+          {usageData?.budgets && usageData.budgets.length > 0 && (
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="rounded-lg border border-charcoal-800 bg-charcoal-900/50 p-6 backdrop-blur-sm"
+            >
+              <h3 className="mb-4 text-lg font-medium text-white">Budget Status</h3>
+              <div className="space-y-4">
+                {usageData.budgets.map((budget, index) => (
+                  <div key={index}>
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-charcoal-400">{budget.name}</span>
+                      <span className={`font-medium ${
+                        budget.status === "exceeded" ? "text-red-500" :
+                        budget.status === "warning" ? "text-yellow-500" :
+                        "text-green-500"
+                      }`}>
+                        {formatCurrency(budget.spent)} / {formatCurrency(budget.limit)}
+                      </span>
+                    </div>
+                    <div className="mt-2 h-2 overflow-hidden rounded-full bg-charcoal-800">
+                      <motion.div
+                        initial={{ width: 0 }}
+                        animate={{ width: `${Math.min(budget.percentage, 100)}%` }}
+                        transition={{ duration: 0.5, ease: "easeOut" }}
+                        className={`h-full ${
+                          budget.status === "exceeded" ? "bg-red-500" :
+                          budget.status === "warning" ? "bg-yellow-500" :
+                          "bg-green-500"
+                        }`}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </motion.div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}