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

update design and request pages dashboards & doctors & doctor item & clinics & clinic item and layout

Browse Source
This commit is contained in:
Ehsan
2025-06-07 04:22:52 +03:30
parent 0a8874c4ab
commit 7d6a9e6e33
38 changed files with 502 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/blog/[slug]/page.js
+6 -6
View File
@@ -1,19 +1,19 @@
import axios from "axios";
import BlogPage from "@/components/blog";
import Layout from "@/components/layout/StLayout";
import { fetchReq } from "@/lib/ability";
async function Blog({ params: { slug } }) {
const blog = await axios.get(
const blog = await fetchReq(
`https://back-dev.clinic-pro.ir/api/v1/blog/${slug}`
);
const blogs = await axios.get("https://back-dev.clinic-pro.ir/api/v1/blogs");
const blogs = await fetchReq("https://back-dev.clinic-pro.ir/api/v1/blogs");
const resBlog = blog.data;
const resBlogs = blogs.data;
const resBlog = blog;
const resBlogs = blogs;
return (
<Layout>
<BlogPage blog={resBlog} blogs={resBlogs} />
<BlogPage blog={resBlog} blogs={resBlogs.blogs} />
</Layout>
);
}
app/blogs/page.js
+3 -3
View File
@@ -1,12 +1,12 @@
import BlogsPage from "@/components/blogs";
import Layout from "@/components/layout/StLayout";
import axios from "axios";
import { fetchReq } from "@/lib/ability";
export default async function Blogs() {
const response = await axios.get(
const response = await fetchReq(
"https://back-dev.clinic-pro.ir/api/v1/blogs"
);
const blogs = response.data.blogs;
const blogs = response.blogs;
return (
<Layout name="/blogs">
app/clinic/[slug]/page.js
+5 -5
View File
@@ -1,18 +1,18 @@
import ClinicPage from "@/components/clinic";
import Layout from "@/components/layout/StLayout";
import axios from "axios";
import { fetchReq } from "@/lib/ability";
async function Clinic({ params: { slug } }) {
const reqClinics = await axios.get(
const reqClinics = await fetchReq(
`https://back-dev.clinic-pro.ir/api/v1/clinic/${slug}`
);
const reqDoctors = await axios.get(
const reqDoctors = await fetchReq(
"https://back-dev.clinic-pro.ir/api/v1/doctors"
);
const clinic = reqClinics.data;
const doctors = reqDoctors.data.$data;
const clinic = reqClinics;
const doctors = reqDoctors?.data || [];
return (
<Layout>
app/clinics/page.js
+4 -6
View File
@@ -1,22 +1,20 @@
// app/clinics/page.js
import ClinicsPage from "@/components/clinics";
import Layout from "@/components/layout/StLayout";
import { fetchReq } from "@/lib/ability";
import { getStateInfo } from "@/lib/getStateInfo";
import axios from "axios";
export default async function Clinics() {
const { matchedCity, matchedState } = getStateInfo();
const response = await axios.get(
"https://back-dev.clinic-pro.ir/api/v1/clinics?page=1&limit=10"
const clinics = await fetchReq(
"https://back-dev.clinic-pro.ir/api/v1/clinics"
);
const clinics = response.data.$data;
return (
<Layout name="/clinics">
<ClinicsPage
clinics={clinics}
clinics={clinics && clinics.data}
matchedCity={matchedCity}
matchedState={matchedState}
/>
app/component/DetailProfile.js
+18 -16
View File
@@ -1,7 +1,6 @@
import { useState } from "react";
import ProfilePA from "@/components/icons/ProfilePA";
import LogoutP from "@/components/icons/LogoutP";
import SettingPA from "@/components/icons/SettingPA";
import CardDA from "@/components/icons/CardDA";
import { Button, Popover } from "@mui/material";
import Link from "next/link";
@@ -15,6 +14,7 @@ function DetailProfile({ anchorEl, setAnchorEl }) {
const open = Boolean(anchorEl);
const id = open ? "simple-popover" : undefined;
return (
<>
<ModalLogout open={modal} handleClose={closeModal} />
@@ -39,22 +39,24 @@ function DetailProfile({ anchorEl, setAnchorEl }) {
پروفایل من
</Button>
</Link>
<Button
fullWidth
variant="text"
className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
<Link
href={{
pathname: "/dashboard",
query: {
sidebar: 2,
},
}}
className="w-full"
>
<CardDA />
پرداخت ها
</Button>
<Button
fullWidth
variant="text"
className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
>
<SettingPA />
تنظیمات
</Button>
<Button
fullWidth
variant="text"
className="!text-[#7E7E7E] !text-[14px] !font-medium !flex !justify-start !p-[8px] !gap-[5px]"
>
<CardDA />
تراکنش های من
</Button>
</Link>
<Button
fullWidth
color="error"
app/component/EditField.js
+1 -1
View File
@@ -20,9 +20,9 @@ function EditField({
<TextField
{...props}
rows={multiline}
value={data?.value || ""}
multiline={multiline}
type={type || "text"}
value={data?.value || ""}
placeholder={placeholder || ""}
disabled={noDisable ? false : !data?.isEdit}
className={`!w-full res-field-account dark:!bg-transparent ${
app/component/ModalLogout.js
+6 -3
View File
@@ -3,13 +3,15 @@ import { Box, Button, Modal } from "@mui/material";
import CloseModalD from "@/components/icons/CloseModalD";
import { removeToken } from "@/utils";
import { useRouter } from "next/navigation";
import { useState } from "react";
function ModalLogout({ open, handleClose }) {
const router = useRouter();
const [loading, setLoading] = useState(false);
const logout = () => {
setLoading(true);
removeToken();
router.replace("/login");
handleClose();
};
return (
@@ -39,9 +41,10 @@ function ModalLogout({ open, handleClose }) {
انصراف
</Button>
<Button
variant="contained"
onClick={logout}
className="!py-[4px] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[#EFEFEF] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
loading={loading}
variant="contained"
className="!py-[4px] md:!py-[6px] !min-h-[32px] md:!min-h-[39px] lg:!min-h-[46px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium"
>
خروج
</Button>
app/component/Tabs.js
+2 -1
View File
@@ -7,7 +7,7 @@ function a11yProps(index) {
};
}
function Tabs({ value, handleChange, listTab, isSm, style }) {
function Tabs({ value, handleChange, listTab, inactives, isSm, style }) {
return (
<Box className="!border-none !w-full">
<TabsMUI
@@ -24,6 +24,7 @@ function Tabs({ value, handleChange, listTab, isSm, style }) {
<Tab
key={idx}
label={item}
disabled={inactives && inactives.includes(idx)}
{...a11yProps(idx)}
sx={{
"&.MuiButtonBase-root": {
app/dashboard/page.js
+22 -13
View File
@@ -1,27 +1,35 @@
import Content from "@/components/dashboard/Content";
import { defineAbilitiesFor } from "@/lib/ability";
import { defineAbilitiesFor, fetchReq } from "@/lib/ability";
import { getUser } from "@/lib/auth";
import { getStateInfo } from "@/lib/getStateInfo";
import axios from "axios";
import { cookies, headers } from "next/headers";
import { redirect } from "next/navigation";
export default async function Dashboard() {
export default async function Dashboard({ searchParams }) {
const { matchedCity } = getStateInfo();
const user = await getUser();
const ability = defineAbilitiesFor(user);
const cookieStore = cookies();
const token = cookieStore.get("access_token");
const uuid = "9ef7c050-6e81-4aa2-8248-283a16635624";
const response = await axios.get(
`https://back-dev.clinic-pro.ir/api/v1/user-profile/9ef7c050-6e81-4aa2-8248-283a16635624`,
{
headers: {
Authorization: `Bearer ${token.value}`,
},
}
);
const dashboard = response.data;
const uuid = cookieStore.get("uuid");
let dashboard = null;
try {
const response = await fetchReq(
`https://back-dev.clinic-pro.ir/api/v1/user-profile/${uuid}`,
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
dashboard = response.data;
} catch (error) {
// console.error("problem with req:", error.message);
// return redirect("/unauthorized");
}
if (!ability.can("access", "Dashboard")) {
return redirect("/");
@@ -32,8 +40,9 @@ export default async function Dashboard() {
return (
<Content
logged={token}
logged={token.value}
dataUser={dashboard}
params={searchParams}
matchedCity={matchedCity}
initialTurnsDetails={isMobile}
/>
app/doctors/page.js
+11 -4
View File
@@ -6,11 +6,18 @@ import axios from "axios";
async function Doctors({ searchParams }) {
const { matchedCity, matchedState } = getStateInfo();
const response = await axios.get(
"https://back-dev.clinic-pro.ir/api/v1/doctors"
);
let doctors = null;
try {
const response = await axios.get(
"https://back-dev.clinic-pro.ir/api/v1/doctors"
);
console.log(response);
const doctors = response.data.$data;
doctors = response.data.$data;
} catch (error) {
// console.error("problem with req:", error.message);
// return redirect("/unauthorized");
}
return (
<Layout>
app/not-found.js
+1 -1
View File
@@ -1,4 +1,4 @@
import Layout from "@/components/layout";
import Layout from "@/components/layout/StLayout";
import NotFoundPage from "@/components/notFound";
function NotFound() {
components/blog/detail/Caption.js
+23 -35
View File
@@ -1,45 +1,33 @@
import CustomLoading from "@/app/component/loading/Custom";
import MultilineLoading from "@/app/component/loading/Multiline";
import Image from "next/image";
import React from "react";
function Caption({ data, loading }) {
function Caption({ data }) {
return (
<>
<CustomLoading loading={loading} width="full" height={500}>
<Image
className="rounded-[8px] overflow-hidden w-full"
src={data?.cover_first}
alt="cover-blog"
height={570}
width={808}
<Image
className="rounded-[8px] overflow-hidden w-full"
src={data?.cover_first}
alt="cover-blog"
height={570}
width={808}
/>
<div>
<div
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
dangerouslySetInnerHTML={{ __html: "data?.caption" }}
/>
</CustomLoading>
<div className={loading ? "my-4" : ""}>
<MultilineLoading loading={loading} width="full" height={18} line={20}>
<div
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
dangerouslySetInnerHTML={{ __html: data?.caption }}
/>
</MultilineLoading>
</div>
<CustomLoading loading={loading} width="full" height={500}>
<Image
className="rounded-[8px] overflow-hidden w-full"
src={data?.cover_second}
alt="cover-blog"
height={570}
width={808}
/>
</CustomLoading>
<div className={loading ? "my-4" : ""}>
<MultilineLoading loading={loading} width="full" height={18} line={20}>
<div
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
dangerouslySetInnerHTML={{ __html: data?.caption }}
/>
</MultilineLoading>
</div>
<Image
className="rounded-[8px] overflow-hidden w-full"
src={data?.cover_second}
alt="cover-blog"
height={570}
width={808}
/>
<div
className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
dangerouslySetInnerHTML={{ __html: "data?.caption" }}
/>
</>
);
}
components/blog/detail/SocialMedia.js
+7 -6
View File
@@ -5,15 +5,16 @@ import WhatsappB from "@/components/icons/WhatsappB";
const socials = [<WhatsappB />, <TelegramB />, <LinkedinB />];
function SocialMedia({ loading }) {
function SocialMedia() {
return (
<ul className="flex mt-0 sm:mt-[3px] md:mt-[6px] lg:mt-[8px] pb-[16px] sm:pb-[21px] md:pb-[27px] lg:pb-[32px] relative items-center justify-end gap-4">
{socials.map((item, idx) => (
<CircularLoading width={36} key={idx} height={36} loading={loading}>
<li className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]">
{item}
</li>
</CircularLoading>
<li
key={idx}
className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
>
{item}
</li>
))}
<span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
</ul>
components/blog/detail/index.js
+4 -4
View File
@@ -2,12 +2,12 @@ import Caption from "./Caption";
import SocialMedia from "./SocialMedia";
import CommentUser from "./commentUser";
function Detail({ data, loading }) {
function Detail({ data }) {
return (
<div className="w-full lg:w-[68%]">
<Caption data={data} loading={loading} />
<SocialMedia loading={loading} />
<CommentUser data={data} loading={loading} />
<Caption data={data} />
<SocialMedia />
<CommentUser data={data} loading={false} />
</div>
);
}
components/blog/head/index.js
+22 -36
View File
@@ -1,52 +1,38 @@
import TextLoading from "@/app/component/loading/Text";
function Head({ data, loading }) {
function Head({ data }) {
return (
<div>
<TextLoading width={200} height={18} loading={loading}>
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
بلاگ {">"}
</p>
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
پوست و مو {">"}
</p>
<p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
روش های خانگی محافظت از پوست در تابستان
</p>
</div>
</TextLoading>
<div
className={
loading ? "mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]" : ""
}
>
<TextLoading width={250} height={22} loading={loading}>
<h1 className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
روش های خانگی محافظت از پوست در تابستان
</h1>
</TextLoading>
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
بلاگ {">"}
</p>
<p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
پوست و مو {">"}
</p>
<p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
روش های خانگی محافظت از پوست در تابستان
</p>
</div>
<div>
<h1 className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
روش های خانگی محافظت از پوست در تابستان
</h1>
</div>
<div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
تاریخ انتشار:
</p>
<TextLoading width={55} height={22} loading={loading}>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
{data?.date_of_release}
</p>
</TextLoading>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
{data?.date_of_release}
</p>
</div>
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
زمان مطالعه:
</p>
<TextLoading width={55} height={22} loading={loading}>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
{data?.time}
</p>
</TextLoading>
<p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
{data?.time}
</p>
</div>
</div>
</div>
components/blog/index.js
+4 -15
View File
@@ -1,25 +1,14 @@
"use client";
import { useEffect, useState } from "react";
import Detail from "./detail";
import Head from "./head";
import RelatedContent from "./relatedContent";
function BlogPage({ article, articles }) {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 2000);
}, []);
function BlogPage({ blog, blogs }) {
return (
<div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
<Head data={article} loading={loading} />
<Head data={blog} />
<div className="flex flex-col gap-y-[32px] lg:flex-row items-start justify-center gap-[24px] mt-[16px] sm:mt-[19px] md:mt-[21px] lg:mt-[24px]">
<Detail data={article} loading={loading} />
<RelatedContent data={articles} loading={loading} />
<Detail data={blog} />
<RelatedContent data={blogs} />
</div>
</div>
);
components/blog/relatedContent/index.js
+5 -3
View File
@@ -10,9 +10,11 @@ function RelatedContent({ data, loading }) {
<UnderlineLG />
</AnimationTextHead>
<ul className="flex w-full lg:w-fit flex-col justify-start items-start">
{data?.map((item, idx) => (
<Item idx={idx} data={item} key={item.id} loading={loading} />
))}
{data &&
data.length &&
data?.map((item, idx) => (
<Item idx={idx} data={item} key={item.id} loading={loading} />
))}
</ul>
</div>
);
components/clinic/components/about/Services.js
+1 -1
View File
@@ -21,7 +21,7 @@ function Services({ data }) {
${idx === 0 ? "text-[#F17732]" : "text-[#525252]"}
`}
>
{item}
{item.name}
</h3>
</TextLoading>
</li>
components/clinic/components/about/Specialties.js
+3 -3
View File
@@ -9,8 +9,8 @@ function Specialties({ data }) {
gap-x-[40px] sm:gap-x-[48px] md:gap-x-[56px] lg:gap-x-[64px]
gap-y-[24px] sm:gap-y-[30px] md:gap-y-[35px] lg:gap-y-[40px]"
>
{data?.specialties?.map((item, idx) => (
<li key={idx} className="flex items-start justify-start gap-2">
{data && data.specialties && data?.specialties?.map((item, idx) => (
<li key={item.id} className="flex items-start justify-start gap-2">
<div className="min-w-[24px] min-h-[24px]">
<TickCircleOrange />
</div>
@@ -21,7 +21,7 @@ function Specialties({ data }) {
${idx === 0 ? "text-[#F17732]" : "text-[#525252]"}
`}
>
{item}
{item.name}
</h3>
</TextLoading>
</li>
components/clinic/components/about/index.js
+2 -2
View File
@@ -14,7 +14,7 @@ function About({ data }) {
return (
<div className="opacity-page transition-all duration-500">
<Images data={data} />
<ContentDetail head="کلینیک تخصصی و فوق تخصصی نیکان">
<ContentDetail head={data.title}>
<div className="flex flex-col items-center justify-center">
<MultilineLoading line={10} width="full" height={18}>
<p
@@ -32,7 +32,7 @@ function About({ data }) {
></p>
</MultilineLoading>
<Button
className='!text-[#F17732] !text-[14px] !font-light !p-2'
className="!text-[#F17732] !text-[14px] !font-light !p-2"
onClick={() => setIsMore(!isMore)}
variant="text"
>
components/clinics/list/ItemClinic.js
+2 -2
View File
@@ -15,14 +15,14 @@ function ItemClinic({ data }) {
<Image
width={60}
height={60}
src={data.clinic_logo.url || ""}
src={data.clinic_logo[0].url || ""}
alt="img clinic"
/>
</CircularLoading>
<div className="flex flex-col items-start justify-center gap-2">
<TextLoading width={100} height={18}>
<h3 className="text-[#3B3B3B] text-[14px] font-bold">
{data.label}
{data.title}
</h3>
</TextLoading>
<TextLoading width={60} height={18}>
components/clinics/list/index.js
+5 -5
View File
@@ -8,11 +8,7 @@ function List({ selected, clinics }) {
return (
<div className="padding-responsive pt-[20px]">
<Pageguide list={listPage} />
{clinics.length === 0 ? (
<div className="text-center py-10 text-gray-500">
کلینیکی با این عنوان یافت نشد!
</div>
) : (
{clinics && clinics.length ? (
<ul
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-[24px]
gap-y-[16px] sm:gap-y-[24px] md:gap-y-[32px] lg:gap-y-[40px] mt-6"
@@ -21,6 +17,10 @@ function List({ selected, clinics }) {
<ItemClinic data={item} key={item.id} />
))}
</ul>
) : (
<div className="text-center py-10 text-gray-500">
کلینیکی با این عنوان یافت نشد!
</div>
)}
<div className="mt-[48px] flex justify-center">
<Pagination list={clinics} itemsPerPage={12} />
components/dashboard/Content.js
+2 -5
View File
@@ -6,11 +6,10 @@ import userData from "@/data/userData.json";
import DashboardPage from "@/components/dashboard";
import UserAccountPage from "./userAccount";
function Content({ matchedCity, logged, initialIsOpenSide, dataUser }) {
const [value, setValue] = useState(0);
function Content({ matchedCity, params, logged, initialIsOpenSide, dataUser }) {
const [value, setValue] = useState(Number(params?.sidebar) || 0);
const [isOpenSide, setIsOpenSide] = useState(initialIsOpenSide);
const [isTurnsDetails, setIsTurnsDetails] = useState(false);
console.log(dataUser);
return (
<DashboardPage
@@ -27,9 +26,7 @@ function Content({ matchedCity, logged, initialIsOpenSide, dataUser }) {
<UserAccountPage
value={value}
dataUser={dataUser}
setValue={setValue}
user={userData.data}
isOpenSide={isOpenSide}
setIsOpenSide={setIsOpenSide}
isTurnsDetails={isTurnsDetails}
setIsTurnsDetails={setIsTurnsDetails}
components/dashboard/userAccount/content/HeadTab.js
+2 -1
View File
@@ -5,8 +5,8 @@ function HeadTab({
tab,
user,
listTab,
inactives,
components,
includeData,
handleChange,
isTurnsDetails,
setIsTurnsDetails,
@@ -43,6 +43,7 @@ function HeadTab({
color="#5559CE"
listTab={listTab}
handleChange={handleChange}
inactives={inactives}
/>
</div>
<div className="my-[22px] px-0 md:px-[24px]">{components[tab]}</div>
components/dashboard/userAccount/detailUser/disease/index.js
+12 -5
View File
@@ -3,10 +3,19 @@ import TextLoading from "@/app/component/loading/Text";
import { Switch, TableCell, TableRow } from "@mui/material";
import Head from "@/components/dashboard/userAccount/components/Head";
import UpdateBtn from "@/components/dashboard/userAccount/components/UpdateBtn";
import { useState } from "react";
import { dieses } from "../information/dieses";
function Disease({ data, changeData }) {
function Disease() {
const tableHead = ["ردیف", "اسم", "وضعیت", ""];
const [data, setData] = useState(dieses);
const centerTable = [0];
const changeData = (id, payload) => {
const updatedData = data.map((item, index) =>
index === id ? { ...item, status: payload } : item
);
setData(updatedData);
};
return (
<div className="opacity-page">
@@ -18,7 +27,7 @@ function Disease({ data, changeData }) {
tableHead={tableHead}
centerTable={centerTable}
>
{data.disease.map((row, idx) => (
{data.map((row, idx) => (
<TableRow
key={idx}
className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
@@ -41,9 +50,7 @@ function Disease({ data, changeData }) {
<Switch
defaultChecked={row.status === "true"}
onChange={(e) => {
const newData = row;
newData.status = JSON.stringify(e.target.checked);
changeData("update", "disease", idx, newData);
changeData(idx, JSON.stringify(e.target.checked));
}}
/>
</TextLoading>
components/dashboard/userAccount/detailUser/index.js
+12 -13
View File
@@ -11,20 +11,19 @@ import Surgeries from "./surgeries";
import FamilyHistory from "./familyHistory";
import Relatives from "./relatives";
const listTab = [
"اطلاعات عمومی",
"بیماری‌ها",
"آلرژی‌ها",
"داروهای مصرفی",
"جراحی‌ها",
"سابقه خانوادگی بیماری",
"بستگان",
];
function DetailUser({ user, isTurnsDetails, setIsTurnsDetails, dataUser }) {
const [tab, setTab] = useState(0);
const [data, setData] = useState(profileData[0]);
const [includeData, setIncludeData] = useState(false);
const listTab = [
"اطلاعات عمومی",
"بیماری‌ها",
"آلرژی‌ها",
"داروهای مصرفی",
"جراحی‌ها",
"سابقه خانوادگی بیماری",
"بستگان",
];
const handleChange = (_, newValue) => setTab(newValue);
const changeData = (action, name, id, payload) => {
@@ -60,7 +59,7 @@ function DetailUser({ user, isTurnsDetails, setIsTurnsDetails, dataUser }) {
isTurnsDetails={isTurnsDetails}
setIsTurnsDetails={setIsTurnsDetails}
/>,
<Disease data={data} changeData={changeData} />,
<Disease data={data} />,
<Allergies data={data} changeData={changeData} />,
<Medications data={data} changeData={changeData} />,
<Surgeries data={data} changeData={changeData} />,
@@ -74,10 +73,10 @@ function DetailUser({ user, isTurnsDetails, setIsTurnsDetails, dataUser }) {
user={user}
listTab={listTab}
components={components}
includeData={includeData}
handleChange={handleChange}
isTurnsDetails={isTurnsDetails}
setIsTurnsDetails={setIsTurnsDetails}
inactives={dataUser ? [] : [1, 2, 3, 4, 5, 6]}
/>
);
}
components/dashboard/userAccount/detailUser/information/DateBirthday.js
+1 -1
View File
@@ -25,7 +25,7 @@ function DateBirthday({ data, changeData }) {
onClick={handleClick}
>
<p className="text-[#7E7E7E] text-[14px] font-normal cursor-pointer">
{data.value}
{data}
</p>
<Button className="!absolute !left-[8px] !top-1/2 !-translate-y-1/2 !min-w-fit !p-1">
<CalendarEdit />
components/dashboard/userAccount/detailUser/information/Field.js
+67
View File
@@ -0,0 +1,67 @@
import EditGrayA from "@/components/icons/EditGrayA";
import EditOrangeA from "@/components/icons/EditOrangeA";
import { Button, TextField } from "@mui/material";
function Field({
changeData,
multiline,
icon,
placeholder,
data,
name,
iconGray,
isTransparent,
type,
props,
disable,
}) {
return (
<div className="relative w-full">
<TextField
{...props}
// value={data}
defaultValue={data}
disabled={disable}
type={type || "text"}
placeholder={placeholder || ""}
className={`!w-full res-field-account dark:!bg-transparent ${
isTransparent ? "!bg-transparent lg:!bg-[#FFF]" : "!bg-[#FFF]"
}`}
onChange={(e) => {
changeData(e.target.value, "value", name);
}}
sx={{
"& .MuiFormLabel-root": {
top: "-4px !important",
},
"& .MuiInputBase-input": { padding: "12.5px 14px" },
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #D7D7D7 !important",
},
"& .MuiInputBase-root": {
padding: "0 !important",
borderRadius: "8px !important",
},
".Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
border: "1px solid #5559CE !important",
transition: "0.5s all",
},
},
"& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button":
{
display: "none",
},
}}
/>
<Button
className={`!absolute !left-[8px] !-translate-y-1/2 !min-w-fit !p-1
${multiline ? "!top-[24px]" : "!top-1/2"}`}
>
{icon ? icon : iconGray ? <EditGrayA /> : <EditOrangeA />}
</Button>
</div>
);
}
export default Field;
components/dashboard/userAccount/detailUser/information/Form.js
+34 -25
View File
@@ -1,6 +1,6 @@
import Content from "./Content";
import EditField from "@/app/component/EditField";
import DateBirthday from "./DateBirthday";
import Field from "./Field";
import {
insurance,
gender,
@@ -11,23 +11,24 @@ import {
} from "./listSelector";
import AutoSelector from "@/app/component/element/AutoSelector";
function Form({ data, changeData, selected, updateSelect }) {
const findVal = (list, name) => list.find((g) => g.id === selected[name]);
function Form({ data, changeData, prevData }) {
const findVal = (list, name) => data && list.find((g) => g.id === data[name]);
return (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-[24px]">
<Content title="شماره موبایل" isConfirmed={true}>
<EditField
<Field
isTransparent={true}
iconGray={true}
type="number"
changeData={changeData}
data={data?.phone}
name="phone"
data={data?.work_phone}
disable={prevData}
name="work_phone"
/>
</Content>
<Content title="کد ملی" isConfirmed={false}>
<EditField
<Field
isTransparent={true}
iconGray={true}
type="number"
@@ -37,7 +38,7 @@ function Form({ data, changeData, selected, updateSelect }) {
/>
</Content>
<Content title="نام و نام خانوادگی" isConfirmed={false}>
<EditField
<Field
isTransparent={true}
iconGray={true}
changeData={changeData}
@@ -48,7 +49,7 @@ function Form({ data, changeData, selected, updateSelect }) {
<Content title="جنسیت">
<AutoSelector
updateData={(name, data) =>
updateSelect(name, data === "زن" ? "female" : "male")
changeData(data === "زن" ? "female" : "male", "value", name)
}
value={findVal(gender, "gender")}
label="جنسیت"
@@ -58,31 +59,31 @@ function Form({ data, changeData, selected, updateSelect }) {
</Content>
<Content title="تاریخ تولد">
<DateBirthday
data={data?.date_of_birth}
data={data?.birthday}
isConfirmed={false}
changeData={changeData}
/>
</Content>
<Content title="نام پدر" isConfirmed={false}>
<EditField
<Field
isTransparent={true}
iconGray={true}
changeData={changeData}
data={data?.father_name}
name="father_name"
data={data?.fathers_name}
name="fathers_name"
/>
</Content>
<Content title="نوع بیمه">
<AutoSelector
updateData={updateSelect}
value={findVal(insurance, "insurance")}
updateData={changeData}
value={findVal(insurance, "basic_insurance")}
label="نوع بیمه"
name="insurance"
name="basic_insurance"
list={insurance}
/>
</Content>
<Content title="شماره بیمه" isConfirmed={false}>
<EditField
<Field
isTransparent={true}
iconGray={true}
type="number"
@@ -94,18 +95,22 @@ function Form({ data, changeData, selected, updateSelect }) {
<Content title="گروه خونی">
<AutoSelector
updateData={(name, value) =>
updateSelect(name, blood_group.find((g) => g.label === value).id)
changeData(
blood_group.find((g) => g.label === value).id,
"value",
name
)
}
value={findVal(blood_group, "blood_group")}
value={findVal(blood_group, "blood_type")}
label="گروه خونی"
name="blood_group"
name="blood_type"
list={blood_group}
/>
</Content>
<Content title="وضعیت تاهل">
<AutoSelector
updateData={(name, value) =>
updateSelect(name, marital_status.find((g) => g.label === value).id)
changeData(value === "متاهل" ? "married" : "single", "value", name)
}
value={findVal(marital_status, "marital_status")}
label="وضعیت تاهل"
@@ -114,7 +119,7 @@ function Form({ data, changeData, selected, updateSelect }) {
/>
</Content>
<Content title="تلفن منزل" isConfirmed={false}>
<EditField
<Field
isTransparent={true}
iconGray={true}
type="number"
@@ -126,7 +131,11 @@ function Form({ data, changeData, selected, updateSelect }) {
<Content title="تحصیلات">
<AutoSelector
updateData={(name, value) =>
updateSelect(name, education.find((g) => g.label === value).id)
changeData(
education.find((g) => g.label === value).id,
"value",
name
)
}
value={findVal(education, "education")}
label="تحصیلات"
@@ -137,7 +146,7 @@ function Form({ data, changeData, selected, updateSelect }) {
<Content title="شغل">
<AutoSelector
updateData={(name, value) =>
updateSelect(name, job.find((g) => g.label === value).id)
changeData(value === "آزاد" ? "azad" : "dolati", "value", name)
}
value={findVal(job, "job")}
label="شغل"
@@ -146,7 +155,7 @@ function Form({ data, changeData, selected, updateSelect }) {
/>
</Content>
<Content title="تلفن محل کار" isConfirmed={false}>
<EditField
<Field
isTransparent={true}
type="number"
iconGray={true}
components/dashboard/userAccount/detailUser/information/dieses.js
+152
View File
@@ -0,0 +1,152 @@
export const dieses = [
{
id: 1,
name: "فشار خون",
status: "false",
},
{
id: 2,
name: "دیابت",
status: "true",
},
{
id: 3,
name: "آسم",
status: "false",
},
{
id: 4,
name: "بیماری قلبی عروقی",
status: "true",
},
{
id: 5,
name: "سرطان",
status: "true",
},
{
id: 6,
name: "آلزایمر",
status: "true",
},
{
id: 7,
name: "پارکینسون",
status: "false",
},
{
id: 8,
name: "بیماری کلیوی",
status: "true",
},
{
id: 9,
name: "بیماری کبدی",
status: "false",
},
{
id: 10,
name: "سکته مغزی",
status: "false",
},
{
id: 11,
name: "افسردگی",
status: "false",
},
{
id: 12,
name: "اضطراب مزمن",
status: "true",
},
{
id: 13,
name: "میگرن",
status: "false",
},
{
id: 14,
name: "کم‌کاری تیروئید",
status: "false",
},
{
id: 15,
name: "پرکاری تیروئید",
status: "true",
},
{
id: 16,
name: "سل",
status: "false",
},
{
id: 17,
name: "هپاتیت B",
status: "false",
},
{
id: 18,
name: "هپاتیت C",
status: "true",
},
{
id: 19,
name: "HIV / ایدز",
status: "false",
},
{
id: 20,
name: "COVID-19",
status: "true",
},
{
id: 21,
name: "لوپوس",
status: "true",
},
{
id: 22,
name: "ام‌اس (MS)",
status: "true",
},
{
id: 23,
name: "آرتریت روماتوئید",
status: "false",
},
{
id: 24,
name: "پسوریازیس",
status: "false",
},
{
id: 25,
name: "صرع",
status: "false",
},
{
id: 26,
name: "بیماری سلیاک",
status: "false",
},
{
id: 27,
name: "عدم تحمل لاکتوز",
status: "false",
},
{
id: 28,
name: "چربی خون بالا",
status: "false",
},
{
id: 29,
name: "کم‌خونی",
status: "false",
},
{
id: 30,
name: "هموفیلی",
status: "false",
},
];
components/dashboard/userAccount/detailUser/information/index.js
+18 -33
View File
@@ -2,59 +2,44 @@ import { useState } from "react";
import Form from "./Form";
import { Button } from "@mui/material";
import ArrowLeftWhiteD from "@/components/icons/ArrowLeftWhiteD";
import { request } from "@/services/response";
function Information({ user, dataUser }) {
const [disable, setDisable] = useState(true);
const [data, setData] = useState({
phone: { value: dataUser.work_phone, isEdit: true },
national_code: { value: dataUser.national_code, isEdit: true },
name: { value: dataUser.name, isEdit: true },
date_of_birth: { value: dataUser.birthday, isEdit: true },
father_name: { value: dataUser.fathers_name, isEdit: true },
insurance_number: { value: dataUser.supplementary_insurance, isEdit: true },
home_phone: { value: dataUser.home_phone, isEdit: true },
work_phone: { value: user.work_phone, isEdit: true },
});
const [selected, setSelected] = useState({
gender: dataUser.gender,
blood_group: dataUser.blood_type,
insurance: dataUser.supplementary_insurance,
marital_status: dataUser.marital_status,
education: dataUser.education,
job: dataUser.job,
});
const [loading, setLoading] = useState(false);
const [data, setData] = useState(dataUser || {});
const changeData = (value, type, name) => {
disable && setDisable(false);
setData({
...data,
[name]: {
...data[name],
[type]: value,
},
[name]: value,
});
};
const updateSelect = (name, event) => {
disable && setDisable(false);
setSelected({ ...selected, [name]: event });
const sendReq = () => {
setLoading(true);
request[dataUser ? "patchUserProfile" : "postUserProfile"](data)
.then((res) => {
setLoading(false);
})
.catch((err) => {
setLoading(false);
});
};
return (
<div className="opacity-page">
<Form
data={data}
changeData={changeData}
selected={selected}
updateSelect={updateSelect}
/>
<Form data={data} changeData={changeData} prevData={dataUser} />
<Button
disabled={disable}
variant="contained"
onClick={sendReq}
loading={loading}
className={`!gap-[4px] !mr-auto !text-nowrap !flex !flex-nowrap !py-[8px]
!rounded-[4px] !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium
!rounded-[4px] !text-[14px] md:!text-[16px] !font-medium
!mt-[32px] sm:!mt-[38px] md:!mt-[43px] lg:!mt-[48px] !px-[16px] sm:!px-[19px] md:!px-[22px] lg:!px-[24px]
${disable ? "" : "!bg-[#5559CE]"}`}
`}
>
ثبت اطلاعات
<ArrowLeftWhiteD />
components/dashboard/userAccount/index.js
-2
View File
@@ -26,8 +26,6 @@ function UserAccountPage({
isTurnsDetails,
setIsTurnsDetails,
value,
setValue,
isOpenSide,
setIsOpenSide,
dataUser,
}) {
components/doctors/listDoctors/index.js
+13 -5
View File
@@ -5,11 +5,19 @@ import ItemDoctor from "@/app/component/ItemDoctor";
function ListDoctors({ loading, list }) {
return (
<>
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px] gap-[24px]">
{list.map((doctor) => (
<ItemDoctor key={doctor.id} doctor={doctor} loading={loading} />
))}
</ul>
<div className="mt-[24px] sm:mt-[37px] md:mt-[50px] lg:mt-[64px]">
{list && list.length ? (
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[24px]">
{list?.map((doctor) => (
<ItemDoctor key={doctor.id} doctor={doctor} loading={loading} />
))}
</ul>
) : (
<p className="text-center py-10 text-gray-500">
هیچ دکتری وجود ندارد!
</p>
)}
</div>
<div className="mt-[56px] flex justify-center">
<Pagination list={doctors} itemsPerPage={12} />
</div>
helper/index.js
+9
View File
@@ -185,3 +185,12 @@ export function getCleanNumberValue(value, defaultValue = 0) {
}
export const changeNumToDefault = (num) => `09${num.replace(/\D/g, "")}`;
export function hasDataChanged(previousData, newData) {
const oldDataString = JSON.stringify(
previousData,
Object.keys(previousData).sort()
);
const newDataString = JSON.stringify(newData, Object.keys(newData).sort());
return oldDataString !== newDataString;
}
lib/ability.js
+15 -1
View File
@@ -1,14 +1,28 @@
import { AbilityBuilder, createMongoAbility } from "@casl/ability";
import axios from "axios";
import Cookies from "js-cookie";
const token = Cookies.get("access_token");
export function defineAbilitiesFor(user) {
const { can, cannot, build } = new AbilityBuilder(createMongoAbility);
if (user) {
can("access", "Dashboard");
} else {
} else {
// can("access", "Dashboard");
cannot("access", "Dashboard");
}
return build();
}
export const fetchReq = async (url, headers) => {
try {
const response = await axios.get(url, headers);
return response.data;
} catch (error) {
console.error("fetchReq error:", error.message);
return null;
}
};
next.config.js
+3
View File
@@ -7,6 +7,9 @@ const nextConfig = {
experimental: {
missingSuspenseWithCSRBailout: false,
},
images: {
domains: ["back-dev.clinic-pro.ir"],
},
};
module.exports = nextConfig;
services/api.js
+2 -1
View File
@@ -4,10 +4,11 @@ import "react-toastify/dist/ReactToastify.css";
const BASE_URL = process.env.NEXT_PUBLIC_API_URL;
const token = Cookies.get("access");
const token = Cookies.get("access_token");
const api = axios.create({
baseURL: BASE_URL,
"X-CSRF-Token": "",
headers: {
"Content-Type": "application/json",
Authorization: token ? `Bearer ${token}` : "",
services/response.js
+3 -1
View File
@@ -30,5 +30,7 @@ export const request = {
});
},
getUserProfile: (uuid) => api.get(`/api/v1/user-profile/${uuid}`),
postUserProfile: (data) => api.post("api/v1/user-profile", data),
patchUserProfile: (data, uuid) =>
api.patch(`api/v1/user-profile/${uuid}`, data),
};