Remove laravel pagination from contract table / ClientCase view and used replacing it with client pagination

app/Http/Controllers/ClientCaseContoller.php

@@ -825,9 +825,8 @@ public function show(ClientCase $clientCase)
         }
 
         // Get contracts using service
-        $contractsPerPage = request()->integer('contracts_per_page', 10);
+        $contracts = $this->caseDataService->getContracts($case, $segmentId);
-        $contracts = $this->caseDataService->getContracts($case, $segmentId, $contractsPerPage);
+        $contractIds = collect($contracts)->pluck('id')->all();
-        $contractIds = collect($contracts->items())->pluck('id')->all();
 
         // Get activities using service
         $activitiesPerPage = request()->integer('activities_per_page', 15);

app/Services/ClientCaseDataService.php

@@ -11,9 +11,9 @@
 class ClientCaseDataService
 {
     /**
-     * Get paginated contracts for a client case with optional segment filtering.
+     * Get contracts for a client case with optional segment filtering.
      */
-    public function getContracts(ClientCase $clientCase, ?int $segmentId = null, int $perPage = 50): LengthAwarePaginator
+    public function getContracts(ClientCase $clientCase, ?int $segmentId = null): Collection
     {
         $query = $clientCase->contracts()
             ->select(['id', 'uuid', 'reference', 'start_date', 'end_date', 'description', 'meta', 'active', 'type_id', 'client_case_id', 'created_at'])
@@ -40,9 +40,8 @@ public function getContracts(ClientCase $clientCase, ?int $segmentId = null, int
             $query->forSegment($segmentId);
         }
 
-        $perPage = max(1, min(100, $perPage));
 
-        return $query->paginate($perPage, ['*'], 'contracts_page')->withQueryString();
+        return $query->get();
     }
 
     /**

resources/js/Components/DataTable/DataTableNew2.vue

@@ -11,7 +11,7 @@ import {
 } from "@tanstack/vue-table";
 import { valueUpdater } from "@/lib/utils";
 import DataTableColumnHeader from "./DataTableColumnHeader.vue";
-import DataTablePagination from "./DataTablePagination.vue";
+import DataTablePaginationClient from "./DataTablePaginationClient.vue";
 import DataTableViewOptions from "./DataTableViewOptions.vue";
 import DataTableToolbar from "./DataTableToolbar.vue";
 import SkeletonTable from "../Skeleton/SkeletonTable.vue";
@@ -618,7 +618,14 @@ defineExpose({
 
       <!-- Client-side pagination -->
       <template v-else>
-        <DataTablePagination :table="table" />
+        <DataTablePaginationClient
+          :current-page="table.getState().pagination.pageIndex"
+          :last-page="table.getPageCount()"
+          :total="table.getFilteredRowModel().rows.length"
+          :showing-from="table.getFilteredSelectedRowModel().rows.length"
+          :showing-to="table.getFilteredRowModel().rows.length"
+          :table="table"
+        />
       </template>
     </div>
   </div>

resources/js/Components/DataTable/DataTablePaginationClient.vue

@@ -23,6 +23,7 @@ const props = defineProps({
   showGoto: { type: Boolean, default: true },
   maxPageLinks: { type: Number, default: 5 },
   perPage: { type: Number, default: 10 },
+  table: { type: Object, required: true },
 });
 
 const emit = defineEmits(["update:page"]);
@@ -34,7 +35,7 @@ function goToPageInput() {
   const n = Number(raw);
   if (!Number.isFinite(n)) return;
   const target = Math.max(1, Math.min(props.lastPage, Math.floor(n)));
-  if (target !== props.currentPage) setPage(target);
+  if (target !== props.currentPage) props.table.setPageIndex(target - 1);
   gotoInput.value = "";
 }
 
@@ -136,14 +137,17 @@ function setPage(p) {
       >
         <PaginationContent>
           <!-- First -->
-          <PaginationFirst :disabled="currentPage <= 1" @click="setPage(1)">
+          <PaginationFirst
+            :disabled="!table.getCanPreviousPage()"
+            @click="table.setPageIndex(0)"
+          >
             <ChevronsLeft />
           </PaginationFirst>
 
           <!-- Previous -->
           <PaginationPrevious
-            :disabled="currentPage <= 1"
+            :disabled="!table.getCanPreviousPage()"
-            @click="setPage(currentPage - 1)"
+            @click="table.previousPage()"
           >
             <ChevronLeft />
           </PaginationPrevious>
@@ -154,25 +158,22 @@ function setPage(p) {
             <PaginationItem
               v-else
               :value="item"
-              :is-active="currentPage === item"
+              :is-active="currentPage === index"
-              @click="setPage(item)"
+              @click="table.setPageIndex(index)"
             >
               {{ item }}
             </PaginationItem>
           </template>
 
           <!-- Next -->
-          <PaginationNext
+          <PaginationNext :disabled="!table.getCanNextPage()" @click="table.nextPage()">
-            :disabled="currentPage >= lastPage"
-            @click="setPage(currentPage + 1)"
-          >
             <ChevronRight />
           </PaginationNext>
 
           <!-- Last -->
           <PaginationLast
-            :disabled="currentPage >= lastPage"
+            :disabled="!table.getCanNextPage()"
-            @click="setPage(lastPage)"
+            @click="table.setPageIndex(table.getPageCount() - 1)"
           >
             <ChevronsRight />
           </PaginationLast>
@@ -191,7 +192,7 @@ function setPage(p) {
             :max="lastPage"
             inputmode="numeric"
             class="w-10 h-full text-sm text-center bg-transparent border-0 outline-none focus:outline-none [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
-            :placeholder="String(currentPage)"
+            :placeholder="String(currentPage + 1)"
             aria-label="Pojdi na stran"
             @keyup.enter="goToPageInput"
             @blur="goToPageInput"

resources/js/Pages/Cases/Partials/ContractTable.vue

@@ -489,7 +489,7 @@ const availableSegmentsCount = computed(() => {
       :empty-icon="faFolderOpen"
       empty-text="Ni pogodb"
       empty-description="Za ta primer še ni ustvarjenih pogodb. Ustvarite novo pogodbo za začetek."
-      :show-pagination="false"
+      :show-pagination="true"
       :show-toolbar="true"
       :hoverable="true"
     >

resources/js/Pages/Cases/Show.vue

@@ -31,7 +31,7 @@ import {
 const props = defineProps({
   client: Object,
   client_case: Object,
-  contracts: Object, // Resource Collection with data/links/meta
+  contracts: { type: Array, default: () => [] }, // Resource Collection with data/links/meta
   activities: Object, // Resource Collection with data/links/meta
   contract_types: Array,
   account_types: { type: Array, default: () => [] },
@@ -46,7 +46,7 @@ const props = defineProps({
 
 // Extract contracts array from Resource Collection
 const contractsArray = computed(() => {
-  return props.contracts?.data || [];
+  return props.contracts || [];
 });
 
 // Contracts are always paginated now (Resource Collection)
@@ -356,19 +356,6 @@ const submitAttachSegment = () => {
               @create="openDrawerCreateContract"
               @attach-segment="openAttachSegment"
             />
-            <div v-if="contractsPaginated" class="border-t border-gray-200 p-4">
-              <Pagination
-                :links="contracts.links"
-                :from="contracts.from"
-                :to="contracts.to"
-                :total="contracts.total"
-                :per-page="contracts.per_page || 50"
-                :last-page="contracts.last_page"
-                :current-page="contracts.current_page"
-                per-page-param="contracts_per_page"
-                page-param="contracts_page"
-              />
-            </div>
           </div>
         </Card>
       </div>