@solidstarters/solid-core-ui 1.1.18 → 1.1.20

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

@@ -1,22 +1,43 @@
 "use client"
+import { deleteManyPermission, deletePermission } from "@/helpers/permissions";
+import Image from "next/image";
 import { Accordion, AccordionTab } from "primereact/accordion";
 import { Button } from "primereact/button";
 import { Checkbox, CheckboxChangeEvent } from "primereact/checkbox";
 import { Divider } from "primereact/divider";
 import { OverlayPanel } from "primereact/overlaypanel";
 import { RadioButton } from "primereact/radiobutton";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 interface FilterColumns {
     name: string;
     key: string;
 }
-export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, viewData, sizeOptions, setSize, size, viewModes, setView, view }: any) => {
+export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, viewData, sizeOptions, setSize, size, viewModes, setView, view, params, actionsAllowed, selectedRecords, setDialogVisible }: any) => {
 
     // const [visible, setVisible] = useState<boolean>(false);
     const op = useRef(null);
-    const customizeLayout = useRef(null);
-    const [isOverlayOpen, setIsOverlayOpen] = useState(true);
+    const customizeLayout = useRef<OverlayPanel | null>(null);
+    const [isOverlayOpen, setIsOverlayOpen] = useState(false);
+    console.log("isOverlayOpen", isOverlayOpen);
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            if (
+                customizeLayout.current &&
+                !customizeLayout.current.getElement()?.contains(event.target as Node)
+            ) {
+                setIsOverlayOpen(false);
+            }
+        };
+
+        if (isOverlayOpen) {
+            document.addEventListener("click", handleClickOutside);
+        } else {
+            document.removeEventListener("click", handleClickOutside);
+        }
+
+        return () => document.removeEventListener("click", handleClickOutside);
+    }, [isOverlayOpen])
 
     const categories: FilterColumns[] = [
         { name: 'ID', key: 'A' },
@@ -48,55 +69,89 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                 // @ts-ignore
                 onClick={(e) => op.current.toggle(e)}
             />
-            <OverlayPanel ref={op}>
+            <OverlayPanel ref={op} className="listview-cogwheel-panel">
                 <div className="p-2">
                     <div className="flex flex-column">
-                        <Button text icon='pi pi-download' label="Import" size="small" severity="secondary" className="text-left gap-2" />
-                        <Button text icon='pi pi-upload' label="Export" size="small" severity="secondary" className="text-left gap-2" />
-                        <Button text icon='pi pi-share-alt' label="Share" size="small" severity="secondary" className="text-left gap-2" />
+                        {actionsAllowed.includes(`${deleteManyPermission(params.modelName)}`) && viewData?.data?.solidView?.layout?.attrs?.delete !== false && selectedRecords.length > 0 &&
+                            <Button
+                                text
+                                type="button"
+                                className="text-left gap-2 text-base"
+                                label="Delete"
+                                size="small"
+                                iconPos="left"
+                                severity="danger"
+                                icon={'pi pi-trash'}
+                                onClick={() => setDialogVisible(true)}
+                            />}
+                        <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 text icon='pi pi-share-alt' label="Share" size="small" severity="secondary" className="text-left gap-2" /> */}
+                        {/* {viewData?.data?.solidView?.model?.enableSoftDelete &&
+                            <Button text severity="secondary" size="small" className="text-left w-13rem" label={showArchived ? "Hide Archived Records" : "Show Archived Records"} iconPos="left" onClick={() => { setShowArchived(!showArchived); }} />
+                        } */}
+                        {viewData?.data?.solidView?.model?.enableSoftDelete && (
+                            <div className="flex align-items-center px-3 gap-2 mt-2 mb-1">
+                                <Checkbox
+                                    inputId="showArchived"
+                                    checked={showArchived}
+                                    onChange={() => setShowArchived(!showArchived)}
+                                />
+                                <label htmlFor="showArchived" className="ml-2 text-base solid-secondary-text-color">
+                                    Show Archived Records
+                                </label>
+                            </div>
+                        )}
+
+
                     </div>
                 </div>
                 <Divider className="m-0" />
                 <div className="p-2 position-relative flex flex-column gap-1">
-                    {viewData?.data?.solidView?.model?.enableSoftDelete &&
-                        <Button text size="small" className="text-left w-13rem" label={showArchived ? "Hide Archived Records" : "Show Archived Records"} iconPos="left" onClick={() => { setShowArchived(!showArchived); }} />
-                    }
                     <Button
                         icon='pi pi-sliders-h'
                         label="Customize Layout"
+                        severity={isOverlayOpen ? undefined : "secondary"}
                         size="small"
-                        text={isOverlayOpen}
-                        className="text-left gap-2 w-13rem"
+                        text={isOverlayOpen ? false : true}
+                        className="text-left gap-2 w-full text-base"
                         // @ts-ignore
-                        onClick={(e) => customizeLayout.current.toggle(e)}
-                    // onMouseEnter={(e) => customizeLayout.current.show(e)}
-                    />
-                    <p className="mt-3 mb-1 font-medium" style={{ color: 'var(--gray-400)' }}>Saved Layouts</p>
-                    <Button text severity="secondary" label="Diet Tracking" icon="pi pi-plus" size="small" />
+                        onClick={(e) => {
+                            customizeLayout.current?.toggle(e);
+                            setIsOverlayOpen((prev) => !prev); // ✅ Ensure state updates when toggled
+                        }}
+                    >
+                        <i className="pi pi-chevron-right text-sm"></i>
+                    </Button>
+                    {/* <p className="mt-3 mb-1 font-medium" style={{ color: 'var(--gray-400)' }}>Saved Layouts</p> */}
+                    {/* <Button text severity="secondary" label="Diet Tracking" icon="pi pi-plus" size="small" /> */}
                     <OverlayPanel ref={customizeLayout} className="customize-layout-panel" style={{ minWidth: 250 }}
-                        onShow={() => setIsOverlayOpen(false)}
-                        onHide={() => setIsOverlayOpen(true)}
+                        onShow={() => setIsOverlayOpen(true)}
+                        onHide={() => {
+                            console.log("Overlay closed");
+                            setTimeout(() => setIsOverlayOpen(false), 50); // ✅ Ensure state updates
+                        }}
                     >
                         <div className="solid-layout-accordion">
                             <Accordion multiple expandIcon="pi pi-chevron-down" collapseIcon="pi pi-chevron-up">
                                 <AccordionTab header="Switch Type">
-                                    <div className="flex flex-column gap-1">
-                                        {sizeOptions.map((option: any) => (
-                                            <div key={option.value} className={`flex align-items-center ${option.value === size ? 'solid-active-view' : 'solid-view'}`}>
+                                    <div className="flex flex-column gap-1 p-1">
+                                        {viewModes.map((option: any) => (
+                                            <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>
                                                 <RadioButton
                                                     inputId={option.value}
-                                                    name="sizes"
+                                                    name="views"
                                                     value={option.value}
-                                                    onChange={(e) => setSize(e.value)}
-                                                    checked={option.value === size}
+                                                    onChange={(e) => setView(e.value)}
+                                                    checked={option.value === view}
                                                 />
                                                 <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
                                                     {option.label}
-                                                    <img
+                                                    <Image
                                                         src={option.image}
                                                         alt={option.value}
-                                                        className='img-fluid position-relative'
-                                                        style={{ width: '2.75rem' }}
+                                                        fill
+                                                        className='relative row-spacing-img'
                                                     />
                                                 </label>
                                             </div>
@@ -104,23 +159,24 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                                     </div>
                                 </AccordionTab>
                                 <AccordionTab header="List">
-                                    <div className="flex flex-column gap-1">
-                                        {viewModes.map((option: any) => (
-                                            <div key={option.value} className={`flex align-items-center ${option.value === view ? 'solid-active-view' : 'solid-view'}`}>
+                                    <div className="flex flex-column gap-1 p-1">
+                                        <p className="m-0 px-3">Row Spacing</p>
+                                        {sizeOptions.map((option: any) => (
+                                            <div key={option.value} className={`flex align-items-center ${option.value === size ? 'solid-active-view' : 'solid-view'}`}>
                                                 <RadioButton
                                                     inputId={option.value}
-                                                    name="views"
+                                                    name="sizes"
                                                     value={option.value}
-                                                    onChange={(e) => setView(e.value)}
-                                                    checked={option.value === view}
+                                                    onChange={(e) => setSize(e.value)}
+                                                    checked={option.value === size}
                                                 />
                                                 <label htmlFor={option.value} className="ml-2 flex align-items-center justify-content-between w-full">
                                                     {option.label}
-                                                    <img
+                                                    <Image
                                                         src={option.image}
                                                         alt={option.value}
-                                                        className='img-fluid position-relative'
-                                                        style={{ width: '2.75rem' }}
+                                                        fill
+                                                        className='relative row-spacing-img'
                                                     />
                                                 </label>
                                             </div>
@@ -134,7 +190,7 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                             <p className="m-0">Column Selector</p>
                             {/* <Button text label="Save Layout" icon="pi pi-plus" /> */}
                         </div>
-                        <div className="flex flex-column gap-3 p-3">
+                        <div className="flex flex-column gap-3 p-3 cogwheel-column-filter">
                             {categories.map((category) => {
                                 return (
                                     <div key={category.key} className="flex align-items-center gap-1">
@@ -144,8 +200,9 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                                             value={category}
                                             onChange={onCategoryChange}
                                             checked={selectedCategories.some((item) => item.key === category.key)}
+                                            className="text-base"
                                         />
-                                        <label htmlFor={category.key} className="ml-2">
+                                        <label htmlFor={category.key} className="ml-2 text-base">
                                             {category.name}
                                         </label>
                                     </div>
@@ -155,11 +212,14 @@ export const SolidConfigureLayoutElement = ({ setShowArchived, showArchived, vie
                         <Divider className="m-0" />
                         <div className="p-3 flex gap-2">
                             <Button label="Apply" size="small" />
-                            <Button outlined label="Cancel" size="small" />
+                            <Button outlined label="Cancel" size="small"
+                                // @ts-ignore
+                                onClick={(e) => op.current.hide(e)}
+                            />
                         </div>
                     </OverlayPanel>
                 </div>
             </OverlayPanel>
-        </div >
+        </div>
     )
 }

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

@@ -340,7 +340,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                 // }}
                 />
             </div>
-            <OverlayPanel ref={op} className="solid-custom-overlay" style={{ minWidth: 378 }}>
+            <OverlayPanel ref={op} className="solid-custom-overlay" style={{ minWidth: 405 }}>
                 {inputValue ? (
                     <>
                         <div className="custom-filter-search-options px-2 py-2 flex flex-column">
@@ -353,6 +353,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                                         onClick={() => handleAddChip(value?.attrs?.name)}
                                         text
                                         severity="secondary"
+                                        size="small"
                                     >
                                         Search <strong>{value?.attrs?.name}</strong> for :
                                         <span className="font-bold" style={{ color: '#000' }}>{inputValue}</span>
@@ -364,12 +365,12 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                     </>
                 ) :
                     <>
-                        <div className="p-3">Search Here...</div>
+                        <div className="p-3 text-base">Search Here...</div>
                         <Divider className="m-0" />
                     </>
                 }
                 <div className="px-2 py-1">
-                    <Button text size="small" label="Custom Filter" iconPos="left" icon='pi pi-plus' onClick={() => setShowGlobalSearchElement(true)} />
+                    <Button text size="small" label="Custom Filter" iconPos="left" icon='pi pi-plus' onClick={() => setShowGlobalSearchElement(true)} className="font-bold" />
                 </div>
                 <Divider className="m-0" />
             </OverlayPanel>

package/src/components/core/filter/SolidManyToOneFilterElement.tsx

@@ -7,7 +7,7 @@ import qs from "qs";
 
 export const SolidManyToOneFilterElement = ({ value, updateInputs, index, fieldMetadata }: any) => {
 
-    const entityApi = createSolidEntityApi(fieldMetadata.relationModelSingularName);
+    const entityApi = createSolidEntityApi(fieldMetadata.relationCoModelSingularName);
     const { useLazyGetSolidEntitiesQuery } = entityApi;
     const [triggerGetSolidEntities] = useLazyGetSolidEntitiesQuery();
 

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

@@ -35,6 +35,7 @@ import { SolidTimeField } from "./fields/SolidTimeField";
 import { BackButton } from "@/components/common/BackButton";
 import { SolidFormStepper } from "@/components/common/SolidFormStepper";
 import { OverlayPanel } from "primereact/overlaypanel";
+import { SolidBreadcrumb } from "@/components/common/SolidBreadcrumb";
 
 export type SolidFormViewProps = {
     moduleName: string;
@@ -130,7 +131,7 @@ const fieldFactory = (type: string, fieldContext: SolidFieldProps): ISolidField
 }
 
 // solidFieldsMetadata={solidFieldsMetadata} solidView={solidView}
-const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidFormViewMetaData, modelName }: any) => {
+const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidFormViewMetaData, modelName, readOnly }: any) => {
     const fieldContext: SolidFieldProps = {
         // field metadata - coming from the field-metadata table.
         fieldMetadata: fieldMetadata,
@@ -141,6 +142,7 @@ const SolidField = ({ formik, field, fieldMetadata, initialEntityData, solidForm
         // complete form view metadata - this includes layout of the whole form & metadata about all fields in the corresponding model.
         solidFormViewMetaData: solidFormViewMetaData,
         modelName: modelName,
+        readOnly: readOnly
     }
     const solidField = fieldFactory(fieldMetadata?.type, fieldContext);
 
@@ -543,7 +545,13 @@ const SolidFormView = (params: SolidFormViewProps) => {
     const {
         data: solidFormViewData,
         isLoading: solidFormViewDataIsLoading,
-    } = useGetSolidEntityByIdQuery({ id: params.id, qs: formViewDataQs }, { skip: !solidFormViewMetaData || params.id === 'new' });
+        refetch: refetchSolidFormViewData,
+    } = useGetSolidEntityByIdQuery({ id: params.id, qs: formViewDataQs });
+    useEffect(() => {
+        refetchSolidFormViewData()
+    }, [formViewDataQs])
+
+
     useEffect(() => {
         if (solidFormViewData) {
             setInitialEntityData(solidFormViewData.data);
@@ -628,8 +636,9 @@ const SolidFormView = (params: SolidFormViewProps) => {
                 case "field": {
                     // const fieldMetadata = solidFieldsMetadata[attrs.name];
                     const fieldMetadata = solidFormViewMetaData.data.solidFieldsMetadata[attrs.name];
-
-                    return <SolidField key={key} field={element} formik={formik} fieldMetadata={fieldMetadata} initialEntityData={solidFormViewData ? solidFormViewData.data : null} solidFormViewMetaData={solidFormViewMetaData} modelName={params.modelName} />;
+                    // 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" 
+                    return <SolidField key={key} field={element} formik={formik} fieldMetadata={fieldMetadata} initialEntityData={solidFormViewData ? solidFormViewData.data : null} solidFormViewMetaData={solidFormViewMetaData} modelName={params.modelName} readOnly={readOnlyPermission} />;
                 }
                 case "notebook":
                     return <SolidNotebook key={key}>{children.map((element: any) => renderFormElementDynamically(element, solidFormViewMetaData))}</SolidNotebook>;
@@ -688,16 +697,12 @@ const SolidFormView = (params: SolidFormViewProps) => {
                         outlined
                         severity="secondary"
                         type="button"
-                        icon={
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-                                <path d="M6 14C5.45 14 4.97917 13.8042 4.5875 13.4125C4.19583 13.0208 4 12.55 4 12C4 11.45 4.19583 10.9792 4.5875 10.5875C4.97917 10.1958 5.45 10 6 10C6.55 10 7.02083 10.1958 7.4125 10.5875C7.80417 10.9792 8 11.45 8 12C8 12.55 7.80417 13.0208 7.4125 13.4125C7.02083 13.8042 6.55 14 6 14ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM18 14C17.45 14 16.9792 13.8042 16.5875 13.4125C16.1958 13.0208 16 12.55 16 12C16 11.45 16.1958 10.9792 16.5875 10.5875C16.9792 10.1958 17.45 10 18 10C18.55 10 19.0208 10.1958 19.4125 10.5875C19.8042 10.9792 20 11.45 20 12C20 12.55 19.8042 13.0208 19.4125 13.4125C19.0208 13.8042 18.55 14 18 14Z" fill="#4B4D52" />
-                            </svg>
-                        }
+                        icon={'pi pi-cog'}
                         size="small"
-                        className="bg-primary-reverse p-0"
+                        className="surface-card p-0"
                         style={{
-                            height: 32,
-                            width: 32
+                            height: 33.06,
+                            width: 33.06
                         }}
                         onClick={(e) =>
                             // @ts-ignore 
@@ -706,7 +711,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                     />
                     <OverlayPanel ref={op} className="solid-custom-overlay">
                         <div className="flex flex-column gap-1 p-1">
-                            <Button
+                            {/* <Button
                                 text
                                 type="button"
                                 className="w-8rem text-left gap-2 text-color"
@@ -716,26 +721,48 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                 icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
                                     <path d="M6 11.9997C5.63333 11.9997 5.31944 11.8691 5.05833 11.608C4.79722 11.3469 4.66667 11.033 4.66667 10.6663V2.66634C4.66667 2.29967 4.79722 1.98579 5.05833 1.72467C5.31944 1.46356 5.63333 1.33301 6 1.33301H12C12.3667 1.33301 12.6806 1.46356 12.9417 1.72467C13.2028 1.98579 13.3333 2.29967 13.3333 2.66634V10.6663C13.3333 11.033 13.2028 11.3469 12.9417 11.608C12.6806 11.8691 12.3667 11.9997 12 11.9997H6ZM6 10.6663H12V2.66634H6V10.6663ZM3.33333 14.6663C2.96667 14.6663 2.65278 14.5358 2.39167 14.2747C2.13056 14.0136 2 13.6997 2 13.333V3.99967H3.33333V13.333H10.6667V14.6663H3.33333Z" fill="black" fill-opacity="0.88" />
                                 </svg>}
-                            />
-                            <Button
-                                text
-                                type="button"
-                                className="w-8rem text-left gap-2 text-color"
-                                label="Delete"
-                                size="small"
-                                iconPos="left"
-                                icon={<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-                                    <path d="M4.66666 14C4.29999 14 3.9861 13.8694 3.72499 13.6083C3.46388 13.3472 3.33332 13.0333 3.33332 12.6667V4H2.66666V2.66667H5.99999V2H9.99999V2.66667H13.3333V4H12.6667V12.6667C12.6667 13.0333 12.5361 13.3472 12.275 13.6083C12.0139 13.8694 11.7 14 11.3333 14H4.66666ZM11.3333 4H4.66666V12.6667H11.3333V4ZM5.99999 11.3333H7.33332V5.33333H5.99999V11.3333ZM8.66666 11.3333H9.99999V5.33333H8.66666V11.3333Z" fill="#4B4D52" />
-                                </svg>
-                                }
-                                onClick={() => setDeleteDialogVisible(true)}
-                            />
+                            /> */}
+                            {params.embeded !== true &&
+                                actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
+                                !formViewLayout.attrs.readonly &&
+                                <Button
+                                    text
+                                    type="button"
+                                    className="w-8rem text-left gap-2"
+                                    label="Delete"
+                                    size="small"
+                                    iconPos="left"
+                                    severity="danger"
+                                    icon={'pi pi-trash'}
+                                    onClick={() => setDeleteDialogVisible(true)}
+                                />
+                            }
+                            {params.embeded == true &&
+                                actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
+                                !formViewLayout.attrs.readonly &&
+                                <Button
+                                    text
+                                    type="button"
+                                    className="w-8rem text-left gap-2"
+                                    label="Delete"
+                                    size="small"
+                                    iconPos="left"
+                                    severity="danger"
+                                    icon={'pi pi-trash'}
+                                    onClick={() => setDeleteDialogVisible(true)}
+                                />
+                            }
                         </div>
                     </OverlayPanel>
                 </div>
             )
         }
 
+        const breadcrumbData = [
+            { label: 'Book', link: '/admin/core/library-management/book/list' },
+            { label: params.id === "new" ? `Add ${params.modelName}` : `Edit ${params.modelName}` },
+        ];
+
         return (
             <div className="solid-form-wrapper">
                 <Toast ref={toast} />
@@ -752,7 +779,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                     {params.embeded !== true &&
                                         actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
                                         !formViewLayout.attrs.readonly &&
-                                        !formViewLayout.attrs.readonly &&
+                                        formik.dirty &&
                                         <div>
                                             <Button
                                                 label="Save"
@@ -762,10 +789,9 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                             />
                                         </div>
                                     }
-                                    {params.embeded !== true &&
+                                    {/* {params.embeded !== true &&
                                         actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
                                         !formViewLayout.attrs.readonly &&
-                                        !formViewLayout.attrs.readonly &&
                                         <div>
                                             <Button
                                                 label="Save & Close"
@@ -777,11 +803,11 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                                 type="submit"
                                             />
                                         </div>
-                                    }
+                                    } */}
                                     {params.embeded == true &&
                                         actionsAllowed.includes(`${createPermission(params.modelName)}`) &&
                                         !formViewLayout.attrs.readonly &&
-                                        !formViewLayout.attrs.readonly &&
+                                        formik.dirty &&
                                         <div>
                                             <Button
                                                 label="Save"
@@ -795,7 +821,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                         </div>
                                     }
                                     {params.embeded == true &&
-                                        <Button outlined size="small" type="button" label="Cancel" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
+                                        <Button outlined size="small" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
 
                                     }
                                     {params.embeded !== true &&
@@ -814,7 +840,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                     {params.embeded !== true &&
                                         actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
                                         !formViewLayout.attrs.readonly &&
-                                        !formViewLayout.attrs.readonly &&
+                                        formik.dirty &&
                                         <div>
                                             <Button
                                                 label="Save"
@@ -827,7 +853,7 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                     {params.embeded == true &&
                                         actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
                                         !formViewLayout.attrs.readonly &&
-                                        !formViewLayout.attrs.readonly &&
+                                        formik.dirty &&
                                         <div>
                                             <Button
                                                 label="Save"
@@ -837,10 +863,9 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                             />
                                         </div>
                                     }
-                                    {params.embeded !== true &&
+                                    {/* {params.embeded !== true &&
                                         actionsAllowed.includes(`${updatePermission(params.modelName)}`) &&
                                         !formViewLayout.attrs.readonly &&
-                                        !formViewLayout.attrs.readonly &&
                                         <div>
                                             <Button
                                                 label="Save & Close"
@@ -852,37 +877,9 @@ const SolidFormView = (params: SolidFormViewProps) => {
                                                 type="submit"
                                             />
                                         </div>
-                                    }
-                                    {params.embeded !== true &&
-                                        actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
-                                        !formViewLayout.attrs.readonly &&
-                                        !formViewLayout.attrs.readonly &&
-                                        <div>
-                                            <Button
-                                                size="small"
-                                                type="button"
-                                                label="Delete"
-                                                severity="danger"
-                                                onClick={() => setDeleteDialogVisible(true)}
-                                            />
-                                        </div>
-                                    }
-                                    {params.embeded == true &&
-                                        actionsAllowed.includes(`${deletePermission(params.modelName)}`) &&
-                                        !formViewLayout.attrs.readonly &&
-                                        !formViewLayout.attrs.readonly &&
-                                        <div>
-                                            <Button
-                                                size="small"
-                                                type="button"
-                                                label="Delete"
-                                                severity="danger"
-                                                onClick={() => setDeleteDialogVisible(true)}
-                                            />
-                                        </div>
-                                    }
+                                    } */}
                                     {params.embeded == true &&
-                                        <Button outlined size="small" type="button" label="Cancel" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
+                                        <Button outlined size="small" type="button" label="Close" onClick={() => params.handlePopupClose()} className='bg-primary-reverse' />
 
                                     }
                                     {params.embeded !== true &&
@@ -893,11 +890,12 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             </>
                         )}
                     </div>
-                    {params.embeded !== true &&
+                    <SolidBreadcrumb breadcrumbItems={breadcrumbData} />
+                    {/* {params.embeded !== true &&
                         <div className="solid-form-stepper">
                             <SolidFormStepper />
                         </div>
-                    }
+                    } */}
                     <div className="p-4 solid-form-content">
                         {renderFormDynamically(formViewMetaData)}
                     </div>

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

@@ -7,7 +7,8 @@ export type SolidFieldProps = {
     fieldMetadata: any,
     field: any,
     data: any,
-    modelName?: any
+    modelName?: any,
+    readOnly?: any
 };
 
 export type FormikObject = {

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

@@ -70,6 +70,7 @@ export class SolidBooleanField implements ISolidField {
         const booleanOptions = ["false", "true"];
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const readOnlyPermission = this.fieldContext.readOnly;
 
         useEffect(() => { formik.setFieldValue(fieldLayoutInfo.attrs.name, "false") }, [])
 
@@ -86,7 +87,7 @@ export class SolidBooleanField implements ISolidField {
                 <div className="flex flex-column gap-2 mt-4">
                     {showFieldLabel != false &&
                         <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                         </label>
                     }
                     {/* <InputText
@@ -97,7 +98,7 @@ export class SolidBooleanField implements ISolidField {
                         value={formik.values[fieldLayoutInfo.attrs.name] || ''}
                     /> */}
                     <SelectButton
-                        readOnly={formReadonly || fieldReadonly}
+                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
                         disabled={formDisabled || fieldDisabled}
                         id={fieldLayoutInfo.attrs.name}
                         aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}

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

@@ -53,6 +53,7 @@ export class SolidDateField implements ISolidField {
         const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
         const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const readOnlyPermission = this.fieldContext.readOnly;
 
         const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
         // const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
@@ -65,11 +66,11 @@ export class SolidDateField implements ISolidField {
                 <div className="flex flex-column gap-2 mt-4">
                     {showFieldLabel != false &&
                         <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                            &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                         </label>
                     }
                     <Calendar
-                        disabled={formDisabled || fieldDisabled}
+                        disabled={formDisabled || fieldDisabled || readOnlyPermission}
                         ref={calendarRef} // Attach ref to Calendar
                         id={fieldLayoutInfo.attrs.name}
                         aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}