@solidstarters/solid-core-ui 1.1.44 → 1.1.45

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.44",
+  "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/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">
 

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

@@ -165,7 +165,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       if (fieldMetadata.type === 'relation' && fieldMetadata.relationType === 'many-to-one') {
         toPopulate.push(fieldMetadata.name);
       }
-      if (fieldMetadata.type === 'mediaSingle' || fieldMetadata.relationType === 'mediaMultiple') {
+      if (fieldMetadata.type === 'mediaSingle' || fieldMetadata.type === 'mediaMultiple') {
         toPopulateMedia.push(fieldMetadata.name);
       }
     }
@@ -267,7 +267,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
 
 
       const columnsToLoadCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
-      if (groupByFieldName &&( toPopulate || toPopulateMedia)) {
+      if (groupByFieldName && (toPopulate || toPopulateMedia)) {
 
         const queryData = {
           offset: 0,
@@ -294,7 +294,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
         setSelectedRecords([]);
       }
     }
-  }, [isDeleteSolidEntitiesSucess, toPopulate, groupByFieldName,solidKanbanViewMetaData]);
+  }, [isDeleteSolidEntitiesSucess, toPopulate, groupByFieldName, solidKanbanViewMetaData]);
 
 
 
@@ -393,7 +393,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
       const queryData = {
         offset: offset + limit,
         limit: limit,
-        populate:toPopulate,
+        populate: toPopulate,
         populateMedia: toPopulateMedia,
         populateGroup: true,
         filters: {
@@ -628,13 +628,20 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
     // }
   }
 
-
+  const kanbanViewTitle = solidKanbanViewMetaData?.data?.solidView?.displayName
 
   return (
-    <>
-      <div className="flex gap-3 mb-4 align-items-center justify-content-between kanban-view">
-        <div className="flex gap-3 mb-4 align-items-center" >
+    <div className="page-parent-wrapper">
+      <div className="page-header">
+        <div className="flex gap-3 align-items-center">
+          <p className="m-0 view-title">{kanbanViewTitle}</p>
+          {solidKanbanViewMetaData?.data?.solidView?.layout?.attrs.enableGlobalSearch === true &&
+            // <SolidGlobalSearchElement viewData={solidKanbanViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter} ></SolidGlobalSearchElement>
+            <SolidGlobalSearchElement ref={solidGlobalSearchElementRef} viewData={solidKanbanViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter}  ></SolidGlobalSearchElement>
 
+          }
+        </div>
+        <div className="flex align-items-center gap-3">
           {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs.create !== false &&
             <SolidCreateButton url={createButtonUrl} />
           }
@@ -647,40 +654,21 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
             className="small-button"
             severity="danger"
           />}
-          {/* {isFilterApplied &&
-            <Button
-              type="button"
-              icon="pi pi-filter-slash"
-              label="Clear"
-              size="small"
-              outlined
-              onClick={clearFilter}
-              className="small-button"
-            />
-          } */}
-
-          {solidKanbanViewMetaData?.data?.solidView?.layout?.attrs.enableGlobalSearch === true &&
-            // <SolidGlobalSearchElement viewData={solidKanbanViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter} ></SolidGlobalSearchElement>
-            <SolidGlobalSearchElement ref={solidGlobalSearchElementRef} viewData={solidKanbanViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter}  ></SolidGlobalSearchElement>
-
-          }
+          {/* <SolidListViewConfigure
+        setShowArchived={setShowArchived}
+        showArchived={showArchived}
+        viewData={solidKanbanViewMetaData}
+        sizeOptions={sizeOptions}
+        setSize={setSize}
+        size={size}
+        viewModes={viewModes}
+        params={params}
+        actionsAllowed={actionsAllowed}
+        selectedRecords={selectedRecords}
+        setDialogVisible={setDialogVisible}
+      ></SolidListViewConfigure> */}
+          {/* <SolidConfigureLayoutElement></SolidConfigureLayoutElement> */}
         </div>
-
-        {/* <SolidListViewConfigure
-          setShowArchived={setShowArchived}
-          showArchived={showArchived}
-          viewData={solidKanbanViewMetaData}
-          sizeOptions={sizeOptions}
-          setSize={setSize}
-          size={size}
-          viewModes={viewModes}
-          params={params}
-          actionsAllowed={actionsAllowed}
-          selectedRecords={selectedRecords}
-          setDialogVisible={setDialogVisible}
-        ></SolidListViewConfigure> */}
-        {/* <SolidConfigureLayoutElement></SolidConfigureLayoutElement> */}
-
       </div>
       <style>{`.p-datatable .p-datatable-loading-overlay {background-color: rgba(0, 0, 0, 0.0);}`}</style>
       {solidKanbanViewMetaData && kanbanViewData &&
@@ -709,7 +697,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
           slides={lightboxUrls}
         />
       }
-    </>
+    </div>
   );
 };