@solidxai/core-ui 0.1.7-beta.0 → 0.1.7-beta.10

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"]}

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

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

package/dist/components/core/common/SolidAccountSettings/SolidAccountSettings.d.ts

@@ -1,2 +1,2 @@
-export declare const SolidAccountSettings: ({ showProfileSettingsDialog, setShowProfileSettingsDialog }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const SolidAccountSettings: ({ showProfileSettingsDialog, setShowProfileSettingsDialog }: any) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=SolidAccountSettings.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SolidAccountSettings.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidAccountSettings/SolidAccountSettings.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,oBAAoB,gEAAiE,GAAG,4CAqFpG,CAAA"}
+{"version":3,"file":"SolidAccountSettings.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidAccountSettings/SolidAccountSettings.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,oBAAoB,gEAAiE,GAAG,mDA0EpG,CAAC"}