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

responsive page user-account & add-doctor & turns & add loading to all page panel & change design page dashboard

Browse Source
This commit is contained in:
Ehsan
2024-09-14 02:41:38 +03:30
parent d1f289bdca
commit 9d1c4aa299
60 changed files with 459 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/panel/dashboard/list/ColTable.js → components/panel/ColTable.js
+18 -10
View File
@@ -2,17 +2,17 @@ import CircularLoading from "@/app/component/loading/Circular"
import TextLoading from "@/app/component/loading/Text"
import Image from "next/image"
function ColTable({ data }) {
function ColTable({ data, loading }) {
return (
<ul className="flex md:hidden flex-col gap-[16px]">
{data.list_of_doctors_appointments.map((item, idx) => (
{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={false}>
<CircularLoading width={32} height={32} loading={loading}>
<Image
src={item.image}
alt='doctor'
@@ -20,28 +20,36 @@ function ColTable({ data }) {
width={32}
/>
</CircularLoading>
<TextLoading width={40} height={18} loading={false}>
<TextLoading width={40} height={18} loading={loading}>
{item.name}
</TextLoading>
</div>
<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 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>
<p className="text-[#616161] text-[14px] font-medium">{item.expertise}</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>
<p className="text-[#616161] text-[14px] font-medium">{item.date}</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>
<p className="text-[#616161] text-[14px] font-medium">{item.hour}</p>
<TextLoading width={60} height={18} loading={loading}>
<p className="text-[#616161] text-[14px] font-medium">{item.hour}</p>
</TextLoading>
</div>
</div>
</li>
components/panel/addDoctor/index.js
+25 -10
View File
@@ -3,16 +3,21 @@
import { useState } from "react";
// Tabs
import TabsHead from "./tabsHead";
import Turns from "./tabsHead/turns";
import SpecialDays from "./tabsHead/specialDays";
import WorkingDays from "./tabsHead/workingDays";
import OfficeInformation from "./tabsHead/officeInformation";
import GeneralInformation from "./tabsHead/generalInformation";
import ListMenu from "./listMenu";
import Turns from "./listMenu/turns";
import SpecialDays from "./listMenu/specialDays";
import WorkingDays from "./listMenu/workingDays";
import OfficeInformation from "./listMenu/officeInformation";
import GeneralInformation from "./listMenu/generalInformation";
import ArrowRightPH from "@/components/icons/ArrowRightPH";
import { Button } from "@mui/material";
const listTab = ['اطلاعات عمومی', 'اطلاعات مطب', 'نوبت ها', 'روزهای کاری', 'روزهای خاص'];
function AddDoctorPage() {
const [value, setValue] = useState(0);
const [open, setOpen] = useState(false);
const handleChange = (event, newValue) => setValue(newValue);
@@ -26,13 +31,23 @@ function AddDoctorPage() {
return (
<div className="opacity-page">
<p className="text-[#525252] text-[20px] font-bold">پروفایل من</p>
<div className="rounded-[8px] mt-[24px] bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] pt-[12px] pb-[24px] px-[56px]">
<TabsHead
<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-[56px]' : 'mx-0'}`}>
<div className={`mt-[24px] ${value !== 4 ? 'mx-0 md:-[14px] lg:mx-[26px] xl:mx-[56px]' : 'mx-0'}`}>
{components[value]}
</div>
</div>
components/panel/addDoctor/listMenu/Menu.js
+45
View File
@@ -0,0 +1,45 @@
import ArrowLeftPH from "@/components/icons/ArrowLeftPH"
import { Button } from "@mui/material"
function Menu({ value, open, setOpen, listTab, handleChange }) {
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'
}
`}
>
{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'}
`}
>{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
components/panel/addDoctor/tabsHead/index.js → components/panel/addDoctor/listMenu/Tab.js
+3 -5
View File
@@ -1,8 +1,6 @@
import Tabs from "@/app/component/Tabs";
import Tabs from "@/app/component/Tabs"
const listTab = ['اطلاعات عمومی', 'اطلاعات مطب', 'نوبت ها', 'روزهای کاری', 'روزهای خاص'];
function TabsHead({ value, handleChange }) {
function Tab({ value, listTab, handleChange }) {
return (
<Tabs
isSm={false}
@@ -34,4 +32,4 @@ function TabsHead({ value, handleChange }) {
)
}
export default TabsHead;
export default Tab
components/panel/addDoctor/tabsHead/generalInformation/Head.js → components/panel/addDoctor/listMenu/generalInformation/Head.js
+1 -1
View File
@@ -4,7 +4,7 @@ import { Button } from "@mui/material"
function Head() {
return (
<div className="flex items-center justify-start gap-[10px]">
<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>
components/panel/addDoctor/tabsHead/generalInformation/form/Form.js → components/panel/addDoctor/listMenu/generalInformation/form/Form.js
+3 -3
View File
@@ -16,7 +16,7 @@ function Form() {
expertise: { value: 'دندان پزشکی', isEdit: false },
description: { value: '', isEdit: false },
skills: { value: '', isEdit: false },
time_work: { value: '', isEdit: false },
time_work: { value: '', isEdit: false }
});
const [selected, setSelected] = useState({
degree: '',
@@ -34,7 +34,7 @@ function Form() {
return (
<div>
<div className="mt-[28px] grid grid-cols-2 gap-x-[48px] gap-y-[24px]">
<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>
@@ -67,7 +67,7 @@ function Form() {
</div>
<div className="mt-[40px] w-full flex justify-end">
<Button
className="!bg-[#5559CE] !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[16px] !font-medium"
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"
>
ثبت اطلاعات
components/panel/addDoctor/tabsHead/generalInformation/form/RadioGender.js → components/panel/addDoctor/listMenu/generalInformation/form/RadioGender.js
View File
components/panel/addDoctor/tabsHead/generalInformation/form/listSelector.js → components/panel/addDoctor/listMenu/generalInformation/form/listSelector.js
View File
components/panel/addDoctor/tabsHead/generalInformation/index.js → components/panel/addDoctor/listMenu/generalInformation/index.js
View File
components/panel/addDoctor/listMenu/index.js
+27
View File
@@ -0,0 +1,27 @@
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>
</>
)
}
export default ListMenu;
components/panel/addDoctor/tabsHead/officeInformation/Form.js → components/panel/addDoctor/listMenu/officeInformation/Form.js
+1 -1
View File
@@ -32,7 +32,7 @@ function Form() {
});
return (
<div className="mt-[24px] grid grid-cols-2 gap-x-[48px] gap-y-[24px]">
<div className="mt-[24px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
<ContentText text='استان'>
<AutoCompleteSelect
updateData={updateSelect}
components/panel/addDoctor/tabsHead/officeInformation/index.js → components/panel/addDoctor/listMenu/officeInformation/index.js
+1 -1
View File
@@ -8,7 +8,7 @@ function OfficeInformation() {
<Form />
<div className="mt-[40px] w-full flex justify-end">
<Button
className="!bg-[#5559CE] !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[16px] !font-medium"
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"
>
ثبت اطلاعات
components/panel/addDoctor/tabsHead/officeInformation/listSelector.js → components/panel/addDoctor/listMenu/officeInformation/listSelector.js
View File
components/panel/addDoctor/tabsHead/specialDays/Form.js → components/panel/addDoctor/listMenu/specialDays/Form.js
+5 -5
View File
@@ -29,7 +29,7 @@ function Form() {
return (
<div className="flex flex-col w-full-content">
<div className="flex w-full items-center justify-start gap-[16px]">
<div className="flex flex-col sm:flex-row w-full items-center justify-start gap-[16px]">
<ContentText text='تعداد نوبت در هر روز'>
<AutoCompleteSelect
updateData={updateSelect}
@@ -46,10 +46,10 @@ function Form() {
list={timeEachTurn}
/>
</ContentText>
<div className="content-text-panel"></div>
<div className="min-w-[152px]"></div>
<div className="hidden lg:flex content-text-panel"></div>
<div className="hidden lg:flex min-w-[152px]"></div>
</div>
<div className="flex items-end justify-center gap-[16px] mt-[32px]">
<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}
@@ -76,7 +76,7 @@ function Form() {
</ContentText>
<Button
variant="outlined"
className="!border-[#5559CE] !gap-[4px] !min-w-[152px]"
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 />
اضافه کردن
components/panel/addDoctor/tabsHead/specialDays/List.js → components/panel/addDoctor/listMenu/specialDays/List.js
+4 -4
View File
@@ -14,10 +14,10 @@ function List() {
const handleClose = () => setOpen(false);
return (
<div className="w-full flex flex-col mt-[48px] items-start gap-[16px]">
<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-fit"
className="!w-full md:!w-fit"
sx={{
'&.MuiTableContainer-root': {
boxShadow: 'none !important',
@@ -46,10 +46,10 @@ function List() {
<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="right">
<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="right">
<TableCell className="!border-[1px] !text-[#616161] !text-[16px] !font-medium !border-[#DBDBDB]" align="left">
{row.evening_time}
</TableCell>
</TableRow>
components/panel/addDoctor/tabsHead/specialDays/index.js → components/panel/addDoctor/listMenu/specialDays/index.js
+1 -1
View File
@@ -9,7 +9,7 @@ function SpecialDays() {
<Form />
<List />
<Button
className="!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
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]"
>
components/panel/addDoctor/tabsHead/specialDays/listSelector.js → components/panel/addDoctor/listMenu/specialDays/listSelector.js
View File
components/panel/addDoctor/tabsHead/turns/Form.js → components/panel/addDoctor/listMenu/turns/Form.js
+1 -1
View File
@@ -13,7 +13,7 @@ function Form() {
const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
return (
<div className="mt-[40px] grid grid-cols-2 gap-x-[48px] gap-y-[24px]">
<div className="mt-[40px] grid grid-cols-1 md:grid-cols-2 gap-x-[48px] gap-y-[24px]">
<ContentText text='تعداد نوبت در هر روز'>
<AutoCompleteSelect
updateData={updateSelect}
components/panel/addDoctor/tabsHead/turns/index.js → components/panel/addDoctor/listMenu/turns/index.js
+1 -1
View File
@@ -7,7 +7,7 @@ function Turns() {
<div className="opacity-page">
<Form />
<Button
className="!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
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]"
>
components/panel/addDoctor/tabsHead/turns/listSelector.js → components/panel/addDoctor/listMenu/turns/listSelector.js
View File
components/panel/addDoctor/tabsHead/workingDays/List.js → components/panel/addDoctor/listMenu/workingDays/List.js
+1 -1
View File
@@ -21,7 +21,7 @@ function List() {
return (
<div className="w-full flex justify-center">
<TableContainer
className="!mt-[32px] !w-fit"
className="!mt-[40px] md:!mt-[36px] lg:!mt-[32px] !w-fit"
sx={{
'&.MuiTableContainer-root': {
boxShadow: 'none !important',
components/panel/addDoctor/tabsHead/workingDays/index.js → components/panel/addDoctor/listMenu/workingDays/index.js
+1 -1
View File
@@ -3,7 +3,7 @@ import List from "./List"
function WorkingDays() {
return (
<div className="opacity-page">
<p className="text-[#525252] text-[16px] font-bold">لیست روزهای کاری</p>
<p className="text-[#525252] text-[14px] md:text-[16px] text-center md:text-start font-bold">لیست روزهای کاری</p>
<List />
</div>
)
components/panel/addDoctor/tabsHead/workingDays/modal/ContentModal.js → components/panel/addDoctor/listMenu/workingDays/modal/ContentModal.js
+3 -3
View File
@@ -12,7 +12,7 @@ function ContentModal({ open, setOpen, handleClose }) {
>
<Box
sx={styleDefault}
className="!w-fit !py-[20px] !px-[16px] !pb-[56px]"
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>
@@ -24,9 +24,9 @@ function ContentModal({ open, setOpen, handleClose }) {
<CloseModalD />
</Button>
</div>
<div className="mx-[52px]">
<div className="mx-0 md:mx-[52px]">
<Radios />
<Form />
<Form handleClose={handleClose} />
</div>
</Box>
</Modal>
components/panel/addDoctor/tabsHead/workingDays/modal/Form.js → components/panel/addDoctor/listMenu/workingDays/modal/Form.js
+7 -5
View File
@@ -4,7 +4,7 @@ import FieldIcon from "@/app/component/FieldIcon";
import ContentText from "@/components/panel/ContentText";
import { Button } from "@mui/material";
function Form() {
function Form({ handleClose }) {
const [data, setData] = useState({
start_time: '',
@@ -14,7 +14,7 @@ function Form() {
const changeData = (value, name) => setData({ ...data, [name]: value })
return (
<div className="flex flex-col gap-[40px] min-w-[420px]">
<div className="flex flex-col gap-[32px] md:gap-[36px] lg:gap-[40px] min-w-fit md:min-w-[420px]">
<ContentText text='زمان شروع'>
<FieldIcon
placeholder='انتخاب کنید...'
@@ -31,14 +31,16 @@ function Form() {
name='end_time'
/>
</ContentText>
<div className="flex items-center justify-center gap-[16px]">
<div className="flex flex-wrap items-center justify-center gap-[16px]">
<Button
variant="outlined"
className="!border-[#5559CE] !shadow-none !px-[48px]"
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"
className=" !shadow-none !px-[48px]"
onClick={handleClose}
className="!text-[16px] !font-medium !shadow-none !py-[5px] md:!py-[7px] lg:!py-[9px] !px-[46px]"
>ذخیره</Button>
</div>
</div>
components/panel/addDoctor/tabsHead/workingDays/modal/ModalAddTime.js → components/panel/addDoctor/listMenu/workingDays/modal/ModalAddTime.js
+1 -1
View File
@@ -8,7 +8,7 @@ function ModalAddTime({ handleOpen }) {
<Button
variant='text'
onClick={handleOpen}
className='!gap-[8px] !p-1 !text-[#5559CE] !text-[16px] !font-medium'
className='!gap-[2px] sm:!gap-[4px] md:!gap-[6px] lg:!gap-[8px] !p-1 !text-[#5559CE] !text-[14px] md:!text-[16px] !font-medium'
>
<AddTimeP />
انتخاب کنید
components/panel/addDoctor/tabsHead/workingDays/modal/Radios.js → components/panel/addDoctor/listMenu/workingDays/modal/Radios.js
+1 -1
View File
@@ -4,7 +4,7 @@ function Radios() {
return (
<RadioGroup
dir="ltr"
className="!flex !flex-row !my-[40px] !gap-[36px] !items-center !justify-end"
className="!flex !flex-row !mb-[32px] md:!mb-[36px] !my-[40px] !gap-[36px] !items-center !justify-end"
defaultValue='workingDay'
sx={{
'& .muirtl-j204z7-MuiFormControlLabel-root': {
components/panel/dashboard/Cards.js
+11 -8
View File
@@ -1,8 +1,9 @@
import CalendarTickGreenP from "../../icons/CalendarTickGreenP"
import CardOrangeP from "../../icons/CardOrangeP"
import PeopleBlueP from "../../icons/PeopleBlueP"
import CalendarTickGreenP from "../../icons/CalendarTickGreenP";
import TextLoading from "@/app/component/loading/Text";
import CardOrangeP from "../../icons/CardOrangeP";
import PeopleBlueP from "../../icons/PeopleBlueP";
function Cards({ data }) {
function Cards({ data, loading }) {
const list = [
{ text: 'تعداد کل بیماران', bg_color: 'bg-[#E5E9FF]', value: data.number_of_patients, label: 'نفر', icon: <PeopleBlueP /> },
@@ -22,10 +23,12 @@ function Cards({ data }) {
</div>
<div className="flex items-center justify-between">
<p className="text-[#525252] text-[14px] font-normal">{item.text}</p>
<p className="text-[#3B3B3B] text-[24px] font-medium">
{item.value}
<span className="text-[#616161] mr-[6px] text-[12px] font-normal">{item.label}</span>
</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>
</p>
</TextLoading>
</div>
</li>
))}
components/panel/dashboard/amountOfIncome/Chart.js
Vendored
+3 -2
View File
@@ -2,9 +2,10 @@
import { LineChart, lineElementClasses } from "@mui/x-charts"
function Chart({ data }) {
function Chart({ data, loading }) {
return (
<LineChart
loading={loading}
xAxis={[{
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
disableLine: true,
@@ -31,7 +32,7 @@ function Chart({ data }) {
sx={{
[`& .${lineElementClasses.root}`]: {
strokeWidth: 3,
stroke: '#5559CE'
stroke: loading ? '#E6E6E6' : '#5559CE'
},
'& .MuiAreaElement-series-income': {
fill: "url('#myGradient') !important",
components/panel/dashboard/amountOfIncome/index.js
+2 -2
View File
@@ -1,12 +1,12 @@
import Chart from "./Chart"
import Head from "./Head"
function AmountOfIncome({ data }) {
function AmountOfIncome({ data, loading }) {
return (
<div className="rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
<Head />
<div dir="ltr">
<Chart data={data} />
<Chart data={data} loading={loading} />
</div>
</div>
)
components/panel/dashboard/index.js
+15 -4
View File
@@ -1,16 +1,27 @@
import { useEffect, useState } from "react";
import Activities from "@/components/layoutPanel/userDetail/Activities";
import AmountOfIncome from "./amountOfIncome";
import Cards from "./Cards";
import List from "./list";
function DashboardPage({ data }) {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
return (
<div className="flex mt-[4px] flex-col gap-[20px] opacity-page">
<Cards data={data} />
<List data={data} />
<AmountOfIncome data={data} />
<Cards data={data} loading={loading} />
<List data={data} loading={loading} />
<AmountOfIncome data={data} loading={loading} />
<div className="flex xl:hidden">
<Activities data={data} />
<Activities data={data} loading={loading} />
</div>
</div>
)
components/panel/dashboard/list/Table.js
+8 -8
View File
@@ -4,7 +4,7 @@ import TextLoading from "@/app/component/loading/Text"
import { TableCell, TableRow } from "@mui/material"
import Image from "next/image"
function Table({ data }) {
function Table({ data, loading }) {
const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'تعدد نوبت'];
const centerTable = [0, 4];
@@ -22,13 +22,13 @@ function Table({ data }) {
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={false}>
<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={false}>
<CircularLoading width={32} height={32} loading={loading}>
<Image
src={row.image}
alt='doctor'
@@ -36,28 +36,28 @@ function Table({ data }) {
width={32}
/>
</CircularLoading>
<TextLoading width={40} height={18} loading={false}>
<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={false}>
<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={false}>
<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={false}>
<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={false}>
<TextLoading width={50} height={18} loading={loading}>
{row.number_of_turns}
</TextLoading>
</TableCell>
components/panel/dashboard/list/index.js
+4 -4
View File
@@ -1,9 +1,9 @@
import { Button } from "@mui/material"
import ArrowLeftP from "../../../icons/ArrowLeftP"
import Table from "./Table"
import ColTable from "./ColTable"
import ColTable from "../../ColTable"
function List({ data }) {
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]">
@@ -17,8 +17,8 @@ function List({ data }) {
</Button>
</div>
<div className="w-full overflow-auto">
<Table data={data} />
<ColTable data={data} />
<Table data={data} loading={loading} />
<ColTable data={data.list_of_doctors_appointments} loading={loading} />
</div>
</div>
)
components/panel/turns/head/Date.js
+17 -14
View File
@@ -2,21 +2,24 @@ import { Button, ButtonGroup } from "@mui/material"
function Date() {
return (
<ButtonGroup
variant="outlined"
className=""
>
<Button
className="!border-[#EFEFEF] !bg-[#FFF] !py-[4.5px] !px-[33px] !text-[#7E7E7E] !text-[16px] !font-normal"
<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>
<Button
className="!border-[#EFEFEF] !bg-[#FFF] !py-[4.5px] !px-[33px] !text-[#7E7E7E] !text-[16px] !font-normal"
>
تا تاریخ
</Button>
</ButtonGroup>
<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>
)
}
components/panel/turns/head/SearchDoctor.js
+4 -4
View File
@@ -5,11 +5,11 @@ import { Button, ButtonGroup, TextField } from '@mui/material'
function SearchDoctor() {
return (
<div className="flex items-center justify-between">
<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%] !mt-[24px] !rounded-[4px] !overflow-hidden
flex items-center !shadow-none !h-fit !p-1 !border !border-[#EFEFEF]"
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"
@@ -40,7 +40,7 @@ function SearchDoctor() {
</ButtonGroup>
<Button
variant='outlined'
className='!border-[#5559CE] !flex !items-center !gap-[6px] !rounded-[4px]'
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 />
خروجی گرفتن
components/panel/turns/head/index.js
+2 -2
View File
@@ -4,8 +4,8 @@ import SearchDoctor from "./SearchDoctor"
function Head() {
return (
<div className="w-full">
<div className="flex items-center justify-start gap-[10px]">
<p className="text-[#525252] text-[20px] font-bold">لیست نوبت های پزشکان</p>
<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 />
components/panel/turns/index.js
+16 -3
View File
@@ -1,12 +1,25 @@
'use client';
import { useEffect, useState } from "react";
import Head from "./head";
import List from "./List";
import List from "./list";
function TurnsPage({ data }) {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
return (
<div className="bg-[#FFF] opacity-page rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] p-[24px]">
<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} />
<List data={data} loading={loading} />
</div>
)
}
components/panel/turns/list/Cards.js
+9
View File
@@ -0,0 +1,9 @@
import React from 'react'
function Cards() {
return (
<div className='flex hidden'>Cards</div>
)
}
export default Cards
components/panel/turns/List.js → components/panel/turns/list/Table.js
+18 -17
View File
@@ -1,18 +1,19 @@
import CustomTable from "@/app/component/CustomTable"
import CircularLoading from "@/app/component/loading/Circular"
import CustomLoading from "@/app/component/loading/Custom"
import TextLoading from "@/app/component/loading/Text"
import Pagination from "@/app/component/Pagination"
import { TableCell, TableRow } from "@mui/material"
import Image from "next/image"
import Image from "next/image";
function List({ data }) {
import { TableCell, TableRow } from "@mui/material";
import Pagination from "@/app/component/Pagination";
import CustomTable from "@/app/component/CustomTable";
import TextLoading from "@/app/component/loading/Text";
import CustomLoading from "@/app/component/loading/Custom";
import CircularLoading from "@/app/component/loading/Circular";
function Table({ data, loading }) {
const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'تعدد نوبت'];
const centerTable = [0, 4];
return (
<div className="mt-[32px] pb-[20px] table-rounded-8">
<div className="hidden md:flex flex-col">
<CustomTable
tableHead={tableHead}
centerTable={centerTable}
@@ -23,13 +24,13 @@ function List({ data }) {
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={false}>
<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={false}>
<CircularLoading width={32} height={32} loading={loading}>
<Image
src={row.image}
alt='doctor'
@@ -37,28 +38,28 @@ function List({ data }) {
width={32}
/>
</CircularLoading>
<TextLoading width={40} height={18} loading={false}>
<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={false}>
<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={false}>
<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={false}>
<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={false}>
<CustomLoading width={80} height={22} loading={loading}>
{row.number_of_turns}
</CustomLoading>
</TableCell>
@@ -72,4 +73,4 @@ function List({ data }) {
)
}
export default List
export default Table
components/panel/turns/list/index.js
+13
View File
@@ -0,0 +1,13 @@
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>
)
}
export default List
components/panel/userAccount/form/index.js
+2 -2
View File
@@ -36,8 +36,8 @@ function Form() {
});
return (
<div className="flex flex-col items-start justify-start 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-[32px]">
<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>