@solidstarters/solid-core-ui 1.1.18 → 1.1.20

package/src/components/core/model/FieldMetaDataForm.tsx

@@ -388,13 +388,13 @@ const createValidationSchema = (currentFields: any, selectedType: any, allFields
     ...(currentFields.includes("relationType") && {
       relationType: Yup.string().required("Relation Type is required"),
     }),
-    ...(currentFields.includes("relationModelSingularName") && {
-      relationModelSingularName: Yup.string().required(
+    ...(currentFields.includes("relationCoModelSingularName") && {
+      relationCoModelSingularName: Yup.string().required(
         "Relation Model Singular Name is required"
       ),
     }),
-    ...(currentFields.includes("relationModelFieldName") && {
-      relationModelFieldName: Yup.string()
+    ...(currentFields.includes("relationCoModelFieldName") && {
+      relationCoModelFieldName: Yup.string()
       // .required(
       //   "Relation Model Field Name is required"
       // ),
@@ -703,7 +703,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
     }
   };
 
-  const searchRelationModelSingularNames = async (event: any) => {
+  const searchrelationCoModelSingularNames = async (event: any) => {
     try {
       const query = event.query;
       const queryData: any = {
@@ -892,8 +892,8 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
     mediaStorageProvider: fieldMetaData ? fieldMetaData?.mediaStorageProvider : null,
     mediaEmbedded: fieldMetaData ? (fieldMetaData?.mediaEmbedded && fieldMetaData?.mediaEmbedded.toString()) : "true",
     relationType: fieldMetaData ? fieldMetaData?.relationType : null,
-    relationModelSingularName: fieldMetaData ? fieldMetaData?.relationModelSingularName : null,
-    relationModelFieldName: fieldMetaData ? fieldMetaData?.relationModelFieldName : modelMetaData.pluralName || '',
+    relationCoModelSingularName: fieldMetaData ? fieldMetaData?.relationCoModelSingularName : null,
+    relationCoModelFieldName: fieldMetaData ? fieldMetaData?.relationCoModelFieldName : modelMetaData.pluralName || '',
     relationCreateInverse: fieldMetaData ? fieldMetaData?.relationCreateInverse : false,
     relationCascade: fieldMetaData ? fieldMetaData?.relationCascade : 'cascade',
     relationModelModuleName: fieldMetaData ? fieldMetaData?.relationModelModuleName : modelMetaData?.module.name,
@@ -909,8 +909,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
     isSystem: fieldMetaData ? fieldMetaData?.isSystem : false,
     columnName: fieldMetaData ? fieldMetaData?.columnName : null,
     isUserKey: fieldMetaData ? fieldMetaData?.isUserKey : false,
-    relationJoinColumnName: fieldMetaData ? fieldMetaData?.relationJoinColumnName : null,
-    joinColumnName: fieldMetaData ? fieldMetaData?.joinColumnName : null,
+    relationCoModelColumnName: fieldMetaData ? fieldMetaData?.relationCoModelColumnName : null,
     relationJoinTableName: fieldMetaData ? fieldMetaData?.relationJoinTableName : null,
     userKey: fieldMetaData ? fieldMetaData?.userKey : null
   };
@@ -940,7 +939,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
         });
         if (values.userKey) {
           const data = {
-            modelName: values.relationModelSingularName,
+            modelName: values.relationCoModelSingularName,
             fieldName: values.userKey
           }
           updateUserKey(data);
@@ -1039,7 +1038,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
         offset: 0,
         filters: {
           singularName: {
-            $eq: formik.values.relationModelSingularName
+            $eq: formik.values.relationCoModelSingularName
           }
         },
         populate: ['fields']
@@ -1061,10 +1060,10 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
         }
       }
     }
-    if (formik.values.relationModelSingularName) {
+    if (formik.values.relationCoModelSingularName) {
       fetchFields();
     }
-  }, [formik.values.relationModelSingularName])
+  }, [formik.values.relationCoModelSingularName])
 
   const updateEnumValues = (index: number, updatedString: string) => {
     const updatedValues = formik.values.selectionStaticValues.map((enumValue: string, i: number) =>
@@ -1791,9 +1790,8 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                                 searchData={searchRelationModelModuleNames}
                                 existingData={formik.values.relationModelModuleName}
                                 additionalAction={(e: any) => {
-                                  formik.setFieldValue("relationModelSingularName", "");
-                                  formik.setFieldValue("relationJoinColumnName", "");
-                                  formik.setFieldValue("joinColumnName", "");
+                                  formik.setFieldValue("relationCoModelSingularName", "");
+                                  formik.setFieldValue("relationCoModelColumnName", "");
                                   formik.setFieldValue("relationJoinTableName", "");
                                 }}
                               />
@@ -1832,11 +1830,11 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                           )}
 
                           {currentFields.includes(
-                            "relationModelSingularName"
+                            "relationCoModelSingularName"
                           ) && (
                               <div className="field col-6 flex-flex-column gap-2 mt-3">
                                 <label
-                                  htmlFor="relationModelSingularName"
+                                  htmlFor="relationCoModelSingularName"
                                   className="form-field-label"
                                 >
                                   Co-Model Name
@@ -1844,37 +1842,23 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
 
 
                                 <SingleSelectAutoCompleteField
-                                  key="relationModelSingularName"
+                                  key="relationCoModelSingularName"
                                   formik={formik}
                                   isFormFieldValid={isFormFieldValid}
-                                  fieldName="relationModelSingularName"
-                                  fieldNameId="relationModelSingularName"
+                                  fieldName="relationCoModelSingularName"
+                                  fieldNameId="relationCoModelSingularName"
                                   labelKey="displayName"
                                   valueKey="singularName"
-                                  searchData={searchRelationModelSingularNames}
-                                  existingData={formik.values.relationModelSingularName}
+                                  searchData={searchrelationCoModelSingularNames}
+                                  existingData={formik.values.relationCoModelSingularName}
                                 />
-
-                                {/* <InputText
-                                        type="text"
-                                        id="relationModelSingularName"
-                                        name="relationModelSingularName"
-                                        onChange={formik.handleChange}
-                                        value={formik.values.relationModelSingularName}
-                                        className={classNames("", {
-                                          "p-invalid": isFormFieldValid(
-                                            formik,
-                                            "relationModelSingularName"
-                                          ),
-                                        })}
-                                      /> */}
                                 {isFormFieldValid(
                                   formik,
-                                  "relationModelSingularName"
+                                  "relationCoModelSingularName"
                                 ) && (
                                     <Message
                                       severity="error"
-                                      text={formik?.errors?.relationModelSingularName?.toString()}
+                                      text={formik?.errors?.relationCoModelSingularName?.toString()}
                                     />
                                   )}
                               </div>
@@ -1913,7 +1897,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                               </div>
                             )}
 
-                          {currentFields.includes("relationCreateInverse") && formik.values.relationType === "many-to-many" && (
+                          {currentFields.includes("relationCreateInverse") && (formik.values.relationType === "many-to-many" || formik.values.relationType === "many-to-one")&& (
                             <div className="field col-6 flex flex-column gap-2 mt-3">
                               <label htmlFor="relationCreateInverse" className="form-field-label">
                                 Relation Create Inverse
@@ -1933,31 +1917,31 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                             </div>
                           )}
 
-                          {currentFields.includes("relationModelFieldName") && formik.values.relationCreateInverse && formik.values.relationType === "many-to-many" && (
+                          {currentFields.includes("relationCoModelFieldName") && formik.values.relationCreateInverse && (formik.values.relationType === "many-to-many" || formik.values.relationType === "many-to-one") && (
                             <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
-                                htmlFor="relationModelFieldName"
+                                htmlFor="relationCoModelFieldName"
                                 className="form-field-label"
                               >
                                 Field Name on Inverse Side
                               </label>
                               <InputText
                                 type="text"
-                                id="relationModelFieldName"
-                                name="relationModelFieldName"
+                                id="relationCoModelFieldName"
+                                name="relationCoModelFieldName"
                                 onChange={formik.handleChange}
-                                value={formik.values.relationModelFieldName}
+                                value={formik.values.relationCoModelFieldName}
                                 className={classNames("", {
                                   "p-invalid": isFormFieldValid(
                                     formik,
-                                    "relationModelFieldName"
+                                    "relationCoModelFieldName"
                                   ),
                                 })}
                               />
-                              {isFormFieldValid(formik, "relationModelFieldName") && (
+                              {isFormFieldValid(formik, "relationCoModelFieldName") && (
                                 <Message
                                   severity="error"
-                                  text={formik?.errors?.relationModelFieldName?.toString()}
+                                  text={formik?.errors?.relationCoModelFieldName?.toString()}
                                 />
                               )}
 
@@ -1995,7 +1979,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                             </div>
                           )}
 
-                          {currentFields.includes("joinColumnName") && formik.values.relationType === "many-to-many" && (
+                          {/* {currentFields.includes("joinColumnName") && formik.values.relationType === "many-to-many" && (
                             <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
                                 htmlFor="joinColumnName"
@@ -2024,33 +2008,33 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                               )}
 
                             </div>
-                          )}
+                          )} */}
 
-                          {currentFields.includes("relationJoinColumnName") && formik.values.relationType === "many-to-many" && (
+                          {currentFields.includes("relationCoModelColumnName") && (formik.values.relationType === "many-to-many" || formik.values.relationType === "many-to-one") && (
                             <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
-                                htmlFor="relationJoinColumnName"
+                                htmlFor="relationCoModelColumnName"
                                 className="form-field-label"
                               >
-                                Relation Join Column Name
+                                Relation Co-Model Column Name
                               </label>
                               <InputText
                                 type="text"
-                                id="relationJoinColumnName"
-                                name="relationJoinColumnName"
+                                id="relationCoModelColumnName"
+                                name="relationCoModelColumnName"
                                 onChange={formik.handleChange}
-                                value={formik.values.relationJoinColumnName}
+                                value={formik.values.relationCoModelColumnName}
                                 className={classNames("", {
                                   "p-invalid": isFormFieldValid(
                                     formik,
-                                    "relationJoinColumnName"
+                                    "relationCoModelColumnName"
                                   ),
                                 })}
                               />
-                              {isFormFieldValid(formik, "relationJoinColumnName") && (
+                              {isFormFieldValid(formik, "relationCoModelColumnName") && (
                                 <Message
                                   severity="error"
-                                  text={formik?.errors?.relationJoinColumnName?.toString()}
+                                  text={formik?.errors?.relationCoModelColumnName?.toString()}
                                 />
                               )}
 
@@ -2707,6 +2691,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                                   name="unique"
                                   onChange={(e) => {
                                     formik.setFieldValue("unique", e.checked);
+                                    formik.setFieldValue("isUserKey", false);
                                   }}
                                   checked={formik.values.unique}
                                 ></Checkbox>
@@ -2818,7 +2803,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                             </div>
                           </div>
                         )} */}
-                        {currentFields.includes("isUserKey") && (
+                        {currentFields.includes("isUserKey") && formik.values.unique && (
                          <div className="field col-6 flex-flex-column gap-2 mt-3">
                          <div className="flex align-items-center gap-2">
                                 <Checkbox

package/src/components/core/model/ModelMetaData.tsx

@@ -17,7 +17,7 @@ import qs from "qs";
 import React, { useEffect, useRef, useState } from "react";
 import * as Yup from "yup";
 
-const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allModelsNames, deleteModelFunction, nextTab, formikModelMetadataRef, params, formErrors }: any, ref) => {
+const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allModelsNames, deleteModelFunction, nextTab, formikModelMetadataRef, params, formErrors, setIsDirty }: any, ref) => {
 
   // const ModelMetaData = ({ modelMetaData, setModelMetaData, deleteModelFunction, nextTab, formikModelMetadataRef }: any) => {   
 
@@ -256,6 +256,12 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
 
   }, [formik.values])
 
+  useEffect(() => {
+    if (formik.dirty) {
+      setIsDirty(true);
+    }
+  }, [formik.dirty]);
+
   return (
 
     <>

package/src/components/core/module/CreateModule.tsx

@@ -5,6 +5,7 @@ import { DropzonePlaceholder } from "@/components/common/DropzonePlaceholder";
 import { DropzoneUpload } from "@/components/common/DropzoneUpload";
 import { FileReaderExt } from "@/components/common/FileReaderExt";
 import { SingleSelectAutoCompleteField } from "@/components/common/SingleSelectAutoCompleteField";
+import { SolidBreadcrumb } from "@/components/common/SolidBreadcrumb";
 import { SolidFormStepper } from "@/components/common/SolidFormStepper";
 import { getSingularAndPlural } from "@/helpers/helpers";
 import { handleError } from "@/helpers/ToastContainer";
@@ -332,16 +333,12 @@ const CreateModule = ({ data }: any) => {
           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 
@@ -350,7 +347,7 @@ const CreateModule = ({ data }: any) => {
         />
         <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"
@@ -360,18 +357,16 @@ const CreateModule = ({ data }: any) => {
               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"
+              className="w-8rem text-left gap-2"
               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>
-              }
+              severity="danger"
+              icon={'pi pi-trash'}
               onClick={deteleAction}
             />
           </div>
@@ -380,6 +375,11 @@ const CreateModule = ({ data }: any) => {
     )
   }
 
+  const breadcrumbData = [
+    { label: 'Module', link: '/admin/core/solid-core/model-metadata/list' },
+    { label: pathname.includes('new') ? 'Create Module' : 'Edit Module' },
+  ];
+
   return (
     <div className="solid-form-wrapper">
       <Toast ref={toast} />
@@ -392,7 +392,9 @@ const CreateModule = ({ data }: any) => {
                 <div className="form-wrapper-title">Create Module</div>
               </div>
               <div className="gap-3 flex">
-                <Button label="Save" size="small" onClick={() => showError()} type="submit" />
+                {formik.dirty &&
+                  <Button label="Save" size="small" onClick={() => showError()} type="submit" />
+                }
                 <CancelButton />
               </div>
             </>
@@ -405,7 +407,9 @@ const CreateModule = ({ data }: any) => {
               <div className="gap-3 flex">
                 {data?.isSystem !== true &&
                   <>
-                    <Button label="Save" size="small" onClick={() => showError()} type="submit" />
+                    {formik.dirty &&
+                      <Button label="Save" size="small" onClick={() => showError()} type="submit" />
+                    }
                     <CancelButton />
                     {formActionDropdown()}
                   </>
@@ -414,9 +418,10 @@ const CreateModule = ({ data }: any) => {
             </>
           }
         </div>
-        <div className="solid-form-stepper">
+        <SolidBreadcrumb breadcrumbItems={breadcrumbData} />
+        {/* <div className="solid-form-stepper">
           <SolidFormStepper />
-        </div>
+        </div> */}
         <div className="p-4 solid-form-content">
           <p className="form-wrapper-heading text-base">Basic Info</p>
           <div className="formgrid grid">

package/src/components/core/users/CreateUser.tsx

@@ -1,6 +1,7 @@
 'use client';
 import { BackButton } from "@/components/common/BackButton";
 import { CancelButton } from "@/components/common/CancelButton";
+import { SolidBreadcrumb } from "@/components/common/SolidBreadcrumb";
 import { SolidFormStepper } from "@/components/common/SolidFormStepper";
 import { useRegisterPrivateMutation, useUpdateUserMutation } from "@/redux/api/authApi";
 import { useGetrolesQuery } from "@/redux/api/roleApi";
@@ -230,6 +231,11 @@ const CreateUser = ({ data, params }: any) => {
     }
   }, [isSuccess, isDeleteUserSuceess, isUpdateuserSuceess])
 
+  const breadcrumbData = [
+    { label: 'User', link: '/admin/core/solid-core/model-metadata/list' },
+    { label: params.id === "new" ? 'Create User' : 'Edit User' },
+  ];
+
   return (
     <div className="solid-form-wrapper">
       <Toast ref={toast} />
@@ -242,7 +248,9 @@ const CreateUser = ({ data, params }: any) => {
                 <div className="form-wrapper-title">Create User</div>
               </div>
               <div className="gap-3 flex">
-                <Button label="Save" size="small" type="submit" />
+                {formik.dirty &&
+                  <Button label="Save" size="small" type="submit" />
+                }
                 <CancelButton />
               </div>
             </>
@@ -254,7 +262,9 @@ const CreateUser = ({ data, params }: any) => {
               </div>
               <div>
                 <div className="gap-3 flex">
-                  <Button label="Save" size="small" type="submit" />
+                  {formik.dirty &&
+                    <Button label="Save" size="small" type="submit" />
+                  }
                   {data &&
                     <Button outlined label="Delete" size="small" severity="danger" type="button" onClick={() => deleteUser(data.id)} />
                   }
@@ -264,9 +274,10 @@ const CreateUser = ({ data, params }: any) => {
             </>
           )}
         </div>
-        <div className="solid-form-stepper">
+        <SolidBreadcrumb breadcrumbItems={breadcrumbData} />
+        {/* <div className="solid-form-stepper">
           <SolidFormStepper />
-        </div>
+        </div> */}
         <div className="p-4 solid-form-content">
           <div className="grid">
             <div className="col-8 mx-auto">
@@ -402,7 +413,6 @@ const CreateUser = ({ data, params }: any) => {
                         inputId={role.name}
                         checked={selectedRoles.includes(role.name)}
                         onChange={() => handleCheckboxChange(role.name)}
-                        disabled={data ? true : false}
                       />
                       <label htmlFor={role.name}> {role.name}</label>
                     </div>

package/src/components/layout/AppConfig.tsx

@@ -42,7 +42,7 @@ const AppConfig = (props: AppConfigProps) => {
 
     const applyScale = () => {
         // document.documentElement.style.fontSize = layoutConfig.scale + 'px';
-        document.documentElement.style.fontSize = 14 + 'px';
+        document.documentElement.style.fontSize = 15 + 'px';
     };
 
     useEffect(() => {

package/src/components/layout/AppSidebar.tsx

@@ -7,6 +7,10 @@ import { useEffect, useRef, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import NavbarTwoMenu from "./navbar-two-menu";
 import UserProfileMenu from "./user-profile-menu";
+import Image from "next/image";
+import AppBuilderSvg from '../../resources/images/menu/app-builder.svg'
+import SettingImage from '../../resources/images/Navigation/settings.png'
+
 // import menu from "@/helpers/menu";
 
 const AppSidebar = () => {
@@ -107,7 +111,7 @@ const AppSidebar = () => {
                 ]
             }
         ],
-        icon: "/images/Navigation/settings.png" // Default icon (optional)
+        icon: SettingImage
     };
     const updatedMenuData = menu?.data ? [...menu.data, additionalMenu] : [additionalMenu];
 
@@ -134,28 +138,59 @@ const AppSidebar = () => {
 
             <div className="sidebar-left">
                 <div className="navbar-menu">
-                    {updatedMenuData.length > 0 && updatedMenuData.map((m: any) => (
-                        <div
-                            key={m.title}
-                            className={`menu-item ${currentMainMenu === m.title ? "active-menu-image" : ""}`}
-                        >
-                            <a onClick={() => handleMenu(m)}>
-                                {m.icon ?
-                                    <img
-                                        style={{ cursor: "pointer", width: '30px', mixBlendMode: "multiply" }}
-                                        src={(m.icon && m.icon.startsWith("/")) ? m.icon : `${process.env.API_URL}/${m.icon}`}
-                                        alt={m.title}
-                                    />
-                                    :
-                                    <img
-                                        style={{ cursor: "pointer", width: '30px' }}
-                                        src={`/images/menu/app-builder.svg`}
-                                        alt={m.title}
-                                    />
-                                }
-                            </a>
-                        </div>
-                    ))}
+                    {updatedMenuData.length > 0 && updatedMenuData.map((m: any) => {
+                        const iconSrc =
+                            typeof m.icon === "string"
+                                ? m.icon
+                                : m.icon && typeof m.icon.src === "string"
+                                    ? m.icon.src
+                                    : null;
+                        return (
+                            <div
+                                key={m.title}
+                                className={`menu-item ${currentMainMenu === m.title ? "active-menu-image" : ""}`}
+                            >
+                                <a onClick={() => handleMenu(m)}>
+                                    {m.icon ?
+                                        <Image
+                                            style={{ cursor: "pointer", mixBlendMode: "multiply" }}
+                                            // src={(m.icon && m.icon.startsWith("/")) ? m.icon : `${process.env.API_URL}/${m.icon}`}
+                                            src={iconSrc.startsWith("/") ? iconSrc : `${process.env.API_URL}/${iconSrc}`}
+                                            alt={m.title}
+                                            fill
+                                            className="relative"
+                                        />
+                                        :
+                                        // <img
+                                        //     style={{ cursor: "pointer", width: '50px' }}
+                                        //     src={`/images/menu/app-builder.svg`}
+                                        //     alt={m.title}
+                                        // />
+                                        ((
+                                            <div
+                                                style={{
+                                                    width: "40px",
+                                                    height: "40px",
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    justifyContent: "center",
+                                                    backgroundColor: "#722ED1",
+                                                    color: "white",
+                                                    fontWeight: "bold",
+                                                    borderRadius: "50%",
+                                                    fontSize: "18px",
+                                                    textTransform: "uppercase",
+                                                    cursor: "pointer",
+                                                }}
+                                            >
+                                                {m.title.charAt(0)}
+                                            </div>
+                                        ))
+                                    }
+                                </a>
+                            </div>
+                        )
+                    })}
                 </div>
 
                 <UserProfileMenu></UserProfileMenu>

package/src/components/layout/navbar-two-menu.tsx

@@ -18,7 +18,7 @@ const NavbarTwoMenu = ({ menuItems }: any) => {
     // currentItem === activeParentPath ?' p-highlight' : ''
         return (
             <div key={item?.key} className={`flex align-items-center cursor-pointer menuHead px-3 ${isSettingsPage ? ' p-highlight' : ''}`} onClick={options.onClick}>
-                <Link href={item?.url ? item?.url : '#'} className="w-full flex justify-content-between font-medium">
+                <Link href={item?.url ? item?.url : '#'} className="w-full flex justify-content-between font-normal">
                     <div className="flex align-items-center gap-3">
                         <span className={item.icon} />
                         <span className="">