Tons of minor fixes from cloud sync

frontend/src/components/Billing.jsx

@@ -94,9 +94,9 @@ const Billing = memo((props) => {
 
 	useEffect(() => {
 		if (userdata.app_execution_limit !== undefined && userdata.app_execution_usage !== undefined) {
-			const percentage = (userdata.app_execution_usage / userdata.app_execution_limit) * 100;
+			const percentage = ((userdata.app_execution_usage + userdata.app_executions_suborgs) / userdata.app_execution_limit) * 100;
 			setCurrentAppRunsInPercentage(Math.round(percentage));
-			setCurrentAppRunsInNumber(userdata.app_execution_limit - userdata.app_execution_usage);
+			setCurrentAppRunsInNumber(userdata.app_execution_limit - userdata.app_execution_usage - userdata.app_executions_suborgs);
 		}
 
 		if (userdata?.id?.length > 0 && isLoggedIn === false){
@@ -1860,19 +1860,6 @@ const Billing = memo((props) => {
 
 	const updateAlertThreshold = (index, field, value) => {
 
-		if (field === 'percentage') {
-			if (value > 100 || value < 0) {
-				value = 0
-				toast("The percentage value should be between 0 and 100")
-			}
-		} else if (field === 'count') {
-			if (value < 0 || value >= userdata.app_execution_limit) {
-				value = 0
-				toast("The count value should be greater than 0 and less than the total app execution limit")
-			}
-		}
-
-
 		const totalValue = userdata.app_execution_limit;
 		const newAlertThresholds = alertThresholds.map((threshold, i) => {
 			if (i === index) {
@@ -2423,9 +2410,21 @@ const Billing = memo((props) => {
 					}}
 				/>
 				<Typography style={{marginTop: 10, fontSize: 16,}} color="textSecondary">
-					You have used <strong>{currentAppRunsInPercentage}%</strong> of total app execution limit or <strong>{userdata.app_execution_usage}</strong> app runs out of <strong>{userdata.app_execution_limit}</strong> app runs.
+					You have used <strong>{currentAppRunsInPercentage}%</strong> of total app execution limit or <strong>{userdata.app_execution_usage + userdata.app_executions_suborgs}</strong> app runs out of <strong>{userdata.app_execution_limit}</strong> app runs.
 				</Typography>
-
+				
+				{userdata?.active_org?.creator_org?.length > 0 ? null :
+					(
+					<>
+						<Typography color="textSecondary" style={{ marginTop: 20, fontSize: 16 }}>
+							Parent Organization App Executions: <strong>{userdata.app_execution_usage}</strong>
+						</Typography>
+						<Typography color="textSecondary" style={{ fontSize: 16 }}>
+							Sub-Organization App Executions: <strong>{userdata.app_executions_suborgs || "N/A"}</strong>
+						</Typography>
+					</>
+				)}
+				
 				<div>
 					<Typography style={{ marginTop: 20, fontSize: 18 }}>
 						Set email alert thresholds for app runs
@@ -2442,8 +2441,8 @@ const Billing = memo((props) => {
 							: " " + 0 + " "}
 						app runs.
 					</Typography>
-					<Typography color="textSecondary" style={{ fontSize: 16 }}>
-						<span style={{fontWeight: 'bold'}}>Please note</span>: Once your app runs reach the set alert threshold, all admins in the organization will receive an email notification.
+					<Typography color="textSecondary" style={{ fontSize: 16, marginTop: 10 }}>
+						<span style={{fontWeight: 'bold'}}>Please note</span>: Once your app runs reach the set alert threshold, all admins in the organization will receive an email notification. For Parent organizations, the alert will be sent base on the total app runs from both parent and sub-organizations. For Sub-organizations, the alert will be sent based on the app runs of the sub-organization only.
 					</Typography>
 					<div style={{ marginTop: 15 }}>
 						{alertThresholds.map((threshold, index) => (
@@ -2706,6 +2705,7 @@ const BillingStatsChildOrg = memo(({ userdata, globalUrl, selectedOrganization,
 	const { themeMode, brandColor, supportEmail } = useContext(Context);
 	const theme = getTheme(themeMode, brandColor);
 
+
 	// Handle page change
 	const handleChangePage = (event, newPage) => {
 	  setPage(newPage);
@@ -2830,6 +2830,7 @@ const BillingStatsChildOrg = memo(({ userdata, globalUrl, selectedOrganization,
 				usage: stat?.monthly_app_executions || "N/A",
 				workflows_usage: stat?.total_workflow_executions || "N/A",
 				workflow_usage_limit: subOrg?.sync_features?.workflow_executions?.limit || "N/A",
+				app_runs_hard_limit: subOrg?.Billing?.app_runs_hard_limit || 0,
 			}
 		})
 
@@ -2890,6 +2891,33 @@ const BillingStatsChildOrg = memo(({ userdata, globalUrl, selectedOrganization,
 					</>
 				)}
 			},
+			{
+				field: "app_runs_hard_limit", headerName: "App Executions Hard Limit", width: 200, renderCell: (params) => {
+					console.log("params.row: ", params.row)
+					return (
+						<>
+							<Typography style={{ fontSize: 16 }}>
+								{params.row.app_runs_hard_limit}
+							</Typography>
+							<IconButton
+								style={{ color: theme.palette.primary.main }}
+								onClick={() => {
+									setOpen(true)
+									setEditingOrgId(params.row.orgId)
+									setEditing("app_executions_hard_limit")
+									if (params.row.app_runs_hard_limit === "N/A") {
+										setLimit("")
+									} else {
+										setLimit(params.row.app_runs_hard_limit)
+									}
+								}}
+							>
+								<Edit/>
+							</IconButton>
+						</>
+					)
+				}
+			}
 		]
 
 		setSubOrgStatsColumns(columns)
@@ -2913,7 +2941,7 @@ const BillingStatsChildOrg = memo(({ userdata, globalUrl, selectedOrganization,
 			return
 		}
 
-		if (selectedOrganization.sync_features.app_executions.limit <= 10000) {
+		if (selectedOrganization.sync_features.app_executions.limit <= 10000 && editing === "app_executions") {
 			toast.error("Insufficient app execution limit to increase child org limit")
 			return
 		}
@@ -2939,7 +2967,10 @@ const BillingStatsChildOrg = memo(({ userdata, globalUrl, selectedOrganization,
 
 		const org = subOrgs[orgIndex]
 
-		org.sync_features[editing].limit = limit
+		if (editing !== "app_executions_hard_limit") {
+			org.sync_features[editing].limit = limit
+		}
+
 		org.sync_features.editing = true
 		const sync_features = org.sync_features
 		const data = {
@@ -2947,6 +2978,13 @@ const BillingStatsChildOrg = memo(({ userdata, globalUrl, selectedOrganization,
             sync_features: sync_features,
 		}
 
+		if (editing === "app_executions_hard_limit") {
+			data.editing = "app_runs_hard_limit";
+			data.billing = {
+				app_runs_hard_limit: limit || 0
+			};
+		}
+
 		const url = `${globalUrl}/api/v1/orgs/${orgId}`;
 		fetch(url, {
 			method: "POST",
@@ -2974,6 +3012,12 @@ const BillingStatsChildOrg = memo(({ userdata, globalUrl, selectedOrganization,
 								newRows[orgIndex].workflow_usage_limit = limit;
 								return newRows;
 							});
+						}else if (editing === "app_executions_hard_limit") {
+							setSubOrgStatsRows((prevRows) => {
+								const newRows = [...prevRows];
+								newRows[orgIndex].app_runs_hard_limit = limit;
+								return newRows;
+							});
 						}
 					}
 				})
@@ -3087,10 +3131,21 @@ const IncreaseLimitPopUp = memo(({ open, onClose, limit, setLimit, HandleEditLim
 			}
 		}}
 	>
-			<DialogTitle style={{ fontSize: 24, fontWeight: "bold" }}>
+			{editing === "app_executions_hard_limit" ? (
+					<DialogTitle style={{ fontSize: 24, fontWeight: "bold" }}>
+						Add {editing.replaceAll("_", " ").replace(/\b\w/g, c => c.toUpperCase())}
+					</DialogTitle>
+			) : (
+				<DialogTitle style={{ fontSize: 24, fontWeight: "bold" }}>
 				Increase {editing.replaceAll("_", " ").replace(/\b\w/g, c => c.toUpperCase())} Limit
 			</DialogTitle>
+			)}
 			<DialogContent>
+			 {	editing === "app_executions_hard_limit" ? (
+				<Typography style={{  marginRight: 20, marginBottom: 20,  fontSize: 16, color: theme.palette.text.secondary }}>
+					Please note that once you set a hard limit for app runs workflows will not be able to run if the limit is reached. You will be notified by email when you reach the limit.
+				</Typography>
+			) : null}
 			<TextField 
 				value={currentLimit}
 				onChange={(e) => setCurrentLimit(e.target.value)}