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

src/pages/Workspaces.tsx

@@ -7,6 +7,7 @@ import { useAppContext } from '../context/AppContext';
 import { useTranslation } from '../hooks/useTranslation';
 import FilterBar from '../components/FilterBar';
 import { Button } from '../components/ui/button';
+import { Pagination } from '../components/Pagination';
 
 type WorkspaceRole = "owner" | "admin" | "member" | "guest";
 
@@ -33,6 +34,11 @@ export default function Workspaces() {
   const [isLoading, setIsLoading] = useState(true);
   const [searchQuery, setSearchQuery] = useState('');
   const [ordering, setOrdering] = useState('-updated_at');
+
+  // تنظیمات پاژینیشن
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const [limit, setLimit] = useState(9);
   
   const [deleteModal, setDeleteModal] = useState<{isOpen: boolean; workspace: Workspace | null}>({isOpen: false, workspace: null});
   const [deleteInput, setDeleteInput] = useState('');
@@ -48,22 +54,37 @@ export default function Workspaces() {
     { value: 'name', label: t.workspace?.orderByName || 'Name (A-Z)' },
   ];
 
+  // وقتی جستجو یا ترتیب تغییر کرد، به صفحه اول برگرد
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery, ordering]);
+
   useEffect(() => {
     const timer = setTimeout(() => {
       loadWorkspaces();
     }, 400);
     return () => clearTimeout(timer);
-  }, [searchQuery, ordering]);
+  }, [searchQuery, ordering, currentPage, limit]);
 
   const loadWorkspaces = async () => {
     try {
       setIsLoading(true);
-      const params: Record<string, string> = {};
+      const params: Record<string, string | number> = {
+        limit: limit,
+        offset: (currentPage - 1) * limit,
+      };
+      
       if (searchQuery) params.search = searchQuery;
       if (ordering) params.ordering = ordering;
       
-      const data = await fetchWorkspaces(params);
-      setWorkspaces(data);
+      const data = await fetchWorkspaces(params as any);
+      
+      // استخراج هوشمند نتایج و تعداد کل
+      const items = Array.isArray(data) ? data : (data?.results || []);
+      const count = !Array.isArray(data) && data?.count !== undefined ? data.count : items.length;
+      
+      setWorkspaces(items);
+      setTotalItems(count);
     } catch (error) {
       toast.error(t.workspace?.fetchError || 'Error fetching workspaces');
     } finally {
@@ -71,11 +92,19 @@ export default function Workspaces() {
     }
   };
 
-  const confirmDelete = async () => {
+ const confirmDelete = async () => {
     if (!deleteModal.workspace) return;
     try {
-      await deleteWorkspace(deleteModal.workspace.id);
-      setWorkspaces(workspaces.filter((w) => w.id !== deleteModal.workspace!.id));
+      const deletedId = deleteModal.workspace.id;
+      await deleteWorkspace(deletedId);
+      
+      loadWorkspaces(); 
+
+      // ارسال سیگنال به کل اپلیکیشن برای آپدیت نوار ناوبری
+      window.dispatchEvent(new CustomEvent('workspace_deleted', { 
+        detail: { id: deletedId } 
+      }));
+
       toast.success(t.workspace?.deleteSuccess || 'Workspace deleted successfully');
       setDeleteModal({ isOpen: false, workspace: null });
       setDeleteInput('');
@@ -85,18 +114,18 @@ export default function Workspaces() {
   };
 
   return (
-    <div className="max-w-5xl mx-auto p-6">
+    <div className="flex flex-col p-6 max-w-6xl mx-auto min-h-[calc(100vh-73px)]">
       <div className="flex justify-between items-center mb-8">
         <div>
-          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title}</h1>
-          <p className="text-slate-500 dark:text-slate-400 mt-1">{t.workspace?.subtitle}</p>
+          <h1 className="text-2xl font-bold text-slate-900 dark:text-white">{t.workspace?.title || 'Workspaces'}</h1>
+          <p className="text-slate-500 dark:text-slate-400 mt-1">{t.workspace?.subtitle || 'Manage your workspaces'}</p>
         </div>
         <Button
           onClick={() => navigate('/workspaces/create')}
           className="gap-2 rounded-xl shadow-sm"
         >
           <Plus className="h-5 w-5" />
-          {t.workspace?.createNew}
+          {t.workspace?.createNew || 'Create New'}
         </Button>
       </div>
 
@@ -106,7 +135,7 @@ export default function Workspaces() {
         ordering={ordering}
         setOrdering={setOrdering}
         orderingOptions={orderingOptions}
-        searchPlaceholder={t.workspace?.searchPlaceholder}
+        searchPlaceholder={t.workspace?.searchPlaceholder || 'Search...'}
       />
 
       {isLoading ? (
@@ -114,79 +143,91 @@ export default function Workspaces() {
            <div className="animate-pulse">{t.workspace?.loading || 'Loading...'}</div>
         </div>
       ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
-          {workspaces.map((workspace) => {
-            const isOwner = workspace.owner === user?.id || workspace.my_role === 'owner';
-            const isAdmin = workspace.my_role === 'admin' || isOwner;
+        <>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+            {workspaces.map((workspace) => {
+              const isOwner = workspace.owner === user?.id || workspace.my_role === 'owner';
+              const isAdmin = workspace.my_role === 'admin' || isOwner;
 
-            return (
-              <div 
-                key={workspace.id} 
-                className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow flex flex-col"
-              >
-                <div className="flex-1">
-                  <div className="flex justify-between items-start mb-3 gap-2">
-                    <h3 className="text-lg font-bold text-slate-900 dark:text-white line-clamp-1">
-                      {workspace.name}
-                    </h3>
-                    <RoleBadge role={workspace.my_role} />
+              return (
+                <div 
+                  key={workspace.id} 
+                  className="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-2xl p-5 shadow-sm hover:shadow-md transition-shadow flex flex-col"
+                >
+                  <div className="flex-1">
+                    <div className="flex justify-between items-start mb-3 gap-2">
+                      <h3 className="text-lg font-bold text-slate-900 dark:text-white line-clamp-1">
+                        {workspace.name}
+                      </h3>
+                      <RoleBadge role={workspace.my_role} />
+                    </div>
+                    <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-2">
+                      {workspace.description || t.workspace?.noDescription || 'No description'}
+                    </p>
                   </div>
-                  <p className="text-sm text-slate-500 dark:text-slate-400 line-clamp-2">
-                    {workspace.description || t.workspace?.noDescription}
-                  </p>
-                </div>
 
-                <div className="mt-6 flex items-center justify-end gap-2 border-t border-slate-100 dark:border-slate-800 pt-4">
-                  <Button
-                    variant="secondary"
-                    size="icon"
-                    onClick={() => navigate(`/workspaces/${workspace.id}`)}
-                    className="rounded-xl hover:text-blue-600 dark:hover:text-blue-400"
-                    title={t.workspace?.view}
-                  >
-                    <Eye className="h-4 w-4" />
-                  </Button>
-
-                  {isAdmin && (
+                  <div className="mt-6 flex items-center justify-end gap-2 border-t border-slate-100 dark:border-slate-800 pt-4">
                     <Button
                       variant="secondary"
                       size="icon"
-                      onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
-                      className="rounded-xl hover:text-emerald-600 dark:hover:text-emerald-400"
-                      title={t.workspace?.edit}
+                      onClick={() => navigate(`/workspaces/${workspace.id}`)}
+                      className="rounded-xl hover:text-blue-600 dark:hover:text-blue-400"
+                      title={t.workspace?.view || 'View'}
                     >
-                      <Edit2 className="h-4 w-4" />
+                      <Eye className="h-4 w-4" />
                     </Button>
-                  )}
 
-                  {isOwner && (
-                    <Button
-                      variant="secondary"
-                      size="icon"
-                      onClick={() => setDeleteModal({ isOpen: true, workspace })}
-                      className="rounded-xl hover:text-red-600 dark:hover:text-red-400"
-                      title={t.workspace?.delete}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
-                  )}
+                    {isAdmin && (
+                      <Button
+                        variant="secondary"
+                        size="icon"
+                        onClick={() => navigate(`/workspaces/${workspace.id}/edit`)}
+                        className="rounded-xl hover:text-emerald-600 dark:hover:text-emerald-400"
+                        title={t.workspace?.edit || 'Edit'}
+                      >
+                        <Edit2 className="h-4 w-4" />
+                      </Button>
+                    )}
+
+                    {isOwner && (
+                      <Button
+                        variant="secondary"
+                        size="icon"
+                        onClick={() => setDeleteModal({ isOpen: true, workspace })}
+                        className="rounded-xl hover:text-red-600 dark:hover:text-red-400"
+                        title={t.workspace?.delete || 'Delete'}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    )}
+                  </div>
                 </div>
+              );
+            })}
+
+            {workspaces.length === 0 && (
+              <div className="col-span-full py-16 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl">
+                <p className="text-slate-500 dark:text-slate-400 font-medium">{t.workspace?.emptyState || 'No workspaces found'}</p>
               </div>
-            );
-          })}
+            )}
+          </div>
 
-          {workspaces.length === 0 && (
-            <div className="col-span-full py-16 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-2xl">
-              <p className="text-slate-500 dark:text-slate-400 font-medium">{t.workspace?.emptyState || 'No workspaces found'}</p>
-            </div>
-          )}
-        </div>
+          <Pagination
+            currentPage={currentPage}
+            totalCount={totalItems}
+            limit={limit}
+            onPageChange={setCurrentPage}
+            onLimitChange={setLimit}
+            pageSizeOptions={[9, 12, 24]} // Custom options for Workspaces
+          />
+        </>
       )}
 
+      {/* Delete Modal */}
       {deleteModal.isOpen && deleteModal.workspace && (
         <div className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
           <div className="bg-white dark:bg-slate-900 rounded-2xl p-6 max-w-md w-full shadow-2xl border border-slate-200 dark:border-slate-800">
-            <h3 className="text-xl font-bold text-red-600 mb-2">{t.workspace?.deleteTitle || 'Delete Workspace'}</h3>
+            <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{t.workspace?.deleteTitle || 'Delete Workspace'}</h3>
             <p className="text-slate-600 dark:text-slate-400 mb-5 text-sm leading-relaxed">
               {t.workspace?.deleteWarning || 'To confirm deletion, please type the workspace name:'} <strong className="text-slate-900 dark:text-white select-all">{deleteModal.workspace.name}</strong>
             </p>