Add incremental loading to manager and client lists

app/pages/clients/[id].vue

@@ -46,6 +46,18 @@ const currentRequest = computed(() =>
 
 const currentUserOrders = computed<ManagerOrderItem[]>(() => userOrdersQuery.result.value?.managerOrders ?? []);
 
+const {
+  canLoadMore: canLoadMoreUserOrders,
+  loadMore: loadMoreUserOrders,
+  loadMoreSentinel: loadMoreUserOrdersSentinel,
+  remainingCount: remainingUserOrdersCount,
+  visibleItems: visibleUserOrders,
+} = useIncrementalList(currentUserOrders, {
+  pageSize: 24,
+  enabled: computed(() => !isRequestMode.value),
+  resetKeys: [entityId, isRequestMode],
+});
+
 function userInitials(fullName: string) {
   const parts = fullName
     .trim()
@@ -213,7 +225,7 @@ async function rejectRequest() {
           </div>
           <div v-else class="mt-4 space-y-3">
             <OrdersOrderSummaryCard
-              v-for="order in currentUserOrders"
+              v-for="order in visibleUserOrders"
               :key="order.id"
               :to="`/client-orders/${order.id}`"
               :code="order.code"
@@ -222,6 +234,16 @@ async function rejectRequest() {
               :total-price="order.totalPrice"
               :items="order.items"
             />
+
+            <div
+              v-if="canLoadMoreUserOrders"
+              ref="loadMoreUserOrdersSentinel"
+              class="flex justify-center pt-2"
+            >
+              <button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMoreUserOrders">
+                Показать ещё {{ Math.min(remainingUserOrdersCount, 24) }}
+              </button>
+            </div>
           </div>
         </div>
       </template>

app/pages/clients/index.vue

@@ -79,6 +79,30 @@ const filteredRequests = computed(() => {
   });
 });
 
+const {
+  canLoadMore: canLoadMoreUsers,
+  loadMore: loadMoreUsers,
+  loadMoreSentinel: loadMoreUsersSentinel,
+  remainingCount: remainingUsersCount,
+  visibleItems: visibleUsers,
+} = useIncrementalList(filteredUsers, {
+  pageSize: 24,
+  enabled: computed(() => activeTab.value === 'users'),
+  resetKeys: [search, activeTab],
+});
+
+const {
+  canLoadMore: canLoadMoreRequests,
+  loadMore: loadMoreRequests,
+  loadMoreSentinel: loadMoreRequestsSentinel,
+  remainingCount: remainingRequestsCount,
+  visibleItems: visibleRequests,
+} = useIncrementalList(filteredRequests, {
+  pageSize: 24,
+  enabled: computed(() => activeTab.value === 'requests'),
+  resetKeys: [search, activeTab],
+});
+
 function userInitials(fullName: string) {
   const parts = fullName
     .trim()
@@ -132,15 +156,27 @@ function userInitials(fullName: string) {
       <div v-else-if="filteredUsers.length === 0" class="manager-empty-state">
         Пользователи по текущему запросу не найдены.
       </div>
-      <div v-else class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
-        <UsersGridCard
-          v-for="user in filteredUsers"
-          :key="user.id"
-          :to="`/clients/${user.id}`"
-          :full-name="user.fullName"
-          :avatar-src="messengerConnectionAvatarSrc(user.telegramConnection)"
-          :initials="userInitials(user.fullName)"
-        />
+      <div v-else class="space-y-4">
+        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-6">
+          <UsersGridCard
+            v-for="user in visibleUsers"
+            :key="user.id"
+            :to="`/clients/${user.id}`"
+            :full-name="user.fullName"
+            :avatar-src="messengerConnectionAvatarSrc(user.telegramConnection)"
+            :initials="userInitials(user.fullName)"
+          />
+        </div>
+
+        <div
+          v-if="canLoadMoreUsers"
+          ref="loadMoreUsersSentinel"
+          class="flex justify-center"
+        >
+          <button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMoreUsers">
+            Показать ещё {{ Math.min(remainingUsersCount, 24) }}
+          </button>
+        </div>
       </div>
     </template>
 
@@ -151,27 +187,39 @@ function userInitials(fullName: string) {
       <div v-else-if="filteredRequests.length === 0" class="manager-empty-state">
         Заявки по текущему запросу не найдены.
       </div>
-      <div v-else class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
-        <NuxtLink
-          v-for="request in filteredRequests"
-          :key="request.id"
-          :to="`/clients/${request.id}?tab=requests`"
-          class="surface-card surface-card-interactive rounded-3xl p-5"
-        >
-          <div class="flex items-start justify-between gap-3">
-            <div class="space-y-1">
-              <h2 class="text-lg font-bold text-[#123824]">{{ request.companyName }}</h2>
-              <p class="text-sm text-[#466653]">{{ request.contactName }}</p>
+      <div v-else class="space-y-4">
+        <div class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
+          <NuxtLink
+            v-for="request in visibleRequests"
+            :key="request.id"
+            :to="`/clients/${request.id}?tab=requests`"
+            class="surface-card surface-card-interactive rounded-3xl p-5"
+          >
+            <div class="flex items-start justify-between gap-3">
+              <div class="space-y-1">
+                <h2 class="text-lg font-bold text-[#123824]">{{ request.companyName }}</h2>
+                <p class="text-sm text-[#466653]">{{ request.contactName }}</p>
+              </div>
+              <span :class="requestStatusClass(request.status)">{{ requestStatusLabel(request.status) }}</span>
             </div>
-            <span :class="requestStatusClass(request.status)">{{ requestStatusLabel(request.status) }}</span>
-          </div>
 
-          <div class="mt-4 space-y-2 text-sm text-[#355947]">
-            <p>{{ request.email }}</p>
-            <p v-if="request.inn">ИНН: {{ request.inn }}</p>
-            <p>{{ new Date(request.createdAt).toLocaleDateString() }}</p>
-          </div>
-        </NuxtLink>
+            <div class="mt-4 space-y-2 text-sm text-[#355947]">
+              <p>{{ request.email }}</p>
+              <p v-if="request.inn">ИНН: {{ request.inn }}</p>
+              <p>{{ new Date(request.createdAt).toLocaleDateString() }}</p>
+            </div>
+          </NuxtLink>
+        </div>
+
+        <div
+          v-if="canLoadMoreRequests"
+          ref="loadMoreRequestsSentinel"
+          class="flex justify-center"
+        >
+          <button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMoreRequests">
+            Показать ещё {{ Math.min(remainingRequestsCount, 24) }}
+          </button>
+        </div>
       </div>
     </template>
   </section>