66e95438fe
Migrates the admin vendors page to use client-side data fetching with pagination, search, and improved loading states. Updates the vendor table to show last login, status, and admin badges. Also, optimizes the broadcast dialog by lazy-loading the ReactMarkdown component for preview rendering.
256 lines
9.8 KiB
TypeScript
256 lines
9.8 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 } from "lucide-react";
|
|
import { fetchClient } from "@/lib/api-client";
|
|
import { useToast } from "@/hooks/use-toast";
|
|
|
|
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[]>([]);
|
|
const [page, setPage] = useState(1);
|
|
const [pagination, setPagination] = useState<PaginationResponse['pagination'] | null>(null);
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
|
|
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;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold tracking-tight">All Vendors</h1>
|
|
<p className="text-sm text-muted-foreground mt-1">Manage vendor accounts and permissions</p>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
<div className="grid gap-4 md:grid-cols-4">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Total Vendors</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{totalVendors}</div>
|
|
<p className="text-xs text-muted-foreground">Registered vendors</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Active Vendors</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{activeVendors.length}</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{vendors.length > 0 ? Math.round((activeVendors.length / vendors.length) * 100) : 0}% active rate
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Suspended</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{suspendedVendors.length}</div>
|
|
<p className="text-xs text-muted-foreground">
|
|
{vendors.length > 0 ? Math.round((suspendedVendors.length / vendors.length) * 100) : 0}% suspension rate
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium">Admin Users</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{adminVendors.length}</div>
|
|
<p className="text-xs text-muted-foreground">Administrative access</p>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Search and Filters */}
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle>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 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Search vendors..."
|
|
className="pl-8 w-64"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
<Button variant="outline" size="sm">
|
|
<Mail className="h-4 w-4 mr-2" />
|
|
Send Message
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-8">
|
|
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
|
|
</div>
|
|
) : filteredVendors.length === 0 ? (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
{searchQuery.trim() ? "No vendors found matching your search" : "No vendors found"}
|
|
</div>
|
|
) : (
|
|
<>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<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>
|
|
{filteredVendors.map((vendor) => (
|
|
<TableRow key={vendor._id}>
|
|
<TableCell>
|
|
<div className="font-medium">{vendor.username}</div>
|
|
</TableCell>
|
|
<TableCell>{vendor.storeId || 'No store'}</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-col space-y-1">
|
|
<Badge
|
|
variant={vendor.isActive ? "default" : "destructive"}
|
|
>
|
|
{vendor.isActive ? "active" : "suspended"}
|
|
</Badge>
|
|
{vendor.isAdmin && (
|
|
<Badge variant="secondary" className="text-xs">
|
|
Admin
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
</TableCell>
|
|
<TableCell>
|
|
{vendor.createdAt ? new Date(vendor.createdAt).toLocaleDateString() : 'N/A'}
|
|
</TableCell>
|
|
<TableCell>
|
|
{vendor.lastLogin ? new Date(vendor.lastLogin).toLocaleDateString() : 'Never'}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex items-center justify-end space-x-2">
|
|
<Button variant="outline" size="sm">
|
|
<UserCheck className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
<UserX className="h-4 w-4" />
|
|
</Button>
|
|
<Button variant="outline" size="sm">
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
{pagination && pagination.totalPages > 1 && (
|
|
<div className="mt-4 flex items-center justify-between text-sm text-muted-foreground">
|
|
<span>
|
|
Page {pagination.page} of {pagination.totalPages} ({pagination.total} total)
|
|
</span>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setPage(p => Math.max(1, p - 1))}
|
|
disabled={!pagination.hasPrevPage || loading}
|
|
>
|
|
Previous
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setPage(p => p + 1)}
|
|
disabled={!pagination.hasNextPage || loading}
|
|
>
|
|
Next
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|