design page general and office information & head panel

2024-09-11 04:17:39 +03:30
parent 62b355e52f
commit d75e3c82b7
33 changed files with 588 additions and 37 deletions
@@ -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