robobyte-front-builder 1.0.0

package/src/views/customFilter/CustomFilterDialog.js

@@ -0,0 +1,1142 @@
+// ** React Imports
+import {useEffect, useState, useContext, useCallback, useMemo} from 'react'
+import {useForm, Controller, useFieldArray, useWatch} from 'react-hook-form'
+import {yupResolver} from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+import {
+  Autocomplete,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  Grid,
+  TextField,
+  InputLabel,
+  Select,
+  MenuItem,
+  Box,
+  Typography,
+  IconButton,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Chip,
+  InputAdornment
+} from '@mui/material'
+import {Close, TrashCanOutline, Plus, ArrowLeft, FilterPlus} from 'mdi-material-ui'
+// ** Context
+import {SystemContext} from 'context/SystemContext'
+import {Endpoints, Services} from 'src/services/Endpoints'
+import {LocalizationProvider} from '@mui/x-date-pickers/LocalizationProvider'
+import {AdapterDayjs} from '@mui/x-date-pickers/AdapterDayjs'
+import {DatePicker} from '@mui/x-date-pickers/DatePicker'
+import handleChange from 'services/helper/handleChange'
+import {FilterFormat} from "services/helper/FilterFormat";
+import dayjs from "dayjs";
+import utc from "dayjs/plugin/utc";
+import timezone from "dayjs/plugin/timezone";
+import {debounce} from "lodash";
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+
+const CustomFilterDialog = props => {
+  // ** Props
+  const {
+    Filter,
+    handleGet,
+    handleFilterChange,
+    handleSetDefaults,
+    handleToggleDialogs,
+    dialog,
+    className,
+    LocalFilter,
+    filterIndex,
+    selectTFilter = [],
+    selectParamsMeta = [],
+    onSelectParamChange,
+    selectParamsValues = [],
+    onSelectParamsSave,
+  } = props
+  const [IsSubmitting, setIsSubmitting] = useState(false)
+  const [isLoading, setIsLoading] = useState(false)
+  const [FilterObjects, setFilterObject] = useState([])
+  const [Enums, setEnums] = useState([])
+  const [Classes, setClasses] = useState([])
+  const [SubFilters, setSubFilters] = useState([])
+  const [Path, setPath] = useState()
+  const [searchInputs, setSearchInputs] = useState([])
+  const [FriendlyName, setFriendlyName] = useState()
+  const [openDialogs, setOpenDialogs] = useState({
+    CustomFilter: false
+  })
+  const [open, setOpen] = useState(false)
+  const [key, setKey] = useState(Date.now())
+  const [DtoClassName, setDtoClassName] = useState('')
+  const [selectedFilter, setSelectedFilter] = useState({
+    item: [],
+    index: null,
+    dto: ''
+  })
+  // Temp selection params state: user edits are stored here and only applied on Save
+  const [tempParams, setTempParams] = useState([])
+  const mazajakValues = useContext(SystemContext)
+  const schema = yup.object().shape({
+    Tfilters: yup.array().of(yup.object().shape({}))
+  })
+  console.log(Filter)
+  // ** Form Initialization
+  const {
+    control,
+    handleSubmit,
+    watch,
+    setValue,
+    getValues,
+    reset,
+    formState: {errors}
+  } = useForm({
+    mode: 'onChange',
+    reValidateMode: 'onBlur',
+
+    resolver: yupResolver(schema),
+    defaultValues: {
+      Tfilters: Filter || []
+    }
+  })
+
+  const {fields, append, remove} = useFieldArray({
+    control,
+    name: 'Tfilters'
+  })
+  const Tfilters = useWatch({
+    control,
+    name: 'Tfilters'
+  })
+  // ** Handle Save
+  const handleSave = data => {
+    // Exclude fixed rows from LocalTfilter to avoid duplication when merged with builder fixed filters
+    const all = data?.Tfilters || []
+    const localOnly = all.filter(f => !f?.fixed)
+    const fixedOnly = all.filter(f => !!f?.fixed)
+    console.log(all)
+    // Apply any pending selection parameter edits on Save only
+    if (typeof onSelectParamsSave === 'function') {
+      const converted = (tempParams || []).map((p, idx) => {
+        const type = p?.type;
+        let v = p?.value;
+        if (type === 'Int') v = v == null || v === '' ? null : parseInt(v, 10);
+        else if (type === 'Double') v = v == null || v === '' ? null : parseFloat(v);
+        else if (type === 'Bool') {
+          if (v === '' || v == null) v = null; else v = !!v;
+        } else if (type === 'DateTime') {
+          v = v ? new Date(v) : null;
+        }
+        return {index: idx, value: v, type};
+      });
+      onSelectParamsSave(converted);
+    }
+    // Format full list for Tfilter; FilterFormat will skip empty fixed filters per rules
+    const formatedFilter = FilterFormat(all).filter(
+      x =>
+        x.value !== null &&
+        x.value !== '' &&
+        !(Array.isArray(x.value) && x.value.length === 0)
+    );
+    console.log(formatedFilter)
+    handleFilterChange('Tfilter', formatedFilter, filterIndex)
+    handleFilterChange('LocalTfilter', [...localOnly, ...fixedOnly], filterIndex)
+
+    // Persist fixed rows (raw) so dialog can restore their values on reopen (SGrid consumes fixedTFilter)
+    // handleFilterChange('fixedTFilter', fixedOnly, filterIndex)
+    handleDialogClose()
+  }
+
+  async function handleArrayChange(field, value, index) {
+    setValue(`Tfilters.${index}.Tfilter`, value)
+  }
+
+  async function handleGetFilterObject() {
+    try {
+      setIsLoading(true)
+      let response = await Services.PostService(Endpoints.FilterEndpoints.Post.GetFilterObject, false, {
+        type: className
+      }, {})
+      if (response) {
+        response = response.filter.map((value, index) => ({
+          ...value,
+          key: index,
+          modelClassName: value.modelClassName.length > 0 ? value.modelClassName : value.dtoClassName
+        }))
+        setFilterObject(response)
+        console.log(response)
+      } else {
+        setFilterObject([])
+      }
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  async function handleGetEnums(Enum) {
+    try {
+      let response = await Services.GetService(Endpoints.FilterEndpoints.Get.GetEnumValues, false, {enumName: Enum})
+      if (response) {
+        response.data = response.data.map((value, index) => ({...value, key: index}))
+        setEnums(response.data)
+      } else {
+        setEnums([])
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  async function handleGetMinDynamics(Class, tFilter, search) {
+    try {
+      let data = {
+        tFilter: FilterFormat(tFilter)
+      }
+      let response = await Services.PostService(Endpoints.FilterEndpoints.Post.GetMinDynamics, false, data, {
+        modelName: Class,
+        search: search,
+        withPagination: true,
+        page: 1,
+        pageSize: 200
+      })
+      if (response) {
+        response.data = response.data.map((value, index) => ({...value, key: index}))
+        setClasses(response.data)
+      } else {
+        setClasses([])
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  async function handleGetClassDto(dto) {
+    try {
+      let response = await Services.PostService(Endpoints.FilterEndpoints.Post.GetFilterObject, false, {type: dto}, {})
+      if (response) {
+        response = response.filter.map((value, index) => ({...value, key: index}))
+        return response
+      } else {
+        return null
+      }
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  const debouncedSearch = useMemo(() =>
+    debounce((text, index) => {
+      console.log(Tfilters[index])
+      let className
+      if ((Tfilters[index]?.modelClassName ?? []).length > 0) {
+        className = Tfilters[index]?.modelClassName
+      } else {
+        className = Tfilters[index]?.dtoClassName
+      }
+      handleGetMinDynamics(className, Tfilters[index]?.Tfilter, text);
+    }, 400), [Tfilters]);
+
+  const handleOptionSelect = useCallback(
+    async (option, field, index) => {
+      field.onChange(option)
+      setValue(`Tfilters.${index}`, option)
+      setValue(`Tfilters.${index}.method`, '')
+      setValue(`Tfilters.${index}.value`, null)
+      setValue(`Tfilters.${index}.localProperty`, option?.propertyType)
+      const newPath = Path?.value ? `${Path.value}.${option?.path}` : option?.path
+      const newFriendlyName = FriendlyName?.value
+        ? `${FriendlyName.value}>${option?.friendlyName}`
+        : option?.friendlyName
+      if (option?.isSource != true)
+        setPath(prevState => ({...prevState, value: newPath}))
+      setFriendlyName(prevState => ({...prevState, value: newFriendlyName}))
+      if (option?.propertyType === 'Class') {
+        setValue(`Tfilters.${index}.path`, `${newPath}.Id`)
+        setValue(`Tfilters.${index}.friendlyName`, newFriendlyName)
+        setValue(`Tfilters.${index}.propertyType`, `Int`)
+        setValue(`Tfilters.${index}.localProperty`, `Class`)
+        setDtoClassName(option?.dtoClassName)
+        const newOptions = await handleGetClassDto(option.dtoClassName)
+        setSubFilters(prevState => ({
+          ...prevState,
+          [`Tfilters.${index}`]: newOptions
+        }))
+        setKey(Date.now())
+      } else {
+        setValue(`Tfilters.${index}.path`, newPath)
+        setValue(`Tfilters.${index}.friendlyName`, newFriendlyName)
+        setSubFilters(prevState => ({
+          ...prevState,
+          [`Tfilters.${index}`]: []
+        }))
+        setPath()
+        setFriendlyName()
+      }
+      setOpen(true)
+    },
+    [setValue, handleGetClassDto, setSubFilters, Path, FriendlyName, setPath, setFriendlyName]
+  )
+
+  const handleDialogClose = () => {
+    handleToggleDialogs(dialog)
+  }
+  const handleOpenDialogs = dialog => {
+    handleChange(setOpenDialogs, dialog, !openDialogs[dialog])
+  }
+
+  useEffect(() => {
+    if (!Filter) return;
+    console.log(Filter)
+    // Helper that maps one list, casting DateTime values to JS Dates
+    const castDateFields = (list = []) =>
+      list.map(item => ({
+        ...item,
+        value:
+          item.propertyType === "DateTime" && typeof item.value === "string"
+            ? dayjs(item.value)
+            : item.value,
+      }));
+    // Build a brand-new object with Tfilter and LocalTfilter fixed
+    const normalized = castDateFields(Filter);
+    console.log(normalized)
+    // Now reset your RHF form with the real Date objects
+    reset({Tfilters: normalized});
+  }, [Filter, reset]);
+
+  // Initialize temporary params whenever metadata/values change
+  useEffect(() => {
+    const arr = Array.isArray(selectParamsMeta)
+      ? selectParamsMeta.map((m, idx) => {
+        const type = m.propertyType || m.PropertyType || m.type;
+        const existing = Array.isArray(selectParamsValues) && selectParamsValues[idx]
+          ? selectParamsValues[idx].value
+          : m.value;
+        return {value: existing ?? null, type};
+      })
+      : [];
+    setTempParams(arr);
+  }, [selectParamsMeta, selectParamsValues]);
+
+  useEffect(() => {
+    handleGetFilterObject()
+  }, [className])
+
+  const normalizePath = (p) => {
+    const s = (p ?? "").toString().toLowerCase();
+    return s.endsWith(".id") ? s.slice(0, -3) : s;
+  };
+
+  // Always render fixed filters first without changing the underlying RHF array
+  const orderedIndices = useMemo(() => {
+    const idxs = fields.map((_, i) => i);
+    // Sort: fixed (true) first, stable for others
+    idxs.sort((a, b) => {
+      const fa = Tfilters?.[a]?.fixed === true ? 1 : 0;
+      const fb = Tfilters?.[b]?.fixed === true ? 1 : 0;
+      return fb - fa;
+    });
+    return idxs;
+  }, [fields, Tfilters]);
+
+  return (
+    <>
+      <DialogTitle id='confirmation-dialog-title' sx={{padding: 0, marginBottom: 5}}>
+        <Box
+          className='sidebar-header'
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            backgroundColor: 'background.default',
+            p: theme => theme.spacing(3, 3.255, 3, 5.255)
+          }}
+        >
+          <Typography variant='h6'>{'بحث'}</Typography>
+          <Box sx={{display: 'flex', alignItems: 'center'}}>
+            <Close fontSize='small' onClick={handleDialogClose} sx={{cursor: 'pointer'}}/>
+          </Box>
+        </Box>
+      </DialogTitle>
+      <DialogContent className='dialog-body'>
+        <form onSubmit={handleSubmit(handleSave)}>
+          {/* Selection Params Section (does not affect Tfilters) */}
+          {Array.isArray(selectParamsMeta) && selectParamsMeta.some(p => p?.showInCustomFilter) && (
+            <Box sx={{mb: 3, mt: 3}}>
+              {/*<Typography variant='subtitle1' sx={{mb: 1}}>Parameters</Typography>*/}
+              <Grid container spacing={2}>
+                {selectParamsMeta.map((p, idx) => {
+                  if (!p?.showInCustomFilter) return null;
+                  const type = p.propertyType || p.PropertyType || p.type;
+                  const label = p.title || `Param @${idx}`;
+                  const current = tempParams[idx] || {value: null, type};
+                  const val = current.value;
+                  const setVal = (newVal) => {
+                    setTempParams(prev => {
+                      const arr = [...(prev || [])];
+                      arr[idx] = {value: newVal, type};
+                      return arr;
+                    });
+                  };
+                  return (
+                    <Grid item size={12} md={6} key={`param-${idx}`}>
+                      {type === 'Bool' ? (
+                        <FormControl fullWidth>
+                          <InputLabel>{label}</InputLabel>
+                          <Select
+                            label={label}
+                            size='small'
+                            value={val === true || val === 'true' ? true : val === false || val === 'false' ? false : ''}
+                            onChange={(e) => setVal(e.target.value === '' ? null : e.target.value)}
+                          >
+                            <MenuItem value={''}>-</MenuItem>
+                            <MenuItem value={true}>True</MenuItem>
+                            <MenuItem value={false}>False</MenuItem>
+                          </Select>
+                        </FormControl>
+                      ) : type === 'DateTime' ? (
+                        <LocalizationProvider dateAdapter={AdapterDayjs}>
+                          <DatePicker
+                            value={val ? dayjs(val) : null}
+                            onChange={(v) => setVal(v ? dayjs(v) : null)}
+                            renderInput={(params) => (
+                              <TextField
+                                {...params}
+                                fullWidth
+                                label={label}
+                                size="small"
+                                variant="outlined"
+                              />
+                            )}
+                          />
+                        </LocalizationProvider>
+                      ) : (
+                        <TextField
+                          fullWidth
+                          size='small'
+                          variant='outlined'
+                          type={type === 'Int' || type === 'Double' ? 'number' : 'text'}
+                          inputProps={{step: type === 'Double' ? 'any' : undefined}}
+                          label={label}
+                          value={val ?? ''}
+                          onChange={(e) => setVal(e.target.value === '' ? null : e.target.value)}
+                        />
+                      )}
+                    </Grid>
+                  );
+                })}
+              </Grid>
+            </Box>
+          )}
+
+          {orderedIndices.map((index) => (
+            <Grid container spacing={2} mt={1} key={fields[index]?.id ?? index}>
+              {!Tfilters[index]?.fixed && (
+                <Grid item size={3}>
+                  <FormControl fullWidth>
+                    <Controller
+                      name={`Tfilters.${index}`}
+                      control={control}
+                      render={({field}) => {
+                        const rowModel = Tfilters[index]
+                        console.log(selectTFilter)
+                        return (
+                          <Autocomplete
+                            {...field}
+                            loading={isLoading}
+                            disabled={!!rowModel?.fixed}
+                            onOpen={() => setOpen(true)}
+                            onClose={() => setOpen(false)}
+                            options={[
+                              ...(!Tfilters[index]?.dtoClassName ? selectTFilter : []),
+                              ...(Tfilters[index]?.localProperty === 'Class'
+                                ? SubFilters[`Tfilters.${index}`] || FilterObjects
+                                : FilterObjects),
+                            ]}
+                            // ✅ option-based label so built-in search works
+                            getOptionLabel={(option) =>
+                              typeof option === 'string'
+                                ? option
+                                : (option?.friendlyName || option?.path || '')
+                            }
+                            // optional: search by both fields
+                            filterOptions={(options, {inputValue}) => {
+                              const q = inputValue.toLowerCase();
+                              return options.filter(
+                                o =>
+                                  o?.friendlyName?.toLowerCase().includes(q) ||
+                                  o?.path?.toLowerCase().includes(q)
+                              );
+                            }}
+                            // ✅ stable equality even after you mutate path -> ".Id"
+                            isOptionEqualToValue={(opt, val) =>
+                              normalizePath(opt?.path) === normalizePath(val?.path)
+                            }
+                            value={field.value}
+                            onChange={(e, value) => {
+                              field.onChange(value);
+                              handleOptionSelect(value, field, index);
+                              setValue(`Tfilters.${index}.method`, '');
+                              setValue(`Tfilters.${index}.value`, null);
+                            }}
+                            renderOption={(props, option) => (
+                              <ListItem
+                                {...props}
+                                secondaryAction={
+                                  option.propertyType === 'Class' ? (
+                                    <IconButton
+                                      size='small'
+                                      onMouseDown={(e) => e.preventDefault()}
+                                      onClick={async (e) => {
+                                        e.stopPropagation();
+                                        await handleOptionSelect(option, field, index);
+                                      }}
+                                      title='Navigate into'
+                                    >
+                                      <ArrowLeft fontSize='small'/>
+                                    </IconButton>
+                                  ) : null
+                                }
+                              >
+                                <ListItemText primary={option.friendlyName}/>
+                              </ListItem>
+                            )}
+                            renderInput={(params) => (
+                              <TextField
+                                {...params}
+                                label="البحث عن"
+                                size="small"
+                                variant="outlined"
+                                helperText={Tfilters[index]?.friendlyName || ''}
+                              />
+                            )}
+                          />
+                        )
+                      }}
+                    />
+                  </FormControl>
+                </Grid>
+              )}
+
+              {!Tfilters[index]?.fixed && (
+                <Grid item size={2}>
+                  <FormControl fullWidth>
+                    <InputLabel>العملية</InputLabel>
+                    <Controller
+                      name={`Tfilters.${index}.method`}
+                      control={control}
+                      render={({field}) => (
+                        <Select
+                          {...field}
+                          fullWidth
+                          variant='outlined'
+                          size={'small'}
+                          disabled={!!Tfilters[index]?.fixed}
+                          onChange={e => {
+                            field.onChange(e.target.value)
+                            const value = e.target.value
+                            if (value == 'Orlist' || value == 'NotOrlist') {
+                              setValue(`Tfilters.${index}.isOrList`, true)
+                              setValue(`Tfilters.${index}.checkForNull`, false)
+                              setValue(`Tfilters.${index}.value`, [])
+                            } else if (value == 'checkForNull') {
+                              setValue(`Tfilters.${index}.checkForNull`, true)
+                              setValue(`Tfilters.${index}.isOrList`, false)
+                              setValue(`Tfilters.${index}.value`, null)
+                            } else {
+                              setValue(`Tfilters.${index}.isOrList`, false)
+                              setValue(`Tfilters.${index}.checkForNull`, false)
+                              setValue(`Tfilters.${index}.value`, null)
+                            }
+                          }}
+                        >
+                          {Tfilters[index]?.localProperty == 'String' && <MenuItem value='Contains'>يحتوي</MenuItem>}
+                          {Tfilters[index]?.localProperty == 'String' && (
+                            <MenuItem value='NotContains'>لا يحتوي</MenuItem>
+                          )}
+                          {Tfilters[index]?.localProperty !== 'DateTime' && <MenuItem value='Equals'>=</MenuItem>}
+                          {Tfilters[index]?.localProperty !== 'DateTime' && <MenuItem value='NotEquals'>=!</MenuItem>}
+
+                          {((Tfilters[index]?.localProperty == 'String' ||
+                            Tfilters[index]?.localProperty == 'Class' ||
+                            Tfilters[index]?.localProperty == 'Enum') && (Tfilters[index]?.path !== "Id" &&
+                            !Tfilters[index]?.path?.toLowerCase().endsWith(".id")
+                          )) && <MenuItem value='Orlist'> {'كل من'} </MenuItem>}
+                          {((Tfilters[index]?.localProperty == 'String' ||
+                            Tfilters[index]?.localProperty == 'Class' ||
+                            Tfilters[index]?.localProperty == 'Enum') && (Tfilters[index]?.path !== "Id" && !Tfilters[index]?.path?.toLowerCase().endsWith(".id")
+                          )) && (
+                            <MenuItem value='NotOrlist'> {'لا يحتوي على كل من'} </MenuItem>
+                          )}
+                          {(
+                            Tfilters[index]?.localProperty == 'Int' ||
+                            Tfilters[index]?.localProperty == 'Double' ||
+                            Tfilters[index]?.localProperty == 'DateTime') && (
+                            <MenuItem value='GreaterThan'> {'>'} </MenuItem>
+                          )}
+                          {(Tfilters[index]?.localProperty == 'Int' ||
+                            Tfilters[index]?.localProperty == 'Double' ||
+                            Tfilters[index]?.localProperty == 'DateTime') && (
+                            <MenuItem value='isBetween'> {'isBetween'} </MenuItem>
+                          )}
+
+                          {((Tfilters[index]?.path === "Id") || Tfilters[index]?.path?.toLowerCase().endsWith(".id")) && (
+                            <MenuItem value="Orlist">{"كل من"}</MenuItem>
+                          )}
+
+                          {((Tfilters[index]?.path === "Id") || Tfilters[index]?.path?.toLowerCase().endsWith(".id")) && (
+                            <MenuItem value='NotOrlist'> {'لا يحتوي على كل من'} </MenuItem>
+                          )}
+
+                          {(Tfilters[index]?.localProperty == 'Int' ||
+                            Tfilters[index]?.localProperty == 'Double' ||
+                            Tfilters[index]?.localProperty == 'DateTime') && (
+                            <MenuItem value='GreaterThanOrEqual'> {'=>'} </MenuItem>
+                          )}
+                          {(Tfilters[index]?.localProperty == 'Int' ||
+                            Tfilters[index]?.localProperty == 'Double' ||
+                            Tfilters[index]?.localProperty == 'DateTime') && (
+                            <MenuItem value='LessThan'> {'<'} </MenuItem>
+                          )}
+
+                          {(Tfilters[index]?.localProperty == 'Int' ||
+                            Tfilters[index]?.localProperty == 'Double' ||
+                            Tfilters[index]?.localProperty == 'DateTime') && (
+                            <MenuItem value='LessThanOrEqual'> {'<='} </MenuItem>
+                          )}
+
+                          {(Tfilters[index]?.localProperty == 'Class') && (
+                            <MenuItem value='checkForNull'> {'لايحتوي على قيمة'} </MenuItem>
+                          )}
+                        </Select>
+                      )}
+                    />
+                  </FormControl>
+                </Grid>
+              )}
+
+              {(
+                (Tfilters[index]?.localProperty === "Int" ||
+                  Tfilters[index]?.localProperty === "Double" ||
+                  Tfilters[index]?.localProperty === "String") &&
+                (Tfilters[index]?.method !== "NotOrlist" &&
+                  Tfilters[index]?.method !== "Orlist") &&
+                Tfilters[index]?.isOrList === false &&
+                Tfilters[index]?.method !== "isBetween"
+              ) && (
+                <Grid item size={Tfilters[index]?.fixed === true ? 12 : 5}>
+                  <Controller
+                    name={`Tfilters.${index}.value`}
+                    control={control}
+                    render={({field}) => (
+                      <TextField
+                        {...field}
+                        type="text"
+                        size="small"
+                        variant="outlined"
+                        fullWidth
+                        label={Tfilters[index]?.friendlyName || 'value'}
+                        placeholder={Tfilters[index]?.friendlyName || 'value'}
+                      />
+                    )}
+                  />
+                </Grid>
+              )}
+
+              {(Tfilters[index]?.localProperty === 'Int' || Tfilters[index]?.localProperty === 'Double') &&
+                Tfilters[index]?.method === 'isBetween' && (
+                  <Grid item size={Tfilters[index]?.fixed === true ? 6 : 3}>
+                    <Controller
+                      name={`Tfilters.${index}.value.fromValue`}
+                      control={control}
+                      render={({field}) => (
+                        <TextField {...field} type='text' size='small' variant='outlined' fullWidth label='From'/>
+                      )}
+                    />
+                  </Grid>
+                )}
+              {(Tfilters[index]?.localProperty === 'Int' || Tfilters[index]?.localProperty === 'Double') &&
+                Tfilters[index]?.method === 'isBetween' && (
+                  <Grid item size={Tfilters[index]?.fixed === true ? 6 : 3}>
+                    <Controller
+                      name={`Tfilters.${index}.value.toValue`}
+                      control={control}
+                      render={({field}) => (
+                        <TextField {...field} type='text' size='small' variant='outlined' fullWidth label='To'/>
+                      )}
+                    />
+                  </Grid>
+                )}
+              {(Tfilters[index]?.localProperty === 'Int' ||
+                  Tfilters[index]?.localProperty === 'Double' ||
+                  Tfilters[index]?.localProperty === 'String') && ((Tfilters[index]?.method == 'Orlist' || Tfilters[index]?.method == 'NotOrlist') && (Tfilters[index]?.path !== 'Id' && !Tfilters[index]?.path?.toLowerCase().endsWith(".id"))) &&
+                Tfilters[index]?.isOrList === true && (
+                  <Grid item size={Tfilters[index]?.fixed === true ? 12 : 5}>
+                    <Controller
+                      name={`Tfilters.${index}.value`}
+                      control={control}
+                      render={({field}) => (
+                        <Autocomplete
+                          multiple
+                          freeSolo
+                          options={[]}
+                          value={field.value || []}
+                          onChange={(event, newValue) => {
+                            field.onChange(newValue)
+                          }}
+                          renderTags={(tagValue, getTagProps) =>
+                            tagValue.map((option, i) => (
+                              <Chip key={i} variant='outlined' label={option} {...getTagProps({index: i})} />
+                            ))
+                          }
+                          renderInput={params => (
+                            <TextField {...params} variant='outlined' size='small' fullWidth
+                                       label={Tfilters[index]?.friendlyName || 'value'}
+                                       placeholder={Tfilters[index]?.friendlyName || 'value'}
+                            />
+                          )}
+                        />
+                      )}
+                    />
+                  </Grid>
+                )}
+
+              {(Tfilters[index]?.localProperty === 'Bool' || (Tfilters[index]?.localProperty === 'Class' && Tfilters[index]?.method === 'checkForNull')) && (
+                <Grid item size={Tfilters[index]?.fixed === true ? 12 : 5}>
+                  <FormControl fullWidth>
+                    <InputLabel>{Tfilters[index]?.friendlyName || 'القيمة'}</InputLabel>
+                    <Select
+                      value={watch(`Tfilters.${index}.value`)}
+                      fullWidth
+                      label={Tfilters[index]?.friendlyName || 'القيمة'}
+                      variant='outlined'
+                      size='small'
+                      onChange={e => {
+                        setValue(`Tfilters.${index}.value`, e.target.value)
+                      }}
+                    >
+                      <MenuItem value='Set'>نعم</MenuItem>
+                      <MenuItem value='NotSet'>كلا</MenuItem>
+                    </Select>
+                  </FormControl>
+                </Grid>
+              )}
+              {Tfilters[index]?.localProperty === 'Enum' && Tfilters[index]?.isOrList === false && (
+                <Grid item size={Tfilters[index]?.fixed === true ? 12 : 5}>
+                  <FormControl fullWidth>
+                    <Controller
+                      name={`Tfilters.${index}.value`}
+                      control={control}
+                      render={({field}) => (
+                        <Autocomplete
+                          {...field}
+                          options={Enums}
+                          getOptionLabel={option => option?.name || option}
+                          onChange={(e, value) => {
+                            field.onChange(value)
+                            setValue(`Tfilters.${index}.value`, value || '')
+                          }}
+                          renderInput={params => (
+                            <TextField
+                              {...params}
+                              label={Tfilters[index]?.friendlyName || 'البحث عن'}
+                              placeholder={Tfilters[index]?.friendlyName || 'البحث عن'}
+                              size='small'
+                              variant='outlined'
+                              InputProps={{
+                                ...params.InputProps,
+                                onFocus: () => handleGetEnums(Tfilters[index]?.enumName)
+                              }}
+                            />
+                          )}
+                        />
+                      )}
+                    />
+                  </FormControl>
+                </Grid>
+              )}
+              {Tfilters[index]?.localProperty === 'Enum' && Tfilters[index]?.isOrList === true && (
+                <Grid item size={Tfilters[index]?.fixed === true ? 12 : 5}>
+                  <FormControl fullWidth>
+                    <Controller
+                      name={`Tfilters.${index}.value`}
+                      control={control}
+                      render={({field}) => (
+                        <Autocomplete
+                          {...field}
+                          multiple
+                          options={Enums}
+                          getOptionLabel={option => option?.name || option}
+                          onChange={(e, value) => {
+                            const newValue = Array.isArray(value) ? value : []
+                            field.onChange(newValue)
+                            setValue(`Tfilters.${index}.value`, newValue)
+                          }}
+                          renderTags={(tagValue, getTagProps) =>
+                            tagValue.map((option, index) => (
+                              <Chip key={option?.name || index} label={option?.name} {...getTagProps({index})} />
+                            ))
+                          }
+                          renderInput={params => (
+                            <TextField
+                              {...params}
+                              label={Tfilters[index]?.friendlyName || 'البحث عن'}
+                              placeholder={Tfilters[index]?.friendlyName || 'البحث عن'}
+                              size='small'
+                              variant='outlined'
+                              InputProps={{
+                                ...params.InputProps,
+                                onFocus: () => handleGetEnums(Tfilters[index]?.enumName)
+                              }}
+                            />
+                          )}
+                          value={Array.isArray(field.value) ? field.value : []}
+                        />
+                      )}
+                    />
+                  </FormControl>
+                </Grid>
+              )}
+              {((Tfilters[index]?.localProperty === 'Class')
+                && Tfilters[index]?.isOrList === false
+                && Tfilters[index]?.method !== 'checkForNull') && (
+                <Grid item size={Tfilters[index]?.fixed === true ? 12 : 5}>
+                  <FormControl fullWidth>
+                    <Controller
+                      name={`Tfilters.${index}.value`}
+                      control={control}
+                      render={({field}) => (
+                        <Autocomplete
+                          {...field}
+                          options={Classes}
+                          getOptionKey={(option) => option?.id}
+                          getOptionLabel={(option) => option?.name ?? ''}
+                          onChange={(e, value) => {
+                            field.onChange(value || '');
+                            setValue(`Tfilters.${index}.value`, value ?? null);
+                            setSearchInputs(prev => ({...prev, [index]: ''}));
+                          }}
+                          inputValue={searchInputs[index] ?? ''}
+                          onInputChange={(e, newInputValue, reason) => {
+                            if (reason === 'input') {
+                              setSearchInputs(prev => ({...prev, [index]: newInputValue}));
+                              setClasses([]);
+                              debouncedSearch(newInputValue, index);
+                            } else if (reason === 'reset') {
+                              const label = field.value?.name ?? '';
+                              setSearchInputs(prev => ({...prev, [index]: label}));
+                            }
+                          }}
+                          renderInput={(params) => (
+                            <TextField
+                              {...params}
+                              label={Tfilters[index]?.friendlyName || 'البحث عن'}
+                              placeholder={Tfilters[index]?.friendlyName || 'البحث عن'}
+                              size="small"
+                              variant="outlined"
+                              InputProps={{
+                                ...params.InputProps,
+                                endAdornment: (
+                                  <InputAdornment position="end">
+                                    <IconButton
+                                      sx={{right: 0, position: 'absolute', top: -10}}
+                                      onClick={() => {
+                                        setSelectedFilter((e) => ({
+                                          item: Tfilters[index]?.Tfilter,
+                                          index: index,
+                                          dto: Tfilters[index]?.dtoClassName,
+                                        }));
+                                        handleOpenDialogs('CustomFilter');
+                                      }}
+                                    >
+                                      <FilterPlus/>
+                                    </IconButton>
+                                  </InputAdornment>
+                                ),
+
+                              }}
+                            />
+                          )}
+                        />
+                      )}
+                    />
+                  </FormControl>
+                </Grid>
+              )}
+
+              {((Tfilters[index]?.localProperty === 'Class' || ((Tfilters[index]?.path === "Id") || Tfilters[index]?.path?.toLowerCase().endsWith(".id"))) && Tfilters[index]?.isOrList === true && Tfilters[index]?.method !== 'checkForNull') && (
+                <Grid size={Tfilters[index]?.fixed === true ? 12 : 5}>
+                  <FormControl fullWidth>
+                    <Controller
+                      name={`Tfilters.${index}.value`}
+                      control={control}
+                      render={({field}) => (
+                        <Autocomplete
+                          multiple
+                          {...field}
+                          options={Classes}
+                          disableCloseOnSelect
+                          isOptionEqualToValue={(option, value) => option?.id === value?.id}
+                          getOptionLabel={option => option?.name ?? ''}
+                          value={Array.isArray(field.value) ? field.value : []}
+                          onChange={(e, value) => {
+                            const newValue = Array.isArray(value) ? value : [];
+                            field.onChange(newValue);
+                            setValue(`Tfilters.${index}.value`, newValue);
+                            setSearchInputs(prev => ({...prev, [index]: ''}));
+                          }}
+                          // 👇 Add these
+                          inputValue={searchInputs[index] ?? ''}
+                          onInputChange={(e, newInputValue, reason) => {
+                            if (reason === 'input') {
+                              setSearchInputs(prev => ({...prev, [index]: newInputValue}));
+                              setClasses([])
+                              debouncedSearch(newInputValue, index);
+                            }
+                          }}
+                          renderTags={(tagValue, getTagProps) =>
+                            tagValue.map((option, i) => (
+                              <Chip key={option?.id || i} label={option?.name} {...getTagProps({index: i})} />
+                            ))
+                          }
+                          renderInput={params => (
+                            <TextField
+                              {...params}
+                              label={Tfilters[index]?.friendlyName || 'البحث عن'}
+                              placeholder={Tfilters[index]?.friendlyName || 'البحث عن'}
+                              size="small"
+                              variant="outlined"
+                              InputProps={{
+                                ...params.InputProps,
+                                endAdornment: (
+                                  <InputAdornment position="end">
+                                    <IconButton
+                                      sx={{right: 0, position: 'absolute'}}
+                                      onClick={() => {
+                                        setSelectedFilter({
+                                          item: Tfilters[index]?.Tfilter,
+                                          index,
+                                          dto: Tfilters[index]?.dtoClassName
+                                        });
+                                        handleOpenDialogs('CustomFilter');
+                                      }}
+                                    >
+                                      <FilterPlus/>
+                                    </IconButton>
+                                  </InputAdornment>
+                                )
+                              }}
+                            />
+                          )}
+                        />
+                      )}
+                    />
+                  </FormControl>
+                </Grid>
+              )}
+
+              {Tfilters[index]?.localProperty === 'DateTime' && Tfilters[index]?.method === 'isBetween' && (
+                <>
+                  <Grid item size={Tfilters[index]?.fixed === true ? 6 : 3}>
+                    <Controller
+                      name={`Tfilters.${index}.value.fromValue`}
+                      control={control}
+                      render={({field}) => {
+                        const raw = field.value;
+                        let val = null;
+                        if (raw) {
+                          const d = dayjs.isDayjs(raw) ? raw : dayjs(raw);
+                          val = d.isValid() ? d : null;
+                        }
+                        return (
+                          <LocalizationProvider dateAdapter={AdapterDayjs}>
+                            <DatePicker
+                              {...field}
+                              value={val}
+                              onChange={(v) => field.onChange(v ? dayjs(v).startOf('day') : null)}
+                              renderInput={(params) => (
+                                <TextField
+                                  {...params}
+                                  fullWidth
+                                  label={(Tfilters[index]?.friendlyName ? `${Tfilters[index]?.friendlyName} - من` : 'من التاريخ')}
+                                  size="small"
+                                  variant="outlined"
+                                />
+                              )}
+                            />
+                          </LocalizationProvider>
+                        );
+                      }}
+                    />
+                  </Grid>
+
+                  <Grid item size={Tfilters[index]?.fixed === true ? 6 : 3}>
+                    <Controller
+                      name={`Tfilters.${index}.value.toValue`}
+                      control={control}
+                      render={({field}) => {
+                        const raw = field.value;
+                        let val = null;
+                        if (raw) {
+                          const d = dayjs.isDayjs(raw) ? raw : dayjs(raw);
+                          val = d.isValid() ? d : null;
+                        }
+
+                        return (
+                          <LocalizationProvider dateAdapter={AdapterDayjs}>
+                            <DatePicker
+                              {...field}
+                              value={val}
+                              onChange={(v) => field.onChange(v ? dayjs(v).endOf('day') : null)}
+                              renderInput={(params) => (
+                                <TextField
+                                  {...params}
+                                  fullWidth
+                                  label={(Tfilters[index]?.friendlyName ? `${Tfilters[index]?.friendlyName} - الى` : 'الى التاريخ')}
+                                  size="small"
+                                  variant="outlined"
+                                />
+                              )}
+                            />
+                          </LocalizationProvider>
+                        );
+                      }}
+                    />
+                  </Grid>
+                </>
+              )}
+
+              {Tfilters[index]?.localProperty === 'DateTime' && Tfilters[index]?.method !== 'isBetween' && (
+                <>
+                  <Grid item size={Tfilters[index]?.fixed === true ? 12 : 5}>
+                    <Controller
+                      name={`Tfilters.${index}.value`}
+                      control={control}
+                      render={({field}) => {
+                        // Normalize to a valid Dayjs or null. Do NOT wrap null/undefined which can re-populate old values.
+                        const raw = field.value;
+                        let dateValue = null;
+                        if (raw) {
+                          const d = dayjs.isDayjs(raw) ? raw : dayjs(raw);
+                          dateValue = d.isValid() ? d : null;
+                        }
+
+                        return (
+                          <LocalizationProvider dateAdapter={AdapterDayjs}>
+                            <DatePicker
+                              {...field}
+                              value={dateValue}
+                              onChange={(newVal) => {
+                                // When cleared, MUI passes null. Ensure we store null; if invalid, also null.
+                                if (!newVal) {
+                                  field.onChange(null);
+                                } else if (dayjs.isDayjs(newVal)) {
+                                  field.onChange(newVal.isValid() ? newVal : null);
+                                } else {
+                                  const d = dayjs(newVal);
+                                  field.onChange(d.isValid() ? d : null);
+                                }
+                              }}
+                              renderInput={(params) => (
+                                <TextField
+                                  {...params}
+                                  fullWidth
+                                  label={(Tfilters[index]?.friendlyName || 'التاريخ')}
+                                  placeholder={(Tfilters[index]?.friendlyName || 'التاريخ')}
+                                  size="small"
+                                  variant="outlined"
+                                />
+                              )}
+                            />
+                          </LocalizationProvider>
+                        );
+                      }}
+                    />
+                  </Grid>
+                </>
+              )}
+
+              {/*{Tfilters[index]?.fixed && (*/}
+              {/*  <Grid item size={12} sx={{mt:'0px',pt:'0px'}}>*/}
+              {/*    <Typography variant='caption' color='text.secondary'>*/}
+              {/*      {(Tfilters[index]?.friendlyName || Tfilters[index]?.path || '') + (Tfilters[index]?.method ? ` • ${Tfilters[index]?.method}` : '')}*/}
+              {/*    </Typography>*/}
+              {/*  </Grid>*/}
+              {/*)}*/}
+
+              <Grid item size={1} sx={{display: 'flex', alignItems: 'center', pb: 0}}>
+                {!Tfilters[index]?.fixed && (
+                  <IconButton size='small' sx={{color: 'red'}} onClick={() => remove(index)}>
+                    <TrashCanOutline fontSize='small'/>
+                  </IconButton>
+                )}
+              </Grid>
+            </Grid>
+          ))}
+
+          <IconButton
+            sx={{marginTop: '10px'}}
+            variant='contained'
+            color='primary'
+            onClick={() => {
+              append({value: null})
+              setPath('')
+              setFriendlyName('')
+              setSubFilters([])
+            }}
+          >
+            <FilterPlus sx={{fontSize: '25px !important'}}/>
+          </IconButton>
+
+          <DialogActions sx={{pb: {xs: 8}, justifyContent: 'center'}}>
+            <Button type='submit' variant='contained' sx={{mr: 2}} disabled={IsSubmitting}>
+              {IsSubmitting ? (
+                <CircularProgress
+                  sx={{
+                    color: 'common.white',
+                    width: '20px !important',
+                    height: '20px !important',
+                    mr: theme => theme.spacing(2)
+                  }}
+                />
+              ) : null}
+              حفظ
+            </Button>
+            <Button variant='outlined' color='secondary' onClick={handleDialogClose}>
+              الغاء
+            </Button>
+            <Button variant='outlined' color='secondary' onClick={handleSetDefaults}>
+              Reset
+            </Button>
+          </DialogActions>
+        </form>
+      </DialogContent>
+
+      <Dialog
+        fullWidth
+        open={openDialogs.CustomFilter}
+        maxWidth='lg'
+        scroll='body'
+        onClose={() => handleOpenDialogs('CustomFilter')}
+      >
+        <CustomFilterDialog
+          handleFilterChange={handleArrayChange}
+          className={selectedFilter?.dto}
+          handleToggleDialogs={handleOpenDialogs}
+          Filter={selectedFilter?.item}
+          filterIndex={selectedFilter?.index}
+          LocalFilter={true}
+        />
+      </Dialog>
+    </>
+  )
+}
+
+export default CustomFilterDialog