design page general and office information & head panel
This commit is contained in:
Ehsan
@@ -2,11 +2,13 @@ import EditGrayA from "@/components/icons/EditGrayA"
|
||||
import EditOrangeA from "@/components/icons/EditOrangeA"
|
||||
import { Button, TextField } from "@mui/material"
|
||||
|
||||
function EditField({ changeData, icon, placeholder, data, name, iconGray, isTransparent }) {
|
||||
function EditField({ changeData, multiline, icon, placeholder, data, name, iconGray, isTransparent }) {
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<TextField
|
||||
value={data?.value}
|
||||
rows={multiline}
|
||||
multiline={multiline}
|
||||
disabled={!data?.isEdit}
|
||||
placeholder={placeholder || ''}
|
||||
type='text'
|
||||
@@ -19,9 +21,12 @@ function EditField({ changeData, icon, placeholder, data, name, iconGray, isTran
|
||||
top: '-4px !important'
|
||||
},
|
||||
'& .MuiInputBase-input': { padding: '12.5px 14px' },
|
||||
'& .MuiInputBase-root': { borderRadius: '6px !important' },
|
||||
'& .MuiOutlinedInput-notchedOutline': { border: '1px solid #D7D7D7 !important' },
|
||||
".Mui-focused": {
|
||||
'& .MuiInputBase-root': {
|
||||
padding: '0 !important',
|
||||
borderRadius: '8px !important'
|
||||
},
|
||||
'.Mui-focused': {
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
border: '1px solid #5559CE !important',
|
||||
transition: '0.5s all'
|
||||
@@ -30,7 +35,8 @@ function EditField({ changeData, icon, placeholder, data, name, iconGray, isTran
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1"
|
||||
className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
|
||||
${multiline ? '!top-[24px]' : '!top-1/2'}`}
|
||||
onClick={() => {
|
||||
changeData(!data.isEdit, 'isEdit', name)
|
||||
}}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
import AddDoctorPage from "@/components/panel/addDoctor"
|
||||
|
||||
function AddDoctor() {
|
||||
return (
|
||||
<AddDoctorPage />
|
||||
)
|
||||
}
|
||||
|
||||
export default AddDoctor
|
||||
@@ -8,13 +8,16 @@ import { usePathname } from "next/navigation";
|
||||
|
||||
function LayoutPanel({ children }) {
|
||||
|
||||
const pathname = usePathname()
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
<Sidebar />
|
||||
<main className="w-full">
|
||||
<Header />
|
||||
<Header
|
||||
data={Information}
|
||||
disableProfile={pathname.includes('dashboard')}
|
||||
/>
|
||||
<section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
|
||||
{children}
|
||||
</section>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
function AddLocationP() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M7.70831 9.16699H12.2916" stroke="#525252" stroke-width="1.5" stroke-linecap="round" />
|
||||
<path d="M10 11.4583V6.875" stroke="#525252" stroke-width="1.5" stroke-linecap="round" />
|
||||
<path d="M3.01669 7.07533C4.65836 -0.141339 15.35 -0.133006 16.9834 7.08366C17.9417 11.317 15.3084 14.9003 13 17.117C11.325 18.7337 8.67502 18.7337 6.99169 17.117C4.69169 14.9003 2.05836 11.3087 3.01669 7.07533Z" stroke="#525252" stroke-width="1.5" />
|
||||
<path d="M7.70831 9.16699H12.2916" stroke="#525252" strokeWidth="1.5" strokeLinecap="round" />
|
||||
<path d="M10 11.4583V6.875" stroke="#525252" strokeWidth="1.5" strokeLinecap="round" />
|
||||
<path d="M3.01669 7.07533C4.65836 -0.141339 15.35 -0.133006 16.9834 7.08366C17.9417 11.317 15.3084 14.9003 13 17.117C11.325 18.7337 8.67502 18.7337 6.99169 17.117C4.69169 14.9003 2.05836 11.3087 3.01669 7.07533Z" stroke="#525252" strokeWidth="1.5" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
function ArrowBottomHD() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 16.8001C11.3 16.8001 10.6 16.5301 10.07 16.0001L3.55002 9.48014C3.26002 9.19014 3.26002 8.71014 3.55002 8.42014C3.84002 8.13014 4.32002 8.13014 4.61002 8.42014L11.13 14.9401C11.61 15.4201 12.39 15.4201 12.87 14.9401L19.39 8.42014C19.68 8.13014 20.16 8.13014 20.45 8.42014C20.74 8.71014 20.74 9.19014 20.45 9.48014L13.93 16.0001C13.4 16.5301 12.7 16.8001 12 16.8001Z" fill="#3B3B3B" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArrowBottomHD
|
||||
@@ -1,8 +1,8 @@
|
||||
function ArrowLeftButtonP() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
|
||||
<path d="M8.47496 4.94141L3.41663 9.99974L8.47496 15.0581" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M17.5834 10H3.55835" stroke="#EFEFEF" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M8.47496 4.94141L3.41663 9.99974L8.47496 15.0581" stroke="#EFEFEF" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M17.5834 10H3.55835" stroke="#EFEFEF" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
function ArrowLeftPA() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
|
||||
<path d="M8.47499 4.94141L3.41666 9.99974L8.47499 15.0581" stroke="#EFEFEF" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M17.5833 10H3.55832" stroke="#EFEFEF" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArrowLeftPA
|
||||
@@ -1,7 +1,7 @@
|
||||
function ArrowLeftPU() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
|
||||
<path d="M15 20.4201L8.48003 13.9001C7.71003 13.1301 7.71003 11.8701 8.48003 11.1001L15 4.58008" stroke="#525252" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M15 20.4201L8.48003 13.9001C7.71003 13.1301 7.71003 11.8701 8.48003 11.1001L15 4.58008" stroke="#525252" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
function CalendarPD() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M8 2V5" stroke="#525252" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M16 2V5" stroke="#525252" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M3.5 9.08984H20.5" stroke="#525252" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="#525252" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M15.6947 13.7002H15.7037" stroke="#525252" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M15.6947 16.7002H15.7037" stroke="#525252" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M11.9955 13.7002H12.0045" stroke="#525252" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M11.9955 16.7002H12.0045" stroke="#525252" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M8.29431 13.7002H8.30329" stroke="#525252" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M8.29431 16.7002H8.30329" stroke="#525252" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default CalendarPD
|
||||
@@ -0,0 +1,12 @@
|
||||
function CardDA() {
|
||||
return (
|
||||
<svg className="stroke-active" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M2 8.50488H22" stroke='#616161' strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M6 16.5049H8" stroke='#616161' strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M10.5 16.5049H14.5" stroke='#616161' strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M6.44 3.50488H17.55C21.11 3.50488 22 4.38488 22 7.89488V16.1049C22 19.6149 21.11 20.4949 17.56 20.4949H6.44C2.89 20.5049 2 19.6249 2 16.1149V7.89488C2 4.38488 2.89 3.50488 6.44 3.50488Z" stroke='#616161' strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default CardDA
|
||||
@@ -0,0 +1,11 @@
|
||||
function LogoutP() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M17.4399 14.62L19.9999 12.06L17.4399 9.5" stroke="#FAFAFA" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M9.76001 12.0601H19.93" stroke="#FAFAFA" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M11.76 20C7.34001 20 3.76001 17 3.76001 12C3.76001 7 7.34001 4 11.76 4" stroke="#FAFAFA" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default LogoutP
|
||||
@@ -1,8 +1,8 @@
|
||||
function ProfileP() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" stroke="#9B9B9B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M20.59 22C20.59 18.13 16.74 15 12 15C7.26003 15 3.41003 18.13 3.41003 22" stroke="#9B9B9B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" stroke="#9B9B9B" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M20.59 22C20.59 18.13 16.74 15 12 15C7.26003 15 3.41003 18.13 3.41003 22" stroke="#9B9B9B" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
function ProfilePA() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
|
||||
<path d="M9.99992 10.4998C12.3011 10.4998 14.1666 8.63436 14.1666 6.33317C14.1666 4.03198 12.3011 2.1665 9.99992 2.1665C7.69873 2.1665 5.83325 4.03198 5.83325 6.33317C5.83325 8.63436 7.69873 10.4998 9.99992 10.4998Z" stroke="#7E7E7E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M17.1582 18.8333C17.1582 15.6083 13.9499 13 9.99988 13C6.04988 13 2.84155 15.6083 2.84155 18.8333" stroke="#7E7E7E" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProfilePA
|
||||
@@ -0,0 +1,10 @@
|
||||
function SettingPA() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 15.75C9.93 15.75 8.25 14.07 8.25 12C8.25 9.93 9.93 8.25 12 8.25C14.07 8.25 15.75 9.93 15.75 12C15.75 14.07 14.07 15.75 12 15.75ZM12 9.75C10.76 9.75 9.75 10.76 9.75 12C9.75 13.24 10.76 14.25 12 14.25C13.24 14.25 14.25 13.24 14.25 12C14.25 10.76 13.24 9.75 12 9.75Z" fill="#7E7E7E" />
|
||||
<path d="M15.21 22.1898C15 22.1898 14.79 22.1598 14.58 22.1098C13.96 21.9398 13.44 21.5498 13.11 20.9998L12.99 20.7998C12.4 19.7798 11.59 19.7798 11 20.7998L10.89 20.9898C10.56 21.5498 10.04 21.9498 9.42 22.1098C8.79 22.2798 8.14 22.1898 7.59 21.8598L5.87 20.8698C5.26 20.5198 4.82 19.9498 4.63 19.2598C4.45 18.5698 4.54 17.8598 4.89 17.2498C5.18 16.7398 5.26 16.2798 5.09 15.9898C4.92 15.6998 4.49 15.5298 3.9 15.5298C2.44 15.5298 1.25 14.3398 1.25 12.8798V11.1198C1.25 9.6598 2.44 8.4698 3.9 8.4698C4.49 8.4698 4.92 8.2998 5.09 8.0098C5.26 7.7198 5.19 7.2598 4.89 6.7498C4.54 6.1398 4.45 5.4198 4.63 4.7398C4.81 4.0498 5.25 3.4798 5.87 3.1298L7.6 2.1398C8.73 1.4698 10.22 1.8598 10.9 3.0098L11.02 3.2098C11.61 4.2298 12.42 4.2298 13.01 3.2098L13.12 3.0198C13.8 1.8598 15.29 1.4698 16.43 2.1498L18.15 3.1398C18.76 3.4898 19.2 4.0598 19.39 4.7498C19.57 5.4398 19.48 6.1498 19.13 6.7598C18.84 7.2698 18.76 7.7298 18.93 8.0198C19.1 8.3098 19.53 8.4798 20.12 8.4798C21.58 8.4798 22.77 9.6698 22.77 11.1298V12.8898C22.77 14.3498 21.58 15.5398 20.12 15.5398C19.53 15.5398 19.1 15.7098 18.93 15.9998C18.76 16.2898 18.83 16.7498 19.13 17.2598C19.48 17.8698 19.58 18.5898 19.39 19.2698C19.21 19.9598 18.77 20.5298 18.15 20.8798L16.42 21.8698C16.04 22.0798 15.63 22.1898 15.21 22.1898ZM12 18.4898C12.89 18.4898 13.72 19.0498 14.29 20.0398L14.4 20.2298C14.52 20.4398 14.72 20.5898 14.96 20.6498C15.2 20.7098 15.44 20.6798 15.64 20.5598L17.37 19.5598C17.63 19.4098 17.83 19.1598 17.91 18.8598C17.99 18.5598 17.95 18.2498 17.8 17.9898C17.23 17.0098 17.16 15.9998 17.6 15.2298C18.04 14.4598 18.95 14.0198 20.09 14.0198C20.73 14.0198 21.24 13.5098 21.24 12.8698V11.1098C21.24 10.4798 20.73 9.9598 20.09 9.9598C18.95 9.9598 18.04 9.5198 17.6 8.7498C17.16 7.9798 17.23 6.9698 17.8 5.9898C17.95 5.7298 17.99 5.4198 17.91 5.1198C17.83 4.8198 17.64 4.5798 17.38 4.4198L15.65 3.4298C15.22 3.1698 14.65 3.3198 14.39 3.7598L14.28 3.9498C13.71 4.9398 12.88 5.4998 11.99 5.4998C11.1 5.4998 10.27 4.9398 9.7 3.9498L9.59 3.7498C9.34 3.3298 8.78 3.1798 8.35 3.4298L6.62 4.4298C6.36 4.5798 6.16 4.8298 6.08 5.1298C6 5.4298 6.04 5.7398 6.19 5.9998C6.76 6.9798 6.83 7.9898 6.39 8.7598C5.95 9.5298 5.04 9.9698 3.9 9.9698C3.26 9.9698 2.75 10.4798 2.75 11.1198V12.8798C2.75 13.5098 3.26 14.0298 3.9 14.0298C5.04 14.0298 5.95 14.4698 6.39 15.2398C6.83 16.0098 6.76 17.0198 6.19 17.9998C6.04 18.2598 6 18.5698 6.08 18.8698C6.16 19.1698 6.35 19.4098 6.61 19.5698L8.34 20.5598C8.55 20.6898 8.8 20.7198 9.03 20.6598C9.27 20.5998 9.47 20.4398 9.6 20.2298L9.71 20.0398C10.28 19.0598 11.11 18.4898 12 18.4898Z" fill="#7E7E7E" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default SettingPA
|
||||
@@ -0,0 +1,100 @@
|
||||
import { useState } from 'react';
|
||||
import { Button, Popover } from '@mui/material';
|
||||
import ArrowBottomHD from '@/components/icons/ArrowBottomHD';
|
||||
import ProfilePA from '@/components/icons/ProfilePA';
|
||||
import LogoutP from '@/components/icons/LogoutP';
|
||||
import SettingPA from '@/components/icons/SettingPA';
|
||||
import CardDA from '@/components/icons/CardDA';
|
||||
import Image from 'next/image';
|
||||
|
||||
function MenuProfile({ data }) {
|
||||
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
|
||||
const handleClick = (event) => setAnchorEl(event.currentTarget);
|
||||
const handleClose = () => setAnchorEl(null);
|
||||
|
||||
const open = Boolean(anchorEl);
|
||||
const id = open ? 'simple-popover' : undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button
|
||||
variant='text'
|
||||
onClick={handleClick}
|
||||
className='!flex !items-start !justify-center !gap-[8px] !p-1'
|
||||
>
|
||||
<Image
|
||||
className='w-[48px] h-[48px] rounded-full'
|
||||
src={data.src}
|
||||
alt='profile'
|
||||
height={48}
|
||||
width={48}
|
||||
/>
|
||||
<div className='flex flex-col items-start justify-between gap-[3px]'>
|
||||
<p className='text-[#3B3B3B] text-[14px] font-semibold'>{data.name}</p>
|
||||
<p className='text-[#7E7E7E] text-[12px] font-normal'>{data.expertise}</p>
|
||||
</div>
|
||||
<div className='mr-[4px]'>
|
||||
<ArrowBottomHD />
|
||||
</div>
|
||||
</Button>
|
||||
<Popover
|
||||
id={id}
|
||||
open={open}
|
||||
anchorEl={anchorEl}
|
||||
onClose={handleClose}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'left',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className='flex pt-[11px] pb-[14px] flex-col items-start gap-[8px] min-w-[185px]'
|
||||
>
|
||||
<Button
|
||||
fullWidth
|
||||
variant='text'
|
||||
className='!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]'
|
||||
>
|
||||
<ProfilePA />
|
||||
پروفایل من
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
variant='text'
|
||||
className='!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]'
|
||||
>
|
||||
<CardDA />
|
||||
پرداخت ها
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
variant='text'
|
||||
className='!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]'
|
||||
>
|
||||
<SettingPA />
|
||||
تنظیمات
|
||||
</Button>
|
||||
<Button
|
||||
fullWidth
|
||||
color='error'
|
||||
variant='contained'
|
||||
sx={{
|
||||
'&.MuiButtonBase-root': {
|
||||
paddingTop: '8px !important',
|
||||
paddingBottom: '8px !important'
|
||||
},
|
||||
}}
|
||||
className='!flex !w-[calc(100%-16px)] !mx-auto !text-[#FAFAFA] !text-[14px] !font-medium !items-center !justify-center !gap-[5px]'
|
||||
>
|
||||
<LogoutP />
|
||||
خروج
|
||||
</Button>
|
||||
</div>
|
||||
</Popover>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuProfile
|
||||
@@ -1,7 +1,8 @@
|
||||
import Icons from "./Icons"
|
||||
import MenuProfile from "./MenuProfile"
|
||||
import Search from "./Search"
|
||||
|
||||
function Header() {
|
||||
function Header({ disableProfile, data }) {
|
||||
return (
|
||||
<div
|
||||
className='
|
||||
@@ -10,7 +11,12 @@ function Header() {
|
||||
'
|
||||
>
|
||||
<Search />
|
||||
<Icons />
|
||||
<div className="flex items-center justify-end gap-[40px] min-w-fit">
|
||||
<Icons />
|
||||
{!disableProfile && (
|
||||
<MenuProfile data={data} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -13,7 +13,7 @@ function Links() {
|
||||
const list = [
|
||||
{ name: 'دشبورد', src: '/panel/dashboard', icon: <CategoryP /> },
|
||||
{ name: 'حساب کاربری', src: '/panel/user-account', icon: <ProfileCircleP /> },
|
||||
{ name: 'اضافه کردن پزشک', src: '/', icon: <ProfileAddP /> },
|
||||
{ name: 'اضافه کردن پزشک', src: '/panel/add-doctor', icon: <ProfileAddP /> },
|
||||
{ name: 'نوبت ها', src: '/', icon: <CalendarP /> }
|
||||
];
|
||||
|
||||
@@ -24,7 +24,6 @@ function Links() {
|
||||
{list.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="p-[8px]"
|
||||
>
|
||||
<Link href={item.src}>
|
||||
<Button
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
function Content({ children, text }) {
|
||||
function ContentText({ children, text }) {
|
||||
return (
|
||||
<div className="flex flex-col items-start justify-start gap-[16px]">
|
||||
<p className="text-[#525252] text-[14px] font-medium">{text}</p>
|
||||
@@ -7,4 +7,4 @@ function Content({ children, text }) {
|
||||
)
|
||||
}
|
||||
|
||||
export default Content
|
||||
export default ContentText
|
||||
@@ -0,0 +1,43 @@
|
||||
'use client';
|
||||
|
||||
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";
|
||||
|
||||
function AddDoctorPage() {
|
||||
|
||||
const [value, setValue] = useState(0);
|
||||
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
|
||||
const components = [
|
||||
<GeneralInformation />,
|
||||
<OfficeInformation />,
|
||||
<Turns />,
|
||||
<WorkingDays />,
|
||||
<SpecialDays />
|
||||
];
|
||||
|
||||
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
|
||||
value={value}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
<div className="mt-[24px] mx-[56px]">
|
||||
{components[value]}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AddDoctorPage
|
||||
@@ -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-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-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] !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !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,37 @@
|
||||
import Tabs from "@/app/component/Tabs";
|
||||
|
||||
const listTab = ['اطلاعات عمومی', 'اطلاعات مطب', 'نوبت ها', 'روزهای کاری', 'روزهای خاص'];
|
||||
|
||||
function TabsHead({ value, 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 TabsHead;
|
||||
@@ -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-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] !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !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,7 @@
|
||||
function SpecialDays() {
|
||||
return (
|
||||
<div className="opacity-page">SpecialDays</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SpecialDays
|
||||
@@ -0,0 +1,7 @@
|
||||
function Turns() {
|
||||
return (
|
||||
<div className="opacity-page">Turns</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Turns
|
||||
@@ -0,0 +1,7 @@
|
||||
function WorkingDays() {
|
||||
return (
|
||||
<div className="opacity-page">WorkingDays</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default WorkingDays
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import Content from "./Content";
|
||||
import ContentText from "../../ContentText";
|
||||
import EditField from "@/app/component/EditField";
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
import { bank, city, state } from "./listSelector";
|
||||
@@ -38,45 +38,45 @@ function Form() {
|
||||
return (
|
||||
<div className="flex flex-col items-start justify-start gap-[48px]">
|
||||
<ul className="grid w-full grid-cols-2 mt-[32px] gap-x-[48px] gap-y-[32px]">
|
||||
<Content text='نام و نام خانوادگی'>
|
||||
<ContentText text='نام و نام خانوادگی'>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.name} name='name' />
|
||||
</Content>
|
||||
<Content text='کد ملی'>
|
||||
</ContentText>
|
||||
<ContentText text='کد ملی'>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.national_code} name='national_code' />
|
||||
</Content>
|
||||
<Content text='استان'>
|
||||
</ContentText>
|
||||
<ContentText text='استان'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='state'
|
||||
list={state}
|
||||
/>
|
||||
</Content>
|
||||
<Content text='شهر'>
|
||||
</ContentText>
|
||||
<ContentText text='شهر'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='city'
|
||||
list={city}
|
||||
/>
|
||||
</Content>
|
||||
<Content text='آدرس'>
|
||||
</ContentText>
|
||||
<ContentText text='آدرس'>
|
||||
<EditField icon={<AddLocationP />} isTransparent={true} placeholder='از روی نقشه انتخاب کنید...' iconGray={true} changeData={changeData} data={data?.address} name='address' />
|
||||
</Content>
|
||||
<Content text='شماره موبایل'>
|
||||
</ContentText>
|
||||
<ContentText text='شماره موبایل'>
|
||||
<EditField isTransparent={true} placeholder='شماره موبایل' iconGray={true} changeData={changeData} data={data?.phone} name='phone' />
|
||||
</Content>
|
||||
<Content text='شماره حساب'>
|
||||
</ContentText>
|
||||
<ContentText text='شماره حساب'>
|
||||
<EditField isTransparent={true} placeholder='شماره حساب' iconGray={true} changeData={changeData} data={data?.account_number} name='account_number' />
|
||||
</Content>
|
||||
<Content text='شهر'>
|
||||
</ContentText>
|
||||
<ContentText text='شهر'>
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
label='انتخاب کنید...'
|
||||
name='bank'
|
||||
list={bank}
|
||||
/>
|
||||
</Content>
|
||||
</ContentText>
|
||||
</ul>
|
||||
<div className="w-full flex justify-end">
|
||||
<Button
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
{
|
||||
"name": "مهران امینی",
|
||||
"detail": "نماینده شهر اهواز",
|
||||
"expertise": "دندان پزشک",
|
||||
"all_patients": 532,
|
||||
"total_turns": 2103,
|
||||
"src": "/assets/images/doctor.png",
|
||||
|
||||
Reference in New Issue
Block a user