Skip to main content

Overview

The host dashboard provides a comprehensive view of your tour business, allowing you to monitor reservations, track revenue, and manage your published tours from a centralized location.
The dashboard is accessible at /dashboard/main and requires authentication as a tour host.

Dashboard Features

Key Metrics

The dashboard displays three primary statistics for each selected tour:

Total Tickets

Total number of tickets sold for the selected event

Reservations

Total reservations including all associated bookings

Total Sales

Accumulated revenue from the event

Tour Selection

Use the dropdown selector to view statistics for a specific tour:
Components/Pages/Dashboard/Index.razor
<select class="form-select report-select" @onchange="OnTourChanged">
    <option value="">— Seleccione un evento para obtener informe —</option>
    @foreach (var tour in _ownedTours)
    {
        <option value="@tour.TourId">@tour.Title (@tour.TourId)</option>
    }
</select>

Reservation Table

The dashboard displays a paginated table of reservations for the selected tour:

Table Columns

ColumnDescription
#Reservation ID
ClienteCustomer name with avatar
ViajeTravel date
CreadaCreation timestamp
TicketsNumber of tickets
TotalAmount paid
PagoPayment status badge
ActionsView invoice, edit, cancel

Expandable Rows

Click any reservation row to expand and view detailed ticket information:
1

View Ticket Details

Expanded rows show individual tickets with:
  • Ticket type name
  • Quantity
  • Unit price
  • Total amount
  • QR codes for validation
2

Service Charge Breakdown

View the subtotal, service charges, and total amount breakdown
3

Payment Status

For partial payments, see:
  • Amount paid
  • Amount pending
  • Next charge date

Actions Menu

Each reservation provides the following actions:

View Invoice

Generate and view the invoice for the reservation:
Components/Pages/Dashboard/Index.razor:206
private async Task OpenInvoiceAsync(TourReservationReportDto r)
{
    await using var conn = new SqlConnection(_connectionString);
    await conn.OpenAsync();
    
    // Generate invoice HTML
    var invoiceHtml = await GenerateInvoiceHtmlAsync(r);
    
    // Store and navigate
    await Storage.SetAsync("last_invoice_html", invoiceHtml);
    Navigation.NavigateTo("/invoice", true);
}

Edit Reservation

Modify reservation details (date, contact info, etc.)
Editing reservations may affect capacity calculations. Ensure sufficient ticket availability.

Cancel Order

Cancel a reservation and restore ticket capacity:
private async Task CancelReservation(TourReservationReportDto r)
{
    if (r.PaymentStatus == 4) // Already cancelled
        return;
        
    await TourService.UpdateReservationPaymentStatusAsync(
        r.ReservationId,
        paymentStatus: 4, // Cancelled
        paymentProvider: null,
        paymentReference: null
    );
}
Cancelled reservations remain in the database but are marked with status 4.

QR Code Display

The dashboard includes a modal for viewing individual ticket QR codes:
1

Open QR Modal

Click the QR button next to any ticket type in an expanded reservation
2

Navigate Tickets

Use the slider to navigate between individual tickets when multiple tickets of the same type exist
3

Share QR Code

The QR code displays the ticket reservation code for validation at the event

QR Code Generation

QR codes are generated using an external API:
<img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=@Uri.EscapeDataString(_ticketQrSlides[_ticketQrSlideIndex].Code)&margin=0&color=0c0c3d"
     alt="QR"
     width="200" height="200" />

Loading Reservations

The dashboard loads reservations using the GetReservationsByTourAsync method:
Services/Tour/TourService.cs:1987
public async Task<IReadOnlyList<TourReservationReportDto>> GetReservationsByTourAsync(
    int tourId,
    CancellationToken cancellationToken = default)
{
    var sql = $@"
    SELECT 
        r.TourReservationId,
        r.ReservationCode,
        r.TravelDate,
        r.TotalTickets,
        r.TotalAmount,
        r.CurrencyCode,
        r.PaymentStatus,
        r.ContactName,
        r.ContactEmail,
        r.CreatedAt
    FROM {reservationTable} r
    WHERE r.TourId = @TourId
    ORDER BY r.CreatedAt DESC;";
    
    // Execute query and map results
}

Payment Status Indicators

Reservations display different badges based on payment status:
Status CodeLabelBadge Class
0Pendientebadge--warning
1Pagadobadge--success
2Parcialbadge--info
4Canceladobadge--muted

Mobile View

The dashboard includes a responsive mobile interface with:
  • Profile card display
  • Quick action tiles
  • Random tour discovery feature
  • Simplified navigation
The mobile view is optimized for smaller screens and provides touch-friendly interactions.

Managing Bookings

Learn how to manage and modify reservations

Invoices

Generate and download customer invoices

Statistics

View detailed revenue analytics

Build docs developers (and LLMs) love