solidstats 2.0.0 → 3.0.0.beta.1

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

@@ -1,755 +0,0 @@
-<%# 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>