robobyte-front-builder 1.0.19 → 1.0.21

package/src/views/customFilter/FixedFilterDialog.js

@@ -0,0 +1,649 @@
+import {useEffect, useMemo, useState} from 'react'
+import {
+  Box,
+  Button,
+  Chip,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  IconButton,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  Select,
+  Switch,
+  TextField,
+  Typography,
+  Dialog,
+  InputAdornment,
+  Collapse,
+  Grid,
+  Divider,
+} from '@mui/material'
+import {ArrowLeft, Close, FilterPlus, CodeBraces, ChevronDown, ChevronUp, Plus} from 'mdi-material-ui'
+import {DeleteOutlined} from '@mui/icons-material'
+import Autocomplete from '@mui/material/Autocomplete'
+import dynamic from 'next/dynamic'
+import {Endpoints, Services} from 'src/services/Endpoints'
+import CustomFilterDialog from 'src/views/customFilter/CustomFilterDialog'
+import {FilterFormat} from 'services/helper/FilterFormat'
+
+const MonacoEditor = dynamic(() => import('@monaco-editor/react'), {ssr: false})
+
+// FixedFilterDialog
+// Purpose: Let the user build a fixed set of filter fields (schema-compatible with CustomFilterDialog Tfilters)
+// Output: onSave receives an array of Tfilters entries with shape:
+//   {
+//     path: string,
+//     friendlyName: string,
+//     localProperty: 'String'|'Int'|'Double'|'Bool'|'DateTime'|'Enum'|'Class'|'Guid'|'Collection',
+//     enumName?: string,
+//     method: string,          // e.g., 'Contains','Equals','GreaterThan','LessThan','isBetween','Orlist','NotOrlist','NotEquals','NotContains','checkForNull'
+//     value: any,              // left empty for user to fill later in CustomFilter
+//     isOrList?: boolean,
+//     checkForNull?: boolean
+//   }
+// Usage: Consumers can pass the resulting array as the `Filter` prop to CustomFilterDialog so it renders those rows pre-defined.
+
+const METHOD_OPTIONS = {
+  String: ['Contains', 'Equals', 'NotEquals', 'NotContains'],
+  Int: ['Equals', 'GreaterThan', 'LessThan', 'isBetween'],
+  Double: ['Equals', 'GreaterThan', 'LessThan', 'isBetween'],
+  Bool: ['Equals'],
+  DateTime: ['GreaterThanOrEqual', 'LessThanOrEqual', 'isBetween'],
+  Enum: ['Equals'],
+  Guid: ['Equals'],
+  Class: ['Equals', 'Orlist', 'NotOrlist', 'checkForNull']
+}
+
+const DEFAULT_METHOD = {
+  String: 'Contains',
+  Int: 'Equals',
+  Double: 'Equals',
+  Bool: 'Equals',
+  DateTime: 'GreaterThanOrEqual',
+  Enum: 'Equals',
+  Guid: 'Equals'
+}
+
+export default function FixedFilterDialog({
+  className,          // root model full name
+  value = [],         // initial Tfilters list
+  onChange,           // (newList) => void (optional, live updates)
+  onSave,             // (finalList) => void
+  onClose
+}) {
+  const [options, setOptions] = useState([])        // current list of selectable props at current level
+  const [subMap, setSubMap] = useState({})          // cache of dto -> options
+  const [pathCrumb, setPathCrumb] = useState(null)  // { path, friendly, dto }
+  const [selected, setSelected] = useState(value || [])
+  const [isLoading, setIsLoading] = useState(false)
+  const [searchText, setSearchText] = useState('')
+  // value editors support
+  const [enumMap, setEnumMap] = useState({})        // { enumName: [{name, value}, ...] }
+  const [classesMap, setClassesMap] = useState({})  // { idx: [{id, name}, ...] }
+  const [searchInputs, setSearchInputs] = useState({}) // { idx: string }
+  // subfilter dialog state for Class lookups
+  const [openSubFilter, setOpenSubFilter] = useState(false)
+  const [subIdx, setSubIdx] = useState(null)
+  const [subDto, setSubDto] = useState('')
+
+  const normalizedRoot = useMemo(() => (className || '').split('.').pop() || 'Root', [className])
+
+  useEffect(() => {
+    setSelected(value || [])
+  }, [value])
+
+  useEffect(() => {
+    // notify parent on change when needed
+    onChange && onChange(selected)
+  }, [selected])
+
+  useEffect(() => {
+    // load root options for className
+    let mounted = true
+    async function load() {
+      try {
+        setIsLoading(true)
+        const resp = await Services.PostService(Endpoints.FilterEndpoints.Post.GetFilterObject, false, {type: className}, {})
+        if (!mounted) return
+        const list = (resp?.filter || []).map((v, i) => ({...v, key: i}))
+        setOptions(list)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+    if (className) load()
+    return () => { mounted = false }
+  }, [className])
+
+  const isDuplicatePath = (path) => selected.some(s => (s?.path || '').toLowerCase() === (path || '').toLowerCase())
+
+  const addClassEntry = (opt) => {
+    if (!opt) return
+    const basePath = pathCrumb?.path ? `${pathCrumb.path}.${opt.path}` : opt.path
+    const newPath = `${basePath}.Id`
+    // allow duplicates of the same field by design
+    const friendlyName = pathCrumb?.friendly ? `${pathCrumb.friendly}>${opt.friendlyName}` : opt.friendlyName
+    const entry = {
+      path: newPath,
+      friendlyName,
+      localProperty: 'Class',
+      enumName: undefined,
+      method: DEFAULT_METHOD['Class'] || 'Equals',
+      value: null,
+      isOrList: false,
+      checkForNull: false,
+      fixed: true,
+      // store class type metadata for later use
+      dtoClassName: opt?.dtoClassName,
+      modelClassName: (opt?.modelClassName && opt.modelClassName.length > 0) ? opt.modelClassName : opt?.dtoClassName
+    }
+    setSelected(prev => [...prev, entry])
+  }
+
+  const addCustomFilter = () => {
+    const entry = {
+      isCustom: true,
+      path: 'Custom',
+      friendlyName: 'New Custom Filter',
+      customCode: '',
+      value: '',
+      valueType: 'Text', // Text, Number, DateTime
+      fixed: true,
+      collapsed: true
+    }
+    setSelected(prev => [...prev, entry])
+  }
+
+  const handlePick = async (opt) => {
+    if (!opt) return
+    // Class -> drill down
+    if (opt.propertyType === 'Class' || opt.propertyType === 'Collection') {
+      const newPath = pathCrumb?.path ? `${pathCrumb.path}.${opt.path}` : opt.path
+      const newFriendly = pathCrumb?.friendly ? `${pathCrumb.friendly}>${opt.friendlyName}` : opt.friendlyName
+      const dto = opt.dtoClassName
+
+      let list = subMap[dto]
+      if (!list) {
+        const resp = await Services.PostService(Endpoints.FilterEndpoints.Post.GetFilterObject, false, {type: dto}, {})
+        list = (resp?.filter || []).map((v, i) => ({...v, key: `${dto}-${i}`}))
+        setSubMap(prev => ({...prev, [dto]: list}))
+      }
+      setPathCrumb({path: newPath, friendly: newFriendly, dto})
+      setOptions(list)
+      return
+    }
+
+    // Leaf -> add with default method
+    const newPath = pathCrumb?.path ? `${pathCrumb.path}.${opt.path}` : opt.path
+    // allow duplicates of the same field by design
+
+    const localProperty = opt.propertyType
+    const friendlyName = pathCrumb?.friendly ? `${pathCrumb.friendly}>${opt.friendlyName}` : opt.friendlyName
+    const enumName = opt.enumName
+    const method = DEFAULT_METHOD[localProperty] || 'Equals'
+
+    const entry = {
+      path: newPath,
+      friendlyName,
+      localProperty,
+      enumName,
+      method,
+      value: null,
+      isOrList: false,
+      checkForNull: false,
+      fixed: true,
+      dtoClassName: opt?.dtoClassName,
+      modelClassName: (opt?.modelClassName && opt.modelClassName.length > 0) ? opt.modelClassName : opt?.dtoClassName
+    }
+    setSelected(prev => [...prev, entry])
+  }
+
+  const handleBack = () => {
+    if (!pathCrumb) return
+    const parts = (pathCrumb.path || '').split('.')
+    const friendlyParts = (pathCrumb.friendly || '').split('>')
+    parts.pop()
+    friendlyParts.pop()
+
+    if (parts.length === 0) {
+      setPathCrumb(null)
+      ;(async () => {
+        try {
+          setIsLoading(true)
+          const resp = await Services.PostService(Endpoints.FilterEndpoints.Post.GetFilterObject, false, {type: className}, {})
+          const list = (resp?.filter || []).map((v, i) => ({...v, key: i}))
+          setOptions(list)
+        } finally { setIsLoading(false) }
+      })()
+    } else {
+      ;(async () => {
+        try {
+          setIsLoading(true)
+          let dto = className
+          let list = []
+          let friendly = []
+          for (let i = 0; i < parts.length; i++) {
+            const resp = await Services.PostService(Endpoints.FilterEndpoints.Post.GetFilterObject, false, {type: dto}, {})
+            const current = (resp?.filter || [])
+            const seg = parts[i]
+            const node = current.find(o => o.path === seg)
+            if (!node) break
+            dto = node.dtoClassName
+            friendly.push(node.friendlyName)
+            if (node.propertyType !== 'Class' && node.propertyType !== 'Collection') break
+            list = current
+          }
+          const resp2 = await Services.PostService(Endpoints.FilterEndpoints.Post.GetFilterObject, false, {type: dto}, {})
+          const children = (resp2?.filter || []).map((v, i) => ({...v, key: `${dto}-${i}`}))
+          setOptions(children)
+          setPathCrumb({path: parts.join('.'), friendly: friendly.join('>'), dto})
+        } finally { setIsLoading(false) }
+      })()
+    }
+  }
+
+  const updateMethod = (idx, newMethod) => {
+    setSelected(prev => prev.map((it, i) => i === idx ? {
+      ...it,
+      method: newMethod,
+      // reset value according to method
+      value: (newMethod === 'Orlist' || newMethod === 'NotOrlist') ? [] : (newMethod === 'isBetween' ? {fromValue: null, toValue: null} : null)
+    } : it))
+  }
+
+  const updateFriendly = (idx, newFriendly) => {
+    setSelected(prev => prev.map((it, i) => i === idx ? {...it, friendlyName: newFriendly} : it))
+  }
+
+  const toggleFlag = (idx, flag) => {
+    setSelected(prev => prev.map((it, i) => i === idx ? {...it, [flag]: !it[flag]} : it))
+  }
+
+  const updateCustom = (idx, field, val) => {
+    setSelected(prev => prev.map((it, i) => i === idx ? {...it, [field]: val} : it))
+  }
+
+  const removeItem = (idx) => {
+    setSelected(prev => prev.filter((_, i) => i !== idx))
+  }
+
+  const handleSave = () => {
+    const finalList = (selected || []).map(it => {
+      const entry = {...it, fixed: true}
+
+      // Ensure types are correct for custom values
+      if (entry.isCustom) {
+        if (entry.valueType === 'Number') {
+          entry.value = entry.value === '' ? null : Number(entry.value)
+        } else if (entry.valueType === 'DateTime') {
+          entry.value = entry.value === '' ? null : entry.value
+        } else if (entry.valueType === 'Bool') {
+          // already handled in onChange
+        }
+      }
+      return entry
+    })
+    onSave && onSave(finalList)
+    onClose && onClose()
+  }
+
+  const filteredOptions = useMemo(() => {
+    const q = (searchText || '').trim().toLowerCase()
+    if (!q) return options
+    return options.filter(o =>
+      (o?.friendlyName || '').toLowerCase().includes(q) ||
+      (o?.path || '').toLowerCase().includes(q)
+    )
+  }, [options, searchText])
+
+  const getClassNameFor = (it) => {
+    const m = it?.modelClassName
+    if (m && typeof m === 'string' && m.length > 0) return m
+    return it?.dtoClassName
+  }
+
+  const fetchEnums = async (enumName) => {
+    if (!enumName) return
+    if (enumMap[enumName]) return
+    try {
+      const resp = await Services.GetService(Endpoints.FilterEndpoints.Get.GetEnumValues, false, {enumName})
+      const list = resp?.data || []
+      setEnumMap(prev => ({...prev, [enumName]: list}))
+    } catch (e) { console.error(e) }
+  }
+
+  const fetchClasses = async (idx, it, search) => {
+    const modelName = getClassNameFor(it)
+    if (!modelName) return
+    try {
+      const resp = await Services.PostService(
+        Endpoints.FilterEndpoints.Post.GetMinDynamics,
+        false,
+        { tFilter: FilterFormat(it?.Tfilter || []) },
+        { modelName, search, withPagination: true, page: 1, pageSize: 200 }
+      )
+      const list = (resp?.data || []).map((v,i)=> ({...v, key: v.id || i}))
+      setClassesMap(prev => ({...prev, [idx]: list}))
+    } catch (e) { console.error(e) }
+  }
+
+  // handler for nested subfilter dialog updates
+  const handleSubFilterChange = (key, val, index) => {
+    if (key === 'Tfilter' && typeof subIdx === 'number') {
+      setSelected(prev => prev.map((row,i)=> i===subIdx ? {...row, Tfilter: val} : row))
+    }
+  }
+
+  return (
+    <>
+      <DialogTitle sx={{padding: 0, marginBottom: 2}}>
+        <Box
+          sx={{display: 'flex', alignItems: 'center', justifyContent: 'space-between', backgroundColor: 'background.default', p: 3}}
+        >
+          <Typography variant='h6'>Build Fixed Filter</Typography>
+          <IconButton onClick={onClose}>
+            <Close/>
+          </IconButton>
+        </Box>
+      </DialogTitle>
+      <DialogContent dividers>
+        <Box sx={{display:'flex', alignItems:'center', gap:1, mb:2}}>
+          <Typography variant='body2' color='text.secondary'>Model:</Typography>
+          <Chip size='small' label={normalizedRoot}/>
+          {pathCrumb?.friendly && <>
+            <Typography variant='body2' color='text.secondary'>/</Typography>
+            <Chip size='small' color='info' label={pathCrumb.friendly}/>
+            <IconButton size='small' onClick={handleBack}>
+              <ArrowLeft fontSize='small'/>
+            </IconButton>
+          </>}
+        </Box>
+
+        <Box sx={{display: 'flex', gap: 1, mb: 2}}>
+          <TextField
+            size='small'
+            placeholder='Search fields...'
+            value={searchText}
+            onChange={(e) => setSearchText(e.target.value)}
+            fullWidth
+          />
+          <Button
+            variant='outlined'
+            size='small'
+            startIcon={<Plus />}
+            onClick={addCustomFilter}
+            sx={{whiteSpace: 'nowrap'}}
+          >
+            Add Custom Filter
+          </Button>
+        </Box>
+
+        <Autocomplete
+          loading={isLoading}
+          options={filteredOptions}
+          getOptionLabel={(opt)=> opt?.friendlyName || opt?.path || ''}
+          isOptionEqualToValue={(a,b)=> (a?.path||'') === (b?.path||'')}
+          onChange={(e, val)=> handlePick(val)}
+          renderOption={(props, option)=> (
+            <ListItem {...props} secondaryAction={
+              (option.propertyType === 'Class' || option.propertyType === 'Collection') ? (
+                <Box sx={{display:'flex', alignItems:'center', gap:1}}>
+                  <IconButton
+                    size='small'
+                    onMouseDown={(e)=> e.preventDefault()}
+                    onClick={(e)=> { e.stopPropagation(); addClassEntry(option) }}
+                    title='Add as class filter'
+                  >
+                    <FilterPlus fontSize='small'/>
+                  </IconButton>
+                  <IconButton
+                    size='small'
+                    onMouseDown={(e)=> e.preventDefault()}
+                    onClick={(e)=> { e.stopPropagation(); handlePick(option) }}
+                    title='Navigate into'
+                  >
+                    <ArrowLeft fontSize='small'/>
+                  </IconButton>
+                </Box>
+              ) : null
+            }>
+              <ListItemIcon>
+                <FilterPlus fontSize='small'/>
+              </ListItemIcon>
+              <ListItemText primary={option.friendlyName} secondary={`${option.path} • ${option.propertyType}${option.enumName?(' • '+option.enumName):''}`}/>
+            </ListItem>
+          )}
+          renderInput={(params)=> (
+            <TextField {...params} label='Add field' size='small' placeholder='Pick field to add' />
+          )}
+        />
+
+        <Box sx={{mt:3}}>
+          <Typography variant='subtitle2' sx={{mb:1}}>Selected fields</Typography>
+          {selected.length === 0 && (
+            <Typography variant='body2' color='text.secondary'>No fields selected yet.</Typography>
+          )}
+          {selected.map((it, idx) => {
+            if (it.isCustom) {
+              return (
+                <Box key={`custom-${idx}`} sx={{mb: 2, p: 2, border: '1px solid', borderColor: 'divider', borderRadius: 1}}>
+                  <Box sx={{display: 'grid', gridTemplateColumns: '1fr 120px 1fr auto 40px', gap: 1, alignItems: 'center', mb: 1}}>
+                    <TextField
+                      size='small'
+                      label='Friendly name'
+                      value={it.friendlyName || ''}
+                      onChange={(e) => updateCustom(idx, 'friendlyName', e.target.value)}
+                    />
+                    <Select
+                      size='small'
+                      value={it.valueType || 'Text'}
+                      onChange={(e) => updateCustom(idx, 'valueType', e.target.value)}
+                    >
+                      <MenuItem value='Text'>Text</MenuItem>
+                      <MenuItem value='Number'>Number</MenuItem>
+                      <MenuItem value='DateTime'>DateTime</MenuItem>
+                      <MenuItem value='Bool'>Bool</MenuItem>
+                      <MenuItem value='Options'>Options</MenuItem>
+                    </Select>
+                    {it.valueType === 'Bool' ? (
+                      <Select
+                        size='small'
+                        value={it.value === true ? 'true' : (it.value === false ? 'false' : '')}
+                        onChange={(e) => updateCustom(idx, 'value', e.target.value === '' ? null : (e.target.value === 'true'))}
+                        fullWidth
+                      >
+                        <MenuItem value=''>All</MenuItem>
+                        <MenuItem value='true'>Yes</MenuItem>
+                        <MenuItem value='false'>No</MenuItem>
+                      </Select>
+                    ) : it.valueType === 'Options' ? (
+                      <Autocomplete
+                        size='small'
+                        options={it.options || []}
+                        value={it.value || null}
+                        onChange={(e, val) => updateCustom(idx, 'value', val)}
+                        onBlur={(e) => {
+                          const val = e.target.value.trim();
+                          if (val && !(it.options || []).includes(val)) {
+                            const newList = [...(it.options || []), val];
+                            updateCustom(idx, 'options', newList);
+                            updateCustom(idx, 'value', val);
+                          }
+                        }}
+                        freeSolo
+                        renderInput={(params) => <TextField {...params} label="Default Value" />}
+                      />
+                    ) : (
+                      <TextField
+                        size='small'
+                        label='Default Value'
+                        type={it.valueType === 'Number' ? 'number' : (it.valueType === 'DateTime' ? 'datetime-local' : 'text')}
+                        value={it.value || ''}
+                        onChange={(e) => updateCustom(idx, 'value', e.target.value)}
+                        fullWidth
+                        InputLabelProps={it.valueType === 'DateTime' ? { shrink: true } : {}}
+                      />
+                    )}
+                    <IconButton
+                      size='small'
+                      onClick={() => updateCustom(idx, 'collapsed', !it.collapsed)}
+                      title={it.collapsed ? 'Show Editor' : 'Hide Editor'}
+                    >
+                      <CodeBraces color={it.collapsed ? 'inherit' : 'primary'} />
+                    </IconButton>
+                    <IconButton color='error' onClick={() => removeItem(idx)}>
+                      <DeleteOutlined />
+                    </IconButton>
+                  </Box>
+                  <Collapse in={!it.collapsed}>
+                    <Box sx={{mt: 1, border: '1px solid', borderColor: 'divider'}} dir="ltr">
+                      {it.valueType === 'Options' && (
+                        <Box sx={{p: 2, borderBottom: '1px solid', borderColor: 'divider', bgcolor: 'background.paper'}}>
+                          <Typography variant='subtitle2' gutterBottom>Manage Options</Typography>
+                          <Box sx={{display:'flex', flexWrap:'wrap', gap: 1, mb: 2}}>
+                            {(it.options || []).map((opt, oIdx) => (
+                              <Chip
+                                key={oIdx}
+                                label={opt}
+                                size='small'
+                                onDelete={() => {
+                                  const newList = (it.options || []).filter((_, i) => i !== oIdx)
+                                  updateCustom(idx, 'options', newList)
+                                  if (it.value === opt) updateCustom(idx, 'value', null)
+                                }}
+                              />
+                            ))}
+                          </Box>
+                          <Box sx={{display:'flex', gap: 1, alignItems: 'center'}}>
+                            <TextField
+                              size='small'
+                              placeholder='Add option...'
+                              onKeyDown={(e) => {
+                                if (e.key === 'Enter' && e.target.value) {
+                                  e.preventDefault()
+                                  const val = e.target.value.trim()
+                                  if (val && !(it.options || []).includes(val)) {
+                                    updateCustom(idx, 'options', [...(it.options || []), val])
+                                  }
+                                  e.target.value = ''
+                                }
+                              }}
+                              inputProps={{
+                                onBlur: (e) => {
+                                  const val = e.target.value.trim()
+                                  if (val && !(it.options || []).includes(val)) {
+                                    updateCustom(idx, 'options', [...(it.options || []), val])
+                                  }
+                                  e.target.value = ''
+                                }
+                              }}
+                            />
+                            <Button
+                              variant="outlined"
+                              size="small"
+                              onClick={(e) => {
+                                const input = e.currentTarget.previousElementSibling.querySelector('input')
+                                const val = input.value.trim()
+                                if (val && !(it.options || []).includes(val)) {
+                                  updateCustom(idx, 'options', [...(it.options || []), val])
+                                }
+                                input.value = ''
+                              }}
+                            >
+                              Add
+                            </Button>
+                          </Box>
+                        </Box>
+                      )}
+                      <Box sx={{p: 1, bgcolor: 'background.default', borderBottom: '1px solid', borderColor: 'divider'}}>
+                        <Typography variant="caption" color="text.secondary">
+                          Return an object (e.g. <code>{`{method:'Equals', path:'Branch.Id'}`}</code>) and the <code>value</code> will be added automatically.
+                        </Typography>
+                      </Box>
+                      <MonacoEditor
+                        height="200px"
+                        defaultLanguage="javascript"
+                        theme="vs-dark"
+                        value={it.customCode || ''}
+                        onChange={(val) => updateCustom(idx, 'customCode', val || '')}
+                        options={{
+                          minimap: {enabled: false},
+                          fontSize: 12,
+                          lineNumbers: 'on',
+                          automaticLayout: true,
+                        }}
+                      />
+                    </Box>
+                  </Collapse>
+                </Box>
+              )
+            }
+            const methods = METHOD_OPTIONS[it.localProperty] || ['Equals']
+            return (
+              <Box key={`${it.path}-${idx}`} sx={{display:'grid', gridTemplateColumns:'1fr 160px 110px 120px auto 40px', gap:1, alignItems:'center', mb:1}}>
+                <TextField
+                  size='small'
+                  label='Friendly name'
+                  value={it.friendlyName || ''}
+                  onChange={(e)=> updateFriendly(idx, e.target.value)}
+                />
+                <Select size='small' value={it.method} onChange={(e)=> updateMethod(idx, e.target.value)}>
+                  {methods.map(m => (<MenuItem key={m} value={m}>{m}</MenuItem>))}
+                </Select>
+                <Box sx={{display:'flex', alignItems:'center', gap:1}}>
+                  <Typography variant='caption'>Or list</Typography>
+                  <Switch size='small' checked={!!it.isOrList} onChange={()=> toggleFlag(idx, 'isOrList')}/>
+                </Box>
+                <Box sx={{display:'flex', alignItems:'center', gap:1}}>
+                  <Typography variant='caption'>Check null</Typography>
+                  <Switch size='small' checked={!!it.checkForNull} onChange={()=> toggleFlag(idx, 'checkForNull')}/>
+                </Box>
+                {/* New: Build value subfilter for Class entries */}
+                <Box sx={{display:'flex', alignItems:'center', justifyContent:'flex-start'}}>
+                  {it.localProperty === 'Class' && (
+                    <IconButton size='small' title='Add filter for class values' onClick={()=> { setSubIdx(idx); setSubDto(it.dtoClassName); setOpenSubFilter(true); }}>
+                      <FilterPlus fontSize='small'/>
+                    </IconButton>
+                  )}
+                </Box>
+                <IconButton color='error' onClick={()=> removeItem(idx)}>
+                  <DeleteOutlined/>
+                </IconButton>
+                <Box sx={{gridColumn:'1 / span 6'}}>
+                  <Typography variant='caption' color='text.secondary'>{normalizedRoot}.{it.path} • {it.localProperty}{it.enumName?(' • '+it.enumName):''}</Typography>
+                </Box>
+              </Box>
+            )
+          })}
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button variant='text' color='secondary' onClick={onClose}>Close</Button>
+        <Button variant='contained' onClick={handleSave}>Save</Button>
+      </DialogActions>
+
+      {/* Nested subfilter builder for Class entries */}
+      <Dialog
+        fullWidth
+        open={openSubFilter}
+        maxWidth='lg'
+        scroll='body'
+        onClose={() => setOpenSubFilter(false)}
+      >
+        <CustomFilterDialog
+          handleFilterChange={(key, val) => handleSubFilterChange(key, val, subIdx)}
+          className={subDto}
+          handleToggleDialogs={() => setOpenSubFilter(false)}
+          Filter={selected?.[subIdx]?.Tfilter || []}
+          filterIndex={0}
+          LocalFilter={true}
+          selectTFilter={[]}
+        />
+      </Dialog>
+
+    </>
+  )
+}