add prettier formatter to all file
This commit is contained in:
Ehsan
@@ -1,61 +1,66 @@
|
||||
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 ColTable({ data, loading }) {
|
||||
return (
|
||||
<ul className="flex md:hidden flex-col gap-[16px]">
|
||||
{data.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="bg-[#FFF] p-[12px] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)]"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className='flex items-center justify-start gap-[8px] !text-nowrap'>
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image
|
||||
src={item.image}
|
||||
alt='doctor'
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={loading}>
|
||||
{item.name}
|
||||
</TextLoading>
|
||||
</div>
|
||||
<TextLoading width={105} height={18} loading={loading}>
|
||||
<p className="px-[8px] py-[4px] text-[#F17732] text-[14px] font-medium bg-[rgba(255,216,197,0.50)] rounded-[4px]">
|
||||
تعداد نوبت: {item.number_of_turns}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="flex flex-col mt-[16px]">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">تخصص:</p>
|
||||
<TextLoading width={90} height={18} loading={loading}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{item.expertise}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<span className="block h-px w-full bg-[#EFEFEF] my-[12px]"></span>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
|
||||
<TextLoading width={85} height={18} loading={loading}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{item.date}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<span className="block h-px w-full bg-[#EFEFEF] my-[12px]"></span>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
|
||||
<TextLoading width={60} height={18} loading={loading}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{item.hour}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
return (
|
||||
<ul className="flex md:hidden flex-col gap-[16px]">
|
||||
{data.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="bg-[#FFF] p-[12px] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)]"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center justify-start gap-[8px] !text-nowrap">
|
||||
<CircularLoading width={32} height={32} loading={loading}>
|
||||
<Image src={item.image} alt="doctor" height={32} width={32} />
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={loading}>
|
||||
{item.name}
|
||||
</TextLoading>
|
||||
</div>
|
||||
<TextLoading width={105} height={18} loading={loading}>
|
||||
<p className="px-[8px] py-[4px] text-[#F17732] text-[14px] font-medium bg-[rgba(255,216,197,0.50)] rounded-[4px]">
|
||||
تعداد نوبت: {item.number_of_turns}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="flex flex-col mt-[16px]">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">تخصص:</p>
|
||||
<TextLoading width={90} height={18} loading={loading}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{item.expertise}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<span className="block h-px w-full bg-[#EFEFEF] my-[12px]"></span>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
تاریخ نوبت:
|
||||
</p>
|
||||
<TextLoading width={85} height={18} loading={loading}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{item.date}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<span className="block h-px w-full bg-[#EFEFEF] my-[12px]"></span>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">
|
||||
ساعت نوبت:
|
||||
</p>
|
||||
<TextLoading width={60} height={18} loading={loading}>
|
||||
<p className="text-[#616161] text-[14px] font-medium">
|
||||
{item.hour}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default ColTable
|
||||
export default ColTable;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
function ContentText({ children, text }) {
|
||||
return (
|
||||
<div className="flex flex-col items-start justify-start gap-[12px] md:gap-[14px] lg:gap-[16px] content-text-panel">
|
||||
<p className="text-[#525252] text-[14px] font-medium">{text}</p>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex flex-col items-start justify-start gap-[12px] md:gap-[14px] lg:gap-[16px] content-text-panel">
|
||||
<p className="text-[#525252] text-[14px] font-medium">{text}</p>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ContentText
|
||||
export default ContentText;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
@@ -12,47 +12,58 @@ import GeneralInformation from "./listMenu/generalInformation";
|
||||
import ArrowRightPH from "@/components/icons/ArrowRightPH";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
const listTab = ['اطلاعات عمومی', 'اطلاعات مطب', 'نوبت ها', 'روزهای کاری', 'روزهای خاص'];
|
||||
const listTab = [
|
||||
"اطلاعات عمومی",
|
||||
"اطلاعات مطب",
|
||||
"نوبت ها",
|
||||
"روزهای کاری",
|
||||
"روزهای خاص",
|
||||
];
|
||||
|
||||
function AddDoctorPage() {
|
||||
const [value, setValue] = useState(3);
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const [value, setValue] = useState(3);
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
const components = [
|
||||
<GeneralInformation />,
|
||||
<OfficeInformation />,
|
||||
<Turns />,
|
||||
<WorkingDays />,
|
||||
<SpecialDays />,
|
||||
];
|
||||
|
||||
const components = [
|
||||
<GeneralInformation />,
|
||||
<OfficeInformation />,
|
||||
<Turns />,
|
||||
<WorkingDays />,
|
||||
<SpecialDays />
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#525252] text-[20px] font-bold hidden md:flex">پروفایل من</p>
|
||||
<Button
|
||||
onClick={() => setOpen(true)}
|
||||
className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
|
||||
>
|
||||
<ArrowRightPH />
|
||||
<p className="text-[#525252] text-[14px] font-bold">{listTab[value]}</p>
|
||||
</Button>
|
||||
<div className="rounded-[8px] mt-0 md:mt-[24px] bg-transparent md:bg-[#FFF] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] pt-0 md:pt-[12px] pb-0 md:pb-[12px] lg:pb-[24px] px-0 md:px-[14px] lg:px-[26px] xl:px-[56px]">
|
||||
<ListMenu
|
||||
open={open}
|
||||
value={value}
|
||||
listTab={listTab}
|
||||
setOpen={setOpen}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
<div className={`mt-[24px] ${value !== 4 ? 'mx-0 md:-[14px] lg:mx-[26px] xl:mx-[56px]' : 'mx-0'}`}>
|
||||
{components[value]}
|
||||
</div>
|
||||
</div>
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#525252] text-[20px] font-bold hidden md:flex">
|
||||
پروفایل من
|
||||
</p>
|
||||
<Button
|
||||
onClick={() => setOpen(true)}
|
||||
className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
|
||||
>
|
||||
<ArrowRightPH />
|
||||
<p className="text-[#525252] text-[14px] font-bold">{listTab[value]}</p>
|
||||
</Button>
|
||||
<div className="rounded-[8px] mt-0 md:mt-[24px] bg-transparent md:bg-[#FFF] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] pt-0 md:pt-[12px] pb-0 md:pb-[12px] lg:pb-[24px] px-0 md:px-[14px] lg:px-[26px] xl:px-[56px]">
|
||||
<ListMenu
|
||||
open={open}
|
||||
value={value}
|
||||
listTab={listTab}
|
||||
setOpen={setOpen}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
<div
|
||||
className={`mt-[24px] ${
|
||||
value !== 4 ? "mx-0 md:-[14px] lg:mx-[26px] xl:mx-[56px]" : "mx-0"
|
||||
}`}
|
||||
>
|
||||
{components[value]}
|
||||
</div>
|
||||
)
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AddDoctorPage
|
||||
export default AddDoctorPage;
|
||||
|
||||
@@ -1,45 +1,45 @@
|
||||
import ArrowLeftPH from "@/components/icons/ArrowLeftPH"
|
||||
import { Button } from "@mui/material"
|
||||
import ArrowLeftPH from "@/components/icons/ArrowLeftPH";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
function Menu({ value, open, setOpen, listTab, handleChange }) {
|
||||
return (
|
||||
<ul
|
||||
className={`
|
||||
return (
|
||||
<ul
|
||||
className={`
|
||||
flex bg-[#FAFAFA] flex-col justify-start items-start
|
||||
fixed h-screen w-full z-50 top-[80px] transition-all duration-500
|
||||
${open ?
|
||||
'right-0' :
|
||||
'-right-full'
|
||||
}
|
||||
${open ? "right-0" : "-right-full"}
|
||||
`}
|
||||
>
|
||||
{listTab.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="w-[calc(100%-32px)] mx-[16px]"
|
||||
>
|
||||
<Button
|
||||
onClick={() => {
|
||||
handleChange(_, idx);
|
||||
setOpen(false)
|
||||
}}
|
||||
className="!flex !p-2 !items-center !justify-between !w-full"
|
||||
>
|
||||
<p
|
||||
className={`
|
||||
>
|
||||
{listTab.map((item, idx) => (
|
||||
<li key={idx} className="w-[calc(100%-32px)] mx-[16px]">
|
||||
<Button
|
||||
onClick={() => {
|
||||
handleChange(_, idx);
|
||||
setOpen(false);
|
||||
}}
|
||||
className="!flex !p-2 !items-center !justify-between !w-full"
|
||||
>
|
||||
<p
|
||||
className={`
|
||||
text-[16px] transition-all duration-500
|
||||
${value === idx ? 'text-[#5559CE] font-bold' : 'text-[#7E7E7E] font-normal'}
|
||||
${
|
||||
value === idx
|
||||
? "text-[#5559CE] font-bold"
|
||||
: "text-[#7E7E7E] font-normal"
|
||||
}
|
||||
`}
|
||||
>{item}</p>
|
||||
<ArrowLeftPH active={value === idx} />
|
||||
</Button>
|
||||
{listTab.length > idx + 1 && (
|
||||
<span className="my-[12px] block h-px w-full bg-[#EFEFEF]"></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
>
|
||||
{item}
|
||||
</p>
|
||||
<ArrowLeftPH active={value === idx} />
|
||||
</Button>
|
||||
{listTab.length > idx + 1 && (
|
||||
<span className="my-[12px] block h-px w-full bg-[#EFEFEF]"></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default Menu
|
||||
export default Menu;
|
||||
|
||||
@@ -1,35 +1,35 @@
|
||||
import Tabs from "@/app/component/Tabs"
|
||||
import Tabs from "@/app/component/Tabs";
|
||||
|
||||
function Tab({ value, listTab, handleChange }) {
|
||||
return (
|
||||
<Tabs
|
||||
isSm={false}
|
||||
style={{
|
||||
'.MuiTabs-indicator': {
|
||||
height: '2px',
|
||||
borderRadius: '16px',
|
||||
background: '#5559CE'
|
||||
},
|
||||
'& .MuiTabs-flexContainer': {
|
||||
borderBottom: '2px solid #EFEFEF',
|
||||
},
|
||||
'& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected': {
|
||||
color: '#5559CE !important',
|
||||
},
|
||||
'& .MuiButtonBase-root': {
|
||||
fontWeight: '400 !important'
|
||||
},
|
||||
'& .MuiButtonBase-root.Mui-selected': {
|
||||
color: '#5559CE !important',
|
||||
fontWeight: '700 !important',
|
||||
transition: '0.3s all !important'
|
||||
}
|
||||
}}
|
||||
value={value}
|
||||
listTab={listTab}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
)
|
||||
return (
|
||||
<Tabs
|
||||
isSm={false}
|
||||
style={{
|
||||
".MuiTabs-indicator": {
|
||||
height: "2px",
|
||||
borderRadius: "16px",
|
||||
background: "#5559CE",
|
||||
},
|
||||
"& .MuiTabs-flexContainer": {
|
||||
borderBottom: "2px solid #EFEFEF",
|
||||
},
|
||||
"& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
|
||||
color: "#5559CE !important",
|
||||
},
|
||||
"& .MuiButtonBase-root": {
|
||||
fontWeight: "400 !important",
|
||||
},
|
||||
"& .MuiButtonBase-root.Mui-selected": {
|
||||
color: "#5559CE !important",
|
||||
fontWeight: "700 !important",
|
||||
transition: "0.3s all !important",
|
||||
},
|
||||
}}
|
||||
value={value}
|
||||
listTab={listTab}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tab
|
||||
export default Tab;
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import ArrowLeftPU from "@/components/icons/ArrowLeftPU"
|
||||
import ProfileP from "@/components/icons/ProfileP"
|
||||
import { Button } from "@mui/material"
|
||||
import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
|
||||
import ProfileP from "@/components/icons/ProfileP";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
function Head() {
|
||||
return (
|
||||
<div className="flex items-center justify-center md:justify-start gap-[10px]">
|
||||
<div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
|
||||
<ProfileP />
|
||||
</div>
|
||||
<Button
|
||||
variant="text"
|
||||
className="!flex !p-1 !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
|
||||
>
|
||||
انتخاب تصویر
|
||||
<ArrowLeftPU />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex items-center justify-center md:justify-start gap-[10px]">
|
||||
<div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
|
||||
<ProfileP />
|
||||
</div>
|
||||
<Button
|
||||
variant="text"
|
||||
className="!flex !p-1 !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
|
||||
>
|
||||
انتخاب تصویر
|
||||
<ArrowLeftPU />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -9,73 +9,115 @@ import { Button } from "@mui/material";
|
||||
import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
|
||||
|
||||
function Form() {
|
||||
const [data, setData] = useState({
|
||||
name: { value: "احسان احمدی", isEdit: false },
|
||||
medical_system_number: { value: 1741025645, isEdit: false },
|
||||
expertise: { value: "دندان پزشکی", isEdit: false },
|
||||
description: { value: "", isEdit: false },
|
||||
skills: { value: "", isEdit: false },
|
||||
time_work: { value: "", isEdit: false },
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
degree: "",
|
||||
});
|
||||
const updateSelect = (event, name) =>
|
||||
setSelected({ ...selected, [name]: event.target.innerText });
|
||||
|
||||
const [data, setData] = useState({
|
||||
name: { value: 'احسان احمدی', isEdit: false },
|
||||
medical_system_number: { value: 1741025645, isEdit: false },
|
||||
expertise: { value: 'دندان پزشکی', isEdit: false },
|
||||
description: { value: '', isEdit: false },
|
||||
skills: { value: '', isEdit: false },
|
||||
time_work: { value: '', isEdit: false }
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value,
|
||||
},
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
degree: '',
|
||||
});
|
||||
const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
|
||||
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mt-[28px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
|
||||
<ContentText text='نام و نام خانوادگی'>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.name} name='name' />
|
||||
</ContentText>
|
||||
<ContentText text='شماره نظام پزشکی'>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.medical_system_number} name='medical_system_number' />
|
||||
</ContentText>
|
||||
<ContentText text='تخصص'>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.expertise} name='expertise' />
|
||||
</ContentText>
|
||||
<ContentText text='مدرک'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='degree'
|
||||
list={degree}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='توضیحات'>
|
||||
<EditField multiline={5} placeholder='درباره سوابق خود توضیحاتی بنویسید...' isTransparent={true} iconGray={true} changeData={changeData} data={data?.description} name='description' />
|
||||
</ContentText>
|
||||
<ContentText text='مهارت ها'>
|
||||
<EditField multiline={5} placeholder='مهارت های خود را بنویسید...' isTransparent={true} iconGray={true} changeData={changeData} data={data?.skills} name='skills' />
|
||||
</ContentText>
|
||||
<ContentText text='جنسیت'>
|
||||
<RadioGender />
|
||||
</ContentText>
|
||||
<ContentText text='زمان شروع به کار'>
|
||||
<EditField icon={<CalendarPD />} isTransparent={true} placeholder='انتخاب کنید...' iconGray={true} changeData={changeData} data={data?.time_work} name='time_work' />
|
||||
</ContentText>
|
||||
</div>
|
||||
<div className="mt-[40px] w-full flex justify-end">
|
||||
<Button
|
||||
className="!bg-[#5559CE] !w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
|
||||
variant="contained"
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftPA />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<div className="mt-[28px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
|
||||
<ContentText text="نام و نام خانوادگی">
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.name}
|
||||
name="name"
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="شماره نظام پزشکی">
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.medical_system_number}
|
||||
name="medical_system_number"
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="تخصص">
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.expertise}
|
||||
name="expertise"
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="مدرک">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="انتخاب کنید..."
|
||||
name="degree"
|
||||
list={degree}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="توضیحات">
|
||||
<EditField
|
||||
multiline={5}
|
||||
placeholder="درباره سوابق خود توضیحاتی بنویسید..."
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.description}
|
||||
name="description"
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="مهارت ها">
|
||||
<EditField
|
||||
multiline={5}
|
||||
placeholder="مهارت های خود را بنویسید..."
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.skills}
|
||||
name="skills"
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="جنسیت">
|
||||
<RadioGender />
|
||||
</ContentText>
|
||||
<ContentText text="زمان شروع به کار">
|
||||
<EditField
|
||||
icon={<CalendarPD />}
|
||||
isTransparent={true}
|
||||
placeholder="انتخاب کنید..."
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.time_work}
|
||||
name="time_work"
|
||||
/>
|
||||
</ContentText>
|
||||
</div>
|
||||
<div className="mt-[40px] w-full flex justify-end">
|
||||
<Button
|
||||
className="!bg-[#5559CE] !w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
|
||||
variant="contained"
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftPA />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Form
|
||||
export default Form;
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
import { FormControlLabel, Radio, RadioGroup } from "@mui/material"
|
||||
import { FormControlLabel, Radio, RadioGroup } from "@mui/material";
|
||||
|
||||
function RadioGender() {
|
||||
return (
|
||||
<RadioGroup
|
||||
dir="ltr"
|
||||
className="!flex !flex-row !gap-[36px] !items-center !justify-start"
|
||||
defaultValue='female'
|
||||
sx={{
|
||||
'& .muirtl-j204z7-MuiFormControlLabel-root': {
|
||||
marginLeft: '0 !important'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FormControlLabel value="male" control={<Radio />} label="مرد" />
|
||||
<FormControlLabel value="female" control={<Radio />} label="زن" />
|
||||
</RadioGroup>
|
||||
)
|
||||
return (
|
||||
<RadioGroup
|
||||
dir="ltr"
|
||||
className="!flex !flex-row !gap-[36px] !items-center !justify-start"
|
||||
defaultValue="female"
|
||||
sx={{
|
||||
"& .muirtl-j204z7-MuiFormControlLabel-root": {
|
||||
marginLeft: "0 !important",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<FormControlLabel value="male" control={<Radio />} label="مرد" />
|
||||
<FormControlLabel value="female" control={<Radio />} label="زن" />
|
||||
</RadioGroup>
|
||||
);
|
||||
}
|
||||
|
||||
export default RadioGender
|
||||
export default RadioGender;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
export const degree = [
|
||||
{ label: 'مدرک 1', id: 10 },
|
||||
{ label: 'مدرک 2', id: 20 },
|
||||
{ label: 'مدرک 3', id: 30 },
|
||||
{ label: 'مدرک 4', id: 40 }
|
||||
];
|
||||
{ label: "مدرک 1", id: 10 },
|
||||
{ label: "مدرک 2", id: 20 },
|
||||
{ label: "مدرک 3", id: 30 },
|
||||
{ label: "مدرک 4", id: 40 },
|
||||
];
|
||||
|
||||
@@ -2,12 +2,12 @@ import Form from "./form/Form";
|
||||
import Head from "./Head";
|
||||
|
||||
function GeneralInformation() {
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Head />
|
||||
<Form />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Head />
|
||||
<Form />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default GeneralInformation
|
||||
export default GeneralInformation;
|
||||
|
||||
@@ -2,26 +2,22 @@ import Menu from "./Menu";
|
||||
import Tab from "./Tab";
|
||||
|
||||
function ListMenu({ value, open, setOpen, handleChange, listTab }) {
|
||||
return (
|
||||
<>
|
||||
<div className="hidden md:flex">
|
||||
<Tab
|
||||
value={value}
|
||||
listTab={listTab}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex md:hidden">
|
||||
<Menu
|
||||
open={open}
|
||||
value={value}
|
||||
listTab={listTab}
|
||||
setOpen={setOpen}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
<div className="hidden md:flex">
|
||||
<Tab value={value} listTab={listTab} handleChange={handleChange} />
|
||||
</div>
|
||||
<div className="flex md:hidden">
|
||||
<Menu
|
||||
open={open}
|
||||
value={value}
|
||||
listTab={listTab}
|
||||
setOpen={setOpen}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ListMenu;
|
||||
export default ListMenu;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
@@ -9,60 +9,89 @@ import AddLocationP from "@/components/icons/AddLocationP";
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
|
||||
function Form() {
|
||||
const [data, setData] = useState({
|
||||
address: { value: "", isEdit: false },
|
||||
phone: { value: 1741025645, isEdit: false },
|
||||
office_number1: { value: "", isEdit: false },
|
||||
office_number2: { value: "", isEdit: false },
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
state: "",
|
||||
city: "",
|
||||
});
|
||||
const updateSelect = (event, name) =>
|
||||
setSelected({ ...selected, [name]: event.target.innerText });
|
||||
|
||||
const [data, setData] = useState({
|
||||
address: { value: '', isEdit: false },
|
||||
phone: { value: 1741025645, isEdit: false },
|
||||
office_number1: { value: '', isEdit: false },
|
||||
office_number2: { value: '', isEdit: false },
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value,
|
||||
},
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
state: '',
|
||||
city: '',
|
||||
});
|
||||
const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
|
||||
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="mt-[24px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
|
||||
<ContentText text='استان'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='state'
|
||||
list={state}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='شهر'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='city'
|
||||
list={city}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='آدرس'>
|
||||
<EditField icon={<AddLocationP />} isTransparent={true} placeholder='از روی نقشه انتخاب کنید...' iconGray={true} changeData={changeData} data={data?.address} name='address' />
|
||||
</ContentText>
|
||||
<ContentText text='شماره موبایل'>
|
||||
<EditField isTransparent={true} placeholder='شماره موبایل' iconGray={true} changeData={changeData} data={data?.phone} name='phone' />
|
||||
</ContentText>
|
||||
<ContentText text='شماره مطب'>
|
||||
<EditField isTransparent={true} placeholder='شماره مطب' iconGray={true} changeData={changeData} data={data?.office_number1} name='office_number1' />
|
||||
</ContentText>
|
||||
<ContentText text='شماره مطب'>
|
||||
<EditField isTransparent={true} placeholder='شماره مطب' iconGray={true} changeData={changeData} data={data?.office_number2} name='office_number2' />
|
||||
</ContentText>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="mt-[24px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
|
||||
<ContentText text="استان">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="انتخاب کنید..."
|
||||
name="state"
|
||||
list={state}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="شهر">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="انتخاب کنید..."
|
||||
name="city"
|
||||
list={city}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="آدرس">
|
||||
<EditField
|
||||
icon={<AddLocationP />}
|
||||
isTransparent={true}
|
||||
placeholder="از روی نقشه انتخاب کنید..."
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.address}
|
||||
name="address"
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="شماره موبایل">
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
placeholder="شماره موبایل"
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.phone}
|
||||
name="phone"
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="شماره مطب">
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
placeholder="شماره مطب"
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.office_number1}
|
||||
name="office_number1"
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="شماره مطب">
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
placeholder="شماره مطب"
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.office_number2}
|
||||
name="office_number2"
|
||||
/>
|
||||
</ContentText>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Form
|
||||
export default Form;
|
||||
|
||||
@@ -3,20 +3,20 @@ import { Button } from "@mui/material";
|
||||
import Form from "./Form";
|
||||
|
||||
function OfficeInformation() {
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form />
|
||||
<div className="mt-[40px] w-full flex justify-end">
|
||||
<Button
|
||||
className="!bg-[#5559CE] !w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
|
||||
variant="contained"
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftPA />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form />
|
||||
<div className="mt-[40px] w-full flex justify-end">
|
||||
<Button
|
||||
className="!bg-[#5559CE] !w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
|
||||
variant="contained"
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftPA />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default OfficeInformation
|
||||
export default OfficeInformation;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
export const state = [
|
||||
{ label: 'استان 1', id: 10 },
|
||||
{ label: 'استان 2', id: 20 },
|
||||
{ label: 'استان 3', id: 30 },
|
||||
{ label: 'استان 4', id: 40 }
|
||||
{ label: "استان 1", id: 10 },
|
||||
{ label: "استان 2", id: 20 },
|
||||
{ label: "استان 3", id: 30 },
|
||||
{ label: "استان 4", id: 40 },
|
||||
];
|
||||
|
||||
export const city = [
|
||||
{ label: 'شهر 1', id: 10 },
|
||||
{ label: 'شهر 2', id: 20 },
|
||||
{ label: 'شهر 3', id: 30 },
|
||||
{ label: 'شهر 4', id: 40 }
|
||||
];
|
||||
{ label: "شهر 1", id: 10 },
|
||||
{ label: "شهر 2", id: 20 },
|
||||
{ label: "شهر 3", id: 30 },
|
||||
{ label: "شهر 4", id: 40 },
|
||||
];
|
||||
|
||||
@@ -1,89 +1,89 @@
|
||||
import { useState } from "react"
|
||||
import { useState } from "react";
|
||||
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect"
|
||||
import ContentText from "@/components/panel/ContentText"
|
||||
import { dayOfWeek, timeEachTurn, turnsPerDay } from "./listSelector"
|
||||
import FieldIcon from "@/app/component/FieldIcon"
|
||||
import { Button } from "@mui/material"
|
||||
import PlusBlueP from "@/components/icons/PlusBlueP"
|
||||
import ClockP from "@/components/icons/ClockP"
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
import ContentText from "@/components/panel/ContentText";
|
||||
import { dayOfWeek, timeEachTurn, turnsPerDay } from "./listSelector";
|
||||
import FieldIcon from "@/app/component/FieldIcon";
|
||||
import { Button } from "@mui/material";
|
||||
import PlusBlueP from "@/components/icons/PlusBlueP";
|
||||
import ClockP from "@/components/icons/ClockP";
|
||||
|
||||
function Form() {
|
||||
const [data, setData] = useState({
|
||||
start_time: "",
|
||||
end_time: "",
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
numberOfTurns: "",
|
||||
timeOfEachTurn: "",
|
||||
});
|
||||
|
||||
const [data, setData] = useState({
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
numberOfTurns: '',
|
||||
timeOfEachTurn: ''
|
||||
const updateSelect = (event, name) =>
|
||||
setSelected({ ...selected, [name]: event.target.innerText });
|
||||
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: value,
|
||||
});
|
||||
|
||||
const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
|
||||
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: value
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex flex-col w-full-content">
|
||||
<div className="flex flex-col sm:flex-row w-full items-center justify-start gap-[16px]">
|
||||
<ContentText text='تعداد نوبت در هر روز'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='numberOfTurns'
|
||||
list={turnsPerDay}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='تعداد نوبت در هر روز'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='numberOfTurns'
|
||||
list={timeEachTurn}
|
||||
/>
|
||||
</ContentText>
|
||||
<div className="hidden lg:flex content-text-panel"></div>
|
||||
<div className="hidden lg:flex min-w-[152px]"></div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:flex items-end justify-center gap-[16px] mt-[32px]">
|
||||
<ContentText text='تعداد نوبت در هر روز'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='numberOfTurns'
|
||||
list={dayOfWeek}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='زمان شروع'>
|
||||
<FieldIcon
|
||||
placeholder='انتخاب کنید...'
|
||||
changeData={changeData}
|
||||
icon={<ClockP />}
|
||||
name='start_time'
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='زمان پایان'>
|
||||
<FieldIcon
|
||||
placeholder='انتخاب کنید...'
|
||||
changeData={changeData}
|
||||
icon={<ClockP />}
|
||||
name='end_time'
|
||||
/>
|
||||
</ContentText>
|
||||
<Button
|
||||
variant="outlined"
|
||||
className="!border-[#5559CE] !mr-auto sm:!mr-0 !h-[44px] md:!h-[46px] lg:!h-[48px] !gap-[4px] !w-fit sm:!w-full md:!w-fit !min-w-fit lg:!min-w-[152px]"
|
||||
>
|
||||
<PlusBlueP />
|
||||
اضافه کردن
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex flex-col w-full-content">
|
||||
<div className="flex flex-col sm:flex-row w-full items-center justify-start gap-[16px]">
|
||||
<ContentText text="تعداد نوبت در هر روز">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="انتخاب کنید..."
|
||||
name="numberOfTurns"
|
||||
list={turnsPerDay}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="تعداد نوبت در هر روز">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="انتخاب کنید..."
|
||||
name="numberOfTurns"
|
||||
list={timeEachTurn}
|
||||
/>
|
||||
</ContentText>
|
||||
<div className="hidden lg:flex content-text-panel"></div>
|
||||
<div className="hidden lg:flex min-w-[152px]"></div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:flex items-end justify-center gap-[16px] mt-[32px]">
|
||||
<ContentText text="تعداد نوبت در هر روز">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="انتخاب کنید..."
|
||||
name="numberOfTurns"
|
||||
list={dayOfWeek}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="زمان شروع">
|
||||
<FieldIcon
|
||||
placeholder="انتخاب کنید..."
|
||||
changeData={changeData}
|
||||
icon={<ClockP />}
|
||||
name="start_time"
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="زمان پایان">
|
||||
<FieldIcon
|
||||
placeholder="انتخاب کنید..."
|
||||
changeData={changeData}
|
||||
icon={<ClockP />}
|
||||
name="end_time"
|
||||
/>
|
||||
</ContentText>
|
||||
<Button
|
||||
variant="outlined"
|
||||
className="!border-[#5559CE] !mr-auto sm:!mr-0 !h-[44px] md:!h-[46px] lg:!h-[48px] !gap-[4px] !w-fit sm:!w-full md:!w-fit !min-w-fit lg:!min-w-[152px]"
|
||||
>
|
||||
<PlusBlueP />
|
||||
اضافه کردن
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Form
|
||||
export default Form;
|
||||
|
||||
@@ -1,64 +1,95 @@
|
||||
import { useState } from "react";
|
||||
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
} from "@mui/material";
|
||||
|
||||
function List() {
|
||||
const [data, setData] = useState([
|
||||
{ name: "شنبه", morning_time: "9 - 12", evening_time: "16 - 21" },
|
||||
{ name: "یکشنبه", morning_time: "9 - 12", evening_time: "16 - 21" },
|
||||
{ name: "دوشنبه", morning_time: "9 - 12", evening_time: "16 - 21" },
|
||||
]);
|
||||
|
||||
const [data, setData] = useState([
|
||||
{ name: 'شنبه', morning_time: '9 - 12', evening_time: '16 - 21' },
|
||||
{ name: 'یکشنبه', morning_time: '9 - 12', evening_time: '16 - 21' },
|
||||
{ name: 'دوشنبه', morning_time: '9 - 12', evening_time: '16 - 21' }
|
||||
]);
|
||||
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 className="w-full flex flex-col mt-[24px] sm:mt-[32px] md:mt-[40px] lg:mt-[48px] items-start gap-[24px] md:gap-[20px] lg:gap-[16px]">
|
||||
<p className="text-[#525252] text-[14px] font-bold">لیست روزهای خاص</p>
|
||||
<TableContainer
|
||||
className="!w-full md:!w-fit"
|
||||
sx={{
|
||||
'&.MuiTableContainer-root': {
|
||||
boxShadow: 'none !important',
|
||||
border: 'none !important',
|
||||
borderBottom: '1px solid #DBDBDB !important'
|
||||
},
|
||||
'& .MuiTableRow-root th, .MuiTableRow-root td': {
|
||||
borderBottom: 'none !important'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Table>
|
||||
<TableHead className="!py-2">
|
||||
<TableRow className="!bg-[#EFEFEF] !py-2">
|
||||
<TableCell className="!py-[10px] !text-[#616161] !text-[14px] !font-normal" align="left">روز های هفته</TableCell>
|
||||
<TableCell className="!py-[10px] !text-[#616161] !text-[14px] !font-normal" align="left">تایم صبح</TableCell>
|
||||
<TableCell className="!py-[10px] !text-[#616161] !text-[14px] !font-normal" align="left">تایم عصر</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row) => (
|
||||
<TableRow
|
||||
key={row.name}
|
||||
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||||
>
|
||||
<TableCell className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]" component="th" scope="row">
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]" align="left">
|
||||
{row.morning_time}
|
||||
</TableCell>
|
||||
<TableCell className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]" align="left">
|
||||
{row.evening_time}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="w-full flex flex-col mt-[24px] sm:mt-[32px] md:mt-[40px] lg:mt-[48px] items-start gap-[24px] md:gap-[20px] lg:gap-[16px]">
|
||||
<p className="text-[#525252] text-[14px] font-bold">لیست روزهای خاص</p>
|
||||
<TableContainer
|
||||
className="!w-full md:!w-fit"
|
||||
sx={{
|
||||
"&.MuiTableContainer-root": {
|
||||
boxShadow: "none !important",
|
||||
border: "none !important",
|
||||
borderBottom: "1px solid #DBDBDB !important",
|
||||
},
|
||||
"& .MuiTableRow-root th, .MuiTableRow-root td": {
|
||||
borderBottom: "none !important",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Table>
|
||||
<TableHead className="!py-2">
|
||||
<TableRow className="!bg-[#EFEFEF] !py-2">
|
||||
<TableCell
|
||||
className="!py-[10px] !text-[#616161] !text-[14px] !font-normal"
|
||||
align="left"
|
||||
>
|
||||
روز های هفته
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!py-[10px] !text-[#616161] !text-[14px] !font-normal"
|
||||
align="left"
|
||||
>
|
||||
تایم صبح
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!py-[10px] !text-[#616161] !text-[14px] !font-normal"
|
||||
align="left"
|
||||
>
|
||||
تایم عصر
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row) => (
|
||||
<TableRow
|
||||
key={row.name}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell
|
||||
className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]"
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]"
|
||||
align="left"
|
||||
>
|
||||
{row.morning_time}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]"
|
||||
align="left"
|
||||
>
|
||||
{row.evening_time}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default List
|
||||
export default List;
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
import { Button } from "@mui/material"
|
||||
import Form from "./Form"
|
||||
import List from "./List"
|
||||
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD"
|
||||
import { Button } from "@mui/material";
|
||||
import Form from "./Form";
|
||||
import List from "./List";
|
||||
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
|
||||
|
||||
function SpecialDays() {
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form />
|
||||
<List />
|
||||
<Button
|
||||
className="!gap-[4px] !w-full md:!w-fit !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form />
|
||||
<List />
|
||||
<Button
|
||||
className="!gap-[4px] !w-full md:!w-fit !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 SpecialDays
|
||||
export default SpecialDays;
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
export const turnsPerDay = [
|
||||
{ label: '1', id: 10 },
|
||||
{ label: '2', id: 20 },
|
||||
{ label: '3', id: 30 },
|
||||
{ label: '4', id: 40 }
|
||||
{ label: "1", id: 10 },
|
||||
{ label: "2", id: 20 },
|
||||
{ label: "3", id: 30 },
|
||||
{ label: "4", id: 40 },
|
||||
];
|
||||
|
||||
export const timeEachTurn = [
|
||||
{ label: '10', id: 10 },
|
||||
{ label: '20', id: 20 },
|
||||
{ label: '30', id: 30 },
|
||||
{ label: '40', id: 40 }
|
||||
{ label: "10", id: 10 },
|
||||
{ label: "20", id: 20 },
|
||||
{ label: "30", id: 30 },
|
||||
{ label: "40", id: 40 },
|
||||
];
|
||||
|
||||
export const dayOfWeek = [
|
||||
{ label: 'شنبه', id: 10 },
|
||||
{ label: 'یکشنبه', id: 20 },
|
||||
{ label: 'دوشنبه', id: 30 },
|
||||
{ label: 'سه شنبه', id: 40 },
|
||||
{ label: 'چهار شنبه', id: 40 },
|
||||
{ label: 'پنج شنبه', id: 40 }
|
||||
];
|
||||
{ label: "شنبه", id: 10 },
|
||||
{ label: "یکشنبه", id: 20 },
|
||||
{ label: "دوشنبه", id: 30 },
|
||||
{ label: "سه شنبه", id: 40 },
|
||||
{ label: "چهار شنبه", id: 40 },
|
||||
{ label: "پنج شنبه", id: 40 },
|
||||
];
|
||||
|
||||
@@ -1,37 +1,37 @@
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect"
|
||||
import ContentText from "@/components/panel/ContentText"
|
||||
import { numberOfTurns, timeOfEachTurn } from "./listSelector"
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
import ContentText from "@/components/panel/ContentText";
|
||||
import { numberOfTurns, timeOfEachTurn } from "./listSelector";
|
||||
import { useState } from "react";
|
||||
|
||||
function Form() {
|
||||
const [selected, setSelected] = useState({
|
||||
numberOfTurns: "",
|
||||
timeOfEachTurn: "",
|
||||
});
|
||||
|
||||
const [selected, setSelected] = useState({
|
||||
numberOfTurns: '',
|
||||
timeOfEachTurn: '',
|
||||
});
|
||||
const updateSelect = (event, name) =>
|
||||
setSelected({ ...selected, [name]: event.target.innerText });
|
||||
|
||||
const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
|
||||
|
||||
return (
|
||||
<div className="mt-[40px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
|
||||
<ContentText text='تعداد نوبت در هر روز'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='numberOfTurns'
|
||||
list={numberOfTurns}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='زمان هر نوبت'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='timeOfEachTurn'
|
||||
list={timeOfEachTurn}
|
||||
/>
|
||||
</ContentText>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="mt-[40px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
|
||||
<ContentText text="تعداد نوبت در هر روز">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="انتخاب کنید..."
|
||||
name="numberOfTurns"
|
||||
list={numberOfTurns}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="زمان هر نوبت">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="انتخاب کنید..."
|
||||
name="timeOfEachTurn"
|
||||
list={timeOfEachTurn}
|
||||
/>
|
||||
</ContentText>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Form
|
||||
export default Form;
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
import { Button } from "@mui/material"
|
||||
import Form from "./Form"
|
||||
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD"
|
||||
import { Button } from "@mui/material";
|
||||
import Form from "./Form";
|
||||
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
|
||||
|
||||
function Turns() {
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form />
|
||||
<Button
|
||||
className="!gap-[4px] !w-full md:!w-fit !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form />
|
||||
<Button
|
||||
className="!gap-[4px] !w-full md:!w-fit !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 Turns
|
||||
export default Turns;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
export const numberOfTurns = [
|
||||
{ label: 'نوبت 1', id: 10 },
|
||||
{ label: 'نوبت 2', id: 20 },
|
||||
{ label: 'نوبت 3', id: 30 },
|
||||
{ label: 'نوبت 4', id: 40 }
|
||||
{ label: "نوبت 1", id: 10 },
|
||||
{ label: "نوبت 2", id: 20 },
|
||||
{ label: "نوبت 3", id: 30 },
|
||||
{ label: "نوبت 4", id: 40 },
|
||||
];
|
||||
|
||||
export const timeOfEachTurn = [
|
||||
{ label: 'دقیقه 1', id: 10 },
|
||||
{ label: 'دقیقه 2', id: 20 },
|
||||
{ label: 'دقیقه 3', id: 30 },
|
||||
{ label: 'دقیقه 4', id: 40 }
|
||||
];
|
||||
{ label: "دقیقه 1", id: 10 },
|
||||
{ label: "دقیقه 2", id: 20 },
|
||||
{ label: "دقیقه 3", id: 30 },
|
||||
{ label: "دقیقه 4", id: 40 },
|
||||
];
|
||||
|
||||
@@ -1,125 +1,157 @@
|
||||
import { useState } from "react";
|
||||
import ModalAddTime from "./modal/ModalAddTime";
|
||||
import { Button, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
|
||||
import {
|
||||
Button,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
} from "@mui/material";
|
||||
import ContentModal from "./modal/ContentModal";
|
||||
import EditOrangeAD from "@/components/icons/EditOrangeAD";
|
||||
|
||||
function List() {
|
||||
const [data, setData] = useState([
|
||||
{ name: "شنبه", morning_time: ["", ""], evening_time: ["", ""] },
|
||||
{ name: "یکشنبه", morning_time: ["", ""], evening_time: ["", ""] },
|
||||
{ name: "دوشنبه", morning_time: ["", ""], evening_time: ["", ""] },
|
||||
{ name: "سه شنبه", morning_time: ["", ""], evening_time: ["", ""] },
|
||||
{ name: "چهار شنبه", morning_time: ["", ""], evening_time: ["", ""] },
|
||||
{ name: "پنج شنبه", morning_time: ["", ""], evening_time: ["", ""] },
|
||||
]);
|
||||
|
||||
const [data, setData] = useState([
|
||||
{ name: 'شنبه', morning_time: ['', ''], evening_time: ['', ''] },
|
||||
{ name: 'یکشنبه', morning_time: ['', ''], evening_time: ['', ''] },
|
||||
{ name: 'دوشنبه', morning_time: ['', ''], evening_time: ['', ''] },
|
||||
{ name: 'سه شنبه', morning_time: ['', ''], evening_time: ['', ''] },
|
||||
{ name: 'چهار شنبه', morning_time: ['', ''], evening_time: ['', ''] },
|
||||
{ name: 'پنج شنبه', morning_time: ['', ''], evening_time: ['', ''] },
|
||||
]);
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
const [dataChange, setDataChange] = useState({
|
||||
is_morgen: false,
|
||||
idx: undefined,
|
||||
});
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
const [dataChange, setDataChange] = useState({
|
||||
is_morgen: false,
|
||||
idx: undefined
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="w-full flex justify-center">
|
||||
<TableContainer
|
||||
className="!mt-[40px] md:!mt-[36px] lg:!mt-[32px] !w-fit"
|
||||
sx={{
|
||||
'&.MuiTableContainer-root': {
|
||||
boxShadow: 'none !important',
|
||||
border: 'none !important',
|
||||
borderBottom: '1px solid #DBDBDB !important'
|
||||
},
|
||||
'& .MuiTableRow-root th, .MuiTableRow-root td': {
|
||||
borderBottom: 'none !important'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Table>
|
||||
<TableHead className="!py-2">
|
||||
<TableRow className="!bg-[#EFEFEF] !py-2">
|
||||
<TableCell className="!py-[10px] !text-[#616161] !text-[14px] !font-normal" align="left">روز های هفته</TableCell>
|
||||
<TableCell className="!py-[10px] !text-[#616161] !text-[14px] !font-normal" align="left">تایم صبح</TableCell>
|
||||
<TableCell className="!py-[10px] !text-[#616161] !text-[14px] !font-normal" align="left">تایم عصر</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row, idx) => (
|
||||
<TableRow
|
||||
key={row.name}
|
||||
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||||
>
|
||||
<TableCell className="!border-[1px] !border-[#DBDBDB]" component="th" scope="row">
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]" align="right">
|
||||
{row.morning_time[0] || row.morning_time[1] ? (
|
||||
<Button
|
||||
onClick={() => {
|
||||
handleOpen();
|
||||
setDataChange({
|
||||
is_morgen: true,
|
||||
idx
|
||||
})
|
||||
}}
|
||||
className="!gap-[6px] !min-w-[146px] !py-[4px] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
|
||||
>
|
||||
{`${row.morning_time[0]} - ${row.morning_time[1]}`}
|
||||
<EditOrangeAD />
|
||||
</Button>
|
||||
) : (
|
||||
<ModalAddTime
|
||||
setDataChange={setDataChange}
|
||||
handleOpen={handleOpen}
|
||||
setData={setData}
|
||||
isMorgen={true}
|
||||
idx={idx}
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]" align="right">
|
||||
{row.evening_time[0] || row.evening_time[1] ? (
|
||||
<Button
|
||||
onClick={() => {
|
||||
handleOpen();
|
||||
setDataChange({
|
||||
is_morgen: false,
|
||||
idx
|
||||
})
|
||||
}}
|
||||
className="!gap-[6px] !min-w-[146px] !py-[4px] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
|
||||
>
|
||||
{`${row.evening_time[0]} - ${row.evening_time[1]}`}
|
||||
<EditOrangeAD />
|
||||
</Button>
|
||||
) : (
|
||||
<ModalAddTime
|
||||
setDataChange={setDataChange}
|
||||
handleOpen={handleOpen}
|
||||
setData={setData}
|
||||
isMorgen={false}
|
||||
idx={idx}
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<ContentModal
|
||||
open={open}
|
||||
data={data}
|
||||
setOpen={setOpen}
|
||||
setData={setData}
|
||||
dataChange={dataChange}
|
||||
handleClose={handleClose}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="w-full flex justify-center">
|
||||
<TableContainer
|
||||
className="!mt-[40px] md:!mt-[36px] lg:!mt-[32px] !w-fit"
|
||||
sx={{
|
||||
"&.MuiTableContainer-root": {
|
||||
boxShadow: "none !important",
|
||||
border: "none !important",
|
||||
borderBottom: "1px solid #DBDBDB !important",
|
||||
},
|
||||
"& .MuiTableRow-root th, .MuiTableRow-root td": {
|
||||
borderBottom: "none !important",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Table>
|
||||
<TableHead className="!py-2">
|
||||
<TableRow className="!bg-[#EFEFEF] !py-2">
|
||||
<TableCell
|
||||
className="!py-[10px] !text-[#616161] !text-[14px] !font-normal"
|
||||
align="left"
|
||||
>
|
||||
روز های هفته
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!py-[10px] !text-[#616161] !text-[14px] !font-normal"
|
||||
align="left"
|
||||
>
|
||||
تایم صبح
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!py-[10px] !text-[#616161] !text-[14px] !font-normal"
|
||||
align="left"
|
||||
>
|
||||
تایم عصر
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{data.map((row, idx) => (
|
||||
<TableRow
|
||||
key={row.name}
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell
|
||||
className="!border-[1px] !border-[#DBDBDB]"
|
||||
component="th"
|
||||
scope="row"
|
||||
>
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]"
|
||||
align="right"
|
||||
>
|
||||
{row.morning_time[0] || row.morning_time[1] ? (
|
||||
<Button
|
||||
onClick={() => {
|
||||
handleOpen();
|
||||
setDataChange({
|
||||
is_morgen: true,
|
||||
idx,
|
||||
});
|
||||
}}
|
||||
className="!gap-[6px] !min-w-[146px] !py-[4px] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
|
||||
>
|
||||
{`${row.morning_time[0]} - ${row.morning_time[1]}`}
|
||||
<EditOrangeAD />
|
||||
</Button>
|
||||
) : (
|
||||
<ModalAddTime
|
||||
setDataChange={setDataChange}
|
||||
handleOpen={handleOpen}
|
||||
setData={setData}
|
||||
isMorgen={true}
|
||||
idx={idx}
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]"
|
||||
align="right"
|
||||
>
|
||||
{row.evening_time[0] || row.evening_time[1] ? (
|
||||
<Button
|
||||
onClick={() => {
|
||||
handleOpen();
|
||||
setDataChange({
|
||||
is_morgen: false,
|
||||
idx,
|
||||
});
|
||||
}}
|
||||
className="!gap-[6px] !min-w-[146px] !py-[4px] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
|
||||
>
|
||||
{`${row.evening_time[0]} - ${row.evening_time[1]}`}
|
||||
<EditOrangeAD />
|
||||
</Button>
|
||||
) : (
|
||||
<ModalAddTime
|
||||
setDataChange={setDataChange}
|
||||
handleOpen={handleOpen}
|
||||
setData={setData}
|
||||
isMorgen={false}
|
||||
idx={idx}
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<ContentModal
|
||||
open={open}
|
||||
data={data}
|
||||
setOpen={setOpen}
|
||||
setData={setData}
|
||||
dataChange={dataChange}
|
||||
handleClose={handleClose}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default List
|
||||
export default List;
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
import List from "./List"
|
||||
import List from "./List";
|
||||
|
||||
function WorkingDays() {
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] text-center md:text-start font-bold">لیست روزهای کاری</p>
|
||||
<List />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] text-center md:text-start font-bold">
|
||||
لیست روزهای کاری
|
||||
</p>
|
||||
<List />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default WorkingDays
|
||||
export default WorkingDays;
|
||||
|
||||
@@ -1,51 +1,49 @@
|
||||
import CloseModalD from "@/components/icons/CloseModalD"
|
||||
import { styleDefault } from "@/mui"
|
||||
import { Box, Button, Modal } from "@mui/material"
|
||||
import Radios from "./Radios"
|
||||
import Form from "./Form"
|
||||
import { useState } from "react"
|
||||
import CloseModalD from "@/components/icons/CloseModalD";
|
||||
import { styleDefault } from "@/mui";
|
||||
import { Box, Button, Modal } from "@mui/material";
|
||||
import Radios from "./Radios";
|
||||
import Form from "./Form";
|
||||
import { useState } from "react";
|
||||
|
||||
function ContentModal({ open, data, setOpen, setData, dataChange, handleClose }) {
|
||||
function ContentModal({
|
||||
open,
|
||||
data,
|
||||
setOpen,
|
||||
setData,
|
||||
dataChange,
|
||||
handleClose,
|
||||
}) {
|
||||
const [value, setValue] = useState(0);
|
||||
|
||||
const [value, setValue] = useState(0);
|
||||
const handleChange = (event) => setValue(+event.target.value);
|
||||
|
||||
const handleChange = event => setValue(+event.target.value);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-full !rounded-none md:!rounded-[8px] md:!w-fit !h-full md:!h-fit !py-[20px] !px-[16px] !pb-[56px]"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#525252] text-[20px] font-bold">اضافه کردن روز کاری</p>
|
||||
<Button
|
||||
variant="text"
|
||||
className="!p-1"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mx-0 md:mx-[52px]">
|
||||
<Radios
|
||||
value={value}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
<Form
|
||||
handleClose={handleClose}
|
||||
dataChange={dataChange}
|
||||
setData={setData}
|
||||
value={value}
|
||||
data={data}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
)
|
||||
return (
|
||||
<Modal open={open} onClose={handleClose}>
|
||||
<Box
|
||||
sx={styleDefault}
|
||||
className="!w-full !rounded-none md:!rounded-[8px] md:!w-fit !h-full md:!h-fit !py-[20px] !px-[16px] !pb-[56px]"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#525252] text-[20px] font-bold">
|
||||
اضافه کردن روز کاری
|
||||
</p>
|
||||
<Button variant="text" className="!p-1" onClick={handleClose}>
|
||||
<CloseModalD />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mx-0 md:mx-[52px]">
|
||||
<Radios value={value} handleChange={handleChange} />
|
||||
<Form
|
||||
handleClose={handleClose}
|
||||
dataChange={dataChange}
|
||||
setData={setData}
|
||||
value={value}
|
||||
data={data}
|
||||
/>
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
export default ContentModal
|
||||
export default ContentModal;
|
||||
|
||||
@@ -3,40 +3,44 @@ import ContentText from "@/components/panel/ContentText";
|
||||
import TimePickerField from "@/app/component/TimePickerField";
|
||||
|
||||
function Form({ handleClose, setData, dataChange, data, value }) {
|
||||
return (
|
||||
<div className="flex flex-col gap-[32px] md:gap-[36px] lg:gap-[40px] min-w-fit md:min-w-[420px]">
|
||||
<ContentText text='زمان شروع'>
|
||||
<TimePickerField
|
||||
dataChange={dataChange}
|
||||
disable={value === 1}
|
||||
setData={setData}
|
||||
timeStart={true}
|
||||
data={data}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='زمان پایان'>
|
||||
<TimePickerField
|
||||
dataChange={dataChange}
|
||||
disable={value === 1}
|
||||
setData={setData}
|
||||
timeStart={false}
|
||||
data={data}
|
||||
/>
|
||||
</ContentText>
|
||||
<div className="flex flex-wrap items-center justify-center gap-[16px]">
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleClose}
|
||||
className="!text-[16px] !font-medium !border-[#5559CE] !py-[5px] md:!py-[7px] lg:!py-[9px] !shadow-none !px-[46px]"
|
||||
>انصراف</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleClose}
|
||||
className="!text-[16px] !font-medium !shadow-none !py-[5px] md:!py-[7px] lg:!py-[9px] !px-[46px]"
|
||||
>ذخیره</Button>
|
||||
</div>
|
||||
</div >
|
||||
)
|
||||
return (
|
||||
<div className="flex flex-col gap-[32px] md:gap-[36px] lg:gap-[40px] min-w-fit md:min-w-[420px]">
|
||||
<ContentText text="زمان شروع">
|
||||
<TimePickerField
|
||||
dataChange={dataChange}
|
||||
disable={value === 1}
|
||||
setData={setData}
|
||||
timeStart={true}
|
||||
data={data}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="زمان پایان">
|
||||
<TimePickerField
|
||||
dataChange={dataChange}
|
||||
disable={value === 1}
|
||||
setData={setData}
|
||||
timeStart={false}
|
||||
data={data}
|
||||
/>
|
||||
</ContentText>
|
||||
<div className="flex flex-wrap items-center justify-center gap-[16px]">
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={handleClose}
|
||||
className="!text-[16px] !font-medium !border-[#5559CE] !py-[5px] md:!py-[7px] lg:!py-[9px] !shadow-none !px-[46px]"
|
||||
>
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleClose}
|
||||
className="!text-[16px] !font-medium !shadow-none !py-[5px] md:!py-[7px] lg:!py-[9px] !px-[46px]"
|
||||
>
|
||||
ذخیره
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Form
|
||||
export default Form;
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
import AddTimeP from '@/components/icons/AddTimeP'
|
||||
import { Button } from '@mui/material'
|
||||
import React from 'react'
|
||||
import AddTimeP from "@/components/icons/AddTimeP";
|
||||
import { Button } from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
function ModalAddTime({ handleOpen, isMorgen, idx, setDataChange }) {
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
variant='text'
|
||||
onClick={() => {
|
||||
handleOpen();
|
||||
setDataChange({
|
||||
is_morgen: isMorgen,
|
||||
idx
|
||||
})
|
||||
}}
|
||||
className='!gap-[2px] !min-w-[146px] sm:!gap-[4px] md:!gap-[6px] lg:!gap-[8px] !p-1 !text-[#5559CE] !text-[14px] md:!text-[16px] !font-medium'
|
||||
>
|
||||
<AddTimeP />
|
||||
انتخاب کنید
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={() => {
|
||||
handleOpen();
|
||||
setDataChange({
|
||||
is_morgen: isMorgen,
|
||||
idx,
|
||||
});
|
||||
}}
|
||||
className="!gap-[2px] !min-w-[146px] sm:!gap-[4px] md:!gap-[6px] lg:!gap-[8px] !p-1 !text-[#5559CE] !text-[14px] md:!text-[16px] !font-medium"
|
||||
>
|
||||
<AddTimeP />
|
||||
انتخاب کنید
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ModalAddTime
|
||||
export default ModalAddTime;
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
import { FormControlLabel, Radio, RadioGroup } from "@mui/material"
|
||||
import { FormControlLabel, Radio, RadioGroup } from "@mui/material";
|
||||
|
||||
function Radios({ value, handleChange }) {
|
||||
return (
|
||||
<RadioGroup
|
||||
dir="ltr"
|
||||
defaultValue={value}
|
||||
onChange={handleChange}
|
||||
className="!flex !flex-row !mb-[32px] md:!mb-[36px] !my-[40px] !gap-[36px] !items-center !justify-end"
|
||||
sx={{
|
||||
'& .muirtl-j204z7-MuiFormControlLabel-root': {
|
||||
marginLeft: '0 !important'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FormControlLabel value={0} control={<Radio />} label="روز کاری" />
|
||||
<FormControlLabel value={1} control={<Radio />} label="تعطیل" />
|
||||
</RadioGroup>
|
||||
)
|
||||
return (
|
||||
<RadioGroup
|
||||
dir="ltr"
|
||||
defaultValue={value}
|
||||
onChange={handleChange}
|
||||
className="!flex !flex-row !mb-[32px] md:!mb-[36px] !my-[40px] !gap-[36px] !items-center !justify-end"
|
||||
sx={{
|
||||
"& .muirtl-j204z7-MuiFormControlLabel-root": {
|
||||
marginLeft: "0 !important",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<FormControlLabel value={0} control={<Radio />} label="روز کاری" />
|
||||
<FormControlLabel value={1} control={<Radio />} label="تعطیل" />
|
||||
</RadioGroup>
|
||||
);
|
||||
}
|
||||
|
||||
export default Radios
|
||||
export default Radios;
|
||||
|
||||
@@ -4,11 +4,28 @@ import CardOrangeP from "../../icons/CardOrangeP";
|
||||
import PeopleBlueP from "../../icons/PeopleBlueP";
|
||||
|
||||
function Cards({ data, loading }) {
|
||||
|
||||
const list = [
|
||||
{ text: 'تعداد کل بیماران', bg_color: 'bg-[#E5E9FF]', value: data.number_of_patients, label: 'نفر', icon: <PeopleBlueP /> },
|
||||
{ text: 'نوبت های امروز', bg_color: 'bg-[rgba(20,204,38,0.14)]', value: data.today_turns, label: 'نوبت', icon: <CalendarTickGreenP /> },
|
||||
{ text: 'پرداختی ها', bg_color: 'bg-[#FFD8C5]', value: data.payments, label: 'تومان', icon: <CardOrangeP /> }
|
||||
{
|
||||
text: "تعداد کل بیماران",
|
||||
bg_color: "bg-[#E5E9FF]",
|
||||
value: data.number_of_patients,
|
||||
label: "نفر",
|
||||
icon: <PeopleBlueP />,
|
||||
},
|
||||
{
|
||||
text: "نوبت های امروز",
|
||||
bg_color: "bg-[rgba(20,204,38,0.14)]",
|
||||
value: data.today_turns,
|
||||
label: "نوبت",
|
||||
icon: <CalendarTickGreenP />,
|
||||
},
|
||||
{
|
||||
text: "پرداختی ها",
|
||||
bg_color: "bg-[#FFD8C5]",
|
||||
value: data.payments,
|
||||
label: "تومان",
|
||||
icon: <CardOrangeP />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -18,22 +35,28 @@ function Cards({ data, loading }) {
|
||||
className="flex min-w-[226px] w-full sm:w-auto flex-col py-[16px] md:py-[18px] px-[12px] gap-[8px] rounded-[4px] border border-solid border-[#EFEFEF] bg-[#FFF]"
|
||||
key={idx}
|
||||
>
|
||||
<div className={`p-[12px] w-fit h-fit rounded-[2px] ${item.bg_color}`}>
|
||||
<div
|
||||
className={`p-[12px] w-fit h-fit rounded-[2px] ${item.bg_color}`}
|
||||
>
|
||||
{item.icon}
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#525252] text-[14px] font-normal">{item.text}</p>
|
||||
<p className="text-[#525252] text-[14px] font-normal">
|
||||
{item.text}
|
||||
</p>
|
||||
<TextLoading width={70} height={20} loading={loading}>
|
||||
<p className="text-[#3B3B3B] text-[24px] font-medium">
|
||||
{item.value}
|
||||
<span className="text-[#616161] mr-[6px] text-[12px] font-normal">{item.label}</span>
|
||||
<span className="text-[#616161] mr-[6px] text-[12px] font-normal">
|
||||
{item.label}
|
||||
</span>
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default Cards
|
||||
export default Cards;
|
||||
|
||||
+75
-64
@@ -1,70 +1,81 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { LineChart, lineElementClasses } from "@mui/x-charts"
|
||||
import { LineChart, lineElementClasses } from "@mui/x-charts";
|
||||
|
||||
function Chart({ data, loading }) {
|
||||
return (
|
||||
<LineChart
|
||||
loading={loading}
|
||||
xAxis={[{
|
||||
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
|
||||
disableLine: true,
|
||||
disableTicks: true,
|
||||
}]}
|
||||
series={[
|
||||
{
|
||||
id: 'income',
|
||||
data: data.chart_amount_income,
|
||||
area: true,
|
||||
showMark: false,
|
||||
},
|
||||
]}
|
||||
yAxis={[{
|
||||
disableLine: true,
|
||||
disableTicks: true
|
||||
}]}
|
||||
margin={{
|
||||
left: 60,
|
||||
right: 50,
|
||||
top: 10,
|
||||
bottom: 60,
|
||||
}}
|
||||
sx={{
|
||||
[`& .${lineElementClasses.root}`]: {
|
||||
strokeWidth: 3,
|
||||
stroke: loading ? '#E6E6E6' : '#5559CE'
|
||||
},
|
||||
'& .MuiAreaElement-series-income': {
|
||||
fill: "url('#myGradient') !important",
|
||||
},
|
||||
'& .MuiChartsAxis-directionY .MuiChartsAxis-tickLabel': {
|
||||
fontSize: '14px !important',
|
||||
fontWeight: '400 !important',
|
||||
fill: '#858D9D'
|
||||
},
|
||||
'& .MuiChartsAxis-directionX .MuiChartsAxis-tickLabel': {
|
||||
fontSize: '10px !important',
|
||||
fontWeight: '400 !important',
|
||||
fill: '#7E7E7E'
|
||||
},
|
||||
'& .MuiChartsGrid-line': {
|
||||
strokeDasharray: 2
|
||||
},
|
||||
'& .MuiChartsAxis-directionY': {
|
||||
// transform: 'translateX(-50px) !important'
|
||||
}
|
||||
}}
|
||||
grid={{ horizontal: true }}
|
||||
className='!w-full !mt-[20px] !h-[250px]'
|
||||
return (
|
||||
<LineChart
|
||||
loading={loading}
|
||||
xAxis={[
|
||||
{
|
||||
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
|
||||
disableLine: true,
|
||||
disableTicks: true,
|
||||
},
|
||||
]}
|
||||
series={[
|
||||
{
|
||||
id: "income",
|
||||
data: data.chart_amount_income,
|
||||
area: true,
|
||||
showMark: false,
|
||||
},
|
||||
]}
|
||||
yAxis={[
|
||||
{
|
||||
disableLine: true,
|
||||
disableTicks: true,
|
||||
},
|
||||
]}
|
||||
margin={{
|
||||
left: 60,
|
||||
right: 50,
|
||||
top: 10,
|
||||
bottom: 60,
|
||||
}}
|
||||
sx={{
|
||||
[`& .${lineElementClasses.root}`]: {
|
||||
strokeWidth: 3,
|
||||
stroke: loading ? "#E6E6E6" : "#5559CE",
|
||||
},
|
||||
"& .MuiAreaElement-series-income": {
|
||||
fill: "url('#myGradient') !important",
|
||||
},
|
||||
"& .MuiChartsAxis-directionY .MuiChartsAxis-tickLabel": {
|
||||
fontSize: "14px !important",
|
||||
fontWeight: "400 !important",
|
||||
fill: "#858D9D",
|
||||
},
|
||||
"& .MuiChartsAxis-directionX .MuiChartsAxis-tickLabel": {
|
||||
fontSize: "10px !important",
|
||||
fontWeight: "400 !important",
|
||||
fill: "#7E7E7E",
|
||||
},
|
||||
"& .MuiChartsGrid-line": {
|
||||
strokeDasharray: 2,
|
||||
},
|
||||
"& .MuiChartsAxis-directionY": {
|
||||
// transform: 'translateX(-50px) !important'
|
||||
},
|
||||
}}
|
||||
grid={{ horizontal: true }}
|
||||
className="!w-full !mt-[20px] !h-[250px]"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="myGradient"
|
||||
x1="252.5"
|
||||
y1="0"
|
||||
x2="252.5"
|
||||
y2="145"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="myGradient" x1="252.5" y1="0" x2="252.5" y2="145" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#3A6FF8" stopOpacity="0.1" />
|
||||
<stop offset="1" stopColor="#3A6FF8" stopOpacity="0.02" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</LineChart>
|
||||
)
|
||||
<stop stopColor="#3A6FF8" stopOpacity="0.1" />
|
||||
<stop offset="1" stopColor="#3A6FF8" stopOpacity="0.02" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</LineChart>
|
||||
);
|
||||
}
|
||||
|
||||
export default Chart
|
||||
export default Chart;
|
||||
|
||||
@@ -1,47 +1,50 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import ArrowDownP from "@/components/icons/ArrowDownP";
|
||||
import { MenuItem, Select } from "@mui/material";
|
||||
|
||||
function Head() {
|
||||
const list = [
|
||||
{ id: 1, text: "سال 1402" },
|
||||
{ id: 2, text: "سال 1403" },
|
||||
{ id: 3, text: "سال 1404" },
|
||||
{ id: 4, text: "سال 1405" },
|
||||
{ id: 5, text: "سال 1406" },
|
||||
{ id: 6, text: "سال 1407" },
|
||||
];
|
||||
|
||||
const list = [
|
||||
{ id: 1, text: 'سال 1402' },
|
||||
{ id: 2, text: 'سال 1403' },
|
||||
{ id: 3, text: 'سال 1404' },
|
||||
{ id: 4, text: 'سال 1405' },
|
||||
{ id: 5, text: 'سال 1406' },
|
||||
{ id: 6, text: 'سال 1407' }
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[12px] p-[16px]">
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">میزان درآمد</p>
|
||||
<Select
|
||||
defaultValue={1}
|
||||
className="!text-[#7E7E7E] !text-[12px] !font-normal !rounded-[4px]"
|
||||
IconComponent={e => <ArrowDownP data={e} />}
|
||||
sx={{
|
||||
'& .MuiSelect-select': {
|
||||
padding: '8px 6px 8px 8px !important',
|
||||
},
|
||||
'&:hover': {
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
border: '1px solid #D7D7D7 !important'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: '#D7D7D7 !important',
|
||||
border: '1px solid #D7D7D7 !important'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{list.map((item, idx) => (
|
||||
<MenuItem value={item.id} key={idx}>{item.text}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[12px] p-[16px]">
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
|
||||
میزان درآمد
|
||||
</p>
|
||||
<Select
|
||||
defaultValue={1}
|
||||
className="!text-[#7E7E7E] !text-[12px] !font-normal !rounded-[4px]"
|
||||
IconComponent={(e) => <ArrowDownP data={e} />}
|
||||
sx={{
|
||||
"& .MuiSelect-select": {
|
||||
padding: "8px 6px 8px 8px !important",
|
||||
},
|
||||
"&:hover": {
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "1px solid #D7D7D7 !important",
|
||||
},
|
||||
},
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
borderColor: "#D7D7D7 !important",
|
||||
border: "1px solid #D7D7D7 !important",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{list.map((item, idx) => (
|
||||
<MenuItem value={item.id} key={idx}>
|
||||
{item.text}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
import Chart from "./Chart"
|
||||
import Head from "./Head"
|
||||
import Chart from "./Chart";
|
||||
import Head from "./Head";
|
||||
|
||||
function AmountOfIncome({ data, loading }) {
|
||||
return (
|
||||
<div className="rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
|
||||
<Head />
|
||||
<div dir="ltr">
|
||||
<Chart data={data} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
|
||||
<Head />
|
||||
<div dir="ltr">
|
||||
<Chart data={data} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AmountOfIncome
|
||||
export default AmountOfIncome;
|
||||
|
||||
@@ -6,25 +6,24 @@ import Cards from "./Cards";
|
||||
import List from "./list";
|
||||
|
||||
function DashboardPage({ data }) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="flex mt-[4px] flex-col gap-[20px] opacity-page">
|
||||
<Cards data={data} loading={loading} />
|
||||
<List data={data} loading={loading} />
|
||||
<AmountOfIncome data={data} loading={loading} />
|
||||
<div className="flex xl:hidden">
|
||||
<Activities data={data} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex mt-[4px] flex-col gap-[20px] opacity-page">
|
||||
<Cards data={data} loading={loading} />
|
||||
<List data={data} loading={loading} />
|
||||
<AmountOfIncome data={data} loading={loading} />
|
||||
<div className="flex xl:hidden">
|
||||
<Activities data={data} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DashboardPage
|
||||
export default DashboardPage;
|
||||
|
||||
@@ -1,71 +1,81 @@
|
||||
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"
|
||||
import Image from "next/image"
|
||||
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";
|
||||
import Image from "next/image";
|
||||
|
||||
function Table({ data, loading }) {
|
||||
const tableHead = ["ردیف", "نام پزشک", "تخصص", "تاریخ", "ساعت", "تعدد نوبت"];
|
||||
const centerTable = [0, 4];
|
||||
|
||||
const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'تعدد نوبت'];
|
||||
const centerTable = [0, 4];
|
||||
|
||||
return (
|
||||
<div className="hidden md:flex">
|
||||
<CustomTable
|
||||
zeroRadius={true}
|
||||
tableHead={tableHead}
|
||||
centerTable={centerTable}
|
||||
return (
|
||||
<div className="hidden md:flex">
|
||||
<CustomTable
|
||||
zeroRadius={true}
|
||||
tableHead={tableHead}
|
||||
centerTable={centerTable}
|
||||
>
|
||||
{data.list_of_doctors_appointments.map((row, idx) => (
|
||||
<TableRow key={idx} className="!border-0 !border-b !border-[#DBDBDB]">
|
||||
<TableCell
|
||||
className="!pr-[18px] !text-[#616161] !text-[16px] !font-medium !text-nowrap"
|
||||
align="center"
|
||||
>
|
||||
{data.list_of_doctors_appointments.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className='!border-0 !border-b !border-[#DBDBDB]'
|
||||
>
|
||||
<TableCell className='!pr-[18px] !text-[#616161] !text-[16px] !font-medium !text-nowrap' align="center">
|
||||
<TextLoading width={15} height={18} loading={loading}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!pr-[18px] !text-[#616161] !text-[16px] !font-medium !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 !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={30} height={18} loading={loading}>
|
||||
{row.expertise}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-start !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-center !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.hour}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-right !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.number_of_turns}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</div>
|
||||
)
|
||||
<TextLoading width={15} height={18} loading={loading}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!pr-[18px] !text-[#616161] !text-[16px] !font-medium !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 !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={30} height={18} loading={loading}>
|
||||
{row.expertise}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-start !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-center !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.hour}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-right !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.number_of_turns}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Table
|
||||
export default Table;
|
||||
|
||||
@@ -1,27 +1,29 @@
|
||||
import { Button } from "@mui/material"
|
||||
import ArrowLeftP from "../../../icons/ArrowLeftP"
|
||||
import Table from "./Table"
|
||||
import ColTable from "../../ColTable"
|
||||
import { Button } from "@mui/material";
|
||||
import ArrowLeftP from "../../../icons/ArrowLeftP";
|
||||
import Table from "./Table";
|
||||
import ColTable from "../../ColTable";
|
||||
|
||||
function List({ data, loading }) {
|
||||
return (
|
||||
<div className="rounded-[8px] border overflow-hidden border-solid w-full border-transparent md:border-[#EFEFEF] bg-transparent md:bg-[#FFF]">
|
||||
<div className="flex items-center justify-between p-[16px]">
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">لیست نوبت های پزشکان</p>
|
||||
<Button
|
||||
variant="text"
|
||||
className="!hidden md:!flex !items-center !justify-center !text-[#616161] !text-[14px] !font-normal !gap-[4px] !p-1"
|
||||
>
|
||||
مشاهده همه
|
||||
<ArrowLeftP />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="w-full overflow-auto">
|
||||
<Table data={data} loading={loading} />
|
||||
<ColTable data={data.list_of_doctors_appointments} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="rounded-[8px] border overflow-hidden border-solid w-full border-transparent md:border-[#EFEFEF] bg-transparent md:bg-[#FFF]">
|
||||
<div className="flex items-center justify-between p-[16px]">
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">
|
||||
لیست نوبت های پزشکان
|
||||
</p>
|
||||
<Button
|
||||
variant="text"
|
||||
className="!hidden md:!flex !items-center !justify-center !text-[#616161] !text-[14px] !font-normal !gap-[4px] !p-1"
|
||||
>
|
||||
مشاهده همه
|
||||
<ArrowLeftP />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="w-full overflow-auto">
|
||||
<Table data={data} loading={loading} />
|
||||
<ColTable data={data.list_of_doctors_appointments} loading={loading} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default List
|
||||
export default List;
|
||||
|
||||
@@ -1,26 +1,21 @@
|
||||
import { Button, ButtonGroup } from "@mui/material"
|
||||
import { Button, ButtonGroup } from "@mui/material";
|
||||
|
||||
function Date() {
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-y-[20px] gap-[8px] md:gap-0">
|
||||
<p className="text-[#616161] text-[14px] font-normal md:hidden">انتخاب بازه زمانی</p>
|
||||
<ButtonGroup
|
||||
variant="outlined"
|
||||
className=""
|
||||
>
|
||||
<Button
|
||||
className="!border-[#EFEFEF] !bg-[#FFF] !py-[4.5px] !px-[33px] !text-[#7E7E7E] !text-[16px] !font-normal"
|
||||
>
|
||||
از تاریخ
|
||||
</Button>
|
||||
<Button
|
||||
className="!border-[#EFEFEF] !bg-[#FFF] !py-[4.5px] !px-[33px] !text-[#7E7E7E] !text-[16px] !font-normal"
|
||||
>
|
||||
تا تاریخ
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-y-[20px] gap-[8px] md:gap-0">
|
||||
<p className="text-[#616161] text-[14px] font-normal md:hidden">
|
||||
انتخاب بازه زمانی
|
||||
</p>
|
||||
<ButtonGroup variant="outlined" className="">
|
||||
<Button className="!border-[#EFEFEF] !bg-[#FFF] !py-[4.5px] !px-[33px] !text-[#7E7E7E] !text-[16px] !font-normal">
|
||||
از تاریخ
|
||||
</Button>
|
||||
<Button className="!border-[#EFEFEF] !bg-[#FFF] !py-[4.5px] !px-[33px] !text-[#7E7E7E] !text-[16px] !font-normal">
|
||||
تا تاریخ
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Date
|
||||
export default Date;
|
||||
|
||||
@@ -1,53 +1,53 @@
|
||||
import ArrowBottomP from '@/components/icons/ArrowBottomP'
|
||||
import ExportP from '@/components/icons/ExportP'
|
||||
import SearchD from '@/components/icons/SearchD'
|
||||
import { Button, ButtonGroup, TextField } from '@mui/material'
|
||||
import ArrowBottomP from "@/components/icons/ArrowBottomP";
|
||||
import ExportP from "@/components/icons/ExportP";
|
||||
import SearchD from "@/components/icons/SearchD";
|
||||
import { Button, ButtonGroup, TextField } from "@mui/material";
|
||||
|
||||
function SearchDoctor() {
|
||||
return (
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-y-[20px] justify-between mt-[20px] md:mt-[22px] lg:mt-[24px] ">
|
||||
<ButtonGroup
|
||||
variant="contained"
|
||||
className="!bg-[#FFF] lg:!w-[55%] !rounded-[4px] !overflow-hidden
|
||||
return (
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-y-[20px] justify-between mt-[20px] md:mt-[22px] lg:mt-[24px] ">
|
||||
<ButtonGroup
|
||||
variant="contained"
|
||||
className="!bg-[#FFF] lg:!w-[55%] !rounded-[4px] !overflow-hidden
|
||||
flex items-center !shadow-none !h-fit !p-1 !border !border-[#EFEFEF]"
|
||||
>
|
||||
<TextField
|
||||
variant="standard"
|
||||
InputProps={{
|
||||
disableUnderline: true
|
||||
}}
|
||||
sx={{
|
||||
background: 'transparent !important',
|
||||
'& .MuiInputBase-root': { height: '100%' },
|
||||
'& .MuiInput-root': { borderBottom: 'none', },
|
||||
'& .MuiInputBase-input': {
|
||||
background: 'transparent',
|
||||
color: '#7E7E7E',
|
||||
padding: '0'
|
||||
}
|
||||
}}
|
||||
placeholder='جستجو براساس نام پزشک...'
|
||||
dir='rtl'
|
||||
className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
|
||||
/>
|
||||
<Button
|
||||
className="
|
||||
>
|
||||
<TextField
|
||||
variant="standard"
|
||||
InputProps={{
|
||||
disableUnderline: true,
|
||||
}}
|
||||
sx={{
|
||||
background: "transparent !important",
|
||||
"& .MuiInputBase-root": { height: "100%" },
|
||||
"& .MuiInput-root": { borderBottom: "none" },
|
||||
"& .MuiInputBase-input": {
|
||||
background: "transparent",
|
||||
color: "#7E7E7E",
|
||||
padding: "0",
|
||||
},
|
||||
}}
|
||||
placeholder="جستجو براساس نام پزشک..."
|
||||
dir="rtl"
|
||||
className={`!shadow-none !w-full !px-5 !h-full bg-[#FAFAFA] !text-[14px] md:!text-[16px] !min-w-[50%] !rounded-0 !font-normal !text-[#6C757D]`}
|
||||
/>
|
||||
<Button
|
||||
className="
|
||||
!rounded-[4px] !p-[8px] !w-[56px] !h-[56px] !max-w-[40px] !max-h-[40px]
|
||||
"
|
||||
>
|
||||
<SearchD />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<Button
|
||||
variant='outlined'
|
||||
className='!border-[#5559CE] !flex !text-[14px] md:!text-[16px] !items-center !gap-[4px] md:!gap-[5px] lg:!gap-[6px] !rounded-[4px] !py-[8px] md:!py-[9px] !px-[12px] sm:!px-[14px] md:!px-[16px] lg:!px-[18px]'
|
||||
>
|
||||
<ExportP />
|
||||
خروجی گرفتن
|
||||
<ArrowBottomP />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
>
|
||||
<SearchD />
|
||||
</Button>
|
||||
</ButtonGroup>
|
||||
<Button
|
||||
variant="outlined"
|
||||
className="!border-[#5559CE] !flex !text-[14px] md:!text-[16px] !items-center !gap-[4px] md:!gap-[5px] lg:!gap-[6px] !rounded-[4px] !py-[8px] md:!py-[9px] !px-[12px] sm:!px-[14px] md:!px-[16px] lg:!px-[18px]"
|
||||
>
|
||||
<ExportP />
|
||||
خروجی گرفتن
|
||||
<ArrowBottomP />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default SearchDoctor
|
||||
export default SearchDoctor;
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
import Date from "./Date"
|
||||
import SearchDoctor from "./SearchDoctor"
|
||||
import Date from "./Date";
|
||||
import SearchDoctor from "./SearchDoctor";
|
||||
|
||||
function Head() {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="flex flex-col sm:flex-row items-start md:items-center justify-start gap-[10px]">
|
||||
<p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">لیست نوبت های پزشکان</p>
|
||||
<Date />
|
||||
</div>
|
||||
<SearchDoctor />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="flex flex-col sm:flex-row items-start md:items-center justify-start gap-[10px]">
|
||||
<p className="text-[#525252] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
|
||||
لیست نوبت های پزشکان
|
||||
</p>
|
||||
<Date />
|
||||
</div>
|
||||
<SearchDoctor />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -1,27 +1,25 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import Head from "./head";
|
||||
import List from "./list";
|
||||
|
||||
|
||||
function TurnsPage({ data }) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [loading, setLoading] = useState(true);
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="bg-transparent md:bg-[#FFF] opacity-page rounded-[8px] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] pt-0 md:pt-[12px] lg:pt-[24px] px-0 md:px-[24px] p-[24px]">
|
||||
<Head />
|
||||
<List data={data} loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="bg-transparent md:bg-[#FFF] opacity-page rounded-[8px] shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] pt-0 md:pt-[12px] lg:pt-[24px] px-0 md:px-[24px] p-[24px]">
|
||||
<Head />
|
||||
<List data={data} loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TurnsPage
|
||||
export default TurnsPage;
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import React from 'react'
|
||||
import React from "react";
|
||||
|
||||
function Cards() {
|
||||
return (
|
||||
<div className='flex hidden'>Cards</div>
|
||||
)
|
||||
return <div className="flex hidden">Cards</div>;
|
||||
}
|
||||
|
||||
export default Cards
|
||||
export default Cards;
|
||||
|
||||
@@ -8,69 +8,76 @@ import CustomLoading from "@/app/component/loading/Custom";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
|
||||
function Table({ data, loading }) {
|
||||
const tableHead = ["ردیف", "نام پزشک", "تخصص", "تاریخ", "ساعت", "تعدد نوبت"];
|
||||
const centerTable = [0, 4];
|
||||
|
||||
const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'تعدد نوبت'];
|
||||
const centerTable = [0, 4];
|
||||
|
||||
return (
|
||||
<div className="hidden md:flex flex-col">
|
||||
<CustomTable
|
||||
tableHead={tableHead}
|
||||
centerTable={centerTable}
|
||||
return (
|
||||
<div className="hidden md:flex flex-col">
|
||||
<CustomTable tableHead={tableHead} centerTable={centerTable}>
|
||||
{data.list_of_doctors_appointments.map((row, idx) => (
|
||||
<TableRow key={idx} className="!border-0 !border-b !border-[#DBDBDB]">
|
||||
<TableCell
|
||||
className="!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
|
||||
align="center"
|
||||
>
|
||||
{data.list_of_doctors_appointments.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className='!border-0 !border-b !border-[#DBDBDB]'
|
||||
>
|
||||
<TableCell className='!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="center">
|
||||
<TextLoading width={15} height={18} loading={loading}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-[#616161] !text-[16px] !font-medium !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-[#616161] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.expertise}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-[#616161] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap' align="left">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-[#616161] !text-[16px] !font-medium !text-center !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.hour}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="left">
|
||||
<CustomLoading width={80} height={22} loading={loading}>
|
||||
{row.number_of_turns}
|
||||
</CustomLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
<div className="w-full flex justify-center mt-[48px]">
|
||||
<Pagination />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
<TextLoading width={15} height={18} loading={loading}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-[#616161] !text-[16px] !font-medium !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-[#616161] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.expertise}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-[#616161] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap"
|
||||
align="left"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-[#616161] !text-[16px] !font-medium !text-center !pr-[18px] !text-nowrap"
|
||||
align="right"
|
||||
>
|
||||
<TextLoading width={50} height={18} loading={loading}>
|
||||
{row.hour}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap"
|
||||
align="left"
|
||||
>
|
||||
<CustomLoading width={80} height={22} loading={loading}>
|
||||
{row.number_of_turns}
|
||||
</CustomLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
<div className="w-full flex justify-center mt-[48px]">
|
||||
<Pagination />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Table
|
||||
export default Table;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import ColTable from "../../ColTable"
|
||||
import Table from "./Table"
|
||||
import ColTable from "../../ColTable";
|
||||
import Table from "./Table";
|
||||
|
||||
function List({ data, loading }) {
|
||||
return (
|
||||
<div className="mt-[32px] pb-[20px] table-rounded-8">
|
||||
<Table data={data} loading={loading} />
|
||||
<ColTable data={data.list_of_doctors_appointments} loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="mt-[32px] pb-[20px] table-rounded-8">
|
||||
<Table data={data} loading={loading} />
|
||||
<ColTable data={data.list_of_doctors_appointments} loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default List
|
||||
export default List;
|
||||
|
||||
@@ -3,20 +3,20 @@ import ProfileP from "@/components/icons/ProfileP";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
function Head() {
|
||||
return (
|
||||
<div className="flex items-center justify-center md:justify-start gap-[10px]">
|
||||
<div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
|
||||
<ProfileP />
|
||||
</div>
|
||||
<Button
|
||||
variant="text"
|
||||
className="!flex !p-1 !text-[#525252] !text-[14px] md:!text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
|
||||
>
|
||||
انتخاب تصویر
|
||||
<ArrowLeftPU />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="flex items-center justify-center md:justify-start gap-[10px]">
|
||||
<div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
|
||||
<ProfileP />
|
||||
</div>
|
||||
<Button
|
||||
variant="text"
|
||||
className="!flex !p-1 !text-[#525252] !text-[14px] md:!text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
|
||||
>
|
||||
انتخاب تصویر
|
||||
<ArrowLeftPU />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
@@ -11,85 +11,119 @@ import { Button } from "@mui/material";
|
||||
import ArrowLeftButtonP from "@/components/icons/ArrowLeftButtonP";
|
||||
|
||||
function Form() {
|
||||
const [data, setData] = useState({
|
||||
name: { value: "احسان احمدی", isEdit: false },
|
||||
national_code: { value: "123456789", isEdit: false },
|
||||
address: { value: "", isEdit: false },
|
||||
phone: { value: "", isEdit: false },
|
||||
account_number: { value: "", isEdit: false },
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
state: "",
|
||||
city: "",
|
||||
bank: "",
|
||||
});
|
||||
const updateSelect = (event, name) =>
|
||||
setSelected({ ...selected, [name]: event.target.innerText });
|
||||
|
||||
const [data, setData] = useState({
|
||||
name: { value: 'احسان احمدی', isEdit: false },
|
||||
national_code: { value: '123456789', isEdit: false },
|
||||
address: { value: '', isEdit: false },
|
||||
phone: { value: '', isEdit: false },
|
||||
account_number: { value: '', isEdit: false },
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value,
|
||||
},
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
state: '',
|
||||
city: '',
|
||||
bank: ''
|
||||
});
|
||||
const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
|
||||
|
||||
const changeData = (value, type, name) =>
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-start justify-start gap-[32px] md:gap-[40px] lg:gap-[48px]">
|
||||
<ul className="grid w-full grid-cols-1 md:grid-cols-2 mt-[24px] md:mt-[28px] lg:mt-[32px] gap-x-[48px] gap-y-[24px] md:gap-y-[28px] lg:gap-y-[32px]">
|
||||
<ContentText text='نام و نام خانوادگی'>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.name} name='name' />
|
||||
</ContentText>
|
||||
<ContentText text='کد ملی'>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.national_code} name='national_code' />
|
||||
</ContentText>
|
||||
<ContentText text='استان'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='state'
|
||||
list={state}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='شهر'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='city'
|
||||
list={city}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='آدرس'>
|
||||
<EditField icon={<AddLocationP />} isTransparent={true} placeholder='از روی نقشه انتخاب کنید...' iconGray={true} changeData={changeData} data={data?.address} name='address' />
|
||||
</ContentText>
|
||||
<ContentText text='شماره موبایل'>
|
||||
<EditField isTransparent={true} placeholder='شماره موبایل' iconGray={true} changeData={changeData} data={data?.phone} name='phone' />
|
||||
</ContentText>
|
||||
<ContentText text='شماره حساب'>
|
||||
<EditField isTransparent={true} placeholder='شماره حساب' iconGray={true} changeData={changeData} data={data?.account_number} name='account_number' />
|
||||
</ContentText>
|
||||
<ContentText text='شهر'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='bank'
|
||||
list={bank}
|
||||
/>
|
||||
</ContentText>
|
||||
</ul>
|
||||
<div className="w-full flex justify-end">
|
||||
<Button
|
||||
variant="contained"
|
||||
className="!gap-[4px] !py-[8px] !px-[24px] !rounded-[4px] !w-full md:!w-fit
|
||||
return (
|
||||
<div className="flex flex-col items-start justify-start gap-[32px] md:gap-[40px] lg:gap-[48px]">
|
||||
<ul className="grid w-full grid-cols-1 md:grid-cols-2 mt-[24px] md:mt-[28px] lg:mt-[32px] gap-x-[48px] gap-y-[24px] md:gap-y-[28px] lg:gap-y-[32px]">
|
||||
<ContentText text="نام و نام خانوادگی">
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.name}
|
||||
name="name"
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="کد ملی">
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.national_code}
|
||||
name="national_code"
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="استان">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="انتخاب کنید..."
|
||||
name="state"
|
||||
list={state}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="شهر">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="انتخاب کنید..."
|
||||
name="city"
|
||||
list={city}
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="آدرس">
|
||||
<EditField
|
||||
icon={<AddLocationP />}
|
||||
isTransparent={true}
|
||||
placeholder="از روی نقشه انتخاب کنید..."
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.address}
|
||||
name="address"
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="شماره موبایل">
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
placeholder="شماره موبایل"
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.phone}
|
||||
name="phone"
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="شماره حساب">
|
||||
<EditField
|
||||
isTransparent={true}
|
||||
placeholder="شماره حساب"
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.account_number}
|
||||
name="account_number"
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text="شهر">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label="انتخاب کنید..."
|
||||
name="bank"
|
||||
list={bank}
|
||||
/>
|
||||
</ContentText>
|
||||
</ul>
|
||||
<div className="w-full flex justify-end">
|
||||
<Button
|
||||
variant="contained"
|
||||
className="!gap-[4px] !py-[8px] !px-[24px] !rounded-[4px] !w-full md:!w-fit
|
||||
!shadow-none !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftButtonP />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftButtonP />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Form
|
||||
export default Form;
|
||||
|
||||
@@ -1,20 +1,20 @@
|
||||
export const state = [
|
||||
{ label: 'استان 1', id: 10 },
|
||||
{ label: 'استان 2', id: 20 },
|
||||
{ label: 'استان 3', id: 30 },
|
||||
{ label: 'استان 4', id: 40 }
|
||||
{ label: "استان 1", id: 10 },
|
||||
{ label: "استان 2", id: 20 },
|
||||
{ label: "استان 3", id: 30 },
|
||||
{ label: "استان 4", id: 40 },
|
||||
];
|
||||
|
||||
export const city = [
|
||||
{ label: 'شهر 1', id: 10 },
|
||||
{ label: 'شهر 2', id: 20 },
|
||||
{ label: 'شهر 3', id: 30 },
|
||||
{ label: 'شهر 4', id: 40 }
|
||||
{ label: "شهر 1", id: 10 },
|
||||
{ label: "شهر 2", id: 20 },
|
||||
{ label: "شهر 3", id: 30 },
|
||||
{ label: "شهر 4", id: 40 },
|
||||
];
|
||||
|
||||
export const bank = [
|
||||
{ label: 'بانک 1', id: 10 },
|
||||
{ label: 'بانک 2', id: 20 },
|
||||
{ label: 'بانک 3', id: 30 },
|
||||
{ label: 'بانک 4', id: 40 }
|
||||
];
|
||||
{ label: "بانک 1", id: 10 },
|
||||
{ label: "بانک 2", id: 20 },
|
||||
{ label: "بانک 3", id: 30 },
|
||||
{ label: "بانک 4", id: 40 },
|
||||
];
|
||||
|
||||
@@ -2,16 +2,18 @@ import Form from "./form";
|
||||
import Head from "./Head";
|
||||
|
||||
function UserAccountPage({ data }) {
|
||||
return (
|
||||
<div className="
|
||||
return (
|
||||
<div
|
||||
className="
|
||||
opacity-page rounded-[8px] bg-transparent md:bg-[#FFF]
|
||||
shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] py-0 md:py-[16px] lg:py-[32px]
|
||||
px-0 sm:px-[14px] md:px-[24px] lg:px-[44px] xl:px-[112px]
|
||||
">
|
||||
<Head />
|
||||
<Form />
|
||||
</div>
|
||||
)
|
||||
"
|
||||
>
|
||||
<Head />
|
||||
<Form />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default UserAccountPage
|
||||
export default UserAccountPage;
|
||||
|
||||
Reference in New Issue
Block a user