impaktapps-ui-builder 1.0.173 → 1.0.200

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

@@ -6225,8 +6225,6 @@ const ComponentSchema = {
         { title: "Button", const: "Button" },
         { title: "Data Card", const: "card" },
         { title: "Check Box", const: "CheckBox" },
-        { title: "Camera", const: "Camera" },
-        { title: "Column Group", const: "ColumnGroup" },
         { title: "Container", const: "WrapperSection" },
         { title: "Tab Container", const: "HorizontalLayout" },
         { title: "Data Grid", const: "DataGrid" },
@@ -6260,6 +6258,7 @@ const ComponentSchema = {
         { title: "Timer", const: "Timer" },
         { title: "Upload", const: "UploadFile" },
         { title: "Tree ", const: "TreeMap" },
+        { title: "Column Group", const: "ColumnGroup" },
         { title: "Thought of the day", const: "Thought" }
       ]
     },
@@ -6314,14 +6313,6 @@ const ComponentSchema = {
         { title: "Standard", const: "standard" }
       ]
     },
-    toolTipPosition: {
-      oneOf: [
-        { title: "Top", const: "top" },
-        { title: "Left", const: "left" },
-        { title: "Right", const: "right" },
-        { title: "Bottom", const: "bottom" }
-      ]
-    },
     orientation: {
       oneOf: [
         { title: "Horizontal", const: "horizontal" },
@@ -6569,7 +6560,8 @@ const ComponentSchema = {
         {
           title: "Stack Horizontal Bar Graph",
           const: "HorizontalStackBarGraph"
-        }
+        },
+        { title: "Area Graph", const: "AreaGraph" }
       ]
     },
     iconName: {
@@ -7914,9 +7906,7 @@ const buildPropertiesSection = function(type) {
         getInputField("placeholder", "Placeholder"),
         getRadioInputField("multiline", "Multiline", ["YES", "NO"]),
         getSelectField("variant", "Variant"),
-        getInputField("toolTip", "Tooltip"),
-        getSelectField("toolTipPosition", "Tooltip Position"),
-        emptyBox$1("Radio", { xs: 6, sm: 6, md: 8, lg: 9 }),
+        emptyBox$1("TextEmpty1", { xs: 6, sm: 6, md: 0, lg: 3 }),
         getArrayControl("InputFormatingAndMasking", "formatElement", "Format Element"),
         getInputField("keyName", "Event Key Name")
       ];
@@ -7971,9 +7961,8 @@ const buildPropertiesSection = function(type) {
         getInputField("bottomLabel_1", "First BottomLabel"),
         getInputField("bottomLabel_2", "Second BottomLabel"),
         getInputField("bottomLabel_3", "Third BottomLabel"),
-        getInputField("size", "Size"),
-        getRadioInputField("variant", "Variant", ["circular", "horizontal"]),
-        getArrayControl("pieArcColors", "color", "Color")
+        emptyBox$1("ProgressBarCardEmpty1"),
+        emptyBox$1("ProgressBarCardEmpty2")
       ];
       break;
     case "card":
@@ -7985,6 +7974,16 @@ const buildPropertiesSection = function(type) {
         emptyBox$1("cardEmpty", { xs: 0, sm: 0, md: 8, lg: 8 })
       ];
       break;
+    case "DataCard":
+      uiSchema.elements = [
+        getInputField("url", "Image Url"),
+        getInputField("label", "Label"),
+        getInputField("description", "Description"),
+        getInputField("value", "value"),
+        getInputField("trendIconUrl", "Trend Icon Url"),
+        emptyBox$1("cardEmpty", { xs: 0, sm: 0, md: 8, lg: 8 })
+      ];
+      break;
     case "Button":
       uiSchema.elements = [
         getSelectField("buttonType", "Button Type"),
@@ -8005,6 +8004,7 @@ const buildPropertiesSection = function(type) {
       uiSchema.elements = [
         getInputField("height", "Height"),
         getInputField("heading", "Heading"),
+        getInputField("subHeader", "Sub Header"),
         getSelectField("graphType", "Graph Type"),
         getInputField("leftLabel", "Left Label"),
         getRadioInputField("disableLeftLabel", "Disable Left Label", ["YES", "No"]),
@@ -8018,7 +8018,8 @@ const buildPropertiesSection = function(type) {
         getInputField("leftMargin", "Left Margin"),
         emptyBox$1("GraphEmpty1", { xs: 6, sm: 0, md: 8, lg: 6 }),
         getArrayControl("legendLabels", "label"),
-        getArrayControl("pieArcColors", "color")
+        getArrayControl("pieArcColors", "color"),
+        getRadioInputField("xAxisFormatType", "X Axis Format Type", ["Date and Month", "Month and Year"])
       ];
       break;
     case "WrapperSection":
@@ -8027,7 +8028,6 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("isAccordion", "Accordion", ["YES", "No"]),
         getRadioInputField("defaultStyle", "Default Style", ["YES", "No"]),
         getInputField("rowSpacing", "Row Spacing"),
-        getRadioInputField("defaultClosed", "Default Closed", ["YES", "No"]),
         emptyBox$1("WrapperSectionEmpty1", { xs: 6, sm: 0, md: 4, lg: 4 }),
         emptyBox$1("WrapperSectionEmpty2")
       ];
@@ -8077,9 +8077,7 @@ const buildPropertiesSection = function(type) {
     case "Radio":
       uiSchema.elements = [
         getInputField("errorMessage", "Error Message"),
-        getInputField("toolTip", "Tooltip"),
-        getSelectField("toolTipPosition", "Tooltip Position"),
-        emptyBox$1("RadioEmpty1", { xs: 6, sm: 6, md: 4, lg: 3 }),
+        emptyBox$1("Radio", { xs: 6, sm: 6, md: 8, lg: 9 }),
         getArrayControl("sectionLabels", "label", "Options Of Radio")
       ];
       break;
@@ -8088,33 +8086,27 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
         getRadioInputField("freeSolo", "FreeSolo", ["YES", "NO"]),
         getSelectField("variant", "Variant"),
-        getInputField("toolTip", "Tooltip"),
-        getSelectField("toolTipPosition", "Tooltip Position"),
-        emptyBox$1("SelectEmpty", { xs: 6, sm: 6, md: 8, lg: 9 })
+        emptyBox$1("SelectEmpty")
       ];
       break;
     case "MultipleSelect":
       uiSchema.elements = [
         getRadioInputField("lazyLoading", "Lazy Loading", ["YES", "NO"]),
         getSelectField("variant", "Variant"),
-        getInputField("toolTip", "Tooltip"),
-        getSelectField("toolTipPosition", "Tooltip Position")
+        emptyBox$1("MultipleSelectEmpty1", { xs: 0, sm: 6, md: 4, lg: 4 }),
+        emptyBox$1("MultipleSelectEmpty2")
       ];
       break;
     case "Date":
       uiSchema.elements = [
         getSelectField("variant", "Variant"),
-        getInputField("toolTip", "Tooltip"),
-        getSelectField("toolTipPosition", "Tooltip Position"),
-        emptyBox$1("DateEmpty1", { xs: 6, sm: 6, md: 4, lg: 3 })
+        emptyBox$1("DateEmpty1", { xs: 6, sm: 6, md: 8, lg: 9 })
       ];
       break;
     case "DateTime":
       uiSchema.elements = [
         getSelectField("variant", "Variant"),
-        getInputField("toolTip", "Tooltip"),
-        getSelectField("toolTipPosition", "Tooltip Position"),
-        emptyBox$1("DateTimeEmpty1", { xs: 6, sm: 6, md: 4, lg: 3 })
+        emptyBox$1("DateTimeEmpty1", { xs: 6, sm: 6, md: 8, lg: 9 })
       ];
       break;
     case "Thought":
@@ -8136,20 +8128,9 @@ const buildPropertiesSection = function(type) {
         getRadioInputField("disableDelete", "Disable Delete", ["YES", "NO"]),
         getRadioInputField("disableDownload", "Disable Download", ["YES", "NO"]),
         getInputField("description", "Enter description"),
-        getInputField("toolTip", "Tooltip"),
-        getSelectField("toolTipPosition", "Tooltip Position"),
-        emptyBox$1("FileInputEmpty", { xs: 6, sm: 6, md: 4, lg: 3 })
+        emptyBox$1("FileInputEmpty", { xs: 6, sm: 6, md: 8, lg: 9 })
       ];
       break;
-    case "Camera":
-      uiSchema.elements = [
-        getSelectField("iconName", "Icon Name"),
-        getRadioInputField("multiUplaod", "Multiple Uplaod", ["YES", "NO"]),
-        getSelectField("color", "Color"),
-        getInputField("tooltipMessage", "Tooltip Message"),
-        getSelectField("variant", "Variant"),
-        emptyBox$1("ButtonEmpty1", { xs: 6, sm: 6, md: 4, lg: 4 })
-      ];
   }
   return uiSchema;
 };
@@ -8494,7 +8475,7 @@ var buildConfig = (FormData) => {
 };
 const createLayoutFormat = (layout, type) => {
   if (_.isEmpty(layout)) {
-    const fullLayoutComponents = ["WrapperSection", "DataGrid", "LeaderBoard", "PopUp", "TextArea", "TreeMap", "Thought", "HorizontalLayout", "Table"];
+    const fullLayoutComponents = ["WrapperSection", "DataGrid", "LeaderBoard", "PopUp", "TextArea", "TreeMap", "Thought", "HorizontalLayout"];
     if (fullLayoutComponents.includes(type)) {
       return { xs: 12, sm: 12, md: 12, lg: 12 };
     } else if (type === "Graph") {
@@ -8524,16 +8505,6 @@ const flatObjectValueInArray = (config2 = []) => {
 const clearFromSessionStorage = () => {
   sessionStorage.removeItem("pageFormdata");
 };
-const isErrorExist = (store2) => {
-  if (_.isEmpty(store2.ctx.core.errors))
-    return false;
-  store2.setValidation("ValidateAndShow");
-  store2.setNotify({
-    Fail: true,
-    FailMessage: "Error on Page"
-  });
-  return true;
-};
 const getNavigationHistory = (config2, path) => {
   if (path) {
     let urlRoutes = config2.name;
@@ -8592,13 +8563,11 @@ async function saveHandler(store2, service2, submitHandler) {
       const saveReturn = await submitHandler(store2, service2, config2);
       navigateHandler(store2, true, "/PageMasterRecords");
     } catch (err) {
-      navigateHandler(store2, false, void 0, err.message);
+      navigateHandler(store2, false);
     }
-  } else {
-    navigateHandler(store2, false);
   }
 }
-const navigateHandler = (store2, isSubmitted, pageName, errorMessage) => {
+const navigateHandler = (store2, isSubmitted, pageName) => {
   if (isSubmitted) {
     sessionStorage.removeItem("pageFormdata");
     store2.navigate(pageName || -1);
@@ -8610,7 +8579,7 @@ const navigateHandler = (store2, isSubmitted, pageName, errorMessage) => {
     store2.setValidation("ValidateAndShow");
     store2.setNotify({
       Fail: true,
-      FailMessage: errorMessage || "Errors on Page"
+      FailMessage: "Errors on Page"
     });
   }
 };
@@ -8635,24 +8604,23 @@ function okHandler(store2) {
 const sectionLabels = {
   Select: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
   MultipleSelect: ["Core", "Properties", "Value", "Events", "Style", "Validation"],
-  Table: ["Core", "Components", "Properties", "Events", "Style"],
-  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style"],
-  WrapperSection: ["Core", "Components", "Properties", "Style"],
-  HorizontalLayout: ["Core", "Components", "Properties", "Style"],
+  Table: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
+  LeaderBoard: ["Core", "Components", "Properties", "Events", "Style", "Validation"],
+  WrapperSection: ["Core", "Components", "Properties", "Style", "Validation"],
+  HorizontalLayout: ["Core", "Components", "Properties", "Style", "Validation"],
   TabSection: ["Core", "Components", "Properties", "Style", "Validation"],
-  SpeedoMeter: ["Core", "Properties", "Events", "Style"],
+  SpeedoMeter: ["Core", "Properties", "Events", "Style", "Validation"],
   card: ["Core", "Properties", "Events", "Style", "Validation"],
   UploadFile: ["Core", "Events", "Style", "Validation"],
   Graph: ["Core", "Properties", "Events", "Style", "Validation"],
   DownloadFile: ["Core", "Events", "Style", "Validation"],
   Box: ["Core", "Properties", "Events", "Style", "Validation"],
   Properties: ["Core", "Properties", "Events", "Style", "Validation"],
-  ProgressBarCard: ["Core", "Properties", "Events", "Style"],
-  ProgressBar: ["Core", "Properties", "Events", "Style"],
-  RankCard: ["Core", "Properties", "Events", "Style"],
+  ProgressBarCard: ["Core", "Properties", "Events", "Style", "Validation"],
+  RankCard: ["Core", "Properties", "Events", "Style", "Validation"],
   Slider: ["Core", "Components", "Events", "Style", "Validation"],
-  Timer: ["Core", "Events", "Style"],
-  Rank: ["Core", "Events", "Style"],
+  Timer: ["Core", "Events", "Style", "Validation"],
+  Rank: ["Core", "Events", "Style", "Validation"],
   Button: ["Core", "Properties", "Events", "Style", "Validation"],
   Array: ["Core", "Components", "Properties", "Events", "Validation"],
   Radio: ["Core", "Properties", "Events", "Style", "Validation"],
@@ -8664,12 +8632,11 @@ const sectionLabels = {
   InputSlider: ["Core", "Properties", "Events", "Style", "Validation"],
   TreeMap: ["Core", "Components", "Properties", "Events", "Style"],
   ColumnGroup: ["Core", "Components"],
-  Thought: ["Core", "Properties", "Events", "Style"],
+  Thought: ["Core", "Properties", "Events", "Style", "Validation"],
   Date: ["Core", "Properties", "Events", "Style", "Validation"],
   DateTime: ["Core", "Properties", "Events", "Style", "Validation"],
   Image: ["Core", "Properties", "Style"],
-  FileInput: ["Core", "Properties", "Events", "Style", "Validation"],
-  Camera: ["Core", "Properties", "Events", "Style", "Validation"]
+  FileInput: ["Core", "Properties", "Events", "Style", "Validation"]
 };
 function refreshPage(type, store2) {
   var _a, _b;
@@ -8872,8 +8839,6 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     editComponents: function() {
       var _a, _b, _c;
-      if (isErrorExist(store2))
-        return;
       const rowId = dynamicData2.path.split(".")[1];
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const id = (_b = store2.searchParams) == null ? void 0 : _b.get("id");
@@ -8915,8 +8880,6 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     widgetAddClickHandler: function() {
       var _a;
-      if (isErrorExist(store2))
-        return;
       if (!Array.isArray(store2.formData.elements)) {
         store2.formData.elements = [];
       }
@@ -8929,8 +8892,6 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     eventEditHandler: function() {
       var _a, _b;
-      if (isErrorExist(store2))
-        return;
       const rowId = dynamicData2.path.split(".")[1];
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const id = (_b = store2.searchParams) == null ? void 0 : _b.get("id");
@@ -8940,8 +8901,6 @@ var Component = (store2, dynamicData2, submitHandler, service2) => {
     },
     eventAddHandler: function() {
       var _a, _b;
-      if (isErrorExist(store2))
-        return;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       const id = (_b = store2.searchParams) == null ? void 0 : _b.get("id");
       if (!Array.isArray(store2.formData.events)) {
@@ -9115,8 +9074,6 @@ var pageMaster = (funcParams) => {
     },
     onAddClickHandler: function() {
       var _a;
-      if (isErrorExist(store2))
-        return;
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       if (!Array.isArray(store2.formData.elements)) {
         store2.formData.elements = [];
@@ -9140,8 +9097,6 @@ var pageMaster = (funcParams) => {
     },
     eventAddHandler: function() {
       var _a;
-      if (isErrorExist(store2))
-        return;
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
@@ -9152,8 +9107,6 @@ var pageMaster = (funcParams) => {
     },
     editEvent: function() {
       var _a;
-      if (isErrorExist(store2))
-        return;
       const rowId = dynamicData2.path.split(".")[1];
       const id = (_a = store2.searchParams) == null ? void 0 : _a.get("id");
       saveFormdataInSessionStorage(store2.ctx.core.data);
@@ -10133,8 +10086,6 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
     },
     addEvent: function() {
       var _a, _b, _c;
-      if (isErrorExist(store2))
-        return;
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       if (!Array.isArray(store2.formData.events)) {
         store2.formData.events = [];
@@ -10147,8 +10098,6 @@ var event = (store2, dynamicData2, submitHandler, service2, functionsName) => {
     },
     editEvent: function() {
       var _a;
-      if (isErrorExist(store2))
-        return;
       const rowId = dynamicData2.path.split(".")[1];
       const path = (_a = store2.searchParams) == null ? void 0 : _a.get("path");
       saveFormdataInSessionStorage(store2.ctx.core.data, path);
@@ -10907,15 +10856,6 @@ const buildProgressBar = (config2, componentScope2) => {
     ProgressBar.config.layout = config2.layout;
   }
   ProgressBar.config.main.heading = config2.label;
-  if (config2.variant) {
-    ProgressBar.config.main.variant = config2.variant;
-  }
-  if (config2.pieArcColors) {
-    ProgressBar.config.main.colorRange = flatObjectValueInArray(config2.pieArcColors);
-  }
-  if (config2.size) {
-    ProgressBar.config.main.size = Number(config2.size);
-  }
   if (config2.bottomLabel_3) {
     ProgressBar.config.main.bottomLabel_3 = config2.bottomLabel_3;
   }
@@ -11270,7 +11210,6 @@ const buildWrapperSection = (config2, componentScope2) => {
   wrapper.config.main.label = config2.label;
   wrapper.config.main.divider = config2.divider === "YES" ? true : false;
   wrapper.config.main.isAccordion = config2.isAccordion === "No" ? false : true;
-  wrapper.config.main.defaultClosed = config2.defaultClosed === "YES" ? true : false;
   if (config2.defaultStyle) {
     wrapper.config.defaultStyle = config2.defaultStyle === "YES" ? true : false;
   }
@@ -11320,12 +11259,6 @@ const buildTextField = (config2, componentScope2) => {
   if (config2.layout) {
     inputField.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config2.toolTip) {
-    inputField.config.main.toolTip = config2.toolTip;
-  }
-  if (config2.toolTipPosition) {
-    inputField.config.main.toolTipPosition = config2.toolTipPosition;
-  }
   inputField.config.main.errorMessage = `${config2.name} is empty or invalid`;
   inputField.scope = componentScope2;
   return inputField;
@@ -11363,12 +11296,6 @@ const buildSelect = (config2, componentScope2) => {
   if (config2.layout) {
     selectInputField.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config2.toolTip) {
-    selectInputField.config.main.toolTip = config2.toolTip;
-  }
-  if (config2.toolTipPosition) {
-    selectInputField.config.main.toolTipPosition = config2.toolTipPosition;
-  }
   selectInputField.scope = componentScope2;
   return selectInputField;
 };
@@ -11527,9 +11454,6 @@ const buildTable = (config2, componentScope2) => {
   if (config2.initialDensity) {
     table.config.main.initialDensity = config2.initialDensity;
   }
-  if (config2.layout) {
-    table.config.layout = createLayoutFormat(config2.layout);
-  }
   return table;
 };
 const Box = {
@@ -11610,12 +11534,6 @@ const buildUploadFile = (config2, componentScope2) => {
   if (config2.required) {
     UploadFile.config.main.required = true;
   }
-  if (config2.toolTip) {
-    UploadFile.config.main.toolTip = config2.toolTip;
-  }
-  if (config2.toolTipPosition) {
-    UploadFile.config.main.toolTipPosition = config2.toolTipPosition;
-  }
   UploadFile.config.main.errorMessage = config2.errorMessage;
   return UploadFile;
 };
@@ -11638,15 +11556,249 @@ const buildDownloadFile = (config2, componentScope2) => {
   if (config2.errorMessage) {
     DownloadFile.config.main.errorMessage = config2.errorMessage;
   }
-  if (config2.toolTip) {
-    DownloadFile.config.main.toolTip = config2.toolTip;
-  }
-  if (config2.toolTipPosition) {
-    DownloadFile.config.main.toolTipPosition = config2.toolTipPosition;
-  }
   return DownloadFile;
 };
 function Card(theme) {
+  const uiSchema = {
+    type: "WrapperLayout",
+    config: {
+      main: {},
+      wrapperStyle: {
+        position: "relative",
+        top: "50%",
+        transform: "translateY(-50%)",
+        marginBottom: 0
+      },
+      componentsBoxStyle: {
+        boxShadow: "0px 2px 4px rgba(0, 0, 0, 0.1)",
+        flexDirection: "row",
+        flexWrap: "nowrap",
+        width: "100% !important",
+        background: "transparent",
+        border: `1.5px solid ${theme.palette.primary.light}`,
+        borderRadius: "8px",
+        padding: "0px 4px",
+        height: "100%",
+        alignItems: "center",
+        marginLeft: "0px",
+        "&: hover": {
+          background: `${theme.palette.primary.main}`,
+          border: `1.5px solid black`,
+          "& p": {
+            color: "white"
+          }
+        }
+      },
+      layout: { xs: 12, sm: 12, md: 6, lg: 6 }
+    },
+    elements: [
+      {
+        type: "HorizontalLayout",
+        config: {
+          layout: 9
+        },
+        elements: [
+          {
+            type: "WrapperLayout",
+            config: {
+              main: {
+                columnSpacing: 0,
+                gap: 0
+              },
+              wrapperStyle: {
+                background: "transparent",
+                marginBottom: 0
+              },
+              componentsBoxStyle: {
+                flexDirection: "column",
+                flexWrap: "nowrap",
+                width: "100%",
+                height: "inherit",
+                background: "transparent",
+                borderRadius: "0px",
+                paddingRight: 0
+              },
+              layout: 12
+            },
+            elements: [
+              {
+                type: "WrapperLayout",
+                config: {
+                  main: {
+                    columnSpacing: 0,
+                    gap: 0
+                  },
+                  wrapperStyle: {
+                    background: "transparent",
+                    marginBottom: 0
+                  },
+                  componentsBoxStyle: {
+                    flexDirection: "row",
+                    flexWrap: "nowrap",
+                    width: "100%",
+                    height: "0",
+                    background: "transparent",
+                    borderRadius: "0px",
+                    marginLeft: "-10px",
+                    marginTop: "-8px",
+                    justifyContent: "start",
+                    position: "relative"
+                  },
+                  layout: 12
+                },
+                elements: [
+                  {
+                    type: "Control",
+                    scope: "#/properties/programType",
+                    config: {
+                      main: {
+                        heading: ""
+                      },
+                      style: {
+                        color: "black",
+                        display: "flex",
+                        fontSize: { xs: "24px", md: "28px" },
+                        fontWeight: "bold",
+                        background: "inherit",
+                        justifyContent: "flex-start",
+                        width: "auto",
+                        margin: "-8px",
+                        marginLeft: "-24px",
+                        height: 0
+                      }
+                    },
+                    options: {
+                      widget: "Box"
+                    }
+                  },
+                  {
+                    type: "Control",
+                    scope: "#/properties/programType",
+                    config: {
+                      main: {
+                        heading: "5000.00"
+                      },
+                      style: {
+                        color: "black",
+                        display: "flex",
+                        fontSize: { xs: "24px", md: "25px" },
+                        fontWeight: "bold",
+                        background: "inherit",
+                        justifyContent: "flex-start",
+                        width: "auto",
+                        margin: "-8px",
+                        marginTop: "-6px",
+                        position: "absolute",
+                        left: "7px",
+                        whiteSpace: "nowrap",
+                        overflowX: "auto",
+                        overflowY: "hidden",
+                        scrollbarWidth: "none",
+                        msOverflowStyle: "none",
+                        maxWidth: "calc(100% + 20px)",
+                        "&::-webkit-scrollbar": {
+                          display: "none"
+                        }
+                      }
+                    },
+                    options: {
+                      widget: "Box"
+                    }
+                  }
+                ]
+              },
+              {
+                type: "Control",
+                scope: "#/properties/programType",
+                config: {
+                  main: {
+                    heading: "Total Earnings"
+                  },
+                  style: {
+                    color: "black",
+                    fontSize: "16px",
+                    justifyContent: "center",
+                    whiteSpace: "nowrap",
+                    overflowX: "auto",
+                    overflowY: "hidden",
+                    scrollbarWidth: "none",
+                    msOverflowStyle: "none",
+                    background: "inherit",
+                    width: "calc(100% + 8px)",
+                    margin: "-8px",
+                    marginTop: { xs: "16px", md: "20px" },
+                    "&::-webkit-scrollbar": {
+                      display: "none"
+                    }
+                  },
+                  layout: 12
+                },
+                options: {
+                  widget: "Box"
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        type: "Control",
+        scope: "#/properties/programType",
+        config: {
+          main: {
+            url: "https://www.svgrepo.com/show/500606/loading.svg"
+          },
+          style: {
+            containerStyle: {
+              height: "100%",
+              display: "flex",
+              justifyContent: "end"
+            },
+            imageStyle: {
+              width: "unset",
+              fontSize: "none",
+              padding: "4px",
+              margin: "0px 0px 0px 8px",
+              height: "64px"
+            }
+          },
+          layout: 3
+        },
+        options: {
+          widget: "Image"
+        }
+      }
+    ]
+  };
+  return uiSchema;
+}
+const buildCard = (config, componentScope, store) => {
+  const card = _.cloneDeep(Card(store.theme.myTheme));
+  if (config.style) {
+    card.config.wrapperStyle = JSON.parse(config.style);
+  }
+  card.elements[0].elements[0].elements[0].elements[1].scope = `#/properties/${config.name}/properties/value`;
+  card.elements[1].scope = `#/properties/${config.name}/properties/url`;
+  card.elements[0].elements[0].elements[1].scope = `#/properties/${config.name}/properties/description`;
+  if (config.layout) {
+    card.config.layout = createLayoutFormat(config.layout);
+  }
+  if (config == null ? void 0 : config.titleIcon) {
+    card.elements[0].elements[0].elements[0].elements[0].config.main.heading = eval(`'\\${config.titleIcon}'`);
+    card.elements[0].elements[0].elements[0].elements[1].config.style.left = "24px";
+  }
+  if (config.label) {
+    card.elements[0].elements[0].elements[0].elements[1].config.main.heading = config.label;
+  }
+  if (config.url) {
+    card.elements[1].config.main.url = config.url;
+  }
+  if (config.description) {
+    card.elements[0].elements[0].elements[1].config.main.heading = config.description;
+  }
+  return card;
+};
+function DataCard(theme) {
   const uiSchema = {
     type: "WrapperLayout",
     config: {
@@ -11657,184 +11809,248 @@ function Card(theme) {
           top: "50%",
           transform: "translateY(-50%)",
           marginBottom: 0,
-          borderRadius: "12px",
-          fontFamily: "poppins"
+          borderRadius: "8px"
         },
         componentsBoxStyle: {
-          boxShadow: "0 0 6px 1px rgba(149, 147, 147, 0.25)",
+          boxShadow: "0px 2px 6px rgba(0, 0, 0, 0.06)",
           flexDirection: "column",
           overflow: "hidden",
           flexWrap: "nowrap",
-          width: "100% !important",
-          background: "transparent",
-          borderRadius: "12px",
-          padding: "20px 20px 20px 14px",
+          width: "90% !important",
+          background: "#F9FAFB",
+          border: "2px solid #E5E7EB",
+          borderRadius: "16px",
+          padding: "24px 20px 20px 24px",
           height: "100%",
-          minHeight: "100px",
+          minHeight: "140px",
           position: "relative",
           marginLeft: "0px",
-          "&: hover": {
-            background: `${theme.palette.primary.main}`,
-            color: `${theme.palette.primary.contrastText}`
+          transition: "all 0.3s ease",
+          "&:hover": {
+            transform: "translateY(-6px)",
+            boxShadow: "0px 8px 16px rgba(0, 0, 0, 0.08)"
           }
         }
       },
-      layout: { xs: 12, sm: 12, md: 3, lg: 3 }
+      layout: { xs: 12, sm: 12, md: 6, lg: 3 }
     },
     elements: [
       {
         type: "Control",
-        scope: "#/properties/initilCardScope",
+        scope: "#/properties/programType",
         config: {
           main: {
-            url: "https://www.svgrepo.com/show/500606/loading.svg"
+            url: "https://unpkg.com/heroicons@2.0.18/24/outline/information-circle.svg"
           },
           style: {
             containerStyle: {
               position: "absolute",
-              color: "inherit",
-              top: "4px",
-              right: "4px",
+              top: "20px",
+              right: "20px",
               display: "flex",
-              justifyContent: "flex-end",
-              alignItems: "flex-start"
+              justifyContent: "center",
+              alignItems: "center",
+              background: "#F3F4F6",
+              borderRadius: "20%",
+              width: "48px",
+              height: "48px",
+              padding: "12px"
             },
             imageStyle: {
-              color: "inherit",
-              width: "32px",
-              height: "32px",
+              width: "24px",
+              height: "24px",
               padding: "0px",
-              margin: "0px"
+              margin: "0px",
+              opacity: 0.7
             }
           }
         },
-        options: {
-          widget: "Image"
-        }
+        options: { widget: "Image" }
       },
       {
         type: "Control",
-        scope: "#/properties/initilCardScope",
+        scope: "#/properties/programType",
         config: {
           main: {
-            heading: "Total Earnings"
+            heading: "METRIC"
           },
           style: {
-            color: "inherit",
-            fontSize: "16px",
-            fontWeight: 300,
-            fontFamily: "Poppins",
+            color: "#9CA3AF",
             justifyContent: "flex-start",
             background: "inherit",
-            position: "absolute",
-            top: "8px",
-            left: "12px",
-            display: "flex",
-            maxWidth: "200px",
-            whiteSpace: "nowrap",
-            overflowX: "auto",
-            scrollbarWidth: "none",
-            "&::-webkit-scrollbar": {
-              display: "none"
-            }
+            margin: "0px",
+            marginBottom: "16px",
+            paddingRight: "60px",
+            whiteSpace: "normal",
+            wordWrap: "break-word",
+            overflowWrap: "break-word",
+            fontStyle: "normal",
+            fontSize: "12px",
+            fontWeight: "600",
+            letterSpacing: "0.3px",
+            textTransform: "uppercase",
+            fontFamily: "Arial",
+            maxWidth: "24%",
+            lineHeight: "1.2",
+            height: "20px"
           }
         },
-        options: {
-          widget: "Box"
-        }
+        options: { widget: "Box" }
       },
       {
         type: "Control",
-        scope: "#/properties/initilCardScope",
+        scope: "#/properties/programType",
         config: {
           main: {
-            heading: "5000.00"
+            heading: "--"
           },
           style: {
-            color: "inherit",
+            color: "#111827",
             display: "flex",
-            fontSize: { xs: "22px", md: "40px" },
-            fontWeight: 600,
+            fontSize: { xs: "36px", md: "42px" },
+            fontWeight: "700",
             background: "inherit",
             justifyContent: "flex-start",
             width: "100%",
             margin: "0px",
-            marginBottom: "4px",
-            marginTop: "8px",
+            marginBottom: "16px",
             lineHeight: "1",
-            maxWidth: "300px",
+            maxWidth: "200px",
             whiteSpace: "nowrap",
-            overflowX: "auto",
-            overflowY: "hidden",
-            scrollbarWidth: "none",
-            "&::-webkit-scrollbar": {
-              display: "none"
-            }
+            opacity: 0.85
           }
         },
-        options: {
-          widget: "Box"
-        }
+        options: { widget: "Box" }
       },
       {
-        type: "Control",
-        scope: "#/properties/initilCardScope",
+        type: "WrapperLayout",
         config: {
-          main: {
-            heading: "Increased from last month"
-          },
+          main: { spacing: 0, rowSpacing: 0, columnSpacing: 0, gap: 0 },
           style: {
-            color: "inherit",
-            fontSize: "12px",
-            fontWeight: "400",
-            justifyContent: "flex-start",
-            background: "inherit",
-            margin: "0px",
-            paddingLeft: "2px",
-            marginBottom: "8px",
-            maxWidth: "200px",
-            whiteSpace: "nowrap",
-            overflowX: "auto",
-            scrollbarWidth: "none",
-            "&::-webkit-scrollbar": {
-              display: "none"
+            componentsBoxStyle: {
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              background: "#E5E7EB",
+              borderRadius: "999px",
+              padding: "6px 14px",
+              width: "fit-content",
+              whiteSpace: "nowrap",
+              gap: "6px",
+              margin: "0px",
+              paddingLeft: "20px",
+              paddingRight: "20px"
             }
-          }
+          },
+          layout: { xs: "auto" }
         },
-        options: {
-          widget: "Box"
-        }
+        elements: [
+          {
+            type: "Control",
+            scope: "#/properties/programType",
+            config: {
+              main: {
+                url: "https://unpkg.com/heroicons@2.0.18/24/outline/arrow-right.svg"
+              },
+              style: {
+                containerStyle: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  margin: "0px",
+                  padding: "0px"
+                },
+                imageStyle: {
+                  width: "14px",
+                  height: "14px",
+                  filter: "brightness(0) invert(0.5)",
+                  display: "block"
+                }
+              },
+              layout: { xs: "auto" }
+            },
+            options: { widget: "Image" }
+          },
+          {
+            type: "Control",
+            scope: "#/properties/programType",
+            config: {
+              main: {
+                heading: "\u2014"
+              },
+              style: {
+                color: "#6B7280",
+                fontSize: "12px",
+                fontWeight: "550",
+                background: "transparent",
+                margin: "0px",
+                padding: "0px",
+                lineHeight: "1",
+                display: "flex",
+                alignItems: "center"
+              },
+              layout: { xs: "auto" }
+            },
+            options: { widget: "Box" }
+          }
+        ]
       }
     ]
   };
   return uiSchema;
 }
-const buildCard = (config, componentScope, store) => {
-  const card = _.cloneDeep(Card(store.theme.myTheme));
-  if (config.style) {
-    card.config.wrapperStyle = JSON.parse(config.style);
+const buildDataCard = (config2, componentScope2, store2) => {
+  var _a, _b, _c, _d, _e;
+  const card2 = _.cloneDeep(DataCard(store2.theme.myTheme));
+  if (config2.style) {
+    const parsedStyle = JSON.parse(config2.style);
+    card2.config.wrapperStyle = parsedStyle;
+    card2.elements[1].config.style = {
+      ...card2.elements[1].config.style,
+      ...(_a = parsedStyle.labelStyle) != null ? _a : {}
+    };
+    card2.elements[3].config.style.componentsBoxStyle = {
+      ...card2.elements[3].config.style.componentsBoxStyle,
+      ...(_b = parsedStyle.descriptionBoxStyle) != null ? _b : {}
+    };
+    card2.elements[2].config.style = {
+      ...card2.elements[2].config.style,
+      ...(_c = parsedStyle.valueStyle) != null ? _c : {}
+    };
+    card2.config.componentsBoxStyle = {
+      ...card2.config.componentsBoxStyle,
+      ...(_d = parsedStyle.componentsBoxStyle) != null ? _d : {}
+    };
+    card2.elements[0].config.style.containerStyle = {
+      ...card2.elements[0].config.style.containerStyle,
+      ...(_e = parsedStyle.imageContainerStyle) != null ? _e : {}
+    };
   }
-  card.elements[0].scope = `#/properties/${config.name}/properties/url`;
-  card.elements[1].scope = `#/properties/${config.name}/properties/label`;
-  card.elements[2].scope = `#/properties/${config.name}/properties/value`;
-  card.elements[3].scope = `#/properties/${config.name}/properties/description`;
-  if (config.layout) {
-    card.config.layout = createLayoutFormat(config.layout);
+  card2.elements[2].scope = `#/properties/${config2.name}/properties/value`;
+  card2.elements[0].scope = `#/properties/${config2.name}/properties/url`;
+  card2.elements[3].elements[1].scope = `#/properties/${config2.name}/properties/description`;
+  card2.elements[1].scope = `#/properties/${config2.name}/properties/label`;
+  card2.elements[3].elements[0].scope = `#/properties/${config2.name}/properties/trendIconUrl`;
+  if (config2.layout) {
+    card2.config.layout = createLayoutFormat(config2.layout);
   }
-  if (config == null ? void 0 : config.titleIcon) {
-    card.elements[0].elements[0].elements[0].elements[0].config.main.heading = eval(`'\\${config.titleIcon}'`);
-    card.elements[0].elements[0].elements[0].elements[1].config.style.left = "24px";
+  if (config2.label) {
+    card2.elements[1].config.main.heading = config2.label;
   }
-  if (config.label) {
-    card.elements[1].config.main.heading = config.label;
+  if (config2.url) {
+    card2.elements[0].config.main.url = config2.url;
   }
-  if (config.url) {
-    card.elements[0].config.main.url = config.url;
+  if (config2.description) {
+    card2.elements[3].elements[1].config.main.heading = config2.description;
   }
-  if (config.description) {
-    card.elements[3].config.main.heading = config.description;
+  if (config2.value) {
+    card2.elements[2].config.main.heading = config2.value;
   }
-  return card;
+  if (config2.trendIconUrl) {
+    card2.elements[3].elements[0].config.main.url = config2.trendIconUrl;
+  }
+  return card2;
 };
 var DateInputField = {
   type: "Control",
@@ -11875,12 +12091,6 @@ const buildDate = (config2, componentScope2) => {
   if (config2.variant) {
     dateInputField.config.main.variant = config2.variant;
   }
-  if (config2.toolTip) {
-    dateInputField.config.main.toolTip = config2.toolTip;
-  }
-  if (config2.toolTipPosition) {
-    dateInputField.config.main.toolTipPosition = config2.toolTipPosition;
-  }
   return dateInputField;
 };
 const buildDateTime = (config2, componentScope2) => {
@@ -11894,12 +12104,6 @@ const buildDateTime = (config2, componentScope2) => {
   if (config2.variant) {
     dateTimeInputField.config.main.variant = config2.variant;
   }
-  if (config2.toolTip) {
-    dateTimeInputField.config.main.toolTip = config2.toolTip;
-  }
-  if (config2.toolTipPosition) {
-    dateTimeInputField.config.main.toolTipPosition = config2.toolTipPosition;
-  }
   return dateTimeInputField;
 };
 var RankCard = {
@@ -12011,12 +12215,6 @@ const buildMultiSelect = (config2, componentScope2) => {
   if (config2.lazyLoading) {
     multipleSelect.config.main.lazyLoading = config2.lazyLoading === "YES" ? true : false;
   }
-  if (config2.toolTip) {
-    multipleSelect.config.main.toolTip = config2.toolTip;
-  }
-  if (config2.toolTipPosition) {
-    multipleSelect.config.main.toolTipPosition = config2.toolTipPosition;
-  }
   return multipleSelect;
 };
 const buildBasicUiSchema = (config2) => {
@@ -12201,12 +12399,6 @@ const buildRadio = (config2, componentScope2) => {
   if (config2.errorMessage) {
     Radio.config.main.errorMessage = config2.errorMessage;
   }
-  if (config2.toolTip) {
-    Radio.config.main.toolTip = config2.toolTip;
-  }
-  if (config2.toolTipPosition) {
-    Radio.config.main.toolTipPosition = config2.toolTipPosition;
-  }
   return Radio;
 };
 var emptyBox = {
@@ -12223,7 +12415,6 @@ var emptyBox = {
 };
 const buildEmptyBox = (config2, componentScope2) => {
   const EmptyBox = _.cloneDeep(emptyBox);
-  EmptyBox.scope = componentScope2;
   if (config2.layout) {
     EmptyBox.config.layout = createLayoutFormat(config2.layout);
   }
@@ -12362,12 +12553,6 @@ const buildFileInput = (config2, componentScope2) => {
   if (config2.description) {
     box.config.main.description = config2.description;
   }
-  if (config2.toolTip) {
-    box.config.main.toolTip = config2.toolTip;
-  }
-  if (config2.toolTipPosition) {
-    box.config.main.toolTipPosition = config2.toolTipPosition;
-  }
   return box;
 };
 const Stepper = {
@@ -12667,50 +12852,6 @@ const buildImage = (config2, componentScope2) => {
   }
   return image;
 };
-const cameraUiSchema = {
-  type: "Control",
-  scope: "#/properties/camera",
-  options: {
-    widget: "Camera"
-  },
-  config: {
-    main: {
-      label: "Upload Photo",
-      multiUplaod: false,
-      onUpload: "onFileUpload"
-    }
-  }
-};
-const buildCamera = (config2, componentScope2) => {
-  const camera = _.cloneDeep(cameraUiSchema);
-  camera.scope = componentScope2;
-  if (config2.iconName) {
-    camera.config.main.startIcon = config2.iconName;
-  }
-  if (config2.layout) {
-    camera.config.layout = createLayoutFormat(config2.layout, config2.type);
-  }
-  if (config2.tooltipMessage) {
-    camera.config.main.tooltipMessage = config2.tooltipMessage;
-  }
-  camera.config.main.multiUplaod = config2.multiUplaod === "YES" ? true : false;
-  if (config2.style) {
-    camera.config.style = JSON.parse(config2.style);
-  }
-  if (config2.size) {
-    camera.config.main.size = config2.size;
-  }
-  if (config2.variant) {
-    camera.config.main.variant = config2.variant;
-  }
-  if (config2.color) {
-    camera.config.main.color = config2.color;
-  }
-  if (config2.label) {
-    camera.config.main.name = config2.label;
-  }
-  return camera;
-};
 let schema = {
   type: "object",
   properties: {},
@@ -12857,11 +12998,13 @@ const buildUiSchema = (config2, store2) => {
       elements = buildDownloadFile(config2, componentScope2);
       break;
     case "EmptyBox":
-      elements = buildEmptyBox(config2, componentScope2);
+      elements = buildEmptyBox(config2);
       break;
     case "card":
       elements = buildCard(config2, componentScope2, store2);
       break;
+    case "DataCard":
+      elements = buildDataCard(config2, componentScope2, store2);
     case "Graph":
       switch (config2.graphType) {
         case "BarGraph":
@@ -12923,9 +13066,6 @@ const buildUiSchema = (config2, store2) => {
     case "Image":
       elements = buildImage(config2, componentScope2);
       break;
-    case "Camera":
-      elements = buildCamera(config2, componentScope2);
-      break;
     default:
       schema = {
         type: "object",