ui changes

src/views/base/home/components/AssetsSection.vue

@@ -9,15 +9,13 @@
       <div class="text-l mr-2 font-bold">{{ usePriceWithoutType(countBasedInventory, false) }} عدد</div>
     </div>
 
-    <PortfolioOverview v-if="!boursecuLayout" variant="mobile" />
-
     <BoursecuAssetsSummary
-      v-else-if="boursecuLayout"
+      v-if="boursecuLayout"
       variant="mobile"
       icon-color="primary"
     />
 
-    <template v-else-if="showLegacyRows && meta?.single_metal && primaryMetalTotal">
+    <template v-else-if="meta?.single_metal && primaryMetalTotal">
       <div :class="[rowClass, meta?.has_count_based_products ? 'mt-2' : '']" class="flex justify-center w-full z-20">
         {{ primaryMetalTotal.label }}:
         <div class="text-l mr-2 font-bold">{{ formatMetalTotal(primaryMetalTotal) }}</div>
@@ -29,6 +27,8 @@
         />
       </div>
 
+      <PortfolioProfitInsight variant="mobile" />
+
       <div :class="[rowClass, 'mt-2']" class="flex justify-center w-full z-20">
         دارایی ریالی:
         <div class="text-l mr-2 font-bold">{{ usePriceWithoutType(cashWallet) }} ریال</div>
@@ -41,7 +41,7 @@
       </div>
     </template>
 
-    <template v-else-if="showLegacyRows && !boursecuLayout">
+    <template v-else-if="!boursecuLayout">
       <div
         v-for="(metal, index) in metalTotals"
         :key="metal.metal_id"
@@ -59,6 +59,8 @@
         />
       </div>
 
+      <PortfolioProfitInsight variant="mobile" />
+
       <div :class="[rowClass, 'mt-2']" class="flex justify-center w-full z-20">
         دارایی ریالی:
         <div class="text-l mr-2 font-bold">{{ usePriceWithoutType(cashWallet) }} ریال</div>
@@ -77,7 +79,7 @@
 import { computed } from 'vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import BoursecuAssetsSummary from './BoursecuAssetsSummary.vue'
-import PortfolioOverview from './PortfolioOverview.vue'
+import PortfolioProfitInsight from './PortfolioProfitInsight.vue'
 import { formatWeightAmount, usePriceWithoutType } from '@/utils/usePrice'
 import { useWalletAssets } from '@/composables/useWalletAssets'
 import type { WalletMetalTotal } from '@/models/walletAssets'
@@ -119,8 +121,6 @@ const inventoryCards = computed(() => assetsSummary.value?.inventory_cards ?? []
 const countBasedInventory = computed(() =>
   (assetsSummary.value?.count_products ?? []).reduce((sum, item) => sum + Number(item.quantity ?? 0), 0)
 )
-const showLegacyRows = computed(() => !assetsSummary.value?.portfolio)
-
 function formatMetalTotal(metal: WalletMetalTotal) {
   return `${formatWeightAmount(resolveSummaryMetalWeight(metal, inventoryCards.value))}${metal.unit}`
 }

src/views/base/home/components/PortfolioProfitInsight.vue

@@ -0,0 +1,129 @@
+<template>
+  <div
+    v-if="hasProfitInsight"
+    class="portfolio-profit"
+    :class="[
+      `portfolio-profit--${variant}`,
+      {
+        'portfolio-profit--up': profitTone === 'profit',
+        'portfolio-profit--down': profitTone === 'loss',
+      },
+    ]"
+  >
+    <span class="portfolio-profit__amount">{{ profitText }}</span>
+    <span v-if="profitPercent" class="portfolio-profit__percent">{{ profitPercent }}</span>
+    <span class="portfolio-profit__hint">سود/زیان تحقق‌نیافته طلا</span>
+    <p v-if="averageBuyPrice" class="portfolio-profit__footnote">
+      بر اساس میانگین خرید {{ usePriceWithoutType(averageBuyPrice) }} ریال و قیمت فعلی
+      {{ usePriceWithoutType(liveGoldPrice) }} ریال
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useWalletAssets } from '@/composables/useWalletAssets'
+import {
+  formatPortfolioProfitLabel,
+  formatPortfolioProfitPercent,
+  formatPortfolioProfitText,
+} from '@/utils/productAssets'
+import { usePriceWithoutType } from '@/utils/usePrice'
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' }
+)
+
+const { assetsSummary } = useWalletAssets()
+
+const portfolio = computed(() => assetsSummary.value?.portfolio)
+const averageBuyPrice = computed(() => portfolio.value?.average_buy_price ?? null)
+const liveGoldPrice = computed(() => Number(portfolio.value?.live_gold_price ?? 0))
+
+const hasProfitInsight = computed(() => portfolio.value?.unrealized_profit_rial != null)
+const profitTone = computed(() => formatPortfolioProfitLabel(portfolio.value?.unrealized_profit_rial))
+const profitText = computed(() => formatPortfolioProfitText(portfolio.value?.unrealized_profit_rial))
+const profitPercent = computed(() =>
+  formatPortfolioProfitPercent(portfolio.value?.unrealized_profit_percent)
+)
+</script>
+
+<style scoped lang="less">
+.portfolio-profit {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 6px 8px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  margin-top: 8px;
+  background: rgba(255, 255, 255, 0.12);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.portfolio-profit--desktop {
+  justify-content: flex-start;
+  margin-top: 0;
+  margin-bottom: 12px;
+  background: #f9fafb;
+}
+
+.portfolio-profit--up {
+  color: #bbf7d0;
+}
+
+.portfolio-profit--desktop.portfolio-profit--up {
+  color: #027a48;
+  background: #ecfdf3;
+}
+
+.portfolio-profit--down {
+  color: #fecaca;
+}
+
+.portfolio-profit--desktop.portfolio-profit--down {
+  color: #b42318;
+  background: #fef3f2;
+}
+
+.portfolio-profit__percent {
+  direction: ltr;
+  unicode-bidi: isolate;
+  font-variant-numeric: tabular-nums;
+}
+
+.portfolio-profit__hint {
+  width: 100%;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 500;
+  opacity: 0.85;
+}
+
+.portfolio-profit--desktop .portfolio-profit__hint {
+  text-align: right;
+  color: #6b7280;
+  opacity: 1;
+}
+
+.portfolio-profit__footnote {
+  width: 100%;
+  margin: 4px 0 0;
+  font-size: 10px;
+  font-weight: 500;
+  line-height: 1.5;
+  opacity: 0.75;
+  text-align: center;
+}
+
+.portfolio-profit--desktop .portfolio-profit__footnote {
+  text-align: right;
+  color: #6b7280;
+  opacity: 1;
+}
+</style>

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

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import BoursecuAssetsSummary from '../../components/BoursecuAssetsSummary.vue'
-import PortfolioOverview from '../../components/PortfolioOverview.vue'
+import PortfolioProfitInsight from '../../components/PortfolioProfitInsight.vue'
 import { formatWeightAmount, usePriceWithoutType } from '@/utils/usePrice'
 import { useWalletAssets } from '@/composables/useWalletAssets'
 import type { WalletMetalTotal } from '@/models/walletAssets'
@@ -25,7 +25,6 @@ const cashWallet = computed(() => assetsSummary.value?.cash_wallet ?? 0)
 const countBasedInventory = computed(() =>
   (assetsSummary.value?.count_products ?? []).reduce((sum, item) => sum + Number(item.quantity ?? 0), 0),
 )
-const showLegacyMetrics = computed(() => !assetsSummary.value?.portfolio)
 
 type MetricItem = {
   id: string
@@ -104,9 +103,9 @@ function handleInfo(metric: MetricItem) {
   />
 
   <template v-else>
-    <PortfolioOverview variant="desktop" />
+    <PortfolioProfitInsight variant="desktop" />
 
-    <div v-if="showLegacyMetrics" class="dhome-metrics">
+    <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>