dashboard design and functionality and data and page doctor and clinic change data
This commit is contained in:
@@ -6,10 +6,11 @@ import userData from "@/data/userData.json";
|
||||
import DashboardPage from "@/components/dashboard";
|
||||
import UserAccountPage from "./userAccount";
|
||||
|
||||
function Content({ matchedCity, logged, initialIsOpenSide }) {
|
||||
function Content({ matchedCity, logged, initialIsOpenSide, dataUser }) {
|
||||
const [value, setValue] = useState(0);
|
||||
const [isOpenSide, setIsOpenSide] = useState(initialIsOpenSide);
|
||||
const [isTurnsDetails, setIsTurnsDetails] = useState(false);
|
||||
console.log(dataUser);
|
||||
|
||||
return (
|
||||
<DashboardPage
|
||||
@@ -25,6 +26,7 @@ function Content({ matchedCity, logged, initialIsOpenSide }) {
|
||||
>
|
||||
<UserAccountPage
|
||||
value={value}
|
||||
dataUser={dataUser}
|
||||
setValue={setValue}
|
||||
user={userData.data}
|
||||
isOpenSide={isOpenSide}
|
||||
|
||||
@@ -21,7 +21,7 @@ const listTab = [
|
||||
"بستگان",
|
||||
];
|
||||
|
||||
function DetailUser({ user, isTurnsDetails, setIsTurnsDetails }) {
|
||||
function DetailUser({ user, isTurnsDetails, setIsTurnsDetails, dataUser }) {
|
||||
const [tab, setTab] = useState(0);
|
||||
const [data, setData] = useState(profileData[0]);
|
||||
const [includeData, setIncludeData] = useState(false);
|
||||
@@ -56,6 +56,7 @@ function DetailUser({ user, isTurnsDetails, setIsTurnsDetails }) {
|
||||
const components = [
|
||||
<Information
|
||||
user={user}
|
||||
dataUser={dataUser}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>,
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import Content from "./Content";
|
||||
import EditField from "@/app/component/EditField";
|
||||
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
|
||||
import DateBirthday from "./DateBirthday";
|
||||
import {
|
||||
insurance,
|
||||
@@ -10,8 +9,11 @@ import {
|
||||
education,
|
||||
job,
|
||||
} from "./listSelector";
|
||||
import AutoSelector from "@/app/component/element/AutoSelector";
|
||||
|
||||
function Form({ data, changeData, selected, updateSelect }) {
|
||||
const findVal = (list, name) => list.find((g) => g.id === selected[name]);
|
||||
|
||||
function Form({ data, changeData, updateSelect }) {
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[24px]">
|
||||
<Content title="شماره موبایل" isConfirmed={true}>
|
||||
@@ -44,8 +46,11 @@ function Form({ data, changeData, updateSelect }) {
|
||||
/>
|
||||
</Content>
|
||||
<Content title="جنسیت">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
<AutoSelector
|
||||
updateData={(name, data) =>
|
||||
updateSelect(name, data === "زن" ? "female" : "male")
|
||||
}
|
||||
value={findVal(gender, "gender")}
|
||||
label="جنسیت"
|
||||
name="gender"
|
||||
list={gender}
|
||||
@@ -68,8 +73,9 @@ function Form({ data, changeData, updateSelect }) {
|
||||
/>
|
||||
</Content>
|
||||
<Content title="نوع بیمه">
|
||||
<AutoCompleteSelect
|
||||
<AutoSelector
|
||||
updateData={updateSelect}
|
||||
value={findVal(insurance, "insurance")}
|
||||
label="نوع بیمه"
|
||||
name="insurance"
|
||||
list={insurance}
|
||||
@@ -86,16 +92,22 @@ function Form({ data, changeData, updateSelect }) {
|
||||
/>
|
||||
</Content>
|
||||
<Content title="گروه خونی">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
<AutoSelector
|
||||
updateData={(name, value) =>
|
||||
updateSelect(name, blood_group.find((g) => g.label === value).id)
|
||||
}
|
||||
value={findVal(blood_group, "blood_group")}
|
||||
label="گروه خونی"
|
||||
name="blood_group"
|
||||
list={blood_group}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="وضعیت تاهل">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
<AutoSelector
|
||||
updateData={(name, value) =>
|
||||
updateSelect(name, marital_status.find((g) => g.label === value).id)
|
||||
}
|
||||
value={findVal(marital_status, "marital_status")}
|
||||
label="وضعیت تاهل"
|
||||
name="marital_status"
|
||||
list={marital_status}
|
||||
@@ -112,16 +124,22 @@ function Form({ data, changeData, updateSelect }) {
|
||||
/>
|
||||
</Content>
|
||||
<Content title="تحصیلات">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
<AutoSelector
|
||||
updateData={(name, value) =>
|
||||
updateSelect(name, education.find((g) => g.label === value).id)
|
||||
}
|
||||
value={findVal(education, "education")}
|
||||
label="تحصیلات"
|
||||
name="education"
|
||||
list={education}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="شغل">
|
||||
<AutoCompleteSelect
|
||||
updateData={updateSelect}
|
||||
<AutoSelector
|
||||
updateData={(name, value) =>
|
||||
updateSelect(name, job.find((g) => g.label === value).id)
|
||||
}
|
||||
value={findVal(job, "job")}
|
||||
label="شغل"
|
||||
name="job"
|
||||
list={job}
|
||||
|
||||
@@ -3,27 +3,29 @@ import Form from "./Form";
|
||||
import { Button } from "@mui/material";
|
||||
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
|
||||
|
||||
function Information({ user }) {
|
||||
function Information({ user, dataUser }) {
|
||||
const [disable, setDisable] = useState(true);
|
||||
const [data, setData] = useState({
|
||||
phone: { value: user.phone, isEdit: true },
|
||||
national_code: { value: user.national_code, isEdit: true },
|
||||
name: { value: user.name, isEdit: true },
|
||||
date_of_birth: { value: user.date_of_birth, isEdit: true },
|
||||
father_name: { value: user.father_name, isEdit: true },
|
||||
insurance_number: { value: user.insurance_number, isEdit: true },
|
||||
home_phone: { value: user.home_phone, isEdit: true },
|
||||
phone: { value: dataUser.work_phone, isEdit: true },
|
||||
national_code: { value: dataUser.national_code, isEdit: true },
|
||||
name: { value: dataUser.name, isEdit: true },
|
||||
date_of_birth: { value: dataUser.birthday, isEdit: true },
|
||||
father_name: { value: dataUser.fathers_name, isEdit: true },
|
||||
insurance_number: { value: dataUser.supplementary_insurance, isEdit: true },
|
||||
home_phone: { value: dataUser.home_phone, isEdit: true },
|
||||
work_phone: { value: user.work_phone, isEdit: true },
|
||||
});
|
||||
const [selected, setSelected] = useState({
|
||||
gender: "",
|
||||
blood_group: "",
|
||||
insurance: "",
|
||||
marital_status: "",
|
||||
education: "",
|
||||
job: "",
|
||||
gender: dataUser.gender,
|
||||
blood_group: dataUser.blood_type,
|
||||
insurance: dataUser.supplementary_insurance,
|
||||
marital_status: dataUser.marital_status,
|
||||
education: dataUser.education,
|
||||
job: dataUser.job,
|
||||
});
|
||||
|
||||
const changeData = (value, type, name) =>
|
||||
const changeData = (value, type, name) => {
|
||||
disable && setDisable(false);
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
@@ -31,17 +33,28 @@ function Information({ user }) {
|
||||
[type]: value,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const updateSelect = (event, name) =>
|
||||
const updateSelect = (name, event) => {
|
||||
disable && setDisable(false);
|
||||
setSelected({ ...selected, [name]: event });
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form data={data} changeData={changeData} updateSelect={updateSelect} />
|
||||
<Form
|
||||
data={data}
|
||||
changeData={changeData}
|
||||
selected={selected}
|
||||
updateSelect={updateSelect}
|
||||
/>
|
||||
<Button
|
||||
className="!gap-[4px] !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]"
|
||||
disabled={disable}
|
||||
variant="contained"
|
||||
className={`!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
|
||||
!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]
|
||||
${disable ? "" : "!bg-[#5559CE]"}`}
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftWhiteD />
|
||||
|
||||
@@ -1,30 +1,35 @@
|
||||
export const gender = [
|
||||
{ label: "مرد", id: 10 },
|
||||
{ label: "زن", id: 20 },
|
||||
{ label: "مرد", id: "male" },
|
||||
{ label: "زن", id: "female" },
|
||||
];
|
||||
|
||||
export const blood_group = [
|
||||
{ label: "A+", id: 10 },
|
||||
{ label: "B+", id: 20 },
|
||||
{ label: "AB", id: 30 },
|
||||
{ label: "O+", id: 40 },
|
||||
{ label: "A+", id: "a_positive" },
|
||||
{ label: "A-", id: "a_negative" },
|
||||
{ label: "B+", id: "b_positive" },
|
||||
{ label: "B-", id: "b_negative" },
|
||||
{ label: "O+", id: "o_positive" },
|
||||
{ label: "O-", id: "o_negative" },
|
||||
{ label: "AB+", id: "ab_positive" },
|
||||
{ label: "AB-", id: "ab_negative" },
|
||||
];
|
||||
|
||||
export const marital_status = [
|
||||
{ label: "متاهل", id: 10 },
|
||||
{ label: "مجرد", id: 20 },
|
||||
{ label: "متاهل", id: "married" },
|
||||
{ label: "مجرد", id: "single" },
|
||||
];
|
||||
|
||||
export const education = [
|
||||
{ label: "دیپلم", id: 10 },
|
||||
{ label: "فوق دیپلم", id: 20 },
|
||||
{ label: "لیسانس", id: 30 },
|
||||
{ label: "کارشناسی ارشد", id: 40 },
|
||||
{ label: "دیپلم", id: "diploma" },
|
||||
{ label: "دیپلم تحصیلات تکمیلی", id: "postgraduate_diploma" },
|
||||
{ label: "لیسانس", id: "bachelor_s_degree" },
|
||||
{ label: "کارشناسی ارشد", id: "master_s_degree" },
|
||||
{ label: "دکترا", id: "doctorate" },
|
||||
];
|
||||
|
||||
export const job = [
|
||||
{ label: "آزاد", id: 10 },
|
||||
{ label: "دولتی", id: 20 },
|
||||
{ label: "آزاد", id: "azad" },
|
||||
{ label: "دولتی", id: "dolati" },
|
||||
];
|
||||
|
||||
export const insurance = [
|
||||
|
||||
@@ -29,10 +29,12 @@ function UserAccountPage({
|
||||
setValue,
|
||||
isOpenSide,
|
||||
setIsOpenSide,
|
||||
dataUser,
|
||||
}) {
|
||||
const sidebars = [
|
||||
<DetailUser
|
||||
user={user}
|
||||
dataUser={dataUser}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>,
|
||||
|
||||
Reference in New Issue
Block a user