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

<% content_for :title, "Kategorien" %>

<!-- NEU: Fügt den Hinzufügen-Button oben rechts in die Hauptleiste ein -->
<% content_for :top_bar_actions do %>
  <%= link_to new_category_path, class: "py-2 px-4 text-sm font-semibold rounded-lg bg-blue-600 text-white hover:bg-blue-700 flex items-center gap-1.5 shadow-sm transition" do %>
    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
    </svg>
    <div class="hidden md:inline">
      Kategorie anlegen
    </div>
  <% end %>
<% end %>

<div class="space-y-6">
  
  <% if @categories.any? %>
    <!-- RASTER: Symmetrische Kacheln für Desktop und Mobilgeräte -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
      <% @categories.each do |category| %>
        <div class="bg-white border border-gray-200 rounded-xl p-5 shadow-sm hover:shadow-md transition flex flex-col justify-between gap-4">
          
          <!-- OBERER TEIL: Kategorie-Name -->
          <div>
            <div class="flex items-center gap-3.5">
              <!-- Großes Ordner-Icon -->
              <div class="p-2.5 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="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="min-w-0">
                <h3 class="text-base font-black text-gray-900 truncate leading-tight"><%= category.name %></h3>
                <span class="text-[11px] font-bold text-gray-400 font-mono block mt-0.5 uppercase tracking-wider">Gesamt: <%= category.items.count %></span>
              </div>
            </div>

            <!-- MITTLERER TEIL: Die reinen Bestands-Kacheln (Größere Zahlen & Icons, ohne Text) -->
            <div class="mt-4 grid grid-cols-3 gap-2 border-t border-b border-gray-100 py-3 bg-gray-50/50 -mx-5 px-5">
              
              <!-- 1. IM HAUPTLAGER (Amber/Orange) -->
              <div class="flex flex-col items-center justify-center py-2.5 bg-white border border-amber-100 rounded-lg shadow-sm">
                <!-- Icon vergrößert auf h-5 w-5 -->
                <svg class="h-5 w-5 text-amber-500 shrink-0" 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>
                <!-- Zahl vergrößert auf text-base -->
                <span class="text-base font-black text-gray-900 mt-1.5 font-mono leading-none"><%= category.items_in_storage_count %></span>
              </div>

              <!-- 2. BEI USERN / MITARBEITERN (Grün) -->
              <div class="flex flex-col items-center justify-center py-2.5 bg-white border border-green-100 rounded-lg shadow-sm">
                <!-- Icon vergrößert auf h-5 w-5 -->
                <svg class="h-5 w-5 text-green-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
                </svg>
                <!-- Zahl vergrößert auf text-base -->
                <span class="text-base font-black text-gray-900 mt-1.5 font-mono leading-none"><%= category.items_with_users_count %></span>
              </div>

              <!-- 3. IN RÄUMEN / BÜROS (Blau) -->
              <div class="flex flex-col items-center justify-center py-2.5 bg-white border border-blue-100 rounded-lg shadow-sm">
                <!-- Icon vergrößert auf h-5 w-5 -->
                <svg class="h-5 w-5 text-blue-500 shrink-0" 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>
                <!-- Zahl vergrößert auf text-base -->
                <span class="text-base font-black text-gray-900 mt-1.5 font-mono leading-none"><%= category.items_in_rooms_count %></span>
              </div>

            </div>
          </div>
          
          <!-- UNTERER TEIL: REST-Aktionen -->
          <div class="pt-1 flex items-center justify-between text-xs font-semibold">
            <%= link_to category_path(category), class: "text-blue-600 hover:text-blue-700 transition" do %>
              Liste öffnen →
            <% end %>
            <%= link_to "Bearbeiten", edit_category_path(category), class: "text-gray-400 hover:text-gray-600 transition" %>
          </div>

        </div>
      <% end %>
    </div>
  <% else %>
    <div class="text-center py-16 text-gray-400 bg-white border border-gray-200 rounded-xl shadow-sm">
      <p class="text-sm font-medium">Bisher sind keine Kategorien hinterlegt.</p>
    </div>
  <% end %>

</div>