add: books, borrowings, home, login, membership, register, reward, userinsights, wishlist, themes

Backend/Features/Loyalty/LoyaltyController.cs

@@ -24,6 +24,13 @@ namespace Backend.Features.Loyalty
             _context = context;
         }
 
+        [HttpGet("rewards")]
+        public async Task<IActionResult> GetRewards()
+        {
+            var rewards = await _loyaltyService.GetActiveRewardsAsync();
+            return Ok(rewards);
+        }
+
         // ── Member endpoints ──────────────────────────────────────────────────
 
         [HttpGet("my-account")]
@@ -32,8 +39,31 @@ namespace Backend.Features.Loyalty
             var userIdStr = User.FindFirst(ClaimTypes.NameIdentifier)?.Value;
             if (string.IsNullOrEmpty(userIdStr)) return Unauthorized();
 
+            // 2. Get user from DB to get Email/Mobile for potential registration
+            var user = await _context.Users.FindAsync(Guid.Parse(userIdStr));
+            if (user == null) return NotFound("User not found.");
+
+            // 3. Get Loyalty Account
             var account = await _loyaltyService.GetUserAccountAsync(userIdStr);
-            if (account == null) return NotFound("Loyalty account not found.");
+            
+            if (account == null)
+            {
+                // Auto-register if account not found
+                var registered = await _loyaltyService.RegisterUserAsync(userIdStr, user.Email, user.PhoneNumber ?? "0000000000");
+                if (registered)
+                {
+                    // Process a small signup bonus if it's their first time being linked
+                    await _loyaltyService.ProcessEventAsync(userIdStr, "SIGNUP", 20, $"LINK-{user.Id}", "Account Auto-Linked Bonus", user.Email, user.PhoneNumber);
+                    
+                    // Try lookup again
+                    account = await _loyaltyService.GetUserAccountAsync(userIdStr);
+                }
+            }
+
+            if (account == null)
+            {
+                return Ok(null); // Will show "Account Not Linked" in UI
+            }
             return Ok(account);
         }
 
@@ -55,7 +85,7 @@ namespace Backend.Features.Loyalty
             if (string.IsNullOrEmpty(userIdStr)) return Unauthorized();
 
             var redemptions = await _loyaltyService.GetUserRedemptionsAsync(userIdStr);
-            var pending = redemptions.Where(r => r.Status.Equals("Pending", StringComparison.OrdinalIgnoreCase));
+            var pending = redemptions.Where(r => string.Equals(r.Status, "Pending", StringComparison.OrdinalIgnoreCase));
             return Ok(pending);
         }
 

Backend/Features/Loyalty/LoyaltyService.cs

@@ -14,15 +14,15 @@ namespace Backend.Features.Loyalty
     public interface ILoyaltyService
     {
         Task<bool> RegisterUserAsync(string externalUserId, string email, string mobile);
-        Task<bool> ProcessEventAsync(string externalUserId, string eventKey, double eventValue, string referenceId, string description, string email, string mobile);
-        Task<AccountLookupResponse?> GetUserAccountAsync(string externalUserId);
+        Task<bool> ProcessEventAsync(string externalUserId, string eventKey, double eventValue, string? referenceId = null, string? description = null, string? email = null, string? mobile = null);
+        Task<LoyaltyAccountDto?> GetUserAccountAsync(string externalUserId);
         Task<(bool Success, string Message)> ClaimRewardAsync(string externalUserId, string rewardId, string notes);
         Task<IEnumerable<LoyaltyRedemptionDto>> GetPendingRedemptionsAsync();
         Task<IEnumerable<LoyaltyRedemptionDto>> GetUserRedemptionsAsync(string externalUserId);
         Task<IEnumerable<LoyaltyRedemptionDto>> GetRedemptionsHistoryAsync();
         Task<bool> UpdateRedemptionStatusAsync(string redemptionId, string status);
         Task<IEnumerable<PointHistoryEntryDto>> GetPointsHistoryAsync(string accountId);
-        Task<IEnumerable<PointHistoryEntryDto>> GetAllMembersPointsHistoryAsync();
+        Task<IEnumerable<LoyaltyRewardDto>> GetActiveRewardsAsync();
     }
 
     public class LoyaltyService : ILoyaltyService
@@ -45,23 +45,19 @@ namespace Backend.Features.Loyalty
         {
             try
             {
+                _httpClient.DefaultRequestHeaders.Clear();
+                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
+
                 var payload = new
                 {
-                    systemId = SystemId,
                     externalUserId = externalUserId,
                     email = email,
                     mobile = mobile,
-                    tier = "Member" // Default
+                    systemId = SystemId
                 };
 
                 var response = await _httpClient.PostAsJsonAsync("/api/v1/accounts", payload);
-                if (!response.IsSuccessStatusCode)
-                {
-                    var error = await response.Content.ReadAsStringAsync();
-                    _logger.LogWarning($"Failed to register user in loyalty system: {error}");
-                    return false;
-                }
-                return true;
+                return response.IsSuccessStatusCode;
             }
             catch (Exception ex)
             {
@@ -70,12 +66,16 @@ namespace Backend.Features.Loyalty
             }
         }
 
-        public async Task<bool> ProcessEventAsync(string externalUserId, string eventKey, double eventValue, string referenceId, string description, string email, string mobile)
+        public async Task<bool> ProcessEventAsync(string externalUserId, string eventKey, double eventValue, string? referenceId = null, string? description = null, string? email = null, string? mobile = null)
         {
             try
             {
+                _httpClient.DefaultRequestHeaders.Clear();
+                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
+
                 var payload = new
                 {
+                    systemId = SystemId,
                     externalUserId = externalUserId,
                     eventKey = eventKey,
                     eventValue = eventValue,
@@ -85,14 +85,8 @@ namespace Backend.Features.Loyalty
                     mobile = mobile
                 };
 
-                var response = await _httpClient.PostAsJsonAsync("/api/v1/events/process", payload);
-                if (!response.IsSuccessStatusCode)
-                {
-                    var error = await response.Content.ReadAsStringAsync();
-                    _logger.LogWarning($"Failed to process loyalty event {eventKey} for user {externalUserId}: {error}");
-                    return false;
-                }
-                return true;
+                var response = await _httpClient.PostAsJsonAsync($"/api/v1/events/process?systemId={SystemId}", payload);
+                return response.IsSuccessStatusCode;
             }
             catch (Exception ex)
             {
@@ -101,26 +95,32 @@ namespace Backend.Features.Loyalty
             }
         }
 
-        public async Task<AccountLookupResponse?> GetUserAccountAsync(string externalUserId)
+        public async Task<LoyaltyAccountDto?> GetUserAccountAsync(string externalUserId)
         {
             try
             {
-                var response = await _httpClient.GetAsync($"/api/v1/accounts/lookup/{SystemId}/{externalUserId}");
+                _httpClient.DefaultRequestHeaders.Clear();
+                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
+
+                var response = await _httpClient.GetAsync($"/api/v1/accounts/lookup/{externalUserId}?systemId={SystemId}");
+                
                 if (response.IsSuccessStatusCode)
                 {
-                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
-                    var account = await response.Content.ReadFromJsonAsync<AccountLookupResponse>(options);
+                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
+                    var account = await response.Content.ReadFromJsonAsync<LoyaltyAccountDto>(options);
+                    
                     if (account != null && string.IsNullOrWhiteSpace(account.Id) && !string.IsNullOrWhiteSpace(account.AccountId))
                     {
                         account.Id = account.AccountId;
                     }
                     return account;
                 }
+                
                 return null;
             }
             catch (Exception ex)
             {
-                _logger.LogError(ex, $"Error fetching loyalty account for user {externalUserId}.");
+                _logger.LogError(ex, $"Error looking up loyalty account for {externalUserId}.");
                 return null;
             }
         }
@@ -131,36 +131,22 @@ namespace Backend.Features.Loyalty
             {
                 var payload = new
                 {
+                    systemId = SystemId,
                     externalUserId = externalUserId,
                     rewardId = rewardId,
                     notes = notes
                 };
 
-                var response = await _httpClient.PostAsJsonAsync("/api/v1/redemption/claim", payload);
-                if (response.IsSuccessStatusCode)
-                {
-                    return (true, "Reward claimed successfully!");
-                }
+                var response = await _httpClient.PostAsJsonAsync($"/api/v1/redemption/claim?systemId={SystemId}", payload);
+                if (response.IsSuccessStatusCode) return (true, "Reward claimed successfully!");
 
                 var error = await response.Content.ReadAsStringAsync();
-                _logger.LogWarning($"Failed to claim reward {rewardId} for user {externalUserId}: {error}");
-
-                try
-                {
-                    var errorDoc = JsonDocument.Parse(error);
-                    if (errorDoc.RootElement.TryGetProperty("message", out var msgElement))
-                    {
-                        return (false, msgElement.GetString() ?? "Failed to claim reward.");
-                    }
-                }
-                catch { }
-
-                return (false, string.IsNullOrEmpty(error) ? "Failed to claim reward." : error);
+                return (false, error);
             }
             catch (Exception ex)
             {
                 _logger.LogError(ex, "Error while claiming reward.");
-                return (false, "An error occurred while processing your request.");
+                return (false, "An error occurred.");
             }
         }
 
@@ -168,58 +154,56 @@ namespace Backend.Features.Loyalty
         {
             try
             {
-                var response = await _httpClient.GetAsync($"/api/v1/redemption/history/{SystemId}/{externalUserId}");
+                _httpClient.DefaultRequestHeaders.Clear();
+                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
+
+                var response = await _httpClient.GetAsync($"/api/v1/redemption/history/{externalUserId}?systemId={SystemId}");
                 if (response.IsSuccessStatusCode)
                 {
-                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
+                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
                     return await response.Content.ReadFromJsonAsync<IEnumerable<LoyaltyRedemptionDto>>(options) ?? Enumerable.Empty<LoyaltyRedemptionDto>();
                 }
                 return Enumerable.Empty<LoyaltyRedemptionDto>();
             }
-            catch (Exception ex)
-            {
-                _logger.LogError(ex, $"Error fetching redemptions for user {externalUserId}.");
-                return Enumerable.Empty<LoyaltyRedemptionDto>();
-            }
+            catch { return Enumerable.Empty<LoyaltyRedemptionDto>(); }
         }
 
         public async Task<IEnumerable<LoyaltyRedemptionDto>> GetPendingRedemptionsAsync()
         {
             try
             {
-                var response = await _httpClient.GetAsync("/api/v1/admin/redemptions/pending");
+                _httpClient.DefaultRequestHeaders.Clear();
+                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
+
+                var response = await _httpClient.GetAsync($"/api/v1/admin/redemptions/pending?systemId={SystemId}");
                 if (response.IsSuccessStatusCode)
                 {
-                    var rawJson = await response.Content.ReadAsStringAsync();
-                    _logger.LogInformation($"Raw Pending Redemptions JSON: {rawJson}");
-
-                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
-                    return JsonSerializer.Deserialize<IEnumerable<LoyaltyRedemptionDto>>(rawJson, options) ?? Enumerable.Empty<LoyaltyRedemptionDto>();
+                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
+                    return await response.Content.ReadFromJsonAsync<IEnumerable<LoyaltyRedemptionDto>>(options) ?? Enumerable.Empty<LoyaltyRedemptionDto>();
                 }
                 return Enumerable.Empty<LoyaltyRedemptionDto>();
             }
-            catch (Exception ex)
-            {
-                _logger.LogError(ex, "Error fetching pending redemptions.");
-                return Enumerable.Empty<LoyaltyRedemptionDto>();
-            }
+            catch { return Enumerable.Empty<LoyaltyRedemptionDto>(); }
         }
 
         public async Task<IEnumerable<LoyaltyRedemptionDto>> GetRedemptionsHistoryAsync()
         {
             try
             {
-                var response = await _httpClient.GetAsync("/api/v1/admin/redemptions/history");
+                _httpClient.DefaultRequestHeaders.Clear();
+                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
+
+                var response = await _httpClient.GetAsync($"/api/v1/admin/redemptions/history?systemId={SystemId}");
                 if (response.IsSuccessStatusCode)
                 {
-                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
+                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
                     return await response.Content.ReadFromJsonAsync<IEnumerable<LoyaltyRedemptionDto>>(options) ?? Enumerable.Empty<LoyaltyRedemptionDto>();
                 }
                 return Enumerable.Empty<LoyaltyRedemptionDto>();
             }
             catch (Exception ex)
             {
-                _logger.LogError(ex, "Error fetching redemptions history.");
+                _logger.LogError(ex, "Error fetching redemption history.");
                 return Enumerable.Empty<LoyaltyRedemptionDto>();
             }
         }
@@ -228,107 +212,58 @@ namespace Backend.Features.Loyalty
         {
             try
             {
-                var response = await _httpClient.PutAsJsonAsync($"/api/v1/admin/redemptions/{redemptionId}/status", new { status });
+                _httpClient.DefaultRequestHeaders.Clear();
+                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
+
+                var response = await _httpClient.PutAsJsonAsync($"/api/v1/admin/redemptions/{redemptionId}/status?systemId={SystemId}", new { systemId = SystemId, status });
                 return response.IsSuccessStatusCode;
             }
-            catch (Exception ex)
-            {
-                _logger.LogError(ex, $"Error updating redemption status to {status} for {redemptionId}.");
-                return false;
-            }
+            catch { return false; }
         }
 
         public async Task<IEnumerable<PointHistoryEntryDto>> GetPointsHistoryAsync(string accountId)
         {
             try
             {
-                var response = await _httpClient.GetAsync($"/api/v1/accounts/{accountId}/history");
+                _httpClient.DefaultRequestHeaders.Clear();
+                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
+
+                var response = await _httpClient.GetAsync($"/api/v1/accounts/{accountId}/history?systemId={SystemId}");
                 if (response.IsSuccessStatusCode)
                 {
-                    var rawJson = await response.Content.ReadAsStringAsync();
-                    _logger.LogInformation("Raw Points History JSON for account {AccountId}: {Json}", accountId, rawJson);
-
-                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
-                    return JsonSerializer.Deserialize<IEnumerable<PointHistoryEntryDto>>(rawJson, options) ?? Enumerable.Empty<PointHistoryEntryDto>();
+                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
+                    return await response.Content.ReadFromJsonAsync<IEnumerable<PointHistoryEntryDto>>(options) ?? Enumerable.Empty<PointHistoryEntryDto>();
                 }
-                
-                var error = await response.Content.ReadAsStringAsync();
-                _logger.LogWarning("Points history request failed for account {AccountId}. Status={Status}. Body={Body}", accountId, response.StatusCode, error);
                 return Enumerable.Empty<PointHistoryEntryDto>();
             }
             catch (Exception ex)
             {
-                _logger.LogError(ex, $"Error fetching points history for account {accountId}.");
+                _logger.LogError(ex, $"Error fetching points history for {accountId}.");
                 return Enumerable.Empty<PointHistoryEntryDto>();
             }
         }
 
-        public async Task<IEnumerable<PointHistoryEntryDto>> GetAllMembersPointsHistoryAsync()
+        public async Task<IEnumerable<LoyaltyRewardDto>> GetActiveRewardsAsync()
         {
-            return Enumerable.Empty<PointHistoryEntryDto>();
-        }
-    }
-
-    public class PointHistoryEntryDto
-    {
-        [JsonPropertyName("id")]
-        public int Id { get; set; }
-
-        [JsonPropertyName("accountId")]
-        public string AccountId { get; set; } = string.Empty;
-
-        [JsonPropertyName("externalUserId")]
-        public string? ExternalUserId { get; set; }
-
-        [JsonPropertyName("pointDelta")]
-        public double PointDelta { get; set; }
-
-        [JsonPropertyName("eventKey")]
-        public string EventKey { get; set; } = string.Empty;
-
-        [JsonPropertyName("description")]
-        public string Description { get; set; } = string.Empty;
-
-        [JsonPropertyName("referenceId")]
-        public string? ReferenceId { get; set; }
-
-        [JsonPropertyName("createdAt")]
-        public DateTime CreatedAt { get; set; }
-
-        // Optional redemption-related fields (present for REDEEM events)
-        [JsonPropertyName("rewardId")]
-        public string? RewardId { get; set; }
-
-        [JsonPropertyName("rewardName")]
-        public string? RewardName { get; set; }
-
-        [JsonPropertyName("redemptionStatus")]
-        public string? RedemptionStatus { get; set; }
-
-        [JsonPropertyName("redeemedAt")]
-        public DateTime? RedeemedAt { get; set; }
-    }
-
-    public class AccountLookupResponse
-    {
-        [JsonPropertyName("id")]
-        public string Id { get; set; } = string.Empty;
-
-        // Some loyalty API versions return `accountId` instead of `id`.
-        [JsonPropertyName("accountId")]
-        public string? AccountId { get; set; }
-
-        [JsonPropertyName("externalUserId")]
-        public string ExternalUserId { get; set; } = string.Empty;
-
-        [JsonPropertyName("currentBalance")]
-        public double CurrentBalance { get; set; }
-
-        [JsonPropertyName("tier")]
-        public string Tier { get; set; } = string.Empty;
+            try
+            {
+                _httpClient.DefaultRequestHeaders.Clear();
+                _httpClient.DefaultRequestHeaders.Add("x-system-id", SystemId);
 
-        [JsonPropertyName("lifetimePoints")]
-        public double LifetimePoints { get; set; }
+                var response = await _httpClient.GetAsync($"/api/v1/rewards/active?systemId={SystemId}");
+                
+                if (response.IsSuccessStatusCode)
+                {
+                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
+                    return await response.Content.ReadFromJsonAsync<IEnumerable<LoyaltyRewardDto>>(options) ?? Enumerable.Empty<LoyaltyRewardDto>();
+                }
+                return Enumerable.Empty<LoyaltyRewardDto>();
+            }
+            catch (Exception ex)
+            {
+                _logger.LogError(ex, "Error fetching active rewards.");
+                return Enumerable.Empty<LoyaltyRewardDto>();
+            }
+        }
     }
 }
-

Backend/Program.cs

@@ -25,6 +25,14 @@ var builder = WebApplication.CreateBuilder(args);
 //    Credential = GoogleCredential.FromFile("LibraryFirebase.json")
 //});
 
+builder.Services.AddCors(options =>
+{
+    options.AddPolicy("AllowWasm",
+        policy => policy.WithOrigins("https://localhost:7058", "http://localhost:5158")
+            .AllowAnyMethod()
+            .AllowAnyHeader());
+});
+
 
 builder.Services.AddControllers();
 builder.Services.AddAuthorization();
@@ -104,6 +112,9 @@ var app = builder.Build();
 
 app.UseSwagger();
 app.UseSwaggerUI();
+
+app.UseCors("AllowWasm");
+
 app.UseAuthentication();
 app.UseAuthorization();
 

BlazorFrontend/Services/LibraryApiClient.cs

@@ -1,3 +1,4 @@
+using System.Text.Json.Serialization;
 using System.Net.Http.Json;
 using System.Text.Json;
 using LibraryManagement.Shared.Models;
@@ -182,7 +183,7 @@ namespace BlazorFrontend.Services
                 {
                     // JsonPropertyName attributes in LoyaltyAccountDto will handle the mapping
                     // and correctly populate CurrentBalance from the backend's currentBalance
-                    return await response.Content.ReadFromJsonAsync<LoyaltyAccountDto>();
+                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString }; return await response.Content.ReadFromJsonAsync<LoyaltyAccountDto>(options);
                 }
                 else
                 {
@@ -221,11 +222,8 @@ namespace BlazorFrontend.Services
         {
             try
             {
-                var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
-                var response = await _httpClient.GetAsync($"api/v1/accounts/{accountId}/history");
-                if (response.IsSuccessStatusCode)
-                    return await response.Content.ReadFromJsonAsync<IEnumerable<PointHistoryEntryDto>>(options) ?? Enumerable.Empty<PointHistoryEntryDto>();
-                return Enumerable.Empty<PointHistoryEntryDto>();
+                // Call the Backend's proxy endpoint instead of trying to hit the external API directly
+                return await _httpClient.GetFromJsonAsync<IEnumerable<PointHistoryEntryDto>>("api/Loyalty/my-points-history") ?? Enumerable.Empty<PointHistoryEntryDto>();
             }
             catch { return Enumerable.Empty<PointHistoryEntryDto>(); }
         }
@@ -233,7 +231,7 @@ namespace BlazorFrontend.Services
         public async Task<IEnumerable<UserPointsHistoryDto>> GetAllMembersPointsHistoryAsync()
         {
             try {
-                var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
+                var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
                 var response = await _httpClient.GetAsync("api/Loyalty/admin/all-points-history");
                 var raw = await response.Content.ReadAsStringAsync();
                 if (!response.IsSuccessStatusCode)
@@ -293,9 +291,8 @@ namespace BlazorFrontend.Services
         {
             try
             {
-                
-                var client = new HttpClient();
-                return await client.GetFromJsonAsync<IEnumerable<LoyaltyRewardDto>>("http://150.95.88.91:4100/api/v1/rewards/active/THS-LMS") ?? Enumerable.Empty<LoyaltyRewardDto>();
+                // Call our Backend proxy which handles the external API and SystemId
+                return await _httpClient.GetFromJsonAsync<IEnumerable<LoyaltyRewardDto>>("api/Loyalty/rewards") ?? Enumerable.Empty<LoyaltyRewardDto>();
             }
             catch { return Enumerable.Empty<LoyaltyRewardDto>(); }
         }
@@ -342,7 +339,7 @@ namespace BlazorFrontend.Services
                 var response = await _httpClient.GetAsync("api/Loyalty/admin/redemptions/pending");
                 if (response.IsSuccessStatusCode)
                 {
-                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
+                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
                     return await response.Content.ReadFromJsonAsync<IEnumerable<LoyaltyRedemptionDto>>(options) ?? Enumerable.Empty<LoyaltyRedemptionDto>();
                 }
                 return Enumerable.Empty<LoyaltyRedemptionDto>();
@@ -413,3 +410,6 @@ namespace BlazorFrontend.Services
         #endregion
     }
 }
+
+
+

BlazorWebAssembly/App.razor

@@ -1,12 +1,30 @@
-<Router AppAssembly="@typeof(App).Assembly">
-    <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
-        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
-    </Found>
-    <NotFound>
-        <PageTitle>Not found</PageTitle>
-        <LayoutView Layout="@typeof(MainLayout)">
-            <p role="alert">Sorry, there's nothing at this address.</p>
-        </LayoutView>
-    </NotFound>
-</Router>
+<CascadingAuthenticationState>
+    <Router AppAssembly="@typeof(App).Assembly">
+        <Found Context="routeData">
+            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
+                <NotAuthorized>
+                    <div class="p-5 text-center">
+                        <h2 class="text-danger">Access Denied</h2>
+                        <p>You don't have permission to view this page. Please log in.</p>
+                        <a href="/login" class="btn btn-primary mt-3">Go to Login</a>
+                    </div>
+                </NotAuthorized>
+                <Authorizing>
+                    <div class="p-5 text-center">
+                        <div class="spinner-border text-primary" role="status">
+                            <span class="visually-hidden">Loading...</span>
+                        </div>
+                        <p class="mt-2">Verifying credentials...</p>
+                    </div>
+                </Authorizing>
+            </AuthorizeRouteView>
+            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+        </Found>
+        <NotFound>
+            <PageTitle>Not found</PageTitle>
+            <LayoutView Layout="@typeof(MainLayout)">
+                <p role="alert">Sorry, there's nothing at this address.</p>
+            </LayoutView>
+        </NotFound>
+    </Router>
+</CascadingAuthenticationState>

BlazorWebAssembly/BlazorWebAssembly.csproj

@@ -7,6 +7,8 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="Blazored.LocalStorage" Version="4.5.0" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.Authorization" Version="8.0.0" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.26" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.26" PrivateAssets="all" />
   </ItemGroup>

BlazorWebAssembly/Layout/MainLayout.razor

@@ -1,16 +1,100 @@
-@inherits LayoutComponentBase
-<div class="page">
-    <div class="sidebar">
-        <NavMenu />
-    </div>
+@inherits LayoutComponentBase
+@using BlazorWebAssembly.Services
+@using Microsoft.AspNetCore.Components.Authorization
+@inject ThemeService ThemeService
+@inject AuthenticationStateProvider AuthStateProvider
+
+<div class="flex h-screen overflow-hidden bg-body text-main animate-fade font-sans">
+    <!-- Sidebar (Hidden on mobile) -->
+    <aside class="hidden lg:flex lg:w-64 lg:flex-col lg:fixed lg:inset-y-0 z-50 border-r border-border bg-card">
+        <div class="flex flex-col flex-grow pt-8 pb-4 overflow-y-auto">
+            <!-- Brand -->
+            <div class="flex items-center flex-shrink-0 px-6 gap-3 mb-10">
+                <div class="bg-primary rounded-xl p-2 text-white shadow-lg shadow-primary/20">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m16 6 4 14"/><path d="M12 6v14"/><path d="M8 8v12"/><path d="M4 4v16"/><path d="M4 12V4l4 4"/><path d="m12 6 4 4"/></svg>
+                </div>
+                <span class="text-xl font-black tracking-tighter uppercase">LibraryLuxe</span>
+            </div>
 
-    <main>
-        <div class="top-row px-4">
-            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+            <!-- Navigation -->
+            <div class="flex-grow px-3">
+                <NavMenu />
+            </div>
+
+            <!-- Theme & User Mini Profile -->
+            <div class="px-6 py-6 border-t border-border">
+                <div class="mb-6">
+                    <p class="text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-4 text-center">Switch Theme</p>
+                    <ThemeSwitcher />
+                </div>
+                
+                <AuthorizeView>
+                    <Authorized>
+                        <div class="flex items-center gap-3 p-3 bg-body rounded-2xl border border-border">
+                            <div class="h-10 w-10 rounded-xl bg-primary flex items-center justify-center text-white font-bold shadow-sm">
+                                @context.User.Identity?.Name?[..1].ToUpper()
+                            </div>
+                            <div class="flex flex-col min-w-0">
+                                <span class="text-xs font-bold truncate">@context.User.Identity?.Name</span>
+                                <span class="text-[10px] text-muted font-medium uppercase tracking-wider">Member</span>
+                            </div>
+                        </div>
+                    </Authorized>
+                    <NotAuthorized>
+                         <div class="flex items-center gap-3 p-3 bg-body rounded-2xl border border-border">
+                            <div class="h-10 w-10 rounded-xl bg-muted/20 flex items-center justify-center text-muted font-bold">
+                                G
+                            </div>
+                            <div class="flex flex-col">
+                                <span class="text-xs font-bold text-muted">Guest User</span>
+                                <a href="login" class="text-[10px] text-primary font-black uppercase tracking-wider hover:underline">Sign In</a>
+                            </div>
+                        </div>
+                    </NotAuthorized>
+                </AuthorizeView>
+            </div>
         </div>
+    </aside>
+
+    <!-- Main Content Wrapper -->
+    <div class="lg:pl-64 flex flex-col flex-1 w-0">
+        <!-- Topbar -->
+        <header class="h-20 bg-card/80 backdrop-blur-md border-b border-border sticky top-0 z-40 flex items-center justify-between px-8">
+            <div class="flex-grow max-w-lg">
+                <div class="relative">
+                    <svg class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+                    <input type="text" placeholder="Quick search..." class="w-full bg-body border border-border rounded-xl pl-12 pr-4 py-2.5 text-sm focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all shadow-sm" />
+                </div>
+            </div>
 
-        <article class="content px-4">
-            @Body
-        </article>
-    </main>
+            <div class="flex items-center gap-6">
+                <AuthorizeView>
+                    <Authorized>
+                        <button class="relative text-muted hover:text-primary transition-colors">
+                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
+                            <span class="absolute top-0 right-0 w-2 h-2 bg-primary rounded-full border-2 border-card"></span>
+                        </button>
+                        <a href="/logout" class="text-xs font-black uppercase tracking-widest text-muted hover:text-red-500 transition-colors">Logout</a>
+                    </Authorized>
+                    <NotAuthorized>
+                        <a href="/login" class="bg-primary text-white px-6 py-2 rounded-xl text-xs font-black uppercase tracking-widest hover:bg-primary-hover shadow-lg shadow-primary/20 transition-all">Sign In</a>
+                    </NotAuthorized>
+                </AuthorizeView>
+            </div>
+        </header>
+
+        <!-- Main Content Section -->
+        <main class="flex-1 overflow-y-auto p-8 scrollbar-hide">
+            <div class="max-w-6xl mx-auto">
+                @Body
+            </div>
+        </main>
+    </div>
 </div>
+
+@code {
+    protected override async Task OnInitializedAsync()
+    {
+        await ThemeService.InitializeAsync();
+    }
+}

BlazorWebAssembly/Layout/NavMenu.razor

@@ -1,39 +1,71 @@
-<div class="top-row ps-3 navbar navbar-dark">
-    <div class="container-fluid">
-        <a class="navbar-brand" href="">BlazorWebAssembly</a>
-        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-    </div>
-</div>
+<nav class="space-y-1">
+    <NavLink class="nav-link-v" href="" Match="NavLinkMatch.All">
+        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
+        Dashboard
+    </NavLink>
+    
+    <NavLink class="nav-link-v" href="books">
+        <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+        Books Catalog
+    </NavLink>
 
-<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
-    <nav class="flex-column">
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="weather">
-                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
-            </NavLink>
-        </div>
-    </nav>
-</div>
+    <AuthorizeView Roles="Member">
+        <NavLink class="nav-link-v" href="borrowings">
+            <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
+            My Loans
+        </NavLink>
+        <NavLink class="nav-link-v" href="rewards">
+            <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path></svg>
+            Rewards
+        </NavLink>
+        <NavLink class="nav-link-v" href="membership">
+            <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
+            Plans
+        </NavLink>
+        <NavLink class="nav-link-v" href="wishlist">
+            <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
+            Wishlist
+        </NavLink>
+    </AuthorizeView>
 
-@code {
-    private bool collapseNavMenu = true;
+    <AuthorizeView Roles="Librarian">
+        <NavLink class="nav-link-v" href="user-insights">
+            <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
+            Insights
+        </NavLink>
+        <NavLink class="nav-link-v" href="members">
+            <svg class="w-5 h-5 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
+            Members
+        </NavLink>
+    </AuthorizeView>
+</nav>
 
-    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+<style>
+    .nav-link-v {
+        display: flex;
+        align-items: center;
+        padding: 0.75rem 1.25rem;
+        border-radius: 12px;
+        font-size: 0.875rem;
+        font-weight: 600;
+        color: var(--text-muted);
+        text-decoration: none;
+        transition: all 0.2s;
+        margin-bottom: 0.25rem;
+    }
+
+    .nav-link-v:hover {
+        color: var(--primary);
+        background: var(--bg-body);
+    }
+
+    .nav-link-v.active {
+        color: var(--primary);
+        background: var(--bg-body);
+        box-shadow: inset 0 0 0 1px var(--border);
+    }
 
-    private void ToggleNavMenu()
-    {
-        collapseNavMenu = !collapseNavMenu;
+    .nav-link-v.active svg {
+        color: var(--primary);
     }
-}
+</style>

BlazorWebAssembly/Layout/ThemeSwitcher.razor

@@ -0,0 +1,29 @@
+@using BlazorWebAssembly.Services
+@inject ThemeService ThemeService
+
+<div class="flex items-center bg-bg-body/50 border border-border p-1 rounded-2xl">
+    <button @onclick='() => SetTheme("light")' 
+            class='w-9 h-9 rounded-xl flex items-center justify-center transition-all @(CurrentTheme == "light" ? "bg-card text-primary shadow-sm shadow-primary/10" : "text-muted hover:text-primary")'
+            title="Light Mode">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
+    </button>
+    <button @onclick='() => SetTheme("dark")' 
+            class='w-9 h-9 rounded-xl flex items-center justify-center transition-all @(CurrentTheme == "dark" ? "bg-card text-primary shadow-sm shadow-primary/10" : "text-muted hover:text-primary")'
+            title="Dark Mode">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path></svg>
+    </button>
+    <button @onclick='() => SetTheme("emerald")' 
+            class='w-9 h-9 rounded-xl flex items-center justify-center transition-all @(CurrentTheme == "emerald" ? "bg-card text-primary shadow-sm shadow-primary/10" : "text-muted hover:text-primary")'
+            title="Emerald Mode">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
+    </button>
+</div>
+
+@code {
+    private string CurrentTheme => ThemeService.CurrentTheme;
+
+    private async Task SetTheme(string theme)
+    {
+        await ThemeService.SetThemeAsync(theme);
+    }
+}

BlazorWebAssembly/Pages/Books.razor

@@ -0,0 +1,143 @@
+@page "/books"
+@using LibraryManagement.Shared.Models
+@using BlazorWebAssembly.Services
+@inject LibraryApiClient ApiClient
+@inject NavigationManager Navigation
+
+<div class="max-w-7xl mx-auto py-10 px-6">
+    <!-- Header -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 gap-6">
+        <div>
+            <h1 class="text-4xl font-extrabold tracking-tight text-main mb-2">Book Collection</h1>
+            <p class="text-muted text-lg">Discover your next favorite story among our curated selection.</p>
+        </div>
+        <div class="relative w-full md:w-96">
+            <input type="text" @bind="_searchQuery" @bind:event="oninput" 
+                   placeholder="Search by title, author..." 
+                   class="w-full bg-card border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all shadow-sm" />
+        </div>
+    </div>
+
+    <!-- Category Filter -->
+    <div class="flex flex-wrap gap-2 mb-10">
+        <button @onclick="() => FilterByCategory(null)" 
+                class='px-4 py-2 rounded-full text-sm font-semibold transition-all @(_selectedCategoryId == null ? "bg-primary text-white" : "bg-card text-muted border border-border hover:border-primary hover:text-primary")'>
+            All Genres
+        </button>
+        @foreach (var cat in _categories)
+        {
+            <button @onclick="() => FilterByCategory(cat.Id)" 
+                    class='px-4 py-2 rounded-full text-sm font-semibold transition-all @(_selectedCategoryId == cat.Id ? "bg-primary text-white" : "bg-card text-muted border border-border hover:border-primary hover:text-primary")'>
+                @cat.Name
+            </button>
+        }
+    </div>
+
+    <!-- Loading State -->
+    @if (_isLoading)
+    {
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+            @for (int i = 0; i < 8; i++)
+            {
+                <div class="animate-pulse bg-card rounded-xl border border-border h-96"></div>
+            }
+        </div>
+    }
+    else if (!FilteredBooks.Any())
+    {
+        <div class="text-center py-20 bg-card rounded-2xl border border-dashed border-border">
+            <h3 class="text-xl font-bold text-main mb-2">No results found</h3>
+            <p class="text-muted">Try adjusting your search or filters.</p>
+        </div>
+    }
+    else
+    {
+        <!-- Books Grid -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
+            @foreach (var book in FilteredBooks)
+            {
+                <div class="group bg-card rounded-xl border border-border overflow-hidden hover:shadow-xl transition-all duration-300 flex flex-col h-full cursor-pointer" 
+                     @onclick="() => ShowDetails(book.Id)">
+                    <!-- Cover -->
+                    <div class="aspect-[2/3] bg-body relative overflow-hidden">
+                        @if (!string.IsNullOrEmpty(book.CoverUrl))
+                        {
+                            <img src="@book.CoverUrl" alt="@book.Title" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" />
+                        }
+                        else
+                        {
+                            <div class="w-full h-full flex items-center justify-center text-muted opacity-20">
+                                <span class="font-bold uppercase tracking-widest text-xs">No Cover</span>
+                            </div>
+                        }
+                        
+                        @if (book.AvailableCopies <= 0)
+                        {
+                            <div class="absolute inset-0 bg-black/40 backdrop-blur-[2px] flex items-center justify-center">
+                                <span class="bg-white text-black px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest">Unavailable</span>
+                            </div>
+                        }
+                    </div>
+
+                    <!-- Content -->
+                    <div class="p-5 flex-grow">
+                        <div class="flex items-center gap-2 mb-2">
+                            @foreach (var cat in book.Categories.Take(2))
+                            {
+                                <span class="text-[10px] font-bold uppercase tracking-wider text-primary opacity-80">@cat.Name</span>
+                            }
+                        </div>
+                        <h3 class="font-bold text-main line-clamp-1 mb-1 group-hover:text-primary transition-colors">@book.Title</h3>
+                        <p class="text-xs text-muted mb-4 font-medium">@book.Author</p>
+                        
+                        <div class="mt-auto flex items-center justify-between">
+                            <span class="text-[10px] font-bold text-muted bg-body px-2 py-1 rounded border border-border">@book.Status</span>
+                            <span class="text-xs font-bold @(book.AvailableCopies > 0 ? "text-green-500" : "text-red-400")">
+                                @book.AvailableCopies / @book.TotalCopies
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            }
+        </div>
+    }
+</div>
+
+@code {
+    private bool _isLoading = true;
+    private string _searchQuery = "";
+    private int? _selectedCategoryId;
+    private List<BookDto> _books = new();
+    private List<CategoryDto> _categories = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadData();
+    }
+
+    private async Task LoadData()
+    {
+        _isLoading = true;
+        try
+        {
+            _books = (await ApiClient.GetBooksAsync()).ToList();
+            _categories = (await ApiClient.GetCategoriesAsync()).ToList();
+        }
+        catch { }
+        finally { _isLoading = false; }
+    }
+
+    private IEnumerable<BookDto> FilteredBooks => _books
+        .Where(b => (string.IsNullOrEmpty(_searchQuery) || b.Title.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) || b.Author.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase))
+                 && (!_selectedCategoryId.HasValue || b.Categories.Any(c => c.Id == _selectedCategoryId)));
+
+    private void FilterByCategory(int? id)
+    {
+        _selectedCategoryId = id;
+    }
+
+    private void ShowDetails(int id)
+    {
+        // Navigation.NavigateTo($"books/{id}");
+    }
+}

BlazorWebAssembly/Pages/Borrowings.razor

@@ -0,0 +1,122 @@
+@page "/borrowings"
+@using LibraryManagement.Shared.Models
+@using BlazorWebAssembly.Services
+@inject LibraryApiClient ApiClient
+@inject NavigationManager Navigation
+
+<div class="max-w-6xl mx-auto py-12 px-6">
+    <!-- Header -->
+    <div class="flex justify-between items-end mb-16">
+        <div>
+            <h1 class="text-5xl font-black tracking-tight text-main mb-4">My Loans</h1>
+            <p class="text-lg text-muted max-w-xl">
+                Keep track of your reading journey and manage your active borrowings.
+            </p>
+        </div>
+        <button @onclick='() => Navigation.NavigateTo("books")' class="hidden md:block bg-body text-main border border-border px-8 py-3 rounded-xl font-bold hover:bg-card transition-all">
+            Browse More
+        </button>
+    </div>
+
+    @if (_isLoading)
+    {
+        <div class="space-y-6">
+            @for (int i = 0; i < 3; i++)
+            {
+                <div class="animate-pulse bg-card rounded-2xl border border-border h-32 w-full"></div>
+            }
+        </div>
+    }
+    else if (!_borrowings.Any())
+    {
+        <div class="text-center py-24 bg-card rounded-[2.5rem] border border-dashed border-border shadow-sm">
+            <h3 class="text-2xl font-bold text-main mb-3">No active loans</h3>
+            <p class="text-muted mb-8">You haven't borrowed any books yet. Explore our collection to get started.</p>
+            <button @onclick='() => Navigation.NavigateTo("books")' class="bg-primary text-white px-10 py-4 rounded-xl font-black hover:bg-primary-hover transition-all shadow-lg shadow-primary/20">
+                Go to Catalog
+            </button>
+        </div>
+    }
+    else
+    {
+        <div class="space-y-6">
+            @foreach (var loan in _borrowings)
+            {
+                <div class="bg-card rounded-2xl border border-border p-6 flex flex-col md:flex-row items-center gap-8 hover:border-primary/50 transition-all group">
+                    <!-- Book Cover / Placeholder -->
+                    <div class="w-20 h-28 bg-body rounded-lg overflow-hidden flex-shrink-0 border border-border flex items-center justify-center">
+                        <svg class="w-8 h-8 text-muted opacity-20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+                    </div>
+
+                    <!-- Details -->
+                    <div class="flex-grow text-center md:text-left">
+                        <h3 class="text-xl font-bold text-main mb-1 group-hover:text-primary transition-colors">@loan.BookTitle</h3>
+                        <p class="text-sm text-muted font-medium mb-4 md:mb-0">ID: @loan.BookId</p>
+                    </div>
+
+                    <!-- Dates -->
+                    <div class="grid grid-cols-2 gap-8 px-8 border-x border-border hidden lg:grid">
+                        <div>
+                            <p class="text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-1">Borrowed</p>
+                            <p class="text-sm font-bold text-main">@loan.BorrowDate.ToString("MMM dd, yyyy")</p>
+                        </div>
+                        <div>
+                            <p class="text-[10px] font-black text-muted uppercase tracking-[0.2em] mb-1">Due Date</p>
+                            <p class="text-sm font-bold @(loan.DueDate < DateTime.UtcNow ? "text-red-500" : "text-main")">
+                                @loan.DueDate.ToString("MMM dd, yyyy")
+                            </p>
+                        </div>
+                    </div>
+
+                    <!-- Status & Action -->
+                    <div class="flex flex-col md:items-end gap-3 min-w-[150px]">
+                        <span class='px-4 py-1.5 rounded-full text-[10px] font-black uppercase tracking-widest text-center @GetStatusColor(loan.Status)'>
+                            @loan.Status
+                        </span>
+                        @if (loan.Status == "Borrowed")
+                        {
+                            <button @onclick="() => ReturnRequestAsync(loan.Id)" class="text-xs font-bold text-primary hover:underline">
+                                Request Return
+                            </button>
+                        }
+                    </div>
+                </div>
+            }
+        </div>
+    }
+</div>
+
+@code {
+    private bool _isLoading = true;
+    private List<BorrowingDto> _borrowings = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadData();
+    }
+
+    private async Task LoadData()
+    {
+        _isLoading = true;
+        try
+        {
+            _borrowings = (await ApiClient.GetMyBorrowingsAsync()).ToList();
+        }
+        catch { }
+        finally { _isLoading = false; }
+    }
+
+    private async Task ReturnRequestAsync(Guid id)
+    {
+        var success = await ApiClient.RequestReturnAsync(id);
+        if (success) await LoadData();
+    }
+
+    private string GetStatusColor(string status) => status switch
+    {
+        "Borrowed" => "bg-blue-500/10 text-blue-500",
+        "Returned" => "bg-green-500/10 text-green-500",
+        "PendingReturn" => "bg-orange-500/10 text-orange-500",
+        _ => "bg-body text-muted"
+    };
+}

BlazorWebAssembly/Pages/Counter.razor

@@ -1,18 +0,0 @@
-@page "/counter"
-
-<PageTitle>Counter</PageTitle>
-
-<h1>Counter</h1>
-
-<p role="status">Current count: @currentCount</p>
-
-<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
-
-@code {
-    private int currentCount = 0;
-
-    private void IncrementCount()
-    {
-        currentCount++;
-    }
-}

BlazorWebAssembly/Pages/Home.razor

@@ -1,7 +1,149 @@
-@page "/"
+@page "/"
+@using LibraryManagement.Shared.Models
+@using BlazorWebAssembly.Services
+@using Microsoft.AspNetCore.Components.Authorization
+@inject LibraryApiClient ApiClient
+@inject NavigationManager Navigation
+@inject AuthenticationStateProvider AuthStateProvider
 
-<PageTitle>Home</PageTitle>
+<AuthorizeView>
+    <Authorized>
+        <!-- Authenticated Dashboard View -->
+        <div class="space-y-12 animate-fade">
+            <section>
+                <h1 class="text-4xl font-black tracking-tight mb-2 text-main">
+                    Welcome back, <span class="text-primary">@context.User.Identity?.Name</span>
+                </h1>
+                <p class="text-lg text-muted">Here is what's happening with your library account today.</p>
+            </section>
 
-<h1>Hello, world!</h1>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Loyalty Points -->
+                <div class="bg-card p-8 rounded-3xl border border-border shadow-sm hover:shadow-md transition-all">
+                    <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-4">Loyalty Balance</p>
+                    <div class="flex items-baseline gap-2 mb-4">
+                        <h3 class="text-5xl font-black text-main">@(_loyaltyAccount?.CurrentBalance ?? 0)</h3>
+                        <span class="text-xs font-bold text-primary">POINTS</span>
+                    </div>
+                    <div class="w-full bg-body h-1.5 rounded-full overflow-hidden">
+                        <div class="bg-primary h-full" style="width: 45%"></div>
+                    </div>
+                </div>
 
-Welcome to your new app.
+                <!-- Active Loans -->
+                <div class="bg-card p-8 rounded-3xl border border-border shadow-sm hover:shadow-md transition-all">
+                    <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-4">Current Loans</p>
+                    <h3 class="text-5xl font-black text-main mb-4">2</h3>
+                    <div class="flex gap-2">
+                        <span class="px-3 py-1 bg-green-500/10 text-green-600 text-[10px] font-black uppercase rounded-lg">Healthy</span>
+                    </div>
+                </div>
+
+                <!-- Subscription -->
+                <div class="bg-card p-8 rounded-3xl border border-border shadow-sm hover:shadow-md transition-all">
+                    <p class="text-[10px] font-black text-muted uppercase tracking-widest mb-4">Membership</p>
+                    <h3 class="text-2xl font-black text-main mb-1 uppercase">Premium Gold</h3>
+                    <p class="text-xs text-muted mb-6">Active Status</p>
+                    <button @onclick='() => Navigation.NavigateTo("membership")' class="text-xs font-black text-primary uppercase tracking-widest hover:underline">Manage Plan</button>
+                </div>
+            </div>
+
+            <section>
+                <h2 class="text-xl font-bold mb-6 text-main">Recommended for You</h2>
+                <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-6">
+                    @for (int i = 0; i < 5; i++)
+                    {
+                        <div class="bg-card aspect-[2/3] rounded-2xl border border-border overflow-hidden animate-pulse"></div>
+                    }
+                </div>
+            </section>
+        </div>
+    </Authorized>
+
+    <NotAuthorized>
+        <!-- Guest Landing Page -->
+        <div class="space-y-24 animate-fade py-12">
+            <!-- Hero Section -->
+            <section class="text-center">
+                <h1 class="text-7xl font-black tracking-tighter text-main mb-8 leading-tight">
+                    Where Every Page <br /> <span class="text-primary italic">Finds a Purpose.</span>
+                </h1>
+                <p class="text-xl text-muted max-w-3xl mx-auto leading-relaxed mb-12">
+                    Join over 5,000 readers in a digital-first library experience. Access a global collection of literature, earn rewards for reading, and connect with fellow book lovers.
+                </p>
+                <div class="flex items-center justify-center gap-6">
+                    <button @onclick='() => Navigation.NavigateTo("register")' class="bg-primary text-white px-10 py-5 rounded-2xl font-black text-lg hover:bg-primary-hover shadow-xl shadow-primary/20 transition-all transform hover:scale-105">
+                        Start Reading Now
+                    </button>
+                    <button @onclick='() => Navigation.NavigateTo("books")' class="bg-card border border-border text-main px-10 py-5 rounded-2xl font-black text-lg hover:bg-body transition-all">
+                        Explore Catalog
+                    </button>
+                </div>
+            </section>
+
+            <!-- Stats Bar -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-12 border-y border-border py-16">
+                <div class="text-center">
+                    <h3 class="text-5xl font-black text-main mb-2">12,000+</h3>
+                    <p class="text-muted font-bold uppercase tracking-widest text-xs">Verified Books</p>
+                </div>
+                <div class="text-center border-x border-border">
+                    <h3 class="text-5xl font-black text-main mb-2">5.2k</h3>
+                    <p class="text-muted font-bold uppercase tracking-widest text-xs">Active Readers</p>
+                </div>
+                <div class="text-center">
+                    <h3 class="text-5xl font-black text-main mb-2">150+</h3>
+                    <p class="text-muted font-bold uppercase tracking-widest text-xs">Daily Borrowings</p>
+                </div>
+            </div>
+
+            <!-- Features -->
+            <section class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+                <div class="space-y-8">
+                    <h2 class="text-4xl font-black text-main tracking-tight">Experience Library <br /> Management redefined.</h2>
+                    <div class="space-y-6">
+                        <div class="flex gap-4">
+                            <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary flex-shrink-0">
+                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path></svg>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-main">Loyalty Reward System</h4>
+                                <p class="text-sm text-muted">Earn points for every book you return on time and exchange them for membership perks.</p>
+                            </div>
+                        </div>
+                        <div class="flex gap-4">
+                            <div class="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary flex-shrink-0">
+                                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
+                            </div>
+                            <div>
+                                <h4 class="font-bold text-main">Instant Notifications</h4>
+                                <p class="text-sm text-muted">Get real-time updates when your favorite books are back in stock or when your loan is due.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-card aspect-video rounded-[3rem] border border-border shadow-2xl flex items-center justify-center relative overflow-hidden">
+                    <div class="absolute inset-0 bg-primary opacity-5"></div>
+                    <span class="text-muted font-black uppercase tracking-[0.3em] text-xs">Preview of Interface</span>
+                </div>
+            </section>
+        </div>
+    </NotAuthorized>
+</AuthorizeView>
+
+@code {
+    private LoyaltyAccountDto? _loyaltyAccount;
+
+    protected override async Task OnInitializedAsync()
+    {
+        try
+        {
+            var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+            if (authState.User.Identity?.IsAuthenticated == true)
+            {
+                _loyaltyAccount = await ApiClient.GetMyLoyaltyAccountAsync();
+            }
+        }
+        catch { }
+    }
+}

BlazorWebAssembly/Pages/Login.razor

@@ -0,0 +1,97 @@
+@page "/login"
+@using BlazorWebAssembly.Services
+@using LibraryManagement.Shared.Models
+@inject AuthService AuthService
+@inject NavigationManager Navigation
+
+<div class="min-h-[80vh] flex items-center justify-center py-12 px-6">
+    <div class="w-full max-w-md">
+        <!-- Brand / Header -->
+        <div class="text-center mb-12">
+            <div class="inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-2xl mb-6">
+                <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+            </div>
+            <h1 class="text-3xl font-black text-main mb-2">Welcome Back</h1>
+            <p class="text-muted">Enter your credentials to access your library account.</p>
+        </div>
+
+        <!-- Login Form -->
+        <div class="bg-card p-10 rounded-[2rem] border border-border shadow-2xl shadow-primary/5">
+            <EditForm Model="@_loginModel" OnValidSubmit="HandleLogin" class="space-y-6">
+                <DataAnnotationsValidator />
+                
+                <div>
+                    <label class="block text-xs font-black text-muted uppercase tracking-[0.2em] mb-2">Email Address</label>
+                    <InputText @bind-Value="_loginModel.Email" 
+                               class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all" 
+                               placeholder="name@example.com" />
+                </div>
+
+                <div>
+                    <label class="block text-xs font-black text-muted uppercase tracking-[0.2em] mb-2">Password</label>
+                    <InputText @bind-Value="_loginModel.Password" type="password"
+                               class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all" 
+                               placeholder="••••••••" />
+                </div>
+
+                @if (!string.IsNullOrEmpty(_errorMessage))
+                {
+                    <div class="p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-red-500 text-sm font-bold text-center">
+                        @_errorMessage
+                    </div>
+                }
+
+                <button type="submit" disabled="@_isLoading"
+                        class='w-full py-4 rounded-xl font-black text-white bg-primary hover:bg-primary-hover transition-all transform hover:scale-[1.02] active:scale-95 shadow-lg shadow-primary/20 flex items-center justify-center gap-2'>
+                    @if (_isLoading)
+                    {
+                        <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                        <span>Authenticating...</span>
+                    }
+                    else
+                    {
+                        <span>Sign In</span>
+                    }
+                </button>
+            </EditForm>
+        </div>
+
+        <!-- Footer -->
+        <p class="text-center mt-10 text-muted font-medium">
+            Don't have an account? 
+            <button @onclick='() => Navigation.NavigateTo("register")' class="text-primary font-bold hover:underline">Create Account</button>
+        </p>
+    </div>
+</div>
+
+@code {
+    private LoginRequest _loginModel = new();
+    private bool _isLoading = false;
+    private string? _errorMessage;
+
+    private async Task HandleLogin()
+    {
+        _isLoading = true;
+        _errorMessage = null;
+        try
+        {
+            var success = await AuthService.LoginAsync(_loginModel);
+            if (success)
+            {
+                Navigation.NavigateTo("/");
+            }
+            else
+            {
+                _errorMessage = "Invalid email or password. Please try again.";
+            }
+        }
+        catch (Exception ex)
+        {
+            _errorMessage = "A connection error occurred. Please check your network.";
+        }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+}

BlazorWebAssembly/Pages/Membership.razor

@@ -0,0 +1,130 @@
+@page "/membership"
+@using LibraryManagement.Shared.Models
+@using BlazorWebAssembly.Services
+@inject LibraryApiClient ApiClient
+@inject NavigationManager Navigation
+
+<div class="max-w-6xl mx-auto py-16 px-6">
+    <!-- Header -->
+    <div class="text-center mb-20">
+        <h1 class="text-5xl font-black tracking-tight text-main mb-6">Choose Your Journey</h1>
+        <p class="text-xl text-muted max-w-2xl mx-auto leading-relaxed">
+            From casual readers to devoted bookworms, we have a plan that perfectly matches your literary appetite.
+        </p>
+    </div>
+
+    @if (_isLoading)
+    {
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+            @for (int i = 0; i < 3; i++)
+            {
+                <div class="animate-pulse bg-card rounded-3xl border border-border h-[500px]"></div>
+            }
+        </div>
+    }
+    else
+    {
+        <!-- Current Subscription Banner -->
+        @if (_currentSub != null)
+        {
+            <div class="bg-primary/5 border border-primary/20 rounded-3xl p-8 mb-16 flex flex-col md:flex-row items-center justify-between gap-6">
+                <div class="flex items-center gap-6">
+                    <div class="w-16 h-16 bg-primary rounded-2xl flex items-center justify-center text-white text-3xl font-bold">
+                        P
+                    </div>
+                    <div>
+                        <h3 class="text-2xl font-bold text-main">@_currentSub.MembershipType Plan</h3>
+                        <p class="text-muted">Active until @_currentSub.ExpiryDate.ToString("MMMM dd, yyyy")</p>
+                    </div>
+                </div>
+                <div class="flex items-center gap-4">
+                    <span class="px-4 py-1.5 bg-green-500/10 text-green-600 rounded-full text-xs font-bold uppercase tracking-widest">Active</span>
+                </div>
+            </div>
+        }
+
+        <!-- Membership Plans -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+            @foreach (var plan in _memberships)
+            {
+                <div class='relative bg-card rounded-[2rem] border p-10 flex flex-col transition-all duration-500 hover:-translate-y-2 @(IsCurrentPlan(plan.Id) ? "border-primary shadow-xl shadow-primary/5 scale-105 z-10" : "border-border shadow-sm")'>
+                    @if (IsCurrentPlan(plan.Id))
+                    {
+                        <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-primary text-white px-6 py-1 rounded-full text-[10px] font-black uppercase tracking-[0.2em] shadow-lg shadow-primary/30">
+                            Current Plan
+                        </div>
+                    }
+
+                    <div class="mb-10">
+                        <h3 class="text-sm font-black text-muted uppercase tracking-[0.2em] mb-4">@plan.Type</h3>
+                        <div class="flex items-baseline gap-1">
+                            <span class="text-4xl font-black text-main">$@plan.Price</span>
+                            <span class="text-muted font-medium">/@plan.DurationMonths mo</span>
+                        </div>
+                    </div>
+
+                    <div class="space-y-6 mb-12 flex-grow">
+                        <div class="flex items-center gap-4">
+                            <div class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center">
+                                <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
+                            </div>
+                            <span class="text-main font-medium">Borrow up to <span class="font-bold">@plan.MaxBooks</span> books</span>
+                        </div>
+                        <div class="flex items-center gap-4">
+                            <div class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center">
+                                <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
+                            </div>
+                            <span class="text-main font-medium">Keep for <span class="font-bold">@plan.BorrowingDays</span> days</span>
+                        </div>
+                        <div class="flex items-center gap-4">
+                            <div class="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center">
+                                <svg class="w-3 h-3 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
+                            </div>
+                            <span class="text-main font-medium">Digital access included</span>
+                        </div>
+                    </div>
+
+                    <button @onclick="() => SubscribeAsync(plan)" 
+                            disabled="@IsCurrentPlan(plan.Id)"
+                            class='w-full py-5 rounded-2xl font-black transition-all @(IsCurrentPlan(plan.Id) ? "bg-body text-muted border border-border" : "bg-primary text-white hover:bg-primary-hover hover:shadow-xl shadow-primary/20")'>
+                        @(IsCurrentPlan(plan.Id) ? "Your Plan" : "Upgrade Now")
+                    </button>
+                </div>
+            }
+        </div>
+    }
+</div>
+
+@code {
+    private bool _isLoading = true;
+    private List<MembershipDto> _memberships = new();
+    private SubscriptionDto? _currentSub;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadData();
+    }
+
+    private async Task LoadData()
+    {
+        _isLoading = true;
+        try
+        {
+            _memberships = (await ApiClient.GetMembershipsAsync()).ToList();
+            _currentSub = await ApiClient.GetMySubscriptionAsync();
+        }
+        catch { }
+        finally { _isLoading = false; }
+    }
+
+    private bool IsCurrentPlan(int id) => _currentSub?.MembershipId == id;
+
+    private async Task SubscribeAsync(MembershipDto plan)
+    {
+        var result = await ApiClient.SubscribeAsync(new SubscribeRequest { MembershipId = plan.Id });
+        if (result != null)
+        {
+            await LoadData();
+        }
+    }
+}

BlazorWebAssembly/Pages/Register.razor

@@ -0,0 +1,110 @@
+@page "/register"
+@using BlazorWebAssembly.Services
+@using LibraryManagement.Shared.Models
+@inject AuthService AuthService
+@inject NavigationManager Navigation
+
+<div class="min-h-[90vh] flex items-center justify-center py-12 px-6">
+    <div class="w-full max-w-lg">
+        <!-- Brand / Header -->
+        <div class="text-center mb-12">
+            <h1 class="text-4xl font-black text-main mb-3 tracking-tight">Create Account</h1>
+            <p class="text-muted text-lg">Join our community and start your reading journey today.</p>
+        </div>
+
+        <!-- Register Form -->
+        <div class="bg-card p-10 rounded-[2.5rem] border border-border shadow-2xl shadow-primary/5">
+            <EditForm Model="@_registerModel" OnValidSubmit="HandleRegister" class="space-y-6">
+                <DataAnnotationsValidator />
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div class="md:col-span-2">
+                        <label class="block text-xs font-black text-muted uppercase tracking-[0.2em] mb-2">Full Name</label>
+                        <InputText @bind-Value="_registerModel.FullName" 
+                                   class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all" 
+                                   placeholder="John Doe" />
+                    </div>
+
+                    <div>
+                        <label class="block text-xs font-black text-muted uppercase tracking-[0.2em] mb-2">Email Address</label>
+                        <InputText @bind-Value="_registerModel.Email" 
+                                   class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all" 
+                                   placeholder="john@example.com" />
+                    </div>
+
+                    <div>
+                        <label class="block text-xs font-black text-muted uppercase tracking-[0.2em] mb-2">Phone Number</label>
+                        <InputText @bind-Value="_registerModel.PhoneNumber" 
+                                   class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all" 
+                                   placeholder="+1 234 567 890" />
+                    </div>
+
+                    <div class="md:col-span-2">
+                        <label class="block text-xs font-black text-muted uppercase tracking-[0.2em] mb-2">Password</label>
+                        <InputText @bind-Value="_registerModel.Password" type="password"
+                                   class="w-full bg-body border border-border rounded-xl px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent outline-none transition-all" 
+                                   placeholder="Minimum 6 characters" />
+                    </div>
+                </div>
+
+                @if (!string.IsNullOrEmpty(_errorMessage))
+                {
+                    <div class="p-4 bg-red-500/10 border border-red-500/20 rounded-xl text-red-500 text-sm font-bold text-center">
+                        @_errorMessage
+                    </div>
+                }
+
+                <button type="submit" disabled="@_isLoading"
+                        class='w-full py-5 mt-4 rounded-xl font-black text-white bg-primary hover:bg-primary-hover transition-all transform hover:scale-[1.01] active:scale-95 shadow-xl shadow-primary/20 flex items-center justify-center gap-3'>
+                    @if (_isLoading)
+                    {
+                        <div class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                        <span>Creating Account...</span>
+                    }
+                    else
+                    {
+                        <span>Get Started</span>
+                    }
+                </button>
+            </EditForm>
+        </div>
+
+        <!-- Footer -->
+        <p class="text-center mt-10 text-muted font-medium">
+            Already have an account? 
+            <button @onclick='() => Navigation.NavigateTo("login")' class="text-primary font-bold hover:underline">Sign In</button>
+        </p>
+    </div>
+</div>
+
+@code {
+    private RegisterRequest _registerModel = new();
+    private bool _isLoading = false;
+    private string? _errorMessage;
+
+    private async Task HandleRegister()
+    {
+        _isLoading = true;
+        _errorMessage = null;
+        try
+        {
+            var success = await AuthService.RegisterAsync(_registerModel);
+            if (success)
+            {
+                Navigation.NavigateTo("/");
+            }
+            else
+            {
+                _errorMessage = "Registration failed. This email may already be in use.";
+            }
+        }
+        catch (Exception ex)
+        {
+            _errorMessage = "An unexpected error occurred. Please try again later.";
+        }
+        finally
+        {
+            _isLoading = false;
+        }
+    }
+}

BlazorWebAssembly/Pages/Rewards.razor

@@ -0,0 +1,100 @@
+@page "/rewards"
+@using LibraryManagement.Shared.Models
+@using BlazorWebAssembly.Services
+@inject LibraryApiClient ApiClient
+@inject NavigationManager Navigation
+
+<div class="max-w-6xl mx-auto py-12 px-6">
+    <!-- Header -->
+    <div class="text-center mb-16">
+        <h1 class="text-5xl font-black tracking-tight text-main mb-4">Loyalty Rewards</h1>
+        <p class="text-lg text-muted max-w-2xl mx-auto">
+            Your points are your power. Exchange them for exclusive memberships and reading perks.
+        </p>
+    </div>
+
+    @if (_isLoading)
+    {
+        <div class="flex justify-center py-20">
+            <div class="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin"></div>
+        </div>
+    }
+    else
+    {
+        <!-- Account Status Card -->
+        <div class="bg-card rounded-2xl border border-border p-10 mb-16 flex flex-col md:flex-row items-center justify-between gap-8 shadow-sm">
+            <div>
+                <p class="text-sm font-bold text-muted uppercase tracking-widest mb-1">Your Balance</p>
+                <div class="flex items-baseline gap-2">
+                    <h2 class="text-6xl font-black text-main">@(_account?.CurrentBalance ?? 0)</h2>
+                    <span class="text-xl font-bold text-primary">POINTS</span>
+                </div>
+            </div>
+            <div class="h-16 w-px bg-border hidden md:block"></div>
+            <div class="text-center md:text-left">
+                <p class="text-sm font-medium text-muted mb-2">Member Tier</p>
+                <p class="text-xl font-bold text-main">@(_account?.Tier ?? "Member")</p>
+            </div>
+            <button class="bg-primary text-white px-10 py-4 rounded-xl font-black hover:bg-primary-hover transition-all transform hover:scale-105 shadow-lg shadow-primary/20">
+                How it works
+            </button>
+        </div>
+
+        <!-- Rewards Grid -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+            @foreach (var reward in _rewards)
+            {
+                <div class="bg-card rounded-2xl border border-border p-8 flex flex-col hover:border-primary transition-all group">
+                    <div class="flex justify-between items-start mb-6">
+                        <div class="w-14 h-14 bg-body rounded-xl flex items-center justify-center border border-border group-hover:bg-primary/5 transition-colors">
+                            <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path></svg>
+                        </div>
+                        <span class="bg-primary/10 text-primary px-4 py-1 rounded-full text-sm font-black">@reward.PointCost pts</span>
+                    </div>
+                    
+                    <h3 class="text-2xl font-bold text-main mb-2">@reward.Name</h3>
+                    <p class="text-muted leading-relaxed mb-8 flex-grow">@reward.Description</p>
+                    
+                    <button @onclick="() => ClaimAsync(reward)" 
+                            disabled="@((_account?.CurrentBalance ?? 0) < reward.PointCost)"
+                            class='w-full py-4 rounded-xl font-bold transition-all @((_account?.CurrentBalance ?? 0) >= reward.PointCost ? "bg-main text-bg-body hover:bg-primary" : "bg-body text-muted cursor-not-allowed border border-border")'>
+                        @((_account?.CurrentBalance ?? 0) >= reward.PointCost ? "Claim Reward" : "Insufficient Points")
+                    </button>
+                </div>
+            }
+        </div>
+    }
+</div>
+
+@code {
+    private bool _isLoading = true;
+    private LoyaltyAccountDto? _account;
+    private List<LoyaltyRewardDto> _rewards = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadData();
+    }
+
+    private async Task LoadData()
+    {
+        _isLoading = true;
+        try
+        {
+            _account = await ApiClient.GetMyLoyaltyAccountAsync();
+            _rewards = (await ApiClient.GetActiveRewardsAsync()).ToList();
+        }
+        catch { }
+        finally { _isLoading = false; }
+    }
+
+    private async Task ClaimAsync(LoyaltyRewardDto reward)
+    {
+        var (success, msg) = await ApiClient.ClaimRewardAsync(reward.Id);
+        if (success)
+        {
+            await LoadData();
+            // Show success message
+        }
+    }
+}

BlazorWebAssembly/Pages/UserInsights.razor

@@ -0,0 +1,100 @@
+@page "/user-insights"
+@using LibraryManagement.Shared.Models
+@using BlazorWebAssembly.Services
+@inject LibraryApiClient ApiClient
+@inject NavigationManager Navigation
+@using Microsoft.AspNetCore.Authorization
+@attribute [Authorize(Roles = "Librarian")]
+
+<div class="max-w-7xl mx-auto py-12 px-6">
+    <!-- Header -->
+    <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-16 gap-6">
+        <div>
+            <h1 class="text-5xl font-black tracking-tight text-main mb-4">User Insights</h1>
+            <p class="text-lg text-muted max-w-xl">
+                Analytics and data-driven visibility into library membership and reading patterns.
+            </p>
+        </div>
+        <div class="flex gap-4">
+            <div class="bg-card border border-border px-6 py-3 rounded-2xl flex flex-col">
+                <span class="text-[10px] font-black text-muted uppercase tracking-[0.2em]">Total Members</span>
+                <span class="text-2xl font-black text-main">1,284</span>
+            </div>
+            <div class="bg-card border border-border px-6 py-3 rounded-2xl flex flex-col text-primary border-primary/20">
+                <span class="text-[10px] font-black text-primary uppercase tracking-[0.2em]">Active Now</span>
+                <span class="text-2xl font-black text-primary">42</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Metrics Grid -->
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-16">
+        <!-- Top Readers -->
+        <div class="bg-card rounded-[2rem] border border-border p-10 shadow-sm">
+            <h3 class="text-xl font-bold text-main mb-8 border-b border-border pb-4 uppercase tracking-widest text-xs">Top Readers</h3>
+            <div class="space-y-8">
+                @for (int i = 1; i <= 5; i++)
+                {
+                    <div class="flex items-center gap-4">
+                        <span class="w-8 h-8 rounded-lg bg-body flex items-center justify-center font-black text-muted text-xs">@i</span>
+                        <div class="flex-grow">
+                            <p class="font-bold text-main text-sm">Member User @i</p>
+                            <p class="text-[10px] text-muted font-medium uppercase tracking-widest">@(20 - i) Books Borrowed</p>
+                        </div>
+                        <div class="w-12 bg-body h-1 rounded-full overflow-hidden">
+                            <div class="bg-primary h-full" style="width: @(100 - (i * 15))%"></div>
+                        </div>
+                    </div>
+                }
+            </div>
+        </div>
+
+        <!-- Loyalty Leaders -->
+        <div class="bg-card rounded-[2rem] border border-border p-10 shadow-sm">
+            <h3 class="text-xl font-bold text-main mb-8 border-b border-border pb-4 uppercase tracking-widest text-xs">Point Leaders</h3>
+            <div class="space-y-8">
+                 @for (int i = 1; i <= 5; i++)
+                {
+                    <div class="flex items-center gap-4">
+                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-black text-xs">
+                            L
+                        </div>
+                        <div class="flex-grow">
+                            <p class="font-bold text-main text-sm">User Alpha @i</p>
+                            <p class="text-[10px] text-muted font-medium uppercase tracking-widest">@(5000 - (i * 500)) Points</p>
+                        </div>
+                        <span class="text-xs font-black text-primary">TIER @(6-i)</span>
+                    </div>
+                }
+            </div>
+        </div>
+
+        <!-- Membership Distribution -->
+        <div class="bg-card rounded-[2rem] border border-border p-10 shadow-sm">
+            <h3 class="text-xl font-bold text-main mb-8 border-b border-border pb-4 uppercase tracking-widest text-xs">Growth Patterns</h3>
+            <div class="space-y-6">
+                <div class="flex justify-between items-end gap-2 h-40">
+                    <div class="bg-primary/20 w-full rounded-t-xl" style="height: 40%"></div>
+                    <div class="bg-primary/40 w-full rounded-t-xl" style="height: 60%"></div>
+                    <div class="bg-primary/60 w-full rounded-t-xl" style="height: 30%"></div>
+                    <div class="bg-primary/80 w-full rounded-t-xl" style="height: 90%"></div>
+                    <div class="bg-primary w-full rounded-t-xl" style="height: 100%"></div>
+                </div>
+                <div class="flex justify-between text-[10px] font-black text-muted uppercase tracking-[0.2em] px-2">
+                    <span>Mon</span>
+                    <span>Tue</span>
+                    <span>Wed</span>
+                    <span>Thu</span>
+                    <span>Fri</span>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@code {
+    protected override async Task OnInitializedAsync()
+    {
+        // Data loading logic here
+    }
+}

BlazorWebAssembly/Pages/Weather.razor

@@ -1,57 +0,0 @@
-@page "/weather"
-@inject HttpClient Http
-
-<PageTitle>Weather</PageTitle>
-
-<h1>Weather</h1>
-
-<p>This component demonstrates fetching data from the server.</p>
-
-@if (forecasts == null)
-{
-    <p><em>Loading...</em></p>
-}
-else
-{
-    <table class="table">
-        <thead>
-            <tr>
-                <th>Date</th>
-                <th>Temp. (C)</th>
-                <th>Temp. (F)</th>
-                <th>Summary</th>
-            </tr>
-        </thead>
-        <tbody>
-            @foreach (var forecast in forecasts)
-            {
-                <tr>
-                    <td>@forecast.Date.ToShortDateString()</td>
-                    <td>@forecast.TemperatureC</td>
-                    <td>@forecast.TemperatureF</td>
-                    <td>@forecast.Summary</td>
-                </tr>
-            }
-        </tbody>
-    </table>
-}
-
-@code {
-    private WeatherForecast[]? forecasts;
-
-    protected override async Task OnInitializedAsync()
-    {
-        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
-    }
-
-    public class WeatherForecast
-    {
-        public DateOnly Date { get; set; }
-
-        public int TemperatureC { get; set; }
-
-        public string? Summary { get; set; }
-
-        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
-    }
-}

BlazorWebAssembly/Pages/Wishlist.razor

@@ -0,0 +1,79 @@
+@page "/wishlist"
+@using LibraryManagement.Shared.Models
+@using BlazorWebAssembly.Services
+@inject LibraryApiClient ApiClient
+@inject NavigationManager Navigation
+
+<div class="max-w-6xl mx-auto py-12 px-6">
+    <!-- Header -->
+    <div class="text-center mb-16">
+        <h1 class="text-5xl font-black tracking-tight text-main mb-4">My Wishlist</h1>
+        <p class="text-lg text-muted max-w-xl mx-auto">
+            A curated collection of books you're waiting for. We'll notify you as soon as they're back on the shelf.
+        </p>
+    </div>
+
+    @if (_isLoading)
+    {
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            @for (int i = 0; i < 3; i++)
+            {
+                <div class="animate-pulse bg-card rounded-2xl border border-border h-48"></div>
+            }
+        </div>
+    }
+    else if (!_wishlistItems.Any())
+    {
+        <div class="text-center py-24 bg-card rounded-[2.5rem] border border-dashed border-border">
+            <h3 class="text-2xl font-bold text-main mb-4">Your wishlist is empty</h3>
+            <p class="text-muted mb-8">Found a book that's currently borrowed? Add it to your wishlist!</p>
+            <button @onclick='() => Navigation.NavigateTo("books")' class="bg-primary text-white px-10 py-4 rounded-xl font-black hover:bg-primary-hover transition-all shadow-lg shadow-primary/20">
+                Browse Books
+            </button>
+        </div>
+    }
+    else
+    {
+        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            @foreach (var book in _wishlistItems)
+            {
+                <div class="bg-card rounded-2xl border border-border p-6 flex items-center gap-6 group hover:border-primary transition-all">
+                    <div class="w-20 h-28 bg-body rounded-lg overflow-hidden flex-shrink-0 border border-border flex items-center justify-center">
+                         @if (!string.IsNullOrEmpty(book.CoverUrl))
+                        {
+                            <img src="@book.CoverUrl" alt="@book.Title" class="w-full h-full object-cover" />
+                        }
+                        else
+                        {
+                            <svg class="w-8 h-8 text-muted opacity-20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18 18.246 18.477 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+                        }
+                    </div>
+                    <div class="flex-grow">
+                        <h3 class="font-bold text-main line-clamp-1 group-hover:text-primary transition-colors">@book.Title</h3>
+                        <p class="text-xs text-muted mb-4 font-medium">@book.Author</p>
+                        
+                        <div class="flex items-center justify-between mt-auto">
+                            <span class='px-2 py-0.5 rounded text-[9px] font-black uppercase tracking-widest @(book.AvailableCopies > 0 ? "bg-green-500/10 text-green-600" : "bg-orange-500/10 text-orange-600")'>
+                                @(book.AvailableCopies > 0 ? "Available" : "Waiting")
+                            </span>
+                            <button class="text-xs font-bold text-red-400 hover:text-red-500">Remove</button>
+                        </div>
+                    </div>
+                </div>
+            }
+        </div>
+    }
+</div>
+
+@code {
+    private bool _isLoading = false;
+    private List<BookDto> _wishlistItems = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        // Mocking for now, would use a real service
+        _isLoading = true;
+        await Task.Delay(500); 
+        _isLoading = false;
+    }
+}

BlazorWebAssembly/Program.cs

@@ -1,4 +1,8 @@
 using BlazorWebAssembly;
+using BlazorWebAssembly.Providers;
+using BlazorWebAssembly.Services;
+using Blazored.LocalStorage;
+using Microsoft.AspNetCore.Components.Authorization;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
 
@@ -6,6 +10,26 @@ var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.RootComponents.Add<App>("#app");
 builder.RootComponents.Add<HeadOutlet>("head::after");
 
-builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
+// Add HttpClient with Backend address
+builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri("https://localhost:7028/") });
+
+// Add Blazored LocalStorage
+builder.Services.AddBlazoredLocalStorage();
+
+// Add Authorization Core
+builder.Services.AddAuthorizationCore();
+
+// Register Custom AuthStateProvider
+builder.Services.AddScoped<JwtAuthenticationStateProvider>();
+builder.Services.AddScoped<AuthenticationStateProvider>(sp => sp.GetRequiredService<JwtAuthenticationStateProvider>());
+
+// Register AuthService
+builder.Services.AddScoped<AuthService>();
+
+// Register ThemeService
+builder.Services.AddScoped<ThemeService>();
+
+// Register LibraryApiClient
+builder.Services.AddScoped<LibraryApiClient>();
 
 await builder.Build().RunAsync();

BlazorWebAssembly/Providers/JwtAuthenticationStateProvider.cs

@@ -0,0 +1,87 @@
+using System.Net.Http.Headers;
+using System.Security.Claims;
+using System.Text.Json;
+using Blazored.LocalStorage;
+using Microsoft.AspNetCore.Components.Authorization;
+
+namespace BlazorWebAssembly.Providers
+{
+    public class JwtAuthenticationStateProvider : AuthenticationStateProvider
+    {
+        private readonly ILocalStorageService _localStorage;
+        private readonly HttpClient _httpClient;
+        private readonly AuthenticationState _anonymous;
+
+        public JwtAuthenticationStateProvider(ILocalStorageService localStorage, HttpClient httpClient)
+        {
+            _localStorage = localStorage;
+            _httpClient = httpClient;
+            _anonymous = new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
+        }
+
+        public override async Task<AuthenticationState> GetAuthenticationStateAsync()
+        {
+            var token = await _localStorage.GetItemAsync<string>("authToken");
+
+            if (string.IsNullOrWhiteSpace(token))
+                return _anonymous;
+
+            _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("bearer", token);
+
+            return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity(ParseClaimsFromJwt(token), "jwt")));
+        }
+
+        public void NotifyUserAuthentication(string token)
+        {
+            var authenticatedUser = new ClaimsPrincipal(new ClaimsIdentity(ParseClaimsFromJwt(token), "jwt"));
+            var authState = Task.FromResult(new AuthenticationState(authenticatedUser));
+            NotifyAuthenticationStateChanged(authState);
+        }
+
+        public void NotifyUserLogout()
+        {
+            var authState = Task.FromResult(_anonymous);
+            NotifyAuthenticationStateChanged(authState);
+        }
+
+        private IEnumerable<Claim> ParseClaimsFromJwt(string jwt)
+        {
+            var claims = new List<Claim>();
+            var payload = jwt.Split('.')[1];
+
+            var jsonBytes = ParseBase64WithoutPadding(payload);
+
+            var keyValuePairs = JsonSerializer.Deserialize<Dictionary<string, object>>(jsonBytes);
+
+            if (keyValuePairs != null)
+            {
+                foreach (var kvp in keyValuePairs)
+                {
+                    if (kvp.Value is JsonElement element && element.ValueKind == JsonValueKind.Array)
+                    {
+                        foreach (var item in element.EnumerateArray())
+                        {
+                            claims.Add(new Claim(kvp.Key, item.ToString()));
+                        }
+                    }
+                    else
+                    {
+                        claims.Add(new Claim(kvp.Key, kvp.Value.ToString() ?? ""));
+                    }
+                }
+            }
+
+            return claims;
+        }
+
+        private byte[] ParseBase64WithoutPadding(string base64)
+        {
+            switch (base64.Length % 4)
+            {
+                case 2: base64 += "=="; break;
+                case 3: base64 += "="; break;
+            }
+            return Convert.FromBase64String(base64);
+        }
+    }
+}

BlazorWebAssembly/Services/AuthService.cs

@@ -0,0 +1,69 @@
+using System.Net.Http.Json;
+using Blazored.LocalStorage;
+using LibraryManagement.Shared.Models;
+using BlazorWebAssembly.Providers;
+using Microsoft.AspNetCore.Components.Authorization;
+
+namespace BlazorWebAssembly.Services
+{
+    public class AuthService
+    {
+        private readonly HttpClient _httpClient;
+        private readonly ILocalStorageService _localStorage;
+        private readonly AuthenticationStateProvider _authStateProvider;
+
+        public AuthService(HttpClient httpClient, ILocalStorageService localStorage, AuthenticationStateProvider authStateProvider)
+        {
+            _httpClient = httpClient;
+            _localStorage = localStorage;
+            _authStateProvider = authStateProvider;
+        }
+
+        public async Task<bool> LoginAsync(LoginRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/auth/login", request);
+            
+            if (!response.IsSuccessStatusCode)
+                return false;
+
+            var authResponse = await response.Content.ReadFromJsonAsync<AuthResponse>();
+            
+            if (authResponse != null)
+            {
+                await _localStorage.SetItemAsync("authToken", authResponse.Token);
+                ((JwtAuthenticationStateProvider)_authStateProvider).NotifyUserAuthentication(authResponse.Token);
+                _httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("bearer", authResponse.Token);
+                return true;
+            }
+
+            return false;
+        }
+
+        public async Task<bool> RegisterAsync(RegisterRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/auth/register", request);
+            
+            if (!response.IsSuccessStatusCode)
+                return false;
+
+            var authResponse = await response.Content.ReadFromJsonAsync<AuthResponse>();
+            if (authResponse != null)
+            {
+                // Auto login after registration
+                await _localStorage.SetItemAsync("authToken", authResponse.Token);
+                ((JwtAuthenticationStateProvider)_authStateProvider).NotifyUserAuthentication(authResponse.Token);
+                _httpClient.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("bearer", authResponse.Token);
+                return true;
+            }
+
+            return false;
+        }
+
+        public async Task Logout()
+        {
+            await _localStorage.RemoveItemAsync("authToken");
+            ((JwtAuthenticationStateProvider)_authStateProvider).NotifyUserLogout();
+            _httpClient.DefaultRequestHeaders.Authorization = null;
+        }
+    }
+}

BlazorWebAssembly/Services/LibraryApiClient.cs

@@ -0,0 +1,131 @@
+using System.Net.Http.Json;
+using System.Text.Json;
+using System.Text.Json.Serialization;
+using LibraryManagement.Shared.Models;
+
+namespace BlazorWebAssembly.Services
+{
+    public class LibraryApiClient
+    {
+        private readonly HttpClient _httpClient;
+
+        public LibraryApiClient(HttpClient httpClient)
+        {
+            _httpClient = httpClient;
+        }
+
+        #region Books
+        public async Task<IEnumerable<BookDto>> GetBooksAsync(int? categoryId = null)
+        {
+            var url = categoryId.HasValue ? $"api/books?categoryId={categoryId}" : "api/books";
+            return await _httpClient.GetFromJsonAsync<IEnumerable<BookDto>>(url) ?? Enumerable.Empty<BookDto>();
+        }
+
+        public async Task<BookDto?> GetBookAsync(int id)
+        {
+            return await _httpClient.GetFromJsonAsync<BookDto>($"api/books/{id}");
+        }
+
+        public async Task<BookDto?> CreateBookAsync(BookCreateRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/books", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<BookDto>() : null;
+        }
+
+        public async Task<BookDto?> UpdateBookAsync(int id, BookUpdateRequest request)
+        {
+            var response = await _httpClient.PutAsJsonAsync($"api/books/{id}", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<BookDto>() : null;
+        }
+
+        public async Task<bool> DeleteBookAsync(int id)
+        {
+            var response = await _httpClient.DeleteAsync($"api/books/{id}");
+            return response.IsSuccessStatusCode;
+        }
+        #endregion
+
+        #region Borrowings
+        public async Task<BorrowingDto?> BorrowBookAsync(BorrowRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/borrowings/borrow", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<BorrowingDto>() : null;
+        }
+
+        public async Task<BorrowingDto?> ReturnBookAsync(Guid id)
+        {
+            var response = await _httpClient.PostAsync($"api/borrowings/return/{id}", null);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<BorrowingDto>() : null;
+        }
+
+        public async Task<IEnumerable<BorrowingDto>> GetMyBorrowingsAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<IEnumerable<BorrowingDto>>("api/borrowings/me") ?? Enumerable.Empty<BorrowingDto>();
+        }
+
+        public async Task<IEnumerable<BorrowingDto>> GetAllBorrowingsAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<IEnumerable<BorrowingDto>>("api/borrowings") ?? Enumerable.Empty<BorrowingDto>();
+        }
+
+        public async Task<bool> RequestReturnAsync(Guid borrowingId)
+        {
+            var response = await _httpClient.PostAsync($"api/borrowings/return-request/{borrowingId}", null);
+            return response.IsSuccessStatusCode;
+        }
+        #endregion
+
+        #region Categories
+        public async Task<IEnumerable<CategoryDto>> GetCategoriesAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<IEnumerable<CategoryDto>>("api/categories") ?? Enumerable.Empty<CategoryDto>();
+        }
+        #endregion
+
+        #region Subscriptions
+        public async Task<IEnumerable<MembershipDto>> GetMembershipsAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<IEnumerable<MembershipDto>>("api/memberships") ?? Enumerable.Empty<MembershipDto>();
+        }
+
+        public async Task<SubscriptionDto?> GetMySubscriptionAsync()
+        {
+            try { return await _httpClient.GetFromJsonAsync<SubscriptionDto>("api/subscriptions/me"); }
+            catch { return null; }
+        }
+
+        public async Task<SubscriptionDto?> SubscribeAsync(SubscribeRequest request)
+        {
+            var response = await _httpClient.PostAsJsonAsync("api/subscriptions/subscribe", request);
+            return response.IsSuccessStatusCode ? await response.Content.ReadFromJsonAsync<SubscriptionDto>() : null;
+        }
+        #endregion
+
+        #region Loyalty
+        public async Task<LoyaltyAccountDto?> GetMyLoyaltyAccountAsync()
+        {
+            try
+            {
+                var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
+                return await _httpClient.GetFromJsonAsync<LoyaltyAccountDto>("api/Loyalty/my-account", options);
+            }
+            catch { return null; }
+        }
+
+        public async Task<IEnumerable<LoyaltyRewardDto>> GetActiveRewardsAsync()
+        {
+            return await _httpClient.GetFromJsonAsync<IEnumerable<LoyaltyRewardDto>>("api/Loyalty/rewards") ?? Enumerable.Empty<LoyaltyRewardDto>();
+        }
+
+        public async Task<(bool Success, string Message)> ClaimRewardAsync(string rewardId, string? notes = null)
+        {
+            var request = new ClaimRewardRequestDto { RewardId = rewardId, Notes = notes };
+            var response = await _httpClient.PostAsJsonAsync("api/Loyalty/claim", request);
+            
+            if (response.IsSuccessStatusCode) return (true, "Claimed successfully!");
+            var error = await response.Content.ReadAsStringAsync();
+            return (false, error);
+        }
+        #endregion
+    }
+}

BlazorWebAssembly/Services/ThemeService.cs

@@ -0,0 +1,40 @@
+using Microsoft.JSInterop;
+
+namespace BlazorWebAssembly.Services
+{
+    public class ThemeService
+    {
+        private readonly IJSRuntime _jsRuntime;
+        private string _currentTheme = "light";
+
+        public event Action<string>? OnThemeChanged;
+
+        public ThemeService(IJSRuntime jsRuntime)
+        {
+            _jsRuntime = jsRuntime;
+        }
+
+        public string CurrentTheme => _currentTheme;
+
+        public async Task InitializeAsync()
+        {
+            var savedTheme = await _jsRuntime.InvokeAsync<string>("localStorage.getItem", "app-theme");
+            if (!string.IsNullOrEmpty(savedTheme))
+            {
+                await SetThemeAsync(savedTheme);
+            }
+            else
+            {
+                await SetThemeAsync("light");
+            }
+        }
+
+        public async Task SetThemeAsync(string theme)
+        {
+            _currentTheme = theme;
+            await _jsRuntime.InvokeVoidAsync("localStorage.setItem", "app-theme", theme);
+            await _jsRuntime.InvokeVoidAsync("document.documentElement.setAttribute", "data-theme", theme);
+            OnThemeChanged?.Invoke(theme);
+        }
+    }
+}

BlazorWebAssembly/_Imports.razor

@@ -1,4 +1,4 @@
-@using System.Net.Http
+@using System.Net.Http
 @using System.Net.Http.Json
 @using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Routing
@@ -8,3 +8,7 @@
 @using Microsoft.JSInterop
 @using BlazorWebAssembly
 @using BlazorWebAssembly.Layout
+@using Microsoft.AspNetCore.Components.Authorization
+@using BlazorWebAssembly.Providers
+@using BlazorWebAssembly.Services
+@using LibraryManagement.Shared.Models

BlazorWebAssembly/wwwroot/css/app.css

@@ -1,103 +1,77 @@
-html, body {
-    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-h1:focus {
-    outline: none;
-}
-
-a, .btn-link {
-    color: #0071c1;
-}
-
-.btn-primary {
-    color: #fff;
-    background-color: #1b6ec2;
-    border-color: #1861ac;
-}
-
-.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
-  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
-}
-
-.content {
-    padding-top: 1.1rem;
+/* Design System Tokens */
+:root {
+    --transition-speed: 0.3s;
+    --border-radius: 16px;
+    --font-main: 'Outfit', 'Inter', system-ui, sans-serif;
 }
 
-.valid.modified:not([type=checkbox]) {
-    outline: 1px solid #26b050;
+/* --- LIGHT THEME (Olive + Gold) --- */
+[data-theme='light'] {
+    --bg-body: #f7f5ef;
+    --bg-card: #ffffff;
+    --bg-nav: #f7f5ef;
+    --text-main: #3a3d2e;
+    --text-muted: #6b705c;
+    --primary: #a68a64;
+    --primary-hover: #8e7555;
+    --accent: #6b705c;
+    --border: #d6c7a1;
+    --shadow: 0 4px 6px -1px rgb(58 61 46 / 0.1);
+    --glass-border: rgba(214, 199, 161, 0.5);
+    --text-on-primary: #ffffff;
 }
 
-.invalid {
-    outline: 1px solid red;
+/* --- DARK THEME (Mute Purple Stone) --- */
+[data-theme='dark'] {
+    --bg-body: #2d2838;
+    --bg-card: #373245;
+    --bg-nav: #1e1b26;
+    --text-main: #f8f7fc;
+    --text-muted: #b8a9d9;
+    --primary: #b8a9d9;
+    --primary-hover: #e9e4f5;
+    --accent: #7c6a9b;
+    --border: #4a4458;
+    --shadow: 0 10px 15px -3px rgb(0 0 0 / 0.5);
+    --glass-border: rgba(184, 169, 217, 0.1);
+    --text-on-primary: #2d2838;
 }
 
-.validation-message {
-    color: red;
+/* --- EMERALD THEME (Slate + Mint) --- */
+[data-theme='emerald'] {
+    --bg-body: #f5f7f8;
+    --bg-card: #ffffff;
+    --bg-nav: #2b3a42;
+    --text-main: #2b3a42;
+    --text-muted: #5c8374;
+    --primary: #8fb9a8;
+    --primary-hover: #7aa594;
+    --accent: #5c8374;
+    --border: #dce3e5;
+    --shadow: 0 4px 6px -1px rgb(43 58 66 / 0.1);
+    --glass-border: rgba(143, 185, 168, 0.2);
+    --text-on-primary: #2b3a42;
 }
 
-#blazor-error-ui {
-    background: lightyellow;
-    bottom: 0;
-    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
-    display: none;
-    left: 0;
-    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
-    position: fixed;
-    width: 100%;
-    z-index: 1000;
-}
-
-    #blazor-error-ui .dismiss {
-        cursor: pointer;
-        position: absolute;
-        right: 0.75rem;
-        top: 0.5rem;
-    }
-
-.blazor-error-boundary {
-    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
-    padding: 1rem 1rem 1rem 3.7rem;
-    color: white;
-}
-
-    .blazor-error-boundary::after {
-        content: "An error has occurred."
-    }
-
-.loading-progress {
-    position: relative;
-    display: block;
-    width: 8rem;
-    height: 8rem;
-    margin: 20vh auto 1rem auto;
-}
-
-    .loading-progress circle {
-        fill: none;
-        stroke: #e0e0e0;
-        stroke-width: 0.6rem;
-        transform-origin: 50% 50%;
-        transform: rotate(-90deg);
-    }
-
-        .loading-progress circle:last-child {
-            stroke: #1b6ec2;
-            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
-            transition: stroke-dasharray 0.05s ease-in-out;
-        }
-
-.loading-progress-text {
-    position: absolute;
-    text-align: center;
-    font-weight: bold;
-    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
+/* Global resets */
+html, body {
+    margin: 0;
+    padding: 0;
+    font-family: var(--font-main);
+    background-color: var(--bg-body);
+    color: var(--text-main);
+    transition: background-color var(--transition-speed), color var(--transition-speed);
 }
 
-    .loading-progress-text:after {
-        content: var(--blazor-load-percentage-text, "Loading");
-    }
+/* Scrollbar styling */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
+::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
 
-code {
-    color: #c02d76;
+/* Animations */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: translateY(0); }
 }
+.animate-fade { animation: fadeIn 0.4s ease-out forwards; }

BlazorWebAssembly/wwwroot/index.html

@@ -4,21 +4,56 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>BlazorWebAssembly</title>
+    <title>LibraryLuxe | Management System</title>
     <base href="/" />
-    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link rel="stylesheet" href="css/app.css" />
     <link rel="icon" type="image/png" href="favicon.png" />
     <link href="BlazorWebAssembly.styles.css" rel="stylesheet" />
+    
+    <!-- Premium Typography -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
+
+    <!-- Tailwind CSS CDN -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: 'var(--primary)',
+                        hover: 'var(--primary-hover)',
+                        main: 'var(--text-main)',
+                        muted: 'var(--text-muted)',
+                        body: 'var(--bg-body)',
+                        card: 'var(--bg-card)',
+                        nav: 'var(--bg-nav)',
+                        border: 'var(--border)',
+                    },
+                    borderRadius: {
+                        'xl': 'var(--border-radius)',
+                    }
+                }
+            }
+        }
+    </script>
+
+    <!-- Anti-Flicker Theme Script -->
+    <script>
+        (function() {
+            const savedTheme = localStorage.getItem('app-theme') || 'light';
+            document.documentElement.setAttribute('data-theme', savedTheme);
+        })();
+    </script>
 </head>
 
 <body>
     <div id="app">
-        <svg class="loading-progress">
-            <circle r="40%" cx="50%" cy="50%" />
-            <circle r="40%" cx="50%" cy="50%" />
-        </svg>
-        <div class="loading-progress-text"></div>
+        <div class="loading-container">
+            <div class="loader"></div>
+            <p>Entering LibraryLuxe...</p>
+        </div>
     </div>
 
     <div id="blazor-error-ui">
@@ -26,7 +61,33 @@
         <a href="" class="reload">Reload</a>
         <a class="dismiss">🗙</a>
     </div>
+    
     <script src="_framework/blazor.webassembly.js"></script>
 </body>
 
+<style>
+    .loading-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        font-family: 'Outfit', sans-serif;
+        color: #3b82f6;
+    }
+    .loader {
+        border: 4px solid #f3f3f3;
+        border-top: 4px solid #3b82f6;
+        border-radius: 50%;
+        width: 40px;
+        height: 40px;
+        animation: spin 1s linear infinite;
+        margin-bottom: 1rem;
+    }
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+</style>
+
 </html>

Frontend/Controllers/AuthController.cs

@@ -2,7 +2,7 @@ using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Authentication;
 using Microsoft.AspNetCore.Authentication.Cookies;
 using System.Security.Claims;
-using Frontend.Models.Dtos;
+using LibraryManagement.Shared.Models;
 using Frontend.Services;
 
 namespace Frontend.Controllers
@@ -108,3 +108,4 @@ namespace Frontend.Controllers
         }
     }
 }
+

Frontend/Controllers/BooksController.cs

@@ -1,6 +1,6 @@
 using Microsoft.AspNetCore.Mvc;
 using Frontend.Services;
-using Frontend.Models.Dtos;
+using LibraryManagement.Shared.Models;
 
 namespace Frontend.Controllers
 {
@@ -125,3 +125,4 @@ namespace Frontend.Controllers
         }
     }
 }
+

Frontend/Controllers/BorrowingsController.cs

@@ -1,5 +1,5 @@
 using Frontend.Models;
-using Frontend.Models.Dtos;
+using LibraryManagement.Shared.Models;
 using Frontend.Services;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
@@ -107,3 +107,4 @@ namespace Frontend.Controllers
         }
     }
 }
+

Frontend/Controllers/HomeController.cs

@@ -25,7 +25,7 @@ namespace Frontend.Controllers
             ViewBag.TotalMembers = 0;
             ViewBag.LoyaltyPoints = 0;
             ViewBag.LoyaltyStatus = "Not Authenticated";
-            ViewBag.RecentBooks = Enumerable.Empty<Frontend.Models.Dtos.BookDto>();
+            ViewBag.RecentBooks = Enumerable.Empty<LibraryManagement.Shared.Models.BookDto>();
 
             try 
             {
@@ -90,3 +90,4 @@ namespace Frontend.Controllers
         }
     }
 }
+

Frontend/Controllers/MembersController.cs

@@ -1,6 +1,6 @@
 using Microsoft.AspNetCore.Mvc;
 using Frontend.Services;
-using Frontend.Models.Dtos;
+using LibraryManagement.Shared.Models;
 using Microsoft.AspNetCore.Authorization;
 
 namespace Frontend.Controllers
@@ -18,12 +18,12 @@ namespace Frontend.Controllers
         public async Task<IActionResult> Index(int page = 1)
         {
             const int pageSize = 10;
-            var allUsers = await _apiClient.GetUsersAsync() ?? Enumerable.Empty<Frontend.Models.Dtos.UserDto>();
+            var allUsers = await _apiClient.GetUsersAsync() ?? Enumerable.Empty<LibraryManagement.Shared.Models.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>
+            var pagedResult = new Frontend.Models.PagedResult<LibraryManagement.Shared.Models.UserDto>
             {
                 Items = allUsers.Skip((page - 1) * pageSize).Take(pageSize),
                 CurrentPage = page,
@@ -153,3 +153,4 @@ namespace Frontend.Controllers
         }
     }
 }
+

Frontend/Controllers/MembershipController.cs

@@ -1,6 +1,6 @@
 using Microsoft.AspNetCore.Mvc;
 using Frontend.Services;
-using Frontend.Models.Dtos;
+using LibraryManagement.Shared.Models;
 using Frontend.Models;
 using Microsoft.AspNetCore.Authorization;
 using System.Threading.Tasks;
@@ -66,3 +66,4 @@ namespace Frontend.Controllers
         }
     }
 }
+

Frontend/Controllers/RewardsController.cs

@@ -1,5 +1,5 @@
 using Frontend.Models;
-using Frontend.Models.Dtos;
+using LibraryManagement.Shared.Models;
 using Frontend.Services;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
@@ -90,3 +90,4 @@ namespace Frontend.Controllers
         }
     }
 }
+

Frontend/Controllers/SubscriptionsController.cs

@@ -1,6 +1,6 @@
 using Microsoft.AspNetCore.Mvc;
 using Frontend.Services;
-using Frontend.Models.Dtos;
+using LibraryManagement.Shared.Models;
 using Frontend.Models;
 using Microsoft.AspNetCore.Authorization;
 using System.Threading.Tasks;
@@ -53,3 +53,4 @@ namespace Frontend.Controllers
         }
     }
 }
+

Frontend/Frontend.csproj

@@ -1,5 +1,9 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
+  <ItemGroup>
+    <ProjectReference Include="..\LibraryManagement.Shared\LibraryManagement.Shared.csproj" />
+  </ItemGroup>
+
   <PropertyGroup>
     <TargetFramework>net8.0</TargetFramework>
     <Nullable>enable</Nullable>

Frontend/Models/Dtos/LibraryDtos.cs

@@ -1,285 +0,0 @@
-using System.Text.Json.Serialization;
-
-namespace Frontend.Models.Dtos
-{
-    // Auth DTOs
-    public class RegisterRequest
-    {
-        public string FullName { get; set; } = string.Empty;
-        public string Email { get; set; } = string.Empty;
-        public string Password { get; set; } = string.Empty;
-        public string? PhoneNumber { get; set; }
-        public string? Address { get; set; }
-        public string? StudentId { get; set; }
-    }
-
-    public class LoginRequest
-    {
-        public string Email { get; set; } = string.Empty;
-        public string Password { get; set; } = string.Empty;
-    }
-
-    public class AuthResponse
-    {
-        public string Token { get; set; } = string.Empty;
-        public string FullName { get; set; } = string.Empty;
-        public string Role { get; set; } = string.Empty;
-        public DateTime Expiry { get; set; }
-    }
-
-    // Book DTOs
-    public class BookDto
-    {
-        public int Id { get; set; }
-        public string Title { get; set; } = string.Empty;
-        public string Isbn { get; set; } = string.Empty;
-        public string Author { get; set; } = string.Empty;
-        public string Status { get; set; } = string.Empty;
-        public bool IsActive { get; set; }
-        public string? Description { get; set; }
-        public int TotalCopies { get; set; }
-        public int AvailableCopies { get; set; }
-        public DateTime CreatedAt { get; set; }
-        public DateTime? UpdatedAt { get; set; }
-        public string? CoverUrl { get; set; }
-        public List<BookCategoryDto> Categories { get; set; } = new();
-    }
-
-    public class BookCategoryDto
-    {
-        public int Id { get; set; }
-        public string Name { get; set; } = string.Empty;
-    }
-
-    public class BookCreateRequest
-    {
-        public string Title { get; set; } = string.Empty;
-        public string Isbn { get; set; } = string.Empty;
-        public string Author { get; set; } = string.Empty;
-        public string? Description { get; set; }
-        public int TotalCopies { get; set; }
-        public List<int>? CategoryIds { get; set; }
-    }
-
-    public class BookUpdateRequest
-    {
-        public string Title { get; set; } = string.Empty;
-        public string Author { get; set; } = string.Empty;
-        public string? Description { get; set; }
-        public int TotalCopies { get; set; }
-        public List<int>? CategoryIds { get; set; }
-    }
-
-    // Borrowing DTOs
-    public class BorrowingDto
-    {
-        public Guid Id { get; set; }
-        public Guid UserId { get; set; }
-        public string UserEmail { get; set; } = string.Empty;
-        public int BookId { get; set; }
-        public string BookTitle { get; set; } = string.Empty;
-        public DateTime BorrowDate { get; set; }
-        public DateTime DueDate { get; set; }
-        public DateTime? ReturnDate { get; set; } // This is ActualReturnDate in some contexts
-        public string Status { get; set; } = string.Empty;
-        public decimal FineAmount { get; set; }
-        public bool IsFinePaid { get; set; }
-    }
-
-    public class BorrowRequest
-    {
-        public int BookId { get; set; }
-    }
-
-    // Category DTOs
-    public class CategoryDto
-    {
-        public int Id { get; set; }
-        public string Name { get; set; } = string.Empty;
-    }
-
-    public class CategoryCreateRequest
-    {
-        public string Name { get; set; } = string.Empty;
-    }
-
-    // Subscription & Membership DTOs
-    public class MembershipDto
-    {
-        public int Id { get; set; }
-        public string Type { get; set; } = string.Empty;
-        public int MaxBooks { get; set; }
-        public int BorrowingDays { get; set; }
-        public decimal Price { get; set; }
-        public int DurationMonths { get; set; }
-        public string? RewardId { get; set; }
-    }
-
-    public class SubscriptionDto
-    {
-        public Guid Id { get; set; }
-        public Guid UserId { get; set; }
-        public int MembershipId { get; set; }
-        public string MembershipType { get; set; } = string.Empty;
-        public string UserName { get; set; } = string.Empty;
-        public string UserEmail { get; set; } = string.Empty;
-        public DateTime StartDate { get; set; }
-        public DateTime ExpiryDate { get; set; }
-        public bool IsActive { get; set; }
-        public bool IsExpired => DateTime.UtcNow > ExpiryDate;
-    }
-
-    public class SubscribeRequest
-    {
-        public int MembershipId { get; set; }
-    }
-
-    public class AdminSubscribeRequest
-    {
-        public Guid UserId { get; set; }
-        public int MembershipId { get; set; }
-    }
-
-    // Loyalty DTOs
-    public class LoyaltyAccountDto
-    {
-        [JsonPropertyName("id")]
-        public string Id { get; set; } = string.Empty;
-
-        // Some responses use `accountId` instead of `id`.
-        [JsonPropertyName("accountId")]
-        public string? AccountId { get; set; }
-
-        [JsonPropertyName("externalUserId")]
-        public string ExternalUserId { get; set; } = string.Empty;
-
-        [JsonPropertyName("currentBalance")]
-        public double CurrentBalance { get; set; }
-
-        [JsonPropertyName("tier")]
-        public string Tier { get; set; } = string.Empty;
-
-        [JsonPropertyName("lifetimePoints")]
-        public double LifetimePoints { get; set; }
-    }
-
-    public class LoyaltyRewardDto
-    {
-        [JsonPropertyName("id")]
-        public string Id { get; set; } = string.Empty;
-
-        [JsonPropertyName("name")]
-        public string Name { get; set; } = string.Empty;
-
-        [JsonPropertyName("description")]
-        public string Description { get; set; } = string.Empty;
-
-        [JsonPropertyName("pointCost")]
-        public double PointCost { get; set; }
-
-        [JsonPropertyName("stockQuantity")]
-        public int StockQuantity { get; set; }
-
-        [JsonPropertyName("isActive")]
-        public bool IsActive { get; set; }
-    }
-
-    public class ClaimRewardRequestDto
-    {
-        public string RewardId { get; set; } = string.Empty;
-        public string? Notes { get; set; }
-    }
-
-    // User DTOs
-    public class UserDto
-    {
-        public Guid Id { get; set; }
-        public string FullName { get; set; } = string.Empty;
-        public string Email { get; set; } = string.Empty;
-        public string? PhoneNumber { get; set; }
-        public string Role { get; set; } = string.Empty;
-        public bool IsActive { get; set; }
-        public string? StudentId { get; set; }
-        public string? Address { get; set; }
-        public DateTime CreatedAt { get; set; }
-        public DateTime? UpdatedAt { get; set; }
-        public bool? BanStatus { get; set; }
-        public DateTime? SuspensionEndDate { get; set; }
-    }
-
-    public class UserCreateRequest
-    {
-        public string FullName { get; set; } = string.Empty;
-        public string Email { get; set; } = string.Empty;
-        public string Password { get; set; } = string.Empty;
-        public string? PhoneNumber { get; set; }
-        public string? StudentId { get; set; }
-        public string? Address { get; set; }
-    }
-
-    public class UserUpdateRequest
-    {
-        public string FullName { get; set; } = string.Empty;
-        public string? PhoneNumber { get; set; }
-        public string? StudentId { get; set; }
-        public string? Address { get; set; }
-    }
-
-    public class UserRoleUpdateRequest
-    {
-        public string Role { get; set; } = string.Empty;
-    }
-
-    // Points History DTOs
-    public class PointHistoryEntryDto
-    {
-        [JsonPropertyName("id")]
-        public int Id { get; set; }
-        [JsonPropertyName("accountId")]
-        public string AccountId { get; set; } = string.Empty;
-        [JsonPropertyName("externalUserId")]
-        public string? ExternalUserId { get; set; }
-        [JsonPropertyName("pointDelta")]
-        public double PointDelta { get; set; }
-        [JsonPropertyName("eventKey")]
-        public string EventKey { get; set; } = string.Empty;
-        [JsonPropertyName("description")]
-        public string Description { get; set; } = string.Empty;
-        [JsonPropertyName("referenceId")]
-        public string? ReferenceId { get; set; }
-        [JsonPropertyName("createdAt")]
-        public DateTime CreatedAt { get; set; }
-
-        [JsonPropertyName("rewardId")]
-        public string? RewardId { get; set; }
-
-        [JsonPropertyName("rewardName")]
-        public string? RewardName { get; set; }
-
-        [JsonPropertyName("redemptionStatus")]
-        public string? RedemptionStatus { get; set; }
-
-        [JsonPropertyName("redeemedAt")]
-        public DateTime? RedeemedAt { get; set; }
-    }
-
-    public class UserPointsHistoryDto
-    {
-        [JsonPropertyName("userId")]
-        public Guid UserId { get; set; }
-        [JsonPropertyName("userName")]
-        public string UserName { get; set; } = string.Empty;
-        [JsonPropertyName("userEmail")]
-        public string UserEmail { get; set; } = string.Empty;
-        [JsonPropertyName("accountId")]
-        public string AccountId { get; set; } = string.Empty;
-        [JsonPropertyName("currentBalance")]
-        public double CurrentBalance { get; set; }
-        [JsonPropertyName("tier")]
-        public string Tier { get; set; } = string.Empty;
-        [JsonPropertyName("history")]
-        public IEnumerable<PointHistoryEntryDto> History { get; set; } = Enumerable.Empty<PointHistoryEntryDto>();
-        [JsonPropertyName("redemptions")]
-        public IEnumerable<LoyaltyRedemptionDto> Redemptions { get; set; } = Enumerable.Empty<LoyaltyRedemptionDto>();
-    }
-}

Frontend/Models/Dtos/LoyaltyRedemptionDto.cs

@@ -1,32 +0,0 @@
-using System;
-using System.Text.Json.Serialization;
-
-namespace Frontend.Models.Dtos
-{
-    public class LoyaltyRedemptionDto
-    {
-        [JsonPropertyName("id")]
-        public string Id { get; set; } = string.Empty;
-
-        [JsonPropertyName("systemId")]
-        public string SystemId { get; set; } = string.Empty;
-
-        [JsonPropertyName("externalUserId")]
-        public string ExternalUserId { get; set; } = string.Empty;
-
-        [JsonPropertyName("rewardId")]
-        public string? RewardId { get; set; }
-
-        [JsonPropertyName("rewardName")]
-        public string RewardName { get; set; } = string.Empty;
-
-        [JsonPropertyName("pointCost")]
-        public double PointCost { get; set; }
-
-        [JsonPropertyName("status")]
-        public string Status { get; set; } = string.Empty;
-
-        [JsonPropertyName("redeemedAt")]
-        public DateTime RedeemedAt { get; set; }
-    }
-}

Frontend/Models/MemberDetailsViewModel.cs

@@ -1,4 +1,4 @@
-using Frontend.Models.Dtos;
+using LibraryManagement.Shared.Models;
 using System.Collections.Generic;
 
 namespace Frontend.Models
@@ -10,3 +10,4 @@ namespace Frontend.Models
         public List<MembershipDto> AvailableMemberships { get; set; } = new();
     }
 }
+

Frontend/Models/MembershipViewModel.cs

@@ -1,4 +1,4 @@
-using Frontend.Models.Dtos;
+using LibraryManagement.Shared.Models;
 using System.Collections.Generic;
 
 namespace Frontend.Models
@@ -12,3 +12,4 @@ namespace Frontend.Models
         public Dictionary<string, double> RewardPointCosts { get; set; } = new Dictionary<string, double>();
     }
 }
+

Frontend/Models/RewardsViewModel.cs

@@ -1,4 +1,4 @@
-using Frontend.Models.Dtos;
+using LibraryManagement.Shared.Models;
 
 namespace Frontend.Models
 {
@@ -19,3 +19,4 @@ namespace Frontend.Models
         public IEnumerable<UserPointsHistoryDto> AllMembersHistory { get; set; } = Enumerable.Empty<UserPointsHistoryDto>();
     }
 }
+

Frontend/Models/SubscriptionsViewModel.cs

@@ -1,4 +1,4 @@
-using Frontend.Models.Dtos;
+using LibraryManagement.Shared.Models;
 
 namespace Frontend.Models
 {
@@ -8,3 +8,4 @@ namespace Frontend.Models
         public List<SubscriptionDto> ActiveSubscriptions { get; set; } = new();
     }
 }
+

Frontend/Services/LibraryApiClient.cs

@@ -1,11 +1,21 @@
+using System.Text.Json.Serialization;
 using System.Net.Http.Json;
 using System.Text.Json;
-using Frontend.Models.Dtos;
+using LibraryManagement.Shared.Models; // Changed from LibraryManagement.Shared.Models
 
 namespace Frontend.Services
 {
     public class LibraryApiClient
     {
+        public async Task<IEnumerable<LoyaltyRewardDto>> GetActiveRewardsAsync()
+        {
+            try
+            {
+                var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
+                return await _httpClient.GetFromJsonAsync<IEnumerable<LoyaltyRewardDto>>("api/Loyalty/rewards", options) ?? Enumerable.Empty<LoyaltyRewardDto>();
+            }
+            catch { return Enumerable.Empty<LoyaltyRewardDto>(); }
+        }
         private readonly HttpClient _httpClient;
         private readonly IHttpContextAccessor _httpContextAccessor;
 
@@ -232,11 +242,8 @@ namespace Frontend.Services
         {
             try
             {
-                var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
-                var response = await _httpClient.GetAsync($"api/v1/accounts/{accountId}/history");
-                if (response.IsSuccessStatusCode)
-                    return await response.Content.ReadFromJsonAsync<IEnumerable<PointHistoryEntryDto>>(options) ?? Enumerable.Empty<PointHistoryEntryDto>();
-                return Enumerable.Empty<PointHistoryEntryDto>();
+                // Call the Backend's proxy endpoint instead of trying to hit the external API directly
+                return await _httpClient.GetFromJsonAsync<IEnumerable<PointHistoryEntryDto>>("api/Loyalty/my-points-history") ?? Enumerable.Empty<PointHistoryEntryDto>();
             }
             catch { return Enumerable.Empty<PointHistoryEntryDto>(); }
         }
@@ -244,7 +251,7 @@ namespace Frontend.Services
         public async Task<IEnumerable<UserPointsHistoryDto>> GetAllMembersPointsHistoryAsync()
         {
             try {
-                var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
+                var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
                 var response = await _httpClient.GetAsync("api/Loyalty/admin/all-points-history");
                 var raw = await response.Content.ReadAsStringAsync();
                 if (!response.IsSuccessStatusCode)
@@ -300,22 +307,6 @@ namespace Frontend.Services
             }
         }
 
-        public async Task<IEnumerable<LoyaltyRewardDto>> GetActiveRewardsAsync()
-        {
-            try
-            {
-                // Fetch from the external loyalty API directly or via our backend proxy
-                // The user specified the URL: http://150.95.88.91:4100/api/v1/rewards/active/THS-LMS
-                // We'll use a new HttpClient or just the existing one if configured correctly.
-                // However, our backend doesn't have a proxy for this yet.
-                // For simplicity, let's assume we call it directly or via a backend endpoint we'll add.
-                // Better: Let's add a backend proxy in LoyaltyController to avoid CORS issues if this was a browser app.
-                // In ASP.NET Core MVC, the server-side HttpClient can call it directly.
-                var client = new HttpClient();
-                return await client.GetFromJsonAsync<IEnumerable<LoyaltyRewardDto>>("http://150.95.88.91:4100/api/v1/rewards/active/THS-LMS") ?? Enumerable.Empty<LoyaltyRewardDto>();
-            }
-            catch { return Enumerable.Empty<LoyaltyRewardDto>(); }
-        }
 
         #region Users
         public async Task<IEnumerable<UserDto>> GetUsersAsync()
@@ -359,7 +350,7 @@ namespace Frontend.Services
                 var response = await _httpClient.GetAsync("api/Loyalty/admin/redemptions/pending");
                 if (response.IsSuccessStatusCode)
                 {
-                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
+                    var options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true, NumberHandling = JsonNumberHandling.AllowReadingFromString };
                     return await response.Content.ReadFromJsonAsync<IEnumerable<LoyaltyRedemptionDto>>(options) ?? Enumerable.Empty<LoyaltyRedemptionDto>();
                 }
                 return Enumerable.Empty<LoyaltyRedemptionDto>();
@@ -397,3 +388,7 @@ namespace Frontend.Services
         }
     }
 }
+
+
+
+

Frontend/Views/Auth/Login.cshtml

@@ -1,4 +1,4 @@
-@model Frontend.Models.Dtos.LoginRequest
+@model LibraryManagement.Shared.Models.LoginRequest
 @{
     ViewData["Title"] = "Sign In";
     Layout = "_Layout";
@@ -47,3 +47,4 @@
         </form>
     </div>
 </div>
+

Frontend/Views/Auth/Register.cshtml

@@ -1,4 +1,4 @@
-@model Frontend.Models.Dtos.RegisterRequest
+@model LibraryManagement.Shared.Models.RegisterRequest
 @{
     ViewData["Title"] = "Create Account";
     Layout = "_Layout";
@@ -54,3 +54,4 @@
         </form>
     </div>
 </div>
+

Frontend/Views/Books/Create.cshtml

@@ -1,4 +1,4 @@
-@model Frontend.Models.Dtos.BookCreateRequest
+@model LibraryManagement.Shared.Models.BookCreateRequest
 @{
     ViewData["Title"] = "Add New Book";
 }
@@ -72,7 +72,7 @@
                     <div class="sm:col-span-2">
                         <label class="block text-sm font-medium text-slate-700 mb-2">Categories</label>
                         @{
-                            var allCategories = ViewBag.Categories as IEnumerable<Frontend.Models.Dtos.CategoryDto>;
+                            var allCategories = ViewBag.Categories as IEnumerable<LibraryManagement.Shared.Models.CategoryDto>;
                         }
                         @if (allCategories != null && allCategories.Any())
                         {
@@ -106,3 +106,4 @@
 @section Scripts {
     @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
 }
+

Frontend/Views/Books/Details.cshtml

@@ -1,4 +1,4 @@
-@model Frontend.Models.Dtos.BookDto
+@model LibraryManagement.Shared.Models.BookDto
 @{
     ViewData["Title"] = Model.Title;
 }
@@ -75,3 +75,4 @@
         </div>
     </div>
 </div>
+

Frontend/Views/Books/Edit.cshtml

@@ -1,4 +1,4 @@
-@model Frontend.Models.Dtos.BookUpdateRequest
+@model LibraryManagement.Shared.Models.BookUpdateRequest
 @{
     ViewData["Title"] = "Edit Book";
 }
@@ -63,7 +63,7 @@
                     <div class="sm:col-span-2">
                         <label class="block text-sm font-medium text-slate-700 mb-2">Categories</label>
                         @{
-                            var allCategories = ViewBag.Categories as IEnumerable<Frontend.Models.Dtos.CategoryDto>;
+                            var allCategories = ViewBag.Categories as IEnumerable<LibraryManagement.Shared.Models.CategoryDto>;
                             var selectedIds = Model.CategoryIds ?? new List<int>();
                         }
                         @if (allCategories != null && allCategories.Any())
@@ -99,3 +99,4 @@
 @section Scripts {
     @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
 }
+

Frontend/Views/Books/Index.cshtml

@@ -1,4 +1,4 @@
-@model Frontend.Models.PagedResult<Frontend.Models.Dtos.BookDto>
+@model Frontend.Models.PagedResult<LibraryManagement.Shared.Models.BookDto>
 @{
     ViewData["Title"] = "Books Catalog";
 }
@@ -37,7 +37,7 @@
 
 @* Category Filter Pills *@
 @{
-    var categories = ViewBag.Categories as IEnumerable<Frontend.Models.Dtos.CategoryDto> ?? Enumerable.Empty<Frontend.Models.Dtos.CategoryDto>();
+    var categories = ViewBag.Categories as IEnumerable<LibraryManagement.Shared.Models.CategoryDto> ?? Enumerable.Empty<LibraryManagement.Shared.Models.CategoryDto>();
     int? selectedCategoryId = ViewBag.SelectedCategoryId;
 }
 @if (categories.Any())
@@ -191,3 +191,4 @@
         </nav>
     </div>
 }
+