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

package/dist/components/core/extension/solid-core/mqMessage/kanban/MqMessageKanbanCardWidget.tsx

@@ -0,0 +1,193 @@
+import { SolidKanbanCardWidgetProps } from "../../../../../../types/solid-core";
+
+const STAGE_TONES: Record<string, Record<string, string>> = {
+  started: {
+    accent: "#4f46e5",
+    accentSoft: "rgba(79, 70, 229, 0.10)",
+    border: "rgba(79, 70, 229, 0.18)",
+    chipBg: "rgba(79, 70, 229, 0.08)",
+    chipText: "#4f46e5",
+    avatarBg: "rgba(79, 70, 229, 0.18)",
+  },
+  pending: {
+    accent: "#d97706",
+    accentSoft: "rgba(217, 119, 6, 0.10)",
+    border: "rgba(217, 119, 6, 0.18)",
+    chipBg: "rgba(217, 119, 6, 0.10)",
+    chipText: "#b45309",
+    avatarBg: "rgba(217, 119, 6, 0.18)",
+  },
+  succeeded: {
+    accent: "#059669",
+    accentSoft: "rgba(5, 150, 105, 0.10)",
+    border: "rgba(5, 150, 105, 0.18)",
+    chipBg: "rgba(5, 150, 105, 0.10)",
+    chipText: "#047857",
+    avatarBg: "rgba(5, 150, 105, 0.16)",
+  },
+  failed: {
+    accent: "#dc2626",
+    accentSoft: "rgba(220, 38, 38, 0.10)",
+    border: "rgba(220, 38, 38, 0.18)",
+    chipBg: "rgba(220, 38, 38, 0.10)",
+    chipText: "#b91c1c",
+    avatarBg: "rgba(220, 38, 38, 0.16)",
+  },
+  default: {
+    accent: "#64748b",
+    accentSoft: "rgba(100, 116, 139, 0.08)",
+    border: "rgba(100, 116, 139, 0.16)",
+    chipBg: "rgba(100, 116, 139, 0.08)",
+    chipText: "#475569",
+    avatarBg: "rgba(100, 116, 139, 0.14)",
+  },
+};
+
+const renderText = (value: any, fallback = "--") => {
+  if (value === null || value === undefined || value === "") {
+    return fallback;
+  }
+
+  return String(value);
+};
+
+const formatDate = (value: any) => {
+  if (!value) return "Not set";
+
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return "Not set";
+
+  return new Intl.DateTimeFormat("en-GB", {
+    day: "2-digit",
+    month: "short",
+    year: "2-digit",
+  }).format(date);
+};
+
+const formatDuration = (value: any) => {
+  if (value === null || value === undefined || value === "") return "--";
+
+  const milliseconds = Number(value);
+  if (Number.isNaN(milliseconds)) return renderText(value);
+  if (milliseconds < 1000) return `${milliseconds} ms`;
+  if (milliseconds < 60_000) {
+    const seconds = milliseconds / 1000;
+    return `${seconds >= 10 ? Math.round(seconds) : seconds.toFixed(1)} s`;
+  }
+  if (milliseconds < 3_600_000) {
+    return `${Math.round(milliseconds / 60_000)} min`;
+  }
+
+  return `${(milliseconds / 3_600_000).toFixed(1)} h`;
+};
+
+const getInitials = (...values: Array<any>) => {
+  const source = values.find((value) => value && String(value).trim().length > 0);
+  if (!source) return "MQ";
+
+  return String(source)
+    .trim()
+    .split(/[\s_-]+/)
+    .slice(0, 2)
+    .map((part) => part.charAt(0).toUpperCase())
+    .join("") || "MQ";
+};
+
+const getTone = (stage: any) => {
+  const key = String(stage || "").toLowerCase();
+  return STAGE_TONES[key] || STAGE_TONES.default;
+};
+
+const truncate = (value: any, maxLength: number) => {
+  const text = renderText(value, "");
+  if (!text || text.length <= maxLength) return text || "--";
+  return `${text.slice(0, maxLength - 1)}...`;
+};
+
+export default function MqMessageKanbanCardWidget({
+  rowData,
+}: SolidKanbanCardWidgetProps) {
+  const tone = getTone(rowData?.stage);
+  const chipLabel = renderText(rowData?.messageType, "Message");
+  const brokerLabel = renderText(rowData?.messageBroker, "Unknown broker");
+  const retryCount = rowData?.retryCount ?? 0;
+  const retryInterval = rowData?.retryInterval ?? 0;
+  const retryLabel = retryCount > 0 ? `${retryCount} x / ${retryInterval} ms` : "No retries";
+  const parentEntity = renderText(rowData?.parentEntity, "Root");
+  const errorPreview = truncate(rowData?.error, 96);
+  const hasError = Boolean(rowData?.error && String(rowData.error).trim());
+  const cardStyle = {
+    ["--mq-card-accent" as any]: tone.accent,
+    ["--mq-card-accent-soft" as any]: tone.accentSoft,
+    ["--mq-card-border" as any]: tone.border,
+    ["--mq-card-chip-bg" as any]: tone.chipBg,
+    ["--mq-card-chip-text" as any]: tone.chipText,
+    ["--mq-card-avatar-bg" as any]: tone.avatarBg,
+  };
+
+  return (
+    <div className="mq-message-kanban-card" style={cardStyle}>
+      <div className="mq-message-kanban-card__accent" />
+
+      <div className="mq-message-kanban-card__eyebrow">
+        <span className="mq-message-kanban-card__chip">{chipLabel}</span>
+        <span className="mq-message-kanban-card__record-id">#{renderText(rowData?.id)}</span>
+      </div>
+
+      <div className="mq-message-kanban-card__title" title={renderText(rowData?.messageId)}>
+        {renderText(rowData?.messageId, "Message without identifier")}
+      </div>
+
+      <div className="mq-message-kanban-card__subtitle" title={brokerLabel}>
+        {brokerLabel}
+      </div>
+
+      <div className="mq-message-kanban-card__metrics">
+        <div className="mq-message-kanban-card__metric">
+          <div className="mq-message-kanban-card__metric-label">Retry</div>
+          <div className="mq-message-kanban-card__metric-value">{retryLabel}</div>
+        </div>
+        <div className="mq-message-kanban-card__metric">
+          <div className="mq-message-kanban-card__metric-label">Elapsed</div>
+          <div className="mq-message-kanban-card__metric-value">{formatDuration(rowData?.elapsedMillis)}</div>
+        </div>
+        <div className="mq-message-kanban-card__metric">
+          <div className="mq-message-kanban-card__metric-label">Parent</div>
+          <div className="mq-message-kanban-card__metric-value" title={parentEntity}>
+            {parentEntity}
+          </div>
+        </div>
+        <div className="mq-message-kanban-card__metric">
+          <div className="mq-message-kanban-card__metric-label">Broker</div>
+          <div className="mq-message-kanban-card__metric-value" title={brokerLabel}>
+            {brokerLabel}
+          </div>
+        </div>
+      </div>
+
+      <div className="mq-message-kanban-card__footer">
+        <div className="mq-message-kanban-card__timeline">
+          <div className="mq-message-kanban-card__timeline-item">
+            <span className="mq-message-kanban-card__timeline-label">Started</span>
+            <span className="mq-message-kanban-card__timeline-value">{formatDate(rowData?.startedAt)}</span>
+          </div>
+          <div className="mq-message-kanban-card__timeline-item">
+            <span className="mq-message-kanban-card__timeline-label">Finished</span>
+            <span className="mq-message-kanban-card__timeline-value">{formatDate(rowData?.finishedAt)}</span>
+          </div>
+        </div>
+
+        <div className="mq-message-kanban-card__avatar" title={parentEntity}>
+          {getInitials(rowData?.parentEntity, rowData?.messageBroker, rowData?.messageType)}
+        </div>
+      </div>
+
+      {hasError && (
+        <div className="mq-message-kanban-card__error" title={renderText(rowData?.error)}>
+          <span className="mq-message-kanban-card__error-label">Error</span>
+          <span className="mq-message-kanban-card__error-value">{errorPreview}</span>
+        </div>
+      )}
+    </div>
+  );
+}

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RolePermissionsManyToManyFieldWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAe5E,eAAO,MAAM,oCAAoC,6BAA8B,yBAAyB,4CAsIvG,CAAC"}
+{"version":3,"file":"RolePermissionsManyToManyFieldWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAe5E,eAAO,MAAM,oCAAoC,6BAA8B,yBAAyB,4CAoHvG,CAAC"}

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.js

@@ -9,15 +9,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { capitalize } from "lodash";
-import { Message } from "primereact/message";
-import { Panel } from "primereact/panel";
 import { useEffect, useState } from "react";
-import { Button } from "primereact/button";
+import { SolidButton, SolidCheckbox, SolidMessage, SolidPanel } from "../../../../shad-cn-ui";
 import { useRelationEntityHandler } from "../../../../../components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler";
 import { InlineRelationEntityDialog } from "../../../../../components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog";
-import { Checkbox } from "primereact/checkbox";
 import qs from 'qs';
 var groupByController = function (items) {
     var grouped = {};
@@ -35,9 +32,8 @@ export var RolePermissionsManyToManyFieldWidget = function (_a) {
     var formik = _a.formik, fieldContext = _a.fieldContext;
     var fieldLayoutInfo = fieldContext.field;
     var readOnlyPermission = fieldContext.readOnly;
-    var _j = useState(false), visibleCreateDialog = _j[0], setVisibleCreateDialog = _j[1];
-    var _k = useState({}), visibleDialogs = _k[0], setVisibleDialogs = _k[1];
-    var _l = useRelationEntityHandler({ fieldContext: fieldContext }), allOptions = _l.allOptions, currentValues = _l.currentValues, fetchAllOptions = _l.fetchAllOptions, fetchCurrentValues = _l.fetchCurrentValues, linkItem = _l.linkItem, unlinkItem = _l.unlinkItem, addNewRelation = _l.addNewRelation;
+    var _j = useState({}), visibleDialogs = _j[0], setVisibleDialogs = _j[1];
+    var _k = useRelationEntityHandler({ fieldContext: fieldContext }), allOptions = _k.allOptions, currentValues = _k.currentValues, fetchAllOptions = _k.fetchAllOptions, fetchCurrentValues = _k.fetchCurrentValues, linkItem = _k.linkItem, unlinkItem = _k.unlinkItem, addNewRelation = _k.addNewRelation;
     // On mount: load already-linked permissions into currentValues
     useEffect(function () {
         fetchCurrentValues();
@@ -56,20 +52,16 @@ export var RolePermissionsManyToManyFieldWidget = function (_a) {
             linkItem(item);
         }
     };
-    var getHeaderTemplate = function (controllerName) { return function (options) {
-        var className = "".concat(options.className, " justify-content-space-between");
-        return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "flex align-items-center gap-3", children: [_jsx("label", { className: "form-field-label text-base lg:text-lg font-bold", children: controllerName }), fieldContext.field.attrs.inlineCreate && (_jsxs(_Fragment, { children: [_jsx(Button, { icon: "pi pi-plus", rounded: true, outlined: true, "aria-label": "Add", type: "button", size: "small", onClick: function () {
-                                        return setVisibleDialogs(function (prev) {
-                                            var _a;
-                                            return (__assign(__assign({}, prev), (_a = {}, _a[controllerName] = true, _a)));
-                                        });
-                                    }, className: "custom-add-button", disabled: isUnsaved }), _jsx(InlineRelationEntityDialog, { visible: visibleCreateDialog, setVisible: setVisibleCreateDialog, fieldContext: fieldContext, onCreate: addNewRelation })] }))] }), _jsx("div", { children: options.togglerElement })] }));
-    }; };
     var isUnsaved = ((_c = fieldContext.data) === null || _c === void 0 ? void 0 : _c.id) === undefined || ((_d = fieldContext.data) === null || _d === void 0 ? void 0 : _d.id) === "new";
     var entityName = ((_h = (_g = (_f = (_e = fieldContext.solidFormViewMetaData) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.solidView) === null || _g === void 0 ? void 0 : _g.model) === null || _h === void 0 ? void 0 : _h.displayName) || capitalize(fieldContext.modelName);
     var fieldLabel = fieldLayoutInfo.attrs.label || "Permissions";
     var groupedEntities = groupByController(allOptions || []);
-    return (_jsxs("div", { children: [isUnsaved && (_jsx("div", { className: "mb-2", children: _jsx(Message, { severity: "warn", text: "Please save the ".concat(entityName, " first to assign ").concat(fieldLabel, "."), className: "w-full justify-content-start" }) })), Object.keys(groupedEntities).map(function (controllerName) { return (_jsx(Panel, { toggleable: true, headerTemplate: getHeaderTemplate(controllerName), className: "mt-3 lg:mt-4", children: _jsx("div", { className: "formgrid grid gap-3 lg:gap-0", children: groupedEntities[controllerName].map(function (entity, i) { return (_jsxs("div", { className: "field col-12 lg:col-6 flex gap-2 ".concat(i >= 2 ? 'lg:mt-3' : ''), children: [_jsx(Checkbox, { readOnly: readOnlyPermission || isUnsaved, disabled: isUnsaved, inputId: entity.label, checked: currentValues.some(function (s) { return s.value === entity.value; }), onChange: function () { return handleCheckboxChange(entity); } }), _jsx("label", { htmlFor: entity.label, className: "form-field-label m-0 solid-permisson-form-label", children: entity.label })] }, entity.value)); }) }) }, controllerName)); }), Object.keys(groupedEntities).map(function (controllerName) { return (_jsx(InlineRelationEntityDialog, { visible: visibleDialogs[controllerName] || false, setVisible: function (visible) {
+    return (_jsxs("div", { children: [isUnsaved && (_jsx("div", { className: "mb-2", children: _jsx(SolidMessage, { severity: "warn", text: "Please save the ".concat(entityName, " first to assign ").concat(fieldLabel, "."), className: "w-full justify-content-start" }) })), Object.keys(groupedEntities).map(function (controllerName) { return (_jsx(SolidPanel, { toggleable: true, header: _jsxs("div", { className: "flex align-items-center gap-3 justify-content-between w-full", children: [_jsx("span", { className: "form-field-label text-base lg:text-lg font-bold", children: controllerName }), fieldContext.field.attrs.inlineCreate && (_jsx(SolidButton, { icon: "si si-plus", rounded: true, outlined: true, "aria-label": "Add", type: "button", size: "sm", onClick: function () {
+                                return setVisibleDialogs(function (prev) {
+                                    var _a;
+                                    return (__assign(__assign({}, prev), (_a = {}, _a[controllerName] = true, _a)));
+                                });
+                            }, className: "custom-add-button", disabled: isUnsaved }))] }), className: "mt-3 lg:mt-4", children: _jsx("div", { className: "formgrid grid gap-3 lg:gap-0", children: groupedEntities[controllerName].map(function (entity, i) { return (_jsxs("div", { className: "field col-12 lg:col-6 flex gap-2 ".concat(i >= 2 ? 'lg:mt-3' : ''), children: [_jsx(SolidCheckbox, { readOnly: readOnlyPermission || isUnsaved, disabled: isUnsaved, id: entity.label, checked: currentValues.some(function (s) { return s.value === entity.value; }), onChange: function () { return handleCheckboxChange(entity); } }), _jsx("label", { htmlFor: entity.label, className: "form-field-label m-0 solid-permisson-form-label", children: entity.label })] }, entity.value)); }) }) }, controllerName)); }), Object.keys(groupedEntities).map(function (controllerName) { return (_jsx(InlineRelationEntityDialog, { visible: visibleDialogs[controllerName] || false, setVisible: function (visible) {
                     return setVisibleDialogs(function (prev) {
                         var _a;
                         return (__assign(__assign({}, prev), (_a = {}, _a[controllerName] = visible, _a)));

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"RolePermissionsManyToManyFieldWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { capitalize } from \"lodash\";\nimport { Message } from \"primereact/message\";\nimport { Panel } from \"primereact/panel\";\nimport { useEffect, useState } from \"react\";\nimport { Button } from \"primereact/button\";\nimport { useRelationEntityHandler } from \"../../../../../components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler\";\nimport { InlineRelationEntityDialog } from \"../../../../../components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog\";\nimport { Checkbox } from \"primereact/checkbox\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport qs from 'qs';\n\nconst groupByController = (items: any[]) => {\n    const grouped: { [key: string]: any[] } = {};\n    items.forEach((item) => {\n        const controllerName = item.label.split(\".\")[0];\n        if (!grouped[controllerName]) {\n            grouped[controllerName] = [];\n        }\n        grouped[controllerName].push(item);\n    });\n    return grouped;\n};\n\nexport const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldLayoutInfo = fieldContext.field;\n    const readOnlyPermission = fieldContext.readOnly;\n    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);\n\n    const [visibleDialogs, setVisibleDialogs] = useState<{ [key: string]: boolean }>({});\n\n    const {\n        allOptions,\n        currentValues,\n        fetchAllOptions,\n        fetchCurrentValues,\n        linkItem,\n        unlinkItem,\n        addNewRelation,\n    } = useRelationEntityHandler({ fieldContext });\n\n    // On mount: load already-linked permissions into currentValues\n    useEffect(() => {\n        fetchCurrentValues();\n    }, [fieldContext.data?.id]);\n\n    // On mount: load all available permissions into allOptions\n    useEffect(() => {\n        const queryData = { offset: 0, limit: 1000 };\n        fetchAllOptions(qs.stringify(queryData, { encodeValuesOnly: true }));\n    }, []);\n\n    const handleCheckboxChange = (item: any) => {\n        const isCurrentlyLinked = currentValues.some((s) => s.value === item.value);\n        if (isCurrentlyLinked) {\n            unlinkItem(item);\n        } else {\n            linkItem(item);\n        }\n    };\n\n    const getHeaderTemplate = (controllerName: string) => (options: any) => {\n        const className = `${options.className} justify-content-space-between`;\n\n        return (\n            <div className={className}>\n                <div className=\"flex align-items-center gap-3\">\n                    <label className=\"form-field-label text-base lg:text-lg font-bold\">\n                        {controllerName}\n                    </label>\n                    {fieldContext.field.attrs.inlineCreate && (\n                        <>\n                            <Button\n                                icon=\"pi pi-plus\"\n                                rounded\n                                outlined\n                                aria-label=\"Add\"\n                                type=\"button\"\n                                size=\"small\"\n                                onClick={() =>\n                                    setVisibleDialogs((prev) => ({\n                                        ...prev,\n                                        [controllerName]: true,\n                                    }))\n                                }\n                                className=\"custom-add-button\"\n                                disabled={isUnsaved}\n                            />\n                            <InlineRelationEntityDialog\n                                visible={visibleCreateDialog}\n                                setVisible={setVisibleCreateDialog}\n                                fieldContext={fieldContext}\n                                onCreate={addNewRelation}\n                            />\n                        </>\n                    )}\n                </div>\n                <div>{options.togglerElement}</div>\n            </div>\n        );\n    };\n\n    const isUnsaved = fieldContext.data?.id === undefined || fieldContext.data?.id === \"new\";\n    const entityName = fieldContext.solidFormViewMetaData?.data?.solidView?.model?.displayName || capitalize(fieldContext.modelName);\n    const fieldLabel = fieldLayoutInfo.attrs.label || \"Permissions\";\n\n    const groupedEntities = groupByController(allOptions || []);\n    return (\n        <div>\n            {isUnsaved && (\n                <div className=\"mb-2\">\n                    <Message severity=\"warn\" text={`Please save the ${entityName} first to assign ${fieldLabel}.`} className=\"w-full justify-content-start\" />\n                </div>\n            )}\n            {Object.keys(groupedEntities).map((controllerName) => (\n                <Panel\n                    key={controllerName}\n                    toggleable\n                    headerTemplate={getHeaderTemplate(controllerName)}\n                    className=\"mt-3 lg:mt-4\"\n                >\n                    <div className=\"formgrid grid gap-3 lg:gap-0\">\n                        {groupedEntities[controllerName].map((entity: any, i: number) => (\n                            <div\n                                key={entity.value}\n                                className={`field col-12 lg:col-6 flex gap-2 ${i >= 2 ? 'lg:mt-3' : ''}`}\n                            >\n                                <Checkbox\n                                    readOnly={readOnlyPermission || isUnsaved}\n                                    disabled={isUnsaved}\n                                    inputId={entity.label}\n                                    checked={currentValues.some((s) => s.value === entity.value)}\n                                    onChange={() => handleCheckboxChange(entity)}\n                                />\n                                <label htmlFor={entity.label} className=\"form-field-label m-0 solid-permisson-form-label\">\n                                    {entity.label}\n                                </label>\n                            </div>\n                        ))}\n                    </div>\n                </Panel>\n            ))}\n            {Object.keys(groupedEntities).map((controllerName) => (\n                <InlineRelationEntityDialog\n                    key={`dialog-${controllerName}`}\n                    visible={visibleDialogs[controllerName] || false}\n                    setVisible={(visible: any) =>\n                        setVisibleDialogs((prev) => ({\n                            ...prev,\n                            [controllerName]: visible,\n                        }))\n                    }\n                    fieldContext={fieldContext}\n                    onCreate={addNewRelation}\n                />\n            ))}\n        </div>\n    );\n};"]}
+{"version":3,"file":"RolePermissionsManyToManyFieldWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["import { capitalize } from \"lodash\";\nimport { useEffect, useState } from \"react\";\nimport { SolidButton, SolidCheckbox, SolidMessage, SolidPanel } from \"../../../../shad-cn-ui\";\nimport { useRelationEntityHandler } from \"../../../../../components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler\";\nimport { InlineRelationEntityDialog } from \"../../../../../components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport qs from 'qs';\n\nconst groupByController = (items: any[]) => {\n    const grouped: { [key: string]: any[] } = {};\n    items.forEach((item) => {\n        const controllerName = item.label.split(\".\")[0];\n        if (!grouped[controllerName]) {\n            grouped[controllerName] = [];\n        }\n        grouped[controllerName].push(item);\n    });\n    return grouped;\n};\n\nexport const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldLayoutInfo = fieldContext.field;\n    const readOnlyPermission = fieldContext.readOnly;\n\n    const [visibleDialogs, setVisibleDialogs] = useState<{ [key: string]: boolean }>({});\n\n    const {\n        allOptions,\n        currentValues,\n        fetchAllOptions,\n        fetchCurrentValues,\n        linkItem,\n        unlinkItem,\n        addNewRelation,\n    } = useRelationEntityHandler({ fieldContext });\n\n    // On mount: load already-linked permissions into currentValues\n    useEffect(() => {\n        fetchCurrentValues();\n    }, [fieldContext.data?.id]);\n\n    // On mount: load all available permissions into allOptions\n    useEffect(() => {\n        const queryData = { offset: 0, limit: 1000 };\n        fetchAllOptions(qs.stringify(queryData, { encodeValuesOnly: true }));\n    }, []);\n\n    const handleCheckboxChange = (item: any) => {\n        const isCurrentlyLinked = currentValues.some((s) => s.value === item.value);\n        if (isCurrentlyLinked) {\n            unlinkItem(item);\n        } else {\n            linkItem(item);\n        }\n    };\n\n    const isUnsaved = fieldContext.data?.id === undefined || fieldContext.data?.id === \"new\";\n    const entityName = fieldContext.solidFormViewMetaData?.data?.solidView?.model?.displayName || capitalize(fieldContext.modelName);\n    const fieldLabel = fieldLayoutInfo.attrs.label || \"Permissions\";\n\n    const groupedEntities = groupByController(allOptions || []);\n    return (\n        <div>\n            {isUnsaved && (\n                <div className=\"mb-2\">\n                    <SolidMessage severity=\"warn\" text={`Please save the ${entityName} first to assign ${fieldLabel}.`} className=\"w-full justify-content-start\" />\n                </div>\n            )}\n            {Object.keys(groupedEntities).map((controllerName) => (\n                <SolidPanel\n                    key={controllerName}\n                    toggleable\n                    header={\n                        <div className=\"flex align-items-center gap-3 justify-content-between w-full\">\n                            <span className=\"form-field-label text-base lg:text-lg font-bold\">\n                                {controllerName}\n                            </span>\n                            {fieldContext.field.attrs.inlineCreate && (\n                                <SolidButton\n                                    icon=\"si si-plus\"\n                                    rounded\n                                    outlined\n                                    aria-label=\"Add\"\n                                    type=\"button\"\n                                    size=\"sm\"\n                                    onClick={() =>\n                                        setVisibleDialogs((prev) => ({\n                                            ...prev,\n                                            [controllerName]: true,\n                                        }))\n                                    }\n                                    className=\"custom-add-button\"\n                                    disabled={isUnsaved}\n                                />\n                            )}\n                        </div>\n                    }\n                    className=\"mt-3 lg:mt-4\"\n                >\n                    <div className=\"formgrid grid gap-3 lg:gap-0\">\n                        {groupedEntities[controllerName].map((entity: any, i: number) => (\n                            <div\n                                key={entity.value}\n                                className={`field col-12 lg:col-6 flex gap-2 ${i >= 2 ? 'lg:mt-3' : ''}`}\n                            >\n                                <SolidCheckbox\n                                    readOnly={readOnlyPermission || isUnsaved}\n                                    disabled={isUnsaved}\n                                    id={entity.label}\n                                    checked={currentValues.some((s) => s.value === entity.value)}\n                                    onChange={() => handleCheckboxChange(entity)}\n                                />\n                                <label htmlFor={entity.label} className=\"form-field-label m-0 solid-permisson-form-label\">\n                                    {entity.label}\n                                </label>\n                            </div>\n                        ))}\n                    </div>\n                </SolidPanel>\n            ))}\n            {Object.keys(groupedEntities).map((controllerName) => (\n                <InlineRelationEntityDialog\n                    key={`dialog-${controllerName}`}\n                    visible={visibleDialogs[controllerName] || false}\n                    setVisible={(visible: any) =>\n                        setVisibleDialogs((prev) => ({\n                            ...prev,\n                            [controllerName]: visible,\n                        }))\n                    }\n                    fieldContext={fieldContext}\n                    onCreate={addNewRelation}\n                />\n            ))}\n        </div>\n    );\n};\n"]}

package/dist/components/core/extension/solid-core/roleMetadata/RolePermissionsManyToManyFieldWidget.tsx

@@ -1,11 +1,8 @@
 import { capitalize } from "lodash";
-import { Message } from "primereact/message";
-import { Panel } from "primereact/panel";
 import { useEffect, useState } from "react";
-import { Button } from "primereact/button";
+import { SolidButton, SolidCheckbox, SolidMessage, SolidPanel } from "../../../../shad-cn-ui";
 import { useRelationEntityHandler } from "../../../../../components/core/form/fields/relations/widgets/helpers/useRelationEntityHandler";
 import { InlineRelationEntityDialog } from "../../../../../components/core/form/fields/relations/widgets/helpers/InlineRelationEntityDialog";
-import { Checkbox } from "primereact/checkbox";
 import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
 import qs from 'qs';
 
@@ -24,7 +21,6 @@ const groupByController = (items: any[]) => {
 export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
     const fieldLayoutInfo = fieldContext.field;
     const readOnlyPermission = fieldContext.readOnly;
-    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);
 
     const [visibleDialogs, setVisibleDialogs] = useState<{ [key: string]: boolean }>({});
 
@@ -58,47 +54,6 @@ export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: S
         }
     };
 
-    const getHeaderTemplate = (controllerName: string) => (options: any) => {
-        const className = `${options.className} justify-content-space-between`;
-
-        return (
-            <div className={className}>
-                <div className="flex align-items-center gap-3">
-                    <label className="form-field-label text-base lg:text-lg font-bold">
-                        {controllerName}
-                    </label>
-                    {fieldContext.field.attrs.inlineCreate && (
-                        <>
-                            <Button
-                                icon="pi pi-plus"
-                                rounded
-                                outlined
-                                aria-label="Add"
-                                type="button"
-                                size="small"
-                                onClick={() =>
-                                    setVisibleDialogs((prev) => ({
-                                        ...prev,
-                                        [controllerName]: true,
-                                    }))
-                                }
-                                className="custom-add-button"
-                                disabled={isUnsaved}
-                            />
-                            <InlineRelationEntityDialog
-                                visible={visibleCreateDialog}
-                                setVisible={setVisibleCreateDialog}
-                                fieldContext={fieldContext}
-                                onCreate={addNewRelation}
-                            />
-                        </>
-                    )}
-                </div>
-                <div>{options.togglerElement}</div>
-            </div>
-        );
-    };
-
     const isUnsaved = fieldContext.data?.id === undefined || fieldContext.data?.id === "new";
     const entityName = fieldContext.solidFormViewMetaData?.data?.solidView?.model?.displayName || capitalize(fieldContext.modelName);
     const fieldLabel = fieldLayoutInfo.attrs.label || "Permissions";
@@ -108,14 +63,38 @@ export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: S
         <div>
             {isUnsaved && (
                 <div className="mb-2">
-                    <Message severity="warn" text={`Please save the ${entityName} first to assign ${fieldLabel}.`} className="w-full justify-content-start" />
+                    <SolidMessage severity="warn" text={`Please save the ${entityName} first to assign ${fieldLabel}.`} className="w-full justify-content-start" />
                 </div>
             )}
             {Object.keys(groupedEntities).map((controllerName) => (
-                <Panel
+                <SolidPanel
                     key={controllerName}
                     toggleable
-                    headerTemplate={getHeaderTemplate(controllerName)}
+                    header={
+                        <div className="flex align-items-center gap-3 justify-content-between w-full">
+                            <span className="form-field-label text-base lg:text-lg font-bold">
+                                {controllerName}
+                            </span>
+                            {fieldContext.field.attrs.inlineCreate && (
+                                <SolidButton
+                                    icon="si si-plus"
+                                    rounded
+                                    outlined
+                                    aria-label="Add"
+                                    type="button"
+                                    size="sm"
+                                    onClick={() =>
+                                        setVisibleDialogs((prev) => ({
+                                            ...prev,
+                                            [controllerName]: true,
+                                        }))
+                                    }
+                                    className="custom-add-button"
+                                    disabled={isUnsaved}
+                                />
+                            )}
+                        </div>
+                    }
                     className="mt-3 lg:mt-4"
                 >
                     <div className="formgrid grid gap-3 lg:gap-0">
@@ -124,10 +103,10 @@ export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: S
                                 key={entity.value}
                                 className={`field col-12 lg:col-6 flex gap-2 ${i >= 2 ? 'lg:mt-3' : ''}`}
                             >
-                                <Checkbox
+                                <SolidCheckbox
                                     readOnly={readOnlyPermission || isUnsaved}
                                     disabled={isUnsaved}
-                                    inputId={entity.label}
+                                    id={entity.label}
                                     checked={currentValues.some((s) => s.value === entity.value)}
                                     onChange={() => handleCheckboxChange(entity)}
                                 />
@@ -137,7 +116,7 @@ export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: S
                             </div>
                         ))}
                     </div>
-                </Panel>
+                </SolidPanel>
             ))}
             {Object.keys(groupedEntities).map((controllerName) => (
                 <InlineRelationEntityDialog
@@ -155,4 +134,4 @@ export const RolePermissionsManyToManyFieldWidget = ({ formik, fieldContext }: S
             ))}
         </div>
     );
-};
+};

package/dist/components/core/field/FieldListViewData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FieldListViewData.d.ts","sourceRoot":"","sources":["../../../../src/components/core/field/FieldListViewData.tsx"],"names":[],"mappings":"AAkBA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,iBAAiB,+CAgS7B,CAAC"}
+{"version":3,"file":"FieldListViewData.d.ts","sourceRoot":"","sources":["../../../../src/components/core/field/FieldListViewData.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AASD,eAAO,MAAM,iBAAiB,+CAkP7B,CAAC"}