Separate Client Portal & Dashboard

frontend/dashboard/src/components/animate/DialogAnimate.tsx

@@ -0,0 +1,61 @@
+import { m, AnimatePresence } from 'framer-motion';
+// @mui
+import { Dialog, Box, Paper, DialogProps } from '@mui/material';
+//
+import { varFade } from './variants';
+
+// ----------------------------------------------------------------------
+
+export interface Props extends DialogProps {
+  variants?: Record<string, unknown>;
+  onClose?: VoidFunction;
+}
+
+export default function DialogAnimate({
+  open = false,
+  variants,
+  onClose,
+  children,
+  sx,
+  ...other
+}: Props) {
+  return (
+    <AnimatePresence>
+      {open && (
+        <Dialog
+          fullWidth
+          maxWidth="xs"
+          open={open}
+          onClose={onClose}
+          PaperComponent={(props) => (
+            <Box
+              component={m.div}
+              {...(variants ||
+                varFade({
+                  distance: 120,
+                  durationIn: 0.32,
+                  durationOut: 0.24,
+                  easeIn: 'easeInOut',
+                }).inUp)}
+              sx={{
+                width: '100%',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              <Box onClick={onClose} sx={{ width: '100%', height: '100%', position: 'fixed' }} />
+              <Paper sx={sx} {...props}>
+                {props.children}
+              </Paper>
+            </Box>
+          )}
+          {...other}
+        >
+          {children}
+        </Dialog>
+      )}
+    </AnimatePresence>
+  );
+}

frontend/dashboard/src/components/animate/FabButtonAnimate.tsx

@@ -0,0 +1,107 @@
+import { m } from 'framer-motion';
+import { forwardRef, ReactNode } from 'react';
+// @mui
+import { useTheme } from '@mui/material/styles';
+import { Box, Fab, FabProps, SxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+interface Props extends Omit<FabProps, 'color'> {
+  sxWrap?: SxProps;
+  color?:
+    | 'inherit'
+    | 'default'
+    | 'primary'
+    | 'secondary'
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'error';
+}
+
+const FabButtonAnimate = forwardRef<HTMLButtonElement, Props>(
+  ({ color = 'primary', size = 'large', children, sx, sxWrap, ...other }, ref) => {
+    const theme = useTheme();
+
+    if (
+      color === 'default' ||
+      color === 'inherit' ||
+      color === 'primary' ||
+      color === 'secondary'
+    ) {
+      return (
+        <AnimateWrap size={size} sxWrap={sxWrap}>
+          <Fab ref={ref} size={size} color={color} sx={sx} {...other}>
+            {children}
+          </Fab>
+        </AnimateWrap>
+      );
+    }
+
+    return (
+      <AnimateWrap size={size} sxWrap={sxWrap}>
+        <Fab
+          ref={ref}
+          size={size}
+          sx={{
+            boxShadow: theme.customShadows[color],
+            color: theme.palette[color].contrastText,
+            bgcolor: theme.palette[color].main,
+            '&:hover': {
+              bgcolor: theme.palette[color].dark,
+            },
+            ...sx,
+          }}
+          {...other}
+        >
+          {children}
+        </Fab>
+      </AnimateWrap>
+    );
+  }
+);
+
+export default FabButtonAnimate;
+
+// ----------------------------------------------------------------------
+
+type AnimateWrapProp = {
+  children: ReactNode;
+  size: 'small' | 'medium' | 'large';
+  sxWrap?: SxProps;
+};
+
+const varSmall = {
+  hover: { scale: 1.07 },
+  tap: { scale: 0.97 },
+};
+
+const varMedium = {
+  hover: { scale: 1.06 },
+  tap: { scale: 0.98 },
+};
+
+const varLarge = {
+  hover: { scale: 1.05 },
+  tap: { scale: 0.99 },
+};
+
+function AnimateWrap({ size, children, sxWrap }: AnimateWrapProp) {
+  const isSmall = size === 'small';
+  const isLarge = size === 'large';
+
+  return (
+    <Box
+      component={m.div}
+      whileTap="tap"
+      whileHover="hover"
+      variants={(isSmall && varSmall) || (isLarge && varLarge) || varMedium}
+      sx={{
+        display: 'inline-flex',
+        ...sxWrap,
+      }}
+    >
+      {children}
+    </Box>
+  );
+}

frontend/dashboard/src/components/animate/IconButtonAnimate.tsx

@@ -0,0 +1,59 @@
+import { m } from 'framer-motion';
+import { forwardRef, ReactNode } from 'react';
+// @mui
+import { Box, IconButton, IconButtonProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+const IconButtonAnimate = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ children, size = 'medium', ...other }, ref) => (
+    <AnimateWrap size={size}>
+      <IconButton size={size} ref={ref} {...other}>
+        {children}
+      </IconButton>
+    </AnimateWrap>
+  )
+);
+
+export default IconButtonAnimate;
+
+// ----------------------------------------------------------------------
+
+type AnimateWrapProp = {
+  children: ReactNode;
+  size: 'small' | 'medium' | 'large';
+};
+
+const varSmall = {
+  hover: { scale: 1.1 },
+  tap: { scale: 0.95 },
+};
+
+const varMedium = {
+  hover: { scale: 1.09 },
+  tap: { scale: 0.97 },
+};
+
+const varLarge = {
+  hover: { scale: 1.08 },
+  tap: { scale: 0.99 },
+};
+
+function AnimateWrap({ size, children }: AnimateWrapProp) {
+  const isSmall = size === 'small';
+  const isLarge = size === 'large';
+
+  return (
+    <Box
+      component={m.div}
+      whileTap="tap"
+      whileHover="hover"
+      variants={(isSmall && varSmall) || (isLarge && varLarge) || varMedium}
+      sx={{
+        display: 'inline-flex',
+      }}
+    >
+      {children}
+    </Box>
+  );
+}

frontend/dashboard/src/components/animate/MotionContainer.tsx

@@ -0,0 +1,43 @@
+import { m, MotionProps } from 'framer-motion';
+// @mui
+import { Box, BoxProps } from '@mui/material';
+//
+import { varContainer } from './variants';
+
+// ----------------------------------------------------------------------
+
+type IProps = BoxProps & MotionProps;
+
+export interface Props extends IProps {
+  animate?: boolean;
+  action?: boolean;
+}
+
+export default function MotionContainer({ animate, action = false, children, ...other }: Props) {
+  if (action) {
+    return (
+      <Box
+        component={m.div}
+        initial={false}
+        animate={animate ? 'animate' : 'exit'}
+        variants={varContainer()}
+        {...other}
+      >
+        {children}
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      component={m.div}
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      variants={varContainer()}
+      {...other}
+    >
+      {children}
+    </Box>
+  );
+}

frontend/dashboard/src/components/animate/MotionInView.tsx

@@ -0,0 +1,50 @@
+import { useEffect } from 'react';
+import { m, useAnimation, MotionProps } from 'framer-motion';
+import { useInView } from 'react-intersection-observer';
+// @mui
+import { Box, BoxProps } from '@mui/material';
+
+// ----------------------------------------------------------------------
+
+type Props = BoxProps & MotionProps;
+
+interface MotionInViewProps extends Props {
+  threshold?: number | number[];
+}
+
+export default function MotionInView({
+  children,
+  variants,
+  transition,
+  threshold,
+  ...other
+}: MotionInViewProps) {
+  const controls = useAnimation();
+  const [ref, inView] = useInView({
+    threshold: threshold || 0,
+    triggerOnce: true,
+  });
+
+  useEffect(() => {
+    if (!variants) return;
+    if (inView) {
+      controls.start(Object.keys(variants)[1]);
+    } else {
+      controls.start(Object.keys(variants)[0]);
+    }
+  }, [controls, inView, variants]);
+
+  return (
+    <Box
+      ref={ref}
+      component={m.div}
+      initial={variants ? Object.keys(variants)[0] : false}
+      animate={controls}
+      variants={variants}
+      transition={transition}
+      {...other}
+    >
+      {children}
+    </Box>
+  );
+}

frontend/dashboard/src/components/animate/MotionLazyContainer.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { LazyMotion } from 'framer-motion';
+import features from "./features";
+
+// ----------------------------------------------------------------------
+
+// eslint-disable-next-line import/extensions
+// const loadFeatures = () => import('~/src/components/animate/features.js').then((res) => res.default);
+
+type Props = {
+  children: ReactNode;
+};
+
+export default function MotionLazyContainer({ children }: Props) {
+  return (
+    <LazyMotion strict features={features}>
+      {children}
+    </LazyMotion>
+  );
+}

frontend/dashboard/src/components/animate/TextAnimate.tsx

@@ -0,0 +1,34 @@
+import { m, MotionProps } from 'framer-motion';
+// @mui
+import { Box, BoxProps } from '@mui/material';
+//
+import { varFade } from './variants';
+
+// ----------------------------------------------------------------------
+
+type Props = BoxProps & MotionProps;
+
+interface TextAnimateProps extends Props {
+  text: string;
+}
+
+export default function TextAnimate({ text, variants, sx, ...other }: TextAnimateProps) {
+  return (
+    <Box
+      component={m.h1}
+      sx={{
+        typography: 'h1',
+        overflow: 'hidden',
+        display: 'inline-flex',
+        ...sx,
+      }}
+      {...other}
+    >
+      {text.split('').map((letter, index) => (
+        <m.span key={index} variants={variants || varFade().inUp}>
+          {letter}
+        </m.span>
+      ))}
+    </Box>
+  );
+}

frontend/dashboard/src/components/animate/features.js

@@ -0,0 +1,3 @@
+import { domMax } from 'framer-motion';
+
+export default domMax;

frontend/dashboard/src/components/animate/index.ts

@@ -0,0 +1,13 @@
+// ----------------------------------------------------------------------
+
+export * from './variants';
+
+export { default as DialogAnimate } from './DialogAnimate';
+export { default as TextAnimate } from './TextAnimate';
+
+export { default as FabButtonAnimate } from './FabButtonAnimate';
+export { default as IconButtonAnimate } from './IconButtonAnimate';
+
+export { default as MotionInView } from './MotionInView';
+export { default as MotionContainer } from './MotionContainer';
+export { default as MotionLazyContainer } from './MotionLazyContainer';

frontend/dashboard/src/components/animate/type.ts

@@ -0,0 +1,44 @@
+// ----------------------------------------------------------------------
+
+type EaseType =
+  | 'linear'
+  | 'easeIn'
+  | 'easeOut'
+  | 'easeInOut'
+  | 'circIn'
+  | 'circOut'
+  | 'circInOut'
+  | 'backIn'
+  | 'backOut'
+  | 'backInOut'
+  | 'anticipate'
+  | number[];
+
+export type VariantsType = {
+  distance?: number;
+  durationIn?: number;
+  durationOut?: number;
+  easeIn?: EaseType;
+  easeOut?: EaseType;
+};
+
+export type TranHoverType = {
+  duration?: number;
+  ease?: EaseType;
+};
+
+export type TranEnterType = {
+  durationIn?: number;
+  easeIn?: EaseType;
+};
+
+export type TranExitType = {
+  durationOut?: number;
+  easeOut?: EaseType;
+};
+
+export type BackgroundType = {
+  colors?: string[];
+  duration?: number;
+  ease?: EaseType;
+};

frontend/dashboard/src/components/animate/variants/actions.ts

@@ -0,0 +1,7 @@
+// ----------------------------------------------------------------------
+
+export const varHover = (scale?: number) => ({
+  hover: {
+    scale: scale || 1.1,
+  },
+});

frontend/dashboard/src/components/animate/variants/background.ts

@@ -0,0 +1,106 @@
+// @types
+import { BackgroundType } from '../type';
+
+// ----------------------------------------------------------------------
+
+export const varBgColor = (props?: BackgroundType) => {
+  const colors = props?.colors || ['#19dcea', '#b22cff'];
+  const duration = props?.duration || 5;
+  const ease = props?.ease || 'linear';
+
+  return {
+    animate: {
+      background: colors,
+      transition: { duration, ease },
+    },
+  };
+};
+
+// ----------------------------------------------------------------------
+
+export const varBgKenburns = (props?: BackgroundType) => {
+  const duration = props?.duration || 5;
+  const ease = props?.ease || 'easeOut';
+
+  return {
+    top: {
+      animate: {
+        scale: [1, 1.25],
+        y: [0, -15],
+        transformOrigin: ['50% 16%', 'top'],
+        transition: { duration, ease },
+      },
+    },
+    right: {
+      animate: {
+        scale: [1, 1.25],
+        x: [0, 20],
+        y: [0, -15],
+        transformOrigin: ['84% 50%', 'right'],
+        transition: { duration, ease },
+      },
+    },
+    bottom: {
+      animate: {
+        scale: [1, 1.25],
+        y: [0, 15],
+        transformOrigin: ['50% 84%', 'bottom'],
+        transition: { duration, ease },
+      },
+    },
+    left: {
+      animate: {
+        scale: [1, 1.25],
+        x: [0, -20],
+        y: [0, 15],
+        transformOrigin: ['16% 50%', 'left'],
+        transition: { duration, ease },
+      },
+    },
+  };
+};
+
+// ----------------------------------------------------------------------
+
+export const varBgPan = (props?: BackgroundType) => {
+  const colors = props?.colors || ['#ee7752', '#e73c7e', '#23a6d5', '#23d5ab'];
+  const duration = props?.duration || 5;
+  const ease = props?.ease || 'linear';
+
+  const gradient = (deg: number) => `linear-gradient(${deg}deg, ${colors})`;
+
+  return {
+    top: {
+      animate: {
+        backgroundImage: [gradient(0), gradient(0)],
+        backgroundPosition: ['center 99%', 'center 1%'],
+        backgroundSize: ['100% 600%', '100% 600%'],
+        transition: { duration, ease },
+      },
+    },
+    right: {
+      animate: {
+        backgroundPosition: ['1% center', '99% center'],
+        backgroundImage: [gradient(270), gradient(270)],
+        backgroundSize: ['600% 100%', '600% 100%'],
+        transition: { duration, ease },
+      },
+    },
+    bottom: {
+      animate: {
+        backgroundImage: [gradient(0), gradient(0)],
+        backgroundPosition: ['center 1%', 'center 99%'],
+        backgroundSize: ['100% 600%', '100% 600%'],
+        transition: { duration, ease },
+      },
+    },
+    left: {
+      animate: {
+        backgroundPosition: ['99% center', '1% center'],
+        backgroundImage: [gradient(270), gradient(270)],
+        backgroundSize: ['600% 100%', '600% 100%'],
+        transition: { duration, ease },
+      },
+    },
+  };
+};

frontend/dashboard/src/components/animate/variants/bounce.ts

@@ -0,0 +1,106 @@
+// @types
+import { VariantsType } from '../type';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varBounce = (props?: VariantsType) => {
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    // IN
+    in: {
+      initial: {},
+      animate: {
+        scale: [0.3, 1.1, 0.9, 1.03, 0.97, 1],
+        opacity: [0, 1, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        scale: [0.9, 1.1, 0.3],
+        opacity: [1, 1, 0],
+      },
+    },
+    inUp: {
+      initial: {},
+      animate: {
+        y: [720, -24, 12, -4, 0],
+        scaleY: [4, 0.9, 0.95, 0.985, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: { ...varTranEnter({ durationIn, easeIn }) },
+      },
+      exit: {
+        y: [12, -24, 720],
+        scaleY: [0.985, 0.9, 3],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inDown: {
+      initial: {},
+      animate: {
+        y: [-720, 24, -12, 4, 0],
+        scaleY: [4, 0.9, 0.95, 0.985, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        y: [-12, 24, -720],
+        scaleY: [0.985, 0.9, 3],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inLeft: {
+      initial: {},
+      animate: {
+        x: [-720, 24, -12, 4, 0],
+        scaleX: [3, 1, 0.98, 0.995, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        x: [0, 24, -720],
+        scaleX: [1, 0.9, 2],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inRight: {
+      initial: {},
+      animate: {
+        x: [720, -24, 12, -4, 0],
+        scaleX: [3, 1, 0.98, 0.995, 1],
+        opacity: [0, 1, 1, 1, 1],
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        x: [0, -24, 720],
+        scaleX: [1, 0.9, 2],
+        opacity: [1, 1, 0],
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+
+    // OUT
+    out: {
+      animate: { scale: [0.9, 1.1, 0.3], opacity: [1, 1, 0] },
+    },
+    outUp: {
+      animate: { y: [-12, 24, -720], scaleY: [0.985, 0.9, 3], opacity: [1, 1, 0] },
+    },
+    outDown: {
+      animate: { y: [12, -24, 720], scaleY: [0.985, 0.9, 3], opacity: [1, 1, 0] },
+    },
+    outLeft: {
+      animate: { x: [0, 24, -720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] },
+    },
+    outRight: {
+      animate: { x: [0, -24, 720], scaleX: [1, 0.9, 2], opacity: [1, 1, 0] },
+    },
+  };
+};

frontend/dashboard/src/components/animate/variants/container.ts

@@ -0,0 +1,28 @@
+// ----------------------------------------------------------------------
+
+export type Props = {
+  staggerIn?: number;
+  delayIn?: number;
+  staggerOut?: number;
+};
+
+export const varContainer = (props?: Props) => {
+  const staggerIn = props?.staggerIn || 0.05;
+  const delayIn = props?.staggerIn || 0.05;
+  const staggerOut = props?.staggerIn || 0.05;
+
+  return {
+    animate: {
+      transition: {
+        staggerChildren: staggerIn,
+        delayChildren: delayIn,
+      },
+    },
+    exit: {
+      transition: {
+        staggerChildren: staggerOut,
+        staggerDirection: -1,
+      },
+    },
+  };
+};

frontend/dashboard/src/components/animate/variants/fade.ts

@@ -0,0 +1,70 @@
+// @types
+import { VariantsType } from '../type';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varFade = (props?: VariantsType) => {
+  const distance = props?.distance || 120;
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    // IN
+    in: {
+      initial: { opacity: 0 },
+      animate: { opacity: 1, transition: varTranEnter },
+      exit: { opacity: 0, transition: varTranExit },
+    },
+    inUp: {
+      initial: { y: distance, opacity: 0 },
+      animate: { y: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inDown: {
+      initial: { y: -distance, opacity: 0 },
+      animate: { y: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: -distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inLeft: {
+      initial: { x: -distance, opacity: 0 },
+      animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: -distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inRight: {
+      initial: { x: distance, opacity: 0 },
+      animate: { x: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: distance, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+
+    // OUT
+    out: {
+      initial: { opacity: 1 },
+      animate: { opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outUp: {
+      initial: { y: 0, opacity: 1 },
+      animate: { y: -distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outDown: {
+      initial: { y: 0, opacity: 1 },
+      animate: { y: distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outLeft: {
+      initial: { x: 0, opacity: 1 },
+      animate: { x: -distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outRight: {
+      initial: { x: 0, opacity: 1 },
+      animate: { x: distance, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: 0, opacity: 1, transition: varTranExit({ durationOut, easeOut }) },
+    },
+  };
+};

frontend/dashboard/src/components/animate/variants/flip.ts

@@ -0,0 +1,37 @@
+// @types
+import { VariantsType } from '../type';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varFlip = (props?: VariantsType) => {
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    // IN
+    inX: {
+      initial: { rotateX: -180, opacity: 0 },
+      animate: { rotateX: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { rotateX: -180, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inY: {
+      initial: { rotateY: -180, opacity: 0 },
+      animate: { rotateY: 0, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { rotateY: -180, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+
+    // OUT
+    outX: {
+      initial: { rotateX: 0, opacity: 1 },
+      animate: { rotateX: 70, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outY: {
+      initial: { rotateY: 0, opacity: 1 },
+      animate: { rotateY: 70, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+  };
+};

frontend/dashboard/src/components/animate/variants/index.ts

@@ -0,0 +1,12 @@
+export * from './path';
+export * from './fade';
+export * from './zoom';
+export * from './flip';
+export * from './slide';
+export * from './scale';
+export * from './bounce';
+export * from './rotate';
+export * from './actions';
+export * from './container';
+export * from './transition';
+export * from './background';

frontend/dashboard/src/components/animate/variants/path.ts

@@ -0,0 +1,14 @@
+// ----------------------------------------------------------------------
+
+export const TRANSITION = {
+  duration: 2,
+  ease: [0.43, 0.13, 0.23, 0.96],
+};
+
+export const varPath = {
+  animate: {
+    fillOpacity: [0, 0, 1],
+    pathLength: [1, 0.4, 0],
+    transition: TRANSITION,
+  },
+};

frontend/dashboard/src/components/animate/variants/rotate.ts

@@ -0,0 +1,28 @@
+// @types
+import { VariantsType } from '../type';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varRotate = (props?: VariantsType) => {
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    // IN
+    in: {
+      initial: { opacity: 0, rotate: -360 },
+      animate: { opacity: 1, rotate: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { opacity: 0, rotate: -360, transition: varTranExit({ durationOut, easeOut }) },
+    },
+
+    // OUT
+    out: {
+      initial: { opacity: 1, rotate: 0 },
+      animate: { opacity: 0, rotate: -360, transition: varTranExit({ durationOut, easeOut }) },
+    },
+  };
+};

frontend/dashboard/src/components/animate/variants/scale.ts

@@ -0,0 +1,37 @@
+// @types
+import { VariantsType } from '../type';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varScale = (props?: VariantsType) => {
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    // IN
+    inX: {
+      initial: { scaleX: 0, opacity: 0 },
+      animate: { scaleX: 1, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { scaleX: 0, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inY: {
+      initial: { scaleY: 0, opacity: 0 },
+      animate: { scaleY: 1, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { scaleY: 0, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+
+    // OUT
+    outX: {
+      initial: { scaleX: 1, opacity: 1 },
+      animate: { scaleX: 0, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+    },
+    outY: {
+      initial: { scaleY: 1, opacity: 1 },
+      animate: { scaleY: 0, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+    },
+  };
+};

frontend/dashboard/src/components/animate/variants/slide.ts

@@ -0,0 +1,60 @@
+// @types
+import { VariantsType } from '../type';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varSlide = (props?: VariantsType) => {
+  const distance = props?.distance || 160;
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    // IN
+    inUp: {
+      initial: { y: distance },
+      animate: { y: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: distance, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inDown: {
+      initial: { y: -distance },
+      animate: { y: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: -distance, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inLeft: {
+      initial: { x: -distance },
+      animate: { x: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: -distance, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inRight: {
+      initial: { x: distance },
+      animate: { x: 0, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: distance, transition: varTranExit({ durationOut, easeOut }) },
+    },
+
+    // OUT
+    outUp: {
+      initial: { y: 0 },
+      animate: { y: -distance, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outDown: {
+      initial: { y: 0 },
+      animate: { y: distance, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { y: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outLeft: {
+      initial: { x: 0 },
+      animate: { x: -distance, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    outRight: {
+      initial: { x: 0 },
+      animate: { x: distance, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { x: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+  };
+};

frontend/dashboard/src/components/animate/variants/transition.ts

@@ -0,0 +1,25 @@
+// @types
+import { TranHoverType, TranEnterType, TranExitType } from '../type';
+
+// ----------------------------------------------------------------------
+
+export const varTranHover = (props?: TranHoverType) => {
+  const duration = props?.duration || 0.32;
+  const ease = props?.ease || [0.43, 0.13, 0.23, 0.96];
+
+  return { duration, ease };
+};
+
+export const varTranEnter = (props?: TranEnterType) => {
+  const duration = props?.durationIn || 0.64;
+  const ease = props?.easeIn || [0.43, 0.13, 0.23, 0.96];
+
+  return { duration, ease };
+};
+
+export const varTranExit = (props?: TranExitType) => {
+  const duration = props?.durationOut || 0.48;
+  const ease = props?.easeOut || [0.43, 0.13, 0.23, 0.96];
+
+  return { duration, ease };
+};

frontend/dashboard/src/components/animate/variants/zoom.ts

@@ -0,0 +1,125 @@
+// @types
+import { VariantsType } from '../type';
+//
+import { varTranEnter, varTranExit } from './transition';
+
+// ----------------------------------------------------------------------
+
+export const varZoom = (props?: VariantsType) => {
+  const distance = props?.distance || 720;
+  const durationIn = props?.durationIn;
+  const durationOut = props?.durationOut;
+  const easeIn = props?.easeIn;
+  const easeOut = props?.easeOut;
+
+  return {
+    // IN
+    in: {
+      initial: { scale: 0, opacity: 0 },
+      animate: { scale: 1, opacity: 1, transition: varTranEnter({ durationIn, easeIn }) },
+      exit: { scale: 0, opacity: 0, transition: varTranExit({ durationOut, easeOut }) },
+    },
+    inUp: {
+      initial: { scale: 0, opacity: 0, translateY: distance },
+      animate: {
+        scale: 1,
+        opacity: 1,
+        translateY: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        scale: 0,
+        opacity: 0,
+        translateY: distance,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inDown: {
+      initial: { scale: 0, opacity: 0, translateY: -distance },
+      animate: {
+        scale: 1,
+        opacity: 1,
+        translateY: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        scale: 0,
+        opacity: 0,
+        translateY: -distance,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inLeft: {
+      initial: { scale: 0, opacity: 0, translateX: -distance },
+      animate: {
+        scale: 1,
+        opacity: 1,
+        translateX: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        scale: 0,
+        opacity: 0,
+        translateX: -distance,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+    inRight: {
+      initial: { scale: 0, opacity: 0, translateX: distance },
+      animate: {
+        scale: 1,
+        opacity: 1,
+        translateX: 0,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+      exit: {
+        scale: 0,
+        opacity: 0,
+        translateX: distance,
+        transition: varTranExit({ durationOut, easeOut }),
+      },
+    },
+
+    // OUT
+    out: {
+      initial: { scale: 1, opacity: 1 },
+      animate: { scale: 0, opacity: 0, transition: varTranEnter({ durationIn, easeIn }) },
+    },
+    outUp: {
+      initial: { scale: 1, opacity: 1 },
+      animate: {
+        scale: 0,
+        opacity: 0,
+        translateY: -distance,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+    },
+    outDown: {
+      initial: { scale: 1, opacity: 1 },
+      animate: {
+        scale: 0,
+        opacity: 0,
+        translateY: distance,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+    },
+    outLeft: {
+      initial: { scale: 1, opacity: 1 },
+      animate: {
+        scale: 0,
+        opacity: 0,
+        translateX: -distance,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+    },
+    outRight: {
+      initial: { scale: 1, opacity: 1 },
+      animate: {
+        scale: 0,
+        opacity: 0,
+        translateX: distance,
+        transition: varTranEnter({ durationIn, easeIn }),
+      },
+    },
+  };
+};