solidstats 1.1.0 → 2.0.0

data/lib/generators/solidstats/feature/templates/detail_view.html.erb

@@ -0,0 +1,755 @@
+<%# Detail view for <%= human_name %> feature %>
+<div class="<%= file_name.dasherize %>-detail-view">
+  <%# Page Header %>
+  <div class="page-header">
+    <div class="header-content">
+      <div class="header-main">
+        <h1 class="page-title">
+          <span class="page-icon"><%= options[:icon] %></span>
+          <%= human_name %>
+        </h1>
+        <div class="header-actions">
+          <button class="action-btn refresh-btn" onclick="refreshData('<%= file_name %>')">
+            <span class="btn-icon">🔄</span>
+            Refresh Data
+          </button>
+          <a href="<%= solidstats.dashboard_path %>" class="action-btn secondary">
+            <span class="btn-icon">🏠</span>
+            Back to Dashboard
+          </a>
+        </div>
+      </div>
+      <div class="page-description">
+        Detailed analysis and insights for <%= file_name.humanize.downcase %> in your application.
+      </div>
+    </div>
+  </div>
+
+  <%# Stats Overview %>
+  <div class="stats-overview">
+    <div class="stat-card total">
+      <div class="stat-icon"><%= options[:icon] %></div>
+      <div class="stat-content">
+        <div class="stat-number"><%= @data[:value] || 0 %></div>
+        <div class="stat-label">Total <%= human_name %></div>
+      </div>
+    </div>
+
+    <% if @data[:items]&.any? %>
+      <div class="stat-card">
+        <div class="stat-icon">📊</div>
+        <div class="stat-content">
+          <div class="stat-number"><%= @data[:items].size %></div>
+          <div class="stat-label">Items Found</div>
+        </div>
+      </div>
+
+      <% if @data[:breakdown]&.any? %>
+        <div class="stat-card">
+          <div class="stat-icon">📈</div>
+          <div class="stat-content">
+            <div class="stat-number"><%= @data[:breakdown].keys.size %></div>
+            <div class="stat-label">Categories</div>
+          </div>
+        </div>
+      <% end %>
+    <% end %>
+
+    <div class="stat-card">
+      <div class="stat-icon">⏰</div>
+      <div class="stat-content">
+        <div class="stat-number">
+          <%= time_ago_in_words(@data[:last_updated] || Time.current) %>
+        </div>
+        <div class="stat-label">Last Updated</div>
+      </div>
+    </div>
+  </div>
+
+  <%# Main Content %>
+  <% if @data[:items]&.any? %>
+    <%# Breakdown by Category %>
+    <% if @data[:breakdown]&.any? %>
+      <div class="content-section">
+        <h2 class="section-title">
+          <span class="section-icon">📊</span>
+          Breakdown by Category
+        </h2>
+        <div class="breakdown-grid">
+          <% @data[:breakdown].each do |category, items| %>
+            <div class="breakdown-card">
+              <div class="breakdown-header">
+                <h3 class="breakdown-title"><%= category.humanize %></h3>
+                <span class="breakdown-count"><%= items.size %></span>
+              </div>
+              <div class="breakdown-items">
+                <% items.first(3).each do |item| %>
+                  <div class="breakdown-item">
+                    <span class="item-name"><%= item[:name] %></span>
+                    <span class="item-value"><%= item[:value] %></span>
+                  </div>
+                <% end %>
+                <% if items.size > 3 %>
+                  <div class="breakdown-more">
+                    +<%= items.size - 3 %> more
+                  </div>
+                <% end %>
+              </div>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+
+    <%# Detailed Items Table %>
+    <div class="content-section">
+      <h2 class="section-title">
+        <span class="section-icon">📋</span>
+        Detailed Items
+      </h2>
+      
+      <%# Filters and Search %>
+      <div class="table-controls">
+        <div class="search-group">
+          <input type="text" id="item-search" placeholder="Search items..." class="search-input">
+          <button class="search-btn">🔍</button>
+        </div>
+        <div class="filter-group">
+          <% if @data[:breakdown]&.any? %>
+            <select id="category-filter" class="filter-select">
+              <option value="">All Categories</option>
+              <% @data[:breakdown].keys.each do |category| %>
+                <option value="<%= category %>"><%= category.humanize %></option>
+              <% end %>
+            </select>
+          <% end %>
+          <button class="reset-filters" onclick="resetFilters()">Clear Filters</button>
+        </div>
+      </div>
+
+      <div class="table-container">
+        <table class="items-table" id="items-table">
+          <thead>
+            <tr>
+              <th class="sortable" data-sort="name">
+                Name
+                <span class="sort-icon">↕️</span>
+              </th>
+              <th class="sortable" data-sort="value">
+                Value
+                <span class="sort-icon">↕️</span>
+              </th>
+              <% if @data[:items].any? { |item| item[:category] } %>
+                <th class="sortable" data-sort="category">
+                  Category
+                  <span class="sort-icon">↕️</span>
+                </th>
+              <% end %>
+              <% if @data[:items].any? { |item| item[:created_at] } %>
+                <th class="sortable" data-sort="created_at">
+                  Created
+                  <span class="sort-icon">↕️</span>
+                </th>
+              <% end %>
+              <th>Actions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <% @data[:items].each do |item| %>
+              <tr class="item-row" data-category="<%= item[:category] %>" data-name="<%= item[:name] %>">
+                <td class="item-name">
+                  <strong><%= item[:name] %></strong>
+                  <% if item[:description] %>
+                    <div class="item-description"><%= item[:description] %></div>
+                  <% end %>
+                </td>
+                <td class="item-value">
+                  <span class="value-badge"><%= item[:value] %></span>
+                </td>
+                <% if @data[:items].any? { |i| i[:category] } %>
+                  <td class="item-category">
+                    <% if item[:category] %>
+                      <span class="category-badge category-<%= item[:category].downcase %>">
+                        <%= item[:category].humanize %>
+                      </span>
+                    <% else %>
+                      <span class="text-muted">—</span>
+                    <% end %>
+                  </td>
+                <% end %>
+                <% if @data[:items].any? { |i| i[:created_at] } %>
+                  <td class="item-date">
+                    <% if item[:created_at] %>
+                      <time datetime="<%= item[:created_at].iso8601 %>">
+                        <%= time_ago_in_words(item[:created_at]) %> ago
+                      </time>
+                    <% else %>
+                      <span class="text-muted">—</span>
+                    <% end %>
+                  </td>
+                <% end %>
+                <td class="item-actions">
+                  <button class="action-btn small" onclick="showItemDetails('<%= item[:name] %>')">
+                    View
+                  </button>
+                </td>
+              </tr>
+            <% end %>
+          </tbody>
+        </table>
+      </div>
+      
+      <div class="table-footer">
+        <div class="results-info">
+          Showing <span id="visible-count"><%= @data[:items].size %></span> of <span id="total-count"><%= @data[:items].size %></span> items
+        </div>
+      </div>
+    </div>
+  <% else %>
+    <%# Empty State %>
+    <div class="empty-state">
+      <div class="empty-icon">🎉</div>
+      <div class="empty-title">No <%= file_name.humanize.downcase %> found</div>
+      <div class="empty-description">
+        This is good news! No issues or items were detected in this category.
+      </div>
+      <div class="empty-actions">
+        <button class="action-btn primary" onclick="refreshData('<%= file_name %>')">
+          <span class="btn-icon">🔄</span>
+          Check Again
+        </button>
+      </div>
+    </div>
+  <% end %>
+</div>
+
+<%# Embedded Styles %>
+<style>
+  .<%= file_name.dasherize %>-detail-view {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 2rem;
+    background: #f8fafc;
+    min-height: 100vh;
+  }
+
+  .page-header {
+    background: white;
+    border-radius: 12px;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+  }
+
+  .header-main {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .page-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #1f2937;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .page-icon {
+    font-size: 2.5rem;
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 0.75rem;
+  }
+
+  .action-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.75rem 1.25rem;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    text-decoration: none;
+    border-radius: 8px;
+    font-weight: 500;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .action-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px -5px rgba(102, 126, 234, 0.4);
+  }
+
+  .action-btn.secondary {
+    background: #6b7280;
+  }
+
+  .action-btn.small {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+  }
+
+  .page-description {
+    color: #6b7280;
+    font-size: 1.125rem;
+    line-height: 1.6;
+  }
+
+  .stats-overview {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+  }
+
+  .stat-card {
+    background: white;
+    border-radius: 12px;
+    padding: 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    transition: transform 0.2s ease;
+  }
+
+  .stat-card:hover {
+    transform: translateY(-2px);
+  }
+
+  .stat-card.total {
+    border-left: 4px solid #3b82f6;
+  }
+
+  .stat-icon {
+    font-size: 2rem;
+    opacity: 0.8;
+  }
+
+  .stat-content {
+    flex: 1;
+  }
+
+  .stat-number {
+    font-size: 2rem;
+    font-weight: 700;
+    color: #1f2937;
+    line-height: 1;
+    margin-bottom: 0.25rem;
+  }
+
+  .stat-label {
+    font-size: 0.875rem;
+    color: #6b7280;
+    font-weight: 500;
+  }
+
+  .content-section {
+    background: white;
+    border-radius: 12px;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(0, 0, 0, 0.05);
+  }
+
+  .section-title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #1f2937;
+    margin: 0 0 1.5rem 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .breakdown-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+  }
+
+  .breakdown-card {
+    background: #f9fafb;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 1.5rem;
+  }
+
+  .breakdown-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .breakdown-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    margin: 0;
+    color: #1f2937;
+  }
+
+  .breakdown-count {
+    background: #3b82f6;
+    color: white;
+    padding: 0.25rem 0.75rem;
+    border-radius: 12px;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .breakdown-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  .breakdown-item:last-child {
+    border-bottom: none;
+  }
+
+  .item-name {
+    color: #374151;
+    font-weight: 500;
+  }
+
+  .item-value {
+    color: #3b82f6;
+    font-weight: 600;
+  }
+
+  .breakdown-more {
+    color: #6b7280;
+    font-style: italic;
+    padding-top: 0.5rem;
+    text-align: center;
+  }
+
+  .table-controls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    gap: 1rem;
+  }
+
+  .search-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .search-input {
+    padding: 0.75rem 1rem;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    min-width: 200px;
+  }
+
+  .filter-group {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+  }
+
+  .filter-select {
+    padding: 0.75rem 1rem;
+    border: 1px solid #d1d5db;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    background: white;
+  }
+
+  .table-container {
+    overflow-x: auto;
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+  }
+
+  .items-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+  }
+
+  .items-table th {
+    background: #f9fafb;
+    padding: 1rem 0.75rem;
+    text-align: left;
+    font-weight: 600;
+    color: #374151;
+    border-bottom: 1px solid #e5e7eb;
+  }
+
+  .items-table th.sortable {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .items-table td {
+    padding: 1rem 0.75rem;
+    border-bottom: 1px solid #f3f4f6;
+  }
+
+  .item-row:hover {
+    background: #f9fafb;
+  }
+
+  .item-description {
+    font-size: 0.75rem;
+    color: #6b7280;
+    margin-top: 0.25rem;
+  }
+
+  .value-badge {
+    background: #dbeafe;
+    color: #1e40af;
+    padding: 0.25rem 0.75rem;
+    border-radius: 12px;
+    font-weight: 600;
+  }
+
+  .category-badge {
+    padding: 0.25rem 0.75rem;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
+  }
+
+  .category-important {
+    background: #fef3c7;
+    color: #d97706;
+  }
+
+  .category-normal {
+    background: #dbeafe;
+    color: #1e40af;
+  }
+
+  .category-low {
+    background: #d1fae5;
+    color: #065f46;
+  }
+
+  .text-muted {
+    color: #9ca3af;
+  }
+
+  .table-footer {
+    text-align: center;
+    padding: 1rem;
+    background: #f9fafb;
+    font-size: 0.875rem;
+    color: #6b7280;
+  }
+
+  .empty-state {
+    text-align: center;
+    padding: 4rem 2rem;
+    color: #6b7280;
+  }
+
+  .empty-icon {
+    font-size: 4rem;
+    margin-bottom: 1.5rem;
+    opacity: 0.7;
+  }
+
+  .empty-title {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: #374151;
+    margin-bottom: 0.75rem;
+  }
+
+  .empty-description {
+    margin-bottom: 2rem;
+    max-width: 500px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @media (max-width: 768px) {
+    .<%= file_name.dasherize %>-detail-view {
+      padding: 1rem;
+    }
+
+    .header-main {
+      flex-direction: column;
+      gap: 1rem;
+      align-items: flex-start;
+    }
+
+    .stats-overview {
+      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    }
+
+    .table-controls {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .breakdown-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
+
+<%# JavaScript for interactions %>
+<script>
+  // Table filtering and search
+  document.addEventListener('DOMContentLoaded', function() {
+    const searchInput = document.getElementById('item-search');
+    const categoryFilter = document.getElementById('category-filter');
+    const table = document.getElementById('items-table');
+    const visibleCount = document.getElementById('visible-count');
+    const totalCount = document.getElementById('total-count');
+
+    function filterTable() {
+      const searchTerm = searchInput?.value.toLowerCase() || '';
+      const categoryFilter = document.getElementById('category-filter')?.value || '';
+      const rows = table?.querySelectorAll('.item-row') || [];
+      let visibleRows = 0;
+
+      rows.forEach(row => {
+        const name = row.dataset.name?.toLowerCase() || '';
+        const category = row.dataset.category || '';
+        
+        const matchesSearch = name.includes(searchTerm);
+        const matchesCategory = !categoryFilter || category === categoryFilter;
+        
+        if (matchesSearch && matchesCategory) {
+          row.style.display = '';
+          visibleRows++;
+        } else {
+          row.style.display = 'none';
+        }
+      });
+
+      if (visibleCount) {
+        visibleCount.textContent = visibleRows;
+      }
+    }
+
+    if (searchInput) {
+      searchInput.addEventListener('input', filterTable);
+    }
+
+    if (categoryFilter) {
+      categoryFilter.addEventListener('change', filterTable);
+    }
+
+    // Table sorting
+    const sortableHeaders = table?.querySelectorAll('th.sortable') || [];
+    let currentSort = { column: null, direction: 'asc' };
+
+    sortableHeaders.forEach(header => {
+      header.addEventListener('click', function() {
+        const column = this.dataset.sort;
+        const direction = currentSort.column === column && currentSort.direction === 'asc' ? 'desc' : 'asc';
+        
+        sortTable(column, direction);
+        currentSort = { column, direction };
+        
+        // Update sort icons
+        sortableHeaders.forEach(h => {
+          const icon = h.querySelector('.sort-icon');
+          if (h === this) {
+            icon.textContent = direction === 'asc' ? '↑' : '↓';
+          } else {
+            icon.textContent = '↕️';
+          }
+        });
+      });
+    });
+  });
+
+  function sortTable(column, direction) {
+    const table = document.getElementById('items-table');
+    const tbody = table?.querySelector('tbody');
+    if (!tbody) return;
+
+    const rows = Array.from(tbody.querySelectorAll('.item-row'));
+    
+    rows.sort((a, b) => {
+      let aVal, bVal;
+      
+      switch(column) {
+        case 'name':
+          aVal = a.dataset.name;
+          bVal = b.dataset.name;
+          break;
+        case 'category':
+          aVal = a.dataset.category;
+          bVal = b.dataset.category;
+          break;
+        case 'value':
+          aVal = parseFloat(a.querySelector('.value-badge')?.textContent || '0');
+          bVal = parseFloat(b.querySelector('.value-badge')?.textContent || '0');
+          break;
+        default:
+          return 0;
+      }
+      
+      if (typeof aVal === 'string') {
+        aVal = aVal.toLowerCase();
+        bVal = bVal.toLowerCase();
+      }
+      
+      if (direction === 'asc') {
+        return aVal > bVal ? 1 : -1;
+      } else {
+        return aVal < bVal ? 1 : -1;
+      }
+    });
+    
+    rows.forEach(row => tbody.appendChild(row));
+  }
+
+  function resetFilters() {
+    const searchInput = document.getElementById('item-search');
+    const categoryFilter = document.getElementById('category-filter');
+    
+    if (searchInput) searchInput.value = '';
+    if (categoryFilter) categoryFilter.value = '';
+    
+    // Re-filter to show all rows
+    const rows = document.querySelectorAll('.item-row');
+    rows.forEach(row => row.style.display = '');
+    
+    const visibleCount = document.getElementById('visible-count');
+    const totalCount = document.getElementById('total-count');
+    if (visibleCount && totalCount) {
+      visibleCount.textContent = totalCount.textContent;
+    }
+  }
+
+  function refreshData(featureName) {
+    // Show loading state
+    const refreshBtn = document.querySelector('.refresh-btn');
+    const originalText = refreshBtn.innerHTML;
+    refreshBtn.innerHTML = '<span class="btn-icon">⏳</span>Refreshing...';
+    refreshBtn.disabled = true;
+    
+    // Reload the page to get fresh data
+    setTimeout(() => {
+      window.location.reload();
+    }, 500);
+  }
+
+  function showItemDetails(itemName) {
+    alert('Item details for: ' + itemName + '\n\nThis would typically open a modal or navigate to a detail page.');
+  }
+</script>