diff --git a/components/dashboard/ChatTable.tsx b/components/dashboard/ChatTable.tsx index dcb0efe..b72c232 100644 --- a/components/dashboard/ChatTable.tsx +++ b/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; } +interface ChatResponse { + chats: Chat[]; + page: number; + totalPages: number; + totalChats: number; +} + export default function ChatTable() { const router = useRouter(); const [chats, setChats] = useState([]); const [loading, setLoading] = useState(true); const [unreadCounts, setUnreadCounts] = useState({ totalUnread: 0, chatCounts: {} }); const audioRef = useRef(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 (
+ + {/* Pagination controls */} + {!loading && chats.length > 0 && ( +
+
+ Showing {chats.length} of {totalChats} chats +
+
+ +
+ Page {currentPage} of {totalPages} +
+ +
+
+ )}
); } \ No newline at end of file diff --git a/lib/auth-utils.ts b/lib/auth-utils.ts index 3be98fd..f5dabbd 100644 --- a/lib/auth-utils.ts +++ b/lib/auth-utils.ts @@ -6,17 +6,10 @@ * Get the authentication token from cookies or localStorage */ export function getAuthToken(): string | null { - const token = document.cookie + return document.cookie .split('; ') .find(row => row.startsWith('Authorization=')) ?.split('=')[1] || localStorage.getItem('Authorization'); - - // If token exists but doesn't have Bearer prefix, add it - if (token && !token.startsWith('Bearer ')) { - return `Bearer ${token}`; - } - - return token; } /** @@ -37,7 +30,7 @@ export async function logoutUser(): Promise { await fetch(`/api/auth/logout`, { method: 'POST', headers: { - 'Authorization': token, + 'Authorization': `Bearer ${token}`, 'Content-Type': 'application/json' } }).catch(err => {