table and filter reusable component

src/components/Filters.tsx

@@ -0,0 +1,140 @@
+import { FC, useEffect, useState, ChangeEvent } from 'react';
+import DatePicker from './DatePicker';
+import Input from './Input';
+import Select, { ItemsSelectType } from './Select';
+
+// تعریف نوع داده برای فیلدهای مختلف
+export type DateFieldType = {
+    type: 'date';
+    name: string;
+    placeholder: string;
+    defaultValue?: string;
+};
+
+export type SelectFieldType = {
+    type: 'select';
+    name: string;
+    placeholder: string;
+    options: ItemsSelectType[];
+    defaultValue?: string;
+};
+
+export type InputFieldType = {
+    type: 'input';
+    name: string;
+    placeholder: string;
+    defaultValue?: string;
+};
+
+export type FieldType = DateFieldType | SelectFieldType | InputFieldType;
+
+// تعریف نوع داده برای مقادیر فیلترها
+export type FilterValues = Record<string, string | null>;
+
+interface FiltersProps {
+    fields: FieldType[];
+    onChange: (filters: FilterValues) => void;
+    initialValues?: FilterValues;
+    className?: string;
+    fieldClassName?: string;
+    searchField?: string; // نام فیلد جستجو که باید در انتها نمایش داده شود
+}
+
+const Filters: FC<FiltersProps> = ({
+    fields,
+    onChange,
+    initialValues = {},
+    className = "mt-10 flex justify-between items-center",
+    fieldClassName = "flex gap-4",
+    searchField = "search" // پیش‌فرض فیلد سرچ با نام search
+}) => {
+    const [filters, setFilters] = useState<FilterValues>({});
+
+    // تنظیم مقادیر اولیه
+    useEffect(() => {
+        if (Object.keys(initialValues).length > 0) {
+            setFilters(initialValues);
+        } else {
+            // تنظیم مقادیر پیش‌فرض از فیلدها
+            const defaultValues: FilterValues = {};
+            fields.forEach(field => {
+                if ('defaultValue' in field && field.defaultValue !== undefined) {
+                    defaultValues[field.name] = field.defaultValue;
+                }
+            });
+
+            if (Object.keys(defaultValues).length > 0) {
+                setFilters(defaultValues);
+                onChange(defaultValues);
+            }
+        }
+    }, [fields, initialValues, onChange]);
+
+    const handleChange = (name: string, value: string | null) => {
+        const newFilters = { ...filters, [name]: value };
+        setFilters(newFilters);
+        onChange(newFilters);
+    };
+
+    const handleInputChange = (name: string, event: ChangeEvent<HTMLInputElement>) => {
+        handleChange(name, event.target.value);
+    };
+
+    const renderField = (field: FieldType) => {
+        const currentValue = filters[field.name];
+
+        switch (field.type) {
+            case 'date':
+                return (
+                    <DatePicker
+                        key={field.name}
+                        placeholder={field.placeholder}
+                        onChange={(value) => handleChange(field.name, value)}
+                        defaultValue={currentValue || field.defaultValue || ''}
+                    />
+                );
+
+            case 'select':
+                return (
+                    <Select
+                        key={field.name}
+                        placeholder={field.placeholder}
+                        onChange={(e) => handleChange(field.name, e.target.value)}
+                        defaultValue={currentValue || field.defaultValue || ''}
+                        items={field.options}
+                    />
+                );
+
+            case 'input':
+                return (
+                    <Input
+                        key={field.name}
+                        placeholder={field.placeholder}
+                        variant="search"
+                        className="max-w-[200px]"
+                        value={currentValue || field.defaultValue || ''}
+                        onChange={(e) => handleInputChange(field.name, e)}
+                    />
+                );
+        }
+    };
+
+    // جداسازی فیلد جستجو از سایر فیلدها
+    const searchFieldObj = fields.find(field => field.name === searchField);
+    const otherFields = fields.filter(field => field.name !== searchField);
+
+    return (
+        <div className={className}>
+            <div className={fieldClassName}>
+                {otherFields.map(renderField)}
+            </div>
+            {searchFieldObj && (
+                <div>
+                    {renderField(searchFieldObj)}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Filters;