@cybermem/dashboard 0.5.12 → 0.5.14

package/components/dashboard/metric-card.tsx

@@ -1,23 +1,59 @@
-"use client"
+"use client";
 
-import { Card, CardContent } from "@/components/ui/card"
+import { Card, CardContent } from "@/components/ui/card";
 
 interface MetricCardProps {
-  label: string
-  value: string
+  label: string;
+  value: string;
   // Keep these props for API compatibility but don't use them
-  change?: string
-  trend?: "up" | "down" | "neutral"
-  hasData?: boolean
+  change?: string;
+  trend?: "up" | "down" | "neutral";
+  hasData?: boolean;
+  loading?: boolean;
 }
 
-export default function MetricCard({ label, value }: MetricCardProps) {
+export default function MetricCard({
+  label,
+  value,
+  loading = false,
+  hasData = true,
+}: MetricCardProps) {
+  const isEmpty =
+    !hasData || value === "N/A" || value === "0" || value === "0.0%";
+
+  // Skeleton state
+  if (loading) {
+    return (
+      <Card className="bg-white/5 border-white/10 backdrop-blur-md text-white shadow-lg overflow-hidden relative">
+        <CardContent className="p-6 relative z-10">
+          <div className="h-4 w-24 bg-white/10 rounded animate-pulse mb-3" />
+          <div className="h-10 w-20 bg-white/10 rounded animate-pulse" />
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Empty state
+  if (isEmpty) {
+    return (
+      <Card className="bg-white/5 border-white/10 backdrop-blur-md text-white shadow-lg overflow-hidden relative opacity-60">
+        <CardContent className="p-6 relative z-10">
+          <div className="text-sm font-medium text-slate-500 mb-2">{label}</div>
+          <div className="text-4xl font-bold text-slate-500">
+            {value === "N/A" ? "N/A" : "—"}
+          </div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  // Normal state
   return (
-    <Card className="bg-white/5 border-white/10 backdrop-blur-md text-white shadow-lg overflow-hidden relative">
+    <Card className="bg-white/5 border-white/10 backdrop-blur-md text-white shadow-lg overflow-hidden relative group hover:bg-white/[0.07] transition-colors">
       <CardContent className="p-6 relative z-10">
         <div className="text-sm font-medium text-slate-400 mb-2">{label}</div>
         <div className="text-4xl font-bold text-white">{value}</div>
       </CardContent>
     </Card>
-  )
+  );
 }

package/components/dashboard/metrics-chart.tsx

@@ -1,6 +1,15 @@
-"use client"
+"use client";
 
-import { Area, AreaChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import {
+    Area,
+    AreaChart,
+    CartesianGrid,
+    Legend,
+    ResponsiveContainer,
+    Tooltip,
+    XAxis,
+    YAxis,
+} from "recharts";
 
 // Fallback color generator
 function stringToColor(str: string): string {
@@ -8,127 +17,145 @@ function stringToColor(str: string): string {
   for (let i = 0; i < str.length; i++) {
     hash = str.charCodeAt(i) + ((hash << 5) - hash);
   }
-  let color = '#';
+  let color = "#";
   for (let i = 0; i < 3; i++) {
-    const value = (hash >> (i * 8)) & 0xFF;
-    color += ('00' + value.toString(16)).substr(-2);
+    const value = (hash >> (i * 8)) & 0xff;
+    color += ("00" + value.toString(16)).substr(-2);
   }
   return color;
 }
 
 interface MetricsChartProps {
-    data: any[]
-    isMultiSeries: boolean
-    clientNames: string[]
-    clientConfigs: any[]
-    hovered: string | null
-    setHovered: (id: string | null) => void
+  data: any[];
+  isMultiSeries: boolean;
+  clientNames: string[];
+  clientConfigs: any[];
+  hovered: string | null;
+  setHovered: (id: string | null) => void;
 }
 
 export default function MetricsChart({
-    data,
-    isMultiSeries,
-    clientNames,
-    clientConfigs,
-    hovered,
-    setHovered
+  data,
+  isMultiSeries,
+  clientNames,
+  clientConfigs,
+  hovered,
+  setHovered,
 }: MetricsChartProps) {
-    return (
-        <ResponsiveContainer width="100%" height="100%">
-            <AreaChart data={data} margin={{ top: 10, right: 20, left: 0, bottom: 0 }}>
-            <CartesianGrid strokeDasharray="0" stroke="#2D3135" opacity={0.3} vertical={false} horizontal={true} />
-            <XAxis
-                dataKey="time"
-                stroke="#6B7280"
-                fontSize={11}
-                tickLine={false}
-                axisLine={false}
-                minTickGap={40}
-                tick={{ fill: '#6B7280' }}
-            />
-            <YAxis
-                stroke="#6B7280"
-                fontSize={11}
-                tickLine={false}
-                axisLine={false}
-                tickFormatter={(value) => `${value}`}
-                tick={{ fill: '#6B7280' }}
-                width={40}
-            />
-            <Tooltip
-                contentStyle={{
-                backgroundColor: "rgba(11, 17, 22, 0.8)",
-                border: "1px solid rgba(255, 255, 255, 0.1)",
-                borderRadius: "12px",
-                color: "#fff",
-                backdropFilter: "blur(12px)",
-                boxShadow: "0 4px 20px rgba(0, 0, 0, 0.5)"
-                }}
-                itemStyle={{ color: "#fff", fontSize: "12px", padding: "2px 0" }}
-                labelStyle={{ color: "#9ca3af", marginBottom: "8px", fontSize: "12px", fontWeight: 500 }}
-                cursor={{ stroke: 'rgba(255,255,255,0.2)', strokeWidth: 1 }}
-            />
-            {isMultiSeries && (
-                <Legend
-                verticalAlign="bottom"
-                height={36}
-                iconType="circle"
-                onMouseEnter={(e: any) => {
-                    if (e.dataKey) setHovered(e.dataKey.toString())
-                }}
-                onMouseLeave={() => setHovered(null)}
-                formatter={(value: any, entry: any) => {
-                    // value is usually the name set on the Area, which we set below.
-                    // But if that fails, we fallback to finding config.
-                    return <span className="text-white">{value}</span>
-                }}
-                />
-            )}
-            {isMultiSeries ? (
-                clientNames.map((client, i) => {
-                    // Find matching config using regex
-                    const keyLower = client.toLowerCase()
-                    const config = clientConfigs.find((c: any) => new RegExp(c.match, 'i').test(keyLower))
+  return (
+    <ResponsiveContainer width="100%" height="100%">
+      <AreaChart
+        data={data}
+        margin={{ top: 10, right: 20, left: 0, bottom: 0 }}
+      >
+        <CartesianGrid
+          strokeDasharray="0"
+          stroke="#2D3135"
+          opacity={0.3}
+          vertical={false}
+          horizontal={true}
+        />
+        <XAxis
+          dataKey="time"
+          stroke="#6B7280"
+          fontSize={11}
+          tickLine={false}
+          axisLine={false}
+          minTickGap={40}
+          tick={{ fill: "#6B7280" }}
+        />
+        <YAxis
+          stroke="#6B7280"
+          fontSize={11}
+          tickLine={false}
+          axisLine={false}
+          tickFormatter={(value) => `${value}`}
+          tick={{ fill: "#6B7280" }}
+          width={40}
+        />
+        <Tooltip
+          contentStyle={{
+            backgroundColor: "rgba(11, 17, 22, 0.8)",
+            border: "1px solid rgba(255, 255, 255, 0.1)",
+            borderRadius: "12px",
+            color: "#fff",
+            backdropFilter: "blur(12px)",
+            boxShadow: "0 4px 20px rgba(0, 0, 0, 0.5)",
+          }}
+          itemStyle={{ color: "#fff", fontSize: "12px", padding: "2px 0" }}
+          labelStyle={{
+            color: "#9ca3af",
+            marginBottom: "8px",
+            fontSize: "12px",
+            fontWeight: 500,
+          }}
+          cursor={{ stroke: "rgba(255,255,255,0.2)", strokeWidth: 1 }}
+        />
+        {isMultiSeries && (
+          <Legend
+            verticalAlign="bottom"
+            height={36}
+            iconType="circle"
+            onMouseEnter={(e: any) => {
+              if (e.dataKey) setHovered(e.dataKey.toString());
+            }}
+            onMouseLeave={() => setHovered(null)}
+            formatter={(value: any, entry: any) => {
+              // value is usually the name set on the Area, which we set below.
+              // But if that fails, we fallback to finding config.
+              return <span className="text-white">{value}</span>;
+            }}
+          />
+        )}
+        {isMultiSeries ? (
+          clientNames.map((client, i) => {
+            // Find matching config using regex
+            const keyLower = client.toLowerCase();
+            const config = clientConfigs.find((c: any) =>
+              new RegExp(c.match, "i").test(keyLower),
+            );
 
-                    // Use config if found, otherwise fallback
-                    const name = config?.name || client
-                    const color = config?.color || stringToColor(client)
+            // Use config if found, otherwise fallback
+            const name = config?.name || client;
+            const color = config?.color || stringToColor(client);
 
-                    const isHovered = hovered === client
-                    const isAnyHovered = hovered !== null
+            const isHovered = hovered === client;
+            const isAnyHovered = hovered !== null;
 
-                    return (
-                    <Area
-                        key={client}
-                        type="monotone"
-                        dataKey={client}
-                        name={name}
-                        stroke={color}
-                        strokeWidth={isHovered ? 2.5 : 1.5}
-                        fillOpacity={isHovered ? 0.5 : (isAnyHovered ? 0.1 : 0.2)}
-                        fill={color}
-                        stackId="1"
-                        activeDot={{ r: 4, strokeWidth: 0 }}
-                        dot={false}
-                        onMouseEnter={() => setHovered(client)}
-                        onMouseLeave={() => setHovered(null)}
-                    />
-                    )
-                })
-            ) : (
-                <Area
+            return (
+              <Area
+                key={client}
                 type="monotone"
-                dataKey="value"
-                stroke="#10b981"
-                strokeWidth={1.5}
-                fillOpacity={0.2}
-                fill="#10b981"
-                activeDot={{ r: 3, strokeWidth: 0 }}
+                dataKey={client}
+                stackId="1"
+                isAnimationActive={false}
+                name={name}
+                stroke={color}
+                strokeWidth={isHovered ? 2.5 : 1.5}
+                fillOpacity={isHovered ? 0.6 : isAnyHovered ? 0.1 : 0.4}
+                fill={color}
+                activeDot={{ r: 4, strokeWidth: 0 }}
                 dot={false}
-                // No hover effect needed for single series as there's nothing to distinguish from
-                />
-            )}
-            </AreaChart>
-        </ResponsiveContainer>
-    )
+                onMouseEnter={() => setHovered(client)}
+                onMouseLeave={() => setHovered(null)}
+              />
+            );
+          })
+        ) : (
+          <Area
+            type="monotone"
+            dataKey="value"
+            stroke="#10b981"
+            strokeWidth={1.5}
+            fillOpacity={0.2}
+            fill="#10b981"
+            isAnimationActive={false}
+            activeDot={{ r: 3, strokeWidth: 0 }}
+            dot={false}
+            // No hover effect needed for single series as there's nothing to distinguish from
+          />
+        )}
+      </AreaChart>
+    </ResponsiveContainer>
+  );
 }

package/components/dashboard/metrics-grid.tsx

@@ -1,51 +1,102 @@
-"use client"
+"use client";
 
-import { Card, CardContent } from "@/components/ui/card"
-import MetricCard from "./metric-card"
+import { Card, CardContent } from "@/components/ui/card";
+import MetricCard from "./metric-card";
 
 // Types
 interface TrendState {
-  change: string
-  trend: "up" | "down" | "neutral"
-  hasData: boolean
+  change: string;
+  trend: "up" | "down" | "neutral";
+  hasData: boolean;
 }
 
 interface MetricsGridProps {
   stats: {
-    memoryRecords: number
-    totalClients: number
-    successRate: number
-    totalRequests: number
-    topWriter: { name: string; count: number }
-    topReader: { name: string; count: number }
-    lastWriter: { name: string; timestamp: number }
-    lastReader: { name: string; timestamp: number }
-  }
+    memoryRecords: number;
+    totalClients: number;
+    successRate: number;
+    totalRequests: number;
+    topWriter: { name: string; count: number };
+    topReader: { name: string; count: number };
+    lastWriter: { name: string; timestamp: number };
+    lastReader: { name: string; timestamp: number };
+  };
   trends: {
-    memory: TrendState
-    clients: TrendState
-    success: TrendState
-    requests: TrendState
-  }
+    memory: TrendState;
+    clients: TrendState;
+    success: TrendState;
+    requests: TrendState;
+  };
+  loading?: boolean;
 }
 
+// Client card skeleton component
+function ClientCardSkeleton({ label }: { label: string }) {
+  return (
+    <Card className="bg-white/5 border-white/10 backdrop-blur-md text-white shadow-lg overflow-hidden">
+      <CardContent className="pt-6 pb-6 relative">
+        <div className="text-sm font-medium text-slate-400 mb-2">{label}</div>
+        <div className="h-10 w-32 bg-white/10 rounded animate-pulse mb-2" />
+        <div className="h-5 w-20 bg-white/10 rounded animate-pulse" />
+      </CardContent>
+    </Card>
+  );
+}
+
+// Client card with empty state
+function ClientCard({
+  label,
+  name,
+  subtitle,
+  isEmpty,
+}: {
+  label: string;
+  name: string;
+  subtitle: string;
+  isEmpty: boolean;
+}) {
+  return (
+    <Card
+      className={`bg-white/5 border-white/10 backdrop-blur-md text-white shadow-lg overflow-hidden ${isEmpty ? "opacity-60" : ""}`}
+    >
+      <CardContent className="pt-6 pb-6 relative">
+        <div className="text-sm font-medium text-slate-400 mb-2">{label}</div>
+        <div
+          className={`text-4xl font-bold mb-1 truncate ${isEmpty ? "text-slate-500" : "text-white"}`}
+        >
+          {name}
+        </div>
+        <div
+          className={`text-xl whitespace-nowrap ${isEmpty ? "text-slate-600" : "text-white/80"}`}
+        >
+          {subtitle}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
 
-export default function MetricsGrid({ stats, trends }: MetricsGridProps) {
+export default function MetricsGrid({
+  stats,
+  trends,
+  loading = false,
+}: MetricsGridProps) {
   // Note: Client names are now normalized by backend API, no frontend transformation needed
 
   const formatTimestamp = (timestamp: number) => {
-    if (timestamp <= 0) return "No activity"
-    const date = new Date(timestamp)
-    const now = new Date()
-    const isToday = date.getDate() === now.getDate() &&
-                    date.getMonth() === now.getMonth() &&
-                    date.getFullYear() === now.getFullYear()
+    if (timestamp <= 0) return "No activity";
+    const date = new Date(timestamp);
+    const now = new Date();
+    const isToday =
+      date.getDate() === now.getDate() &&
+      date.getMonth() === now.getMonth() &&
+      date.getFullYear() === now.getFullYear();
 
     if (isToday) {
-      return date.toLocaleTimeString()
+      return date.toLocaleTimeString();
     }
-    return date.toLocaleString()
-  }
+    return date.toLocaleString();
+  };
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
@@ -56,6 +107,7 @@ export default function MetricsGrid({ stats, trends }: MetricsGridProps) {
         change={trends.memory.change}
         trend={trends.memory.trend}
         hasData={trends.memory.hasData}
+        loading={loading}
       />
 
       {/* 2. Total Clients */}
@@ -65,6 +117,7 @@ export default function MetricsGrid({ stats, trends }: MetricsGridProps) {
         change={trends.clients.change}
         trend={trends.clients.trend}
         hasData={trends.clients.hasData}
+        loading={loading}
       />
 
       {/* 3. Success Rate */}
@@ -74,6 +127,7 @@ export default function MetricsGrid({ stats, trends }: MetricsGridProps) {
         change={trends.success.change}
         trend={trends.success.trend} // Trend UP is good (green) for success rate
         hasData={trends.success.hasData}
+        loading={loading}
       />
 
       {/* 4. Total Requests */}
@@ -83,57 +137,68 @@ export default function MetricsGrid({ stats, trends }: MetricsGridProps) {
         change={trends.requests.change}
         trend={trends.requests.trend}
         hasData={trends.requests.hasData}
+        loading={loading}
       />
 
       {/* 5. Top Writer */}
-      <Card className="bg-white/5 border-white/10 backdrop-blur-md text-white shadow-lg overflow-hidden">
-        <CardContent className="pt-6 pb-6 relative">
-          <div className="text-sm font-medium text-slate-400 mb-2">Top Writer</div>
-          <div className="text-4xl font-bold text-white mb-1 truncate">{stats.topWriter.name}</div>
-          <div className="text-xl text-white/80 whitespace-nowrap">
-            {stats.topWriter.count > 0 ? `${stats.topWriter.count.toLocaleString()} writes` : ""}
-          </div>
-        </CardContent>
-      </Card>
+      {loading ? (
+        <ClientCardSkeleton label="Top Writer" />
+      ) : (
+        <ClientCard
+          label="Top Writer"
+          name={stats.topWriter.count > 0 ? stats.topWriter.name : "N/A"}
+          subtitle={
+            stats.topWriter.count > 0
+              ? `${stats.topWriter.count.toLocaleString()} writes`
+              : ""
+          }
+          isEmpty={stats.topWriter.count <= 0}
+        />
+      )}
 
       {/* 6. Top Reader */}
-      <Card className="bg-white/5 border-white/10 backdrop-blur-md text-white shadow-lg overflow-hidden">
-        <CardContent className="pt-6 pb-6 relative">
-          <div className="text-sm font-medium text-slate-400 mb-2">Top Reader</div>
-          <div className="text-4xl font-bold text-white mb-1 truncate">
-            {stats.topReader.count > 0 ? stats.topReader.name : "N/A"}
-          </div>
-          <div className="text-xl text-white/80 whitespace-nowrap">
-            {stats.topReader.count > 0 ? `${stats.topReader.count.toLocaleString()} reads` : ""}
-          </div>
-        </CardContent>
-      </Card>
+      {loading ? (
+        <ClientCardSkeleton label="Top Reader" />
+      ) : (
+        <ClientCard
+          label="Top Reader"
+          name={stats.topReader.count > 0 ? stats.topReader.name : "N/A"}
+          subtitle={
+            stats.topReader.count > 0
+              ? `${stats.topReader.count.toLocaleString()} reads`
+              : ""
+          }
+          isEmpty={stats.topReader.count <= 0}
+        />
+      )}
 
       {/* 7. Last Writer */}
-      <Card className="bg-white/5 border-white/10 backdrop-blur-md text-white shadow-lg overflow-hidden">
-        <CardContent className="pt-6 pb-6 relative">
-          <div className="text-sm font-medium text-slate-400 mb-2">Last Writer</div>
-          <div className="text-4xl font-bold text-white mb-1 truncate">
-            {stats.lastWriter.name !== "N/A" ? stats.lastWriter.name : "N/A"}
-          </div>
-          <div className="text-xl text-white/80 whitespace-nowrap">
-            {stats.lastWriter.timestamp > 0 ? formatTimestamp(stats.lastWriter.timestamp) : "No activity"}
-          </div>
-        </CardContent>
-      </Card>
+      {loading ? (
+        <ClientCardSkeleton label="Last Writer" />
+      ) : (
+        <ClientCard
+          label="Last Writer"
+          name={stats.lastWriter.name !== "N/A" ? stats.lastWriter.name : "N/A"}
+          subtitle={formatTimestamp(stats.lastWriter.timestamp)}
+          isEmpty={
+            stats.lastWriter.name === "N/A" || stats.lastWriter.timestamp <= 0
+          }
+        />
+      )}
 
       {/* 8. Last Reader */}
-      <Card className="bg-white/5 border-white/10 backdrop-blur-md text-white shadow-lg overflow-hidden">
-        <CardContent className="pt-6 pb-6 relative">
-          <div className="text-sm font-medium text-slate-400 mb-2">Last Reader</div>
-          <div className="text-4xl font-bold text-white mb-1 truncate">
-            {stats.lastReader.name !== "N/A" ? stats.lastReader.name : "N/A"}
-          </div>
-          <div className="text-xl text-white/80 whitespace-nowrap">
-            {stats.lastReader.timestamp > 0 ? formatTimestamp(stats.lastReader.timestamp) : "No activity"}
-          </div>
-        </CardContent>
-      </Card>
+      {loading ? (
+        <ClientCardSkeleton label="Last Reader" />
+      ) : (
+        <ClientCard
+          label="Last Reader"
+          name={stats.lastReader.name !== "N/A" ? stats.lastReader.name : "N/A"}
+          subtitle={formatTimestamp(stats.lastReader.timestamp)}
+          isEmpty={
+            stats.lastReader.name === "N/A" || stats.lastReader.timestamp <= 0
+          }
+        />
+      )}
     </div>
-  )
+  );
 }