Update ChatTable.tsx

components/dashboard/ChatTable.tsx

@@ -24,6 +24,13 @@ import {
   ChevronLeft,
   ChevronRight
 } from "lucide-react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { clientFetch } from "@/lib/client-utils";
 import { toast } from "sonner";
 import { getCookie } from "@/lib/client-utils";
@@ -59,7 +66,7 @@ export default function ChatTable() {
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
   const [totalChats, setTotalChats] = useState(0);
-  const ITEMS_PER_PAGE = 10;
+  const [itemsPerPage, setItemsPerPage] = useState<number>(10);
   
   // Initialize audio element for notifications
   useEffect(() => {
@@ -103,7 +110,7 @@ export default function ChatTable() {
     return { vendorId, authToken };
   };
   
-  // Fetch chats when component mounts or page changes
+  // Fetch chats when component mounts or page/limit changes
   useEffect(() => {
     fetchChats();
     
@@ -113,7 +120,7 @@ export default function ChatTable() {
     }, 30000); // Check every 30 seconds
     
     return () => clearInterval(interval);
-  }, [currentPage]);
+  }, [currentPage, itemsPerPage]);
   
   // Fetch unread counts
   const fetchUnreadCounts = async () => {
@@ -146,7 +153,7 @@ export default function ChatTable() {
       const { vendorId } = getVendorIdFromToken();
       
       // Now fetch chats for this vendor using clientFetch with pagination
-      const response = await clientFetch(`/chats/vendor/${vendorId}?page=${currentPage}&limit=${ITEMS_PER_PAGE}`);
+      const response = await clientFetch(`/chats/vendor/${vendorId}?page=${currentPage}&limit=${itemsPerPage}`);
       
       // Check if the response is the old format (array) or new paginated format
       if (Array.isArray(response)) {
@@ -195,6 +202,13 @@ export default function ChatTable() {
     }
   };
 
+  // Handle items per page change
+  const handleItemsPerPageChange = (value: string) => {
+    const newLimit = parseInt(value);
+    setItemsPerPage(newLimit);
+    setCurrentPage(1); // Reset to first page when changing limit
+  };
+
   return (
     <div className="space-y-4">
       <div className="flex justify-between items-center">
@@ -315,26 +329,45 @@ export default function ChatTable() {
           <div className="text-sm text-muted-foreground">
             Showing {chats.length} of {totalChats} chats
           </div>
-          <div className="flex items-center space-x-2">
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={goToPrevPage}
-              disabled={currentPage <= 1 || loading}
-            >
-              <ChevronLeft className="h-4 w-4" />
-            </Button>
-            <div className="text-sm">
-              Page {currentPage} of {totalPages}
+          <div className="flex items-center space-x-4">
+            <div className="flex items-center space-x-2">
+              <span className="text-sm text-muted-foreground">Rows per page:</span>
+              <Select
+                value={itemsPerPage.toString()}
+                onValueChange={handleItemsPerPageChange}
+              >
+                <SelectTrigger className="h-8 w-[70px]">
+                  <SelectValue placeholder={itemsPerPage.toString()} />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="5">5</SelectItem>
+                  <SelectItem value="10">10</SelectItem>
+                  <SelectItem value="20">20</SelectItem>
+                  <SelectItem value="50">50</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="flex items-center space-x-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={goToPrevPage}
+                disabled={currentPage <= 1 || loading}
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <div className="text-sm">
+                Page {currentPage} of {totalPages}
+              </div>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={goToNextPage}
+                disabled={currentPage >= totalPages || loading}
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
             </div>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={goToNextPage}
-              disabled={currentPage >= totalPages || loading}
-            >
-              <ChevronRight className="h-4 w-4" />
-            </Button>
           </div>
         </div>
       )}