@evenicanpm/admin-integrate 1.1.0 → 1.2.2

package/src/components/header/execution-details-header.tsx

@@ -2,153 +2,126 @@ import React, { useState } from "react";
 
 // MUI
 import { Theme, useTheme } from "@mui/material";
-import {
-  Grid2 as Grid,
-  Box,
-  Typography,
-  Button,
-  Stack,
-  Popover,
-} from "@mui/material";
-import { PlayArrowOutlined } from "@mui/icons-material";
+import { Grid2 as Grid, Typography, Stack } from "@mui/material";
 
 // Custom components
-import ExecutionTag from "../execution/execution-tag";
+import { ExecutionTag } from "@evenicanpm/admin-integrate/components/execution";
+import { DateTimePopover } from "@evenicanpm/admin-integrate/components/core";
 
 interface Execution {
-  name: string;
-  startDate: string;
-  endDate: string;
-  executionStatus: {
-    id: string;
-  };
+	name: string;
+	startDate: string;
+	endDate: string;
+	executionStatus: {
+		id: string;
+	};
 }
 
 interface Props {
-  execution: Execution;
-  handleRun?: () => void;
+	execution: Execution;
+	children?: React.ReactNode; // buttons to go in header, e.g. save, cancel etc.
 }
 
 const ExecutionDetailsHeader: React.FC<Props> = (props: Props) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const theme = useTheme();
+	const styles = getStyles(theme);
 
-  const startDate = new Date(props.execution.startDate);
-  const endDate = new Date(props.execution.endDate);
-  const localTime = startDate.toLocaleString();
-  const duration = (endDate.getTime() - startDate.getTime()) / 1000;
+	const startDate = new Date(props.execution.startDate);
+	const endDate = new Date(props.execution.endDate);
+	const localTime = startDate.toLocaleString();
+	const duration = (endDate.getTime() - startDate.getTime()) / 1000;
 
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-  const open = Boolean(anchorEl);
+	const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+	const open = Boolean(anchorEl);
 
-  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
+	const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
 
-  const handlePopoverClose = () => {
-    setAnchorEl(null);
-  };
+	const handlePopoverClose = () => {
+		setAnchorEl(null);
+	};
 
-  return (
-    <Grid container spacing={0}>
-      <Grid size={8}>
-        <Stack spacing={5} direction="row">
-          <Typography variant="h5" sx={styles.typography}>
-            {props.execution.name}
-          </Typography>
-          <ExecutionTag
-            executionStatusId={props.execution.executionStatus.id}
-          />
-        </Stack>
-      </Grid>
-      <Grid size={4}>
-        <Box display="flex" justifyContent="flex-end">
-          {props.handleRun && (
-            <Button
-              sx={styles.button}
-              variant="contained"
-              color="info"
-              startIcon={<PlayArrowOutlined />}
-              onClick={props.handleRun}
-            >
-              Run
-            </Button>
-          )}
-        </Box>
-      </Grid>
-      <Grid size={12}>
-        <Stack
-          spacing={1}
-          direction="row"
-          onMouseEnter={handlePopoverOpen}
-          onMouseLeave={handlePopoverClose}
-        >
-          <Typography color="grey" variant="caption">
-            {localTime}
-          </Typography>
-          <Typography color="grey" variant="caption">
-            Duration: {duration}s
-          </Typography>
-        </Stack>
-      </Grid>
-      <Popover
-        sx={{ pointerEvents: "none" }}
-        open={open}
-        anchorEl={anchorEl}
-        anchorOrigin={{
-          vertical: "bottom",
-          horizontal: "left",
-        }}
-        transformOrigin={{
-          vertical: "top",
-          horizontal: "left",
-        }}
-        onClose={handlePopoverClose}
-        disableRestoreFocus
-      >
-        <Box sx={styles.popover}>
-          <Typography variant="body2">
-            Uses your browser's local timezone.
-          </Typography>
-          <Box
-            display={
-              Intl.DateTimeFormat().resolvedOptions().timeZone
-                ? "block"
-                : "none"
-            }
-          >
-            <Typography variant="body2" align="center" sx={styles.timezone}>
-              {Intl.DateTimeFormat().resolvedOptions().timeZone}
-            </Typography>
-          </Box>
-        </Box>
-      </Popover>
-    </Grid>
-  );
+	return (
+		<Grid container columnSpacing={1}>
+			<Grid size={8}>
+				<Stack spacing={5} direction="row" alignItems="center">
+					<Typography variant="h5" sx={styles.typography}>
+						{props.execution.name}
+					</Typography>
+					<ExecutionTag
+						executionStatusId={props.execution.executionStatus.id}
+					/>
+				</Stack>
+			</Grid>
+			<Grid size={4}>
+				<Stack
+					spacing={1}
+					direction="row"
+					alignItems="center"
+					justifyContent={{ xs: "flex-start", sm: "flex-end" }}
+				>
+					{/* E.g. run, etc. */}
+					{props.children}
+				</Stack>
+			</Grid>
+			<Grid size={12}>
+				<Stack
+					spacing={1}
+					direction="row"
+					onMouseEnter={handlePopoverOpen}
+					onMouseLeave={handlePopoverClose}
+				>
+					<Typography color="grey" variant="caption">
+						{localTime}
+					</Typography>
+					<Typography color="grey" variant="caption">
+						Duration: {duration}s
+					</Typography>
+				</Stack>
+			</Grid>
+			<DateTimePopover
+				dateIsoString={props.execution.startDate}
+				sx={{ pointerEvents: "none" }}
+				open={open}
+				anchorEl={anchorEl}
+				anchorOrigin={{
+					vertical: "bottom",
+					horizontal: "left",
+				}}
+				transformOrigin={{
+					vertical: "top",
+					horizontal: "left",
+				}}
+				onClose={handlePopoverClose}
+				disableRestoreFocus
+			/>
+		</Grid>
+	);
 };
 
 const getStyles = (theme: Theme) => {
-  return {
-    title: {
-      display: "flex",
-      alignItems: "center",
-      height: "100%",
-    },
-    typography: {
-      fontWeight: "medium",
-    },
-    button: {
-      borderWidth: 2,
-      borderRadius: 1,
-      marginRight: theme.spacing(1),
-    },
-    popover: {
-      padding: theme.spacing(1),
-    },
-    timezone: {
-      color: "info.main",
-    },
-  };
+	return {
+		title: {
+			display: "flex",
+			alignItems: "center",
+			height: "100%",
+		},
+		typography: {
+			fontWeight: "medium",
+		},
+		button: {
+			borderWidth: 2,
+			borderRadius: 1,
+			marginRight: theme.spacing(1),
+		},
+		popover: {
+			padding: theme.spacing(1),
+		},
+		timezone: {
+			color: "info.main",
+		},
+	};
 };
 
 export default ExecutionDetailsHeader;

package/src/components/header/header.tsx

@@ -3,40 +3,40 @@ import { Box, Typography, AppBar, Toolbar, Stack } from "@mui/material";
 import { Theme, useTheme } from "@mui/material";
 
 interface Props {
-  title: string; // e.g. Executions
-  section: string; // e.g. e4Integrate
+	title: string; // e.g. Executions
+	section: string; // e.g. e4Integrate
 }
 
 const IntegrateHeader: React.FC<Props> = (props: Props) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	const theme = useTheme();
+	const styles = getStyles(theme);
 
-  return (
-    <Box sx={{ flexGrow: 1 }}>
-      <AppBar position="static" sx={styles.appbar} elevation={2}>
-        <Toolbar sx={styles.toolbar}>
-          <Stack>
-            <Typography variant="body1" color="info.main">
-              {props.section}
-            </Typography>
-            <Typography variant="h4">{props.title}</Typography>
-          </Stack>
-        </Toolbar>
-      </AppBar>
-    </Box>
-  );
+	return (
+		<Box sx={{ flexGrow: 1 }}>
+			<AppBar position="static" sx={styles.appbar} elevation={2}>
+				<Toolbar sx={styles.toolbar}>
+					<Stack>
+						<Typography variant="body1" color="info.main">
+							{props.section}
+						</Typography>
+						<Typography variant="h4">{props.title}</Typography>
+					</Stack>
+				</Toolbar>
+			</AppBar>
+		</Box>
+	);
 };
 
 const getStyles = (theme: Theme) => {
-  return {
-    appbar: {
-      color: "text.primary",
-    },
-    toolbar: {
-      backgroundColor: "white",
-      padding: theme.spacing(2, 0),
-    },
-  };
+	return {
+		appbar: {
+			color: "text.primary",
+		},
+		toolbar: {
+			backgroundColor: "white",
+			padding: theme.spacing(2, 0),
+		},
+	};
 };
 
 export default IntegrateHeader;

package/src/components/header/index.ts

@@ -1,3 +1,4 @@
 export { default as IntegrateHeader } from "./header";
 export { default as DashboardListHeader } from "./dashboard-list-header";
 export { default as ExecutionDetailsHeader } from "./execution-details-header";
+export { default as IntegrationDetailsHeader } from "./integration-details-header";

package/src/components/header/integration-details-header.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { useTranslations } from "next-intl";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Grid2 as Grid, Stack, Divider, Button, Box } from "@mui/material";
+import {
+	InfoOutlined,
+	Code,
+	FileUploadOutlined,
+	PlayArrowOutlined,
+} from "@mui/icons-material";
+
+// Custom components
+import { TitleEdit } from "@evenicanpm/admin-integrate/components/core";
+
+// TODO: when applying on page, change to use type of API query result
+type DetailsTemp = {
+	name: string;
+	processIcon: string;
+};
+
+interface Props {
+	details: DetailsTemp;
+	setDetails: (newDetails: DetailsTemp) => void;
+	children?: React.ReactNode; // buttons to go in header, e.g. save, cancel etc.
+}
+
+const IntegrationDetailsHeader: React.FC<Props> = (props: Props) => {
+	const t = useTranslations("Integrate.Integrations.Details");
+
+	const theme = useTheme();
+	const styles = getStyles(theme);
+
+	const onConfirm = (input: string) => {
+		props.setDetails({ ...props.details, name: input });
+	};
+
+	return (
+		<Grid container rowSpacing={1} columnSpacing={0}>
+			<Grid size={{ xs: 12, sm: 8 }}>
+				<Stack spacing={1} direction="row" alignItems="center">
+					{/* TODO: Apply Process icon component once that is merged. Using temp icon for now */}
+					<InfoOutlined color="info" />
+
+					<TitleEdit
+						title={props.details.name}
+						onConfirm={onConfirm}
+						variant="h5"
+					/>
+				</Stack>
+			</Grid>
+			<Grid size={{ xs: 12, sm: 4 }}>
+				<Stack
+					spacing={1}
+					direction="row"
+					alignItems="center"
+					justifyContent={{ xs: "flex-start", sm: "flex-end" }}
+				>
+					{/* E.g. create, save, cancel buttons, etc. */}
+					{props.children}
+				</Stack>
+			</Grid>
+			<Grid size={12}>
+				<Divider sx={styles.divider} />
+			</Grid>
+			<Grid size={12}>
+				<Stack direction="row">
+					<Box sx={styles.controlsButton}>
+						<Button startIcon={<Code />}>{t("codeView")}</Button>
+					</Box>
+					<Box sx={styles.controlsButton}>
+						<Button startIcon={<FileUploadOutlined />}>{t("import")}</Button>
+					</Box>
+					<Box sx={{ ...styles.controlsButton, border: "none" }}>
+						<Button startIcon={<PlayArrowOutlined />}>{t("executions")}</Button>
+					</Box>
+				</Stack>
+			</Grid>
+		</Grid>
+	);
+};
+
+const getStyles = (theme: Theme) => {
+	return {
+		divider: {
+			border: `1px solid ${theme.palette.grey[500]}`,
+		},
+		controlsButton: {
+			padding: theme.spacing(0, 1),
+			fontSize: theme.typography.body1.fontSize,
+			color: theme.palette.grey[600],
+			borderRadius: 0,
+			borderRight: `${theme.spacing(0.2)} solid ${theme.palette.grey[500]}`,
+		},
+	};
+};
+
+export default IntegrationDetailsHeader;

package/src/components/icons/up-down.tsx

@@ -1,21 +1,21 @@
 import createSvgIcon from "@mui/material/utils/createSvgIcon";
 
 const UpDown = createSvgIcon(
-  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M8.64847 6.88354H3.35158C3.04454 6.88354 2.86173 7.2269 3.03517 7.4812L5.68362 11.3824C5.83596 11.6062 6.16526 11.6062 6.3176 11.3824L8.96605 7.4812C9.13714 7.2269 8.9555 6.88354 8.64847 6.88354Z"
-      fill="currentColor"
-    />
-    <path
-      d="M8.64852 6.76641C8.54188 6.76641 8.43524 6.76641 8.32743 6.76641C8.05204 6.76641 7.77782 6.76641 7.50243 6.76641C7.13329 6.76641 6.76532 6.76641 6.39618 6.76641C6.0036 6.76641 5.61102 6.76641 5.21845 6.76641C4.87274 6.76641 4.52821 6.76641 4.18251 6.76641C3.95517 6.76641 3.72783 6.76641 3.49931 6.76641C3.45361 6.76641 3.40673 6.76641 3.36103 6.76641C3.17705 6.76758 3.00478 6.85898 2.91455 7.02187C2.82197 7.18828 2.83251 7.39102 2.93916 7.54922C2.96728 7.59141 2.9954 7.63242 3.02353 7.67344C3.16064 7.87617 3.29892 8.07891 3.43603 8.28164C3.64111 8.58281 3.84618 8.88516 4.05009 9.18633C4.26923 9.50977 4.48954 9.8332 4.70868 10.1566C4.89384 10.4285 5.07782 10.7016 5.26298 10.9734C5.36259 11.1211 5.46337 11.2687 5.56298 11.4164C5.63798 11.5277 5.73642 11.6168 5.87001 11.6508C6.08446 11.7059 6.2954 11.6145 6.41962 11.4363C6.50282 11.3168 6.58368 11.1949 6.66571 11.0742C6.84032 10.8164 7.01493 10.5598 7.18954 10.302C7.40751 9.97969 7.62665 9.65859 7.84461 9.33633C8.05438 9.02812 8.26415 8.71875 8.47274 8.41055C8.62391 8.18789 8.77508 7.96406 8.92625 7.74141C9.02703 7.59375 9.14891 7.44961 9.14539 7.26094C9.14422 6.98672 8.91922 6.77109 8.64852 6.76641C8.49735 6.76406 8.49735 6.99844 8.64852 7.00078C8.85125 7.0043 8.98133 7.22109 8.88055 7.39687C8.8618 7.42969 8.83836 7.46133 8.81727 7.49297C8.70125 7.66289 8.58641 7.83398 8.47039 8.00391C8.06493 8.60156 7.65946 9.19922 7.25282 9.79687C6.93173 10.2703 6.61063 10.7437 6.28954 11.216C6.2661 11.2512 6.24266 11.2863 6.21805 11.3203C6.12313 11.4504 5.94149 11.4715 5.82548 11.3684C5.79149 11.3379 5.76806 11.2992 5.74227 11.2617C5.69774 11.1961 5.65321 11.1305 5.60868 11.0648C5.2454 10.5305 4.88212 9.99492 4.52001 9.46055C4.13915 8.89922 3.75712 8.33672 3.37626 7.77539C3.29775 7.65937 3.21806 7.54453 3.14072 7.42852C3.05634 7.30195 3.07392 7.14726 3.18642 7.0582C3.2497 7.00898 3.31298 7.00078 3.3915 7.00078C3.86025 7.00078 4.33017 7.00078 4.79892 7.00078C5.55009 7.00078 6.30126 7.00078 7.05243 7.00078C7.55985 7.00078 8.0661 7.00078 8.57352 7.00078C8.5993 7.00078 8.62391 7.00078 8.64969 7.00078C8.79852 7.00078 8.79969 6.76641 8.64852 6.76641ZM8.64852 5.11641H3.35165C3.04462 5.11641 2.86181 4.77305 3.03525 4.51875L5.68368 0.617578C5.83602 0.39375 6.16532 0.39375 6.31766 0.617578L8.9661 4.51875C9.13719 4.77305 8.95555 5.11641 8.64852 5.11641Z"
-      fill="currentColor"
-    />
-    <path
-      d="M8.64832 4.99922C8.28153 4.99922 7.91473 4.99922 7.54676 4.99922C6.80262 4.99922 6.05849 4.99922 5.31552 4.99922C4.73193 4.99922 4.14834 4.99922 3.56592 4.99922C3.50615 4.99922 3.44639 4.99922 3.38662 4.99922C3.30459 4.99922 3.23428 4.98515 3.17803 4.93476C3.07022 4.83633 3.05733 4.6957 3.1417 4.57031C3.16865 4.53047 3.19561 4.49062 3.22256 4.45195C3.55068 3.96914 3.87881 3.48633 4.20576 3.00234C4.60888 2.4082 5.01201 1.81524 5.41513 1.2211C5.52529 1.05821 5.63661 0.895317 5.74677 0.732426C5.77372 0.692583 5.7995 0.650395 5.83583 0.62227C5.95536 0.52852 6.12763 0.55313 6.21903 0.680864C6.30106 0.794536 6.37724 0.912895 6.45575 1.02891C6.62333 1.27618 6.79208 1.52461 6.95966 1.77188C7.37801 2.38828 7.79637 3.00469 8.21473 3.61992C8.37293 3.85312 8.53113 4.08515 8.68816 4.31836C8.7327 4.38281 8.77605 4.44844 8.82059 4.51289C8.8452 4.55039 8.87566 4.58789 8.89441 4.6289C8.96824 4.8 8.84051 4.9957 8.64832 4.99922C8.49715 5.00156 8.49715 5.23593 8.64832 5.23359C8.92371 5.2289 9.15926 5.00039 9.14871 4.71914C9.14519 4.60898 9.10301 4.51289 9.04324 4.425C8.93777 4.26914 8.8323 4.11445 8.72684 3.95859C8.53934 3.68203 8.35184 3.40547 8.16317 3.12891C7.94285 2.80547 7.72371 2.48086 7.5034 2.15742C7.30184 1.85977 7.10028 1.56211 6.89755 1.26563C6.76395 1.06875 6.62919 0.870707 6.49559 0.673833C6.47098 0.637505 6.44638 0.600005 6.42059 0.563677C6.29403 0.382036 6.06903 0.287115 5.85224 0.356255C5.65419 0.418364 5.56044 0.591802 5.45146 0.751176C5.30146 0.971488 5.15263 1.1918 5.00263 1.41328C4.79287 1.72266 4.5831 2.03203 4.37216 2.34141C4.1542 2.6625 3.93623 2.98242 3.71943 3.30352C3.54365 3.5625 3.3667 3.82266 3.19092 4.08164C3.10654 4.20586 3.021 4.3289 2.93779 4.45429C2.82998 4.61601 2.82178 4.82929 2.9249 4.99687C3.01983 5.15039 3.18389 5.23476 3.36318 5.23593C3.50615 5.23711 3.65029 5.23593 3.79326 5.23593C4.08974 5.23593 4.38623 5.23593 4.68271 5.23593C5.06357 5.23593 5.44325 5.23593 5.82411 5.23593C6.21317 5.23593 6.60223 5.23593 6.9913 5.23593C7.31942 5.23593 7.64872 5.23593 7.97684 5.23593C8.17371 5.23593 8.37059 5.23593 8.56746 5.23593C8.59441 5.23593 8.62137 5.23593 8.64832 5.23593C8.79832 5.23359 8.79949 4.99922 8.64832 4.99922Z"
-      fill="currentColor"
-    />
-  </svg>,
-  "UpDown",
+	<svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M8.64847 6.88354H3.35158C3.04454 6.88354 2.86173 7.2269 3.03517 7.4812L5.68362 11.3824C5.83596 11.6062 6.16526 11.6062 6.3176 11.3824L8.96605 7.4812C9.13714 7.2269 8.9555 6.88354 8.64847 6.88354Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M8.64852 6.76641C8.54188 6.76641 8.43524 6.76641 8.32743 6.76641C8.05204 6.76641 7.77782 6.76641 7.50243 6.76641C7.13329 6.76641 6.76532 6.76641 6.39618 6.76641C6.0036 6.76641 5.61102 6.76641 5.21845 6.76641C4.87274 6.76641 4.52821 6.76641 4.18251 6.76641C3.95517 6.76641 3.72783 6.76641 3.49931 6.76641C3.45361 6.76641 3.40673 6.76641 3.36103 6.76641C3.17705 6.76758 3.00478 6.85898 2.91455 7.02187C2.82197 7.18828 2.83251 7.39102 2.93916 7.54922C2.96728 7.59141 2.9954 7.63242 3.02353 7.67344C3.16064 7.87617 3.29892 8.07891 3.43603 8.28164C3.64111 8.58281 3.84618 8.88516 4.05009 9.18633C4.26923 9.50977 4.48954 9.8332 4.70868 10.1566C4.89384 10.4285 5.07782 10.7016 5.26298 10.9734C5.36259 11.1211 5.46337 11.2687 5.56298 11.4164C5.63798 11.5277 5.73642 11.6168 5.87001 11.6508C6.08446 11.7059 6.2954 11.6145 6.41962 11.4363C6.50282 11.3168 6.58368 11.1949 6.66571 11.0742C6.84032 10.8164 7.01493 10.5598 7.18954 10.302C7.40751 9.97969 7.62665 9.65859 7.84461 9.33633C8.05438 9.02812 8.26415 8.71875 8.47274 8.41055C8.62391 8.18789 8.77508 7.96406 8.92625 7.74141C9.02703 7.59375 9.14891 7.44961 9.14539 7.26094C9.14422 6.98672 8.91922 6.77109 8.64852 6.76641C8.49735 6.76406 8.49735 6.99844 8.64852 7.00078C8.85125 7.0043 8.98133 7.22109 8.88055 7.39687C8.8618 7.42969 8.83836 7.46133 8.81727 7.49297C8.70125 7.66289 8.58641 7.83398 8.47039 8.00391C8.06493 8.60156 7.65946 9.19922 7.25282 9.79687C6.93173 10.2703 6.61063 10.7437 6.28954 11.216C6.2661 11.2512 6.24266 11.2863 6.21805 11.3203C6.12313 11.4504 5.94149 11.4715 5.82548 11.3684C5.79149 11.3379 5.76806 11.2992 5.74227 11.2617C5.69774 11.1961 5.65321 11.1305 5.60868 11.0648C5.2454 10.5305 4.88212 9.99492 4.52001 9.46055C4.13915 8.89922 3.75712 8.33672 3.37626 7.77539C3.29775 7.65937 3.21806 7.54453 3.14072 7.42852C3.05634 7.30195 3.07392 7.14726 3.18642 7.0582C3.2497 7.00898 3.31298 7.00078 3.3915 7.00078C3.86025 7.00078 4.33017 7.00078 4.79892 7.00078C5.55009 7.00078 6.30126 7.00078 7.05243 7.00078C7.55985 7.00078 8.0661 7.00078 8.57352 7.00078C8.5993 7.00078 8.62391 7.00078 8.64969 7.00078C8.79852 7.00078 8.79969 6.76641 8.64852 6.76641ZM8.64852 5.11641H3.35165C3.04462 5.11641 2.86181 4.77305 3.03525 4.51875L5.68368 0.617578C5.83602 0.39375 6.16532 0.39375 6.31766 0.617578L8.9661 4.51875C9.13719 4.77305 8.95555 5.11641 8.64852 5.11641Z"
+			fill="currentColor"
+		/>
+		<path
+			d="M8.64832 4.99922C8.28153 4.99922 7.91473 4.99922 7.54676 4.99922C6.80262 4.99922 6.05849 4.99922 5.31552 4.99922C4.73193 4.99922 4.14834 4.99922 3.56592 4.99922C3.50615 4.99922 3.44639 4.99922 3.38662 4.99922C3.30459 4.99922 3.23428 4.98515 3.17803 4.93476C3.07022 4.83633 3.05733 4.6957 3.1417 4.57031C3.16865 4.53047 3.19561 4.49062 3.22256 4.45195C3.55068 3.96914 3.87881 3.48633 4.20576 3.00234C4.60888 2.4082 5.01201 1.81524 5.41513 1.2211C5.52529 1.05821 5.63661 0.895317 5.74677 0.732426C5.77372 0.692583 5.7995 0.650395 5.83583 0.62227C5.95536 0.52852 6.12763 0.55313 6.21903 0.680864C6.30106 0.794536 6.37724 0.912895 6.45575 1.02891C6.62333 1.27618 6.79208 1.52461 6.95966 1.77188C7.37801 2.38828 7.79637 3.00469 8.21473 3.61992C8.37293 3.85312 8.53113 4.08515 8.68816 4.31836C8.7327 4.38281 8.77605 4.44844 8.82059 4.51289C8.8452 4.55039 8.87566 4.58789 8.89441 4.6289C8.96824 4.8 8.84051 4.9957 8.64832 4.99922C8.49715 5.00156 8.49715 5.23593 8.64832 5.23359C8.92371 5.2289 9.15926 5.00039 9.14871 4.71914C9.14519 4.60898 9.10301 4.51289 9.04324 4.425C8.93777 4.26914 8.8323 4.11445 8.72684 3.95859C8.53934 3.68203 8.35184 3.40547 8.16317 3.12891C7.94285 2.80547 7.72371 2.48086 7.5034 2.15742C7.30184 1.85977 7.10028 1.56211 6.89755 1.26563C6.76395 1.06875 6.62919 0.870707 6.49559 0.673833C6.47098 0.637505 6.44638 0.600005 6.42059 0.563677C6.29403 0.382036 6.06903 0.287115 5.85224 0.356255C5.65419 0.418364 5.56044 0.591802 5.45146 0.751176C5.30146 0.971488 5.15263 1.1918 5.00263 1.41328C4.79287 1.72266 4.5831 2.03203 4.37216 2.34141C4.1542 2.6625 3.93623 2.98242 3.71943 3.30352C3.54365 3.5625 3.3667 3.82266 3.19092 4.08164C3.10654 4.20586 3.021 4.3289 2.93779 4.45429C2.82998 4.61601 2.82178 4.82929 2.9249 4.99687C3.01983 5.15039 3.18389 5.23476 3.36318 5.23593C3.50615 5.23711 3.65029 5.23593 3.79326 5.23593C4.08974 5.23593 4.38623 5.23593 4.68271 5.23593C5.06357 5.23593 5.44325 5.23593 5.82411 5.23593C6.21317 5.23593 6.60223 5.23593 6.9913 5.23593C7.31942 5.23593 7.64872 5.23593 7.97684 5.23593C8.17371 5.23593 8.37059 5.23593 8.56746 5.23593C8.59441 5.23593 8.62137 5.23593 8.64832 5.23593C8.79832 5.23359 8.79949 4.99922 8.64832 4.99922Z"
+			fill="currentColor"
+		/>
+	</svg>,
+	"UpDown",
 );
 
 export default UpDown;

package/src/components/integration-list/index.ts

@@ -0,0 +1,2 @@
+export { default as IntegrationTag } from "./integration-tag";
+export { default as IntegrationStatusIcon } from "./integration-status-icon";

package/src/components/integration-list/integration-filter.ts

@@ -0,0 +1,21 @@
+import {
+	Filters,
+	MultiSelectFilter,
+} from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+
+export interface IntegrationListFilters extends Filters {
+	multiSelectFilter: MultiSelectFilter;
+}
+
+export const integrationListFilters: IntegrationListFilters = {
+	multiSelectFilter: {
+		type: "multiSelect",
+		label: "IntegrationList.tags",
+		value: null,
+		options: [
+			{ id: "Schedule Pending", value: "IntegrationList.scheduledPending" },
+			{ id: "Scheduled", value: "IntegrationList.scheduled" },
+			{ id: "Triggered", value: "IntegrationList.triggered" },
+		],
+	},
+};

package/src/components/integration-list/integration-status-icon.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+import { SxProps } from "@mui/material";
+import StorageIcon from "@mui/icons-material/Storage";
+import ElectricBoltIcon from "@mui/icons-material/ElectricBolt";
+import CodeIcon from "@mui/icons-material/Code";
+import TableChartIcon from "@mui/icons-material/TableChart";
+import EmailIcon from "@mui/icons-material/Email";
+import IosShareIcon from "@mui/icons-material/IosShare";
+import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
+import { purple } from "@mui/material/colors";
+
+interface Props {
+	processIcon: string;
+	sx?: SxProps;
+}
+
+const IntegrationStatusIcon: React.FC<Props> = (props: Props) => {
+	const color = purple[500];
+	const statusIconMap = {
+		DB: <StorageIcon color="success" />,
+		Webhook: <ElectricBoltIcon color="error" />,
+		Restful: <CodeIcon color="info" />,
+		Table: <TableChartIcon sx={{ color: color }} />,
+		Email: <EmailIcon color="warning" />,
+		Export: <IosShareIcon color="primary" />,
+		noIcon: <QuestionMarkIcon color="info" />,
+	};
+
+	return statusIconMap[props.processIcon] || statusIconMap["noIcon"];
+};
+
+export default IntegrationStatusIcon;

package/src/components/integration-list/integration-tag.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { styled } from "@mui/material/styles";
+import { Box, Typography, SxProps } from "@mui/material";
+import { useTranslations } from "next-intl";
+
+const StyledTagBox = styled(Box)(({ theme }) => ({
+	padding: theme.spacing(0, 1.5),
+	border: "solid 1px",
+	borderRadius: 4,
+	alignContent: "center",
+	maxWidth: "fit-content",
+}));
+
+const StyledTag = styled(Typography)(({ theme }) => ({
+	fontWeight: "bold",
+}));
+
+interface Props {
+	process: {
+		isScheduled: number;
+		isTriggered: number;
+	};
+	sx?: SxProps;
+}
+
+const IntegrationTag: React.FC<Props> = ({ process, sx }) => {
+	const t = useTranslations("Integrate.IntegrationList");
+
+	return (
+		<Box display="flex" gap={1} justifyContent="center">
+			{process.isTriggered === 1 && (
+				<StyledTagBox
+					sx={{
+						backgroundColor: "info.100",
+						borderColor: "transparent",
+						...sx,
+					}}
+				>
+					<StyledTag color="info" variant="caption">
+						{t("triggered")}
+					</StyledTag>
+				</StyledTagBox>
+			)}
+
+			{process.isScheduled === 1 && (
+				<StyledTagBox
+					sx={{
+						backgroundColor: "success.100",
+						borderColor: "transparent",
+						...sx,
+					}}
+				>
+					<StyledTag color="success" variant="caption">
+						{t("scheduled")}
+					</StyledTag>
+				</StyledTagBox>
+			)}
+
+			{process.isScheduled === 0 && process.isTriggered === 0 && (
+				<StyledTagBox
+					sx={{
+						backgroundColor: "warning.100",
+						borderColor: "transparent",
+						color: "orange.700",
+						...sx,
+					}}
+				>
+					<StyledTag color="inherit" variant="caption">
+						{t("scheduledPending")}
+					</StyledTag>
+				</StyledTagBox>
+			)}
+		</Box>
+	);
+};
+
+export default IntegrationTag;

package/src/components/integration-view/edges/default-edge.tsx

@@ -1,23 +1,24 @@
 import { BaseEdge, EdgeProps, getSmoothStepPath } from "@xyflow/react";
 
 export function DefaultEdge({
-  id,
-  sourceX,
-  sourceY,
-  targetX,
-  targetY,
+	id,
+	sourceX,
+	sourceY,
+	targetX,
+	targetY,
+	markerEnd,
 }: EdgeProps): JSX.Element {
-  const [edgePath] = getSmoothStepPath({
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    borderRadius: 0,
-  });
+	const [edgePath] = getSmoothStepPath({
+		sourceX,
+		sourceY,
+		targetX,
+		targetY,
+		borderRadius: 0,
+	});
 
-  return (
-    <>
-      <BaseEdge id={id} path={edgePath} />
-    </>
-  );
+	return (
+		<>
+			<BaseEdge id={id} path={edgePath} markerEnd={markerEnd} />
+		</>
+	);
 }