diff --git a/package-lock.json b/package-lock.json index 4cde930..df4228c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@emotion/styled": "^11.10.6", "@mui/icons-material": "^5.11.11", "@mui/material": "^5.11.13", + "@mui/x-data-grid": "^6.0.4", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -19,6 +20,7 @@ "@types/node": "^16.11.68", "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", + "axios": "^1.3.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -3352,6 +3354,31 @@ "react": "^17.0.0 || ^18.0.0" } }, + "node_modules/@mui/x-data-grid": { + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-6.0.4.tgz", + "integrity": "sha512-SPkxmPhVU0hJEun/Ju5do5CPVzJj4NHT5XEPpfvDyVhHR4p4ax/EiXbtmLBl5d+D/tA8uaLEK0PUQWBLC8JNQA==", + "dependencies": { + "@babel/runtime": "^7.21.0", + "@mui/utils": "^5.11.13", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "reselect": "^4.1.7" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@mui/material": "^5.4.1", + "@mui/system": "^5.4.1", + "react": "^17.0.2 || ^18.0.0", + "react-dom": "^17.0.2 || ^18.0.0" + } + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmjs.org/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -5353,6 +5380,29 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.6.tgz", + "integrity": "sha512-PEcdkk7JcdPiMDkvM4K6ZBRYq9keuVJsToxm2zQIM70Qqo2WHTdJZMXcG9X+RmRp2VPNUQC8W1RAGbgt6b1yMg==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/axobject-query": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz", @@ -14348,6 +14398,11 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/psl": { "version": "1.9.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz", @@ -15064,6 +15119,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, + "node_modules/reselect": { + "version": "4.1.7", + "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.7.tgz", + "integrity": "sha512-Zu1xbUt3/OPwsXL46hvOOoQrap2azE7ZQbokq61BQfiXvhewsKDwhMeZjTX9sX0nvw1t/U5Audyn1I9P/m9z0A==" + }, "node_modules/resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", diff --git a/package.json b/package.json index 538d7a0..1078eb3 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "@emotion/styled": "^11.10.6", "@mui/icons-material": "^5.11.11", "@mui/material": "^5.11.13", + "@mui/x-data-grid": "^6.0.4", "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -14,6 +15,7 @@ "@types/node": "^16.11.68", "@types/react": "^18.0.21", "@types/react-dom": "^18.0.6", + "axios": "^1.3.6", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", @@ -64,4 +66,4 @@ "webpack-cli": "^4.10.0", "webpack-dev-server": "^4.11.1" } -} +} \ No newline at end of file diff --git a/src/Components/KiryutinVlad/KiryutinPopup/KiryutinPopup.scss b/src/Components/KiryutinVlad/KiryutinPopup/KiryutinPopup.scss new file mode 100644 index 0000000..1dca794 --- /dev/null +++ b/src/Components/KiryutinVlad/KiryutinPopup/KiryutinPopup.scss @@ -0,0 +1,23 @@ +.kiryutin_popup { + width: 100%; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + + &__content { + background-color: white; + padding: 1em; + border-radius: 1em; + min-width: 400px; + + &__header { + display: flex; + justify-content: space-between; + align-items: center; + padding-bottom: .5em; + margin-bottom: .5em; + border-bottom: solid 1px #ccc; + } + } +} \ No newline at end of file diff --git a/src/Components/KiryutinVlad/KiryutinPopup/KiryutinPopup.tsx b/src/Components/KiryutinVlad/KiryutinPopup/KiryutinPopup.tsx new file mode 100644 index 0000000..1afe968 --- /dev/null +++ b/src/Components/KiryutinVlad/KiryutinPopup/KiryutinPopup.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import {Modal, Typography} from "@mui/material"; +import "./KiryutinPopup.scss" +import Button from "@mui/material/Button"; + +export type IPopup = { + open: boolean, + onClose: () => void, +} + +type Props = IPopup & { + children: any, + title: string +} + +const KiryutinPopup = ({open, onClose, children, title}: Props) => { + + return ( + onClose} + > + +
+
+
+ {title} +
+
+ +
+
+
+ {children} +
+
+ + ); +} + +export default KiryutinPopup; \ No newline at end of file diff --git a/src/Pages/Route/RouteComponent.tsx b/src/Pages/Route/RouteComponent.tsx index 4afd5e0..6112689 100644 --- a/src/Pages/Route/RouteComponent.tsx +++ b/src/Pages/Route/RouteComponent.tsx @@ -26,8 +26,12 @@ import { default as UdalovManufacturer } from "../StudentPage/UdalovKirill/Manuf import { default as UdalovProduct } from "../StudentPage/UdalovKirill/Product/Product"; import KiryutinVladPage from "../StudentPage/KiryutinVlad/KiryutinVladPage"; -import {default as KiryutinTest1} from "../StudentPage/KiryutinVlad/test1/Test1"; -import {default as KiryutinTest2} from "../StudentPage/KiryutinVlad/test2/Test2"; +import {default as KiryutinCategory} from '../StudentPage/KiryutinVlad/Category/CategoryPage'; +import {default as KiryutinClient} from "../StudentPage/KiryutinVlad/Client/ClientPage"; +import {default as KiryutinManufacturer} from "../StudentPage/KiryutinVlad/Manufacturer/ManufacturerPage"; +import {default as KiryutinOrder} from "../StudentPage/KiryutinVlad/Order/Order"; +import {default as KiryutinProduct} from "../StudentPage/KiryutinVlad/Product/ProductPage"; +import {default as KiryutinPurchase} from "../StudentPage/KiryutinVlad/Purchase/Purchase"; import OndyshevDmitryPage from "../StudentPage/OndyshevDmitry/OndyshevDmitryPage"; import {default as OndyshevCategory} from '../StudentPage/OndyshevDmitry/Category/CategoryPage'; @@ -96,8 +100,12 @@ const RouteComponent = () => { } > - } /> - } /> + } /> + } /> + } /> + } /> + } /> + } /> diff --git a/src/Pages/StudentPage/AgeevAlezander/AsideMenu/AsideMenu.tsx b/src/Pages/StudentPage/AgeevAlezander/AsideMenu/AsideMenu.tsx index 5c3efcf..7fbd0d9 100644 --- a/src/Pages/StudentPage/AgeevAlezander/AsideMenu/AsideMenu.tsx +++ b/src/Pages/StudentPage/AgeevAlezander/AsideMenu/AsideMenu.tsx @@ -35,7 +35,7 @@ const AsideMenu = () => { navigate('Test2')}> - + diff --git a/src/Pages/StudentPage/Bezlepkina/AsideMenu/AsideMenu.tsx b/src/Pages/StudentPage/Bezlepkina/AsideMenu/AsideMenu.tsx index 1d24081..514cb57 100644 --- a/src/Pages/StudentPage/Bezlepkina/AsideMenu/AsideMenu.tsx +++ b/src/Pages/StudentPage/Bezlepkina/AsideMenu/AsideMenu.tsx @@ -16,7 +16,7 @@ const AsideMenu = () => { navigate('Client')}> - + @@ -31,7 +31,7 @@ const AsideMenu = () => { navigate('Product')}> - + diff --git a/src/Pages/StudentPage/DyakovDanil/AsideMenu/AsideMenu.tsx b/src/Pages/StudentPage/DyakovDanil/AsideMenu/AsideMenu.tsx index fa2a17c..65028d0 100644 --- a/src/Pages/StudentPage/DyakovDanil/AsideMenu/AsideMenu.tsx +++ b/src/Pages/StudentPage/DyakovDanil/AsideMenu/AsideMenu.tsx @@ -16,7 +16,7 @@ const AsideMenu = () => { navigate('client')}> - + @@ -31,7 +31,7 @@ const AsideMenu = () => { navigate('product')}> - + diff --git a/src/Pages/StudentPage/KiryutinVlad/AsideMenu/AsideMenu.tsx b/src/Pages/StudentPage/KiryutinVlad/AsideMenu/AsideMenu.tsx index 2548752..5a6eb35 100644 --- a/src/Pages/StudentPage/KiryutinVlad/AsideMenu/AsideMenu.tsx +++ b/src/Pages/StudentPage/KiryutinVlad/AsideMenu/AsideMenu.tsx @@ -10,15 +10,31 @@ const AsideMenu = () => { return ( - navigate('Test1')}> - + navigate('Category')}> + - navigate('Test2')}> - + navigate('Client')}> + + + navigate('Manufacturer')}> + + + + + navigate('Order')}> + + + + + navigate('Product')}> + + + + ); }; diff --git a/src/Pages/StudentPage/KiryutinVlad/Category/CategoryPage.tsx b/src/Pages/StudentPage/KiryutinVlad/Category/CategoryPage.tsx new file mode 100644 index 0000000..b0d5fae --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Category/CategoryPage.tsx @@ -0,0 +1,139 @@ +import React, {useEffect, useState} from 'react'; +import {DataGrid, GridColDef} from '@mui/x-data-grid'; +import IconButton from '@mui/material/IconButton'; +import DeleteIcon from '@mui/icons-material/Delete'; +import EditIcon from '@mui/icons-material/Edit'; +import {Category} from "./models" +import Button from "@mui/material/Button"; +import CreateCategoryPopup from "./Popups/CreateCategoryPopup"; +import EditCategoryPopup from "./Popups/EditCategoryPopup"; +import {kiryutinAxios} from "../KiryutinVladPage"; + +const CategoryPage = () => { + + const [categoryList, setCategoryList] = useState([]) + + const getCategoriesFromHost = () => { + kiryutinAxios.get<{ items:Category[] }>('https://canstudy.ru/orderapi/category/list') + .then(res => { + setCategoryList(res.data.items) + }) + } + + const removeCategoryFromHost = (id:number) => { + kiryutinAxios.delete('https://canstudy.ru/orderapi/category/' + id) + .then(() => { + setCategoryList(prev => + prev.filter(el => el.id !== id)) + }) + } + + useEffect(() => { + getCategoriesFromHost(); + }, []) + + const onDeleteClick = (id:number) => { + removeCategoryFromHost(id) + } + + const onEditClick = (id:number) => { + const category = categoryList.find(el => el.id === id)!; + setEditCategory(category); + } + + const onCreate = (category:Category) => { + setCategoryList(prev => [...prev, category]) + } + + const onEdit = (category:Category) => { + setCategoryList(prev => { + const curCategory = prev.find(el => el.id === category.id) + + curCategory.name = category.name; + + return [...prev] + }) + } + + const columns: GridColDef[] = [ + { + field: 'id', + headerName: 'ID' + }, + { + field: 'name', + headerName: 'Name', + flex:1 + }, + { + field: '', + headerName: '', + renderCell: (e:any) => { + return
+ onEditClick(e.row.id)} aria-label="edit"> + + + onDeleteClick(e.row.id)} aria-label="delete"> + + +
+ } + } + ]; + + const [createPopupOpened, setCreatePopupOpened] = useState(false) + const [editCategory, setEditCategory] = useState(null) + + + return ( +
+ + { + createPopupOpened && + setCreatePopupOpened(false)} + onCreate={(newCategory) => onCreate(newCategory)} + /> + } + + { + editCategory !== null && + setEditCategory(null)} + category={editCategory} + onEdit={(editCategory) => onEdit(editCategory)} + /> + } + +
+

Категории товаров:

+ +
+
+ +
+
+ ); +}; +export default CategoryPage; \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/Category/Popups/CreateCategoryPopup.tsx b/src/Pages/StudentPage/KiryutinVlad/Category/Popups/CreateCategoryPopup.tsx new file mode 100644 index 0000000..823a175 --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Category/Popups/CreateCategoryPopup.tsx @@ -0,0 +1,52 @@ +import React, {useEffect, useState} from 'react'; +import KiryutinPopup, {IPopup} from "../../../../../Components/KiryutinVlad/KiryutinPopup/KiryutinPopup"; +import {Button, TextField} from "@mui/material"; +import {Category} from "../models"; +import axios from "axios"; +import {kiryutinAxios} from "../../KiryutinVladPage"; + +type Props = IPopup & { + onCreate: (newCategory:Category) => void; +} + +const CreateCategoryPopup = ({open, onClose, onCreate}:Props) => { + const createCategory = () => { + kiryutinAxios.post<{ item:Category }>('https://canstudy.ru/orderapi/category', + { + name:categoryName + }) + .then(res => { + onCreate(res.data.item) + }) + } + + const [categoryName, setCategoryName] = useState('') + + const onCreateClick = () => { + createCategory() + + onClose(); + } + + return ( + onClose()} title={"Создать категорию"}> +
+ setCategoryName(e.target.value)} + /> + +
+ + ) +} + +export default CreateCategoryPopup; \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/Category/Popups/EditCategoryPopup.tsx b/src/Pages/StudentPage/KiryutinVlad/Category/Popups/EditCategoryPopup.tsx new file mode 100644 index 0000000..9e6ffd2 --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Category/Popups/EditCategoryPopup.tsx @@ -0,0 +1,56 @@ +import React, {useState} from 'react'; +import KiryutinPopup, {IPopup} from "../../../../../Components/KiryutinVlad/KiryutinPopup/KiryutinPopup"; +import {Category} from "../models"; +import {Button, TextField} from "@mui/material"; +import {kiryutinAxios} from "../../KiryutinVladPage"; + +type Props = IPopup & { + onEdit: (newCategory:Category) => void; + category:Category; +} + +const EditCategoryPopup = ({open, onClose, category, onEdit}:Props) => { + // TODO: + const editCategory = () => { + kiryutinAxios.patch<{ item:Category }>('https://canstudy.ru/orderapi/category', + { + item: { + id:category.id, + name:category.name + } + }) + .then(res => { + onEdit(categoryEdit) + onClose() + }) + } + + + const [categoryEdit, setCategoryEdit] = useState(category) + + const onEditClick = () => { + editCategory(); + } + + return ( + onClose()} title={"Изменить категорию"}> +
+ setCategoryEdit(prev => ({...prev, name:e.target.value}))} + /> + +
+ + ) +} + +export default EditCategoryPopup; \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/Category/models.tsx b/src/Pages/StudentPage/KiryutinVlad/Category/models.tsx new file mode 100644 index 0000000..a893b01 --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Category/models.tsx @@ -0,0 +1,4 @@ +export type Category = { + id:number, + name:string +} \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/Client/ClientPage.tsx b/src/Pages/StudentPage/KiryutinVlad/Client/ClientPage.tsx new file mode 100644 index 0000000..a105143 --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Client/ClientPage.tsx @@ -0,0 +1,186 @@ +import {Button, IconButton} from '@mui/material'; +import {DataGrid, GridColDef} from '@mui/x-data-grid'; +import React, {useEffect, useState} from 'react'; +import {Client} from './models'; +import DeleteIcon from '@mui/icons-material/Delete'; +import EditIcon from '@mui/icons-material/Edit'; +import {kiryutinAxios} from '../KiryutinVladPage'; +import CreateClientPopup from "./Popups/CreateClientPopup"; +import EditClientPopup from "./Popups/EditClientPopup"; +import MaleIcon from '@mui/icons-material/Male'; +import FemaleIcon from '@mui/icons-material/Female'; + +const ClientPage = () => { + + const [ClientList, setClientList] = useState([]) + + const getClients = () => { + kiryutinAxios.get<{ items: Client[] }>('https://canstudy.ru/orderapi/Client/list') + .then(res => { + setClientList(res.data.items); + }) + } + + + useEffect(() => { + getClients(); + }, []) + + + const onDeleteClick = (id: number) => { + kiryutinAxios.delete(`https://canstudy.ru/orderapi/Client/${id}`) + .then(res => { + setClientList(prev => + prev.filter(el => el.id !== id) + ) + }) + } + + const onEditClick = (id: number) => { + const Client = ClientList.find(el => el.id === id)!; + setEditClient(Client) + } + + const onCreate = (Client: Client) => { + setClientList(prev => [...prev, Client]) + } + + const onEdit = (Client: Client) => { + setClientList(prev => { + const curClient = prev.find(el => el.id === Client.id)!; + + if (curClient) { + curClient.firstName = Client.firstName; + curClient.lastName = Client.lastName; + curClient.phoneNumber = Client.phoneNumber; + curClient.email = Client.email; + curClient.sex = Client.sex; + } + + return [...prev] + }) + } + + const columns: GridColDef[] = [ + { + field: 'id', + headerName: 'Id' + }, + { + field: 'sex', + headerName: 'Пол', + flex: 1, + renderCell:(e)=>{ + if (e.value?.toString() === "0") + return + + return + } + }, + { + field: 'firstName', + headerName: 'Имя', + flex: 1 + }, + { + field: 'lastName', + headerName: 'Фамилия', + flex: 1 + }, + { + field: 'email', + headerName: 'Почта', + flex: 1 + }, + { + field: 'phoneNumber', + headerName: 'Телефон', + flex: 1 + }, + { + field: '', + headerName: '', + renderCell: (e: any) => { + return
+ + onEditClick(e.row.id)} + > + + + + onDeleteClick(e.row.id)} + aria-label="delete" + > + + +
+ } + } + ] + + const [createPopupOpened, setCreatePopupOpened] = useState(false) + + const [editClient, setEditClient] = useState(null) + + return ( +
+ + {createPopupOpened && setCreatePopupOpened(false)} + onCreate={(newClient) => onCreate(newClient)} + />} + + + {editClient !== null && setEditClient(null)} + client={editClient} + onEdit={(editClient) => onEdit(editClient)} + />} + +
+ +

Клиенты

+ +
+ + +
+
+ + +
+ +
+
+ ); +}; + +export default ClientPage; \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/Client/Popups/CreateClientPopup.tsx b/src/Pages/StudentPage/KiryutinVlad/Client/Popups/CreateClientPopup.tsx new file mode 100644 index 0000000..a9b18f0 --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Client/Popups/CreateClientPopup.tsx @@ -0,0 +1,117 @@ +import React, {useEffect, useState} from 'react'; +import KiryutinPopup, {IPopup} from "../../../../../Components/KiryutinVlad/KiryutinPopup/KiryutinPopup"; +import {Button, FormControl, InputLabel, MenuItem, Select, TextField} from "@mui/material"; +import {Client} from "../models"; +import axios from 'axios'; +import { kiryutinAxios } from '../../KiryutinVladPage'; + +type Props = IPopup & { + onCreate:(newClient:Client)=>void; +} + +const CreateClientPopup = ({open, onClose, onCreate}: Props) => { + + const createClient = () => { + kiryutinAxios.post<{ item:Client }>('https://canstudy.ru/orderapi/Client', + { + ...client, + sex: parseInt(client.sex as any, 10) + }) + .then(res => { + onCreate(res.data.item) + }) + } + + + const [client, setClient] = useState({ + sex: 0, + firstName: "", + lastName: "", + email: "", + phoneNumber: "", + id: 0, + }) + + const onCreateClick = () =>{ + createClient(); + + onClose(); + } + + return ( + onClose()} + > +
+ + + Пол + + + + + setClient(prev=>({...prev, firstName:e.target.value}))} + /> + + setClient(prev=>({...prev, lastName:e.target.value}))} + /> + + setClient(prev=>({...prev, email:e.target.value}))} + /> + + setClient(prev=>({...prev, phoneNumber:e.target.value}))} + /> + +
+ +
+ +
+ + ); +}; + +export default CreateClientPopup; \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/Client/Popups/EditClientPopup.tsx b/src/Pages/StudentPage/KiryutinVlad/Client/Popups/EditClientPopup.tsx new file mode 100644 index 0000000..cbfcf24 --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Client/Popups/EditClientPopup.tsx @@ -0,0 +1,104 @@ +import React, {useState} from 'react'; +import KiryutinPopup, {IPopup} from "../../../../../Components/KiryutinVlad/KiryutinPopup/KiryutinPopup"; +import {Button, FormControl, InputLabel, MenuItem, Select, TextField} from "@mui/material"; +import {Client} from "../models"; +import {kiryutinAxios} from "../../KiryutinVladPage"; + +type Props = IPopup & { + onEdit: (newClient: Client) => void; + client: Client +} + +const EditClientPopup = ({open, onClose, client:clientEdit, onEdit}: Props) => { + + const [client, setClient] = useState(clientEdit) + + const onEditClick = () => { + + kiryutinAxios.patch<{ item:Client }>('https://canstudy.ru/orderapi/Client', + { + item:{ + ...client + } + }) + .then(res => { + onEdit(res.data.item) + onClose(); + }) + } + + return ( + onClose()} + > +
+ + Пол + + + + + setClient(prev=>({...prev, firstName:e.target.value}))} + /> + + setClient(prev=>({...prev, lastName:e.target.value}))} + /> + + setClient(prev=>({...prev, email:e.target.value}))} + /> + + setClient(prev=>({...prev, phoneNumber:e.target.value}))} + /> + +
+ +
+ +
+ + ); +}; + +export default EditClientPopup; \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/Client/models.tsx b/src/Pages/StudentPage/KiryutinVlad/Client/models.tsx new file mode 100644 index 0000000..32338b0 --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Client/models.tsx @@ -0,0 +1,8 @@ +export type Client = { + id: number, + sex: number, + firstName: string, + lastName: string, + email: string, + phoneNumber: string +} \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/KiryutinVladPage.tsx b/src/Pages/StudentPage/KiryutinVlad/KiryutinVladPage.tsx index 236f803..49a259b 100644 --- a/src/Pages/StudentPage/KiryutinVlad/KiryutinVladPage.tsx +++ b/src/Pages/StudentPage/KiryutinVlad/KiryutinVladPage.tsx @@ -1,22 +1,37 @@ -import React from 'react'; +import React, {useEffect, useState} from 'react'; import Header from "../../../Components/Header/Header"; import ContentBlock from "../../../Components/ContentBlock/ContentBlock"; import {Button, TextField} from "@mui/material"; import AsideMenu from "./AsideMenu/AsideMenu"; import {Outlet} from "react-router-dom"; +import axios from "axios"; + +export const kiryutinAxios = axios.create({}) const KiryutinVladPage = () => { + + const [authToken, setAuthToken] = useState(''); + + const doLogin = () => { + axios.post<{authToken:string}>('https://canstudy.ru/orderapi/user/login', { + identifier: "C27A77F4-ED81-4B4A-8F54-550DB6ADC16F" + }) + .then(res => { + kiryutinAxios.defaults.headers.common['Authorization'] = "Bearer " + res.data.authToken + }) + } + + useEffect(() => { + doLogin() + }, []) + return (
- - - Vlados -
+ + - -
); }; diff --git a/src/Pages/StudentPage/KiryutinVlad/Manufacturer/ManufacturerPage.tsx b/src/Pages/StudentPage/KiryutinVlad/Manufacturer/ManufacturerPage.tsx new file mode 100644 index 0000000..0485f89 --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Manufacturer/ManufacturerPage.tsx @@ -0,0 +1,153 @@ +import React, {useEffect, useState} from 'react'; +import {DataGrid, GridColDef} from '@mui/x-data-grid'; +import IconButton from '@mui/material/IconButton'; +import DeleteIcon from '@mui/icons-material/Delete'; +import EditIcon from '@mui/icons-material/Edit'; +import {Manufacturer} from "./model" +import Button from "@mui/material/Button"; +import axios from "axios"; +import {kiryutinAxios} from "../KiryutinVladPage"; +import CreateManufacturerPopup from "./Popups/CreateManufacturerPopup"; +import EditManufacturerPopup from "./Popups/EditManufacturerPopup"; + +const ManufacturerPage = () => { + + const [ManufacturerList, setManufacturerList] = useState([]) + + const getManufacturerFromHost = () => { + kiryutinAxios.get<{ items:Manufacturer[] }>('https://canstudy.ru/orderapi/manufacturer/list') + .then(res => { + setManufacturerList(res.data.items) + }) + } + + const removeManufacturerFromHost = (id:number) => { + kiryutinAxios.delete('https://canstudy.ru/orderapi/manufacturer/' + id) + .then(() => { + setManufacturerList(prev => + prev.filter(el => el.id !== id)) + }) + } + + useEffect(() => { + getManufacturerFromHost(); + }, []) + + const onDeleteClick = (id:number) => { + removeManufacturerFromHost(id) + } + + const onEditClick = (id:number) => { + const Manufacture = ManufacturerList.find(el => el.id === id)!; + setEditManufacturer(Manufacture); + } + + const onCreate = (Manufacturer:Manufacturer) => { + setManufacturerList(prev => [...prev, Manufacturer]) + } + + const onEdit = (Manufacturer:Manufacturer) => { + setManufacturerList(prev => { + const curManufacturer = prev.find(el => el.id === Manufacturer.id) + + curManufacturer.name = Manufacturer.name; + curManufacturer.city = Manufacturer.city; + curManufacturer.country = Manufacturer.country; + + return [...prev] + }) + } + + const columns: GridColDef[] = [ + { + field: 'id', + headerName: 'ID' + }, + { + field: 'name', + headerName: 'Name', + flex:1 + }, + { + field: 'city', + headerName: 'City', + flex:1 + }, + { + field: 'country', + headerName: 'Country', + flex:1 + }, + { + field: '', + headerName: '', + renderCell: (e:any) => { + return
+ onEditClick(e.row.id)} aria-label="edit"> + + + onDeleteClick(e.row.id)} aria-label="delete"> + + +
+ } + } + ]; + + const [createPopupOpened, setCreatePopupOpened] = useState(false) + const [editManufacturer, setEditManufacturer] = useState(null) + + + return ( +
+ + { + createPopupOpened && + setCreatePopupOpened(false)} + onCreate={(newManufacturer) => onCreate(newManufacturer)} + /> + } + + { + editManufacturer !== null && + setEditManufacturer(null)} + manufacturer={editManufacturer} + onEdit={(editManufacturer) => onEdit(editManufacturer)} + /> + } + +
+

Производители товаров:

+ +
+
+ +
+
+ ); +}; + +export default ManufacturerPage; \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/Manufacturer/Popups/CreateManufacturerPopup.tsx b/src/Pages/StudentPage/KiryutinVlad/Manufacturer/Popups/CreateManufacturerPopup.tsx new file mode 100644 index 0000000..8b5b795 --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Manufacturer/Popups/CreateManufacturerPopup.tsx @@ -0,0 +1,76 @@ +import React, {useEffect, useState} from 'react'; +import KiryutinPopup, {IPopup} from "../../../../../Components/KiryutinVlad/KiryutinPopup/KiryutinPopup"; +import {Button, TextField} from "@mui/material"; +import {Manufacturer} from "../model"; +import {kiryutinAxios} from "../../KiryutinVladPage"; +import {applyInitialState} from "@mui/x-data-grid/hooks/features/columns/gridColumnsUtils"; + +type Props = IPopup & { + onCreate: (newManufacturer:Manufacturer) => void; +} + +const CreateManufacturerPopup = ({open, onClose, onCreate}:Props) => { + const createManufacturer = () => { + kiryutinAxios.post<{ item:Manufacturer }>('https://canstudy.ru/orderapi/manufacturer', + { + name:manufacturer.name, + city:manufacturer.city, + country:manufacturer.country + }) + .then(res => { + onCreate(res.data.item) + }) + } + + const [manufacturer, setManufacturer] = useState({ + id:0, + name:"", + country:"", + city:"" + }) + + + const onCreateClick = () => { + createManufacturer() + + onClose(); + } + + return ( + onClose()} title={"Создать производителя"}> +
+ setManufacturer(prev => ({...prev, name: e.target.value}))} + /> + setManufacturer(prev => ({...prev, city: e.target.value}))} + /> + setManufacturer(prev => ({...prev, country: e.target.value}))} + /> + +
+ + ) +} + +export default CreateManufacturerPopup; \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/Manufacturer/Popups/EditManufacturerPopup.tsx b/src/Pages/StudentPage/KiryutinVlad/Manufacturer/Popups/EditManufacturerPopup.tsx new file mode 100644 index 0000000..2a05c2b --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Manufacturer/Popups/EditManufacturerPopup.tsx @@ -0,0 +1,76 @@ +import React, {useState} from 'react'; +import KiryutinPopup, {IPopup} from "../../../../../Components/KiryutinVlad/KiryutinPopup/KiryutinPopup"; +import {Manufacturer} from "../model"; +import {Button, TextField} from "@mui/material"; +import {kiryutinAxios} from "../../KiryutinVladPage"; + +type Props = IPopup & { + onEdit: (newManufacturer:Manufacturer) => void; + manufacturer:Manufacturer; +} + +const EditManufacturerPopup = ({open, onClose, manufacturer, onEdit}:Props) => { + + const editManufacturer = () => { + kiryutinAxios.patch<{ item:Manufacturer }>('https://canstudy.ru/orderapi/manufacturer', + { + item: { + id:manufacturer.id, + name:manufacturer.name, + city:manufacturer.city, + country:manufacturer.country + } + }) + .then(res => { + onEdit(manufacturerEdit) + onClose(); + }) + } + + const [manufacturerEdit, setManufacturerEdit] = useState(manufacturer) + + const onEditClick = () => { + editManufacturer(); + } + + return ( + onClose()} title={"Изменить поставщика"}> +
+ setManufacturerEdit(prev => ({...prev, name:e.target.value}))} + /> + + setManufacturerEdit(prev => ({...prev, city:e.target.value}))} + /> + + setManufacturerEdit(prev => ({...prev, country:e.target.value}))} + /> + + +
+ + ) +} + +export default EditManufacturerPopup; \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/Manufacturer/model.ts b/src/Pages/StudentPage/KiryutinVlad/Manufacturer/model.ts new file mode 100644 index 0000000..0766be5 --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Manufacturer/model.ts @@ -0,0 +1,6 @@ +export type Manufacturer = { + id: number, + name: string, + city: string, + country: string +} \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/Order/Order.tsx b/src/Pages/StudentPage/KiryutinVlad/Order/Order.tsx new file mode 100644 index 0000000..99ee8d3 --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Order/Order.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + + const Order = () => { + return ( +
+ Order page +
+ ); + }; + + export default Order; \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/Product/Popups/CreateProductPopup.tsx b/src/Pages/StudentPage/KiryutinVlad/Product/Popups/CreateProductPopup.tsx new file mode 100644 index 0000000..a1de7db --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Product/Popups/CreateProductPopup.tsx @@ -0,0 +1,156 @@ +import React, {useEffect, useState} from 'react'; +import KiryutinPopup, {IPopup} from "../../../../../Components/KiryutinVlad/KiryutinPopup/KiryutinPopup"; +import {Button, FormControl, InputLabel, MenuItem, Select, TextField} from "@mui/material"; +import {Product} from "../models"; +import {kiryutinAxios} from '../../KiryutinVladPage'; +import {Category} from "../../Category/models"; +import {Manufacturer} from "../../Manufacturer/model"; + +type Props = IPopup & { + onCreate: (newProduct: Product) => void; +} + +const CreateProductPopup = ({open, onClose, onCreate}: Props) => { + + const createProduct = () => { + kiryutinAxios.post<{ item: Product }>('https://canstudy.ru/orderapi/Product', + { + ...Product + }) + .then(res => { + onCreate(res.data.item) + }) + } + + const [categoryList, setCategoryList] = useState([]) + + const [manufactureList, setManufactureList] = useState([]) + + const getCategories = () => { + kiryutinAxios.get<{ items: Category[] }>('https://canstudy.ru/orderapi/category/list') + .then(res => { + setCategoryList(res.data.items); + }) + } + + const getManufacturies = () => { + kiryutinAxios.get<{ items: Manufacturer[] }>('https://canstudy.ru/orderapi/manufacturer/list') + .then(res => { + setManufactureList(res.data.items); + }) + } + + useEffect(() => { + getCategories(); + getManufacturies(); + }, []) + + const [Product, setProduct] = useState({ + categoryId: 0, + categoryName: "", + cost: 0, + description: "", + id: 0, + manufacturerId: 0, + manufacturerName: "", + name: "" + }) + + const onCreateClick = () => { + createProduct(); + + onClose(); + } + + console.log(Product) + + return ( + onClose()} + > +
+ + + + + setProduct(prev => ({...prev, name: e.target.value}))} + /> + + setProduct(prev => ({...prev, description: e.target.value}))} + /> + + + setProduct(prev => ({...prev, cost: e.target.value as any}))} + /> + + + Категория + + + + + Производитель + + + + +
+ +
+ +
+ + ); +}; + +export default CreateProductPopup; \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/Product/Popups/EditProductPopup.tsx b/src/Pages/StudentPage/KiryutinVlad/Product/Popups/EditProductPopup.tsx new file mode 100644 index 0000000..c7b6fa9 --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Product/Popups/EditProductPopup.tsx @@ -0,0 +1,139 @@ +import React, {useEffect, useState} from 'react'; +import KiryutinPopup, {IPopup} from "../../../../../Components/KiryutinVlad/KiryutinPopup/KiryutinPopup"; +import {Button, FormControl, InputLabel, MenuItem, Select, TextField} from "@mui/material"; +import {Product} from "../models"; +import {kiryutinAxios} from "../../KiryutinVladPage"; +import {Category} from "../../Category/models"; +import {Manufacturer} from "../../Manufacturer/model"; + +type Props = IPopup & { + onEdit: (newProduct: Product) => void; + Product: Product +} + +const EditProductPopup = ({open, onClose, Product:ProductEdit, onEdit}: Props) => { + + const [Product, setProduct] = useState(ProductEdit) + + const onEditClick = () => { + + kiryutinAxios.patch<{ item:Product }>('https://canstudy.ru/orderapi/Product', + { + item:{ + ...Product + } + }) + .then(res => { + onEdit(res.data.item) + onClose(); + }) + } + + const [categoryList, setCategoryList] = useState([]) + + const [manufactureList, setManufactureList] = useState([]) + + const getCategories = () => { + kiryutinAxios.get<{ items: Category[] }>('https://canstudy.ru/orderapi/category/list') + .then(res => { + setCategoryList(res.data.items); + }) + } + + const getManufacturies = () => { + kiryutinAxios.get<{ items: Manufacturer[] }>('https://canstudy.ru/orderapi/manufacturer/list') + .then(res => { + setManufactureList(res.data.items); + }) + } + + useEffect(() => { + getCategories(); + getManufacturies(); + }, []) + + + return ( + onClose()} + > +
+ setProduct(prev => ({...prev, name: e.target.value}))} + /> + + setProduct(prev => ({...prev, description: e.target.value}))} + /> + + + setProduct(prev => ({...prev, cost: e.target.value as any}))} + /> + + + Категория + + + + + Производитель + + + +
+ +
+ +
+ + ); +}; + +export default EditProductPopup; \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/Product/ProductPage.tsx b/src/Pages/StudentPage/KiryutinVlad/Product/ProductPage.tsx new file mode 100644 index 0000000..d44b4cf --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Product/ProductPage.tsx @@ -0,0 +1,179 @@ +import {Button, IconButton} from '@mui/material'; +import {DataGrid, GridColDef} from '@mui/x-data-grid'; +import React, {useEffect, useState} from 'react'; +import {Product} from './models'; +import DeleteIcon from '@mui/icons-material/Delete'; +import EditIcon from '@mui/icons-material/Edit'; +import {kiryutinAxios} from '../KiryutinVladPage'; +import CreateProductPopup from "./Popups/CreateProductPopup"; +import EditProductPopup from "./Popups/EditProductPopup"; +//import CreateProductPopup from "./Popups/CreateProductPopup"; +//import EditProductPopup from "./Popups/EditProductPopup"; + + +const ProductPage = () => { + + const [ProductList, setProductList] = useState([]) + + const getProducts = () => { + kiryutinAxios.get<{ items: Product[] }>('https://canstudy.ru/orderapi/Product/list') + .then(res => { + setProductList(res.data.items); + }) + } + + + useEffect(() => { + getProducts(); + }, []) + + + const onDeleteClick = (id: number) => { + kiryutinAxios.delete(`https://canstudy.ru/orderapi/Product/${id}`) + .then(res => { + setProductList(prev => + prev.filter(el => el.id !== id) + ) + }) + } + + const onEditClick = (id: number) => { + const Product = ProductList.find(el => el.id === id)!; + setEditProduct(Product) + } + + const onCreate = (Product: Product) => { + setProductList(prev => [...prev, Product]) + } + + const onEdit = (Product: Product) => { + setProductList(prev => { + + const curProduct = prev.find(el => el.id === Product.id)!; + + if (curProduct) { + curProduct.name = Product.name; + curProduct.description = Product.description; + curProduct.cost = Product.cost; + curProduct.manufacturerId = Product.manufacturerId; + curProduct.manufacturerName = Product.manufacturerName; + curProduct.categoryId = Product.categoryId; + curProduct.categoryName = Product.categoryName; + } + + return [...prev] + }) + } + + const columns: GridColDef[] = [ + { + field: 'id', + headerName: 'Id' + }, + { + field: 'name', + headerName: 'Название', + flex: 1 + }, + { + field: 'cost', + headerName: 'Цена', + flex: 1 + }, + { + field: 'categoryName', + headerName: 'Категория', + flex: 1 + }, + { + field: 'manufacturerName', + headerName: 'Производитель', + flex: 1 + }, + { + field: '', + headerName: '', + renderCell: (e: any) => { + return
+ + onEditClick(e.row.id)} + > + + + + onDeleteClick(e.row.id)} + aria-label="delete" + > + + +
+ } + } + ] + + const [createPopupOpened, setCreatePopupOpened] = useState(false) + + const [editProduct, setEditProduct] = useState(null) + + return ( +
+ + {createPopupOpened && setCreatePopupOpened(false)} + onCreate={(newProduct) => onCreate(newProduct)} + />} + + + {editProduct !== null && setEditProduct(null)} + Product={editProduct} + onEdit={(editProduct) => onEdit(editProduct)} + />} + +
+ +

Товар

+ +
+ + +
+
+ + +
+ +
+
+ ); +}; + +export default ProductPage; \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/Product/models.tsx b/src/Pages/StudentPage/KiryutinVlad/Product/models.tsx new file mode 100644 index 0000000..7167480 --- /dev/null +++ b/src/Pages/StudentPage/KiryutinVlad/Product/models.tsx @@ -0,0 +1,10 @@ +export type Product = { + id: number, + categoryId: number, + manufacturerId: number, + name: string, + cost: number, + description: string, + categoryName: string, + manufacturerName: string +} \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/test1/Test1.jsx b/src/Pages/StudentPage/KiryutinVlad/Purchase/Purchase.tsx similarity index 51% rename from src/Pages/StudentPage/KiryutinVlad/test1/Test1.jsx rename to src/Pages/StudentPage/KiryutinVlad/Purchase/Purchase.tsx index 11dcf58..16a2d90 100644 --- a/src/Pages/StudentPage/KiryutinVlad/test1/Test1.jsx +++ b/src/Pages/StudentPage/KiryutinVlad/Purchase/Purchase.tsx @@ -1,11 +1,11 @@ import React from 'react'; -const Test1 = () => { +const Purchase = () => { return (
- + Purchase page
); }; -export default Test1; \ No newline at end of file +export default Purchase; \ No newline at end of file diff --git a/src/Pages/StudentPage/KiryutinVlad/test2/Test2.jsx b/src/Pages/StudentPage/KiryutinVlad/test2/Test2.jsx deleted file mode 100644 index fbe485b..0000000 --- a/src/Pages/StudentPage/KiryutinVlad/test2/Test2.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -const Test2 = () => { - return ( -
- -
- ); -}; - -export default Test2; \ No newline at end of file diff --git a/src/Pages/StudentPage/KryuchkovNick/AsideMenu/AsideMenu.tsx b/src/Pages/StudentPage/KryuchkovNick/AsideMenu/AsideMenu.tsx index 72a40ef..d18ef06 100644 --- a/src/Pages/StudentPage/KryuchkovNick/AsideMenu/AsideMenu.tsx +++ b/src/Pages/StudentPage/KryuchkovNick/AsideMenu/AsideMenu.tsx @@ -24,13 +24,13 @@ const AsideMenu = () => { navigate('client')}> - + navigate('product')}> - + diff --git a/src/Pages/StudentPage/OndyshevDmitry/AsideMenu/AsideMenu.tsx b/src/Pages/StudentPage/OndyshevDmitry/AsideMenu/AsideMenu.tsx index 84f6184..30e9126 100644 --- a/src/Pages/StudentPage/OndyshevDmitry/AsideMenu/AsideMenu.tsx +++ b/src/Pages/StudentPage/OndyshevDmitry/AsideMenu/AsideMenu.tsx @@ -19,7 +19,7 @@ const AsideMenu = () => { navigate('Client')}> - + @@ -34,7 +34,7 @@ const AsideMenu = () => { navigate('Product')}> - + diff --git a/src/Pages/StudentPage/PepelevSergey/AsideMenu/AsideMenu.tsx b/src/Pages/StudentPage/PepelevSergey/AsideMenu/AsideMenu.tsx index 1e76b48..03cd8d6 100644 --- a/src/Pages/StudentPage/PepelevSergey/AsideMenu/AsideMenu.tsx +++ b/src/Pages/StudentPage/PepelevSergey/AsideMenu/AsideMenu.tsx @@ -14,7 +14,7 @@ const AsideMenu = () => { navigate('Client')}> - + diff --git a/src/Pages/StudentPage/ShchegolevaEkaterina/AsideMenu/AsideMenu.tsx b/src/Pages/StudentPage/ShchegolevaEkaterina/AsideMenu/AsideMenu.tsx index ce3749d..fe63631 100644 --- a/src/Pages/StudentPage/ShchegolevaEkaterina/AsideMenu/AsideMenu.tsx +++ b/src/Pages/StudentPage/ShchegolevaEkaterina/AsideMenu/AsideMenu.tsx @@ -18,7 +18,7 @@ const AsideMenu = () => { navigate('Client')}> - + @@ -36,7 +36,7 @@ const AsideMenu = () => { navigate('Product')}> - + diff --git a/src/Pages/StudentPage/TrubnikovTimur/AsideMenu/AsideMenu.tsx b/src/Pages/StudentPage/TrubnikovTimur/AsideMenu/AsideMenu.tsx index f7b027b..29a317a 100644 --- a/src/Pages/StudentPage/TrubnikovTimur/AsideMenu/AsideMenu.tsx +++ b/src/Pages/StudentPage/TrubnikovTimur/AsideMenu/AsideMenu.tsx @@ -17,7 +17,7 @@ const AsideMenu = () => { navigate('test2')}> - + diff --git a/src/Pages/StudentPage/UdalovKirill/AsideMenu/AsideMenu.tsx b/src/Pages/StudentPage/UdalovKirill/AsideMenu/AsideMenu.tsx index aeefa23..38b79fc 100644 --- a/src/Pages/StudentPage/UdalovKirill/AsideMenu/AsideMenu.tsx +++ b/src/Pages/StudentPage/UdalovKirill/AsideMenu/AsideMenu.tsx @@ -18,7 +18,7 @@ const AsideMenu = () => { navigate('client')}> - + @@ -36,7 +36,7 @@ const AsideMenu = () => { navigate('Product')}> - + diff --git a/src/Pages/StudentPage/UsanovaDarya/AsideMenu/AsideMenu.tsx b/src/Pages/StudentPage/UsanovaDarya/AsideMenu/AsideMenu.tsx index 9ffd293..fe3dbd9 100644 --- a/src/Pages/StudentPage/UsanovaDarya/AsideMenu/AsideMenu.tsx +++ b/src/Pages/StudentPage/UsanovaDarya/AsideMenu/AsideMenu.tsx @@ -26,7 +26,7 @@ const AsideMenu = () => { navigate('Client')}> - +