refactor: convert virtual table into a real table

.github/workflows/job_test_go_api_local.yaml

@@ -1,4 +1,4 @@
-name: Test GO API Local
+name: Test Go API Local
 on:
   workflow_call:
 

apps/dashboard/app/(app)/audit/components/table/types.ts → apps/dashboard/app/(app)/audit/audit.type.ts

@@ -1,4 +1,4 @@
-export type Data = {
+export type AuditData = {
   user:
     | {
         username?: string | null;

apps/dashboard/app/(app)/audit/components/logs-client.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useState } from "react";
+import type { AuditData } from "../audit.type";
+import { AuditLogsTable } from "./table/audit-logs-table";
+import { AuditLogDetails } from "./table/log-details";
+
+// INFO: Hacky way to create distance from top. This will be fixed when this page gets a refactor.
+const DISTANCE_TO_TOP = 9;
+export const LogsClient = () => {
+  const [selectedLog, setSelectedLog] = useState<AuditData | null>(null);
+
+  return (
+    <>
+      <AuditLogsTable selectedLog={selectedLog} setSelectedLog={setSelectedLog} />
+      <AuditLogDetails
+        distanceToTop={DISTANCE_TO_TOP}
+        selectedLog={selectedLog}
+        setSelectedLog={setSelectedLog}
+      />
+    </>
+  );
+};

apps/dashboard/app/(app)/audit/components/table/audit-log-table-client.tsx → apps/dashboard/app/(app)/audit/components/table/audit-logs-table.tsx

@@ -4,20 +4,18 @@ import { VirtualTable } from "@/components/virtual-table";
 import { trpc } from "@/lib/trpc/client";
 import { Empty } from "@unkey/ui";
 import { cn } from "@unkey/ui/src/lib/utils";
-import { useState } from "react";
+import type { AuditData } from "../../audit.type";
 import { useAuditLogParams } from "../../query-state";
 import { columns } from "./columns";
 import { DEFAULT_FETCH_COUNT } from "./constants";
-import { LogDetails } from "./table-details";
-import type { Data } from "./types";
 import { getEventType } from "./utils";
 
 const STATUS_STYLES: Record<
   "create" | "update" | "delete" | "other",
   { base: string; hover: string; selected: string }
 > = {
   create: {
-    base: "text-accent-11 ",
+    base: "text-accent-11",
     hover: "hover:bg-accent-3",
     selected: "bg-accent-3",
   },
@@ -38,8 +36,12 @@ const STATUS_STYLES: Record<
   },
 };
 
-export const AuditLogTableClient = () => {
-  const [selectedLog, setSelectedLog] = useState<Data | null>(null);
+type Props = {
+  selectedLog: AuditData | null;
+  setSelectedLog: (log: AuditData | null) => void;
+};
+
+export const AuditLogsTable = ({ selectedLog, setSelectedLog }: Props) => {
   const { setCursor, searchParams } = useAuditLogParams();
 
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, isError } =
@@ -75,23 +77,22 @@ export const AuditLogTableClient = () => {
     }
   };
 
-  const getRowClassName = (item: Data) => {
+  const getRowClassName = (item: AuditData) => {
     const eventType = getEventType(item.auditLog.event);
     const style = STATUS_STYLES[eventType];
 
     return cn(
       style.base,
       style.hover,
       "group rounded-md",
-      "focus:outline-none focus:ring-1 focus:ring-opacity-40 px-1",
       selectedLog && {
         "opacity-50 z-0": selectedLog.auditLog.id !== item.auditLog.id,
         "opacity-100 z-10": selectedLog.auditLog.id === item.auditLog.id,
       },
     );
   };
 
-  const getSelectedClassName = (item: Data, isSelected: boolean) => {
+  const getSelectedClassName = (item: AuditData, isSelected: boolean) => {
     if (!isSelected) {
       return "";
     }
@@ -123,9 +124,6 @@ export const AuditLogTableClient = () => {
       onRowClick={setSelectedLog}
       selectedClassName={getSelectedClassName}
       keyExtractor={(log) => log.auditLog.id}
-      renderDetails={(log, onClose, distanceToTop) => (
-        <LogDetails log={log} onClose={onClose} distanceToTop={distanceToTop} />
-      )}
       config={{
         loadingRows: DEFAULT_FETCH_COUNT,
       }}

apps/dashboard/app/(app)/audit/components/table/columns.tsx

@@ -3,16 +3,14 @@ import { Badge } from "@/components/ui/badge";
 import type { Column } from "@/components/virtual-table/types";
 import { cn } from "@unkey/ui/src/lib/utils";
 import { FunctionSquare, KeySquare } from "lucide-react";
-import type { Data } from "./types";
+import type { AuditData } from "../../audit.type";
 import { getEventType } from "./utils";
 
-export const columns: Column<Data>[] = [
+export const columns: Column<AuditData>[] = [
   {
     key: "time",
     header: "Time",
     width: "150px",
-    headerClassName: "pl-3",
-    noTruncate: true,
     render: (log) => (
       <div className="flex items-center gap-3">
         <TimestampInfo
@@ -26,8 +24,6 @@ export const columns: Column<Data>[] = [
     key: "actor",
     header: "Actor",
     width: "15%",
-    headerClassName: "pl-3",
-    noTruncate: true,
     render: (log) => (
       <div className="flex items-center gap-3 truncate">
         {log.auditLog.actor.type === "user" && log.user ? (
@@ -54,8 +50,6 @@ export const columns: Column<Data>[] = [
     key: "action",
     header: "Action",
     width: "15%",
-    headerClassName: "pl-3",
-    noTruncate: true,
     render: (log) => {
       const eventType = getEventType(log.auditLog.event);
       const badgeClassName = cn("font-mono capitalize", {

apps/dashboard/app/(app)/audit/components/table/log-footer.tsx → apps/dashboard/app/(app)/audit/components/table/log-details/components/log-footer.tsx

@@ -1,13 +1,13 @@
 "use client";
 
+import type { AuditData } from "@/app/(app)/audit/audit.type";
 import { RequestResponseDetails } from "@/app/(app)/logs/components/table/log-details/components/request-response-details";
 import { TimestampInfo } from "@/components/timestamp-info";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { FunctionSquare, KeySquare } from "lucide-react";
-import type { Data } from "./types";
 
 type Props = {
-  log: Data;
+  log: AuditData;
 };
 
 export const LogFooter = ({ log }: Props) => {
@@ -65,7 +65,7 @@ export const LogFooter = ({ log }: Props) => {
         {
           label: "User Agent",
           description: (content) => (
-            <span className="text-[13px] font-mono w-[100px] truncate">{content}</span>
+            <span className="text-[13px] font-mono text-right">{content}</span>
           ),
           content: log.auditLog.userAgent,
           tooltipContent: "Copy User Agent",
@@ -80,9 +80,7 @@ export const LogFooter = ({ log }: Props) => {
         },
         {
           label: "Description",
-          description: (content) => (
-            <span className="text-[13px] font-mono flex text-end">{content}</span>
-          ),
+          description: (content) => <span className="text-[13px] font-mono">{content}</span>,
           content: log.auditLog.description,
           tooltipContent: "Copy Description",
           tooltipSuccessMessage: "Description copied to clipboard",

apps/dashboard/app/(app)/audit/components/table/log-header.tsx → apps/dashboard/app/(app)/audit/components/table/log-details/components/log-header.tsx

@@ -1,10 +1,10 @@
+import type { AuditData } from "@/app/(app)/audit/audit.type";
 import { Badge } from "@/components/ui/badge";
 import { XMark } from "@unkey/icons";
 import { Button } from "@unkey/ui";
-import type { Data } from "./types";
 
 type Props = {
-  log: Data;
+  log: AuditData;
   onClose: () => void;
 };
 

apps/dashboard/app/(app)/audit/components/table/log-details/components/log-section.tsx

@@ -0,0 +1,71 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { toast } from "@/components/ui/toaster";
+import { Button } from "@unkey/ui";
+import { Copy } from "lucide-react";
+
+export const LogSection = ({
+  details,
+  title,
+}: {
+  details: string | string[];
+  title: string;
+}) => {
+  const handleClick = () => {
+    navigator.clipboard
+      .writeText(getFormattedContent(details))
+      .then(() => {
+        toast.success(`${title} copied to clipboard`);
+      })
+      .catch((error) => {
+        console.error("Failed to copy to clipboard:", error);
+        toast.error("Failed to copy to clipboard");
+      });
+  };
+
+  return (
+    <div className="flex flex-col gap-1 mt-[16px]">
+      <div className="flex justify-between items-center">
+        <span className="text-[13px] text-accent-9 font-sans">{title}</span>
+      </div>
+      <Card className="bg-gray-2 border-gray-4 rounded-lg">
+        <CardContent className="py-2 px-3 text-xs relative group ">
+          <pre className="flex flex-col gap-1 whitespace-pre-wrap leading-relaxed">
+            {Array.isArray(details)
+              ? details.map((header) => {
+                  const [key, ...valueParts] = header.split(":");
+                  const value = valueParts.join(":").trim();
+                  return (
+                    <div className="group flex items-center w-full p-[3px]" key={key}>
+                      <span className="w-28 text-left truncate text-accent-9">{key}:</span>
+                      <span className="ml-2 text-xs text-accent-12 ">{value}</span>
+                    </div>
+                  );
+                })
+              : details}
+          </pre>
+          <Button
+            shape="square"
+            onClick={handleClick}
+            className="absolute bottom-2 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
+            aria-label="Copy content"
+          >
+            <Copy size={14} />
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+const getFormattedContent = (details: string | string[]) => {
+  if (Array.isArray(details)) {
+    return details
+      .map((header) => {
+        const [key, ...valueParts] = header.split(":");
+        const value = valueParts.join(":").trim();
+        return `${key}: ${value}`;
+      })
+      .join("\n");
+  }
+  return details;
+};

apps/dashboard/app/(app)/audit/components/table/table-details.tsx → apps/dashboard/app/(app)/audit/components/table/log-details/index.tsx

@@ -1,49 +1,51 @@
 "use client";
 
-import { LogSection } from "@/app/(app)/logs/components/table/log-details/components/log-section";
-import { ResizablePanel } from "@/app/(app)/logs/components/table/log-details/resizable-panel";
 import { useMemo } from "react";
-import { LogFooter } from "./log-footer";
-import { LogHeader } from "./log-header";
-import type { Data } from "./types";
-
-type Props = {
-  log: Data | null;
-  onClose: () => void;
-  distanceToTop: number;
-};
-
-const PANEL_MAX_WIDTH = 600;
-const PANEL_MIN_WIDTH = 400;
+import type { AuditData } from "../../../audit.type";
+import { DEFAULT_DRAGGABLE_WIDTH, PANEL_MAX_WIDTH, PANEL_MIN_WIDTH } from "../../../constants";
+import { LogFooter } from "./components/log-footer";
+import { LogHeader } from "./components/log-header";
+import { LogSection } from "./components/log-section";
+import { ResizablePanel } from "./resizable-panel";
 
 const createPanelStyle = (distanceToTop: number) => ({
   top: `${distanceToTop}px`,
-  width: "500px",
+  width: `${DEFAULT_DRAGGABLE_WIDTH}px`,
   height: `calc(100vh - ${distanceToTop}px)`,
   paddingBottom: "1rem",
 });
 
-export const LogDetails = ({ log, onClose, distanceToTop }: Props) => {
+type Props = {
+  distanceToTop: number;
+  selectedLog: AuditData | null;
+  setSelectedLog: (log: AuditData | null) => void;
+};
+
+export const AuditLogDetails = ({ distanceToTop, selectedLog, setSelectedLog }: Props) => {
   const panelStyle = useMemo(() => createPanelStyle(distanceToTop), [distanceToTop]);
 
-  if (!log) {
+  if (!selectedLog) {
     return null;
   }
 
+  const handleClose = () => {
+    setSelectedLog(null);
+  };
+
   return (
     <ResizablePanel
       minW={PANEL_MIN_WIDTH}
       maxW={PANEL_MAX_WIDTH}
-      onClose={onClose}
+      onClose={handleClose}
       className="absolute right-0 bg-gray-1 dark:bg-black font-mono drop-shadow-2xl overflow-y-auto z-20 p-4"
       style={panelStyle}
     >
-      <LogHeader log={log} onClose={onClose} />
+      <LogHeader log={selectedLog} onClose={handleClose} />
       <div className="space-y-3 py-4">
         <div className="mt-[-24px]" />
 
-        <LogFooter log={log} />
-        {log.auditLog.targets.map((target) => {
+        <LogFooter log={selectedLog} />
+        {selectedLog.auditLog.targets.map((target) => {
           const title = String(target.type).charAt(0).toUpperCase() + String(target.type).slice(1);
 
           return (