adata-ui 4.0.10 → 4.0.11

package/dist/runtime/components/Toggle.vue.d.ts

@@ -0,0 +1,39 @@
+type Size = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+type Color = 'blue' | 'green';
+interface Props {
+    disabled?: boolean;
+    size?: Size;
+    color?: Color;
+    switchClass?: string;
+    activeClass?: string;
+    inactiveClass?: string;
+    onIcon?: SVGElement | null;
+    onIconClass?: string | null;
+    offIcon?: SVGElement | null;
+    offIconClass?: string | null;
+    activeContainerClass?: string;
+    inactiveContainerClass?: string;
+}
+type __VLS_Props = Props;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+}>, {
+    size: Size;
+    color: Color;
+    disabled: boolean;
+    switchClass: string;
+    activeClass: string;
+    inactiveClass: string;
+    onIcon: SVGElement | null;
+    onIconClass: string | null;
+    offIcon: SVGElement | null;
+    offIconClass: string | null;
+    activeContainerClass: string;
+    inactiveContainerClass: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/button/Button.vue

@@ -0,0 +1,133 @@
+<script setup>
+import { twJoin, twMerge } from "tailwind-merge";
+import { NuxtLink } from "#components";
+import { computed } from "#imports";
+defineOptions({ name: "AButton" });
+const props = defineProps({
+  variant: { type: String, required: false, default: "primary" },
+  view: { type: String, required: false, default: "default" },
+  size: { type: String, required: false, default: "lg" },
+  form: { type: String, required: false, default: "button" },
+  icon: { type: null, required: false },
+  iconClass: { type: String, required: false, default: "" },
+  loading: { type: Boolean, required: false, default: false },
+  disabled: { type: Boolean, required: false, default: false },
+  block: { type: Boolean, required: false, default: false },
+  active: { type: Boolean, required: false, default: false },
+  to: { type: String, required: false, default: "" }
+});
+const classes = computed(() => [
+  "body-600 rounded-md cursor-pointer outline-none transition duration-200 select-none",
+  props.block ? "w-full" : "",
+  typeSwitchValues[props.view][props.variant],
+  sizeSwitchValues[props.form][props.size]
+]);
+const disabledClasses = computed(() => [
+  "body-600 rounded-md outline-none transition duration-200 select-none",
+  props.block ? "w-full" : "",
+  disabledTypeSwitchValues[props.view],
+  sizeSwitchValues[props.form][props.size]
+]);
+const typeSwitchActiveValues = {
+  default: {
+    primary: "bg-deepblue-900 text-white dark:bg-gray-200",
+    success: "bg-deepblue-900 text-white dark:bg-gray-200",
+    danger: "bg-deepblue-900 text-white dark:bg-gray-200 ",
+    gray: "bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200",
+    ghost: "bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200"
+  },
+  transparent: {
+    primary: "bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900",
+    success: "bg-green-500 text-white dark:bg-green-400 dark:text-gray-900",
+    danger: "bg-red-500 text-white dark:bg-red-400 dark:text-gray-900",
+    gray: "bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200",
+    ghost: "bg-white text-deepblue-900 dark:bg-gray-900 dark:text-gray-200 hover:text-deepblue-900 dark:hover:text-gray-200"
+  },
+  outline: {
+    primary: "bg-blue-700 text-white dark:bg-blue-500 dark:text-gray-900",
+    success: "bg-green-500 text-white dark:bg-green-400 dark:text-gray-900",
+    danger: "bg-red-500 text-white dark:bg-red-400 dark:text-gray-900",
+    gray: "bg-deepblue-900 text-white dark:bg-gray-200 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200",
+    ghost: "bg-gray-500 text-white dark:bg-gray-500 dark:text-gray-900 hover:text-deepblue-900 dark:hover:text-gray-200"
+  }
+};
+const typeSwitchValues = {
+  default: {
+    primary: "bg-blue-700 text-white hover:bg-blue-900 active:bg-deepblue-900 active:text-white dark:bg-blue-500 dark:text-gray-900 dark:hover:bg-blue-700 dark:active:bg-gray-200",
+    success: "bg-green-500 text-white hover:bg-green-900 active:bg-deepblue-900 active:text-white dark:bg-green dark:text-gray-900 dark:hover:bg-green-300 dark:active:bg-gray-200",
+    danger: "bg-red-500 text-white hover:bg-red-700 active:bg-deepblue-900 active:text-white dark:bg-red-400 dark:text-gray-900 dark:hover:bg-red-300 dark:active:bg-gray-200",
+    gray: "bg-deepblue-900/5 text-deepblue-900 hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:bg-gray-200/5 dark:hover:bg-gray-200/10 dark:active:bg-gray-200 dark:text-gray-200 dark:active:text-gray-900",
+    ghost: "bg-white text-deepblue-900 hover:bg-deepblue-900/5 active:bg-deepblue-900 active:text-white dark:bg-gray-900 dark:text-gray-200 dark:bg-gray-900 dark:hover:bg-gray-200/5 dark:active:bg-gray-200 dark:active:text-gray-900"
+  },
+  transparent: {
+    primary: "text-blue-700 hover:bg-blue-100 active:bg-blue-700 active:text-white dark:text-blue-500 dark:hover:bg-blue-500/20 dark:active:bg-blue-500 dark:active:text-gray-900",
+    success: "text-green-500 hover:bg-green-500/20 active:bg-green-500 active:text-white dark:text-green-400 dark:hover:bg-green-400/20 dark:active:bg-green-400 dark:active:text-gray-900",
+    danger: "text-red-500 hover:bg-red-500/20 active:bg-red-500 active:text-white dark:text-red-400 dark:hover:bg-red-400/20 dark:active:bg-red-400 dark:active:text-gray-900",
+    gray: "text-deepblue-900 hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-200 dark:active:text-gray-900",
+    ghost: "text-white hover:bg-deepblue-900/10 active:bg-white active:text-deepblue-900 dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-900 dark:active:text-gray-200"
+  },
+  outline: {
+    primary: "border border-blue-700 text-blue-700 hover:bg-blue-100 active:bg-blue-700 active:text-white dark:border-blue-500 dark:text-blue-500 dark:hover:bg-blue-500/20 dark:active:bg-blue-500 dark:active:text-gray-900",
+    success: "border border-green-500 text-green-500 hover:bg-green-500/20 active:bg-green-500 active:text-white dark:border-green-400 dark:text-green-400 dark:hover:bg-green-400/20 dark:active:bg-green-400 dark:active:text-gray-900",
+    danger: "border border-red-500 text-red-500 hover:bg-red-500/20 active:bg-red-500 active:text-white dark:text-red-400 dark:border-red-400 dark:hover:bg-red-400/20 dark:active:bg-red-400 dark:active:text-gray-900",
+    gray: "border border-gray-500/50 text-deepblue-900 hover:bg-deepblue-900/10 active:bg-deepblue-900 active:text-white dark:border-gray-500/50 dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-200 dark:active:text-gray-900",
+    ghost: "border border-white text-white hover:bg-deepblue-900 active:bg-gray-500 active:text-white dark:border-gray-200 dark:text-gray-200 dark:hover:bg-gray-200/5 dark:active:bg-gray-500 dark:active:text-gray-900"
+  }
+};
+const disabledTypeSwitchValues = {
+  default: "bg-deepblue-900/5 text-deepblue-900/20 dark:bg-gray-200/5 dark:text-gray-200/20 pointer-events-none",
+  transparent: "text-gray-500/50 pointer-events-none",
+  outline: "border border-gray-500/50 text-gray-500/50 pointer-events-none"
+};
+const sizeSwitchValues = {
+  icon: {
+    sm: "p-1 text-base",
+    md: "p-2 text-base",
+    lg: "p-2 text-2xl",
+    xl: "p-4 text-3xl"
+  },
+  button: {
+    sm: "px-4 py-1.5 leading-4 !h-[28px]",
+    md: "px-4 py-1.5 !h-[32px]",
+    lg: "px-4 py-2.5",
+    xl: "px-8 py-2.5"
+  }
+};
+const buttonClasses = computed(
+  () => twMerge(
+    twJoin(
+      props.disabled ? disabledClasses.value : classes.value,
+      props.active ? typeSwitchActiveValues[props.view][props.variant] : "",
+      props.to ? "inline-block" : ""
+    )
+  )
+);
+</script>
+
+<template>
+  <component
+    :is="to ? NuxtLink : 'button'"
+    :class="[buttonClasses, 'relative h-fit transition flex items-center justify-center']"
+    :disabled="disabled"
+    :to="to"
+  >
+    <span
+      :class="[
+  { 'opacity-0': loading },
+  'flex items-center justify-center gap-2 whitespace-nowrap'
+]"
+    >
+      <component
+        :is="icon"
+        :class="[`${iconClass}`]"
+      />
+      <slot />
+    </span>
+    <span
+      v-if="loading"
+      class="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center"
+    >
+      <i-loader-circle class="animate-spin" />
+    </span>
+  </component>
+</template>

package/dist/runtime/components/button/Button.vue.d.ts

@@ -0,0 +1,37 @@
+import type { Component } from 'vue';
+interface Props {
+    variant?: 'primary' | 'success' | 'danger' | 'gray' | 'ghost';
+    view?: 'default' | 'outline' | 'transparent';
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    form?: 'icon' | 'button';
+    icon?: Component;
+    iconClass?: string;
+    loading?: boolean;
+    disabled?: boolean;
+    block?: boolean;
+    active?: boolean;
+    to?: string;
+}
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    size: "sm" | "md" | "lg" | "xl";
+    disabled: boolean;
+    active: boolean;
+    view: "default" | "outline" | "transparent";
+    to: string;
+    variant: "primary" | "success" | "danger" | "gray" | "ghost";
+    form: "icon" | "button";
+    iconClass: string;
+    loading: boolean;
+    block: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/button/types.d.ts

@@ -0,0 +1,21 @@
+export type TypeSwitchValues = {
+    [key in 'primary' | 'success' | 'danger' | 'gray' | 'ghost']: string;
+};
+export type ViewSwitchValues = {
+    default: TypeSwitchValues;
+    transparent: TypeSwitchValues;
+    outline: TypeSwitchValues;
+};
+export type SizeSwitchValues = {
+    icon: {
+        [key in 'sm' | 'md' | 'lg' | 'xl']: string;
+    };
+    button: {
+        [key in 'sm' | 'md' | 'lg' | 'xl']: string;
+    };
+};
+export type DisabledViewSwitchValues = {
+    default: string;
+    transparent: string;
+    outline: string;
+};

package/dist/runtime/components/header/ProductMenu.vue

@@ -1,15 +1,248 @@
 <script setup>
-import { useHeaderNavigationLinks } from "../../composables/useHeaderNavigationLinks";
 import NavList from "./NavList.vue";
 import CardGallery from "./CardGallery.vue";
 import { useI18n } from "#imports";
+import IUsersThree from "#icons/users/users-three.vue";
+import ISearch from "#icons/search.vue";
+import { PAGES } from "../../shared/constants/pages";
+import IArrowCircleDown from "#icons/arrow/arrow-circle-down.vue";
+import IUsers from "#icons/users/users.vue";
+import IGlobe from "#icons/globe.vue";
+import IScale from "#icons/scale.vue";
+import ILinkChanin from "#icons/link-chain.vue";
+import IBlock from "#icons/block.vue";
+import IDollar from "#icons/currency/dollar.vue";
+import IWorkBag from "#icons/work-bag.vue";
+import IHdocument from "#icons/document/hdocument.vue";
+import IReceipt from "#icons/receipt/receipt.vue";
+import IHcheck from "#icons/receipt/hcheck.vue";
+import IFile from "#icons/file.vue";
+import ICar from "#icons/avto/car.vue";
+import ICheckCircle from "#icons/check-circle.vue";
+import ITruck from "#icons/avto/truck.vue";
+import IArrowGraphUp from "#icons/arrow/arrow-graph-up.vue";
+import IClipboardText from "#icons/clipboard-text.vue";
+import IMedal from "#icons/medal.vue";
+import ICompany from "#icons/company.vue";
+import IHandshake from "#icons/handshake.vue";
+import ISviazi from "#icons/sviazi.vue";
+import ICalculator from "#icons/calculator.vue";
+import IId from "#icons/document/id.vue";
+import IProfile from "#icons/document/profile.vue";
 const props = defineProps({
   animation: { type: String, required: false, default: "next" },
   index: { type: Number, required: false, default: 0 },
   url: { type: String, required: false, default: "" }
 });
+const { t } = useI18n();
+const appConfig = useAppConfig();
+const mode = appConfig.adataUI.mode;
 defineEmits(["outerClick", "mouseOver"]);
-const filteredItems = useHeaderNavigationLinks();
+const filteredItems = [
+  {
+    key: "pk",
+    name: t("header.products.counterparties.label"),
+    icon: IUsersThree,
+    to: `https://pk.${mode}.kz`,
+    items: [
+      {
+        title: t("header.products.counterparties.items.counterparty.title"),
+        subtitle: t("header.products.counterparties.items.counterparty.subtitle"),
+        icon: ISearch,
+        to: `https://pk.${mode}.kz` + PAGES.pk.main
+      },
+      {
+        title: t("header.products.counterparties.items.unloading.title"),
+        subtitle: t("header.products.counterparties.items.unloading.subtitle"),
+        icon: IArrowCircleDown,
+        to: `https://pk.${mode}.kz` + PAGES.pk.unload
+      },
+      {
+        title: t("header.products.counterparties.items.wholesale.title"),
+        subtitle: t("header.products.counterparties.items.wholesale.subtitle"),
+        icon: IUsers,
+        to: `https://pk.${mode}.kz` + PAGES.pk.employees
+      },
+      {
+        title: t("header.products.counterparties.items.foreign.title"),
+        subtitle: t("header.products.counterparties.items.foreign.subtitle"),
+        icon: IGlobe,
+        to: `https://pk.${mode}.kz` + PAGES.pk.foreign
+      },
+      {
+        title: t("header.products.counterparties.items.compare.title"),
+        icon: IScale,
+        to: `https://pk.${mode}.kz` + PAGES.pk.compare
+      },
+      {
+        title: t("header.products.counterparties.items.networks.title"),
+        icon: ILinkChanin,
+        to: `https://pk.${mode}.kz` + PAGES.pk.connections
+      },
+      {
+        title: t("header.products.counterparties.items.sanction.title"),
+        icon: IBlock,
+        to: `https://pk.${mode}.kz` + PAGES.pk.sanctions
+      },
+      {
+        title: t("header.products.counterparties.items.offshore.title"),
+        icon: IDollar,
+        to: `https://pk.${mode}.kz` + PAGES.pk.offshore
+      }
+    ]
+  },
+  {
+    key: "work",
+    name: t("header.products.jobs.label"),
+    icon: IWorkBag,
+    items: [
+      {
+        title: t("header.products.jobs.items.vacancies.title"),
+        icon: IWorkBag,
+        subtitle: t("header.products.jobs.items.vacancies.subtitle"),
+        to: `https://work.${mode}.kz` + PAGES.work.vacancy
+      },
+      {
+        title: t("header.products.jobs.items.resume.title"),
+        subtitle: t("header.products.jobs.items.resume.subtitle"),
+        icon: IHdocument,
+        to: `https://work.${mode}.kz` + PAGES.work.summary
+      }
+    ]
+  },
+  {
+    key: "tenders",
+    name: t("header.products.tenders.label"),
+    icon: IReceipt,
+    to: `https://tender.${mode}.kz`,
+    items: [
+      {
+        title: t("header.products.tenders.items.tenders.title"),
+        subtitle: t("header.products.tenders.items.tenders.subtitle"),
+        icon: ISearch,
+        to: `https://tender.${mode}.kz` + PAGES.tender.main
+      },
+      {
+        title: t("header.products.tenders.items.procurement.title"),
+        subtitle: t("header.products.tenders.items.procurement.subtitle"),
+        icon: IHcheck,
+        to: `https://tender.${mode}.kz` + PAGES.tender.plans
+      },
+      {
+        title: t("header.products.tenders.items.contracts.title"),
+        subtitle: t("header.products.tenders.items.contracts.subtitle"),
+        icon: IFile,
+        to: `https://tender.${mode}.kz` + PAGES.tender.contracts
+      }
+    ]
+  },
+  {
+    key: "fines",
+    name: t("header.products.fines.label"),
+    icon: ICar,
+    items: [
+      {
+        title: t("header.products.fines.items.fines.title"),
+        subtitle: t("header.products.fines.items.fines.subtitle"),
+        icon: ICheckCircle,
+        to: `https://avto.${mode}.kz` + PAGES.fines.main
+      },
+      {
+        title: t("header.products.fines.items.auto.title"),
+        subtitle: t("header.products.fines.items.auto.subtitle"),
+        icon: ICar,
+        to: `https://avto.${mode}.kz` + PAGES.fines.avto
+      },
+      {
+        title: t("header.products.fines.items.wholesaleAuto.title"),
+        subtitle: t("header.products.fines.items.wholesaleAuto.subtitle"),
+        icon: ITruck,
+        to: `https://avto.${mode}.kz` + PAGES.fines.bulk
+      }
+    ]
+  },
+  {
+    key: "analytics",
+    name: t("header.products.analytics.label"),
+    icon: IArrowGraphUp,
+    items: [
+      {
+        title: t("header.products.analytics.items.procurement.title"),
+        subtitle: t("header.products.analytics.items.procurement.subtitle"),
+        icon: IClipboardText,
+        to: `https://analytics.${mode}.kz` + PAGES.analytics.analysis
+      },
+      {
+        title: t("header.products.analytics.items.activity.title"),
+        subtitle: t("header.products.analytics.items.activity.subtitle"),
+        icon: IArrowGraphUp,
+        to: `https://analytics.${mode}.kz` + PAGES.analytics.index
+      },
+      {
+        title: t("header.products.analytics.items.rate.title"),
+        subtitle: t("header.products.analytics.items.rate.subtitle"),
+        icon: IMedal,
+        to: `https://analytics.${mode}.kz` + PAGES.analytics.rating
+      },
+      {
+        title: t("header.products.analytics.items.subjects.title"),
+        subtitle: t("header.products.analytics.items.subjects.subtitle"),
+        icon: ICompany,
+        to: `https://analytics.${mode}.kz` + PAGES.analytics.business
+      }
+    ]
+  },
+  {
+    key: "fea",
+    name: t("header.products.fea.label"),
+    icon: IGlobe,
+    items: [
+      {
+        title: t("header.products.fea.items.i.t"),
+        subtitle: t("header.products.fea.items.i.st"),
+        icon: IHandshake,
+        to: `https://tnved.${mode}.kz` + PAGES.fea.t
+      },
+      {
+        title: t("header.products.fea.items.o.t"),
+        subtitle: t("header.products.fea.items.o.st"),
+        icon: ISviazi,
+        to: `https://tnved.${mode}.kz` + PAGES.fea.o
+      },
+      {
+        title: t("header.products.fea.items.cp.t"),
+        subtitle: t("header.products.fea.items.cp.st"),
+        icon: ITruck,
+        to: `https://tnved.${mode}.kz` + PAGES.fea.cp
+      },
+      {
+        title: t("header.products.fea.items.ca.t"),
+        subtitle: t("header.products.fea.items.ca.st"),
+        icon: ICalculator,
+        to: `https://tnved.${mode}.kz` + PAGES.fea.ca
+      },
+      {
+        title: t("header.products.fea.items.tr.t"),
+        subtitle: t("header.products.fea.items.tr.st"),
+        icon: IGlobe,
+        to: `https://tnved.${mode}.kz` + PAGES.fea.tr
+      }
+    ]
+  },
+  {
+    key: "compliance",
+    name: t("header.products.compliance.label"),
+    icon: IId,
+    items: [
+      {
+        title: t("header.products.compliance.items.l.t"),
+        subtitle: t("header.products.compliance.items.l.st"),
+        icon: IProfile,
+        to: `https://ac.${mode}.kz/` + PAGES.compliance.l
+      }
+    ]
+  }
+];
 </script>
 
 <template>
@@ -18,7 +251,7 @@ const filteredItems = useHeaderNavigationLinks();
       <transition :name="animation">
         <div
           :key="index"
-          class="container mx-auto py-8"
+          class="a-container py-8"
         >
           <div class="flex justify-between gap-5">
             <div class="flex gap-[10px] divide-x divide-gray-500/50">

package/dist/runtime/components/header/ProfileMenu.vue

@@ -1,7 +1,18 @@
 <script setup>
+import { PAGES } from "../../shared/constants/pages";
+import AStatusBadge from "../Tag.vue";
+import AButton from "../button/Button.vue";
 import { useI18n } from "#imports";
 import IPlus from "#icons/plus.vue";
 import ILogout from "#icons/navigation/logout.vue";
+import IProfile from "#icons/document/profile.vue";
+import ILock from "#icons/lock.vue";
+import IReceipt from "#icons/receipt/receipt.vue";
+import IBookmark from "#icons/bookmark.vue";
+import IFile from "#icons/file.vue";
+import IHistory from "#icons/history.vue";
+import IUsers from "#icons/users/users.vue";
+import IMessage from "#icons/message.vue";
 const isLargeScreen = true;
 const props = defineProps({
   rate: { type: String, required: true },
@@ -11,9 +22,52 @@ const props = defineProps({
   replenish: { type: String, required: false },
   oldVersion: { type: String, required: false }
 });
+const appConfig = useAppConfig();
+const mode = appConfig.adataUI.mode;
 defineEmits(["logout"]);
 const { t } = useI18n();
-const items = [];
+const items = [
+  {
+    title: t("header.profile.menu.personalInfo"),
+    icon: IProfile,
+    to: `https://${mode}.kz` + PAGES.profile.index
+  },
+  {
+    title: t("header.profile.menu.security"),
+    icon: ILock,
+    to: `https://${mode}.kz` + PAGES.profile.security
+  },
+  {
+    title: t("header.profile.menu.paymentHistory"),
+    icon: IReceipt,
+    to: `https://${mode}.kz` + PAGES.profile.paymentHistory
+  },
+  {
+    title: t("header.profile.menu.favourites"),
+    icon: IBookmark,
+    to: `https://${mode}.kz` + PAGES.profile.favourites
+  },
+  {
+    title: t("header.profile.menu.myReports"),
+    icon: IFile,
+    to: `https://${mode}.kz` + PAGES.profile.reports
+  },
+  {
+    title: t("header.profile.menu.browsingHistory"),
+    icon: IHistory,
+    to: `https://${mode}.kz` + PAGES.profile.browsingHistory
+  },
+  {
+    title: t("header.profile.menu.myGroups"),
+    icon: IUsers,
+    to: `https://${mode}.kz` + PAGES.profile.myGroups
+  },
+  {
+    title: t("header.profile.menu.notes"),
+    icon: IMessage,
+    to: `https://${mode}.kz` + PAGES.profile.notes
+  }
+];
 const onReplenish = () => {
   if (window) {
     window.location.href = "https://adata.kz/profile?popupBalance=1";
@@ -33,13 +87,13 @@ const onReplenish = () => {
       <div class="flex items-center justify-between gap-4 lg:mt-2">
         <div>
           <span class="mr-2 font-semibold lg:text-lg">{{ rate }}</span>
-          <div
+          <a-status-badge
             type="success"
             class="!px-3 font-semibold text-white"
             size="sm"
           >
             {{ t("header.profile.connected") }}
-          </div>
+          </a-status-badge>
         </div>
         <span class="bg-deepblue ml-2 rounded-xl px-2 py-1 text-xs lg:hidden">{{ balance.toLocaleString("RU-ru") }} ₸</span>
       </div>
@@ -48,14 +102,14 @@ const onReplenish = () => {
           {{ t("header.profile.currentBalance") }}
           <span class="ml-2 rounded-xl bg-deepblue-900 px-2 py-1">{{ balance.toLocaleString("RU-ru") }} ₸</span>
         </div>
-        <button
+        <a-button
           size="sm"
           view="outline"
           variant="ghost"
           @click="onReplenish"
         >
           {{ t("header.profile.addBalance") }}
-        </button>
+        </a-button>
       </div>
     </div>
     <!--    mobile  -->
@@ -65,26 +119,26 @@ const onReplenish = () => {
           <div class="font-semibold">
             {{ rate }}
           </div>
-          <div
+          <a-status-badge
             type="success"
             class="!px-3 font-semibold text-white dark:text-gray-900"
             size="sm"
           >
             {{ t("header.profile.connected") }}
-          </div>
+          </a-status-badge>
         </div>
         <div class="flex min-w-[90px] flex-col">
           <div class="font-semibold">
             {{ t("header.profile.balance") }}
           </div>
           <div class="flex gap-1">
-            <div
+            <a-status-badge
               size="sm"
               class="!px-3 font-semibold text-white dark:!bg-[#E3E5E8] dark:text-gray-900"
               type="gray"
             >
               {{ balance.toLocaleString("RU-ru") }} ₸
-            </div>
+            </a-status-badge>
             <button
               class="flex h-[23px] w-[23px] items-center justify-center rounded-md bg-white text-deepblue-900 dark:bg-gray-900 dark:text-[#E3E5E8]"
               @click="onReplenish"
@@ -100,7 +154,7 @@ const onReplenish = () => {
     </div>
     <div class="rounded-b-[0.5rem] bg-white p-4 dark:bg-[#232324]">
       <div class="mb-2 flex justify-between gap-2 lg:hidden">
-        <div
+        <a-status-badge
           size="sm"
           class="w-full py-[6px] font-semibold"
         >
@@ -108,8 +162,8 @@ const onReplenish = () => {
             {{ t("header.profile.requests") }}
           </span>
           {{ limitRemaining }}
-        </div>
-        <div
+        </a-status-badge>
+        <a-status-badge
           size="sm"
           class="w-full py-[6px] font-semibold"
         >
@@ -117,7 +171,7 @@ const onReplenish = () => {
             {{ t("header.profile.daysLeft") }}
           </span>
           {{ daysRemaining }}
-        </div>
+        </a-status-badge>
       </div>
       <div class="grid grid-cols-2 gap-2">
         <nuxt-link
@@ -149,7 +203,7 @@ const onReplenish = () => {
         </span>
         <div />
       </div>
-      <button
+      <a-button
         class="lg:mt-2"
         block
         @click="$emit('logout')"
@@ -158,7 +212,7 @@ const onReplenish = () => {
         <span>
           {{ t("header.profile.logout") }}
         </span>
-      </button>
+      </a-button>
     </div>
   </div>
 </template>