product performance grouped kpi improvements

ui/src/pages/ProductPerformanceProfitability.vue

@@ -534,7 +534,6 @@
       :pagination="pagination"
       virtual-scroll
       :virtual-scroll-item-size="64"
-      @request="onRequest"
     >
       <template #header-cell="props">
         <q-th :props="props" class="filterable-header-cell">
@@ -1550,7 +1549,6 @@ const pageBusy = computed(() => loading.value || backendGroupedLoading.value ||
 const pagination = ref({
   page: 1,
   rowsPerPage: 100,
-  rowsNumber: 0,
   sortBy: 'performance_score_total',
   descending: true
 })
@@ -1607,8 +1605,8 @@ const columns = [
   { name: 'image', label: 'Foto', field: 'image', align: 'center' },
   { name: 'kategori', label: 'Kategori', field: 'kategori', align: 'left' },
   { name: 'askili_yan', label: 'Askılı/Yan', field: 'askili_yan', align: 'left' },
-  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => row.urun_ilk_grubu || row.yas_grubu || '', align: 'left' },
-  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => row.urun_ana_grubu || row.seri || '', align: 'left' },
+  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => productFirstGroupValue(row), align: 'left' },
+  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => productMainGroupValue(row), align: 'left' },
   { name: 'urun_alt_grubu', label: 'Ürün Alt Grubu', field: 'urun_alt_grubu', align: 'left' },
   { name: 'product_code', label: 'Ürün', field: 'product_code', align: 'left', sortable: true },
   { name: 'item_description', label: 'Açıklama', field: 'item_description', align: 'left' },
@@ -1802,8 +1800,8 @@ const generalColumns = [
   { name: 'item_description', label: 'Açıklama', field: 'item_description', align: 'left', sortable: true },
   { name: 'kategori', label: 'Kategori', field: 'kategori', align: 'left', sortable: true },
   { name: 'askili_yan', label: 'Askılı/Yan', field: 'askili_yan', align: 'left', sortable: true },
-  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => row.urun_ilk_grubu || row.yas_grubu || '', align: 'left', sortable: true },
-  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => row.urun_ana_grubu || row.seri || '', align: 'left', sortable: true },
+  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => productFirstGroupValue(row), align: 'left', sortable: true },
+  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => productMainGroupValue(row), align: 'left', sortable: true },
   { name: 'urun_alt_grubu', label: 'Ürün Alt Grubu', field: 'urun_alt_grubu', align: 'left', sortable: true },
   { name: 'market_key', label: 'Piyasa', field: row => displayMarketName(row.market_key), align: 'left', sortable: true },
   { name: 'period_start', label: 'Başlangıç', field: 'period_start', align: 'left', sortable: true },
@@ -1840,8 +1838,8 @@ const orderAnalysisColumns = [
   { name: 'item_description', label: 'Açıklama', field: 'item_description', align: 'left', sortable: true },
   { name: 'kategori', label: 'Kategori', field: 'kategori', align: 'left', sortable: true },
   { name: 'askili_yan', label: 'Askılı/Yan', field: 'askili_yan', align: 'left', sortable: true },
-  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => row.urun_ilk_grubu || row.yas_grubu || '', align: 'left', sortable: true },
-  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => row.urun_ana_grubu || row.seri || '', align: 'left', sortable: true },
+  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => productFirstGroupValue(row), align: 'left', sortable: true },
+  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => productMainGroupValue(row), align: 'left', sortable: true },
   { name: 'urun_alt_grubu', label: 'Ürün Alt Grubu', field: 'urun_alt_grubu', align: 'left', sortable: true },
   { name: 'market_key', label: 'Piyasa', field: row => displayMarketName(row.market_key), align: 'left', sortable: true },
   { name: 'order_qty', label: 'Açık Sipariş', field: row => formatNumber(row.order_qty, 0), align: 'right', sortable: true },
@@ -1899,8 +1897,8 @@ const orderProductCustomerColumns = [
   { name: 'image', label: 'Foto', field: 'image', align: 'center' },
   { name: 'kategori', label: 'Kategori', field: 'kategori', align: 'left', sortable: true },
   { name: 'askili_yan', label: 'Askılı/Yan', field: 'askili_yan', align: 'left', sortable: true },
-  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => row.urun_ilk_grubu || row.yas_grubu || '', align: 'left', sortable: true },
-  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => row.urun_ana_grubu || row.seri || '', align: 'left', sortable: true },
+  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => productFirstGroupValue(row), align: 'left', sortable: true },
+  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => productMainGroupValue(row), align: 'left', sortable: true },
   { name: 'urun_alt_grubu', label: 'Ürün Alt Grubu', field: 'urun_alt_grubu', align: 'left', sortable: true },
   { name: 'product_code', label: 'Ürün', field: 'product_code', align: 'left', sortable: true },
   { name: 'item_description', label: 'Açıklama', field: 'item_description', align: 'left', sortable: true },
@@ -1930,8 +1928,8 @@ const orderMarketDetailColumns = [
   { name: 'customer_name', label: 'Müşteri', field: 'customer_name', align: 'left', sortable: true },
   { name: 'kategori', label: 'Kategori', field: 'kategori', align: 'left', sortable: true },
   { name: 'askili_yan', label: 'Askılı/Yan', field: 'askili_yan', align: 'left', sortable: true },
-  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => row.urun_ilk_grubu || row.yas_grubu || '', align: 'left', sortable: true },
-  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => row.urun_ana_grubu || row.seri || '', align: 'left', sortable: true },
+  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => productFirstGroupValue(row), align: 'left', sortable: true },
+  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => productMainGroupValue(row), align: 'left', sortable: true },
   { name: 'urun_alt_grubu', label: 'Ürün Alt Grubu', field: 'urun_alt_grubu', align: 'left', sortable: true },
   { name: 'product_code', label: 'Ürün', field: 'product_code', align: 'left', sortable: true },
   { name: 'item_description', label: 'Açıklama', field: 'item_description', align: 'left', sortable: true },
@@ -1958,8 +1956,8 @@ const idleColumns = [
   { name: 'image', label: 'Foto', field: 'image', align: 'center' },
   { name: 'kategori', label: 'Kategori', field: 'kategori', align: 'left' },
   { name: 'askili_yan', label: 'Askılı/Yan', field: 'askili_yan', align: 'left' },
-  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => row.urun_ilk_grubu || row.yas_grubu || '', align: 'left' },
-  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => row.urun_ana_grubu || row.seri || '', align: 'left' },
+  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => productFirstGroupValue(row), align: 'left' },
+  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => productMainGroupValue(row), align: 'left' },
   { name: 'urun_alt_grubu', label: 'Ürün Alt Grubu', field: 'urun_alt_grubu', align: 'left' },
   { name: 'product_code', label: 'Ürün', field: 'product_code', align: 'left', sortable: true },
   { name: 'item_description', label: 'Açıklama', field: 'item_description', align: 'left' },
@@ -1980,8 +1978,8 @@ const marketColumns = [
   { name: 'market_key', label: 'Piyasa', field: row => displayMarketName(row.market_key), align: 'left', sortable: true },
   { name: 'kategori', label: 'Kategori', field: 'kategori', align: 'left' },
   { name: 'askili_yan', label: 'Askılı/Yan', field: 'askili_yan', align: 'left' },
-  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => row.urun_ilk_grubu || row.yas_grubu || '', align: 'left' },
-  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => row.urun_ana_grubu || row.seri || '', align: 'left' },
+  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => productFirstGroupValue(row), align: 'left' },
+  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => productMainGroupValue(row), align: 'left' },
   { name: 'urun_alt_grubu', label: 'Ürün Alt Grubu', field: 'urun_alt_grubu', align: 'left' },
   { name: 'product_count', label: 'Ürün', field: row => formatNumber(row.product_count, 0), align: 'right', sortable: true },
   { name: 'star_count', label: 'Yıldız', field: row => formatNumber(row.star_count, 0), align: 'right', sortable: true },
@@ -2036,8 +2034,8 @@ const salesBreakdownColumns = [
   { name: 'color_code', label: 'Renk', field: 'color_code', align: 'left', sortable: true },
   { name: 'yaka_kodu', label: 'Yaka', field: 'yaka_kodu', align: 'left', sortable: true },
   { name: 'askili_yan', label: 'Askılı/Yan', field: 'askili_yan', align: 'left', sortable: true },
-  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => row.urun_ilk_grubu || row.yas_grubu || '', align: 'left', sortable: true },
-  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => row.urun_ana_grubu || row.seri || '', align: 'left', sortable: true },
+  { name: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', field: row => productFirstGroupValue(row), align: 'left', sortable: true },
+  { name: 'urun_ana_grubu', label: 'Ürün Ana Grubu', field: row => productMainGroupValue(row), align: 'left', sortable: true },
   { name: 'urun_alt_grubu', label: 'Ürün Alt Grubu', field: 'urun_alt_grubu', align: 'left', sortable: true },
   { name: 'product_code', label: 'Ürün', field: 'product_code', align: 'left', sortable: true },
   { name: 'item_description', label: 'Açıklama', field: 'item_description', align: 'left', sortable: true },
@@ -2170,7 +2168,13 @@ function removeColumnsInPlace (targetColumns, names) {
   countryColumns,
   customerColumns,
   salesBreakdownColumns
-].forEach(reorderColumnsInPlace)
+].forEach(target => {
+  reorderColumnsInPlace(target)
+  attachColumnSorts(target)
+})
+
+attachColumnSorts(detailStockColumns)
+attachColumnSorts(detailSalesColumns)
 
 const visibleSalesBreakdownColumns = computed(() => orderedMetricColumns(salesBreakdownColumns.filter(visiblePeriodColumn)))
 
@@ -2275,10 +2279,10 @@ const imageDialogInfoRows = computed(() => {
     { key: 'product', label: 'Ürün', value: productCode || '-' },
     { key: 'color', label: 'Renk', value: colorCode || '-' },
     { key: 'yaka', label: 'Yaka', value: yakaCode || '-' },
-    { key: 'category', label: 'Kategori', value: row.kategori || '-' },
+    { key: 'category', label: 'Kategori', value: productCategoryValue(row) || '-' },
     { 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: 'first', label: 'İlk Grup', value: productFirstGroupValue(row) || '-' },
+    { key: 'main', label: 'Ana Grup', value: productMainGroupValue(row) || '-' },
     { 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) },
@@ -2288,10 +2292,10 @@ const imageDialogInfoRows = computed(() => {
 })
 
 const groupLevels = [
-  { key: 'kategori', label: 'Kategori' },
+  { key: 'kategori', label: 'Kategori', fallback: 'yas_grubu' },
   { key: 'askili_yan', label: 'Askılı/Yan' },
-  { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'yas_grubu' },
-  { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu', fallback: 'seri' },
+  { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'seri' },
+  { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
   { key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
   { key: 'product_code', label: 'Ürün' },
   { key: 'color_code', label: 'Renk' },
@@ -2305,8 +2309,8 @@ const tabGroupLevels = {
     { key: 'color_code', label: 'Renk' },
     { key: 'yaka_kodu', label: 'Yaka' },
     { key: 'askili_yan', label: 'Askılı/Yan' },
-    { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'yas_grubu' },
-    { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu', fallback: 'seri' },
+    { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'seri' },
+    { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
     { key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
     { key: 'product_code', label: 'Ürün' },
     { key: 'country', label: 'Ülke' },
@@ -2317,8 +2321,8 @@ const tabGroupLevels = {
   ],
   idle: [
     { key: 'askili_yan', label: 'Askılı/Yan' },
-    { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'yas_grubu' },
-    { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu', fallback: 'seri' },
+    { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'seri' },
+    { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
     { key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
     { key: 'product_code', label: 'Ürün' },
     { key: 'color_code', label: 'Renk' },
@@ -2328,10 +2332,10 @@ const tabGroupLevels = {
     { key: 'market_key', label: 'Piyasa' },
     { key: 'customer_code', label: 'Müşteri Kodu' },
     { key: 'customer_name', label: 'Müşteri' },
-    { key: 'kategori', label: 'Kategori' },
+    { key: 'kategori', label: 'Kategori', fallback: 'yas_grubu' },
     { key: 'askili_yan', label: 'Askılı/Yan' },
-    { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'yas_grubu' },
-    { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu', fallback: 'seri' },
+    { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'seri' },
+    { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
     { key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
     { key: 'product_code', label: 'Ürün' },
     { key: 'color_code', label: 'Renk' },
@@ -2341,10 +2345,10 @@ const tabGroupLevels = {
     { key: 'market_key', label: 'Piyasa' },
     { key: 'customer_code', label: 'Müşteri Kodu' },
     { key: 'customer_name', label: 'Müşteri' },
-    { key: 'kategori', label: 'Kategori' },
+    { key: 'kategori', label: 'Kategori', fallback: 'yas_grubu' },
     { key: 'askili_yan', label: 'Askılı/Yan' },
-    { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'yas_grubu' },
-    { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu', fallback: 'seri' },
+    { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'seri' },
+    { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
     { key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
     { key: 'product_code', label: 'Ürün' },
     { key: 'color_code', label: 'Renk' },
@@ -2354,10 +2358,10 @@ const tabGroupLevels = {
     { key: 'market_key', label: 'Piyasa' },
     { key: 'customer_code', label: 'Müşteri Kodu' },
     { key: 'customer_name', label: 'Müşteri' },
-    { key: 'kategori', label: 'Kategori' },
+    { key: 'kategori', label: 'Kategori', fallback: 'yas_grubu' },
     { key: 'askili_yan', label: 'Askılı/Yan' },
-    { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'yas_grubu' },
-    { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu', fallback: 'seri' },
+    { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'seri' },
+    { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
     { key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
     { key: 'product_code', label: 'Ürün' },
     { key: 'color_code', label: 'Renk' },
@@ -2367,10 +2371,10 @@ const tabGroupLevels = {
     { key: 'market_key', label: 'Piyasa' },
     { key: 'customer_code', label: 'Müşteri Kodu' },
     { key: 'customer_name', label: 'Müşteri' },
-    { key: 'kategori', label: 'Kategori' },
+    { key: 'kategori', label: 'Kategori', fallback: 'yas_grubu' },
     { key: 'askili_yan', label: 'Askılı/Yan' },
-    { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'yas_grubu' },
-    { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu', fallback: 'seri' },
+    { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'seri' },
+    { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
     { key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
     { key: 'product_code', label: 'Ürün' },
     { key: 'color_code', label: 'Renk' },
@@ -2380,10 +2384,10 @@ const tabGroupLevels = {
     { key: 'market_key', label: 'Piyasa' },
     { key: 'customer_code', label: 'Müşteri Kodu' },
     { key: 'customer_name', label: 'Müşteri' },
-    { key: 'kategori', label: 'Kategori' },
+    { key: 'kategori', label: 'Kategori', fallback: 'yas_grubu' },
     { key: 'askili_yan', label: 'Askılı/Yan' },
-    { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'yas_grubu' },
-    { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu', fallback: 'seri' },
+    { key: 'urun_ilk_grubu', label: 'Ürün İlk Grubu', fallback: 'seri' },
+    { key: 'urun_ana_grubu', label: 'Ürün Ana Grubu' },
     { key: 'urun_alt_grubu', label: 'Ürün Alt Grubu' },
     { key: 'product_code', label: 'Ürün' },
     { key: 'color_code', label: 'Renk' },
@@ -2599,10 +2603,10 @@ function makeGroupRow (key, level, groupDef, value, groupRows) {
     color_code: groupDef.key === 'color_code' ? value : distinctSummary(groupRows, 'color_code'),
     yaka_kodu: groupDef.key === 'yaka_kodu' ? value : distinctSummary(groupRows, 'yaka_kodu'),
     item_description: distinctSummary(groupRows, 'item_description'),
-    kategori: groupDef.key === 'kategori' ? value : distinctSummary(groupRows, 'kategori'),
-    urun_ilk_grubu: groupDef.key === 'urun_ilk_grubu' ? value : distinctSummary(groupRows, 'urun_ilk_grubu', 'yas_grubu'),
+    kategori: groupDef.key === 'kategori' ? value : distinctSummary(groupRows, 'kategori', 'yas_grubu'),
+    urun_ilk_grubu: groupDef.key === 'urun_ilk_grubu' ? value : distinctSummary(groupRows, 'seri', 'urun_ilk_grubu'),
     askili_yan: groupDef.key === 'askili_yan' ? value : distinctSummary(groupRows, 'askili_yan'),
-    urun_ana_grubu: groupDef.key === 'urun_ana_grubu' ? value : distinctSummary(groupRows, 'urun_ana_grubu', 'seri'),
+    urun_ana_grubu: groupDef.key === 'urun_ana_grubu' ? value : distinctSummary(groupRows, 'urun_ana_grubu'),
     urun_alt_grubu: groupDef.key === 'urun_alt_grubu' ? value : distinctSummary(groupRows, 'urun_alt_grubu'),
     market_key: groupDef.key === 'market_key' ? value : distinctSummary(groupRows, 'market_key'),
     country: groupDef.key === 'country' ? value : distinctSummary(groupRows, 'country'),
@@ -3190,10 +3194,23 @@ function columnFilterLabel (row, col) {
   return formattedColumnCellValue(row, col) || columnFilterValue(row, col)
 }
 
+function productCategoryValue (row) {
+  return row?.kategori || row?.yas_grubu || ''
+}
+
+function productFirstGroupValue (row) {
+  return row?.seri || row?.urun_ilk_grubu || ''
+}
+
+function productMainGroupValue (row) {
+  return row?.urun_ana_grubu || ''
+}
+
 function rawProductCellValue (row, name) {
   switch (name) {
-    case 'urun_ilk_grubu': return row.urun_ilk_grubu || row.yas_grubu || ''
-    case 'urun_ana_grubu': return row.urun_ana_grubu || row.seri || ''
+    case 'kategori': return productCategoryValue(row)
+    case 'urun_ilk_grubu': return productFirstGroupValue(row)
+    case 'urun_ana_grubu': return productMainGroupValue(row)
     case 'market_key': return displayMarketName(row.market_key)
     case 'performance_bucket': return bucketLabel(row.performance_bucket)
     default: return row[name]
@@ -3203,8 +3220,9 @@ function rawProductCellValue (row, name) {
 function rawColumnCellValue (row, col) {
   const name = col?.name || col
   switch (name) {
-    case 'urun_ilk_grubu': return row.urun_ilk_grubu || row.yas_grubu || ''
-    case 'urun_ana_grubu': return row.urun_ana_grubu || row.seri || ''
+    case 'kategori': return productCategoryValue(row)
+    case 'urun_ilk_grubu': return productFirstGroupValue(row)
+    case 'urun_ana_grubu': return productMainGroupValue(row)
     case 'market_key': return displayMarketName(row.market_key)
     case 'performance_bucket': return bucketLabel(row.performance_bucket)
     case 'is_overdue': return row.is_overdue ? 'Evet' : 'Hayır'
@@ -3216,6 +3234,58 @@ function rawColumnCellValue (row, col) {
   }
 }
 
+function attachColumnSorts (targetColumns) {
+  targetColumns.forEach(col => {
+    if (!col || col.name === 'image') return
+    col.sortable = col.sortable !== false
+    col.sort = (_a, _b, rowA, rowB) => compareColumnSortValues(sortValueForColumn(rowA, col), sortValueForColumn(rowB, col))
+  })
+}
+
+function sortValueForColumn (row, col) {
+  const name = col?.name || col
+  const raw = rawColumnCellValue(row, col)
+  const direct = row?.[name]
+  if (typeof direct === 'number' && Number.isFinite(direct)) return direct
+  if (typeof raw === 'number' && Number.isFinite(raw)) return raw
+  if (direct instanceof Date) return direct.getTime()
+  if (raw instanceof Date) return raw.getTime()
+  if (typeof direct === 'boolean') return direct ? 1 : 0
+  if (typeof raw === 'boolean') return raw ? 1 : 0
+
+  if (isNumericSortColumn(name, col)) {
+    const numeric = parseSortNumber(direct ?? raw)
+    return Number.isFinite(numeric) ? numeric : 0
+  }
+
+  return String(raw ?? '').trim().toLocaleLowerCase('tr-TR')
+}
+
+function compareColumnSortValues (left, right) {
+  const leftNumber = typeof left === 'number' && Number.isFinite(left)
+  const rightNumber = typeof right === 'number' && Number.isFinite(right)
+  if (leftNumber && rightNumber) return left - right
+  return String(left ?? '').localeCompare(String(right ?? ''), 'tr', { numeric: true, sensitivity: 'base' })
+}
+
+function isNumericSortColumn (name, col) {
+  return col?.align === 'right' || isMoneyField(name) || isPercentField(name) || isIntegerField(name) || isDecimalField(name)
+}
+
+function parseSortNumber (value) {
+  if (typeof value === 'number') return value
+  if (value === null || value === undefined || value === '') return NaN
+  const text = String(value).trim()
+  if (!text) return NaN
+  const normalized = text
+    .replace(/\s/g, '')
+    .replace(/[%$₺€£]/g, '')
+    .replace(/\.(?=\d{3}(\D|$))/g, '')
+    .replace(/,/g, '.')
+    .replace(/[^\d.-]/g, '')
+  return Number(normalized)
+}
+
 function formattedColumnCellValue (row, col) {
   if (typeof col?.field === 'function') return col.field(row)
   return formatProductCell(row, col?.name || col)
@@ -3225,6 +3295,7 @@ function formatTableCell (row, colOrName) {
   const col = typeof colOrName === 'object' ? colOrName : null
   const name = col?.name || colOrName
   if (name === 'image') return ''
+  if (['kategori', 'urun_ilk_grubu', 'urun_ana_grubu'].includes(name)) return rawProductCellValue(row, name) || ''
   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'
@@ -3305,10 +3376,12 @@ function formatProductCell (row, name) {
     case 'gross_margin_90d':
     case 'gross_margin_180d':
       return formatPercent(row[name])
+    case 'kategori':
+      return productCategoryValue(row)
     case 'urun_ilk_grubu':
-      return row.urun_ilk_grubu || row.yas_grubu || ''
+      return productFirstGroupValue(row)
     case 'urun_ana_grubu':
-      return row.urun_ana_grubu || row.seri || ''
+      return productMainGroupValue(row)
     case 'market_key':
       return displayMarketName(row.market_key)
     default:
@@ -3791,9 +3864,7 @@ async function reload () {
       timedProductPerformanceGet('product-kpi', '/pricing/product-performance', {
         params: {
           page: 1,
-          limit: productKpiFetchLimit,
-          sort_by: pagination.value.sortBy || undefined,
-          descending: pagination.value.descending ? 'true' : 'false'
+          limit: productKpiFetchLimit
         },
         timeout: 60000
       }),
@@ -3826,7 +3897,6 @@ async function reload () {
     salesBreakdownTabKeys.forEach((tabKey, index) => {
       salesBreakdownRows[tabKey] = (Array.isArray(salesBreakdownResp[index]?.data) ? salesBreakdownResp[index].data : []).map(normalizeSalesBreakdownRow)
     })
-    pagination.value.rowsNumber = Number(listResp?.data?.total_count || 0)
     if (activeTab.value === 'order_product_customers') {
       await loadOrderProductCustomers(false)
     }
@@ -3886,11 +3956,6 @@ async function loadOrderAnalysis (showLoading = true) {
   }
 }
 
-function onRequest (props) {
-  pagination.value = { ...pagination.value, ...props.pagination }
-  reload()
-}
-
 function bucketLabel (value) {
   return bucketOptions.find(x => x.value === value)?.label || value || '-'
 }