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

all tabs page dashboard and responsive

Browse Source
This commit is contained in:
Ehsan
2024-09-05 00:21:58 +03:30
parent 52a745fcb8
commit 087ed4a818
50 changed files with 860 additions and 502 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/dashboard/userAccount/tabs/turns/isTurnsDetails/ButtonData.js
+24
View File
@@ -0,0 +1,24 @@
import { Button } from "@mui/material"
import ModalDeleteComment from "./modal"
import EditTurnsD from "@/components/icons/EditTurnsD"
import ArrowLeftD from "@/components/icons/ArrowLeftD"
function ButtonData() {
return (
<div className="flex mt-[48px] md:mt-0 items-center justify-center md:justify-end gap-[16px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
<ModalDeleteComment />
<Button
className="!rounded-[4px] !shadow-none !gap-[4px] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]"
variant="contained"
>
<EditTurnsD />
ویرایش نوبت
<div className="mr-[4px]">
<ArrowLeftD />
</div>
</Button>
</div>
)
}
export default ButtonData
components/dashboard/userAccount/tabs/turns/isTurnsDetails/Detail.js
-66
View File
@@ -1,66 +0,0 @@
import CalendarD from '@/components/icons/CalendarD';
import CallD from '@/components/icons/CallD';
import ClockClinic from '@/components/icons/ClockClinic';
import LocationClinic from '@/components/icons/LocationClinic';
import RoutingC from '@/components/icons/RoutingC';
import TicketD from '@/components/icons/TicketD';
import { Button } from '@mui/material';
import Image from 'next/image'
import React from 'react'
function Detail({ user }) {
const data = user.turns[1];
return (
<div className='mt-[18px]'>
<div className='flex items-center justify-start gap-[16px]'>
<Image
height={95}
width={95}
alt='profile'
src={data.image}
/>
<div className='flex flex-col items-start justify-center gap-[20px]'>
<p className='text-[#3B3B3B] text-[20px] font-medium'>{data.name}</p>
<p className='text-[#616161] text-[16px] font-medium'>تخصص: {data.expertise}</p>
</div>
</div>
<ul className='flex mt-[32px] mb-[24px] flex-col gap-[24px] items-start justify-start'>
<li className='flex items-center justify-start gap-[56px]'>
<div className='flex items-center justify-start gap-[4px]'>
<CalendarD />
<p className='text-[#616161] text-[20px] font-medium'>تاریخ نوبت: <span className='text-[#2F2F2F] text-[20px] font-bold'>{data.date_turn}</span></p>
</div>
<div className='flex items-center justify-start gap-[4px]'>
<ClockClinic />
<p className='text-[#616161] text-[20px] font-medium'>زمان نوبت: <span className='text-[#2F2F2F] text-[20px] font-bold'>ساعت {data.time}</span></p>
</div>
</li>
<li className='flex items-center justify-start gap-[32px]'>
<div className='flex items-center justify-start gap-[4px]'>
<LocationClinic />
<p className='text-[#616161] text-[16] font-normal'>آدرس: <span className='text-[#2F2F2F] text-[16] font-normal'>{data.location}</span></p>
</div>
<Button
className='!py-[8px] !px-[12px] !gap-[8px]'
variant='text'
>
<RoutingC />
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
</Button>
</li>
<li className='flex items-center justify-start gap-[4px]'>
<CallD />
<p className='text-[#616161] text-[16] font-normal'>تلفن: <span className='text-[#2F2F2F] text-[16] font-normal'>{data.phone}</span></p>
</li>
</ul>
<div className='py-[18px] pr-[16px] pl-[40px] flex items-center gap-[4px] border border-solid border-[#EFEFEF] rounded-[4px] w-fit'>
<TicketD />
<p className='text-[#616161] text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
</div>
</div>
)
}
export default Detail
components/dashboard/userAccount/tabs/turns/isTurnsDetails/DetailLg.js
+67
View File
@@ -0,0 +1,67 @@
import CalendarD from '@/components/icons/CalendarD';
import CallD from '@/components/icons/CallD';
import ClockClinic from '@/components/icons/ClockClinic';
import LocationClinic from '@/components/icons/LocationClinic';
import RoutingC from '@/components/icons/RoutingC';
import TicketD from '@/components/icons/TicketD';
import { Button } from '@mui/material';
import Image from 'next/image'
import React from 'react'
function DetailLg({ user }) {
const data = user.turns[1];
return (
<div className='lg:mt-[18px] hidden md:block'>
<div className='flex md:mt-[24px] lg:mt-0 items-center justify-start gap-[8px] md:gap-[12px] lg:gap-[16px]'>
<Image
width={95}
height={95}
alt='profile'
src={data.image}
className='w-[32px] h-[32px] sm:w-[53px] sm:h-[53px] md:w-[74px] md:h-[74px] lg:w-[95px] lg:h-[95px]'
/>
<div className='flex flex-col items-start justify-center gap-[20px]'>
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>{data.name}</p>
<p className='text-[#616161] text-[14px] md:text-[15px] lg:text-[16px] font-medium'>تخصص: {data.expertise}</p>
</div>
</div>
<ul className='flex mt-[16px] sm:mt-[21px] md:mt-[27px] lg:mt-[32px] mb-[24px] flex-col gap-[24px] items-start justify-start'>
<li className='flex items-center justify-start flex-wrap gap-[16px] lg:gap-[56px]'>
<div className='flex items-start justify-start gap-[4px]'>
<CalendarD />
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>تاریخ نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.date_turn}</span></p>
</div>
<div className='flex items-start justify-start gap-[4px]'>
<ClockClinic />
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>زمان نوبت: <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>ساعت {data.time}</span></p>
</div>
</li>
<li className='flex flex-wrap items-center justify-start gap-y-[12px] gap-[32px]'>
<div className='flex items-start justify-start gap-[4px]'>
<LocationClinic />
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>آدرس: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.location}</span></p>
</div>
<Button
className='!py-[8px] !px-[12px] !gap-[8px]'
variant='text'
>
<RoutingC />
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
</Button>
</li>
<li className='flex items-center justify-start gap-[4px]'>
<CallD />
<p className='text-[#616161] text-[14px] lg:text-[16px] font-normal'>تلفن: <span className='text-[#2F2F2F] text-[14px] lg:text-[16px] font-normal'>{data.phone}</span></p>
</li>
</ul>
<div className='py-[9px] lg:py-[18px] px-[12px] lg:pr-[16px] lg:pl-[40px] flex items-center gap-[4px] border border-solid border-[#EFEFEF] rounded-[4px] w-fit'>
<TicketD />
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
</div>
</div>
)
}
export default DetailLg
components/dashboard/userAccount/tabs/turns/isTurnsDetails/DetailSm.js
+62
View File
@@ -0,0 +1,62 @@
import RoutingC from '@/components/icons/RoutingC';
import TicketD from '@/components/icons/TicketD';
import { Button } from '@mui/material';
import Image from 'next/image'
import React from 'react'
import ButtonData from './ButtonData';
function DetailSm({ user }) {
const data = user.turns[1];
return (
<div className='mt-[20px] block md:hidden'>
<div className='flex items-center justify-start gap-[8px]'>
<Image
src={data.image}
alt='profile'
height={32}
width={32}
/>
<div className='flex flex-col justify-center items-start gap-[8px]'>
<p className='text-[#616161] text-[14px] font-medium'>{data.name}</p>
<p className='text-[#7E7E7E] text-[14px] font-normal'>{data.expertise}</p>
</div>
</div>
<ul className='flex w-full flex-col items-start justify-start mt-[16px]'>
<li className="flex items-center w-full justify-between">
<p className="text-[#7E7E7E] text-[16px] font-normal">تاریخ نوبت:</p>
<p className="text-[#525252] text-[16px] font-medium">{data.date}</p>
</li>
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
<li className="flex flex-wrap items-center w-full justify-between">
<p className="text-[#7E7E7E] text-[16px] font-normal">ساعت نوبت:</p>
<p className="text-[#525252] text-[16px] font-medium">{data.time}</p>
</li>
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
<li className="flex flex-wrap gap-y-[12px] items-center w-full justify-between">
<p className="text-[#7E7E7E] text-[14px] font-normal">آدرس:<span className='text-[#616161]'>{data.location}</span></p>
<Button
className='!py-[8px] !border-[#EFEFEF] !px-[12px] !gap-[8px]'
variant='outlined'
>
<RoutingC />
<p className='text-[#5559CE] text-[14px] font-medium'>مسیریابی آدرس</p>
</Button>
</li>
<p className='text-[#7E7E7E] text-[14px] font-normal mt-[12px]'>تلفن: <span className='text-[#616161]'>{data.phone}</span></p>
<span className='block w-full h-px bg-[#EFEFEF] mt-[12px] mb-[16px]'></span>
<li className='flex items-center justify-between w-full'>
<div className='flex items-center gap-[4px] w-fit'>
<TicketD />
<p className='text-[#616161] text-[14px] lg:text-[20px] font-medium'>مبلغ پرداخت شده : <span className='text-[#2F2F2F] text-[14px] lg:text-[20px] font-bold'>{data.amount_paid} تومان</span></p>
</div>
<p className='text-[#616161] text-[14px] font-bold'>{data.amount_paid} تومان</p>
</li>
</ul>
<ButtonData />
</div>
)
}
export default DetailSm
components/dashboard/userAccount/tabs/turns/isTurnsDetails/Head.js
+5 -19
View File
@@ -1,34 +1,20 @@
import ArrowRightS from "@/components/icons/ArrowRightS";
import ArrowLeftD from "@/components/icons/ArrowLeftD";
import EditTurnsD from "@/components/icons/EditTurnsD";
import { Button } from "@mui/material";
import ModalDeleteComment from "./modal";
import ButtonData from "./ButtonData";
function Head({ user, setIsTurnsDetails }) {
return (
<div className="flex items-center justify-between">
<div className="flex items-center justify-start gap-[24px]">
<div className="hidden md:flex flex-wrap gap-x-[24px] gap-y-[12px] items-center justify-between">
<div className="flex items-center justify-start gap-[12px] sm:gap-[16px] md:gap-[20px] lg:gap-[24px]">
<Button
onClick={() => setIsTurnsDetails(false)}
className="!p-[6px] !border !border-solid !border-[#EFEFEF] !rounded-[4px] !min-w-0"
>
<ArrowRightS />
</Button>
<p className="text-[#3B3B3B] text-[20px] font-bold">جزئیات نوبت شما</p>
</div>
<div className="flex items-center justify-end gap-[24px]">
<ModalDeleteComment />
<Button
className="!rounded-[4px] !shadow-none !gap-[4px] !py-[8px] !px-[12px]"
variant="contained"
>
<EditTurnsD />
ویرایش نوبت
<div className="mr-[4px]">
<ArrowLeftD />
</div>
</Button>
<p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">جزئیات نوبت شما</p>
</div>
<ButtonData />
</div>
)
}
components/dashboard/userAccount/tabs/turns/isTurnsDetails/index.js
+5 -3
View File
@@ -1,15 +1,17 @@
import Detail from "./Detail"
import DetailLg from "./DetailLg"
import DetailSm from "./DetailSm"
import Head from "./Head"
function IsTurnsDetails({ user, setIsTurnsDetails }) {
return (
<div className="py-[20px] px-[24px] opacity-page">
<div className="md:py-[20px] md:px-[24px] opacity-page">
<Head
user={user}
setIsTurnsDetails={setIsTurnsDetails}
/>
<Detail user={user} />
<DetailLg user={user} />
<DetailSm user={user} />
</div>
)
}
components/dashboard/userAccount/tabs/turns/isTurnsDetails/modal/index.js
+8 -8
View File
@@ -13,7 +13,7 @@ function ModalDeleteComment() {
<div>
{/* Button Modal */}
<Button
className="!rounded-[4px] !border-[#828DE0] !py-[8px] !px-[12px]"
className="!rounded-[4px] !border-[#828DE0] !py-[6px] md:!py-[7px] lg:!py-[8px] !px-[12px]"
onClick={handleOpen}
variant="outlined"
>
@@ -26,10 +26,10 @@ function ModalDeleteComment() {
>
<Box
sx={styleDefault}
className="!w-full md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
>
<div className='flex items-center justify-between w-full'>
<p className='text-[#3B3B3B] text-[20px] font-medium'>لغو نوبت</p>
<p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>لغو نوبت</p>
<Button
onClick={handleClose}
className='!p-1'
@@ -38,20 +38,20 @@ function ModalDeleteComment() {
<CloseModalD />
</Button>
</div>
<span className='block h-px w-full bg-[#EFEFEF] my-[16px]'></span>
<p className='text-[#525252] text-[16px] font-normal'>آیا از لغو کردن نوبت مطمئن هستید؟</p>
<div className='flex items-center justify-end gap-[16px]'>
<span className='block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]'></span>
<p className='text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal'>آیا از لغو کردن نوبت مطمئن هستید؟</p>
<div className='flex items-center justify-end gap-[16px] mt-[12px]'>
<Button
variant='outlined'
onClick={handleClose}
className='!py-[8px] !px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium'
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[16px] !font-medium'
>
انصراف
</Button>
<Button
variant='contained'
onClick={handleClose}
className='!py-[8px] !px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium'
className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !text-[#EFEFEF] !text-[16px] !font-medium'
>
لغو نوبت
</Button>