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
app/component/ButtonDate.js
+39
View File
@@ -0,0 +1,39 @@
import { Popover } from "@mui/material";
import DatePickerContent from "./DatePickerContent";
function ButtonDate({ anchorEl, setAnchorEl, open, id, updateDate, children }) {
const handleClose = () => setAnchorEl(null);
return (
<>
{children}
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
sx={{
"& .MuiPaper-root": {
padding: { xs: "12px 12px 0", sm: "24px 24px 0" },
background: "#FFF",
borderRadius: "8px",
border: "1px solid #EFEFEF",
boxShadow: "0px 1px 24.8px 0px rgba(204, 204, 204, 0.18)",
},
}}
>
<DatePickerContent updateDate={updateDate} handleClose={handleClose} />
</Popover>
</>
);
}
export default ButtonDate;
app/component/DatePickerContent.js
+37
View File
@@ -0,0 +1,37 @@
import { DatePicker } from "jalaali-react-date-picker";
function DatePickerContent({ type, updateDate, handleClose }) {
return (
<DatePicker
dayLabelRender={(e) => (
<div className="day-label-bar-inner-rtl">
<div className="day-label-item !text-[10px] font-semibold">شنبه</div>
<div className="day-label-item !text-[10px] font-semibold">
۱ شنبه
</div>
<div className="day-label-item !text-[10px] font-semibold">
۲ شنبه
</div>
<div className="day-label-item !text-[10px] font-semibold">
۳ شنبه
</div>
<div className="day-label-item !text-[10px] font-semibold">
۴ شنبه
</div>
<div className="day-label-item !text-[10px] font-semibold">
۵ شنبه
</div>
<div className="day-label-item !text-[10px] font-semibold">جمعه</div>
</div>
)}
onChange={(e) => {
if (e._d) {
updateDate && updateDate(e._d, type);
}
handleClose && handleClose();
}}
/>
);
}
export default DatePickerContent;
app/component/PopoverDate.js
+61
View File
@@ -0,0 +1,61 @@
import { useState } from "react";
import { Button, Popover } from "@mui/material";
import DatePickerContent from "./DatePickerContent";
function PopoverDate({ text, updateDate, type }) {
const [anchorEl, setAnchorEl] = useState(null);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;
return (
<div>
<Button
onClick={handleClick}
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]"
>
{text}
</Button>
<Popover
id={id}
open={open}
anchorEl={anchorEl}
onClose={handleClose}
anchorOrigin={{
vertical: "bottom",
horizontal: "right",
}}
transformOrigin={{
vertical: "top",
horizontal: "right",
}}
sx={{
"& .MuiPaper-root": {
padding: { xs: "12px 12px 0", sm: "24px 24px 0" },
background: "#FFF",
borderRadius: "8px",
border: "1px solid #EFEFEF",
boxShadow: "0px 1px 24.8px 0px rgba(204, 204, 204, 0.18)",
},
}}
>
<DatePickerContent
type={type}
updateDate={updateDate}
handleClose={handleClose}
/>
</Popover>
</div>
);
}
export default PopoverDate;
app/component/TimePickerField.js
+1 -1
View File
@@ -70,7 +70,7 @@ function TimePickerField({ dataChange, disable, setData, timeStart, data }) {
}}
/>
<p
className={`absolute flex items-center right-[4px] h-[44px] py-[8px] px-[8px]
className={`absolute dark:bg-[#222433] dark:!text-[#A1A1A1] flex items-center right-[4px] h-[44px] py-[8px] px-[8px]
w-[calc(100%_-_52px)] text-[#7E7E7E] bg-[#FFFFFF] text-[14px] font-normal top-1/2 -translate-y-1/2
${disable && "!text-[rgba(126,126,126,0.5)]"}`}
>
app/component/UploadFile.js
+29
View File
@@ -0,0 +1,29 @@
"use client";
import { Button } from "@mui/material";
import ProfileP from "@/components/icons/ProfileP";
import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
function UploadFile({ fileRef, openInput }) {
return (
<>
<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>
</>
);
}
export default UploadFile;
app/globals.css
+40 -5
View File
@@ -583,6 +583,24 @@ html {
color: #a1a1a1 !important;
}
.dark .MuiOutlinedInput-notchedOutline {
border-color: #343645 !important;
}
.dark
.MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-track {
background: #1f1d2b;
height: 50px;
border-radius: 10px;
}
.dark
.MuiList-root.MuiList-padding.MuiMultiSectionDigitalClockSection-root::-webkit-scrollbar-thumb {
background: #222433;
height: 50px;
border-radius: 20px;
}
/* End Of Dark Style */
/* Dark Date Picker */
@@ -642,6 +660,28 @@ html {
color: #fafafa;
}
.panel-jalaali {
width: 464px !important;
}
.day-label-bar,
.panel-header-inner,
.days-body {
max-width: 100% !important;
padding: 0 !important;
}
.years-body-rtl,
.months-body-rtl {
min-width: 100%;
grid-template-columns: repeat(3, minmax(33.33%, 100px)) !important;
}
.days-body {
width: 100%;
grid-template-columns: repeat(7, minmax(14.28%, 38px)) !important;
}
/* End Of Dark Date Picker */
/* End Date Picker Style */
@@ -670,11 +710,6 @@ html {
-webkit-text-fill-color: rgba(161, 161, 161, 0.6) !important;
}
.dark .MuiPaper-root {
background: #1f1d2b !important;
box-shadow: 0px 0px 14.2px 0px rgba(74, 73, 73, 0.19) !important;
}
.dark .MuiTabs-scroller,
.dark .MuiTabs-flexContainer {
border-bottom-color: #343645 !important;
components/icons/CloseModalD.js
+1
View File
@@ -9,6 +9,7 @@ function CloseModalD() {
>
<path
d="M12.5947 4.20135C12.533 4.13954 12.4597 4.09051 12.3791 4.05706C12.2984 4.0236 12.212 4.00638 12.1247 4.00638C12.0374 4.00638 11.9509 4.0236 11.8703 4.05706C11.7896 4.09051 11.7164 4.13954 11.6547 4.20135L8.39468 7.45468L5.13468 4.19468C5.07296 4.13296 4.99969 4.084 4.91904 4.0506C4.8384 4.01719 4.75197 4 4.66468 4C4.57739 4 4.49096 4.01719 4.41032 4.0506C4.32968 4.084 4.2564 4.13296 4.19468 4.19468C4.13296 4.2564 4.084 4.32968 4.0506 4.41032C4.01719 4.49096 4 4.57739 4 4.66468C4 4.75197 4.01719 4.8384 4.0506 4.91904C4.084 4.99969 4.13296 5.07296 4.19468 5.13468L7.45468 8.39468L4.19468 11.6547C4.13296 11.7164 4.084 11.7897 4.0506 11.8703C4.01719 11.951 4 12.0374 4 12.1247C4 12.212 4.01719 12.2984 4.0506 12.379C4.084 12.4597 4.13296 12.533 4.19468 12.5947C4.2564 12.6564 4.32968 12.7054 4.41032 12.7388C4.49096 12.7722 4.57739 12.7894 4.66468 12.7894C4.75197 12.7894 4.8384 12.7722 4.91904 12.7388C4.99969 12.7054 5.07296 12.6564 5.13468 12.5947L8.39468 9.33468L11.6547 12.5947C11.7164 12.6564 11.7897 12.7054 11.8703 12.7388C11.951 12.7722 12.0374 12.7894 12.1247 12.7894C12.212 12.7894 12.2984 12.7722 12.379 12.7388C12.4597 12.7054 12.533 12.6564 12.5947 12.5947C12.6564 12.533 12.7054 12.4597 12.7388 12.379C12.7722 12.2984 12.7894 12.212 12.7894 12.1247C12.7894 12.0374 12.7722 11.951 12.7388 11.8703C12.7054 11.7897 12.6564 11.7164 12.5947 11.6547L9.33468 8.39468L12.5947 5.13468C12.848 4.88135 12.848 4.45468 12.5947 4.20135Z"
className="fill-[#7E7E7E] dark:fill-[#FAFAFA]"
fill="#7E7E7E"
/>
</svg>
components/icons/Sun.js
+28
View File
@@ -0,0 +1,28 @@
function Sun() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 18.5C15.5899 18.5 18.5 15.5899 18.5 12C18.5 8.41015 15.5899 5.5 12 5.5C8.41015 5.5 5.5 8.41015 5.5 12C5.5 15.5899 8.41015 18.5 12 18.5Z"
stroke="#A1A1A1"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M19.14 19.14L19.01 19.01M19.01 4.99L19.14 4.86L19.01 4.99ZM4.86 19.14L4.99 19.01L4.86 19.14ZM12 2.08V2V2.08ZM12 22V21.92V22ZM2.08 12H2H2.08ZM22 12H21.92H22ZM4.99 4.99L4.86 4.86L4.99 4.99Z"
stroke="#A1A1A1"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}
export default Sun;
components/layoutPanel/header/MenuProfile.js
+2 -2
View File
@@ -38,8 +38,8 @@ function MenuProfile({ data }) {
width={48}
/>
<div className="flex flex-col items-start justify-between gap-[3px]">
<p className="text-[#3B3B3B] dark:text-[#FAFAFA] text-[14px] font-semibold dark:text-[]">
{data.name}
<p className="text-[#3B3B3B] dark:text-[#D7D8ED] text-[14px] font-semibold">
دکتر {data.name}
</p>
<p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[12px] font-normal">
{data.expertise}
components/layoutPanel/header/icons/Theme.js
+2 -1
View File
@@ -1,4 +1,5 @@
import MoonP from "@/components/icons/MoonP";
import Sun from "@/components/icons/Sun";
import { Button } from "@mui/material";
import { useTheme } from "next-themes";
import { useState } from "react";
@@ -22,7 +23,7 @@ function Theme() {
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
variant="outlined"
>
<MoonP />
{theme === "light" ? <MoonP /> : <Sun />}
</Button>
);
}
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>
);
}