handle register & retry code & edit phone number & fix bug select city and state & add basic modal to all tabs in dashboard

This commit is contained in:
Ehsan
2025-05-29 05:07:11 +03:30
parent c8e8048d6c
commit e12e6c171c
18 changed files with 313 additions and 34 deletions
-1
View File
@@ -12,7 +12,6 @@ export default async function Clinics() {
); );
const clinics = response.data.$data; const clinics = response.data.$data;
console.log(clinics);
return ( return (
<Layout name="/clinics"> <Layout name="/clinics">
+3 -1
View File
@@ -11,6 +11,7 @@ function AutoCompleteSelect({
disabled = false, disabled = false,
listboxProps, listboxProps,
sendAll, sendAll,
name,
}) { }) {
return ( return (
<Autocomplete <Autocomplete
@@ -29,7 +30,8 @@ function AutoCompleteSelect({
updateData( updateData(
newValue && sendAll newValue && sendAll
? newValue ? newValue
: (newValue && !sendAll && newValue.label) || "" : (newValue && !sendAll && newValue.label) || "",
name
); );
}} }}
sx={{ sx={{
+2 -2
View File
@@ -30,12 +30,12 @@ function ModalSearchCity({
useEffect(() => { useEffect(() => {
if (provinceSelected) { if (provinceSelected) {
const selectedState = states.find( const selectedState = states.find(
(state) => state.label === provinceSelected, (state) => state.label === provinceSelected
); );
if (selectedState) { if (selectedState) {
const stateId = selectedState.id; const stateId = selectedState.id;
const filteredCities = cities.filter( const filteredCities = cities.filter(
(city) => city.province_id === stateId, (city) => city.province_id === stateId
); );
setFilteredCities(filteredCities); setFilteredCities(filteredCities);
} }
@@ -2,10 +2,11 @@ import PlusB from "@/components/icons/PlusB";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import React from "react"; import React from "react";
function AddBtn() { function AddBtn({ handleOpen }) {
return ( return (
<Button <Button
className="!bg-[#5559CE] !w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium" className="!bg-[#5559CE] !w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
onClick={handleOpen}
variant="contained" variant="contained"
> >
<PlusB /> <PlusB />
@@ -4,18 +4,18 @@ import EditB from "@/components/icons/EditB";
import TrashB from "@/components/icons/TrashB"; import TrashB from "@/components/icons/TrashB";
import { Button, TableCell, TableRow } from "@mui/material"; import { Button, TableCell, TableRow } from "@mui/material";
import Head from "../../components/Head"; import Head from "../../components/Head";
import AddBtn from "../../components/AddBtn"; import { useState } from "react";
import UpdateBtn from "../../components/UpdateBtn"; import ModalAddAlergie from "./modal";
function Allergies({ data }) { function Allergies({ data }) {
const tableHead = ["ردیف", "ماده آلرژی‌زا", "واکنش", "شدت", ""]; const tableHead = ["ردیف", "ماده آلرژی‌زا", "واکنش", "شدت", ""];
const centerTable = [0]; const centerTable = [0];
const [open, setOpen] = useState(false);
return ( return (
<div> <div>
<Head text="لیست آلرژی ها"> <Head text="لیست آلرژی ها">
<UpdateBtn /> <ModalAddAlergie open={open} setOpen={setOpen} />
<AddBtn />
</Head> </Head>
<CustomTable <CustomTable
zeroRadius={true} zeroRadius={true}
@@ -0,0 +1,27 @@
import FieldLabel from "@/components/contactUs/FieldLabel";
import Field from "@/app/component/Field";
import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
const listIntensity = [
{ label: "خفیف" },
{ label: "متوسط" },
{ label: "شدید" },
];
function Content() {
return (
<div className="mt-[32px] md:mt-[36px] lg:mt-[40px] flex flex-col gap-[24px] md:gap-[28px] lg:gap-[32px] px-0 sm:px-[52px]">
<FieldLabel title="ماده آلرژی‌زا">
<Field isPlaceHolder={true} title="" type="text" />
</FieldLabel>
<FieldLabel title="واکنش">
<Field isPlaceHolder={true} title="" type="text" />
</FieldLabel>
<FieldLabel title="ماده آلرژی‌زا">
<AutoCompleteSelect list={listIntensity} label="شدت" />
</FieldLabel>
</div>
);
}
export default Content;
@@ -0,0 +1,45 @@
import { styleDefault } from "@/mui";
import AddBtn from "../../../components/AddBtn";
import UpdateBtn from "../../../components/UpdateBtn";
import { Button, Modal } from "@mui/material";
import Content from "./Content";
function ModalAddAlergie({ open, setOpen }) {
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<>
{/* Button Modal */}
<>
<UpdateBtn />
<AddBtn handleOpen={handleOpen} />
</>
{/* Content Modal */}
<Modal open={open} onClose={handleClose} className="w-full">
<div
style={styleDefault}
className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
!w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
>
<div>
<div className="flex justify-between w-full">
<p className="text-[#3B3B3B] text-[20px] font-bold">اضافه کردن آلرژی</p>
</div>
<Content />
</div>
<Button
className="!mt-[32px] md:!mt-[36px] lg:!mt-[40px] !px-3 !py-2 !text-[16px] !font-medium !w-fit !mr-auto"
onClick={handleClose}
variant="contained"
>
اعمال تغییرات
</Button>
</div>
</Modal>
</>
);
}
export default ModalAddAlergie;
@@ -4,18 +4,18 @@ import EditB from "@/components/icons/EditB";
import TrashB from "@/components/icons/TrashB"; import TrashB from "@/components/icons/TrashB";
import { Button, TableCell, TableRow } from "@mui/material"; import { Button, TableCell, TableRow } from "@mui/material";
import Head from "../../components/Head"; import Head from "../../components/Head";
import AddBtn from "../../components/AddBtn"; import { useState } from "react";
import UpdateBtn from "../../components/UpdateBtn"; import ModalAddHistory from "./modal";
function FamilyHistory({ data }) { function FamilyHistory({ data }) {
const tableHead = ["ردیف", "بیماری", "نسبت خانوادگی", ""]; const tableHead = ["ردیف", "بیماری", "نسبت خانوادگی", ""];
const centerTable = [0]; const centerTable = [0];
const [open, setOpen] = useState(false);
return ( return (
<div> <div>
<Head text="لیست سابقه خانوادگی بیماری"> <Head text="لیست سابقه خانوادگی بیماری">
<UpdateBtn /> <ModalAddHistory open={open} setOpen={setOpen} />
<AddBtn />
</Head> </Head>
<CustomTable <CustomTable
zeroRadius={true} zeroRadius={true}
@@ -0,0 +1,44 @@
import { styleDefault } from "@/mui";
import AddBtn from "../../../components/AddBtn";
import UpdateBtn from "../../../components/UpdateBtn";
import { Button, Modal } from "@mui/material";
function ModalAddHistory({ open, setOpen }) {
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<>
{/* Button Modal */}
<>
<UpdateBtn />
<AddBtn handleOpen={handleOpen} />
</>
{/* Content Modal */}
<Modal open={open} onClose={handleClose} className="w-full">
<div
style={styleDefault}
className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
!w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
>
<div>
<div className="flex justify-between w-full">
<p className="text-[#3B3B3B] text-[20px] font-bold">اضافه کردن سابقه خانوادگی بیماری</p>
</div>
{/* <Content /> */}
</div>
<Button
className="!mt-[32px] md:!mt-[36px] lg:!mt-[40px] !px-3 !py-2 !text-[16px] !font-medium !w-fit !mr-auto"
onClick={handleClose}
variant="contained"
>
اعمال تغییرات
</Button>
</div>
</Modal>
</>
);
}
export default ModalAddHistory;
@@ -4,18 +4,18 @@ import EditB from "@/components/icons/EditB";
import TrashB from "@/components/icons/TrashB"; import TrashB from "@/components/icons/TrashB";
import { Button, TableCell, TableRow } from "@mui/material"; import { Button, TableCell, TableRow } from "@mui/material";
import Head from "../../components/Head"; import Head from "../../components/Head";
import AddBtn from "../../components/AddBtn"; import ModalAddMedications from "./modal";
import UpdateBtn from "../../components/UpdateBtn"; import { useState } from "react";
function Medications({ data }) { function Medications({ data }) {
const tableHead = ["ردیف", "نام دارو", "دوز مصرفی", "تعداد و زمان مصرف", ""]; const tableHead = ["ردیف", "نام دارو", "دوز مصرفی", "تعداد و زمان مصرف", ""];
const centerTable = [0]; const centerTable = [0];
const [open, setOpen] = useState(false);
return ( return (
<div> <div>
<Head text="لیست دارو های مصرفی"> <Head text="لیست دارو های مصرفی">
<UpdateBtn /> <ModalAddMedications open={open} setOpen={setOpen} />
<AddBtn />
</Head> </Head>
<CustomTable <CustomTable
zeroRadius={true} zeroRadius={true}
@@ -0,0 +1,44 @@
import { styleDefault } from "@/mui";
import AddBtn from "../../../components/AddBtn";
import UpdateBtn from "../../../components/UpdateBtn";
import { Button, Modal } from "@mui/material";
function ModalAddMedications({ open, setOpen }) {
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<>
{/* Button Modal */}
<>
<UpdateBtn />
<AddBtn handleOpen={handleOpen} />
</>
{/* Content Modal */}
<Modal open={open} onClose={handleClose} className="w-full">
<div
style={styleDefault}
className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
!w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
>
<div>
<div className="flex justify-between w-full">
<p className="text-[#3B3B3B] text-[20px] font-bold">اضافه کردن دارو های مصرفی</p>
</div>
{/* <Content /> */}
</div>
<Button
className="!mt-[32px] md:!mt-[36px] lg:!mt-[40px] !px-3 !py-2 !text-[16px] !font-medium !w-fit !mr-auto"
onClick={handleClose}
variant="contained"
>
اعمال تغییرات
</Button>
</div>
</Modal>
</>
);
}
export default ModalAddMedications;
@@ -4,18 +4,18 @@ import EditB from "@/components/icons/EditB";
import TrashB from "@/components/icons/TrashB"; import TrashB from "@/components/icons/TrashB";
import { Button, TableCell, TableRow, Tooltip } from "@mui/material"; import { Button, TableCell, TableRow, Tooltip } from "@mui/material";
import Head from "../../components/Head"; import Head from "../../components/Head";
import AddBtn from "../../components/AddBtn"; import ModalAddRelatives from "./modal";
import UpdateBtn from "../../components/UpdateBtn"; import { useState } from "react";
function Relatives({ data }) { function Relatives({ data }) {
const tableHead = ["ردیف", "نام", "نسبت", "شماره تماس", "آدرس", ""]; const tableHead = ["ردیف", "نام", "نسبت", "شماره تماس", "آدرس", ""];
const centerTable = [0]; const centerTable = [0];
const [open, setOpen] = useState(false);
return ( return (
<div> <div>
<Head text="لیست بستگان"> <Head text="لیست بستگان">
<UpdateBtn /> <ModalAddRelatives open={open} setOpen={setOpen} />
<AddBtn />
</Head> </Head>
<CustomTable <CustomTable
zeroRadius={true} zeroRadius={true}
@@ -0,0 +1,44 @@
import { styleDefault } from "@/mui";
import AddBtn from "../../../components/AddBtn";
import UpdateBtn from "../../../components/UpdateBtn";
import { Button, Modal } from "@mui/material";
function ModalAddRelatives({ open, setOpen }) {
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<>
{/* Button Modal */}
<>
<UpdateBtn />
<AddBtn handleOpen={handleOpen} />
</>
{/* Content Modal */}
<Modal open={open} onClose={handleClose} className="w-full">
<div
style={styleDefault}
className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
!w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
>
<div>
<div className="flex justify-between w-full">
<p className="text-[#3B3B3B] text-[20px] font-bold">اضافه کردن بستگان</p>
</div>
{/* <Content /> */}
</div>
<Button
className="!mt-[32px] md:!mt-[36px] lg:!mt-[40px] !px-3 !py-2 !text-[16px] !font-medium !w-fit !mr-auto"
onClick={handleClose}
variant="contained"
>
اعمال تغییرات
</Button>
</div>
</Modal>
</>
);
}
export default ModalAddRelatives;
@@ -4,8 +4,8 @@ import EditB from "@/components/icons/EditB";
import TrashB from "@/components/icons/TrashB"; import TrashB from "@/components/icons/TrashB";
import { Button, TableCell, TableRow } from "@mui/material"; import { Button, TableCell, TableRow } from "@mui/material";
import Head from "../../components/Head"; import Head from "../../components/Head";
import AddBtn from "../../components/AddBtn"; import ModalAddSurgeries from "./modal";
import UpdateBtn from "../../components/UpdateBtn"; import { useState } from "react";
function Surgeries({ data }) { function Surgeries({ data }) {
const tableHead = [ const tableHead = [
@@ -16,12 +16,12 @@ function Surgeries({ data }) {
"", "",
]; ];
const centerTable = [0, 3]; const centerTable = [0, 3];
const [open, setOpen] = useState(false);
return ( return (
<div> <div>
<Head text="لیست جراحی ها"> <Head text="لیست جراحی ها">
<UpdateBtn /> <ModalAddSurgeries open={open} setOpen={setOpen} />
<AddBtn />
</Head> </Head>
<CustomTable <CustomTable
zeroRadius={true} zeroRadius={true}
@@ -0,0 +1,44 @@
import { styleDefault } from "@/mui";
import AddBtn from "../../../components/AddBtn";
import UpdateBtn from "../../../components/UpdateBtn";
import { Button, Modal } from "@mui/material";
function ModalAddSurgeries({ open, setOpen }) {
const handleOpen = () => setOpen(true);
const handleClose = () => setOpen(false);
return (
<>
{/* Button Modal */}
<>
<UpdateBtn />
<AddBtn handleOpen={handleOpen} />
</>
{/* Content Modal */}
<Modal open={open} onClose={handleClose} className="w-full">
<div
style={styleDefault}
className="!px-[16px] !overflow-auto md:!min-w-[580px] md:!px-[24px] lg:!px-[32px] !py-[24px] !bg-[#FFF] !rounded-[8px] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
!w-full md:!w-fit !h-full md:!h-fit !flex !flex-col !justify-between !max-h-screen md:!max-h-[calc(100%_-_32px)]"
>
<div>
<div className="flex justify-between w-full">
<p className="text-[#3B3B3B] text-[20px] font-bold">اضافه کردن جراحی</p>
</div>
{/* <Content /> */}
</div>
<Button
className="!mt-[32px] md:!mt-[36px] lg:!mt-[40px] !px-3 !py-2 !text-[16px] !font-medium !w-fit !mr-auto"
onClick={handleClose}
variant="contained"
>
اعمال تغییرات
</Button>
</div>
</Modal>
</>
);
}
export default ModalAddSurgeries;
+1
View File
@@ -18,6 +18,7 @@ function RegisterPage({ matchedCity }) {
num={num} num={num}
uuid={uuid} uuid={uuid}
setStep={false} setStep={false}
setUuid={setUuid}
setIsSendMsg={setIsSendMsg} setIsSendMsg={setIsSendMsg}
/> />
) : ( ) : (
+29 -7
View File
@@ -1,8 +1,10 @@
import RetryLogin from "@/components/icons/RetryLogin"; import RetryLogin from "@/components/icons/RetryLogin";
import { changeNumToDefault } from "@/helper";
import { request } from "@/services/response";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
const time_resend_code = 120; const time_resend_code = 120;
function Recode({ retryIcon, timer, setTimer }) { function Recode({ retryIcon, timer, setUuid, num, setTimer }) {
const handleTimer = () => { const handleTimer = () => {
setTimer("loading"); setTimer("loading");
setTimeout(() => { setTimeout(() => {
@@ -17,18 +19,38 @@ function Recode({ retryIcon, timer, setTimer }) {
}, 1000); }, 1000);
}; };
const rotateIcon = () => {
retryIcon.current.classList.add("retry-icon");
setTimeout(() => {
retryIcon.current && retryIcon.current.classList.remove("retry-icon");
}, 1000);
};
const handleReq = () => {
rotateIcon();
const interval = setInterval(() => {
rotateIcon();
}, 1200);
request
.sendCode(changeNumToDefault(num), "")
.then((response) => {
clearInterval(interval);
if (response.uuid) {
setUuid(response.uuid);
handleTimer();
}
})
.catch(() => clearInterval(interval));
};
return ( return (
<Button <Button
className="flex !p-1 items-center justify-start gap-1 hover-rotate-90 cursor-pointer" className="flex !p-1 items-center justify-start gap-1 hover-rotate-90 cursor-pointer"
disabled={typeof timer === "number" && timer !== 0} disabled={typeof timer === "number" && timer !== 0}
onClick={() => { onClick={() => {
if (!timer && timer !== "loading") { if (!timer && timer !== "loading") {
handleTimer(); // handleTimer();
retryIcon.current.classList.add("retry-icon"); handleReq();
setTimeout(() => {
retryIcon.current &&
retryIcon.current.classList.remove("retry-icon");
}, 1000);
} }
}} }}
> >
@@ -9,7 +9,7 @@ import ArrowRightS from "../../icons/ArrowRightS";
import Recode from "./Recode"; import Recode from "./Recode";
import SendReq from "./SendReq"; import SendReq from "./SendReq";
function VerificationPage({ setIsSendMsg, uuid, link, num, setStep }) { function VerificationPage({ setIsSendMsg, uuid, link, setUuid, num, setStep }) {
const retryIcon = useRef(); const retryIcon = useRef();
const [timer, setTimer] = useState(0); const [timer, setTimer] = useState(0);
@@ -99,7 +99,13 @@ function VerificationPage({ setIsSendMsg, uuid, link, num, setStep }) {
</p> </p>
</Button> </Button>
<Recode retryIcon={retryIcon} timer={timer} setTimer={setTimer} /> <Recode
num={num}
timer={timer}
setUuid={setUuid}
setTimer={setTimer}
retryIcon={retryIcon}
/>
</div> </div>
</div> </div>
<SendReq <SendReq