install and handle casle & prevent page dashboard & handle register and code verfication & get data in clinics page

This commit is contained in:
Ehsan
2025-05-27 03:40:06 +03:30
parent a9f98aea3b
commit d95815d4aa
27 changed files with 336 additions and 206 deletions
+3 -11
View File
@@ -1,15 +1,13 @@
"use client";
import { useEffect, useState } from "react";
import { useState } from "react";
import List from "./list";
import { searchOnList } from "@/helper";
import SearchBar from "./head/SearchBar";
import clinics from "@/data/clinics.json";
import HeadPageList from "@/app/component/head";
function ClinicsPage({ matchedCity, matchedState }) {
const [loading, setLoading] = useState(true);
function ClinicsPage({ clinics, matchedCity, matchedState }) {
const [filteredClinics, setFilteredClinics] = useState(clinics);
const [selected, setSelected] = useState({
@@ -17,12 +15,6 @@ function ClinicsPage({ matchedCity, matchedState }) {
city: matchedCity?.name || "",
});
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
const handleSearch = (value) => {
const searchOnName = searchOnList(clinics, value, "title");
const searchOnLocation = searchOnList(searchOnName, selected.city, "city");
@@ -42,7 +34,7 @@ function ClinicsPage({ matchedCity, matchedState }) {
handleSearch={handleSearch}
/>
</HeadPageList>
<List loading={loading} selected={selected} clinics={filteredClinics} />
<List selected={selected} clinics={filteredClinics} />
</div>
);
}
+15 -15
View File
@@ -7,20 +7,25 @@ import { Button } from "@mui/material";
import Image from "next/image";
import Link from "next/link";
function ItemClinic({ data, loading }) {
function ItemClinic({ data }) {
return (
<li className="p-4 relative bg-[#FFF] border border-solid border-[#EFEFEF] rounded-[8px]">
<div className="flex items-center justify-start gap-2">
<CircularLoading loading={loading} width={60} height={60}>
<Image width={60} height={60} src={data.img} alt="img clinic" />
<CircularLoading width={60} height={60}>
<Image
width={60}
height={60}
src={data.clinic_logo.url || ""}
alt="img clinic"
/>
</CircularLoading>
<div className="flex flex-col items-start justify-center gap-2">
<TextLoading loading={loading} width={100} height={18}>
<TextLoading width={100} height={18}>
<h3 className="text-[#3B3B3B] text-[14px] font-bold">
{data.title}
{data.label}
</h3>
</TextLoading>
<TextLoading loading={loading} width={60} height={18}>
<TextLoading width={60} height={18}>
<p className="text-[#7E7E7E] text-[14px] font-normal">
{data.doctors} پزشک
</p>
@@ -30,7 +35,7 @@ function ItemClinic({ data, loading }) {
<div className="flex flex-col items-start mt-4 gap-4 mb-[14px]">
<div className="flex items-start justify-start gap-0.5">
<LocationClinic />
<TextLoading loading={loading} width={150} height={18}>
<TextLoading width={150} height={18}>
<p className="text-[#7E7E7E] text-[12px] font-normal">
{data.location}
</p>
@@ -38,7 +43,7 @@ function ItemClinic({ data, loading }) {
</div>
<div className="flex items-start justify-start gap-0.5 ml-[64px]">
<ClockClinic />
<TextLoading loading={loading} width={120} height={18}>
<TextLoading width={120} height={18}>
<p className="text-[#7E7E7E] text-[12px] font-normal">
ساعت کاری: {data.hours_of_work}
</p>
@@ -47,13 +52,8 @@ function ItemClinic({ data, loading }) {
</div>
{/* Arrow */}
<Link href={loading ? "#" : `/clinic/${data.id}`}>
<Button
className={`${
loading ? "!bg-[#E7E7E7]" : "!bg-[#5559CE]"
} !p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit`}
disabled={loading}
>
<Link href={`/clinic/${data.id}`}>
<Button className="!bg-[#5559CE] !p-[14px] !absolute !left-4 !bottom-4 !rounded-full !w-fit">
<ArrowLeftD />
</Button>
</Link>
+2 -2
View File
@@ -2,7 +2,7 @@ import Pageguide from "@/app/component/Pageguide";
import ItemClinic from "./ItemClinic";
import Pagination from "@/app/component/Pagination";
function List({ loading, selected, clinics }) {
function List({ selected, clinics }) {
const listPage = ["کلینیک ها", selected?.city || ""];
return (
@@ -18,7 +18,7 @@ function List({ loading, selected, clinics }) {
gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
>
{clinics.map((item) => (
<ItemClinic data={item} key={item.id} loading={loading} />
<ItemClinic data={item} key={item.id} />
))}
</ul>
)}
@@ -0,0 +1,17 @@
import PlusB from "@/components/icons/PlusB";
import { Button } from "@mui/material";
import React from "react";
function AddBtn() {
return (
<Button
className="!bg-[#5559CE] !w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
variant="contained"
>
<PlusB />
اضافه کردن
</Button>
);
}
export default AddBtn;
@@ -1,20 +1,12 @@
import PlusB from "@/components/icons/PlusB";
import { Button } from "@mui/material";
import React from "react";
function Head({ text }) {
function Head({ text, children }) {
return (
<div className="w-full flex mb-[40px] items-center justify-between">
<p className="text-[#525252] dark:text-[#A1A1A1] text-[20px] font-bold">
{text}
</p>
<Button
className="!bg-[#5559CE] !w-fit !shadow-none !rounded-[4px] !gap-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
variant="contained"
>
<PlusB />
اضافه کردن
</Button>
{children}
</div>
);
}
@@ -36,8 +36,7 @@ function ContentTabs({
const [tab, setTab] = useState(0);
const data = profileData[0];
const handleChange = (event, newValue) => {
// setValue(newValue);
const handleChange = (_, newValue) => {
setTab(newValue);
};
@@ -48,16 +47,6 @@ function ContentTabs({
}, []);
const components = [
// <DetailUser user={user} />,
// <Turns
// user={user}
// loading={loading}
// setIsTurnsDetails={setIsTurnsDetails}
// />,
// <Transactions user={user} loading={loading} />,
// <Comments user={user} loading={loading} />,
// <Messages user={user} loading={loading} />,
// <NotfoundDashboard />,
<Disease data={data} />,
<Allergies data={data} />,
<Medications data={data} />,
@@ -4,6 +4,7 @@ import EditB from "@/components/icons/EditB";
import TrashB from "@/components/icons/TrashB";
import { Button, TableCell, TableRow } from "@mui/material";
import Head from "../../components/Head";
import AddBtn from "../../components/AddBtn";
function Allergies({ data }) {
const tableHead = ["ردیف", "ماده آلرژی‌زا", "واکنش", "شدت", ""];
@@ -11,7 +12,9 @@ function Allergies({ data }) {
return (
<div>
<Head text="لیست آلرژی ها" />
<Head text="لیست آلرژی ها">
<AddBtn />
</Head>
<CustomTable
zeroRadius={true}
tableHead={tableHead}
@@ -1,9 +1,9 @@
import CustomTable from "@/app/component/CustomTable";
import TextLoading from "@/app/component/loading/Text";
import EditB from "@/components/icons/EditB";
import TrashB from "@/components/icons/TrashB";
import { Button, Switch, TableCell, TableRow } from "@mui/material";
import Head from "../../components/Head";
import UpdateList from "@/components/icons/UpdateList";
import AddBtn from "../../components/AddBtn";
function Disease({ data }) {
const tableHead = ["ردیف", "اسم", "وضعیت", ""];
@@ -11,7 +11,18 @@ function Disease({ data }) {
return (
<div>
<Head text="لیست بیماری ها" />
<Head text="لیست بیماری ها" add={false}>
<div className="flex items-center justify-end gap-4">
<Button
variant="outlined"
className="!border-[#5559CE] !border-[2px] !flex !items-center !justify-center !gap-2 !text-[14px] md:!text-[14px] !font-medium"
>
<UpdateList />
آپدیت کردن
</Button>
<AddBtn />
</div>
</Head>
<CustomTable
zeroRadius={true}
tableHead={tableHead}
@@ -37,23 +48,9 @@ function Disease({ data }) {
</TableCell>
<TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
<TextLoading width={15} height={18} loading={false}>
{/* {row.status} */}
<Switch defaultChecked={row.status === "true"} />
</TextLoading>
</TableCell>
<TableCell
className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
align="right"
>
<div className="flex items-center justify-center gap-[4px]">
<Button className="!min-w-fit !p-1" variant="text">
<TrashB />
</Button>
<Button className="!min-w-fit !p-1" variant="text">
<EditB />
</Button>
</div>
</TableCell>
</TableRow>
))}
</CustomTable>
@@ -4,6 +4,7 @@ import EditB from "@/components/icons/EditB";
import TrashB from "@/components/icons/TrashB";
import { Button, TableCell, TableRow } from "@mui/material";
import Head from "../../components/Head";
import AddBtn from "../../components/AddBtn";
function FamilyHistory({ data }) {
const tableHead = ["ردیف", "بیماری", "نسبت خانوادگی", ""];
@@ -11,7 +12,9 @@ function FamilyHistory({ data }) {
return (
<div>
<Head text="لیست سابقه خانوادگی بیماری" />
<Head text="لیست سابقه خانوادگی بیماری">
<AddBtn />
</Head>
<CustomTable
zeroRadius={true}
tableHead={tableHead}
@@ -4,6 +4,7 @@ import EditB from "@/components/icons/EditB";
import TrashB from "@/components/icons/TrashB";
import { Button, TableCell, TableRow } from "@mui/material";
import Head from "../../components/Head";
import AddBtn from "../../components/AddBtn";
function Medications({ data }) {
const tableHead = ["ردیف", "نام دارو", "دوز مصرفی", "تعداد و زمان مصرف", ""];
@@ -11,7 +12,9 @@ function Medications({ data }) {
return (
<div>
<Head text="لیست دارو های مصرفی" />
<Head text="لیست دارو های مصرفی">
<AddBtn />
</Head>
<CustomTable
zeroRadius={true}
tableHead={tableHead}
@@ -4,14 +4,17 @@ import EditB from "@/components/icons/EditB";
import TrashB from "@/components/icons/TrashB";
import { Button, TableCell, TableRow, Tooltip } from "@mui/material";
import Head from "../../components/Head";
import AddBtn from "../../components/AddBtn";
function Relatives({ data }) {
const tableHead = ["ردیف", "نام", "نسبت", "شماره تماس", "ایمیل", "آدرس", ""];
const tableHead = ["ردیف", "نام", "نسبت", "شماره تماس", "آدرس", ""];
const centerTable = [0];
return (
<div>
<Head text="لیست بستگان" />
<Head text="لیست بستگان">
<AddBtn />
</Head>
<CustomTable
zeroRadius={true}
tableHead={tableHead}
@@ -46,19 +49,7 @@ function Relatives({ data }) {
</TextLoading>
</TableCell>
<TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
<TextLoading width={15} height={18} loading={false}>
{row.contact.email}
</TextLoading>
</TableCell>
<TableCell className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap">
<Tooltip title={row.contact.address || ""} arrow>
<div className="truncate max-w-[150px] cursor-default">
<TextLoading width={15} height={18} loading={false}>
{(row.contact.address || "").substring(0, 15)}
{row.contact.address?.length > 15 ? "…" : ""}
</TextLoading>
</div>
</Tooltip>
{row.contact.address}
</TableCell>
<TableCell
@@ -4,6 +4,7 @@ import EditB from "@/components/icons/EditB";
import TrashB from "@/components/icons/TrashB";
import { Button, TableCell, TableRow } from "@mui/material";
import Head from "../../components/Head";
import AddBtn from "../../components/AddBtn";
function Surgeries({ data }) {
const tableHead = [
@@ -17,7 +18,9 @@ function Surgeries({ data }) {
return (
<div>
<Head text="لیست جراحی ها" />
<Head text="لیست جراحی ها">
<AddBtn />
</Head>
<CustomTable
zeroRadius={true}
tableHead={tableHead}
-2
View File
@@ -9,8 +9,6 @@ const degree = ["پزشک عمومی", "پزشک متخصص", "پزشک فوق
function Content({ data, setData }) {
const router = useRouter();
const { parentList, childrenList } = filterList(data);
console.log('parentList', parentList);
const changeUrl = (value) => {
const current = new URLSearchParams(window.location.search);
+34
View File
@@ -0,0 +1,34 @@
function UpdateList() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path
d="M7.59206 4.23333C8.31706 4.01667 9.11706 3.875 10.0004 3.875C13.9921 3.875 17.2254 7.10833 17.2254 11.1C17.2254 15.0917 13.9921 18.325 10.0004 18.325C6.00872 18.325 2.77539 15.0917 2.77539 11.1C2.77539 9.61667 3.22539 8.23333 3.99206 7.08333"
stroke="#5559CE"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6.55859 4.43317L8.96693 1.6665"
stroke="#5559CE"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6.55859 4.43311L9.36693 6.48311"
stroke="#5559CE"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}
export default UpdateList;
+4 -27
View File
@@ -6,11 +6,10 @@ import {
} from "@/helper";
import { request } from "@/services/response";
import { InputAdornment, Button } from "@mui/material";
import axios from "axios";
import Link from "next/link";
import { useState } from "react";
function LogInPage({ setIsSendMsg, num, setNum, matchedCity }) {
function LogInPage({ setIsSendMsg, num, setNum, setUuid, matchedCity }) {
const [error, setError] = useState({ valid: true, text: "" });
const [loading, setLoading] = useState(false);
@@ -18,39 +17,17 @@ function LogInPage({ setIsSendMsg, num, setNum, matchedCity }) {
const formatted = formatPhoneNumber(val);
const checkedNum = validatePhoneNumber(formatted);
setError(checkedNum);
const digits = formatted.replace(/\D/g, "");
setNum(formatted);
// if (digits.length === 9) {
// handleReq();
// }
};
const handleReq = async () => {
// try {
// const res = await axios.post(
// "https://back-dev.clinic-pro.ir/api/v1/user/auth?_format=json",
// { mobile_number: changeNumToDefault(num) },
// {
// withCredentials: true,
// headers: {
// "Content-Type": "application/json",
// },
// }
// );
// console.log(res);
// if (res.data) {
// setIsSendMsg(true);
// }
// } catch (err) {
// console.error("Request failed:", err);
// }
setLoading(true);
request
.sendCode(changeNumToDefault(num))
.sendCode(changeNumToDefault(num), "")
.then((response) => {
setLoading(false);
if (response) {
// setNum("");
if (response.uuid) {
setIsSendMsg(true);
setUuid(response.uuid);
}
})
.catch(() => {
+7 -4
View File
@@ -7,23 +7,26 @@ import LayoutRegister from "./LayoutRegister";
function RegisterPage({ matchedCity }) {
const [isSendMsg, setIsSendMsg] = useState(false);
const [uuid, setUuid] = useState("");
const [num, setNum] = useState("");
return (
<LayoutRegister matchedCity={matchedCity}>
{isSendMsg ? (
<VerificationPage
num={num}
setIsSendMsg={setIsSendMsg}
setStep={false}
link="/"
num={num}
uuid={uuid}
setStep={false}
setIsSendMsg={setIsSendMsg}
/>
) : (
<LogInPage
matchedCity={matchedCity}
num={num}
setNum={setNum}
setStep={false}
setUuid={setUuid}
matchedCity={matchedCity}
setIsSendMsg={setIsSendMsg}
/>
)}
@@ -0,0 +1,83 @@
import { Button } from "@mui/material";
import { useRouter } from "next/navigation";
import { request } from "@/services/response";
import Cookies from "js-cookie";
function SendReq({
loading,
setLoading,
code,
setIsSendMsg,
setStep,
setIsError,
uuid,
}) {
const router = useRouter();
const handleSetCookie = (response) => {
const accessTokenExpires = new Date();
accessTokenExpires.setSeconds(
accessTokenExpires.getSeconds() + response.expires_in
);
const refreshTokenExpires = new Date();
refreshTokenExpires.setDate(refreshTokenExpires.getDate() + 30);
Cookies.set("access_token", response.access_token, {
expires: accessTokenExpires,
path: "/",
secure: true,
sameSite: "strict",
});
Cookies.set("refresh_token", response.refresh_token, {
expires: refreshTokenExpires,
path: "/",
secure: true,
sameSite: "strict",
});
};
const handleReq = async () => {
setLoading(true);
request
.getToken(
"mobile",
process.env.NEXT_PUBLIC_CLIENT_ID,
process.env.NEXT_PUBLIC_CLIENT_SECRET,
uuid,
code.join("")
)
.then((response) => {
setLoading(false);
if (response.access_token) {
router.replace("/");
handleSetCookie(response);
}
})
.catch(() => {
setLoading(false);
});
};
return (
<Button
fullWidth
loading={loading}
variant="contained"
onClick={() => {
setIsSendMsg && setIsSendMsg(true);
setStep && setStep((prev) => prev + 1);
if (code.join("").length !== 5) {
setIsError(true);
} else {
handleReq();
}
}}
className="!rounded-[8px] !bg-[#5559CE]"
>
تایید
</Button>
);
}
export default SendReq;
+14 -70
View File
@@ -1,25 +1,25 @@
"use client";
import { useRef, useState } from "react";
import { Button } from "@mui/material";
import OTPForm from "../element/OTPForm";
import EditLogin from "../../icons/EditLogin";
import ArrowRightS from "../../icons/ArrowRightS";
import { request } from "@/services/response";
import { changeNumToDefault } from "@/helper";
import Recode from "./Recode";
import SendReq from "./SendReq";
function VerificationPage({ setIsSendMsg, link, num, setStep }) {
function VerificationPage({ setIsSendMsg, uuid, link, num, setStep }) {
const retryIcon = useRef();
const [timer, setTimer] = useState(0);
const [loading, setLoading] = useState(false);
const [code, setCode] = useState(["", "", "", ""]);
const [code, setCode] = useState(["", "", "", "", ""]);
const [isError, setIsError] = useState(false);
const inputRefs = Array.from({ length: 5 }, () => useRef());
const handleChange = (index, val) => {
const newCode = [...code];
if (val === "backspace") {
newCode[index] = "";
setCode(newCode);
@@ -28,64 +28,16 @@ function VerificationPage({ setIsSendMsg, link, num, setStep }) {
}
return;
}
newCode[index] = val;
if (newCode.join("").length === 4 && isError) {
if (newCode.join("").length === 5 && isError) {
setIsError(false);
}
// if (newCode.join("").length === 4) {
// handleReq();
// }
setCode(newCode);
if (val && index < inputRefs.length - 1) {
inputRefs[index + 1].current?.focus();
}
};
const handleReq = async () => {
// const formData = new URLSearchParams();
// formData.append("grant_type", "mobile");
// formData.append("client_id", process.env.NEXT_PUBLIC_CLIENT_ID);
// formData.append("client_secret", process.env.NEXT_PUBLIC_CLIENT_SECRET);
// formData.append("mobile_number", changeNumToDefault(num));
// formData.append("code", code.join(""));
// try {
// const res = await axios.post(
// "https://back-dev.clinic-pro.ir/oauth/token",
// formData,
// {
// withCredentials: true,
// headers: {
// "Content-Type": "application/x-www-form-urlencoded",
// },
// }
// );
// console.log(res);
// } catch (err) {
// console.error("Request failed:", err);
// }
setLoading(true);
request
.getToken(
"mobile",
process.env.NEXT_PUBLIC_CLIENT_ID,
process.env.NEXT_PUBLIC_CLIENT_SECRET,
changeNumToDefault(num),
code.join("")
)
.then((response) => {
setLoading(false);
})
.catch((err) => {
setLoading(false);
});
};
return (
<div
className="rounded-[16px] opacity-page mt-[51px] sm:mt-[45px] md:mt-[39px] lg:mt-[32px] border border-solid sm:border-[#EFEFEF] bg-transparent sm:bg-[#FFF]
@@ -150,23 +102,15 @@ function VerificationPage({ setIsSendMsg, link, num, setStep }) {
<Recode retryIcon={retryIcon} timer={timer} setTimer={setTimer} />
</div>
</div>
<Button
fullWidth
<SendReq
code={code}
uuid={uuid}
loading={loading}
variant="contained"
onClick={() => {
setIsSendMsg && setIsSendMsg(true);
setStep && setStep((prev) => prev + 1);
if (code.join("").length !== 4) {
setIsError(true);
} else {
handleReq();
}
}}
className="!rounded-[8px] !bg-[#5559CE]"
>
تایید
</Button>
setStep={setStep}
setIsError={setIsError}
setLoading={setLoading}
setIsSendMsg={setIsSendMsg}
/>
</div>
);
}