diff --git a/components.d.ts b/components.d.ts
index 217ca62..e9be9b0 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -14,12 +14,16 @@ declare module 'vue' {
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASlider: typeof import('ant-design-vue/es')['Slider']
     ASpin: typeof import('ant-design-vue/es')['Spin']
+    ASwitch: typeof import('ant-design-vue/es')['Switch']
+    ATag: typeof import('ant-design-vue/es')['Tag']
+    ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     BaseDatePicker: typeof import('./src/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue')['default']
     Basic: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/basic.vue')['default']
@@ -63,5 +67,6 @@ declare module 'vue' {
     TransactionSkeleton: typeof import('./src/components/TransactionSkeleton.vue')['default']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanDialog: typeof import('vant/es')['Dialog']
+    VanField: typeof import('vant/es')['Field']
   }
 }
diff --git a/src/views/base/home/components/ActionButton.vue b/src/views/base/home/components/ActionButton.vue
new file mode 100644
index 0000000..f7ed11c
--- /dev/null
+++ b/src/views/base/home/components/ActionButton.vue
@@ -0,0 +1,32 @@
+<template>
+  <div
+      class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
+      style="text-align: -webkit-center"
+      @click="$emit('click')"
+  >
+    <div
+        class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
+        style="border: solid 1px #0A1B37"
+    >
+      <Icon class="text-tertiary" :icon="action.icon" />
+    </div>
+    <div class="text-primary">{{ action.label }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Icon from '@/components/BasicPacks/BasicIcon.vue'
+
+defineProps<{
+  action: {
+    name: string
+    icon: string
+    label: string
+    handler: () => void
+  }
+}>()
+
+defineEmits<{
+  click: []
+}>()
+</script>
\ No newline at end of file
diff --git a/src/views/base/home/components/AppHeader.vue b/src/views/base/home/components/AppHeader.vue
new file mode 100644
index 0000000..ca43d94
--- /dev/null
+++ b/src/views/base/home/components/AppHeader.vue
@@ -0,0 +1,40 @@
+<template>
+  <div
+      :class="y > 50 ? 'bg-white shadow opacity-95' : ''"
+      class="px-4 py-2 top-0 z-5 wrap-fix background-color-transition"
+  >
+    <div class="flex justify-between my-2">
+      <div class="flex items-center gap-2" @click.stop="router.push({ name: 'user' })">
+        <div
+            class="z-100000 rounded-full border-1"
+            :class="y > 50 ? 'text-primary border-primary' : 'text-primary border-primary'"
+        >
+          <Icon icon="vuesax-linear:user" size="20" />
+        </div>
+        <div :class="y > 50 ? 'text-primary' : 'text-primary'" class="color-transition font-bold">
+          {{ userStore.userInfo?.name }}
+        </div>
+      </div>
+      <Icon
+          :color="y > 50 ? '#0A1B37' : '#0A1B37'"
+          class="color-transition"
+          icon="vuesax-linear:logout"
+          @click="$emit('logout')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useWindowScroll } from '@vueuse/core'
+import { useUserStore } from '@/store/userStore'
+import router from '@/router'
+import Icon from '@/components/BasicPacks/BasicIcon.vue'
+
+const { y } = useWindowScroll()
+const userStore = useUserStore()
+
+defineEmits<{
+  logout: []
+}>()
+</script>
\ No newline at end of file
diff --git a/src/views/base/home/components/AssetItem.vue b/src/views/base/home/components/AssetItem.vue
new file mode 100644
index 0000000..fc8431a
--- /dev/null
+++ b/src/views/base/home/components/AssetItem.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="flex gap-1">
+    <div>{{ label }}</div>
+    <div class="font-bold">{{ value }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  label: string
+  value: string
+}>()
+</script>
\ No newline at end of file
diff --git a/src/views/base/home/components/AssetsSection.vue b/src/views/base/home/components/AssetsSection.vue
new file mode 100644
index 0000000..138115d
--- /dev/null
+++ b/src/views/base/home/components/AssetsSection.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="bg-primary rounded-lg p-2 py-3 mt-2">
+    <div class="flex justify-center text-tertiary w-full z-20">
+      محصولات:
+      <div class="text-l mr-2 font-bold">{{ userStore?.userInfo?.wallet?.count_product ?? 0 }} عدد</div>
+    </div>
+    <div class="flex mt-2 justify-center text-tertiary w-full z-20">
+      دارایی طلایی:
+      <div class="text-l mr-2 font-bold">{{ (userStore?.userInfo?.wallet?.count_gold ?? 0).toFixed(3) }} گرم</div>
+      <BasicIcon @click="$emit('openGoldModal')" icon="vuesax-linear:info-circle" size="18" color="tertiary" />
+    </div>
+    <div class="flex mt-2 justify-center text-tertiary w-full z-20">
+      دارایی ریالی:
+      <div class="text-l mr-2 font-bold">{{ usePriceWithoutType(userStore?.userInfo?.wallet?.count_cash ?? 0) }} ریال</div>
+      <BasicIcon @click="$emit('openRialModal')" icon="vuesax-linear:info-circle" size="18" color="tertiary" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from '@/store/userStore'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import {usePriceWithoutType} from "../../../../utils/usePrice";
+
+const userStore = useUserStore()
+
+defineEmits<{
+  openGoldModal: []
+  openRialModal: []
+}>()
+</script>
\ No newline at end of file
diff --git a/src/views/base/home/components/BalanceSheet.vue b/src/views/base/home/components/BalanceSheet.vue
new file mode 100644
index 0000000..c804b2a
--- /dev/null
+++ b/src/views/base/home/components/BalanceSheet.vue
@@ -0,0 +1,84 @@
+<template>
+  <BasicActionSheet v-model:show="visible">
+    <div class="pb-20">
+      <div>
+        <div class="w-full text-center font-bold">موجودی ها</div>
+        <div class="h-30vh overflow-y-auto">
+          <div class="mt-5">
+            <BasicInfoItem
+                class="flex justify-between"
+                title="مجموعه کل دارایی طلایی"
+                is-line
+                :info="`در این قسمت مجموع کل وزن طلای آبشده (${(walletInfo?.gold ?? 0)?.toFixed(3)}) + ارزش دارایی ها (${(walletInfo?.treasure_sum ?? 0)?.toFixed(3)} ) را مشاهده میفرمایید.`"
+                infoHead="مجموع کل دارایی طلایی"
+                :value="parseFloat((walletInfo?.gold_sum ?? 0).toFixed(2)) + ' گرم'"
+            />
+            <a-divider class="!my-1" />
+            <BasicInfoItem
+                class="flex justify-between"
+                title="دارایی کیف پول ریالی"
+                is-line
+                :value="usePrice(walletInfo?.cash ?? 0)"
+            />
+            <a-divider class="!my-1" />
+            <BasicInfoItem
+                class="flex justify-between"
+                title="دارایی کیف پول طلایی"
+                is-line
+                :value="(walletInfo?.count_gold_wallet ?? 0) + ' گرم'"
+            />
+            <a-divider v-if="nameProject === 'goldsun'" class="!my-1" />
+            <BasicInfoItem
+                v-if="nameProject === 'goldsun'"
+                class="flex justify-between"
+                title="دارایی کیف پول نقره"
+                is-line
+                :value="(walletInfo?.count_silver ?? 0) + ' گرم'"
+            />
+            <a-divider v-if="nameProject === 'goldsun'" class="!my-1" />
+            <BasicInfoItem
+                v-if="nameProject === 'goldsun'"
+                class="flex justify-between"
+                title="دارایی کیف پول مس"
+                is-line
+                :value="(walletInfo?.count_copper ?? 0) + ' گرم'"
+            />
+            <a-divider class="!my-1" />
+            <BasicInfoItem
+                class="flex justify-between"
+                title="معادل ریالی مجموع دارایی ها"
+                is-line
+                :value="usePrice(walletInfo?.count_cash_total ?? 0)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </BasicActionSheet>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
+import BasicInfoItem from '@/components/BasicPacks/BasicInfoItem.vue'
+import { useConfigStore } from '@/store/configStore'
+import {usePrice} from "@/utils/usePrice";
+
+const props = defineProps<{
+  show: boolean
+  walletInfo: any
+  goldVal: number
+}>()
+
+const emit = defineEmits<{
+  'update:show': [value: boolean]
+}>()
+
+const config = useConfigStore()
+const nameProject = config.config.name
+
+const visible = computed({
+  get: () => props.show,
+  set: (val) => emit('update:show', val)
+})
+</script>
\ No newline at end of file
diff --git a/src/views/base/home/components/BannerSlider.vue b/src/views/base/home/components/BannerSlider.vue
new file mode 100644
index 0000000..038ff08
--- /dev/null
+++ b/src/views/base/home/components/BannerSlider.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="w-full relative mt-2 flex flex-col justify-center home_appear_fade_in overflow-hidden rounded-lg">
+    <div class="w-full aspect-[2.8/1] min-h-[10rem] max-h-[14rem]">
+      <swiper
+          :modules="bannerSwiperModules"
+          :slides-per-view="1"
+          :space-between="6"
+          :autoplay="{ delay: 4000, disableOnInteraction: false }"
+          :pagination="{ clickable: true }"
+          class="banner-swiper h-full w-full rounded-lg"
+      >
+        <swiper-slide v-for="(banner, index) in banners" :key="index" class="!h-full">
+          <img
+              v-if="banner.show"
+              class="banner-img w-full h-full object-cover rounded-lg block"
+              :src="banner.icon"
+              :alt="banner.caption || ''"
+              :style="(banner.link || banner.typeClick === 'share') ? 'cursor: pointer;' : ''"
+              @click="$emit('bannerClick', banner)"
+          />
+        </swiper-slide>
+      </swiper>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Swiper, SwiperSlide } from 'swiper/vue'
+import { Autoplay, Pagination } from 'swiper/modules'
+import 'swiper/swiper-bundle.css'
+import 'swiper/css/pagination'
+
+const bannerSwiperModules = [Autoplay, Pagination]
+
+defineProps<{
+  banners: any[]
+}>()
+
+defineEmits<{
+  bannerClick: [banner: any]
+}>()
+</script>
+
+<style scoped>
+.banner-swiper {
+  --swiper-pagination-bottom: 0.75rem;
+}
+
+.banner-swiper .swiper-pagination-bullet {
+  width: 0.5rem;
+  height: 0.5rem;
+  background: rgba(0, 0, 0, 0.35);
+  opacity: 1;
+}
+
+.banner-swiper .swiper-pagination-bullet-active {
+  background: #fff;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/base/home/components/CurrentPrice.vue b/src/views/base/home/components/CurrentPrice.vue
new file mode 100644
index 0000000..2fc32d4
--- /dev/null
+++ b/src/views/base/home/components/CurrentPrice.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="w-full relative mt-2 border-gray-200 border-1 rounded-lg py-3 flex flex-col justify-center home_appear_fade_in">
+    <div class="w-full items-center flex justify-center">
+      <div class="text-gray-600 text-[12px] ml-2">قیمت خرید از {{ config.config.name_fa }}</div>
+      <div v-if="price" class="flex gap-1 text-xs items-center">
+        <div
+            v-if="percentPriceChanged() !== 0"
+            class="flex flex-row-reverse rounded-lg justify-between items-center gap-2 px-3"
+            :class="percentPriceChanged() >= 0 ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'"
+        >
+          <div dir="ltr">{{ useTowDecimal(percentPriceChanged()) }}%</div>
+          <div>
+            <Icon
+                :size="15"
+                :icon="percentPriceChanged() < 0 ? 'vuesax-linear:received' : 'vuesax-linear:send'"
+                :color="percentPriceChanged() < 0 ? 'red-600' : 'green-600'"
+            />
+          </div>
+        </div>
+        <Vue3Odometer
+            :value="displayGoldVal"
+            class="o-text !text-xl font-bold"
+            style="font-family: iran-sans; direction: ltr"
+        />
+        ریال
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Icon from '@/components/BasicPacks/BasicIcon.vue'
+import { useConfigStore } from '@/store/configStore'
+import {lastPrice, percentPriceChanged, price} from '@/utils/price'
+import Vue3Odometer from 'vue3-odometer'
+import 'odometer/themes/odometer-theme-default.css'
+import {useTowDecimal} from "../../../../utils/usePrice";
+import {computed} from "vue";
+
+
+const config = useConfigStore()
+
+// محاسبه درصد تغییرات به صورت reactive
+const percentChange = computed(() => {
+  if (! lastPrice?.value?.price_last) return 0
+  return percentPriceChanged()
+})
+
+// بررسی بسته بودن بازار
+const isMarketClosed = computed(() => {
+  return lastPrice?.value?.goldir === 0 && lastPrice?.value?.price_last === 0
+})
+
+// مقدار نمایشی برای ادومتر (با مدیریت خطا)
+const displayGoldVal = computed(() => {
+  if (isMarketClosed.value) return 0
+  return  lastPrice?.value?.price_last|| 0
+})
+
+// انیمیشن fade-in
+</script>
\ No newline at end of file
diff --git a/src/views/base/home/components/LogoutConfirmDialog.vue b/src/views/base/home/components/LogoutConfirmDialog.vue
new file mode 100644
index 0000000..32f88b3
--- /dev/null
+++ b/src/views/base/home/components/LogoutConfirmDialog.vue
@@ -0,0 +1,41 @@
+<template>
+  <DialogVant v-model:show="visible" :closeOnClickOverlay="false" :timeOut="-1">
+    <template v-slot:title>
+      <div class="flex flex-col items-center">
+        <DotLottieVue
+            class="w-11rem h-11rem"
+            autoplay
+            src="https://lottie.host/129cf3a1-df84-4758-a856-58c133ae6013/R5RqclXA8G.json"
+        />
+        <div class="p-5 text-sm">آیا از خروج خود اطمینان دارید؟</div>
+      </div>
+    </template>
+
+    <template v-slot:button>
+      <div class="text-center text-red flex items-center justify-center" @click="$emit('confirm')">
+        <a-spin :spinning="false" size="small">خروج</a-spin>
+      </div>
+      <div class="text-center" @click="visible = false">انصراف</div>
+    </template>
+  </DialogVant>
+</template>
+
+<script setup lang="ts">
+import DialogVant from '@/components/DialogVant.vue'
+import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
+import {computed} from "vue";
+
+const props = defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:show': [value: boolean]
+  confirm: []
+}>()
+
+const visible = computed({
+  get: () => props.show,
+  set: (val) => emit('update:show', val)
+})
+</script>
\ No newline at end of file
diff --git a/src/views/base/home/components/MarketClosedMessage.vue b/src/views/base/home/components/MarketClosedMessage.vue
new file mode 100644
index 0000000..3157a53
--- /dev/null
+++ b/src/views/base/home/components/MarketClosedMessage.vue
@@ -0,0 +1,13 @@
+<template>
+  <div
+      v-if="message"
+      class="bg-red-50 text-red-600 text-center font-500 py-4 px-2 mt-2 rounded-lg"
+      v-html="message"
+  />
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  message: string
+}>()
+</script>
\ No newline at end of file
diff --git a/src/views/base/home/components/PriceChart.vue b/src/views/base/home/components/PriceChart.vue
new file mode 100644
index 0000000..a54b74e
--- /dev/null
+++ b/src/views/base/home/components/PriceChart.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="bg-gray-50 w-full flex justify-evenly rounded-lg py-4 mt-4 h-[15rem]">
+    <div class="w-full text-center pt-2">
+      <a-radio-group v-model:value="selectedValue" button-style="solid">
+        <a-radio-button value="DAILY" @click="handleUpdate('DAILY')">24 ساعت اخیر</a-radio-button>
+        <a-radio-button value="WEEKLY" @click="handleUpdate('WEEKLY')">هفته گذشته</a-radio-button>
+        <a-radio-button value="MONTHLY" @click="handleUpdate('MONTHLY')">ماه گذشته</a-radio-button>
+      </a-radio-group>
+      <div id="chart-timeline">
+        <apexchart
+            type="area"
+            height="200"
+            :options="chartOptions"
+            :series="props.priceChartSeries"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { useConfigStore } from '@/store/configStore'
+import {usePrice} from "@/utils/usePrice";
+
+const props = defineProps<{
+  priceChartSeries: any[]
+}>()
+
+const emit = defineEmits<{
+  updateData: [timeline: string]
+}>()
+
+const config = useConfigStore()
+const selectedValue = ref('DAILY')
+
+const toPersianNumber = (num: number) => {
+  return num.toString().replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
+}
+
+const chartOptions = computed(() => ({
+  chart: {
+    id: 'نوسانات قیمت',
+    type: 'area',
+    height: 200,
+    toolbar: { show: false },
+    zoom: { autoScaleYaxis: true }
+  },
+  grid: {
+    padding: { top: 0, right: 0, bottom: 0, left: 0 },
+    yaxis: { lines: { show: false } }
+  },
+  stroke: { width: 2 },
+  dataLabels: {
+    enabled: false,
+    // formatter: (val) => toPersianNumber(val),
+    style: {
+      fontFamily: '\'IranSans\', sans-serif'
+    }
+  },
+  yaxis: {
+    tickAmount: 8,
+    show: false,
+    labels: {
+      formatter: (val: number) => toPersianNumber(usePrice(val)),
+      style: { fontSize: '13px', fontFamily: "'IranSans', sans-serif" }
+    }
+  },
+  xaxis: {
+    show: false,
+    type: 'datetime',
+    axisTicks: { show: false },
+    tooltip: { enabled: false },
+    labels: { show: false }
+  },
+  tooltip: {
+    x: {
+      formatter: (value: number) => {
+        const date = new Date(value)
+        return `${date.toLocaleDateString('fa-IR')} - ${date.toLocaleTimeString('fa-IR', {
+          hour: '2-digit',
+          minute: '2-digit'
+        })}`
+      }
+    },
+    formatter: (val: number) => toPersianNumber(usePrice(val)),
+    style: { fontFamily: "'IranSans', sans-serif" }
+  },
+  colors: [config.config.color],
+  fill: {
+    type: 'gradient',
+    gradient: {
+      shadeIntensity: 1,
+      opacityFrom: 0.7,
+      opacityTo: 0.9,
+      stops: [0, 100]
+    }
+  }
+}))
+
+const handleUpdate = (timeline: string) => {
+  emit('updateData', timeline)
+}
+</script>
\ No newline at end of file
diff --git a/src/views/base/home/components/PriceStats.vue b/src/views/base/home/components/PriceStats.vue
new file mode 100644
index 0000000..5023cc1
--- /dev/null
+++ b/src/views/base/home/components/PriceStats.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="w-full flex justify-evenly rounded-lg py-2 home_appear_fade_in mt-6 pb-45">
+    <div class="text-center w-full">
+      <div>بالاترین قیمت امروز</div>
+      <div v-if="price" class="flex flex-col items-center mt-3">
+        <div class="text-green-600 flex gap-1 text-xs items-center">
+          <div class="text-base">{{ usePriceWithoutType(price?.buy ?? 0) }}</div>
+          ریال
+        </div>
+      </div>
+    </div>
+    <a-divider class="bg-gray-200 !h-auto !my-2" type="vertical" />
+    <div class="text-center w-full">
+      <div>پایین ترین قیمت امروز</div>
+      <div class="flex w-full mt-3 justify-evenly">
+        <div v-if="price" class="flex flex-col items-center">
+          <div class="text-red-600 flex gap-1 text-xs items-center">
+            <div class="text-base">{{ usePriceWithoutType(price?.sell ?? 0) }}</div>
+            ریال
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+
+import {usePriceWithoutType} from "../../../../utils/usePrice";
+
+defineProps<{
+  price: any
+}>()
+</script>
\ No newline at end of file
diff --git a/src/views/base/home/components/ReferralSection.vue b/src/views/base/home/components/ReferralSection.vue
new file mode 100644
index 0000000..b03caec
--- /dev/null
+++ b/src/views/base/home/components/ReferralSection.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="bg-primary rounded-lg p-2 py-1 mt-2">
+    <div class="p-2">
+      <div
+          v-if="userStore.userInfo?.referral_id"
+          class="text-tertiary font-bold w-full text-center flex justify-between gap-2 items-center"
+      >
+        کد معرف:
+        <div class="flex gap-2">
+          <div class="mr-2">{{ userStore.userInfo?.referral_id }}</div>
+        </div>
+      </div>
+      <div class="w-full flex gap-2 mt-1">
+        <BasicButton
+            icon="vuesax-linear:share"
+            size="small"
+            class="flex-1 !bg-primary !border-tertiary !text-tertiary"
+            icon-size="18"
+            @click.stop="shareCode"
+        >
+          دعوت از دوستان
+        </BasicButton>
+        <BasicButton
+            icon="vuesax-linear:copy"
+            size="small"
+            class="flex-1 !bg-primary !border-tertiary !text-tertiary"
+            icon-size="18"
+            @click.stop="copyCode"
+        >
+          رونوشت
+        </BasicButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useUserStore } from '@/store/userStore'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import { message } from 'ant-design-vue'
+
+const userStore = useUserStore()
+
+const shareCode = () => {
+  const text = `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
+با خرید طلای آبشده در مقدارهای کم ولی مستمر، سود بیشتری ببر!
+
+این دعوت نامه از طرف "${userStore.userInfo?.name}" عزیز برای شما ارسال شده تا شما هم از بازار طلا جا نمونید.
+روی لینک زیر کلیک کنید و ثبت نام خود را تکمیل کنید.
+
+${window.location.hostname}/login?id=${userStore.userInfo?.referral_id}`
+
+  navigator.share({ title: 'طلا', text })
+}
+
+const copyCode = () => {
+  const code = userStore.userInfo?.referral_id
+  if (code) {
+    navigator.clipboard.writeText(code)
+    message.info('کد رونوشت شد')
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/base/home/components/ShareModal.vue b/src/views/base/home/components/ShareModal.vue
new file mode 100644
index 0000000..c7a44d5
--- /dev/null
+++ b/src/views/base/home/components/ShareModal.vue
@@ -0,0 +1,78 @@
+<template>
+  <BasicModal v-model:visible="visible" :custom-footer="true">
+    <div class="p-2">
+      <div
+          v-if="referralId"
+          class="text-primary font-bold w-full text-center flex justify-between gap-2 items-center"
+      >
+        کد معرف:
+        <div class="flex gap-2">
+          <div class="mr-2">{{ referralId }}</div>
+        </div>
+      </div>
+      <div class="w-full flex gap-2 mt-1">
+        <BasicButton
+            icon="vuesax-linear:share"
+            size="small"
+            class="flex-1"
+            icon-size="18"
+            @click.stop="shareCode"
+        >
+          اشتراک گذاری
+        </BasicButton>
+        <BasicButton
+            icon="vuesax-linear:copy"
+            size="small"
+            class="flex-1"
+            icon-size="18"
+            @click.stop="copyCode"
+        >
+          رونوشت
+        </BasicButton>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import { message } from 'ant-design-vue'
+import { useUserStore } from '@/store/userStore'
+
+const props = defineProps<{
+  show: boolean
+  referralId: string
+}>()
+
+const emit = defineEmits<{
+  'update:show': [value: boolean]
+}>()
+
+const userStore = useUserStore()
+
+const visible = computed({
+  get: () => props.show,
+  set: (val) => emit('update:show', val)
+})
+
+const shareCode = () => {
+  const text = `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
+با خرید طلای آبشده در مقدارهای کم ولی مستمر، سود بیشتری ببر!
+
+این دعوت نامه از طرف "${userStore.userInfo?.name}" عزیز برای شما ارسال شده تا شما هم از بازار طلا جا نمونید.
+روی لینک زیر کلیک کنید و ثبت نام خود را تکمیل کنید.
+
+${window.location.hostname}/login?id=${props.referralId}`
+
+  navigator.share({ title: 'طلا', text })
+}
+
+const copyCode = () => {
+  if (props.referralId) {
+    navigator.clipboard.writeText(props.referralId)
+    message.info('کد رونوشت شد')
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/base/home/composables/useBanners.ts b/src/views/base/home/composables/useBanners.ts
new file mode 100644
index 0000000..de7dfb6
--- /dev/null
+++ b/src/views/base/home/composables/useBanners.ts
@@ -0,0 +1,37 @@
+import { ref } from 'vue'
+import { getConstByKey } from '@/api/const'
+
+export function useBanners() {
+    const banners = ref([])
+    const loading = ref(false)
+
+    const loadBanners = async () => {
+        try {
+            loading.value = true
+            const response = await getConstByKey('header_banner')
+            if (!response) return
+
+            let list = []
+            if (typeof response === 'string') {
+                list = JSON.parse(response)
+            } else if (typeof response === 'object' && !Array.isArray(response) && 'value' in response) {
+                list = typeof response.value === 'string' ? JSON.parse(response.value) : response.value
+            } else if (Array.isArray(response) && response.length > 0) {
+                const first = response[0]
+                if (first.value) {
+                    list = typeof first.value === 'string' ? JSON.parse(first.value) : first.value
+                } else if (first.icon) {
+                    list = response
+                }
+            }
+
+            banners.value = Array.isArray(list) ? list.filter(b => b.show === true) : []
+        } catch (error) {
+            console.error('Error loading banners:', error)
+        } finally {
+            loading.value = false
+        }
+    }
+
+    return { banners, loading, loadBanners }
+}
\ No newline at end of file
diff --git a/src/views/base/home/composables/usePriceChart.ts b/src/views/base/home/composables/usePriceChart.ts
new file mode 100644
index 0000000..9a56a33
--- /dev/null
+++ b/src/views/base/home/composables/usePriceChart.ts
@@ -0,0 +1,33 @@
+import { ref } from 'vue'
+import { getAllPrices } from '@/api/home'
+
+export function usePriceChart() {
+    const priceChartSeries = ref([{ name: 'قیمت', data: [] }])
+    const selection = ref('DAILY')
+    const chartLoading = ref(false)
+
+    const toPersianNumber = (num: number) => {
+        return num.toString().replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
+    }
+
+    const fetchPrices = async () => {
+        try {
+            chartLoading.value = true
+            const response = await getAllPrices()
+            const data = response.data?.prices
+            const selectedData = data[selection.value] || []
+            priceChartSeries.value[0].data = selectedData.map((item: any) => [item.timestamp, item.value - 1])
+        } catch (error) {
+            console.error('Error fetching prices:', error)
+        } finally {
+            chartLoading.value = false
+        }
+    }
+
+    const updateChartData = (timeline: string) => {
+        selection.value = timeline
+        fetchPrices()
+    }
+
+    return { priceChartSeries, chartLoading, updateChartData, fetchPrices }
+}
\ No newline at end of file
diff --git a/src/views/base/home/composables/useUserFunds.ts b/src/views/base/home/composables/useUserFunds.ts
new file mode 100644
index 0000000..f85f53d
--- /dev/null
+++ b/src/views/base/home/composables/useUserFunds.ts
@@ -0,0 +1,22 @@
+import { ref } from 'vue'
+import { useFundUserStore } from '@/store/fundStore'
+
+export function useUserFunds() {
+    const funds = ref([])
+    const loading = ref(false)
+    const fundStore = useFundUserStore()
+
+    const loadFunds = async () => {
+        try {
+            loading.value = true
+            const result = await fundStore.getMyFund()
+            funds.value = result?.rows || []
+        } catch (error) {
+            console.error('Error loading funds:', error)
+        } finally {
+            loading.value = false
+        }
+    }
+
+    return { funds, loading, loadFunds }
+}
\ No newline at end of file
diff --git a/src/views/base/home/index.vue b/src/views/base/home/index.vue
index 1b1b324..4cccb41 100644
--- a/src/views/base/home/index.vue
+++ b/src/views/base/home/index.vue
@@ -1,1160 +1,310 @@
 <template>
-  <div class=" mt-20 ">
-
-    <!--    <div class="flex gap-7 overflow-x-scroll px-5">
-          <ProductInventory v-for="item in productInventorys" :ProductItem="item" class="shadow-lg my-5" :key="item.id"></ProductInventory>
-        </div>-->
-    <div>
+  <div class="mt-10 p-5">
+    <div v-if="userStore.userInfo && !loading">
+      <!-- هشدار حداقل مبلغ -->
       <div
-          v-if="userStore.userInfo && !loading"
-          class="bg-white w-screen md:w-auto h-fit px-5 m-[-1px]"
+          v-if="limitedPrice !== undefined && userStore?.userInfo.trade_active !== 1"
+          class="text-red text-xs flex gap-1 items-center justify-center mb-2"
       >
-        <div
-            v-if="limitedPrice !== undefined && userStore?.userInfo.trade_active !== 1"
-            class="text-red text-xs flex gap-1 items-center justify-center mb-2"
-        >
-          <Icon icon="vuesax-linear:info-circle" size="16"/>
-          حداقل مبلغ اولیه برای ثبت سفارش
-          {{ usePriceWithoutType(limitedPrice.value as number ?? 0) }} ریال می باشد.
-        </div>
-
-        <!--        <div class="bg-white">
-          <MySlider v-if="cardItems.length > 0" :items="cardItems" class=" pb-[20vh] "
-                    style="touch-action: none" />
-        </div>-->
-        <!--        <div class="bg-gradient-to-l mt-3 p-1   shadow-lg  from-primary rounded-lg p-px  to-transparent ">-->
-        <div class="  p-1 shadow-lg from-primary rounded-lg p-px to-transparent" :class="getConfigApp('name')=='garoosi'?'mt-0':'mt-5'">
-          <div v-if="getConfigApp('name')=='garoosi'"  class="flex justify-between px-2 mb-2  ">
-            <div class="flex gap-1">
-              <div >دارایی طلایی:</div>
-              <div class="font-bold">{{ (userStore?.userInfo?.wallet?.count_gold ?? 0).toFixed(3) }}گرم</div>
-            </div>
-            <div class="flex gap-1">
-              <div>دارایی ریالی:</div>
-              <div class="font-bold">{{
-                  usePriceWithoutType(userStore?.userInfo?.wallet?.count_cash ?? 0)
-                }}ریال</div>
-            </div>
-          </div>
-          <div class="p-2  py-3 rounded-lg bg-tertiary">
-            <div class="flex justify-between ">
-              <!--              <div
-                                class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
-                                style="text-align: -webkit-center"
-                                @click="router.push({ name: 'buyProduct', query: { state: 'sell' } })"
-                            >
-                              <div
-                                  class="rounded-full w-[42px] h-[42px] bg-primary flex items-center justify-center"
-                                  style="border: solid 1px #0A1B37"
-
-                              >
-                                <Icon class="text-tertiary" icon="vuesax-linear:money-send" />
-                              </div>
-                              <div class="text-primary">فروش</div>
-                            </div>-->
-              <div
-                  class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
-                  style="text-align: -webkit-center"
-                  @click="router.push({ name: 'buyProduct' })"
-              >
-                <div
-                    class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
-                    style="border: solid 1px #0A1B37"
-
-                >
-                  <Icon class="text-tertiary" icon="vuesax-linear:money-receive"/>
-                </div>
-                <div class="text-primary">خرید و فروش</div>
-              </div>
-
-              <div
-                  class="text-center w-full flex-flex-col items-center home_appear_fade_in_down"
-                  style="text-align: -webkit-center"
-                  @click="router.push({ name: 'wallet', query: { state: 'deposit' } })"
-              >
-                <div
-                    class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
-                    style="border: solid 1px #0A1B37"
-
-                >
-                  <Icon class="text-tertiary" icon="vuesax-linear:card-add"/>
-                </div>
-                <div v-if="getConfigApp('name')=='garoosi'" class="text-primary">واریز و برداشت</div>
-                <div v-else class="text-primary">واریز نقدی</div>
-              </div>
-
-              <div
-                   class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
-                   style="text-align: -webkit-center"
-                   @click="openWholeBalanceVisible()"
-              >
-                <div
-                    class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center "
-                    style="border: solid 1px #0A1B37"
-                >
-                  <Icon class="text-tertiary" icon="vuesax-linear:receipt-item"/>
-                </div>
-                <div class="text-primary">موجودی</div>
-              </div>
-              <div v-if="getConfigApp('name')=='garoosi'"
-                   class="text-center w-full flex-flex-col items-center home_appear_fade_in_down"
-                   style="text-align: -webkit-center"
-                   @click="shareCode()"
-              >
-                <div
-                    class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
-                    style=" border: solid 1px #0A1B37"
-
-                >
-                  <Icon class="text-tertiary font-bold" icon="vuesax-linear:share"/>
-                </div>
-                <div class="text-primary">دعوت از دوستان</div>
-              </div>
-              <div v-else
-                   class="text-center w-full flex-flex-col items-center home_appear_fade_in_down"
-                   style="text-align: -webkit-center"
-                   @click="router.push({ name: 'fund' })"
-              >
-                <div
-                    class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
-                    style=" border: solid 1px #0A1B37"
-
-                >
-                  <Icon class="text-tertiary font-bold" icon="vuesax-linear:cup"/>
-                </div>
-                <div class="text-primary">دارایی ها</div>
-              </div>
-
-            </div>
-          </div>
-          <!--            <ADivider></ADivider>-->
-          <div>
-            <!--            <div @click="router.push({ name: 'fund' })">-->
-            <div v-if="getConfigApp('name')=='garoosi'" class="bg-primary rounded-lg p-2 py-1 mt-2">
-              <div class="p-2">
-                <div
-                    v-if="userStore.userInfo?.referral_id"
-                    class="text-tertiary font-bold w-full text-center flex justify-between gap-2 items-center"
-                >
-                  کد معرف:
-                  <div class="flex gap-2">
-                    <div class="mr-2">{{ userStore.userInfo?.referral_id }}</div>
-                    <!--            <BasicIcon icon="vuesax-linear:copy" color="#2563EB" class="cursor-pointer" size="18"
-                                           @click.stop="copyCode()" />
-                                &lt;!&ndash;          vuesax-linear:hierarchy-3&ndash;&gt;
-                                <BasicIcon icon="vuesax-linear:share" color="#2563EB" class="cursor-pointer" size="18"
-                                           @click.stop="shareCode()" />-->
-                  </div>
-                </div>
-                <div class="w-full flex gap-2 mt-1">
-                  <BasicButton
-                      icon="vuesax-linear:share"
-                      size="small"
-                      class="flex-1 !bg-primary !border-tertiary !text-tertiary "
-                      icon-size="18"
-                      @click.stop="shareCode()"
-                  >
-                    {{ getConfigApp('name') == 'garoosi' ? 'دعوت از دوستان' : ' اشتراک گذاری' }}
-                  </BasicButton>
-                  <BasicButton
-                      icon="vuesax-linear:copy"
-                      size="small"
-                      class="flex-1 !bg-primary !border-tertiary !text-tertiary"
-                      icon-size="18"
-                      @click.stop="copyCode()"
-                  >
-                    رونوشت
-                  </BasicButton>
-                </div>
-              </div>
-
-            </div>
-            <div v-else class="bg-primary rounded-lg p-2 py-3 mt-2">
-              <div class="flex justify-center text-tertiary w-full z-20">
-                محصولات:
-                <div class="text-l mr-2 font-bold">{{ userStore?.userInfo?.wallet?.count_product ?? 0 }}عدد</div>
-              </div>
-              <div class="flex mt-2 justify-center text-tertiary w-full z-20">
-                دارایی طلایی:
-                <div class="text-l mr-2 font-bold">{{ (userStore?.userInfo?.wallet?.count_gold ?? 0).toFixed(3) }}گرم
-                </div>
-                <BasicIcon @click="openGoldModal" icon="vuesax-linear:info-circle" size="18" color="tertiary"/>
-              </div>
-              <div class="flex mt-2 justify-center text-tertiary w-full z-20">
-                دارایی ریالی:
-                <div class="text-l mr-2 font-bold">{{
-                    usePriceWithoutType(userStore?.userInfo?.wallet?.count_cash ?? 0)
-                  }}ریال
-                </div>
-                <BasicIcon @click="openRialModal" icon="vuesax-linear:info-circle" size="18" color="tertiary"/>
-              </div>
-            </div>
-            <!--              <div class="flex  justify-center mt-2 w-full z-20">
-                            دارایی ریالی:
-                            <div class="text-l mr-4 font-bold">{{ usePriceWithoutType(walletStore.walletInfo?.count_cash ?? 0) }}ریال</div>
-                          </div>-->
-            <!--              <div class="flex justify-center mt-2 w-full z-20">
-                            <BasicInfoItem
-                                title="دارایی ریالی"
-                                is-line
-                                :info="`در این قسمت مجموع کیف پول ریالی (${usePrice(walletStore?.walletInfo?.count_cash_wallet ?? 0) }) + معادل ریالی محصولات (${ usePrice(walletStore?.walletInfo?.count_cash_wallets ?? 0)} ) را مشاهده میفرمایید.`"
-                                infoHead="مجموع کل دارایی ریالی"
-                                :value="usePriceWithoutType(walletStore.walletInfo?.count_cash ?? 0) + ' ریال'"
-                            />
-                          </div>-->
-          </div>
-          <!--            <div class="flex justify-between">
-                        <div class="text-center font-bold">دارایی شما</div>
-                        <div class="flex items-center gap-2 mr-4">
-                          <span class="text-base font-bold">{{ usePriceWithoutType(walletStore.walletInfo?.cash ?? 0) }}</span>
-                          <span class="text-xs text-base">ریال</span>
-                        </div>
-                        <div class="flex items-center gap-2 ml-4">
-                          <span class="text-base font-bold">{{ walletStore.walletInfo?.gold_sum.toFixed(3) }}</span>
-                          <span class="text-xs text-base">گرم</span>
-                        </div>
-                      </div>-->
-          <!--            <div class="flex justify-between items-center ">
-                        <div class="text-sm">
-                          موجودی کیف پول شما:
-                        </div>
-                        <div class="flex items-center gap-2">
-                          <span class="text-base font-bold">{{ usePrice(walletStore.walletInfo?.cash ?? 0) }}</span>
-                        </div>
-                      </div>
-                      <div class="flex justify-between items-center ">
-                        <div class="text-sm">
-                          موجودی کیف طلای شما:
-                        </div>
-                        <div class="flex items-center gap-2">
-                          <span class="text-base font-bold">{{ walletStore.walletInfo?.gold }}</span>
-                          <span class="text-xs text-gray-500">گرم</span>
-                        </div>
-                      </div>-->
-          <!--            <div class="flex justify-between items-center ">
-                        <div class="text-sm">
-                          ارزش کل طلا های شما:
-                        </div>
-                        <div class="flex items-center gap-2">
-                          <span class="text-base font-bold">{{ walletStore.walletInfo?.gold_sum }}</span>
-                          <span class="text-xs text-gray-500">گرم</span>
-                        </div>
-                      </div>-->
-          <!--            <div class="flex justify-between items-center ">
-                        <div class="text-sm">
-                        </div>
-                        <div class="flex  items-center gap-2">
-                          <div v-if="walletStore.walletInfo?.gold_sum*goldVal">
-                            <Vue3Odometer
-                              :value="walletStore.walletInfo?.gold_sum*goldVal"
-                              class="o-text !text-base font-bold"
-                              style="font-family: iran-sans; direction: ltr"
-                              v-if="key % 2 === 0"
-                            />
-                          </div>
-
-                          <span class="text-xs text-gray-500">ریال</span>
-                        </div>
-                      </div>-->
-        </div>
-        <div v-if="userStore.getValueByKey('closed_message') && lastPrice?.goldir==0 &&  lastPrice?.price_last==0  "
-             class="bg-red-50 text-red-600 text-center font-500 py-4 px-2 mt-2 rounded-lg "
-             v-html="userStore.getValueByKey('closed_message')"
-        ></div>
-        <div
-            class="w-full relative mt-2 border-gray-200 border-1 rounded-lg py-3 flex flex-col justify-center home_appear_fade_in"
-        >
-          <div class="w-full items-center flex justify-center">
-            <div class="text-gray-600 text-[12px] ml-2">قیمت خرید از {{ useConfigStore().config.name_fa }}</div>
-            <div v-if="price" class="flex gap-1 text-xs items-center">
-              <!--              <div id="odometer" class="font-bold text-2xl odometer animated fadeIn">
-                              &lt;!&ndash;                {{ usePriceWithoutType(useCounterAnim(price.price_last) ?? 0) }}&ndash;&gt;
-                            </div>-->
-              <!--              <div id="odometer" class="odometer animated fadeIn"></div>-->
-              <div v-if="percentPriceChanged()!=0"
-                   class="bg-green-100 text-green-600 flex flex-row-reverse rounded-lg justify-between items-center gap-2 px-3"
-                   :class="percentPriceChanged()>=0?'bg-green-100 text-green-600':'bg-red-100 text-red-600'">
-                <div dir="ltr">{{ useTowDecimal(percentPriceChanged()) }}%</div>
-                <div>
-                  <icon v-if="percentPriceChanged()<0" size="15px" icon="vuesax-linear:received" color="red-600"></icon>
-                  <icon v-else size="15px" icon="vuesax-linear:send" color="green-600"></icon>
-                </div>
-              </div>
-              <Vue3Odometer
-                  :value="goldVal"
-                  class="o-text !text-xl font-bold"
-                  style="font-family: iran-sans; direction: ltr"
-                  v-if="key % 2 === 0"
-              />
-              ریال
-            </div>
-          </div>
-        </div>
-        <!--        <div class="flex mt-5 gap-1 bg-primary text-tertiary cursor-pointer font-bold justify-center rounded-lg py-5"
-                     @click="router.push({ name: 'buyProduct' })">
-                  <div>خرید و فروش</div>
-                </div>-->
-        <div
-            v-if="config.config.name === 'garoosi' && banners?.length > 0"
-            class="w-full relative mt-2 flex flex-col justify-center home_appear_fade_in overflow-hidden rounded-lg"
-        >
-          <div class="w-full aspect-[2.8/1] min-h-[10rem] max-h-[14rem]">
-            <swiper
-                :modules="bannerSwiperModules"
-                :slides-per-view="1"
-                :space-between="6"
-                :autoplay="{ delay: 4000, disableOnInteraction: false }"
-                :pagination="{ clickable: true }"
-                class="banner-swiper h-full w-full rounded-lg"
-            >
-              <swiper-slide v-for="(banner, index) in banners" :key="index" class="!h-full">
-                <img
-                    v-if="banner.show"
-                    class="banner-img w-full h-full object-cover rounded-lg block"
-                    :src="banner.icon"
-                    :alt="banner.caption || ''"
-                    @click="handleBannerClick(banner)"
-                    :style="(banner.link || banner.typeClick=='share') ? 'cursor: pointer;' : ''"
-                />
-              </swiper-slide>
-            </swiper>
-          </div>
-        </div>
-
-
-        <!--        <div class="mt-10 font-bold home_appear_fade_in" @click="update">
-                  نوسانات قیمت هر گرم طلای 18 عیار
-                </div>-->
-
-        <!--        <a-spin :spinning="chartLoading" class="relative">
-                  <div ref="target" class="absolute"></div>
-                  <div v-if="!chartLoading" id="chart" class="pb-20 mt-7 overflow-x-auto">
-                    &lt;!&ndash;            <apexchart v-if="targetIsVisible" :options="chartOptions" :series="test_series"
-                                           :style="`width: ${chartWidth}`"
-                                           height="350"
-                                           type="candlestick"></apexchart>&ndash;&gt;
-                  </div>
-                </a-spin>-->
-        <!--        <a-spin :spinning="chartLoading" >-->
-        <!--          <div ref="target" class="absolute"></div>-->
-        <!--          <div id="chart" class="mt-7">-->
-        <div class="bg-gray-50 w-full flex justify-evenly rounded-lg py-4 mt-4 h-[15rem]">
-          <div class="w-full text-center pt-2">
-            <a-radio-group v-model:value="value" button-style="solid">
-              <a-radio-button value="a" @click="updateData('DAILY')">24 ساعت اخیر</a-radio-button>
-              <a-radio-button value="b" @click="updateData('WEEKLY')">هفته گذشته</a-radio-button>
-              <a-radio-button value="c" @click="updateData('MONTHLY')">ماه گذشته</a-radio-button>
-            </a-radio-group>
-            <div id="chart-timeline">
-              <apexchart
-                  type="area"
-                  height="200"
-                  ref="chart"
-                  :options="priceChartOptions"
-                  :series="priceChartSeries"
-              ></apexchart>
-            </div>
-          </div>
-        </div>
-        <div class=" w-full flex justify-evenly rounded-lg py-2 home_appear_fade_in mt-6 pb-45">
-          <div class="text-center w-full">
-            <div>بالاترین قیمت امروز</div>
-            <div v-if="lastPrice" class="flex flex-col items-center mt-3">
-              <div class="text-green-600 flex gap-1 text-xs items-center">
-                <div class="text-base">{{ usePriceWithoutType(price?.buy ?? 0) }}</div>
-                ریال
-              </div>
-            </div>
-          </div>
-          <a-divider class="bg-gray-200 !h-auto !my-2" type="vertical"/>
-          <div class="text-center w-full">
-            <div>پایین ترین قیمت امروز</div>
-            <div class="flex w-full mt-3 justify-evenly">
-              <div v-if="lastPrice" class="flex flex-col items-center">
-                <div class="text-red-600 flex gap-1 text-xs items-center">
-                  <div class="text-base">{{ usePriceWithoutType(price?.sell ?? 0) }}</div>
-                  ریال
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
+        <Icon icon="vuesax-linear:info-circle" size="16"/>
+        حداقل مبلغ اولیه برای ثبت سفارش {{ usePriceWithoutType(limitedPrice.value as number ?? 0) }} ریال می باشد.
       </div>
-      <div v-else class="bg-white w-screen md:w-auto h-[80vh] px-5 m-[-1px] flex justify-center ">
-        <HomeSkeleton class="w-full"/>
+
+      <!-- بخش اصلی -->
+      <div class="p-1  from-primary rounded-lg p-px to-transparent" :class="isGaroosi ? 'mt-0' : 'mt-5'">
+        <!-- دارایی‌ها (فقط گاروسی) -->
+        <div v-if="isGaroosi" class="flex justify-between px-2 mb-2">
+          <AssetItem label="دارایی طلایی:" :value="`${(userStore?.userInfo?.wallet?.count_gold ?? 0).toFixed(3)} گرم`"/>
+          <AssetItem label="دارایی ریالی:"
+                     :value="`${usePriceWithoutType(userStore?.userInfo?.wallet?.count_cash ?? 0)} ریال`"/>
+        </div>
+
+        <!-- دکمه‌های اصلی -->
+        <div class="p-2 py-3 rounded-lg bg-tertiary">
+          <div class="flex justify-between">
+            <ActionButton
+                v-for="action in mainActions"
+                :key="action.name"
+                :action="action"
+                @click="action.handler"
+            />
+          </div>
+        </div>
+
+        <!-- بخش کد معرف (گاروسی) -->
+        <ReferralSection v-if="isGaroosi"/>
+
+        <!-- بخش دارایی‌ها (سایر پروژه‌ها) -->
+        <AssetsSection v-else @openGoldModal="openGoldModal" @openRialModal="openRialModal"/>
+
+        <!-- پیام بسته بودن بازار -->
+        <MarketClosedMessage v-if="showClosedMessage" :message="closedMessage"/>
+
+        <!-- قیمت فعلی -->
+        <CurrentPrice/>
+
+        <!-- بنرها -->
+        <BannerSlider v-if="isGaroosi && banners?.length" :banners="banners" @bannerClick="handleBannerClick"/>
+
+        <!-- نمودار قیمت -->
+        <PriceChart @updateData="updateChartData" :price-chart-series="priceChartSeries"/>
+
+        <!-- آمار بالا و پایین -->
+        <PriceStats :price="price"/>
       </div>
-      <!--      <div class="relative pt-15 overflow-hidden ">-->
-      <!--        <div class="absolute left&#45;&#45;12 top-0">-->
-      <!--          <img :src="image">-->
-      <!--        </div>-->
-      <!--        <div class="bg-primary pb-30"-->
-      <!--        style="background: linear-gradient(to bottom, #fff,#fff, #0A1B37, #0A1B37);"-->
-      <!--        >-->
-      <!--          <div class=" text-tertiary text-2xl pt-6 pr-5 pl-50" style="font-size: 26px;font-weight: 600; color: #0A1B37" >ارسال کالا بعد از ثبت سفارش</div>-->
-      <!--          <div class="pr-5 pl-8 pt-10  text-tertiary ">میتوانید با خرید محصولات بعد از ثبت سفارش درخواست ارسال را-->
-      <!--            ثبت کرده و زیر 24 ساعت خرید خود را دریافت کنید-->
-      <!--          </div>-->
-      <!--        </div>-->
-      <!--      </div>-->
+
+      <!-- اسکلت لودینگ -->
+      <HomeSkeleton v-if="loading" class="w-full"/>
     </div>
-    <div
-        :class="y > 50 ? 'bg-white shadow opacity-95' : ''"
-        class="px-4 py-2 top-0 z-5 wrap-fix background-color-transition"
-    >
-      <div class="flex justify-between my-2">
-        <div class="flex items-center gap-2" @click.stop="router.push({ name: 'user' })">
-          <!--          <img :src="testimg" alt="" class="w-[24px] h-[24px]">-->
-          <div
-              class="z-100000 rounded-full border-1"
-              :class="y > 50 ? 'text-primary border-primary' : 'text-primary border-primary'"
-          >
-            <Icon icon="vuesax-linear:user" size="20"/>
-          </div>
-          <div :class="y > 50 ? 'text-primary' : 'text-primary'" class="color-transition font-bold">
-            {{ userStore.userInfo?.name }}
-          </div>
-        </div>
-        <Icon
-            :color="y > 50 ? '#0A1B37' : '#0A1B37'"
-            class="color-transition"
-            icon="vuesax-linear:logout"
-            @click="showLogoutConfirm = true"
-        />
-      </div>
-    </div>
-    <DialogVant v-model:show="showLogoutConfirm" :closeOnClickOverlay="false" :timeOut="-1">
-      <!--      <template v-slot:img>
-              <img :src="registerDelayImage" alt="" class="opacity-80">
-            </template>-->
 
-      <template v-slot:title>
-        <div class="flex flex-col items-center">
-          <DotLottieVue
-              class="w-11rem h-11rem"
-              autoplay
-              src="https://lottie.host/129cf3a1-df84-4758-a856-58c133ae6013/R5RqclXA8G.json"
-          />
-          <div class="p-5 text-sm">آیا از خروج خود اطمینان دارید؟</div>
-        </div>
-      </template>
+    <!-- هدر -->
+    <AppHeader @logout="showLogoutConfirm = true"/>
 
-      <template v-slot:button>
-        <div class="text-center text-red flex items-center justify-center" @click="logout">
-          <a-spin :spinning="logoutLoading" size="small"> خروج</a-spin>
-        </div>
-        <div class="text-center" @click="showLogoutConfirm = false">انصراف</div>
-      </template>
-    </DialogVant>
+    <!-- دیالوگ خروج -->
+    <LogoutConfirmDialog v-model:show="showLogoutConfirm" @confirm="logout"/>
+
+    <!-- شیت موجودی -->
+    <BalanceSheet v-model:show="wholeBalanceVisible" :walletInfo="walletStore.walletInfo" :goldVal="goldVal"/>
+
+    <!-- مودال‌ها -->
+    <BasicModal v-model:visible="showTextBanner" :custom-footer="true" destroyOnClose>
+      <div class="max-h-[54vh] ql-editor" v-html="TextBanner"></div>
+    </BasicModal>
+
+    <ShareModal v-model:visible="showShare" :referralId="userStore.userInfo?.referral_id"/>
   </div>
-  <BasicActionSheet v-model:show="wholeBalanceVisible">
-    <div class="pb-20">
-      <div>
-        <div class="w-full text-center font-bold">موجودی ها</div>
-        <div class="h-30vh overflow-y-auto">
-          <div class="mt-5">
-            <BasicInfoItem
-                class="flex justify-between"
-                title="مجموعه کل دارایی طلایی"
-                is-line
-                :info="`در این قسمت مجموع کل وزن طلای آبشده (${(walletStore.walletInfo?.gold ?? 0)?.toFixed(3)}) + ارزش دارایی ها (${(walletStore.walletInfo?.treasure_sum ?? 0)?.toFixed(3)} ) را مشاهده میفرمایید.`"
-                infoHead="مجموع کل دارایی طلایی"
-                :value="parseFloat((walletStore.walletInfo?.gold_sum ?? 0).toFixed(2)) + ' گرم'"
-            />
-            <!--            <a-divider class="!my-1" />
-                        <BasicInfoItem
-                          class="flex justify-between"
-                          title="میزان طلای آبشده"
-                          is-line
-                          :value="parseFloat((walletStore.walletInfo?.gold ?? 0)?.toFixed(3)) + ' گرم'"
-                        />
-                        <a-divider class="!my-1" />
-                        <BasicInfoItem
-                          class="flex justify-between"
-                          title="ارزش گنج ها"
-                          is-line
-                          :value="parseFloat((walletStore.walletInfo?.treasure_sum ?? 0)?.toFixed(3)) + ' گرم'"
-                        />-->
-            <a-divider class="!my-1"/>
-            <BasicInfoItem
-                class="flex justify-between"
-                title="دارایی کیف پول ریالی"
-                is-line
-                :value="usePrice(walletStore.walletInfo?.cash ?? 0)"
-            />
-            <a-divider class="!my-1"/>
-            <BasicInfoItem
-                class="flex justify-between"
-                title="دارایی کیف پول طلایی"
-                is-line
-                :value="(walletStore.walletInfo?.count_gold_wallet ?? 0) + ' گرم'"
-            />
-            <a-divider class="!my-1"/>
-            <BasicInfoItem
-                v-if="nameProject === 'goldsun'"
-                class="flex justify-between"
-                title="دارایی کیف پول نقره"
-                is-line
-                :value="(walletStore.walletInfo?.count_silver ?? 0) + ' گرم'"
-            />
-            <a-divider v-if="nameProject === 'goldsun'" class="!my-1"/>
-            <BasicInfoItem
-                v-if="nameProject === 'goldsun'"
-                class="flex justify-between"
-                title="دارایی کیف پول مس"
-                is-line
-                :value="(walletStore.walletInfo?.count_copper ?? 0) + ' گرم'"
-            />
-            <a-divider v-if="nameProject === 'goldsun'" class="!my-1"/>
-
-            <BasicInfoItem
-                class="flex justify-between"
-                title="معادل ریالی مجموع دارایی ها"
-                is-line
-                :value="usePrice(walletStore.walletInfo?.count_cash_total ?? 0)"
-            />
-            <a-divider class="!my-1"/>
-            <!--            <BasicInfoItem class="flex justify-between" title="دارایی کیف پول(به گرم)" is-line
-                           :value="((walletStore.walletInfo?.cash?? 0) / (goldVal?? 0)).toFixed(2)+ ' گرم'" />
-            <a-divider class="!my-1" />-->
-            <!--            <BasicInfoItem
-                            class="flex justify-between"
-                            title="ارزش کل دارایی شما"
-                            is-line
-                            :value="
-                            usePrice(
-                              (
-                                (walletStore.walletInfo?.gold_sum ?? 0) * (goldVal ?? 0) +
-                                (walletStore.walletInfo?.cash ?? 0)
-                              ).toFixed(0)
-                            )
-                          "
-                        />-->
-          </div>
-        </div>
-      </div>
-    </div>
-  </BasicActionSheet>
-  <BasicModal v-model:visible="showTextBanner" :custom-footer="true" destroyOnClose="true">
-    <div class="max-h-[54vh]">
-      <div class="w-full ql-editor " v-html="TextBanner">
-      </div>
-    </div>
-  </BasicModal>
-  <BasicModal v-model:visible="showShare" :custom-footer="true">
-    <div class="p-2">
-      <div
-          v-if="userStore.userInfo?.referral_id"
-          class="text-primary font-bold w-full text-center flex justify-between gap-2 items-center"
-      >
-        کد معرف:
-        <div class="flex gap-2">
-          <div class="mr-2">{{ userStore.userInfo?.referral_id }}</div>
-          <!--            <BasicIcon icon="vuesax-linear:copy" color="#2563EB" class="cursor-pointer" size="18"
-                                 @click.stop="copyCode()" />
-                      &lt;!&ndash;          vuesax-linear:hierarchy-3&ndash;&gt;
-                      <BasicIcon icon="vuesax-linear:share" color="#2563EB" class="cursor-pointer" size="18"
-                                 @click.stop="shareCode()" />-->
-        </div>
-      </div>
-      <div class="w-full flex gap-2 mt-1">
-        <BasicButton
-            icon="vuesax-linear:share"
-            size="small"
-            class="flex-1"
-            icon-size="18"
-            @click.stop="shareCode()"
-        >
-          {{ getConfigApp('name') == 'garoosi' ? 'دعوت از دوستان' : ' اشتراک گذاری' }}
-        </BasicButton>
-        <BasicButton
-            icon="vuesax-linear:copy"
-            size="small"
-            class="flex-1"
-            icon-size="18"
-            @click.stop="copyCode()"
-        >
-          رونوشت
-        </BasicButton>
-      </div>
-    </div>
-  </BasicModal>
 </template>
 
 <script lang="tsx" setup>
-import img from '@/assets/img/home_ly1.svg'
-import Icon from '@/components/BasicPacks/BasicIcon.vue'
-import {usePrice, usePriceWithoutType, useTowDecimal} from '../../../utils/usePrice'
-import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
+import {computed, onMounted, onUnmounted, ref} from 'vue'
 import router from '@/router'
-import * as echarts from 'echarts'
-import {useIntersectionObserver, useWindowScroll} from '@vueuse/core'
+import {useWindowScroll} from '@vueuse/core'
 import {loading, removeToken} from '@/utils'
 import {useUserStore} from '@/store/userStore'
 import {useWalletStore} from '@/store/walletStore'
-import DialogVant from '@/components/DialogVant.vue'
-import {getAllPrices, getChart} from '@/api/home'
-import Vue3Odometer from 'vue3-odometer'
-import 'odometer/themes/odometer-theme-default.css'
-import 'quill/dist/quill.core.css';
-
-import HomeSkeleton from '@/views/base/home/components/HomeSkeleton.vue'
-import {
-  getLastPrices,
-  getUpPrice,
-  lastPrice,
-  percentPriceChanged,
-  price,
-  setIntervalGetAllPrice,
-  stopPriceInterval
-} from '@/utils/price'
-import {DotLottieVue} from '@lottiefiles/dotlottie-vue'
-import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
-import BasicInfoItem from '@/components/BasicPacks/BasicInfoItem.vue'
-import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
-import type {PInventory} from '@/models/products'
-import type {Fund} from '@/models/fund'
-import type {TableOutput} from '@/models/table'
+import {useConfigStore} from '@/store/configStore'
 import {useFundUserStore} from '@/store/fundStore'
-import {message, Modal} from "ant-design-vue";
-import {useConfigStore} from "@/store/configStore";
-import {Swiper, SwiperSlide} from 'swiper/vue'
-import {Autoplay, Pagination} from 'swiper/modules'
-import 'swiper/swiper-bundle.css'
-import 'swiper/css/pagination'
+import {usePrice, usePriceWithoutType} from '../../../utils/usePrice'
+import {getLastPrices, getUpPrice, lastPrice, price, setIntervalGetAllPrice, stopPriceInterval} from '@/utils/price'
 import {getConstByKey} from '@/api/const'
-import type {IBenefits} from "@/models/banner";
-import BasicModal from "@/components/BasicPacks/BasicModal.vue";
-import {getConfigApp} from "@/utils/config";
-import BasicButton from "@/components/BasicPacks/BasicButton.vue";
+import {message, Modal} from 'ant-design-vue'
 
-const bannerSwiperModules = [Autoplay, Pagination]
-const nameProject = useConfigStore().config.name
+// Components
+import Icon from '@/components/BasicPacks/BasicIcon.vue'
+import HomeSkeleton from '@/views/base/home/components/HomeSkeleton.vue'
+import BasicModal from '@/components/BasicPacks/BasicModal.vue'
+import AssetItem from './components/AssetItem.vue'
+import ActionButton from './components/ActionButton.vue'
+import ReferralSection from './components/ReferralSection.vue'
+import AssetsSection from './components/AssetsSection.vue'
+import MarketClosedMessage from './components/MarketClosedMessage.vue'
+import CurrentPrice from './components/CurrentPrice.vue'
+import BannerSlider from './components/BannerSlider.vue'
+import PriceChart from './components/PriceChart.vue'
+import PriceStats from './components/PriceStats.vue'
+import AppHeader from './components/AppHeader.vue'
+import LogoutConfirmDialog from './components/LogoutConfirmDialog.vue'
+import BalanceSheet from './components/BalanceSheet.vue'
+import ShareModal from './components/ShareModal.vue'
+
+// Composables
+import {useBanners} from './composables/useBanners'
+import {usePriceChart} from './composables/usePriceChart'
+import {useUserFunds} from './composables/useUserFunds'
+
+// Stores
 const userStore = useUserStore()
 const walletStore = useWalletStore()
-const wholeBalanceVisible = ref<boolean>(false)
-const {x, y} = useWindowScroll()
-const series = ref<Chart[]>([{data: []}])
-const key = ref<number>(0)
-const main = ref(null)
-const logoutLoading = ref(false)
-const productInventorys = ref<PInventory[] | undefined>()
-const value = ref<string>('a')
-const items = ref<Fund[]>([])
-const tableOutput = ref<TableOutput<Fund> | null>(null)
-const inventory = ref<number>(0)
-const sumGold = ref<number>(0)
+const configStore = useConfigStore()
 const fundStore = useFundUserStore()
-const config = useConfigStore()
-const showTextBanner = ref<boolean>(false)
-const showShare = ref<boolean>(false)
-const TextBanner = ref<string>('')
 
-function shareCode() {
-  // nextTick(() => {
-  const val = `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
+// Config
+const isGaroosi = computed(() => configStore.config.name === 'garoosi')
+const closedMessage = computed(() => userStore.getValueByKey('closed_message'))
+const showClosedMessage = computed(() =>
+    closedMessage.value &&
+    lastPrice?.value?.price_last === 0)
+
+
+// State
+const showLogoutConfirm = ref(false)
+const wholeBalanceVisible = ref(false)
+const showTextBanner = ref(false)
+const showShare = ref(false)
+const TextBanner = ref('')
+const odometerKey = ref(0)
+const {x, y} = useWindowScroll()
+
+// Composables
+const {banners, loadBanners} = useBanners()
+const {updateChartData, priceChartSeries, fetchPrices} = usePriceChart()
+const {funds, loadFunds} = useUserFunds()
+
+// Computed
+const limitedPrice = computed(() => walletStore.limitedPrice?.[0])
+const goldVal = computed(() => {
+  return lastPrice.value?.price_last ?? 1
+})
+
+// Actions
+const mainActions = computed(() => [
+  {
+    name: 'buySell',
+    icon: 'vuesax-linear:money-receive',
+    label: 'خرید و فروش',
+    handler: () => router.push({name: 'buyProduct'})
+  },
+  {
+    name: 'deposit',
+    icon: 'vuesax-linear:card-add',
+    label: isGaroosi.value ? 'واریز و برداشت' : 'واریز نقدی',
+    handler: () => router.push({name: 'wallet', query: {state: 'deposit'}})
+  },
+  {
+    name: 'balance',
+    icon: 'vuesax-linear:receipt-item',
+    label: 'موجودی',
+    handler: () => wholeBalanceVisible.value = true
+  },
+  {
+    name: 'assets',
+    icon: 'vuesax-linear:cup',
+    label: isGaroosi.value ? 'دعوت از دوستان' : 'دارایی ها',
+    handler: () => isGaroosi.value ? shareCode() : router.push({name: 'fund'})
+  }
+])
+
+// Methods
+async function shareCode() {
+  const text = `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
 با خرید طلای آبشده در مقدارهای کم ولی مستمر، سود بیشتری ببر!
 
-این دعوت نامه از طرف "${userStore.userInfo?.name}" عزیز برای شما ارسال شده تا شما هم از بازار طلای  ${nameProject} جا نمونید.
+این دعوت نامه از طرف "${userStore.userInfo?.name}" عزیز برای شما ارسال شده تا شما هم از بازار طلای ${configStore.config.name} جا نمونید.
 روی لینک زیر کلیک کنید و ثبت نام خود را تکمیل کنید.
 
 ${window.location.hostname}/login?id=${userStore.userInfo?.referral_id}`
-  navigator.share({
-    title: nameProject,
-    text: val
-  })
-  // message.info('کد رونوشت شد')
-  // })
+
+  try {
+    await navigator.share({title: configStore.config.name, text})
+  } catch {
+    copyCode()
+  }
 }
 
 function copyCode() {
-  // nextTick(() => {
-  const val = userStore.userInfo?.referral_id
-  console.log(val)
-  navigator.clipboard.writeText(val)
-  message.info('کد رونوشت شد')
-  // })
-}
-
-async function initTable() {
-  try {
-    loading.value = true
-    tableOutput.value = fundStore.myFunds ?? await fundStore.getMyFund() ?? null
-    items.value.push(...tableOutput.value?.rows ?? [])
-  } catch (e) {
-    console.log(e)
-  } finally {
-    loading.value = false
+  const code = userStore.userInfo?.referral_id
+  if (code) {
+    navigator.clipboard.writeText(code)
+    message.info('کد رونوشت شد')
   }
 }
 
-const banners = ref<Array<IBenefits>>([])
+async function logout() {
+  userStore.userInfo = undefined
+  walletStore.walletInfo = undefined
+  removeToken()
+  await router.push({name: 'login'})
+  window.location.reload()
+}
 
-async function initBanners() {
-  try {
-    const response = await getConstByKey('header_banner')
-    if (response == null) return
+function openGoldModal() {
+  const goldAmount = (walletStore.walletInfo?.gold ?? 0).toFixed(3)
+  const walletsAmount = (walletStore.walletInfo?.count_gold_wallets ?? 0).toFixed(3)
+  Modal.confirm({
+    title: `مجموع کل وزن طلای آبشده (${goldAmount}) + ارزش دارایی ها (${walletsAmount}) گرم`,
+    okText: 'متوجه شدم',
+    centered: true,
+    cancelButtonProps: {style: {display: 'none'}}
+  })
+}
 
-    let list: Array<{ icon: string; show: boolean; caption: string | null; link: string | null }> = []
+function openRialModal() {
+  const cashWallet = usePrice(walletStore?.walletInfo?.count_cash_wallet ?? 0)
+  const cashWallets = usePrice(walletStore?.walletInfo?.count_cash_wallets ?? 0)
+  Modal.confirm({
+    title: `مجموع کیف پول ریالی (${cashWallet}) + معادل ریالی محصولات (${cashWallets}) ریال`,
+    okText: 'متوجه شدم',
+    centered: true,
+    cancelButtonProps: {style: {display: 'none'}}
+  })
+}
 
-    // پاسخ مستقیم به‌صورت رشتهٔ JSON
-    if (typeof response === 'string') {
-      list = JSON.parse(response)
-    }
-    // پاسخ شیء با فیلد value (یک Const تکی)
-    else if (typeof response === 'object' && !Array.isArray(response) && 'value' in response) {
-      const val = (response as { value: string | unknown }).value
-      list = typeof val === 'string' ? JSON.parse(val) : (val as typeof list)
-    }
-    // پاسخ آرایهٔ Const با فیلد value
-    else if (Array.isArray(response) && response.length > 0) {
-      const first = response[0] as { value?: string | unknown; icon?: string }
-      if (first.value !== undefined && first.value !== null) {
-        list = typeof first.value === 'string' ? JSON.parse(first.value) : (first.value as typeof list)
-      } else if (first.icon !== undefined) {
-        list = response as typeof list
+function handleBannerClick(banner) {
+  const handlers = {
+    share: () => showShare.value = true,
+    modal: () => {
+      if (banner.modalText) {
+        TextBanner.value = banner.modalText
+        showTextBanner.value = true
       }
-    }
-
-    banners.value = Array.isArray(list) ? list.filter((banner: any) => banner.show === true) : []
-  } catch (e) {
-    console.log('Error loading banners:', e)
-  }
-}
-
-function handleBannerClick(banner: IBenefits) {
-  if (banner.typeClick == 'share') {
-    showShare.value = true
-    return;
-  }
-  if (banner.typeClick == 'modal') {
-    if (!banner.modalText) return
-    TextBanner.value = banner.modalText
-    showTextBanner.value = true
-    return;
-  }
-  if (banner.typeClick == 'link') {
-    if (!banner.link) return
-
-    if (banner.link.startsWith('http://') || banner.link.startsWith('https://')) {
-      window.open(banner.link, '_blank')
-    } else {
-      router.push(banner.link)
-    }
-  }
-
-}
-
-onUnmounted(() => {
-  stopPriceInterval()
-})
-
-const goldVal = ref<number | undefined>()
-
-function openWholeBalanceVisible() {
-  items.value.forEach(x => {
-    if (x.title !== 'آبشده نقدی')
-      inventory.value += x?.wallet?.gold ?? 0
-  })
-  wholeBalanceVisible.value = true
-}
-
-function sumOfGold() {
-  items.value.forEach(x => {
-    if (x.title !== 'آبشده نقدی')
-      return sumGold.value += x?.wallet?.gold ?? 0
-  })
-}
-
-function update() {
-  setInterval(() => {
-    goldVal.value = lastPrice?.value.price_last
-  }, 500)
-}
-
-const target = ref(null)
-const targetIsVisible = ref(false)
-
-const isHidden = ref<boolean>(false)
-
-const {stop} = useIntersectionObserver(target, ([{isIntersecting}], observerElement) => {
-  targetIsVisible.value = isIntersecting
-  console.log('saaaaa', targetIsVisible.value)
-})
-
-watch(main, (n) => {
-  if (main.value !== null) {
-    // console.log('saaaa')
-    const echart = echarts.init(main.value, null, {
-      renderer: 'candlestick'
-    })
-    echart.setOption({
-      xAxis: {
-        data: dates.value.values,
-        show: true
-      },
-      yAxis: {
-        show: false,
-        scale: true
-      },
-      series: [
-        {
-          type: 'candlestick',
-          data: series.value
+    },
+    link: () => {
+      if (banner.link) {
+        if (banner.link.startsWith('http')) {
+          window.open(banner.link, '_blank')
+        } else {
+          router.push(banner.link)
         }
-      ]
-    })
-  }
-})
-
-//whole prices
-const priceChartSeries = ref<{ data: [number, number][] }[]>([
-  {
-    name: 'قیمت',
-    data: []
-  }
-])
-const selection = ref('DAILY')
-const chartRef = ref<ApexCharts | null>(null)
-const priceChartOptions = ref({
-  chart: {
-    id: 'نوسانات قیمت',
-    type: 'candlestick',
-    height: 200,
-    toolbar: {
-      show: false  // Disable the toolbar to remove download and other options
-    },
-    zoom: {
-      autoScaleYaxis: true
-    },
-    events: {
-      mounted(chart) {
-        chartRef.value = chart
       }
     }
-  },
-  grid: {
-    padding: {
-      top: 0,
-      right: 0,
-      bottom: 0,
-      left: 0
-    },
-    yaxis: {
-      lines: {
-        show: false
-      }
-    }
-  },
-  stroke: {
-    width: 2
-  },
-  dataLabels: {
-    enabled: false,
-    // formatter: (val) => toPersianNumber(val),
-    style: {
-      fontFamily: '\'IranSans\', sans-serif'
-    }
-  },
-  yaxis: {
-    tickAmount: 8,
-    show: false,
-    title: {
-      style: {
-        fontSize: '13px',
-        fontFamily: '\'IranSans\', sans-serif',
-        fontWeight: 'bold'
-      }
-    },
-    labels: {
-      formatter: (val) => toPersianNumber(usePrice(val)),
-      style: {
-        fontSize: '13px',
-        fontFamily: '\'IranSans\', sans-serif'
-      }
-    }
-  },
-  xaxis: {
-    show: false,
-    type: 'datetime',
-    axisTicks: {
-      show: false
-    },
-    tooltip: {
-      enabled: false
-    },
-    labels: {
-      show: false,
-      rotate: -45,
-      style: {
-        fontFamily: '\'IranSans\', sans-serif'
-      }
-      // formatter: (val) => toPersianNumber(toJalaliNotime(new Date(val).toString()))
-    },
-    axisBorder: {
-      show: false
-    }
-  },
-  tooltip: {
-    x: {
-      // formatter: (val) => toPersianNumber(toJalaliNotime(new Date(val).toString()))
-      formatter: (value) => {
-        const date = new Date(value)
-        return `${date.toLocaleDateString('fa-IR')} - ${date.toLocaleTimeString('fa-IR', {
-          hour: '2-digit',
-          minute: '2-digit'
-        })}`
-      }
-    },
-    formatter: (val) => toPersianNumber(usePrice(val)),
-    style: {
-      fontFamily: '\'IranSans\', sans-serif'
-      // fontWeight: 'bold'
-    },
-    markers: {
-      show: false
-    }
-  },
-  colors: [config.config.color],
-  fill: {
-    type: 'gradient',
-    gradient: {
-      shadeIntensity: 1,
-      opacityFrom: 0.7,
-      opacityTo: 0.9,
-      stops: [0, 100]
-    }
-  }
-
-})
-const toPersianNumber = (num) => {
-  return num.toString().replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
-}
-const fetchPrices = async () => {
-  try {
-    const response = await getAllPrices()
-    const data = response.data?.prices
-    const selectedData = data[selection.value] || []
-    priceChartSeries.value[0].data = selectedData.map((item) => [item.timestamp, item.value - 1])
-    // console.log(priceChartSeries.value[0].data)
-    chartRef.value?.updateOptions({
-      series: priceChartSeries.value
-    })
-  } catch (error) {
-    console.error('خطا در دریافت داده‌ها', error)
-  }
-}
-
-const updateData = (timeline) => {
-  selection.value = timeline
-  fetchPrices()
-}
-
-const limitedPrice = computed(() => {
-  if (walletStore.limitedPrice) return walletStore?.limitedPrice[0]
-})
-
-const test_series = [
-  {
-    name: 'candle',
-    data: []
-  }
-]
-
-async function initChart() {
-  try {
-    // chartLoading.value = true
-    const data = await getChart()
-    /*    data.forEach(item => {
-          test_series[0].data.push({
-            x: toJalali(item[0]),
-            y: item[1]
-          })
-          // console.log(x)
-        })*/
-    data.forEach((item) => {
-      test_series[0].data.push({
-        x: item[0],
-        y: item[1]
-      })
-      // console.log(x)
-    })
-    // console.log(test_series)
-  } catch (e) {
-    console.log(e)
-  } finally {
-    // chartLoading.value = false
-  }
-}
-
-async function initPrice() {
-  try {
-    // loading.value = true
-    const val = price?.value?.price_last
-    await getLastPrices()
-    await getUpPrice()
-    await setIntervalGetAllPrice()
-    // console.log('runhome')
-    if (val !== price?.value?.price_last) {
-      update()
-      /*      key.value++
-            key.value++*/
-    }
-    /*    price.value = data
-        lastPrice.value = dataLast*/
-    goldVal.value = 0
-    // console.log(price?.value.price_last)
-    if (userStore.isFirst) {
-      const timer = setInterval(function () {
-        update()
-        // if (current == end) {
-        userStore.isFirst = false
-        clearInterval(timer)
-        // }
-      }, 100)
-    } else {
-      goldVal.value = price.value?.price_last
-    }
-    // console.log(series.value)
-  } catch (e) {
-    console.log(e)
-  } finally {
-    // loading.value = false
-  }
-}
-
-async function initProductInventory() {
-  try {
-    // loading.value = true
-
-    // let { rows } = await getProductInventory()
-    // fundStore.myFunds
-    // productInventorys.value = fundStore.myFunds?.rows
-    productInventorys.value = items.value.sort((a, b) => {
-      if (a.wallet?.gold ?? 0 < b.wallet?.gold ?? 0)
-        return -1
-      if (a.wallet?.gold ?? 0 > b.wallet?.gold ?? 0)
-        return 1
-      return 0
-    })
-    // console.log(productInventorys.value)
-  } catch (e) {
-    console.log(e)
-  } finally {
-    // loading.value = false
   }
+  handlers[banner.typeClick]?.()
 }
 
+// Lifecycle
 onMounted(async () => {
   try {
     loading.value = true
-    await initTable()
-    await initProductInventory()
-    // await initChart()
-    await initPrice()
-    await fetchPrices()
-    await initBanners()
-    update()
-  } catch (e) {
-    console.log(e)
+    await Promise.all([
+      loadFunds(),
+      getLastPrices(),
+      getUpPrice(),
+      fetchPrices(),
+      setIntervalGetAllPrice(),
+      loadBanners()
+    ])
+
+    // شروع آپدیت قیمت
+    const updateInterval = setInterval(() => {
+      odometerKey.value++
+    }, 1000)
+
+    onUnmounted(() => {
+      clearInterval(updateInterval)
+      stopPriceInterval()
+    })
+  } catch (error) {
+    console.error('Initialization error:', error)
   } finally {
     loading.value = false
   }
 })
-
-onUnmounted(() => {
-  stopPriceInterval()
-})
-
-
-const showLogoutConfirm = ref<boolean>()
-
-async function logout() {
-  logoutLoading.value = true
-  // baseConfirm('آیا از حساب کاربری خارج می شوید؟',async () => {
-  userStore.userInfo = undefined
-  walletStore.walletInfo = undefined
-  /*  userStore.$reset()
-  walletStore.$reset()*/
-  removeToken()
-  await router.push({name: 'login'})
-  logoutLoading.value = true
-  window.location.reload()
-  // console.log('salam')
-  // })
-}
-
-async function openGoldModal() {
-  Modal.confirm({
-    title: `در این قسمت مجموع کل وزن طلای آبشده (${(walletStore.walletInfo?.gold ?? 0)?.toFixed(3)}) + ارزش دارایی ها (${(walletStore.walletInfo?.count_gold_wallets ?? 0)?.toFixed(3)} ) را مشاهده میفرمایید.`,
-    okText: 'متوجه شدم',
-    centered: true,
-    cancelButtonProps: {style: {display: 'none'}},
-  })
-}
-
-async function openRialModal() {
-  Modal.confirm({
-    title: `در این قسمت مجموع کیف پول ریالی (${usePrice(walletStore?.walletInfo?.count_cash_wallet ?? 0)}) + معادل ریالی محصولات (${usePrice(walletStore?.walletInfo?.count_cash_wallets ?? 0)} ) را مشاهده میفرمایید.`,
-    okText: 'متوجه شدم',
-    centered: true,
-    cancelButtonProps: {style: {display: 'none'}},
-  })
-}
 </script>
 
 <style lang="less">
-
 .odometer {
   font-size: 60px;
-  //margin: 200px 0;
   text-align: center;
   width: 100%;
   animation-duration: 3s;
 }
 
 label:focus-within {
-  box-shadow: none !important
+  box-shadow: none !important;
 }
 
-.chart-container {
-  width: 100%;
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  display: flex;
-}
-
-apexchart {
-  width: 100% !important;
-  height: 100% !important;
-  padding: 0 !important;
-  margin: 0 !important;
-}
-
-/* بنر اسلایدر — ظاهر و نقطه‌های pagination مشابه نمونه */
 .banner-swiper {
   --swiper-pagination-bottom: 0.75rem;
 
-  .swiper-slide {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
   .swiper-pagination-bullet {
     width: 0.5rem;
     height: 0.5rem;
     background: rgba(0, 0, 0, 0.35);
     opacity: 1;
-    transition: background 0.2s;
   }
 
   .swiper-pagination-bullet-active {
     background: #fff;
   }
 }
-</style>
-
-<script setup lang="ts">
-</script>
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/views/base/home/index_old3.vue b/src/views/base/home/index_old3.vue
new file mode 100644
index 0000000..d393bf5
--- /dev/null
+++ b/src/views/base/home/index_old3.vue
@@ -0,0 +1,1161 @@
+<template>
+  <div class=" mt-20 ">
+
+    <!--    <div class="flex gap-7 overflow-x-scroll px-5">
+          <ProductInventory v-for="item in productInventorys" :ProductItem="item" class="shadow-lg my-5" :key="item.id"></ProductInventory>
+        </div>-->
+    <div>
+      <div
+          v-if="userStore.userInfo && !loading"
+          class="bg-white w-screen md:w-auto h-fit px-5 m-[-1px]"
+      >
+        <div
+            v-if="limitedPrice !== undefined && userStore?.userInfo.trade_active !== 1"
+            class="text-red text-xs flex gap-1 items-center justify-center mb-2"
+        >
+          <Icon icon="vuesax-linear:info-circle" size="16"/>
+          حداقل مبلغ اولیه برای ثبت سفارش
+          {{ usePriceWithoutType(limitedPrice.value as number ?? 0) }} ریال می باشد.
+        </div>
+
+        <!--        <div class="bg-white">
+          <MySlider v-if="cardItems.length > 0" :items="cardItems" class=" pb-[20vh] "
+                    style="touch-action: none" />
+        </div>-->
+        <!--        <div class="bg-gradient-to-l mt-3 p-1   shadow-lg  from-primary rounded-lg p-px  to-transparent ">-->
+        <div class="  p-1 shadow-lg from-primary rounded-lg p-px to-transparent" :class="getConfigApp('name')=='garoosi'?'mt-0':'mt-5'">
+          <div v-if="getConfigApp('name')=='garoosi'"  class="flex justify-between px-2 mb-2  ">
+            <div class="flex gap-1">
+              <div >دارایی طلایی:</div>
+              <div class="font-bold">{{ (userStore?.userInfo?.wallet?.count_gold ?? 0).toFixed(3) }}گرم</div>
+            </div>
+            <div class="flex gap-1">
+              <div>دارایی ریالی:</div>
+              <div class="font-bold">{{
+                  usePriceWithoutType(userStore?.userInfo?.wallet?.count_cash ?? 0)
+                }}ریال</div>
+            </div>
+          </div>
+          <div class="p-2  py-3 rounded-lg bg-tertiary">
+            <div class="flex justify-between ">
+              <!--              <div
+                                class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
+                                style="text-align: -webkit-center"
+                                @click="router.push({ name: 'buyProduct', query: { state: 'sell' } })"
+                            >
+                              <div
+                                  class="rounded-full w-[42px] h-[42px] bg-primary flex items-center justify-center"
+                                  style="border: solid 1px #0A1B37"
+
+                              >
+                                <Icon class="text-tertiary" icon="vuesax-linear:money-send" />
+                              </div>
+                              <div class="text-primary">فروش</div>
+                            </div>-->
+              <div
+                  class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
+                  style="text-align: -webkit-center"
+                  @click="router.push({ name: 'buyProduct' })"
+              >
+                <div
+                    class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
+                    style="border: solid 1px #0A1B37"
+
+                >
+                  <Icon class="text-tertiary" icon="vuesax-linear:money-receive"/>
+                </div>
+                <div class="text-primary">خرید و فروش</div>
+              </div>
+
+              <div
+                  class="text-center w-full flex-flex-col items-center home_appear_fade_in_down"
+                  style="text-align: -webkit-center"
+                  @click="router.push({ name: 'wallet', query: { state: 'deposit' } })"
+              >
+                <div
+                    class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
+                    style="border: solid 1px #0A1B37"
+
+                >
+                  <Icon class="text-tertiary" icon="vuesax-linear:card-add"/>
+                </div>
+                <div v-if="getConfigApp('name')=='garoosi'" class="text-primary">واریز و برداشت</div>
+                <div v-else class="text-primary">واریز نقدی</div>
+              </div>
+
+              <div
+                   class="text-center w-full flex-flex-col items-center home_appear_fade_in_up"
+                   style="text-align: -webkit-center"
+                   @click="openWholeBalanceVisible()"
+              >
+                <div
+                    class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center "
+                    style="border: solid 1px #0A1B37"
+                >
+                  <Icon class="text-tertiary" icon="vuesax-linear:receipt-item"/>
+                </div>
+                <div class="text-primary">موجودی</div>
+              </div>
+              <div v-if="getConfigApp('name')=='garoosi'"
+                   class="text-center w-full flex-flex-col items-center home_appear_fade_in_down"
+                   style="text-align: -webkit-center"
+                   @click="shareCode()"
+              >
+                <div
+                    class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
+                    style=" border: solid 1px #0A1B37"
+
+                >
+                  <Icon class="text-tertiary font-bold" icon="vuesax-linear:share"/>
+                </div>
+                <div class="text-primary">دعوت از دوستان</div>
+              </div>
+              <div v-else
+                   class="text-center w-full flex-flex-col items-center home_appear_fade_in_down"
+                   style="text-align: -webkit-center"
+                   @click="router.push({ name: 'fund' })"
+              >
+                <div
+                    class="rounded-full w-[50px] h-[50px] bg-primary flex items-center justify-center"
+                    style=" border: solid 1px #0A1B37"
+
+                >
+                  <Icon class="text-tertiary font-bold" icon="vuesax-linear:cup"/>
+                </div>
+                <div class="text-primary">دارایی ها</div>
+              </div>
+
+            </div>
+          </div>
+          <!--            <ADivider></ADivider>-->
+          <div>
+            <!--            <div @click="router.push({ name: 'fund' })">-->
+            <div v-if="getConfigApp('name')=='garoosi'" class="bg-primary rounded-lg p-2 py-1 mt-2">
+              <div class="p-2">
+                <div
+                    v-if="userStore.userInfo?.referral_id"
+                    class="text-tertiary font-bold w-full text-center flex justify-between gap-2 items-center"
+                >
+                  کد معرف:
+                  <div class="flex gap-2">
+                    <div class="mr-2">{{ userStore.userInfo?.referral_id }}</div>
+                    <!--            <BasicIcon icon="vuesax-linear:copy" color="#2563EB" class="cursor-pointer" size="18"
+                                           @click.stop="copyCode()" />
+                                &lt;!&ndash;          vuesax-linear:hierarchy-3&ndash;&gt;
+                                <BasicIcon icon="vuesax-linear:share" color="#2563EB" class="cursor-pointer" size="18"
+                                           @click.stop="shareCode()" />-->
+                  </div>
+                </div>
+                <div class="w-full flex gap-2 mt-1">
+                  <BasicButton
+                      icon="vuesax-linear:share"
+                      size="small"
+                      class="flex-1 !bg-primary !border-tertiary !text-tertiary "
+                      icon-size="18"
+                      @click.stop="shareCode()"
+                  >
+                    {{ getConfigApp('name') == 'garoosi' ? 'دعوت از دوستان' : ' اشتراک گذاری' }}
+                  </BasicButton>
+                  <BasicButton
+                      icon="vuesax-linear:copy"
+                      size="small"
+                      class="flex-1 !bg-primary !border-tertiary !text-tertiary"
+                      icon-size="18"
+                      @click.stop="copyCode()"
+                  >
+                    رونوشت
+                  </BasicButton>
+                </div>
+              </div>
+
+            </div>
+            <div v-else class="bg-primary rounded-lg p-2 py-3 mt-2">
+              <div class="flex justify-center text-tertiary w-full z-20">
+                محصولات:
+                <div class="text-l mr-2 font-bold">{{ userStore?.userInfo?.wallet?.count_product ?? 0 }}عدد</div>
+              </div>
+              <div class="flex mt-2 justify-center text-tertiary w-full z-20">
+                دارایی طلایی:
+                <div class="text-l mr-2 font-bold">{{ (userStore?.userInfo?.wallet?.count_gold ?? 0).toFixed(3) }}گرم
+                </div>
+                <BasicIcon @click="openGoldModal" icon="vuesax-linear:info-circle" size="18" color="tertiary"/>
+              </div>
+              <div class="flex mt-2 justify-center text-tertiary w-full z-20">
+                دارایی ریالی:
+                <div class="text-l mr-2 font-bold">{{
+                    usePriceWithoutType(userStore?.userInfo?.wallet?.count_cash ?? 0)
+                  }}ریال
+                </div>
+                <BasicIcon @click="openRialModal" icon="vuesax-linear:info-circle" size="18" color="tertiary"/>
+              </div>
+            </div>
+            <!--              <div class="flex  justify-center mt-2 w-full z-20">
+                            دارایی ریالی:
+                            <div class="text-l mr-4 font-bold">{{ usePriceWithoutType(walletStore.walletInfo?.count_cash ?? 0) }}ریال</div>
+                          </div>-->
+            <!--              <div class="flex justify-center mt-2 w-full z-20">
+                            <BasicInfoItem
+                                title="دارایی ریالی"
+                                is-line
+                                :info="`در این قسمت مجموع کیف پول ریالی (${usePrice(walletStore?.walletInfo?.count_cash_wallet ?? 0) }) + معادل ریالی محصولات (${ usePrice(walletStore?.walletInfo?.count_cash_wallets ?? 0)} ) را مشاهده میفرمایید.`"
+                                infoHead="مجموع کل دارایی ریالی"
+                                :value="usePriceWithoutType(walletStore.walletInfo?.count_cash ?? 0) + ' ریال'"
+                            />
+                          </div>-->
+          </div>
+          <!--            <div class="flex justify-between">
+                        <div class="text-center font-bold">دارایی شما</div>
+                        <div class="flex items-center gap-2 mr-4">
+                          <span class="text-base font-bold">{{ usePriceWithoutType(walletStore.walletInfo?.cash ?? 0) }}</span>
+                          <span class="text-xs text-base">ریال</span>
+                        </div>
+                        <div class="flex items-center gap-2 ml-4">
+                          <span class="text-base font-bold">{{ walletStore.walletInfo?.gold_sum.toFixed(3) }}</span>
+                          <span class="text-xs text-base">گرم</span>
+                        </div>
+                      </div>-->
+          <!--            <div class="flex justify-between items-center ">
+                        <div class="text-sm">
+                          موجودی کیف پول شما:
+                        </div>
+                        <div class="flex items-center gap-2">
+                          <span class="text-base font-bold">{{ usePrice(walletStore.walletInfo?.cash ?? 0) }}</span>
+                        </div>
+                      </div>
+                      <div class="flex justify-between items-center ">
+                        <div class="text-sm">
+                          موجودی کیف طلای شما:
+                        </div>
+                        <div class="flex items-center gap-2">
+                          <span class="text-base font-bold">{{ walletStore.walletInfo?.gold }}</span>
+                          <span class="text-xs text-gray-500">گرم</span>
+                        </div>
+                      </div>-->
+          <!--            <div class="flex justify-between items-center ">
+                        <div class="text-sm">
+                          ارزش کل طلا های شما:
+                        </div>
+                        <div class="flex items-center gap-2">
+                          <span class="text-base font-bold">{{ walletStore.walletInfo?.gold_sum }}</span>
+                          <span class="text-xs text-gray-500">گرم</span>
+                        </div>
+                      </div>-->
+          <!--            <div class="flex justify-between items-center ">
+                        <div class="text-sm">
+                        </div>
+                        <div class="flex  items-center gap-2">
+                          <div v-if="walletStore.walletInfo?.gold_sum*goldVal">
+                            <Vue3Odometer
+                              :value="walletStore.walletInfo?.gold_sum*goldVal"
+                              class="o-text !text-base font-bold"
+                              style="font-family: iran-sans; direction: ltr"
+                              v-if="key % 2 === 0"
+                            />
+                          </div>
+
+                          <span class="text-xs text-gray-500">ریال</span>
+                        </div>
+                      </div>-->
+        </div>
+        <div v-if="userStore.getValueByKey('closed_message') && lastPrice?.goldir==0 &&  lastPrice?.price_last==0  "
+             class="bg-red-50 text-red-600 text-center font-500 py-4 px-2 mt-2 rounded-lg "
+             v-html="userStore.getValueByKey('closed_message')"
+        ></div>
+        <div
+            class="w-full relative mt-2 border-gray-200 border-1 rounded-lg py-3 flex flex-col justify-center home_appear_fade_in"
+        >
+          <div class="w-full items-center flex justify-center">
+            <div class="text-gray-600 text-[12px] ml-2">قیمت خرید از {{ useConfigStore().config.name_fa }}</div>
+            <div v-if="price" class="flex gap-1 text-xs items-center">
+              <!--              <div id="odometer" class="font-bold text-2xl odometer animated fadeIn">
+                              &lt;!&ndash;                {{ usePriceWithoutType(useCounterAnim(price.price_last) ?? 0) }}&ndash;&gt;
+                            </div>-->
+              <!--              <div id="odometer" class="odometer animated fadeIn"></div>-->
+              <div v-if="percentPriceChanged()!=0"
+                   class="bg-green-100 text-green-600 flex flex-row-reverse rounded-lg justify-between items-center gap-2 px-3"
+                   :class="percentPriceChanged()>=0?'bg-green-100 text-green-600':'bg-red-100 text-red-600'">
+                <div dir="ltr">{{ useTowDecimal(percentPriceChanged()) }}%</div>
+                <div>
+                  <icon v-if="percentPriceChanged()<0" size="15px" icon="vuesax-linear:received" color="red-600"></icon>
+                  <icon v-else size="15px" icon="vuesax-linear:send" color="green-600"></icon>
+                </div>
+              </div>
+              <Vue3Odometer
+                  :value="goldVal"
+                  class="o-text !text-xl font-bold"
+                  style="font-family: iran-sans; direction: ltr"
+                  v-if="key % 2 === 0"
+              />
+              ریال
+            </div>
+          </div>
+        </div>
+        <!--        <div class="flex mt-5 gap-1 bg-primary text-tertiary cursor-pointer font-bold justify-center rounded-lg py-5"
+                     @click="router.push({ name: 'buyProduct' })">
+                  <div>خرید و فروش</div>
+                </div>-->
+        <div
+            v-if="config.config.name === 'garoosi' && banners?.length > 0"
+            class="w-full relative mt-2 flex flex-col justify-center home_appear_fade_in overflow-hidden rounded-lg"
+        >
+          <div class="w-full aspect-[2.8/1] min-h-[10rem] max-h-[14rem]">
+            <swiper
+                :modules="bannerSwiperModules"
+                :slides-per-view="1"
+                :space-between="6"
+                :autoplay="{ delay: 4000, disableOnInteraction: false }"
+                :pagination="{ clickable: true }"
+                class="banner-swiper h-full w-full rounded-lg"
+            >
+              <swiper-slide v-for="(banner, index) in banners" :key="index" class="!h-full">
+                <img
+                    v-if="banner.show"
+                    class="banner-img w-full h-full object-cover rounded-lg block"
+                    :src="banner.icon"
+                    :alt="banner.caption || ''"
+                    @click="handleBannerClick(banner)"
+                    :style="(banner.link || banner.typeClick=='share') ? 'cursor: pointer;' : ''"
+                />
+              </swiper-slide>
+            </swiper>
+          </div>
+        </div>
+
+
+        <!--        <div class="mt-10 font-bold home_appear_fade_in" @click="update">
+                  نوسانات قیمت هر گرم طلای 18 عیار
+                </div>-->
+
+        <!--        <a-spin :spinning="chartLoading" class="relative">
+                  <div ref="target" class="absolute"></div>
+                  <div v-if="!chartLoading" id="chart" class="pb-20 mt-7 overflow-x-auto">
+                    &lt;!&ndash;            <apexchart v-if="targetIsVisible" :options="chartOptions" :series="test_series"
+                                           :style="`width: ${chartWidth}`"
+                                           height="350"
+                                           type="candlestick"></apexchart>&ndash;&gt;
+                  </div>
+                </a-spin>-->
+        <!--        <a-spin :spinning="chartLoading" >-->
+        <!--          <div ref="target" class="absolute"></div>-->
+        <!--          <div id="chart" class="mt-7">-->
+        <div class="bg-gray-50 w-full flex justify-evenly rounded-lg py-4 mt-4 h-[15rem]">
+          <div class="w-full text-center pt-2">
+            <a-radio-group v-model:value="value" button-style="solid">
+              <a-radio-button value="a" @click="updateData('DAILY')">24 ساعت اخیر</a-radio-button>
+              <a-radio-button value="b" @click="updateData('WEEKLY')">هفته گذشته</a-radio-button>
+              <a-radio-button value="c" @click="updateData('MONTHLY')">ماه گذشته</a-radio-button>
+            </a-radio-group>
+            <div id="chart-timeline">
+              <apexchart
+                  type="area"
+                  height="200"
+                  ref="chart"
+                  :options="priceChartOptions"
+                  :series="priceChartSeries"
+              ></apexchart>
+            </div>
+          </div>
+        </div>
+        <div class=" w-full flex justify-evenly rounded-lg py-2 home_appear_fade_in mt-6 pb-45">
+          <div class="text-center w-full">
+            <div>بالاترین قیمت امروز</div>
+            <div v-if="lastPrice" class="flex flex-col items-center mt-3">
+              <div class="text-green-600 flex gap-1 text-xs items-center">
+                <div class="text-base">{{ usePriceWithoutType(price?.buy ?? 0) }}</div>
+                ریال
+              </div>
+            </div>
+          </div>
+          <a-divider class="bg-gray-200 !h-auto !my-2" type="vertical"/>
+          <div class="text-center w-full">
+            <div>پایین ترین قیمت امروز</div>
+            <div class="flex w-full mt-3 justify-evenly">
+              <div v-if="lastPrice" class="flex flex-col items-center">
+                <div class="text-red-600 flex gap-1 text-xs items-center">
+                  <div class="text-base">{{ usePriceWithoutType(price?.sell ?? 0) }}</div>
+                  ریال
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <div v-else class="bg-white w-screen md:w-auto h-[80vh] px-5 m-[-1px] flex justify-center ">
+        <HomeSkeleton class="w-full"/>
+      </div>
+      <!--      <div class="relative pt-15 overflow-hidden ">-->
+      <!--        <div class="absolute left&#45;&#45;12 top-0">-->
+      <!--          <img :src="image">-->
+      <!--        </div>-->
+      <!--        <div class="bg-primary pb-30"-->
+      <!--        style="background: linear-gradient(to bottom, #fff,#fff, #0A1B37, #0A1B37);"-->
+      <!--        >-->
+      <!--          <div class=" text-tertiary text-2xl pt-6 pr-5 pl-50" style="font-size: 26px;font-weight: 600; color: #0A1B37" >ارسال کالا بعد از ثبت سفارش</div>-->
+      <!--          <div class="pr-5 pl-8 pt-10  text-tertiary ">میتوانید با خرید محصولات بعد از ثبت سفارش درخواست ارسال را-->
+      <!--            ثبت کرده و زیر 24 ساعت خرید خود را دریافت کنید-->
+      <!--          </div>-->
+      <!--        </div>-->
+      <!--      </div>-->
+    </div>
+    <div
+        :class="y > 50 ? 'bg-white shadow opacity-95' : ''"
+        class="px-4 py-2 top-0 z-5 wrap-fix background-color-transition"
+    >
+      <div class="flex justify-between my-2">
+        <div class="flex items-center gap-2" @click.stop="router.push({ name: 'user' })">
+          <!--          <img :src="testimg" alt="" class="w-[24px] h-[24px]">-->
+          <div
+              class="z-100000 rounded-full border-1"
+              :class="y > 50 ? 'text-primary border-primary' : 'text-primary border-primary'"
+          >
+            <Icon icon="vuesax-linear:user" size="20"/>
+          </div>
+          <div :class="y > 50 ? 'text-primary' : 'text-primary'" class="color-transition font-bold">
+            {{ userStore.userInfo?.name }}
+          </div>
+        </div>
+        <Icon
+            :color="y > 50 ? '#0A1B37' : '#0A1B37'"
+            class="color-transition"
+            icon="vuesax-linear:logout"
+            @click="showLogoutConfirm = true"
+        />
+      </div>
+    </div>
+    <DialogVant v-model:show="showLogoutConfirm" :closeOnClickOverlay="false" :timeOut="-1">
+      <!--      <template v-slot:img>
+              <img :src="registerDelayImage" alt="" class="opacity-80">
+            </template>-->
+
+      <template v-slot:title>
+        <div class="flex flex-col items-center">
+          <DotLottieVue
+              class="w-11rem h-11rem"
+              autoplay
+              src="https://lottie.host/129cf3a1-df84-4758-a856-58c133ae6013/R5RqclXA8G.json"
+          />
+          <div class="p-5 text-sm">آیا از خروج خود اطمینان دارید؟</div>
+        </div>
+      </template>
+
+      <template v-slot:button>
+        <div class="text-center text-red flex items-center justify-center" @click="logout">
+          <a-spin :spinning="logoutLoading" size="small"> خروج</a-spin>
+        </div>
+        <div class="text-center" @click="showLogoutConfirm = false">انصراف</div>
+      </template>
+    </DialogVant>
+  </div>
+  <BasicActionSheet v-model:show="wholeBalanceVisible">
+    <div class="pb-20">
+      <div>
+        <div class="w-full text-center font-bold">موجودی ها</div>
+        <div class="h-30vh overflow-y-auto">
+          <div class="mt-5">
+            <BasicInfoItem
+                class="flex justify-between"
+                title="مجموعه کل دارایی طلایی"
+                is-line
+                :info="`در این قسمت مجموع کل وزن طلای آبشده (${(walletStore.walletInfo?.gold ?? 0)?.toFixed(3)}) + ارزش دارایی ها (${(walletStore.walletInfo?.treasure_sum ?? 0)?.toFixed(3)} ) را مشاهده میفرمایید.`"
+                infoHead="مجموع کل دارایی طلایی"
+                :value="parseFloat((walletStore.walletInfo?.gold_sum ?? 0).toFixed(2)) + ' گرم'"
+            />
+            <!--            <a-divider class="!my-1" />
+                        <BasicInfoItem
+                          class="flex justify-between"
+                          title="میزان طلای آبشده"
+                          is-line
+                          :value="parseFloat((walletStore.walletInfo?.gold ?? 0)?.toFixed(3)) + ' گرم'"
+                        />
+                        <a-divider class="!my-1" />
+                        <BasicInfoItem
+                          class="flex justify-between"
+                          title="ارزش گنج ها"
+                          is-line
+                          :value="parseFloat((walletStore.walletInfo?.treasure_sum ?? 0)?.toFixed(3)) + ' گرم'"
+                        />-->
+            <a-divider class="!my-1"/>
+            <BasicInfoItem
+                class="flex justify-between"
+                title="دارایی کیف پول ریالی"
+                is-line
+                :value="usePrice(walletStore.walletInfo?.cash ?? 0)"
+            />
+            <a-divider class="!my-1"/>
+            <BasicInfoItem
+                class="flex justify-between"
+                title="دارایی کیف پول طلایی"
+                is-line
+                :value="(walletStore.walletInfo?.count_gold_wallet ?? 0) + ' گرم'"
+            />
+            <a-divider class="!my-1"/>
+            <BasicInfoItem
+                v-if="nameProject === 'goldsun'"
+                class="flex justify-between"
+                title="دارایی کیف پول نقره"
+                is-line
+                :value="(walletStore.walletInfo?.count_silver ?? 0) + ' گرم'"
+            />
+            <a-divider v-if="nameProject === 'goldsun'" class="!my-1"/>
+            <BasicInfoItem
+                v-if="nameProject === 'goldsun'"
+                class="flex justify-between"
+                title="دارایی کیف پول مس"
+                is-line
+                :value="(walletStore.walletInfo?.count_copper ?? 0) + ' گرم'"
+            />
+            <a-divider v-if="nameProject === 'goldsun'" class="!my-1"/>
+
+            <BasicInfoItem
+                class="flex justify-between"
+                title="معادل ریالی مجموع دارایی ها"
+                is-line
+                :value="usePrice(walletStore.walletInfo?.count_cash_total ?? 0)"
+            />
+            <a-divider class="!my-1"/>
+            <!--            <BasicInfoItem class="flex justify-between" title="دارایی کیف پول(به گرم)" is-line
+                           :value="((walletStore.walletInfo?.cash?? 0) / (goldVal?? 0)).toFixed(2)+ ' گرم'" />
+            <a-divider class="!my-1" />-->
+            <!--            <BasicInfoItem
+                            class="flex justify-between"
+                            title="ارزش کل دارایی شما"
+                            is-line
+                            :value="
+                            usePrice(
+                              (
+                                (walletStore.walletInfo?.gold_sum ?? 0) * (goldVal ?? 0) +
+                                (walletStore.walletInfo?.cash ?? 0)
+                              ).toFixed(0)
+                            )
+                          "
+                        />-->
+          </div>
+        </div>
+      </div>
+    </div>
+  </BasicActionSheet>
+  <BasicModal v-model:visible="showTextBanner" :custom-footer="true" destroyOnClose="true">
+    <div class="max-h-[54vh]">
+      <div class="w-full ql-editor " v-html="TextBanner">
+      </div>
+    </div>
+  </BasicModal>
+  <BasicModal v-model:visible="showShare" :custom-footer="true">
+    <div class="p-2">
+      <div
+          v-if="userStore.userInfo?.referral_id"
+          class="text-primary font-bold w-full text-center flex justify-between gap-2 items-center"
+      >
+        کد معرف:
+        <div class="flex gap-2">
+          <div class="mr-2">{{ userStore.userInfo?.referral_id }}</div>
+          <!--            <BasicIcon icon="vuesax-linear:copy" color="#2563EB" class="cursor-pointer" size="18"
+                                 @click.stop="copyCode()" />
+                      &lt;!&ndash;          vuesax-linear:hierarchy-3&ndash;&gt;
+                      <BasicIcon icon="vuesax-linear:share" color="#2563EB" class="cursor-pointer" size="18"
+                                 @click.stop="shareCode()" />-->
+        </div>
+      </div>
+      <div class="w-full flex gap-2 mt-1">
+        <BasicButton
+            icon="vuesax-linear:share"
+            size="small"
+            class="flex-1"
+            icon-size="18"
+            @click.stop="shareCode()"
+        >
+          {{ getConfigApp('name') == 'garoosi' ? 'دعوت از دوستان' : ' اشتراک گذاری' }}
+        </BasicButton>
+        <BasicButton
+            icon="vuesax-linear:copy"
+            size="small"
+            class="flex-1"
+            icon-size="18"
+            @click.stop="copyCode()"
+        >
+          رونوشت
+        </BasicButton>
+      </div>
+    </div>
+  </BasicModal>
+</template>
+
+<script lang="tsx" setup>
+import img from '@/assets/img/home_ly1.svg'
+import Icon from '@/components/BasicPacks/BasicIcon.vue'
+import {usePrice, usePriceWithoutType, useTowDecimal} from '../../../utils/usePrice'
+import {computed, onMounted, onUnmounted, ref, watch} from 'vue'
+import router from '@/router'
+import * as echarts from 'echarts'
+import {useIntersectionObserver, useWindowScroll} from '@vueuse/core'
+import {loading, removeToken} from '@/utils'
+import {useUserStore} from '@/store/userStore'
+import {useWalletStore} from '@/store/walletStore'
+import DialogVant from '@/components/DialogVant.vue'
+import {getAllPrices, getChart} from '@/api/home'
+import Vue3Odometer from 'vue3-odometer'
+import 'odometer/themes/odometer-theme-default.css'
+import 'quill/dist/quill.core.css';
+
+import HomeSkeleton from '@/views/base/home/components/HomeSkeleton.vue'
+import {
+  getLastPrices,
+  getUpPrice,
+  lastPrice,
+  percentPriceChanged,
+  price,
+  setIntervalGetAllPrice,
+  stopPriceInterval
+} from '@/utils/price'
+import {DotLottieVue} from '@lottiefiles/dotlottie-vue'
+import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
+import BasicInfoItem from '@/components/BasicPacks/BasicInfoItem.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import type {PInventory} from '@/models/products'
+import type {Fund} from '@/models/fund'
+import type {TableOutput} from '@/models/table'
+import {useFundUserStore} from '@/store/fundStore'
+import {message, Modal} from "ant-design-vue";
+import {useConfigStore} from "@/store/configStore";
+import {Swiper, SwiperSlide} from 'swiper/vue'
+import {Autoplay, Pagination} from 'swiper/modules'
+import 'swiper/swiper-bundle.css'
+import 'swiper/css/pagination'
+import {getConstByKey} from '@/api/const'
+import type {IBenefits} from "@/models/banner";
+import BasicModal from "@/components/BasicPacks/BasicModal.vue";
+import {getConfigApp} from "@/utils/config";
+import BasicButton from "@/components/BasicPacks/BasicButton.vue";
+
+const bannerSwiperModules = [Autoplay, Pagination]
+const nameProject = useConfigStore().config.name
+const userStore = useUserStore()
+const walletStore = useWalletStore()
+const wholeBalanceVisible = ref<boolean>(false)
+const {x, y} = useWindowScroll()
+const series = ref<Chart[]>([{data: []}])
+const key = ref<number>(0)
+const main = ref(null)
+const logoutLoading = ref(false)
+const productInventorys = ref<PInventory[] | undefined>()
+const value = ref<string>('a')
+const items = ref<Fund[]>([])
+const tableOutput = ref<TableOutput<Fund> | null>(null)
+const inventory = ref<number>(0)
+const sumGold = ref<number>(0)
+const fundStore = useFundUserStore()
+const config = useConfigStore()
+const showTextBanner = ref<boolean>(false)
+const showShare = ref<boolean>(false)
+const TextBanner = ref<string>('')
+
+function shareCode() {
+  // nextTick(() => {
+  const val = `⭐️الان طلا بخر؛ آخر ماه سودشو ببر!
+با خرید طلای آبشده در مقدارهای کم ولی مستمر، سود بیشتری ببر!
+
+این دعوت نامه از طرف "${userStore.userInfo?.name}" عزیز برای شما ارسال شده تا شما هم از بازار طلای  ${nameProject} جا نمونید.
+روی لینک زیر کلیک کنید و ثبت نام خود را تکمیل کنید.
+
+${window.location.hostname}/login?id=${userStore.userInfo?.referral_id}`
+  navigator.share({
+    title: nameProject,
+    text: val
+  })
+  // message.info('کد رونوشت شد')
+  // })
+}
+
+function copyCode() {
+  // nextTick(() => {
+  const val = userStore.userInfo?.referral_id
+  console.log(val)
+  navigator.clipboard.writeText(val)
+  message.info('کد رونوشت شد')
+  // })
+}
+
+async function initTable() {
+  try {
+    loading.value = true
+    tableOutput.value = fundStore.myFunds ?? await fundStore.getMyFund() ?? null
+    items.value.push(...tableOutput.value?.rows ?? [])
+  } catch (e) {
+    console.log(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+const banners = ref<Array<IBenefits>>([])
+
+async function initBanners() {
+  try {
+    const response = await getConstByKey('header_banner')
+    if (response == null) return
+
+    let list: Array<{ icon: string; show: boolean; caption: string | null; link: string | null }> = []
+
+    // پاسخ مستقیم به‌صورت رشتهٔ JSON
+    if (typeof response === 'string') {
+      list = JSON.parse(response)
+    }
+    // پاسخ شیء با فیلد value (یک Const تکی)
+    else if (typeof response === 'object' && !Array.isArray(response) && 'value' in response) {
+      const val = (response as { value: string | unknown }).value
+      list = typeof val === 'string' ? JSON.parse(val) : (val as typeof list)
+    }
+    // پاسخ آرایهٔ Const با فیلد value
+    else if (Array.isArray(response) && response.length > 0) {
+      const first = response[0] as { value?: string | unknown; icon?: string }
+      if (first.value !== undefined && first.value !== null) {
+        list = typeof first.value === 'string' ? JSON.parse(first.value) : (first.value as typeof list)
+      } else if (first.icon !== undefined) {
+        list = response as typeof list
+      }
+    }
+
+    banners.value = Array.isArray(list) ? list.filter((banner: any) => banner.show === true) : []
+  } catch (e) {
+    console.log('Error loading banners:', e)
+  }
+}
+
+function handleBannerClick(banner: IBenefits) {
+  if (banner.typeClick == 'share') {
+    showShare.value = true
+    return;
+  }
+  if (banner.typeClick == 'modal') {
+    if (!banner.modalText) return
+    TextBanner.value = banner.modalText
+    showTextBanner.value = true
+    return;
+  }
+  if (banner.typeClick == 'link') {
+    if (!banner.link) return
+
+    if (banner.link.startsWith('http://') || banner.link.startsWith('https://')) {
+      window.open(banner.link, '_blank')
+    } else {
+      router.push(banner.link)
+    }
+  }
+
+}
+
+onUnmounted(() => {
+  stopPriceInterval()
+})
+
+const goldVal = ref<number | undefined>()
+
+function openWholeBalanceVisible() {
+  items.value.forEach(x => {
+    if (x.title !== 'آبشده نقدی')
+      inventory.value += x?.wallet?.gold ?? 0
+  })
+  wholeBalanceVisible.value = true
+}
+
+function sumOfGold() {
+  items.value.forEach(x => {
+    if (x.title !== 'آبشده نقدی')
+      return sumGold.value += x?.wallet?.gold ?? 0
+  })
+}
+
+function update() {
+  setInterval(() => {
+    goldVal.value = lastPrice?.value.price_last
+  }, 500)
+}
+
+const target = ref(null)
+const targetIsVisible = ref(false)
+
+const isHidden = ref<boolean>(false)
+
+const {stop} = useIntersectionObserver(target, ([{isIntersecting}], observerElement) => {
+  targetIsVisible.value = isIntersecting
+  console.log('saaaaa', targetIsVisible.value)
+})
+
+watch(main, (n) => {
+  if (main.value !== null) {
+    // console.log('saaaa')
+    const echart = echarts.init(main.value, null, {
+      renderer: 'candlestick'
+    })
+    echart.setOption({
+      xAxis: {
+        data: dates.value.values,
+        show: true
+      },
+      yAxis: {
+        show: false,
+        scale: true
+      },
+      series: [
+        {
+          type: 'candlestick',
+          data: series.value
+        }
+      ]
+    })
+  }
+})
+
+//whole prices
+const priceChartSeries = ref<{ data: [number, number][] }[]>([
+  {
+    name: 'قیمت',
+    data: []
+  }
+])
+const selection = ref('DAILY')
+const chartRef = ref<ApexCharts | null>(null)
+const priceChartOptions = ref({
+  chart: {
+    id: 'نوسانات قیمت',
+    type: 'candlestick',
+    height: 200,
+    toolbar: {
+      show: false  // Disable the toolbar to remove download and other options
+    },
+    zoom: {
+      autoScaleYaxis: true
+    },
+    events: {
+      mounted(chart) {
+        chartRef.value = chart
+      }
+    }
+  },
+  grid: {
+    padding: {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0
+    },
+    yaxis: {
+      lines: {
+        show: false
+      }
+    }
+  },
+  stroke: {
+    width: 2
+  },
+  dataLabels: {
+    enabled: false,
+    // formatter: (val) => toPersianNumber(val),
+    style: {
+      fontFamily: '\'IranSans\', sans-serif'
+    }
+  },
+  yaxis: {
+    tickAmount: 8,
+    show: false,
+    title: {
+      style: {
+        fontSize: '13px',
+        fontFamily: '\'IranSans\', sans-serif',
+        fontWeight: 'bold'
+      }
+    },
+    labels: {
+      formatter: (val) => toPersianNumber(usePrice(val)),
+      style: {
+        fontSize: '13px',
+        fontFamily: '\'IranSans\', sans-serif'
+      }
+    }
+  },
+  xaxis: {
+    show: false,
+    type: 'datetime',
+    axisTicks: {
+      show: false
+    },
+    tooltip: {
+      enabled: false
+    },
+    labels: {
+      show: false,
+      rotate: -45,
+      style: {
+        fontFamily: '\'IranSans\', sans-serif'
+      }
+      // formatter: (val) => toPersianNumber(toJalaliNotime(new Date(val).toString()))
+    },
+    axisBorder: {
+      show: false
+    }
+  },
+  tooltip: {
+    x: {
+      // formatter: (val) => toPersianNumber(toJalaliNotime(new Date(val).toString()))
+      formatter: (value) => {
+        const date = new Date(value)
+        return `${date.toLocaleDateString('fa-IR')} - ${date.toLocaleTimeString('fa-IR', {
+          hour: '2-digit',
+          minute: '2-digit'
+        })}`
+      }
+    },
+    formatter: (val) => toPersianNumber(usePrice(val)),
+    style: {
+      fontFamily: '\'IranSans\', sans-serif'
+      // fontWeight: 'bold'
+    },
+    markers: {
+      show: false
+    }
+  },
+  colors: [config.config.color],
+  fill: {
+    type: 'gradient',
+    gradient: {
+      shadeIntensity: 1,
+      opacityFrom: 0.7,
+      opacityTo: 0.9,
+      stops: [0, 100]
+    }
+  }
+
+})
+const toPersianNumber = (num) => {
+  return num.toString().replace(/\d/g, (d) => '۰۱۲۳۴۵۶۷۸۹'[d])
+}
+const fetchPrices = async () => {
+  try {
+    const response = await getAllPrices()
+    const data = response.data?.prices
+    const selectedData = data[selection.value] || []
+    priceChartSeries.value[0].data = selectedData.map((item) => [item.timestamp, item.value - 1])
+    // console.log(priceChartSeries.value[0].data)
+    chartRef.value?.updateOptions({
+      series: priceChartSeries.value
+    })
+  } catch (error) {
+    console.error('خطا در دریافت داده‌ها', error)
+  }
+}
+
+const updateData = (timeline) => {
+  selection.value = timeline
+  fetchPrices()
+}
+
+const limitedPrice = computed(() => {
+  if (walletStore.limitedPrice) return walletStore?.limitedPrice[0]
+})
+
+const test_series = [
+  {
+    name: 'candle',
+    data: []
+  }
+]
+
+async function initChart() {
+  try {
+    // chartLoading.value = true
+    const data = await getChart()
+    /*    data.forEach(item => {
+          test_series[0].data.push({
+            x: toJalali(item[0]),
+            y: item[1]
+          })
+          // console.log(x)
+        })*/
+    data.forEach((item) => {
+      test_series[0].data.push({
+        x: item[0],
+        y: item[1]
+      })
+      // console.log(x)
+    })
+    // console.log(test_series)
+  } catch (e) {
+    console.log(e)
+  } finally {
+    // chartLoading.value = false
+  }
+}
+
+async function initPrice() {
+  try {
+
+    // loading.value = true
+    const val = lastPrice?.value?.price_last
+    await getLastPrices()
+    await getUpPrice()
+    await setIntervalGetAllPrice()
+    // console.log('runhome')
+    if (val !== lastPrice?.value?.price_last) {
+      update()
+      /*      key.value++
+            key.value++*/
+    }
+    /*    price.value = data
+        lastPrice.value = dataLast*/
+    goldVal.value = 0
+    // console.log(price?.value.price_last)
+    if (userStore.isFirst) {
+      const timer = setInterval(function () {
+        update()
+        // if (current == end) {
+        userStore.isFirst = false
+        clearInterval(timer)
+        // }
+      }, 100)
+    } else {
+      goldVal.value = lastPrice.value?.price_last
+    }
+    // console.log(series.value)
+  } catch (e) {
+    console.log(e)
+  } finally {
+    // loading.value = false
+  }
+}
+
+async function initProductInventory() {
+  try {
+    // loading.value = true
+
+    // let { rows } = await getProductInventory()
+    // fundStore.myFunds
+    // productInventorys.value = fundStore.myFunds?.rows
+    productInventorys.value = items.value.sort((a, b) => {
+      if (a.wallet?.gold ?? 0 < b.wallet?.gold ?? 0)
+        return -1
+      if (a.wallet?.gold ?? 0 > b.wallet?.gold ?? 0)
+        return 1
+      return 0
+    })
+    // console.log(productInventorys.value)
+  } catch (e) {
+    console.log(e)
+  } finally {
+    // loading.value = false
+  }
+}
+
+onMounted(async () => {
+  try {
+    loading.value = true
+    await initTable()
+    await initProductInventory()
+    // await initChart()
+    await initPrice()
+    await fetchPrices()
+    await initBanners()
+    update()
+  } catch (e) {
+    console.log(e)
+  } finally {
+    loading.value = false
+  }
+})
+
+onUnmounted(() => {
+  stopPriceInterval()
+})
+
+
+const showLogoutConfirm = ref<boolean>()
+
+async function logout() {
+  logoutLoading.value = true
+  // baseConfirm('آیا از حساب کاربری خارج می شوید؟',async () => {
+  userStore.userInfo = undefined
+  walletStore.walletInfo = undefined
+  /*  userStore.$reset()
+  walletStore.$reset()*/
+  removeToken()
+  await router.push({name: 'login'})
+  logoutLoading.value = true
+  window.location.reload()
+  // console.log('salam')
+  // })
+}
+
+async function openGoldModal() {
+  Modal.confirm({
+    title: `در این قسمت مجموع کل وزن طلای آبشده (${(walletStore.walletInfo?.gold ?? 0)?.toFixed(3)}) + ارزش دارایی ها (${(walletStore.walletInfo?.count_gold_wallets ?? 0)?.toFixed(3)} ) را مشاهده میفرمایید.`,
+    okText: 'متوجه شدم',
+    centered: true,
+    cancelButtonProps: {style: {display: 'none'}},
+  })
+}
+
+async function openRialModal() {
+  Modal.confirm({
+    title: `در این قسمت مجموع کیف پول ریالی (${usePrice(walletStore?.walletInfo?.count_cash_wallet ?? 0)}) + معادل ریالی محصولات (${usePrice(walletStore?.walletInfo?.count_cash_wallets ?? 0)} ) را مشاهده میفرمایید.`,
+    okText: 'متوجه شدم',
+    centered: true,
+    cancelButtonProps: {style: {display: 'none'}},
+  })
+}
+</script>
+
+<style lang="less">
+
+.odometer {
+  font-size: 60px;
+  //margin: 200px 0;
+  text-align: center;
+  width: 100%;
+  animation-duration: 3s;
+}
+
+label:focus-within {
+  box-shadow: none !important
+}
+
+.chart-container {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+
+apexchart {
+  width: 100% !important;
+  height: 100% !important;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+/* بنر اسلایدر — ظاهر و نقطه‌های pagination مشابه نمونه */
+.banner-swiper {
+  --swiper-pagination-bottom: 0.75rem;
+
+  .swiper-slide {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .swiper-pagination-bullet {
+    width: 0.5rem;
+    height: 0.5rem;
+    background: rgba(0, 0, 0, 0.35);
+    opacity: 1;
+    transition: background 0.2s;
+  }
+
+  .swiper-pagination-bullet-active {
+    background: #fff;
+  }
+}
+</style>
+
+<script setup lang="ts">
+</script>
\ No newline at end of file