feat: implement AdminRoute for admin access control and enhance UsersPage with user management features
This commit is contained in:
JSC
@@ -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">
|
||||
<h1 className="text-2xl font-bold mb-4">User Management</h1>
|
||||
<p className="text-muted-foreground">
|
||||
User administration interface coming soon...
|
||||
</p>
|
||||
<div className="flex-1 space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<h1 className="text-3xl font-bold">User Management</h1>
|
||||
<Button onClick={loadData} disabled={loading}>
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user