Merge origin/modular into feature/responsive-layout-refactor.

Keep responsive layout refactor while taking modular store-hours, transaction price, and garoosi login fixes.

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

src/views/base/transactions/components/Item.vue

@@ -15,12 +15,12 @@
       <p class="dtxn-row__title">{{ props.item.title }}</p>
       <div class="dtxn-row__meta">
         <span>{{ toJalaliOutOfUTC(props.item.expire_at) }}</span>
-        <span :class="props.item.gold >= 0 ? 'text-green-600' : 'text-red-600'">
-          {{ props.item.gold }} {{ props.item.unit }}
+        <span :class="goldAmount >= 0 ? 'text-green-600' : 'text-red-600'">
+          {{ formatGoldAmount(goldAmount) }} {{ props.item.unit }}
         </span>
         <span v-if="isGold">
           قیمت معامله:
-          {{ usePriceWithoutType(parseInt((Math.abs(props.item.cash) / Math.abs(props.item.gold)).toFixed(0))) }}
+          {{ usePriceWithoutType(tradePrice) }}
           ریال
         </span>
       </div>
@@ -56,10 +56,10 @@
         </div>
         <div class="flex justify-between mt-2">
           <div
-            :class="props.item.gold >= 0 ? 'text-green-600' : 'text-red-600'"
+            :class="goldAmount >= 0 ? 'text-green-600' : 'text-red-600'"
             class="text-gray-500 text-xs number-ltr"
           >
-            {{ props.item.gold }}
+            {{ formatGoldAmount(goldAmount) }}
             <div>{{ props.item.unit }}</div>
           </div>
           <div class="text-gray-500 flex gap-1 text-xs items-center number-ltr">
@@ -75,7 +75,7 @@
       <div class="text-gray-500">قیمت معامله:</div>
       <div class="text-gray-500 flex gap-1 text-xs items-center">
         <div class="text-base">
-          {{ usePriceWithoutType(parseInt((Math.abs(props.item.cash) / Math.abs(props.item.gold)).toFixed(0))) }}
+          {{ usePriceWithoutType(tradePrice) }}
         </div>
         ریال
       </div>
@@ -114,7 +114,12 @@
 
 <script lang="ts" setup>
 import Icon from '@/components/BasicPacks/BasicIcon.vue'
-import { usePriceWithoutType } from '@/utils/usePrice'
+import {
+  formatGoldAmount,
+  getTransactionGoldAmount,
+  getTransactionTradePrice,
+  usePriceWithoutType,
+} from '@/utils/usePrice'
 import BasicActionSheet from '@/components/BasicPacks/BasicActionSheet.vue'
 import BasicModal from '@/components/BasicPacks/BasicModal.vue'
 import { computed, ref } from 'vue'
@@ -133,6 +138,9 @@ const props = withDefaults(
   { variant: 'mobile' },
 )
 
+const goldAmount = computed(() => getTransactionGoldAmount(props.item))
+const tradePrice = computed(() => getTransactionTradePrice(props.item))
+
 const isUp = computed(
   () =>
     props.item.type === 3