Cleanup frontend and unify typing

Author: pablogsal

backend/app/routers/admin.py

@@ -9,6 +9,7 @@
 from fastapi import APIRouter, Depends, HTTPException, status, Response, Request
 from sqlalchemy import select, delete, func, text, desc, and_
 from sqlalchemy.ext.asyncio import AsyncSession
+import sqlparse
 
 from ..database import get_database
 from ..admin_auth import (
@@ -1084,19 +1085,18 @@ async def execute_query(
     admin_username = admin_session.github_username
 
     try:
-        # Execute the query
-        result = await db.execute(text(query))
-        
+        # Handle single statement queries properly
         if query_upper.startswith("SELECT") or query_upper.startswith("WITH"):
-            # For SELECT queries, fetch all results
+            # For SELECT queries, execute and fetch results
+            result = await db.execute(text(query))
             rows = result.fetchall()
 
             # Convert to list of dictionaries
             if rows:
                 column_names = list(result.keys())
                 rows_data = [dict(zip(column_names, row)) for row in rows]
             else:
-                column_names = []
+                column_names = list(result.keys()) if result.keys() else []
                 rows_data = []
 
             execution_time = (time.time() - start_time) * 1000
@@ -1108,13 +1108,21 @@ async def execute_query(
                 execution_time_ms=round(execution_time, 2),
             )
         else:
-            # For non-SELECT queries, commit and return affected rows
+            # For non-SELECT queries (INSERT, UPDATE, DELETE, etc.)
+            # Handle multiple statements if needed
+            statements = [stmt.strip() for stmt in sqlparse.split(query) if stmt.strip()]
+            
+            total_affected_rows = 0
+            for stmt in statements:
+                stmt_result = await db.execute(text(stmt))
+                total_affected_rows += stmt_result.rowcount
+            
             await db.commit()
             execution_time = (time.time() - start_time) * 1000
 
             return QueryResult(
                 success=True,
-                affected_rows=result.rowcount,
+                affected_rows=total_affected_rows,
                 execution_time_ms=round(execution_time, 2),
             )
 

backend/requirements.txt

@@ -11,3 +11,4 @@ pytest
 pytest-asyncio
 httpx
 authlib>=1.2.0
+sqlparse

frontend/package-lock.json

@@ -22,6 +22,7 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "ace-builds": "^1.43.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
@@ -32,6 +33,7 @@
     "patch-package": "^8.0.0",
     "prettier": "^3.5.3",
     "react": "^18.3.1",
+    "react-ace": "^14.0.1",
     "react-dom": "^18.3.1",
     "recharts": "^2.15.1",
     "tailwind-merge": "^3.0.1",

frontend/package.json

@@ -40,18 +40,11 @@ import {
   Shield,
   Crown,
 } from 'lucide-react';
-
-interface AdminUser {
-  id: number;
-  github_username: string;
-  added_by: string;
-  added_at: string;
-  is_active: boolean;
-  notes?: string;
-}
+import { api } from '@/lib/api';
+import type { AdminUserResponse, AdminUserCreate } from '@/lib/types';
 
 export default function AdminUsersManager() {
-  const [users, setUsers] = useState<AdminUser[]>([]);
+  const [users, setUsers] = useState<AdminUserResponse[]>([]);
   const [loading, setLoading] = useState(true);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [newUser, setNewUser] = useState({
@@ -60,25 +53,15 @@ export default function AdminUsersManager() {
   });
   const { toast } = useToast();
 
-  const API_BASE =
-    process.env.NEXT_PUBLIC_API_BASE || 'http://localhost:8000/api';
 
   useEffect(() => {
     fetchUsers();
   }, []);
 
   const fetchUsers = async () => {
     try {
-      const response = await fetch(`${API_BASE}/admin/users`, {
-        credentials: 'include',
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setUsers(data);
-      } else {
-        throw new Error('Failed to fetch admin users');
-      }
+      const data = await api.getAdminUsersList();
+      setUsers(data);
     } catch (error) {
       console.error('Error fetching admin users:', error);
       toast({
@@ -102,31 +85,18 @@ export default function AdminUsersManager() {
     }
 
     try {
-      const response = await fetch(`${API_BASE}/admin/users`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-        body: JSON.stringify({
-          github_username: newUser.github_username.trim(),
-          notes: newUser.notes.trim() || null,
-        }),
+      const createdUser = await api.createAdminUser({
+        github_username: newUser.github_username.trim(),
+        notes: newUser.notes.trim() || undefined,
+      });
+      
+      setUsers((prev) => [...prev, createdUser]);
+      setNewUser({ github_username: '', notes: '' });
+      setDialogOpen(false);
+      toast({
+        title: 'Success',
+        description: `Admin user @${createdUser.github_username} created successfully`,
       });
-
-      if (response.ok) {
-        const createdUser = await response.json();
-        setUsers((prev) => [...prev, createdUser]);
-        setNewUser({ github_username: '', notes: '' });
-        setDialogOpen(false);
-        toast({
-          title: 'Success',
-          description: `Admin user @${createdUser.github_username} created successfully`,
-        });
-      } else {
-        const error = await response.json();
-        throw new Error(error.detail || 'Failed to create admin user');
-      }
     } catch (error) {
       console.error('Error creating admin user:', error);
       toast({
@@ -152,23 +122,14 @@ export default function AdminUsersManager() {
     }
 
     try {
-      const response = await fetch(`${API_BASE}/admin/users/${username}`, {
-        method: 'DELETE',
-        credentials: 'include',
+      await api.deleteAdminUser(username);
+      setUsers((prev) =>
+        prev.filter((user) => user.github_username !== username)
+      );
+      toast({
+        title: 'Success',
+        description: `Admin user @${username} removed successfully`,
       });
-
-      if (response.ok) {
-        setUsers((prev) =>
-          prev.filter((user) => user.github_username !== username)
-        );
-        toast({
-          title: 'Success',
-          description: `Admin user @${username} removed successfully`,
-        });
-      } else {
-        const error = await response.json();
-        throw new Error(error.detail || 'Failed to remove admin user');
-      }
     } catch (error) {
       console.error('Error removing admin user:', error);
       toast({
@@ -227,26 +188,24 @@ export default function AdminUsersManager() {
             <DialogContent>
               <DialogHeader>
                 <DialogTitle>Add New Admin User</DialogTitle>
-                <DialogDescription className="space-y-2">
-                  <p>
-                    Grant administrative access to a GitHub user. They will be
-                    able to access this admin panel and manage system settings.
-                  </p>
-                  <div className="p-3 bg-muted/50 border rounded-md">
-                    <div className="flex items-start gap-2">
-                      <Shield className="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" />
-                      <div className="text-sm">
-                        <p className="font-medium">
-                          Administrative privileges include:
-                        </p>
-                        <p className="text-muted-foreground text-xs mt-1">
-                          Binary configurations • Environment settings • Run
-                          management • User administration
-                        </p>
+                <DialogDescription>
+                  Grant administrative access to a GitHub user. They will be
+                  able to access this admin panel and manage system settings.
+                </DialogDescription>
+                <div className="p-3 bg-muted/50 border rounded-md">
+                  <div className="flex items-start gap-2">
+                    <Shield className="w-4 h-4 text-orange-500 mt-0.5 flex-shrink-0" />
+                    <div className="text-sm">
+                      <div className="font-medium">
+                        Administrative privileges include:
+                      </div>
+                      <div className="text-muted-foreground text-xs mt-1">
+                        Binary configurations • Environment settings • Run
+                        management • User administration
                       </div>
                     </div>
                   </div>
-                </DialogDescription>
+                </div>
               </DialogHeader>
               <div className="space-y-4">
                 <div>