add prettier formatter to all file
This commit is contained in:
Ehsan
@@ -1,4 +1,4 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
@@ -15,92 +15,117 @@ import { Button } from "@mui/material";
|
||||
import NotfoundDashboard from "./NotfoundDashboard";
|
||||
import DownloadD from "@/components/icons/DownloadD";
|
||||
|
||||
const listTab = ['حساب کاربری', 'نوبت های من', 'تراکنش های من', 'نظرات من', 'پیام ها'];
|
||||
const listTab = [
|
||||
"حساب کاربری",
|
||||
"نوبت های من",
|
||||
"تراکنش های من",
|
||||
"نظرات من",
|
||||
"پیام ها",
|
||||
];
|
||||
|
||||
function ContentTabs({ user, value, isTurnsDetails, setIsTurnsDetails, setValue, isOpenSide, setIsOpenSide }) {
|
||||
function ContentTabs({
|
||||
user,
|
||||
value,
|
||||
isTurnsDetails,
|
||||
setIsTurnsDetails,
|
||||
setValue,
|
||||
isOpenSide,
|
||||
setIsOpenSide,
|
||||
}) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
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 />,
|
||||
];
|
||||
|
||||
|
||||
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]
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
)
|
||||
<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
|
||||
export default ContentTabs;
|
||||
|
||||
@@ -1,50 +1,69 @@
|
||||
import CalendarAdD from '@/components/icons/CalendarAdD'
|
||||
import CardTickD from '@/components/icons/CardTickD'
|
||||
import { Button } from '@mui/material'
|
||||
import Image from 'next/image'
|
||||
import CalendarAdD from "@/components/icons/CalendarAdD";
|
||||
import CardTickD from "@/components/icons/CardTickD";
|
||||
import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
|
||||
function Head({ user }) {
|
||||
return (
|
||||
<div className='hidden md:flex flex-col lg:flex-row w-full items-stretch justify-center gap-[12px] lg:gap-[24px]'>
|
||||
<div className='bg-head-dashboard rounded-[8px] relative w-full !bg-no-repeat !bg-cover py-[20px] px-[24px] !bg-center flex items-center'>
|
||||
<div className='flex w-full pl-[calc(5%+140px)] lg:pl-[calc(9%+171px)] flex-col justify-start items-start gap-[8px]'>
|
||||
<p className='text-[3B3B3B] text-[16px] font-bold'>{user.name} <span className='text-[#3B3B3B] text-[16px] font-normal'>عزیز!</span></p>
|
||||
<p className='text-[#616161] text-[12px] font-normal'>در این قسمت میتوانید اطلاعات حساب خود و نوبت های گرفته شده را مدیریت کنید. </p>
|
||||
<Button
|
||||
variant='contained'
|
||||
className='!bg-[#5559CE] !rounded-[4px] !py-[4px] !px-[8px] !text-[#EFEFEF] !text-[12px] !font-medium !leading-[22px]'
|
||||
>مشاهده اطلاعات</Button>
|
||||
</div>
|
||||
<Image
|
||||
className='w-[120px] lg:w-[140px] xl:w-[170px] xl:min-w-[170px] h-fit absolute bottom-0 left-[3%] md:left-[5%] lg:left-[9%]'
|
||||
src='/assets/images/male-doctor-head-dashboard.png'
|
||||
alt='doctor'
|
||||
height={175}
|
||||
width={171}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col md:flex-row lg:flex-col items-start justify-start gap-[12px]'>
|
||||
<div className='py-[10px] flex items-center justify-start gap-[12px] min-w-[184px] w-full px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
|
||||
<div className='bg-[#5559CE] min-w-[18px] sm:min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[18px] sm:min-h-[20px] md:min-h-[22px] lg:min-h-[24px] rounded-full p-[8px]'>
|
||||
<CardTickD />
|
||||
</div>
|
||||
<div className='flex flex-col gap-[8px] items-start justify-start'>
|
||||
<p className='text-[#3B3B3B] text-nowrap text-[16px] font-medium'>{user.total_transactions} <span className='text-[12px]'>تومان</span></p>
|
||||
<p className='text-[#616161] text-nowrap text-[14px] font-normal'>مجموع تراکنش ها</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='py-[10px] flex items-center justify-start gap-[12px] min-w-[184px] w-full px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]'>
|
||||
<div className='bg-[#FFC051] min-w-[18px] sm:min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[18px] sm:min-h-[20px] md:min-h-[22px] lg:min-h-[24px] rounded-full p-[8px]'>
|
||||
<CalendarAdD />
|
||||
</div>
|
||||
<div className='flex flex-col gap-[8px] items-start justify-start'>
|
||||
<p className='text-[#3B3B3B] text-nowrap text-[16px] font-medium'>{user.number_of_turns}</p>
|
||||
<p className='text-[#616161] text-nowrap text-[14px] font-normal'>تعداد نوبت های شما</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className="hidden md:flex flex-col lg:flex-row w-full items-stretch justify-center gap-[12px] lg:gap-[24px]">
|
||||
<div className="bg-head-dashboard rounded-[8px] relative w-full !bg-no-repeat !bg-cover py-[20px] px-[24px] !bg-center flex items-center">
|
||||
<div className="flex w-full pl-[calc(5%+140px)] lg:pl-[calc(9%+171px)] flex-col justify-start items-start gap-[8px]">
|
||||
<p className="text-[3B3B3B] text-[16px] font-bold">
|
||||
{user.name}{" "}
|
||||
<span className="text-[#3B3B3B] text-[16px] font-normal">
|
||||
عزیز!
|
||||
</span>
|
||||
</p>
|
||||
<p className="text-[#616161] text-[12px] font-normal">
|
||||
در این قسمت میتوانید اطلاعات حساب خود و نوبت های گرفته شده را مدیریت
|
||||
کنید.{" "}
|
||||
</p>
|
||||
<Button
|
||||
variant="contained"
|
||||
className="!bg-[#5559CE] !rounded-[4px] !py-[4px] !px-[8px] !text-[#EFEFEF] !text-[12px] !font-medium !leading-[22px]"
|
||||
>
|
||||
مشاهده اطلاعات
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
<Image
|
||||
className="w-[120px] lg:w-[140px] xl:w-[170px] xl:min-w-[170px] h-fit absolute bottom-0 left-[3%] md:left-[5%] lg:left-[9%]"
|
||||
src="/assets/images/male-doctor-head-dashboard.png"
|
||||
alt="doctor"
|
||||
height={175}
|
||||
width={171}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row lg:flex-col items-start justify-start gap-[12px]">
|
||||
<div className="py-[10px] flex items-center justify-start gap-[12px] min-w-[184px] w-full px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]">
|
||||
<div className="bg-[#5559CE] min-w-[18px] sm:min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[18px] sm:min-h-[20px] md:min-h-[22px] lg:min-h-[24px] rounded-full p-[8px]">
|
||||
<CardTickD />
|
||||
</div>
|
||||
<div className="flex flex-col gap-[8px] items-start justify-start">
|
||||
<p className="text-[#3B3B3B] text-nowrap text-[16px] font-medium">
|
||||
{user.total_transactions}{" "}
|
||||
<span className="text-[12px]">تومان</span>
|
||||
</p>
|
||||
<p className="text-[#616161] text-nowrap text-[14px] font-normal">
|
||||
مجموع تراکنش ها
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="py-[10px] flex items-center justify-start gap-[12px] min-w-[184px] w-full px-[8px] bg-[#FFF] bg-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px]">
|
||||
<div className="bg-[#FFC051] min-w-[18px] sm:min-w-[20px] md:min-w-[22px] lg:min-w-[24px] min-h-[18px] sm:min-h-[20px] md:min-h-[22px] lg:min-h-[24px] rounded-full p-[8px]">
|
||||
<CalendarAdD />
|
||||
</div>
|
||||
<div className="flex flex-col gap-[8px] items-start justify-start">
|
||||
<p className="text-[#3B3B3B] text-nowrap text-[16px] font-medium">
|
||||
{user.number_of_turns}
|
||||
</p>
|
||||
<p className="text-[#616161] text-nowrap text-[14px] font-normal">
|
||||
تعداد نوبت های شما
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -1,35 +1,43 @@
|
||||
import NumberNotFound from "@/components/icons/NumberNotFound"
|
||||
import { Button } from "@mui/material"
|
||||
import Image from "next/image"
|
||||
import NumberNotFound from "@/components/icons/NumberNotFound";
|
||||
import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
|
||||
function NotfoundDashboard() {
|
||||
return (
|
||||
<div className='flex flex-col-reverse items-center justify-between gap-[50px]'>
|
||||
<div className='flex w-full md:w-fit flex-col justify-center items-center'>
|
||||
<div className='flex mt-[72px] md:hidden
|
||||
return (
|
||||
<div className="flex flex-col-reverse items-center justify-between gap-[50px]">
|
||||
<div className="flex w-full md:w-fit flex-col justify-center items-center">
|
||||
<div
|
||||
className="flex mt-[72px] md:hidden
|
||||
w-[136px] sm:w-[163px] md:w-[190px] lg:w-[218px]
|
||||
h-[51px] sm:h-[61px] md:h-[71px] lg:h-[82px]'>
|
||||
<NumberNotFound />
|
||||
</div>
|
||||
<Image
|
||||
className=' mt-[24px]
|
||||
h-[51px] sm:h-[61px] md:h-[71px] lg:h-[82px]"
|
||||
>
|
||||
<NumberNotFound />
|
||||
</div>
|
||||
<Image
|
||||
className=" mt-[24px]
|
||||
w-[200px] sm:w-[212px] md:w-[223px] lg:w-[235px]
|
||||
h-[200px] sm:h-[212px] md:h-[223px] lg:h-[235px]
|
||||
'
|
||||
src='/assets/images/notfound-cover.png'
|
||||
alt='notfound-cover'
|
||||
height={405}
|
||||
width={411}
|
||||
/>
|
||||
<p className='text-[#3B3B3B] text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold mt-[24px] sm:mt-[30px] md:mt-[35px] lg:mt-[40px] mb-[12px] sm:mb-[16px] md:mb-[20px] lg:mb-[24px] text-center'>صفحه مورد نظر یافت نشد!</p>
|
||||
<p className='text-[#525252] text-[14px] md:text-[16px] font-normal text-center'>متاسفانه صفحه ای که به دنبال آن هستید وجود ندارد یا پاک شده است.</p>
|
||||
<Button
|
||||
className='!h-[43px] md:!h-[45px] lg:!h-[46px] !mt-[20px] sm:!mt-[29px] md:!mt-[39px] lg:!mt-[48px] !px-[12px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium'
|
||||
variant='contained'
|
||||
>بازگشت به صفحه اصلی</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
"
|
||||
src="/assets/images/notfound-cover.png"
|
||||
alt="notfound-cover"
|
||||
height={405}
|
||||
width={411}
|
||||
/>
|
||||
<p className="text-[#3B3B3B] text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold mt-[24px] sm:mt-[30px] md:mt-[35px] lg:mt-[40px] mb-[12px] sm:mb-[16px] md:mb-[20px] lg:mb-[24px] text-center">
|
||||
صفحه مورد نظر یافت نشد!
|
||||
</p>
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-normal text-center">
|
||||
متاسفانه صفحه ای که به دنبال آن هستید وجود ندارد یا پاک شده است.
|
||||
</p>
|
||||
<Button
|
||||
className="!h-[43px] md:!h-[45px] lg:!h-[46px] !mt-[20px] sm:!mt-[29px] md:!mt-[39px] lg:!mt-[48px] !px-[12px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
|
||||
variant="contained"
|
||||
>
|
||||
بازگشت به صفحه اصلی
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default NotfoundDashboard
|
||||
export default NotfoundDashboard;
|
||||
|
||||
@@ -1,28 +1,36 @@
|
||||
import ContentTabs from "./ContentTabs"
|
||||
import Head from "./Head"
|
||||
import NotfoundDashboard from "./NotfoundDashboard"
|
||||
import ContentTabs from "./ContentTabs";
|
||||
import Head from "./Head";
|
||||
import NotfoundDashboard from "./NotfoundDashboard";
|
||||
|
||||
function UserAccountPage({ user, isTurnsDetails, setIsTurnsDetails, value, setValue, isOpenSide, setIsOpenSide }) {
|
||||
return (
|
||||
<div className='w-full md:w-[68%] lg:w-[72%]'>
|
||||
{value === 5 ? (
|
||||
<NotfoundDashboard />
|
||||
) : (
|
||||
<>
|
||||
<Head user={user} />
|
||||
<ContentTabs
|
||||
user={user}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
isOpenSide={isOpenSide}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
function UserAccountPage({
|
||||
user,
|
||||
isTurnsDetails,
|
||||
setIsTurnsDetails,
|
||||
value,
|
||||
setValue,
|
||||
isOpenSide,
|
||||
setIsOpenSide,
|
||||
}) {
|
||||
return (
|
||||
<div className="w-full md:w-[68%] lg:w-[72%]">
|
||||
{value === 5 ? (
|
||||
<NotfoundDashboard />
|
||||
) : (
|
||||
<>
|
||||
<Head user={user} />
|
||||
<ContentTabs
|
||||
user={user}
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
isOpenSide={isOpenSide}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserAccountPage
|
||||
export default UserAccountPage;
|
||||
|
||||
@@ -1,67 +1,73 @@
|
||||
import CalndarD from "@/components/icons/CalndarD"
|
||||
import { Rating } from "@mui/material"
|
||||
import Image from "next/image"
|
||||
import ModalDeleteComment from "./modal"
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import TextLoading from "@/app/component/loading/Text"
|
||||
import CustomLoading from "@/app/component/loading/Custom"
|
||||
import MultilineLoading from "@/app/component/loading/Multiline"
|
||||
import CalndarD from "@/components/icons/CalndarD";
|
||||
import { Rating } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import ModalDeleteComment from "./modal";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
import MultilineLoading from "@/app/component/loading/Multiline";
|
||||
|
||||
function Comment({ data, loading, idx, length }) {
|
||||
return (
|
||||
<li className="flex flex-col gap-[8px] w-full">
|
||||
<div className="flex items-start justify-between w-full">
|
||||
<div className="flex items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]">
|
||||
<CircularLoading loading={loading} width={87} height={87}>
|
||||
<Image
|
||||
className="w-[48px] sm:w-[61px] md:w-[75px] lg:w-[88px] h-[48px] sm:h-[61px] md:h-[75px] lg:h-[88px]"
|
||||
src={data.profile}
|
||||
alt="profile"
|
||||
height={87}
|
||||
width={87}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-[8px] md:gap-[12px] lg:gap-[16px]">
|
||||
<TextLoading loading={loading} width={105} height={18}>
|
||||
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] lg:text-[16px] font-bold">{data.name_doctor}</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] font-medium">تخصص: {data.expertise}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<CustomLoading loading={loading} width={90} height={30}>
|
||||
<ModalDeleteComment />
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<CustomLoading loading={loading} width={130} height={18}>
|
||||
<Rating
|
||||
defaultValue={data.stars.value}
|
||||
className="!mt-[4px] md:!mt-[6px] lg:!mt-[8px]"
|
||||
sx={{
|
||||
'& .MuiSvgIcon-root': {
|
||||
width: '16px',
|
||||
height: '16px'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</CustomLoading>
|
||||
<MultilineLoading loading={loading} width='full' height={18} line={2}>
|
||||
<p className="text-[#525252] mt-[4px] md:mt-[2px] lg:mt-0 text-[14px] font-normal leading-[28px] md:leading-[30px] lg:leading-[33px]">{data.comment}</p>
|
||||
</MultilineLoading>
|
||||
<div className="flex items-center justify-start gap-[8px]">
|
||||
<div className="w-[20px] h-[20px] sm:w-[22px] sm:h-[22px] lg:w-[24px] lg:h-[24px]">
|
||||
<CalndarD />
|
||||
</div>
|
||||
<TextLoading width={90} height={18} loading={loading}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">{data.date}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
{length > idx + 1 && (
|
||||
<span className="w-full block h-px bg-[#EFEFEF] mt-0 md:mt-[4px] lg:mt-[8px]"></span>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
return (
|
||||
<li className="flex flex-col gap-[8px] w-full">
|
||||
<div className="flex items-start justify-between w-full">
|
||||
<div className="flex items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]">
|
||||
<CircularLoading loading={loading} width={87} height={87}>
|
||||
<Image
|
||||
className="w-[48px] sm:w-[61px] md:w-[75px] lg:w-[88px] h-[48px] sm:h-[61px] md:h-[75px] lg:h-[88px]"
|
||||
src={data.profile}
|
||||
alt="profile"
|
||||
height={87}
|
||||
width={87}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-[8px] md:gap-[12px] lg:gap-[16px]">
|
||||
<TextLoading loading={loading} width={105} height={18}>
|
||||
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] lg:text-[16px] font-bold">
|
||||
{data.name_doctor}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] font-medium">
|
||||
تخصص: {data.expertise}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<CustomLoading loading={loading} width={90} height={30}>
|
||||
<ModalDeleteComment />
|
||||
</CustomLoading>
|
||||
</div>
|
||||
<CustomLoading loading={loading} width={130} height={18}>
|
||||
<Rating
|
||||
defaultValue={data.stars.value}
|
||||
className="!mt-[4px] md:!mt-[6px] lg:!mt-[8px]"
|
||||
sx={{
|
||||
"& .MuiSvgIcon-root": {
|
||||
width: "16px",
|
||||
height: "16px",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</CustomLoading>
|
||||
<MultilineLoading loading={loading} width="full" height={18} line={2}>
|
||||
<p className="text-[#525252] mt-[4px] md:mt-[2px] lg:mt-0 text-[14px] font-normal leading-[28px] md:leading-[30px] lg:leading-[33px]">
|
||||
{data.comment}
|
||||
</p>
|
||||
</MultilineLoading>
|
||||
<div className="flex items-center justify-start gap-[8px]">
|
||||
<div className="w-[20px] h-[20px] sm:w-[22px] sm:h-[22px] lg:w-[24px] lg:h-[24px]">
|
||||
<CalndarD />
|
||||
</div>
|
||||
<TextLoading width={90} height={18} loading={loading}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">{data.date}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
{length > idx + 1 && (
|
||||
<span className="w-full block h-px bg-[#EFEFEF] mt-0 md:mt-[4px] lg:mt-[8px]"></span>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default Comment
|
||||
export default Comment;
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import Comment from "./Comment"
|
||||
import Comment from "./Comment";
|
||||
|
||||
function Comments({ user, loading }) {
|
||||
return (
|
||||
<ul className="flex opacity-page flex-col items-start justify-start gap-[24px] md:gap-[22px] lg:gap-[20px]">
|
||||
{user.comments.map((item, idx) => (
|
||||
<Comment
|
||||
key={idx}
|
||||
idx={idx}
|
||||
data={item}
|
||||
loading={loading}
|
||||
length={user.comments.length}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
return (
|
||||
<ul className="flex opacity-page flex-col items-start justify-start gap-[24px] md:gap-[22px] lg:gap-[20px]">
|
||||
{user.comments.map((item, idx) => (
|
||||
<Comment
|
||||
key={idx}
|
||||
idx={idx}
|
||||
data={item}
|
||||
loading={loading}
|
||||
length={user.comments.length}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default Comments
|
||||
export default Comments;
|
||||
|
||||
@@ -1,67 +1,63 @@
|
||||
import { useState } from 'react';
|
||||
import TrashOrangeD from '@/components/icons/TrashOrangeD';
|
||||
import { Box, Button, Modal } from '@mui/material';
|
||||
import { styleDefault } from '@/mui';
|
||||
import CloseModalD from '@/components/icons/CloseModalD';
|
||||
import { useState } from "react";
|
||||
import TrashOrangeD from "@/components/icons/TrashOrangeD";
|
||||
import { Box, Button, Modal } from "@mui/material";
|
||||
import { styleDefault } from "@/mui";
|
||||
import CloseModalD from "@/components/icons/CloseModalD";
|
||||
|
||||
function ModalDeleteComment() {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Button Modal */}
|
||||
<Button
|
||||
className="!gap-[5px] !p-1 !text-[#F17732] !text-[12px] md:!text-[14px] !font-medium"
|
||||
onClick={handleOpen}
|
||||
variant="text"
|
||||
>
|
||||
<TrashOrangeD />
|
||||
حذف نظر
|
||||
return (
|
||||
<div>
|
||||
{/* Button Modal */}
|
||||
<Button
|
||||
className="!gap-[5px] !p-1 !text-[#F17732] !text-[12px] md:!text-[14px] !font-medium"
|
||||
onClick={handleOpen}
|
||||
variant="text"
|
||||
>
|
||||
<TrashOrangeD />
|
||||
حذف نظر
|
||||
</Button>
|
||||
{/* Content Modal */}
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
|
||||
حذف نظر
|
||||
</p>
|
||||
<Button onClick={handleClose} className="!p-1" variant="text">
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
{/* Content Modal */}
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
</div>
|
||||
<span className="block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]"></span>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal">
|
||||
آیا این نظر حذف شود؟
|
||||
</p>
|
||||
<div className="flex items-center justify-end gap-[16px] mt-[12px]">
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleClose}
|
||||
className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium"
|
||||
>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
|
||||
>
|
||||
<div className='flex items-center justify-between w-full'>
|
||||
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>حذف نظر</p>
|
||||
<Button
|
||||
onClick={handleClose}
|
||||
className='!p-1'
|
||||
variant='text'
|
||||
>
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
</div>
|
||||
<span className='block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]'></span>
|
||||
<p className='text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal'>آیا این نظر حذف شود؟</p>
|
||||
<div className='flex items-center justify-end gap-[16px] mt-[12px]'>
|
||||
<Button
|
||||
variant='outlined'
|
||||
onClick={handleClose}
|
||||
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium'
|
||||
>
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant='contained'
|
||||
onClick={handleClose}
|
||||
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium'
|
||||
>
|
||||
حذف نظر
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleClose}
|
||||
className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium"
|
||||
>
|
||||
حذف نظر
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalDeleteComment
|
||||
export default ModalDeleteComment;
|
||||
|
||||
@@ -1,18 +1,20 @@
|
||||
function Content({ isConfirmed, children, title }) {
|
||||
return (
|
||||
<div className='flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]'>
|
||||
<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>
|
||||
{isConfirmed && (
|
||||
<p
|
||||
className='py-[4px] md:py-[2px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF]
|
||||
text-[10px] md:text-[12px] font-normal h-[26px] grid place-items-center'
|
||||
>تایید شده</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
|
||||
<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>
|
||||
{isConfirmed && (
|
||||
<p
|
||||
className="py-[4px] md:py-[2px] px-[5px] bg-[#05BA58] rounded-[40px] text-[#FFF]
|
||||
text-[10px] md:text-[12px] font-normal h-[26px] grid place-items-center"
|
||||
>
|
||||
تایید شده
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Content
|
||||
export default Content;
|
||||
|
||||
@@ -1,70 +1,69 @@
|
||||
import CalendarEdit from '@/components/icons/CalendarEdit';
|
||||
import { convertToJalali } from '@/helper';
|
||||
import { Button, Popover } from '@mui/material'
|
||||
import { DatePicker } from 'jalaali-react-date-picker'
|
||||
import React, { useState } from 'react'
|
||||
import CalendarEdit from "@/components/icons/CalendarEdit";
|
||||
import { convertToJalali } from "@/helper";
|
||||
import { Button, Popover } from "@mui/material";
|
||||
import { DatePicker } from "jalaali-react-date-picker";
|
||||
import React, { useState } from "react";
|
||||
|
||||
function DateBirthday({ data, changeData }) {
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
const open = Boolean(anchorEl);
|
||||
const id = open ? "simple-popover" : undefined;
|
||||
|
||||
const open = Boolean(anchorEl);
|
||||
const id = open ? 'simple-popover' : undefined;
|
||||
|
||||
return (
|
||||
<div className='w-full'>
|
||||
<div
|
||||
className="relative w-full border cursor-pointer py-[15px] px-[16px] border-solid border-[#D7D7D7] rounded-[8px] h-[48px]"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<p className='text-[#7E7E7E] text-[14px] font-normal cursor-pointer'>{data.value}</p>
|
||||
<Button
|
||||
className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1"
|
||||
>
|
||||
<CalendarEdit />
|
||||
</Button>
|
||||
</div>
|
||||
<Popover
|
||||
id={id}
|
||||
open={open}
|
||||
anchorEl={anchorEl}
|
||||
onClose={handleClose}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'right',
|
||||
}}
|
||||
sx={{
|
||||
'& .MuiPaper-root': {
|
||||
padding: '12px',
|
||||
background: '#FAFAFA !important',
|
||||
borderRadius: '16px',
|
||||
border: '1px solid #E9ECEF',
|
||||
boxShadow: '0px 2px 28.4px 0px rgba(112, 112, 112, 0.28)'
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DatePicker
|
||||
locale='fa'
|
||||
onChange={e => {
|
||||
changeData(convertToJalali(e._d), 'value', 'date_of_birth');
|
||||
handleClose();
|
||||
}}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div
|
||||
className="relative w-full border cursor-pointer py-[15px] px-[16px] border-solid border-[#D7D7D7] rounded-[8px] h-[48px]"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal cursor-pointer">
|
||||
{data.value}
|
||||
</p>
|
||||
<Button className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1">
|
||||
<CalendarEdit />
|
||||
</Button>
|
||||
</div>
|
||||
<Popover
|
||||
id={id}
|
||||
open={open}
|
||||
anchorEl={anchorEl}
|
||||
onClose={handleClose}
|
||||
anchorOrigin={{
|
||||
vertical: "bottom",
|
||||
horizontal: "right",
|
||||
}}
|
||||
transformOrigin={{
|
||||
vertical: "top",
|
||||
horizontal: "right",
|
||||
}}
|
||||
sx={{
|
||||
"& .MuiPaper-root": {
|
||||
padding: "12px",
|
||||
background: "#FAFAFA !important",
|
||||
borderRadius: "16px",
|
||||
border: "1px solid #E9ECEF",
|
||||
boxShadow: "0px 2px 28.4px 0px rgba(112, 112, 112, 0.28)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DatePicker
|
||||
locale="fa"
|
||||
onChange={(e) => {
|
||||
changeData(convertToJalali(e._d), "value", "date_of_birth");
|
||||
handleClose();
|
||||
}}
|
||||
/>
|
||||
</Popover>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DateBirthday
|
||||
export default DateBirthday;
|
||||
|
||||
@@ -1,86 +1,139 @@
|
||||
import Content from './Content'
|
||||
import EditField from '@/app/component/EditField'
|
||||
import AutoCompleteSelect from '@/app/component/element/AutoCompleteSelect'
|
||||
import DateBirthday from './DateBirthday'
|
||||
import { insurance, gender, blood_group, marital_status, education, job } from "./listSelector";
|
||||
import Content from "./Content";
|
||||
import EditField from "@/app/component/EditField";
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
import DateBirthday from "./DateBirthday";
|
||||
import {
|
||||
insurance,
|
||||
gender,
|
||||
blood_group,
|
||||
marital_status,
|
||||
education,
|
||||
job,
|
||||
} from "./listSelector";
|
||||
|
||||
function Form({ data, selected, changeData, updateSelect }) {
|
||||
return (
|
||||
<div className='grid grid-cols-1 lg:grid-cols-2 gap-[24px]'>
|
||||
<Content title='شماره موبایل' isConfirmed={true}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.phone} name='phone' />
|
||||
</Content>
|
||||
<Content title='کد ملی' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.national_code} name='national_code' />
|
||||
</Content>
|
||||
<Content title='نام و نام خانوادگی' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.name} name='name' />
|
||||
</Content>
|
||||
<Content title='جنسیت'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='جنسیت'
|
||||
name='gender'
|
||||
list={gender}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='تاریخ تولد'>
|
||||
<DateBirthday data={data?.date_of_birth} isConfirmed={false} changeData={changeData} />
|
||||
</Content>
|
||||
<Content title='نام پدر' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.father_name} name='father_name' />
|
||||
</Content>
|
||||
<Content title='نوع بیمه'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='نوع بیمه'
|
||||
name='insurance'
|
||||
list={insurance}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='شماره بیمه' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.insurance_number} name='insurance_number' />
|
||||
</Content>
|
||||
<Content title='گروه خونی'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='گروه خونی'
|
||||
name='blood_group'
|
||||
list={blood_group}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='وضعیت تاهل'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='وضعیت تاهل'
|
||||
name='marital_status'
|
||||
list={marital_status}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='تلفن منزل' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.home_phone} name='home_phone' />
|
||||
</Content>
|
||||
<Content title='تحصیلات'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='تحصیلات'
|
||||
name='education'
|
||||
list={education}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='شغل'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='شغل'
|
||||
name='job'
|
||||
list={job}
|
||||
/>
|
||||
</Content>
|
||||
<Content title='تلفن محل کار' isConfirmed={false}>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.work_phone} name='work_phone' />
|
||||
</Content>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[24px]">
|
||||
<Content title="شماره موبایل" isConfirmed={true}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.phone}
|
||||
name="phone"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="کد ملی" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.national_code}
|
||||
name="national_code"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="نام و نام خانوادگی" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.name}
|
||||
name="name"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="جنسیت">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="جنسیت"
|
||||
name="gender"
|
||||
list={gender}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="تاریخ تولد">
|
||||
<DateBirthday
|
||||
data={data?.date_of_birth}
|
||||
isConfirmed={false}
|
||||
changeData={changeData}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="نام پدر" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.father_name}
|
||||
name="father_name"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="نوع بیمه">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="نوع بیمه"
|
||||
name="insurance"
|
||||
list={insurance}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="شماره بیمه" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.insurance_number}
|
||||
name="insurance_number"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="گروه خونی">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="گروه خونی"
|
||||
name="blood_group"
|
||||
list={blood_group}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="وضعیت تاهل">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="وضعیت تاهل"
|
||||
name="marital_status"
|
||||
list={marital_status}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="تلفن منزل" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.home_phone}
|
||||
name="home_phone"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="تحصیلات">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="تحصیلات"
|
||||
name="education"
|
||||
list={education}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="شغل">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="شغل"
|
||||
name="job"
|
||||
list={job}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="تلفن محل کار" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.work_phone}
|
||||
name="work_phone"
|
||||
/>
|
||||
</Content>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Form
|
||||
export default Form;
|
||||
|
||||
@@ -4,55 +4,55 @@ import { Button } from "@mui/material";
|
||||
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
|
||||
|
||||
function DetailUser({ user }) {
|
||||
const [data, setData] = useState({
|
||||
phone: { value: user.phone, isEdit: false },
|
||||
national_code: { value: user.national_code, isEdit: false },
|
||||
name: { value: user.name, isEdit: false },
|
||||
date_of_birth: { value: user.date_of_birth, isEdit: false },
|
||||
father_name: { value: user.father_name, isEdit: false },
|
||||
insurance_number: { value: user.insurance_number, isEdit: false },
|
||||
home_phone: { value: user.home_phone, isEdit: false },
|
||||
work_phone: { value: user.work_phone, isEdit: false },
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
gender: "",
|
||||
blood_group: "",
|
||||
insurance: "",
|
||||
marital_status: "",
|
||||
education: "",
|
||||
job: "",
|
||||
});
|
||||
|
||||
const [data, setData] = useState({
|
||||
phone: { value: user.phone, isEdit: false },
|
||||
national_code: { value: user.national_code, isEdit: false },
|
||||
name: { value: user.name, isEdit: false },
|
||||
date_of_birth: { value: user.date_of_birth, isEdit: false },
|
||||
father_name: { value: user.father_name, isEdit: false },
|
||||
insurance_number: { value: user.insurance_number, isEdit: false },
|
||||
home_phone: { value: user.home_phone, isEdit: false },
|
||||
work_phone: { value: user.work_phone, isEdit: false },
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
gender: '',
|
||||
blood_group: '',
|
||||
insurance: '',
|
||||
marital_status: '',
|
||||
education: '',
|
||||
job: '',
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value,
|
||||
},
|
||||
});
|
||||
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value
|
||||
}
|
||||
});
|
||||
const updateSelect = (event, name) =>
|
||||
setSelected({ ...selected, [name]: event.target.innerText });
|
||||
|
||||
const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
|
||||
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form
|
||||
data={data}
|
||||
selected={selected}
|
||||
changeData={changeData}
|
||||
updateSelect={updateSelect}
|
||||
/>
|
||||
<Button
|
||||
className="!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form
|
||||
data={data}
|
||||
selected={selected}
|
||||
changeData={changeData}
|
||||
updateSelect={updateSelect}
|
||||
/>
|
||||
<Button
|
||||
className="!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
|
||||
!bg-[#5559CE] !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
|
||||
!mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftWhiteD />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftWhiteD />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailUser
|
||||
export default DetailUser;
|
||||
|
||||
@@ -1,34 +1,34 @@
|
||||
export const gender = [
|
||||
{ label: 'مرد', id: 10 },
|
||||
{ label: 'زن', id: 20 }
|
||||
{ label: "مرد", id: 10 },
|
||||
{ label: "زن", id: 20 },
|
||||
];
|
||||
|
||||
export const blood_group = [
|
||||
{ label: 'A+', id: 10 },
|
||||
{ label: 'B+', id: 20 },
|
||||
{ label: 'AB', id: 30 },
|
||||
{ label: 'O+', id: 40 }
|
||||
{ label: "A+", id: 10 },
|
||||
{ label: "B+", id: 20 },
|
||||
{ label: "AB", id: 30 },
|
||||
{ label: "O+", id: 40 },
|
||||
];
|
||||
|
||||
export const marital_status = [
|
||||
{ label: 'متاهل', id: 10 },
|
||||
{ label: 'مجرد', id: 20 }
|
||||
]
|
||||
{ label: "متاهل", id: 10 },
|
||||
{ label: "مجرد", id: 20 },
|
||||
];
|
||||
|
||||
export const education = [
|
||||
{ label: 'دیپلم', id: 10 },
|
||||
{ label: 'فوق دیپلم', id: 20 },
|
||||
{ label: 'لیسانس', id: 30 },
|
||||
{ label: 'کارشناسی ارشد', id: 40 }
|
||||
]
|
||||
{ label: "دیپلم", id: 10 },
|
||||
{ label: "فوق دیپلم", id: 20 },
|
||||
{ label: "لیسانس", id: 30 },
|
||||
{ label: "کارشناسی ارشد", id: 40 },
|
||||
];
|
||||
|
||||
export const job = [
|
||||
{ label: 'آزاد', id: 10 },
|
||||
{ label: 'دولتی', id: 20 },
|
||||
]
|
||||
{ label: "آزاد", id: 10 },
|
||||
{ label: "دولتی", id: 20 },
|
||||
];
|
||||
|
||||
export const insurance = [
|
||||
{ label: 'بیمه 1', id: 10 },
|
||||
{ label: 'بیمه 2', id: 20 },
|
||||
{ label: 'بیمه 3', id: 30 }
|
||||
];
|
||||
{ label: "بیمه 1", id: 10 },
|
||||
{ label: "بیمه 2", id: 20 },
|
||||
{ label: "بیمه 3", id: 30 },
|
||||
];
|
||||
|
||||
@@ -1,38 +1,44 @@
|
||||
import MultilineLoading from '@/app/component/loading/Multiline'
|
||||
import TextLoading from '@/app/component/loading/Text'
|
||||
import CalndarD from '@/components/icons/CalndarD'
|
||||
import MessageNotifd from '@/components/icons/MessageNotifD'
|
||||
import React from 'react'
|
||||
import MultilineLoading from "@/app/component/loading/Multiline";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import CalndarD from "@/components/icons/CalndarD";
|
||||
import MessageNotifd from "@/components/icons/MessageNotifD";
|
||||
import React from "react";
|
||||
|
||||
function Message({ data, loading, length, idx }) {
|
||||
return (
|
||||
<li>
|
||||
<div className="flex items-center justify-start gap-[8px]">
|
||||
<div className="p-[6px] rounded-full bg-[#F17732]">
|
||||
<MessageNotifd />
|
||||
</div>
|
||||
<TextLoading width={60} height={18} loading={loading}>
|
||||
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] lg:text-[16px] font-bold">عنوان پیام</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className='mr-0 lg:mr-[41px]'>
|
||||
<MultilineLoading width='full' height={18} loading={loading} line={2}>
|
||||
<p className='text-[#525252] text-[12px] md:text-[14px] font-normal leading-[28px] md:leading-[30px] lg:leading-[33px]'>{data.text}</p>
|
||||
</MultilineLoading>
|
||||
<div className='flex items-center justify-start gap-[8px] mt-[8px] md:mt-[10px] lg:mt-[12px]'>
|
||||
<div className='max-w-[20px] max-h-[20px] md:max-w-[22px] md:max-h-[22px] lg:max-w-[24px] lg:max-h-[24px]'>
|
||||
<CalndarD />
|
||||
</div>
|
||||
<TextLoading width={60} height={18} loading={loading}>
|
||||
<p className='text-[#7E7E7E] text-[12px] font-normal'>{data.date}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
{length > idx + 1 && (
|
||||
<span className='block bg-[#EFEFEF] h-px w-full mt-[12px]'></span>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
return (
|
||||
<li>
|
||||
<div className="flex items-center justify-start gap-[8px]">
|
||||
<div className="p-[6px] rounded-full bg-[#F17732]">
|
||||
<MessageNotifd />
|
||||
</div>
|
||||
<TextLoading width={60} height={18} loading={loading}>
|
||||
<p className="text-[#3B3B3B] text-[12px] md:text-[14px] lg:text-[16px] font-bold">
|
||||
عنوان پیام
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="mr-0 lg:mr-[41px]">
|
||||
<MultilineLoading width="full" height={18} loading={loading} line={2}>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] font-normal leading-[28px] md:leading-[30px] lg:leading-[33px]">
|
||||
{data.text}
|
||||
</p>
|
||||
</MultilineLoading>
|
||||
<div className="flex items-center justify-start gap-[8px] mt-[8px] md:mt-[10px] lg:mt-[12px]">
|
||||
<div className="max-w-[20px] max-h-[20px] md:max-w-[22px] md:max-h-[22px] lg:max-w-[24px] lg:max-h-[24px]">
|
||||
<CalndarD />
|
||||
</div>
|
||||
<TextLoading width={60} height={18} loading={loading}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">
|
||||
{data.date}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
{length > idx + 1 && (
|
||||
<span className="block bg-[#EFEFEF] h-px w-full mt-[12px]"></span>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default Message
|
||||
export default Message;
|
||||
|
||||
@@ -1,19 +1,19 @@
|
||||
import Message from "./Message";
|
||||
|
||||
function Messages({ user, loading }) {
|
||||
return (
|
||||
<ul className="flex opacity-page flex-col gap-[24px] md:gap-[20px] lg:gap-[16px]">
|
||||
{user.messages.map((item, idx) => (
|
||||
<Message
|
||||
key={idx}
|
||||
idx={idx}
|
||||
data={item}
|
||||
loading={loading}
|
||||
length={user.messages.length}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
return (
|
||||
<ul className="flex opacity-page flex-col gap-[24px] md:gap-[20px] lg:gap-[16px]">
|
||||
{user.messages.map((item, idx) => (
|
||||
<Message
|
||||
key={idx}
|
||||
idx={idx}
|
||||
data={item}
|
||||
loading={loading}
|
||||
length={user.messages.length}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default Messages
|
||||
export default Messages;
|
||||
|
||||
@@ -1,77 +1,92 @@
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import TextLoading from "@/app/component/loading/Text"
|
||||
import Image from "next/image"
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import Image from "next/image";
|
||||
|
||||
function Card({ data, loading }) {
|
||||
return (
|
||||
<li className="p-[12px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] bg-[#FFF] rounded-[8px]">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center justify-start gap-[8px]">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={data.image}
|
||||
alt="profile"
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<TextLoading width={90} height={18} loading={loading}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{data.name}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<TextLoading loading={loading} width={95} height={25}>
|
||||
<div
|
||||
className={`
|
||||
return (
|
||||
<li className="p-[12px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] bg-[#FFF] rounded-[8px]">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<div className="flex items-center justify-start gap-[8px]">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image src={data.image} alt="profile" height={32} width={32} />
|
||||
</CircularLoading>
|
||||
<TextLoading width={90} height={18} loading={loading}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{data.name}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<TextLoading loading={loading} width={95} height={25}>
|
||||
<div
|
||||
className={`
|
||||
w-[100px] p-[4px] rounded-[4px] text-center text-[14px] font-medium cursor-pointer select-none
|
||||
${data.status === 'success' ? 'bg-[#E8FADD] text-[#75E22E]' :
|
||||
data.status === 'pending' ? 'bg-[#FFF3DD] text-[#FDBA35]' : 'bg-[#FFE3E2] text-[#FF5450]'}
|
||||
${
|
||||
data.status === "success"
|
||||
? "bg-[#E8FADD] text-[#75E22E]"
|
||||
: data.status === "pending"
|
||||
? "bg-[#FFF3DD] text-[#FDBA35]"
|
||||
: "bg-[#FFE3E2] text-[#FF5450]"
|
||||
}
|
||||
`}
|
||||
variant='text'
|
||||
>
|
||||
{data.status === 'success' ? 'پرداخت شده' :
|
||||
data.status === 'pending' ? 'در انتظار' : 'پرداخت نشده'}
|
||||
</div>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<ul className="flex flex-col mt-[16px]">
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">شناسه:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={90} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{data.id}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={90} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{data.date}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={80} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{data.time}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={110} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">مبلغ پیش پرداخت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={40} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{data.amount} تومان</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
variant="text"
|
||||
>
|
||||
{data.status === "success"
|
||||
? "پرداخت شده"
|
||||
: data.status === "pending"
|
||||
? "در انتظار"
|
||||
: "پرداخت نشده"}
|
||||
</div>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<ul className="flex flex-col mt-[16px]">
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">شناسه:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={90} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{data.id}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
)
|
||||
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={90} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
تاریخ نوبت:
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{data.date}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={80} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{data.time}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block h-px w-[calc(100%-20px)] mx-auto bg-[#EFEFEF] my-[8px]"></span>
|
||||
<li className="flex items-center justify-between gap-[12px]">
|
||||
<TextLoading loading={loading} width={110} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
مبلغ پیش پرداخت:
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={40} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{data.amount} تومان
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default Card
|
||||
export default Card;
|
||||
|
||||
@@ -7,92 +7,116 @@ import CustomLoading from "@/app/component/loading/Custom";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
|
||||
function List({ user, loading }) {
|
||||
const tableHead = [
|
||||
"ردیف",
|
||||
"شناسه",
|
||||
"نام پزشک",
|
||||
"تاریخ",
|
||||
"ساعت",
|
||||
"مبلغ (تومان)",
|
||||
"وضعیت",
|
||||
];
|
||||
const centerTable = [0, 4, 5];
|
||||
|
||||
const tableHead = ['ردیف', 'شناسه', 'نام پزشک', 'تاریخ', 'ساعت', 'مبلغ (تومان)', 'وضعیت']
|
||||
const centerTable = [0, 4, 5];
|
||||
|
||||
return (
|
||||
<div className='!mt-[32px]'>
|
||||
<div className="hidden md:block w-full">
|
||||
<CustomTable
|
||||
tableHead={tableHead}
|
||||
centerTable={centerTable}
|
||||
>
|
||||
{user.turns.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className='!border-0 !border-b !border-[#DBDBDB]'
|
||||
>
|
||||
<TableCell className='!pr-[18px] !text-nowrap' align="center">
|
||||
<TextLoading width={15} height={18} loading={loading}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={30} height={18} loading={loading}>
|
||||
{row.id}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!pr-[18px] !text-nowrap' component="th" scope="row">
|
||||
<div className='flex items-center justify-start gap-[8px] !text-nowrap'>
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={row.image}
|
||||
alt='doctor'
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={loading}>
|
||||
{row.name}
|
||||
</TextLoading>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.time}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.amount}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!pr-[18px] !text-nowrap' align="right">
|
||||
<CustomLoading width={80} height={22} loading={loading}>
|
||||
<div
|
||||
className={`
|
||||
w-[124px] py-[4px] px-[4px] rounded-[4px] text-center text-[16px] font-medium cursor-pointer select-none
|
||||
${row.status === 'success' ? 'bg-[#E8FADD] text-[#75E22E]' :
|
||||
row.status === 'pending' ? 'bg-[#FFF3DD] text-[#FDBA35]' : 'bg-[#FFE3E2] text-[#FF5450]'}
|
||||
`}
|
||||
variant='text'
|
||||
>
|
||||
{row.status === 'success' ? 'پرداخت شده' :
|
||||
row.status === 'pending' ? 'در انتظار' : 'پرداخت نشده'}
|
||||
</div>
|
||||
</CustomLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</div>
|
||||
<ul className="flex md:hidden flex-col gap-y-[24px]">
|
||||
{user.turns.map((row, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
data={row}
|
||||
loading={loading}
|
||||
return (
|
||||
<div className="!mt-[32px]">
|
||||
<div className="hidden md:block w-full">
|
||||
<CustomTable tableHead={tableHead} centerTable={centerTable}>
|
||||
{user.turns.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className="!border-0 !border-b !border-[#DBDBDB]"
|
||||
>
|
||||
<TableCell className="!pr-[18px] !text-nowrap" align="center">
|
||||
<TextLoading width={15} height={18} loading={loading}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-start !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={30} height={18} loading={loading}>
|
||||
{row.id}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!pr-[18px] !text-nowrap"
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
<div className="flex items-center justify-start gap-[8px] !text-nowrap">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={row.image}
|
||||
alt="doctor"
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={loading}>
|
||||
{row.name}
|
||||
</TextLoading>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-start !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-center !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.time}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-center !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.amount}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className="!pr-[18px] !text-nowrap" align="right">
|
||||
<CustomLoading width={80} height={22} loading={loading}>
|
||||
<div
|
||||
className={`
|
||||
w-[124px] py-[4px] px-[4px] rounded-[4px] text-center text-[16px] font-medium cursor-pointer select-none
|
||||
${
|
||||
row.status === "success"
|
||||
? "bg-[#E8FADD] text-[#75E22E]"
|
||||
: row.status === "pending"
|
||||
? "bg-[#FFF3DD] text-[#FDBA35]"
|
||||
: "bg-[#FFE3E2] text-[#FF5450]"
|
||||
}
|
||||
`}
|
||||
variant="text"
|
||||
>
|
||||
{row.status === "success"
|
||||
? "پرداخت شده"
|
||||
: row.status === "pending"
|
||||
? "در انتظار"
|
||||
: "پرداخت نشده"}
|
||||
</div>
|
||||
</CustomLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</div>
|
||||
<ul className="flex md:hidden flex-col gap-y-[24px]">
|
||||
{user.turns.map((row, idx) => (
|
||||
<Card key={idx} data={row} loading={loading} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default List
|
||||
export default List;
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
import List from "./List";
|
||||
|
||||
function Transactions({ user, loading }) {
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#3B3B3B] hidden md:block text-[16px] font-bold">تاریخچه تراکنش ها</p>
|
||||
<List user={user} loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#3B3B3B] hidden md:block text-[16px] font-bold">
|
||||
تاریخچه تراکنش ها
|
||||
</p>
|
||||
<List user={user} loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Transactions
|
||||
export default Transactions;
|
||||
|
||||
@@ -1,67 +1,72 @@
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import TextLoading from "@/app/component/loading/Text"
|
||||
import ArrowLeftCardD from "@/components/icons/ArrowLeftCardD"
|
||||
import { Button } from "@mui/material"
|
||||
import Image from "next/image"
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import ArrowLeftCardD from "@/components/icons/ArrowLeftCardD";
|
||||
import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
|
||||
function Card({ data, loading, setIsTurnsDetails }) {
|
||||
return (
|
||||
<li
|
||||
className="shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] pb-[8px] bg-[#FFF] rounded-[8px]"
|
||||
>
|
||||
<div className="flex items-center justify-start gap-[8px] p-[12px]">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
width={32}
|
||||
height={32}
|
||||
alt="profile"
|
||||
src={data.image}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-[8px]">
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{data.name}</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={50} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">{data.expertise}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="w-full py-[8px] px-[12px] bg-[#FAFAFA] flex flex-col gap-[12px]">
|
||||
<li className="flex items-center justify-between">
|
||||
<TextLoading loading={loading} width={75} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={110} height={18}>
|
||||
<p className="text-[#525252] text-[14px] font-medium">{data.date}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<li className="flex items-center justify-between">
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#525252] text-[14px] font-medium">{data.time}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-[12px] flex items-center justify-between px-[12px]">
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">مبلغ پیش پرداخت: {data.amount} تومان</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={25}>
|
||||
<Button
|
||||
className="!flex !p-1 !items-center !justify-end !gap-[2px]"
|
||||
onClick={() => setIsTurnsDetails(true)}
|
||||
variant="text"
|
||||
>
|
||||
مشاهده
|
||||
<ArrowLeftCardD />
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</div>
|
||||
return (
|
||||
<li className="shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] pb-[8px] bg-[#FFF] rounded-[8px]">
|
||||
<div className="flex items-center justify-start gap-[8px] p-[12px]">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image width={32} height={32} alt="profile" src={data.image} />
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-[8px]">
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{data.name}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={50} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
{data.expertise}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="w-full py-[8px] px-[12px] bg-[#FAFAFA] flex flex-col gap-[12px]">
|
||||
<li className="flex items-center justify-between">
|
||||
<TextLoading loading={loading} width={75} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
تاریخ نوبت:
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={110} height={18}>
|
||||
<p className="text-[#525252] text-[14px] font-medium">
|
||||
{data.date}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
)
|
||||
<li className="flex items-center justify-between">
|
||||
<TextLoading loading={loading} width={65} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#525252] text-[14px] font-medium">
|
||||
{data.time}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="mt-[12px] flex items-center justify-between px-[12px]">
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">
|
||||
مبلغ پیش پرداخت: {data.amount} تومان
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={25}>
|
||||
<Button
|
||||
className="!flex !p-1 !items-center !justify-end !gap-[2px]"
|
||||
onClick={() => setIsTurnsDetails(true)}
|
||||
variant="text"
|
||||
>
|
||||
مشاهده
|
||||
<ArrowLeftCardD />
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default Card
|
||||
export default Card;
|
||||
|
||||
@@ -1,56 +1,56 @@
|
||||
import Tabs from '@/app/component/Tabs';
|
||||
import { Button } from '@mui/material'
|
||||
import Tabs from "@/app/component/Tabs";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
const listTab = ['نوبت های جاری', 'نوبت های انجام شده'];
|
||||
const listTab = ["نوبت های جاری", "نوبت های انجام شده"];
|
||||
|
||||
function Head({ value, setValue, handleChange }) {
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[32px] mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
|
||||
<div className='block w-full lg:hidden'>
|
||||
<Tabs
|
||||
style={{
|
||||
'.MuiTabs-indicator': {
|
||||
height: '2px',
|
||||
borderRadius: '16px',
|
||||
background: '#5559CE',
|
||||
},
|
||||
'& .MuiButtonBase-root': {
|
||||
color: '#7E7E7E',
|
||||
fontSize: '14px',
|
||||
fontStyle: 'normal',
|
||||
fontWeight: '700'
|
||||
},
|
||||
'& .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>
|
||||
<Button
|
||||
className='!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#EFEFEF] !text-[16px] !font-medium'
|
||||
variant='contained'
|
||||
>
|
||||
نوبت های جاری
|
||||
</Button>
|
||||
<Button
|
||||
className='!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#5559CE] !text-[16px] !font-medium'
|
||||
variant='outlined'
|
||||
>
|
||||
نوبت های انجام شده
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[32px] mt-[24px] sm:mt-[26px] md:mt-[28px] lg:mt-[30px]">
|
||||
<div className="block w-full lg:hidden">
|
||||
<Tabs
|
||||
style={{
|
||||
".MuiTabs-indicator": {
|
||||
height: "2px",
|
||||
borderRadius: "16px",
|
||||
background: "#5559CE",
|
||||
},
|
||||
"& .MuiButtonBase-root": {
|
||||
color: "#7E7E7E",
|
||||
fontSize: "14px",
|
||||
fontStyle: "normal",
|
||||
fontWeight: "700",
|
||||
},
|
||||
"& .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>
|
||||
<Button
|
||||
className="!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#EFEFEF] !text-[16px] !font-medium"
|
||||
variant="contained"
|
||||
>
|
||||
نوبت های جاری
|
||||
</Button>
|
||||
<Button
|
||||
className="!hidden lg:!flex !py-[8px] !shadow-none !px-[12px] !text-[#5559CE] !text-[16px] !font-medium"
|
||||
variant="outlined"
|
||||
>
|
||||
نوبت های انجام شده
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -1,97 +1,117 @@
|
||||
import CustomTable from '@/app/component/CustomTable';
|
||||
import ArrowLeftBlueD from '@/components/icons/ArrowLeftBlueD'
|
||||
import { Button, TableCell, TableRow } from '@mui/material'
|
||||
import Image from 'next/image'
|
||||
import Card from './Card';
|
||||
import CircularLoading from '@/app/component/loading/Circular';
|
||||
import TextLoading from '@/app/component/loading/Text';
|
||||
import CustomLoading from '@/app/component/loading/Custom';
|
||||
import CustomTable from "@/app/component/CustomTable";
|
||||
import ArrowLeftBlueD from "@/components/icons/ArrowLeftBlueD";
|
||||
import { Button, TableCell, TableRow } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import Card from "./Card";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
|
||||
function List({ user, loading, setIsTurnsDetails }) {
|
||||
const tableHead = [
|
||||
"ردیف",
|
||||
"نام پزشک",
|
||||
"تخصص",
|
||||
"تاریخ",
|
||||
"ساعت",
|
||||
"مبلغ (تومان)",
|
||||
"عملیات",
|
||||
];
|
||||
const centerTable = [0, 5];
|
||||
|
||||
const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'مبلغ (تومان)', 'عملیات']
|
||||
const centerTable = [0, 5];
|
||||
|
||||
return (
|
||||
<div className='!mt-[24px]'>
|
||||
<div className='hidden lg:block'>
|
||||
<CustomTable
|
||||
tableHead={tableHead}
|
||||
centerTable={centerTable}
|
||||
>
|
||||
{user.turns.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className='!border-0 !border-b !border-[#DBDBDB]'
|
||||
>
|
||||
<TableCell className='!pr-[18px] !text-nowrap' align="center">
|
||||
<TextLoading width={15} height={18} loading={loading}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!pr-[18px] !text-nowrap' component="th" scope="row">
|
||||
<div className='flex items-center justify-start gap-[8px] !text-nowrap'>
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={row.image}
|
||||
alt='doctor'
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={loading}>
|
||||
{row.name}
|
||||
</TextLoading>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.expertise}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-start !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.time}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-center !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.amount}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!pr-[18px] !text-nowrap' align="right">
|
||||
<CustomLoading width={80} height={22} loading={loading}>
|
||||
<Button
|
||||
className='!flex !p-1 !items-center !justify-start !gap-[4px] !text-[14px] !font-bold !text-[#5559CE]'
|
||||
onClick={() => setIsTurnsDetails(true)}
|
||||
variant='text'
|
||||
>
|
||||
مشاهده جزئیات
|
||||
<ArrowLeftBlueD />
|
||||
</Button>
|
||||
</CustomLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</div>
|
||||
<ul className='flex flex-col lg:hidden gap-[24px]'>
|
||||
{user.turns.map((item, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
data={item}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
return (
|
||||
<div className="!mt-[24px]">
|
||||
<div className="hidden lg:block">
|
||||
<CustomTable tableHead={tableHead} centerTable={centerTable}>
|
||||
{user.turns.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className="!border-0 !border-b !border-[#DBDBDB]"
|
||||
>
|
||||
<TableCell className="!pr-[18px] !text-nowrap" align="center">
|
||||
<TextLoading width={15} height={18} loading={loading}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!pr-[18px] !text-nowrap"
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
<div className="flex items-center justify-start gap-[8px] !text-nowrap">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={row.image}
|
||||
alt="doctor"
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={loading}>
|
||||
{row.name}
|
||||
</TextLoading>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-start !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.expertise}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-start !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-center !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.time}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-center !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.amount}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className="!pr-[18px] !text-nowrap" align="right">
|
||||
<CustomLoading width={80} height={22} loading={loading}>
|
||||
<Button
|
||||
className="!flex !p-1 !items-center !justify-start !gap-[4px] !text-[14px] !font-bold !text-[#5559CE]"
|
||||
onClick={() => setIsTurnsDetails(true)}
|
||||
variant="text"
|
||||
>
|
||||
مشاهده جزئیات
|
||||
<ArrowLeftBlueD />
|
||||
</Button>
|
||||
</CustomLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</div>
|
||||
<ul className="flex flex-col lg:hidden gap-[24px]">
|
||||
{user.turns.map((item, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
data={item}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default List
|
||||
export default List;
|
||||
|
||||
@@ -3,21 +3,22 @@ import Head from "./Head";
|
||||
import List from "./List";
|
||||
|
||||
function Turns({ user, setIsTurnsDetails, loading }) {
|
||||
const [value, setValue] = useState(0);
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
|
||||
const [value, setValue] = useState(0);
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#3B3B3B] hidden md:flex text-[16px] font-bold">تاریخچه نوبت ها</p>
|
||||
<Head
|
||||
value={value}
|
||||
setValue={setValue}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
<List user={user} loading={loading} setIsTurnsDetails={setIsTurnsDetails} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#3B3B3B] hidden md:flex text-[16px] font-bold">
|
||||
تاریخچه نوبت ها
|
||||
</p>
|
||||
<Head value={value} setValue={setValue} handleChange={handleChange} />
|
||||
<List
|
||||
user={user}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Turns
|
||||
export default Turns;
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
import { Button } from "@mui/material"
|
||||
import ModalDeleteComment from "./modal"
|
||||
import EditTurnsD from "@/components/icons/EditTurnsD"
|
||||
import ArrowLeftD from "@/components/icons/ArrowLeftD"
|
||||
import { Button } from "@mui/material";
|
||||
import ModalDeleteComment from "./modal";
|
||||
import EditTurnsD from "@/components/icons/EditTurnsD";
|
||||
import ArrowLeftD from "@/components/icons/ArrowLeftD";
|
||||
|
||||
function ButtonData({ loading }) {
|
||||
return (
|
||||
<div className="flex mt-[48px] md:mt-0 items-center justify-center md:justify-end gap-[16px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
<ModalDeleteComment loading={loading} />
|
||||
<Button
|
||||
className="!rounded-[4px] !shadow-none !gap-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]"
|
||||
disabled={loading}
|
||||
variant="contained"
|
||||
>
|
||||
<EditTurnsD />
|
||||
ویرایش نوبت
|
||||
<div className="mr-[4px]">
|
||||
<ArrowLeftD />
|
||||
</div>
|
||||
</Button>
|
||||
return (
|
||||
<div className="flex mt-[48px] md:mt-0 items-center justify-center md:justify-end gap-[16px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
<ModalDeleteComment loading={loading} />
|
||||
<Button
|
||||
className="!rounded-[4px] !shadow-none !gap-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]"
|
||||
disabled={loading}
|
||||
variant="contained"
|
||||
>
|
||||
<EditTurnsD />
|
||||
ویرایش نوبت
|
||||
<div className="mr-[4px]">
|
||||
<ArrowLeftD />
|
||||
</div>
|
||||
)
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ButtonData
|
||||
export default ButtonData;
|
||||
|
||||
@@ -1,97 +1,126 @@
|
||||
import CircularLoading from '@/app/component/loading/Circular';
|
||||
import TextLoading from '@/app/component/loading/Text';
|
||||
import CalendarD from '@/components/icons/CalendarD';
|
||||
import CallD from '@/components/icons/CallD';
|
||||
import ClockClinic from '@/components/icons/ClockClinic';
|
||||
import DownloadD from '@/components/icons/DownloadD';
|
||||
import LocationClinic from '@/components/icons/LocationClinic';
|
||||
import RoutingC from '@/components/icons/RoutingC';
|
||||
import TicketD from '@/components/icons/TicketD';
|
||||
import { Button } from '@mui/material';
|
||||
import Image from 'next/image'
|
||||
import React from 'react'
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import CalendarD from "@/components/icons/CalendarD";
|
||||
import CallD from "@/components/icons/CallD";
|
||||
import ClockClinic from "@/components/icons/ClockClinic";
|
||||
import DownloadD from "@/components/icons/DownloadD";
|
||||
import LocationClinic from "@/components/icons/LocationClinic";
|
||||
import RoutingC from "@/components/icons/RoutingC";
|
||||
import TicketD from "@/components/icons/TicketD";
|
||||
import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
|
||||
function DetailLg({ user, loading }) {
|
||||
const data = user.turns[1];
|
||||
|
||||
const data = user.turns[1];
|
||||
|
||||
return (
|
||||
<div className='lg:mt-[18px] hidden md:block'>
|
||||
<div className='flex md:mt-[24px] lg:mt-0 items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]'>
|
||||
<CircularLoading width={95} height={95} loading={loading}>
|
||||
<Image
|
||||
width={95}
|
||||
height={95}
|
||||
alt='profile'
|
||||
src={data.image}
|
||||
className='w-[32px] h-[32px] sm:w-[53px] sm:h-[53px] md:w-[74px] md:h-[74px] lg:w-[95px] lg:h-[95px]'
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className='flex flex-col items-start justify-center gap-[20px]'>
|
||||
<TextLoading loading={loading} width={70} height={18}>
|
||||
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>{data.name}</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={18}>
|
||||
<p className='text-[#616161] text-[14px] md:text-[15px] lg:text-[16px] font-medium'>تخصص: {data.expertise}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<ul className='flex mt-[16px] sm:mt-[21px] md:mt-[27px] lg:mt-[32px] mb-[24px] flex-col gap-[24px] items-start justify-start'>
|
||||
<li className='flex items-center justify-start flex-wrap gap-[16px] lg:gap-[56px]'>
|
||||
<TextLoading loading={loading} width={100} height={20}>
|
||||
<div className='flex items-start justify-start gap-[4px]'>
|
||||
<CalendarD />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>تاریخ نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.date_turn}</span></p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={100} height={20}>
|
||||
<div className='flex items-start justify-start gap-[4px]'>
|
||||
<ClockClinic />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>زمان نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>ساعت {data.time}</span></p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<li className='flex flex-wrap items-center justify-start gap-y-[12px] gap-[32px]'>
|
||||
<TextLoading loading={loading} width={250} height={20}>
|
||||
<div className='flex items-start justify-start gap-[4px]'>
|
||||
<LocationClinic />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>آدرس: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.location}</span></p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={120} height={30}>
|
||||
<Button
|
||||
className='!py-[8px] !px-[12px] !gap-[8px]'
|
||||
variant='text'
|
||||
>
|
||||
<RoutingC />
|
||||
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<li className='flex items-center justify-start gap-[4px]'>
|
||||
<CallD />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>تلفن: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.phone}</span></p>
|
||||
</li>
|
||||
</TextLoading>
|
||||
</ul>
|
||||
<div className='flex items-center gap-[4px] w-fit'>
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<TicketD />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<Button
|
||||
className='!px-[12px] !hidden md:!flex !mt-[24px] !py-[8px] !border !border-solid !border-[#D7D7D7] !rounded-[4px] !w-fit !items-center !justify-center !gap-[4px]'
|
||||
variant='outlined'
|
||||
>
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<DownloadD />
|
||||
<p className='text-[#616161] text-[16px] font-medium'>دانلود اطلاعات نوبت</p>
|
||||
</TextLoading>
|
||||
</Button>
|
||||
return (
|
||||
<div className="lg:mt-[18px] hidden md:block">
|
||||
<div className="flex md:mt-[24px] lg:mt-0 items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]">
|
||||
<CircularLoading width={95} height={95} loading={loading}>
|
||||
<Image
|
||||
width={95}
|
||||
height={95}
|
||||
alt="profile"
|
||||
src={data.image}
|
||||
className="w-[32px] h-[32px] sm:w-[53px] sm:h-[53px] md:w-[74px] md:h-[74px] lg:w-[95px] lg:h-[95px]"
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col items-start justify-center gap-[20px]">
|
||||
<TextLoading loading={loading} width={70} height={18}>
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
|
||||
{data.name}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={80} height={18}>
|
||||
<p className="text-[#616161] text-[14px] md:text-[15px] lg:text-[16px] font-medium">
|
||||
تخصص: {data.expertise}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
<ul className="flex mt-[16px] sm:mt-[21px] md:mt-[27px] lg:mt-[32px] mb-[24px] flex-col gap-[24px] items-start justify-start">
|
||||
<li className="flex items-center justify-start flex-wrap gap-[16px] lg:gap-[56px]">
|
||||
<TextLoading loading={loading} width={100} height={20}>
|
||||
<div className="flex items-start justify-start gap-[4px]">
|
||||
<CalendarD />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[20px] font-medium">
|
||||
تاریخ نوبت:{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold">
|
||||
{data.date_turn}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={100} height={20}>
|
||||
<div className="flex items-start justify-start gap-[4px]">
|
||||
<ClockClinic />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[20px] font-medium">
|
||||
زمان نوبت:{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold">
|
||||
ساعت {data.time}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<li className="flex flex-wrap items-center justify-start gap-y-[12px] gap-[32px]">
|
||||
<TextLoading loading={loading} width={250} height={20}>
|
||||
<div className="flex items-start justify-start gap-[4px]">
|
||||
<LocationClinic />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[16px] font-normal">
|
||||
آدرس:{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal">
|
||||
{data.location}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={120} height={30}>
|
||||
<Button className="!py-[8px] !px-[12px] !gap-[8px]" variant="text">
|
||||
<RoutingC />
|
||||
<p className="text-[#5559CE] text-[14px] font-medium">
|
||||
مسیریابی آدرس
|
||||
</p>
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<li className="flex items-center justify-start gap-[4px]">
|
||||
<CallD />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[16px] font-normal">
|
||||
تلفن:{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal">
|
||||
{data.phone}
|
||||
</span>
|
||||
</p>
|
||||
</li>
|
||||
</TextLoading>
|
||||
</ul>
|
||||
<div className="flex items-center gap-[4px] w-fit">
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<TicketD />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[20px] font-medium">
|
||||
مبلغ پرداخت شده :{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold">
|
||||
{data.amount_paid} تومان
|
||||
</span>
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<Button
|
||||
className="!px-[12px] !hidden md:!flex !mt-[24px] !py-[8px] !border !border-solid !border-[#D7D7D7] !rounded-[4px] !w-fit !items-center !justify-center !gap-[4px]"
|
||||
variant="outlined"
|
||||
>
|
||||
<TextLoading loading={loading} width={150} height={18}>
|
||||
<DownloadD />
|
||||
<p className="text-[#616161] text-[16px] font-medium">
|
||||
دانلود اطلاعات نوبت
|
||||
</p>
|
||||
</TextLoading>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailLg
|
||||
export default DetailLg;
|
||||
|
||||
@@ -1,88 +1,105 @@
|
||||
import RoutingC from '@/components/icons/RoutingC';
|
||||
import TicketD from '@/components/icons/TicketD';
|
||||
import { Button } from '@mui/material';
|
||||
import Image from 'next/image'
|
||||
import React from 'react'
|
||||
import ButtonData from './ButtonData';
|
||||
import CircularLoading from '@/app/component/loading/Circular';
|
||||
import TextLoading from '@/app/component/loading/Text';
|
||||
import RoutingC from "@/components/icons/RoutingC";
|
||||
import TicketD from "@/components/icons/TicketD";
|
||||
import { Button } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import ButtonData from "./ButtonData";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
|
||||
function DetailSm({ user, loading }) {
|
||||
const data = user.turns[1];
|
||||
|
||||
const data = user.turns[1];
|
||||
|
||||
return (
|
||||
<div className='mt-[20px] block md:hidden'>
|
||||
<div className='flex items-center justify-start gap-[8px]'>
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={data.image}
|
||||
alt='profile'
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<div className='flex flex-col justify-center items-start gap-[8px]'>
|
||||
<TextLoading loading={loading} width={60} height={14}>
|
||||
<p className='text-[#616161] text-[14px] font-medium'>{data.name}</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={70} height={14}>
|
||||
<p className='text-[#7E7E7E] text-[14px] font-normal'>{data.expertise}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
<ul className='flex w-full flex-col items-start justify-start mt-[16px]'>
|
||||
<li className="flex items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={70} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[16px] font-normal">تاریخ نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={55} height={16}>
|
||||
<p className="text-[#525252] text-[16px] font-medium">{data.date}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
|
||||
<li className="flex flex-wrap items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={80} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[16px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={16}>
|
||||
<p className="text-[#525252] text-[16px] font-medium">{data.time}</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
|
||||
<li className="flex flex-wrap gap-x-[12px] gap-y-[12px] items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={200} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">آدرس:<span className='text-[#616161]'>{data.location}</span></p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={130} height={40}>
|
||||
<Button
|
||||
className='!py-[8px] !border-[#EFEFEF] !px-[12px] !gap-[8px]'
|
||||
variant='outlined'
|
||||
>
|
||||
<RoutingC />
|
||||
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<TextLoading loading={loading} width={100} height={18}>
|
||||
<p className='text-[#7E7E7E] text-[14px] font-normal mt-[12px]'>تلفن: <span className='text-[#616161]'>{data.phone}</span></p>
|
||||
</TextLoading>
|
||||
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
|
||||
<li className='flex items-center justify-between w-full'>
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<div className='flex items-center gap-[4px] w-fit'>
|
||||
<TicketD />
|
||||
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className='text-[#616161] text-[14px] font-bold'>{data.amount_paid} تومان</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
<ButtonData loading={loading} />
|
||||
return (
|
||||
<div className="mt-[20px] block md:hidden">
|
||||
<div className="flex items-center justify-start gap-[8px]">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image src={data.image} alt="profile" height={32} width={32} />
|
||||
</CircularLoading>
|
||||
<div className="flex flex-col justify-center items-start gap-[8px]">
|
||||
<TextLoading loading={loading} width={60} height={14}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{data.name}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={70} height={14}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
{data.expertise}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
<ul className="flex w-full flex-col items-start justify-start mt-[16px]">
|
||||
<li className="flex items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={70} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[16px] font-normal">
|
||||
تاریخ نوبت:
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={55} height={16}>
|
||||
<p className="text-[#525252] text-[16px] font-medium">
|
||||
{data.date}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]"></span>
|
||||
<li className="flex flex-wrap items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={80} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[16px] font-normal">ساعت نوبت:</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={16}>
|
||||
<p className="text-[#525252] text-[16px] font-medium">
|
||||
{data.time}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<span className="block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]"></span>
|
||||
<li className="flex flex-wrap gap-x-[12px] gap-y-[12px] items-center w-full justify-between">
|
||||
<TextLoading loading={loading} width={200} height={16}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
آدرس:<span className="text-[#616161]">{data.location}</span>
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={130} height={40}>
|
||||
<Button
|
||||
className="!py-[8px] !border-[#EFEFEF] !px-[12px] !gap-[8px]"
|
||||
variant="outlined"
|
||||
>
|
||||
<RoutingC />
|
||||
<p className="text-[#5559CE] text-[14px] font-medium">
|
||||
مسیریابی آدرس
|
||||
</p>
|
||||
</Button>
|
||||
</TextLoading>
|
||||
</li>
|
||||
<TextLoading loading={loading} width={100} height={18}>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal mt-[12px]">
|
||||
تلفن: <span className="text-[#616161]">{data.phone}</span>
|
||||
</p>
|
||||
</TextLoading>
|
||||
<span className="block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]"></span>
|
||||
<li className="flex items-center justify-between w-full">
|
||||
<TextLoading loading={loading} width={120} height={18}>
|
||||
<div className="flex items-center gap-[4px] w-fit">
|
||||
<TicketD />
|
||||
<p className="text-[#616161] text-[14px] lg:text-[20px] font-medium">
|
||||
مبلغ پرداخت شده :{" "}
|
||||
<span className="text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold">
|
||||
{data.amount_paid} تومان
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</TextLoading>
|
||||
<TextLoading loading={loading} width={60} height={18}>
|
||||
<p className="text-[#616161] text-[14px] font-bold">
|
||||
{data.amount_paid} تومان
|
||||
</p>
|
||||
</TextLoading>
|
||||
</li>
|
||||
</ul>
|
||||
<ButtonData loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailSm
|
||||
export default DetailSm;
|
||||
|
||||
@@ -4,22 +4,24 @@ import ButtonData from "./ButtonData";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
|
||||
function Head({ user, setIsTurnsDetails, loading }) {
|
||||
return (
|
||||
<div className="hidden md:flex flex-wrap gap-x-[24px] gap-y-[12px] items-center justify-between">
|
||||
<div className="flex items-center justify-start gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
<Button
|
||||
onClick={() => setIsTurnsDetails(false)}
|
||||
className="!p-[6px] !border !border-solid !border-[#EFEFEF] !rounded-[4px] !min-w-0"
|
||||
>
|
||||
<ArrowRightS />
|
||||
</Button>
|
||||
<TextLoading width={70} height={20} loading={loading}>
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">جزئیات نوبت شما</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<ButtonData loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="hidden md:flex flex-wrap gap-x-[24px] gap-y-[12px] items-center justify-between">
|
||||
<div className="flex items-center justify-start gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
<Button
|
||||
onClick={() => setIsTurnsDetails(false)}
|
||||
className="!p-[6px] !border !border-solid !border-[#EFEFEF] !rounded-[4px] !min-w-0"
|
||||
>
|
||||
<ArrowRightS />
|
||||
</Button>
|
||||
<TextLoading width={70} height={20} loading={loading}>
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
|
||||
جزئیات نوبت شما
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<ButtonData loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -1,20 +1,19 @@
|
||||
|
||||
import DetailLg from "./DetailLg"
|
||||
import DetailSm from "./DetailSm"
|
||||
import Head from "./Head"
|
||||
import DetailLg from "./DetailLg";
|
||||
import DetailSm from "./DetailSm";
|
||||
import Head from "./Head";
|
||||
|
||||
function IsTurnsDetails({ user, setIsTurnsDetails, loading }) {
|
||||
return (
|
||||
<div className="md:py-[20px] md:px-[24px] opacity-page">
|
||||
<Head
|
||||
user={user}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
<DetailLg user={user} loading={loading} />
|
||||
<DetailSm user={user} loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="md:py-[20px] md:px-[24px] opacity-page">
|
||||
<Head
|
||||
user={user}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
<DetailLg user={user} loading={loading} />
|
||||
<DetailSm user={user} loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default IsTurnsDetails
|
||||
export default IsTurnsDetails;
|
||||
|
||||
@@ -1,69 +1,65 @@
|
||||
import { useState } from 'react';
|
||||
import { Box, Button, Modal } from '@mui/material';
|
||||
import { styleDefault } from '@/mui';
|
||||
import CloseModalD from '@/components/icons/CloseModalD';
|
||||
import { useState } from "react";
|
||||
import { Box, Button, Modal } from "@mui/material";
|
||||
import { styleDefault } from "@/mui";
|
||||
import CloseModalD from "@/components/icons/CloseModalD";
|
||||
|
||||
function ModalDeleteComment({ loading }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Button Modal */}
|
||||
<Button
|
||||
className={`
|
||||
${!loading && '!border-[#828DE0]'}
|
||||
return (
|
||||
<div>
|
||||
{/* Button Modal */}
|
||||
<Button
|
||||
className={`
|
||||
${!loading && "!border-[#828DE0]"}
|
||||
!rounded-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]
|
||||
`}
|
||||
disabled={loading}
|
||||
onClick={handleOpen}
|
||||
variant="outlined"
|
||||
>
|
||||
لغو کردن نوبت
|
||||
disabled={loading}
|
||||
onClick={handleOpen}
|
||||
variant="outlined"
|
||||
>
|
||||
لغو کردن نوبت
|
||||
</Button>
|
||||
{/* Content Modal */}
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
|
||||
>
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
|
||||
لغو نوبت
|
||||
</p>
|
||||
<Button onClick={handleClose} className="!p-1" variant="text">
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
{/* Content Modal */}
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
</div>
|
||||
<span className="block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]"></span>
|
||||
<p className="text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal">
|
||||
آیا از لغو کردن نوبت مطمئن هستید؟
|
||||
</p>
|
||||
<div className="flex items-center justify-end gap-[16px] mt-[12px]">
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleClose}
|
||||
className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium"
|
||||
>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
|
||||
>
|
||||
<div className='flex items-center justify-between w-full'>
|
||||
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>لغو نوبت</p>
|
||||
<Button
|
||||
onClick={handleClose}
|
||||
className='!p-1'
|
||||
variant='text'
|
||||
>
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
</div>
|
||||
<span className='block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]'></span>
|
||||
<p className='text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal'>آیا از لغو کردن نوبت مطمئن هستید؟</p>
|
||||
<div className='flex items-center justify-end gap-[16px] mt-[12px]'>
|
||||
<Button
|
||||
variant='outlined'
|
||||
onClick={handleClose}
|
||||
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium'
|
||||
>
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant='contained'
|
||||
onClick={handleClose}
|
||||
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium'
|
||||
>
|
||||
لغو نوبت
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleClose}
|
||||
className="!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium"
|
||||
>
|
||||
لغو نوبت
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalDeleteComment
|
||||
export default ModalDeleteComment;
|
||||
|
||||
Reference in New Issue
Block a user