@solidstarters/solid-core-ui 1.1.70 → 1.1.72

package/dist/components/core/chatter/SolidMessageComposer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidMessageComposer.js","sourceRoot":"","sources":["../../../../src/components/core/chatter/SolidMessageComposer.tsx"],"names":[],"mappings":"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"}

package/dist/components/core/chatter/SolidMessageComposer.tsx

@@ -0,0 +1,145 @@
+"use client"
+import { InputText } from 'primereact/inputtext'
+import styles from './chatter.module.css'
+import { Button } from 'primereact/button'
+import { useCreateChatterMessageMutation } from '@/redux/api/solidChatterMessageApi'
+import { useEffect, useState, useRef } from 'react'
+import { useGetSolidViewLayoutQuery } from '@/redux/api/solidViewApi'
+import { useSelector } from 'react-redux'
+import { FileUpload } from 'primereact/fileupload';
+
+export const SolidMessageComposer = ({ type, solidFormViewMetaData, refetch, id }: { type?: string, solidFormViewMetaData?: any, refetch?: any, id?: any }) => {
+    const [message, setMessage] = useState('');
+    const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+    const { user } = useSelector((state: any) => state.auth);
+    const fileInputRef = useRef<HTMLInputElement>(null);
+
+    // const { data: viewLayoutData } = useGetSolidViewLayoutQuery(null);
+    const [createChatterMessage, { isLoading, isSuccess, isError }] = useCreateChatterMessageMutation();
+
+    const tempEmails = [
+        "johndoe@gmal.com",
+        "tempmail@gmail.com",
+        "example@mail.com"
+    ]
+
+    const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (event.target.files) {
+            const files = Array.from(event.target.files);
+            setSelectedFiles(prev => [...prev, ...files]);
+        }
+    };
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!message.trim() && selectedFiles.length === 0) return;
+
+        try {
+            const formData = new FormData();
+            formData.append('messageType', "custom");
+            formData.append('messageSubType', "audit_insert");
+            formData.append('messageBody', message);
+            formData.append('coModelEntityId', id);
+            formData.append('coModelName', solidFormViewMetaData?.data?.solidView?.model?.singularName);
+            formData.append('userId', user?.user?.id);
+
+            selectedFiles.forEach((file, index) => {
+                formData.append(`messageAttachments`, file);
+            });
+
+            await createChatterMessage(formData).unwrap();
+            setMessage('');
+            setSelectedFiles([]);
+        } catch (error) {
+            console.error('Error creating message:', error);
+        }
+    };
+
+    useEffect(() => {
+        if (isSuccess) {
+            refetch()
+        }
+    }, [isSuccess]);
+
+    return (
+        <form className={styles.chatterMessageComposer} onSubmit={handleSubmit}>
+            {/* {type === 'email' &&
+                <div className='flex align-items-center gap-1 text-sm mb-2'>
+                    <span className='font-bold'>To:</span>
+                    <div className={styles.chatterEmails}>
+                        {tempEmails.map((mail, index) => (
+                            <span key={index}>
+                                {mail}
+                            </span>
+                        ))}
+                    </div>
+                    <div className={`pi pi-sort-down-fill text-primary ${styles.emailTooltipIcon}`} style={{ fontSize: 8 }}>
+                        <div className={styles.emailsTooltip}>
+                            {tempEmails.map((mail, index) => (
+                                <span key={index} className='text-color text-sm'>
+                                    {mail}
+                                </span>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            } */}
+            <div className='flex align-items-center gap-2'>
+                <InputText
+                    type="text"
+                    value={message}
+                    onChange={(e) => setMessage(e.target.value)}
+                    placeholder={type === 'email' ? 'Send a message to followers' : 'Log an internal note...'}
+                    className={`p-inputtext-sm w-full p-2 ${styles.chatterMessageInput}`}
+                />
+                <input
+                    type="file"
+                    ref={fileInputRef}
+                    onChange={handleFileSelect}
+                    multiple
+                    style={{ display: 'none' }}
+                />
+                <Button
+                    icon="pi pi-plus"
+                    className="p-button-rounded p-button-text"
+                    onClick={() => fileInputRef.current?.click()}
+                    tooltip="Attach files"
+                    tooltipOptions={{ position: 'top' }}
+                />
+            </div>
+            {selectedFiles.length > 0 && (
+                <div className='flex flex-wrap gap-2 mt-2'>
+                    {selectedFiles.map((file, index) => (
+                        <div key={index} className='flex align-items-center gap-2 bg-gray-100 p-2 rounded'>
+                            <span className='text-sm'>{file.name}</span>
+                            <Button
+                                icon="pi pi-times"
+                                className="p-button-rounded p-button-text p-button-sm"
+                                onClick={() => setSelectedFiles(prev => prev.filter((_, i) => i !== index))}
+                            />
+                        </div>
+                    ))}
+                </div>
+            )}
+            <div className='mt-3 flex align-items-center gap-2'>
+                <Button
+                    label={type === 'email' ? 'Send' : 'Log'}
+                    size='small'
+                    type='submit'
+                    loading={isLoading}
+                />
+                <Button
+                    label='Cancel'
+                    size='small'
+                    type='button'
+                    text
+                    severity='contrast'
+                    onClick={() => {
+                        setMessage('');
+                        setSelectedFiles([]);
+                    }}
+                />
+            </div>
+        </form>
+    )
+}

package/dist/components/core/chatter/chatter.module.css

@@ -0,0 +1,70 @@
+.chatterTitle {
+    padding: 15px;
+    border-bottom: 1px solid #D8E2EA;
+}
+
+.chatterMessageComposer .chatterMessageInput {
+    background-color: #FEFCFF;
+    border: 1px solid #D8E2EA;
+}
+
+.chatterMessageComposer .chatterMessageInput::placeholder {
+    color: rgba(51, 51, 51, 0.20);
+}
+
+.chatterEmails {
+    max-width: 80%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.emailTooltipIcon {
+    position: relative;
+}
+
+.emailsTooltip {
+    visibility: hidden;
+    position: absolute;
+    right: 0px !important;
+    top: 1;
+    background-color: #fff;
+    border: 1px solid #D8E2EA;
+    padding: 8px;
+    border-radius: 8px !important;
+    min-width: 200;
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.emailTooltipIcon:hover .emailsTooltip {
+    visibility: visible !important;
+}
+
+.chatterDatetimeDivider {
+    border-top: 1px dashed #00000026;
+    position: relative;
+    margin: 30px 0;
+}
+
+.chatterDividerContent {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 6.25rem;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    background: #FAFAFA;
+    padding: 0.25rem 0.5rem;
+    text-wrap: nowrap;
+    font-size: 0.625rem;
+    font-weight: 600;
+    color: var(--secondary-dark-color);
+}
+
+.solidMessageWrapper {
+    border: 1px solid #D8E2EA;
+    padding: 10px;
+    border-radius: 0.25rem;
+    width: 100%;
+}

package/dist/components/core/common/FilterComponent.tsx

@@ -0,0 +1,434 @@
+// @ts-nocheck
+"use client";
+
+import { Calendar } from 'primereact/calendar';
+import { Dropdown } from 'primereact/dropdown';
+import { InputNumber } from 'primereact/inputnumber';
+import { InputText } from 'primereact/inputtext';
+import { Tooltip } from 'primereact/tooltip';
+import React, { useEffect, useRef, useState } from 'react';
+import { SolidFilterFields } from '../filter/SolidFilterFields';
+import { Button } from 'primereact/button';
+import { Fieldset } from 'primereact/fieldset';
+import { OverlayPanel } from 'primereact/overlaypanel';
+export enum FilterRuleType {
+  RULE = 'rule',
+  RULE_GROUP = 'rule_group'
+}
+
+export enum FilterOperator {
+  AND = 'and',
+  OR = 'or'
+}
+
+export enum FilterMatchMode {
+  STARTS_WITH = 'startsWith',
+  CONTAINS = 'contains',
+  EQUALS = 'equals',
+  GREATER_THAN = 'gt',
+  LESS_THAN = 'lt',
+}
+
+export interface FilterRule {
+  id: number;
+  type: FilterRuleType;
+  matchOperator?: FilterOperator;
+  fieldName?: string | null;
+  matchMode?: FilterMatchMode | null;
+  value?: any;
+  parentRule: number | null;
+  children?: FilterRule[];
+}
+
+export interface Field {
+  name: string;
+  type: 'string' | 'number' | 'date';
+}
+
+// const fields: Field[] = [
+//   { name: 'name', type: 'string' },
+//   { name: 'dob', type: 'date' },
+//   { name: 'lastName', type: 'string' },
+//   { name: 'amount', type: 'number' }
+// ];
+
+const operatorOptions = {
+  // string: [FilterMatchMode.CONTAINS, FilterMatchMode.EQUALS],
+  // date: [FilterMatchMode.EQUALS, FilterMatchMode.GREATER_THAN, FilterMatchMode.LESS_THAN],
+  // number: [FilterMatchMode.GREATER_THAN, FilterMatchMode.LESS_THAN],
+  id: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO, FilterMatchMode.IN, FilterMatchMode.NOT_IN, FilterMatchMode.BETWEEN],
+  int: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO, FilterMatchMode.IN, FilterMatchMode.NOT_IN, FilterMatchMode.BETWEEN],
+  bigint: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO, FilterMatchMode.IN, FilterMatchMode.NOT_IN, FilterMatchMode.BETWEEN],
+  float: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO, FilterMatchMode.IN, FilterMatchMode.NOT_IN, FilterMatchMode.BETWEEN],
+  decimal: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO, FilterMatchMode.IN, FilterMatchMode.NOT_IN, FilterMatchMode.BETWEEN],
+  shortText: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+  longText: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+  richText: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+  boolean: [FilterMatchMode.EQUALS],
+  date: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO, FilterMatchMode.IN, FilterMatchMode.NOT_IN, FilterMatchMode.BETWEEN,],
+  datetime: [FilterMatchMode.EQUALS],
+  time: [FilterMatchMode.EQUALS],
+  relation: [FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+  mediaSingle: [],
+  mediaMultiple: [],
+  selectionStatic: [FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+  selectionDynamic: [FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+  computed: [],
+  externalId: [FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+  uuid: [FilterMatchMode.IN, FilterMatchMode.NOT_IN],
+
+};
+
+const getRandomInt = (min, max) => {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+// Component to render a single filter rule
+const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAddGroup, onDelete, level }) => {
+  // const applicableOperators = rule.fieldName ? operatorOptions[fields.find(f => f.name === rule.fieldName)?.value.type].map(e => { return { name: e } }) : [];
+  // const applicableInputField = rule.fieldName ? fields.find(f => f.name === rule.fieldName)?.type : "";
+  const [fieldName, setFieldName] = useState({ name: rule.fieldName });
+  const [matchMode, setMatchMode] = useState({ name: rule.matchMode });
+
+  return (
+    // <div style={{ marginLeft: (level - 1) * 10 + 'px' }} className="filter-rule">
+
+    <div className='mt-2'>
+      <div className='flex align-items-center gap-3'>
+        <div className='formgrid grid w-full'>
+          <div className='col-4'>
+            <Dropdown
+              key={rule.id}
+              value={fieldName.name}
+              onChange={e => {
+                setFieldName({ name: e.value })
+                onChange(rule.id, 'fieldName', e.value)
+              }}
+              options={fields}
+              optionLabel='name'
+              optionValue='value'
+              placeholder="Select Field"
+              className='w-full p-inputtext-sm'
+            />
+          </div>
+          <div className='col-8'>
+            <div className='formgrid grid w-full'>
+              {rule.fieldName ?
+                <div className='col-12'>
+                  <SolidFilterFields viewData={viewData} fieldMetadata={viewData.data.solidFieldsMetadata[rule.fieldName]} onChange={onChange} index={rule.id} rule={rule}></SolidFilterFields>
+                </div>
+                : <>
+                  <div className='col-6'>
+                    <InputText
+                      disabled
+                      value={rule.value || ''}
+                      placeholder="operator"
+                      className='w-full p-inputtext-sm'
+                    />
+                  </div>
+                  <div className='col-6'>
+                    <InputText
+                      disabled
+                      value={rule.value || ''}
+                      placeholder="value"
+                      className='w-full p-inputtext-sm'
+                    />
+                  </div>
+                </>
+              }
+            </div>
+          </div>
+        </div>
+        <div className='formgrid grid'>
+          <div className='col-4 px-0 flex align-items-center'>
+            <Button text severity='secondary' icon="pi pi-plus" size='small' onClick={() => onAddRule(rule.parentRule)} className='solid-filter-action-btn' />
+          </div>
+          <div className='col-4 px-0 flex align-items-center'>
+            <Button text severity='secondary' icon={"pi pi-folder-plus"} size='small' onClick={() => onAddGroup(rule.id)} className='solid-filter-action-btn' />
+          </div>
+          <div className='col-4 px-0 flex align-items-center'>
+            <Button text severity='secondary' icon="pi pi-trash" size='small' onClick={() => onDelete(rule.id)} className='solid-filter-action-btn' />
+          </div>
+        </div>
+      </div>
+
+      {rule.children && rule.children.map(nestedRule => (
+        <div className='py-3 nested-custom-filter' key={nestedRule.id}>
+          {nestedRule.type === FilterRuleType.RULE
+            ? <FilterRuleComponent key={nestedRule.id} viewData={viewData} fields={fields} rule={nestedRule} onChange={onChange} onAddRule={onAddRule} onAddGroup={onAddGroup} onDelete={onDelete} level={level + 1} />
+            : <FilterGroupComponent key={nestedRule.id} viewData={viewData} fields={fields} group={nestedRule} onChange={onChange} onAddRule={onAddRule} onAddGroup={onAddGroup} onDelete={onDelete} level={level + 1} />
+          }
+        </div>
+      ))}
+      {/* <Button text label='Add Condition' icon="pi pi-plus" size='small' onClick={() => onAddRule(rule.parentRule)} /> */}
+    </div>
+  );
+};
+
+// Component to render a group of filter rules
+const FilterGroupComponent = ({ viewData, fields, group, onChange, onAddRule, onAddGroup, onDelete, level }) => {
+  const op = useRef(null);
+  const legendTemplate = (
+    <>
+      <Button
+        size='small'
+        label={group.matchOperator}
+        className='small-button'
+        icon="pi pi-angle-down"
+        iconPos='right'
+        onClick={(e) => op.current.toggle(e)}
+        style={{
+          textTransform: "uppercase"
+        }}
+      />
+      <OverlayPanel ref={op} className='m-0'>
+        <div className='flex flex-column'>
+          <Button
+            size="small"
+            label="AND"
+            text
+            className='small-button'
+            onClick={(e) => { onChange(group.id, 'matchOperator', FilterOperator.AND); op.current.hide(e) }}
+          />
+          <Button
+            size="small"
+            label="OR"
+            text
+            className='small-button'
+            onClick={(e) => { onChange(group.id, 'matchOperator', FilterOperator.OR); op.current.hide(e) }}
+          />
+        </div>
+      </OverlayPanel>
+    </>
+    // <select className='filter-select'
+    //   value={group.matchOperator}
+    //   onChange={e => onChange(group.id, 'matchOperator', e.target.value)}
+    // >
+    //   <option value={FilterOperator.AND}>AND</option>
+    //   <option value={FilterOperator.OR}>OR</option>
+    // </select>
+  )
+  return (
+    <Fieldset legend={legendTemplate} className='primary-filter-fieldset'>
+      {group.children && group.children.map(rule => (
+        rule.type === FilterRuleType.RULE
+          ? <FilterRuleComponent key={rule.id} viewData={viewData} fields={fields} rule={rule} onChange={onChange} onAddRule={onAddRule} onAddGroup={onAddGroup} onDelete={onDelete} level={level + 1} />
+          : <FilterGroupComponent key={rule.id} viewData={viewData} fields={fields} group={rule} onChange={onChange} onAddRule={onAddRule} onAddGroup={onAddGroup} onDelete={onDelete} level={level + 1} />
+      ))}
+      {/* {level > 0 &&
+        <div className='mt-2'>
+          <Button size="small" severity='danger' icon="pi pi-trash " onClick={() => onDelete(group.id)} />
+        </div>
+      } */}
+
+      {/* Add Condition Button to add parent rule */}
+      {level === 0 &&
+        <Button text label='Add Condition' icon="pi pi-plus" size='small' onClick={() => onAddRule(group.id)} className='px-0 mt-2' />
+      }
+    </Fieldset>
+  );
+};
+
+// Main Filter component
+const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, transformFilterRules, closeDialog }) => {
+  // const initialState: FilterRule[] = [
+  //   {
+  //     id: 1,
+  //     type: FilterRuleType.RULE_GROUP,
+  //     matchOperator: FilterOperator.OR,
+  //     parentRule: null,
+  //     children: [
+  //       {
+  //         id: Date.now() + getRandomInt(1, 500),
+  //         type: FilterRuleType.RULE,
+  //         fieldName: null,
+  //         matchMode: null,
+  //         value: null,
+  //         parentRule: 1,
+  //         children: []
+  //       }
+  //     ]
+  //   }
+  // ];
+
+  // const [filterRules, setFilterRules] = useState<FilterRule[]>(initialState);
+  const [printedState, setPrintedState] = useState<string>('');
+
+  const addChild = (rules, parentId, newChild) => {
+    return rules.map(rule => {
+      if (rule.id === parentId) {
+        return {
+          ...rule,
+          children: [...(rule.children || []), newChild]
+        };
+      } else if (rule.children) {
+        return {
+          ...rule,
+          children: addChild(rule.children, parentId, newChild)
+        };
+      }
+      return rule;
+    });
+  };
+
+  const handleChange = (id, key, value) => {
+    const updateRuleRecursively = (rules) => {
+      return rules.map(rule => {
+        if (rule.id === id) {
+          return { ...rule, [key]: value };
+        } else if (rule.children) {
+          return {
+            ...rule,
+            children: updateRuleRecursively(rule.children)
+          };
+        }
+        return rule;
+      });
+    };
+    setFilterRules(prev => updateRuleRecursively(prev));
+  };
+
+  const handleAddRule = (parentGroupId) => {
+    const newRule: FilterRule = {
+      id: Date.now(),
+      type: FilterRuleType.RULE,
+      fieldName: null,
+      matchMode: null,
+      value: null,
+      parentRule: parentGroupId,
+      children: []
+    };
+    setFilterRules(prev => addChild(prev, parentGroupId, newRule));
+  };
+
+  const handleAddGroup = (parentRuleId) => {
+    const newGroupId = Date.now();
+    const newGroup: FilterRule = {
+      id: newGroupId,
+      type: FilterRuleType.RULE_GROUP,
+      matchOperator: FilterOperator.AND,
+      parentRule: parentRuleId,
+      children: [
+        {
+          id: Date.now() + getRandomInt(1, 500),
+          type: FilterRuleType.RULE,
+          fieldName: null,
+          matchMode: null,
+          value: null,
+          parentRule: newGroupId,
+          children: []
+        },
+        {
+          id: Date.now() + getRandomInt(1, 500),
+          type: FilterRuleType.RULE,
+          fieldName: null,
+          matchMode: null,
+          value: null,
+          parentRule: newGroupId,
+          children: []
+        }
+      ]
+    };
+    setFilterRules(prev => addChild(prev, parentRuleId, newGroup));
+  };
+
+  // const handleDeleteRule = (id) => {
+  //   const deleteRecursively = (rules, id) => {
+  //     return rules.filter(rule => rule.id !== id).map(rule => {
+  //       if (rule.children) {
+  //         return {
+  //           ...rule,
+  //           children: deleteRecursively(rule.children, id)
+  //         };
+  //       }
+  //       return rule;
+  //     });
+  //   };
+  //   setFilterRules(prev => deleteRecursively(prev, id));
+  // };
+
+
+  const removeEmptyGroups = (rule) => {
+    if (rule.type === "rule_group" && rule.children.length === 0) {
+      return null;
+    }
+
+    rule.children = rule.children
+      .map(removeEmptyGroups) // Recursively process children
+      .filter(child => child !== null); // Remove null values
+
+    return rule;
+  };
+
+
+  const handleDeleteRule = (id) => {
+    if (filterRules[0].children.length === 1 && filterRules[0].children[0].id === id) {
+      return
+    }
+    const deleteRecursively = (rules, id, isRoot = false) => {
+      const mappedData = rules
+        .map(rule => {
+          if (rule.id === id) {
+            return null; // Remove the target rule
+          }
+
+          if (rule.children) {
+            const updatedChildren = deleteRecursively(rule.children, id);
+
+            // If this rule had children and now has none, keep it but set children to []
+            if (rule.children.length > 0 && updatedChildren.length === 0) {
+              return { ...rule, children: [] };
+            }
+
+            return { ...rule, children: updatedChildren };
+          }
+
+          return rule;
+        })
+        .filter(rule => rule !== null); // Remove null values
+
+      return mappedData
+    };
+
+    setFilterRules(prevRules => [removeEmptyGroups(deleteRecursively(prevRules, id, true)[0])]);
+  };
+
+
+
+
+
+  // const handlePrintState = () => {
+  //   // setPrintedState(JSON.stringify(filterRules, null, 2)); // Pretty format the state
+  //   transformFilterRules(filterRules)
+  // };
+
+
+
+
+  return (
+    <div className=''>
+      {filterRules.map(rule => (
+        <FilterGroupComponent
+          key={rule.id}
+          viewData={viewData}
+          fields={fields}
+          group={rule}
+          onChange={handleChange}
+          onAddRule={handleAddRule}
+          onAddGroup={handleAddGroup}
+          onDelete={handleDeleteRule}
+          level={0} // Top-level group
+        />
+      ))}
+      <div className='flex gap-3 mt-3'>
+        <Button label="Apply" size="small" onClick={() => transformFilterRules(filterRules)} type="submit" />
+        <Button type='button' label='Cancel' outlined size='small' onClick={closeDialog} />
+        {/* 
+        <br></br>
+        <textarea value={printedState} readOnly rows={20} cols={100} style={{ marginTop: '20px' }} /> */}
+      </div>
+    </div>
+  );
+};
+
+export default FilterComponent;