vault171/app/views/dashboard/index.html.erb

<% content_for :title, "Dashboard" %>

<div class="space-y-6">
  
  <!-- DYNAMISCHES STATISTIK-RASTER (3 Spalten auf Desktop, 1 auf Mobile) -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    
    <!-- KACHEL 1: GESAMTZEIT INVENTAR -->
    <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm flex items-center justify-between gap-4">
      <div class="flex items-center gap-4 min-w-0">
        <!-- Icon jetzt links -->
        <div class="p-3 bg-blue-50 text-blue-600 rounded-xl shrink-0 shadow-sm border border-blue-100">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l5.25 3.03M12 12.75v9" />
          </svg>
        </div>
        <div class="space-y-0.5 min-w-0">
          <p class="text-xs font-bold text-gray-400 uppercase tracking-wider truncate">Gesamtbestand</p>
          <p class="text-xs text-gray-500 truncate">Registrierte Unikate</p>
        </div>
      </div>
      <!-- Große Zahl jetzt rechtsbündig -->
      <h3 class="text-3xl font-black text-gray-900 text-end shrink-0"><%= Item.count %></h3>
    </div>

    <!-- KACHEL 2: KATEGORIEN -->
    <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm flex items-center justify-between gap-4">
      <div class="flex items-center gap-4 min-w-0">
        <!-- Icon jetzt links -->
        <div class="p-3 bg-emerald-50 text-emerald-600 rounded-xl shrink-0 shadow-sm border border-emerald-100">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-19.5 0A2.25 2.25 0 0 0 2.25 15v2.25m0-4.5A2.25 2.25 0 0 1 4.5 12h15a2.25 2.25 0 0 1 2.25 2.25m-19.5 0v4.5A2.25 2.25 0 0 0 4.5 21h15a2.25 2.25 0 0 0 2.25-2.25V15M2.25 12V6a2.25 2.25 0 0 1 2.25-2.25h2.25c.59 0 1.157.234 1.576.652L9.75 5.85a2.25 2.25 0 0 0 1.576.652h6.924a2.25 2.25 0 0 1 2.25 2.25v3.25" />
          </svg>
        </div>
        <div class="space-y-0.5 min-w-0">
          <p class="text-xs font-bold text-gray-400 uppercase tracking-wider truncate">Kategorien</p>
          <p class="text-xs text-gray-500 truncate">Geräte-Typen</p>
        </div>
      </div>
      <!-- Große Zahl jetzt rechtsbündig -->
      <h3 class="text-3xl font-black text-gray-900 text-end shrink-0"><%= Category.count %></h3>
    </div>

    <!-- KACHEL 3: RÄUME & STANDORTE -->
    <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm flex items-center justify-between gap-4 sm:col-span-2 lg:col-span-1">
      <div class="flex items-center gap-4 min-w-0">
        <!-- Icon jetzt links -->
        <div class="p-3 bg-amber-50 text-amber-600 rounded-xl shrink-0 shadow-sm border border-amber-100">
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1 1 15 0Z" />
          </svg>
        </div>
        <div class="space-y-0.5 min-w-0">
          <p class="text-xs font-bold text-gray-400 uppercase tracking-wider truncate">Räume & Büros</p>
          <p class="text-xs text-gray-500 truncate">Erfasste Standorte</p>
        </div>
      </div>
      <!-- Große Zahl jetzt rechtsbündig -->
      <h3 class="text-3xl font-black text-gray-900 text-end shrink-0"><%= Room.count %></h3>
    </div>

  </div>

  <!-- UNTERER BEREICH: BREITEN-OPTIMIERTE LISTEN (items-start verhindert vertikale Streckung) -->
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6 items-start">
    
    <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden flex flex-col h-fit">
      <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex items-center gap-2 shrink-0">
        <svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
        </svg>
        <h3 class="font-bold text-gray-700 text-sm">Zuletzt hinzugefügt</h3>
      </div>
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 text-xs table-fixed">
          <tbody class="divide-y divide-gray-200 bg-white">
            <% @recent_items.each do |item| %>
              <tr class="hover:bg-gray-50/50 transition">
                <!-- KORREKTUR: max-w begrenzt die Breite, whitespace-normal erlaubt Zeilenumbruch -->
                <td class="px-5 py-3.5 text-start align-middle max-w-[200px] sm:max-w-[250px]">
                  <div class="flex items-start gap-2.5">
                    <%= link_to item_path(item), class: "shrink-0 transition hover:scale-105 active:scale-95 block" do %>
                      <%= render "layouts/badge", type: :sticker, label: "##{item.sticker_id}" %> 
                    <% end %>        
                    <div class="min-w-0 whitespace-normal break-words">
                      <% if item.present? %>
                        <%= link_to item_path(item), class: "font-bold text-gray-900 hover:text-blue-600 hover:underline inline leading-tight" do %>
                          <%= item.name %>
                          <span class="block text-[10px] text-gray-400 mt-0.5"><%= item.category.name %></span>
                        <% end %>
                      <% else %>
                        <span class="font-bold text-gray-400">Gelöschter Artikel</span>
                      <% end %>
                      <div class="mt-1">
                        <%= render "layouts/badge", type: item.location_badge_type, label: item.location_badge_label(short_room: true) %>
                      </div>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-3.5 whitespace-nowrap text-end text-gray-400 font-medium align-middle shrink-0 w-24">
                  <%= time_ago_in_words(item.created_at) %>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    </div>

    <!-- SPALTE 2: LETZTE LOGBUCH-AKTIVITÄTEN (HISTORIE) -->
    <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden flex flex-col h-fit">
      <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex items-center gap-2 shrink-0">
        <svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
        </svg>
        <h3 class="font-bold text-gray-700 text-sm">Letzte Aktivitäten</h3>
      </div>
      
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 text-xs table-fixed">
          <tbody class="divide-y divide-gray-200 bg-white">
            <% @recent_assignments.each do |log| %>
              <tr class="hover:bg-gray-50/50 transition">
                <!-- KORREKTUR: max-w begrenzt die Breite, whitespace-normal erlaubt Zeilenumbruch -->
                <td class="px-5 py-3.5 text-start align-middle max-w-[200px] sm:max-w-[250px]">
                  <div class="flex items-start gap-2.5">
                    <%= link_to item_path(log.item), class: "shrink-0 transition hover:scale-105 active:scale-95 block" do %>
                      <%= render "layouts/badge", type: :sticker, label: "##{log.item.sticker_id}" %> 
                    <% end %>        
                    <div class="min-w-0 whitespace-normal break-words">
                      <% if log.item.present? %>
                        <%= link_to item_path(log.item), class: "font-bold text-gray-900 hover:text-blue-600 hover:underline inline leading-tight" do %>
                          <%= log.item.name %>
                          <span class="block text-[10px] text-gray-400 mt-0.5"><%= log.item.category.name %></span>
                        <% end %>
                      <% else %>
                        <span class="font-bold text-gray-400">Gelöschter Artikel</span>
                      <% end %>
                      <div class="mt-1">
                        <%= render "layouts/badge", type: log.item.location_badge_type, label: log.item.location_badge_label(short_room: true) %>
                      </div>
                    </div>
                  </div>
                </td>
                <td class="px-5 py-3.5 whitespace-nowrap text-end text-gray-400 font-medium align-middle shrink-0 w-24">
                  <%= time_ago_in_words(log.assigned_at) %>
                </td>
              </tr>
            <% end %>
          </tbody>
        </table>
      </div>
    </div>

  </div>