fix some bugs

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

@@ -3,19 +3,21 @@
     <div
       v-if="!boursecuLayout && meta?.has_count_based_products"
       :class="rowClass"
-      class="flex justify-center w-full z-20"
+      class="flex justify-center w-full z-20 mb-2"
     >
       محصولات:
       <div class="text-l mr-2 font-bold">{{ usePriceWithoutType(countBasedInventory, false) }} عدد</div>
     </div>
 
+    <PortfolioOverview v-if="!boursecuLayout" variant="mobile" />
+
     <BoursecuAssetsSummary
-      v-if="boursecuLayout"
+      v-else-if="boursecuLayout"
       variant="mobile"
       icon-color="primary"
     />
 
-    <template v-else-if="meta?.single_metal && primaryMetalTotal">
+    <template v-else-if="showLegacyRows && 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>
@@ -39,7 +41,7 @@
       </div>
     </template>
 
-    <template v-else-if="!boursecuLayout">
+    <template v-else-if="showLegacyRows && !boursecuLayout">
       <div
         v-for="(metal, index) in metalTotals"
         :key="metal.metal_id"
@@ -75,6 +77,7 @@
 import { computed } from 'vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
 import BoursecuAssetsSummary from './BoursecuAssetsSummary.vue'
+import PortfolioOverview from './PortfolioOverview.vue'
 import { formatWeightAmount, usePriceWithoutType } from '@/utils/usePrice'
 import { useWalletAssets } from '@/composables/useWalletAssets'
 import type { WalletMetalTotal } from '@/models/walletAssets'
@@ -116,6 +119,7 @@ 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/BalanceSheet.vue

@@ -42,6 +42,21 @@
               is-line
               :value="usePrice(totalRialValue)"
             />
+            <template v-if="portfolioInsight?.unrealized_profit_rial != null">
+              <a-divider class="!my-1" />
+              <BasicInfoItem
+                class="flex justify-between"
+                title="میانگین قیمت خرید"
+                is-line
+                :value="usePrice(portfolioInsight.average_buy_price ?? 0)"
+              />
+              <BasicInfoItem
+                class="flex justify-between"
+                title="سود/زیان تحقق‌نیافته"
+                is-line
+                :value="profitSheetLabel"
+              />
+            </template>
           </div>
         </div>
       </div>
@@ -56,7 +71,7 @@ import BasicInfoItem from '@/components/BasicPacks/BasicInfoItem.vue'
 import { usePrice } from '@/utils/usePrice'
 import { useWalletAssets } from '@/composables/useWalletAssets'
 import type { WalletMetalTotal } from '@/models/walletAssets'
-import { formatInventoryCardValue, assetSheetInventoryCards, resolveAssetsRialValue } from '@/utils/productAssets'
+import { formatInventoryCardValue, assetSheetInventoryCards, resolveAssetsRialValue, formatPortfolioProfitPercent, formatPortfolioProfitText } from '@/utils/productAssets'
 import { getTradeBuyPrice, lastPrice } from '@/utils/price'
 
 const props = defineProps<{
@@ -83,6 +98,13 @@ const metalRialValue = computed(() =>
   resolveAssetsRialValue(assetsSummary.value, getTradeBuyPrice(lastPrice.value))
 )
 const totalRialValue = computed(() => cashWallet.value + metalRialValue.value)
+const portfolioInsight = computed(() => assetsSummary.value?.portfolio)
+const profitSheetLabel = computed(() => {
+  const profit = portfolioInsight.value?.unrealized_profit_rial
+  if (profit == null) return '-'
+  const pct = formatPortfolioProfitPercent(portfolioInsight.value?.unrealized_profit_percent)
+  return `${formatPortfolioProfitText(profit)}${pct ? ` (${pct})` : ''}`
+})
 
 watch(
   () => props.show,

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

@@ -0,0 +1,259 @@
+<template>
+  <section :class="rootClass">
+    <header class="portfolio-overview__header">
+      <span class="portfolio-overview__eyebrow">کل دارایی شما</span>
+      <p class="portfolio-overview__total">
+        {{ usePriceWithoutType(totalRial) }}
+        <span class="portfolio-overview__unit">ریال</span>
+      </p>
+    </header>
+
+    <div
+      v-if="hasProfitInsight"
+      class="portfolio-overview__profit"
+      :class="{
+        'portfolio-overview__profit--up': profitTone === 'profit',
+        'portfolio-overview__profit--down': profitTone === 'loss',
+      }"
+    >
+      <span class="portfolio-overview__profit-amount">{{ profitText }}</span>
+      <span v-if="profitPercent" class="portfolio-overview__profit-percent">{{ profitPercent }}</span>
+      <span class="portfolio-overview__profit-hint">سود/زیان تحقق‌نیافته طلا</span>
+    </div>
+
+    <div class="portfolio-overview__grid">
+      <article class="portfolio-overview__tile">
+        <span class="portfolio-overview__tile-label">ارزش طلا</span>
+        <strong class="portfolio-overview__tile-value">{{ usePriceWithoutType(metalRial) }} ریال</strong>
+        <span v-if="goldWeight > 0" class="portfolio-overview__tile-sub">
+          {{ formatWeightAmount(goldWeight) }}{{ weightUnit }}
+        </span>
+      </article>
+      <article class="portfolio-overview__tile">
+        <span class="portfolio-overview__tile-label">موجودی نقد</span>
+        <strong class="portfolio-overview__tile-value">{{ usePriceWithoutType(cashRial) }} ریال</strong>
+        <span class="portfolio-overview__tile-sub">کیف پول ریالی</span>
+      </article>
+    </div>
+
+    <p v-if="hasProfitInsight && averageBuyPrice" class="portfolio-overview__footnote">
+      بر اساس میانگین خرید {{ usePriceWithoutType(averageBuyPrice) }} ریال و قیمت فعلی
+      {{ usePriceWithoutType(liveGoldPrice) }} ریال
+    </p>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useWalletAssets } from '@/composables/useWalletAssets'
+import {
+  formatPortfolioProfitLabel,
+  formatPortfolioProfitPercent,
+  formatPortfolioProfitText,
+  resolveAssetsRialValue,
+} from '@/utils/productAssets'
+import { formatWeightAmount, usePriceWithoutType } from '@/utils/usePrice'
+import { getTradeBuyPrice, lastPrice } from '@/utils/price'
+
+const props = withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+  }>(),
+  { variant: 'mobile' }
+)
+
+const { assetsSummary } = useWalletAssets()
+
+const portfolio = computed(() => assetsSummary.value?.portfolio)
+const weightUnit = computed(() => assetsSummary.value?.meta?.weight_unit || 'گرم')
+
+const totalRial = computed(() =>
+  Number(portfolio.value?.total_rial_value ?? assetsSummary.value?.total_rial_value ?? 0)
+)
+const cashRial = computed(() =>
+  Number(portfolio.value?.cash_rial ?? assetsSummary.value?.cash_wallet ?? 0)
+)
+const metalRial = computed(() => {
+  const fromPortfolio = Number(portfolio.value?.metal_rial_value ?? 0)
+  if (fromPortfolio > 0) return fromPortfolio
+  return resolveAssetsRialValue(assetsSummary.value, getTradeBuyPrice(lastPrice.value))
+})
+const goldWeight = computed(() => Number(portfolio.value?.gold_weight ?? 0))
+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)
+)
+
+const rootClass = computed(() => [
+  'portfolio-overview',
+  `portfolio-overview--${props.variant}`,
+])
+</script>
+
+<style scoped lang="less">
+.portfolio-overview {
+  border-radius: 14px;
+  padding: 14px 16px;
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06));
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  color: #fff;
+}
+
+.portfolio-overview--desktop {
+  margin-bottom: 16px;
+  padding: 20px 22px;
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  color: #111827;
+}
+
+.portfolio-overview__header {
+  margin-bottom: 12px;
+}
+
+.portfolio-overview__eyebrow {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  opacity: 0.85;
+}
+
+.portfolio-overview--desktop .portfolio-overview__eyebrow {
+  color: #6b7280;
+  opacity: 1;
+}
+
+.portfolio-overview__total {
+  margin: 4px 0 0;
+  font-size: 1.65rem;
+  font-weight: 800;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+.portfolio-overview__unit {
+  font-size: 0.85rem;
+  font-weight: 600;
+  margin-right: 4px;
+  opacity: 0.9;
+}
+
+.portfolio-overview__profit {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 10px;
+  margin-bottom: 12px;
+  background: rgba(255, 255, 255, 0.12);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.portfolio-overview--desktop .portfolio-overview__profit {
+  background: #f9fafb;
+}
+
+.portfolio-overview__profit--up {
+  color: #bbf7d0;
+}
+
+.portfolio-overview--desktop .portfolio-overview__profit--up {
+  color: #027a48;
+  background: #ecfdf3;
+}
+
+.portfolio-overview__profit--down {
+  color: #fecaca;
+}
+
+.portfolio-overview--desktop .portfolio-overview__profit--down {
+  color: #b42318;
+  background: #fef3f2;
+}
+
+.portfolio-overview__profit-percent {
+  direction: ltr;
+  unicode-bidi: isolate;
+  font-variant-numeric: tabular-nums;
+}
+
+.portfolio-overview__profit-hint {
+  width: 100%;
+  font-size: 11px;
+  font-weight: 500;
+  opacity: 0.85;
+}
+
+.portfolio-overview--desktop .portfolio-overview__profit-hint {
+  color: #6b7280;
+  opacity: 1;
+}
+
+.portfolio-overview__grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.portfolio-overview__tile {
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: rgba(0, 0, 0, 0.12);
+}
+
+.portfolio-overview--desktop .portfolio-overview__tile {
+  background: #f6f7f9;
+}
+
+.portfolio-overview__tile-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  opacity: 0.85;
+  margin-bottom: 4px;
+}
+
+.portfolio-overview--desktop .portfolio-overview__tile-label {
+  color: #6b7280;
+  opacity: 1;
+}
+
+.portfolio-overview__tile-value {
+  display: block;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.portfolio-overview__tile-sub {
+  display: block;
+  margin-top: 4px;
+  font-size: 11px;
+  opacity: 0.8;
+}
+
+.portfolio-overview--desktop .portfolio-overview__tile-sub {
+  color: #9ca3af;
+  opacity: 1;
+}
+
+.portfolio-overview__footnote {
+  margin: 10px 0 0;
+  font-size: 11px;
+  line-height: 1.6;
+  opacity: 0.8;
+}
+
+.portfolio-overview--desktop .portfolio-overview__footnote {
+  color: #6b7280;
+  opacity: 1;
+}
+</style>