pagination

.env

@@ -6,8 +6,8 @@ VITE_DANAK_BASE_URL ='https://api.danakcorp.com'
 VITE_SOCKET_URL = 'wss://dmail-api.danakcorp.com/email'
 # VITE_SOCKET_URL = 'ws://192.168.1.118:4000/email'
 
-VITE_BASE_URL = 'https://dmail-api.danakcorp.com'
-# VITE_BASE_URL = 'http://192.168.1.101:4000'
+# VITE_BASE_URL = 'https://dmail-api.danakcorp.com'
+VITE_BASE_URL = 'http://192.168.1.101:4000'
 
 
 VITE_SERVICE_ID = 'e51afdc3-ea0b-49cf-8f49-2a6f131b024e'

package.json

@@ -51,6 +51,7 @@
     "tailwindcss": "^4.1.4",
     "three": "^0.177.0",
     "uuid": "^11.1.0",
+    "vite-plugin-pwa": "^1.0.2",
     "vite-tsconfig-paths": "^5.1.4",
     "yup": "^1.6.1",
     "zustand": "^5.0.3"

src/components/Pagination.tsx

@@ -1,107 +1,41 @@
 import React from "react";
+import Button from "./Button";
 
 interface PaginationProps {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
+    hasNext: boolean;
+    nextCursor?: string;
+    previousCursor?: string;
+    onNext: (cursor?: string) => void;
+    onPrevious: (cursor?: string) => void;
 }
 
 const Pagination: React.FC<PaginationProps> = ({
-    currentPage,
-    totalPages,
-    onPageChange,
+    hasNext,
+    nextCursor,
+    previousCursor,
+    onNext,
+    onPrevious,
 }) => {
-    // اگر فقط یک صفحه داریم، pagination نمایش داده نمی‌شود
-    if (totalPages <= 1) return null;
-
-    const getPageNumbers = () => {
-        const pageNumbers: (number | string)[] = [];
-        const maxVisiblePages = window.innerWidth < 768 ? 3 : 5; // تعداد کمتر برای موبایل
-
-        if (totalPages <= maxVisiblePages) {
-            for (let i = 1; i <= totalPages; i++) {
-                pageNumbers.push(i);
-            }
-        } else {
-            // نمایش صفحه اول
-            pageNumbers.push(1);
-
-            if (currentPage > 3) {
-                pageNumbers.push("...");
-            }
-
-            // صفحات میانی
-            const start = Math.max(2, Math.min(currentPage - 1, totalPages - 3));
-            const end = Math.min(totalPages - 1, Math.max(currentPage + 1, 4));
-
-            for (let i = start; i <= end; i++) {
-                if (!pageNumbers.includes(i)) {
-                    pageNumbers.push(i);
-                }
-            }
-
-            if (currentPage < totalPages - 2) {
-                pageNumbers.push("...");
-            }
-
-            // نمایش صفحه آخر
-            if (!pageNumbers.includes(totalPages)) {
-                pageNumbers.push(totalPages);
-            }
-        }
-
-        return pageNumbers;
-    };
-
-    const pageNumbers = getPageNumbers();
+    // اگر hasNext فالس باشد، pagination نمایش داده نمی‌شود
+    if (!hasNext && !previousCursor) return null;
 
     return (
-        <div className="flex justify-center items-center gap-1 md:gap-2 py-4 md:py-6 mt-3 md:mt-4 border-t border-gray-100">
-            {/* دکمه صفحه قبل */}
-            <button
-                className={`px-2 md:px-3 py-2 text-xs md:text-sm rounded-lg transition-colors ${currentPage === 1
-                    ? "text-gray-400 cursor-not-allowed"
-                    : "text-gray-600 hover:bg-gray-100 hover:text-gray-800"
-                    }`}
-                onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
-                disabled={currentPage === 1}
-            >
-                قبلی
-            </button>
+        <div className="flex items-center justify-center gap-4 mt-6">
+            <Button
+                label="قبلی"
+                onClick={() => onPrevious(previousCursor)}
+                disabled={!previousCursor}
+                className="w-fit"
+            />
+
+            <Button
+                label="بعدی"
+                onClick={() => onNext(nextCursor)}
+                disabled={!hasNext}
+                className="w-fit"
+            />
 
-            {/* شماره صفحات */}
-            <div className="flex gap-1">
-                {pageNumbers.map((page, index) =>
-                    typeof page === "number" ? (
-                        <button
-                            key={index}
-                            className={`w-8 h-8 md:w-10 md:h-10 text-xs md:text-sm rounded-lg transition-colors ${currentPage === page
-                                ? "bg-primary text-white shadow-sm"
-                                : "text-gray-600 hover:bg-gray-100 hover:text-gray-800"
-                                }`}
-                            onClick={() => onPageChange(page)}
-                        >
-                            {page}
-                        </button>
-                    ) : (
-                        <span key={index} className="flex items-center px-1 md:px-2 text-gray-400 text-xs md:text-sm">
-                            {page}
-                        </span>
-                    )
-                )}
-            </div>
 
-            {/* دکمه صفحه بعد */}
-            <button
-                className={`px-2 md:px-3 py-2 text-xs md:text-sm rounded-lg transition-colors ${currentPage === totalPages
-                    ? "text-gray-400 cursor-not-allowed"
-                    : "text-gray-600 hover:bg-gray-100 hover:text-gray-800"
-                    }`}
-                onClick={() => currentPage < totalPages && onPageChange(currentPage + 1)}
-                disabled={currentPage === totalPages}
-            >
-                بعدی
-            </button>
         </div>
     );
 };

src/components/Table.tsx

@@ -372,9 +372,11 @@ const Table = <T extends RowDataType>({
 
                 {pagination && (
                     <Pagination
-                        currentPage={pagination.currentPage}
-                        totalPages={pagination.totalPages}
-                        onPageChange={pagination.onPageChange}
+                        hasNext={!!pagination.nextCursor}
+                        nextCursor={pagination.nextCursor}
+                        previousCursor={pagination.previousCursor}
+                        onNext={pagination.onNext}
+                        onPrevious={pagination.onPrevious}
                     />
                 )}
             </div>
@@ -403,13 +405,18 @@ const Table = <T extends RowDataType>({
                 </table>
             </div>
 
-            {pagination && (
-                <Pagination
-                    currentPage={pagination.currentPage}
-                    totalPages={pagination.totalPages}
-                    onPageChange={pagination.onPageChange}
-                />
-            )}
+            {pagination && (() => {
+                console.log('Table component rendering pagination:', pagination);
+                return (
+                    <Pagination
+                        hasNext={pagination.hasNext}
+                        nextCursor={pagination.nextCursor}
+                        previousCursor={pagination.previousCursor}
+                        onNext={pagination.onNext}
+                        onPrevious={pagination.onPrevious}
+                    />
+                );
+            })()}
         </div>
     );
 };

src/components/types/TableTypes.ts

@@ -14,9 +14,11 @@ export interface ColumnType<T extends RowDataType = RowDataType> {
 }
 
 export interface PaginationConfig {
-  currentPage: number;
-  totalPages: number;
-  onPageChange: (page: number) => void;
+  hasNext: boolean;
+  nextCursor?: string;
+  previousCursor?: string;
+  onNext: (cursor?: string) => void;
+  onPrevious: (cursor?: string) => void;
 }
 
 export interface InlineActionItem {

src/pages/Trash/List.tsx

@@ -12,12 +12,14 @@ import { useEmailActions } from '@/hooks/useEmailActions';
 
 const List: FC = () => {
     const navigate = useNavigate();
-    const [currentPage, setCurrentPage] = useState(1);
+    const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
+    const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
     const [filters, setFilters] = useState<FilterValues>({});
     const emailActions = useEmailActions();
 
     const { data: trashData, isLoading, refetch, isFetching } = useGetTrashMessages({
-        page: currentPage,
+        next: nextCursor,
+        previous: previousCursor,
         limit: 10,
         ...filters
     });
@@ -73,7 +75,8 @@ const List: FC = () => {
 
     const handleFilterChange = (newFilters: FilterValues) => {
         setFilters(newFilters);
-        setCurrentPage(1);
+        setNextCursor(undefined);
+        setPreviousCursor(undefined);
     };
 
     const handleSelectionChange = (selectedRows: TrashMessage[]) => {
@@ -107,8 +110,16 @@ const List: FC = () => {
 
 
 
-    const handlePageChange = (page: number) => {
-        setCurrentPage(page);
+
+
+    const handleNext = (cursor?: string) => {
+        setNextCursor(cursor);
+        setPreviousCursor(undefined);
+    };
+
+    const handlePrevious = (cursor?: string) => {
+        setPreviousCursor(cursor);
+        setNextCursor(undefined);
     };
 
     const messages = trashData?.data?.trashMails || [];
@@ -147,9 +158,11 @@ const List: FC = () => {
                 selectable={true}
                 rowActions={getRowActions}
                 pagination={pager ? {
-                    totalPages: pager.totalPages,
-                    currentPage: pager.page,
-                    onPageChange: handlePageChange
+                    hasNext: typeof pager.nextCursor === 'string',
+                    nextCursor: typeof pager.nextCursor === 'string' ? pager.nextCursor : undefined,
+                    previousCursor: typeof pager.previousCursor === 'string' ? pager.previousCursor : undefined,
+                    onNext: handleNext,
+                    onPrevious: handlePrevious
                 } : undefined}
             />
         </div>

src/pages/Trash/types/TrashTypes.ts

@@ -35,7 +35,8 @@ export interface TrashMessage extends Record<string, unknown> {
 }
 
 export interface MessageListQueryDto {
-  page?: number;
+  next?: string;
+  previous?: string;
   limit?: number;
   search?: string;
   from?: string;
@@ -43,6 +44,7 @@ export interface MessageListQueryDto {
   datestart?: string;
   dateend?: string;
   attachments?: boolean;
+  unseen?: boolean;
   flagged?: boolean;
   order?: "asc" | "desc";
 }
@@ -57,8 +59,17 @@ export interface TrashResponse {
       totalPages: number;
       totalItems: number;
       limit: number;
-      prevPage: boolean;
-      nextPage: boolean;
+      previousCursor: string | boolean;
+      nextCursor: string | boolean;
     };
   };
 }
+
+export interface Pager {
+  page: number;
+  limit: number;
+  totalItems: number;
+  totalPages: number;
+  previousCursor: string | boolean;
+  nextCursor: string | boolean;
+}

src/pages/archive/List.tsx

@@ -12,12 +12,14 @@ import { useEmailActions } from '@/hooks/useEmailActions';
 
 const List: FC = () => {
     const navigate = useNavigate();
-    const [currentPage, setCurrentPage] = useState(1);
+    const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
+    const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
     const [filters, setFilters] = useState<FilterValues>({});
     const emailActions = useEmailActions();
 
     const { data: archiveData, isLoading, refetch, isFetching } = useGetArchiveMessages({
-        page: currentPage,
+        next: nextCursor,
+        previous: previousCursor,
         limit: 10,
         ...filters
     });
@@ -73,7 +75,8 @@ const List: FC = () => {
 
     const handleFilterChange = (newFilters: FilterValues) => {
         setFilters(newFilters);
-        setCurrentPage(1);
+        setNextCursor(undefined);
+        setPreviousCursor(undefined);
     };
 
     const handleSelectionChange = (selectedRows: ArchiveMessage[]) => {
@@ -105,8 +108,16 @@ const List: FC = () => {
         },
     ];
 
-    const handlePageChange = (page: number) => {
-        setCurrentPage(page);
+
+
+    const handleNext = (cursor?: string) => {
+        setNextCursor(cursor);
+        setPreviousCursor(undefined);
+    };
+
+    const handlePrevious = (cursor?: string) => {
+        setPreviousCursor(cursor);
+        setNextCursor(undefined);
     };
 
     const messages = archiveData?.data?.archiveMails || [];
@@ -145,9 +156,11 @@ const List: FC = () => {
                 selectable={true}
                 rowActions={getRowActions}
                 pagination={pager ? {
-                    totalPages: pager.totalPages,
-                    currentPage: pager.page,
-                    onPageChange: handlePageChange
+                    hasNext: typeof pager.nextCursor === 'string',
+                    nextCursor: typeof pager.nextCursor === 'string' ? pager.nextCursor : undefined,
+                    previousCursor: typeof pager.previousCursor === 'string' ? pager.previousCursor : undefined,
+                    onNext: handleNext,
+                    onPrevious: handlePrevious
                 } : undefined}
             />
         </div>

src/pages/archive/types/ArchiveTypes.ts

@@ -35,7 +35,8 @@ export interface ArchiveMessage extends Record<string, unknown> {
 }
 
 export interface MessageListQueryDto {
-  page?: number;
+  next?: string;
+  previous?: string;
   limit?: number;
   search?: string;
   from?: string;
@@ -43,6 +44,7 @@ export interface MessageListQueryDto {
   datestart?: string;
   dateend?: string;
   attachments?: boolean;
+  unseen?: boolean;
   flagged?: boolean;
   order?: "asc" | "desc";
 }
@@ -57,8 +59,17 @@ export interface ArchiveResponse {
       totalPages: number;
       totalItems: number;
       limit: number;
-      prevPage: boolean;
-      nextPage: boolean;
+      previousCursor: string | boolean;
+      nextCursor: string | boolean;
     };
   };
 }
+
+export interface Pager {
+  page: number;
+  limit: number;
+  totalItems: number;
+  totalPages: number;
+  previousCursor: string | boolean;
+  nextCursor: string | boolean;
+}

src/pages/draft/List.tsx

@@ -15,13 +15,15 @@ import { useSharedStore } from '@/shared/store/sharedStore';
 const List: FC = () => {
     const navigate = useNavigate();
     const { t } = useTranslation();
-    const [currentPage, setCurrentPage] = useState(1);
+    const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
+    const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
     const [filters, setFilters] = useState<FilterValues>({});
     const emailActions = useEmailActions();
     const { setDraftData, setOpenNewMessage, setEditingDraftId } = useSharedStore();
 
     const { data: draftData, isLoading, refetch, isFetching } = useGetDrafts({
-        page: currentPage,
+        next: nextCursor,
+        previous: previousCursor,
         limit: 10,
         ...filters
     });
@@ -106,7 +108,8 @@ const List: FC = () => {
 
     const handleFilterChange = (newFilters: FilterValues) => {
         setFilters(newFilters);
-        setCurrentPage(1);
+        setNextCursor(undefined);
+        setPreviousCursor(undefined);
     };
 
     const handleSelectionChange = (selectedRows: DraftMessage[]) => {
@@ -171,11 +174,19 @@ const List: FC = () => {
         },
     ];
 
-    const handlePageChange = (page: number) => {
-        setCurrentPage(page);
+
+
+    const handleNext = (cursor?: string) => {
+        setNextCursor(cursor);
+        setPreviousCursor(undefined);
     };
 
-    const messages = draftData?.data?.draftsMail || [];
+    const handlePrevious = (cursor?: string) => {
+        setPreviousCursor(cursor);
+        setNextCursor(undefined);
+    };
+
+    const messages = draftData?.data?.draftMails || [];
     const pager = draftData?.data?.pager;
 
     return (
@@ -211,9 +222,11 @@ const List: FC = () => {
                 selectable={true}
                 rowActions={getRowActions}
                 pagination={pager ? {
-                    totalPages: pager.totalPages,
-                    currentPage: pager.page,
-                    onPageChange: handlePageChange
+                    hasNext: typeof pager.nextCursor === 'string',
+                    nextCursor: typeof pager.nextCursor === 'string' ? pager.nextCursor : undefined,
+                    previousCursor: typeof pager.previousCursor === 'string' ? pager.previousCursor : undefined,
+                    onNext: handleNext,
+                    onPrevious: handlePrevious
                 } : undefined}
             />
         </div>

src/pages/draft/types/DraftTypes.ts

@@ -19,7 +19,8 @@ export interface EmailAttachmentDto {
 }
 
 export interface MessageListQueryDto {
-  page?: number;
+  next?: string;
+  previous?: string;
   limit?: number;
   search?: string;
   from?: string;
@@ -27,6 +28,7 @@ export interface MessageListQueryDto {
   datestart?: string;
   dateend?: string;
   attachments?: boolean;
+  unseen?: boolean;
   flagged?: boolean;
   order?: "asc" | "desc";
 }
@@ -76,21 +78,21 @@ export interface DraftMessage extends Record<string, unknown> {
 
 export type InboxMessage = DraftMessage;
 
-export interface InboxPager {
+export interface Pager {
   page: number;
   limit: number;
   totalItems: number;
   totalPages: number;
-  prevPage: boolean;
-  nextPage: boolean;
+  previousCursor: string | boolean;
+  nextCursor: string | boolean;
 }
 
 export interface InboxResponse {
   statusCode: number;
   success: boolean;
   data: {
-    pager: InboxPager;
-    draftsMail: DraftMessage[];
+    pager: Pager;
+    draftMails: DraftMessage[];
   };
 }
 

src/pages/favorite/List.tsx

@@ -13,12 +13,14 @@ import Favorite from '../received/Components/Favorite';
 
 const List: FC = () => {
     const navigate = useNavigate();
-    const [currentPage, setCurrentPage] = useState(1);
+    const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
+    const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
     const [filters, setFilters] = useState<FilterValues>({});
     const emailActions = useEmailActions();
 
     const { data: favoriteData, isLoading, refetch, isFetching } = useGetFavoriteMessages({
-        page: currentPage,
+        next: nextCursor,
+        previous: previousCursor,
         limit: 10,
         ...filters
     });
@@ -75,7 +77,8 @@ const List: FC = () => {
 
     const handleFilterChange = (newFilters: FilterValues) => {
         setFilters(newFilters);
-        setCurrentPage(1);
+        setNextCursor(undefined);
+        setPreviousCursor(undefined);
     };
 
     const handleSelectionChange = (selectedRows: FavoriteMessage[]) => {
@@ -125,8 +128,14 @@ const List: FC = () => {
         },
     ];
 
-    const handlePageChange = (page: number) => {
-        setCurrentPage(page);
+    const handleNext = (cursor?: string) => {
+        setNextCursor(cursor);
+        setPreviousCursor(undefined);
+    };
+
+    const handlePrevious = (cursor?: string) => {
+        setPreviousCursor(cursor);
+        setNextCursor(undefined);
     };
 
     const messages = favoriteData?.data?.favoriteMails || [];
@@ -165,9 +174,11 @@ const List: FC = () => {
                 selectable={true}
                 rowActions={getRowActions}
                 pagination={pager ? {
-                    totalPages: pager.totalPages,
-                    currentPage: pager.page,
-                    onPageChange: handlePageChange
+                    hasNext: typeof pager.nextCursor === 'string',
+                    nextCursor: typeof pager.nextCursor === 'string' ? pager.nextCursor : undefined,
+                    previousCursor: typeof pager.previousCursor === 'string' ? pager.previousCursor : undefined,
+                    onNext: handleNext,
+                    onPrevious: handlePrevious
                 } : undefined}
                 inlineActions={getInlineActions}
             />

src/pages/favorite/types/FavoriteTypes.ts

@@ -35,7 +35,8 @@ export interface FavoriteMessage extends Record<string, unknown> {
 }
 
 export interface MessageListQueryDto {
-  page?: number;
+  next?: string;
+  previous?: string;
   limit?: number;
   search?: string;
   from?: string;
@@ -43,6 +44,7 @@ export interface MessageListQueryDto {
   datestart?: string;
   dateend?: string;
   attachments?: boolean;
+  unseen?: boolean;
   flagged?: boolean;
   order?: "asc" | "desc";
 }
@@ -57,8 +59,17 @@ export interface FavoriteResponse {
       totalPages: number;
       totalItems: number;
       limit: number;
-      prevPage: boolean;
-      nextPage: boolean;
+      previousCursor: string | boolean;
+      nextCursor: string | boolean;
     };
   };
 }
+
+export interface Pager {
+  page: number;
+  limit: number;
+  totalItems: number;
+  totalPages: number;
+  previousCursor: string | boolean;
+  nextCursor: string | boolean;
+}

src/pages/received/List.tsx

@@ -20,14 +20,16 @@ const List: FC = () => {
 
     const navigate = useNavigate();
     const { t } = useTranslation();
-    const [currentPage, setCurrentPage] = useState(1);
+    const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
+    const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
     const [filters, setFilters] = useState<FilterValues>({});
     const emailActions = useEmailActions();
     const [openSummarizeModal, setOpenSummarizeModal] = useState(false);
     const { mutate: summarizeEmail, isPending: isSummarizing, data: summarizeData } = useSummarizeEmail();
 
     const { data: inboxData, isLoading, refetch, isFetching } = useGetInbox({
-        page: currentPage,
+        next: nextCursor,
+        previous: previousCursor,
         limit: 10,
         ...filters
     });
@@ -113,7 +115,8 @@ const List: FC = () => {
 
     const handleFilterChange = (newFilters: FilterValues) => {
         setFilters(newFilters);
-        setCurrentPage(1);
+        setNextCursor(undefined);
+        setPreviousCursor(undefined);
     };
 
     const handleSelectionChange = (selectedRows: InboxMessage[]) => {
@@ -189,12 +192,34 @@ const List: FC = () => {
         },
     ];
 
-    const handlePageChange = (page: number) => {
-        setCurrentPage(page);
+    const handleNext = (cursor?: string) => {
+        setNextCursor(cursor);
+        setPreviousCursor(undefined);
+    };
+
+    const handlePrevious = (cursor?: string) => {
+        setPreviousCursor(cursor);
+        setNextCursor(undefined);
     };
 
     const messages = inboxData?.data?.results || [];
     const pager = inboxData?.data?.pager;
+    const rootData = inboxData?.data as unknown as Record<string, unknown>;
+
+    // Debug pagination data
+    console.log('Full response data:', inboxData?.data);
+    console.log('Pager data:', pager);
+    console.log('Root nextCursor:', rootData?.nextCursor);
+    console.log('Root previousCursor:', rootData?.previousCursor);
+
+    // Get cursors from response
+    const responseNextCursor = (typeof rootData?.nextCursor === 'string' && rootData.nextCursor !== '') ? rootData.nextCursor as string : undefined;
+    const responsePreviousCursor = (typeof rootData?.previousCursor === 'string' && rootData.previousCursor !== '') ? rootData.previousCursor as string : undefined;
+
+    // Debug pagination values
+    console.log('responseNextCursor:', responseNextCursor);
+    console.log('responsePreviousCursor:', responsePreviousCursor);
+    console.log('Will render pagination?', !!(responseNextCursor || responsePreviousCursor));
 
     return (
         <div className='mt-2 md:mt-4 px-2 md:px-0'>
@@ -239,10 +264,12 @@ const List: FC = () => {
                 selectable={true}
                 inlineActions={getInlineActions}
                 rowActions={getRowActions}
-                pagination={pager ? {
-                    totalPages: pager.totalPages,
-                    currentPage: pager.page,
-                    onPageChange: handlePageChange
+                pagination={(responseNextCursor || responsePreviousCursor) ? {
+                    hasNext: !!responseNextCursor,
+                    nextCursor: responseNextCursor,
+                    previousCursor: responsePreviousCursor,
+                    onNext: handleNext,
+                    onPrevious: handlePrevious
                 } : undefined}
             />
 

src/pages/received/types/Types.ts

@@ -54,7 +54,8 @@ export interface SendEmailDto {
 }
 
 export interface MessageListQueryDto {
-  page?: number;
+  next?: string;
+  previous?: string;
   limit?: number;
   search?: string;
   from?: string;
@@ -111,20 +112,20 @@ export interface InboxMessage extends Record<string, unknown> {
   };
 }
 
-export interface InboxPager {
+export interface Pager {
   page: number;
   limit: number;
   totalItems: number;
   totalPages: number;
-  prevPage: boolean;
-  nextPage: boolean;
+  previousCursor: string | boolean;
+  nextCursor: string | boolean;
 }
 
 export interface InboxResponse {
   statusCode: number;
   success: boolean;
   data: {
-    pager: InboxPager;
+    pager: Pager;
     message: string;
     results: InboxMessage[];
   };

src/pages/search/List.tsx

@@ -12,12 +12,14 @@ import { useEmailActions } from '@/hooks/useEmailActions';
 
 const List: FC = () => {
     const navigate = useNavigate();
-    const [currentPage, setCurrentPage] = useState(1);
+    const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
+    const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
     const [filters, setFilters] = useState<FilterValues>({});
     const emailActions = useEmailActions();
 
     const { data: searchData, isLoading, refetch, isFetching } = useSearchMessages({
-        page: currentPage,
+        next: nextCursor,
+        previous: previousCursor,
         limit: 10,
         ...filters
     });
@@ -81,7 +83,8 @@ const List: FC = () => {
 
     const handleFilterChange = (newFilters: FilterValues) => {
         setFilters(newFilters);
-        setCurrentPage(1);
+        setNextCursor(undefined);
+        setPreviousCursor(undefined);
     };
 
     const handleSelectionChange = (selectedRows: SearchMessage[]) => {
@@ -124,8 +127,14 @@ const List: FC = () => {
         },
     ];
 
-    const handlePageChange = (page: number) => {
-        setCurrentPage(page);
+    const handleNext = (cursor?: string) => {
+        setNextCursor(cursor);
+        setPreviousCursor(undefined);
+    };
+
+    const handlePrevious = (cursor?: string) => {
+        setPreviousCursor(cursor);
+        setNextCursor(undefined);
     };
 
     const messages = searchData?.data?.results || [];
@@ -180,9 +189,11 @@ const List: FC = () => {
                 selectable={true}
                 rowActions={getRowActions}
                 pagination={pager ? {
-                    totalPages: pager.totalPages,
-                    currentPage: pager.page,
-                    onPageChange: handlePageChange
+                    hasNext: typeof pager.nextCursor === 'string',
+                    nextCursor: typeof pager.nextCursor === 'string' ? pager.nextCursor : undefined,
+                    previousCursor: typeof pager.previousCursor === 'string' ? pager.previousCursor : undefined,
+                    onNext: handleNext,
+                    onPrevious: handlePrevious
                 } : undefined}
             />
         </div>

src/pages/search/types/SearchTypes.ts

@@ -34,8 +34,24 @@ export interface SearchMessage extends Record<string, unknown> {
   };
 }
 
+export interface MessageListQueryDto {
+  next?: string;
+  previous?: string;
+  limit?: number;
+  search?: string;
+  from?: string;
+  subject?: string;
+  datestart?: string;
+  dateend?: string;
+  attachments?: boolean;
+  unseen?: boolean;
+  flagged?: boolean;
+  order?: "asc" | "desc";
+}
+
 export interface SearchQueryDto {
-  page?: number;
+  next?: string;
+  previous?: string;
   limit?: number;
   q?: string;
   dateFrom?: string;
@@ -52,8 +68,8 @@ export interface SearchResponse {
       totalPages: number;
       totalItems: number;
       limit: number;
-      prevPage: boolean;
-      nextPage: boolean;
+      previousCursor: string | boolean;
+      nextCursor: string | boolean;
     };
   };
 }

src/pages/sent/List.tsx

@@ -13,12 +13,14 @@ import { formatDate } from '@/config/func';
 
 const List: FC = () => {
     const navigate = useNavigate();
-    const [currentPage, setCurrentPage] = useState(1);
+    const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
+    const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
     const [filters, setFilters] = useState<FilterValues>({});
     const emailActions = useEmailActions();
 
     const { data: sentData, isLoading, refetch, isFetching } = useGetSentMessages({
-        page: currentPage,
+        next: nextCursor,
+        previous: previousCursor,
         limit: 10,
         ...filters
     });
@@ -91,7 +93,8 @@ const List: FC = () => {
 
     const handleFilterChange = (newFilters: FilterValues) => {
         setFilters(newFilters);
-        setCurrentPage(1);
+        setNextCursor(undefined);
+        setPreviousCursor(undefined);
     };
 
     const handleRowClick = (id: number, item: InboxMessage) => {
@@ -138,8 +141,14 @@ const List: FC = () => {
         },
     ];
 
-    const handlePageChange = (page: number) => {
-        setCurrentPage(page);
+    const handleNext = (cursor?: string) => {
+        setNextCursor(cursor);
+        setPreviousCursor(undefined);
+    };
+
+    const handlePrevious = (cursor?: string) => {
+        setPreviousCursor(cursor);
+        setNextCursor(undefined);
     };
 
     const messages = sentData?.data?.sentMails || [];
@@ -178,9 +187,11 @@ const List: FC = () => {
                 selectable={true}
                 rowActions={getRowActions}
                 pagination={pager ? {
-                    totalPages: pager.totalPages,
-                    currentPage: pager.page,
-                    onPageChange: handlePageChange
+                    hasNext: typeof pager.nextCursor === 'string',
+                    nextCursor: typeof pager.nextCursor === 'string' ? pager.nextCursor : undefined,
+                    previousCursor: typeof pager.previousCursor === 'string' ? pager.previousCursor : undefined,
+                    onNext: handleNext,
+                    onPrevious: handlePrevious
                 } : undefined}
             />
 

src/pages/sent/types/SentTypes.ts

@@ -1,5 +1,6 @@
 export interface MessageListQueryDto {
-  page?: number;
+  next?: string;
+  previous?: string;
   limit?: number;
   search?: string;
   from?: string;
@@ -7,6 +8,7 @@ export interface MessageListQueryDto {
   datestart?: string;
   dateend?: string;
   attachments?: boolean;
+  unseen?: boolean;
   flagged?: boolean;
   order?: "asc" | "desc";
 }
@@ -54,8 +56,8 @@ export interface Pager {
   limit: number;
   totalItems: number;
   totalPages: number;
-  prevPage: boolean;
-  nextPage: boolean;
+  previousCursor: string | boolean;
+  nextCursor: string | boolean;
 }
 
 export interface InboxResponse {

src/pages/spam/List.tsx

@@ -12,12 +12,14 @@ import { useEmailActions } from '@/hooks/useEmailActions';
 
 const List: FC = () => {
     const navigate = useNavigate();
-    const [currentPage, setCurrentPage] = useState(1);
+    const [nextCursor, setNextCursor] = useState<string | undefined>(undefined);
+    const [previousCursor, setPreviousCursor] = useState<string | undefined>(undefined);
     const [filters, setFilters] = useState<FilterValues>({});
     const emailActions = useEmailActions();
 
     const { data: spamData, isLoading, refetch, isFetching } = useGetSpamMessages({
-        page: currentPage,
+        next: nextCursor,
+        previous: previousCursor,
         limit: 10,
         ...filters
     });
@@ -72,7 +74,8 @@ const List: FC = () => {
 
     const handleFilterChange = (newFilters: FilterValues) => {
         setFilters(newFilters);
-        setCurrentPage(1);
+        setNextCursor(undefined);
+        setPreviousCursor(undefined);
     };
 
     const handleSelectionChange = (selectedRows: SpamMessage[]) => {
@@ -104,8 +107,14 @@ const List: FC = () => {
         },
     ];
 
-    const handlePageChange = (page: number) => {
-        setCurrentPage(page);
+    const handleNext = (cursor?: string) => {
+        setNextCursor(cursor);
+        setPreviousCursor(undefined);
+    };
+
+    const handlePrevious = (cursor?: string) => {
+        setPreviousCursor(cursor);
+        setNextCursor(undefined);
     };
 
     const messages = spamData?.data?.junkMails || [];
@@ -144,9 +153,11 @@ const List: FC = () => {
                 selectable={true}
                 rowActions={getRowActions}
                 pagination={pager ? {
-                    totalPages: pager.totalPages,
-                    currentPage: pager.page,
-                    onPageChange: handlePageChange
+                    hasNext: typeof pager.nextCursor === 'string',
+                    nextCursor: typeof pager.nextCursor === 'string' ? pager.nextCursor : undefined,
+                    previousCursor: typeof pager.previousCursor === 'string' ? pager.previousCursor : undefined,
+                    onNext: handleNext,
+                    onPrevious: handlePrevious
                 } : undefined}
             />
         </div>

src/pages/spam/types/SpamTypes.ts

@@ -35,7 +35,8 @@ export interface SpamMessage extends Record<string, unknown> {
 }
 
 export interface MessageListQueryDto {
-  page?: number;
+  next?: string;
+  previous?: string;
   limit?: number;
   search?: string;
   from?: string;
@@ -43,6 +44,7 @@ export interface MessageListQueryDto {
   datestart?: string;
   dateend?: string;
   attachments?: boolean;
+  unseen?: boolean;
   flagged?: boolean;
   order?: "asc" | "desc";
 }
@@ -56,8 +58,17 @@ export interface SpamResponse {
       totalPages: number;
       totalItems: number;
       limit: number;
-      prevPage: boolean;
-      nextPage: boolean;
+      previousCursor: string | boolean;
+      nextCursor: string | boolean;
     };
   };
 }
+
+export interface Pager {
+  page: number;
+  limit: number;
+  totalItems: number;
+  totalPages: number;
+  previousCursor: string | boolean;
+  nextCursor: string | boolean;
+}

vite.config.ts

@@ -2,8 +2,57 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import tsconfigPaths from "vite-tsconfig-paths";
+import { VitePWA } from "vite-plugin-pwa";
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react(), tailwindcss(), tsconfigPaths()],
+  plugins: [
+    react(),
+    tailwindcss(),
+    tsconfigPaths(),
+    VitePWA({
+      registerType: "autoUpdate",
+      devOptions: {
+        enabled: false, // در حالت توسعه هم کار کند
+      },
+      manifest: {
+        name: "Danak Mail",
+        short_name: "Danak Mail",
+        description: "Danak Mail",
+        theme_color: "#ffffff",
+        background_color: "#ffffff",
+        display: "standalone",
+        start_url: "/received", // صفحه اصلی PWA
+        icons: [
+          {
+            src: "/icon-192x192.png",
+            sizes: "192x192",
+            type: "image/png",
+          },
+          {
+            src: "/icon-512x512.png",
+            sizes: "512x512",
+            type: "image/png",
+          },
+        ],
+      },
+      // workbox: {
+      //   maximumFileSizeToCacheInBytes: 4 * 1024 * 1024, // افزایش به 4MB
+      //   runtimeCaching: [
+      //     {
+      //       urlPattern: /^https:\/\/admin-panel\.danakcorp\.com\//,
+      //       handler: "NetworkFirst",
+      //       options: {
+      //         cacheName: "api-cache",
+      //         expiration: {
+      //           maxEntries: 50,
+      //           maxAgeSeconds: 60 * 60 * 24,
+      //         },
+      //         networkTimeoutSeconds: 10,
+      //       },
+      //     },
+      //   ],
+      // },
+    }),
+  ],
 });