feat: add user role selection to EditUserData in UsersPage

src/lib/api/services/admin.ts

@@ -17,6 +17,7 @@ export interface UserUpdate {
   plan_id?: number
   credits?: number
   is_active?: boolean
+  role?: 'user' | 'admin'
 }
 
 export interface MessageResponse {

src/pages/admin/UsersPage.tsx

@@ -31,6 +31,7 @@ interface EditUserData {
   plan_id: number
   credits: number
   is_active: boolean
+  role: 'user' | 'admin'
 }
 
 export function UsersPage() {
@@ -58,6 +59,7 @@ export function UsersPage() {
     plan_id: 0,
     credits: 0,
     is_active: true,
+    role: 'user',
   })
   const [saving, setSaving] = useState(false)
 
@@ -127,6 +129,7 @@ export function UsersPage() {
       plan_id: user.plan.id,
       credits: user.credits,
       is_active: user.is_active,
+      role: user.role as 'user' | 'admin',
     })
   }
 
@@ -394,6 +397,42 @@ export function UsersPage() {
                       </p>
                     </div>
 
+                    <div className="space-y-2">
+                      <Label htmlFor="role" className="text-sm font-medium">
+                        User Role
+                      </Label>
+                      <Select
+                        value={editData.role}
+                        onValueChange={(value: 'user' | 'admin') =>
+                          setEditData(prev => ({
+                            ...prev,
+                            role: value,
+                          }))
+                        }
+                      >
+                        <SelectTrigger className="h-10">
+                          <SelectValue placeholder="Select a role" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="user">
+                            <div className="flex items-center gap-2">
+                              <Badge variant="secondary">user</Badge>
+                              <span className="text-sm">Regular User</span>
+                            </div>
+                          </SelectItem>
+                          <SelectItem value="admin">
+                            <div className="flex items-center gap-2">
+                              <Badge variant="destructive">admin</Badge>
+                              <span className="text-sm">Administrator</span>
+                            </div>
+                          </SelectItem>
+                        </SelectContent>
+                      </Select>
+                      <p className="text-xs text-muted-foreground">
+                        Administrators have full access to all system features
+                      </p>
+                    </div>
+
                     <div className="space-y-3">
                       <Label className="text-sm font-medium">
                         Account Status