Confirm?

Are you sure you want to proceed?
A
Adam

Daily Activity Timeline Dashboard

Clone & Customize via AI

MudBlazor Timeline Dashboard visualizes a single day's activities as colored segments on a horizontal timeline with a synchronized activity list. Uses MudBlazor components and Bootstrap utilities for layout and hover tooltips.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Horizontal day timeline (timeline-bar) with colored activity segments - Hover tooltips (MudTooltip) that show activity name and time range - Activity list synchronized with timeline hover (MudList, MudListItem) - Percent-based offset calculation for segment positioning (GetOffsets) - Hover state management with @onmouseover/@onmouseout and HoveredActivityId ## Key components - MudContainer, MudPaper, MudText - MudTooltip, MudList<T>, MudListItem - ActivityModel (POCO) and page code-behind logic - Component-scoped CSS (DailyTimelineDashboard.razor.css) with .timeline-segment and activity-color-* classes ## How it works - Activities is a List<ActivityModel> seeded in OnInitialized; DayStart/DayEnd define the 24h range - GetOffsets computes left and width as percentages of total minutes between DayStart and DayEnd - HoveredActivityId stores the currently hovered activity id; IsHovered applies highlight CSS - Mouse events (@onmouseover/@onmouseout) set and clear HoveredActivityId; MudTooltip wraps timeline segments for hover content ## Styling - Styling is provided by DailyTimelineDashboard.razor.css: .timeline-bar, .timeline-segment, hover and color variants - Layout uses Bootstrap utility classes present in markup (d-flex, justify-content-between, mb-*) alongside MudBlazor components - Timeline positions use percent widths for basic responsiveness; consider larger touch targets for mobile ## Reuse steps 1. Install MudBlazor NuGet and register services (e.g. builder.Services.AddMudServices()) 2. Add @using MudBlazor or include MudBlazor in _Imports.razor 3. Add DailyTimelineDashboard.razor, DailyTimelineDashboard.razor.css and ActivityModel.cs to the project 4. Ensure Bootstrap utility CSS is available or replace utilities with MudBlazor layout components 5. Replace the seeded Activities with backend data and handle timezone/DST when creating DateTime values 6. Add click handlers, ARIA roles, and keyboard support for accessibility and interaction ## Limitations & next steps - This is a single UI page generated by Instruct UI; backend data loading, authentication and persistence are not implemented - No keyboard navigation or ARIA attributes for timeline segments; accessibility needs work - Overlap handling, long-duration events spanning day boundaries, and DST/timezone edge cases require additional logic - Possible extensions: clickable segments, multi-day zoom, server-driven activity feeds, and unit tests for GetOffsets