@page "/employees"
@using DevExpress.Blazor
@inject IEmployeeService EmployeeService

<DxGrid Data="_employees"
        KeyFieldName="Id"
        EditMode="GridEditMode.EditRow"
        EditModelSaving="OnEditModelSaving"
        PageSize="20"
        ShowFilterRow="true"
        ShowGroupPanel="true"
        ColumnResizeMode="GridColumnResizeMode.NextColumn">

    <Columns>
        <DxGridDataColumn FieldName="FirstName" Caption="First Name" Width="150px" />
        <DxGridDataColumn FieldName="LastName" Caption="Last Name" Width="150px" />
        <DxGridDataColumn FieldName="Department" Caption="Department" Width="200px">
            <FilterRowCellTemplate>
                <DxComboBox Data="_departments"
                            Value="(string)context.FilterRowValue"
                            ValueChanged="(string v) => context.FilterRowValue = v"
                            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" />
            </FilterRowCellTemplate>
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="Salary" Caption="Salary" DisplayFormat="C0" Width="120px" />
        <DxGridDataColumn FieldName="HireDate" Caption="Hired" DisplayFormat="d" Width="120px" />
        <DxGridCommandColumn Width="160px">
            <CellDisplayTemplate>
                <DxButton Text="Edit" Click="() => context.Grid.StartEditRowAsync(context.VisibleIndex)"
                          RenderStyle="ButtonRenderStyle.Link" />
            </CellDisplayTemplate>
        </DxGridCommandColumn>
    </Columns>

    <TotalSummary>
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Count" FieldName="Id" />
        <DxGridSummaryItem SummaryType="GridSummaryItemType.Avg" FieldName="Salary" DisplayFormat="Avg: {0:C0}" />
    </TotalSummary>
</DxGrid>

@code {
    private List<Employee> _employees = new();
    private List<string> _departments = new() { "Engineering", "Sales", "HR", "Finance" };

    protected override async Task OnInitializedAsync()
    {
        _employees = await EmployeeService.GetAllAsync();
    }

    private async Task OnEditModelSaving(GridEditModelSavingEventArgs e)
    {
        var editedEmployee = (Employee)e.EditModel;
        var dataItem = _employees.First(emp => emp.Id == editedEmployee.Id);

        dataItem.FirstName = editedEmployee.FirstName;
        dataItem.LastName = editedEmployee.LastName;
        dataItem.Department = editedEmployee.Department;
        dataItem.Salary = editedEmployee.Salary;

        await EmployeeService.UpdateAsync(dataItem);
    }
}

@page "/schedule"
@using DevExpress.Blazor

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="_dataStorage"
             ActiveViewType="SchedulerViewType.WorkWeek"
             AppointmentInserted="OnAppointmentInserted"
             AppointmentUpdated="OnAppointmentUpdated"
             GroupType="SchedulerGroupType.Resource">

    <Views>
        <DxSchedulerDayView DayCount="1" ShowWorkTimeOnly="true"
                            WorkTime="new(TimeSpan.FromHours(8), TimeSpan.FromHours(18))" />
        <DxSchedulerWorkWeekView ShowWorkTimeOnly="true" />
        <DxSchedulerWeekView />
        <DxSchedulerMonthView />
    </Views>
</DxScheduler>

@code {
    private DxSchedulerDataStorage _dataStorage = new()
    {
        AppointmentsSource = new List<Appointment>(),
        AppointmentMappings = new DxSchedulerAppointmentMappings
        {
            Id = nameof(Appointment.Id),
            Start = nameof(Appointment.StartDate),
            End = nameof(Appointment.EndDate),
            Subject = nameof(Appointment.Subject),
            Description = nameof(Appointment.Description),
            LabelId = nameof(Appointment.LabelId),
            StatusId = nameof(Appointment.StatusId),
            ResourceId = nameof(Appointment.RoomId),
            RecurrenceInfo = nameof(Appointment.RecurrenceInfo)
        },
        ResourcesSource = new List<Room>
        {
            new() { Id = 1, Name = "Conference Room A", Color = System.Drawing.Color.Blue },
            new() { Id = 2, Name = "Conference Room B", Color = System.Drawing.Color.Green }
        },
        ResourceMappings = new DxSchedulerResourceMappings
        {
            Id = nameof(Room.Id),
            Caption = nameof(Room.Name),
            Color = nameof(Room.Color)
        }
    };

    private async Task OnAppointmentInserted(DxSchedulerAppointmentItem e)
    {
        var appointment = (Appointment)e.SourceObject;
        await AppointmentService.CreateAsync(appointment);
    }

    private async Task OnAppointmentUpdated(DxSchedulerAppointmentItem e)
    {
        var appointment = (Appointment)e.SourceObject;
        await AppointmentService.UpdateAsync(appointment);
    }
}

@using DevExpress.Blazor

<DxChart Data="_salesData" Width="100%" Height="400px">
    <DxChartTitle Text="Quarterly Sales" />
    <DxChartBarSeries Name="Revenue"
                      ArgumentField="@((SalesRecord s) => s.Quarter)"
                      ValueField="@((SalesRecord s) => s.Revenue)"
                      Color="System.Drawing.Color.SteelBlue" />
    <DxChartLineSeries Name="Target"
                       ArgumentField="@((SalesRecord s) => s.Quarter)"
                       ValueField="@((SalesRecord s) => s.Target)"
                       Color="System.Drawing.Color.OrangeRed" />
    <DxChartLegend Position="RelativePosition.Outside"
                   HorizontalAlignment="HorizontalAlignment.Center"
                   VerticalAlignment="VerticalEdge.Bottom" />
    <DxChartTooltip Enabled="true">
        <ContentTemplate>
            <div>@($"{context.Point.Argument}: {context.Point.Value:C0}")</div>
        </ContentTemplate>
    </DxChartTooltip>
</DxChart>

@code {
    private readonly List<SalesRecord> _salesData = new()
    {
        new("Q1 2024", 120_000m, 100_000m),
        new("Q2 2024", 145_000m, 130_000m),
        new("Q3 2024", 138_000m, 140_000m),
        new("Q4 2024", 162_000m, 150_000m)
    };

    public record SalesRecord(string Quarter, decimal Revenue, decimal Target);
}