change layout and router panel & design page dashboard and user account

2024-09-10 21:38:07 +03:30
parent dffdab7139
commit 62b355e52f
44 changed files with 370 additions and 97 deletions
@@ -1,6 +1,6 @@
-import CalendarTickGreenP from "../icons/CalendarTickGreenP"
-import CardOrangeP from "../icons/CardOrangeP"
-import PeopleBlueP from "../icons/PeopleBlueP"
+import CalendarTickGreenP from "../../icons/CalendarTickGreenP"
+import CardOrangeP from "../../icons/CardOrangeP"
+import PeopleBlueP from "../../icons/PeopleBlueP"

 function Cards({ data }) {

@@ -11,7 +11,7 @@ function Cards({ data }) {
  ];

  return (
-    <ul className="flex items-center justify-center gap-[32px] mx-[16px]">
+    <ul className="flex flex-wrap 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]"
@@ -23,7 +23,7 @@ function Chart({ data }) {
                disableTicks: true
            }]}
            margin={{
-                left: 90,
+                left: 80,
                right: 50,
                top: 10,
                bottom: 30,
@@ -48,6 +48,9 @@ function Chart({ data }) {
                },
                '& .MuiChartsGrid-line': {
                    strokeDasharray: 2
+                },
+                '& .MuiChartsAxis-directionY': {
+                    // transform: 'translateX(-50px) !important'
                }
            }}
            grid={{ horizontal: true }}
@@ -5,7 +5,9 @@ function AmountOfIncome({ data }) {
    return (
        <div className="rounded-[8px] border border-solid border-[#EFEFEF] bg-[#FFF]">
            <Head />
-            <Chart data={data} />
+            <div dir="ltr">
+                <Chart data={data} />
+            </div>
        </div>
    )
 }
@@ -2,9 +2,9 @@ import AmountOfIncome from "./amountOfIncome";
 import Cards from "./Cards";
 import List from "./list";

-function PanelPage({ data }) {
+function DashboardPage({ data }) {
    return (
-        <div className="flex mt-[4px] flex-col gap-[20px]">
+        <div className="flex mt-[4px] flex-col gap-[20px] opacity-page">
            <Cards data={data} />
            <List data={data} />
            <AmountOfIncome data={data} />
@@ -12,4 +12,4 @@ function PanelPage({ data }) {
    )
 }

-export default PanelPage
+export default DashboardPage
@@ -1,5 +1,5 @@
 import { Button } from "@mui/material"
-import ArrowLeftP from "../../icons/ArrowLeftP"
+import ArrowLeftP from "../../../icons/ArrowLeftP"
 import Table from "./Table"

 function List({ data }) {
@@ -0,0 +1,22 @@
+import ArrowLeftPU from "@/components/icons/ArrowLeftPU";
+import ProfileP from "@/components/icons/ProfileP";
+import { Button } from "@mui/material";
+
+function Head() {
+    return (
+        <div className="flex items-center 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]"
+            >
+                انتخاب تصویر
+                <ArrowLeftPU />
+            </Button>
+        </div>
+    )
+}
+
+export default Head
@@ -0,0 +1,10 @@
+function Content({ children, text }) {
+    return (
+        <div className="flex flex-col items-start justify-start gap-[16px]">
+            <p className="text-[#525252] text-[14px] font-medium">{text}</p>
+            {children}
+        </div>
+    )
+}
+
+export default Content
@@ -0,0 +1,94 @@
+'use client';
+
+import { useState } from "react";
+
+import Content from "./Content";
+import EditField from "@/app/component/EditField";
+import AutoCompleteSelect from "@/app/component/element/AutoCompleteSelect";
+import { bank, city, state } from "./listSelector";
+import AddLocationP from "@/components/icons/AddLocationP";
+import { Button } from "@mui/material";
+import ArrowLeftButtonP from "@/components/icons/ArrowLeftButtonP";
+
+function Form() {
+
+    const [data, setData] = useState({
+        name: { value: 'احسان احمدی', isEdit: false },
+        national_code: { value: '123456789', isEdit: false },
+        address: { value: '', isEdit: false },
+        phone: { value: '', isEdit: false },
+        account_number: { value: '', isEdit: false },
+    });
+    const [selected, setSelected] = useState({
+        state: '',
+        city: '',
+        bank: ''
+    });
+    const updateSelect = (event, name) => setSelected({ ...selected, [name]: event.target.innerText })
+
+    const changeData = (value, type, name) =>
+        setData({
+            ...data,
+            [name]: {
+                ...data[name],
+                [type]: value
+            }
+        });
+
+    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]">
+                <Content text='نام و نام خانوادگی'>
+                    <EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.name} name='name' />
+                </Content>
+                <Content text='کد ملی'>
+                    <EditField isTransparent={true} iconGray={true} changeData={changeData} data={data?.national_code} name='national_code' />
+                </Content>
+                <Content text='استان'>
+                    <AutoCompleteSelect
+                        updateData={updateSelect}
+                        label='انتخاب کنید...'
+                        name='state'
+                        list={state}
+                    />
+                </Content>
+                <Content text='شهر'>
+                    <AutoCompleteSelect
+                        updateData={updateSelect}
+                        label='انتخاب کنید...'
+                        name='city'
+                        list={city}
+                    />
+                </Content>
+                <Content text='آدرس'>
+                    <EditField icon={<AddLocationP />} isTransparent={true} placeholder='از روی نقشه انتخاب کنید...' iconGray={true} changeData={changeData} data={data?.address} name='address' />
+                </Content>
+                <Content text='شماره موبایل'>
+                    <EditField isTransparent={true} placeholder='شماره موبایل' iconGray={true} changeData={changeData} data={data?.phone} name='phone' />
+                </Content>
+                <Content text='شماره حساب'>
+                    <EditField isTransparent={true} placeholder='شماره حساب' iconGray={true} changeData={changeData} data={data?.account_number} name='account_number' />
+                </Content>
+                <Content text='شهر'>
+                    <AutoCompleteSelect
+                        updateData={updateSelect}
+                        label='انتخاب کنید...'
+                        name='bank'
+                        list={bank}
+                    />
+                </Content>
+            </ul>
+            <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"
+                >
+                    ثبت اطلاعات
+                    <ArrowLeftButtonP />
+                </Button>
+            </div>
+        </div>
+    )
+}
+
+export default Form
@@ -0,0 +1,20 @@
+export const state = [
+    { label: 'استان 1', id: 10 },
+    { label: 'استان 2', id: 20 },
+    { label: 'استان 3', id: 30 },
+    { label: 'استان 4', id: 40 }
+];
+
+export const city = [
+    { label: 'شهر 1', id: 10 },
+    { label: 'شهر 2', id: 20 },
+    { label: 'شهر 3', id: 30 },
+    { label: 'شهر 4', id: 40 }
+];
+
+export const bank = [
+    { label: 'بانک 1', id: 10 },
+    { label: 'بانک 2', id: 20 },
+    { label: 'بانک 3', id: 30 },
+    { label: 'بانک 4', id: 40 }
+];
@@ -0,0 +1,13 @@
+import Form from "./form";
+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]">
+            <Head />
+            <Form />
+        </div>
+    )
+}
+
+export default UserAccountPage