API Key Creation Page - Card Layout, Keys Table, Reveal API Key

src/app/(dashboard)/admin/keys/page.tsx

@@ -9,11 +9,96 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
+import { ApiKeyDataTable } from "@/components/apiKeyTable/apiKey-table";
+import { ApiKeyColumn } from "@/components/apiKeyTable/columns";
+import ApiKeyRevealCard from "@/components/forms/ApiKeyRevealForm";
+import { getApiKeysAction, deleteApiKeyByIdAction } from "@/lib/actions";
+import { getProjects } from "@/lib/sdkActions";
+
+type CreatedKeyInfo = {
+  value: string;
+  description: string;
+  environment: string;
+  project: string;
+  dateCreated: string;
+};
 
 export default function KeyPage() {
+  const [apiKeys, setApiKeys] = useState<ApiKeyColumn[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [createdKey, setCreatedKey] = useState<CreatedKeyInfo | null>(null);
+  const [projectNames, setProjectNames] = useState<Record<string, string>>({});
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageSize, setPageSize] = useState(10);
+  const [paginationLinks, setPaginationLinks] = useState({
+    first: "",
+    prev: "",
+    next: "",
+    last: "",
+  });
+  const [keysLoadTrigger, setKeysLoadTrigger] = useState(0);
+
+  useEffect(() => {
+    async function fetchProjects() {
+      const result = await getProjects();
+      if (result.success) {
+        setProjectNames(
+          Object.fromEntries(
+            result.projects.map((p) => [String(p.id), String(p.name ?? "")]),
+          ),
+        );
+      }
+    }
+    fetchProjects();
+  }, []);
+
+  const fetchApiKeys = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      const result = await getApiKeysAction({
+        offset: pageIndex * pageSize,
+        limit: pageSize,
+      });
+      if (result.success) {
+        const mapped: ApiKeyColumn[] = (result.keys ?? []).map((key) => ({
+          id: Number(key.id),
+          description: key.description ?? "",
+          dateCreated: key.createdAt
+            ? new Date(key.createdAt).toISOString().split("T")[0]
+            : "N/A",
+          linkedProject: projectNames[String(key.project)] ?? "Unknown",
+          environment: key.environment ?? "N/A",
+        }));
+        setApiKeys(mapped);
+        setPaginationLinks(result.links);
+      } else {
+        toast.error(result.error ?? "Failed to fetch API keys");
+      }
+    } catch {
+      toast.error("Failed to fetch API keys");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [pageIndex, pageSize, projectNames]);
+
+  useEffect(() => {
+    fetchApiKeys();
+  }, [fetchApiKeys, keysLoadTrigger]);
+
+  const handleDelete = async (key: ApiKeyColumn) => {
+    const result = await deleteApiKeyByIdAction(String(key.id));
+    if (result.success) {
+      setApiKeys((prev) => prev.filter((k) => k.id !== key.id));
+      toast.success("API key deleted successfully.");
+    } else {
+      toast.error(result.error ?? "Failed to delete API key");
+    }
+  };
+
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col gap-[18px]">
       <Breadcrumb className="mb-4">
         <BreadcrumbList>
           <BreadcrumbItem>
@@ -25,12 +110,47 @@ export default function KeyPage() {
           </BreadcrumbItem>
         </BreadcrumbList>
       </Breadcrumb>
+      <div className="flex flex-col gap-8">
+        <div className="grid grid-cols-1 xl:grid-cols-2 gap-8 items-start">
+          <CreateAPIKeyForm
+            projects={Object.values(projectNames)}
+            onKeyAdd={(newKey) => {
+              setCreatedKey({
+                value: newKey.value,
+                description: newKey.description,
+                environment: newKey.environment,
+                project: newKey.project.name,
+                dateCreated: new Date().toISOString().split("T")[0],
+              });
+              toast.success("Successfully created API key");
+              setKeysLoadTrigger((t) => t + 1);
+            }}
+          />
+
+          <ApiKeyRevealCard
+            keyValue={createdKey?.value ?? null}
+            description={createdKey?.description ?? ""}
+            environment={createdKey?.environment ?? ""}
+            project={createdKey?.project ?? ""}
+            dateCreated={createdKey?.dateCreated ?? ""}
+          />
+        </div>
 
-      <CreateAPIKeyForm
-        onKeyAdd={() => {
-          toast.success("Successfully created API key");
-        }}
-      />
+        <ApiKeyDataTable
+          data={apiKeys}
+          isLoading={isLoading}
+          pageIndex={pageIndex}
+          pageSize={pageSize}
+          paginationLinks={paginationLinks}
+          onPageIndexChange={setPageIndex}
+          onPageSizeChange={setPageSize}
+          onKeyAction={async (key, action) => {
+            if (action === "delete") {
+              await handleDelete(key);
+            }
+          }}
+        />
+      </div>
     </div>
   );
 }

src/app/(dashboard)/admin/layout.tsx

@@ -12,7 +12,7 @@ export default function AdminLayout({
     <SidebarProvider>
       <TopBar />
       <AdminSidebar />
-      <div className="flex flex-col w-screen mt-12">
+      <div className="flex flex-col w-screen mt-11">
         <main className="m-7">{children}</main>
       </div>
     </SidebarProvider>

src/app/(dashboard)/admin/users/page.tsx

@@ -12,7 +12,7 @@ import {
 import { Separator } from "@/components/ui/separator";
 import { getProjects, getUsers } from "@/lib/sdkActions";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { ProjectResponse } from "juno-sdk/build/main/internal/index";
+import type { ProjectResponse } from "juno-sdk/build/main/internal/index";
 import { toast } from "sonner";
 import { UserColumn } from "../../../../components/usertable/columns";
 import { UserDataTable } from "../../../../components/usertable/data-table";

src/app/(dashboard)/projects/[projectId]/layout.tsx

@@ -21,7 +21,7 @@ export default async function ProjectLayout({
         currProjName={project.name}
         projectId={Number(projectId)}
       />
-      <div className="flex flex-col w-screen mt-12">
+      <div className="flex flex-col w-screen mt-11">
         <main className="m-7">{children}</main>
       </div>
     </SidebarProvider>

src/app/(dashboard)/projects/[projectId]/page.tsx

@@ -30,7 +30,7 @@ import {
   getCustomEventTypes,
 } from "@/lib/settings";
 import { useQuery } from "@tanstack/react-query";
-import { ProjectResponse } from "juno-sdk/build/main/internal/index";
+import type { ProjectResponse } from "juno-sdk/build/main/internal/index";
 import { BarChart3, Settings } from "lucide-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -209,9 +209,18 @@ const DashboardPage = () => {
     refetchOnWindowFocus: true,
   });
 
-  const clickData: Event[] = clickEventsResponse?.events?.events || [];
-  const inputData: Event[] = inputEventsResponse?.events?.events || [];
-  const visitData: Event[] = visitEventsResponse?.events?.events || [];
+  const clickData: Event[] = useMemo(
+    () => clickEventsResponse?.events?.events || [],
+    [clickEventsResponse],
+  );
+  const inputData: Event[] = useMemo(
+    () => inputEventsResponse?.events?.events || [],
+    [inputEventsResponse],
+  );
+  const visitData: Event[] = useMemo(
+    () => visitEventsResponse?.events?.events || [],
+    [visitEventsResponse],
+  );
 
   const customEventTypes: CustomEventType[] = (() => {
     const types = customEventTypesResponse?.eventTypes;
@@ -289,7 +298,7 @@ const DashboardPage = () => {
     };
 
     fetchAllCustomEvents();
-  }, [projectName, customEventTypesJson]);
+  }, [projectName, projectId, customEventTypesJson]);
 
   const customEventTypesById = useMemo(
     () =>

src/app/(dashboard)/projects/[projectId]/services/email/page.tsx

@@ -16,7 +16,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 import { getProjectById } from "@/lib/project";
 import { getEmailAnalytics, getEmailConfig } from "@/lib/settings";
 import { useQuery } from "@tanstack/react-query";
-import { ProjectResponse } from "juno-sdk/build/main/internal/index";
+import type { ProjectResponse } from "juno-sdk/build/main/internal/index";
 import { Mail, Settings } from "lucide-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";

src/app/(dashboard)/projects/[projectId]/users/page.tsx

@@ -13,7 +13,7 @@ import { UserColumn } from "@/components/usertable/columns";
 import { UserDataTable } from "@/components/usertable/data-table";
 import { getProjectUsers } from "@/lib/actions";
 import { getProjects } from "@/lib/sdkActions";
-import { ProjectResponse } from "juno-sdk/build/main/internal/index";
+import type { ProjectResponse } from "juno-sdk/build/main/internal/index";
 import { useParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";