@evenicanpm/admin-integrate 1.1.0 → 1.2.0

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

@@ -10,100 +10,104 @@ import { ExpandLess, ExpandMore } from "@mui/icons-material";
 
 // STYLED COMPONENTS
 const StyledTableCell = styled(TableCell)(({ theme }) => ({
-  fontWeight: 500,
-  padding: "16px 20px",
-  color: theme.palette.grey[900],
+	fontWeight: 500,
+	padding: "16px 20px",
+	color: theme.palette.grey[900],
 }));
 
 // ==============================================================
 export type Head = {
-  id: string;
-  label: string;
-  align: string;
-  width: string;
-  sortable?: boolean;
+	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;
+	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,
+	order,
+	heading,
+	orderBy,
+	onRequestSort,
+	rowSx,
 }: Props) {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+	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>
-  );
+	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}
+						sx={styles.cell}
+					>
+						{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",
-    },
-  };
+	return {
+		sortLabel: {
+			"&:hover": {
+				color: "info.main",
+				"& .MuiSvgIcon-root": {
+					color: "info.main",
+					visibility: "visible",
+				},
+			},
+		},
+		sortIcon: {
+			marginLeft: theme.spacing(1),
+			color: "grey.800",
+		},
+		cell: {
+			borderWidth: theme.spacing(0),
+		},
+	};
 };

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

@@ -3,34 +3,34 @@ 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" },
-  },
+	"& .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} />;
+	return <StyledPagination {...props} />;
 }

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

@@ -2,26 +2,26 @@ 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]}`,
+	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" },
-  },
+	":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 },
+	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

@@ -5,41 +5,41 @@ import TableHeader, { Head } from "./table-header";
 import { StyledTableRow, StyledTableCell } from "./table-row";
 
 interface Props {
-  heading: Head[];
-  perPage: number;
-  sx?: SxProps;
-  rowSx?: SxProps;
+	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>
-  );
+	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

@@ -1,30 +1,30 @@
 import {
-  DateRangeFilter,
-  Filters,
-  MultiSelectFilter,
+	DateRangeFilter,
+	Filters,
+	MultiSelectFilter,
 } from "@evenicanpm/admin-integrate/components/list-filter/list-filter-types";
 
 export interface ExecutionsListFilters extends Filters {
-  dateRange: DateRangeFilter;
-  multiSelectFilter: MultiSelectFilter;
+	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" },
-    ],
-  },
+	dateRange: {
+		type: "dateRange",
+		label: "Executions.dateRange",
+		value: null,
+	},
+	multiSelectFilter: {
+		type: "multiSelect",
+		label: "Executions.executionStatus",
+		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

@@ -1,30 +1,29 @@
 import React from "react";
 
-import { Box, Typography, SxProps } from "@mui/material";
+import { SxProps } from "@mui/material";
 import {
-  RemoveRedEye,
-  Loop,
-  CheckCircleOutline,
-  WarningAmber,
-  ErrorOutline,
-  Clear,
+	Loop,
+	CheckCircleOutline,
+	WarningAmber,
+	ErrorOutline,
+	Clear,
 } from "@mui/icons-material";
 
 interface Props {
-  executionStatusId: string;
-  sx?: SxProps;
+	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" }} />,
-  };
+	const statusIconMap: { [key: string]: any } = {
+		"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];
+	return statusIconMap[props.executionStatusId] || statusIconMap["999"];
 };
 
 export default ExecutionStatusIcon;

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

@@ -6,95 +6,96 @@ 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",
+	padding: theme.spacing(0, 1.5),
+	border: "solid 1px",
+	borderRadius: 4,
+	alignContent: "center",
+	maxWidth: "fit-content",
+	maxHeight: "fit-content",
 }));
-const StyledTag = styled(Typography)(({ theme }) => ({
-  fontWeight: "bold",
+const StyledTag = styled(Typography)(() => ({
+	fontWeight: "bold",
 }));
 
 interface Props {
-  executionStatusId: string;
-  sx?: SxProps;
+	executionStatusId: string;
+	sx?: SxProps;
 }
 
 const ExecutionTag: React.FC<Props> = (props: Props) => {
-  const t = useTranslations("Integrate");
+	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>
-    ),
-  };
+	const statusTagMap: { [key: string]: any } = {
+		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];
+	return statusTagMap[props.executionStatusId] || statusTagMap[999];
 };
 
 export default ExecutionTag;