●
LIVE DEMO
Generated using
Instruct UI - An AI for Blazor UI Generation
## What's implemented
- Weekly timesheet page with a header, action bar, and an editable table of time entries.
- Row-level project/task display with per-day editable time inputs and a computed total column.
- Keyboard hints and a START action button plus Add line functionality.
- UI badges, avatar, and contextual chips for time adjustments.
## Key components
- MudLayout, MudAppBar, MudMainContent, MudPaper
- MudGrid, MudItem for layout
- MudTable (HeaderContent, RowTemplate, MudTh, MudTd)
- MudTextField for time cell inputs (Value / ValueChanged binding)
- MudButton, MudButtonGroup, MudIconButton, MudMenu, MudChip, MudBadge, MudAvatar
- TimesheetEntryModel as the view model with computed TotalHours property
## How it works
- The page initializes a mocked _today date, generates a 7-day _weekDays list, and loads _entries data in OnInitialized.
- MudTable iterates _entries and renders a MudTd per weekday; each cell uses MudTextField with Value and ValueChanged to update the entry's DailyHours dictionary.
- TotalHours property parses stored time strings using TimeSpan.TryParseExact and returns a formatted hours:minutes string.
- AddLine creates a new TimesheetEntryModel and appends it to the _entries list, causing the table to re-render.
- Interaction patterns are synchronous UI updates via bound model mutation rather than form submission.
## Styling
- Uses MudBlazor component library for layout and controls and custom app.css to tweak input visuals and highlight the current day.
- Custom classes: .timesheet-table, .time-input, .current-day-header, .current-day-cell, .task-description-column, .search-field.
- Responsive visibility uses utility classes (d-none, d-md-flex, d-sm-block) and MudGrid for alignment.
## Reuse steps
1. Add the MudBlazor NuGet package and register MudBlazor services in Program.cs (builder.Services.AddMudServices()).
2. Import MudBlazor namespace in _Imports.razor and include the custom CSS in the project stylesheet or layout.
3. Copy TimesheetPage.razor and TimesheetEntryModel.cs into a Blazor project and adjust route and namespaces.
4. Replace mocked data and _today with real services/DateTime providers; wire a persistence service for saving DailyHours.
5. Optionally add validation or an EditForm wrapper and use stronger time parsing/normalization on input change.
## Limitations & next steps
- Page contains only client-side UI and mocked data; no persistence, authentication, or API wiring is included.
- Time input parsing is string-based; add input masks, validation, or specialized time pickers for robustness.
- Consider adding paging/filtering, server-side save endpoints, and unit tests for TotalHours calculation.
- Add concurrency handling and localization for time formats when integrating into a multi-region .NET backend.