@kyro-cms/admin 0.12.3 → 0.12.5

package/src/components/DashboardMetrics.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { apiGet } from "../lib/api";
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
 
 interface MetricsData {
   totalDocuments: number;
@@ -70,15 +71,24 @@ function MetricCard({
 
 
 
-export function DashboardMetrics() {
+export interface DashboardMetricsProps {
+  isEcommerce?: boolean;
+}
+
+export const DashboardMetrics: React.FC<DashboardMetricsProps> = ({ isEcommerce }) => {
   const [data, setData] = useState<MetricsData | null>(null);
+  const [analyticsData, setAnalyticsData] = useState<any>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    apiGet<MetricsData>("/api/metrics", { autoToast: false })
-      .then((res) => {
-        setData(res);
+    Promise.all([
+      apiGet<MetricsData>("/api/metrics", { autoToast: false }),
+      isEcommerce ? apiGet<any>("/api/analytics", { autoToast: false }).catch(() => null) : Promise.resolve(null)
+    ])
+      .then(([metricsRes, analyticsRes]) => {
+        setData(metricsRes);
+        if (analyticsRes) setAnalyticsData(analyticsRes);
         setError(null);
       })
       .catch((err) => {
@@ -86,14 +96,14 @@ export function DashboardMetrics() {
         setError("Unable to load metrics");
       })
       .finally(() => setLoading(false));
-  }, []);
+  }, [isEcommerce]);
 
   if (error) {
     return (
-      <div className="surface-tile overflow-hidden">
+      <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)]">
-            CMS Metrics
+            Metrics
           </h2>
         </div>
         <div className="p-6">
@@ -108,21 +118,8 @@ export function DashboardMetrics() {
       <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)] flex items-center gap-2">
-              <svg
-                className="w-5 h-5 text-[var(--kyro-primary)]"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  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>
-              CMS Metrics
+            <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
@@ -147,31 +144,86 @@ export function DashboardMetrics() {
             <SkeletonCard />
           </>
         ) : data ? (
-          <>
-            <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}
-              label="Documents"
-              subtext={`Across ${data.collections} collection${data.collections !== 1 ? "s" : ""}`}
-            />
+          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" : ""}`}
+              />
 
-            {data.totalMedia !== undefined && (
               <MetricCard
                 icon={
                   <svg
@@ -190,13 +242,11 @@ export function DashboardMetrics() {
                 }
                 iconBg="rgba(168, 85, 247, 0.1)"
                 iconColor="#a855f7"
-                value={data.totalMedia}
+                value={data.totalMedia || 0}
                 label="Media Files"
                 subtext="Images, videos & docs"
               />
-            )}
 
-            {data.totalUsers !== undefined && (
               <MetricCard
                 icon={
                   <svg
@@ -215,13 +265,11 @@ export function DashboardMetrics() {
                 }
                 iconBg="rgba(14, 165, 233, 0.1)"
                 iconColor="#0ea5e9"
-                value={data.totalUsers}
+                value={data.totalUsers || 0}
                 label="Team Members"
                 subtext="Active user accounts"
               />
-            )}
 
-            {data.totalWebhooks !== undefined && (
               <MetricCard
                 icon={
                   <svg
@@ -240,13 +288,11 @@ export function DashboardMetrics() {
                 }
                 iconBg="rgba(34, 197, 94, 0.1)"
                 iconColor="#22c55e"
-                value={data.totalWebhooks}
+                value={data.totalWebhooks || 0}
                 label="Webhooks"
                 subtext="Active integrations"
               />
-            )}
 
-            {data.totalApiKeys !== undefined && (
               <MetricCard
                 icon={
                   <svg
@@ -265,12 +311,12 @@ export function DashboardMetrics() {
                 }
                 iconBg="rgba(245, 158, 11, 0.1)"
                 iconColor="#f59e0b"
-                value={data.totalApiKeys}
+                value={data.totalApiKeys || 0}
                 label="API Keys"
                 subtext="Developer access tokens"
               />
-            )}
-          </>
+            </>
+          )
         ) : null}
       </div>
 
@@ -278,3 +324,67 @@ export function DashboardMetrics() {
     </div>
   );
 }
+
+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="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;
+
+  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>
+       <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>
+    </div>
+  );
+}