add tabs

app/views/entries/index.html.erb

@@ -1,15 +1,75 @@
 <h1 class="mb-4">Meine Einträge</h1>
 
-<h5 class="mt-4">📊 Fortschritt je Kombination</h5>
+<!-- 🧭 Tabs-Navigation -->
+<ul class="nav nav-tabs mt-4" id="dashboardTabs" role="tablist">
+  <li class="nav-item" role="presentation">
+    <button class="nav-link active" id="overview-tab" data-bs-toggle="tab" data-bs-target="#overview" type="button" role="tab">📈 Kombinationen</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="chart-tab" data-bs-toggle="tab" data-bs-target="#chart" type="button" role="tab">📊 Fortschritt</button>
+  </li>
+  <li class="nav-item" role="presentation">
+    <button class="nav-link" id="summary-tab" data-bs-toggle="tab" data-bs-target="#summary" type="button" role="tab">📋 Zusammenfassung</button>
+  </li>
+</ul>
+
+<!-- 📑 Tab-Inhalte -->
+<div class="tab-content border rounded-bottom p-3 shadow-sm" id="dashboardTabsContent">
+  <!-- 📈 Kombinationen -->
+  <div class="tab-pane fade show active" id="overview" role="tabpanel">
+    <div class="mb-4 rounded border shadow-sm p-3">
+      <h4>📊 Übersicht je Kombination</h4>
+      <div class="table-responsive">
+        <table class="table table-bordered table-sm table-striped">
+          <thead class="table-light">
+          <tr>
+            <th>Typ</th>
+            <th>Art</th>
+            <th>Verbleibend</th>
+            <th>Soll (h)</th>
+            <th>Wöchentlich</th>
+            <th>Vorauss. Ende</th>
+            <th>Fortschritt</th>
+          </tr>
+          </thead>
+          <tbody>
+          <% ["propädeutikum", "fachspezifikum"].each do |typ| %>
+            <% ["Praktikum", "Selbsterfahrung", "Supervision"].each do |art| %>
+              <% remaining = @remaining_minutes_matrix.dig(typ, art) %>
+              <% soll = current_user.required_hours_matrix.dig(typ, art) %>
+              <% weekly = current_user.weekly_target_matrix.dig(typ, art) %>
+              <% ende = @estimated_end_by_typ_art.dig(typ, art) %>
 
-<div class="container my-4 rounded border shadow-sm py-3 px-4">
+              <% if remaining.present? || soll.present? || weekly.present? %>
+                <tr>
+                  <td><%= typ.capitalize %></td>
+                  <td><%= art.capitalize %></td>
+                  <td><%= remaining ? "#{remaining / 60} h #{remaining % 60} min" : "—" %></td>
+                  <td><%= soll || "—" %> h</td>
+                  <td><%= weekly || "—" %> h/Woche</td>
+                  <td><%= ende.present? ? ende.strftime("%d.%m.%Y") : "—" %></td>
+                  <td>
+                    <% percent = @completion_percent_by_typ_art[[typ, art]] %>
+                    <%= percent ? "#{percent} %" : "—" %>
+                  </td>
+                </tr>
+              <% end %>
+            <% end %>
+          <% end %>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
 
+  <!-- 📊 Fortschritt (Bar Chart) -->
+  <div class="tab-pane fade" id="chart" role="tabpanel">
+    <div class="container my-4 rounded border shadow-sm py-3 px-4">
       <%= bar_chart @progress_chart_data,
                     donut: false,
                     height: "300px",
                     library: {
                       legend: { position: "bottom" },
-
                       tooltip: {
                         callbacks: {
                           label: %|function(context) {
@@ -17,14 +77,14 @@
               }|
                         }
                       }
-
                     } %>
-
     </div>
-<!-- 🔢 Zusammenfassung -->
+  </div>
+
+  <!-- 📋 Zusammenfassung -->
+  <div class="tab-pane fade" id="summary" role="tabpanel">
     <div class="container my-4 rounded border shadow-sm py-3 px-4">
       <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
-
         <div class="col rounded border shadow-sm p-3">
           <h5>🚗 Fahrtkosten (Kilometergeld)</h5>
           <% @total_kilometer_costs_by_year.each do |year, sum| %>
@@ -37,7 +97,6 @@
           <% end %>
         </div>
 
-
         <div class="col rounded border shadow-sm p-3">
           <h5>💶 Fortbildungskosten</h5>
           <% @fortbildungskosten_by_year.each do |year, sum| %>
@@ -79,60 +138,13 @@
           <p><strong>Total: <%= @total_minutes / 60 %>h <%= @total_minutes % 60 %> min</strong></p>
           <p>Propädeutikum: <%= @total_minutes_praktikum_prop / 60 %>h <%= @total_minutes_praktikum_prop % 60 %> min</p>
           <p>Fachspezifikum: <%= @total_minutes_praktikum_fach / 60 %>h <%= @total_minutes_praktikum_fach % 60 %> min</p>
-
-
         </div>
-
       </div>
     </div>
-
-
-<!-- 📊 Übersicht je Kombination -->
-<div class="mb-4 rounded border shadow-sm p-3">
-  <h4>📊 Übersicht je Kombination</h4>
-  <div class="table-responsive">
-    <table class="table table-bordered table-sm table-striped">
-      <thead class="table-light">
-      <tr>
-        <th>Typ</th>
-        <th>Art</th>
-        <th>Verbleibend</th>
-        <th>Soll (h)</th>
-        <th>Wöchentlich</th>
-        <th>Vorauss. Ende</th>
-        <th>Fortschritt</th>
-      </tr>
-      </thead>
-      <tbody>
-      <% ["propädeutikum", "fachspezifikum"].each do |typ| %>
-        <% ["Praktikum", "Selbsterfahrung", "Supervision"].each do |art| %>
-          <% remaining = @remaining_minutes_matrix.dig(typ, art) %>
-          <% soll = current_user.required_hours_matrix.dig(typ, art) %>
-          <% weekly = current_user.weekly_target_matrix.dig(typ, art) %>
-          <% ende = @estimated_end_by_typ_art.dig(typ, art) %>
-
-          <% if remaining.present? || soll.present? || weekly.present? %>
-            <tr>
-              <td><%= typ.capitalize %></td>
-              <td><%= art.capitalize %></td>
-              <td><%= remaining ? "#{remaining / 60} h #{remaining % 60} min" : "—" %></td>
-              <td><%= soll || "—" %> h</td>
-              <td><%= weekly || "—" %> h/Woche</td>
-              <td><%= ende.present? ? ende.strftime("%d.%m.%Y") : "—" %></td>
-              <td>
-                <% percent = @completion_percent_by_typ_art[[typ, art]] %>
-                <%= percent ? "#{percent} %" : "—" %>
-              </td>
-            </tr>
-          <% end %>
-        <% end %>
-      <% end %>
-      </tbody>
-    </table>
   </div>
-
 </div>
 
+
 <div class="container my-4 rounded border shadow-sm p-3">
   <h4 class="mb-4">⏱ Timer</h4>
   <% if @running_entry.present? %>