handle api register & change design dashboard tabs and page disease

app/component/element/Field.js

@@ -37,6 +37,7 @@ function Field({
         },
         "& .MuiInputBase-input": {
           padding: spaceNull ? "12.5px 0" : "12.5px 14px",
+          color: spaceNull && "#0009",
         },
         "& .MuiInputBase-root": { borderRadius: "6px !important" },
         "& .MuiOutlinedInput-notchedOutline": {

app/panel/(layout)/dashboard/page.js

@@ -1,5 +1,3 @@
-"use client";
-
 import DashboardPage from "@/components/panel/dashboard";
 import Information from "@/data/information.json";
 

components/dashboard/userAccount/ContentTabs.js

@@ -1,131 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-
-// Tabs
-import Turns from "./tabs/turns";
-import DetailUser from "./tabs/detailUser";
-import Comments from "./tabs/comments";
-import Messages from "./tabs/messages";
-import Tabs from "@/app/component/Tabs";
-import Transactions from "./tabs/transactions";
-import IsTurnsDetails from "./tabs/turns/isTurnsDetails";
-import ArrowRightD from "@/components/icons/ArrowRightD";
-import { Button } from "@mui/material";
-import NotfoundDashboard from "./NotfoundDashboard";
-import DownloadD from "@/components/icons/DownloadD";
-
-const listTab = [
-  "حساب کاربری",
-  "نوبت های من",
-  "تراکنش های من",
-  "نظرات من",
-  "پیام ها",
-];
-
-function ContentTabs({
-  user,
-  value,
-  isTurnsDetails,
-  setIsTurnsDetails,
-  setValue,
-  isOpenSide,
-  setIsOpenSide,
-}) {
-  const [loading, setLoading] = useState(true);
-  const handleChange = (event, newValue) => setValue(newValue);
-
-  useEffect(() => {
-    setTimeout(() => {
-      setLoading(false);
-    }, 2000);
-  }, []);
-
-  const components = [
-    <DetailUser user={user} />,
-    <Turns
-      user={user}
-      loading={loading}
-      setIsTurnsDetails={setIsTurnsDetails}
-    />,
-    <Transactions user={user} loading={loading} />,
-    <Comments user={user} loading={loading} />,
-    <Messages user={user} loading={loading} />,
-    <NotfoundDashboard />,
-  ];
-
-  return (
-    <div
-      className="md:mt-[12px] lg:mt-[24px] md:pt-[12px] pb-[24px] w-full rounded-[8px] 
-            shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
-            bg-transparent md:bg-[#FFF]"
-    >
-      <div className="w-full flex items-center justify-between">
-        <Button
-          className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
-          onClick={() =>
-            isTurnsDetails ? setIsTurnsDetails(false) : setIsOpenSide(true)
-          }
-          variant="text"
-        >
-          <ArrowRightD />
-          <p className="text-[#525252] text-[14px] font-bold">
-            {isTurnsDetails ? "جزئیات نوبت " : listTab[value]}
-          </p>
-        </Button>
-        {value === 1 && isTurnsDetails ? (
-          <Button
-            className="!flex md:!hidden !py-[8px] !px-[12px] !text-[#616161] !text-[14px] !font-medium !justify-center !items-center !gap-[4px]"
-            variant="text"
-          >
-            <DownloadD />
-            دانلود اطلاعات نوبت
-          </Button>
-        ) : undefined}
-      </div>
-      {isTurnsDetails ? (
-        <IsTurnsDetails
-          loading={loading}
-          user={user}
-          setIsTurnsDetails={setIsTurnsDetails}
-        />
-      ) : (
-        <>
-          <div className="!hidden md:!flex !w-full">
-            <Tabs
-              style={{
-                ".MuiTabs-indicator": {
-                  height: "2px",
-                  borderRadius: "16px",
-                  background: "#5559CE",
-                },
-                "& .MuiTabs-scroller": {
-                  borderBottom: "1px solid #EFEFEF",
-                },
-                "& .MuiTabs-flexContainer": {
-                  paddingRight: "15px",
-                  paddingLeft: "15px",
-                },
-                "& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
-                  color: "#5559CE !important",
-                },
-                "& .MuiButtonBase-root.Mui-selected": {
-                  color: "#5559CE !important",
-                },
-              }}
-              value={value}
-              color="#5559CE"
-              listTab={listTab}
-              handleChange={handleChange}
-            />
-          </div>
-          <div className="mt-[24px] sm:mt-[28px] md:mt-[32px] px-0 md:px-[24px]">
-            {components[value]}
-          </div>
-        </>
-      )}
-    </div>
-  );
-}
-
-export default ContentTabs;

components/dashboard/userAccount/UserAccount.js

@@ -1,4 +1,4 @@
-import ContentTabs from "./ContentTabs";
+import ContentTabs from "./content";
 import Head from "./Head";
 import NotfoundDashboard from "./NotfoundDashboard";
 

components/dashboard/userAccount/content/HeadTab.js

@@ -0,0 +1,62 @@
+import Tabs from "@/app/component/Tabs";
+import IsTurnsDetails from "../sidebars/turns/isTurnsDetails";
+
+function HeadTab({
+  tab,
+  user,
+  listTab,
+  loading,
+  handleChange,
+  isTurnsDetails,
+  setIsTurnsDetails,
+  components,
+}) {
+
+  return (
+    <>
+      {isTurnsDetails ? (
+        <IsTurnsDetails
+          loading={loading}
+          user={user}
+          setIsTurnsDetails={setIsTurnsDetails}
+        />
+      ) : (
+        <>
+          <div className="!hidden md:!flex !w-full">
+            <Tabs
+              style={{
+                ".MuiTabs-indicator": {
+                  height: "2px",
+                  borderRadius: "16px",
+                  background: "#5559CE",
+                },
+                "& .MuiTabs-scroller": {
+                  borderBottom: "1px solid #EFEFEF",
+                },
+                "& .MuiTabs-flexContainer": {
+                  paddingRight: "15px",
+                  paddingLeft: "15px",
+                },
+                "& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
+                  color: "#5559CE !important",
+                },
+                "& .MuiButtonBase-root.Mui-selected": {
+                  color: "#5559CE !important",
+                },
+              }}
+              value={tab}
+              color="#5559CE"
+              listTab={listTab}
+              handleChange={handleChange}
+            />
+          </div>
+          <div className="mt-[24px] sm:mt-[28px] md:mt-[32px] px-0 md:px-[24px]">
+            {components[tab]}
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+
+export default HeadTab;

components/dashboard/userAccount/content/index.js

@@ -0,0 +1,111 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+import ArrowRightD from "@/components/icons/ArrowRightD";
+import { Button } from "@mui/material";
+import DownloadD from "@/components/icons/DownloadD";
+import Disease from "../tabs/disease";
+import Allergies from "../tabs/allergies";
+import Medications from "../tabs/medications";
+import Surgeries from "../tabs/surgeries";
+import FamilyHistory from "../tabs/familyHistory";
+import Relatives from "../tabs/relatives";
+import HeadTab from "./HeadTab";
+
+import profileData from "@/data/profile_other.json";
+
+const listTab = [
+  "بیماری‌ها",
+  "آلرژی‌ها",
+  "داروهای مصرفی",
+  "جراحی‌ها",
+  "سابقه خانوادگی بیماری",
+  "بستگان",
+];
+
+function ContentTabs({
+  user,
+  value,
+  isTurnsDetails,
+  setIsTurnsDetails,
+  setValue,
+  setIsOpenSide,
+}) {
+  const [loading, setLoading] = useState(true);
+  const [tab, setTab] = useState(0);
+
+  const handleChange = (event, newValue) => {
+    // setValue(newValue);
+    setTab(newValue);
+  };
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  }, []);
+
+  const components = [
+    // <DetailUser user={user} />,
+    // <Turns
+    //   user={user}
+    //   loading={loading}
+    //   setIsTurnsDetails={setIsTurnsDetails}
+    // />,
+    // <Transactions user={user} loading={loading} />,
+    // <Comments user={user} loading={loading} />,
+    // <Messages user={user} loading={loading} />,
+    // <NotfoundDashboard />,
+    <Disease data={profileData} />,
+    <Allergies />,
+    <Medications />,
+    <Surgeries />,
+    <FamilyHistory />,
+    <Relatives />,
+  ];
+
+  return (
+    <div
+      className="md:mt-[12px] lg:mt-[24px] md:pt-[12px] pb-[24px] w-full rounded-[8px] 
+      shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
+      bg-transparent md:bg-[#FFF]"
+    >
+      <div className="w-full flex items-center justify-between">
+        <Button
+          className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
+          onClick={() =>
+            isTurnsDetails ? setIsTurnsDetails(false) : setIsOpenSide(true)
+          }
+          variant="text"
+        >
+          <ArrowRightD />
+          <p className="text-[#525252] text-[14px] font-bold">
+            {isTurnsDetails ? "جزئیات نوبت " : listTab[value]}
+          </p>
+        </Button>
+        {value === 1 && isTurnsDetails ? (
+          <Button
+            className="!flex md:!hidden !py-[8px] !px-[12px] !text-[#616161] !text-[14px] !font-medium !justify-center !items-center !gap-[4px]"
+            variant="text"
+          >
+            <DownloadD />
+            دانلود اطلاعات نوبت
+          </Button>
+        ) : undefined}
+      </div>
+      <HeadTab
+        tab={tab}
+        user={user}
+        listTab={listTab}
+        loading={loading}
+        components={components}
+        handleChange={handleChange}
+        isTurnsDetails={isTurnsDetails}
+        setIsTurnsDetails={setIsTurnsDetails}
+      />
+    </div>
+  );
+}
+
+export default ContentTabs;

components/dashboard/userAccount/tabs/allergies/index.js

@@ -0,0 +1,7 @@
+function Allergies() {
+  return (
+    <div>Allergies</div>
+  )
+}
+
+export default Allergies

components/dashboard/userAccount/tabs/disease/index.js

@@ -0,0 +1,53 @@
+import CustomTable from "@/app/component/CustomTable";
+import CircularLoading from "@/app/component/loading/Circular";
+import TextLoading from "@/app/component/loading/Text";
+import { TableCell, TableRow } from "@mui/material";
+
+function Disease({ data }) {
+  const tableHead = ["شماره", "اسم", "وضعیت"];
+  const centerTable = [0, 4];
+
+  return (
+    <div className="hidden md:flex">
+      <CustomTable
+        zeroRadius={true}
+        tableHead={tableHead}
+        centerTable={centerTable}
+      >
+        {data.map((row, idx) => (
+          <TableRow
+            key={idx}
+            className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
+          >
+            <TableCell
+              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+              align="center"
+            >
+              <TextLoading width={15} height={18} loading={false}>
+                {idx + 1}
+              </TextLoading>
+            </TableCell>
+            <TableCell
+              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+              align="center"
+            >
+              <TextLoading width={15} height={18} loading={false}>
+                {row.name}
+              </TextLoading>
+            </TableCell>
+            <TableCell
+              className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
+              align="center"
+            >
+              <TextLoading width={15} height={18} loading={false}>
+                {row.status}
+              </TextLoading>
+            </TableCell>
+          </TableRow>
+        ))}
+      </CustomTable>
+    </div>
+  );
+}
+
+export default Disease;

components/dashboard/userAccount/tabs/familyHistory/index.js

@@ -0,0 +1,7 @@
+function FamilyHistory() {
+  return (
+    <div>FamilyHistory</div>
+  )
+}
+
+export default FamilyHistory

components/dashboard/userAccount/tabs/medications/index.js

@@ -0,0 +1,7 @@
+function Medications() {
+  return (
+    <div>Medications</div>
+  )
+}
+
+export default Medications

components/dashboard/userAccount/tabs/relatives/index.js

@@ -0,0 +1,7 @@
+function Relatives() {
+  return (
+    <div>Relatives</div>
+  )
+}
+
+export default Relatives

components/dashboard/userAccount/tabs/surgeries/index.js

@@ -0,0 +1,7 @@
+function Surgeries() {
+  return (
+    <div>Surgeries</div>
+  )
+}
+
+export default Surgeries

components/panel/dashboard/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 import { useEffect, useState } from "react";
 
 import Activities from "@/components/layoutPanel/userDetail/Activities";

components/register/LogInPage.js

@@ -1,5 +1,9 @@
 import Field from "@/app/component/element/Field";
-import { changeNumToDefault, formatPhoneNumber, validatePhoneNumber } from "@/helper";
+import {
+  changeNumToDefault,
+  formatPhoneNumber,
+  validatePhoneNumber,
+} from "@/helper";
 import { request } from "@/services/response";
 import { InputAdornment, Button } from "@mui/material";
 import Link from "next/link";
@@ -13,7 +17,11 @@ function LogInPage({ setIsSendMsg, num, setNum, matchedCity }) {
     const formatted = formatPhoneNumber(val);
     const checkedNum = validatePhoneNumber(formatted);
     setError(checkedNum);
+    const digits = formatted.replace(/\D/g, "");
     setNum(formatted);
+    if (digits.length === 9) {
+      handleReq();
+    }
   };
   const handleReq = () => {
     setLoading(true);
@@ -21,7 +29,10 @@ function LogInPage({ setIsSendMsg, num, setNum, matchedCity }) {
       .sendCode(changeNumToDefault(num))
       .then((response) => {
         setLoading(false);
-        if (response) setIsSendMsg(true);
+        if (response) {
+          setNum("");
+          setIsSendMsg(true);
+        }
       })
       .catch(() => {
         setLoading(false);

components/register/SetCodePage.js

@@ -1,6 +1,5 @@
 import { useRef, useState } from "react";
 
-import Link from "next/link";
 import { Button } from "@mui/material";
 import OTPForm from "./element/OTPForm";
 import EditLogin from "../icons/EditLogin";
@@ -15,6 +14,7 @@ function SetCodePage({ setIsSendMsg, link, num, setStep }) {
   const retryIcon = useRef();
 
   const [timer, setTimer] = useState(0);
+  const [loading, setLoading] = useState(false);
   const [code, setCode] = useState(["", "", "", ""]);
   const [isError, setIsError] = useState(false);
   const inputRefs = Array.from({ length: 5 }, () => useRef());
@@ -36,6 +36,9 @@ function SetCodePage({ setIsSendMsg, link, num, setStep }) {
     if (newCode.join("").length === 4 && isError) {
       setIsError(false);
     }
+    if (newCode.join("").length === 4) {
+      handleReq();
+    }
 
     setCode(newCode);
 
@@ -59,6 +62,7 @@ function SetCodePage({ setIsSendMsg, link, num, setStep }) {
   };
 
   const handleReq = () => {
+    setLoading(true);
     request
       .getToken(
         "mobile",
@@ -68,10 +72,10 @@ function SetCodePage({ setIsSendMsg, link, num, setStep }) {
         code.join("")
       )
       .then((response) => {
-        console.log(response);
+        setLoading(false);
       })
       .catch((err) => {
-        console.log(err);
+        setLoading(false);
       });
   };
 
@@ -142,9 +146,7 @@ function SetCodePage({ setIsSendMsg, link, num, setStep }) {
             onClick={() => {
               if (!timer && timer !== "loading") {
                 handleTimer();
-
                 retryIcon.current.classList.add("retry-icon");
-
                 setTimeout(() => {
                   retryIcon.current &&
                     retryIcon.current.classList.remove("retry-icon");
@@ -171,6 +173,7 @@ function SetCodePage({ setIsSendMsg, link, num, setStep }) {
       </div>
       <Button
         fullWidth
+        loading={loading}
         variant="contained"
         onClick={() => {
           setIsSendMsg && setIsSendMsg(true);

data/profile_other.json

@@ -0,0 +1,226 @@
+[
+  {
+    "disease": [
+      {
+        "id": 1,
+        "name": "فشار خون",
+        "status": "false"
+      },
+      {
+        "id": 2,
+        "name": "دیابت",
+        "status": "false"
+      },
+      {
+        "id": 3,
+        "name": "آسم",
+        "status": "false"
+      },
+      {
+        "id": 4,
+        "name": "بیماری قلبی عروقی",
+        "status": "false"
+      },
+      {
+        "id": 5,
+        "name": "سرطان",
+        "status": "false"
+      },
+      {
+        "id": 6,
+        "name": "آلزایمر",
+        "status": "false"
+      },
+      {
+        "id": 7,
+        "name": "پارکینسون",
+        "status": "false"
+      },
+      {
+        "id": 8,
+        "name": "بیماری کلیوی",
+        "status": "false"
+      },
+      {
+        "id": 9,
+        "name": "بیماری کبدی",
+        "status": "false"
+      },
+      {
+        "id": 10,
+        "name": "سکته مغزی",
+        "status": "false"
+      },
+      {
+        "id": 11,
+        "name": "افسردگی",
+        "status": "false"
+      },
+      {
+        "id": 12,
+        "name": "اضطراب مزمن",
+        "status": "false"
+      },
+      {
+        "id": 13,
+        "name": "میگرن",
+        "status": "false"
+      },
+      {
+        "id": 14,
+        "name": "کم‌کاری تیروئید",
+        "status": "false"
+      },
+      {
+        "id": 15,
+        "name": "پرکاری تیروئید",
+        "status": "false"
+      },
+      {
+        "id": 16,
+        "name": "سل",
+        "status": "false"
+      },
+      {
+        "id": 17,
+        "name": "هپاتیت B",
+        "status": "false"
+      },
+      {
+        "id": 18,
+        "name": "هپاتیت C",
+        "status": "false"
+      },
+      {
+        "id": 19,
+        "name": "HIV / ایدز",
+        "status": "false"
+      },
+      {
+        "id": 20,
+        "name": "COVID-19",
+        "status": "false"
+      },
+      {
+        "id": 21,
+        "name": "لوپوس",
+        "status": "false"
+      },
+      {
+        "id": 22,
+        "name": "ام‌اس (MS)",
+        "status": "false"
+      },
+      {
+        "id": 23,
+        "name": "آرتریت روماتوئید",
+        "status": "false"
+      },
+      {
+        "id": 24,
+        "name": "پسوریازیس",
+        "status": "false"
+      },
+      {
+        "id": 25,
+        "name": "صرع",
+        "status": "false"
+      },
+      {
+        "id": 26,
+        "name": "بیماری سلیاک",
+        "status": "false"
+      },
+      {
+        "id": 27,
+        "name": "عدم تحمل لاکتوز",
+        "status": "false"
+      },
+      {
+        "id": 28,
+        "name": "چربی خون بالا",
+        "status": "false"
+      },
+      {
+        "id": 29,
+        "name": "کم‌خونی",
+        "status": "false"
+      },
+      {
+        "id": 30,
+        "name": "هموفیلی",
+        "status": "false"
+      }
+    ],
+    "allergies": [
+      {
+        "substance": "پنی‌سیلین",
+        "reaction": "کهیر",
+        "severity": "شدید"
+      },
+      {
+        "substance": "گرده گیاهان",
+        "reaction": "عطسه و آبریزش بینی",
+        "severity": "خفیف"
+      }
+    ],
+    "medications": [
+      {
+        "name": "لورازپام",
+        "dose": "1mg",
+        "frequency": "شب‌ها قبل خواب"
+      },
+      {
+        "name": "آتنولول",
+        "dose": "50mg",
+        "frequency": "صبح‌ها"
+      }
+    ],
+    "surgeries": [
+      {
+        "type": "آپاندکتومی",
+        "year": 2015,
+        "hospital": "بیمارستان امام خمینی"
+      },
+      {
+        "type": "عمل قلب باز",
+        "year": 2022,
+        "hospital": "بیمارستان شهید رجایی"
+      }
+    ],
+    "family_history": [
+      {
+        "relation": "پدر",
+        "disease": "فشار خون"
+      },
+      {
+        "relation": "مادر",
+        "disease": "دیابت نوع 2"
+      },
+      {
+        "relation": "خواهر",
+        "disease": "آسم"
+      }
+    ],
+    "relatives": [
+      {
+        "name": "علی",
+        "relation": "پسر عمو",
+        "contact": {
+          "phone": "+989121234567",
+          "email": "father@example.com",
+          "address": "تهران، خیابان انقلاب، پلاک 12"
+        }
+      },
+      {
+        "name": "سارا",
+        "relation": "خواهر",
+        "contact": {
+          "phone": "+989121234567",
+          "email": "father@example.com",
+          "address": "تهران، خیابان انقلاب، پلاک 12"
+        }
+      }
+    ]
+  }
+]

package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "cross-env HOST=localhost PORT=5170 next dev",
+    "dev": "cross-env HOST=yazd-nobat.localhost PORT=3000 next dev",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

services/response.js

@@ -11,20 +11,19 @@ export const request = {
         },
       }
     ),
-  getToken: (grant_type, client_id, client_secret, mobile_number, code) =>
+  getToken: (grant_type, client_id, client_secret, mobile_number, code) => {
-    api.post(
+    const formData = new URLSearchParams();
-      "oauth/token",
+    formData.append("grant_type", grant_type);
-      {
+    formData.append("client_id", client_id);
-        grant_type,
+    formData.append("client_secret", client_secret);
-        client_id,
+    formData.append("mobile_number", mobile_number);
-        client_secret,
+    formData.append("code", code);
-        mobile_number,
+
-        code,
+    return api.post("oauth/token", formData, {
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+        Authorization: "",
       },
-      {
+    });
-        headers: {
+  },
-          Authorization: "",
-        },
-      }
-    ),
 };