Repacked multiple files with old mui to merge together

frontend/src/components/AppFramework.jsx

@@ -23,13 +23,16 @@ import {
 	Dialog,
 	Chip,
 	Avatar,
+} from "@material-ui/core";
+
+import { 
 	Button 
-} from "@mui/material";
+} from '@material-ui/core';
 
 import {
 	Close as CloseIcon,
   Delete as DeleteIcon,
-} from "@mui/icons-material";
+} from "@material-ui/icons";
 
 import * as edgehandles from "cytoscape-edgehandles";
 import * as cytoscape from "cytoscape";
@@ -1856,6 +1859,7 @@ const AppFramework = (props) => {
 	//autounselectify={true}
 	var usecasediff = -100
 	const bgColor = color === undefined || color === null || color.length === 0 ? theme.palette.surfaceColor : color
+	console.log("Background: ", bgColor)
 
 	return (	
 		<div style={{margin: "auto", backgroundColor: bgColor, position: "relative", }}>
@@ -1996,7 +2000,7 @@ const AppFramework = (props) => {
 						{paperTitle.length > 0 ? 
 							<span>
 								<Typography variant="h6" style={{textAlign: "center"}}>
-									{paperTitle}
+									{paperTitle.replace("_", " ", -1)}
 								</Typography>
 								<Divider style={{marginTop: 5, marginBottom: 5 }} />
 							</span>

frontend/src/components/Appsearch.jsx

@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import theme from '../theme.jsx';
 import ReactGA from 'react-ga4';
+import { useTheme } from '@material-ui/core/styles';
 import {Link} from 'react-router-dom';
 import { useAlert } from "react-alert";
-import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@mui/icons-material';
+import { Search as SearchIcon, CloudQueue as CloudQueueIcon, Code as CodeIcon } from '@material-ui/icons';
 
 //import algoliasearch from 'algoliasearch/lite';
 import algoliasearch from 'algoliasearch';
 import { InstantSearch, connectSearchBox, connectHits } from 'react-instantsearch-dom';
-import { Grid, Paper, TextField, ButtonBase, InputAdornment, Typography, Button, Tooltip} from '@mui/material';
+import { Grid, Paper, TextField, ButtonBase, InputAdornment, Typography, Button, Tooltip} from '@material-ui/core';
 import aa from 'search-insights'
 const searchClient = algoliasearch("JNSS5CFDZZ", "db08e40265e2941b9a7d8f644b6e5240")
 const Appsearch = props => {
@@ -18,6 +18,7 @@ const Appsearch = props => {
   const alert = useAlert();
 	const rowHandler = maxRows === undefined || maxRows === null ? 50 : maxRows
 	const xs = parsedXs === undefined || parsedXs === null ? 12 : parsedXs
+	const theme = useTheme();
 	//const [apps, setApps] = React.useState([]);
 	//const [filteredApps, setFilteredApps] = React.useState([]);
 	const [formMail, setFormMail] = React.useState("");
@@ -69,43 +70,6 @@ const Appsearch = props => {
 			console.log(error);
 		  });
 	  };
-	const submitContact = (email, message) => {
-		const data = {
-			"firstname": "",
-			"lastname": "",
-			"title": "",
-			"companyname": "",
-			"email": email,
-			"phone": "",
-			"message": message,
-		}
-	
-		const errorMessage = "Something went wrong. Please contact frikky@shuffler.io directly."
-
-		fetch(globalUrl+"/api/v1/contact", {
-			method: 'POST',
-			headers: {
-				'Content-Type': 'application/json',
-			},
-			body: JSON.stringify(data),
-		})
-		.then(response => response.json())
-		.then(response => {
-			if (response.success === true) {
-				setFormMessage(response.reason)
-				//alert.info("Thanks for submitting!")
-			} else {
-				setFormMessage(errorMessage)
-			}
-
-			setFormMail("")
-			setMessage("")
-    })
-		.catch(error => {
-			setFormMessage(errorMessage)
-    	console.log(error)
-		});
-	}
 
 	// value={currentRefinement}
 	const SearchBox = ({currentRefinement, refine, isSearchStalled} ) => {

frontend/src/components/EditWorkflow.jsx

@@ -3,6 +3,7 @@ import theme from '../theme.jsx';
 import { isMobile } from "react-device-detect" 
 import ChipInput from "material-ui-chip-input";
 import UsecaseSearch from "../components/UsecaseSearch.jsx"
+import dayjs from 'dayjs';
 
 import {
   Badge,
@@ -37,28 +38,35 @@ import {
 	FormControl,
 	FormLabel,
 
-} from "@mui/material";
+} from "@material-ui/core";
+
+import { 
+	DatePicker, 
+	LocalizationProvider,
+} from '@mui/x-date-pickers'
+
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 
 import {
   ExpandLess as ExpandLessIcon,
   ExpandMore as ExpandMoreIcon,
   Publish as PublishIcon,
   OpenInNew as OpenInNewIcon,
-} from "@mui/icons-material";
+} from "@material-ui/icons";
 
 const EditWorkflow = (props) => {
 	const { globalUrl, workflow, setWorkflow, modalOpen, setModalOpen, showUpload, usecases, setNewWorkflow, appFramework, isEditing, userdata, } = props
 
+  const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove
   const [submitLoading, setSubmitLoading] = React.useState(false);
   const [showMoreClicked, setShowMoreClicked] = React.useState(false);
 	const [innerWorkflow, setInnerWorkflow] = React.useState(workflow)
-  const [_, setUpdate] = React.useState(""); // Used for rendering, don't remove
   const [newWorkflowTags, setNewWorkflowTags] = React.useState(workflow.tags !== undefined && workflow.tags !== null ? JSON.parse(JSON.stringify(workflow.tags)) : [])
   const [selectedUsecases, setSelectedUsecases] = React.useState(workflow.usecase_ids !== undefined && workflow.usecase_ids !== null ? JSON.parse(JSON.stringify(workflow.usecase_ids)) : []);
 	const [foundWorkflowId, setFoundWorkflowId] = React.useState("")
 	const [name, setName] = React.useState(workflow.name !== undefined ? workflow.name : "")
 	const [description, setDescription] = React.useState(workflow.description !== undefined ? workflow.description : "")
-
+	const [dueDate, setDueDate] = React.useState(workflow.due_date !== undefined && workflow.due_date !== null && workflow.due_date !== 0 ? dayjs(workflow.due_date*1000) : dayjs().subtract(1, 'day'))
 
 	// Gets the generated workflow 
 	const getGeneratedWorkflow = (workflow_id) => {
@@ -231,24 +239,26 @@ const EditWorkflow = (props) => {
           	  autoFocus
           	  fullWidth
           	/>
-          	<TextField
+			<div style={{display: "flex", }}>
-          	  onBlur={(event) => {
+				<TextField
-								setDescription(event.target.value)
+				  onBlur={(event) => {
-							}}
+					setDescription(event.target.value)
-          	  InputProps={{
+				  }}
-          	    style: {
+				  InputProps={{
-          	      color: "white",
+					style: {
-          	    },
+					  color: "white",
-          	  }}
+					},
-							maxRows={4}
+				  }}
-          	  color="primary"
+				  maxRows={4}
-          	  defaultValue={innerWorkflow.description}
+				  color="primary"
-          	  placeholder="Description"
+				  defaultValue={innerWorkflow.description}
-          	  multiline
+				  placeholder="Description"
-							label="Description"
+				  multiline
-          	  margin="dense"
+				  label="Description"
-          	  fullWidth
+				  margin="dense"
-          	/>
+				  fullWidth
+				/>
+			</div>
 						<div style={{display: "flex", marginTop: 10, }}>
 							<ChipInput
 								style={{ flex: 1, maxHeight: 40, marginTop: 12, overflow: "auto",  }}
@@ -266,8 +276,10 @@ const EditWorkflow = (props) => {
 									setNewWorkflowTags(newWorkflowTags);
 								}}
 								onDelete={(chip, index) => {
+									console.log("Deleting: ", chip, index)
 									newWorkflowTags.splice(index, 1);
 									setNewWorkflowTags(newWorkflowTags);
+									setUpdate(Math.random());
 								}}
 							/>
 							{usecases !== null && usecases !== undefined && usecases.length > 0 ? 
@@ -328,26 +340,41 @@ const EditWorkflow = (props) => {
 
   					{showMoreClicked === true ? 
 							<span style={{marginTop: 25, }}>
+								<div style={{display: "flex"}}>
+									<FormControl style={{marginTop: 15, }}>
+										<FormLabel id="demo-row-radio-buttons-group-label">Status</FormLabel>
+											<RadioGroup
+												row
+												aria-labelledby="demo-row-radio-buttons-group-label"
+												name="row-radio-buttons-group"
+												defaultValue={innerWorkflow.status}
+												onChange={(e) => {
+													console.log("Data: ", e.target.value)
+													
+													innerWorkflow.workflow_type = e.target.value
+													setInnerWorkflow(innerWorkflow)
+												}}
+											>
+												<FormControlLabel value="test" control={<Radio />} label="Test" />
+												<FormControlLabel value="production" control={<Radio />} label="Production" />
 
-								<FormControl style={{marginTop: 15, }}>
+											</RadioGroup>
-									<FormLabel id="demo-row-radio-buttons-group-label">Status</FormLabel>
+									</FormControl>
-										<RadioGroup
+									<LocalizationProvider dateAdapter={AdapterDayjs}>
-											row
+										<DatePicker 
-											aria-labelledby="demo-row-radio-buttons-group-label"
+											sx={{
-											name="row-radio-buttons-group"
+												marginTop: 3, 
-											defaultValue={innerWorkflow.status}
+												marginLeft: 3, 
-											onChange={(e) => {
-												console.log("Data: ", e.target.value)
-												
-												innerWorkflow.workflow_type = e.target.value
-												setInnerWorkflow(innerWorkflow)
 											}}
-										>
+											value={dueDate} 
-											<FormControlLabel value="test" control={<Radio />} label="Test" />
+											label="Due Date"
-											<FormControlLabel value="production" control={<Radio />} label="Production" />
+											format="YYYY-MM-DD"
-
+											onChange={(newValue) => {
-										</RadioGroup>
+												setDueDate(newValue)
-								</FormControl>
+											}}
+										/>
+									</LocalizationProvider>
+								</div>
 								<div />
 
 								<FormControl style={{marginTop: 15, }}>
@@ -430,38 +457,27 @@ const EditWorkflow = (props) => {
 							</span>
 						: null}
           	<Tooltip color="primary" title={"Add more details"} placement="top">
-							<IconButton
+				<IconButton
-								style={{ color: "white", margin: "auto", marginTop: 10, textAlign: "center", width: 50,}}
+					style={{ color: "white", margin: "auto", marginTop: 10, textAlign: "center", width: 50,}}
-								onClick={() => {
+					onClick={() => {
-									setShowMoreClicked(!showMoreClicked);
+						setShowMoreClicked(!showMoreClicked);
-								}}
+					}}
-							>
+				>
-								{showMoreClicked ? <ExpandLessIcon /> : <ExpandMoreIcon/>}
+					{showMoreClicked ? <ExpandLessIcon /> : <ExpandMoreIcon/>}
-							</IconButton>
+				</IconButton>
-						</Tooltip>
+			</Tooltip>
-					</div>
+		</div>
-					{/*newWorkflow === true ? 
+
-						<div style={{marginLeft: 50, maxWidth: 400, minWidth: 400, position: "relative",}}>
-							<UsecaseSearch
-								globalUrl={globalUrl}
-								appFramework={appFramework}
-								defaultSearch={undefined}
-								apps={undefined}
-								setFoundWorkflowId={setFoundWorkflowId} 
-								userdata={userdata}
-							/>
-						</div>
-					: null*/}
         </DialogContent>
         <DialogActions>
           <Button
             style={{}}
             onClick={() => {
-							if (setNewWorkflow !== undefined) {
+				if (setNewWorkflow !== undefined) {
-								setWorkflow({})
+					setWorkflow({})
-							}
+				}
 
-							setModalOpen(false)
+				setModalOpen(false)
             }}
             color="primary"
           >
@@ -482,6 +498,9 @@ const EditWorkflow = (props) => {
 								innerWorkflow.usecase_ids = selectedUsecases
 							}
 
+							if (dueDate > 0) {
+								innerWorkflow.due_date = new Date(`${dueDate["$y"]}-${dueDate["$M"]+1}-${dueDate["$D"]}`).getTime()/1000
+							}
 
 							if (setNewWorkflow !== undefined) {
 								setNewWorkflow(

frontend/src/components/Files.jsx

@@ -15,7 +15,7 @@ import {
 	Divider,
 	Select,
 	MenuItem,
-} from "@mui/material";
+} from "@material-ui/core";
 
 import {
   OpenInNew as OpenInNewIcon,
@@ -27,7 +27,7 @@ import {
   Publish as PublishIcon,
 	Clear as ClearIcon,
 	Add as AddIcon,
-} from "@mui/icons-material";
+} from "@material-ui/icons";
 
 import { useAlert } from "react-alert";
 import Dropzone from "../components/Dropzone.jsx";
@@ -681,7 +681,7 @@ const Files = (props) => {
 									<ListItemText
 										primary=<span style={{ display:"inline"}}>
 											<Tooltip
-												title={`Edit File (${allowedFileTypes.join(", ")})`}
+												title={`Edit File (${allowedFileTypes.join(", ")}). Max size 2MB`}
 												style={{}}
 												aria-label={"Edit"}
 											>

frontend/src/components/Header.jsx

@@ -1,8 +1,8 @@
 import React, {useState} from 'react';
 import {BrowserView, MobileView} from "react-device-detect";
-import theme from '../theme.jsx';
+import { useTheme } from '@material-ui/core/styles';
 
-import {Link} from 'react-router-dom';
+import { useNavigate, Link } from "react-router-dom";
 import ReactGA from 'react-ga4';
 
 import {
@@ -21,7 +21,7 @@ import {
 	IconButton,
 	Divider,
 	LinearProgress, 
-} from '@mui/material';
+} from '@material-ui/core'
 
 import { 
 	MeetingRoom as MeetingRoomIcon, 
@@ -34,9 +34,12 @@ import {
 	Description as DescriptionIcon,
 	EmojiObjects as EmojiObjectsIcon,
   Business as BusinessIcon,
+} from '@material-ui/icons';
+
+import {
 	Analytics as AnalyticsIcon,
 	Lightbulb as LightbulbIcon,
-} from '@mui/icons-material';
+} from "@mui/icons-material";
 
 import { useAlert } from "react-alert";
 
@@ -46,6 +49,7 @@ const hoverOutColor = "#e8eaf6"
 
 const Header = props => {
 const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, homePage, userdata, serverside, } = props;
+	const theme = useTheme();
 	const alert = useAlert()
 
 
@@ -57,6 +61,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [anchorElAvatar, setAnchorElAvatar] = React.useState(null);
   const [subAnchorEl, setSubAnchorEl] = React.useState(null);
+  let navigate = useNavigate();
 
 
   const handleClick = (event) => {
@@ -688,7 +693,7 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 										{/*
 										<PolymerIcon style={{marginRight: "5px"}} />
 										*/}
-										<Typography style={{marginTop: 5, marginRight: 8, }}>Workflows</Typography>
+										<span style={{marginTop: 0, marginRight: 8, }}>Workflows</span>
 									</div> 
 								</Link>
       	 			</ListItem>
@@ -698,17 +703,24 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 											{/*
 											<AppsIcon style={{marginRight: "5px"}} />
 											*/}
-											<Typography style={{marginTop: 5, marginRight: 5,  }}>Apps</Typography>
+											<span style={{marginTop: 0, marginRight: 5,  }}>Apps</span>
 										</div>
 								</Link>
       	 			</ListItem>
+							{/*
+							<ListItem style={{textAlign: "center"}}>
+								<Link to="/dashboard" style={hrefStyle}>
+										<div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer"}}>Dashboard</div> 
+								</Link>
+      	 			</ListItem>
+							*/}
       	 			<ListItem style={listItemStyle}>
 								<Link to="/docs" style={hrefStyle}>
 										<div onMouseOver={handleDocsHover} onMouseOut={handleDocsHoverOut} style={{color: DocsHoverColor, cursor: "pointer", display: "flex"}}>
 											{/*
 											<DescriptionIcon style={{marginRight: "5px"}} />
 											*/}
-											<Typography style={{marginTop: 5,}}>Docs</Typography>
+											<span style={{marginTop: 0,}}>Docs</span>
 										</div>
 								</Link>
       	 			</ListItem>
@@ -782,14 +794,13 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 								</ListItem>
 						: null*/}
 
-						
-
 						{userdata === undefined || userdata.orgs === undefined || userdata.orgs === null || userdata.orgs.length <= 1 ? 
 							null
 						:
 							<span style={{paddingTop: 12, }}>
 								<Select
-									disableunderline
+
+									disableUnderline
 									SelectDisplayProps={{
 										style: {
 											maxWidth: 50,
@@ -883,13 +894,32 @@ const { globalUrl, setNotifications, notifications, isLoggedIn, removeCookie, ho
 							</span>
 							}
 
+						{/* Show on cloud, if not suborg and if not customer/pov/internal */}
+						{isCloud && (userdata.org_status === undefined || userdata.org_status === null || userdata.org_status.length === 0) ? 
+							<ListItem style={{textAlign: "center", marginLeft: 0, marginRight: 7, marginTop: 3, }}>
+								<Link to ="/pricing?tab=cloud&highlight=true" style={hrefStyle}>
+									<Button variant="contained" color="primary" style={{textTransform: "none"}} onClick={() => {
+										ReactGA.event({
+											category: "header",
+											action: "pricing_upgrade_click",
+											label: "",
+										})
+									}}>
+										Upgrade	
+									</Button>
+								</Link>
+							</ListItem>
+						: null}
+
 						{userdata === undefined || userdata.app_execution_limit === undefined || userdata.app_execution_usage === undefined || userdata.app_execution_usage < 1000 ? 
 							null
 							:
 							<Tooltip title={`Amount of executions left: ${userdata.app_execution_usage} / ${userdata.app_execution_limit}. When the limit is reached, you can still use Shuffle normally, but your Workflow triggers may stop working. Reach out to support@shuffler.io to extend this limit.`}>
-								<div style={{maxHeight: 30, minHeight: 30, padding: 8, textAlign: "center", cursor: "pointer", borderRadius: theme.palette.borderRadius, marginRight: 10, marginTop: 12, backgroundColor: theme.palette.surfaceColor, minWidth: 60, maxWidth: 60,  }} onClick={() => {
+								<div style={{maxHeight: 30, minHeight: 30, padding: 8, textAlign: "center", cursor: "pointer", borderRadius: theme.palette.borderRadius, marginRight: 10, marginTop: 12, backgroundColor: theme.palette.surfaceColor, minWidth: 60, maxWidth: 60, border: userdata.app_execution_usage/userdata.app_execution_limit >= 0.9 ? "#f86a3e" : null, }} onClick={() => {
+										console.log(userdata.appe_execution_usage/userdata.app_execution_limit)
 										if (window.drift !== undefined) {
 											window.drift.api.startInteraction({ interactionId: 326905 })
+											navigate("/pricing")
 										} else {
 											console.log("Couldn't find drift in window.drift and not .drift-open-chat with querySelector: ", window.drift)
 										}

frontend/src/components/Oauth2Auth.jsx

@@ -1,5 +1,6 @@
 import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
 import { useParams, useNavigate, Link } from "react-router-dom";
+import { useTheme } from "@material-ui/core/styles";
 import theme from '../theme.jsx';
 import { useAlert } from "react-alert";
 
@@ -36,8 +37,8 @@ import {
   Breadcrumbs,
   CircularProgress,
   Switch,
-  Collapse,
+  Fade,
-} from "@mui/material";
+} from "@material-ui/core";
 import { 
 	LockOpen as LockOpenIcon,
 	SupervisorAccount as SupervisorAccountIcon,
@@ -70,6 +71,7 @@ const registeredApps = [
 	"todoist",
 	"microsoft_sentinel",
 	"microsoft_365_defender",
+	"google_chat",
 	"google_sheets",
 	"google_drive",
 	"google_disk",
@@ -260,6 +262,16 @@ const AuthenticationOauth2 = (props) => {
 				admin_consent,
 				"consent",
 			)
+		} else if (selectedApp.name.toLowerCase().includes("google_chat") || selectedApp.name.toLowerCase().includes("google_hangout")) {
+			handleOauth2Request(
+				"253565968129-6pij4g6ojim4gpum0h9m9u3bc357qsq7.apps.googleusercontent.com",
+				"",
+				"https://www.googleapis.com",
+				["https://www.googleapis.com/auth/chat.messages",],
+				admin_consent,
+				"consent",
+			)
+
 		} else if (selectedApp.name.toLowerCase().includes("jira_service_desk") || selectedApp.name.toLowerCase().includes("jira") || selectedApp.name.toLowerCase().includes("jira_service_management")) {
 			handleOauth2Request(
 				"AI02egeCQh1Zskm1QAJaaR6dzjR97V2F",

frontend/src/components/OrgHeader.jsx

@@ -1,23 +1,17 @@
 import React, { useEffect } from "react";
-import theme from '../theme.jsx';
+import { makeStyles } from "@material-ui/styles";
-import { makeStyles } from "@mui/styles";
+import { useTheme } from "@material-ui/core/styles";
-
-import {
-	Tooltip,
-	Grid, 
-	Button, 
-	TextField,
-	Typography, 
-	IconButton,
-} from "@mui/material";
 
+import Tooltip from "@material-ui/core/Tooltip";
+import Grid from "@material-ui/core/Grid";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
 import { useAlert } from "react-alert";
-
+import IconButton from "@material-ui/core/IconButton";
-import {
+import ExpandLessIcon from "@material-ui/icons/ExpandLess";
-	ExpandLess as ExpandLessIcon,
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
-	ExpandMore as ExpandMoreIcon, 
+import SaveIcon from "@material-ui/icons/Save";
-	Save as SaveIcon, 
-} from "@mui/icons-material";
 
 const useStyles = makeStyles({
   notchedOutline: {
@@ -39,6 +33,7 @@ const OrgHeader = (props) => {
   	handleEditOrg, 
   } = props;
 
+  const theme = useTheme();
   const alert = useAlert();
   const classes = useStyles();
 
@@ -101,10 +96,9 @@ const OrgHeader = (props) => {
   //console.log("USER: ", userdata)
   const orgSaveButton = (
     <Tooltip title="Save any unsaved data" placement="bottom">
-	  <div>
       <Button
         style={{ width: 150, height: 55, flex: 1 }}
-        variant="contained"
+        variant="outlined"
         color="primary"
         disabled={
           userdata === undefined || userdata === null || userdata.admin !== "true"
@@ -123,7 +117,6 @@ const OrgHeader = (props) => {
       >
         <SaveIcon />
       </Button>
-	  </div>
     </Tooltip>
   );
 

frontend/src/components/Priorities.jsx

@@ -9,13 +9,13 @@ import {
 	Grid,
 	Card,
   Switch,
-} from "@mui/material";
+} from "@material-ui/core";
 
 import Priority from "../components/Priority.jsx";
 import { useAlert } from "react-alert";
 
 const Priorities = (props) => {
-  const { globalUrl, userdata, serverside, billingInfo, stripeKey, checkLogin, } = props;
+  const { globalUrl, userdata, serverside, billingInfo, stripeKey, checkLogin, setAdminTab, setCurTab, } = props;
   const [showDismissed, setShowDismissed] = React.useState(false);
   const [showRead, setShowRead] = React.useState(false);
 
@@ -60,6 +60,8 @@ const Priorities = (props) => {
 							globalUrl={globalUrl}
 							priority={priority}
 							checkLogin={checkLogin}
+							setAdminTab={setAdminTab}
+							setCurTab={setCurTab}
 						/>
 					)
 				})

frontend/src/components/Priority.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 
+import ReactGA from 'react-ga4';
 import theme from "../theme.jsx";
 import { useNavigate, Link } from "react-router-dom";
 import {
@@ -9,7 +10,7 @@ import {
 	Button,
 	Grid,
 	Card,
-} from "@mui/material";
+} from "@material-ui/core";
 
 // import magic wand icon from material ui icons 
 import {
@@ -19,9 +20,10 @@ import {
 import { useAlert } from "react-alert";
 
 const Priority = (props) => {
-  const { globalUrl, userdata, serverside, priority, checkLogin, } = props;
+  const { globalUrl, userdata, serverside, priority, checkLogin, setAdminTab, setCurTab, } = props;
 
 
+  	const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
 	let navigate = useNavigate();
 	const changeRecommendation = (recommendation, action) => {
     const data = {
@@ -101,14 +103,27 @@ const Priority = (props) => {
 			</div>
 			<div style={{flex: 1, display: "flex", marginLeft: 30, }}>
 				<Button style={{height: 50, borderRadius: 25,  marginTop: 8, width: 175, marginRight: 10, color: priority.active === false ? "white" : "black", backgroundColor: priority.active === false ? theme.palette.inputColor : "white", }} variant="contained" color="secondary" onClick={() => {
-					/*
+
-					ReactGA.event({
+					if (isCloud) {
-						category: "",
+						ReactGA.event({
-						action: `partner_${partner.name}_click`,
+							category: "recommendation",
-						label: "",
+							action: `click_${priority.name}`,
-					})
+							label: "",
-					*/
+						})
+					}
+
 					navigate(priority.url)
+
+					if (setAdminTab !== undefined && setCurTab !== undefined) {
+						if (priority.description.toLowerCase().includes("notification workflow")) {
+							setCurTab(0)
+							setAdminTab(0)
+						}
+
+						if (priority.description.toLowerCase().includes("hybrid shuffle")) {
+							setCurTab(6)
+						}
+					}
 				}}>
 					explore		
 				</Button>

frontend/src/views/Admin.jsx

@@ -1,9 +1,16 @@
 import React, { useState, useEffect } from "react";
 
-import { useNavigate, } from "react-router-dom";
+import { makeStyles } from "@material-ui/styles";
+import { useNavigate, Link } from "react-router-dom";
+import countries from "../components/Countries.jsx";
+import CodeEditor from "../components/ShuffleCodeEditor.jsx";
+import getLocalCodeData from "../components/ShuffleCodeEditor.jsx";
 import CacheView from "../components/CacheView.jsx";
 import theme from "../theme.jsx";
-
+import AddIcon from "@mui/icons-material/Add";
+import ClearIcon from '@mui/icons-material/Clear';
+import StorageIcon from '@mui/icons-material/Storage';
+//import ToggleButton from '@mui/material/ToggleButton';
 import {
   FormControl,
   InputLabel,
@@ -12,6 +19,7 @@ import {
   Checkbox,
   Card,
   Tooltip,
+  FormControlLabel,
   Typography,
   Switch,
   Select,
@@ -27,6 +35,7 @@ import {
   ListItem,
   ListItemText,
   ListItemAvatar,
+  ListItemSecondaryAction,
   IconButton,
   Avatar,
   Zoom,
@@ -35,38 +44,54 @@ import {
   DialogActions,
   DialogContent,
   CircularProgress,
-  InputAdornment,
+  Box,
-} from "@mui/material";
+	InputAdornment,
+} from "@material-ui/core";
+
+import { Autocomplete } from "@mui/material";
 
 import {
   Edit as EditIcon,
   FileCopy as FileCopyIcon,
   SelectAll as SelectAllIcon,
+  OpenInNew as OpenInNewIcon,
+  CloudDownload as CloudDownloadIcon,
   Description as DescriptionIcon,
-  Code as CodeIcon,
+  Polymer as PolymerIcon,
   CheckCircle as CheckCircleIcon,
   Close as CloseIcon,
   Apps as AppsIcon,
+  Image as ImageIcon,
   Delete as DeleteIcon,
   Cached as CachedIcon,
   AccessibilityNew as AccessibilityNewIcon,
   Lock as LockIcon,
+  Eco as EcoIcon,
   Schedule as ScheduleIcon,
+  Cloud as CloudIcon,
   Business as BusinessIcon,
-  Visibility as VisibilityIcon,
+	Visibility as VisibilityIcon,
-  VisibilityOff as VisibilityOffIcon,
+	VisibilityOff as VisibilityOffIcon,
-	Storage as StorageIcon, 
+} from "@material-ui/icons";
-} from "@mui/icons-material";
 
 import { useAlert } from "react-alert";
+import Dropzone from "../components/Dropzone.jsx";
+import HandlePaymentNew from "../views/HandlePaymentNew.jsx";
 import OrgHeader from "../components/OrgHeader.jsx";
 import OrgHeaderexpanded from "../components/OrgHeaderexpanded.jsx";
 import Billing from "../components/Billing.jsx";
 import Priorities from "../components/Priorities.jsx";
 import Branding from "../components/Branding.jsx";
 import Files from "../components/Files.jsx";
+import { display, style } from "@mui/system";
 //import EnvironmentStats from "../components/EnvironmentStats.jsx";
 
+const useStyles = makeStyles({
+  notchedOutline: {
+    borderColor: "#f85a3e !important",
+  },
+});
+
 const ITEM_HEIGHT = 48;
 const ITEM_PADDING_TOP = 8;
 const MenuProps = {
@@ -79,10 +104,37 @@ const MenuProps = {
   getContentAnchorEl: () => null,
 };
 
+
+const FileCategoryInput = (props) => {
+  const isSet = props.isSet;
+  console.log("inside filecategoryinput");  
+  console.log("isset value" , isSet);
+  if (isSet){
+    return (
+        <TextField
+              onBlur={""}
+              InputProps={{
+                style: {
+                  color: "white",
+                },
+              }}
+              color="primary"
+              placeholder="File category name"
+              required
+              margin="dense"
+              defaultValue={""}
+              autoFocus
+              fullWidth
+            />
+    )}
+  }
+
+
 const Admin = (props) => {
   const { globalUrl, userdata, serverside, checkLogin } = props;
 
   var to_be_copied = "";
+  const classes = useStyles();
   let navigate = useNavigate();
 
   const [firstRequest, setFirstRequest] = React.useState(true);
@@ -98,9 +150,11 @@ const Admin = (props) => {
   const [selectedOrganization, setSelectedOrganization] = React.useState({});
     
   //console.log("Selected: ", selectedOrganization)
+  const [organizationFeatures, setOrganizationFeatures] = React.useState({});
   const [loginInfo, setLoginInfo] = React.useState("");
   const [curTab, setCurTab] = React.useState(0);
   const [users, setUsers] = React.useState([]);
+  const [organizations, setOrganizations] = React.useState([]);
   const [orgSyncResponse, setOrgSyncResponse] = React.useState("");
   const [userSettings, setUserSettings] = React.useState({});
   const [matchingOrganizations, setMatchingOrganizations] = React.useState([]);
@@ -116,21 +170,30 @@ const Admin = (props) => {
   const [selectedAuthenticationModalOpen, setSelectedAuthenticationModalOpen] = React.useState(false);
   const [authenticationFields, setAuthenticationFields] = React.useState([]);
   const [showArchived, setShowArchived] = React.useState(false);
+  const [isDropzone, setIsDropzone] = React.useState(false);
 
   const [image2FA, setImage2FA] = React.useState("");
   const [value2FA, setValue2FA] = React.useState("");
   const [secret2FA, setSecret2FA] = React.useState("");
   const [show2faSetup, setShow2faSetup] = useState(false);
-  const [billingInfo, ] = React.useState({});
 
   const [adminTab, setAdminTab] = React.useState(2);
-  const [showApiKey, setShowApiKey] = useState(false);
+	const [showApiKey, setShowApiKey] = useState(false);
-  const [selectedStatus, setSelectedStatus] = React.useState([]);
+  const [billingInfo, setBillingInfo] = React.useState({});
+	const [selectedStatus, setSelectedStatus] = React.useState([]);
 
   useEffect(() => {
-    getUsers()
+		getUsers()
   }, []);
 
+
+  useEffect(() => {
+    if (isDropzone) {
+      //redirectOpenApi();
+      setIsDropzone(false);
+    }
+  }, [isDropzone]);
+
   const isCloud = window.location.host === "localhost:3002" || window.location.host === "shuffler.io";
 
   const get2faCode = (userId) => {
@@ -162,7 +225,39 @@ const Admin = (props) => {
       });
   };
 
-  
+  const getApps = () => {
+    fetch(globalUrl + "/api/v1/apps", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      credentials: "include",
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          console.log("Status not 200 for apps :O!");
+        }
+
+        return response.json();
+      })
+      .then((responseJson) => {
+        console.log("apps: ", responseJson);
+        //setApps(responseJson)
+        //setFilteredApps(responseJson)
+        //if (responseJson.length > 0) {
+        //	setSelectedApp(responseJson[0])
+        //	if (responseJson[0].actions !== null && responseJson[0].actions.length > 0) {
+        //		setSelectedAction(responseJson[0].actions[0])
+        //	} else {
+        //		setSelectedAction({})
+        //	}
+        //}
+      })
+      .catch((error) => {
+        alert.error(error.toString());
+      });
+  };
 
   const categories = [
     {
@@ -191,19 +286,22 @@ const Admin = (props) => {
 	]
 	*/
 
-  const alert = useAlert();
+  	const alert = useAlert();
 	const handleStatusChange = (event) => {
 		const { value } = event.target;
+		console.log("value: ", value)
 
 		setSelectedStatus(value);
-  	handleEditOrg(
+
+		
+		handleEditOrg(
 			"",
 			"",
 			selectedOrganization.id,
 			"",
 			{},
 			{},
-			value,
+			value.length === 0 ? ["none"] : value,
 		)	
 	}
 
@@ -235,67 +333,66 @@ const Admin = (props) => {
 
 		if (org.security_framework !== undefined && org.security_framework !== null) {
 			if (org.security_framework.cases.name !== undefined && org.security_framework.cases.name !== null && org.security_framework.cases.name !== "") {
-				your_apps += org.security_framework.cases.name.replace("_", " ", -1) + ", "
+				your_apps += org.security_framework.cases.name.replace("_", " ", -1).replace(" API", "", -1) + ", "
 
 				if (subject_add < 2) {
 					if (subject_add === 1) {
-						subject += " & "
+						subject += " and "
 					}
 
 					subject_add += 1 
-					subject += org.security_framework.cases.name.replace("_", " ", -1) 
+					subject += org.security_framework.cases.name.replace("_", " ", -1).replace(" API", "", -1) 
 				}
 			}
 
 			if (org.security_framework.siem.name !== undefined && org.security_framework.siem.name !== null && org.security_framework.siem.name !== "") {
-				your_apps += org.security_framework.siem.name.replace("_", " ", -1) + ", "
+				your_apps += org.security_framework.siem.name.replace("_", " ", -1).replace(" API", "", -1) + ", "
-
 				if (subject_add < 2) {
 					if (subject_add === 1) {
-						subject += " & "
+						subject += " and "
 					}
 
 					subject_add += 1 
-					subject += org.security_framework.siem.name.replace("_", " ", -1)
+					subject += org.security_framework.siem.name.replace("_", " ", -1).replace(" API", "", -1)
 				}
 			}
 
 			if (org.security_framework.communication.name !== undefined && org.security_framework.communication.name !== null && org.security_framework.communication.name !== "") {
-				your_apps += org.security_framework.communication.name.replace("_", " ", -1) + ", "
+				your_apps += org.security_framework.communication.name.replace("_", " ", -1).replace(" API", "", -1) + ", "
 
 				if (subject_add < 2) {
 					if (subject_add === 1) {
-						subject += " & "
+						subject += " and "
 					}
 
 					subject_add += 1 
-					subject += org.security_framework.communication.name.replace("_", " ", -1)
+					subject += org.security_framework.communication.name.replace("_", " ", -1).replace(" API", "", -1)
 				}
 			}
 
 			if (org.security_framework.edr.name !== undefined && org.security_framework.edr.name !== null && org.security_framework.edr.name !== "") {
-				your_apps += org.security_framework.edr.name.replace("_", " ", -1) + ", "
+				your_apps += org.security_framework.edr.name.replace("_", " ", -1).replace(" API", "", -1) + ", "
 
 				if (subject_add < 2) {
 					if (subject_add === 1) {
-						subject += " & "
+						subject += " and "
 					}
 
 					subject_add += 1 
-					subject += org.security_framework.edr.name.replace("_", " ", -1)
+					subject += org.security_framework.edr.name.replace("_", " ", -1).replace(" API", "", -1)
 				}
 			}
 
 			if (org.security_framework.intel.name !== undefined && org.security_framework.intel.name !== null && org.security_framework.intel.name !== "") {
-				your_apps += org.security_framework.intel.name.replace("_", " ", -1) + ", "
+				your_apps += org.security_framework.intel.name.replace("_", " ", -1).replace(" API", "", -1) + ", "
 
 				if (subject_add < 2) {
 					if (subject_add === 1) {
-						subject += " & "
+						subject += " and "
 					}
 
 					subject_add += 1 
-					subject += org.security_framework.intel.name.replace("_", " ", -1)
+					subject += org.security_framework.intel.name.replace("_", " ", -1).replace(" API", "", -1)
 				}
 			}
 
@@ -363,7 +460,7 @@ ${usecases}
 
 Let me know if you're interested, or set up a call here: https://drift.me/${username}`
 
-		return `mailto:${admins}?bcc=frikky@shuffler.io&subject=${subject}&body=${body}`
+		return `mailto:${admins}?bcc=frikky@shuffler.io,binu@shuffler.io&subject=${subject}&body=${body}`
 	}
 
   const deleteAuthentication = (data) => {
@@ -578,6 +675,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
         } else if (!responseJson.success) {
           alert.error("Failed to handle sync.");
         } else {
+          getOrgs();
           if (disableSync) {
             alert.success("Successfully disabled sync!");
             setOrgSyncResponse("Successfully disabled syncronization");
@@ -900,22 +998,26 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 							leads.push("internal")
 						}
 
+						if (responseJson.lead_info.sub_org) {
+							leads.push("sub_org")
+						}
+
 						setSelectedStatus(leads)
 					}
 
           setSelectedOrganization(responseJson)
-          //var lists = {
+          var lists = {
-          //  active: {
+            active: {
-          //    triggers: [],
+              triggers: [],
-          //    features: [],
+              features: [],
-          //    sync: [],
+              sync: [],
-          //  },
+            },
-          //  inactive: {
+            inactive: {
-          //    triggers: [],
+              triggers: [],
-          //    features: [],
+              features: [],
-          //    sync: [],
+              sync: [],
-          //  },
+            },
-          //};
+          };
 
           // FIXME: Set up features
           //Object.keys(responseJson.sync_features).map(function(key, index) {
@@ -924,7 +1026,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 
           //setOrgName(responseJson.name)
           //setOrgDescription(responseJson.description)
-          //setOrganizationFeatures(lists);
+          setOrganizationFeatures(lists);
         }
       })
       .catch((error) => {
@@ -1017,7 +1119,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
     alert.info("Setting default env to " + environment.name);
     var newEnv = [];
     for (var key in environments) {
-      if (environments[key].id === environment.id) {
+      if (environments[key].id == environment.id) {
         if (environments[key].archived) {
           alert.error("Can't set archived to default");
           return;
@@ -1025,7 +1127,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 
         environments[key].default = true;
       } else if (
-        environments[key].default === true &&
+        environments[key].default == true &&
         environments[key].id !== environment.id
       ) {
         environments[key].default = false;
@@ -1065,6 +1167,33 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
       });
   };
 
+  const flushQueue = (name) => {
+    // Just use this one?
+    const url = globalUrl + "/api/v1/flush_queue";
+    fetch(url, {
+      method: "DELETE",
+      credentials: "include",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    })
+      .then((response) =>
+        response.json().then((responseJson) => {
+          if (responseJson["success"] === false) {
+            alert.error(responseJson.reason);
+            getEnvironments();
+          } else {
+            setLoginInfo("");
+            setModalOpen(false);
+            getEnvironments();
+          }
+        })
+      )
+      .catch((error) => {
+        console.log("Error when deleting: ", error);
+      });
+  };
+
   const rerunCloudWorkflows = (environment) => {
 		alert.info("Starting execution reruns. This can run in the background.") 
     fetch(
@@ -1154,7 +1283,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
     //alert.info("Modifying environment " + environment.Name)
     var newEnv = [];
     for (var key in environments) {
-      if (environments[key].id === id) {
+      if (environments[key].id == id) {
         if (environments[key].default) {
           alert.error("Can't modify the default environment");
           return;
@@ -1233,6 +1362,9 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
       });
   };
 
+  var localData = "";
+
+
   const getSchedules = () => {
     fetch(globalUrl + "/api/v1/workflows/schedules", {
       method: "GET",
@@ -1314,6 +1446,34 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
       });
   };
 
+  const getOrgs = () => {
+    // API no longer in use, as it's in handleInfo request
+    return;
+
+    fetch(globalUrl + "/api/v1/orgs", {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+      },
+      credentials: "include",
+    })
+      .then((response) => {
+        if (response.status !== 200) {
+          console.log("Status not 200 for apps :O!");
+          return;
+        }
+
+        return response.json();
+      })
+      .then((responseJson) => {
+        setOrganizations(responseJson);
+      })
+      .catch((error) => {
+        alert.error(error.toString());
+      });
+  };
+
   const getUsers = () => {
     fetch(globalUrl + "/api/v1/getusers", {
       method: "GET",
@@ -1406,8 +1566,8 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
       document.title = "Shuffle - admin - environments";
       getEnvironments();
     } else if (newValue === 7) {
-      //getOrgs();
       document.title = "Shuffle - admin - orgs";
+      getOrgs();
     } else {
       document.title = "Shuffle - admin";
     }
@@ -1423,6 +1583,8 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
   if (firstRequest) {
     setFirstRequest(false);
     document.title = "Shuffle - admin";
+
+    getEnvironments();
     if (!isCloud) {
       getUsers();
     } else {
@@ -1909,6 +2071,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                   maxHeight: 200,
                   maxWidth: 200,
                   minWidth: 200,
+                  maxWidth: 200,
                 }}
               />
             ) : (
@@ -2036,7 +2199,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
       primary: "Workflows",
       secondary: "",
       active: true,
-      icon: <CodeIcon style={{ color: itemColor }} />,
+      icon: <PolymerIcon style={{ color: itemColor }} />,
     },
     {
       primary: "Apps",
@@ -2188,25 +2351,40 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
           </div>
         ) : (
           <div>
+						{/*
+						<Tooltip
+              title={"Go to Organization document"}
+              style={{}}
+              aria-label={"Organization doc"}
+            >
+              <IconButton
+                style={{ top: -10, right: 50, position: "absolute" }}
+                onClick={() => {
+									console.log("Should go to icon")
+                }}
+              >
+                <FileCopyIcon style={{ color: "rgba(255,255,255,0.8)" }} />
+              </IconButton>
+            </Tooltip>
+						*/}
 
 						{userdata.support === true ? 
 							<span style={{display: "flex", top: -10, right: 50, position: "absolute"}}>
-								<a href={mailsendingButton(selectedOrganization)} target="_blank" rel="noopener noreferrer" style={{textDecoration: "none"}} disabled={selectedStatus.length !== 0}>
+								{/*<a href={mailsendingButton(selectedOrganization)} target="_blank" rel="noopener noreferrer" style={{textDecoration: "none"}} disabled={selectedStatus.length !== 0}>*/}
-									<Button
+								<Button
-										variant="outlined"
+									variant="outlined"
-										color="primary"
+									color="primary"
-										disabled={selectedStatus.length !== 0}
+									disabled={selectedStatus.length !== 0}
-										style={{ minWidth: 80, maxWidth: 80, height: "100%", }} 
+									style={{ minWidth: 80, maxWidth: 80, height: "100%", }} 
-										onClick={() => {
+									onClick={() => {
-												console.log("Should send mail to admins of org with context")
+											console.log("Should send mail to admins of org with context")
-												handleStatusChange({target: {value: ["contacted"]}})
+											handleStatusChange({target: {value: ["contacted"]}})
-
+											// Open a new tab
-												// open a mailto with subject "hello" and sender "frikky@shuffler.io"
+											window.open(mailsendingButton(selectedOrganization), "_blank")
-										}}
+									}}
-									>
+								>
-										Sales mail
+									Sales mail
-									</Button>
+								</Button>
-								</a>
 								<FormControl sx={{ m: 1, width: 300, }} style={{}}>
 									<InputLabel id="">Status</InputLabel>
 									<Select
@@ -2236,7 +2414,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
               style={{}}
               aria-label={"Copy orgid"}
             >
-			<div>
               <IconButton
                 style={{ top: -10, right: 0, position: "absolute" }}
                 onClick={() => {
@@ -2266,7 +2443,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
               >
                 <FileCopyIcon style={{ color: "rgba(255,255,255,0.8)" }} />
               </IconButton>
-			</div>
             </Tooltip>
 						{selectedOrganization.defaults !== undefined && selectedOrganization.defaults.documentation_reference !== undefined && selectedOrganization.defaults.documentation_reference !== null && selectedOrganization.defaults.documentation_reference.includes("http") ?
 							<Tooltip
@@ -2274,7 +2450,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                 style={{ top: -10, right: 50, position: "absolute" }}
 								aria-label={"Open org docs"}
 							>
-								<div>
 								<a href={selectedOrganization.defaults.documentation_reference} target="_blank" style={{ textDecoration: "none", }} rel="noopener noreferrer">
 									<IconButton
                 		style={{ top: -10, right: 50, position: "absolute" }}
@@ -2282,7 +2457,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 										<DescriptionIcon style={{ color: "rgba(255,255,255,0.8)" }} />
 									</IconButton>
 								</a>
-								</div>
 							</Tooltip>
 						: null}
             {selectedOrganization.name.length > 0 ? (
@@ -2341,7 +2515,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 							<Tab
 								disabled={!isCloud}
 								label=<span>
-									Billing
+									Billing (Beta)
 								</span>
 							/>
 							<Tab
@@ -2350,20 +2524,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 									Branding	
 								</span>
 							/>
-							<Tab
-								disabled={true}
-								label=<span>
-									Usage	
-								</span>
-							/>
-							{/*
-							<Tab
-								disabled={true}
-								label=<span>
-									Notifications	
-								</span>
-							/>
-							*/}
 						</Tabs>
 
             <Divider
@@ -2593,14 +2753,12 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
             		            item.usage === null ? 0 : item.usage,
             		          data_collection: "None",
             		          active: item.active,
-            		          icon: <CodeIcon style={{ color: itemColor }} />,
+            		          icon: <PolymerIcon style={{ color: itemColor }} />,
             		        };
 
             		        return (
-            		          <Zoom in={true} key={index}>
+            		          <Zoom key={index}>
-							  	<div>
+            		            <GridItem data={griditem} />
-            		            	<GridItem data={griditem} />
-							  	</div>
             		          </Zoom>
             		        );
             		      })}
@@ -2614,6 +2772,8 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 								adminTab={adminTab}
 								globalUrl={globalUrl}
 								checkLogin={checkLogin}
+								setAdminTab={setAdminTab}
+								setCurTab={setCurTab}
 							/>
 						: adminTab === 3 ? 
 							<Billing 
@@ -2624,6 +2784,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 								selectedOrganization={selectedOrganization}
 								adminTab={adminTab}
 								billingInfo={billingInfo}
+								selectedOrganization={selectedOrganization}
 								stripeKey={props.stripeKey}
 								handleGetOrg={handleGetOrg}
 							/>
@@ -2635,6 +2796,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 								globalUrl={globalUrl}
 								handleGetOrg={handleGetOrg}
 								selectedOrganization={selectedOrganization}
+								selectedOrganization={selectedOrganization}
 								setSelectedOrganization={setSelectedOrganization}
 							/>
 							: null
@@ -2940,7 +3102,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                             style={{}}
                             aria-label={"Copy APIkey"}
                           >
-						  	<div>
                             <IconButton
                               style={{}}
                               onClick={() => {
@@ -2977,7 +3138,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                                 style={{ color: "rgba(255,255,255,0.8)" }}
                               />
                             </IconButton>
-						  	</div>
                           </Tooltip>
                         )
                       }
@@ -3550,19 +3710,17 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                           title="Set in EVERY workflow"
                           placement="top"
                         >
-							<div>
+                          <IconButton
-							  <IconButton
+                            style={{ marginRight: 10 }}
-								style={{ marginRight: 10 }}
+                            disabled={data.defined === false}
-								disabled={data.defined === false}
+                            onClick={() => {
-								onClick={() => {
+                              editAuthenticationConfig(data.id);
-								  editAuthenticationConfig(data.id);
+                            }}
-								}}
+                          >
-							  >
+                            <SelectAllIcon
-								<SelectAllIcon
+                              color={data.defined ? "primary" : "secondary"}
-								  color={data.defined ? "primary" : "secondary"}
+                            />
-								/>
+                          </IconButton>
-							  </IconButton>
-						  </div>
                         </Tooltip>
                       ) : (
                         <Tooltip
@@ -3570,7 +3728,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                           title="Must edit before you can set in all workflows"
                           placement="top"
                         >
-						<div>
                           <IconButton
                             style={{ marginRight: 10 }}
                             onClick={() => {}}
@@ -3579,7 +3736,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                               color={data.defined ? "primary" : "secondary"}
                             />
                           </IconButton>
-						</div>
                         </Tooltip>
                       )}
                       <IconButton
@@ -3791,7 +3947,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 														style={{}}
 														aria-label={"Copy orborus command"}
 													>
-														<div>
 														<IconButton
 															style={{}}
 															disabled={environment.Type === "cloud"}
@@ -3828,7 +3983,6 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
 														>
 															<FileCopyIcon disabled={environment.Type === "cloud"} style={{ color: environment.Type === "cloud" ? "rgba(255,255,255,0.2)" : "rgba(255,255,255,0.8)" }} />
 														</IconButton>
-														</div>
 													</Tooltip>
 												}
                   	  />
@@ -3920,7 +4074,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
                   	</ListItem>
 										{showCPUAlert === false ? null : 
                   		<ListItem key={index+"_cpu"} style={{ backgroundColor: bgColor }}>
-												<div style={{border: "1px solid #f85a3e", borderRadius: theme.palette.borderRadius, marginTop: 10, marginBottom: 10, padding: 15, height: 70, textAlign: "left", backgroundColor: theme.palette.surfaceColor, display: "flex", }}>
+												<div style={{border: "1px solid #f85a3e", borderRadius: theme.palette.borderRadius, marginTop: 10, marginBottom: 10, padding: 15, textAlign: "center", height: 70, textAlign: "left", backgroundColor: theme.palette.surfaceColor, display: "flex", }}>
 													<div style={{flex: 2, overflow: "hidden",}}>
 														<Typography variant="body1" >
 															90% CPU the server(s) hosting the Shuffle App Runner (Orborus) was found.  
@@ -4202,7 +4356,7 @@ Let me know if you're interested, or set up a call here: https://drift.me/${user
           <Tab
             disabled={userdata.admin !== "true"}
             label=<span>
-              <CodeIcon style={iconStyle} />
+              <EcoIcon style={iconStyle} />
               Environments
             </span>
           />

frontend/src/views/Welcome.jsx

@@ -1,17 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import ReactGA from 'react-ga4';
 import WelcomeForm2 from "../components/WelcomeForm2.jsx";
-import {
+import Stepper from "@material-ui/core/Stepper";
-	Stepper, 
+import Step from "@material-ui/core/Step";
-	Step, 
+import StepLabel from "@material-ui/core/StepLabel";
-	StepLabel, 
-} from '@mui/material';
 import AppFramework from "../components/AppFramework.jsx";
 import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
 import { 
 	Grid, 
 	Container,
-  Collapse,
+  Fade,
 	Typography, 
 	Paper,
 	Button,
@@ -417,7 +415,7 @@ const Welcome = (props) => {
 										<Typography variant="h6" style={{textAlign: "center", marginBottom: 25, }}>
 											App Framework
 										</Typography>
-										<Collapse>
+										<Fade>
 												<AppFramework
 													inputUsecase={inputUsecase}
 													frameworkData={frameworkData}
@@ -428,20 +426,20 @@ const Welcome = (props) => {
 													isLoggedIn={true}
 													globalUrl={globalUrl}
 													size={0.78}
-													color={theme.palette.platformColor}
+													color={theme.palette.backgroundColor}
 													discoveryWrapper={discoveryWrapper}
 													setDiscoveryWrapper={setDiscoveryWrapper}
 													apps={apps}
 													inputUsecases={usecases}
 													setInputUsecases={setUsecases}
 												/>
-										</Collapse>
+										</Fade>
 									</div>
 								}
 							</Grid>
 						</div>
 						: 
-						<Collapse in={true}>
+						<Fade in={true}>
 							<div style={{maxWidth: 700, margin: "auto", marginTop: 50, }}>
 								{/*
 							<div style={{display:"flex"}}>
@@ -537,7 +535,7 @@ const Welcome = (props) => {
 									</Typography>
 								</div>
 							</div>
-						</Collapse>
+						</Fade>
 					}
 			</div>
    ) 

frontend/src/views/Workflows.jsx

@@ -1,14 +1,14 @@
 import React, { useEffect, useContext } from "react";
 import ReactDOM from "react-dom"
 
-import { makeStyles } from "@mui/styles";
+import { makeStyles } from "@material-ui/core/styles";
 import { Navigate } from "react-router-dom";
 //import { Redirect } from "react-router-dom";
 
 
 import SecurityFramework from '../components/SecurityFramework.jsx';
 import EditWorkflow from "../components/EditWorkflow.jsx" 
-//import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
+import { ShepherdTour, ShepherdTourContext } from 'react-shepherd'
 import Priority from "../components/Priority.jsx";
 
 import { isMobile } from "react-device-detect" 
@@ -41,7 +41,7 @@ import {
 	Checkbox,
 	LinearProgress,
 	ListItemText,
-} from "@mui/material"
+} from "@material-ui/core";
 
 import {
   AvatarGroup,
@@ -79,7 +79,7 @@ import {
 	RadioButtonUnchecked as RadioButtonUncheckedIcon,
   ArrowLeft as ArrowLeftIcon,
   ArrowRight as ArrowRightIcon,
-} from "@mui/icons-material";
+} from "@material-ui/icons";
 
 //import NestedMenuItem from "material-ui-nested-menu-item";
 //import {Search as SearchIcon, ArrowUpward as ArrowUpwardIcon, Visibility as VisibilityIcon,  Close as CloseIcon, Error as ErrorIcon, FindReplace as FindreplaceIcon, ArrowLeft as ArrowLeftIcon, Cached as CachedIcon, DirectionsRun as DirectionsRunIcon, Add as AddIcon, Polymer as PolymerIcon, FormatListNumbered as FormatListNumberedIcon, Create as CreateIcon, PlayArrow as PlayArrowIcon, AspectRatio as AspectRatioIcon, MoreVert as MoreVertIcon, Apps as AppsIcon, Schedule as ScheduleIcon, FavoriteBorder as FavoriteBorderIcon, Pause as PauseIcon, Delete as DeleteIcon, AddCircleOutline as AddCircleOutlineIcon, Save as SaveIcon, KeyboardArrowLeft as KeyboardArrowLeftIcon, KeyboardArrowRight as KeyboardArrowRightIcon, ArrowBack as ArrowBackIcon, Settings as SettingsIcon, LockOpen as LockOpenIcon, ExpandMore as ExpandMoreIcon, VpnKey as VpnKeyIcon} from '@material-ui/icons';
@@ -409,16 +409,16 @@ export const validateJson = (showResult) => {
 	}
 
 	if (typeof showResult === "object" || typeof showResult === "array") {
-  	return {
+  	  return {
-  	  valid: true,
+  	    valid: true,
-  	  result: showResult,
+  	    result: showResult,
-  	}
+  	  }
 	}
 
 	if (showResult[0] === "\"") {
-  	return {
+  		return {
-  	  valid: false,
+  	  		valid: false,
-  	  result: showResult,
+  	  		result: showResult,
 		}
 	}
 
@@ -427,10 +427,10 @@ export const validateJson = (showResult) => {
     if (!showResult.includes("{") && !showResult.includes("[")) {
       jsonvalid = false
 
-			return {
+		return {
-				valid: jsonvalid,
+			valid: jsonvalid,
-				result: showResult,
+			result: showResult,
-			};
+		};
     }
   } catch (e) {
     showResult = showResult.split("'").join('"');
@@ -1182,7 +1182,7 @@ const Workflows = (props) => {
 
 			setUsecases(newcategories)
 		} else {
-  		setUsecases(categorydata)
+  			setUsecases(categorydata)
 		}
 	}
 
@@ -1272,11 +1272,11 @@ const Workflows = (props) => {
     width: "100%",
     color: "white",
     backgroundColor: surfaceColor,
+    padding: "12px 12px 0px 15px",
     borderRadius: 5,
     display: "flex",
     boxSizing: "border-box",
     position: "relative",
-    padding: "12px 12px 0px 15px",
   };
 
   const gridContainer = {
@@ -1603,9 +1603,10 @@ const Workflows = (props) => {
     const innerColor = "rgba(255,255,255,0.3)";
     const setupPaperStyle = {
       minHeight: paperAppStyle.minHeight,
-	  maxWidth: "100%",
+			maxWidth: "100%",
       minWidth: paperAppStyle.width,
       color: innerColor,
+      padding: paperAppStyle.padding,
       borderRadius: paperAppStyle.borderRadius,
       display: "flex",
       boxSizing: "border-box",
@@ -1613,12 +1614,10 @@ const Workflows = (props) => {
       border: `2px solid ${innerColor}`,
       cursor: "pointer",
       backgroundColor: hover ? "rgba(39,41,45,0.5)" : "rgba(39,41,45,1)",
-
-      padding: paperAppStyle.padding,
     };
 
     return (
-      <Grid item xs={isMobile ? 12 : 4} style={{  }}>
+      <Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
         <Paper
           square
           style={setupPaperStyle}
@@ -2823,7 +2822,7 @@ const Workflows = (props) => {
 																selectedUsecases.push(subcase.name)
 															}
 
-    	  											setUpdate(Math.random());
+    	  													setUpdate(Math.random());
 															setSelectedUsecases(selectedUsecases)
 														}}>
             	  							<Checkbox style={{color: selectedUsecases.includes(subcase.name) ? usecase.color : theme.palette.inputColor}} checked={selectedUsecases.includes(subcase.name)} />
@@ -3067,12 +3066,153 @@ const Workflows = (props) => {
     </span>
   );
 
+	// const tourOptions = {
+	// 	defaultStepOptions: {
+	// 		classes: "shadow-md bg-purple-dark",
+  //   	scrollTo: true
+	// 	},
+	// 	useModalOverlay: true,
+	// 	tourName: workflows,
+	// 	exitOnEsc: true,
+	// }
+
+  //  //classes: "custom-class-name-1 custom-class-name-2",
+	// const newSteps = [
+	// 	{
+  //   	id: "intro",
+  //   	scrollTo: true,
+  //   	beforeShowPromise: function() {
+  //   	  return new Promise(function(resolve) {
+  //   	    setTimeout(function() {
+  //   	      window.scrollTo(0, 0);
+  //   	      resolve();
+  //   	    }, 500);
+  //   	  });
+  //   	},
+  //   	buttons: [
+  //   	  {
+  //   	    classes: "shepherd-button-primary",
+	// 				style: {
+	// 					backgroundColor: "red",	
+	// 					color: "white", 
+	// 				},
+  //   	    text: "Next",
+  //   	    type: "next"
+  //   	  }
+  //   	],
+  //   	highlightClass: "highlight",
+  //   	showCancelLink: true,
+  //   	text: [
+  //   	  "React-Shepherd is a JavaScript library for guiding users through your React app."
+  //   	],
+  //   	when: {
+  //   	  show: () => {
+  //   	    console.log("show step 1");
+  //   	  },
+  //   	  hide: () => {
+  //   	    console.log("hide step 1");
+  //   	  }
+  //   	}
+  // },	
+  // {
+  //   	id: "second",
+  //   	attachTo: {
+  //   	  element: "second-step",
+  //   	  on: "top"
+  //   	},
+  //   	text: [
+  //   	  "Yuk eksplorasi hasil Tes Minat Bakat-mu dan rekomendasi <b>Jurusan</b> dan Karier."
+  //   	],
+  //   	buttons: [
+  //   	  {
+  //   	    classes: "btn btn-info",
+  //   	    text: "Kembali",
+  //   	    type: "back"
+  //   	  },
+  //   	  {
+  //   	    classes: "btn btn-success",
+  //   	    text: "Saya Mengerti",
+  //   	    type: "cancel"
+  //   	  }
+  //   	],
+  //   	when: {
+  //   	  show: () => {
+  //   	    console.log("show stepp");
+  //   	  },
+  //   	  hide: () => {
+  //   	    console.log("complete step");
+  //   	  }
+  //   	},
+  //   	showCancelLink: false,
+  //   	scrollTo: true,
+  //   	modalOverlayOpeningPadding: 4,
+  //   	useModalOverlay: false,
+  //   	canClickTarget: false
+  // 	}
+	// ]
+		
+	// 	function TourButton() {
+	// 	  const tour = useContext(ShepherdTourContext);
+		
+	// 	  return (
+	// 	    <Button variant="contained" color="primary" onClick={tour.start}>
+	// 	      Start Tour
+	// 	    </Button>
+	// 	  );
+	// 	}
+
   const WorkflowView = () => {
     if (workflows.length === 0) {
-		// Not going there yet
+			// Not going there yet
-		//if ((userdata.tutorials !== undefined && userdata.tutorials !== null && !userdata.tutorials.includes("getting-started")) || userdata.tutorials === null) {
+			//if ((userdata.tutorials !== undefined && userdata.tutorials !== null && !userdata.tutorials.includes("getting-started")) || userdata.tutorials === null) {
-		//	return <Navigate to="/getting-started" replace />;
+			//	return <Navigate to="/getting-started" replace />;
-		//}
+			//}
+      //return (
+      //  <div style={emptyWorkflowStyle}>
+      //    <Paper style={boxStyle}>
+      //      <div>
+      //        <h2>Welcome to Shuffle</h2>
+      //      </div>
+      //      <div>
+      //        <p>
+      //          <b>Shuffle</b> is a flexible, easy to use, automation platform
+      //          allowing users to integrate their services and devices freely.
+      //          It's made to significantly reduce the amount of manual labor,
+      //          and is focused on security applications.{" "}
+      //          <a
+      //            href="/docs/about"
+      //            style={{ textDecoration: "none", color: "#f85a3e" }}
+      //          >
+      //            Click here to learn more.
+      //          </a>
+      //        </p>
+      //      </div>
+      //      <div>
+      //        If you want to jump straight into it, click here to create your
+      //        first workflow:
+      //      </div>
+      //      <div style={{ display: "flex" }}>
+      //        <Button
+			//					id="second-step"
+      //          color="primary"
+      //          style={{ marginTop: "20px" }}
+      //          variant="outlined"
+      //          onClick={() => setModalOpen(true)}
+      //        >
+      //          New workflow
+      //        </Button>
+      //        <span style={{ paddingTop: 20, display: "flex" }}>
+      //          <Typography
+      //            style={{ marginTop: 5, marginLeft: 30, marginRight: 15 }}
+      //          >
+      //            ..OR
+      //          </Typography>
+      //          {workflowButtons}
+      //        </span>
+      //      </div>
+      //    </Paper>
+      //  </div>
+      //)
     }
 
 		var workflowDelay = -150
@@ -3084,40 +3224,101 @@ const Workflows = (props) => {
         <div style={workflowViewStyle}>
           <div style={{ display: "flex", marginTop: 25, }}>
             <div style={{ flex: 1 }}>
-				<Typography variant="h1" style={{fontSize: 30}}>
+							<Typography variant="h1" style={{fontSize: 30}}>
-              		Workflows
+              	Workflows
-				</Typography>
+							</Typography>
             </div>
-			{isMobile ? null : 
+						{/*
-				<div style={{ display: "flex", margin: "0px 0px 20px 0px" }}>
+            <div style={{ flex: 1 }}>
-					<div style={{ flex: 1, float: "right" }}>
+              <Typography style={{ marginTop: 7, marginBottom: "auto" }}>
-						<ChipInput
+                <a
-							style={{}}
+                  rel="noopener noreferrer"
-							InputProps={{
+                  target="_blank"
-								style: {
+                  href="https://shuffler.io/docs/workflows"
-									color: "white",
+                  style={{ textDecoration: "none", color: "#f85a3e" }}
-									maxWidth: 275,
+                >
-									minWidth: 275,
+                  Learn more about Workflows
-								},
+                </a>
-							}}
+              </Typography>
-							placeholder="Add Filter"
+            </div>
-							color="primary"
+						*/}
-							fullWidth
+						{isMobile ? null : 
-							value={filters}
+							<div style={{ display: "flex", margin: "0px 0px 20px 0px" }}>
-							onAdd={(chip) => {
+								<div style={{ flex: 1, float: "right" }}>
-								addFilter(chip);
+									<ChipInput
-							}}
+										style={{}}
-							onDelete={(_, index) => {
+										InputProps={{
-								removeFilter(index);
+											style: {
-							}}
+												color: "white",
-						/>
+												maxWidth: 275,
-					</div>
+												minWidth: 275,
-				</div>
+											},
-			}
+										}}
+										placeholder="Filter Workflows"
+										color="primary"
+										fullWidth
+										value={filters}
+										onAdd={(chip) => {
+											addFilter(chip);
+										}}
+										onDelete={(_, index) => {
+											removeFilter(index);
+										}}
+									/>
+								</div>
+							</div>
+						}
             <div style={{ flex: 1, textAlign: "right", }}>
               {workflowButtons}
             </div>
           </div>
+          {/*
+					<div style={flexContainerStyle}>
+						<div style={{...flexBoxStyle, ...activeWorkflowStyle}}>
+							<div style={flexContentStyle}>
+								<div><img src={mobileImage} style={iconStyle} /></div>
+								<div style={ blockRightStyle }>
+									<div style={counterStyle}>{workflows.length}</div>
+									<div style={fontSize_16}>ACTIVE WORKFLOWS</div>
+								</div>
+							</div>
+						</div>
+						<div style={{...flexBoxStyle, ...availableWorkflowStyle}}>
+							<div style={flexContentStyle}>
+								<div><img src={bookImage} style={iconStyle} /></div>
+								<div style={ blockRightStyle }>
+									<div style={counterStyle}>{workflows.length}</div>
+									<div style={fontSize_16}>AVAILABE WORKFLOWS</div>
+								</div>
+							</div>
+						</div>
+						<div style={{...flexBoxStyle, ...notificationStyle}}>
+							<div style={flexContentStyle}>
+								<div><img src={bagImage} style={iconStyle} /></div>
+								<div style={ blockRightStyle }>
+									<div style={counterStyle}>{workflows.length}</div>
+									<div style={fontSize_16}>NOTIFICATIONS</div>
+								</div>
+							</div>
+						</div>
+					</div>
+					*/}
+
+          {/*
+					chipRenderer={({ value, isFocused, isDisabled, handleClick, handleRequestDelete }, key) => {
+						console.log("VALUE: ", value)
+
+						return (
+							<Chip
+								key={key}
+								style={chipStyle}
+
+							>
+								{value}
+							</Chip>
+						)
+					}}
+					*/}
   		
 					<div style={{width: "100%", minHeight: isMobile ? 0 : 51, maxHeight: isMobile ? 0 : 51, marginTop: 10, }}>
 						{!isMobile && usecases !== null && usecases !== undefined && usecases.length > 0 ? 
@@ -3125,6 +3326,7 @@ const Workflows = (props) => {
 								{usecases.map((usecase, index) => {
 									//console.log(usecase)
 									const percentDone = usecase.matches.length > 0 ? parseInt(usecase.matches.length/usecase.list.length*100) : 0
+									console.log("Usecase Matches: ", usecase.matches, ", Percent: ", percentDone)
 
 									return (
 										<Paper
@@ -3166,7 +3368,10 @@ const Workflows = (props) => {
 					</div>
 
           <div style={{ marginTop: 10, marginBottom: 10, }} />
-          {!isMobile && actionImageList !== undefined && actionImageList !== null && actionImageList.length > 0 ? (
+          {!isMobile &&
+					actionImageList !== undefined &&
+          actionImageList !== null &&
+          actionImageList.length > 0 ? (
             <div
               style={{
                 display: "flex",
@@ -3255,11 +3460,10 @@ const Workflows = (props) => {
 									return returnData 
 								}
 
-				/*<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>*/
                 return (
-					<span>
+									<Zoom key={index} in={true} style={{ transitionDelay: `${appDelay}ms` }}>
-						{returnData}
+										{returnData}
-					</span>
+									</Zoom>
               );
             })}
             </div>
@@ -3296,11 +3500,13 @@ const Workflows = (props) => {
 						/>
 					: null}
 
-					{/*<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>*/}
 					<div style={{marginTop: 15, marginBottom: 50, }}>
 						{view === "grid" ? (
 							<Grid container spacing={filteredWorkflows.length === 0 ? 12 : filteredWorkflows.length === 1 ? 6 : 4} style={paperAppContainer}>
-								<NewWorkflowPaper />
+								<Zoom in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
+									<NewWorkflowPaper />
+								</Zoom>
+
 								{filteredWorkflows.map((data, index) => {
 									// Shouldn't be a part of this list
 									if (data.public === true) {
@@ -3311,17 +3517,15 @@ const Workflows = (props) => {
 										workflowDelay += 75
 									} else {
 										return (
-											<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
+											<Grid key={index} item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
-												<Grid key={index} item xs={isMobile ? 12 : 4} style={{}}>
+												<WorkflowPaper key={index} data={data} />
-													<WorkflowPaper key={index} data={data} />
+											</Grid>
-												</Grid>
-											</Zoom>
 										)
 									}
 
 									return (
 										<Zoom key={index} in={true} style={{ transitionDelay: `${workflowDelay}ms` }}>
-											<Grid item xs={isMobile ? 12 : 4} style={{}}>
+											<Grid item xs={isMobile ? 12 : 4} style={{ padding: "12px 10px 12px 10px" }}>
 												<WorkflowPaper key={index} data={data} />
 											</Grid>
 										</Zoom>
@@ -3728,7 +3932,7 @@ const Workflows = (props) => {
 						setWorkflow={setEditingWorkflow}
 						modalOpen={modalOpen}
 						setModalOpen={setModalOpen}
-  					usecases={usecases}
+  						usecases={usecases}
 						setNewWorkflow={setNewWorkflow}
 						appFramework={appFramework}
 						isEditing={isEditing}