add example with fetch api values

src/api/api.js

@@ -1,9 +1,40 @@
+const tableValues = `
+[
+  {
+    "_id": "67f6a400786730af342903c1",
+    "index": 0,
+    "guid": "ee826e91-aeda-4bc0-8251-93b5612c11ca",
+    "isActive": false,
+    "balance": "$3,449.04",
+    "picture": "http://placehold.it/32x32",
+    "age": 39
+  },
+  {
+    "_id": "67f6a4007b16530a27defd6c",
+    "index": 1,
+    "guid": "9c14ae69-7bd0-43d1-bb50-9ff4af60f032",
+    "isActive": false,
+    "balance": "$2,188.94",
+    "picture": "http://placehold.it/32x32",
+    "age": 23
+  },
+  {
+    "_id": "67f6a4007198cd74501f622a",
+    "index": 2,
+    "guid": "17b72c5b-89f8-4f3d-92e7-b9c5756a065d",
+    "isActive": false,
+    "balance": "$3,003.92",
+    "picture": "http://placehold.it/32x32",
+    "age": 34
+}]`;
 export const sendOrderData = async (formData) => {
     try {
+        const token = getAuth();
         const response = await fetch('http://localhost:3000/request', {
             method: 'POST',
             headers: {
-                'Content-Type': 'application/json'
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${token}`
             },
             body: JSON.stringify(formData)
         });
@@ -17,4 +48,42 @@ export const sendOrderData = async (formData) => {
         console.log(error);
         throw error;
     }
+}
+
+export const authApi = (login, password) => {
+    return 'asdjasjdklasjdloiqee2r724eu23e98e2398equ34983yq89eu2398q3ye932dioq3eoi';
+}
+
+export const getAuth = () => {
+    const token = localStorage.getItem('token');
+
+    if (!token) {
+        throw new Error('Токен не найден');
+    }
+
+    return token
+}
+
+export const fetchServiceItems = () => {
+    getAuth();
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve([
+                { id: 1, techName: "Принтер", createdAt: "2025-01-10", status: "done" },
+                { id: 2, techName: "Ноутбук", createdAt: "2024-01-10", status: "issued" },
+                { id: 3, techName: "Смартфон Vivo", createdAt: "2025-02-10", status: "in_progress" },
+                { id: 4, techName: "Повербанк", createdAt: "2024-11-10", status: "waiting" },
+                { id: 5, techName: "Монитор Samsung", createdAt: "2025-03-01", status: "waiting_details" },
+                { id: 6, techName: "Компьютер Эльбрус", createdAt: "2025-02-15", status: "accept1" }
+            ])
+        }, 5000)
+    })
+};
+
+
+export const fetchServiceItemJson = () => {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve(JSON.parse(tableValues))
+    })});
 }

src/components/Layout.jsx

@@ -2,14 +2,21 @@ import { Link } from "react-router-dom"
 import "./Layout.css"
 
 export const Layout = ({ children }) => {
+    const checkAuth = () => {
+        const token = localStorage.getItem('token');
+        if (!token) {
+            return false;
+        }
+        return true;
+    }
     return (
         <div className="layout">
             <header className="header">
                 <h1 className="header__logo">Сервис</h1>
                 <nav className="header__menu">
-                    <a href="/">Список заказов</a>
+                    <Link to="/">Список заказов</Link>
                     <Link to='/add'>Добавить заказ</Link>
-                    <a href="/login">Войти</a>
+                    {checkAuth() ? <Link to='/logout'>Выход</Link> : <Link to="/login">Войти</Link>}
                 </nav>
             </header>
             <main className="main-content">

src/components/services/ordersService.js

@@ -1,15 +1,4 @@
-const fetchServiceItems = () => {
+import { fetchServiceItems } from "../../api/api";
-    return new Promise((resolve) => {
-        setTimeout(() => {resolve([
-            { id: 1, techName: "Принтер", createdAt: "2025-01-10", status: "done" },
-            { id: 2, techName: "Ноутбук", createdAt: "2024-01-10", status: "issued" },
-            { id: 3, techName: "Смартфон Vivo", createdAt: "2025-02-10", status: "in_progress" },
-            { id: 4, techName: "Повербанк", createdAt: "2024-11-10", status: "waiting" },
-            { id: 5, techName: "Монитор Samsung", createdAt: "2025-03-01", status: "waiting_details" },
-            { id: 6, techName: "Компьютер Эльбрус", createdAt: "2025-02-15", status: "accept1" }
-        ])}, 5000)
-    })
-};
 
 const RU_STATUSES = {
     done: "Готово",

src/pages/Home.jsx

@@ -1,20 +1,21 @@
 import { useState } from "react";
-import {getServiceItemsForRender} from '../components/services/ordersService'
+import { getServiceItemsForRender } from '../components/services/ordersService'
 import { useEffect } from "react";
-import { CircularProgress } from "@mui/material";
+import { Alert, CircularProgress } from "@mui/material";
-import {Layout } from '../components/Layout'
+import { Layout } from '../components/Layout'
-import {Table } from '../components/Table'
+import { Table } from '../components/Table'
 
 const HEADS = [
     'Номер заказа',
     'Наименование техники',
     'Дата',
     'Статус'
-  ]
+]
 
 export const Home = () => {
     const [serviceItems, setServiceItems] = useState([]);
     const [loading, setLoading] = useState(true);
+    const [isAuthError, setIsAuthError] = useState(false);
 
     useEffect(() => {
         const getData = async () => {
@@ -23,6 +24,7 @@ export const Home = () => {
                 setServiceItems(data);
             } catch (error) {
                 console.log(error);
+                setIsAuthError(true);
             } finally {
                 setLoading(false);
             }
@@ -39,7 +41,7 @@ export const Home = () => {
 
     return (
         <Layout children={
-            () => <Table data={serviceItems} heads={HEADS} availableKeys={["id", "techName", "createdAt", "status"]} />
+            () =>  isAuthError ? <Alert severity="error">{'Пользователь не авторизован'}</Alert> : <Table data={serviceItems} heads={HEADS} availableKeys={["id", "techName", "createdAt", "status"]} /> 
         } />
     )
 }

src/pages/Login.jsx

@@ -1,9 +1,12 @@
 import { Alert, Button, Stack, TextField } from "@mui/material"
 import { Layout } from "../components/Layout"
 import { useState } from "react";
+import { authApi } from "../api/api";
+import { useNavigate } from "react-router-dom";
 
 export const Login = () => {
     const error = null;
+    const navigate = useNavigate();
     const [formData, setFormData] = useState({
         login: null,
         password: null
@@ -14,9 +17,9 @@ export const Login = () => {
     };
     const handleSubmit = (e) => {
         //здесь что-то типа обращения к серверу
-        const token = 'asdjasjdklasjdloiqee2r724eu23e98e2398equ34983yq89eu2398q3ye932dioq3eoi'
+        const token = authApi('user1', 'pass');
         localStorage.setItem('token', token);
-        // todo: здесь продолжить с логикой отображения интерфейса
+        navigate('/');
     };
     return <Layout children={() => {
         return <Stack spacing={2}>