fix auth

components/dashboard/ChatTable.tsx

@@ -20,7 +20,9 @@ import {
   Loader2, 
   RefreshCw,
   Eye,
-  User
+  User,
+  ChevronLeft,
+  ChevronRight
 } from "lucide-react";
 import { clientFetch } from "@/lib/client-utils";
 import { toast } from "sonner";
@@ -41,12 +43,23 @@ interface UnreadCounts {
   chatCounts: Record<string, number>;
 }
 
+interface ChatResponse {
+  chats: Chat[];
+  page: number;
+  totalPages: number;
+  totalChats: number;
+}
+
 export default function ChatTable() {
   const router = useRouter();
   const [chats, setChats] = useState<Chat[]>([]);
   const [loading, setLoading] = useState(true);
   const [unreadCounts, setUnreadCounts] = useState<UnreadCounts>({ totalUnread: 0, chatCounts: {} });
   const audioRef = useRef<HTMLAudioElement | null>(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalChats, setTotalChats] = useState(0);
+  const ITEMS_PER_PAGE = 10;
   
   // Initialize audio element for notifications
   useEffect(() => {
@@ -90,7 +103,7 @@ export default function ChatTable() {
     return { vendorId, authToken };
   };
   
-  // Fetch chats when component mounts
+  // Fetch chats when component mounts or page changes
   useEffect(() => {
     fetchChats();
     
@@ -100,7 +113,7 @@ export default function ChatTable() {
     }, 30000); // Check every 30 seconds
     
     return () => clearInterval(interval);
-  }, []);
+  }, [currentPage]);
   
   // Fetch unread counts
   const fetchUnreadCounts = async () => {
@@ -124,7 +137,7 @@ export default function ChatTable() {
     }
   };
   
-  // Fetch chats
+  // Fetch chats with pagination
   const fetchChats = async () => {
     setLoading(true);
     
@@ -132,10 +145,23 @@ export default function ChatTable() {
       // Get the vendor ID from the auth token
       const { vendorId } = getVendorIdFromToken();
       
-      // Now fetch chats for this vendor using clientFetch
-      const response = await clientFetch(`/chats/vendor/${vendorId}`);
+      // Now fetch chats for this vendor using clientFetch with pagination
+      const response = await clientFetch(`/chats/vendor/${vendorId}?page=${currentPage}&limit=${ITEMS_PER_PAGE}`);
+      
+      // Check if the response is the old format (array) or new paginated format
+      if (Array.isArray(response)) {
+        // Handle old API response format (backward compatibility)
+        setChats(response);
+        setTotalPages(1);
+        setTotalChats(response.length);
+      } else {
+        // Handle new paginated response format
+        setChats(response.chats || []);
+        setTotalPages(response.totalPages || 1);
+        setCurrentPage(response.page || 1);
+        setTotalChats(response.totalChats || 0);
+      }
       
-      setChats(Array.isArray(response) ? response : []);
       await fetchUnreadCounts();
     } catch (error) {
       console.error("Failed to fetch chats:", error);
@@ -156,13 +182,29 @@ export default function ChatTable() {
     router.push("/dashboard/chats/new");
   };
 
+  // Handle pagination
+  const goToNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(prev => prev + 1);
+    }
+  };
+
+  const goToPrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(prev => prev - 1);
+    }
+  };
+
   return (
     <div className="space-y-4">
       <div className="flex justify-between items-center">
         <Button
           variant="outline"
           size="sm"
-          onClick={fetchChats}
+          onClick={() => {
+            setCurrentPage(1);
+            fetchChats();
+          }}
           disabled={loading}
         >
           {loading ? (
@@ -266,6 +308,36 @@ export default function ChatTable() {
           </TableBody>
         </Table>
       </div>
+
+      {/* Pagination controls */}
+      {!loading && chats.length > 0 && (
+        <div className="flex items-center justify-between">
+          <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>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={goToNextPage}
+              disabled={currentPage >= totalPages || loading}
+            >
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
     </div>
   );
 }