vercel build in the package.json

"vercel-build":"prisma generate && next build"

frontend/package.json

@@ -11,10 +11,13 @@
     "@vitejs/plugin-react-refresh": "^1.3.1",
     "axios": "^1.6.3",
     "framer-motion": "^10.16.2",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "react-redux": "^9.0.4",
     "react-router-dom": "^6.15.0",
+    "react-select": "^5.8.0",
     "react-tooltip": "^5.21.1",
     "redux": "^5.0.1",
     "redux-thunk": "^3.1.0",

frontend/src/App.jsx

@@ -4,9 +4,11 @@ import Otpscreen from "./pages/TwoFa/Otpscreen";
 import TwofaForm from "./pages/TwoFa/TwofaOptions";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import LoginForm from "./pages/Login/Login";
+import SettingsPage from "./pages/profile/settings";
 import SignupScreen from "./pages/Signup/SignupScreen";
 import SignupTab3 from "./pages/Signup/components/SignupTab3";
 import styles from './MyStyle.css';
+import Profile from './pages/profile/Profile';
 
 function App() {
   return (
@@ -17,6 +19,8 @@ function App() {
                 <Route exact path="/signup" element={<SignupScreen />} />
                 <Route exact path="/auth" element={<TwofaForm />} />
                 <Route exact path="/google" element={<Otpscreen />} />
+                <Route exact path="/settings" element={<SettingsPage />} />
+                <Route exact path="/profile" element={<Profile/>} />
                 {/*<Route exact path='/facebook' component={Facebook} />*/}
                 {/*<Route exact path='/reset-password' component={ResetPassword} />*/}
                 {/*<Route exact path='/password/reset/confirm/:uid/:token' component={ResetPasswordConfirm} />*/}

frontend/src/assets/svg/close.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+export const CloseSVG = ({
+  fillColor = "#000000",
+  className = "",
+  ...props
+}) => {
+  return (
+    <svg
+      fill={fillColor}
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      {...props}
+    >
+      <path d="M 4.7070312 3.2929688 L 3.2929688 4.7070312 L 10.585938 12 L 3.2929688 19.292969 L 4.7070312 20.707031 L 12 13.414062 L 19.292969 20.707031 L 20.707031 19.292969 L 13.414062 12 L 20.707031 4.7070312 L 19.292969 3.2929688 L 12 10.585938 L 4.7070312 3.2929688 z" />
+    </svg>
+  );
+};

frontend/src/components/Button/index.jsx

@@ -0,0 +1,74 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const shapes = { round: "rounded-[10px]", circle: "rounded-[50%]" };
+const variants = {
+  outline: {
+    white_A700: "outline outline-[0.75px] outline-white-A700 text-white-A700",
+    gray_900: "outline outline-[0.5px] outline-gray-900 text-gray-900",
+    gray_100: "outline outline-[0.75px] outline-gray-100 text-black-900",
+  },
+  fill: {
+    gray_900: "bg-gray-900 text-white-A700",
+    gray_100: "bg-gray-100 text-gray-500",
+    green_600: "bg-green-600 text-white-A700",
+    gray_900_67: "bg-gray-900_67",
+    black_900: "bg-black-900 text-white-A700",
+    white_A700: "bg-white-A700 text-gray-900",
+    gray_50: "bg-gray-50 text-black-900",
+    gray_900_26: "bg-gray-900_26 text-white-A700",
+  },
+};
+const sizes = {
+  xs: "p-[7px]",
+  sm: "pr-[9px] py-[9px]",
+  md: "p-2.5",
+  lg: "p-[13px]",
+  xl: "pr-[15px] py-[15px]",
+  "2xl": "p-4",
+};
+
+const Button = ({
+  children,
+  className = "",
+  leftIcon,
+  rightIcon,
+  shape = "",
+  size = "",
+  variant = "",
+  color = "",
+  ...restProps
+}) => {
+  return (
+    <button
+      className={`${className} ${(shape && shapes[shape]) || ""} ${
+        (size && sizes[size]) || ""
+      } ${(variant && variants[variant]?.[color]) || ""}`}
+      {...restProps}
+    >
+      {!!leftIcon && leftIcon}
+      {children}
+      {!!rightIcon && rightIcon}
+    </button>
+  );
+};
+
+Button.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  shape: PropTypes.oneOf(["round", "circle"]),
+  size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl", "2xl"]),
+  variant: PropTypes.oneOf(["outline", "fill"]),
+  color: PropTypes.oneOf([
+    "white_A700",
+    "gray_900",
+    "gray_100",
+    "green_600",
+    "gray_900_67",
+    "black_900",
+    "gray_50",
+    "gray_900_26",
+  ]),
+};
+
+export { Button };

frontend/src/components/ErrorMessage/index.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export const ErrorMessage = ({ errors = [], className = "" }) => {
+  return (
+    errors?.length > 0 && (
+      <div
+        className={`text-red-500 text-left text-xs w-full mt-1 ${className}`}
+      >
+        {errors.join(", ")}
+      </div>
+    )
+  );
+};

frontend/src/components/Img/index.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+
+const Img = ({
+  className,
+  src = "defaultNoData.png",
+  alt = "testImg",
+  ...restProps
+}) => {
+  return (
+    <img
+      className={className}
+      src={src}
+      alt={alt}
+      {...restProps}
+      loading={"lazy"}
+    />
+  );
+};
+export { Img };

frontend/src/components/Input/index.jsx

@@ -0,0 +1,84 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { ErrorMessage } from "../../components/ErrorMessage";
+
+const variants = {
+  outline: {
+    gray_400: "border border-gray-400 border-solid text-black-900",
+    gray_300: "border border-gray-300 border-solid",
+  },
+  fill: { gray_50: "bg-gray-50 text-gray-500", white_A700: "bg-white-A700" },
+};
+const shapes = { round: "rounded-[15px]" };
+const sizes = {
+  xs: "pb-[11px] pr-[11px] pt-[13px]",
+  md: "pb-[18px] pr-[18px] pt-[19px]",
+  sm: "pb-[15px] pt-[18px]",
+};
+
+const Input = React.forwardRef(
+  (
+    {
+      wrapClassName = "",
+      className = "",
+      name = "",
+      placeholder = "",
+      type = "text",
+      children,
+      errors = [],
+      label = "",
+      prefix,
+      suffix,
+      onChange,
+      shape = "",
+      size = "",
+      variant = "fill",
+      color = "white_A700",
+      ...restProps
+    },
+    ref,
+  ) => {
+    const handleChange = (e) => {
+      if (onChange) onChange(e?.target?.value);
+    };
+
+    return (
+      <>
+        <div
+          className={`${wrapClassName} 
+              ${shapes[shape] || ""} 
+              ${variants[variant]?.[color] || ""} 
+              ${sizes[size] || ""}`}
+        >
+          {!!label && label}
+          {!!prefix && prefix}
+          <input
+            ref={ref}
+            className={`${className} bg-transparent border-0`}
+            type={type}
+            name={name}
+            onChange={handleChange}
+            placeholder={placeholder}
+            {...restProps}
+          />
+          {!!suffix && suffix}
+        </div>
+        {!!errors && <ErrorMessage errors={errors} />}
+      </>
+    );
+  },
+);
+
+Input.propTypes = {
+  wrapClassName: PropTypes.string,
+  className: PropTypes.string,
+  name: PropTypes.string,
+  placeholder: PropTypes.string,
+  type: PropTypes.string,
+  shape: PropTypes.oneOf(["round"]),
+  size: PropTypes.oneOf(["xs", "md", "sm"]),
+  variant: PropTypes.oneOf(["outline", "fill"]),
+  color: PropTypes.oneOf(["gray_400", "gray_300", "gray_50", "white_A700"]),
+};
+
+export { Input };

frontend/src/components/Line/index.jsx

@@ -0,0 +1,6 @@
+import React from "react";
+
+const Line = ({ className, ...restProps }) => {
+  return <div className={className} {...restProps} />;
+};
+export { Line };

frontend/src/components/List/index.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+const List = ({ children, className, ...restProps }) => {
+  return (
+    <div className={className} {...restProps}>
+      {children}
+    </div>
+  );
+};
+export { List };

frontend/src/components/SearchBar.jsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export default function SearchBar() {
+  return (
+    <div>SearchBar</div>
+  )
+}