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

package/components/overlays/modal/AModalV2.vue

@@ -20,6 +20,8 @@ const props = withDefaults(defineProps<{
   swipeToClose?: boolean
   swipeThreshold?: number
   showDragHandle?: boolean
+  dataTestId?: string
+  iconXMarkTestId?: string
 }>(), {
   size: 'md',
   closeOnOverlay: true,
@@ -34,6 +36,8 @@ const props = withDefaults(defineProps<{
   swipeToClose: true,
   swipeThreshold: 65,
   showDragHandle: true,
+  dataTestId: undefined,
+  iconXMarkTestId: undefined,
 })
 
 const emit = defineEmits<{
@@ -98,10 +102,10 @@ const contentBaseClass = computed(() => {
   const base = ['modal-v2-content flex flex-col overflow-hidden border bg-white shadow-2xl dark:bg-gray-900']
 
   if (isSheet.value) {
-    base.push('w-full max-w-none max-h-[100dvh] rounded-t-2xl rounded-b-none border-x-0 border-b-0 border-t border-gray-200 dark:border-gray-800')
+    base.push('w-full max-w-none max-h-[100dvh] rounded-t-xl rounded-b-none border-x-0 border-b-0 border-t border-gray-200 dark:border-gray-800')
   }
   else {
-    const radius = props.size === 'fullscreen' ? 'rounded-none' : 'rounded-2xl'
+    const radius = props.size === 'fullscreen' ? 'rounded-none' : 'rounded-xl'
     const widthCls = props.size === 'container'
       ? ' w-full max-w-screen-sm md:max-w-screen-md lg:max-w-screen-lg xl:max-w-screen-xl 2xl:max-w-screen-2xl'
       : ''
@@ -286,6 +290,7 @@ function onTouchEnd() {
               ref="contentRef"
               :class="contentBaseClass"
               :style="sizeStyle"
+              :data-test-id="dataTestId"
               @mousedown.stop
             >
               <div
@@ -308,14 +313,15 @@ function onTouchEnd() {
                 @touchcancel="onTouchEnd"
               >
                 <slot name="header">
-                  <h2 v-if="title" class="text-base font-semibold text-gray-900 dark:text-gray-100">
+                  <h2 v-if="title" class="text-h5 text-gray-900 dark:text-gray-100">
                     {{ title }}
                   </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"
+                  class="ml-auto rounded-sm p-1 transition hover:bg-gray-100 dark:hover:bg-gray-800 dark:hover:text-gray-200"
+                  :data-test-id="iconXMarkTestId"
                   @click="closeIfAllowed"
                 >
                   <a-icon-x-mark class="size-4" />

package/components/overlays/side-panel/ASidePanel.vue

@@ -128,10 +128,10 @@ watch(() => [modelValue.value, panel.value], (newP, oldP) => {
 
 const roundedClass = computed(() => {
   const classes = {
-    left: "rounded-r-xl",
-    right: "rounded-l-xl",
-    top: "rounded-b-xl",
-    bottom: "rounded-t-xl",
+    left: "rounded-r-lg",
+    right: "rounded-l-lg",
+    top: "rounded-b-lg",
+    bottom: "rounded-t-lg",
   }
 
   return classes[panelSide.value]
@@ -170,7 +170,7 @@ const modalHeight = ref(0)
 const touchstart = (event: TouchEvent) => {
   isClose.value = false
   positionStart.value = event.touches[0].clientY
-  modalHeight.value = panel.value?.offsetHeight || 0 // Запоминаем текущую высоту модалки
+  modalHeight.value = panel.value?.offsetHeight || 0
 }
 
 const touchmove = (event: TouchEvent) => {
@@ -179,7 +179,7 @@ const touchmove = (event: TouchEvent) => {
   const touchPosition = event.touches[0].clientY
   const step = touchPosition - positionStart.value
 
-  if (step < 0) return // предотвратить движение вверх
+  if (step < 0) return
 
   const newHeight = modalHeight.value - step
   panel.value.style.height = `${newHeight}px`

package/components/overlays/sideover/ASlideover.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 
-import { twJoin, twMerge } from 'tailwind-merge'
+import { twJoin, twMerge } from '#adata-ui/utils/twMerge'
 import { onClickOutside, useWindowSize } from '@vueuse/core'
 import {disableBodyScroll, enableBodyScroll} from "body-scroll-lock";
 
@@ -37,10 +37,10 @@ const uiConfig = {
     bottom: 'bottom-0 left-0 w-full'
   },
   rounded: {
-    top: 'rounded-b-lg',
-    bottom: 'rounded-t-lg',
-    left: 'rounded-r-lg',
-    right: 'rounded-l-lg'
+    top: 'rounded-b-md',
+    bottom: 'rounded-t-md',
+    left: 'rounded-r-md',
+    right: 'rounded-l-md'
   },
   fullscreen: 'w-screen h-screen rounded-none',
   transition: {
@@ -219,7 +219,7 @@ const modalHeight = ref(0)
 const touchstart = (event: TouchEvent) => {
   isClose.value = false
   positionStart.value = event.touches[0].clientY
-  modalHeight.value = slideover.value?.offsetHeight || 0 // Запоминаем текущую высоту модалки
+  modalHeight.value = slideover.value?.offsetHeight || 0
 }
 
 const touchmove = (event: TouchEvent) => {

package/components/overlays/tooltip/ATooltip.vue

@@ -56,7 +56,7 @@ const baseClass = computed(() => {
   const color = props.errorParsing ? 'text-[#E74135] dark:text-[#F47E75]' : 'text-white dark:text-deepblue-900'
   const pad = props.size === 'sm' ? 'px-4 py-2' : 'px-4 py-4'
   const truncated = props.truncate ? 'truncate' : 'max-w-[530px] w-max'
-  return ['text-xs font-normal absolute', bg, color, 'rounded-md', pad, truncated].join(' ')
+  return ['text-body-sm font-normal absolute', bg, color, 'rounded-sm', pad, truncated].join(' ')
 })
 
 /* --- positioning logic --- */

package/components/overlays/tooltip/ATooltipV2.vue

@@ -9,27 +9,20 @@ import {
   useFloating,
 } from '@floating-ui/vue'
 import { onClickOutside, onKeyStroke } from '@vueuse/core'
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from '#adata-ui/utils/twMerge'
 import { useTooltipTrigger } from './useTooltipTrigger'
 
 interface Props {
-  /** Preferred side; auto-flips when there isn't room. */
   placement?: TooltipPlacement
-  /** How the tooltip opens. `manual` is fully driven by `v-model:open`. */
   trigger?: TooltipTrigger
-  /** Show a pointer arrow aimed at the trigger. */
   arrow?: boolean
-  /** Gap between trigger and tooltip, in px. */
   offset?: number
   openDelay?: number
   closeDelay?: number
-  /** Render through `<Teleport to="body">` to escape overflow/stacking contexts. */
   teleport?: boolean
   disabled?: boolean
   zIndex?: number
-  /** Plain-text fallback used when the `content` slot is empty. */
   text?: string
-  /** Extra classes merged onto the tooltip box (e.g. width/padding overrides). */
   contentClass?: string
 }
 
@@ -80,7 +73,6 @@ const { x, y, strategy, middlewareData, placement: resolvedPlacement } = useFloa
 const side = computed(() => resolvedPlacement.value.split('-')[0])
 const opposite: Record<string, string> = { top: 'bottom', bottom: 'top', left: 'right', right: 'left' }
 
-// Grow the panel out of the edge nearest the trigger.
 const transformOrigin = computed(() => {
   const [main, align] = resolvedPlacement.value.split('-')
   const anchor = opposite[main] ?? 'center'
@@ -92,7 +84,6 @@ const transformOrigin = computed(() => {
   return `${h} ${anchor}`
 })
 
-// The two outer edges of the rotated square form the visible point.
 const arrowBorderClass = computed(() => {
   switch (side.value) {
     case 'top': return 'border-b border-r'
@@ -117,12 +108,11 @@ const interactive = computed(() => props.trigger !== 'hover')
 
 const boxClass = computed(() =>
   twMerge(
-    'rounded-lg bg-white px-2.5 py-1.5 shadow-lg ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-gray-700',
+    'rounded-md bg-white px-2.5 py-1.5 shadow-lg ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-gray-700',
     props.contentClass,
   ),
 )
 
-// Click mode dismisses on outside-click / Escape; hover leaves on its own; manual is parent-driven.
 onClickOutside(
   floating,
   () => {

package/components/transitions/ATransitionHeight.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import ui from "#adata-ui/components/elements/accordion/AAccordionGroup/ui.config";
-import { twMerge } from 'tailwind-merge'
+import { twMerge } from '#adata-ui/utils/twMerge'
 
 const props = defineProps<{
   transition?: {

package/composables/useHeaderNavigationLinks.ts

@@ -1,57 +1,63 @@
-import IconSearch from '#adata-ui/icons/search.vue'
-import { PAGES } from '#adata-ui/shared/constans/pages'
+import { useUrls } from '#adata-ui/composables/useUrls'
+import AiAssistant from '#adata-ui/icons/ai-assistant.vue'
 import IconArrowCircle from '#adata-ui/icons/arrow/arrow-circle-down.vue'
-import IconUsers from '#adata-ui/icons/users.vue'
-import IconGlobe from '#adata-ui/icons/globe.vue'
-import IconScales from '#adata-ui/icons/scales/scale.vue'
-import IconLink from '#adata-ui/icons/link-chain.vue'
+import IconArrowGraph from '#adata-ui/icons/arrow/arrow-graph-up.vue'
 import IconBlock from '#adata-ui/icons/block.vue'
-import IconDollar from '#adata-ui/icons/currency/currency-dollar.vue'
-import IconWork from '#adata-ui/icons/work-bag.vue'
-import IconDocument from '#adata-ui/icons/hdocument.vue'
-import IconCheckCircle from '#adata-ui/icons/check/check-circle.vue'
+import IconFavorite from '#adata-ui/icons/bookmark/bookmark.vue'
+import IconBot from '#adata-ui/icons/bot.vue'
+import AIconBriefcase from '#adata-ui/icons/briefcase.vue'
+import IconCalc from '#adata-ui/icons/calculator.vue'
+import AIconCarSide from '#adata-ui/icons/car-side.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 IconMedal from '#adata-ui/icons/medal.vue'
+import AIconCart from '#adata-ui/icons/cart.vue'
+import CheckSb from '#adata-ui/icons/check-sb.vue'
+import IconCheckCircle from '#adata-ui/icons/check/check-circle.vue'
 import IconCompany from '#adata-ui/icons/company.vue'
+import IconDollar from '#adata-ui/icons/currency/currency-dollar.vue'
+import IconFilePen from '#adata-ui/icons/file-pen.vue'
+import IconFileStack from '#adata-ui/icons/file-stack.vue'
+import IconGitCompare from '#adata-ui/icons/git-compare.vue'
+import IconGlobe from '#adata-ui/icons/globe.vue'
 import IconHandshake from '#adata-ui/icons/handshake.vue'
-import Connections from '#adata-ui/icons/sviazi.vue'
-import IconCalc from '#adata-ui/icons/calculator.vue'
-import IconProfile from '#adata-ui/icons/profile.vue'
-import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
-import IconLock from '#adata-ui/icons/lock.vue'
-import IconReceipt from '#adata-ui/icons/receipt.vue'
-import IconFavorite from '#adata-ui/icons/bookmark/bookmark.vue'
+import IconDocument from '#adata-ui/icons/hdocument.vue'
 import IconHistory from '#adata-ui/icons/history.vue'
+import HotLine from '#adata-ui/icons/hot-line.vue'
+import IconLink from '#adata-ui/icons/link-chain.vue'
+import IconLock from '#adata-ui/icons/lock.vue'
+import MapPaper from '#adata-ui/icons/map-paper.vue'
+import MapPinRect from '#adata-ui/icons/map/map-pin-rect.vue'
+import IconMedal from '#adata-ui/icons/medal.vue'
 import IconMessage from '#adata-ui/icons/message/message.vue'
-import AIconBriefcase from '#adata-ui/icons/briefcase.vue'
-import AIconCarSide from '#adata-ui/icons/car-side.vue'
+import IconProfile from '#adata-ui/icons/profile.vue'
+import IconReceipt from '#adata-ui/icons/receipt.vue'
+import Sanctions from '#adata-ui/icons/sanctions.vue'
+import IconScales from '#adata-ui/icons/scales/scale.vue'
+import IconSearch from '#adata-ui/icons/search.vue'
+import IconShieldAlert from '#adata-ui/icons/shield-alert.vue'
 import AIconShieldVerified from '#adata-ui/icons/shield-verified.vue'
-import AIconCart from '#adata-ui/icons/cart.vue'
+import Connections from '#adata-ui/icons/sviazi.vue'
+import Tasks from '#adata-ui/icons/tasks.vue'
+import IconTruck from '#adata-ui/icons/truck.vue'
+import IconUsers from '#adata-ui/icons/users.vue'
+import IconWork from '#adata-ui/icons/work-bag.vue'
+import { PAGES } from '#adata-ui/shared/constans/pages'
+import { buildLocalizedUrl } from '#adata-ui/utils/localizedNavigation'
 import {
-  AIconUsersThree,
+  AIconAkimat,
   AIconArrowGraphUp,
-  AIconGlobe,
   AIconArrowSquareDown,
+  AIconCurrencyTenge,
+  AIconExcelIcon,
   AIconExpandWindow,
+  AIconFile,
+  AIconGlobe,
+  AIconSearch,
   AIconUsers,
+  AIconUsersThree,
   AIconWarningTriangle,
-  AIconSearch,
-  AIconAkimat,
-  AIconCurrencyTenge,
-  AIconExcelIcon, AIconFile,
 } from '#components'
-import MapPinRect from '#adata-ui/icons/map/map-pin-rect.vue'
-import MapPaper from '#adata-ui/icons/map-paper.vue'
-import { useUrls } from '#adata-ui/composables/useUrls'
-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'
 
-export const useHeaderNavigationLinks = () => {
+export function useHeaderNavigationLinks() {
   const { t, locale } = useI18n()
   const urls = useUrls()
 
@@ -97,19 +103,19 @@ export const useHeaderNavigationLinks = () => {
           {
             title: t('header.products.counterparties.items.networks.title'),
             icon: IconLink,
-            to: buildLocalizedUrl(locale, urls.pk, PAGES.pk.connections)
+            to: buildLocalizedUrl(locale, urls.pk, PAGES.pk.connections),
           },
           {
             title: t('header.products.counterparties.items.sanction.title'),
             icon: IconBlock,
-            to: buildLocalizedUrl(locale, urls.pk, PAGES.pk.sanctions)
+            to: buildLocalizedUrl(locale, urls.pk, PAGES.pk.sanctions),
           },
           {
             title: t('header.products.counterparties.items.offshore.title'),
             icon: IconDollar,
-            to: buildLocalizedUrl(locale, urls.pk, PAGES.pk.offshore)
-          }
-        ]
+            to: buildLocalizedUrl(locale, urls.pk, PAGES.pk.offshore),
+          },
+        ],
       },
       {
         key: 'fines',
@@ -122,13 +128,13 @@ export const useHeaderNavigationLinks = () => {
             title: t('header.products.fines.items.fines.title'),
             subtitle: t('header.products.fines.items.fines.subtitle'),
             icon: IconCheckCircle,
-            to: buildLocalizedUrl(locale, urls.avto, PAGES.fines.main)
+            to: buildLocalizedUrl(locale, urls.avto, PAGES.fines.main),
           },
           {
             title: t('header.products.fines.items.auto.title'),
             subtitle: t('header.products.fines.items.auto.subtitle'),
             icon: IconCar,
-            to: buildLocalizedUrl(locale, urls.avto, PAGES.fines.avto)
+            to: buildLocalizedUrl(locale, urls.avto, PAGES.fines.avto),
           },
           // {
           //   title: t('header.products.fines.items.wholesaleAuto.title'),
@@ -136,7 +142,7 @@ export const useHeaderNavigationLinks = () => {
           //   icon: IconTruck,
           //   to: buildLocalizedUrl(locale, urls.avto, PAGES.fines.bulk)
           // }
-        ]
+        ],
       },
       {
         key: 'work',
@@ -149,15 +155,15 @@ export const useHeaderNavigationLinks = () => {
             title: t('header.products.jobs.items.vacancies.title'),
             icon: IconWork,
             subtitle: t('header.products.jobs.items.vacancies.subtitle'),
-            to: urls.work + PAGES.work.vacancy
+            to: urls.work + PAGES.work.vacancy,
           },
           {
             title: t('header.products.jobs.items.resume.title'),
             subtitle: t('header.products.jobs.items.resume.subtitle'),
             icon: IconDocument,
-            to: urls.work + PAGES.work.summary
-          }
-        ]
+            to: urls.work + PAGES.work.summary,
+          },
+        ],
       },
       {
         key: 'fea',
@@ -171,46 +177,46 @@ export const useHeaderNavigationLinks = () => {
             title: t('header.products.fea.items.o.t'),
             subtitle: t('header.products.fea.items.o.st'),
             icon: Connections,
-            to: buildLocalizedUrl(locale, urls.tnved, PAGES.fea.o)
+            to: buildLocalizedUrl(locale, urls.tnved, PAGES.fea.o),
           },
           {
             title: t('header.products.fea.items.i.t'),
             subtitle: t('header.products.fea.items.i.st'),
             icon: IconHandshake,
-            to: buildLocalizedUrl(locale, urls.tnved, PAGES.fea.t)
+            to: buildLocalizedUrl(locale, urls.tnved, PAGES.fea.t),
           },
           {
             title: t('header.products.fea.items.cp.t'),
             subtitle: t('header.products.fea.items.cp.st'),
             icon: IconTruck,
-            to: buildLocalizedUrl(locale, urls.tnved, PAGES.fea.cp)
+            to: buildLocalizedUrl(locale, urls.tnved, PAGES.fea.cp),
 
           },
           {
             title: t('header.products.fea.items.ca.t'),
             subtitle: t('header.products.fea.items.ca.st'),
             icon: IconCalc,
-            to: buildLocalizedUrl(locale, urls.tnved, PAGES.fea.ca)
+            to: buildLocalizedUrl(locale, urls.tnved, PAGES.fea.ca),
           },
           {
             title: t('header.products.fea.items.tr.t'),
             subtitle: t('header.products.fea.items.tr.st'),
             icon: IconGlobe,
-            to: buildLocalizedUrl(locale, urls.tnved, PAGES.fea.tr)
+            to: buildLocalizedUrl(locale, urls.tnved, PAGES.fea.tr),
           },
           {
             title: t('header.products.fea.items.containers.t'),
             subtitle: t('header.products.fea.items.containers.st'),
             icon: MapPaper,
-            to: buildLocalizedUrl(locale, urls.tnved, PAGES.fea.containers)
+            to: buildLocalizedUrl(locale, urls.tnved, PAGES.fea.containers),
           },
           {
             title: t('header.products.fea.items.importerMap.t'),
             subtitle: t('header.products.fea.items.importerMap.st'),
             icon: MapPinRect,
-            to: buildLocalizedUrl(locale, urls.tnved, PAGES.fea.importerMap)
+            to: buildLocalizedUrl(locale, urls.tnved, PAGES.fea.importerMap),
           },
-        ]
+        ],
       },
       {
         key: 'tenders',
@@ -257,47 +263,47 @@ export const useHeaderNavigationLinks = () => {
             icon: AIconSearch,
             to: urls.tender,
           },
-        ]
+        ],
       },
       {
         key: 'edo',
         is_new: true,
         name: t('header.products.edo.label'),
-        link: buildLocalizedUrl(locale, urls.edo_docs , ''),
+        link: buildLocalizedUrl(locale, urls.edo_docs, ''),
         icon: AIconFile,
         data_attribute: 'navigation-menu-edo-block',
         items: [
           {
             title: t('header.products.edo.items.docSign.t'),
             subtitle: t('header.products.edo.items.docSign.st'),
-            icon: AIconUsers,
-            to: buildLocalizedUrl(locale, urls.edo_docs , PAGES.edo.docSign)
+            icon: IconFilePen,
+            to: buildLocalizedUrl(locale, urls.edo_docs, PAGES.edo.docSign),
           },
           {
             title: t('header.products.edo.items.docTemplate.t'),
             subtitle: t('header.products.edo.items.docTemplate.st'),
-            icon: AIconUsers,
-            to: buildLocalizedUrl(locale, urls.edo_docs , PAGES.edo.docTemplate)
+            icon: IconFileStack,
+            to: buildLocalizedUrl(locale, urls.edo_docs, PAGES.edo.docTemplate),
           },
           {
             title: t('header.products.edo.items.docRisk.t'),
             subtitle: t('header.products.edo.items.docRisk.st'),
-            icon: AIconUsers,
-            to: buildLocalizedUrl(locale, urls.edo_docs , PAGES.edo.docRisk)
+            icon: IconShieldAlert,
+            to: buildLocalizedUrl(locale, urls.edo_docs, PAGES.edo.docRisk),
           },
           {
             title: t('header.products.edo.items.docCompare.t'),
             subtitle: t('header.products.edo.items.docCompare.st'),
-            icon: AIconUsers,
-            to: buildLocalizedUrl(locale, urls.edo_docs , PAGES.edo.docCompare)
+            icon: IconGitCompare,
+            to: buildLocalizedUrl(locale, urls.edo_docs, PAGES.edo.docCompare),
           },
           {
             title: t('header.products.edo.items.docAi.t'),
             subtitle: t('header.products.edo.items.docAi.st'),
-            icon: AIconUsers,
-            to: buildLocalizedUrl(locale, urls.edo_docs , PAGES.edo.docAi)
+            icon: IconBot,
+            to: buildLocalizedUrl(locale, urls.edo_docs, PAGES.edo.docAi),
           },
-        ]
+        ],
       },
       {
         key: 'compliance',
@@ -311,39 +317,39 @@ export const useHeaderNavigationLinks = () => {
             title: t('header.products.compliance.items.assistant.t'),
             subtitle: t('header.products.compliance.items.assistant.st'),
             icon: AiAssistant,
-            to: urls.compliancemain + PAGES.compliance.assistant
+            to: urls.compliancemain + PAGES.compliance.assistant,
           },
           {
             title: t('header.products.compliance.items.assignments.t'),
             subtitle: t('header.products.compliance.items.assignments.st'),
             icon: Tasks,
-            to: urls.compliancemain + PAGES.compliance.assignments
+            to: urls.compliancemain + PAGES.compliance.assignments,
           },
           {
             title: t('header.products.compliance.items.hotline.t'),
             subtitle: t('header.products.compliance.items.hotline.st'),
             icon: HotLine,
-            to: urls.compliancemain + PAGES.compliance.hotline
+            to: urls.compliancemain + PAGES.compliance.hotline,
           },
           {
             title: t('header.products.compliance.items.sanctions.t'),
             subtitle: t('header.products.compliance.items.sanctions.st'),
             icon: Sanctions,
-            to: urls.compliancemain + PAGES.compliance.sanctions
+            to: urls.compliancemain + PAGES.compliance.sanctions,
           },
           {
             title: t('header.products.compliance.items.suppliers.t'),
             subtitle: t('header.products.compliance.items.suppliers.st'),
             icon: IconProfile,
-            to: urls.compliancemain + PAGES.compliance.suppliers
+            to: urls.compliancemain + PAGES.compliance.suppliers,
           },
           {
             title: t('header.products.compliance.items.sb.t'),
             subtitle: t('header.products.compliance.items.sb.st'),
             icon: CheckSb,
-            to: urls.compliancemain + PAGES.compliance.sb
+            to: urls.compliancemain + PAGES.compliance.sb,
           },
-        ]
+        ],
       },
       {
         key: 'analytics',
@@ -362,34 +368,34 @@ export const useHeaderNavigationLinks = () => {
             title: t('header.products.analytics.items.activity.title'),
             subtitle: t('header.products.analytics.items.activity.subtitle'),
             icon: IconArrowGraph,
-            to: buildLocalizedUrl(locale, urls.analytics, PAGES.analytics.index)
+            to: buildLocalizedUrl(locale, urls.analytics, PAGES.analytics.index),
 
           },
           {
             title: t('header.products.analytics.items.rate.title'),
             subtitle: t('header.products.analytics.items.rate.subtitle'),
             icon: IconMedal,
-            to: buildLocalizedUrl(locale, urls.analytics, PAGES.analytics.rating)
+            to: buildLocalizedUrl(locale, urls.analytics, PAGES.analytics.rating),
           },
           {
             title: t('header.products.analytics.items.subjects.title'),
             subtitle: t('header.products.analytics.items.subjects.subtitle'),
             icon: IconCompany,
-            to: buildLocalizedUrl(locale, urls.analytics, PAGES.analytics.business)
+            to: buildLocalizedUrl(locale, urls.analytics, PAGES.analytics.business),
           },
           {
             title: t('header.products.analytics.items.demography.title'),
             subtitle: t('header.products.analytics.items.demography.subtitle'),
             icon: IconCompany,
-            to: buildLocalizedUrl(locale, urls.analytics, PAGES.analytics.demography)
-          }
-        ]
+            to: buildLocalizedUrl(locale, urls.analytics, PAGES.analytics.demography),
+          },
+        ],
       },
     ]
   })
 }
 
-export const useHeaderMenuLinks = () => {
+export function useHeaderMenuLinks() {
   const { t, locale } = useI18n()
   const urls = useUrls()
 
@@ -398,25 +404,25 @@ export const useHeaderMenuLinks = () => {
       title: t('header.profile.menu.personalInfo'),
       icon: IconProfile,
       to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.index),
-      dataTestId: 'dropdown-profile-button'
+      dataTestId: 'dropdown-profile-button',
     },
     {
       title: t('header.profile.menu.security'),
       icon: IconLock,
       to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.security),
-      dataTestId: 'dropdown-profile-change-password-button'
+      dataTestId: 'dropdown-profile-change-password-button',
     },
     {
       title: t('header.profile.menu.paymentHistory'),
       icon: IconReceipt,
       to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.paymentHistory),
-      dataTestId: 'dropdown-profile-payment-story-button'
+      dataTestId: 'dropdown-profile-payment-story-button',
     },
     {
       title: t('header.profile.menu.favourites'),
       icon: IconFavorite,
       to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.favourites),
-      dataTestId: 'dropdown-favourites-button'
+      dataTestId: 'dropdown-favourites-button',
     },
     // {
     //   title: t('header.profile.menu.myReports'),
@@ -427,24 +433,24 @@ export const useHeaderMenuLinks = () => {
       title: t('header.profile.menu.browsingHistory'),
       icon: IconHistory,
       to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.browsingHistory),
-      dataTestId: 'dropdown-profile-view-history-button'
+      dataTestId: 'dropdown-profile-view-history-button',
     },
     {
       title: t('header.profile.menu.myGroups'),
       icon: IconUsers,
       to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.myGroups),
-      dataTestId: 'dropdown-profile-my-groups-button'
+      dataTestId: 'dropdown-profile-my-groups-button',
     },
     {
       title: t('header.profile.menu.notes'),
       icon: IconMessage,
       to: buildLocalizedUrl(locale.value, urls.landing, PAGES.profile.notes),
-      dataTestId: 'dropdown-profile-notes-button'
-    }
+      dataTestId: 'dropdown-profile-notes-button',
+    },
   ]
 }
 
-export const usePkServicesLinks = () => {
+export function usePkServicesLinks() {
   const { t, locale } = useI18n()
   const urls = useUrls()
 

package/icons/archive.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M20.5 4.29167C20.5 3.79679 20.1433 3.5 19.8269 3.5H4.17308C3.85674 3.5 3.5 3.79679 3.5 4.29167V7.375C3.5 7.86988 3.85674 8.16667 4.17308 8.16667H19.8269C20.1433 8.16667 20.5 7.86988 20.5 7.375V4.29167ZM19.8269 2C21.0825 2 22 3.08367 22 4.29167V7.375C22 8.32596 21.4314 9.19986 20.5769 9.52871V19.7084C20.5769 20.2976 20.3614 20.8737 19.9612 21.3072C19.5592 21.7427 19.0004 22 18.4038 22H5.59614C4.99955 22 4.44081 21.7427 4.03877 21.3072C3.63859 20.8737 3.42307 20.2976 3.42307 19.7084V9.5287C2.56859 9.19985 2 8.32595 2 7.375V4.29167C2 3.08367 2.91753 2 4.17308 2H19.8269ZM4.92307 9.66669V19.7084C4.92307 19.9368 5.0074 20.1451 5.14098 20.2898C5.27269 20.4325 5.43788 20.5 5.59614 20.5H18.4038C18.5621 20.5 18.7273 20.4325 18.859 20.2898C18.9926 20.1451 19.0769 19.9368 19.0769 19.7084V9.66669H4.92307ZM9.86539 12.7917C9.45117 12.7917 9.11539 13.1275 9.11539 13.5417C9.11539 13.9559 9.45117 14.2917 9.86539 14.2917H14.1346C14.5488 14.2917 14.8846 13.9559 14.8846 13.5417C14.8846 13.1275 14.5488 12.7917 14.1346 12.7917H9.86539Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>