safavi works

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

@@ -9,24 +9,11 @@
       <div class="text-l mr-2 font-bold">{{ usePriceWithoutType(countBasedInventory, false) }} عدد</div>
     </div>
 
-    <template v-if="boursecuAssetRows.length">
-      <div
-        v-for="(row, index) in boursecuAssetRows"
-        :key="row.id"
-        :class="[rowClass, index > 0 ? 'mt-2' : '']"
-        class="flex justify-center w-full z-20"
-      >
-        {{ row.label }}:
-        <div class="text-l mr-2 font-bold">{{ row.value }}</div>
-        <BasicIcon
-          v-if="row.info !== 'none'"
-          icon="vuesax-linear:info-circle"
-          size="18"
-          :color="iconColor"
-          @click="handleRowInfo(row)"
-        />
-      </div>
-    </template>
+    <BoursecuAssetsSummary
+      v-if="boursecuLayout"
+      variant="mobile"
+      icon-color="primary"
+    />
 
     <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">
@@ -87,14 +74,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BoursecuAssetsSummary from './BoursecuAssetsSummary.vue'
 import { usePriceWithoutType } from '@/utils/usePrice'
 import { useWalletAssets } from '@/composables/useWalletAssets'
 import type { WalletMetalTotal } from '@/models/walletAssets'
-import {
-  buildBoursecuHomeAssetRows,
-  resolveSummaryMetalWeight,
-  type HomeAssetRow,
-} from '@/utils/productAssets'
+import { resolveSummaryMetalWeight } from '@/utils/productAssets'
 
 const props = withDefaults(
   defineProps<{
@@ -104,7 +88,7 @@ const props = withDefaults(
   { plain: false, boursecuLayout: false }
 )
 
-const emit = defineEmits<{
+defineEmits<{
   openGoldModal: [metal: WalletMetalTotal, modalText?: string, modalTitle?: string, modalContent?: string]
   openRialModal: []
 }>()
@@ -127,9 +111,6 @@ const rootClass = computed(() => {
 const meta = computed(() => assetsSummary.value?.meta)
 const metalTotals = computed(() => assetsSummary.value?.metal_totals ?? [])
 const primaryMetalTotal = computed(() => metalTotals.value[0])
-const boursecuAssetRows = computed(() =>
-  props.boursecuLayout ? buildBoursecuHomeAssetRows(assetsSummary.value) : []
-)
 const cashWallet = computed(() => assetsSummary.value?.cash_wallet ?? 0)
 const inventoryCards = computed(() => assetsSummary.value?.inventory_cards ?? [])
 const countBasedInventory = computed(() =>
@@ -139,24 +120,10 @@ const countBasedInventory = computed(() =>
 function formatMetalTotal(metal: WalletMetalTotal) {
   return `${usePriceWithoutType(resolveSummaryMetalWeight(metal, inventoryCards.value), false)}${metal.unit}`
 }
-
-function handleRowInfo(row: HomeAssetRow) {
-  if (row.info === 'rial') {
-    emit('openRialModal')
-    return
-  }
-
-  if (row.metal) {
-    emit('openGoldModal', row.metal, row.modalText, row.modalTitle, row.modalContent)
-  }
-}
 </script>
 
 <style scoped lang="less">
-@boursecu-surface-border: #d4e3de;
-
 .assets-section--boursecu {
   background-color: #eff5f3;
-  border: 2px solid @boursecu-surface-border;
 }
 </style>

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

@@ -0,0 +1,185 @@
+<template>
+  <div ref="rootRef" class="boursecu-assets" :class="`boursecu-assets--${variant}`">
+    <div
+      v-for="(row, index) in rows"
+      :key="row.id"
+      :class="['boursecu-assets__row', index > 0 ? 'boursecu-assets__row--spaced' : '']"
+    >
+      <span class="boursecu-assets__label">{{ row.label }}:</span>
+      <strong class="boursecu-assets__value">{{ row.value }}</strong>
+      <div class="boursecu-assets__info-wrap">
+        <button
+          type="button"
+          class="boursecu-assets__info-btn"
+          :aria-expanded="openRowId === row.id"
+          aria-label="اطلاعات بیشتر"
+          @click.stop="toggleRow(row.id)"
+        >
+          <BasicIcon icon="vuesax-linear:info-circle" size="18" :color="iconColor" />
+        </button>
+        <div
+          v-if="openRowId === row.id"
+          class="boursecu-assets__popup"
+          @click.stop
+        >
+          <div
+            v-for="line in row.popupLines"
+            :key="line.label"
+            class="boursecu-assets__popup-line"
+            :class="{
+              'boursecu-assets__popup-line--profit': line.tone === 'profit',
+              'boursecu-assets__popup-line--loss': line.tone === 'loss',
+            }"
+          >
+            <span class="boursecu-assets__popup-label">{{ line.label }}</span>
+            <span class="boursecu-assets__popup-value">{{ line.value }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { useWalletAssets } from '@/composables/useWalletAssets'
+import {
+  buildBoursecuHomeAssetRows,
+  type BoursecuHomeAssetRowId,
+} from '@/utils/productAssets'
+import { getTradeBuyPrice, lastPrice } from '@/utils/price'
+
+withDefaults(
+  defineProps<{
+    variant?: 'mobile' | 'desktop'
+    iconColor?: string
+  }>(),
+  {
+    variant: 'mobile',
+    iconColor: 'primary',
+  }
+)
+
+const { assetsSummary } = useWalletAssets()
+const rootRef = ref<HTMLElement | null>(null)
+const openRowId = ref<BoursecuHomeAssetRowId | null>(null)
+
+const rows = computed(() =>
+  buildBoursecuHomeAssetRows(assetsSummary.value, getTradeBuyPrice(lastPrice.value))
+)
+
+function toggleRow(rowId: BoursecuHomeAssetRowId) {
+  openRowId.value = openRowId.value === rowId ? null : rowId
+}
+
+onClickOutside(rootRef, () => {
+  openRowId.value = null
+})
+</script>
+
+<style scoped lang="less">
+.boursecu-assets {
+  position: relative;
+  z-index: 20;
+}
+
+.boursecu-assets__row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--app-color-primary, #133050);
+  font-size: 0.875rem;
+}
+
+.boursecu-assets__row--spaced {
+  margin-top: 0.5rem;
+}
+
+.boursecu-assets__value {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.boursecu-assets__info-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.boursecu-assets__info-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.boursecu-assets__popup {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 40;
+  min-width: min(18rem, 78vw);
+  padding: 10px 12px;
+  border-radius: 10px;
+  background: #fff;
+  border: 1px solid #d4e3de;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+}
+
+.boursecu-assets__popup-line {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 6px 0;
+  font-size: 0.8125rem;
+  color: #374151;
+
+  &:not(:last-child) {
+    border-bottom: 1px solid #eef2f1;
+  }
+}
+
+.boursecu-assets__popup-label {
+  flex: 1;
+  color: #6b7280;
+}
+
+.boursecu-assets__popup-value {
+  font-weight: 600;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.boursecu-assets__popup-line--profit .boursecu-assets__popup-value {
+  color: #16a34a;
+}
+
+.boursecu-assets__popup-line--loss .boursecu-assets__popup-value {
+  color: #dc2626;
+}
+
+.boursecu-assets--desktop {
+  margin-bottom: 16px;
+  padding: 16px 18px;
+  border-radius: 12px;
+  background-color: #eff5f3;
+
+  .boursecu-assets__row {
+    justify-content: flex-start;
+    font-size: 0.9375rem;
+  }
+
+  .boursecu-assets__popup {
+    right: auto;
+    left: 0;
+    min-width: 20rem;
+  }
+}
+</style>

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

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import BoursecuAssetsSummary from '../../components/BoursecuAssetsSummary.vue'
 import { usePriceWithoutType } from '@/utils/usePrice'
 import { useWalletAssets } from '@/composables/useWalletAssets'
 import type { WalletMetalTotal } from '@/models/walletAssets'
-import { buildBoursecuHomeAssetRows, resolveSummaryMetalWeight } from '@/utils/productAssets'
+import { resolveSummaryMetalWeight } from '@/utils/productAssets'
 import { useHomePageContext } from '../../composables/useHomePage'
 
 const emit = defineEmits<{
@@ -29,9 +30,6 @@ type MetricItem = {
   label: string
   value: string
   metal?: WalletMetalTotal
-  modalText?: string
-  modalTitle?: string
-  modalContent?: string
   showInfo?: boolean
   onInfo?: 'gold' | 'rial'
 }
@@ -47,23 +45,6 @@ const metrics = computed<MetricItem[]>(() => {
     })
   }
 
-  if (isBoursecuLayout.value) {
-    buildBoursecuHomeAssetRows(assetsSummary.value).forEach((row) => {
-      items.push({
-        id: row.id,
-        label: row.label,
-        value: row.value,
-        metal: row.metal,
-        modalText: row.modalText,
-        modalTitle: row.modalTitle,
-        modalContent: row.modalContent,
-        showInfo: row.info !== 'none',
-        onInfo: row.info === 'rial' ? 'rial' : 'gold',
-      })
-    })
-    return items
-  }
-
   if (meta.value?.single_metal && metalTotals.value[0]) {
     const metal = metalTotals.value[0]
     items.push({
@@ -108,13 +89,19 @@ function handleInfo(metric: MetricItem) {
     return
   }
   if (metric.metal) {
-    emit('openGoldModal', metric.metal, metric.modalText, metric.modalTitle, metric.modalContent)
+    emit('openGoldModal', metric.metal)
   }
 }
 </script>
 
 <template>
-  <div class="dhome-metrics">
+  <BoursecuAssetsSummary
+    v-if="isBoursecuLayout"
+    variant="desktop"
+    icon-color="tertiary"
+  />
+
+  <div v-else 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>