design sidebar & head layout & page dashboard
This commit is contained in:
Ehsan
@@ -0,0 +1,36 @@
|
||||
import { Button } from '@mui/material'
|
||||
import React from 'react'
|
||||
import MoonP from '@/components/icons/MoonP'
|
||||
import NotificationP from '@/components/icons/NotificationP'
|
||||
import SettingP from '@/components/icons/SettingP'
|
||||
|
||||
function Icons() {
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[12px]">
|
||||
<Button
|
||||
className="!p-[8px] !min-w-fit !border-[#EFEFEF] !rounded-[8px]"
|
||||
variant="outlined"
|
||||
>
|
||||
<MoonP />
|
||||
</Button>
|
||||
<Button
|
||||
className="!p-[8px] !min-w-fit !border-[#EFEFEF] !rounded-[8px]"
|
||||
variant="outlined"
|
||||
>
|
||||
<SettingP />
|
||||
</Button>
|
||||
<Button
|
||||
className='
|
||||
!p-[8px] !min-w-fit !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]
|
||||
'
|
||||
variant="outlined"
|
||||
>
|
||||
<NotificationP />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Icons
|
||||
@@ -0,0 +1,54 @@
|
||||
import SearchHeaderP from "@/components/icons/SearchHeaderP"
|
||||
import { InputAdornment, TextField } from "@mui/material"
|
||||
|
||||
function Search() {
|
||||
return (
|
||||
<TextField
|
||||
placeholder="جستجو"
|
||||
fullWidth
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<SearchHeaderP />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
sx={{
|
||||
'& .MuiOutlinedInput-input': {
|
||||
paddingTop: '9px !important',
|
||||
paddingBottom: '9px !important'
|
||||
},
|
||||
'& .MuiFormLabel-root': {
|
||||
top: '-4px !important'
|
||||
},
|
||||
'& .MuiInputBase-root': {
|
||||
borderRadius: '8px',
|
||||
},
|
||||
'& .MuiOutlinedInput-input': {
|
||||
paddingTop: '9px !important',
|
||||
paddingBottom: '9px !important'
|
||||
},
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
border: '1px solid #EFEFEF !important',
|
||||
transition: '0.3s all !important'
|
||||
},
|
||||
'& .MuiOutlinedInput-root': {
|
||||
'&.MuiInputBase-root,.MuiFormLabel-root ': {
|
||||
color: '#7E7E7E !important',
|
||||
fontsize: '14px',
|
||||
fontweight: '400',
|
||||
},
|
||||
'&:hover .MuiOutlinedInput-notchedOutline': {
|
||||
border: '1px solid #EFEFEF !important',
|
||||
},
|
||||
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
|
||||
border: '1px solid #5559CE !important',
|
||||
transition: '0.3s all !important'
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default Search
|
||||
@@ -0,0 +1,18 @@
|
||||
import Icons from "./Icons"
|
||||
import Search from "./Search"
|
||||
|
||||
function index() {
|
||||
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]
|
||||
'
|
||||
>
|
||||
<Search />
|
||||
<Icons />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default index
|
||||
@@ -0,0 +1,32 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect } from "react";
|
||||
import Header from './header';
|
||||
import Sidebar from './sidebar';
|
||||
import UserDetail from './userDetail';
|
||||
|
||||
// AOS
|
||||
import Aos from "aos";
|
||||
import "aos/dist/aos.css";
|
||||
|
||||
function LayoutPanel({ children, data }) {
|
||||
|
||||
useEffect(() => {
|
||||
Aos.init({ duration: 1000 });
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
<Sidebar />
|
||||
<main className="w-full">
|
||||
<Header />
|
||||
<section className="my-[24px] opacity-element mx-[16px] bg-[#FAFAFA]">
|
||||
{children}
|
||||
</section>
|
||||
</main>
|
||||
<UserDetail data={data} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LayoutPanel
|
||||
@@ -0,0 +1,47 @@
|
||||
import CalendarP from "@/components/icons/CalendarP";
|
||||
import CategoryP from "@/components/icons/CategoryP";
|
||||
import ProfileAddP from "@/components/icons/ProfileAddP";
|
||||
import ProfileCircleP from "@/components/icons/ProfileCircleP";
|
||||
import { Button } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
|
||||
function Links() {
|
||||
|
||||
const list = [
|
||||
{ name: 'دشبورد', icon: <CategoryP /> },
|
||||
{ name: 'حساب کاربری', icon: <ProfileCircleP /> },
|
||||
{ name: 'اضافه کردن پزشک', icon: <ProfileAddP /> },
|
||||
{ name: 'نوبت ها', icon: <CalendarP /> }
|
||||
];
|
||||
|
||||
const [value, setValue] = useState(0);
|
||||
|
||||
return (
|
||||
<ul className="flex flex-col gap-[32px] mt-[54px]">
|
||||
{list.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="p-[8px]"
|
||||
>
|
||||
<Button
|
||||
fullWidth
|
||||
variant="text"
|
||||
onClick={() => setValue(idx)}
|
||||
className={`
|
||||
!p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
|
||||
${idx === value ? '!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}
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
export default Links
|
||||
@@ -0,0 +1,30 @@
|
||||
import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
|
||||
import LogoPanel from "@/components/icons/LogoPanel";
|
||||
import { Button } from "@mui/material";
|
||||
import Links from "./Links";
|
||||
|
||||
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>
|
||||
<div className="flex justify-center">
|
||||
<LogoPanel />
|
||||
</div>
|
||||
<Links />
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sidebar
|
||||
@@ -0,0 +1,32 @@
|
||||
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>
|
||||
<ul className="flex flex-col justify-start w-full mt-[24px]">
|
||||
{data.todays_activities.map((item, idx) => (
|
||||
<li
|
||||
key={idx}
|
||||
className="flex flex-col"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center justify-start gap-[12px]">
|
||||
<div className="bg-[rgba(255,192,81,0.20)] p-[8px] rounded-full">
|
||||
<WarnP />
|
||||
</div>
|
||||
<p className="text-[#616161] text-[16px] font-medium">{item.text}</p>
|
||||
</div>
|
||||
<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>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Activities
|
||||
@@ -0,0 +1,14 @@
|
||||
import { DatePicker } from "jalaali-react-date-picker"
|
||||
|
||||
function Date() {
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<DatePicker
|
||||
nextIcon={<></>}
|
||||
prevIcon={<></>}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Date
|
||||
@@ -0,0 +1,43 @@
|
||||
import ArrowLeftBlueP from '@/components/icons/ArrowLeftBlueP'
|
||||
import LocationP from '@/components/icons/LocationP'
|
||||
import { Button } from '@mui/material'
|
||||
import Image from 'next/image'
|
||||
import React from 'react'
|
||||
|
||||
function Head({ data }) {
|
||||
return (
|
||||
<div className="flex w-full flex-col items-center justify-start">
|
||||
<Image
|
||||
src={data.src}
|
||||
height={80}
|
||||
width={80}
|
||||
alt="profile"
|
||||
/>
|
||||
<p className="text-[#3B3B3B] text-[14px] font-semibold mt-[8px] mb-[4px]">{data.name}</p>
|
||||
<div className="flex items-center justify-center gap-[8px]">
|
||||
<LocationP />
|
||||
<p className="text-[#7E7E7E] text-[14px] font-normal">نماینده شهر اهواز</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-center my-[16px]">
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<p className="text-[#9B9B9B] text-[14px] font-normal">کل بیماران</p>
|
||||
<p className="text-[#3B3B3B] text-[14px] font-medium">{data.all_patients}</p>
|
||||
</div>
|
||||
<span className="block h-[44px] w-px bg-[#EFEFEF] mx-[44px]"></span>
|
||||
<div className="flex flex-col items-center justify-center">
|
||||
<p className="text-[#9B9B9B] text-[14px] font-normal">کل نوبت ها</p>
|
||||
<p className="text-[#3B3B3B] text-[14px] font-medium">{data.total_turns}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
className="!flex !p-1 !items-center !justify-center !text-[#5559CE] !text-[14px] !font-medium"
|
||||
variant="text"
|
||||
>
|
||||
مشاهده اطلاعات نماینده
|
||||
<ArrowLeftBlueP />
|
||||
</Button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Head
|
||||
@@ -0,0 +1,21 @@
|
||||
import Head from "./Head";
|
||||
import Date from "./Date";
|
||||
import Activities from "./Activities";
|
||||
|
||||
function UserDetail({ data }) {
|
||||
return (
|
||||
<div className="min-w-[360px] h-full">
|
||||
<div
|
||||
className="min-w-[360px] 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} />
|
||||
<span className="block w-full h-px bg-[#EFEFEF] px-[22px] mt-[13px] mb-[16px]"></span>
|
||||
<Date />
|
||||
<Activities data={data} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default UserDetail
|
||||
Reference in New Issue
Block a user