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

package/dist/components/core/form/fields/widgets/SolidRelationFieldAvatarFormWidget.tsx

@@ -1,10 +1,5 @@
 
 import { useEffect, useState } from "react";
-import { Message } from "primereact/message";
-import { classNames } from "primereact/utils";
-import { SelectButton } from "primereact/selectbutton";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { RadioButton } from "primereact/radiobutton";
 import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
 import { AvatarWidget } from "../../../../../components/core/common/AvatarWidget";
 

package/dist/components/core/form/fields/widgets/SolidS3FileViewerWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidS3FileViewerWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAK5E,OAAO,0BAA0B,CAAC;AAIlC;;GAEG;AACH,eAAO,MAAM,uBAAuB,6BAA8B,yBAAyB,4CAsN1F,CAAC"}
+{"version":3,"file":"SolidS3FileViewerWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAW5E,OAAO,0BAA0B,CAAC;AAIlC;;GAEG;AACH,eAAO,MAAM,uBAAuB,6BAA8B,yBAAyB,4CA0N1F,CAAC"}

package/dist/components/core/form/fields/widgets/SolidS3FileViewerWidget.js

@@ -36,8 +36,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
+import { SolidButton } from "../../../../shad-cn-ui/SolidButton";
+import { SolidDialog, SolidDialogBody, SolidDialogClose, SolidDialogHeader, SolidDialogTitle, } from "../../../../shad-cn-ui/SolidDialog";
 import { useResolveS3UrlMutation } from "../../../../../redux/api/fieldApi";
 import "viewerjs/dist/viewer.css";
 import { SolidImageViewer } from "../../../../../components/core/common/SolidImageViewer";
@@ -181,7 +181,7 @@ export var SolidS3FileViewerWidget = function (_a) {
     //         viewerRef.current.show();
     //     }
     // }, [shouldShowViewer]);
-    return (_jsxs("div", { className: "mt-2 flex flex-col gap-2", children: [_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel }), value ? (_jsxs("div", { className: "flex gap-3 items-center", children: [(isImage || isPDF) && (_jsx(Button, { icon: "pi pi-eye", type: "button", style: { minWidth: 66 }, loading: isLoading, tooltip: value, disabled: isLoading, label: "View ".concat(fileType), size: "small", iconPos: "left", onClick: handleView })), downloadAllowed && (_jsx(Button, { size: "small", type: "button", icon: "pi pi-download", tooltip: "Download ".concat(value === null || value === void 0 ? void 0 : value.split("/").pop()), loading: isLoading, onClick: handleDownload, disabled: isLoading, className: 'solid-icon-button' }))] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "No file uploaded" })), isImage && previewUrl && (
+    return (_jsxs("div", { className: "mt-2 flex flex-col gap-2", children: [_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel }), value ? (_jsxs("div", { className: "flex gap-3 items-center", children: [(isImage || isPDF) && (_jsx(SolidButton, { icon: "si si-eye", type: "button", style: { minWidth: 66 }, loading: isLoading, tooltip: value, disabled: isLoading, size: "sm", iconPos: "left", onClick: handleView, children: "View ".concat(fileType) })), downloadAllowed && (_jsx(SolidButton, { size: "sm", type: "button", icon: "si si-download", tooltip: "Download ".concat(value === null || value === void 0 ? void 0 : value.split("/").pop()), loading: isLoading, onClick: handleDownload, disabled: isLoading, className: 'solid-icon-button' }))] })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "No file uploaded" })), isImage && previewUrl && (
             // <img
             //     ref={imageRef}
             //     src={previewUrl}
@@ -201,10 +201,11 @@ export var SolidS3FileViewerWidget = function (_a) {
                         rotateRight: 1,
                         reset: 1,
                     },
-                } })), _jsx(Dialog, { header: value, visible: open, modal: true, style: { width: "80vw", maxHeight: "90vh" }, onHide: function () { return setOpen(false); }, headerClassName: 'p-1 form-wrapper-title', contentClassName: 'p-0', contentStyle: { borderRadius: 6 }, children: previewUrl && isPDF && (_jsx("div", { style: {
-                        width: "100%",
-                        height: "75vh",
-                        overflow: "hidden",
-                    }, children: _jsx("iframe", { src: previewUrl, style: { width: "100%", height: "100%", border: "none" } }) })) })] }));
+                } })), _jsxs(SolidDialog, { open: open, onOpenChange: setOpen, className: "solid-confirm-dialog", style: { width: "80vw", maxHeight: "90vh" }, children: [_jsxs(SolidDialogHeader, { className: "p-1 form-wrapper-title", children: [_jsx(SolidDialogTitle, { children: value }), _jsx(SolidDialogClose, { "aria-label": "Close preview" })] }), _jsx(SolidDialogBody, { className: "p-0", children: previewUrl && isPDF && (_jsx("div", { style: {
+                                width: "100%",
+                                height: "75vh",
+                                overflow: "hidden",
+                                borderRadius: 6,
+                            }, children: _jsx("iframe", { src: previewUrl, style: { width: "100%", height: "100%", border: "none" } }) })) })] })] }));
 };
 //# sourceMappingURL=SolidS3FileViewerWidget.js.map

package/dist/components/core/form/fields/widgets/SolidS3FileViewerWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidS3FileViewerWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,mCAAmC,CAAC;AAE5E,OAAO,0BAA0B,CAAC;AAClC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wDAAwD,CAAC;AAC1F,OAAO,EAAE,UAAU,EAA0B,MAAM,oCAAoC,CAAC;AAExF;;GAEG;AACH,MAAM,CAAC,IAAM,uBAAuB,GAAG,UAAC,EAAmD;;QAAjD,MAAM,YAAA,EAAE,YAAY,kBAAA;IAC1D,IAAM,aAAa,GAAG,YAAY,CAAC,aAAa,CAAC;IACjD,IAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC;IAC3C,IAAM,UAAU,GAAG,MAAA,eAAe,CAAC,KAAK,CAAC,KAAK,mCAAI,aAAa,CAAC,WAAW,CAAC;IAC5E,IAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACxD,IAAM,QAAQ,GAAG,MAAA,eAAe,CAAC,KAAK,CAAC,QAAQ,0CAAE,WAAW,EAAE,CAAC;IAC/D,IAAM,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC,eAAe,KAAK,KAAK,CAAC;IACxE,IAAM,UAAU,GAAG,eAAe,CAAC,KAAK,CAAC,UAAU,CAAC;IACpD,IAAM,2BAA2B,GAAG,eAAe,CAAC,KAAK,CAAC,2BAA2B,CAAC;IACtF,IAAM,SAAS,GAAG,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAE9F,IAAM,QAAQ,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IACvD,IAAM,SAAS,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAExC,IAAA,KAA8B,QAAQ,CAAS,EAAE,CAAC,EAAjD,UAAU,QAAA,EAAE,aAAa,QAAwB,CAAC;IACnD,IAAA,KAA4B,QAAQ,CAAC,KAAK,CAAC,EAA1C,SAAS,QAAA,EAAE,YAAY,QAAmB,CAAC;IAC5C,IAAA,KAAkB,QAAQ,CAAC,KAAK,CAAC,EAAhC,IAAI,QAAA,EAAE,OAAO,QAAmB,CAAC;IAClC,IAAA,KAA0C,QAAQ,CAAC,KAAK,CAAC,EAAxD,gBAAgB,QAAA,EAAE,mBAAmB,QAAmB,CAAC;IAEzD,IAAA,YAAY,GAAI,uBAAuB,EAAE,GAA7B,CAA8B;IAEjD,IAAM,cAAc,GAAG;;;;;oBACnB,YAAY,CAAC,IAAI,CAAC,CAAC;oBAEb,OAAO,GAAsB;wBAC/B,KAAK,EAAE,KAAK;wBACZ,QAAQ,EAAE,QAAQ;wBAClB,UAAU,EAAE,UAAU;wBACtB,2BAA2B,EAAE,2BAA2B;wBACxD,SAAS,EAAE,SAAS;qBACvB,CAAC;oBAEU,qBAAM,UAAU,CAAC,YAAY,EAAE,OAAO,CAAC,EAAA;;oBAA7C,GAAG,GAAG,SAAuC;oBACnD,YAAY,CAAC,KAAK,CAAC,CAAC;oBACpB,sBAAO,GAAG,EAAC;;;SACd,CAAC;IAEF,IAAM,cAAc,GAAG;;;;;oBACnB,IAAI,SAAS;wBAAE,sBAAO;oBACV,qBAAM,cAAc,EAAE,EAAA;;oBAA5B,GAAG,GAAG,SAAsB;oBAClC,IAAI,CAAC,GAAG;wBAAE,sBAAO;oBACX,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;oBACtC,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC;oBACb,CAAC,CAAC,QAAQ,GAAG,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,KAAI,MAAM,CAAC;oBAC/C,CAAC,CAAC,MAAM,GAAG,QAAQ,CAAC;oBACpB,CAAC,CAAC,GAAG,GAAG,qBAAqB,CAAC;oBAC9B,CAAC,CAAC,KAAK,EAAE,CAAC;;;;SACb,CAAC;IAEF,IAAM,UAAU,GAAG;;;;;oBACf,OAAO,CAAC,GAAG,CAAC,mBAAmB,EAAE,SAAS,CAAC,CAAC;oBAC5C,IAAI,SAAS;wBAAE,sBAAO;oBAEV,qBAAM,cAAc,EAAE,EAAA;;oBAA5B,GAAG,GAAG,SAAsB;oBAClC,OAAO,CAAC,GAAG,CAAC,yBAAyB,EAAE,GAAG,CAAC,CAAC;oBAC5C,IAAI,CAAC,GAAG;wBAAE,sBAAO;oBAEjB,aAAa,CAAC,GAAG,CAAC,CAAC;oBAEnB,IAAI,OAAO,EAAE;wBACT,4CAA4C;wBAC5C,mBAAmB,CAAC,IAAI,CAAC,CAAC;qBAC7B;yBAAM;wBACH,OAAO,CAAC,IAAI,CAAC,CAAC;qBACjB;;;;SACJ,CAAC;IAEF,IAAM,OAAO,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACzE,IAAM,KAAK,GAAG,QAAQ,KAAK,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAEhF,4CAA4C;IAC5C,oBAAoB;IACpB,uDAAuD;IACvD,4CAA4C;IAC5C,mCAAmC;IACnC,2CAA2C;IAC3C,YAAY;IAEZ,wCAAwC;IACxC,6DAA6D;IAC7D,yBAAyB;IACzB,6BAA6B;IAC7B,8BAA8B;IAC9B,iCAAiC;IACjC,kCAAkC;IAClC,4BAA4B;IAC5B,iBAAiB;IACjB,6BAA6B;IAC7B,4BAA4B;IAC5B,gCAAgC;IAChC,6BAA6B;IAC7B,8BAA8B;IAC9B,+BAA+B;IAC/B,8BAA8B;IAC9B,4BAA4B;IAC5B,iDAAiD;IACjD,8BAA8B;IAC9B,8CAA8C;IAC9C,gBAAgB;IAChB,cAAc;IAEd,6CAA6C;IAC7C,QAAQ;IAER,qBAAqB;IACrB,mCAAmC;IACnC,2CAA2C;IAC3C,wCAAwC;IACxC,YAAY;IACZ,SAAS;IACT,6BAA6B;IAE7B,oDAAoD;IACpD,oBAAoB;IACpB,mDAAmD;IACnD,yCAAyC;IACzC,oCAAoC;IACpC,QAAQ;IACR,0BAA0B;IAE1B,OAAO,CACH,eAAK,SAAS,EAAC,0BAA0B,aACrC,YAAG,SAAS,EAAC,kCAAkC,YAAE,UAAU,GAAK,EAE/D,KAAK,CAAC,CAAC,CAAC,CACL,eAAK,SAAS,EAAC,yBAAyB,aACnC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,CACnB,KAAC,MAAM,IACH,IAAI,EAAC,WAAW,EAChB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,EACvB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,KAAK,EACd,QAAQ,EAAE,SAAS,EACnB,KAAK,EAAE,eAAQ,QAAQ,CAAE,EACzB,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,UAAU,GACrB,CACL,EACA,eAAe,IAAI,CAChB,KAAC,MAAM,IACH,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,gBAAgB,EACrB,OAAO,EAAE,mBAAY,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,CAAE,EAC9C,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,cAAc,EACvB,QAAQ,EAAE,SAAS,EACnB,SAAS,EAAC,mBAAmB,GAAG,CACvC,IACC,CACT,CAAC,CAAC,CAAC,CACA,YAAG,SAAS,EAAC,+BAA+B,iCAAqB,CACpE,EAGA,OAAO,IAAI,UAAU,IAAI;YACtB,OAAO;YACP,qBAAqB;YACrB,uBAAuB;YACvB,kBAAkB;YAClB,eAAe;YACf,gCAAgC;YAChC,gCAAgC;YAChC,wBAAwB;YACxB,wBAAwB;YACxB,SAAS;YACT,KAAK;YACL,KAAC,gBAAgB,IACb,MAAM,EAAE,CAAC,UAAU,CAAC,EACpB,IAAI,EAAE,gBAAgB,EACtB,OAAO,EAAE,cAAM,OAAA,mBAAmB,CAAC,KAAK,CAAC,EAA1B,CAA0B,EACzC,aAAa,EAAE;oBACX,OAAO,EAAE;wBACL,MAAM,EAAE,CAAC;wBACT,OAAO,EAAE,CAAC;wBACV,UAAU,EAAE,CAAC;wBACb,WAAW,EAAE,CAAC;wBACd,KAAK,EAAE,CAAC;qBACX;iBACJ,GACH,CAEL,EAED,KAAC,MAAM,IACH,MAAM,EAAE,KAAK,EACb,OAAO,EAAE,IAAI,EACb,KAAK,QACL,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,EAC3C,MAAM,EAAE,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,EAC5B,eAAe,EAAC,wBAAwB,EACxC,gBAAgB,EAAC,KAAK,EACtB,YAAY,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,YAEhC,UAAU,IAAI,KAAK,IAAI,CACpB,cACI,KAAK,EAAE;wBACH,KAAK,EAAE,MAAM;wBACb,MAAM,EAAE,MAAM;wBACd,QAAQ,EAAE,QAAQ;qBACrB,YAED,iBACI,GAAG,EAAE,UAAU,EACf,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAC1D,GACA,CACT,GACI,IACP,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["\nimport { useRef, useState } from \"react\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { Button } from \"primereact/button\";\nimport { Dialog } from \"primereact/dialog\";\nimport { useResolveS3UrlMutation } from \"../../../../../redux/api/fieldApi\";\nimport Viewer from \"viewerjs\";\nimport \"viewerjs/dist/viewer.css\";\nimport { SolidImageViewer } from \"../../../../../components/core/common/SolidImageViewer\";\nimport { fetchS3Url, type FetchS3UrlOptions } from \"../../../../..//helpers/fetchS3Url\";\n\n/**\n * SolidS3FileViewerWidget (PrimeReact version)\n */\nexport const SolidS3FileViewerWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const value = formik.values[fieldLayoutInfo.attrs.name];\n    const fileType = fieldLayoutInfo.attrs.fileType?.toLowerCase();\n    const downloadAllowed = fieldLayoutInfo.attrs.downloadAllowed !== false;\n    const bucketName = fieldLayoutInfo.attrs.bucketName;\n    const mediaStorageProviderUserKey = fieldLayoutInfo.attrs.mediaStorageProviderUserKey;\n    const isPrivate = fieldLayoutInfo.attrs.isPrivate ? fieldLayoutInfo.attrs.isPrivate : \"false\";\n\n    const imageRef = useRef<HTMLImageElement | null>(null);\n    const viewerRef = useRef<Viewer | null>(null);\n\n    const [previewUrl, setPreviewUrl] = useState<string>(\"\");\n    const [isLoading, setIsLoading] = useState(false);\n    const [open, setOpen] = useState(false);\n    const [shouldShowViewer, setShouldShowViewer] = useState(false);\n\n    const [resolveS3Url] = useResolveS3UrlMutation();\n\n    const resolveFileUrl = async () => {\n        setIsLoading(true);\n\n        const options: FetchS3UrlOptions = {\n            s3Key: value,\n            fileType: fileType,\n            bucketName: bucketName,\n            mediaStorageProviderUserKey: mediaStorageProviderUserKey,\n            isPrivate: isPrivate\n        };\n\n        const url = await fetchS3Url(resolveS3Url, options);\n        setIsLoading(false);\n        return url;\n    };\n\n    const handleDownload = async () => {\n        if (isLoading) return;\n        const url = await resolveFileUrl();\n        if (!url) return;\n        const a = document.createElement(\"a\");\n        a.href = url;\n        a.download = value?.split(\"/\").pop() || \"file\";\n        a.target = \"_blank\";\n        a.rel = \"noopener noreferrer\";\n        a.click();\n    };\n\n    const handleView = async () => {\n        console.log(\"isLoading in view\", isLoading);\n        if (isLoading) return;\n\n        const url = await resolveFileUrl();\n        console.log(\"url after fetch success\", url);\n        if (!url) return;\n\n        setPreviewUrl(url);\n\n        if (isImage) {\n            // Trigger viewer to show after state update\n            setShouldShowViewer(true);\n        } else {\n            setOpen(true);\n        }\n    };\n\n    const isImage = [\"jpeg\", \"jpg\", \"png\", \"gif\", \"webp\"].includes(fileType);\n    const isPDF = fileType === \"pdf\";\n    const isDownloadOnly = [\"xlsx\", \"xls\", \"csv\", \"doc\", \"docx\"].includes(fileType);\n\n    // 🔹 Initialize Viewer.js once image exists\n    // useEffect(() => {\n    //     if (imageRef.current && previewUrl && isImage) {\n    //         // Destroy existing viewer if any\n    //         if (viewerRef.current) {\n    //             viewerRef.current.destroy();\n    //         }\n\n    //         // Create new viewer instance\n    //         viewerRef.current = new Viewer(imageRef.current, {\n    //             toolbar: {\n    //                 zoomIn: 1,\n    //                 zoomOut: 1,\n    //                 rotateLeft: 1,\n    //                 rotateRight: 1,\n    //                 reset: 1,\n    //             },\n    //             navbar: false,\n    //             title: false,\n    //             transition: true,\n    //             movable: true,\n    //             scalable: true,\n    //             rotatable: true,\n    //             zoomable: true,\n    //             zIndex: 9999,\n    //             // Add hidden event to reset state\n    //             hidden: () => {\n    //                 setShouldShowViewer(false);\n    //             }\n    //         });\n\n    //         console.log(\"Viewer initialized\");\n    //     }\n\n    //     return () => {\n    //         if (viewerRef.current) {\n    //             viewerRef.current.destroy();\n    //             viewerRef.current = null;\n    //         }\n    //     };\n    // }, [previewUrl, isImage]);\n\n    // 🔹 Show viewer when shouldShowViewer becomes true\n    // useEffect(() => {\n    //     if (shouldShowViewer && viewerRef.current) {\n    //         console.log(\"Showing viewer\");\n    //         viewerRef.current.show();\n    //     }\n    // }, [shouldShowViewer]);\n\n    return (\n        <div className=\"mt-2 flex flex-col gap-2\">\n            <p className=\"m-0 form-field-label font-medium\">{fieldLabel}</p>\n\n            {value ? (\n                <div className=\"flex gap-3 items-center\">\n                    {(isImage || isPDF) && (\n                        <Button\n                            icon=\"pi pi-eye\"\n                            type=\"button\"\n                            style={{ minWidth: 66 }}\n                            loading={isLoading}\n                            tooltip={value}\n                            disabled={isLoading}\n                            label={`View ${fileType}`}\n                            size=\"small\"\n                            iconPos=\"left\"\n                            onClick={handleView}\n                        />\n                    )}\n                    {downloadAllowed && (\n                        <Button\n                            size=\"small\"\n                            type=\"button\"\n                            icon=\"pi pi-download\"\n                            tooltip={`Download ${value?.split(\"/\").pop()}`}\n                            loading={isLoading}\n                            onClick={handleDownload}\n                            disabled={isLoading}\n                            className='solid-icon-button' />\n                    )}\n                </div>\n            ) : (\n                <p className=\"text-sm text-muted-foreground\">No file uploaded</p>\n            )}\n\n            {/* Hidden image for Viewer.js - keep visibility hidden instead of display none */}\n            {isImage && previewUrl && (\n                // <img\n                //     ref={imageRef}\n                //     src={previewUrl}\n                //     alt={value}\n                //     style={{\n                //         position: \"absolute\",\n                //         visibility: \"hidden\",\n                //         width: \"1px\",\n                //         height: \"1px\"\n                //     }}\n                // />\n                <SolidImageViewer\n                    images={[previewUrl]}\n                    open={shouldShowViewer}\n                    onClose={() => setShouldShowViewer(false)}\n                    viewerOptions={{\n                        toolbar: {\n                            zoomIn: 1,\n                            zoomOut: 1,\n                            rotateLeft: 1,\n                            rotateRight: 1,\n                            reset: 1,\n                        },\n                    }}\n                />\n\n            )}\n\n            <Dialog\n                header={value}\n                visible={open}\n                modal\n                style={{ width: \"80vw\", maxHeight: \"90vh\" }}\n                onHide={() => setOpen(false)}\n                headerClassName='p-1 form-wrapper-title'\n                contentClassName='p-0'\n                contentStyle={{ borderRadius: 6 }}\n            >\n                {previewUrl && isPDF && (\n                    <div\n                        style={{\n                            width: \"100%\",\n                            height: \"75vh\",\n                            overflow: \"hidden\",\n                        }}\n                    >\n                        <iframe\n                            src={previewUrl}\n                            style={{ width: \"100%\", height: \"100%\", border: \"none\" }}\n                        />\n                    </div>\n                )}\n            </Dialog>\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"SolidS3FileViewerWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { useRef, useState } from \"react\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { SolidButton } from \"../../../../shad-cn-ui/SolidButton\";\nimport {\n  SolidDialog,\n  SolidDialogBody,\n  SolidDialogClose,\n  SolidDialogHeader,\n  SolidDialogTitle,\n} from \"../../../../shad-cn-ui/SolidDialog\";\nimport { useResolveS3UrlMutation } from \"../../../../../redux/api/fieldApi\";\nimport Viewer from \"viewerjs\";\nimport \"viewerjs/dist/viewer.css\";\nimport { SolidImageViewer } from \"../../../../../components/core/common/SolidImageViewer\";\nimport { fetchS3Url, type FetchS3UrlOptions } from \"../../../../..//helpers/fetchS3Url\";\n\n/**\n * SolidS3FileViewerWidget (PrimeReact version)\n */\nexport const SolidS3FileViewerWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const value = formik.values[fieldLayoutInfo.attrs.name];\n    const fileType = fieldLayoutInfo.attrs.fileType?.toLowerCase();\n    const downloadAllowed = fieldLayoutInfo.attrs.downloadAllowed !== false;\n    const bucketName = fieldLayoutInfo.attrs.bucketName;\n    const mediaStorageProviderUserKey = fieldLayoutInfo.attrs.mediaStorageProviderUserKey;\n    const isPrivate = fieldLayoutInfo.attrs.isPrivate ? fieldLayoutInfo.attrs.isPrivate : \"false\";\n\n    const imageRef = useRef<HTMLImageElement | null>(null);\n    const viewerRef = useRef<Viewer | null>(null);\n\n    const [previewUrl, setPreviewUrl] = useState<string>(\"\");\n    const [isLoading, setIsLoading] = useState(false);\n    const [open, setOpen] = useState(false);\n    const [shouldShowViewer, setShouldShowViewer] = useState(false);\n\n    const [resolveS3Url] = useResolveS3UrlMutation();\n\n    const resolveFileUrl = async () => {\n        setIsLoading(true);\n\n        const options: FetchS3UrlOptions = {\n            s3Key: value,\n            fileType: fileType,\n            bucketName: bucketName,\n            mediaStorageProviderUserKey: mediaStorageProviderUserKey,\n            isPrivate: isPrivate\n        };\n\n        const url = await fetchS3Url(resolveS3Url, options);\n        setIsLoading(false);\n        return url;\n    };\n\n    const handleDownload = async () => {\n        if (isLoading) return;\n        const url = await resolveFileUrl();\n        if (!url) return;\n        const a = document.createElement(\"a\");\n        a.href = url;\n        a.download = value?.split(\"/\").pop() || \"file\";\n        a.target = \"_blank\";\n        a.rel = \"noopener noreferrer\";\n        a.click();\n    };\n\n    const handleView = async () => {\n        console.log(\"isLoading in view\", isLoading);\n        if (isLoading) return;\n\n        const url = await resolveFileUrl();\n        console.log(\"url after fetch success\", url);\n        if (!url) return;\n\n        setPreviewUrl(url);\n\n        if (isImage) {\n            // Trigger viewer to show after state update\n            setShouldShowViewer(true);\n        } else {\n            setOpen(true);\n        }\n    };\n\n    const isImage = [\"jpeg\", \"jpg\", \"png\", \"gif\", \"webp\"].includes(fileType);\n    const isPDF = fileType === \"pdf\";\n    const isDownloadOnly = [\"xlsx\", \"xls\", \"csv\", \"doc\", \"docx\"].includes(fileType);\n\n    // 🔹 Initialize Viewer.js once image exists\n    // useEffect(() => {\n    //     if (imageRef.current && previewUrl && isImage) {\n    //         // Destroy existing viewer if any\n    //         if (viewerRef.current) {\n    //             viewerRef.current.destroy();\n    //         }\n\n    //         // Create new viewer instance\n    //         viewerRef.current = new Viewer(imageRef.current, {\n    //             toolbar: {\n    //                 zoomIn: 1,\n    //                 zoomOut: 1,\n    //                 rotateLeft: 1,\n    //                 rotateRight: 1,\n    //                 reset: 1,\n    //             },\n    //             navbar: false,\n    //             title: false,\n    //             transition: true,\n    //             movable: true,\n    //             scalable: true,\n    //             rotatable: true,\n    //             zoomable: true,\n    //             zIndex: 9999,\n    //             // Add hidden event to reset state\n    //             hidden: () => {\n    //                 setShouldShowViewer(false);\n    //             }\n    //         });\n\n    //         console.log(\"Viewer initialized\");\n    //     }\n\n    //     return () => {\n    //         if (viewerRef.current) {\n    //             viewerRef.current.destroy();\n    //             viewerRef.current = null;\n    //         }\n    //     };\n    // }, [previewUrl, isImage]);\n\n    // 🔹 Show viewer when shouldShowViewer becomes true\n    // useEffect(() => {\n    //     if (shouldShowViewer && viewerRef.current) {\n    //         console.log(\"Showing viewer\");\n    //         viewerRef.current.show();\n    //     }\n    // }, [shouldShowViewer]);\n\n    return (\n        <div className=\"mt-2 flex flex-col gap-2\">\n            <p className=\"m-0 form-field-label font-medium\">{fieldLabel}</p>\n\n            {value ? (\n                <div className=\"flex gap-3 items-center\">\n                    {(isImage || isPDF) && (\n                        <SolidButton\n                            icon=\"si si-eye\"\n                            type=\"button\"\n                            style={{ minWidth: 66 }}\n                            loading={isLoading}\n                            tooltip={value}\n                            disabled={isLoading}\n                            size=\"sm\"\n                            iconPos=\"left\"\n                            onClick={handleView}\n                        >\n                            {`View ${fileType}`}\n                        </SolidButton>\n                    )}\n                    {downloadAllowed && (\n                        <SolidButton\n                            size=\"sm\"\n                            type=\"button\"\n                            icon=\"si si-download\"\n                            tooltip={`Download ${value?.split(\"/\").pop()}`}\n                            loading={isLoading}\n                            onClick={handleDownload}\n                            disabled={isLoading}\n                            className='solid-icon-button' />\n                    )}\n                </div>\n            ) : (\n                <p className=\"text-sm text-muted-foreground\">No file uploaded</p>\n            )}\n\n            {/* Hidden image for Viewer.js - keep visibility hidden instead of display none */}\n            {isImage && previewUrl && (\n                // <img\n                //     ref={imageRef}\n                //     src={previewUrl}\n                //     alt={value}\n                //     style={{\n                //         position: \"absolute\",\n                //         visibility: \"hidden\",\n                //         width: \"1px\",\n                //         height: \"1px\"\n                //     }}\n                // />\n                <SolidImageViewer\n                    images={[previewUrl]}\n                    open={shouldShowViewer}\n                    onClose={() => setShouldShowViewer(false)}\n                    viewerOptions={{\n                        toolbar: {\n                            zoomIn: 1,\n                            zoomOut: 1,\n                            rotateLeft: 1,\n                            rotateRight: 1,\n                            reset: 1,\n                        },\n                    }}\n                />\n\n            )}\n\n            <SolidDialog\n                open={open}\n                onOpenChange={setOpen}\n                className=\"solid-confirm-dialog\"\n                style={{ width: \"80vw\", maxHeight: \"90vh\" }}\n            >\n                <SolidDialogHeader className=\"p-1 form-wrapper-title\">\n                    <SolidDialogTitle>{value}</SolidDialogTitle>\n                    <SolidDialogClose aria-label=\"Close preview\" />\n                </SolidDialogHeader>\n                <SolidDialogBody className=\"p-0\">\n                    {previewUrl && isPDF && (\n                        <div\n                            style={{\n                                width: \"100%\",\n                                height: \"75vh\",\n                                overflow: \"hidden\",\n                                borderRadius: 6,\n                            }}\n                        >\n                            <iframe\n                                src={previewUrl}\n                                style={{ width: \"100%\", height: \"100%\", border: \"none\" }}\n                            />\n                        </div>\n                    )}\n                </SolidDialogBody>\n            </SolidDialog>\n        </div>\n    );\n};\n"]}

package/dist/components/core/form/fields/widgets/SolidS3FileViewerWidget.tsx

@@ -1,8 +1,14 @@
 
 import { useRef, useState } from "react";
 import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
+import { SolidButton } from "../../../../shad-cn-ui/SolidButton";
+import {
+  SolidDialog,
+  SolidDialogBody,
+  SolidDialogClose,
+  SolidDialogHeader,
+  SolidDialogTitle,
+} from "../../../../shad-cn-ui/SolidDialog";
 import { useResolveS3UrlMutation } from "../../../../../redux/api/fieldApi";
 import Viewer from "viewerjs";
 import "viewerjs/dist/viewer.css";
@@ -140,24 +146,25 @@ export const SolidS3FileViewerWidget = ({ formik, fieldContext }: SolidFormField
             {value ? (
                 <div className="flex gap-3 items-center">
                     {(isImage || isPDF) && (
-                        <Button
-                            icon="pi pi-eye"
+                        <SolidButton
+                            icon="si si-eye"
                             type="button"
                             style={{ minWidth: 66 }}
                             loading={isLoading}
                             tooltip={value}
                             disabled={isLoading}
-                            label={`View ${fileType}`}
-                            size="small"
+                            size="sm"
                             iconPos="left"
                             onClick={handleView}
-                        />
+                        >
+                            {`View ${fileType}`}
+                        </SolidButton>
                     )}
                     {downloadAllowed && (
-                        <Button
-                            size="small"
+                        <SolidButton
+                            size="sm"
                             type="button"
-                            icon="pi pi-download"
+                            icon="si si-download"
                             tooltip={`Download ${value?.split("/").pop()}`}
                             loading={isLoading}
                             onClick={handleDownload}
@@ -199,31 +206,34 @@ export const SolidS3FileViewerWidget = ({ formik, fieldContext }: SolidFormField
 
             )}
 
-            <Dialog
-                header={value}
-                visible={open}
-                modal
+            <SolidDialog
+                open={open}
+                onOpenChange={setOpen}
+                className="solid-confirm-dialog"
                 style={{ width: "80vw", maxHeight: "90vh" }}
-                onHide={() => setOpen(false)}
-                headerClassName='p-1 form-wrapper-title'
-                contentClassName='p-0'
-                contentStyle={{ borderRadius: 6 }}
             >
-                {previewUrl && isPDF && (
-                    <div
-                        style={{
-                            width: "100%",
-                            height: "75vh",
-                            overflow: "hidden",
-                        }}
-                    >
-                        <iframe
-                            src={previewUrl}
-                            style={{ width: "100%", height: "100%", border: "none" }}
-                        />
-                    </div>
-                )}
-            </Dialog>
+                <SolidDialogHeader className="p-1 form-wrapper-title">
+                    <SolidDialogTitle>{value}</SolidDialogTitle>
+                    <SolidDialogClose aria-label="Close preview" />
+                </SolidDialogHeader>
+                <SolidDialogBody className="p-0">
+                    {previewUrl && isPDF && (
+                        <div
+                            style={{
+                                width: "100%",
+                                height: "75vh",
+                                overflow: "hidden",
+                                borderRadius: 6,
+                            }}
+                        >
+                            <iframe
+                                src={previewUrl}
+                                style={{ width: "100%", height: "100%", border: "none" }}
+                            />
+                        </div>
+                    )}
+                </SolidDialogBody>
+            </SolidDialog>
         </div>
     );
 };

package/dist/components/core/form/fields/widgets/SolidShortTextFieldAvatarWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidShortTextFieldAvatarWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidShortTextFieldAvatarWidget.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAG5E,eAAO,MAAM,+BAA+B,6BAA8B,yBAAyB,4CA2DlG,CAAA"}
+{"version":3,"file":"SolidShortTextFieldAvatarWidget.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidShortTextFieldAvatarWidget.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAG5E,eAAO,MAAM,+BAA+B,6BAA8B,yBAAyB,4CA2DlG,CAAA"}

package/dist/components/core/form/fields/widgets/SolidShortTextFieldAvatarWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidShortTextFieldAvatarWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidShortTextFieldAvatarWidget.tsx"],"names":[],"mappings":";AAUA,MAAM,CAAC,IAAM,+BAA+B,GAAG,UAAC,EAAmD;;QAAjD,MAAM,YAAA,EAAE,YAAY,kBAAA;IAClE,IAAM,aAAa,GAAG,YAAY,CAAC,aAAa,CAAC;IACjD,IAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC;IAC3C,IAAM,UAAU,GAAG,MAAA,eAAe,CAAC,KAAK,CAAC,KAAK,mCAAI,aAAa,CAAC,WAAW,CAAC;IAC5E,IAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACxD,IAAM,WAAW,GAAG,UAAC,KAAa;QAC9B,IAAI,KAAK,EAAE;YACP,IAAM,KAAK,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;YACvC,IAAM,UAAQ,GACV,KAAK,CAAC,MAAM,KAAK,CAAC;gBACd,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACb,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACnD,OAAO,UAAQ,CAAC,WAAW,EAAE,CAAC;SACjC;aAAM;YACH,OAAO,EAAE,CAAA;SACZ;IACL,CAAC,CAAC;IAEF,IAAM,oBAAoB,GAAG,UAAC,QAAgB;QAC1C,IAAI,IAAI,GAAG,CAAC,CAAC;QACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;SACxD;QACD,IAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;QACjC,OAAO,cAAO,GAAG,gBAAa,CAAC,CAAC,oBAAoB;IACxD,CAAC,CAAC;IAEF,IAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IACpC,IAAM,OAAO,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IAG/C,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,aACnC,YAAG,SAAS,EAAC,kCAAkC,YAAE,UAAU,GAAK,EAChE,wBACK,KAAK;oBACF,eAAM,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,aACjE,cACI,KAAK,EAAE;oCACH,KAAK,EAAE,EAAE;oCACT,MAAM,EAAE,EAAE;oCACV,YAAY,EAAE,KAAK;oCACnB,eAAe,EAAE,OAAO;oCACxB,KAAK,EAAE,OAAO;oCACd,OAAO,EAAE,MAAM;oCACf,UAAU,EAAE,QAAQ;oCACpB,cAAc,EAAE,QAAQ;oCACxB,UAAU,EAAE,GAAG;oCACf,QAAQ,EAAE,EAAE;iCACf,YAEA,QAAQ,GACP,EACN,yBAAO,KAAK,GAAQ,IAClB,GAER,IACJ,CACT,CAAC;AACN,CAAC,CAAA","sourcesContent":["\nimport { useEffect, useState } from \"react\";\nimport { Message } from \"primereact/message\";\nimport { classNames } from \"primereact/utils\";\nimport { SelectButton } from \"primereact/selectbutton\";\nimport { AutoComplete, AutoCompleteCompleteEvent } from \"primereact/autocomplete\";\nimport { RadioButton } from \"primereact/radiobutton\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { AvatarWidget } from \"../../../../../components/core/common/AvatarWidget\";\n\nexport const SolidShortTextFieldAvatarWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const value = formik.values[fieldLayoutInfo.attrs.name];\n    const getInitials = (value: string) => {\n        if (value) {\n            const names = value?.trim().split(' ');\n            const initials =\n                names.length === 1\n                    ? names[0][0]\n                    : names[0][0] + names[names.length - 1][0];\n            return initials.toUpperCase();\n        } else {\n            return \"\"\n        }\n    };\n\n    const getColorFromInitials = (initials: string) => {\n        let hash = 0;\n        for (let i = 0; i < initials.length; i++) {\n            hash = initials.charCodeAt(i) + ((hash << 5) - hash);\n        }\n        const hue = Math.abs(hash) % 360;\n        return `hsl(${hue}, 60%, 60%)`; // nice pastel color\n    };\n\n    const initials = getInitials(value);\n    const bgColor = getColorFromInitials(initials);\n\n\n    return (\n        <div className=\"mt-2 flex-column gap-2\">\n            <p className=\"m-0 form-field-label font-medium\">{fieldLabel}</p>\n            <div>\n                {value &&\n                    < div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>\n                        <div\n                            style={{\n                                width: 20,\n                                height: 20,\n                                borderRadius: '50%',\n                                backgroundColor: bgColor,\n                                color: 'white',\n                                display: 'flex',\n                                alignItems: 'center',\n                                justifyContent: 'center',\n                                fontWeight: 600,\n                                fontSize: 12,\n                            }}\n                        >\n                            {initials}\n                        </div>\n                        <span>{value}</span>\n                    </div>\n                }\n            </div>\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"SolidShortTextFieldAvatarWidget.js","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/widgets/SolidShortTextFieldAvatarWidget.tsx"],"names":[],"mappings":";AAKA,MAAM,CAAC,IAAM,+BAA+B,GAAG,UAAC,EAAmD;;QAAjD,MAAM,YAAA,EAAE,YAAY,kBAAA;IAClE,IAAM,aAAa,GAAG,YAAY,CAAC,aAAa,CAAC;IACjD,IAAM,eAAe,GAAG,YAAY,CAAC,KAAK,CAAC;IAC3C,IAAM,UAAU,GAAG,MAAA,eAAe,CAAC,KAAK,CAAC,KAAK,mCAAI,aAAa,CAAC,WAAW,CAAC;IAC5E,IAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACxD,IAAM,WAAW,GAAG,UAAC,KAAa;QAC9B,IAAI,KAAK,EAAE;YACP,IAAM,KAAK,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;YACvC,IAAM,UAAQ,GACV,KAAK,CAAC,MAAM,KAAK,CAAC;gBACd,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACb,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACnD,OAAO,UAAQ,CAAC,WAAW,EAAE,CAAC;SACjC;aAAM;YACH,OAAO,EAAE,CAAA;SACZ;IACL,CAAC,CAAC;IAEF,IAAM,oBAAoB,GAAG,UAAC,QAAgB;QAC1C,IAAI,IAAI,GAAG,CAAC,CAAC;QACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACtC,IAAI,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC;SACxD;QACD,IAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;QACjC,OAAO,cAAO,GAAG,gBAAa,CAAC,CAAC,oBAAoB;IACxD,CAAC,CAAC;IAEF,IAAM,QAAQ,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;IACpC,IAAM,OAAO,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;IAG/C,OAAO,CACH,eAAK,SAAS,EAAC,wBAAwB,aACnC,YAAG,SAAS,EAAC,kCAAkC,YAAE,UAAU,GAAK,EAChE,wBACK,KAAK;oBACF,eAAM,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,aACjE,cACI,KAAK,EAAE;oCACH,KAAK,EAAE,EAAE;oCACT,MAAM,EAAE,EAAE;oCACV,YAAY,EAAE,KAAK;oCACnB,eAAe,EAAE,OAAO;oCACxB,KAAK,EAAE,OAAO;oCACd,OAAO,EAAE,MAAM;oCACf,UAAU,EAAE,QAAQ;oCACpB,cAAc,EAAE,QAAQ;oCACxB,UAAU,EAAE,GAAG;oCACf,QAAQ,EAAE,EAAE;iCACf,YAEA,QAAQ,GACP,EACN,yBAAO,KAAK,GAAQ,IAClB,GAER,IACJ,CACT,CAAC;AACN,CAAC,CAAA","sourcesContent":["\nimport { useState } from \"react\";\nimport { SolidFormFieldWidgetProps } from \"../../../../../types/solid-core\";\nimport { AvatarWidget } from \"../../../../../components/core/common/AvatarWidget\";\n\nexport const SolidShortTextFieldAvatarWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const value = formik.values[fieldLayoutInfo.attrs.name];\n    const getInitials = (value: string) => {\n        if (value) {\n            const names = value?.trim().split(' ');\n            const initials =\n                names.length === 1\n                    ? names[0][0]\n                    : names[0][0] + names[names.length - 1][0];\n            return initials.toUpperCase();\n        } else {\n            return \"\"\n        }\n    };\n\n    const getColorFromInitials = (initials: string) => {\n        let hash = 0;\n        for (let i = 0; i < initials.length; i++) {\n            hash = initials.charCodeAt(i) + ((hash << 5) - hash);\n        }\n        const hue = Math.abs(hash) % 360;\n        return `hsl(${hue}, 60%, 60%)`; // nice pastel color\n    };\n\n    const initials = getInitials(value);\n    const bgColor = getColorFromInitials(initials);\n\n\n    return (\n        <div className=\"mt-2 flex-column gap-2\">\n            <p className=\"m-0 form-field-label font-medium\">{fieldLabel}</p>\n            <div>\n                {value &&\n                    < div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>\n                        <div\n                            style={{\n                                width: 20,\n                                height: 20,\n                                borderRadius: '50%',\n                                backgroundColor: bgColor,\n                                color: 'white',\n                                display: 'flex',\n                                alignItems: 'center',\n                                justifyContent: 'center',\n                                fontWeight: 600,\n                                fontSize: 12,\n                            }}\n                        >\n                            {initials}\n                        </div>\n                        <span>{value}</span>\n                    </div>\n                }\n            </div>\n        </div>\n    );\n}\n"]}

package/dist/components/core/form/fields/widgets/SolidShortTextFieldAvatarWidget.tsx

@@ -1,10 +1,5 @@
 
-import { useEffect, useState } from "react";
-import { Message } from "primereact/message";
-import { classNames } from "primereact/utils";
-import { SelectButton } from "primereact/selectbutton";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { RadioButton } from "primereact/radiobutton";
+import { useState } from "react";
 import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
 import { AvatarWidget } from "../../../../../components/core/common/AvatarWidget";
 

package/dist/components/core/kanban/KanbanBoard.d.ts

@@ -1,3 +1,3 @@
-export declare const KanbanBoard: ({ groupByFieldName, groupedView, kanbanViewData, maxSwimLanesCount, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLanePagination, setLightboxUrls, setOpenLightbox, editButtonUrl }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const KanbanBoard: ({ groupByFieldName, kanbanViewData, maxSwimLanesCount, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLanePagination, setLightboxUrls, setOpenLightbox, editButtonUrl }: any) => import("react/jsx-runtime").JSX.Element;
 export default KanbanBoard;
 //# sourceMappingURL=KanbanBoard.d.ts.map

package/dist/components/core/kanban/KanbanBoard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanBoard.d.ts","sourceRoot":"","sources":["../../../../src/components/core/kanban/KanbanBoard.tsx"],"names":[],"mappings":"AAuBA,eAAO,MAAM,WAAW,2NAA4N,GAAG,4CA0FtP,CAAA;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"KanbanBoard.d.ts","sourceRoot":"","sources":["../../../../src/components/core/kanban/KanbanBoard.tsx"],"names":[],"mappings":"AA+BA,eAAO,MAAM,WAAW,8MAA+M,GAAG,4CAwIzO,CAAA;AAED,eAAe,WAAW,CAAC"}

package/dist/components/core/kanban/KanbanBoard.js

@@ -9,16 +9,48 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-nocheck
 import { useState } from "react";
 import { DragDropContext } from "@hello-pangea/dnd";
 import KanbanColumn from "./KanbanColumn";
+import { getExtensionComponent } from "../../../helpers/registry";
+var findKanbanCardNode = function (nodes) {
+    if (nodes === void 0) { nodes = []; }
+    for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
+        var node = nodes_1[_i];
+        if (!node)
+            continue;
+        if (node.type === "card")
+            return node;
+        if (Array.isArray(node === null || node === void 0 ? void 0 : node.children) && node.children.length > 0) {
+            var nestedCard = findKanbanCardNode(node.children);
+            if (nestedCard)
+                return nestedCard;
+        }
+    }
+    return null;
+};
 export var KanbanBoard = function (_a) {
-    var groupByFieldName = _a.groupByFieldName, groupedView = _a.groupedView, kanbanViewData = _a.kanbanViewData, maxSwimLanesCount = _a.maxSwimLanesCount, solidKanbanViewMetaData = _a.solidKanbanViewMetaData, setKanbanViewData = _a.setKanbanViewData, handleLoadMore = _a.handleLoadMore, onDragEnd = _a.onDragEnd, handleSwimLanePagination = _a.handleSwimLanePagination, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox, editButtonUrl = _a.editButtonUrl;
-    var _b = useState(true), loading = _b[0], setLoading = _b[1];
+    var _b, _c, _d, _e, _f;
+    var groupByFieldName = _a.groupByFieldName, kanbanViewData = _a.kanbanViewData, maxSwimLanesCount = _a.maxSwimLanesCount, solidKanbanViewMetaData = _a.solidKanbanViewMetaData, setKanbanViewData = _a.setKanbanViewData, handleLoadMore = _a.handleLoadMore, onDragEnd = _a.onDragEnd, handleSwimLanePagination = _a.handleSwimLanePagination, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox, editButtonUrl = _a.editButtonUrl;
+    var _g = useState(true), loading = _g[0], setLoading = _g[1];
     // State to manage the folded status of each column
-    var _c = useState({}), foldedStates = _c[0], setFoldedStates = _c[1];
+    var _h = useState({}), foldedStates = _h[0], setFoldedStates = _h[1];
+    var cardNode = findKanbanCardNode(((_c = (_b = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.solidView) === null || _b === void 0 ? void 0 : _b.layout) === null || _c === void 0 ? void 0 : _c.children) || []);
+    var layoutAttrs = ((_e = (_d = solidKanbanViewMetaData === null || solidKanbanViewMetaData === void 0 ? void 0 : solidKanbanViewMetaData.solidView) === null || _d === void 0 ? void 0 : _d.layout) === null || _e === void 0 ? void 0 : _e.attrs) || {};
+    var isKanbanDragEnabled = layoutAttrs.draggable !== false &&
+        layoutAttrs.dragAndDrop !== false &&
+        layoutAttrs.enableDrag !== false &&
+        layoutAttrs.disableDrag !== true &&
+        layoutAttrs.disableDragging !== true;
+    var cardWidget = ((_f = cardNode === null || cardNode === void 0 ? void 0 : cardNode.attrs) === null || _f === void 0 ? void 0 : _f.cardWidget) || (cardNode === null || cardNode === void 0 ? void 0 : cardNode.cardWidget);
+    var DynamicCardWidget = cardWidget ? getExtensionComponent(cardWidget) : null;
+    var kanbanCardConfigurationIssue = !cardWidget
+        ? { type: "missing_widget_reference" }
+        : !DynamicCardWidget
+            ? { type: "missing_widget", cardWidget: cardWidget }
+            : null;
     // Toggle fold (not yet implemented)
     var toggleFold = function (status) {
         setFoldedStates(function (prevFoldedStates) {
@@ -29,7 +61,11 @@ export var KanbanBoard = function (_a) {
     // Render the Kanban board
     return (
     //@ts-ignore
-    _jsx("div", { className: "solid-kanban-board-wrapper", children: _jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsxs("div", { className: "flex gap-4 px-4 md:px-5 py-3 md:py-4 solid-kanban-board-scroll-context", children: [kanbanViewData.map(function (data) {
+    _jsx("div", { className: "solid-kanban-board-wrapper", children: kanbanCardConfigurationIssue ? (_jsx("div", { className: "solid-kanban-config-placeholder-container", children: _jsxs("div", { className: "solid-kanban-config-placeholder-panel", children: [_jsx("div", { className: "solid-kanban-config-placeholder-badge", children: "KANBAN CONFIGURATION" }), _jsx("div", { className: "solid-kanban-config-placeholder-title", children: kanbanCardConfigurationIssue.type === "missing_widget"
+                            ? "Kanban card widget could not be resolved"
+                            : "Kanban card widget is not configured" }), _jsx("div", { className: "solid-kanban-config-placeholder-description", children: kanbanCardConfigurationIssue.type === "missing_widget" ? (_jsxs(_Fragment, { children: ["This kanban view references ", _jsx("code", { children: kanbanCardConfigurationIssue.cardWidget }), ", but no matching card widget is registered."] })) : (_jsxs(_Fragment, { children: ["This kanban view does not define a ", _jsx("code", { children: "cardWidget" }), " on the card node."] })) }), _jsx("div", { className: "solid-kanban-config-placeholder-hint", children: kanbanCardConfigurationIssue.type === "missing_widget"
+                            ? "Register the widget in the extension registry or update the kanban metadata to point at a valid component."
+                            : "Configure attrs.cardWidget on the kanban card metadata so the board can render each record." })] }) })) : (_jsx(DragDropContext, { onDragEnd: onDragEnd, children: _jsxs("div", { className: "flex gap-3 px-3 md:px-4 py-2 md:py-3 solid-kanban-board-scroll-context", children: [kanbanViewData.map(function (data) {
                         var _a;
                         // Find the displayName for the groupName from solidKanbanViewMetaData.solidFieldsMetadata
                         var label = data.groupName;
@@ -52,9 +88,9 @@ export var KanbanBoard = function (_a) {
                             currentPage: data.groupData.meta.currentPage,
                             folded: foldedStates[data.groupName] || false,
                         };
-                        return (_jsx(KanbanColumn, { groupedView: groupedView, groupByField: data.groupName, group: group, solidKanbanViewMetaData: solidKanbanViewMetaData, groupData: data.groupData.records, toggleFold: toggleFold, handleLoadMore: handleLoadMore, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox, editButtonUrl: editButtonUrl }, data.groupName));
-                    }), groupedView !== false && kanbanViewData.length < maxSwimLanesCount &&
-                        _jsx("div", { children: _jsxs("a", { size: "small", className: "kaban-swimlane-load-more", style: { textWrap: 'nowrap' }, text: true, onClick: handleSwimLanePagination, children: ["Load More...(", maxSwimLanesCount - kanbanViewData.length, ")"] }) })] }) }) }));
+                        return (_jsx(KanbanColumn, { groupByField: data.groupName, group: group, isKanbanDragEnabled: isKanbanDragEnabled, solidKanbanViewMetaData: solidKanbanViewMetaData, groupData: data.groupData.records, toggleFold: toggleFold, handleLoadMore: handleLoadMore, setLightboxUrls: setLightboxUrls, setOpenLightbox: setOpenLightbox, editButtonUrl: editButtonUrl, cardNode: cardNode, DynamicCardWidget: DynamicCardWidget }, data.groupName));
+                    }), kanbanViewData.length < maxSwimLanesCount &&
+                        _jsx("div", { children: _jsxs("a", { size: "small", className: "kaban-swimlane-load-more", style: { textWrap: 'nowrap' }, text: true, onClick: handleSwimLanePagination, children: ["Load More...(", maxSwimLanesCount - kanbanViewData.length, ")"] }) })] }) })) }));
 };
 export default KanbanBoard;
 //# sourceMappingURL=KanbanBoard.js.map

package/dist/components/core/kanban/KanbanBoard.js.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanBoard.js","sourceRoot":"","sources":["../../../../src/components/core/kanban/KanbanBoard.tsx"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\nimport { useState } from \"react\";\nimport { DragDropContext } from \"@hello-pangea/dnd\";\nimport KanbanColumn from \"./KanbanColumn\";\n\n// Define types for groupData and Grouped Data\ninterface Post {\n    id: string;\n    title: string;\n    status: string;\n}\n\ninterface GroupData {\n    count: number;\n    records: Post[];\n}\n\ninterface ApiResponse {\n    data: {\n        groupedData: Record<string, GroupData>;\n    };\n}\n\nexport const KanbanBoard = ({ groupByFieldName, groupedView, kanbanViewData, maxSwimLanesCount, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLanePagination, setLightboxUrls, setOpenLightbox, editButtonUrl }: any) => {\n    const [loading, setLoading] = useState<boolean>(true);\n    // State to manage the folded status of each column\n    const [foldedStates, setFoldedStates] = useState<Record<string, boolean>>({});\n\n    // Toggle fold (not yet implemented)\n    const toggleFold = (status: string): void => {\n        setFoldedStates((prevFoldedStates) => ({\n            ...prevFoldedStates,\n            [status]: !prevFoldedStates[status],\n        }));\n    };\n\n    // Render the Kanban board\n    return (\n        //@ts-ignore\n        <div className=\"solid-kanban-board-wrapper\">\n            <DragDropContext onDragEnd={onDragEnd}>\n                <div className=\"flex gap-4 px-4 md:px-5 py-3 md:py-4 solid-kanban-board-scroll-context\">\n                    {/* {Object.entries(kanbanViewData).map(([groupVal, data]) => {\n                    const group = {\n                        label: groupVal,\n                        count: data.count,\n                        folded: foldedStates[groupVal] || false,\n                    };\n\n                    return (\n                        <KanbanColumn\n                            key={groupVal}\n                            groupByField={groupVal}\n                            group={group}\n                            groupData={data.records}\n                            toggleFold={toggleFold}\n                            handleLoadMore={handleLoadMore}\n                        />\n                    );\n                })} */}\n                    {kanbanViewData.map((data: any) => {\n                        // Find the displayName for the groupName from solidKanbanViewMetaData.solidFieldsMetadata\n                        let label = data.groupName;\n                        const fieldMeta = solidKanbanViewMetaData?.solidFieldsMetadata?.[groupByFieldName];\n                        if (\n                            fieldMeta &&\n                            fieldMeta.type === \"selectionStatic\" &&\n                            Array.isArray(fieldMeta.selectionStaticValues)\n                        ) {\n                            const match = fieldMeta.selectionStaticValues.find(\n                                (v: string) => {\n                                    const [value, displayName] = v.split(\":\");\n                                    return value === data.groupName;\n                                }\n                            );\n                            if (match) {\n                                label = match.split(\":\")[1];\n                            }\n                        }\n\n                        const group = {\n                            label,\n                            count: data.groupData.meta.totalRecords,\n                            limit: data.groupData.meta.perPage,\n                            currentPage: data.groupData.meta.currentPage,\n                            folded: foldedStates[data.groupName] || false,\n                        };\n\n                        return (\n                            <KanbanColumn\n                                key={data.groupName}\n                                groupedView={groupedView}\n                                groupByField={data.groupName}\n                                group={group}\n                                solidKanbanViewMetaData={solidKanbanViewMetaData}\n                                groupData={data.groupData.records}\n                                toggleFold={toggleFold}\n                                handleLoadMore={handleLoadMore}\n                                setLightboxUrls={setLightboxUrls}\n                                setOpenLightbox={setOpenLightbox}\n                                editButtonUrl={editButtonUrl}\n                            />\n                        );\n                    })}\n                    {groupedView !== false && kanbanViewData.length < maxSwimLanesCount &&\n                        <div>\n                            <a size=\"small\" className=\"kaban-swimlane-load-more\" style={{ textWrap: 'nowrap' }} text onClick={handleSwimLanePagination}>Load More...({maxSwimLanesCount - kanbanViewData.length})</a>\n                        </div>\n                    }\n                </div>\n            </DragDropContext>\n        </div>\n    );\n}\n\nexport default KanbanBoard;\n"]}
+{"version":3,"file":"KanbanBoard.js","sourceRoot":"","sources":["../../../../src/components/core/kanban/KanbanBoard.tsx"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\nimport { useState } from \"react\";\nimport { DragDropContext } from \"@hello-pangea/dnd\";\nimport KanbanColumn from \"./KanbanColumn\";\nimport { getExtensionComponent } from \"../../../helpers/registry\";\n\n// Define types for groupData and Grouped Data\ninterface Post {\n    id: string;\n    title: string;\n    status: string;\n}\n\ninterface GroupData {\n    count: number;\n    records: Post[];\n}\n\nconst findKanbanCardNode = (nodes: any[] = []): any => {\n    for (const node of nodes) {\n        if (!node) continue;\n        if (node.type === \"card\") return node;\n        if (Array.isArray(node?.children) && node.children.length > 0) {\n            const nestedCard = findKanbanCardNode(node.children);\n            if (nestedCard) return nestedCard;\n        }\n    }\n\n    return null;\n};\n\nexport const KanbanBoard = ({ groupByFieldName, kanbanViewData, maxSwimLanesCount, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLanePagination, setLightboxUrls, setOpenLightbox, editButtonUrl }: any) => {\n    const [loading, setLoading] = useState<boolean>(true);\n    // State to manage the folded status of each column\n    const [foldedStates, setFoldedStates] = useState<Record<string, boolean>>({});\n    const cardNode = findKanbanCardNode(solidKanbanViewMetaData?.solidView?.layout?.children || []);\n    const layoutAttrs = solidKanbanViewMetaData?.solidView?.layout?.attrs || {};\n    const isKanbanDragEnabled =\n        layoutAttrs.draggable !== false &&\n        layoutAttrs.dragAndDrop !== false &&\n        layoutAttrs.enableDrag !== false &&\n        layoutAttrs.disableDrag !== true &&\n        layoutAttrs.disableDragging !== true;\n    const cardWidget = cardNode?.attrs?.cardWidget || cardNode?.cardWidget;\n    const DynamicCardWidget = cardWidget ? getExtensionComponent(cardWidget) : null;\n    const kanbanCardConfigurationIssue = !cardWidget\n        ? { type: \"missing_widget_reference\" }\n        : !DynamicCardWidget\n            ? { type: \"missing_widget\", cardWidget }\n            : null;\n\n    // Toggle fold (not yet implemented)\n    const toggleFold = (status: string): void => {\n        setFoldedStates((prevFoldedStates) => ({\n            ...prevFoldedStates,\n            [status]: !prevFoldedStates[status],\n        }));\n    };\n\n    // Render the Kanban board\n    return (\n        //@ts-ignore\n        <div className=\"solid-kanban-board-wrapper\">\n            {kanbanCardConfigurationIssue ? (\n                <div className=\"solid-kanban-config-placeholder-container\">\n                    <div className=\"solid-kanban-config-placeholder-panel\">\n                        <div className=\"solid-kanban-config-placeholder-badge\">KANBAN CONFIGURATION</div>\n                        <div className=\"solid-kanban-config-placeholder-title\">\n                            {kanbanCardConfigurationIssue.type === \"missing_widget\"\n                                ? \"Kanban card widget could not be resolved\"\n                                : \"Kanban card widget is not configured\"}\n                        </div>\n                        <div className=\"solid-kanban-config-placeholder-description\">\n                            {kanbanCardConfigurationIssue.type === \"missing_widget\" ? (\n                                <>\n                                    This kanban view references <code>{kanbanCardConfigurationIssue.cardWidget}</code>, but no matching card widget is registered.\n                                </>\n                            ) : (\n                                <>\n                                    This kanban view does not define a <code>cardWidget</code> on the card node.\n                                </>\n                            )}\n                        </div>\n                        <div className=\"solid-kanban-config-placeholder-hint\">\n                            {kanbanCardConfigurationIssue.type === \"missing_widget\"\n                                ? \"Register the widget in the extension registry or update the kanban metadata to point at a valid component.\"\n                                : \"Configure attrs.cardWidget on the kanban card metadata so the board can render each record.\"}\n                        </div>\n                    </div>\n                </div>\n            ) : (\n            <DragDropContext onDragEnd={onDragEnd}>\n                <div className=\"flex gap-3 px-3 md:px-4 py-2 md:py-3 solid-kanban-board-scroll-context\">\n                    {/* {Object.entries(kanbanViewData).map(([groupVal, data]) => {\n                    const group = {\n                        label: groupVal,\n                        count: data.count,\n                        folded: foldedStates[groupVal] || false,\n                    };\n\n                    return (\n                        <KanbanColumn\n                            key={groupVal}\n                            groupByField={groupVal}\n                            group={group}\n                            groupData={data.records}\n                            toggleFold={toggleFold}\n                            handleLoadMore={handleLoadMore}\n                        />\n                    );\n                })} */}\n                    {kanbanViewData.map((data: any) => {\n                        // Find the displayName for the groupName from solidKanbanViewMetaData.solidFieldsMetadata\n                        let label = data.groupName;\n                        const fieldMeta = solidKanbanViewMetaData?.solidFieldsMetadata?.[groupByFieldName];\n                        if (\n                            fieldMeta &&\n                            fieldMeta.type === \"selectionStatic\" &&\n                            Array.isArray(fieldMeta.selectionStaticValues)\n                        ) {\n                            const match = fieldMeta.selectionStaticValues.find(\n                                (v: string) => {\n                                    const [value, displayName] = v.split(\":\");\n                                    return value === data.groupName;\n                                }\n                            );\n                            if (match) {\n                                label = match.split(\":\")[1];\n                            }\n                        }\n\n                        const group = {\n                            label,\n                            count: data.groupData.meta.totalRecords,\n                            limit: data.groupData.meta.perPage,\n                            currentPage: data.groupData.meta.currentPage,\n                            folded: foldedStates[data.groupName] || false,\n                        };\n\n                        return (\n                            <KanbanColumn\n                                key={data.groupName}\n                                groupByField={data.groupName}\n                                group={group}\n                                isKanbanDragEnabled={isKanbanDragEnabled}\n                                solidKanbanViewMetaData={solidKanbanViewMetaData}\n                                groupData={data.groupData.records}\n                                toggleFold={toggleFold}\n                                handleLoadMore={handleLoadMore}\n                                setLightboxUrls={setLightboxUrls}\n                                setOpenLightbox={setOpenLightbox}\n                                editButtonUrl={editButtonUrl}\n                                cardNode={cardNode}\n                                DynamicCardWidget={DynamicCardWidget}\n                            />\n                        );\n                    })}\n                    {kanbanViewData.length < maxSwimLanesCount &&\n                        <div>\n                            <a size=\"small\" className=\"kaban-swimlane-load-more\" style={{ textWrap: 'nowrap' }} text onClick={handleSwimLanePagination}>Load More...({maxSwimLanesCount - kanbanViewData.length})</a>\n                        </div>\n                    }\n                </div>\n            </DragDropContext>\n            )}\n        </div>\n    );\n}\n\nexport default KanbanBoard;\n"]}

package/dist/components/core/kanban/KanbanBoard.tsx

@@ -2,6 +2,7 @@
 import { useState } from "react";
 import { DragDropContext } from "@hello-pangea/dnd";
 import KanbanColumn from "./KanbanColumn";
+import { getExtensionComponent } from "../../../helpers/registry";
 
 // Define types for groupData and Grouped Data
 interface Post {
@@ -15,16 +16,38 @@ interface GroupData {
     records: Post[];
 }
 
-interface ApiResponse {
-    data: {
-        groupedData: Record<string, GroupData>;
-    };
-}
+const findKanbanCardNode = (nodes: any[] = []): any => {
+    for (const node of nodes) {
+        if (!node) continue;
+        if (node.type === "card") return node;
+        if (Array.isArray(node?.children) && node.children.length > 0) {
+            const nestedCard = findKanbanCardNode(node.children);
+            if (nestedCard) return nestedCard;
+        }
+    }
 
-export const KanbanBoard = ({ groupByFieldName, groupedView, kanbanViewData, maxSwimLanesCount, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLanePagination, setLightboxUrls, setOpenLightbox, editButtonUrl }: any) => {
+    return null;
+};
+
+export const KanbanBoard = ({ groupByFieldName, kanbanViewData, maxSwimLanesCount, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLanePagination, setLightboxUrls, setOpenLightbox, editButtonUrl }: any) => {
     const [loading, setLoading] = useState<boolean>(true);
     // State to manage the folded status of each column
     const [foldedStates, setFoldedStates] = useState<Record<string, boolean>>({});
+    const cardNode = findKanbanCardNode(solidKanbanViewMetaData?.solidView?.layout?.children || []);
+    const layoutAttrs = solidKanbanViewMetaData?.solidView?.layout?.attrs || {};
+    const isKanbanDragEnabled =
+        layoutAttrs.draggable !== false &&
+        layoutAttrs.dragAndDrop !== false &&
+        layoutAttrs.enableDrag !== false &&
+        layoutAttrs.disableDrag !== true &&
+        layoutAttrs.disableDragging !== true;
+    const cardWidget = cardNode?.attrs?.cardWidget || cardNode?.cardWidget;
+    const DynamicCardWidget = cardWidget ? getExtensionComponent(cardWidget) : null;
+    const kanbanCardConfigurationIssue = !cardWidget
+        ? { type: "missing_widget_reference" }
+        : !DynamicCardWidget
+            ? { type: "missing_widget", cardWidget }
+            : null;
 
     // Toggle fold (not yet implemented)
     const toggleFold = (status: string): void => {
@@ -38,8 +61,36 @@ export const KanbanBoard = ({ groupByFieldName, groupedView, kanbanViewData, max
     return (
         //@ts-ignore
         <div className="solid-kanban-board-wrapper">
+            {kanbanCardConfigurationIssue ? (
+                <div className="solid-kanban-config-placeholder-container">
+                    <div className="solid-kanban-config-placeholder-panel">
+                        <div className="solid-kanban-config-placeholder-badge">KANBAN CONFIGURATION</div>
+                        <div className="solid-kanban-config-placeholder-title">
+                            {kanbanCardConfigurationIssue.type === "missing_widget"
+                                ? "Kanban card widget could not be resolved"
+                                : "Kanban card widget is not configured"}
+                        </div>
+                        <div className="solid-kanban-config-placeholder-description">
+                            {kanbanCardConfigurationIssue.type === "missing_widget" ? (
+                                <>
+                                    This kanban view references <code>{kanbanCardConfigurationIssue.cardWidget}</code>, but no matching card widget is registered.
+                                </>
+                            ) : (
+                                <>
+                                    This kanban view does not define a <code>cardWidget</code> on the card node.
+                                </>
+                            )}
+                        </div>
+                        <div className="solid-kanban-config-placeholder-hint">
+                            {kanbanCardConfigurationIssue.type === "missing_widget"
+                                ? "Register the widget in the extension registry or update the kanban metadata to point at a valid component."
+                                : "Configure attrs.cardWidget on the kanban card metadata so the board can render each record."}
+                        </div>
+                    </div>
+                </div>
+            ) : (
             <DragDropContext onDragEnd={onDragEnd}>
-                <div className="flex gap-4 px-4 md:px-5 py-3 md:py-4 solid-kanban-board-scroll-context">
+                <div className="flex gap-3 px-3 md:px-4 py-2 md:py-3 solid-kanban-board-scroll-context">
                     {/* {Object.entries(kanbanViewData).map(([groupVal, data]) => {
                     const group = {
                         label: groupVal,
@@ -89,9 +140,9 @@ export const KanbanBoard = ({ groupByFieldName, groupedView, kanbanViewData, max
                         return (
                             <KanbanColumn
                                 key={data.groupName}
-                                groupedView={groupedView}
                                 groupByField={data.groupName}
                                 group={group}
+                                isKanbanDragEnabled={isKanbanDragEnabled}
                                 solidKanbanViewMetaData={solidKanbanViewMetaData}
                                 groupData={data.groupData.records}
                                 toggleFold={toggleFold}
@@ -99,16 +150,19 @@ export const KanbanBoard = ({ groupByFieldName, groupedView, kanbanViewData, max
                                 setLightboxUrls={setLightboxUrls}
                                 setOpenLightbox={setOpenLightbox}
                                 editButtonUrl={editButtonUrl}
+                                cardNode={cardNode}
+                                DynamicCardWidget={DynamicCardWidget}
                             />
                         );
                     })}
-                    {groupedView !== false && kanbanViewData.length < maxSwimLanesCount &&
+                    {kanbanViewData.length < maxSwimLanesCount &&
                         <div>
                             <a size="small" className="kaban-swimlane-load-more" style={{ textWrap: 'nowrap' }} text onClick={handleSwimLanePagination}>Load More...({maxSwimLanesCount - kanbanViewData.length})</a>
                         </div>
                     }
                 </div>
             </DragDropContext>
+            )}
         </div>
     );
 }

package/dist/components/core/kanban/KanbanCard.d.ts

@@ -8,6 +8,14 @@ interface KanbanCardProps {
     data: Data;
     solidKanbanViewMetaData: any;
     index: number;
+    isDragDisabled?: boolean;
+    setLightboxUrls?: any;
+    setOpenLightbox?: any;
+    editButtonUrl?: string;
+    groupByFieldName?: string;
+    group?: any;
+    cardNode?: any;
+    DynamicCardWidget?: any;
 }
 declare const KanbanCard: React.FC<KanbanCardProps>;
 export default KanbanCard;

package/dist/components/core/kanban/KanbanCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"KanbanCard.d.ts","sourceRoot":"","sources":["../../../../src/components/core/kanban/KanbanCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAUtC,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,IAAI,CAAC;IACX,uBAAuB,EAAE,GAAG,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;CACf;AA2BD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqOzC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"KanbanCard.d.ts","sourceRoot":"","sources":["../../../../src/components/core/kanban/KanbanCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,UAAU,IAAI;IACZ,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,eAAe;IACvB,IAAI,EAAE,IAAI,CAAC;IACX,uBAAuB,EAAE,GAAG,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,GAAG,CAAC;IACZ,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,iBAAiB,CAAC,EAAE,GAAG,CAAC;CACzB;AAED,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAuFzC,CAAC;AAEF,eAAe,UAAU,CAAC"}