dashboard design and functionality and data and page doctor and clinic change data

This commit is contained in:
Ehsan
2025-06-04 03:58:38 +03:30
parent dafeebc54f
commit 0a8874c4ab
18 changed files with 419 additions and 102 deletions
+3 -1
View File
@@ -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}
/>,