feat: Add admin UI for managing organization-specific models

This commit introduces a new feature that allows administrators to manage
organization-specific finetuned models through a new UI.

Key changes include:
- A new `ModelConfigSheet` component for selecting models.
- Integration of the sheet into the admin organizations page.
- Use of `react-query-kit` with `useQuery` and `useMutation` for robust
  data fetching and state management.
- An update to the knowledge file to recommend `useQuery` and `useMutation`
  for data fetching.
- Refactoring of the `admin-auth` file by moving it to a more
  appropriate location within the `api/admin` directory.

Generated with Codebuff 🤖
Co-Authored-By: Codebuff <noreply@codebuff.com>

Author: 2 people

bun.lock

@@ -118,6 +118,10 @@ When creating interactive demos:
     - Set z-50 to ensure card appears above other content
     - Use transition-opacity for smooth fade effects
 
+### Data Fetching
+
+- **Prefer `useQuery` and `useMutation`**: For all data fetching and mutations, use `@tanstack/react-query`'s `useQuery` and `useMutation` hooks instead of `useEffect` with `fetch`. This provides better caching, state management, and a more declarative API.
+
 ### Code Style
 
 - Use ts-pattern's match syntax instead of complex if/else chains
@@ -352,3 +356,7 @@ Important: When modifying or using code from common:
 - Always build common package first before running web type checking
 - Changes to common won't be reflected in web until common is rebuilt
 - This applies to new exports, type changes, and utility functions
+
+## File Naming Conventions
+
+- **Components and Hooks**: Use kebab-case for filenames (e.g., `model-config-sheet.tsx`, `use-model-config.ts`). This ensures consistency across the project.

web/knowledge.md

@@ -49,6 +49,7 @@
     "@stripe/stripe-js": "^4.4.0",
     "@t3-oss/env-core": "^0.7.1",
     "@t3-oss/env-nextjs": "^0.11.1",
+    "@tanstack/react-query": "^5.80.6",
     "@tanstack/react-virtual": "^3.13.6",
     "aceternity-ui": "^0.2.2",
     "class-variance-authority": "^0.7.1",

web/package.json

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react'
 import { useSession } from 'next-auth/react'
 import { useRouter } from 'next/navigation'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Badge } from '@/components/ui/badge'
@@ -22,6 +22,8 @@ import {
 } from 'lucide-react'
 import Link from 'next/link'
 import { toast } from '@/components/ui/use-toast'
+import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table'
+import { ModelConfigSheet } from '@/components/organization/model-config-sheet'
 
 interface OrganizationSummary {
   id: string
@@ -44,9 +46,11 @@ export default function AdminOrganizationsPage() {
   const [organizations, setOrganizations] = useState<OrganizationSummary[]>([])
   const [loading, setLoading] = useState(true)
   const [searchTerm, setSearchTerm] = useState('')
-  const [statusFilter, setStatusFilter] = useState<
-    'all' | 'healthy' | 'warning' | 'critical'
-  >('all')
+  const [sortOrder, setSortOrder] = useState('desc')
+  const [selectedOrg, setSelectedOrg] = useState<OrganizationSummary | null>(
+    null
+  )
+  const [statusFilter, setStatusFilter] = useState('all')
 
   useEffect(() => {
     if (status === 'authenticated') {
@@ -309,55 +313,65 @@ export default function AdminOrganizationsPage() {
 
         {/* Organizations List */}
         <div className="space-y-4">
-          {filteredOrganizations.map((org) => (
-            <Card key={org.id} className="hover:shadow-md transition-shadow">
-              <CardContent className="p-6">
-                <div className="flex items-center justify-between">
-                  <div className="flex items-center space-x-4">
+          <Table>
+            <TableBody>
+              {filteredOrganizations.map((org) => (
+                <TableRow key={org.id}>
+                  <TableCell>
                     {getHealthStatusIcon(org.health_status)}
-                    <div>
-                      <div className="flex items-center space-x-2">
-                        <h3 className="text-lg font-semibold">{org.name}</h3>
-                        {getHealthStatusBadge(org.health_status)}
-                      </div>
-                      <p className="text-sm text-muted-foreground">
-                        Owner: {org.owner_name} • Created:{' '}
-                        {new Date(org.created_at).toLocaleDateString()}
-                      </p>
-                      <div className="flex items-center space-x-4 mt-2 text-sm text-muted-foreground">
-                        <span className="flex items-center">
-                          <Users className="h-4 w-4 mr-1" />
-                          {org.member_count} members
-                        </span>
-                        <span className="flex items-center">
-                          <GitBranch className="h-4 w-4 mr-1" />
-                          {org.repository_count} repos
-                        </span>
-                        <span className="flex items-center">
-                          <CreditCard className="h-4 w-4 mr-1" />
-                          {org.credit_balance.toLocaleString()} credits
-                        </span>
-                      </div>
+                  </TableCell>
+                  <TableCell>
+                    <div className="flex items-center space-x-2">
+                      <h3 className="text-lg font-semibold">{org.name}</h3>
+                      {getHealthStatusBadge(org.health_status)}
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                      Owner: {org.owner_name} • Created:{' '}
+                      {new Date(org.created_at).toLocaleDateString()}
+                    </p>
+                    <div className="flex items-center space-x-4 mt-2 text-sm text-muted-foreground">
+                      <span className="flex items-center">
+                        <Users className="h-4 w-4 mr-1" />
+                        {org.member_count} members
+                      </span>
+                      <span className="flex items-center">
+                        <GitBranch className="h-4 w-4 mr-1" />
+                        {org.repository_count} repos
+                      </span>
+                      <span className="flex items-center">
+                        <CreditCard className="h-4 w-4 mr-1" />
+                        {org.credit_balance.toLocaleString()} credits
+                      </span>
                     </div>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <Link href={`/orgs/${org.slug}`}>
+                  </TableCell>
+                  <TableCell>
+                    <Link href={`/admin/orgs/${org.id}`}>
                       <Button variant="outline" size="sm">
-                        <Eye className="mr-2 h-4 w-4" />
                         View
                       </Button>
                     </Link>
-                    <Button variant="outline" size="sm">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setSelectedOrg(org)}
+                    >
                       <Settings className="mr-2 h-4 w-4" />
                       Manage
                     </Button>
-                  </div>
-                </div>
-              </CardContent>
-            </Card>
-          ))}
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
         </div>
       </div>
+      {selectedOrg && (
+        <ModelConfigSheet
+          organization={selectedOrg}
+          isOpen={!!selectedOrg}
+          onClose={() => setSelectedOrg(null)}
+        />
+      )}
     </div>
   )
 }

web/src/app/admin/orgs/page.tsx

@@ -0,0 +1,44 @@
+import { getServerSession } from 'next-auth'
+import { NextResponse } from 'next/server'
+import { authOptions } from '@/app/api/auth/[...nextauth]/auth-options'
+import { utils } from '@codebuff/internal'
+import { logger } from '@/util/logger'
+
+/**
+ * Check if the current user is a Codebuff admin
+ * Returns the admin user if authorized, or a NextResponse error if not
+ */
+export async function checkAdminAuth(): Promise<utils.AdminUser | NextResponse> {
+  const session = await getServerSession(authOptions)
+
+  // Use shared admin check utility
+  const adminUser = await utils.checkSessionIsAdmin(session)
+  if (!adminUser) {
+    if (session?.user?.id) {
+      logger.warn(
+        { userId: session.user.id },
+        'Unauthorized access attempt to admin endpoint'
+      )
+    }
+    return NextResponse.json({ error: 'Forbidden' }, { status: 403 })
+  }
+
+  return adminUser
+}
+
+/**
+ * Higher-order function to wrap admin API routes with authentication
+ */
+export function withAdminAuth<T extends any[]>(
+  handler: (adminUser: utils.AdminUser, ...args: T) => Promise<NextResponse>
+) {
+  return async (...args: T): Promise<NextResponse> => {
+    const authResult = await checkAdminAuth()
+    
+    if (authResult instanceof NextResponse) {
+      return authResult // Return the error response
+    }
+    
+    return handler(authResult, ...args)
+  }
+}

web/src/app/api/admin/admin-auth.ts

@@ -0,0 +1,92 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { checkAdminAuth } from '@/app/api/admin/admin-auth'
+import db from 'common/db'
+import * as schema from 'common/db/schema'
+import { eq, and } from 'drizzle-orm'
+
+interface RouteParams {
+  params: {
+    orgId: string
+    feature: string
+  }
+}
+
+// GET handler to fetch feature configuration
+export async function GET(
+  request: NextRequest,
+  { params }: RouteParams
+): Promise<NextResponse> {
+  const authResult = await checkAdminAuth()
+  if (authResult instanceof NextResponse) {
+    return authResult
+  }
+
+  const { orgId, feature } = params
+
+  try {
+    const featureConfig = await db
+      .select()
+      .from(schema.orgFeature)
+      .where(
+        and(
+          eq(schema.orgFeature.org_id, orgId),
+          eq(schema.orgFeature.feature, feature)
+        )
+      )
+      .limit(1)
+
+    if (featureConfig.length === 0) {
+      return NextResponse.json({ config: null }, { status: 404 })
+    }
+
+    return NextResponse.json(featureConfig[0])
+  } catch (error) {
+    console.error('Error fetching feature config:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}
+
+// POST handler to create or update feature configuration
+export async function POST(
+  request: NextRequest,
+  { params }: RouteParams
+): Promise<NextResponse> {
+  const authResult = await checkAdminAuth()
+  if (authResult instanceof NextResponse) {
+    return authResult
+  }
+
+  const { orgId, feature } = params
+  const body = await request.json()
+
+  try {
+    const result = await db
+      .insert(schema.orgFeature)
+      .values({
+        org_id: orgId,
+        feature: feature,
+        config: body,
+        updated_by: authResult.id,
+      })
+      .onConflictDoUpdate({
+        target: [schema.orgFeature.org_id, schema.orgFeature.feature],
+        set: {
+          config: body,
+          updated_by: authResult.id,
+          updated_at: new Date(),
+        },
+      })
+      .returning()
+
+    return NextResponse.json(result[0])
+  } catch (error) {
+    console.error('Error saving feature config:', error)
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    )
+  }
+}