@solidstarters/solid-core-ui 1.1.16 → 1.1.18

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

@@ -4,7 +4,7 @@ import { SingleSelectAutoCompleteField } from "@/components/common/SingleSelectA
 import { getSingularAndPlural } from "@/helpers/helpers";
 import { useGetFieldDefaultMetaDataQuery } from "@/redux/api/fieldApi";
 import { useLazyGetMediaStorageProvidersQuery } from "@/redux/api/mediaStorageProviderApi";
-import { useLazyGetModelsQuery } from "@/redux/api/modelApi";
+import { useLazyGetModelsQuery, useUpdateUserKeyMutation } from "@/redux/api/modelApi";
 import { useLazyGetmodulesQuery } from "@/redux/api/moduleApi";
 import { useFormik } from "formik";
 import { capitalize } from "lodash";
@@ -85,14 +85,14 @@ const SelectionStaticValues = ({ enumValue, onUpdate, onDelete, onAdd }: any) =>
   };
 
   return (
-    <div className="flex align-items-center gap-2">
+    <div className="flex align-items-center gap-2 mt-2">
       
       {/* Input field for Value */}
       <InputText
         value={value || ""}
         onChange={(e) => handleValueChange(e.target.value)}
         placeholder="Value"
-        className="p-inputtext-sm small-input w-full"
+        className="w-full"
       />
       
       {/* Input field for Display */}
@@ -100,7 +100,7 @@ const SelectionStaticValues = ({ enumValue, onUpdate, onDelete, onAdd }: any) =>
         value={display || ""}
         onChange={(e) => handleDisplayChange(e.target.value)}
         placeholder="Display"
-        className="p-inputtext-sm small-input w-full"
+        className="w-full"
       />
 
       
@@ -506,7 +506,7 @@ const createValidationSchema = (currentFields: any, selectedType: any, allFields
   return Yup.object(schema);
 };
 
-const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, allFields, deleteModelFunction, setVisiblePopup, params, setIsRequiredPopUp }: any) => {
+const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, allFields, deleteModelFunction, setVisiblePopup, params, setIsRequiredPopUp, showToaster }: any) => {
 
   const booleanOptions = ["false", "true"];
   const [isBackPopupVisible, setIsBackPopupVisible] = useState(false);
@@ -523,6 +523,10 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
   const [triggerGetMediaStorageProvider, { data: MediaStorageProviderData, isFetching: isMediaStorageProviderFetching, error: MediaStorageProviderError }] = useLazyGetMediaStorageProvidersQuery();
   const [triggerGetModules, { data: moduleData, isFetching: isModuleFetching, error: moduleError }] = useLazyGetmodulesQuery();
   const [triggerGetModels, { data: modelData, isFetching: ismodelFetching, error: modelError }] = useLazyGetModelsQuery();
+  const [
+    updateUserKey,
+    { isLoading: isUpdateUserKeyLoading, isSuccess: isUpdateUserKeySuccess, isError: isUpdateUserKeyError, error: UpdateUserKeyError, data: newModel },
+  ] = useUpdateUserKeyMutation();
 
 
   const [markdownText, setMarkdownText] = useState<string>();
@@ -543,7 +547,8 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
   const [ormTypeOptions, setOrmTypeOptions] = useState([]);
   const [selectedOrmType, setSelectedOrmType] = useState<any>(fieldMetaData?.ormType);
 
-
+  const [isUserKeyFields, setUserKeyFields] = useState(false);
+  const [userKeyData, setUserKeyData] = useState([]);
 
   const [
     filteredExternalIdProvider,
@@ -734,7 +739,9 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
     }
   };
 
-
+  const searchUserKeyField = () => {
+    return userKeyData;
+  }
 
   const searchComputedFieldValueType = async (event: any) => {
     const query = event.query;
@@ -904,7 +911,8 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
     isUserKey: fieldMetaData ? fieldMetaData?.isUserKey : false,
     relationJoinColumnName: fieldMetaData ? fieldMetaData?.relationJoinColumnName : null,
     joinColumnName: fieldMetaData ? fieldMetaData?.joinColumnName : null,
-    relationJoinTableName: fieldMetaData ? fieldMetaData?.relationJoinTableName : null
+    relationJoinTableName: fieldMetaData ? fieldMetaData?.relationJoinTableName : null,
+    userKey: fieldMetaData ? fieldMetaData?.userKey : null
   };
 
 
@@ -914,7 +922,6 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
     enableReinitialize: true,
     onSubmit: async (values) => {
       try {
-
         setFieldMetaData((prevItems: any) => {
           const newFieldData = { ...values, isSystem: values.isSystem == true ? true : '' }
           const formtatedFieldPayload = fieldBasedPayloadFormating(newFieldData, currentFields, fieldMetaData);
@@ -931,6 +938,13 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
             return [...prevItems, formtatedFieldPayload]
           }
         });
+        if (values.userKey) {
+          const data = {
+            modelName: values.relationModelSingularName,
+            fieldName: values.userKey
+          }
+          updateUserKey(data);
+        }
         // nextTab()
         setVisiblePopup(false);
 
@@ -972,7 +986,13 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
     }
   };
 
-
+  useEffect(() => {
+    if (isUpdateUserKeySuccess) {
+      showToaster([newModel?.data?.message], "success");
+    } if (isUpdateUserKeyError) {
+      showToaster(UpdateUserKeyError, 'error')
+    }
+  }, [isUpdateUserKeySuccess, isUpdateUserKeyError])
 
   const handleTypeSelect = (e: any, label: string) => {
 
@@ -1012,6 +1032,40 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
     }
   }, [fieldMetaData])
 
+  useEffect(() => {
+    const fetchFields = async () => {
+      const queryData: any = {
+        limit: 10,
+        offset: 0,
+        filters: {
+          singularName: {
+            $eq: formik.values.relationModelSingularName
+          }
+        },
+        populate: ['fields']
+      };
+      const queryString = qs.stringify(queryData, {
+        encodeValuesOnly: true,
+      });
+  
+      const result = await triggerGetModels(queryString).unwrap();
+  
+      if (result && result.records) {
+        if (!result?.records[0]?.userKeyField) {
+          setUserKeyFields(true);
+          const fieldsWithUnique = result?.records[0]?.fields?.filter((field: any) => field?.unique === true);
+          setUserKeyData(fieldsWithUnique)
+        } else {
+          setUserKeyFields(false);
+          setUserKeyData([]);
+        }
+      }
+    }
+    if (formik.values.relationModelSingularName) {
+      fetchFields();
+    }
+  }, [formik.values.relationModelSingularName])
+
   const updateEnumValues = (index: number, updatedString: string) => {
     const updatedValues = formik.values.selectionStaticValues.map((enumValue: string, i: number) =>
       i === index ? updatedString : enumValue
@@ -1571,7 +1625,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                           )}
 
                           {currentFields.includes("mediaEmbedded") && (
-                            <div className="field col-6 flex-flex-column gap-2">
+                            <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
                                 htmlFor="mediaEmbedded"
                                 className="form-field-label"
@@ -1614,7 +1668,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                             </div>
                           )}
                           {currentFields.includes("relationType") && (
-                            <div className="field col-6 flex-flex-column gap-2">
+                            <div className="field col-6 flex-flex-column gap-2 mt-3">
                               {/* <label
                                   htmlFor="relationType"
                                   className="form-field-label"
@@ -1650,7 +1704,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                                 onChange={(e) =>
                                   formik.setFieldValue("relationType", e.value)
                                 }
-                                className={classNames(" flex boolean-switch", {
+                                className={classNames("", {
                                   "p-invalid": isFormFieldValid(formik, "relationType"),
                                 })}
                                 optionLabel="label"
@@ -1682,7 +1736,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                             </div>
                           )}
                           {currentFields.includes("relationType") && formik.values.relationType === "many-to-one" && (
-                            <div className="field col-6 flex-flex-column gap-2">
+                            <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
                                 htmlFor="relationCascade"
                                 className="form-field-label"
@@ -1701,7 +1755,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                                   )
                                 }
                                 placeholder="Cascade"
-                                className={classNames("small-input p-inputtext-sm w-full", {
+                                className={classNames("w-full", {
                                   "p-invalid": isFormFieldValid(
                                     formik,
                                     "relationCascade"
@@ -1718,7 +1772,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                           )}
 
                           {currentFields.includes("relationModelModuleName") && (
-                            <div className="field col-6 flex-flex-column gap-2">
+                            <div className="field col-6 flex-flex-column gap-2  mt-3">
                               <label
                                 htmlFor="relationModelModuleName"
                                 className="form-field-label"
@@ -1780,7 +1834,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                           {currentFields.includes(
                             "relationModelSingularName"
                           ) && (
-                              <div className="field col-6 flex-flex-column gap-2">
+                              <div className="field col-6 flex-flex-column gap-2 mt-3">
                                 <label
                                   htmlFor="relationModelSingularName"
                                   className="form-field-label"
@@ -1826,8 +1880,41 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                               </div>
                             )}
 
+                          {isUserKeyFields && (
+                              <div className="field col-6 flex-flex-column gap-2">
+                                <label
+                                  htmlFor="userKey"
+                                  className="form-field-label"
+                                >
+                                  Set User Key
+                                </label>
+
+
+                                <SingleSelectAutoCompleteField
+                                  key="userKey"
+                                  formik={formik}
+                                  isFormFieldValid={isFormFieldValid}
+                                  fieldName="userKey"
+                                  fieldNameId="userKey"
+                                  labelKey="displayName"
+                                  valueKey="name"
+                                  searchData={searchUserKeyField}
+                                  existingData={formik.values.userKey}
+                                />
+                                {isFormFieldValid(
+                                  formik,
+                                  "userKey"
+                                ) && (
+                                    <Message
+                                      severity="error"
+                                      text={formik?.errors?.userKey?.toString()}
+                                    />
+                                  )}
+                              </div>
+                            )}
+
                           {currentFields.includes("relationCreateInverse") && formik.values.relationType === "many-to-many" && (
-                            <div className="field col-6 flex flex-column gap-2">
+                            <div className="field col-6 flex flex-column gap-2 mt-3">
                               <label htmlFor="relationCreateInverse" className="form-field-label">
                                 Relation Create Inverse
                               </label>
@@ -1838,7 +1925,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                                   checked={Boolean(formik.values.relationCreateInverse)}
                                   onChange={(e) => formik.setFieldValue("relationCreateInverse", e.checked)}
                                 />
-                                <label htmlFor="relationCreateInverse" className="ml-2">Enable</label>
+                                <label htmlFor="relationCreateInverse" className="ml-2">Create Inverse</label>
                               </div>
                               {isFormFieldValid(formik, "relationCreateInverse") && (
                                 <Message severity="error" text={formik?.errors?.relationCreateInverse?.toString()} />
@@ -1847,7 +1934,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                           )}
 
                           {currentFields.includes("relationModelFieldName") && formik.values.relationCreateInverse && formik.values.relationType === "many-to-many" && (
-                            <div className="field col-6 flex-flex-column gap-2">
+                            <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
                                 htmlFor="relationModelFieldName"
                                 className="form-field-label"
@@ -1878,7 +1965,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                           )}
 
                           {currentFields.includes("relationJoinTableName") && formik.values.relationType === "many-to-many" && (
-                            <div className="field col-6 flex-flex-column gap-2">
+                            <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
                                 htmlFor="relationJoinTableName"
                                 className="form-field-label"
@@ -1909,7 +1996,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                           )}
 
                           {currentFields.includes("joinColumnName") && formik.values.relationType === "many-to-many" && (
-                            <div className="field col-6 flex-flex-column gap-2">
+                            <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
                                 htmlFor="joinColumnName"
                                 className="form-field-label"
@@ -1940,7 +2027,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                           )}
 
                           {currentFields.includes("relationJoinColumnName") && formik.values.relationType === "many-to-many" && (
-                            <div className="field col-6 flex-flex-column gap-2">
+                            <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
                                 htmlFor="relationJoinColumnName"
                                 className="form-field-label"
@@ -1971,7 +2058,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                           )}
 
                           {currentFields.includes("selectionDynamicProvider") && (
-                            <div className="field col-6 flex-flex-column gap-2">
+                            <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
                                 htmlFor="selectionDynamicProvider"
                                 className="form-field-label"
@@ -2027,7 +2114,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                             </div>
                           )}
                           {currentFields.includes("selectionValueType") && (
-                            <div className="field col-6 flex-flex-column gap-2">
+                            <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
                                 htmlFor="selectionValueType"
                                 className="form-field-label"
@@ -2045,7 +2132,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                                     e.value
                                   )
                                 }
-                                placeholder="Select a Data Source"
+                                placeholder="Select Value Type"
                                 className={classNames("", {
                                   "p-invalid": isFormFieldValid(
                                     formik,
@@ -2066,7 +2153,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                           )}
 
                           {currentFields.includes("selectionStaticValues") && (
-                            <div className="field col-6 flex-flex-column gap-2">
+                            <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
                                 htmlFor="selectionStaticValues"
                                 className="form-field-label"
@@ -2112,7 +2199,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                             </div>
                           )}
                           {currentFields.includes("computedFieldValueType") && (
-                            <div className="field col-6 flex-flex-column gap-2">
+                            <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
                                 htmlFor="computedFieldValueType"
                                 className="form-field-label"
@@ -2163,7 +2250,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                           {currentFields.includes(
                             "computedFieldValueProvider"
                           ) && (
-                              <div className="field col-6 flex-flex-column gap-2">
+                              <div className="field col-6 flex-flex-column gap-2 mt-3">
                                 <label
                                   htmlFor="computedFieldValueProvider"
                                   className="form-field-label"
@@ -2346,13 +2433,13 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
 
                         </div>
                       )}
-                      {(currentFields.includes("regexPattern") || currentFields.includes("min") || currentFields.includes("max") || currentFields.includes("ormType")) && ormTypeOptions && formik.values.relationType !== "many-to-many" &&
+                      {(currentFields.includes("regexPattern") || currentFields.includes("min") || currentFields.includes("max") || currentFields.includes("ormType")) && ormTypeOptions && selectedType.value !== 'relation' &&
                         <>
                           <p className="form-wrapper-heading text-base">Validations</p>
                           <div className="formgrid grid">
                             {(currentFields.includes("regexPattern") && selectedType.value === "password") &&
                               <>
-                                  <div className="field col-6 flex-flex-column gap-2">
+                                  <div className="field col-6 flex-flex-column gap-2 mt-3">
                                     <label
                                       htmlFor="regexPattern"
                                       className="form-field-label"
@@ -2375,7 +2462,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                             }
                             {currentFields.includes("regexPattern") && (
                               <>
-                                  <div className="field col-6 flex-flex-column gap-2">
+                                  <div className="field col-6 flex-flex-column gap-2 mt-3">
                                     <label
                                       htmlFor="regexPattern"
                                       className="form-field-label"
@@ -2437,9 +2524,9 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                             {(currentFields.includes("min") || currentFields.includes("max")) &&
                                 <>
                                   {currentFields.includes("min") && (
-                                      <div className="field col-6 flex-flex-column gap-2">
+                                      <div className="field col-6 flex-flex-column gap-2 mt-3">
                                         <label htmlFor="min" className="form-field-label">
-                                          Min (Characters Allowed)
+                                          Min {(selectedType.value !== "int" && selectedType.value !== "decimal") && `(Characters Allowed)`}
 
                                         </label>
                                         {/* <InputText
@@ -2472,6 +2559,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                                                 "min"
                                               ),
                                             })}
+                                            disabled={fieldMetaData?.id}
                                           />
                                         }
 
@@ -2484,9 +2572,10 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                                       </div>
                                   )}
                                   {currentFields.includes("max") && (
-                                      <div className="field col-6 flex-flex-column gap-2">
+                                      <div className="field col-6 flex-flex-column gap-2 mt-3">
                                         <label htmlFor="max" className="form-field-label">
-                                          Max (Character allowed)
+                                          Max {(selectedType.value !== "int" &&
+                                                selectedType.value !== "decimal") && `(Characters allowed)`}
                                         </label>
                                         {/* <InputText
                                 type="text"
@@ -2517,6 +2606,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                                                 "max"
                                               ),
                                             })}
+                                            disabled={fieldMetaData?.id}
                                           />
                                         }
 
@@ -2533,7 +2623,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                             {currentFields.includes("ormType") && (
                               <div className="md:col-12 sm:col-12">
                                 {ormTypeOptions && ormTypeOptions.length > 1 &&
-                                  <div className="field col-6 flex-flex-column gap-2">
+                                  <div className="field col-6 flex-flex-column gap-2 mt-3">
                                     <label htmlFor="ormType" className="form-field-label">
                                       Type
                                     </label>
@@ -2586,8 +2676,8 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
 
                       <p className="form-wrapper-heading text-base">Settings</p>
                       <div className="formgrid grid">
-                        {currentFields.includes("required") && (
-                            <div className="field col-6 flex-flex-column gap-2">
+                        {currentFields.includes("required") && selectedType.value !== 'relation' && (
+                            <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <div className="flex align-items-center">
                                 <Checkbox
                                   name="required"
@@ -2610,7 +2700,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                               )}
                             </div>
                         )}
-                        {currentFields.includes("unique") && (
+                        {currentFields.includes("unique") && selectedType.value !== 'relation' && (
                             <div className="field col-6 flex-flex-column gap-2">
                               <div className="flex align-items-center">
                                 <Checkbox
@@ -2634,7 +2724,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                               )}
                             </div>
                         )}
-                        {currentFields.includes("index") && (
+                        {currentFields.includes("index") && selectedType.value !== 'relation' && (
                             <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <div className="flex align-items-center">
                                 <Checkbox
@@ -2656,7 +2746,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                               )}
                             </div>
                         )}
-                        {currentFields.includes("private") && (
+                        {currentFields.includes("private") && selectedType.value !== 'relation' && (
                             <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <div className="flex align-items-center">
                                 <Checkbox
@@ -2681,7 +2771,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                               )}
                             </div>
                         )}
-                        {currentFields.includes("encrypt") && (
+                        {currentFields.includes("encrypt") && selectedType.value !== 'relation' && (
                             <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <div className="flex align-items-center gap-2">
                                 <Checkbox
@@ -2742,7 +2832,7 @@ const FieldMetaDataForm = ({ modelMetaData, fieldMetaData, setFieldMetaData, all
                                   Is Userkey
                                 </label>
                               </div>
-                              <p className="fieldSubTitle">If userkey already then it will be replaced with this key</p>
+                              <p className="fieldSubTitle">By selecting this option, you are setting this field as the model's user key. Any existing user key configuration will be overwritten</p>
 
                               {isFormFieldValid(formik, "isUserKey") && (
                                 <Message

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

@@ -290,7 +290,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                   )}
                 </div>
 
-                <div className="field col-12 flex flex-column gap-2 mt-4">
+                <div className="field col-12 flex flex-column gap-1 mt-4">
                   <label htmlFor="dataSource" className="form-field-label">
                     Data Source
                   </label>
@@ -542,7 +542,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                     />
                   )}
                 </div>
-                <div className="field col-12 flex flex-column gap-2 mt-4">
+                <div className="field col-12 flex flex-column gap-1 mt-4">
                   <label htmlFor="singularName" className="form-field-label">
                     Singular Name
                   </label>
@@ -564,7 +564,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                     />
                   )}
                 </div>
-                <div className="field col-12 flex flex-column gap-2 mt-4">
+                <div className="field col-12 flex flex-column gap-1 mt-4">
                   <label htmlFor="pluralName" className="form-field-label">
                     Plural Name
                   </label>
@@ -602,7 +602,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                   </div>
                 </div>
                 {showTableName &&
-                  <div className="field col-12 flex flex-column gap-2 mt-4">
+                  <div className="field col-12 flex flex-column gap-1 mt-4">
                     <label htmlFor="tableName" className="form-field-label">
                       Table Name
                     </label>
@@ -625,7 +625,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                     )}
                   </div>
                 }
-                <div className="field col-12 flex flex-column gap-2 mt-4">
+                <div className="field col-12 flex flex-column gap-1 mt-4">
                   <label htmlFor="description" className="form-field-label">
                     Description
                   </label>

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

@@ -208,7 +208,7 @@ const CreateModule = ({ data }: any) => {
     if (data) {
       setmenuIconPreview(`${process.env.API_URL}/${data.menuIconUrl}`);
 
-      const fileName = data.menuIconUrl.split("/").pop(); // Extract filename from URL
+      const fileName = data?.menuIconUrl?.split("/").pop(); // Extract filename from URL
       setFileDetails({ name: fileName || "Unknown File", type: "Uploaded File" });
 
       // Set the upload progress to 100% since the file is already uploaded
@@ -332,15 +332,23 @@ const CreateModule = ({ data }: any) => {
           outlined
           severity="secondary"
           type="button"
-          icon='pi pi-ellipsis-h'
+          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>
+          }
           size="small"
-          className="max-w-2rem bg-primary-reverse"
+          className="bg-primary-reverse p-0"
+          style={{
+            height: 32,
+            width: 32
+          }}
           onClick={(e) =>
             // @ts-ignore 
             op.current.toggle(e)
           }
         />
-        <OverlayPanel ref={op} className="solid-custom-overlay" style={{ top: 10 }}>
+        <OverlayPanel ref={op} className="solid-custom-overlay">
           <div className="flex flex-column gap-1 p-1">
             <Button
               text

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

@@ -317,7 +317,7 @@ const CreateUser = ({ data, params }: any) => {
                     />
                   )}
                 </div>
-                <div className="field col-6 flex flex-column gap-2 mt-4">
+                <div className="field col-6 flex flex-column gap-1 mt-4">
                   <label htmlFor="email" className="form-field-label">
                     Email
                   </label>
@@ -340,7 +340,7 @@ const CreateUser = ({ data, params }: any) => {
                     />
                   )}
                 </div>
-                <div className="field col-6 flex flex-column gap-2 mt-4">
+                <div className="field col-6 flex flex-column gap-1 mt-4">
                   <label htmlFor="mobile" className="form-field-label">
                     Mobile
                   </label>

package/src/components/layout/AdminLayout.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { handleError } from "@/helpers/ToastContainer";
+import { getSession, signOut, useSession } from "next-auth/react";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { Layout } from "./Layout";
+import { Dialog } from "primereact/dialog";
+import { Divider } from "primereact/divider";
+import SolidChangeForcePassword from "../auth/SolidChangeForcePassword";
+
+export const AdminLayout = ({ children }: { children: React.ReactNode }) => {
+    // const theme = useSelector((state: any) => state.theme.mode);
+    const { data: session, status } = useSession();
+    const [isForcePasswordChange, setIsForcePasswordChange] = useState(false)
+    useEffect(() => {
+        // @ts-expect-error: Handling potential case where 'data?.user?.user' might be undefined or null
+        if (session?.user?.user?.forcePasswordChange === true) {
+            setIsForcePasswordChange(true)
+        } else {
+            setIsForcePasswordChange(false)
+        }
+    }, [session])
+    const pathname = usePathname();
+    const router = useRouter();
+    useEffect(() => {
+        const handleRouteChange = async () => {
+            const session = await getSession(); // Force refetch session on navigation
+            if (session?.error === "RefreshAccessTokenError") {
+                handleError(["Session Expired. Please Login Again."])
+                signOut({ callbackUrl: "/auth/login" });
+            }
+
+
+        };
+        // Listen to routeChangeComplete event
+        handleRouteChange()
+
+    }, [pathname])
+
+    return (
+        <Layout>
+            {/* <div className={`${process.env.NEXT_PUBLIC_ENABLE_CUSTOM_HEADER_FOOTER == "true" && 'header-margin-top'}`} style={{ minHeight: `${process.env.NEXT_PUBLIC_ENABLE_CUSTOM_HEADER_FOOTER == "true" ? 'calc(100vh - 70px)' : 'calc(100vh)'}` }}> */}
+
+            {/* <div className="min-h-full max-h-full flex flex-column relative flex-auto overflow-x-auto"> */}
+            {/* <DashboardHeader /> */}
+            {/* <SolidListingHeader></SolidListingHeader> */}
+            {/* {pathname.includes('all') && <ListingHeader />} */}
+            {/* <div className="flex flex-column flex-auto" style={{ backgroundColor: '#f6f6f9', padding: '1.5rem 1.5rem 1.5rem', }}> */}
+            {children}
+            {/* </div> */}
+            {/* </div> */}
+            {/* </div> */}
+            {isForcePasswordChange &&
+                <Dialog header="Change Default Password" visible={isForcePasswordChange} closable={false} draggable={false} style={{ width: '25vw' }} onHide={() => setIsForcePasswordChange(false)}>
+                    <Divider className="mt-0" />
+                    <SolidChangeForcePassword />
+                </Dialog>
+            }
+        </Layout>
+    )
+}