hl-core 0.0.9-beta.5 → 0.0.9-beta.51

package/composables/index.ts

@@ -2,22 +2,14 @@ import { useDisplay } from 'vuetify';
 import jwt_decode from 'jwt-decode';
 import { XMLParser } from 'fast-xml-parser';
 import { AxiosError } from 'axios';
-
-export const getBaseCredentials = () => {
-  return {
-    production: { login: '', password: '' },
-    test: { login: '', password: '' },
-    development: { login: 'manager', password: 'asdqwe123' },
-    vercel: { login: '', password: 'asdqwe123' },
-  };
-};
+import { DocumentReaderApi, Scenario, TextFieldType, LCID } from '@regulaforensics/document-reader-webclient';
+import { PolicyholderClass } from '../composables/classes';
 
 export const useEnv = () => {
   return {
     envMode: import.meta.env.VITE_MODE,
     isDev: import.meta.env.VITE_MODE === 'development',
     isTest: import.meta.env.VITE_MODE === 'test',
-    isVercel: import.meta.env.VITE_MODE === 'vercel',
     isProduction: import.meta.env.VITE_MODE === 'production',
   };
 };
@@ -30,6 +22,7 @@ export class Masks {
   date: string = '##.##.####';
   post: string = '######';
   threeDigit: string = '###';
+  iik: string = 'KZXXXXXXXXXXXXXXXXXX';
 }
 
 export const useMask = () => new Masks();
@@ -62,6 +55,18 @@ export const formatDate = (date: string) => {
   }
 };
 
+export const formatToPlanDate = (date: string) => {
+  if (date) {
+    const data = date.split('.');
+    const day = data[0];
+    const month = data[1];
+    const year = data[2];
+    return `${year}-${month}-${day}`;
+  } else {
+    return null;
+  }
+};
+
 export const reformatDate = (date: string) => {
   if (date) {
     const data = new Date(date);
@@ -183,18 +188,65 @@ export const ESBDMessage = (ESBDObject: any, initialPoint: any) => {
 
 export const ErrorHandler = (err: unknown, errorText?: string) => {
   console.log(err);
-  if (err instanceof AxiosError) {
-    if ('response' in err && err.response && err.response.data) {
-      if ('status' in err.response && err.response.status === 403) {
-        useDataStore().showToaster('error', useDataStore().t('toaster.noPermission'), 10000);
-      } else if (err.response.data) {
-        useDataStore().showToaster('error', errorText ? errorText : err.response.data, 10000);
+  if (useDataStore) {
+    const dataStore = useDataStore();
+    if (err instanceof AxiosError) {
+      if ('response' in err && err.response && err.response.data) {
+        if (err.response.data === Object(err.response.data) && 'errors' in err.response.data && 'title' in err.response.data && 'traceId' in err.response.data) {
+          Object.entries(err.response.data.errors).forEach(([field, errors]) => {
+            dataStore.showToaster('error', `Поле: ${field}. Ошибка: ${Array.isArray(errors) ? errors.join(', ') : errors}`, 10000);
+          });
+        } else {
+          dataStore.showToaster('error', errorText ? errorText : err.response.data, 10000);
+        }
       }
     }
   }
   return false;
 };
 
+export const policyholderToBeneficialOwner = (isPolicyholderBeneficialOwner: boolean, policyholder?: PolicyholderClass) => {
+  const formStore = useFormStore();
+  const dataStore = useDataStore();
+  const beneficialOwner = formStore.lfb.beneficialOwners[0].beneficialOwnerData;
+  if (isPolicyholderBeneficialOwner && policyholder) {
+    beneficialOwner.iin = policyholder.clientData.authoritedPerson.iin;
+    beneficialOwner.firstName = policyholder.clientData.authoritedPerson.firstName;
+    beneficialOwner.middleName = policyholder.clientData.authoritedPerson.middleName;
+    beneficialOwner.lastName = policyholder.clientData.authoritedPerson.lastName;
+    beneficialOwner.citizenship = policyholder.clientData.authoritedPerson.citizenship;
+    beneficialOwner.birthDate = policyholder.clientData.authoritedPerson.birthDate;
+    beneficialOwner.gender = policyholder.clientData.authoritedPerson.gender;
+    beneficialOwner.resident = policyholder.clientData.resident;
+    beneficialOwner.taxResidentCountry = policyholder.clientData.taxResidentCountry;
+    beneficialOwner.economySectorCode = policyholder.clientData.economySectorCode;
+    beneficialOwner.identityDocument.issuedOn = policyholder.clientData.authoritedPerson.identityDocument.issuedOn;
+    beneficialOwner.identityDocument.documentNumber = policyholder.clientData.authoritedPerson.identityDocument.documentNumber;
+    beneficialOwner.identityDocument.documentType = policyholder.clientData.authoritedPerson.identityDocument.documentType;
+    beneficialOwner.identityDocument.issuedBy = policyholder.clientData.authoritedPerson.identityDocument.issuedBy;
+    beneficialOwner.identityDocument.validUntil = policyholder.clientData.authoritedPerson.identityDocument.validUntil;
+    beneficialOwner.identityDocument.series = policyholder.clientData.authoritedPerson.identityDocument.series;
+    dataStore.showToaster('warning', dataStore.t('toaster.formFieldEmptyWarning'));
+  } else {
+    beneficialOwner.iin = '';
+    beneficialOwner.firstName = '';
+    beneficialOwner.middleName = '';
+    beneficialOwner.lastName = '';
+    beneficialOwner.citizenship = new Value();
+    beneficialOwner.birthDate = '';
+    beneficialOwner.gender = new Value();
+    beneficialOwner.resident = new Value();
+    beneficialOwner.taxResidentCountry = new Value();
+    beneficialOwner.economySectorCode = new Value();
+    beneficialOwner.identityDocument.issuedOn = '';
+    beneficialOwner.identityDocument.documentNumber = '';
+    beneficialOwner.identityDocument.documentType = new Value();
+    beneficialOwner.identityDocument.issuedBy = new Value();
+    beneficialOwner.identityDocument.validUntil = '';
+    beneficialOwner.identityDocument.series = '';
+  }
+};
+
 export const setAddressBeneficiary = (whichIndex: number, sameAddress: boolean) => {
   const formStore = useFormStore();
   const dataStore = useDataStore();
@@ -256,11 +308,210 @@ export const setAddressBeneficiary = (whichIndex: number, sameAddress: boolean)
 };
 
 export const changeBridge = async (toBridge: 'efo' | 'lka', token: string) => {
-  const bridgeUrl = import.meta.env[`VITE_${toBridge.toUpperCase()}_URL`] as string;
+  const bridgeUrl = ref<string>(import.meta.env[`VITE_${toBridge.toUpperCase()}_URL`] as string);
   if (!toBridge) return;
-  if (!bridgeUrl || !token) {
+  if (!bridgeUrl.value || !token) {
     useDataStore().showToaster('error', `${useDataStore().t('toaster.noUrl')} [import.meta.env.VITE_${toBridge.toUpperCase()}_URL]`);
     return;
   }
-  window.open(`${bridgeUrl}/#/Token?token=${token}`, '_blank');
+  const host = window.location.hostname;
+  if (toBridge === 'efo') {
+    if (host.startsWith('bpmsrv02') && bridgeUrl.value !== 'http://bpmsrv02:88') bridgeUrl.value = 'http://bpmsrv02:88';
+    if (host.startsWith('vega') && bridgeUrl.value !== 'http://vega:800') bridgeUrl.value = 'http://vega:800';
+  }
+  if (toBridge === 'lka') {
+    if (host.startsWith('bpmsrv02') && bridgeUrl.value !== 'http://bpmsrv02:890') bridgeUrl.value = 'http://bpmsrv02:890';
+    if (host.startsWith('vega') && bridgeUrl.value !== 'http://vega:890') bridgeUrl.value = 'http://vega:890';
+  }
+  window.open(`${bridgeUrl.value}/#/Token?token=${token}`, '_blank');
+};
+
+export const getFirstDayOfMonth = (year: number, month: number) => {
+  const date = new Date();
+  return new Date(year, month, 1, (date.getTimezoneOffset() / 60) * -1).toISOString();
+};
+
+export const getLastDayOfMonth = (year: number, month: number) => {
+  const date = new Date();
+  return new Date(year, month + 1, 0, (date.getTimezoneOffset() / 60) * -1).toISOString();
+};
+
+type WhichValuePerEnv = 'qrGenUrl' | 'qrXmlGenUrl' | 'gatewayApiUrl' | 'gatewayApiUrlLocal' | 'baseApi' | 'baseApiLocal' | 'efoBaseApi' | 'efoBaseApiLocal' | 'amlBaseApi' | 'amlBaseApiLocal';
+
+export const getStrValuePerEnv = (which: WhichValuePerEnv) => {
+  const valuesPerEnv: {
+    [key in WhichValuePerEnv]: {
+      [key in EnvModes]: string;
+    };
+  } = {
+    qrGenUrl: {
+      production: 'https://prod-sign.halyklife.kz/EgovQrCms',
+      development: 'https://test-sign.halyklife.kz/EgovQrCms',
+      test: 'https://test-sign.halyklife.kz/EgovQrCms',
+    },
+    qrXmlGenUrl: {
+      production: 'https://prod-sign.halyklife.kz/EgovQrXml',
+      development: 'https://test-sign.halyklife.kz/EgovQrXml',
+      test: 'https://test-sign.halyklife.kz/EgovQrXml',
+    },
+    gatewayApiUrl: {
+      production: 'https://products.halyklife.kz/gateway',
+      development: 'https://products.halyklife.kz/test/gateway',
+      test: 'https://products.halyklife.kz/test/gateway',
+    },
+    gatewayApiUrlLocal: {
+      production: 'http://products.halyklife.nb/gateway',
+      development: 'http://products.halyklife.nb/test/gateway',
+      test: 'http://products.halyklife.nb/test/gateway',
+    },
+    baseApi: {
+      production: 'https://products.halyklife.kz/api/v1/insis',
+      development: 'https://products.halyklife.kz/api/v1/test/insis',
+      test: 'https://products.halyklife.kz/api/v1/test/insis',
+    },
+    baseApiLocal: {
+      production: 'http://bpmsrv02.halyklife.nb',
+      development: 'http://vega:84',
+      test: 'http://vega:84',
+    },
+    efoBaseApi: {
+      production: 'https://products.halyklife.kz/efo/api',
+      development: 'https://products.halyklife.kz/test/efo/api',
+      test: 'https://products.halyklife.kz/test/efo/api',
+    },
+    efoBaseApiLocal: {
+      production: 'http://efo-prod.halyklife.nb/api',
+      development: 'http://efo-dev.halyklife.nb/api',
+      test: 'http://efo-dev.halyklife.nb/api',
+    },
+    amlBaseApi: {
+      production: 'https://products.halyklife.kz/aml/api',
+      development: 'https://products.halyklife.kz/test/aml/api',
+      test: 'https://products.halyklife.kz/test/aml/api',
+    },
+    amlBaseApiLocal: {
+      production: 'http://aml-prod.halyklife.nb/api',
+      development: 'http://aml-dev.halyklife.nb/api',
+      test: 'http://aml-dev.halyklife.nb/api',
+    },
+  };
+  return valuesPerEnv[which][import.meta.env.VITE_MODE];
+};
+
+export const getMainPageRoute = () => {
+  const dataStore = useDataStore();
+  if (dataStore.isEFO || dataStore.isAULETTI) {
+    return 'Insurance-Product';
+  }
+  if (dataStore.isLKA) {
+    return 'Menu';
+  }
+  if (dataStore.isAML) {
+    return 'Main';
+  }
+  return 'index';
+};
+
+export const keyDeleter = <T extends object>(data: T, keys: Array<NestedKeyOf<T>>) => {
+  if (typeof data === 'object' && !!data && keys && Array.isArray(keys) && keys.length) {
+    keys.forEach(key => {
+      if (key) {
+        if (String(key).includes('.')) {
+          const childKey = String(key).substring(0, String(key).indexOf('.'));
+          const keyChain = [String(key).substring(String(key).indexOf('.') + 1)];
+          // @ts-ignore
+          keyDeleter(data[childKey], keyChain);
+        } else {
+          //@ts-ignore
+          delete data[key];
+        }
+      }
+    });
+  }
+};
+
+export const formatDateProperty = (item: any, to: 'front' | 'back', additionalKeys?: string[]) => {
+  try {
+    if (item) {
+      Object.keys(item).forEach((key: string) => {
+        if (item[key] === Object(item[key])) {
+          formatDateProperty(item[key], to);
+        } else {
+          if (Array.isArray(additionalKeys)) {
+            additionalKeys.forEach(k => {
+              if (String(key).includes(k) && typeof item[key] === 'string' && !!item[key]) {
+                item[key] = to === 'front' ? reformatDate(item[key]) : formatDate(item[key])!.toISOString();
+              }
+            });
+          }
+          if ((String(key).includes('date') || String(key).includes('Date')) && typeof item[key] === 'string' && !!item[key]) {
+            item[key] = to === 'front' ? reformatDate(item[key]) : formatDate(item[key])!.toISOString();
+          }
+        }
+      });
+    }
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+export const callDocumentReader = async (imageBase64: string | string[]) => {
+  if (!imageBase64) return false;
+  const dataStore = useDataStore();
+  try {
+    const api = new DocumentReaderApi({
+      basePath: `${getStrValuePerEnv('gatewayApiUrl')}/regulaforensics`,
+      baseOptions: { headers: { Authorization: `Bearer ${dataStore.accessToken}` } },
+    });
+    const result = await api.process({
+      images: Array.isArray(imageBase64) ? imageBase64 : [imageBase64],
+      processParam: { scenario: Scenario.FULL_PROCESS, doublePageSpread: true, measureSystem: 0 },
+    });
+    const documentName = ref<string | undefined>(undefined);
+    if (result.rawResponse && result.rawResponse.ContainerList) {
+      const dType = result.rawResponse.ContainerList.List.find(i => i.result_type === 9);
+      if (dType && 'OneCandidate' in dType && dType.OneCandidate && dType.OneCandidate.DocumentName) {
+        documentName.value = dType.OneCandidate.DocumentName;
+      }
+    }
+    if (result.text) {
+      const iin = result.text.getField(TextFieldType.PERSONAL_NUMBER);
+      const lastName = result.text.getField(TextFieldType.SURNAME, LCID.KAZAKH);
+      const firstName = result.text.getField(TextFieldType.GIVEN_NAMES_RUS, LCID.KAZAKH) ?? result.text.getField(TextFieldType.GIVEN_NAMES, LCID.KAZAKH);
+      const middleName = result.text.getField(TextFieldType.FATHERS_NAME_RUS, LCID.KAZAKH) ?? result.text.getField(TextFieldType.FATHERS_NAME, LCID.KAZAKH);
+      const fullName = result.text.getField(TextFieldType.SURNAME_AND_GIVEN_NAMES, LCID.KAZAKH);
+      const birthDate = result.text.getField(TextFieldType.DATE_OF_BIRTH);
+      const age = result.text.getField(TextFieldType.AGE);
+      const gender = result.text.getField(TextFieldType.SEX);
+      const documentNumber = result.text.getField(TextFieldType.DOCUMENT_NUMBER);
+      const documentIssuer = result.text.getField(TextFieldType.AUTHORITY_RUS) ?? result.text.getField(TextFieldType.AUTHORITY);
+      const documentIssueDate = result.text.getField(TextFieldType.DATE_OF_ISSUE);
+      const documentExpireDate = result.text.getField(TextFieldType.DATE_OF_EXPIRY);
+      const parsedDocument = {
+        iin: iin?.value,
+        lastName: lastName?.value,
+        firstName: firstName?.value,
+        middleName: middleName?.value,
+        fullName: fullName?.value,
+        birthDate: birthDate?.value,
+        age: age?.value,
+        gender: gender?.value,
+        documentName: documentName.value,
+        documentNumber: documentNumber?.value,
+        documentIssuer: documentIssuer?.value,
+        documentIssueDate: documentIssueDate?.value,
+        documentExpireDate: documentExpireDate?.value,
+      };
+      if (Object.values(parsedDocument).every(i => !i)) {
+        dataStore.showToaster('error', dataStore.t('toaster.notParsedDocument'));
+        return false;
+      }
+      return parsedDocument;
+    } else {
+      dataStore.showToaster('error', dataStore.t('toaster.notParsedDocument'));
+    }
+    return false;
+  } catch (err) {
+    return ErrorHandler(err);
+  }
 };

package/composables/styles.ts

@@ -1,8 +1,8 @@
 export class Styles {
   // Base
-  whiteBg: string = 'bg-white';
-  whiteText: string = 'text-white';
-  blackText: string = 'text-black';
+  whiteBg: string = 'bg-[#FFF]';
+  whiteText: string = '!text-[#FFF]';
+  blackText: string = '!text-[#000]';
   bodyBg: string = '!bg-[#F5F5F5]';
 
   whiteTextHover: string = 'hover:text-[#FFFFFF]';
@@ -11,25 +11,25 @@ export class Styles {
   blueBgHover: string = 'hover:bg-[#96abd6]';
   blueBgLight: string = 'bg-[#F3F6FC]';
   blueBgLightHover: string = 'hover:bg-[#f5f8fd]';
-  blueText: string = 'text-[#A0B3D8]';
+  blueText: string = '!text-[#A0B3D8]';
   blueTextLight: string = 'text-[#F3F6FC]';
 
   // Green
-  greenBg: string = 'bg-[#009C73]';
-  greenBgHover: string = 'hover:bg-[#00a277]';
-  greenBgLight: string = 'bg-[#EAF6EF]';
-  greenText: string = '!text-[#009C73]';
-  greenTextHover: string = 'hover:text-[#009C73]';
-  greenBgLightHover: string = 'hover:bg-[#dbf0e4]';
+  greenBg: string = import.meta.env.VITE_PRODUCT === 'auletti' || import.meta.env.VITE_PARENT_PRODUCT === 'auletti' ? 'bg-[#DEBE8C]' : 'bg-[#009C73]';
+  greenBgHover: string = import.meta.env.VITE_PRODUCT === 'auletti' || import.meta.env.VITE_PARENT_PRODUCT === 'auletti' ? 'bg-[#C19B5F]' : 'hover:bg-[#00a277]';
+  greenBgLight: string = import.meta.env.VITE_PRODUCT === 'auletti' || import.meta.env.VITE_PARENT_PRODUCT === 'auletti' ? 'bg-[#e8d2af]' : 'bg-[#EAF6EF]';
+  greenText: string ='!text-[#009C73]';
+  greenTextHover: string ='hover:text-[#009C73]';
+  greenBgLightHover: string = import.meta.env.VITE_PRODUCT === 'auletti' || import.meta.env.VITE_PARENT_PRODUCT === 'auletti' ? 'hover:bg-[#efdfc6]' : 'hover:bg-[#dbf0e4]';
 
   // Yellow
-  yellowText: string = 'text-[#FAB31C]';
+  yellowText: string = '!text-[#FAB31C]';
   yellowBg: string = 'bg-[#FAB31C]';
   yellowBgHover: string = 'hover:bg-[#FAB31C]';
 
   // Grey
   greyBg: string = 'bg-[#B8B8B8]';
-  greyText: string = 'text-[#B8B8B8]';
+  greyText: string = '!text-[#B8B8B8]';
   greyTextLight: string = 'text-[#B8B8B8]';
   greyIcon: string = 'text-[#DADADA]';
   greyIconBg: string = 'bg-[#DADADA]';
@@ -39,15 +39,23 @@ export class Styles {
   greyTextDark: string = 'text-[#9197A1]';
 
   // Red
-  redText: string = 'text-[#FD2D39]';
+  redText: string = '!text-[#FD2D39]';
   redBg: string = 'bg-[#FF897D]';
   redBgHover: string = 'hover:bg-[#ff9b91]';
   // Error
   errorBg: string = 'bg-[#FF5449]';
-  errorText: string = 'text-[#FF5449]';
+  errorText: string = '!text-[#FF5449]';
 
   // Border
   rounded: string = 'rounded-[8px]';
+  roundedT: string = 'rounded-t-[8px]';
+  roundedB: string = 'rounded-b-[8px]';
+  blueBorder: string = 'border-[1px] border-[#A0B3D8]';
+  blueLightBorder: string = 'border-[1px] border-[#F3F6FC]';
+  greenBorder: string =
+    import.meta.env.VITE_PRODUCT === 'auletti' || import.meta.env.VITE_PARENT_PRODUCT === 'auletti' ? 'border-[1px] border-[#DEBE8C]' : 'border-[1px] border-[#009C73]';
+  redBorder: string = 'border-[1px] border-[#FD2D39]';
+  yellowBorder: string = 'border-[1px] border-[#FAB31C]';
 
   // Text
   textSimple: string = 'text-[14px] leading-5';
@@ -63,6 +71,8 @@ export class Styles {
   redBtn: string;
   yellowBtn: string;
   whiteBtn: string;
+  whiteBorderBtn: string;
+  whiteBtnBlueBr: string;
   blueLightBtn: string;
   greenLightBtn: string;
 
@@ -70,9 +80,10 @@ export class Styles {
   flexColNav: string;
   emptyBlockCol: string;
   scrollPage: string;
+  flexCenter: string = 'flex items-center justify-center';
 
   // Muted or disabled
-  mutedText: string = 'text-[#99A3B3]';
+  mutedText: string = '!text-[#99A3B3]';
   disabled: string = 'cursor-not-allowed opacity-50';
 
   constructor() {
@@ -81,14 +92,16 @@ export class Styles {
     this.redBtn = `${this.redBg} ${this.whiteText} ${this.textTitle} ${this.rounded} w-full ${this.redBgHover}`;
     this.yellowBtn = `${this.yellowBg} ${this.whiteText} ${this.textTitle} ${this.rounded} w-full ${this.yellowBgHover}`;
     this.blueBtn = `${this.blueBg} ${this.whiteText} ${this.textTitle} ${this.rounded} w-full ${this.blueBgHover}`;
+    this.whiteBtnBlueBr = `${this.whiteBg} ${this.blueText} ${this.textTitle} ${this.rounded} w-full ${this.blueBgLightHover} ${this.blueBorder}`;
     this.whiteBtn = ` ${this.blackText} ${this.textTitle} ${this.rounded} w-full ${this.blueLightBgHover}`;
+    this.whiteBorderBtn = ` ${this.blackText} ${this.textTitle} ${this.rounded} w-full ${this.blueLightBgHover} border-[#A0B3D8] border-[1px]`;
     this.blueLightBtn = `${this.blueBgLight} ${this.greyTextLight} ${this.textTitle} ${this.rounded} w-full ${this.blueBgLightHover}`;
     this.greenLightBtn = `${this.greenBgLight} ${this.greenText} ${this.textTitle} ${this.rounded} w-full ${this.greenBgLightHover}`;
 
     // Complex
     this.flexColNav = 'flex flex-col gap-[10px] px-2 pt-[14px]';
     this.emptyBlockCol = 'w-[60px] sm:w-[100px] h-[30%] rounded-[8px] bg-[#f5f5f5]';
-    this.scrollPage = 'max-h-[90vh] overflow-y-scroll';
+    this.scrollPage = 'max-h-[85svh] overflow-y-scroll';
   }
 }
 

package/layouts/default.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="h-full z-[1]" :class="[$dataStore.hasLayoutMargins ? 'lg:mx-[22px] lg:my-[33px] lg:shadow-xl' : '']">
     <div :class="[$styles.greenBg]" class="hidden z-[-1] lg:block absolute left-0 top-0 h-[200px] w-full"></div>
-    <section class="flex h-full" :class="$styles.blueBgLight">
+    <section class="flex h-full relative" :class="$styles.blueBgLight">
       <base-menu-nav
         v-if="$dataStore.showNav"
         :selected="$dataStore.menu.selectedItem"
         :title="$dataStore.menu.title ?? 'Страховые продукты'"
         :has-back="$dataStore.menu.hasBack ?? false"
         :back-icon="$dataStore.menu.backIcon ?? 'mdi-arrow-left'"
-        :more-icon="$dataStore.menu.moreIcon ?? 'mdi-cog-outline'"
-        :has-more="'hasMore' in $route.meta && $route.meta.hasMore ? !!$route.meta.hasMore : false"
+        :more-icon="$dataStore.menu.moreIcon ?? 'mdi-dots-vertical'"
+        :has-more="'hasMore' in $route.meta ? !!$route.meta.hasMore : true"
+        :has-info="$dataStore.menu.hasInfo"
+        :info-icon="$dataStore.menu.infoIcon"
+        :info-items="$dataStore.menu.infoItems"
         :class="{
           // @ts-ignore
           '!hidden': !$display().lgAndUp.value && !!$dataStore.menu.selectedItem.title,
@@ -23,6 +26,7 @@
         </template>
       </base-menu-nav>
       <slot></slot>
+      <base-drawer which-panel="rightPanel" :panel-title="$dataStore.rightPanel.title" side="right" />
       <base-settings-panel />
     </section>
   </div>
@@ -44,6 +48,44 @@ const onLink = async (item: MenuItem) => {
 const onBack = async (item: MenuItem) => {
   if (dataStore.menu.onBack) await dataStore.menu.onBack(item);
 };
+
+watch(
+  () => dataStore.settings.open,
+  () => {
+    if (dataStore.settings.open === true && dataStore.panel.open === true) {
+      dataStore.panel.open = false;
+      dataStore.panelAction = null;
+    }
+    if (dataStore.settings.open === true && dataStore.rightPanel.open === true) {
+      dataStore.rightPanel.open = false;
+    }
+  },
+);
+
+watch(
+  () => dataStore.rightPanel.open,
+  () => {
+    if (dataStore.rightPanel.open === true && dataStore.panel.open === true) {
+      dataStore.panel.open = false;
+      dataStore.panelAction = null;
+    }
+    if (dataStore.rightPanel.open === true && dataStore.settings.open === true) {
+      dataStore.settings.open = false;
+    }
+  },
+);
+
+watch(
+  () => dataStore.panel.open,
+  () => {
+    if (dataStore.panel.open === true && dataStore.settings.open === true) {
+      dataStore.settings.open = false;
+    }
+    if (dataStore.panel.open === true && dataStore.rightPanel.open === true) {
+      dataStore.rightPanel.open = false;
+    }
+  },
+);
 </script>
 <style>
 .mainpage,
@@ -72,4 +114,7 @@ label .v-label .v-field-label,
   /* line-height: v-bind('dataStore.fontSize*1 + "px"') !important; */
   padding-bottom: 3px;
 }
+.v-card {
+  border-radius: 8px !important;
+}
 </style>