reponsive and selective actions and row actioin + pagination

src/pages/received/List.tsx

@@ -3,7 +3,8 @@ import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Table from '../../components/Table';
 import { ColumnType } from '../../components/types/TableTypes';
-import { InfoCircle, More, Refresh2 } from 'iconsax-react';
+import { InfoCircle, More, Refresh2, Trash, Edit, Archive, ArchiveSlash } from 'iconsax-react';
+import { RowActionItem } from '../../components/RowActionsDropdown';
 
 interface Message extends Record<string, unknown> {
     id: string;
@@ -16,6 +17,7 @@ interface Message extends Record<string, unknown> {
 const List: FC = () => {
     const { t } = useTranslation();
     const [isLoading] = useState(false);
+    const [selectedMessages, setSelectedMessages] = useState<Message[]>([]);
 
     const messageData: Message[] = [
         { id: '1', title: 'اولین پیام', sender: 'علی محمدی', date: '1402/05/12', read: true },
@@ -29,29 +31,87 @@ const List: FC = () => {
             title: 'عنوان پیام',
             render: (item) => (
                 <div className="flex items-center">
-                    {!item.read && <div className="w-2 h-2 rounded-full bg-blue-500 mr-2" />}
-                    <span>{item.title}</span>
+                    {!item.read && <div className="w-1.5 h-1.5 md:w-2 md:h-2 rounded-full bg-blue-500 mr-2" />}
+                    <span className="truncate">{item.title}</span>
                 </div>
             )
         },
-        { key: 'sender', title: 'فرستنده' },
-        { key: 'date', title: 'تاریخ', align: 'center' },
+        {
+            key: 'sender',
+            title: 'فرستنده',
+            render: (item) => (
+                <span className="truncate">{item.sender}</span>
+            )
+        },
+        {
+            key: 'date',
+            title: 'تاریخ',
+            align: 'center',
+            render: (item) => (
+                <span className="text-xs md:text-sm">{item.date}</span>
+            )
+        },
     ];
 
     const tableActions = (
-        <div className='flex items-center gap-4'>
-            <Refresh2 size={20} color='black' />
-            <More size={20} color='black' className='rotate-90' />
+        <div className='flex items-center gap-2 md:gap-4'>
+            <Refresh2 size={18} color='black' className="cursor-pointer" />
+            <More size={18} color='black' className='rotate-90 cursor-pointer' />
         </div>
     );
 
+    const selectedActions = (
+        <>
+            <Trash size={18} color='black' onClick={() => handleDeleteSelected()} className="cursor-pointer" />
+            <Archive size={18} color='black' onClick={() => handleArchiveSelected()} className="cursor-pointer" />
+            <Edit size={18} color='black' onClick={() => handleMarkAsReadSelected()} className="cursor-pointer" />
+        </>
+    );
+
     const handleFilterChange = (newFilters: FilterValues) => {
         console.log('Applied filters:', newFilters);
     };
 
+    const handleSelectionChange = (selectedRows: Message[]) => {
+        setSelectedMessages(selectedRows);
+    };
+
+    const handleDeleteSelected = () => {
+        console.log('حذف پیام‌های انتخاب شده:', selectedMessages.map(m => m.id));
+        // اینجا منطق حذف را پیاده‌سازی کنید
+    };
+
+    const handleArchiveSelected = () => {
+        console.log('بایگانی پیام‌های انتخاب شده:', selectedMessages.map(m => m.id));
+        // اینجا منطق بایگانی را پیاده‌سازی کنید
+    };
+
+    const handleMarkAsReadSelected = () => {
+        console.log('علامت‌گذاری به عنوان خوانده شده:', selectedMessages.map(m => m.id));
+        // اینجا منطق علامت‌گذاری را پیاده‌سازی کنید
+    };
+
+    const getRowActions = (message: Message): RowActionItem[] => [
+        {
+            label: 'خروج از آرشیو',
+            icon: <ArchiveSlash size={16} color="black" />,
+            onClick: () => console.log('خروج از آرشیو', message.id),
+        },
+        {
+            label: 'خوانده شده',
+            icon: <Edit size={16} color="black" />,
+            onClick: () => console.log('علامت‌گذاری به عنوان خوانده شده', message.id),
+        },
+        {
+            label: 'حذف',
+            icon: <Trash size={16} color="red" />,
+            onClick: () => console.log('حذف پیام', message.id),
+        },
+    ];
+
     return (
-        <div className='mt-4'>
-            <h1>{t('received.title')}</h1>
+        <div className='mt-2 md:mt-4 px-2 md:px-0'>
+            <h1 className="text-lg md:text-xl xl:text-2xl font-bold mb-4 md:mb-0">{t('received.title')}</h1>
 
             <Filters
                 fields={[
@@ -70,7 +130,6 @@ const List: FC = () => {
                     { type: 'input', name: 'search', placeholder: t('received.search') }
                 ]}
                 onChange={handleFilterChange}
-                className="mt-8 flex justify-between items-center"
                 searchField="search"
             />
 
@@ -80,14 +139,22 @@ const List: FC = () => {
                 isLoading={isLoading}
                 showHeader={false}
                 actions={tableActions}
+                selectedActions={selectedActions}
+                onSelectionChange={handleSelectionChange}
                 onRowClick={(id) => console.log(`کلیک روی پیام با شناسه ${id}`)}
                 noDataMessage={
                     <div className="flex flex-col items-center py-6">
-                        <InfoCircle size={40} className="text-gray-300 mb-2" />
-                        <div>هیچ پیامی یافت نشد</div>
+                        <InfoCircle size={32} className="text-gray-300 mb-2" />
+                        <div className="text-sm">هیچ پیامی یافت نشد</div>
                     </div>
                 }
                 selectable={true}
+                rowActions={getRowActions}
+                pagination={{
+                    totalPages: 10,
+                    currentPage: 1,
+                    onPageChange: () => { }
+                }}
             />
 
         </div>