hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Ehsan
2025-07-09 03:05:48 +03:30
parent f951128074
commit c6e2657e45
57 changed files with 442 additions and 445 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/appointment/[slug]/page.js
+21
View File
@@ -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
-10
View File
@@ -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
+18
View File
@@ -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
+16
View File
@@ -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
-22
View File
@@ -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
-22
View File
@@ -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
+41
View File
@@ -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
+42
View File
@@ -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
+16
View File
@@ -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
+31 -61
View File
@@ -1,20 +1,20 @@
"use client";
import { useEffect, useRef, useState } from "react";
import { DatePicker as DatePickerJalali } from "jalaali-react-date-picker";
import { Skeleton } from "@mui/material";
import NextIconDatePicker from "./NextIconDatePicker";
import PrevIconDatePicker from "./PrevIconDatePicker";
import FirstDatePicker from "./date/FirstDatePicker";
import SecondDatePicker from "./date/SecondDatePicker";
function DatePicker({ date, updateDate }) {
const nextIconDatePicker = useRef();
const prevIconDatePicker = useRef();
const nextIconDatePickerF = 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) {
nextIconDatePicker.current.click();
if (nextIconDatePickerS.current) {
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="w-full md:w-1/2 lg:w-full xl:w-1/2 relative flex justify-center">
<DatePickerJalali
value={startDate}
className={`w-full ${loading ? "opacity-0" : "opacity-100"}`}
timePicker={false}
nextIcon={
<div className="flex md:hidden lg:flex xl:hidden">
<NextIconDatePicker nextIconDatePicker={nextIconDatePicker} />
</div>
}
prevIcon={
<PrevIconDatePicker prevIconDatePicker={prevIconDatePicker} />
}
onChange={handleStartDateChange}
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 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 className="datePickerApt flex items-start custom-datepicker justify-evenly w-full">
<FirstDatePicker
loading={loading}
startDate={startDate}
handleDisableDate={handleDisableDate}
nextIconDatePickerF={nextIconDatePickerF}
prevIconDatePickerF={prevIconDatePickerF}
prevIconDatePickerS={prevIconDatePickerS}
handleStartDateChange={handleStartDateChange}
/>
<SecondDatePicker
loading={loading}
endDate={endDate}
handleDisableDate={handleDisableDate}
nextIconDatePickerF={nextIconDatePickerF}
nextIconDatePickerS={nextIconDatePickerS}
prevIconDatePickerS={prevIconDatePickerS}
handleEndDateChange={handleEndDateChange}
/>
</div>
);
}
app/component/date/dateTime/Hours.js
+17 -15
View File
@@ -3,28 +3,30 @@ 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) => (
<li key={idx}>
<Button
onClick={() => setHour(idx)}
disabled={!item.active}
className={`
{doctor &&
nameHours &&
doctor[nameHours[value]]?.map((item, idx) => (
<li key={idx}>
<Button
onClick={() => setHour(idx)}
disabled={!item.active}
className={`
!w-full !rounded-[8px] !bg-[#EFEFEF] !flex !justify-center !items-center !py-[10px] !px-[14px] !h-[40px] md:!h-[42px] lg:!h-[44px]
${idx === hour ? "!bg-[#F79463] " : ""}
`}
>
<p
className={`
>
<p
className={`
text-[16px] font-semibold text-[#525252]
${item.active ? "text-[#525252]" : "text-[#D7D7D7]"}
${idx === hour ? "!text-[#FAFAFA] " : ""}
`}
>
{item.hour}
</p>
</Button>
</li>
))}
>
{item.hour}
</p>
</Button>
</li>
))}
</ul>
);
}
app/dashboard/page.js
+1 -2
View File
@@ -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
+17 -5
View File
@@ -3,14 +3,26 @@ import Layout from "@/components/layout/StLayout";
import axios from "axios";
async function Doctor({ params: { slug } }) {
const response = await axios.get(
`https://back-dev.clinic-pro.ir/api/v1/doctor/${slug}`
);
const doctor = response.data;
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}`
);
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
+1 -2
View File
@@ -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
+53
View File
@@ -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/booking/Content.js → components/appointment/Content.js
View File
components/booking/date/PlaceVisit.js → components/appointment/date/PlaceVisit.js
View File
components/appointment/date/Time/SelectDatePicker.js
+20
View File
@@ -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/booking/date/Time/index.js → components/appointment/date/Time/index.js
View File
components/booking/date/hour/index.js → components/appointment/date/hour/index.js
View File
components/booking/date/index.js → components/appointment/date/index.js
+2 -2
View File
@@ -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/booking/detail/Content.js → components/appointment/detail/Content.js
View File
components/booking/detail/Form.js → components/appointment/detail/Form.js
View File
components/booking/detail/index.js → components/appointment/detail/index.js
View File
components/booking/failedPay/index.js → components/appointment/failedPay/index.js
View File
components/booking/index.js → components/appointment/index.js
+7 -7
View File
@@ -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 Detail from "@/components/booking/detail";
import FailedPay from "@/components/booking/failedPay";
import Paying from "@/components/appointment/paying";
import Detail from "@/components/appointment/detail";
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/booking/information/Detail.js → components/appointment/information/Detail.js
View File
components/booking/information/Head.js → components/appointment/information/Head.js
View File
components/booking/information/index.js → components/appointment/information/index.js
View File
components/booking/location/Address.js → components/appointment/location/Address.js
+1 -1
View File
@@ -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/booking/location/Head.js → components/appointment/location/Head.js
+3 -3
View File
@@ -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/location/index.js → components/appointment/location/index.js
View File
components/booking/paying/ButtonFixed.js → components/appointment/paying/ButtonFixed.js
View File
components/booking/paying/index.js → components/appointment/paying/index.js
View File
components/booking/successPay/index.js → components/appointment/successPay/index.js
View File
components/booking/date/Time/SelectDatePicker.js
-7
View File
@@ -1,7 +0,0 @@
import DatePicker from "@/app/component/date/datePicker";
function SelectDatePicker() {
return <DatePicker />;
}
export default SelectDatePicker;
components/dashboard/userAccount/detailUser/index.js
+1
View File
@@ -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
+3 -20
View File
@@ -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
+4 -2
View File
@@ -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
+28 -13
View File
@@ -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
+29 -18
View File
@@ -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,22 +69,24 @@ function Information({ information, setInformation }) {
};
return (
<div className="opacity-page">
<Form
errors={errors}
insurance={insurance}
changeData={changeData}
information={information}
/>
<ButtonSendData
setInformation={setInformation}
information={information}
setLoading={setLoading}
setErrors={setErrors}
loading={loading}
errors={errors}
/>
</div>
<LoadingComponent loading={loadingInfo}>
<div className="opacity-page">
<Form
errors={errors}
insurance={insurance}
changeData={changeData}
information={information}
/>
<ButtonSendData
setInformation={setInformation}
information={information}
setLoading={setLoading}
setErrors={setErrors}
loading={loading}
errors={errors}
/>
</div>
</LoadingComponent>
);
}
components/dashboard/userAccount/detailUser/relatives/index.js
-1
View File
@@ -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
-1
View File
@@ -24,7 +24,6 @@ function ModalAddRelatives({ open, setOpen, changeData, loading, updateData }) {
setNewItem(contentItem);
handleClose();
};
console.log(newItem);
return (
<>
components/doctor/appointmentList/ItemAppointment.js
+9 -7
View File
@@ -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">
{doctor?.name}
</p>
<p className="text-[#3B3B3B] text-[14px] font-bold">{turn?.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
+5 -13
View File
@@ -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 }) {
const itemActive = turns[0];
function AppointmentList({ doctors, loading }) {
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) => (
<ItemAppointment
turn={item}
key={item.id}
doctor={doctor}
loading={loading}
/>
{doctors?.map((item) => (
<ItemAppointment turn={item} key={item.id} 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
+1 -1
View File
@@ -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
+7 -3
View File
@@ -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
+1 -1
View File
@@ -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
+1 -1
View File
@@ -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
+7 -4
View File
@@ -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
+1 -1
View File
@@ -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
+5 -1
View File
@@ -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
-3
View File
@@ -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
+10 -189
View File
@@ -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) {
return Math.floor(a / b);
}
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;
if (toTimeStamp) {
const m = moment(birthday, "jYYYY/jMM/jDD");
newData.birthday = m.unix();
} else {
const dayOfYear = jalaliDayOfYear - march;
const gDate = dayOfYearToGregorian(gregorianYear, dayOfYear);
gregorianMonth = gDate.month;
gregorianDay = gDate.day;
newData.birthday = moment.unix(birthday).format("jYYYY/jMM/jDD");
}
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);
return newData;
};
package-lock.json
Generated
+19 -7
View File
@@ -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",
"resolved": "https://registry.npmjs.org/moment-jalaali/-/moment-jalaali-0.9.6.tgz",
"integrity": "sha512-v8wXjQplvk5ez+sUqgsWIrafwIf1BEXXvzTYwsg1wHcqh27nSgKPCJ6FnZRrCz03MoNyB9N31L0oms+vE8Rq7g==",
"version": "0.10.4",
"resolved": "https://registry.npmjs.org/moment-jalaali/-/moment-jalaali-0.10.4.tgz",
"integrity": "sha512-/eD0HeyvATznb5iE0G1BHjKRZAFEpJ9ZNUkcHwXhNgt1WJJVVzHD7+uDmqzZWVFLdbGme2gvIXKb3ezDYOXcZA==",
"license": "MIT",
"dependencies": {
"jalaali-js": "^1.1.0",
"moment": "^2.22.2",
"moment-timezone": "^0.5.21",
"rimraf": "^3.0.2"
"jalaali-js": "^1.2.7",
"moment": "^2.29.4",
"moment-timezone": "^0.5.46"
}
},
"node_modules/moment-timezone": {
package.json
+1
View File
@@ -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
+3
View File
@@ -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),
};