lab5

.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+    // Используйте IntelliSense, чтобы узнать о возможных атрибутах.
+    // Наведите указатель мыши, чтобы просмотреть описания существующих атрибутов.
+    // Для получения дополнительной информации посетите: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Запустить Chrome на localhost",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

IP/.eslintrc.cjs

@@ -2,13 +2,13 @@ module.exports = {
   root: true,
   env: { browser: true, es2020: true },
   extends: [
-    'airbnb-base',
+    'eslint:recommended',
     'plugin:react/recommended',
     'plugin:react/jsx-runtime',
     'plugin:react-hooks/recommended',
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parserOptions: { ecmaVersion: 12, sourceType: 'module' },
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
   settings: { react: { version: '18.2' } },
   plugins: ['react-refresh'],
   rules: {
@@ -16,9 +16,5 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
-    'indent': 'off',
-    'no-console': 'off',
-    'arrow-body-style': 'off',
-    'implicit-arrow-linebreak': 'off',
   },
 }

IP/jsconfig.json

@@ -5,7 +5,8 @@
         "target": "ES2020",
         "jsx": "react",
         "strictNullChecks": true,
-        "strictFunctionTypes": true
+        "strictFunctionTypes": true,
+        "sourceMap": true
     },
     "exclude": [
         "node_modules",

IP/json-server.json

@@ -0,0 +1,5 @@
+{
+    "static": "./node_modules/json-server/public",
+    "port": 8081,
+    "watch": "true"
+}

IP/node_modules/.vite/deps/_metadata.json

@@ -1,71 +1,89 @@
 {
-  "hash": "bfab4e7d",
+  "hash": "aedcd79f",
-  "browserHash": "478b49c2",
+  "browserHash": "c983438f",
   "optimized": {
     "react": {
       "src": "../../react/index.js",
       "file": "react.js",
-      "fileHash": "dcd20f42",
+      "fileHash": "2a3c6d21",
       "needsInterop": true
     },
     "react/jsx-dev-runtime": {
       "src": "../../react/jsx-dev-runtime.js",
       "file": "react_jsx-dev-runtime.js",
-      "fileHash": "9c93a6e1",
+      "fileHash": "671aca39",
       "needsInterop": true
     },
     "react/jsx-runtime": {
       "src": "../../react/jsx-runtime.js",
       "file": "react_jsx-runtime.js",
-      "fileHash": "fbd61cc2",
+      "fileHash": "74776e99",
       "needsInterop": true
     },
-    "prop-types": {
-      "src": "../../prop-types/index.js",
-      "file": "prop-types.js",
-      "fileHash": "ab711fc5",
-      "needsInterop": true
-    },
-    "react-bootstrap": {
-      "src": "../../react-bootstrap/esm/index.js",
-      "file": "react-bootstrap.js",
-      "fileHash": "775e07cd",
-      "needsInterop": false
-    },
-    "react-bootstrap-icons": {
-      "src": "../../react-bootstrap-icons/dist/index.js",
-      "file": "react-bootstrap-icons.js",
-      "fileHash": "527c3092",
-      "needsInterop": false
-    },
     "react-dom/client": {
       "src": "../../react-dom/client.js",
       "file": "react-dom_client.js",
-      "fileHash": "d77b6244",
+      "fileHash": "797e25c3",
       "needsInterop": true
     },
     "react-router-dom": {
       "src": "../../react-router-dom/dist/index.js",
       "file": "react-router-dom.js",
-      "fileHash": "9111310b",
+      "fileHash": "d7f5780c",
       "needsInterop": false
+    },
+    "prop-types": {
+      "src": "../../prop-types/index.js",
+      "file": "prop-types.js",
+      "fileHash": "ec4a0d2d",
+      "needsInterop": true
+    },
+    "react-bootstrap": {
+      "src": "../../react-bootstrap/esm/index.js",
+      "file": "react-bootstrap.js",
+      "fileHash": "6af79657",
+      "needsInterop": false
+    },
+    "react-hot-toast": {
+      "src": "../../react-hot-toast/dist/index.mjs",
+      "file": "react-hot-toast.js",
+      "fileHash": "a559165f",
+      "needsInterop": false
+    },
+    "react-bootstrap-icons": {
+      "src": "../../react-bootstrap-icons/dist/index.js",
+      "file": "react-bootstrap-icons.js",
+      "fileHash": "06fc89df",
+      "needsInterop": false
+    },
+    "axios": {
+      "src": "../../axios/index.js",
+      "file": "axios.js",
+      "fileHash": "12ab79c8",
+      "needsInterop": false
+    },
+    "react-dom": {
+      "src": "../../react-dom/index.js",
+      "file": "react-dom.js",
+      "fileHash": "fffca44b",
+      "needsInterop": true
     }
   },
   "chunks": {
-    "chunk-5SWDWV4L": {
+    "chunk-UFCMWVQY": {
-      "file": "chunk-5SWDWV4L.js"
+      "file": "chunk-UFCMWVQY.js"
     },
-    "chunk-OCHDJWGW": {
+    "chunk-2VGUONL3": {
-      "file": "chunk-OCHDJWGW.js"
+      "file": "chunk-2VGUONL3.js"
     },
-    "chunk-A2ELGX47": {
+    "chunk-ZT4DMYUS": {
-      "file": "chunk-A2ELGX47.js"
+      "file": "chunk-ZT4DMYUS.js"
     },
-    "chunk-ZVMIEU5R": {
+    "chunk-RDZYK52F": {
-      "file": "chunk-ZVMIEU5R.js"
+      "file": "chunk-RDZYK52F.js"
     },
-    "chunk-UXIASGQL": {
+    "chunk-5WWUZCGV": {
-      "file": "chunk-UXIASGQL.js"
+      "file": "chunk-5WWUZCGV.js"
     }
   }
 }

IP/package.json

@@ -4,15 +4,21 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "rest": "json-server data.json",
+    "vite": "vite",
+    "dev": "npm-run-all --parallel rest vite",
+    "prod": "npm-run-all lint 'vite build' --parallel rest 'vite preview'"
   },
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",
+    "react-hot-toast": "^2.4.1",
+    "axios": "^1.6.1",
+    "npm": "^10.2.5",
+    "install": "^0.13.0",
+    "lorem-ipsum": "^2.0.8",
     "bootstrap": "^5.3.2",
     "react-bootstrap": "^2.9.1",
     "react-bootstrap-icons": "^1.10.3",
@@ -24,9 +30,12 @@
     "@vitejs/plugin-react": "^4.0.3",
     "eslint": "^8.45.0",
     "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
+    "json-server": "^0.17.4",
+    "npm-run-all": "^4.1.5",
     "vite": "^4.4.9"
   }
 }

IP/src/App.jsx

@@ -1,19 +1,25 @@
+
 import PropTypes from 'prop-types';
 import { Container } from 'react-bootstrap';
+import { Toaster } from 'react-hot-toast';
 import { Outlet } from 'react-router-dom';
-import './App.css';
+import { CartProvider } from './components/cart/CartContext.jsx';
 import Footer from './components/footer/Footer.jsx';
 import Navigation from './components/navigation/Navigation.jsx';
+import { UserProvider } from './components/users/UserContext.jsx';
 
 const App = ({ routes }) => {
   return (
-    <>
+    <UserProvider>
+    <CartProvider>
       <Navigation routes={routes}></Navigation>
-      <Container className='p-2' as="main" fluid>
+      <Container className='p-2' as='main' fluid>
         <Outlet />
       </Container>
       <Footer />
-    </>
+      <Toaster position='top-center' reverseOrder={true} />
+    </CartProvider>
+    </UserProvider>
   );
 };
 

IP/src/components/api/ApiClient.js

@@ -0,0 +1,40 @@
+import axios from 'axios';
+import toast from 'react-hot-toast';
+
+export class HttpError extends Error {
+    constructor(message = '') {
+        super(message);
+        this.name = 'HttpError';
+        Object.setPrototypeOf(this, new.target.prototype);
+        toast.error(message, { id: 'HttpError' });
+    }
+}
+
+function responseHandler(response) {
+    if (response.status === 200 || response.status === 201) {
+        const data = response?.data;
+        if (!data) {
+            throw new HttpError('API Error. No data!');
+        }
+        return data;
+    }
+    throw new HttpError(`API Error! Invalid status code ${response.status}!`);
+}
+
+function responseErrorHandler(error) {
+    if (error === null) {
+        throw new Error('Unrecoverable error!! Error is null!');
+    }
+    toast.error(error.message, { id: 'AxiosError' });
+    return Promise.reject(error.message);
+}
+
+export const ApiClient = axios.create({
+    baseURL: 'http://localhost:8081/',
+    timeout: '3000',
+    headers: {
+        Accept: 'application/json',
+    },
+});
+
+ApiClient.interceptors.response.use(responseHandler, responseErrorHandler);

IP/src/components/api/ApiService.js

@@ -0,0 +1,41 @@
+import { ApiClient } from './ApiClient';
+
+class ApiService {
+    constructor(url) {
+        this.url = url;
+    }
+
+    async getAll(expand) {
+        return ApiClient.get(`${this.url}${expand || ''}`);
+    }
+
+    async get(id, expand) {
+        return ApiClient.get(`${this.url}/${id}${expand || ''}`);
+    }
+
+    async create(body) {
+        return ApiClient.post(this.url, body);
+    }
+
+    async update(id, body) {
+        return ApiClient.put(`${this.url}/${id}`, body);
+    }
+
+    async delete(id) {
+        return ApiClient.delete(`${this.url}/${id}`);
+    }
+
+    async getByHandle(handle) {
+        return ApiClient.get(`${this.url}?handle=${handle}`);
+    }
+
+    async getByEmail(email) {
+        return ApiClient.get(`${this.url}?email=${email}`);
+    }
+
+    async getAllForUser(userId) {
+        return ApiClient.get(`${this.url}?userId=${userId}`);
+    }
+}
+
+export default ApiService;

IP/src/components/banner/Banner.jsx

@@ -1,34 +1,13 @@
-import { useEffect, useState } from 'react';
+/* eslint-disable linebreak-style */
-import banner1 from '../../assets/1pic.jpg';
+/* eslint-disable eol-last */
-import banner2 from '../../assets/2pic.jpg';
-import banner3 from '../../assets/3pic.jpg';
 import './Banner.css';
+import useBannerHook from './BannerHook';
 
 const Banner = () => {
-    const [currentBanner, setCurrentBanner] = useState(0);
+    const { banners, getBannerClass } = useBannerHook();
-    const banners = [banner1, banner2, banner3];
-
-    const getBannerClass = (index) => {
-        return currentBanner === index ? 'banner-show' : 'banner-hide';
-    };
-
-    useEffect(() => {
-        const bannerInterval = setInterval(
-            () => {
-                console.info('Banner changed');
-                let current = currentBanner + 1;
-                if (current === banners.length) {
-                    current = 0;
-                }
-                setCurrentBanner(current);
-            },
-            5000,
-        );
-        return () => clearInterval(bannerInterval);
-    });
 
     return (
-        <div id="banner" >
+        <div id='banner'>
             {
                 banners.map((banner, index) =>
                     <img key={index} className={getBannerClass(index)} src={banner} alt={`banner${index}`} />)

IP/src/components/banner/BannerHook.js

@@ -0,0 +1,38 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable eol-last */
+import { useEffect, useState } from 'react';
+import banner1 from '../../assets/1pic.jpg';
+import banner2 from '../../assets/2pic.jpg';
+import banner3 from '../../assets/3pic.jpg';
+
+const useBannerHook = () => {
+    const [currentBanner, setCurrentBanner] = useState(0);
+    const banners = [banner1, banner2, banner3];
+
+    const getBannerClass = (index) => {
+        return currentBanner === index ? 'banner-show' : 'banner-hide';
+    };
+
+    useEffect(() => {
+        const bannerInterval = setInterval(
+            () => {
+                console.info('Banner changed');
+                let current = currentBanner + 1;
+                if (current === banners.length) {
+                    current = 0;
+                }
+                setCurrentBanner(current);
+            },
+            5000,
+        );
+        return () => clearInterval(bannerInterval);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    return {
+        banners,
+        getBannerClass,
+    };
+};
+
+export default useBannerHook;

IP/src/components/cart/Cart.css

@@ -0,0 +1,8 @@
+.cart-image {
+    width: 3.1rem;
+    padding: .25rem;
+}
+
+.cart-item {
+    height: auto;
+}

IP/src/components/cart/Cart.jsx

@@ -0,0 +1,157 @@
+import { Card, Button, ButtonGroup } from 'react-bootstrap';
+import { Link, useNavigate } from 'react-router-dom';
+import { DashLg, PlusLg, XLg } from 'react-bootstrap-icons';
+import { useEffect, useState } from 'react';
+import { Form } from 'react-bootstrap';
+import './Cart.css';
+import useCart from './CartHook.js';
+
+const Cart = () => {
+    const navigate = useNavigate();
+
+    const [validated, setValidated] = useState(false);
+    const [name, setName] = useState('');
+    const [surname, setSurname] = useState('');
+    const [email, setEmail] = useState('');
+    const [phoneNumber, setPhoneNumber] = useState('');
+
+    useEffect(() => {
+        const storedUserData = localStorage.getItem('user');
+        console.log(`Action: ${storedUserData}`);
+        const storedUser = storedUserData ? JSON.parse(storedUserData) : {};
+
+        if (storedUser) {
+            setName(storedUser.handle || '');
+            setSurname(storedUser.surname || '');
+            setEmail(storedUser.email || '');
+            setPhoneNumber(storedUser.phoneNumber || '');
+        }
+    }, []);
+
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        if (form.checkValidity() === false) {
+            event.preventDefault();
+            event.stopPropagation();
+        } else {
+            const storedUserData = localStorage.getItem('user');
+            const storedUser = storedUserData ? JSON.parse(storedUserData) : {};
+
+            const newUserData = {
+                ...storedUser,
+                handle: name,
+                surname: surname,
+                email: email,
+                phoneNumber: phoneNumber,
+            };
+            console.log(`Action: ${name}, Material Name: ${surname}, ${email}, ${phoneNumber}`);
+            localStorage.setItem('user', JSON.stringify(newUserData));
+        }
+
+        setValidated(true);
+    };
+    console.log(`handle: ${handleSubmit}`);
+    const handleLogout = () => {
+        localStorage.removeItem('user');
+        window.location.reload();
+        navigate('/Page1.jsx');
+    };
+    console.log(`user: ${handleLogout}`);
+    const {
+        cart,
+        getCartSum,
+        addToCart,
+        removeFromCart,
+        clearCart,
+    } = useCart();
+
+    return (
+        <main className="container-fluid justify-content-center px-lg-3">
+            <div className='row'>
+                <div className='col-lg-8'>
+                    <div className='mb-2 mt-2 d-flex align-items-center col-lg-3'>
+                        <strong className='flex-fill' style={{color: 'Black'}}>Корзина</strong>
+                        <div className='btn-custom custom-rounded-btn'>
+                            <Button onClick={() => clearCart()}>
+                                <XLg /> Очистить
+                            </Button>
+                        </div>
+                    </div>
+                    {
+                    cart.map((cartItem) =>
+                        <Card key={cartItem.id} className='mb-2 '>
+                            <Card.Body className='p-2 d-flex flex-column flex-sm-row align-items-center'>
+                                <div className='cart-item flex-fill'>
+                                    <Link to={`/detailpage/${cartItem.ItName}`} style={{ color: 'black', outline: 'none' }}>
+                                        <img className='cart-image' src={cartItem.image} alt="Cart Image" />
+                                        {cartItem.ItName}
+                                        &nbsp;&nbsp;||&nbsp;&nbsp;
+                                        {cartItem.type.name}
+                                    </Link>
+                                </div>
+                                <div className='cart-item mt-2 mt-sm-0 d-flex flex-column align-items-center align-items-sm-end'>
+                                    <div>
+                                        {cartItem.price}
+                                        {' * '}
+                                        {cartItem.count}
+                                        {' = '}
+                                        {parseFloat(cartItem.price * cartItem.count).toFixed(2)}
+                                    </div>
+                                    <ButtonGroup className='mt-2 mt-sm-1' aria-label="Cart counter">
+                                        <Button style={{backgroundColor: '#5233ff', color: 'aqua'}} onClick={() => addToCart(cartItem)}>
+                                            <PlusLg />
+                                        </Button>
+                                        <Button style={{backgroundColor: '#ff5500'}} onClick={() => removeFromCart(cartItem)}>
+                                            <DashLg />
+                                        </Button>
+                                    </ButtonGroup>
+                                </div>
+                            </Card.Body>
+                        </Card>)
+                    }
+                    <div className='mb-2 d-flex justify-content-end' style={{color: 'white'}}>
+                        <strong>Итого: {getCartSum()} &#8381;</strong>
+                    </div>
+                </div>
+                <div className='text-button-overlay col-lg-4'>
+                    <Form noValidate validated={validated} onSubmit={handleSubmit}>
+                        <h2 className="text-uppercase text-center mt-3" style={{ color: 'white'}}>Личный кабинет</h2>
+                        <Form.Group className="mb-1">
+                            <Form.Label>Ваше имя</Form.Label>
+                            <Form.Control type="text" value={name} onChange={(e) => setName(e.target.value)} readOnly />
+                        </Form.Group>
+
+                        <Form.Group className="mb-1">
+                            <Form.Label>Ваша фамилия</Form.Label>
+                            <Form.Control type="text" value={surname} onChange={(e) => setSurname(e.target.value)} />
+                        </Form.Group>
+
+                        <Form.Group className="mb-1">
+                            <Form.Label>Ваш адрес электронной почты</Form.Label>
+                            <Form.Control type="email" value={email} onChange={(e) => setEmail(e.target.value)}/>
+                        </Form.Group>
+
+                        <Form.Group className="mb-1">
+                            <Form.Label>Номер телефона</Form.Label>
+                            <Form.Control type="tel"value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} />
+                        </Form.Group>
+
+                        <div className="d-flex justify-content-center mt-2 button-overlayAdd custom-rounded-btn">
+                            <Button variant="warning" type="submit" id="saveButton">
+                                Сохранить
+                            </Button>
+                        </div>
+
+                        <div className="d-flex justify-content-center mt-2">
+                            <Link className="btn btn-outline-danger" style={{ color: 'black'}} type="button" onClick={handleLogout} to="/">
+                                Выйти
+                            </Link>
+                        </div>
+                    </Form>
+                </div>
+            </div>
+        </main>
+    );
+};
+
+export default Cart;

IP/src/components/cart/CartContext.jsx

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import {
+    createContext,
+    useEffect,
+    useReducer,
+} from 'react';
+import { cartReducer, loadCart, saveCart } from './CartReducer';
+
+const CartContext = createContext(null);
+
+export const CartProvider = ({ children }) => {
+    const [cart, dispatch] = useReducer(cartReducer, [], loadCart);
+
+    useEffect(() => {
+        saveCart(cart || []);
+    }, [cart]);
+
+    const cartContextValue = { cart, dispatch };
+    return (
+        <CartContext.Provider value={cartContextValue}>
+            {children}
+        </CartContext.Provider>
+    );
+};
+
+CartProvider.propTypes = {
+    children: PropTypes.node,
+};
+
+export default CartContext;

IP/src/components/cart/CartHook.js

@@ -0,0 +1,26 @@
+import { useContext } from 'react';
+import CartContext from './CartContext.jsx';
+import { cartAdd, cartClear, cartRemove } from './CartReducer';
+
+const useCart = () => {
+    const { cart, dispatch } = useContext(CartContext);
+
+    const cartSum = () => {
+        return parseFloat(
+            cart?.reduce((sum, cartItem) => {
+                return sum + (cartItem.price * cartItem.count);
+            }, 0)
+            ?? 0,
+        ).toFixed(2);
+    };
+
+    return {
+        cart,
+        getCartSum: () => cartSum(),
+        addToCart: (item) => dispatch(cartAdd(item)),
+        removeFromCart: (item) => dispatch(cartRemove(item)),
+        clearCart: () => dispatch(cartClear()),
+    };
+};
+
+export default useCart;

IP/src/components/cart/CartReducer.js

@@ -0,0 +1,72 @@
+const setCartCount = (cart, item, value) => {
+    return cart.map((cartItem) => {
+        if (cartItem.id === item.id) {
+            return { ...cartItem, count: cartItem.count + value };
+        }
+        return cartItem;
+    });
+};
+
+const addToCart = (cart, item) => {
+    const existsItem = cart.find((cartItem) => cartItem.id === item.id);
+    if (existsItem !== undefined) {
+        return setCartCount(cart, item, 1);
+    }
+    return [...cart, { ...item, count: 1 }];
+};
+
+const removeFromCart = (cart, item) => {
+    const existsItem = cart.find((cartItem) => cartItem.id === item.id);
+    if (existsItem !== undefined && existsItem.count > 1) {
+        return setCartCount(cart, item, -1);
+    }
+    return cart.filter((cartItem) => cartItem.id !== item.id);
+};
+
+const CART_KEY = 'localCart';
+const CART_ADD = 'cart/add';
+const CART_REMOVE = 'cart/remove';
+const CART_CLEAR = 'cart/clear';
+
+export const saveCart = (cart) => {
+    localStorage.setItem(CART_KEY, JSON.stringify(cart));
+};
+
+export const loadCart = (initialValue = []) => {
+    const cartData = localStorage.getItem(CART_KEY);
+    if (cartData) {
+        return JSON.parse(cartData);
+    }
+    return initialValue;
+};
+
+export const cartReducer = (cart, action) => {
+    const { item } = action;
+    switch (action.type) {
+        case CART_ADD: {
+            return addToCart(cart, item);
+        }
+        case CART_REMOVE: {
+            return removeFromCart(cart, item);
+        }
+        case CART_CLEAR: {
+            localStorage.removeItem("cart");  // Удаление данных из LocalStorage
+            return [];
+        }
+        default: {
+            throw Error(`Unknown action: ${action.type}`);
+        }
+    }
+};
+
+export const cartAdd = (item) => ({
+    type: CART_ADD, item,
+});
+
+export const cartRemove = (item) => ({
+    type: CART_REMOVE, item,
+});
+
+export const cartClear = () => ({
+    type: CART_CLEAR,
+});

IP/src/components/input/Input.jsx

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+
+const Input = ({
+    name, label, value, onChange, className, ...rest
+}) => {
+    return (
+        <Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
+            <Form.Label>{label}</Form.Label>
+            <Form.Control name={name || ''} value={value || ''} onChange={onChange} {...rest} />
+        </Form.Group>
+    );
+};
+
+Input.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};
+
+export default Input;

IP/src/components/input/Select.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+
+const Select = ({
+    values, name, label, value, onChange, className, ...rest
+}) => {
+    return (
+        <Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
+            <Form.Label className='form-label'>{label}</Form.Label>
+            <Form.Select name={name || ''} value={value || ''} onChange={onChange} {...rest}>
+                <option value=''>Выберите значение</option>
+                {
+                    values.map((type) => <option key={type.id} value={type.id}>{type.name}</option>)
+                }
+            </Form.Select>
+        </Form.Group>
+    );
+};
+
+Select.propTypes = {
+    values: PropTypes.array,
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};
+
+export default Select;

IP/src/components/lines/form/LinesForm.jsx

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import { Button, Form } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+import useLinesItemForm from '../hooks/LinesItemFormHook';
+import LinesItemForm from './LinesItemForm.jsx';
+
+const LinesForm = ({ id }) => {
+    const navigate = useNavigate();
+
+    const {
+        item,
+        validated,
+        handleSubmit,
+        handleChange,
+    } = useLinesItemForm(id);
+
+    const onBack = () => {
+        navigate(-1);
+    };
+
+    const onSubmit = async (event) => {
+        if (await handleSubmit(event)) {
+            onBack();
+        }
+    };
+
+    return (
+        <>
+            <Form className='m-0 p-2' noValidate validated={validated} onSubmit={onSubmit}>
+                <LinesItemForm item={item} handleChange={handleChange} />
+                <Form.Group className='row justify-content-center m-0 mt-3'>
+                    <Button className='col-5 col-lg-2 m-0 me-2' variant='secondary' onClick={() => onBack()}>
+                        Назад
+                    </Button>
+                    <Button className='col-5 col-lg-2 m-0 ms-2' type='submit' variant='primary'>
+                        Сохранить
+                    </Button>
+                </Form.Group>
+            </Form>
+        </>
+    );
+};
+
+LinesForm.propTypes = {
+    id: PropTypes.string,
+};
+
+export default LinesForm;

IP/src/components/lines/form/LinesItemForm.css

@@ -0,0 +1,3 @@
+#image-preview {
+    width: 200px;
+}

IP/src/components/lines/form/LinesItemForm.jsx

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import imgPlaceholder from '../../../assets/200.png';
+import Input from '../../input/Input.jsx';
+import Select from '../../input/Select.jsx';
+import useTypes from '../../types/hooks/TypesHook';
+import useMaterials from '../../types/hooks/MaterialsHook';
+import './LinesItemForm.css';
+
+const LinesItemForm = ({ item, handleChange }) => {
+    const { types } = useTypes();
+    const { materials } = useMaterials();
+
+    return (
+        <>
+            <div className='text-center'>
+                <img id='image-preview' className='rounded' alt='placeholder'
+                    src={item.image || imgPlaceholder} />
+            </div>
+            <Input name='name' label='Название' value={item.name} onChange={handleChange} required />
+            <Select values={types} name='typeId' label='Товары' value={item.typeId} onChange={handleChange}
+                required />
+            <Input name='price' label='Цена' value={item.price} onChange={handleChange}
+                type='number' min='10000000.0' step='1000000' required />
+            <Input name='count' label='Количество' value={item.count} onChange={handleChange}
+                type='number' min='1' step='1' required />
+            <Select values={materials} name='materialId' label='Материалы' value={item.materialId} onChange={handleChange}
+                required />
+            <Input name='image' label='Изображение' onChange={handleChange}
+                type='file' accept='image/*' />
+        </>
+    );
+};
+
+LinesItemForm.propTypes = {
+    item: PropTypes.object,
+    handleChange: PropTypes.func,
+};
+
+export default LinesItemForm;

IP/src/components/lines/hooks/LinesDeleteModalHook.js

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useModal from '../../modal/ModalHook';
+import LinesApiService from '../service/LinesApiService';
+
+const useLinesDeleteModal = (linesChangeHandle) => {
+    const { isModalShow, showModal, hideModal } = useModal();
+    const [currentId, setCurrentId] = useState(0);
+
+    const showModalDialog = (id) => {
+        showModal();
+        setCurrentId(id);
+    };
+
+    const onClose = () => {
+        hideModal();
+    };
+
+    const onDelete = async () => {
+        await LinesApiService.delete(currentId);
+        linesChangeHandle();
+        toast.success('Элемент успешно удален', { id: 'LinesTable' });
+        onClose();
+    };
+
+    return {
+        isDeleteModalShow: isModalShow,
+        showDeleteModal: showModalDialog,
+        handleDeleteConfirm: onDelete,
+        handleDeleteCancel: onClose,
+    };
+};
+
+export default useLinesDeleteModal;

IP/src/components/lines/hooks/LinesFilterHook.js

@@ -0,0 +1,28 @@
+import { useSearchParams } from 'react-router-dom';
+import useTypes from '../../types/hooks/TypesHook';
+
+const useTypeFilter = () => {
+    const filterName = 'type';
+
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const { types } = useTypes();
+
+    const handleFilterChange = (event) => {
+        const type = event.target.value;
+        if (type) {
+            searchParams.set(filterName, event.target.value);
+        } else {
+            searchParams.delete(filterName);
+        }
+        setSearchParams(searchParams);
+    };
+
+    return {
+        types,
+        currentFilter: searchParams.get(filterName) || '',
+        handleFilterChange,
+    };
+};
+
+export default useTypeFilter;

IP/src/components/lines/hooks/LinesFormModalHook.js

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import useModal from '../../modal/ModalHook';
+import useLinesItemForm from './LinesItemFormHook';
+
+const useLinesFormModal = (linesChangeHandle) => {
+    const { isModalShow, showModal, hideModal } = useModal();
+    const [currentId, setCurrentId] = useState(0);
+
+    const {
+        item,
+        validated,
+        handleSubmit,
+        handleChange,
+        resetValidity,
+    } = useLinesItemForm(currentId, linesChangeHandle);
+
+    const showModalDialog = (id) => {
+        setCurrentId(id);
+        resetValidity();
+        showModal();
+    };
+
+    const onClose = () => {
+        setCurrentId(-1);
+        hideModal();
+    };
+
+    const onSubmit = async (event) => {
+        if (await handleSubmit(event)) {
+            onClose();
+        }
+    };
+
+    return {
+        isFormModalShow: isModalShow,
+        isFormValidated: validated,
+        showFormModal: showModalDialog,
+        currentItem: item,
+        handleItemChange: handleChange,
+        handleFormSubmit: onSubmit,
+        handleFormClose: onClose,
+    };
+};
+
+export default useLinesFormModal;

IP/src/components/lines/hooks/LinesHook.js

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import LinesApiService from '../service/LinesApiService';
+
+const useLines = (typeFilter) => {
+    const [linesRefresh, setLinesRefresh] = useState(false);
+    const [lines, setLines] = useState([]);
+    const handleLinesChange = () => setLinesRefresh(!linesRefresh);
+
+    const getLines = async () => {
+        let expand = '?_expand=material&_expand=type';
+        if (typeFilter) {
+            expand = `${expand}&typeId=${typeFilter}`;
+        }
+        const data = await LinesApiService.getAll(expand);
+        setLines(data ?? []);
+    };
+
+    useEffect(() => {
+        getLines();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [linesRefresh, typeFilter]);
+
+    return {
+        lines,
+        handleLinesChange,
+    };
+};
+
+export default useLines;

IP/src/components/lines/hooks/LinesItemFormHook.js

@@ -0,0 +1,85 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import getBase64FromFile from '../../utils/Base64';
+import LinesApiService from '../service/LinesApiService';
+import useLinesItem from './LinesItemHook';
+
+const useLinesItemForm = (id, linesChangeHandle) => {
+    const { item, setItem } = useLinesItem(id);
+
+    const [validated, setValidated] = useState(false);
+
+    const resetValidity = () => {
+        setValidated(false);
+    };
+
+    const getLineObject = (formData) => {
+        const ItName = formData.name;
+        const typeId = parseInt(formData.typeId, 10);
+        const price = parseFloat(formData.price).toFixed(2);
+        const count = formData.count;
+        const materialId = parseInt(formData.materialId, 10);
+        const sum = parseFloat(price * count).toFixed(2);
+        const image = formData.image.startsWith('data:image') ? formData.image : '';
+        return {
+            ItName: ItName.toString(),
+            typeId: typeId.toString(),
+            price: price.toString(),
+            count: count.toString(),
+            materialId: materialId.toString(),
+            sum: sum.toString(),
+            image,
+        };
+    };
+
+    const handleImageChange = async (event) => {
+        const { files } = event.target;
+        const file = await getBase64FromFile(files.item(0));
+        setItem({
+            ...item,
+            image: file,
+        });
+    };
+
+    const handleChange = (event) => {
+        if (event.target.type === 'file') {
+            handleImageChange(event);
+            return;
+        }
+        const inputName = event.target.name;
+        const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
+        setItem({
+            ...item,
+            [inputName]: inputValue,
+        });
+    };
+
+    const handleSubmit = async (event) => {
+        const form = event.currentTarget;
+        event.preventDefault();
+        event.stopPropagation();
+        const body = getLineObject(item);
+        if (form.checkValidity()) {
+            if (id === undefined) {
+                await LinesApiService.create(body);
+            } else {
+                await LinesApiService.update(id, body);
+            }
+            if (linesChangeHandle) linesChangeHandle();
+            toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
+            return true;
+        }
+        setValidated(true);
+        return false;
+    };
+
+    return {
+        item,
+        validated,
+        handleSubmit,
+        handleChange,
+        resetValidity,
+    };
+};
+
+export default useLinesItemForm;

IP/src/components/lines/hooks/LinesItemHook.js

@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react';
+import LinesApiService from '../service/LinesApiService';
+
+const useLinesItem = (id) => {
+    const emptyItem = {
+        id: '',
+        ItName: '',
+        typeId: '',
+        price: '0',
+        count: '0',
+        materialId: '',
+        image: '',
+    };
+    const [item, setItem] = useState({ ...emptyItem });
+
+    const getItem = async (itemId = undefined) => {
+        if (itemId && itemId > 0) {
+            const data = await LinesApiService.get(itemId);
+            setItem(data);
+        } else {
+            setItem({ ...emptyItem });
+        }
+    };
+
+    useEffect(() => {
+        getItem(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+
+    return {
+        item,
+        setItem,
+    };
+};
+
+export default useLinesItem;

IP/src/components/lines/serverCatalog/Catalog.css

@@ -0,0 +1,34 @@
+.product {
+    border: 1px solid #ccc; /* Серые границы */
+    padding: 15px;
+    margin: 10px;
+    background-color: #fff; /* Фон карточки */
+    border-radius: 5px; /* Закругленные углы */
+}
+
+.product-info {
+    text-align: center;
+}
+
+.product-info h2 {
+    color: #333; /* Цвет Названия */
+    font-weight: bold; /* Жирное Название */
+    margin-bottom: 10px;
+}
+
+.product-info p {
+    color: #666; /* Цвет Типа и Цены */
+    margin-bottom: 5px;
+    font-weight: bold; /* Жирный Тип и Цена */
+}
+
+.product-img img {
+    max-width: 100%;
+    height: auto;
+    border-bottom: 1px solid #ccc; /* Серая граница снизу изображения */
+}
+
+.button-overlayAdd {
+    margin-top: 10px;
+    text-align: center;
+}

IP/src/components/lines/serverCatalog/Catalog.jsx

@@ -0,0 +1,60 @@
+import Select from '../../input/Select.jsx';
+import { Link } from 'react-router-dom';
+import useTypeFilter from '../hooks/LinesFilterHook';
+import useLines from '../hooks/LinesHook';
+import useMaterials from '../../types/hooks/MaterialsHook';
+import useCart from '../../cart/CartHook';
+import { Button } from 'react-bootstrap';
+import './Catalog.css';
+
+const Catalog = () => {
+    const { materials } = useMaterials();
+    const { types, currentFilter, handleFilterChange } = useTypeFilter();
+
+    const { lines } = useLines(currentFilter, materials);
+    const { addToCart } = useCart();
+
+    return (
+        <>
+            <main className="container-fluid ml-2 mr-2">
+                <div className="col-lg-4 mt-0 text-white">
+                    <Select
+                        className={'mt-2'}
+                        values={types}
+                        label="Фильтр по товарам"
+                        value={currentFilter}
+                        onChange={handleFilterChange}
+                    />
+                </div>
+                <div className="container">
+                    <div className="row">
+                        {lines.map((product, index) => (
+                        <div className="col-md-2 product mb-3" key={index}>
+                            <div className="product-img">
+                                <img src={product.image} alt={product.ItName} className="img-fluid product-image"></img>
+                            </div>
+                            <div className="product-info">
+                                <h2>
+                                    <Link to={`/detailpage/${product.ItName}`} style={{ color: '#fafafa', outline: 'none' }}>
+                                        {product.ItName}
+                                        </Link>
+                                        </h2>
+                                <p>Название: {product.ItName}</p>
+                                <p>Тип: {product.type.name}</p>
+                                <p>Цена: {product.price}</p>
+                                <div className="button-overlayAdd">
+                                <Button variant="primary" className="btn btn-custom custom-rounded-btn" onClick={() => addToCart(product)}>
+                                    Купить
+                                </Button>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                    </div>
+                </div>
+            </main>
+        </>
+    );
+};
+
+export default Catalog;

IP/src/components/lines/service/LinesApiService.js

@@ -0,0 +1,5 @@
+import ApiService from '../../api/ApiService';
+
+const LinesApiService = new ApiService('lines');
+
+export default LinesApiService;

IP/src/components/lines/table/Lines.jsx

@@ -0,0 +1,89 @@
+import { Button } from 'react-bootstrap';
+import Select from '../../input/Select.jsx';
+import ModalConfirm from '../../modal/ModalConfirm.jsx';
+import ModalForm from '../../modal/ModalForm.jsx';
+import LinesItemForm from '../form/LinesItemForm.jsx';
+import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
+import useTypeFilter from '../hooks/LinesFilterHook';
+import useLinesFormModal from '../hooks/LinesFormModalHook';
+import useLines from '../hooks/LinesHook';
+import LinesTable from './LinesTable.jsx';
+import LinesTableRow from './LinesTableRow.jsx';
+import useMaterials from '../../types/hooks/MaterialsHook';
+import './Lines.css';
+
+const Lines = () => {
+    const { materials } = useMaterials();
+    const { types, currentFilter, handleFilterChange } = useTypeFilter();
+
+    const { lines, handleLinesChange } = useLines(currentFilter, materials);
+
+    const {
+        isDeleteModalShow,
+        showDeleteModal,
+        handleDeleteConfirm,
+        handleDeleteCancel,
+    } = useLinesDeleteModal(handleLinesChange);
+
+    const {
+        isFormModalShow,
+        isFormValidated,
+        showFormModal,
+        currentItem,
+        handleItemChange,
+        handleFormSubmit,
+        handleFormClose,
+    } = useLinesFormModal(handleLinesChange);
+
+    return (
+        <>
+        <main className="container-fluid ml-2 mr-2">
+            <div className="row">
+                <div className="col-lg-9">
+                    <LinesTable>
+                        {lines.map((line, index) => (
+                            <LinesTableRow
+                                key={line.id}
+                                index={index}
+                                line={line}
+                                onDelete={() => showDeleteModal(line.id)}
+                                onEdit={() => showFormModal(line.id)}
+                            />
+                        ))}
+                    </LinesTable>
+                </div>
+                <div className="col-lg-3">
+                    <Select
+                        className="mt-2"
+                        values={types}
+                        label="Фильтр по товарам"
+                        value={currentFilter}
+                        onChange={handleFilterChange}
+                    />
+                    <Button variant="primary" className="buttonAdd custom-rounded-btn btn-custom" onClick={() => showFormModal()}>
+                          Добавить товар
+                    </Button>
+                </div>
+            </div>
+            <ModalConfirm
+                show={isDeleteModalShow}
+                onConfirm={handleDeleteConfirm}
+                onClose={handleDeleteCancel}
+                title="Удаление"
+                message="Удалить элемент?"
+            />
+            <ModalForm
+                show={isFormModalShow}
+                validated={isFormValidated}
+                onSubmit={handleFormSubmit}
+                onClose={handleFormClose}
+                title="Редактирование"
+            >
+                <LinesItemForm item={currentItem} handleChange={handleItemChange} />
+            </ModalForm>
+            </main>
+        </>
+    );
+};
+
+export default Lines;

IP/src/components/lines/table/LinesTable.jsx

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import { Table } from 'react-bootstrap';
+import React from 'react';
+import './Lines.css';
+
+const LinesTable = ({ children }) => {
+    return (
+        <div className='table-container'>
+            <Table className='mt-2'>
+                <thead>
+                    <tr>
+                        <th scope='col'>№</th>
+                        <th scope='col'>Название</th>
+                        <th scope='col'>Тип</th>
+                        <th scope='col'>Цена</th>
+                        <th scope='col'>Количество</th>
+                        <th scope='col'>Материалы</th>
+                        <th scope='col'>Сумма</th>
+                        <th scope='col'></th>
+                        <th scope='col'></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {React.Children.map(children, (child, index) => {
+                        return React.cloneElement(child, { key: index });
+                    })}
+                </tbody>
+            </Table>
+        </div>
+    );
+};
+
+LinesTable.propTypes = {
+    children: PropTypes.node,
+};
+
+export default LinesTable;

IP/src/components/lines/table/LinesTableRow.jsx

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import {
+    PencilFill, Trash3,
+} from 'react-bootstrap-icons';
+
+const LinesTableRow = ({
+    index, line, onDelete, onEdit,
+}) => {
+    const handleAnchorClick = (event, action) => {
+        event.preventDefault();
+        action();
+    };
+    return (
+        <tr>
+            <th scope="row">{index + 1}</th>
+            <td>{line.ItName}</td>
+            <td>{line.type.name}</td>
+            <td>{parseFloat(line.price).toFixed(2)}</td>
+            <td>{line.count}</td>
+            <td>{line.material.name}</td>
+            <td>{parseFloat(line.sum).toFixed(2)}</td>
+            <td><a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a></td>
+            <td><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a></td>
+        </tr>
+    );
+};
+
+LinesTableRow.propTypes = {
+    index: PropTypes.number,
+    line: PropTypes.object,
+    onDelete: PropTypes.func,
+    onEdit: PropTypes.func,
+    onEditInPage: PropTypes.func,
+};
+
+export default LinesTableRow;

IP/src/components/modal/Modal.css

@@ -0,0 +1,3 @@
+.modal-title {
+    font-size: 1.2rem;
+}

IP/src/components/modal/ModalConfirm.jsx

@@ -0,0 +1,42 @@
+import PropTypes from 'prop-types';
+import { Button, Modal } from 'react-bootstrap';
+import { createPortal } from 'react-dom';
+import './Modal.css';
+
+const ModalConfirm = ({
+    show, title, message, onConfirm, onClose,
+}) => {
+    return createPortal(
+        <Modal show={show} backdrop='static' onHide={() => onClose()}>
+            <Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
+                <Modal.Title>{title}</Modal.Title>
+            </Modal.Header>
+
+            <Modal.Body>
+                {message}
+            </Modal.Body>
+
+            <Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
+                <Button variant='secondary' className='col-5 m-0 me-2'
+                    onClick={() => onClose()}>
+                    Нет
+                </Button>
+                <Button variant='primary' className='col-5 m-0 ms-2'
+                    onClick={() => onConfirm()}>
+                    Да
+                </Button>
+            </Modal.Footer>
+        </Modal>,
+        document.body,
+    );
+};
+
+ModalConfirm.propTypes = {
+    show: PropTypes.bool,
+    title: PropTypes.string,
+    message: PropTypes.string,
+    onConfirm: PropTypes.func,
+    onClose: PropTypes.func,
+};
+
+export default ModalConfirm;

IP/src/components/modal/ModalForm.jsx

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import { Button, Form, Modal } from 'react-bootstrap';
+import { createPortal } from 'react-dom';
+import './Modal.css';
+
+const ModalForm = ({
+    show, title, validated, onSubmit, onClose, children,
+}) => {
+    return createPortal(
+        <Modal show={show} backdrop='static' onHide={() => onClose()}>
+            <Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
+                <Modal.Title>{title}</Modal.Title>
+            </Modal.Header>
+            <Form className='m-0' noValidate validated={validated} onSubmit={onSubmit}>
+                <Modal.Body>
+                    {children}
+                </Modal.Body>
+
+                <Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
+                    <Button variant='secondary' className='col-5 m-0 me-2'
+                        onClick={() => onClose()}>
+                        Отмена
+                    </Button>
+                    <Button variant='primary' className='col-5 m-0 ms-2' type='submit'>
+                        Сохранить
+                    </Button>
+                </Modal.Footer>
+            </Form>
+        </Modal>,
+        document.body,
+    );
+};
+
+ModalForm.propTypes = {
+    show: PropTypes.bool,
+    title: PropTypes.string,
+    validated: PropTypes.bool,
+    onSubmit: PropTypes.func,
+    onClose: PropTypes.func,
+    children: PropTypes.node,
+};
+
+export default ModalForm;

IP/src/components/modal/ModalHook.js

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+const useModal = () => {
+    const [showModal, setShowModal] = useState(false);
+
+    const showModalDialog = () => {
+        setShowModal(true);
+    };
+
+    const hideModalDialog = () => {
+        setShowModal(false);
+    };
+
+    return {
+        isModalShow: showModal,
+        showModal: showModalDialog,
+        hideModal: hideModalDialog,
+    };
+};
+
+export default useModal;

IP/src/components/navigation/Navigation.jsx

@@ -1,10 +1,14 @@
+/* eslint-disable linebreak-style */
 import PropTypes from 'prop-types';
 import { Container, Nav, Navbar } from 'react-bootstrap';
 import { House } from 'react-bootstrap-icons';
 import { Link, useLocation } from 'react-router-dom';
+import useUser from '../users/userHook';
 import './Navigation.css';
 
 const Navigation = ({ routes }) => {
+    const {isAdmin, userName} = useUser();
+    console.log(`Action: ${isAdmin}, Material Name: ${userName}`);
     const location = useLocation();
     const indexPageLink = routes.filter((route) => route.index === false).shift();
     const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
@@ -27,6 +31,24 @@ const Navigation = ({ routes }) => {
                                     </Nav.Link>)
                             }
                         </Nav>
+                        <Nav>
+							{userName ? (
+							<>
+								<Nav.Link className="custom-btn" as={Link} to="/Page7">
+								{userName}
+								</Nav.Link>
+								{isAdmin && (
+								<Nav.Link className="custom-btn" as={Link} to="/Admin">
+									Панель
+								</Nav.Link>
+								)}
+							</>
+							) : (
+							<Nav.Link className="custom-btn" as={Link} to="/Page3">
+								Профиль
+							</Nav.Link>
+							)}
+						</Nav>
                     </Navbar.Collapse>
                 </Container>
             </Navbar >

IP/src/components/types/hooks/MaterialsHook.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import MaterialsApiService from '../service/MaterialsApiService';
+
+const useMaterials = () => {
+    const [materials, setMaterials] = useState([]);
+
+    const getMaterials = async () => {
+        const data = await MaterialsApiService.getAll();
+        setMaterials(data ?? []);
+    };
+
+    useEffect(() => {
+        getMaterials();
+    }, []);
+
+    return {
+        materials,
+    };
+};
+
+export default useMaterials;

IP/src/components/types/hooks/TypesHook.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import TypesApiService from '../service/TypesApiService';
+
+const useTypes = () => {
+    const [types, setTypes] = useState([]);
+
+    const getTypes = async () => {
+        const data = await TypesApiService.getAll();
+        setTypes(data ?? []);
+    };
+
+    useEffect(() => {
+        getTypes();
+    }, []);
+
+    return {
+        types,
+    };
+};
+
+export default useTypes;

IP/src/components/types/service/MaterialsApiService.js

@@ -0,0 +1,5 @@
+import ApiService from '../../api/ApiService';
+
+const MaterialsApiService = new ApiService('materials');
+
+export default MaterialsApiService;

IP/src/components/types/service/TypesApiService.js

@@ -0,0 +1,5 @@
+import ApiService from '../../api/ApiService';
+
+const TypesApiService = new ApiService('types');
+
+export default TypesApiService;

IP/src/components/users/UserContext.jsx

@@ -0,0 +1,23 @@
+import { createContext, useReducer, useEffect } from 'react';
+import { loadUser, saveUser, userReducer } from './userReducer';
+import PropTypes from 'prop-types';
+
+export const UserContext = createContext(null);
+
+export const UserProvider = ({ children }) => {
+  const [user, dispatch] = useReducer(userReducer, null, loadUser);
+
+  useEffect(() => {
+    saveUser(user || null);
+  }, [user]);
+  console.log(`Action: ${user}`);
+  return <UserContext.Provider value = {{ user, dispatch }}>
+    {children}
+  </UserContext.Provider>;
+};
+
+UserProvider.propTypes = {
+    children: PropTypes.node,
+};
+
+export default UserContext;

IP/src/components/users/loginHook.js

@@ -0,0 +1,20 @@
+import UsersApiService from "./service/UsersApiService";
+import useUser from "./userHook";
+
+const useSubmit = () => {
+  const { userLogin } = useUser();
+  const onSubmit = async (data) => {
+    const res1 = await UsersApiService.getByHandle(data.handle);
+    if (res1.length === 0) {
+      return 1;
+    }
+    if (res1[0].password !== data.password) {
+      return 2;
+    }
+    userLogin(res1[0]);
+    return 3;
+  };
+  return { onSubmit };
+};
+
+export default useSubmit;

IP/src/components/users/regHook.js

@@ -0,0 +1,34 @@
+import UsersApiService from "./service/UsersApiService";
+import useUser from "./userHook";
+
+const useSubmit = () => {
+  const { userLogin } = useUser();
+  const getNewUser = (formData) => {
+    console.log("formdsta"+ formData);
+    const emailt = formData.email;
+    const handlet = formData.handle;
+    const passwordt = formData.password;
+    return {
+      email: emailt,
+      handle: handlet,
+      password: passwordt,
+    };
+  };
+  const onSubmit = async (data) => {
+    const res1 = await UsersApiService.getByHandle(data.handle);
+    if (res1.length !== 0) {
+      return 1;
+    }
+    const res2 = await UsersApiService.getByEmail(data.email);
+    if (res2.length !== 0) {
+      return 2;
+    }
+    const newUser = getNewUser(data);
+    const curUser = await UsersApiService.create(newUser);
+    userLogin(curUser);
+    return 3;
+  };
+  return { onSubmit };
+};
+
+export default useSubmit;

IP/src/components/users/service/UsersApiService.js

@@ -0,0 +1,5 @@
+import ApiService from "../../api/ApiService";
+
+const UsersApiService = new ApiService('users');
+
+export default UsersApiService;

IP/src/components/users/userHook.js

@@ -0,0 +1,17 @@
+import { useContext } from 'react';
+import { userLogin, userLogout } from './userReducer.js';
+import UserContext from './UserContext.jsx';
+
+const useUser = () => {
+  const {user, dispatch} = useContext(UserContext);
+
+  return {
+    isAdmin : user?.handle || null === 'admin',
+    userName : user?.handle || null,
+    userLogout: () => dispatch(userLogout()),
+    userLogin: (user) => dispatch(userLogin(user)),
+
+  };
+};
+
+export default useUser;

IP/src/components/users/userReducer.js

@@ -0,0 +1,39 @@
+const USER_KEY = 'user';
+const USER_LOGIN = 'user/login';
+const USER_LOGOUT = 'user/logout';
+
+export const saveUser = (user) => {
+  localStorage.setItem(USER_KEY, JSON.stringify(user));
+};
+
+export const loadUser = (initialValue = []) => {
+  const userData = localStorage.getItem(USER_KEY);
+  if (userData) {
+    return JSON.parse(userData);
+  }
+  return initialValue;
+};
+
+export const userReducer = (state, action) => {
+  console.log(action);
+  switch (action.type) {
+    case USER_LOGOUT: {
+      return null;
+    }
+    case USER_LOGIN: {
+      return action.user;
+    }
+    default: {
+      throw new Error(`Unknown action: ${action.type}`);
+    }
+  }
+};
+
+export const userLogout = () => ({
+  type: USER_LOGOUT,
+});
+console.log(`userlogout: ${userLogout}`);
+export const userLogin = (user) => ({
+  type: USER_LOGIN,
+  user,
+});

IP/src/components/utils/Base64.js

@@ -0,0 +1,15 @@
+const getBase64FromFile = async (file) => {
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+        reader.onloadend = () => {
+            const fileContent = reader.result;
+            resolve(fileContent);
+        };
+        reader.onerror = () => {
+            reject(new Error('Oops, something went wrong with the file reader.'));
+        };
+        reader.readAsDataURL(file);
+    });
+};
+
+export default getBase64FromFile;

IP/src/main.jsx

@@ -8,11 +8,12 @@ import ErrorPage from './pages/ErrorPage.jsx';
 import Page1 from './pages/Page1.jsx';
 import Page2 from './pages/Page2.jsx';
 import Page3 from './pages/Page3.jsx';
-import Page4 from './pages/Page4.jsx';
+import Admin from './pages/Admin.jsx';
 import Page5 from './pages/Page5.jsx';
 import Page6 from './pages/Page6.jsx';
 import Page7 from './pages/Page7.jsx';
 import PageEdit from './pages/PageEdit.jsx';
+import DetailPage from './pages/DetailPage.jsx';
 
 const routes = [
   {
@@ -34,12 +35,14 @@ const routes = [
   {
     path: '/page3',
     element: <Page3 />,
-    title: 'Вход',
   },
   {
-    path: '/page4',
+    path: '/Admin',
-    element: <Page4 />,
+    element: <Admin />,
-    title: 'Администратору',
+  },
+  {
+    path: '/detailpage/:name',
+    element: <DetailPage />,
   },
   {
     path: '/page6',

IP/src/pages/Admin.jsx

@@ -0,0 +1,9 @@
+import Lines from '../components/lines/table/Lines.jsx';
+
+const Admin = () => {
+    return (
+        <Lines />
+    );
+};
+
+export default Admin;

IP/src/pages/DetailPage.jsx

@@ -0,0 +1,43 @@
+import { useParams } from 'react-router-dom';
+import { useState, useEffect } from 'react';
+import LinesApiService from '../components/lines/service/LinesApiService';
+import '../pagescss/DetailPage.css';
+
+const DetailPage = () => {
+  const { name } = useParams();
+
+  const [imageUrl, setImageUrl] = useState('');
+  const [price, setPrice] = useState('');
+
+  useEffect(() => {
+    const loadDataFromServer = async (name) => {
+      try {
+        const data = await LinesApiService.getAll(`?ItName=${name}`);
+
+        setPrice(data[0].price);
+        setImageUrl(data[0].image);
+      } catch (error) {
+        console.log('еррор емае');
+        console.error(error);
+      }
+    };
+
+    loadDataFromServer(name);
+  }, [name]);
+  return (
+    <div className="container-fluid">
+      <div id="image-container">
+        <img src={imageUrl} alt={name}></img>
+        <div className="text-overlay">{name}</div>
+      </div>
+          <div className="info">
+            <div className="info-text">
+              <h1>Цена</h1>
+              <p>{price}</p>
+            </div>
+          </div>
+        </div>
+  );
+};
+
+export default DetailPage;

IP/src/pages/DetailPageRoute.jsx

@@ -0,0 +1,17 @@
+import { Route, Switch, useParams } from 'eact-router-dom';
+import DetailPage from './pages/DetailPage.jsx';
+
+const DetailPageRoute = () => {
+    const { name } = useParams();
+
+    return <DetailPage name={name} />;
+  };
+const App = () => {
+  return (
+    <Switch>
+      <Route path="/detailpage/:name" component={DetailPageRoute} />
+    </Switch>
+  );
+};
+
+export default App;

IP/src/pages/Page1.jsx

@@ -1,7 +1,5 @@
-import prod1 from '../assets/prod1.jpg';
-import prod2 from '../assets/prod2.jpg';
-import prod3 from '../assets/prod3.jpg';
 import Banner from '../components/banner/Banner.jsx';
+import Catalog from '../components/lines/serverCatalog/Catalog.jsx';
 
 const Page1 = () => {
     return (
@@ -17,47 +15,7 @@ const Page1 = () => {
             <a href="/page2" className="btn btn-info text-white custom-rounded-btn btn-lg btn-custom">Узнать подробнее</a>
             <div className="container mt-5">
                 <div className="row">
-                    <div className="col-md-4">
+                <Catalog />
-                <div className="card mb-4 h-10">
-                    <img src={prod1} className="card-img-top custom-image" alt="Product Image" />
-                    <div className="card-body">
-                        <h5 className="card-title text-truncate">Дом «Лебедь»</h5>
-                        <ul className="list-group list-group-flush">
-                            <li className="list-group-item"><strong>Площадь дома:</strong> 220 м2</li>
-                            <li className="list-group-item"><strong>Цена:</strong> 10 500 000 руб</li>
-                        </ul>
-                        <a href="#" className="btn btn-custom mt-3">Купить</a>
-                    </div>
-                </div>
-                    </div>
-
-                    <div className="col-md-4">
-                        <div className="card mb-4 h-10">
-                            <img src={prod2} className="card-img-top custom-image" alt="Product Image" />
-                            <div className="card-body">
-                                <h5 className="card-title text-truncate">Дом Вашей мечты</h5>
-                                <ul className="list-group list-group-flush">
-                                    <li className="list-group-item"><strong>Площадь дома:</strong> 230 м2</li>
-                                    <li className="list-group-item"><strong>Цена:</strong> 20 500 000 руб</li>
-                                </ul>
-                                <a href="#" className="btn btn-custom mt-3">Купить</a>
-                            </div>
-                        </div>
-                            </div>
-
-                            <div className="col-md-4">
-                                <div className="card mb-4 h-10">
-                                    <img src={prod3} className="card-img-top custom-image" alt="Product Image" />
-                                    <div className="card-body">
-                                        <h5 className="card-title text-truncate">Элитная вилла</h5>
-                                        <ul className="list-group list-group-flush">
-                                            <li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
-                                            <li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
-                                        </ul>
-                                        <a href="#" className="btn btn-custom mt-3">Купить</a>
-                                    </div>
-                                </div>
-                                    </div>
                 </div>
             </div>
         </div>

IP/src/pages/Page2.jsx

@@ -1,182 +1,8 @@
-import prod1 from '../assets/prod1.jpg';
+import Catalog from '../components/lines/serverCatalog/Catalog.jsx';
-import prod2 from '../assets/prod2.jpg';
-import prod3 from '../assets/prod3.jpg';
 
 const Page2 = () => {
     return (
-        <>
+        <Catalog />
-            <div className="container mt-5">
-    <div className="row mb-4">
-        <div className="col-md-2 mb-4">
-    <div className="card h-5">
-        <img src={prod1} className="card-img-top custom-image" alt="Product Image" />
-        <div className="card-body">
-            <h5 className="card-title text-truncate">Дом «Лебедь»</h5>
-            <ul className="list-group list-group-flush">
-                <li className="list-group-item"><strong>Площадь дома:</strong> 220 м2</li>
-                <li className="list-group-item"><strong>Цена:</strong> 10 500 000 руб</li>
-            </ul>
-            <a href="#" className="btn btn-custom mt-3">Купить</a>
-        </div>
-    </div>
-        </div>
-
-    <div className="col-md-2">
-        <div className="card h-5">
-            <img src={prod2} className="card-img-top custom-image" alt="Product Image" />
-            <div className="card-body">
-                <h5 className="card-title text-truncate">Дом Вашей мечты</h5>
-                <ul className="list-group list-group-flush">
-                    <li className="list-group-item"><strong>Площадь дома:</strong> 230 м2</li>
-                    <li className="list-group-item"><strong>Цена:</strong> 20 500 000 руб</li>
-                </ul>
-                <a href="#" className="btn btn-custom mt-3">Купить</a>
-            </div>
-        </div>
-            </div>
-
-    <div className="col-md-2">
-        <div className="card h-5">
-            <img src={prod3} className="card-img-top custom-image" alt="Product Image" />
-            <div className="card-body">
-                <h5 className="card-title text-truncate">Элитная вилла</h5>
-                <ul className="list-group list-group-flush">
-                    <li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
-                    <li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
-                </ul>
-                <a href="#" className="btn btn-custom mt-3">Купить</a>
-            </div>
-        </div>
-            </div>
-    <div className="col-md-2 ">
-        <div className="card h-5">
-            <img src={prod3} className="card-img-top custom-image" alt="Product Image" />
-            <div className="card-body">
-                <h5 className="card-title text-truncate">Элитная вилла</h5>
-                <ul className="list-group list-group-flush">
-                    <li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
-                    <li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
-                </ul>
-                <a href="#" className="btn btn-custom mt-3">Купить</a>
-            </div>
-        </div>
-            </div>
-
-    <div className="col-md-2">
-        <div className="card h-5">
-            <img src={prod3} className="card-img-top custom-image" alt="Product Image" />
-            <div className="card-body">
-                <h5 className="card-title text-truncate">Элитная вилла</h5>
-                <ul className="list-group list-group-flush">
-                    <li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
-                    <li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
-                </ul>
-                <a href="#" className="btn btn-custom mt-3">Купить</a>
-            </div>
-        </div>
-            </div>
-    <div className="col-md-2">
-        <div className="card h-5">
-            <img src={prod3} className="card-img-top custom-image" alt="Product Image" />
-            <div className="card-body">
-                <h5 className="card-title text-truncate">Элитная вилла</h5>
-                <ul className="list-group list-group-flush">
-                    <li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
-                    <li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
-                </ul>
-                <a href="#" className="btn btn-custom mt-3">Купить</a>
-            </div>
-        </div>
-            </div>
-    </div>
-        </div>
-        <div className="container mt-5">
-        <div className="row mb-4">
-            <div className="col-md-2">
-        <div className="card mb-4  h-5">
-            <img src={prod1} className="card-img-top custom-image" alt="Product Image" />
-            <div className="card-body">
-                <h5 className="card-title text-truncate">Дом «Лебедь»</h5>
-                <ul className="list-group list-group-flush">
-                    <li className="list-group-item"><strong>Площадь дома:</strong> 220 м2</li>
-                    <li className="list-group-item"><strong>Цена:</strong> 10 500 000 руб</li>
-                </ul>
-                <a href="#" className="btn btn-custom mt-3">Купить</a>
-            </div>
-        </div>
-            </div>
-
-        <div className="col-md-2">
-            <div className="card mb-4 h-5">
-                <img src={prod2} className="card-img-top custom-image" alt="Product Image" />
-                <div className="card-body">
-                    <h5 className="card-title text-truncate">Дом Вашей мечты</h5>
-                    <ul className="list-group list-group-flush">
-                        <li className="list-group-item"><strong>Площадь дома:</strong> 230 м2</li>
-                        <li className="list-group-item"><strong>Цена:</strong> 20 500 000 руб</li>
-                    </ul>
-                    <a href="#" className="btn btn-custom mt-3">Купить</a>
-                </div>
-            </div>
-                </div>
-
-        <div className="col-md-2">
-            <div className="card mb-4 h-5">
-                <img src={prod3} className="card-img-top custom-image" alt="Product Image" />
-                <div className="card-body">
-                    <h5 className="card-title text-truncate">Элитная вилла</h5>
-                    <ul className="list-group list-group-flush">
-                        <li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
-                        <li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
-                    </ul>
-                    <a href="#" className="btn btn-custom mt-3">Купить</a>
-                </div>
-            </div>
-                </div>
-        <div className="col-md-2">
-            <div className="card mb-4 h-5">
-                <img src={prod3} className="card-img-top custom-image" alt="Product Image" />
-                <div className="card-body">
-                    <h5 className="card-title text-truncate">Элитная вилла</h5>
-                    <ul className="list-group list-group-flush">
-                        <li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
-                        <li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
-                    </ul>
-                    <a href="#" className="btn btn-custom mt-3">Купить</a>
-                </div>
-            </div>
-                </div>
-
-        <div className="col-md-2">
-            <div className="card mb-4 h-5">
-                <img src={prod3} className="card-img-top custom-image" alt="Product Image" />
-                <div className="card-body">
-                    <h5 className="card-title text-truncate">Элитная вилла</h5>
-                    <ul className="list-group list-group-flush">
-                        <li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
-                        <li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
-                    </ul>
-                    <a href="#" className="btn btn-custom mt-3">Купить</a>
-                </div>
-            </div>
-                </div>
-        <div className="col-md-2">
-            <div className="card mb-4 h-5">
-                <img src={prod3} className="card-img-top custom-image" alt="Product Image" />
-                <div className="card-body">
-                    <h5 className="card-title text-truncate">Элитная вилла</h5>
-                    <ul className="list-group list-group-flush">
-                        <li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
-                        <li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
-                    </ul>
-                    <a href="#" className="btn btn-custom mt-3">Купить</a>
-                </div>
-            </div>
-                </div>
-        </div>
-        </div>
-        </>
     );
 };
-
 export default Page2;

IP/src/pages/Page3.jsx

@@ -1,20 +1,42 @@
 import { useState } from 'react';
 import { Form, Button } from 'react-bootstrap';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import useUser from '../components/users/userHook';
+import useSubmit from '../components/users/loginHook';
 import back1 from '../assets/back1.jpg';
 
-const Page3 = () => {
+const PersonalAccountLogin  = () => {
-    const [validated, setValidated] = useState(false);
+  const [validated, setValidated] = useState(false);
+  const { userLogin } = useUser();
+  const { onSubmit } = useSubmit();
+  const navigate = useNavigate();
 
-     const handleSubmit = (event) => {
+    const handleSubmit = async (event) => {
-         const form = event.currentTarget;
+      const form = event.currentTarget;
-         if (form.checkValidity() === false) {
+      if (form.checkValidity() === false) {
-             event.preventDefault();
+          event.preventDefault();
-             event.stopPropagation();
+          event.stopPropagation();
+      } else {
+        event.preventDefault();
+        setValidated(true);
+
+        const formData = {
+          handle: form.elements.formHandle.value,
+          password: form.elements.formPassword.value,
+        };
+
+        const result = await onSubmit(formData);
+
+        if (result === 1) {
+          alert('Пользователь с таким хэндлом не существует');
+        } else if (result === 2) {
+          alert('Введен неверный пароль');
+        } else if (result === 3) {
+          userLogin(formData);
+          navigate('/Page7');
         }
-
+      }
-         setValidated(true);
+    };
-     };
 
     return (
     <>
@@ -22,27 +44,26 @@ const Page3 = () => {
                 <div className="d-flex align-items-center justify-content-center" style={{ height: '100%' }}>
                     <img className="background-image" src={back1} alt="Background Image" />
                     <div className="row justify-content-center"></div>
-                        <Form className="col-md-7 m-0" action="./page3" method="get" noValidate validated={validated} onSubmit={handleSubmit}>
+                        <Form className="col-md-7 m-0" noValidate validated={validated} onSubmit={handleSubmit}>
-                            <h3 className="text-center mb-3">Вход</h3>
+                            <h3 className="text-center mb-4">Вход</h3>
                             <Form.Group className="mb-4">
-                                <Form.Label htmlFor="phone"></Form.Label>
+                            <Form.Control type="text" id="formHandle" placeholder="Имя" required />
-                                <Form.Control id="phone" name="phone" type="tel" placeholder="Введите номер телефона" required />
+						<Form.Control.Feedback>Имя заполнено</Form.Control.Feedback>
+						<Form.Control.Feedback type="invalid">Имя не заполнено</Form.Control.Feedback>
                             </Form.Group>
                             <Form.Group className="mb-4">
-                                <Form.Label htmlFor="password"></Form.Label>
+                            <Form.Control type="password" id="formPassword" placeholder="Пароль" required />
-                                <Form.Control id="password" name="password" type="password" placeholder="Введите пароль" required />
+						<Form.Control.Feedback>Пароль заполнен</Form.Control.Feedback>
+						<Form.Control.Feedback type="invalid">Пароль не заполнен</Form.Control.Feedback>
                             </Form.Group>
                             <div className="text-center">
-                                <Link to='/page7'>
+                                    <Button to='/page7' className="btn-custom custom-rounded w-40" type="submit">
-                                    <Button className="btn-custom custom-rounded w-40" type="submit">
                                         Отправить
                                     </Button>
-                                </Link>
                             </div>
                             <div className="text-center mt-5">
                                 <p>
                                     Еще не зарегистрированы? <Link to="/page6">Авторизуйтесь</Link>
-                                    Пример личного кабинета <Link to="/page7">ЛК</Link>
                                 </p>
                             </div>
                         </Form>
@@ -52,4 +73,4 @@ const Page3 = () => {
     );
 };
 
-export default Page3;
+export default PersonalAccountLogin;

IP/src/pages/Page4.jsx

@@ -1,29 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { Button, ButtonGroup, Table } from 'react-bootstrap';
-
-const Page4 = () => {
-    return (
-        <>
-            <ButtonGroup>
-                <Button id="items-add" variant="info">Добавить товар (диалог)</Button>
-            </ButtonGroup>
-            <Table className="mt-2" striped>
-                <thead>
-                    <tr>
-                    <th scope="col">№</th>
-                    <th scope="col" className="w-25">Товар</th>
-                    <th scope="col" className="w-25">Цена</th>
-                    <th scope="col" className="w-25">Количество</th>
-                    <th scope="col" className="w-25">Сумма</th>
-                    <th scope="col" className="w-25">Материалы</th>
-                    <th scope="col"></th>
-                    <th scope="col"></th>
-                    </tr>
-                </thead>
-                <tbody></tbody>
-            </Table>
-        </>
-    );
-};
-
-export default Page4;

IP/src/pages/Page6.jsx

@@ -1,21 +1,50 @@
-/* eslint-disable linebreak-style */
-/* eslint-disable eol-last */
 import { useState } from 'react';
 import { Button, Form } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
 import back3 from '../assets/back3.jpg';
+import UsersApiService from '../components/users/service/UsersApiService';
+import useSubmit from '../components/users/regHook';
+import useUser from '../components/users/userHook';
 
 const Page6 = () => {
     const [validated, setValidated] = useState(false);
+    const { userLogin } = useUser();
+    const { onSubmit } = useSubmit();
+    const navigate = useNavigate();
 
-    const handleSubmit = (event) => {
+    const [name, setName] = useState('');
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+
+    const handleSubmit = async (event) => {
         const form = event.currentTarget;
         if (form.checkValidity() === false) {
             event.preventDefault();
             event.stopPropagation();
-        }
+        } else {
+            event.preventDefault();
+            setValidated(true);
 
-        setValidated(true);
+            const formData = {
+                handle: name,
+                email: email,
+                password: password,
+            };
+
+            const result = await onSubmit(formData);
+
+            if (result === 1) {
+                alert('Пользователь с таким хэндлом уже существует');
+            } else if (result === 2) {
+                alert('Пользователь с таким email уже существует');
+            } else if (result === 3) {
+                await UsersApiService.create(formData);
+                userLogin(formData);
+                navigate('/Page7');
+            }
+        }
     };
+
     return (
         <>
         <img className="background-image-2" src={back3} alt="Background Image" />
@@ -24,24 +53,44 @@ const Page6 = () => {
                 <div className="row justify-content-center"></div>
                     <Form className="col-md-7 m-0" action="./page6" method="post" noValidate validated={validated} onSubmit={handleSubmit}>
                         <h3 className="text-center mb-5">Регистрация</h3>
-                        <Form.Group className="mb-2">
-                            <Form.Label htmlFor="firstName"></Form.Label>
-                            <Form.Control id="firstName" name="firstName" type="text" placeholder="Введите ваше имя" required />
-                        </Form.Group>
-                        <Form.Group className="mb-2">
-                            <Form.Label htmlFor="lastName"></Form.Label>
-                            <Form.Control id="lastName" name="lastName" type="text" placeholder="Введите вашу фамилию" required />
-                        </Form.Group>
-                        <Form.Group className="mb-2">
-                            <Form.Label htmlFor="phone"></Form.Label>
-                            <Form.Control id="phone" name="phone" type="tel" placeholder="Введите номер телефона" required />
-                        </Form.Group>
                         <Form.Group className="mb-3">
-                            <Form.Label htmlFor="password"></Form.Label>
+                <Form.Control
-                            <Form.Control id="password" name="password" type="password" placeholder="Введите пароль" required />
+                  type="text"
-                        </Form.Group>
+                  placeholder="Имя" 
+                  id="formHandle"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  required
+                />
+                <Form.Control.Feedback>Имя заполнено</Form.Control.Feedback>
+                <Form.Control.Feedback type="invalid">Имя не заполнено</Form.Control.Feedback>
+              </Form.Group>
+              <Form.Group className="mb-3">
+                <Form.Control
+                  type="email"
+                  placeholder="Email" 
+                  id="formEmail"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  required
+                />
+                <Form.Control.Feedback>Email заполнен</Form.Control.Feedback>
+                <Form.Control.Feedback type="invalid">Email не заполнен</Form.Control.Feedback>
+              </Form.Group>
+              <Form.Group className="mb-3" placeholder="Имя" >
+                <Form.Control
+                  type="password"
+                  placeholder="Пароль" 
+                  id="formPassword"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+                <Form.Control.Feedback>Пароль заполнен</Form.Control.Feedback>
+                <Form.Control.Feedback type="invalid">Пароль не заполнен</Form.Control.Feedback>
+              </Form.Group>
                         <div className="text-center">
-                            <Button className="btn btn-custom custom-rounded" type="submit">
+                            <Button to='/Page7' className="btn btn-custom custom-rounded" type="submit">
                                 Зарегистрироваться
                             </Button>
                         </div>

IP/src/pages/Page7.jsx

@@ -1,75 +1,11 @@
-/* eslint-disable linebreak-style */
+import Cart from '../components/cart/Cart.jsx';
-/* eslint-disable eol-last */
- import prod1 from '../assets/prod1.jpg';
- import prod2 from '../assets/prod2.jpg';
- import prod3 from '../assets/prod3.jpg';
 
-const Page7 = () => {
+const MyTickets = () => {
     return (
-        <>
+    <>
-        <div className="container-fluid p-2" style={{ margin: 'auto' }}>
+    <Cart />
-    <div className="container mt-5">
+    </>
-        <div className="row">
-            <div className="col-md-10 cart-container">
-                <h2>Корзина</h2>
-                <div>
-                    <div className="container mt-5">
-                        <div className="row">
-                            <div className="col-md-3">
-                        <div className="card mb-4 h-10">
-                            <img src={prod1} className="card-img-top custom-image" alt="Product Image" />
-                            <div className="card-body">
-                                <h5 className="card-title text-truncate">Дом «Лебедь»</h5>
-                                <ul className="list-group list-group-flush">
-                                    <li className="list-group-item"><strong>Площадь дома:</strong> 220 м2</li>
-                                    <li className="list-group-item"><strong>Цена:</strong> 10 500 000 руб</li>
-                                </ul>
-                                <a href="#" className="btn btn-custom mt-3">Купить</a>
-                            </div>
-                        </div>
-                            </div>
-                            <div className="col-md-3">
-                                <div className="card mb-4 h-10">
-                                    <img src={prod2} className="card-img-top custom-image" alt="Product Image" />
-                                    <div className="card-body">
-                                        <h5 className="card-title text-truncate">Дом Вашей мечты</h5>
-                                        <ul className="list-group list-group-flush">
-                                            <li className="list-group-item"><strong>Площадь дома:</strong> 230 м2</li>
-                                            <li className="list-group-item"><strong>Цена:</strong> 20 500 000 руб</li>
-                                        </ul>
-                                        <a href="#" className="btn btn-custom mt-3">Купить</a>
-                                    </div>
-                                </div>
-                                    </div>
-
-                                    <div className="col-md-3">
-                                        <div className="card mb-4 h-10">
-                                            <img src={prod3} className="card-img-top custom-image" alt="Product Image" />
-                                            <div className="card-body">
-                                                <h5 className="card-title text-truncate">Элитная вилла</h5>
-                                                <ul className="list-group list-group-flush">
-                                                    <li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
-                                                    <li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
-                                                </ul>
-                                                <a href="#" className="btn btn-custom mt-3">Купить</a>
-                                            </div>
-                                        </div>
-                                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div className="col-md-2">
-                <div className="user-info-frame">
-                    <h2>Алексеев Иван</h2>
-                    <p>Телефон: +7 123 456 7890</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-        </>
     );
 };
 
-export default Page7;
+export default MyTickets;

IP/src/pagescss/DetailPage.css

@@ -0,0 +1,61 @@
+#image-container {
+    position:relative;
+    width: 100%;
+    height: 70vh;
+  }
+  
+  #image-container img {
+    width: 100%;
+    height: 100%;
+    object-fit:cover;
+  }
+  
+  #image-container .text-overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+    color: #fff;
+    font-size: 90px;
+  }
+  
+  #container1 {
+    position:relative;
+    padding: 2%;
+    display: grid;
+    /* Три колонки */
+    grid-template-columns: 68% 30%;
+    /* Два ряда */
+    grid-template-rows: auto auto;
+    /* Автоматическое размещение в ряд */
+    grid-auto-flow: row dense;
+    /* Отступы между ячейками */
+    gap: 2%;
+    color:#fafafa;
+    }
+  
+  .row1 {
+    /* Занимает один ряд и
+    растягивается на две колонки */
+    grid-column: span 2;
+    }
+  
+  .info {
+    background-color: #2F2727;
+    padding: 2%;
+    border: 5px solid #1b1818;
+    border-radius: 5px;
+    text-align: center;
+    word-wrap: break-word;
+    margin-bottom: 2%;
+  }
+  .info-text {
+    font-size: 20;
+    flex-basis: 50%;
+    color: white;
+  }
+  .button-overlayAdd button:hover {
+    background-color: #5233ff;
+    color:aqua;
+  }

IP/vite.config.js

@@ -1,4 +1,4 @@
-/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable linebreak-style */
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';