@solidstarters/solid-core-ui 1.1.54 → 1.1.56

package/src/components/common/SolidFormStepper.tsx

@@ -34,10 +34,8 @@ export const SolidFormStepper = (props: Props) => {
 
         setSolidWorkflowFieldValue(() => {
             if (initialEntityData?.[solidWorkflowField] !== undefined) {
-                console.log("checkloginitial", initialEntityData[solidWorkflowField]);
                 return initialEntityData[solidWorkflowField];
             } else if (defaultWorkflowFieldValue !== undefined) {
-                console.log("checklogdefault", defaultWorkflowFieldValue);
                 return defaultWorkflowFieldValue;
             } else {
                 return activeStep;
@@ -98,7 +96,6 @@ export const SolidFormStepper = (props: Props) => {
 
     const activeIndex = solidFormViewWorkflowData.findIndex((step: any) => step.value === solidWorkflowFieldValue);
     const visibleSteps = solidFormViewWorkflowData.length > 5 ? solidFormViewWorkflowData.slice(0, 5) : solidFormViewWorkflowData;
-    console.log("activeIndex:", activeIndex, "solidWorkflowFieldValue:", solidWorkflowFieldValue);
 
     return (
         <>
@@ -112,7 +109,6 @@ export const SolidFormStepper = (props: Props) => {
                     const isLastVisible = index === visibleSteps.length - 1;
                     const isNextAfterActive = index === activeIndex + 1;
                     const isTwoStepsOnly = visibleSteps.length === 2;
-                    console.log("isActive", isActive);
 
                     return (
                         <Button

package/src/components/core/common/SolidGlobalSearchElement.tsx

@@ -383,6 +383,13 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
         return acc;
     }, {} as Record<string, string[]>);
 
+    const handleRemoveChipGroup = (columnName: string) => {
+        const updatedChips = searchChips.filter(chip => chip.columnName !== columnName);
+        setSearchChips(updatedChips);
+        setHasSearched(true);
+    };
+
+
     const CustomChip = () => (
         <li>
             <div className="custom-filter-chip-type">
@@ -397,7 +404,9 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                 </div>
 
                 {/* button to clear filter */}
-                <a onClick={clearCustomFilter}>
+                <a onClick={clearCustomFilter}
+                    style={{ cursor: "pointer" }}
+                >
                     <i className="pi pi-times ml-1">
                     </i></a>
             </div>
@@ -421,8 +430,10 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                             </React.Fragment>
                         ))}
                         {/* button to clear filter */}
-                        <i className="pi pi-times ml-1">
-                        </i>
+                        <i className="pi pi-times ml-1"
+                            style={{ cursor: "pointer" }}
+                            onClick={() => handleRemoveChipGroup(column)}
+                        >                        </i>
                     </div>
                 </li>
             ))}

package/src/components/core/form/SolidFormUserViewLayout.tsx

@@ -0,0 +1,87 @@
+"use client";
+import { useFormik } from "formik";
+import { Button } from "primereact/button";
+import { useSelector } from "react-redux";
+import React, { useRef } from "react";
+import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import { javascript } from "@codemirror/lang-javascript";
+import { oneDark } from "@codemirror/theme-one-dark";
+import CodeMirror, { EditorView } from "@uiw/react-codemirror";
+import { Toast } from "primereact/toast";
+
+export const SolidFormUserViewLayout = ({ solidFormViewMetaData, setLayoutDialogVisible }: any) => {
+    const toast = useRef<Toast>(null);
+    const { user } = useSelector((state: any) => state.auth);
+    const entityApi = createSolidEntityApi("userViewMetadata");
+    const { useUpsertSolidEntityMutation } = entityApi;
+    const [upsertUserView] = useUpsertSolidEntityMutation();
+
+    if (!solidFormViewMetaData?.data?.solidView) return null;
+
+    const solidView = solidFormViewMetaData.data.solidView;
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    const formik = useFormik({
+        initialValues: {
+            layoutString: JSON.stringify(solidView.layout, null, 2),
+        },
+        onSubmit: async (values) => {
+            const parsedLayout = JSON.parse(values.layoutString);
+            console.log("updatedLayout", parsedLayout);
+
+            try {
+                if (solidView.id) {
+                    const response = await upsertUserView({
+                        userId: user?.user?.id,
+                        viewMetadataId: solidView.id,
+                        layout: JSON.stringify(parsedLayout)
+                    }).unwrap();
+                    console.log("Response", response);
+                    if (response.statusCode === 200) {
+                        showToast("success", "Layout", "Form Layout Updated successfully!");
+                        setLayoutDialogVisible(false);
+                        window.location.reload();
+                    }
+                }
+            } catch (error) {
+                console.error("Update failed:", error);
+            }
+        },
+    });
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <form onSubmit={formik.handleSubmit}>
+                <CodeMirror
+                    value={formik.values.layoutString}
+                    height="500px"
+                    theme={oneDark}
+                    style={{ fontSize: '10px' }}
+                    extensions={[javascript(), EditorView.lineWrapping]}
+                    onChange={(value) => {
+                        formik.setFieldValue("layoutString", value);
+                    }}
+                />
+                <div className="pt-3 flex gap-2">
+                    <Button type="submit" label="Apply" size="small" />
+                    <Button
+                        type="button"
+                        outlined
+                        label="Cancel"
+                        size="small"
+                        onClick={() => setLayoutDialogVisible(false)}
+                    />
+                </div>
+            </form>
+        </>
+    );
+};

package/src/components/core/form/SolidFormView.tsx

@@ -43,6 +43,8 @@ import { SolidEmailField } from "./fields/SolidEmailField";
 import { Panel } from "primereact/panel";
 import { SolidFormStepper } from "@/components/common/SolidFormStepper";
 import { SolidFormHeader } from "@/components/common/SolidFormHeader";
+import { SolidFormUserViewLayout } from "./SolidFormUserViewLayout";
+import { useSelector } from "react-redux";
 
 export type SolidFormViewProps = {
     moduleName: string;
@@ -342,7 +344,7 @@ const SolidPage = ({ attrs, children, key }: any) => (
 // };
 
 const SolidFormView = (params: SolidFormViewProps) => {
-
+    const { user } = useSelector((state: any) => state.auth);
     const pathname = usePathname();
     const router = useRouter();
     const toast = useRef<Toast>(null);
@@ -352,6 +354,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
     const [redirectToList, setRedirectToList] = useState(false);
 
     const [isDeleteDialogVisible, setDeleteDialogVisible] = useState(false);
+    const [isLayoutDialogVisible, setLayoutDialogVisible] = useState(false);
 
     const [actionsAllowed, setActionsAllowed] = useState<string[]>([]);
     const [viewMode, setViewMode] = useState<"view" | "edit">("view");
@@ -437,7 +440,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
 
     // - - - - - - - - - - - -- - - - - - - - - - - - METADATA here
     // Get the form view layout & metadata first. 
-    const formViewMetaDataQs = qs.stringify({ ...params, viewType: 'form' }, {
+    const formViewMetaDataQs = qs.stringify({ ...params, viewType: 'form', userId: user?.user?.id }, {
         encodeValuesOnly: true,
     });
     const [formViewMetaData, setFormViewMetaData] = useState({});
@@ -919,7 +922,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                         // const fieldMetadata = solidFieldsMetadata[attrs.name];
                         const fieldMetadata = solidFormViewMetaData.data.solidFieldsMetadata[attrs.name];
                         // Read only permission if there is no update permission on model and router doesnt contains new
-                        const readOnlyPermission = !actionsAllowed.includes(`${updatePermission(params.modelName)}`) && params.id !== "new"
+                        const readOnlyPermission = !actionsAllowed.includes(`${updatePermission(params.modelName)}`) && params.id !== "new";
                         return <SolidField
                             key={key}
                             field={element}
@@ -1042,6 +1045,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                 </svg>}
                             /> */}
                             {params.embeded !== true &&
+                                params.id !== "new" &&
                                 actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
                                 !formViewLayout.attrs.readonly &&
                                 <Button
@@ -1056,6 +1060,17 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                     onClick={() => setDeleteDialogVisible(true)}
                                 />
                             }
+                            <Button
+                                text
+                                type="button"
+                                className="w-8rem text-left gap-2 purple-200"
+                                label="Layout"
+                                size="small"
+                                iconPos="left"
+                                severity="contrast"
+                                icon={'pi pi-objects-column'}
+                                onClick={() => setLayoutDialogVisible(true)}
+                            />
                         </div>
                     </OverlayPanel>
                 </div>
@@ -1137,7 +1152,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                     {params.embeded !== true &&
                                         <SolidCancelButton />
                                     }
-
+                                    {formActionDropdown()}
                                 </div>
                             </>
                         ) : (
@@ -1266,9 +1281,19 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 >
                     <p>Are you sure you want to delete?</p>
                 </Dialog>
+                <Dialog
+                    visible={isLayoutDialogVisible}
+                    header="Change Form Layout"
+                    modal
+                    onHide={() => setLayoutDialogVisible(false)}
+                    contentStyle={{
+                        width: 800
+                    }}
+                >
+                    <SolidFormUserViewLayout solidFormViewMetaData={solidFormViewMetaData} setLayoutDialogVisible={setLayoutDialogVisible} />
+                </Dialog>
             </div>
         );
-
     }
 };
 

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

@@ -240,21 +240,23 @@ export class SolidMediaMultipleField implements ISolidField {
                                     {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                                 </label>
                             }
-                            <div
-                                {...getRootProps()}
-                                className="solid-dropzone-wrapper"
-                            >
-                                <input {...getInputProps()} />
-                                <DropzonePlaceholder
-                                    mediaTypes={fieldMetadata.mediaTypes}
-                                    mediaMaxSizeKb={fieldMetadata.mediaMaxSizeKb}
-                                />
-                            </div>
-                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                <div className="absolute mt-1">
-                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                            <div className="relative">
+                                <div
+                                    {...getRootProps()}
+                                    className="solid-dropzone-wrapper"
+                                >
+                                    <input {...getInputProps()} />
+                                    <DropzonePlaceholder
+                                        mediaTypes={fieldMetadata.mediaTypes}
+                                        mediaMaxSizeKb={fieldMetadata.mediaMaxSizeKb}
+                                    />
                                 </div>
-                            )}
+                                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                    <div className="absolute mt-1">
+                                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                    </div>
+                                )}
+                            </div>
                             {
                                 fileSizeError &&
                                 <Message severity="error" text={fileSizeError?.toString()} />

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

@@ -235,21 +235,23 @@ export class SolidMediaSingleField implements ISolidField {
                                     {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                                 </label>
                             }
-                            <div
-                                {...getRootProps()}
-                                className="solid-dropzone-wrapper"
-                            >
-                                <input {...getInputProps()} />
-                                <DropzonePlaceholder
-                                    mediaTypes={fieldMetadata.mediaTypes}
-                                    mediaMaxSizeKb={fieldMetadata.mediaMaxSizeKb}
-                                />
-                            </div>
-                            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                                <div className="absolute mt-1">
-                                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                            <div className="relative">
+                                <div
+                                    {...getRootProps()}
+                                    className="solid-dropzone-wrapper"
+                                >
+                                    <input {...getInputProps()} />
+                                    <DropzonePlaceholder
+                                        mediaTypes={fieldMetadata.mediaTypes}
+                                        mediaMaxSizeKb={fieldMetadata.mediaMaxSizeKb}
+                                    />
                                 </div>
-                            )}
+                                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                                    <div className="absolute mt-1">
+                                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                                    </div>
+                                )}
+                            </div>
                             {
                                 fileSizeError &&
                                 <Message severity="error" text={fileSizeError?.toString()} />

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

@@ -64,6 +64,7 @@ export class SolidSelectionDynamicField implements ISolidField {
 
         const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
         const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+        const whereClause = fieldLayoutInfo.attrs.whereClause;
 
         // selection dynamic specific code. 
         const [triggerGetSelectionDynamicValues] = useLazyGetSelectionDynamicValuesQuery();
@@ -77,11 +78,18 @@ export class SolidSelectionDynamicField implements ISolidField {
                 query: event.query,
                 fieldId: fieldMetadata.id
             };
-
-            const sdQs = qs.stringify(queryData, {
+            if (whereClause) {
+                queryData.query = whereClause;
+            }
+            let sdQs = qs.stringify(queryData, {
                 encodeValuesOnly: true,
+                encoder: (str, defaultEncoder, charset, type) => {
+                    if (type === 'key' || type === 'value') {
+                      if (str === queryData.query) return str;
+                    }
+                    return defaultEncoder(str);
+                }
             });
-
             // TODO: do error handling here, possible errors like modelname is incorrect etc...
             const sdResponse = await triggerGetSelectionDynamicValues(sdQs);
 
@@ -98,7 +106,7 @@ export class SolidSelectionDynamicField implements ISolidField {
         let DynamicWidget = getExtensionComponent("SolidFormFieldViewModeWidget");
         const widgetProps = {
             label: fieldLabel,
-            value: formik.values[fieldLayoutInfo.attrs.name],
+            value: formik.values[fieldLayoutInfo.attrs.name] && formik.values[fieldLayoutInfo.attrs.name].value,
         }
         return (
             <>

package/src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx

@@ -78,6 +78,7 @@ export class SolidRelationManyToOneField implements ISolidField {
 
         const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
         const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+        const whereClause = fieldLayoutInfo.attrs.whereClause;
 
         const [autoCompleteItems, setAutoCompleteItems] = useState([]);
         const autoCompleteSearch = async (event: AutoCompleteCompleteEvent) => {
@@ -93,10 +94,12 @@ export class SolidRelationManyToOneField implements ISolidField {
                 }
             };
 
-            const autocompleteQs = qs.stringify(queryData, {
+            let autocompleteQs = qs.stringify(queryData, {
                 encodeValuesOnly: true,
             });
-
+            if (whereClause) {
+                autocompleteQs = `${autocompleteQs}&${whereClause}`;
+            }
             // TODO: do error handling here, possible errors like modelname is incorrect etc...
             const autocompleteResponse = await triggerGetSolidEntities(autocompleteQs);
 

package/src/components/core/form/fields/relations/SolidRelationOneToManyField.tsx

@@ -93,6 +93,7 @@ export class SolidRelationOneToManyField implements ISolidField {
                 inlineCreate: readOnlyPermission === false ? true : false,
                 customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
                 embeded: true,
+                id: this.fieldContext.data ? this?.fieldContext?.data?.id : 'new',
                 customFilter: {
                     [customFilter]: {
                         id: {
@@ -113,6 +114,7 @@ export class SolidRelationOneToManyField implements ISolidField {
                 inlineCreate: readOnlyPermission === false ? true : false,
                 customLayout: fieldLayoutInfo?.attrs?.inlineListLayout,
                 embeded: true,
+                id: this.fieldContext.data ? this?.fieldContext?.data?.id : 'new',
                 customFilter: {
                     [customFilter]: {
                         id: {
@@ -128,11 +130,11 @@ export class SolidRelationOneToManyField implements ISolidField {
                 embeded: true,
                 isCustomCreate: false,
                 customLayout: fieldLayoutInfo?.attrs?.inlineCreateLayout,
-                modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName)
+                modelName: camelCase(this.fieldContext.fieldMetadata.relationCoModelSingularName),
             }
             setformViewParams(formviewparams)
 
-        }, [])
+        }, [readOnlyPermission])
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
         const fieldReadonly = fieldLayoutInfo.attrs?.readonly;

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

@@ -5,6 +5,7 @@ import React, { useState, useEffect } from "react";
 import { DragDropContext, DropResult } from "@hello-pangea/dnd";
 import axios from "axios";
 import KanbanColumn from "./KanbanColumn";
+import { Button } from "primereact/button";
 
 // Define types for groupData and Grouped Data
 interface Post {

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

@@ -0,0 +1,87 @@
+"use client";
+import { useFormik } from "formik";
+import { Button } from "primereact/button";
+import { useSelector } from "react-redux";
+import React, { useRef } from "react";
+import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import { javascript } from "@codemirror/lang-javascript";
+import { oneDark } from "@codemirror/theme-one-dark";
+import CodeMirror, { EditorView } from "@uiw/react-codemirror";
+import { Toast } from "primereact/toast";
+
+export const KanbanUserViewLayout = ({ solidKanbanViewMetaData, setLayoutDialogVisible }: any) => {
+    const toast = useRef<Toast>(null);
+    const { user } = useSelector((state: any) => state.auth);
+    const entityApi = createSolidEntityApi("userViewMetadata");
+    const { useUpsertSolidEntityMutation } = entityApi;
+    const [upsertUserView] = useUpsertSolidEntityMutation();
+
+    if (!solidKanbanViewMetaData?.data?.solidView) return null;
+
+    const solidView = solidKanbanViewMetaData.data.solidView;
+
+    const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+        toast.current?.show({
+            severity,
+            summary,
+            detail,
+            life: 3000,
+        });
+    };
+
+    const formik = useFormik({
+        initialValues: {
+            layoutString: JSON.stringify(solidView.layout, null, 2),
+        },
+        onSubmit: async (values) => {
+            const parsedLayout = JSON.parse(values.layoutString);
+            console.log("updatedLayout", parsedLayout);
+
+            try {
+                if (solidView.id) {
+                    const response = await upsertUserView({
+                        userId: user?.user?.id,
+                        viewMetadataId: solidView.id,
+                        layout: JSON.stringify(parsedLayout),
+                    }).unwrap();
+                    console.log("Response", response);
+                    if (response.statusCode === 200) {
+                        showToast("success", "Layout", "Form Layout Updated successfully!");
+                        setLayoutDialogVisible(false);
+                        window.location.reload();
+                    }
+                }
+            } catch (error) {
+                console.error("Update failed:", error);
+            }
+        },
+    });
+
+    return (
+        <>
+            <Toast ref={toast} />
+            <form onSubmit={formik.handleSubmit}>
+                <CodeMirror
+                    value={formik.values.layoutString}
+                    height="500px"
+                    theme={oneDark}
+                    style={{ fontSize: '10px' }}
+                    extensions={[javascript(), EditorView.lineWrapping]}
+                    onChange={(value) => {
+                        formik.setFieldValue("layoutString", value);
+                    }}
+                />
+                <div className="pt-3 flex gap-2">
+                    <Button type="submit" label="Apply" size="small" />
+                    <Button
+                        type="button"
+                        outlined
+                        label="Cancel"
+                        size="small"
+                        onClick={() => setLayoutDialogVisible(false)}
+                    />
+                </div>
+            </form>
+        </>
+    );
+};

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

@@ -28,6 +28,8 @@ import "yet-another-react-lightbox/styles.css";
 import "yet-another-react-lightbox/plugins/counter.css";
 import { useRouter, useSearchParams } from "next/navigation";
 import { SolidKanbanViewConfigure } from "./SolidKanbanViewConfigure";
+import { KanbanUserViewLayout } from "./KanbanUserViewLayout";
+import { useSelector } from "react-redux";
 
 
 
@@ -39,6 +41,7 @@ type SolidKanbanViewParams = {
 
 
 export const SolidKanbanView = (params: SolidKanbanViewParams) => {
+  const { user } = useSelector((state: any) => state.auth);
   const solidGlobalSearchElementRef = useRef();
   const searchParams = useSearchParams().toString(); // Converts the query params to a string
   const router = useRouter();
@@ -62,6 +65,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   const [openLightbox, setOpenLightbox] = useState(false);
   const [lightboxUrls, setLightboxUrls] = useState({});
   const [filterQueryString, setFilterQueryString] = useState<any>();
+  const [isLayoutDialogVisible, setLayoutDialogVisible] = useState(false);
 
 
 
@@ -117,7 +121,7 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
   } = entityApi;
 
   // Get the kanban view layout & metadata first. 
-  const kanbanViewMetaDataQs = qs.stringify({ ...params, viewType: 'kanban' }, {
+  const kanbanViewMetaDataQs = qs.stringify({ ...params, viewType: 'kanban', userId: user?.user?.id }, {
     encodeValuesOnly: true,
   });
   const [kanbanViewMetaData, setKanbanViewMetaData] = useState<any>({});
@@ -706,14 +710,14 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
             solidKanbanViewMetaData={solidKanbanViewMetaData}
             actionsAllowed={actionsAllowed}
             viewModes={viewModes}
-          // setLayoutDialogVisible={setLayoutDialogVisible}
+            setLayoutDialogVisible={setLayoutDialogVisible}
           />
           {/* <SolidConfigureLayoutElement></SolidConfigureLayoutElement> */}
         </div>
       </div>
       <style>{`.p-datatable .p-datatable-loading-overlay {background-color: rgba(0, 0, 0, 0.0);}`}</style>
       {solidKanbanViewMetaData && kanbanViewData &&
-        <KanbanBoard groupedView={groupedView} kanbanViewData={kanbanViewData} solidKanbanViewMetaData={solidKanbanViewMetaData?.data} setKanbanViewData={setKanbanViewData} handleLoadMore={handleLoadMore} onDragEnd={onDragEnd} handleSwimLinPagination={handleSwimLinPagination} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox}  editButtonUrl={editButtonUrl}></KanbanBoard>
+        <KanbanBoard groupedView={groupedView} kanbanViewData={kanbanViewData} solidKanbanViewMetaData={solidKanbanViewMetaData?.data} setKanbanViewData={setKanbanViewData} handleLoadMore={handleLoadMore} onDragEnd={onDragEnd} handleSwimLinPagination={handleSwimLinPagination} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox} editButtonUrl={editButtonUrl}></KanbanBoard>
       }
 
       <Dialog
@@ -738,6 +742,17 @@ export const SolidKanbanView = (params: SolidKanbanViewParams) => {
           slides={lightboxUrls}
         />
       }
+      <Dialog
+        visible={isLayoutDialogVisible}
+        header="Change Kanban Layout"
+        modal
+        onHide={() => setLayoutDialogVisible(false)}
+        contentStyle={{
+          width: 800
+        }}
+      >
+        <KanbanUserViewLayout solidKanbanViewMetaData={solidKanbanViewMetaData} setLayoutDialogVisible={setLayoutDialogVisible} />
+      </Dialog>
     </div>
   );
 };

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

@@ -7,7 +7,7 @@ import { OverlayPanel } from 'primereact/overlaypanel';
 import { RadioButton } from 'primereact/radiobutton';
 import React, { useEffect, useRef, useState } from 'react'
 
-export const SolidKanbanViewConfigure = ({ solidKanbanViewMetaData, actionsAllowed, viewModes }: any) => {
+export const SolidKanbanViewConfigure = ({ solidKanbanViewMetaData, actionsAllowed, setLayoutDialogVisible, viewModes }: any) => {
     const op = useRef(null);
     const customizeLayout = useRef<OverlayPanel | null>(null);
     const pathname = usePathname();
@@ -68,7 +68,7 @@ export const SolidKanbanViewConfigure = ({ solidKanbanViewMetaData, actionsAllow
                     <div className="flex flex-column">
                         <Button text icon='pi pi-download' label="Import" size="small" severity="secondary" className="text-left gap-2 text-base" />
                         <Button text icon='pi pi-upload' label="Export" size="small" severity="secondary" className="text-left gap-2 text-base" />
-                        {/* <Button
+                        <Button
                             text
                             type="button"
                             className="w-8rem text-left gap-2 purple-200"
@@ -78,7 +78,7 @@ export const SolidKanbanViewConfigure = ({ solidKanbanViewMetaData, actionsAllow
                             severity="contrast"
                             icon={'pi pi-objects-column'}
                             onClick={() => setLayoutDialogVisible(true)}
-                        /> */}
+                        />
                     </div>
                 </div>
                 <Divider className="m-0" />