+ About
+
+
+
+
+
+ +
+ +
+
+@code {
+ // Initialization state
+ private bool _isInitialized;
+ private string? _initializationError;
+
+ // Component state
+ private ListSagaway Car Reservation
+ + @if (!_isInitialized) + { +
+ @if (_initializationError != null)
+ {
+
+ }
+ else
+ {
+
+
+
+ }
+ else
+ {
+
+ Initialization Error
+@_initializationError
+Connecting to reservation service...
+ } +
+
+
+
+
+ + +
Choose Your Car Class
+
+ @foreach (var carType in _availableCarTypes)
+ {
+ var borderClass = _selectedCarClass?.Code == carType.Code
+ ? "border-4 border-indigo-600 ring-2 ring-indigo-300 scale-105"
+ : "border-2 border-gray-300 hover:border-gray-400";
+
+
+
+ @if (_selectedCarClass != null && _selectedCustomerId != Guid.Empty)
+ {
+ var selectedCustomerName = _predefinedCustomers.FirstOrDefault(c => c.CustomerId == _selectedCustomerId)?.CustomerName ?? "Unknown";
+
+ 
+
+ }
+
+ @carType.Name
+
+
+
+ }
+
+ Selected: @_selectedCarClass.Name for @selectedCustomerName
+ + + @if (!string.IsNullOrEmpty(_reservationMessage)) + { +@_reservationMessage
+ } ++ +
+
+
+@code {
+ private bool _loading;
+ private string? _errorMessage;
+ private CarInventoryResponse? _carInventory;
+ private string? _editingCarClass;
+ private int _editMaxAllocation;
+
+ protected override async Task OnInitializedAsync()
+ {
+ await RefreshInventory();
+ }
+
+ public async Task RefreshInventory()
+ {
+ _loading = true;
+ _errorMessage = null;
+ StateHasChanged();
+
+ try
+ {
+ // Add debug logging
+ Logger.LogInformation("Requesting car inventory data...");
+ _carInventory = await ReservationApiClient.GetCarInventoryAsync();
+ Logger.LogInformation("Received inventory data with {Count} car classes",
+ _carInventory?.CarClasses?.Count ?? 0);
+
+ // Check for empty response
+ if (_carInventory?.CarClasses == null || !_carInventory.CarClasses.Any())
+ {
+ Logger.LogWarning("Received empty car inventory response");
+ }
+ else
+ {
+ // Log each car class received
+ foreach (var carClass in _carInventory.CarClasses)
+ {
+ Logger.LogInformation("Car class: {Code}, Reserved: {Reserved}/{MaxAllocation}",
+ carClass.Code, carClass.Reserved, carClass.MaxAllocation);
+ }
+ }
+ }
+ catch (Exception ex)
+ {
+ // Improve error message to include inner exception details
+ _errorMessage = $"Error loading car inventory: {ex.Message}";
+ if (ex.InnerException != null)
+ {
+ _errorMessage += $" ({ex.InnerException.Message})";
+ }
+ Logger.LogError(ex, "Error loading car inventory");
+ }
+ finally
+ {
+ _loading = false;
+ StateHasChanged();
+ }
+ }
+
+
+ private void EditAllocation(string carClass, int currentAllocation)
+ {
+ _editingCarClass = carClass;
+ _editMaxAllocation = currentAllocation;
+ StateHasChanged();
+ }
+
+ private void CancelEdit()
+ {
+ _editingCarClass = null;
+ StateHasChanged();
+ }
+
+ private async Task SaveAllocation(string carClass)
+ {
+ if (_carInventory?.CarClasses == null || string.IsNullOrEmpty(_editingCarClass))
+ return;
+
+ var currentCarClass = _carInventory.CarClasses.FirstOrDefault(c => c.Code == carClass);
+ if (currentCarClass == null) return;
+
+ // Don't allow setting max allocation less than current reservations
+ if (_editMaxAllocation < currentCarClass.Reserved)
+ {
+ _errorMessage = "Maximum allocation cannot be less than the number of current reservations.";
+ return;
+ }
+
+ try
+ {
+ // Create the request object for the API
+ var allocationRequest = new CarClassAllocationRequest
+ {
+ CarClass = carClass,
+ MaxAllocation = _editMaxAllocation
+ };
+
+ // Call the API to update allocation using ReservationApiClient
+ var updatedCarClass = await ReservationApiClient.UpdateCarClassAllocationAsync(allocationRequest);
+
+ // Update local data
+ var index = _carInventory.CarClasses.FindIndex(c => c.Code == carClass);
+ if (index >= 0)
+ {
+ _carInventory.CarClasses[index] = updatedCarClass;
+ }
+
+ // Exit edit mode
+ _editingCarClass = null;
+ _errorMessage = null; // Clear any previous error message
+ }
+ catch (Exception ex)
+ {
+ _errorMessage = $"Error updating allocation: {ex.Message}";
+ Logger.LogError(ex, "Error updating allocation for car class {CarClass}", carClass);
+ }
+ finally
+ {
+ StateHasChanged();
+ }
+ }
+
+ private string GetCarClassNameForCode(string? carClassCode)
+ {
+ return carClassCode?.ToUpperInvariant() switch
+ {
+ "ECON" => "Economy",
+ "STD" => "Standard",
+ "LUX" => "Luxury",
+ _ => carClassCode ?? "Unknown"
+ };
+ }
+
+ private string GetCarImageForClass(string? carClassCode)
+ {
+ return carClassCode?.ToUpperInvariant() switch
+ {
+ "ECON" => "images/EconomyCar.png",
+ "STD" => "images/StandardCar.png",
+ "LUX" => "images/LuxuryCar.png",
+ _ => "images/DefaultCar.png"
+ };
+ }
+}
diff --git a/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Components/ReservationStatusDisplay.razor b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Components/ReservationStatusDisplay.razor
new file mode 100644
index 0000000..15db3f1
--- /dev/null
+++ b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Components/ReservationStatusDisplay.razor
@@ -0,0 +1,803 @@
+@using System.Net
+@using System.Text.RegularExpressions
+@using Sagaway.ReservationDemo.ReservationUI.Services
+@using Sagaway.ReservationDemo.ReservationUI.Services.DTOs
+@implements IDisposable
+
+@inject IReservationManager ReservationManager
+@inject ILoggerCar Inventory Management
+ + @if (_loading) + { +Loading car inventory...
+
+
+
+ }
+ else if (!string.IsNullOrWhiteSpace(_errorMessage))
+ {
+ Error: @_errorMessage
+ } + else if (_carInventory?.CarClasses == null || !_carInventory.CarClasses.Any()) + { +No car classes found in inventory.
+ } + else + { +
+
+
+
+
+ }
+
+ | Car Class | +Available | +Reserved | +Max Allocation | +Actions | +
|---|---|---|---|---|
|
+
+ @{
+ var imgSrc = GetCarImageForClass(carClass.Code);
+ var carClassName = GetCarClassNameForCode(carClass.Code);
+ }
+
+ |
+ + @(carClass.MaxAllocation - carClass.Reserved) + | +
+
+ @carClass.Reserved
+
+
+ @{
+ var percentage = carClass.MaxAllocation > 0
+ ? Math.Min(100, (carClass.Reserved * 100) / carClass.MaxAllocation)
+ : 0;
+ var barColorClass = percentage > 80 ? "bg-red-500" : percentage > 50 ? "bg-yellow-500" : "bg-green-500";
+ }
+
+
+ |
+ + @if (_editingCarClass == carClass.Code) + { + + } + else + { + @carClass.MaxAllocation + } + | +
+ @if (_editingCarClass == carClass.Code)
+ {
+
+
+
+
+ }
+ else
+ {
+
+ }
+ |
+
+
+
+
+
+
+@code {
+ [Parameter]
+ public Guid CustomerId { get; set; }
+
+ private string? _customerName;
+ private bool _loading;
+ private string? _errorMessage;
+ private Dictionary
+
+
+ @if (_loading)
+ {
+ + Reservation Status (@(_customerName ?? "No customer selected")) +
+ +
+
+
+
+ Loading reservation status...
+
+
+
+ }
+ else if (!string.IsNullOrWhiteSpace(_errorMessage))
+ {
+ Error: @_errorMessage
+ } + else if (CustomerId == Guid.Empty) + { +Please select a customer to view their reservations.
+ } + else if (_reservations == null || !_reservations.Any()) + { +No reservations found for this customer.
+ } + else + { +
+
+
+
+
+ }
+
+ | Car | +Reservation ID | +Status | +Actions | +
|---|---|---|---|
|
+
+ @{
+ var imgSrc = GetCarImageForClass(reservation.CarClassCode);
+ var carClassName = GetCarClassNameForCode(reservation.CarClassCode);
+ }
+
+ |
+ + @kvp.Key + | +
+
+ @if (reservation.Status == ReservationStatusType.Pending || reservation.Status == ReservationStatusType.CancelPending || reservation.IsProcessing)
+ {
+
+ }
+
+ @if (reservation is { Status: ReservationStatusType.CancelPending, IsProcessing: true })
+ {
+ Cancelling...
+ }
+ else
+ {
+ @reservation.Status
+ }
+
+
+ |
+
+
+
+
+ @if (reservation is { Status: ReservationStatusType.Reserved or ReservationStatusType.CancelFailed, IsProcessing: false })
+ {
+
+ }
+
+ |
+
+
+
+
+
+
+
+
+
+ @if (_showingInventory)
+ {
+
+
+
+
+ }
+
+Error processing log: {WebUtility.HtmlEncode(ex.Message)}
");
+ Logger.LogError(ex, "Error retrieving/formatting saga log for {ReservationId}", reservationId);
+ }
+ finally
+ {
+ _loadingSagaLog = false;
+ StateHasChanged();
+ }
+ }
+
+ private async Task HandleCancelReservation(Guid reservationId)
+ {
+ // Prevent multiple clicks while processing
+ if (_cancellingReservationId.HasValue)
+ return;
+
+ _cancellingReservationId = reservationId;
+ _errorMessage = null;
+ StateHasChanged();
+
+ Logger.LogInformation("Attempting to cancel reservation {ReservationId}", reservationId);
+
+ try
+ {
+ // Call the ReservationManager to cancel the reservation
+ bool success = await ReservationManager.CancelReservationAsync(reservationId);
+
+ if (!success)
+ {
+ _errorMessage = $"Failed to initiate cancellation for reservation {reservationId}.";
+ Logger.LogWarning("Cancel request failed for reservation {ReservationId}", reservationId);
+ }
+ else
+ {
+ Logger.LogInformation("Cancel request accepted for reservation {ReservationId}", reservationId);
+ // The ReservationManager will handle updating the state via SignalR
+ }
+ }
+ catch (Exception ex)
+ {
+ Logger.LogError(ex, "Error cancelling reservation {ReservationId}", reservationId);
+ _errorMessage = $"Error cancelling reservation: {ex.Message}";
+ }
+ finally
+ {
+ _cancellingReservationId = null;
+ StateHasChanged();
+ }
+ }
+
+ private void CloseSagaLogModal()
+ {
+ _showSagaLogModal = false;
+ _sagaLog = null;
+ _sagaLogError = null;
+ StateHasChanged();
+ }
+
+ private string GetStatusClass(ReservationStatusType status) => status switch
+ {
+ ReservationStatusType.Reserved => "text-green-700 bg-green-100",
+ ReservationStatusType.Cancelled => "text-orange-700 bg-orange-100",
+ ReservationStatusType.Failed => "text-red-700 bg-red-100",
+ ReservationStatusType.Pending => "text-blue-700 bg-blue-100",
+ ReservationStatusType.CancelFailed => "text-red-700 bg-red-100",
+ ReservationStatusType.CancelPending => "text-yellow-700 bg-yellow-100",
+ _ => "text-gray-700 bg-gray-100"
+ };
+
+ private string GetCarClassNameForCode(string? carClassCode)
+ {
+ return carClassCode?.ToUpperInvariant() switch
+ {
+ "ECON" => "Economy",
+ "STD" => "Standard",
+ "LUX" => "Luxury",
+ _ => carClassCode ?? "Unknown"
+ };
+ }
+
+ private string GetCarImageForClass(string? carClassCode)
+ {
+ return carClassCode?.ToUpperInvariant() switch
+ {
+ "ECON" => "images/EconomyCar.png",
+ "STD" => "images/StandardCar.png",
+ "LUX" => "images/LuxuryCar.png",
+ _ => "images/DefaultCar.png"
+ };
+ }
+
+ protected override async Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (!firstRender)
+ {
+ // Initialize any saga toggles in the current view after rendering
+ await JSRuntime.InvokeVoidAsync("sagaLogFunctions.initializeSagaToggles");
+ }
+ }
+
+ private MarkupString FormatSagaLogAsHtml(string rawLog)
+ {
+ if (string.IsNullOrWhiteSpace(rawLog))
+ {
+ return new MarkupString("Log is empty.
"); + } + + var htmlBuilder = new System.Text.StringBuilder(); + + // Remove surrounding quotes if present + string processedLog = rawLog.Trim(); + if (processedLog.StartsWith('"') && processedLog.EndsWith('"')) + { + processedLog = processedLog.Substring(1, processedLog.Length - 2); + } + + // Replace escaped newlines with actual newlines, then split + var lines = processedLog.Replace("\\n", "\n").Split('\n'); + + // Define Tailwind classes + const string timestampClass = "text-gray-500 mr-2 font-mono"; + const string startExecutingClass = "text-blue-600 font-medium"; + const string successClass = "text-emerald-600 font-medium"; + const string failClass = "text-red-600 font-medium"; + const string revertClass = "text-orange-600 font-medium"; + const string defaultClass = "text-gray-800"; + const string lineBaseClass = "py-1 flex items-start"; + const string headerClass = "saga-header border-t-2 border-indigo-400 bg-indigo-50 rounded-t-lg mt-6 p-3 text-center font-bold cursor-pointer"; + const string contentClass = "saga-content bg-white p-4 rounded-b-lg mb-4 border-l border-r border-b border-indigo-200 shadow-sm"; + + // Generate unique IDs for collapsible sections + string uniqueId = Guid.NewGuid().ToString().Substring(0, 8); + int sagaCount = 0; + System.Text.StringBuilder currentSagaContent = new(); + bool isFirstSaga = true; + + // Create a list to store saga chunks for better analysis + List<(int Index, List");
+
+ htmlBuilder.Append("
");
+
+ // Process the lines in this chunk
+ currentSagaContent.Clear();
+ foreach (var trimmedLine in chunk.Lines)
+ {
+ string timestamp = string.Empty;
+ string message;
+ string messageColorClass = defaultClass;
+
+ // Try to extract timestamp (e.g., [HH:mm:ss])
+ var match = Regex.Match(trimmedLine, @"^(\[.*?\])(.*)");
+ if (match.Success)
+ {
+ timestamp = WebUtility.HtmlEncode(match.Groups[1].Value);
+ message = WebUtility.HtmlEncode(match.Groups[2].Value.Trim());
+ }
+ else
+ {
+ message = WebUtility.HtmlEncode(trimmedLine);
+ }
+
+ // Determine message color class based on keywords
+ if (message.Contains("Success", StringComparison.OrdinalIgnoreCase))
+ {
+ messageColorClass = successClass;
+ }
+ else if (message.Contains("Start Executing", StringComparison.OrdinalIgnoreCase))
+ {
+ messageColorClass = startExecutingClass;
+ }
+ else if (message.Contains("Fail", StringComparison.OrdinalIgnoreCase) ||
+ message.Contains("Error", StringComparison.OrdinalIgnoreCase))
+ {
+ messageColorClass = failClass;
+ }
+ else if (message.Contains("Revert", StringComparison.OrdinalIgnoreCase))
+ {
+ messageColorClass = revertClass;
+ }
+
+ // Build the HTML for the line
+ currentSagaContent.Append("");
+ htmlBuilder.Append("#").Append(sagaCount).Append("");
+
+ htmlBuilder.Append("").Append(sagaTitle).Append("");
+
+ htmlBuilder.Append("");
+ htmlBuilder.Append("
");
+ htmlBuilder.Append("");
+
+ if (!string.IsNullOrEmpty(timestamp))
+ {
+ currentSagaContent.Append("");
+ }
+
+ currentSagaContent.Append("");
+ currentSagaContent.Append("
");
+ }
+
+ // Add the content section for this chunk
+ htmlBuilder.Append("");
+ htmlBuilder.Append(currentSagaContent);
+ htmlBuilder.Append("
");
+
+ isFirstSaga = false;
+ }
+
+ return new MarkupString(htmlBuilder.ToString());
+ }
+
+ public void Dispose()
+ {
+ _subscription?.Dispose();
+ }
+}
diff --git a/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Dockerfile b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Dockerfile
new file mode 100644
index 0000000..1fe718f
--- /dev/null
+++ b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Dockerfile
@@ -0,0 +1,46 @@
+# Stage 1: Build Tailwind and WebAssembly App
+FROM mcr.microsoft.com/dotnet/sdk:9.0 AS build
+ARG BUILD_CONFIGURATION=Release
+WORKDIR /src
+
+# Copy only csproj first to optimize Docker caching
+COPY Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Sagaway.ReservationDemo.ReservationUI.csproj Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/
+# Consider copying package.json and tailwind config earlier too if they don't change often
+COPY Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/package.json Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/
+COPY Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/package-lock.json Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/
+COPY Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/tailwind.config.js Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/
+RUN dotnet restore "Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Sagaway.ReservationDemo.ReservationUI.csproj"
+
+# Copy full source
+COPY . .
+WORKDIR /src/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI
+
+# Install Node.js and Tailwind dependencies
+# Combine RUN commands where possible
+RUN apt-get update && \
+ apt-get install -y --no-install-recommends nodejs npm && \
+ npm ci && \
+ npx @tailwindcss/cli -i ./wwwroot/css/app.css -o ./wwwroot/css/app.output.css --minify && \
+ # Clean up apt cache
+ rm -rf /var/lib/apt/lists/*
+
+# Build the Blazor WebAssembly app
+RUN dotnet publish "Sagaway.ReservationDemo.ReservationUI.csproj" -c $BUILD_CONFIGURATION -o /app/publish /p:UseAppHost=false
+
+# Stage 2: Serve using nginx
+FROM nginx:alpine AS final
+
+# Remove the default nginx static website and config
+RUN rm -rf /usr/share/nginx/html/* && rm /etc/nginx/conf.d/default.conf
+
+# Copy custom nginx configuration
+# Assumes nginx.conf is in the same directory as the Dockerfile
+COPY Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/nginx.conf /etc/nginx/conf.d/default.conf
+
+# Copy published Blazor WebAssembly app to nginx public directory
+COPY --from=build /app/publish/wwwroot /usr/share/nginx/html
+
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Layout/MainLayout.razor b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Layout/MainLayout.razor
new file mode 100644
index 0000000..76eb725
--- /dev/null
+++ b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Layout/MainLayout.razor
@@ -0,0 +1,16 @@
+@inherits LayoutComponentBase
+
+
+
+
+
+ @Body
+
+
+
diff --git a/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Layout/MainLayout.razor.css b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Layout/MainLayout.razor.css
new file mode 100644
index 0000000..ecf25e5
--- /dev/null
+++ b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Layout/MainLayout.razor.css
@@ -0,0 +1,77 @@
+.page {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+}
+
+main {
+ flex: 1;
+}
+
+.sidebar {
+ background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+ background-color: #f7f7f7;
+ border-bottom: 1px solid #d6d5d5;
+ justify-content: flex-end;
+ height: 3.5rem;
+ display: flex;
+ align-items: center;
+}
+
+ .top-row ::deep a, .top-row ::deep .btn-link {
+ white-space: nowrap;
+ margin-left: 1.5rem;
+ text-decoration: none;
+ }
+
+ .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+ text-decoration: underline;
+ }
+
+ .top-row ::deep a:first-child {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+@media (max-width: 640.98px) {
+ .top-row {
+ justify-content: space-between;
+ }
+
+ .top-row ::deep a, .top-row ::deep .btn-link {
+ margin-left: 0;
+ }
+}
+
+@media (min-width: 641px) {
+ .page {
+ flex-direction: row;
+ }
+
+ .sidebar {
+ width: 250px;
+ height: 100vh;
+ position: sticky;
+ top: 0;
+ }
+
+ .top-row {
+ position: sticky;
+ top: 0;
+ z-index: 1;
+ }
+
+ .top-row.auth ::deep a:first-child {
+ flex: 1;
+ text-align: right;
+ width: 0;
+ }
+
+ .top-row, article {
+ padding-left: 2rem !important;
+ padding-right: 1.5rem !important;
+ }
+}
diff --git a/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Layout/NavMenu.razor b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Layout/NavMenu.razor
new file mode 100644
index 0000000..c1d448f
--- /dev/null
+++ b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Layout/NavMenu.razor
@@ -0,0 +1,39 @@
+
+
+
+
+
+
+@code {
+ private bool collapseNavMenu = true;
+
+ private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+
+ private void ToggleNavMenu()
+ {
+ collapseNavMenu = !collapseNavMenu;
+ }
+}
diff --git a/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Layout/NavMenu.razor.css b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Layout/NavMenu.razor.css
new file mode 100644
index 0000000..617b89c
--- /dev/null
+++ b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Layout/NavMenu.razor.css
@@ -0,0 +1,83 @@
+.navbar-toggler {
+ background-color: rgba(255, 255, 255, 0.1);
+}
+
+.top-row {
+ min-height: 3.5rem;
+ background-color: rgba(0,0,0,0.4);
+}
+
+.navbar-brand {
+ font-size: 1.1rem;
+}
+
+.bi {
+ display: inline-block;
+ position: relative;
+ width: 1.25rem;
+ height: 1.25rem;
+ margin-right: 0.75rem;
+ top: -1px;
+ background-size: cover;
+}
+
+.bi-house-door-fill-nav-menu {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
+}
+
+.bi-plus-square-fill-nav-menu {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
+}
+
+.bi-list-nested-nav-menu {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
+}
+
+.nav-item {
+ font-size: 0.9rem;
+ padding-bottom: 0.5rem;
+}
+
+ .nav-item:first-of-type {
+ padding-top: 1rem;
+ }
+
+ .nav-item:last-of-type {
+ padding-bottom: 1rem;
+ }
+
+ .nav-item ::deep a {
+ color: #d7d7d7;
+ border-radius: 4px;
+ height: 3rem;
+ display: flex;
+ align-items: center;
+ line-height: 3rem;
+ }
+
+.nav-item ::deep a.active {
+ background-color: rgba(255,255,255,0.37);
+ color: white;
+}
+
+.nav-item ::deep a:hover {
+ background-color: rgba(255,255,255,0.1);
+ color: white;
+}
+
+@media (min-width: 641px) {
+ .navbar-toggler {
+ display: none;
+ }
+
+ .collapse {
+ /* Never collapse the sidebar for wide screens */
+ display: block;
+ }
+
+ .nav-scrollable {
+ /* Allow sidebar to scroll for tall menus */
+ height: calc(100vh - 3.5rem);
+ overflow-y: auto;
+ }
+}
diff --git a/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Program.cs b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Program.cs
new file mode 100644
index 0000000..6b4e894
--- /dev/null
+++ b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/Program.cs
@@ -0,0 +1,15 @@
+using Microsoft.AspNetCore.Components.Web;
+using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
+using Sagaway.ReservationDemo.ReservationUI;
+using Sagaway.ReservationDemo.ReservationUI.Services;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+builder.RootComponents.Add
+
+
+
+
+
+
+ An unhandled error has occurred.
+ Reload
+ 🗙
+
+
+
+
+
+
+
+
diff --git a/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/wwwroot/js/saga-log.js b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/wwwroot/js/saga-log.js
new file mode 100644
index 0000000..9416b32
--- /dev/null
+++ b/Sagaway.ReservationDemo/Sagaway.ReservationDemo.ReservationUI/wwwroot/js/saga-log.js
@@ -0,0 +1,97 @@
+window.sagaLogFunctions = {
+ toggleSagaDisplay: function (sagaId) {
+ const contentElement = document.getElementById('saga-content-' + sagaId);
+ const headerElement = document.getElementById('saga-header-' + sagaId);
+ const chevronElement = document.getElementById('chevron-' + sagaId);
+
+ if (!contentElement || !headerElement || !chevronElement) return;
+
+ if (contentElement.style.display === 'none') {
+ // Show content
+ contentElement.style.display = 'block';
+ headerElement.classList.add('active');
+ chevronElement.classList.remove('rotated');
+ } else {
+ // Hide content
+ contentElement.style.display = 'none';
+ headerElement.classList.remove('active');
+ chevronElement.classList.add('rotated');
+ }
+ },
+
+ initializeSagaToggles: function () {
+ // First, analyze the content to properly identify saga types
+ this.analyzeSagaContent();
+
+ // Initialize all toggle elements
+ document.querySelectorAll('[data-saga-toggle]').forEach((element, index) => {
+ if (!element.hasAttribute('data-initialized')) {
+ const sagaId = element.getAttribute('data-saga-toggle');
+
+ // Update the numbering to be sequential
+ const numberBadge = element.querySelector('.saga-number-badge');
+ if (numberBadge) {
+ numberBadge.textContent = '#' + (index + 1);
+ }
+
+ element.addEventListener('click', function () {
+ window.sagaLogFunctions.toggleSagaDisplay(sagaId);
+ });
+
+ element.setAttribute('data-initialized', 'true');
+ }
+ });
+
+ // Add a class to all chevron icons for easier styling
+ document.querySelectorAll('[id^="chevron-"]').forEach(icon => {
+ icon.classList.add('chevron-icon');
+ });
+ },
+
+ analyzeSagaContent: function () {
+ document.querySelectorAll('.saga-content').forEach(content => {
+ let sagaType = "Operation Log";
+ let badgeColor = "bg-gray-500";
+
+ // Determine the saga type by inspecting the content
+ const htmlContent = content.innerHTML;
+
+ if (htmlContent.includes("[CancelBooking]") ||
+ htmlContent.includes("[CancelInventoryReserving]") ||
+ htmlContent.includes("[Refund]")) {
+ sagaType = "Cancellation Saga";
+ badgeColor = "bg-red-500";
+ } else if (htmlContent.includes("[CarBooking]") ||
+ htmlContent.includes("[InventoryReserving]") ||
+ htmlContent.includes("[Billing]")) {
+ sagaType = "Reservation Saga";
+ badgeColor = "bg-blue-500";
+ } else if (htmlContent.includes("[Billing]") &&
+ (htmlContent.includes("Billing Success") ||
+ htmlContent.includes("passed validation successfully"))) {
+ sagaType = "Billing Process";
+ badgeColor = "bg-green-500";
+ }
+
+ // Find corresponding header
+ const sagaId = content.id.replace('saga-content-', '');
+ const header = document.getElementById('saga-header-' + sagaId);
+
+ if (header) {
+ const titleSpan = header.querySelector('.saga-title');
+ const badge = header.querySelector('.saga-badge');
+
+ if (titleSpan) {
+ titleSpan.textContent = sagaType;
+ }
+
+ if (badge) {
+ // Remove all existing color classes
+ badge.className = badge.className.replace(/bg-\w+-\d+/g, '').trim();
+ // Add the new color class
+ badge.classList.add(badgeColor);
+ }
+ }
+ });
+ }
+};
diff --git a/Sagaway.Tests/Sagaway.Tests.csproj b/Sagaway.Tests/Sagaway.Tests.csproj
index 50f5aa5..6a00e6b 100644
--- a/Sagaway.Tests/Sagaway.Tests.csproj
+++ b/Sagaway.Tests/Sagaway.Tests.csproj
@@ -1,7 +1,7 @@
-