Merge remote-tracking branch 'origin/master'

ui/src/pages/statementofaccount.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-page v-if="canReadFinance" class="q-pa-md page-col">
+  <q-page v-if="canReadFinance" class="q-pa-md page-col statement-page">
 
     <!-- 🔹 Cari Kod / İsim (sabit) -->
     <div class="filter-sticky">
@@ -163,19 +163,21 @@
 
       <!-- Ana Tablo -->
       <q-table
-        class="sticky-table"
+        class="sticky-table statement-table"
         title="Hareketler"
         :rows="statementheaderStore.groupedRows"
         :columns="columns"
         :visible-columns="visibleColumns"
-        :row-key="row => row.OrderHeaderID + '_' + row.OrderNumber"
+        :row-key="rowKeyFn"
 
         flat
         bordered
         dense
+        hide-bottom
+        wrap-cells
         :rows-per-page-options="[0]"
         :loading="statementheaderStore.loading"
-        :table-style="{ tableLayout: 'auto', minWidth: '1600px' }"
+        :table-style="{ tableLayout: 'fixed', width: '100%' }"
       >
         <template #body="props">
 
@@ -542,3 +544,100 @@ async function CurrheadDownload() {
 }
 
 </script>
+
+<style scoped>
+.statement-page {
+  height: calc(100vh - 56px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.table-scroll {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.sticky-bar {
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  flex: 0 0 auto;
+}
+
+.statement-table {
+  flex: 1;
+  min-height: 0;
+}
+
+.statement-table :deep(.q-table__container) {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.statement-table :deep(.q-table__top) {
+  flex: 0 0 auto;
+}
+
+.statement-table :deep(.q-table__middle) {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto !important;
+  max-height: none !important;
+}
+
+.statement-table :deep(thead th) {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: #fff;
+}
+
+.statement-table :deep(th),
+.statement-table :deep(td) {
+  padding: 3px 6px !important;
+  font-size: 11px !important;
+  line-height: 1.2 !important;
+}
+
+.statement-table :deep(td) {
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  max-width: 120px;
+}
+
+.statement-table :deep(td[data-col="aciklama"]),
+.statement-table :deep(th[data-col="aciklama"]) {
+  max-width: 220px;
+}
+
+.statement-table :deep(.resizable-cell-content) {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  white-space: normal !important;
+}
+
+@media (max-width: 1366px) {
+  .statement-table :deep(th),
+  .statement-table :deep(td) {
+    font-size: 10px !important;
+    padding: 2px 4px !important;
+  }
+
+  .statement-table :deep(td) {
+    max-width: 100px;
+  }
+
+  .statement-table :deep(td[data-col="aciklama"]),
+  .statement-table :deep(th[data-col="aciklama"]) {
+    max-width: 180px;
+  }
+}
+</style>