reponsive and selective actions and row actioin + pagination

src/components/Filters.tsx

@@ -44,8 +44,8 @@ const Filters: FC<FiltersProps> = ({
     fields,
     onChange,
     initialValues = {},
-    className = "mt-10 flex justify-between items-center",
-    fieldClassName = "flex gap-4",
+    className = "mt-6 md:mt-8 xl:mt-10 flex flex-col md:flex-row justify-between items-start md:items-center gap-4",
+    fieldClassName = "flex flex-col sm:flex-row gap-3 md:gap-4 w-full md:w-auto",
     searchField = "search" // پیش‌فرض فیلد سرچ با نام search
 }) => {
     const [filters, setFilters] = useState<FilterValues>({});
@@ -111,7 +111,7 @@ const Filters: FC<FiltersProps> = ({
                         key={field.name}
                         placeholder={field.placeholder}
                         variant="search"
-                        className="max-w-[200px]"
+                        className="w-full md:max-w-[200px]"
                         value={currentValue || field.defaultValue || ''}
                         onChange={(e) => handleInputChange(field.name, e)}
                     />
@@ -129,7 +129,7 @@ const Filters: FC<FiltersProps> = ({
                 {otherFields.map(renderField)}
             </div>
             {searchFieldObj && (
-                <div>
+                <div className="w-full md:w-auto">
                     {renderField(searchFieldObj)}
                 </div>
             )}