Refactor admin vendors page to use client-side fetching and pagination

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.

app/dashboard/admin/vendors/page.tsx

@@ -1,55 +1,83 @@
-import React from "react";
+"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 } from "lucide-react";
-import { fetchServer } from "@/lib/api";
+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;
-  email?: string;
   storeId?: string;
-  pgpKey?: string;
   createdAt?: string;
-  currentToken?: string;
+  lastLogin?: string;
   isAdmin?: boolean;
+  isActive: boolean;
 }
 
-export default async function AdminVendorsPage() {
-  let vendors: Vendor[] = [];
-  let error: string | null = null;
+interface PaginationResponse {
+  success: boolean;
+  vendors: Vendor[];
+  pagination: {
+    page: number;
+    limit: number;
+    total: number;
+    totalPages: number;
+    hasNextPage: boolean;
+    hasPrevPage: boolean;
+  };
+}
 
-  try {
-    vendors = await fetchServer<Vendor[]>("/admin/vendors");
-  } catch (err) {
-    console.error("Failed to fetch vendors:", err);
-    error = "Failed to load vendors";
-  }
+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("");
 
-  if (error) {
-    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>
-        <Card>
-          <CardContent className="pt-6">
-            <div className="text-center text-red-500">
-              <p>{error}</p>
-            </div>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
+  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]);
 
-  const activeVendors = vendors.filter(v => v.currentToken);
+  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 suspendedVendors = vendors.filter(v => !v.currentToken);
+  const totalVendors = pagination?.total || vendors.length;
 
   return (
     <div className="space-y-6">
@@ -65,7 +93,7 @@ export default async function AdminVendorsPage() {
             <CardTitle className="text-sm font-medium">Total Vendors</CardTitle>
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{vendors.length}</div>
+            <div className="text-2xl font-bold">{totalVendors}</div>
             <p className="text-xs text-muted-foreground">Registered vendors</p>
           </CardContent>
         </Card>
@@ -113,7 +141,12 @@ export default async function AdminVendorsPage() {
             <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" />
+                <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" />
@@ -123,57 +156,98 @@ export default async function AdminVendorsPage() {
           </div>
         </CardHeader>
         <CardContent>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Vendor</TableHead>
-                <TableHead>Store</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Join Date</TableHead>
-                <TableHead className="text-right">Actions</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {vendors.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.currentToken ? "default" : "destructive"}
-                      >
-                        {vendor.currentToken ? "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 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>
+          {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>