hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design dark mode turns & add-doctor & account & layout and components MUI

Browse Source
This commit is contained in:
Ehsan
2024-10-01 19:05:36 +03:30
parent 124b25f87c
commit c29c787f09
19 changed files with 361 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/panel/addDoctor/listMenu/generalInformation/Head.js
+2 -20
View File
@@ -1,9 +1,5 @@
"use client";
import UploadFile from "@/app/component/UploadFile";
import { useRef } from "react";
import { Button } from "@mui/material";
import ProfileP from "@/components/icons/ProfileP";
import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
function Head() {
const fileRef = useRef();
@@ -12,21 +8,7 @@ function Head() {
return (
<div className="flex items-center justify-center md:justify-start gap-[10px]">
<input className="contents" ref={fileRef} type="file" />
<div
className="p-[24px] grid cursor-pointer place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full"
onClick={() => openInput()}
>
<ProfileP />
</div>
<Button
variant="text"
onClick={() => openInput()}
className="!flex !p-1 dark:!text-[#A1A1A1] !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
>
انتخاب تصویر
<ArrowLeftPU />
</Button>
<UploadFile fileRef={fileRef} openInput={openInput} />
</div>
);
}
components/panel/addDoctor/listMenu/generalInformation/form/FieldDate.js
+54
View File
@@ -0,0 +1,54 @@
import { useState } from "react";
import { convertToJalali } from "@/helper";
import EditField from "@/app/component/EditField";
import ButtonDate from "@/app/component/ButtonDate";
import CalendarPD from "@/components/icons/CalendarPD";
import ContentText from "@/components/panel/ContentText";
function FieldDate({ changeListData, data }) {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;
const updateDate = (newDate) => {
const jalaliDate = newDate
? convertToJalali(newDate)
: "تاریخ مد نظر پیدا نشد...";
changeListData(jalaliDate, "value", "time_work");
};
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
return (
<ContentText text="زمان شروع به کار">
<ButtonDate
setAnchorEl={setAnchorEl}
updateDate={updateDate}
anchorEl={anchorEl}
open={open}
id={id}
>
<div className="relative w-full">
<EditField
placeholder="انتخاب کنید..."
changeData={changeListData}
data={data}
icon={<CalendarPD />}
isTransparent={true}
iconGray={true}
name="time_work"
/>
<span
className="absolute left-0 top-0 w-full h-full bg-transparent z-10 cursor-pointer"
onClick={handleClick}
></span>
</div>
</ButtonDate>
</ContentText>
);
}
export default FieldDate;
components/panel/addDoctor/listMenu/generalInformation/form/Form.js
+2 -12
View File
@@ -3,10 +3,10 @@ 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";
import FieldDate from "./FieldDate";
function Form() {
const [data, setData] = useState({
@@ -95,17 +95,7 @@ function Form() {
<ContentText text="جنسیت">
<RadioGender />
</ContentText>
<ContentText text="زمان شروع به کار">
<EditField
icon={<CalendarPD />}
isTransparent={true}
placeholder="انتخاب کنید..."
iconGray={true}
changeData={changeData}
data={data?.time_work}
name="time_work"
/>
</ContentText>
<FieldDate changeListData={changeData} data={data?.time_work} />
</div>
<div className="mt-[40px] w-full flex justify-end">
<Button
components/panel/addDoctor/listMenu/workingDays/List.js
+7 -7
View File
@@ -45,19 +45,19 @@ function List() {
<TableHead className="!py-2">
<TableRow className="!bg-[#EFEFEF] !py-2 dark:!bg-[#343645]">
<TableCell
className="!py-[10px] !text-[#616161] dark:!text-[#FAFAFA] !text-[14px] !font-normal"
className="!py-[10px] !text-[#616161] dark:!text-[#D7D8ED] !text-[14px] !font-normal"
align="left"
>
روز های هفته
</TableCell>
<TableCell
className="!py-[10px] !text-[#616161] dark:!text-[#FAFAFA] !text-[14px] !font-normal"
className="!py-[10px] !text-[#616161] dark:!text-[#D7D8ED] !text-[14px] !font-normal"
align="left"
>
تایم صبح
</TableCell>
<TableCell
className="!py-[10px] !text-[#616161] dark:!text-[#FAFAFA] !text-[14px] !font-normal"
className="!py-[10px] !text-[#616161] dark:!text-[#D7D8ED] !text-[14px] !font-normal"
align="left"
>
تایم عصر
@@ -78,7 +78,7 @@ function List() {
{row.name}
</TableCell>
<TableCell
className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]"
className="!border-[1px] !text-[#616161] dark:!text-[#D7D8ED] !text-center !text-[16px] !font-medium !border-[#DBDBDB]"
align="right"
>
{row.morning_time[0] || row.morning_time[1] ? (
@@ -90,7 +90,7 @@ function List() {
idx,
});
}}
className="!gap-[6px] !min-w-[146px] !py-[4px] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
className="!gap-[6px] !min-w-[146px] !py-[4px] dark:!text-[#D7D8ED] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
>
{`${row.morning_time[0]} - ${row.morning_time[1]}`}
<EditOrangeAD />
@@ -106,7 +106,7 @@ function List() {
)}
</TableCell>
<TableCell
className="!border-[1px] !text-[#616161] !text-center !text-[16px] !font-medium !border-[#DBDBDB]"
className="!border-[1px] !text-[#616161] dark:!text-[#D7D8ED] !text-center !text-[16px] !font-medium !border-[#DBDBDB]"
align="right"
>
{row.evening_time[0] || row.evening_time[1] ? (
@@ -118,7 +118,7 @@ function List() {
idx,
});
}}
className="!gap-[6px] !min-w-[146px] !py-[4px] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
className="!gap-[6px] !min-w-[146px] !py-[4px] dark:!text-[#D7D8ED] !px-[8px] !text-[#616161] !text-[16px] !font-bold"
>
{`${row.evening_time[0]} - ${row.evening_time[1]}`}
<EditOrangeAD />
components/panel/addDoctor/listMenu/workingDays/modal/ContentModal.js
+3 -2
View File
@@ -21,10 +21,11 @@ function ContentModal({
<Modal open={open} onClose={handleClose}>
<Box
sx={styleDefault}
className="!w-full !rounded-none md:!rounded-[8px] md:!w-fit !h-full md:!h-fit !py-[20px] !px-[16px] !pb-[56px]"
className="!w-full !rounded-none md:!rounded-[8px] dark:!bg-[#222433] dark:!shadow-[0px_4px_25px_10px_#1F1D2B]
md:!w-fit !h-full md:!h-fit !py-[20px] !px-[16px] !pb-[56px]"
>
<div className="flex items-center justify-between">
<p className="text-[#525252] text-[20px] font-bold">
<p className="text-[#525252] dark:text-[#D7D8ED] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
اضافه کردن روز کاری
</p>
<Button variant="text" className="!p-1" onClick={handleClose}>
components/panel/addDoctor/listMenu/workingDays/modal/Radios.js
+12 -2
View File
@@ -13,8 +13,18 @@ function Radios({ value, handleChange }) {
},
}}
>
<FormControlLabel value={0} control={<Radio />} label="روز کاری" />
<FormControlLabel value={1} control={<Radio />} label="تعطیل" />
<FormControlLabel
className="!text-[#A1A1A1]"
value={0}
control={<Radio />}
label="روز کاری"
/>
<FormControlLabel
className="!text-[#A1A1A1]"
value={1}
control={<Radio />}
label="تعطیل"
/>
</RadioGroup>
);
}
components/panel/turns/head/Date.js
+2 -15
View File
@@ -1,4 +1,4 @@
import { Button, ButtonGroup } from "@mui/material";
import FilterDate from "./FilterDate";
function Date() {
return (
@@ -6,20 +6,7 @@ function Date() {
<p className="text-[#616161] text-[14px] font-normal md:hidden dark:text-[#a1a1a1]">
انتخاب بازه زمانی
</p>
<ButtonGroup variant="outlined">
<Button
className="!border-[#EFEFEF] dark:!border-[#343645] !bg-[#FFF] dark:!bg-[#222433] !py-[4.5px] !text-[#7E7E7E]
dark:!text-[#A1A1A1] !text-[16px] !font-normal !w-[115px]"
>
از تاریخ
</Button>
<Button
className="!border-[#EFEFEF] dark:!border-[#343645] !bg-[#FFF] dark:!bg-[#222433] !py-[4.5px] !text-[#7E7E7E]
dark:!text-[#A1A1A1] !text-[16px] !font-normal !w-[115px]"
>
تا تاریخ
</Button>
</ButtonGroup>
<FilterDate />
</div>
);
}
components/panel/turns/head/FilterDate.js
+37
View File
@@ -0,0 +1,37 @@
import { useState } from "react";
import { convertToJalali } from "@/helper";
import { ButtonGroup } from "@mui/material";
import PopoverDate from "@/app/component/PopoverDate";
function FilterDate() {
const [date, setDate] = useState({
start: null,
end: null,
});
const updateDate = (newDate, type) => {
setDate({
...date,
[type]: newDate,
});
};
return (
<ButtonGroup variant="outlined">
<PopoverDate
type="start"
date={date.start}
updateDate={updateDate}
text={date.start ? convertToJalali(date.start) : "از تاریخ"}
/>
<PopoverDate
type="end"
date={date.end}
updateDate={updateDate}
text={date.end ? convertToJalali(date.end) : "تا تاریخ"}
/>
</ButtonGroup>
);
}
export default FilterDate;
components/panel/userAccount/Head.js
+2 -18
View File
@@ -1,9 +1,7 @@
"use client";
import UploadFile from "@/app/component/UploadFile";
import { useRef } from "react";
import { Button } from "@mui/material";
import ProfileP from "@/components/icons/ProfileP";
import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
function Head() {
const fileRef = useRef();
@@ -12,21 +10,7 @@ function Head() {
return (
<div className="flex items-center justify-center md:justify-start gap-[10px]">
<input className="contents" ref={fileRef} type="file" />
<div
className="p-[24px] grid cursor-pointer place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full"
onClick={() => openInput()}
>
<ProfileP />
</div>
<Button
variant="text"
onClick={() => openInput()}
className="!flex !p-1 dark:!text-[#A1A1A1] !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
>
انتخاب تصویر
<ArrowLeftPU />
</Button>
<UploadFile fileRef={fileRef} openInput={openInput} />
</div>
);
}