@evenicanpm/admin-integrate 1.1.0

package/src/components/data-table/table-header.tsx

@@ -0,0 +1,109 @@
+import TableRow from "@mui/material/TableRow";
+import TableHead from "@mui/material/TableHead";
+import TableSortLabel from "@mui/material/TableSortLabel";
+import TableCell, { TableCellProps } from "@mui/material/TableCell";
+import styled from "@mui/material/styles/styled";
+
+import { SxProps } from "@mui/material";
+import { Theme, useTheme } from "@mui/material";
+import { ExpandLess, ExpandMore } from "@mui/icons-material";
+
+// STYLED COMPONENTS
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  fontWeight: 500,
+  padding: "16px 20px",
+  color: theme.palette.grey[900],
+}));
+
+// ==============================================================
+export type Head = {
+  id: string;
+  label: string;
+  align: string;
+  width: string;
+  sortable?: boolean;
+};
+interface Props {
+  heading: Head[];
+  orderBy: string;
+  order: "asc" | "desc";
+  onRequestSort?: (id: string) => void; // if provided, make list sortable by column
+  rowSx?: SxProps;
+}
+// ==============================================================
+
+export default function TableHeader({
+  order,
+  heading,
+  orderBy,
+  onRequestSort,
+  rowSx,
+}: Props) {
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  return (
+    <TableHead sx={{ backgroundColor: "grey.200" }}>
+      <TableRow sx={rowSx}>
+        {heading.map((headCell) => (
+          <StyledTableCell
+            key={headCell.id}
+            align={headCell.align as TableCellProps["align"]}
+            sortDirection={orderBy === headCell.id ? order : false}
+            width={headCell.width}
+          >
+            {onRequestSort && headCell.sortable ? (
+              <TableSortLabel
+                active={orderBy === headCell.id}
+                onClick={() => onRequestSort(headCell.id)}
+                direction={orderBy === headCell.id ? order : "asc"}
+                sx={styles.sortLabel}
+                IconComponent={() =>
+                  order === "desc" && orderBy === headCell.id ? (
+                    <ExpandMore
+                      sx={{
+                        ...styles.sortIcon,
+                        visibility:
+                          orderBy === headCell.id ? "visible" : "hidden",
+                      }}
+                    />
+                  ) : (
+                    <ExpandLess
+                      sx={{
+                        ...styles.sortIcon,
+                        visibility:
+                          orderBy === headCell.id ? "visible" : "hidden",
+                      }}
+                    />
+                  )
+                }
+              >
+                {headCell.label}
+              </TableSortLabel>
+            ) : (
+              headCell.label
+            )}
+          </StyledTableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+const getStyles = (theme: Theme) => {
+  return {
+    sortLabel: {
+      "&:hover": {
+        color: "info.main",
+        "& .MuiSvgIcon-root": {
+          color: "info.main",
+          visibility: "visible",
+        },
+      },
+    },
+    sortIcon: {
+      marginLeft: theme.spacing(1),
+      color: "grey.800",
+    },
+  };
+};

package/src/components/data-table/table-pagination.tsx

@@ -0,0 +1,36 @@
+import Pagination, { PaginationProps } from "@mui/material/Pagination";
+import styled from "@mui/material/styles/styled";
+
+// STYLED COMPONENT
+const StyledPagination = styled(Pagination)(({ theme }) => ({
+  "& .MuiPaginationItem-root": {
+    fontSize: 14,
+    fontWeight: 500,
+    color: theme.palette.grey[900],
+    border: `1px solid transparent`,
+  },
+  "& .MuiPaginationItem-page:hover": {
+    borderRadius: 20,
+    backgroundColor: "transparent",
+    color: theme.palette.info.main,
+    border: `1px solid ${theme.palette.info.main}`,
+  },
+  "& .MuiPaginationItem-page.Mui-selected": {
+    borderRadius: 20,
+    backgroundColor: "transparent",
+    color: theme.palette.info.main,
+    border: `1px solid ${theme.palette.info.main}`,
+    ":hover": { backgroundColor: "transparent" },
+  },
+  "& .MuiPaginationItem-previousNext": {
+    margin: 10,
+    borderRadius: 20,
+    color: theme.palette.info.main,
+    border: `1px solid ${theme.palette.info.main}`,
+    "&:hover": { backgroundColor: "transparent" },
+  },
+}));
+
+export default function TablePagination(props: PaginationProps) {
+  return <StyledPagination {...props} />;
+}

package/src/components/data-table/table-row.tsx

@@ -0,0 +1,27 @@
+import styled from "@mui/material/styles/styled";
+import { TableRow, TableCell, IconButton } from "@mui/material";
+
+const StyledTableCell = styled(TableCell)(({ theme }) => ({
+  fontSize: 14,
+  paddingTop: 10,
+  fontWeight: 500,
+  paddingBottom: 10,
+  color: theme.palette.grey[900],
+  borderBottom: `1px solid ${theme.palette.grey[300]}`,
+}));
+
+const StyledTableRow = styled(TableRow)({
+  ":last-child .MuiTableCell-root": { border: 0 },
+  "&.Mui-selected": {
+    backgroundColor: "transparent",
+    ":hover": { backgroundColor: "transparent" },
+  },
+});
+
+const StyledIconButton = styled(IconButton)(({ theme }) => ({
+  color: theme.palette.grey[600],
+  "& .MuiSvgIcon-root": { fontSize: 19 },
+  ":hover": { color: theme.palette.info.main },
+}));
+
+export { StyledTableCell, StyledTableRow, StyledIconButton };

package/src/components/data-table/table-skeleton.tsx

@@ -0,0 +1,45 @@
+import { TableContainer, Table, TableBody, Skeleton } from "@mui/material";
+import { SxProps } from "@mui/material";
+
+import TableHeader, { Head } from "./table-header";
+import { StyledTableRow, StyledTableCell } from "./table-row";
+
+interface Props {
+  heading: Head[];
+  perPage: number;
+  sx?: SxProps;
+  rowSx?: SxProps;
+}
+
+export default function TableSkeleton(props: Props) {
+  const rangeArray: number[] = Array.from(
+    { length: props.perPage },
+    (_, i) => i,
+  );
+  return (
+    <TableContainer sx={props.sx}>
+      <Table>
+        <TableHeader
+          heading={props.heading}
+          order="asc"
+          orderBy=""
+          onRequestSort={() => {
+            // do nothing
+          }}
+          rowSx={props.rowSx}
+        />
+        <TableBody>
+          {rangeArray.map((i: number) => (
+            <StyledTableRow key={i} sx={props.rowSx}>
+              {props.heading.map((heading: Head) => (
+                <StyledTableCell key={`${i}_${heading.id}`}>
+                  <Skeleton />
+                </StyledTableCell>
+              ))}
+            </StyledTableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+}

package/src/components/execution/execution-filter.ts

@@ -0,0 +1,30 @@
+import {
+  DateRangeFilter,
+  Filters,
+  MultiSelectFilter,
+} from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
+
+export interface ExecutionsListFilters extends Filters {
+  dateRange: DateRangeFilter;
+  multiSelectFilter: MultiSelectFilter;
+}
+
+export const executionListFilters: ExecutionsListFilters = {
+  dateRange: {
+    type: "dateRange",
+    label: "Date Range",
+    value: null,
+  },
+  multiSelectFilter: {
+    type: "multiSelect",
+    label: "Execution Status",
+    value: null,
+    options: [
+      { id: 300, value: "Executions.inProgress" },
+      { id: 400, value: "Executions.complete" },
+      { id: 450, value: "Executions.warning" },
+      { id: 500, value: "Executions.failed" },
+      { id: 999, value: "Executions.unavailable" },
+    ],
+  },
+};

package/src/components/execution/execution-status-icon.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import { Box, Typography, SxProps } from "@mui/material";
+import {
+  RemoveRedEye,
+  Loop,
+  CheckCircleOutline,
+  WarningAmber,
+  ErrorOutline,
+  Clear,
+} from "@mui/icons-material";
+
+interface Props {
+  executionStatusId: string;
+  sx?: SxProps;
+}
+
+const ExecutionStatusIcon: React.FC<Props> = (props: Props) => {
+  const statusIconMap = {
+    300: <Loop color="info" />,
+    400: <CheckCircleOutline color="success" />,
+    450: <WarningAmber color="warning" />,
+    500: <ErrorOutline color="error" />,
+    999: <Clear sx={{ color: "grey.600" }} />,
+  };
+
+  return statusIconMap[props.executionStatusId] || statusIconMap[999];
+};
+
+export default ExecutionStatusIcon;

package/src/components/execution/execution-tag.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { useTranslations } from "next-intl";
+
+import { styled } from "@mui/material/styles";
+import { Box, Typography, SxProps } from "@mui/material";
+
+// Styled components
+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 {
+  executionStatusId: string;
+  sx?: SxProps;
+}
+
+const ExecutionTag: React.FC<Props> = (props: Props) => {
+  const t = useTranslations("Integrate");
+
+  const statusTagMap = {
+    300: (
+      <StyledTagBox
+        sx={{
+          backgroundColor: "info.100",
+          borderColor: "info.main",
+          ...props.sx,
+        }}
+      >
+        <StyledTag color="info" variant="caption">
+          {t("Executions.inProgress")}
+        </StyledTag>
+      </StyledTagBox>
+    ),
+    400: (
+      <StyledTagBox
+        sx={{
+          backgroundColor: "success.100",
+          borderColor: "success.main",
+          ...props.sx,
+        }}
+      >
+        <StyledTag color="success" variant="caption">
+          {t("Executions.complete")}
+        </StyledTag>
+      </StyledTagBox>
+    ),
+    450: (
+      <StyledTagBox
+        sx={{
+          backgroundColor: "warning.100",
+          borderColor: "orange.700",
+          color: "orange.700",
+          ...props.sx,
+        }}
+      >
+        <StyledTag color="inherit" variant="caption">
+          {t("Executions.warning")}
+        </StyledTag>
+      </StyledTagBox>
+    ),
+    500: (
+      <StyledTagBox
+        sx={{
+          backgroundColor: "error.100",
+          borderColor: "error.main",
+          ...props.sx,
+        }}
+      >
+        <StyledTag color="error" variant="caption">
+          {t("Executions.failed")}
+        </StyledTag>
+      </StyledTagBox>
+    ),
+    999: (
+      <StyledTagBox
+        sx={{
+          backgroundColor: "grey.300",
+          borderColor: "grey.600",
+          color: "grey.600",
+          ...props.sx,
+        }}
+      >
+        <StyledTag color="inherit" variant="caption">
+          {t("Executions.unavailable")}
+        </StyledTag>
+      </StyledTagBox>
+    ),
+  };
+
+  return statusTagMap[props.executionStatusId] || statusTagMap[999];
+};
+
+export default ExecutionTag;

package/src/components/execution/index.ts

@@ -0,0 +1,2 @@
+export { default as ExecutionTag } from "./execution-tag";
+export { default as ExecutionStatusIcon } from "./execution-status-icon";

package/src/components/footer/footer.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { useTranslations } from "next-intl";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import styled from "@mui/material/styles/styled";
+import { Typography, Box, Grid2 as Grid } from "@mui/material";
+import { Copyright } from "@mui/icons-material";
+
+// Styled components
+const Footer = styled("footer")(({ theme }) => ({
+  flexShrink: 0,
+  marginTop: "auto",
+}));
+
+const IntegrateFooter: React.FC = () => {
+  const t = useTranslations("Integrate.Footer");
+
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  return (
+    <Footer>
+      <Grid container spacing={0.5} sx={styles.container}>
+        <Grid>
+          <Box sx={{ ...styles.centered, color: "grey.500" }}>
+            <Copyright color="inherit" fontSize="small" />
+          </Box>
+        </Grid>
+        <Grid>
+          <Box sx={styles.centered}>
+            <Typography variant="caption" color="grey">
+              {t("copyright")}
+            </Typography>
+          </Box>
+        </Grid>
+      </Grid>
+    </Footer>
+  );
+};
+
+const getStyles = (theme: Theme) => {
+  return {
+    container: {
+      justifyContent: "center",
+      padding: theme.spacing(5, 0, 0),
+    },
+    centered: {
+      display: "grid",
+      alignItems: "center",
+    },
+  };
+};
+
+export default IntegrateFooter;

package/src/components/footer/index.ts

@@ -0,0 +1 @@
+export { default as IntegrateFooter } from "./footer";

package/src/components/header/dashboard-list-header.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { redirect, RedirectType } from "next/navigation";
+import { useTranslations } from "next-intl";
+
+// MUI
+import { Theme, useTheme } from "@mui/material";
+import { Grid2 as Grid, Box, Typography, Button } from "@mui/material";
+import { Refresh, VisibilityOutlined } from "@mui/icons-material";
+
+// Custom components
+import { OutlinedIconButton } from "../button";
+
+interface Props {
+  title: string;
+  url?: string;
+  handleRefresh?: () => void;
+}
+
+const DashboardListHeader: React.FC<Props> = (props: Props) => {
+  const t = useTranslations("Integrate.Dashboard");
+
+  const theme = useTheme();
+  const styles = getStyles(theme);
+
+  const handleViewAll = () => {
+    //Temporarily commented out until executions detail page is implemented
+    //redirect(props.url, RedirectType.push);
+  };
+
+  return (
+    <Grid container spacing={0}>
+      <Grid size={8}>
+        <Box sx={styles.title}>
+          <Typography variant="h6" sx={styles.typography}>
+            {props.title}
+          </Typography>
+        </Box>
+      </Grid>
+      <Grid size={4}>
+        <Box display="flex" justifyContent="flex-end">
+          {props.url && (
+            <Button
+              sx={styles.button}
+              variant="outlined"
+              color="info"
+              startIcon={<VisibilityOutlined />}
+              onClick={handleViewAll}
+            >
+              {t("ListHeader.viewAll")}
+            </Button>
+          )}
+          {props.handleRefresh && (
+            <OutlinedIconButton
+              sx={styles.iconButton}
+              color="info"
+              onClick={props.handleRefresh}
+            >
+              <Refresh />
+            </OutlinedIconButton>
+          )}
+        </Box>
+      </Grid>
+    </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),
+    },
+    iconButton: {
+      borderRadius: 1,
+    },
+  };
+};
+
+export default DashboardListHeader;

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

@@ -0,0 +1,154 @@
+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";
+
+// Custom components
+import ExecutionTag from "../execution/execution-tag";
+
+interface Execution {
+  name: string;
+  startDate: string;
+  endDate: string;
+  executionStatus: {
+    id: string;
+  };
+}
+
+interface Props {
+  execution: Execution;
+  handleRun?: () => void;
+}
+
+const ExecutionDetailsHeader: React.FC<Props> = (props: Props) => {
+  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 [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const open = Boolean(anchorEl);
+
+  const handlePopoverOpen = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  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>
+  );
+};
+
+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",
+    },
+  };
+};
+
+export default ExecutionDetailsHeader;