add open/close to sidebar & responsive sidebar & head & page dashboard and user account
This commit is contained in:
Ehsan
@@ -3,7 +3,7 @@ import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from
|
||||
function CustomTable({ tableHead, zeroRadius, centerTable, children }) {
|
||||
return (
|
||||
<TableContainer
|
||||
className='!shadow-none table-shadow-none !border !border-solid !border-[#DBDBDB]'
|
||||
className='!shadow-none table-shadow-none !overflow-auto !border !border-solid !border-[#DBDBDB]'
|
||||
sx={{
|
||||
'&.MuiTableContainer-root': {
|
||||
borderRadius: zeroRadius && '0 !important'
|
||||
|
||||
@@ -304,6 +304,10 @@ html {
|
||||
border-radius: 12px !important;
|
||||
}
|
||||
|
||||
.table-rounded-8 .table-shadow-none {
|
||||
border-radius: 8px !important;
|
||||
}
|
||||
|
||||
.w-full-content .content-text-panel {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import AddDoctorPage from "@/components/panel/addDoctor"
|
||||
import AddDoctorPage from "@/components/panel/addDoctor";
|
||||
import Information from '@/data/information.json';
|
||||
|
||||
function AddDoctor() {
|
||||
return (
|
||||
<AddDoctorPage />
|
||||
<AddDoctorPage data={Information} />
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -5,17 +5,23 @@ import Sidebar from "@/components/layoutPanel/sidebar";
|
||||
import Information from '@/data/information.json';
|
||||
import UserDetail from "@/components/layoutPanel/userDetail";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
function LayoutPanel({ children }) {
|
||||
|
||||
const pathname = usePathname();
|
||||
const [active, setActive] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
<Sidebar />
|
||||
<Sidebar
|
||||
active={active}
|
||||
setActive={setActive}
|
||||
/>
|
||||
<main className="w-full">
|
||||
<Header
|
||||
data={Information}
|
||||
setActive={setActive}
|
||||
disableProfile={pathname.includes('dashboard')}
|
||||
/>
|
||||
<section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
function AddTimeP() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M9.99984 18.3337C14.5832 18.3337 18.3332 14.5837 18.3332 10.0003C18.3332 5.41699 14.5832 1.66699 9.99984 1.66699C5.4165 1.66699 1.6665 5.41699 1.6665 10.0003C1.6665 14.5837 5.4165 18.3337 9.99984 18.3337Z" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M6.6665 10H13.3332" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M10 13.3337V6.66699" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M9.99984 18.3337C14.5832 18.3337 18.3332 14.5837 18.3332 10.0003C18.3332 5.41699 14.5832 1.66699 9.99984 1.66699C5.4165 1.66699 1.6665 5.41699 1.6665 10.0003C1.6665 14.5837 5.4165 18.3337 9.99984 18.3337Z" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M6.6665 10H13.3332" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M10 13.3337V6.66699" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
function ArrowBottomP() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M16.6004 7.45801L11.1671 12.8913C10.5254 13.533 9.47539 13.533 8.83372 12.8913L3.40039 7.45801" stroke="#5559CE" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M16.6004 7.45801L11.1671 12.8913C10.5254 13.533 9.47539 13.533 8.83372 12.8913L3.40039 7.45801" stroke="#5559CE" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
function ArrowLeftBlueP() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M15.0001 19.9201L8.48009 13.4001C7.71009 12.6301 7.71009 11.3701 8.48009 10.6001L15.0001 4.08008" stroke="#5559CE" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
function ArrowRightP() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M14.4301 5.92969L20.5001 11.9997L14.4301 18.0697" stroke="#3B3B3B" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M3.5 12H20.33" stroke="#3B3B3B" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default ArrowRightP
|
||||
@@ -1,8 +1,8 @@
|
||||
function ClockP() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M18.3337 10.0003C18.3337 14.6003 14.6003 18.3337 10.0003 18.3337C5.40033 18.3337 1.66699 14.6003 1.66699 10.0003C1.66699 5.40033 5.40033 1.66699 10.0003 1.66699C14.6003 1.66699 18.3337 5.40033 18.3337 10.0003Z" stroke="#525252" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M13.0914 12.6505L10.5081 11.1088C10.0581 10.8421 9.69141 10.2005 9.69141 9.67546V6.25879" stroke="#525252" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M18.3337 10.0003C18.3337 14.6003 14.6003 18.3337 10.0003 18.3337C5.40033 18.3337 1.66699 14.6003 1.66699 10.0003C1.66699 5.40033 5.40033 1.66699 10.0003 1.66699C14.6003 1.66699 18.3337 5.40033 18.3337 10.0003Z" stroke="#525252" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M13.0914 12.6505L10.5081 11.1088C10.0581 10.8421 9.69141 10.2005 9.69141 9.67546V6.25879" stroke="#525252" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
function DoubleArrowLeftP() {
|
||||
return (
|
||||
<svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#7E7E7E"><path d="m313-480 155 156q11 11 11.5 27.5T468-268q-11 11-28 11t-28-11L228-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T468-692q11 11 11 28t-11 28L313-480Zm264 0 155 156q11 11 11.5 27.5T732-268q-11 11-28 11t-28-11L492-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T732-692q11 11 11 28t-11 28L577-480Z" /></svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default DoubleArrowLeftP
|
||||
@@ -1,9 +1,9 @@
|
||||
function ExportP() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M13.6997 7.41699C16.6997 7.67533 17.9247 9.21699 17.9247 12.592V12.7003C17.9247 16.4253 16.4331 17.917 12.7081 17.917H7.28307C3.55807 17.917 2.06641 16.4253 2.06641 12.7003V12.592C2.06641 9.24199 3.27474 7.70033 6.22474 7.42533" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M10 12.4999V3.0166" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M12.7913 4.87467L9.99967 2.08301L7.20801 4.87467" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M13.6997 7.41699C16.6997 7.67533 17.9247 9.21699 17.9247 12.592V12.7003C17.9247 16.4253 16.4331 17.917 12.7081 17.917H7.28307C3.55807 17.917 2.06641 16.4253 2.06641 12.7003V12.592C2.06641 9.24199 3.27474 7.70033 6.22474 7.42533" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M10 12.4999V3.0166" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M12.7913 4.87467L9.99967 2.08301L7.20801 4.87467" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,8 +1,8 @@
|
||||
function PlusBlueP() {
|
||||
return (
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||||
<path d="M5 10H15" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M10 15V5" stroke="#5559CE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<path d="M5 10H15" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M10 15V5" stroke="#5559CE" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,25 +3,54 @@ import React from 'react'
|
||||
import MoonP from '@/components/icons/MoonP'
|
||||
import NotificationP from '@/components/icons/NotificationP'
|
||||
import SettingP from '@/components/icons/SettingP'
|
||||
import SearchHeaderP from '@/components/icons/SearchHeaderP'
|
||||
|
||||
function Icons() {
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[12px]">
|
||||
<Button
|
||||
className="!p-[8px] !min-w-fit !border-[#EFEFEF] !rounded-[8px]"
|
||||
className="
|
||||
!p-[8px] !border-[#EFEFEF] !rounded-[8px]
|
||||
!w-[32px] md:!w-[36px] lg:!w-[40px]
|
||||
!h-[32px] md:!h-[36px] lg:!h-[40px]
|
||||
!min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
|
||||
!min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
|
||||
"
|
||||
variant="outlined"
|
||||
>
|
||||
<MoonP />
|
||||
</Button>
|
||||
<Button
|
||||
className="!p-[8px] !min-w-fit !border-[#EFEFEF] !rounded-[8px]"
|
||||
className="
|
||||
!p-[8px] !border-[#EFEFEF] !rounded-[8px]
|
||||
!w-[32px] md:!w-[36px] lg:!w-[40px]
|
||||
!h-[32px] md:!h-[36px] lg:!h-[40px]
|
||||
!min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
|
||||
!min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
|
||||
"
|
||||
variant="outlined"
|
||||
>
|
||||
<SearchHeaderP />
|
||||
</Button>
|
||||
<Button
|
||||
className="
|
||||
!p-[8px] !border-[#EFEFEF] !rounded-[8px]
|
||||
!w-[32px] md:!w-[36px] lg:!w-[40px]
|
||||
!h-[32px] md:!h-[36px] lg:!h-[40px]
|
||||
!min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
|
||||
!min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
|
||||
"
|
||||
variant="outlined"
|
||||
>
|
||||
<SettingP />
|
||||
</Button>
|
||||
<Button
|
||||
className='
|
||||
!p-[8px] !min-w-fit !border-[#EFEFEF] !rounded-[8px] !relative before:!rounded-full
|
||||
!w-[32px] md:!w-[36px] lg:!w-[40px]
|
||||
!h-[32px] md:!h-[36px] lg:!h-[40px]
|
||||
!min-w-[32px] md:!min-w-[36px] lg:!min-w-[40px]
|
||||
!min-h-[32px] md:!min-h-[36px] lg:!min-h-[40px]
|
||||
!p-[8px] !border-[#EFEFEF] !rounded-[8px] !relative before:!rounded-full
|
||||
before:!absolute before:!right-[-2px] before:!top-[-2px] before:!w-[6px] before:!h-[6px]
|
||||
before:!bg-[#D32F2F]
|
||||
'
|
||||
|
||||
@@ -19,10 +19,17 @@ function MenuProfile({ data }) {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Image
|
||||
className='flex md:hidden w-[32px] h-[32px] rounded-full'
|
||||
src={data.src}
|
||||
alt='profile'
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
<Button
|
||||
variant='text'
|
||||
onClick={handleClick}
|
||||
className='!flex !items-start !justify-center !gap-[8px] !p-1'
|
||||
className='!hidden md:!flex !items-start !justify-center !gap-[8px] !p-1'
|
||||
>
|
||||
<Image
|
||||
className='w-[48px] h-[48px] rounded-full'
|
||||
@@ -80,6 +87,7 @@ function MenuProfile({ data }) {
|
||||
fullWidth
|
||||
color='error'
|
||||
variant='contained'
|
||||
onClick={handleClose}
|
||||
sx={{
|
||||
'&.MuiButtonBase-root': {
|
||||
paddingTop: '8px !important',
|
||||
|
||||
@@ -4,8 +4,9 @@ import { InputAdornment, TextField } from "@mui/material"
|
||||
function Search() {
|
||||
return (
|
||||
<TextField
|
||||
placeholder="جستجو"
|
||||
fullWidth
|
||||
placeholder="جستجو"
|
||||
className="!hidden md:!flex"
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
|
||||
@@ -1,17 +1,19 @@
|
||||
import Icons from "./Icons"
|
||||
import MenuProfile from "./MenuProfile"
|
||||
import Search from "./Search"
|
||||
import Icons from "./Icons";
|
||||
import Search from "./Search";
|
||||
import SideButton from "./sideButton";
|
||||
import MenuProfile from "./MenuProfile";
|
||||
|
||||
function Header({ disableProfile, data }) {
|
||||
function Header({ disableProfile, data, setActive }) {
|
||||
return (
|
||||
<div
|
||||
className='
|
||||
h-[90px] top-0 right-0 sticky border-0 border-b border-[#EFEFEF] bg-[#FFF]
|
||||
flex items-center justify-between pr-[16px] pl-[18px] z-20 gap-[56px]
|
||||
h-[56px] sm:h-[67px] md:h-[79px] lg:h-[90px] top-0 right-0 sticky border-0 border-b border-[#EFEFEF] bg-[#FFF]
|
||||
flex items-center justify-between pr-[16px] pl-[18px] z-20 gap-[14px] sm:gap-[28px] md:gap-[42px] lg:gap-[56px]
|
||||
'
|
||||
>
|
||||
<SideButton setActive={setActive} />
|
||||
<Search />
|
||||
<div className="flex items-center justify-end gap-[40px] min-w-fit">
|
||||
<div className="flex items-center justify-end gap-[8px] md:gap-[40px] min-w-fit">
|
||||
<Icons />
|
||||
{!disableProfile && (
|
||||
<MenuProfile data={data} />
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Button } from "@mui/material"
|
||||
|
||||
function ButtonMenu({ setActive }) {
|
||||
return (
|
||||
<Button
|
||||
onClick={() => setActive(true)}
|
||||
className="!py-[6px] !px-[2px] !flex !p-0.5 !w-[24px] !h-[24px] !flex-col !justify-between !items-center"
|
||||
>
|
||||
<span
|
||||
className='min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] rotate-0 w-full'
|
||||
></span>
|
||||
<span
|
||||
className='w-full min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] rotate-180'
|
||||
></span>
|
||||
<span
|
||||
className='min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] rotate-0 w-full'
|
||||
></span>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export default ButtonMenu
|
||||
@@ -0,0 +1,15 @@
|
||||
import ButtonMenu from "./ButtonMenu"
|
||||
import LogoPanelHead from "@/components/icons/LogoPanelHead"
|
||||
|
||||
function SideButton({ setActive }) {
|
||||
return (
|
||||
<div className="flex md:hidden items-center justify-start gap-[4px]">
|
||||
<ButtonMenu setActive={setActive} />
|
||||
<div className="w-[100px] h-[24px]">
|
||||
<LogoPanelHead />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SideButton
|
||||
@@ -0,0 +1,28 @@
|
||||
import DoubleArrowLeftP from '@/components/icons/DoubleArrowLeftP'
|
||||
import LogoPanel from '@/components/icons/LogoPanel'
|
||||
import { Button } from '@mui/material'
|
||||
import Link from 'next/link'
|
||||
import React from 'react'
|
||||
|
||||
function HeadMd({ open, setOpen }) {
|
||||
return (
|
||||
<div className={`hidden md:flex w-full items-center transition-all duration-500 justify-between`}>
|
||||
<Link
|
||||
href='/panel/dashboard'
|
||||
className={`flex justify-center transition-all duration-500 ${open ? 'max-w-full' : 'max-w-0'}`}
|
||||
>
|
||||
<LogoPanel />
|
||||
</Link>
|
||||
<Button
|
||||
onClick={() => setOpen(!open)}
|
||||
className={`!p-1 !grid !place-items-center !rounded-full !border !border-solid !border-[#EFEFEF]
|
||||
!transition-all !duration-500 !bg-[#FFF] !w-[28px] !h-[28px] !z-[320]
|
||||
${open ? '!rotate-180' : '!rotate-0 !ml-[7px]'}`}
|
||||
>
|
||||
<DoubleArrowLeftP />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeadMd
|
||||
@@ -0,0 +1,22 @@
|
||||
import { Button } from "@mui/material";
|
||||
import ArrowRightP from "@/components/icons/ArrowRightP";
|
||||
import LogoPanelHead from "@/components/icons/LogoPanelHead";
|
||||
|
||||
function HeadSm({ setActive }) {
|
||||
return (
|
||||
<div className="flex md:hidden items-center justify-start gap-[8px]">
|
||||
<Button
|
||||
variant="text"
|
||||
className="!min-w-0 !p-1"
|
||||
onClick={() => setActive(false)}
|
||||
>
|
||||
<ArrowRightP />
|
||||
</Button>
|
||||
<div className="w-[100px] h-[23px]">
|
||||
<LogoPanelHead />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeadSm
|
||||
@@ -8,7 +8,7 @@ import CategoryP from "@/components/icons/CategoryP";
|
||||
import ProfileAddP from "@/components/icons/ProfileAddP";
|
||||
import ProfileCircleP from "@/components/icons/ProfileCircleP";
|
||||
|
||||
function Links() {
|
||||
function Links({ open }) {
|
||||
|
||||
const list = [
|
||||
{ name: 'دشبورد', src: '/panel/dashboard', icon: <CategoryP /> },
|
||||
@@ -20,25 +20,26 @@ function Links() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<ul className="flex flex-col gap-[32px] mt-[54px]">
|
||||
<ul className={`flex flex-col gap-[32px] mt-[36px] md:mt-[54px] transition-all duration-500`}>
|
||||
{list.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
>
|
||||
<li key={idx}>
|
||||
<Link href={item.src}>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="text"
|
||||
className={`
|
||||
!p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
|
||||
${item.src === pathname ? '!bg-[#5559CE] !text-[#FAFAFA] !font-bold' : '!text-[#525252] !font-medium'}
|
||||
!p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
|
||||
${item.src === pathname ? '!bg-[#5559CE] !text-[#FAFAFA] !font-bold' : '!text-[#525252] !font-medium'}
|
||||
`}
|
||||
>
|
||||
|
||||
<div className="p-[4px] bg-[#E5E9FF] rounded-[4px] w-fit">
|
||||
{item.icon}
|
||||
</div>
|
||||
{item.name}
|
||||
<p className={`
|
||||
transition-all duration-500
|
||||
${open ? 'opacity-100' : 'md:opacity-0'}
|
||||
`}>{item.name}</p>
|
||||
</Button>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@@ -1,30 +1,53 @@
|
||||
import { useState } from "react";
|
||||
|
||||
import Links from "./Links";
|
||||
import HeadMd from "./HeadMd";
|
||||
import HeadSm from "./HeadSm";
|
||||
import { Button } from "@mui/material";
|
||||
import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
|
||||
import LogoPanel from "@/components/icons/LogoPanel";
|
||||
import { Button } from "@mui/material";
|
||||
import Links from "./Links";
|
||||
import Link from "next/link";
|
||||
|
||||
function Sidebar({ active, setActive }) {
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
function Sidebar() {
|
||||
return (
|
||||
<aside className="min-w-[243px] h-full">
|
||||
<div className="min-w-[243px] p-[24px] h-full flex flex-col justify-between items-start fixed top-0 right-0 border-0 border-l border-l-[#EFEFEF] bg-[#FFF]">
|
||||
<div>
|
||||
<Link href='/panel/dashboard' className="flex justify-center">
|
||||
<LogoPanel />
|
||||
</Link>
|
||||
<Links />
|
||||
<div className={`
|
||||
transition-all duration-500 md:flex fixed md:relative z-30 w-[85%] md:w-fit
|
||||
${active ? ' right-0' : 'right-[-85%]'}
|
||||
${open ? 'min-w-[243px]' : 'min-w-[96px]'}
|
||||
`}>
|
||||
<aside className={`
|
||||
relative h-screen overflow-hidden
|
||||
transition-all duration-500 w-[85%] md:w-fit
|
||||
${active ? ' right-0' : 'right-[-85%]'}
|
||||
${open ? 'w-[243px]' : 'w-[96px]'}
|
||||
`}>
|
||||
<div className={`
|
||||
z-30
|
||||
md:top-0 md:right-0 w-[85%] md:w-fit
|
||||
${active ? ' right-0' : 'right-[-85%]'}
|
||||
overflow-hidden p-[24px] h-full flex flex-col justify-between items-start fixed
|
||||
border-0 border-l border-l-[#EFEFEF] bg-[#FFF]
|
||||
transition-all duration-700
|
||||
${open ? 'md:w-[243px]' : 'md:w-[96px]'}
|
||||
`}>
|
||||
<div className="w-full">
|
||||
<HeadMd open={open} setOpen={setOpen} />
|
||||
<HeadSm setActive={setActive} />
|
||||
<Links open={open} />
|
||||
</div>
|
||||
<div className={`w-full justify-center overflow-hidden transition-all duration-500 ${open ? '!max-w-full' : '!max-w-0'}`}>
|
||||
<Button
|
||||
variant="text"
|
||||
className="!flex !w-fit !items-center !justify-center !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
|
||||
>
|
||||
<LogoutOrangeP />
|
||||
خروج از حساب
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex justify-center">
|
||||
<Button
|
||||
variant="text"
|
||||
className="!flex !w-fit !items-center !justify-center !gap-[10px] !py-[8px] !px-[16px] !text-[#F17732] !text-[16px] !font-medium"
|
||||
>
|
||||
<LogoutOrangeP />
|
||||
خروج از حساب
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</aside>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -2,8 +2,8 @@ import WarnP from "@/components/icons/WarnP"
|
||||
|
||||
function Activities({ data }) {
|
||||
return (
|
||||
<div className="w-full mt-[40px]">
|
||||
<p className="text-[#525252] text-[16px] font-bold">فعالیت های امروز</p>
|
||||
<div className="w-full mt-[16px] sm:mt-[24px] md:mt-[32px] lg:mt-[40px]">
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">فعالیت های امروز</p>
|
||||
<ul className="flex flex-col justify-start w-full mt-[24px]">
|
||||
{data.todays_activities.map((item, idx) => (
|
||||
<li
|
||||
@@ -20,7 +20,7 @@ function Activities({ data }) {
|
||||
<p className="text-[#7E7E7E] text-[12px] font-normal">{item.time}</p>
|
||||
</div>
|
||||
{data.todays_activities.length > idx + 1 && (
|
||||
<span className="block h-px w-full bg-[#EFEFEF] px-[13px] my-[24px]"></span>
|
||||
<span className="block h-px w-full bg-transparent md:bg-[#EFEFEF] px-[13px] my-[16px] md:my-[20px] lg:my-[24px]"></span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
|
||||
@@ -4,9 +4,9 @@ import Activities from "./Activities";
|
||||
|
||||
function UserDetail({ data }) {
|
||||
return (
|
||||
<div className="min-w-[360px] h-full opacity-page">
|
||||
<div className="hidden xl:flex min-w-[332px] h-full opacity-page">
|
||||
<div
|
||||
className="min-w-[360px] p-[24px] border-0 border-r border-r-[#EFEFEF] h-full items-start fixed top-0 left-0
|
||||
className="min-w-[332px] p-[24px] border-0 border-r border-r-[#EFEFEF] h-full items-start fixed top-0 left-0
|
||||
bg-[#FFF] py-[40px] px-[16px]"
|
||||
>
|
||||
<Head data={data} />
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
function ContentText({ children, text }) {
|
||||
return (
|
||||
<div className="flex flex-col items-start justify-start gap-[16px] content-text-panel">
|
||||
<div className="flex flex-col items-start justify-start gap-[12px] md:gap-[14px] lg:gap-[16px] content-text-panel">
|
||||
<p className="text-[#525252] text-[14px] font-medium">{text}</p>
|
||||
{children}
|
||||
</div>
|
||||
|
||||
@@ -11,10 +11,10 @@ function Cards({ data }) {
|
||||
];
|
||||
|
||||
return (
|
||||
<ul className="flex flex-wrap items-center justify-center gap-[32px] mx-[16px]">
|
||||
<ul className="flex flex-wrap flex-col sm:flex-row items-center justify-center gap-[32px] mx-[16px]">
|
||||
{list.map((item, idx) => (
|
||||
<li
|
||||
className="flex min-w-[226px] flex-col py-[18px] px-[12px] gap-[8px] rounded-[4px] border border-solid border-[#EFEFEF] bg-[#FFF]"
|
||||
className="flex min-w-[226px] w-full sm:w-auto flex-col py-[16px] md:py-[18px] px-[12px] gap-[8px] rounded-[4px] border border-solid border-[#EFEFEF] bg-[#FFF]"
|
||||
key={idx}
|
||||
>
|
||||
<div className={`p-[12px] w-fit h-fit rounded-[2px] ${item.bg_color}`}>
|
||||
|
||||
+2
-2
@@ -23,10 +23,10 @@ function Chart({ data }) {
|
||||
disableTicks: true
|
||||
}]}
|
||||
margin={{
|
||||
left: 80,
|
||||
left: 60,
|
||||
right: 50,
|
||||
top: 10,
|
||||
bottom: 30,
|
||||
bottom: 60,
|
||||
}}
|
||||
sx={{
|
||||
[`& .${lineElementClasses.root}`]: {
|
||||
|
||||
@@ -16,7 +16,7 @@ function Head() {
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[12px] p-[16px]">
|
||||
<p className="text-[#525252] text-[16px] font-bold">میزان درآمد</p>
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">میزان درآمد</p>
|
||||
<Select
|
||||
defaultValue={1}
|
||||
className="!text-[#7E7E7E] !text-[12px] !font-normal !rounded-[4px]"
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import Activities from "@/components/layoutPanel/userDetail/Activities";
|
||||
import AmountOfIncome from "./amountOfIncome";
|
||||
import Cards from "./Cards";
|
||||
import List from "./list";
|
||||
@@ -8,6 +9,9 @@ function DashboardPage({ data }) {
|
||||
<Cards data={data} />
|
||||
<List data={data} />
|
||||
<AmountOfIncome data={data} />
|
||||
<div className="flex xl:hidden">
|
||||
<Activities data={data} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import TextLoading from "@/app/component/loading/Text"
|
||||
import Image from "next/image"
|
||||
|
||||
function ColTable({ data }) {
|
||||
return (
|
||||
<ul className="flex md:hidden flex-col gap-[16px]">
|
||||
{data.list_of_doctors_appointments.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="bg-[#FFF] p-[12px] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)]"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className='flex items-center justify-start gap-[8px] !text-nowrap'>
|
||||
<CircularLoading width={32} height={32} loading={false}>
|
||||
<Image
|
||||
src={item.image}
|
||||
alt='doctor'
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={false}>
|
||||
{item.name}
|
||||
</TextLoading>
|
||||
</div>
|
||||
<p className="px-[8px] py-[4px] text-[#F17732] text-[14px] font-medium bg-[rgba(255,216,197,0.50)] rounded-[4px]">
|
||||
تعداد نوبت: {item.number_of_turns}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col mt-[16px]">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">تخصص:</p>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{item.expertise}</p>
|
||||
</div>
|
||||
<span className="block h-px w-full bg-[#EFEFEF] my-[12px]"></span>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">تاریخ نوبت:</p>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{item.date}</p>
|
||||
</div>
|
||||
<span className="block h-px w-full bg-[#EFEFEF] my-[12px]"></span>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">ساعت نوبت:</p>
|
||||
<p className="text-[#616161] text-[14px] font-medium">{item.hour}</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
export default ColTable
|
||||
@@ -1,6 +1,5 @@
|
||||
import CustomTable from "@/app/component/CustomTable"
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import CustomLoading from "@/app/component/loading/Custom"
|
||||
import TextLoading from "@/app/component/loading/Text"
|
||||
import { TableCell, TableRow } from "@mui/material"
|
||||
import Image from "next/image"
|
||||
@@ -11,59 +10,61 @@ function Table({ data }) {
|
||||
const centerTable = [0, 4];
|
||||
|
||||
return (
|
||||
<CustomTable
|
||||
zeroRadius={true}
|
||||
tableHead={tableHead}
|
||||
centerTable={centerTable}
|
||||
>
|
||||
{data.list_of_doctors_appointments.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className='!border-0 !border-b !border-[#DBDBDB]'
|
||||
>
|
||||
<TableCell className='!pr-[18px] !text-[#616161] !text-[16px] !font-medium !text-nowrap' align="center">
|
||||
<TextLoading width={15} height={18} loading={false}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!pr-[18px] !text-[#616161] !text-[16px] !font-medium !text-nowrap' component="th" scope="row">
|
||||
<div className='flex items-center justify-start gap-[8px] !text-nowrap'>
|
||||
<CircularLoading width={32} height={32} loading={false}>
|
||||
<Image
|
||||
src={row.image}
|
||||
alt='doctor'
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={false}>
|
||||
{row.name}
|
||||
<div className="hidden md:flex">
|
||||
<CustomTable
|
||||
zeroRadius={true}
|
||||
tableHead={tableHead}
|
||||
centerTable={centerTable}
|
||||
>
|
||||
{data.list_of_doctors_appointments.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className='!border-0 !border-b !border-[#DBDBDB]'
|
||||
>
|
||||
<TableCell className='!pr-[18px] !text-[#616161] !text-[16px] !font-medium !text-nowrap' align="center">
|
||||
<TextLoading width={15} height={18} loading={false}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='!text-start !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={30} height={18} loading={false}>
|
||||
{row.expertise}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-start !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={false}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-center !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={false}>
|
||||
{row.hour}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-right !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={false}>
|
||||
{row.number_of_turns}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</TableCell>
|
||||
<TableCell className='!pr-[18px] !text-[#616161] !text-[16px] !font-medium !text-nowrap' component="th" scope="row">
|
||||
<div className='flex items-center justify-start gap-[8px] !text-nowrap'>
|
||||
<CircularLoading width={32} height={32} loading={false}>
|
||||
<Image
|
||||
src={row.image}
|
||||
alt='doctor'
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={false}>
|
||||
{row.name}
|
||||
</TextLoading>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='!text-start !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={30} height={18} loading={false}>
|
||||
{row.expertise}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-start !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={false}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-center !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={false}>
|
||||
{row.hour}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-right !text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={false}>
|
||||
{row.number_of_turns}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,21 +1,25 @@
|
||||
import { Button } from "@mui/material"
|
||||
import ArrowLeftP from "../../../icons/ArrowLeftP"
|
||||
import Table from "./Table"
|
||||
import ColTable from "./ColTable"
|
||||
|
||||
function List({ data }) {
|
||||
return (
|
||||
<div className="rounded-[8px] border overflow-hidden border-solid border-[#EFEFEF] bg-[#FFF]">
|
||||
<div className="rounded-[8px] border overflow-hidden border-solid w-full border-transparent md:border-[#EFEFEF] bg-transparent md:bg-[#FFF]">
|
||||
<div className="flex items-center justify-between p-[16px]">
|
||||
<p className="text-[#525252] text-[16px] font-bold">لیست نوبت های پزشکان</p>
|
||||
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold">لیست نوبت های پزشکان</p>
|
||||
<Button
|
||||
variant="text"
|
||||
className="!flex !items-center !justify-center !text-[#616161] !text-[14px] !font-normal !gap-[4px] !p-1"
|
||||
className="!hidden md:!flex !items-center !justify-center !text-[#616161] !text-[14px] !font-normal !gap-[4px] !p-1"
|
||||
>
|
||||
مشاهده همه
|
||||
<ArrowLeftP />
|
||||
</Button>
|
||||
</div>
|
||||
<Table data={data} />
|
||||
<div className="w-full overflow-auto">
|
||||
<Table data={data} />
|
||||
<ColTable data={data} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
import CustomTable from "@/app/component/CustomTable"
|
||||
import CircularLoading from "@/app/component/loading/Circular"
|
||||
import CustomLoading from "@/app/component/loading/Custom"
|
||||
import TextLoading from "@/app/component/loading/Text"
|
||||
import Pagination from "@/app/component/Pagination"
|
||||
import { TableCell, TableRow } from "@mui/material"
|
||||
import Image from "next/image"
|
||||
|
||||
function List({ data }) {
|
||||
|
||||
const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'تعدد نوبت'];
|
||||
const centerTable = [0, 4];
|
||||
|
||||
return (
|
||||
<div className="mt-[32px] pb-[20px] table-rounded-8">
|
||||
<CustomTable
|
||||
tableHead={tableHead}
|
||||
centerTable={centerTable}
|
||||
>
|
||||
{data.list_of_doctors_appointments.map((row, idx) => (
|
||||
<TableRow
|
||||
key={idx}
|
||||
className='!border-0 !border-b !border-[#DBDBDB]'
|
||||
>
|
||||
<TableCell className='!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="center">
|
||||
<TextLoading width={15} height={18} loading={false}>
|
||||
{idx + 1}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' component="th" scope="row">
|
||||
<div className='flex items-center justify-start gap-[8px] !text-nowrap'>
|
||||
<CircularLoading width={32} height={32} loading={false}>
|
||||
<Image
|
||||
src={row.image}
|
||||
alt='doctor'
|
||||
height={32}
|
||||
width={32}
|
||||
/>
|
||||
</CircularLoading>
|
||||
<TextLoading width={40} height={18} loading={false}>
|
||||
{row.name}
|
||||
</TextLoading>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className='!text-[#616161] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={false}>
|
||||
{row.expertise}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-[#616161] !text-[16px] !font-medium !text-start !pr-[18px] !text-nowrap' align="left">
|
||||
<TextLoading width={50} height={18} loading={false}>
|
||||
{row.date}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-[#616161] !text-[16px] !font-medium !text-center !pr-[18px] !text-nowrap' align="right">
|
||||
<TextLoading width={50} height={18} loading={false}>
|
||||
{row.hour}
|
||||
</TextLoading>
|
||||
</TableCell>
|
||||
<TableCell className='!text-[#616161] !text-[16px] !font-medium !pr-[18px] !text-nowrap' align="left">
|
||||
<CustomLoading width={80} height={22} loading={false}>
|
||||
{row.number_of_turns}
|
||||
</CustomLoading>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</CustomTable>
|
||||
<div className="w-full flex justify-center mt-[48px]">
|
||||
<Pagination />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default List
|
||||
@@ -1,9 +1,12 @@
|
||||
import Head from "./head"
|
||||
import Head from "./head";
|
||||
import List from "./List";
|
||||
|
||||
|
||||
function TurnsPage({ data }) {
|
||||
return (
|
||||
<div className="bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] p-[24px]">
|
||||
<div className="bg-[#FFF] opacity-page rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] p-[24px]">
|
||||
<Head />
|
||||
<List data={data} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -4,13 +4,13 @@ import { Button } from "@mui/material";
|
||||
|
||||
function Head() {
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[10px]">
|
||||
<div className="flex items-center justify-center md:justify-start gap-[10px]">
|
||||
<div className="p-[24px] grid place-items-center border border-solid border-[#EFEFEF] bg-[#EFEFEF] rounded-full">
|
||||
<ProfileP />
|
||||
</div>
|
||||
<Button
|
||||
variant="text"
|
||||
className="!flex !p-1 !text-[#525252] !text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
|
||||
className="!flex !p-1 !text-[#525252] !text-[14px] md:!text-[16px] !font-medium !items-center !justify-center !gap-[4px]"
|
||||
>
|
||||
انتخاب تصویر
|
||||
<ArrowLeftPU />
|
||||
|
||||
@@ -37,7 +37,7 @@ function Form() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col items-start justify-start gap-[48px]">
|
||||
<ul className="grid w-full grid-cols-2 mt-[32px] gap-x-[48px] gap-y-[32px]">
|
||||
<ul className="grid w-full grid-cols-1 md:grid-cols-2 mt-[24px] md:mt-[28px] lg:mt-[32px] gap-x-[48px] gap-y-[32px]">
|
||||
<ContentText text='نام و نام خانوادگی'>
|
||||
<EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.name} name='name' />
|
||||
</ContentText>
|
||||
@@ -81,7 +81,8 @@ function Form() {
|
||||
<div className="w-full flex justify-end">
|
||||
<Button
|
||||
variant="contained"
|
||||
className="!gap-[4px] !py-[8px] !px-[24px] !rounded-[4px] !shadow-none !text-[#EFEFEF] !text-[16px] !font-medium"
|
||||
className="!gap-[4px] !py-[8px] !px-[24px] !rounded-[4px] !w-full md:!w-fit
|
||||
!shadow-none !text-[#EFEFEF] !text-[14px] md:!text-[16px] !font-medium"
|
||||
>
|
||||
ثبت اطلاعات
|
||||
<ArrowLeftButtonP />
|
||||
|
||||
@@ -3,7 +3,11 @@ import Head from "./Head";
|
||||
|
||||
function UserAccountPage({ data }) {
|
||||
return (
|
||||
<div className="opacity-page rounded-[8px] bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] px-[112px] py-[32px]">
|
||||
<div className="
|
||||
opacity-page rounded-[8px] bg-transparent md:bg-[#FFF]
|
||||
shadow-none md:shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] py-0 md:py-[16px] lg:py-[32px]
|
||||
px-0 sm:px-[14px] md:px-[24px] lg:px-[44px] xl:px-[112px]
|
||||
">
|
||||
<Head />
|
||||
<Form />
|
||||
</div>
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
"date": "1403-03-27",
|
||||
"image": "/assets/images/user.png",
|
||||
"hour": "15:30",
|
||||
"number_of_turns": 12
|
||||
"number_of_turns": 56
|
||||
},
|
||||
{
|
||||
"name": "دنیا خلیلی",
|
||||
@@ -41,7 +41,7 @@
|
||||
"date": "1403-03-27",
|
||||
"image": "/assets/images/user.png",
|
||||
"hour": "15:30",
|
||||
"number_of_turns": 12
|
||||
"number_of_turns": 75
|
||||
},
|
||||
{
|
||||
"name": "دنیا خلیلی",
|
||||
@@ -49,7 +49,7 @@
|
||||
"date": "1403-03-27",
|
||||
"image": "/assets/images/user.png",
|
||||
"hour": "15:30",
|
||||
"number_of_turns": 12
|
||||
"number_of_turns": 18
|
||||
},
|
||||
{
|
||||
"name": "دنیا خلیلی",
|
||||
@@ -57,7 +57,7 @@
|
||||
"date": "1403-03-27",
|
||||
"image": "/assets/images/user.png",
|
||||
"hour": "15:30",
|
||||
"number_of_turns": 12
|
||||
"number_of_turns": 54
|
||||
},
|
||||
{
|
||||
"name": "دنیا خلیلی",
|
||||
@@ -65,7 +65,7 @@
|
||||
"date": "1403-03-27",
|
||||
"image": "/assets/images/user.png",
|
||||
"hour": "15:30",
|
||||
"number_of_turns": 12
|
||||
"number_of_turns": 34
|
||||
}
|
||||
],
|
||||
"chart_amount_income": [
|
||||
|
||||
Reference in New Issue
Block a user