add: pagination

Frontend/Controllers/BooksController.cs

@@ -13,10 +13,24 @@ namespace Frontend.Controllers
             _apiClient = apiClient;
         }
 
-        public async Task<IActionResult> Index()
+        public async Task<IActionResult> Index(int page = 1)
         {
-            var books = await _apiClient.GetBooksAsync();
-            return View(books);
+            const int pageSize = 8;
+            var allBooks = await _apiClient.GetBooksAsync() ?? Enumerable.Empty<BookDto>();
+            var totalCount = allBooks.Count();
+            var totalPages = (int)Math.Ceiling(totalCount / (double)pageSize);
+            page = Math.Max(1, Math.Min(page, Math.Max(1, totalPages)));
+
+            var pagedResult = new Frontend.Models.PagedResult<BookDto>
+            {
+                Items = allBooks.Skip((page - 1) * pageSize).Take(pageSize),
+                CurrentPage = page,
+                TotalPages = totalPages,
+                TotalCount = totalCount,
+                PageSize = pageSize
+            };
+
+            return View(pagedResult);
         }
 
         public async Task<IActionResult> Details(int id)

Frontend/Controllers/MembersController.cs

@@ -15,10 +15,24 @@ namespace Frontend.Controllers
             _apiClient = apiClient;
         }
 
-        public async Task<IActionResult> Index()
+        public async Task<IActionResult> Index(int page = 1)
         {
-            var users = await _apiClient.GetUsersAsync();
-            return View(users);
+            const int pageSize = 10;
+            var allUsers = await _apiClient.GetUsersAsync() ?? Enumerable.Empty<Frontend.Models.Dtos.UserDto>();
+            var totalCount = allUsers.Count();
+            var totalPages = (int)Math.Ceiling(totalCount / (double)pageSize);
+            page = Math.Max(1, Math.Min(page, Math.Max(1, totalPages)));
+
+            var pagedResult = new Frontend.Models.PagedResult<Frontend.Models.Dtos.UserDto>
+            {
+                Items = allUsers.Skip((page - 1) * pageSize).Take(pageSize),
+                CurrentPage = page,
+                TotalPages = totalPages,
+                TotalCount = totalCount,
+                PageSize = pageSize
+            };
+
+            return View(pagedResult);
         }
 
         public async Task<IActionResult> Details(int id)

Frontend/Models/PagedResult.cs

@@ -0,0 +1,14 @@
+namespace Frontend.Models
+{
+    public class PagedResult<T>
+    {
+        public IEnumerable<T> Items { get; set; } = Enumerable.Empty<T>();
+        public int CurrentPage { get; set; }
+        public int TotalPages { get; set; }
+        public int TotalCount { get; set; }
+        public int PageSize { get; set; }
+
+        public bool HasPreviousPage => CurrentPage > 1;
+        public bool HasNextPage => CurrentPage < TotalPages;
+    }
+}

Frontend/Views/Books/Index.cshtml

@@ -1,4 +1,4 @@
-@model IEnumerable<Frontend.Models.Dtos.BookDto>
+@model Frontend.Models.PagedResult<Frontend.Models.Dtos.BookDto>
 @{
     ViewData["Title"] = "Books Catalog";
 }
@@ -6,7 +6,10 @@
 <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
     <div>
         <h1 class="text-3xl font-bold tracking-tight text-slate-900">Books Catalog</h1>
-        <p class="mt-2 text-slate-500">Explore and discover your next great read.</p>
+        <p class="mt-2 text-slate-500">
+            Explore and discover your next great read.
+            <span class="ml-2 text-xs text-slate-400">(@Model.TotalCount total)</span>
+        </p>
     </div>
     @if (User.IsInRole("Librarian"))
     {
@@ -33,8 +36,8 @@
 </div>
 
 <!-- Book Grid -->
-<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5 gap-8">
-    @foreach (var book in Model)
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-8">
+    @foreach (var book in Model.Items)
     {
         <div class="group card hover:shadow-lg transition-all duration-300">
             <div class="relative aspect-[2/3] w-full bg-slate-100 flex items-center justify-center text-slate-300 overflow-hidden text-center p-4">
@@ -78,3 +81,77 @@
         </div>
     }
 </div>
+
+@* Pagination *@
+@if (Model.TotalPages > 1)
+{
+    <div class="mt-10 flex items-center justify-between">
+        <p class="text-sm text-slate-500">
+            Showing <span class="font-medium text-slate-700">@((Model.CurrentPage - 1) * Model.PageSize + 1)</span>
+            –
+            <span class="font-medium text-slate-700">@(Math.Min(Model.CurrentPage * Model.PageSize, Model.TotalCount))</span>
+            of <span class="font-medium text-slate-700">@Model.TotalCount</span> books
+        </p>
+        <nav class="flex items-center gap-1" aria-label="Pagination">
+            @* Previous *@
+            @if (Model.HasPreviousPage)
+            {
+                <a asp-action="Index" asp-route-page="@(Model.CurrentPage - 1)"
+                   class="inline-flex items-center px-3 py-1.5 rounded-md border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">
+                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                    </svg>
+                    Prev
+                </a>
+            }
+            else
+            {
+                <span class="inline-flex items-center px-3 py-1.5 rounded-md border border-slate-100 text-sm font-medium text-slate-300 cursor-not-allowed select-none">
+                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                    </svg>
+                    Prev
+                </span>
+            }
+
+            @* Page numbers *@
+            @for (int p = 1; p <= Model.TotalPages; p++)
+            {
+                if (p == Model.CurrentPage)
+                {
+                    <span class="inline-flex items-center justify-center w-8 h-8 rounded-md bg-slate-900 text-white text-sm font-semibold">@p</span>
+                }
+                else if (p == 1 || p == Model.TotalPages || (p >= Model.CurrentPage - 2 && p <= Model.CurrentPage + 2))
+                {
+                    <a asp-action="Index" asp-route-page="@p"
+                       class="inline-flex items-center justify-center w-8 h-8 rounded-md border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">@p</a>
+                }
+                else if (p == Model.CurrentPage - 3 || p == Model.CurrentPage + 3)
+                {
+                    <span class="inline-flex items-center justify-center w-8 h-8 text-sm text-slate-400">…</span>
+                }
+            }
+
+            @* Next *@
+            @if (Model.HasNextPage)
+            {
+                <a asp-action="Index" asp-route-page="@(Model.CurrentPage + 1)"
+                   class="inline-flex items-center px-3 py-1.5 rounded-md border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">
+                    Next
+                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                </a>
+            }
+            else
+            {
+                <span class="inline-flex items-center px-3 py-1.5 rounded-md border border-slate-100 text-sm font-medium text-slate-300 cursor-not-allowed select-none">
+                    Next
+                    <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                    </svg>
+                </span>
+            }
+        </nav>
+    </div>
+}

Frontend/Views/Members/Index.cshtml

@@ -1,4 +1,4 @@
-@model IEnumerable<Frontend.Models.Dtos.UserDto>
+@model Frontend.Models.PagedResult<Frontend.Models.Dtos.UserDto>
 @{
     ViewData["Title"] = "Members Directory";
 }
@@ -6,7 +6,10 @@
 <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-8">
     <div>
         <h1 class="text-3xl font-bold tracking-tight text-slate-900">Members Directory</h1>
-        <p class="mt-2 text-slate-500">Manage library members and administrator accounts.</p>
+        <p class="mt-2 text-slate-500">
+            Manage library members and administrator accounts.
+            <span class="ml-2 text-xs text-slate-400">(@Model.TotalCount total)</span>
+        </p>
     </div>
     <div class="flex items-center gap-3">
         <a asp-action="Create" class="btn-primary">
@@ -29,7 +32,7 @@
                 </tr>
             </thead>
             <tbody class="bg-white divide-y divide-slate-200">
-                @foreach (var user in Model)
+                @foreach (var user in Model.Items)
                 {
                     <tr class="hover:bg-slate-50 transition-colors">
                         <td class="px-6 py-4 whitespace-nowrap">
@@ -88,4 +91,78 @@
             </tbody>
         </table>
     </div>
+
+    @* Pagination *@
+    @if (Model.TotalPages > 1)
+    {
+        <div class="px-6 py-4 border-t border-slate-200 flex items-center justify-between bg-white">
+            <p class="text-sm text-slate-500">
+                Showing <span class="font-medium text-slate-700">@((Model.CurrentPage - 1) * Model.PageSize + 1)</span>
+                –
+                <span class="font-medium text-slate-700">@(Math.Min(Model.CurrentPage * Model.PageSize, Model.TotalCount))</span>
+                of <span class="font-medium text-slate-700">@Model.TotalCount</span> members
+            </p>
+            <nav class="flex items-center gap-1" aria-label="Pagination">
+                @* Previous *@
+                @if (Model.HasPreviousPage)
+                {
+                    <a asp-action="Index" asp-route-page="@(Model.CurrentPage - 1)"
+                       class="inline-flex items-center px-3 py-1.5 rounded-md border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">
+                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                        </svg>
+                        Prev
+                    </a>
+                }
+                else
+                {
+                    <span class="inline-flex items-center px-3 py-1.5 rounded-md border border-slate-100 text-sm font-medium text-slate-300 cursor-not-allowed select-none">
+                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+                        </svg>
+                        Prev
+                    </span>
+                }
+
+                @* Page numbers *@
+                @for (int p = 1; p <= Model.TotalPages; p++)
+                {
+                    if (p == Model.CurrentPage)
+                    {
+                        <span class="inline-flex items-center justify-center w-8 h-8 rounded-md bg-slate-900 text-white text-sm font-semibold">@p</span>
+                    }
+                    else if (p == 1 || p == Model.TotalPages || (p >= Model.CurrentPage - 2 && p <= Model.CurrentPage + 2))
+                    {
+                        <a asp-action="Index" asp-route-page="@p"
+                           class="inline-flex items-center justify-center w-8 h-8 rounded-md border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">@p</a>
+                    }
+                    else if (p == Model.CurrentPage - 3 || p == Model.CurrentPage + 3)
+                    {
+                        <span class="inline-flex items-center justify-center w-8 h-8 text-sm text-slate-400">…</span>
+                    }
+                }
+
+                @* Next *@
+                @if (Model.HasNextPage)
+                {
+                    <a asp-action="Index" asp-route-page="@(Model.CurrentPage + 1)"
+                       class="inline-flex items-center px-3 py-1.5 rounded-md border border-slate-200 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-slate-900 transition-colors">
+                        Next
+                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                        </svg>
+                    </a>
+                }
+                else
+                {
+                    <span class="inline-flex items-center px-3 py-1.5 rounded-md border border-slate-100 text-sm font-medium text-slate-300 cursor-not-allowed select-none">
+                        Next
+                        <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+                        </svg>
+                    </span>
+                }
+            </nav>
+        </div>
+    }
 </div>