update design and request pages dashboards & doctors & doctor item & clinics & clinic item and layout
This commit is contained in:
Ehsan
@@ -6,11 +6,10 @@ import userData from "@/data/userData.json";
|
||||
import DashboardPage from "@/components/dashboard";
|
||||
import UserAccountPage from "./userAccount";
|
||||
|
||||
function Content({ matchedCity, logged, initialIsOpenSide, dataUser }) {
|
||||
const [value, setValue] = useState(0);
|
||||
function Content({ matchedCity, params, logged, initialIsOpenSide, dataUser }) {
|
||||
const [value, setValue] = useState(Number(params?.sidebar) || 0);
|
||||
const [isOpenSide, setIsOpenSide] = useState(initialIsOpenSide);
|
||||
const [isTurnsDetails, setIsTurnsDetails] = useState(false);
|
||||
console.log(dataUser);
|
||||
|
||||
return (
|
||||
<DashboardPage
|
||||
@@ -27,9 +26,7 @@ function Content({ matchedCity, logged, initialIsOpenSide, dataUser }) {
|
||||
<UserAccountPage
|
||||
value={value}
|
||||
dataUser={dataUser}
|
||||
setValue={setValue}
|
||||
user={userData.data}
|
||||
isOpenSide={isOpenSide}
|
||||
setIsOpenSide={setIsOpenSide}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
|
||||
@@ -5,8 +5,8 @@ function HeadTab({
|
||||
tab,
|
||||
user,
|
||||
listTab,
|
||||
inactives,
|
||||
components,
|
||||
includeData,
|
||||
handleChange,
|
||||
isTurnsDetails,
|
||||
setIsTurnsDetails,
|
||||
@@ -43,6 +43,7 @@ function HeadTab({
|
||||
color="#5559CE"
|
||||
listTab={listTab}
|
||||
handleChange={handleChange}
|
||||
inactives={inactives}
|
||||
/>
|
||||
</div>
|
||||
<div className="my-[22px] px-0 md:px-[24px]">{components[tab]}</div>
|
||||
|
||||
@@ -3,10 +3,19 @@ import TextLoading from "@/app/component/loading/Text";
|
||||
import { Switch, TableCell, TableRow } from "@mui/material";
|
||||
import Head from "@/components/dashboard/userAccount/components/Head";
|
||||
import UpdateBtn from "@/components/dashboard/userAccount/components/UpdateBtn";
|
||||
import { useState } from "react";
|
||||
import { dieses } from "../information/dieses";
|
||||
|
||||
function Disease({ data, changeData }) {
|
||||
function Disease() {
|
||||
const tableHead = ["ردیف", "اسم", "وضعیت", ""];
|
||||
const [data, setData] = useState(dieses);
|
||||
const centerTable = [0];
|
||||
const changeData = (id, payload) => {
|
||||
const updatedData = data.map((item, index) =>
|
||||
index === id ? { ...item, status: payload } : item
|
||||
);
|
||||
setData(updatedData);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
@@ -18,7 +27,7 @@ function Disease({ data, changeData }) {
|
||||
tableHead={tableHead}
|
||||
centerTable={centerTable}
|
||||
>
|
||||
{data.disease.map((row, idx) => (
|
||||
{data.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
|
||||
@@ -41,9 +50,7 @@ function Disease({ data, changeData }) {
|
||||
<Switch
|
||||
defaultChecked={row.status === "true"}
|
||||
onChange={(e) => {
|
||||
const newData = row;
|
||||
newData.status = JSON.stringify(e.target.checked);
|
||||
changeData("update", "disease", idx, newData);
|
||||
changeData(idx, JSON.stringify(e.target.checked));
|
||||
}}
|
||||
/>
|
||||
</TextLoading>
|
||||
|
||||
@@ -11,20 +11,19 @@ import Surgeries from "./surgeries";
|
||||
import FamilyHistory from "./familyHistory";
|
||||
import Relatives from "./relatives";
|
||||
|
||||
const listTab = [
|
||||
"اطلاعات عمومی",
|
||||
"بیماریها",
|
||||
"آلرژیها",
|
||||
"داروهای مصرفی",
|
||||
"جراحیها",
|
||||
"سابقه خانوادگی بیماری",
|
||||
"بستگان",
|
||||
];
|
||||
|
||||
function DetailUser({ user, isTurnsDetails, setIsTurnsDetails, dataUser }) {
|
||||
const [tab, setTab] = useState(0);
|
||||
const [data, setData] = useState(profileData[0]);
|
||||
const [includeData, setIncludeData] = useState(false);
|
||||
|
||||
const listTab = [
|
||||
"اطلاعات عمومی",
|
||||
"بیماریها",
|
||||
"آلرژیها",
|
||||
"داروهای مصرفی",
|
||||
"جراحیها",
|
||||
"سابقه خانوادگی بیماری",
|
||||
"بستگان",
|
||||
];
|
||||
|
||||
const handleChange = (_, newValue) => setTab(newValue);
|
||||
const changeData = (action, name, id, payload) => {
|
||||
@@ -60,7 +59,7 @@ function DetailUser({ user, isTurnsDetails, setIsTurnsDetails, dataUser }) {
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>,
|
||||
<Disease data={data} changeData={changeData} />,
|
||||
<Disease data={data} />,
|
||||
<Allergies data={data} changeData={changeData} />,
|
||||
<Medications data={data} changeData={changeData} />,
|
||||
<Surgeries data={data} changeData={changeData} />,
|
||||
@@ -74,10 +73,10 @@ function DetailUser({ user, isTurnsDetails, setIsTurnsDetails, dataUser }) {
|
||||
user={user}
|
||||
listTab={listTab}
|
||||
components={components}
|
||||
includeData={includeData}
|
||||
handleChange={handleChange}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
inactives={dataUser ? [] : [1, 2, 3, 4, 5, 6]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@ function DateBirthday({ data, changeData }) {
|
||||
onClick={handleClick}
|
||||
>
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal cursor-pointer">
|
||||
{data.value}
|
||||
{data}
|
||||
</p>
|
||||
<Button className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1">
|
||||
<CalendarEdit />
|
||||
|
||||
@@ -0,0 +1,67 @@
|
||||
import EditGrayA from "@/components/icons/EditGrayA";
|
||||
import EditOrangeA from "@/components/icons/EditOrangeA";
|
||||
import { Button, TextField } from "@mui/material";
|
||||
|
||||
function Field({
|
||||
changeData,
|
||||
multiline,
|
||||
icon,
|
||||
placeholder,
|
||||
data,
|
||||
name,
|
||||
iconGray,
|
||||
isTransparent,
|
||||
type,
|
||||
props,
|
||||
disable,
|
||||
}) {
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<TextField
|
||||
{...props}
|
||||
// value={data}
|
||||
defaultValue={data}
|
||||
disabled={disable}
|
||||
type={type || "text"}
|
||||
placeholder={placeholder || ""}
|
||||
className={`!w-full res-field-account dark:!bg-transparent ${
|
||||
isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
|
||||
}`}
|
||||
onChange={(e) => {
|
||||
changeData(e.target.value, "value", name);
|
||||
}}
|
||||
sx={{
|
||||
"& .MuiFormLabel-root": {
|
||||
top: "-4px !important",
|
||||
},
|
||||
"& .MuiInputBase-input": { padding: "12.5px 14px" },
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "1px solid #D7D7D7 !important",
|
||||
},
|
||||
"& .MuiInputBase-root": {
|
||||
padding: "0 !important",
|
||||
borderRadius: "8px !important",
|
||||
},
|
||||
".Mui-focused": {
|
||||
"& .MuiOutlinedInput-notchedOutline": {
|
||||
border: "1px solid #5559CE !important",
|
||||
transition: "0.5s all",
|
||||
},
|
||||
},
|
||||
"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
|
||||
{
|
||||
display: "none",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Button
|
||||
className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
|
||||
${multiline ? "!top-[24px]" : "!top-1/2"}`}
|
||||
>
|
||||
{icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Field;
|
||||
@@ -1,6 +1,6 @@
|
||||
import Content from "./Content";
|
||||
import EditField from "@/app/component/EditField";
|
||||
import DateBirthday from "./DateBirthday";
|
||||
import Field from "./Field";
|
||||
import {
|
||||
insurance,
|
||||
gender,
|
||||
@@ -11,23 +11,24 @@ import {
|
||||
} 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, prevData }) {
|
||||
const findVal = (list, name) => data && list.find((g) => g.id === data[name]);
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[24px]">
|
||||
<Content title="شماره موبایل" isConfirmed={true}>
|
||||
<EditField
|
||||
<Field
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
type="number"
|
||||
changeData={changeData}
|
||||
data={data?.phone}
|
||||
name="phone"
|
||||
data={data?.work_phone}
|
||||
disable={prevData}
|
||||
name="work_phone"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="کد ملی" isConfirmed={false}>
|
||||
<EditField
|
||||
<Field
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
type="number"
|
||||
@@ -37,7 +38,7 @@ function Form({ data, changeData, selected, updateSelect }) {
|
||||
/>
|
||||
</Content>
|
||||
<Content title="نام و نام خانوادگی" isConfirmed={false}>
|
||||
<EditField
|
||||
<Field
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
@@ -48,7 +49,7 @@ function Form({ data, changeData, selected, updateSelect }) {
|
||||
<Content title="جنسیت">
|
||||
<AutoSelector
|
||||
updateData={(name, data) =>
|
||||
updateSelect(name, data === "زن" ? "female" : "male")
|
||||
changeData(data === "زن" ? "female" : "male", "value", name)
|
||||
}
|
||||
value={findVal(gender, "gender")}
|
||||
label="جنسیت"
|
||||
@@ -58,31 +59,31 @@ function Form({ data, changeData, selected, updateSelect }) {
|
||||
</Content>
|
||||
<Content title="تاریخ تولد">
|
||||
<DateBirthday
|
||||
data={data?.date_of_birth}
|
||||
data={data?.birthday}
|
||||
isConfirmed={false}
|
||||
changeData={changeData}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="نام پدر" isConfirmed={false}>
|
||||
<EditField
|
||||
<Field
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
changeData={changeData}
|
||||
data={data?.father_name}
|
||||
name="father_name"
|
||||
data={data?.fathers_name}
|
||||
name="fathers_name"
|
||||
/>
|
||||
</Content>
|
||||
<Content title="نوع بیمه">
|
||||
<AutoSelector
|
||||
updateData={updateSelect}
|
||||
value={findVal(insurance, "insurance")}
|
||||
updateData={changeData}
|
||||
value={findVal(insurance, "basic_insurance")}
|
||||
label="نوع بیمه"
|
||||
name="insurance"
|
||||
name="basic_insurance"
|
||||
list={insurance}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="شماره بیمه" isConfirmed={false}>
|
||||
<EditField
|
||||
<Field
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
type="number"
|
||||
@@ -94,18 +95,22 @@ function Form({ data, changeData, selected, updateSelect }) {
|
||||
<Content title="گروه خونی">
|
||||
<AutoSelector
|
||||
updateData={(name, value) =>
|
||||
updateSelect(name, blood_group.find((g) => g.label === value).id)
|
||||
changeData(
|
||||
blood_group.find((g) => g.label === value).id,
|
||||
"value",
|
||||
name
|
||||
)
|
||||
}
|
||||
value={findVal(blood_group, "blood_group")}
|
||||
value={findVal(blood_group, "blood_type")}
|
||||
label="گروه خونی"
|
||||
name="blood_group"
|
||||
name="blood_type"
|
||||
list={blood_group}
|
||||
/>
|
||||
</Content>
|
||||
<Content title="وضعیت تاهل">
|
||||
<AutoSelector
|
||||
updateData={(name, value) =>
|
||||
updateSelect(name, marital_status.find((g) => g.label === value).id)
|
||||
changeData(value === "متاهل" ? "married" : "single", "value", name)
|
||||
}
|
||||
value={findVal(marital_status, "marital_status")}
|
||||
label="وضعیت تاهل"
|
||||
@@ -114,7 +119,7 @@ function Form({ data, changeData, selected, updateSelect }) {
|
||||
/>
|
||||
</Content>
|
||||
<Content title="تلفن منزل" isConfirmed={false}>
|
||||
<EditField
|
||||
<Field
|
||||
isTransparent={true}
|
||||
iconGray={true}
|
||||
type="number"
|
||||
@@ -126,7 +131,11 @@ function Form({ data, changeData, selected, updateSelect }) {
|
||||
<Content title="تحصیلات">
|
||||
<AutoSelector
|
||||
updateData={(name, value) =>
|
||||
updateSelect(name, education.find((g) => g.label === value).id)
|
||||
changeData(
|
||||
education.find((g) => g.label === value).id,
|
||||
"value",
|
||||
name
|
||||
)
|
||||
}
|
||||
value={findVal(education, "education")}
|
||||
label="تحصیلات"
|
||||
@@ -137,7 +146,7 @@ function Form({ data, changeData, selected, updateSelect }) {
|
||||
<Content title="شغل">
|
||||
<AutoSelector
|
||||
updateData={(name, value) =>
|
||||
updateSelect(name, job.find((g) => g.label === value).id)
|
||||
changeData(value === "آزاد" ? "azad" : "dolati", "value", name)
|
||||
}
|
||||
value={findVal(job, "job")}
|
||||
label="شغل"
|
||||
@@ -146,7 +155,7 @@ function Form({ data, changeData, selected, updateSelect }) {
|
||||
/>
|
||||
</Content>
|
||||
<Content title="تلفن محل کار" isConfirmed={false}>
|
||||
<EditField
|
||||
<Field
|
||||
isTransparent={true}
|
||||
type="number"
|
||||
iconGray={true}
|
||||
|
||||
@@ -0,0 +1,152 @@
|
||||
export const dieses = [
|
||||
{
|
||||
id: 1,
|
||||
name: "فشار خون",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "دیابت",
|
||||
status: "true",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "آسم",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "بیماری قلبی عروقی",
|
||||
status: "true",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "سرطان",
|
||||
status: "true",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
name: "آلزایمر",
|
||||
status: "true",
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "پارکینسون",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "بیماری کلیوی",
|
||||
status: "true",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
name: "بیماری کبدی",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
name: "سکته مغزی",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
name: "افسردگی",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: "اضطراب مزمن",
|
||||
status: "true",
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
name: "میگرن",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
name: "کمکاری تیروئید",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
name: "پرکاری تیروئید",
|
||||
status: "true",
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
name: "سل",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
name: "هپاتیت B",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
name: "هپاتیت C",
|
||||
status: "true",
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
name: "HIV / ایدز",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
name: "COVID-19",
|
||||
status: "true",
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
name: "لوپوس",
|
||||
status: "true",
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
name: "اماس (MS)",
|
||||
status: "true",
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
name: "آرتریت روماتوئید",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
name: "پسوریازیس",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
name: "صرع",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
name: "بیماری سلیاک",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
name: "عدم تحمل لاکتوز",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 28,
|
||||
name: "چربی خون بالا",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 29,
|
||||
name: "کمخونی",
|
||||
status: "false",
|
||||
},
|
||||
{
|
||||
id: 30,
|
||||
name: "هموفیلی",
|
||||
status: "false",
|
||||
},
|
||||
];
|
||||
@@ -2,59 +2,44 @@ import { useState } from "react";
|
||||
import Form from "./Form";
|
||||
import { Button } from "@mui/material";
|
||||
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
|
||||
import { request } from "@/services/response";
|
||||
|
||||
function Information({ user, dataUser }) {
|
||||
const [disable, setDisable] = useState(true);
|
||||
const [data, setData] = useState({
|
||||
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: dataUser.gender,
|
||||
blood_group: dataUser.blood_type,
|
||||
insurance: dataUser.supplementary_insurance,
|
||||
marital_status: dataUser.marital_status,
|
||||
education: dataUser.education,
|
||||
job: dataUser.job,
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [data, setData] = useState(dataUser || {});
|
||||
|
||||
const changeData = (value, type, name) => {
|
||||
disable && setDisable(false);
|
||||
setData({
|
||||
...data,
|
||||
[name]: {
|
||||
...data[name],
|
||||
[type]: value,
|
||||
},
|
||||
[name]: value,
|
||||
});
|
||||
};
|
||||
|
||||
const updateSelect = (name, event) => {
|
||||
disable && setDisable(false);
|
||||
setSelected({ ...selected, [name]: event });
|
||||
const sendReq = () => {
|
||||
setLoading(true);
|
||||
request[dataUser ? "patchUserProfile" : "postUserProfile"](data)
|
||||
.then((res) => {
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="opacity-page">
|
||||
<Form
|
||||
data={data}
|
||||
changeData={changeData}
|
||||
selected={selected}
|
||||
updateSelect={updateSelect}
|
||||
/>
|
||||
<Form data={data} changeData={changeData} prevData={dataUser} />
|
||||
<Button
|
||||
disabled={disable}
|
||||
variant="contained"
|
||||
onClick={sendReq}
|
||||
loading={loading}
|
||||
className={`!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
|
||||
!rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
|
||||
!rounded-[4px] !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 />
|
||||
|
||||
@@ -26,8 +26,6 @@ function UserAccountPage({
|
||||
isTurnsDetails,
|
||||
setIsTurnsDetails,
|
||||
value,
|
||||
setValue,
|
||||
isOpenSide,
|
||||
setIsOpenSide,
|
||||
dataUser,
|
||||
}) {
|
||||
|
||||
Reference in New Issue
Block a user