design sidebar & head layout & page dashboard
This commit is contained in:
Ehsan
@@ -0,0 +1,36 @@
|
||||
import CalendarTickGreenP from "../icons/CalendarTickGreenP"
|
||||
import CardOrangeP from "../icons/CardOrangeP"
|
||||
import PeopleBlueP from "../icons/PeopleBlueP"
|
||||
|
||||
function Cards({ data }) {
|
||||
|
||||
const list = [
|
||||
{ text: 'تعداد کل بیماران', bg_color: 'bg-[#E5E9FF]', value: data.number_of_patients, label: 'نفر', icon: <PeopleBlueP /> },
|
||||
{ text: 'نوبت های امروز', bg_color: 'bg-[rgba(20,204,38,0.14)]', value: data.today_turns, label: 'نوبت', icon: <CalendarTickGreenP /> },
|
||||
{ text: 'پرداختی ها', bg_color: 'bg-[#FFD8C5]', value: data.payments, label: 'تومان', icon: <CardOrangeP /> }
|
||||
];
|
||||
|
||||
return (
|
||||
<ul className="flex 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]"
|
||||
key={idx}
|
||||
>
|
||||
<div className={`p-[12px] w-fit h-fit rounded-[2px] ${item.bg_color}`}>
|
||||
{item.icon}
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-[#525252] text-[14px] font-normal">{item.text}</p>
|
||||
<p className="text-[#3B3B3B] text-[24px] font-medium">
|
||||
{item.value}
|
||||
<span className="text-[#616161] mr-[6px] text-[12px] font-normal">{item.label}</span>
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
|
||||
export default Cards
|
||||
+66
@@ -0,0 +1,66 @@
|
||||
'use client';
|
||||
|
||||
import { LineChart, lineElementClasses } from "@mui/x-charts"
|
||||
|
||||
function Chart({ data }) {
|
||||
return (
|
||||
<LineChart
|
||||
xAxis={[{
|
||||
data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
|
||||
disableLine: true,
|
||||
disableTicks: true,
|
||||
}]}
|
||||
series={[
|
||||
{
|
||||
id: 'income',
|
||||
data: data.chart_amount_income,
|
||||
area: true,
|
||||
showMark: false,
|
||||
},
|
||||
]}
|
||||
yAxis={[{
|
||||
disableLine: true,
|
||||
disableTicks: true
|
||||
}]}
|
||||
margin={{
|
||||
left: 90,
|
||||
right: 50,
|
||||
top: 10,
|
||||
bottom: 30,
|
||||
}}
|
||||
sx={{
|
||||
[`& .${lineElementClasses.root}`]: {
|
||||
strokeWidth: 3,
|
||||
stroke: '#5559CE'
|
||||
},
|
||||
'& .MuiAreaElement-series-income': {
|
||||
fill: "url('#myGradient') !important",
|
||||
},
|
||||
'& .MuiChartsAxis-directionY .MuiChartsAxis-tickLabel': {
|
||||
fontSize: '14px !important',
|
||||
fontWeight: '400 !important',
|
||||
fill: '#858D9D'
|
||||
},
|
||||
'& .MuiChartsAxis-directionX .MuiChartsAxis-tickLabel': {
|
||||
fontSize: '10px !important',
|
||||
fontWeight: '400 !important',
|
||||
fill: '#7E7E7E'
|
||||
},
|
||||
'& .MuiChartsGrid-line': {
|
||||
strokeDasharray: 2
|
||||
}
|
||||
}}
|
||||
grid={{ horizontal: true }}
|
||||
className='!w-full !mt-[20px] !h-[250px]'
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="myGradient" x1="252.5" y1="0" x2="252.5" y2="145" gradientUnits="userSpaceOnUse">
|
||||
<stop stopColor="#3A6FF8" stopOpacity="0.1" />
|
||||
<stop offset="1" stopColor="#3A6FF8" stopOpacity="0.02" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</LineChart>
|
||||
)
|
||||
}
|
||||
|
||||
export default Chart
|
||||
@@ -0,0 +1,47 @@
|
||||
'use client'
|
||||
|
||||
import ArrowDownP from "@/components/icons/ArrowDownP";
|
||||
import { MenuItem, Select } from "@mui/material";
|
||||
|
||||
function Head() {
|
||||
|
||||
const list = [
|
||||
{ id: 1, text: 'سال 1402' },
|
||||
{ id: 2, text: 'سال 1403' },
|
||||
{ id: 3, text: 'سال 1404' },
|
||||
{ id: 4, text: 'سال 1405' },
|
||||
{ id: 5, text: 'سال 1406' },
|
||||
{ id: 6, text: 'سال 1407' }
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-[12px] p-[16px]">
|
||||
<p className="text-[#525252] text-[16px] font-bold">میزان درآمد</p>
|
||||
<Select
|
||||
defaultValue={1}
|
||||
className="!text-[#7E7E7E] !text-[12px] !font-normal !rounded-[4px]"
|
||||
IconComponent={e => <ArrowDownP data={e} />}
|
||||
sx={{
|
||||
'& .MuiSelect-select': {
|
||||
padding: '8px 6px 8px 8px !important',
|
||||
},
|
||||
'&:hover': {
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
border: '1px solid #D7D7D7 !important'
|
||||
}
|
||||
},
|
||||
'& .MuiOutlinedInput-notchedOutline': {
|
||||
borderColor: '#D7D7D7 !important',
|
||||
border: '1px solid #D7D7D7 !important'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{list.map((item, idx) => (
|
||||
<MenuItem value={item.id} key={idx}>{item.text}</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Head
|
||||
@@ -0,0 +1,13 @@
|
||||
import Chart from "./Chart"
|
||||
import Head from "./Head"
|
||||
|
||||
function AmountOfIncome({ data }) {
|
||||
return (
|
||||
<div className="rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
|
||||
<Head />
|
||||
<Chart data={data} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AmountOfIncome
|
||||
@@ -0,0 +1,15 @@
|
||||
import AmountOfIncome from "./amountOfIncome";
|
||||
import Cards from "./Cards";
|
||||
import List from "./list";
|
||||
|
||||
function PanelPage({ data }) {
|
||||
return (
|
||||
<div className="flex mt-[4px] flex-col gap-[20px]">
|
||||
<Cards data={data} />
|
||||
<List data={data} />
|
||||
<AmountOfIncome data={data} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PanelPage
|
||||
@@ -0,0 +1,70 @@
|
||||
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"
|
||||
|
||||
function Table({ data }) {
|
||||
|
||||
const tableHead = ['ردیف', 'نام پزشک', 'تخصص', 'تاریخ', 'ساعت', 'تعدد نوبت'];
|
||||
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}
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
export default Table
|
||||
@@ -0,0 +1,23 @@
|
||||
import { Button } from "@mui/material"
|
||||
import ArrowLeftP from "../../icons/ArrowLeftP"
|
||||
import Table from "./Table"
|
||||
|
||||
function List({ data }) {
|
||||
return (
|
||||
<div className="rounded-[8px] border overflow-hidden border-solid border-[#EFEFEF] bg-[#FFF]">
|
||||
<div className="flex items-center justify-between p-[16px]">
|
||||
<p className="text-[#525252] text-[16px] font-bold">لیست نوبت های پزشکان</p>
|
||||
<Button
|
||||
variant="text"
|
||||
className="!flex !items-center !justify-center !text-[#616161] !text-[14px] !font-normal !gap-[4px] !p-1"
|
||||
>
|
||||
مشاهده همه
|
||||
<ArrowLeftP />
|
||||
</Button>
|
||||
</div>
|
||||
<Table data={data} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default List
|
||||
Reference in New Issue
Block a user