@solidstarters/solid-core-ui 1.1.43 → 1.1.45

package/dist/components/core/list/columns/SolidMediaSingleColumn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidMediaSingleColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/list/columns/SolidMediaSingleColumn.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAKnE,QAAA,MAAM,sBAAsB,uFAAwF,yBAAyB,4CAmD5I,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"SolidMediaSingleColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/list/columns/SolidMediaSingleColumn.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AA8BnE,QAAA,MAAM,sBAAsB,uFAAwF,yBAAyB,4CAqC5I,CAAC;AAEF,eAAe,sBAAsB,CAAC"}

package/dist/components/core/list/columns/SolidMediaSingleColumn.js

@@ -1,33 +1,34 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Column } from "primereact/column";
+import { classNames } from 'primereact/utils';
+var isImageFile = function (url) {
+    return /\.(jpg|jpeg|png|gif|bmp|webp)$/i.test(url);
+};
+var MediaWithFallback = function (_a) {
+    var src = _a.src, alt = _a.alt, onClick = _a.onClick;
+    var _b = useState(false), isBroken = _b[0], setIsBroken = _b[1];
+    return (_jsx("div", { style: { width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center' }, children: !isBroken && isImageFile(src) ? (_jsx("img", { src: src, alt: alt, className: "shadow-2 border-round", width: 40, height: 40, style: { objectFit: "cover" }, onError: function () { return setIsBroken(true); }, onClick: onClick })) : (_jsx("i", { className: classNames(isImageFile(src) ? "pi pi-image" : "pi pi-file", "text-3xl text-gray-400") }) // Image or file icon
+        ) }));
+};
 var SolidMediaSingleColumn = function (_a) {
-    // const filterable = column.attrs.filterable;
     var _b;
     var solidListViewMetaData = _a.solidListViewMetaData, fieldMetadata = _a.fieldMetadata, column = _a.column, setLightboxUrls = _a.setLightboxUrls, setOpenLightbox = _a.setOpenLightbox;
-    var filterable = false;
-    var showFilterOperator = false;
-    var columnDataType = undefined;
     var header = (_b = column.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
-    var imageBodyTemplate = function (product) {
+    var mediaBodyTemplate = function (product) {
         var _a;
         if (!((_a = product === null || product === void 0 ? void 0 : product._media) === null || _a === void 0 ? void 0 : _a[fieldMetadata.name]))
             return null;
-        var imageUrls = product._media[fieldMetadata.name].map(function (i) { return i._full_url; });
-        return (imageUrls.length > 0 ?
-            _jsx("img", { src: imageUrls[0], alt: "product-image-single", className: "shadow-2 border-round", width: 40, height: 40, style: { objectFit: "cover" }, onClick: function (event) {
-                    event.stopPropagation();
-                    setLightboxUrls([{ src: imageUrls[0], downloadUrl: imageUrls[0] }]);
-                    setOpenLightbox(true);
-                } })
-            :
-                _jsx("div", { style: { height: 40, width: 40 } }));
+        var mediaUrls = product._media[fieldMetadata.name].map(function (i) { return i._full_url; });
+        return (mediaUrls.length > 0 ? (_jsx(MediaWithFallback, { src: mediaUrls[0], alt: "product-media", onClick: function (event) {
+                event.stopPropagation();
+                setLightboxUrls([{ src: mediaUrls[0], downloadUrl: mediaUrls[0] }]);
+                setOpenLightbox(true);
+            } })) : (_jsx("i", { className: "pi pi-image text-3xl text-gray-400" }) // Default fallback icon
+        ));
     };
-    return (_jsx(Column, { field: fieldMetadata.name, header: header, body: imageBodyTemplate, 
-        // className="text-sm"
-        sortable: column.attrs.sortable, 
-        // filter={filterable}
-        dataType: columnDataType, showFilterOperator: showFilterOperator, filterPlaceholder: "Search by ".concat(fieldMetadata.displayName), style: { minWidth: "12rem" }, headerClassName: "table-header-fs" }, fieldMetadata.name));
+    return (_jsx(Column, { field: fieldMetadata.name, header: header, body: mediaBodyTemplate, sortable: column.attrs.sortable, showFilterOperator: false, filterPlaceholder: "Search by ".concat(fieldMetadata.displayName), style: { minWidth: "12rem" }, headerClassName: "table-header-fs" }, fieldMetadata.name));
 };
 export default SolidMediaSingleColumn;
 //# sourceMappingURL=SolidMediaSingleColumn.js.map

package/dist/components/core/list/columns/SolidMediaSingleColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidMediaSingleColumn.js","sourceRoot":"","sources":["../../../../../src/components/core/list/columns/SolidMediaSingleColumn.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,MAAM,EAAsC,MAAM,mBAAmB,CAAC;AAO/E,IAAM,sBAAsB,GAAG,UAAC,EAA6G;IACzI,8CAA8C;;QADhB,qBAAqB,2BAAA,EAAE,aAAa,mBAAA,EAAE,MAAM,YAAA,EAAE,eAAe,qBAAA,EAAE,eAAe,qBAAA;IAG5G,IAAM,UAAU,GAAG,KAAK,CAAC;IACzB,IAAM,kBAAkB,GAAG,KAAK,CAAC;IACjC,IAAM,cAAc,GAAG,SAAS,CAAC;IACjC,IAAM,MAAM,GAAG,MAAA,MAAM,CAAC,KAAK,CAAC,KAAK,mCAAI,aAAa,CAAC,WAAW,CAAC;IAC/D,IAAM,iBAAiB,GAAG,UAAC,OAAY;;QACnC,IAAI,CAAC,CAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,0CAAG,aAAa,CAAC,IAAI,CAAC,CAAA;YAAE,OAAO,IAAI,CAAC;QACxD,IAAM,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,UAAC,CAAM,IAAK,OAAA,CAAC,CAAC,SAAS,EAAX,CAAW,CAAC,CAAC;QAElF,OAAO,CACH,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;YAClB,cACI,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,EACjB,GAAG,EAAC,sBAAsB,EAC1B,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,EAC7B,OAAO,EAAE,UAAC,KAAK;oBACX,KAAK,CAAC,eAAe,EAAE,CAAC;oBACxB,eAAe,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;oBACpE,eAAe,CAAC,IAAI,CAAC,CAAC;gBAC1B,CAAC,GACH;YACF,CAAC;gBACD,cACI,KAAK,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,GAE9B,CACb,CAAC;IACN,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,MAAM,IAEH,KAAK,EAAE,aAAa,CAAC,IAAI,EACzB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,iBAAiB;QACvB,sBAAsB;QACtB,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,QAAQ;QAC/B,sBAAsB;QACtB,QAAQ,EAAE,cAAc,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,oBAAa,aAAa,CAAC,WAAW,CAAE,EAC3D,KAAK,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,EAC5B,eAAe,EAAC,iBAAiB,IAX5B,aAAa,CAAC,IAAI,CAYjB,CACb,CAAC;AAEN,CAAC,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"SolidMediaSingleColumn.js","sourceRoot":"","sources":["../../../../../src/components/core/list/columns/SolidMediaSingleColumn.tsx"],"names":[],"mappings":"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"}

package/dist/resources/globals.css

@@ -1529,21 +1529,14 @@ li.header-li-px {
   font-size: 0.8rem;
 }
 
-.kanban-options-panel .p-overlaypanel-content {
-  padding: 0 !important;
-}
-
-.kanban-options-panel .p-overlaypanel-content span {
-  padding: 0 !important;
-  font-size: 1rem;
-}
-
 .kanban-column {
   flex: 1;
-  max-width: 350px;
-  background: #f0f0f5;
+  min-width: 270px;
+  width: 100%;
+  max-width: 270px;
+  /* background: #f0f0f5;
   border: 8px;
-  padding: 0.2rem;
+  padding: 0.2rem; */
 }
 
 .kanban-card {
@@ -1565,19 +1558,15 @@ li.header-li-px {
   color: #4b4d52;
 }
 
-.kanban-group-heading {
-  font-size: 1rem;
-  font-weight: 600;
-  letter-spacing: 2px;
-}
-
 .kanban-column-folded {
   flex-grow: 0;
-  background: #f0f0f5;
+  background: #F4F4F4;
   border: 8px;
   padding: 5px;
   height: 100%;
-  font-size: 1rem;
+  min-width:fit-content;
+  width: 100%;
+  max-width:fit-content;
 }
 
 .kaban-heading-area {
@@ -2902,6 +2891,66 @@ li.header-li-px {
   max-width: calc(20% - 10px);
 }
 
-.image-preview{
-  max-width: 100px;
+.solid-kanban-card {
+  box-shadow: none;
+  border-radius: 0.5rem;
+  border: 1px solid rgba(216, 226, 234, 0.60);
+  background: #FFF;
+  padding: 9px;
+}
+
+.kanban-group-heading {
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.kanban-count-badge {
+  display: flex;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0.125rem;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  border-radius: 6.25rem;
+  background: #F6FAFF;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--primary-color);
+}
+
+.kanban-image-preview {
+  /* width: 100px; */
+  /* width: 240px;
+height: 120px;
+flex-shrink: 0; */
+  width: 100%;
+  border-radius: 8px;
+  max-height: 120px;
+}
+
+.solid-kanban-board-wrapper {
+  border-top: 1px solid #CED0D6;
+  overflow: hidden;
+  height: calc(100vh - 64px) !important;
+}
+
+.solid-kanban-board-scroll-context {
+  overflow: auto;
+  height: 100%;
+}
+
+.kanban-column-cogwheel.p-button.p-button-icon-only.p-button-rounded {
+  height: 2rem;
+  width: 2rem;
+}
+
+.kanban-column-cogwheel.p-button.p-button-secondary.p-button-text:not(:disabled):active {
+  background: transparent;
+}
+
+.kanban-column-cogwheel.p-button.p-button-secondary.p-button-text:not(:disabled):hover {
+  background: transparent;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidstarters/solid-core-ui",
-  "version": "1.1.43",
+  "version": "1.1.45",
   "scripts": {
     "prebuild": "npm run copy-styles",
     "build": "tsc && tsc-alias",

package/publish.js

@@ -6,6 +6,9 @@ try {
   console.log(`🔄 Updating package version (${versionType})...`);
   execSync(`npm version ${versionType}`, { stdio: "inherit" });
 
+  console.log("📦 Pushing to git ...");
+  execSync("git push", { stdio: "inherit" });
+
   console.log("📦 Publishing package...");
   execSync("npm publish", { stdio: "inherit" });
 

package/src/components/common/SolidModuleHome.tsx

@@ -1,65 +1,58 @@
 "use client"
-import { Card } from "primereact/card"
-type SolidModuleParams = {
-    moduleName: string;
-}
-export const SolidModuleHome = (params: SolidModuleParams) => {
-    const formatName = (moduleName: string) => {
-        return moduleName
-            .split('-')
-            .map(word => word.charAt(0).toUpperCase() + word.slice(1)) // Capitalize each word
-            .join(' ');
-    };
+
+export const SolidModuleHome = () => {
     return (
-        <div className="page-parent-wrapper">
-            <div className="surface-0 text-center">
-                <div className="mb-3 font-bold text-3xl">
-                    <span className="text-900">One Product, </span>
-                    <span className="text-blue-600">Many Solutions</span>
-                </div>
-                <div className="text-700 mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
-                <div className="grid">
-                    <div className="col-12 md:col-4 mb-4 px-5">
-                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
-                            <i className="pi pi-desktop text-4xl text-blue-500"></i>
-                        </span>
-                        <div className="text-900 text-xl mb-3 font-medium">Built for Developers</div>
-                        <span className="text-700 line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
-                    </div>
-                    <div className="col-12 md:col-4 mb-4 px-5">
-                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
-                            <i className="pi pi-lock text-4xl text-blue-500"></i>
-                        </span>
-                        <div className="text-900 text-xl mb-3 font-medium">End-to-End Encryption</div>
-                        <span className="text-700 line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
-                    </div>
-                    <div className="col-12 md:col-4 mb-4 px-5">
-                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
-                            <i className="pi pi-check-circle text-4xl text-blue-500"></i>
-                        </span>
-                        <div className="text-900 text-xl mb-3 font-medium">Easy to Use</div>
-                        <span className="text-700 line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
-                    </div>
-                    <div className="col-12 md:col-4 mb-4 px-5">
-                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
-                            <i className="pi pi-globe text-4xl text-blue-500"></i>
-                        </span>
-                        <div className="text-900 text-xl mb-3 font-medium">Fast & Global Support</div>
-                        <span className="text-700 line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
-                    </div>
-                    <div className="col-12 md:col-4 mb-4 px-5">
-                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
-                            <i className="pi pi-github text-4xl text-blue-500"></i>
-                        </span>
-                        <div className="text-900 text-xl mb-3 font-medium">Open Source</div>
-                        <span className="text-700 line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
+        <div className="h-screen surface-0 text-center p-5">
+            <div className="row">
+                <div className="col-11 mx-auto">
+                    <div className="mb-3 font-bold text-3xl">
+                        <span className="text-900">One Product, </span>
+                        <span className="text-primary">Many Solutions</span>
                     </div>
-                    <div className="col-12 md:col-4 md:mb-4 mb-0 px-3">
-                        <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
-                            <i className="pi pi-shield text-4xl text-blue-500"></i>
-                        </span>
-                        <div className="text-900 text-xl mb-3 font-medium">Trusted Securitty</div>
-                        <span className="text-700 line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
+                    <div className="text-700 mb-6">Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.</div>
+                    <div className="grid">
+                        <div className="col-12 md:col-4 mb-4 px-5">
+                            <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                                <i className="pi pi-desktop text-4xl text-primary"></i>
+                            </span>
+                            <div className="text-900 text-xl mb-3 font-medium">Built for Developers</div>
+                            <span className="text-700 line-height-3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</span>
+                        </div>
+                        <div className="col-12 md:col-4 mb-4 px-5">
+                            <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                                <i className="pi pi-lock text-4xl text-primary"></i>
+                            </span>
+                            <div className="text-900 text-xl mb-3 font-medium">End-to-End Encryption</div>
+                            <span className="text-700 line-height-3">Risus nec feugiat in fermentum posuere urna nec. Posuere sollicitudin aliquam ultrices sagittis.</span>
+                        </div>
+                        <div className="col-12 md:col-4 mb-4 px-5">
+                            <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                                <i className="pi pi-check-circle text-4xl text-primary"></i>
+                            </span>
+                            <div className="text-900 text-xl mb-3 font-medium">Easy to Use</div>
+                            <span className="text-700 line-height-3">Ornare suspendisse sed nisi lacus sed viverra tellus. Neque volutpat ac tincidunt vitae semper.</span>
+                        </div>
+                        <div className="col-12 md:col-4 mb-4 px-5">
+                            <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                                <i className="pi pi-globe text-4xl text-primary"></i>
+                            </span>
+                            <div className="text-900 text-xl mb-3 font-medium">Fast & Global Support</div>
+                            <span className="text-700 line-height-3">Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum tellus.</span>
+                        </div>
+                        <div className="col-12 md:col-4 mb-4 px-5">
+                            <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                                <i className="pi pi-github text-4xl text-primary"></i>
+                            </span>
+                            <div className="text-900 text-xl mb-3 font-medium">Open Source</div>
+                            <span className="text-700 line-height-3">Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec adipiscing tristique risus nec feugiat. </span>
+                        </div>
+                        <div className="col-12 md:col-4 md:mb-4 mb-0 px-3">
+                            <span className="p-3 shadow-2 mb-3 inline-block" style={{ borderRadius: '10px' }}>
+                                <i className="pi pi-shield text-4xl text-primary"></i>
+                            </span>
+                            <div className="text-900 text-xl mb-3 font-medium">Trusted Securitty</div>
+                            <span className="text-700 line-height-3">Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus metus aliquam eleifend.</span>
+                        </div>
                     </div>
                 </div>
             </div>

package/src/components/common/SolidThemeProvider.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { usePathname } from "next/navigation";
+import { useLazyGetAuthSettingsQuery } from "@/redux/api/solidSettingsApi";
+
+export const SolidThemeProvider = () => {
+    const pathname = usePathname();
+    const [trigger, { data: solidSettingsData }] = useLazyGetAuthSettingsQuery()
+    const [theme, setTheme] = useState("solid-light-purple");
+
+    useEffect(() => {
+        if (pathname.includes("/auth")) {
+            trigger("");
+        }
+    }, [pathname, trigger]);
+
+    useEffect(() => {
+        if (pathname.includes("/auth") && solidSettingsData?.data?.authPagesTheme) {
+            const selectedTheme =
+                solidSettingsData.data.authPagesTheme === "dark" ? "solid-dark-purple" : "solid-light-purple";
+            setTheme(selectedTheme);
+        } else {
+            setTheme("solid-light-purple");
+        }
+    }, [pathname, solidSettingsData]);
+
+    useEffect(() => {
+        // Find or create <link> element
+        let themeLink = document.getElementById("theme-css") as HTMLLinkElement;
+
+        // if (!themeLink) {
+        //     themeLink = document.createElement("link");
+        //     themeLink.id = "theme-css";
+        //     themeLink.rel = "stylesheet";
+        //     document.head.appendChild(themeLink);
+        // }
+
+        // Update theme link dynamically
+        themeLink.href = `/themes/${theme}/theme.css`;
+    }, [theme]);
+
+    return null;
+}

package/src/components/core/form/fields/SolidEmailField.tsx

@@ -54,7 +54,7 @@ export class SolidEmailField implements ISolidField {
         // 3. regular expression
         if (fieldMetadata.regexPattern) {
             const regexPatternNotMatchingErrorMsg = fieldMetadata.regexPatternNotMatchingErrorMsg ?? `${fieldLabel} has invalid data.`
-            schema = schema.matches(fieldMetadata.regexPattern, regexPatternNotMatchingErrorMsg);
+            schema = schema.matches(new RegExp(fieldMetadata.regexPattern), regexPatternNotMatchingErrorMsg);
         }
 
         return schema;

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

@@ -24,7 +24,7 @@ interface ApiResponse {
     };
 }
 
-export const KanbanBoard = ({ groupedView, kanbanViewData, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLinPagination ,setLightboxUrls, setOpenLightbox }: any) => {
+export const KanbanBoard = ({ groupedView, kanbanViewData, solidKanbanViewMetaData, setKanbanViewData, handleLoadMore, onDragEnd, handleSwimLinPagination, setLightboxUrls, setOpenLightbox }: any) => {
     const [loading, setLoading] = useState<boolean>(true);
     // State to manage the folded status of each column
     const [foldedStates, setFoldedStates] = useState<Record<string, boolean>>({});
@@ -70,9 +70,10 @@ export const KanbanBoard = ({ groupedView, kanbanViewData, solidKanbanViewMetaDa
     // Render the Kanban board
     return (
         //@ts-ignore
-        <DragDropContext onDragEnd={onDragEnd}>
-            <div style={{ display: "flex", gap: "1rem", background: "#f0f0f5", padding: "20px" }}>
-                {/* {Object.entries(kanbanViewData).map(([groupVal, data]) => {
+        <div className="solid-kanban-board-wrapper">
+            <DragDropContext onDragEnd={onDragEnd}>
+                <div className="flex gap-4 px-5 py-4 solid-kanban-board-scroll-context">
+                    {/* {Object.entries(kanbanViewData).map(([groupVal, data]) => {
                     const group = {
                         label: groupVal,
                         count: data.count,
@@ -90,36 +91,37 @@ export const KanbanBoard = ({ groupedView, kanbanViewData, solidKanbanViewMetaDa
                         />
                     );
                 })} */}
-                {kanbanViewData.map((data) => {
-                    const group = {
-                        label: data.groupName,
-                        count: data.groupData.meta.totalRecords,
-                        limit: data.groupData.meta.perPage,
-                        currentPage: data.groupData.meta.currentPage,
-                        folded: foldedStates[data.groupName] || false,
-                    };
-
-                    return (
-                        <KanbanColumn
-                            key={data.groupName}
-                            groupedView={groupedView}
-                            groupByField={data.groupName}
-                            group={group}
-                            solidKanbanViewMetaData={solidKanbanViewMetaData}
-                            groupData={data.groupData.records}
-                            toggleFold={toggleFold}
-                            handleLoadMore={handleLoadMore}
-                            setLightboxUrls={setLightboxUrls}
-                             setOpenLightbox={setOpenLightbox}
-                        />
-                    );
-                })}
-                {groupedView !== false &&
-                    <div className="kanban-load-more-folded">
-                        <a className="kaban-load-more" onClick={handleSwimLinPagination}>load More</a></div>
-                }
-            </div>
-        </DragDropContext>
+                    {kanbanViewData.map((data) => {
+                        const group = {
+                            label: data.groupName,
+                            count: data.groupData.meta.totalRecords,
+                            limit: data.groupData.meta.perPage,
+                            currentPage: data.groupData.meta.currentPage,
+                            folded: foldedStates[data.groupName] || false,
+                        };
+
+                        return (
+                            <KanbanColumn
+                                key={data.groupName}
+                                groupedView={groupedView}
+                                groupByField={data.groupName}
+                                group={group}
+                                solidKanbanViewMetaData={solidKanbanViewMetaData}
+                                groupData={data.groupData.records}
+                                toggleFold={toggleFold}
+                                handleLoadMore={handleLoadMore}
+                                setLightboxUrls={setLightboxUrls}
+                                setOpenLightbox={setOpenLightbox}
+                            />
+                        );
+                    })}
+                    {groupedView !== false &&
+                        <div className="kanban-load-more-folded">
+                            <a className="kaban-load-more" onClick={handleSwimLinPagination}>load More</a></div>
+                    }
+                </div>
+            </DragDropContext>
+        </div>
     );
 }
 

package/src/components/core/kanban/KanbanCard.tsx

@@ -49,41 +49,53 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidKanbanViewMetaData,
   const SolidRow = ({ children, attrs }: any) => {
     const className = attrs.className;
     return (
-      <div className={`row ${className}`}>
-        <div className="s_group">
-          <div>
-            {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
-            <div className="grid">{children}</div>
-          </div>
+      // <div className={`row ${className}`}>
+      //   <div className="s_group">
+      //     <div>
+      //       {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
+      //       <div className="grid">{children}</div>
+      //     </div>
+      //   </div>
+      // </div>
+      <>
+        {attrs.label && <p className="">{attrs.label}</p>}
+        <div className={`row ${className}`}>
+          {children}
         </div>
-      </div>
+      </>
     );
   };
   const SolidColumn = ({ children, attrs }: any) => {
     const className = attrs.className;
     return (
+      // <div className={`${className}`}>
+      //   <div className="s_group">
+      //     <div>
+      //       {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
+      //       <div className="grid">{children}</div>
+      //     </div>
+      //   </div>
+      // </div>
       <div className={`${className}`}>
-        <div className="s_group">
-          <div>
-            {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
-            <div className="grid">{children}</div>
-          </div>
-        </div>
-
+        {attrs.label && <p className="">{attrs.label}</p>}
+        {children}
       </div>
     );
   };
   const SolidImage = ({ children, attrs }: any) => {
     const className = attrs.className;
     return (
+      // <div className={`${className}`}>
+      //   <div className="s_group">
+      //     <div>
+      //       {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
+      //       <div className="grid">{children}</div>
+      //     </div>
+      //   </div>
+      // </div>
       <div className={`${className}`}>
-        <div className="s_group">
-          <div>
-            {attrs.label && <p className="s_group_heading">{attrs.label}</p>}
-            <div className="grid">{children}</div>
-          </div>
-        </div>
-
+        {attrs.label && <p className="">{attrs.label}</p>}
+        {children}
       </div>
     );
   };
@@ -157,17 +169,18 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidKanbanViewMetaData,
           ref={provided.innerRef}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
-          style={{ marginBottom: "1rem", ...provided.draggableProps.style }}
+          style={{ marginTop: "1rem", ...provided.draggableProps.style }}
           className="kanban-card-container"
         >
           {/* <p className="kanban-card-heading">{data.title}</p> */}
           {/* <p className="kanban-card-content">{data.content}</p> */}
-          <Card
+          <div
             style={{
               opacity: snapshot.isDragging ? 0.9 : 1,
               transform: snapshot.isDragging ? "rotate(-2deg)" : "",
             }}
             elevation={snapshot.isDragging ? 3 : 1}
+            className="solid-kanban-card"
           >
             {renderFormDynamically(solidKanbanViewMetaData)}
 
@@ -177,7 +190,7 @@ const KanbanCard: React.FC<KanbanCardProps> = ({ data, solidKanbanViewMetaData,
               ))
             } */}
             {/* <p className="kanban-card-content">{data.content}</p> */}
-          </Card>
+          </div>
         </div>
       )}
     </Draggable>

package/src/components/core/kanban/KanbanColumn.tsx

@@ -49,20 +49,25 @@ const KanbanColumn = ({ groupedView, groupByField, solidKanbanViewMetaData, grou
                   <i className="pi pi-sort-up-fill"></i>
                   <i className="pi pi-sort-down-fill"></i>
                 </div>
-                <p className="kanban-group-heading">{`${group.label}`}<span className="count">{group.count}</span></p>
+                <p className="kanban-group-heading">{`${group.label}`}<span className="kanban-count-badge">{group.count}</span></p>
               </div>
             </a>
           }
 
           {!group.folded &&
             <div className="flex align-items-center">
-              <p className="kanban-group-heading">{`${group.label}`}<span className="count">{group.count}</span></p>
+              <p className="kanban-group-heading">{`${group.label}`}<span className="kanban-count-badge">{group.count}</span></p>
             </div>
           }
           {!group.folded &&
-            <a onClick={(e: any) => op?.current?.toggle(e)}>
-              < i className="pi pi-cog" />
-            </a>
+              <Button
+              onClick={(e: any) => op?.current?.toggle(e)}
+              icon='pi pi-cog'
+              text
+              className="p-0 kanban-column-cogwheel"
+              rounded
+              severity="secondary"
+            />
           }
           <OverlayPanel ref={op} className="kanban-options-panel">