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

dark mode page add-doctor & user account

Browse Source
This commit is contained in:
Ehsan
2024-10-16 20:59:11 +03:30
parent b561b111ec
commit dee7f1ec27
14 changed files with 61 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/SwitchTable.js
+1 -1
View File
@@ -50,7 +50,7 @@ const MaterialUISwitch = styled(Switch)(({ theme }) => ({
function SwitchTable({ value }) { function SwitchTable({ value }) {
return ( return (
<FormGroup> <FormGroup className="custom-switch">
<FormControlLabel <FormControlLabel
control={<MaterialUISwitch defaultChecked={value} sx={{ m: 1 }} />} control={<MaterialUISwitch defaultChecked={value} sx={{ m: 1 }} />}
/> />
app/globals.css
+8
View File
@@ -600,6 +600,14 @@ html {
border-radius: 20px; border-radius: 20px;
} }
.dark .custom-switch .MuiSwitch-track {
border: 1px solid #343645 !important;
}
.dark .custom-switch .MuiSwitch-thumb::before {
background: #d7d8ed;
}
/* End Of Dark Style */ /* End Of Dark Style */
/* Dark Date Picker */ /* Dark Date Picker */
components/icons/UserEdit.js
+3 -1
View File
@@ -14,7 +14,9 @@ function UserEdit({ active }) {
strokeWidth="1.5" strokeWidth="1.5"
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
className={active ? "stroke-[#FAFAFA] delay-500" : ""} className={
active ? "stroke-[#FAFAFA] delay-500" : ""
}
/> />
<path <path
d="M32.5166 26.2334L26.6165 32.1334C26.3832 32.3668 26.1666 32.8 26.1166 33.1167L25.7999 35.3667C25.6832 36.1833 26.2499 36.75 27.0666 36.6334L29.3165 36.3167C29.6332 36.2667 30.0832 36.05 30.2999 35.8167L36.1999 29.9167C37.2165 28.9001 37.6999 27.7167 36.1999 26.2167C34.7165 24.7333 33.5333 25.2167 32.5166 26.2334Z" d="M32.5166 26.2334L26.6165 32.1334C26.3832 32.3668 26.1666 32.8 26.1166 33.1167L25.7999 35.3667C25.6832 36.1833 26.2499 36.75 27.0666 36.6334L29.3165 36.3167C29.6332 36.2667 30.0832 36.05 30.2999 35.8167L36.1999 29.9167C37.2165 28.9001 37.6999 27.7167 36.1999 26.2167C34.7165 24.7333 33.5333 25.2167 32.5166 26.2334Z"
components/layoutPanel/sidebar/index.js
+1 -1
View File
@@ -37,7 +37,7 @@ function Sidebar({ active, setActive, open, setOpen }) {
<Links open={open} setActive={setActive} /> <Links open={open} setActive={setActive} />
</div> </div>
<div <div
className={`w-full justify-center overflow-hidden transition-all duration-500 ${ className={`w-full flex justify-center overflow-hidden transition-all duration-500 ${
open ? "!max-w-full" : "!max-w-0" open ? "!max-w-full" : "!max-w-0"
}`} }`}
> >
components/panel/addDoctor/Step.js
+4 -3
View File
@@ -18,7 +18,7 @@ function Step({ value }) {
className={`flex items-center bg-[#F6F6F6] justify-center p-[18px] className={`flex items-center bg-[#F6F6F6] justify-center p-[18px]
w-[32px] h-[32px] sm:w-[46px] sm:h-[46px] md:w-[60px] md:h-[60px] lg:w-[75px] lg:h-[75px] rounded-full w-[32px] h-[32px] sm:w-[46px] sm:h-[46px] md:w-[60px] md:h-[60px] lg:w-[75px] lg:h-[75px] rounded-full
relative overflow-hidden before:delay-500 before:transition-all before:duration-500 relative overflow-hidden before:delay-500 before:transition-all before:duration-500
before:absolute before:w-full before:h-full before:bg-[#5559CE] before:absolute before:w-full before:h-full before:bg-[#5559CE] dark:bg-[#D7D8ED]
${value >= idx ? "before:right-0" : "before:-right-full"}`} ${value >= idx ? "before:right-0" : "before:-right-full"}`}
> >
<div className="z-10 delay-500">{item.icon}</div> <div className="z-10 delay-500">{item.icon}</div>
@@ -28,7 +28,7 @@ function Step({ value }) {
${ ${
value >= idx value >= idx
? "font-bold text-[#5559CE]" ? "font-bold text-[#5559CE]"
: "font-normal text-[#616161]" : "font-normal text-[#616161] dark:text-[#a1a1a1]"
}`} }`}
> >
{item.name} {item.name}
@@ -36,7 +36,8 @@ function Step({ value }) {
</div> </div>
{list.length > idx + 1 && ( {list.length > idx + 1 && (
<span <span
className={`block rounded-[16px] transition-all duration-500 h-[2px] bg-[#EFEFEF] w-[35px] sm:w-[56px] md:w-[77px] lg:w-[100px] className={`block rounded-[16px] transition-all duration-500 h-[2px]
bg-[#EFEFEF] dark:bg-[#EFEFEF] w-[35px] sm:w-[56px] md:w-[77px] lg:w-[100px]
relative overflow-hidden before:transition-all before:duration-500 relative overflow-hidden before:transition-all before:duration-500
before:absolute before:w-full before:h-full before:bg-[#5559CE] before:ease-linear before:absolute before:w-full before:h-full before:bg-[#5559CE] before:ease-linear
components/panel/addDoctor/index.js
+1 -1
View File
@@ -9,7 +9,7 @@ import GeneralInformation from "./listMenu/generalInformation";
import Step from "./Step"; import Step from "./Step";
function AddDoctorPage() { function AddDoctorPage() {
const [value, setValue] = useState(0); const [value, setValue] = useState(2);
const [data, setData] = useState({ const [data, setData] = useState({
general: { general: {
name: { value: "احسان احمدی", isEdit: false }, name: { value: "احسان احمدی", isEdit: false },
components/panel/addDoctor/listMenu/generalInformation/form/index.js
+2 -1
View File
@@ -92,7 +92,8 @@ function Form({ setValue, parent, data, setData }) {
</div> </div>
<div className="mt-[40px] w-full flex justify-end"> <div className="mt-[40px] w-full flex justify-end">
<Button <Button
className="!w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium" className={`!w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
${!checkAllValues(data) && "opacity-60"}`}
onClick={() => setValue((prev) => prev + 1)} onClick={() => setValue((prev) => prev + 1)}
disabled={!checkAllValues(data)} disabled={!checkAllValues(data)}
variant="contained" variant="contained"
components/panel/addDoctor/listMenu/officeInformation/index.js
+2 -1
View File
@@ -9,7 +9,8 @@ function OfficeInformation({ setValue, parent, data, setData }) {
<Form parent={parent} setData={setData} data={data.office} /> <Form parent={parent} setData={setData} data={data.office} />
<div className="mt-[40px] w-full flex justify-end"> <div className="mt-[40px] w-full flex justify-end">
<Button <Button
className="!w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium" className={`!w-full md:!w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
${!checkAllValues(data) && "opacity-60"}`}
disabled={!checkAllValues(data)} disabled={!checkAllValues(data)}
onClick={() => setValue((prev) => prev + 1)} onClick={() => setValue((prev) => prev + 1)}
variant="contained" variant="contained"
components/panel/addDoctor/listMenu/workingDays/modal/index.js
+10 -5
View File
@@ -3,7 +3,7 @@ import { styleDefault } from "@/mui";
import { Box, Button, Modal } from "@mui/material"; import { Box, Button, Modal } from "@mui/material";
import Radios from "./Radios"; import Radios from "./Radios";
import Form from "./Form"; import Form from "./Form";
import { useState } from "react"; import { useEffect, useState } from "react";
function ContentModal({ function ContentModal({
open, open,
@@ -27,8 +27,13 @@ function ContentModal({
setValue(valueRadio); setValue(valueRadio);
}; };
const closeModal = () => {
handleClose();
setValue(0);
};
return ( return (
<Modal open={open} onClose={handleClose}> <Modal open={open} onClose={closeModal}>
<Box <Box
sx={styleDefault} sx={styleDefault}
className="!w-full !rounded-none md:!rounded-[8px] dark:!bg-[#222433] dark:!shadow-[0px_4px_25px_10px_#1F1D2B] className="!w-full !rounded-none md:!rounded-[8px] dark:!bg-[#222433] dark:!shadow-[0px_4px_25px_10px_#1F1D2B]
@@ -38,15 +43,15 @@ function ContentModal({
<p className="text-[#525252] dark:text-[#D7D8ED] text-[16px] md:text-[18px] lg:text-[20px] font-bold"> <p className="text-[#525252] dark:text-[#D7D8ED] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
اضافه کردن روز کاری اضافه کردن روز کاری
</p> </p>
<Button variant="text" className="!p-1" onClick={handleClose}> <Button variant="text" className="!p-1" onClick={closeModal}>
<CloseModalD /> <CloseModalD />
</Button> </Button>
</div> </div>
<div className="mx-0 md:mx-[52px]"> <div className="mx-0 md:mx-[52px]">
<Radios value={value} handleChange={handleChange} /> <Radios value={value} handleChange={handleChange} />
<Form <Form
handleClose={handleClose} handleClose={closeModal}
isVacation={isVacation} isVacation={value}
dataChange={dataChange} dataChange={dataChange}
setData={setData} setData={setData}
parent={parent} parent={parent}
components/panel/userAccount/bank/List.js
+9 -9
View File
@@ -19,7 +19,7 @@ function List({ data, loading }) {
className="!border-0 !border-b !border-[#DBDBDB]" className="!border-0 !border-b !border-[#DBDBDB]"
> >
<TableCell <TableCell
className="!pr-[18px] !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !text-nowrap" className="!pr-[18px] !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !text-nowrap"
align="center" align="center"
> >
<TextLoading width={15} height={18} loading={loading}> <TextLoading width={15} height={18} loading={loading}>
@@ -27,23 +27,23 @@ function List({ data, loading }) {
</TextLoading> </TextLoading>
</TableCell> </TableCell>
<TableCell <TableCell
className="!text-start !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap" className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
align="right" align="right"
> >
<TextLoading width={30} height={18} loading={loading}> <TextLoading width={50} height={18} loading={loading}>
{row.card_number} {row.card_number}
</TextLoading> </TextLoading>
</TableCell> </TableCell>
<TableCell <TableCell
className="!text-start !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap" className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
align="right" align="right"
> >
<TextLoading width={30} height={18} loading={loading}> <TextLoading width={80} height={18} loading={loading}>
{row.shaba_number} {row.shaba_number}
</TextLoading> </TextLoading>
</TableCell> </TableCell>
<TableCell <TableCell
className="!text-start !bg-[#F8F8F8] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap" className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-[#616161] !pr-[18px] !text-nowrap"
align="right" align="right"
> >
<TextLoading width={30} height={18} loading={loading}> <TextLoading width={30} height={18} loading={loading}>
@@ -51,12 +51,12 @@ function List({ data, loading }) {
</TextLoading> </TextLoading>
</TableCell> </TableCell>
<TableCell <TableCell
className="!text-start !bg-[#F8F8F8] !pr-[18px] !text-nowrap" className="!text-start !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !pr-[18px] !text-nowrap"
align="right" align="right"
> >
<TextLoading width={50} height={18} loading={loading}> <TextLoading width={50} height={18} loading={loading}>
<div className="flex items-center justify-start gap-[16px]"> <div className="flex items-center justify-start gap-[16px]">
<p className="text-[16px] min-w-[60px] font-medium text-[#616161]"> <p className="text-[16px] min-w-[60px] dark:text-[#A1A1A1] font-medium text-[#616161]">
{row.status ? "فعال" : "غیر فعال"} {row.status ? "فعال" : "غیر فعال"}
</p> </p>
<SwitchTable value={row.status} /> <SwitchTable value={row.status} />
@@ -64,7 +64,7 @@ function List({ data, loading }) {
</TextLoading> </TextLoading>
</TableCell> </TableCell>
<TableCell <TableCell
className="!text-center !bg-[#F8F8F8] !pr-[18px] !text-nowrap" className="!text-center !bg-[#F8F8F8] dark:!bg-transparent dark:!text-[#A1A1A1] !pr-[18px] !text-nowrap"
align="right" align="right"
> >
<div className="flex items-center justify-center gap-[4px]"> <div className="flex items-center justify-center gap-[4px]">
components/panel/userAccount/bank/head/index.js
+3 -1
View File
@@ -3,7 +3,9 @@ import ModalAddCard from "./modal";
function Head() { function Head() {
return ( return (
<div className="w-full flex items-center justify-between"> <div className="w-full flex items-center justify-between">
<p className="text-[#525252] text-[20px] font-bold">کارت های بانکی شما</p> <p className="text-[#525252] dark:text-[#A1A1A1] text-[20px] font-bold">
کارت های بانکی شما
</p>
<ModalAddCard /> <ModalAddCard />
</div> </div>
); );
components/panel/userAccount/bank/head/modal/index.js
+4 -3
View File
@@ -33,10 +33,10 @@ function ModalAddCard() {
<Modal open={open} onClose={handleClose}> <Modal open={open} onClose={handleClose}>
<Box <Box
sx={styleDefault} sx={styleDefault}
className="!w-full !h-full md:!h-fit sm:!w-fit !rounded-none sm:!rounded-[8px] sm:!min-w-[524px] !py-[20px] !pt-[24px] md:!pt-[22px] lg:!pt-[20px] !pb-[36px]" className="!w-full dark:!bg-[#222433] dark:!shadow-none !h-full md:!h-fit sm:!w-fit !rounded-none sm:!rounded-[8px] sm:!min-w-[524px] !py-[20px] !pt-[24px] md:!pt-[22px] lg:!pt-[20px] !pb-[36px]"
> >
<div className="flex items-center justify-between w-full"> <div className="flex items-center justify-between w-full">
<p className="text-[#3B3B3B] text-[16px] md:text-[18px] lg:text-[20px] font-bold"> <p className="text-[#3B3B3B] dark:text-[#D7D8ED] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
اضافه کردن شماره کارت اضافه کردن شماره کارت
</p> </p>
<Button onClick={handleClose} className="!p-1" variant="text"> <Button onClick={handleClose} className="!p-1" variant="text">
@@ -48,7 +48,8 @@ function ModalAddCard() {
<Button <Button
variant="outlined" variant="outlined"
onClick={handleClose} onClick={handleClose}
className="!min-w-[134px] !rounded-[4px] !h-[40px] md:!h-[44px] lg:!h-[48px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium" className="!min-w-[134px] !rounded-[4px] !h-[40px] md:!h-[44px] lg:!h-[48px] !border-[#828DE0] dark:!bg-[#C7CEF4]
dark:!border-transparent dark:!text-[#5559CE] !text-[#828DE0] !text-[16px] !font-medium"
> >
انصراف انصراف
</Button> </Button>
components/panel/userAccount/bank/index.js
+3 -3
View File
@@ -2,12 +2,12 @@ import Cards from "./cards";
import Head from "./head"; import Head from "./head";
import List from "./List"; import List from "./List";
function Bank({ data }) { function Bank({ data, loading }) {
return ( return (
<div className="opacity-page"> <div className="opacity-page">
<Head /> <Head />
<List data={data} loading={false} /> <List data={data} loading={loading} />
<Cards data={data} loading={false} /> <Cards data={data} loading={loading} />
</div> </div>
); );
} }
components/panel/userAccount/index.js
+10 -3
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import { useState } from "react"; import { useEffect, useState } from "react";
import Account from "./account"; import Account from "./account";
import Bank from "./bank"; import Bank from "./bank";
import Tab from "./Tab"; import Tab from "./Tab";
@@ -8,11 +8,18 @@ import Tab from "./Tab";
const listTab = ["حساب کاربری", "حساب بانکی"]; const listTab = ["حساب کاربری", "حساب بانکی"];
function UserAccountPage({ data }) { function UserAccountPage({ data }) {
const [value, setValue] = useState(1); const [value, setValue] = useState(0);
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
const handleChange = (event, newValue) => setValue(newValue); const handleChange = (event, newValue) => setValue(newValue);
const components = [<Account />, <Bank data={data.bank} />]; const components = [<Account />, <Bank loading={loading} data={data.bank} />];
return ( return (
<div <div