Confirm?

Are you sure you want to proceed?
A
Adrian G.

Kizuku Study Dashboard

Clone & Customize via AI

Blazor Dashboard presents study metrics, today's tasks, weekly progress, and achievements using Bootstrap cards, progress bars, and lists. Shows @bind checkbox binding and component-driven state.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Metric cards for streak, weekly goal, efficiency tip, and XP/level. - Today's task list with checkbox binding and colored subject badges. - Weekly progress section with aggregate hours and per-subject progress bars. - Achievements grid rendered with icons and conditional styles. - Action button to start a focused session; mock data loading via a view model. ## Key components - Razor markup using Bootstrap classes: container, row, col-*, card, progress, badge, btn. - InputCheckbox with `@bind-Value` for task completion state. - FontAwesome icon usage (via icon CSS classes in the models). - DashboardViewModel and small POCO models: StudyTaskModel, SubjectProgressModel, AchievementModel. ## How it works - State is provided by a DashboardViewModel instance initialized in the page (`OnInitialized` calls `LoadData`). - Task checkboxes bind to StudyTaskModel.IsCompleted using `@bind-Value`; UI reflects changes instantly in the component state. - Progress bars compute widths from numeric properties such as WeeklyStudyHoursPercentage and SubjectProgress.ProgressPercentage. - Iteration uses `foreach` to render lists and achievement icons; conditional rendering handles empty collections. ## Styling - Layout and responsive behavior rely on Bootstrap grid (row, col-lg-7/5, col-md-3) and utility spacing (mb-*, ms-*). - Visual elements use Bootstrap cards, progress bars, badges, and button classes; icons use FontAwesome class strings from the model. - No custom Tailwind or MudBlazor theme detected; responsiveness is provided by Bootstrap grid breakpoints. ## Reuse steps 1. Add a Razor page to a Blazor project and copy the markup and view model classes. 2. Ensure Bootstrap CSS and FontAwesome are included in wwwroot/index.html or _Host.cshtml. 3. Adjust models or bind to real services: replace DashboardViewModel.LoadData with injected services (e.g., IStudyService) in Program.cs. 4. Import namespaces as needed (`using` for models) and register any services in Program.cs. 5. Replace mock data with API calls and add authentication/authorization as required. ## Limitations & next steps - This is a single-page UI scaffold generated by Instruct UI and uses in-memory mock data (LoadData). - No EditForm or DataAnnotations-based validation is present; add EditForm when editing models is required. - No persistence, API wiring, or authentication is included; integrate HttpClient or application services to fetch and save real data. - Consider extracting components (MetricCard, TaskList, AchievementGrid) for reuse and adding unit tests and accessibility attributes.