Split desktop and mobile layouts with shared page data so APIs fetch once per context.

Add layout shells, desktop views, module-level page caches, and UI fixes for auth, home, wallet, transactions, address, and related pages.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/base/home/desktop/HomeDesktopView.vue

@@ -0,0 +1,17 @@
+<template>
+  <BoursecuDesktopHome v-if="layoutId === 'boursecu'" @logout="$emit('logout')" />
+  <DefaultDesktopHome v-else @logout="$emit('logout')" />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { getHomeLayoutId } from '../layouts/registry'
+import BoursecuDesktopHome from './layouts/BoursecuDesktopHome.vue'
+import DefaultDesktopHome from './layouts/DefaultDesktopHome.vue'
+
+defineEmits<{
+  logout: []
+}>()
+
+const layoutId = computed(() => getHomeLayoutId())
+</script>

src/views/base/home/desktop/components/DesktopAssetsCard.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import AssetsSection from '../../components/AssetsSection.vue'
+import DesktopHomeCard from './DesktopHomeCard.vue'
+import type { WalletMetalTotal } from '@/models/walletAssets'
+
+defineEmits<{
+  openGoldModal: [metal: WalletMetalTotal]
+  openRialModal: []
+}>()
+</script>
+
+<template>
+  <DesktopHomeCard title="دارایی‌های من">
+    <AssetsSection
+      plain
+      class="home-desktop-assets"
+      @open-gold-modal="$emit('openGoldModal', $event)"
+      @open-rial-modal="$emit('openRialModal')"
+    />
+  </DesktopHomeCard>
+</template>
+
+<style scoped>
+:deep(.home-desktop-assets) {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1rem;
+}
+
+:deep(.home-desktop-assets > div) {
+  margin-top: 0 !important;
+  justify-content: flex-start !important;
+  padding: 0.75rem 1rem;
+  border-radius: 0.75rem;
+  background: #eff5f3;
+  border: 1px solid #d4e3de;
+}
+</style>

src/views/base/home/desktop/components/DesktopAssetsMetrics.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { usePriceWithoutType } from '@/utils/usePrice'
+import { useWalletAssets } from '@/composables/useWalletAssets'
+import type { WalletMetalTotal } from '@/models/walletAssets'
+import { resolveSummaryMetalWeight } from '@/utils/productAssets'
+
+const emit = defineEmits<{
+  openGoldModal: [metal: WalletMetalTotal]
+  openRialModal: []
+}>()
+
+const { assetsSummary } = useWalletAssets()
+
+const meta = computed(() => assetsSummary.value?.meta)
+const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
+const inventoryCards = computed(() => assetsSummary.value?.inventory_cards ?? [])
+const totalRialValue = computed(() => assetsSummary.value?.total_rial_value ?? 0)
+const countBasedInventory = computed(() =>
+  (assetsSummary.value?.count_products ?? []).reduce((sum, item) => sum + Number(item.quantity ?? 0), 0),
+)
+
+type MetricItem = {
+  id: string
+  label: string
+  value: string
+  metal?: WalletMetalTotal
+  showInfo?: boolean
+  onInfo?: 'gold' | 'rial'
+}
+
+const metrics = computed<MetricItem[]>(() => {
+  const items: MetricItem[] = []
+
+  if (meta.value?.has_count_based_products) {
+    items.push({
+      id: 'products',
+      label: 'محصولات',
+      value: `${countBasedInventory.value} عدد`,
+    })
+  }
+
+  if (meta.value?.single_metal && metalTotals.value[0]) {
+    const metal = metalTotals.value[0]
+    items.push({
+      id: `metal-${metal.metal_id}`,
+      label: metal.label,
+      value: formatMetalTotal(metal),
+      metal,
+      showInfo: true,
+      onInfo: 'gold',
+    })
+  } else {
+    metalTotals.value.forEach((metal, index) => {
+      items.push({
+        id: `metal-${metal.metal_id}`,
+        label: metal.label,
+        value: formatMetalTotal(metal),
+        metal,
+        showInfo: index === 0,
+        onInfo: 'gold',
+      })
+    })
+  }
+
+  items.push({
+    id: 'rial',
+    label: 'دارایی ریالی',
+    value: `${usePriceWithoutType(totalRialValue.value)} ریال`,
+    showInfo: true,
+    onInfo: 'rial',
+  })
+
+  return items
+})
+
+function formatMetalTotal(metal: WalletMetalTotal) {
+  return `${resolveSummaryMetalWeight(metal, inventoryCards.value)}${metal.unit}`
+}
+
+function handleInfo(metric: MetricItem) {
+  if (metric.onInfo === 'rial') {
+    emit('openRialModal')
+    return
+  }
+  if (metric.metal) {
+    emit('openGoldModal', metric.metal)
+  }
+}
+</script>
+
+<template>
+  <div class="dhome-metrics">
+    <article v-for="metric in metrics" :key="metric.id" class="dhome-metric-tile">
+      <div class="dhome-metric-tile__head">
+        <span class="dhome-metric-tile__label">{{ metric.label }}</span>
+        <button
+          v-if="metric.showInfo"
+          type="button"
+          class="dhome-metric-tile__info"
+          aria-label="اطلاعات بیشتر"
+          @click="handleInfo(metric)"
+        >
+          <BasicIcon icon="vuesax-linear:info-circle" size="14" />
+        </button>
+      </div>
+      <p class="dhome-metric-tile__value">{{ metric.value }}</p>
+    </article>
+  </div>
+</template>

src/views/base/home/desktop/components/DesktopBannersPanel.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import DesktopHomeSection from './DesktopHomeSection.vue'
+import BannerSlider from '../../components/BannerSlider.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+</script>
+
+<template>
+  <DesktopHomeSection
+    v-if="ctx.isGaroosi.value && ctx.banners.value?.length"
+    title="بنرها"
+  >
+    <BannerSlider
+      :banners="ctx.banners.value"
+      @bannerClick="ctx.handleBannerClick"
+    />
+  </DesktopHomeSection>
+</template>

src/views/base/home/desktop/components/DesktopChartPanel.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed, toValue } from 'vue'
+import { useHomePageContext } from '../../composables/useHomePage'
+import PriceChart from '../../components/PriceChart.vue'
+import DesktopHomeCard from '../components/DesktopHomeCard.vue'
+
+const ctx = useHomePageContext()
+
+const chartLayout = computed(() => (toValue(ctx.isBoursecuHomeLayout) ? 'boursecu' : 'default'))
+const priceChartSeries = computed(() => toValue(ctx.priceChartSeries))
+const chartSelection = computed(() => toValue(ctx.chartSelection))
+const selectedChartMetal = computed(() => toValue(ctx.selectedChartMetal))
+</script>
+
+<template>
+  <DesktopHomeCard title="نمودار قیمت">
+    <PriceChart
+      variant="desktop"
+      :price-chart-series="priceChartSeries"
+      :layout="chartLayout"
+      :chart-selection="chartSelection"
+      :selected-metal="selectedChartMetal"
+      @update-data="ctx.updateChartData"
+      @update:selected-metal="ctx.setChartMetal"
+    />
+  </DesktopHomeCard>
+</template>

src/views/base/home/desktop/components/DesktopChartSection.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed, toValue } from 'vue'
+import { useHomePageContext } from '../../composables/useHomePage'
+import PriceChart from '../../components/PriceChart.vue'
+import DesktopHomeSection from './DesktopHomeSection.vue'
+
+const ctx = useHomePageContext()
+
+const chartLayout = computed(() => (toValue(ctx.isBoursecuHomeLayout) ? 'boursecu' : 'default'))
+const priceChartSeries = computed(() => toValue(ctx.priceChartSeries))
+const chartSelection = computed(() => toValue(ctx.chartSelection))
+const selectedChartMetal = computed(() => toValue(ctx.selectedChartMetal))
+</script>
+
+<template>
+  <DesktopHomeSection title="نمودار قیمت" class="dhome-chart">
+    <PriceChart
+      variant="desktop"
+      :price-chart-series="priceChartSeries"
+      :layout="chartLayout"
+      :chart-selection="chartSelection"
+      :selected-metal="selectedChartMetal"
+      @update-data="ctx.updateChartData"
+      @update:selected-metal="ctx.setChartMetal"
+    />
+  </DesktopHomeSection>
+</template>

src/views/base/home/desktop/components/DesktopDefaultActions.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { toValue } from 'vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import DesktopHomeSection from './DesktopHomeSection.vue'
+import { useHomePageContext } from '../../composables/useHomePage'
+import type { HomeActionItem } from '../../layouts/types'
+
+const ctx = useHomePageContext()
+
+function runAction(action: HomeActionItem) {
+  action.handler()
+}
+</script>
+
+<template>
+  <DesktopHomeSection title="عملیات">
+    <div class="dhome-default-actions">
+      <button
+        v-for="action in toValue(ctx.mainActions)"
+        :key="action.name"
+        type="button"
+        class="dhome-default-action"
+        @click="runAction(action)"
+      >
+        <span class="dhome-default-action__icon">
+          <BasicIcon :icon="action.icon" size="20" />
+        </span>
+        <span class="dhome-default-action__label">{{ action.label }}</span>
+      </button>
+    </div>
+  </DesktopHomeSection>
+</template>

src/views/base/home/desktop/components/DesktopGaroosiAssets.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { useUserStore } from '@/store/userStore'
+import { usePriceWithoutType } from '@/utils/usePrice'
+import DesktopHomeSection from './DesktopHomeSection.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+const userStore = useUserStore()
+</script>
+
+<template>
+  <DesktopHomeSection v-if="ctx.isGaroosi.value" title="دارایی‌ها">
+    <div class="dhome-garoosi-assets">
+      <div class="dhome-garoosi-assets__item">
+        <span class="dhome-garoosi-assets__label">دارایی طلایی</span>
+        <span class="dhome-garoosi-assets__value">
+          {{ (userStore?.userInfo?.wallet?.count_gold ?? 0).toFixed(3) }} گرم
+        </span>
+      </div>
+      <div class="dhome-garoosi-assets__divider" />
+      <div class="dhome-garoosi-assets__item">
+        <span class="dhome-garoosi-assets__label">دارایی ریالی</span>
+        <span class="dhome-garoosi-assets__value">
+          {{ usePriceWithoutType(userStore?.userInfo?.wallet?.count_cash ?? 0) }} ریال
+        </span>
+      </div>
+    </div>
+  </DesktopHomeSection>
+</template>

src/views/base/home/desktop/components/DesktopHomeAlerts.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { useUserStore } from '@/store/userStore'
+import { usePriceWithoutType } from '@/utils/usePrice'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+const userStore = useUserStore()
+
+const showLimitedPrice = computed(
+  () =>
+    ctx.limitedPrice.value !== undefined &&
+    userStore.userInfo?.trade_active !== 1,
+)
+
+const limitedPriceText = computed(() =>
+  usePriceWithoutType(Number(ctx.limitedPrice.value?.value ?? 0)),
+)
+</script>
+
+<template>
+  <div v-if="showLimitedPrice || ctx.showClosedMessage.value" class="dhome-alerts">
+    <div v-if="showLimitedPrice" class="dhome-alert dhome-alert--warning">
+      <BasicIcon icon="vuesax-linear:info-circle" size="14" />
+      <span>
+        حداقل مبلغ اولیه برای ثبت سفارش {{ limitedPriceText }} ریال می‌باشد.
+      </span>
+    </div>
+    <div
+      v-if="ctx.showClosedMessage.value"
+      class="dhome-alert dhome-alert--info"
+      v-html="ctx.closedMessage.value"
+    />
+  </div>
+</template>

src/views/base/home/desktop/components/DesktopHomeCard.vue

@@ -0,0 +1,12 @@
+<template>
+  <section class="rounded-xl border border-[#d4e3de] bg-white p-5 shadow-sm">
+    <h2 v-if="title" class="mb-4 text-base font-bold text-primary">{{ title }}</h2>
+    <slot />
+  </section>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  title?: string
+}>()
+</script>

src/views/base/home/desktop/components/DesktopHomeHeader.vue

@@ -0,0 +1,49 @@
+<template>
+  <header class="flex items-center justify-between gap-4">
+    <div>
+      <p class="text-sm text-gray-500">خوش آمدید</p>
+      <h1 class="text-xl font-bold text-gray-900">
+        {{ userStore.userInfo?.name ?? 'کاربر' }}
+      </h1>
+    </div>
+
+    <div class="flex items-center gap-3">
+      <button
+        type="button"
+        class="flex items-center gap-2 rounded-lg border border-[#d4e3de] bg-[#eff5f3] px-4 py-2 text-sm font-bold text-primary transition hover:bg-[#e4efea]"
+        @click="router.push({ name: 'user' })"
+      >
+        <BasicIcon icon="vuesax-linear:user" size="18" />
+        <span>حساب کاربری</span>
+      </button>
+      <button
+        v-if="showLogout"
+        type="button"
+        class="flex items-center gap-2 rounded-lg border border-gray-200 px-4 py-2 text-sm font-bold text-gray-600 transition hover:bg-gray-50"
+        @click="$emit('logout')"
+      >
+        <BasicIcon icon="vuesax-linear:logout" size="18" />
+        <span>خروج</span>
+      </button>
+    </div>
+  </header>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { useUserStore } from '@/store/userStore'
+import router from '@/router'
+
+withDefaults(
+  defineProps<{
+    showLogout?: boolean
+  }>(),
+  { showLogout: true },
+)
+
+defineEmits<{
+  logout: []
+}>()
+
+const userStore = useUserStore()
+</script>

src/views/base/home/desktop/components/DesktopHomeSection.vue

@@ -0,0 +1,15 @@
+<template>
+  <section class="dhome-surface">
+    <header v-if="title" class="dhome-section__header">
+      <h2 class="dhome-section__title">{{ title }}</h2>
+      <slot name="header-extra" />
+    </header>
+    <slot />
+  </section>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  title?: string
+}>()
+</script>

src/views/base/home/desktop/components/DesktopHomeShell.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="dhome" :class="{ 'dhome--boursecu': isBoursecu }">
+    <div class="dhome__container">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { isBoursecuProject } from '@/utils/config'
+
+const isBoursecu = isBoursecuProject()
+</script>
+
+<style lang="less" src="../styles/desktop-home.less"></style>

src/views/base/home/desktop/components/DesktopHomeTopbar.vue

@@ -0,0 +1,43 @@
+<template>
+  <header class="dhome-topbar">
+    <div>
+      <p class="dhome-topbar__eyebrow">نمای کلی</p>
+      <h1 class="dhome-topbar__title">{{ userStore.userInfo?.name ?? 'کاربر' }}</h1>
+    </div>
+
+    <div class="dhome-topbar__actions">
+      <button type="button" class="dhome-btn-ghost" @click="router.push({ name: 'user' })">
+        <BasicIcon icon="vuesax-linear:user" size="16" />
+        <span>حساب کاربری</span>
+      </button>
+      <button
+        v-if="showLogout"
+        type="button"
+        class="dhome-btn-ghost"
+        @click="$emit('logout')"
+      >
+        <BasicIcon icon="vuesax-linear:logout" size="16" />
+        <span>خروج</span>
+      </button>
+    </div>
+  </header>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { useUserStore } from '@/store/userStore'
+import router from '@/router'
+
+withDefaults(
+  defineProps<{
+    showLogout?: boolean
+  }>(),
+  { showLogout: true },
+)
+
+defineEmits<{
+  logout: []
+}>()
+
+const userStore = useUserStore()
+</script>

src/views/base/home/desktop/components/DesktopLivePrice.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="dhome-surface dhome-hero-price">
+    <span class="dhome-label">قیمت لحظه‌ای</span>
+    <p class="dhome-hero-price__brand">{{ config.config?.name_fa }}</p>
+    <div class="dhome-hero-price__value-row">
+      <span
+        v-if="percentChange !== 0"
+        class="dhome-hero-price__delta"
+        :class="percentChange >= 0 ? 'dhome-hero-price__delta--up' : 'dhome-hero-price__delta--down'"
+      >
+        {{ useTowDecimal(percentChange) }}%
+      </span>
+      <Vue3Odometer
+        :value="displayGoldVal"
+        class="dhome-hero-price__odometer o-text"
+        style="font-family: var(--App-font-family)"
+      />
+      <span class="dhome-hero-price__unit">ریال</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import Vue3Odometer from 'vue3-odometer'
+import 'odometer/themes/odometer-theme-default.css'
+import { useConfigStore } from '@/store/configStore'
+import { getTradeBuyPrice, lastPrice, percentPriceChanged } from '@/utils/price'
+import { useTowDecimal } from '@/utils/usePrice'
+
+const config = useConfigStore()
+
+const isMarketClosed = computed(
+  () => lastPrice?.value?.goldir === 0 && getTradeBuyPrice(lastPrice.value) === 0,
+)
+
+const displayGoldVal = computed(() => {
+  if (isMarketClosed.value) return 0
+  return getTradeBuyPrice(lastPrice.value)
+})
+
+const percentChange = computed(() => {
+  if (!getTradeBuyPrice(lastPrice.value)) return 0
+  return percentPriceChanged()
+})
+</script>

src/views/base/home/desktop/components/DesktopPriceOverview.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed, toValue } from 'vue'
+import { useHomePageContext } from '../../composables/useHomePage'
+import { price } from '@/utils/price'
+import CurrentPrice from '../../components/CurrentPrice.vue'
+import PriceStats from '../../components/PriceStats.vue'
+import DesktopHomeCard from './DesktopHomeCard.vue'
+
+const ctx = useHomePageContext()
+const statsLayout = computed(() => (toValue(ctx.isBoursecuHomeLayout) ? 'boursecu' : 'default'))
+</script>
+
+<template>
+  <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+    <DesktopHomeCard title="قیمت لحظه‌ای">
+      <CurrentPrice class="home-desktop-current-price" />
+    </DesktopHomeCard>
+
+    <DesktopHomeCard title="بازه قیمت امروز">
+      <PriceStats variant="desktop" :price="price" :layout="statsLayout" />
+    </DesktopHomeCard>
+  </div>
+</template>
+
+<style scoped>
+:deep(.home-desktop-current-price) {
+  margin-top: 0;
+  border: none;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+</style>

src/views/base/home/desktop/components/DesktopPriceRange.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getTradeBuyPrice, getTradeSellPrice, price } from '@/utils/price'
+import { usePriceWithoutType } from '@/utils/usePrice'
+
+const highPrice = computed(() => price.value?.up?.buy ?? getTradeBuyPrice(price.value))
+const lowPrice = computed(() => price.value?.up?.sell ?? getTradeSellPrice(price.value))
+</script>
+
+<template>
+  <div class="dhome-surface dhome-price-range">
+    <div class="dhome-price-range__item">
+      <span class="dhome-label">بیشترین امروز</span>
+      <span class="dhome-price-range__value dhome-price-range__value--high">
+        {{ usePriceWithoutType(highPrice) }}
+        <span class="text-xs font-medium text-gray-400 mr-1">ریال</span>
+      </span>
+    </div>
+    <div class="dhome-price-range__divider" />
+    <div class="dhome-price-range__item">
+      <span class="dhome-label">کمترین امروز</span>
+      <span class="dhome-price-range__value dhome-price-range__value--low">
+        {{ usePriceWithoutType(lowPrice) }}
+        <span class="text-xs font-medium text-gray-400 mr-1">ریال</span>
+      </span>
+    </div>
+  </div>
+</template>

src/views/base/home/desktop/components/DesktopQuickActionsGrid.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import router from '@/router'
+import HomeQuickActionBox from '../../components/HomeQuickActionBox.vue'
+import DesktopHomeCard from './DesktopHomeCard.vue'
+import { boursecuQuickActions } from '../../layouts/configs/boursecuQuickActions'
+import type { HomeQuickActionItem } from '../../layouts/types'
+
+const props = withDefaults(
+  defineProps<{
+    actions?: HomeQuickActionItem[]
+  }>(),
+  {
+    actions: () => boursecuQuickActions,
+  },
+)
+
+function handleClick(action: HomeQuickActionItem) {
+  router.push(action.route)
+}
+</script>
+
+<template>
+  <DesktopHomeCard title="دسترسی سریع">
+    <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6">
+      <HomeQuickActionBox
+        v-for="action in props.actions"
+        :key="action.id"
+        :action="action"
+        class="home-desktop-quick-action"
+        @click="handleClick(action)"
+      />
+    </div>
+  </DesktopHomeCard>
+</template>
+
+<style scoped>
+:deep(.home-desktop-quick-action) {
+  min-height: 108px;
+}
+</style>

src/views/base/home/desktop/components/DesktopQuickActionsPanel.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import router from '@/router'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import DesktopHomeSection from './DesktopHomeSection.vue'
+import { boursecuQuickActions } from '../../layouts/configs/boursecuQuickActions'
+import type { HomeQuickActionItem } from '../../layouts/types'
+
+const props = withDefaults(
+  defineProps<{
+    actions?: HomeQuickActionItem[]
+    title?: string
+  }>(),
+  {
+    actions: () => boursecuQuickActions,
+    title: 'میانبرها',
+  },
+)
+
+function navigate(action: HomeQuickActionItem) {
+  router.push(action.route)
+}
+</script>
+
+<template>
+  <DesktopHomeSection :title="title">
+    <nav class="dhome-actions" aria-label="میانبرهای صفحه اصلی">
+      <button
+        v-for="action in props.actions"
+        :key="action.id"
+        type="button"
+        class="dhome-action"
+        @click="navigate(action)"
+      >
+        <span class="dhome-action__icon">
+          <BasicIcon :icon="action.icon" size="18" />
+        </span>
+        <span class="dhome-action__label">{{ action.label }}</span>
+        <BasicIcon icon="vuesax-linear:arrow-left" size="14" class="dhome-action__chevron" />
+      </button>
+    </nav>
+  </DesktopHomeSection>
+</template>

src/views/base/home/desktop/components/DesktopReferralPanel.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import DesktopHomeSection from './DesktopHomeSection.vue'
+import ReferralSection from '../../components/ReferralSection.vue'
+import { HOME_PAGE_CONTEXT_KEY } from '../../composables/useHomePage'
+
+const ctx = inject(HOME_PAGE_CONTEXT_KEY)!
+</script>
+
+<template>
+  <DesktopHomeSection v-if="ctx.isGaroosi.value" title="دعوت از دوستان">
+    <ReferralSection />
+  </DesktopHomeSection>
+</template>

src/views/base/home/desktop/layouts/BoursecuDesktopHome.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useUserStore } from '@/store/userStore'
+import { loading } from '@/utils'
+import { useHomePageContext } from '../../composables/useHomePage'
+import HomeSkeleton from '../../components/HomeSkeleton.vue'
+import DesktopHomeShell from '../components/DesktopHomeShell.vue'
+import DesktopHomeTopbar from '../components/DesktopHomeTopbar.vue'
+import DesktopHomeAlerts from '../components/DesktopHomeAlerts.vue'
+import DesktopLivePrice from '../components/DesktopLivePrice.vue'
+import DesktopPriceRange from '../components/DesktopPriceRange.vue'
+import DesktopAssetsMetrics from '../components/DesktopAssetsMetrics.vue'
+import DesktopChartSection from '../components/DesktopChartSection.vue'
+import DesktopQuickActionsPanel from '../components/DesktopQuickActionsPanel.vue'
+
+defineEmits<{
+  logout: []
+}>()
+
+const userStore = useUserStore()
+const ctx = useHomePageContext()
+
+const showSkeleton = computed(() => loading.value || !userStore.userInfo)
+const showContent = computed(() => !loading.value && Boolean(userStore.userInfo))
+</script>
+
+<template>
+  <DesktopHomeShell>
+    <DesktopHomeTopbar @logout="$emit('logout')" />
+    <DesktopHomeAlerts />
+
+    <HomeSkeleton v-if="showSkeleton" />
+
+    <template v-else-if="showContent">
+      <section class="dhome-hero-row">
+        <DesktopLivePrice />
+        <DesktopPriceRange />
+      </section>
+
+      <DesktopAssetsMetrics
+        @open-gold-modal="ctx.openGoldModal"
+        @open-rial-modal="ctx.openRialModal"
+      />
+
+      <section class="dhome-main-grid">
+        <DesktopChartSection />
+        <DesktopQuickActionsPanel />
+      </section>
+    </template>
+  </DesktopHomeShell>
+</template>

src/views/base/home/desktop/layouts/DefaultDesktopHome.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useUserStore } from '@/store/userStore'
+import { loading } from '@/utils'
+import { useHomePageContext } from '../../composables/useHomePage'
+import HomeSkeleton from '../../components/HomeSkeleton.vue'
+import DesktopHomeShell from '../components/DesktopHomeShell.vue'
+import DesktopHomeTopbar from '../components/DesktopHomeTopbar.vue'
+import DesktopHomeAlerts from '../components/DesktopHomeAlerts.vue'
+import DesktopLivePrice from '../components/DesktopLivePrice.vue'
+import DesktopPriceRange from '../components/DesktopPriceRange.vue'
+import DesktopAssetsMetrics from '../components/DesktopAssetsMetrics.vue'
+import DesktopChartSection from '../components/DesktopChartSection.vue'
+import DesktopDefaultActions from '../components/DesktopDefaultActions.vue'
+import DesktopGaroosiAssets from '../components/DesktopGaroosiAssets.vue'
+import DesktopReferralPanel from '../components/DesktopReferralPanel.vue'
+import DesktopBannersPanel from '../components/DesktopBannersPanel.vue'
+
+defineEmits<{
+  logout: []
+}>()
+
+const userStore = useUserStore()
+const ctx = useHomePageContext()
+
+const showSkeleton = computed(() => loading.value || !userStore.userInfo)
+const showContent = computed(() => !loading.value && Boolean(userStore.userInfo))
+</script>
+
+<template>
+  <DesktopHomeShell>
+    <DesktopHomeTopbar @logout="$emit('logout')" />
+    <DesktopHomeAlerts />
+
+    <HomeSkeleton v-if="showSkeleton" />
+
+    <template v-else-if="showContent">
+      <section class="dhome-hero-row">
+        <DesktopLivePrice />
+        <DesktopPriceRange />
+      </section>
+
+      <DesktopAssetsMetrics
+        v-if="!ctx.isGaroosi.value"
+        @open-gold-modal="ctx.openGoldModal"
+        @open-rial-modal="ctx.openRialModal"
+      />
+
+      <div v-if="ctx.isGaroosi.value" class="dhome-default-grid">
+        <div class="dhome-default-grid__main">
+          <DesktopDefaultActions />
+          <DesktopBannersPanel />
+          <DesktopChartSection />
+        </div>
+
+        <aside class="dhome-default-grid__side">
+          <DesktopGaroosiAssets />
+          <DesktopReferralPanel />
+        </aside>
+      </div>
+
+      <template v-else>
+        <DesktopDefaultActions />
+        <DesktopChartSection />
+      </template>
+    </template>
+  </DesktopHomeShell>
+</template>

src/views/base/home/desktop/styles/desktop-home.less

@@ -0,0 +1,516 @@
+/* Premium desktop home — SaaS dashboard design tokens */
+
+.dhome {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+  font-feature-settings: 'ss01' on;
+}
+
+.dhome__container {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+}
+
+.dhome-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: #9ca3af;
+  margin-bottom: 6px;
+}
+
+.dhome-surface {
+  background: #ffffff;
+  border-radius: 14px;
+  padding: 22px 24px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  min-width: 0;
+  overflow: hidden;
+
+  .home-referral {
+    margin-top: 0;
+  }
+}
+
+.dhome-section {
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+  }
+
+  &__title {
+    font-size: 13px;
+    font-weight: 600;
+    color: #374151;
+    letter-spacing: -0.01em;
+  }
+}
+
+/* Topbar */
+.dhome-topbar {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 24px;
+  margin-bottom: 28px;
+  padding-bottom: 24px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__eyebrow {
+    font-size: 12px;
+    font-weight: 500;
+    color: #9ca3af;
+    margin-bottom: 4px;
+  }
+
+  &__title {
+    font-size: 26px;
+    font-weight: 600;
+    letter-spacing: -0.03em;
+    color: #111827;
+    line-height: 1.2;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+}
+
+.dhome-btn-ghost {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 12px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 500;
+  color: #6b7280;
+  cursor: pointer;
+  transition: color 0.15s ease, background 0.15s ease;
+
+  &:hover {
+    color: #111827;
+    background: rgba(15, 23, 42, 0.04);
+  }
+}
+
+/* Alerts */
+.dhome-alerts {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 20px;
+}
+
+.dhome-alert {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 10px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.5;
+
+  &--warning {
+    background: #fef3f2;
+    color: #b42318;
+  }
+
+  &--info {
+    background: #f0f4ff;
+    color: #344054;
+  }
+}
+
+/* Hero price */
+.dhome-hero-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.dhome-hero-price {
+  &__brand {
+    font-size: 13px;
+    color: #6b7280;
+    margin: 0 0 12px;
+  }
+
+  &__value-row {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  &__odometer {
+    font-size: 32px !important;
+    font-weight: 600 !important;
+    letter-spacing: -0.03em;
+    color: #111827;
+    direction: ltr;
+    line-height: 1;
+  }
+
+  &__unit {
+    font-size: 14px;
+    font-weight: 500;
+    color: #9ca3af;
+  }
+
+  &__delta {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    direction: ltr;
+
+    &--up {
+      background: #ecfdf3;
+      color: #027a48;
+    }
+
+    &--down {
+      background: #fef3f2;
+      color: #b42318;
+    }
+  }
+}
+
+.dhome-price-range {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 16px;
+  height: 100%;
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__value {
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    direction: ltr;
+    text-align: right;
+  }
+
+  &__value--high {
+    color: #027a48;
+  }
+
+  &__value--low {
+    color: #b42318;
+  }
+
+  &__divider {
+    height: 1px;
+    background: rgba(15, 23, 42, 0.06);
+  }
+}
+
+/* Asset metrics */
+.dhome-metrics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
+}
+
+.dhome-metric-tile {
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 16px 18px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  transition: box-shadow 0.15s ease;
+
+  &:hover {
+    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
+  }
+
+  &__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 8px;
+  }
+
+  &__label {
+    font-size: 12px;
+    font-weight: 500;
+    color: #6b7280;
+  }
+
+  &__info {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    color: #9ca3af;
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease;
+
+    &:hover {
+      background: #f3f4f6;
+      color: #374151;
+    }
+  }
+
+  &__value {
+    font-size: 20px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: #111827;
+    line-height: 1.2;
+  }
+}
+
+/* Main dashboard grid */
+.dhome-main-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 272px;
+  gap: 16px;
+  align-items: start;
+}
+
+.dhome-chart {
+  :deep(.bg-gray-50) {
+    background: transparent !important;
+    border-radius: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  :deep(.w-full.text-center.pt-2) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 10px;
+  }
+
+  :deep(.chart-metal-segment) {
+    display: inline-flex;
+    background: #f3f4f6;
+    border-radius: 8px;
+    padding: 3px;
+    margin-bottom: 0 !important;
+    flex-shrink: 0;
+  }
+
+  :deep(.chart-metal-segment__item) {
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 500;
+  }
+
+  :deep(.chart-timeline-group) {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 6px;
+    width: 100%;
+    margin-bottom: 4px;
+  }
+
+  :deep(.chart-timeline-group .ant-radio-button-wrapper) {
+    margin: 0;
+  }
+}
+
+/* Quick actions */
+.dhome-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.dhome-action {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 11px 10px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  cursor: pointer;
+  text-align: right;
+  font-family: inherit;
+  transition: background 0.15s ease;
+
+  &:hover {
+    background: #f9fafb;
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    background: #f3f4f6;
+    color: @App-primary-color;
+    flex-shrink: 0;
+    transition: background 0.15s ease;
+  }
+
+  &:hover &__icon {
+    background: #eef2f6;
+  }
+
+  &__label {
+    flex: 1;
+    font-size: 13px;
+    font-weight: 600;
+    color: #374151;
+  }
+
+  &__chevron {
+    color: #d1d5db;
+    flex-shrink: 0;
+  }
+}
+
+/* Default layout grid */
+.dhome-default-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 300px;
+  gap: 16px;
+  align-items: start;
+}
+
+.dhome-default-grid__main,
+.dhome-default-grid__side {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+
+.dhome-default-actions {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.dhome-default-action {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  padding: 18px 12px;
+  border: none;
+  border-radius: 12px;
+  background: #f9fafb;
+  cursor: pointer;
+  font-family: inherit;
+  transition: background 0.15s ease, transform 0.15s ease;
+
+  &:hover {
+    background: #f3f4f6;
+    transform: translateY(-1px);
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 12px;
+    background: #ffffff;
+    color: @App-primary-color;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
+  }
+
+  &__label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #374151;
+    text-align: center;
+    line-height: 1.4;
+  }
+}
+
+/* Garoosi assets strip */
+.dhome-garoosi-assets {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__label {
+    font-size: 12px;
+    font-weight: 500;
+    color: #6b7280;
+  }
+
+  &__value {
+    font-size: 18px;
+    font-weight: 600;
+    letter-spacing: -0.02em;
+    color: #111827;
+    direction: ltr;
+    text-align: right;
+  }
+
+  &__divider {
+    height: 1px;
+    background: rgba(15, 23, 42, 0.06);
+  }
+}
+
+/* Boursecu subtle accent */
+.dhome--boursecu {
+  .dhome-action__icon {
+    background: rgba(19, 48, 80, 0.06);
+    color: #133050;
+  }
+
+  .dhome-hero-price__odometer {
+    color: #133050;
+  }
+}
+
+@media (max-width: 1024px) {
+  .dhome__container {
+    padding: 24px 28px 36px;
+  }
+
+  .dhome-hero-row,
+  .dhome-main-grid,
+  .dhome-default-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .dhome-default-actions {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}