design sidebar & head layout & page dashboard

2024-09-10 02:00:41 +03:30
parent 60749d3b8c
commit dffdab7139
41 changed files with 1350 additions and 170 deletions
@@ -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