g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor admin ban page to use API and improve UX

Browse Source 
Replaced mock data in the admin ban page with real API calls for fetching, banning, and unbanning users. Improved form validation, loading states, and search functionality. Updated banned users table to show live data and added confirmation dialogs for ban/unban actions. Enhanced user status display in the admin users page with tooltips for blocked reasons.
This commit is contained in:
g
2025-11-28 20:14:17 +00:00
parent 1001911691
commit 785509fed9
3 changed files with 294 additions and 200 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/dashboard/admin/users/page.tsx
View File

@@ -4,6 +4,7 @@ import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { Search, Ban, UserCheck, UserX, Package, DollarSign } from "lucide-react";
import { fetchServer } from "@/lib/api";
@@ -172,21 +173,27 @@ export default async function AdminUsersPage() {
</div>
</TableCell>
<TableCell>
<div className="flex flex-col space-y-1">
{user.isBlocked ? (
<Badge variant="destructive">
<Ban className="h-3 w-3 mr-1" />
Blocked
</Badge>
) : user.totalOrders > 0 ? (
<Badge variant="default">Active</Badge>
) : (
<Badge variant="secondary">No Orders</Badge>
)}
{user.blockedReason && (
<span className="text-xs text-muted-foreground">{user.blockedReason}</span>
)}
</div>
{user.isBlocked ? (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Badge variant="destructive">
<Ban className="h-3 w-3 mr-1" />
Blocked
</Badge>
</TooltipTrigger>
{user.blockedReason && (
<TooltipContent>
<p className="max-w-xs">{user.blockedReason}</p>
</TooltipContent>
)}
</Tooltip>
</TooltipProvider>
) : user.totalOrders > 0 ? (
<Badge variant="default">Active</Badge>
) : (
<Badge variant="secondary">No Orders</Badge>
)}
</TableCell>
<TableCell>
{user.firstOrderDate