adata-ui 2.1.40-beta.2 → 2.1.40-beta.20

package/components/navigation/header/ProfileMenu.vue

@@ -1,176 +1,167 @@
-<script setup lang="ts">
-import { useHeaderMenuLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
-import Calendar from '#adata-ui/icons/calendar.vue'
-import Gauge from '#adata-ui/icons/gauge.vue'
-import IconLogout from '#adata-ui/icons/logout.vue'
-import { useMediaQuery } from '@vueuse/core'
-
-const props = withDefaults(defineProps<Props>(), {
-  daysRemaining: 0,
-  limitRemaining: 0,
-})
-
-defineEmits(['logout'])
-
-const isLargeScreen = useMediaQuery('(min-width: 1024px)')
-
-interface Props {
-  rate: string
-  daysRemaining?: number
-  limitRemaining?: number
-  balance: number
-  email?: string
-  replenish?: string
-  oldVersion?: string
-}
-
-const formattedBalance = computed(() => props.balance.toLocaleString('ru-RU'))
-
-const { t } = useI18n()
-
-const items = useHeaderMenuLinks()
-
-const { topUpSidePanel, rateId } = usePayment()
-
-function onReplenish() {
-  rateId.value = ''
-  topUpSidePanel.value = true
-}
-</script>
-
-<template>
-  <div class="w-full overflow-hidden bg-white text-deepblue-900 dark:bg-gray-900 dark:text-gray-200 lg:w-[320px] lg:rounded-xl lg:border lg:border-gray-200 lg:dark:border-gray-800">
-    <!-- Subscription & balance card -->
-    <div class="p-2">
-      <div class="relative overflow-hidden rounded-xl bg-gradient-to-br from-blue-700/95 to-blue-500/85 p-3 text-white">
-        <!-- decorative glow for a "living" feel -->
-        <div class="pointer-events-none absolute -right-8 -top-10 size-28 rounded-full bg-white/20 blur-2xl" aria-hidden="true" />
-
-        <div class="relative">
-          <!-- Tariff -->
-          <p class="text-[11px] font-medium uppercase tracking-wide text-white/70">
-            {{ t('header.profile.tariff') }}
-          </p>
-          <div class="mt-0.5 flex items-center justify-between gap-2">
-            <p class="truncate text-lg font-bold leading-tight">
-              {{ rate }}
-            </p>
-            <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium text-white ring-1 ring-inset ring-white/20">
-              <span class="relative flex size-1.5 items-center justify-center">
-                <span class="absolute inline-flex size-full animate-ping rounded-full bg-green-400/80" />
-                <span class="relative inline-flex size-1.5 rounded-full bg-green-400" />
-              </span>
-              {{ t('header.profile.connected') }}
-            </span>
-          </div>
-
-          <!-- Email (mobile only — desktop shows it in the header trigger) -->
-          <p
-            v-if="email"
-            class="mt-1 truncate text-xs text-white/75 lg:hidden"
-            data-test-id="profile-menu-email"
-          >
-            {{ email }}
-          </p>
-
-          <div class="my-2 h-px bg-white/15" />
-
-          <!-- Balance -->
-          <div class="flex items-center justify-between gap-2">
-            <span class="text-xs text-white/80">{{ t('header.profile.currentBalance') }}</span>
-            <span class="text-base font-bold tabular-nums">{{ formattedBalance }} ₸</span>
-          </div>
-
-          <!-- Usage stats (mobile only — desktop shows them in the header bar) -->
-          <div class="mt-2 grid grid-cols-2 gap-2 lg:hidden">
-            <div class="flex items-center gap-2 rounded-lg px-2 py-1.5 ring-1 ring-inset ring-white/15">
-              <gauge class="size-4 shrink-0 text-white/80" />
-              <div class="min-w-0">
-                <p class="truncate text-[10px] uppercase leading-none text-white/70">
-                  {{ t('header.profile.requests') }}
-                </p>
-                <p class="mt-1 text-sm font-bold tabular-nums leading-none">
-                  {{ limitRemaining }}
-                </p>
-              </div>
-            </div>
-            <div class="flex items-center gap-2 rounded-lg px-2 py-1.5 ring-1 ring-inset ring-white/15">
-              <calendar class="size-4 shrink-0 text-white/80" />
-              <div class="min-w-0">
-                <p class="truncate text-[10px] uppercase leading-none text-white/70">
-                  {{ t('header.profile.daysLeft') }}
-                </p>
-                <p class="mt-1 text-sm font-bold tabular-nums leading-none">
-                  {{ daysRemaining }}
-                </p>
-              </div>
-            </div>
-          </div>
-
-          <!-- Top up -->
-          <button
-            type="button"
-            class="mt-2.5 inline-flex h-8 w-full cursor-pointer items-center justify-center gap-1.5 rounded-full bg-white px-3 text-sm font-semibold text-blue-700 shadow-sm transition-all duration-150 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-600 active:scale-[0.98]"
-            @click="onReplenish"
-          >
-            <a-icon-plus-circle class="size-4" />
-            <span class="bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent">
-              {{ t('header.profile.addBalance') }}
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Menu links -->
-    <nav class="flex flex-col px-2 pb-2">
-      <nuxt-link-locale
-        v-for="item in items"
-        :key="item.title"
-        class="group flex items-center gap-3 rounded-lg px-2.5 py-2 text-sm transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/60"
-        :to="item.to"
-        :data-test-id="item?.dataTestId"
-        target="_blank"
-      >
-<!--        <span-->
-<!--          class="flex size-8 shrink-0 items-center justify-center rounded-lg border border-blue-100 bg-blue-50 text-blue-700 dark:border-blue-900/40 dark:bg-blue-900/30 dark:text-blue-400"-->
-<!--        >-->
-<!--          <component-->
-<!--            :is="item.icon"-->
-<!--            class="size-4"-->
-<!--          />-->
-<!--        </span>-->
-        <span class="truncate text-deepblue-900 group-hover:text-blue-700 dark:text-gray-200 dark:group-hover:text-blue-400">
-          {{ item.title }}
-        </span>
-      </nuxt-link-locale>
-    </nav>
-
-    <!-- Footer: old version, theme (mobile), logout -->
-    <div class="border-t border-gray-100 p-2 dark:border-gray-800">
-      <a-change-version
-        v-if="oldVersion"
-        :url="oldVersion"
-        class="mb-2"
-      />
-
-      <div
-        v-if="!isLargeScreen"
-        class="flex items-center justify-between rounded-lg px-2.5 py-2 text-sm text-deepblue-900 dark:text-gray-200"
-      >
-        <span>{{ t('header.profile.colorScheme') }}</span>
-        <a-color-mode />
-      </div>
-
-      <button
-        type="button"
-        class="flex w-full cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2 text-sm font-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
-        data-test-id="logout-button"
-        @click="$emit('logout')"
-      >
-        <icon-logout class="size-4 shrink-0" />
-        <span>{{ t('header.profile.logout') }}</span>
-      </button>
-    </div>
-  </div>
-</template>
+<script setup lang="ts">
+import { useHeaderMenuLinks } from '#adata-ui/composables/useHeaderNavigationLinks'
+import Calendar from '#adata-ui/icons/calendar.vue'
+import Gauge from '#adata-ui/icons/gauge.vue'
+import IconLogout from '#adata-ui/icons/logout.vue'
+import { useMediaQuery } from '@vueuse/core'
+
+const props = withDefaults(defineProps<Props>(), {
+  daysRemaining: 0,
+  limitRemaining: 0,
+})
+
+defineEmits(['logout'])
+
+const isLargeScreen = useMediaQuery('(min-width: 1024px)')
+
+interface Props {
+  rate: string
+  daysRemaining?: number
+  limitRemaining?: number
+  balance: number
+  email?: string
+  replenish?: string
+  oldVersion?: string
+}
+
+const formattedBalance = computed(() => props.balance.toLocaleString('ru-RU'))
+
+const { t } = useI18n()
+
+const items = useHeaderMenuLinks()
+
+const { topUpSidePanel, rateId } = usePayment()
+
+function onReplenish() {
+  rateId.value = ''
+  topUpSidePanel.value = true
+}
+</script>
+
+<template>
+  <div class="w-full overflow-hidden bg-white text-deepblue-900 dark:bg-gray-900 dark:text-gray-200 lg:w-[320px] lg:rounded-lg lg:border lg:border-gray-200 lg:dark:border-gray-800">
+    <div class="p-2">
+      <div class="relative overflow-hidden rounded-lg bg-gradient-to-br from-blue-700/95 to-blue-500/85 p-3 text-white">
+        <div class="pointer-events-none absolute -right-8 -top-10 size-28 rounded-full bg-white/20 blur-2xl" aria-hidden="true" />
+
+        <div class="relative">
+          <p class="text-overline-medium uppercase text-white/70">
+            {{ t('header.profile.tariff') }}
+          </p>
+          <div class="mt-0.5 flex items-center justify-between gap-2">
+            <p class="truncate text-h4">
+              {{ rate }}
+            </p>
+            <span class="inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-0.5 text-body-sm-medium text-white ring-1 ring-inset ring-white/20">
+              <span class="relative flex size-1.5 items-center justify-center">
+                <span class="absolute inline-flex size-full animate-ping rounded-full bg-green-400/80" />
+                <span class="relative inline-flex size-1.5 rounded-full bg-green-400" />
+              </span>
+              {{ t('header.profile.connected') }}
+            </span>
+          </div>
+
+          <p
+            v-if="email"
+            class="mt-1 truncate text-body-sm text-white/75 lg:hidden"
+            data-test-id="profile-menu-email"
+          >
+            {{ email }}
+          </p>
+
+          <div class="my-2 h-px bg-white/15" />
+
+          <div class="flex items-center justify-between gap-2">
+            <span class="text-body-sm text-white/80">{{ t('header.profile.currentBalance') }}</span>
+            <span class="text-body-lg font-bold tabular-nums">{{ formattedBalance }} ₸</span>
+          </div>
+
+          <div class="mt-2 grid grid-cols-2 gap-2 lg:hidden">
+            <div class="flex items-center gap-2 rounded-md px-2 py-1.5 ring-1 ring-inset ring-white/15">
+              <gauge class="size-4 shrink-0 text-white/80" />
+              <div class="min-w-0">
+                <p class="truncate text-body-sm uppercase leading-none text-white/70">
+                  {{ t('header.profile.requests') }}
+                </p>
+                <p class="mt-1 text-body-md font-bold tabular-nums leading-none">
+                  {{ limitRemaining }}
+                </p>
+              </div>
+            </div>
+            <div class="flex items-center gap-2 rounded-md px-2 py-1.5 ring-1 ring-inset ring-white/15">
+              <calendar class="size-4 shrink-0 text-white/80" />
+              <div class="min-w-0">
+                <p class="truncate text-body-sm uppercase leading-none text-white/70">
+                  {{ t('header.profile.daysLeft') }}
+                </p>
+                <p class="mt-1 text-body-md font-bold tabular-nums leading-none">
+                  {{ daysRemaining }}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <button
+            type="button"
+            class="mt-2.5 inline-flex h-8 w-full cursor-pointer items-center justify-center gap-1.5 rounded-full bg-white px-3 text-body-md-strong text-blue-700 shadow-sm transition-all duration-150 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/70 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-600 active:scale-[0.98]"
+            @click="onReplenish"
+          >
+            <a-icon-plus-circle class="size-4" />
+            <span class="bg-gradient-to-r from-blue-700 to-blue-500 bg-clip-text text-transparent">
+              {{ t('header.profile.addBalance') }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <nav class="flex flex-col px-2 pb-2">
+      <nuxt-link-locale
+        v-for="item in items"
+        :key="item.title"
+        class="group flex items-center gap-3 rounded-md px-2.5 py-2 text-body-md transition-colors hover:bg-gray-50 dark:hover:bg-gray-800/60"
+        :to="item.to"
+        :data-test-id="item?.dataTestId"
+        target="_blank"
+      >
+        <!--        <span -->
+        <!--          class="flex size-8 shrink-0 items-center justify-center rounded-md border border-blue-100 bg-blue-50 text-blue-700 dark:border-blue-900/40 dark:bg-blue-900/30 dark:text-blue-400" -->
+        <!--        > -->
+        <!--          <component -->
+        <!--            :is="item.icon" -->
+        <!--            class="size-4" -->
+        <!--          /> -->
+        <!--        </span> -->
+        <span class="truncate text-deepblue-900 group-hover:text-blue-700 dark:text-gray-200 dark:group-hover:text-blue-400">
+          {{ item.title }}
+        </span>
+      </nuxt-link-locale>
+    </nav>
+
+    <div class="border-t border-gray-100 p-2 dark:border-gray-800">
+      <a-change-version
+        v-if="oldVersion"
+        :url="oldVersion"
+        class="mb-2"
+      />
+
+      <div
+        v-if="!isLargeScreen"
+        class="flex items-center justify-between rounded-md px-2.5 py-2 text-body-md text-deepblue-900 dark:text-gray-200"
+      >
+        <span>{{ t('header.profile.colorScheme') }}</span>
+        <a-color-mode />
+      </div>
+
+      <button
+        type="button"
+        class="flex w-full cursor-pointer items-center gap-3 rounded-md px-2.5 py-2 text-body-md-medium text-red-600 transition-colors hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20"
+        data-test-id="logout-button"
+        @click="$emit('logout')"
+      >
+        <icon-logout class="size-4 shrink-0" />
+        <span>{{ t('header.profile.logout') }}</span>
+      </button>
+    </div>
+  </div>
+</template>

package/components/navigation/header/SystemNotification.vue

@@ -1,110 +1,108 @@
-<script setup lang="ts">
-import { useCurrentModule } from '#adata-ui/composables/projectState'
-
-defineOptions({ name: 'SystemNotification' })
-
-interface SystemMessageDetail {
-  message: string
-  message_en: string
-  message_kz: string
-}
-
-const { locale } = useI18n()
-const { myLayer } = useAppConfig()
-const env = myLayer.mode
-
-const currentModule = useCurrentModule()
-const message = useCookie('message')
-
-const systemMessage = ref<string | null>(null)
-const isOpen = ref(false)
-
-// API expects the legacy "counterparty" code instead of "pk".
-const moduleName = computed(() => (currentModule.value === 'pk' ? 'counterparty' : currentModule.value))
-
-function localizedMessage(detail: SystemMessageDetail): string {
-  switch (locale.value) {
-    case 'en':
-      return detail.message_en
-    case 'kk':
-      return detail.message_kz
-    default:
-      return detail.message
-  }
-}
-
-async function fetchNotification() {
-  // The cookie is set once the user dismisses the banner — skip the request afterwards.
-  if (message.value !== undefined) return
-
-  try {
-    const res = await $fetch<{ data: { details?: SystemMessageDetail[] } }>(
-      `https://users.${env}.kz/api/v1/system-messages/active-list/`,
-      { query: { module_name: moduleName.value } },
-    )
-
-    const detail = res.data?.details?.[0]
-    if (detail) {
-      systemMessage.value = localizedMessage(detail)
-      isOpen.value = true
-    }
-  }
-  catch (e) {
-    console.error(e instanceof Error ? e.message : e)
-  }
-}
-
-function close() {
-  message.value = false
-  isOpen.value = false
-}
-
-onMounted(fetchNotification)
-</script>
-
-<template>
-  <client-only>
-    <transition name="system-notification">
-      <div
-        v-if="isOpen && systemMessage"
-        class="bg-[#FFF5E6] px-2 py-3 dark:bg-[#161617] md:px-0"
-      >
-        <div class="a-container flex items-center justify-between gap-4">
-          <div class="flex items-center gap-2">
-            <a-icon-info-circle
-              class="max-h-[16px] w-full max-w-[16px] shrink-0 stroke-orange-500"
-            />
-            <span class="text-sm font-semibold text-orange-500">{{ systemMessage }}</span>
-          </div>
-          <a-icon-x-mark
-            class="max-h-[16px] w-full max-w-[16px] shrink-0 cursor-pointer stroke-orange-500"
-            @click="close"
-          />
-        </div>
-      </div>
-    </transition>
-  </client-only>
-</template>
-
-<style scoped>
-.system-notification-enter-active,
-.system-notification-leave-active {
-  transition:
-    opacity 200ms ease,
-    transform 200ms ease;
-  overflow: hidden;
-}
-
-.system-notification-enter-from,
-.system-notification-leave-to {
-  opacity: 0;
-  transform: translateY(-100%);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .system-notification-enter-active,
-  .system-notification-leave-active {
-    transition: none;
-  }
-}
-</style>
+<script setup lang="ts">
+import { useCurrentModule } from '#adata-ui/composables/projectState'
+
+defineOptions({ name: 'SystemNotification' })
+
+interface SystemMessageDetail {
+  message: string
+  message_en: string
+  message_kz: string
+}
+
+const { locale } = useI18n()
+const { myLayer } = useAppConfig()
+const env = myLayer.mode
+
+const currentModule = useCurrentModule()
+const message = useCookie('message')
+
+const systemMessage = ref<string | null>(null)
+const isOpen = ref(false)
+
+const moduleName = computed(() => (currentModule.value === 'pk' ? 'counterparty' : currentModule.value))
+
+function localizedMessage(detail: SystemMessageDetail): string {
+  switch (locale.value) {
+    case 'en':
+      return detail.message_en
+    case 'kk':
+      return detail.message_kz
+    default:
+      return detail.message
+  }
+}
+
+async function fetchNotification() {
+  if (message.value !== undefined) return
+
+  try {
+    const res = await $fetch<{ data: { details?: SystemMessageDetail[] } }>(
+      `https://users.${env}.kz/api/v1/system-messages/active-list/`,
+      { query: { module_name: moduleName.value } },
+    )
+
+    const detail = res.data?.details?.[0]
+    if (detail) {
+      systemMessage.value = localizedMessage(detail)
+      isOpen.value = true
+    }
+  }
+  catch (e) {
+    console.error(e instanceof Error ? e.message : e)
+  }
+}
+
+function close() {
+  message.value = false
+  isOpen.value = false
+}
+
+onMounted(fetchNotification)
+</script>
+
+<template>
+  <client-only>
+    <transition name="system-notification">
+      <div
+        v-if="isOpen && systemMessage"
+        class="bg-[#FFF5E6] px-2 py-3 dark:bg-[#161617] md:px-0"
+      >
+        <div class="a-container flex items-center justify-between gap-4">
+          <div class="flex items-center gap-2">
+            <a-icon-info-circle
+              class="max-h-[16px] w-full max-w-[16px] shrink-0 stroke-orange-500"
+            />
+            <span class="text-body-md-strong text-orange-500">{{ systemMessage }}</span>
+          </div>
+          <a-icon-x-mark
+            class="max-h-[16px] w-full max-w-[16px] shrink-0 cursor-pointer stroke-orange-500"
+            @click="close"
+          />
+        </div>
+      </div>
+    </transition>
+  </client-only>
+</template>
+
+<style scoped>
+.system-notification-enter-active,
+.system-notification-leave-active {
+  transition:
+    opacity 200ms ease,
+    transform 200ms ease;
+  overflow: hidden;
+}
+
+.system-notification-enter-from,
+.system-notification-leave-to {
+  opacity: 0;
+  transform: translateY(-100%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .system-notification-enter-active,
+  .system-notification-leave-active {
+    transition: none;
+  }
+}
+</style>

package/components/navigation/header/types.ts

@@ -1,28 +1,28 @@
-export type NavChild = {
-  key: string,
-  name: string
-  items: NavChildItem[]
-}
-export type NavChildItem = {
-  title: string
-  subtitle?: string
-  icon?: any
-  to: string
-}
-
-export type NavLink = {
-  label: string
-  to: string
-  items?: NavChild[],
-  options?:any
-  icon?: any
-}
-export type ProjectKeys =
-  | 'counterparty'
-  | 'pk'
-  | 'work'
-  | 'tenders'
-  | 'fines'
-  | 'analytics'
-  | 'fea'
-  | 'compliance';
+export type NavChild = {
+  key: string,
+  name: string
+  items: NavChildItem[]
+}
+export type NavChildItem = {
+  title: string
+  subtitle?: string
+  icon?: any
+  to: string
+}
+
+export type NavLink = {
+  label: string
+  to: string
+  items?: NavChild[],
+  options?:any
+  icon?: any
+}
+export type ProjectKeys =
+  | 'counterparty'
+  | 'pk'
+  | 'work'
+  | 'tenders'
+  | 'fines'
+  | 'analytics'
+  | 'fea'
+  | 'compliance';