M_Kececi/bssapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
M_Kececi
2026-07-03 00:01:42 +03:00
parent d419f52e3c
commit c536b85a4c
9 changed files with 1716 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/pages/ProductPerformanceProfitability.vue
+935 -165
View File
@@ -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>