1405/04/25

-

components.d.ts

@@ -16,13 +16,16 @@ declare module 'vue' {
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     AModal: typeof import('ant-design-vue/es')['Modal']
+    ARadio: typeof import('ant-design-vue/es')['Radio']
     ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
     ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
     ASelect: typeof import('ant-design-vue/es')['Select']
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASlider: typeof import('ant-design-vue/es')['Slider']
     ASpin: typeof import('ant-design-vue/es')['Spin']
+    ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATag: typeof import('ant-design-vue/es')['Tag']
+    ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     BaseDatePicker: typeof import('./src/components/BasicPacks/BaseDatePicker/src/BaseDatePicker.vue')['default']
     Basic: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/basic.vue')['default']
@@ -53,6 +56,7 @@ declare module 'vue' {
     ListAnim: typeof import('./src/components/ListAnim.vue')['default']
     Mode: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/mode.vue')['default']
     PresettedRanges: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/presetted-ranges.vue')['default']
+    ProductImage: typeof import('./src/components/ProductImage.vue')['default']
     RangePicker: typeof import('./src/components/BasicPacks/BaseDatePicker/src/datePick/demo/range-picker.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
@@ -66,5 +70,6 @@ declare module 'vue' {
     TransactionSkeleton: typeof import('./src/components/TransactionSkeleton.vue')['default']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanDialog: typeof import('vant/es')['Dialog']
+    VanField: typeof import('vant/es')['Field']
   }
 }

index.html

@@ -1,49 +1,710 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="fa" dir="rtl">
 <head>
-  <meta charset="UTF-8">
-  <link rel="icon" href="/favicon.png">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
-  <meta http-equiv="Pragma" content="no-cache">
-  <meta http-equiv="Expires" content="0">
-  <meta name="theme-color" content="#ffffff">
-  <title>Ghatreh</title>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.png" />
 
+  <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
+  <meta http-equiv="Pragma" content="no-cache" />
+  <meta http-equiv="Expires" content="0" />
+
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content"
+  />
+
+  <title>در حال بارگذاری...</title>
+<!---->
   <style>
-      #whatsapp-button {
-          position: fixed;
-          bottom: 90px;
-          right: 20px;
-          width: 60px;
-          height: 60px;
-          background-color: #ffffff;
-          border-radius: 50%;
+      :root {
+          --boot-bg: #ffffff;
+          --boot-bg-soft: #f8fafc;
+          --boot-card: rgba(255, 255, 255, 0.88);
+          --boot-border: rgba(15, 23, 42, 0.08);
+          --boot-text: #111827;
+          --boot-muted: rgba(15, 23, 42, 0.62);
+          --boot-accent: #2563eb;
+          --boot-orb: rgba(37, 99, 235, 0.10);
+          --boot-spinner-track: rgba(15, 23, 42, 0.10);
+          --boot-shadow: rgba(15, 23, 42, 0.10);
+      }
+
+      html,
+      body {
+          margin: 0;
+          min-height: 100%;
+          background: var(--boot-bg);
+      }
+
+      #app {
+          min-height: 100vh;
+      }
+
+      .boot-loader {
+          min-height: 100vh;
           display: flex;
-          justify-content: center;
           align-items: center;
-          box-shadow: 0 4px 10px rgba(0,0,0,0.3);
-          cursor: pointer;
-          transition: transform 0.2s ease, box-shadow 0.2s ease;
-          z-index: 9999;
+          justify-content: center;
+          direction: rtl;
+          font-family:
+                  system-ui,
+                  -apple-system,
+                  BlinkMacSystemFont,
+                  "Segoe UI",
+                  sans-serif;
+          background:
+                  radial-gradient(circle at top, var(--boot-orb), transparent 38%),
+                  linear-gradient(
+                          135deg,
+                          var(--boot-bg) 0%,
+                          var(--boot-bg-soft) 100%
+                  );
+          color: var(--boot-text);
+          overflow: hidden;
       }
 
-      #whatsapp-button:hover {
-          transform: scale(1.1);
-          box-shadow: 0 6px 14px rgba(0,0,0,0.3);
+      .boot-loader__card {
+          position: relative;
+          width: min(340px, calc(100vw - 48px));
+          padding: 30px 22px 28px;
+          border-radius: 24px;
+          text-align: center;
+          background: var(--boot-card);
+          border: 1px solid var(--boot-border);
+          box-shadow: 0 18px 48px var(--boot-shadow);
+          backdrop-filter: blur(10px);
       }
 
-      #whatsapp-button:hover + #whatsapp-tooltip {
-          opacity: 1;
-          transform: translateY(0);
+      .boot-loader__orb {
+          position: absolute;
+          top: -72px;
+          left: 50%;
+          width: 150px;
+          height: 150px;
+          transform: translateX(-50%);
+          border-radius: 999px;
+          background: var(--boot-orb);
+          filter: blur(8px);
+          pointer-events: none;
+      }
+
+      .boot-loader__spinner {
+          position: relative;
+          z-index: 1;
+          width: 56px;
+          height: 56px;
+          margin: 0 auto 20px;
+          border-radius: 999px;
+          border: 4px solid var(--boot-spinner-track);
+          border-top-color: var(--boot-accent);
+          animation: boot-spin 0.9s linear infinite;
+      }
+
+      .boot-loader__title {
+          position: relative;
+          z-index: 1;
+          margin: 0;
+          font-size: 19px;
+          font-weight: 800;
+          letter-spacing: -0.02em;
+      }
+
+      .boot-loader__text {
+          position: relative;
+          z-index: 1;
+          margin: 10px 0 0;
+          color: var(--boot-muted);
+          font-size: 14px;
+          line-height: 2;
+      }
+
+      @keyframes boot-spin {
+          to {
+              transform: rotate(360deg);
+          }
       }
   </style>
+
+  <script>
+    ;(function () {
+      var CONFIG_COOKIE_NAME = 'APP_CONFIG_CACHE'
+
+      function getCookie(name) {
+        var cookie = document.cookie.split('; ').find(function (row) {
+          return row.indexOf(name + '=') === 0
+        })
+
+        if (!cookie) return null
+
+        return cookie.substring(name.length + 1)
+      }
+
+      function readCachedConfig() {
+        try {
+          var rawCookie = getCookie(CONFIG_COOKIE_NAME)
+
+          if (!rawCookie) return null
+
+          var decoded = decodeURIComponent(rawCookie)
+          var payload = JSON.parse(decoded)
+
+          return payload && payload.config ? payload.config : null
+        } catch (error) {
+          console.warn('Boot theme: failed to read cached config', error)
+          return null
+        }
+      }
+
+      function normalizeHex(hex) {
+        if (!hex || typeof hex !== 'string') return null
+
+        var value = hex.trim()
+
+        if (!value) return null
+
+        if (value[0] !== '#') {
+          value = '#' + value
+        }
+
+        if (/^#[0-9a-fA-F]{3}$/.test(value)) {
+          value =
+            '#' +
+            value[1] +
+            value[1] +
+            value[2] +
+            value[2] +
+            value[3] +
+            value[3]
+        }
+
+        if (!/^#[0-9a-fA-F]{6}$/.test(value)) return null
+
+        return value
+      }
+
+      function hexToRgb(hex) {
+        var normalized = normalizeHex(hex)
+
+        if (!normalized) return null
+
+        var num = parseInt(normalized.slice(1), 16)
+
+        return {
+          r: (num >> 16) & 255,
+          g: (num >> 8) & 255,
+          b: num & 255
+        }
+      }
+
+      function rgbToHex(r, g, b) {
+        function toHex(value) {
+          var hex = Math.max(0, Math.min(255, Math.round(value))).toString(16)
+          return hex.length === 1 ? '0' + hex : hex
+        }
+
+        return '#' + toHex(r) + toHex(g) + toHex(b)
+      }
+
+      function mix(hexA, hexB, weight) {
+        var a = hexToRgb(hexA)
+        var b = hexToRgb(hexB)
+
+        if (!a || !b) return hexA
+
+        return rgbToHex(
+          a.r * (1 - weight) + b.r * weight,
+          a.g * (1 - weight) + b.g * weight,
+          a.b * (1 - weight) + b.b * weight
+        )
+      }
+
+      function brightness(hex) {
+        var rgb = hexToRgb(hex)
+
+        if (!rgb) return 0
+
+        return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000
+      }
+
+      function hexToRgba(hex, alpha) {
+        var rgb = hexToRgb(hex)
+
+        if (!rgb) return 'rgba(96, 165, 250, ' + alpha + ')'
+
+        return 'rgba(' + rgb.r + ', ' + rgb.g + ', ' + rgb.b + ', ' + alpha + ')'
+      }
+
+      function setVar(name, value) {
+        document.documentElement.style.setProperty(name, value)
+      }
+
+      function applyBootTheme() {
+        var config = readCachedConfig()
+        var user = config && config.user ? config.user : null
+
+        if (!user) return
+
+        var tenantColor = normalizeHex(user.color)
+        var tenantSecondary = normalizeHex(user.secondary_color)
+        var tenantBackground = normalizeHex(user.background_color)
+
+        /**
+         * مهم:
+         * background_color بک‌گراند اپ است.
+         * اگر نبود، لودینگ باید روشن بماند، نه اینکه color را بک‌گراند کنیم.
+         */
+        var bg = tenantBackground || '#ffffff'
+
+        /**
+         * color و secondary_color فقط برای accent استفاده می‌شوند.
+         */
+        var accent = tenantSecondary || tenantColor || '#2563eb'
+
+        var isLight = brightness(bg) > 155
+
+        var bgSoft = isLight ? mix(bg, accent, 0.045) : mix(bg, '#ffffff', 0.055)
+
+        var text = isLight ? '#111827' : '#ffffff'
+        var muted = isLight ? 'rgba(15, 23, 42, 0.62)' : 'rgba(255, 255, 255, 0.70)'
+
+        var card = isLight ? 'rgba(255, 255, 255, 0.88)' : 'rgba(255, 255, 255, 0.07)'
+        var border = isLight ? 'rgba(15, 23, 42, 0.08)' : 'rgba(255, 255, 255, 0.12)'
+
+        var orb = hexToRgba(accent, isLight ? 0.10 : 0.18)
+        var spinnerTrack = isLight ? 'rgba(15, 23, 42, 0.10)' : 'rgba(255, 255, 255, 0.14)'
+        var shadow = isLight ? 'rgba(15, 23, 42, 0.10)' : 'rgba(0, 0, 0, 0.24)'
+
+        setVar('--boot-bg', bg)
+        setVar('--boot-bg-soft', bgSoft)
+        setVar('--boot-accent', accent)
+        setVar('--boot-text', text)
+        setVar('--boot-muted', muted)
+        setVar('--boot-card', card)
+        setVar('--boot-border', border)
+        setVar('--boot-orb', orb)
+        setVar('--boot-spinner-track', spinnerTrack)
+        setVar('--boot-shadow', shadow)
+
+        document.title = user.name_fa || user.name || 'در حال بارگذاری...'
+      }
+
+      applyBootTheme()
+    })()
+  </script>
 </head>
+
 <body>
-<div id="app"></div>
+<div id="app">
+  <div class="boot-loader">
+    <div class="boot-loader__card">
+      <div class="boot-loader__orb"></div>
+      <div class="boot-loader__spinner"></div>
+
+      <h1 class="boot-loader__title">در حال هدایت به سامانه</h1>
+      <p class="boot-loader__text">لطفاً چند لحظه صبر کنید...</p>
+    </div>
+  </div>
+</div>
+
+<script>
+  ;(function () {
+    var BOOT_TIMEOUT_MS = 90000
+
+    var RETRY_KEY = '__APP_BOOT_RETRY_CLICKED__'
+    var RECOVERY_KEY = '__APP_BOOT_RECOVERY_DONE__'
+
+    var CONFIG_COOKIE_NAME = 'APP_CONFIG_CACHE'
+    var CONFIG_COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 7
+
+    var TOKEN_STORAGE_KEY = 'liman_user_token'
+    var VERSION_SUCCESS_URL_KEY = 'VERSION_Success_URL'
+    var VERSION_STORAGE_KEY = 'version'
+    var CONFIG_SUCCESS_URL_KEY = 'CONFIG_Success_URL'
+
+    function getProtocol() {
+      return window.location.protocol === 'https:' ? 'https:' : 'http:'
+    }
+
+    function getVersionUrls() {
+      var protocol = getProtocol()
+
+      return [
+        'https://nerkh.gold/get_version',
+        'https://tablo.talasevin.ir/get_version',
+        'https://abshode-service.montgit.ir/server/get_version',
+        protocol + '//212.23.201.173:8381/get_version',
+        protocol + '//91.212.174.137:4040/server/get_version'
+      ]
+    }
+
+    function getConfigUrls() {
+      var protocol = getProtocol()
+
+      return [
+        protocol + '//nerkh.gold/get_user',
+        protocol + '//tablo.talasevin.ir/get_user',
+        protocol + '//abshode-service.montgit.ir/server/get_user',
+        protocol + '//212.23.201.173:8381/get_user',
+        protocol + '//91.212.174.137:4040/server/get_user'
+      ]
+    }
+
+    function sortVersionUrls(urls) {
+      var lastSuccessUrl = localStorage.getItem(VERSION_SUCCESS_URL_KEY)
+
+      if (!lastSuccessUrl) {
+        return urls.slice()
+      }
+
+      return [lastSuccessUrl].concat(urls.filter(function (url) {
+        return url !== lastSuccessUrl
+      }))
+    }
+
+    function sortByLastSuccess(urls) {
+      var lastSuccessUrl = localStorage.getItem(CONFIG_SUCCESS_URL_KEY)
+
+      return urls.slice().sort(function (a, b) {
+        if (a === lastSuccessUrl) return -1
+        if (b === lastSuccessUrl) return 1
+        return 0
+      })
+    }
+
+    function normalizeVersionResponse(data) {
+      if (typeof data === 'string' || typeof data === 'number') {
+        return String(data).trim()
+      }
+
+      if (!data) return ''
+
+      if (typeof data.data === 'string' || typeof data.data === 'number') {
+        return String(data.data).trim()
+      }
+
+      var version =
+        data.version ||
+        data.value ||
+        (data.data && typeof data.data === 'object' ? data.data.version : '')
+
+      return version ? String(version).trim() : ''
+    }
+
+    async function fetchJsonOrText(url, timeout) {
+      var controller = new AbortController()
+
+      var timeoutId = window.setTimeout(function () {
+        controller.abort()
+      }, timeout)
+
+      try {
+        var response = await fetch(url, {
+          method: 'GET',
+          headers: {
+            Accept: 'application/json'
+          },
+          cache: 'no-store',
+          signal: controller.signal
+        })
+
+        if (!response.ok) {
+          throw new Error('Request failed: ' + response.status)
+        }
+
+        var contentType = response.headers.get('content-type') || ''
+
+        if (contentType.indexOf('application/json') !== -1) {
+          return await response.json()
+        }
+
+        return await response.text()
+      } finally {
+        window.clearTimeout(timeoutId)
+      }
+    }
+
+    async function fetchVersionFromUrl(url, timeout) {
+      var controller = new AbortController()
+      var timeoutId = window.setTimeout(function () {
+        controller.abort()
+      }, timeout)
+
+      try {
+        var response = await fetch(url, {
+          method: 'GET',
+          headers: {
+            Accept: 'application/json'
+          },
+          cache: 'no-store',
+          signal: controller.signal
+        })
+
+        if (!response.ok) {
+          throw new Error('Version request failed: ' + response.status)
+        }
+
+        var contentType = response.headers.get('content-type') || ''
+        var data
+
+        if (contentType.indexOf('application/json') !== -1) {
+          data = await response.json()
+        } else {
+          data = await response.text()
+        }
+
+        var version = normalizeVersionResponse(data)
+
+        if (!version) {
+          throw new Error('Version response is empty')
+        }
+
+        localStorage.setItem(VERSION_SUCCESS_URL_KEY, url)
+        return version
+      } catch (error) {
+        if (localStorage.getItem(VERSION_SUCCESS_URL_KEY) === url) {
+          localStorage.removeItem(VERSION_SUCCESS_URL_KEY)
+        }
+        console.warn('Version failed:', url, error)
+        return undefined
+      } finally {
+        window.clearTimeout(timeoutId)
+      }
+    }
+
+    async function loadRemoteVersion(rounds) {
+      var urls = sortVersionUrls(getVersionUrls())
+
+      for (var round = 1; round <= rounds; round++) {
+        for (var i = 0; i < urls.length; i++) {
+          var timeout = i === urls.length - 1 ? 6000 : 3500
+          var result = await fetchVersionFromUrl(urls[i], timeout)
+
+          if (result) {
+            return result
+          }
+        }
+      }
+
+      return null
+    }
+
+    async function fetchFreshConfig(rounds) {
+      var urls = sortByLastSuccess(getConfigUrls())
+
+      for (var round = 1; round <= rounds; round++) {
+        for (var i = 0; i < urls.length; i++) {
+          var url = urls[i]
+
+          try {
+            var config = await fetchJsonOrText(url, i === urls.length - 1 ? 7000 : 4000)
+
+            if (!config || typeof config !== 'object') {
+              throw new Error('Config response is invalid')
+            }
+
+            return {
+              config: config,
+              url: url
+            }
+          } catch (error) {
+            if (localStorage.getItem(CONFIG_SUCCESS_URL_KEY) === url) {
+              localStorage.removeItem(CONFIG_SUCCESS_URL_KEY)
+            }
+            console.warn('Config failed:', url, 'round:', round, error)
+          }
+        }
+      }
+
+      throw new Error('Cannot fetch fresh config')
+    }
+
+    function writeConfigCookie(config) {
+      try {
+        var payload = {
+          cached_at: Date.now(),
+          config: config
+        }
+
+        var encoded = encodeURIComponent(JSON.stringify(payload))
+        var secure = window.location.protocol === 'https:' ? '; Secure' : ''
+
+        document.cookie =
+          CONFIG_COOKIE_NAME +
+          '=' +
+          encoded +
+          '; Path=/; Max-Age=' +
+          CONFIG_COOKIE_MAX_AGE_SECONDS +
+          '; SameSite=Lax' +
+          secure
+      } catch (error) {
+        console.warn('Failed to write config cookie:', error)
+      }
+    }
+
+    function clearReadableCookies() {
+      document.cookie.split(';').forEach(function (cookie) {
+        var name = cookie.split('=')[0] && cookie.split('=')[0].trim()
+
+        if (!name) return
+
+        document.cookie = name + '=; Path=/; Max-Age=0; SameSite=Lax'
+      })
+    }
+
+    function clearLocalStorageExceptToken() {
+      var token = localStorage.getItem(TOKEN_STORAGE_KEY)
+
+      localStorage.clear()
+
+      if (token) {
+        localStorage.setItem(TOKEN_STORAGE_KEY, token)
+      }
+    }
+
+    async function clearServiceWorkersAndCaches() {
+      try {
+        if ('serviceWorker' in navigator) {
+          var registrations = await navigator.serviceWorker.getRegistrations()
+
+          await Promise.all(
+            registrations.map(function (registration) {
+              return registration.unregister()
+            })
+          )
+        }
+      } catch (error) {
+        console.warn('Failed to unregister service workers:', error)
+      }
+
+      try {
+        if ('caches' in window) {
+          var keys = await caches.keys()
+
+          await Promise.all(
+            keys.map(function (key) {
+              return caches.delete(key)
+            })
+          )
+        }
+      } catch (error) {
+        console.warn('Failed to clear caches:', error)
+      }
+    }
+
+    function reloadWithCacheBust() {
+      var url = new URL(window.location.href)
+      url.searchParams.set('__boot_recover', String(Date.now()))
+      window.location.replace(url.toString())
+    }
+
+    function renderRecovering(text) {
+      var app = document.getElementById('app')
+      if (!app) return
+
+      app.innerHTML =
+        '<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; direction: rtl; font-family: sans-serif; padding: 24px; background: var(--boot-bg); color: var(--boot-text);">' +
+        '<div style="width: min(420px, 100%); text-align: center; background: var(--boot-card); border: 1px solid var(--boot-border); border-radius: 24px; padding: 28px 22px;">' +
+        '<div style="width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 999px; border: 4px solid rgba(255,255,255,0.18); border-top-color: var(--boot-accent); animation: bootSpin 0.9s linear infinite;"></div>' +
+        '<style>@keyframes bootSpin { to { transform: rotate(360deg); } }</style>' +
+        '<h2 style="margin: 0 0 12px; font-size: 20px;">در حال بازیابی برنامه</h2>' +
+        '<p style="margin: 0; color: var(--boot-muted); line-height: 2; font-size: 14px;">' +
+        (text || 'لطفاً چند لحظه صبر کنید.') +
+        '</p>' +
+        '</div>' +
+        '</div>'
+    }
+
+    function renderBootError() {
+      var app = document.getElementById('app')
+      if (!app) return
+
+      app.innerHTML =
+        '<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; direction: rtl; font-family: sans-serif; padding: 24px; background: var(--boot-bg); color: var(--boot-text);">' +
+        '<div style="width: min(420px, 100%); text-align: center; background: var(--boot-card); border: 1px solid var(--boot-border); border-radius: 24px; padding: 28px 22px;">' +
+        '<div style="font-size: 42px; margin-bottom: 12px;">⚠️</div>' +
+        '<h2 style="margin: 0 0 12px; font-size: 20px;">خطا در بارگذاری برنامه</h2>' +
+        '<p style="margin: 0 0 20px; color: var(--boot-muted); line-height: 2; font-size: 14px;">' +
+        'ارتباط با سرور برقرار نشد یا فایل‌های برنامه به‌درستی دریافت نشدند.' +
+        '</p>' +
+        '<button onclick="window.__APP_BOOT_SIMPLE_RETRY__()" style="padding: 11px 22px; border: 0; border-radius: 12px; background: var(--boot-accent); color: white; cursor: pointer; font-weight: 700;">' +
+        'تلاش مجدد' +
+        '</button>' +
+        '<button onclick="window.__APP_BOOT_CLEAN_RELOAD__()" style="margin-right: 8px; padding: 11px 18px; border: 1px solid var(--boot-border); border-radius: 12px; background: transparent; color: var(--boot-text); cursor: pointer; font-weight: 700;">' +
+        'پاک‌سازی و تلاش مجدد' +
+        '</button>' +
+        '</div>' +
+        '</div>'
+    }
+
+    async function cleanFetchAndReload() {
+      renderRecovering('در حال دریافت تنظیمات جدید برنامه...')
+
+      var version = await loadRemoteVersion(5)
+      var freshConfigResult = await fetchFreshConfig(5)
+
+      clearReadableCookies()
+      // clearLocalStorageExceptToken()
+      await clearServiceWorkersAndCaches()
+
+      writeConfigCookie(freshConfigResult.config)
+      localStorage.setItem(CONFIG_SUCCESS_URL_KEY, freshConfigResult.url)
+
+      if (version) {
+        localStorage.setItem(VERSION_STORAGE_KEY, version)
+      }
+
+      sessionStorage.removeItem(RETRY_KEY)
+      sessionStorage.removeItem(RECOVERY_KEY)
+
+      reloadWithCacheBust()
+    }
+
+    window.__APP_BOOT_SIMPLE_RETRY__ = function () {
+      sessionStorage.setItem(RETRY_KEY, '1')
+      reloadWithCacheBust()
+    }
+
+    window.__APP_BOOT_CLEAN_RELOAD__ = async function () {
+      try {
+        sessionStorage.setItem(RECOVERY_KEY, '1')
+        await cleanFetchAndReload()
+      } catch (error) {
+        console.error('Manual boot recovery failed:', error)
+        renderBootError()
+      }
+    }
+
+    window.__BOOT_TIMEOUT__ = window.setTimeout(async function () {
+      if (window.__APP_BOOTSTRAPPED__) return
+
+      var app = document.getElementById('app')
+      var stillBooting = app && app.querySelector('.boot-loader')
+
+      if (!stillBooting) return
+
+      if (!sessionStorage.getItem(RETRY_KEY)) {
+        renderBootError()
+        return
+      }
+
+      if (!sessionStorage.getItem(RECOVERY_KEY)) {
+        sessionStorage.setItem(RECOVERY_KEY, '1')
+
+        try {
+          await cleanFetchAndReload()
+        } catch (error) {
+          console.error('Auto boot recovery after retry failed:', error)
+          renderBootError()
+        }
+
+        return
+      }
+
+      renderBootError()
+    }, BOOT_TIMEOUT_MS)
+  })()
+</script>
+
 <script type="module" src="/src/main.ts"></script>
-<a href="https://web.rubika.ir/#c=u0I8F1U0a939b0df5ba9f73618d33d7c" target="_blank" id="whatsapp-button">
-  <img class="p-2" src="/src/assets/img/rubika.webp" alt="" />
-</a>
 </body>
-</html>
+</html>

package.json

@@ -19,6 +19,7 @@
     "axios": "^1.6.2",
     "dayjalali": "^1.0.1",
     "echarts": "^5.4.3",
+    "express": "^5.2.1",
     "jalaliday": "^2.3.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",

public/.well-known/assetlinks.json

@@ -1,10 +0,0 @@
-[
-  {
-    "relation": ["delegate_permission/common.handle_all_urls"],
-    "target": {
-      "namespace": "android_app",
-      "package_name": "ir.ghatreh.app",
-      "sha256_cert_fingerprints": ["60:54:C6:C1:22:6C:2E:EA:A1:05:02:B1:17:F5:7D:49:1A:C0:84:FF:4C:ED:FD:42:D9:7F:DF:B2:70:37:8E:03"]
-    }
-  }
-]

src/App.vue

@@ -1,96 +1,88 @@
 <template>
-  <div class="desktopConfig w-full right-0 left-0 absolute">
-    <div v-if="popVisible" class="top-0 bottom-0 wrap-fix bg-primary z-100 opacity-60">
-      <div class="absolute right-0 left-0 bottom-10vh flex flex-col items-center">
-        <div><BasicButton>درباره ما</BasicButton></div>
-        <div></div>
-        <div></div>
-      </div>
-    </div>
+  <div class="desktopConfig w-full right-0 left-0">
     <transition mode="out-in" name="fade">
       <AConfigProvider
         v-if="!showSplash"
-        :theme="{
-          token: {
-            colorPrimary: colors.primary,
-            colorLink: colors.primary,
-            colorLinkActive: colors.primary,
-            colorLinkHover: colors['primary-rgba']
-          }
-        }"
+        :theme="antDesignTheme"
         direction="rtl"
       >
         <router-view v-slot="{ Component, route }">
-          <!-- Use any custom transition and  to `fade` -->
           <transition :name="route.meta.transition || 'fade'">
-            <div>
-              <component :is="Component" />
-            </div>
+            <component :is="Component" :key="route.fullPath" class="app-main" />
           </transition>
         </router-view>
       </AConfigProvider>
 
-      <div v-else class="flex bottom-0 wrap-fix top-0 bg-white z-1000000000000 justify-center">
-        <div class="top-0 wrap-fix h-1/3 w-screen flex">
-          <img :src="img_topGradiant" alt="" class="absolute z-10 w-screen h-full object-cover" />
-          <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none" />
+      <div v-else class="app-splash-screen flex items-center justify-center bg-white">
+        <div class="app-splash-screen__gradient app-splash-screen__gradient--top h-1/3 flex">
+          <img :src="img_topGradiant" alt="" class="absolute z-10 w-full h-full object-cover" />
+          <img :src="img_pattern" alt="" class="absolute w-full h-full object-none" />
         </div>
-        <div class="wrap-fix bottom-0 h-1/3 w-screen">
+        <div class="app-splash-screen__gradient app-splash-screen__gradient--bottom h-1/3">
           <img
             :src="img_bottomGradiant"
             alt=""
-            class="absolute z-10 w-screen h-full object-cover"
+            class="absolute z-10 w-full h-full object-cover"
           />
-          <img :src="img_pattern" alt="" class="absolute w-screen h-full object-none" />
+          <img :src="img_pattern" alt="" class="absolute w-full h-full object-none" />
         </div>
-        <div class="self-center splash_appear_fade_in">
-                    <img :src="logoFull" class="h-[20vh]">
-<!--          <img :src="logo" alt="" class="z-100 bg-primary rounded-full w-full aspect-square self-center h-40" />-->
+        <div class="splash_appear_fade_in relative z-10">
+          <img :src="logoFull" class="h-[20vh] max-h-[180px] w-auto object-contain" alt="" />
         </div>
-        <div class="fixed w-full bottom-5 home_appear_fade_in_up">
-          <div class="text-center text-xs">نسخه: {{ pkg.version }}</div>
+        <div class="app-splash-screen__version home_appear_fade_in_up">
+          <div class="text-center text-xs">نسخه: {{ displayVersion }}</div>
         </div>
-        <div class="absolute bottom-10">
+        <div class="app-splash-screen__spinner">
           <a-spin :indicator="indicator" size="small" />
         </div>
       </div>
     </transition>
-    <van-dialog
-      v-model:show="versionDialog"
-      class="updateButton"
-      confirm-button-text="به روزرسانی کنید"
-      show-confirm-button
-      @confirm="update()"
+
+    <div
+      v-if="showSupportButton && !showSplash"
+      id="support-button"
+      class="draggable-support-button"
+      :class="{ 'is-dragging': supportDragging }"
+      :style="supportButtonStyle"
+      title="پشتیبانی"
+      @pointerdown="onSupportPointerDown"
+      @pointermove="onSupportPointerMove"
+      @pointerup="handleSupportPointerUp"
+      @pointercancel="onSupportPointerCancel"
     >
-      <div class="flex flex-col items-center p-2">
-        <DotLottieVue
-          class="w-full aspect-square"
-          autoplay
-          loop
-          src="https://lottie.host/cb620e8e-c64a-42e8-a6b5-8844146e5999/nmft7oBO8q.json"
-        />
-        <div class="home_appear_fade_in_up mt-2">نسخه جدید قطره منتشر شد!</div>
+      <div class="support-button-inner" :style="{ '--support-accent': supportAccentColor }">
+        <BasicIcon :icon="supportIcon" size="18" class="support-button-icon" />
+        <span class="support-button-label">پشتیبانی</span>
       </div>
-    </van-dialog>
+    </div>
+
+    <VersionUpdateModal />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { colors } from './themeConfig'
+import { getDisplayAppVersion } from '@/config/config-cache'
+import { computed, defineAsyncComponent, h, onMounted, ref } from 'vue'
 import pkg from '../package.json'
-import { useRegisterSW } from 'virtual:pwa-register/vue'
-import { h, onMounted, ref } from 'vue'
-import { update } from 'lodash'
 import img_topGradiant from '@/views/login/assets/img/gr_top_white.svg'
 import img_pattern from '@/views/login/assets/img/pattern.svg'
 import { LoadingOutlined } from '@ant-design/icons-vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import {
+  buildSupportMessengerUrl,
+  loadSupportMessengerFromSettings,
+  supportMessengerSettings,
+} from '@/utils/supportMessenger'
+import { useDraggableFloatingButton } from '@/utils/useDraggableFloatingButton'
+import { useApplyDesktopLayoutClass } from '@/layouts/composables/useAppLayout'
+import { getProjectBranding } from '@/utils/project'
 
 import img_bottomGradiant from '@/views/login/assets/img/gr_bottom_white.svg'
 import logoFull from '@/assets/img/logo_full_.png'
-import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
-import BasicButton from '@/components/BasicPacks/BasicButton.vue'
 
-const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW()
+const VersionUpdateModal = defineAsyncComponent(
+  () => import('@/modules/version/VersionUpdateModal.vue')
+)
 
 const indicator = h(LoadingOutlined, {
   style: {
@@ -98,48 +90,152 @@ const indicator = h(LoadingOutlined, {
   },
   spin: true
 })
+const displayVersion = getDisplayAppVersion(pkg.version)
 const showSplash = ref(true)
 
+const antDesignTheme = computed(() => {
+  const primary = getProjectBranding().accentColor
 
-onMounted(() => {
-  checkVersion()
+  return {
+    token: {
+      colorPrimary: primary,
+      colorLink: primary,
+      colorLinkActive: primary,
+      colorLinkHover: primary,
+    },
+  }
+})
+
+useApplyDesktopLayoutClass()
+
+const supportLink = computed(() =>
+  buildSupportMessengerUrl(
+    supportMessengerSettings.value.messenger,
+    supportMessengerSettings.value.messengerId
+  )
+)
+
+const showSupportButton = computed(() => !!supportLink.value)
+
+const supportIcon = computed(() => {
+  const messenger = (supportMessengerSettings.value.messenger ?? '').toLowerCase()
+  switch (messenger) {
+    case 'whatsapp':
+      return 'vuesax-linear:whatsapp'
+    case 'telegram':
+      return 'vuesax-linear:send-2'
+    case 'bale':
+      return 'vuesax-linear:messages-2'
+    default:
+      return 'vuesax-linear:messages-2'
+  }
+})
+
+const supportAccentColor = computed(() => {
+  const messenger = (supportMessengerSettings.value.messenger ?? '').toLowerCase()
+  switch (messenger) {
+    case 'whatsapp':
+      return '#22c55e'
+    case 'telegram':
+      return '#0ea5e9'
+    case 'bale':
+      return '#16a34a'
+    case 'rubika':
+      return '#7c3aed'
+    case 'eitaa':
+      return '#f59e0b'
+    case 'soroush':
+      return '#2563eb'
+    default:
+      return getProjectBranding().accentColor
+  }
+})
+
+const {
+  dragging: supportDragging,
+  fabStyle: supportButtonStyle,
+  handlePointerDown: onSupportPointerDown,
+  handlePointerMove: onSupportPointerMove,
+  handlePointerUp: supportPointerUp,
+  handlePointerCancel: onSupportPointerCancel,
+} = useDraggableFloatingButton('ghatreh_support_button_position_v1', {
+  width: 118,
+  height: 42,
+  defaultBottomGap: 12,
+  defaultRightOffset: 16,
+})
+
+function openSupportLink() {
+  if (!supportLink.value) return
+  window.open(supportLink.value, '_blank', 'noopener,noreferrer')
+}
+
+function handleSupportPointerUp(event: PointerEvent) {
+  if (supportPointerUp(event)) {
+    openSupportLink()
+  }
+}
+
+onMounted(async () => {
+  await loadSupportMessengerFromSettings()
   setTimeout(() => {
     showSplash.value = false
   }, 2000)
 })
 
-const versionDialog = ref<boolean>(false)
-
-function checkVersion() {
-  const version = localStorage.getItem('version')
-  // if (true) {
-  if (!version){
-    update()
-  }
-  if (version != pkg.version) {
-    versionDialog.value = true
-  }
-}
-
-function update() {
-  localStorage.setItem('version', pkg.version)
-  updateServiceWorker()
-  window.location.reload()
-}
-
 </script>
 
 <style lang="less">
 .updateButton .van-dialog__confirm .van-button__text {
-  color: @primary-color !important;
+  color: @theme-primary !important;
   font-weight: 600;
   font-size: 15px;
 }
 
-@media screen and (min-width: 426px) {
-  .desktopConfig {
-    width: 426px;
-    position: relative !important;
+#support-button {
+  position: fixed;
+  z-index: 5100;
+  cursor: grab;
+  user-select: none;
+  border-radius: 9999px;
+
+  &.is-dragging {
+    cursor: grabbing;
   }
 }
+
+.support-button-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 14px 9px 12px;
+  background: #ffffff;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  border-radius: 9999px;
+  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
+  color: #1e293b;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+  direction: rtl;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+
+  .support-button-icon {
+    color: var(--support-accent, #334155);
+    flex-shrink: 0;
+  }
+
+  .support-button-label {
+    white-space: nowrap;
+  }
+}
+
+#support-button:not(.is-dragging):hover .support-button-inner {
+  transform: translateY(-1px);
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
+}
+
+#support-button.is-dragging .support-button-inner {
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.22);
+}
 </style>

src/api/categories.ts

@@ -0,0 +1,10 @@
+import useAxios from '@/utils/useAxios'
+
+export interface StoreCategory {
+  id: number
+  name: string
+  sort_order?: number
+}
+
+export const getStoreCategories = async (): Promise<StoreCategory[]> =>
+  await useAxios.get<StoreCategory[]>('/customer/categories')

src/api/configuration.ts

@@ -0,0 +1,5 @@
+import useAxios from '@/utils/useAxios'
+
+export async function getSettings() {
+  return await useAxios.get(`api/get_settings`)
+}

src/api/products.ts

@@ -4,10 +4,10 @@ import type { PWallet, Wallet } from '@/models/wallet'
 
 
 export const getProducts = async (): Promise<any> => {
-    return await useAxios.get<Product[]>(`/customer/product/list`)
+    return await useAxios.get<Product[]>(`/customer/product/list`, { timeout: 15000 })
 }
 export const getProductById = async ( id:number|null): Promise<any> => {
-    return await useAxios.get<Product[]>(`/customer/product/list/${id}`)
+    return await useAxios.get<Product[]>(`/customer/product/list/${id}`, { timeout: 15000 })
 }
 export const getProductInventory = async (): Promise<any> => {
     return await useAxios.post<PInventory[]>(`/customer/wallet/product/table`)

src/api/wallet.ts

@@ -1,9 +1,13 @@
 import useAxios from '@/utils/useAxios'
 import type { Card, Wallet } from '@/models/wallet'
+import type { WalletAssetsSummary } from '@/models/walletAssets'
 import type {Transaction} from '@/models/transaction'
 
 export const getWallet = async () => await useAxios.get<Wallet>(`/customer/wallet/me`)
 
+export const getWalletAssets = async () =>
+  await useAxios.get<WalletAssetsSummary>(`/customer/wallet/assets`)
+
 export const withdraw = async (obj: Transaction): Promise<any> => {
   return await useAxios.post<Transaction>(`/customer/wallet/withdraw`, obj)
 }

src/app/authBoot.ts

@@ -0,0 +1,53 @@
+import type { RouteLocationNormalized } from 'vue-router'
+import router from '@/router'
+import { message } from 'ant-design-vue'
+
+let fingerPosition = false
+let fingerTimeoutId: ReturnType<typeof setTimeout> | null = null
+let hasFingerPrint = false
+
+export function setTruth() {
+  fingerPosition = true
+}
+
+export function setEnableAuthenticate() {
+  fingerPosition = false
+}
+
+export function setFingerPosition(value: boolean) {
+  fingerPosition = value
+}
+
+export function getFingerPosition() {
+  return fingerPosition
+}
+
+export function setHasFingerPrint(value: boolean) {
+  hasFingerPrint = value
+}
+
+export function getHasFingerPrint() {
+  return hasFingerPrint
+}
+
+export function clearFingerTimeout() {
+  if (fingerTimeoutId) {
+    clearTimeout(fingerTimeoutId)
+    fingerTimeoutId = null
+  }
+}
+
+export function setFingerTimeOut(to: RouteLocationNormalized) {
+  clearFingerTimeout()
+
+  fingerTimeoutId = setTimeout(async () => {
+    if (!hasFingerPrint) return
+
+    fingerPosition = false
+    await router.push({ name: 'login' })
+
+    if (to.name !== 'login') {
+      message.warn('شما مدت زیادی با کشکول گلد کار نکردید، لطفا دوباره وارد شوید.')
+    }
+  }, 180000)
+}

src/app/bootstrap.ts

@@ -0,0 +1,90 @@
+import { loadAppConfig } from '@/config/load-config'
+import { setAppConfig } from '@/config/app-config'
+import { applyAppConfig } from '@/config/apply-config'
+import { startPwaManifest } from '@/modules/pwa/manifest'
+import { createVueApp } from '@/app/createApp'
+import { setupRouterGuards } from '@/app/setupRouter'
+import { useSettingsStore } from '@/store/settingsStore'
+import { initPriceRealtimeChannel } from '@/utils/priceSocket'
+import { initMobileScrollRestoration } from '@/layouts/composables/useMobileScrollReset'
+
+type BootWindow = Window & {
+  __BOOT_TIMEOUT__?: number
+  __APP_BOOTSTRAPPED__?: boolean
+}
+
+function clearBootTimeout() {
+  const bootWindow = window as BootWindow
+
+  if (bootWindow.__BOOT_TIMEOUT__) {
+    window.clearTimeout(bootWindow.__BOOT_TIMEOUT__)
+    bootWindow.__BOOT_TIMEOUT__ = undefined
+  }
+}
+
+function withTimeout<T>(promise: Promise<T>, ms: number, message: string): Promise<T> {
+  return Promise.race([
+    promise,
+    new Promise<T>((_, reject) => {
+      window.setTimeout(() => {
+        reject(new Error(message))
+      }, ms)
+    })
+  ])
+}
+
+function showBootstrapError(error: unknown) {
+  clearBootTimeout()
+
+  console.error('Bootstrap failed:', error)
+
+  const appRoot = document.querySelector('#app')
+
+  if (!appRoot) return
+
+  appRoot.innerHTML = `
+    <div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; direction: rtl; font-family: sans-serif; padding: 24px; background: var(--boot-bg, #ffffff); color: var(--boot-text, #111827);">
+      <div style="width: min(420px, 100%); text-align: center; background: var(--boot-card, #fff); border: 1px solid var(--boot-border, rgba(15,23,42,0.08)); border-radius: 24px; padding: 28px 22px;">
+        <div style="font-size: 42px; margin-bottom: 12px;">⚠️</div>
+        <h2 style="margin: 0 0 12px; font-size: 20px;">خطا در راه‌اندازی برنامه</h2>
+        <p style="margin: 0 0 20px; color: var(--boot-muted, rgba(15,23,42,0.62)); line-height: 2; font-size: 14px;">
+          لطفاً اتصال اینترنت خود را بررسی کنید و دوباره تلاش کنید.
+        </p>
+        <button
+          onclick="location.reload()"
+          style="padding: 11px 22px; border: 0; border-radius: 12px; background: var(--boot-accent, #2563eb); color: white; cursor: pointer; font-weight: 700;"
+        >
+          تلاش مجدد
+        </button>
+      </div>
+    </div>
+  `
+}
+
+export async function bootstrapApp() {
+  try {
+    const config = await withTimeout(loadAppConfig(), 20000, 'Config loading timeout')
+
+    setAppConfig(config)
+    startPwaManifest(config)
+    applyAppConfig()
+
+    const { app } = createVueApp()
+    const settingsStore = useSettingsStore()
+
+    await withTimeout(settingsStore.fetchSettings(), 45000, 'Settings loading timeout')
+    initPriceRealtimeChannel((key) => settingsStore.getSettingByKey(key))
+
+    initMobileScrollRestoration()
+    setupRouterGuards()
+
+    app.mount('#app')
+
+    ;(window as BootWindow).__APP_BOOTSTRAPPED__ = true
+    clearBootTimeout()
+    sessionStorage.removeItem('__APP_BOOT_RECOVERY_DONE__')
+    sessionStorage.removeItem('__APP_BOOT_RETRY_CLICKED__')
+  } catch (error) {
+    showBootstrapError(error)
+  }
+}

src/app/createApp.ts

@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import VueLazyLoad from 'vue3-lazyload'
+import VueApexCharts from 'vue3-apexcharts'
+import App from '@/App.vue'
+import router from '@/router'
+
+export function createVueApp() {
+  const app = createApp(App)
+  const pinia = createPinia()
+
+  app.use(pinia)
+  app.use(VueLazyLoad, {})
+  app.use(router)
+  app.use(VueApexCharts)
+
+  return { app, pinia }
+}

src/app/setupRouter.ts

@@ -0,0 +1,123 @@
+import { computed, watch } from 'vue'
+import router from '@/router'
+import { authenticateWithFingerprint, getToken, isIphone, removeToken } from '@/utils'
+import { useUserStore } from '@/store/userStore'
+import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
+import { useAuthStore } from '@/store/useAuthStore'
+import {
+  clearFingerTimeout,
+  getFingerPosition,
+  getHasFingerPrint,
+  setFingerPosition,
+  setFingerTimeOut,
+  setHasFingerPrint
+} from '@/app/authBoot'
+import { recoverMobileViewportAfterAuth } from '@/layouts/composables/useMobileScrollReset'
+import { getProjectDefaultRoute, isGhatreProject } from '@/utils/project'
+
+export function setupRouterGuards() {
+  const userStore = useUserStore()
+  const authStore = useAuthStore()
+
+  const isApple: boolean = isIphone()
+  let isFirst = true
+
+  const currentRoute = computed(() => router.currentRoute.value.fullPath)
+
+  async function start() {
+    if (!getToken()) {
+      return
+    }
+
+    if (!userStore.userInfo) {
+      await userStore.getMyInfo()
+    }
+  }
+
+  function goToLogin(to: RouteLocationNormalized, next: NavigationGuardNext) {
+    if (to.name === 'buyProduct' || to.name === 'productDetail' || to.name === 'about' || to.name === 'cart') {
+      return next()
+    }
+    if (to.name !== 'login') {
+      return next({ name: 'login' })
+    }
+    return next()
+  }
+
+  function goToHome(to: RouteLocationNormalized, next: NavigationGuardNext) {
+    const defaultRoute = getProjectDefaultRoute()
+    if (to.name !== defaultRoute) {
+      return next({ name: defaultRoute })
+    }
+    return next()
+  }
+
+  router.beforeEach(async (to, from, next) => {
+    if (to.name === 'home' && isGhatreProject()) {
+      return next({ name: 'buyProduct' })
+    }
+    authStore.setLoading(true)
+    clearFingerTimeout()
+    setFingerTimeOut(to)
+
+    if (isFirst) {
+      isFirst = false
+
+      if (getToken()) {
+        await userStore.getMyInfo()
+        const finger_print = userStore.userInfo.finger_print
+        setHasFingerPrint(finger_print)
+
+        if (isApple && finger_print) {
+          removeToken()
+          goToLogin(to, next)
+        } else if (!isApple && finger_print) {
+          setFingerPosition(await authenticateWithFingerprint())
+
+          if (!getFingerPosition()) {
+            goToLogin(to, next)
+          }
+        } else {
+          if (to.name == 'login') {
+            goToHome(to, next)
+          }
+          return next()
+        }
+      } else {
+        if (['login', '404', 'buyProduct', 'productDetail', 'about', 'cart'].includes(to.name as string)) {
+          return next()
+        }
+        goToLogin(to, next)
+      }
+    } else {
+      if (getFingerPosition()) {
+        if (getToken()) {
+          if (to.name === 'login') {
+            return next({ name: from.name || getProjectDefaultRoute() })
+          }
+          return next()
+        }
+
+        if (['login', '404', 'buyProduct', 'productDetail', 'about', 'cart'].includes(to.name as string)) {
+          return next()
+        }
+        return next({ name: 'login' })
+      }
+
+      if (getToken() && !getHasFingerPrint()) {
+        next()
+      } else {
+        goToLogin(to, next)
+      }
+    }
+  })
+
+  router.afterEach((to, from) => {
+    if (document.documentElement.classList.contains('app-layout--desktop')) return
+    if (from.name === 'login') {
+      recoverMobileViewportAfterAuth()
+    }
+  })
+
+  watch(currentRoute, async () => (userStore.userInfo ? '' : await start()))
+}

src/assets/css/main.less

@@ -1,5 +1,16 @@
 @import (less) './var.less';
 @import (less) './fonts.less';
+@import (less) '../../layouts/styles/desktop-shell.less';
+@import (less) '../../layouts/styles/mobile-frame.less';
+@import (less) '../../layouts/styles/mobile-page-common.less';
+@import (less) '../../layouts/desktop/styles/desktop-page-common.less';
+@import (less) '../../views/base/fund/desktop/styles/desktop-fund.less';
+@import (less) '../../views/base/transactions/desktop/styles/desktop-transactions.less';
+@import (less) '../../views/base/wallet/desktop/styles/desktop-wallet.less';
+@import (less) '../../views/base/user/desktop/styles/desktop-user.less';
+@import (less) '../../views/base/priceTrigger/desktop/styles/desktop-price-trigger.less';
+@import (less) '../../views/base/home/desktop/styles/desktop-home.less';
+@import (less) '../../layouts/desktop/styles/desktop-inner-pages.less';
 
 html {
   scroll-behavior: smooth;
@@ -50,6 +61,33 @@ body {
 
 :root {
   color-scheme: only light;
+  --app-primary-color: #a72b77;
+  --project-hero-gradient: linear-gradient(145deg, #a72b77 0%, #711d4d 40%, #a72b77 100%);
+  --app-safe-top: env(safe-area-inset-top, 0px);
+  --app-safe-bottom: env(safe-area-inset-bottom, 0px);
+  --app-credit-bar-inner: 0px;
+  --app-home-header-offset: calc(4.25rem + var(--app-safe-top));
+  --app-credit-footer-offset: var(--app-safe-bottom);
+  --app-nav-height: 80px;
+  --app-bottom-chrome-height: calc(var(--app-nav-height) + var(--app-safe-bottom));
+  --app-add-card-height: 88px;
+  --wallet-card-dock-overlap: 52px;
+  --app-z-nav: 5000;
+  --app-z-wallet-dock: 4490;
+  --app-z-wallet-add-bar: 4510;
+  --app-z-action-sheet: 5200;
+  --app-z-dialog: 5300;
+  --app-z-modal: 5500;
+}
+
+:root[data-project='ghatre'] {
+  --app-primary-color: #521620;
+  --project-hero-gradient: linear-gradient(145deg, #521620 0%, #7a2a1e 40%, #521620 100%);
+}
+
+:root[data-project='kashkool'] {
+  --app-primary-color: #a72b77;
+  --project-hero-gradient: linear-gradient(145deg, #a72b77 0%, #711d4d 40%, #a72b77 100%);
 }
 
 .ant-form-item {
@@ -74,18 +112,23 @@ body {
   opacity: 0;
 }
 
-/*.van-action-sheet{
-  z-index: 2001 !important;
+.van-action-sheet{
+  z-index: 5001 !important;
 }
 
-.van-overlay{
-  z-index: 2000 !important;
-}*/
+//.van-overlay{
+//  z-index: 2000 !important;
+//}
 
 .color-transition {
   transition: color 0.3s ease;
 }
 
+.app-main {
+  width: 100%;
+  min-height: 100vh;
+}
+
 .background-color-transition {
   transition: background-color 0.3s ease;
 }
@@ -133,7 +176,7 @@ body {
     background-color: #fff;
     //display: none;
     outline: none;
-    border: 1px solid #521620 !important;
+    border: 1px solid var(--app-primary-color, #a72b77) !important;
   }
 }
 
@@ -331,18 +374,18 @@ body {
 }
 .ant-radio-group-solid
 .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{
-  color: #521620 !important;
+  color: var(--app-primary-color, #a72b77) !important;
 }
 .ant-input-group-addon{
-  background-color: #521620 !important;
+  background-color: var(--app-primary-color, #a72b77) !important;
   color: #e0be7f !important;
 }
 .ant-slider-track{
-  background-color: #521620 !important;
+  background-color: var(--app-primary-color, #a72b77) !important;
 
 }
 .ant-slider-handle {
-  background-color: #521620 !important;
+  background-color: var(--app-primary-color, #a72b77) !important;
 
 }
 

src/assets/css/var.less

@@ -1,7 +1,9 @@
 @prefixCls: 'noname';
 
-@primary-color: #521620;
-@secondary-color: #521620;
+@primary-color: #a72b77;
+@secondary-color: #a72b77;
+@App-primary-color: #a72b77;
+@theme-primary: var(--app-primary-color, #a72b77);
 @prefixCls-font-family: 'iran-sans';
 @prefixCls-background-color: #fff;
 

src/components/BasicPacks/BasicButton.vue

@@ -41,11 +41,6 @@ const _class = computed(() => {
   return ''
 })
 
-const _loading = computed(() => {
-  if (props.loading){
-    return 'flex'
-  } else return 'unset'
-})
 const { prefixCls } = usePrefix('base-button')
 
 const props = withDefaults(defineProps<Props>(), {
@@ -58,9 +53,6 @@ const props = withDefaults(defineProps<Props>(), {
 <style lang="less">
 @prefix:~'@{prefixCls}-base-button';
   .@{prefix}{
-    //width: fit-content;
     height: auto;
-    /*padding: 8px;*/
-    display: v-bind(_loading);
   }
 </style>

src/components/BasicPacks/BasicInput.vue

@@ -36,6 +36,7 @@
 import {usePrefix} from "@/utils/usePrefix";
 import {computed} from "vue";
 import {usePrice} from "@/components/BasicPacks/BasicPriceInput/src/utils/usePrice";
+import {persianToEnglishDigits, shouldNormalizeInputDigits} from '@/utils/persianDigits';
 
 //Props
 interface Prop {
@@ -56,29 +57,42 @@ interface Prop {
 
 const addonBgColor = computed(() => props.addonBgColor)
 const addonTextColor = computed(() => props.addonTextColor)
-//emits
-const localValue = computed({
-  set(value) {
-    // console.log(value?.toString().replaceAll(',', ''))
-    props.type === 'price' ? emits('update:value', value?.toString().replaceAll(',', '')) : emits('update:value', value)
-  },
-  get() {
-    let a = props.type === 'price' ? props.value ? usePrice(props.value as number, true, '').trim() : '' : props.value
-    // console.log(props.value)
-    return a
-  },
-})
 
 const props = withDefaults(defineProps<Prop>(), {
   isPassword: false
 })
 const emits = defineEmits(['update:value', 'onchange'])
 
+const localValue = computed({
+  set(value) {
+    emits('update:value', normalizeValue(value))
+  },
+  get() {
+    return props.type === 'price'
+      ? props.value ? usePrice(props.value as number, true, '').trim() : ''
+      : props.value
+  },
+})
+
+function normalizeValue(value: unknown) {
+  if (value == null || value === '') {
+    return value
+  }
+
+  let normalized = String(value)
+  if (shouldNormalizeInputDigits(props)) {
+    normalized = persianToEnglishDigits(normalized)
+  }
+  if (props.type === 'price') {
+    normalized = normalized.replaceAll(',', '')
+  }
+  return normalized
+}
+
 const handlerChange = (e: any) => {
-  // emits('onchange', e.target.value)
-  props.type === 'price' ? emits('update:value', e.target.value?.toString().replaceAll(',', '')) : emits('update:value', e.target.value)
-  props.type === 'price' ? emits('onchange', e.target.value?.toString().replaceAll(',', '')) : emits('onchange', e.target.value)
-  // console.log('sas')
+  const normalized = normalizeValue(e.target.value)
+  emits('update:value', normalized)
+  emits('onchange', normalized)
 }
 
 //css style
@@ -89,11 +103,6 @@ const {prefixCls} = usePrefix('input')
 @prefix: ~'@{prefixCls}-input';
 
 .@{prefix} {
-  /*  .ant-input-group-addon:first-child {
-    !*    border: #d9d9d9 1px solid;
-    border-radius: 0 6px 6px 0;*!
-  }*/
-
   .ant-input-group {
     direction: ltr;
   }

src/components/BasicPacks/BasicPriceInput/src/BasicPriceInput.vue

@@ -1,5 +1,5 @@
 <template>
-  <BasicInput v-model:value="_val">
+  <BasicInput v-model:value="_val" type="price">
     <template v-for="(_, slotKey) in $slots" #[slotKey]="data">
       <slot :name="slotKey" v-bind="data || {}"></slot>
     </template>
@@ -10,6 +10,7 @@
 import {usePrice} from './utils/usePrice'
 import {computed} from "vue";
 import BasicInput from "../../BasicInput.vue";
+import {persianToEnglishDigits} from '@/utils/persianDigits'
 
 interface Props {
   value?: string | number
@@ -23,9 +24,7 @@ const props = withDefaults(defineProps<Props>(), {})
 
 const _val = computed({
   set(val: string) {
-    // const temp = val.toString().replaceAll(',', '')
-    const temp = val.toString().replaceAll(',', '')
-    emit('update:value', temp)
+    emit('update:value', persianToEnglishDigits(val).replaceAll(',', ''))
   },
   get() {
     return props.value ? usePrice(props.value as number, true, '').trim() : ''

src/components/BasicPacks/BasicPriceInput/src/utils/usePrice.ts

@@ -1,17 +1 @@
-export function usePrice(price: number, digit = true, unit = 'ریال') {
-  let _price = price.toString()
-  if (digit) {
-    _price = _price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-  }
-  return `${_price} ${unit}`
-}
-
-export function useTowDecimal(num: string | number): string | number {
-  const temp = num.toString().match(/^-?\d+(?:\.\d{0,2})?/)
-  if (temp && temp.length > 0) return temp[0]
-  return Math.round(+num * 100) / 100
-}
-
-export function useFormat(num: string | number, unit = '') {
-  return usePrice(Math.abs(+useTowDecimal(num)), true, unit)
-}
+export { usePrice, usePriceWithoutType, useTowDecimal, useFormat } from '@/utils/usePrice'

src/components/ProductImage.vue

@@ -0,0 +1,56 @@
+<template>
+  <img
+    :src="currentSrc"
+    :class="[imgClass, dimmed && 'product-image--dimmed']"
+    :alt="alt"
+    @error="handleError"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import {
+  getProductFallbackImage,
+  resolveProductImageSrc,
+  type ProductImageSource
+} from '@/utils/productImage'
+
+const props = withDefaults(
+  defineProps<{
+    product?: ProductImageSource
+    imgClass?: string
+    alt?: string
+    dimmed?: boolean
+  }>(),
+  {
+    imgClass: 'max-h-full max-w-full object-contain',
+    alt: '',
+    dimmed: false
+  }
+)
+
+const currentSrc = ref(resolveProductImageSrc(props.product))
+const usingFallback = ref(false)
+
+watch(
+  () => props.product,
+  (product) => {
+    usingFallback.value = false
+    currentSrc.value = resolveProductImageSrc(product)
+  },
+  { deep: true }
+)
+
+function handleError() {
+  if (usingFallback.value) return
+  usingFallback.value = true
+  currentSrc.value = getProductFallbackImage(props.product)
+}
+</script>
+
+<style scoped>
+.product-image--dimmed {
+  opacity: 0.45;
+  filter: grayscale(1);
+}
+</style>

src/composables/useProductsCatalog.ts

@@ -0,0 +1,55 @@
+import { ref } from 'vue'
+import { getProducts } from '@/api/products'
+import type { Product } from '@/models/products'
+import { getLastStreamProductsList } from '@/utils/productStreamBridge'
+
+/** کش مشترک لیست محصولات — dedupe درخواست‌های polling */
+const catalogProducts = ref<Product[]>([])
+let catalogPromise: Promise<Product[]> | null = null
+
+export function getProductsCatalogRef() {
+  return catalogProducts
+}
+
+export function findProductInCatalog(id: number): Product | undefined {
+  const cached = catalogProducts.value.find((p) => p.id === id)
+  if (cached) {
+    return cached
+  }
+
+  return getLastStreamProductsList()?.find((p) => p.id === id)
+}
+
+export function getProductsCatalog(force = false): Promise<Product[]> {
+  if (!force) {
+    const streamed = getLastStreamProductsList()
+    if (streamed?.length) {
+      catalogProducts.value = streamed
+      return Promise.resolve(streamed)
+    }
+
+    if (catalogProducts.value.length > 0) {
+      return Promise.resolve(catalogProducts.value)
+    }
+  }
+
+  if (!force && catalogPromise) {
+    return catalogPromise
+  }
+
+  catalogPromise = getProducts()
+    .then((products) => {
+      catalogProducts.value = products ?? []
+      return catalogProducts.value
+    })
+    .finally(() => {
+      catalogPromise = null
+    })
+
+  return catalogPromise
+}
+
+export function clearProductsCatalog() {
+  catalogProducts.value = []
+  catalogPromise = null
+}

src/composables/useProject.ts

@@ -0,0 +1,40 @@
+import { computed } from 'vue'
+import {
+  getProjectBranding,
+  getProjectId,
+  isBoursecuProject,
+  isGhatreProject,
+  isKashkoolProject,
+  type ProjectBranding,
+  type ProjectId,
+} from '@/utils/project'
+
+export function useProject() {
+  const projectId = computed<ProjectId>(() => getProjectId())
+  const branding = computed<ProjectBranding>(() => getProjectBranding())
+
+  const isGhatre = computed(() => isGhatreProject())
+  const isKashkool = computed(() => isKashkoolProject())
+  const isBoursecu = computed(() => isBoursecuProject())
+
+  const projectNameFa = computed(() => branding.value.nameFa)
+  const heroGradient = computed(() => branding.value.heroGradient)
+  const accentColor = computed(() => branding.value.accentColor)
+  const fundLabel = computed(() => branding.value.fundLabel)
+  const showHomeRoute = computed(() => branding.value.showHomeRoute)
+  const defaultRoute = computed(() => branding.value.defaultRoute)
+
+  return {
+    projectId,
+    branding,
+    isGhatre,
+    isKashkool,
+    isBoursecu,
+    projectNameFa,
+    heroGradient,
+    accentColor,
+    fundLabel,
+    showHomeRoute,
+    defaultRoute,
+  }
+}

src/composables/useWalletAssets.ts

@@ -0,0 +1,70 @@
+import { ref } from 'vue'
+import { getWalletAssets } from '@/api/wallet'
+import { getProductsCatalog, getProductsCatalogRef } from '@/composables/useProductsCatalog'
+import { useWalletStore } from '@/store/walletStore'
+import type { WalletAssetsSummary } from '@/models/walletAssets'
+import { enrichInventoryCardsWithCatalog } from '@/utils/productAssets'
+
+const assetsSummary = ref<WalletAssetsSummary | null>(null)
+let assetsPromise: Promise<WalletAssetsSummary> | null = null
+
+function enrichAssetsSummary(data: WalletAssetsSummary): WalletAssetsSummary {
+  const catalog = getProductsCatalogRef().value
+
+  return {
+    ...data,
+    inventory_cards: enrichInventoryCardsWithCatalog(data.inventory_cards ?? [], catalog ?? []),
+    count_products: enrichInventoryCardsWithCatalog(data.count_products ?? [], catalog ?? []),
+  }
+}
+
+function syncWalletStoreFromAssets(data: WalletAssetsSummary) {
+  const walletStore = useWalletStore()
+  if (!walletStore.walletInfo) {
+    return
+  }
+
+  const goldMetal = data.metal_totals?.find((metal) => metal.metal_id === 1) ?? data.metal_totals?.[0]
+
+  walletStore.walletInfo.cash = data.cash_wallet ?? walletStore.walletInfo.cash
+
+  if (goldMetal) {
+    walletStore.walletInfo.gold = goldMetal.melted_weight ?? walletStore.walletInfo.gold
+    walletStore.walletInfo.gold_sum = goldMetal.total_weight ?? walletStore.walletInfo.gold_sum
+  }
+}
+
+export function useWalletAssets() {
+  async function loadWalletAssets(force = false) {
+    if (!force && assetsSummary.value) {
+      return assetsSummary.value
+    }
+
+    if (!force && assetsPromise) {
+      return assetsPromise
+    }
+
+    assetsPromise = Promise.all([getWalletAssets(), getProductsCatalog(force)])
+      .then(([data]) => {
+        assetsSummary.value = enrichAssetsSummary(data)
+        syncWalletStoreFromAssets(assetsSummary.value)
+        return assetsSummary.value
+      })
+      .finally(() => {
+        assetsPromise = null
+      })
+
+    return assetsPromise
+  }
+
+  function clearWalletAssets() {
+    assetsSummary.value = null
+    assetsPromise = null
+  }
+
+  return {
+    assetsSummary,
+    loadWalletAssets,
+    clearWalletAssets,
+  }
+}

src/config/app-config.ts

@@ -0,0 +1,56 @@
+import type { AppConfig } from './types'
+
+type RawAppConfig = AppConfig & {
+  user?: Record<string, any>
+}
+
+let appConfig: RawAppConfig | null = null
+
+export function setAppConfig(config: RawAppConfig) {
+  appConfig = config || {}
+  window.__APP_CONFIG__ = appConfig
+}
+
+export function getRawAppConfig() {
+  return appConfig ?? window.__APP_CONFIG__ ?? null
+}
+
+function isPlainObject(value: unknown): value is Record<string, any> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+export function getTenantConfig() {
+  const rawConfig = getRawAppConfig()
+  if (!rawConfig) return {}
+
+  const user = rawConfig.user
+
+  if (isPlainObject(user)) {
+    return {
+      ...user,
+      name: rawConfig.name ?? user.name,
+      name_fa: rawConfig.name_fa ?? user.name_fa,
+    }
+  }
+
+  if (Array.isArray(user) && isPlainObject(user[0])) {
+    return {
+      ...user[0],
+      name: rawConfig.name ?? user[0].name,
+      name_fa: rawConfig.name_fa ?? user[0].name_fa,
+    }
+  }
+
+  if (Object.keys(rawConfig).length > 0) {
+    return rawConfig
+  }
+
+  return {}
+}
+
+export function getConfig<T = any>(key: string, fallback?: T): T {
+  const config = getTenantConfig()
+  const value = config?.[key]
+
+  return (value ?? fallback ?? null) as T
+}

src/config/apply-config.ts

@@ -0,0 +1,106 @@
+import { getConfig } from '@/config/app-config'
+import { isPwaManifestReady } from '@/modules/pwa/manifest'
+import { getProjectBranding } from '@/utils/project'
+
+export function applyAppConfig() {
+  applyProjectTheme()
+
+  if (isPwaManifestReady()) {
+    setTitle()
+    return
+  }
+
+  setTitle()
+  setFavicon()
+  setAppleTouchIconFallback()
+}
+
+function applyProjectTheme() {
+  const branding = getProjectBranding()
+  const root = document.documentElement
+  const primary = branding.accentColor
+
+  root.style.setProperty('--project-accent', primary)
+  root.style.setProperty('--project-hero-gradient', branding.heroGradient)
+  root.style.setProperty('--app-primary-color', primary)
+  root.style.setProperty('--primary-color', primary)
+  root.dataset.project = branding.id
+
+  const secondaryColor = getConfig<string>('secondary_color')
+  if (secondaryColor) {
+    root.style.setProperty('--secondary-color', secondaryColor)
+  }
+}
+
+function setTitle() {
+  document.title = getConfig('name_fa', 'در حال بارگذاری...')
+}
+
+function getLogoUrl() {
+  return getConfig<string>('avatar') || '/favicon.png'
+}
+
+function setFavicon() {
+  let faviconLink =
+    document.querySelector<HTMLLinkElement>("link[rel='icon']") ||
+    document.querySelector<HTMLLinkElement>("link[rel~='icon']")
+
+  if (!faviconLink) {
+    faviconLink = document.createElement('link')
+    faviconLink.rel = 'icon'
+    document.head.appendChild(faviconLink)
+  }
+
+  const logoUrl = getLogoUrl()
+
+  faviconLink.type = 'image/png'
+  faviconLink.href = logoUrl.startsWith('http') ? logoUrl : resolveRemoteLogo(logoUrl)
+}
+
+function setAppleTouchIconFallback() {
+  const logoUrl = getLogoUrl()
+
+  if (!logoUrl) return
+
+  if (document.querySelector("link[rel='apple-touch-icon'][data-dynamic-pwa='true']")) {
+    return
+  }
+
+  const sizes = ['180x180', '152x152', '120x120']
+
+  sizes.forEach((size) => {
+    let link = document.querySelector<HTMLLinkElement>(
+      `link[rel='apple-touch-icon'][sizes='${size}']`
+    )
+
+    if (!link) {
+      link = document.createElement('link')
+      link.rel = 'apple-touch-icon'
+      link.sizes = size
+      document.head.appendChild(link)
+    }
+
+    link.href = logoUrl.startsWith('http') ? logoUrl : resolveRemoteLogo(logoUrl)
+  })
+
+  let appleTitle = document.querySelector<HTMLMetaElement>("meta[name='apple-mobile-web-app-title']")
+
+  if (!appleTitle) {
+    appleTitle = document.createElement('meta')
+    appleTitle.name = 'apple-mobile-web-app-title'
+    document.head.appendChild(appleTitle)
+  }
+
+  appleTitle.content = getConfig('name_fa', 'اپ مشتری')
+}
+
+function resolveRemoteLogo(path: string) {
+  if (/^(https?:\/\/|data:|blob:)/i.test(path)) return path
+
+  const lastSuccess = localStorage.getItem('CONFIG_Success_URL')
+  const base = lastSuccess
+    ? lastSuccess.replace(/\/get_user\/?$/i, '').replace(/\/+$/, '')
+    : 'https://nerkh.gold'
+
+  return `${base}/${path.replace(/^\/+/, '')}`
+}

src/config/config-cache.ts

@@ -0,0 +1,281 @@
+import type { AppConfig } from '@/config/types'
+import { resetVersionCheckCache } from '@/config/load-version'
+import { clearCachedPwaManifest } from '@/modules/pwa/manifest-cache'
+import { tokenName } from '@/themeConfig'
+
+const CONFIG_COOKIE_NAME = 'APP_CONFIG_CACHE'
+const CONFIG_SUCCESS_URL_KEY = 'CONFIG_Success_URL'
+const VERSION_SUCCESS_URL_KEY = 'VERSION_Success_URL'
+const CONFIG_COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 7
+const MAX_COOKIE_VALUE_LENGTH = 3500
+
+const VERSION_STORAGE_KEY = 'version'
+const VERSION_UPDATE_LOCK_KEY = 'version_update_lock'
+const VERSION_LAST_RELOAD_KEY = 'version_last_reload'
+
+type CachedConfigPayload = {
+  cached_at: number
+  config: AppConfig
+}
+
+type VersionUpdateLock = {
+  version: string
+  started_at: number
+}
+
+function getCookie(name: string) {
+  const cookie = document.cookie.split('; ').find((row) => row.startsWith(`${name}=`))
+
+  if (!cookie) return null
+
+  return cookie.substring(name.length + 1)
+}
+
+function setCookie(name: string, value: string, maxAgeSeconds: number) {
+  const secure = window.location.protocol === 'https:' ? '; Secure' : ''
+
+  document.cookie = [
+    `${name}=${value}`,
+    'Path=/',
+    `Max-Age=${maxAgeSeconds}`,
+    'SameSite=Lax',
+    secure
+  ].join('; ')
+}
+
+export function readCachedAppConfig(): AppConfig | null {
+  try {
+    const rawCookie = getCookie(CONFIG_COOKIE_NAME)
+
+    if (!rawCookie) return null
+
+    const decoded = decodeURIComponent(rawCookie)
+    const payload = JSON.parse(decoded) as CachedConfigPayload
+
+    if (!payload?.config) return null
+
+    return payload.config
+  } catch (error) {
+    console.warn('Failed to read cached app config:', error)
+    clearCachedAppConfig()
+    return null
+  }
+}
+
+export function writeCachedAppConfig(config: AppConfig) {
+  try {
+    const payload: CachedConfigPayload = {
+      cached_at: Date.now(),
+      config
+    }
+
+    const encoded = encodeURIComponent(JSON.stringify(payload))
+
+    if (encoded.length > MAX_COOKIE_VALUE_LENGTH) {
+      console.warn(`App config is too large for cookie cache. Size: ${encoded.length}`)
+      return
+    }
+
+    setCookie(CONFIG_COOKIE_NAME, encoded, CONFIG_COOKIE_MAX_AGE_SECONDS)
+  } catch (error) {
+    console.warn('Failed to write app config cache:', error)
+  }
+}
+
+export function clearCachedAppConfig() {
+  document.cookie = `${CONFIG_COOKIE_NAME}=; Path=/; Max-Age=0; SameSite=Lax`
+  clearCachedPwaManifest()
+}
+
+export function getStoredAppVersion() {
+  return localStorage.getItem(VERSION_STORAGE_KEY)
+}
+
+export function getDisplayAppVersion(fallbackVersion: string) {
+  return getStoredAppVersion() || fallbackVersion
+}
+
+export function writeStoredAppVersion(version: string) {
+  localStorage.setItem(VERSION_STORAGE_KEY, String(version).trim())
+}
+
+export function getNormalizedVersion(version: unknown) {
+  if (version === null || version === undefined) return ''
+  return String(version).trim()
+}
+
+export function shouldUpdateForVersion(serverVersion: unknown) {
+  const normalizedServerVersion = getNormalizedVersion(serverVersion)
+
+  if (!normalizedServerVersion) return false
+
+  const storedVersion = getStoredAppVersion()
+
+  if (!storedVersion) {
+    writeStoredAppVersion(normalizedServerVersion)
+    return false
+  }
+
+  return storedVersion !== normalizedServerVersion
+}
+
+export function canStartVersionUpdate(serverVersion: string) {
+  const version = getNormalizedVersion(serverVersion)
+
+  if (!version) return false
+
+  const lastReloadVersion = sessionStorage.getItem(VERSION_LAST_RELOAD_KEY)
+
+  if (lastReloadVersion === version) {
+    return false
+  }
+
+  const rawLock = sessionStorage.getItem(VERSION_UPDATE_LOCK_KEY)
+
+  if (rawLock) {
+    try {
+      const lock = JSON.parse(rawLock) as VersionUpdateLock
+      const isSameVersion = lock.version === version
+      const isFreshLock = Date.now() - lock.started_at < 60_000
+
+      if (isSameVersion && isFreshLock) {
+        return false
+      }
+    } catch {
+      sessionStorage.removeItem(VERSION_UPDATE_LOCK_KEY)
+    }
+  }
+
+  return true
+}
+
+export function startVersionUpdateLock(serverVersion: string) {
+  const version = getNormalizedVersion(serverVersion)
+
+  const lock: VersionUpdateLock = {
+    version,
+    started_at: Date.now()
+  }
+
+  sessionStorage.setItem(VERSION_UPDATE_LOCK_KEY, JSON.stringify(lock))
+}
+
+export function finishVersionUpdateBeforeReload(serverVersion: string) {
+  const version = getNormalizedVersion(serverVersion)
+
+  writeStoredAppVersion(version)
+
+  sessionStorage.setItem(VERSION_LAST_RELOAD_KEY, version)
+  sessionStorage.removeItem(VERSION_UPDATE_LOCK_KEY)
+}
+
+export function cancelVersionUpdateLock() {
+  sessionStorage.removeItem(VERSION_UPDATE_LOCK_KEY)
+}
+
+function clearReadableCookiesExceptConfigAlreadyHandled() {
+  document.cookie.split(';').forEach((cookie) => {
+    const name = cookie.split('=')[0]?.trim()
+
+    if (!name) return
+
+    document.cookie = `${name}=; Path=/; Max-Age=0; SameSite=Lax`
+  })
+}
+
+export async function clearBrowserRuntimeCaches() {
+  try {
+    if ('serviceWorker' in navigator) {
+      const registrations = await navigator.serviceWorker.getRegistrations()
+
+      await Promise.all(registrations.map((registration) => registration.unregister()))
+    }
+  } catch (error) {
+    console.warn('Could not unregister service workers:', error)
+  }
+
+  try {
+    if (!('caches' in window)) return
+
+    const cacheKeys = await caches.keys()
+    await Promise.all(cacheKeys.map((key) => caches.delete(key)))
+  } catch (error) {
+    console.warn('Could not clear browser caches:', error)
+  }
+}
+
+function clearLocalStorageExceptToken() {
+  const token = localStorage.getItem(tokenName)
+
+  localStorage.clear()
+
+  if (token) {
+    localStorage.setItem(tokenName, token)
+  }
+}
+
+export function clearAppStorageExceptToken() {
+  clearReadableCookiesExceptConfigAlreadyHandled()
+  clearLocalStorageExceptToken()
+  sessionStorage.clear()
+}
+
+export function clearAllBootstrapFetchCaches() {
+  localStorage.removeItem(CONFIG_SUCCESS_URL_KEY)
+  localStorage.removeItem(VERSION_SUCCESS_URL_KEY)
+  clearCachedPwaManifest()
+  resetVersionCheckCache()
+  window.__APP_CONFIG__ = undefined
+}
+
+export function hardReloadApp() {
+  const refreshUrl = `${window.location.origin}${window.location.pathname}?__app_refresh=${Date.now()}`
+  window.location.href = refreshUrl
+}
+
+export async function refreshConfigCacheForVersion(
+  newVersion: string,
+  fetchConfig: () => Promise<AppConfig>
+) {
+  const normalizedVersion = getNormalizedVersion(newVersion)
+
+  if (!normalizedVersion) {
+    throw new Error('Version is empty')
+  }
+
+  startVersionUpdateLock(normalizedVersion)
+
+  clearCachedAppConfig()
+  clearAppStorageExceptToken()
+  clearAllBootstrapFetchCaches()
+  await clearBrowserRuntimeCaches()
+
+  const freshConfig = await fetchConfig()
+
+  writeCachedAppConfig(freshConfig)
+  finishVersionUpdateBeforeReload(normalizedVersion)
+
+  return freshConfig
+}
+
+export async function resetAppAndRefreshConfig(
+  fetchConfig: () => Promise<AppConfig>,
+  version?: string | null
+) {
+  const normalizedVersion = getNormalizedVersion(version)
+
+  clearCachedAppConfig()
+  clearAppStorageExceptToken()
+  clearAllBootstrapFetchCaches()
+  await clearBrowserRuntimeCaches()
+
+  const freshConfig = await fetchConfig()
+
+  writeCachedAppConfig(freshConfig)
+
+  if (normalizedVersion) {
+    writeStoredAppVersion(normalizedVersion)
+  }
+
+  return freshConfig
+}

src/config/load-config.ts

@@ -0,0 +1,107 @@
+import type { AppConfig } from '@/config/types'
+import { readCachedAppConfig, writeCachedAppConfig } from '@/config/config-cache'
+
+const CONFIG_SUCCESS_URL_KEY = 'CONFIG_Success_URL'
+export const CONFIG_RETRY_ROUNDS = 5
+
+function getProtocol() {
+  return window.location.protocol === 'https:' ? 'https:' : 'http:'
+}
+
+export function getConfigUrls() {
+  const protocol = getProtocol()
+
+  return [
+    `${protocol}//nerkh.gold/get_user`,
+    `${protocol}//tablo.talasevin.ir/get_user`,
+    `${protocol}//abshode-service.montgit.ir/server/get_user`,
+    `${protocol}//212.23.201.173:8381/get_user`,
+    `${protocol}//91.212.174.137:4040/server/get_user`
+  ]
+}
+
+export function sortConfigUrls(urls: string[]) {
+  const lastSuccessUrl = localStorage.getItem(CONFIG_SUCCESS_URL_KEY)
+
+  return [...urls].sort((a, b) => {
+    if (a === lastSuccessUrl) return -1
+    if (b === lastSuccessUrl) return 1
+    return 0
+  })
+}
+
+function clearStaleConfigSuccessUrl(url: string) {
+  if (localStorage.getItem(CONFIG_SUCCESS_URL_KEY) === url) {
+    localStorage.removeItem(CONFIG_SUCCESS_URL_KEY)
+  }
+}
+
+async function fetchConfig(url: string, timeout = 3000): Promise<AppConfig> {
+  const controller = new AbortController()
+  const timeoutId = window.setTimeout(() => controller.abort(), timeout)
+
+  try {
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json'
+      },
+      cache: 'no-store',
+      signal: controller.signal
+    })
+
+    if (!response.ok) {
+      throw new Error(`Config request failed with status ${response.status}`)
+    }
+
+    const contentType = response.headers.get('content-type') ?? ''
+
+    if (!contentType.includes('application/json')) {
+      throw new Error('Config response is not JSON')
+    }
+
+    return await response.json()
+  } finally {
+    clearTimeout(timeoutId)
+  }
+}
+
+export async function fetchFreshAppConfig(rounds = CONFIG_RETRY_ROUNDS): Promise<AppConfig> {
+  const urls = sortConfigUrls(getConfigUrls())
+
+  for (let round = 1; round <= rounds; round++) {
+    for (let index = 0; index < urls.length; index++) {
+      const url = urls[index]
+
+      try {
+        const timeout = index === urls.length - 1 ? 7000 : 4000
+        const config = await fetchConfig(url, timeout)
+
+        localStorage.setItem(CONFIG_SUCCESS_URL_KEY, url)
+        writeCachedAppConfig(config)
+
+        return config
+      } catch (error) {
+        clearStaleConfigSuccessUrl(url)
+        console.warn(`Config failed from ${url}. Round: ${round}`, error)
+      }
+    }
+  }
+
+  throw new Error('Cannot load app config from any server')
+}
+
+export async function loadAppConfig(): Promise<AppConfig> {
+  try {
+    return await fetchFreshAppConfig()
+  } catch (error) {
+    const cachedConfig = readCachedAppConfig()
+
+    if (cachedConfig) {
+      console.warn('Using cached app config because fresh fetch failed', error)
+      return cachedConfig
+    }
+
+    throw error
+  }
+}

src/config/load-version.ts

@@ -0,0 +1,179 @@
+type VersionResponse =
+  | string
+  | number
+  | {
+      version?: string | number
+      data?: string | number | { version?: string | number; value?: string | number }
+      value?: string | number
+      user?: unknown
+    }
+
+const VERSION_SUCCESS_URL_KEY = 'VERSION_Success_URL'
+export const VERSION_RETRY_ROUNDS = 5
+
+let versionFetchPromise: Promise<string | null> | null = null
+let cachedVersionResult: string | null | undefined
+
+function getProtocol() {
+  return window.location.protocol === 'https:' ? 'https:' : 'http:'
+}
+
+function getVersionUrls() {
+  const protocol = getProtocol()
+
+  return [
+    'https://nerkh.gold/get_version',
+    'https://tablo.talasevin.ir/get_version',
+    'https://abshode-service.montgit.ir/server/get_version',
+    `${protocol}//212.23.201.173:8381/get_version`,
+    `${protocol}//91.212.174.137:4040/server/get_version`
+  ]
+}
+
+function sortVersionUrls(urls: string[]) {
+  const lastSuccessUrl = localStorage.getItem(VERSION_SUCCESS_URL_KEY)
+
+  if (!lastSuccessUrl) {
+    return urls
+  }
+
+  const others = urls.filter((url) => url !== lastSuccessUrl)
+  return [lastSuccessUrl, ...others]
+}
+
+function clearStaleVersionSuccessUrl(url: string) {
+  if (localStorage.getItem(VERSION_SUCCESS_URL_KEY) === url) {
+    localStorage.removeItem(VERSION_SUCCESS_URL_KEY)
+  }
+}
+
+function readUserVersion(user: unknown) {
+  if (!user || typeof user !== 'object' || Array.isArray(user)) {
+    return ''
+  }
+
+  const record = user as { version?: string | number; value?: string | number }
+  const version = record.version ?? record.value
+
+  return version === undefined || version === null ? '' : String(version).trim()
+}
+
+function normalizeVersionResponse(response: VersionResponse) {
+  if (typeof response === 'string' || typeof response === 'number') {
+    return String(response).trim()
+  }
+
+  if (!response) return ''
+
+  if (typeof response.data === 'string' || typeof response.data === 'number') {
+    return String(response.data).trim()
+  }
+
+  const directVersion =
+    response.version ??
+    response.value ??
+    (typeof response.data === 'object' ? response.data?.version ?? response.data?.value : undefined)
+
+  if (directVersion !== undefined && directVersion !== null) {
+    return String(directVersion).trim()
+  }
+
+  return readUserVersion(response.user)
+}
+
+async function fetchVersion(url: string, timeout = 3500): Promise<string | null> {
+  const controller = new AbortController()
+  const timeoutId = window.setTimeout(() => controller.abort(), timeout)
+
+  try {
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: {
+        Accept: 'application/json'
+      },
+      cache: 'no-store',
+      signal: controller.signal
+    })
+
+    if (!response.ok) {
+      throw new Error(`Version request failed with status ${response.status}`)
+    }
+
+    const contentType = response.headers.get('content-type') ?? ''
+
+    const data = contentType.includes('application/json')
+      ? ((await response.json()) as VersionResponse)
+      : ((await response.text()) as VersionResponse)
+
+    const version = normalizeVersionResponse(data)
+
+    if (!version) {
+      throw new Error('Version response is empty')
+    }
+
+    localStorage.setItem(VERSION_SUCCESS_URL_KEY, url)
+
+    return version
+  } finally {
+    window.clearTimeout(timeoutId)
+  }
+}
+
+async function fetchVersionWithRetry(rounds = VERSION_RETRY_ROUNDS): Promise<string | null> {
+  const urls = sortVersionUrls(getVersionUrls())
+
+  for (let round = 1; round <= rounds; round++) {
+    for (let index = 0; index < urls.length; index++) {
+      const url = urls[index]
+      const timeout = index === urls.length - 1 ? 6000 : 3500
+
+      try {
+        const version = await fetchVersion(url, timeout)
+        if (version) {
+          return version
+        }
+      } catch (error) {
+        clearStaleVersionSuccessUrl(url)
+        console.warn(`Version failed from ${url}. Round: ${round}`, error)
+      }
+    }
+  }
+
+  return null
+}
+
+export function resetVersionCheckCache() {
+  cachedVersionResult = undefined
+  versionFetchPromise = null
+}
+
+export async function loadRemoteAppVersion(options?: {
+  rounds?: number
+  force?: boolean
+}): Promise<string | null> {
+  const rounds = options?.rounds ?? VERSION_RETRY_ROUNDS
+  const force = options?.force ?? false
+
+  if (force) {
+    resetVersionCheckCache()
+  }
+
+  if (cachedVersionResult !== undefined) {
+    return cachedVersionResult
+  }
+
+  if (versionFetchPromise) {
+    return versionFetchPromise
+  }
+
+  versionFetchPromise = fetchVersionWithRetry(rounds)
+    .then((version) => {
+      cachedVersionResult = version
+      return version
+    })
+    .finally(() => {
+      versionFetchPromise = null
+    })
+
+  return versionFetchPromise
+}

src/config/types.ts

@@ -0,0 +1,20 @@
+export interface AppConfig {
+  mode?: string
+  theme?: string
+  name?: string
+  name_fa?: string
+
+  avatar?: string
+  color?: string
+  background_color?: string
+  secondary_color?: string
+
+  node_server?: string
+  node_ws?: string
+
+  manifest_url?: string
+
+  user?: Record<string, any>
+
+  [key: string]: any
+}

src/layouts/AppLayoutShell.vue

@@ -0,0 +1,12 @@
+<template>
+  <DesktopAppLayout v-if="isDesktopLayout" />
+  <MobileAppLayout v-else />
+</template>
+
+<script lang="ts" setup>
+import { useDesktopBreakpoint } from './composables/useAppLayout'
+import DesktopAppLayout from './desktop/DesktopAppLayout.vue'
+import MobileAppLayout from './mobile/MobileAppLayout.vue'
+
+const isDesktopLayout = useDesktopBreakpoint()
+</script>

src/layouts/components/DesktopPageFrame.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="dpage">
+    <header v-if="title" class="dpage-topbar">
+      <div>
+        <h1 class="dpage-topbar__title">{{ title }}</h1>
+        <p v-if="subtitle" class="dpage-topbar__subtitle">{{ subtitle }}</p>
+      </div>
+      <slot name="actions" />
+    </header>
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  title?: string
+  subtitle?: string
+}>()
+</script>
+
+<style scoped>
+.dpage-topbar__subtitle {
+  font-size: 14px;
+  color: #6b7280;
+  margin: 6px 0 0;
+}
+</style>

src/layouts/components/DesktopPageTopbar.vue

@@ -0,0 +1,44 @@
+<template>
+  <header class="dpage-topbar" :class="{ 'dpage-topbar--sticky': sticky }">
+    <button
+      v-if="showBack"
+      type="button"
+      class="dpage-topbar__back"
+      @click="handleBack"
+    >
+      <BasicIcon icon="vuesax-linear:arrow-right-1" size="16" />
+      <span>بازگشت</span>
+    </button>
+    <div class="dpage-topbar__meta">
+      <p v-if="eyebrow" class="dpage-topbar__eyebrow">{{ eyebrow }}</p>
+      <h1 class="dpage-topbar__title">{{ title }}</h1>
+      <p v-if="subtitle" class="dpage-topbar__subtitle">{{ subtitle }}</p>
+    </div>
+    <div v-if="$slots.trailing">
+      <slot name="trailing" />
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import router from '@/router'
+
+withDefaults(
+  defineProps<{
+    title: string
+    eyebrow?: string
+    subtitle?: string
+    showBack?: boolean
+    sticky?: boolean
+  }>(),
+  {
+    showBack: false,
+    sticky: true,
+  },
+)
+
+function handleBack() {
+  router.back()
+}
+</script>

src/layouts/components/MobilePageHeader.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="mpage-header wrap-fix">
+    <button
+      v-if="showBack"
+      type="button"
+      class="mpage-header__back"
+      @click="handleBack"
+    >
+      <BasicIcon icon="vuesax-linear:arrow-right-1" />
+    </button>
+    <div class="mpage-header__title">{{ title }}</div>
+    <div v-if="$slots.trailing" class="mpage-header__trailing">
+      <slot name="trailing" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import router from '@/router'
+
+withDefaults(
+  defineProps<{
+    title: string
+    showBack?: boolean
+  }>(),
+  {
+    showBack: false,
+  },
+)
+
+function handleBack() {
+  router.back()
+}
+</script>

src/layouts/components/ResponsiveViewPair.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="responsive-view-pair">
+    <div v-show="!isDesktop" class="responsive-view-pair__pane">
+      <slot name="mobile" />
+    </div>
+    <div v-show="isDesktop" class="responsive-view-pair__pane">
+      <slot name="desktop" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useDesktopBreakpoint } from '../composables/useResponsiveLayout'
+
+const isDesktop = useDesktopBreakpoint()
+</script>
+
+<style scoped>
+.responsive-view-pair {
+  min-height: 0;
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: hidden;
+}
+
+.responsive-view-pair__pane {
+  min-height: 0;
+  height: 100%;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+</style>

src/layouts/composables/useAppLayout.ts

@@ -0,0 +1,26 @@
+import { useMediaQuery } from '@vueuse/core'
+import { onUnmounted, watch } from 'vue'
+import { DESKTOP_LAYOUT_MIN_WIDTH } from '../constants'
+
+const DESKTOP_LAYOUT_CLASS = 'app-layout--desktop'
+
+export function useDesktopBreakpoint() {
+  return useMediaQuery(`(min-width: ${DESKTOP_LAYOUT_MIN_WIDTH}px)`)
+}
+
+export function useApplyDesktopLayoutClass() {
+  const isDesktopLayout = useDesktopBreakpoint()
+
+  const stop = watch(
+    isDesktopLayout,
+    (desktop) => {
+      document.documentElement.classList.toggle(DESKTOP_LAYOUT_CLASS, desktop)
+    },
+    { immediate: true }
+  )
+
+  onUnmounted(() => {
+    stop()
+    document.documentElement.classList.remove(DESKTOP_LAYOUT_CLASS)
+  })
+}

src/layouts/composables/useAppNavigation.ts

@@ -0,0 +1,43 @@
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export function useAppNavigation() {
+  const router = useRouter()
+  const route = useRoute()
+
+  const popVisible = ref(false)
+  const currentRoute = computed(() => route.name)
+  const hideMenu = computed(() => !!route.meta.hideMenu)
+
+  function isNavActive(routeName: string) {
+    return currentRoute.value === routeName
+  }
+
+  function navItemClass(routeName: string) {
+    return isNavActive(routeName) ? 'text-primary' : 'text-gray-400'
+  }
+
+  function navigateTo(routeName: string) {
+    popVisible.value = false
+    router.push({ name: routeName })
+  }
+
+  function toggleOverflowMenu() {
+    popVisible.value = !popVisible.value
+  }
+
+  function closeOverflowMenu() {
+    popVisible.value = false
+  }
+
+  return {
+    popVisible,
+    currentRoute,
+    hideMenu,
+    isNavActive,
+    navItemClass,
+    navigateTo,
+    toggleOverflowMenu,
+    closeOverflowMenu,
+  }
+}

src/layouts/composables/useMobileScrollReset.ts

@@ -0,0 +1,125 @@
+import { nextTick } from 'vue'
+import router from '@/router'
+
+let recoveryTimers: ReturnType<typeof setTimeout>[] = []
+
+function clearRecoveryTimers() {
+  recoveryTimers.forEach(clearTimeout)
+  recoveryTimers = []
+}
+
+function blurFocusedField() {
+  const active = document.activeElement
+  if (active instanceof HTMLElement && active !== document.body) {
+    active.blur()
+  }
+}
+
+function clearBodyScrollLock() {
+  document.body.classList.remove('van-overflow-hidden')
+  document.body.style.removeProperty('position')
+  document.body.style.removeProperty('top')
+  document.body.style.removeProperty('left')
+  document.body.style.removeProperty('right')
+  document.body.style.removeProperty('width')
+  document.body.style.removeProperty('height')
+  document.body.style.removeProperty('min-height')
+  document.body.style.removeProperty('overflow')
+  document.body.style.removeProperty('transform')
+  document.documentElement.style.removeProperty('overflow')
+  document.documentElement.style.removeProperty('height')
+  document.documentElement.style.removeProperty('transform')
+
+  const appRoot = document.getElementById('app')
+  if (appRoot) {
+    appRoot.style.removeProperty('position')
+    appRoot.style.removeProperty('top')
+    appRoot.style.removeProperty('height')
+    appRoot.style.removeProperty('min-height')
+    appRoot.style.removeProperty('overflow')
+    appRoot.style.removeProperty('transform')
+  }
+}
+
+function resetAllScrollPositions() {
+  window.scrollTo(0, 0)
+  document.documentElement.scrollTop = 0
+  document.body.scrollTop = 0
+
+  document
+    .querySelectorAll('.main-with-bottom-chrome-inner, .login-page, .login-page-root')
+    .forEach((node) => {
+      if (node instanceof HTMLElement) {
+        node.scrollTop = 0
+      }
+    })
+}
+
+function kickViewportReflow() {
+  window.dispatchEvent(new Event('resize'))
+
+  if (window.visualViewport) {
+    window.scrollTo(0, 0)
+  }
+}
+
+function runViewportRecovery() {
+  clearBodyScrollLock()
+  resetAllScrollPositions()
+  kickViewportReflow()
+}
+
+function scheduleViewportRecovery() {
+  clearRecoveryTimers()
+  runViewportRecovery()
+
+  nextTick(() => {
+    requestAnimationFrame(() => {
+      runViewportRecovery()
+
+      for (const delay of [50, 150, 300, 500]) {
+        recoveryTimers.push(window.setTimeout(runViewportRecovery, delay))
+      }
+    })
+  })
+}
+
+/** Reset scroll offsets after navigation — fixes iOS safe-area drift. */
+export function resetMobileAppScroll() {
+  runViewportRecovery()
+
+  nextTick(() => {
+    requestAnimationFrame(runViewportRecovery)
+  })
+}
+
+export async function dismissMobileKeyboard() {
+  blurFocusedField()
+  await new Promise((resolve) => window.setTimeout(resolve, 120))
+}
+
+export async function prepareMobileViewportForAppShell() {
+  blurFocusedField()
+  resetAllScrollPositions()
+  await dismissMobileKeyboard()
+}
+
+/** Full recovery after auth — runs after home shell is mounted. */
+export function recoverMobileViewportAfterAuth() {
+  scheduleViewportRecovery()
+}
+
+export const resetMobileAppScrollAfterLogin = recoverMobileViewportAfterAuth
+
+export async function completeLoginNavigation() {
+  await prepareMobileViewportForAppShell()
+  await router.push({ name: 'buyProduct' })
+  await router.isReady()
+  recoverMobileViewportAfterAuth()
+}
+
+export function initMobileScrollRestoration() {
+  if (typeof history !== 'undefined' && 'scrollRestoration' in history) {
+    history.scrollRestoration = 'manual'
+  }
+}

src/layouts/composables/useResponsiveLayout.ts

@@ -0,0 +1 @@
+export { useDesktopBreakpoint, useApplyDesktopLayoutClass } from './useAppLayout'

src/layouts/config/navigation.ts

@@ -0,0 +1,55 @@
+import type { AppNavItem } from '../types'
+import { getProjectBranding, isGhatreProject } from '@/utils/project'
+
+/** تب‌های پایین موبایل — کاربر لاگین‌شده (کشکول) */
+export const AUTH_PRIMARY_NAV: AppNavItem[] = [
+  { id: 'home', routeName: 'home', label: 'صفحه اصلی', icon: 'vuesax-linear:home' },
+  { id: 'transactions', routeName: 'transactions', label: 'گزارش', icon: 'vuesax-linear:receipt-item' },
+  { id: 'wallet', routeName: 'wallet', label: 'کیف پول', icon: 'vuesax-linear:wallet-1' },
+  { id: 'cart', routeName: 'cart', label: 'سبد خرید', icon: 'vuesax-linear:shopping-cart' },
+]
+
+/** تب‌های پایین موبایل — کاربر لاگین‌شده (قطره) */
+export const GHATRE_AUTH_PRIMARY_NAV: AppNavItem[] = [
+  { id: 'buyProduct', routeName: 'buyProduct', label: 'فروشگاه', icon: 'vuesax-linear:coin' },
+  { id: 'transactions', routeName: 'transactions', label: 'گزارش', icon: 'vuesax-linear:receipt-item' },
+  { id: 'wallet', routeName: 'wallet', label: 'کیف پول', icon: 'vuesax-linear:wallet-1' },
+  { id: 'cart', routeName: 'cart', label: 'سبد خرید', icon: 'vuesax-linear:shopping-cart' },
+]
+
+/** تب‌های پایین موبایل — مهمان */
+export const GUEST_PRIMARY_NAV: AppNavItem[] = [
+  { id: 'buyProduct', routeName: 'buyProduct', label: 'فروشگاه', icon: 'vuesax-linear:coin' },
+  { id: 'about', routeName: 'about', label: 'درباره ما', icon: 'vuesax-linear:info-circle' },
+  { id: 'cart', routeName: 'cart', label: 'سبد خرید', icon: 'vuesax-linear:shopping-cart' },
+  { id: 'login', routeName: 'login', label: 'ورود', icon: 'vuesax-linear:login' },
+]
+
+/** منوی FAB موبایل + بخش فرعی سایدبار دسکتاپ — کاربر لاگین‌شده */
+export const AUTH_SECONDARY_NAV: AppNavItem[] = [
+  { id: 'notifyTrigger', routeName: 'notifyTrigger', label: 'هشدار قیمت', icon: 'vuesax-linear:bill' },
+  { id: 'buyProduct', routeName: 'buyProduct', label: 'فروشگاه', icon: 'vuesax-linear:coin' },
+  { id: 'fund', routeName: 'fund', label: 'دارایی ها', icon: 'vuesax-linear:archive-1' },
+  { id: 'user', routeName: 'user', label: 'حساب کاربری', icon: 'vuesax-linear:user' },
+  { id: 'physicalReceive', routeName: 'physicalReceive', label: 'دریافت طلای فیزیکی', icon: 'vuesax-linear:direct-inbox' },
+  { id: 'list', routeName: 'list', label: 'لیست دریافتی‌ها', icon: 'vuesax-linear:receipt-item' },
+  { id: 'giftCard', routeName: 'giftCard', label: 'ثبت کارت هدیه', icon: 'vuesax-linear:gift' },
+  { id: 'earnMoney', routeName: 'earnMoney', label: 'کسب درآمد', icon: 'vuesax-linear:dollar-circle' },
+  { id: 'about', routeName: 'about', label: 'درباره ما', icon: 'vuesax-linear:info-circle' },
+  { id: 'rules', routeName: 'rules', label: 'قوانین و مقررات', icon: 'vuesax-linear:task' },
+]
+
+export function getPrimaryNavItems(isAuthenticated: boolean): AppNavItem[] {
+  if (!isAuthenticated) return GUEST_PRIMARY_NAV
+  return isGhatreProject() ? GHATRE_AUTH_PRIMARY_NAV : AUTH_PRIMARY_NAV
+}
+
+export function getSecondaryNavItems(isAuthenticated: boolean): AppNavItem[] {
+  if (!isAuthenticated) return []
+
+  const fundLabel = getProjectBranding().fundLabel
+
+  return AUTH_SECONDARY_NAV.map((item) =>
+    item.id === 'fund' ? { ...item, label: fundLabel } : item
+  )
+}

src/layouts/constants.ts

@@ -0,0 +1,4 @@
+/** Minimum viewport width for desktop app shell (sidebar layout). */
+export const DESKTOP_LAYOUT_MIN_WIDTH = 768
+
+export const DESKTOP_SIDEBAR_WIDTH = 260

src/layouts/desktop/DesktopAppLayout.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="desktop-app-layout">
+    <DesktopSidebar v-if="!hideMenu" />
+    <main
+      class="desktop-app-layout__main"
+      :class="{ 'desktop-app-layout__main--full': hideMenu }"
+    >
+      <router-view v-slot="{ Component, route }">
+        <div :key="route.fullPath" class="desktop-app-layout__content">
+          <component :is="Component" />
+        </div>
+      </router-view>
+    </main>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onUnmounted, watch } from 'vue'
+import { useAppNavigation } from '../composables/useAppNavigation'
+import DesktopSidebar from './DesktopSidebar.vue'
+
+const NO_SIDEBAR_CLASS = 'app-layout--desktop-no-sidebar'
+const { hideMenu } = useAppNavigation()
+
+watch(
+  hideMenu,
+  (hidden) => {
+    document.documentElement.classList.toggle(NO_SIDEBAR_CLASS, hidden)
+  },
+  { immediate: true }
+)
+
+onUnmounted(() => {
+  document.documentElement.classList.remove(NO_SIDEBAR_CLASS)
+})
+</script>
+
+<style lang="less" src="./desktop-layout.less"></style>

src/layouts/desktop/DesktopNavItem.vue

@@ -0,0 +1,65 @@
+<template>
+  <button
+    type="button"
+    class="desktop-nav-item"
+    :class="{ 'desktop-nav-item--active': active }"
+    @click="$emit('click')"
+  >
+    <span class="desktop-nav-item__icon-wrap">
+      <img
+        v-if="iconSrc"
+        :src="iconSrc"
+        alt=""
+        class="desktop-nav-item__icon desktop-nav-item__icon--image"
+      />
+      <BasicIcon v-else :icon="icon" size="20" class="desktop-nav-item__icon" />
+      <span v-if="badgeCount && badgeCount > 0" class="desktop-nav-item__badge">{{ badgeCount }}</span>
+    </span>
+    <span class="desktop-nav-item__label">{{ label }}</span>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+
+defineProps<{
+  icon: string
+  iconSrc?: string
+  label: string
+  active: boolean
+  badgeCount?: number
+}>()
+
+defineEmits<{
+  click: []
+}>()
+</script>
+
+<style scoped>
+.desktop-nav-item__icon-wrap {
+  position: relative;
+}
+
+.desktop-nav-item__badge {
+  position: absolute;
+  top: -4px;
+  left: -4px;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 4px;
+  border-radius: 999px;
+  background: var(--app-primary-color, #a72b77);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  line-height: 18px;
+  text-align: center;
+}
+
+.desktop-nav-item__icon--image {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  transform: scale(1.75);
+}
+</style>

src/layouts/desktop/DesktopSidebar.vue

@@ -0,0 +1,59 @@
+<template>
+  <aside class="desktop-sidebar">
+    <div class="desktop-sidebar__brand">
+      <img :src="navLogo" :alt="projectNameFa" class="desktop-sidebar__logo" />
+    </div>
+
+    <nav class="desktop-sidebar__section" aria-label="منوی اصلی">
+      <DesktopNavItem
+        v-for="item in primaryItems"
+        :key="item.id"
+        :icon="item.icon"
+        :icon-src="item.iconSrc"
+        :label="item.label"
+        :active="isNavActive(item.routeName)"
+        :badge-count="item.routeName === 'cart' && cartCount ? cartCount : undefined"
+        @click="navigateTo(item.routeName)"
+      />
+    </nav>
+
+    <div v-if="secondaryItems.length" class="desktop-sidebar__divider" />
+
+    <nav
+      v-if="secondaryItems.length"
+      class="desktop-sidebar__section desktop-sidebar__section--secondary"
+      aria-label="منوی فرعی"
+    >
+      <DesktopNavItem
+        v-for="item in secondaryItems"
+        :key="item.id"
+        :icon="item.icon"
+        :icon-src="item.iconSrc"
+        :label="item.label"
+        :active="isNavActive(item.routeName)"
+        @click="navigateTo(item.routeName)"
+      />
+    </nav>
+  </aside>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import logoFull from '@/assets/img/logo_full_.png'
+import { isToken } from '@/utils'
+import { useCartStore } from '@/store/cartStore'
+import { getPrimaryNavItems, getSecondaryNavItems } from '../config/navigation'
+import { useAppNavigation } from '../composables/useAppNavigation'
+import DesktopNavItem from './DesktopNavItem.vue'
+import { useProject } from '@/composables/useProject'
+
+const { projectNameFa } = useProject()
+const cartStore = useCartStore()
+const authenticated = computed(() => isToken())
+const navLogo = logoFull
+const primaryItems = computed(() => getPrimaryNavItems(authenticated.value))
+const secondaryItems = computed(() => getSecondaryNavItems(authenticated.value))
+const cartCount = computed(() => cartStore.itemCount || 0)
+
+const { isNavActive, navigateTo } = useAppNavigation()
+</script>

src/layouts/desktop/desktop-layout.less

@@ -0,0 +1,151 @@
+.desktop-app-layout {
+  display: flex;
+  flex-direction: row;
+  height: 100vh;
+  max-height: 100vh;
+  width: 100%;
+  max-width: 100vw;
+  background: @prefixCls-background-color;
+  overflow: hidden;
+}
+
+.desktop-app-layout__main {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  max-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  margin-right: var(--app-desktop-sidebar-width, 260px);
+}
+
+.desktop-app-layout__main--full {
+  width: 100%;
+  margin-right: 0;
+}
+
+.desktop-app-layout__content {
+  flex: 1 1 0;
+  min-height: 0;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  background: @prefixCls-background-color;
+}
+
+.desktop-sidebar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--app-desktop-sidebar-width, 260px);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  z-index: 100;
+  padding: 20px 12px 16px;
+  box-sizing: border-box;
+  border-left: 1px solid rgba(0, 0, 0, 0.06);
+  overflow: hidden;
+  overscroll-behavior: contain;
+}
+
+.desktop-sidebar__brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 12px 20px;
+  margin-bottom: 4px;
+}
+
+.desktop-sidebar__logo {
+  max-width: 140px;
+  max-height: 56px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+.desktop-sidebar__section {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.desktop-sidebar__section--secondary {
+  margin-top: auto;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.desktop-sidebar__divider {
+  height: 1px;
+  background: rgba(0, 0, 0, 0.08);
+  margin: 12px 8px;
+}
+
+.desktop-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 10px;
+  background: transparent;
+  cursor: pointer;
+  text-align: right;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  color: #6b7280;
+  transition: background 0.15s ease, color 0.15s ease;
+
+  &:hover {
+    background: rgba(167, 43, 119, 0.06);
+    color: @theme-primary;
+  }
+
+  &--active {
+    background: rgba(167, 43, 119, 0.1);
+    color: @theme-primary;
+
+    .desktop-nav-item__icon {
+      color: @theme-primary;
+    }
+  }
+}
+
+.desktop-nav-item__icon {
+  flex-shrink: 0;
+  color: #9ca3af;
+}
+
+.desktop-nav-item__icon-wrap {
+  width: 36px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  background: transparent;
+  flex-shrink: 0;
+}
+
+.desktop-nav-item__label {
+  flex: 1;
+  line-height: 1.3;
+}
+
+.desktop-sidebar__section--secondary .desktop-nav-item {
+  font-size: 13px;
+  font-weight: 500;
+  padding: 8px 12px;
+}

src/layouts/desktop/styles/desktop-inner-pages.less

@@ -0,0 +1,255 @@
+/* Shared desktop layouts for inner pages */
+
+.dinner {
+  min-height: 100%;
+  background: #f6f7f9;
+  color: #111827;
+}
+
+.dinner__container {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 28px 36px 40px;
+  box-sizing: border-box;
+}
+
+.dinner-surface {
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+  border-radius: 16px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+
+/* Cart */
+.dcart-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
+  gap: 20px;
+  align-items: start;
+}
+
+.dcart-items {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.dcart-item {
+  display: flex;
+  gap: 16px;
+  padding: 16px;
+  border-radius: 14px;
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+
+  &__image {
+    width: 88px;
+    height: 88px;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f9fafb;
+    border-radius: 12px;
+    padding: 8px;
+  }
+
+  &__main {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  &__title {
+    font-size: 14px;
+    font-weight: 600;
+    color: #111827;
+    line-height: 1.5;
+  }
+
+  &__meta {
+    font-size: 12px;
+    color: #6b7280;
+  }
+
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+
+  &__price {
+    font-size: 15px;
+    font-weight: 700;
+    color: @theme-primary;
+  }
+}
+
+.dcart-summary {
+  position: sticky;
+  top: 88px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  &__title {
+    font-size: 16px;
+    font-weight: 700;
+    margin: 0;
+  }
+
+  &__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    font-size: 14px;
+  }
+
+  &__total {
+    font-size: 20px;
+    font-weight: 700;
+    color: @theme-primary;
+  }
+}
+
+/* Product detail */
+.dproduct-grid {
+  display: grid;
+  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
+  gap: 24px;
+  align-items: start;
+}
+
+.dproduct-gallery {
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 280px;
+  background: #f9fafb;
+  border-radius: 16px;
+}
+
+.dproduct-info {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.dproduct-info__price-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.dproduct-info__price {
+  font-size: 22px;
+  font-weight: 700;
+  color: @theme-primary;
+}
+
+.dproduct-info__desc {
+  padding: 20px;
+  font-size: 14px;
+  line-height: 1.8;
+  color: #4b5563;
+  white-space: pre-line;
+}
+
+/* Simple form pages (gift card, etc.) */
+.dform-page {
+  max-width: 560px;
+}
+
+.dform-card {
+  padding: 24px;
+}
+
+/* Earn money */
+.dearn-stats {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+  margin: 16px 0;
+}
+
+.dearn-stat {
+  padding: 16px;
+  border-radius: 12px;
+  text-align: center;
+
+  &--blue {
+    background: #dbeafe;
+    color: #2563eb;
+  }
+
+  &--yellow {
+    background: #fef9c3;
+    color: #ca8a04;
+  }
+
+  &__value {
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  &__label {
+    font-size: 12px;
+    margin-top: 6px;
+  }
+}
+
+.dearn-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 16px;
+}
+
+.dearn-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 12px;
+  background: #fff;
+  border: 1px solid rgba(15, 23, 42, 0.06);
+}
+
+/* Physical receive */
+.dphysical-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.dphysical-add {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  padding: 14px;
+  border: 1px dashed rgba(15, 23, 42, 0.15);
+  border-radius: 12px;
+  background: #fff;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  color: #374151;
+  cursor: pointer;
+
+  &:hover {
+    background: #f9fafb;
+  }
+}

src/layouts/desktop/styles/desktop-page-common.less

@@ -0,0 +1,165 @@
+html.app-layout--desktop {
+  .dpage {
+    max-width: 1180px;
+    margin: 0 auto;
+    padding: 28px 36px 48px;
+    box-sizing: border-box;
+  }
+
+  .dpage-topbar {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    margin-bottom: 24px;
+    padding-bottom: 24px;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+
+    &--sticky {
+      position: sticky;
+      top: 0;
+      z-index: 30;
+      margin: -4px 0 20px;
+      padding: 12px 0 20px;
+      background: #f6f7f9;
+    }
+
+    &__back {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      border: none;
+      background: transparent;
+      color: #6b7280;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      padding: 8px 0;
+      flex-shrink: 0;
+
+      &:hover {
+        color: #111827;
+      }
+    }
+
+    &__meta {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &__eyebrow {
+      font-size: 12px;
+      font-weight: 500;
+      color: #9ca3af;
+      margin: 0 0 4px;
+    }
+
+    &__title {
+      font-size: 26px;
+      font-weight: 700;
+      letter-spacing: -0.03em;
+      color: #111827;
+      line-height: 1.2;
+      margin: 0;
+    }
+
+    &__subtitle {
+      font-size: 14px;
+      color: #6b7280;
+      margin: 6px 0 0;
+      line-height: 1.5;
+    }
+  }
+
+  /* Hide mobile fixed headers on desktop inner pages */
+  .fund-info-page-root,
+  .cart-page-root,
+  .gift-card-page-root,
+  .earn-money-page-root,
+  .physical-receive-page-root,
+  .product-detail-page-root,
+  .dinner-page,
+  .cart-page,
+  .gift-card-page,
+  .earn-money-page,
+  .physical-receive-page,
+  .product-detail-page,
+  .about-page-root,
+  .rules-page-root {
+    > .wrap-fix,
+    > div > .wrap-fix,
+    .transaction-list {
+      display: none !important;
+    }
+  }
+
+  .products-page .grid-cols-2 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  @media screen and (min-width: 1100px) {
+    .products-page .grid-cols-2 {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  .dpage-surface {
+    background: #fff;
+    border: 1px solid rgba(15, 23, 42, 0.06);
+    border-radius: 16px;
+    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
+  }
+
+  .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: 0 0 4px;
+    }
+
+    &__title {
+      font-size: 26px;
+      font-weight: 600;
+      letter-spacing: -0.03em;
+      color: #111827;
+      line-height: 1.2;
+      margin: 0;
+    }
+
+    &__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-family: inherit;
+    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);
+    }
+  }
+}

src/layouts/mobile/MobileAppLayout.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="mobile-app-layout">
+    <MobileOverflowMenu
+      :show="popVisible"
+      @close="closeOverflowMenu"
+      @navigate="navigateTo"
+    />
+
+    <div :class="['main-with-bottom-chrome', { 'main-with-bottom-chrome--no-nav': hideMenu }]">
+      <router-view v-slot="{ Component, route: activeRoute }">
+        <transition :name="activeRoute.meta.transition || 'fade'">
+          <component :is="Component" :key="activeRoute.fullPath" class="main-with-bottom-chrome-inner" />
+        </transition>
+      </router-view>
+    </div>
+
+    <Teleport to="body">
+      <MobileBottomNav
+        v-if="!hideMenu"
+        :nav-item-class="navItemClass"
+        @navigate="navigateTo"
+        @toggle-overflow="toggleOverflowMenu"
+      />
+    </Teleport>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useAppNavigation } from '../composables/useAppNavigation'
+import { recoverMobileViewportAfterAuth, resetMobileAppScroll } from '../composables/useMobileScrollReset'
+import MobileBottomNav from './MobileBottomNav.vue'
+import MobileOverflowMenu from './MobileOverflowMenu.vue'
+
+const route = useRoute()
+
+const {
+  popVisible,
+  hideMenu,
+  navItemClass,
+  navigateTo,
+  toggleOverflowMenu,
+  closeOverflowMenu,
+} = useAppNavigation()
+
+watch(
+  () => route.fullPath,
+  () => {
+    resetMobileAppScroll()
+  },
+  { flush: 'post' },
+)
+
+onMounted(() => {
+  resetMobileAppScroll()
+  recoverMobileViewportAfterAuth()
+})
+</script>
+
+<style lang="less" src="./mobile-layout.less"></style>

src/layouts/mobile/MobileBottomNav.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="bottom-appbar w-auto mx-auto bg-white">
+    <div class="tabs bottom-0">
+      <template v-for="item in leftTabs" :key="item.id">
+        <div :class="navItemClass(item.routeName)" class="tab" @click="$emit('navigate', item.routeName)">
+          <div class="tab__icon">
+            <a-badge v-if="item.routeName === 'cart'" :count="cartCount">
+              <Icon :icon="item.icon" size="24" />
+            </a-badge>
+            <Icon v-else :icon="item.icon" size="24" />
+          </div>
+          <div class="text-xs mt-1 font-bold">{{ item.label }}</div>
+        </div>
+      </template>
+
+      <div class="main_in">
+        <div class="text-white circle_in">
+          <div class="circle_into" @click="$emit('toggle-overflow')">
+            <img class="p-2" :src="navLogo" alt="" />
+          </div>
+        </div>
+      </div>
+
+      <template v-for="item in rightTabs" :key="item.id">
+        <div :class="navItemClass(item.routeName)" class="tab" @click="$emit('navigate', item.routeName)">
+          <div class="tab__icon">
+            <a-badge v-if="item.routeName === 'cart'" :count="cartCount">
+              <Icon :icon="item.icon" size="24" />
+            </a-badge>
+            <Icon v-else :icon="item.icon" size="24" />
+          </div>
+          <div class="text-xs mt-1 font-bold">{{ item.label }}</div>
+        </div>
+      </template>
+    </div>
+
+    <div class="main">
+      <div class="circle" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import Icon from '@/components/BasicPacks/BasicIcon.vue'
+import { isToken } from '@/utils'
+import { useCartStore } from '@/store/cartStore'
+import { getPrimaryNavItems } from '../config/navigation'
+import logo from '@/assets/img/logo.png'
+
+defineProps<{
+  navItemClass: (routeName: string) => string
+}>()
+
+defineEmits<{
+  navigate: [routeName: string]
+  'toggle-overflow': []
+}>()
+
+const cartStore = useCartStore()
+const navLogo = logo
+const cartCount = computed(() => cartStore.itemCount || 0)
+
+const primaryItems = computed(() => getPrimaryNavItems(isToken()))
+const leftTabs = computed(() => primaryItems.value.slice(0, 2))
+const rightTabs = computed(() => primaryItems.value.slice(2))
+</script>
+
+<style scoped>
+.tab__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  color: inherit;
+}
+
+.tab__icon :deep(.ant-badge) {
+  color: inherit;
+}
+</style>

src/layouts/mobile/MobileOverflowMenu.vue

@@ -0,0 +1,128 @@
+<template>
+  <Transition>
+    <div
+      v-if="show"
+      class="top-0 bottom-0 bg-black wrap-fix z-5000 opacity-60"
+      @click="$emit('close')"
+    />
+  </Transition>
+  <Transition name="slide-fade">
+    <div v-if="show" class="wrap-fix bottom-11vh z-5000 flex justify-center items-end">
+      <div class="relative flex flex-col items-center">
+        <div
+          class="flex items-center justify-center bg-white rounded-full w-[30px] h-[30px] mb-2"
+          @click="$emit('close')"
+        >
+          <BasicIcon icon="vuesax-linear:close-circle" />
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <BasicButton
+            icon-size="16"
+            class="!font-bold w-15rem"
+            @click="go('user')"
+          >
+            <div class="flex gap-2 items-center">
+              <BasicIcon icon="vuesax-linear:user" size="16" class="absolute right-2" />
+              <div>حساب کاربری</div>
+            </div>
+          </BasicButton>
+          <BasicButton
+            v-if="authenticated"
+            icon-size="16"
+            class="!font-bold w-15rem"
+            @click="go('physicalReceive')"
+          >
+            <div class="flex gap-2 items-center">
+              <BasicIcon icon="vuesax-linear:direct-inbox" size="16" class="absolute right-2" />
+              <div>دریافت طلای فیزیکی</div>
+            </div>
+          </BasicButton>
+          <BasicButton
+            v-if="authenticated"
+            icon-size="16"
+            class="!font-bold w-15rem"
+            @click="go('notifyTrigger')"
+          >
+            <div class="flex gap-2 items-center">
+              <BasicIcon icon="vuesax-linear:bill" size="16" class="absolute right-2" />
+              <div>هشدار قیمت</div>
+            </div>
+          </BasicButton>
+          <BasicButton
+            v-if="authenticated"
+            icon-size="16"
+            class="!font-bold w-15rem"
+            @click="go('buyProduct')"
+          >
+            <div class="flex gap-2 items-center">
+              <BasicIcon icon="vuesax-linear:coin" size="16" class="absolute right-2" />
+              <div>خرید محصول</div>
+            </div>
+          </BasicButton>
+<!--          <BasicButton-->
+<!--            v-if="authenticated"-->
+<!--            icon-size="16"-->
+<!--            class="!font-bold w-15rem"-->
+<!--            @click="go('list')"-->
+<!--          >-->
+<!--            <div class="flex gap-2 items-center">-->
+<!--              <BasicIcon icon="vuesax-linear:receipt-item" size="16" class="absolute right-2" />-->
+<!--              <div>لیست دریافتی ها</div>-->
+<!--            </div>-->
+<!--          </BasicButton>-->
+          <BasicButton
+            v-if="authenticated"
+            icon-size="16"
+            class="!font-bold w-15rem"
+            @click="go('giftCard')"
+          >
+            <div class="flex gap-2 items-center">
+              <BasicIcon icon="vuesax-linear:gift" size="16" class="absolute right-2" />
+              <div>ثبت کارت هدیه</div>
+            </div>
+          </BasicButton>
+          <BasicButton icon-size="16" class="!font-bold w-15rem" @click="go('about')">
+            <div class="flex gap-2 items-center">
+              <BasicIcon icon="vuesax-linear:info-circle" size="16" class="absolute right-2" />
+              <div>درباره ما</div>
+            </div>
+          </BasicButton>
+          <BasicButton
+            v-if="authenticated"
+            icon-size="16"
+            class="!font-bold w-15rem"
+            @click="go('rules')"
+          >
+            <div class="flex gap-2 items-center">
+              <BasicIcon icon="vuesax-linear:task" size="16" class="absolute right-2" />
+              <div>قوانین و مقررات</div>
+            </div>
+          </BasicButton>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import BasicButton from '@/components/BasicPacks/BasicButton.vue'
+import BasicIcon from '@/components/BasicPacks/BasicIcon.vue'
+import { isToken } from '@/utils'
+
+defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+  navigate: [routeName: string]
+}>()
+
+const authenticated = computed(() => isToken())
+
+function go(routeName: string) {
+  emit('navigate', routeName)
+  emit('close')
+}
+</script>

src/layouts/mobile/mobile-layout.less

@@ -0,0 +1,169 @@
+.bottom-appbar {
+  z-index: var(--app-z-nav, 5000);
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  max-width: 100vw;
+  height: calc(var(--app-nav-height, 80px) + var(--app-safe-bottom, env(safe-area-inset-bottom, 0px)));
+  padding-bottom: var(--app-safe-bottom, env(safe-area-inset-bottom, 0px));
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-evenly;
+  background: #fff;
+
+  @media screen and (min-width: 426px) {
+    width: 426px;
+    max-width: 426px;
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+  }
+
+  .tabs {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    background: #fff;
+    justify-content: space-between;
+    position: absolute;
+    bottom: 0;
+    z-index: 400;
+    box-shadow: 0 -2px 4px -2px #0000001a;
+
+    .tab {
+      width: 80px;
+      text-align: center;
+      flex-flow: column;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      align-content: center;
+
+      &.text-primary .tab__icon,
+      &.text-primary .tab__icon .ant-badge {
+        color: @theme-primary;
+      }
+
+      &.text-gray-400 .tab__icon,
+      &.text-gray-400 .tab__icon .ant-badge {
+        color: #9ca3af;
+      }
+    }
+
+    .main_in {
+      width: 70px;
+      height: 70px;
+      flex-shrink: 0;
+      align-self: center;
+
+      .circle_in {
+        margin-top: -10px;
+        border-radius: 50%;
+        width: 70px;
+        height: 70px;
+        flex-shrink: 0;
+        z-index: 20;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: @theme-primary;
+
+        .circle_into {
+          overflow: hidden;
+          background-color: @theme-primary;
+          border-radius: 50%;
+          width: 56px;
+          height: 56px;
+          flex-shrink: 0;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          border: white 1px solid;
+
+          img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+          }
+        }
+      }
+    }
+  }
+
+  .main {
+    height: 70px;
+    width: 70px;
+    position: relative;
+
+    .circle {
+      border-radius: 50%;
+      height: 70px;
+      width: 70px;
+      z-index: 20;
+      box-shadow: 0 -5px 4px -2px #0000001a;
+      position: absolute;
+    }
+  }
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
+.slide-fade-enter-active {
+  transition: all 0.3s ease-out;
+}
+
+.slide-fade-leave-active {
+  transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1);
+}
+
+.slide-fade-enter-from,
+.slide-fade-leave-to {
+  transform: translateX(20px);
+  opacity: 0;
+}
+
+.mobile-app-layout {
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-with-bottom-chrome {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-with-bottom-chrome-inner {
+  flex: 1 1 auto;
+  min-height: 0;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
+}
+
+.main-with-bottom-chrome-inner--contained {
+  overflow: hidden;
+}
+
+.main-with-bottom-chrome--no-nav,
+.main-with-bottom-chrome--no-nav .main-with-bottom-chrome-inner {
+  flex: 1 1 auto;
+  min-height: 0;
+}

src/layouts/styles/desktop-shell.less

@@ -0,0 +1,174 @@
+@desktop-layout-min: 768px;
+
+@media screen and (min-width: @desktop-layout-min) {
+  html {
+    width: 100%;
+    overflow-x: hidden;
+  }
+
+  body {
+    display: block;
+    width: 100%;
+    min-width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  #app {
+    width: 100%;
+    max-width: none;
+    min-height: 100vh;
+  }
+
+  .desktopConfig {
+    position: static !important;
+    width: 100% !important;
+    max-width: none !important;
+    min-height: 100vh;
+    left: auto !important;
+    right: auto !important;
+  }
+
+  .wrap-fix {
+    width: auto !important;
+    max-width: none !important;
+    left: 0 !important;
+    right: 0 !important;
+  }
+
+  .bottom-appbar {
+    display: none !important;
+  }
+}
+
+html.app-layout--desktop {
+  @media screen and (min-width: @desktop-layout-min) {
+    height: 100%;
+    overflow: hidden;
+
+    body,
+    #app,
+    .desktopConfig {
+      height: 100%;
+      overflow: hidden;
+    }
+
+    .ant-config-provider {
+      display: block;
+      height: 100%;
+      max-height: 100vh;
+      overflow: hidden;
+    }
+
+    .app-main {
+      height: 100vh;
+      max-height: 100vh;
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    --app-desktop-sidebar-width: 260px;
+
+    .wrap-fix {
+      right: var(--app-desktop-sidebar-width, 260px) !important;
+    }
+
+    #goftino_w {
+      right: 24px !important;
+    }
+  }
+
+  &.app-layout--desktop-no-sidebar .wrap-fix {
+    right: 0 !important;
+  }
+
+  .desktop-app-layout__content {
+    .w-screen,
+    .md\:w-auto,
+    .md\:w-\[426px\] {
+      width: 100% !important;
+    }
+
+    .mt-20 {
+      margin-top: 0 !important;
+    }
+
+    .dpage {
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .fixed.bottom-20,
+    .fixed.bottom-23 {
+      left: var(--app-desktop-sidebar-width, 260px) !important;
+      right: 0 !important;
+      width: auto !important;
+      max-width: none !important;
+      margin: 0 !important;
+      transform: none !important;
+
+      > div {
+        max-width: 640px;
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+
+    .transaction-list {
+      width: 100% !important;
+      max-width: none !important;
+      left: 0 !important;
+      right: 0 !important;
+    }
+  }
+}
+
+/* Splash — full viewport, centered; never sidebar-offset */
+.app-splash-screen {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  min-height: 100vh;
+  max-width: none;
+  left: 0 !important;
+  right: 0 !important;
+  z-index: 1000000000000;
+
+  &__gradient {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+    pointer-events: none;
+
+    &--top {
+      top: 0;
+    }
+
+    &--bottom {
+      bottom: 0;
+    }
+  }
+
+  &__version {
+    position: absolute;
+    bottom: 20px;
+    left: 0;
+    right: 0;
+    z-index: 10;
+  }
+
+  &__spinner {
+    position: absolute;
+    bottom: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 10;
+  }
+}
+
+html.app-layout--desktop .app-splash-screen {
+  right: 0 !important;
+  left: 0 !important;
+  width: 100vw !important;
+}

src/layouts/styles/mobile-frame.less

@@ -0,0 +1,110 @@
+/**
+ * Mobile shell width rules.
+ * Below 426px: full viewport (phones).
+ * 426px–767px: centered 426px frame (tablet-ish mobile).
+ */
+
+html:not(.app-layout--desktop) {
+  html,
+  body,
+  #app {
+    min-height: 0;
+    height: 100dvh;
+    max-height: 100dvh;
+    overflow: hidden;
+  }
+
+  body {
+    overscroll-behavior: none;
+  }
+
+  .desktopConfig,
+  .app-main {
+    min-height: 0;
+    height: 100dvh;
+    max-height: 100dvh;
+    overflow: hidden;
+  }
+
+  .app-main > * {
+    height: 100%;
+    max-height: 100%;
+    overflow: hidden;
+  }
+
+  .app-dock-add-bar,
+  .wallet-card-slider {
+    box-sizing: border-box;
+  }
+
+  @media screen and (max-width: 425.98px) {
+    body {
+      display: block !important;
+      width: 100% !important;
+      overflow-x: hidden;
+    }
+
+    #app,
+    .desktopConfig,
+    .app-main,
+    .main-with-bottom-chrome,
+    .main-with-bottom-chrome-inner {
+      width: 100% !important;
+      max-width: 100vw !important;
+      min-width: 0 !important;
+      margin: 0 !important;
+    }
+
+    .wrap-fix,
+    .bottom-appbar {
+      width: 100% !important;
+      max-width: 100vw !important;
+      left: 0 !important;
+      right: 0 !important;
+      margin: 0 !important;
+      transform: none !important;
+    }
+
+    .app-dock-add-bar,
+    .wallet-card-slider {
+      width: 100% !important;
+      max-width: 100vw !important;
+      left: 0 !important;
+      right: 0 !important;
+      margin: 0 !important;
+      transform: none !important;
+    }
+  }
+
+  @media screen and (min-width: 426px) and (max-width: 767.98px) {
+    body {
+      display: flex !important;
+      justify-content: center;
+    }
+
+    .desktopConfig {
+      width: 426px !important;
+      max-width: 426px !important;
+    }
+
+    .wrap-fix,
+    .bottom-appbar {
+      width: 426px !important;
+      max-width: 426px !important;
+      left: 50% !important;
+      right: auto !important;
+      margin: 0 !important;
+      transform: translateX(-50%) !important;
+    }
+
+    .app-dock-add-bar,
+    .wallet-card-slider {
+      width: 426px !important;
+      max-width: 426px !important;
+      left: 50% !important;
+      right: auto !important;
+      margin: 0 !important;
+      transform: translateX(-50%) !important;
+    }
+  }
+}

src/layouts/styles/mobile-page-common.less

@@ -0,0 +1,208 @@
+/* Shared mobile page chrome (inner pages — not home .app-header) */
+
+:root {
+  --mpage-header-bar: 2.75rem;
+  --mpage-header-offset: calc(4rem + var(--app-safe-top, env(safe-area-inset-top, 0px)));
+  --mpage-subheader-offset: calc(var(--mpage-header-bar) + var(--app-safe-top, env(safe-area-inset-top, 0px)));
+  --mpage-content-with-subheader: calc(6.5rem + var(--app-safe-top, env(safe-area-inset-top, 0px)));
+  --mpage-scroll-max-height: calc(100dvh - 50px - var(--app-safe-top, env(safe-area-inset-top, 0px)));
+  --mobile-info-support-block: calc(5rem + var(--app-safe-bottom, env(safe-area-inset-bottom, 0px)));
+}
+
+/* Fixed top bar: background fills under status bar; content sits below safe area */
+.mobile-top-chrome {
+  top: 0;
+  box-sizing: border-box;
+  padding-top: calc(0.75rem + var(--app-safe-top, env(safe-area-inset-top, 0px)));
+}
+
+.mobile-top-chrome.h-12,
+.mobile-top-chrome.min-h-12 {
+  height: auto;
+  min-height: calc(3rem + var(--app-safe-top, env(safe-area-inset-top, 0px)));
+}
+
+.mpage-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  top: 0;
+  box-sizing: border-box;
+  padding: 0.75rem;
+  padding-top: calc(0.75rem + var(--app-safe-top, env(safe-area-inset-top, 0px)));
+  background: #fff;
+  color: @theme-primary;
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.5;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+  z-index: 1999;
+
+  &__back {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    padding: 0;
+    color: inherit;
+    cursor: pointer;
+    font-family: inherit;
+  }
+
+  &__title {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__trailing {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+  }
+}
+
+.mpage-subheader {
+  top: var(--mpage-subheader-offset);
+  z-index: 1999;
+  padding: 0.75rem;
+  background: #fff;
+  color: @theme-primary;
+  font-weight: 700;
+}
+
+.mpage-content {
+  padding-top: var(--mpage-header-offset);
+}
+
+.mpage-content--with-subheader {
+  padding-top: var(--mpage-content-with-subheader);
+}
+
+.mpage-scroll {
+  overflow-y: auto;
+  max-height: var(--mpage-scroll-max-height);
+}
+
+.mobile-page-body--pt10 {
+  padding-top: calc(2.5rem + var(--app-safe-top, env(safe-area-inset-top, 0px)));
+}
+
+.mobile-page-body--pt15 {
+  padding-top: calc(3.75rem + var(--app-safe-top, env(safe-area-inset-top, 0px)));
+}
+
+.mobile-page-body--pt20 {
+  padding-top: calc(5rem + var(--app-safe-top, env(safe-area-inset-top, 0px)));
+}
+
+/* Info pages (about, educate): fixed shell, scroll inside content box only */
+.mobile-info-page {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.mobile-info-page__header {
+  z-index: 1999;
+}
+
+/* Decorative page background — fixed to viewport, never scrolls on iOS */
+.mobile-page-bg,
+.mobile-info-page__bg {
+  pointer-events: none;
+  position: fixed;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: var(--app-bottom-chrome-height, 80px);
+  overflow: hidden;
+  max-width: 100vw;
+  box-sizing: border-box;
+
+  img {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: auto;
+  }
+}
+
+.mobile-page-bg--no-nav,
+.mobile-info-page__bg {
+  bottom: var(--app-credit-footer-offset, 0px);
+}
+
+.mobile-page-bg--cover {
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+html:not(.app-layout--desktop) {
+  @media screen and (min-width: 426px) and (max-width: 767.98px) {
+    .mobile-page-bg,
+    .mobile-info-page__bg {
+      width: 426px;
+      max-width: 426px;
+      left: 50%;
+      right: auto;
+      transform: translateX(-50%);
+    }
+  }
+}
+
+.mobile-info-page__main {
+  position: relative;
+  z-index: 1;
+  flex: 1 1 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding-top: calc(var(--mpage-header-offset) + 1rem);
+  padding-right: 2.5rem;
+  padding-left: 2.5rem;
+  padding-bottom: calc(
+    var(--mobile-info-support-block, 5rem) + var(--app-credit-footer-offset, 0px) + 1.25rem
+  );
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
+}
+
+.mobile-info-page__support {
+  bottom: var(--app-credit-footer-offset, 0px);
+  box-sizing: border-box;
+  padding: 1rem 2.5rem;
+  padding-bottom: calc(1rem + var(--app-safe-bottom, env(safe-area-inset-bottom, 0px)));
+  background: #fff;
+  box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.06);
+  z-index: 1998;
+}
+
+.mobile-content-box {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-height: 0;
+  overflow: hidden;
+  margin-bottom: 0.75rem;
+}
+
+.mobile-content-box__scroll {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  -webkit-overflow-scrolling: touch;
+  overscroll-behavior-y: contain;
+}

src/layouts/types.ts

@@ -0,0 +1,9 @@
+export interface AppNavItem {
+  id: string
+  routeName: string
+  label: string
+  icon: string
+  iconSrc?: string
+  authOnly?: boolean
+  guestOnly?: boolean
+}

src/main.ts

@@ -1,189 +1,18 @@
 import 'ant-design-vue/dist/antd.less'
 import './assets/css/main.less'
 import 'virtual:uno.css'
-import { computed, createApp, ref, watch } from 'vue'
-import { createPinia } from 'pinia'
+
+import { initPwaInstallCapture } from '@/modules/pwa/manifest'
+import { bootstrapApp } from '@/app/bootstrap'
+
+export {
+  setTruth,
+  setEnableAuthenticate,
+  setFingerPosition,
+  setFingerTimeOut
+} from '@/app/authBoot'
+
 import '@unocss/reset/tailwind-compat.css'
-import VueApexCharts from 'vue3-apexcharts'
-import App from './App.vue'
-import router from './router'
-import { authenticateWithFingerprint, getToken, isIphone, removeToken } from '@/utils'
-import { useUserStore } from '@/store/userStore'
-import { useWalletStore } from '@/store/walletStore'
-import { useFundUserStore } from '@/store/fundStore'
-import VueLazyLoad from 'vue3-lazyload'
-import { getMe } from '@/api/me'
-import type { NavigationGuardNext, RouteLocationNormalized } from 'vue-router'
-import { useAuthStore } from '@/store/useAuthStore'
-
-const app = createApp(App)
-app.use(createPinia())
-app.use(VueLazyLoad, {
-  // options...
-})
-app.use(router)
-app.use(VueApexCharts)
-
-const userStore = useUserStore()
-const walletStore = useWalletStore()
-const fundStore = useFundUserStore()
-const authStore = useAuthStore()
-const isApple: boolean = isIphone()
-let isFirst: boolean = true
-let fingerPosition: boolean = false
-let timeoutId: ReturnType<typeof setTimeout> | null = null
-let hasFingerPrint: boolean = false
-const userInfo = ref()
-// userInfo.value = await getMe()
-// const token = getToken()
-
-const currentRoute = computed(() => {
-  return router.currentRoute.value.fullPath
-})
-
-async function start() {
-  // console.log('ffffffffffffffffffffffffffffffffffffffffff')
-  if (getToken()) {
-    // await userStore.getMyInfo()
-    await walletStore.getLimitedPrice()
-    await walletStore.getLimitedBuyGold()
-    await fundStore.getMyFund()
-  }
-
-}
-
-export function setTruth() {
-  fingerPosition = true
-}
-
-export function setEnableAuthenticate() {
-  fingerPosition = false
-}
-
-
-function goToLogin(to: RouteLocationNormalized, next: NavigationGuardNext) {
-  if (to.name === 'buyProduct'||to.name === 'productDetail'||to.name==='about'||to.name==='cart') {
-    return next() // Allow access to buyProduct without login
-  }
-  if (to.name !== 'login') {
-    return next({ name: 'login' }) // Redirect to login
-  } else {
-    return next() // If already on the login page, don't redirect
-  }
-}
-
-function goToHome(to: RouteLocationNormalized, next: NavigationGuardNext) {
-  if (to.name !== 'buyProduct') {
-    return next({ name: 'buyProduct' }) // Redirect to login
-  } else {
-    return next() // If already on the login page, don't redirect
-  }
-}
-
-router.beforeEach(async (to, from, next) => {
-  authStore.setLoading(true)
-  // console.log(authStore)
-  if (timeoutId) {
-    clearTimeout(timeoutId)
-  }
-  // Start a new timeout to reset fingerprint after 5 seconds of inactivity
-  if (from.name !== 'login' || from.name !== undefined) {
-    // console.log(from.name)
-    timeoutId = setTimeout(async () => {
-      if (hasFingerPrint) {
-        fingerPosition = false
-        /*        fingerPosition = await authenticateWithFingerprint()
-                if (!fingerPosition) {
-                  goToLogin(to, next)
-                }*/
-        // isFirst = true;
-        console.log('Fingerprint authentication reset after 5 seconds of inactivity')
-      }
-    }, 180000) // 5 seconds
-  }
-  // If it's the first time the navigation guard runs
-  if (isFirst) {
-    isFirst = false // Set isFirst to false after the first check
-
-    // If the user has a token
-    if (getToken()) {
-      await userStore.getMyInfo()
-      const  finger_print  =userStore.userInfo.finger_print
-      // console.log(finger_print)
-      // const { finger_print } = await getMe()
-      hasFingerPrint = finger_print
-      // If on an Apple device and fingerprint exists
-      if (isApple && finger_print) {
-        removeToken() // Remove token if fingerprint is found
-        goToLogin(to, next) // Redirect to login
-      }
-      // If not an Apple device and fingerprint exists
-      else if (!isApple && finger_print) {
-        // goToLogin(to, next)
-        fingerPosition = await authenticateWithFingerprint()
-
-        if (fingerPosition) {
-          // goToHome(to, next) // Redirect to home if fingerprint is authenticated
-        } else {
-          goToLogin(to, next) // Redirect to login if authentication fails
-        }
-      } else {
-        // console.log('salam')
-        if (from.path === '/') {
-          // goToHome(to, next)
-        }
-        if(to.name=="login"){
-          goToHome(to, next)
-        }
-        return next()
-      }
-    } else {
-      // If no token, handle redirect to login or allow access to login, 404, or buyProduct
-      if (['login', '404', 'buyProduct','productDetail','about','cart'].includes(to.name as string)) {
-        return next() // Allow access to login, 404, or buyProduct
-      }
-      goToLogin(to, next) // Redirect to login if no token
-    }
-  }
-  // For subsequent navigations after the first check
-  else {
-    // If the user has passed fingerprint authentication
-    if (fingerPosition) {
-      if (getToken()) {
-        if (to.name === 'login') {
-          return next({ name: from.name || 'buyProduct' }) // Redirect to home if trying to access login after authentication
-        }
-        return next() // Proceed to the intended route
-      } else {
-        // If no token, ensure proper redirection to login or 404
-        if (['login', '404', 'buyProduct','productDetail','about','cart'].includes(to.name as string)) {
-          return next() // Allow access to login, 404, or buyProduct
-        }
-        return next({ name: 'login' })
-      }
-    }
-    // If fingerprint authentication failed or was not done
-    else {
-      if (getToken() && !hasFingerPrint) {
-        next()
-      } else {
-        goToLogin(to, next)
-      }
-      /*      if (to.name !== 'login') {
-              return next({ name: 'login' }) // Redirect to login
-            } else {
-              return next() // If already on the login page, don't redirect
-            }*/
-      /*      console.log('sssssssssssssssssssssssss')
-            return next({ name: 'login' })*/
-    }
-  }
-})
-
-app.mount('#app')
-// if (currentRoute.value !== '/') {
-//     await start()
-// }
-watch(currentRoute, async () => userStore.userInfo ? '' : await start())
-
 
+initPwaInstallCapture()
+bootstrapApp()

src/mainTEst.ts

@@ -90,7 +90,7 @@ export function setFingerTimeOut(to: RouteLocationNormalized){
       // console.log('Fingerprint authentication reset after 5 seconds of inactivity');
       await router.push({ name: 'login' })
       if (to.name !== 'login') {
-        message.warn('شما مدت زیادی با قطره کار نکردید، لطفا دوباره وارد شوید.')
+        message.warn('شما مدت زیادی با کشکول گلد کار نکردید، لطفا دوباره وارد شوید.')
       }
     }
   }, 10000) // 3 minutess

src/models/home.ts

@@ -12,8 +12,23 @@ export interface Series {
 }
 */
 
+export interface PriceUp {
+  buy: number
+  sell: number
+}
+
+export type PriceStatus = 'open' | 'closed' | 'no_quote'
+
 export interface Price {
-    sell: number
-    buy: number
-    price_last: number
-}
+  sell: number
+  buy: number
+  price: number
+  price_last: number
+  goldir?: number
+  up?: PriceUp
+  closed?: boolean
+  status?: PriceStatus
+  time?: string
+  main_product?: number
+  montzar?: number
+}

src/models/order.ts

@@ -8,6 +8,7 @@ export interface Order {
     sts_str?: string
     payment_sts?: number
     payment_amount?: number
+    target_cash?: number
     service_charge_price?: number
     total_fee?: number
     total_price?: number

src/models/walletAssets.ts

@@ -0,0 +1,44 @@
+export interface WalletAssetsMeta {
+  metal_ids: number[]
+  metal_count: number
+  has_count_based_products: boolean
+  has_weight_based_products: boolean
+  weight_unit: string
+  single_metal: boolean
+}
+
+export interface WalletInventoryCard {
+  product_id: number
+  title: string
+  group_type: string
+  metal_id: number
+  quantity: number
+  unit: string
+  display_type: 'count' | 'weight'
+  unit_weight?: string | null
+  show_in_assets: boolean
+  is_melted?: boolean
+  is_main_wallet?: boolean
+  file?: { src?: string | null } | null
+}
+
+export interface WalletMetalTotal {
+  metal_id: number
+  metal_label: string
+  label: string
+  product_weight: number
+  melted_weight: number
+  total_weight: number
+  unit: string
+}
+
+export interface WalletAssetsSummary {
+  meta: WalletAssetsMeta
+  cash_wallet: number
+  inventory_cards: WalletInventoryCard[]
+  count_products: WalletInventoryCard[]
+  metal_totals: WalletMetalTotal[]
+  assets_rial_value: number
+  total_rial_value: number
+  profit_loss?: number
+}

src/modules/pwa/manifest-cache.ts

@@ -0,0 +1,72 @@
+export type PwaManifestIcon = {
+  src: string
+  sizes?: string
+  type?: string
+  purpose?: string
+}
+
+export type PwaManifest = {
+  id?: string
+  name?: string
+  short_name?: string
+  lang?: string
+  dir?: string
+  start_url?: string
+  scope?: string
+  display?: string
+  background_color?: string
+  theme_color?: string
+  description?: string
+  icons?: PwaManifestIcon[]
+}
+
+const MANIFEST_CACHE_KEY = 'PWA_MANIFEST_CACHE_V5'
+const MANIFEST_CACHE_MAX_AGE_MS = 60 * 60 * 24 * 7
+
+export type CachedPwaManifest = {
+  cached_at: number
+  user_id: string | number
+  config_base: string
+  manifest_url: string
+  manifest: PwaManifest
+}
+
+export function readCachedPwaManifest(
+  userId: string | number | null | undefined,
+  configBase: string
+): CachedPwaManifest | null {
+  if (userId == null || userId === '' || !configBase) return null
+
+  try {
+    const raw = localStorage.getItem(MANIFEST_CACHE_KEY)
+    if (!raw) return null
+
+    const payload = JSON.parse(raw) as CachedPwaManifest
+
+    if (!payload?.manifest || !payload.manifest_url) return null
+    if (String(payload.user_id) !== String(userId)) return null
+    if (payload.config_base !== configBase) return null
+
+    if (Date.now() - Number(payload.cached_at || 0) > MANIFEST_CACHE_MAX_AGE_MS) {
+      localStorage.removeItem(MANIFEST_CACHE_KEY)
+      return null
+    }
+
+    return payload
+  } catch {
+    localStorage.removeItem(MANIFEST_CACHE_KEY)
+    return null
+  }
+}
+
+export function writeCachedPwaManifest(entry: CachedPwaManifest) {
+  try {
+    localStorage.setItem(MANIFEST_CACHE_KEY, JSON.stringify(entry))
+  } catch (error) {
+    console.warn('Failed to cache PWA manifest:', error)
+  }
+}
+
+export function clearCachedPwaManifest() {
+  localStorage.removeItem(MANIFEST_CACHE_KEY)
+}

src/modules/pwa/manifest.ts

@@ -0,0 +1,558 @@
+import type { AppConfig } from '@/config/types'
+import { getConfig, getRawAppConfig } from '@/config/app-config'
+import { getConfigUrls, sortConfigUrls } from '@/config/load-config'
+import {
+  clearCachedPwaManifest,
+  readCachedPwaManifest,
+  writeCachedPwaManifest,
+  type PwaManifest
+} from '@/modules/pwa/manifest-cache'
+
+export { clearCachedPwaManifest, type PwaManifest, type PwaManifestIcon } from '@/modules/pwa/manifest-cache'
+
+export const PWA_MANIFEST_READY_KEY = 'pwa_manifest_ready'
+export const PWA_MANIFEST_READY_EVENT = 'pwa-manifest-ready'
+
+const CONFIG_SUCCESS_URL_KEY = 'CONFIG_Success_URL'
+let pendingBeforeInstallPrompt: Event | null = null
+let installCaptureInitialized = false
+const MANIFEST_RETRY_DELAY_MS = 500
+
+function sleep(ms: number) {
+  return new Promise((resolve) => window.setTimeout(resolve, ms))
+}
+
+function normalizeBaseUrl(url: string) {
+  return url.replace(/\/get_user\/?$/i, '').replace(/\/+$/, '')
+}
+
+/** همان baseای که get_user از آن لود شده (کش شده در localStorage) */
+export function getConfigBaseFromStorage() {
+  const lastSuccess = localStorage.getItem(CONFIG_SUCCESS_URL_KEY)
+  if (!lastSuccess) return ''
+  return normalizeBaseUrl(lastSuccess)
+}
+
+function configUrlToManifestUrl(configUrl: string) {
+  return `${configUrl.replace(/\/+$/, '')}/manifest.json`
+}
+
+/** همان ۵ URL پایهٔ get_user — اولویت با CONFIG_Success_URL */
+export function resolveManifestUrls(config?: AppConfig | null): string[] {
+  const explicit = getConfig<string>('manifest_url')
+  if (explicit) return [explicit]
+
+  return sortConfigUrls(getConfigUrls()).map(configUrlToManifestUrl)
+}
+
+/** اولین کاندید — برای سازگاری */
+export function resolveManifestUrl(config?: AppConfig | null) {
+  return resolveManifestUrls(config)[0] ?? ''
+}
+
+function isValidManifest(payload: unknown): payload is PwaManifest {
+  if (!payload || typeof payload !== 'object') return false
+
+  const manifest = payload as PwaManifest
+  const icons = manifest.icons
+
+  if (!Array.isArray(icons) || icons.length === 0) return false
+
+  return icons.some((icon) => typeof icon?.src === 'string' && icon.src.trim().length > 0)
+}
+
+async function fetchManifestOnce(url: string, timeout = 6000): Promise<PwaManifest> {
+  const controller = new AbortController()
+  const timeoutId = window.setTimeout(() => controller.abort(), timeout)
+
+  try {
+    const response = await fetch(url, {
+      method: 'GET',
+      headers: { Accept: 'application/manifest+json, application/json' },
+      cache: 'default',
+      signal: controller.signal,
+      priority: 'high'
+    })
+
+    if (!response.ok) {
+      throw new Error(`Manifest request failed: ${response.status}`)
+    }
+
+    const payload = await response.json()
+
+    if (!isValidManifest(payload)) {
+      throw new Error('Manifest response is missing valid icons')
+    }
+
+    return payload
+  } finally {
+    clearTimeout(timeoutId)
+  }
+}
+
+/** هر URL یک بار — مثل لوپ get_user */
+async function fetchManifestTryingUrls(
+  urls: string[]
+): Promise<{ manifest: PwaManifest; manifestUrl: string }> {
+  if (!urls.length) {
+    throw new Error('No manifest URL candidates')
+  }
+
+  let lastError: unknown = null
+
+  for (let index = 0; index < urls.length; index++) {
+    const url = urls[index]
+
+    try {
+      const manifest = await fetchManifestOnce(url)
+      return { manifest, manifestUrl: url }
+    } catch (error) {
+      lastError = error
+      console.warn(`PWA manifest failed (${url}), candidate ${index + 1}/${urls.length}`, error)
+    }
+
+    if (index < urls.length - 1) {
+      await sleep(MANIFEST_RETRY_DELAY_MS)
+    }
+  }
+
+  throw lastError ?? new Error('PWA manifest could not be loaded from any server')
+}
+
+let manifestBlobUrl: string | null = null
+
+function revokeManifestBlobUrl() {
+  if (manifestBlobUrl) {
+    URL.revokeObjectURL(manifestBlobUrl)
+    manifestBlobUrl = null
+  }
+}
+
+function isAbsoluteWebUrl(src: string) {
+  return /^https?:\/\//i.test(src) || src.startsWith('//')
+}
+
+function toAbsoluteAssetUrl(src: string, base: string) {
+  const value = String(src || '').trim()
+  if (!value) return ''
+
+  if (value.startsWith('//')) {
+    const protocol = window.location.protocol === 'https:' ? 'https:' : 'http:'
+    return `${protocol}${value}`
+  }
+
+  if (/^(https?:\/\/|data:|blob:)/i.test(value)) return value
+  if (!base) return value
+
+  return `${base.replace(/\/+$/, '')}/${value.replace(/^\/+/, '')}`
+}
+
+/** path داخل همین اپ — دامنهٔ سرور (montpar.ir) نادیده گرفته می‌شود */
+function toManifestPath(url: string | undefined, fallback = '/') {
+  const defaultPath = fallback.startsWith('/') ? fallback : `/${fallback}`
+
+  if (!url?.trim()) return defaultPath
+
+  try {
+    const trimmed = url.trim()
+
+    if (trimmed.startsWith('/') && !trimmed.startsWith('//')) {
+      return trimmed
+    }
+
+    const parsed = new URL(trimmed)
+    const path = `${parsed.pathname || '/'}${parsed.search}${parsed.hash}`
+
+    if (parsed.origin !== window.location.origin) {
+      return path || '/'
+    }
+
+    return path || '/'
+  } catch {
+    return defaultPath
+  }
+}
+
+/**
+ * blob manifest فقط URL مطلق هم‌origin را می‌پذیرد (مثلاً http://192.168.x.x:3100/).
+ * مسیر نسبی مثل "/" → "property ignored, URL is invalid".
+ */
+function toSameOriginManifestUrl(url: string | undefined, fallbackPath = '/') {
+  const path = toManifestPath(url, fallbackPath)
+  return new URL(path, window.location.origin).href
+}
+
+function normalizeManifestId(id: string | undefined, startUrl: string) {
+  const value = String(id || '').trim()
+  if (!value || value === '/') return startUrl
+
+  try {
+    const parsed = new URL(value, window.location.origin)
+    if (parsed.origin === window.location.origin) return parsed.href
+  } catch {
+    // ignore
+  }
+
+  return startUrl
+}
+
+function guessMimeType(src: string) {
+  const lower = src.split('?')[0].toLowerCase()
+
+  if (lower.endsWith('.png')) return 'image/png'
+  if (lower.endsWith('.jpg') || lower.endsWith('.jpeg')) return 'image/jpeg'
+  if (lower.endsWith('.webp')) return 'image/webp'
+
+  return 'image/png'
+}
+
+function mapManifestIcons(manifest: PwaManifest, base: string) {
+  return (manifest.icons || [])
+    .map((icon) => {
+      const src = toAbsoluteAssetUrl(icon.src, base)
+
+      return {
+        src,
+        sizes: icon.sizes || '512x512',
+        type: guessMimeType(src),
+        purpose: icon.purpose || 'any'
+      }
+    })
+    .filter((icon) => isAbsoluteWebUrl(icon.src))
+}
+
+/** فقط آیکون‌های داخل monifist.json — بدون آواتار / pwa-icons / env */
+function resolveInstallIcons(manifest: PwaManifest) {
+  const base = getConfigBaseFromStorage()
+  const mapped = mapManifestIcons(manifest, base)
+
+  if (!mapped.length) {
+    throw new Error('Manifest icons could not be resolved to absolute URLs')
+  }
+
+  return mapped
+}
+
+function prepareManifestForInstall(manifest: PwaManifest) {
+  const scopeUrl = toSameOriginManifestUrl(manifest.scope ?? manifest.start_url, '/')
+  const startUrl = toSameOriginManifestUrl(manifest.start_url, '/')
+  const icons = resolveInstallIcons(manifest)
+  const name = manifest.short_name || manifest.name
+
+  if (!name) {
+    throw new Error('Manifest is missing name/short_name')
+  }
+
+  if (!manifest.theme_color) {
+    throw new Error('Manifest is missing theme_color')
+  }
+
+  // start_url باید داخل scope باشد
+  const scopeBase = scopeUrl.endsWith('/') ? scopeUrl : `${scopeUrl}/`
+  const effectiveScope = startUrl.startsWith(scopeBase) ? scopeUrl : toSameOriginManifestUrl('/', '/')
+
+  return {
+    id: normalizeManifestId(manifest.id, startUrl),
+    name,
+    short_name: manifest.short_name || manifest.name || name,
+    lang: manifest.lang || 'fa',
+    dir: manifest.dir || 'rtl',
+    start_url: startUrl,
+    scope: effectiveScope,
+    display: manifest.display || 'standalone',
+    background_color: manifest.background_color || '#ffffff',
+    theme_color: manifest.theme_color,
+    description: manifest.description || name,
+    icons
+  }
+}
+
+function pickManifestIconUrl(manifest: PwaManifest, preferredSizes: number[]) {
+  const icons = manifest.icons ?? []
+
+  for (const size of preferredSizes) {
+    const target = `${size}x${size}`
+    const match = icons.find((icon) => String(icon.sizes || '').includes(target))
+
+    if (match?.src) return match.src
+  }
+
+  const sorted = [...icons].sort((a, b) => {
+    const aSize = Number.parseInt(String(a.sizes || '0'), 10) || 0
+    const bSize = Number.parseInt(String(b.sizes || '0'), 10) || 0
+    return bSize - aSize
+  })
+
+  return sorted[0]?.src || ''
+}
+
+function upsertLink(rel: string, attrs: Record<string, string>) {
+  const selectorParts = Object.entries(attrs)
+    .filter(([key]) => key !== 'href')
+    .map(([key, value]) => `[${key}="${value}"]`)
+    .join('')
+
+  let link = document.querySelector<HTMLLinkElement>(`link[rel="${rel}"]${selectorParts}`)
+
+  if (!link) {
+    link = document.createElement('link')
+    link.rel = rel
+    document.head.appendChild(link)
+  }
+
+  Object.entries(attrs).forEach(([key, value]) => {
+    link!.setAttribute(key, value)
+  })
+
+  return link
+}
+
+function upsertMeta(name: string, content: string) {
+  let meta = document.querySelector<HTMLMetaElement>(`meta[name="${name}"]`)
+
+  if (!meta) {
+    meta = document.createElement('meta')
+    meta.name = name
+    document.head.appendChild(meta)
+  }
+
+  meta.content = content
+}
+
+function removeAllManifestLinks() {
+  document.querySelectorAll<HTMLLinkElement>("link[rel='manifest']").forEach((node) => node.remove())
+}
+
+function removeDynamicManifestLinks() {
+  removeAllManifestLinks()
+  revokeManifestBlobUrl()
+
+  document
+    .querySelectorAll<HTMLLinkElement>("link[rel='apple-touch-icon'][data-dynamic-pwa='true']")
+    .forEach((node) => node.remove())
+}
+
+function applyAppleTouchIconsFromManifest(manifest: PwaManifest) {
+  document
+    .querySelectorAll<HTMLLinkElement>("link[rel='apple-touch-icon'][data-dynamic-pwa='true']")
+    .forEach((node) => node.remove())
+
+  const appleSizes = [180, 167, 152, 120]
+  const used = new Set<string>()
+
+  appleSizes.forEach((size) => {
+    const href = pickManifestIconUrl(manifest, [size, 192, 512])
+
+    if (!href || used.has(href)) return
+
+    used.add(href)
+
+    upsertLink('apple-touch-icon', {
+      'data-dynamic-pwa': 'true',
+      sizes: `${size}x${size}`,
+      href
+    })
+  })
+
+  const primary = pickManifestIconUrl(manifest, [180, 192, 512, 384])
+
+  if (primary) {
+    upsertLink('apple-touch-icon', {
+      'data-dynamic-pwa': 'true',
+      href: primary
+    })
+  }
+}
+
+export async function applyPreparedManifestToDocument(
+  normalized: PwaManifest,
+  manifestUrl: string
+) {
+  removeDynamicManifestLinks()
+
+  if (!normalized.icons?.length) {
+    throw new Error('Manifest has no valid absolute icon URLs')
+  }
+
+  const title = normalized.short_name || normalized.name
+
+  if (!title) {
+    throw new Error('Prepared manifest is missing title')
+  }
+
+  document.title = title
+
+  const blob = new Blob([JSON.stringify(normalized)], {
+    type: 'application/manifest+json'
+  })
+  manifestBlobUrl = URL.createObjectURL(blob)
+
+  upsertLink('manifest', {
+    'data-dynamic-pwa': 'true',
+    href: manifestBlobUrl
+  })
+
+  if (normalized.theme_color) {
+    upsertMeta('theme-color', normalized.theme_color)
+  }
+
+  upsertMeta('apple-mobile-web-app-title', title)
+  upsertMeta('mobile-web-app-capable', 'yes')
+  upsertMeta('apple-mobile-web-app-capable', 'yes')
+
+  applyAppleTouchIconsFromManifest(normalized)
+
+  const favicon = pickManifestIconUrl(normalized, [192, 180, 128, 96, 72])
+
+  console.info('PWA manifest applied:', manifestUrl, `icons: ${normalized.icons.length}`)
+
+  if (favicon) {
+    upsertLink('icon', { type: 'image/png', href: favicon })
+  }
+}
+
+export async function applyManifestToDocument(manifest: PwaManifest, manifestUrl: string) {
+  const prepared = prepareManifestForInstall(manifest)
+  await applyPreparedManifestToDocument(prepared, manifestUrl)
+}
+
+export function setPwaManifestReady(enabled: boolean) {
+  if (enabled) {
+    sessionStorage.setItem(PWA_MANIFEST_READY_KEY, '1')
+  } else {
+    sessionStorage.removeItem(PWA_MANIFEST_READY_KEY)
+  }
+}
+
+export function isPwaManifestReady() {
+  return sessionStorage.getItem(PWA_MANIFEST_READY_KEY) === '1'
+}
+
+/** هرچه زودتر در main.ts — قبل از bootstrap */
+export function initPwaInstallCapture() {
+  if (installCaptureInitialized || typeof window === 'undefined') return
+  installCaptureInitialized = true
+
+  window.addEventListener('beforeinstallprompt', (e) => {
+    e.preventDefault()
+
+    if (isPwaManifestReady()) {
+      notifyPwaManifestReady(e)
+      return
+    }
+
+    pendingBeforeInstallPrompt = e
+    console.info('PWA install prompt captured, waiting for manifest + service worker')
+  })
+}
+
+export function notifyPwaManifestReady(installEvent?: Event | null) {
+  if (!isPwaManifestReady()) return
+
+  const event = installEvent ?? pendingBeforeInstallPrompt
+
+  window.dispatchEvent(
+    new CustomEvent(PWA_MANIFEST_READY_EVENT, {
+      detail: { installEvent: event }
+    })
+  )
+
+  if (!event) {
+    console.info('PWA ready (manifest + SW). Waiting for beforeinstallprompt…', {
+      secureContext: window.isSecureContext,
+      origin: window.location.origin
+    })
+  }
+
+  pendingBeforeInstallPrompt = null
+}
+
+async function applyCachedManifestEntry(
+  cached: ReturnType<typeof readCachedPwaManifest>
+): Promise<boolean> {
+  if (!cached) return false
+
+  try {
+    const prepared = prepareManifestForInstall(cached.manifest)
+    await applyPreparedManifestToDocument(prepared, cached.manifest_url)
+    setPwaManifestReady(true)
+    return true
+  } catch (error) {
+    console.warn('Cached PWA manifest invalid, refetching:', error)
+    clearCachedPwaManifest()
+    return false
+  }
+}
+
+/**
+ * بعد از loadAppConfig / setAppConfig صدا بزن.
+ * get_user دوباره fetch نمی‌شود — manifest از همان ۵ URL پایهٔ get_user امتحان می‌شود.
+ */
+export async function setupPwaManifest(config?: AppConfig | null): Promise<boolean> {
+  const raw = config ?? getRawAppConfig()
+  const userId = raw?.user?.id
+  const configBase = getConfigBaseFromStorage()
+  const manifestUrls = resolveManifestUrls(raw)
+
+  if (!manifestUrls.length) {
+    console.warn('PWA manifest skipped: no manifest URL candidates')
+    removeDynamicManifestLinks()
+    setPwaManifestReady(false)
+    return false
+  }
+
+  const cached = configBase ? readCachedPwaManifest(userId, configBase) : null
+
+  if (cached && (await applyCachedManifestEntry(cached))) {
+    console.info('PWA manifest applied from cache:', cached.manifest_url)
+    return true
+  }
+
+  try {
+    const { manifest, manifestUrl } = await fetchManifestTryingUrls(manifestUrls)
+
+    const prepared = prepareManifestForInstall(manifest)
+
+    await applyPreparedManifestToDocument(prepared, manifestUrl)
+    setPwaManifestReady(true)
+
+    if (userId != null && userId !== '') {
+      const effectiveConfigBase =
+        configBase || normalizeBaseUrl(manifestUrl.replace(/\/manifest\.json$/i, ''))
+
+      writeCachedPwaManifest({
+        cached_at: Date.now(),
+        user_id: userId,
+        config_base: effectiveConfigBase,
+        manifest_url: manifestUrl,
+        manifest: prepared
+      })
+    }
+
+    console.info('PWA manifest loaded once:', manifestUrl)
+    return true
+  } catch (error) {
+    console.warn('PWA manifest unavailable, PWA disabled this session:', error)
+
+    removeDynamicManifestLinks()
+    setPwaManifestReady(false)
+    return false
+  }
+}
+
+let manifestBootstrapStarted = false
+
+/**
+ * بلافاصله بعد از setAppConfig — بدون await در bootstrap.
+ * اپ منتظر مانیفست نمی‌ماند؛ SW بعد از موفقیت در پس‌زمینه ثبت می‌شود.
+ */
+export function startPwaManifest(config?: AppConfig | null) {
+  if (manifestBootstrapStarted) return
+  manifestBootstrapStarted = true
+
+  void setupPwaManifest(config).then((ready) => {
+    if (!ready) return
+
+    void import('@/modules/pwa/register-pwa').then(({ registerAppPwa }) => registerAppPwa())
+  })
+}

src/modules/pwa/register-pwa.ts

@@ -0,0 +1,33 @@
+import { registerSW } from 'virtual:pwa-register'
+import { isPwaManifestReady, notifyPwaManifestReady } from '@/modules/pwa/manifest'
+
+let swRegistrationStarted = false
+
+export function registerAppPwa() {
+  if (!isPwaManifestReady()) {
+    console.info('Skipping service worker registration: manifest not ready')
+    return
+  }
+
+  if (swRegistrationStarted) return
+  swRegistrationStarted = true
+
+  registerSW({
+    immediate: true,
+    onRegistered() {
+      console.info('PWA service worker registered')
+      notifyPwaManifestReady()
+    },
+    onRegisterError(error: unknown) {
+      console.warn('PWA service worker registration failed:', error)
+      notifyPwaManifestReady()
+    },
+    onNeedRefresh() {
+      console.log('New content available, please refresh.')
+    },
+    onOfflineReady() {
+      console.log('App ready to work offline.')
+      notifyPwaManifestReady()
+    }
+  })
+}

src/modules/version/VersionUpdateModal.vue

@@ -0,0 +1,223 @@
+<template>
+  <Teleport to="body">
+    <Transition name="version-update-fade">
+      <div v-if="isUpdating || hasError" class="version-update-overlay" dir="rtl">
+        <div class="version-update-card">
+          <div v-if="!hasError" class="version-update-spinner" />
+
+          <div v-else class="version-update-error-icon">!</div>
+
+          <h2 class="version-update-title">
+            {{ hasError ? 'خطا در به‌روزرسانی' : 'در حال به‌روزرسانی برنامه' }}
+          </h2>
+
+          <p class="version-update-text">
+            {{ statusText || 'لطفاً چند لحظه صبر کنید...' }}
+          </p>
+
+          <button v-if="hasError" type="button" class="version-update-button" @click="retry">
+            تلاش مجدد
+          </button>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { setAppConfig } from '@/config/app-config'
+import { fetchFreshAppConfig } from '@/config/load-config'
+import { loadRemoteAppVersion, resetVersionCheckCache } from '@/config/load-version'
+import {
+  shouldUpdateForVersion,
+  canStartVersionUpdate,
+  refreshConfigCacheForVersion,
+  cancelVersionUpdateLock,
+  hardReloadApp
+} from '@/config/config-cache'
+
+const isUpdating = ref(false)
+const hasError = ref(false)
+const statusText = ref('')
+const pendingVersion = ref('')
+
+onMounted(async () => {
+  await checkRemoteVersion()
+})
+
+async function checkRemoteVersion() {
+  try {
+    const version = await loadRemoteAppVersion()
+
+    /**
+     * خیلی مهم:
+     * اگر get_version جواب نداد، هیچ کاری نکن.
+     * نه cache پاک کن، نه reload بزن.
+     * چون ممکنه کاربر فقط اینترنت ضعیف داشته باشه یا endpoint موقتاً 404/timeout بده.
+     */
+    if (!version) {
+      console.warn('Remote version is empty. Version check skipped.')
+      return
+    }
+
+    if (!shouldUpdateForVersion(version)) return
+    if (!canStartVersionUpdate(version)) return
+
+    pendingVersion.value = version
+
+    await startUpdate(version)
+  } catch (error) {
+    console.warn('Version check failed. Version update skipped:', error)
+  }
+}
+
+async function startUpdate(version: string) {
+  try {
+    isUpdating.value = true
+    hasError.value = false
+
+    statusText.value = 'در حال آماده‌سازی نسخه جدید...'
+    await wait(500)
+
+    statusText.value = 'دریافت تنظیمات جدید برنامه...'
+
+    const freshConfig = await refreshConfigCacheForVersion(version, fetchFreshAppConfig)
+
+    setAppConfig(freshConfig)
+
+    await wait(500)
+
+    statusText.value = 'بارگذاری مجدد برنامه...'
+    await wait(300)
+
+    hardReloadApp()
+  } catch (error) {
+    console.error('Version update failed:', error)
+
+    cancelVersionUpdateLock()
+
+    isUpdating.value = false
+    hasError.value = true
+    statusText.value = 'به‌روزرسانی انجام نشد. لطفاً دوباره تلاش کنید.'
+  }
+}
+
+function retry() {
+  hasError.value = false
+
+  if (pendingVersion.value) {
+    startUpdate(pendingVersion.value)
+    return
+  }
+
+  resetVersionCheckCache()
+  void checkRemoteVersion()
+}
+
+function wait(ms: number) {
+  return new Promise((resolve) => window.setTimeout(resolve, ms))
+}
+</script>
+
+<style scoped>
+.version-update-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 999999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: radial-gradient(
+      circle at top,
+      rgba(var(--colorPrimaryRGB, 37 99 235) / 0.16),
+      transparent 38%
+    ),
+    rgba(15, 23, 42, 0.38);
+  backdrop-filter: blur(8px);
+}
+
+.version-update-card {
+  width: min(390px, 100%);
+  padding: 30px 22px 26px;
+  border-radius: 24px;
+  text-align: center;
+  color: var(--colorText, #111827);
+  background: var(--bg, #ffffff);
+  border: 1px solid rgba(var(--colorPrimaryRGB, 37 99 235) / 0.18);
+  box-shadow: 0 22px 70px rgba(15, 23, 42, 0.22);
+}
+
+.version-update-spinner {
+  width: 58px;
+  height: 58px;
+  margin: 0 auto 20px;
+  border-radius: 999px;
+  border: 4px solid rgba(var(--colorPrimaryRGB, 37 99 235) / 0.14);
+  border-top-color: var(--colorPrimary, #2563eb);
+  animation: version-update-spin 0.9s linear infinite;
+}
+
+.version-update-error-icon {
+  width: 58px;
+  height: 58px;
+  margin: 0 auto 20px;
+  border-radius: 999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color6, #ffffff);
+  background: var(--color5, #f44336);
+  font-size: 34px;
+  font-weight: 900;
+  line-height: 1;
+}
+
+.version-update-title {
+  margin: 0;
+  color: var(--colorText, #111827);
+  font-size: 19px;
+  font-weight: 900;
+}
+
+.version-update-text {
+  margin: 12px 0 0;
+  color: var(--colorText, #111827);
+  opacity: 0.72;
+  font-size: 14px;
+  line-height: 2;
+}
+
+.version-update-button {
+  width: 100%;
+  margin-top: 22px;
+  padding: 12px 18px;
+  border: 0;
+  border-radius: 14px;
+  color: var(--color6, #ffffff);
+  background: var(--colorPrimary, #2563eb);
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.version-update-button:active {
+  transform: translateY(1px);
+}
+
+.version-update-fade-enter-active,
+.version-update-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.version-update-fade-enter-from,
+.version-update-fade-leave-to {
+  opacity: 0;
+}
+
+@keyframes version-update-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/router/index.ts

@@ -1,4 +1,5 @@
 import {createRouter, createWebHistory} from 'vue-router'
+import { getProjectDefaultRoute } from '@/utils/project'
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
@@ -8,28 +9,22 @@ const router = createRouter({
             name: 'login',
             component: () => import('../views/login/index.vue')
         },
-        /*        {
-                    path: '/',
-                    name: 'null',
-                    redirect: {name: 'home'},
-                    // component: () => import('../views/login/index.vue')
-                },*/
         {
             path: `/`,
             name: 'main',
-            redirect: {name: 'buyProduct'},
+            redirect: () => ({ name: getProjectDefaultRoute() }),
             component: () => import('../views/base/index.vue'),
             children: [
-                // {
-                //     path: 'home',
-                //     name: 'home',
-                //     component: () => import('../views/base/home/index.vue')
-                // },
-                // {
-                //     path: 'gold',
-                //     name: 'gold',
-                //     component: () => import('@/views/base/gold/index.vue')
-                // },
+                {
+                    path: 'home',
+                    name: 'home',
+                    component: () => import('../views/base/home/index.vue')
+                },
+                {
+                    path: 'gold',
+                    name: 'gold',
+                    component: () => import('@/views/base/gold/index.vue')
+                },
                 {
                     path: 'buyProduct',
                     name: 'buyProduct',
@@ -88,19 +83,9 @@ const router = createRouter({
                 {
                     path: 'physicalReceive',
                     name: 'physicalReceive',
+                    redirect: { name: 'list' },
                     component: () => import('@/views/base/physicalReceive/index.vue'),
-                },
-                {
-                    path: 'list',
-                    name: 'list',
-                    component: () => import('@/views/base/physicalReceive/components/RequestList.vue'),
-                },
-              /*  {
-                    path: 'physicalReceive',
-                    name: 'physicalReceive',
-                    redirect:{name: 'list'},
-                    component: () => import('@/views/base/physicalReceive/index.vue'),
-                    children:[
+                    children: [
                         {
                             path: '',
                             name: 'list',
@@ -112,7 +97,7 @@ const router = createRouter({
                             component: () => import('@/views/base/physicalReceive/components/NewRequest.vue')
                         },
                     ]
-                },*/
+                },
                 {
                     path: 'rules',
                     name: 'rules',

src/store/cartStore.ts

@@ -2,8 +2,8 @@ import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'
 import type { CartItem } from '@/models/cart'
 import type { Product } from '@/models/products'
-import type { Price } from '@/models/home'
-import { getProducts } from '@/api/products'
+import { getProductsCatalog } from '@/composables/useProductsCatalog'
+import { getProductBuyPrice } from '@/utils/productPrice'
 
 const CART_STORAGE_KEY = 'ghatre_cart'
 
@@ -113,23 +113,13 @@ export const useCartStore = defineStore('cart', () => {
     return beforeCount - cartItems.value.length
   }
 
-  function recalculateCartPrices(lastPrice: Price) {
-    if (!lastPrice || cartItems.value.length === 0) return
+  function updateCartItemPrices() {
+    if (cartItems.value.length === 0) return
 
     cartItems.value.forEach((item) => {
-      const product = item.product
-      let newPrice = 0
-
-      if (product.group_type == 'آبشده') {
-        newPrice = lastPrice.price_last ?? 0
-      } else {
-        newPrice = product.amount * (lastPrice.price_last ?? 0)
-      }
-
-      product.price = newPrice
-      product.sellPrice = product.amount * (lastPrice.sell ?? 0)
-      item.price = newPrice + (product.cash_fee_buy ?? 0)
-      item.totalPrice = parseInt(String(item.price * item.quantity))
+      const buyPrice = getProductBuyPrice(item.product)
+      item.price = buyPrice
+      item.totalPrice = parseInt(String(buyPrice * item.quantity))
     })
 
     saveCartToStorage()
@@ -139,8 +129,10 @@ export const useCartStore = defineStore('cart', () => {
     if (cartItems.value.length === 0) return 0
 
     try {
-      const serverProducts: Product[] = await getProducts()
-      return syncProductsFromServer(serverProducts)
+      const serverProducts: Product[] = await getProductsCatalog()
+      const removed = syncProductsFromServer(serverProducts)
+      updateCartItemPrices()
+      return removed
     } catch (e) {
       console.error('Error refreshing cart from server:', e)
       return 0
@@ -158,7 +150,7 @@ export const useCartStore = defineStore('cart', () => {
     loadCartFromStorage,
     saveCartToStorage,
     syncProductsFromServer,
-    recalculateCartPrices,
+    updateCartItemPrices,
     refreshCartFromServer
   }
 })

src/store/settingsStore.ts

@@ -0,0 +1,54 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import { getSettings } from '@/api/configuration'
+
+export interface AppSetting {
+  id?: number
+  key?: string | number
+  title_fa?: string
+  value?: string | number
+  description?: string
+  is_active?: boolean
+  type?: string
+}
+
+export const useSettingsStore = defineStore('settings', () => {
+  const settings = ref<AppSetting[]>([])
+  const loaded = ref(false)
+  let fetchPromise: Promise<AppSetting[]> | null = null
+
+  function getSettingByKey(key: string) {
+    const item = settings.value.find((setting) => setting?.key === key)
+    return item?.value ?? null
+  }
+
+  async function fetchSettings(force = false) {
+    if (!force && fetchPromise) {
+      return fetchPromise
+    }
+
+    fetchPromise = (async () => {
+      try {
+        const data = await getSettings()
+        if (Array.isArray(data)) {
+          settings.value = data
+        }
+      } catch (error) {
+        console.log(error)
+      } finally {
+        loaded.value = true
+      }
+
+      return settings.value
+    })()
+
+    return fetchPromise
+  }
+
+  return {
+    settings,
+    loaded,
+    fetchSettings,
+    getSettingByKey,
+  }
+})

src/store/walletStore.ts

@@ -1,15 +1,9 @@
-import { type ComputedRef, ref } from 'vue'
+import { ref } from 'vue'
 import {defineStore} from "pinia";
-import {getMe} from "@/api/me";
-import type {User} from "@/models/login";
 import type {Wallet} from "@/models/wallet";
 import {getWallet} from "@/api/wallet";
-import type {Const} from "@/models/const";
-import {getConstByKey} from "@/api/const";
 export const useWalletStore = defineStore('wallet', () => {
   const walletInfo = ref<Wallet | undefined>(undefined)
-  const limitedPrice = ref<Const[]>()
-  const limitedBuyGold = ref<Const[]>()
 
   async function getMyWallet() {
     try {
@@ -19,40 +13,6 @@ export const useWalletStore = defineStore('wallet', () => {
       console.log(e)
     }
   }
-  async function getLimitedPrice(){
-    try {
-      limitedPrice.value = await getConstByKey('limited_price')
-      return limitedPrice.value
-    }catch (e) {
-      console.log(e)
-    }
-  }
 
-  async function getLimitedBuyGold(){
-    try {
-      limitedBuyGold.value = await getConstByKey('first_customer_wallet_value')
-      return limitedBuyGold.value
-    }catch (e) {
-      console.log(e)
-    }
-  }
-
-/*  const permissions: ComputedRef<string[]> = computed(() => {
-    const permissions: string[] = get(userInfo.value, 'permission', [])
-    const excludes: string[] = get(userInfo.value, 'exclude', [])
-    return permissions.filter((item) => !excludes.includes(item))
-  })*/
-
-/*
-  function canAccess(permissionKey: string) {
-    if (isAdmin.value) return true
-    return permissions.value.includes(permissionKey)
-  }
-*/
-/*
-  const isAdmin = computed(() => {
-    return userInfo.value?.is_admin
-  })*/
-
-  return { walletInfo, getMyWallet, getLimitedPrice, getLimitedBuyGold, limitedPrice, limitedBuyGold/* permissions, canAccess, isAdmin*/ }
+  return { walletInfo, getMyWallet }
 })

src/themeConfig.ts

@@ -1,14 +1,14 @@
 import colors from './baseColor.json'
 /** base config **/
 /** api document **/
-export const baseURL: string = 'https://ghatreh.gold/server/'
+export const baseURL: string = 'https://kh.kashkolgold.ir/server/'
 // const baseUploadURL: string = '/site/file'
 // const uploadURL: string = baseURL + baseUploadURL
 // const baseURLStorage: string = baseURL + '/v1'
 const prefixCls: string = 'noname'
 // const version: string = pkg.version
 // const tokenName: string = 'gholaktala_app_token'
-const tokenName: string = 'ghatreh_app_token'
+const tokenName: string = 'kashkolgold_app_token'
 
 const baseButtonIconSize = '24'
 // const appName = { fa: 'بدون نام', en: 'noname' }

src/utils/categoryTabs.ts

@@ -0,0 +1,7 @@
+import { getStoreCategories } from '@/api/categories'
+
+/** تب‌های فیلتر محصول — فقط از API دسته‌بندی (هماهنگ با پنل ادمین) */
+export async function loadProductCategoryTabNames(): Promise<string[]> {
+  const categories = await getStoreCategories()
+  return categories.map((item) => item.name)
+}

src/utils/config.ts

@@ -0,0 +1,19 @@
+import { getTenantConfig } from '@/config/app-config'
+
+export function getConfigApp(key: string) {
+  const config = getTenantConfig()
+  const value = config?.[key]
+
+  return value ?? null
+}
+
+export {
+  getProjectId,
+  getProjectBranding,
+  getProjectDefaultRoute,
+  isGhatreProject,
+  isKashkoolProject,
+  isBoursecuProject,
+} from '@/utils/project'
+
+export type { ProjectId, ProjectBranding } from '@/utils/project'

src/utils/index.ts

@@ -30,11 +30,11 @@ export async function authenticateWithFingerprint() {
 
   const createOptions = {
     challenge,
-    rp: { name: 'ghatreh' },
+    rp: { name: 'kashkol' },
     user: {
       id: Uint8Array.from('user-id', c => c.charCodeAt(0)),
-      name: 'Ghatreh',
-      displayName: 'Ghatreh'
+      name: 'Kashkol',
+      displayName: 'Kashkol'
     },
     pubKeyCredParams: [{ type: 'public-key', alg: -7 }],
     authenticatorSelection: {
@@ -52,7 +52,7 @@ export async function authenticateWithFingerprint() {
     const credentialId = btoa(String.fromCharCode(...new Uint8Array(credential.rawId)))
 
     // بازیابی توکن از localStorage
-    const token = localStorage.getItem('ghatreh_app_token')
+    const token = localStorage.getItem('kashkol_app_token')
 
     if (!token) {
       console.warn('توکن پیدا نشد، عملیات متوقف شد.')

src/utils/inputRules.ts

@@ -32,9 +32,23 @@ import { computed, ref } from 'vue'
 import type { Rule } from 'ant-design-vue/es/form'
 import { useWalletStore } from '@/store/walletStore'
 import {isToken} from "@/utils/index";
+import { persianToEnglishDigits } from '@/utils/persianDigits'
 
-export const mobileValidation = (title?: string) => {
-  return { len: 11, message: `شماره همراه باید 11 رقم باشد` }
+export const mobileValidation = (title?: string): Rule => {
+  const label = title ?? 'شماره تلفن'
+  return {
+    validator: (_rule, value) => {
+      const normalized = persianToEnglishDigits(String(value ?? '').trim())
+      if (!normalized) {
+        return Promise.resolve()
+      }
+      if (!/^09\d{9}$/.test(normalized)) {
+        return Promise.reject(`${label} باید با 09 شروع شود و 11 رقم باشد`)
+      }
+      return Promise.resolve()
+    },
+    trigger: ['change', 'blur'],
+  }
 }
 
 export const required = (title?: string) => {

src/utils/persianDigits.ts

@@ -0,0 +1,29 @@
+const PERSIAN_DIGITS = '۰۱۲۳۴۵۶۷۸۹'
+const ARABIC_DIGITS = '٠١٢٣٤٥٦٧٨٩'
+
+/** تبدیل ارقام فارسی/عربی و جداکننده اعشار به فرمت انگلیسی */
+export function persianToEnglishDigits(value: string | number | null | undefined): string {
+  if (value == null) {
+    return ''
+  }
+
+  return String(value)
+    .replace(/[۰-۹]/g, (d) => String(PERSIAN_DIGITS.indexOf(d)))
+    .replace(/[٠-٩]/g, (d) => String(ARABIC_DIGITS.indexOf(d)))
+    .replace(/٫/g, '.')
+}
+
+export function shouldNormalizeInputDigits(options: {
+  isPassword?: boolean
+  type?: string
+  inputmode?: string
+}): boolean {
+  if (options.isPassword) {
+    return false
+  }
+  if (options.type === 'price' || options.type === 'number') {
+    return true
+  }
+  const mode = String(options.inputmode ?? '').trim().toLowerCase()
+  return mode === 'numeric' || mode === 'decimal' || mode === 'number'
+}

src/utils/price.ts

@@ -1,86 +1,185 @@
-import {loading} from '@/utils/index'
-import {getLastPrice, getPrice} from '@/api/home'
-import {ref} from 'vue'
-import type {Price} from '@/models/home'
+import { getLastPrice, getPrice } from '@/api/home'
+import type { Price, PriceUp } from '@/models/home'
+import { ref, watch } from 'vue'
+import {
+  priceSocketConnected,
+  priceStreamLifecycle,
+  priceWssEnabled,
+  shouldUsePricePolling,
+} from '@/utils/priceSocketState'
+
+const LAST_INTERVAL_MS = 10000
+
+let lastInterval: ReturnType<typeof setInterval> | undefined
+let lastSubscribers = 0
 
-let interval: any
 export const price = ref<Price>()
 export const lastPrice = ref<Price>()
-export const olderPrice = ref<number| undefined>(0)
+export const olderPrice = ref<number | undefined>(0)
+
+let lastPriceSourceAt = 0
+let consecutivePriceFetchFailures = 0
+
+/** buy/sell نمایش و معامله — همان buy/sell/price_last از /api/price/last */
+export function getTradeBuyPrice(p?: Price | null) {
+  return p?.buy ?? p?.price_last ?? p?.up?.buy ?? 0
+}
+
+export function getTradeSellPrice(p?: Price | null) {
+  return p?.sell ?? p?.up?.sell ?? 0
+}
+
+/** up جدا نگه داشته می‌شود؛ buy/sell/price_last از lastPrice سرور دست‌نخورده می‌ماند */
+export function normalizePriceResponse(data: Price): Price {
+  return data
+}
+
+function hasValidPricePayload(data?: Price | null): boolean {
+  if (!data) {
+    return false
+  }
+
+  return (
+    getTradeBuyPrice(data) > 0
+    || getTradeSellPrice(data) > 0
+    || Number(data.price_last ?? data.price ?? 0) > 0
+  )
+}
+
+export function markPriceSourceReceived() {
+  lastPriceSourceAt = Date.now()
+  consecutivePriceFetchFailures = 0
+}
+
+export function markPriceSourceFetchFailed() {
+  consecutivePriceFetchFailures += 1
+}
+
+export function hasRecentPriceFromSource(maxAgeMs = 45000): boolean {
+  return lastPriceSourceAt > 0 && Date.now() - lastPriceSourceAt < maxAgeMs
+}
+
+export function consecutivePriceSourceFailures(): number {
+  return consecutivePriceFetchFailures
+}
+
+function startPollingInterval() {
+  if (lastInterval || !shouldUsePricePolling()) {
+    return
+  }
+
+  lastInterval = setInterval(() => {
+    if (shouldUsePricePolling()) {
+      void getLastPrices()
+    }
+  }, LAST_INTERVAL_MS)
+}
+
+function stopPollingInterval() {
+  if (lastInterval) {
+    clearInterval(lastInterval)
+    lastInterval = undefined
+  }
+}
+
+function syncLastPricePolling() {
+  const usePolling = shouldUsePricePolling()
+  if (usePolling) {
+    if (lastSubscribers > 0) {
+      startPollingInterval()
+    }
+    return
+  }
+
+  stopPollingInterval()
+}
+
+watch(
+  () => [priceWssEnabled.value, priceSocketConnected.value, priceStreamLifecycle.value] as const,
+  () => {
+    syncLastPricePolling()
+  },
+)
+
+export function startLastPricePolling() {
+  lastSubscribers++
+  syncLastPricePolling()
+}
 
 export async function setIntervalGetAllPrice() {
-    // console.log('salam')
-    try {
-        interval = setInterval(async () => {
-            await getLastPrices()
-            await getUpPrice()
-        }, 10000)
-    } catch (e) {
-        console.log(e)
-    } finally {
-        loading.value = false
-    }
+  startLastPricePolling()
 }
 
 export async function setIntervalGetLastPrice() {
-    // console.log('salam')
-    try {
-        interval = setInterval(async () => {
-            await getLastPrices()
-            // await getUpPrice()
-        }, 10000)
-    } catch (e) {
-        console.log(e)
-    } finally {
-        loading.value = false
-    }
-
+  startLastPricePolling()
 }
 
-export async function getUpPrice() {
-    try {
-        // loading.value = true
-        const data = await getPrice()
-        // const dataLast = await getLastPrice()
-        // if (lastPrice.value?.price_last != dataLast.price_last) {
-        //     olderPrice.value = lastPrice.value?.price_last
-        // }
-        price.value = data
-        // lastPrice.value = dataLast
-    } catch (e) {
-        console.log(e)
-    } finally {
-        // loading.value = false
-    }
-}
-
-
-export async function getLastPrices() {
-    try {
-        // loading.value = true
-        // const data = await getPrice()
-        const dataLast = await getLastPrice()
-        if (lastPrice.value?.price_last != dataLast.price_last) {
-            olderPrice.value = lastPrice.value?.price_last
-        }
-        // price.value = data
-        lastPrice.value = dataLast
-    } catch (e) {
-        console.log(e)
-    } finally {
-        // loading.value = false
-    }
+export function stopLastPricePolling() {
+  lastSubscribers = Math.max(0, lastSubscribers - 1)
+  if (lastSubscribers === 0) {
+    stopPollingInterval()
+  }
 }
 
 export function stopPriceInterval() {
-    // console.log('stop')
-    clearInterval(interval)
+  stopLastPricePolling()
+}
+
+async function fetchUpPrices(): Promise<PriceUp | undefined> {
+  try {
+    const up = await getPrice()
+    if (up?.buy != null && up?.sell != null) {
+      return { buy: up.buy, sell: up.sell }
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+export async function getUpPrice() {
+  await getLastPrices()
+}
+
+export async function getLastPrices(): Promise<boolean> {
+  try {
+    let dataLast = await getLastPrice()
+
+    if (!dataLast?.up) {
+      const up = await fetchUpPrices()
+      if (up) {
+        dataLast = { ...dataLast, up }
+      }
+    }
+
+    applyLastPricePayload(dataLast)
+    return hasValidPricePayload(dataLast)
+  } catch (error) {
+    console.log(error)
+    markPriceSourceFetchFailed()
+    return false
+  }
+}
+
+export function applyLastPricePayload(dataLast: Price) {
+  const normalized = normalizePriceResponse(dataLast)
+  if (lastPrice.value?.price_last != normalized.price_last) {
+    olderPrice.value = lastPrice.value?.price_last
+  }
+  lastPrice.value = normalized
+  price.value = {
+    ...normalized,
+    buy: getTradeBuyPrice(normalized),
+    sell: getTradeSellPrice(normalized),
+  }
+
+  if (hasValidPricePayload(normalized)) {
+    markPriceSourceReceived()
+  }
 }
 
 export function percentPriceChanged() {
-    // console.log(olderPrice.value)
-    // console.log(lastPrice.value?.price_last)
-    if (!olderPrice.value)
-        return 0
-    return ((lastPrice.value?.price_last-olderPrice.value) *100)/olderPrice.value
-}
+  if (!olderPrice.value) {
+    return 0
+  }
+  return ((lastPrice.value?.price_last! - olderPrice.value) * 100) / olderPrice.value
+}

src/utils/priceSocket.ts

@@ -0,0 +1,628 @@
+import type { Price } from '@/models/home'
+import type { Product } from '@/models/products'
+import { Modal } from 'ant-design-vue'
+import { getConfigApp } from '@/utils/config'
+import { applyProductsListFromStream } from '@/utils/productStreamBridge'
+import {
+  priceSocketConnected,
+  priceStreamConnectingSince,
+  priceStreamLifecycle,
+  priceWssEnabled,
+} from '@/utils/priceSocketState'
+
+export {
+  priceSocketConnected,
+  priceStreamConnectingSince,
+  priceStreamLifecycle,
+  priceWssEnabled,
+  shouldUsePricePolling,
+} from '@/utils/priceSocketState'
+
+const RECONNECT_BASE_MS = 3000
+const RECONNECT_MAX_MS = 30000
+const FAILURES_BEFORE_ALERT = 4
+const ALERT_COOLDOWN_MS = 5 * 60 * 1000
+const FALLBACK_POLL_INTERVAL_MS = 10000
+const PRICE_SOURCE_STALE_MS_MOBILE = 50000
+const PRICE_SOURCE_STALE_MS_DESKTOP = 35000
+const STALE_STREAM_MS = 120000
+const FALLBACK_POLL_DELAY_MS = 2500
+
+let eventSource: EventSource | null = null
+let subscribers = 0
+let stopped = false
+let getSetting: ((key: string) => unknown) | null = null
+let reconnectTimer: ReturnType<typeof setTimeout> | undefined
+let staleCheckTimer: ReturnType<typeof setInterval> | undefined
+let reconnectAttempt = 0
+let lastStreamEventAt = 0
+let networkAlertOpen = false
+let lastNetworkAlertAt = 0
+let listenersBound = false
+let fallbackPollTimer: ReturnType<typeof setTimeout> | undefined
+let fallbackPollInterval: ReturnType<typeof setInterval> | undefined
+let pendingPriceAlert = false
+
+function isMobileDevice(): boolean {
+  if (typeof navigator === 'undefined') {
+    return false
+  }
+
+  return /iPhone|iPad|iPod|Android|Mobile/i.test(navigator.userAgent)
+}
+
+function isPageVisible(): boolean {
+  return typeof document === 'undefined' || document.visibilityState === 'visible'
+}
+
+function markConnectingLifecycle() {
+  priceStreamLifecycle.value = 'connecting'
+  if (priceStreamConnectingSince.value <= 0) {
+    priceStreamConnectingSince.value = Date.now()
+  }
+}
+
+function clearConnectingLifecycle() {
+  priceStreamConnectingSince.value = 0
+}
+
+function isTruthySetting(value: unknown, defaultValue = true): boolean {
+  if (value === null || value === undefined || value === '') {
+    return defaultValue
+  }
+
+  return ['true', '1', 'yes', 'on'].includes(String(value).toLowerCase())
+}
+
+function resolveStreamPath(): string {
+  const ssePath = String(getSetting?.('sse_path') ?? '').trim()
+  if (ssePath && !ssePath.includes('/prc/')) {
+    return ssePath.startsWith('/') ? ssePath : `/${ssePath}`
+  }
+
+  const legacyPath = String(getSetting?.('wss_path') ?? '').trim()
+  if (legacyPath && !legacyPath.includes('/prc/')) {
+    return legacyPath.startsWith('/') ? legacyPath : `/${legacyPath}`
+  }
+
+  return '/api/price/stream'
+}
+
+function resolveStreamUrl(): string | null {
+  if (!getSetting) {
+    return null
+  }
+
+  if (!isTruthySetting(getSetting('wss_enabled'), true)) {
+    return null
+  }
+
+  const base = String(getConfigApp('node_server') || window.location.origin).replace(/\/$/, '')
+  return `${base}${resolveStreamPath()}`
+}
+
+function clearReconnectTimer() {
+  if (reconnectTimer) {
+    clearTimeout(reconnectTimer)
+    reconnectTimer = undefined
+  }
+}
+
+function stopStaleCheck() {
+  if (staleCheckTimer) {
+    clearInterval(staleCheckTimer)
+    staleCheckTimer = undefined
+  }
+}
+
+function touchStreamActivity() {
+  lastStreamEventAt = Date.now()
+}
+
+function startStaleCheck() {
+  stopStaleCheck()
+  touchStreamActivity()
+  staleCheckTimer = setInterval(() => {
+    if (
+      stopped
+      || subscribers <= 0
+      || !eventSource
+      || eventSource.readyState !== EventSource.OPEN
+    ) {
+      return
+    }
+
+    if (Date.now() - lastStreamEventAt > STALE_STREAM_MS) {
+      console.warn('Price SSE stale — reconnecting')
+      handleStreamLost(true)
+    }
+  }, 15000)
+}
+
+function clearFallbackPollTimer() {
+  if (fallbackPollTimer) {
+    clearTimeout(fallbackPollTimer)
+    fallbackPollTimer = undefined
+  }
+}
+
+function stopFallbackPolling() {
+  clearFallbackPollTimer()
+  if (fallbackPollInterval) {
+    clearInterval(fallbackPollInterval)
+    fallbackPollInterval = undefined
+  }
+}
+
+function startFallbackPolling() {
+  if (fallbackPollInterval) {
+    return
+  }
+
+  scheduleFallbackPoll()
+  fallbackPollInterval = setInterval(() => {
+    if (stopped || subscribers <= 0 || priceSocketConnected.value) {
+      stopFallbackPolling()
+      return
+    }
+
+    void runFallbackPoll()
+  }, FALLBACK_POLL_INTERVAL_MS)
+}
+
+function scheduleFallbackPoll() {
+  clearFallbackPollTimer()
+  fallbackPollTimer = setTimeout(() => {
+    fallbackPollTimer = undefined
+    if (!stopped && subscribers > 0 && !priceSocketConnected.value) {
+      void runFallbackPoll()
+    }
+  }, FALLBACK_POLL_DELAY_MS)
+}
+
+async function runFallbackPoll() {
+  if (!priceWssEnabled.value || priceSocketConnected.value) {
+    return
+  }
+
+  try {
+    const { getLastPrices, hasRecentPriceFromSource, markPriceSourceFetchFailed } = await import(
+      '@/utils/price'
+    )
+    const { refreshProductsPageData } = await import(
+      '@/views/base/products/composables/useProductsPageData'
+    )
+
+    const [lastResult] = await Promise.allSettled([
+      getLastPrices(),
+      refreshProductsPageData(),
+    ])
+
+    const priceOk =
+      lastResult.status === 'fulfilled'
+      && lastResult.value === true
+      && hasRecentPriceFromSource(getPriceSourceStaleMs())
+
+    if (!priceOk) {
+      markPriceSourceFetchFailed()
+    }
+
+    void maybeShowNetworkAlert()
+  } catch (error) {
+    console.warn('Price fallback poll failed', error)
+    const { markPriceSourceFetchFailed } = await import('@/utils/price')
+    markPriceSourceFetchFailed()
+    void maybeShowNetworkAlert()
+  }
+}
+
+function getPriceSourceStaleMs(): number {
+  return isMobileDevice() ? PRICE_SOURCE_STALE_MS_MOBILE : PRICE_SOURCE_STALE_MS_DESKTOP
+}
+
+async function isRealPriceOutage(): Promise<boolean> {
+  const {
+    hasRecentPriceFromSource,
+    consecutivePriceSourceFailures,
+  } = await import('@/utils/price')
+
+  const staleMs = getPriceSourceStaleMs()
+
+  if (hasRecentPriceFromSource(staleMs)) {
+    pendingPriceAlert = false
+    return false
+  }
+
+  const fetchFailures = consecutivePriceSourceFailures()
+
+  if (fetchFailures >= 2) {
+    return true
+  }
+
+  if (!priceSocketConnected.value && fetchFailures >= 1 && reconnectAttempt >= 2) {
+    return true
+  }
+
+  if (!isMobileDevice() && !navigator.onLine && fetchFailures >= 1) {
+    return true
+  }
+
+  if (!isMobileDevice() && reconnectAttempt >= FAILURES_BEFORE_ALERT) {
+    return true
+  }
+
+  return false
+}
+
+function showNetworkAlert() {
+  if (networkAlertOpen || stopped || !priceWssEnabled.value) {
+    return
+  }
+
+  if (!isPageVisible()) {
+    pendingPriceAlert = true
+    return
+  }
+
+  const now = Date.now()
+  if (now - lastNetworkAlertAt < ALERT_COOLDOWN_MS) {
+    return
+  }
+
+  lastNetworkAlertAt = now
+  pendingPriceAlert = false
+  networkAlertOpen = true
+  Modal.confirm({
+    title: 'اتصال قیمت برقرار نیست',
+    content:
+      'به‌روزرسانی لحظه‌ای قیمت قطع شده است. اتصال اینترنت را بررسی کنید یا دوباره تلاش کنید. تا زمان اتصال مجدد، قیمت با تأخیر به‌روز می‌شود.',
+    okText: 'تلاش مجدد',
+    cancelText: 'بستن',
+    centered: true,
+    onOk: () => {
+      networkAlertOpen = false
+      reconnectAttempt = 0
+      forceReconnect()
+    },
+    onCancel: () => {
+      networkAlertOpen = false
+    },
+  })
+}
+
+async function maybeShowNetworkAlert() {
+  if (!(await isRealPriceOutage())) {
+    return
+  }
+
+  showNetworkAlert()
+}
+
+function scheduleReconnect() {
+  if (stopped || subscribers <= 0) {
+    return
+  }
+
+  clearReconnectTimer()
+  const delay = Math.min(
+    RECONNECT_BASE_MS * Math.pow(2, reconnectAttempt),
+    RECONNECT_MAX_MS,
+  )
+
+  reconnectTimer = setTimeout(() => {
+    reconnectAttempt += 1
+    connect()
+    maybeShowNetworkAlert()
+  }, delay)
+}
+
+async function applyLastFromStream(last: Price) {
+  const { applyLastPricePayload } = await import('@/utils/price')
+  applyLastPricePayload(last)
+}
+
+function handleLastPayload(payload: unknown) {
+  if (!payload || typeof payload !== 'object') {
+    return
+  }
+
+  const last = payload as Price
+  if (last.price_last == null && last.price == null && last.buy == null) {
+    return
+  }
+
+  touchStreamActivity()
+  void applyLastFromStream(last)
+}
+
+function handleListPayload(payload: unknown) {
+  if (!Array.isArray(payload) || !payload.length) {
+    return
+  }
+
+  touchStreamActivity()
+  applyProductsListFromStream(payload as Product[])
+}
+
+function bindStreamEvents(source: EventSource) {
+  source.addEventListener('last', (event) => {
+    try {
+      handleLastPayload(JSON.parse(event.data))
+    } catch (error) {
+      console.warn('Price SSE last parse failed', error)
+    }
+  })
+
+  source.addEventListener('list', (event) => {
+    try {
+      handleListPayload(JSON.parse(event.data))
+    } catch (error) {
+      console.warn('Price SSE list parse failed', error)
+    }
+  })
+
+  source.addEventListener('ping', () => {
+    touchStreamActivity()
+  })
+
+  source.onmessage = () => {
+    touchStreamActivity()
+  }
+}
+
+function handleStreamLost(scheduleRetry = true) {
+  const wasConnected = priceSocketConnected.value
+  disconnectSourceOnly()
+  priceSocketConnected.value = false
+  priceStreamLifecycle.value = scheduleRetry ? 'connecting' : 'closed'
+
+  if ((wasConnected || scheduleRetry) && scheduleRetry) {
+    startFallbackPolling()
+  }
+
+  if (scheduleRetry && !stopped && subscribers > 0) {
+    scheduleReconnect()
+  }
+}
+
+function disconnectSourceOnly() {
+  stopStaleCheck()
+  if (eventSource) {
+    eventSource.onopen = null
+    eventSource.onerror = null
+    eventSource.onmessage = null
+    eventSource.close()
+    eventSource = null
+  }
+}
+
+function connect() {
+  if (stopped || subscribers <= 0) {
+    return
+  }
+
+  const url = resolveStreamUrl()
+  if (!url) {
+    priceSocketConnected.value = false
+    priceStreamLifecycle.value = 'closed'
+    clearConnectingLifecycle()
+    return
+  }
+
+  if (eventSource) {
+    const state = eventSource.readyState
+    if (state === EventSource.OPEN || state === EventSource.CONNECTING) {
+      return
+    }
+    disconnectSourceOnly()
+  }
+
+  markConnectingLifecycle()
+
+  try {
+    eventSource = new EventSource(url)
+  } catch (error) {
+    console.warn('Price SSE connect failed', error)
+    handleStreamLost()
+    return
+  }
+
+  bindStreamEvents(eventSource)
+
+  eventSource.onopen = () => {
+    reconnectAttempt = 0
+    clearReconnectTimer()
+    stopFallbackPolling()
+    networkAlertOpen = false
+    priceStreamLifecycle.value = 'open'
+    clearConnectingLifecycle()
+    priceSocketConnected.value = true
+    touchStreamActivity()
+    startStaleCheck()
+  }
+
+  eventSource.onerror = () => {
+    const state = eventSource?.readyState
+    if (state === EventSource.OPEN || state === EventSource.CONNECTING) {
+      return
+    }
+
+    handleStreamLost()
+  }
+}
+
+function disconnect() {
+  clearReconnectTimer()
+  stopFallbackPolling()
+  disconnectSourceOnly()
+  priceSocketConnected.value = false
+  priceStreamLifecycle.value = 'idle'
+  clearConnectingLifecycle()
+}
+
+export function forceReconnect() {
+  if (stopped || subscribers <= 0) {
+    return
+  }
+
+  clearReconnectTimer()
+  disconnect()
+  connect()
+}
+
+function onBrowserOnline() {
+  if (stopped || subscribers <= 0) {
+    return
+  }
+
+  reconnectAttempt = 0
+  networkAlertOpen = false
+  forceReconnect()
+}
+
+function onBrowserOffline() {
+  handleStreamLost(true)
+  void maybeShowNetworkAlert()
+}
+
+function bindBrowserNetworkListeners() {
+  if (listenersBound || typeof window === 'undefined') {
+    return
+  }
+
+  listenersBound = true
+  window.addEventListener('online', onBrowserOnline)
+  window.addEventListener('offline', onBrowserOffline)
+}
+
+function unbindBrowserNetworkListeners() {
+  if (!listenersBound || typeof window === 'undefined') {
+    return
+  }
+
+  listenersBound = false
+  window.removeEventListener('online', onBrowserOnline)
+  window.removeEventListener('offline', onBrowserOffline)
+}
+
+export function startPriceSocket(settingGetter: (key: string) => unknown) {
+  getSetting = settingGetter
+  subscribers += 1
+  stopped = false
+  connect()
+  bindBrowserNetworkListeners()
+
+  if (typeof document !== 'undefined') {
+    document.addEventListener('visibilitychange', onVisibilityChange)
+  }
+
+  if (typeof window !== 'undefined') {
+    window.addEventListener('pageshow', onPageShow)
+  }
+}
+
+export function stopPriceSocket() {
+  subscribers = Math.max(0, subscribers - 1)
+  if (subscribers > 0) {
+    return
+  }
+
+  stopped = true
+  disconnect()
+  unbindBrowserNetworkListeners()
+
+  if (typeof document !== 'undefined') {
+    document.removeEventListener('visibilitychange', onVisibilityChange)
+  }
+
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('pageshow', onPageShow)
+  }
+}
+
+function onVisibilityChange() {
+  if (stopped || subscribers <= 0) {
+    return
+  }
+
+  if (document.visibilityState === 'hidden') {
+    reconnectAttempt = 0
+    return
+  }
+
+  reconnectAttempt = 0
+  networkAlertOpen = false
+
+  if (pendingPriceAlert) {
+    void maybeShowNetworkAlert()
+  }
+
+  if (!eventSource || eventSource.readyState !== EventSource.OPEN) {
+    forceReconnect()
+  }
+}
+
+function onPageShow(event: PageTransitionEvent) {
+  if (stopped || subscribers <= 0) {
+    return
+  }
+
+  if (event.persisted || !eventSource || eventSource.readyState !== EventSource.OPEN) {
+    reconnectAttempt = 0
+    networkAlertOpen = false
+    forceReconnect()
+    if (pendingPriceAlert) {
+      void maybeShowNetworkAlert()
+    }
+  }
+}
+
+export function isPriceWebSocketEnabled(settingGetter: (key: string) => unknown): boolean {
+  getSetting = settingGetter
+  if (!isTruthySetting(settingGetter('wss_enabled'), true)) {
+    return false
+  }
+
+  return resolveStreamUrl() !== null
+}
+
+let channelStarted = false
+
+function shutdownPriceRealtimeChannel() {
+  if (!channelStarted && subscribers <= 0) {
+    return
+  }
+
+  channelStarted = false
+  stopped = true
+  subscribers = 0
+  disconnect()
+  unbindBrowserNetworkListeners()
+
+  if (typeof document !== 'undefined') {
+    document.removeEventListener('visibilitychange', onVisibilityChange)
+  }
+
+  if (typeof window !== 'undefined') {
+    window.removeEventListener('pageshow', onPageShow)
+  }
+}
+
+export function initPriceRealtimeChannel(settingGetter: (key: string) => unknown) {
+  getSetting = settingGetter
+  priceWssEnabled.value = isTruthySetting(settingGetter('wss_enabled'), true)
+
+  if (!priceWssEnabled.value || !isPriceWebSocketEnabled(settingGetter)) {
+    shutdownPriceRealtimeChannel()
+    return
+  }
+
+  if (channelStarted && subscribers > 0) {
+    forceReconnect()
+    return
+  }
+
+  channelStarted = true
+  stopped = false
+  startPriceSocket(settingGetter)
+}

src/utils/priceSocketState.ts

@@ -0,0 +1,33 @@
+import { ref } from 'vue'
+
+export const priceSocketConnected = ref(false)
+export const priceWssEnabled = ref(false)
+
+export type PriceStreamLifecycle = 'idle' | 'connecting' | 'open' | 'closed'
+
+export const priceStreamLifecycle = ref<PriceStreamLifecycle>('idle')
+
+export const priceStreamConnectingSince = ref(0)
+
+const CONNECTING_POLL_AFTER_MS = 8000
+
+export function shouldUsePricePolling(): boolean {
+  if (!priceWssEnabled.value) {
+    return true
+  }
+
+  if (priceStreamLifecycle.value === 'open') {
+    return false
+  }
+
+  if (priceStreamLifecycle.value === 'connecting') {
+    const since = priceStreamConnectingSince.value
+    if (since > 0 && Date.now() - since >= CONNECTING_POLL_AFTER_MS) {
+      return true
+    }
+
+    return false
+  }
+
+  return true
+}