Added Room and some little design updates

app/views/dashboard/index.html.erb

@@ -1,134 +1,205 @@
-<% content_for :title, "Dashboard Übersicht" %>
+<% content_for :title, "Dashboard" %>
 
 <div class="space-y-6">
-
-  <!-- KENNZAHLEN-GRID -->
-  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
-
-    <!-- Karte 1: Gesamtartikel -->
-    <div class="bg-white border border-gray-200 rounded-xl p-5 shadow-sm flex items-center gap-4">
-      <div class="p-3 bg-blue-50 text-blue-600 rounded-lg">
-        <!-- Heroicon: cube -->
-        <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>
-        <p class="text-xs font-semibold uppercase text-gray-400">Objekte im System</p>
-        <h3 class="text-2xl font-bold text-gray-800"><%= @total_items %></h3>
+  
+  <!-- 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>
 
-    <!-- Karte 2: Im Lager -->
-    <div class="bg-white border border-gray-200 rounded-xl p-5 shadow-sm flex items-center gap-4">
-      <div class="p-3 bg-amber-50 text-amber-600 rounded-lg">
-        <!-- Heroicon: archive-box -->
-        <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="M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z" /></svg>
-      </div>
-      <div>
-        <p class="text-xs font-semibold uppercase text-gray-400">Aktuell im Lager</p>
-        <h3 class="text-2xl font-bold text-amber-600"><%= @items_in_storage %></h3>
+    <!-- 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>
 
-    <!-- Karte 3: Gesamtwert (Wird formatiert in Euro ausgegeben) -->
-    <div class="bg-white border border-gray-200 rounded-xl p-5 shadow-sm flex items-center gap-4">
-      <div class="p-3 bg-green-50 text-green-600 rounded-lg">
-        <!-- Heroicon: banknotes -->
-        <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 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75m0 .75h-.75m0 0v-.75m0 .75h.75m0 0V18m0-13.5h16.5M1.5 6h21M3.75 18v.75m0-.75h-.75m0 0v.75m0-.75h.75m0 0V6M10.5 9a2.25 2.25 0 114.5 0 2.25 2.25 0 01-4.5 0z" /></svg>
-      </div>
-      <div>
-        <p class="text-xs font-semibold uppercase text-gray-400">Gesamtwert Inventar</p>
-        <h3 class="text-2xl font-bold text-gray-800">
-          <%= number_to_currency(@total_value, unit: "€", separator: ",", delimiter: ".", format: "%n %u") %>
-        </h3>
+    <!-- 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>
 
-  <!-- NEUESTE SYSTEMZUGÄNGE -->
-  <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
-    <h2 class="text-base font-bold text-gray-800 mb-4 flex items-center gap-2">
-      <!-- Heroicon: clock -->
-      <svg class="h-5 w-5 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 11-18 0 9 9 0 0118 0z" /></svg>
-      Zuletzt registrierte Artikel
-    </h2>
-
-    <% if @recent_items.any? %>
-      <div class="space-y-3">
-        <% @recent_items.each do |item| %>
-          <div class="flex items-start sm:items-center justify-between p-3 bg-gray-50 rounded-lg text-sm border border-gray-100 gap-4">
-            <div class="flex items-center gap-3 min-w-0">
-              <span class="p-1.5 bg-blue-100 text-blue-700 rounded-md font-mono text-[10px] font-bold">#<%= item.sticker_id %></span>
-              <div class="min-w-0">
-                <p class="font-semibold text-gray-800 truncate"><%= item.name %></p>
-                <p class="text-xs text-gray-500">
+  <!-- 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">
+    
+    <!-- SPALTE 1: ZULETZT HINZUGEFÜGTE ARTIKEL -->
+    <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.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 %>
+                      <span class="inline-flex items-center font-mono font-bold text-[10px] text-white bg-blue-600 px-1.5 py-0.5 rounded shadow-sm tracking-wider mt-0.5">
+                        #<%= item.sticker_id %>
+                      </span>
+                    <% end %>        
+                    <div class="min-w-0 whitespace-normal break-words">
+                      <%= link_to item_path(item), class: "font-bold text-gray-900 hover:text-blue-600 hover:underline inline leading-tight" do %>
+                        <%= item.name %>
+                      <% end %>
+                      <span class="block text-[10px] text-gray-400 mt-0.5"><%= item.category.name %></span>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-5 py-3.5 whitespace-nowrap align-middle shrink-0 w-32">
                   <% if item.user.present? %>
-                    👤 <%= item.user.name %>
+                    <span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-green-50 text-green-800 px-2 py-0.5 rounded border border-green-200 shadow-sm">
+                      <svg class="h-3 w-3 text-green-600 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 1 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                      </svg>
+                      <%= item.user.name %>
+                    </span>
                   <% elsif item.room.present? %>
-                    📍 <%= item.room.name_with_building %>
+                    <%= link_to room_path item.room do %>
+                      <span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-blue-50 text-blue-800 px-2 py-0.5 rounded border border-blue-200 shadow-sm">
+                        <svg class="h-3 w-3 text-blue-600 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>
+                        <%= item.room.name %>
+                      </span>
+                    <% end %>
                   <% else %>
-                    📦 Im Hauptlager
+                    <span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-amber-50 text-amber-800 px-2 py-0.5 rounded border border-amber-200 shadow-sm">
+                      <svg class="h-3 w-3 text-amber-600 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>
+                      Hauptlager
+                    </span>
                   <% end %>
-                </p>
-              </div>
-            </div>
-            <div class="text-xs text-gray-400 text-right shrink-0">
-              <%= time_ago_in_words(item.created_at) %>
-            </div>
-          </div>
-        <% end %>
+                </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>
-    <% else %>
-      <div class="text-center py-6 text-gray-400 text-sm">
-        Bisher wurden keine Artikel im System erfasst.
-      </div>
-    <% end %>
-  </div>
-  <div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 mt-6">
-    <h2 class="text-base font-bold text-gray-800 mb-4 flex items-center gap-2">
-      <!-- Heroicon: arrows-right-left -->
-      <svg class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
-      </svg>
-      Letzte Artikel-Zuordnungen & Bewegungen
-    </h2>
+    </div>
 
-    <% if @recent_assignments.any? %>
-      <div class="space-y-3">
-        <% @recent_assignments.each do |log| %>
-          <div class="flex items-start sm:items-center justify-between p-3 bg-gray-50 rounded-lg text-sm border border-gray-100 gap-4">
-            <div class="flex items-center gap-3 min-w-0">
-              <!-- Markantes blaues Badge für die Sticker-ID des bewegten Artikels -->
-              <span class="p-1.5 bg-blue-100 text-blue-700 rounded-md font-mono text-[10px] font-bold shrink-0">
-                #<%= log.item.sticker_id %>
-              </span>
-
-              <div class="min-w-0">
-                <p class="font-semibold text-gray-800">
-                  <%= link_to log.item.name, item_path(log.item), class: "hover:text-blue-600 transition" %>
-                </p>
-                <p class="text-xs text-gray-500">
-                  <% if log.user.present? %>
-                    👤 <%= log.user.name %>
-                  <% elsif log.room.present? %>
-                    📍 <%= log.room.name_with_building %>
-                  <% else %>
-                    📦 Ins Hauptlager gelegt
-                  <% end %>
-                </p>
-              </div>
-            </div>
-
-            <div class="text-xs text-gray-400 text-right shrink-0">
-              <%= time_ago_in_words(log.created_at) %>
-            </div>
-          </div>
-        <% end %>
+    <!-- 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>
-    <% else %>
-      <div class="text-center py-6 text-gray-400 text-sm">
-        Es wurden noch keine Artikel-Bewegungen im System registriert.
+      
+      <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 %>
+                      <span class="inline-flex items-center font-mono font-bold text-[10px] text-white bg-blue-600 px-1.5 py-0.5 rounded shadow-sm tracking-wider mt-0.5">
+                        #<%= log.item.sticker_id %>
+                      </span>
+                    <% 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 %>
+                      <% end %>
+                      <% else %>
+                        <span class="font-bold text-gray-400">Gelöschter Artikel</span>
+                      <% end %>
+                      
+                      <div class="mt-1">
+                        <% if log.user.present? %>
+                          <span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-green-50 text-green-800 px-2 py-0.5 rounded border border-green-200 shadow-sm">
+                            <svg class="h-3 w-3 text-green-600 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 1 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                            </svg>
+                            <%= log.user.name %> zugewiesen
+                          </span>
+                        <% elsif log.room.present? %>
+                          <%= link_to room_path log.room do %>
+                            <span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-blue-50 text-blue-800 px-2 py-0.5 rounded border border-blue-200 shadow-sm">
+                              <svg class="h-3 w-3 text-blue-600 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>
+                              In <%= log.room.name %> platziert
+                            </span>
+                          <% end %>
+                        <% else %>
+                          <span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-amber-50 text-amber-800 px-2 py-0.5 rounded border border-amber-200 shadow-sm">
+                            <svg class="h-3 w-3 text-amber-600 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>
+                            Hauptlager zurückgebracht
+                          </span>
+                        <% end %>
+                      </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>
-    <% end %>
+    </div>
+
   </div>
 
-</div>