handle register and poster and fix bugs

app/globals.css

@@ -852,9 +852,18 @@ html {
 }
 
 .bg-poster {
-  background-image: url(/public/assets/images/poster.png);
+  background-image: url(../public/assets/images/poster.png);
   width: 100%;
   height: 100%;
   background-repeat: no-repeat;
   background-size: cover;
 }
+
+.bg-stroke-circle {
+  background-image: url(../public/assets/images/stroke-circle.png);
+  background-size: cover;
+}
+
+.MuiButton-loading .MuiButton-loadingIndicator {
+  color: #ffffff !important;
+}

components/doctor/Poster.js

@@ -1,15 +0,0 @@
-import Image from "next/image";
-import Logo from "@/public/assets/images/logo.png";
-
-function Poster() {
-  return (
-    <div className="bg-poster !pt-[32px] p-[24px]">
-      <div className="flex items-center justify-start gap-[5px]">
-        <Image src={Logo} width={30} height={30} alt="logo" />
-        <p className="text-[#E7EEF6] text-[16px] font-bold">nobat724.com</p>
-      </div>
-    </div>
-  );
-}
-
-export default Poster;

components/doctor/index.js

@@ -5,7 +5,7 @@ import AppointmentList from "./appointmentList";
 import DetailDoctor from "./detailDoctor";
 import Share from "./detailDoctor/Share";
 import CustomLoading from "@/app/component/loading/Custom";
-import Poster from "./Poster";
+import Poster from "./poster";
 
 function DoctorPage({ doctor }) {
   const [loading, setLoading] = useState(true);
@@ -31,7 +31,6 @@ function DoctorPage({ doctor }) {
           <Share />
         </div>
       </div>
-      <Poster />
       <div className="flex items-start justify-center gap-6 mt-[30px]">
         <DetailDoctor doctor={doctor} loading={loading} />
         <AppointmentList doctor={doctor} loading={loading} />

components/doctor/poster/Address.js

@@ -0,0 +1,17 @@
+import ClipBoard from "../../icons/ClipBoard";
+
+function Address({ data }) {
+  return (
+    <div className="flex flex-col items-start justify-start mt-[40px]">
+      <div className="flex items-center justify-start gap-[6px]">
+        <ClipBoard />
+        <p className="text-[#E7EEF6] text-[20px] font-semibold">آدرس:</p>
+      </div>
+      <p className="text-[#E7EEF6] text-[16px] !font-normal mt-[16px]">
+        {data.location}
+      </p>
+    </div>
+  );
+}
+
+export default Address;

components/doctor/poster/ImageProfile.js

@@ -0,0 +1,11 @@
+import Image from "next/image";
+
+function ImageProfile({ data }) {
+  return (
+    <div className="bg-stroke-circle ml-[10px] mt-[57px] p-[9px] rounded-full overflow-hidden">
+      <Image src={data.img} width={173} height={173} alt="profile-user" />
+    </div>
+  );
+}
+
+export default ImageProfile;

components/doctor/poster/QrCode.js

@@ -0,0 +1,15 @@
+import Image from "next/image";
+import CodeSample from "@/public/assets/images/default-qr-code.png";
+
+function QrCode() {
+  return (
+    <div className="flex items-center flex-col justify-center mt-[100%]">
+      <Image className="mt-[100%]" src={CodeSample} width={167} height={167} />
+      <p className="text-[#3987D4] font-semibold text-[16px] mt-[32px]">
+        nobat724/ahwaz.com
+      </p>
+    </div>
+  );
+}
+
+export default QrCode;

components/doctor/poster/Services.js

@@ -0,0 +1,23 @@
+import ClipBoard from "../../icons/ClipBoard";
+import CircleOrangeSm from "../../icons/CircleOrangeSm";
+
+function Services({ data }) {
+  return (
+    <div className="flex flex-col items-start justify-start mt-[40px]">
+      <div className="flex items-center justify-start gap-[6px]">
+        <ClipBoard />
+        <p className="text-[#E7EEF6] text-[20px] font-semibold">خدمات:</p>
+      </div>
+      <ul className="flex flex-col justify-start items-start gap-[16px] mt-[16px] font-normal ">
+        {data.specialties.map((item, idx) => (
+          <li key={idx} className="flex items-center justify-start gap-[4px]">
+            <CircleOrangeSm />
+            <p className="text-[16px] font-normal text-[#E7EEF6]">{item}</p>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default Services;

components/doctor/poster/Telefon.js

@@ -0,0 +1,20 @@
+import TelefonPoster from "@/components/icons/TelefonPoster";
+
+function Telefon({ data }) {
+  return (
+    <div className="flex flex-col items-start justify-start mt-[40px]">
+      <div className="flex items-center justify-start gap-[6px]">
+        <TelefonPoster />
+        <p className="text-[#E7EEF6] text-[20px] font-semibold">تلفن:</p>
+      </div>
+      <p className="text-[#E7EEF6] text-[16px] font-normal mt-[16px]">
+        {data.phone}
+      </p>
+      <p className="text-[#E7EEF6] text-[16px] font-normal mt-[12px]">
+        {data.phone} - {data.phone}
+      </p>
+    </div>
+  );
+}
+
+export default Telefon;

components/doctor/poster/index.js

@@ -0,0 +1,35 @@
+import Image from "next/image";
+import Logo from "@/public/assets/images/logo.png";
+import Services from "./Services";
+import Address from "./Address";
+import Telefon from "./Telefon";
+import ImageProfile from "./ImageProfile";
+import QrCode from "./QrCode";
+
+function Poster({ data }) {
+  return (
+    <div className="bg-poster rounded-[16px] overflow-hidden !pt-[32px] p-[24px] relative flex justify-between items-start">
+      <div>
+        <div className="flex items-center justify-start gap-[5px]">
+          <Image src={Logo} width={30} height={30} alt="logo" />
+          <p className="text-[#E7EEF6] text-[16px] font-bold">nobat724.com</p>
+        </div>
+        <p className="mt-[40px] text-[#E7EEF6] text-[20px] font-bold">
+          {data.name}
+        </p>
+        <p className="text-[24px] mt-[20px] text-[#E7EEF6] font-bold">
+          تخصص: {data.expertise}
+        </p>
+        <Services data={data} />
+        <Address data={data} />
+        <Telefon data={data} />
+      </div>
+      <div className="flex flex-col justify-between items-end">
+        <ImageProfile data={data} />
+        <QrCode />
+      </div>
+    </div>
+  );
+}
+
+export default Poster;

components/icons/AddressPoster.js

@@ -0,0 +1,24 @@
+function AddressPoster() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <path
+        d="M10.0004 11.1917C11.4363 11.1917 12.6004 10.0276 12.6004 8.59167C12.6004 7.15573 11.4363 5.99167 10.0004 5.99167C8.56445 5.99167 7.40039 7.15573 7.40039 8.59167C7.40039 10.0276 8.56445 11.1917 10.0004 11.1917Z"
+        stroke="#E7EEF6"
+        strokeWidth="1.5"
+      />
+      <path
+        d="M3.01675 7.075C4.65842 -0.141667 15.3501 -0.133334 16.9834 7.08333C17.9417 11.3167 15.3084 14.9 13.0001 17.1167C11.3251 18.7333 8.67508 18.7333 6.99175 17.1167C4.69175 14.9 2.05842 11.3083 3.01675 7.075Z"
+        stroke="#E7EEF6"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+}
+
+export default AddressPoster;

components/icons/CircleOrangeSm.js

@@ -0,0 +1,15 @@
+function CircleOrangeSm() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="8"
+      height="9"
+      viewBox="0 0 8 9"
+      fill="none"
+    >
+      <circle cx="4" cy="4.5" r="4" fill="#F17732" />
+    </svg>
+  );
+}
+
+export default CircleOrangeSm;

components/icons/ClipBoard.js

@@ -0,0 +1,37 @@
+function ClipBoard() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
+      fill="none"
+    >
+      <path
+        d="M9.30957 15.2L10.8096 16.7L14.8096 12.7"
+        stroke="#E7EEF6"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10 6.5H14C16 6.5 16 5.5 16 4.5C16 2.5 15 2.5 14 2.5H10C9 2.5 8 2.5 8 4.5C8 6.5 9 6.5 10 6.5Z"
+        stroke="#E7EEF6"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16 4.52C19.33 4.7 21 5.93 21 10.5V16.5C21 20.5 20 22.5 15 22.5H9C4 22.5 3 20.5 3 16.5V10.5C3 5.94 4.67 4.7 8 4.52"
+        stroke="#E7EEF6"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default ClipBoard;

components/icons/TelefonPoster.js

@@ -0,0 +1,34 @@
+function TelefonPoster() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="21"
+      viewBox="0 0 20 21"
+      fill="none"
+    >
+      <path
+        d="M18.3087 15.775C18.3087 16.075 18.242 16.3833 18.1003 16.6833C17.9587 16.9833 17.7753 17.2667 17.5337 17.5333C17.1253 17.9833 16.6753 18.3083 16.167 18.5167C15.667 18.725 15.1253 18.8333 14.542 18.8333C13.692 18.8333 12.7837 18.6333 11.8253 18.225C10.867 17.8167 9.90866 17.2667 8.95866 16.575C8.00033 15.875 7.09199 15.1 6.22533 14.2417C5.36699 13.375 4.59199 12.4667 3.90033 11.5167C3.21699 10.5667 2.66699 9.61667 2.26699 8.67501C1.86699 7.72501 1.66699 6.81667 1.66699 5.95C1.66699 5.38334 1.76699 4.84167 1.96699 4.34167C2.16699 3.83334 2.48366 3.36667 2.92533 2.95001C3.45866 2.42501 4.04199 2.16667 4.65866 2.16667C4.89199 2.16667 5.12533 2.21667 5.33366 2.31667C5.55033 2.41667 5.74199 2.56667 5.89199 2.78334L7.82533 5.50834C7.97533 5.71667 8.08366 5.90834 8.15866 6.09167C8.23366 6.26667 8.27533 6.44167 8.27533 6.60001C8.27533 6.80001 8.21699 7 8.10033 7.19167C7.99199 7.38334 7.83366 7.58334 7.63366 7.78334L7.00033 8.44167C6.90866 8.53334 6.86699 8.64167 6.86699 8.77501C6.86699 8.84167 6.87533 8.9 6.89199 8.96667C6.91699 9.03334 6.94199 9.08334 6.95866 9.13334C7.10866 9.40834 7.36699 9.76667 7.73366 10.2C8.10866 10.6333 8.50866 11.075 8.94199 11.5167C9.39199 11.9583 9.82533 12.3667 10.267 12.7417C10.7003 13.1083 11.0587 13.3583 11.342 13.5083C11.3837 13.525 11.4337 13.55 11.492 13.575C11.5587 13.6 11.6253 13.6083 11.7003 13.6083C11.842 13.6083 11.9503 13.5583 12.042 13.4667L12.6753 12.8417C12.8837 12.6333 13.0837 12.475 13.2753 12.375C13.467 12.2583 13.6587 12.2 13.867 12.2C14.0253 12.2 14.192 12.2333 14.3753 12.3083C14.5587 12.3833 14.7503 12.4917 14.9587 12.6333L17.717 14.5917C17.9337 14.7417 18.0837 14.9167 18.1753 15.125C18.2587 15.3333 18.3087 15.5417 18.3087 15.775Z"
+        stroke="#E7EEF6"
+        strokeWidth="1.5"
+        strokeMiterlimit="10"
+      />
+      <path
+        d="M15.4167 8.00001C15.4167 7.50001 15.025 6.73334 14.4417 6.10834C13.9083 5.53334 13.2 5.08334 12.5 5.08334"
+        stroke="#E7EEF6"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M18.3333 8.00001C18.3333 4.77501 15.725 2.16667 12.5 2.16667"
+        stroke="#E7EEF6"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export default TelefonPoster;

components/register/LogInPage.js

@@ -1,13 +1,13 @@
 import Field from "@/app/component/element/Field";
-import { formatPhoneNumber, validatePhoneNumber } from "@/helper";
+import { changeNumToDefault, formatPhoneNumber, validatePhoneNumber } from "@/helper";
 import { request } from "@/services/response";
-import { Button, InputAdornment } from "@mui/material";
+import { InputAdornment, Button } from "@mui/material";
 import Link from "next/link";
 import { useState } from "react";
 
-function LogInPage({ setIsSendMsg, setStep, matchedCity }) {
-  const [num, setNum] = useState("");
+function LogInPage({ setIsSendMsg, num, setNum, matchedCity }) {
   const [error, setError] = useState({ valid: true, text: "" });
+  const [loading, setLoading] = useState(false);
 
   const handleChange = (val) => {
     const formatted = formatPhoneNumber(val);
@@ -15,13 +15,13 @@ function LogInPage({ setIsSendMsg, setStep, matchedCity }) {
     setError(checkedNum);
     setNum(formatted);
   };
-
   const handleReq = () => {
+    setLoading(true);
     request
-      .auth("/")
-      .then(() => {
-        setIsSendMsg && setIsSendMsg(true);
-        setStep && setStep((prev) => prev + 1);
+      .sendCode(changeNumToDefault(num))
+      .then((response) => {
+        setLoading(false);
+        if (response) setIsSendMsg(true);
       })
       .catch(() => {
         setLoading(false);
@@ -80,6 +80,7 @@ function LogInPage({ setIsSendMsg, setStep, matchedCity }) {
       <Button
         fullWidth
         variant="contained"
+        loading={loading}
         onClick={() => {
           const checkedNum = validatePhoneNumber(num);
           if (!checkedNum.valid) {

components/register/SetCodePage.js

@@ -6,13 +6,43 @@ import OTPForm from "./element/OTPForm";
 import EditLogin from "../icons/EditLogin";
 import RetryLogin from "../icons/RetryLogin";
 import ArrowRightS from "../icons/ArrowRightS";
+import { request } from "@/services/response";
+import { changeNumToDefault } from "@/helper";
 
 const time_resend_code = 120;
 
-function SetCodePage({ setIsSendMsg, link, setStep }) {
+function SetCodePage({ setIsSendMsg, link, num, setStep }) {
   const retryIcon = useRef();
 
   const [timer, setTimer] = useState(0);
+  const [code, setCode] = useState(["", "", "", ""]);
+  const [isError, setIsError] = useState(false);
+  const inputRefs = Array.from({ length: 5 }, () => useRef());
+
+  const handleChange = (index, val) => {
+    const newCode = [...code];
+
+    if (val === "backspace") {
+      newCode[index] = "";
+      setCode(newCode);
+      if (index > 0) {
+        inputRefs[index - 1].current?.focus();
+      }
+      return;
+    }
+
+    newCode[index] = val;
+
+    if (newCode.join("").length === 4 && isError) {
+      setIsError(false);
+    }
+
+    setCode(newCode);
+
+    if (val && index < inputRefs.length - 1) {
+      inputRefs[index + 1].current?.focus();
+    }
+  };
 
   const handleTimer = () => {
     setTimer("loading");
@@ -28,8 +58,21 @@ function SetCodePage({ setIsSendMsg, link, setStep }) {
     }, 1000);
   };
 
-  const handleOTP = (e) => {
-    e.target.nextElementSibling && e.target.nextElementSibling.focus();
+  const handleReq = () => {
+    request
+      .getToken(
+        "mobile",
+        process.env.NEXT_PUBLIC_CLIENT_ID,
+        process.env.NEXT_PUBLIC_CLIENT_SECRET,
+        changeNumToDefault(num),
+        code.join("")
+      )
+      .then((response) => {
+        console.log(response);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
   };
 
   return (
@@ -53,20 +96,32 @@ function SetCodePage({ setIsSendMsg, link, setStep }) {
         کد تایید برای شماره 09013261200 ارسال شد.
       </p>
       <div className="mt-[26px] sm:mt-[28px] md:mt-[30px] lg:mt-[32px] mb-[56px] sm:mb-[47px] md:mb-[38px] lg:mb-[30px]">
-        <div
-          className="w-full mb-[27px] flex items-center justify-center gap-6 sm:gap-6"
-          dir="ltr"
-        >
-          <OTPForm handleOTP={handleOTP} />
-          <OTPForm handleOTP={handleOTP} />
-          <OTPForm handleOTP={handleOTP} />
-          <OTPForm handleOTP={handleOTP} />
-          <OTPForm handleOTP={handleOTP} />
+        <div className="mb-[27px]" dir="ltr">
+          <div
+            className="w-full flex items-center justify-center gap-6 sm:gap-6"
+            dir="ltr"
+          >
+            {code.map((digit, index) => (
+              <OTPForm
+                key={index}
+                index={index}
+                value={digit}
+                isError={isError}
+                onChange={handleChange}
+                inputRef={inputRefs[index]}
+              />
+            ))}
+          </div>
+          <p
+            className={`
+          text-[#d32f2f] text-[14px] mt-2 min-h-[21px] transition-all duration-1000 ease-in-out
+            transform text-right 
+            ${!isError ? "opacity-0 -translate-y-1" : "opacity-100 translate-y-0"}
+        `}
+          >
+            !کد را وارد کنید
+          </p>
         </div>
-        {/* <Button className="flex items-center justify-start gap-1">
-                    <p className="text-[#F17732] text-[14px] font-medium">دریافت مجدد کد تایید</p>
-                    <ArrowLeftOrangeS />
-                </Button> */}
         <div className="flex w-full items-center justify-between flex-wrap gap-y-5">
           <Button
             className="flex !p-1 items-center justify-start gap-1 cursor-pointer"
@@ -83,16 +138,13 @@ function SetCodePage({ setIsSendMsg, link, setStep }) {
 
           <Button
             className="flex !p-1 items-center justify-start gap-1 hover-rotate-90 cursor-pointer"
-            // sx={{ '&.MuiButton-root:hover': { bgcolor: 'transparent' } }}
             disabled={typeof timer === "number" && timer !== 0}
             onClick={() => {
               if (!timer && timer !== "loading") {
                 handleTimer();
 
-                // Rotate Retry Icon
                 retryIcon.current.classList.add("retry-icon");
 
-                // Remove Style Rotate Icon
                 setTimeout(() => {
                   retryIcon.current &&
                     retryIcon.current.classList.remove("retry-icon");
@@ -117,19 +169,22 @@ function SetCodePage({ setIsSendMsg, link, setStep }) {
           </Button>
         </div>
       </div>
-      <Link href={link || ""} onClick={(e) => !link && e.preventDefault()}>
-        <Button
-          fullWidth
-          variant="contained"
-          onClick={() => {
-            setIsSendMsg && setIsSendMsg(true);
-            setStep && setStep((prev) => prev + 1);
-          }}
-          className="!rounded-[8px] !bg-[#5559CE]"
-        >
-          تایید
-        </Button>
-      </Link>
+      <Button
+        fullWidth
+        variant="contained"
+        onClick={() => {
+          setIsSendMsg && setIsSendMsg(true);
+          setStep && setStep((prev) => prev + 1);
+          if (code.join("").length !== 4) {
+            setIsError(true);
+          } else {
+            handleReq();
+          }
+        }}
+        className="!rounded-[8px] !bg-[#5559CE]"
+      >
+        تایید
+      </Button>
     </div>
   );
 }

components/register/element/OTPForm.js

@@ -1,28 +1,26 @@
-import { useState } from "react";
-
-function OTPForm({ handleOTP }) {
-  const [code, setCode] = useState("");
-
+function OTPForm({ index, value, onChange, inputRef, isError }) {
   return (
     <input
-      value={code}
+      ref={inputRef}
+      value={value}
+      maxLength={1}
       onChange={(e) => {
-        const value = e.target.value;
-
-        if (/^\d+$/.test(value) && value.length < 2) {
-          setCode(value);
-          handleOTP(e);
-        } else {
-          setCode("");
-          e.target.value = "";
+        const val = e.target.value;
+        if (/^\d?$/.test(val)) {
+          onChange(index, val);
+        }
+      }}
+      onKeyDown={(e) => {
+        if (e.key === "Backspace" && !e.target.value) {
+          onChange(index, "backspace");
         }
       }}
       className={`border otp-field border-solid border-[#ADB5BD] rounded-[6px] text-center transition-all duration-500 ease-out
-            outline-none focus:!border-[1px] focus:!border-solid focus:!border-[#5559CE]
-            focus:!outline-[1px] focus:!outline-solid focus:!outline-[#5559CE] bg-transparent text-[#525252]
-            w-[43px] h-[43px] sm:w-[45px] sm:h-[45px] md:w-[47px] md:h-[47px] lg:w-[48px] lg:h-[48px] 
-            ${code && "!border-[1px] !border-solid !border-[#5559CE]"}
-            `}
+        outline-none focus:!border-[1px] focus:!border-solid focus:!border-[#5559CE]
+        focus:!outline-[1px] focus:!outline-solid focus:!outline-[#5559CE] bg-transparent text-[#525252]
+        w-[43px] h-[43px] sm:w-[45px] sm:h-[45px] md:w-[47px] md:h-[47px] lg:w-[48px] lg:h-[48px] 
+        ${value && "!border-[1px] !border-solid !border-[#5559CE]"}
+        ${isError && "!border-[#d32f2f]"}`}
     />
   );
 }

components/register/index.js

@@ -7,14 +7,22 @@ import LayoutRegister from "./LayoutRegister";
 
 function RegisterPage({ matchedCity }) {
   const [isSendMsg, setIsSendMsg] = useState(false);
+  const [num, setNum] = useState("");
 
   return (
     <LayoutRegister matchedCity={matchedCity}>
       {isSendMsg ? (
-        <SetCodePage setIsSendMsg={setIsSendMsg} setStep={false} link="/" />
+        <SetCodePage
+          num={num}
+          setIsSendMsg={setIsSendMsg}
+          setStep={false}
+          link="/"
+        />
       ) : (
         <LogInPage
           matchedCity={matchedCity}
+          num={num}
+          setNum={setNum}
           setStep={false}
           setIsSendMsg={setIsSendMsg}
         />

helper/index.js

@@ -174,15 +174,14 @@ export const filterList = (data) => {
 export function getCleanNumberValue(value, defaultValue = 0) {
   if (typeof value !== "string") value = String(value);
 
-  // Convert Persian and Arabic digits to English digits
   const persianArabicToEnglish = value
     .replace(/[\u06F0-\u06F9]/g, (d) => String(d.charCodeAt(0) - 0x06f0))
     .replace(/[\u0660-\u0669]/g, (d) => String(d.charCodeAt(0) - 0x0660));
 
-  // Remove non-numeric characters except dots (for decimal support)
   const cleaned = persianArabicToEnglish.replace(/[^0-9.]/g, "");
 
-  // Return number or default if invalid
   const number = parseFloat(cleaned);
   return isNaN(number) ? defaultValue : number;
 }
+
+export const changeNumToDefault = (num) => `09${num.replace(/\D/g, "")}`;

package-lock.json

@@ -9,11 +9,12 @@
       "version": "0.1.0",
       "dependencies": {
         "@emotion/cache": "^11.11.0",
-        "@emotion/react": "^11.13.3",
-        "@emotion/styled": "^11.13.0",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
         "@maptiler/sdk": "^2.4.0",
         "@material-ui/core": "^4.11.2",
-        "@mui/material": "^5.16.7",
+        "@mui/icons-material": "^7.1.0",
+        "@mui/material": "^7.1.0",
         "@mui/styled-engine-sc": "^6.0.0-alpha.18",
         "@mui/x-charts": "^7.16.0",
         "@mui/x-date-pickers": "^7.17.0",
@@ -2042,13 +2043,10 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz",
-      "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==",
+      "version": "7.27.1",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.1.tgz",
+      "integrity": "sha512-1x3D2xEk2fRo3PAhwQwu5UubzgiVWSXTBfWpVd2Mx2AzRqJuDJCsgaDVZ7HB5iGzDW1Hl1sWN2mFyKjmR9uAog==",
       "license": "MIT",
-      "dependencies": {
-        "regenerator-runtime": "^0.14.0"
-      },
       "engines": {
         "node": ">=6.9.0"
       }
@@ -3804,36 +3802,62 @@
       }
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "5.16.11",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.11.tgz",
-      "integrity": "sha512-2eVDGg9OvIXNRmfDUQyKYH+jNcjdv1JkCH5F2YDgUye5fMX5nxGiYHAUe1BXaXyDMaLSwXC7LRksEKMiIQsFdw==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.1.0.tgz",
+      "integrity": "sha512-E0OqhZv548Qdc0PwWhLVA2zmjJZSTvaL4ZhoswmI8NJEC1tpW2js6LLP827jrW9MEiXYdz3QS6+hask83w74yQ==",
       "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
       }
     },
-    "node_modules/@mui/material": {
-      "version": "5.16.11",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.16.11.tgz",
-      "integrity": "sha512-uoc67oecKdnVKaMHBVE433YrMuxQs22xY5nIjRb5sAPB+GaeZQWp8brQ3/adeH6k2IDa8+9i2IVd4fNLuvHSvA==",
+    "node_modules/@mui/icons-material": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.1.0.tgz",
+      "integrity": "sha512-1mUPMAZ+Qk3jfgL5ftRR06ATH/Esi0izHl1z56H+df6cwIlCWG66RXciUqeJCttbOXOQ5y2DCjLZI/4t3Yg3LA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/core-downloads-tracker": "^5.16.11",
-        "@mui/system": "^5.16.8",
-        "@mui/types": "^7.2.15",
-        "@mui/utils": "^5.16.8",
+        "@babel/runtime": "^7.27.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^7.1.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.1.0.tgz",
+      "integrity": "sha512-ahUJdrhEv+mCp4XHW+tHIEYzZMSRLg8z4AjUOsj44QpD1ZaMxQoVOG2xiHvLFdcsIPbgSRx1bg1eQSheHBgvtg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.1",
+        "@mui/core-downloads-tracker": "^7.1.0",
+        "@mui/system": "^7.1.0",
+        "@mui/types": "^7.4.2",
+        "@mui/utils": "^7.1.0",
         "@popperjs/core": "^2.11.8",
-        "@types/react-transition-group": "^4.4.10",
-        "clsx": "^2.1.0",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1",
-        "react-is": "^18.3.1",
+        "react-is": "^19.1.0",
         "react-transition-group": "^4.4.5"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -3842,6 +3866,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
+        "@mui/material-pigment-css": "^7.1.0",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -3853,23 +3878,26 @@
         "@emotion/styled": {
           "optional": true
         },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
         "@types/react": {
           "optional": true
         }
       }
     },
     "node_modules/@mui/material/node_modules/@mui/private-theming": {
-      "version": "5.16.8",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.8.tgz",
-      "integrity": "sha512-3Vl9yFVLU6T3CFtxRMQTcJ60Ijv7wxQi4yjH92+9YXcsqvVspeIYoocqNoIV/1bXGYfyWu5zrCmwQVHaGY7bug==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.1.0.tgz",
+      "integrity": "sha512-4Kck4jxhqF6YxNwJdSae1WgDfXVg0lIH6JVJ7gtuFfuKcQCgomJxPvUEOySTFRPz1IZzwz5OAcToskRdffElDA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/utils": "^5.16.8",
+        "@babel/runtime": "^7.27.1",
+        "@mui/utils": "^7.1.0",
         "prop-types": "^15.8.1"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -3886,18 +3914,20 @@
       }
     },
     "node_modules/@mui/material/node_modules/@mui/styled-engine": {
-      "version": "5.16.8",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.8.tgz",
-      "integrity": "sha512-OFdgFf8JczSRs0kvWGdSn0ZeXxWrY0LITDPJ/nAtLEvUUTyrlFaO4il3SECX8ruzvf1VnAxHx4M/4mX9oOn9yA==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.1.0.tgz",
+      "integrity": "sha512-m0mJ0c6iRC+f9hMeRe0W7zZX1wme3oUX0+XTVHjPG7DJz6OdQ6K/ggEOq7ZdwilcpdsDUwwMfOmvO71qDkYd2w==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@emotion/cache": "^11.11.0",
+        "@babel/runtime": "^7.27.1",
+        "@emotion/cache": "^11.13.5",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/sheet": "^1.4.0",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -3918,22 +3948,22 @@
       }
     },
     "node_modules/@mui/material/node_modules/@mui/system": {
-      "version": "5.16.8",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.16.8.tgz",
-      "integrity": "sha512-L32TaFDFpGIi1g6ysRtmhc9zDgrlxDXu3NlrGE8gAsQw/ziHrPdr0PNr20O0POUshA1q14W4dNZ/z0Nx2F9lhA==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.1.0.tgz",
+      "integrity": "sha512-iedAWgRJMCxeMHvkEhsDlbvkK+qKf9me6ofsf7twk/jfT4P1ImVf7Rwb5VubEA0sikrVL+1SkoZM41M4+LNAVA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/private-theming": "^5.16.8",
-        "@mui/styled-engine": "^5.16.8",
-        "@mui/types": "^7.2.15",
-        "@mui/utils": "^5.16.8",
-        "clsx": "^2.1.0",
+        "@babel/runtime": "^7.27.1",
+        "@mui/private-theming": "^7.1.0",
+        "@mui/styled-engine": "^7.1.0",
+        "@mui/types": "^7.4.2",
+        "@mui/utils": "^7.1.0",
+        "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -3957,6 +3987,53 @@
         }
       }
     },
+    "node_modules/@mui/material/node_modules/@mui/types": {
+      "version": "7.4.2",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.2.tgz",
+      "integrity": "sha512-edRc5JcLPsrlNFYyTPxds+d5oUovuUxnnDtpJUbP6WMeV4+6eaX/mqai1ZIWT62lCOe0nlrON0s9HDiv5en5bA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.1"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material/node_modules/@mui/utils": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.1.0.tgz",
+      "integrity": "sha512-/OM3S8kSHHmWNOP+NH9xEtpYSG10upXeQ0wLZnfDgmgadTAk5F4MQfFLyZ5FCRJENB3eRzltMmaNl6UtDnPovw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.27.1",
+        "@mui/types": "^7.4.2",
+        "@types/prop-types": "^15.7.14",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.1.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material/node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -3967,9 +4044,9 @@
       }
     },
     "node_modules/@mui/material/node_modules/react-is": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.0.tgz",
+      "integrity": "sha512-Oe56aUPnkHyyDxxkvqtd7KkdQP5uIUfHxd5XTb3wE9d/kRnZLmKbDB0GWk919tdQ+mxxPtG6EAs6RMT6i1qtHg==",
       "license": "MIT"
     },
     "node_modules/@mui/private-theming": {
@@ -19820,12 +19897,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/regenerator-runtime": {
-      "version": "0.14.1",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
-      "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
-      "license": "MIT"
-    },
     "node_modules/regenerator-transform": {
       "version": "0.15.2",
       "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz",

package.json

@@ -3,18 +3,19 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "cross-env HOST=yazd-nobat.localhost PORT=3000 next dev",
+    "dev": "cross-env HOST=localhost PORT=5170 next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@maptiler/sdk": "^2.4.0",
     "@material-ui/core": "^4.11.2",
-    "@mui/material": "^5.16.7",
+    "@mui/icons-material": "^7.1.0",
+    "@mui/material": "^7.1.0",
     "@mui/styled-engine-sc": "^6.0.0-alpha.18",
     "@mui/x-charts": "^7.16.0",
     "@mui/x-date-pickers": "^7.17.0",

services/response.js

@@ -1,21 +1,29 @@
 import api from "./api";
-import Cookies from "universal-cookie";
 
 export const request = {
-  auth: (grant_type, client_id, client_secret, username, password) =>
+  sendCode: (mobile_number) =>
+    api.post(
+      "api/v1/user/auth",
+      { mobile_number },
+      {
+        headers: {
+          Authorization: "",
+        },
+      }
+    ),
+  getToken: (grant_type, client_id, client_secret, mobile_number, code) =>
     api.post(
       "oauth/token",
       {
         grant_type,
         client_id,
         client_secret,
-        username,
-        password,
+        mobile_number,
+        code,
       },
       {
         headers: {
           Authorization: "",
-          "Content-Type": "application/x-www-form-urlencoded",
         },
       }
     ),