From 8b28a2dee0c27f89c900e43055e063239b83fc74 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Mon, 28 Jul 2025 16:38:27 +0330
Subject: [PATCH] inbox 3 row

---
 src/components/Table.tsx    |  2 +-
 src/pages/received/List.tsx | 97 ++++++++++++++++++++++++++++++-------
 2 files changed, 80 insertions(+), 19 deletions(-)

diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index cc80173..5fcedde 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -384,7 +384,7 @@ const Table = <T extends RowDataType>({
                 <div className={`md:hidden`}>
                     {(actionsPosition === 'top' || actionsPosition === 'above-header') && (
                         <div className="h-[64px] bg-white flex items-center justify-between px-4 rounded-t-2xl border-b border-[#EAEDF5]">
-                            <div className='flex items-center gap-2'>
+                            <div className='flex items-center gap-4 md:gap-2'>
                                 {actions}
                                 {selectable && selectedRows.length > 0 && selectedActions && selectedActions}
                             </div>
diff --git a/src/pages/received/List.tsx b/src/pages/received/List.tsx
index f440728..f65a408 100644
--- a/src/pages/received/List.tsx
+++ b/src/pages/received/List.tsx
@@ -1,5 +1,5 @@
 import Filters, { FilterValues } from '../../components/Filters';
-import { FC, useState } from 'react'
+import React, { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Table from '../../components/Table';
 import { ColumnType } from '../../components/types/TableTypes';
@@ -8,7 +8,7 @@ import { RowActionItem } from '../../components/RowActionsDropdown';
 import { useNavigate } from 'react-router-dom';
 import { useGetInbox, useMarkAllRead, useSummarizeEmail } from './hooks/useEmailData';
 import { InboxMessage } from './types/Types';
-import { formatDate } from '@/config/func';
+
 import MarkAsRead from '@/assets/images/mark_as_read.svg'
 import { useEmailActions } from '@/hooks/useEmailActions';
 import Favorite from './Components/Favorite';
@@ -40,11 +40,28 @@ const List: FC = () => {
         ...filters
     });
 
+    // تابع برای گرفتن فقط ساعت
+    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 [selectedMessages, setSelectedMessages] = useState<InboxMessage[]>([]);
     const [selectedMessage, setSelectedMessage] = useState<InboxMessage | null>(null);
 
-    const columns: ColumnType<InboxMessage>[] = [
+    // ستون‌های دسکتاپ (مثل اولیه)
+    const desktopColumns: ColumnType<InboxMessage>[] = [
         {
             key: 'subject',
             title: 'عنوان پیام',
@@ -73,11 +90,56 @@ const List: FC = () => {
             title: 'تاریخ',
             align: 'center',
             render: (item) => (
-                <span>{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.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 tableActions = (
         <div className='flex items-center gap-2 md:gap-4'>
             <Refresh2
@@ -206,7 +268,19 @@ const List: FC = () => {
 
     return (
         <div className='mt-2 md:mt-4 px-2 md:px-0'>
-            <h1 className="text-lg mb-4 md:mb-0">{t('received.title')}</h1>
+            <div className='flex justify-between items-center'>
+                <h1 className="">{t('received.title')}</h1>
+                <Button
+                    onClick={() => setShowModal(true)}
+                    loading={isMarkingAllRead}
+                    className='w-fit'
+                >
+                    <div className='flex items-center gap-2'>
+                        <Sms size={18} color='white' />
+                        <span>خواندن همه</span>
+                    </div>
+                </Button>
+            </div>
 
             <Filters
                 fields={[
@@ -228,19 +302,6 @@ const List: FC = () => {
                 searchField="search"
             />
 
-            <div className='flex justify-end mt-5 lg:mt-10 '>
-                <Button
-                    onClick={() => setShowModal(true)}
-                    loading={isMarkingAllRead}
-                    className='w-fit'
-                >
-                    <div className='flex items-center gap-2'>
-                        <Sms size={18} color='white' />
-                        <span>خواندن همه</span>
-                    </div>
-                </Button>
-            </div>
-
             <Table<InboxMessage>
                 columns={columns}
                 data={messages}