design bug fix

2025-07-27 17:21:49 +03:30
parent 3c275dbcdd
commit e687f0cb5a
6 changed files with 32 additions and 201 deletions
@@ -1,9 +1,11 @@
 import { FC, useEffect, useState, ChangeEvent } from 'react';
-import { Filter, CloseCircle } from 'iconsax-react';
+import { Filter } from 'iconsax-react';
 import DatePicker from './DatePicker';
 import Input from './Input';
 import Select, { ItemsSelectType } from './Select';
+import DefaulModal from './DefaulModal';
 import moment from 'moment-jalaali'
+import Button from './Button';

 // تعریف نوع داده برای فیلدهای مختلف
 export type DateFieldType = {
@@ -156,35 +158,32 @@ const Filters: FC<FiltersProps> = ({
                )}
            </div>

-            {/* فیلترها برای موبایل (قابل باز و بسته شدن) */}
-            {isFiltersOpen && (
-                <div className="md:hidden w-full animate-fadeInDown">
-                    <div className="bg-gradient-to-br from-white to-gray-50 border border-gray-200 rounded-xl p-5 space-y-4">
-                        <div className="flex items-center justify-between pb-3 border-b border-gray-100">
-                            <div className="flex items-center gap-2">
-                                <Filter size={16} color="#6B7280" />
-                                <span className="text-sm font-medium text-gray-700">فیلتر کردن نتایج</span>
+            {/* فیلترها برای موبایل (در قالب مودال) */}
+            <DefaulModal
+                open={isFiltersOpen}
+                close={() => setIsFiltersOpen(false)}
+                isHeader={true}
+                title_header="فیلتر کردن نتایج"
+            >
+                <div className="pb-5 gap-4 flex flex-col-reverse">
+                    {otherFields.map(field => (
+                        <div key={field.name} className="w-full">
+                            <label className="block text-sm font-medium text-gray-700 mb-2">
+                                {field.placeholder}
+                            </label>
+                            <div className="w-full">
+                                {renderField(field)}
                            </div>
-                            <button
-                                onClick={() => setIsFiltersOpen(false)}
-                                className="p-1 hover:bg-gray-100 rounded-full transition-colors"
-                            >
-                                <CloseCircle size={18} color="#6B7280" />
-                            </button>
                        </div>
-                        {otherFields.map(field => (
-                            <div key={field.name} className="w-full">
-                                <label className="block text-xs font-medium text-gray-600 mb-2">
-                                    {field.placeholder}
-                                </label>
-                                <div className="transform hover:scale-[1.02] transition-transform duration-200">
-                                    {renderField(field)}
-                                </div>
-                            </div>
-                        ))}
-                    </div>
+                    ))}
                </div>
-            )}
+                <div className='mt-6'>
+                    <Button
+                        label='بستن'
+                        onClick={() => setIsFiltersOpen(false)}
+                    />
+                </div>
+            </DefaulModal>
        </div>
    );
 };
@@ -12,7 +12,7 @@ const HeaderModal: FC<Props> = (props: Props) => {
        <div className='flex justify-between items-center'>
            <div className='text-sm'>{props.label}</div>
            <div className='size-7 rounded-full bg-white bg-opacity-35 flex justify-center items-center'>
-                <CloseCircle size={16} color='white' onClick={props.close} />
+                <CloseCircle size={20} color='black' onClick={props.close} />
            </div>
        </div>
    )
@@ -116,7 +116,7 @@ const NewMessage: FC = () => {
                            }`}
                        onClick={handleClose}
                    />
-                    <div className={`fixed left-2  bottom-2 md:left-4 md:bottom-4  bg-white rounded-2xl md:rounded-3xl shadow-[0_0_20px_rgba(0,0,0,0.1)] z-[9999] p-4 md:p-6 xl:p-8 w-auto xl:w-[800px] max-h-[90vh] overflow-y-auto transition-transform duration-300 ease-out ${isClosing ? 'translate-y-[120%]' : isOpening ? 'translate-y-full' : 'translate-y-0'
+                    <div className={`fixed bottom-2 inset-x-2 md:bottom-4 md:inset-x-4 xl:left-4 xl:right-auto xl:bottom-4 bg-white rounded-2xl md:rounded-3xl shadow-[0_0_20px_rgba(0,0,0,0.1)] z-[9999] p-4 md:p-6 xl:p-8 xl:w-[800px] max-h-[90vh] overflow-y-auto transition-transform duration-300 ease-out ${isClosing ? 'translate-y-[120%]' : isOpening ? 'translate-y-full' : 'translate-y-0'
                        }`}>
                        {/* Header */}
                        <div className='flex justify-between items-center mb-6 md:mb-8'>
@@ -49,18 +49,15 @@ const Reply: FC<ReplyProps> = ({


    const handleClose = async () => {
-        // اگر محتوایی وارد شده، پیش‌نویس ذخیره کن
        if (content.trim()) {
            await handleSaveDraft()
            toast('پیش‌نویس ذخیره شد', 'success')
        }

-        // بسته کردن و برگشت به حالت قبل
        collapseReply()
-        onClose?.() // این خط مهمه تا parent component بفهمه
+        onClose?.()
    }

-    // اگر showInitialButton true باشه و هنوز expand نشده، فقط دکمه نشون بده
    if (showInitialButton && !isExpanded) {
        return (
            <div className={`flex justify-end ${className}`}>
@@ -82,12 +79,8 @@ const Reply: FC<ReplyProps> = ({
        collapseReply()
    }

-    // در غیر این صورت editor رو نشون بده
-    // (یا showInitialButton false هست یا isExpanded true هست)
-
    return (
        <div className={`mt-6 w-full ${className}`}>
-            {/* Reply Header */}
            <div className='flex items-center justify-between mb-4 p-3 bg-gray-50 rounded-lg border'>
                <div className='flex items-center gap-2 text-sm text-gray-600'>
                    <img src={AnswerIcon} className='w-4 h-4' />
@@ -114,11 +107,10 @@ const Reply: FC<ReplyProps> = ({
                </div>
            </div>

-            {/* Reply Content */}
+
            <div className='flex gap-4'>
-                <img src={AvatarImage} className='size-10 flex-shrink-0' />
+                <img src={AvatarImage} className='size-10 xl:block hidden flex-shrink-0' />
                <div className='w-full'>
-                    {/* To Field */}
                    <div className='mb-4 text-sm'>
                        <div className='flex items-center gap-2 p-2 bg-gray-50 rounded border'>
                            <span className='text-gray-600 min-w-fit'>به:</span>
@@ -126,7 +118,6 @@ const Reply: FC<ReplyProps> = ({
                        </div>
                    </div>

-                    {/* Subject Field */}
                    <div className='mb-4 text-sm'>
                        <div className='flex items-center gap-2 p-2 bg-gray-50 rounded border'>
                            <span className='text-gray-600 min-w-fit'>موضوع:</span>
@@ -138,7 +129,6 @@ const Reply: FC<ReplyProps> = ({
                        </div>
                    </div>

-                    {/* Editor */}
                    <div className='mb-4'>
                        <EmailEditor
                            value={content}
@@ -147,7 +137,6 @@ const Reply: FC<ReplyProps> = ({
                        />
                    </div>

-                    {/* Actions */}
                    <EmailFormActions
                        onSend={handleSend}
                        onClose={handleClose}
@@ -3,7 +3,7 @@ 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, Trash, Edit, Archive, ArchiveTick, Star1 } from 'iconsax-react';
+import { InfoCircle, Refresh2, Trash, ArchiveTick, Star1 } from 'iconsax-react';
 import { RowActionItem } from '../../components/RowActionsDropdown';
 import { useNavigate } from 'react-router-dom';
 import { useGetInbox, useMarkAllRead, useSummarizeEmail } from './hooks/useEmailData';
@@ -121,7 +121,6 @@ const List: FC = () => {
                onClick={() => handleDeleteSelected()}
                className="cursor-pointer"
            />
-            <More size={18} color='black' className='rotate-90 cursor-pointer' />
        </>
    );

@@ -194,26 +193,6 @@ const List: FC = () => {
                summarizeEmail({ messageId: message.id, mailbox: message.mailbox })
            },
        },
-        {
-            label: message.seen ? 'علامت‌گذاری به عنوان خوانده نشده' : 'علامت‌گذاری به عنوان خوانده شده',
-            icon: <Edit size={16} color="black" />,
-            onClick: () => emailActions.markAsSeen({ messageId: message.id, mailbox: message.mailbox }),
-        },
-        {
-            label: 'اضافه به علاقه‌مندی‌ها',
-            icon: <Star1 size={16} color="black" />,
-            onClick: () => emailActions.favorite({ messageId: message.id, mailbox: message.mailbox }),
-        },
-        {
-            label: 'بایگانی',
-            icon: <Archive size={16} color="black" />,
-            onClick: () => emailActions.archive({ messageId: message.id, mailbox: message.mailbox }),
-        },
-        {
-            label: 'حذف',
-            icon: <Trash size={16} color="red" />,
-            onClick: () => emailActions.moveToTrash({ messageId: message.id, mailbox: message.mailbox }),
-        },
    ];

    const handleNext = (cursor?: string) => {
@@ -1,136 +0,0 @@
-// import {
-//   Element3,
-//   Element4,
-//   Home2,
-//   Messages3,
-//   NotificationStatus,
-// } from "iconsax-react";
-// import { FC } from "react";
-// import { useTranslation } from "react-i18next";
-// // import { Pages } from "../config/Pages";
-// import { Link, useLocation } from "react-router-dom";
-
-// const Footer: FC = () => {
-//   const { t } = useTranslation("global");
-//   const location = useLocation();
-
-//   const isActive = (path: string) => location.pathname === path;
-
-//   return (
-//     <div className="xl:hidden">
-//       <div className="h-[60px] "></div>
-//       <div className="fixed z-10 bottom-2 right-3 left-3 bg-white h-[60px] rounded-2xl flex justify-between items-center px-3">
-//         <Link to={Pages.services.mine}>
-//           <div
-//             className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${
-//               isActive(Pages.dashboard) ? "text-black" : ""
-//             }`}
-//           >
-//             <Element4
-//               className="size-5"
-//               color={isActive(Pages.services.mine) ? "black" : "#8C90A3"}
-//               variant={isActive(Pages.services.mine) ? "Bold" : "Linear"}
-//             />
-//             <div
-//               className={`text-[10px] ${
-//                 isActive(Pages.services.mine) ? "text-black" : ""
-//               }`}
-//             >
-//               {t("footer.my_services")}
-//             </div>
-//           </div>
-//         </Link>
-//         <Link to={Pages.services.other}>
-//           <div
-//             className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${
-//               isActive(Pages.services.other) ? "text-black" : ""
-//             }`}
-//           >
-//             <Element3
-//               className="size-5"
-//               color={isActive(Pages.services.other) ? "black" : "#8C90A3"}
-//               variant={isActive(Pages.services.other) ? "Bold" : "Linear"}
-//             />
-//             <div
-//               className={`text-[10px] ${
-//                 isActive(Pages.services.other) ? "text-black" : ""
-//               }`}
-//             >
-//               {t("footer.other_services")}
-//             </div>
-//           </div>
-//         </Link>
-//         <Link to={Pages.dashboard}>
-//           <div
-//             className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${
-//               isActive(Pages.services.mine) ? "text-black" : ""
-//             }`}
-//           >
-//             <div className="bg-white p-1 rounded-full -mt-7">
-//               <div
-//                 className={`bg-black flex justify-center items-center size-10 rounded-full ${
-//                   isActive(Pages.services.mine) ? "bg-black" : ""
-//                 }`}
-//               >
-//                 <Home2
-//                   className="size-5"
-//                   color={isActive(Pages.dashboard) ? "white" : "white"}
-//                   variant={isActive(Pages.dashboard) ? "Bold" : "Linear"}
-//                 />
-//               </div>
-//             </div>
-//             <div
-//               className={`text-[10px] ${
-//                 isActive(Pages.services.mine) ? "text-black" : ""
-//               }`}
-//             >
-//               {t("footer.home")}
-//             </div>
-//           </div>
-//         </Link>
-//         <Link to={Pages.announcement.list}>
-//           <div
-//             className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${
-//               isActive(Pages.announcement.list) ? "text-black" : ""
-//             }`}
-//           >
-//             <NotificationStatus
-//               className="size-5"
-//               color={isActive(Pages.announcement.list) ? "black" : "#8C90A3"}
-//               variant={isActive(Pages.announcement.list) ? "Bold" : "Linear"}
-//             />
-//             <div
-//               className={`text-[10px] ${
-//                 isActive(Pages.announcement.list) ? "text-black" : ""
-//               }`}
-//             >
-//               {t("footer.announcements")}
-//             </div>
-//           </div>
-//         </Link>
-//         <Link to={Pages.ticket.list}>
-//           <div
-//             className={`text-description w-[70px] flex flex-col items-center gap-1.5 ${
-//               isActive(Pages.ticket.list) ? "text-black" : ""
-//             }`}
-//           >
-//             <Messages3
-//               className="size-5"
-//               color={isActive(Pages.ticket.list) ? "black" : "#8C90A3"}
-//               variant={isActive(Pages.ticket.list) ? "Bold" : "Linear"}
-//             />
-//             <div
-//               className={`text-[10px] ${
-//                 isActive(Pages.ticket.list) ? "text-black" : ""
-//               }`}
-//             >
-//               {t("footer.tickets")}
-//             </div>
-//           </div>
-//         </Link>
-//       </div>
-//     </div>
-//   );
-// };
-
-// export default Footer;