@canmingir/link 1.2.0 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/src/lib/CustomBreadcrumbs/CustomBreadcrumbs.jsx

@@ -0,0 +1,88 @@
+import Box from "@mui/material/Box";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Link from "@mui/material/Link";
+import LinkItem from "./link-item";
+import PropTypes from "prop-types";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+
+export default function CustomBreadcrumbs({
+  links,
+  action,
+  heading,
+  moreLink,
+  activeLast,
+  sx,
+  ...other
+}) {
+  const lastLink = links[links.length - 1].name;
+
+  return (
+    <Box sx={{ ...sx }}>
+      <Stack direction="row" alignItems="center">
+        <Box sx={{ flexGrow: 1 }}>
+          {heading && (
+            <Typography variant="h4" gutterBottom>
+              {heading}
+            </Typography>
+          )}
+
+          {!!links.length && (
+            <Breadcrumbs separator={<Separator />} {...other}>
+              {links.map((link) => (
+                <LinkItem
+                  key={link.name || ""}
+                  link={link}
+                  activeLast={activeLast}
+                  disabled={link.name === lastLink}
+                />
+              ))}
+            </Breadcrumbs>
+          )}
+        </Box>
+
+        {action && <Box sx={{ flexShrink: 0 }}> {action} </Box>}
+      </Stack>
+
+      {!!moreLink && (
+        <Box sx={{ mt: 2 }}>
+          {moreLink.map((href) => (
+            <Link
+              key={href}
+              href={href}
+              variant="body2"
+              target="_blank"
+              rel="noopener"
+              sx={{ display: "table" }}
+            >
+              {href}
+            </Link>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+CustomBreadcrumbs.propTypes = {
+  sx: PropTypes.object,
+  action: PropTypes.node,
+  links: PropTypes.array,
+  heading: PropTypes.string,
+  moreLink: PropTypes.array,
+  activeLast: PropTypes.bool,
+};
+
+function Separator() {
+  return (
+    <Box
+      component="span"
+      sx={{
+        width: 4,
+        height: 4,
+        borderRadius: "50%",
+        bgcolor: "text.disabled",
+      }}
+    />
+  );
+}

package/src/lib/CustomBreadcrumbs/index.js

@@ -0,0 +1 @@
+export { default } from "./CustomBreadcrumbs";

package/src/lib/CustomBreadcrumbs/link-item.jsx

@@ -0,0 +1,58 @@
+import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import PropTypes from "prop-types";
+import { RouterLink } from "../../routes/components/router-link";
+
+export default function BreadcrumbsLink({ link, activeLast, disabled }) {
+  const styles = {
+    typography: "body2",
+    alignItems: "center",
+    color: "text.primary",
+    display: "inline-flex",
+    ...(disabled &&
+      !activeLast && {
+        cursor: "default",
+        pointerEvents: "none",
+        color: "text.disabled",
+      }),
+  };
+
+  const renderContent = (
+    <>
+      {link.icon && (
+        <Box
+          component="span"
+          sx={{
+            mr: 1,
+            display: "inherit",
+            "& svg": { width: 20, height: 20 },
+          }}
+        >
+          {link.icon}
+        </Box>
+      )}
+
+      {link.name}
+    </>
+  );
+
+  if (link.href) {
+    return (
+      <Link component={RouterLink} href={link.href} sx={styles}>
+        {renderContent}
+      </Link>
+    );
+  }
+
+  return <Box sx={styles}> {renderContent} </Box>;
+}
+
+BreadcrumbsLink.propTypes = {
+  activeLast: PropTypes.bool,
+  disabled: PropTypes.bool,
+  link: PropTypes.shape({
+    href: PropTypes.string,
+    icon: PropTypes.node,
+    name: PropTypes.string,
+  }),
+};

package/src/lib/CustomPopover/CustomPopover.jsx

@@ -0,0 +1,46 @@
+import Popover from "@mui/material/Popover";
+import React from "react";
+import { StyledArrow } from "./styles";
+import { getPosition } from "./utils";
+import { menuItemClasses } from "@mui/material/MenuItem";
+
+export default function CustomPopover({
+  open,
+  children,
+  arrow = "top-right",
+  hiddenArrow,
+  sx,
+  ...other
+}) {
+  const { style, anchorOrigin, transformOrigin } = getPosition(arrow);
+
+  return (
+    <Popover
+      open={Boolean(open)}
+      anchorEl={open}
+      anchorOrigin={anchorOrigin}
+      transformOrigin={transformOrigin}
+      slotProps={{
+        paper: {
+          sx: {
+            width: "auto",
+            overflow: "inherit",
+            ...style,
+            [`& .${menuItemClasses.root}`]: {
+              "& svg": {
+                mr: 2,
+                flexShrink: 0,
+              },
+            },
+            ...sx,
+          },
+        },
+      }}
+      {...other}
+    >
+      {!hiddenArrow && <StyledArrow arrow={arrow} />}
+
+      {children}
+    </Popover>
+  );
+}

package/src/lib/CustomPopover/index.js

@@ -0,0 +1,3 @@
+export { default } from "./CustomPopover";
+
+export { default as usePopover } from "./usePopover";

package/src/lib/CustomPopover/styles.js

@@ -0,0 +1,82 @@
+import { alpha, styled } from "@mui/material/styles";
+
+import { bgBlur } from "../../theme/css";
+
+export const StyledArrow = styled("span")(({ arrow, theme }) => {
+  const SIZE = 14;
+
+  const POSITION = -(SIZE / 2) + 0.5;
+
+  const topStyle = {
+    top: POSITION,
+    transform: "rotate(135deg)",
+  };
+
+  const bottomStyle = {
+    bottom: POSITION,
+    transform: "rotate(-45deg)",
+  };
+
+  const leftStyle = {
+    left: POSITION,
+    transform: "rotate(45deg)",
+  };
+
+  const rightStyle = {
+    right: POSITION,
+    transform: "rotate(-135deg)",
+  };
+
+  return {
+    width: SIZE,
+    height: SIZE,
+    position: "absolute",
+    borderBottomLeftRadius: SIZE / 4,
+    clipPath: "polygon(0% 0%, 100% 100%, 0% 100%)",
+    border: `solid 1px ${alpha(
+      theme.palette.mode === "light"
+        ? theme.palette.grey[500]
+        : theme.palette.common.black,
+      0.12
+    )}`,
+    ...bgBlur({
+      color: theme.palette.background.paper,
+    }),
+    // Top
+    ...(arrow === "top-left" && { ...topStyle, left: 20 }),
+    ...(arrow === "top-center" && {
+      ...topStyle,
+      left: 0,
+      right: 0,
+      margin: "auto",
+    }),
+    ...(arrow === "top-right" && { ...topStyle, right: 20 }),
+    // Bottom
+    ...(arrow === "bottom-left" && { ...bottomStyle, left: 20 }),
+    ...(arrow === "bottom-center" && {
+      ...bottomStyle,
+      left: 0,
+      right: 0,
+      margin: "auto",
+    }),
+    ...(arrow === "bottom-right" && { ...bottomStyle, right: 20 }),
+    // Left
+    ...(arrow === "left-top" && { ...leftStyle, top: 20 }),
+    ...(arrow === "left-center" && {
+      ...leftStyle,
+      top: 0,
+      bottom: 0,
+      margin: "auto",
+    }),
+    ...(arrow === "left-bottom" && { ...leftStyle, bottom: 20 }),
+    // Right
+    ...(arrow === "right-top" && { ...rightStyle, top: 20 }),
+    ...(arrow === "right-center" && {
+      ...rightStyle,
+      top: 0,
+      bottom: 0,
+      margin: "auto",
+    }),
+    ...(arrow === "right-bottom" && { ...rightStyle, bottom: 20 }),
+  };
+});

package/src/lib/CustomPopover/usePopover.js

@@ -0,0 +1,20 @@
+import { useCallback, useState } from "react";
+
+export default function usePopover() {
+  const [open, setOpen] = useState(null);
+
+  const onOpen = useCallback((event) => {
+    setOpen(event.currentTarget);
+  }, []);
+
+  const onClose = useCallback(() => {
+    setOpen(null);
+  }, []);
+
+  return {
+    open,
+    onOpen,
+    onClose,
+    setOpen,
+  };
+}

package/src/lib/CustomPopover/utils.js

@@ -0,0 +1,100 @@
+export function getPosition(arrow) {
+  let props;
+
+  switch (arrow) {
+    case "top-left":
+      props = {
+        style: { ml: -0.75 },
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
+      };
+      break;
+    case "top-center":
+      props = {
+        style: {},
+        anchorOrigin: { vertical: "bottom", horizontal: "center" },
+        transformOrigin: { vertical: "top", horizontal: "center" },
+      };
+      break;
+    case "top-right":
+      props = {
+        style: { ml: 0.75 },
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+      };
+      break;
+    case "bottom-left":
+      props = {
+        style: { ml: -0.75 },
+        anchorOrigin: { vertical: "top", horizontal: "left" },
+        transformOrigin: { vertical: "bottom", horizontal: "left" },
+      };
+      break;
+    case "bottom-center":
+      props = {
+        style: {},
+        anchorOrigin: { vertical: "top", horizontal: "center" },
+        transformOrigin: { vertical: "bottom", horizontal: "center" },
+      };
+      break;
+    case "bottom-right":
+      props = {
+        style: { ml: 0.75 },
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        transformOrigin: { vertical: "bottom", horizontal: "right" },
+      };
+      break;
+    case "left-top":
+      props = {
+        style: { mt: -0.75 },
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
+      };
+      break;
+    case "left-center":
+      props = {
+        style: {},
+        anchorOrigin: { vertical: "center", horizontal: "right" },
+        transformOrigin: { vertical: "center", horizontal: "left" },
+      };
+      break;
+    case "left-bottom":
+      props = {
+        style: { mt: 0.75 },
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "bottom", horizontal: "left" },
+      };
+      break;
+    case "right-top":
+      props = {
+        style: { mt: -0.75 },
+        anchorOrigin: { vertical: "top", horizontal: "left" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+      };
+      break;
+    case "right-center":
+      props = {
+        style: {},
+        anchorOrigin: { vertical: "center", horizontal: "left" },
+        transformOrigin: { vertical: "center", horizontal: "right" },
+      };
+      break;
+    case "right-bottom":
+      props = {
+        style: { mt: 0.75 },
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        transformOrigin: { vertical: "bottom", horizontal: "right" },
+      };
+      break;
+
+    // top-right
+    default:
+      props = {
+        style: { ml: 0.75 },
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+      };
+  }
+
+  return props;
+}

package/src/lib/FormProvider/FormProvider.jsx

@@ -0,0 +1,16 @@
+import { FormProvider as Form } from "react-hook-form";
+import PropTypes from "prop-types";
+
+export default function FormProvider({ children, onSubmit, methods }) {
+  return (
+    <Form {...methods}>
+      <form onSubmit={onSubmit}>{children}</form>
+    </Form>
+  );
+}
+
+FormProvider.propTypes = {
+  children: PropTypes.node,
+  methods: PropTypes.object,
+  onSubmit: PropTypes.func,
+};

package/src/lib/FormProvider/index.js

@@ -0,0 +1 @@
+export { default } from "./FormProvider";

package/src/lib/Image/Image.jsx

@@ -0,0 +1,116 @@
+import { alpha, useTheme } from "@mui/material/styles";
+
+import Box from "@mui/material/Box";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import React from "react";
+import { forwardRef } from "react";
+import { getRatio } from "./utils";
+
+const Image = forwardRef(
+  (
+    {
+      ratio,
+      overlay,
+      disabledEffect = false,
+      alt,
+      src,
+      afterLoad,
+      delayTime,
+      threshold,
+      beforeLoad,
+      delayMethod,
+      placeholder,
+      wrapperProps,
+      scrollPosition,
+      effect = "blur",
+      visibleByDefault,
+      wrapperClassName,
+      useIntersectionObserver,
+      sx,
+      ...other
+    },
+    ref
+  ) => {
+    const theme = useTheme();
+
+    const overlayStyles = !!overlay && {
+      "&:before": {
+        content: "''",
+        top: 0,
+        left: 0,
+        width: 1,
+        height: 1,
+        zIndex: 1,
+        position: "absolute",
+        background: overlay || alpha(theme.palette.grey[900], 0.48),
+      },
+    };
+
+    const content = (
+      <Box
+        component={LazyLoadImage}
+        alt={alt}
+        src={src}
+        afterLoad={afterLoad}
+        delayTime={delayTime}
+        threshold={threshold}
+        beforeLoad={beforeLoad}
+        delayMethod={delayMethod}
+        placeholder={placeholder}
+        wrapperProps={wrapperProps}
+        scrollPosition={scrollPosition}
+        visibleByDefault={visibleByDefault}
+        effect={disabledEffect ? undefined : effect}
+        useIntersectionObserver={useIntersectionObserver}
+        wrapperClassName={wrapperClassName || "component-image-wrapper"}
+        placeholderSrc={
+          disabledEffect ? "/assets/transparent.png" : "/assets/placeholder.svg"
+        }
+        sx={{
+          width: 1,
+          height: 1,
+          objectFit: "cover",
+          verticalAlign: "bottom",
+          ...(!!ratio && {
+            top: 0,
+            left: 0,
+            position: "absolute",
+          }),
+        }}
+      />
+    );
+
+    return (
+      <Box
+        ref={ref}
+        component="span"
+        className="component-image"
+        sx={{
+          overflow: "hidden",
+          position: "relative",
+          verticalAlign: "bottom",
+          display: "inline-block",
+          ...(!!ratio && {
+            width: 1,
+          }),
+          "& span.component-image-wrapper": {
+            width: 1,
+            height: 1,
+            verticalAlign: "bottom",
+            backgroundSize: "cover !important",
+            ...(!!ratio && {
+              pt: getRatio(ratio),
+            }),
+          },
+          ...overlayStyles,
+          ...sx,
+        }}
+        {...other}
+      >
+        {content}
+      </Box>
+    );
+  }
+);
+
+export default Image;

package/src/lib/Image/index.js

@@ -0,0 +1 @@
+export { default } from "./Image";

package/src/lib/Image/utils.js

@@ -0,0 +1,15 @@
+// ----------------------------------------------------------------------
+
+export function getRatio(ratio = "1/1") {
+  return {
+    "4/3": "calc(100% / 4 * 3)",
+    "3/4": "calc(100% / 3 * 4)",
+    "6/4": "calc(100% / 6 * 4)",
+    "4/6": "calc(100% / 4 * 6)",
+    "16/9": "calc(100% / 16 * 9)",
+    "9/16": "calc(100% / 9 * 16)",
+    "21/9": "calc(100% / 21 * 9)",
+    "9/21": "calc(100% / 9 * 21)",
+    "1/1": "100%",
+  }[ratio];
+}

package/src/lib/Label/Label.jsx

@@ -0,0 +1,51 @@
+import Box from "@mui/material/Box";
+import React from "react";
+import { StyledLabel } from "./styles";
+import { forwardRef } from "react";
+import { useTheme } from "@mui/material/styles";
+
+const Label = forwardRef(
+  (
+    {
+      children,
+      color = "default",
+      variant = "soft",
+      startIcon,
+      endIcon,
+      sx,
+      ...other
+    },
+    ref
+  ) => {
+    const theme = useTheme();
+
+    const iconStyles = {
+      width: 16,
+      height: 16,
+      "& svg, img": { width: 1, height: 1, objectFit: "cover" },
+    };
+
+    return (
+      <StyledLabel
+        ref={ref}
+        component="span"
+        ownerState={{ color, variant }}
+        sx={{
+          ...(startIcon && { pl: 0.75 }),
+          ...(endIcon && { pr: 0.75 }),
+          ...sx,
+        }}
+        theme={theme}
+        {...other}
+      >
+        {startIcon && <Box sx={{ mr: 0.75, ...iconStyles }}> {startIcon} </Box>}
+
+        {children}
+
+        {endIcon && <Box sx={{ ml: 0.75, ...iconStyles }}> {endIcon} </Box>}
+      </StyledLabel>
+    );
+  }
+);
+
+export default Label;

package/src/lib/Label/index.js

@@ -0,0 +1 @@
+export { default } from "./label";

package/src/lib/Label/styles.js

@@ -0,0 +1,76 @@
+import { alpha, styled } from "@mui/material/styles";
+
+import Box from "@mui/material/Box";
+
+export const StyledLabel = styled(Box)(({ theme, ownerState }) => {
+  const lightMode = theme.palette.mode === "light";
+
+  const filledVariant = ownerState.variant === "filled";
+
+  const outlinedVariant = ownerState.variant === "outlined";
+
+  const softVariant = ownerState.variant === "soft";
+
+  const defaultStyle = {
+    ...(ownerState.color === "default" && {
+      // FILLED
+      ...(filledVariant && {
+        color: lightMode ? theme.palette.common.white : theme.palette.grey[800],
+        backgroundColor: theme.palette.text.primary,
+      }),
+      // OUTLINED
+      ...(outlinedVariant && {
+        backgroundColor: "transparent",
+        color: theme.palette.text.primary,
+        border: `2px solid ${theme.palette.text.primary}`,
+      }),
+      // SOFT
+      ...(softVariant && {
+        color: theme.palette.text.secondary,
+        backgroundColor: alpha(theme.palette.grey[500], 0.16),
+      }),
+    }),
+  };
+
+  const colorStyle = {
+    ...(ownerState.color !== "default" && {
+      // FILLED
+      ...(filledVariant && {
+        color: theme.palette[ownerState.color].contrastText,
+        backgroundColor: theme.palette[ownerState.color].main,
+      }),
+      // OUTLINED
+      ...(outlinedVariant && {
+        backgroundColor: "transparent",
+        color: theme.palette[ownerState.color].main,
+        border: `2px solid ${theme.palette[ownerState.color].main}`,
+      }),
+      // SOFT
+      ...(softVariant && {
+        color: theme.palette[ownerState.color][lightMode ? "dark" : "light"],
+        backgroundColor: alpha(theme.palette[ownerState.color].main, 0.16),
+      }),
+    }),
+  };
+
+  return {
+    height: 24,
+    minWidth: 24,
+    lineHeight: 0,
+    borderRadius: 6,
+    cursor: "default",
+    alignItems: "center",
+    whiteSpace: "nowrap",
+    display: "inline-flex",
+    justifyContent: "center",
+    textTransform: "capitalize",
+    padding: theme.spacing(0, 0.75),
+    fontSize: theme.typography.pxToRem(12),
+    fontWeight: theme.typography.fontWeightBold,
+    transition: theme.transitions.create("all", {
+      duration: theme.transitions.duration.shorter,
+    }),
+    ...defaultStyle,
+    ...colorStyle,
+  };
+});

package/src/lib/RHFTextfield/RHFTextfield.jsx

@@ -0,0 +1,39 @@
+import { Controller, useFormContext } from "react-hook-form";
+
+import PropTypes from "prop-types";
+import TextField from "@mui/material/TextField";
+
+export default function RHFTextField({ name, helperText, type, ...other }) {
+  const { control } = useFormContext();
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <TextField
+          {...field}
+          fullWidth
+          type={type}
+          value={type === "number" && field.value === 0 ? "" : field.value}
+          onChange={(event) => {
+            if (type === "number") {
+              field.onChange(Number(event.target.value));
+            } else {
+              field.onChange(event.target.value);
+            }
+          }}
+          error={!!error}
+          helperText={error ? error?.message : helperText}
+          {...other}
+        />
+      )}
+    />
+  );
+}
+
+RHFTextField.propTypes = {
+  helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  name: PropTypes.string,
+  type: PropTypes.string,
+};

package/src/lib/RHFTextfield/index.js

@@ -0,0 +1 @@
+export { default } from "./RHFTextfield";

package/src/lib/Scrollbar/Scrollbar.jsx

@@ -0,0 +1,39 @@
+import Box from "@mui/material/Box";
+import React from "react";
+import { forwardRef } from "react";
+
+import { StyledRootScrollbar, StyledScrollbar } from "./styles";
+
+const Scrollbar = forwardRef(({ children, sx, ...other }, ref) => {
+  const userAgent =
+    typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
+  const mobile =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      userAgent
+    );
+
+  if (mobile) {
+    return (
+      <Box ref={ref} sx={{ overflow: "auto", ...sx }} {...other}>
+        {children}
+      </Box>
+    );
+  }
+
+  return (
+    <StyledRootScrollbar>
+      <StyledScrollbar
+        scrollableNodeProps={{
+          ref,
+        }}
+        clickOnTrack={false}
+        sx={sx}
+        {...other}
+      >
+        {children}
+      </StyledScrollbar>
+    </StyledRootScrollbar>
+  );
+});
+
+export default Scrollbar;

package/src/lib/Scrollbar/index.js

@@ -0,0 +1 @@
+export { default } from "./scrollbar";

package/src/lib/Scrollbar/styles.js

@@ -0,0 +1,27 @@
+import SimpleBar from "simplebar-react";
+
+import { alpha, styled } from "@mui/material/styles";
+
+// ----------------------------------------------------------------------
+
+export const StyledRootScrollbar = styled("div")(() => ({
+  flexGrow: 1,
+  height: "100%",
+  overflow: "hidden",
+}));
+
+export const StyledScrollbar = styled(SimpleBar)(({ theme }) => ({
+  maxHeight: "100%",
+
+  "& .simplebar-scrollbar": {
+    "&:before": {
+      backgroundColor: alpha(theme.palette.grey[600], 0.48),
+    },
+    "&.simplebar-visible:before": {
+      opacity: 1,
+    },
+  },
+  "& .simplebar-mask": {
+    zIndex: "inherit",
+  },
+}));

package/src/lib/SearchNotFound/SearchNotFound.jsx

@@ -0,0 +1,29 @@
+import Paper from "@mui/material/Paper";
+import Typography from "@mui/material/Typography";
+
+export default function SearchNotFound({ query, sx, ...other }) {
+  return query ? (
+    <Paper
+      sx={{
+        bgcolor: "unset",
+        textAlign: "center",
+        ...sx,
+      }}
+      {...other}
+    >
+      <Typography variant="h6" gutterBottom>
+        Not Found
+      </Typography>
+
+      <Typography variant="body2">
+        No results found for &nbsp;
+        <strong>&quot;{query}&quot;</strong>.
+        <br /> Try checking for typos or using complete words.
+      </Typography>
+    </Paper>
+  ) : (
+    <Typography variant="body2" sx={sx}>
+      Please enter keywords
+    </Typography>
+  );
+}

package/src/lib/SearchNotFound/index.js

@@ -0,0 +1 @@
+export { default } from "./SearchNotFound";

package/src/lib/TableHeadCustom/TableHeadCustom.jsx

@@ -0,0 +1,87 @@
+import Box from "@mui/material/Box";
+import Checkbox from "@mui/material/Checkbox";
+import PropTypes from "prop-types";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableSortLabel from "@mui/material/TableSortLabel";
+
+const visuallyHidden = {
+  border: 0,
+  margin: -1,
+  padding: 0,
+  width: "1px",
+  height: "1px",
+  overflow: "hidden",
+  position: "absolute",
+  whiteSpace: "nowrap",
+  clip: "rect(0 0 0 0)",
+};
+
+export default function TableHeadCustom({
+  order,
+  orderBy,
+  rowCount = 0,
+  headLabel,
+  numSelected = 0,
+  onSort,
+  onSelectAllRows,
+  sx,
+}) {
+  return (
+    <TableHead sx={sx}>
+      <TableRow>
+        {onSelectAllRows && (
+          <TableCell padding="checkbox">
+            <Checkbox
+              indeterminate={!!numSelected && numSelected < rowCount}
+              checked={!!rowCount && numSelected === rowCount}
+              onChange={(event) => onSelectAllRows(event.target.checked)}
+            />
+          </TableCell>
+        )}
+
+        {headLabel.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            align={headCell.align || "left"}
+            sortDirection={orderBy === headCell.id ? order : false}
+            sx={{ width: headCell.width, minWidth: headCell.minWidth }}
+          >
+            {onSort ? (
+              <TableSortLabel
+                hideSortIcon
+                active={orderBy === headCell.id}
+                direction={orderBy === headCell.id ? order : "asc"}
+                onClick={() => onSort(headCell.id)}
+              >
+                {headCell.label}
+
+                {orderBy === headCell.id ? (
+                  <Box sx={{ ...visuallyHidden }}>
+                    {order === "desc"
+                      ? "sorted descending"
+                      : "sorted ascending"}
+                  </Box>
+                ) : null}
+              </TableSortLabel>
+            ) : (
+              headCell.label
+            )}
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+TableHeadCustom.propTypes = {
+  sx: PropTypes.object,
+  onSort: PropTypes.func,
+  orderBy: PropTypes.string,
+  headLabel: PropTypes.array,
+  rowCount: PropTypes.number,
+  numSelected: PropTypes.number,
+  onSelectAllRows: PropTypes.func,
+  order: PropTypes.oneOf(["asc", "desc"]),
+};

package/src/lib/TableHeadCustom/index.js

@@ -0,0 +1 @@
+export { default } from "./TableHeadCustom";

package/src/lib/TableSelectedAction/TableSelectedAction.jsx

@@ -0,0 +1,72 @@
+import Checkbox from "@mui/material/Checkbox";
+import PropTypes from "prop-types";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+
+export default function TableSelectedAction({
+  dense,
+  action,
+  rowCount,
+  numSelected,
+  onSelectAllRows,
+  sx,
+  ...other
+}) {
+  if (!numSelected) {
+    return null;
+  }
+
+  return (
+    <Stack
+      direction="row"
+      alignItems="center"
+      sx={{
+        pl: 1,
+        pr: 2,
+        top: 0,
+        left: 0,
+        width: 1,
+        zIndex: 9,
+        height: 58,
+        position: "absolute",
+        bgcolor: "primary.lighter",
+        ...(dense && {
+          height: 38,
+        }),
+        ...sx,
+      }}
+      {...other}
+    >
+      <Checkbox
+        indeterminate={!!numSelected && numSelected < rowCount}
+        checked={!!rowCount && numSelected === rowCount}
+        onChange={(event) => onSelectAllRows(event.target.checked)}
+      />
+
+      <Typography
+        variant="subtitle2"
+        sx={{
+          ml: 2,
+          flexGrow: 1,
+          color: "primary.main",
+          ...(dense && {
+            ml: 3,
+          }),
+        }}
+      >
+        {numSelected} selected
+      </Typography>
+
+      {action && action}
+    </Stack>
+  );
+}
+
+TableSelectedAction.propTypes = {
+  action: PropTypes.node,
+  dense: PropTypes.bool,
+  numSelected: PropTypes.number,
+  onSelectAllRows: PropTypes.func,
+  rowCount: PropTypes.number,
+  sx: PropTypes.object,
+};

package/src/lib/TableSelectedAction/index.js

@@ -0,0 +1 @@
+export { default } from "./TableSelectedAction";

package/src/lib/index.js

@@ -8,3 +8,16 @@ export { default as SparkleInput } from "./SparkleInput/SparkleInput";
 export { default as StepComponent } from "./StepComponent/StepComponent";
 export { default as SvgColor } from "./SvgColor";
 export { default as ProjectWizard } from "./ProjectWizard";
+export { default as CustomPopover } from "./CustomPopover/CustomPopover";
+export { default as usePopover } from "./CustomPopover/usePopover";
+export { default as Image } from "./Image/Image";
+export { default as Label } from "./Label/Label";
+export { default as Scrollbar } from "./Scrollbar/Scrollbar";
+export { default as SearchNotFound } from "./SearchNotFound/SearchNotFound";
+export { default as CustomBreadcrumbs } from "./CustomBreadcrumbs/CustomBreadcrumbs";
+export { default as FormProvider } from "./FormProvider/FormProvider";
+export { default as RHFTextField } from "./RHFTextfield/RHFTextfield";
+export { default as TableHeadCustom } from "./TableHeadCustom/TableHeadCustom";
+export { default as TableSelectedAction } from "./TableSelectedAction/TableSelectedAction";
+export { default as useTable } from "./useTable/useTable";
+export { default as useChart } from "./useChart/useChart";

package/src/lib/useChart/useChart.js

@@ -0,0 +1,179 @@
+import { alpha, useTheme } from "@mui/material/styles";
+
+import merge from "lodash/merge";
+import { useResponsive } from "src/hooks/use-responsive";
+
+export default function useChart(options) {
+  const theme = useTheme();
+
+  const smUp = useResponsive("up", "sm");
+
+  const LABEL_TOTAL = {
+    show: true,
+    label: "Total",
+    color: theme.palette.text.secondary,
+    fontSize: theme.typography.subtitle2.fontSize,
+    fontWeight: theme.typography.subtitle2.fontWeight,
+    lineHeight: theme.typography.subtitle2.lineHeight,
+  };
+
+  const LABEL_VALUE = {
+    offsetY: 8,
+    color: theme.palette.text.primary,
+    fontSize: theme.typography.h3.fontSize,
+    fontWeight: theme.typography.h3.fontWeight,
+    lineHeight: theme.typography.h3.lineHeight,
+  };
+
+  const baseOptions = {
+    colors: [
+      theme.palette.primary.main,
+      theme.palette.warning.main,
+      theme.palette.info.main,
+      theme.palette.error.main,
+      theme.palette.success.main,
+      theme.palette.warning.dark,
+      theme.palette.success.darker,
+      theme.palette.info.dark,
+      theme.palette.info.darker,
+    ],
+
+    chart: {
+      toolbar: { show: false },
+      zoom: { enabled: false },
+      foreColor: theme.palette.text.disabled,
+      fontFamily: theme.typography.fontFamily,
+    },
+
+    states: {
+      hover: {
+        filter: {
+          type: "lighten",
+          value: 0.04,
+        },
+      },
+      active: {
+        filter: {
+          type: "darken",
+          value: 0.88,
+        },
+      },
+    },
+    fill: {
+      opacity: 1,
+      gradient: {
+        type: "vertical",
+        shadeIntensity: 0,
+        opacityFrom: 0.4,
+        opacityTo: 0,
+        stops: [0, 100],
+      },
+    },
+    dataLabels: {
+      enabled: false,
+    },
+    stroke: {
+      width: 3,
+      curve: "smooth",
+      lineCap: "round",
+    },
+    grid: {
+      strokeDashArray: 3,
+      borderColor: theme.palette.divider,
+      xaxis: {
+        lines: {
+          show: false,
+        },
+      },
+    },
+    xaxis: {
+      axisBorder: { show: false },
+      axisTicks: { show: false },
+    },
+    markers: {
+      size: 0,
+      strokeColors: theme.palette.background.paper,
+    },
+    tooltip: {
+      theme: false,
+      x: {
+        show: true,
+      },
+    },
+    legend: {
+      show: true,
+      fontSize: 13,
+      position: "top",
+      horizontalAlign: "right",
+      markers: {
+        radius: 12,
+      },
+      fontWeight: 500,
+      itemMargin: {
+        horizontal: 8,
+      },
+      labels: {
+        colors: theme.palette.text.primary,
+      },
+    },
+    plotOptions: {
+      bar: {
+        borderRadius: smUp ? 3 : 1,
+        columnWidth: "28%",
+        borderRadiusApplication: "end",
+        borderRadiusWhenStacked: "last",
+      },
+      pie: {
+        donut: {
+          labels: {
+            show: true,
+            value: LABEL_VALUE,
+            total: LABEL_TOTAL,
+          },
+        },
+      },
+
+      radialBar: {
+        track: {
+          strokeWidth: "100%",
+          background: alpha(theme.palette.grey[500], 0.16),
+        },
+        dataLabels: {
+          value: LABEL_VALUE,
+          total: LABEL_TOTAL,
+        },
+      },
+      radar: {
+        polygons: {
+          fill: { colors: ["transparent"] },
+          strokeColors: theme.palette.divider,
+          connectorColors: theme.palette.divider,
+        },
+      },
+      polarArea: {
+        rings: {
+          strokeColor: theme.palette.divider,
+        },
+        spokes: {
+          connectorColors: theme.palette.divider,
+        },
+      },
+    },
+    responsive: [
+      {
+        breakpoint: theme.breakpoints.values.sm,
+        options: {
+          plotOptions: { bar: { columnWidth: "40%" } },
+        },
+      },
+      {
+        breakpoint: theme.breakpoints.values.md,
+        options: {
+          plotOptions: { bar: { columnWidth: "32%" } },
+        },
+      },
+    ],
+  };
+
+  return merge(baseOptions, options);
+}

package/src/lib/useTable/useTable.js

@@ -0,0 +1,121 @@
+import { useCallback, useState } from "react";
+
+export default function useTable(props) {
+  const [dense, setDense] = useState(!!props?.defaultDense);
+
+  const [page, setPage] = useState(props?.defaultCurrentPage || 0);
+
+  const [orderBy, setOrderBy] = useState(props?.defaultOrderBy || "name");
+
+  const [rowsPerPage, setRowsPerPage] = useState(
+    props?.defaultRowsPerPage || 5
+  );
+
+  const [order, setOrder] = useState(props?.defaultOrder || "asc");
+
+  const [selected, setSelected] = useState(props?.defaultSelected || []);
+
+  const onSort = useCallback(
+    (id) => {
+      const isAsc = orderBy === id && order === "asc";
+      if (id !== "") {
+        setOrder(isAsc ? "desc" : "asc");
+        setOrderBy(id);
+      }
+    },
+    [order, orderBy]
+  );
+
+  const onSelectRow = useCallback(
+    (inputValue) => {
+      const newSelected = selected.includes(inputValue)
+        ? selected.filter((value) => value !== inputValue)
+        : [...selected, inputValue];
+
+      setSelected(newSelected);
+    },
+    [selected]
+  );
+
+  const onChangeRowsPerPage = useCallback((event) => {
+    setPage(0);
+    setRowsPerPage(parseInt(event.target.value, 10));
+  }, []);
+
+  const onChangeDense = useCallback((event) => {
+    setDense(event.target.checked);
+  }, []);
+
+  const onSelectAllRows = useCallback((checked, inputValue) => {
+    if (checked) {
+      setSelected(inputValue);
+      return;
+    }
+    setSelected([]);
+  }, []);
+
+  const onChangePage = useCallback((event, newPage) => {
+    setPage(newPage);
+  }, []);
+
+  const onResetPage = useCallback(() => {
+    setPage(0);
+  }, []);
+
+  const onUpdatePageDeleteRow = useCallback(
+    (totalRowsInPage) => {
+      setSelected([]);
+      if (page) {
+        if (totalRowsInPage < 2) {
+          setPage(page - 1);
+        }
+      }
+    },
+    [page]
+  );
+
+  const onUpdatePageDeleteRows = useCallback(
+    ({ totalRows, totalRowsInPage, totalRowsFiltered }) => {
+      const totalSelected = selected.length;
+
+      setSelected([]);
+
+      if (page) {
+        if (totalSelected === totalRowsInPage) {
+          setPage(page - 1);
+        } else if (totalSelected === totalRowsFiltered) {
+          setPage(0);
+        } else if (totalSelected > totalRowsInPage) {
+          const newPage =
+            Math.ceil((totalRows - totalSelected) / rowsPerPage) - 1;
+          setPage(newPage);
+        }
+      }
+    },
+    [page, rowsPerPage, selected.length]
+  );
+
+  return {
+    dense,
+    order,
+    page,
+    orderBy,
+    rowsPerPage,
+    selected,
+    onSelectRow,
+    onSelectAllRows,
+    onSort,
+    onChangePage,
+    onChangeDense,
+    onResetPage,
+    onChangeRowsPerPage,
+    onUpdatePageDeleteRow,
+    onUpdatePageDeleteRows,
+    setPage,
+    setDense,
+    setOrder,
+    setOrderBy,
+    setSelected,
+    setRowsPerPage,
+  };
+}