design bug fix

src/components/Filters.tsx

@@ -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>
     );
 };