handle api register & change design dashboard tabs and page disease
This commit is contained in:
Ehsan
@@ -0,0 +1,7 @@
|
||||
function Allergies() {
|
||||
return (
|
||||
<div>Allergies</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Allergies
|
||||
@@ -1,74 +0,0 @@
|
||||
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
|
||||
dir="ltr"
|
||||
value={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;
|
||||
@@ -1,19 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default Comments;
|
||||
@@ -1,63 +0,0 @@
|
||||
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);
|
||||
|
||||
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] sm-modal md:!w-fit md:!min-w-[552px]"
|
||||
>
|
||||
<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-[12px] md:!text-[14px] lg:!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-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
|
||||
>
|
||||
حذف نظر
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalDeleteComment;
|
||||
@@ -1,20 +0,0 @@
|
||||
function Content({ isConfirmed, children, title }) {
|
||||
return (
|
||||
<div className="flex w-full flex-col items-start justify-start gap-[8px] sm:gap-[3px] md:gap-[7px] lg:gap-[9px]">
|
||||
<div className="flex min-h-[32px] items-center justify-start gap-[8px] md:gap-[6px] lg:gap-[4px]">
|
||||
<p className="text-[#525252] text-[14px] font-medium">{title}</p>
|
||||
{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;
|
||||
@@ -1,69 +0,0 @@
|
||||
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 handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default DateBirthday;
|
||||
@@ -1,144 +0,0 @@
|
||||
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, changeData, updateSelect }) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[24px]">
|
||||
<Content title="شماره موبایل" isConfirmed={true}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
type="number"
|
||||
changeData={changeData}
|
||||
data={data?.phone}
|
||||
name="phone"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="کد ملی" isConfirmed={false}>
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
type="number"
|
||||
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}
|
||||
type="number"
|
||||
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}
|
||||
type="number"
|
||||
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}
|
||||
type="number"
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.work_phone}
|
||||
name="work_phone"
|
||||
/>
|
||||
</Content>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Form;
|
||||
@@ -1,53 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import Form from "./Form";
|
||||
import { Button } from "@mui/material";
|
||||
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
|
||||
|
||||
function DetailUser({ user }) {
|
||||
const [data, setData] = useState({
|
||||
phone: { value: user.phone, isEdit: true },
|
||||
national_code: { value: user.national_code, isEdit: true },
|
||||
name: { value: user.name, isEdit: true },
|
||||
date_of_birth: { value: user.date_of_birth, isEdit: true },
|
||||
father_name: { value: user.father_name, isEdit: true },
|
||||
insurance_number: { value: user.insurance_number, isEdit: true },
|
||||
home_phone: { value: user.home_phone, isEdit: true },
|
||||
work_phone: { value: user.work_phone, isEdit: true },
|
||||
});
|
||||
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 updateSelect = (event, name) =>
|
||||
setSelected({ ...selected, [name]: event });
|
||||
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form data={data} 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>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailUser;
|
||||
@@ -1,34 +0,0 @@
|
||||
export const gender = [
|
||||
{ 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 },
|
||||
];
|
||||
|
||||
export const marital_status = [
|
||||
{ label: "متاهل", id: 10 },
|
||||
{ label: "مجرد", id: 20 },
|
||||
];
|
||||
|
||||
export const education = [
|
||||
{ label: "دیپلم", id: 10 },
|
||||
{ label: "فوق دیپلم", id: 20 },
|
||||
{ label: "لیسانس", id: 30 },
|
||||
{ label: "کارشناسی ارشد", id: 40 },
|
||||
];
|
||||
|
||||
export const job = [
|
||||
{ label: "آزاد", id: 10 },
|
||||
{ label: "دولتی", id: 20 },
|
||||
];
|
||||
|
||||
export const insurance = [
|
||||
{ label: "بیمه 1", id: 10 },
|
||||
{ label: "بیمه 2", id: 20 },
|
||||
{ label: "بیمه 3", id: 30 },
|
||||
];
|
||||
@@ -0,0 +1,53 @@
|
||||
import CustomTable from "@/app/component/CustomTable";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import { TableCell, TableRow } from "@mui/material";
|
||||
|
||||
function Disease({ data }) {
|
||||
const tableHead = ["شماره", "اسم", "وضعیت"];
|
||||
const centerTable = [0, 4];
|
||||
|
||||
return (
|
||||
<div className="hidden md:flex">
|
||||
<CustomTable
|
||||
zeroRadius={true}
|
||||
tableHead={tableHead}
|
||||
centerTable={centerTable}
|
||||
>
|
||||
{data.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
|
||||
>
|
||||
<TableCell
|
||||
className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
|
||||
align="center"
|
||||
>
|
||||
<TextLoading width={15} height={18} loading={false}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
|
||||
align="center"
|
||||
>
|
||||
<TextLoading width={15} height={18} loading={false}>
|
||||
{row.name}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
|
||||
align="center"
|
||||
>
|
||||
<TextLoading width={15} height={18} loading={false}>
|
||||
{row.status}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Disease;
|
||||
@@ -0,0 +1,7 @@
|
||||
function FamilyHistory() {
|
||||
return (
|
||||
<div>FamilyHistory</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FamilyHistory
|
||||
@@ -0,0 +1,7 @@
|
||||
function Medications() {
|
||||
return (
|
||||
<div>Medications</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Medications
|
||||
@@ -1,44 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default Message;
|
||||
@@ -1,19 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default Messages;
|
||||
@@ -0,0 +1,7 @@
|
||||
function Relatives() {
|
||||
return (
|
||||
<div>Relatives</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Relatives
|
||||
@@ -0,0 +1,7 @@
|
||||
function Surgeries() {
|
||||
return (
|
||||
<div>Surgeries</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Surgeries
|
||||
@@ -1,92 +0,0 @@
|
||||
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={`
|
||||
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]"
|
||||
}
|
||||
`}
|
||||
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;
|
||||
@@ -1,122 +0,0 @@
|
||||
import CustomTable from "@/app/component/CustomTable";
|
||||
import { TableCell, TableRow } from "@mui/material";
|
||||
import Image from "next/image";
|
||||
import Card from "./Card";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
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];
|
||||
|
||||
return (
|
||||
<div className="!mt-[32px]">
|
||||
<div className="hidden md:block w-full">
|
||||
<CustomTable tableHead={tableHead} centerTable={centerTable}>
|
||||
{user.turns.done.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 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.done.map((row, idx) => (
|
||||
<Card key={idx} data={row} loading={loading} />
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default List;
|
||||
@@ -1,14 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default Transactions;
|
||||
@@ -1,72 +0,0 @@
|
||||
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>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default Card;
|
||||
@@ -1,68 +0,0 @@
|
||||
import Tabs from "@/app/component/Tabs";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
const listTab = ["نوبت های جاری", "نوبت های انجام شده"];
|
||||
|
||||
function Head({ isDone, setIsDone }) {
|
||||
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",
|
||||
},
|
||||
}}
|
||||
color="#5559CE"
|
||||
listTab={listTab}
|
||||
value={isDone ? 0 : 1}
|
||||
handleChange={(e, value) => setIsDone(!!!value)}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
className={`!hidden lg:!flex !border !border-solid !py-[8px] !shadow-none !px-[12px] !text-[16px] !font-medium
|
||||
${
|
||||
isDone
|
||||
? "!bg-transparent !border-[#5559CE] !text-[#5559CE]"
|
||||
: "!text-[#EFEFEF] !border-transparent"
|
||||
}`}
|
||||
onClick={() => setIsDone(!isDone)}
|
||||
variant="contained"
|
||||
>
|
||||
نوبت های جاری
|
||||
</Button>
|
||||
<Button
|
||||
className={`!hidden lg:!flex !border !border-solid !py-[8px] !shadow-none !px-[12px] !text-[16px] !font-medium
|
||||
${
|
||||
!isDone
|
||||
? "!bg-transparent !border-[#5559CE] !text-[#5559CE]"
|
||||
: "!text-[#EFEFEF] !border-transparent"
|
||||
}`}
|
||||
onClick={() => setIsDone(!isDone)}
|
||||
variant="contained"
|
||||
>
|
||||
نوبت های انجام شده
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head;
|
||||
@@ -1,117 +0,0 @@
|
||||
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];
|
||||
|
||||
return (
|
||||
<div className="!mt-[24px]">
|
||||
<div className="hidden lg:block">
|
||||
<CustomTable tableHead={tableHead} centerTable={centerTable}>
|
||||
{user.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.map((item, idx) => (
|
||||
<Card
|
||||
key={idx}
|
||||
data={item}
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default List;
|
||||
@@ -1,23 +0,0 @@
|
||||
import { useState } from "react";
|
||||
import Head from "./Head";
|
||||
import List from "./List";
|
||||
|
||||
function Turns({ user, setIsTurnsDetails, loading }) {
|
||||
const [isDone, setIsDone] = useState(true);
|
||||
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#3B3B3B] hidden md:flex text-[16px] font-bold">
|
||||
تاریخچه نوبت ها
|
||||
</p>
|
||||
<Head isDone={isDone} setIsDone={setIsDone} />
|
||||
<List
|
||||
loading={loading}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
user={user.turns[isDone ? "done" : "current"]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Turns;
|
||||
@@ -1,25 +0,0 @@
|
||||
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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ButtonData;
|
||||
@@ -1,126 +0,0 @@
|
||||
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.done[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>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailLg;
|
||||
@@ -1,105 +0,0 @@
|
||||
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.done[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} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DetailSm;
|
||||
@@ -1,27 +0,0 @@
|
||||
import ArrowRightS from "@/components/icons/ArrowRightS";
|
||||
import { Button } from "@mui/material";
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head;
|
||||
@@ -1,19 +0,0 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default IsTurnsDetails;
|
||||
@@ -1,65 +0,0 @@
|
||||
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);
|
||||
|
||||
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"
|
||||
>
|
||||
لغو کردن نوبت
|
||||
</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>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalDeleteComment;
|
||||
Reference in New Issue
Block a user