Skip to main content

Dashboard

Overview​

The Dashboard component serves as the main landing page for the APEX Portal application. It provides a central location for displaying key information, summary widgets, and quick access to important features of the platform.

Prerequisites​

  • Blazor WebAssembly or Server project
  • Blazor Bootstrap package

Installation/Setup​

The Dashboard component is part of the Apex.Portal project and is automatically routed to when accessing the root URL of the application due to its @page "/" directive.

Basic Usage​

The Dashboard is loaded automatically when navigating to the root of the application. No special configuration is required to use it.

// The Dashboard is accessed via the root URL
// Example: https://apex.example.com/

API Reference​

Components Used​

  1. Callout: Informational component from Blazor Bootstrap

Layout Structure​

The Dashboard is designed with a responsive grid layout:

  • Top section: Summary cards in a responsive grid (currently commented out)
  • Middle section: Two-column layout for tables and data (currently commented out)
  • Bottom section: Informational callout

Examples​

Dashboard with Summary Cards​

To enable the summary cards in the dashboard, uncomment and implement the card components:

<div class="row">
    <CardGroup Class="row row-cols-1 row-cols-md-2 row-cols-xl-4 g-2 px-3">
        <div class="col mb-4">
            <SubscriptionsCard></SubscriptionsCard>
        </div>
        <div class="col mb-4">
            <UsersCard></UsersCard>
        </div>
        <div class="col mb-4">
            <SuppliersCard></SuppliersCard>
        </div>
        <div class="col mb-4">
            <RevenueCard></RevenueCard>
        </div>
    </CardGroup>
</div>

Dashboard with Tables​

To display data tables in the dashboard, uncomment and implement the table components:

<div class="row pt-3">
    <div class="col col-md-6">
        <AccountsTable></AccountsTable>
    </div>
    <div class="col col-md-6">
        <UsersTable></UsersTable>
    </div>
</div>

Best Practices​

  • Keep the dashboard clean and focused on the most important information
  • Use responsive design principles to ensure the dashboard looks good on all devices
  • Group related information together in logical sections
  • Use visual hierarchy to emphasize the most important information
  • Provide clear navigation to detailed views from summary information

Common Issues and Solutions​

Issue: Dashboard components taking too long to load​

Solution: Implement progressive loading techniques, lazy loading, or consider reducing the number of components displayed initially.

Issue: Layout issues on mobile devices​

Solution: Ensure all components follow responsive design principles and test thoroughly on various screen sizes.

Issue: Data not refreshing automatically​

Solution: Implement polling or real-time updates using SignalR or similar technology to keep dashboard data fresh.