### Install Masa.Template CLI

Source: https://github.com/masastack/masa.blazor.pro/blob/main/README.md

Installs the Masa.Template package globally, allowing you to create new Masa Blazor Pro projects using the CLI. This is the first step to using the project templates.

```shell
dotnet new --install Masa.Template
```

--------------------------------

### Install and Create Masa.Blazor.Pro Projects via CLI

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

Provides commands to install the Masa.Blazor.Pro template and create new Blazor projects (Server, WebAssembly, or RCL) using the template. It also includes instructions for navigating to the project directory and running the application.

```bash
# Install the Masa.Blazor.Pro template
dotnet new --install Masa.Template

# Create new Blazor Server project
dotnet new masabp -o MyProject

# Create new Blazor WebAssembly project
dotnet new masabp --mode Wasm -o MyProjectWasm

# Create new Blazor RCL (Razor Class Library) project
dotnet new masabp --mode ServerAndWasm -o MyProjectRcl

# Navigate to project directory and run
cd MyProject
dotnet run
```

--------------------------------

### Navigation Configuration JSON

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

Example JSON structure for configuring the navigation menu in a Blazor application. This file defines the hierarchical structure, titles, icons, and routes for various navigation items.

```json
{
  "Id": "dashboard",
  "Title": "Dashboard",
  "Icon": "mdi-view-dashboard",
  "Hide": false,
  "Children": [
    {
      "Id": "ecommerce",
      "Title": "eCommerce",
      "Href": "dashboard/ecommerce",
      "Icon": "mdi-cart"
    }
  ]
}
```

--------------------------------

### Create Masa Blazor Pro Project using CLI

Source: https://github.com/masastack/masa.blazor.pro/blob/main/README.md

Creates a new Masa Blazor Pro project based on your selected Blazor hosting model. Options include Blazor Server, Blazor WebAssembly, and Blazor RCL (Reusable Component Library).

```shell
dotnet new masabp -o Masa.Test

```

```shell
dotnet new masabp --mode Wasm -o Masa.TestWasm

```

```shell
dotnet new masabp --mode ServerAndWasm -o Masa.TestRcl

```

--------------------------------

### Initialize Masa.Blazor.Pro Client WebAssembly Application

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

Configures the client WebAssembly application for Masa.Blazor.Pro, setting up Masa.Blazor with matching theme and internationalization support. It also registers global services specific to the WebAssembly mode.

```csharp
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);

// Configure Masa.Blazor with matching theme
await builder.Services.AddMasaBlazor(options =>
{
    options.ConfigureTheme(theme =>
    {
        theme.Themes.Light.Primary = "#4318FF";
        theme.Themes.Light.Accent = "#4318FF";
    });
}).AddI18nForWasmAsync($"{builder.HostEnvironment.BaseAddress}/i18n");

// Register global services for WebAssembly mode
await builder.Services.AddGlobalForWasmAsync(builder.HostEnvironment.BaseAddress);

await builder.Build().RunAsync();
```

--------------------------------

### Initialize Masa.Blazor.Pro Server Application

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

Configures the server application for Masa.Blazor.Pro, including hybrid rendering, custom theme colors, internationalization, and global services. It sets up the HTTP request pipeline and maps Razor components for both server and WebAssembly interactive rendering modes.

```csharp
using Masa.Blazor.Pro.Client;
using Masa.Blazor.Pro.Components;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container with hybrid rendering support
builder.Services.AddRazorComponents()
    .AddInteractiveWebAssemblyComponents()
    .AddInteractiveServerComponents();

// Configure Masa.Blazor with custom theme colors
builder.Services.AddMasaBlazor(options =>
{
    options.ConfigureTheme(theme =>
    {
        theme.Themes.Light.Primary = "#4318FF";
        theme.Themes.Light.Accent = "#4318FF";
    });
}).AddI18nForServer("wwwroot/i18n");

// Register global services (navigation, config, cookie storage)
builder.Services.AddGlobalForServer();

var app = builder.Build();

// Configure HTTP request pipeline
if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}
else
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
}

app.UseStaticFiles();
app.UseAntiforgery();

// Map Razor components with hybrid rendering modes
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(Routes).Assembly);

app.Run();
```

--------------------------------

### GlobalConfig Service for Application Settings in Blazor

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

Demonstrates how to use the GlobalConfig service in a Blazor component to access and update application settings like page mode, navigation style, expand on hover, and culture. It also shows how to subscribe to configuration change events and initialize settings from cookies.

```csharp
// Usage in a component
@inject GlobalConfig Config

// Access configuration properties
var pageMode = Config.PageMode;          // "PageTab" or "Breadcrumb"
var navStyle = Config.NavigationStyle;   // "Flat" or "Rounded"
var expandOnHover = Config.ExpandOnHover; // bool
var culture = Config.Culture;            // CultureInfo

// Update settings (automatically persists to cookies)
Config.PageMode = PageModes.PageTab;
Config.NavigationStyle = NavigationStyles.Rounded;
Config.ExpandOnHover = true;
Config.Culture = new CultureInfo("en-US");

// Subscribe to configuration changes
Config.PageModeChanged += (sender, args) =>
{
    // React to page mode changes
    StateHasChanged();
};

Config.NavigationStyleChanged += (sender, args) =>
{
    // React to navigation style changes
    StateHasChanged();
};

// Initialize settings from stored cookies
await Config.InitFromStorage();
```

--------------------------------

### Global Service Registration for WebAssembly Rendering in C#

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

The AddGlobalForWasmAsync extension method sets up global services for WebAssembly (client-side) rendering in Blazor. It asynchronously fetches navigation data from a remote JSON file using HttpClient and registers scoped services like CookieStorage and GlobalConfig. It requires a base URI to locate the navigation file and returns a Task<IServiceCollection>.

```csharp
// For WebAssembly rendering
public static async Task<IServiceCollection> AddGlobalForWasmAsync(
    this IServiceCollection services, string baseUri)
{
    // Load navigation via HTTP client
    using var httpclient = new HttpClient();
    var navList = await httpclient.GetFromJsonAsync<List<NavModel>>(
        Path.Combine(baseUri, "nav/nav.json"));

    services.AddNav(navList);
    services.AddScoped<CookieStorage>();
    services.AddScoped<GlobalConfig>();

    return services;
}

// Usage in Program.cs
builder.Services.AddGlobalForServer();  // Server mode
await builder.Services.AddGlobalForWasmAsync(baseUri);  // WebAssembly mode
```

--------------------------------

### E-Commerce Shop Service for Blazor Data

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

Offers functionality to retrieve product information, including all products, related products, price range filters, product categories, and brands. It also defines the structure for the `GoodsDto`.

```csharp
// Masa.Blazor.Pro.Client/Data/App/ECommerce/ShopService.cs
using Masa.Blazor.Pro.Data.App.ECommerce;

// Get all products
List<GoodsDto> products = ShopService.GetGoodsList();

// Get related products (first 10 items)
List<GoodsDto> relatedProducts = ShopService.GetRelatedGoodsList();

// Get price range filters
List<MultiRangeDto> priceRanges = ShopService.GetMultiRangeList();
// Returns ranges: All, <= $10, $10-$100, $100-$500, >= $500

// Get product categories
List<string> categories = ShopService.GetCategortyList();
// Returns: ["饮水机", "纯水机", "商务机", "胶囊机", "空净系列", "中央处理设备", "Cell Phones"]

// Get product brands
List<string> brands = ShopService.GetBrandList();
// Returns: ["LONSID", "Apple"]

// GoodsDto structure:
var product = new GoodsDto(
    id: Guid.NewGuid(),
    name: "Apple iPhone 11",
    price: 669.99,
    pictureFile: "/img/apps-eCommerce/2.png",
    category: "Cell Phones",
    rating: 5,
    brand: "Apple",
    description: "The Apple iPhone 11 is a great smartphone..."
);
```

--------------------------------

### Integrate Masa Blazor Pro Styles

Source: https://github.com/masastack/masa.blazor.pro/blob/main/README.md

Includes the necessary Masa Blazor Pro CSS files into your Blazor project's main HTML file. This ensures the project utilizes the pre-defined styles for layouts and components. The file paths depend on whether you are using Blazor WebAssembly or Blazor Server.

```html
<html lang="en">
	<head>
		<!--Style-->
		<link href="css/masa-blazor-pro.css" rel="stylesheet">
		<!--<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">-->
		<link href="Masa.Blazor.Pro.styles.css" rel="stylesheet">
	</head>
</html>
```

--------------------------------

### Configure E-Commerce Dashboard Charts - C#

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

Configures various charts for an e-commerce dashboard including orders (line chart), profit (bar chart), and earnings (pie chart). It defines chart options like tooltips, axes, series data, and colors using anonymous objects. Dependencies include ECommerceService for data retrieval.

```csharp
// Masa.Blazor.Pro.Client/Pages/Dashboard/ECommerce.razor.cs
namespace Masa.Blazor.Pro.Client.Pages.Dashboard
{
    public partial class ECommerce : ProComponentBase
    {
        private object? _orderChart;
        private object? _profitChart;
        private object? _earningsChart;
        private object? _revenueReportChart;
        private object? _budgetChart;

        private List<DataTableHeader<CompanyDto>> _headers = new()
        {
            new () { Text = "COMPANY", Value = nameof(CompanyDto.CompanyName) },
            new () { Text = "CATEGORY", Value = nameof(CompanyDto.Category) },
            new () { Text = "VIEWS", Value = nameof(CompanyDto.Views) },
            new () { Text = "REVENUE", Value = nameof(CompanyDto.Revenue) },
            new () { Text = "SALES", Value = nameof(CompanyDto.Sales) },
        };

        private List<CompanyDto> _companyList = ECommerceService.GetCompanyList();

        protected override void OnInitialized()
        {
            // Configure line chart for orders
            _orderChart = new
            {
                Tooltip = new { Trigger = "axis" },
                XAxis = new
                {
                    axisLine = new { Show = false },
                    splitLine = new
                    {
                        Show = true,
                        LineStyle = new { Color = new[] { "#F0F3FA" } }
                    },
                    axisLabel = new { Show = false },
                    axisTick = new { Show = false }
                },
                YAxis = new
                {
                    axisLine = new { Show = false },
                    axisLabel = new { Show = false },
                    axisTick = new { Show = false },
                    splitLine = new { Show = false }
                },
                Series = new[]
                {
                    new
                    {
                        name = "series-1",
                        Type = "line",
                        Data = ECommerceService.GetOrderChartData(),
                        Color = "#4318FF",
                        SymbolSize = 6,
                        Symbol = "circle"
                    }
                },
                Grid = new { x = 3, x2 = 3, y = 3, y2 = 3 }
            };

            // Configure bar chart for profit
            _profitChart = new
            {
                Tooltip = new
                {
                    Trigger = "axis",
                    axisPointer = new { Type = "shadow" }
                },
                XAxis = new
                {
                    Data = new[] { "", "", "", "", "" },
                    axisLine = new { Show = false },
                    axisLabel = new { Show = false },
                    axisTick = new { Show = false },
                    splitLine = new { Show = false }
                },
                YAxis = new
                {
                    axisLine = new { Show = false },
                    axisLabel = new { Show = false },
                    axisTick = new { Show = false },
                    splitLine = new { Show = false }
                },
                Series = new[]
                {
                    new
                    {
                        Type = "bar",
                        Data = ECommerceService.GetProfitChartData(),
                        Color = "#4318FF"
                    }
                },
                Grid = new { x = 3, x2 = 3, y = 3, y2 = 3 }
            };

            // Configure pie chart for earnings
            int[] earningsData = ECommerceService.GetEarningsChartData();
            _earningsChart = new
            {
                Tooltip = new { Trigger = "item" },
                Series = new[]
                {
                    new
                    {
                        Type = "pie",
                        Radius = "90%",
                        Label = new { Show = false },
                        Data = new[]
                        {
                            new
                            {
                                value = earningsData[0],
                                Name = "Product",
                                ItemStyle = new { Color = "#4318FF" }
                            },
                            new
                            {
                                value = earningsData[1],
                                Name = "App",
                                ItemStyle = new { Color = "#05CD99" }
                            },
                            new
                            {
                                value = earningsData[2],
                                Name = "Service",
                                ItemStyle = new { Color = "#FFB547" }
                            }
                        }
                    }
                }
            };
        }
    }
}
```

--------------------------------

### Global Service Registration for Server-side Rendering in C#

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

This C# extension method, AddGlobalForServer, configures global services specifically for server-side rendering in a Blazor application. It loads navigation data from a local JSON file and registers scoped services like CookieStorage and GlobalConfig. Dependencies include System.IO and System.Reflection namespaces. It returns an IServiceCollection for further configuration.

```csharp
// Masa.Blazor.Pro.Client/Global/ServiceCollectionExtensions.cs

// For Server-side rendering
public static IServiceCollection AddGlobalForServer(this IServiceCollection services)
{
    var basePath = Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location);

    // Load navigation from JSON file
    services.AddNav(Path.Combine(basePath, "wwwroot/nav/nav.json"));

    // Register scoped services
    services.AddScoped<CookieStorage>();
    services.AddScoped<GlobalConfig>();

    return services;
}
```

--------------------------------

### Configure Budget Radar Chart (C#)

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

Configures a radar chart to visualize budget data. It defines the radar's indicator axes with maximum values and the series data, including value arrays and styling for symbols and colors. Relies on `ECommerceService.GetBudgetChartData()` for data retrieval.

```csharp
            // Configure radar chart for budget
            _budgetChart = new
            {
                Radar = new[]
                {
                    new
                    {
                        Indicator = new[]
                        {
                            new { Text = "Jan", Max = 300 },
                            new { Text = "Feb", Max = 300 },
                            new { Text = "Mar", Max = 300 },
                            new { Text = "Apr", Max = 300 },
                            new { Text = "May", Max = 300 },
                            new { Text = "Jun", Max = 300 },
                            new { Text = "Aug", Max = 300 },
                            new { Text = "Sep", Max = 300 }
                        },
                        Radius = 70
                    }
                },
                Series = new[]
                {
                    new
                    {
                        Type = "radar",
                        Data = new[]
                        {
                            new { Value = ECommerceService.GetBudgetChartData() }
                        },
                        Color = "#4318FF",
                        SymbolSize = 6,
                        Symbol = "circle"
                    }
                }
            };
```

--------------------------------

### Configure MasaBlazor Theme

Source: https://github.com/masastack/masa.blazor.pro/blob/main/README.md

Sets up the MasaBlazor theme within your Blazor application's service configuration. This allows for customization of primary and accent colors, affecting the overall look and feel of the components.

```csharp
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddMasaBlazor(builder => 
{
    builder.UseTheme(option=>
        {
            option.Primary = "#4318FF";
            option.Accent = "#4318FF";
        }
    );
});
```

--------------------------------

### Navigation System Helper for Blazor Route Management

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

Utilizes the NavHelper service to manage application navigation, including accessing navigation structures, manipulating page tabs, and navigating between routes in a Blazor application. Navigation structure is typically loaded from a 'nav.json' file.

```csharp
// Masa.Blazor.Pro.Client/Global/Nav/NavHelper.cs
@inject NavHelper Nav

// Access navigation structure
List<NavModel> visibleNavs = Nav.Navs;           // Hierarchical navigation items
List<NavModel> flatNavs = Nav.SameLevelNavs;     // Flattened navigation items
List<PageTabItem> tabs = Nav.PageTabItems;       // Page tabs configuration
string currentUri = Nav.CurrentUri;               // Current URI

// Navigate to different routes
Nav.NavigateTo("/dashboard/ecommerce");
Nav.NavigateTo("app/todo");

// Navigate using nav model
NavModel dashboardNav = Nav.Navs.First(n => n.Href == "dashboard/ecommerce");
Nav.NavigateTo(dashboardNav);

// Navigation structure loaded from nav.json:
// {
//   "Id": "dashboard",
//   "Title": "Dashboard",
//   "Icon": "mdi-view-dashboard",
//   "Children": [
//     { "Title": "eCommerce", "Href": "dashboard/ecommerce" },
//     { "Title": "Analytics", "Href": "dashboard/analytics" }
//   ]
// }
```

--------------------------------

### Configure Revenue Report Stacked Bar Chart (C#)

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

Configures a stacked bar chart to display revenue report data. It defines chart titles, tooltips, legends, axis configurations, and series data with specific colors and stacking properties. Assumes `ECommerceService.GetRevenueReportChartData()` provides the necessary data.

```csharp
            // Configure stacked bar chart for revenue report
            var revenueData = ECommerceService.GetRevenueReportChartData();
            _revenueReportChart = new
            {
                Title = new
                {
                    Text = "Revenue Report",
                    TextStyle = new { Color = "#1B2559" }
                },
                Tooltip = new
                {
                    Trigger = "axis",
                    axisPointer = new { Type = "shadow" }
                },
                Legend = new
                {
                    Data = new[] { "Earning", "Expense" },
                    Right = "5px",
                    TextStyle = new { Color = "#485585" }
                },
                XAxis = new
                {
                    Data = new[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Aug", "Sep" },
                    axisLine = new
                    {
                        Show = false,
                        LineStyle = new { Color = "#485585" }
                    },
                    axisTick = new { Show = false },
                    splitLine = new { Show = false }
                },
                YAxis = new
                {
                    axisLine = new
                    {
                        Show = false,
                        LineStyle = new { Color = "#485585" }
                    },
                    axisTick = new { Show = false },
                    splitLine = new { Show = false }
                },
                Series = new[]
                {
                    new
                    {
                        Name = "Earning",
                        Type = "bar",
                        Data = revenueData[0],
                        Color = "#4318FF",
                        Stack = "x",
                        BarWidth = "15"
                    },
                    new
                    {
                        Name = "Expense",
                        Type = "bar",
                        Data = revenueData[1],
                        Color = "#A18BFF",
                        Stack = "x",
                        BarWidth = "15"
                    }
                },
                Grid = new { y2 = 25 }
            };
```

--------------------------------

### User Management Service for Blazor Data

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

Provides methods to retrieve user-related data, including user lists, available roles, role-icon mappings, subscription plans, status options, and permission templates. It's designed for use within a Blazor application's data layer.

```csharp
// Masa.Blazor.Pro.Client/Data/App/User/UserService.cs
using Masa.Blazor.Pro.Data.App.User;

// Get complete user list
List<UserDto> users = UserService.GetList();

// Get available roles
List<string> roles = UserService.GetRoleList();
// Returns: ["Admin", "Author", "Editor", "Maintainer", "Subscriber"]

// Get role icon mapping
Dictionary<string, string> roleIcons = UserService.GetRoleIconMap();
// Returns: { "Editor": "mdi-pencil,info", "Admin": "mdi-account-edit,error", ... }

// Get available plans
List<string> plans = UserService.GetPlanList();
// Returns: ["Basic", "Company", "Enterprise", "Team"]

// Get status options
List<string> statuses = UserService.GetStatusList();
// Returns: ["Pending", "Active", "Inactive"]

// Get permission templates
List<PermissionDto> permissions = UserService.GetPermissionsList();

// UserDto structure includes:
// - UserName, FullName, Email, HeadImg
// - Role, Plan, Status, Contact, Country
// - Profit, Sales
```

--------------------------------

### ProComponentBase for Shared Functionality in C#

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

The ProComponentBase class serves as a foundation for Blazor components in Masa.Blazor.Pro, offering built-in internationalization (i18n) and cascading parameter handling. It simplifies translations by providing a T method that utilizes an injected I18n service. Dependencies include the I18n service. Usage involves inheriting from this base class and calling the T method for translated strings.

```csharp
// All page components inherit from this base class
@inherits ProComponentBase

// ProComponentBase implementation
public abstract class ProComponentBase : ComponentBase
{
    [Inject]
    protected I18n I18n { get; set; } = null!;

    [CascadingParameter(Name = "CultureName")]
    protected string? Culture { get; set; }

    // Translate text using i18n service
    protected string T(string? key, params object[] args)
    {
        return I18n.T(key, args: args);
    }
}

// Usage in components
<h1>@T("Dashboard.Title")</h1>
<p>@T("Dashboard.Description", userName, dateTime)</p>

// i18n files located in wwwroot/i18n/
// en-US.json: { "Dashboard.Title": "Dashboard", "Dashboard.Description": "Welcome {0}, today is {1}" }
// zh-CN.json: { "Dashboard.Title": "仪表板", "Dashboard.Description": "欢迎 {0}，今天是 {1}" }
```

--------------------------------

### Blazor Product Shop UI with Filtering

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

This Razor component defines the UI for a product shop page. It includes filter controls (radio buttons for categories, select for price range, checkboxes for brands) and a grid to display products. It utilizes Masa.Blazor components for UI elements and Blazor's data binding for interactivity. Navigation to product details is handled via a click event.

```razor
@page "/app/ecommerce/shop"
@inherits ProComponentBase

<MRow>
    <!-- Filter Sidebar -->
    <MCol Md=3>
        <MCard>
            <MCardText>
                <!-- Category Filter -->
                <h6>Category</h6>
                <MRadioGroup @bind-Value="_shopData.Category">
                    @foreach (var category in _categories)
                    {
                        <MRadio Value="@category" Label="@category"></MRadio>
                    }
                </MRadioGroup>

                <!-- Price Range Filter -->
                <h6 class="mt-4">Price Range</h6>
                <MSelect @bind-Value="MultiRangeText"
                         Items="_multiRanges"
                         ItemText="r => r.Text"
                         ItemValue="r => r.Text">
                </MSelect>

                <!-- Brand Filter -->
                <h6 class="mt-4">Brands</h6>
                <MCheckbox @bind-Value="_shopData.FilterBrands"
                           Label="@brand"
                           Value="@brand"
                           @key="brand"
                           Class="mt-1"
                           @foreach (var brand in _brands)>
                </MCheckbox>
            </MCardText>
        </MCard>
    </MCol>

    <!-- Product Grid -->
    <MCol Md=9>
        <MRow>
            @foreach (var product in _shopData.FilterdGoodsList)
            {
                <MCol Md=4 Sm=6 Key="@product.Id">
                    <MCard @onclick="() => NavigateToDetails(product.Id)">
                        <MImage Src="@product.PictureFile" Height="200"></MImage>
                        <MCardText>
                            <h6>@product.Name</h6>
                            <MRating Value="@product.Rating" Readonly></MRating>
                            <div class="d-flex justify-space-between">
                                <span class="text-h6">${@product.Price}</span>
                                <MButton Icon Color="primary">
                                    <MIcon>mdi-cart-plus</MIcon>
                                </MButton>
                            </div>
                        </MCardText>
                    </MCard>
                </MCol>
            }
        </MRow>
    </MCol>
</MRow>

@code {
    readonly List<MultiRangeDto> _multiRanges = ShopService.GetMultiRangeList();
    readonly List<string> _categories = ShopService.GetCategortyList();
    readonly List<string> _brands = ShopService.GetBrandList();
    readonly ShopPage _shopData = new(ShopService.GetGoodsList());

    string _multiRangeText = "All";
    string MultiRangeText
    {
        get => _multiRangeText;
        set
        {
            _multiRangeText = value;
            _shopData.MultiRange = _multiRanges.First(item => item.Text == value);
        }
    }

    private void NavigateToDetails(Guid id)
    {
        Nav.NavigateTo($"app/ecommerce/details/{id}");
    }
}
```

--------------------------------

### User List with Data Table in Blazor

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

This Blazor component renders a user list using MDataTable. It includes a search bar, an 'Add User' button, and displays user information such as FullName, Role, Plan, and Status. Custom rendering is applied to user roles and status for better visualization. Action buttons allow for viewing, editing, and deleting users.

```razor
@page "/app/user/list"
@inherits ProComponentBase

<MCard>
    <MCardText>
        <MDataTable Headers="_headers"
                    TItem="UserDto"
                    Items="_users"
                    Search="@_search"
                    ItemsPerPage="10">
            <TopContent>
                <MRow Class="mb-4">
                    <MCol Md=6>
                        <MTextField @bind-Value="_search"
                                    Placeholder="Search User"
                                    PrependInnerIcon="mdi-magnify"
                                    HideDetails>
                        </MTextField>
                    </MCol>
                    <MCol Md=6 Class="text-right">
                        <MButton Color="primary" OnClick="() => Nav.NavigateTo('app/user/edit')">
                            Add User
                        </MButton>
                    </MCol>
                </MRow>
            </TopContent>
            <ItemColContent>
                @switch (context.Header.Value)
                {
                    case nameof(UserDto.FullName):
                        <div class="d-flex align-center">
                            <MAvatar Size=32>
                                @if (!string.IsNullOrEmpty(context.Item.HeadImg))
                                {
                                    <MImage Src="@context.Item.HeadImg"></MImage>
                                }
                                else
                                {
                                    <span>@context.Item.FullName[0]</span>
                                }
                            </MAvatar>
                            <div class="ml-3">
                                <div>@context.Item.FullName</div>
                                <small class="text-caption">@context.Item.Email</small>
                            </div>
                        </div>
                        break;
                    case nameof(UserDto.Role):
                        var roleIcon = _roleIconMap[context.Item.Role].Split(',');
                        <MChip Color="@roleIcon[1]" Small>
                            <MIcon Left Size=16>@roleIcon[0]</MIcon>
                            @context.Item.Role
                        </MChip>
                        break;
                    case nameof(UserDto.Status):
                        <MChip Color="@GetStatusColor(context.Item.Status)" Small>
                            @context.Item.Status
                        </MChip>
                        break;
                    case "Actions":
                        <MButton Icon OnClick="() => ViewUser(context.Item)">
                            <MIcon>mdi-eye-outline</MIcon>
                        </MButton>
                        <MButton Icon OnClick="() => EditUser(context.Item)">
                            <MIcon>mdi-pencil-outline</MIcon>
                        </MButton>
                        <MButton Icon OnClick="() => DeleteUser(context.Item)">
                            <MIcon>mdi-delete-outline</MIcon>
                        </MButton>
                        break;
                    default:
                        @context.Value
                        break;
                }
            </ItemColContent>
        </MDataTable>
    </MCardText>
</MCard>

@code {
    private string _search = "";
    private List<UserDto> _users = UserService.GetList();
    private Dictionary<string, string> _roleIconMap = UserService.GetRoleIconMap();

    private List<DataTableHeader<UserDto>> _headers = new()
    {
        new() { Text = "User", Value = nameof(UserDto.FullName) },
        new() { Text = "Role", Value = nameof(UserDto.Role) },
        new() { Text = "Plan", Value = nameof(UserDto.Plan) },
        new() { Text = "Status", Value = nameof(UserDto.Status) },
        new() { Text = "Actions", Value = "Actions", Sortable = false }
    };

    private string GetStatusColor(string status) => status switch
    {
        "Active" => "success",
        "Inactive" => "error",
        "Pending" => "warning",
        _ => "default"
    };

    private void ViewUser(UserDto user) => Nav.NavigateTo($"app/user/view?id={user.UserName}");
    private void EditUser(UserDto user) => Nav.NavigateTo($"app/user/edit?id={user.UserName}");
    private void DeleteUser(UserDto user)
    {
        // Implement delete logic
        _users.Remove(user);
        StateHasChanged();
    }
}

```

--------------------------------

### Dashboard Analytics Service for Blazor

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

Provides methods to fetch dashboard analytics data, including company performance metrics and various chart data for orders, profits, earnings, revenue, and budgets. It also defines the structure for `CompanyDto`.

```csharp
// Masa.Blazor.Pro.Client/Data/Dashboard/ECommerce/ECommerceService.cs
using Masa.Blazor.Pro.Data.Dashboard.ECommerce;

// Get company performance data
List<CompanyDto> companies = ECommerceService.GetCompanyList();

// Get chart data for various metrics
int[][] orderData = ECommerceService.GetOrderChartData();
int[] profitData = ECommerceService.GetProfitChartData();
int[] earningsData = ECommerceService.GetEarningsChartData();
int[][] revenueData = ECommerceService.GetRevenueReportChartData();
int[] budgetData = ECommerceService.GetBudgetChartData();

// CompanyDto includes:
// - CompanyName, CompanyEmail, CompanyIcon
// - Category, Views, ViewTime
// - Revenue, Sales, Rise (trending indicator)
```

--------------------------------

### Razor E-commerce Dashboard Layout with Masa.Blazor Components

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

This Razor component defines the structure for an e-commerce dashboard. It uses Masa.Blazor components like MRow, MCol, MCard, and MECharts to display key performance indicators and charts. The component also includes an MDataTable to present company performance data. Dependencies include Masa.Blazor library and potentially a data service for populating the charts and table.

```razor
@page "/dashboard/ecommerce"
@inherits ProComponentBase
@inject MasaBlazor MasaBlazor
@inject NavHelper NavHelper

<MRow>
    <!-- Orders Card with Line Chart -->
    <MCol Md=3 Sm=12>
        <MCard Height=146>
            <MCardText>
                <MRow Class="max-height" NoGutters>
                    <MCol>
                        <span class="text-btn neutral-lighten-4--text">Orders</span>
                        <h5 class="mt-1">$230k</h5>
                    </MCol>
                    <MCol Class="block-center">
                        <MECharts Height=100 Width="100%" Class="mt-1" Option=_orderChart></MECharts>
                    </MCol>
                </MRow>
            </MCardText>
        </MCard>
    </MCol>

    <!-- Profit Card with Bar Chart -->
    <MCol Md=3 Sm=12>
        <MCard Height=146>
            <MCardText>
                <MRow Class="max-height" NoGutters>
                    <MCol>
                        <span class="text-btn neutral-lighten-4--text">Profit</span>
                        <h5 class="mt-1">$682.5k</h5>
                    </MCol>
                    <MCol Class="block-center">
                        <MECharts Height=100 Width="100%" Class="mt-1" Option=_profitChart></MECharts>
                    </MCol>
                </MRow>
            </MCardText>
        </MCard>
    </MCol>

    <!-- Earnings Card with Pie Chart -->
    <MCol Md=3 Sm=12>
        <MCard Height=146>
            <MCardText>
                <MRow Class="max-height" NoGutters>
                    <MCol>
                        <span class="text-btn neutral-lighten-4--text">Earnings</span>
                        <h5 class="my-1">$9745</h5>
                        <span class="text-caption neutral-lighten-2--text">
                            68% more earning than last month.
                        </span>
                    </MCol>
                    <MCol Class="block-center">
                        <MECharts Height=100 Width="100%" Class="mt-1" Option=_earningsChart></MECharts>
                    </MCol>
                </MRow>
            </MCardText>
        </MCard>
    </MCol>
</MRow>

<!-- Revenue Report with Stacked Bar Chart -->
<MRow>
    <MCol Md=8 Sm=12>
        <MCard>
            <MCardText>
                <MECharts Height=326 Width="100%" Option=_revenueReportChart></MECharts>
            </MCardText>
        </MCard>
    </MCol>
</MRow>

<!-- Company Performance Data Table -->
<MRow>
    <MCol Md=8 Sm=12>
        <MCard Class="max-height">
            <MDataTable Headers="_headers"
                        TItem="CompanyDto"
                        Items="_companyList"
                        HideDefaultFooter
                        Class="table-border-none pt-2">
                <HeaderColContent Context="header">
                    <span class="text-caption neutral-lighten-2--text ml-2">@header.Text</span>
                </HeaderColContent>
                <ItemColContent>
                    @switch (context.Header.Value)
                    {
                        case nameof(CompanyDto.CompanyName):
                            <div Class="py-2 ml-2">
                                <div class="d-flex">
                                    <MAvatar>
                                        <MImage Height=48 MaxWidth=48 Contain src="@context.Item.CompanyIcon"></MImage>
                                    </MAvatar>
                                    <div class="ml-4">
                                        <span class="text-subtitle">@context.Item.CompanyName</span>
                                        <br />
                                        <span class="text-caption">@context.Item.CompanyEmail</span>
                                    </div>
                                </div>
                            </div>
                            break;
                        case nameof(CompanyDto.Sales):
                            <span class="text-subtitle">@context.Item.Sales</span>
                            @if (context.Item.Rise)
                            {
                                <MIcon Class="ml-3" Color="green">mdi-trending-up</MIcon>
                            }
                            else
                            {
                                <MIcon Class="ml-3" Color="red">mdi-trending-down</MIcon>
                            }
                            break;
                        default:
                            @context.Value
                            break;
                    }
                </ItemColContent>
            </MDataTable>
        </MCard>
    </MCol>
</MRow>

```

--------------------------------

### Cookie Storage Service for Blazor

Source: https://context7.com/masastack/masa.blazor.pro/llms.txt

Demonstrates how to use the CookieStorage service to set and retrieve values from browser cookies in a Blazor application. It supports storing and retrieving complex objects by automatically handling serialization and deserialization, and values persist across browser sessions.

```csharp
// Masa.Blazor.Pro.Client/Global/CookieStorage.cs
@inject CookieStorage CookieStorage

// Store values in browser cookies
await CookieStorage.SetAsync("myKey", "myValue");
await CookieStorage.SetAsync("userSettings", new { theme = "dark", lang = "en" });

// Retrieve values from cookies
string value = await CookieStorage.GetAsync("myKey");
string userSettings = await CookieStorage.GetAsync("userSettings");

// Implementation automatically serializes/deserializes complex objects
// Values persist across browser sessions
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.