Added Items and Dashboard
Some checks failed
CI / scan_ruby (push) Has been cancelled
CI / scan_js (push) Has been cancelled
CI / lint (push) Has been cancelled
CI / test (push) Has been cancelled
CI / system-test (push) Has been cancelled

This commit is contained in:
2026-05-22 03:52:54 +02:00
parent a706dbe7ff
commit 44d019b4b5
24 changed files with 966 additions and 4 deletions

View File

@@ -1,6 +1,6 @@
<!-- Ersetze den alten Button im Top-Bar-Yield durch diesen echten Link -->
<% content_for :title, "Inventar-Kategorien" %>
<% content_for :title, "Kategorien" %>
<div class="space-y-6">
<!-- Header-Aktionen (Nutzt das Yield aus deinem Layout) -->

View File

@@ -0,0 +1,86 @@
<% content_for :title, "Dashboard Übersicht" %>
<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>
</div>
</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>
</div>
</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>
</div>
</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">
<% if item.user.present? %>
Zugewiesen an: 👤 <%= item.user.name %>
<% elsif item.room.present? %>
Standort: 📍 <%= item.room.name_with_building %>
<% else %>
📦 Im Hauptlager
<% end %>
</p>
</div>
</div>
<div class="text-xs text-gray-400 text-right shrink-0">
<%= time_ago_in_words(item.created_at) %> vor
</div>
</div>
<% end %>
</div>
<% else %>
<div class="text-center py-6 text-gray-400 text-sm">
Bisher wurden keine Artikel im System erfasst.
</div>
<% end %>
</div>
</div>

View File

@@ -0,0 +1,137 @@
<!--<%= form_with(model: item, class: "contents") do |form| %>
<% if item.errors.any? %>
<div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-md mt-3">
<h2><%= pluralize(item.errors.count, "error") %> prohibited this item from being saved:</h2>
<ul class="list-disc ml-6">
<% item.errors.each do |error| %>
<li><%= error.full_message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="inline">
<%= form.submit class: "w-full sm:w-auto rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white inline-block font-medium cursor-pointer" %>
</div>
<% end %>
-->
<%= form_with(model: item, class: "space-y-6 max-w-2xl mx-auto bg-white border border-gray-200 rounded-xl shadow-sm p-6 md:p-8") do |form| %>
<% if item.errors.any? %>
<div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 border border-red-200" role="alert">
<h2 class="font-bold mb-1"><%= pluralize(item.errors.count, "Fehler") %> verhinderten das Speichern:</h2>
<ul class="list-disc list-inside text-xs">
<% item.errors.each do |error| %>
<li><%= error.full_message %></li>
<% end %>
</ul>
</div>
<% end %>
<div>
<!-- Ändert die Überschrift dynamisch je nach Zustand des Artikels -->
<h2 class="text-xl font-bold text-gray-800">
<%= item.new_record? ? "Artikel registrieren" : "Artikel bearbeiten" %>
</h2>
<p class="text-sm text-gray-500 mt-1">
<%= item.new_record? ? "Trage hier die Unikat-Daten wie Seriennummer und Sticker-ID ein." : "Aktualisiere die Daten oder verändere den aktuellen Standort des Geräts." %>
</p>
</div>
<hr class="border-gray-200">
<!-- Stammdaten (Name und SKU) -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<%= form.label :name, "Artikelname / Modell", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
<%= form.text_field :name, class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50" %>
</div>
<div>
<%= form.label :sku, "SKU (Artikelnummer)", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
<%= form.text_field :sku, class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50" %>
</div>
</div>
<!-- Herstelldaten & Preise (Bereinigt um min_stock) -->
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="sm:col-span-2">
<%= form.label :serial_number, "Seriennummer (Hersteller)", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
<%= form.text_field :serial_number, class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50" %>
</div>
<div>
<%= form.label :price, "Einkaufspreis (€)", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
<%= form.text_field :price, placeholder: "0.00", class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50" %>
</div>
</div>
<!-- Kategorie-Auswahl -->
<div>
<%= form.label :category_id, "Kategorie", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
<%= form.collection_select :category_id, Category.all, :id, :name, { prompt: "Bitte wählen..." }, { class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-white" } %>
</div>
<!-- QR STICKER-ID -->
<div data-controller="scanner">
<%= form.label :sticker_id, "Vorgedruckte Sticker-ID / QR-Nummer", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
<div class="relative flex rounded-lg shadow-sm">
<%= form.text_field :sticker_id, data: { scanner_target: "input" }, class: "py-2 px-3 block w-full border border-gray-300 rounded-l-lg text-sm bg-gray-50/50" %>
<button type="button" data-action="click->scanner#startCamera" class="py-2 px-4 border border-l-0 border-gray-300 bg-gray-50 text-gray-700 rounded-r-lg text-sm flex items-center gap-1.5 hover:bg-gray-100 transition">
Scannen
</button>
</div>
</div>
<hr class="border-gray-200">
<!-- INTERAKTIVE ZUWEISUNGS-WEICHE (Variante 2) -->
<div data-controller="assignment" class="space-y-4">
<label class="block text-sm font-semibold text-gray-800">Standort / Zuweisung festlegen</label>
<div class="flex flex-wrap gap-4 p-3 bg-gray-50 rounded-lg border border-gray-200">
<label class="flex items-center gap-2 text-sm text-gray-700 font-medium cursor-pointer">
<input type="radio" name="assignment_type" value="storage" data-action="change->assignment#toggle" checked class="text-blue-600 focus:ring-blue-500 h-4 w-4 border-gray-300">
📦 Im Hauptlager belassen
</label>
<label class="flex items-center gap-2 text-sm text-gray-700 font-medium cursor-pointer">
<input type="radio" name="assignment_type" value="user" data-action="change->assignment#toggle" class="text-blue-600 focus:ring-blue-500 h-4 w-4 border-gray-300">
👤 Mitarbeiter zuweisen
</label>
<label class="flex items-center gap-2 text-sm text-gray-700 font-medium cursor-pointer">
<input type="radio" name="assignment_type" value="room" data-action="change->assignment#toggle" class="text-blue-600 focus:ring-blue-500 h-4 w-4 border-gray-300">
📍 Raum zuweisen
</label>
</div>
<!-- Dropdown: Mitarbeiter -->
<div data-assignment-target="userSection" class="hidden">
<%= form.label :user_id, "Mitarbeiter auswählen", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
<%= form.collection_select :user_id, User.all, :id, :name_with_department, { prompt: "Mitarbeiter wählen..." }, { class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-white" } %>
</div>
<!-- Dropdown: Räume -->
<div data-assignment-target="roomSection" class="hidden">
<%= form.label :room_id, "Raum / Standort auswählen", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
<%= form.collection_select :room_id, Room.all, :id, :name_with_building, { prompt: "Raum wählen..." }, { class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-white" } %>
</div>
</div>
<hr class="border-gray-200">
<!-- Notizen -->
<div>
<%= form.label :notes, "Zusätzliche Notizen / Details", class: "block text-sm font-medium mb-1.5 text-gray-700" %>
<%= form.text_area :notes, rows: 3, class: "py-2 px-3 block w-full border border-gray-300 rounded-lg text-sm bg-gray-50/50" %>
</div>
<hr class="border-gray-200">
<!-- Buttons -->
<div class="flex justify-end gap-x-3">
<%= link_to "Abbrechen", items_path, class: "py-2.5 px-4 inline-flex items-center text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition shadow-sm" %>
<%= form.submit "Artikel speichern", class: "py-2.5 px-4 inline-flex items-center text-sm font-semibold rounded-lg bg-blue-600 text-white hover:bg-blue-700 shadow-sm transition cursor-pointer" %>
</div>
<% end %>

View File

@@ -0,0 +1,2 @@
<div id="<%= dom_id item %>" class="w-full sm:w-auto my-5 space-y-5">
</div>

View File

@@ -0,0 +1,2 @@
json.extract! item, :id, :created_at, :updated_at
json.url item_url(item, format: :json)

View File

@@ -0,0 +1,50 @@
<!--<%# content_for :title, "Editing item" %>
<div class="md:w-2/3 w-full">
<h1 class="font-bold text-4xl">Editing item</h1>
<%#= render "form", item: @item %>
<%= link_to "Show this item", @item, class: "w-full sm:w-auto text-center mt-2 sm:mt-0 sm:ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<%= link_to "Back to items", items_path, class: "w-full sm:w-auto text-center mt-2 sm:mt-0 sm:ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
</div>
-->
<% content_for :title, "Artikel bearbeiten: #{@item.name}" %>
<!-- OBERE AKTIONSLISTE (Zurück-Button in der Top-Bar) -->
<% content_for :top_bar_actions do %>
<%= link_to item_path(@item), class: "py-2 px-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-1.5 shadow-sm transition" do %>
<!-- Heroicon: arrow-left -->
<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="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
Zurück zu den Details
<% end %>
<% end %>
<div class="space-y-6">
<!-- Das zentrale Formular mit dem aktuellen Artikel-Objekt laden -->
<%= render "form", item: @item %>
<!-- GEFAHRENBEREICH: Artikel löschen -->
<div class="max-w-2xl mx-auto bg-red-50/50 border border-red-200 rounded-xl p-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 shadow-sm">
<div class="flex items-start gap-3">
<div class="p-2 bg-red-100 text-red-700 rounded-lg shrink-0 mt-0.5">
<!-- Heroicon: trash -->
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /></svg>
</div>
<div>
<h3 class="text-sm font-bold text-red-800">Artikel dauerhaft ausbuchen</h3>
<p class="text-xs text-red-600 mt-0.5">Dies entfernt das Gerät unwiderruflich aus dem Bestand. Die bisherige Verlaufshistorie wird dabei ebenfalls gelöscht.</p>
</div>
</div>
<!-- Löschen-Link gekoppelt an Rails Turbo-Method-Delete -->
<%= link_to "Artikel löschen",
item_path(@item),
data: { turbo_method: :delete, turbo_confirm: "Möchtest du diesen Artikel wirklich unwiderruflich aus dem System entfernen?" },
class: "py-2 px-4 text-sm font-semibold text-white bg-red-600 hover:bg-red-700 rounded-lg shadow-sm transition" %>
</div>
</div>

View File

@@ -0,0 +1,154 @@
<!-- <%# content_for :title, "Items" %>
<div class="w-full">
<% if notice.present? %>
<p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-md inline-block" id="notice"><%= notice %></p>
<% end %>
<div class="flex justify-between items-center">
<h1 class="font-bold text-4xl">Items</h1>
<%= link_to "New item", new_item_path, class: "rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white block font-medium" %>
</div>
<div id="items" class="min-w-full divide-y divide-gray-200 space-y-5">
<% if @items.any? %>
<% @items.each do |item| %>
<div class="flex flex-col sm:flex-row justify-between items-center pb-5 sm:pb-0">
<%#= render item %>
<div class="w-full sm:w-auto flex flex-col sm:flex-row space-x-2 space-y-2">
<%= link_to "Show", item, class: "w-full sm:w-auto text-center rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<%= link_to "Edit", edit_item_path(item), class: "w-full sm:w-auto text-center rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<%= button_to "Destroy", item, method: :delete, class: "w-full sm:w-auto rounded-md px-3.5 py-2.5 text-white bg-red-600 hover:bg-red-500 font-medium cursor-pointer", data: { turbo_confirm: "Are you sure?" } %>
</div>
</div>
<% end %>
<% else %>
<p class="text-center my-10">No items found.</p>
<% end %>
</div>
</div>-->
<% content_for :title, "Gesamtbestand" %>
<!-- OBERE AKTIONSLISTE (Der funktionierende Button für neue Artikel) -->
<% content_for :top_bar_actions do %>
<%= link_to new_item_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 %>
<!-- Heroicon: plus -->
<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>
Artikel hinzufügen
<% end %>
<% end %>
<div class="space-y-6">
<!-- FILTER- & SUCHZEILE -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
<div class="p-4 border-b border-gray-200 bg-gray-50 flex flex-col sm:flex-row gap-3 justify-between items-center">
<!-- Suchfeld -->
<div class="relative w-full sm:max-w-xs">
<input type="text" placeholder="Artikel, SKU oder Besitzer..." class="py-2 px-3 pl-9 block w-full border border-gray-300 rounded-lg text-sm bg-white focus:border-blue-500 focus:ring-blue-500">
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
<!-- Heroicon: magnifying-glass -->
<svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.637 10.637z" /></svg>
</div>
</div>
<!-- CSV Export & Filter Toggles -->
<div class="flex items-center gap-2 w-full sm:w-auto justify-end">
<%= link_to items_path(format: :csv), class: "py-2 px-3 border border-gray-300 rounded-lg text-sm font-medium bg-white text-gray-700 hover:bg-gray-50 flex items-center gap-1.5 transition shadow-sm", title: "Liste als Excel/CSV exportieren" do %>
<!-- Heroicon: arrow-down-tray -->
<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="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" /></svg>
<span>Daten exportieren</span>
<% end %>
</div>
</div>
<!-- DIE BESTANDSTABELLE -->
<!-- DIE BESTANDSTABELLE (Mit Sticky Header) -->
<% if @items.any? %>
<!-- 1. Der umschließende Container bekommt eine maximale Höhe und wird scrollbar -->
<div class="overflow-x-auto max-h-[calc(100vh-12rem)] border border-gray-200 rounded-xl shadow-sm">
<table class="min-w-full divide-y divide-gray-200 text-sm table-fixed sm:table-auto">
<!-- 2. Der THEAD wird sticky gesetzt und erhält einen festen Hintergrund -->
<thead class="bg-gray-50 sticky top-0 z-20 shadow-[0_1px_0_0_rgba(229,231,235,1)]">
<tr>
<th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Artikel / Details</th>
<th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Seriennummer (SN)</th>
<th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Aktueller Standort / Inhaber</th>
<th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Sticker-ID</th>
<th scope="col" class="px-6 py-3 text-end font-semibold text-gray-500 uppercase tracking-wider">Wert</th>
<th scope="col" class="px-6 py-3 text-end font-semibold text-gray-500 uppercase tracking-wider">Aktionen</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 bg-white">
<% @items.each do |item| %>
<tr class="hover:bg-gray-50/50 transition">
<!-- Spalte 1: Name, SKU, Kategorie -->
<td class="px-6 py-4 whitespace-nowrap">
<div class="font-semibold text-gray-900"><%= item.name %></div>
<div class="text-xs text-gray-400">SKU: <%= item.sku %> • <%= item.category.name %></div>
</td>
<!-- Spalte 2: Herstellerschlüssel -->
<td class="px-6 py-4 whitespace-nowrap font-mono text-xs text-gray-600">
<%= item.serial_number %>
</td>
<!-- Spalte 3: Inhaber-Weiche nach Variante 2 -->
<td class="px-6 py-4 whitespace-nowrap text-gray-700">
<% if item.user.present? %>
<span class="inline-flex items-center gap-1.5 text-gray-900 font-medium">
👤 <%= item.user.name %>
</span>
<% elsif item.room.present? %>
<span class="inline-flex items-center gap-1.5 text-gray-600">
📍 <%= item.room.name_with_building %>
</span>
<% else %>
<span class="inline-flex items-center py-0.5 px-2 rounded-full text-xs font-medium bg-amber-50 text-amber-800 border border-amber-200">
📦 Im Hauptlager
</span>
<% end %>
</td>
<!-- Spalte 4: Interne QR-ID -->
<td class="px-6 py-4 whitespace-nowrap font-mono text-xs font-bold text-blue-600">
#<%= item.sticker_id %>
</td>
<!-- Spalte 5: Anschaffungspreis -->
<td class="px-6 py-4 whitespace-nowrap text-end font-medium text-gray-900">
<%= number_to_currency(item.price, unit: "€", separator: ",", delimiter: ".", format: "%n %u") %>
</td>
<!-- Spalte 6: Verknüpfte REST-Links -->
<td class="px-6 py-4 whitespace-nowrap text-end font-medium space-x-3 text-xs">
<%= link_to "Details", item_path(item), class: "text-blue-600 hover:text-blue-900 transition" %>
<%= link_to "Bearbeiten", edit_item_path(item), class: "text-gray-500 hover:text-gray-700 transition" %>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
<% else %>
<!-- EMPTY STATE (Falls die Datenbank komplett leer ist) -->
<div class="text-center py-16 text-gray-400">
<svg class="mx-auto h-12 w-12 text-gray-300" 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>
<p class="text-sm mt-3 font-medium">Bisher sind keine Inventargegenstände erfasst.</p>
<p class="text-xs text-gray-400 mt-1">Klicke oben rechts auf "Artikel hinzufügen", um das erste Gerät einzubuchen.</p>
</div>
<% end %>
</div>
</div>

View File

@@ -0,0 +1 @@
json.array! @items, partial: "items/item", as: :item

View File

@@ -0,0 +1,27 @@
<!-- <%# content_for :title, "New item" %>
<div class="md:w-2/3 w-full">
<h1 class="font-bold text-4xl">New item</h1>
<%#= render "form", item: @item %>
<%= link_to "Back to items", items_path, class: "w-full sm:w-auto text-center mt-2 sm:mt-0 sm:ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
</div>
-->
<% content_for :title, "Neuen Artikel hinzufügen" %>
<!-- OBERE LEISTE (Zurück-Button in der Top-Bar via Layout-Yield) -->
<% content_for :top_bar_actions do %>
<%= link_to items_path, class: "py-2 px-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-1.5 shadow-sm transition" do %>
<!-- Heroicon: arrow-left -->
<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="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
Zurück zur Übersicht
<% end %>
<% end %>
<div class="p-4 md:p-6">
<!-- Lädt das Formular-Partial und übergibt das leere Artikel-Objekt -->
<%= render "form", item: @item %>
</div>

View File

@@ -0,0 +1,241 @@
<!--<%# content_for :title, "Showing item" %>
<div class="md:w-2/3 w-full">
<% if notice.present? %>
<p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-md inline-block" id="notice"><%= notice %></p>
<% end %>
<h1 class="font-bold text-4xl">Showing item</h1>
<%#= render @item %>
<%= link_to "Edit this item", edit_item_path(@item), class: "w-full sm:w-auto text-center rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<%= link_to "Back to items", items_path, class: "w-full sm:w-auto text-center mt-2 sm:mt-0 sm:ml-2 rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
<%= button_to "Destroy this item", @item, method: :delete, form_class: "sm:inline-block mt-2 sm:mt-0 sm:ml-2", class: "w-full rounded-md px-3.5 py-2.5 text-white bg-red-600 hover:bg-red-500 font-medium cursor-pointer", data: { turbo_confirm: "Are you sure?" } %>
</div>
-->
<% content_for :title, "Artikel-Details: #{@item.name}" %>
<!-- OBERE AKTIONSLISTE (Yield im Top-Bar deines Hauptlayouts) -->
<% content_for :top_bar_actions do %>
<div class="flex items-center gap-2">
<%= link_to items_path, class: "py-2 px-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 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="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
Zurück
<% end %>
<%= link_to edit_item_path(@item), class: "py-2 px-3 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg 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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" /></svg>
Bearbeiten
<% end %>
</div>
<% end %>
<div class="max-w-4xl mx-auto space-y-6">
<!-- ZWEI-SPALTIGES CORE-LAYOUT -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- LINKE SEITE: STAMMDATEN & VERANTWORTLICHKEIT (2 Spalten breit) -->
<div class="md:col-span-2 space-y-6">
<!-- STAMMDATEN-BOX -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 space-y-4">
<div>
<span class="inline-flex items-center py-0.5 px-2.5 rounded-full text-xs font-semibold bg-blue-50 text-blue-800 border border-blue-200">
<%= @item.category.name %>
</span>
<h2 class="text-xl font-bold text-gray-900 mt-2"><%= @item.name %></h2>
</div>
<hr class="border-gray-200">
<div class="grid grid-cols-2 gap-4 text-sm">
<div>
<p class="text-xs font-semibold text-gray-400 uppercase">Artikelnummer (SKU)</p>
<p class="font-mono text-gray-800 font-semibold mt-0.5"><%= @item.sku %></p>
</div>
<div>
<p class="text-xs font-semibold text-gray-400 uppercase">Seriennummer (Hersteller)</p>
<p class="font-mono text-gray-800 font-semibold mt-0.5"><%= @item.serial_number %></p>
</div>
<div>
<p class="text-xs font-semibold text-gray-400 uppercase">Anschaffungspreis</p>
<p class="text-gray-800 mt-0.5 font-medium">
<%= number_to_currency(@item.price, unit: "€", separator: ",", delimiter: ".", format: "%n %u") %>
</p>
</div>
<div>
<p class="text-xs font-semibold text-gray-400 uppercase">Registriert am</p>
<p class="text-gray-600 mt-0.5"><%= l(@item.created_at, format: :short) %></p>
</div>
</div>
<% if @item.notes.present? %>
<hr class="border-gray-200">
<div>
<p class="text-xs font-semibold text-gray-400 uppercase">Beschreibung / Notizen</p>
<p class="text-sm text-gray-600 mt-1 leading-relaxed"><%= @item.notes %></p>
</div>
<% end %>
</div>
<!-- STANDORT / AKTUELLE ZUWEISUNG -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6">
<h3 class="text-sm font-bold text-gray-400 uppercase tracking-wider mb-3">Aktueller Status & Aufenthaltsort</h3>
<% if @item.user.present? %>
<div class="flex items-center gap-4 p-4 bg-green-50/50 border border-green-200 rounded-xl">
<div class="p-3 bg-green-100 text-green-700 rounded-lg">
<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.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>
</div>
<div>
<p class="text-xs font-semibold text-green-800 uppercase tracking-wide">In Benutzung (Mitarbeiter)</p>
<h4 class="text-sm font-bold text-gray-900 mt-0.5"><%= @item.user.name %></h4>
<p class="text-xs text-gray-500"><%= @item.user.department&.name || "Keine Abteilung hinterlegt" %></p>
</div>
</div>
<% elsif @item.room.present? %>
<div class="flex items-center gap-4 p-4 bg-blue-50/50 border border-blue-200 rounded-xl">
<div class="p-3 bg-blue-100 text-blue-700 rounded-lg">
<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>
<p class="text-xs font-semibold text-blue-800 uppercase tracking-wide">Fest verbaut / Zugewiesener Raum</p>
<h4 class="text-sm font-bold text-gray-900 mt-0.5"><%= @item.room.name %></h4>
<p class="text-xs text-gray-500"><%= @item.room.building %> • <%= @item.room.floor %></p>
</div>
</div>
<% else %>
<div class="flex items-center gap-4 p-4 bg-amber-50/50 border border-amber-200 rounded-xl">
<div class="p-3 bg-amber-100 text-amber-700 rounded-lg">
<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 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-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 text-amber-800 uppercase tracking-wide">Verfügbar</p>
<h4 class="text-sm font-bold text-gray-900 mt-0.5">Im Hauptlager</h4>
<p class="text-xs text-gray-500">Bereit zur Zuweisung an Mitarbeiter oder Räume.</p>
</div>
</div>
<% end %>
</div>
</div>
<!-- RECHTE SEITE: INTERNE INVENTAR-PLAKETTE (1 Spalte breit) -->
<div class="space-y-6">
<div class="bg-white border border-gray-200 rounded-xl shadow-sm p-4 text-center space-y-4">
<p class="text-xs font-bold text-gray-400 uppercase tracking-wider">Interne Kennzeichnung</p>
<!-- QR-Code Render Box -->
<div class="w-36 h-36 bg-white p-2 border border-gray-200 rounded-lg flex items-center justify-center mx-auto shadow-inner">
<%= @item.generate_qr_code %>
</div>
<div>
<p class="text-xs text-gray-400 font-medium">Inventarnummer</p>
<p class="text-base font-mono font-bold text-blue-600 mt-0.5">#<%= @item.sticker_id %></p>
</div>
<p class="text-[10px] text-gray-400 leading-normal px-2">Vorgedrucktes Etikett vom A4-Bogen. Scan im System führt direkt hierher.</p>
</div>
</div>
</div>
<!-- LEISTE UNTEN: VERLAUFSHISTORIE (Perfektioniertes Icon-Timeline-Design) -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm p-6 md:p-8">
<div class="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>
<h3 class="text-base font-bold text-gray-800">Besitzer- & Standortverlauf</h3>
</div>
<hr class="border-gray-200 mb-6">
<div class="flow-root">
<% if @assignment_logs.any? %>
<ul class="-mb-8">
<% @assignment_logs.each_with_index do |log, index| %>
<% is_last = (index == @assignment_logs.size - 1) %>
<li>
<div class="relative pb-8">
<!-- Vertikale Verbindungslinie nach unten (wird beim letzten Element versteckt) -->
<% unless is_last %>
<span class="absolute top-5 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
<% end %>
<div class="relative flex space-x-3">
<div>
<!-- DER ICON-KREIS: Ändert Farbe und Inhalt dynamisch nach Zuweisungstyp -->
<% if log.user.present? %>
<!-- Zustand: Beim Mitarbeiter (Grün / User-Icon) -->
<span class="h-8 w-8 rounded-full bg-green-50 flex items-center justify-center ring-8 ring-white text-green-600">
<!-- Heroicon: user -->
<svg class="h-4 w-4" 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>
</span>
<% elsif log.room.present? %>
<!-- Zustand: Im Raum (Blau / Pin-Icon) -->
<span class="h-8 w-8 rounded-full bg-blue-50 flex items-center justify-center ring-8 ring-white text-blue-600">
<!-- Heroicon: map-pin -->
<svg class="h-4 w-4" 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>
</span>
<% else %>
<!-- Zustand: Im Hauptlager (Grau / Paket-Icon) -->
<span class="h-8 w-8 rounded-full bg-gray-100 flex items-center justify-center ring-8 ring-white text-gray-600">
<!-- Heroicon: cube -->
<svg class="h-4 w-4" 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>
</span>
<% end %>
</div>
<!-- TEXTINHALT -->
<div class="flex-1 min-w-0 pt-1.5 flex justify-between space-x-4 text-sm">
<div>
<h4 class="font-bold text-gray-800">
<% if log.user.present? %>
Zuweisung an Mitarbeiter: <span class="text-gray-900 font-extrabold"><%= log.user.name %></span>
<% elsif log.room.present? %>
Standortwechsel in Raum: <span class="text-gray-900 font-extrabold"><%= log.room.name_with_building %></span>
<% else %>
Ins Hauptlager übergeben
<% end %>
</h4>
<% if log.returned_at.nil? %>
<span class="inline-flex items-center mt-1.5 py-0.5 px-2 rounded-full text-[10px] font-semibold bg-green-100 text-green-800 border border-green-200">
Aktueller Standort
</span>
<% end %>
</div>
<!-- DATUMSAUSGABE -->
<div class="text-right text-xs whitespace-nowrap text-gray-400 pt-0.5 shrink-0 font-medium">
<time class="text-gray-600">
<%= l(log.assigned_at, format: "%d. %b %Y") %>
<% if log.returned_at.present? %>
bis <%= l(log.returned_at, format: "%d. %b %Y") %>
<% else %>
(Laufend)
<% end %>
</time>
</div>
</div>
</div>
</div>
</li>
<% end %>
</ul>
<% else %>
<div class="text-center py-6 text-gray-400 text-sm">
Bisher wurden keine historischen Übergaben für dieses Gerät verzeichnet.
</div>
<% end %>
</div>
</div>
</div>

View File

@@ -0,0 +1 @@
json.partial! "items/item", item: @item

View File

@@ -66,7 +66,7 @@
<span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Dashboard</span>
<% end %>
<%= link_to "", class: nav_link_class("items") do %>
<%= link_to items_path, class: nav_link_class("items") do %>
<svg class="h-5 w-5 shrink-0 ml-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.007 5.25H3.75v.008h.008V12Zm0 5.25H3.75v.008h.008v-.008Z" /></svg>
<span class="collapse-text ml-3 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Bestandsliste</span>
<% end %>
@@ -128,7 +128,7 @@
</header>
<!-- INHALT DER JEWEILIGEN VIEW -->
<main class="p-4 md:p-6 flex-1 max-w-5xl w-full mx-auto">
<main class="p-4 md:p-6 flex-1 w-full mx-auto px-4 md:px-8">
<!-- Platzhalter für Flash-Meldungen (z.B. erfolgreiches Speichern) -->
<% flash.each do |type, message| %>
<div class="mb-4 p-4 text-sm rounded-lg border <%= type == 'notice' ? 'bg-green-50 text-green-800 border-green-200' : 'bg-red-50 text-red-800 border-red-200' %>">