Cloud sync fixes

frontend/src/components/Billing.jsx

@@ -2599,40 +2599,50 @@ const Billing = memo((props) => {
 					Utilization & Stats
 				</Typography>
 			</div>
-			 {isChildOrg ? (
-				<BillingStats
-					isCloud={isCloud}
-					clickedFromOrgTab={clickedFromOrgTab}
-					globalUrl={globalUrl}
-					selectedOrganization={selectedOrganization}
-					userdata={userdata}
-				/>
-				): (
-					<span>
+				<span>
 					<Tabs
 					value={currentTab}
-					onChange={(event, newValue) => setCurrentTab(newValue)}
+					onChange={(event, newValue) => {
+						setCurrentTab(-1)
+
+						// Force re-render
+						setTimeout(() => {
+							setCurrentTab(newValue)
+						}, 100);
+					}}
 					style={{ marginTop: 20 }}
 					TabIndicatorProps={{
 						style: {
-						height: 3,
-						backgroundColor: theme.palette.primary.main,
-						marginLeft: 12,
-						marginRight: 12,
+							height: 3,
+							backgroundColor: theme.palette.primary.main,
+							marginLeft: 12,
+							marginRight: 12,
 						}
 					}}
 					>
-					<Tab
-						label="Parent Organization"
-						style={{ textTransform: 'none', fontSize: 16, minWidth: 'auto', paddingLeft: 12, paddingRight: 12 }}
-					/>
-					<Tab
-						label="Child Organization Stats"
-						style={{ textTransform: 'none', fontSize: 16, minWidth: 'auto', paddingLeft: 12, paddingRight: 12 }}
-					/>
+						<Tab
+							label="Parent Organization"
+							style={{ textTransform: 'none',}}
+							value={0}
+						/>
+
+						{isCloud ? 
+							<Tab
+								label="Cloud-Synced Stats"
+								style={{ textTransform: 'none', }}
+								value={1}
+							/>
+						: null}
+
+						<Tab
+							label="Child Organization Stats"
+							disabled={isChildOrg}
+							style={{ textTransform: 'none', }}
+							value={2}
+						/>
 					</Tabs>
 
-					<div style={{paddingBottom: 200, }}>
+					<div style={{paddingBottom: 200, minHeight: 750, }}>
 						{currentTab === 0 ? 
 							<div style={{ marginTop: 30,}}>
 								<BillingStats
@@ -2643,6 +2653,18 @@ const Billing = memo((props) => {
 									userdata={userdata}
 								/>
 							</div>
+						: currentTab === 1 ? 
+							<div style={{ marginTop: 30,}}>
+								<BillingStats
+									isCloud={isCloud}
+									clickedFromOrgTab={clickedFromOrgTab}
+									globalUrl={globalUrl}
+									selectedOrganization={selectedOrganization}
+									userdata={userdata}
+
+									syncStats={true}
+								/>
+							</div>
 						: 
 							<BillingStatsChildOrg
 								isCloud={isCloud}
@@ -2657,8 +2679,7 @@ const Billing = memo((props) => {
 							/>
 						}
 					</div>
-					</span>
-				)}
+				</span>
 			</div>
 		</Wrapper>
 	)