ui: update ProductPerformanceProfitability page to enhance table views and tabs management

2026-07-03 00:01:42 +03:00
parent d419f52e3c
commit c536b85a4c
9 changed files with 1716 additions and 199 deletions
@@ -1222,49 +1222,58 @@ async function reloadData ({ page = 1 } = {}) {
 }

 async function loadImagesForRows (list) {
-  const targets = []
+  const items = []
+  const rowByKey = new Map()
  const seen = new Set()
  for (const row of list) {
    const key = `${row.productCode}|${row.dim1 || 0}|${row.dim3 || 0}`
    if (!row.productCode || seen.has(key)) continue
    seen.add(key)
-    targets.push({ row, key })
-  }
-  const concurrency = 12
-  let cursor = 0
-  let loaded = 0
-  const workers = Array.from({ length: Math.min(concurrency, targets.length) }, async () => {
-    for (;;) {
-      const target = targets[cursor]
-      cursor += 1
-      if (!target) return
-      const { row, key } = target
    if (imageCache.has(key)) {
      row.imageUrl = imageCache.get(key)
      continue
    }
+    rowByKey.set(key, row)
+    items.push({
+      key,
+      code: row.productCode,
+      dim1: row.dim1 || '',
+      dim3: row.dim3 || ''
+    })
+  }
+  if (!items.length) {
+    rows.value = [...rows.value]
+    return
+  }
+
+  const chunks = []
+  for (let i = 0; i < items.length; i += 250) chunks.push(items.slice(i, i + 250))
+  for (const chunk of chunks) {
    try {
-      const res = await api.get('/product-images', {
-        params: {
-          code: row.productCode,
-          dim1_id: row.dim1 || '',
-          dim3_id: row.dim3 || ''
-        },
-        timeout: 15000
-      })
-      const first = Array.isArray(res?.data) ? res.data[0] : null
-      const url = resolveProductImageUrl(first)
-      imageCache.set(key, url)
-      row.imageUrl = url
-      imageListCache.set(key, Array.isArray(res?.data) ? res.data : [])
+      const res = await api.post('/product-images/batch', { items: chunk }, { timeout: 30000 })
+      const returned = new Set()
+      for (const item of Array.isArray(res?.data) ? res.data : []) {
+        const key = toText(item?.key)
+        if (!key) continue
+        returned.add(key)
+        const list = Array.isArray(item.images) ? item.images : []
+        const url = resolveProductImageUrl(list[0])
+        imageCache.set(key, url)
+        imageListCache.set(key, list)
+        const row = rowByKey.get(key)
+        if (row) row.imageUrl = url
+      }
+      for (const item of chunk) {
+        if (!returned.has(item.key)) {
+          imageCache.set(item.key, '')
+          imageListCache.set(item.key, [])
+        }
+      }
    } catch {
-      imageCache.set(key, '')
+      for (const item of chunk) imageCache.set(item.key, '')
    }
-      loaded += 1
-      if (loaded % 12 === 0) rows.value = [...rows.value]
-    }
-  })
-  await Promise.all(workers)
+    rows.value = [...rows.value]
+  }
  rows.value = [...rows.value]
 }

@@ -76,7 +76,7 @@
      flat
      bordered
      row-key="row_key"
-      class="performance-table bg-white"
+      class="performance-table sticky-dim-table sticky-dim-7 bg-white"
      :rows="filteredGeneralRows"
      :columns="generalColumns"
      :loading="loading"
@@ -155,12 +155,13 @@
      <template #body-cell-image="props">
        <q-td :props="props" class="product-image-cell">
          <button type="button" class="product-thumb-button" @click.stop="openProductImageDialog(props.row)">
-            <q-img
+            <img
              v-if="getCachedProductImageUrl(props.row)"
              :src="getCachedProductImageUrl(props.row)"
-              fit="contain"
              class="product-thumb"
-              no-spinner
+              loading="lazy"
+              decoding="async"
+              alt=""
            />
            <div v-else class="product-thumb-placeholder">
              <q-icon name="image" size="22px" />
@@ -183,10 +184,10 @@
      flat
      bordered
      row-key="row_key"
-      class="performance-table bg-white"
-      :rows="filteredOrderProductCustomerRows"
+      class="performance-table sticky-dim-table sticky-dim-10 bg-white"
+      :rows="displayOrderProductCustomerTableRows"
      :columns="orderProductCustomerColumns"
-      :loading="loading"
+      :loading="loading || backendGroupedLoading"
      :pagination="{ rowsPerPage: 100, sortBy: 'order_usd', descending: true }"
    >
      <template #header-cell="props">
@@ -262,12 +263,13 @@
      <template #body-cell-image="props">
        <q-td :props="props" class="product-image-cell">
          <button type="button" class="product-thumb-button" @click.stop="openProductImageDialog(props.row)">
-            <q-img
+            <img
              v-if="getCachedProductImageUrl(props.row)"
              :src="getCachedProductImageUrl(props.row)"
-              fit="contain"
              class="product-thumb"
-              no-spinner
+              loading="lazy"
+              decoding="async"
+              alt=""
            />
            <div v-else class="product-thumb-placeholder">
              <q-icon name="image" size="22px" />
@@ -293,6 +295,72 @@
          {{ formatMoney(props.row.expected_profit_cost_usd, 'USD') }}
        </q-td>
      </template>
+      <template #body="props">
+        <q-tr
+          v-if="props.row.__group"
+          :props="props"
+          :class="['group-row', `group-row-level-${Math.min(Number(props.row.level || 0), 5)}`]"
+        >
+          <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
+            <template v-if="col.name === 'image' && groupShowsImage(props.row)">
+              <button type="button" class="product-thumb-button" @click.stop="openProductImageDialog(props.row)">
+                <img
+                  v-if="getCachedProductImageUrl(props.row)"
+                  :src="getCachedProductImageUrl(props.row)"
+                  class="product-thumb"
+                  loading="lazy"
+                  decoding="async"
+                  alt=""
+                />
+                <div v-else class="product-thumb-placeholder">
+                  <q-icon name="image" size="22px" />
+                </div>
+                <q-tooltip>Foto</q-tooltip>
+              </button>
+            </template>
+            <div
+              v-else-if="col.name === groupLabelColumnName(props.row)"
+              class="group-cell-label"
+              :style="{ paddingLeft: `${props.row.level * 18}px` }"
+            >
+              <q-btn
+                flat
+                dense
+                round
+                size="sm"
+                :icon="isGroupExpanded(props.row.key) ? 'expand_more' : 'chevron_right'"
+                @click.stop="toggleGroup(props.row.key)"
+              />
+              <span class="group-title">{{ props.row.label }}</span>
+            </div>
+            <span v-else>{{ formatGroupCell(props.row, col) }}</span>
+          </q-td>
+        </q-tr>
+        <q-tr v-else :props="props" class="cursor-pointer" @click="openPerformanceDialog(props.row)">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
+            <template v-if="col.name === 'image'">
+              <button type="button" class="product-thumb-button" @click.stop="openProductImageDialog(props.row)">
+                <img
+                  v-if="getCachedProductImageUrl(props.row)"
+                  :src="getCachedProductImageUrl(props.row)"
+                  class="product-thumb"
+                  loading="lazy"
+                  decoding="async"
+                  alt=""
+                />
+                <div v-else class="product-thumb-placeholder">
+                  <q-icon name="image" size="22px" />
+                </div>
+                <q-tooltip>Foto</q-tooltip>
+              </button>
+            </template>
+            <q-badge v-else-if="col.name === 'performance_bucket'" :color="bucketColor(props.row.performance_bucket)">
+              {{ bucketLabel(props.row.performance_bucket) }}
+            </q-badge>
+            <span v-else>{{ formatTableCell(props.row, col) }}</span>
+          </q-td>
+        </q-tr>
+      </template>
    </q-table>

    <q-table
@@ -300,10 +368,10 @@
      flat
      bordered
      row-key="row_key"
-      class="performance-table bg-white"
-      :rows="filteredOrderMarketDetailRows"
+      class="performance-table sticky-dim-table sticky-dim-10 bg-white"
+      :rows="displayOrderMarketDetailTableRows"
      :columns="orderMarketDetailColumns"
-      :loading="loading"
+      :loading="loading || backendGroupedLoading"
      :pagination="{ rowsPerPage: 100, sortBy: 'order_date', descending: true }"
    >
      <template #header-cell="props">
@@ -393,6 +461,40 @@
          {{ formatMoney(props.row.expected_profit_cost_usd, 'USD') }}
        </q-td>
      </template>
+      <template #body="props">
+        <q-tr
+          v-if="props.row.__group"
+          :props="props"
+          :class="['group-row', `group-row-level-${Math.min(Number(props.row.level || 0), 5)}`]"
+        >
+          <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
+            <div
+              v-if="col.name === groupLabelColumnName(props.row)"
+              class="group-cell-label"
+              :style="{ paddingLeft: `${props.row.level * 18}px` }"
+            >
+              <q-btn
+                flat
+                dense
+                round
+                size="sm"
+                :icon="isGroupExpanded(props.row.key) ? 'expand_more' : 'chevron_right'"
+                @click.stop="toggleGroup(props.row.key)"
+              />
+              <span class="group-title">{{ props.row.label }}</span>
+            </div>
+            <span v-else>{{ formatGroupCell(props.row, col) }}</span>
+          </q-td>
+        </q-tr>
+        <q-tr v-else :props="props" class="cursor-pointer" @click="openPerformanceDialog(props.row)">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
+            <q-badge v-if="col.name === 'performance_bucket'" :color="bucketColor(props.row.performance_bucket)">
+              {{ bucketLabel(props.row.performance_bucket) }}
+            </q-badge>
+            <span v-else>{{ formatTableCell(props.row, col) }}</span>
+          </q-td>
+        </q-tr>
+      </template>
    </q-table>

    <q-table
@@ -401,9 +503,9 @@
      bordered
      row-key="row_key"
      class="performance-table product-breakdown-table bg-white"
-      :rows="productTableRows"
+      :rows="displayProductTableRows"
      :columns="productColumns"
-      :loading="loading"
+      :loading="loading || backendGroupedLoading"
      :pagination="pagination"
      @request="onRequest"
    >
@@ -487,12 +589,13 @@
          <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
            <template v-if="col.name === 'image' && groupShowsImage(props.row)">
              <button type="button" class="product-thumb-button" @click.stop="openProductImageDialog(props.row)">
-                <q-img
+                <img
                  v-if="getCachedProductImageUrl(props.row)"
                  :src="getCachedProductImageUrl(props.row)"
-                  fit="contain"
                  class="product-thumb"
-                  no-spinner
+                  loading="lazy"
+                  decoding="async"
+                  alt=""
                />
                <div v-else class="product-thumb-placeholder">
                  <q-icon name="image" size="22px" />
@@ -522,12 +625,13 @@
          <q-td v-for="col in props.cols" :key="col.name" :props="props">
            <template v-if="col.name === 'image'">
              <button type="button" class="product-thumb-button" @click.stop="openProductImageDialog(props.row)">
-                <q-img
+                <img
                  v-if="getCachedProductImageUrl(props.row)"
                  :src="getCachedProductImageUrl(props.row)"
-                  fit="contain"
                  class="product-thumb"
-                  no-spinner
+                  loading="lazy"
+                  decoding="async"
+                  alt=""
                />
                <div v-else class="product-thumb-placeholder">
                  <q-icon name="image" size="22px" />
@@ -549,10 +653,10 @@
      flat
      bordered
      row-key="row_key"
-      class="performance-table bg-white"
-      :rows="filteredIdleRows"
+      class="performance-table sticky-dim-table sticky-dim-6 bg-white"
+      :rows="displayIdleTableRows"
      :columns="idleColumns"
-      :loading="loading"
+      :loading="loading || backendGroupedLoading"
      :pagination="{ rowsPerPage: 100 }"
    >
      <template #header-cell="props">
@@ -628,12 +732,13 @@
      <template #body-cell-image="props">
        <q-td :props="props" class="product-image-cell">
          <button type="button" class="product-thumb-button" @click.stop="openProductImageDialog(props.row)">
-            <q-img
+            <img
              v-if="getCachedProductImageUrl(props.row)"
              :src="getCachedProductImageUrl(props.row)"
-              fit="contain"
              class="product-thumb"
-              no-spinner
+              loading="lazy"
+              decoding="async"
+              alt=""
            />
            <div v-else class="product-thumb-placeholder">
              <q-icon name="image" size="22px" />
@@ -655,6 +760,72 @@
          </q-badge>
        </q-td>
      </template>
+      <template #body="props">
+        <q-tr
+          v-if="props.row.__group"
+          :props="props"
+          :class="['group-row', `group-row-level-${Math.min(Number(props.row.level || 0), 5)}`]"
+        >
+          <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
+            <template v-if="col.name === 'image' && groupShowsImage(props.row)">
+              <button type="button" class="product-thumb-button" @click.stop="openProductImageDialog(props.row)">
+                <img
+                  v-if="getCachedProductImageUrl(props.row)"
+                  :src="getCachedProductImageUrl(props.row)"
+                  class="product-thumb"
+                  loading="lazy"
+                  decoding="async"
+                  alt=""
+                />
+                <div v-else class="product-thumb-placeholder">
+                  <q-icon name="image" size="22px" />
+                </div>
+                <q-tooltip>Foto</q-tooltip>
+              </button>
+            </template>
+            <div
+              v-else-if="col.name === groupLabelColumnName(props.row)"
+              class="group-cell-label"
+              :style="{ paddingLeft: `${props.row.level * 18}px` }"
+            >
+              <q-btn
+                flat
+                dense
+                round
+                size="sm"
+                :icon="isGroupExpanded(props.row.key) ? 'expand_more' : 'chevron_right'"
+                @click.stop="toggleGroup(props.row.key)"
+              />
+              <span class="group-title">{{ props.row.label }}</span>
+            </div>
+            <span v-else>{{ formatGroupCell(props.row, col) }}</span>
+          </q-td>
+        </q-tr>
+        <q-tr v-else :props="props" class="cursor-pointer" @click="openPerformanceDialog(props.row)">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
+            <template v-if="col.name === 'image'">
+              <button type="button" class="product-thumb-button" @click.stop="openProductImageDialog(props.row)">
+                <img
+                  v-if="getCachedProductImageUrl(props.row)"
+                  :src="getCachedProductImageUrl(props.row)"
+                  class="product-thumb"
+                  loading="lazy"
+                  decoding="async"
+                  alt=""
+                />
+                <div v-else class="product-thumb-placeholder">
+                  <q-icon name="image" size="22px" />
+                </div>
+                <q-tooltip>Foto</q-tooltip>
+              </button>
+            </template>
+            <q-badge v-else-if="col.name === 'performance_bucket'" :color="bucketColor(props.row.performance_bucket)">
+              {{ bucketLabel(props.row.performance_bucket) }}
+            </q-badge>
+            <span v-else>{{ formatTableCell(props.row, col) }}</span>
+          </q-td>
+        </q-tr>
+      </template>
    </q-table>

    <q-table
@@ -662,7 +833,7 @@
      flat
      bordered
      row-key="market_key"
-      class="performance-table bg-white"
+      class="performance-table sticky-dim-table sticky-dim-9 bg-white"
      :rows="filteredMarketRows"
      :columns="marketColumns"
      :loading="loading"
@@ -760,10 +931,10 @@
      flat
      bordered
      row-key="row_key"
-      class="performance-table bg-white"
-      :rows="filteredActiveSalesBreakdownRows"
+      class="performance-table sticky-dim-table sticky-dim-9 bg-white"
+      :rows="displayActiveSalesBreakdownTableRows"
      :columns="visibleSalesBreakdownColumns"
-      :loading="loading"
+      :loading="loading || backendGroupedLoading"
      :pagination="{ rowsPerPage: 100, sortBy: 'performance_score', descending: true }"
    >
      <template #header-cell="props">
@@ -858,6 +1029,40 @@
          </q-badge>
        </q-td>
      </template>
+      <template #body="props">
+        <q-tr
+          v-if="props.row.__group"
+          :props="props"
+          :class="['group-row', `group-row-level-${Math.min(Number(props.row.level || 0), 5)}`]"
+        >
+          <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
+            <div
+              v-if="col.name === groupLabelColumnName(props.row)"
+              class="group-cell-label"
+              :style="{ paddingLeft: `${props.row.level * 18}px` }"
+            >
+              <q-btn
+                flat
+                dense
+                round
+                size="sm"
+                :icon="isGroupExpanded(props.row.key) ? 'expand_more' : 'chevron_right'"
+                @click.stop="toggleGroup(props.row.key)"
+              />
+              <span class="group-title">{{ props.row.label }}</span>
+            </div>
+            <span v-else>{{ formatGroupCell(props.row, col) }}</span>
+          </q-td>
+        </q-tr>
+        <q-tr v-else :props="props" class="cursor-pointer" @click="openPerformanceDialog(props.row)">
+          <q-td v-for="col in props.cols" :key="col.name" :props="props" :class="groupCellClass(col.name)">
+            <q-badge v-if="col.name === 'performance_bucket'" :color="bucketColor(props.row.performance_bucket)">
+              {{ bucketLabel(props.row.performance_bucket) }}
+            </q-badge>
+            <span v-else>{{ formatTableCell(props.row, col) }}</span>
+          </q-td>
+        </q-tr>
+      </template>
    </q-table>

    <div v-else-if="activeTab === 'customers'">
@@ -881,7 +1086,7 @@
        flat
        bordered
        row-key="customer_key"
-        class="performance-table bg-white"
+        class="performance-table sticky-dim-table sticky-dim-5 bg-white"
        :rows="filteredCustomerRows"
        :columns="customerColumns"
        :loading="loading"
@@ -980,7 +1185,7 @@
      flat
      bordered
      row-key="country_key"
-      class="performance-table bg-white"
+      class="performance-table sticky-dim-table sticky-dim-3 bg-white"
      :rows="filteredCountryRows"
      :columns="countryColumns"
      :loading="loading"
@@ -1080,28 +1285,78 @@
        </q-card-section>
        <q-separator />
        <q-card-section class="product-image-dialog-body">
-          <q-carousel
-            v-if="imageDialogUrls.length"
-            v-model="imageSlide"
-            animated
-            arrows
-            navigation
-            infinite
-            swipeable
-            class="product-image-carousel"
-          >
-            <q-carousel-slide
-              v-for="(url, idx) in imageDialogUrls"
-              :key="`${url}-${idx}`"
-              :name="idx"
-              class="column no-wrap flex-center"
-            >
-              <q-img :src="url" fit="contain" class="product-image-large" />
-            </q-carousel-slide>
-          </q-carousel>
-          <div v-else class="product-image-empty">
-            <q-icon name="image_not_supported" size="48px" />
-            <div class="text-subtitle2 q-mt-sm">Foto bulunamadi</div>
+          <div class="performance-image-layout">
+            <aside class="image-product-fields">
+              <div class="image-section-title">Ürün Bilgileri</div>
+              <div v-for="item in imageDialogInfoRows" :key="item.key" class="image-field-row">
+                <span class="k">{{ item.label }}</span>
+                <span class="v">{{ item.value }}</span>
+              </div>
+
+              <div class="image-product-section">
+                <div class="image-section-title">Beden Stokları</div>
+                <q-inner-loading :showing="detailLoading">
+                  <q-spinner size="24px" color="primary" />
+                </q-inner-loading>
+                <div v-if="detailStockSizes.length" class="image-size-stock-grid">
+                  <div v-for="item in detailStockSizes" :key="item.size_code" class="image-size-stock-cell">
+                    <span class="image-size-label">{{ item.size_code || '-' }}</span>
+                    <span class="image-size-qty">{{ formatNumber(item.stock_qty, 0) }}</span>
+                  </div>
+                </div>
+                <div v-else-if="!detailLoading" class="image-empty-text">Beden stoku bulunamadi</div>
+              </div>
+            </aside>
+
+            <section class="image-media-panel">
+              <q-carousel
+                v-if="imageDialogUrls.length"
+                v-model="imageSlide"
+                animated
+                arrows
+                navigation
+                infinite
+                swipeable
+                class="product-image-carousel"
+              >
+                <q-carousel-slide
+                  v-for="(url, idx) in imageDialogUrls"
+                  :key="`${url}-${idx}`"
+                  :name="idx"
+                  class="column no-wrap flex-center"
+                >
+                  <q-img :src="url" fit="contain" class="product-image-large" />
+                </q-carousel-slide>
+              </q-carousel>
+              <div v-else class="product-image-empty">
+                <q-icon name="image_not_supported" size="48px" />
+                <div class="text-subtitle2 q-mt-sm">Foto bulunamadi</div>
+              </div>
+            </section>
+
+            <section class="image-sales-panel">
+              <div class="row q-col-gutter-xs q-mb-sm">
+                <div v-for="card in imageDialogPerformanceCards" :key="card.key" class="col-6 col-md-3 col-lg-4">
+                  <q-card flat bordered class="metric-card image-metric-card">
+                    <q-card-section>
+                      <div class="text-caption text-grey-7">{{ card.label }}</div>
+                      <div class="metric-value">{{ card.value }}</div>
+                    </q-card-section>
+                  </q-card>
+                </div>
+              </div>
+              <q-table
+                flat
+                bordered
+                dense
+                title="Satış / Müşteri Özeti"
+                row-key="detail_key"
+                :rows="detailSalesRows"
+                :columns="detailSalesColumns"
+                :loading="detailLoading"
+                :pagination="{ rowsPerPage: 50 }"
+              />
+            </section>
          </div>
        </q-card-section>
      </q-card>
@@ -1201,6 +1456,7 @@ const imageDialogUrls = ref([])
 const imageDialogTitle = ref('')
 const imageDialogSubtitle = ref('')
 const imageSlide = ref(0)
+const imageDialogRow = ref(null)
 const performanceDialog = ref(false)
 const performanceDialogRow = ref(null)
 const performanceDialogTitle = ref('')
@@ -1208,6 +1464,9 @@ const performanceDialogSubtitle = ref('')
 const detailLoading = ref(false)
 const detailSalesRows = ref([])
 const detailStockSizes = ref([])
+const backendGroupedRows = ref({})
+const backendGroupedLoading = ref(false)
+let backendGroupedTimer = null

 const columnFilters = reactive({})
 const columnFilterSearch = reactive({})
@@ -1305,6 +1564,10 @@ const columns = [
  { name: 'stock_days_90d', label: 'Stok Gün', field: row => formatNumber(row.stock_days_90d, 1), align: 'right', sortable: true },
  { name: 'stock_days_180d', label: '180G Stok Gün', field: row => formatNumber(row.stock_days_180d, 1), align: 'right', sortable: true },
  { name: 'stock_days_total', label: 'Genel Stok Gün', field: row => formatNumber(row.stock_days_total, 1), align: 'right', sortable: true },
+  { name: 'stock_turnover_90d', label: '90G Stok Devir', field: row => formatNumber(row.stock_turnover_90d, 2), align: 'right', sortable: true },
+  { name: 'stock_turnover_180d', label: '180G Stok Devir', field: row => formatNumber(row.stock_turnover_180d, 2), align: 'right', sortable: true },
+  { name: 'stock_turnover_365d', label: '360G Stok Devir', field: row => formatNumber(row.stock_turnover_365d, 2), align: 'right', sortable: true },
+  { name: 'stock_turnover_total', label: 'Genel Stok Devir', field: row => formatNumber(row.stock_turnover_total, 2), align: 'right', sortable: true },
  { name: 'avg_price_usd_90d', label: 'Ort. USD', field: row => formatMoney(row.avg_price_usd_90d, 'USD'), align: 'right' },
  { name: 'avg_price_usd_180d', label: '180G Ort. USD', field: row => formatMoney(row.avg_price_usd_180d, 'USD'), align: 'right' },
  { name: 'avg_price_usd_365d', label: '360G Ort. USD', field: row => formatMoney(row.avg_price_usd_365d, 'USD'), align: 'right' },
@@ -1523,6 +1786,7 @@ const idleColumns = [
  { name: 'idle_cost_usd', label: 'Stok Maliyeti USD', field: 'idle_cost_usd', align: 'right', sortable: true },
  { name: 'sales_qty_90d', label: '90G Satış', field: row => formatNumber(row.sales_qty_90d, 0), align: 'right', sortable: true },
  { name: 'stock_days_90d', label: 'Stok Gün', field: row => formatNumber(row.stock_days_90d, 1), align: 'right', sortable: true },
+  { name: 'stock_turnover_90d', label: '90G Stok Devir', field: row => formatNumber(row.stock_turnover_90d, 2), align: 'right', sortable: true },
  { name: 'performance_bucket', label: 'Durum', field: 'performance_bucket', align: 'left' },
  { name: 'recommendation', label: 'Öneri', field: 'recommendation', align: 'left' }
 ]
@@ -1707,23 +1971,48 @@ const visibleOrderAnalysisColumns = computed(() => {
  return orderAnalysisColumns
 })

-const performanceCards = computed(() => {
-  const row = performanceDialogRow.value || {}
+function performanceCardsForRow (row) {
+  const source = row || {}
  return [
-    { key: 'score', label: 'Skor', value: formatNumber(row.performance_score, 1) },
-    { key: 'stock', label: 'Stok', value: formatNumber(row.stock_qty, 0) },
-    { key: 'sales90', label: '90G Satış', value: formatNumber(row.sales_qty_90d, 0) },
-    { key: 'sales180', label: '180G Satış', value: formatNumber(row.sales_qty_180d, 0) },
-    { key: 'markets', label: '90G Piyasa', value: formatNumber(row.market_count_90d, 0) },
-    { key: 'customers', label: '90G Müşteri', value: formatNumber(row.customer_count_90d, 0) },
-    { key: 'avg', label: 'Ort. USD Satış', value: formatMoney(row.avg_price_usd_90d, 'USD') },
+    { key: 'score', label: 'Skor', value: formatNumber(source.performance_score, 1) },
+    { key: 'stock', label: 'Stok', value: formatNumber(source.stock_qty, 0) },
+    { key: 'sales90', label: '90G Satış', value: formatNumber(source.sales_qty_90d, 0) },
+    { key: 'sales180', label: '180G Satış', value: formatNumber(source.sales_qty_180d, 0) },
+    { key: 'markets', label: '90G Piyasa', value: formatNumber(source.market_count_90d, 0) },
+    { key: 'customers', label: '90G Müşteri', value: formatNumber(source.customer_count_90d, 0) },
+    { key: 'avg', label: 'Ort. USD Satış', value: formatMoney(source.avg_price_usd_90d, 'USD') },
+    { key: 'base', label: 'Taban Maliyet', value: formatMoney(source.base_price_usd, 'USD') },
+    { key: 'cost', label: 'Çıplak Maliyet', value: formatMoney(source.cost_price_usd, 'USD') },
+    { key: 'profitBase', label: 'P.Başı Taban K/Z', value: formatMoney(source.unit_profit_base_90d, 'USD') },
+    { key: 'profitCost', label: 'P.Başı Çıplak K/Z', value: formatMoney(source.unit_profit_cost_90d, 'USD') },
+    { key: 'marginBase', label: '90G Taban Marj', value: formatPercent(source.gross_margin_base_90d) },
+    { key: 'marginCost', label: '90G Çıplak Marj', value: formatPercent(source.gross_margin_cost_90d) },
+    { key: 'bucket', label: 'Durum', value: bucketLabel(source.performance_bucket) }
+  ]
+}
+
+const performanceCards = computed(() => performanceCardsForRow(performanceDialogRow.value))
+const imageDialogPerformanceCards = computed(() => performanceCardsForRow(imageDialogRow.value))
+
+const imageDialogInfoRows = computed(() => {
+  const row = imageDialogRow.value || {}
+  const productCode = row.image_product_code || row.product_code
+  const colorCode = row.image_color_code || row.color_code
+  const yakaCode = row.image_yaka_kodu || row.yaka_kodu
+  return [
+    { key: 'product', label: 'Ürün', value: productCode || '-' },
+    { key: 'color', label: 'Renk', value: colorCode || '-' },
+    { key: 'yaka', label: 'Yaka', value: yakaCode || '-' },
+    { key: 'desc', label: 'Açıklama', value: row.item_description || '-' },
+    { key: 'category', label: 'Kategori', value: row.kategori || '-' },
+    { key: 'hanger', label: 'Askılı/Yan', value: row.askili_yan || '-' },
+    { key: 'first', label: 'İlk Grup', value: row.urun_ilk_grubu || row.yas_grubu || '-' },
+    { key: 'main', label: 'Ana Grup', value: row.urun_ana_grubu || row.seri || '-' },
+    { key: 'sub', label: 'Alt Grup', value: row.urun_alt_grubu || '-' },
+    { key: 'market', label: 'Piyasa', value: row.market_key || '-' },
+    { key: 'stock', label: 'Toplam Stok', value: formatNumber(row.stock_qty, 0) },
    { key: 'base', label: 'Taban Maliyet', value: formatMoney(row.base_price_usd, 'USD') },
-    { key: 'cost', label: 'Çıplak Maliyet', value: formatMoney(row.cost_price_usd, 'USD') },
-    { key: 'profitBase', label: 'P.Başı Taban K/Z', value: formatMoney(row.unit_profit_base_90d, 'USD') },
-    { key: 'profitCost', label: 'P.Başı Çıplak K/Z', value: formatMoney(row.unit_profit_cost_90d, 'USD') },
-    { key: 'marginBase', label: '90G Taban Marj', value: formatPercent(row.gross_margin_base_90d) },
-    { key: 'marginCost', label: '90G Çıplak Marj', value: formatPercent(row.gross_margin_cost_90d) },
-    { key: 'bucket', label: 'Durum', value: bucketLabel(row.performance_bucket) }
+    { key: 'cost', label: 'Çıplak Maliyet', value: formatMoney(row.cost_price_usd, 'USD') }
  ]
 })

@@ -1841,6 +2130,14 @@ const filteredMarketRows = computed(() => filterRowsForTable('markets', marketRo
 const filteredCountryRows = computed(() => filterRowsForTable('countries', countryRows.value, countryColumns))
 const filteredCustomerRows = computed(() => filterRowsForTable('customers', customerRows.value, customerColumns))
 const filteredActiveSalesBreakdownRows = computed(() => filterRowsForTable(activeTab.value, salesBreakdownRows[activeTab.value] || [], visibleSalesBreakdownColumns.value))
+const activeGroupSourceRows = computed(() => {
+  if (activeTab.value === 'products') return filteredProductRows.value
+  if (activeTab.value === 'idle') return filteredIdleRows.value
+  if (activeTab.value === 'order_product_customers') return filteredOrderProductCustomerRows.value
+  if (activeTab.value === 'order_market_details') return filteredOrderMarketDetailRows.value
+  if (salesBreakdownTabKeys.includes(activeTab.value)) return filteredActiveSalesBreakdownRows.value
+  return []
+})

 const columnFilterOptionMap = computed(() => {
  const out = {}
@@ -1868,19 +2165,29 @@ const columnFilterOptionMap = computed(() => {

 const productTableRows = computed(() => {
  const out = []
-  appendGroupRows(out, filteredProductRows.value, 0, [], groupLevels)
+  appendGroupRows(out, filteredProductRows.value, 0, ['tab:products'], groupLevels)
  return out
 })

+const idleTableRows = computed(() => buildGroupedTableRows('idle', filteredIdleRows.value))
+const orderProductCustomerTableRows = computed(() => buildGroupedTableRows('order_product_customers', filteredOrderProductCustomerRows.value))
+const orderMarketDetailTableRows = computed(() => buildGroupedTableRows('order_market_details', filteredOrderMarketDetailRows.value))
+const activeSalesBreakdownTableRows = computed(() => buildGroupedTableRows(activeTab.value, filteredActiveSalesBreakdownRows.value))
+const displayProductTableRows = computed(() => backendRowsForTab('products', productTableRows.value))
+const displayIdleTableRows = computed(() => backendRowsForTab('idle', idleTableRows.value))
+const displayOrderProductCustomerTableRows = computed(() => backendRowsForTab('order_product_customers', orderProductCustomerTableRows.value))
+const displayOrderMarketDetailTableRows = computed(() => backendRowsForTab('order_market_details', orderMarketDetailTableRows.value))
+const displayActiveSalesBreakdownTableRows = computed(() => backendRowsForTab(activeTab.value, activeSalesBreakdownTableRows.value))
+
 const productGroupKeys = computed(() => {
  const keys = []
-  collectGroupKeys(keys, filteredProductRows.value, 0, [], groupLevels)
+  collectGroupKeys(keys, filteredProductRows.value, 0, ['tab:products'], groupLevels)
  return keys
 })

 const productAutoExpandKeys = computed(() => {
  const keys = []
-  collectGroupKeys(keys, filteredProductRows.value, 0, [], activeGroupLevels.value, autoExpandThroughLevel.value)
+  collectGroupKeys(keys, activeGroupSourceRows.value, 0, [`tab:${activeTab.value}`], activeGroupLevels.value, autoExpandThroughLevel.value)
  return keys
 })

@@ -1914,6 +2221,18 @@ function appendGroupRows (out, sourceRows, level, parentKeys, levels = groupLeve
    })
 }

+function buildGroupedTableRows (tableKey, sourceRows) {
+  const levels = tabGroupLevels[tableKey] || groupLevels
+  const out = []
+  appendGroupRows(out, sourceRows, 0, [`tab:${tableKey}`], levels)
+  return out
+}
+
+function backendRowsForTab (tabKey, fallbackRows) {
+  const rows = backendGroupedRows.value[tabKey]
+  return Array.isArray(rows) && rows.length ? rows : fallbackRows
+}
+
 function collectGroupKeys (out, sourceRows, level, parentKeys, levels = groupLevels, maxLevel = levels.length - 1) {
  if (level >= levels.length) return

@@ -2013,10 +2332,81 @@ function makeGroupRow (key, level, groupDef, value, groupRows) {
    sales_index_total: averageRows(groupRows, 'sales_index_total'),
    performance_score: weightedAverageOrAverage(groupRows, 'performance_score', 'sales_qty_90d'),
    performance_bucket: dominantValue(groupRows, 'performance_bucket'),
+    ...aggregateGroupFields(groupRows),
    recommendation: `${formatNumber(groupRows.length, 0)} satır`
  }
 }

+function aggregateGroupFields (sourceRows) {
+  const out = {}
+  const fields = new Set()
+  for (const row of sourceRows) {
+    Object.keys(row || {}).forEach(key => fields.add(key))
+  }
+
+  for (const field of fields) {
+    if (field === 'row_key' || field === 'key') continue
+    if (shouldSumField(field)) {
+      out[field] = sumRows(sourceRows, field)
+    } else if (shouldAverageField(field)) {
+      out[field] = weightedAverageOrAverage(sourceRows, field, weightFieldForMetric(field))
+    }
+  }
+
+  applyDerivedGroupMetrics(out, sourceRows)
+  return out
+}
+
+function shouldSumField (field) {
+  return /(_qty|_usd|_count|_value_usd|line_count|invoice_count|order_count|product_count|market_count|customer_count|overdue_qty|stock_qty|net_stock_after_order|idle_cost_usd)$/i.test(field)
+}
+
+function shouldAverageField (field) {
+  return /^(avg_|unit_|base_price|cost_price|gross_margin|expected_margin|sales_index|performance_score|stock_days|stock_turnover)/i.test(field) ||
+    /(_price_usd|_margin|_index|_days)$/i.test(field)
+}
+
+function weightFieldForMetric (field) {
+  if (field.includes('_180d')) return 'sales_qty_180d'
+  if (field.includes('_365d')) return 'sales_qty_365d'
+  if (field.includes('_total')) return 'sales_qty_total'
+  if (field.includes('order') || field.includes('expected_')) return 'order_qty'
+  if (field.includes('stock')) return 'stock_qty'
+  return 'sales_qty_90d'
+}
+
+function applyDerivedGroupMetrics (out, sourceRows) {
+  for (const suffix of ['90d', '180d', '365d', 'total']) {
+    const sales = Number(out[`sales_usd_${suffix}`] || 0)
+    const qty = Number(out[`sales_qty_${suffix}`] || 0)
+    if (qty > 0) out[`avg_price_usd_${suffix}`] = sales / qty
+    if (sales > 0) {
+      if (out[`gross_profit_base_usd_${suffix}`] !== undefined) {
+        out[`gross_margin_base_${suffix}`] = Number(out[`gross_profit_base_usd_${suffix}`] || 0) / sales
+      }
+      if (out[`gross_profit_cost_usd_${suffix}`] !== undefined) {
+        out[`gross_margin_cost_${suffix}`] = Number(out[`gross_profit_cost_usd_${suffix}`] || 0) / sales
+      }
+      if (out[`gross_profit_usd_${suffix}`] !== undefined) {
+        out[`gross_margin_${suffix}`] = Number(out[`gross_profit_usd_${suffix}`] || 0) / sales
+      }
+    }
+  }
+
+  const orderUsd = Number(out.order_usd || 0)
+  if (orderUsd > 0) {
+    if (out.expected_profit_base_usd !== undefined) out.expected_margin_base = Number(out.expected_profit_base_usd || 0) / orderUsd
+    if (out.expected_profit_cost_usd !== undefined) out.expected_margin_cost = Number(out.expected_profit_cost_usd || 0) / orderUsd
+  }
+
+  const orderQty = Number(out.order_qty || 0)
+  if (orderQty > 0) out.avg_order_price_usd = Number(out.order_usd || 0) / orderQty
+
+  if (sourceRows.some(row => row.performance_bucket)) {
+    out.performance_bucket = dominantValue(sourceRows, 'performance_bucket')
+  }
+}
+
 function sumRows (sourceRows, field) {
  return sourceRows.reduce((sum, row) => sum + Number(row[field] || 0), 0)
 }
@@ -2120,12 +2510,14 @@ function toggleGroup (key) {
    ...expandedGroups.value,
    [key]: !isGroupExpanded(key)
  }
+  scheduleLoadBackendGroupedRows()
 }

 function toggleAllProductGroups () {
  const keys = productAutoExpandKeys.value
  if (allProductGroupsExpanded.value) {
    expandedGroups.value = {}
+    scheduleLoadBackendGroupedRows()
    return
  }
  expandSelectedProductGroups()
@@ -2136,6 +2528,7 @@ function expandSelectedProductGroups () {
  const next = { ...expandedGroups.value }
  for (const key of keys) next[key] = true
  expandedGroups.value = next
+  scheduleLoadBackendGroupedRows()
 }

 function groupLabelColumnName (row) {
@@ -2146,23 +2539,29 @@ function groupShowsImage (row) {
  return Number(row?.level ?? 0) < autoExpandThroughLevel.value
 }

-function groupCellClass (name) {
+function groupCellClass (colOrName) {
+  const name = colOrName?.name || colOrName
  if (name === 'image') return 'product-image-cell'
-  return ['stock_qty', 'sales_qty_90d', 'sales_qty_180d', 'sales_qty_365d', 'sales_qty_total', 'sales_usd_90d', 'sales_usd_180d', 'sales_usd_365d', 'sales_usd_total', 'stock_days_90d', 'stock_days_180d', 'stock_days_total', 'avg_price_usd_90d', 'avg_price_usd_180d', 'avg_price_usd_365d', 'avg_price_usd_total', 'base_price_usd', 'cost_price_usd', 'unit_profit_base_90d', 'unit_profit_cost_90d', 'unit_profit_base_180d', 'unit_profit_cost_180d', 'unit_profit_base_total', 'unit_profit_cost_total', 'gross_profit_usd_90d', 'gross_profit_usd_180d', 'gross_profit_usd_total', 'gross_margin_base_90d', 'gross_margin_cost_90d', 'gross_margin_base_180d', 'gross_margin_cost_180d', 'gross_margin_base_total', 'gross_margin_cost_total', 'gross_margin_90d', 'gross_margin_180d', 'market_count_90d', 'customer_count_90d', 'market_count_total', 'customer_count_total', 'sales_index_90d', 'sales_index_total', 'performance_score'].includes(name)
+  if (colOrName?.align === 'right') return 'text-right'
+  return ['stock_qty', 'sales_qty_90d', 'sales_qty_180d', 'sales_qty_365d', 'sales_qty_total', 'sales_usd_90d', 'sales_usd_180d', 'sales_usd_365d', 'sales_usd_total', 'stock_days_90d', 'stock_days_180d', 'stock_days_total', 'stock_turnover_90d', 'stock_turnover_180d', 'stock_turnover_365d', 'stock_turnover_total', 'avg_price_usd_90d', 'avg_price_usd_180d', 'avg_price_usd_365d', 'avg_price_usd_total', 'base_price_usd', 'cost_price_usd', 'unit_profit_base_90d', 'unit_profit_cost_90d', 'unit_profit_base_180d', 'unit_profit_cost_180d', 'unit_profit_base_total', 'unit_profit_cost_total', 'gross_profit_usd_90d', 'gross_profit_usd_180d', 'gross_profit_usd_total', 'gross_margin_base_90d', 'gross_margin_cost_90d', 'gross_margin_base_180d', 'gross_margin_cost_180d', 'gross_margin_base_total', 'gross_margin_cost_total', 'gross_margin_90d', 'gross_margin_180d', 'market_count_90d', 'customer_count_90d', 'market_count_total', 'customer_count_total', 'sales_index_90d', 'sales_index_total', 'performance_score'].includes(name)
    ? 'text-right'
    : ''
 }

-function formatGroupCell (row, name) {
+function formatGroupCell (row, colOrName) {
+  const name = colOrName?.name || colOrName
  if (name === 'image') return ''
  if (name === 'recommendation') return row.recommendation || ''
-  return formatProductCell(row, name)
+  return formatTableCell(row, colOrName)
 }

 function withProductMargins (row) {
  return {
    ...row,
    avg_price_usd_365d: Number(row?.sales_qty_365d || 0) > 0 ? Number(row?.sales_usd_365d || 0) / Number(row?.sales_qty_365d || 0) : 0,
+    stock_turnover_90d: stockTurnover(row?.sales_qty_90d, row?.stock_qty),
+    stock_turnover_180d: stockTurnover(row?.sales_qty_180d, row?.stock_qty),
+    stock_turnover_365d: stockTurnover(row?.sales_qty_365d, row?.stock_qty),
    gross_margin_base_90d: marginFromSalesCost(row?.sales_usd_90d, row?.sales_qty_90d, row?.base_price_usd),
    gross_margin_cost_90d: marginFromSalesCost(row?.sales_usd_90d, row?.sales_qty_90d, row?.cost_price_usd),
    gross_margin_base_180d: marginFromSalesCost(row?.sales_usd_180d, row?.sales_qty_180d, row?.base_price_usd),
@@ -2173,11 +2572,18 @@ function withProductMargins (row) {
 function withGeneralMargins (row) {
  return {
    ...row,
+    stock_turnover_total: stockTurnover(row?.sales_qty_total, row?.stock_qty),
    gross_margin_base_total: marginFromSalesCost(row?.sales_usd_total, row?.sales_qty_total, row?.base_price_usd),
    gross_margin_cost_total: marginFromSalesCost(row?.sales_usd_total, row?.sales_qty_total, row?.cost_price_usd)
  }
 }

+function stockTurnover (salesQty, stockQty) {
+  const stock = Number(stockQty || 0)
+  if (stock <= 0) return 0
+  return Number(salesQty || 0) / stock
+}
+
 function filterKey (tableKey, name) {
  return `${tableKey}:${name}`
 }
@@ -2276,6 +2682,38 @@ function formattedColumnCellValue (row, col) {
  return formatProductCell(row, col?.name || col)
 }

+function formatTableCell (row, colOrName) {
+  const col = typeof colOrName === 'object' ? colOrName : null
+  const name = col?.name || colOrName
+  if (name === 'image') return ''
+  if (name === 'market_key') return displayMarketName(row.market_key)
+  if (name === 'performance_bucket') return bucketLabel(row.performance_bucket)
+  if (name === 'is_overdue') return row.is_overdue ? 'Evet' : 'Hayır'
+  if (isMoneyField(name)) return formatMoney(row[name], 'USD')
+  if (isPercentField(name)) return formatPercent(row[name])
+  if (isIntegerField(name)) return formatNumber(row[name], 0)
+  if (isDecimalField(name)) return formatNumber(row[name], name === 'performance_score' ? 1 : 2)
+  if (typeof col?.field === 'function') return col.field(row)
+  return formatProductCell(row, name)
+}
+
+function isMoneyField (name) {
+  return /(^|_)(usd|cost_value_usd|value_usd)$/.test(name) ||
+    /(price_usd|cost_usd|profit.*usd|sales_usd|order_usd|base_price_usd|cost_price_usd|idle_cost_usd|stock_cost_value_usd|risk_stock_cost_value_usd)/.test(name)
+}
+
+function isPercentField (name) {
+  return /(margin|gross_margin|expected_margin)/.test(name)
+}
+
+function isIntegerField (name) {
+  return /(qty|count|stock_qty|line_count|invoice_count|order_count|product_count|market_count|customer_count|overdue_qty|net_stock_after_order)$/.test(name)
+}
+
+function isDecimalField (name) {
+  return /(days|turnover|index|score|avg_daily)/.test(name)
+}
+
 function formatProductCell (row, name) {
  switch (name) {
    case 'stock_qty':
@@ -2291,6 +2729,10 @@ function formatProductCell (row, name) {
    case 'stock_days_90d':
    case 'stock_days_180d':
    case 'stock_days_total':
+    case 'stock_turnover_90d':
+    case 'stock_turnover_180d':
+    case 'stock_turnover_365d':
+    case 'stock_turnover_total':
    case 'sales_index_90d':
    case 'sales_index_total':
    case 'performance_score':
@@ -2522,19 +2964,54 @@ function getCachedProductImageUrl (row) {
 }

 async function primeProductImages (sourceRows) {
-  const uniqueRows = []
+  const items = []
  const seen = new Set()
  for (const row of sourceRows || []) {
    const key = productImageKey(row)
-    if (!key || seen.has(key)) continue
+    if (!key || seen.has(key) || Object.prototype.hasOwnProperty.call(imageListByKey.value, key)) continue
    seen.add(key)
-    uniqueRows.push(row)
-    if (uniqueRows.length >= 80) break
+    items.push({
+      key,
+      code: String(row?.image_product_code || row?.product_code || '').trim(),
+      dim1: String(row?.image_color_code || row?.color_code || '').trim(),
+      dim3: String(row?.image_yaka_kodu || row?.yaka_kodu || '').trim()
+    })
+    if (items.length >= 160) break
+  }
+  if (!items.length) return
+
+  try {
+    const resp = await api.post('/product-images/batch', { items }, { timeout: 60000 })
+    const nextLists = { ...imageListByKey.value }
+    const nextUrls = { ...imageUrlByKey.value }
+    const returned = new Set()
+    for (const item of Array.isArray(resp?.data) ? resp.data : []) {
+      const key = String(item?.key || '').trim()
+      if (!key) continue
+      returned.add(key)
+      const urls = (Array.isArray(item.images) ? item.images : []).map(resolveProductImageUrl).filter(Boolean)
+      nextLists[key] = urls
+      nextUrls[key] = urls[0] || ''
+    }
+    for (const item of items) {
+      if (!returned.has(item.key)) {
+        nextLists[item.key] = []
+        nextUrls[item.key] = ''
+      }
+    }
+    imageListByKey.value = nextLists
+    imageUrlByKey.value = nextUrls
+  } catch {
+    await Promise.all(items.slice(0, 24).map(item => fetchProductImagesForRow({
+      product_code: item.code,
+      color_code: item.dim1,
+      yaka_kodu: item.dim3
+    })))
  }
-  await Promise.all(uniqueRows.map(row => fetchProductImagesForRow(row)))
 }

 async function openProductImageDialog (row) {
+  imageDialogRow.value = row
  const urls = await fetchProductImagesForRow(row)
  imageDialogUrls.value = urls
  imageSlide.value = 0
@@ -2545,6 +3022,7 @@ async function openProductImageDialog (row) {
    row?.image_yaka_kodu || row?.yaka_kodu
  ].filter(Boolean).join(' | ')
  imageDialog.value = true
+  await loadProductDetailRows(row)
 }

 async function openPerformanceDialog (row) {
@@ -2557,15 +3035,20 @@ async function openPerformanceDialog (row) {
    row?.market_key
  ].filter(Boolean).join(' | ')
  performanceDialog.value = true
+  await loadProductDetailRows(row)
+}
+
+async function loadProductDetailRows (row) {
  detailLoading.value = true
  detailSalesRows.value = []
  detailStockSizes.value = []
  try {
    const params = {
-      product_code: row?.product_code || '',
-      color_code: row?.color_code || '',
-      yaka_kodu: row?.yaka_kodu || ''
+      product_code: row?.image_product_code || row?.product_code || '',
+      color_code: row?.image_color_code || row?.color_code || '',
+      yaka_kodu: row?.image_yaka_kodu || row?.yaka_kodu || ''
    }
+    if (!params.product_code) return
    const [salesResp, stockResp] = await Promise.all([
      api.get('/pricing/product-performance/sales-details', { params: { ...params, limit: 200 }, timeout: 60000 }),
      api.get('/pricing/product-performance/stock-sizes', { params, timeout: 60000 })
@@ -2582,6 +3065,52 @@ async function openPerformanceDialog (row) {
  }
 }

+function backendGroupedSupportedTab (tabKey = activeTab.value) {
+  return tabKey === 'products' ||
+    tabKey === 'idle' ||
+    tabKey === 'order_product_customers' ||
+    tabKey === 'order_market_details' ||
+    salesBreakdownTabKeys.includes(tabKey)
+}
+
+function activeExpandedGroupKeys () {
+  return Object.entries(expandedGroups.value)
+    .filter(([, value]) => value === true)
+    .map(([key]) => key)
+}
+
+function scheduleLoadBackendGroupedRows () {
+  if (backendGroupedTimer) window.clearTimeout(backendGroupedTimer)
+  backendGroupedTimer = window.setTimeout(() => {
+    void loadBackendGroupedRows()
+  }, 120)
+}
+
+async function loadBackendGroupedRows () {
+  const tabKey = activeTab.value
+  if (!backendGroupedSupportedTab(tabKey)) return
+  backendGroupedLoading.value = true
+  try {
+    const resp = await api.get('/pricing/product-performance/grouped', {
+      params: {
+        mode: tabKey,
+        group_levels: activeGroupLevels.value.map(level => level.key).join(','),
+        expanded_keys: activeExpandedGroupKeys().join(','),
+        limit: tabKey === 'products' || tabKey === 'idle' ? productKpiFetchLimit : 50000
+      },
+      timeout: 90000
+    })
+    backendGroupedRows.value = {
+      ...backendGroupedRows.value,
+      [tabKey]: Array.isArray(resp?.data) ? resp.data : []
+    }
+  } catch (err) {
+    console.warn('product performance grouped rows failed', err)
+  } finally {
+    backendGroupedLoading.value = false
+  }
+}
+
 async function reload () {
  loading.value = true
  try {
@@ -2638,6 +3167,7 @@ async function reload () {
    if (activeTab.value === 'order_market_details') {
      await loadOrderMarketDetails(false)
    }
+    await loadBackendGroupedRows()
    void primeProductImages(rows.value)
  } catch (err) {
    Notify.create({ type: 'negative', message: err?.response?.data || err?.message || 'Ürün performans verisi alınamadı' })
@@ -2721,6 +3251,11 @@ watch(activeTab, tab => {
  if (tab === 'order_market_details' && !orderMarketDetailsLoaded.value) {
    void loadOrderMarketDetails(true)
  }
+  scheduleLoadBackendGroupedRows()
+})
+
+watch(activeSelectedExpandLevelKeys, () => {
+  scheduleLoadBackendGroupedRows()
 })

 watch(productTableRows, tableRows => {
@@ -2777,7 +3312,7 @@ onMounted(reload)
 }

 .performance-table :deep(.q-table tbody td) {
-  max-width: 220px;
+  max-width: 320px;
 }

 .performance-table :deep(.q-table tbody td span:not(.q-badge):not(.q-icon)) {
@@ -2802,110 +3337,222 @@ onMounted(reload)
 }

 .product-breakdown-table :deep(.q-table) {
-  min-width: 2050px;
+  min-width: 3200px;
  table-layout: fixed;
 }

-.product-breakdown-table :deep(.q-table th:nth-child(-n+10)),
-.product-breakdown-table :deep(.q-table td:nth-child(-n+10)) {
+.product-breakdown-table :deep(.q-table th:nth-child(-n+11)),
+.product-breakdown-table :deep(.q-table td:nth-child(-n+11)) {
  position: sticky;
  z-index: 2;
 }

-.product-breakdown-table :deep(.q-table th:nth-child(-n+10)) {
+.product-breakdown-table :deep(.q-table th:nth-child(-n+11)) {
  z-index: 4;
  background: #f8fbff;
 }

-.product-breakdown-table :deep(.q-table tbody tr:not(.group-row) td:nth-child(-n+10)) {
+.product-breakdown-table :deep(.q-table tbody tr:not(.group-row) td:nth-child(-n+11)) {
  background: #fff;
 }

 .product-breakdown-table :deep(.q-table th:nth-child(1)),
 .product-breakdown-table :deep(.q-table td:nth-child(1)) {
  left: 0;
-  width: 80px;
-  min-width: 80px;
-  max-width: 80px;
-}
-
-.product-breakdown-table :deep(.q-table th:nth-child(2)),
-.product-breakdown-table :deep(.q-table td:nth-child(2)) {
-  left: 80px;
-  width: 96px;
-  min-width: 96px;
-  max-width: 96px;
-}
-
-.product-breakdown-table :deep(.q-table th:nth-child(3)),
-.product-breakdown-table :deep(.q-table td:nth-child(3)) {
-  left: 176px;
-  width: 48px;
-  min-width: 48px;
-  max-width: 48px;
-}
-
-.product-breakdown-table :deep(.q-table th:nth-child(4)),
-.product-breakdown-table :deep(.q-table td:nth-child(4)) {
-  left: 224px;
-  width: 48px;
-  min-width: 48px;
-  max-width: 48px;
-}
-
-.product-breakdown-table :deep(.q-table th:nth-child(5)),
-.product-breakdown-table :deep(.q-table td:nth-child(5)) {
-  left: 272px;
-  width: 150px;
-  min-width: 150px;
-  max-width: 150px;
-}
-
-.product-breakdown-table :deep(.q-table th:nth-child(6)),
-.product-breakdown-table :deep(.q-table td:nth-child(6)) {
-  left: 422px;
-  width: 72px;
-  min-width: 72px;
-  max-width: 72px;
-}
-
-.product-breakdown-table :deep(.q-table th:nth-child(7)),
-.product-breakdown-table :deep(.q-table td:nth-child(7)) {
-  left: 494px;
-  width: 72px;
-  min-width: 72px;
-  max-width: 72px;
-}
-
-.product-breakdown-table :deep(.q-table th:nth-child(8)),
-.product-breakdown-table :deep(.q-table td:nth-child(8)) {
-  left: 566px;
  width: 92px;
  min-width: 92px;
  max-width: 92px;
 }

+.product-breakdown-table :deep(.q-table th:nth-child(2)),
+.product-breakdown-table :deep(.q-table td:nth-child(2)) {
+  left: 92px;
+  width: 120px;
+  min-width: 120px;
+  max-width: 120px;
+}
+
+.product-breakdown-table :deep(.q-table th:nth-child(3)),
+.product-breakdown-table :deep(.q-table td:nth-child(3)) {
+  left: 212px;
+  width: 64px;
+  min-width: 64px;
+  max-width: 64px;
+}
+
+.product-breakdown-table :deep(.q-table th:nth-child(4)),
+.product-breakdown-table :deep(.q-table td:nth-child(4)) {
+  left: 276px;
+  width: 64px;
+  min-width: 64px;
+  max-width: 64px;
+}
+
+.product-breakdown-table :deep(.q-table th:nth-child(5)),
+.product-breakdown-table :deep(.q-table td:nth-child(5)) {
+  left: 340px;
+  width: 200px;
+  min-width: 200px;
+  max-width: 200px;
+}
+
+.product-breakdown-table :deep(.q-table th:nth-child(6)),
+.product-breakdown-table :deep(.q-table td:nth-child(6)) {
+  left: 540px;
+  width: 110px;
+  min-width: 110px;
+  max-width: 110px;
+}
+
+.product-breakdown-table :deep(.q-table th:nth-child(7)),
+.product-breakdown-table :deep(.q-table td:nth-child(7)) {
+  left: 650px;
+  width: 100px;
+  min-width: 100px;
+  max-width: 100px;
+}
+
+.product-breakdown-table :deep(.q-table th:nth-child(8)),
+.product-breakdown-table :deep(.q-table td:nth-child(8)) {
+  left: 750px;
+  width: 130px;
+  min-width: 130px;
+  max-width: 130px;
+}
+
 .product-breakdown-table :deep(.q-table th:nth-child(9)),
 .product-breakdown-table :deep(.q-table td:nth-child(9)) {
-  left: 658px;
-  width: 96px;
-  min-width: 96px;
-  max-width: 96px;
+  left: 880px;
+  width: 130px;
+  min-width: 130px;
+  max-width: 130px;
 }

 .product-breakdown-table :deep(.q-table th:nth-child(10)),
 .product-breakdown-table :deep(.q-table td:nth-child(10)) {
-  left: 754px;
-  width: 96px;
-  min-width: 96px;
-  max-width: 96px;
-  box-shadow: 8px 0 10px -10px rgba(17, 24, 39, 0.45);
+  left: 1010px;
+  width: 130px;
+  min-width: 130px;
+  max-width: 130px;
 }

 .product-breakdown-table :deep(.q-table th:nth-child(11)),
 .product-breakdown-table :deep(.q-table td:nth-child(11)) {
-  width: 180px;
-  min-width: 140px;
+  left: 1140px;
+  width: 190px;
+  min-width: 190px;
+  max-width: 190px;
+  box-shadow: 8px 0 10px -10px rgba(17, 24, 39, 0.45);
+}
+
+.sticky-dim-table :deep(.q-table) {
+  min-width: 2200px;
+  table-layout: fixed;
+}
+
+.sticky-dim-table :deep(.q-table th),
+.sticky-dim-table :deep(.q-table td) {
+  min-width: 130px;
+  width: 130px;
+  max-width: 180px;
+}
+
+.sticky-dim-table :deep(.q-table th:nth-child(1)),
+.sticky-dim-table :deep(.q-table td:nth-child(1)) {
+  left: 0;
+  position: sticky;
+  z-index: 2;
+  background: #fff;
+}
+
+.sticky-dim-table :deep(.q-table th:nth-child(2)),
+.sticky-dim-table :deep(.q-table td:nth-child(2)) {
+  left: 130px;
+}
+
+.sticky-dim-table :deep(.q-table th:nth-child(3)),
+.sticky-dim-table :deep(.q-table td:nth-child(3)) {
+  left: 260px;
+}
+
+.sticky-dim-table :deep(.q-table th:nth-child(4)),
+.sticky-dim-table :deep(.q-table td:nth-child(4)) {
+  left: 390px;
+}
+
+.sticky-dim-table :deep(.q-table th:nth-child(5)),
+.sticky-dim-table :deep(.q-table td:nth-child(5)) {
+  left: 520px;
+}
+
+.sticky-dim-table :deep(.q-table th:nth-child(6)),
+.sticky-dim-table :deep(.q-table td:nth-child(6)) {
+  left: 650px;
+}
+
+.sticky-dim-table :deep(.q-table th:nth-child(7)),
+.sticky-dim-table :deep(.q-table td:nth-child(7)) {
+  left: 780px;
+}
+
+.sticky-dim-table :deep(.q-table th:nth-child(8)),
+.sticky-dim-table :deep(.q-table td:nth-child(8)) {
+  left: 910px;
+}
+
+.sticky-dim-table :deep(.q-table th:nth-child(9)),
+.sticky-dim-table :deep(.q-table td:nth-child(9)) {
+  left: 1040px;
+}
+
+.sticky-dim-table :deep(.q-table th:nth-child(10)),
+.sticky-dim-table :deep(.q-table td:nth-child(10)) {
+  left: 1170px;
+}
+
+.sticky-dim-table.sticky-dim-3 :deep(.q-table th:nth-child(-n+3)),
+.sticky-dim-table.sticky-dim-3 :deep(.q-table td:nth-child(-n+3)),
+.sticky-dim-table.sticky-dim-5 :deep(.q-table th:nth-child(-n+5)),
+.sticky-dim-table.sticky-dim-5 :deep(.q-table td:nth-child(-n+5)),
+.sticky-dim-table.sticky-dim-6 :deep(.q-table th:nth-child(-n+6)),
+.sticky-dim-table.sticky-dim-6 :deep(.q-table td:nth-child(-n+6)),
+.sticky-dim-table.sticky-dim-7 :deep(.q-table th:nth-child(-n+7)),
+.sticky-dim-table.sticky-dim-7 :deep(.q-table td:nth-child(-n+7)),
+.sticky-dim-table.sticky-dim-9 :deep(.q-table th:nth-child(-n+9)),
+.sticky-dim-table.sticky-dim-9 :deep(.q-table td:nth-child(-n+9)),
+.sticky-dim-table.sticky-dim-10 :deep(.q-table th:nth-child(-n+10)),
+.sticky-dim-table.sticky-dim-10 :deep(.q-table td:nth-child(-n+10)) {
+  position: sticky;
+  z-index: 2;
+}
+
+.sticky-dim-table.sticky-dim-3 :deep(.q-table th:nth-child(-n+3)),
+.sticky-dim-table.sticky-dim-5 :deep(.q-table th:nth-child(-n+5)),
+.sticky-dim-table.sticky-dim-6 :deep(.q-table th:nth-child(-n+6)),
+.sticky-dim-table.sticky-dim-7 :deep(.q-table th:nth-child(-n+7)),
+.sticky-dim-table.sticky-dim-9 :deep(.q-table th:nth-child(-n+9)),
+.sticky-dim-table.sticky-dim-10 :deep(.q-table th:nth-child(-n+10)) {
+  z-index: 4;
+  background: #f8fbff;
+}
+
+.sticky-dim-table :deep(.q-table tbody td:nth-child(-n+10)) {
+  background: #fff;
+}
+
+.sticky-dim-table.sticky-dim-3 :deep(.q-table th:nth-child(3)),
+.sticky-dim-table.sticky-dim-3 :deep(.q-table td:nth-child(3)),
+.sticky-dim-table.sticky-dim-5 :deep(.q-table th:nth-child(5)),
+.sticky-dim-table.sticky-dim-5 :deep(.q-table td:nth-child(5)),
+.sticky-dim-table.sticky-dim-6 :deep(.q-table th:nth-child(6)),
+.sticky-dim-table.sticky-dim-6 :deep(.q-table td:nth-child(6)),
+.sticky-dim-table.sticky-dim-7 :deep(.q-table th:nth-child(7)),
+.sticky-dim-table.sticky-dim-7 :deep(.q-table td:nth-child(7)),
+.sticky-dim-table.sticky-dim-9 :deep(.q-table th:nth-child(9)),
+.sticky-dim-table.sticky-dim-9 :deep(.q-table td:nth-child(9)),
+.sticky-dim-table.sticky-dim-10 :deep(.q-table th:nth-child(10)),
+.sticky-dim-table.sticky-dim-10 :deep(.q-table td:nth-child(10)) {
+  box-shadow: 8px 0 10px -10px rgba(17, 24, 39, 0.45);
 }

 .filterable-header-cell {
@@ -2914,10 +3561,10 @@ onMounted(reload)

 .header-with-filter {
  display: grid;
-  grid-template-columns: minmax(0, 1fr) 20px;
+  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
-  gap: 2px;
-  min-width: 42px;
+  gap: 4px;
+  min-width: 80px;
 }

 .header-with-filter > span {
@@ -2928,9 +3575,9 @@ onMounted(reload)
 }

 .header-filter-btn {
-  width: 20px;
-  height: 20px;
-  min-height: 20px;
+  width: 24px;
+  height: 24px;
+  min-height: 24px;
 }

 .header-filter-ghost {
@@ -3047,6 +3694,11 @@ onMounted(reload)
  height: 82px;
 }

+.product-thumb {
+  display: block;
+  object-fit: contain;
+}
+
 .product-thumb-placeholder {
  display: flex;
  align-items: center;
@@ -3063,6 +3715,101 @@ onMounted(reload)
 .product-image-dialog-body {
  height: calc(100vh - 74px);
  padding: 12px;
+  overflow: hidden;
+}
+
+.performance-image-layout {
+  display: grid;
+  grid-template-columns: minmax(280px, 330px) minmax(360px, 1fr) minmax(440px, 1.25fr);
+  gap: 12px;
+  height: 100%;
+  min-height: 0;
+}
+
+.image-product-fields,
+.image-sales-panel,
+.image-media-panel {
+  min-height: 0;
+}
+
+.image-product-fields,
+.image-sales-panel {
+  overflow: auto;
+  background: #fff;
+  border: 1px solid #d9dde3;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.image-section-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--q-primary);
+  text-transform: uppercase;
+  letter-spacing: 0;
+  margin-bottom: 8px;
+}
+
+.image-field-row {
+  display: grid;
+  grid-template-columns: 92px minmax(0, 1fr);
+  gap: 8px;
+  align-items: start;
+  min-height: 30px;
+  padding: 6px 0;
+  border-bottom: 1px solid #edf0f3;
+  font-size: 12px;
+}
+
+.image-field-row .k {
+  color: #6b7280;
+  font-weight: 600;
+}
+
+.image-field-row .v {
+  color: #1f2937;
+  font-weight: 700;
+  overflow-wrap: anywhere;
+}
+
+.image-product-section {
+  position: relative;
+  margin-top: 14px;
+}
+
+.image-size-stock-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
+  gap: 8px;
+}
+
+.image-size-stock-cell {
+  min-height: 54px;
+  padding: 8px 6px;
+  border: 1px solid #dfe4ea;
+  border-radius: 6px;
+  background: #f8fafc;
+  text-align: center;
+}
+
+.image-size-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 700;
+  color: #6b7280;
+}
+
+.image-size-qty {
+  display: block;
+  margin-top: 3px;
+  font-size: 16px;
+  font-weight: 800;
+  color: #111827;
+}
+
+.image-empty-text {
+  color: #7a8390;
+  font-size: 12px;
 }

 .product-image-carousel {
@@ -3074,7 +3821,7 @@ onMounted(reload)

 .product-image-large {
  width: 100%;
-  height: calc(100vh - 130px);
+  height: 100%;
 }

 .product-image-empty {
@@ -3088,6 +3835,29 @@ onMounted(reload)
  border: 1px solid #d9dde3;
  border-radius: 8px;
 }
+
+.image-metric-card .q-card__section {
+  padding: 8px;
+}
+
+.image-metric-card .metric-value {
+  font-size: 14px;
+}
+
+@media (max-width: 1260px) {
+  .product-image-dialog-body {
+    overflow: auto;
+  }
+
+  .performance-image-layout {
+    grid-template-columns: 1fr;
+    height: auto;
+  }
+
+  .image-media-panel {
+    min-height: 520px;
+  }
+}
 </style>


@@ -444,6 +444,8 @@ const IMAGE_LIST_CONCURRENCY = 8
 const FILTER_OPTIONS_CACHE_TTL_MS = 60 * 1000
 const FILTER_OPTIONS_DEBOUNCE_MS = 250
 let imageListActiveRequests = 0
+let productImageBatchTimer = null
+const productImageBatchQueue = new Map()
 let filterOptionsDebounceTimer = null
 let filterOptionsRequestSeq = 0
 const imageListWaitQueue = []
@@ -729,11 +731,70 @@ function getProductImageUrl(code, color, secondColor = '', dim1Id = '', dim3Id =
  const key = buildImageKey(code, color, secondColor, dim1Id, dim3Id)
  const existing = productImageCache.value[key]
  if (existing !== undefined) return existing || ''
-
-  void ensureProductImage(code, color, secondColor, dim1Id, dim3Id)
+  queueProductImageBatch(code, color, secondColor, dim1Id, dim3Id)
  return ''
 }

+function queueProductImageBatch(code, color, secondColor = '', dim1Id = '', dim3Id = '') {
+  const key = buildImageKey(code, color, secondColor, dim1Id, dim3Id)
+  const codeTrim = String(code || '').trim().toUpperCase()
+  if (!codeTrim || productImageCache.value[key] !== undefined || productImageLoading.value[key]) return
+  productImageLoading.value[key] = true
+  productImageBatchQueue.set(key, {
+    key,
+    code: codeTrim,
+    dim1: String(dim1Id || color || '').trim().toUpperCase(),
+    dim3: String(dim3Id || secondColor || '').trim().toUpperCase(),
+    listKey: buildImageKey(
+      codeTrim,
+      String(color || '').trim().toUpperCase(),
+      String(secondColor || '').trim().toUpperCase(),
+      String(dim1Id || '').trim().toUpperCase(),
+      String(dim3Id || '').trim().toUpperCase()
+    )
+  })
+  if (productImageBatchTimer) window.clearTimeout(productImageBatchTimer)
+  productImageBatchTimer = window.setTimeout(flushProductImageBatch, 80)
+}
+
+async function flushProductImageBatch() {
+  const batch = Array.from(productImageBatchQueue.values()).slice(0, 250)
+  for (const item of batch) productImageBatchQueue.delete(item.key)
+  if (!batch.length) return
+  try {
+    const res = await api.post('/product-images/batch', {
+      items: batch.map(item => ({ key: item.key, code: item.code, dim1: item.dim1, dim3: item.dim3 }))
+    }, { timeout: 30000 })
+    const returned = new Set()
+    for (const item of Array.isArray(res?.data) ? res.data : []) {
+      const key = String(item?.key || '').trim()
+      if (!key) continue
+      returned.add(key)
+      const queued = batch.find(entry => entry.key === key)
+      const list = Array.isArray(item.images) ? item.images : []
+      const first = list[0] || null
+      const resolved = resolveProductImageUrl(first)
+      const url = resolved.thumbUrl || resolved.fullUrl || resolved.publicUrl || resolved.contentUrl || ''
+      productImageCache.value[key] = String(url || '').trim()
+      productImageFallbackByKey.value[key] = resolved.fullUrl || resolved.publicUrl || resolved.contentUrl || ''
+      if (queued) productImageListByCode.value[queued.listKey] = list
+      delete productImageLoading.value[key]
+    }
+    for (const item of batch) {
+      if (!returned.has(item.key)) {
+        productImageCache.value[item.key] = ''
+        productImageListByCode.value[item.listKey] = []
+        delete productImageLoading.value[item.key]
+      }
+    }
+  } catch {
+    for (const item of batch) {
+      delete productImageLoading.value[item.key]
+      void ensureProductImage(item.code, item.dim1, item.dim3)
+    }
+  }
+}
+
 async function onProductImageError(code, color, secondColor = '', dim1Id = '', dim3Id = '') {
  const key = buildImageKey(code, color, secondColor, dim1Id, dim3Id)
  productImageCache.value[key] = String(productImageFallbackByKey.value[key] || '').trim()
@@ -409,6 +409,8 @@ const productImageFullscreenDragOriginX = ref(0)
 const productImageFullscreenDragOriginY = ref(0)
 const IMAGE_LIST_CONCURRENCY = 8
 let imageListActiveRequests = 0
+let productImageBatchTimer = null
+const productImageBatchQueue = new Map()
 const imageListWaitQueue = []
 const activeSchema = ref(storeSchemaByKey.tak)
 const activeGrpKey = ref('tak')
@@ -708,10 +710,70 @@ function getProductImageUrl(code, color, secondColor = '', dim1Id = '', dim3Id =
  const key = buildImageKey(code, color, secondColor, dim1Id, dim3Id)
  const existing = productImageCache.value[key]
  if (existing !== undefined) return existing || ''
-  void ensureProductImage(code, color, secondColor, dim1Id, dim3Id)
+  queueProductImageBatch(code, color, secondColor, dim1Id, dim3Id)
  return ''
 }

+function queueProductImageBatch(code, color, secondColor = '', dim1Id = '', dim3Id = '') {
+  const key = buildImageKey(code, color, secondColor, dim1Id, dim3Id)
+  const codeTrim = String(code || '').trim().toUpperCase()
+  if (!codeTrim || productImageCache.value[key] !== undefined || productImageLoading.value[key]) return
+  productImageLoading.value[key] = true
+  productImageBatchQueue.set(key, {
+    key,
+    code: codeTrim,
+    dim1: String(dim1Id || color || '').trim().toUpperCase(),
+    dim3: String(dim3Id || secondColor || '').trim().toUpperCase(),
+    listKey: buildImageKey(
+      codeTrim,
+      String(color || '').trim().toUpperCase(),
+      String(secondColor || '').trim().toUpperCase(),
+      String(dim1Id || '').trim().toUpperCase(),
+      String(dim3Id || '').trim().toUpperCase()
+    )
+  })
+  if (productImageBatchTimer) window.clearTimeout(productImageBatchTimer)
+  productImageBatchTimer = window.setTimeout(flushProductImageBatch, 80)
+}
+
+async function flushProductImageBatch() {
+  const batch = Array.from(productImageBatchQueue.values()).slice(0, 250)
+  for (const item of batch) productImageBatchQueue.delete(item.key)
+  if (!batch.length) return
+  try {
+    const res = await api.post('/product-images/batch', {
+      items: batch.map(item => ({ key: item.key, code: item.code, dim1: item.dim1, dim3: item.dim3 }))
+    }, { timeout: 30000 })
+    const returned = new Set()
+    for (const item of Array.isArray(res?.data) ? res.data : []) {
+      const key = String(item?.key || '').trim()
+      if (!key) continue
+      returned.add(key)
+      const queued = batch.find(entry => entry.key === key)
+      const list = Array.isArray(item.images) ? item.images : []
+      const first = list[0] || null
+      const resolved = resolveProductImageUrl(first)
+      const url = resolved.thumbUrl || resolved.fullUrl || resolved.publicUrl || resolved.contentUrl || ''
+      productImageCache.value[key] = String(url || '').trim()
+      productImageFallbackByKey.value[key] = resolved.fullUrl || resolved.publicUrl || resolved.contentUrl || ''
+      if (queued) productImageListByCode.value[queued.listKey] = list
+      delete productImageLoading.value[key]
+    }
+    for (const item of batch) {
+      if (!returned.has(item.key)) {
+        productImageCache.value[item.key] = ''
+        productImageListByCode.value[item.listKey] = []
+        delete productImageLoading.value[item.key]
+      }
+    }
+  } catch {
+    for (const item of batch) {
+      delete productImageLoading.value[item.key]
+      void ensureProductImage(item.code, item.dim1, item.dim3)
+    }
+  }
+}
+
 async function onProductImageError(code, color, secondColor = '', dim1Id = '', dim3Id = '') {
  const key = buildImageKey(code, color, secondColor, dim1Id, dim3Id)
  productImageCache.value[key] = String(productImageFallbackByKey.value[key] || '').trim()