@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.11

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

@@ -1,15 +1,12 @@
 // @ts-nocheck
-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 React, { useState } from 'react';
 import { SolidFilterFields } from '../filter/SolidFilterFields';
-import { Button } from 'primereact/button';
-import { Fieldset } from 'primereact/fieldset';
-import { OverlayPanel } from 'primereact/overlaypanel';
-import { AutoComplete } from 'primereact/autocomplete';
+import { FolderPlus, Plus, Trash2 } from 'lucide-react';
+import { SolidButton } from '../../shad-cn-ui/SolidButton';
+import { SolidAutocomplete } from '../../shad-cn-ui/SolidAutocomplete';
+import { SolidInput } from '../../shad-cn-ui/SolidInput';
+import { SolidSelect } from '../../shad-cn-ui/SolidSelect';
+import { FilterMatchMode, type FilterMatchModeValue } from '../filter/filterMatchMode';
 
 export enum FilterRuleType {
   RULE = 'rule',
@@ -21,20 +18,12 @@ export enum FilterOperator {
   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;
+  matchMode?: FilterMatchModeValue | null;
   value?: any;
   parentRule: number | null;
   children?: FilterRule[];
@@ -88,8 +77,6 @@ const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAd
   // 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 autoCompleteRef = useRef(null);
-
   const [fieldName, setFieldName] = useState({ name: rule.fieldName });
   const [matchMode, setMatchMode] = useState({ name: rule.matchMode });
 
@@ -103,19 +90,13 @@ const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAd
         item.name.toLowerCase().startsWith(query)
       );
     setFilteredFields(filtered);
-    setTimeout(() => {
-      autoCompleteRef.current?.show();
-    }, 0);
   };
   return (
-    // <div style={{ marginLeft: (level - 1) * 10 + 'px' }} className="filter-rule">
-
-    <div className='mt-2'>
-      <div className='flex flex-column md:flex-row  align-items-start md:align-items-center gap-2 md:gap-3'>
-        <div className='formgrid grid w-full'>
-          <div className='col-12 md:col-4 pb-2 md:pb-0'>
-            <AutoComplete
-              ref={autoCompleteRef}
+    <div className='solid-filter-rule-row'>
+      <div className='solid-filter-rule-main'>
+        <div className='solid-filter-rule-field'>
+          <div className='solid-filter-control-wrap'>
+            <SolidAutocomplete
               value={fieldName.name}
               suggestions={filteredFields}
               completeMethod={searchFields}
@@ -123,10 +104,10 @@ const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAd
               dropdown
               forceSelection // only values from list
               placeholder="Select Field"
-              className="w-full p-inputtext-sm solid-filter-auto-complete-field"
+              className="w-full solid-filter-auto-complete-field solid-filter-compact-control"
               onChange={(e) => {
                 setFieldName({ name: e.value }); // e.value will be an object or null
-                if (e.value) {
+                if (e.value && typeof e.value === "object" && e.value.value) {
                   onChange(rule.id, 'fieldName', e.value.value); // send value to parent
                 } else {
                   onChange(rule.id, 'fieldName', '');
@@ -134,121 +115,82 @@ const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAd
               }}
             />
           </div>
-          <div className='col-12 md: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-12 md:col-6 pb-2 md:pb-0'>
-                    <InputText
-                      disabled
-                      value={rule.value || ''}
-                      placeholder="operator"
-                      className='w-full p-inputtext-sm '
-                    />
-                  </div>
-                  <div className='col-12 md: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 className='solid-filter-rule-value'>
+          <div className='solid-filter-control-wrap'>
+            {rule.fieldName ?
+              <SolidFilterFields viewData={viewData} fieldMetadata={viewData.data.solidFieldsMetadata[rule.fieldName]} onChange={onChange} index={rule.id} rule={rule}></SolidFilterFields>
+              : <div className='solid-filter-empty-pair'>
+                <SolidInput
+                  disabled
+                  value={rule.value || ''}
+                  placeholder="Operator"
+                  className='w-full solid-filter-compact-control'
+                />
+                <SolidInput
+                  disabled
+                  value={rule.value || ''}
+                  placeholder="Value"
+                  className='w-full solid-filter-compact-control'
+                />
+              </div>
+            }
           </div>
         </div>
       </div>
+      <div className='solid-filter-rule-actions'>
+        <SolidButton variant="ghost" size='sm' onClick={() => onAddRule(rule.parentRule)} className='solid-filter-action-btn solid-filter-action-icon-btn'>
+          <Plus size={14} />
+        </SolidButton>
+        <SolidButton variant="ghost" size='sm' onClick={() => onAddGroup(rule.id)} className='solid-filter-action-btn solid-filter-action-icon-btn'>
+          <FolderPlus size={14} />
+        </SolidButton>
+        <SolidButton variant="ghost" size='sm' onClick={() => onDelete(rule.id)} className='solid-filter-action-btn solid-filter-action-icon-btn is-danger'>
+          <Trash2 size={14} />
+        </SolidButton>
+      </div>
 
       {rule.children && rule.children.map(nestedRule => (
-        <div className='py-3 nested-custom-filter' key={nestedRule.id}>
+        <div className='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'>
+    <div className='primary-filter-fieldset solid-filter-group-shell'>
+      <div className="solid-filter-group-operator-wrap">
+        <SolidSelect
+          value={group.matchOperator}
+          options={[
+            { label: "OR", value: FilterOperator.OR },
+            { label: "AND", value: FilterOperator.AND },
+          ]}
+          placeholder="Operator"
+          className="solid-filter-group-operator-select"
+          onChange={(event) => onChange(group.id, 'matchOperator', event.value)}
+        />
+      </div>
       {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' />
+        <SolidButton variant="ghost" size='sm' onClick={() => onAddRule(group.id)} className='px-0 mt-2 solid-filter-add-condition-btn'>
+          <Plus size={14} />
+          Add Condition
+        </SolidButton>
       }
-    </Fieldset>
+    </div>
   );
 };
 
@@ -429,7 +371,7 @@ const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, transf
 
 
   return (
-    <div className=''>
+    <div className='solid-filter-builder'>
       {filterRules.map(rule => (
         <FilterGroupComponent
           key={rule.id}
@@ -443,9 +385,9 @@ const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, transf
           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} />
+      <div className='solid-filter-builder-actions'>
+        <SolidButton variant="primary" size="sm" onClick={() => transformFilterRules(filterRules)} type="submit" className="solid-filter-submit-btn">Apply</SolidButton>
+        <SolidButton type='button' variant="outline" size='sm' onClick={closeDialog} className="solid-filter-cancel-btn">Cancel</SolidButton>
         {/* 
         <br></br>
         <textarea value={printedState} readOnly rows={20} cols={100} style={{ marginTop: '20px' }} /> */}
@@ -454,4 +396,4 @@ const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, transf
   );
 };
 
-export default FilterComponent;
+export default FilterComponent;

package/dist/components/core/common/GroupingComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GroupingComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/GroupingComponent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAkD5D,MAAM,MAAM,mBAAmB,GAC3B,OAAO,GACP,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,QAAQ,EAAE,mBAAmB,CAAC;IAE9B;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,KAAK,GACL,SAAS,GACT,YAAY,CAAC;AAEjB,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IAEX;;;;;;;OAOG;IACH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB;;;OAGG;IACH,YAAY,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;CAC1C;AAGD,QAAA,MAAM,iBAAiB;cASR,GAAG;YAAU,cAAc,EAAE;mBAAiB,YAAY,EAAE;sBAAoB,GAAG;sBAAoB,eAAe,EAAE;yBAAuB,GAAG;mBAAiB,GAAG;iBAAe,GAAG;6CAuUtM,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"GroupingComponent.d.ts","sourceRoot":"","sources":["../../../../src/components/core/common/GroupingComponent.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAmD5D,MAAM,MAAM,mBAAmB,GAC3B,OAAO,GACP,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,QAAQ,EAAE,mBAAmB,CAAC;IAE9B;;;;;;OAMG;IACH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,KAAK,GACL,SAAS,GACT,YAAY,CAAC;AAEjB,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IAEX;;;;;;;OAOG;IACH,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IAEzB;;;OAGG;IACH,YAAY,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;CAC1C;AAED,QAAA,MAAM,iBAAiB;cASR,GAAG;YAAU,cAAc,EAAE;mBAAiB,YAAY,EAAE;sBAAoB,GAAG;sBAAoB,eAAe,EAAE;yBAAuB,GAAG;mBAAiB,GAAG;iBAAe,GAAG;6CA4PtM,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/core/common/GroupingComponent.js

@@ -20,9 +20,11 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from "react";
-import { Dropdown } from "primereact/dropdown";
-import { Button } from "primereact/button";
-import { AutoComplete } from "primereact/autocomplete";
+import { SolidAutocomplete } from "../../shad-cn-ui/SolidAutocomplete";
+import { SolidSelect } from "../../shad-cn-ui/SolidSelect";
+import { SolidButton } from "../../shad-cn-ui/SolidButton";
+import { SolidIcon } from "../../shad-cn-ui/SolidIcon";
+import { Plus } from "lucide-react";
 var groupedDateOptions = [
     {
         label: "Year",
@@ -100,14 +102,6 @@ var GroupingComponent = function (_a) {
                 (f.type === "computed" && f.computedFieldValueType === "float");
         });
     }, [fields]);
-    // -------------------------------
-    // GROUPING HANDLERS
-    // -------------------------------
-    var addGroup = function () {
-        setGroupingRules(function (prev) { return __spreadArray(__spreadArray([], prev, true), [
-            { id: Date.now(), fieldName: null, dateGrouping: null }
-        ], false); });
-    };
     var removeGroup = function (id) {
         setGroupingRules(function (prev) { return prev.filter(function (r) { return r.id !== id; }); });
     };
@@ -119,14 +113,6 @@ var GroupingComponent = function (_a) {
             });
         });
     };
-    // -------------------------------
-    // AGGREGATION HANDLERS
-    // -------------------------------
-    var addAggregation = function () {
-        setAggregationRules(function (prev) { return __spreadArray(__spreadArray([], prev, true), [
-            { id: Date.now(), operator: "sum", fieldName: null }
-        ], false); });
-    };
     var removeAggregation = function (id) {
         setAggregationRules(function (prev) {
             return prev.filter(function (a) { return a.id !== id || a.locked; });
@@ -140,57 +126,41 @@ var GroupingComponent = function (_a) {
             });
         });
     };
-    // -------------------------------
-    // READONLY GROUP ORDER DISPLAY
-    // -------------------------------
-    var groupingSummary = groupingRules
-        .filter(function (g) { return g.fieldName; })
-        .map(function (g) {
-        var fieldMeta = fields.find(function (f) { return f.fieldName === g.fieldName; });
-        if (!fieldMeta)
-            return null;
-        if (["date", "datetime"].includes(fieldMeta.type) && g.dateGrouping) {
-            return "".concat(fieldMeta.displayName, " (").concat(g.dateGrouping, ")");
-        }
-        return fieldMeta.displayName;
-    })
-        .filter(Boolean)
-        .join(" > ");
-    var groupedDateItemTemplate = function (option) {
-        return (_jsxs("div", { className: "flex align-items-center gap-2", children: [_jsx("i", { className: "pi ".concat(option.label === "Year" ? "pi-calendar" :
-                        option.label === "Month" ? "pi-calendar-minus" :
-                            "pi-calendar-plus") }), _jsx("div", { children: option.label })] }));
-    };
-    var groupedDateValueTemplate = function (option) {
-        return (_jsx("div", { className: "pl-3", children: option.label }));
-    };
-    return (_jsxs("div", { className: "primary-filter-fieldset p-2", children: [_jsx("style", { children: "\n        .solid-mini-dropdown {\n          border: none !important;\n          background: transparent !important;\n          border-radius: 4px !important;\n          transition: background 0.2s !important;\n        }\n        .solid-mini-dropdown:hover {\n          background: rgba(0, 0, 0, 0.1) !important;\n        }\n        .solid-mini-dropdown .p-dropdown-label {\n          padding: 0 0.5rem !important;\n          line-height: 1.5rem !important;\n          font-size: 0.75rem !important;\n          font-weight: 600 !important;\n          color: var(--text-color-secondary) !important;\n        }\n        .solid-mini-dropdown .p-dropdown-trigger {\n          width: 1.5rem !important;\n        }\n        .solid-chip {\n           border: 1px solid var(--surface-300) !important;\n           background: var(--surface-100) !important;\n           box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;\n           transition: all 0.2s ease-in-out;\n           border-radius: 100px !important; /* Made more rounded */\n        }\n        .solid-chip:hover {\n           background: var(--surface-200) !important;\n           transform: translateY(-1px);\n        }\n        .solid-chip .pi-times {\n           border: none !important; /* Ensure no border on the x */\n           background: transparent !important;\n        }\n      " }), _jsx("p", { className: "mb-2 font-bold", children: "Apply Groups" }), _jsx("div", { className: "mb-3", children: _jsx(AutoComplete, { value: groupSearchValue, suggestions: filteredGroupingFields, completeMethod: searchGroupingFields, field: "displayName", placeholder: "Search Field to Group By", className: "w-full", dropdown: true, onChange: function (e) { return setGroupSearchValue(e.value); }, onSelect: function (e) {
-                        if (typeof e.value === "object" && e.value.fieldName) {
-                            var isDate_1 = ["date", "datetime"].includes(e.value.type);
-                            setGroupingRules(function (prev) { return __spreadArray(__spreadArray([], prev, true), [
-                                { id: Date.now(), fieldName: e.value.fieldName, dateGrouping: isDate_1 ? "YYYY-MM-DD" : null }
-                            ], false); });
-                        }
-                        setGroupSearchValue(null);
-                    } }) }), _jsxs("div", { className: "flex align-items-center gap-2 flex-wrap mb-4", style: { minHeight: '2rem' }, children: [groupingRules.length == 1 && groupingRules[0].fieldName === null && (_jsx("span", { className: "text-sm text-400 italic", children: "No grouping rules applied." })), groupingRules.map(function (rule, index) {
-                        var fieldMeta = fields.find(function (f) { return f.fieldName === rule.fieldName; });
-                        if (!fieldMeta)
-                            return null;
-                        var isDate = ["date", "datetime"].includes(fieldMeta.type);
-                        return (_jsxs(React.Fragment, { children: [_jsxs("div", { className: "flex align-items-center gap-2 px-2 py-1 solid-chip text-sm font-medium text-700", children: [_jsx("span", { children: fieldMeta.displayName }), isDate && (_jsx(Dropdown, { value: rule.dateGrouping || "YYYY-MM-DD", options: groupedDateOptions, optionLabel: "label", optionGroupLabel: "label", optionGroupChildren: "items", optionGroupTemplate: groupedDateItemTemplate, itemTemplate: groupedDateValueTemplate, placeholder: "Format", className: "solid-mini-dropdown", style: { height: '1.5rem', fontSize: '0.75rem', padding: '0 0.25rem' }, onChange: function (e) { return updateGroup(rule.id, "dateGrouping", e.value); } })), _jsx("i", { className: "pi pi-times cursor-pointer text-400 hover:text-red-500 transition-colors", onClick: function () { return removeGroup(rule.id); } })] }), index < groupingRules.length - 1 && (_jsx("i", { className: "pi pi-angle-double-right text-400 text-xs" }))] }, rule.id));
-                    })] }), _jsx("p", { className: "mt-4 mb-2 font-bold", children: "Apply Aggregations" }), _jsx("div", { className: "mb-3", children: _jsx(AutoComplete, { value: aggSearchValue, suggestions: filteredAggregationFields, completeMethod: searchAggregationFields, field: "displayName", placeholder: "Search Field to Aggregate", className: "w-full", dropdown: true, onChange: function (e) { return setAggSearchValue(e.value); }, onSelect: function (e) {
-                        if (typeof e.value === "object" && e.value.fieldName) {
-                            setAggregationRules(function (prev) { return __spreadArray(__spreadArray([], prev, true), [
-                                { id: Date.now(), operator: "count", fieldName: e.value.fieldName }
-                            ], false); });
-                        }
-                        setAggSearchValue(null);
-                    } }) }), _jsxs("div", { className: "flex align-items-center gap-2 flex-wrap mb-4", style: { minHeight: '3rem' }, children: [aggregationRules.length === 0 && (_jsx("span", { className: "text-sm text-400 italic", children: "No aggregations applied." })), aggregationRules.map(function (rule) {
-                        var fieldMeta = fields.find(function (f) { return f.fieldName === rule.fieldName; });
-                        if (!fieldMeta)
-                            return null;
-                        return (_jsxs("div", { className: "flex align-items-center gap-2 px-2 py-1 solid-chip text-sm font-medium text-700", children: [_jsx("span", { children: fieldMeta.displayName }), _jsx(Dropdown, { value: rule.operator, options: aggregateOperators, disabled: rule.locked, placeholder: "Op", className: "solid-mini-dropdown", style: { height: '1.5rem', fontSize: '0.75rem', padding: '0 0.25rem' }, onChange: function (e) { return updateAggregation(rule.id, "operator", e.value); } }), !rule.locked && (_jsx("i", { className: "pi pi-times cursor-pointer text-400 hover:text-red-500 transition-colors", onClick: function () { return removeAggregation(rule.id); } }))] }, rule.id));
-                    })] }), _jsxs("div", { className: "flex justify-content-center gap-2 mt-4 pt-3 surface-border", children: [_jsx(Button, { label: "Apply", icon: "pi pi-check", size: "small", onClick: function () { return applyGrouping(groupingRules, aggregationRules); } }), _jsx(Button, { label: "Cancel", icon: "pi pi-times", size: "small", outlined: true, onClick: closeDialog })] })] }));
+    var groupedDateFlatOptions = groupedDateOptions.flatMap(function (group) {
+        return group.items.map(function (item) { return ({
+            label: "".concat(group.label, ": ").concat(item.label),
+            value: item.value,
+        }); });
+    });
+    var visibleGroupingRules = groupingRules.filter(function (rule) { return rule.fieldName; });
+    var visibleAggregationRules = aggregationRules.filter(function (rule) { return rule.fieldName; });
+    return (_jsxs("div", { className: "solid-grouping-builder", children: [_jsxs("section", { className: "solid-grouping-section-card", children: [_jsx("div", { className: "solid-grouping-section-head", children: _jsxs("div", { children: [_jsx("p", { className: "m-0 solid-filter-section-title", children: "Grouping Rules" }), _jsx("p", { className: "m-0 solid-grouping-section-copy", children: "Add fields in the order you want the tree to grow. The first rule becomes the top level." })] }) }), _jsx("div", { className: "solid-grouping-search-row", children: _jsx(SolidAutocomplete, { value: groupSearchValue, suggestions: filteredGroupingFields, completeMethod: searchGroupingFields, field: "displayName", placeholder: "Search field to group by", className: "w-full solid-filter-compact-control", dropdown: true, onChange: function (e) { return setGroupSearchValue(e.value); }, onSelect: function (e) {
+                                if (typeof e.value === "object" && e.value.fieldName) {
+                                    var isDate_1 = ["date", "datetime"].includes(e.value.type);
+                                    setGroupingRules(function (prev) { return __spreadArray(__spreadArray([], prev, true), [
+                                        { id: Date.now(), fieldName: e.value.fieldName, dateGrouping: isDate_1 ? "YYYY-MM-DD" : null }
+                                    ], false); });
+                                }
+                                setGroupSearchValue(null);
+                            } }) }), _jsxs("div", { className: "solid-grouping-list", children: [visibleGroupingRules.length === 0 && (_jsxs("div", { className: "solid-grouping-empty-panel", children: [_jsx(Plus, { size: 14 }), _jsx("span", { children: "No grouping rules applied yet." })] })), visibleGroupingRules.map(function (rule, index) {
+                                var fieldMeta = fields.find(function (f) { return f.fieldName === rule.fieldName; });
+                                if (!fieldMeta)
+                                    return null;
+                                var isDate = ["date", "datetime"].includes(fieldMeta.type);
+                                return (_jsxs("div", { className: "solid-grouping-rule-row", children: [_jsx("div", { className: "solid-grouping-order-badge", children: index + 1 }), _jsxs("div", { className: "solid-grouping-rule-main", children: [_jsxs("div", { className: "solid-grouping-rule-title-row", children: [_jsx("div", { className: "solid-grouping-rule-title", children: fieldMeta.displayName }), _jsx("div", { className: "solid-grouping-rule-caption", children: index === 0 ? "Top-level grouping" : "Then group within level ".concat(index) })] }), isDate ? (_jsxs("div", { className: "solid-grouping-rule-controls", children: [_jsx("span", { className: "solid-grouping-inline-label", children: "Group by" }), _jsx(SolidSelect, { value: rule.dateGrouping || "YYYY-MM-DD", options: groupedDateFlatOptions, optionLabel: "label", optionValue: "value", placeholder: "Format", className: "solid-grouping-row-select", onChange: function (e) { return updateGroup(rule.id, "dateGrouping", e.value); } })] })) : (_jsx("div", { className: "solid-grouping-rule-summary", children: "Groups by exact value of this field." }))] }), _jsx("button", { type: "button", className: "solid-grouping-row-remove", onClick: function () { return removeGroup(rule.id); }, children: _jsx(SolidIcon, { name: "si-times" }) })] }, rule.id));
+                            })] })] }), _jsxs("section", { className: "solid-grouping-section-card", children: [_jsx("div", { className: "solid-grouping-section-head", children: _jsxs("div", { children: [_jsx("p", { className: "m-0 solid-filter-section-title", children: "Aggregations" }), _jsx("p", { className: "m-0 solid-grouping-section-copy", children: "Add rollups to show counts or numeric summaries for each group." })] }) }), _jsx("div", { className: "solid-grouping-search-row", children: _jsx(SolidAutocomplete, { value: aggSearchValue, suggestions: filteredAggregationFields, completeMethod: searchAggregationFields, field: "displayName", placeholder: "Search field to aggregate", className: "w-full solid-filter-compact-control", dropdown: true, onChange: function (e) { return setAggSearchValue(e.value); }, onSelect: function (e) {
+                                if (typeof e.value === "object" && e.value.fieldName) {
+                                    setAggregationRules(function (prev) { return __spreadArray(__spreadArray([], prev, true), [
+                                        { id: Date.now(), operator: "count", fieldName: e.value.fieldName }
+                                    ], false); });
+                                }
+                                setAggSearchValue(null);
+                            } }) }), _jsxs("div", { className: "solid-grouping-list solid-grouping-list-compact", children: [visibleAggregationRules.length === 0 && (_jsxs("div", { className: "solid-grouping-empty-panel", children: [_jsx(Plus, { size: 14 }), _jsx("span", { children: "No aggregations applied yet." })] })), visibleAggregationRules.map(function (rule) {
+                                var fieldMeta = fields.find(function (f) { return f.fieldName === rule.fieldName; });
+                                if (!fieldMeta)
+                                    return null;
+                                return (_jsxs("div", { className: "solid-aggregation-row", children: [_jsxs("div", { className: "solid-aggregation-row-main", children: [_jsx("div", { className: "solid-aggregation-row-title", children: fieldMeta.displayName }), _jsx("div", { className: "solid-aggregation-row-caption", children: rule.locked ? "Default aggregation" : "Applied to each group" })] }), _jsxs("div", { className: "solid-aggregation-row-controls", children: [_jsx("span", { className: "solid-grouping-inline-label", children: "Operation" }), _jsx(SolidSelect, { value: rule.operator, options: aggregateOperators, disabled: rule.locked, placeholder: "Op", className: "solid-grouping-row-select solid-aggregation-row-select", onChange: function (e) { return updateAggregation(rule.id, "operator", e.value); } })] }), !rule.locked ? (_jsx("button", { type: "button", className: "solid-grouping-row-remove solid-aggregation-row-remove", onClick: function () { return removeAggregation(rule.id); }, children: _jsx(SolidIcon, { name: "si-times" }) })) : (_jsx("span", { className: "solid-aggregation-row-remove-spacer", "aria-hidden": "true" }))] }, rule.id));
+                            })] })] }), _jsxs("div", { className: "solid-grouping-footer", children: [_jsxs(SolidButton, { size: "sm", variant: "outline", onClick: closeDialog, children: [_jsx(SolidIcon, { name: "si-times" }), "Cancel"] }), _jsxs(SolidButton, { size: "sm", variant: "primary", onClick: function () { return applyGrouping(groupingRules, aggregationRules); }, children: [_jsx(SolidIcon, { name: "si-check" }), "Apply"] })] })] }));
 };
 export default GroupingComponent;
 //# sourceMappingURL=GroupingComponent.js.map

package/dist/components/core/common/GroupingComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"GroupingComponent.js","sourceRoot":"","sources":["../../../../src/components/core/common/GroupingComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from \"react\";\nimport { Dropdown } from \"primereact/dropdown\";\nimport { Button } from \"primereact/button\";\nimport { GroupableField } from \"./SolidGlobalSearchElement\";\nimport { AutoComplete } from \"primereact/autocomplete\";\n\nconst groupedDateOptions = [\n  {\n    label: \"Year\",\n    items: [\n      { label: \"Year (YYYY)\", value: \"YYYY\" }\n    ]\n  },\n  {\n    label: \"Month\",\n    items: [\n      { label: \"Month (MMM)\", value: \"MMM\" },\n      { label: \"Year-Month (YYYY-MM)\", value: \"YYYY-MM\" }\n    ]\n  },\n  {\n    label: \"Day\",\n    items: [\n      { label: \"Full Date (YYYY-MM-DD)\", value: \"YYYY-MM-DD\" }\n    ]\n  }\n];\n\n\n\nconst aggregateOperators = [\n  { label: \"Count\", value: \"count\" },\n  { label: \"Sum\", value: \"sum\" },\n  { label: \"Avg\", value: \"avg\" },\n  { label: \"Min\", value: \"min\" },\n  { label: \"Max\", value: \"max\" }\n];\n\nconst allowedGroupTypes = [\n  \"shortText\",\n  \"selectionStatic\",\n  \"selectionDynamic\",\n  \"computed\",\n  \"int\",\n  \"float\",\n  \"boolean\",\n  \"date\",\n  \"datetime\",\n  \"relation\"\n];\n\nconst numericTypes = [\"int\", \"float\"];\n\nexport type AggregationOperator =\n  | \"count\"\n  | \"sum\"\n  | \"avg\"\n  | \"min\"\n  | \"max\";\n\nexport interface AggregationRule {\n  id: number;\n\n  /**\n   * Aggregate operator\n   */\n  operator: AggregationOperator;\n\n  /**\n   * Field on which aggregation applies\n   * Example:\n   *  \"id\"\n   *  \"amount\"\n   *  \"price\"\n   */\n  fieldName: string | null;\n\n  /**\n   * If true:\n   *  - Cannot be edited\n   *  - Cannot be removed\n   * Used for default: count-of-id\n   */\n  locked?: boolean;\n}\n\nexport type DateGroupingFormat =\n  | \"YYYY\"\n  | \"MMM\"\n  | \"YYYY-MM\"\n  | \"YYYY-MM-DD\";\n\nexport interface GroupingRule {\n  id: number;\n\n  /**\n   * Actual field selected by user.\n   * Example:\n   *  \"state\"\n   *  \"city\"\n   *  \"createdAt\"\n   *  \"author.name\"   // many-to-one resolved key\n   */\n  fieldName: string | null;\n\n  /**\n   * Only used when field type is date or datetime.\n   * Null for non-date fields.\n   */\n  dateGrouping?: DateGroupingFormat | null;\n}\n\n\nconst GroupingComponent = ({\n  viewData,\n  fields,\n  groupingRules,\n  setGroupingRules,\n  aggregationRules,\n  setAggregationRules,\n  applyGrouping,\n  closeDialog\n}: { viewData: any, fields: GroupableField[], groupingRules: GroupingRule[], setGroupingRules: any, aggregationRules: AggregationRule[], setAggregationRules: any, applyGrouping: any, closeDialog: any }) => {\n\n\n  const [groupSearchValue, setGroupSearchValue] = React.useState<any>(null);\n  const [aggSearchValue, setAggSearchValue] = React.useState<any>(null);\n\n  const [filteredGroupingFields, setFilteredGroupingFields] = React.useState<GroupableField[]>([]);\n\n  const searchGroupingFields = (event: any) => {\n    const query = event.query.toLowerCase();\n    const selectedFields = groupingRules.map(r => r.fieldName);\n\n    const filtered = groupableFields.filter((field) =>\n      field.displayName.toLowerCase().includes(query) && !selectedFields.includes(field.fieldName)\n    );\n\n    setFilteredGroupingFields(filtered);\n  };\n\n  const [filteredAggregationFields, setFilteredAggregationFields] = React.useState<GroupableField[]>([]);\n\n  const searchAggregationFields = (event: any) => {\n    const query = event.query.toLowerCase();\n\n    const filtered = numericFields.filter((field) =>\n      field.displayName.toLowerCase().includes(query)\n    );\n    setFilteredAggregationFields(query ? filtered : numericFields);\n  };\n\n  // -------------------------------\n  // FILTER GROUPABLE FIELDS\n  // -------------------------------\n  const groupableFields: GroupableField[] = useMemo(() => {\n    return fields.filter(f =>\n      allowedGroupTypes.includes(f.type)\n    );\n  }, [fields]);\n\n  const numericFields: GroupableField[] = useMemo(() => {\n    return fields.filter((f: any) =>\n      numericTypes.includes(f.type) ||\n      (f.type === \"computed\" && f.computedFieldValueType === \"int\") ||\n      (f.type === \"computed\" && f.computedFieldValueType === \"float\")\n    );\n  }, [fields]);\n\n  // -------------------------------\n  // GROUPING HANDLERS\n  // -------------------------------\n\n  const addGroup = () => {\n    setGroupingRules((prev: any) => [\n      ...prev,\n      { id: Date.now(), fieldName: null, dateGrouping: null }\n    ]);\n  };\n\n  const removeGroup = (id: any) => {\n    setGroupingRules((prev: any) => prev.filter((r: any) => r.id !== id));\n  };\n\n  const updateGroup = (id: any, key: any, value: any) => {\n    setGroupingRules((prev: any) =>\n      prev.map((r: any) => r.id === id ? { ...r, [key]: value } : r)\n    );\n  };\n\n  // -------------------------------\n  // AGGREGATION HANDLERS\n  // -------------------------------\n\n  const addAggregation = () => {\n    setAggregationRules((prev: any) => [\n      ...prev,\n      { id: Date.now(), operator: \"sum\", fieldName: null }\n    ]);\n  };\n\n  const removeAggregation = (id: any) => {\n    setAggregationRules((prev: any) =>\n      prev.filter((a: any) => a.id !== id || a.locked)\n    );\n  };\n\n  const updateAggregation = (id: any, key: any, value: any) => {\n    setAggregationRules((prev: any) =>\n      prev.map((a: any) => a.id === id ? { ...a, [key]: value } : a)\n    );\n  };\n\n  // -------------------------------\n  // READONLY GROUP ORDER DISPLAY\n  // -------------------------------\n\n  const groupingSummary = groupingRules\n    .filter((g: GroupingRule) => g.fieldName)\n    .map((g: GroupingRule) => {\n      const fieldMeta = fields.find((f: GroupableField) => f.fieldName === g.fieldName);\n      if (!fieldMeta) return null;\n\n      if ([\"date\", \"datetime\"].includes(fieldMeta.type) && g.dateGrouping) {\n        return `${fieldMeta.displayName} (${g.dateGrouping})`;\n      }\n\n      return fieldMeta.displayName;\n    })\n    .filter(Boolean)\n    .join(\" > \");\n\n\n  const groupedDateItemTemplate = (option: any) => {\n    return (\n      <div className=\"flex align-items-center gap-2\">\n        <i className={`pi ${option.label === \"Year\" ? \"pi-calendar\" :\n          option.label === \"Month\" ? \"pi-calendar-minus\" :\n            \"pi-calendar-plus\"\n          }`} />\n        <div>\n          {option.label}\n        </div>\n      </div>\n    );\n  };\n\n  const groupedDateValueTemplate = (option: any) => {\n    return (\n      <div className=\"pl-3\">\n        {option.label}\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"primary-filter-fieldset p-2\">\n      <style>{`\n        .solid-mini-dropdown {\n          border: none !important;\n          background: transparent !important;\n          border-radius: 4px !important;\n          transition: background 0.2s !important;\n        }\n        .solid-mini-dropdown:hover {\n          background: rgba(0, 0, 0, 0.1) !important;\n        }\n        .solid-mini-dropdown .p-dropdown-label {\n          padding: 0 0.5rem !important;\n          line-height: 1.5rem !important;\n          font-size: 0.75rem !important;\n          font-weight: 600 !important;\n          color: var(--text-color-secondary) !important;\n        }\n        .solid-mini-dropdown .p-dropdown-trigger {\n          width: 1.5rem !important;\n        }\n        .solid-chip {\n           border: 1px solid var(--surface-300) !important;\n           background: var(--surface-100) !important;\n           box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;\n           transition: all 0.2s ease-in-out;\n           border-radius: 100px !important; /* Made more rounded */\n        }\n        .solid-chip:hover {\n           background: var(--surface-200) !important;\n           transform: translateY(-1px);\n        }\n        .solid-chip .pi-times {\n           border: none !important; /* Ensure no border on the x */\n           background: transparent !important;\n        }\n      `}</style>\n\n      {/* ========================================================= */}\n      {/* A. APPLY GROUPS */}\n      {/* ========================================================= */}\n      <p className=\"mb-2 font-bold\">Apply Groups</p>\n\n      <div className=\"mb-3\">\n        <AutoComplete\n          value={groupSearchValue}\n          suggestions={filteredGroupingFields}\n          completeMethod={searchGroupingFields}\n          field=\"displayName\"\n          placeholder=\"Search Field to Group By\"\n          className=\"w-full\"\n          dropdown\n          onChange={(e) => setGroupSearchValue(e.value)}\n          onSelect={(e) => {\n            if (typeof e.value === \"object\" && e.value.fieldName) {\n              const isDate = [\"date\", \"datetime\"].includes(e.value.type);\n              setGroupingRules((prev: any) => [\n                ...prev,\n                { id: Date.now(), fieldName: e.value.fieldName, dateGrouping: isDate ? \"YYYY-MM-DD\" : null }\n              ]);\n            }\n            setGroupSearchValue(null);\n          }}\n        />\n      </div>\n\n      <div className=\"flex align-items-center gap-2 flex-wrap mb-4\" style={{ minHeight: '2rem' }}>\n        {groupingRules.length == 1 && groupingRules[0].fieldName === null && (\n          <span className=\"text-sm text-400 italic\">No grouping rules applied.</span>\n        )}\n        {groupingRules.map((rule, index) => {\n          const fieldMeta = fields.find((f) => f.fieldName === rule.fieldName);\n          if (!fieldMeta) return null;\n\n          const isDate = [\"date\", \"datetime\"].includes(fieldMeta.type);\n\n          return (\n            <React.Fragment key={rule.id}>\n              <div\n                className=\"flex align-items-center gap-2 px-2 py-1 solid-chip text-sm font-medium text-700\"\n              >\n                <span>{fieldMeta.displayName}</span>\n\n                {isDate && (\n                  <Dropdown\n                    value={rule.dateGrouping || \"YYYY-MM-DD\"}\n                    options={groupedDateOptions}\n                    optionLabel=\"label\"\n                    optionGroupLabel=\"label\"\n                    optionGroupChildren=\"items\"\n                    optionGroupTemplate={groupedDateItemTemplate}\n                    itemTemplate={groupedDateValueTemplate}\n                    placeholder=\"Format\"\n                    className=\"solid-mini-dropdown\"\n                    style={{ height: '1.5rem', fontSize: '0.75rem', padding: '0 0.25rem' }}\n                    onChange={(e) => updateGroup(rule.id, \"dateGrouping\", e.value)}\n                  />\n                )}\n\n                <i\n                  className=\"pi pi-times cursor-pointer text-400 hover:text-red-500 transition-colors\"\n                  onClick={() => removeGroup(rule.id)}\n                />\n              </div>\n              {index < groupingRules.length - 1 && (\n                <i className=\"pi pi-angle-double-right text-400 text-xs\" />\n              )}\n            </React.Fragment>\n          );\n        })}\n      </div>\n\n      {/* ========================================================= */}\n      {/* B. APPLY AGGREGATIONS */}\n      {/* ========================================================= */}\n      <p className=\"mt-4 mb-2 font-bold\">Apply Aggregations</p>\n\n      <div className=\"mb-3\">\n        <AutoComplete\n          value={aggSearchValue}\n          suggestions={filteredAggregationFields}\n          completeMethod={searchAggregationFields}\n          field=\"displayName\"\n          placeholder=\"Search Field to Aggregate\"\n          className=\"w-full\"\n          dropdown\n          onChange={(e) => setAggSearchValue(e.value)}\n          onSelect={(e) => {\n            if (typeof e.value === \"object\" && e.value.fieldName) {\n              setAggregationRules((prev: any) => [\n                ...prev,\n                { id: Date.now(), operator: \"count\", fieldName: e.value.fieldName }\n              ]);\n            }\n            setAggSearchValue(null);\n          }}\n        />\n      </div>\n\n      <div className=\"flex align-items-center gap-2 flex-wrap mb-4\" style={{ minHeight: '3rem' }}>\n        {aggregationRules.length === 0 && (\n          <span className=\"text-sm text-400 italic\">No aggregations applied.</span>\n        )}\n        {aggregationRules.map((rule) => {\n          const fieldMeta = fields.find((f) => f.fieldName === rule.fieldName);\n          if (!fieldMeta) return null;\n\n          return (\n            <div\n              key={rule.id}\n              className=\"flex align-items-center gap-2 px-2 py-1 solid-chip text-sm font-medium text-700\"\n            >\n              <span>{fieldMeta.displayName}</span>\n\n              <Dropdown\n                value={rule.operator}\n                options={aggregateOperators}\n                disabled={rule.locked}\n                placeholder=\"Op\"\n                className=\"solid-mini-dropdown\"\n                style={{ height: '1.5rem', fontSize: '0.75rem', padding: '0 0.25rem' }}\n                onChange={(e) => updateAggregation(rule.id, \"operator\", e.value)}\n              />\n\n              {!rule.locked && (\n                <i\n                  className=\"pi pi-times cursor-pointer text-400 hover:text-red-500 transition-colors\"\n                  onClick={() => removeAggregation(rule.id)}\n                />\n              )}\n            </div>\n          );\n        })}\n      </div>\n\n      {/* FOOTER */}\n      <div className=\"flex justify-content-center gap-2 mt-4 pt-3 surface-border\">\n        <Button\n          label=\"Apply\"\n          icon=\"pi pi-check\"\n          size=\"small\"\n          onClick={() => applyGrouping(groupingRules, aggregationRules)}\n        />\n        <Button\n          label=\"Cancel\"\n          icon=\"pi pi-times\"\n          size=\"small\"\n          outlined\n          onClick={closeDialog}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default GroupingComponent;\n"]}
+{"version":3,"file":"GroupingComponent.js","sourceRoot":"","sources":["../../../../src/components/core/common/GroupingComponent.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo } from \"react\";\nimport { GroupableField } from \"./SolidGlobalSearchElement\";\nimport { SolidAutocomplete } from \"../../shad-cn-ui/SolidAutocomplete\";\nimport { SolidSelect } from \"../../shad-cn-ui/SolidSelect\";\nimport { SolidButton } from \"../../shad-cn-ui/SolidButton\";\nimport { SolidIcon } from \"../../shad-cn-ui/SolidIcon\";\nimport { Plus } from \"lucide-react\";\n\nconst groupedDateOptions = [\n  {\n    label: \"Year\",\n    items: [\n      { label: \"Year (YYYY)\", value: \"YYYY\" }\n    ]\n  },\n  {\n    label: \"Month\",\n    items: [\n      { label: \"Month (MMM)\", value: \"MMM\" },\n      { label: \"Year-Month (YYYY-MM)\", value: \"YYYY-MM\" }\n    ]\n  },\n  {\n    label: \"Day\",\n    items: [\n      { label: \"Full Date (YYYY-MM-DD)\", value: \"YYYY-MM-DD\" }\n    ]\n  }\n];\nconst aggregateOperators = [\n  { label: \"Count\", value: \"count\" },\n  { label: \"Sum\", value: \"sum\" },\n  { label: \"Avg\", value: \"avg\" },\n  { label: \"Min\", value: \"min\" },\n  { label: \"Max\", value: \"max\" }\n];\n\nconst allowedGroupTypes = [\n  \"shortText\",\n  \"selectionStatic\",\n  \"selectionDynamic\",\n  \"computed\",\n  \"int\",\n  \"float\",\n  \"boolean\",\n  \"date\",\n  \"datetime\",\n  \"relation\"\n];\n\nconst numericTypes = [\"int\", \"float\"];\n\nexport type AggregationOperator =\n  | \"count\"\n  | \"sum\"\n  | \"avg\"\n  | \"min\"\n  | \"max\";\n\nexport interface AggregationRule {\n  id: number;\n\n  /**\n   * Aggregate operator\n   */\n  operator: AggregationOperator;\n\n  /**\n   * Field on which aggregation applies\n   * Example:\n   *  \"id\"\n   *  \"amount\"\n   *  \"price\"\n   */\n  fieldName: string | null;\n\n  /**\n   * If true:\n   *  - Cannot be edited\n   *  - Cannot be removed\n   * Used for default: count-of-id\n   */\n  locked?: boolean;\n}\n\nexport type DateGroupingFormat =\n  | \"YYYY\"\n  | \"MMM\"\n  | \"YYYY-MM\"\n  | \"YYYY-MM-DD\";\n\nexport interface GroupingRule {\n  id: number;\n\n  /**\n   * Actual field selected by user.\n   * Example:\n   *  \"state\"\n   *  \"city\"\n   *  \"createdAt\"\n   *  \"author.name\"   // many-to-one resolved key\n   */\n  fieldName: string | null;\n\n  /**\n   * Only used when field type is date or datetime.\n   * Null for non-date fields.\n   */\n  dateGrouping?: DateGroupingFormat | null;\n}\n\nconst GroupingComponent = ({\n  viewData,\n  fields,\n  groupingRules,\n  setGroupingRules,\n  aggregationRules,\n  setAggregationRules,\n  applyGrouping,\n  closeDialog\n}: { viewData: any, fields: GroupableField[], groupingRules: GroupingRule[], setGroupingRules: any, aggregationRules: AggregationRule[], setAggregationRules: any, applyGrouping: any, closeDialog: any }) => {\n\n\n  const [groupSearchValue, setGroupSearchValue] = React.useState<any>(null);\n  const [aggSearchValue, setAggSearchValue] = React.useState<any>(null);\n\n  const [filteredGroupingFields, setFilteredGroupingFields] = React.useState<GroupableField[]>([]);\n\n  const searchGroupingFields = (event: any) => {\n    const query = event.query.toLowerCase();\n    const selectedFields = groupingRules.map(r => r.fieldName);\n\n    const filtered = groupableFields.filter((field) =>\n      field.displayName.toLowerCase().includes(query) && !selectedFields.includes(field.fieldName)\n    );\n\n    setFilteredGroupingFields(filtered);\n  };\n\n  const [filteredAggregationFields, setFilteredAggregationFields] = React.useState<GroupableField[]>([]);\n\n  const searchAggregationFields = (event: any) => {\n    const query = event.query.toLowerCase();\n\n    const filtered = numericFields.filter((field) =>\n      field.displayName.toLowerCase().includes(query)\n    );\n    setFilteredAggregationFields(query ? filtered : numericFields);\n  };\n\n  // -------------------------------\n  // FILTER GROUPABLE FIELDS\n  // -------------------------------\n  const groupableFields: GroupableField[] = useMemo(() => {\n    return fields.filter(f =>\n      allowedGroupTypes.includes(f.type)\n    );\n  }, [fields]);\n\n  const numericFields: GroupableField[] = useMemo(() => {\n    return fields.filter((f: any) =>\n      numericTypes.includes(f.type) ||\n      (f.type === \"computed\" && f.computedFieldValueType === \"int\") ||\n      (f.type === \"computed\" && f.computedFieldValueType === \"float\")\n    );\n  }, [fields]);\n\n  const removeGroup = (id: any) => {\n    setGroupingRules((prev: any) => prev.filter((r: any) => r.id !== id));\n  };\n\n  const updateGroup = (id: any, key: any, value: any) => {\n    setGroupingRules((prev: any) =>\n      prev.map((r: any) => r.id === id ? { ...r, [key]: value } : r)\n    );\n  };\n\n  const removeAggregation = (id: any) => {\n    setAggregationRules((prev: any) =>\n      prev.filter((a: any) => a.id !== id || a.locked)\n    );\n  };\n\n  const updateAggregation = (id: any, key: any, value: any) => {\n    setAggregationRules((prev: any) =>\n      prev.map((a: any) => a.id === id ? { ...a, [key]: value } : a)\n    );\n  };\n\n  const groupedDateFlatOptions = groupedDateOptions.flatMap((group) =>\n    group.items.map((item) => ({\n      label: `${group.label}: ${item.label}`,\n      value: item.value,\n    }))\n  );\n\n  const visibleGroupingRules = groupingRules.filter((rule) => rule.fieldName);\n  const visibleAggregationRules = aggregationRules.filter((rule) => rule.fieldName);\n\n  return (\n    <div className=\"solid-grouping-builder\">\n      <section className=\"solid-grouping-section-card\">\n        <div className=\"solid-grouping-section-head\">\n          <div>\n            <p className=\"m-0 solid-filter-section-title\">Grouping Rules</p>\n            <p className=\"m-0 solid-grouping-section-copy\">\n              Add fields in the order you want the tree to grow. The first rule becomes the top level.\n            </p>\n          </div>\n        </div>\n\n        <div className=\"solid-grouping-search-row\">\n          <SolidAutocomplete\n            value={groupSearchValue}\n            suggestions={filteredGroupingFields}\n            completeMethod={searchGroupingFields}\n            field=\"displayName\"\n            placeholder=\"Search field to group by\"\n            className=\"w-full solid-filter-compact-control\"\n            dropdown\n            onChange={(e) => setGroupSearchValue(e.value)}\n            onSelect={(e) => {\n              if (typeof e.value === \"object\" && e.value.fieldName) {\n                const isDate = [\"date\", \"datetime\"].includes(e.value.type);\n                setGroupingRules((prev: any) => [\n                  ...prev,\n                  { id: Date.now(), fieldName: e.value.fieldName, dateGrouping: isDate ? \"YYYY-MM-DD\" : null }\n                ]);\n              }\n              setGroupSearchValue(null);\n            }}\n          />\n        </div>\n\n        <div className=\"solid-grouping-list\">\n          {visibleGroupingRules.length === 0 && (\n            <div className=\"solid-grouping-empty-panel\">\n              <Plus size={14} />\n              <span>No grouping rules applied yet.</span>\n            </div>\n          )}\n          {visibleGroupingRules.map((rule, index) => {\n            const fieldMeta = fields.find((f) => f.fieldName === rule.fieldName);\n            if (!fieldMeta) return null;\n\n            const isDate = [\"date\", \"datetime\"].includes(fieldMeta.type);\n\n            return (\n              <div key={rule.id} className=\"solid-grouping-rule-row\">\n                <div className=\"solid-grouping-order-badge\">{index + 1}</div>\n                <div className=\"solid-grouping-rule-main\">\n                  <div className=\"solid-grouping-rule-title-row\">\n                    <div className=\"solid-grouping-rule-title\">{fieldMeta.displayName}</div>\n                    <div className=\"solid-grouping-rule-caption\">\n                      {index === 0 ? \"Top-level grouping\" : `Then group within level ${index}`}\n                    </div>\n                  </div>\n                  {isDate ? (\n                    <div className=\"solid-grouping-rule-controls\">\n                      <span className=\"solid-grouping-inline-label\">Group by</span>\n                      <SolidSelect\n                        value={rule.dateGrouping || \"YYYY-MM-DD\"}\n                        options={groupedDateFlatOptions}\n                        optionLabel=\"label\"\n                        optionValue=\"value\"\n                        placeholder=\"Format\"\n                        className=\"solid-grouping-row-select\"\n                        onChange={(e) => updateGroup(rule.id, \"dateGrouping\", e.value)}\n                      />\n                    </div>\n                  ) : (\n                    <div className=\"solid-grouping-rule-summary\">Groups by exact value of this field.</div>\n                  )}\n                </div>\n                <button type=\"button\" className=\"solid-grouping-row-remove\" onClick={() => removeGroup(rule.id)}>\n                  <SolidIcon name=\"si-times\" />\n                </button>\n              </div>\n            );\n          })}\n        </div>\n      </section>\n\n      <section className=\"solid-grouping-section-card\">\n        <div className=\"solid-grouping-section-head\">\n          <div>\n            <p className=\"m-0 solid-filter-section-title\">Aggregations</p>\n            <p className=\"m-0 solid-grouping-section-copy\">\n              Add rollups to show counts or numeric summaries for each group.\n            </p>\n          </div>\n        </div>\n\n        <div className=\"solid-grouping-search-row\">\n          <SolidAutocomplete\n            value={aggSearchValue}\n            suggestions={filteredAggregationFields}\n            completeMethod={searchAggregationFields}\n            field=\"displayName\"\n            placeholder=\"Search field to aggregate\"\n            className=\"w-full solid-filter-compact-control\"\n            dropdown\n            onChange={(e) => setAggSearchValue(e.value)}\n            onSelect={(e) => {\n              if (typeof e.value === \"object\" && e.value.fieldName) {\n                setAggregationRules((prev: any) => [\n                  ...prev,\n                  { id: Date.now(), operator: \"count\", fieldName: e.value.fieldName }\n                ]);\n              }\n              setAggSearchValue(null);\n            }}\n          />\n        </div>\n\n        <div className=\"solid-grouping-list solid-grouping-list-compact\">\n          {visibleAggregationRules.length === 0 && (\n            <div className=\"solid-grouping-empty-panel\">\n              <Plus size={14} />\n              <span>No aggregations applied yet.</span>\n            </div>\n          )}\n          {visibleAggregationRules.map((rule) => {\n            const fieldMeta = fields.find((f) => f.fieldName === rule.fieldName);\n            if (!fieldMeta) return null;\n\n            return (\n              <div key={rule.id} className=\"solid-aggregation-row\">\n                <div className=\"solid-aggregation-row-main\">\n                  <div className=\"solid-aggregation-row-title\">{fieldMeta.displayName}</div>\n                  <div className=\"solid-aggregation-row-caption\">\n                    {rule.locked ? \"Default aggregation\" : \"Applied to each group\"}\n                  </div>\n                </div>\n\n                <div className=\"solid-aggregation-row-controls\">\n                  <span className=\"solid-grouping-inline-label\">Operation</span>\n                  <SolidSelect\n                    value={rule.operator}\n                    options={aggregateOperators}\n                    disabled={rule.locked}\n                    placeholder=\"Op\"\n                    className=\"solid-grouping-row-select solid-aggregation-row-select\"\n                    onChange={(e) => updateAggregation(rule.id, \"operator\", e.value)}\n                  />\n                </div>\n                {!rule.locked ? (\n                  <button type=\"button\" className=\"solid-grouping-row-remove solid-aggregation-row-remove\" onClick={() => removeAggregation(rule.id)}>\n                    <SolidIcon name=\"si-times\" />\n                  </button>\n                ) : (\n                  <span className=\"solid-aggregation-row-remove-spacer\" aria-hidden=\"true\" />\n                )}\n              </div>\n            );\n          })}\n        </div>\n      </section>\n\n      {/* FOOTER */}\n      <div className=\"solid-grouping-footer\">\n        <SolidButton size=\"sm\" variant=\"outline\" onClick={closeDialog}>\n          <SolidIcon name=\"si-times\" />\n          Cancel\n        </SolidButton>\n        <SolidButton size=\"sm\" variant=\"primary\" onClick={() => applyGrouping(groupingRules, aggregationRules)}>\n          <SolidIcon name=\"si-check\" />\n          Apply\n        </SolidButton>\n      </div>\n    </div>\n  );\n};\n\nexport default GroupingComponent;\n"]}