adata-ui 2.1.40-beta.1 → 2.1.40-beta.11

package/components/modals/ContentNavigationModal.vue

@@ -1,355 +1,99 @@
 <script setup lang="ts">
+import type { Component } from 'vue'
+import { useCurrentModule } from '#adata-ui/composables/projectState'
+import { useHeaderNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
 
-import {ref} from "vue";
-import IconSearch from "#adata-ui/icons/search.vue";
-import {PAGES} from '#adata-ui/shared/constans/pages'
-import IconScales from "#adata-ui/icons/scales/scale.vue";
-import IconLink from "#adata-ui/icons/link-chain.vue";
-import IconUsers from "#adata-ui/icons/users.vue";
-import IconGlobe from "#adata-ui/icons/globe.vue";
-import IconBlock from "#adata-ui/icons/block.vue";
-import IconDollar from "#adata-ui/icons/currency/currency-dollar.vue";
-import IconDocument from "#adata-ui/icons/hdocument.vue";
-import IconArrowCircle from "#adata-ui/icons/arrow/arrow-circle-down.vue";
-import IconWork from "#adata-ui/icons/work-bag.vue";
-import IconFile from "#adata-ui/icons/file/file.vue";
-import IconCheck from "#adata-ui/icons/hcheck.vue";
-import IconCheckCircle from "#adata-ui/icons/check/check-circle.vue";
-import IconCar from "#adata-ui/icons/car.vue";
-import IconTruck from "#adata-ui/icons/truck.vue";
-import IconArrowGraph from "#adata-ui/icons/arrow/arrow-graph-up.vue";
-import IconCompany from "#adata-ui/icons/company.vue";
-import IconMedal from "#adata-ui/icons/medal.vue";
-import IconProfile from "#adata-ui/icons/profile.vue";
-import Connections from "#adata-ui/icons/sviazi.vue";
-import {useCurrentModule} from "#adata-ui/composables/projectState";
-import IconCalc from '#adata-ui/icons/calculator.vue'
-import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
-import {
-  AIconAkimat,
-  AIconCurrencyTenge,
-  AIconExcelIcon,
-  AIconFiles, AIconSearch,
-  AIconUsers,
-  AIconWarningTriangle
-} from '#components'
-import MapPinRect from '#adata-ui/icons/map/map-pin-rect.vue'
-import ChartBar from '#adata-ui/icons/chart-bar.vue'
-import Bank from '#adata-ui/icons/bank.vue'
-import { useUrls } from '#adata-ui/composables/useUrls'
-import MapPaper from '#adata-ui/icons/map-paper.vue'
-import AiAssistant from '#adata-ui/icons/ai-assistant.vue'
-import Tasks from '#adata-ui/icons/tasks.vue'
-import HotLine from '#adata-ui/icons/hot-line.vue'
-import Sanctions from '#adata-ui/icons/sanctions.vue'
-import CheckSb from '#adata-ui/icons/check-sb.vue'
-type Emits = {
-  (e: 'pushMain'): void
+interface NavItem {
+  title: string
+  icon: Component
+  to: string
 }
-const isOpen = ref(false)
-const tab = ref(useCurrentModule().value)
-const { myLayer }: any = useAppConfig()
-const urls = useUrls()
 
-const { t, locale } = useI18n()
+interface Emits {
+  (e: 'pushMain'): void
+}
 const emits = defineEmits<Emits>()
-const mode = myLayer.mode
-
-const tabOptions = [
-  {
-    name: 'header.products.counterparties.label',
-    key: 'pk',
-  },
-  {
-    name: 'header.products.fines.label',
-    key: 'fines',
-  },
-  {
-    name: 'header.products.jobs.label',
-    key: 'work',
-  },
-  {
-    name: 'header.products.fea.label',
-    key: 'fea',
-  },
-  {
-    name: 'header.products.tenders.label',
-    key: 'tenders',
-  },
-  {
-    name: 'header.products.edo.label',
-    key: 'edo',
-  },
-  {
-    name: 'header.products.compliance.label',
-    key: 'compliance',
-  },
 
-  {
-    name: 'header.products.analytics.label',
-    key: 'analytics',
-  },
+const open = defineModel<boolean>({ default: false })
 
+const { t } = useI18n()
+const modules = useHeaderNavigationLinks()
 
+const initialKey = useCurrentModule().value
+const tab = ref<string>(
+  initialKey && modules.value.some(module => module.key === initialKey)
+    ? initialKey
+    : (modules.value[0]?.key ?? 'pk'),
+)
 
-]
-const sideLinks = <any>{
-  edo: [
-    {
-      label: 'header.products.edo.label',
-      icon: AIconFiles,
-      link: urls.edo_docs,
-    }
-  ],
-  pk: [
-    {
-      icon: IconSearch,
-      label: 'header.products.counterparties.items.counterparty.title',
-      link: urls.pk + PAGES.pk.main
-    },
-    {
-      icon: IconScales,
-      label: 'header.products.counterparties.items.compare.title',
-      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.compare : urls.pk + PAGES.pk.compare
-    },
-    {
-      icon: IconLink,
-      label: 'header.products.counterparties.items.networks.title',
-      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + '/search-connections/check' : urls.pk + PAGES.pk.connections
-    },
-    {
-      icon: IconUsers,
-      label: 'header.products.counterparties.items.wholesale.title',
-      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.employees : urls.pk + PAGES.pk.employees
-    },
-    {
-      icon: IconGlobe,
-      label: 'header.products.counterparties.items.foreign.title',
-      link: urls.pk + PAGES.pk.foreign
-    },
-    {
-      icon: IconBlock,
-      label: 'header.products.counterparties.items.sanction.title',
-      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.sanctions : urls.pk + PAGES.pk.sanctions
-    },
-    {
-      icon: IconDollar,
-      label: 'header.products.counterparties.items.offshore.title',
-      link: myLayer.counterParty ?  urls.pk + myLayer.counterParty + PAGES.pk.offshore : urls.pk + PAGES.pk.offshore
-    },
-    // {
-    //   icon: IconDocument,
-    //   label: "Экспресс проверка",
-    //   link: "#"
-    // },
-    {
-      icon: IconArrowCircle,
-      label: 'header.products.counterparties.items.unloading.title',
-      link: urls.pk + PAGES.pk.unload
-    }
-  ],
-  work: [
-    {
-      icon: IconWork,
-      label: 'header.products.jobs.items.vacancies.title',
-      link: urls.work + PAGES.work.vacancy
-    },
-    {
-      icon: IconDocument,
-      label: 'header.products.jobs.items.resume.title',
-      link: urls.work + PAGES.work.summary
-    },
-  ],
-  tenders: [
-    {
-      icon: AIconUsers,
-      label: t('header.products.tenders.items.customers.title'),
-      link: urls.zakupki + PAGES.tender.customers,
-    },
-    {
-      icon: AIconAkimat,
-      label: t('header.products.tenders.items.akimat.title'),
-      link: urls.zakupki + PAGES.tender.akimat,
-    },
-    {
-      icon: AIconWarningTriangle,
-      label: 'header.products.tenders.items.tru.title',
-      link: urls.zakupki + PAGES.tender.tru
-    },
-    {
-      icon: AIconCurrencyTenge,
-      label: 'header.products.tenders.items.price.title',
-      link: urls.zakupki + PAGES.tender.price
-    },
-    {
-      icon: AIconExcelIcon,
-      label: 'header.products.tenders.items.constructor.title',
-      link: urls.zakupki + PAGES.tender.constructor
-    },
-    {
-      icon: AIconSearch,
-      label: 'header.products.tenders.items.monitoring.title',
-      link: urls.tender
-    }
-  ],
-  analytics: [
-    // {
-    //   icon: IconSearch,
-    //   label: 'header.products.analytics.items.clients.title',
-    //   link: myLayer.analyticsUrl + PAGES.analytics.clients
-    // },
-    // {
-    //   icon: IconCheck,
-    //   label: 'header.products.analytics.items.procurement.title',
-    //   link: urls.analyticsNew + PAGES.analytics.main
-    // },
-    {
-      icon: IconArrowGraph,
-      label: 'header.products.analytics.items.activity.title',
-      link: urls.analytics + PAGES.analytics.index
-    },
-    {
-      icon: IconCompany,
-      label: 'header.products.analytics.items.subjects.title',
-      link: urls.analytics + PAGES.analytics.business
-    },
-    {
-      icon: IconMedal,
-      label: 'header.products.analytics.items.rate.title',
-      link: urls.analytics + PAGES.analytics.rating
-    }
-  ],
-  fines: [
-    {
-      icon: IconCheckCircle,
-      label: 'header.products.fines.items.fines.title',
-      link: urls.avto + PAGES.fines.main
-    },
-    {
-      icon: IconCar,
-      label: 'header.products.fines.items.auto.title',
-      link: urls.avto + PAGES.fines.avto
-    },
-    // {
-    //   icon: IconTruck,
-    //   label: 'header.products.fines.items.wholesaleAuto.title',
-    //   link: myLayer.avtoUrl + PAGES.fines.bulk
-    // }
-  ],
-  fea: [
-    {
-      label: 'header.products.fea.items.i.t',
-      icon: IconSearch,
-      link: `${urls.tnved}${PAGES.fea.t}`
-    },
-    {
-      label: 'header.products.fea.items.o.t',
-      icon: Connections,
-      link: `${urls.tnved}${PAGES.fea.o}`
-    },
-    {
-      label: 'header.products.fea.items.cp.t',
-      icon: IconFile,
-      link: `${urls.tnved}${PAGES.fea.cp}`
-    },
-    {
-      label: 'header.products.fea.items.ca.t',
-      icon: IconCalc,
-      link: `${urls.tnved}${PAGES.fea.ca}`
-    },
-    {
-      label: 'header.products.fea.items.tr.t',
-      icon: IconGlobe,
-      link: `${urls.tnved}${PAGES.fea.tr}`
-    },
-    {
-      label: 'header.products.fea.items.importerMap.t',
-      icon: MapPinRect,
-      link: `${urls.tnved}${PAGES.fea.importerMap}`
-    },
-    {
-      label: 'header.products.fea.items.containers.t',
-      icon: MapPaper,
-      link: `${urls.tnved}${PAGES.fea.containers}`
-    }
-  ],
-  compliance: [
-    {
-      label: 'header.products.compliance.items.assistant.t',
-      icon: AiAssistant,
-      link: urls.compliancemain + PAGES.compliance.assistant
-    },
-    {
-      label: 'header.products.compliance.items.assignments.t',
-      icon: Tasks,
-      link: urls.compliancemain + PAGES.compliance.assignments
-    },
-    {
-      label: 'header.products.compliance.items.hotline.t',
-      icon: HotLine,
-      link: urls.compliancemain + PAGES.compliance.hotline
-    },
-    {
-      label: 'header.products.compliance.items.sanctions.t',
-      icon: Sanctions,
-      link: urls.compliancemain + PAGES.compliance.sanctions
-    },
-    {
-      label: 'header.products.compliance.items.suppliers.t',
-      icon: IconProfile,
-      link: urls.compliancemain + PAGES.compliance.suppliers
-    },
-    {
-      label: 'header.products.compliance.items.sb.t',
-      icon: CheckSb,
-      link: urls.compliancemain + PAGES.compliance.sb
-    }
-  ]
-}
-const currentLinks = ref(sideLinks[tab.value])
+const tabOptions = computed(() =>
+  modules.value.map(module => ({ key: module.key, name: module.name })),
+)
 
-watch(tab, (e) => {
-  if (e) {
-    currentLinks.value = sideLinks[e]
-  }
+const currentLinks = computed<NavItem[]>(() => {
+  const module = modules.value.find(item => item.key === tab.value)
+  return (module?.items ?? []) as NavItem[]
 })
 
+function onReturn() {
+  emits('pushMain')
+}
 </script>
 
 <template>
-  <a-modal v-model="isOpen" :title="t('modals.mobile_navigation.type_main')">
-    <div class="flex flex-col gap-5">
-      <div class="h-[1px] w-full bg-deepblue-900/5"/>
-      <div>
-        <a-pill-tabs v-model="tab" :options="tabOptions" view="gray"/>
-      </div>
-      <div class="h-[40vh] sm:h-[300px] overflow-auto no-scrollbar">
-        <nuxt-link
-          v-for="item in currentLinks"
-          :key="item.label"
-          :to="item.link"
-          class="flex items-center gap-4 px-4 py-3 bg-gray-50 dark:bg-gray-800 mb-2 rounded"
-        >
-          <div class="bg-gradient-blue p-1 rounded-lg">
-            <component
-              :is="item.icon"
-              class="w-5 h-5 text-white dark:text-gray-900"
-            />
-          </div>
-          <span>{{ t(item.label) }}</span>
-        </nuxt-link>
-      </div>
-      <div class="h-[1px] w-full bg-deepblue-900/5"/>
+  <a-modal-v2
+    v-model="open"
+    hide-close
+    content-class="bg-gray-50/60 dark:bg-gray-950/40"
+  >
+    <template #header>
+      <h2 class="w-full text-center text-base font-semibold text-gray-900 dark:text-gray-100">
+        {{ t('modals.mobile_navigation.type_main') }}
+      </h2>
+    </template>
+
+    <div class="px-4 py-3">
+      <a-pill-tabs-v2
+        v-model="tab"
+        :options="tabOptions"
+        size="md"
+        scroll-into-view
+      />
     </div>
+
+    <div class="no-scrollbar flex h-[50vh] flex-col gap-2 overflow-y-auto px-4 pb-4">
+      <nuxt-link
+        v-for="item in currentLinks"
+        :key="item.to"
+        :to="item.to"
+        class="group flex items-center gap-3 rounded-2xl border border-gray-100 bg-white px-3 py-2.5 transition-colors hover:border-blue-200 hover:bg-blue-50/50 dark:border-gray-800 dark:bg-gray-900 dark:hover:border-blue-500/30 dark:hover:bg-gray-800"
+      >
+        <span class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-blue-50 text-blue-500 transition-colors group-hover:bg-blue-700 group-hover:text-white dark:bg-blue-500/10 dark:text-blue-500 dark:group-hover:bg-blue-500 dark:group-hover:text-white">
+          <component
+            :is="item.icon"
+            class="size-5"
+          />
+        </span>
+
+        <span class="min-w-0 flex-1 truncate text-sm font-semibold text-deepblue-900 dark:text-gray-100">
+          {{ item.title }}
+        </span>
+
+        <a-icon-chevron-right class="size-4 shrink-0 text-gray-300 transition-colors group-hover:text-blue-500 dark:text-gray-600" />
+      </nuxt-link>
+    </div>
+
     <template #footer>
-      <nuxt-link to="/" @click="emits('pushMain')" class="flex items-center gap-4 px-4 py-3 bg-gray-50 rounded-md dark:bg-gray-800">
-        <a-icon-menu/>
+      <nuxt-link
+        to="/"
+        class="flex items-center justify-center gap-2 rounded-2xl bg-gray-100 px-4 py-3 text-sm font-semibold text-deepblue-900 transition-colors hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700"
+        @click="onReturn"
+      >
+        <a-icon-menu class="size-5" />
         {{ t('modals.mobile_navigation.return_button') }}
       </nuxt-link>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/components/modals/Insufficient-funds-modal.vue

@@ -1,20 +1,8 @@
 <script setup lang="ts">
 import type { UserInfo } from '~/api/modules/user/types'
-import { handleElementPosition } from '#adata-ui/utils/getMaxZindex'
-
-const props = withDefaults(defineProps<Props>(), {
-  deleteFromDom: false,
-})
-
-const emit = defineEmits<{
-  (e: 'next'): void
-}>()
 
 const { t } = useI18n()
 
-interface Props {
-  deleteFromDom?: boolean
-}
 const { topUpSidePanel } = usePayment()
 
 const isOpen = defineModel<boolean>({ default: false })
@@ -27,49 +15,46 @@ function confirm() {
 function cancel() {
   isOpen.value = false
 }
-
-if (props.deleteFromDom) {
-  handleElementPosition('insufficient-funds')
-}
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    name="insufficient-funds"
+    width="424px"
   >
-    <div class="flex flex-col gap-5">
-      <p class="heading-02 text-center">
+    <div class="flex flex-col gap-4 px-6 py-4">
+      <a-ill-empty-wallet class="self-center" />
+      <p class="text-center text-[18px] font-semibold">
         {{ t('modals.low_balance.title') }}
       </p>
-      <a-ill-empty-wallet class="self-center" />
-      <div class="m-[0_-32px] flex flex-col bg-green-500 py-1.5">
-        <p class="body-600 text-center  text-white ">
+      <p class="text-center">
+        {{ t('modals.low_balance.questions') }}
+      </p>
+      <div class="flex flex-col rounded-xl border border-blue-500 bg-blue-50 px-4 py-2 dark:border-blue-500 dark:bg-blue-950/40">
+        <p class="body-600 text-center text-blue-700 dark:text-blue-300">
           {{ t('modals.low_balance.current_balance') }}
         </p>
-        <p class="body-600 text-center text-xl text-white ">
+        <p class="body-600 text-center text-xl text-blue-700 dark:text-blue-300">
           {{ userInfo?.balance ? userInfo?.balance.toLocaleString('ru-RU') : 0 }}₸
         </p>
       </div>
-      <p class="text-center">
-        {{ t('modals.low_balance.questions') }}
-      </p>
     </div>
     <template #footer>
-      <div class="flex gap-2 ">
-        <a-button
+      <div class="flex gap-2">
+        <a-button-v2
           view="outline"
+          color="blue"
           block
           @click="cancel"
         >
           {{ t('modals.buttons.close') }}
-        </a-button>
-        <a-button block @click="confirm">
+        </a-button-v2>
+        <a-button-v2 block @click="confirm">
           {{ t('modals.buttons.topUp') }}
-        </a-button>
+        </a-button-v2>
       </div>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>
 
 <style scoped>

package/components/modals/LimitReachedModal.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 import { useUrls } from '#adata-ui/composables/useUrls'
 
 const { t } = useI18n()
@@ -16,11 +15,13 @@ function goTariffs() {
 <template>
   <a-modal v-model="isOpen" :title="t('modals.limit.title')">
     <div class="flex flex-col items-center gap-5 text-center text-sm">
-      <a-ill-empty-wallet></a-ill-empty-wallet>
+      <a-ill-empty-wallet />
       <div>{{ t('modals.limit.content') }}</div>
     </div>
     <template #footer>
-      <a-button @click="goTariffs" block>{{ t('modals.buttons.goTariffs') }}</a-button>
+      <a-button block @click="goTariffs">
+        {{ t('modals.buttons.goTariffs') }}
+      </a-button>
     </template>
   </a-modal>
 </template>

package/components/modals/NoAccessModal.vue

@@ -5,33 +5,31 @@ const { t } = useI18n()
 
 const isOpen = useNoAccessModal()
 
-const onClose = () => {
+function onClose() {
   isOpen.value = false
 }
 </script>
 
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
-    name="no-access-modal"
+    width="424px"
   >
-    <div class="flex flex-col gap-5">
-      <p class="heading-02 text-center">
-        {{ t('modals.no_access.title') }}
-      </p>
-      <a-ill-door class="w-full" />
+    <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
+      <a-ill-door />
       <p class="body-400 whitespace-pre-wrap text-center">
         {{ t('modals.no_access.info') }}
       </p>
     </div>
     <template #footer>
-      <a-button
+      <a-button-v2
         view="outline"
+        color="blue"
         block
         @click="onClose"
       >
         {{ t('modals.buttons.close') }}
-      </a-button>
+      </a-button-v2>
     </template>
-  </a-modal>
+  </a-modal-v2>
 </template>

package/components/modals/PaymentMethodModal.vue

@@ -66,7 +66,7 @@ if (props.deleteFromDom) {
         :name="`${item.name}`"
         side="right"
         :value="item.id"
-        class="flex items-center justify-between	gap-2 bg-gray-50 p-[10px_16px] rounded-md dark:bg-[#393D40]"
+        class="flex items-center justify-between	gap-2 rounded-md bg-gray-50 p-[10px_16px] dark:bg-[#393D40]"
       >
         <div class="flex w-full items-center gap-2">
           <component :is="item.img" />

package/components/modals/ReportBugConfirmModal.vue

@@ -3,28 +3,30 @@ const { t } = useI18n()
 
 const isOpen = defineModel<boolean>({ required: true })
 </script>
+
 <template>
-  <a-modal
+  <a-modal-v2
     v-model="isOpen"
     width="424px"
   >
-    <template #header>
+    <div class="flex flex-col items-center justify-center gap-4 px-6 py-4">
+      <a-ill-ok />
       <p class="heading-02 text-center font-bold">
         {{ t('modals.report_bug.confirmed') }}
       </p>
-    </template>
-    <div class="flex flex-col gap-5 items-center">
-      <a-ill-ok />
-      <p class="text-sm text-center">
+      <p class="body-400 text-center">
         {{ t('modals.report_bug.gratitude') }}
       </p>
-      <a-button
+    </div>
+    <template #footer>
+      <a-button-v2
         view="outline"
+        color="blue"
         block
         @click="isOpen = false"
       >
         {{ t('actions.close') }}
-      </a-button>
-    </div>
-  </a-modal>
+      </a-button-v2>
+    </template>
+  </a-modal-v2>
 </template>