@solidstarters/solid-core-ui 1.1.66 → 1.1.68

package/dist/resources/themes/solid-light-purple/theme.css

@@ -43,6 +43,7 @@
   --maskbg: rgba(0, 0, 0, 0.4);
   --primary-light-color: #D8E2EA;
   --highlight-bg: #F5F5F5;
+  --hightlight-bg-secondary: #FAFAFA;
   --highlight-text-color: #4C1D95;
   --icon-color: #000000E0;
   --auth-title-color: #000000;
@@ -59,6 +60,13 @@
   --solid-stepper-border: #CFD6DC;
   --solid-setting-title: rgba(0, 0, 0, 0.88);
   --solid-dark-title: rgba(0, 0, 0, 0.88);
+  --solid-dropzone-bg: rgba(255, 255, 255, 0.60);
+  --solid-file-wrapper: #E0E0E0;
+  --solid-chatter-dash: #00000026;
+  --solid-chatter-date-border: rgba(0, 0, 0, 0.15);
+  --solid-chatter-input-bg: #FEFCFF;
+  --solid-chatter-input-placeholder: rgba(51, 51, 51, 0.20);
+  --solid-kanban-wrapper: #E0E0E0;
   color-scheme: light;
 }
 
@@ -337,6 +345,7 @@
     /* box-shadow: 0 0 0 0.2rem #d3b5f5; */
     border-color: #722ED1;
   }
+
   .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-input-token input {
     font-family: var(--font-family);
     font-feature-settings: var(--font-feature-settings, normal);
@@ -1686,7 +1695,7 @@
     box-shadow: 0 0 0 0.2rem #d3b5f5;
   }
 
-  
+
   .p-treeselect-panel .p-treeselect-items-wrapper .p-treeselect-empty-message {
     padding: 0.75rem 1.25rem;
     color: #4b5563;
@@ -3443,7 +3452,7 @@
     border-bottom: 0 none;
   }
 
-  
+
   .p-picklist .p-picklist-filter-container .p-picklist-filter-icon {
     right: 0.75rem;
     color: #6b7280;
@@ -4546,7 +4555,7 @@
     border-top-left-radius: 6px;
   }
 
-  
+
   .p-megamenu .p-submenu-list .p-menuitem-separator {
     border-top: 1px solid #CED0D6;
     margin: 0.25rem 0;
@@ -6126,4 +6135,101 @@
   .solid-custom-title {
     color: var(--solid-form-title);
   }
+
+
+  .solid-global-search-element {
+    border: 1px solid #d1d5db;
+  }
+
+  .custom-filter-button {
+    border-left: 1px solid #d1d5db;
+  }
+
+  .solid-layout-accordion label {
+    color: #000;
+  }
+
+  .primary-filter-fieldset {
+    background-color: #F8F7FC;
+  }
+
+  .nested-custom-filter .primary-filter-fieldset {
+    background-color: #FFF;
+  }
+
+  .solid-column-panel.p-panel .p-panel-header {
+    background: #F9F9F9;
+  }
+
+  .solid-column-panel.p-panel .p-panel-header,
+  .solid-column-panel.p-panel .p-panel-content {
+    border: 1px solid rgba(216, 226, 234, 0.40);
+  }
+
+  .form-field-label {
+    color: rgba(0, 0, 0, 0.88) !important;
+  }
+
+  .solid-standard-autocomplete .p-autocomplete-dropdown.p-button {
+    background-color: #fff;
+    border-color: #d1d5db;
+    color: rgba(0, 0, 0, 0.60);
+  }
+
+
+  .solid-standard-autocomplete .p-inputtext:focus+.p-button {
+    border-color: #d1d5db !important;
+  }
+
+  .solid-custom-editor .ql-toolbar.ql-snow {
+    border: 1px solid #d1d5db;
+  }
+
+  .solid-custom-editor .ql-container.ql-snow {
+    border: 1px solid #d1d5db;
+  }
+
+  .view-widget-chip.p-chip {
+    background-color: #f9f9f9 !important;
+  }
+
+  .solid-step-button.p-button.p-button-text,
+  .solid-step-button.p-button.p-button-text:not(:disabled):active,
+  .solid-step-button.p-button.p-button-text:not(:disabled):hover,
+  .solid-step-button.btn-step-first,
+  .solid-step-button.btn-step-last {
+    color: #0D0B26 !important;
+  }
+
+  .active-menu-image {
+    background-color: #EFF1F4;
+  }
+
+  .solid-kanban-card,
+  .solid-media-card {
+    border: 1px solid var(--solid-kanban-wrapper);
+    background: var(--hightlight-bg-secondary);
+  }
+
+  .solid-kanban-card:hover,
+  .solid-media-card:hover {
+    border: 1px solid #722ED1;
+    background: #F9F0FF;
+  }
+
+
+  .solid-mimetype-chip {
+    background: #F0F0F0;
+  }
+
+  .kanban-image-preview,
+  .kanban-media-image-preview,
+  .kanban-media-view-card {
+    background-color: #fff;
+  }
+
+  .kanban-count-badge {
+    background: #F6FAFF;
+    color: var(--primary-color);
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidstarters/solid-core-ui",
-  "version": "1.1.66",
+  "version": "1.1.68",
   "scripts": {
     "prebuild": "npm run copy-styles",
     "build": "tsc && tsc-alias",

package/src/components/Svg/FileSvg.tsx

@@ -2,17 +2,18 @@ import * as React from "react"
 import { SVGProps } from "react"
 const FileSvg = (props: SVGProps<SVGSVGElement>) => (
   <svg
-  xmlns="http://www.w3.org/2000/svg"
-  width={64}
-  height={64}
-  fill="none"
-  {...props}
->
-  <path
-    fill="#F9F0FF"
-    d="M36.03 25.291a2 2 0 0 1-2-2V6.271H16a6 6 0 0 0-6 6v40.08a6 6 0 0 0 6 6h31.06a6.01 6.01 0 0 0 6-6v-27.06H36.03Z"
-  />
-  <path fill="#722ED1" d="M51.88 21.291 38.03 7.441v13.85h13.85Z" />
-</svg>
+    xmlns="http://www.w3.org/2000/svg"
+    width={64}
+    height={64}
+    fill="none"
+    {...props}
+    className="solid-file-reader"
+  >
+    <path
+      fill="#F9F0FF"
+      d="M36.03 25.291a2 2 0 0 1-2-2V6.271H16a6 6 0 0 0-6 6v40.08a6 6 0 0 0 6 6h31.06a6.01 6.01 0 0 0 6-6v-27.06H36.03Z"
+    />
+    <path fill="#722ED1" d="M51.88 21.291 38.03 7.441v13.85h13.85Z" />
+  </svg>
 )
 export default FileSvg

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

@@ -144,11 +144,7 @@ const FilterRuleComponent = ({ viewData, fields, rule, onChange, onAddRule, onAd
             <Button text severity='secondary' icon="pi pi-plus" size='small' onClick={() => onAddRule(rule.parentRule)} className='solid-filter-action-btn' />
           </div>
           <div className='col-4 px-0 flex align-items-center'>
-            <Button text severity='secondary' icon={
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                <path d="M11.6665 13.334H13.3332V11.6673H14.9998V10.0007H13.3332V8.33398H11.6665V10.0007H9.99984V11.6673H11.6665V13.334ZM3.33317 16.6673C2.87484 16.6673 2.48248 16.5041 2.15609 16.1777C1.8297 15.8513 1.6665 15.459 1.6665 15.0007V5.00065C1.6665 4.54232 1.8297 4.14996 2.15609 3.82357C2.48248 3.49718 2.87484 3.33398 3.33317 3.33398H8.33317L9.99984 5.00065H16.6665C17.1248 5.00065 17.5172 5.16385 17.8436 5.49023C18.17 5.81662 18.3332 6.20898 18.3332 6.66732V15.0007C18.3332 15.459 18.17 15.8513 17.8436 16.1777C17.5172 16.5041 17.1248 16.6673 16.6665 16.6673H3.33317ZM3.33317 15.0007H16.6665V6.66732H9.31234L7.64567 5.00065H3.33317V15.0007Z" fill="#4B4D52" />
-              </svg>
-            } size='small' onClick={() => onAddGroup(rule.id)} className='solid-filter-action-btn p-0' />
+            <Button text severity='secondary' icon={"pi pi-folder-plus"} size='small' onClick={() => onAddGroup(rule.id)} className='solid-filter-action-btn' />
           </div>
           <div className='col-4 px-0 flex align-items-center'>
             <Button text severity='secondary' icon="pi pi-trash" size='small' onClick={() => onDelete(rule.id)} className='solid-filter-action-btn' />
@@ -352,7 +348,7 @@ const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, transf
   // };
 
 
-  const removeEmptyGroups = (rule) => { 
+  const removeEmptyGroups = (rule) => {
     if (rule.type === "rule_group" && rule.children.length === 0) {
       return null;
     }
@@ -366,7 +362,7 @@ const FilterComponent = ({ viewData, fields, filterRules, setFilterRules, transf
 
 
   const handleDeleteRule = (id) => {
-    if(filterRules[0].children.length === 1 && filterRules[0].children[0].id === id ){
+    if (filterRules[0].children.length === 1 && filterRules[0].children[0].id === id) {
       return
     }
     const deleteRecursively = (rules, id, isRoot = false) => {

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

@@ -157,22 +157,30 @@ const transformRulesToFilters = (input: any) => {
 }
 
 const tranformSearchToFilters = (input: any) => {
+    if (!input || !input.$and) return input;
 
-    if (!input || !input.$and) return input; // Return as-is if invalid
+    const grouped: Record<string, string[]> = {};
 
-    return {
-        $and: input.$and.map((condition: any) => {
-            const { fieldName, matchMode, value } = condition;
+    input.$and.forEach(({ fieldName, value }: any) => {
+        const val = Array.isArray(value) && value.length === 1 ? value[0] : value;
 
-            // Ensure value is a single string (if it's an array with one element, extract it)
-            const formattedValue = Array.isArray(value) && value.length === 1 ? value[0] : value;
+        if (!grouped[fieldName]) {
+            grouped[fieldName] = [];
+        }
 
-            return {
-                [fieldName]: {
-                    [matchMode]: formattedValue
-                }
-            };
-        })
+        if (Array.isArray(val)) {
+            grouped[fieldName].push(...val);
+        } else {
+            grouped[fieldName].push(val);
+        }
+    });
+
+    return {
+        $and: Object.entries(grouped).map(([fieldName, values]) => ({
+            [fieldName]: {
+                $containsi: values.length === 1 ? values[0] : values
+            }
+        }))
     };
 }
 
@@ -683,7 +691,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                                 <span key={index} className="custom-chip-value">{value}
                                 </span>
                                 {values.length > 1 &&
-                                    <span className="custom-chip-or">and</span>
+                                    <span className="custom-chip-or">or</span>
                                 }
                             </React.Fragment>
                         ))}
@@ -742,7 +750,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                 </div>
 
                 {showOverlay && (
-                    <div className="absolute w-full z-5 bg-white border-round border-1 border-300 shadow-2" style={{ top: 35 }}>
+                    <div className="absolute w-full z-5 surface-0 border-round border-1 border-300 shadow-2" style={{ top: 35 }}>
                         {inputValue ? (
                             <>
                                 <div className="custom-filter-search-options px-2 py-2 flex flex-column">
@@ -757,7 +765,7 @@ export const SolidGlobalSearchElement = forwardRef(({ viewData, handleApplyCusto
                                                 size="small"
                                             >
                                                 Search <strong>{value}</strong> for :
-                                                <span className="font-bold" style={{ color: '#000' }}>{inputValue}</span>
+                                                <span className="font-bold text-color">{inputValue}</span>
                                             </Button>
                                         ))
                                     }

package/src/components/core/list/ListViewRowActionPopup.tsx

@@ -1,6 +1,6 @@
 'use client';
 import { Button } from "primereact/button"
-import { LoadDynamicJsxComponent } from "../common/LoadDynamicJsxComponent";
+import { getExtensionComponent } from "@/helpers/registry";
 
 
 export const ListViewRowActionPopup = ({ context }: any) => {
@@ -13,11 +13,18 @@ export const ListViewRowActionPopup = ({ context }: any) => {
 
     }
 
+    let DynamicWidget = getExtensionComponent(context?.rowAction?.action?.customComponent);
+    const widgetProps = {
+        context: context
+    }
+
     return (
         <div>
             {
                 context?.rowAction?.action?.customComponent ?
-                    <LoadDynamicJsxComponent context={context}></LoadDynamicJsxComponent>
+                    DynamicWidget && <DynamicWidget {...widgetProps} />
+
+                    // <LoadDynamicJsxComponent context={context}></LoadDynamicJsxComponent>
                     :
                     <>
                         <h1>{context?.modelName}</h1>

package/src/components/core/list/columns/SolidShortTextColumn.tsx

@@ -39,7 +39,7 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column, se
         )
     };
 
-    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter
+    const truncateAfter = solidListViewMetaData?.data?.solidView?.layout?.attrs?.truncateAfter;
     const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
@@ -63,7 +63,16 @@ const SolidShortTextColumn = ({ solidListViewMetaData, fieldMetadata, column, se
             body={(rowData) => {
                 const renderMode = column.attrs.renderMode || "text";
                 const data = rowData;
-                const widgetName = renderMode == "text" ? "SolidShortTextFieldTextRenderModeWidget" : "SolidShortTextFieldImageRenderModeWidget";
+                let widgetName = column?.attrs?.widget;
+                if (renderMode === "image") {
+                    widgetName = "SolidShortTextFieldImageRenderModeWidget"
+                }
+                if (renderMode === "text") {
+                    widgetName = "SolidShortTextFieldTextRenderModeWidget"
+                };
+                if (column?.attrs?.widget) {
+                    widgetName = column?.attrs?.widget;
+                }
                 let DynamicWidget = getExtensionComponent(widgetName);
                 const widgetProps = {
                     value: data[fieldMetadata.name],

package/src/components/core/list/widgets/SolidUserNameAvatarWidget.tsx

@@ -0,0 +1,52 @@
+
+export const SolidUserNameAvatarWidget = ({ value }: any) => {
+
+    // use "widget": "SolidUserNameAvatarWidget" in the list view field 
+
+    const getInitials = (fullName: string) => {
+        const names = fullName.trim().split(' ');
+        const initials =
+            names.length === 1
+                ? names[0][0]
+                : names[0][0] + names[names.length - 1][0];
+        return initials.toUpperCase();
+    };
+
+    const getColorFromInitials = (initials: string) => {
+        let hash = 0;
+        for (let i = 0; i < initials.length; i++) {
+            hash = initials.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash) % 360;
+        return `hsl(${hue}, 60%, 60%)`; // nice pastel color
+    };
+
+    const initials = getInitials(value);
+    const bgColor = getColorFromInitials(initials);
+
+    return (
+        <div className="solid-table-row">
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <div
+                    style={{
+                        width: 25,
+                        height: 25,
+                        borderRadius: '50%',
+                        backgroundColor: bgColor,
+                        color: 'white',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontWeight: 600,
+                        fontSize: 25 * 0.4,
+                        boxShadow: '0 0 0 2px rgba(0,0,0,0.1)',
+                    }}
+                >
+                    {initials}
+                </div>
+                <span>{value}</span>
+            </div>
+        </div>
+    );
+};
+

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

@@ -72,7 +72,7 @@ const CreateModel = ({ data, params }: any) => {
   useEffect(() => {
     if (data) {
       const modelData = {
-        ...data, moduleId: data?.module?.id
+        ...data, moduleId: data?.module?.id,parentModelId: data?.parentModel
       }
 
       setIsLoadingData(false);

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

@@ -394,16 +394,26 @@ const createValidationSchema = (currentFields: any, selectedType: any, allFields
         "Relation Model Singular Name is required"
       ),
     }),
-    // ...(currentFields.includes("relationCoModelFieldName") && {
-    //   relationCoModelFieldName: Yup.string()
-    //   // .required(
-    //   //   "Relation Model Field Name is required"
-    //   // ),
-    // }),
-
+    ...(currentFields.includes("relationCoModelFieldName") && {
+      relationCoModelFieldName: Yup.string()
+      // .required(
+      //   "Relation Model Field Name is required"
+      // ),
+    }),
     ...(currentFields.includes("relationCreateInverse") && {
       relationCreateInverse: Yup.boolean(),
     }),
+    ...(currentFields.includes("relationCoModelFieldName") && {
+      relationCoModelFieldName: Yup.string().when("relationCreateInverse", (relationCreateInverse: any, schema) => {
+        console.log("relationCreateInverse", relationCreateInverse);
+        if (relationCreateInverse.length > 0 && relationCreateInverse[0] == true) {
+          return schema.required("Relation Co Model Field Name is required")
+        } else {
+          return schema.notRequired();
+        }
+      }),
+    }),
+
     // ...(currentFields.includes("relationCascade") && {
     //   relationCascade: Yup.string().required(
     //     "Relation Cascade Value is required"
@@ -425,6 +435,11 @@ const createValidationSchema = (currentFields: any, selectedType: any, allFields
         "Relation Model Module Name Value is required"
       ),
     }),
+
+    ...(currentFields.includes("relationFieldFixedFilter") && {
+      relationFieldFixedFilter: Yup.string().nullable(),
+    }),
+
     ...(currentFields.includes("selectionDynamicProvider") && {
       selectionDynamicProvider: Yup.string().required(
         "Selection Dynamic Provider Value is required"
@@ -898,6 +913,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
     relationCreateInverse: fieldMetaData ? fieldMetaData?.relationCreateInverse : false,
     relationCascade: fieldMetaData ? fieldMetaData?.relationCascade : 'cascade',
     relationModelModuleName: fieldMetaData ? fieldMetaData?.relationModelModuleName : modelMetaData?.module.name,
+    relationFieldFixedFilter: fieldMetaData ? fieldMetaData?.relationFieldFixedFilter : "",
     selectionDynamicProvider: fieldMetaData ? fieldMetaData?.selectionDynamicProvider : null,
     selectionDynamicProviderCtxt: fieldMetaData ? fieldMetaData?.selectionDynamicProviderCtxt : "",
     selectionStaticValues: fieldMetaData ? fieldMetaData?.selectionStaticValues : [""],
@@ -1705,8 +1721,12 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                               <SelectButton
                                 value={formik.values.relationType}
                                 options={fieldDefaultMetaData.data.relationTypes}
-                                onChange={(e) =>
-                                  formik.setFieldValue("relationType", e.value)
+                                onChange={(e) => {
+                                  formik.setFieldValue("relationType", e.value);
+                                  if (e.value === "one-to-many") {
+                                    formik.setFieldValue("relationCreateInverse", true);
+                                  }
+                                }
                                 }
                                 className={classNames("", {
                                   "p-invalid": isFormFieldValid(formik, "relationType"),
@@ -1869,6 +1889,56 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                               </div>
                             )}
 
+                          {currentFields.includes(
+                            "relationFieldFixedFilter"
+                          ) && (
+                              <div className="field col-6 flex-flex-column gap-2 mt-3">
+                                <label
+                                  htmlFor="relationFieldFixedFilter"
+                                  className="form-field-label"
+                                >
+                                  Relation Field Fixed Filter
+                                </label>
+
+                                <InputTextarea
+                                  aria-describedby="Fixed Filter"
+                                  id="relationFieldFixedFilter"
+                                  name="relationFieldFixedFilter"
+                                  onChange={formik.handleChange}
+                                  value={formik.values.relationFieldFixedFilter}
+                                  rows={5}
+                                  cols={30}
+                                  className={classNames("", {
+                                    "p-invalid": isFormFieldValid(
+                                      formik,
+                                      "relationFieldFixedFilter"
+                                    ),
+                                  })}
+                                />
+                                {/* 
+                                <InputText
+                                  type="text"
+                                  id="relationFieldFixedFilter"
+                                  name="relationFieldFixedFilter"
+                                  onChange={formik.handleChange}
+                                  disabled={fieldMetaData?.id}
+                                  value={formik.values.relationFieldFixedFilter}
+                                  className={classNames("", {
+                                    "p-invalid": isFormFieldValid(
+                                      formik,
+                                      "relationFieldFixedFilter"
+                                    ),
+                                  })}
+                                /> */}
+                                {isFormFieldValid(formik, "relationFieldFixedFilter") && (
+                                  <Message
+                                    severity="error"
+                                    text={formik?.errors?.relationFieldFixedFilter?.toString()}
+                                  />
+                                )}
+
+                              </div>
+                            )}
                           {isUserKeyFields && (
                             <div className="field col-6 flex-flex-column gap-2 mt-3">
                               <label
@@ -1902,7 +1972,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                             </div>
                           )}
 
-                          {currentFields.includes("relationCreateInverse") && (formik.values.relationType === "many-to-many" || formik.values.relationType === "many-to-one") && (
+                          {currentFields.includes("relationCreateInverse") && (
                             <div className="field col-6 flex flex-column gap-2 mt-3">
                               <label htmlFor="relationCreateInverse" className="form-field-label">
                                 Relation Create Inverse
@@ -1912,6 +1982,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                   inputId="relationCreateInverse"
                                   name="relationCreateInverse"
                                   checked={formik.values.relationCreateInverse}
+                                  disabled={formik.values.relationType === "one-to-many" ? true : false}
                                   onChange={(e) => formik.setFieldValue("relationCreateInverse", e.checked)}
                                 />
                                 <label htmlFor="relationCreateInverse" className="ml-2">Create Inverse</label>
@@ -1935,6 +2006,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                 id="relationCoModelFieldName"
                                 name="relationCoModelFieldName"
                                 onChange={formik.handleChange}
+                                disabled={fieldMetaData?.id}
                                 value={formik.values.relationCoModelFieldName}
                                 className={classNames("", {
                                   "p-invalid": isFormFieldValid(
@@ -1997,6 +2069,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                 id="relationCoModelColumnName"
                                 name="relationCoModelColumnName"
                                 onChange={formik.handleChange}
+                                disabled={fieldMetaData?.id}
                                 value={formik.values.relationCoModelColumnName}
                                 className={classNames("", {
                                   "p-invalid": isFormFieldValid(
@@ -2028,6 +2101,7 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                                 id="relationJoinTableName"
                                 name="relationJoinTableName"
                                 onChange={formik.handleChange}
+                                disabled={fieldMetaData?.id}
                                 value={formik.values.relationJoinTableName}
                                 className={classNames("", {
                                   "p-invalid": isFormFieldValid(
@@ -2927,10 +3001,10 @@ const FieldMetaDataForm = ({ setIsDirty, modelMetaData, fieldMetaData, setFieldM
                   </TabView>
                   <div className="flex gap-3">
                     <div>
-                      <Button label="Finish" size="small" onClick={() => showError()} type="submit"  />
+                      <Button label="Finish" size="small" onClick={() => showError()} type="submit" />
                     </div>
                     <div>
-                      <Button label="Cancel" size="small" severity="secondary" type="reset" onClick={() => setVisiblePopup(false)} outlined  />
+                      <Button label="Cancel" size="small" severity="secondary" type="reset" onClick={() => setVisiblePopup(false)} outlined />
                     </div>
                   </div>
                 </div>

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

@@ -56,7 +56,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
     enableSoftDelete: modelMetaData ? modelMetaData?.enableSoftDelete : "",
     enableAuditTracking: modelMetaData ? modelMetaData?.enableAuditTracking : "",
     internationalisation: modelMetaData ? modelMetaData?.internationalisation : "",
-    isChild: modelMetaData ? modelMetaData?.isChild : false,
+    isChild: modelMetaData ? modelMetaData?.isChild : "",
     parentModelId: modelMetaData ? modelMetaData?.parentModel?.id : "",
     parentModel: modelMetaData ? modelMetaData?.parentModel : "",
 
@@ -138,7 +138,7 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
           enableSoftDelete: values.enableSoftDelete === true ? true : '',
           enableAuditTracking: values.enableAuditTracking === true ? true : '',
           internationalisation: values.internationalisation === true ? true : '',
-          isChild: values.isChild ? values.isChild === true : '',
+          isChild: values.isChild === true ? true : '',
           ...(values.isChild == true && {
             parentModelId: values.parentModelId,
             parentModel: values.parentModel,
@@ -455,14 +455,27 @@ const ModelMetaData = React.forwardRef(({ modelMetaData, setModelMetaData, allMo
                   />
                 )}
 
-                <div className="mt-4">
-                  <div className="flex align-items-center gap-2">
-                    <Checkbox onChange={e => { setShowParentModel(e.checked) }} checked={showParentModel} disabled={params.id !== 'new'}></Checkbox>
-                    <label htmlFor="ingredient1" className="form-field-label">
-                      isChild
-                    </label>
-                  </div>
+                <div className="flex align-items-center gap-2 mt-3">
+                  <Checkbox
+                    name="isChild"
+                    onChange={(e) => {
+                      formik.setFieldValue("isChild", e.checked);
+                    }}
+                    disabled={params.id !== 'new'}
+                    checked={formik.values.isChild}
+                  ></Checkbox>
+                  <label htmlFor="isChild" className="form-field-label">
+                    Is Child
+                  </label>
                 </div>
+                {params.id !== 'new' && <p className="form-field-label mt-1 text-sm">Is Current Model child of another Model</p>}
+                {(isFormFieldValid(formik, "isChild") || (formErrors["isChild"])) && (
+                  <Message
+                    severity="error"
+                    text={formik?.errors?.isChild?.toString()}
+                    className="mt-2"
+                  />
+                )}
                 {showParentModel &&
                   <div className="flex flex-column gap-2 mt-3">
                     <label htmlFor="type" className="form-field-label">