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

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

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

@@ -1,42 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Dialog } from "primereact/dialog";
 import { useEffect, useMemo, useState } from "react";
 import { SolidPersonalInfo } from "./SolidPersonalInfo";
 import { SolidChangePassword } from "./SolidChangePassword";
 import { SolidVersionInfo } from "./SolidVersionInfo";
-import styles from './SolidAccountSettings.module.css';
+import styles from "./SolidAccountSettings.module.css";
 import { useLazyGetSolidSettingsQuery } from "../../../../redux/api/solidSettingsApi";
 export var SolidAccountSettings = function (_a) {
     var showProfileSettingsDialog = _a.showProfileSettingsDialog, setShowProfileSettingsDialog = _a.setShowProfileSettingsDialog;
-    var _b = useState({ key: "personal_info", label: "Persnoal Info" }), setting = _b[0], setSetting = _b[1];
+    var _b = useState("personal_info"), settingKey = _b[0], setSettingKey = _b[1];
     var _c = useLazyGetSolidSettingsQuery(), trigger = _c[0], solidSettingsData = _c[1].data;
     useEffect(function () {
-        trigger(""); // Fetch settings on mount
-    }, []);
+        trigger("");
+    }, [trigger]);
     var settings = [
-        {
-            label: "Persnoal Info",
-            key: "personal_info",
-            icon: "pi pi-user-edit"
-        },
-        // {
-        //     label: "Notification",
-        //     key: "notifications",
-        //     icon: "pi pi-bell"
-        // },
-        {
-            label: "Change Password",
-            key: "change_password",
-            icon: "pi pi-key"
-        },
-        {
-            label: "About",
-            key: "about",
-            icon: "pi pi-info-circle"
-        },
+        { label: "Personal Info", key: "personal_info" },
+        { label: "Change Password", key: "change_password" },
+        { label: "About", key: "about" },
     ];
     var renderSettingComponent = useMemo(function () {
-        switch (setting.key) {
+        switch (settingKey) {
             case "personal_info":
                 return _jsx(SolidPersonalInfo, {});
             case "change_password":
@@ -46,11 +28,9 @@ export var SolidAccountSettings = function (_a) {
             default:
                 return null;
         }
-    }, [setting.key, solidSettingsData]);
-    return (_jsx(Dialog, { header: _jsx("h5", { className: 'm-0 font-bold', children: "Account Settings" }), headerClassName: "px-4 py-3 secondary-border-bottom", contentClassName: "p-0", visible: showProfileSettingsDialog, className: "solid-account-setting-main", style: { width: '60vw' }, onHide: function () {
-            if (!showProfileSettingsDialog)
-                return;
-            setShowProfileSettingsDialog(false);
-        }, draggable: false, children: _jsxs("div", { className: "grid m-0", children: [_jsx("div", { className: "col-2 md:col-3 p-3 ".concat(styles.SolidSettingTabWrapper), children: _jsx("div", { className: "flex flex-column gap-1", children: settings.map(function (option) { return (_jsxs("div", { className: "w-full flex align-items-center gap-2 text-start ".concat(styles.SolidSettingTab, " ").concat(option.key === setting.key ? styles.SolidActiveSetting : styles.SolidDeActiveSetting), onClick: function () { return setSetting(option); }, children: [_jsx("span", { className: option.icon }), _jsx("span", { className: "hidden sm:inline", children: option.label })] }, option.key)); }) }) }), _jsx("div", { className: "col-9 py-3 px-4 ".concat(styles.SolidAccountSettingFormWrapper), children: renderSettingComponent })] }) }));
+    }, [settingKey, solidSettingsData]);
+    if (!showProfileSettingsDialog)
+        return null;
+    return (_jsx("div", { className: styles.backdrop, role: "presentation", onClick: function () { return setShowProfileSettingsDialog(false); }, children: _jsxs("section", { className: styles.modal, role: "dialog", "aria-modal": "true", "aria-labelledby": "solid-account-settings-title", onClick: function (event) { return event.stopPropagation(); }, children: [_jsxs("header", { className: styles.header, children: [_jsxs("div", { children: [_jsx("h2", { id: "solid-account-settings-title", className: styles.title, children: "Account Settings" }), _jsx("p", { className: styles.subtitle, children: "Manage your profile and security settings." })] }), _jsx("button", { type: "button", className: styles.closeButton, onClick: function () { return setShowProfileSettingsDialog(false); }, "aria-label": "Close account settings", children: "\u00D7" })] }), _jsx("div", { className: styles.tabsLine, role: "tablist", "aria-label": "Account setting sections", children: settings.map(function (option) { return (_jsx("button", { type: "button", role: "tab", "aria-selected": option.key === settingKey, className: "".concat(styles.tabTrigger, " ").concat(option.key === settingKey ? styles.tabActive : ""), onClick: function () { return setSettingKey(option.key); }, children: option.label }, option.key)); }) }), _jsx("div", { className: styles.formWrapper, children: renderSettingComponent })] }) }));
 };
 //# sourceMappingURL=SolidAccountSettings.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SolidAccountSettings.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidAccountSettings/SolidAccountSettings.tsx"],"names":[],"mappings":"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","sourcesContent":["\n\nimport { Dialog } from \"primereact/dialog\";\nimport { useEffect, useMemo, useState } from \"react\";\nimport { SolidPersonalInfo } from \"./SolidPersonalInfo\";\nimport { SolidChangePassword } from \"./SolidChangePassword\";\nimport { SolidVersionInfo } from \"./SolidVersionInfo\";\nimport styles from './SolidAccountSettings.module.css'\nimport { useSelector } from \"react-redux\";\nimport { useLazyGetSolidSettingsQuery } from \"../../../../redux/api/solidSettingsApi\";\n\nexport const SolidAccountSettings = ({ showProfileSettingsDialog, setShowProfileSettingsDialog }: any) => {\n    const [setting, setSetting] = useState({ key: \"personal_info\", label: \"Persnoal Info\" });\n\n    const [trigger, { data: solidSettingsData }] = useLazyGetSolidSettingsQuery();\n    useEffect(() => {\n        trigger(\"\") // Fetch settings on mount\n    }, [])\n\n    const settings = [\n        {\n            label: \"Persnoal Info\",\n            key: \"personal_info\",\n            icon: \"pi pi-user-edit\"\n        },\n        // {\n        //     label: \"Notification\",\n        //     key: \"notifications\",\n        //     icon: \"pi pi-bell\"\n        // },\n        {\n            label: \"Change Password\",\n            key: \"change_password\",\n            icon: \"pi pi-key\"\n        },\n        {\n            label: \"About\",\n            key: \"about\",\n            icon: \"pi pi-info-circle\"\n        },\n    ]\n\n    const renderSettingComponent = useMemo(() => {\n        switch (setting.key) {\n            case \"personal_info\":\n                return <SolidPersonalInfo />;\n            case \"change_password\":\n                return <SolidChangePassword solidSettingsData={solidSettingsData} />;\n            case \"about\":\n                return <SolidVersionInfo />;\n            default:\n                return null;\n        }\n    }, [setting.key, solidSettingsData]);\n\n    return (\n        <Dialog\n            header={<h5 className='m-0 font-bold'>Account Settings</h5>}\n            headerClassName=\"px-4 py-3 secondary-border-bottom\"\n            contentClassName=\"p-0\"\n            visible={showProfileSettingsDialog}\n            className=\"solid-account-setting-main\"\n            style={{ width: '60vw' }}\n            onHide={() => {\n                if (!showProfileSettingsDialog) return;\n                setShowProfileSettingsDialog(false);\n            }}\n            draggable={false}\n        >\n            <div className=\"grid m-0\">\n                <div className={`col-2 md:col-3 p-3 ${styles.SolidSettingTabWrapper}`}>\n                    <div className=\"flex flex-column gap-1\">\n                        {settings.map((option) => (\n                            <div\n                                key={option.key}\n                                className={`w-full flex align-items-center gap-2 text-start ${styles.SolidSettingTab} ${option.key === setting.key ? styles.SolidActiveSetting : styles.SolidDeActiveSetting}`}\n                                onClick={() => setSetting(option)}\n                            >\n                                <span className={option.icon}></span>\n                                <span className=\"hidden sm:inline\">{option.label}</span>\n                            </div>\n                        ))}\n                    </div>\n                </div>\n                <div className={`col-9 py-3 px-4 ${styles.SolidAccountSettingFormWrapper}`}>\n                    {renderSettingComponent}\n                    {/* <div className=\"p-3 secondary-border-bottom\">\n                        <h5 className=\"m-0\"></h5>\n                    </div>\n                    <div className=\"py-3 px-4 h-full\">\n                        {renderSettingComponent()}\n                    </div> */}\n                </div>\n            </div>\n        </Dialog>\n    )\n}"]}
+{"version":3,"file":"SolidAccountSettings.js","sourceRoot":"","sources":["../../../../../src/components/core/common/SolidAccountSettings/SolidAccountSettings.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,MAAM,MAAM,mCAAmC,CAAC;AACvD,OAAO,EAAE,4BAA4B,EAAE,MAAM,wCAAwC,CAAC;AAEtF,MAAM,CAAC,IAAM,oBAAoB,GAAG,UAAC,EAAgE;QAA9D,yBAAyB,+BAAA,EAAE,4BAA4B,kCAAA;IACtF,IAAA,KAA8B,QAAQ,CAAC,eAAe,CAAC,EAAtD,UAAU,QAAA,EAAE,aAAa,QAA6B,CAAC;IAExD,IAAA,KAAyC,4BAA4B,EAAE,EAAtE,OAAO,QAAA,EAAU,iBAAiB,aAAoC,CAAC;IAC9E,SAAS,CAAC;QACR,OAAO,CAAC,EAAE,CAAC,CAAC;IACd,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,IAAM,QAAQ,GAAG;QACf,EAAE,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,eAAe,EAAE;QAChD,EAAE,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,iBAAiB,EAAE;QACpD,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,EAAE;KACjC,CAAC;IAEF,IAAM,sBAAsB,GAAG,OAAO,CAAC;QACrC,QAAQ,UAAU,EAAE;YAClB,KAAK,eAAe;gBAClB,OAAO,KAAC,iBAAiB,KAAG,CAAC;YAC/B,KAAK,iBAAiB;gBACpB,OAAO,KAAC,mBAAmB,IAAC,iBAAiB,EAAE,iBAAiB,GAAI,CAAC;YACvE,KAAK,OAAO;gBACV,OAAO,KAAC,gBAAgB,KAAG,CAAC;YAC9B;gBACE,OAAO,IAAI,CAAC;SACf;IACH,CAAC,EAAE,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAEpC,IAAI,CAAC,yBAAyB;QAAE,OAAO,IAAI,CAAC;IAE5C,OAAO,CACL,cAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAC,cAAc,EAAC,OAAO,EAAE,cAAM,OAAA,4BAA4B,CAAC,KAAK,CAAC,EAAnC,CAAmC,YACrG,mBACE,SAAS,EAAE,MAAM,CAAC,KAAK,EACvB,IAAI,EAAC,QAAQ,gBACF,MAAM,qBACD,8BAA8B,EAC9C,OAAO,EAAE,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,eAAe,EAAE,EAAvB,CAAuB,aAE3C,kBAAQ,SAAS,EAAE,MAAM,CAAC,MAAM,aAC9B,0BACE,aAAI,EAAE,EAAC,8BAA8B,EAAC,SAAS,EAAE,MAAM,CAAC,KAAK,iCAExD,EACL,YAAG,SAAS,EAAE,MAAM,CAAC,QAAQ,2DAAgD,IACzE,EACN,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,MAAM,CAAC,WAAW,EAC7B,OAAO,EAAE,cAAM,OAAA,4BAA4B,CAAC,KAAK,CAAC,EAAnC,CAAmC,gBACvC,wBAAwB,uBAG5B,IACF,EAET,cAAK,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,IAAI,EAAC,SAAS,gBAAY,0BAA0B,YAClF,QAAQ,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,CACxB,iBAEE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,MAAM,CAAC,GAAG,KAAK,UAAU,EACxC,SAAS,EAAE,UAAG,MAAM,CAAC,UAAU,cAAI,MAAM,CAAC,GAAG,KAAK,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAE,EACtF,OAAO,EAAE,cAAM,OAAA,aAAa,CAAC,MAAM,CAAC,GAAG,CAAC,EAAzB,CAAyB,YAEvC,MAAM,CAAC,KAAK,IAPR,MAAM,CAAC,GAAG,CAQR,CACV,EAXyB,CAWzB,CAAC,GACE,EAEN,cAAK,SAAS,EAAE,MAAM,CAAC,WAAW,YAAG,sBAAsB,GAAO,IAC1D,GACN,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { SolidPersonalInfo } from \"./SolidPersonalInfo\";\nimport { SolidChangePassword } from \"./SolidChangePassword\";\nimport { SolidVersionInfo } from \"./SolidVersionInfo\";\nimport styles from \"./SolidAccountSettings.module.css\";\nimport { useLazyGetSolidSettingsQuery } from \"../../../../redux/api/solidSettingsApi\";\n\nexport const SolidAccountSettings = ({ showProfileSettingsDialog, setShowProfileSettingsDialog }: any) => {\n  const [settingKey, setSettingKey] = useState(\"personal_info\");\n\n  const [trigger, { data: solidSettingsData }] = useLazyGetSolidSettingsQuery();\n  useEffect(() => {\n    trigger(\"\");\n  }, [trigger]);\n\n  const settings = [\n    { label: \"Personal Info\", key: \"personal_info\" },\n    { label: \"Change Password\", key: \"change_password\" },\n    { label: \"About\", key: \"about\" },\n  ];\n\n  const renderSettingComponent = useMemo(() => {\n    switch (settingKey) {\n      case \"personal_info\":\n        return <SolidPersonalInfo />;\n      case \"change_password\":\n        return <SolidChangePassword solidSettingsData={solidSettingsData} />;\n      case \"about\":\n        return <SolidVersionInfo />;\n      default:\n        return null;\n    }\n  }, [settingKey, solidSettingsData]);\n\n  if (!showProfileSettingsDialog) return null;\n\n  return (\n    <div className={styles.backdrop} role=\"presentation\" onClick={() => setShowProfileSettingsDialog(false)}>\n      <section\n        className={styles.modal}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby=\"solid-account-settings-title\"\n        onClick={(event) => event.stopPropagation()}\n      >\n        <header className={styles.header}>\n          <div>\n            <h2 id=\"solid-account-settings-title\" className={styles.title}>\n              Account Settings\n            </h2>\n            <p className={styles.subtitle}>Manage your profile and security settings.</p>\n          </div>\n          <button\n            type=\"button\"\n            className={styles.closeButton}\n            onClick={() => setShowProfileSettingsDialog(false)}\n            aria-label=\"Close account settings\"\n          >\n            ×\n          </button>\n        </header>\n\n        <div className={styles.tabsLine} role=\"tablist\" aria-label=\"Account setting sections\">\n          {settings.map((option) => (\n            <button\n              key={option.key}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={option.key === settingKey}\n              className={`${styles.tabTrigger} ${option.key === settingKey ? styles.tabActive : \"\"}`}\n              onClick={() => setSettingKey(option.key)}\n            >\n              {option.label}\n            </button>\n          ))}\n        </div>\n\n        <div className={styles.formWrapper}>{renderSettingComponent}</div>\n      </section>\n    </div>\n  );\n};\n"]}