Add message board and bonus program preview

app/app.vue

@@ -5,9 +5,10 @@ import { hasManagerAccess } from '~/utils/roles';
 
 const route = useRoute();
 const isLoginPage = computed(() => route.path === '/login');
+const isBonusProgramPage = computed(() => route.path === '/bonus-program');
 const meQuery = useQuery(MeDocument);
 const hasManagerDock = computed(() => (
-  !isLoginPage.value && hasManagerAccess(meQuery.result.value?.me?.role)
+  !isLoginPage.value && !isBonusProgramPage.value && hasManagerAccess(meQuery.result.value?.me?.role)
 ));
 
 const managerPageTabs = computed(() => {
@@ -48,7 +49,7 @@ const managerPageTabs = computed(() => {
       {
         key: 'balances',
         label: 'Балансы',
-        active: route.query.tab !== 'withdrawals',
+        active: route.query.tab !== 'withdrawals' && route.query.tab !== 'manager',
         to: {
           path: '/bonus-system',
           query: {
@@ -69,6 +70,18 @@ const managerPageTabs = computed(() => {
           },
         },
       },
+      {
+        key: 'manager',
+        label: 'Менеджеру',
+        active: route.query.tab === 'manager',
+        to: {
+          path: '/bonus-system',
+          query: {
+            ...route.query,
+            tab: 'manager',
+          },
+        },
+      },
     ];
   }
 
@@ -77,13 +90,14 @@ const managerPageTabs = computed(() => {
 </script>
 
 <template>
-  <div class="lk-shell" data-theme="aqua">
-    <UiAppHeader v-if="!isLoginPage" />
+  <div :class="isBonusProgramPage ? 'bonus-program-shell' : 'lk-shell'" data-theme="aqua">
+    <UiAppHeader v-if="!isLoginPage && !isBonusProgramPage" />
     <main
-      class="mx-auto w-full max-w-[1440px] p-4 pt-[104px] md:p-6 md:pt-[112px] lg:p-8 lg:pt-[118px]"
-      :class="hasManagerDock ? 'pb-[116px] md:pb-[128px]' : ''"
+      :class="isBonusProgramPage
+        ? 'bonus-program-main'
+        : ['mx-auto w-full max-w-[1440px] p-4 pt-[104px] md:p-6 md:pt-[112px] lg:p-8 lg:pt-[118px]', hasManagerDock ? 'pb-[116px] md:pb-[128px]' : '']"
     >
-      <div v-if="managerPageTabs.length" class="lk-page-tabs-shell">
+      <div v-if="managerPageTabs.length && !isBonusProgramPage" class="lk-page-tabs-shell">
         <nav class="manager-page-tabs" aria-label="Разделы страницы">
           <NuxtLink
             v-for="tab in managerPageTabs"
@@ -97,7 +111,11 @@ const managerPageTabs = computed(() => {
         </nav>
       </div>
 
-      <div class="lk-content-canvas" :class="{ 'lk-content-canvas--with-tabs': managerPageTabs.length }">
+      <div
+        :class="isBonusProgramPage
+          ? 'bonus-program-stage'
+          : ['lk-content-canvas', { 'lk-content-canvas--with-tabs': managerPageTabs.length }]"
+      >
         <NuxtPage />
       </div>
     </main>