change design and data list in doctor-item & handle component appointment in doctor-item & handle functionality date-picker & fix bug appointment page & add req get appointment list

app/appointment/[slug]/page.js

@@ -0,0 +1,21 @@
+import AppointmentPage from "@/components/appointment";
+import { getStateInfo } from "@/lib/getStateInfo";
+import axios from "axios";
+
+async function Appointment({ params: { slug } }) {
+  const { matchedCity } = getStateInfo();
+
+  let apt = null;
+  try {
+    const response = await axios.get(
+      "https://back-dev.clinic-pro.ir/api/v1/appointment-slots"
+    );
+    apt = response.data.data;
+  } catch (error) {
+    // console.error("problem with req:", error.message);
+  }
+
+  return <AppointmentPage slug={slug} matchedCity={matchedCity} />;
+}
+
+export default Appointment;

app/booking/[slug]/page.js

@@ -1,10 +0,0 @@
-import BookingPage from "@/components/booking";
-import { getStateInfo } from "@/lib/getStateInfo";
-
-function Booking({ params: { slug } }) {
-  const { matchedCity } = getStateInfo();
-
-  return <BookingPage slug={slug} matchedCity={matchedCity} />;
-}
-
-export default Booking;

app/component/LoadingComponent.js

@@ -0,0 +1,18 @@
+import { CircularProgress } from "@mui/material";
+import React from "react";
+
+function LoadingComponent({ children, loading }) {
+  return (
+    <div className="relative">
+      {loading ? (
+        <div className="absolute min-h-[80px] mt-[160px] w-full h-full flex items-center justify-center">
+          <CircularProgress />
+        </div>
+      ) : (
+        children
+      )}
+    </div>
+  );
+}
+
+export default LoadingComponent;

app/component/date/datePicker/LoadingDate.js

@@ -0,0 +1,16 @@
+import { Skeleton } from "@mui/material";
+import React from "react";
+
+function LoadingDate({ loading }) {
+  if (loading) {
+    return (
+      <Skeleton
+        variant="rectangular"
+        className="!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10"
+        height={352}
+      />
+    );
+  }
+}
+
+export default LoadingDate;

app/component/date/datePicker/NextIconDatePicker.js

@@ -1,22 +0,0 @@
-import { Button } from "@mui/material";
-import Image from "next/image";
-
-function NextIconDatePicker({ nextIconDatePicker }) {
-  return (
-    <Button
-      className="!min-w-0 !p-0 !rounded-full"
-      ref={nextIconDatePicker}
-      onClick={(e) => e.preventDefault()}
-    >
-      <Image
-        src="/assets/icons/arrow-right.svg"
-        className="icon-left-datepicker"
-        alt="arrow"
-        height={24}
-        width={24}
-      />
-    </Button>
-  );
-}
-
-export default NextIconDatePicker;

app/component/date/datePicker/PrevIconDatePicker.js

@@ -1,22 +0,0 @@
-import { Button } from "@mui/material";
-import Image from "next/image";
-
-function PrevIconDatePicker({ prevIconDatePicker }) {
-  return (
-    <Button
-      className="!min-w-0 !p-0 !rounded-full !rotate-180"
-      ref={prevIconDatePicker}
-      onClick={(e) => e.preventDefault()}
-    >
-      <Image
-        src="/assets/icons/arrow-right.svg"
-        className="icon-left-datepicker"
-        alt="arrow"
-        height={24}
-        width={24}
-      />
-    </Button>
-  );
-}
-
-export default PrevIconDatePicker;

app/component/date/datePicker/date/FirstDatePicker.js

@@ -0,0 +1,41 @@
+import React from "react";
+import { DatePicker } from "jalaali-react-date-picker";
+import { nextIconData, prevIconData } from "./dataIcon";
+import LoadingDate from "../LoadingDate";
+import Image from "next/image";
+
+function FirstDatePicker({
+  startDate,
+  loading,
+  handleDisableDate,
+  nextIconDatePickerF,
+  prevIconDatePickerF,
+  prevIconDatePickerS,
+  handleStartDateChange,
+}) {
+  return (
+    <div className="w-full first md:w-1/2 lg:w-full xl:w-1/2 relative flex justify-center">
+      <DatePicker
+        value={startDate}
+        className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
+        timePicker={false}
+        nextIcon={
+          <Image {...nextIconData} ref={nextIconDatePickerF} id="nextIconF" />
+        }
+        prevIcon={
+          <Image
+            {...prevIconData}
+            ref={prevIconDatePickerF}
+            onClick={() => prevIconDatePickerS.current.click()}
+          />
+        }
+        isFirst={true}
+        onChange={handleStartDateChange}
+        disabledDates={(e) => handleDisableDate(e)}
+      />
+      <LoadingDate loading={loading} />
+    </div>
+  );
+}
+
+export default FirstDatePicker;

app/component/date/datePicker/date/SecondDatePicker.js

@@ -0,0 +1,42 @@
+import React from "react";
+import { DatePicker } from "jalaali-react-date-picker";
+import { nextIconData, prevIconData } from "./dataIcon";
+import LoadingDate from "../LoadingDate";
+import Image from "next/image";
+
+function SecondDatePicker({
+  endDate,
+  loading,
+  handleDisableDate,
+  nextIconDatePickerF,
+  nextIconDatePickerS,
+  prevIconDatePickerS,
+  handleEndDateChange,
+}) {
+  return (
+    <div className="w-1/2 second hidden md:flex lg:hidden xl:flex">
+      <div className="w-full relative flex justify-center">
+        <DatePicker
+          value={endDate}
+          timePicker={false}
+          className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
+          nextIcon={
+            <Image
+              {...nextIconData}
+              ref={nextIconDatePickerS}
+              onClick={() => !loading && nextIconDatePickerF.current.click()}
+            />
+          }
+          prevIcon={
+            <Image {...prevIconData} ref={prevIconDatePickerS} id="prevIconS" />
+          }
+          onChange={handleEndDateChange}
+          disabledDates={(e) => handleDisableDate(e)}
+        />
+        <LoadingDate loading={loading} />
+      </div>
+    </div>
+  );
+}
+
+export default SecondDatePicker;

app/component/date/datePicker/date/dataIcon.js

@@ -0,0 +1,16 @@
+export const fixedIconData = {
+  src: "/assets/icons/arrow-right.svg",
+  alt: "arrow",
+  height: 24,
+  width: 24,
+};
+
+export const nextIconData = {
+  ...fixedIconData,
+  className: "icon-left-datepicker cursor-pointer",
+};
+
+export const prevIconData = {
+  ...fixedIconData,
+  className: "icon-left-datepicker cursor-pointer rotate-180",
+};

app/component/date/datePicker/index.js

@@ -1,20 +1,20 @@
 "use client";
 
 import { useEffect, useRef, useState } from "react";
-import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
+import FirstDatePicker from "./date/FirstDatePicker";
-import { Skeleton } from "@mui/material";
+import SecondDatePicker from "./date/SecondDatePicker";
-import NextIconDatePicker from "./NextIconDatePicker";
-import PrevIconDatePicker from "./PrevIconDatePicker";
 
 function DatePicker({ date, updateDate }) {
-  const nextIconDatePicker = useRef();
+  const nextIconDatePickerF = useRef();
-  const prevIconDatePicker = useRef();
+  const prevIconDatePickerF = useRef();
+  const nextIconDatePickerS = useRef();
+  const prevIconDatePickerS = useRef();
 
   const [startDate, setStartDate] = useState(null);
   const [endDate, setEndDate] = useState();
   const [loading, setLoading] = useState(true);
 
-  const handleStartDateChange = (date) => {
+  const handleStartDateChange = (date, e) => {
     if (date) {
       setStartDate(date);
       setEndDate(null);
@@ -34,64 +34,34 @@ function DatePicker({ date, updateDate }) {
   };
 
   useEffect(() => {
-    if (nextIconDatePicker.current) {
+    if (nextIconDatePickerS.current) {
-      nextIconDatePicker.current.click();
+      nextIconDatePickerS.current.click();
+      console.log(nextIconDatePickerS.current);
+
       setLoading(false);
     }
-  }, [nextIconDatePicker]);
+  }, [nextIconDatePickerS]);
 
   return (
-    <div className="flex items-start custom-datepicker justify-evenly w-full">
+    <div className="datePickerApt flex items-start custom-datepicker justify-evenly w-full">
-      <div className="w-full md:w-1/2 lg:w-full xl:w-1/2 relative flex justify-center">
+      <FirstDatePicker
-        <DatePickerJalali
+        loading={loading}
-          value={startDate}
+        startDate={startDate}
-          className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
+        handleDisableDate={handleDisableDate}
-          timePicker={false}
+        nextIconDatePickerF={nextIconDatePickerF}
-          nextIcon={
+        prevIconDatePickerF={prevIconDatePickerF}
-            <div className="flex md:hidden lg:flex xl:hidden">
+        prevIconDatePickerS={prevIconDatePickerS}
-              <NextIconDatePicker nextIconDatePicker={nextIconDatePicker} />
+        handleStartDateChange={handleStartDateChange}
-            </div>
-          }
-          prevIcon={
-            <PrevIconDatePicker prevIconDatePicker={prevIconDatePicker} />
-          }
-          onChange={handleStartDateChange}
-          disabledDates={(e) => handleDisableDate(e)}
       />
-        {loading && (
+      <SecondDatePicker
-          <Skeleton
+        loading={loading}
-            variant="rectangular"
+        endDate={endDate}
-            className="!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10"
+        handleDisableDate={handleDisableDate}
-            height={352}
+        nextIconDatePickerF={nextIconDatePickerF}
+        nextIconDatePickerS={nextIconDatePickerS}
+        prevIconDatePickerS={prevIconDatePickerS}
+        handleEndDateChange={handleEndDateChange}
       />
-        )}
-      </div>
-      <div className="w-1/2 hidden md:flex lg:hidden xl:flex">
-        <div className="w-full relative flex justify-center">
-          <DatePickerJalali
-            value={endDate}
-            timePicker={false}
-            className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
-            nextIcon={
-              <NextIconDatePicker nextIconDatePicker={nextIconDatePicker} />
-            }
-            prevIcon={
-              <div className="flex md:hidden lg:flex xl:hidden">
-                <PrevIconDatePicker prevIconDatePicker={prevIconDatePicker} />
-              </div>
-            }
-            onChange={handleEndDateChange}
-            disabledDates={(e) => handleDisableDate(e)}
-          />
-          {loading && (
-            <Skeleton
-              variant="rectangular"
-              className="!w-[300px] !rounded-[6px] !absolute !top-0 !right-1/2 !translate-x-1/2 !z-10"
-              height={352}
-            />
-          )}
-        </div>
-      </div>
     </div>
   );
 }

app/component/date/dateTime/Hours.js

@@ -3,7 +3,9 @@ import { Button } from "@mui/material";
 function Hours({ doctor, hour, setHour, value, nameHours }) {
   return (
     <ul className="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-[16px] gap-y-[12px] sm:gap-y-[16px] md:gap-y-[20px] lg:gap-y-[24px] mt-[24px] mb-[40px]">
-      {doctor[nameHours[value]].map((item, idx) => (
+      {doctor &&
+        nameHours &&
+        doctor[nameHours[value]]?.map((item, idx) => (
           <li key={idx}>
             <Button
               onClick={() => setHour(idx)}

app/dashboard/page.js

@@ -2,9 +2,8 @@ import Content from "@/components/dashboard/Content";
 import { defineAbilitiesFor } from "@/lib/ability";
 import { getUser } from "@/lib/auth";
 import { getStateInfo } from "@/lib/getStateInfo";
-import { fetchReq } from "@/lib/req";
 import { removeToken } from "@/utils";
-import { cookies, headers } from "next/headers";
+import { cookies } from "next/headers";
 import { redirect } from "next/navigation";
 
 export default async function Dashboard({ searchParams }) {

app/doctor/[slug]/page.js

@@ -3,14 +3,26 @@ import Layout from "@/components/layout/StLayout";
 import axios from "axios";
 
 async function Doctor({ params: { slug } }) {
-  const response = await axios.get(
+  let doctors = null;
+  let doctor = null;
+  try {
+    const resDoctors = await axios.get(
+      "https://back-dev.clinic-pro.ir/api/v1/doctors?active=1"
+    );
+    const resDoctor = await axios.get(
       `https://back-dev.clinic-pro.ir/api/v1/doctor/${slug}`
     );
-  const doctor = response.data;
+
+    doctor = resDoctor.data;
+    doctors = resDoctors.data.data;
+  } catch (error) {
+    // console.error("problem with req:", error.message);
+    // return redirect("/unauthorized");
+  }
 
   return (
     <Layout>
-      <DoctorPage doctor={doctor} />
+      <DoctorPage doctor={doctor} doctors={doctors} />
     </Layout>
   );
 }

app/doctors/page.js

@@ -11,10 +11,9 @@ async function Doctors({ searchParams }) {
     const response = await axios.get(
       "https://back-dev.clinic-pro.ir/api/v1/doctors"
     );
-    doctors = response.data.$data;
+    doctors = response.data.data;
   } catch (error) {
     // console.error("problem with req:", error.message);
-    // return redirect("/unauthorized");
   }
 
   return (

app/globals.css

@@ -885,3 +885,56 @@ html {
 .spin {
   animation: spin 1s linear infinite;
 }
+
+/* date picker appointment */
+
+.datePickerApt
+  .first
+  .panel-header-wrapper
+  .center:first-child
+  .iconItem:first-child,
+.datePickerApt
+  .first
+  .panel-header-wrapper
+  .center:last-child
+  .iconItem:last-child,
+.datePickerApt
+  .second
+  .panel-header-wrapper
+  .center:first-child
+  .iconItem:first-child,
+.datePickerApt
+  .second
+  .panel-header-wrapper
+  .center:last-child
+  .iconItem:last-child {
+  display: none;
+}
+
+.datePickerApt #nextIconF,
+.datePickerApt #prevIconS {
+  display: flex;
+}
+
+@media (min-width: 768px) {
+  .datePickerApt #nextIconF,
+  .datePickerApt #prevIconS {
+    display: none;
+  }
+}
+
+@media (min-width: 1024px) {
+  .datePickerApt #nextIconF,
+  .datePickerApt #prevIconS {
+    display: flex;
+  }
+}
+
+@media (min-width: 1280px) {
+  .datePickerApt #nextIconF,
+  .datePickerApt #prevIconS {
+    display: none;
+  }
+}
+
+/* end of date picker appointment */

components/appointment/date/Time/SelectDatePicker.js

@@ -0,0 +1,20 @@
+import DatePicker from "@/app/component/date/datePicker";
+import { request } from "@/services/response";
+import { useEffect } from "react";
+
+function SelectDatePicker() {
+  useEffect(() => {
+    request
+      .getAppointment(47, 1753859133)
+      .then((res) => {
+        console.log(res);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  });
+
+  return <DatePicker />;
+}
+
+export default SelectDatePicker;

components/appointment/date/index.js

@@ -19,11 +19,11 @@ function Date({ doctor, setStep }) {
           isError={isError}
         />
         <Time
-          isStep={doctor.multiwork ? locateVisit : true}
+          isStep={doctor?.multiwork ? locateVisit : true}
           locateVisit={locateVisit}
         />
         <Hour
-          isStep={doctor.multiwork ? locateVisit : true}
+          isStep={doctor?.multiwork ? locateVisit : true}
           setLocateVisit={setLocateVisit}
           locateVisit={locateVisit}
           setIsError={setIsError}

components/appointment/index.js

@@ -5,16 +5,16 @@ import { useState } from "react";
 import Content from "./Content";
 import Layout from "@/components/layout";
 import doctors from "@/data/doctors.json";
-import Date from "@/components/booking/date";
+import Date from "@/components/appointment/date";
 import RegisterPage from "@/components/register";
-import Paying from "@/components/booking/paying";
+import Paying from "@/components/appointment/paying";
-import Detail from "@/components/booking/detail";
+import Detail from "@/components/appointment/detail";
-import FailedPay from "@/components/booking/failedPay";
+import FailedPay from "@/components/appointment/failedPay";
 import LogInPage from "@/components/register/LogInPage";
-import SuccessPay from "@/components/booking/successPay";
+import SuccessPay from "@/components/appointment/successPay";
 import VerificationPage from "@/components/register/verificationPage";
 
-function BookingPage({ slug, matchedCity }) {
+function AppointmentPage({ slug, matchedCity }) {
   const doctor = doctors.find((item) => item.id === +slug);
 
   const [step, setStep] = useState(0);
@@ -69,4 +69,4 @@ function BookingPage({ slug, matchedCity }) {
   );
 }
 
-export default BookingPage;
+export default AppointmentPage;

components/appointment/location/Address.js

@@ -1,7 +1,7 @@
 function Address({ doctor }) {
   return (
     <ul className="hidden mt-[4px] lg:flex flex-col">
-      {doctor.address.map((item, idx) => (
+      {doctor?.address?.map((item, idx) => (
         <li key={idx}>
           <div className="flex py-[12px] text-[#616161] text-[14px] items-start justify-start">
             <p className="font-bold min-w-[115px]">{`${item.name}: `}</p>

components/appointment/location/Head.js

@@ -8,17 +8,17 @@ function Head({ doctor }) {
                     w-[48px] sm:w-[51px] md:w-[54px] lg:w-[56px]
                     h-[48px] sm:h-[51px] md:h-[54px] lg:h-[56px]
                 "
-        src={doctor.img}
+        src={doctor?.img}
         alt="profile"
         height={56}
         width={56}
       />
       <div className="flex flex-col items-start justify-start gap-[8px]">
         <h2 className="text-[#3B3B3B] text-[12px] md:text-[14px] font-bold">
-          {doctor.name}
+          {doctor?.name}
         </h2>
         <h3 className="text-[#525252] text-[12px] md:text-[14px] font-medium">
-          تخصص: {doctor.expertise}
+          تخصص: {doctor?.expertise}
         </h3>
       </div>
     </div>

components/booking/date/Time/SelectDatePicker.js

@@ -1,7 +0,0 @@
-import DatePicker from "@/app/component/date/datePicker";
-
-function SelectDatePicker() {
-  return <DatePicker />;
-}
-
-export default SelectDatePicker;

components/dashboard/userAccount/detailUser/index.js

@@ -13,6 +13,7 @@ import FamilyHistory from "./familyHistory";
 import Relatives from "./relatives";
 import { removeAdditionalKeysDashboard } from "@/helper";
 import Cookies from "js-cookie";
+import LoadingComponent from "@/app/component/LoadingComponent";
 
 function DetailUser({ user, isTurnsDetails, setIsTurnsDetails }) {
   const [tab, setTab] = useState(0);

components/dashboard/userAccount/detailUser/information/ButtonSendData.js

@@ -1,6 +1,6 @@
 import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
 import {
-  convertJalaliTimestamp,
+  changeDateType,
   handleTimeExpiresToken,
   removeAdditionalKeysDashboard,
 } from "@/helper";
@@ -24,25 +24,9 @@ function ButtonSendData({
     setLoading(false);
   };
 
-  const changeDateType = (data) => {
-    const newData = data;
-    const splitedDate = newData.birthday.split("/");
-    newData.birthday = convertJalaliTimestamp(
-      {
-        jy: Number(splitedDate[0]),
-        jm: Number(splitedDate[1]),
-        jd: Number(splitedDate[2]),
-      },
-      true
-    );
-    return newData;
-  };
-
   const postData = () => {
-    console.log(changeDateType(information));
-
     request
-      .postUserProfile(information)
+      .postUserProfile(changeDateType(information, false))
       .then((response) => {
         if (response.uuid) {
           const formData = new URLSearchParams();
@@ -84,11 +68,10 @@ function ButtonSendData({
 
   const patchData = () => {
     const usedKays = removeAdditionalKeysDashboard(information);
-    console.log(changeDateType(information));
 
     request
       .patchUserProfile(
-        usedKays,
+        changeDateType(usedKays, true),
         information?.uuid,
         Cookies.get("access_token")
       )

components/dashboard/userAccount/detailUser/information/form/Content.js

@@ -1,8 +1,10 @@
-function Content({ isConfirmed, children, title, error }) {
+function Content({ isConfirmed, children, title, error, req }) {
   return (
     <div className="flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[3px] md:gap-[7px] lg:gap-[9px]">
       <div className="flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]">
-        <p className="text-[#525252] text-[14px] font-medium">{title}</p>
+        <p className="text-[#525252] text-[14px] font-medium">
+          {title} {req && "*"}
+        </p>
         {isConfirmed && (
           <p
             className="py-[4px] md:py-[2px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF] 

components/dashboard/userAccount/detailUser/information/form/index.js

@@ -20,8 +20,6 @@ function Form({ insurance, errors, changeData, information }) {
     list.find((g) => g.id === information[name]);
   const parsedUserInfo = getParsedUserInfo();
 
-  console.log(information);
-
   return (
     <div className="grid grid-cols-1 lg:grid-cols-2 gap-x-[24px] gap-y-[10px]">
       <Content title="شماره موبایل" isConfirmed={true}>
@@ -35,8 +33,14 @@ function Form({ insurance, errors, changeData, information }) {
           data={parsedUserInfo?.username}
         />
       </Content>
-      <Content error={errors?.national_code} title="کد ملی" isConfirmed={false}>
+      <Content
+        req={true}
+        error={errors?.national_code}
+        title="کد ملی"
+        isConfirmed={false}
+      >
         <Field
+          req={true}
           error={errors?.national_code}
           type="number"
           iconGray={true}
@@ -47,7 +51,7 @@ function Form({ insurance, errors, changeData, information }) {
           disable={information?.prev_data}
         />
       </Content>
-      <Content error={errors?.name} title="نام" isConfirmed={false}>
+      <Content req={true} error={errors?.name} title="نام" isConfirmed={false}>
         <Field
           error={errors?.name}
           isTransparent={true}
@@ -57,7 +61,12 @@ function Form({ insurance, errors, changeData, information }) {
           name="name"
         />
       </Content>
-      <Content error={errors?.family} title="نام خانوادگی" isConfirmed={false}>
+      <Content
+        req={true}
+        error={errors?.family}
+        title="نام خانوادگی"
+        isConfirmed={false}
+      >
         <Field
           error={errors?.family}
           isTransparent={true}
@@ -67,7 +76,7 @@ function Form({ insurance, errors, changeData, information }) {
           name="family"
         />
       </Content>
-      <Content error={errors?.gender} title="جنسیت">
+      <Content req={true} error={errors?.gender} title="جنسیت">
         <AutoSelector
           error={errors?.gender}
           updateData={(name, data) =>
@@ -79,7 +88,7 @@ function Form({ insurance, errors, changeData, information }) {
           list={gender}
         />
       </Content>
-      <Content error={errors?.birthday} title="تاریخ تولد">
+      <Content req={true} error={errors?.birthday} title="تاریخ تولد">
         <DateBirthday
           error={errors?.birthday}
           data={information?.birthday}
@@ -87,7 +96,12 @@ function Form({ insurance, errors, changeData, information }) {
           changeData={changeData}
         />
       </Content>
-      <Content error={errors?.fathers_name} title="نام پدر" isConfirmed={false}>
+      <Content
+        req={true}
+        error={errors?.fathers_name}
+        title="نام پدر"
+        isConfirmed={false}
+      >
         <Field
           error={errors?.fathers_name}
           isTransparent={true}
@@ -97,7 +111,7 @@ function Form({ insurance, errors, changeData, information }) {
           name="fathers_name"
         />
       </Content>
-      <Content error={errors?.basic_insurance} title="نوع بیمه">
+      <Content req={true} error={errors?.basic_insurance} title="نوع بیمه">
         <AutoSelector
           error={errors?.basic_insurance}
           updateData={(name, val) => {
@@ -121,6 +135,7 @@ function Form({ insurance, errors, changeData, information }) {
         isConfirmed={false}
       >
         <Field
+          req={true}
           error={errors?.insurance_id}
           isTransparent={true}
           iconGray={true}
@@ -130,7 +145,7 @@ function Form({ insurance, errors, changeData, information }) {
           name="insurance_id"
         />
       </Content>
-      <Content error={errors?.blood_type} title="گروه خونی">
+      <Content req={true} error={errors?.blood_type} title="گروه خونی">
         <AutoSelector
           error={errors?.blood_type}
           updateData={(name, value) =>
@@ -142,7 +157,7 @@ function Form({ insurance, errors, changeData, information }) {
           list={blood_group}
         />
       </Content>
-      <Content error={errors?.marital_status} title="وضعیت تاهل">
+      <Content req={true} error={errors?.marital_status} title="وضعیت تاهل">
         <AutoSelector
           error={errors?.marital_status}
           updateData={(name, value) =>
@@ -164,7 +179,7 @@ function Form({ insurance, errors, changeData, information }) {
           name="home_phone"
         />
       </Content>
-      <Content error={errors?.education} title="تحصیلات">
+      <Content req={true} error={errors?.education} title="تحصیلات">
         <AutoSelector
           error={errors?.education}
           updateData={(name, value) =>
@@ -176,7 +191,7 @@ function Form({ insurance, errors, changeData, information }) {
           list={education}
         />
       </Content>
-      <Content error={errors?.job} title="شغل">
+      <Content req={true} error={errors?.job} title="شغل">
         <AutoSelector
           error={errors?.job}
           updateData={(name, value) =>

components/dashboard/userAccount/detailUser/information/index.js

@@ -2,13 +2,15 @@ import { useEffect, useState } from "react";
 import Form from "./form";
 import { request } from "@/services/response";
 import ButtonSendData from "./ButtonSendData";
-import { getParsedUserInfo } from "@/helper";
+import { changeDateType, getParsedUserInfo } from "@/helper";
 import { disease } from "./form/disease";
+import LoadingComponent from "@/app/component/LoadingComponent";
 
 function Information({ information, setInformation }) {
   const [loading, setLoading] = useState(false);
   const [insurance, setInsurance] = useState();
   const [errors, setErrors] = useState({});
+  const [loadingInfo, setLoadingInfo] = useState(true);
 
   useEffect(() => {
     const parsedUserInfo = getParsedUserInfo();
@@ -23,12 +25,17 @@ function Information({ information, setInformation }) {
       request
         .getUserProfile(parsedUserInfo.uuid)
         .then((res) => {
-          const changedData = res;
+          setLoadingInfo(false);
+          let changedData = res;
+
           changedData.basic_insurance = [Number(res?.basic_insurance?.id)];
           changedData.prev_data = true;
+          changedData = changeDateType(changedData, false);
+
           setInformation(changedData);
         })
         .catch((err) => {
+          setLoadingInfo(false);
           if (err?.response?.data === "Entity not found") {
             setInformation({
               prev_data: false,
@@ -43,6 +50,8 @@ function Information({ information, setInformation }) {
             });
           }
         });
+    } else {
+      setLoadingInfo(false);
     }
   }, []);
 
@@ -60,6 +69,7 @@ function Information({ information, setInformation }) {
   };
 
   return (
+    <LoadingComponent loading={loadingInfo}>
       <div className="opacity-page">
         <Form
           errors={errors}
@@ -76,6 +86,7 @@ function Information({ information, setInformation }) {
           errors={errors}
         />
       </div>
+    </LoadingComponent>
   );
 }
 

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

@@ -9,7 +9,6 @@ function Relatives({ data, changeData, loading, updateData }) {
   const tableHead = ["ردیف", "نام", "نسبت", "شماره تماس", "آدرس", ""];
   const centerTable = [0];
   const [open, setOpen] = useState(false);
-  console.log(relatives);
 
   return (
     <div className="opacity-page">

components/dashboard/userAccount/detailUser/relatives/modal/index.js

@@ -24,7 +24,6 @@ function ModalAddRelatives({ open, setOpen, changeData, loading, updateData }) {
     setNewItem(contentItem);
     handleClose();
   };
-  console.log(newItem);
 
   return (
     <>

components/doctor/appointmentList/ItemAppointment.js

@@ -7,7 +7,7 @@ import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
-function ItemAppointment({ turn, doctor, loading }) {
+function ItemAppointment({ turn, loading }) {
   return (
     <li
       key={turn.id}
@@ -17,17 +17,19 @@ function ItemAppointment({ turn, doctor, loading }) {
       <span className="block w-full h-px bg-[#EFEFEF] my-4"></span>
       <div className="flex items-center justify-start gap-3">
         <CircularLoading width={56} height={56} loading={loading}>
-          <Image src={doctor?.img} width={56} height={56} alt="doctor" />
+          <Image src={turn?.img || ""} width={56} height={56} alt="doctor" />
         </CircularLoading>
         <div className="flex flex-col items-start justify-center gap-2">
           <TextLoading width={60} height={15} loading={loading}>
-            <p className="text-[#3B3B3B] text-[14px] font-bold">
+            <p className="text-[#3B3B3B] text-[14px] font-bold">{turn?.name}</p>
-              {doctor?.name}
-            </p>
           </TextLoading>
           <TextLoading width={65} height={15} loading={loading}>
             <p className="text-[#525252] text-[14px] font-medium">
-              تخصص: {doctor?.expertise}
+              تخصص:
+              {turn?.expertise?.map(
+                (item, idx) =>
+                  `${item.name} ${turn.expertise.length === idx + 1 ? "" : "|"} `
+              )}
             </p>
           </TextLoading>
         </div>
@@ -41,7 +43,7 @@ function ItemAppointment({ turn, doctor, loading }) {
             </p>
           </TextLoading>
         </div>
-        <Link href={loading ? "#" : `/booking/${turn.id}`}>
+        <Link href={loading ? "#" : `/appointment/${turn.id}`}>
           <Button
             variant="contained"
             className="!py-2 !px-3 xl:!px-6 gap-1"

components/doctor/appointmentList/index.js

@@ -1,24 +1,16 @@
 "use client";
 
-import turns from "@/data/turns.json";
 import { Button } from "@mui/material";
 import ItemAppointment from "./ItemAppointment";
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
 import Link from "next/link";
 
-function AppointmentList({ doctor, loading }) {
+function AppointmentList({ doctors, loading }) {
-  const itemActive = turns[0];
-
   return (
     <>
       <ul className="hidden sticky top-[122px] sm:top-[150px] mt:top-[178px] lg:top-[206px] lg:flex w-[38%] flex-col justify-start items-center gap-8">
-        {[turns[0]].map((item) => (
+        {doctors?.map((item) => (
-          <ItemAppointment
+          <ItemAppointment turn={item} key={item.id} loading={loading} />
-            turn={item}
-            key={item.id}
-            doctor={doctor}
-            loading={loading}
-          />
         ))}
       </ul>
       <div
@@ -26,9 +18,9 @@ function AppointmentList({ doctor, loading }) {
             border-solid bottom-0 right-0 w-full p-4 flex items-center justify-between"
       >
         <p className="text-[#05BA58] text-[11px] font-normal">
-          اولین نوبت آزاد: {itemActive.first_free_turn}
+          اولین نوبت آزاد: {doctors[0]?.free_turn}
         </p>
-        <Link href={`/booking/${itemActive.id}`}>
+        <Link href={`/appointment/${doctors[0]?.id}`}>
           <Button
             variant="contained"
             className="!py-2 !px-4 gap-1 !text-[14px] !font-medium"

components/doctor/detailDoctor/Share.js

@@ -56,7 +56,7 @@ function Share({ data }) {
           <p className="text-[#525252] text-[11px] md:text-[12px] lg:text-[14px] font-normal">
             شما می توانید این پزشک را با دیگران به اشتراک بگذارید:
           </p>
-          <List data={data} hiddenRef={hiddenRef} />
+          <List hiddenRef={hiddenRef} />
         </Box>
       </Modal>
     </div>

components/doctor/detailDoctor/Title.js

@@ -15,7 +15,7 @@ function Title({ doctor }) {
                     w-[40px] sm:w-[81px] md:w-[123px] lg:w-[164px]
                     h-[40px] sm:h-[81px] md:h-[123px] lg:h-[164px]
                 "
-          src={doctor?.img}
+          src={doctor?.img[0]?.url}
           alt="img-doctor"
           height={164}
           width={164}
@@ -24,12 +24,16 @@ function Title({ doctor }) {
       <div className="flex flex-col items-center lg:items-start gap-[8px] lg:gap-[16px]">
         <TextLoading width={90} height={20}>
           <h1 className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
-            {doctor?.title}
+            {doctor?.name}
           </h1>
         </TextLoading>
         <TextLoading width={100} height={20}>
           <h3 className="text-[#525252] text-[14px] md:text-[16px] font-medium">
-            تخصص: {doctor?.expertise}
+            تخصص:
+            {doctor?.expertise?.map(
+              (item, idx) =>
+                `${item.name} ${doctor.expertise.length === idx + 1 ? "" : "|"} `
+            )}
           </h3>
         </TextLoading>
         <div className="flex items-center justify-start gap-11">

components/doctor/detailDoctor/cards/AboutDcotor.js

@@ -49,7 +49,7 @@ function AboutDcotor({ doctor }) {
               <span className="w-2 h-2 bg-[#F17732] rounded-full"></span>
               <TextLoading width={70} height={18}>
                 <h4 className="text-[#616161] text-[16px] font-normal text-nowrap">
-                  {item}
+                  {item.name}
                 </h4>
               </TextLoading>
             </li>

components/doctor/detailDoctor/cards/comments/modal/ModalAnswer.js

@@ -59,7 +59,7 @@ function ModalAnswer({ doctor }) {
               multiline={true}
               title="نظر خود را بنویسید..."
             />
-            <Link href={`/booking/${doctor?.id}`} className="!mr-auto">
+            <Link href={`/appointment/${doctor?.id}`} className="!mr-auto">
               <Button
                 variant="contained"
                 className="!py-2.5 !px-4 gap-1 !text-[14px] !font-medium !mt-[32px] !shadownon"

components/doctor/index.js

@@ -4,16 +4,19 @@ import Share from "./detailDoctor/Share";
 import CustomLoading from "@/app/component/loading/Custom";
 import Poster from "./poster";
 
-function DoctorPage({ doctor }) {
+function DoctorPage({ doctor, doctors }) {
   return (
     <div className="pt-[92px] sm:pt-[120px] mt:pt-[148px] lg:pt-[176px] mt-[px] padding-responsive">
       <div className="flex items-center justify-between">
         <CustomLoading width={180} height={25}>
           <div className="flex items-center justify-start text-[14px] md:text-[16px] font-normal">
             <h2 className="text-[#9B9B9B] text-nowrap">
-              متخصص {doctor?.expertise} {" >"}
+              {doctor?.expertise?.map(
+                (item, idx) =>
+                  `${item.name} ${doctor.expertise.length === idx + 1 ? ">" : "|"} `
+              )}
             </h2>
-            <p className="text-[#525252] text-nowrap mr-1">{doctor?.title}</p>
+            <p className="text-[#525252] text-nowrap mr-1">{doctor?.name}</p>
           </div>
         </CustomLoading>
         <div className="flex lg:hidden">
@@ -22,7 +25,7 @@ function DoctorPage({ doctor }) {
       </div>
       <div className="flex items-start justify-center gap-6 mt-[30px]">
         <DetailDoctor doctor={doctor} />
-        <AppointmentList doctor={doctor} />
+        <AppointmentList doctors={doctors} />
       </div>
     </div>
   );

components/doctor/poster/Services.js

@@ -12,7 +12,7 @@ function Services({ data }) {
         {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>
+            <p className="text-[16px] font-normal text-[#E7EEF6]">{item.name}</p>
           </li>
         ))}
       </ul>

components/doctor/poster/index.js

@@ -18,7 +18,11 @@ function Poster({ data }) {
           {data?.name}
         </p>
         <p className="text-[24px] mt-[20px] text-[#E7EEF6] font-bold">
-          تخصص: {data?.expertise}
+          تخصص:
+          {data?.expertise?.map(
+            (item, idx) =>
+              `${item.name} ${data.expertise.length === idx + 1 ? "" : "|"} `
+          )}
         </p>
         <Services data={data} />
         <Address data={data} />

components/layoutPanel/userDetail/Date.js

@@ -1,11 +1,8 @@
 "use client";
 
 import { DatePicker } from "jalaali-react-date-picker";
-import moment from "moment-jalaali";
 
 function Date() {
-  const todayJalaali = moment().format("jYYYY/jMM/jDD");
-
   return (
     <div className="flex justify-center sm-datepicker active-today jalali-dashboard">
       <DatePicker

helper/index.js

@@ -1,7 +1,7 @@
-import moment from "jalali-moment";
 import { toast } from "react-toastify";
 import specialties from "@/data/specialties.json";
 import Cookies from "js-cookie";
+import moment from "moment-jalaali";
 
 export const numberToArStyle = (num) => num?.toLocaleString("ar-AE") || "";
 
@@ -225,194 +225,15 @@ export const removeAdditionalKeysDashboard = (information) => {
   return usedKays;
 };
 
-// handle TimeStamp
+export const changeDateType = (data, toTimeStamp) => {
+  const newData = { ...data };
+  const birthday = newData.birthday;
 
-function div(a, b) {
+  if (toTimeStamp) {
-  return Math.floor(a / b);
+    const m = moment(birthday, "jYYYY/jMM/jDD");
-}
+    newData.birthday = m.unix();
-
-function isLeapGregorian(year) {
-  return (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
-}
-
-function dayOfYearToGregorian(year, dayOfYear) {
-  const monthDays = [
-    31,
-    isLeapGregorian(year) ? 29 : 28,
-    31,
-    30,
-    31,
-    30,
-    31,
-    31,
-    30,
-    31,
-    30,
-    31,
-  ];
-  let month = 1;
-  while (dayOfYear > monthDays[month - 1]) {
-    dayOfYear -= monthDays[month - 1];
-    month++;
-  }
-  return { month, day: dayOfYear };
-}
-
-function jalaliToGregorian(jy, jm, jd) {
-  jy = parseInt(jy);
-  jm = parseInt(jm);
-  jd = parseInt(jd);
-
-  const breaks = [
-    -61, 9, 38, 199, 426, 686, 756, 818, 1111, 1181, 1210, 1635, 2060, 2097,
-    2192, 2262, 2324, 2394, 2456, 3178,
-  ];
-
-  let gy = jy + 621;
-  let leapJ = -14;
-  let jp = breaks[0];
-  let jump, i;
-
-  for (i = 1; i < breaks.length; i++) {
-    jump = breaks[i] - jp;
-    if (jy < breaks[i]) break;
-    leapJ += div(jump, 33) * 8 + div(jump % 33, 4);
-    jp = breaks[i];
-  }
-
-  let nYear = jy - jp;
-  leapJ += div(nYear, 33) * 8 + div((nYear % 33) + 3, 4);
-  if (jump % 33 === 4 && jump - nYear === 4) leapJ += 1;
-
-  let leapG = div(gy, 4) - div((div(gy, 100) + 1) * 3, 4) - 150;
-  let march = 20 + leapJ - leapG;
-
-  let gregorianYear = gy;
-  let gregorianMonth, gregorianDay;
-
-  let jalaliDayOfYear = jm <= 7 ? (jm - 1) * 31 + jd : (jm - 7) * 30 + 186 + jd;
-
-  if (jalaliDayOfYear <= march) {
-    gregorianYear -= 1;
-    const daysInPrevYear = isLeapGregorian(gregorianYear) ? 366 : 365;
-    const dayOfYear = daysInPrevYear - (march - jalaliDayOfYear);
-    const gDate = dayOfYearToGregorian(gregorianYear, dayOfYear);
-    gregorianMonth = gDate.month;
-    gregorianDay = gDate.day;
   } else {
-    const dayOfYear = jalaliDayOfYear - march;
+    newData.birthday = moment.unix(birthday).format("jYYYY/jMM/jDD");
-    const gDate = dayOfYearToGregorian(gregorianYear, dayOfYear);
-    gregorianMonth = gDate.month;
-    gregorianDay = gDate.day;
   }
-
+  return newData;
-  return { gy: gregorianYear, gm: gregorianMonth, gd: gregorianDay };
+};
-}
-
-function gregorianToJalali(gy, gm, gd) {
-  gy = parseInt(gy);
-  gm = parseInt(gm);
-  gd = parseInt(gd);
-
-  const breaks = [
-    -61, 9, 38, 199, 426, 686, 756, 818, 1111, 1181, 1210, 1635, 2060, 2097,
-    2192, 2262, 2324, 2394, 2456, 3178,
-  ];
-
-  let jy = 0;
-  let leapJ = -14;
-  let jp = breaks[0];
-  let jump, i;
-
-  for (i = 1; i < breaks.length; i++) {
-    jump = breaks[i] - jp;
-    if (gy < breaks[i]) break;
-    leapJ += div(jump, 33) * 8 + div(jump % 33, 4);
-    jp = breaks[i];
-  }
-
-  let nYear = gy - jp;
-  leapJ += div(nYear, 33) * 8 + div((nYear % 33) + 3, 4);
-  if (jump % 33 === 4 && jump - nYear === 4) leapJ += 1;
-
-  let leapG = div(gy, 4) - div((div(gy, 100) + 1) * 3, 4) - 150;
-  let march = 20 + leapJ - leapG;
-
-  let gregorianDayOfYear = dayOfYear(gy, gm, gd);
-  let jalaliDayOfYear, jyNew;
-
-  if (gregorianDayOfYear > march) {
-    jalaliDayOfYear = gregorianDayOfYear - march;
-    jyNew = gy - 621;
-  } else {
-    let daysInPrevYear = isLeapGregorian(gy - 1) ? 366 : 365;
-    jalaliDayOfYear = gregorianDayOfYear + daysInPrevYear - march;
-    jyNew = gy - 622;
-  }
-
-  let jmNew, jdNew;
-  if (jalaliDayOfYear <= 186) {
-    jmNew = Math.ceil(jalaliDayOfYear / 31);
-    jdNew = jalaliDayOfYear % 31;
-    if (jdNew === 0) jdNew = 31;
-  } else {
-    jalaliDayOfYear -= 186;
-    jmNew = Math.ceil(jalaliDayOfYear / 30) + 6;
-    jdNew = jalaliDayOfYear % 30;
-    if (jdNew === 0) jdNew = 30;
-  }
-
-  return { jy: jyNew, jm: jmNew, jd: jdNew };
-}
-
-function dayOfYear(year, month, day) {
-  const monthDays = [
-    31,
-    isLeapGregorian(year) ? 29 : 28,
-    31,
-    30,
-    31,
-    30,
-    31,
-    31,
-    30,
-    31,
-    30,
-    31,
-  ];
-  let doy = 0;
-  for (let i = 1; i < month; i++) {
-    doy += monthDays[i - 1];
-  }
-  doy += day;
-  return doy;
-}
-
-export function convertJalaliTimestamp(input, convertToTimestamp) {
-  if (convertToTimestamp) {
-    // input = { jy, jm, jd, hour?, minute?, second? }
-    const { jy, jm, jd, hour = 0, minute = 0, second = 0 } = input;
-    const { gy, gm, gd } = jalaliToGregorian(jy, jm, jd);
-    const date = new Date(gy, gm - 1, gd, hour, minute, second);
-    return Math.floor(date.getTime() / 1000);
-  } else {
-    const date = new Date(input * 1000);
-    const gy = date.getFullYear();
-    const gm = date.getMonth() + 1;
-    const gd = date.getDate();
-    const hour = date.getHours();
-    const minute = date.getMinutes();
-    const second = date.getSeconds();
-    const { jy, jm, jd } = gregorianToJalali(gy, gm, gd);
-    return { jy, jm, jd, hour, minute, second };
-  }
-}
-
-const timestamp = convertJalaliTimestamp(
-  { jy: 1404, jm: 4, jd: 3, hour: 22, minute: 36, second: 10 },
-  true
-);
-console.log(timestamp);
-
-const jalaliDate = convertJalaliTimestamp(1750791970, false);
-console.log(jalaliDate);

package-lock.json

@@ -32,6 +32,7 @@
         "jalali-moment": "^3.3.11",
         "js-cookie": "^3.0.5",
         "jspdf": "^3.0.1",
+        "moment-jalaali": "^0.10.4",
         "next": "^14.2.20",
         "next-themes": "^0.3.0",
         "npm": "^10.8.2",
@@ -12813,6 +12814,18 @@
         "deep-equal": "^2.0.5"
       }
     },
+    "node_modules/jalaali-react-date-picker/node_modules/moment-jalaali": {
+      "version": "0.9.6",
+      "resolved": "https://registry.npmjs.org/moment-jalaali/-/moment-jalaali-0.9.6.tgz",
+      "integrity": "sha512-v8wXjQplvk5ez+sUqgsWIrafwIf1BEXXvzTYwsg1wHcqh27nSgKPCJ6FnZRrCz03MoNyB9N31L0oms+vE8Rq7g==",
+      "license": "MIT",
+      "dependencies": {
+        "jalaali-js": "^1.1.0",
+        "moment": "^2.22.2",
+        "moment-timezone": "^0.5.21",
+        "rimraf": "^3.0.2"
+      }
+    },
     "node_modules/jalali-moment": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/jalali-moment/-/jalali-moment-3.3.11.tgz",
@@ -14593,15 +14606,14 @@
       }
     },
     "node_modules/moment-jalaali": {
-      "version": "0.9.6",
+      "version": "0.10.4",
-      "resolved": "https://registry.npmjs.org/moment-jalaali/-/moment-jalaali-0.9.6.tgz",
+      "resolved": "https://registry.npmjs.org/moment-jalaali/-/moment-jalaali-0.10.4.tgz",
-      "integrity": "sha512-v8wXjQplvk5ez+sUqgsWIrafwIf1BEXXvzTYwsg1wHcqh27nSgKPCJ6FnZRrCz03MoNyB9N31L0oms+vE8Rq7g==",
+      "integrity": "sha512-/eD0HeyvATznb5iE0G1BHjKRZAFEpJ9ZNUkcHwXhNgt1WJJVVzHD7+uDmqzZWVFLdbGme2gvIXKb3ezDYOXcZA==",
       "license": "MIT",
       "dependencies": {
-        "jalaali-js": "^1.1.0",
+        "jalaali-js": "^1.2.7",
-        "moment": "^2.22.2",
+        "moment": "^2.29.4",
-        "moment-timezone": "^0.5.21",
+        "moment-timezone": "^0.5.46"
-        "rimraf": "^3.0.2"
       }
     },
     "node_modules/moment-timezone": {

package.json

@@ -33,6 +33,7 @@
     "jalali-moment": "^3.3.11",
     "js-cookie": "^3.0.5",
     "jspdf": "^3.0.1",
+    "moment-jalaali": "^0.10.4",
     "next": "^14.2.20",
     "next-themes": "^0.3.0",
     "npm": "^10.8.2",

services/response.js

@@ -60,4 +60,7 @@ export const request = {
     api.patch(`api/v1/appointment-settings/weekly-schedule/${uuid}`),
   deleteAppointmentWeeklySchedule: (uuid) =>
     api.delete(`api/v1/appointment-settings/weekly-schedule/${uuid}`),
+  getAppointment: (doctor_id, date) =>
+    api.get(`api/v1/appointment?doctor_id=${doctor_id}&date=${date}`),
+  postAppointment: (data) => api.post(`api/v1/appointment`, data),
 };