recycle_bin 1.0.0

data/app/views/recycle_bin/trash/index.html.erb

@@ -0,0 +1,229 @@
+<h2>Deleted Items (<%= @deleted_items.count %>)</h2>
+
+<!-- Statistics Dashboard -->
+<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 30px;">
+  <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-left: 4px solid #667eea;">
+    <div style="font-size: 2rem; font-weight: bold; color: #667eea; margin-bottom: 8px;"><%= @deleted_items.count %></div>
+    <div style="color: #6c757d; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px;">Items in Trash</div>
+    <div style="font-size: 0.8rem; margin-top: 8px; color: #28a745;">
+      <%= @deleted_items.select { |item| item.deleted_at > 1.day.ago }.count %> today
+    </div>
+  </div>
+  
+  <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-left: 4px solid #667eea;">
+    <div style="font-size: 2rem; font-weight: bold; color: #667eea; margin-bottom: 8px;"><%= @model_types.count %></div>
+    <div style="color: #6c757d; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px;">Model Types</div>
+    <div style="font-size: 0.8rem; margin-top: 8px;">
+      <% if @model_types.any? %>
+        <%= @model_types.join(', ') %>
+      <% else %>
+        No types
+      <% end %>
+    </div>
+  </div>
+  
+  <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-left: 4px solid #667eea;">
+    <div style="font-size: 2rem; font-weight: bold; color: #667eea; margin-bottom: 8px;">
+      <%= @deleted_items.select { |item| item.deleted_at > 7.days.ago }.count %>
+    </div>
+    <div style="color: #6c757d; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px;">This Week</div>
+    <div style="font-size: 0.8rem; margin-top: 8px;">
+      Recent activity
+    </div>
+  </div>
+</div>
+
+<!-- Filters -->
+<% if @model_types.any? %>
+  <div style="background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); margin-bottom: 20px;">
+    <div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap;">
+      <span style="font-weight: 500; color: #495057;">Filter by type:</span>
+      <a href="/recycle_bin/" style="display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #dee2e6; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; <%= params[:type].blank? ? 'background: #667eea; color: white;' : 'color: #495057;' %>">All</a>
+      <% @model_types.each do |model_type| %>
+        <a href="/recycle_bin/?type=<%= model_type %>" style="display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #dee2e6; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; <%= params[:type] == model_type ? 'background: #667eea; color: white;' : 'color: #495057;' %>"><%= model_type %></a>
+      <% end %>
+    </div>
+    
+    <div style="display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 15px;">
+      <span style="font-weight: 500; color: #495057;">Time:</span>
+      <a href="/recycle_bin/?time=today" style="display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #dee2e6; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; <%= params[:time] == 'today' ? 'background: #667eea; color: white;' : 'color: #495057;' %>">Today</a>
+      <a href="/recycle_bin/?time=week" style="display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #dee2e6; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; <%= params[:time] == 'week' ? 'background: #667eea; color: white;' : 'color: #495057;' %>">This Week</a>
+      <a href="/recycle_bin/?time=month" style="display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid #dee2e6; border-radius: 6px; text-decoration: none; font-size: 14px; font-weight: 500; <%= params[:time] == 'month' ? 'background: #667eea; color: white;' : 'color: #495057;' %>">This Month</a>
+    </div>
+  </div>
+<% end %>
+
+<% if @deleted_items.any? %>
+  <div style="background: white; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden;">
+    
+    <!-- Bulk Actions Bar (Initially Hidden) -->
+    <div id="bulk-actions" style="display: none; background: #fff3cd; padding: 16px 20px; border-bottom: 1px solid #ffeaa7; justify-content: space-between; align-items: center;">
+      <span id="bulk-count" style="font-weight: 500; color: #856404;">0 items selected</span>
+      <div style="display: flex; gap: 8px;">
+        <%= form_with url: "/recycle_bin/trash/bulk_restore", method: :patch, local: true, style: "display: inline;" do |form| %>
+          <input type="hidden" id="bulk-restore-items" name="selected_items" value="">
+          <%= form.submit "↶ Restore Selected", 
+                          style: "display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; background: #28a745; color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer;",
+                          onclick: "return handleBulkAction('restore')" %>
+        <% end %>
+        
+        <%= form_with url: "/recycle_bin/trash/bulk_destroy", method: :delete, local: true, style: "display: inline;" do |form| %>
+          <input type="hidden" id="bulk-destroy-items" name="selected_items" value="">
+          <%= form.submit "🗑️ Delete Selected", 
+                          style: "display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; background: #dc3545; color: white; border: none; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer;",
+                          onclick: "return handleBulkAction('destroy')" %>
+        <% end %>
+      </div>
+    </div>
+
+    <table style="width: 100%; border-collapse: collapse;">
+      <thead>
+        <tr style="background: #f8f9fa; border-bottom: 2px solid #dee2e6;">
+          <th style="padding: 16px; text-align: left; font-weight: 600; color: #495057; width: 40px;">
+            <input type="checkbox" id="select-all" style="cursor: pointer;" onchange="toggleSelectAll()">
+          </th>
+          <th style="padding: 16px; text-align: left; font-weight: 600; color: #495057;">Type</th>
+          <th style="padding: 16px; text-align: left; font-weight: 600; color: #495057;">Item</th>
+          <th style="padding: 16px; text-align: left; font-weight: 600; color: #495057;">Deleted At</th>
+          <th style="padding: 16px; text-align: left; font-weight: 600; color: #495057;">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <% @deleted_items.each do |item| %>
+          <tr style="border-bottom: 1px solid #dee2e6;">
+            <td style="padding: 16px;">
+              <input type="checkbox" class="item-checkbox" value="<%= item.class.name %>:<%= item.id %>" style="cursor: pointer;" onchange="updateBulkActions()">
+            </td>
+            <td style="padding: 16px;">
+              <span style="background: #667eea; color: white; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 500;">
+                <%= item.class.name %>
+              </span>
+            </td>
+            <td style="padding: 16px;">
+              <div style="font-weight: 500; color: #495057; margin-bottom: 4px;">
+                <%= truncate(item.recyclable_title, length: 60) %>
+              </div>
+              <small style="color: #6c757d;">ID: <%= item.id %></small>
+            </td>
+            <td style="padding: 16px;">
+              <div style="font-weight: 500; color: #495057; margin-bottom: 4px;">
+                <%= time_ago_in_words(item.deleted_at) %> ago
+              </div>
+              <small style="color: #6c757d;"><%= item.deleted_at.strftime('%B %d, %Y at %l:%M %p') %></small>
+            </td>
+            <td style="padding: 16px;">
+              <div style="display: flex; gap: 8px; flex-wrap: wrap;">
+                <%= form_with url: "/recycle_bin/trash/#{item.class.name}/#{item.id}/restore", method: :patch, local: true, style: "display: inline;" do |form| %>
+                  <%= form.submit "↶ Restore", 
+                                  style: "display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: #28a745; color: white; border: none; border-radius: 6px; text-decoration: none; font-size: 12px; font-weight: 500; cursor: pointer;",
+                                  onclick: "return confirm('Restore this #{item.class.name.downcase}?')" %>
+                <% end %>
+                
+                <%= form_with url: "/recycle_bin/trash/#{item.class.name}/#{item.id}", method: :delete, local: true, style: "display: inline;" do |form| %>
+                  <%= form.submit "🗑️ Delete", 
+                                  style: "display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; background: #dc3545; color: white; border: none; border-radius: 6px; text-decoration: none; font-size: 12px; font-weight: 500; cursor: pointer;",
+                                  onclick: "return confirm('Permanently delete this #{item.class.name.downcase}? This cannot be undone!')" %>
+                <% end %>
+              </div>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+
+  <div style="text-align: center; padding: 20px; color: #6c757d;">
+    Showing <%= @deleted_items.count %> items
+  </div>
+
+<% else %>
+  <div class="empty-state">
+    <div style="font-size: 48px; margin-bottom: 20px;">🎉</div>
+    <h3>Your recycle bin is empty!</h3>
+    <p>Deleted items will appear here and can be restored or permanently removed.</p>
+    
+    <div style="margin-top: 30px;">
+      <a href="/recycle_bin/" style="display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: #667eea; color: white; border-radius: 6px; text-decoration: none; font-weight: 500;">
+        🔄 Refresh
+      </a>
+    </div>
+  </div>
+<% end %>
+
+<script>
+// Bulk selection functionality
+function toggleSelectAll() {
+  const selectAllCheckbox = document.getElementById('select-all');
+  const itemCheckboxes = document.querySelectorAll('.item-checkbox');
+  
+  itemCheckboxes.forEach(checkbox => {
+    checkbox.checked = selectAllCheckbox.checked;
+  });
+  
+  updateBulkActions();
+}
+
+function updateBulkActions() {
+  const checkedBoxes = document.querySelectorAll('.item-checkbox:checked');
+  const bulkActions = document.getElementById('bulk-actions');
+  const bulkCount = document.getElementById('bulk-count');
+  const selectAllCheckbox = document.getElementById('select-all');
+  
+  if (checkedBoxes.length > 0) {
+    bulkActions.style.display = 'flex';
+    bulkCount.textContent = checkedBoxes.length + ' item' + (checkedBoxes.length > 1 ? 's' : '') + ' selected';
+  } else {
+    bulkActions.style.display = 'none';
+  }
+  
+  // Update select-all checkbox state
+  const itemCheckboxes = document.querySelectorAll('.item-checkbox');
+  if (checkedBoxes.length === itemCheckboxes.length && itemCheckboxes.length > 0) {
+    selectAllCheckbox.checked = true;
+    selectAllCheckbox.indeterminate = false;
+  } else if (checkedBoxes.length > 0) {
+    selectAllCheckbox.checked = false;
+    selectAllCheckbox.indeterminate = true;
+  } else {
+    selectAllCheckbox.checked = false;
+    selectAllCheckbox.indeterminate = false;
+  }
+}
+
+function handleBulkAction(action) {
+  const checkedBoxes = document.querySelectorAll('.item-checkbox:checked');
+  
+  if (checkedBoxes.length === 0) {
+    alert('Please select at least one item.');
+    return false;
+  }
+  
+  const selectedItems = Array.from(checkedBoxes).map(cb => cb.value);
+  
+  // Confirmation message
+  let message;
+  if (action === 'restore') {
+    message = 'Restore ' + checkedBoxes.length + ' selected item' + (checkedBoxes.length > 1 ? 's' : '') + '?';
+  } else {
+    message = 'Permanently delete ' + checkedBoxes.length + ' selected item' + (checkedBoxes.length > 1 ? 's' : '') + '? This cannot be undone!';
+  }
+  
+  if (!confirm(message)) {
+    return false;
+  }
+  
+  // Set the hidden input values
+  if (action === 'restore') {
+    document.getElementById('bulk-restore-items').value = JSON.stringify(selectedItems);
+  } else {
+    document.getElementById('bulk-destroy-items').value = JSON.stringify(selectedItems);
+  }
+  
+  return true;
+}
+
+// Initialize bulk actions on page load
+document.addEventListener('DOMContentLoaded', function() {
+  updateBulkActions();
+});
+</script>

data/app/views/recycle_bin/trash/show.html.erb

@@ -0,0 +1,288 @@
+<!-- Breadcrumb -->
+<div style="margin-bottom: 2rem;">
+  <%= link_to "← Back to Dashboard", recycle_bin.root_path, 
+              style: "color: #667eea; text-decoration: none; font-weight: 500;" %>
+</div>
+
+<!-- Item Header Card -->
+<div class="main-card" style="margin-bottom: 2rem;">
+  <div class="card-header">
+    <div>
+      <h1 class="card-title" style="margin-bottom: 0.5rem;">
+        <span class="model-badge" style="margin-right: 1rem;"><%= @item.class.name %></span>
+        <%= @item.recyclable_title %>
+      </h1>
+      <div class="timestamp">
+        Deleted <%= time_ago_in_words(@item.deleted_at) %> ago • 
+        <%= @item.deleted_at.strftime('%B %d, %Y at %l:%M %p') %>
+      </div>
+    </div>
+    
+    <div class="card-actions">
+      <%= link_to recycle_bin.restore_trash_path(@item.class.name, @item), 
+                  method: :patch,
+                  class: "btn btn-success",
+                  data: { confirm: "Restore this #{@item.class.name.downcase}?" } do %>
+        ↶ Restore Item
+      <% end %>
+      <%= link_to recycle_bin.destroy_trash_path(@item.class.name, @item), 
+                  method: :delete,
+                  class: "btn btn-danger",
+                  data: { confirm: "Permanently delete this #{@item.class.name.downcase}? This cannot be undone!" } do %>
+        🗑️ Delete Forever
+      <% end %>
+    </div>
+  </div>
+  
+  <!-- Status Info -->
+  <div style="padding: 1rem 1.5rem; background: #fff3cd; border-bottom: 1px solid #ffeaa7;">
+    <div style="display: flex; align-items: center; gap: 1rem;">
+      <span style="color: #856404; font-weight: 500;">
+        🗑️ This item is in the recycle bin
+      </span>
+      <span class="timestamp">
+        Size: <%= number_to_human_size(@item_memory_size) %> • 
+        ID: <%= @item.id %>
+      </span>
+    </div>
+  </div>
+</div>
+
+<!-- Original Data -->
+<div class="main-card">
+  <div class="card-header">
+    <h3 class="card-title">Original Data</h3>
+    <div class="card-actions">
+      <button class="btn btn-sm btn-outline" onclick="toggleRawData()">
+        📋 Toggle Raw View
+      </button>
+    </div>
+  </div>
+  
+  <div style="padding: 1.5rem;">
+    <% if @original_attributes.any? %>
+      <div class="table-container">
+        <table class="table">
+          <thead>
+            <tr>
+              <th style="width: 30%;">Field</th>
+              <th>Value</th>
+              <th style="width: 15%;">Type</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @original_attributes.each do |key, value| %>
+              <tr>
+                <td>
+                  <strong><%= key.humanize %></strong>
+                </td>
+                <td>
+                  <% if value.nil? %>
+                    <em style="color: #6c757d;">nil</em>
+                  <% elsif value.is_a?(String) && value.length > 100 %>
+                    <div>
+                      <div><%= truncate(value, length: 100) %></div>
+                      <details style="margin-top: 0.5rem;">
+                        <summary style="cursor: pointer; color: #667eea; font-size: 0.9rem;">
+                          Show full content (<%= value.length %> characters)
+                        </summary>
+                        <div style="margin-top: 0.5rem; padding: 1rem; background: #f8f9fa; border-radius: 4px; white-space: pre-wrap; font-family: monospace; font-size: 0.85rem;">
+                          <%= value %>
+                        </div>
+                      </details>
+                    </div>
+                  <% elsif value.is_a?(Time) || value.is_a?(DateTime) %>
+                    <div>
+                      <%= value.strftime('%B %d, %Y at %l:%M %p') %>
+                      <div class="timestamp">(<%= time_ago_in_words(value) %> ago)</div>
+                    </div>
+                  <% elsif value.is_a?(Date) %>
+                    <%= value.strftime('%B %d, %Y') %>
+                  <% elsif value == true %>
+                    <span style="color: #28a745; font-weight: 500;">✓ True</span>
+                  <% elsif value == false %>
+                    <span style="color: #dc3545; font-weight: 500;">✗ False</span>
+                  <% elsif value.is_a?(Numeric) %>
+                    <span style="font-family: monospace;"><%= number_with_delimiter(value) %></span>
+                  <% else %>
+                    <%= value %>
+                  <% end %>
+                </td>
+                <td>
+                  <span class="timestamp">
+                    <%= value.class.name.downcase %>
+                  </span>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+      
+      <!-- Raw Data View (Hidden by default) -->
+      <div id="raw-data" style="display: none; margin-top: 2rem;">
+        <div style="background: #f8f9fa; padding: 1rem; border-radius: 4px; border: 1px solid #dee2e6;">
+          <h4 style="margin-bottom: 1rem; color: #495057;">Raw JSON Data</h4>
+          <pre style="background: #2d3748; color: #e2e8f0; padding: 1rem; border-radius: 4px; overflow-x: auto; font-size: 0.85rem; line-height: 1.4;"><%= JSON.pretty_generate(@original_attributes) %></pre>
+        </div>
+      </div>
+      
+    <% else %>
+      <div class="empty-state">
+        <div class="empty-icon">📄</div>
+        <h4>No data available</h4>
+        <p>This item doesn't have any stored attributes.</p>
+      </div>
+    <% end %>
+  </div>
+</div>
+
+<!-- Associations (if any) -->
+<% if @associations&.any? %>
+  <div class="main-card" style="margin-top: 2rem;">
+    <div class="card-header">
+      <h3 class="card-title">Related Items</h3>
+      <div class="card-actions">
+        <span class="timestamp"><%= @associations.values.flatten.count %> related items</span>
+      </div>
+    </div>
+    
+    <div style="padding: 1.5rem;">
+      <% @associations.each do |association_name, items| %>
+        <div style="margin-bottom: 2rem;">
+          <h4 style="color: #495057; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #dee2e6;">
+            <%= association_name.humanize %>
+            <span class="timestamp">(<%= items.count %> items)</span>
+          </h4>
+          
+          <% if items.any? %>
+            <div style="display: grid; gap: 1rem;">
+              <% items.each do |item| %>
+                <div style="display: flex; align-items: center; padding: 1rem; background: #f8f9fa; border-radius: 6px; border-left: 3px solid #667eea;">
+                  <div style="flex: 1;">
+                    <div style="font-weight: 500; color: #495057;">
+                      <%= item.class.name %> - 
+                      <%= item.respond_to?(:title) ? item.title : 
+                          item.respond_to?(:name) ? item.name : 
+                          "ID: #{item.id}" %>
+                    </div>
+                    <div class="timestamp">
+                      Created <%= time_ago_in_words(item.created_at) %> ago
+                      <% if item.respond_to?(:deleted_at) && item.deleted_at %>
+                        • <span style="color: #dc3545;">Also deleted</span>
+                      <% end %>
+                    </div>
+                  </div>
+                  
+                  <% if item.respond_to?(:deleted_at) && item.deleted_at %>
+                    <span class="model-badge" style="background: #dc3545;">Deleted</span>
+                  <% else %>
+                    <span class="model-badge" style="background: #28a745;">Active</span>
+                  <% end %>
+                </div>
+              <% end %>
+            </div>
+          <% else %>
+            <div class="empty-state" style="padding: 2rem;">
+              <p style="color: #6c757d; font-style: italic;">No related items found.</p>
+            </div>
+          <% end %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>
+
+<!-- Action History -->
+<div class="main-card" style="margin-top: 2rem;">
+  <div class="card-header">
+    <h3 class="card-title">Action History</h3>
+  </div>
+  
+  <div style="padding: 1.5rem;">
+    <div style="display: grid; gap: 1rem;">
+      <!-- Deletion Event -->
+      <div style="display: flex; align-items: start; gap: 1rem; padding: 1rem; border-left: 3px solid #dc3545; background: #fff5f5;">
+        <div style="font-size: 1.5rem;">🗑️</div>
+        <div style="flex: 1;">
+          <div style="font-weight: 500; color: #495057;">Item Deleted</div>
+          <div class="timestamp">
+            <%= @item.deleted_at.strftime('%B %d, %Y at %l:%M %p') %> 
+            (<%= time_ago_in_words(@item.deleted_at) %> ago)
+          </div>
+          <% if @item.respond_to?(:deleted_by) && @item.deleted_by %>
+            <div class="timestamp">by <%= @item.deleted_by %></div>
+          <% end %>
+        </div>
+      </div>
+      
+      <!-- Creation Event -->
+      <div style="display: flex; align-items: start; gap: 1rem; padding: 1rem; border-left: 3px solid #28a745; background: #f0fff4;">
+        <div style="font-size: 1.5rem;">✨</div>
+        <div style="flex: 1;">
+          <div style="font-weight: 500; color: #495057;">Item Created</div>
+          <div class="timestamp">
+            <%= @item.created_at.strftime('%B %d, %Y at %l:%M %p') %> 
+            (<%= time_ago_in_words(@item.created_at) %> ago)
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Quick Actions -->
+<div class="main-card" style="margin-top: 2rem; background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);">
+  <div style="padding: 2rem; text-align: center;">
+    <h4 style="color: #495057; margin-bottom: 1.5rem;">Quick Actions</h4>
+    
+    <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
+      <%= link_to recycle_bin.restore_trash_path(@item.class.name, @item), 
+                  method: :patch,
+                  class: "btn btn-success",
+                  data: { confirm: "Restore this #{@item.class.name.downcase}?" } do %>
+        ↶ Restore to Application
+      <% end %>
+      
+      <%= link_to recycle_bin.destroy_trash_path(@item.class.name, @item), 
+                  method: :delete,
+                  class: "btn btn-danger",
+                  data: { confirm: "Permanently delete this #{@item.class.name.downcase}? This cannot be undone!" } do %>
+        🗑️ Delete Permanently
+      <% end %>
+      
+      <%= link_to recycle_bin.root_path, class: "btn btn-outline" do %>
+        📋 Back to Dashboard
+      <% end %>
+      
+      <button class="btn btn-outline" onclick="window.print()">
+        🖨️ Print Details
+      </button>
+    </div>
+  </div>
+</div>
+
+<!-- JavaScript for interactions -->
+<script>
+  function toggleRawData() {
+    const rawData = document.getElementById('raw-data');
+    if (rawData.style.display === 'none') {
+      rawData.style.display = 'block';
+    } else {
+      rawData.style.display = 'none';
+    }
+  }
+  
+  // Auto-copy functionality for technical details
+  document.addEventListener('click', function(e) {
+    if (e.target.matches('[data-copy]')) {
+      const text = e.target.dataset.copy;
+      navigator.clipboard.writeText(text).then(() => {
+        e.target.textContent = '✓ Copied!';
+        setTimeout(() => {
+          e.target.textContent = text;
+        }, 2000);
+      });
+    }
+  });
+</script>

data/config/routes.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+RecycleBin::Engine.routes.draw do
+  root 'trash#index'
+
+  # Standard resource routes
+  resources :trash, only: [:index] do
+    collection do
+      patch :bulk_restore
+      delete :bulk_destroy
+      delete :cleanup_large_items
+    end
+  end
+
+  # Custom routes for individual items with model type
+  get 'trash/:model_type/:id', to: 'trash#show', as: 'trash'
+  patch 'trash/:model_type/:id/restore', to: 'trash#restore', as: 'restore_trash'
+  delete 'trash/:model_type/:id', to: 'trash#destroy', as: 'destroy_trash'
+end

data/lib/generators/recycle_bin/add_deleted_at/add_deleted_at_generator.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+require 'rails/generators'
+require 'rails/generators/migration'
+
+module RecycleBin
+  module Generators
+    class AddDeletedAtGenerator < ::Rails::Generators::NamedBase
+      include Rails::Generators::Migration
+
+      source_root File.expand_path('templates', __dir__)
+      desc 'Add deleted_at column to a model for soft delete functionality'
+
+      def self.next_migration_number(path)
+        next_migration_number = current_migration_number(path) + 1
+        ActiveRecord::Migration.next_migration_number(next_migration_number)
+      end
+
+      def create_migration
+        migration_template 'add_deleted_at_migration.rb.erb',
+                           "db/migrate/add_deleted_at_to_#{table_name}.rb"
+      end
+
+      def show_instructions
+        say ''
+        say 'Next steps:', :green
+        say '1. Run the migration: rails db:migrate'
+        say "2. Include RecycleBin::SoftDeletable in your #{class_name} model:"
+        say ''
+        say "   class #{class_name} < ApplicationRecord", :yellow
+        say '     include RecycleBin::SoftDeletable', :yellow
+        say '   end', :yellow
+        say ''
+        say "3. Your #{class_name.downcase} records will now be soft deleted when you call .destroy"
+        say '4. Visit /recycle_bin to manage deleted items'
+      end
+
+      private
+
+      def table_name
+        @table_name ||= name.tableize
+      end
+
+      def class_name
+        @class_name ||= name.classify
+      end
+    end
+  end
+end

data/lib/generators/recycle_bin/add_deleted_at/templates/add_deleted_at_migration.rb.erb

@@ -0,0 +1,6 @@
+class AddDeletedAtTo<%= table_name.camelize %> < ActiveRecord::Migration[<%= ActiveRecord::Migration.current_version %>]
+  def change
+    add_column :<%= table_name %>, :deleted_at, :datetime
+    add_index :<%= table_name %>, :deleted_at
+  end
+end