feature: refactor start-page and configuration [WTEL-4710](https://we…

…bitel.atlassian.net/browse/WTEL-4710)

package.json

@@ -15,7 +15,7 @@
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
     "@vueuse/core": "^11.0.3",
-    "@webitel/ui-sdk": "^24.10.69",
+    "@webitel/ui-sdk": "^24.10.74",
     "axios": "^1.7.7",
     "deep-equal": "^2.2.1",
     "dompurify": "^3.1.2",

src/app/assets/icons/sprite/index.js

@@ -1 +1 @@
-import './nav-lookups.svg';
+import './crm-lookups.svg';

src/app/locale/en/en.js

@@ -93,7 +93,7 @@ export default {
       name: 'Contacts',
       text: 'In this section, you can work with your contacts: clients, customers etc.',
     },
-    [CrmSections.CONFIGURATION]: {
+    'configuration': {
       name: 'Configuration',
       text: 'In this section, you will set up the Case management process.',
     },

src/app/locale/ru/ru.js

@@ -92,7 +92,7 @@ export default {
       name: 'Контакты',
       text: 'В этом разделе вы можете работать с Контактами: клиентами, партнерами и т.д.',
     },
-    [CrmSections.CONFIGURATION]: {
+    'configuration': {
       name: 'Конфигурация',
       text: 'Здесь вы можете просматривать Обращения, зарегистрированные в системе.',
     },

src/app/locale/ua/ua.js

@@ -92,7 +92,7 @@ export default {
       name: 'Контакти',
       text: 'У цьому розділі ви можете працювати з Контактами: клієнтами, партнерами тощо.',
     },
-    [CrmSections.CONFIGURATION]: {
+    'configuration': {
       name: 'Конфігурація',
       text: 'Тут ви можете переглядати Звернення, зареєстровані у системі.',
     },

src/app/router/index.js

@@ -54,13 +54,6 @@ const routes = [
         name: 'the-start-page',
         component: TheStartPage,
       },
-      {
-        path: 'configuration',
-        name: CrmSections.CONFIGURATION,
-        component: TheConfiguration,
-        // beforeEnter: checkRouteAccess,
-        // redirect: { name: `the-start-page` },
-      },
       {
         path: 'contacts',
         name: CrmSections.CONTACTS,
@@ -117,6 +110,26 @@ const routes = [
           },
         ],
       },
+      {
+        path: 'configuration',
+        name: 'configuration',
+        component: TheConfiguration,
+        // beforeEnter: checkRouteAccess,
+      },
+      {
+        path: 'lookups',
+        name: 'lookups',
+        redirect: { name: 'configuration' },
+        children: [
+          {
+            path: 'slas',
+            name: CrmSections.SLAS,
+          },
+      ],
+      },
+
+
+
     ],
   },
   {

src/app/store/index.js

@@ -3,6 +3,7 @@ import contacts from '../../modules/contacts/store/contacts';
 import userinfo from '../../modules/userinfo/store/userinfo';
 import appearance from '../../modules/appearance/store/appearance';
 import instance from '../api/instance';
+// import configuration from '../../modules/configuration/store/configuration';
 
 export default createStore({
   state: {

src/modules/configuration/components/the-configuration.vue

@@ -1,17 +1,19 @@
 <template>
-  <section class="config-nav">
-    <navigation-menu :nav-items="navItems" />
-  </section>
+  <wt-navigation-menu
+    :nav="nav"
+    :icons="icons"/>
 </template>
 
 <script setup>
 import { useI18n } from 'vue-i18n';
-import NavigationMenu from '@webitel/ui-sdk/src/modules/NavigationMenu/components/navigation-menu.vue';
+import lookupsIcon from '../../../app/assets/icons/sprite/crm-lookups.svg';
 import CrmSections from '@webitel/ui-sdk/src/enums/WebitelApplications/CrmSections.enum.js';
 
 const { t } = useI18n();
 
-const navItems = [
+const icons = [lookupsIcon];
+
+const nav = [
   {
     value: 'lookups',
     name: t('lookups.lookups'),
@@ -32,24 +34,4 @@ const navItems = [
 </script>
 
 <style lang="scss" scoped>
-.config-nav {
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  justify-content: center;
-  height: 100%;
-
-  --button-min-height: 60px;
-  --wrapper-width: 60%;
-  --wrapper-height: calc(
-    var(--spacing-sm) * 2
-    + var(--button-min-height) * 7
-    + var(--spacing-2xs) * 6
-  );
-
-  --lvl-1-bg: var(--dp-18-surface-color);
-  --lvl-1-bg--hover: var(--dp-20-surface-color);
-  --lvl-1-bg--selected: var(--primary-color);
-  --lvl-1-text--selected: var(--primary-on-color);
-}
 </style>

src/modules/start-page/components/the-start-page.vue

@@ -1,51 +1,50 @@
 <template>
-  <div>
-    <start-page :nav="nav" :appLogo="logo"/>
-  </div>
+  <wt-start-page
+    :nav="nav"
+    :app-logo="logo"
+  />
 </template>
 
 <script setup>
-  import { useI18n } from 'vue-i18n';
-  import StartPage from '@webitel/ui-sdk/src/modules/StartPage/components/the-start-page.vue';
-  import CrmSections from '@webitel/ui-sdk/src/enums/WebitelApplications/CrmSections.enum';
-  import StartLogoLight from '../assets/start-page-logo-light.svg';
-  import StartLogoDark from '../assets/start-page-logo-dark.svg';
-  import ConfigurationLight from '../assets/configuration-section-light.svg';
-  import ConfigurationDark from '../assets/configuration-section-dark.svg';
-  import ContactsLight from '../assets/contacts-section-light.svg';
-  import ContactsDark from '../assets/contacts-section-dark.svg';
+import { useI18n } from 'vue-i18n';
+import CrmSections from '@webitel/ui-sdk/src/enums/WebitelApplications/CrmSections.enum';
+import WtStartPage from '@webitel/ui-sdk/src/components/on-demand/wt-start-page/components/wt-start-page.vue';
+import LogoLight from '../assets/crm-logo-light.svg';
+import LogoDark from '../assets/crm-logo-dark.svg';
+import ConfigurationImgLight from '../assets/configuration-section-img-light.svg';
+import ConfigurationImgDark from '../assets/configuration-section-img-dark.svg';
+import ContactsImgLight from '../assets/contacts-section-img-light.svg';
+import ContactsImgDark from '../assets/contacts-section-img-dark.svg';
 
-  const { t } = useI18n();
+const { t } = useI18n();
 
-  const logo = {
-    light: StartLogoLight,
-    dark: StartLogoDark
-  }
+const logo = {
+  light: LogoLight,
+  dark: LogoDark,
+};
 
-  const nav = [
-    {
-      value: CrmSections.CONTACTS,
-      route: '/contacts',
-      name: t(`startPage.${CrmSections.CONTACTS}.name`),
-      text: t(`startPage.${CrmSections.CONTACTS}.text`),
-      images: {
-        light: ContactsLight,
-        dark: ContactsDark,
-      },
-      disabled: false
+const nav = [
+  {
+    value: CrmSections.CONTACTS,
+    route: '/contacts',
+    name: t(`startPage.${CrmSections.CONTACTS}.name`),
+    text: t(`startPage.${CrmSections.CONTACTS}.text`),
+    images: {
+      light: ContactsImgLight,
+      dark: ContactsImgDark,
     },
-    {
-      value: CrmSections.CONFIGURATION,
-      route: '/configuration',
-      name: t(`startPage.${CrmSections.CONFIGURATION}.name`),
-      text: t(`startPage.${CrmSections.CONFIGURATION}.text`),
-      images: {
-        light: ConfigurationLight,
-        dark: ConfigurationDark,
-      },
-      disabled: false
+  },
+  {
+    value: 'configuration',
+    route: '/configuration',
+    name: t(`startPage.configuration.name`),
+    text: t(`startPage.configuration.text`),
+    images: {
+      light: ConfigurationImgLight,
+      dark: ConfigurationImgDark,
     },
-  ]
+  },
+];
 </script>
 
 <style scoped>