responsive page user-account & add-doctor & turns & add loading to all page panel & change design page dashboard
This commit is contained in:
Ehsan
@@ -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
|
||||
@@ -0,0 +1,35 @@
|
||||
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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default Tab
|
||||
@@ -0,0 +1,22 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
export default Head
|
||||
@@ -0,0 +1,81 @@
|
||||
import { useState } from "react";
|
||||
import ContentText from "@/components/panel/ContentText";
|
||||
import EditField from "@/app/component/EditField";
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
import { degree } from "./listSelector";
|
||||
import CalendarPD from "@/components/icons/CalendarPD";
|
||||
import RadioGender from "./RadioGender";
|
||||
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 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>
|
||||
)
|
||||
}
|
||||
|
||||
export default Form
|
||||
@@ -0,0 +1,21 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
export default RadioGender
|
||||
@@ -0,0 +1,6 @@
|
||||
export const degree = [
|
||||
{ label: 'مدرک 1', id: 10 },
|
||||
{ label: 'مدرک 2', id: 20 },
|
||||
{ label: 'مدرک 3', id: 30 },
|
||||
{ label: 'مدرک 4', id: 40 }
|
||||
];
|
||||
@@ -0,0 +1,13 @@
|
||||
import Form from "./form/Form";
|
||||
import Head from "./Head";
|
||||
|
||||
function GeneralInformation() {
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Head />
|
||||
<Form />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default GeneralInformation
|
||||
@@ -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;
|
||||
@@ -0,0 +1,68 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import { city, state } from "./listSelector";
|
||||
import EditField from "@/app/component/EditField";
|
||||
import ContentText from "@/components/panel/ContentText";
|
||||
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 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>
|
||||
)
|
||||
}
|
||||
|
||||
export default Form
|
||||
@@ -0,0 +1,22 @@
|
||||
import ArrowLeftPA from "@/components/icons/ArrowLeftPA";
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
export default OfficeInformation
|
||||
@@ -0,0 +1,13 @@
|
||||
export const state = [
|
||||
{ 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 }
|
||||
];
|
||||
@@ -0,0 +1,89 @@
|
||||
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"
|
||||
|
||||
function Form() {
|
||||
|
||||
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
|
||||
});
|
||||
|
||||
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
|
||||
@@ -0,0 +1,64 @@
|
||||
import { useState } from "react";
|
||||
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 [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>
|
||||
)
|
||||
}
|
||||
|
||||
export default List
|
||||
@@ -0,0 +1,23 @@
|
||||
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]
|
||||
!bg-[#5559CE] !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
|
||||
!mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftWhiteD />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SpecialDays
|
||||
@@ -0,0 +1,22 @@
|
||||
export const turnsPerDay = [
|
||||
{ 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 }
|
||||
];
|
||||
|
||||
export const dayOfWeek = [
|
||||
{ label: 'شنبه', id: 10 },
|
||||
{ label: 'یکشنبه', id: 20 },
|
||||
{ label: 'دوشنبه', id: 30 },
|
||||
{ label: 'سه شنبه', id: 40 },
|
||||
{ label: 'چهار شنبه', id: 40 },
|
||||
{ label: 'پنج شنبه', id: 40 }
|
||||
];
|
||||
@@ -0,0 +1,37 @@
|
||||
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 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>
|
||||
)
|
||||
}
|
||||
|
||||
export default Form
|
||||
@@ -0,0 +1,21 @@
|
||||
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]
|
||||
!bg-[#5559CE] !rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
|
||||
!mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]"
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftWhiteD />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Turns
|
||||
@@ -0,0 +1,13 @@
|
||||
export const numberOfTurns = [
|
||||
{ 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 }
|
||||
];
|
||||
@@ -0,0 +1,77 @@
|
||||
import { useState } from "react";
|
||||
import ModalAddTime from "./modal/ModalAddTime";
|
||||
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material"
|
||||
import ContentModal from "./modal/ContentModal";
|
||||
|
||||
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 [open, setOpen] = useState(false);
|
||||
const handleOpen = () => setOpen(true);
|
||||
const handleClose = () => setOpen(false);
|
||||
|
||||
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) => (
|
||||
<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] !border-[#DBDBDB]" align="right">
|
||||
{row.morning_time ? '' : (
|
||||
<ModalAddTime handleOpen={handleOpen} />
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="!border-[1px] !border-[#DBDBDB]" align="right">
|
||||
{row.evening_time ? '' : (
|
||||
<ModalAddTime handleOpen={handleOpen} />
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
<ContentModal
|
||||
open={open}
|
||||
setOpen={setOpen}
|
||||
handleClose={handleClose}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default List
|
||||
@@ -0,0 +1,12 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
export default WorkingDays
|
||||
@@ -0,0 +1,36 @@
|
||||
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"
|
||||
|
||||
function ContentModal({ open, setOpen, handleClose }) {
|
||||
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 />
|
||||
<Form handleClose={handleClose} />
|
||||
</div>
|
||||
</Box>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
export default ContentModal
|
||||
@@ -0,0 +1,50 @@
|
||||
import { useState } from "react";
|
||||
import ClockP from "@/components/icons/ClockP";
|
||||
import FieldIcon from "@/app/component/FieldIcon";
|
||||
import ContentText from "@/components/panel/ContentText";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
function Form({ handleClose }) {
|
||||
|
||||
const [data, setData] = useState({
|
||||
start_time: '',
|
||||
end_time: ''
|
||||
});
|
||||
|
||||
const changeData = (value, name) => setData({ ...data, [name]: value })
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-[32px] md:gap-[36px] lg:gap-[40px] min-w-fit md:min-w-[420px]">
|
||||
<ContentText text='زمان شروع'>
|
||||
<FieldIcon
|
||||
placeholder='انتخاب کنید...'
|
||||
changeData={changeData}
|
||||
icon={<ClockP />}
|
||||
name='start_time'
|
||||
/>
|
||||
</ContentText>
|
||||
<ContentText text='زمان پایان'>
|
||||
<FieldIcon
|
||||
placeholder='انتخاب کنید...'
|
||||
changeData={changeData}
|
||||
icon={<ClockP />}
|
||||
name='end_time'
|
||||
/>
|
||||
</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
|
||||
@@ -0,0 +1,20 @@
|
||||
import AddTimeP from '@/components/icons/AddTimeP'
|
||||
import { Button } from '@mui/material'
|
||||
import React from 'react'
|
||||
|
||||
function ModalAddTime({ handleOpen }) {
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
variant='text'
|
||||
onClick={handleOpen}
|
||||
className='!gap-[2px] 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
|
||||
@@ -0,0 +1,21 @@
|
||||
import { FormControlLabel, Radio, RadioGroup } from "@mui/material"
|
||||
|
||||
function Radios() {
|
||||
return (
|
||||
<RadioGroup
|
||||
dir="ltr"
|
||||
className="!flex !flex-row !mb-[32px] md:!mb-[36px] !my-[40px] !gap-[36px] !items-center !justify-end"
|
||||
defaultValue='workingDay'
|
||||
sx={{
|
||||
'& .muirtl-j204z7-MuiFormControlLabel-root': {
|
||||
marginLeft: '0 !important'
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FormControlLabel value="workingDay" control={<Radio />} label="روز کاری" />
|
||||
<FormControlLabel value="holiday" control={<Radio />} label="تعطیل" />
|
||||
</RadioGroup>
|
||||
)
|
||||
}
|
||||
|
||||
export default Radios
|
||||
Reference in New Issue
Block a user