Refactor API keys page

.gitignore

@@ -41,6 +41,8 @@ next-env.d.ts
 CLAUDE.md
 .agent
 
+# Cursor IDE
+.cursor/
 
 # tooling
 /template

src/app/dashboard/[teamSlug]/keys/page.tsx

@@ -1,55 +1,23 @@
-import { Plus } from 'lucide-react'
-import CreateApiKeyDialog from '@/features/dashboard/settings/keys/create-api-key-dialog'
-import ApiKeysTable from '@/features/dashboard/settings/keys/table'
-import Frame from '@/ui/frame'
-import { Button } from '@/ui/primitives/button'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/ui/primitives/card'
+import { Page } from '@/features/dashboard/layouts/page'
+import { ApiKeysPageContent } from '@/features/dashboard/settings/keys'
+import { HydrateClient, prefetch, trpc } from '@/trpc/server'
 
-interface KeysPageClientProps {
+interface KeysPageProps {
   params: Promise<{
     teamSlug: string
   }>
 }
 
-export default async function KeysPage({ params }: KeysPageClientProps) {
-  return (
-    <Frame
-      classNames={{
-        wrapper: 'w-full max-md:p-0',
-        frame: 'max-md:border-none',
-      }}
-    >
-      <Card className="w-full">
-        <CardHeader>
-          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between sm:gap-6">
-            <div className="flex flex-col gap-2">
-              <CardTitle>Manage API Keys</CardTitle>
-              <CardDescription className="max-w-[400px]">
-                API Keys are used to authenticate API requests from your teams
-                applications.
-              </CardDescription>
-            </div>
+export default async function KeysPage({ params }: KeysPageProps) {
+  const { teamSlug } = await params
 
-            <CreateApiKeyDialog>
-              <Button className="w-full sm:w-auto sm:self-start">
-                <Plus className="size-4" /> CREATE KEY
-              </Button>
-            </CreateApiKeyDialog>
-          </div>
-        </CardHeader>
+  prefetch(trpc.teams.listApiKeys.queryOptions({ teamSlug }))
 
-        <CardContent>
-          <div className="w-full overflow-x-auto">
-            <ApiKeysTable params={params} className="min-w-[800px]" />
-          </div>
-        </CardContent>
-      </Card>
-    </Frame>
+  return (
+    <HydrateClient>
+      <Page>
+        <ApiKeysPageContent teamSlug={teamSlug} />
+      </Page>
+    </HydrateClient>
   )
 }

src/configs/cache.ts

@@ -1,7 +1,6 @@
 export const CACHE_TAGS = {
   TEAM_ID_FROM_SLUG: (segment: string) => `team-id-from-slug-${segment}`,
   TEAM_USAGE: (teamId: string) => `team-usage-${teamId}`,
-  TEAM_API_KEYS: (teamId: string) => `team-api-keys-${teamId}`,
 
   DEFAULT_TEMPLATES: 'default-templates',
 } as const

src/core/server/api/routers/teams.ts

@@ -1,15 +1,30 @@
+import { z } from 'zod'
+import { createKeysRepository } from '@/core/modules/keys/repository.server'
 import { createUserTeamsRepository } from '@/core/modules/teams/user-teams-repository.server'
 import { throwTRPCErrorFromRepoError } from '@/core/server/adapters/errors'
-import { withAuthedRequestRepository } from '@/core/server/api/middlewares/repository'
+import {
+  withAuthedRequestRepository,
+  withTeamAuthedRequestRepository,
+} from '@/core/server/api/middlewares/repository'
 import { createTRPCRouter } from '@/core/server/trpc/init'
-import { protectedProcedure } from '@/core/server/trpc/procedures'
+import {
+  protectedProcedure,
+  protectedTeamProcedure,
+} from '@/core/server/trpc/procedures'
+import { l } from '@/core/shared/clients/logger/logger'
 
 const teamsRepositoryProcedure = protectedProcedure.use(
   withAuthedRequestRepository(createUserTeamsRepository, (teamsRepository) => ({
     teamsRepository,
   }))
 )
 
+const keysRepositoryProcedure = protectedTeamProcedure.use(
+  withTeamAuthedRequestRepository(createKeysRepository, (keysRepository) => ({
+    keysRepository,
+  }))
+)
+
 export const teamsRouter = createTRPCRouter({
   list: teamsRepositoryProcedure.query(async ({ ctx }) => {
     const teamsResult = await ctx.teamsRepository.listUserTeams()
@@ -20,4 +35,70 @@ export const teamsRouter = createTRPCRouter({
 
     return teamsResult.data
   }),
+
+  listApiKeys: keysRepositoryProcedure.query(async ({ ctx }) => {
+    const result = await ctx.keysRepository.listTeamApiKeys()
+
+    if (!result.ok) {
+      throwTRPCErrorFromRepoError(result.error)
+    }
+
+    return { apiKeys: result.data }
+  }),
+
+  createApiKey: keysRepositoryProcedure
+    .input(
+      z.object({
+        name: z
+          .string({ error: 'Name is required' })
+          .min(1, 'Name cannot be empty')
+          .max(50, 'Name cannot be longer than 50 characters')
+          .trim(),
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      const { name } = input
+
+      const result = await ctx.keysRepository.createApiKey(name)
+
+      if (!result.ok) {
+        l.error({
+          key: 'create_api_key_trpc:error',
+          message: result.error.message,
+          error: result.error,
+          team_id: ctx.teamId,
+          user_id: ctx.session.user.id,
+          context: { name },
+        })
+
+        throwTRPCErrorFromRepoError(result.error)
+      }
+
+      return { createdApiKey: result.data }
+    }),
+
+  deleteApiKey: keysRepositoryProcedure
+    .input(
+      z.object({
+        apiKeyId: z.uuid(),
+      })
+    )
+    .mutation(async ({ ctx, input }) => {
+      const { apiKeyId } = input
+
+      const result = await ctx.keysRepository.deleteApiKey(apiKeyId)
+
+      if (!result.ok) {
+        l.error({
+          key: 'delete_api_key_trpc:error',
+          message: result.error.message,
+          error: result.error,
+          team_id: ctx.teamId,
+          user_id: ctx.session.user.id,
+          context: { apiKeyId },
+        })
+
+        throwTRPCErrorFromRepoError(result.error)
+      }
+    }),
 })

src/features/dashboard/billing/invoices.tsx

@@ -50,16 +50,14 @@ function InvoicesEmpty({ error }: InvoicesEmptyProps) {
   return (
     <TableEmptyState colSpan={4}>
       <InvoiceIcon
-        className={cn('size-4', error && 'text-accent-error-highlight')}
-      />
-      <p
         className={cn(
-          'prose-body-highlight',
+          'size-4 shrink-0',
           error && 'text-accent-error-highlight'
         )}
-      >
+      />
+      <span className={cn(error && 'text-accent-error-highlight')}>
         {error ? error : 'No invoices yet'}
-      </p>
+      </span>
     </TableEmptyState>
   )
 }

src/features/dashboard/layouts/page.tsx

@@ -7,7 +7,7 @@ interface PageProps {
 }
 
 export const Page = ({ children, className }: PageProps) => (
-  <div className={cn('mx-auto w-full max-w-[900px]', className)}>
+  <div className={cn('mx-auto w-full max-w-[900px] p-3 md:p-0', className)}>
     {children}
   </div>
 )

src/features/dashboard/layouts/wrapper.tsx

@@ -11,7 +11,7 @@ export function DefaultDashboardLayout({
 }) {
   return (
     <div className="flex-1 overflow-y-auto">
-      <div className="container mx-auto p-0 md:p-8 2xl:p-24 h-min w-full">
+      <div className="container mx-auto h-min w-full p-0 md:p-10 2xl:p-24">
         <CatchErrorBoundary
           classNames={{
             wrapper: 'h-full w-full',