pixel perfect

src/pages/Trash/List.tsx

@@ -141,7 +141,7 @@ const List: FC = () => {
                 noDataMessage={
                     <div className="flex flex-col items-center">
                         <InfoCircle size={32} className="text-gray-300 mb-2" />
-                        <div className="text-sm">هیچ پیامی یافت نشد</div>
+                        <div className="text-sm">هیچ پیامی یافت نشد.</div>
                     </div>
                 }
                 selectable={true}

src/pages/archive/List.tsx

@@ -139,7 +139,7 @@ const List: FC = () => {
                 noDataMessage={
                     <div className="flex flex-col items-center">
                         <InfoCircle size={32} className="text-gray-300 mb-2" />
-                        <div className="text-sm">هیچ پیامی یافت نشد</div>
+                        <div className="text-sm">هیچ پیامی یافت نشد.</div>
                     </div>
                 }
                 selectable={true}

src/pages/draft/List.tsx

@@ -205,7 +205,7 @@ const List: FC = () => {
                 noDataMessage={
                     <div className="flex flex-col items-center ">
                         <InfoCircle size={32} className="text-gray-300 mb-2" />
-                        <div className="text-sm">هیچ پیش‌نویسی یافت نشد</div>
+                        <div className="text-sm">هیچ پیش‌نویسی یافت نشد.</div>
                     </div>
                 }
                 selectable={true}

src/pages/favorite/List.tsx

@@ -159,7 +159,7 @@ const List: FC = () => {
                 noDataMessage={
                     <div className="flex flex-col items-center">
                         <InfoCircle size={32} className="text-gray-300 mb-2" />
-                        <div className="text-sm">هیچ پیامی یافت نشد</div>
+                        <div className="text-sm">هیچ پیامی یافت نشد.</div>
                     </div>
                 }
                 selectable={true}

src/pages/received/Components/Header.tsx

@@ -17,20 +17,23 @@ const Header: FC<{ mailBoxName: MailboxEnum, flagged: boolean }> = ({ mailBoxNam
 
     return (
         <div className='flex justify-between items-center border-b border-border pb-6'>
-            <div className='flex xl:gap-4 gap-2'>
-                <ArrowRight size={18} color='#8C90A3' onClick={() => navigate(-1)} />
-                <MessageUnread />
-                <MessageSpam isActiveSpam={mailBoxName === MailboxEnum.Junk} />
-                <MessageArchive isActiveArchive={mailBoxName === MailboxEnum.ARCHIVE} />
-                <MessageFavorite flagged={flagged} />
-                {/* <VolumeMute size={18} color='black' className='xl:block hidden' /> */}
-                <MessageTrash isActiveTrash={mailBoxName === MailboxEnum.TRASH} />
-                {/* <More size={18} color='black' className='rotate-90' /> */}
+            <div className='flex flex-1 lg:gap-4'>
+                <ArrowRight size={18} color='black' onClick={() => navigate(-1)} />
+                <div className='flex xl:gap-4 gap-4 flex-1 lg:justify-start justify-center '>
+                    <MessageUnread />
+                    <MessageSpam isActiveSpam={mailBoxName === MailboxEnum.Junk} />
+                    <MessageArchive isActiveArchive={mailBoxName === MailboxEnum.ARCHIVE} />
+                    <MessageFavorite flagged={flagged} />
+                    {/* <VolumeMute size={18} color='black' className='xl:block hidden' /> */}
+                    <MessageTrash isActiveTrash={mailBoxName === MailboxEnum.TRASH} />
+                    {/* <More size={18} color='black' className='rotate-90' /> */}
+                </div>
             </div>
 
             <div className='flex gap-2'>
                 <Button
                     variant='secondary'
+                    className='lg:block hidden'
                 >
                     <div className='flex gap-2 items-center xl:px-5'>
                         <DocumentDownload size={20} color='black' />

src/pages/received/Components/MessageArchive.tsx

@@ -26,7 +26,7 @@ const MessageArchive: FC<{ isActiveArchive: boolean }> = ({ isActiveArchive }) =
                 })
             }
             setIsArchive(!isArchive)
-        }} size={18} variant={isArchive ? 'Bold' : 'Outline'} color='black' />
+        }} className='lg:size-[18px] size-[20px]' variant={isArchive ? 'Bold' : 'Outline'} color='black' />
     )
 }
 

src/pages/received/Components/MessageFavorite.tsx

@@ -25,7 +25,7 @@ const MessageFavorite: FC<{ flagged: boolean }> = ({ flagged }) => {
                 })
             }
             setIsFavorite(!isFavorite)
-        }} size={18} variant={isFavorite ? 'Bold' : 'Outline'} color={isFavorite ? '#FFC107' : 'black'} />
+        }} className='lg:size-[18px] size-[20px]' variant={isFavorite ? 'Bold' : 'Outline'} color={isFavorite ? '#FFC107' : 'black'} />
     )
 }
 

src/pages/received/Components/MessageSpam.tsx

@@ -27,7 +27,7 @@ const MessageSpam: FC<{ isActiveSpam: boolean }> = ({ isActiveSpam }) => {
                 })
             }
             setIsSpam(!isSpam)
-        }} size={18} variant={isSpam ? 'Bold' : 'Outline'} color='black' />
+        }} className='lg:size-[18px] size-[20px]' variant={isSpam ? 'Bold' : 'Outline'} color='black' />
     )
 }
 

src/pages/received/Components/MessageTrash.tsx

@@ -10,7 +10,7 @@ const MessageTrash: FC<{ isActiveTrash: boolean }> = ({ isActiveTrash }) => {
     const { mutate: restoreMessage } = useRestoreMessage()
     const navigate = useNavigate()
     return (
-        <Trash variant={isTrash ? 'Bold' : 'Outline'} size={18} color='#CD0000' onClick={() => {
+        <Trash variant={isTrash ? 'Bold' : 'Outline'} className='lg:size-[18px] size-[20px]' color='#CD0000' onClick={() => {
             setIsTrash(!isTrash)
             if (isTrash) {
                 restoreMessage({ messageId: id || '', mailbox: mailbox || '' }, {

src/pages/received/Components/MessageUnread.tsx

@@ -18,7 +18,7 @@ const MessageUnread: FC = () => {
                 markAsRead({ messageId: id || '', mailbox: mailbox || '' })
             }
             setIsRead(!isRead)
-        }} size={18} variant={isRead ? 'Outline' : 'Bold'} color='black' />
+        }} className='lg:size-[18px] size-[22px]' variant={isRead ? 'Outline' : 'Bold'} color='black' />
     )
 }
 

src/pages/received/Components/SummarizeModal.tsx

@@ -0,0 +1,77 @@
+import DefaulModal from '@/components/DefaulModal'
+import { InboxMessage } from '../types/Types'
+import Button from '@/components/Button'
+import { FC } from 'react'
+import Skeleton from 'react-loading-skeleton'
+import { useNavigate } from 'react-router-dom'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const SummarizeModal: FC<{ open: boolean, onClose: () => void, isPending: boolean, item: InboxMessage, id: string, mailbox: string, data: any }> = ({ open, onClose, isPending, item, id, mailbox, data }) => {
+    const navigate = useNavigate()
+    return (
+        <DefaulModal
+            open={open}
+            close={onClose}
+            isHeader
+            title_header='پیش نمایش ایمیل'
+        >
+            <div className='mt-5'>
+                {isPending ? (
+                    <div>
+                        <div className='text-xs'>
+                            موضوع:
+                        </div>
+                        <div className='mt-1.5'>
+                            <Skeleton height={16} />
+                        </div>
+
+                        <div className='mt-7'>
+                            <div className='text-xs'>
+                                خلاصه متن:
+                            </div>
+                            <div className='mt-3'>
+                                <Skeleton height={16} count={4} />
+                            </div>
+                        </div>
+                    </div>
+                ) : (
+                    <div>
+                        <div className='text-xs'>
+                            موضوع:
+                        </div>
+                        <div className='mt-1.5 text-xs'>
+                            {item.subject}
+                        </div>
+
+                        <div className='mt-7'>
+                            <div className='text-xs'>
+                                خلاصه متن:
+                            </div>
+                            <div className='mt-3 leading-5 text-xs text-description'>
+                                {data?.data?.summary}
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                <div className='mt-14 flex justify-end'>
+                    <div className='flex gap-3'>
+                        <Button
+                            label='بستن'
+                            variant='secondary'
+                            className='w-fit !px-10'
+                            onClick={onClose}
+                        />
+                        <Button
+                            label='مشاهده'
+                            className='w-fit !px-10'
+                            onClick={() => navigate(`/mail/${id}/${mailbox}`)}
+                        />
+                    </div>
+                </div>
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default SummarizeModal

src/pages/received/Components/Summerize.tsx

@@ -1,11 +1,8 @@
 import { FC, useState } from 'react'
 import { useSummarizeEmail } from '../hooks/useEmailData';
-import DefaulModal from '@/components/DefaulModal';
-import Button from '@/components/Button';
 import { InboxMessage } from '@/pages/draft/types/DraftTypes';
 import Intelligense from '@/assets/images/intelligense.svg'
-import Skeleton from 'react-loading-skeleton'
-import { useNavigate } from 'react-router-dom'
+import SummarizeModal from './SummarizeModal';
 
 const Summerize: FC<{ id: string, mailbox: string, item: InboxMessage }> = ({ id, mailbox, item }) => {
 
@@ -13,7 +10,6 @@ const Summerize: FC<{ id: string, mailbox: string, item: InboxMessage }> = ({ id
     const { mutate: summarizeEmail, isPending } = useSummarizeEmail();
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [data, setData] = useState<any>()
-    const navigate = useNavigate()
 
     const handleSummarizeEmail = () => {
         setOpen(true)
@@ -28,72 +24,11 @@ const Summerize: FC<{ id: string, mailbox: string, item: InboxMessage }> = ({ id
     return (
         <div>
             <div onClick={handleSummarizeEmail}>
-                <img src={Intelligense} alt='summerize' className='w-[18px] z-1 absolute -mt-2 ' />
+                <img src={Intelligense} alt='summerize' className='min-w-[18px] z-1 ' />
             </div>
 
 
-            <DefaulModal
-                open={open}
-                close={() => setOpen(false)}
-                isHeader
-                title_header='پیش نمایش ایمیل'
-            >
-                <div className='mt-5'>
-                    {isPending ? (
-                        <div>
-                            <div className='text-xs'>
-                                موضوع:
-                            </div>
-                            <div className='mt-1.5'>
-                                <Skeleton height={16} />
-                            </div>
-
-                            <div className='mt-7'>
-                                <div className='text-xs'>
-                                    خلاصه متن:
-                                </div>
-                                <div className='mt-3'>
-                                    <Skeleton height={16} count={4} />
-                                </div>
-                            </div>
-                        </div>
-                    ) : (
-                        <div>
-                            <div className='text-xs'>
-                                موضوع:
-                            </div>
-                            <div className='mt-1.5 text-xs'>
-                                {item.subject}
-                            </div>
-
-                            <div className='mt-7'>
-                                <div className='text-xs'>
-                                    خلاصه متن:
-                                </div>
-                                <div className='mt-3 leading-5 text-xs text-description'>
-                                    {data?.data?.summary}
-                                </div>
-                            </div>
-                        </div>
-                    )}
-
-                    <div className='mt-14 flex justify-end'>
-                        <div className='flex gap-3'>
-                            <Button
-                                label='بستن'
-                                variant='secondary'
-                                className='w-fit !px-10'
-                                onClick={() => setOpen(false)}
-                            />
-                            <Button
-                                label='مشاهده'
-                                className='w-fit !px-10'
-                                onClick={() => navigate(`/mail/${id}/${mailbox}`)}
-                            />
-                        </div>
-                    </div>
-                </div>
-            </DefaulModal>
+            <SummarizeModal open={open} onClose={() => setOpen(false)} isPending={isPending} item={item} id={id} mailbox={mailbox} data={data} />
         </div>
     )
 }

src/pages/received/List.tsx

@@ -6,29 +6,35 @@ import { ColumnType } from '../../components/types/TableTypes';
 import { InfoCircle, More, Refresh2, Trash, Edit, Archive, ArchiveTick, Star1 } from 'iconsax-react';
 import { RowActionItem } from '../../components/RowActionsDropdown';
 import { useNavigate } from 'react-router-dom';
-import { useGetInbox } from './hooks/useEmailData';
+import { useGetInbox, 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';
 import Summerize from './Components/Summerize';
+import Intelligense from '@/assets/images/intelligense.svg'
+import SummarizeModal from './Components/SummarizeModal';
 
 const List: FC = () => {
+
     const navigate = useNavigate();
     const { t } = useTranslation();
     const [currentPage, setCurrentPage] = useState(1);
     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,
-        limit: 25,
+        limit: 10,
         ...filters
     });
 
 
     const [selectedMessages, setSelectedMessages] = useState<InboxMessage[]>([]);
+    const [selectedMessage, setSelectedMessage] = useState<InboxMessage | null>(null);
 
     const columns: ColumnType<InboxMessage>[] = [
         {
@@ -152,6 +158,15 @@ const List: FC = () => {
     ];
 
     const getRowActions = (message: InboxMessage): RowActionItem[] => [
+        {
+            label: 'مشاهده خلاصه',
+            icon: <img src={Intelligense} alt='summerize' className='w-[18px] ' />,
+            onClick: () => {
+                setSelectedMessage(message)
+                setOpenSummarizeModal(true)
+                summarizeEmail({ messageId: message.id, mailbox: message.mailbox })
+            },
+        },
         {
             label: message.seen ? 'علامت‌گذاری به عنوان خوانده نشده' : 'علامت‌گذاری به عنوان خوانده شده',
             icon: <Edit size={16} color="black" />,
@@ -231,6 +246,18 @@ const List: FC = () => {
                 } : undefined}
             />
 
+            {selectedMessage && (
+                <SummarizeModal
+                    open={openSummarizeModal}
+                    onClose={() => setOpenSummarizeModal(false)}
+                    isPending={isSummarizing}
+                    item={selectedMessage}
+                    id={selectedMessage.id.toString()}
+                    mailbox={selectedMessage.mailbox}
+                    data={summarizeData}
+                />
+            )}
+
         </div>
     )
 }

src/pages/search/List.tsx

@@ -173,7 +173,7 @@ const List: FC = () => {
                     <div className="flex flex-col items-center">
                         <InfoCircle size={32} className="text-gray-300 mb-2" />
                         <div className="text-sm">
-                            {filters.q ? 'هیچ نتیجه‌ای یافت نشد' : 'برای جستجو کلمه مورد نظر را وارد کنید'}
+                            {filters.q ? 'هیچ نتیجه‌ای یافت نشد.' : 'برای جستجو کلمه مورد نظر را وارد کنید.'}
                         </div>
                     </div>
                 }

src/pages/sent/List.tsx

@@ -172,7 +172,7 @@ const List: FC = () => {
                 noDataMessage={
                     <div className="flex flex-col items-center">
                         <InfoCircle size={32} className="text-gray-300 mb-2" />
-                        <div className="text-sm">هیچ پیامی یافت نشد</div>
+                        <div className="text-sm">هیچ پیامی یافت نشد.</div>
                     </div>
                 }
                 selectable={true}

src/pages/spam/List.tsx

@@ -138,7 +138,7 @@ const List: FC = () => {
                 noDataMessage={
                     <div className="flex flex-col items-center">
                         <InfoCircle size={32} className="text-gray-300 mb-2" />
-                        <div className="text-sm">هیچ پیامی یافت نشد</div>
+                        <div className="text-sm">هیچ پیامی یافت نشد.</div>
                     </div>
                 }
                 selectable={true}