init project

src/core/components/LinkRouting.jsx

@@ -0,0 +1,116 @@
+import MuiLink from "@mui/material/Link";
+import { styled } from "@mui/material/styles";
+import clsx from "clsx";
+import NextLink from "next/link";
+import { useRouter } from "next/router";
+import * as React from "react";
+
+// Add support for the sx prop for consistency with the other branches.
+const Anchor = styled("a")({});
+
+export const NextLinkComposed = React.forwardRef(function NextLinkComposed(
+  props,
+  ref
+) {
+  const {
+    to,
+    linkAs,
+    replace,
+    scroll,
+    shallow,
+    prefetch,
+    legacyBehavior = true,
+    locale,
+    ...other
+  } = props;
+
+  return (
+    <NextLink
+      href={to}
+      prefetch={prefetch}
+      as={linkAs}
+      replace={replace}
+      scroll={scroll}
+      shallow={shallow}
+      passHref
+      locale={locale}
+      legacyBehavior={legacyBehavior}
+    >
+      <Anchor ref={ref} {...other} />
+    </NextLink>
+  );
+});
+
+// A styled version of the Next.js Link component:
+// https://nextjs.org/docs/api-reference/next/link
+const LinkRouting = React.forwardRef(function Link(props, ref) {
+  const {
+    activeClassName = "active",
+    as,
+    className: classNameProps,
+    href,
+    legacyBehavior,
+    linkAs: linkAsProp,
+    locale,
+    noLinkStyle,
+    prefetch,
+    replace,
+    role, // Link don't have roles.
+    scroll,
+    shallow,
+    ...other
+  } = props;
+
+  const router = useRouter();
+  const pathname = typeof href === "string" ? href : href.pathname;
+  const className = clsx(classNameProps, {
+    [activeClassName]: router.pathname === pathname && activeClassName,
+  });
+
+  const isExternal =
+    typeof href === "string" &&
+    (href.indexOf("http") === 0 || href.indexOf("mailto:") === 0);
+
+  if (isExternal) {
+    if (noLinkStyle) {
+      return <Anchor className={className} href={href} ref={ref} {...other} />;
+    }
+
+    return <MuiLink className={className} href={href} ref={ref} {...other} />;
+  }
+
+  const linkAs = linkAsProp || as;
+  const nextjsProps = {
+    to: href,
+    linkAs,
+    replace,
+    scroll,
+    shallow,
+    prefetch,
+    legacyBehavior,
+    locale,
+  };
+
+  if (noLinkStyle) {
+    return (
+      <NextLinkComposed
+        className={className}
+        ref={ref}
+        {...nextjsProps}
+        {...other}
+      />
+    );
+  }
+
+  return (
+    <MuiLink
+      component={NextLinkComposed}
+      className={className}
+      ref={ref}
+      {...nextjsProps}
+      {...other}
+    />
+  );
+});
+
+export default LinkRouting;

src/core/components/LoadingHardPage.jsx

@@ -0,0 +1,44 @@
+import { Backdrop, Fade, styled } from "@mui/material";
+import StyledImage from "./StyledImage";
+
+const LoadingImage = styled(StyledImage)({
+  "@keyframes load": {
+    "0%": {
+      // opacity: 0,
+      transform: "scale(1)",
+    },
+    "50%": {
+      // opacity: 1,
+      transform: "scale(2)",
+    },
+    "100%": {
+      // opacity: 0,
+      transform: "scale(1)",
+    },
+  },
+  animation: "load 2s infinite",
+});
+
+const LoadingHardPage = ({ children, loading }) => {
+  return (
+    <>
+      <Backdrop
+        sx={{ bgcolor: "#fff", zIndex: (theme) => theme.zIndex.drawer + 1 }}
+        open={loading}
+      >
+        <Fade in={true}>
+          <LoadingImage
+            src={"/images/logo.svg"}
+            alt="loading marhaba"
+            priority
+            width={100}
+            height={100}
+          />
+        </Fade>
+      </Backdrop>
+      {children}
+    </>
+  );
+};
+
+export default LoadingHardPage;

src/core/components/Messages.jsx

@@ -0,0 +1,22 @@
+import CenterLayout from "@/layouts/CenterLayout";
+import FullPageLayout from "@/layouts/FullPageLayout";
+import StyledImage from "./StyledImage";
+
+const Message = ({ text, actions }) => {
+  return (
+    <FullPageLayout sx={{ p: 1 }}>
+      <CenterLayout spacing={3}>
+        <StyledImage
+          src={"/images/logo.svg"}
+          alt="loading loan facilities"
+          width={100}
+          height={100}
+        />
+        {text}
+        {actions}
+      </CenterLayout>
+    </FullPageLayout>
+  );
+};
+
+export default Message;

src/core/components/PasswordField.jsx

@@ -0,0 +1,33 @@
+import { useState } from "react";
+import { IconButton, InputAdornment, TextField } from "@mui/material";
+import { Visibility, VisibilityOff } from "@mui/icons-material";
+import { Field } from "formik";
+
+const PasswordField = (props) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const handleClickShowPassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  return (
+    <Field
+      variant="outlined"
+      fullWidth
+      as={TextField}
+      {...props}
+      type={showPassword ? "text" : "password"}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <IconButton onClick={handleClickShowPassword}>
+              {showPassword ? <Visibility /> : <VisibilityOff />}
+            </IconButton>
+          </InputAdornment>
+        ),
+      }}
+    />
+  );
+};
+
+export default PasswordField;

src/core/components/StyledForm.jsx

@@ -0,0 +1,6 @@
+import { styled } from "@mui/material";
+import { Form } from "formik";
+
+const StyledForm = styled(Form)``;
+
+export default StyledForm;

src/core/components/StyledImage.jsx

@@ -0,0 +1,6 @@
+import { styled } from "@mui/material";
+import Image from "next/image";
+
+const StyledImage = styled(Image)``;
+
+export default StyledImage;

src/core/components/TitlePage.jsx

@@ -0,0 +1,15 @@
+import { useTranslations } from "next-intl";
+import Head from "next/head";
+
+const TitlePage = ({ text }) => {
+  const t = useTranslations();
+  return (
+    <Head>
+      <title>
+        {text ? `${t("app_short_name")} | ${t(text)}` : t("app_short_name")}
+      </title>
+    </Head>
+  );
+};
+
+export default TitlePage;

src/core/components/isBotHandler.jsx

@@ -0,0 +1,8 @@
+import { NoSsr } from "@mui/material";
+
+const NoSsrHandler = ({ isBot, children }) => {
+  if (isBot) return children;
+  return <NoSsr>{children}</NoSsr>;
+};
+
+export default NoSsrHandler;

src/core/data/headerProfileItems.jsx

@@ -0,0 +1,19 @@
+import BorderColorIcon from "@mui/icons-material/BorderColor";
+import PasswordIcon from "@mui/icons-material/Password";
+
+const headerProfileItems = [
+  {
+    key: 0,
+    name: "header.edit_profile",
+    route: "/dashboard/edit-profile",
+    icon: <BorderColorIcon />,
+  },
+  {
+    key: 1,
+    name: "header.change_password",
+    route: "/dashboard/change-password",
+    icon: <PasswordIcon />,
+  },
+];
+
+export default headerProfileItems;

src/core/data/sidebarMenu.jsx

@@ -0,0 +1,31 @@
+import SpaceDashboardIcon from "@mui/icons-material/SpaceDashboard";
+import BookmarkAddedIcon from "@mui/icons-material/BookmarkAdded";
+import DataSaverOnIcon from "@mui/icons-material/DataSaverOn";
+
+const sidebarMenu = [
+  [
+    {
+      key: "sidebar.dashboard",
+      type: "page",
+      route: "/dashboard",
+      icon: <SpaceDashboardIcon />,
+      selected: false,
+    },
+    {
+      key: "sidebar.loan-request",
+      type: "page",
+      route: "/dashboard/loan-request",
+      icon: <DataSaverOnIcon />,
+      selected: false,
+    },
+    {
+      key: "sidebar.loan-follow-up",
+      type: "page",
+      route: "/dashboard/loan-follow-up",
+      icon: <BookmarkAddedIcon />,
+      selected: false,
+    },
+  ],
+];
+
+export default sidebarMenu;

src/core/utils/createEmotionCache.jsx

@@ -0,0 +1,38 @@
+import createCache from "@emotion/cache";
+import { prefixer } from "stylis";
+import stylisRTLPlugin from "stylis-plugin-rtl";
+
+const isBrowser = typeof document !== "undefined";
+
+export const createEmotionCacheLtr = () => {
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector(
+      'meta[name="emotion-insertion-point"]'
+    );
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({
+    key: "mui-style",
+    insertionPoint,
+  });
+};
+
+export const createEmotionCacheRtl = () => {
+  let insertionPoint;
+
+  if (isBrowser) {
+    const emotionInsertionPoint = document.querySelector(
+      'meta[name="emotion-insertion-point"]'
+    );
+    insertionPoint = emotionInsertionPoint ?? undefined;
+  }
+
+  return createCache({
+    key: "muirtl",
+    stylisPlugins: [prefixer, stylisRTLPlugin],
+    insertionPoint,
+  });
+};

src/core/utils/theme-rtl.jsx

@@ -0,0 +1,12 @@
+import { createTheme } from "@mui/material/styles";
+import theme from "./theme";
+
+const themeRtl = createTheme({
+  direction: "rtl",
+  typography: {
+    fontFamily: `IRANSans, sans-serif`,
+  },
+  ...theme,
+});
+
+export default themeRtl;

src/core/utils/theme.jsx

@@ -0,0 +1,18 @@
+const theme = {
+  palette: {
+    primary: {
+      main: "#084070",
+      contrastText: "#fff",
+      light: "#2c6291",
+      dark: "#11293e",
+    },
+    secondary: {
+      main: "#FF4E00",
+      contrastText: "#fff",
+      light: "#ed743e",
+      dark: "#ad3a07",
+    },
+  },
+};
+
+export default theme;