You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.5 KiB
39 lines
1.5 KiB
<h1 class="mb-4">📊 Dashboard</h1>
|
|
|
|
<!-- Kacheln -->
|
|
<div class="row g-4 mb-4">
|
|
<%= render partial: 'dashboards/summary_tiles' %>
|
|
</div>
|
|
|
|
<!-- Monatsverlauf als Bar Chart -->
|
|
<div class="card shadow-sm mb-4">
|
|
<div class="card-body">
|
|
<h5 class="card-title">📈 Monatsverlauf</h5>
|
|
<%= column_chart @monthly_minutes_chart_data, height: "250px", colors: ["#0d6efd"] %>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scrollbare Monatsübersicht mit ProgressBars -->
|
|
<div class="d-flex overflow-auto gap-3 pb-3">
|
|
<% @report.each do |month, groups| %>
|
|
<% total_minutes = groups.values.map { |data| (data[:hours] * 60 + data[:minutes]) }.sum %>
|
|
<% total_hours = total_minutes / 60 %>
|
|
<% rest_min = total_minutes % 60 %>
|
|
<% percent = ((total_minutes.to_f / @monthly_targets[month]) * 100).round rescue 0 %>
|
|
|
|
<div class="card flex-shrink-0 shadow-sm" style="min-width: 320px;">
|
|
<div class="card-header bg-white fw-bold"><%= month.strftime("%B %Y") %></div>
|
|
<div class="card-body">
|
|
<p class="mb-2">⏱️ <strong><%= total_hours %>h <%= rest_min %>min</strong></p>
|
|
<p class="mb-1">🎯 Ziel: <%= @monthly_targets[month] / 60 %>h</p>
|
|
<div class="progress" style="height: 20px;">
|
|
<div class="progress-bar <%= percent >= 100 ? 'bg-success' : 'bg-primary' %>" role="progressbar"
|
|
style="width: <%= [percent, 100].min %>%;" aria-valuenow="<%= percent %>"
|
|
aria-valuemin="0" aria-valuemax="100">
|
|
<%= percent %>%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|