@cybermem/dashboard 0.9.12 → 0.13.4

package/app/page.tsx

@@ -1,167 +1,145 @@
 "use client";
 
-import AuditLogTable from "@/components/dashboard/audit-log-table";
 import ChartsSection from "@/components/dashboard/charts-section";
 import DashboardHeader from "@/components/dashboard/header";
 import LoginModal from "@/components/dashboard/login-modal";
+import LogViewer from "@/components/dashboard/logs/log-viewer";
 import MCPConfigModal from "@/components/dashboard/mcp-config-modal";
 import MetricsGrid from "@/components/dashboard/metrics-grid";
 import SettingsModal from "@/components/dashboard/settings-modal";
 import { useDashboard } from "@/lib/data/dashboard-context";
-import { DashboardData } from "@/lib/data/types";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
+import { toast } from "sonner";
 
-// Types (Ideally imported, but keeping for now if used elsewhere locally, though strategy returns properly typed data)
-// We use the types from lib/data/types.ts now
-
-export default function Dashboard() {
-  const {
-    strategy,
-    isDemo,
-    toggleDemo,
-    refreshSignal,
-    isAuthenticated,
-    login,
-  } = useDashboard();
-
-  const [showMCPConfig, setShowMCPConfig] = useState(false);
+export default function DashboardPage() {
+  const { stats, logs, loading, refresh, isAuthenticated, login } =
+    useDashboard();
   const [showSettings, setShowSettings] = useState(false);
-
-  // Data State
-  const [data, setData] = useState<DashboardData>({
-    stats: {
-      memoryRecords: 0,
-      totalClients: 0,
-      successRate: 0,
-      totalRequests: 0,
-      topWriter: { name: "N/A", count: 0 },
-      topReader: { name: "N/A", count: 0 },
-      lastWriter: { name: "N/A", timestamp: 0 },
-      lastReader: { name: "N/A", timestamp: 0 },
-    },
-    trends: {
-      memory: { change: "", trend: "neutral", hasData: false, data: [] },
-      clients: { change: "", trend: "neutral", hasData: false, data: [] },
-      success: { change: "", trend: "neutral", hasData: false, data: [] },
-      requests: { change: "", trend: "neutral", hasData: false, data: [] },
-    },
-    logs: [],
-  });
-
-  // Auth is handled by context (Layout passes initial state from headers)
-
-  const handleLogin = (token: string) => {
-    login();
-  };
-
-  // Fetch Data Effect - Reacts to strategy change or refresh signal
-  useEffect(() => {
-    async function updateData() {
-      try {
-        const potentialData = await strategy.fetchGlobalStats();
-        setData(potentialData);
-      } catch (e) {
-        console.error("Failed to fetch dashboard data:", e);
-      }
-    }
-    updateData();
-  }, [strategy, refreshSignal]);
-
-  // Audit Log internal state for filtering/sorting (UI logic only)
-  const [searchTerm, setSearchTerm] = useState("");
+  const [showMCPConfig, setShowMCPConfig] = useState(false);
   const [currentPage, setCurrentPage] = useState(1);
-  const [sortField, setSortField] = useState<
-    "date" | "client" | "operation" | "status"
-  >("date");
+  const [sortField, setSortField] = useState("date");
   const [sortDirection, setSortDirection] = useState<"asc" | "desc">("desc");
-  const itemsPerPage = 10;
 
-  const filteredLog = (data.logs || []).filter(
-    (log) =>
-      log.client.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      log.operation.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      log.status.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      log.description.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
-
-  const handleSort = (field: string) => {
-    if (field === sortField) {
-      setSortDirection((prev) => (prev === "asc" ? "desc" : "asc"));
-    } else {
-      setSortField(field as any);
-      setSortDirection("asc");
-    }
-  };
+  const params = useSearchParams();
+  const router = useRouter();
+  const pageSize = 10;
 
-  const sortedLog = [...filteredLog].sort((a, b) => {
-    const modifier = sortDirection === "asc" ? 1 : -1;
-    if (sortField === "date") {
-      return (
-        (new Date(a.date).getTime() - new Date(b.date).getTime()) * modifier
-      );
-    }
-    const aValue = (a as any)[sortField] || "";
-    const bValue = (b as any)[sortField] || "";
-    if (typeof aValue === "string" && typeof bValue === "string") {
-      return aValue.localeCompare(bValue) * modifier;
+  useEffect(() => {
+    // Handle login toast
+    if (params.get("logged_in") === "true") {
+      toast.success("Welcome back, Mikhail!", {
+        description: "Authenticated via GitHub Zero Trust",
+      });
+      // Clean URL
+      const newParams = new URLSearchParams(params.toString());
+      newParams.delete("logged_in");
+      router.replace(`/?${newParams.toString()}`);
     }
+  }, [params, router]);
+
+  // Handle sorting locally for now since we have a limited set (100 logs)
+  const sortedLogs = [...logs].sort((a: any, b: any) => {
+    const aVal = a[sortField];
+    const bVal = b[sortField];
+    if (aVal < bVal) return sortDirection === "asc" ? -1 : 1;
+    if (aVal > bVal) return sortDirection === "asc" ? 1 : -1;
     return 0;
   });
 
-  const paginatedLog = sortedLog.slice(
-    (currentPage - 1) * itemsPerPage,
-    currentPage * itemsPerPage,
+  const paginatedLogs = sortedLogs.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize,
   );
-  const totalPages = Math.ceil(sortedLog.length / itemsPerPage);
-
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
 
-  // Show login modal if not authenticated
-  if (!isAuthenticated) {
-    return <LoginModal onLogin={handleLogin} />;
-  }
+  // Default trends (until backend provides them or we calculate them)
+  const metricsTrends = {
+    memory: {
+      change: "0%",
+      trend: "neutral" as const,
+      hasData: false,
+      data: [],
+    },
+    clients: {
+      change: "0%",
+      trend: "neutral" as const,
+      hasData: false,
+      data: [],
+    },
+    success: {
+      change: "0%",
+      trend: "neutral" as const,
+      hasData: false,
+      data: [],
+    },
+    requests: {
+      change: "0%",
+      trend: "neutral" as const,
+      hasData: false,
+      data: [],
+    },
+  };
 
-  if (!mounted) {
-    return null; // Return nothing on server and initial client render to avoid mismatch
-  }
+  const currentStats = stats || {
+    memoryRecords: 0,
+    totalClients: 0,
+    successRate: 0,
+    totalRequests: 0,
+    topWriter: { name: "N/A", count: 0 },
+    topReader: { name: "N/A", count: 0 },
+    lastWriter: { name: "N/A", timestamp: 0 },
+    lastReader: { name: "N/A", timestamp: 0 },
+  };
 
   return (
-    <div className="min-h-screen text-foreground">
+    <main className="min-h-screen bg-[#0B1116] text-white">
       <DashboardHeader
-        onShowMCPConfig={() => setShowMCPConfig(true)}
         onShowSettings={() => setShowSettings(true)}
+        onShowMCPConfig={() => setShowMCPConfig(true)}
+        memoryCount={currentStats.memoryRecords}
       />
 
-      <main className="px-6 py-8 max-w-7xl mx-auto space-y-8">
-        <MetricsGrid stats={data.stats} trends={data.trends} />
-        <ChartsSection period="" />
-        <AuditLogTable
-          logs={(paginatedLog || []).map((log) => ({
-            id: log.id,
-            date: log.date.toLocaleString(),
-            client: log.client,
-            operation: log.operation,
-            status: log.status,
-            description: log.description,
-          }))}
-          loading={false}
+      {!isAuthenticated && (
+        <LoginModal
+          onLogin={(token) => {
+            // Note: Cookie is set server-side via /api/auth/token with HttpOnly flag.
+            // Client-side we only trigger state refresh.
+            login();
+            refresh();
+          }}
+        />
+      )}
+
+      <div className="max-w-7xl mx-auto px-6 pt-32 pb-20 space-y-12 animate-in fade-in duration-700">
+        <MetricsGrid
+          stats={currentStats}
+          trends={metricsTrends}
+          loading={loading}
+        />
+        <ChartsSection period="all" />
+        <LogViewer
+          logs={paginatedLogs}
+          loading={loading}
           currentPage={currentPage}
-          totalPages={totalPages}
+          totalPages={Math.ceil(logs.length / pageSize)}
           onPageChange={setCurrentPage}
           sortField={sortField}
           sortDirection={sortDirection}
-          onSort={handleSort}
+          onSort={(field) => {
+            if (field === sortField) {
+              setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+            } else {
+              setSortField(field);
+              setSortDirection("desc");
+            }
+          }}
         />
-      </main>
+      </div>
 
+      {showSettings && <SettingsModal onClose={() => setShowSettings(false)} />}
       {showMCPConfig && (
         <MCPConfigModal onClose={() => setShowMCPConfig(false)} />
       )}
-      {showSettings && <SettingsModal onClose={() => setShowSettings(false)} />}
-    </div>
+    </main>
   );
 }

package/components/dashboard/{chart-card.tsx → charts/chart-card.tsx}

@@ -7,7 +7,7 @@ import dynamic from "next/dynamic";
 import { useEffect, useRef, useState } from "react";
 
 // Dynamic import with SSR disabled
-const MetricsChart = dynamic(() => import("./metrics-chart"), { ssr: false });
+const MemoryChart = dynamic(() => import("./memory-chart"), { ssr: false });
 
 interface ChartCardProps {
   service: string;
@@ -36,7 +36,7 @@ const periods = [
 ];
 
 export default function ChartCard({ service }: ChartCardProps) {
-  const { strategy, refreshSignal, clientConfigs } = useDashboard();
+  const { refreshSignal, clientConfigs } = useDashboard();
   const [period, setPeriod] = useState("24h");
   const [hovered, setHovered] = useState<string | null>(null);
   const [data, setData] = useState<any[]>([]);
@@ -47,27 +47,28 @@ export default function ChartCard({ service }: ChartCardProps) {
   const isInitialLoad = useRef(true);
   useEffect(() => {
     async function fetchData() {
-      // Only show loading state on initial load, not background refresh
       if (isInitialLoad.current) setLoading(true);
 
       try {
-        const timeSeriesData = await strategy.getChartData(period);
+        const res = await fetch(`/api/metrics?period=${period}`);
+        if (!res.ok) throw new Error("Failed to fetch metrics");
+        const metrics = await res.json();
+        const timeSeriesData = metrics.timeSeries;
 
         // Update client metadata if provided in response
-        if (timeSeriesData.metadata) {
+        if (metrics.metadata) {
           setClientMetadata((prev) => ({
             ...prev,
-            ...timeSeriesData.metadata,
+            ...metrics.metadata,
           }));
         }
 
         // Helper to format time based on period
         const formatSeries = (series: any[]) => {
           if (!series) return [];
-          return series.map((point) => {
+          return series.map((point: any) => {
             const date = new Date((point.time as number) * 1000);
             let timeStr = "";
-            // Show date if period is longer than 24h
             if (["7d", "30d", "90d", "all"].includes(period)) {
               timeStr =
                 date.toLocaleDateString([], {
@@ -85,19 +86,14 @@ export default function ChartCard({ service }: ChartCardProps) {
                 minute: "2-digit",
               });
             }
-            return {
-              ...point,
-              time: timeStr,
-            };
+            return { ...point, time: timeStr };
           });
         };
 
-        // Extract client names from series and sort by total value (Ascending)
         const getClients = (series: any[]) => {
           if (!series || series.length === 0) return [];
           const keys = new Set<string>();
           const totals: Record<string, number> = {};
-
           series.forEach((point) => {
             Object.keys(point).forEach((k) => {
               if (k !== "time") {
@@ -106,13 +102,11 @@ export default function ChartCard({ service }: ChartCardProps) {
               }
             });
           });
-
           return Array.from(keys).sort(
             (a, b) => (totals[a] || 0) - (totals[b] || 0),
           );
         };
 
-        // Get data based on service type
         let seriesData: any[] = [];
         let clients: string[] = [];
 
@@ -140,12 +134,12 @@ export default function ChartCard({ service }: ChartCardProps) {
       }
     }
     fetchData();
-  }, [period, service, strategy, refreshSignal]);
+  }, [period, service, refreshSignal]);
 
   const isMultiSeries = clientNames.length > 0;
 
   return (
-    <Card className="bg-white/5 border-white/10 backdrop-blur-md relative overflow-visible pt-6 pb-2">
+    <Card className="card bg-white/5 border-white/10 backdrop-blur-md relative overflow-visible pt-6 pb-2">
       <button
         className="absolute top-0 right-0 z-20 h-8 px-3 rounded-tl-none rounded-tr-xl rounded-bl-2xl rounded-br-none bg-white/5 border-b border-l border-white/10 hover:bg-white/10 text-white text-xs font-medium flex items-center gap-2 transition-all group"
         onClick={() =>
@@ -256,7 +250,7 @@ export default function ChartCard({ service }: ChartCardProps) {
           </div>
         ) : (
           <div className="h-[200px] w-full">
-            <MetricsChart
+            <MemoryChart
               data={data}
               isMultiSeries={isMultiSeries}
               clientNames={clientNames}

package/components/dashboard/{metrics-chart.tsx → charts/memory-chart.tsx}

@@ -34,7 +34,7 @@ interface MetricsChartProps {
   setHovered: (id: string | null) => void;
 }
 
-export default function MetricsChart({
+export default function MemoryChart({
   data,
   isMultiSeries,
   clientNames,

package/components/dashboard/charts-section.tsx

@@ -1,6 +1,6 @@
-"use client"
+"use client";
 
-import ChartCard from "./chart-card";
+import ChartCard from "./charts/chart-card";
 
 export default function ChartsSection({ period }: { period: string }) {
   // Remove the period prop since each chart will have its own selector
@@ -12,5 +12,5 @@ export default function ChartsSection({ period }: { period: string }) {
       <ChartCard service="Updates by Client" />
       <ChartCard service="Deletes by Client" />
     </div>
-  )
+  );
 }