impaktapps-ui-builder 0.0.382-alpha.60 → 0.0.382-alpha.6000

package/dist/impaktapps-ui-builder.es.js

@@ -36,396 +36,555 @@ const PageMasterSchema = {
   },
   required: ["label", "name"]
 };
-const PageMasterUiSchema = (theme) => {
-  var _a;
-  const uiSchema = {
-    type: "HorizontalLayout",
-    heading: "Page Master",
-    elements: [
-      {
-        type: "WrapperLayout",
-        config: {
-          main: {},
-          wrapperStyle: {
-            backgroundColor: theme.palette.background.default
+const PageMasterUiSchema = {
+  type: "HorizontalLayout",
+  elements: [
+    {
+      type: "WrapperLayout",
+      config: {
+        main: {
+          rowSpacing: 1,
+          header: true
+        },
+        defaultStyle: true
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/pageMaster",
+          options: {
+            widget: "Box"
           },
-          defaultStyle: true
+          config: {
+            layout: 8,
+            main: {
+              heading: "Page Master"
+            }
+          }
         },
-        elements: [
-          {
-            type: "Control",
-            scope: "#/properties/name",
-            options: {
-              widget: "InputField"
+        {
+          type: "Control",
+          scope: "#/properties/Back_Button",
+          options: {
+            widget: "IconButton"
+          },
+          config: {
+            layout: 3,
+            main: {
+              icon: "BackIcon",
+              styleDefault: true,
+              size: "small",
+              onClick: "backHandler",
+              tooltipMessage: "Back"
             },
-            config: {
-              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
-              main: {
-                label: "Name",
-                options: [],
-                color: "secondary",
-                errorMessage: "Name should be start with 'page_'",
-                helperText: 'Name should be start with "page_"',
-                required: true
-              }
+            style: {
+              float: "right"
             }
+          }
+        }
+      ]
+    },
+    {
+      type: "WrapperLayout",
+      config: {
+        main: {
+          label: "Page Template",
+          divider: true
+        },
+        defaultStyle: true
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/name",
+          options: {
+            widget: "InputField"
           },
-          {
-            type: "Control",
-            scope: "#/properties/label",
-            options: {
-              widget: "InputField"
-            },
-            config: {
-              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
-              main: {
-                label: "Label",
-                options: [],
-                color: "secondary",
-                required: true
-              }
+          config: {
+            layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+            main: {
+              label: "Name",
+              options: [],
+              color: "secondary",
+              errorMessage: "Name should be start with 'page_'",
+              helperText: 'Name should be start with "page_"',
+              required: true
             }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/label",
+          options: {
+            widget: "InputField"
           },
-          {
-            type: "Control",
-            scope: "#/properties/emptyBox",
-            options: {
-              widget: "EmptyBox"
+          config: {
+            layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+            main: {
+              label: "Label",
+              options: [],
+              color: "secondary",
+              required: true
+            }
+          }
+        }
+      ]
+    },
+    {
+      type: "TabLayout",
+      config: {
+        main: {
+          tabLabels: ["Components", "events"],
+          divider: true
+        },
+        defaultStyle: true
+      },
+      elements: [
+        {
+          type: "WrapperLayout",
+          config: {
+            main: {
+              divider: true
             },
-            config: {
-              layout: { xs: 0, sm: 4 }
+            wrapperStyle: {
+              border: "1px solid gray"
             }
           },
-          {
-            type: "TabLayout",
-            config: {
-              main: {
-                tabLabels: ["Components", "events"],
-                divider: true
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/heading",
+              options: {
+                widget: "Box"
               },
-              defaultStyle: true
+              config: {
+                layout: 8,
+                main: {
+                  heading: "Components Table"
+                },
+                style: {
+                  fontFamily: "Roboto",
+                  fontWeight: "500",
+                  paddingLeft: "-10px",
+                  fontSize: "20px"
+                }
+              }
             },
-            elements: [
-              {
-                type: "Control",
-                scope: "#/properties/elements",
-                options: {
-                  widget: "Table"
+            {
+              type: "Control",
+              scope: "#/properties/AddButton",
+              options: {
+                widget: "IconButton"
+              },
+              config: {
+                layout: 3,
+                main: {
+                  icon: "AddIcon",
+                  styleDefault: true,
+                  size: "small",
+                  onClick: "onAddClickHandler",
+                  tooltipMessage: "Add New"
                 },
-                config: {
-                  main: {
-                    headerIcons: {
-                      elements: [
-                        {
-                          widget: {
-                            type: "Control",
-                            scope: "#/properties/New_Record",
-                            options: {
-                              widget: "IconButton"
-                            },
-                            config: {
-                              main: {
-                                onClick: "onAddClickHandler",
-                                size: "small",
-                                icon: "AddIcon",
-                                iconLabel: "Add New",
-                                styleDefault: true
-                              },
-                              style: {
-                                mt: "6px"
-                              }
-                            }
-                          }
-                        }
-                      ]
-                    },
-                    disableAction: true,
-                    disableSelection: true,
-                    enableDrag: true
-                  }
+                style: {
+                  float: "right"
+                }
+              }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/elements",
+              options: {
+                widget: "Table"
+              },
+              config: {
+                main: {
+                  disableAction: true,
+                  disableSelection: true,
+                  enableDrag: true
+                }
+              },
+              elements: [
+                {
+                  accessorKey: "name",
+                  header: "Name"
                 },
-                elements: [
-                  {
-                    accessorKey: "name",
-                    header: "Name"
-                  },
-                  {
-                    accessorKey: "type",
-                    header: "Type"
-                  },
-                  {
-                    header: "Edit",
-                    field: "Reject_Records",
-                    flex: 1,
-                    widget: {
-                      type: "Control",
-                      scope: "#/properties/RejectButton",
-                      options: {
-                        widget: "IconButton"
-                      },
-                      config: {
-                        main: {
-                          icon: "EditIcon",
-                          onClick: "Edit_Components",
-                          tooltipMessage: "Edit This Record"
-                        }
-                      }
-                    }
-                  },
-                  {
-                    header: "Delete",
-                    field: "Reject_Records",
-                    flex: 1,
-                    widget: {
-                      type: "Control",
-                      scope: "#/properties/RejectButton",
-                      options: {
-                        widget: "IconButton"
-                      },
-                      config: {
-                        main: {
-                          icon: "RejectIcon",
-                          color: "error",
-                          onClick: "Delete_Components",
-                          tooltipMessage: "Reject This Record"
-                        }
+                {
+                  accessorKey: "type",
+                  header: "Type"
+                },
+                {
+                  header: "Edit",
+                  field: "Reject_Records",
+                  flex: 1,
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/RejectButton",
+                    options: {
+                      widget: "IconButton"
+                    },
+                    config: {
+                      main: {
+                        icon: "EditIcon",
+                        color: "primary",
+                        onClick: "Edit_Components",
+                        tooltipMessage: "Edit This Record"
                       }
                     }
                   }
-                ]
-              },
-              {
-                type: "Control",
-                scope: "#/properties/events",
-                options: {
-                  widget: "Table"
                 },
-                config: {
-                  main: {
-                    headerIcons: {
-                      elements: [
-                        {
-                          widget: {
-                            type: "Control",
-                            scope: "#/properties/New_Record",
-                            options: {
-                              widget: "IconButton"
-                            },
-                            config: {
-                              main: {
-                                onClick: "eventAddHandler",
-                                size: "small",
-                                icon: "AddIcon",
-                                iconLabel: "Add New",
-                                styleDefault: true
-                              },
-                              style: {
-                                mt: "6px"
-                              }
-                            }
-                          }
-                        }
-                      ]
+                {
+                  header: "Delete",
+                  field: "Reject_Records",
+                  flex: 1,
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/RejectButton",
+                    options: {
+                      widget: "IconButton"
                     },
-                    disableAction: true,
-                    disableSelection: true,
-                    enableDrag: true
-                  }
-                },
-                elements: [
-                  {
-                    accessorKey: "eventType",
-                    header: "Event Type"
-                  },
-                  {
-                    accessorKey: "Handler",
-                    header: "Handler"
-                  },
-                  {
-                    accessorKey: "Edit_Approve_Records",
-                    header: "Edit Widget",
-                    widget: {
-                      type: "Control",
-                      scope: "#/properties/Edit_Records",
-                      options: {
-                        widget: "IconButton"
-                      },
-                      config: {
-                        main: {
-                          size: "small",
-                          icon: "EditIcon",
-                          tooltipMessage: "Edit This Record",
-                          onClick: "editEvent"
-                        },
-                        style: {
-                          color: "#3949ab"
-                        }
-                      }
-                    }
-                  },
-                  {
-                    accessorKey: "Reject_Records",
-                    header: "Delete",
-                    widget: {
-                      type: "Control",
-                      scope: "#/properties/RejectButton",
-                      options: {
-                        widget: "IconButton"
-                      },
-                      config: {
-                        main: {
-                          icon: "RejectIcon",
-                          color: "error",
-                          tooltipMessage: "Reject This Record",
-                          onClick: "deleteEvent"
-                        }
+                    config: {
+                      main: {
+                        icon: "RejectIcon",
+                        color: "error",
+                        onClick: "deletePopUpComponent",
+                        tooltipMessage: "Reject This Record"
                       }
                     }
                   }
-                ]
-              }
-            ]
-          },
-          {
-            type: "Control",
-            scope: "#/properties/btn",
-            options: {
-              widget: "Button"
-            },
-            config: {
-              layout: 11.9,
-              main: {
-                name: "Save",
-                startIcon: "ApproveIcon",
-                variant: "contained",
-                type: "text",
-                onClick: "saveHandler",
-                size: "medium"
-              },
-              style: {
-                width: { xs: "90%", sm: "90%", md: "20%", lg: "10%" },
-                float: "right"
-              }
+                }
+              ]
             }
-          }
-        ]
-      },
-      {
-        type: "Control",
-        scope: "#/properties/notify",
-        options: {
-          widget: "Notify"
-        },
-        layout: 6
-      },
-      {
-        type: "HorizontalLayout",
-        config: {
-          layout: 12,
-          style: {
-            position: "absolute",
-            bottom: 5,
-            overflow: "hidden"
-          }
+          ]
         },
-        elements: [
-          {
-            type: "Control",
-            scope: "#/properties/FooterText",
-            options: {
-              widget: "Box"
+        {
+          type: "WrapperLayout",
+          config: {
+            main: {
+              divider: true
             },
-            config: {
-              layout: 9.5,
-              main: {
-                heading: "Copywriter@ACT21.IO"
-              },
-              style: {
-                color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
-                fontSize: "12px",
-                textAlign: "center"
-              }
+            wrapperStyle: {
+              border: "1px solid gray"
             }
           },
-          {
-            type: "HorizontalLayout",
-            config: {
-              layout: 2.5,
-              style: {}
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/heading",
+              options: {
+                widget: "Box"
+              },
+              config: {
+                layout: 8,
+                main: {
+                  heading: "Event Table"
+                },
+                style: {
+                  fontFamily: "Roboto",
+                  fontWeight: "500",
+                  paddingLeft: "-10px",
+                  fontSize: "20px"
+                }
+              }
             },
-            elements: [
-              {
-                type: "Control",
-                scope: "#/properties/EmptyBox",
-                options: {
-                  widget: "EmptyBox"
+            {
+              type: "Control",
+              scope: "#/properties/AddButton",
+              options: {
+                widget: "IconButton"
+              },
+              config: {
+                layout: 3,
+                main: {
+                  icon: "AddIcon",
+                  styleDefault: true,
+                  size: "small",
+                  onClick: "eventAddHandler",
+                  tooltipMessage: "Back"
                 },
-                config: {
-                  layout: 6,
-                  style: {
-                    flexGrow: 1
-                  }
+                style: {
+                  float: "right"
                 }
+              }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/events",
+              options: {
+                widget: "Table"
               },
-              {
-                type: "Control",
-                scope: "#/properties/backIcon",
-                options: {
-                  widget: "Box"
+              config: {
+                main: {
+                  disableAction: true,
+                  disableSelection: true,
+                  enableDrag: true
+                }
+              },
+              elements: [
+                {
+                  accessorKey: "eventType",
+                  header: "Event Type"
                 },
-                config: {
-                  layout: 1,
-                  main: {
-                    iconName: "PrevIcon",
-                    onClick: "backHandler"
-                  },
-                  style: {
-                    fill: theme.palette.primary.main,
-                    width: 20,
-                    height: 20,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginRight: "-8px",
-                    cursor: "pointer",
-                    ":hover": {
-                      fill: theme.palette.primary.dark
+                {
+                  accessorKey: "Handler",
+                  header: "Handler"
+                },
+                {
+                  accessorKey: "Edit_Approve_Records",
+                  header: "Edit Widget",
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/Edit_Records",
+                    options: {
+                      widget: "IconButton"
+                    },
+                    config: {
+                      main: {
+                        color: "info",
+                        size: "small",
+                        icon: "EditIcon",
+                        tooltipMessage: "Edit This Record",
+                        onClick: "editEvent"
+                      },
+                      style: {
+                        color: "#3949ab"
+                      }
                     }
                   }
-                }
-              },
-              {
-                type: "Control",
-                scope: "#/properties/text",
-                options: {
-                  widget: "Box"
                 },
-                config: {
-                  layout: 5,
-                  main: {
-                    heading: "Previous Page",
-                    onClick: "backHandler"
-                  },
-                  style: {
-                    width: "fit-content",
-                    color: theme.palette.primary.main,
-                    fontSize: "12px",
-                    cursor: "pointer",
-                    marginLeft: "2px",
-                    marginRight: 0,
-                    ":hover": {
-                      color: theme.palette.primary.dark
+                {
+                  accessorKey: "Reject_Records",
+                  header: "Delete",
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/RejectButton",
+                    options: {
+                      widget: "IconButton"
+                    },
+                    config: {
+                      main: {
+                        icon: "RejectIcon",
+                        color: "error",
+                        tooltipMessage: "Reject This Record",
+                        onClick: "deletePopUpEvent"
+                      }
                     }
                   }
                 }
-              }
-            ]
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      type: "Control",
+      scope: "#/properties/popUpPageMasterEvent",
+      options: {
+        widget: "PopUp"
+      },
+      config: {
+        layout: {
+          xs: 12,
+          sm: 12,
+          md: 12,
+          lg: 12
+        },
+        main: {}
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/label",
+          options: {
+            widget: "Box"
+          },
+          config: {
+            layout: 12,
+            main: {
+              heading: "Are you sure you want to delete ?"
+            },
+            style: {
+              marginTop: "-40px"
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/EmptyBox",
+          options: {
+            widget: "EmptyBox"
+          },
+          config: {
+            main: {},
+            layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/ConfirmDeleteEventButton",
+          options: {
+            widget: "Button"
+          },
+          config: {
+            layout: 3,
+            main: {
+              name: "Yes",
+              startIcon: "ApproveIcon",
+              variant: "contained",
+              color: "info",
+              type: "text",
+              onClick: "deleteEvent",
+              size: "small"
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/CancelDeleteEventButton",
+          options: {
+            widget: "Button"
+          },
+          config: {
+            layout: 3,
+            main: {
+              name: "No",
+              startIcon: "ApproveIcon",
+              variant: "contained",
+              color: "info",
+              type: "text",
+              onClick: "deletePopUpEvent",
+              size: "small"
+            }
+          }
+        }
+      ]
+    },
+    {
+      type: "Control",
+      scope: "#/properties/popUpPageMasterComponent",
+      options: {
+        widget: "PopUp"
+      },
+      config: {
+        layout: {
+          xs: 12,
+          sm: 12,
+          md: 12,
+          lg: 12
+        },
+        main: {}
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/label",
+          options: {
+            widget: "Box"
+          },
+          config: {
+            layout: 12,
+            main: {
+              heading: "Are you sure you want to delete ?"
+            },
+            style: {
+              marginTop: "-40px"
+            }
           }
-        ]
+        },
+        {
+          type: "Control",
+          scope: "#/properties/EmptyBox",
+          options: {
+            widget: "EmptyBox"
+          },
+          config: {
+            main: {},
+            layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/ConfirmDeleteCompButton",
+          options: {
+            widget: "Button"
+          },
+          config: {
+            layout: 3,
+            main: {
+              name: "Yes",
+              startIcon: "ApproveIcon",
+              variant: "contained",
+              color: "info",
+              type: "text",
+              onClick: "Delete_Components",
+              size: "small"
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/CancelDeleteCompButton",
+          options: {
+            widget: "Button"
+          },
+          config: {
+            layout: 3,
+            main: {
+              name: "No",
+              startIcon: "ApproveIcon",
+              variant: "contained",
+              color: "info",
+              type: "text",
+              onClick: "deletePopUpComponent",
+              size: "small"
+            }
+          }
+        }
+      ]
+    },
+    {
+      type: "Control",
+      scope: "#/properties/btn",
+      options: {
+        widget: "EmptyBox"
+      },
+      config: {
+        layout: { xs: 0, sm: 0, md: 8, lg: 7 }
       }
-    ]
-  };
-  return uiSchema;
+    },
+    {
+      type: "Control",
+      scope: "#/properties/btn",
+      options: {
+        widget: "Button"
+      },
+      config: {
+        layout: 11.7,
+        main: {
+          name: "Save",
+          startIcon: "ApproveIcon",
+          variant: "contained",
+          color: "info",
+          type: "text",
+          onClick: "saveHandler",
+          size: "small"
+        },
+        style: {
+          marginBottom: "8px",
+          width: { xs: "100%", sm: "100%", md: "25%", lg: "20%" },
+          float: "right"
+        }
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/notify",
+      options: {
+        widget: "Notify"
+      },
+      layout: 6
+    }
+  ]
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var lodash = { exports: {} };
@@ -1124,7 +1283,7 @@ var lodash = { exports: {} };
     }
     var runInContext = function runInContext2(context) {
       context = context == null ? root : _2.defaults(root.Object(), context, _2.pick(root, contextProps));
-      var Array2 = context.Array, Date = context.Date, Error2 = context.Error, Function2 = context.Function, Math = context.Math, Object2 = context.Object, RegExp2 = context.RegExp, String = context.String, TypeError = context.TypeError;
+      var Array2 = context.Array, Date = context.Date, Error = context.Error, Function2 = context.Function, Math = context.Math, Object2 = context.Object, RegExp2 = context.RegExp, String = context.String, TypeError = context.TypeError;
       var arrayProto = Array2.prototype, funcProto = Function2.prototype, objectProto = Object2.prototype;
       var coreJsData = context["__core-js_shared__"];
       var funcToString = funcProto.toString;
@@ -1609,7 +1768,7 @@ var lodash = { exports: {} };
         if (typeof func != "function") {
           throw new TypeError(FUNC_ERROR_TEXT);
         }
-        return setTimeout2(function() {
+        return setTimeout(function() {
           func.apply(undefined$1, args);
         }, wait);
       }
@@ -3440,7 +3599,7 @@ var lodash = { exports: {} };
         return object[key];
       }
       var setData = shortOut(baseSetData);
-      var setTimeout2 = ctxSetTimeout || function(func, wait) {
+      var setTimeout = ctxSetTimeout || function(func, wait) {
         return root.setTimeout(func, wait);
       };
       var setToString = shortOut(baseSetToString);
@@ -4232,7 +4391,7 @@ var lodash = { exports: {} };
         }
         function leadingEdge(time) {
           lastInvokeTime = time;
-          timerId = setTimeout2(timerExpired, wait);
+          timerId = setTimeout(timerExpired, wait);
           return leading ? invokeFunc(time) : result2;
         }
         function remainingWait(time) {
@@ -4248,7 +4407,7 @@ var lodash = { exports: {} };
           if (shouldInvoke(time)) {
             return trailingEdge(time);
           }
-          timerId = setTimeout2(timerExpired, remainingWait(time));
+          timerId = setTimeout(timerExpired, remainingWait(time));
         }
         function trailingEdge(time) {
           timerId = undefined$1;
@@ -4279,12 +4438,12 @@ var lodash = { exports: {} };
             }
             if (maxing) {
               clearTimeout(timerId);
-              timerId = setTimeout2(timerExpired, wait);
+              timerId = setTimeout(timerExpired, wait);
               return invokeFunc(lastCallTime);
             }
           }
           if (timerId === undefined$1) {
-            timerId = setTimeout2(timerExpired, wait);
+            timerId = setTimeout(timerExpired, wait);
           }
           return result2;
         }
@@ -4527,7 +4686,7 @@ var lodash = { exports: {} };
       }
       function isNative(value) {
         if (isMaskable(value)) {
-          throw new Error2(CORE_ERROR_TEXT);
+          throw new Error(CORE_ERROR_TEXT);
         }
         return baseIsNative(value);
       }
@@ -5068,7 +5227,7 @@ var lodash = { exports: {} };
         if (!variable) {
           source = "with (obj) {\n" + source + "\n}\n";
         } else if (reForbiddenIdentifierChars.test(variable)) {
-          throw new Error2(INVALID_TEMPL_VAR_ERROR_TEXT);
+          throw new Error(INVALID_TEMPL_VAR_ERROR_TEXT);
         }
         source = (isEvaluating ? source.replace(reEmptyStringLeading, "") : source).replace(reEmptyStringMiddle, "$1").replace(reEmptyStringTrailing, "$1;");
         source = "function(" + (variable || "obj") + ") {\n" + (variable ? "" : "obj || (obj = {});\n") + "var __t, __p = ''" + (isEscaping ? ", __e = _.escape" : "") + (isEvaluating ? ", __j = Array.prototype.join;\nfunction print() { __p += __j.call(arguments, '') }\n" : ";\n") + source + "return __p\n}";
@@ -5187,7 +5346,7 @@ var lodash = { exports: {} };
         try {
           return apply(func, undefined$1, args);
         } catch (e) {
-          return isError(e) ? e : new Error2(e);
+          return isError(e) ? e : new Error(e);
         }
       });
       var bindAll = flatRest(function(object, methodNames) {
@@ -6159,303 +6318,451 @@ const ComponentSchema = {
   },
   required: ["name"]
 };
-const componentBasicUiSchema = (theme) => {
-  var _a;
-  const uiSchema = {
-    type: "HorizontalLayout",
-    heading: "Component",
-    elements: [
-      {
-        type: "TabLayout",
-        config: {
-          main: {
-            tabLabels: ["Core"],
-            defaultStyle: true,
-            id: `component`
+const componentBasicUiSchema = {
+  type: "HorizontalLayout",
+  elements: [
+    {
+      type: "WrapperLayout",
+      config: {
+        main: {
+          rowSpacing: 1,
+          header: true
+        },
+        defaultStyle: true
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/Component",
+          options: {
+            widget: "Box"
+          },
+          config: {
+            layout: { xs: 12, sm: 12, md: 2 },
+            main: {
+              heading: "Component"
+            },
+            style: {
+              "float": "left"
+            }
           }
         },
-        elements: [
-          {
-            type: "HorizontalLayout",
-            elements: [
-              {
-                type: "Control",
-                scope: "#/properties/type",
-                options: {
-                  widget: "SelectInputField"
-                },
-                config: {
-                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
-                  main: {
-                    label: "Type"
-                  }
+        {
+          type: "Control",
+          scope: "#/properties/pageName",
+          options: {
+            widget: "Box"
+          },
+          config: {
+            layout: { xs: 7, sm: 7, md: 9 },
+            main: {
+              heading: " "
+            },
+            style: {
+              float: "right",
+              width: "auto",
+              fontSize: "12px",
+              color: "gray",
+              paddingTop: "10px"
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/Back_Button",
+          options: {
+            widget: "IconButton"
+          },
+          config: {
+            layout: { xs: 2, sm: 2, md: 0.5 },
+            main: {
+              icon: "BackIcon",
+              styleDefault: true,
+              size: "small",
+              onClick: "backHandler",
+              tooltipMessage: "Back"
+            },
+            style: {
+              float: "right"
+            }
+          }
+        }
+      ]
+    },
+    {
+      type: "TabLayout",
+      config: {
+        main: {
+          tabLabels: ["Core"],
+          defaultStyle: true,
+          id: `component`
+        }
+      },
+      elements: [
+        {
+          type: "HorizontalLayout",
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/type",
+              options: {
+                widget: "SelectInputField"
+              },
+              config: {
+                layout: { xs: 12, sm: 12, md: 6, lg: 6 },
+                main: {
+                  label: "Type"
                 }
+              }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/name",
+              options: {
+                widget: "InputField"
               },
-              {
-                type: "Control",
-                scope: "#/properties/name",
-                options: {
-                  widget: "InputField"
+              config: {
+                layout: {
+                  xs: 12,
+                  sm: 12,
+                  md: 6,
+                  lg: 6
                 },
-                config: {
-                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
-                  main: {
-                    label: "Name",
-                    options: [],
-                    color: "secondary",
-                    required: true
-                  }
+                main: {
+                  label: "Name",
+                  options: [],
+                  color: "secondary",
+                  required: true
                 }
+              }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/label",
+              options: {
+                widget: "InputField"
               },
-              {
-                type: "Control",
-                scope: "#/properties/label",
-                options: {
-                  widget: "InputField"
+              config: {
+                layout: {
+                  xs: 12,
+                  sm: 12,
+                  md: 6,
+                  lg: 6
                 },
-                config: {
-                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
-                  main: {
-                    label: "Label",
-                    options: [],
-                    color: "secondary",
-                    required: true
-                  }
+                main: {
+                  label: "Label",
+                  options: [],
+                  color: "secondary",
+                  required: true
                 }
+              }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/proc",
+              config: {
+                layout: { xs: 11, sm: 11, md: 6, lg: 6 }
               },
-              {
-                type: "Control",
-                scope: "#/properties/layout",
-                layout: 12,
-                options: {
-                  detail: {
-                    type: "HorizontalLayout",
-                    elements: [
-                      {
-                        type: "Control",
-                        scope: "#/properties/key",
-                        options: {
-                          widget: "SelectInputField"
-                        },
-                        config: {
-                          layout: { xs: 11, sm: 4, md: 4, lg: 4 },
-                          main: {
-                            label: "Screen Size"
-                          }
-                        }
+              options: {
+                widget: "EmptyBox"
+              }
+            },
+            {
+              type: "Control",
+              scope: "#/properties/layout",
+              layout: 11.5,
+              options: {
+                detail: {
+                  type: "HorizontalLayout",
+                  elements: [
+                    {
+                      type: "Control",
+                      scope: "#/properties/key",
+                      options: {
+                        widget: "SelectInputField"
                       },
-                      {
-                        type: "Control",
-                        scope: "#/properties/value",
-                        options: {
-                          widget: "InputField"
+                      config: {
+                        layout: {
+                          xs: 11,
+                          sm: 11,
+                          md: 5.5,
+                          lg: 5.5
                         },
-                        config: {
-                          layout: { xs: 11, sm: 4, md: 4, lg: 4 },
-                          main: {
-                            label: "Value",
-                            type: "number",
-                            helperText: "Number should be in range of 0 to 12",
-                            errorMessage: "Number Can't be greater than 12 and can't be less than 0."
-                          }
+                        main: {
+                          label: "Screen Size"
                         }
+                      }
+                    },
+                    {
+                      type: "Control",
+                      scope: "#/properties/value",
+                      options: {
+                        widget: "InputField"
                       },
-                      {
-                        type: "Control",
-                        scope: "#/properties/emptyBox",
-                        options: {
-                          widget: "EmptyBox"
+                      config: {
+                        layout: {
+                          xs: 11,
+                          sm: 11,
+                          md: 5.5,
+                          lg: 5.5
                         },
-                        config: {
-                          layout: { xs: 0, sm: 4 }
+                        main: {
+                          label: "Value",
+                          type: "number",
+                          helperText: "Number should be in range of 0 to 12",
+                          errorMessage: "Number Can't be greater than 12 and can't be less than 0."
                         }
                       }
-                    ]
-                  }
+                    }
+                  ]
                 }
               }
-            ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      type: "Control",
+      scope: "#/properties/popUpComponentSection",
+      options: {
+        widget: "PopUp"
+      },
+      config: {
+        layout: {
+          xs: 12,
+          sm: 12,
+          md: 12,
+          lg: 12
+        },
+        main: {}
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/label",
+          options: {
+            widget: "Box"
+          },
+          config: {
+            layout: 12,
+            main: {
+              heading: "Are you sure you want to delete ?"
+            },
+            style: {
+              marginTop: "-40px"
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/EmptyBox",
+          options: {
+            widget: "EmptyBox"
+          },
+          config: {
+            main: {},
+            layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/ConfirmDeleteCompButton",
+          options: {
+            widget: "Button"
+          },
+          config: {
+            layout: 3,
+            main: {
+              name: "Yes",
+              startIcon: "ApproveIcon",
+              variant: "contained",
+              color: "info",
+              type: "text",
+              onClick: "deleteComponents",
+              size: "small"
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/CancelDeleteCompButton",
+          options: {
+            widget: "Button"
+          },
+          config: {
+            layout: 3,
+            main: {
+              name: "No",
+              startIcon: "ApproveIcon",
+              variant: "contained",
+              color: "info",
+              type: "text",
+              onClick: "deletePopUpComponent",
+              size: "small"
+            }
+          }
+        }
+      ]
+    },
+    {
+      type: "Control",
+      scope: "#/properties/popUpEventSection",
+      options: {
+        widget: "PopUp"
+      },
+      config: {
+        layout: {
+          xs: 12,
+          sm: 12,
+          md: 12,
+          lg: 12
+        },
+        main: {}
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/label",
+          options: {
+            widget: "Box"
+          },
+          config: {
+            layout: 12,
+            main: {
+              heading: "Are you sure you want to delete ?"
+            },
+            style: {
+              marginTop: "-40px"
+            }
           }
-        ]
-      },
-      {
-        type: "Control",
-        scope: "#/properties/EmptyBox",
-        options: {
-          widget: "EmptyBox"
-        },
-        config: {
-          layout: { xs: 0, sm: 4, md: 4, lg: 4 }
-        }
-      },
-      {
-        type: "Control",
-        scope: "#/properties/EmptyBox",
-        options: {
-          widget: "EmptyBox"
         },
-        config: {
-          layout: { xs: 0, sm: 4, md: 4, lg: 4 }
-        }
-      },
-      {
-        type: "Control",
-        scope: "#/properties/btn",
-        options: {
-          widget: "Button"
+        {
+          type: "Control",
+          scope: "#/properties/EmptyBox",
+          options: {
+            widget: "EmptyBox"
+          },
+          config: {
+            main: {},
+            layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
+          }
         },
-        config: {
-          layout: 1.8,
-          main: {
-            name: "Ok",
-            startIcon: "ApproveIcon",
-            variant: "contained",
-            type: "text",
-            onClick: "okHandler",
-            size: "medium"
+        {
+          type: "Control",
+          scope: "#/properties/ConfirmDeleteEventButton",
+          options: {
+            widget: "Button"
           },
-          style: {
-            float: "right"
+          config: {
+            layout: 3,
+            main: {
+              name: "Yes",
+              startIcon: "ApproveIcon",
+              variant: "contained",
+              color: "info",
+              type: "text",
+              onClick: "deleteEvent",
+              size: "small"
+            }
           }
-        }
-      },
-      {
-        type: "Control",
-        scope: "#/properties/btnSubmit",
-        options: {
-          widget: "Button"
         },
-        config: {
-          layout: 1.8,
-          main: {
-            name: "Save & Exit",
-            startIcon: "ApproveIcon",
-            variant: "contained",
-            type: "text",
-            onClick: "saveHandler",
-            size: "medium"
+        {
+          type: "Control",
+          scope: "#/properties/CancelDeleteEventButton",
+          options: {
+            widget: "Button"
           },
-          style: {
-            float: "right"
+          config: {
+            layout: 3,
+            main: {
+              name: "No",
+              startIcon: "ApproveIcon",
+              variant: "contained",
+              color: "info",
+              type: "text",
+              onClick: "deletePopUpEvent",
+              size: "small"
+            }
           }
         }
+      ]
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc",
+      config: {
+        layout: { xs: 11, sm: 11, md: 6, lg: 6 }
       },
-      {
-        type: "Control",
-        scope: "#/properties/notify",
-        options: {
-          widget: "Notify"
+      options: {
+        widget: "EmptyBox"
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/btn",
+      options: {
+        widget: "Button"
+      },
+      config: {
+        layout: {
+          xs: 11,
+          sm: 11,
+          md: 2.5,
+          lg: 2.5
         },
-        layout: 6
+        main: {
+          name: "Ok",
+          startIcon: "ApproveIcon",
+          variant: "contained",
+          color: "info",
+          type: "text",
+          onClick: "okHandler",
+          size: "small"
+        },
+        style: {
+          marginBottom: "8px",
+          float: "right"
+        }
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/btnSubmit",
+      options: {
+        widget: "Button"
       },
-      {
-        type: "HorizontalLayout",
-        config: {
-          layout: 12,
-          style: {
-            position: "absolute",
-            bottom: 5,
-            overflow: "hidden"
-          }
+      config: {
+        layout: {
+          xs: 11,
+          sm: 11,
+          md: 2.5,
+          lg: 2.5
         },
-        elements: [
-          {
-            type: "Control",
-            scope: "#/properties/FooterText",
-            options: {
-              widget: "Box"
-            },
-            config: {
-              layout: 9.5,
-              main: {
-                heading: "Copywriter@ACT21.IO"
-              },
-              style: {
-                color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
-                fontSize: "12px",
-                textAlign: "center"
-              }
-            }
-          },
-          {
-            type: "HorizontalLayout",
-            config: {
-              layout: 2.5,
-              style: {}
-            },
-            elements: [
-              {
-                type: "Control",
-                scope: "#/properties/EmptyBox",
-                options: {
-                  widget: "EmptyBox"
-                },
-                config: {
-                  layout: 6,
-                  style: {
-                    flexGrow: 1
-                  }
-                }
-              },
-              {
-                type: "Control",
-                scope: "#/properties/backIcon",
-                options: {
-                  widget: "Box"
-                },
-                config: {
-                  layout: 1,
-                  main: {
-                    iconName: "PrevIcon",
-                    onClick: "backHandler"
-                  },
-                  style: {
-                    fill: theme.palette.primary.main,
-                    width: 20,
-                    height: 20,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginRight: "-8px",
-                    cursor: "pointer",
-                    ":hover": {
-                      fill: theme.palette.primary.dark
-                    }
-                  }
-                }
-              },
-              {
-                type: "Control",
-                scope: "#/properties/text",
-                options: {
-                  widget: "Box"
-                },
-                config: {
-                  layout: 5,
-                  main: {
-                    heading: "Previous Page",
-                    onClick: "backHandler"
-                  },
-                  style: {
-                    width: "fit-content",
-                    color: theme.palette.primary.main,
-                    fontSize: "12px",
-                    cursor: "pointer",
-                    marginLeft: "2px",
-                    marginRight: 0,
-                    ":hover": {
-                      color: theme.palette.primary.dark
-                    }
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        main: {
+          name: "Save & Exit",
+          startIcon: "ApproveIcon",
+          variant: "contained",
+          color: "info",
+          type: "text",
+          onClick: "saveHandler",
+          size: "small"
+        },
+        style: {
+          marginBottom: "8px",
+          float: "right"
+        }
       }
-    ]
-  };
-  return uiSchema;
+    },
+    {
+      type: "Control",
+      scope: "#/properties/notify",
+      options: {
+        widget: "Notify"
+      },
+      layout: 6
+    }
+  ]
 };
 const CoreSection = {
   type: "HorizontalLayout",
@@ -6467,7 +6774,7 @@ const CoreSection = {
         widget: "SelectInputField"
       },
       config: {
-        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+        layout: { xs: 12, sm: 12, md: 6, lg: 6 },
         main: {
           label: "Type",
           type: "text"
@@ -6481,7 +6788,12 @@ const CoreSection = {
         widget: "InputField"
       },
       config: {
-        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+        layout: {
+          xs: 12,
+          sm: 12,
+          md: 6,
+          lg: 6
+        },
         main: {
           label: "Name"
         }
@@ -6494,16 +6806,31 @@ const CoreSection = {
         widget: "InputField"
       },
       config: {
-        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+        layout: {
+          xs: 12,
+          sm: 12,
+          md: 6,
+          lg: 6
+        },
         main: {
           label: "Label"
         }
       }
     },
+    {
+      type: "Control",
+      scope: "#/properties/proc",
+      config: {
+        layout: { xs: 11, sm: 11, md: 6, lg: 6 }
+      },
+      options: {
+        widget: "EmptyBox"
+      }
+    },
     {
       type: "Control",
       scope: "#/properties/layout",
-      layout: 12,
+      layout: 11.5,
       options: {
         "elementLabelProp": "key",
         detail: {
@@ -6516,7 +6843,12 @@ const CoreSection = {
                 widget: "SelectInputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5
+                },
                 main: {
                   label: "Screen Size"
                 }
@@ -6529,7 +6861,12 @@ const CoreSection = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5
+                },
                 main: {
                   label: "Value",
                   type: "number",
@@ -6537,16 +6874,6 @@ const CoreSection = {
                   errorMessage: "Number Can't be greater than 12 and can't be less than 0."
                 }
               }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
-              options: {
-                widget: "EmptyBox"
-              },
-              config: {
-                layout: { xs: 0, sm: 4 }
-              }
             }
           ]
         }
@@ -6558,95 +6885,121 @@ const EventSection = {
   type: "HorizontalLayout",
   elements: [
     {
-      type: "Control",
-      scope: "#/properties/events",
-      options: {
-        widget: "Table"
-      },
+      type: "WrapperLayout",
       config: {
         main: {
-          headerIcons: {
-            elements: [
-              {
-                widget: {
-                  type: "Control",
-                  scope: "#/properties/New_Record",
-                  options: {
-                    widget: "IconButton"
-                  },
-                  config: {
-                    main: {
-                      color: "info",
-                      onClick: "eventAddHandler",
-                      size: "small",
-                      icon: "AddIcon",
-                      iconLabel: "Add New",
-                      styleDefault: true
-                    },
-                    style: {
-                      mt: "6px"
-                    }
-                  }
-                }
-              }
-            ]
-          },
-          disableAction: true,
-          disableSelection: true,
-          enableDrag: true
+          divider: true
+        },
+        wrapperStyle: {
+          border: "1px solid gray"
         }
       },
       elements: [
         {
-          accessorKey: "eventType",
-          header: "Event Type"
-        },
-        {
-          accessorKey: "Handler",
-          header: "Handler"
+          type: "Control",
+          scope: "#/properties/programType",
+          options: {
+            widget: "Box"
+          },
+          config: {
+            layout: 8,
+            main: {
+              heading: "Event Table"
+            },
+            style: {
+              fontFamily: "Roboto",
+              fontWeight: "500",
+              paddingLeft: "-10px",
+              fontSize: "20px"
+            }
+          }
         },
         {
-          accessorKey: "Edit_Approve_Records",
-          header: "Edit Widget",
-          widget: {
-            type: "Control",
-            scope: "#/properties/Edit_Records",
-            options: {
-              widget: "IconButton"
+          type: "Control",
+          scope: "#/properties/Back_Button",
+          options: {
+            widget: "IconButton"
+          },
+          config: {
+            layout: 3,
+            main: {
+              icon: "AddIcon",
+              styleDefault: true,
+              size: "small",
+              onClick: "eventAddHandler",
+              tooltipMessage: "Back"
             },
-            config: {
-              main: {
-                color: "info",
-                size: "small",
-                icon: "EditIcon",
-                tooltipMessage: "Edit This Record",
-                onClick: "eventEditHandler"
-              },
-              style: {
-                color: "#3949ab"
-              }
+            style: {
+              float: "right"
             }
           }
         },
         {
-          accessorKey: "Reject_Records",
-          header: "Delete",
-          widget: {
-            type: "Control",
-            scope: "#/properties/RejectButton",
-            accessorKeyName: "Reject_Records",
-            options: {
-              widget: "IconButton"
+          type: "Control",
+          scope: "#/properties/events",
+          options: {
+            widget: "Table"
+          },
+          config: {
+            main: {
+              disableAction: true,
+              disableSelection: true,
+              enableDrag: true
+            }
+          },
+          elements: [
+            {
+              accessorKey: "eventType",
+              header: "Event Type"
             },
-            config: {
-              main: {
-                icon: "RejectIcon",
-                color: "error",
-                tooltipMessage: "Reject This Record",
-                onClick: "deleteEvent"
+            {
+              accessorKey: "Handler",
+              header: "Handler"
+            },
+            {
+              accessorKey: "Edit_Approve_Records",
+              header: "Edit Widget",
+              widget: {
+                type: "Control",
+                scope: "#/properties/Edit_Records",
+                options: {
+                  widget: "IconButton"
+                },
+                config: {
+                  main: {
+                    color: "info",
+                    size: "small",
+                    icon: "EditIcon",
+                    tooltipMessage: "Edit This Record",
+                    onClick: "eventEditHandler"
+                  },
+                  style: {
+                    color: "#3949ab"
+                  }
+                }
+              }
+            },
+            {
+              accessorKey: "Reject_Records",
+              header: "Delete",
+              widget: {
+                type: "Control",
+                scope: "#/properties/RejectButton",
+                accessorKeyName: "Reject_Records",
+                options: {
+                  widget: "IconButton"
+                },
+                config: {
+                  main: {
+                    icon: "RejectIcon",
+                    color: "error",
+                    tooltipMessage: "Reject This Record",
+                    onClick: "deletePopUpEvent"
+                  }
+                }
               }
             }
-          }
+          ]
         }
       ]
     }
@@ -6659,7 +7012,12 @@ const EmptyBox = {
     widget: "EmptyBox"
   },
   config: {
-    layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+    layout: {
+      xs: 11,
+      sm: 11,
+      md: 5.5,
+      lg: 5.5
+    },
     main: {}
   }
 };
@@ -6678,7 +7036,12 @@ const cardLayout = {
             widget: "SelectInputField"
           },
           config: {
-            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+            layout: {
+              xs: 11,
+              sm: 11,
+              md: 5.5,
+              lg: 5.5
+            },
             main: {
               label: "Screen Size"
             }
@@ -6691,7 +7054,12 @@ const cardLayout = {
             widget: "InputField"
           },
           config: {
-            layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+            layout: {
+              xs: 11,
+              sm: 11,
+              md: 5.5,
+              lg: 5.5
+            },
             main: {
               label: "Value",
               type: "number",
@@ -6699,8 +7067,7 @@ const cardLayout = {
               errorMessage: "Number Can't be greater than 12 and can't be less than 0."
             }
           }
-        },
-        EmptyBox
+        }
       ]
     }
   }
@@ -6722,13 +7089,17 @@ const getArrayControl = (parentScope, childScope, childLabel) => {
               widget: "InputField"
             },
             config: {
-              layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+              layout: {
+                xs: 11,
+                sm: 11,
+                md: 5.5,
+                lg: 5.5
+              },
               main: {
                 label: childLabel || "Labels for Tab"
               }
             }
           },
-          EmptyBox,
           EmptyBox
         ]
       }
@@ -6743,7 +7114,12 @@ sizeHolder.options.detail.elements[1] = {
     widget: "InputField"
   },
   config: {
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+    layout: {
+      xs: 11,
+      sm: 11,
+      md: 5.5,
+      lg: 5.5
+    },
     main: {
       label: "Size"
     }
@@ -6757,7 +7133,12 @@ const getInputField = (scope, label) => {
       widget: "InputField"
     },
     config: {
-      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+      layout: {
+        xs: 11,
+        sm: 11,
+        md: 5.5,
+        lg: 5.5
+      },
       main: {
         label
       }
@@ -6772,7 +7153,12 @@ const getRadioInputField = (scope, label, options) => {
       widget: "RadioInputField"
     },
     config: {
-      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+      layout: {
+        xs: 11,
+        sm: 11,
+        md: 5.5,
+        lg: 5.5
+      },
       main: {
         label,
         options
@@ -6815,7 +7201,7 @@ const getSelectField = (scope, label, options) => {
       widget: "SelectInputField"
     },
     config: {
-      layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+      layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
       main: {
         label,
         type: "text"
@@ -6836,8 +7222,6 @@ const buildPropertiesSection = function(type) {
         getInputField("elevation", "Card Elevation"),
         getInputField("height", "Grid height"),
         getInputField("justifyContent", "justifyContent"),
-        EmptyBox,
-        EmptyBox,
         cardLayout
       ];
       break;
@@ -6848,7 +7232,6 @@ const buildPropertiesSection = function(type) {
         getInputField("resetText", "Reset Text"),
         getInputField("completeText", "Complete Text"),
         getSelectField("orientation", "Orientation Type"),
-        EmptyBox,
         getArrayControl("sectionLabels", "label")
       ];
       break;
@@ -6864,14 +7247,12 @@ const buildPropertiesSection = function(type) {
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
         EmptyBox,
-        EmptyBox,
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element")
       ];
       break;
     case "TextArea":
       uiSchema.elements = [
         getInputField("placeholder", "Placeholder"),
-        EmptyBox,
         EmptyBox
       ];
       break;
@@ -6881,8 +7262,7 @@ const buildPropertiesSection = function(type) {
         getInputField("heading", "Container Heading"),
         getInputField("heading", "Container Heading"),
         getInputField("speedoCaption", "Speedometer Caption"),
-        getInputField("width", "Speedometer Width"),
-        EmptyBox
+        getInputField("width", "Speedometer Width")
       ];
       break;
     case "RankCard":
@@ -6890,9 +7270,7 @@ const buildPropertiesSection = function(type) {
         getInputField("rank", "Rank"),
         getInputField("image", "Image Url"),
         getInputField("title", "Card Title"),
-        getInputField("description", "Card Description"),
-        EmptyBox,
-        EmptyBox
+        getInputField("description", "Card Description")
       ];
       break;
     case "LeaderBoard":
@@ -6901,8 +7279,6 @@ const buildPropertiesSection = function(type) {
         getInputField("firstImage", "First Image url"),
         getInputField("secondImage", "Second Image url"),
         getInputField("thirdImage", "Third Image url"),
-        EmptyBox,
-        EmptyBox,
         getTextArea("functionCode", "Write Compare Code", false)
       ];
       break;
@@ -6918,9 +7294,7 @@ const buildPropertiesSection = function(type) {
         getInputField("heading", "Heading"),
         getInputField("bottomLabel_1", "First BottomLabel"),
         getInputField("bottomLabel_2", "Second BottomLabel"),
-        getInputField("bottomLabel_3", "Third BottomLabel"),
-        EmptyBox,
-        EmptyBox
+        getInputField("bottomLabel_3", "Third BottomLabel")
       ];
       break;
     case "card":
@@ -6954,7 +7328,7 @@ const buildPropertiesSection = function(type) {
       ];
       break;
     case "WrapperSection":
-      uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]), getRadioInputField("isAccordion", "Accordion", ["YES", "No"]), EmptyBox];
+      uiSchema.elements = [getRadioInputField("divider", "Divider", ["YES", "No"]), EmptyBox];
       break;
     case "TabSection":
       uiSchema.elements = [
@@ -6982,14 +7356,12 @@ const buildPropertiesSection = function(type) {
     case "Select":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-        getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
-        EmptyBox
+        getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"])
       ];
       break;
     case "MultipleSelect":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
-        EmptyBox,
         EmptyBox
       ];
       break;
@@ -7035,92 +7407,116 @@ const TableSection = {
   type: "HorizontalLayout",
   elements: [
     {
-      type: "Control",
-      scope: "#/properties/elements",
-      options: {
-        widget: "Table"
-      },
+      type: "WrapperLayout",
       config: {
-        main: {
-          headerIcons: {
-            elements: [
-              {
-                widget: {
-                  type: "Control",
-                  scope: "#/properties/New_Record",
-                  options: {
-                    widget: "IconButton"
-                  },
-                  config: {
-                    main: {
-                      color: "info",
-                      onClick: "widgetAddClickHandler",
-                      size: "small",
-                      icon: "AddIcon",
-                      iconLabel: "Add New",
-                      styleDefault: true
-                    },
-                    style: {
-                      mt: "6px"
-                    }
-                  }
-                }
-              }
-            ]
-          },
-          disableAction: true,
-          disableSelection: true,
-          enableDrag: true
+        main: {},
+        wrapperStyle: {
+          border: "1px solid gray"
         }
       },
       elements: [
         {
-          accessorKey: "name",
-          header: "Name"
-        },
-        {
-          accessorKey: "type",
-          header: "Type"
+          type: "Control",
+          scope: "#/properties/programType",
+          options: {
+            widget: "Box"
+          },
+          config: {
+            layout: 8,
+            main: {
+              heading: "Components Table"
+            },
+            style: {
+              fontFamily: "Roboto",
+              fontWeight: "500",
+              paddingLeft: "-10px",
+              fontSize: "20px"
+            }
+          }
         },
         {
-          header: "Edit Record",
-          field: "Reject_Records",
-          flex: 1,
-          widget: {
-            type: "Control",
-            scope: "#/properties/RejectButton",
-            options: {
-              widget: "IconButton"
+          type: "Control",
+          scope: "#/properties/Back_Button",
+          options: {
+            widget: "IconButton"
+          },
+          config: {
+            layout: 3,
+            main: {
+              icon: "AddIcon",
+              styleDefault: true,
+              size: "small",
+              onClick: "widgetAddClickHandler",
+              tooltipMessage: "Add New"
             },
-            config: {
-              main: {
-                icon: "EditIcon",
-                color: "primary",
-                onClick: "editComponents",
-                tooltipMessage: "Reject This Record"
-              }
+            style: {
+              float: "right"
             }
           }
         },
         {
-          header: "Delete",
-          field: "Reject_Records",
-          flex: 1,
-          widget: {
-            type: "Control",
-            scope: "#/properties/RejectButton",
-            options: {
-              widget: "IconButton"
+          type: "Control",
+          scope: "#/properties/elements",
+          options: {
+            widget: "Table"
+          },
+          config: {
+            main: {
+              disableAction: true,
+              disableSelection: true,
+              enableDrag: true
+            }
+          },
+          elements: [
+            {
+              accessorKey: "name",
+              header: "Name"
             },
-            config: {
-              main: {
-                icon: "RejectIcon",
-                color: "error",
-                onClick: "deleteComponents",
-                tooltipMessage: "Reject This Record"
+            {
+              accessorKey: "type",
+              header: "Type"
+            },
+            {
+              header: "Edit Record",
+              field: "Reject_Records",
+              flex: 1,
+              widget: {
+                type: "Control",
+                scope: "#/properties/RejectButton",
+                options: {
+                  widget: "IconButton"
+                },
+                config: {
+                  main: {
+                    icon: "EditIcon",
+                    color: "primary",
+                    onClick: "editComponents",
+                    tooltipMessage: "Reject This Record"
+                  }
+                }
+              }
+            },
+            {
+              header: "Delete",
+              field: "Reject_Records",
+              flex: 1,
+              widget: {
+                type: "Control",
+                scope: "#/properties/RejectButton",
+                options: {
+                  widget: "IconButton"
+                },
+                config: {
+                  main: {
+                    icon: "RejectIcon",
+                    color: "error",
+                    onClick: "deletePopUpComponent",
+                    tooltipMessage: "Reject This Record"
+                  }
+                }
               }
             }
-          }
+          ]
         }
       ]
     }
@@ -7144,7 +7540,12 @@ const ValueTab = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5
+                },
                 main: {
                   label: "Label"
                 }
@@ -7157,21 +7558,16 @@ const ValueTab = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5
+                },
                 main: {
                   label: "Value"
                 }
               }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
-              options: {
-                widget: "EmptyBox"
-              },
-              config: {
-                layout: { xs: 0, sm: 4, md: 4, lg: 4 }
-              }
             }
           ]
         }
@@ -7198,7 +7594,12 @@ const ValidationSection = {
                 widget: "SelectInputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5
+                },
                 main: {
                   label: "Validation Type"
                 }
@@ -7211,21 +7612,16 @@ const ValidationSection = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5
+                },
                 main: {
                   label: "Validation Value"
                 }
               }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
-              options: {
-                widget: "EmptyBox"
-              },
-              config: {
-                layout: { xs: 0, sm: 4 }
-              }
             }
           ]
         }
@@ -7407,7 +7803,7 @@ const sectionLabels = {
 };
 const refreshPage = (type, store2) => {
   var _a;
-  const UiSchema = _.cloneDeep(componentBasicUiSchema(store2.theme.myTheme));
+  const UiSchema = _.cloneDeep(componentBasicUiSchema);
   if (type) {
     const sectionUiSchema = {
       Core: CoreSection,
@@ -7419,8 +7815,8 @@ const refreshPage = (type, store2) => {
       Validation: ValidationSection
     };
     const elements = (_a = sectionLabels[type]) == null ? void 0 : _a.map((e) => sectionUiSchema[e]);
-    UiSchema.elements[0].config.main.tabLabels = sectionLabels[type] || ["Core", "style", "Event", "Validation"];
-    UiSchema.elements[0].elements = elements || [CoreSection, StyleSection, EventSection, ValidationSection];
+    UiSchema.elements[1].config.main.tabLabels = sectionLabels[type] || ["Core", "style", "Event", "Validation"];
+    UiSchema.elements[1].elements = elements || [CoreSection, StyleSection, EventSection, ValidationSection];
   }
   store2.setUiSchema(UiSchema);
 };
@@ -7466,22 +7862,30 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
         store2.navigate(`/Component?path=${`elements[${rowId}]`}&id=${id}`);
       }
     },
-    deleteComponents: function() {
+    deleteComponents: function(shouldUpdateDialog = true) {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      const rowId = dynamicData2.path.split(".")[1];
+      const rowId = localStorage.getItem("rowId");
       store2.formData.elements.splice(rowId, 1);
       const response2 = saveFormdataInLocalStorage(store2.ctx.core.data, path);
       const data2 = path ? _.get(response2, path) : response2;
       store2.setFormdata(data2);
+      if (shouldUpdateDialog) {
+        store2.updateDialog("popUpComponentSection");
+      }
+      localStorage.removeItem("rowId");
     },
-    deleteEvent: function() {
+    deleteEvent: function(shouldUpdateDialog = true) {
       var _a;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
-      const rowId = dynamicData2.path.split(".")[1];
+      const rowId = localStorage.getItem("rowId");
       store2.formData.events.splice(rowId, 1);
       const response2 = saveFormdataInLocalStorage(store2.ctx.core.data, path);
       store2.setFormdata(_.get(response2, path));
+      if (shouldUpdateDialog) {
+        store2.updateDialog("popUpEventSection");
+      }
+      localStorage.removeItem("rowId");
     },
     widgetAddClickHandler: function() {
       var _a;
@@ -7517,6 +7921,16 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     backHandler: function() {
       store2.navigate(-1);
+    },
+    deletePopUpComponent: function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      localStorage.setItem("rowId", rowId);
+      store2.updateDialog("popUpComponentSection");
+    },
+    deletePopUpEvent: function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      localStorage.setItem("rowId", rowId);
+      store2.updateDialog("popUpEventSection");
     }
   };
 };
@@ -7542,7 +7956,7 @@ var pageMaster = (funcParams) => {
       return config;
     },
     getUiSchema: function() {
-      return PageMasterUiSchema(store2.theme.myTheme);
+      return PageMasterUiSchema;
     },
     getSchema: () => {
       return PageMasterSchema;
@@ -7564,7 +7978,10 @@ var pageMaster = (funcParams) => {
     },
     saveHandler: async () => await saveHandler(store2, service2, submitHandler),
     Edit_Components: Component(store2, dynamicData2, submitHandler, service2).editComponents,
-    Delete_Components: Component(store2, dynamicData2, submitHandler, service2).deleteComponents,
+    Delete_Components: async function() {
+      await Component(store2, dynamicData2, submitHandler, service2).deleteComponents(false);
+      store2.updateDialog("popUpPageMasterComponent");
+    },
     eventAddHandler: function() {
       var _a;
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
@@ -7584,10 +8001,22 @@ var pageMaster = (funcParams) => {
       store2.navigate(`/ComponentEvents?path=${finalPath}&id=${id}`);
     },
     deleteEvent: function() {
-      const rowId = dynamicData2.path.split(".")[1];
+      const rowId = localStorage.getItem("rowId");
       store2.formData.events.splice(rowId, 1);
       const response2 = saveFormdataInLocalStorage(store2.ctx.core.data);
       store2.setFormdata(response2);
+      store2.updateDialog("popUpPageMasterEvent");
+      localStorage.removeItem("rowId");
+    },
+    deletePopUpComponent: function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      localStorage.setItem("rowId", rowId);
+      store2.updateDialog("popUpPageMasterComponent");
+    },
+    deletePopUpEvent: function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      localStorage.setItem("rowId", rowId);
+      store2.updateDialog("popUpPageMasterEvent");
     }
   };
 };
@@ -7677,335 +8106,385 @@ const EventSchema = {
   },
   required: ["eventType", "Handler"]
 };
-const EventUiSchema = (theme) => {
-  var _a;
-  const uiSchema = {
-    type: "HorizontalLayout",
-    heading: "Component",
-    elements: [
-      {
-        type: "TabLayout",
-        config: {
-          main: {
-            tabLabels: ["Core", "Response Event"],
-            defaultStyle: true,
-            id: "event"
+const EventUiSchema = {
+  type: "HorizontalLayout",
+  elements: [
+    {
+      type: "WrapperLayout",
+      config: {
+        main: {
+          rowSpacing: 1,
+          header: true
+        },
+        defaultStyle: true
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/Component",
+          options: {
+            widget: "Box"
+          },
+          config: {
+            layout: { xs: 12, sm: 12, md: 2 },
+            main: {
+              heading: "Component"
+            },
+            style: {
+              "float": "left"
+            }
           }
         },
-        elements: [
-          {
-            type: "HorizontalLayout",
-            elements: [
-              {
-                type: "Control",
-                scope: `#/properties/eventType`,
-                options: {
-                  widget: "SelectInputField"
-                },
-                config: {
-                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
-                  main: {
-                    label: "Event Type",
-                    type: "text"
-                  }
-                }
+        {
+          type: "Control",
+          scope: "#/properties/pageName",
+          options: {
+            widget: "Box"
+          },
+          config: {
+            layout: { xs: 7, sm: 7, md: 9 },
+            main: {
+              heading: " "
+            },
+            style: {
+              float: "right",
+              width: "auto",
+              fontSize: "12px",
+              color: "gray",
+              paddingTop: "10px"
+            }
+          }
+        },
+        {
+          type: "Control",
+          scope: "#/properties/Back_Button",
+          options: {
+            widget: "IconButton"
+          },
+          config: {
+            layout: { xs: 2, sm: 2, md: 0.5 },
+            main: {
+              icon: "BackIcon",
+              styleDefault: true,
+              size: "small",
+              onClick: "backHandler",
+              tooltipMessage: "Back"
+            },
+            style: {
+              float: "right"
+            }
+          }
+        }
+      ]
+    },
+    {
+      type: "TabLayout",
+      config: {
+        main: {
+          tabLabels: ["Core", "Response Event"],
+          defaultStyle: true,
+          id: "event"
+        }
+      },
+      elements: [
+        {
+          type: "HorizontalLayout",
+          elements: [
+            {
+              type: "Control",
+              scope: `#/properties/eventType`,
+              options: {
+                widget: "SelectInputField"
               },
-              {
-                type: "Control",
-                scope: `#/properties/Handler`,
-                options: {
-                  widget: "SelectInputField"
-                },
-                config: {
-                  layout: { xs: 11, sm: 4, md: 4, lg: 4 },
-                  main: {
-                    label: "Handler",
-                    type: "text"
-                  }
+              config: {
+                layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
+                main: {
+                  label: "Event Type",
+                  type: "text"
                 }
+              }
+            },
+            getSelectField("Handler", "Handler")
+          ]
+        },
+        {
+          type: "WrapperLayout",
+          config: {
+            main: {
+              divider: true
+            },
+            wrapperStyle: {
+              border: "1px solid gray"
+            }
+          },
+          elements: [
+            {
+              type: "Control",
+              scope: "#/properties/heading",
+              options: {
+                widget: "Box"
               },
-              {
-                type: "Control",
-                scope: "#/properties/emptyBox",
-                options: {
-                  widget: "EmptyBox"
+              config: {
+                layout: 8,
+                main: {
+                  heading: "Response Event"
                 },
-                config: {
-                  layout: { xs: 0, sm: 4 }
+                style: {
+                  fontFamily: "Roboto",
+                  fontWeight: "500",
+                  paddingLeft: "-10px",
+                  fontSize: "20px"
                 }
               }
-            ]
-          },
-          {
-            type: "Control",
-            scope: "#/properties/events",
-            options: {
-              widget: "Table"
             },
-            config: {
-              main: {
-                headerIcons: {
-                  elements: [
-                    {
-                      widget: {
-                        type: "Control",
-                        scope: "#/properties/New_Record",
-                        options: {
-                          widget: "IconButton"
-                        },
-                        config: {
-                          main: {
-                            onClick: "addEvent",
-                            size: "small",
-                            icon: "AddIcon",
-                            iconLabel: "Add New",
-                            styleDefault: true
-                          },
-                          style: {
-                            mt: "6px"
-                          }
-                        }
-                      }
-                    }
-                  ]
+            {
+              type: "Control",
+              scope: "#/properties/AddButton",
+              options: {
+                widget: "IconButton"
+              },
+              config: {
+                layout: 3,
+                main: {
+                  icon: "AddIcon",
+                  styleDefault: true,
+                  size: "small",
+                  onClick: "addEvent",
+                  tooltipMessage: "Back"
                 },
-                disableAction: true,
-                disableSelection: true,
-                enableDrag: true
+                style: {
+                  float: "right"
+                }
               }
             },
-            elements: [
-              {
-                accessorKey: "eventType",
-                header: "Event Type"
+            {
+              type: "Control",
+              scope: "#/properties/events",
+              options: {
+                widget: "Table"
               },
-              {
-                accessorKey: "Handler",
-                header: "Handler"
+              config: {
+                main: {
+                  disableAction: true,
+                  disableSelection: true,
+                  enableDrag: true
+                }
               },
-              {
-                accessorKey: "Edit_Approve_Records",
-                header: "Edit Widget",
-                widget: {
-                  type: "Control",
-                  scope: "#/properties/Edit_Records",
-                  options: {
-                    widget: "IconButton"
-                  },
-                  config: {
-                    main: {
-                      size: "small",
-                      icon: "EditIcon",
-                      tooltipMessage: "Edit This Record",
-                      onClick: "editEvent"
+              elements: [
+                {
+                  accessorKey: "eventType",
+                  header: "Event Type"
+                },
+                {
+                  accessorKey: "Handler",
+                  header: "Handler"
+                },
+                {
+                  accessorKey: "Edit_Approve_Records",
+                  header: "Edit Widget",
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/Edit_Records",
+                    options: {
+                      widget: "IconButton"
                     },
-                    style: {
-                      color: "#3949ab"
+                    config: {
+                      main: {
+                        color: "info",
+                        size: "small",
+                        icon: "EditIcon",
+                        tooltipMessage: "Edit This Record",
+                        onClick: "editEvent"
+                      },
+                      style: {
+                        color: "#3949ab"
+                      }
                     }
                   }
-                }
-              },
-              {
-                accessorKey: "Reject_Records",
-                header: "Delete",
-                widget: {
-                  type: "Control",
-                  scope: "#/properties/RejectButton",
-                  options: {
-                    widget: "IconButton"
-                  },
-                  config: {
-                    main: {
-                      icon: "RejectIcon",
-                      color: "error",
-                      tooltipMessage: "Reject This Record",
-                      onClick: "deleteEvent"
+                },
+                {
+                  accessorKey: "Reject_Records",
+                  header: "Delete",
+                  widget: {
+                    type: "Control",
+                    scope: "#/properties/RejectButton",
+                    options: {
+                      widget: "IconButton"
+                    },
+                    config: {
+                      main: {
+                        icon: "RejectIcon",
+                        color: "error",
+                        tooltipMessage: "Reject This Record",
+                        onClick: "deletePopUpEvent"
+                      }
                     }
                   }
                 }
-              }
-            ]
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      type: "Control",
+      scope: "#/properties/popUpEvent",
+      options: {
+        widget: "PopUp"
+      },
+      config: {
+        layout: {
+          xs: 12,
+          sm: 12,
+          md: 12,
+          lg: 12
+        },
+        main: {}
+      },
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/label",
+          options: {
+            widget: "Box"
+          },
+          config: {
+            layout: 12,
+            main: {
+              heading: "Are you sure you want to delete ?"
+            },
+            style: {
+              marginTop: "-40px"
+            }
           }
-        ]
-      },
-      {
-        type: "Control",
-        scope: "#/properties/EmptyBox",
-        options: {
-          widget: "EmptyBox"
-        },
-        config: {
-          layout: { xs: 0, sm: 4, md: 4, lg: 4 }
-        }
-      },
-      {
-        type: "Control",
-        scope: "#/properties/EmptyBox",
-        options: {
-          widget: "EmptyBox"
         },
-        config: {
-          layout: { xs: 0, sm: 4, md: 4, lg: 4 }
-        }
-      },
-      {
-        type: "Control",
-        scope: "#/properties/btn",
-        options: {
-          widget: "Button"
+        {
+          type: "Control",
+          scope: "#/properties/EmptyBox",
+          options: {
+            widget: "EmptyBox"
+          },
+          config: {
+            main: {},
+            layout: { xs: 11, sm: 5.5, md: 5.5, lg: 5.5 }
+          }
         },
-        config: {
-          layout: 1.8,
-          main: {
-            name: "Ok",
-            startIcon: "ApproveIcon",
-            variant: "contained",
-            type: "text",
-            onClick: "okHandler",
-            size: "medium"
+        {
+          type: "Control",
+          scope: "#/properties/ConfirmDeleteEventButton",
+          options: {
+            widget: "Button"
           },
-          style: {
-            float: "right"
+          config: {
+            layout: 3,
+            main: {
+              name: "Yes",
+              startIcon: "ApproveIcon",
+              variant: "contained",
+              color: "info",
+              type: "text",
+              onClick: "deleteEvent",
+              size: "small"
+            }
           }
-        }
-      },
-      {
-        type: "Control",
-        scope: "#/properties/btnSubmit",
-        options: {
-          widget: "Button"
         },
-        config: {
-          layout: 1.8,
-          main: {
-            name: "Save & Exit",
-            startIcon: "ApproveIcon",
-            variant: "contained",
-            type: "text",
-            onClick: "saveHandler",
-            size: "medium"
+        {
+          type: "Control",
+          scope: "#/properties/CancelDeleteEventButton",
+          options: {
+            widget: "Button"
           },
-          style: {
-            float: "right"
+          config: {
+            layout: 3,
+            main: {
+              name: "No",
+              startIcon: "ApproveIcon",
+              variant: "contained",
+              color: "info",
+              type: "text",
+              onClick: "deletePopUpEvent",
+              size: "small"
+            }
           }
         }
+      ]
+    },
+    {
+      type: "Control",
+      scope: "#/properties/proc",
+      config: {
+        layout: { xs: 11, sm: 11, md: 6, lg: 6 }
       },
-      {
-        type: "Control",
-        scope: "#/properties/notify",
-        options: {
-          widget: "Notify"
+      options: {
+        widget: "EmptyBox"
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/btn",
+      options: {
+        widget: "Button"
+      },
+      config: {
+        layout: {
+          xs: 11,
+          sm: 11,
+          md: 2.5,
+          lg: 2.5
         },
-        layout: 6
+        main: {
+          name: "Ok",
+          startIcon: "ApproveIcon",
+          variant: "contained",
+          color: "info",
+          type: "text",
+          onClick: "okHandler",
+          size: "small"
+        },
+        style: {
+          marginBottom: "8px",
+          float: "right"
+        }
+      }
+    },
+    {
+      type: "Control",
+      scope: "#/properties/btnSubmit",
+      options: {
+        widget: "Button"
       },
-      {
-        type: "HorizontalLayout",
-        config: {
-          layout: 12,
-          style: {
-            position: "absolute",
-            bottom: 5,
-            overflow: "hidden"
-          }
+      config: {
+        layout: {
+          xs: 11,
+          sm: 11,
+          md: 2.5,
+          lg: 2.5
         },
-        elements: [
-          {
-            type: "Control",
-            scope: "#/properties/FooterText",
-            options: {
-              widget: "Box"
-            },
-            config: {
-              layout: 9.5,
-              main: {
-                heading: "Copywriter@ACT21.IO"
-              },
-              style: {
-                color: ((_a = theme == null ? void 0 : theme.palette) == null ? void 0 : _a.text.disabled) || "#AFAFAF",
-                fontSize: "12px",
-                textAlign: "center"
-              }
-            }
-          },
-          {
-            type: "HorizontalLayout",
-            config: {
-              layout: 2.5,
-              style: {}
-            },
-            elements: [
-              {
-                type: "Control",
-                scope: "#/properties/EmptyBox",
-                options: {
-                  widget: "EmptyBox"
-                },
-                config: {
-                  layout: 6,
-                  style: {
-                    flexGrow: 1
-                  }
-                }
-              },
-              {
-                type: "Control",
-                scope: "#/properties/backIcon",
-                options: {
-                  widget: "Box"
-                },
-                config: {
-                  layout: 1,
-                  main: {
-                    iconName: "PrevIcon",
-                    onClick: "backHandler"
-                  },
-                  style: {
-                    fill: theme.palette.primary.main,
-                    width: 20,
-                    height: 20,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginRight: "-8px",
-                    cursor: "pointer",
-                    ":hover": {
-                      fill: theme.palette.primary.dark
-                    }
-                  }
-                }
-              },
-              {
-                type: "Control",
-                scope: "#/properties/text",
-                options: {
-                  widget: "Box"
-                },
-                config: {
-                  layout: 5,
-                  main: {
-                    heading: "Previous Page",
-                    onClick: "backHandler"
-                  },
-                  style: {
-                    width: "fit-content",
-                    color: theme.palette.primary.main,
-                    fontSize: "12px",
-                    cursor: "pointer",
-                    marginLeft: "2px",
-                    marginRight: 0,
-                    ":hover": {
-                      color: theme.palette.primary.dark
-                    }
-                  }
-                }
-              }
-            ]
-          }
-        ]
+        main: {
+          name: "Save & Exit",
+          startIcon: "ApproveIcon",
+          variant: "contained",
+          color: "info",
+          type: "text",
+          onClick: "saveHandler",
+          size: "small"
+        },
+        style: {
+          marginBottom: "8px",
+          float: "right"
+        }
       }
-    ]
-  };
-  return uiSchema;
+    },
+    {
+      type: "Control",
+      scope: "#/properties/notify",
+      options: {
+        widget: "Notify"
+      },
+      layout: 6
+    }
+  ]
 };
 const APISection = {
   type: "HorizontalLayout",
@@ -8017,7 +8496,7 @@ const APISection = {
         widget: "SelectInputField"
       },
       config: {
-        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+        layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
         main: {
           label: "Method",
           type: "text"
@@ -8031,7 +8510,7 @@ const APISection = {
         widget: "InputField"
       },
       config: {
-        layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+        layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
         main: {
           label: "Path",
           type: "text",
@@ -8040,26 +8519,6 @@ const APISection = {
         }
       }
     },
-    {
-      type: "Control",
-      scope: "#/properties/emptyBox",
-      options: {
-        widget: "EmptyBox"
-      },
-      config: {
-        layout: { xs: 0, sm: 4, md: 4, lg: 4 }
-      }
-    },
-    {
-      type: "Control",
-      scope: "#/properties/emptyBox",
-      options: {
-        widget: "EmptyBox"
-      },
-      config: {
-        layout: { xs: 0, sm: 4, md: 4, lg: 4 }
-      }
-    },
     {
       type: "Control",
       scope: "#/properties/headers",
@@ -8076,7 +8535,12 @@ const APISection = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5
+                },
                 main: {
                   label: "Key"
                 }
@@ -8089,21 +8553,16 @@ const APISection = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5
+                },
                 main: {
                   label: "Value"
                 }
               }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
-              options: {
-                widget: "EmptyBox"
-              },
-              config: {
-                layout: { xs: 0, sm: 4, md: 4, lg: 4 }
-              }
             }
           ]
         }
@@ -8125,7 +8584,12 @@ const APISection = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5
+                },
                 main: {
                   label: "Key"
                 }
@@ -8138,21 +8602,16 @@ const APISection = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5
+                },
                 main: {
                   label: "Value"
                 }
               }
-            },
-            {
-              type: "Control",
-              scope: "#/properties/emptyBox",
-              options: {
-                widget: "EmptyBox"
-              },
-              config: {
-                layout: { xs: 0, sm: 4, md: 4, lg: 4 }
-              }
             }
           ]
         }
@@ -8179,7 +8638,12 @@ const refreshSectionUiSchema = {
                 widget: "InputField"
               },
               config: {
-                layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5
+                },
                 main: {
                   label: "Value"
                 }
@@ -8192,7 +8656,12 @@ const refreshSectionUiSchema = {
                 widget: "EmptyBox"
               },
               config: {
-                layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+                layout: {
+                  xs: 11,
+                  sm: 11,
+                  md: 5.5,
+                  lg: 5.5
+                },
                 main: {}
               }
             }
@@ -8212,21 +8681,21 @@ var event = (store2, dynamicData2, submitHandler, service2) => {
       this.refreshPage(formdata.Handler, store2);
     },
     refreshPage: (handlerType, store22) => {
-      const uiSchema = _.cloneDeep(EventUiSchema(store22.theme.myTheme));
+      const uiSchema = _.cloneDeep(EventUiSchema);
       const schema2 = _.cloneDeep(EventSchema);
       if (handlerType) {
         if (handlerType === "custom") {
-          uiSchema.elements[0].elements[0].elements[3] = getTextArea("eventCode", "Write Custom Code", false);
+          uiSchema.elements[1].elements[0].elements[2] = getTextArea("eventCode", "Write Custom Code", false);
           schema2.required = ["eventType", "Handler", "eventCode"];
         } else if (handlerType === "api") {
-          uiSchema.elements[0].elements[0].elements[3] = APISection;
+          uiSchema.elements[1].elements[0].elements[2] = APISection;
           schema2.required = ["eventType", "Handler", "method", "path"];
         } else if (handlerType === "inBuiltFunction") {
-          uiSchema.elements[0].elements[0].elements[2] = getSelectField("inBuiltFunctionType", "Function Name");
-          uiSchema.elements[0].elements[0].elements[3] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true, 12);
+          uiSchema.elements[1].elements[0].elements[2] = getSelectField("inBuiltFunctionType", "Function Name");
+          uiSchema.elements[1].elements[0].elements[3] = getTextArea("funcParametersCode", "Write Custom Code for Functions Parameter", true, { xs: 12, sm: 12, md: 6 });
           schema2.required = ["eventType", "Handler", "inBuiltFunctionType"];
         } else if (handlerType === "refresh") {
-          uiSchema.elements[0].elements[0].elements[3] = refreshSectionUiSchema;
+          uiSchema.elements[1].elements[0].elements[2] = refreshSectionUiSchema;
           schema2.properties.refreshElements.required = ["value"];
           schema2.properties.refreshElements.items.required = ["value"];
           schema2.required = ["eventType", "Handler", "refreshElements"];
@@ -8236,8 +8705,8 @@ var event = (store2, dynamicData2, submitHandler, service2) => {
       store22.setUiSchema(uiSchema);
     },
     getFormData: Component(store2, dynamicData2, submitHandler, service2).getFormdata,
-    getUiSchema: async function() {
-      return await EventUiSchema(store2.theme.myTheme);
+    getUiSchema: function() {
+      return EventUiSchema;
     },
     getSchema: () => {
       return EventSchema;
@@ -8272,9 +8741,17 @@ var event = (store2, dynamicData2, submitHandler, service2) => {
       store2.setSearchParams(store2.searchParams);
       this.setPage();
     },
-    deleteEvent: Component(store2, dynamicData2, submitHandler, service2).deleteEvent,
+    deleteEvent: async function() {
+      await Component(store2, dynamicData2, submitHandler, service2).deleteEvent(false);
+      store2.updateDialog("popUpEvent");
+    },
     backHandler: function() {
       store2.navigate(-1);
+    },
+    deletePopUpEvent: function() {
+      const rowId = dynamicData2.path.split(".")[1];
+      localStorage.setItem("rowId", rowId);
+      store2.updateDialog("popUpEvent");
     }
   };
 };
@@ -8343,7 +8820,6 @@ async function executeEventsHandler(params2) {
   } else if (params2.config.Handler === "refresh") {
     return await executeRefreshHandler(params2);
   } else if (params2.config.Handler === "mergeFormdata") {
-    console.log("params : ", params2);
     const result = await mergeFormdata(
       params2.parentEventOutput,
       params2.componentName,
@@ -8429,26 +8905,20 @@ async function mergeFormdata(handlerResponse, componentName, eventConfig, store2
       };
     });
   } else if (eventConfig.type === "page") {
-    console.log("console1 : ", handlerResponse);
     if (!(_.isEmpty(handlerResponse == null ? void 0 : handlerResponse.data) && (handlerResponse == null ? void 0 : handlerResponse.data))) {
-      console.log("console2 : ", handlerResponse);
       store2.setFormdata((pre) => {
         return { ...pre, ...handlerResponse == null ? void 0 : handlerResponse.data };
       });
     }
   } else {
     if (handlerResponse) {
-      console.log("console3 : ", handlerResponse);
-      let body2;
-      if (handlerResponse.data instanceof Array) {
-        body2 = [...handlerResponse.data];
-      } else if (handlerResponse.data instanceof Object) {
-        body2 = { ...handlerResponse.data };
-      }
       store2.setFormdata((pre) => {
-        return { ...pre, [componentName]: eventConfig.lazyLoading ? handlerResponse.data.data : body2 };
+        return { ...pre, [componentName]: eventConfig.lazyLoading ? handlerResponse.data.data : handlerResponse.data };
       });
-      await asyncOperation();
+      if (!store2.newData) {
+        store2.newData = {};
+      }
+      store2.newData[componentName] = handlerResponse.data;
     }
   }
 }
@@ -8522,16 +8992,6 @@ function getRefreshElements(eventConfig, eventGropus) {
   console.log(result);
   return result;
 }
-function asyncOperation() {
-  return new Promise((resolve, reject) => {
-    setTimeout(() => {
-      {
-        resolve("Operation completed successfully!");
-        reject(new Error("Operation failed!"));
-      }
-    }, 50);
-  });
-}
 let compType;
 let eventGroups = {};
 const notifyUiSchema = {
@@ -8653,13 +9113,11 @@ var service = (funcParams) => {
       }
     },
     onChange: async function() {
-      var _a, _b;
       if (eventGroups.onChange) {
-        (_a = funcParams.dynamicData) == null ? void 0 : _a.setLoading(true);
         const ChangeEventsKeysArray = Object.keys(eventGroups.onChange);
         Promise.all(ChangeEventsKeysArray.map(async (componentName) => {
-          var _a2, _b2;
-          if (((_a2 = funcParams.store) == null ? void 0 : _a2.formData[componentName]) !== funcParams.store.newData[componentName] && ((_b2 = funcParams.store) == null ? void 0 : _b2.newData[componentName]) !== void 0) {
+          var _a, _b;
+          if (((_a = funcParams.store) == null ? void 0 : _a.formData[componentName]) !== funcParams.store.newData[componentName] && ((_b = funcParams.store) == null ? void 0 : _b.newData[componentName]) !== void 0) {
             for (const eventConfig of eventGroups.onChange[componentName]) {
               await executeEvents({
                 ...executeEventsParameters,
@@ -8669,7 +9127,6 @@ var service = (funcParams) => {
             }
           }
         }));
-        (_b = funcParams.dynamicData) == null ? void 0 : _b.setLoading(false);
       }
     },
     updateConfigApiBody: async function(paramValue, apiBody) {
@@ -8712,9 +9169,6 @@ var service = (funcParams) => {
         functionParameters == null ? void 0 : functionParameters.handleNext();
       }
     },
-    backHandler: () => {
-      funcParams.store.navigate(-1);
-    },
     onReset: async function(functionParameters) {
       var _a, _b;
       const path = ((_a = funcParams.dynamicData) == null ? void 0 : _a.tableButtonPath) || funcParams.dynamicData.path.split(".")[0];
@@ -8750,9 +9204,12 @@ var leaderBoard = {
       label: "LeaderBoard",
       divider: true
     },
-    style: { wrapperStyle: {
-      height: { xs: 850, sm: 1e3 }
-    } },
+    style: {
+      wrapperStyle: {
+        display: "flex",
+        gap: "10px"
+      }
+    },
     wrapperStyle: {
       position: "relative",
       width: "100%"
@@ -9061,11 +9518,11 @@ var leaderBoard = {
             fontWeight: 900,
             background: "rgb(179, 198, 255)"
           },
-          position: "absolute",
           top: { xs: "300px", sm: "300px", md: "390px", lg: "390px" },
           border: "2px solid rgb(179, 198, 255)",
           width: "95%",
-          left: "2.5%"
+          left: "2.5%",
+          margin: "auto"
         },
         main: {
           disableAction: true,
@@ -9173,7 +9630,62 @@ const BarGraph = {
     widget: "Graph"
   },
   config: {
-    main: {}
+    main: {
+      header: "Bar Graph",
+      bottomLabel: "Name of Employe",
+      numTicks: 6,
+      leftLabel: "Value in lakhs",
+      axisLeft: true,
+      axisBottom: true,
+      hideTicks: false,
+      hideLeftAxisLine: false,
+      hideBottomAxisLine: false,
+      bottomAxisWidth: "10px",
+      legend: {
+        labelColor: "green",
+        legendTitle: "",
+        direction: "row",
+        align: "none"
+      }
+    },
+    style: {
+      containerStyle: {
+        width: "100%",
+        height: 300
+      },
+      headerStyle: {},
+      tooltipStyle: {},
+      labelStyle: {
+        margin: { left: 80, bottom: 20 },
+        leftLabelOffset: 50,
+        bottomLabelOffset: 10
+      },
+      barStyle: {
+        color: {
+          firstBarColor: "#6c5efb",
+          secondBarColor: "#3f51b5"
+        }
+      },
+      legendStyle: {
+        legend: {
+          lineHeight: "0.9em",
+          fontSize: "8px",
+          fontFamily: "arial",
+          padding: "10px 10px",
+          width: "30%",
+          display: "flex",
+          justifyContent: "center",
+          border: "1px solid rgba(255, 255, 255, 0.3)",
+          borderRadius: " 8px",
+          marginRight: "auto"
+        },
+        legendTitle: {
+          fontSize: "10px",
+          marginBottom: "10px",
+          fontWeight: "100"
+        }
+      }
+    }
   }
 };
 const PieGraph = {
@@ -9184,7 +9696,35 @@ const PieGraph = {
   },
   config: {
     main: {
-      type: "PieGraph"
+      header: "Incentive Branch category wise",
+      type: "PieGraph",
+      bottomLabel: "Name of Employe",
+      leftLabel: "Value",
+      axisLeft: true,
+      axisBottom: true,
+      legendAvailable: true,
+      legend: {
+        labelColor: "green",
+        legendTitle: "Branches",
+        direction: "row",
+        align: "right"
+      }
+    },
+    style: {
+      containerStyle: {
+        height: "340"
+      },
+      headerStyle: {},
+      tooltipStyle: {
+        backgroundColor: "black",
+        width: "80px"
+      },
+      labelStyle: {},
+      legendStyle: {
+        legend: {},
+        legendTitle: {}
+      },
+      pieStyle: {}
     }
   }
 };
@@ -9232,7 +9772,28 @@ const HorizontalBarGraph = {
   },
   config: {
     main: {
-      type: "HorizontalBarGraph"
+      header: " ",
+      type: "HorizontalBarGraph",
+      bottomLabel: " ",
+      leftLabel: "Value",
+      axisLeft: false,
+      axisBottom: true,
+      hideBottomTicks: false,
+      hideLeftTicks: false,
+      hideLeftAxisLine: true,
+      hideBottomAxisLine: false,
+      bottomAxisWidth: "10px"
+    },
+    style: {
+      containerStyle: {
+        width: "100%"
+      },
+      headerStyle: {},
+      tooltipStyle: {},
+      labelStyle: {},
+      barStyle: {
+        color: "#6c5efb"
+      }
     }
   }
 };
@@ -9251,11 +9812,7 @@ const buildHorizontalBarGraph = (config, componentScope) => {
     horizontalBarGraph.config.containerStyle.background = config.containerBackground;
   }
   if (config.height) {
-    horizontalBarGraph.config.style = {
-      containerStyle: {
-        height: config.height
-      }
-    };
+    horizontalBarGraph.config.style.containerStyle.height = config.height;
   }
   if (config.bottomLabel) {
     horizontalBarGraph.config.main.bottomLabel = config.bottomLabel;
@@ -9364,11 +9921,7 @@ const buildPieGraph = (config, componentScope) => {
     pieGraph.config.layout = createLayoutFormat(config.layout);
   }
   if (config.height) {
-    pieGraph.config.style = {
-      containerStyle: {
-        height: config.height
-      }
-    };
+    pieGraph.config.style.containerStyle.height = config.height;
   }
   if (config.legendHide) {
     pieGraph.config.main.legendAvailabe = config.legendHide === "YES" ? false : true;
@@ -9379,11 +9932,7 @@ const buildPieGraph = (config, componentScope) => {
     pieGraph.config.main.tooltipDataKey = flatObjectValueInArray(config.legendLabels);
   }
   if (config.pieArcColors) {
-    pieGraph.config.style = {
-      pieStyle: {
-        colorRange: flatObjectValueInArray(config.pieArcColors)
-      }
-    };
+    pieGraph.config.style.pieStyle.colorRange = flatObjectValueInArray(config.pieArcColors);
   }
   return pieGraph;
 };
@@ -9393,13 +9942,16 @@ const buildStackbarGraph = (config, componentScope) => {
     barGraph.config.layout = createLayoutFormat(config.layout);
   }
   if (config.legendHide) {
-    barGraph.config.main.legendAvailable = config.legendHide;
+    barGraph.config.main.legendAvailable = false;
   }
   barGraph.config.main.type = config.graphType;
   barGraph.config.main.header = config.heading;
   if (config.barColor) {
     barGraph.config.barStyle.color = config.barColor;
   }
+  if (config.containerBackground) {
+    barGraph.config.containerStyle.background = config.containerBackground;
+  }
   if (config.height) {
     barGraph.config.style.containerStyle.height = config.height;
   }
@@ -9409,6 +9961,7 @@ const buildStackbarGraph = (config, componentScope) => {
   if (config.leftLabel) {
     barGraph.config.main.leftLabel = config.leftLabel;
   }
+  barGraph.scope = componentScope;
   return barGraph;
 };
 var RunnerBoyProgressBar = {
@@ -9462,10 +10015,8 @@ var WrapperSection = {
 };
 const buildWrapperSection = (config, componentScope) => {
   const wrapper = _.cloneDeep(WrapperSection);
-  wrapper.scope = componentScope;
   wrapper.config.main.label = config.label;
   wrapper.config.main.divider = config.divider === "YES" ? true : false;
-  wrapper.config.main.isAccordion = config.isAccordion === "YES" ? true : false;
   if (config.style) {
     wrapper.config.style = JSON.parse(config.style);
   }
@@ -9481,7 +10032,12 @@ var TextInputField = {
     widget: "InputField"
   },
   config: {
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+    layout: {
+      xs: 11,
+      sm: 11,
+      md: 5.5,
+      lg: 5.5
+    },
     main: {
       label: ""
     },
@@ -9514,7 +10070,12 @@ var SelectInputField = {
     widget: "SelectInputField"
   },
   config: {
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+    "layout": {
+      "xs": 11,
+      "sm": 11,
+      "md": 5.5,
+      "lg": 5.5
+    },
     main: {
       label: "",
       type: "text",
@@ -9803,14 +10364,16 @@ var Card = {
     main: {
       rowSpacing: 0.5
     },
-    componentsBoxStyle: {
-      position: "relative",
-      color: "white",
-      height: { xs: "120px", md: "160px" },
-      width: "100%",
-      textAlign: "left",
-      background: "#3f51b5",
-      borderRadius: "20px"
+    style: {
+      wrapperStyle: {
+        position: "relative",
+        color: "white",
+        height: { xs: "120px", md: "160px" },
+        width: "100%",
+        textAlign: "left",
+        background: "#3f51b5",
+        borderRadius: "20px"
+      }
     },
     layout: { xs: 12, sm: 12, md: 6, lg: 6 }
   },
@@ -9922,7 +10485,12 @@ var DateInputField = {
     widget: "DateInputField"
   },
   config: {
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+    layout: {
+      xs: 11,
+      sm: 11,
+      md: 5.5,
+      lg: 5.5
+    },
     main: {
       label: "",
       type: "date"
@@ -10039,7 +10607,7 @@ var MultipleSelect = {
     widget: "MultipleSelect"
   },
   config: {
-    layout: { xs: 11, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 11, sm: 11, md: 5.5, lg: 5.5 },
     main: {
       label: "",
       type: "text",
@@ -10070,7 +10638,6 @@ const buildBasicUiSchema = (config) => {
   return {
     "type": "HorizontalLayout",
     pageName: `${config.name}`,
-    heading: `${config.label}`,
     "elements": []
   };
 };
@@ -10227,7 +10794,7 @@ var emptyBox = {
     widget: "EmptyBox"
   },
   config: {
-    layout: { xs: 0, sm: 4, md: 4, lg: 4 },
+    layout: { xs: 12, sm: 12, md: 5.5, lg: 5.5 },
     main: {},
     style: {}
   }
@@ -10606,7 +11173,7 @@ const buildUiSchema = (config) => {
       elements = RunnerBoyProgressbar(config, componentScope);
       break;
     case "WrapperSection":
-      elements = buildWrapperSection(config, componentScope);
+      elements = buildWrapperSection(config);
       break;
     case "Text":
       elements = buildTextField(config, componentScope);
@@ -10657,7 +11224,7 @@ const buildUiSchema = (config) => {
       switch (config.graphType) {
         case "BarGraph":
         case "StackBarGraph":
-          elements = buildStackbarGraph(config);
+          elements = buildStackbarGraph(config, componentScope);
           break;
         case "LineGraph":
           elements = buildLineGraph(config, componentScope);