3f9d28bf1b
All checks were successful
Build Frontend / build (push) Successful in 1m10s
Standardizes browser detection logic across admin and storefront pages to more accurately identify Firefox. Updates table rendering logic to provide better compatibility and fallback for Firefox, including conditional use of AnimatePresence and improved loading/empty states. Refines table UI styles for consistency and accessibility.
574 lines
25 KiB
TypeScript
574 lines
25 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useCallback } from "react";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
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 { Search, MoreHorizontal, UserCheck, UserX, Mail, Loader2, Store, Shield, ShieldAlert, Clock, Calendar, Pencil, Plus } from "lucide-react";
|
|
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
|
import { Label } from "@/components/ui/label";
|
|
import { fetchClient } from "@/lib/api-client";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
|
|
interface Vendor {
|
|
_id: string;
|
|
username: string;
|
|
storeId?: string;
|
|
createdAt?: string;
|
|
lastLogin?: string;
|
|
isAdmin?: boolean;
|
|
isActive: boolean;
|
|
}
|
|
|
|
interface PaginationResponse {
|
|
success: boolean;
|
|
vendors: Vendor[];
|
|
pagination: {
|
|
page: number;
|
|
limit: number;
|
|
total: number;
|
|
totalPages: number;
|
|
hasNextPage: boolean;
|
|
hasPrevPage: boolean;
|
|
};
|
|
}
|
|
|
|
export default function AdminVendorsPage() {
|
|
const { toast } = useToast();
|
|
const [loading, setLoading] = useState(true);
|
|
const [vendors, setVendors] = useState<Vendor[]>([]);
|
|
// State for browser detection
|
|
const [isFirefox, setIsFirefox] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const ua = navigator.userAgent.toLowerCase();
|
|
setIsFirefox(ua.includes("firefox") && !ua.includes("chrome"));
|
|
}, []);
|
|
const [page, setPage] = useState(1);
|
|
const [pagination, setPagination] = useState<PaginationResponse['pagination'] | null>(null);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [isEditStoreOpen, setIsEditStoreOpen] = useState(false);
|
|
const [editingVendor, setEditingVendor] = useState<Vendor | null>(null);
|
|
const [newStoreId, setNewStoreId] = useState("");
|
|
const [updating, setUpdating] = useState(false);
|
|
|
|
const handleToggleStatus = async (vendor: Vendor) => {
|
|
try {
|
|
await fetchClient(`/admin/vendors/${vendor._id}/status`, {
|
|
method: 'PATCH',
|
|
body: { isActive: !vendor.isActive }
|
|
});
|
|
toast({
|
|
title: "Success",
|
|
description: `Vendor ${vendor.isActive ? 'suspended' : 'activated'} successfully`,
|
|
});
|
|
fetchVendors();
|
|
} catch (error: any) {
|
|
toast({
|
|
title: "Error",
|
|
description: error.message || "Failed to update vendor status",
|
|
variant: "destructive",
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleEditStore = (vendor: Vendor) => {
|
|
setEditingVendor(vendor);
|
|
setNewStoreId(vendor.storeId || "");
|
|
setIsEditStoreOpen(true);
|
|
};
|
|
|
|
const saveStoreId = async () => {
|
|
if (!editingVendor) return;
|
|
|
|
try {
|
|
setUpdating(true);
|
|
await fetchClient(`/admin/vendors/${editingVendor._id}/store-id`, {
|
|
method: 'PUT',
|
|
body: { storeId: newStoreId }
|
|
});
|
|
|
|
toast({
|
|
title: "Success",
|
|
description: "Store ID updated successfully",
|
|
});
|
|
setIsEditStoreOpen(false);
|
|
fetchVendors(); // Refresh list
|
|
} catch (error: any) {
|
|
toast({
|
|
title: "Error",
|
|
description: error.message || "Failed to update store ID",
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setUpdating(false);
|
|
}
|
|
};
|
|
|
|
const fetchVendors = useCallback(async () => {
|
|
try {
|
|
setLoading(true);
|
|
const params = new URLSearchParams({
|
|
page: page.toString(),
|
|
limit: '25'
|
|
});
|
|
const data = await fetchClient<PaginationResponse>(`/admin/vendors?${params.toString()}`);
|
|
setVendors(data.vendors);
|
|
setPagination(data.pagination);
|
|
} catch (error: any) {
|
|
console.error("Failed to fetch vendors:", error);
|
|
toast({
|
|
title: "Error",
|
|
description: error.message || "Failed to load vendors",
|
|
variant: "destructive",
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [page, toast]);
|
|
|
|
useEffect(() => {
|
|
fetchVendors();
|
|
}, [fetchVendors]);
|
|
|
|
const filteredVendors = searchQuery.trim()
|
|
? vendors.filter(v =>
|
|
v.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
(v.storeId && v.storeId.toString().toLowerCase().includes(searchQuery.toLowerCase()))
|
|
)
|
|
: vendors;
|
|
|
|
const activeVendors = vendors.filter(v => v.isActive);
|
|
const suspendedVendors = vendors.filter(v => !v.isActive);
|
|
const adminVendors = vendors.filter(v => v.isAdmin);
|
|
const totalVendors = pagination?.total || vendors.length;
|
|
|
|
const stats = [
|
|
{
|
|
title: "Total Vendors",
|
|
value: totalVendors,
|
|
description: "Registered vendors",
|
|
icon: Store,
|
|
},
|
|
{
|
|
title: "Active Vendors",
|
|
value: activeVendors.length,
|
|
description: `${vendors.length > 0 ? Math.round((activeVendors.length / vendors.length) * 100) : 0}% active rate`,
|
|
icon: UserCheck,
|
|
},
|
|
{
|
|
title: "Suspended",
|
|
value: suspendedVendors.length,
|
|
description: `${vendors.length > 0 ? Math.round((suspendedVendors.length / vendors.length) * 100) : 0}% suspension rate`,
|
|
icon: UserX,
|
|
},
|
|
{
|
|
title: "Admin Users",
|
|
value: adminVendors.length,
|
|
description: "Administrative access",
|
|
icon: ShieldAlert,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-6 animate-in fade-in duration-500">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold tracking-tight text-foreground">All Vendors</h1>
|
|
<p className="text-sm text-muted-foreground mt-1">Manage vendor accounts and permissions</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
<div className="grid gap-4 md:grid-cols-4">
|
|
{stats.map((stat, i) => (
|
|
<Card key={i} className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm overflow-hidden">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">{stat.title}</CardTitle>
|
|
<stat.icon className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="animate-in fade-in slide-in-from-bottom-2 duration-500" style={{ animationDelay: `${i * 100}ms` }}>
|
|
<div className="text-2xl font-bold">{stat.value}</div>
|
|
<p className="text-xs text-muted-foreground">{stat.description}</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
{/* Search and Filters */}
|
|
<Card className="border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
|
|
<CardHeader className="pb-4">
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div>
|
|
<CardTitle className="text-lg font-medium">Vendor Management</CardTitle>
|
|
<CardDescription>View and manage all vendor accounts</CardDescription>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<div className="relative">
|
|
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Search vendors..."
|
|
className="pl-9 w-64 bg-background/50 border-border/50 focus:bg-background transition-colors"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
<Button variant="outline" size="sm" className="bg-background/50 border-border/50 hover:bg-background transition-colors">
|
|
<Mail className="h-4 w-4 mr-2" />
|
|
Message
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="rounded-md border border-border/50 overflow-hidden">
|
|
<Table>
|
|
<TableHeader className="bg-muted/30">
|
|
<TableRow className="border-border/50 hover:bg-transparent">
|
|
<TableHead>Vendor</TableHead>
|
|
<TableHead>Store</TableHead>
|
|
<TableHead>Status</TableHead>
|
|
<TableHead>Join Date</TableHead>
|
|
<TableHead>Last Login</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{isFirefox ? (
|
|
loading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="h-32 text-center">
|
|
<div className="flex flex-col items-center justify-center gap-2 text-muted-foreground">
|
|
<Loader2 className="h-8 w-8 animate-spin opacity-25" />
|
|
<p>Loading vendors...</p>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : filteredVendors.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
|
|
{searchQuery.trim() ? "No vendors found matching your search" : "No vendors found"}
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredVendors.map((vendor, index) => (
|
|
<motion.tr
|
|
key={vendor._id}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.2, delay: index * 0.03 }}
|
|
className="group hover:bg-muted/40 border-b border-border/50 transition-colors"
|
|
>
|
|
<TableCell>
|
|
<div className="font-medium flex items-center gap-2">
|
|
<div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xs">
|
|
{vendor.username.substring(0, 2).toUpperCase()}
|
|
</div>
|
|
{vendor.username}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
{vendor.storeId ? (
|
|
<div className="flex items-center gap-2 group/store">
|
|
<span className="font-mono text-xs">{vendor.storeId}</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6 opacity-0 group-hover/store:opacity-100 transition-opacity"
|
|
onClick={() => handleEditStore(vendor)}
|
|
>
|
|
<Pencil className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-muted-foreground italic text-xs">No store</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6 text-muted-foreground hover:text-primary"
|
|
onClick={() => handleEditStore(vendor)}
|
|
>
|
|
<Plus className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<Badge
|
|
variant={vendor.isActive ? "default" : "destructive"}
|
|
className={vendor.isActive ? "bg-green-600 hover:bg-green-700" : ""}
|
|
>
|
|
{vendor.isActive ? "Active" : "Suspended"}
|
|
</Badge>
|
|
{vendor.isAdmin && (
|
|
<Badge variant="outline" className="border-blue-200 text-blue-700 bg-blue-50 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-900">
|
|
<Shield className="h-3 w-3 mr-1" />
|
|
Admin
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
<div className="flex items-center gap-1.5">
|
|
<Calendar className="h-3.5 w-3.5 opacity-70" />
|
|
{vendor.createdAt ? new Date(vendor.createdAt).toLocaleDateString() : 'N/A'}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
<div className="flex items-center gap-1.5">
|
|
<Clock className="h-3.5 w-3.5 opacity-70" />
|
|
{vendor.lastLogin ? new Date(vendor.lastLogin).toLocaleDateString() : 'Never'}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
|
<span className="sr-only">Open menu</span>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
|
<DropdownMenuItem
|
|
onClick={() => navigator.clipboard.writeText(vendor._id)}
|
|
>
|
|
Copy Vendor ID
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
className={vendor.isActive ? "text-red-600" : "text-green-600"}
|
|
onClick={() => handleToggleStatus(vendor)}
|
|
>
|
|
{vendor.isActive ? (
|
|
<>
|
|
<UserX className="mr-2 h-4 w-4" />
|
|
Suspend Vendor
|
|
</>
|
|
) : (
|
|
<>
|
|
<UserCheck className="mr-2 h-4 w-4" />
|
|
Activate Vendor
|
|
</>
|
|
)}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</motion.tr>
|
|
))
|
|
)
|
|
) : (
|
|
<AnimatePresence mode="popLayout">
|
|
{loading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="h-32 text-center">
|
|
<div className="flex flex-col items-center justify-center gap-2 text-muted-foreground">
|
|
<Loader2 className="h-8 w-8 animate-spin opacity-25" />
|
|
<p>Loading vendors...</p>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : filteredVendors.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
|
|
{searchQuery.trim() ? "No vendors found matching your search" : "No vendors found"}
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
filteredVendors.map((vendor, index) => (
|
|
<motion.tr
|
|
key={vendor._id}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.2, delay: index * 0.03 }}
|
|
className="group hover:bg-muted/40 border-b border-border/50 transition-colors"
|
|
>
|
|
<TableCell>
|
|
<div className="font-medium flex items-center gap-2">
|
|
<div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xs">
|
|
{vendor.username.substring(0, 2).toUpperCase()}
|
|
</div>
|
|
{vendor.username}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
{vendor.storeId ? (
|
|
<div className="flex items-center gap-2 group/store">
|
|
<span className="font-mono text-xs">{vendor.storeId}</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6 opacity-0 group-hover/store:opacity-100 transition-opacity"
|
|
onClick={() => handleEditStore(vendor)}
|
|
>
|
|
<Pencil className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-muted-foreground italic text-xs">No store</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6 text-muted-foreground hover:text-primary"
|
|
onClick={() => handleEditStore(vendor)}
|
|
>
|
|
<Plus className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="flex items-center gap-2">
|
|
<Badge
|
|
variant={vendor.isActive ? "default" : "destructive"}
|
|
className={vendor.isActive ? "bg-green-600 hover:bg-green-700" : ""}
|
|
>
|
|
{vendor.isActive ? "Active" : "Suspended"}
|
|
</Badge>
|
|
{vendor.isAdmin && (
|
|
<Badge variant="outline" className="border-blue-200 text-blue-700 bg-blue-50 dark:bg-blue-900/20 dark:text-blue-400 dark:border-blue-900">
|
|
<Shield className="h-3 w-3 mr-1" />
|
|
Admin
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
<div className="flex items-center gap-1.5">
|
|
<Calendar className="h-3.5 w-3.5 opacity-70" />
|
|
{vendor.createdAt ? new Date(vendor.createdAt).toLocaleDateString() : 'N/A'}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-sm text-muted-foreground">
|
|
<div className="flex items-center gap-1.5">
|
|
<Clock className="h-3.5 w-3.5 opacity-70" />
|
|
{vendor.lastLogin ? new Date(vendor.lastLogin).toLocaleDateString() : 'Never'}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" className="h-8 w-8 p-0">
|
|
<span className="sr-only">Open menu</span>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
|
<DropdownMenuItem
|
|
onClick={() => navigator.clipboard.writeText(vendor._id)}
|
|
>
|
|
Copy Vendor ID
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem
|
|
className={vendor.isActive ? "text-red-600" : "text-green-600"}
|
|
onClick={() => handleToggleStatus(vendor)}
|
|
>
|
|
{vendor.isActive ? (
|
|
<>
|
|
<UserX className="mr-2 h-4 w-4" />
|
|
Suspend Vendor
|
|
</>
|
|
) : (
|
|
<>
|
|
<UserCheck className="mr-2 h-4 w-4" />
|
|
Activate Vendor
|
|
</>
|
|
)}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</motion.tr>
|
|
))
|
|
)}
|
|
</AnimatePresence>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
{pagination && pagination.totalPages > 1 && (
|
|
<div className="mt-4 flex items-center justify-between border-t border-border/50 pt-4 text-sm text-muted-foreground">
|
|
<span>
|
|
Page <span className="font-medium text-foreground">{pagination.page}</span> of {pagination.totalPages}
|
|
</span>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setPage(p => Math.max(1, p - 1))}
|
|
disabled={!pagination.hasPrevPage || loading}
|
|
className="h-8"
|
|
>
|
|
Previous
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setPage(p => p + 1)}
|
|
disabled={!pagination.hasNextPage || loading}
|
|
className="h-8"
|
|
>
|
|
Next
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Dialog open={isEditStoreOpen} onOpenChange={setIsEditStoreOpen}>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogHeader>
|
|
<DialogTitle>Update Vendor Store</DialogTitle>
|
|
<DialogDescription>
|
|
Enter the Store ID to assign to vendor <span className="font-semibold text-foreground">{editingVendor?.username}</span>.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="grid gap-4 py-4">
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="storeId">Store ID</Label>
|
|
<Input
|
|
id="storeId"
|
|
value={newStoreId}
|
|
onChange={(e) => setNewStoreId(e.target.value)}
|
|
placeholder="Enter 24-character Store ID"
|
|
className="col-span-3 font-mono"
|
|
/>
|
|
<p className="text-xs text-muted-foreground">
|
|
Ensure the Store ID corresponds to an existing store in the system.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<DialogFooter>
|
|
<Button variant="outline" onClick={() => setIsEditStoreOpen(false)} disabled={updating}>Cancel</Button>
|
|
<Button onClick={saveStoreId} disabled={updating || !newStoreId || newStoreId.length < 24}>
|
|
{updating && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
Save Changes
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div >
|
|
);
|
|
}
|