feat: implement AdminRoute for admin access control and enhance UsersPage with user management features

src/App.tsx

@@ -27,6 +27,24 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
   return <>{children}</>
 }
 
+function AdminRoute({ children }: { children: React.ReactNode }) {
+  const { user, loading } = useAuth()
+  
+  if (loading) {
+    return <div className="min-h-screen flex items-center justify-center">Loading...</div>
+  }
+  
+  if (!user) {
+    return <Navigate to="/login" replace />
+  }
+  
+  if (user.role !== 'admin') {
+    return <Navigate to="/" replace />
+  }
+  
+  return <>{children}</>
+}
+
 function AppRoutes() {
   const { user } = useAuth()
   
@@ -56,14 +74,14 @@ function AppRoutes() {
         </ProtectedRoute>
       } />
       <Route path="/admin/users" element={
-        <ProtectedRoute>
+        <AdminRoute>
           <UsersPage />
-        </ProtectedRoute>
+        </AdminRoute>
       } />
       <Route path="/admin/settings" element={
-        <ProtectedRoute>
+        <AdminRoute>
           <SettingsPage />
-        </ProtectedRoute>
+        </AdminRoute>
       } />
     </Routes>
   )

src/lib/api/services/admin.ts

@@ -0,0 +1,54 @@
+import { apiClient } from '../client'
+import type { User } from '@/types/auth'
+
+export interface Plan {
+  id: number
+  code: string
+  name: string
+  description?: string
+  credits: number
+  max_credits: number
+  created_at: string
+  updated_at: string
+}
+
+export interface UserUpdate {
+  name?: string
+  plan_id?: number
+  credits?: number
+  is_active?: boolean
+}
+
+export interface MessageResponse {
+  message: string
+}
+
+export class AdminService {
+  async listUsers(limit = 100, offset = 0): Promise<User[]> {
+    return apiClient.get<User[]>(`/api/v1/admin/users/`, {
+      params: { limit, offset }
+    })
+  }
+
+  async getUser(userId: number): Promise<User> {
+    return apiClient.get<User>(`/api/v1/admin/users/${userId}`)
+  }
+
+  async updateUser(userId: number, data: UserUpdate): Promise<User> {
+    return apiClient.patch<User>(`/api/v1/admin/users/${userId}`, data)
+  }
+
+  async disableUser(userId: number): Promise<MessageResponse> {
+    return apiClient.post<MessageResponse>(`/api/v1/admin/users/${userId}/disable`)
+  }
+
+  async enableUser(userId: number): Promise<MessageResponse> {
+    return apiClient.post<MessageResponse>(`/api/v1/admin/users/${userId}/enable`)
+  }
+
+  async listPlans(): Promise<Plan[]> {
+    return apiClient.get<Plan[]>(`/api/v1/admin/users/plans/list`)
+  }
+}
+
+export const adminService = new AdminService()

src/pages/admin/UsersPage.tsx

@@ -1,6 +1,153 @@
+import { useState, useEffect } from 'react'
 import { AppLayout } from '@/components/AppLayout'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
+import { Badge } from '@/components/ui/badge'
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'
+import { Label } from '@/components/ui/label'
+import { Input } from '@/components/ui/input'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Switch } from '@/components/ui/switch'
+import { Skeleton } from '@/components/ui/skeleton'
+import { toast } from 'sonner'
+import { Edit, UserCheck, UserX } from 'lucide-react'
+import { adminService, type Plan } from '@/lib/api/services/admin'
+import type { User } from '@/types/auth'
+
+interface EditUserData {
+  name: string
+  plan_id: number
+  credits: number
+  is_active: boolean
+}
 
 export function UsersPage() {
+  const [users, setUsers] = useState<User[]>([])
+  const [plans, setPlans] = useState<Plan[]>([])
+  const [loading, setLoading] = useState(true)
+  const [editingUser, setEditingUser] = useState<User | null>(null)
+  const [editData, setEditData] = useState<EditUserData>({
+    name: '',
+    plan_id: 0,
+    credits: 0,
+    is_active: true
+  })
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    loadData()
+  }, [])
+
+  const loadData = async () => {
+    try {
+      const [usersData, plansData] = await Promise.all([
+        adminService.listUsers(),
+        adminService.listPlans()
+      ])
+      setUsers(usersData)
+      setPlans(plansData)
+    } catch (error) {
+      toast.error('Failed to load data')
+      console.error('Error loading data:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleEditUser = (user: User) => {
+    setEditingUser(user)
+    setEditData({
+      name: user.name,
+      plan_id: user.plan.id,
+      credits: user.credits,
+      is_active: user.is_active
+    })
+  }
+
+  const handleSaveUser = async () => {
+    if (!editingUser) return
+
+    setSaving(true)
+    try {
+      const updatedUser = await adminService.updateUser(editingUser.id, editData)
+      setUsers(prev => prev.map(u => u.id === editingUser.id ? updatedUser : u))
+      setEditingUser(null)
+      toast.success('User updated successfully')
+    } catch (error) {
+      toast.error('Failed to update user')
+      console.error('Error updating user:', error)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleToggleUserStatus = async (user: User) => {
+    try {
+      if (user.is_active) {
+        await adminService.disableUser(user.id)
+        toast.success('User disabled successfully')
+      } else {
+        await adminService.enableUser(user.id)
+        toast.success('User enabled successfully')
+      }
+      // Reload data to get updated user status
+      loadData()
+    } catch (error) {
+      toast.error(`Failed to ${user.is_active ? 'disable' : 'enable'} user`)
+      console.error('Error toggling user status:', error)
+    }
+  }
+
+  const getRoleBadge = (role: string) => {
+    return (
+      <Badge variant={role === 'admin' ? 'destructive' : 'secondary'}>
+        {role}
+      </Badge>
+    )
+  }
+
+  const getStatusBadge = (isActive: boolean) => {
+    return (
+      <Badge variant={isActive ? 'default' : 'secondary'}>
+        {isActive ? 'Active' : 'Inactive'}
+      </Badge>
+    )
+  }
+
+  if (loading) {
+    return (
+      <AppLayout 
+        breadcrumb={{
+          items: [
+            { label: 'Dashboard', href: '/' },
+            { label: 'Admin' },
+            { label: 'Users' }
+          ]
+        }}
+      >
+        <div className="flex-1 space-y-4">
+          <div className="flex justify-between items-center">
+            <Skeleton className="h-8 w-48" />
+            <Skeleton className="h-10 w-32" />
+          </div>
+          <Card>
+            <CardHeader>
+              <Skeleton className="h-6 w-32" />
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {Array.from({ length: 5 }).map((_, i) => (
+                  <Skeleton key={i} className="h-12 w-full" />
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </AppLayout>
+    )
+  }
+
   return (
     <AppLayout 
       breadcrumb={{
@@ -11,12 +158,213 @@ export function UsersPage() {
         ]
       }}
     >
-      <div className="flex-1 rounded-xl bg-muted/50 p-4">
+      <div className="flex-1 space-y-6">
-        <h1 className="text-2xl font-bold mb-4">User Management</h1>
+        <div className="flex justify-between items-center">
-        <p className="text-muted-foreground">
+          <h1 className="text-3xl font-bold">User Management</h1>
-          User administration interface coming soon...
+          <Button onClick={loadData} disabled={loading}>
-        </p>
+            Refresh
+          </Button>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Users ({users.length})</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Name</TableHead>
+                  <TableHead>Email</TableHead>
+                  <TableHead>Role</TableHead>
+                  <TableHead>Plan</TableHead>
+                  <TableHead>Credits</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Actions</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {users.map((user) => (
+                  <TableRow key={user.id}>
+                    <TableCell className="font-medium">{user.name}</TableCell>
+                    <TableCell>{user.email}</TableCell>
+                    <TableCell>{getRoleBadge(user.role)}</TableCell>
+                    <TableCell>{user.plan.name}</TableCell>
+                    <TableCell>{user.credits.toLocaleString()}</TableCell>
+                    <TableCell>{getStatusBadge(user.is_active)}</TableCell>
+                    <TableCell>
+                      <div className="flex items-center gap-2">
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleEditUser(user)}
+                        >
+                          <Edit className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleToggleUserStatus(user)}
+                        >
+                          {user.is_active ? (
+                            <UserX className="h-4 w-4" />
+                          ) : (
+                            <UserCheck className="h-4 w-4" />
+                          )}
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </CardContent>
+        </Card>
       </div>
+
+      {/* Edit User Sheet */}
+      <Sheet open={!!editingUser} onOpenChange={(open) => !open && setEditingUser(null)}>
+        <SheetContent className="w-full sm:max-w-lg overflow-y-auto">
+          <div className="px-6">
+            <div className="pt-4 pb-6">
+              <h2 className="text-xl font-semibold">Edit User</h2>
+            </div>
+            
+            {editingUser && (
+              <div className="space-y-8 pb-6">
+                {/* User Information Section */}
+                <div className="space-y-4">
+                  <h3 className="font-semibold text-base">User Information</h3>
+                  
+                  <div className="grid grid-cols-1 gap-4">
+                    <div className="grid grid-cols-3 gap-2 text-sm">
+                      <span className="text-muted-foreground font-medium">User ID:</span>
+                      <span className="col-span-2 font-mono">{editingUser.id}</span>
+                    </div>
+                    <div className="grid grid-cols-3 gap-2 text-sm">
+                      <span className="text-muted-foreground font-medium">Email:</span>
+                      <span className="col-span-2 break-all">{editingUser.email}</span>
+                    </div>
+                    <div className="grid grid-cols-3 gap-2 text-sm">
+                      <span className="text-muted-foreground font-medium">Role:</span>
+                      <span className="col-span-2">{getRoleBadge(editingUser.role)}</span>
+                    </div>
+                    <div className="grid grid-cols-3 gap-2 text-sm">
+                      <span className="text-muted-foreground font-medium">Created:</span>
+                      <span className="col-span-2">{new Date(editingUser.created_at).toLocaleDateString()}</span>
+                    </div>
+                    <div className="grid grid-cols-3 gap-2 text-sm">
+                      <span className="text-muted-foreground font-medium">Last Updated:</span>
+                      <span className="col-span-2">{new Date(editingUser.updated_at).toLocaleDateString()}</span>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Editable Fields Section */}
+                <div className="space-y-4">
+                  <h3 className="font-semibold text-base">Editable Settings</h3>
+
+                  <div className="space-y-6">
+                    <div className="space-y-2">
+                      <Label htmlFor="name" className="text-sm font-medium">Display Name</Label>
+                      <Input
+                        id="name"
+                        value={editData.name}
+                        onChange={(e) => setEditData(prev => ({ ...prev, name: e.target.value }))}
+                        placeholder="Enter user's display name"
+                        className="h-10"
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        This is the name displayed throughout the application
+                      </p>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="plan" className="text-sm font-medium">Subscription Plan</Label>
+                      <Select
+                        value={editData.plan_id.toString()}
+                        onValueChange={(value) => setEditData(prev => ({ ...prev, plan_id: parseInt(value) }))}
+                      >
+                        <SelectTrigger className="h-10">
+                          <SelectValue placeholder="Select a plan" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {plans.map((plan) => (
+                            <SelectItem key={plan.id} value={plan.id.toString()}>
+                              <div className="flex flex-col items-start">
+                                <span className="font-medium">{plan.name}</span>
+                                <span className="text-xs text-muted-foreground">
+                                  {plan.max_credits.toLocaleString()} max credits
+                                </span>
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <p className="text-xs text-muted-foreground">
+                        Current plan: <span className="font-medium">{editingUser.plan.name}</span>
+                      </p>
+                    </div>
+
+                    <div className="space-y-2">
+                      <Label htmlFor="credits" className="text-sm font-medium">Current Credits</Label>
+                      <Input
+                        id="credits"
+                        type="number"
+                        min="0"
+                        step="1"
+                        value={editData.credits}
+                        onChange={(e) => setEditData(prev => ({ ...prev, credits: parseInt(e.target.value) || 0 }))}
+                        placeholder="Enter credit amount"
+                        className="h-10"
+                      />
+                      <p className="text-xs text-muted-foreground">
+                        Maximum allowed: <span className="font-medium">{editingUser.plan.max_credits.toLocaleString()}</span>
+                      </p>
+                    </div>
+
+                    <div className="space-y-3">
+                      <Label className="text-sm font-medium">Account Status</Label>
+                      <div className="flex items-center justify-between p-3 border rounded-lg">
+                        <div className="flex flex-col">
+                          <span className="text-sm font-medium">Allow Login Access</span>
+                          <span className="text-xs text-muted-foreground">
+                            {editData.is_active ? 'User can log in and use the platform' : 'User is blocked from logging in and accessing the platform'}
+                          </span>
+                        </div>
+                        <Switch
+                          id="active"
+                          checked={editData.is_active}
+                          onCheckedChange={(checked) => setEditData(prev => ({ ...prev, is_active: checked }))}
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Action Buttons */}
+                <div className="flex gap-3 pt-6 border-t">
+                  <Button
+                    onClick={handleSaveUser}
+                    disabled={saving}
+                    className="flex-1 h-11"
+                  >
+                    {saving ? 'Saving Changes...' : 'Save Changes'}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    onClick={() => setEditingUser(null)}
+                    disabled={saving}
+                    className="px-6 h-11"
+                  >
+                    Cancel
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        </SheetContent>
+      </Sheet>
     </AppLayout>
   )
 }