добавляю все изменения проекта на текущий момент

resources/css/app.css

@@ -1,11 +1,189 @@
-@import 'tailwindcss';
+/* ГАВРИЛОВ. ВЫЯСНИТЬ, ГДЕ ИСПОЛЬЗУЮТСЯ */
 
-@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
-@source '../../storage/framework/views/*.php';
-@source '../**/*.blade.php';
-@source '../**/*.js';
-
-@theme {
-    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-        'Segoe UI Symbol', 'Noto Color Emoji';
+html {
+  overflow-y: scroll;
+}
+
+#root{
+  --color_ruby: #ff0078;
+}
+
+.container {
+  background-color: lightblue;
+  padding: 20px;
+}
+
+#menu-container{
+  display: flex;
+
+  &>#menu__left-block{
+    flex-basis: 15%;
+
+    &>.menu__left-block__call-app{
+      display: flex;
+
+      &>.fa{
+        flex-basis: 20%;
+      }
+    }
+  }
+}
+
+.switcher-container{
+  position: fixed;
+  top: 0;
+  right: 0;
+  display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  
+  &>.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+    margin: 9px;
+  
+    &>.switcher__favorite-app { 
+      opacity: 0;
+      width: 0;
+      height: 0;
+
+      &.showFav + .slider{
+        background-color: var(--color_ruby);
+
+        &:before{
+          transform: translateX(26px);
+          color: var(--color_ruby);
+          padding: 2px 0 0 0;
+          align-content: baseline;
+        }
+      }
+    }
+
+    &>.slider {
+      position: absolute;
+      cursor: pointer;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background-color: #ccc;
+      -webkit-transition: .4s;
+      transition: .4s cubic-bezier(0,1,0.5,1);
+      border-radius: 4px;
+    
+      @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
+      &:before {
+        position: absolute;
+        content: "\f006";
+        font-family: FontAwesome;
+        text-align: center;
+        font-size: 1.2rem;
+        height: 26px;
+        width: 26px;
+        left: 4px;
+        bottom: 4px;
+        background-color: white;
+        -webkit-transition: .4s;
+        transition: .4s cubic-bezier(0,1,0.5,1);
+        border-radius: 3px;
+      }
+
+      &.round {
+        border-radius: 34px;
+      
+        &:before {
+          border-radius: 50%;
+        }
+      }
+    }
+  }
+}
+
+
+
+
+.switcher__favorite-app.showFav + .slider {
+  background-color: var(--color_ruby);
+}
+.switcher__favorite-app.showFav + .slider:before {
+  transform: translateX(26px);
+}
+/* Rounded sliders */
+/* .slider.round {
+  border-radius: 34px;
+
+  &:before {
+    border-radius: 50%;
+  }
+} */
+
+#round {
+  border-radius: 34px;
+
+  &:before {
+    border-radius: 50%;
+  }  
+}
+
+#menu__app-container__app-block{
+  /* display: grid;
+    grid-template-columns: 50% 50%; */
+  column-count: 2;
+
+  >.apps-block__proc{
+    margin-bottom: 20px;
+
+    >.proc__title{
+      font-size: 1.1rem;
+      padding: 10px 0;
+      font-weight: 600;
+    }
+
+    >.proc__title.proc-hide{
+      display: none;
+    }
+  }
+
+  .script-list__el{
+    display: flex;
+
+    >.script-list__el__script-name{
+      margin-bottom: 5px;
+      transition: 0.2s;
+      &:hover{
+        transform: translateY(-1px);
+      }
+
+      >a{
+        text-decoration: none;
+        color: black;
+        
+        &:hover{
+          color: var(--color_ruby);
+        }
+      }
+    }
+
+    >.fa-star{
+      margin-left: 5px;
+      cursor: pointer;
+      opacity: 0.2;
+      transition: 0.3s;
+    }
+
+    >.fa-star:hover{
+      opacity: 1;
+    }
+
+    >.fa-star.favorite{
+      opacity: 1;
+      color: var(--color_ruby);
+    }
+  }
+
+  .script-list__el.script-hide{
+    display: none;
+  }
 }

resources/css/components/MagicPopupContainer.css

@@ -0,0 +1,8 @@
+#popup-parent-container{
+  padding: 10px;
+  top: 150px;
+  z-index: 901;
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%, -50px);
+}

resources/css/components/entityHistory.css

@@ -0,0 +1,121 @@
+@import url('./../variables.css');
+
+/* #modal-window__background{
+  position: fixed;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: #6a6a6ab5;
+  top: 0;
+  z-index: 99;
+} */
+
+.entity-hist-container{
+  position: fixed;
+  width: 50%;
+  top: 10%;
+  left: 25%;
+  z-index: 100;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0px 0px 15px 1px #9b9999;
+
+  &>.hist__header-block{
+    display: flex;
+      align-items: center;
+      justify-content: space-between;
+    background: var(--color_graphite_main);
+    min-height: 7%;
+    height: auto;
+    border-radius: 10px;
+    color: white;
+    padding: 10px;
+
+    &>.hist__header__buttons{
+
+      &>.header__buttons__close{
+        transform: rotate(45deg);
+        font-size: 2rem;
+        color: var(--color_ruby_main);
+        cursor: pointer;
+      }
+    }
+  }
+
+  &>.hist__content-block{
+    overflow-y: scroll;
+    padding: 10px;
+    max-height: 500px;
+
+    &>.hist-container__date-block{
+      display: flex;
+    
+      &>.date-block__date{
+        flex-basis: 15%;
+
+        &>div{
+          position: sticky;
+          top: 0px;
+          padding: 3px;
+          background: var(--color_purple_main);
+          border-radius: 5px 0 0 5px;
+          color: white;
+        }
+      }
+
+      &>.date-block__changes{
+        flex-basis: 85%;
+        border-left: 2px solid black;
+        padding: 0 10px;
+
+        &>.changes__action-block{
+
+          & .action-block__action-name{
+            padding: 3px;
+            border-radius: 3px;
+            font-size: 1.2rem;
+            /* border-bottom: 3px solid var(--color_purple_main); */
+            background: color-mix(in srgb, var(--color_purple_main) 20%, transparent);
+            box-shadow: 0px 2px 3px 0px #c0bdd3;
+          }
+
+          &:last-child{
+            margin-bottom: 30px;
+          }
+
+          &>.changes__date-time-block{
+            display: flex;
+              justify-content: space-between;
+            margin: 5px 0px 10px 0px;
+            color: rgb(173 173 173);
+          }
+
+          &>.changes__details{
+            margin-bottom: 15px;
+
+            & .changes__details__el{
+              display: flex;
+                justify-content: space-between;
+              margin-bottom: 10px;
+
+              &>.changes__details__el__prop-name{
+                flex-basis: 30%;
+                font-weight: 500;
+              }
+
+              &>.changes__details__el__prop-val{
+                flex-basis: 70%;
+                background: #91919121;
+                border-radius: 5px;
+                padding: 5px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+} 
+
+

resources/css/components/formValidErr.css

@@ -0,0 +1,15 @@
+@import url('./../variables.css');
+
+#form-valid-err-container{
+
+  background: red;
+  padding: 5px;
+  border-radius: 5px;
+
+  &.form-valid-err--hide{
+    display: none;
+  }
+  &.form-valid-err--visible{
+    display: block;
+  }
+}

resources/css/components/magicPopup.css

@@ -0,0 +1,104 @@
+@import url('./../variables.css');
+@import '@fortawesome/fontawesome-free/css/all.css';
+
+/* Анимация таймера popup, по истечению которого он скроется */
+@keyframes popupTimer {
+  from{
+    width: 100%;
+  }
+  to {
+    width: 0;
+  }
+}
+
+.magic-popup-container{
+  padding: 5px;
+  margin-bottom: 15px;
+  border-radius: 5px;
+  display: flex;
+  box-shadow: 0px 3px 4px 1px #918787;
+  background: var(--color_graphite_main);
+  width: 500px;
+  transition: 0.3s;
+  opacity: 0;
+  transform: translateY(-10px);
+
+  &.hide{
+    opacity: 0;
+  }
+
+  &.show{
+    opacity: 1;
+    transform: translateY(0px);
+  }
+
+  &.hidePopup{
+    transform: translateY(10px);
+    opacity: 0;
+  }
+
+  &>.popup__icon-block{
+    flex-basis: 10%;
+    align-self: center;
+
+    &>i{
+      font-size: 4rem;
+      color: var(--color_purple_main);
+
+      &.fa-circle-check{
+        color: var(--color_emerald_main);
+      }
+      &.fa-circle-xmark{
+        color: var(--color_ruby_main);
+      }
+      &.fa-circle-exclamation{
+        color: orange;
+      }
+    }
+  }
+
+  &>.popup__content-block{
+    flex-basis: 90%;
+    border-left: 2px solid white;
+
+    &>.popup__content__text-block{
+      color: white;
+      padding: 5px;
+      text-align: center;
+      font-size: 1.2rem;
+    }
+
+    &>.popup__button-block{
+      margin: 10px 0;
+
+      &>button{
+        font-size: 1rem;
+        margin: auto;
+        opacity: 0.5;
+        background: var(--color_purple_main);
+        transition: 0.3s;
+
+        &:hover{
+          opacity: 1;
+        }
+      }
+    }
+
+    .popup__timer-block__timer{
+
+      &.popup__timer-block__timer {
+        height: 5px;
+        margin: 0 5px;
+        border-radius: 10px;
+
+        &.timerProgress{
+          background: #63707a;
+          animation: popupTimer;
+          animation-duration: 3s;
+          animation-fill-mode: forwards;
+          animation-timing-function: linear;
+        }
+      }
+    }
+  }
+}

resources/css/components/preloader.css

@@ -0,0 +1,173 @@
+@import url('./../variables.css');
+
+#preloader_container {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.3);
+  z-index: 900;
+  backdrop-filter: blur(5px);
+
+  &.hide {
+    display: none;
+  }
+
+  &>#preloader{
+    width: 200px;
+    height: 200px;
+    background: none;
+    position: relative;
+    top: 30%;
+    left: 0;
+    right: 0;
+    margin-left: auto;
+    margin-right: auto;
+
+    &>.circle {
+      position: absolute;
+      border-radius: 50%;
+      box-sizing: border-box;
+      border: 10px solid transparent;
+    }
+
+    &>#circle_one {
+      width: 80%;
+      height: 80%;
+      border-top-width: 10px;
+      left: 5%;
+      top: 5%;
+      animation: roll_one 4.5s;
+      animation-fill-mode: forwards;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+
+      &.preloader-emerald-circle{
+        border-top-color: var(--color_emerald_light);
+      }
+      &.preloader-ruby-circle{
+        border-top-color: var(--color_ruby_main);
+      }
+      &.preloader-graphite-circle{
+        border-top-color: var(--color_graphite_main);
+      }
+    }
+
+    &>#circle_two {
+      width: 70%;
+      height: 70%;
+      left: 10%;
+      top: 10%;
+      border-right-width: 10px;
+      animation: roll_two 2.5s;
+      animation-fill-mode: forwards;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+
+      &.preloader-emerald-circle{
+        border-right-color: var(--color_emerald_light);
+      }
+      &.preloader-ruby-circle{
+        border-right-color: var(--color_ruby_main);
+      }
+      &.preloader-graphite-circle{
+        border-right-color: var(--color_graphite_main);
+      }
+    }
+
+    &>#circle_three {
+      width: 60%;
+      height: 60%;
+      left: 15%;
+      top: 15%;
+      border-bottom-width: 10px;
+      animation: roll_three 3s;
+      animation-fill-mode: forwards;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
+
+      &.preloader-emerald-circle{
+        border-bottom-color: var(--color_emerald_light);
+      }
+      &.preloader-ruby-circle{
+        border-bottom-color: var(--color_ruby_main);
+      }
+      &.preloader-graphite-circle{
+        border-bottom-color: var(--color_graphite_main);
+      }
+    }
+
+    
+
+    &>#preloader_text {
+      width: 150%;
+      left: -25%;
+      font-size: 1.5rem;
+      position: absolute;
+      bottom: -50px;
+      text-align: center;
+      color: white;
+    }
+
+    &>#logo {
+      position: absolute;
+      background: none;
+      width: 40%;
+      height: 40%;
+      top: 25%;
+      left: 25%;
+
+      &>.logo_square {
+        position: absolute;
+        box-sizing: border-box;
+      }
+
+      &>#left-top {
+        width: 60%;
+        height: 70%;
+        top: 15%;
+        left: 20%;
+        border-left: 7px solid white;
+        border-top: 7px solid white;
+        border-top-left-radius: 45%;
+      }
+
+      &>#right-bottom {
+        width: 40%;
+        height: 50%;
+        top: 15%;
+        left: 40%;
+        border-right: 7px solid white;
+        border-bottom: 7px solid white;
+        border-bottom-right-radius: 45%;
+        border-bottom-left-radius: 10%;
+      }
+    }
+  }
+}
+
+@keyframes roll_one {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes roll_two {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+@keyframes roll_three {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(720deg);
+  }
+}

resources/css/general.css

@@ -0,0 +1,43 @@
+/* ГАВРИЛОВ. ВЫЯСНИТЬ, ГДЕ ИСПОЛЬЗУЮТСЯ */
+
+#root{
+  padding: 10px;
+}
+
+.form-container{
+
+  &.form-container--small-size{
+    width: 30%;
+  }
+  &.form-container--medium-size{
+    width: 50%;
+  }
+
+  &.form-container--left-pos{
+    margin-left: 10px;
+  }
+  &.form-container--mid-pos{
+    margin: 25px auto;
+  }
+}
+
+.form__field-block{
+  margin: 15px 0;
+}
+
+.btn-block{
+  margin: 15px 0;
+  padding: 15px 0;
+  display: flex;
+    justify-content: flex-start;
+    gap: 10px;
+}
+
+
+/* OVERWRITE */
+.renButton{
+
+  &.renButton--tertiary{
+    background: #dfdfdf;
+  }
+}

resources/css/main_styles.css

@@ -0,0 +1,27 @@
+#page__content-block{
+  padding: 10px;
+}
+
+#page__header-block{
+  position: sticky;
+  top: 0;
+  z-index: 99;
+  box-shadow: 0px 2px 9px 3px #8f8d8d;
+
+  & .header-block__header-container{
+    display: flex;
+      justify-content: space-between;
+    padding: 10px;
+    background: var(--color_graphite_main);
+
+    & .header-container__block{
+      display: flex;
+        gap: 10px;
+        align-items: center;
+
+      & .header-container__block__app-name{
+        color: white;
+      }  
+    }  
+  }
+}

resources/css/variables.css

@@ -0,0 +1,7 @@
+:root{
+  --color_graphite_main: #323e48;
+  --color_emerald_main: #77cb10;
+  --color_emerald_light: #95fa77;
+  --color_ruby_main: #ff0078;
+  --color_purple_main: #7864eb;
+} 

resources/js/api.js

@@ -0,0 +1,80 @@
+import axios from 'axios';
+
+/**
+ * @author dgavrilov
+ */
+
+//ГАВРИЛОВ
+//переименуй файл на axios
+
+//Инстанс api контура
+const api = axios.create({
+  baseURL: '/public/api/',
+  withCredentials: true,
+  headers: { 
+    'content-type': 'application/json',
+    'Accept': 'application/json',
+  }
+})
+
+//Инстанс web контура
+const web = axios.create({
+  baseURL: '/public/',
+  withCredentials: true,
+  headers: { 
+    'content-type': 'application/json',
+    'Accept': 'application/json',
+  }
+})
+
+//Гаврилов. 
+//Перехват запросов. Добавить подстановку bearer token? 
+// api.interceptors.request.use();
+
+let isRefreshing = false, //Флаг выполнения запроса на обновления токена. Пока он иеет значение true, остальные запросы, попадающие в очередь из за полученной 401 ошибки кладутся в массив queueRqsts
+    queueRqsts = []; //запросы, которые получили 401 ошибку, одновремменно кладутся в эту переменную в виде промимсов, чтобы быть вызванными позднее, когда будет результат обновления токена превого запроса
+    //Если api ответ возвращает 401 ошибку, отправляем web запрос на роут фонового обновления санктум токена, где происходит проверка сессии, срока жизни санктум токена и его обновление, при удовлетворяющих условиях
+
+//Перехват ответов api
+api.interceptors.response.use(
+  response => response,
+  async error => {
+    const originalRequest = error.config; //Параметры вызываемого запроса
+    // originalRequest._retry = true;
+    if (error.response?.status === 401) {
+      if (isRefreshing) {
+        return new Promise( (resolve, reject) => {
+          queueRqsts.push({
+            resolve: () => resolve(api(originalRequest)),
+            reject
+          })
+        })
+      } else {
+        isRefreshing = true;
+        try {
+          let resultRefresh;
+          //ГАВРИЛОВ. запись данных формы в session storage при неудачном silent regresh token. Чтобы после перезагрузки страницы подтянуть данные из session storage в форму? тогда придется заморачиваться с компонентом подтягивания данных из session storage при рендеринге страницы
+          resultRefresh = await web.get('silent_token_refresh')
+            if (!resultRefresh.data.original.data.token_refresh) {
+              throw new Error('Сессия истекла');
+            }
+            queueRqsts.forEach(pending => {
+              pending.resolve();
+            })
+            return api(originalRequest);
+        } catch (error) {
+          queueRqsts.forEach(pending => pending.reject(error))
+          isRefreshing = false;
+          queueRqsts = [];
+          window.location.href = '/public/login';
+        } finally {
+          isRefreshing = false;
+          queueRqsts = [];
+        }
+      }
+    }
+    return true;
+  }
+)
+
+export default api;

resources/js/app.tsx

@@ -0,0 +1,14 @@
+import { createRoot } from 'react-dom/client';
+import '@SharePoint/rencredit_uikit/dist/static/fonts/mont/Mont.css';
+import '@fortawesome/fontawesome-free/css/all.css';
+import { UIKitThemeProvider } from '@SharePoint/rencredit_uikit';
+import MenuApp from './components/MenuApp.tsx'; // Создайте этот файл, если используете React
+import React from 'react';
+
+const container:HTMLElement = document.getElementById('root')!;
+const root = createRoot(container);
+root.render(
+  <UIKitThemeProvider>
+    <MenuApp />
+  </UIKitThemeProvider>
+);

resources/js/bootstrap.js

@@ -1,4 +1,34 @@
+import 'bootstrap';
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
 import axios from 'axios';
 window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: import.meta.env.VITE_PUSHER_APP_KEY,
+//     cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
+//     wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
+//     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
+//     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
+//     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
+//     enabledTransports: ['ws', 'wss'],
+// });

resources/js/components/MagicLogin.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { useEffect, useState } from "react";
+import { getCsrfToken } from './../services/getCsrfService';
+
+function MagicLogin ()
+{
+  //Состояние с введенным логином
+  const [userLogin, setUserLogin] = useState<string>('');
+
+  return (
+    <div id="login-container">
+      <div id="login-container__magic-name">Magic</div>
+      <div id="login-container__form">
+        <form action="login" method="POST" autoComplete="on">
+          <input 
+            type="hidden" 
+            name="_token" 
+            value={getCsrfToken()}
+          />
+          <input name="_auth_login" type="text" onChange={ (e) => setUserLogin(e.target.value) } placeholder="Логин" required/>
+          <input name="_auth_password" type="password" placeholder="Пароль" required/>
+          <button type="submit" onClick={ () => {
+            //При сабмите кладем логин в локалсторадж для того, чтобы при вызове api ендпоинтов передавать его в заголовках
+            //гаврилов
+            //ТОЧНО ЛИ ЭТО НУЖНО? МОЖЕТ, ЛУЧШЕ ВСЕ API ЕНДПОИНТЫ ПЕРЕПИСАТ ПОД ВЫЗОВ WEB РОУТОВ?
+            localStorage.setItem('magic_auth_login', userLogin);
+            } }>Вход</button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default MagicLogin;

resources/js/components/MagicPopup.tsx

@@ -0,0 +1,108 @@
+import React, { useEffect, useState } from "react";
+import './../../css/components/magicPopup.css';
+import { Button } from '@SharePoint/rencredit_uikit';
+
+/**
+ * Компонент всплывающего окна
+ */
+
+/**
+ * Варианты типов для всплывающих окон: info - стандартный вид, error - произошла ошибка, attention - обратить внимание, success - успешное событие
+ */
+type PopupType = 'info' | 'success' | 'error' | 'attention';
+
+//Интерфейс для передаваемых пропсов объекта всплывающего окна
+interface MagicPopupProps {
+  key: number,
+  id: number,            //Уникальный идентификатор, по котором всплывающее окно будет в том числе размонтироваться
+  message: string,        //Текст всплывающего окна
+  renderIndex: number,    //Индекс рендеринга компонента. Так как может отрисовываться сразу несколько popup, чтобы корректно их отрисовывать с анимацией с задержкой по времени, нужно передавать индекс компонента в наборе. Передавать "вручную" не нужно, он сам рассчитывается в компоненте MagicPopupContainer
+  type: PopupType,        //Тип всплывающего окна, определяющий его внешний вид
+  timeOut?: boolean,      //Если передается true, для элемента будет запущен стандартный таймер исчезновения. ВАЖНО! для всплывающих окон типа error таймер не будет активироваться, даже если передается. Пользователь должен гарантированно ознакомиться с сообщением и сам его закрыть
+  onClose?: (id: number) => void  //Колбэк для полного размонтирования компонента со страницы
+}
+
+/**
+ * Компонент всплывающих окон
+ * @param props 
+ * @returns 
+ */
+export default function MagicPopup (props: MagicPopupProps)
+{
+  //Объект с классами для иконок font-awesome в зависимости от переданного типа всплывающего окна. При изменении, необходимо поменять названия классов в magicPopup.css!
+  const iconNameObj = {
+    info: 'fa-circle-info',
+    success: 'fa-circle-check',
+    error: 'fa-circle-xmark',
+    attention: 'fa-circle-exclamation'
+  }
+  //С помощью деструктуризации указываем значение типа окна по умолчанию
+  const {message, timeOut = true, onClose} = props;
+  //Задержка исчезновения popup
+  const popupDelay = 300;
+  //Итоговая длительность таймера перед закрытием конкретного popup, учитывая его положение в наборе передаваемых попапов
+  const hideTimeOut: number = 3000 + popupDelay;
+  //Стейт для размонтирования попапа
+  const [popupVisible, setPopupVisible] = useState<boolean>(true)
+  //Стейт для плавного сокрытия popup. Класс плавного сокрытия присваивается за пол секунды до полного исчезновения через popupVisible, чтобы сначала плавно сокрыть блок из интерфейса, а затем полностью удалить его из DOM
+  const [popupHideClass, setPopupHideClass] = useState<string>('popup-visible')
+  //Стейт плавного появления popup. Каждый следующий popup в передаваемом наборе должен появляться с небольшой задержкой
+  const [popupShowClass, setPopupFadeinClass] = useState<string>('');
+  //Стейт запуска анимированного таймера исчезновения popup
+  const [popupTimer, setPopupTimer] = useState<string>('');
+  //Функция сокрытия popup. Сначала присваиваем класс, который анимированно скрывает popup, а через небольшую задержку размонтируем компонент
+  function hidePopupBlock (): void 
+  {
+    setPopupHideClass('hidePopup');
+    setTimeout ( () => {
+      setPopupVisible(false);
+    }, 300)
+    //Вызываем метод удаления экземпляра компонента из набора. Так как попапы отрисовываются на основе компонента PopupContainer с набором компонентов MagicPopup, то после их размонтирования, их необходимо и удалить из набора в PopupContainer. Без их удаления, при вызове новых попапов, весь набор с уже просмотренными попапами будет снова отрисовываться.
+    onClose && onClose(props.id)
+  };
+
+  //При рендеринге сразу же запускается таймер сокрытия popup, если аргумент timeOut = true и тип окна != error
+  useEffect( () => {
+    if (timeOut && props.type !== 'error') {
+      setTimeout( () => {
+        //Задержка для отображения таймера нужна, так как при вызове рендеринга нескольких окон, каждое последующее появляется с задержкой. Без задержки ниже, таймер будет запускаться для всех popup одновременно и когда появится последний popup, его таймер уже может закончиться
+        setPopupTimer('timerProgress')
+      }, popupDelay)
+      //Через небольшую задержку после сокрытия компонента срабатывает таймер на размонтирование компонента и удаления его из набора
+      setTimeout( () => {
+        hidePopupBlock()
+      }, hideTimeOut)
+    }
+    //Появление popup при рендеринге
+    setTimeout ( () => {
+      setPopupFadeinClass('show')
+    }, popupDelay)
+  }, [])
+
+  return (
+    popupVisible ? 
+    // <div onClick = {hidePopupBlock}>Раз</div>
+      <div className = {`magic-popup-container ${popupHideClass} ${popupShowClass}`} >
+        <div className = 'popup__icon-block'>
+          <i className = {`fa-solid ${iconNameObj[props.type]}`}></i>
+        </div>
+        <div className = "popup__content-block">
+          <div className = 'popup__content__text-block'>
+            {message}
+          </div>
+          <div className = "popup__button-block">
+            <Button
+              type = "button"
+              className = "popup__button-block__button"
+              onClick = {hidePopupBlock}
+              text = "OK"
+            />
+          </div>
+          <div className = "popup__timer-block">
+            <div className = {`popup__timer-block__timer ${popupTimer}`}></div>
+          </div>
+        </div>
+      </div>
+    : null
+  );
+};

resources/js/components/MagicPopupContainer.tsx

@@ -0,0 +1,45 @@
+import React, { useContext, ComponentProps } from "react";
+import MagicPopup from "./MagicPopup";
+import './../../css/components/magicPopupContainer.css';
+import { PopupContext } from "../contexts/PopupContext";
+
+/**
+ * Компонент контейнера для всплывающих окон, который вызывается на странице и куда передается массив всплывающих окон 
+ */
+
+//ГАВРИЛОВ. ЛОГИЧНЕЕ ЭКСПОРТИРОВАТЬ ТИП С ПРОПСАМИ КОМПОНЕНТА ИЗ САМОГО КОМПОНЕНТА MAGICPOPUP? 
+/**
+ * Дополнительный экспорт типа MagicPopup из компонента всплывающего окна для возможности его импорта, в свою очередь, из компонента, собирающего страницу, например TaxiPage TaxiPage
+ */
+export type MagicPopupType = ComponentProps<typeof MagicPopup>;
+/**
+ * Метод рендеринга контейнара для всплывающих окон
+ * @param {array} magicPopupArr массив объектов типа MagicPopup с информацией о всплывающем окне: текст, таймер и т.д.
+ * @param {callable} delHiddenPopupFunc колбэк для закрытия конкретного всплывающего окна по его уникальному идентификатору
+ * @returns ReactNode
+ */
+export default function MagicPopupContainer ()
+{
+  const popupArr = useContext(PopupContext);
+
+  return (
+    //Родительский контейнер для всех всплывающих окон
+    <div id = "popup-parent-container">
+      {/* { magicPopupArr.map( (propsObj: MagicPopupType, index: number) => ( */}
+      { popupArr.popupArrTest.map( (propsObj: MagicPopupType, index: number) => (
+        <MagicPopup
+          //Подробнее описание пропсов компонента смотри в MagicPopup.tsx
+          id = {propsObj.id}
+          key = {propsObj.id}
+          message = {propsObj.message}
+          timeOut = {propsObj.timeOut}    
+          type = {propsObj.type}          
+          renderIndex = {index}           
+          //onClose = {delHiddenPopupFunc}
+          onClose = {popupArr.delPopupTest}
+        />
+        ))
+      }
+    </div>
+  )
+}

resources/js/components/MenuApp.tsx

@@ -0,0 +1,231 @@
+import { Button } from '@SharePoint/rencredit_uikit';
+import React, { useEffect, useState } from "react";
+
+function MenuApp ()
+{
+  //Приложения и процессы Magic для отображения в меню
+  const [menuApps, setMenuApps] = useState<{
+    'proccesses': object,
+    'scripts': object
+  }>({
+    'proccesses': {},
+    'scripts': {}
+  });
+  //TODO
+  //ВНЕДРИ В КОНТРОЛЛЕРЕ ПРОВЕРКУ ДОСТУПОВ, А НЕ ВОЗВРАЩАЙ ВСЕ ПОДРЯД ПРИЛОЖЕНИЯ
+  //Избранные приложения пользователя
+  const [favApps, setFavApps] = useState<string[]>([]);
+  //Массив избраннных процессов, в приложениях которых есть хотя бы одно избранное
+  const [favProcs, setFavProcs] = useState<string[]>([]);
+  //Состояния видимости скрипта
+  const [hideScriptClass, setHideScriptClass] = useState('');
+  //const [sanctumToken, setSanctumToken] = useState('');
+
+  const sanctumToken = () => {
+    const metaTag = document.getElementById('sanctum_token_block') as HTMLMetaElement;
+    return metaTag.dataset.token;
+  }
+
+  //Получаем при рендере страницы все приложения Magic и все избранные приложения пользователя
+  useEffect( () => {
+    Promise.all(
+      [
+        fetch('api/magic_apps').then(menuAppsRes => menuAppsRes.json()),
+        //TODO
+        //СЮДА ПОТЯГИВАЙ ЛОГИН ПОЛЬЗОВАТЕЛЯ, А НЕ DGAVRILOV
+        fetch('api/user_fav_app/dgavrilov').then(favAppsRes => favAppsRes.json())
+      ]
+    ).then(
+      ([
+        responseMenuApp,
+        responseFavApp
+      ]) => {
+        setMenuApps(responseMenuApp);
+        setFavApps(responseFavApp);
+      }
+    )
+  }, []);
+
+
+  //Обновление видимости процесса (собрания приложений) в зависимости от того находится ли в избранном хотя бы одно приложение
+  useEffect( () => {
+    if (menuApps === null) { return }
+    //Массив с процессами, в которых есть хотя бы одно избранное приложение
+    const favProcsArr:string[] = [];
+    //Мы собираем все избранные приложения в массив-состояние, чтобы при изменении состояния каждого приложения (например при переключении switcher) проверять входит ли это приложение в избранные. Если входит - его родительский процесс не прячем, так как в его дочерних приложениях есть избранные
+    Object.entries(menuApps.proccesses).forEach( (procData) => {
+      //Флаг - есть ли в приложениях процесса хотя бы 1 избранное
+      const hasFavorite: boolean = procData[1].tabs.split(';').some( (tab: string) => {
+        return favApps.includes(tab);
+      })
+      if (hideScriptClass !== 'script-hide' || hasFavorite) {
+        favProcsArr.push(procData[0]);
+      }
+    })
+    setFavProcs(favProcsArr);
+  }, [hideScriptClass, menuApps, favApps]);
+
+  //console.log(sanctumToken())
+
+  //ГАВРИЛОВ
+  //ПОЧЕМУ КОД НИЖЕ ИСПОЛНЯЕТСЯ ПОСТОЯННО ПОКА НЕ БУДЕТ ПОЛУЧЕН КОНТЕНТ ДЛЯ СТРАНИЦЫ ИЗ ПРОМИСОВ ВЫШЕ, А НЕ ОТРАБАТЫВАЕТ ТОЛЬКО ПРИ РЕНДЕРИНГЕ СТРАНИЦЫ
+  //Уместно ли отслеживать состояние до получения запросов fetch в подобном виде?
+  if (menuApps === null || favApps === null) {
+    return <span>прелоадер</span>
+  } else {
+    return (
+      <div id = 'menu-container'>
+        <div id = 'menu__left-block'>
+          <div className = 'menu__left-block__call-app'>
+            <i className = 'fa fa-th-large'></i>
+            <div className = 'mleft-block__call-app__title'>Приложения</div>
+          </div>
+        </div>
+        <div id = 'menu__app-container'>
+          <Button text='Текст' />
+          <div id = 'menu__app-container__app-block'>
+            {/* {console.log(menuApps.scripts)} */}
+              {Object.entries(menuApps.proccesses).map( (proc_val, proc_index) => (
+                <div className = "apps-block__proc" key = { proc_index } data-proc = {proc_val[0]}>
+                  {/* В зависимости от того входит процесс в массив избранных делаем его видимым или скрываем */}
+                  <div className = {`proc__title ${favProcs.includes(proc_val[0]) ? 'proc-visible' : 'proc-hide'}`}>{proc_val[1].title}</div>
+                  <div className = "proc__script-list">
+                    {proc_val[1].tabs.split(';').map( (app_el, app_index) => (
+                      <AppElem 
+                        appIndex = { app_index }
+                        appName = { app_el }
+                        appTitle = { menuApps.scripts[app_el]?.title || "Неизвестный скрипт - " + app_el }
+                        appUrl = { menuApps.scripts[app_el]?.url }
+                        favIconClassName = { favApps.includes(app_el) ? 'favorite' : 'not_favorite' }
+                        hideAppClass = { hideScriptClass }
+                        //Функция обновления актуальный список избранных приложений
+                        setUpdateFavApps = { (newFavApp) => setFavApps(newFavApp) }
+                      />
+                    ))}
+                  </div>
+                </div>
+              )) }
+          </div>
+          <Switcher 
+            toggleAppsVisible = { setHideScriptClass }
+            switcherId = "switcher-menu"
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+
+//Гаврилов
+//ПЕРЕПИСАТЬ АРГУМЕНТЫ ПОД ОБЪЕКТ СО СВОЙСТВАМИ, ИСПОЛЬЗОВАТЬ ...obj
+/**
+ * 
+ * @param {int} appIndex ключ для экземлпяра компонента 
+ * @param {string} appName уникальное имя скрипта 
+ * @param {string} appTitle название скрипта в меню 
+ * @param {string} favIconClassName класс для иконки избранного
+ * @param {string} hideAppClass класс для видимости приложения
+ * @param {string} setUpdateFavApps функция для обновления состояния избранны приложений (при снятия, установки признака избранности)
+ * @returns 
+ */
+function AppElem({ 
+  appIndex, 
+  appName, 
+  appTitle, 
+  appUrl, 
+  favIconClassName, 
+  hideAppClass, 
+  setUpdateFavApps 
+} : {
+  appIndex: string, 
+  appName: string, 
+  appTitle: string, 
+  appUrl: string, 
+  favIconClassName: string, 
+  hideAppClass: string, 
+  setUpdateFavApps: string
+}) {
+  const [appElemClass, changeFav] = useState(favIconClassName);
+  const callChangeFav = ( changeAppName: string ) => {
+    fetch('api/user_fav_app', {
+        method: 'post',
+        body: JSON.stringify({ appName: changeAppName }),
+        headers: {
+          'content-type': 'application/json'
+        }
+      }
+    )
+    .then( (response) => response.json() )
+    .then( (response) => {
+      //Если скрипт был избранным - удаляем из избранного и наоборот
+      appElemClass == 'favorite' ? changeFav('not_favorite') : changeFav('favorite');
+      //Возвращаем обновленный список избранных приложений пользователя
+      setUpdateFavApps(response?.fav_apps?.split( ';' ) || [])
+    } )
+  }
+  
+  return (
+    //Если приложение в избранном - оно всегда должно быть "видимо", даже если переключатель в положении Скрыть неизбранные приложения
+    <div key = { appIndex } className = {`script-list__el ${appElemClass == 'favorite' ? '' : hideAppClass}`} data-scriptname = { appName }>
+      <div className = "script-list__el__script-name"><a target="_blank" href={ appUrl }>{ appTitle }</a></div>
+      {/* Анонимная функция нужна для создания функции смены состояния для каждого компонента в отдельности, в противном случае вызов функции в одном экземпляре компонента вызывает функцию изменения для каждого экземпляра компонента */}
+      <i className = {`${(appElemClass == 'favorite' ? 'fas' : 'far')} fa-star ${appElemClass}`} onClick = { () => callChangeFav(appName) }></i>
+    </div>
+  )
+}
+
+
+//TODO
+//ВЫНЕСИ В ПАПКУ COMPONENTS/MAIN
+/**
+ * Компонент переключателя В ДАННОМ СЛУЧАЕ видимости скриптов (видны только избранные или все)
+ * @param {string} switcherId идентификатор переключателя (для стилей css), так как в будущем, на странице можно будет размещать несколько переключателей
+ * @param {function} toggleAppsVisible функция обновления состояния hideScriptClass
+ * @returns 
+ */
+function Switcher({ switcherId, toggleAppsVisible }) {
+  const [favSwitcherClass, setFavSwitcherClass] = useState('showAll');
+
+  //Переключение состояния переключателя после рендеринга страницы
+  useEffect( () => {
+    //Получаем из локал сторадж состояние переключателя
+    const savedState = localStorage.getItem('magicMenuFavSwitcher');
+    if (savedState) {
+      setFavSwitcherClass(savedState);
+    }
+  }, []);
+
+  //При изменении состояния Переключателя изменяется состояние всех приложени (переключается их видимость в зависимости от состояния переключателя - только избранные или все)
+  useEffect( () => {
+    //Синхронизируем зависимые компоненты
+    toggleAppsVisible(favSwitcherClass === 'showFav' ? 'script-hide' : '');
+  }, [favSwitcherClass] );
+
+  const callToggleFavSwitcher = () => {
+    let switcherState = (favSwitcherClass === 'showFav' ? 'showAll' : 'showFav');
+    //favSwitcherClass => favSwitcherClass = ... - функциональное обновление. Здесь оно не особо нужно, но чтобы не забыть
+    //Меняем класс switcher, а также меняем состояние видимости всех приложений (в зависимости от того избранные они или нет)
+    setFavSwitcherClass( favSwitcherClass => {
+      if (favSwitcherClass === 'showFav') {
+        toggleAppsVisible('script-hide')
+      } else {
+        toggleAppsVisible('')
+      }
+      localStorage.setItem('magicMenuFavSwitcher', switcherState)
+
+      return switcherState;
+    } )
+  }
+
+  return (
+    <div id = { switcherId } className = "switcher-container">
+      <label className = "switch">
+        <input type = "checkbox" className = {`switcher__favorite-app ${favSwitcherClass}`} onChange = { callToggleFavSwitcher }/>
+        <span className = "slider round"></span>
+      </label>
+    </div>
+  )
+}
+
+export default MenuApp;

resources/js/components/entityHistory/EntityHistory.tsx

@@ -0,0 +1,120 @@
+
+import React, { useEffect, useMemo, useState, useContext } from "react";
+import { createPortal } from "react-dom";
+import './../../../css/components/entityHistory.css';
+import { HistoryContext } from "../../contexts/HistoryContext";
+
+//Тип с параметрами сущности, история по которой будет выводиться
+export type EntityHistoryProps = { 
+  changeAction: string,   //Совершенное действие: создание, удаление, редактирование, архивирование и т.д.
+  changeAuthor: string,   //Автор изменения: логин, сервисная УЗ 
+  changeDate: Date        //Объект даты изменения. В объекте будет либо время (тогда показываем), либо время будет отсутствовать (тогда не показываем) //что будем передавать? объект new Date или библиотечный объект для работы с датами?
+  changeTime?: string     //Время изменений. Передавать не нужно, на этабе сборки компонента будет формироваться на основе пропса changeDate
+  // changeDetails?: HistoryEntityElDetails[]  //Массив объектов с деталями изменений формата: изменяемое свойство(поле, например) - значение изменяемого свойства
+  changeDetails?: Record<string, string>  //Массив объектов с деталями изменений формата: изменяемое свойство(поле, например) - значение изменяемого свойства
+};
+
+//Тип с деталями изменений
+// type HistoryEntityElDetails = {
+//   propName: string,   //Имя измененного свойства 
+//   propValue: string   //Значение измененного свойства
+// }
+
+//Компонент отображения истории изменений сущности
+export default function EntityHistory ()
+{
+  //ГАВРИЛОВ
+  //ИДЕНТИЧНЫЙ СПРАВОЧНИК УКАЗАН НА СТОРОНЕ ЛАРАВЕЛЬ APP/ENUMS/LOGBUSINESSEVENTS. ЕСТЬ ВОЗМОЖНОСТЬ ОБЪЕДИНИТЬ ИХ?
+  const HistoryActions = {
+    create: 'создание',
+    edit: 'редактирование',
+    archive: 'архивация',
+    restore: 'восстановление',
+    delete: 'удаление',
+    cancel: 'отмена',
+  }
+  const historyContext = useContext(HistoryContext);
+  //Перестраиваем объект с изменениями, группируя их по датам
+  const groupDataByDate = useMemo( () => {
+    let changesByDate = {},
+        historyContent = historyContext.content.length ? historyContext.content : []
+    //Сортируем все изменения от большего к меньшему по дате и времени
+    //ГАВРИЛОВ. или нужно отсортировать от меньшего к большему? мы хотим сверху самые актуальные данные а ниже менее актуальные или наоборот?
+    //ПРОВЕРИТЬ СОРТИРУЕТСЯ ЛИ ПО ДАТАМ
+    historyContent.sort( (a, b) => {return b.changeDate - a.changeDate} )
+    //console.log(historyContext)
+    historyContent.forEach( (changeEl: EntityHistoryProps) => {
+      let dateToString = changeEl.changeDate.toLocaleString('ru-RU').split(',')[0];
+      if ( !(dateToString in changesByDate) ) {
+        changesByDate[dateToString] = [];
+      }
+      changesByDate[dateToString].push(changeEl);
+    });
+
+    return changesByDate;
+  }, [historyContext.content]);
+
+
+  //Сокрытие блока показа истории
+  function hideHistoryBlock(){
+    historyContext.hideHistory()
+  }
+
+  return (
+    historyContext.content && historyContext.visible ?
+      createPortal(
+        <div>
+          <div className="entity-hist-container">
+            <div className="hist__header-block">
+              <div className="hist__header__title">
+                <h3>{ historyContext.headerText.length ? historyContext.headerText : `История изменений запроса ${historyContext.entityId}` }</h3>
+              </div>
+              <div className="hist__header__buttons" onClick={hideHistoryBlock}>
+                <i className="fa fa-plus header__buttons__close"></i>
+              </div>
+            </div>
+            <div className="hist__content-block">
+              {Object.entries(groupDataByDate).map( (dateChanges, dateIndex) => 
+                <div key={dateIndex} className="hist-container__date-block">
+                  <div className="date-block__date">
+                    <div>{ dateChanges[0] }</div>
+                  </div>
+                  <div className="date-block__changes">
+                    { dateChanges[1].map( (changeEl: EntityHistoryProps, elIndex: number) => 
+                      <div className="changes__action-block" key={ elIndex }>
+                        <div className="action-block__action-name">
+                        { HistoryActions[changeEl.changeAction] }
+                        </div>
+                        <div className="changes__date-time-block">
+                          <div>
+                            { changeEl.changeAuthor }
+                          </div>
+                          <div>
+                            { changeEl.changeTime }
+                          </div>
+                        </div>
+                        <div className="changes__details">
+                          {Object.entries(changeEl.changeDetails).map( (detail, detailIndex) => 
+                            <div className="changes__details__el" key={ detailIndex }>
+                              <div className="changes__details__el__prop-name">
+                                { (historyContext.dataFields && historyContext.dataFields[detail[0]]) ? historyContext.dataFields[detail[0]] : detail[0] }
+                              </div>
+                              <div className="changes__details__el__prop-val">
+                                { detail[1] }
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>,
+      document.body
+    )
+    : ''
+  )
+}

resources/js/components/formValidErr/FormValidErr.tsx

@@ -0,0 +1,30 @@
+import React, { useEffect, useState } from "react";
+
+/**
+ * Объект с данными для отображения в блоке с ошибками
+ */
+export interface FormValidErrObject
+{
+  fieldName: string | null,
+  fieldErrors: string[] | []
+}
+
+export default function FormValidErr ( {visible, validErrorsObj}: {visible: boolean, validErrorsObj: FormValidErrObject[]} ) 
+{
+  const [blockVisible, setBlockVisible] = useState<boolean>(false);
+  useEffect ( () => {
+    setBlockVisible(visible)
+  }, [visible]);
+  return (
+    <div id="form-valid-err-container" className={`form-valid-err--${blockVisible ? "visible" : 'hide'}`}>
+      <ul>
+      { validErrorsObj.map( (validErrObj: FormValidErrObject, index: number) => (
+        <li key={index}>
+          <b>{ validErrObj.fieldName }</b>: 
+          <span>{ validErrObj.fieldErrors }</span>
+        </li>
+      )) }
+      </ul>
+    </div>
+  )
+}

resources/js/components/header/Header.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from "react";
+import { Button } from '@SharePoint/rencredit_uikit';
+
+export default function Header(){
+  const[appName, setAppName] = useState<string>('');
+  useEffect( () => {
+    setAppName(document.getElementById('page__header-block')?.dataset.app_name || '');
+  }, [])
+
+  return (
+    <div className="header-block__header-container">
+      <div className="header-container__block">
+        <div>
+          <Button 
+            type = 'button'
+            onClick = {() => document.location.href='/public/menu'}
+            text = 'ЛОГОТИП ТУТ' 
+            ui = 'secondaryPurple'
+          />
+        </div>
+        <div>
+          <Button 
+            type = 'button'
+            onClick = {() => document.location.href='/public/menu'}
+            text = 'Меню' 
+            ui = 'secondaryPurple'
+          />
+        </div>
+        <div className="header-container__block__app-name">{appName}</div>
+      </div>
+      <div className="header-container__block">
+        <div>
+          <Button 
+            type = 'button'
+            onClick = {() => document.location.href='/public/request_access'}
+            text = 'Заказать доступ' 
+            ui = 'secondaryPurple'
+          />
+        </div>
+        <div>
+          <Button 
+            type = 'button'
+            onClick = {() => document.location.href='/public/logout'}
+            text = 'Выход' 
+            ui = 'secondaryPurple'
+          />
+        </div> 
+      </div>
+    </div>
+  )
+}

resources/js/components/preloader/Preloader.tsx

@@ -0,0 +1,39 @@
+import "./../../../css/components/preloader.css";
+import React from "react";
+
+export default function Preloader ( props: {visible: boolean, text?: string | null}) {
+  const {text = 'загрузка'} = props;
+  let preloaderColorArray: string[] = ['preloader-ruby-circle', 'preloader-emerald-circle', 'preloader-graphite-circle'],
+  //Код ниже реализует возможность присваивать каждую перезагрузку разные классы с цветом полос
+  //Рандомное число, по которому получим первый класс
+  firstColorIndex: number = Math.floor(Math.random() * 3),
+  firstCircleClass: typeof preloaderColorArray[number] = preloaderColorArray[firstColorIndex],
+  secondCircleClass: typeof preloaderColorArray[number],
+  thirdCircleClass: typeof preloaderColorArray[number];
+  //Удалим уже используемый класс цвета из массива 
+  preloaderColorArray.splice(firstColorIndex, 1);
+  //Оставшиеся 2 класса распределеяем в зависимости от проостой проверки четности/нечетности
+  if (Math.floor(Math.random() * 2) % 2 === 0) {
+    secondCircleClass = preloaderColorArray[0];
+    thirdCircleClass = preloaderColorArray[1];
+  } else {
+    secondCircleClass = preloaderColorArray[1];
+    thirdCircleClass = preloaderColorArray[0];
+  }
+  return (
+    props.visible ? 
+      <div id='preloader_container'>
+        <div id='preloader'>
+          <div className={'circle ' + firstCircleClass} id='circle_one'></div>
+          <div className={'circle ' + secondCircleClass} id='circle_two'></div>
+          <div className={'circle ' + thirdCircleClass} id='circle_three'></div>
+          <div id='logo'>
+            <div className='logo_square' id='right-bottom'></div>
+            <div className='logo_square' id='left-top'></div>
+          </div>
+          <div id='preloader_text'>{ text }</div>
+        </div>
+      </div>
+      : null
+  )
+}

resources/js/contexts/HistoryContext.tsx

@@ -0,0 +1,97 @@
+import React, { createContext, useState, useContext } from "react";
+import EntityHistory, { EntityHistoryProps } from "../components/entityHistory/EntityHistory";
+import api from "../api";
+import { PreloaderContext } from "./PreloaderContext";
+
+//Тип с пропсами для взаимодействия с контекстом
+interface HistoryContextType {
+  visible: boolean,   //Пропс видимости компонента
+  historyDataFields: HistoryDataFields,  //Объект с названиями полей, по которым было совершено изменение. В БД они будут храниться, скорее всего, на латинице, на фронте их надо расшифровать
+  hideHistory: () => void,    //Колбек для сокрытия блока с историей 
+  content: Record<string, string> | null,   //Контент для отображения истории
+  headerText: string,   //Текст в заголовке окна с историей
+  entityId: number,   //Уникальный идентификатор сущности, по которой показываем историю (заявки, запрос и т.д.)
+  showHistory: (entityId: number, content: EntityHistoryProps[], windowHeader?: string) => void,   //Колбек для вызова окна с историей
+  getHistoryFromMagic: (appname: string, subjectId: string | number, historyDataFields: HistoryDataFields, windowHeader?: string) => void //Метод получения истории из приложения Magic
+}
+
+type HistoryDataFields = Record<string, string>;
+
+export const HistoryContext = createContext<HistoryContextType | null>(null);
+
+export const HistoryProvider = ( {children} ) => {
+  const [historyVisible, setHistoryVisible] = useState<boolean>(false);
+  const [historyContent, setHistoryContent] = useState<EntityHistoryProps[] | []>( [] );
+  const [historyWindowHeader, setHistoryWindowHeader] = useState<string>('');
+  const [historyEntityId, setHistoryEntityId] = useState<number>();
+  const [historyDataFields, setHistoryDataFields] = useState<HistoryDataFields | null>( null );
+
+  /**
+   * Сокрытие окна с историей
+   */
+  function hideHistoryBlock() {
+    setHistoryVisible(false);
+    setHistoryWindowHeader('');
+    setHistoryContent( [] );
+    setHistoryEntityId(0);
+  }
+
+  const preloaderContext = useContext(PreloaderContext);
+
+  //ГАВРИЛОВ. ПРАВИЛЬНО ЛИ В КОНТЕКСТЕ РЕАЛИЗОВЫВАТЬ ЛОГИКУ ФУНКЦИОНАЛА? ИЛИ ПРАВИЛЬНЕЕ ЕЕ РАЗМЕСТИТЬ В ФАЙЛЕ КОМПОНЕНТА?
+  async function getHistoryFromMagic(appName: string, subjectId: number | string, historyDataFields: HistoryDataFields, windowHeader?: string){
+    preloaderContext.setPreloaderVisible(true)
+    const appHistory = await api.get(`${appName}/history/${subjectId}`).then(history => history.data.data);
+
+    // console.log(appHistory)
+
+    if (appHistory) {
+      appHistory.forEach( changeData => {
+        changeData.changeDetails = JSON.parse(changeData.changeDetails)
+      });
+      //appHistory.changeDetails = JSON.parse(appHistory.changeDetails)
+    }
+    //ГАВРИЛОВ
+    //ПРОВЕРКА НА НАЛИЧИЕ НУЖНЫХ СВОЙСТВ. ЧТОБЫ ОБЪЕКТ СООТВЕТСТВОВАЛ ТИПУ
+    //УБРАТЬ CHANGE. ПРОСТО AUTHOR,DETAILS и так далее
+    
+    // console.log(appHistory)
+
+    showHistoryBlock(subjectId, appHistory, historyDataFields, windowHeader)
+    
+    // return appHistory;
+  }
+
+  /**
+   * Показываем историю
+   * @param entityId идентификатор бизнес-сущности
+   * @param content контент для отображения
+   * @param windowHeader заголовок для окна с историей
+   */
+  //ГАВРИЛОВ. сделать пропс historyDataFields необязательным (пустой объект по умолчанию), так как details могут не передаваться, тогда и словарь не нужен (В ТОМ ЧИСЛЕ И В МЕТОДЕ getHistoryFromMagic). сделай интерфейс для аргументов идентичным
+  function showHistoryBlock(subjectId: number | string, content: EntityHistoryProps[], historyDataFields: HistoryDataFields, windowHeader?: string){
+    preloaderContext.setPreloaderVisible(true)
+    setHistoryVisible(true);
+    setHistoryEntityId(subjectId);
+    setHistoryContent(content);
+    windowHeader ? setHistoryWindowHeader(windowHeader) : true;
+    historyDataFields ? setHistoryDataFields(historyDataFields) : true;
+    preloaderContext.setPreloaderVisible(false)
+  }
+
+  const value = {
+    getHistoryFromMagic: getHistoryFromMagic,
+    showHistory: showHistoryBlock,
+    hideHistory: hideHistoryBlock,
+    visible: historyVisible,
+    content: historyContent,
+    headerText: historyWindowHeader,
+    entityId: historyEntityId,
+    dataFields: historyDataFields
+  };
+
+  return <HistoryContext.Provider value={value}> 
+    {children}
+    <EntityHistory/>
+  </HistoryContext.Provider>
+}

resources/js/contexts/PopupContext.tsx

@@ -0,0 +1,41 @@
+import React, { createContext, useState } from "react";
+import { MagicPopupType } from "../components/MagicPopupContainer";
+import MagicPopupContainer from "../components/MagicPopupContainer";
+
+//гаврилов. передай значением по умолчанию null и спроси у ChatGPT (deepseek не справляется) почему при указании null возникает ошибка в аргументе value 
+export const PopupContext = createContext(''); 
+
+/**
+ * Контекст для компонента всплывающих окон
+ */
+export const PopupProvider = ({ children }) => {
+  const [popupArrTestVar, setPopupArrTestVar] = useState<MagicPopupType[] | []>( [] );
+
+  function addPopupTest (newPopupArrData: MagicPopupType[]) {
+    setPopupArrTestVar(prev => {
+      //Конкатенируем предыдущее состояние набора попапов и новые попапы, присваивая новому попапу параметр id с уникальным рандомным значением
+      return [...prev, ...newPopupArrData].map(popup => popup.id ? popup : {...popup, id: getRandomId()})
+    });
+  };
+
+  //Колбэк для удаления попапа из набора
+  function delPopupTest (popupDelKey: number) {
+    setPopupArrTestVar(prev => {
+      return prev.filter(popup => popup.id !== popupDelKey);
+    });
+  };
+
+  function getRandomId(): number { return Date.now() - Math.random() };
+
+  const value = {
+    popupArrTest: popupArrTestVar,
+    //ГАВРИЛОВ. переименуй
+    addPopupArrTest: addPopupTest,
+    delPopupArrTest: delPopupTest,
+  };
+
+  return <PopupContext.Provider value={value}>
+    {children}
+    <MagicPopupContainer />
+  </PopupContext.Provider>
+}

resources/js/contexts/PreloaderContext.tsx

@@ -0,0 +1,40 @@
+import React, { createContext, useState } from "react";
+import Preloader from "../components/preloader/Preloader";
+
+interface PreloaderProps{
+  setPreloaderVisible: (preloaderVisible: boolean) => void;
+  setPreloaderText: (preloaderText: string) => void;
+}
+
+export const PreloaderContext = createContext<PreloaderProps>({
+  setPreloaderVisible: () => {},
+  setPreloaderText: () => {},
+});
+
+export function PreloaderProvider({ children }){
+  const [visible, setVisible] = useState<boolean>(true);
+  const [text, setText] = useState<string>('Страница загружается');
+
+  function setPreloaderVisible(preloaderVisible: boolean){
+    setVisible(preloaderVisible);
+  }
+
+  function setPreloaderText(preloaderText: string){
+    setText(preloaderText);
+  }
+
+  let value = {
+    setPreloaderVisible: setPreloaderVisible,
+    setPreloaderText: setPreloaderText
+  }
+
+  return (
+    <PreloaderContext.Provider value={value}>
+      <Preloader
+        visible={visible}
+        text={text}
+      />
+      {children}
+    </PreloaderContext.Provider>
+  )
+}

resources/js/hooks/popup/MagicPopupHook.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { MagicPopupType } from '../../components/MagicPopupContainer';
+
+export const MagicPopupHook = () => {
+  // //Стейт с набором попапов для отрисовки
+  // const [popupArr, setPopupArr] = useState<MagicPopupType[] | []>( [] );
+  // //ИСПОЛЬЗОВАНИЕ USECALLBACK? я не использую его для функций удаления и добавления новых попапов в этом хуке, что должно приводить к созданию новых экземпляров функций каждый вызов хука (удаление, добавления попапа). Функция добавления попапа является пропсом для TaxiForm, значит, содание нового экземпляра функции добавления попапа в хуке должно вызывать перерендер TaxiForm? Но я его не замечаю (нет мигания в дом дереве элемента где рендерится TaxiForm ни при создании, не при удалении попапа)
+
+  // //Колбэк для добавление нового попапа. Его нужно передавать в каждый компонент, где планируется вызывать попапы. В аргументы этого колбэка передаются объекты с информацией для каждого попапа (текст, таймер и т.д.)
+  // function addPopup (newPopupArrData: MagicPopupType[]) {
+  //   setPopupArr(prev => {
+  //     //Конкатенируем предыдущее состояние набора попапов и новые попапы, присваивая новому попапу параметр id с уникальным рандомным значением
+  //     return [...prev, ...newPopupArrData].map(popup => popup.id ? popup : {...popup, id: getRandomId()})
+  //   });
+  // };
+
+  // //Колбэк для удаления попапа из набора
+  // function delPopup (popupDelKey: number) {
+  //   setPopupArr(prev => {
+  //     return prev.filter(popup => popup.id !== popupDelKey);
+  //   });
+  // };
+
+  // //Функция генерации случайного числа для формирования на его основе уникального идентификатора для каждого компонента попаппа
+  // function getRandomId(): number { return Date.now() - Math.random() };
+
+  // return {
+  //   popupArr, 
+  //   addPopup,
+  //   delPopup,
+  // }
+}

resources/js/hooks/preloader/MagicPreloaderHook.tsx

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import Preloader from "../../components/preloader/Preloader";
+
+//Хук для формирования пропсов управления состояний прелоадера, экспортируемых в компоненты страницы, где планируется вызывать прелоадер
+export const MagicPreloaderHook = () => {
+  //Стейт для видимости прелоадера
+  const [preloaderVisibleState, setPreloaderVisibleState] = useState<boolean>(true);
+  //Стейт для текста прелоадера
+  const [preloaderTextState, setPreloaderTextState] = useState<string>('загрузка');
+  //Сеттер для смены состояний прелоадера
+  function setPreloaderParams (visibleState: boolean, textState?: string)
+  {
+    setPreloaderVisibleState(visibleState)
+    textState ? setPreloaderTextState(textState) : true, []
+  };
+
+  return {
+    setPreloaderParams,
+    PreloaderComponent: ( {preloaderVisible = preloaderVisibleState, preloaderText = preloaderTextState} ) => (
+      <Preloader
+        visible={preloaderVisible}
+        text={preloaderText}
+      />
+    )
+  }
+}

resources/js/magicLogin.tsx

@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import MagicLogin from './components/MagicLogin.jsx';
+import React from 'react';
+
+const container = document.getElementById('root')!;
+const root = createRoot(container);
+root.render(<MagicLogin />);

resources/js/main_script.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { createRoot } from 'react-dom/client';
+import { UIKitThemeProvider } from '@SharePoint/rencredit_uikit';
+import Header from "./components/header/Header.tsx";
+
+const headerBlock:HTMLElement = document.getElementById('page__header-block')!;
+const headerRoot = createRoot(headerBlock);
+
+console.log('da')
+
+headerRoot.render(
+  <UIKitThemeProvider>
+    <Header />
+  </UIKitThemeProvider>
+);

resources/js/providers/AppProvider.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from "react";
+import { UIKitThemeProvider } from '@SharePoint/rencredit_uikit';
+import { PopupProvider } from "../contexts/PopupContext.tsx";
+import { PreloaderProvider } from "../contexts/PreloaderContext.tsx";
+
+interface AppProviderProps{
+  children: ReactNode;
+}
+
+export function AppProvider({children}: AppProviderProps){
+
+  return (
+    <UIKitThemeProvider>
+      <PopupProvider>
+        <PreloaderProvider>
+          {children}
+        </PreloaderProvider> 
+      </PopupProvider>
+    </UIKitThemeProvider>  
+  )
+}

resources/js/services/getCsrfService.ts

@@ -0,0 +1,20 @@
+/**
+ * Сервис для полуения csrt токена для размещения в формах
+ * @date 24.07.2025
+ * @author dgavrilov
+ */
+
+export const getCsrfToken = ():string => {
+  const METATAG:HTMLElement|null = document.querySelector('meta[name="csrf-token"]');
+
+  if (!METATAG) {
+    return '';
+  }
+
+  const CSRFTOKEN:string|null = METATAG.getAttribute('content');
+  if (!CSRFTOKEN) {
+    return '';
+  }
+
+  return CSRFTOKEN;
+}

resources/sass/_variables.scss

@@ -0,0 +1,7 @@
+// Body
+$body-bg: #f8fafc;
+
+// Typography
+$font-family-sans-serif: 'Nunito', sans-serif;
+$font-size-base: 0.9rem;
+$line-height-base: 1.6;

resources/sass/app.scss

@@ -0,0 +1,8 @@
+// Fonts
+@import url('https://fonts.bunny.net/css?family=Nunito');
+
+// Variables
+@import 'variables';
+
+// Bootstrap
+@import 'bootstrap/scss/bootstrap';

resources/views/access_list.blade.php

@@ -0,0 +1,22 @@
+<html>
+  <head>
+    @vite(['resources/js/app.js', 'resources/css/app.css'])
+    <title>Страница с ролями</title>
+  </head>
+  <body>
+    <p>{{ $roleData }}</p>
+    <!-- <div id='root'></div>
+    <div id='counter'></div> -->
+
+
+    <script type="module">
+        //import Example from './Example.js';
+        // Передаем данные напрямую в компонент
+        const props = {!! $roleData !!};
+        console.log(props)
+        console.log('da')
+        //ReactDOM.render(<App {...props} />, document.getElementById('root'));
+    </script>
+
+  </body>
+</html>

resources/views/app.blade.php

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Laravel + React + Inertia</title>
+    @viteReactRefresh <!-- без это директивы возникает ошибка "React refresh preamble was not loaded. Something is wrong" Эта директива подключает скрипт горячей перезагрузки, но вообще этот скрипт должен подключаться при использовании плагина @vitejs/plugin-react -->
+    @vite(['resources/js/app.jsx']) <!-- Подключение Inertia и React -->
+    <!-- Гаврилов. нам не нужна больше inertia. Убрать? -->
+    @inertiaHead <!-- попробовать убрать, получится ли тянуть css стили без явного указания -->
+</head>
+<body>
+    <!-- Гаврилов. нам не нужна больше inertia. Убрать? -->
+    @inertia
+</body>
+</html>

resources/views/layouts/app_main.blade.php

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Laravel + React</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="https://intranet.rencredit.ru/Departments/CS/technical_library/css/normalize-SP.css?v={{ rand(111111, 999999); }}" type="text/css">
+    <link rel="stylesheet" href="https://intranet.rencredit.ru/Departments/CS/technical_library/css/choices.min.css?v={{ rand(111111, 999999); }}" type="text/css">
+    <link rel="stylesheet" href="https://intranet.rencredit.ru/Departments/CS/technical_library/css/style.css?v={{ rand(111111, 999999); }}" type="text/css">
+    <link rel="stylesheet" href="https://intranet.rencredit.ru/Departments/CS/components/css/style.css?v={{ rand(111111, 999999); }}" type="text/css">
+    <link rel="stylesheet" href="./../css/general.css?v={{ rand(111111, 999999); }}" type="text/css">
+    <!-- Без команды ниже корректно не обрабатывается React скрипт -->
+    @viteReactRefresh 
+    <!-- Общие React компоненты для всех страниц -->
+    @vite(['resources/js/main_script.tsx'])
+    <!-- Общие React компоненты для всех страниц -->
+    @vite(['resources/css/main_styles.css'])
+    @yield('app_styles')
+  </head>
+  <body>
+    <div id=page__header-block data-app_name="{{ $moduleName->getRuModuleName() }}"></div>
+    <div id=page__content-block>
+      @yield('app_content')
+    </div>
+    @yield('app_scripts')
+  </body>
+</html>

resources/views/magic_login.blade.php

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Laravel + React</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Без команды ниже корректно не обрабатывается React скрипт -->
+    @viteReactRefresh
+    @vite(['resources/css/magicLogin.css', 'resources/js/magicLogin.jsx'])
+</head>
+<body>
+    <div id="root"></div>
+</body>
+</html>

resources/views/mail/mailer_default.blade.php

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title><h3>{!! $mailData['header'] !!}</h3></title>
+</head>
+<body>
+    <p style="margin: 15px 0 50px 0">{!! $mailData['body'] !!}</p>
+    <p>{!! $mailData['footer'] !!}</p>
+    <p><img width="150" height="34" alt="" src="data:image/png;base64,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"></p>
+    <br><h2>{{ $appName }}</h2>
+</body>
+</html>

resources/views/menu_start.blade.php

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Laravel + React</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <!-- Без команды ниже корректно не обрабатывается React скрипт -->
+    @viteReactRefresh
+    @vite(['resources/css/app.css', 'resources/js/app.jsx'])
+    <!-- Отрисовываем meta-тег с sanctum-токеном, чтобы на фронте его могли получить и передавать при api  -->
+    <meta id="sanctum_token_block" data-token="{{ session('sanctum-token') ?? '' }}"/>
+</head>
+<body>
+    <div id="root"></div>
+</body>
+</html>

resources/views/roles.blade.php

@@ -0,0 +1,40 @@
+<html>
+  
+  <head>
+    <title>Страница с ролями</title>
+  </head>
+  <body>
+    <table style=border:1px solid black>
+      <tr>
+        <th>id роли</th>
+        <th>имя роли</th>
+        <th>заголовок роли</th>
+        <th>удалить</th>
+      </tr>
+      @foreach($roles as $role)
+        <tr>
+          <td>{{ $role->access_id }}</td>
+          <td>{{ $role->role }}</td>
+          <td>{{ $role->title }}</td>
+          <td>
+            <form method="POST" action="{{ url('role_del') }}">
+              @csrf
+              <input type="hidden" name="access_id" value="{{ $role->access_id }}">
+              <button type='submit'>Удалить</button>
+            </form>
+          </td>
+        </tr>
+      @endforeach
+
+    </table>
+
+    <form method="POST" action="{{ url('role') }}">
+      @csrf
+      <label for="input-email">Имя</label>
+      <input type="text" id="input-name" name="roleName" placeholder="Введите имя роли">
+      <label for="input-email">Заголовок</label>
+      <input type="text" id="input-title" name="roleTitle" placeholder="Введите заголовок роли">
+      <button type="submit">Отправить</button>
+    </form>
+  </body>
+</html>

resources/views/test_form.blade.php

@@ -0,0 +1,18 @@
+<html>
+  
+  <head>
+    <title>Страница с ролями</title>
+  </head>
+  <body>
+    <form method="POST" action="{{ url('test_table') }}">
+      @csrf
+      <label for="first_name">Имя</label>
+      <input type="text" id="first_name" name="first_name" placeholder="Введите имя">
+      <label for="last_name">Фамилия</label>
+      <input type="text" id="last_name" name="last_name" placeholder="Введите фамилию">
+      <label for="department">Отдел</label>
+      <input type="text" id="department_name" name="department_name" placeholder="Введите отдел">
+      <button type="submit">Отправить</button>
+    </form>
+  </body>
+</html>