handle api register & change design dashboard tabs and page disease
This commit is contained in:
Ehsan
@@ -1,131 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
// Tabs
|
||||
import Turns from "./tabs/turns";
|
||||
import DetailUser from "./tabs/detailUser";
|
||||
import Comments from "./tabs/comments";
|
||||
import Messages from "./tabs/messages";
|
||||
import Tabs from "@/app/component/Tabs";
|
||||
import Transactions from "./tabs/transactions";
|
||||
import IsTurnsDetails from "./tabs/turns/isTurnsDetails";
|
||||
import ArrowRightD from "@/components/icons/ArrowRightD";
|
||||
import { Button } from "@mui/material";
|
||||
import NotfoundDashboard from "./NotfoundDashboard";
|
||||
import DownloadD from "@/components/icons/DownloadD";
|
||||
|
||||
const listTab = [
|
||||
"حساب کاربری",
|
||||
"نوبت های من",
|
||||
"تراکنش های من",
|
||||
"نظرات من",
|
||||
"پیام ها",
|
||||
];
|
||||
|
||||
function ContentTabs({
|
||||
user,
|
||||
value,
|
||||
isTurnsDetails,
|
||||
setIsTurnsDetails,
|
||||
setValue,
|
||||
isOpenSide,
|
||||
setIsOpenSide,
|
||||
}) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const handleChange = (event, newValue) => setValue(newValue);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
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 />,
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="md:mt-[12px] lg:mt-[24px] md:pt-[12px] pb-[24px] w-full rounded-[8px]
|
||||
shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
|
||||
bg-transparent md:bg-[#FFF]"
|
||||
>
|
||||
<div className="w-full flex items-center justify-between">
|
||||
<Button
|
||||
className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
|
||||
onClick={() =>
|
||||
isTurnsDetails ? setIsTurnsDetails(false) : setIsOpenSide(true)
|
||||
}
|
||||
variant="text"
|
||||
>
|
||||
<ArrowRightD />
|
||||
<p className="text-[#525252] text-[14px] font-bold">
|
||||
{isTurnsDetails ? "جزئیات نوبت " : listTab[value]}
|
||||
</p>
|
||||
</Button>
|
||||
{value === 1 && isTurnsDetails ? (
|
||||
<Button
|
||||
className="!flex md:!hidden !py-[8px] !px-[12px] !text-[#616161] !text-[14px] !font-medium !justify-center !items-center !gap-[4px]"
|
||||
variant="text"
|
||||
>
|
||||
<DownloadD />
|
||||
دانلود اطلاعات نوبت
|
||||
</Button>
|
||||
) : undefined}
|
||||
</div>
|
||||
{isTurnsDetails ? (
|
||||
<IsTurnsDetails
|
||||
loading={loading}
|
||||
user={user}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="!hidden md:!flex !w-full">
|
||||
<Tabs
|
||||
style={{
|
||||
".MuiTabs-indicator": {
|
||||
height: "2px",
|
||||
borderRadius: "16px",
|
||||
background: "#5559CE",
|
||||
},
|
||||
"& .MuiTabs-scroller": {
|
||||
borderBottom: "1px solid #EFEFEF",
|
||||
},
|
||||
"& .MuiTabs-flexContainer": {
|
||||
paddingRight: "15px",
|
||||
paddingLeft: "15px",
|
||||
},
|
||||
"& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
|
||||
color: "#5559CE !important",
|
||||
},
|
||||
"& .MuiButtonBase-root.Mui-selected": {
|
||||
color: "#5559CE !important",
|
||||
},
|
||||
}}
|
||||
value={value}
|
||||
color="#5559CE"
|
||||
listTab={listTab}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-[24px] sm:mt-[28px] md:mt-[32px] px-0 md:px-[24px]">
|
||||
{components[value]}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ContentTabs;
|
||||
@@ -1,4 +1,4 @@
|
||||
import ContentTabs from "./ContentTabs";
|
||||
import ContentTabs from "./content";
|
||||
import Head from "./Head";
|
||||
import NotfoundDashboard from "./NotfoundDashboard";
|
||||
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
import Tabs from "@/app/component/Tabs";
|
||||
import IsTurnsDetails from "../sidebars/turns/isTurnsDetails";
|
||||
|
||||
function HeadTab({
|
||||
tab,
|
||||
user,
|
||||
listTab,
|
||||
loading,
|
||||
handleChange,
|
||||
isTurnsDetails,
|
||||
setIsTurnsDetails,
|
||||
components,
|
||||
}) {
|
||||
|
||||
return (
|
||||
<>
|
||||
{isTurnsDetails ? (
|
||||
<IsTurnsDetails
|
||||
loading={loading}
|
||||
user={user}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
) : (
|
||||
<>
|
||||
<div className="!hidden md:!flex !w-full">
|
||||
<Tabs
|
||||
style={{
|
||||
".MuiTabs-indicator": {
|
||||
height: "2px",
|
||||
borderRadius: "16px",
|
||||
background: "#5559CE",
|
||||
},
|
||||
"& .MuiTabs-scroller": {
|
||||
borderBottom: "1px solid #EFEFEF",
|
||||
},
|
||||
"& .MuiTabs-flexContainer": {
|
||||
paddingRight: "15px",
|
||||
paddingLeft: "15px",
|
||||
},
|
||||
"& .mui-11pdt05-MuiButtonBase-root-MuiTab-root.Mui-selected": {
|
||||
color: "#5559CE !important",
|
||||
},
|
||||
"& .MuiButtonBase-root.Mui-selected": {
|
||||
color: "#5559CE !important",
|
||||
},
|
||||
}}
|
||||
value={tab}
|
||||
color="#5559CE"
|
||||
listTab={listTab}
|
||||
handleChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-[24px] sm:mt-[28px] md:mt-[32px] px-0 md:px-[24px]">
|
||||
{components[tab]}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default HeadTab;
|
||||
@@ -0,0 +1,111 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import ArrowRightD from "@/components/icons/ArrowRightD";
|
||||
import { Button } from "@mui/material";
|
||||
import DownloadD from "@/components/icons/DownloadD";
|
||||
import Disease from "../tabs/disease";
|
||||
import Allergies from "../tabs/allergies";
|
||||
import Medications from "../tabs/medications";
|
||||
import Surgeries from "../tabs/surgeries";
|
||||
import FamilyHistory from "../tabs/familyHistory";
|
||||
import Relatives from "../tabs/relatives";
|
||||
import HeadTab from "./HeadTab";
|
||||
|
||||
import profileData from "@/data/profile_other.json";
|
||||
|
||||
const listTab = [
|
||||
"بیماریها",
|
||||
"آلرژیها",
|
||||
"داروهای مصرفی",
|
||||
"جراحیها",
|
||||
"سابقه خانوادگی بیماری",
|
||||
"بستگان",
|
||||
];
|
||||
|
||||
function ContentTabs({
|
||||
user,
|
||||
value,
|
||||
isTurnsDetails,
|
||||
setIsTurnsDetails,
|
||||
setValue,
|
||||
setIsOpenSide,
|
||||
}) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [tab, setTab] = useState(0);
|
||||
|
||||
const handleChange = (event, newValue) => {
|
||||
// setValue(newValue);
|
||||
setTab(newValue);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setLoading(false);
|
||||
}, 2000);
|
||||
}, []);
|
||||
|
||||
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={profileData} />,
|
||||
<Allergies />,
|
||||
<Medications />,
|
||||
<Surgeries />,
|
||||
<FamilyHistory />,
|
||||
<Relatives />,
|
||||
];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="md:mt-[12px] lg:mt-[24px] md:pt-[12px] pb-[24px] w-full rounded-[8px]
|
||||
shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]
|
||||
bg-transparent md:bg-[#FFF]"
|
||||
>
|
||||
<div className="w-full flex items-center justify-between">
|
||||
<Button
|
||||
className="!flex !p-1 md:!hidden !items-center !justify-start !gap-[8px]"
|
||||
onClick={() =>
|
||||
isTurnsDetails ? setIsTurnsDetails(false) : setIsOpenSide(true)
|
||||
}
|
||||
variant="text"
|
||||
>
|
||||
<ArrowRightD />
|
||||
<p className="text-[#525252] text-[14px] font-bold">
|
||||
{isTurnsDetails ? "جزئیات نوبت " : listTab[value]}
|
||||
</p>
|
||||
</Button>
|
||||
{value === 1 && isTurnsDetails ? (
|
||||
<Button
|
||||
className="!flex md:!hidden !py-[8px] !px-[12px] !text-[#616161] !text-[14px] !font-medium !justify-center !items-center !gap-[4px]"
|
||||
variant="text"
|
||||
>
|
||||
<DownloadD />
|
||||
دانلود اطلاعات نوبت
|
||||
</Button>
|
||||
) : undefined}
|
||||
</div>
|
||||
<HeadTab
|
||||
tab={tab}
|
||||
user={user}
|
||||
listTab={listTab}
|
||||
loading={loading}
|
||||
components={components}
|
||||
handleChange={handleChange}
|
||||
isTurnsDetails={isTurnsDetails}
|
||||
setIsTurnsDetails={setIsTurnsDetails}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ContentTabs;
|
||||
@@ -0,0 +1,7 @@
|
||||
function Allergies() {
|
||||
return (
|
||||
<div>Allergies</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Allergies
|
||||
@@ -0,0 +1,53 @@
|
||||
import CustomTable from "@/app/component/CustomTable";
|
||||
import CircularLoading from "@/app/component/loading/Circular";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import { TableCell, TableRow } from "@mui/material";
|
||||
|
||||
function Disease({ data }) {
|
||||
const tableHead = ["شماره", "اسم", "وضعیت"];
|
||||
const centerTable = [0, 4];
|
||||
|
||||
return (
|
||||
<div className="hidden md:flex">
|
||||
<CustomTable
|
||||
zeroRadius={true}
|
||||
tableHead={tableHead}
|
||||
centerTable={centerTable}
|
||||
>
|
||||
{data.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className="!border-0 !border-b !border-[#DBDBDB] dark:!border-transparent"
|
||||
>
|
||||
<TableCell
|
||||
className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
|
||||
align="center"
|
||||
>
|
||||
<TextLoading width={15} height={18} loading={false}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
|
||||
align="center"
|
||||
>
|
||||
<TextLoading width={15} height={18} loading={false}>
|
||||
{row.name}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="!pr-[18px] dark:!border-transparent !text-[#616161] dark:!text-[#A1A1A1] !text-[16px] !font-medium !text-nowrap"
|
||||
align="center"
|
||||
>
|
||||
<TextLoading width={15} height={18} loading={false}>
|
||||
{row.status}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Disease;
|
||||
@@ -0,0 +1,7 @@
|
||||
function FamilyHistory() {
|
||||
return (
|
||||
<div>FamilyHistory</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default FamilyHistory
|
||||
@@ -0,0 +1,7 @@
|
||||
function Medications() {
|
||||
return (
|
||||
<div>Medications</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Medications
|
||||
@@ -0,0 +1,7 @@
|
||||
function Relatives() {
|
||||
return (
|
||||
<div>Relatives</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Relatives
|
||||
@@ -0,0 +1,7 @@
|
||||
function Surgeries() {
|
||||
return (
|
||||
<div>Surgeries</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Surgeries
|
||||
Reference in New Issue
Block a user