@solidxai/core-ui 0.1.7-beta.8 → 0.1.7-beta.9

package/dist/components/core/extension/solid-core/listOfValues/form/SolidLovTypeChangeFormEditWidget.js

@@ -0,0 +1,111 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { solidGet } from "../../../../../../http/solidHttp";
+import { SolidAutocomplete } from "../../../../../../components/shad-cn-ui/SolidAutocomplete";
+import { SolidInput } from "../../../../../../components/shad-cn-ui/SolidInput";
+import { SolidIcon } from "../../../../../../components/shad-cn-ui/SolidIcon";
+export var SolidLovTypeChangeFormEditWidget = function (_a) {
+    var _b, _c, _d;
+    var formik = _a.formik, fieldContext = _a.fieldContext;
+    var fieldMetadata = fieldContext.fieldMetadata;
+    var fieldLayoutInfo = fieldContext.field;
+    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
+    var fieldName = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.name;
+    var value = (_d = formik.values) === null || _d === void 0 ? void 0 : _d[fieldName];
+    // 🔹 UI State
+    var _e = useState([]), filteredOptions = _e[0], setFilteredOptions = _e[1];
+    var _f = useState(false), isCreating = _f[0], setIsCreating = _f[1];
+    var _g = useState(value || ""), inputValue = _g[0], setInputValue = _g[1];
+    // 🔹 Handle Autocommplete AJAX Fetching
+    var completeMethod = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+        var query, filterPart, res, extracted, err_1;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    _d.trys.push([0, 2, , 3]);
+                    query = event.query;
+                    filterPart = query
+                        ? "&filters[$and][0][$or][0][".concat(fieldName, "][$containsi]=%").concat(query, "%")
+                        : "";
+                    return [4 /*yield*/, solidGet("/api/list-of-values?&offset=0&limit=50&groupBy[0]=".concat(fieldName, "&aggregates[0]=id:count").concat(filterPart))];
+                case 1:
+                    res = _d.sent();
+                    extracted = ((_c = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.groupMeta) === null || _c === void 0 ? void 0 : _c.filter(function (item) { return item.groupValue != null; }).map(function (item) { return ({
+                        label: item.groupValue,
+                        value: item.groupValue
+                    }); })) || [];
+                    setFilteredOptions(extracted);
+                    return [3 /*break*/, 3];
+                case 2:
+                    err_1 = _d.sent();
+                    console.error("Failed to fetch autocomplete suggestions", err_1);
+                    setFilteredOptions([]);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); };
+    // 🔹 Handle Change from Autocomplete
+    var handleAutocompleteChange = function (e) {
+        var _a;
+        var selectedValue = typeof e.value === "object" ? (_a = e.value) === null || _a === void 0 ? void 0 : _a.value : e.value;
+        formik.setFieldValue(fieldName, selectedValue);
+    };
+    // 🔹 Handle Input Submit (blur or enter)
+    var handleCreate = function () {
+        if (!inputValue.trim())
+            return;
+        formik.setFieldValue(fieldName, inputValue);
+        setIsCreating(false);
+    };
+    return (_jsxs("div", { className: "solid-lov-type-change-widget w-full", children: [_jsxs("div", { className: "flex align-items-center justify-between  mb-2", children: [_jsx("label", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wider", children: fieldLabel }), _jsxs("button", { type: "button", onClick: function () {
+                            setIsCreating(!isCreating);
+                            if (!isCreating)
+                                setInputValue("");
+                        }, style: { color: "blue", background: "transparent", border: 0 }, children: [_jsx(SolidIcon, { name: isCreating ? "si-times" : "si-plus", size: 12 }), _jsx("span", { children: isCreating ? "choose existing" : "add custom" })] })] }), _jsx("div", { className: "relative", children: !isCreating ? (_jsx(SolidAutocomplete, { value: value, suggestions: filteredOptions, completeMethod: completeMethod, onChange: handleAutocompleteChange, dropdown: true, placeholder: "Select ".concat(fieldLabel), className: "w-full" })) : (_jsx("div", { className: "flex gap-2", children: _jsx(SolidInput, { type: "text", value: inputValue, autoFocus: true, placeholder: "Enter new type", className: "flex-1 h-9", onChange: function (e) { return setInputValue(e.target.value); }, onBlur: handleCreate, onKeyDown: function (e) {
+                            if (e.key === "Enter") {
+                                handleCreate();
+                            }
+                            if (e.key === "Escape") {
+                                setIsCreating(false);
+                            }
+                        } }) })) })] }));
+};
+//# sourceMappingURL=SolidLovTypeChangeFormEditWidget.js.map

package/dist/components/core/extension/solid-core/listOfValues/form/SolidLovTypeChangeFormEditWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidLovTypeChangeFormEditWidget.js","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/listOfValues/form/SolidLovTypeChangeFormEditWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../../types/solid-core\";\nimport { solidGet } from \"../../../../../../http/solidHttp\";\nimport { SolidAutocomplete } from \"../../../../../../components/shad-cn-ui/SolidAutocomplete\";\nimport { SolidInput } from \"../../../../../../components/shad-cn-ui/SolidInput\";\nimport { SolidIcon } from \"../../../../../../components/shad-cn-ui/SolidIcon\";\n\nexport const SolidLovTypeChangeFormEditWidget = ({\n    formik,\n    fieldContext\n}: SolidFormFieldWidgetProps) => {\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n\n    const fieldLabel =\n        fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const fieldName = fieldLayoutInfo?.attrs?.name;\n\n    const value = formik.values?.[fieldName];\n\n    // 🔹 UI State\n    const [filteredOptions, setFilteredOptions] = useState<any[]>([]);\n    const [isCreating, setIsCreating] = useState(false);\n    const [inputValue, setInputValue] = useState(value || \"\");\n\n    // 🔹 Handle Autocommplete AJAX Fetching\n    const completeMethod = async (event: { query: string }) => {\n        try {\n            const query = event.query;\n            // Build the URL following the user's provided filter pattern\n\n            const filterPart = query\n                ? `&filters[$and][0][$or][0][${fieldName}][$containsi]=%${query}%`\n                : \"\";\n\n            const res = await solidGet(\n                `/api/list-of-values?&offset=0&limit=50&groupBy[0]=${fieldName}&aggregates[0]=id:count${filterPart}`\n            );\n\n            const extracted =\n                res?.data?.data?.groupMeta\n                    ?.filter((item: any) => item.groupValue != null)\n                    .map((item: any) => ({\n                        label: item.groupValue,\n                        value: item.groupValue\n                    })) || [];\n\n            setFilteredOptions(extracted);\n        } catch (err) {\n            console.error(\"Failed to fetch autocomplete suggestions\", err);\n            setFilteredOptions([]);\n        }\n    };\n\n    // 🔹 Handle Change from Autocomplete\n    const handleAutocompleteChange = (e: { value: any }) => {\n        const selectedValue = typeof e.value === \"object\" ? e.value?.value : e.value;\n        formik.setFieldValue(fieldName, selectedValue);\n    };\n\n    // 🔹 Handle Input Submit (blur or enter)\n    const handleCreate = () => {\n        if (!inputValue.trim()) return;\n        formik.setFieldValue(fieldName, inputValue);\n        setIsCreating(false);\n    };\n\n    return (\n        <div className=\"solid-lov-type-change-widget w-full\">\n            <div className=\"flex align-items-center justify-between  mb-2\">\n                <label className=\"text-xs font-semibold text-muted-foreground uppercase tracking-wider\">\n                    {fieldLabel}\n                </label>\n                <button\n                    type=\"button\"\n                    onClick={() => {\n                        setIsCreating(!isCreating);\n                        if (!isCreating) setInputValue(\"\");\n                    }}\n                    style={{ color: \"blue\", background: \"transparent\", border: 0 }}\n                >\n                    <SolidIcon name={isCreating ? \"si-times\" : \"si-plus\"} size={12} />\n                    <span>{isCreating ? \"choose existing\" : \"add custom\"}</span>\n                </button>\n            </div>\n\n            <div className=\"relative\">\n                {!isCreating ? (\n                    <SolidAutocomplete\n                        value={value}\n                        suggestions={filteredOptions}\n                        completeMethod={completeMethod}\n                        onChange={handleAutocompleteChange}\n                        dropdown\n                        placeholder={`Select ${fieldLabel}`}\n                        className=\"w-full\"\n                    />\n                ) : (\n                    <div className=\"flex gap-2\">\n                        <SolidInput\n                            type=\"text\"\n                            value={inputValue}\n                            autoFocus\n                            placeholder=\"Enter new type\"\n                            className=\"flex-1 h-9\"\n                            onChange={(e) => setInputValue(e.target.value)}\n                            onBlur={handleCreate}\n                            onKeyDown={(e) => {\n                                if (e.key === \"Enter\") {\n                                    handleCreate();\n                                }\n                                if (e.key === \"Escape\") {\n                                    setIsCreating(false);\n                                }\n                            }}\n                        />\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};"]}

package/dist/components/core/extension/solid-core/listOfValues/form/SolidLovTypeChangeFormEditWidget.tsx

@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { SolidFormFieldWidgetProps } from "../../../../../../types/solid-core";
+import { solidGet } from "../../../../../../http/solidHttp";
+import { SolidAutocomplete } from "../../../../../../components/shad-cn-ui/SolidAutocomplete";
+import { SolidInput } from "../../../../../../components/shad-cn-ui/SolidInput";
+import { SolidIcon } from "../../../../../../components/shad-cn-ui/SolidIcon";
+
+export const SolidLovTypeChangeFormEditWidget = ({
+    formik,
+    fieldContext
+}: SolidFormFieldWidgetProps) => {
+    const fieldMetadata = fieldContext.fieldMetadata;
+    const fieldLayoutInfo = fieldContext.field;
+
+    const fieldLabel =
+        fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+    const fieldName = fieldLayoutInfo?.attrs?.name;
+
+    const value = formik.values?.[fieldName];
+
+    // 🔹 UI State
+    const [filteredOptions, setFilteredOptions] = useState<any[]>([]);
+    const [isCreating, setIsCreating] = useState(false);
+    const [inputValue, setInputValue] = useState(value || "");
+
+    // 🔹 Handle Autocommplete AJAX Fetching
+    const completeMethod = async (event: { query: string }) => {
+        try {
+            const query = event.query;
+            // Build the URL following the user's provided filter pattern
+
+            const filterPart = query
+                ? `&filters[$and][0][$or][0][${fieldName}][$containsi]=%${query}%`
+                : "";
+
+            const res = await solidGet(
+                `/api/list-of-values?&offset=0&limit=50&groupBy[0]=${fieldName}&aggregates[0]=id:count${filterPart}`
+            );
+
+            const extracted =
+                res?.data?.data?.groupMeta
+                    ?.filter((item: any) => item.groupValue != null)
+                    .map((item: any) => ({
+                        label: item.groupValue,
+                        value: item.groupValue
+                    })) || [];
+
+            setFilteredOptions(extracted);
+        } catch (err) {
+            console.error("Failed to fetch autocomplete suggestions", err);
+            setFilteredOptions([]);
+        }
+    };
+
+    // 🔹 Handle Change from Autocomplete
+    const handleAutocompleteChange = (e: { value: any }) => {
+        const selectedValue = typeof e.value === "object" ? e.value?.value : e.value;
+        formik.setFieldValue(fieldName, selectedValue);
+    };
+
+    // 🔹 Handle Input Submit (blur or enter)
+    const handleCreate = () => {
+        if (!inputValue.trim()) return;
+        formik.setFieldValue(fieldName, inputValue);
+        setIsCreating(false);
+    };
+
+    return (
+        <div className="solid-lov-type-change-widget w-full">
+            <div className="flex align-items-center justify-between  mb-2">
+                <label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                    {fieldLabel}
+                </label>
+                <button
+                    type="button"
+                    onClick={() => {
+                        setIsCreating(!isCreating);
+                        if (!isCreating) setInputValue("");
+                    }}
+                    style={{ color: "blue", background: "transparent", border: 0 }}
+                >
+                    <SolidIcon name={isCreating ? "si-times" : "si-plus"} size={12} />
+                    <span>{isCreating ? "choose existing" : "add custom"}</span>
+                </button>
+            </div>
+
+            <div className="relative">
+                {!isCreating ? (
+                    <SolidAutocomplete
+                        value={value}
+                        suggestions={filteredOptions}
+                        completeMethod={completeMethod}
+                        onChange={handleAutocompleteChange}
+                        dropdown
+                        placeholder={`Select ${fieldLabel}`}
+                        className="w-full"
+                    />
+                ) : (
+                    <div className="flex gap-2">
+                        <SolidInput
+                            type="text"
+                            value={inputValue}
+                            autoFocus
+                            placeholder="Enter new type"
+                            className="flex-1 h-9"
+                            onChange={(e) => setInputValue(e.target.value)}
+                            onBlur={handleCreate}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter") {
+                                    handleCreate();
+                                }
+                                if (e.key === "Escape") {
+                                    setIsCreating(false);
+                                }
+                            }}
+                        />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

package/dist/components/core/extension/solid-core/mqMessage/form/SolidMqMessageStageFormViewWIdget.d.ts

@@ -0,0 +1,3 @@
+import { SolidFormWidgetProps } from "../../../../../../types/solid-core";
+export declare const SolidMqMessageStageFormViewWIdget: ({ field, formData, viewMetadata, fieldsMetadata, formViewData }: SolidFormWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidMqMessageStageFormViewWIdget.d.ts.map

package/dist/components/core/extension/solid-core/mqMessage/form/SolidMqMessageStageFormViewWIdget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidMqMessageStageFormViewWIdget.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/mqMessage/form/SolidMqMessageStageFormViewWIdget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAG1E,eAAO,MAAM,iCAAiC,oEAM3C,oBAAoB,4CAWtB,CAAC"}

package/dist/components/core/extension/solid-core/mqMessage/form/SolidMqMessageStageFormViewWIdget.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MqMessageStageBadge } from "../ui/MqMessageStageBadge";
+export var SolidMqMessageStageFormViewWIdget = function (_a) {
+    var _b;
+    var field = _a.field, formData = _a.formData, viewMetadata = _a.viewMetadata, fieldsMetadata = _a.fieldsMetadata, formViewData = _a.formViewData;
+    var stageValue = (_b = formViewData === null || formViewData === void 0 ? void 0 : formViewData.data) === null || _b === void 0 ? void 0 : _b.stage;
+    return (_jsx("div", { className: "mt-2", children: stageValue &&
+            _jsx(MqMessageStageBadge, { stage: stageValue, compact: true }) }));
+};
+//# sourceMappingURL=SolidMqMessageStageFormViewWIdget.js.map

package/dist/components/core/extension/solid-core/mqMessage/form/SolidMqMessageStageFormViewWIdget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidMqMessageStageFormViewWIdget.js","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/mqMessage/form/SolidMqMessageStageFormViewWIdget.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,MAAM,CAAC,IAAM,iCAAiC,GAAG,UAAC,EAM3B;;QALnB,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,cAAc,oBAAA,EACd,YAAY,kBAAA;IAEZ,IAAM,UAAU,GAAG,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,0CAAE,KAAK,CAAC;IAG7C,OAAO,CACE,cAAK,SAAS,EAAC,MAAM,YACrB,UAAU;YACN,KAAC,mBAAmB,IAAC,KAAK,EAAE,UAAU,EAAE,OAAO,SAAG,GAEhD,CACd,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { SolidFormWidgetProps } from \"../../../../../../types/solid-core\";\nimport { MqMessageStageBadge } from \"../ui/MqMessageStageBadge\";\n\nexport const SolidMqMessageStageFormViewWIdget = ({\n    field,\n    formData,\n    viewMetadata,\n    fieldsMetadata,\n    formViewData\n}: SolidFormWidgetProps) => {\n    const stageValue = formViewData?.data?.stage;\n\n\n    return (\n             <div className=\"mt-2\">\n            {stageValue &&\n                 <MqMessageStageBadge stage={stageValue} compact />\n            }\n             </div>\n    );\n};"]}

package/dist/components/core/extension/solid-core/mqMessage/form/SolidMqMessageStageFormViewWIdget.tsx

@@ -0,0 +1,21 @@
+import { SolidFormWidgetProps } from "../../../../../../types/solid-core";
+import { MqMessageStageBadge } from "../ui/MqMessageStageBadge";
+
+export const SolidMqMessageStageFormViewWIdget = ({
+    field,
+    formData,
+    viewMetadata,
+    fieldsMetadata,
+    formViewData
+}: SolidFormWidgetProps) => {
+    const stageValue = formViewData?.data?.stage;
+
+
+    return (
+             <div className="mt-2">
+            {stageValue &&
+                 <MqMessageStageBadge stage={stageValue} compact />
+            }
+             </div>
+    );
+};

package/dist/components/core/extension/solid-core/mqMessage/form/mqMessageOnFormLoadHandler.d.ts

@@ -0,0 +1,8 @@
+import { LayoutNode } from "../../../../../../types/solid-core";
+declare const mqMessageOnFormLoadHandler: (event: any) => Promise<{
+    layoutChanged: boolean;
+    dataChanged: boolean;
+    newLayout: LayoutNode;
+}>;
+export default mqMessageOnFormLoadHandler;
+//# sourceMappingURL=mqMessageOnFormLoadHandler.d.ts.map

package/dist/components/core/extension/solid-core/mqMessage/form/mqMessageOnFormLoadHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mqMessageOnFormLoadHandler.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/mqMessage/form/mqMessageOnFormLoadHandler.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAEhE,QAAA,MAAM,0BAA0B,UAAiB,GAAG;;;;EAsBnD,CAAA;AACD,eAAe,0BAA0B,CAAC"}

package/dist/components/core/extension/solid-core/mqMessage/form/mqMessageOnFormLoadHandler.js

@@ -0,0 +1,62 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { SolidViewLayoutManager } from "../../../../../../components/core/common/SolidViewLayoutManager";
+var mqMessageOnFormLoadHandler = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+    var formViewLayout, layoutManager, customWidgetLayoutCode;
+    return __generator(this, function (_a) {
+        formViewLayout = event.formViewLayout;
+        layoutManager = new SolidViewLayoutManager(formViewLayout);
+        customWidgetLayoutCode = {
+            type: "custom",
+            attrs: {
+                name: "stagefield",
+                widget: "SolidMqMessageStageFormViewWIdget",
+                visible: true
+            },
+        };
+        if (!layoutManager.hasNode(customWidgetLayoutCode.attrs.name)) {
+            layoutManager.insertNodeBefore("messageType", customWidgetLayoutCode);
+        }
+        return [2 /*return*/, {
+                layoutChanged: true,
+                dataChanged: false,
+                newLayout: layoutManager.getLayout(),
+            }];
+    });
+}); };
+export default mqMessageOnFormLoadHandler;
+//# sourceMappingURL=mqMessageOnFormLoadHandler.js.map

package/dist/components/core/extension/solid-core/mqMessage/form/mqMessageOnFormLoadHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mqMessageOnFormLoadHandler.js","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/mqMessage/form/mqMessageOnFormLoadHandler.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,iEAAiE,CAAC;AAGzG,IAAM,0BAA0B,GAAG,UAAO,KAAU;;;QACxC,cAAc,GAAK,KAAK,eAAV,CAAW;QAC3B,aAAa,GAAG,IAAI,sBAAsB,CAAC,cAAc,CAAC,CAAC;QAE3D,sBAAsB,GAAe;YACvC,IAAI,EAAE,QAAQ;YACd,KAAK,EAAE;gBACH,IAAI,EAAE,YAAY;gBAClB,MAAM,EAAE,mCAAmC;gBAC3C,OAAO,EAAE,IAAI;aAChB;SACJ,CAAC;QAEF,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,sBAAsB,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE;YAC3D,aAAa,CAAC,gBAAgB,CAAC,aAAa,EAAE,sBAAsB,CAAC,CAAC;SACzE;QAED,sBAAO;gBACH,aAAa,EAAE,IAAI;gBACnB,WAAW,EAAE,KAAK;gBAClB,SAAS,EAAE,aAAa,CAAC,SAAS,EAAE;aACvC,EAAA;;KACJ,CAAA;AACD,eAAe,0BAA0B,CAAC","sourcesContent":["import { SolidViewLayoutManager } from \"../../../../../../components/core/common/SolidViewLayoutManager\";\nimport { LayoutNode } from \"../../../../../../types/solid-core\";\n\nconst mqMessageOnFormLoadHandler = async (event: any) => {\n    const { formViewLayout } = event;\n    const layoutManager = new SolidViewLayoutManager(formViewLayout);\n\n    const customWidgetLayoutCode: LayoutNode = {\n        type: \"custom\",\n        attrs: {\n            name: \"stagefield\",\n            widget: \"SolidMqMessageStageFormViewWIdget\",\n            visible :true\n        },\n    };\n\n    if (!layoutManager.hasNode(customWidgetLayoutCode.attrs.name)) {\n        layoutManager.insertNodeBefore(\"messageType\", customWidgetLayoutCode);\n    }\n\n    return {\n        layoutChanged: true,\n        dataChanged: false,\n        newLayout: layoutManager.getLayout(),\n    }\n}\nexport default mqMessageOnFormLoadHandler;\n"]}

package/dist/components/core/extension/solid-core/mqMessage/form/mqMessageOnFormLoadHandler.tsx

@@ -0,0 +1,27 @@
+import { SolidViewLayoutManager } from "../../../../../../components/core/common/SolidViewLayoutManager";
+import { LayoutNode } from "../../../../../../types/solid-core";
+
+const mqMessageOnFormLoadHandler = async (event: any) => {
+    const { formViewLayout } = event;
+    const layoutManager = new SolidViewLayoutManager(formViewLayout);
+
+    const customWidgetLayoutCode: LayoutNode = {
+        type: "custom",
+        attrs: {
+            name: "stagefield",
+            widget: "SolidMqMessageStageFormViewWIdget",
+            visible :true
+        },
+    };
+
+    if (!layoutManager.hasNode(customWidgetLayoutCode.attrs.name)) {
+        layoutManager.insertNodeBefore("messageType", customWidgetLayoutCode);
+    }
+
+    return {
+        layoutChanged: true,
+        dataChanged: false,
+        newLayout: layoutManager.getLayout(),
+    }
+}
+export default mqMessageOnFormLoadHandler;

package/dist/components/core/extension/solid-core/mqMessage/list/SolidMqMessageStageListViewWidget.d.ts

@@ -0,0 +1,3 @@
+import { SolidListFieldWidgetProps } from "../../../../../../types/solid-core";
+export declare const SolidMqMessageStageListViewWidget: ({ rowData, fieldMetadata, }: SolidListFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidMqMessageStageListViewWidget.d.ts.map

package/dist/components/core/extension/solid-core/mqMessage/list/SolidMqMessageStageListViewWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidMqMessageStageListViewWidget.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/mqMessage/list/SolidMqMessageStageListViewWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAC;AAG/E,eAAO,MAAM,iCAAiC,gCAG3C,yBAAyB,4CAQ3B,CAAC"}

package/dist/components/core/extension/solid-core/mqMessage/list/SolidMqMessageStageListViewWidget.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MqMessageStageBadge } from "../ui/MqMessageStageBadge";
+export var SolidMqMessageStageListViewWidget = function (_a) {
+    var rowData = _a.rowData, fieldMetadata = _a.fieldMetadata;
+    var value = (fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.name) ? rowData === null || rowData === void 0 ? void 0 : rowData[fieldMetadata.name] : "";
+    return (_jsx("div", { className: "mt-2", children: _jsx(MqMessageStageBadge, { stage: value, compact: true }) }));
+};
+//# sourceMappingURL=SolidMqMessageStageListViewWidget.js.map

package/dist/components/core/extension/solid-core/mqMessage/list/SolidMqMessageStageListViewWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidMqMessageStageListViewWidget.js","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/mqMessage/list/SolidMqMessageStageListViewWidget.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAEhE,MAAM,CAAC,IAAM,iCAAiC,GAAG,UAAC,EAGtB;QAFxB,OAAO,aAAA,EACP,aAAa,mBAAA;IAEb,IAAM,KAAK,GAAG,CAAA,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,IAAI,EAAC,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEvE,OAAO,CACH,cAAK,SAAS,EAAC,MAAM,YACjB,KAAC,mBAAmB,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,SAAG,GAC3C,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import { SolidListFieldWidgetProps } from \"../../../../../../types/solid-core\";\nimport { MqMessageStageBadge } from \"../ui/MqMessageStageBadge\";\n\nexport const SolidMqMessageStageListViewWidget = ({\n    rowData,\n    fieldMetadata,\n}: SolidListFieldWidgetProps) => {\n    const value = fieldMetadata?.name ? rowData?.[fieldMetadata.name] : \"\";\n\n    return (\n        <div className=\"mt-2\">\n            <MqMessageStageBadge stage={value} compact />\n        </div>\n    );\n};\n"]}

package/dist/components/core/extension/solid-core/mqMessage/list/SolidMqMessageStageListViewWidget.tsx

@@ -0,0 +1,15 @@
+import { SolidListFieldWidgetProps } from "../../../../../../types/solid-core";
+import { MqMessageStageBadge } from "../ui/MqMessageStageBadge";
+
+export const SolidMqMessageStageListViewWidget = ({
+    rowData,
+    fieldMetadata,
+}: SolidListFieldWidgetProps) => {
+    const value = fieldMetadata?.name ? rowData?.[fieldMetadata.name] : "";
+
+    return (
+        <div className="mt-2">
+            <MqMessageStageBadge stage={value} compact />
+        </div>
+    );
+};

package/dist/components/core/extension/solid-core/mqMessage/list/SolidMqMessagesSummarizeListHeaderAction.d.ts

@@ -0,0 +1,3 @@
+import { SolidListFieldWidgetProps } from "../../../../../../types/solid-core";
+export declare const SolidMqMessagesSummarizeListHeaderAction: ({ solidListViewMetaData }: SolidListFieldWidgetProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SolidMqMessagesSummarizeListHeaderAction.d.ts.map

package/dist/components/core/extension/solid-core/mqMessage/list/SolidMqMessagesSummarizeListHeaderAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidMqMessagesSummarizeListHeaderAction.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/core/extension/solid-core/mqMessage/list/SolidMqMessagesSummarizeListHeaderAction.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oCAAoC,CAAC;AAyG/E,eAAO,MAAM,wCAAwC,8BAElD,yBAAyB,4CA6E3B,CAAC"}

package/dist/components/core/extension/solid-core/mqMessage/list/SolidMqMessagesSummarizeListHeaderAction.js

@@ -0,0 +1,158 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { solidGet } from "../../../../../../http/solidHttp";
+import { SolidButton } from "../../../../../shad-cn-ui";
+import { useDispatch } from "react-redux";
+import { closePopup } from "../../../../../../redux/features/popupSlice";
+import { X } from "lucide-react";
+// Chart.js imports
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Tooltip, Legend } from "chart.js";
+import { Bar } from "react-chartjs-2";
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+var CHART_COLORS = [
+    "#3b82f6",
+    "#22c55e",
+    "#f59e0b",
+    "#ef4444",
+    "#8b5cf6",
+    "#14b8a6"
+];
+var getColor = function (index) { return CHART_COLORS[index % CHART_COLORS.length]; };
+// =========================
+// Pivot Transform
+// =========================
+var transformToPivot = function (groupMeta) {
+    var pivot = {};
+    var stageSet = new Set();
+    groupMeta.forEach(function (item) {
+        var groupValue = item.groupValue || "";
+        var count = item.id_count || 0;
+        var parts = groupValue.split("_");
+        var stage = parts.pop();
+        var broker = parts.join("_");
+        if (!broker || !stage)
+            return;
+        stageSet.add(stage);
+        if (!pivot[broker])
+            pivot[broker] = {};
+        pivot[broker][stage] = count;
+    });
+    var stages = Array.from(stageSet);
+    Object.keys(pivot).forEach(function (broker) {
+        stages.forEach(function (stage) {
+            if (pivot[broker][stage] === undefined) {
+                pivot[broker][stage] = 0;
+            }
+        });
+    });
+    return { pivot: pivot, stages: stages };
+};
+// =========================
+// Chart Component
+// =========================
+var PivotChart = function (_a) {
+    var data = _a.data;
+    var pivot = data.pivot, stages = data.stages;
+    var queues = Object.keys(pivot).sort(function (a, b) {
+        var sum = function (q) {
+            return stages.reduce(function (acc, s) { var _a; return acc + (((_a = pivot[q]) === null || _a === void 0 ? void 0 : _a[s]) || 0); }, 0);
+        };
+        return sum(b) - sum(a);
+    });
+    var chartData = {
+        labels: queues,
+        datasets: stages.map(function (stage, index) { return ({
+            label: stage,
+            data: queues.map(function (q) { var _a; return ((_a = pivot[q]) === null || _a === void 0 ? void 0 : _a[stage]) || 0; }),
+            backgroundColor: getColor(index)
+        }); })
+    };
+    var options = {
+        responsive: true,
+        plugins: { legend: { position: "top" } },
+        scales: {
+            x: { stacked: true },
+            y: { stacked: true, beginAtZero: true }
+        }
+    };
+    return _jsx(Bar, { data: chartData, options: options });
+};
+// =========================
+// Widget
+// =========================
+export var SolidMqMessagesSummarizeListHeaderAction = function (_a) {
+    var solidListViewMetaData = _a.solidListViewMetaData;
+    var dispatch = useDispatch();
+    var _b = useState(false), loading = _b[0], setLoading = _b[1];
+    var _c = useState(null), pivotData = _c[0], setPivotData = _c[1];
+    var handleContinue = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var selectedRows, filters, qs, res;
+        var _a, _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    setLoading(true);
+                    selectedRows = (solidListViewMetaData === null || solidListViewMetaData === void 0 ? void 0 : solidListViewMetaData.selectedRows) || [];
+                    filters = selectedRows
+                        .map(function (row, index) {
+                        return "filters[$and][0][$or][".concat(index, "][id][$eq]=").concat(row.id);
+                    })
+                        .join("&");
+                    qs = [
+                        "offset=0",
+                        "limit=100",
+                        "groupBy[0]=messageBroker",
+                        "groupBy[1]=stage",
+                        "aggregates[0]=id:count",
+                        filters || null
+                    ]
+                        .filter(Boolean)
+                        .join("&");
+                    return [4 /*yield*/, solidGet("/mq-message?".concat(qs))];
+                case 1:
+                    res = _d.sent();
+                    setPivotData(transformToPivot((_c = (_b = (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.groupMeta) !== null && _c !== void 0 ? _c : []));
+                    setLoading(false);
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    return (_jsxs("div", { children: [_jsxs("div", { className: "solid-filter-dialog-head", children: [_jsx("div", { children: _jsx("h3", { className: "solid-filter-dialog-title", children: "MQ Message Summary" }) }), _jsx("button", { className: "solid-radix-dialog-close", "aria-label": "Close", onClick: function () { return dispatch(closePopup()); }, children: _jsx(X, { size: 16 }) })] }), _jsx("div", { className: "solid-filter-dialog-sep" }), _jsxs("div", { className: "solid-filter-dialog-body", children: [_jsxs("div", { style: { textAlign: "center", marginBottom: "10px", marginTop: "10px" }, children: [_jsxs("p", { style: { textAlign: "center", fontSize: "13px", marginBottom: "0" }, children: ["You can summarize based on selected records or the full dataset.", _jsx("br", {}), "Click ", _jsx("strong", { children: "Continue" }), " to load the summary."] }), _jsx(SolidButton, { size: "small", loading: loading, onClick: handleContinue, children: "Continue" })] }), pivotData && (_jsx("div", { style: { marginTop: "20px" }, children: _jsx(PivotChart, { data: pivotData }) }))] })] }));
+};
+//# sourceMappingURL=SolidMqMessagesSummarizeListHeaderAction.js.map