Separate Client Portal & Dashboard

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 }),
+      },
+    },
+  };
+};