Add incremental loading to manager and client lists

app/pages/client-orders/index.vue

@@ -143,6 +143,18 @@ const searchedOrders = computed<ManagerOrderItem[]>(() => {
 
 const filteredOrders = computed<ManagerOrderItem[]>(() => searchedOrders.value.filter((order) => matchesFilter(order)));
 
+const {
+  canLoadMore,
+  loadMore,
+  loadMoreSentinel,
+  remainingCount,
+  visibleItems: visibleOrders,
+} = useIncrementalList(filteredOrders, {
+  pageSize: 24,
+  enabled: computed(() => viewMode.value === 'list'),
+  resetKeys: [search, statusFilter, viewMode],
+});
+
 function escapeHtml(value: string) {
   return String(value)
     .replaceAll('&', '&amp;')
@@ -315,7 +327,7 @@ const calendarOptions = computed(() => ({
 
     <div v-else class="space-y-4">
       <OrdersOrderSummaryCard
-        v-for="order in filteredOrders"
+        v-for="order in visibleOrders"
         :key="order.id"
         :to="`/client-orders/${order.id}`"
         :code="order.code"
@@ -324,6 +336,16 @@ const calendarOptions = computed(() => ({
         :total-price="order.totalPrice"
         :items="order.items"
       />
+
+      <div
+        v-if="canLoadMore"
+        ref="loadMoreSentinel"
+        class="flex justify-center pt-2"
+      >
+        <button class="btn btn-outline border-[#d7e9de] bg-white" @click="loadMore">
+          Показать ещё {{ Math.min(remainingCount, 24) }}
+        </button>
+      </div>
     </div>
   </section>
 </template>