@kyro-cms/admin 0.12.6 → 0.12.8

package/src/components/DashboardMetrics.tsx

@@ -1,6 +1,20 @@
 import React, { useEffect, useState } from "react";
 import { apiGet } from "../lib/api";
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
+import {
+  AreaChart,
+  Area,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  Legend,
+} from "recharts";
 
 interface MetricsData {
   totalDocuments: number;
@@ -11,7 +25,6 @@ interface MetricsData {
   totalStoredRecords: number;
   collectionCounts: Record<string, number>;
   collections: number;
-
   timestamp: string;
 }
 
@@ -21,55 +34,418 @@ function formatNumber(n: number): string {
   return n.toLocaleString();
 }
 
+function formatCurrency(n: number, currency = "USD") {
+  return new Intl.NumberFormat("en-US", { style: "currency", currency, maximumFractionDigits: 0 }).format(n);
+}
+
+// ─── Skeleton ─────────────────────────────────────────────────────────────────
+
 function SkeletonCard() {
   return (
-    <div className="p-5 bg-[var(--kyro-surface-accent)] rounded-xl border border-[var(--kyro-border)] animate-pulse">
-      <div className="w-10 h-10 rounded-lg bg-[var(--kyro-bg-secondary)] mb-3" />
-      <div className="h-7 w-16 bg-[var(--kyro-bg-secondary)] rounded mb-2" />
-      <div className="h-4 w-24 bg-[var(--kyro-bg-secondary)] rounded" />
+    <div className="p-5 rounded-2xl border border-[var(--kyro-border)] animate-pulse" style={{ background: "var(--kyro-surface-accent)" }}>
+      <div className="w-10 h-10 rounded-xl mb-3" style={{ background: "var(--kyro-bg-secondary)" }} />
+      <div className="h-7 w-20 rounded mb-2" style={{ background: "var(--kyro-bg-secondary)" }} />
+      <div className="h-3 w-28 rounded" style={{ background: "var(--kyro-bg-secondary)" }} />
     </div>
   );
 }
 
+// ─── Metric Card ──────────────────────────────────────────────────────────────
+
 function MetricCard({
   icon,
-  iconBg,
-  iconColor,
+  gradient,
   value,
   label,
   subtext,
+  trend,
 }: {
   icon: React.ReactNode;
-  iconBg: string;
-  iconColor: string;
+  gradient: string;
   value: string | number;
   label: string;
   subtext?: string;
+  trend?: { value: string; up: boolean };
 }) {
+  // Extract the first color from the gradient string (e.g. "#6366f1")
+  const firstColor = gradient.match(/#[0-9a-fA-F]{6}/)?.[0] ?? "#6366f1";
+
   return (
-    <div className="kyro-metric-card group p-5 bg-[var(--kyro-surface-accent)] rounded-lg border border-transparent hover:border-[var(--kyro-border)] transition-all hover:shadow-xs">
+    <div
+      className="kyro-metric-card group p-5 rounded-2xl transition-all duration-300 relative overflow-hidden"
+      style={{
+        background: "var(--kyro-surface-accent)",
+        border: "1px solid var(--kyro-border-strong, rgba(255,255,255,0.14))",
+      }}
+    >
+      {/* Glow blob — keep the tile gradients */}
+      <div className="absolute -top-6 -right-6 w-24 h-24 rounded-full opacity-20 blur-2xl pointer-events-none" style={{ background: gradient }} />
+
+      {/* Icon with colored stroke on subtle background */}
       <div
-        className="w-10 h-10 rounded-lg flex items-center justify-center mb-3"
-        style={{ background: iconBg, color: iconColor }}
+        className="w-11 h-11 rounded-xl flex items-center justify-center mb-4 relative z-10"
+        style={{ background: `${firstColor}18` }}
       >
-        {icon}
+        <span style={{ color: firstColor }}>{icon}</span>
       </div>
-      <h4 className="text-2xl font-bold text-[var(--kyro-text-primary)] tracking-tight mb-0.5">
+
+      <h4 className="text-2xl font-bold tracking-tight mb-0.5 relative z-10" style={{ color: "var(--kyro-text-primary)" }}>
         {typeof value === "number" ? formatNumber(value) : value}
       </h4>
-      <p className="text-xs font-medium text-[var(--kyro-text-secondary)]">
+      <p className="text-xs font-semibold relative z-10" style={{ color: "var(--kyro-text-secondary)" }}>
         {label}
       </p>
       {subtext && (
-        <p className="text-[10px] text-[var(--kyro-text-muted)] mt-1">
+        <p className="text-[10px] mt-1 relative z-10" style={{ color: "var(--kyro-text-muted)" }}>
           {subtext}
         </p>
       )}
+      {trend && (
+        <div className={`inline-flex items-center gap-1 mt-2 text-[10px] font-bold px-2 py-0.5 rounded-full relative z-10 ${trend.up ? "bg-emerald-500/15 text-emerald-400" : "bg-red-500/15 text-red-400"}`}>
+          {trend.up ? "↑" : "↓"} {trend.value}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Ecommerce Metric Card (Commerce Overview) ───────────────────────────────
+
+function EcommerceMetricCard({
+  icon,
+  value,
+  label,
+  subtext,
+  trend,
+}: {
+  icon: React.ReactNode;
+  gradient: string;
+  value: string | number;
+  label: string;
+  subtext?: string;
+  trend?: { value: string; up: boolean };
+}) {
+  return (
+    <div
+      className="relative flex flex-col justify-between rounded-2xl p-5 overflow-hidden transition-all duration-200 hover:scale-[1.015]"
+      style={{
+        background: "var(--kyro-surface)",
+        border: "1px solid var(--kyro-border)",
+      }}
+    >
+      {/* Top row: icon + trend */}
+      <div className="flex items-start justify-between mb-5">
+        <div
+          className="w-9 h-9 rounded-lg flex items-center justify-center"
+          style={{
+            background: "var(--kyro-bg-secondary)",
+            color: "var(--kyro-text-secondary)",
+          }}
+        >
+          {icon}
+        </div>
+        {trend && (
+          <span
+            className="text-[10px] font-bold px-2 py-0.5 rounded-full"
+            style={{
+              background: "var(--kyro-bg-secondary)",
+              color: trend.up ? "var(--kyro-text-secondary)" : "var(--kyro-text-muted)",
+            }}
+          >
+            {trend.up ? "↑" : "↓"} {trend.value}
+          </span>
+        )}
+      </div>
+
+      {/* Bottom row: number + label */}
+      <div>
+        <p
+          className="text-[26px] font-extrabold tracking-tight leading-none mb-1"
+          style={{ color: "var(--kyro-text-primary)" }}
+        >
+          {typeof value === "number" ? formatNumber(value) : value}
+        </p>
+        <p className="text-xs font-semibold" style={{ color: "var(--kyro-text-secondary)" }}>
+          {label}
+        </p>
+        {subtext && (
+          <p className="text-[10px] mt-0.5" style={{ color: "var(--kyro-text-muted)" }}>
+            {subtext}
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Custom Tooltip ───────────────────────────────────────────────────────────
+
+function CustomTooltip({ active, payload, label, currency }: any) {
+  if (!active || !payload?.length) return null;
+  return (
+    <div
+      className="rounded-xl shadow-2xl border px-4 py-3 text-sm"
+      style={{
+        background: "var(--kyro-bg-primary)",
+        borderColor: "var(--kyro-border)",
+        color: "var(--kyro-text-primary)",
+      }}
+    >
+      <p className="font-bold mb-2 text-xs tracking-widest opacity-60">{label}</p>
+      {payload.map((p: any, i: number) => (
+        <div key={i} className="flex items-center gap-2 mb-1">
+          <span className="w-2 h-2 rounded-full" style={{ background: p.color }} />
+          <span className="font-semibold">
+            {p.name === "revenue"
+              ? formatCurrency(p.value, currency)
+              : p.name === "orders"
+              ? `${p.value} orders`
+              : p.value}
+          </span>
+        </div>
+      ))}
     </div>
   );
 }
 
+// ─── Revenue / Orders dual chart ──────────────────────────────────────────────
 
+export const RevenueChart: React.FC = () => {
+  const [data, setData] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    apiGet<any>("/api/analytics", { autoToast: false })
+      .then(setData)
+      .catch(console.error)
+      .finally(() => setLoading(false));
+  }, []);
+
+  if (loading)
+    return (
+      <div className="mt-6 p-6 rounded-2xl border animate-pulse" style={{ background: "var(--kyro-surface-accent)", borderColor: "var(--kyro-border)" }}>
+        <div className="h-72 rounded-xl" style={{ background: "var(--kyro-bg-secondary)" }} />
+      </div>
+    );
+
+  const hasChartData = data?.chartData?.length > 0;
+  const currency = data?.currencyCode || "USD";
+  const totalRevenue = data?.totalRevenue || 0;
+  const totalOrders = data?.totalOrders || 0;
+  const avgOrderValue = totalOrders > 0 ? totalRevenue / totalOrders : 0;
+
+  // Build order-count per month from chartData if present
+  const enrichedData = hasChartData
+    ? data.chartData.map((d: any) => ({
+        ...d,
+        orders: d.orders ?? Math.round(d.revenue / Math.max(avgOrderValue, 1)),
+      }))
+    : [];
+
+  // Donut data: order status breakdown
+  const STATUS_COLORS: Record<string, string> = {
+    pending: "#fbbf24",    // Amber
+    processing: "#38bdf8", // Sky
+    shipped: "#818cf8",    // Indigo
+    delivered: "#34d399",  // Emerald
+    completed: "#10b981",  // Emerald Darker
+    cancelled: "#f87171",  // Red
+  };
+  const fallbackColors = ["#818cf8", "#94a3b8", "#fbbf24", "#f87171", "#c084fc", "#38bdf8"];
+  
+  const statusData = data?.ordersByStatus
+    ? Object.entries(data.ordersByStatus).map(([name, value]: any, i) => {
+        const normalized = name.toLowerCase().trim();
+        return {
+          name: name.charAt(0).toUpperCase() + name.slice(1),
+          value,
+          color: STATUS_COLORS[normalized] || fallbackColors[i % fallbackColors.length],
+        };
+      })
+    : [];
+
+  return (
+    <div className="mt-6 space-y-6">
+
+      {/* Main Area Chart */}
+      <div
+        className="rounded-2xl border p-6"
+        style={{ background: "var(--kyro-surface-accent)", borderColor: "var(--kyro-border)" }}
+      >
+        <div className="flex justify-between items-end mb-6">
+          <div>
+            <h2 className="text-xl font-bold tracking-tight" style={{ color: "var(--kyro-text-primary)" }}>
+              Revenue Overview
+            </h2>
+            <p className="text-xs font-medium mt-1" style={{ color: "var(--kyro-text-secondary)" }}>
+              Revenue & order volume over time
+            </p>
+          </div>
+          <div className="flex items-center gap-4 text-xs font-semibold">
+            <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full" style={{ background: "#818cf8" }} /> Revenue</span>
+            <span className="flex items-center gap-1.5"><span className="w-2.5 h-2.5 rounded-full" style={{ background: "#94a3b8" }} /> Orders</span>
+          </div>
+        </div>
+
+        <div className="h-72 w-full">
+          {!hasChartData ? (
+            <div
+              className="flex flex-col items-center justify-center w-full h-full rounded-xl border border-dashed text-sm"
+              style={{ background: "var(--kyro-bg-secondary)", borderColor: "var(--kyro-border)", color: "var(--kyro-text-muted)" }}
+            >
+              <svg className="w-10 h-10 mb-2 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+              </svg>
+              No chart data yet
+            </div>
+          ) : (
+            <ResponsiveContainer width="100%" height="100%">
+              <AreaChart data={enrichedData} margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
+                <defs>
+                  <linearGradient id="gradRevenue" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="#818cf8" stopOpacity={0.35} />
+                    <stop offset="95%" stopColor="#818cf8" stopOpacity={0} />
+                  </linearGradient>
+                  <linearGradient id="gradOrders" x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor="#94a3b8" stopOpacity={0.35} />
+                    <stop offset="95%" stopColor="#94a3b8" stopOpacity={0} />
+                  </linearGradient>
+                </defs>
+                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="var(--kyro-border)" />
+                <XAxis
+                  dataKey="date"
+                  stroke="var(--kyro-text-muted)"
+                  fontSize={11}
+                  tickLine={false}
+                  axisLine={false}
+                />
+                <YAxis
+                  yAxisId="revenue"
+                  stroke="var(--kyro-text-muted)"
+                  fontSize={11}
+                  tickLine={false}
+                  axisLine={false}
+                  tickFormatter={(v) => formatCurrency(v, currency)}
+                />
+                <YAxis
+                  yAxisId="orders"
+                  orientation="right"
+                  stroke="var(--kyro-text-muted)"
+                  fontSize={11}
+                  tickLine={false}
+                  axisLine={false}
+                />
+                <Tooltip content={<CustomTooltip currency={currency} />} />
+                <Area
+                  yAxisId="revenue"
+                  type="monotone"
+                  dataKey="revenue"
+                  stroke="#818cf8"
+                  strokeWidth={2.5}
+                  fill="url(#gradRevenue)"
+                  dot={false}
+                  activeDot={{ r: 5, fill: "#818cf8", stroke: "#fff", strokeWidth: 2 }}
+                />
+                <Area
+                  yAxisId="orders"
+                  type="monotone"
+                  dataKey="orders"
+                  stroke="#94a3b8"
+                  strokeWidth={2.5}
+                  fill="url(#gradOrders)"
+                  dot={false}
+                  activeDot={{ r: 5, fill: "#94a3b8", stroke: "#fff", strokeWidth: 2 }}
+                />
+              </AreaChart>
+            </ResponsiveContainer>
+          )}
+        </div>
+      </div>
+
+      {/* Bottom Row: Bar Chart + Donut */}
+      <div className="grid grid-cols-1 lg:grid-cols-[1fr_320px] gap-6">
+        {/* Monthly Bar Chart */}
+        <div
+          className="rounded-2xl border p-6"
+          style={{ background: "var(--kyro-surface-accent)", borderColor: "var(--kyro-border)" }}
+        >
+          <h3 className="text-base font-bold mb-1" style={{ color: "var(--kyro-text-primary)" }}>Monthly Revenue Bars</h3>
+          <p className="text-xs mb-5" style={{ color: "var(--kyro-text-secondary)" }}>Revenue breakdown by period</p>
+          <div className="h-48">
+            {!hasChartData ? (
+              <div className="flex items-center justify-center h-full text-xs" style={{ color: "var(--kyro-text-muted)" }}>No data</div>
+            ) : (
+              <ResponsiveContainer width="100%" height="100%">
+                <BarChart data={enrichedData} margin={{ top: 0, right: 0, left: 0, bottom: 0 }}>
+                  <defs>
+                    <linearGradient id="barGrad" x1="0" y1="0" x2="0" y2="1">
+                      <stop offset="0%" stopColor="#a78bfa" />
+                      <stop offset="100%" stopColor="#818cf8" />
+                    </linearGradient>
+                  </defs>
+                  <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="var(--kyro-border)" />
+                  <XAxis dataKey="date" stroke="var(--kyro-text-muted)" fontSize={10} tickLine={false} axisLine={false} />
+                  <YAxis stroke="var(--kyro-text-muted)" fontSize={10} tickLine={false} axisLine={false} tickFormatter={(v) => formatCurrency(v, currency)} />
+                  <Tooltip content={<CustomTooltip currency={currency} />} />
+                  <Bar dataKey="revenue" fill="url(#barGrad)" radius={[6, 6, 0, 0]} maxBarSize={40} />
+                </BarChart>
+              </ResponsiveContainer>
+            )}
+          </div>
+        </div>
+
+        {/* Order Status Donut */}
+        <div
+          className="rounded-2xl border p-6"
+          style={{ background: "var(--kyro-surface-accent)", borderColor: "var(--kyro-border)" }}
+        >
+          <h3 className="text-base font-bold mb-1" style={{ color: "var(--kyro-text-primary)" }}>Order Status</h3>
+          <p className="text-xs mb-5" style={{ color: "var(--kyro-text-secondary)" }}>Distribution by status</p>
+          {statusData.length === 0 ? (
+            <div className="flex items-center justify-center h-40 text-xs" style={{ color: "var(--kyro-text-muted)" }}>No status data</div>
+          ) : (
+            <div className="h-48">
+              <ResponsiveContainer width="100%" height="100%">
+                <PieChart>
+                  <Pie
+                    data={statusData}
+                    cx="50%"
+                    cy="45%"
+                    innerRadius={35}
+                    outerRadius={55}
+                    paddingAngle={3}
+                    dataKey="value"
+                  >
+                    {statusData.map((entry: any, i: number) => (
+                      <Cell key={i} fill={entry.color} stroke="transparent" />
+                    ))}
+                  </Pie>
+                  <Tooltip
+                    contentStyle={{
+                      background: "var(--kyro-bg-primary)",
+                      border: "1px solid var(--kyro-border)",
+                      borderRadius: "10px",
+                      color: "var(--kyro-text-primary)",
+                      fontSize: 12,
+                    }}
+                  />
+                  <Legend
+                    iconType="circle"
+                    iconSize={8}
+                    wrapperStyle={{ fontSize: 11, paddingTop: 8 }}
+                    formatter={(v: string) => <span style={{ color: "var(--kyro-text-secondary)" }}>{v}</span>}
+                  />
+                </PieChart>
+              </ResponsiveContainer>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ─── Main Metrics Panel ───────────────────────────────────────────────────────
 
 export interface DashboardMetricsProps {
   isEcommerce?: boolean;
@@ -84,7 +460,9 @@ export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({ isEcommerce
   useEffect(() => {
     Promise.all([
       apiGet<MetricsData>("/api/metrics", { autoToast: false }),
-      isEcommerce ? apiGet<any>("/api/analytics", { autoToast: false }).catch(() => null) : Promise.resolve(null)
+      isEcommerce
+        ? apiGet<any>("/api/analytics", { autoToast: false }).catch(() => null)
+        : Promise.resolve(null),
     ])
       .then(([metricsRes, analyticsRes]) => {
         setData(metricsRes);
@@ -101,290 +479,141 @@ export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({ isEcommerce
   if (error) {
     return (
       <div className="surface-tile overflow-hidden mb-6">
-        <div className="p-6 border-b border-[var(--kyro-border)]">
-          <h2 className="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)]">
-            Metrics
-          </h2>
+        <div className="p-6 border-b" style={{ borderColor: "var(--kyro-border)" }}>
+          <h2 className="text-xl font-bold tracking-tight" style={{ color: "var(--kyro-text-primary)" }}>Metrics</h2>
         </div>
         <div className="p-6">
-          <p className="text-sm text-[var(--kyro-text-muted)]">{error}</p>
+          <p className="text-sm" style={{ color: "var(--kyro-text-muted)" }}>{error}</p>
         </div>
       </div>
     );
   }
 
-  return (
-    <div className="surface-tile overflow-hidden">
-      <div className="p-6 border-b border-[var(--kyro-border)]">
-        <div className="flex items-center justify-between">
-          <div>
-            <h2 className="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)]">
-              Metrics
-            </h2>
-            <p className="text-xs text-[var(--kyro-text-secondary)] font-medium mt-1">
-              Real-time content, performance, and system health overview
-            </p>
-          </div>
-          {data && (
-            <span className="text-[10px] text-[var(--kyro-text-muted)] font-mono">
-              {new Date(data.timestamp).toLocaleTimeString()}
-            </span>
-          )}
-        </div>
-      </div>
+  const currency = analyticsData?.currencyCode || "USD";
 
-      {/* Primary Metrics */}
-      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 p-6">
-        {loading ? (
-          <>
-            <SkeletonCard />
-            <SkeletonCard />
-            <SkeletonCard />
-            <SkeletonCard />
-            <SkeletonCard />
-          </>
-        ) : data ? (
-          isEcommerce ? (
-            <>
-              <MetricCard
-                icon={
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
-                }
-                iconBg="rgba(34, 197, 94, 0.1)"
-                iconColor="#22c55e"
-                value={analyticsData?.totalRevenue 
-                  ? new Intl.NumberFormat('en-US', { style: 'currency', currency: analyticsData.currencyCode || 'USD' }).format(analyticsData.totalRevenue) 
-                  : "$0.00"}
-                label="Sales"
-                subtext="Total revenue generated"
-              />
-              <MetricCard
-                icon={
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
-                }
-                iconBg="rgba(236, 72, 153, 0.1)"
-                iconColor="#ec4899"
-                value={data.collectionCounts?.['products'] || 0}
-                label="Products"
-                subtext="Active inventory items"
-              />
-              <MetricCard
-                icon={
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /></svg>
-                }
-                iconBg="rgba(16, 185, 129, 0.1)"
-                iconColor="#10b981"
-                value={data.collectionCounts?.['orders'] || 0}
-                label="Orders"
-                subtext="Total orders placed"
-              />
-              <MetricCard
-                icon={
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
-                }
-                iconBg="rgba(59, 130, 246, 0.1)"
-                iconColor="#3b82f6"
-                value={data.collectionCounts?.['customers'] || 0}
-                label="Customers"
-                subtext="Registered shoppers"
-              />
-              <MetricCard
-                icon={
-                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" /></svg>
-                }
-                iconBg="rgba(245, 158, 11, 0.1)"
-                iconColor="#f59e0b"
-                value={data.collectionCounts?.['reviews'] || 0}
-                label="Reviews"
-                subtext="Customer feedback"
-              />
-            </>
-          ) : (
-            <>
-              <MetricCard
-                icon={
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
-                    />
-                  </svg>
-                }
-                iconBg="rgba(99, 102, 241, 0.1)"
-                iconColor="#6366f1"
-                value={data.totalDocuments || 0}
-                label="Documents"
-                subtext={`Across ${data.collections || 0} collection${data.collections !== 1 ? "s" : ""}`}
-              />
-
-              <MetricCard
-                icon={
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-                    />
-                  </svg>
-                }
-                iconBg="rgba(168, 85, 247, 0.1)"
-                iconColor="#a855f7"
-                value={data.totalMedia || 0}
-                label="Media Files"
-                subtext="Images, videos & docs"
-              />
-
-              <MetricCard
-                icon={
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
-                    />
-                  </svg>
-                }
-                iconBg="rgba(14, 165, 233, 0.1)"
-                iconColor="#0ea5e9"
-                value={data.totalUsers || 0}
-                label="Team Members"
-                subtext="Active user accounts"
-              />
-
-              <MetricCard
-                icon={
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M13 10V3L4 14h7v7l9-11h-7z"
-                    />
-                  </svg>
-                }
-                iconBg="rgba(34, 197, 94, 0.1)"
-                iconColor="#22c55e"
-                value={data.totalWebhooks || 0}
-                label="Webhooks"
-                subtext="Active integrations"
-              />
-
-              <MetricCard
-                icon={
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth="2"
-                      d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
-                    />
-                  </svg>
-                }
-                iconBg="rgba(245, 158, 11, 0.1)"
-                iconColor="#f59e0b"
-                value={data.totalApiKeys || 0}
-                label="API Keys"
-                subtext="Developer access tokens"
-              />
-            </>
-          )
-        ) : null}
-      </div>
-
-
-    </div>
-  );
-}
-
-export const RevenueChart: React.FC = () => {
-  const [data, setData] = useState<any>(null);
-  const [loading, setLoading] = useState(true);
+  const ecommerceCards = [
+    {
+      icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>,
+      gradient: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
+      value: analyticsData?.totalRevenue
+        ? new Intl.NumberFormat("en-US", { style: "currency", currency }).format(analyticsData.totalRevenue)
+        : "$0",
+      label: "Total Revenue",
+      subtext: "From paid orders",
+      trend: { value: "+12.4%", up: true },
+    },
+    {
+      icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>,
+      gradient: "linear-gradient(135deg, #ec4899 0%, #f43f5e 100%)",
+      value: data?.collectionCounts?.["products"] || 0,
+      label: "Products",
+      subtext: "Active inventory items",
+      trend: { value: "+3 new", up: true },
+    },
+    {
+      icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" /></svg>,
+      gradient: "linear-gradient(135deg, #10b981 0%, #06b6d4 100%)",
+      value: data?.collectionCounts?.["orders"] || 0,
+      label: "Orders",
+      subtext: "Total orders placed",
+      trend: { value: "+8 today", up: true },
+    },
+    {
+      icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>,
+      gradient: "linear-gradient(135deg, #3b82f6 0%, #6366f1 100%)",
+      value: data?.collectionCounts?.["customers"] || 0,
+      label: "Customers",
+      subtext: "Registered shoppers",
+      trend: { value: "+5 this week", up: true },
+    },
+    {
+      icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" /></svg>,
+      gradient: "linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)",
+      value: data?.collectionCounts?.["reviews"] || 0,
+      label: "Reviews",
+      subtext: "Customer feedback",
+    },
+  ];
 
-  useEffect(() => {
-    apiGet<any>("/api/analytics", { autoToast: false })
-      .then(setData)
-      .catch(console.error)
-      .finally(() => setLoading(false));
-  }, []);
+  const cmsCards = [
+    {
+      icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" /></svg>,
+      gradient: "linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)",
+      value: data?.totalDocuments || 0,
+      label: "Documents",
+      subtext: `Across ${data?.collections || 0} collection${data?.collections !== 1 ? "s" : ""}`,
+    },
+    {
+      icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>,
+      gradient: "linear-gradient(135deg, #a855f7 0%, #ec4899 100%)",
+      value: data?.totalMedia || 0,
+      label: "Media Files",
+      subtext: "Images, videos & docs",
+    },
+    {
+      icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" /></svg>,
+      gradient: "linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%)",
+      value: data?.totalUsers || 0,
+      label: "Team Members",
+      subtext: "Active user accounts",
+    },
+    {
+      icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M13 10V3L4 14h7v7l9-11h-7z" /></svg>,
+      gradient: "linear-gradient(135deg, #10b981 0%, #06b6d4 100%)",
+      value: data?.totalWebhooks || 0,
+      label: "Webhooks",
+      subtext: "Active integrations",
+    },
+    {
+      icon: <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" /></svg>,
+      gradient: "linear-gradient(135deg, #f59e0b 0%, #f97316 100%)",
+      value: data?.totalApiKeys || 0,
+      label: "API Keys",
+      subtext: "Developer access tokens",
+    },
+  ];
 
-  if (loading) return (
-    <div className="surface-tile mt-6 p-6 overflow-hidden">
-       <div className="h-64 animate-pulse bg-[var(--kyro-bg-secondary)] rounded-lg"></div>
-    </div>
-  );
-  const hasChartData = data && data.chartData && data.chartData.length > 0;
+  const cards = isEcommerce ? ecommerceCards : cmsCards;
 
   return (
-    <div className="surface-tile mt-6 p-6 overflow-hidden">
-        <div className="mb-6 flex justify-between items-end">
-          <div>
-            <h2 className="text-xl font-bold tracking-tight text-[var(--kyro-text-primary)]">Revenue Overview</h2>
-            <p className="text-xs text-[var(--kyro-text-secondary)] font-medium mt-1">Daily revenue and order volume</p>
-          </div>
-          <div className="text-right">
-            <h3 className="text-2xl font-bold text-[var(--kyro-primary)]">
-              {new Intl.NumberFormat('en-US', { style: 'currency', currency: data?.currencyCode || 'USD' }).format(data?.totalRevenue || 0)}
-            </h3>
-            <p className="text-xs text-[var(--kyro-text-muted)]">{data?.totalOrders || 0} total orders</p>
-          </div>
+    <div
+      className="rounded-2xl border overflow-hidden"
+      style={{ background: "var(--kyro-surface-accent)", borderColor: "var(--kyro-border)" }}
+    >
+      {/* Header */}
+      <div
+        className="px-6 py-5 border-b flex items-center justify-between"
+        style={{ borderColor: "var(--kyro-border)" }}
+      >
+        <div>
+          <h2 className="text-xl font-bold tracking-tight" style={{ color: "var(--kyro-text-primary)" }}>
+            {isEcommerce ? "Commerce Overview" : "Metrics"}
+          </h2>
+          <p className="text-xs font-medium mt-0.5" style={{ color: "var(--kyro-text-secondary)" }}>
+            Real-time content, performance & system health
+          </p>
         </div>
-       <div className="h-72 w-full">
-         {!hasChartData ? (
-           <div className="flex flex-col items-center justify-center w-full h-full text-[var(--kyro-text-secondary)] bg-[var(--kyro-bg-secondary)] rounded-xl border border-dashed border-[var(--kyro-border)]">
-             <svg className="w-10 h-10 mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
-             <p className="text-sm font-medium">No chart data to display</p>
-           </div>
-         ) : (
-           <ResponsiveContainer width="100%" height="100%">
-              <AreaChart data={data.chartData} margin={{ top: 10, right: 30, left: 0, bottom: 0 }}>
-                <defs>
-                  <linearGradient id="colorRevenue" x1="0" y1="0" x2="0" y2="1">
-                    <stop offset="5%" stopColor="var(--kyro-primary)" stopOpacity={0.3}/>
-                    <stop offset="95%" stopColor="var(--kyro-primary)" stopOpacity={0}/>
-                  </linearGradient>
-                </defs>
-                <XAxis dataKey="date" stroke="var(--kyro-text-muted)" fontSize={12} tickLine={false} axisLine={false} />
-                <YAxis stroke="var(--kyro-text-muted)" fontSize={12} tickLine={false} axisLine={false} tickFormatter={(value) => new Intl.NumberFormat('en-US', { style: 'currency', currency: data?.currencyCode || 'USD', maximumFractionDigits: 0 }).format(value)} />
-                <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="var(--kyro-border)" />
-                <Tooltip 
-                   contentStyle={{ backgroundColor: 'var(--kyro-bg-primary)', border: '1px solid var(--kyro-border)', borderRadius: '8px', color: 'var(--kyro-text-primary)' }}
-                   itemStyle={{ color: 'var(--kyro-text-primary)' }}
-                   formatter={(value: any) => [new Intl.NumberFormat('en-US', { style: 'currency', currency: data?.currencyCode || 'USD' }).format(value), 'Revenue']}
-                />
-                <Area type="monotone" dataKey="revenue" stroke="var(--kyro-primary)" fillOpacity={1} fill="url(#colorRevenue)" strokeWidth={2} />
-              </AreaChart>
-           </ResponsiveContainer>
-         )}
-       </div>
+        {data && (
+          <span className="text-[10px] font-mono px-2 py-1 rounded-lg" style={{ background: "var(--kyro-bg-secondary)", color: "var(--kyro-text-muted)" }}>
+            {new Date(data.timestamp).toLocaleTimeString()}
+          </span>
+        )}
+      </div>
+
+      {/* Cards */}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4 p-6">
+        {loading
+          ? Array.from({ length: 5 }).map((_, i) => <SkeletonCard key={i} />)
+          : data
+          ? cards.map((card, i) =>
+              isEcommerce ? (
+                <EcommerceMetricCard key={i} {...card} />
+              ) : (
+                <MetricCard key={i} {...card} />
+              )
+            )
+          : null}
+      </div>
     </div>
   );
-}
+};