refactor login to component

react-ui/src/shared/layouts/login.layout.tsx → react-ui/src/components/login/layouts/login.layout.tsx

 import { useAuth } from "@provider/auth.provider";
-import LoginView from "@view/login/login.view";
 import { useEffect } from "react";
 import { useNavigate, useOutlet } from "react-router-dom";
+import LoginView from "../view/login.view";
 
 
 export const LoginLayout = ({ children }) => {

react-ui/src/components/view/login/login.view.tsx → react-ui/src/components/login/view/login.view.tsx

@@ -3,8 +3,8 @@ import { useTranslation } from 'react-i18next'
 import './login.scss'
 
 import logo from '@assets/logo.svg'
-import useLoginViewModel from '@viewmodel/login.viewmodel'
 import React, { useRef } from 'react'
+import useLoginViewModel from '../viewmodel/login.viewmodel'
 
 const LoginView = ({ children }) => {
     const { t } = useTranslation('common')

react-ui/src/components/routines/device.routine.ts

 import { NetworkElementServiceGetAllFlattenedApiArg, api } from "@api/api";
 import { setDevices } from "@reducer/device.reducer/device.reducer";
-import { setUser } from "@reducer/user.reducer";
 import { createAsyncThunk } from "@reduxjs/toolkit";
+import { setUser } from "@shared/store/user.reducer";
 import { RootState } from "src/stores";
 import { startListening } from "../../stores/middleware/listener.middleware";
 import { FETCH_DEVICE_ACTION } from "./action.routine";

react-ui/src/components/view/device/device.scss

-@import '../../../style/colors.scss';
+@import '/src/shared/style/colors.scss';
 
 thead {
     font-size: 0.9em;
 }
 
-tr:hover > td  {
+tr:hover > td {
     background-color: lighten(map-get($theme-colors, primary), 30%) !important;
 }
 
-tr:nth-child(2n+1) > td {
-    background-color: lighten(map-get($theme-colors, primary) , 38%)
+tr:nth-child(2n + 1) > td {
+    background-color: lighten(map-get($theme-colors, primary), 38%);
 }
 
 .c-box {
     padding: 2em !important;
     padding-top: 1em !important;
-
 }
 
-
-
 .border-right {
     $border-padding: 2em;
 
@@ -39,7 +36,7 @@ tr:nth-child(2n+1) > td {
     &:hover {
         color: lighten(map-get($theme-colors, primary), 10%);
     }
-    
+
     &:focus {
         border: none !important;
         color: lighten(map-get($theme-colors, primary), 10%);
@@ -49,4 +46,4 @@ tr:nth-child(2n+1) > td {
         color: map-get($theme-colors, primary);
         font-weight: 500;
     }
-}
+}
\ No newline at end of file

react-ui/src/components/view/device/device.view.table.tsx

 import { useAppSelector } from "@hooks";
-import { useDeviceTableViewModel } from "@viewmodel/device.table.viewmodel";
 import { MutableRefObject, useCallback } from "react";
 import { OverlayTrigger, Table, Tooltip } from "react-bootstrap";
 import { useTranslation } from "react-i18next";
+import { useDeviceTableViewModel } from "../../view_model/device.table.viewmodel";
 
 export const DeviceViewTable = (searchRef: MutableRefObject<HTMLInputElement>) => {
     const { devices, pnds } = useAppSelector(state => state.device);

react-ui/src/components/view/device/device.view.tsx

-import { useDeviceViewModel } from '@viewmodel/device.viewmodel';
 import { useRef } from 'react';
 import { Button, Col, Container, Form, Nav, NavLink, Row } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import './device.scss';
 import { DeviceViewTable } from './device.view.table';
 import { DeviceViewTabs, DeviceViewTabValues } from './device.view.tabs';
+import { useDeviceViewModel } from '/src/components/view_model/device.viewmodel';
 
 function DeviceView() {
     const { t } = useTranslation('common');

react-ui/src/index.scss

-@import './style/index.scss';
+@import './shared/style/index.scss';
 
 body {
-  margin: 0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+    margin: 0;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
 
-
-  background-color: map-get($theme-colors, bg-primary) !important;
+    background-color: map-get($theme-colors, bg-primary) !important;
 }

react-ui/src/routes.tsx

 import { BasicLayout } from "@layout/basic.layout";
-import { LoginLayout } from "@layout/login.layout";
 import { ProtectedLayout } from "@layout/protected.layout/protected.layout";
-import DeviceView from "@view/device/device.view";
 import { createBrowserRouter, createRoutesFromElements, Navigate, Route } from "react-router-dom";
+import { LoginLayout } from "./components/login/layouts/login.layout";
+import DeviceView from "./components/view/device/device.view";
 
 export const DEVICE_URL = '/device/';
 export const LOGIN_URL = '/login';

react-ui/src/shared/layouts/protected.layout/protected.layout.scss

-@import "/src/style/colors.scss";
+@import '/src/shared/style/colors.scss';
 
 $sidebar-width: 4.5em;
 
@@ -12,7 +12,7 @@ $sidebar-width: 4.5em;
         color: map-get($theme-colors, primary);
         font-weight: 600;
     }
-    
+
     &.active {
         color: map-get($theme-colors, primary);
         font-weight: 600;
@@ -26,4 +26,4 @@ $sidebar-width: 4.5em;
 
 .main-content {
     margin-left: $sidebar-width;
-}
+}
\ No newline at end of file

react-ui/src/shared/layouts/protected.layout/protected.layout.tsx

@@ -4,8 +4,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useAppDispatch, useAppSelector } from '@hooks';
 import { useAuth } from "@provider/auth.provider";
 import { fetchPnds } from '@reducer/device.reducer/device.reducer';
-import { fetchUser } from '@reducer/user.reducer';
 import { DEVICE_URL, LOGIN_URL } from '@routes';
+import { fetchUser } from '@shared/store/user.reducer';
 import React, { useEffect } from "react";
 import { Dropdown } from "react-bootstrap";
 import { useTranslation } from "react-i18next";

react-ui/src/shared/provider/auth.provider.tsx

 import { AuthServiceLoginApiArg, AuthServiceLoginApiResponse, useAuthServiceLoginMutation } from "@api/api";
 import { getCookieValue } from "@helper/coookie";
 import { useAppDispatch, useAppSelector } from "@hooks";
-import { setToken } from "@reducer/user.reducer";
 import { DEVICE_URL, LOGIN_URL } from "@routes";
 import { jwtDecode } from "jwt-decode";
 import { createContext, useContext, useEffect, useMemo } from "react";
 import { useNavigate } from "react-router-dom";
+import { setToken } from "../store/user.reducer";
 
 interface AuthProviderType {
     login: (username: string, password: string) => void,