@asaleh37/ui-base 1.0.9 → 1.1.0

package/src/components/templates/TransferList.tsx

@@ -0,0 +1,250 @@
+import * as React from "react";
+import List from "@mui/material/List";
+import Card from "@mui/material/Card";
+import CardHeader from "@mui/material/CardHeader";
+import ListItem from "@mui/material/ListItem";
+import ListItemText from "@mui/material/ListItemText";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import Checkbox from "@mui/material/Checkbox";
+import Button from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
+import { Box, Grid2 } from "@mui/material";
+import TemplateTextField from "./DataEntryTemplates/TemplateDataForm/FormFields/TemplateTextField";
+
+function not(a, b) {
+  return a.filter((value) => b.indexOf(value) === -1);
+}
+
+function intersection(a, b) {
+  return a.filter((value) => b.indexOf(value) !== -1);
+}
+
+function union(a, b) {
+  return [...a, ...not(b, a)];
+}
+
+type TransferListProps = {
+  valueField: string;
+  displayField: string;
+  options: Array<any>;
+  selectedOptions: Array<any>;
+  setSelection: any;
+};
+
+const TransferList: React.FC<TransferListProps> = ({
+  valueField = "id",
+  displayField = "name",
+  options = [],
+  selectedOptions = [],
+  setSelection,
+}) => {
+  const [checked, setChecked] = React.useState([]);
+  const [left, setLeft] = React.useState(options);
+  const [right, setRight] = React.useState(selectedOptions);
+
+  const [leftFilterValue, setLeftFilterValue] = React.useState<string>("");
+  const [rightFilterValue, setRightFilterValue] = React.useState<string>("");
+
+  const leftChecked = intersection(checked, left);
+  const rightChecked = intersection(checked, right);
+
+  const handleToggle = (value) => () => {
+    const currentIndex = checked.indexOf(value);
+    const newChecked = [...checked];
+
+    if (currentIndex === -1) {
+      newChecked.push(value);
+    } else {
+      newChecked.splice(currentIndex, 1);
+    }
+
+    setChecked(newChecked);
+  };
+
+  const numberOfChecked = (items) => intersection(checked, items).length;
+
+  const handleToggleAll = (items) => () => {
+    if (numberOfChecked(items) === items.length) {
+      setChecked(not(checked, items));
+    } else {
+      setChecked(union(checked, items));
+    }
+  };
+
+  const handleCheckedRight = () => {
+    setRight((oldState) => {
+      let newState = right.concat(leftChecked);
+      setSelection(newState);
+      return newState;
+    });
+    setLeft(not(left, leftChecked));
+    setChecked(not(checked, leftChecked));
+  };
+
+  const handleCheckedLeft = () => {
+    setLeft(left.concat(rightChecked));
+    setRight((oldState) => {
+      let newState = not(right, rightChecked);
+      setSelection(newState);
+      return newState;
+    });
+    setChecked(not(checked, rightChecked));
+  };
+
+  const customList = (
+    title: string,
+    unfilteredItems: Array<any>,
+    side: "left" | "right"
+  ) => {
+    const items = unfilteredItems.filter((option: any) => {
+      if (option[displayField]) {
+        const value: string = option[displayField];
+        if (
+          side === "left" &&
+          value
+            .toLocaleLowerCase()
+            .includes(leftFilterValue.toLocaleLowerCase())
+        ) {
+          return true;
+        } else if (
+          side === "right" &&
+          value
+            .toLocaleLowerCase()
+            .includes(rightFilterValue.toLocaleLowerCase())
+        ) {
+          return true;
+        }
+      }
+      return false;
+    });
+    return (
+      <Card sx={{ height: "100%" }}>
+        <CardHeader
+          sx={{ px: 2, py: 1 }}
+          avatar={
+            <Checkbox
+              onClick={handleToggleAll(items)}
+              checked={
+                numberOfChecked(items) === items.length && items.length !== 0
+              }
+              indeterminate={
+                numberOfChecked(items) !== items.length &&
+                numberOfChecked(items) !== 0
+              }
+              disabled={items.length === 0}
+              inputProps={{
+                "aria-label": "all items selected",
+              }}
+            />
+          }
+          title={title}
+          subheader={`${numberOfChecked(unfilteredItems)} / ${
+            unfilteredItems.length
+          } Selected`}
+        />
+        <Box sx={{ width: "100%", padding: 1 }}>
+          <TemplateTextField
+            fullWidth
+            label="search"
+            value={side === "left" ? leftFilterValue : rightFilterValue}
+            onChange={(event) => {
+              if (side === "left") {
+                setLeftFilterValue(event.target.value);
+              } else {
+                setRightFilterValue(event.target.value);
+              }
+            }}
+          />
+        </Box>
+        <Divider />
+        <List
+          sx={{
+            width: "100%",
+            height: "100%",
+            bgcolor: "secondary",
+            overflow: "auto",
+          }}
+          dense
+          component="div"
+          role="list"
+        >
+          {items.map((value) => {
+            const labelId = `transfer-list-all-item-${value[valueField]}-label`;
+
+            return (
+              <ListItem
+                key={value[valueField]}
+                role="listitem"
+                component="button"
+                onClick={handleToggle(value)}
+              >
+                <ListItemIcon>
+                  <Checkbox
+                    checked={checked.indexOf(value) !== -1}
+                    tabIndex={-1}
+                    disableRipple
+                    inputProps={{
+                      "aria-labelledby": labelId,
+                    }}
+                  />
+                </ListItemIcon>
+                <ListItemText
+                  id={value[valueField]}
+                  primary={value[displayField]}
+                />
+              </ListItem>
+            );
+          })}
+        </List>
+      </Card>
+    );
+  };
+  return (
+    <Grid2
+      container
+      spacing={2}
+      sx={{
+        flexGrow: 1,
+        overflow: "auto",
+        margin: 1,
+        display: "flex",
+        width: "100%",
+      }}
+      justifyContent="center"
+      alignItems="center"
+    >
+      <Grid2 sx={{ height: "100%", flex: 1 }}>
+        {customList("Available Items", left, "left")}
+      </Grid2>
+      <Grid2>
+        <Grid2 container direction="column" alignItems="center">
+          <Button
+            sx={{ my: 0.5 }}
+            variant="outlined"
+            size="small"
+            onClick={handleCheckedRight}
+            disabled={leftChecked.length === 0}
+            aria-label="move selected right"
+          >
+            &gt;
+          </Button>
+          <Button
+            sx={{ my: 0.5 }}
+            variant="outlined"
+            size="small"
+            onClick={handleCheckedLeft}
+            disabled={rightChecked.length === 0}
+            aria-label="move selected left"
+          >
+            &lt;
+          </Button>
+        </Grid2>
+      </Grid2>
+      <Grid2 sx={{ height: "100%", flex: 1 }}>
+        {customList("Currently Selected", right, "right")}
+      </Grid2>
+    </Grid2>
+  );
+};
+
+export default TransferList;

package/src/components/templates/Window/ConfirmationWindow.tsx

@@ -0,0 +1,55 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import { useTranslation } from "react-i18next";
+
+interface ConfirmationWindowProps {
+  open: boolean;
+  setOpen: Function;
+  title: string;
+  body: string;
+  onConfirmationCallBk: Function;
+}
+const ConfirmationWindow: React.FC<ConfirmationWindowProps> = (props) => {
+  const handleClose = () => {
+    props.setOpen(false);
+  };
+  const { t } = useTranslation();
+  return (
+    <Dialog open={props.open}>
+      <DialogTitle>{props.title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{props.body}</DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => {
+            handleClose();
+          }}
+        >
+          {t("NO_LABEL")}
+        </Button>
+        <Button
+          variant="contained"
+          color="error"
+          onClick={() => {
+            props.onConfirmationCallBk();
+            handleClose();
+          }}
+          autoFocus
+        >
+          {t("YES_LABEL")}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ConfirmationWindow;

package/src/components/templates/visuals/TemplateDashboard.tsx

@@ -0,0 +1,126 @@
+import Grid from "@mui/material/Grid2";
+import TemplatePieChart from "./charts/TemplatePieChart";
+import TemplateBarChart from "./charts/TemplateBarChart";
+import TemplateLineChart from "./charts/TemplateLineChart";
+import TemplateGauge from "./charts/TemplateGauge";
+import TemplateDataCard from "./charts/TemplateDataCard";
+import TemplateLineProgress from "./charts/TemplateLineProgress";
+import { Typography } from "@mui/material";
+
+interface WidgetContainerProps {
+  children: React.ReactNode;
+  widgetType: "Line" | "Bar" | "Pie" | "Card" | "Gauge" | "Progress";
+}
+
+export interface WidgetProps {
+  widgetTitle?: string;
+  widgetType: "Line" | "Bar" | "Pie" | "Card" | "Gauge" | "Progress";
+  data: any;
+  valueField: string; //x-axis field in case of line/bar chart
+  labelField: string; //y-axis field in case of line/bar chart, it can also be a comma separated string for multiple series
+}
+
+export interface SingleRecordWidgetProps {
+  widgetTitle?: string;
+  record: object;
+  valueField: string;
+  labelField: string;
+}
+
+interface DashboardProps {
+  dashboardTitle: string;
+  dashboardWidgets: Array<WidgetProps>;
+}
+
+const WidgetContainer: React.FC<WidgetContainerProps> = ({
+  children,
+  widgetType,
+}) => {
+  return (
+    <Grid
+      size={{ xs: 12, sm: 6, md: 4 }}
+      sx={{
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 1,
+        display: "flex",
+        flexDirection: widgetType != "Card" ? "column" : undefined,
+        height: 300,
+      }}
+    >
+      {children}
+    </Grid>
+  );
+};
+
+const TemplateDashboard: React.FC<DashboardProps> = (props) => {
+  return (
+    <>
+      <Typography sx={{ fontSize: 20, fontWeight: "bold" }}>
+        {props.dashboardTitle}
+      </Typography>
+      <Grid
+        container
+        sx={{
+          flexGrow: 1,
+          width: "100%",
+          overflowY: "auto",
+          padding: 2,
+        }}
+      >
+        {props.dashboardWidgets.map((widgetProps: any, index: any) => {
+          if (
+            widgetProps.widgetType === "Card" ||
+            widgetProps.widgetType === "Gauge" ||
+            widgetProps.widgetType === "Progress"
+          ) {
+            return (
+              <>
+                {widgetProps.data.map((record: any, index: any) => {
+                  const singleRecordWidgetProps: SingleRecordWidgetProps = {
+                    widgetTitle: widgetProps.widgetTitle,
+                    record,
+                    labelField: widgetProps.labelField,
+                    valueField: widgetProps.valueField,
+                  };
+                  return (
+                    <WidgetContainer
+                      key={index}
+                      widgetType={widgetProps.widgetType}
+                    >
+                      {widgetProps.widgetType === "Card" ? (
+                        <TemplateDataCard {...singleRecordWidgetProps} />
+                      ) : null}
+                      {widgetProps.widgetType === "Gauge" ? (
+                        <TemplateGauge {...singleRecordWidgetProps} />
+                      ) : null}
+                      {widgetProps.widgetType === "Progress" ? (
+                        <TemplateLineProgress {...singleRecordWidgetProps} />
+                      ) : null}
+                    </WidgetContainer>
+                  );
+                })}
+              </>
+            );
+          } else {
+            return (
+              <WidgetContainer key={index} widgetType={widgetProps.widgetType}>
+                {widgetProps.widgetType === "Pie" ? (
+                  <TemplatePieChart {...widgetProps} />
+                ) : null}
+                {widgetProps.widgetType === "Line" ? (
+                  <TemplateLineChart {...widgetProps} />
+                ) : null}
+                {widgetProps.widgetType === "Bar" ? (
+                  <TemplateBarChart {...widgetProps} />
+                ) : null}
+              </WidgetContainer>
+            );
+          }
+        })}
+      </Grid>
+    </>
+  );
+};
+
+export default TemplateDashboard;

package/src/components/templates/visuals/charts/TemplateBarChart.tsx

@@ -0,0 +1,16 @@
+import { BarChart } from "@mui/x-charts";
+import { WidgetProps } from "../TemplateDashboard";
+
+const TemplateBarChart: React.FC<WidgetProps> = (props) => {
+  return (
+    <BarChart
+      dataset={props.data}
+      xAxis={[{ dataKey: props.valueField, scaleType: "band" }]}
+      series={props.labelField?.split(",").map((labelField) => {
+        return { dataKey: labelField, label: labelField };
+      })}
+    />
+  );
+};
+
+export default TemplateBarChart;

package/src/components/templates/visuals/charts/TemplateDataCard.tsx

@@ -0,0 +1,60 @@
+import { Box, Paper, Typography } from "@mui/material";
+import { SingleRecordWidgetProps } from "../TemplateDashboard";
+
+const TemplateDataCard: React.FC<SingleRecordWidgetProps> = (props: any) => {
+  return (
+    <Paper
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        height: 150,
+        padding: 1,
+        flexGrow: 1,
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          width: "100%",
+          justifyContent: "space-evenly",
+          alignItems: "center",
+        }}
+      >
+        <Typography sx={{ fontSize: 16, fontWeight: "bold" }}>
+          {props.widgetTitle}
+        </Typography>
+      </Box>
+      <Box
+        sx={{
+          flex: 1,
+          display: "flex",
+          width: "100%",
+          justifyContent: "space-evenly",
+          alignItems: "center",
+        }}
+      >
+        {/* <div>left</div> */}
+        <div>{`${props.record[props.labelField]} : ${
+          props.record[props.valueField]
+        }`}</div>
+        {/* <div>right</div> */}
+      </Box>
+      <Box
+        sx={{
+          display: "flex",
+          width: "100%",
+          justifyContent: "space-evenly",
+          alignItems: "center",
+        }}
+      >
+        {/* <div>left</div>
+        <div>center</div>
+        <div>right</div> */}
+      </Box>
+    </Paper>
+  );
+};
+
+export default TemplateDataCard;

package/src/components/templates/visuals/charts/TemplateGauge.tsx

@@ -0,0 +1,16 @@
+import { Gauge } from "@mui/x-charts";
+import { SingleRecordWidgetProps } from "../TemplateDashboard";
+import { Typography } from "@mui/material";
+
+const TemplateGauge: React.FC<SingleRecordWidgetProps> = (props: any) => {
+  return (
+    <>
+      <Typography sx={{ fontSize: 16, fontWeight: "bold" }}>
+        {props.widgetTitle} - {props.record[props.labelField]}
+      </Typography>
+      <Gauge width={200} height={200} value={props.record[props.valueField]} />
+    </>
+  );
+};
+
+export default TemplateGauge;

package/src/components/templates/visuals/charts/TemplateLineChart.tsx

@@ -0,0 +1,16 @@
+import { LineChart } from "@mui/x-charts";
+import { WidgetProps } from "../TemplateDashboard";
+
+const TemplateLineChart: React.FC<WidgetProps> = (props) => {
+  return (
+    <LineChart
+      dataset={props.data}
+      xAxis={[{ dataKey: props.valueField, scaleType: "band" }]}
+      series={props.labelField?.split(",").map((labelField) => {
+        return { dataKey: labelField, label: labelField };
+      })}
+    />
+  );
+};
+
+export default TemplateLineChart;

package/src/components/templates/visuals/charts/TemplateLineProgress.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import LinearProgress, {
+  LinearProgressProps,
+} from "@mui/material/LinearProgress";
+import Typography from "@mui/material/Typography";
+import Box from "@mui/material/Box";
+import { SingleRecordWidgetProps } from "../TemplateDashboard";
+
+function LinearProgressWithLabel(
+  props: LinearProgressProps & { value: number }
+) {
+  return (
+    <Box sx={{ display: "flex", alignItems: "center" }}>
+      <Box sx={{ width: "100%", mr: 1 }}>
+        <LinearProgress variant="determinate" {...props} />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>
+        <Typography
+          variant="body2"
+          sx={{ color: "text.secondary" }}
+        >{`${Math.round(props.value)}%`}</Typography>
+      </Box>
+    </Box>
+  );
+}
+
+const TemplateLineProgress: React.FC<SingleRecordWidgetProps> = (
+  props: any
+) => {
+  return (
+    <Box sx={{ width: "100%" }}>
+      <Typography sx={{ fontSize: 16, fontWeight: "bold" }}>
+        {props.widgetTitle} - {props.record[props.labelField]}
+      </Typography>
+      <LinearProgressWithLabel value={props.record[props.valueField]} />
+    </Box>
+  );
+};
+
+export default TemplateLineProgress;

package/src/components/templates/visuals/charts/TemplatePieChart.tsx

@@ -0,0 +1,25 @@
+import { PieChart } from "@mui/x-charts/PieChart";
+import { WidgetProps } from "../TemplateDashboard";
+
+const TemplatePieChart: React.FC<WidgetProps> = (props) => {
+  // construct data object
+  const chartData = props.data.map((record: any, index: any) => {
+    return {
+      id: index,
+      value: record[props.valueField],
+      label: record[props.labelField] + "",
+    };
+  });
+  console.log("chartData", chartData);
+  return (
+    <PieChart
+      series={[
+        {
+          data: chartData,
+        },
+      ]}
+    />
+  );
+};
+
+export default TemplatePieChart;

package/src/hooks/UseConfirmationWindow.tsx

@@ -0,0 +1,54 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+interface ConfirmationWindowProps {
+  title: string;
+  body: string;
+  onConfirmationCallBk: () => void;
+}
+
+export const useConfirmationWindow = (props: ConfirmationWindowProps) => {
+  const [open, setOpen] = useState<boolean>(false);
+  const { t } = useTranslation();
+  const ConfirmationWindow: React.FC = () => {
+    return (
+      <Dialog open={open}>
+        <DialogTitle>{props.title}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>{props.body}</DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              setOpen(false);
+            }}
+          >
+            {t("NO_LABEL")}
+          </Button>
+          <Button
+            variant="contained"
+            color="error"
+            onClick={() => {
+              props.onConfirmationCallBk();
+              setOpen(false);
+            }}
+            autoFocus
+          >
+            {t("YES_LABEL")}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    );
+  };
+  return { ConfirmationWindow, open, setOpen };
+};

package/src/hooks/UseMobile.tsx

@@ -0,0 +1,13 @@
+import { useEffect, useState } from "react";
+
+export const useIsMobile = (breakpoint = 768) => {
+  const [isMobile, setIsMobile] = useState(window.innerWidth < breakpoint);
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth < breakpoint);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [breakpoint]);
+
+  return isMobile;
+};