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

package/.claude/settings.local.json

@@ -0,0 +1,19 @@
+{
+  "permissions": {
+    "allow": [
+      "PowerShell(npm view *)",
+      "PowerShell(git rm *)",
+      "PowerShell(npx --yes @tailwindcss/upgrade@latest --force)",
+      "PowerShell(Out-File *)",
+      "PowerShell(pnpm install *)",
+      "PowerShell(Get-ChildItem node_modules\\\\eslint-plugin-tailwindcss\\\\lib\\\\rules | Select-Object -ExpandProperty Name; node -e \"const p=require\\('eslint-plugin-tailwindcss'\\); console.log\\(Object.keys\\(p.rules\\).join\\('\\\\n'\\)\\); console.log\\('CONFIGS:', Object.keys\\(p.configs\\).join\\(','\\)\\)\")",
+      "PowerShell(node -e \"const p=require\\('eslint-plugin-tailwindcss'\\); console.log\\(JSON.stringify\\(p.configs.recommended, \\(k,v\\)=> typeof v==='object'&&v!==null&&k==='plugins'?Object.keys\\(v\\):v, 2\\).substring\\(0,800\\)\\)\"; Select-String -Path node_modules\\\\eslint-plugin-tailwindcss\\\\README.md -Pattern 'entryPoint|settings' | Select-Object -First 10 | ForEach-Object Line)",
+      "PowerShell(Select-String -Path node_modules\\\\eslint-plugin-tailwindcss\\\\README.md -Pattern 'cssConfigPath|vue|\\\\.vue' -Context 2,4 | Select-Object -First 12 | ForEach-Object {$_.Context.PreContext + $_.Line + $_.Context.PostContext} | ForEach-Object {$_})",
+      "PowerShell(pnpm build *)",
+      "PowerShell($c = Get-Content .playground\\\\.output\\\\server\\\\chunks\\\\build\\\\entry-styles.B6sbRG45.mjs -Raw; foreach \\($m in '--color-deepblue-900','bg-gr-blue','heading-01','hover\\\\:bg-purple-900\\\\/20','a-container','--font-sans','outline-hidden','scrollbar-gutter'\\) { \"$m => $\\($c.Contains\\($m\\)\\)\" })",
+      "PowerShell(pnpm eslint *)",
+      "PowerShell(pnpm *)",
+      "PowerShell(Get-Content C:\\\\adata\\\\adata-ui\\\\app.vue; \"=== -error.vue \\(first 100\\) ===\"; Get-Content C:\\\\adata\\\\adata-ui\\\\-error.vue -TotalCount 100; \"=== .playground/app.vue ===\"; Get-Content C:\\\\adata\\\\adata-ui\\\\.playground\\\\app.vue -TotalCount 60)"
+    ]
+  }
+}

package/components/features/payment/process/PaymentKaspiQrSidePanel.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { toCanvas } from 'qrcode'
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
+import { toCanvas } from 'qrcode'
 
 const props = defineProps<{
   requestUrl: string
@@ -9,7 +9,7 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: 'back', type: 'kaspi'): void
-  (e:  'updateUserRate'): void
+  (e: 'updateUserRate'): void
 }>()
 
 const isOpen = defineModel({ default: false })
@@ -74,11 +74,10 @@ watch(isOpen, async (value) => {
       margin: 0,
       color: {
         dark: colorMode.value === 'dark' ? '#FFFFFF' : '#000000', // квадраты
-        light: colorMode.value === 'dark' ? '#000000' : '#FFFFFF' // фон
-      }
+        light: colorMode.value === 'dark' ? '#000000' : '#FFFFFF', // фон
+      },
     },
     (error) => {
-
       if (error) {
         console.error(error)
         return
@@ -99,7 +98,8 @@ watch(isOpen, async (value) => {
 
         ctx.drawImage(logo, x, y, size, size)
       }
-    })
+    },
+  )
 
   intervalId = setInterval(() => {
     if (paymentSuccess.value && intervalId) {
@@ -110,7 +110,6 @@ watch(isOpen, async (value) => {
     checkPayment()
   }, 1000)
 })
-
 </script>
 
 <template>
@@ -120,42 +119,59 @@ watch(isOpen, async (value) => {
   >
     <template #header>
       <div class="flex items-center gap-2">
-        <button @click="onBack">
+        <button
+          type="button"
+          class="rounded-lg p-1 transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.06]"
+          @click="onBack"
+        >
           <a-icon-chevron-left class="size-6" />
         </button>
-        <p class="text-xl font-semibold">
+        <p class="text-xl font-semibold text-deepblue-900 dark:text-gray-100">
           {{ t('payment.kaspi.title') }}
         </p>
       </div>
     </template>
 
     <div class="flex flex-col gap-6">
-      <div class="flex flex-col items-center text-center text-black dark:text-white">
-        <p class="mb-4 font-semibold text-sm">
-          {{ t('payment.kaspi.description') }}
-        </p>
-
-        <div class="flex gap-3 items-center">
-          <a-icon-kaspi-qr class="size-16" />
-          <span class="font-bold text-[44px]">
-          {{ t('payment.kaspi.qr') }}
+      <p class="text-center text-sm font-medium text-gray-600 dark:text-gray-300">
+        {{ t('payment.kaspi.description') }}
+      </p>
+
+      <div class="flex flex-col items-center gap-5 rounded-2xl border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-900">
+        <div class="flex items-center gap-3">
+          <a-icon-kaspi-qr class="size-14" />
+          <span class="text-[40px] font-bold leading-none text-deepblue-900 dark:text-white">
+            {{ t('payment.kaspi.qr') }}
           </span>
         </div>
 
-        <p class="mt-5 font-bold text-2xl">{{ t('payment.kaspi.scan') }}</p>
+        <p class="text-center text-xl font-bold text-deepblue-900 dark:text-white">
+          {{ t('payment.kaspi.scan') }}
+        </p>
 
-        <canvas class="mt-5" id="kaspiQr"></canvas>
+        <canvas
+          id="kaspiQr"
+          class="rounded-lg"
+        />
 
-        <p class="mt-10 text-lg">{{ t('payment.kaspi.adata') }}</p>
+        <p class="text-center text-base text-gray-600 dark:text-gray-300">
+          {{ t('payment.kaspi.adata') }}
+        </p>
       </div>
+    </div>
 
-      <a-button @click="onBack" view="outline">
+    <template #footer>
+      <a-button-v2
+        view="outline"
+        color="gray"
+        size="lg"
+        block
+        @click="onBack"
+      >
         {{ t('payment.kaspi.changeMethod') }}
-      </a-button>
-    </div>
+      </a-button-v2>
+    </template>
   </a-side-panel>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/components/features/payment/process/PaymentKaspiRedirectSidePanel.vue

@@ -2,12 +2,12 @@
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 
 const props = defineProps<{
-    requestId: number
+  requestId: number
 }>()
 
 const emit = defineEmits<{
   (e: 'back', type: 'kaspi'): void
-  (e:  'updateUserRate'): void
+  (e: 'updateUserRate'): void
 }>()
 
 const isOpen = defineModel({ default: false })
@@ -78,35 +78,46 @@ watch(isOpen, async (value) => {
     v-model="isOpen"
     width="484px"
   >
-    <div class="flex flex-col gap-5">
-      <p class="text-center text-2xl font-bold whitespace-pre-wrap">
+    <div class="flex flex-col gap-6">
+      <p class="whitespace-pre-wrap text-center text-xl font-bold text-deepblue-900 dark:text-gray-100">
         {{ t('payment.redirect.title') }}
       </p>
-      <a-button block @click="goKaspi">
-        {{ t('payment.redirect.goKaspi') }}
-      </a-button>
-      <div class="flex flex-col gap-2">
-        <p class="text-center text-sm">
+
+      <div class="flex flex-col items-center gap-1 rounded-2xl bg-gray-50 p-5 text-center dark:bg-white/[0.03]">
+        <span class="text-xs text-gray-500 dark:text-gray-400">
           {{ t('payment.redirect.paymentId') }}
-        </p>
-        <p class="text-center text-xl	font-semibold">
+        </span>
+        <span class="text-2xl font-bold text-deepblue-900 dark:text-gray-100">
           {{ requestId }}
-        </p>
+        </span>
       </div>
-      <p class="text-center text-sm">
+
+      <p class="text-center text-sm text-gray-600 dark:text-gray-300">
         {{ t('payment.redirect.description') }}
       </p>
-      <a-button
-        view="outline"
-        block
-        @click="onBack"
-      >
-        {{ t('payment.redirect.changeMethod') }}
-      </a-button>
     </div>
+
+    <template #footer>
+      <div class="flex flex-col gap-2">
+        <a-button-v2
+          size="lg"
+          block
+          @click="goKaspi"
+        >
+          {{ t('payment.redirect.goKaspi') }}
+        </a-button-v2>
+        <a-button-v2
+          view="outline"
+          color="gray"
+          size="lg"
+          block
+          @click="onBack"
+        >
+          {{ t('payment.redirect.changeMethod') }}
+        </a-button-v2>
+      </div>
+    </template>
   </a-side-panel>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/components/features/payment/process/PaymentMethodSidePanel.vue

@@ -16,24 +16,16 @@ const isOpen = defineModel({ default: false })
 
 const { t } = useI18n()
 
-const checkbox = ref<IBank>('kaspi')
+const selected = ref<IBank>('kaspi')
 const cards = [
-  {
-    id: 'kaspi',
-    name: 'payment.method.kaspi',
-    sum: 10000,
-    img: AIconPaymentKaspi,
-  },
-  {
-    id: 'other',
-    name: 'payment.method.other',
-    sum: 10000,
-    img: AIconPaymentCard,
-  },
-]
+  { id: 'kaspi', name: 'payment.method.kaspi', img: AIconPaymentKaspi },
+  { id: 'other', name: 'payment.method.other', img: AIconPaymentCard },
+] as const
+
+const formattedSum = computed(() => Math.round(props.sum).toLocaleString('ru-RU'))
 
 function confirm() {
-  emit('nextBank', checkbox.value, props.sum)
+  emit('nextBank', selected.value, props.sum)
 }
 
 function cancel() {
@@ -52,70 +44,90 @@ function onBack() {
   >
     <template #header>
       <div class="flex items-center gap-2">
-        <button @click="onBack">
+        <button
+          type="button"
+          class="rounded-lg p-1 transition-colors hover:bg-gray-100 dark:hover:bg-white/[0.06]"
+          @click="onBack"
+        >
           <a-icon-chevron-left class="size-6" />
         </button>
-        <p class="text-xl font-semibold">
+        <p class="text-xl font-semibold text-deepblue-900 dark:text-gray-100">
           {{ t('payment.method.title') }}
         </p>
       </div>
     </template>
 
     <div class="flex flex-col gap-6">
-      <div class="flex flex-col items-center gap-4">
+      <div class="flex flex-col items-center gap-4 rounded-2xl bg-gray-50 p-6 text-center dark:bg-white/[0.03]">
         <a-ill-phone-check class="size-[120px]" />
-        <p class="text-center text-sm font-semibold">
+        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">
           {{ t('payment.method.description') }}
         </p>
       </div>
 
-      <div class="font-semibold">
-        {{ t('payment.method.note') }}
-      </div>
-
       <div class="flex flex-col gap-2">
-        <a-radio-button
-          v-for="(item) in cards"
+        <p class="text-sm font-semibold text-deepblue-900 dark:text-gray-100">
+          {{ t('payment.method.note') }}
+        </p>
+
+        <button
+          v-for="item in cards"
           :key="item.id"
-          v-model="checkbox"
-          :name="`${item.name}`"
-          side="right"
-          size="lg"
-          :value="item.id"
-          class="flex items-center justify-between gap-2 rounded-md bg-gray-50 p-[10px_16px] dark:bg-[#393D40]"
+          type="button"
+          class="flex items-center gap-3 rounded-2xl border p-4 text-left transition-colors"
+          :class="selected === item.id
+            ? 'border-blue-500 bg-blue-50/60 dark:border-blue-400 dark:bg-blue-950/30'
+            : 'border-gray-200 bg-white hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:hover:bg-gray-800'"
+          @click="selected = item.id"
         >
-          <div class="flex w-full items-center gap-2">
-            <component :is="item.img" />
-            <div class="flex w-full items-center justify-between">
+          <component
+            :is="item.img"
+            class="h-7 w-auto shrink-0"
+          />
+          <div class="flex min-w-0 flex-1 items-center justify-between gap-2">
+            <span class="text-sm font-semibold text-deepblue-900 dark:text-gray-100">
               {{ t(item.name) }}
-              <p class="body-600">
-                {{ Math.round(sum).toLocaleString('RU-ru') }} ₸
-              </p>
-            </div>
+            </span>
+            <span class="text-sm font-semibold text-gray-600 dark:text-gray-300">
+              {{ formattedSum }} ₸
+            </span>
           </div>
-        </a-radio-button>
+          <span
+            class="flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors"
+            :class="selected === item.id
+              ? 'border-blue-600 dark:border-blue-400'
+              : 'border-gray-300 dark:border-gray-600'"
+          >
+            <span
+              v-if="selected === item.id"
+              class="size-2.5 rounded-full bg-blue-600 dark:bg-blue-400"
+            />
+          </span>
+        </button>
       </div>
+    </div>
 
-      <div class="flex flex-col gap-2 ">
-        <a-button
-          :disabled="!checkbox"
+    <template #footer>
+      <div class="flex flex-col gap-2">
+        <a-button-v2
+          size="lg"
           block
           @click="confirm"
         >
           {{ t('actions.topUp') }}
-        </a-button>
-        <a-button
+        </a-button-v2>
+        <a-button-v2
           view="outline"
+          color="gray"
+          size="lg"
           block
           @click="cancel"
         >
           {{ t('actions.close') }}
-        </a-button>
+        </a-button-v2>
       </div>
-    </div>
+    </template>
   </a-side-panel>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

package/components/features/payment/process/PaymentProcess.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import PaymentTopUpSidePanel from '#adata-ui/components/features/payment/process/PaymentTopUpSidePanel.vue'
-import PaymentMethodSidePanel from '#adata-ui/components/features/payment/process/PaymentMethodSidePanel.vue'
 import PaymentKaspiQrSidePanel from '#adata-ui/components/features/payment/process/PaymentKaspiQrSidePanel.vue'
 import PaymentKaspiRedirectSidePanel from '#adata-ui/components/features/payment/process/PaymentKaspiRedirectSidePanel.vue'
+import PaymentMethodSidePanel from '#adata-ui/components/features/payment/process/PaymentMethodSidePanel.vue'
+import PaymentTopUpSidePanel from '#adata-ui/components/features/payment/process/PaymentTopUpSidePanel.vue'
 import { removeTrailingSlash } from '#adata-ui/components/utils/removeTrailingSlash'
 
 const { $toast } = useNuxtApp()
@@ -16,7 +16,7 @@ const {
   methodSidePanel,
   kaspiQRSidePanel,
   kaspiRedirectSidePanel,
-  payByCard
+  payByCard,
 } = usePayment()
 
 const userApiURL = commonAuth.userApiURL
@@ -132,23 +132,23 @@ async function updateUserRate() {
 
   <payment-method-side-panel
     v-model="methodSidePanel"
-    @back="onBack"
     :sum="paymentSum"
+    @back="onBack"
     @next-bank="directionsBanks"
   />
 
   <payment-kaspi-qr-side-panel
     v-model="kaspiQRSidePanel"
-    @back="onBack"
     :request-url="requestUrl"
     :request-id="requestId as number"
+    @back="onBack"
     @update-user-rate="updateUserRate"
   />
 
   <payment-kaspi-redirect-side-panel
     v-model="kaspiRedirectSidePanel"
-    @back="onBack"
     :request-id="requestId as number"
+    @back="onBack"
     @update-user-rate="updateUserRate"
   />
 </template>

package/components/features/payment/process/PaymentTopUpSidePanel.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import ASidePanel from "#adata-ui/components/overlays/side-panel/ASidePanel.vue";
-
 const emit = defineEmits<{
   (e: 'next', sum: number): void
 }>()
@@ -9,35 +7,18 @@ const isOpen = defineModel({ default: false })
 
 const { t } = useI18n()
 
-const money = ref(0)
+const money = ref<number | string>(0)
 const errorAlert = ref(false)
 
-const sumArr = ref([
-  {
-    id: 1,
-    value: 2000,
-    label: '2 000 ₸',
-  },
-  {
-    id: 2,
-    value: 5000,
-    label: '5 000 ₸',
-  },
-  {
-    id: 3,
-    value: 10000,
-    label: '10 000 ₸',
-  },
-  {
-    id: 4,
-    value: 20000,
-    label: '20 000 ₸',
-  },
-])
+const sumArr = [
+  { id: 1, value: 2000, label: '2 000 ₸' },
+  { id: 2, value: 5000, label: '5 000 ₸' },
+  { id: 3, value: 10000, label: '10 000 ₸' },
+  { id: 4, value: 20000, label: '20 000 ₸' },
+]
 
-const filterMoney = computed(() => {
-  return money.value >= 1
-})
+const amount = computed(() => Number(money.value) || 0)
+const filterMoney = computed(() => amount.value >= 1)
 
 function onSelectAmount(value: number) {
   money.value = value
@@ -50,10 +31,11 @@ function onClose() {
 }
 
 function handlePayment() {
-  if (money.value <= 1000000) {
-    emit('next', money.value)
+  if (amount.value <= 1000000) {
+    emit('next', amount.value)
     errorAlert.value = false
-  } else {
+  }
+  else {
     errorAlert.value = true
   }
 }
@@ -65,69 +47,68 @@ function handlePayment() {
     width="484px"
   >
     <template #header>
-      <div class="text-xl font-semibold">
+      <div class="text-xl font-semibold text-deepblue-900 dark:text-gray-100">
         {{ t('payment.topUp.title') }}
       </div>
     </template>
 
     <div class="flex flex-col gap-6">
-      <div class="flex flex-col items-center gap-4 ">
+      <div class="flex flex-col items-center gap-4 rounded-2xl bg-gray-50 p-6 text-center dark:bg-white/[0.03]">
         <a-ill-bill class="size-[120px]" />
-        <p class="text-center text-sm font-semibold">
+        <p class="text-sm font-medium text-gray-600 dark:text-gray-300">
           {{ t('payment.topUp.info') }}
         </p>
       </div>
 
-      <div class="flex flex-col gap-4">
-        <a-input-standard
+      <div class="flex flex-col gap-3">
+        <a-input-v2
           v-model="money"
-          :label="`${t('payment.topUp.enterAmount')}`"
+          :label="t('payment.topUp.enterAmount')"
           type="number"
-          pattern="[0-9]*"
+          size="md"
           clearable
+          :error="errorAlert ? t('modals.replenish_modal.error') : undefined"
         />
-        <a-alert
-          v-if="errorAlert"
-          color="red"
-        >
-          {{ t('modals.replenish_modal.error') }}
-        </a-alert>
-        <div class="flex gap-4">
-          <a-chips
+
+        <div class="grid grid-cols-2 gap-2 sm:grid-cols-4">
+          <button
             v-for="item in sumArr"
             :key="item.id"
-            view="standard"
-            size="lg"
-            :class="[
-              money === item.value
-                ? 'bg-blue-700 text-white hover:bg-blue-700 dark:border-blue-500 dark:bg-transparent dark:text-blue-500 dark:hover:bg-transparent'
-                : '',
-            ]"
+            type="button"
+            class="rounded-xl border px-3 py-2.5 text-sm font-semibold transition-colors"
+            :class="amount === item.value
+              ? 'border-blue-500 bg-blue-50 text-blue-700 dark:border-blue-400 dark:bg-blue-950/40 dark:text-blue-300'
+              : 'border-gray-200 bg-white text-deepblue-900 hover:border-gray-300 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800'"
             @click.stop="onSelectAmount(item.value)"
           >
-            <span>{{ item.label }}</span>
-          </a-chips>
+            {{ item.label }}
+          </button>
         </div>
       </div>
+    </div>
 
+    <template #footer>
       <div class="flex flex-col gap-2">
-        <a-button
+        <a-button-v2
+          size="lg"
+          block
           :disabled="!filterMoney"
           @click="handlePayment"
         >
           {{ t('actions.topUp') }}
-        </a-button>
-        <a-button
+        </a-button-v2>
+        <a-button-v2
           view="outline"
+          color="gray"
+          size="lg"
+          block
           @click="onClose"
         >
           {{ t('actions.back') }}
-        </a-button>
+        </a-button-v2>
       </div>
-    </div>
+    </template>
   </a-side-panel>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

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/navigation/bottom-navigation/ABottomNavigation.vue

@@ -56,7 +56,7 @@ const profile: string = 'modals.mobile_navigation.type_profile'
 </script>
 
 <template>
-  <header class="w-full border-t border-[#9DA3AC80] bg-white dark:bg-gray-900">
+  <header class="mx-3 mb-3 overflow-hidden rounded-full border border-deepblue-900/10 bg-gray-50/20 shadow-lg backdrop-blur-lg dark:border-gray-200/10 dark:bg-gray-900/30">
     <div class="grid w-full grid-cols-3 justify-items-center">
       <slot>
         <button

package/components/navigation/header/AHeader.vue

@@ -46,7 +46,7 @@ interface Props {
   oldVersion?: string
 }
 
-const { locale } = useI18n()
+const { locale, t } = useI18n()
 
 useCurrentModule().value = props.module
 const { myLayer }: any = useAppConfig()
@@ -119,19 +119,15 @@ onMounted(() => {
         >
           <div
             v-if="mobileHeaderType === 'default'"
-            class="flex justify-center"
+            class="text-deepblue dark:text-[#E3E5E8]"
+            @click="goToAnotherModule"
           >
-            <div
-              class="text-deepblue dark:text-[#E3E5E8]"
-              @click="goToAnotherModule"
-            >
-              <span class="visually-hidden"> Сервисы Adata.kz</span>
+            <span class="visually-hidden"> Сервисы Adata.kz</span>
 
-              <adata-logo
-                :font-controlled="false"
-                filled
-              />
-            </div>
+            <adata-logo
+              :font-controlled="false"
+              filled
+            />
           </div>
           <div
             v-else-if="mobileHeaderType === 'search'"
@@ -142,18 +138,18 @@ onMounted(() => {
               @click="goToAnotherModule"
             />
             <button
-              class="flex w-full items-center gap-2 rounded-lg border border-gray-200 bg-white px-4 py-1.5 shadow-sm dark:border-gray-700 dark:bg-gray-900 dark:text-gray-400"
+              class="flex w-full items-center gap-2 rounded-full border border-gray-300/50 bg-white/30 px-4 py-1.5 backdrop-blur-sm dark:border-gray-600/50 dark:bg-white/5 dark:text-gray-300"
               @click="$emit('search')"
             >
               <a-icon-search class="text-gray-400 dark:text-gray-500" />
-              <span class="body-400 text-gray-500 dark:text-gray-400">Найти</span>
+              <span class="body-400 text-gray-500 dark:text-gray-400">{{ t('header.search') }}</span>
             </button>
           </div>
         </section>
-        <div class="lg:hidden">
+        <div class="flex items-center gap-1 lg:hidden">
+          <a-color-mode />
           <lang-switcher
             v-if="langIsOn || module === 'fea'"
-            class="lg:hidden"
             is-mobile
           />
         </div>

package/components/navigation/header/ProductMenu.vue

@@ -2,10 +2,10 @@
 import NavList from '#adata-ui/components/navigation/header/NavList.vue'
 import { useActiveNavigation } from '#adata-ui/composables/useActiveNavigation'
 import { useHeaderNavigationLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
-import { PAGES } from '#adata-ui/shared/constans/pages'
 import { useUrls } from '#adata-ui/composables/useUrls'
 import AIconArrowRight from '#adata-ui/icons/arrow/arrow-right.vue'
 import AIconDownloadRounded from '#adata-ui/icons/download-rounded.vue'
+import { PAGES } from '#adata-ui/shared/constans/pages'
 
 defineProps<{ url?: string }>()
 defineEmits(['outerClick', 'mouseOver'])
@@ -38,7 +38,7 @@ function handleExportClick() {
     <div class="relative bg-white dark:bg-gray-950">
       <div class="a-container max-h-[calc(100dvh-4rem)] overflow-y-auto overscroll-contain py-8">
         <div class="flex justify-between gap-5">
-          <div class="grid min-w-0 flex-1 grid-cols-5 gap-x-3 gap-y-3">
+          <div class="grid min-w-0 flex-1 grid-cols-5 gap-3">
             <div
               v-for="(column, index) in catalogColumns"
               :key="index"
@@ -62,10 +62,10 @@ function handleExportClick() {
                   v-if="module.key === 'edo'"
                   #bottom
                 >
-                  <div class="mt-4 flex flex-col gap-4 rounded-xl bg-blue-700 dark:bg-blue-500 p-4 text-white normal-case">
+                  <div class="mt-4 flex flex-col gap-4 rounded-xl bg-blue-700 p-4 normal-case text-white dark:bg-blue-500">
                     <div class="flex items-center gap-3">
-                      <span class="p-[10px] bg-white rounded-[10px] dark:bg-gray-950">
-                        <AIconDownloadRounded class="size-5 text-blue-700 dark:text-blue-500" />
+                      <span class="rounded-[10px] bg-white p-[10px] dark:bg-gray-950">
+                        <a-icon-download-rounded class="size-5 text-blue-700 dark:text-blue-500" />
                       </span>
                       <span class="font-semibold text-white dark:text-gray-950">
                         {{ t('header.products.exportCard.title') }}
@@ -78,14 +78,14 @@ function handleExportClick() {
 
                     <a-button-v2
                       view="soft"
-                      class="!h-9 w-fit !bg-white dark:!bg-gray-950 text-blue-700 dark:text-blue-500"
+                      class="!h-9 w-fit !bg-white text-blue-700 dark:!bg-gray-950 dark:text-blue-500"
                       size="sm"
                       :icon="AIconArrowRight"
                       icon-right
                       @click="handleExportClick"
                     >
                       <span class="text-sm">
-                      {{ t('header.products.exportCard.receive') }}
+                        {{ t('header.products.exportCard.receive') }}
                       </span>
                     </a-button-v2>
                   </div>

package/components/navigation/pill-tabs/APillTabsV2.vue

@@ -18,15 +18,19 @@ const props = withDefaults(defineProps<{
   block?: boolean
   disabled?: boolean
   size?: 'sm' | 'md'
+  scrollIntoView?: boolean
 }>(), {
   showCount: false,
   block: false,
   disabled: false,
   size: 'sm',
+  scrollIntoView: false,
 })
 
 const emit = defineEmits<{ (e: 'update:modelValue', value: string): void }>()
 
+const listRef = ref<HTMLElement | null>(null)
+
 const SIZE_CLASS: Record<'sm' | 'md', string> = {
   sm: 'text-xs',
   md: 'text-sm',
@@ -55,6 +59,17 @@ function select(option: PillTab) {
   if (isDisabled(option)) return
   emit('update:modelValue', option.key)
 }
+
+function scrollActiveIntoView() {
+  if (!props.scrollIntoView) return
+  nextTick(() => {
+    const active = listRef.value?.querySelector<HTMLElement>('[aria-selected="true"]')
+    active?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
+  })
+}
+
+watch(() => props.modelValue, scrollActiveIntoView)
+onMounted(scrollActiveIntoView)
 </script>
 
 <template>
@@ -67,6 +82,7 @@ function select(option: PillTab) {
     :aria-disabled="disabled || undefined"
   >
     <div
+      ref="listRef"
       role="tablist"
       :aria-label="ariaLabel"
       class="pill-tabs-v2__list flex w-full flex-nowrap items-center gap-1 overflow-x-auto"
@@ -86,7 +102,7 @@ function select(option: PillTab) {
           isDisabled(option)
             ? 'cursor-not-allowed text-gray-300 dark:text-gray-600'
             : modelValue === option.key
-              ? 'text-deepblue-900 bg-white shadow-sm dark:bg-gray-700 dark:text-gray-100 dark:shadow-none dark:ring-1 dark:ring-inset dark:ring-white/10'
+              ? 'bg-white text-deepblue-900 shadow-sm dark:bg-gray-700 dark:text-gray-100 dark:shadow-none dark:ring-1 dark:ring-inset dark:ring-white/10'
               : 'text-gray-700 hover:bg-white/70 hover:text-gray-900 dark:text-gray-200 dark:hover:bg-white/[0.06] dark:hover:text-gray-100',
           block ? 'flex-1 basis-0 justify-center' : 'shrink-0',
         ]"

package/components/overlays/modal/AModalV2.vue

@@ -14,6 +14,7 @@ const props = withDefaults(defineProps<{
   transition?: boolean
   contentClass?: string
   hideHeader?: boolean
+  hideClose?: boolean
   blur?: boolean | 'sm' | 'md' | 'lg' | 'xl'
   mobileSheet?: boolean
   swipeToClose?: boolean
@@ -27,6 +28,7 @@ const props = withDefaults(defineProps<{
   persistent: false,
   transition: true,
   hideHeader: false,
+  hideClose: false,
   blur: false,
   mobileSheet: true,
   swipeToClose: true,
@@ -311,6 +313,7 @@ function onTouchEnd() {
                   </h2>
                 </slot>
                 <button
+                  v-if="!hideClose"
                   type="button"
                   class="ml-auto rounded-md p-1 transition hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-200"
                   @click="closeIfAllowed"

package/lang/en.ts

@@ -380,6 +380,7 @@ const EnLocale: RuLocale = {
       toContacts: 'Go to Contacts page',
     },
     login: 'Login',
+    search: 'Search',
     oldVersion: 'Old version of the site',
     notifications: {
       title: 'Notifications',

package/lang/kk.ts

@@ -381,6 +381,7 @@ const KkLocale: RuLocale = {
       toContacts: 'Байланыс бетіне өту',
     },
     login: 'Кіру',
+    search: 'Іздеу',
     oldVersion: 'Сайттың ескі нұсқасы',
     notifications: {
       title: 'Хабарландырулар',

package/lang/ru.ts

@@ -380,6 +380,7 @@ const RuLocale = {
       toContacts: 'На страницу Контакты',
     },
     login: 'Войти',
+    search: 'Найти',
     oldVersion: 'Старая версия сайта',
     notifications: {
       title: 'Уведомления',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "adata-ui",
   "type": "module",
-  "version": "2.1.40-beta.10",
+  "version": "2.1.40-beta.11",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",