feat: add Admin Users management page and integrate user editing functionality

src/App.tsx

@@ -5,6 +5,7 @@ import { MusicPlayerProvider } from '@/contexts/MusicPlayerContext'
 import { SocketProvider } from '@/contexts/SocketContext'
 import { AccountPage } from '@/pages/AccountPage'
 import { AdminSoundsPage } from '@/pages/AdminSoundsPage'
+import { AdminUsersPage } from '@/pages/AdminUsersPage'
 import { DashboardPage } from '@/pages/DashboardPage'
 import { LoginPage } from '@/pages/LoginPage'
 import { RegisterPage } from '@/pages/RegisterPage'
@@ -78,6 +79,19 @@ function App() {
                     </ProtectedRoute>
                   }
                 />
+                <Route
+                  path="/admin/users"
+                  element={
+                    <ProtectedRoute requireAdmin>
+                      <AppLayout
+                        title="User Management"
+                        description="Manage users, plans, and permissions"
+                      >
+                        <AdminUsersPage />
+                      </AppLayout>
+                    </ProtectedRoute>
+                  }
+                />
 
                 <Route
                   path="/"

src/components/sidebar/AppSidebar.tsx

@@ -9,7 +9,7 @@ import {
   useSidebar,
 } from '@/components/ui/sidebar'
 import { useAuth } from '@/hooks/use-auth'
-import { Home, Settings, Volume2 } from 'lucide-react'
+import { Home, Settings, Volume2, Users } from 'lucide-react'
 import { Link, useLocation } from 'react-router'
 import { NavPlan } from './NavPlan'
 import { NavUser } from './NavUser'
@@ -33,6 +33,11 @@ const adminNavigationItems = [
     href: '/admin/sounds',
     icon: Settings,
   },
+  {
+    title: 'Users',
+    href: '/admin/users',
+    icon: Users,
+  },
 ]
 
 export function AppSidebar() {

src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

src/pages/AdminUsersPage.tsx

@@ -0,0 +1,415 @@
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, SheetClose } from '@/components/ui/sheet';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { 
+  RefreshCw, 
+  Edit, 
+  UserX, 
+  UserCheck,
+  Users
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { apiService } from '@/services/api';
+
+interface User {
+  id: string;
+  email: string;
+  name: string;
+  role: string;
+  is_active: boolean;
+  credits: number;
+  created_at: string;
+  providers: string[];
+  plan: {
+    id: number;
+    code: string;
+    name: string;
+    description: string;
+    credits: number;
+    max_credits: number;
+  };
+}
+
+interface Plan {
+  id: number;
+  code: string;
+  name: string;
+  description: string;
+  credits: number;
+  max_credits: number;
+}
+
+export function AdminUsersPage() {
+  const [users, setUsers] = useState<User[]>([]);
+  const [plans, setPlans] = useState<Plan[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [editingUser, setEditingUser] = useState<User | null>(null);
+  const [editForm, setEditForm] = useState({
+    name: '',
+    credits: 0,
+    plan_id: 0,
+    is_active: true
+  });
+
+  useEffect(() => {
+    fetchUsers();
+    fetchPlans();
+  }, []);
+
+  const fetchUsers = async () => {
+    try {
+      const response = await apiService.get('/api/admin/users');
+      const data = await response.json();
+      
+      if (response.ok) {
+        setUsers(data.users);
+      } else {
+        toast.error(data.error || 'Failed to fetch users');
+      }
+    } catch {
+      toast.error('Failed to fetch users');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const fetchPlans = async () => {
+    try {
+      const response = await apiService.get('/api/admin/plans');
+      const data = await response.json();
+      
+      if (response.ok) {
+        setPlans(data.plans);
+      } else {
+        toast.error(data.error || 'Failed to fetch plans');
+      }
+    } catch {
+      toast.error('Failed to fetch plans');
+    }
+  };
+
+  const handleEditUser = (user: User) => {
+    setEditingUser(user);
+    setEditForm({
+      name: user.name,
+      credits: user.credits,
+      plan_id: user.plan.id,
+      is_active: user.is_active
+    });
+  };
+
+  const handleUpdateUser = async () => {
+    if (!editingUser) return;
+
+    try {
+      const response = await apiService.patch(`/api/admin/users/${editingUser.id}`, editForm);
+      const data = await response.json();
+      
+      if (response.ok) {
+        toast.success('User updated successfully');
+        setEditingUser(null);
+        fetchUsers(); // Refresh users list
+        // Note: The sheet will close automatically when Save Changes button is wrapped with SheetClose
+      } else {
+        toast.error(data.error || 'Failed to update user');
+      }
+    } catch {
+      toast.error('Failed to update user');
+    }
+  };
+
+  const handleToggleUserStatus = async (user: User) => {
+    try {
+      const endpoint = user.is_active ? 'deactivate' : 'activate';
+      const response = await apiService.post(`/api/admin/users/${user.id}/${endpoint}`);
+      const data = await response.json();
+      
+      if (response.ok) {
+        const action = user.is_active ? 'deactivated' : 'activated';
+        toast.success(`User ${action} successfully`);
+        fetchUsers(); // Refresh users list
+      } else {
+        toast.error(data.error || `Failed to ${endpoint} user`);
+      }
+    } catch {
+      toast.error('Failed to update user status');
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    });
+  };
+
+  const getStatusBadge = (user: User) => {
+    return user.is_active ? (
+      <Badge variant="default" className="bg-green-600">Active</Badge>
+    ) : (
+      <Badge variant="destructive">Inactive</Badge>
+    );
+  };
+
+  const getRoleBadge = (role: string) => {
+    return role === 'admin' ? (
+      <Badge variant="default">Admin</Badge>
+    ) : (
+      <Badge variant="secondary">User</Badge>
+    );
+  };
+
+  const filteredUsers = users.filter(user =>
+    user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+    user.email.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <RefreshCw className="w-6 h-6 animate-spin" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center space-x-2">
+          <Users className="w-5 h-5" />
+          <h1 className="text-2xl font-bold">Users Management</h1>
+        </div>
+        <Button onClick={fetchUsers} variant="outline">
+          <RefreshCw className="w-4 h-4 mr-2" />
+          Refresh
+        </Button>
+      </div>
+
+      <div className="flex items-center gap-4">
+        <div className="flex-1">
+          <input
+            type="text"
+            placeholder="Search users by name or email..."
+            value={searchTerm}
+            onChange={e => setSearchTerm(e.target.value)}
+            className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-background"
+          />
+        </div>
+        <div className="text-sm text-muted-foreground">
+          {filteredUsers.length} of {users.length} users
+        </div>
+      </div>
+
+      <div className="grid gap-4">
+        {filteredUsers.map((user) => (
+          <Card key={user.id}>
+            <CardHeader>
+              <div className="flex items-start justify-between">
+                <div>
+                  <CardTitle className="text-lg">{user.name}</CardTitle>
+                  <CardDescription>{user.email}</CardDescription>
+                </div>
+                <div className="flex items-center space-x-2">
+                  {getStatusBadge(user)}
+                  {getRoleBadge(user.role)}
+                </div>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+                <div>
+                  <p className="text-sm text-muted-foreground">User ID</p>
+                  <p className="font-medium text-xs">{user.id}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Credits</p>
+                  <p className="font-medium">{user.credits}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Plan</p>
+                  <p className="font-medium">{user.plan.name}</p>
+                </div>
+                <div>
+                  <p className="text-sm text-muted-foreground">Joined</p>
+                  <p className="font-medium">{formatDate(user.created_at)}</p>
+                </div>
+              </div>
+              
+              <div className="flex items-center space-x-2">
+                <Sheet>
+                  <SheetTrigger asChild>
+                    <Button 
+                      variant="outline" 
+                      size="sm"
+                      onClick={() => handleEditUser(user)}
+                    >
+                      <Edit className="w-4 h-4 mr-2" />
+                      Edit
+                    </Button>
+                  </SheetTrigger>
+                  <SheetContent className="w-[400px] sm:w-[540px]">
+                    <div className="p-6 h-full">
+                      <SheetHeader>
+                        <SheetTitle>Edit User: {editingUser?.name}</SheetTitle>
+                      </SheetHeader>
+                      
+                      {/* User Information Section */}
+                      <div className="mt-6 space-y-4">
+                        <div className="bg-muted/50 p-4 rounded-lg space-y-3">
+                          <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide">User Information</h3>
+                          
+                          <div className="grid grid-cols-2 gap-4">
+                            <div>
+                              <p className="text-sm text-muted-foreground">User ID</p>
+                              <p className="font-mono text-sm">{editingUser?.id}</p>
+                            </div>
+                            <div>
+                              <p className="text-sm text-muted-foreground">Email</p>
+                              <p className="text-sm">{editingUser?.email}</p>
+                            </div>
+                            <div>
+                              <p className="text-sm text-muted-foreground">Role</p>
+                              <div className="flex items-center">
+                                {editingUser?.role === 'admin' ? (
+                                  <Badge variant="default">Admin</Badge>
+                                ) : (
+                                  <Badge variant="secondary">User</Badge>
+                                )}
+                              </div>
+                            </div>
+                            <div>
+                              <p className="text-sm text-muted-foreground">Joined</p>
+                              <p className="text-sm">{editingUser ? formatDate(editingUser.created_at) : ''}</p>
+                            </div>
+                          </div>
+                          
+                          <div>
+                            <p className="text-sm text-muted-foreground mb-2">Authentication Providers</p>
+                            <div className="flex flex-wrap gap-2">
+                              {editingUser?.providers?.map((provider: string) => (
+                                <Badge key={provider} variant="outline" className="text-xs">
+                                  {provider === 'password' ? 'Password' : 
+                                   provider === 'api_token' ? 'API Token' : 
+                                   provider === 'google' ? 'Google' : 
+                                   provider === 'github' ? 'GitHub' : 
+                                   provider.charAt(0).toUpperCase() + provider.slice(1)}
+                                </Badge>
+                              )) || (
+                                <span className="text-sm text-muted-foreground">No providers</span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Edit Form Section */}
+                      <div className="mt-6 space-y-6">
+                        <div>
+                          <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide mb-4">Edit Details</h3>
+                          
+                          <div className="space-y-4">
+                            <div className="space-y-2">
+                              <Label htmlFor="name">Name</Label>
+                              <Input
+                                id="name"
+                                value={editForm.name}
+                                onChange={(e) => setEditForm({...editForm, name: e.target.value})}
+                              />
+                            </div>
+                            <div className="space-y-2">
+                              <Label htmlFor="credits">Credits</Label>
+                              <Input
+                                id="credits"
+                                type="number"
+                                value={editForm.credits}
+                                onChange={(e) => setEditForm({...editForm, credits: parseInt(e.target.value) || 0})}
+                              />
+                            </div>
+                            <div className="space-y-2">
+                              <Label htmlFor="plan">Plan</Label>
+                              <select
+                                id="plan"
+                                value={editForm.plan_id}
+                                onChange={(e) => setEditForm({...editForm, plan_id: parseInt(e.target.value)})}
+                                className="w-full p-2 border rounded-md bg-background"
+                              >
+                                {plans.map((plan) => (
+                                  <option key={plan.id} value={plan.id}>
+                                    {plan.name} ({plan.credits} credits / {plan.max_credits} max)
+                                  </option>
+                                ))}
+                              </select>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                              <input
+                                type="checkbox"
+                                id="is_active"
+                                checked={editForm.is_active}
+                                onChange={(e) => setEditForm({...editForm, is_active: e.target.checked})}
+                                className="w-4 h-4"
+                              />
+                              <Label htmlFor="is_active">Active</Label>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* Actions */}
+                      <div className="flex justify-end space-x-2 pt-6 mt-auto">
+                        <SheetClose asChild>
+                          <Button variant="outline" onClick={() => setEditingUser(null)}>
+                            Cancel
+                          </Button>
+                        </SheetClose>
+                        <SheetClose asChild>
+                          <Button onClick={handleUpdateUser}>
+                            Save Changes
+                          </Button>
+                        </SheetClose>
+                      </div>
+                    </div>
+                  </SheetContent>
+                </Sheet>
+
+                <Button 
+                  variant={user.is_active ? "destructive" : "default"}
+                  size="sm"
+                  onClick={() => handleToggleUserStatus(user)}
+                >
+                  {user.is_active ? (
+                    <>
+                      <UserX className="w-4 h-4 mr-2" />
+                      Deactivate
+                    </>
+                  ) : (
+                    <>
+                      <UserCheck className="w-4 h-4 mr-2" />
+                      Activate
+                    </>
+                  )}
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+
+      {filteredUsers.length === 0 && (
+        <div className="text-center py-8">
+          <Users className="w-12 h-12 mx-auto text-muted-foreground mb-4" />
+          <p className="text-muted-foreground">
+            {searchTerm
+              ? 'No users found matching your search.'
+              : 'No users found'}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}