select all + mobile table in all pages

src/pages/spam/List.tsx

@@ -7,12 +7,13 @@ import { RowActionItem } from '../../components/RowActionsDropdown';
 import { useNavigate } from 'react-router-dom';
 import { useEmptySpam, useGetSpamMessages } from './hooks/useSpamData';
 import { SpamMessage } from './types/SpamTypes';
-import { formatDate } from '@/config/func';
 import { useEmailActions } from '@/hooks/useEmailActions';
 import Button from '@/components/Button';
 import ModalConfrim from '@/components/ModalConfrim';
 import { ErrorType } from '@/helpers/types';
 import { toast } from '@/components/Toast';
+import { Checkbox } from '@/components/ui/checkbox';
+import React from 'react';
 
 const List: FC = () => {
     const navigate = useNavigate();
@@ -31,8 +32,25 @@ const List: FC = () => {
     });
 
     const [selectedMessages, setSelectedMessages] = useState<SpamMessage[]>([]);
+    const [selectAll, setSelectAll] = useState(false);
 
-    const columns: ColumnType<SpamMessage>[] = [
+    const formatTime = (dateString: string) => {
+        try {
+            if (!dateString) return '--:--';
+            const date = new Date(dateString);
+            if (isNaN(date.getTime())) return '--:--';
+
+            return new Intl.DateTimeFormat("fa-IR", {
+                hour: "2-digit",
+                minute: "2-digit",
+            }).format(date);
+        } catch (error) {
+            console.error('خطا در فرمت زمان:', error);
+            return '--:--';
+        }
+    };
+
+    const desktopColumns: ColumnType<SpamMessage>[] = [
         {
             key: 'subject',
             title: 'عنوان پیام',
@@ -54,13 +72,70 @@ const List: FC = () => {
             title: 'تاریخ',
             align: 'center',
             render: (item) => (
-                <span>{formatDate(item.date)}</span>
+                <span>{formatTime(item.date)}</span>
             )
         },
     ];
 
+    const mobileColumns: ColumnType<SpamMessage>[] = [
+        {
+            key: 'content',
+            title: 'محتوا',
+            render: (item) => (
+                <div className="flex flex-col gap-1 w-full">
+                    <div className="flex items-center gap-2 w-full">
+                        <span className="truncate font-medium text-sm flex-1 min-w-0">
+                            {item.from.name || item.from.address}
+                        </span>
+                        <span className="text-xs text-gray-500 whitespace-nowrap">
+                            {formatTime(item.date)}
+                        </span>
+                    </div>
+
+                    <div className="truncate w-full text-sm font-medium">
+                        {item.subject || 'بدون موضوع'}
+                    </div>
+
+                    <div className="truncate w-full text-xs text-gray-600">
+                        {item.intro || 'بدون متن پیش‌نمایش'}
+                    </div>
+                </div>
+            )
+        }
+    ];
+
+    const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+
+    React.useEffect(() => {
+        const handleResize = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+
+        window.addEventListener('resize', handleResize);
+        return () => window.removeEventListener('resize', handleResize);
+    }, []);
+
+    const columns = isMobile ? mobileColumns : desktopColumns;
+
+    const handleSelectAll = (checked: boolean) => {
+        setSelectAll(checked);
+        if (checked) {
+            const messages = spamData?.data?.junkMails || [];
+            setSelectedMessages(messages);
+        } else {
+            setSelectedMessages([]);
+        }
+    };
+
     const tableActions = (
         <div className='flex items-center gap-2 md:gap-4'>
+            <div className="flex items-center gap-2">
+                <Checkbox
+                    checked={selectAll}
+                    onCheckedChange={handleSelectAll}
+                    className="w-4 h-4"
+                />
+            </div>
             <Refresh2
                 size={18}
                 color='black'
@@ -91,18 +166,22 @@ const List: FC = () => {
 
     const handleSelectionChange = (selectedRows: SpamMessage[]) => {
         setSelectedMessages(selectedRows);
+        const messages = spamData?.data?.junkMails || [];
+        setSelectAll(selectedRows.length === messages.length && messages.length > 0);
     };
 
     const handleDeleteSelected = () => {
         const messageIds = selectedMessages.map(message => message.id);
         emailActions.bulkMoveToTrash(messageIds, selectedMessages[0].mailbox);
         setSelectedMessages([]);
+        setSelectAll(false);
     };
 
     const handleNotSpamSelected = () => {
         // TODO: پیاده‌سازی علامت‌گذاری به عنوان غیر اسپم - نیاز به API endpoint جداگانه
         console.log('علامت‌گذاری به عنوان غیر اسپم:', selectedMessages.map(m => m.id));
         setSelectedMessages([]);
+        setSelectAll(false);
     };
 
     const handleSpam = () => {