feat(improvement): add pagination to endpoints and pages + sync navbar when data changes

src/api/workspaces.ts

@@ -1,4 +1,3 @@
-// src/api/workspaces.ts
 import { authFetch } from "./client";
 
 export interface Workspace {
@@ -10,7 +9,31 @@ export interface Workspace {
   [key: string]: any;
 }
 
-export const fetchWorkspaces = async (params?: Record<string, string>): Promise<Workspace[]> => {
+export interface PaginatedResponse<T> {
+  count: number;
+  next: string | null;
+  previous: string | null;
+  results: T[];
+}
+
+export interface WorkspaceMembership {
+  id: string;
+  workspace: string;
+  user: {
+    id: string;
+    email: string;
+    first_name?: string;
+    last_name?: string;
+    [key: string]: any;
+  };
+  role: 'owner' | 'admin' | 'member' | 'guest';
+  is_active: boolean;
+  joined_at?: string;
+  [key: string]: any;
+}
+
+
+export const fetchWorkspaces = async (params?: Record<string, string>): Promise<PaginatedResponse<Workspace>> => {
   const query = params ? new URLSearchParams(params).toString() : '';
   const url = `/api/workspaces/${query ? `?${query}` : ''}`;
   const response = await authFetch(url);
@@ -20,7 +43,17 @@ export const fetchWorkspaces = async (params?: Record<string, string>): Promise<
   }
   
   const data = await response.json();
-  return data.results || data;
+
+  if (Array.isArray(data)) {
+    return { count: data.length, next: null, previous: null, results: data };
+  }
+  
+  return {
+    count: data.count || data.results?.length || 0,
+    next: data.next || null,
+    previous: data.previous || null,
+    results: data.results || data
+  };
 };
 
 export const getWorkspace = async (id: string): Promise<Workspace> => {
@@ -65,12 +98,24 @@ export const deleteWorkspace = async (id: string): Promise<void> => {
   }
 };
 
-export const fetchWorkspaceMemberships = async (workspaceId: string) => {
-  const response = await authFetch(`/api/workspace-memberships/?workspace=${workspaceId}`);
+export const fetchWorkspaceMemberships = async (params?: Record<string, string>): Promise<PaginatedResponse<WorkspaceMembership>> => {
+  const queryParams = new URLSearchParams((params || {}));
+  const response = await authFetch(`/api/workspace-memberships/?${queryParams.toString()}`);
+  
   if (!response.ok) throw new Error("Failed to fetch workspace memberships");
   
   const data = await response.json();
-  return data.results || data;
+  
+  if (Array.isArray(data)) {
+    return { count: data.length, next: null, previous: null, results: data };
+  }
+  
+  return {
+    count: data.count || data.results?.length || 0,
+    next: data.next || null,
+    previous: data.previous || null,
+    results: data.results || data
+  };
 };
 
 export const addWorkspaceMembership = async (data: { workspace: string; user: string; role: string }) => {