@goplusvn/core 0.1.0 → 0.1.2

package/src/ui/layout/vertical-layout.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import type { DictionaryType } from "../../hooks";
+import type { ReactNode } from "react";
+import type { NavigationType } from "../../types";
+
+import { SidebarProvider, SidebarInset } from "../primitives/sidebar";
+import { Footer } from "./footer";
+import { AppSidebar } from "./sidebar"; // Use renamed AppSidebar
+import { VerticalLayoutHeader } from "./vertical-layout-header";
+
+interface VerticalLayoutProps {
+  children: ReactNode;
+  dictionary: DictionaryType;
+  navigation?: NavigationType[];
+  onGlobalSearch?: (query: string) => void;
+  searchResults?: any[];
+  searchLoading?: boolean;
+}
+
+export function VerticalLayout({
+  children,
+  dictionary,
+  navigation,
+  onGlobalSearch,
+  searchResults,
+  searchLoading,
+}: VerticalLayoutProps) {
+  return (
+    <SidebarProvider>
+      <AppSidebar
+        dictionary={dictionary}
+        navigation={navigation ?? []}
+        onGlobalSearch={onGlobalSearch}
+        searchResults={searchResults}
+        searchLoading={searchLoading}
+      />
+      <SidebarInset className="w-full min-w-0 overflow-hidden h-screen flex flex-col">
+        <VerticalLayoutHeader dictionary={dictionary} />
+        <main className="w-full mx-auto flex-1 min-h-0 px-4 md:px-8 py-4 overflow-auto">
+          {children}
+        </main>
+        <Footer />
+      </SidebarInset>
+    </SidebarProvider>
+  );
+}

package/src/ui/management/audit-log-page.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { auditManager } from "../../audit/audit-manager";
+import type { AuditLog } from "../../audit/types";
+
+// Relative imports to core UI components
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
+import { Card, CardHeader, CardTitle, CardContent } from "../primitives/card";
+import { Input } from "../primitives/input";
+import { Label } from "../primitives/label";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../primitives/table";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../primitives/select";
+
+export const AuditLogPage = () => {
+  const [logs, setLogs] = useState<AuditLog[]>([]);
+  const [userIdFilter, setUserIdFilter] = useState("");
+  const [actionFilter, setActionFilter] = useState("");
+  const [resourceFilter, setResourceFilter] = useState("");
+  const [typeFilter, setTypeFilter] = useState<string>("all");
+
+  const fetchLogs = () => {
+    // Safe cast as we know we added getLogs
+    // In real app, we would have proper interface
+    const manager = auditManager as any;
+    if (typeof manager.getLogs === "function") {
+      const filter: any = {};
+      if (userIdFilter) filter.userId = userIdFilter;
+      if (actionFilter) filter.action = actionFilter;
+      if (resourceFilter) filter.resource = resourceFilter;
+      if (typeFilter && typeFilter !== "all") filter.type = typeFilter;
+
+      setLogs(manager.getLogs(filter));
+    }
+  };
+
+  useEffect(() => {
+    fetchLogs();
+    // Poll for updates in demo
+    const interval = setInterval(fetchLogs, 5000);
+    return () => clearInterval(interval);
+  }, [userIdFilter, actionFilter, resourceFilter, typeFilter]);
+
+  // Format changes object for display
+  const renderChanges = (changes: any) => {
+    if (!changes) return <span className="text-muted-foreground">-</span>;
+    return (
+      <code
+        className="text-xs bg-slate-100 dark:bg-slate-800 p-1 rounded block max-w-[300px] overflow-hidden text-ellipsis whitespace-nowrap"
+        title={JSON.stringify(changes, null, 2)}
+      >
+        {Object.keys(changes).join(", ")}
+      </code>
+    );
+  };
+
+  return (
+    <div className="p-6 space-y-6 h-full flex flex-col">
+      <div className="flex justify-between items-center mb-4">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Audit Logs</h1>
+          <p className="text-muted-foreground text-sm">
+            Track system changes and user actions.
+          </p>
+        </div>
+        <Button onClick={fetchLogs} variant="outline">
+          Refresh
+        </Button>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base font-medium">Filters</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
+            <div className="space-y-1">
+              <Label htmlFor="user-filter">User ID</Label>
+              <Input
+                id="user-filter"
+                placeholder="Search by user..."
+                value={userIdFilter}
+                onChange={(e) => setUserIdFilter(e.target.value)}
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="action-filter">Action</Label>
+              <Input
+                id="action-filter"
+                placeholder="e.g. create, update"
+                value={actionFilter}
+                onChange={(e) => setActionFilter(e.target.value)}
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="resource-filter">Resource</Label>
+              <Input
+                id="resource-filter"
+                placeholder="e.g. product, order"
+                value={resourceFilter}
+                onChange={(e) => setResourceFilter(e.target.value)}
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="type-filter">Type</Label>
+              <Select value={typeFilter} onValueChange={setTypeFilter}>
+                <SelectTrigger>
+                  <SelectValue placeholder="All Types" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">All Types</SelectItem>
+                  <SelectItem value="info">Info</SelectItem>
+                  <SelectItem value="warning">Warning</SelectItem>
+                  <SelectItem value="error">Error</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card className="flex-1 flex flex-col min-h-0">
+        <CardContent className="flex-1 overflow-auto p-0">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[180px]">Timestamp</TableHead>
+                <TableHead className="w-[150px]">Action</TableHead>
+                <TableHead className="w-[150px]">Resource</TableHead>
+                <TableHead className="w-[150px]">User</TableHead>
+                <TableHead>Changes / Metadata</TableHead>
+                <TableHead className="w-[100px] text-right">Status</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {logs.length === 0 && (
+                <TableRow>
+                  <TableCell
+                    colSpan={6}
+                    className="text-center h-24 text-muted-foreground"
+                  >
+                    No logs found matching filters.
+                  </TableCell>
+                </TableRow>
+              )}
+              {logs.map((log) => (
+                <TableRow key={log.id}>
+                  <TableCell className="font-mono text-xs">
+                    {new Date(log.createdAt).toLocaleString()}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline" className="font-normal">
+                      {log.action}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>{log.resource}</TableCell>
+                  <TableCell>
+                    <div className="flex flex-col">
+                      <span>{log.userId || "System"}</span>
+                      {log.roleName && (
+                        <span className="text-[10px] text-muted-foreground">
+                          {log.roleName}
+                        </span>
+                      )}
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    {renderChanges(log.changes)}
+                    {log.metadata && Object.keys(log.metadata).length > 0 && (
+                      <div className="text-[10px] text-muted-foreground mt-1">
+                        MD: {JSON.stringify(log.metadata).substring(0, 50)}...
+                      </div>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    {(log.status || 200) >= 400 ? (
+                      <Badge variant="destructive">{log.status}</Badge>
+                    ) : (
+                      <Badge
+                        variant="secondary"
+                        className="bg-emerald-100 text-emerald-700 hover:bg-emerald-100"
+                      >
+                        {log.status || 200}
+                      </Badge>
+                    )}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};

package/src/ui/management/cache-management.tsx

@@ -0,0 +1,349 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+// Remove direct import of server-side cacheManager
+// import { cacheManager } from "../../infrastructure/cache/cache-manager";
+
+// Relative imports to core UI components
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
+import { Card, CardHeader, CardTitle, CardContent } from "../primitives/card";
+import { Input } from "../primitives/input";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../primitives/table";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "../primitives/dialog";
+import { ScrollArea } from "../primitives/scroll-area"; // Assume scroll-area exists or use div
+
+interface CacheStat {
+  name: string;
+  itemCount: number;
+  ttl: number;
+}
+
+interface CacheManagementPageProps {
+  /** Server action to fetch stats */
+  fetchStats?: () => Promise<CacheStat[]>;
+  /** Server action to clear specific cache */
+  clearCache?: (name: string) => Promise<boolean>;
+  /** Server action to clear all caches */
+  clearAll?: () => Promise<void>;
+  /** Server action to get keys of a cache */
+  getCacheKeys?: (name: string) => Promise<string[]>;
+  /** Server action to get value of a cache key */
+  getCacheValue?: (name: string, key: string) => Promise<any>;
+}
+
+export const CacheManagementPage = ({
+  fetchStats,
+  clearCache,
+  clearAll,
+  getCacheKeys,
+  getCacheValue,
+}: CacheManagementPageProps) => {
+  const [caches, setCaches] = useState<CacheStat[]>([]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [refresh, setRefresh] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  // Inspection State
+  const [inspectCacheName, setInspectCacheName] = useState<string | null>(null);
+  const [cacheKeys, setCacheKeys] = useState<string[]>([]);
+  const [inspectKey, setInspectKey] = useState<string | null>(null);
+  const [keyValue, setKeyValue] = useState<any>(null);
+  const [inspecting, setInspecting] = useState(false);
+
+  useEffect(() => {
+    loadStats();
+  }, [refresh]);
+
+  const loadStats = async () => {
+    if (!fetchStats) return;
+    try {
+      setLoading(true);
+      const stats = await fetchStats();
+      setCaches(stats);
+    } catch (error) {
+      console.error("Failed to load cache stats:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClearAll = async () => {
+    if (!clearAll) return;
+    if (
+      confirm(
+        "Are you sure you want to clear ALL caches? Performance may be impacted.",
+      )
+    ) {
+      try {
+        setLoading(true);
+        await clearAll();
+        setRefresh((r) => r + 1); // Trigger reload
+      } catch (error) {
+        console.error("Failed to clear all caches:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+  };
+
+  const handleClearCache = async (name: string) => {
+    if (!clearCache) return;
+    try {
+      setLoading(true);
+      await clearCache(name);
+      setRefresh((r) => r + 1); // Trigger reload
+    } catch (error) {
+      console.error(`Failed to clear cache ${name}:`, error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleInspect = async (name: string) => {
+    if (!getCacheKeys) return;
+    try {
+      setInspecting(true);
+      setInspectCacheName(name);
+      setCacheKeys([]);
+      setInspectKey(null);
+      
+      const keys = await getCacheKeys(name);
+      setCacheKeys(keys);
+    } catch (error) {
+      console.error(`Failed to inspect cache ${name}:`, error);
+    } finally {
+      setInspecting(false);
+    }
+  };
+
+  const handleViewValue = async (key: string) => {
+    if (!getCacheValue || !inspectCacheName) return;
+    try {
+      setInspecting(true);
+      const value = await getCacheValue(inspectCacheName, key);
+      setKeyValue(value);
+      setInspectKey(key);
+    } catch (error) {
+      console.error(`Failed to get value for ${key}:`, error);
+    } finally {
+      setInspecting(false);
+    }
+  };
+
+  const filteredCaches = caches.filter((c) =>
+    c.name.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  const totalItems = caches.reduce((acc, curr) => acc + curr.itemCount, 0);
+
+  if (!fetchStats) {
+    return (
+      <div className="p-6 text-red-500">
+        Error: fetchStats server action not provided to CacheManagementPage.
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-6 space-y-6 h-full flex flex-col">
+      <div className="flex justify-between items-center mb-4">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">
+            Cache Management
+          </h1>
+          <p className="text-muted-foreground text-sm">
+            Monitor cache usage and clear cached data.
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button 
+            onClick={() => setRefresh((r) => r + 1)} 
+            variant="outline"
+            disabled={loading}
+          >
+            {loading ? "Loading..." : "Refresh"}
+          </Button>
+          <Button 
+            onClick={handleClearAll} 
+            variant="destructive"
+            disabled={!clearAll || loading}
+          >
+            Clear All Caches
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              Total Caches
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{caches.length}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              Total Cached Items
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{totalItems}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              System Status
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="flex items-center gap-2">
+              <span className="relative flex h-3 w-3">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-3 w-3 bg-emerald-500"></span>
+              </span>
+              <span className="text-sm font-medium text-emerald-600">
+                Active
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card className="flex-1 flex flex-col min-h-0">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle>Cache Instances</CardTitle>
+            <div className="w-[250px]">
+              <Input
+                placeholder="Filter by name..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+              />
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="flex-1 overflow-auto p-0">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Cache Name</TableHead>
+                <TableHead>Items</TableHead>
+                <TableHead>TTL (Seconds)</TableHead>
+                <TableHead className="text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredCaches.length === 0 && (
+                <TableRow>
+                  <TableCell
+                    colSpan={4}
+                    className="text-center h-24 text-muted-foreground"
+                  >
+                    {loading ? "Loading caches..." : "No caches found."}
+                  </TableCell>
+                </TableRow>
+              )}
+              {filteredCaches.map((cache) => (
+                <TableRow key={cache.name}>
+                  <TableCell className="font-medium">{cache.name}</TableCell>
+                  <TableCell>{cache.itemCount}</TableCell>
+                  <TableCell>{cache.ttl}</TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex items-center justify-end gap-2">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      onClick={() => handleInspect(cache.name)}
+                      disabled={!getCacheKeys || loading}
+                    >
+                      Inspect
+                    </Button>
+                    <Button
+                      size="sm"
+                      variant="secondary"
+                      onClick={() => handleClearCache(cache.name)}
+                      disabled={!clearCache || loading}
+                    >
+                      Clear
+                    </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+
+      {/* Inspect Dialog */}
+      <Dialog open={!!inspectCacheName} onOpenChange={(open) => !open && setInspectCacheName(null)}>
+        <DialogContent className="max-w-2xl max-h-[80vh] flex flex-col">
+          <DialogHeader>
+            <DialogTitle>Inspect Cache: {inspectCacheName}</DialogTitle>
+            <DialogDescription>
+              {inspecting ? "Loading..." : `${cacheKeys.length} items found`}
+            </DialogDescription>
+          </DialogHeader>
+          
+          <div className="flex-1 overflow-hidden flex gap-4 min-h-0">
+            {/* Keys List */}
+            <div className="w-1/3 border-r pr-4 overflow-y-auto">
+                {cacheKeys.length === 0 ? (
+                    <div className="text-sm text-muted-foreground py-4 text-center">No keys found</div>
+                ) : (
+                    <div className="space-y-1">
+                        {cacheKeys.map(key => (
+                            <div 
+                                key={key}
+                                className={`text-xs p-2 rounded cursor-pointer truncate ${inspectKey === key ? 'bg-primary/10 text-primary font-medium' : 'hover:bg-muted'}`}
+                                onClick={() => handleViewValue(key)}
+                                title={key}
+                            >
+                                {key}
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            {/* Value View */}
+            <div className="w-2/3 overflow-y-auto bg-muted/30 p-4 rounded-md font-mono text-xs">
+                {inspectKey ? (
+                    inspecting && keyValue === null ? (
+                        <div className="text-muted-foreground">Loading value...</div>
+                    ) : (
+                        <pre className="whitespace-pre-wrap break-all">
+                            {JSON.stringify(keyValue, null, 2)}
+                        </pre>
+                    )
+                ) : (
+                    <div className="text-muted-foreground flex items-center justify-center h-full">
+                        Select a key to view details
+                    </div>
+                )}
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};

package/src/ui/management/index.ts

@@ -0,0 +1,3 @@
+export * from "./job-management";
+export * from "./audit-log-page";
+export * from "./cache-management";