danak/dmail-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pixel perfect

Browse Source
This commit is contained in:
hamid zarghami
2025-07-26 15:52:18 +03:30
parent d324935836
commit 6dca90bd56
20 changed files with 184 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/empty.svg
+38
View File
@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 378.82 428.04">
<!-- Generator: Adobe Illustrator 29.4.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 152) -->
<defs>
<style>
.st0 {
fill: none;
}
.st0, .st1 {
stroke: #231f20;
stroke-miterlimit: 10;
stroke-width: 2px;
}
.st2 {
fill: #f1f2f2;
}
.st1 {
fill: #fff;
}
</style>
</defs>
<path class="st2" d="M26.33,134.89l139.31,26.29.91-75.8s4.58-51.64-32.93-72.01c0,0-14.37-12.9-28.87-12.22,0,0-35.27-3.06-61.2,23.83,0,0-17.22,16.87-17.22,43.16v66.77-.02Z"/>
<g>
<line class="st0" x1="234.92" y1="161.17" x2="234.92" y2="428.04"/>
<line class="st0" x1="210.55" y1="161.17" x2="210.55" y2="428.04"/>
<path class="st0" d="M309.35,2.08H114.32c8.68,3.97,20.29,10.61,31.51,21.61l.16.16c9.16,9.03,15.39,20.65,17.97,33.25.26,1.26.5,2.55.73,3.87,1.61,9.3,1.99,17.6,1.85,24.4-.3,25.27-.6,50.53-.91,75.8h211.69v-91.1c0-37.55-30.44-67.99-67.99-67.99h.02Z"/>
<path class="st0" d="M114.32,2.08S71.25-5.98,43.55,24.96c-11.33,12.66-17.22,29.28-17.22,46.27v63.65l139.31,26.29c-11.47,21.17-22.94,42.33-34.41,63.5-2.96,5.64-16.53,29.99-45.53,38.79-14.39,4.37-27.02,3.22-34.46,1.89-4.58-.98-11.14-2.9-18.23-6.91-4.37-2.47-17.15-9.92-25.19-25.84-7-13.85-6.69-26.75-6.2-32.48.76-8.29,2.53-18.8,6.52-30.44,5.24-15.26,12.4-26.89,18.19-34.79"/>
<line class="st0" x1="26.73" y1="133.12" x2="152.45" y2="133.12"/>
<polygon class="st1" points="198.72 101.68 198.72 191.03 169.06 191.03 169.06 175.6 179.74 175.6 179.74 101.68 198.72 101.68"/>
<circle class="st0" cx="188.68" cy="86.27" r="11.86"/>
<path class="st0" d="M240.22,93.77s37.36,31.83,60.09-7.5"/>
<path class="st0" d="M232.32,76.86s12.65,8.41,18.58-4.04"/>
<path class="st0" d="M287.86,68.75s12.65,8.41,18.58-4.04"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

src/components/RowActionsDropdown.tsx
+3 -3
View File
@@ -77,7 +77,7 @@ const RowActionsDropdown: React.FC<RowActionsDropdownProps> = ({ actions, classN
return createPortal(
<div
ref={dropdownRef}
className="fixed py-1 md:py-2 bg-white rounded-xl md:rounded-2xl shadow-lg z-[5] min-w-[140px] md:min-w-[150px]"
className="fixed py-3 md:py-3 bg-white rounded-xl md:rounded-2xl shadow-lg z-[5] min-w-[140px] md:min-w-[150px]"
style={{
top: `${position.top}px`,
left: `${position.left}px`,
@@ -87,11 +87,11 @@ const RowActionsDropdown: React.FC<RowActionsDropdownProps> = ({ actions, classN
<button
key={index}
onClick={() => handleActionClick(action)}
className={`w-full text-right px-2 md:px-3 py-1 md:py-1.5 text-xs md:text-[13px] flex items-center gap-2 hover:bg-gray-50 ${index === 0 ? 'rounded-t-lg' : ''
className={`w-full mt-1 text-right px-2 md:px-3 py-1 md:py-1.5 text-xs md:text-[13px] flex items-center gap-2 hover:bg-gray-50 ${index === 0 ? 'rounded-t-lg' : ''
} ${action.className || ''}`}
>
{action.icon && <span className="ml-2">{action.icon}</span>}
{action.label}
<span className={action.label === 'حذف' ? 'text-red-500' : ''}>{action.label}</span>
</button>
))}
</div>,
src/components/Table.tsx
+9 -6
View File
@@ -5,6 +5,7 @@ import { TableProps, RowDataType, ColumnType } from './types/TableTypes';
import { Checkbox } from './ui/checkbox';
import RowActionsDropdown from './RowActionsDropdown';
import Pagination from './Pagination';
import NoData from '@/assets/images/empty.svg';
const Table = <T extends RowDataType>({
columns,
@@ -13,7 +14,7 @@ const Table = <T extends RowDataType>({
onRowClick,
className = '',
rowClassName = '',
noDataMessage = 'هیچ داده‌ای یافت نشد',
noDataMessage = 'هیچ داده‌ای یافت نشد.',
headerClassName = 'bg-gray-50',
emptyRowsCount = 5,
showHeader = true,
@@ -117,7 +118,8 @@ const Table = <T extends RowDataType>({
if (data.length === 0) {
return (
<div className={`bg-white ${roundedClass} text-center text-gray-500`}>
{noDataMessage}
<img src={NoData} alt='no data' className='w-[100px] mx-auto pt-[70px]' />
<div className='-mt-5 pb-[70px]'>{noDataMessage}</div>
</div>
);
}
@@ -134,7 +136,7 @@ const Table = <T extends RowDataType>({
return (
<div
key={item.id}
className={`w-full min-h-[48px] ${bgColor} ${hoverColor} ${onRowClick ? 'cursor-pointer' : ''} ${getRowClassName(item, rowIndex)} px-4 py-3 flex items-center gap-3 ${rowIndex !== 0 ? 'border-t border-[#EAEDF5]' : ''}`}
className={`w-full min-h-[85px] ${bgColor} ${hoverColor} ${onRowClick ? 'cursor-pointer' : ''} ${getRowClassName(item, rowIndex)} px-4 py-3 flex items-center gap-3 ${rowIndex !== 0 ? 'border-t border-[#EAEDF5]' : ''}`}
onClick={() => handleRowClick(item)}
>
{selectable && (
@@ -215,8 +217,9 @@ const Table = <T extends RowDataType>({
if (data.length === 0) {
return (
<tr>
<td colSpan={columns.length + (selectable ? 1 : 0) + (inlineActions ? 1 : 0) + (rowActions ? 1 : 0)} className="px-3 md:px-6 pb-6 md:pb-8 text-center text-gray-500">
{noDataMessage}
<td colSpan={columns.length + (selectable ? 1 : 0) + (inlineActions ? 1 : 0) + (rowActions ? 1 : 0)} className="px-3 md:px-6 pb-6 md:pb-14 text-center text-gray-500">
<img src={NoData} alt='no data' className='w-[100px] mx-auto' />
<div className='-mt-5'>{noDataMessage}</div>
</td>
</tr>
);
@@ -231,7 +234,7 @@ const Table = <T extends RowDataType>({
return (
<tr
key={item.id}
className={`w-full h-[64px] md:h-[74px] ${bgColor} border-t border-[#EAEDF5] ${hoverColor} ${onRowClick ? 'cursor-pointer' : ''} ${getRowClassName(item, rowIndex)}`}
className={`w-full md:h-[64px] !h-[74px] ${bgColor} border-t border-[#EAEDF5] ${hoverColor} ${onRowClick ? 'cursor-pointer' : ''} ${getRowClassName(item, rowIndex)}`}
onClick={() => handleRowClick(item)}
>
{selectable && (
src/components/ui/checkbox.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ function Checkbox({
<CheckboxPrimitive.Root
data-slot="checkbox"
className={cn(
"peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
"peer border-[#8C90A3] dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
className
)}
{...props}
src/pages/Trash/List.tsx
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+12 -9
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+77
View File
@@ -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
+3 -68
View File
@@ -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
+29 -2
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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}