robobyte-front-builder 1.0.17 → 1.0.21

package/src/views/customFilter/CustomFilterDialog.js

@@ -1,5 +1,5 @@
 // ** React Imports
-import {useEffect, useState, useContext, useCallback, useMemo} from 'react'
+import {useEffect, useState, useContext, useCallback, useMemo, useRef} from 'react'
 import {useForm, Controller, useFieldArray, useWatch} from 'react-hook-form'
 import {yupResolver} from '@hookform/resolvers/yup'
 import * as yup from 'yup'
@@ -24,9 +24,15 @@ import {
   ListItemIcon,
   ListItemText,
   Chip,
-  InputAdornment
+  Paper,
+  InputAdornment,
+  Collapse
 } from '@mui/material'
-import {Close, TrashCanOutline, Plus, ArrowLeft, FilterPlus} from 'mdi-material-ui'
+import {Close, TrashCanOutline, Plus, ArrowLeft, FilterPlus, CodeBraces} from 'mdi-material-ui'
+import dynamic from 'next/dynamic'
+import { HelpPopover } from 'views/builder/inspector/fields/FunctionHelpPopover'
+
+const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {ssr: false})
 // ** Context
 import {SystemContext} from 'context/SystemContext'
 import {Endpoints, Services} from 'src/services/Endpoints'
@@ -39,6 +45,7 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
 import {debounce} from "lodash";
+import {AuthContext} from "context/AuthContext";
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
@@ -60,7 +67,10 @@ const CustomFilterDialog = props => {
     onSelectParamChange,
     selectParamsValues = [],
     onSelectParamsSave,
+    customFilterCode: initialCustomFilterCode,
+    isViewer,
   } = props
+  const authContext = useContext(AuthContext)
   const [IsSubmitting, setIsSubmitting] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [FilterObjects, setFilterObject] = useState([])
@@ -70,6 +80,7 @@ const CustomFilterDialog = props => {
   const [Path, setPath] = useState()
   const [searchInputs, setSearchInputs] = useState([])
   const [FriendlyName, setFriendlyName] = useState()
+  const [isStartUp, setIsStartup] = useState(true)
   const [openDialogs, setOpenDialogs] = useState({
     CustomFilter: false
   })
@@ -83,11 +94,13 @@ const CustomFilterDialog = props => {
   })
   // Temp selection params state: user edits are stored here and only applied on Save
   const [tempParams, setTempParams] = useState([])
+  const [customCode, setCustomCode] = useState('')
+  const [showCodeEditor, setShowCodeEditor] = useState(false)
+  const initializedRef = useRef(false)
   const mazajakValues = useContext(SystemContext)
   const schema = yup.object().shape({
     Tfilters: yup.array().of(yup.object().shape({}))
   })
-  console.log(Filter)
   // ** Form Initialization
   const {
     control,
@@ -115,6 +128,11 @@ const CustomFilterDialog = props => {
     control,
     name: 'Tfilters'
   })
+
+  const updateCustom = (idx, field, val) => {
+    setValue(`Tfilters.${idx}.${field}`, val)
+  }
+
   // ** Handle Save
   const handleSave = data => {
     // Exclude fixed rows from LocalTfilter to avoid duplication when merged with builder fixed filters
@@ -122,6 +140,78 @@ const CustomFilterDialog = props => {
     const localOnly = all.filter(f => !f?.fixed)
     const fixedOnly = all.filter(f => !!f?.fixed)
     console.log(all)
+
+    let customFilterResult = []
+
+    // 1. Process individual custom filters from the list
+    all.forEach(f => {
+      if (f.isCustom && f.customCode && f.customCode.trim() && f.value !== null && f.value !== '') {
+        try {
+          const executeCode = new Function('authContext', 'value', 'filters', `
+            try {
+              return (function(authContext, value, filters) {
+                ${f.customCode}
+              })(authContext, value, filters);
+            } catch (e) {
+              console.error('Inner error in customFilterCode:', e);
+              return null;
+            }
+          `)
+          const result = executeCode(authContext, f.value, all)
+          if (result && typeof result === 'object' && !Array.isArray(result)) {
+            // Add value to the object if it's not already set to something else
+            if (result.value === undefined || result.value === null) {
+              result.value = f.value
+            }
+            customFilterResult.push(result)
+          } else if (Array.isArray(result)) {
+            // If the result is an array, process each item to add the value if it's not already set
+            const processedResult = result.map(item => {
+              if (item && typeof item === 'object' && !Array.isArray(item)) {
+                if (item.value === undefined || item.value === null) {
+                  return {...item, value: f.value}
+                }
+              }
+              return item
+            })
+            customFilterResult = [...customFilterResult, ...processedResult]
+          }
+        } catch (error) {
+          console.error('Error executing custom filter code for ' + f.friendlyName, error)
+        }
+      }
+    })
+
+    // 2. Execute main custom code if present
+    if (customCode && customCode.trim()) {
+      try {
+        // Create function with access to authContext
+        const executeCode = new Function('authContext', 'filters', `
+          let customFilter = [];
+          try {
+            ${customCode}
+          } catch (e) {
+            console.error('Inner error in customFilterCode:', e);
+          }
+          return customFilter;
+        `)
+        const result = executeCode(authContext, all)
+        console.log('Main custom filter result:', result)
+
+        // Validate that result is an array
+        if (result && Array.isArray(result)) {
+          customFilterResult = [...customFilterResult, ...result]
+        } else if (result && !Array.isArray(result)) {
+          alert('Error: Main custom filter must return an array')
+          return
+        }
+      } catch (error) {
+        console.error('Error executing main custom filter code:', error)
+        alert('Error in main custom filter code: ' + error.message)
+        return
+      }
+    }
+
     // Apply any pending selection parameter edits on Save only
     if (typeof onSelectParamsSave === 'function') {
       const converted = (tempParams || []).map((p, idx) => {
@@ -139,15 +229,30 @@ const CustomFilterDialog = props => {
       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)
+    const formattedFilter = FilterFormat(all).filter(x => {
+      // Exclude custom filter definitions from the final list sent to the API
+      if (x.isCustom) return false;
+
+      const v = x.value;
+
+      if (v === null || v === '') return false;
+
+      if (Array.isArray(v) && v.length === 0) return false;
+
+      if (typeof v === 'object' && v !== null && !dayjs(v).isValid()) {
+        const {fromValue, toValue} = v;
+        if (fromValue == null && toValue == null) return false;
+      }
+
+      return true;
+    });
+
+    // Merge custom results
+    const finalFilter = [...formattedFilter, ...customFilterResult].filter(x => !x.isCustom);
+
+    handleFilterChange('Tfilter', finalFilter, filterIndex)
     handleFilterChange('LocalTfilter', [...localOnly, ...fixedOnly], filterIndex)
+    handleFilterChange('customFilterCode', customCode, filterIndex)
 
     // Persist fixed rows (raw) so dialog can restore their values on reopen (SGrid consumes fixedTFilter)
     // handleFilterChange('fixedTFilter', fixedOnly, filterIndex)
@@ -155,7 +260,7 @@ const CustomFilterDialog = props => {
   }
 
   async function handleArrayChange(field, value, index) {
-    setValue(`Tfilters.${index}.Tfilter`, value)
+    setValue(`Tfilters.${index}.${field}`, value)
   }
 
   async function handleGetFilterObject() {
@@ -294,23 +399,30 @@ const CustomFilterDialog = props => {
   }
 
   useEffect(() => {
-    if (!Filter) return;
-    console.log(Filter)
+    if (!Filter || !Array.isArray(Filter) || isStartUp == false) return
+    // Only run if Filter has actual content or has changed meaningfully
+    if (Filter.length === 0 && !isStartUp) return
+
     // 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,
-      }));
+        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)
+    const normalized = castDateFields(Filter)
     // Now reset your RHF form with the real Date objects
-    reset({Tfilters: normalized});
-  }, [Filter, reset]);
+    reset({Tfilters: normalized})
+    setIsStartup(false)
+  }, [Filter, isStartUp])
+
+  // Restore custom filter code when dialog opens (only once)
+  useEffect(() => {
+    if (initialCustomFilterCode && !initializedRef.current) {
+      setCustomCode(initialCustomFilterCode)
+      initializedRef.current = true
+    }
+  }, [initialCustomFilterCode])
 
   // Initialize temporary params whenever metadata/values change
   useEffect(() => {
@@ -323,7 +435,11 @@ const CustomFilterDialog = props => {
         return {value: existing ?? null, type};
       })
       : [];
-    setTempParams(arr);
+
+    setTempParams(prev => {
+      if (JSON.stringify(prev) === JSON.stringify(arr)) return prev;
+      return arr;
+    });
   }, [selectParamsMeta, selectParamsValues]);
 
   useEffect(() => {
@@ -386,49 +502,66 @@ const CustomFilterDialog = props => {
                     });
                   };
                   return (
-                    <Grid item size={12} md={6} key={`param-${idx}`}>
-                      {type === 'Bool' ? (
-                        <FormControl fullWidth>
-                          <InputLabel>{label}</InputLabel>
-                          <Select
-                            label={label}
+                    <Grid key={`param-${idx}`} size={{ xs: 12, md: 6 }}>
+                      <Box sx={{display: 'flex', alignItems: 'center'}}>
+                        {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 && typeof val === 'string' && val.includes('{{auth.') ? null : (val ? dayjs(val) : null)}
+                              onChange={(v) => setVal(v ? dayjs(v) : null)}
+                              slotProps={{
+                                field: {clearable: true},
+                                textField: {fullWidth: true, label, size: 'small', variant: 'outlined'}
+                              }}
+                            />
+                          </LocalizationProvider>
+                        ) : (
+                          <TextField
+                            fullWidth
                             size='small'
-                            value={val === true || val === 'true' ? true : val === false || val === 'false' ? false : ''}
+                            variant='outlined'
+                            type={val && typeof val === 'string' && val.includes('{{auth.') ? 'text' : 'text'}
+                            inputProps={{step: type === 'Double' ? 'any' : undefined}}
+                            label={label}
+                            value={val ?? ''}
                             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)}
-                        />
-                      )}
+                        )}
+                        <IconButton
+                          size="small"
+                          sx={{ml: 1}}
+                          onClick={() => {
+                            let authPath = '';
+                            if (idx === 0) authPath = 'user.id';
+                            else if (label.toLowerCase().includes('shop')) authPath = 'user.contact.shopId';
+                            else if (label.toLowerCase().includes('contact')) authPath = 'user.contact.id';
+                            else if (label.toLowerCase().includes('user')) authPath = 'user.id';
+
+                            if (authPath) {
+                              setVal(`{{auth.${authPath}}}`);
+                            } else {
+                              setVal(`{{auth.user.id}}`);
+                            }
+                          }}
+                          title="Bind to Auth Context"
+                        >
+                          <CodeBraces fontSize="small"/>
+                        </IconButton>
+                      </Box>
                     </Grid>
                   );
                 })}
@@ -436,650 +569,845 @@ const CustomFilterDialog = props => {
             </Box>
           )}
 
-          {orderedIndices.map((index) => (
-            <Grid container spacing={2} mt={1} key={fields[index]?.id ?? index}>
-              {!Tfilters[index]?.fixed && (
-                <Grid item size={3}>
-                  <FormControl fullWidth>
+          {/*{isViewer && Tfilters.some(row => row?.isMainFilter && !row?.fixed) && (*/}
+          {/*  <Box sx={{ mb: 4, px: 1 }}>*/}
+          {/*    <Grid container spacing={2}>*/}
+          {/*      {orderedIndices.map((index) => {*/}
+          {/*        const row = Tfilters[index];*/}
+          {/*        const showAsLabel = isViewer && row?.isMainFilter && !row?.fixed;*/}
+          {/*        if (!showAsLabel) return null;*/}
+
+          {/*        const valueDisplay = row.method === 'isBetween'*/}
+          {/*          ? `${row.value?.fromValue ?? ''} - ${row.value?.toValue ?? ''}`*/}
+          {/*          : (Array.isArray(row.value)*/}
+          {/*              ? row.value.map(v => v?.name ?? v).join(', ')*/}
+          {/*              : (row.value?.name ?? row.value ?? ''));*/}
+
+          {/*        return (*/}
+          {/*          <Grid key={fields[index]?.id ?? index}>*/}
+          {/*            <Paper variant="outlined" sx={{ p: 2, bgcolor: 'background.default', display: 'flex', flexDirection: 'column', gap: 0.5 }}>*/}
+          {/*              <Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 'bold' }}>*/}
+          {/*                {row.friendlyName}*/}
+          {/*              </Typography>*/}
+          {/*              <Typography variant="caption" sx={{ color: 'text.disabled', fontSize: '0.7rem', textTransform: 'uppercase' }}>*/}
+          {/*                {row.method === 'Equals' ? '=' : (row.method === 'Orlist' ? 'OR' : row.method)}*/}
+          {/*              </Typography>*/}
+          {/*              <Typography variant="body2" sx={{ fontWeight: 'medium', color: 'primary.main' }}>*/}
+          {/*                {valueDisplay}*/}
+          {/*              </Typography>*/}
+          {/*            </Paper>*/}
+          {/*          </Grid>*/}
+          {/*        );*/}
+          {/*      })}*/}
+          {/*    </Grid>*/}
+          {/*  </Box>*/}
+          {/*)}*/}
+
+          {orderedIndices.map((index) => {
+            const row = Tfilters[index];
+            const showAsLabel = isViewer && row?.isMainFilter && !row?.fixed;
+            if (showAsLabel) return null;
+
+            if (row?.isCustom) {
+              return (
+                <Grid container spacing={2} mt={1} key={fields[index]?.id ?? index}>
+                  <Grid size={{ xs: 11 }}>
                     <Controller
-                      name={`Tfilters.${index}`}
+                      name={`Tfilters.${index}.value`}
                       control={control}
                       render={({field}) => {
-                        const rowModel = Tfilters[index]
-                        console.log(selectTFilter)
+                        if (row.valueType === 'Bool') {
+                          return (
+                            <FormControl fullWidth>
+                              <InputLabel>{row.friendlyName || 'القيمة'}</InputLabel>
+                              <Select
+                                {...field}
+                                label={row.friendlyName || 'القيمة'}
+                                variant='outlined'
+                                size='small'
+                                value={field.value === true ? 'true' : (field.value === false ? 'false' : '')}
+                                onChange={e => {
+                                  field.onChange(e.target.value === '' ? null : (e.target.value === 'true'))
+                                }}
+                              >
+                                <MenuItem value=''>الكل</MenuItem>
+                                <MenuItem value='true'>نعم</MenuItem>
+                                <MenuItem value='false'>كلا</MenuItem>
+                              </Select>
+                            </FormControl>
+                          )
+                        } else if (row.valueType === 'Options') {
+                          return (
+                            <FormControl fullWidth>
+                              <InputLabel>{row.friendlyName || 'القيمة'}</InputLabel>
+                              <Select
+                                {...field}
+                                label={row.friendlyName || 'القيمة'}
+                                variant='outlined'
+                                size='small'
+                                value={field.value || ''}
+                                onChange={e => {
+                                  field.onChange(e.target.value)
+                                }}
+                              >
+                                {(row.options || []).map((opt, i) => (
+                                  <MenuItem key={i} value={opt}>{opt}</MenuItem>
+                                ))}
+                              </Select>
+                            </FormControl>
+                          )
+                        }
                         return (
-                          <Autocomplete
+                          <TextField
                             {...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 || ''}
-                              />
-                            )}
+                            fullWidth
+                            size="small"
+                            variant="outlined"
+                            label={row.friendlyName || "Value"}
+                            type={row.valueType === 'Number' ? 'number' : (row.valueType === 'DateTime' ? 'datetime-local' : 'text')}
+                            InputLabelProps={row.valueType === 'DateTime' ? {shrink: true} : {}}
                           />
                         )
                       }}
                     />
-                  </FormControl>
+                  </Grid>
+                  <Grid sx={{display: 'flex', alignItems: 'center'}} size={{ xs: 1 }}>
+                    {!Tfilters[index]?.fixed && (
+                      <IconButton size='small' sx={{color: 'red'}} onClick={() => remove(index)}>
+                        <TrashCanOutline fontSize='small'/>
+                      </IconButton>
+                    )}
+                  </Grid>
                 </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>
-                          )}
+            return (
+              <Grid container spacing={2} mt={1} key={fields[index]?.id ?? index}>
+                {!Tfilters[index]?.fixed && (
+                  <Grid size={{ xs: 3 }}>
+                    <FormControl fullWidth>
+                      <Controller
+                        name={`Tfilters.${index}`}
+                        control={control}
+                        render={({field}) => {
+                          const rowModel = Tfilters[index]
+                          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),
+                              ]}
+                              getOptionLabel={(option) =>
+                                typeof option === 'string'
+                                  ? option
+                                  : (option?.friendlyName || option?.path || '')
+                              }
+                              filterOptions={(options, {inputValue}) => {
+                                const q = inputValue.toLowerCase();
+                                return options.filter(
+                                  o =>
+                                    o?.friendlyName?.toLowerCase().includes(q) ||
+                                    o?.path?.toLowerCase().includes(q)
+                                );
+                              }}
+                              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]?.path === "Id") || Tfilters[index]?.path?.toLowerCase().endsWith(".id")) && (
-                            <MenuItem value="Orlist">{"كل من"}</MenuItem>
-                          )}
+                {!Tfilters[index]?.fixed && (
+                  <Grid size={{ xs: 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]?.path === "Id") || Tfilters[index]?.path?.toLowerCase().endsWith(".id")) && (
-                            <MenuItem value='NotOrlist'> {'لا يحتوي على كل من'} </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]?.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]?.path === "Id") || Tfilters[index]?.path?.toLowerCase().endsWith(".id")) && (
+                              <MenuItem value="Orlist">{"كل من"}</MenuItem>
+                            )}
 
-                          {(Tfilters[index]?.localProperty == 'Int' ||
-                            Tfilters[index]?.localProperty == 'Double' ||
-                            Tfilters[index]?.localProperty == 'DateTime') && (
-                            <MenuItem value='LessThanOrEqual'> {'<='} </MenuItem>
-                          )}
+                            {((Tfilters[index]?.path === "Id") || Tfilters[index]?.path?.toLowerCase().endsWith(".id")) && (
+                              <MenuItem value='NotOrlist'> {'لا يحتوي على كل من'} </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]?.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]?.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'/>
-                      )}
-                    />
+                            {(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 == '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})} />
-                            ))
+
+                {(
+                  (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 size={{ xs: Tfilters[index]?.fixed === true ? 12 : 5 }}>
+                    <Box sx={{display: 'flex', alignItems: 'center'}}>
+                      <Controller
+                        name={`Tfilters.${index}.value`}
+                        control={control}
+                        render={({field}) => (
+                          <TextField
+                            {...field}
+                            type={field.value && typeof field.value === 'string' && field.value.includes('{{auth.') ? 'text' : 'text'}
+                            size="small"
+                            variant="outlined"
+                            fullWidth
+                            label={Tfilters[index]?.friendlyName || 'value'}
+                            placeholder={Tfilters[index]?.friendlyName || 'value'}
+                          />
+                        )}
+                      />
+                      <IconButton
+                        size="small"
+                        sx={{ml: 1}}
+                        onClick={() => {
+                          let authPath = '';
+                          if (index === 0) authPath = 'user.id';
+                          else if (Tfilters[index]?.friendlyName?.toLowerCase().includes('shop')) authPath = 'user.contact.shopId';
+                          else if (Tfilters[index]?.friendlyName?.toLowerCase().includes('contact')) authPath = 'user.contact.id';
+
+                          if (authPath) {
+                            setValue(`Tfilters.${index}.value`, `{{auth.${authPath}}}`);
+                          } else {
+                            setValue(`Tfilters.${index}.value`, `{{auth.user.id}}`);
                           }
-                          renderInput={params => (
-                            <TextField {...params} variant='outlined' size='small' fullWidth
-                                       label={Tfilters[index]?.friendlyName || 'value'}
-                                       placeholder={Tfilters[index]?.friendlyName || 'value'}
-                            />
-                          )}
-                        />
-                      )}
-                    />
+                        }}
+                        title="Bind to Auth Context"
+                      >
+                        <CodeBraces fontSize="small"/>
+                      </IconButton>
+                    </Box>
                   </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 => (
+                {(Tfilters[index]?.localProperty === 'Int' || Tfilters[index]?.localProperty === 'Double') &&
+                  Tfilters[index]?.method === 'isBetween' && (
+                    <Grid size={{ xs: Tfilters[index]?.fixed === true ? 6 : 3 }}>
+                      <Box sx={{display: 'flex', alignItems: 'center'}}>
+                        <Controller
+                          name={`Tfilters.${index}.value.fromValue`}
+                          control={control}
+                          render={({field}) => (
                             <TextField
-                              {...params}
-                              label={Tfilters[index]?.friendlyName || 'البحث عن'}
-                              placeholder={Tfilters[index]?.friendlyName || 'البحث عن'}
+                              {...field}
+                              type={field.value && typeof field.value === 'string' && field.value.includes('{{auth.') ? 'text' : 'text'}
                               size='small'
                               variant='outlined'
-                              InputProps={{
-                                ...params.InputProps,
-                                onFocus: () => handleGetEnums(Tfilters[index]?.enumName)
-                              }}
+                              fullWidth
+                              label='From'
                             />
                           )}
                         />
-                      )}
-                    />
-                  </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)
+                        <IconButton
+                          size="small"
+                          sx={{ml: 1}}
+                          onClick={() => {
+                            let authPath = '';
+                            if (index === 0) authPath = 'user.id';
+                            else if (Tfilters[index]?.friendlyName?.toLowerCase().includes('shop')) authPath = 'user.contact.shopId';
+                            else if (Tfilters[index]?.friendlyName?.toLowerCase().includes('contact')) authPath = 'user.contact.id';
+
+                            if (authPath) {
+                              setValue(`Tfilters.${index}.value.fromValue`, `{{auth.${authPath}}}`);
+                            } else {
+                              setValue(`Tfilters.${index}.value.fromValue`, `{{auth.user.id}}`);
+                            }
                           }}
-                          renderTags={(tagValue, getTagProps) =>
-                            tagValue.map((option, index) => (
-                              <Chip key={option?.name || index} label={option?.name} {...getTagProps({index})} />
-                            ))
-                          }
-                          renderInput={params => (
+                          title="Bind to Auth Context"
+                        >
+                          <CodeBraces fontSize="small"/>
+                        </IconButton>
+                      </Box>
+                    </Grid>
+                  )}
+                {(Tfilters[index]?.localProperty === 'Int' || Tfilters[index]?.localProperty === 'Double') &&
+                  Tfilters[index]?.method === 'isBetween' && (
+                    <Grid size={{ xs: Tfilters[index]?.fixed === true ? 6 : 3 }}>
+                      <Box sx={{display: 'flex', alignItems: 'center'}}>
+                        <Controller
+                          name={`Tfilters.${index}.value.toValue`}
+                          control={control}
+                          render={({field}) => (
                             <TextField
-                              {...params}
-                              label={Tfilters[index]?.friendlyName || 'البحث عن'}
-                              placeholder={Tfilters[index]?.friendlyName || 'البحث عن'}
+                              {...field}
+                              type={field.value && typeof field.value === 'string' && field.value.includes('{{auth.') ? 'text' : 'text'}
                               size='small'
                               variant='outlined'
-                              InputProps={{
-                                ...params.InputProps,
-                                onFocus: () => handleGetEnums(Tfilters[index]?.enumName)
-                              }}
+                              fullWidth
+                              label='To'
                             />
                           )}
-                          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}));
+                        <IconButton
+                          size="small"
+                          sx={{ml: 1}}
+                          onClick={() => {
+                            let authPath = '';
+                            if (index === 0) authPath = 'user.id';
+                            else if (Tfilters[index]?.friendlyName?.toLowerCase().includes('shop')) authPath = 'user.contact.shopId';
+                            else if (Tfilters[index]?.friendlyName?.toLowerCase().includes('contact')) authPath = 'user.contact.id';
+
+                            if (authPath) {
+                              setValue(`Tfilters.${index}.value.toValue`, `{{auth.${authPath}}}`);
+                            } else {
+                              setValue(`Tfilters.${index}.value.toValue`, `{{auth.user.id}}`);
                             }
                           }}
-                          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>
-                                ),
+                          title="Bind to Auth Context"
+                        >
+                          <CodeBraces fontSize="small"/>
+                        </IconButton>
+                      </Box>
+                    </Grid>
+                  )}
+                {(Tfilters[index]?.localProperty === 'Int' ||
+                    Tfilters[index]?.localProperty === 'Double' ||
+                    Tfilters[index]?.localProperty === 'String') && (Tfilters[index]?.method === 'Orlist' || Tfilters[index]?.method === 'NotOrlist') &&
+                  Tfilters[index]?.isOrList === true && (
+                    <Grid size={{ xs: Tfilters[index]?.fixed === true ? 12 : 5 }}>
+                      <Controller
+                        name={`Tfilters.${index}.value`}
+                        control={control}
+                        render={({field}) => (
+                          <Autocomplete
+                            multiple
+                            freeSolo
+                            options={[]}
+                            value={Array.isArray(field.value) ? field.value : (field.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>
+                  )}
 
-                              }}
-                            />
-                          )}
-                        />
-                      )}
-                    />
-                  </FormControl>
-                </Grid>
-              )}
+                {(Tfilters[index]?.localProperty === 'Bool' || (Tfilters[index]?.localProperty === 'Class' && Tfilters[index]?.method === 'checkForNull')) && (
+                  <Grid size={{ xs: 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 => {
+                          if (e.target.value == '')
+                            setValue(`Tfilters.${index}.value`, null)
+                          setValue(`Tfilters.${index}.value`, e.target.value)
+                        }}
+                      >
+                        <MenuItem value={''}>الكل</MenuItem>
+                        <MenuItem value='Set'>نعم</MenuItem>
+                        <MenuItem value='NotSet'>كلا</MenuItem>
+                      </Select>
+                    </FormControl>
+                  </Grid>
+                )}
+                {Tfilters[index]?.localProperty === 'Enum' && Tfilters[index]?.isOrList === false && (
+                  <Grid size={{ xs: 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 size={{ xs: 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}
+                            value={Array.isArray(field.value) ? field.value : (field.value ? [field.value] : [])}
+                            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)
+                                }}
+                              />
+                            )}
+                          />
+                        )}
+                      />
+                    </FormControl>
+                  </Grid>
+                )}
+                {((Tfilters[index]?.localProperty === 'Class')
+                  && Tfilters[index]?.isOrList === false
+                  && Tfilters[index]?.method !== 'checkForNull') && (
+                  <Grid size={{ xs: 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]?.LocalTfilter,
+                                            index: index,
+                                            dto: Tfilters[index]?.dtoClassName,
+                                          }));
+                                          handleOpenDialogs('CustomFilter');
+                                        }}
+                                      >
+                                        <FilterPlus/>
+                                      </IconButton>
+                                    </InputAdornment>
+                                  ),
 
-              {((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);
+                                }}
+                              />
+                            )}
+                          />
+                        )}
+                      />
+                    </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={{ xs: 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) => {
+                              const optId = option?.id ?? option?.value;
+                              const valId = value?.id ?? value?.value;
+                              return optId === valId;
+                            }}
+                            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})} />
+                              ))
                             }
-                          }}
-                          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]?.LocalTfilter,
+                                            index,
+                                            dto: Tfilters[index]?.dtoClassName
+                                          });
+                                          handleOpenDialogs('CustomFilter');
+                                        }}
+                                      >
+                                        <FilterPlus/>
+                                      </IconButton>
+                                    </InputAdornment>
+                                  )
+                                }}
+                              />
+                            )}
+                          />
+                        )}
+                      />
+                    </FormControl>
+                  </Grid>
+                )}
+
+                {Tfilters[index]?.localProperty === 'DateTime' && Tfilters[index]?.method === 'isBetween' && (
+                  <>
+                    <Grid size={{ xs: 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;
                           }
-                          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>
-              )}
+                          return (
+                            <LocalizationProvider dateAdapter={AdapterDayjs}>
+                              <DatePicker
+                                {...field}
+                                value={val}
+                                onChange={(v) => field.onChange(v ? dayjs(v).startOf('day') : null)}
+                                slotProps={{
+                                  field: {clearable: true},
+                                  textField: {
+                                    fullWidth: true,
+                                    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 ? 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 size={{ xs: 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;
+                          }
 
-                  <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)}
+                                slotProps={{
+                                  field: {clearable: true},
 
-                        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>
-                </>
-              )}
+                                  textField: {
+                                    fullWidth: true,
+                                    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;
-                        }
+                {Tfilters[index]?.localProperty === 'DateTime' && Tfilters[index]?.method !== 'isBetween' && (
+                  <>
+                    <Grid size={{ xs: 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>
+                          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);
+                                  }
+                                }}
+                                slotProps={{
+                                  field: {clearable: true},
+                                  textField: {
+                                    fullWidth: true,
+                                    label: (Tfilters[index]?.friendlyName || 'التاريخ'),
+                                    placeholder: (Tfilters[index]?.friendlyName || 'التاريخ'),
+                                    size: 'small',
+                                    variant: 'outlined',
+                                  },
+                                }}
+                              />
+                            </LocalizationProvider>
+                          );
+                        }}
+                      />
+                    </Grid>
+                  </>
                 )}
+
+                {/*{Tfilters[index]?.fixed && (*/}
+                {/*  <Grid sx={{mt:'0px',pt:'0px'}} size={{ xs: 12 }}>*/}
+                {/*    <Typography variant='caption' color='text.secondary'>*/}
+                {/*      {(Tfilters[index]?.friendlyName || Tfilters[index]?.path || '') + (Tfilters[index]?.method ? ` • ${Tfilters[index]?.method}` : '')}*/}
+                {/*    </Typography>*/}
+                {/*  </Grid>*/}
+                {/*)}*/}
+
+                <Grid sx={{display: 'flex', alignItems: 'center', pb: 0}} size={{ xs: 1 }}>
+                  {!Tfilters[index]?.fixed && (
+                    <IconButton size='small' sx={{color: 'red'}} onClick={() => remove(index)}>
+                      <TrashCanOutline fontSize='small'/>
+                    </IconButton>
+                  )}
+                </Grid>
               </Grid>
-            </Grid>
-          ))}
+            )
+          })}
 
           <IconButton
             sx={{marginTop: '10px'}}
@@ -1095,6 +1423,41 @@ const CustomFilterDialog = props => {
             <FilterPlus sx={{fontSize: '25px !important'}}/>
           </IconButton>
 
+          {/* Custom Code Editor Section */}
+          <Box sx={{mt: 3, mb: 2}}>
+            <Button
+              startIcon={<CodeBraces/>}
+              variant="outlined"
+              onClick={() => setShowCodeEditor(!showCodeEditor)}
+              fullWidth
+            >
+              {showCodeEditor ? 'Hide' : 'Show'} Custom Filter Code
+            </Button>
+            <Collapse in={showCodeEditor}>
+              <Box sx={{mt: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1}} dir="ltr">
+                <Box sx={{px: 2, py: 1, bgcolor: 'background.default', borderBottom: '1px solid', borderColor: 'divider', display: 'flex', alignItems: 'center', gap: 0.5}}>
+                  <Typography variant="subtitle2">Custom Filter Function</Typography>
+                  <HelpPopover type='customFilter' />
+                </Box>
+                <MonacoEditor
+                  height="300px"
+                  defaultLanguage="javascript"
+                  theme="vs-dark"
+                  value={customCode}
+                  onChange={(value) => setCustomCode(value || '')}
+                  options={{
+                    minimap: {enabled: false},
+                    fontSize: 14,
+                    lineNumbers: 'on',
+                    roundedSelection: false,
+                    scrollBeyondLastLine: false,
+                    automaticLayout: true,
+                  }}
+                />
+              </Box>
+            </Collapse>
+          </Box>
+
           <DialogActions sx={{pb: {xs: 8}, justifyContent: 'center'}}>
             <Button type='submit' variant='contained' sx={{mr: 2}} disabled={IsSubmitting}>
               {IsSubmitting ? (