select all + mobile table in all pages

src/pages/sent/List.tsx

@@ -9,7 +9,8 @@ import { useNavigate } from 'react-router-dom';
 import { Paths } from '../../utils/Paths';
 import { useEmailActions } from '@/hooks/useEmailActions';
 import { RowActionItem } from '../../components/RowActionsDropdown';
-import { formatDate } from '@/config/func';
+import { Checkbox } from '@/components/ui/checkbox';
+import React from 'react';
 
 const List: FC = () => {
     const navigate = useNavigate();
@@ -26,8 +27,27 @@ const List: FC = () => {
     });
 
     const [selectedMessages, setSelectedMessages] = useState<InboxMessage[]>([]);
+    const [selectAll, setSelectAll] = useState(false);
 
-    const columns: ColumnType<InboxMessage>[] = [
+    // تابع برای گرفتن فقط ساعت
+    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<InboxMessage>[] = [
         {
             key: 'subject',
             title: 'موضوع پیام',
@@ -64,15 +84,72 @@ const List: FC = () => {
             title: 'تاریخ ارسال',
             align: 'center',
             render: (item) => (
-                <span className="">
-                    {formatDate(item.date)}
-                </span>
+                <span>{formatTime(item.date)}</span>
             )
         },
     ];
 
+    // ستون‌های موبایل (سه خطی)
+    const mobileColumns: ColumnType<InboxMessage>[] = [
+        {
+            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.to.map(recipient => recipient.address).join(', ')}
+                        </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 = sentData?.data?.sentMails || [];
+            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'
@@ -103,24 +180,30 @@ const List: FC = () => {
 
     const handleSelectionChange = (selectedRows: InboxMessage[]) => {
         setSelectedMessages(selectedRows);
+        // تنظیم وضعیت select all بر اساس انتخاب شده‌ها
+        const messages = sentData?.data?.sentMails || [];
+        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 handleArchiveSelected = () => {
         const messageIds = selectedMessages.map(message => message.id);
         emailActions.bulkArchive(messageIds, selectedMessages[0].mailbox);
         setSelectedMessages([]);
+        setSelectAll(false);
     };
 
     const handleFavoriteSelected = () => {
         const messageIds = selectedMessages.map(message => message.id);
         emailActions.bulkFavorite(messageIds, selectedMessages[0].mailbox);
         setSelectedMessages([]);
+        setSelectAll(false);
     };
 
     const getRowActions = (message: InboxMessage): RowActionItem[] => [