feat: add new nested routes

apps/dashboard/app/(app)/apis/_components/api-list-card.tsx

@@ -12,7 +12,7 @@ type Props = {
 };
 
 export const ApiListCard = ({ api }: Props) => {
-  const { timeseries, isLoading, isError } = useFetchVerificationTimeseries(api.keyspaceId);
+  const { timeseries, isError } = useFetchVerificationTimeseries(api.keyspaceId);
 
   const passed = timeseries?.reduce((acc, crr) => acc + crr.success, 0) ?? 0;
   const blocked = timeseries?.reduce((acc, crr) => acc + crr.error, 0) ?? 0;
@@ -26,7 +26,8 @@ export const ApiListCard = ({ api }: Props) => {
       chart={
         <StatsTimeseriesBarChart
           data={timeseries}
-          isLoading={isLoading}
+          // INFO: Causing too much lag when there are too many Charts. We'll try to optimize this in the future.
+          isLoading={false}
           isError={isError}
           config={{
             success: {

apps/dashboard/app/(app)/apis/actions.ts

@@ -19,6 +19,7 @@ export async function fetchApiOverview({
     .where(and(eq(schema.apis.workspaceId, workspaceId), isNull(schema.apis.deletedAtM)));
   const total = Number(totalResult[0]?.count || 0);
 
+  // Updated query to include keyAuth and fetch actual keys
   const query = db.query.apis.findMany({
     where: (table, { and, eq, isNull, gt }) => {
       const conditions = [eq(table.workspaceId, workspaceId), isNull(table.deletedAtM)];
@@ -30,8 +31,23 @@ export async function fetchApiOverview({
     with: {
       keyAuth: {
         columns: {
+          id: true, // Include the keyspace ID
           sizeApprox: true,
         },
+        with: {
+          keys: {
+            limit: 10,
+            columns: {
+              id: true,
+              name: true,
+              createdAtM: true,
+            },
+            where: (keysTable, { isNull }) => {
+              return isNull(keysTable.deletedAtM);
+            },
+            orderBy: (keysTable, { desc }) => [desc(keysTable.createdAtM)],
+          },
+        },
       },
     },
     orderBy: (table, { asc }) => [asc(table.id)],
@@ -44,7 +60,32 @@ export async function fetchApiOverview({
   const nextCursor =
     hasMore && apiItems.length > 0 ? { id: apiItems[apiItems.length - 1].id } : undefined;
 
-  const apiList = await apiItemsWithApproxKeyCounts(apiItems);
+  // Transform the data to include key information
+  const apiList = await Promise.all(
+    apiItems.map(async (api) => {
+      const keyspaceId = api.keyAuth?.id || null;
+
+      // Transform the keys data for the new keyDetails field
+      const keyDetails =
+        api.keyAuth?.keys?.map((key) => ({
+          id: key.id,
+          name: key.name,
+        })) || [];
+
+      return {
+        id: api.id,
+        name: api.name,
+        keyspaceId,
+        keyDetails,
+        // Include count for backward compatibility
+        keys: [
+          {
+            count: api.keyAuth?.sizeApprox || 0,
+          },
+        ],
+      };
+    }),
+  );
 
   return {
     apiList,

apps/dashboard/app/(app)/layout.tsx

@@ -1,4 +1,4 @@
-import { AppSidebar } from "@/components/app-sidebar";
+import { AppSidebar } from "@/components/navigation/sidebar/app-sidebar";
 import { SidebarMobile } from "@/components/navigation/sidebar/sidebar-mobile";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { getTenantId } from "@/lib/auth";

apps/dashboard/app/(app)/settings/root-keys/new/client.tsx

@@ -279,7 +279,7 @@ export const Client: React.FC<Props> = ({ apis }) => {
           }
         }}
       >
-        <DialogContent className="flex flex-col max-sm:w-full bg-grayA-1 border-gray-4">
+        <DialogContent className="flex flex-col max-sm:w-full dark:bg-grayA-1 border-gray-4 bg-white">
           <DialogHeader>
             <DialogTitle>Your API Key</DialogTitle>
             <DialogDescription className="w-fit text-accent-10">