hl-core 0.0.9-beta.4 → 0.0.9-beta.41

package/components/Panel/PanelHandler.vue

@@ -17,50 +17,87 @@
           >{{ `Запрашиваемая страховая сумма: ` }} <b>{{ `${requestedSumInsured}₸` }}</b>
         </span>
       </base-content-block>
+      <base-content-block v-if="$dataStore.isLifetrip" class="flex flex-col gap-3">
+        <span
+          >{{ `Стоимость на страховую сумму ${insuredAmount}:` }} <b>{{ `${price}₸` }}</b></span
+        >
+      </base-content-block>
       <base-btn :text="$dataStore.t('confirm.yes')" @click="handleTask" />
       <base-btn :btn="$styles.blueLightBtn" :text="$dataStore.t('confirm.no')" @click="closePanel" />
     </div>
   </section>
-  <section v-if="signingActions" class="relative">
-    <div>
-      <base-fade-transition>
-        <div v-if="!isSendNumberOpen" :class="[$styles.flexColNav]">
-          <div :class="[$styles.blueBgLight]" class="rounded-lg p-4">
-            <v-expansion-panels v-if="formStore.signUrls && formStore.signUrls.length" variant="accordion" multiple>
-              <v-expansion-panel v-for="signUrl of formStore.signUrls" :key="signUrl.iin!" class="border-[1px]" elevation="0" bg-color="#FFF">
-                <v-expansion-panel-title class="h-[80px]" :class="$styles.textTitle">{{ `${signUrl.longName} - ${signUrl.iin}` }}</v-expansion-panel-title>
-                <v-expansion-panel-text class="border-t-[1px]">
-                  <section class="flex flex-col gap-4 py-3" :class="$styles.textSimple">
-                    <base-btn :loading="loading" :text="$dataStore.t('sign.copyCloud')" @click="$dataStore.copyToClipboard(signUrl.uri)" />
-                    <base-btn :loading="loading" :btn="$styles.blueLightBtn" :text="$dataStore.t('sign.recipientNumber')" @click="openSmsPanel(signUrl)" />
-                  </section>
-                </v-expansion-panel-text>
-              </v-expansion-panel>
-            </v-expansion-panels>
-            <base-list-empty v-else />
-          </div>
-        </div>
-        <div v-if="isSendNumberOpen" :class="[$styles.flexColNav]">
-          <i
-            class="mdi mdi-arrow-left cursor-pointer absolute text-xl left-0 top-0 rounded-br-full bg-white border-[1px] pb-3 pt-1 pl-1 pr-3"
-            @click="isSendNumberOpen = false"
-          ></i>
-          <base-form-section :title="selectedClient && selectedClient.longName ? selectedClient.longName : ''">
-            <v-form ref="vForm">
-              <base-rounded-input
-                v-model="phoneNumber"
-                :maska="$maska.phone"
-                :rules="$rules.required.concat($rules.phoneFormat)"
-                :label="$dataStore.t('form.phoneNumber')"
-                placeholder="+7 7"
-              />
-            </v-form>
-            <base-btn :text="$dataStore.t('buttons.sendSMS')" :loading="loading" @click="submitForm"
-          /></base-form-section>
+  <section v-if="chooseSignActions">
+    <div v-if="!isElectronicContract && !isPaperContract && !isScansDocuments && !isQr" :class="[$styles.flexColNav]">
+      <base-btn :text="$dataStore.t('buttons.sendOnPaper')" :disabled="isPaperDisabled" :loading="loading" @click="handleSignAction('paper')" />
+      <base-btn :text="$dataStore.t('buttons.sendElectronically')" :disabled="isElectronicDisabled" :loading="loading" @click="handleSignAction('electronic')" />
+      <base-btn :text="$dataStore.t('buttons.generatePrintedForms')" :disabled="isScansDisabled" :loading="loading" @click="handleSignAction('scans')" />
+      <base-btn :text="$dataStore.t('buttons.sendEgovMob')" :disabled="isQrDisabled" :loading="loading" @click="handleSignAction('qr')" />
+    </div>
+    <div v-if="isPaperContract" :class="[$styles.flexColNav]">
+      <base-btn :text="$dataStore.t('buttons.downloadContract')" :loading="$dataStore.isButtonsLoading" @click="generateDocument" />
+    </div>
+    <div v-if="isScansDocuments" :class="[$styles.flexColNav]">
+      <base-btn :text="$dataStore.t('buttons.downloadStatement')" @click="downloadTemplate(constants.documentTypes.statement, 'docx')" />
+      <base-btn :text="$dataStore.t('buttons.downloadContract')" @click="downloadTemplate(constants.documentTypes.contract, 'doc')" />
+      <base-btn :text="$dataStore.t('buttons.downloadApplication')" @click="downloadTemplate(constants.documentTypes.application1, 'vnd.ms-excel')" />
+      <base-form-section class="mt-4 flex flex-col !gap-2" :title="$dataStore.t('clients.attachScansSignDocs')">
+        <base-file-input :label="$dataStore.t('labels.attachStatement')" @input.prevent="onFileChangeScans($event, 'statement')" @onClear="onClearFile('statement')" />
+        <base-file-input :label="$dataStore.t('labels.attachContract')" @input.prevent="onFileChangeScans($event, 'contract')" @onClear="onClearFile('contract')" />
+        <base-file-input :label="$dataStore.t('labels.attachApplication')" @input.prevent="onFileChangeScans($event, 'app')" @onClear="onClearFile('app')" />
+        <base-file-input :label="$dataStore.t('labels.attachPowerOfAttorney')" @input.prevent="onFileChangeScans($event, 'attorney')" @onClear="onClearFile('attorney')" />
+      </base-form-section>
+      <base-btn :text="$dataStore.t('buttons.sign')" :loading="$dataStore.isButtonsLoading" @click="sendFiles" />
+      <base-btn :text="$dataStore.t('buttons.cancel')" :btn="$styles.whiteBtn" @click="isScansDocuments = false" />
+    </div>
+    <div v-if="isQr" :class="[$styles.flexColNav]">
+      <base-form-section :title="''">
+        <base-loader v-if="isQrLoading" class="self-center m-5 opacity-70" />
+        <div v-if="qrUrl && !isQrLoading">
+          <img width="135" height="135" class="ma-auto" :src="qrUrl" alt="" />
+          <span :class="[$styles.textSimple]" class="mt-3 text-center d-block">{{ $dataStore.t('sign.scanQrCode') }}</span>
         </div>
-      </base-fade-transition>
+        <base-btn class="mt-10" :loading="loading" :text="$dataStore.t('sign.copyEgov')" @click="$dataStore.copyToClipboard(urlCopy)" />
+        <base-btn :text="$dataStore.t('buttons.cancel')" :btn="$styles.whiteBtn" @click="closeQrPanel" />
+      </base-form-section>
     </div>
   </section>
+  <section v-if="signingActions" class="relative">
+    <base-fade-transition>
+      <div v-if="!isSendNumberOpen" :class="[$styles.flexColNav]">
+        <div :class="[$styles.blueBgLight]" class="rounded-lg p-4">
+          <v-expansion-panels v-if="formStore.signUrls && formStore.signUrls.length" variant="accordion" multiple>
+            <v-expansion-panel v-for="signUrl of formStore.signUrls" :key="signUrl.iin!" class="border-[1px]" elevation="0" bg-color="#FFF">
+              <v-expansion-panel-title class="h-[80px]" :class="$styles.textTitle">
+                {{ `${signUrl.longName} - ${signUrl.iin}` }}
+              </v-expansion-panel-title>
+              <v-expansion-panel-text class="border-t-[1px]">
+                <section class="flex flex-col gap-4 py-3" :class="$styles.textSimple">
+                  <base-btn :loading="loading" :text="$dataStore.t('sign.copyCloud')" @click="$dataStore.copyToClipboard(signUrl.uri)" />
+                  <base-btn :loading="loading" :btn="$styles.blueLightBtn" :text="$dataStore.t('sign.recipientNumber')" @click="openSmsPanel(signUrl)" />
+                </section>
+              </v-expansion-panel-text>
+            </v-expansion-panel>
+          </v-expansion-panels>
+          <base-list-empty v-else />
+        </div>
+      </div>
+      <div v-if="isSendNumberOpen" :class="[$styles.flexColNav]">
+        <i class="mdi mdi-arrow-left cursor-pointer absolute text-xl left-0 top-0 rounded-br-full bg-white border-[1px] pb-3 pt-1 pl-1 pr-3" @click="isSendNumberOpen = false"></i>
+        <base-form-section :title="selectedClient && selectedClient.longName ? selectedClient.longName : ''">
+          <v-form ref="vForm">
+            <base-rounded-input
+              v-model="phoneNumber"
+              :maska="$maska.phone"
+              :rules="$rules.required.concat($rules.phoneFormat)"
+              :label="$dataStore.t('form.phoneNumber')"
+              placeholder="+7 7"
+            />
+          </v-form>
+          <base-btn :text="$dataStore.t('buttons.sendSMS')" :loading="loading" @click="submitForm" />
+        </base-form-section>
+      </div>
+    </base-fade-transition>
+  </section>
   <section v-if="payingActions" class="relative">
     <div>
       <base-fade-transition>
@@ -99,27 +136,58 @@
             :maska="$maska.date"
             :rules="$rules.required"
             :label="$dataStore.t('form.date')"
-            append-inner-icon="mdi mdi-calendar-blank-outline" />
+            append-inner-icon="mdi mdi-calendar-blank-outline"
+          />
           <base-file-input v-if="!affiliationDocument" @input.prevent="onFileChange($event)" />
           <base-empty-form-field v-if="affiliationDocument" class="justify-between">
             {{ `${affiliationDocument.fileTypeName} - ${affiliationDocument.fileName}` }}
-            <i class="cursor-pointer mdi mdi-file-document mr-6 text-[#a0b3d8] text-xl"></i></base-empty-form-field
-        ></base-content-block>
+            <i class="cursor-pointer mdi mdi-file-document mr-6 text-[#a0b3d8] text-xl"></i
+          ></base-empty-form-field>
+        </base-content-block>
       </v-form>
       <base-btn :text="buttonText" :loading="loading" @click="submitForm" />
     </div>
   </section>
+  <section v-if="templateAction">
+    <div :class="[$styles.flexColNav]">
+      <base-content-block>
+        <base-panel-item class="cursor-pointer bg-white mb-4 border-b-0 rounded" @click.prevent="downloadTemplate(constants.documentTypes.insuredsList, 'vnd.ms-excel')">
+          {{ $dataStore.t('downloadTemplate') }}
+          <i class="mdi mdi-download text-2xl text-[#A0B3D8]"></i
+        ></base-panel-item>
+      </base-content-block>
+      <base-content-block>
+        <v-form ref="vForm" class="mb-3">
+          <base-form-input v-model.trim="email" :label="$dataStore.t('form.email')" :rules="$rules.required" />
+        </v-form>
+        <base-btn :text="$dataStore.t('form.sendToEmail')" :loading="loading" @click="sendTemplateToEmail" />
+      </base-content-block>
+    </div>
+  </section>
 </template>
 
 <script lang="ts">
-import { DocumentItem } from '../../composables/classes';
+import { DocumentItem, Value } from '../../composables/classes';
+import { HubConnectionBuilder } from '@microsoft/signalr';
+
 export default defineComponent({
-  setup() {
+  emits: ['task'],
+  setup(props, { emit }) {
     const route = useRoute();
     const dataStore = useDataStore();
     const formStore = useFormStore();
     const actionCause = ref<string>('');
     const loading = ref<boolean>(false);
+    const isPaperContract = ref<boolean>(false);
+    const isScansDocuments = ref<boolean>(false);
+    const isQr = ref<boolean>(false);
+    const isElectronicContract = ref<boolean>(true);
+    const email = ref<string>('');
+    const qrUrl = ref<string>('');
+    const connection = ref<any>(null);
+    const isQrLoading = ref<boolean>(false);
+    const urlCopy = ref<string>('');
+
     const vForm = ref<any>();
     const isSendNumberOpen = ref<boolean>(false);
     const phoneNumber = ref<string | null>(formStore.policyholderForm.phoneNumber ?? '');
@@ -137,6 +205,8 @@ export default defineComponent({
       fileTypeCode: documentDict.value ? documentDict.value.code : '',
     });
     const affiliationFormData = ref(new FormData());
+    const scansFormData = ref(new FormData());
+    const scansFiles = ref<any[]>([]);
 
     const openSmsPanel = (signInfo: SignUrlType) => {
       if (signInfo) {
@@ -166,6 +236,63 @@ export default defineComponent({
       }
     };
 
+    const onFileChangeScans = async (event: InputEvent, type: 'statement' | 'contract' | 'app' | 'attorney') => {
+      if (event.target) {
+        const files = (event.target as HTMLInputElement).files;
+        if (files && files.length) {
+          const doc = await selectedDocument(type);
+          const data = {
+            processInstanceId: formStore.applicationData.processInstanceId,
+            fileTypeCode: doc ? doc.code : null,
+            fileTypeId: doc ? doc.id : null,
+            fileName: files[0].name,
+          };
+          scansFiles.value.push({
+            file: files[0],
+            fileData: JSON.stringify([data]),
+          });
+        }
+      }
+    };
+
+    const onClearFile = async (type: 'statement' | 'contract' | 'app' | 'attorney') => {
+      const doc = await selectedDocument(type);
+      const result = scansFiles.value.filter(i => JSON.parse(i.fileData)[0].fileTypeCode !== doc.code);
+      scansFiles.value = result;
+    };
+
+    const selectedDocument = (type: 'statement' | 'contract' | 'app' | 'attorney') => {
+      let selectedDocument: any;
+      if (type === 'statement') {
+        selectedDocument = dataStore.dicFileTypeList.find((i: Value) => i.code === '32');
+      }
+      if (type === 'contract') {
+        selectedDocument = dataStore.dicFileTypeList.find((i: Value) => i.code === '6');
+      }
+      if (type === 'app') {
+        selectedDocument = dataStore.dicFileTypeList.find((i: Value) => i.code === '33');
+      }
+      if (type === 'attorney') {
+        selectedDocument = dataStore.dicFileTypeList.find((i: Value) => i.code === '34');
+      }
+      return selectedDocument;
+    };
+
+    const sendFiles = async () => {
+      if (scansFiles.value.length !== 4) {
+        dataStore.showToaster('warning', dataStore.t('toaster.notAllDocumentsAttached'));
+        return;
+      }
+      for (const item of scansFiles.value) {
+        scansFormData.value.append('file', item.file);
+        scansFormData.value.append('fileData', item.fileData);
+        await dataStore.uploadFiles(scansFormData.value);
+        scansFormData.value = new FormData();
+      }
+      closePanel();
+      dataStore.showToaster('success', dataStore.t('toaster.successOperation'));
+      await dataStore.handleTask(constants.actions.signed, route.params.taskId as string, actionCause.value);
+    };
     const submitForm = async () => {
       await vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
         if (v.valid) {
@@ -198,10 +325,32 @@ export default defineComponent({
 
     const handleTask = async () => {
       loading.value = true;
-      await dataStore.handleTask(dataStore.panelAction, route.params.taskId as string, actionCause.value);
+      // Пока не нужно, на всякий оставить
+      // if (needRecalculation.value) {
+      //   dataStore.showToaster('info', dataStore.t('toaster.needToRecalculate'));
+      //   loading.value = false;
+      //   return;
+      // }
+      if (dataStore.isAML || dataStore.isCheckContract || dataStore.isCheckContragent || dataStore.isDas) {
+        emit('task', [dataStore.panelAction, route.params.taskId as string, actionCause.value]);
+      } else {
+        await dataStore.handleTask(dataStore.panelAction, route.params.taskId as string, actionCause.value);
+      }
       loading.value = false;
     };
 
+    const onInit = async () => {
+      if (dataStore.controls.hasChooseSign) {
+        if (dataStore.isGons || dataStore.isLifeBusiness) {
+          isElectronicContract.value = false;
+        }
+      }
+    };
+
+    onMounted(async () => {
+      await onInit();
+    });
+
     const buttonText = computed(() => {
       switch (dataStore.panelAction) {
         case constants.actions.reject:
@@ -218,36 +367,187 @@ export default defineComponent({
         case constants.actions.register:
           return dataStore.t('buttons.register');
         case constants.actions.affiliate:
+        case constants.actions.template:
+          return dataStore.t('buttons.send');
+        default:
           return dataStore.t('buttons.send');
       }
     });
 
+    const panelTitle = computed(() => {
+      if (dataStore.isLifeBusiness && dataStore.panelAction === constants.actions.template) {
+        return dataStore.t('template');
+      }
+      return buttonText.value;
+    });
+
     watch(
       () => dataStore.panelAction,
       val => {
         if (!!val) {
-          dataStore.panel.title = buttonText.value!;
+          dataStore.panel.title = panelTitle.value;
           dataStore.panel.open = true;
         }
       },
       { immediate: true },
     );
+
+    const needRecalculation = computed(
+      () =>
+        dataStore.isGons &&
+        formStore.applicationData.statusCode === 'UnderwriterForm' &&
+        dataStore.panelAction === constants.actions.accept &&
+        formStore.productConditionsForm.isRecalculated === false,
+    );
     const sendingActions = computed(
       () => dataStore.panelAction === constants.actions.reject || dataStore.panelAction === constants.actions.return || dataStore.panelAction === constants.actions.rejectclient,
     );
     const acceptAction = computed(() => dataStore.panelAction === constants.actions.accept);
+    const templateAction = computed(() => dataStore.panelAction === constants.actions.template);
     const signingActions = computed(() => dataStore.panelAction === constants.actions.sign);
     const payingActions = computed(() => dataStore.panelAction === constants.actions.pay);
     const affiliateActions = computed(() => dataStore.panelAction === constants.actions.affiliate);
+    const chooseSignActions = computed(() => dataStore.controls.hasChooseSign && dataStore.panelAction === constants.actions.chooseSign);
+
     const paymentPeriod = computed(() => formStore.productConditionsForm.paymentPeriod.nameRu);
     const insurancePremiumPerMonth = computed(() => dataStore.getNumberWithSpaces(formStore.productConditionsForm.insurancePremiumPerMonth));
-    const requestedSumInsured = computed(() => dataStore.getNumberWithSpaces(formStore.productConditionsForm.requestedSumInsured));
+    const requestedSumInsured = computed(() => {
+      if (dataStore.isLifeBusiness && formStore.productConditionsForm.requestedSumInsured === null) {
+        return dataStore.getNumberWithSpaces(formStore.applicationData.policyAppDto!.mainInsSum);
+      }
+      return dataStore.getNumberWithSpaces(formStore.productConditionsForm.requestedSumInsured);
+    });
+    const price = computed(() => dataStore.getNumberWithSpaces(formStore.productConditionsForm.calculatorForm.price));
+    const insuredAmount = computed(() => formStore.productConditionsForm.calculatorForm.amount!.nameRu! + dataStore.currency);
     const hasConditionsInfo = computed(() => {
+      if (dataStore.isLifetrip || dataStore.isDas) {
+        return false;
+      }
       if (dataStore.isFinCenter()) {
         return false;
       }
       return true;
     });
+    const isPaperDisabled = computed(() => {
+      if (dataStore.isGons) {
+        return false;
+      }
+      return true;
+    });
+    const isElectronicDisabled = computed(() => {
+      if (dataStore.isGons) {
+        return true;
+      }
+      return false;
+    });
+    const isScansDisabled = computed(() => {
+      if (dataStore.isGons) {
+        return true;
+      }
+      return false;
+    });
+    const isQrDisabled = computed(() => {
+      if (dataStore.isLifeBusiness) {
+        return false;
+      }
+      return true;
+    });
+    const downloadTemplate = async (documentType: number, fileType: string) => {
+      await dataStore.downloadTemplate(documentType, fileType);
+    };
+
+    const sendTemplateToEmail = async () => {
+      await vForm.value.validate().then(async (v: { valid: Boolean; errors: any }) => {
+        if (v.valid) {
+          dataStore.panel.open = false;
+          dataStore.panelAction = null;
+          await dataStore.sendTemplateToEmail(email.value);
+        }
+      });
+    };
+
+    const handleSignAction = async (type: 'paper' | 'electronic' | 'scans' | 'qr') => {
+      loading.value = true;
+      if (type === 'electronic') {
+        await dataStore.signDocument();
+        isElectronicContract.value = true;
+      }
+      if (type === 'paper') {
+        isPaperContract.value = true;
+      }
+      if (type === 'scans') {
+        isScansDocuments.value = true;
+      }
+      if (type === 'qr') {
+        const result = (await dataStore.signDocument('qr')) as any;
+        if (result && result.data) {
+          const groupId = result.data[0].signatureDocumentGroupId;
+          await generateQR(groupId);
+          isQr.value = true;
+        }
+      }
+      loading.value = false;
+    };
+
+    // TODO Рефактор QR c npm
+    const generateQR = async (groupId: string) => {
+      const uuid = crypto.randomUUID();
+      const qrValue = `${getValuePerEnv('qrGenUrl')}/${uuid}/${groupId}`;
+      qrUrl.value = `https://api.qrserver.com/v1/create-qr-code/?size=135x135&data=${qrValue}`;
+
+      if (dataStore.isLifeBusiness) {
+        //для юр лиц
+        urlCopy.value = `https://egovbusiness.page.link/?link=${qrValue}?mgovSign&amp;apn=kz.mobile.mgov.business&amp;isi=1597880144&amp;ibi=kz.mobile.mgov.business`;
+      } else {
+        //для физ лиц
+        urlCopy.value = `https://mgovsign.page.link/?link=${qrValue}?mgovSign&amp;apn=kz.mobile.mgov&amp;isi=1476128386&amp;ibi=kz.egov.mobile`;
+      }
+
+      await startConnection(uuid);
+    };
+
+    const startConnection = async (uuid: string) => {
+      connection.value = new HubConnectionBuilder().withUrl(`https://test-sign.halyklife.kz/qrhub/${uuid}`).withAutomaticReconnect().build();
+      try {
+        await connection.value.start();
+        console.log('SignalR connection started.');
+        connection.value.on('QR', async (message: any) => {
+          if (message === 'Opened') {
+            isQrLoading.value = true;
+          }
+          if (message === 'Signed') {
+            isQrLoading.value = false;
+            dataStore.showToaster('success', dataStore.t('sign.successQrSigned'));
+            qrUrl.value = '';
+            isQr.value = false;
+            dataStore.panel.open = false;
+            dataStore.panelAction = null;
+            await stopConnection();
+          }
+        });
+      } catch (err) {
+        console.error('Error starting SignalR connection:', err);
+      }
+    };
+
+    const closeQrPanel = async () => {
+      isQr.value = false;
+      isQrLoading.value = false;
+      await stopConnection();
+    };
+
+    const stopConnection = async () => {
+      if (connection.value) {
+        await connection.value.stop();
+        console.log('SignalR connection stopped.');
+      }
+    };
+
+    const generateDocument = async () => {
+      dataStore.panel.open = false;
+      dataStore.panelAction = null;
+      await dataStore.generateDocument();
+    };
 
     return {
       // State
@@ -258,6 +558,14 @@ export default defineComponent({
       isSendNumberOpen,
       phoneNumber,
       selectedClient,
+      isPaperContract,
+      isScansDocuments,
+      email,
+      isQr,
+      qrUrl,
+      scansFiles,
+      isQrLoading,
+      urlCopy,
 
       // Functions
       closePanel,
@@ -266,6 +574,12 @@ export default defineComponent({
       openSmsPanel,
       openEpayPanel,
       onFileChange,
+      downloadTemplate,
+      sendTemplateToEmail,
+      onFileChangeScans,
+      sendFiles,
+      onClearFile,
+      closeQrPanel,
 
       // Computed
       buttonText,
@@ -274,11 +588,22 @@ export default defineComponent({
       payingActions,
       acceptAction,
       affiliateActions,
+      chooseSignActions,
       paymentPeriod,
       insurancePremiumPerMonth,
       requestedSumInsured,
       affiliationDocument,
       hasConditionsInfo,
+      price,
+      insuredAmount,
+      templateAction,
+      isElectronicContract,
+      handleSignAction,
+      generateDocument,
+      isPaperDisabled,
+      isElectronicDisabled,
+      isScansDisabled,
+      isQrDisabled,
     };
   },
 });
@@ -288,16 +613,19 @@ export default defineComponent({
 .v-expansion-panel-title__overlay {
   background: #ffffff;
 }
+
 .v-expansion-panel-title {
   height: 70px !important;
   padding: 10px 20px !important;
 }
+
 .v-expansion-panels--variant-accordion > :last-child {
   border-top-left-radius: 0.5rem !important;
   border-top-right-radius: 0.5rem !important;
   border-top-left-radius: 0.5rem !important;
   border-radius: 0.5rem !important;
 }
+
 .v-expansion-panel-text__wrapper {
   padding: 10px 20px !important;
 }

package/components/Panel/PanelSelectItem.vue

@@ -1,7 +1,10 @@
 <template>
-  <div class="flex justify-between p-4 items-center cursor-pointer" :class="[$styles.rounded, $styles.blueBgLight, $styles.blueBgLightHover]">
+  <div
+    class="transition-all flex justify-between p-4 items-center cursor-pointer"
+    :class="[$styles.rounded, $styles.blueBgLight, $styles.blueBgLightHover, disabled ? $styles.disabled : '']"
+  >
     <span :class="[$styles.textSimple]">{{ text }}</span>
-    <i class="mdi text-xl" :class="[selected ? `mdi-radiobox-marked ${$styles.greenText}` : 'mdi-radiobox-blank text-[#636363]']"></i>
+    <i class="mdi text-xl" :class="[selected ? `${trueIcon} ${$styles.greenText}` : `${falseIcon} text-[#636363]`]"></i>
   </div>
 </template>
 
@@ -15,6 +18,18 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    trueIcon: {
+      type: String,
+      default: 'mdi-radiobox-marked',
+    },
+    falseIcon: {
+      type: String,
+      default: 'mdi-radiobox-blank ',
+    },
   },
 });
 </script>

package/components/Panel/RightPanelCloser.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const dataStore = useDataStore();
+
+onUnmounted(() => {
+  dataStore.rightPanel.open = false;
+});
+</script>

package/components/Transitions/Animation.vue

@@ -0,0 +1,28 @@
+<template>
+  <component v-if="!!type && Object.keys(vuetifyAnimations).includes(type)" :is="vuetifyAnimations[type]">
+    <slot></slot>
+  </component>
+  <slot v-else></slot>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  type: {
+    type: String as PropType<VuetifyAnimations>,
+    required: false,
+  },
+});
+
+const vuetifyAnimations: { [key in VuetifyAnimations]: string } = {
+  expand: 'v-expand-transition',
+  fab: 'v-fab-transition',
+  fade: 'v-fade-transition',
+  scale: 'v-scale-transition',
+  'scroll-x': 'v-scroll-x-transition',
+  'scroll-y': 'v-scroll-x-transition',
+  'slide-x': 'v-slide-x-transition',
+  'slide-x-r': 'v-slide-x-reverse-transition',
+  'slide-y': 'v-slide-y-transition',
+  'slide-y-r': 'v-slide-y-reverse-transition',
+};
+</script>

package/composables/axios.ts

@@ -1,9 +1,10 @@
 import axios from 'axios';
 import interceptors from '../api/interceptors';
 
-export const useAxios = (baseURL: string) => {
+export const useAxiosInstance = (baseURL: string) => {
   const axiosInstance = axios.create({
     baseURL: baseURL,
+    signal: useDataStore().rController.signal,
   });
   interceptors(axiosInstance);