dbviewer 0.4.1 → 0.4.2

data/app/views/dbviewer/tables/show.html.erb

@@ -71,6 +71,28 @@
       background-color: var(--bs-dark-bg-subtle, #343a40) !important;
     }
     
+  /* Ensure proper layering for sticky elements */
+  .dbviewer-table-header th {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+  }
+  
+  /* Increase z-index for the intersection point of sticky header and sticky column */
+  .dbviewer-table-header th.action-column {
+    z-index: 40 !important; 
+    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+  }
+    
+    /* Ensure thead has higher z-index than tbody */
+    thead tr th.action-column {
+      z-index: 40 !important;
+    }
+    
+    tbody tr td.action-column {
+      z-index: 30 !important;
+    }
+    
     /* Improve mobile display for sort headers */
     @media (max-width: 767.98px) {
       .sortable-column .column-sort-link {
@@ -91,6 +113,176 @@
     [data-bs-theme="dark"] .sortable-column.sorted {
       background-color: rgba(255, 255, 255, 0.1);
     }
+    
+    /* Column filter styling */
+    .column-filters td {
+      padding: 0.5rem;
+      background-color: var(--bs-tertiary-bg, #f8f9fa);
+    }
+    
+    /* Action column styling */
+    .action-column {
+      width: 60px;
+      min-width: 60px; /* Ensure minimum width */
+      white-space: nowrap;
+      position: sticky;
+      left: 0;
+      z-index: 15;
+      background-color: var(--bs-table-striped-bg, #f2f2f2);
+      box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+    }
+    
+    /* Ensure proper background color for actions column in dark mode */
+    [data-bs-theme="dark"] .action-column {
+      background-color: var(--bs-dark-bg-subtle, #343a40);
+    }
+
+    /* Maintain zebra striping with sticky action column */
+    .table-striped > tbody > tr:nth-of-type(odd) > .action-column {
+      background-color: var(--bs-table-striped-bg, #f8f9fa);
+    }
+
+    [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > .action-column {
+      background-color: var(--bs-dark-bg-subtle, #343a40);
+    }
+    
+    .view-record-btn {
+      padding: 0.1rem 0.4rem;
+      width: 32px;
+    }
+    
+    .view-record-btn:hover {
+      opacity: 0.85;
+      transform: translateY(-1px);
+    }
+    
+  /* Make action column header sticky as well */
+  .action-column-header {
+    position: sticky;
+    left: 0;
+    z-index: 40 !important; /* Even higher z-index to stay on top of everything */
+    background-color: var(--bs-tertiary-bg, #f8f9fa) !important;
+    border-right: 1px solid var(--bs-border-color) !important; /* Added border for visual separation */
+  }
+  
+  [data-bs-theme="dark"] .action-column-header {
+    background-color: var(--bs-dark-bg-subtle, #343a40) !important;
+  }
+    
+    [data-bs-theme="dark"] .action-column-header {
+      background-color: var(--bs-dark-bg-subtle, #343a40) !important;
+    }
+    
+  /* Make action column filter cell sticky as well */
+  .action-column-filter {
+    position: sticky;
+    left: 0;
+    z-index: 40 !important;
+    background-color: var(--bs-tertiary-bg, #f8f9fa) !important;
+  }
+  
+  [data-bs-theme="dark"] .action-column-filter {
+    background-color: var(--bs-tertiary-bg, #2b3035) !important;
+  }
+    
+    /* Fix action column for entire table */
+    .action-column {
+      border-right: 1px solid var(--bs-border-color);
+    }
+    
+    /* Ensure equal padding for all cells */
+    .action-column-header, .action-column-filter {
+      padding-left: 8px !important;
+      padding-right: 8px !important;
+    }
+    
+    /* Relationship section styles */
+    #relationshipsSection {
+      border-top: 1px solid var(--bs-border-color, #dee2e6);
+      margin-top: 1.5rem;
+      padding-top: 1.5rem;
+    }
+    
+    #relationshipsSection h6 {
+      color: var(--bs-primary, #0d6efd);
+      font-weight: 600;
+      border-bottom: 2px solid var(--bs-primary, #0d6efd);
+      padding-bottom: 0.5rem;
+      margin-bottom: 1rem;
+    }
+    
+    .relationship-section h6 {
+      font-size: 0.95rem;
+      margin-bottom: 0.75rem;
+      padding: 0.5rem 0.75rem;
+      background: linear-gradient(135deg, var(--bs-primary-bg-subtle, #cfe2ff), transparent);
+      border-left: 3px solid var(--bs-primary, #0d6efd);
+      border-radius: 0.25rem;
+    }
+    
+    .relationship-section .table {
+      margin-bottom: 0;
+      border: 1px solid var(--bs-border-color, #dee2e6);
+    }
+    
+    .relationship-section .table th {
+      background-color: var(--bs-light, #f8f9fa);
+      font-weight: 600;
+      font-size: 0.875rem;
+      border-bottom: 2px solid var(--bs-border-color, #dee2e6);
+    }
+    
+    .relationship-section .table td {
+      vertical-align: middle;
+      font-size: 0.875rem;
+    }
+    
+    .relationship-section .btn {
+      font-size: 0.8rem;
+      padding: 0.375rem 0.75rem;
+    }
+    
+    .relationship-section .btn-outline-primary:hover {
+      transform: translateX(2px);
+      transition: transform 0.2s ease;
+    }
+    
+    .relationship-section .btn-outline-success:hover {
+      transform: translateX(2px);
+      transition: transform 0.2s ease;
+    }
+    
+    /* Dark mode relationship styles */
+    [data-bs-theme="dark"] #relationshipsSection {
+      border-top-color: var(--bs-border-color, #495057);
+    }
+    
+    [data-bs-theme="dark"] .relationship-section h6 {
+      background: linear-gradient(135deg, var(--bs-primary-bg-subtle, #031633), transparent);
+    }
+    
+    [data-bs-theme="dark"] .relationship-section .table th {
+      background-color: var(--bs-dark-bg-subtle, #343a40);
+      color: var(--bs-light, #f8f9fa);
+    }
+    
+    [data-bs-theme="dark"] .relationship-section .table {
+      border-color: var(--bs-border-color, #495057);
+    }
+    
+    /* Responsive relationship tables */
+    @media (max-width: 767.98px) {
+      .relationship-section .table th,
+      .relationship-section .table td {
+        font-size: 0.8rem;
+        padding: 0.5rem 0.25rem;
+      }
+      
+      .relationship-section .btn {
+        font-size: 0.75rem;
+        padding: 0.25rem 0.5rem;
+      }
+    }
   </style>
   
   <script>
@@ -121,9 +313,6 @@
 
 <% content_for :sidebar_active do %>active<% end %>
 
-<% content_for :sidebar do %>
-  <%= render 'dbviewer/shared/sidebar' %>
-<% end %>  
 <div class="d-flex justify-content-between align-items-center mb-4">
   <div>
     <h1>Table: <%= @table_name %></h1>
@@ -207,20 +396,7 @@
 <div class="dbviewer-card card mb-4">
   <div class="card-header d-flex justify-content-between align-items-center">
     <h5 class="mb-0">
-      <% 
-        # Build the URL query parameters including creation filters
-        url_params = "per_page=' + this.value + '&page=1&order_by=#{@order_by}&order_direction=#{@order_direction}"
-        
-        # Add column filters
-        if @column_filters.reject { |_, v| v.blank? }.any?
-          url_params += "&" + @column_filters.reject { |_, v| v.blank? }.map { |k, v| "column_filters[#{k}]=#{CGI.escape(v.to_s)}" }.join("&")
-        end
-        
-        # Add creation filters
-        url_params += "&creation_filter_start=#{@creation_filter_start}" if @creation_filter_start.present?
-        url_params += "&creation_filter_end=#{@creation_filter_end}" if @creation_filter_end.present?
-      %>
-      <select id="per-page-select" class="form-select form-select-sm" onchange="window.location.href='<%= table_path(@table_name) %>?<%= url_params %>'">
+      <select id="per-page-select" class="form-select form-select-sm" onchange="window.location.href='<%= table_path(@table_name) %>?<%= per_page_url_params(@table_name) %>'">
         <% Dbviewer::TablesController.per_page_options.each do |option| %>
           <option value="<%= option %>" <%= 'selected' if @per_page == option %>><%= option %></option>
         <% end %>
@@ -233,23 +409,6 @@
           <%= @order_by %> (<%= @order_direction == "ASC" ? "ascending" : "descending" %>)
         </span>
       <% end %>
-      
-      <% 
-        clear_sort_params = {
-          page: 1, 
-          per_page: @per_page, 
-          column_filters: @column_filters
-        }
-        
-        # Add creation filters if they exist
-        clear_sort_params[:creation_filter_start] = @creation_filter_start if @creation_filter_start.present?
-        clear_sort_params[:creation_filter_end] = @creation_filter_end if @creation_filter_end.present?
-      %>
-        <%= link_to "×", table_path(@table_name, clear_sort_params), 
-            class: "text-light ms-2", 
-            style: "text-decoration: none;",
-            title: "Clear sorting" %>
-      </span>
       <span class="badge bg-secondary">Total: <%= @total_count %> records</span>
       <% active_filters = @column_filters.reject { |_, v| v.blank? }.size %>
       <% if active_filters > 0 %>
@@ -268,192 +427,14 @@
           
           <table class="table table-bordered table-striped rounded-none">
               <thead class="dbviewer-table-header">
-                <tr>
-                  <% if @records && @records.columns %>
-                    <% @records.columns.each do |column_name| %>
-                      <% is_sorted = @order_by == column_name %>
-                      <th class="px-3 py-2 sortable-column <%= 'sorted' if is_sorted %>">
-                        <%= sortable_column_header(column_name, @order_by, @order_direction, @table_name, @current_page, @per_page, @column_filters) %>
-                      </th>
-                    <% end %>
-                  <% else %>
-                    <th>No columns available</th>
-                  <% end %>
-                </tr>
-                <tr class="column-filters">
-                  <% if @records && @records.columns %>
-                    <% @records.columns.each do |column_name| %>
-                      <th class="p-0">
-                        <% 
-                          # Find column info to detect the type
-                          column_info = @columns.find { |c| c[:name].to_s == column_name.to_s } if @columns
-                          column_type = column_info ? column_info[:type].to_s.downcase : nil
-                        %>
-
-                        <div class="filter-input-group">
-                          <% 
-                            # Define the default operator and available operators based on column type
-                            default_operator = if column_type && column_type =~ /char|text|string|uuid|enum/i
-                              "contains"
-                            else
-                              "eq"
-                            end
-                            
-                            # Get previously selected operator or default
-                            selected_operator = @column_filters["#{column_name}_operator"]
-                            selected_operator = default_operator if selected_operator.nil? || selected_operator == "default"
-                            
-                            # Define operator options based on column type
-                            if column_type && (column_type =~ /datetime/ || column_type =~ /^date$/ || column_type =~ /^time$/)
-                              # Date/Time operators
-                              operator_options = [
-                                ["=", "eq"],
-                                ["≠", "neq"],
-                                ["<", "lt"],
-                                [">", "gt"],
-                                ["≤", "lte"],
-                                ["≥", "gte"]
-                              ]
-                            elsif column_type && column_type =~ /int|float|decimal|double|number|numeric|real|money|bigint|smallint|tinyint|mediumint|bit/i
-                              # Numeric operators
-                              operator_options = [
-                                ["=", "eq"],
-                                ["≠", "neq"],
-                                ["<", "lt"],
-                                [">", "gt"],
-                                ["≤", "lte"],
-                                ["≥", "gte"]
-                              ]
-                            else
-                              # Text operators
-                              operator_options = [
-                                ["contains", "contains"],
-                                ["not contains", "not_contains"],
-                                ["=", "eq"],
-                                ["≠", "neq"],
-                                ["starts with", "starts_with"],
-                                ["ends with", "ends_with"]
-                              ]
-                            end
-                          %>
-                          
-                          <%= form.select "column_filters[#{column_name}_operator]", 
-                              options_for_select(operator_options, selected_operator),
-                              { include_blank: false },
-                              { class: "form-select form-select-sm operator-select" } %>
-                          
-                          <% if column_type && column_type =~ /datetime/ %>
-                            <%= form.datetime_local_field "column_filters[#{column_name}]", 
-                                value: @column_filters[column_name], 
-                                class: "form-control form-control-sm column-filter rounded-0",
-                                data: { column: column_name } %>
-                          <% elsif column_type && column_type =~ /^date$/ %>
-                            <%= form.date_field "column_filters[#{column_name}]", 
-                                value: @column_filters[column_name], 
-                                class: "form-control form-control-sm column-filter rounded-0",
-                                data: { column: column_name } %>
-                          <% elsif column_type && column_type =~ /^time$/ %>
-                            <%= form.time_field "column_filters[#{column_name}]", 
-                                value: @column_filters[column_name], 
-                                class: "form-control form-control-sm column-filter rounded-0",
-                                data: { column: column_name } %>
-                          <% else %>
-                            <%= form.text_field "column_filters[#{column_name}]", 
-                                value: @column_filters[column_name], 
-                                placeholder: "",
-                                class: "form-control form-control-sm column-filter rounded-0",
-                                data: { column: column_name } %>
-                          <% end %>
-                        </div>
-                      </th>
-                    <% end %>
-                  <% else %>
-                    <th></th>
-                  <% end %>
-                </tr>
+                <%= render_sortable_header_row(@records, @order_by, @order_direction, @table_name, @current_page, @per_page, @column_filters) %>
+                <%= render_column_filters_row(form, @records, @columns, @column_filters) %>
               </thead>
-              <tbody>
-                <% if @records.nil? || @records.rows.nil? || @records.empty? %>
-                  <tr>
-                    <td colspan="100%" class="text-center">No records found or table is empty.</td>
-                  </tr>
-                <% end %>
-                <% if @records && @records.rows %>
-                  <% @records.rows.each do |row| %>
-                    <tr>
-                        <% row.each_with_index do |cell, cell_index| %>
-                          <% 
-                            column_name = @records.columns[cell_index]
-                            cell_value = format_cell_value(cell)
-                            
-                            # Check if this column is a foreign key
-                            foreign_key = @metadata && @metadata[:foreign_keys] ? 
-                                          @metadata[:foreign_keys].find { |fk| fk[:column] == column_name } : 
-                                          nil
-                          %>
-                          <% if foreign_key && !cell.nil? %>
-                            <% 
-                              # Build params for foreign key links with creation filters
-                              fk_params = { column_filters: { foreign_key[:primary_key] => cell } }
-                              
-                              # Add creation filters if they exist
-                              fk_params[:creation_filter_start] = @creation_filter_start if @creation_filter_start.present?
-                              fk_params[:creation_filter_end] = @creation_filter_end if @creation_filter_end.present?
-                            %>
-                            <td title="<%= cell_value %> (Click to view referenced record)">
-                              <%= link_to cell_value, 
-                                  table_path(foreign_key[:to_table], fk_params), 
-                                  class: "text-decoration-none foreign-key-link" %>
-                              <i class="bi bi-link-45deg text-muted small"></i>
-                            </td>
-                          <% else %>
-                            <td title="<%= cell_value %>"><%= cell_value %></td>
-                          <% end %>
-                      <% end %>
-                    </tr>
-                  <% end %>
-                <% end %>
-            </tbody>
+              <%= render_table_body(@records, @metadata) %>
         </table>
         <% end %> <!-- End of form_with -->
       </div>
-      
-      <% if @total_pages && @total_pages > 1 %>
-        <%
-          # Prepare common URL params including creation filters
-          common_params = {
-            order_by: @order_by, 
-            order_direction: @order_direction, 
-            per_page: @per_page, 
-            column_filters: @column_filters
-          }
-          
-          # Add creation filters if they exist
-          common_params[:creation_filter_start] = @creation_filter_start if @creation_filter_start.present?
-          common_params[:creation_filter_end] = @creation_filter_end if @creation_filter_end.present?
-        %>
-        <nav aria-label="Page navigation">
-          <ul class="pagination justify-content-center">
-            <li class="page-item <%= 'disabled' if @current_page == 1 %>">
-              <%= link_to '«', table_path(@table_name, common_params.merge(page: [@current_page - 1, 1].max)), class: 'page-link' %>
-            </li>
-            
-            <% start_page = [1, @current_page - 2].max %>
-            <% end_page = [start_page + 4, @total_pages].min %>
-            <% start_page = [1, end_page - 4].max %>
-            
-            <% (start_page..end_page).each do |page_num| %>
-              <li class="page-item <%= 'active' if page_num == @current_page %>">
-                <%= link_to page_num, table_path(@table_name, common_params.merge(page: page_num)), class: 'page-link' %>
-              </li>
-            <% end %>
-            
-            <li class="page-item <%= 'disabled' if @current_page == @total_pages %>">
-              <%= link_to '»', table_path(@table_name, common_params.merge(page: [@current_page + 1, @total_pages].min)), class: 'page-link' %>
-            </li>
-          </ul>
-        </nav>
-      <% end %>
+      <%= render_pagination(@table_name, @current_page, @total_pages, common_params) %>
     </div>
   </div>
 </div>
@@ -467,24 +448,7 @@
         <div class="card-header d-flex justify-content-between align-items-center">
           <h5 class="mb-0"><i class="bi bi-graph-up me-2"></i>Record Creation Timeline</h5>
           <div>
-            <% 
-              # Build common params for time grouping links
-              time_params = {
-                page: @current_page, 
-                order_by: @order_by, 
-                order_direction: @order_direction, 
-                per_page: @per_page
-              }
-              
-              # Add creation filters if they exist
-              time_params[:creation_filter_start] = @creation_filter_start if @creation_filter_start.present?
-              time_params[:creation_filter_end] = @creation_filter_end if @creation_filter_end.present?
-            %>
-            <div class="btn-group btn-group-sm" role="group" aria-label="Time grouping">
-              <%= link_to "Hourly", table_path(@table_name, time_params.merge(time_group: "hourly")), class: "btn btn-outline-primary #{@time_grouping == 'hourly' ? 'active' : ''}" %>
-              <%= link_to "Daily", table_path(@table_name, time_params.merge(time_group: "daily")), class: "btn btn-outline-primary #{@time_grouping == 'daily' ? 'active' : ''}" %>
-              <%= link_to "Weekly", table_path(@table_name, time_params.merge(time_group: "weekly")), class: "btn btn-outline-primary #{@time_grouping == 'weekly' ? 'active' : ''}" %>
-            </div>
+            <%= time_grouping_links(@table_name, @time_grouping) %>
           </div>
         </div>
         <div class="card-body">
@@ -528,8 +492,169 @@
   </div>
 </div>
 
+<!-- Record Detail Modal -->
+<div class="modal fade" id="recordDetailModal" tabindex="-1" aria-labelledby="recordDetailModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-lg modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="recordDetailModalLabel"><%= @table_name %> Record Details</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <!-- Record Data Section -->
+        <div class="table-responsive">
+          <table class="table table-bordered record-detail-table">
+            <thead>
+              <tr>
+                <th width="30%">Column</th>
+                <th>Value</th>
+              </tr>
+            </thead>
+            <tbody id="recordDetailTableBody">
+              <!-- Record details will be inserted here dynamically -->
+            </tbody>
+          </table>
+        </div>
+        
+        <!-- Relationships Section -->
+        <div id="relationshipsSection" class="mt-4" style="display: none;">
+          <h6 class="mb-3">
+            <i class="bi bi-link-45deg me-2"></i>Relationships
+          </h6>
+          <div id="relationshipsContent">
+            <!-- Relationships will be inserted here dynamically -->
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
+
 <script>
   document.addEventListener('DOMContentLoaded', function() {
+    // Record Detail Modal functionality
+    const recordDetailModal = document.getElementById('recordDetailModal');
+    if (recordDetailModal) {
+      recordDetailModal.addEventListener('show.bs.modal', function (event) {
+        // Button that triggered the modal
+        const button = event.relatedTarget;
+        
+        // Extract record data from button's data attribute
+        let recordData;
+        let foreignKeys;
+        try {
+          recordData = JSON.parse(button.getAttribute('data-record-data'));
+          foreignKeys = JSON.parse(button.getAttribute('data-foreign-keys') || '[]');
+        } catch (e) {
+          console.error('Error parsing record data:', e);
+          recordData = {};
+          foreignKeys = [];
+        }
+        
+        // Update the modal's title with table name
+        const modalTitle = recordDetailModal.querySelector('.modal-title');
+        modalTitle.textContent = '<%= @table_name %> Record Details';
+        
+        // Populate the table with record data
+        const tableBody = document.getElementById('recordDetailTableBody');
+        tableBody.innerHTML = '';
+        
+        // Get all columns
+        const columns = Object.keys(recordData);
+        
+        // Create rows for each column
+        columns.forEach(column => {
+          const row = document.createElement('tr');
+          
+          // Create column name cell
+          const columnNameCell = document.createElement('td');
+          columnNameCell.className = 'fw-bold';
+          columnNameCell.textContent = column;
+          row.appendChild(columnNameCell);
+          
+          // Create value cell
+          const valueCell = document.createElement('td');
+          let cellValue = recordData[column];
+          
+          // Format value differently based on type
+          if (cellValue === null) {
+            valueCell.innerHTML = '<span class="text-muted">NULL</span>';
+          } else if (typeof cellValue === 'string' && cellValue.match(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/)) {
+            // Handle datetime values
+            const date = new Date(cellValue);
+            if (!isNaN(date.getTime())) {
+              valueCell.textContent = date.toLocaleString();
+            } else {
+              valueCell.textContent = cellValue;
+            }
+          } else if (typeof cellValue === 'string' && (cellValue.startsWith('{') || cellValue.startsWith('['))) {
+            // Handle JSON values
+            try {
+              const jsonValue = JSON.parse(cellValue);
+              const formattedJSON = JSON.stringify(jsonValue, null, 2);
+              valueCell.innerHTML = `<pre class="mb-0 code-block">${formattedJSON}</pre>`;
+            } catch (e) {
+              valueCell.textContent = cellValue;
+            }
+          } else {
+            valueCell.textContent = cellValue;
+          }
+          
+          row.appendChild(valueCell);
+          tableBody.appendChild(row);
+        });
+        
+        // Populate relationships section
+        const relationshipsSection = document.getElementById('relationshipsSection');
+        const relationshipsContent = document.getElementById('relationshipsContent');
+        const reverseForeignKeys = JSON.parse(button.dataset.reverseForeignKeys || '[]');
+        
+        // Check if we have any relationships to show
+        const hasRelationships = (foreignKeys && foreignKeys.length > 0) || (reverseForeignKeys && reverseForeignKeys.length > 0);
+        
+        if (hasRelationships) {
+          relationshipsSection.style.display = 'block';
+          relationshipsContent.innerHTML = '';
+          
+          // Handle belongs_to relationships (foreign keys from this table)
+          if (foreignKeys && foreignKeys.length > 0) {
+            const activeRelationships = foreignKeys.filter(fk => {
+              const columnValue = recordData[fk.column];
+              return columnValue !== null && columnValue !== undefined && columnValue !== '';
+            });
+            
+            if (activeRelationships.length > 0) {
+              relationshipsContent.appendChild(createRelationshipSection('Belongs To', activeRelationships, recordData, 'belongs_to'));
+            }
+          }
+          
+          // Handle has_many relationships (foreign keys from other tables pointing to this table)
+          if (reverseForeignKeys && reverseForeignKeys.length > 0) {
+            const primaryKeyValue = recordData[Object.keys(recordData).find(key => key === 'id') || Object.keys(recordData)[0]];
+            
+            if (primaryKeyValue !== null && primaryKeyValue !== undefined && primaryKeyValue !== '') {
+              relationshipsContent.appendChild(createRelationshipSection('Has Many', reverseForeignKeys, recordData, 'has_many', primaryKeyValue));
+            }
+          }
+          
+          // Show message if no active relationships
+          if (relationshipsContent.children.length === 0) {
+            relationshipsContent.innerHTML = `
+              <div class="text-muted small">
+                <i class="bi bi-info-circle me-1"></i>
+                This record has no active relationships.
+              </div>
+            `;
+          }
+        } else {
+          relationshipsSection.style.display = 'none';
+        }
+      });
+    }
+    
     // Column filter functionality
     const columnFilters = document.querySelectorAll('.column-filter');
     const operatorSelects = document.querySelectorAll('.operator-select');
@@ -1031,112 +1156,101 @@
     background-color: var(--bs-tertiary-bg, #f8f9fa);
   }
   
-  .column-filter {
-    width: 100%;
-    border: 1px solid rgba(0,0,0,0.1);
-    padding: 0.3rem 0.5rem;
-    font-size: 0.85rem;
+  /* Action column styling */
+  .action-column {
+    width: 60px;
+    min-width: 60px; /* Ensure minimum width */
+    white-space: nowrap;
+    position: sticky;
+    left: 0;
+    z-index: 30; /* Increased z-index to ensure it stays on top */
+    background-color: var(--bs-body-bg, #fff); /* Use body background color */
+    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
+    border-right: 1px solid var(--bs-border-color);
   }
   
-  /* Filter input group styling */
-  .filter-input-group {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
+  /* Ensure proper background color for actions column in dark mode */
+  [data-bs-theme="dark"] .action-column {
+    background-color: var(--bs-body-bg, #212529); /* Use body background in dark mode */
   }
-  
-  .filter-input-group .operator-select {
-    font-size: 0.7rem;
-    padding: 0.1rem 0.5rem;
-    border-bottom: none;
-    border-radius: 0.2rem 0.2rem 0 0;
-    background-color: rgba(0,0,0,0.03);
-    font-weight: normal;
-    min-height: 22px; /* Ensure consistent height */
+
+  /* Maintain zebra striping with sticky action column */
+  .table-striped > tbody > tr:nth-of-type(odd) > .action-column {
+    background-color: var(--bs-tertiary-bg, #f8f9fa);
   }
   
-  .filter-input-group .operator-select option {
-    font-size: 0.8rem;
-    padding: 2px;
+  .table-striped > tbody > tr:nth-of-type(even) > .action-column {
+    background-color: var(--bs-body-bg, #fff);
   }
-  
-  [data-bs-theme="dark"] .filter-input-group .operator-select {
-    background-color: rgba(255,255,255,0.05);
-    color: rgba(255,255,255,0.9);
-    border-color: rgba(255,255,255,0.15);
+
+  [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > .action-column {
+    background-color: var(--bs-tertiary-bg, #2b3035);
   }
   
-  .filter-input-group .column-filter {
-    border-radius: 0 0 0.2rem 0.2rem;
-    border-top: none;
+  [data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > .action-column {
+    background-color: var(--bs-body-bg, #212529);
   }
   
-  /* Ensure consistent sizing for date/time inputs */
-  input[type="date"].column-filter,
-  input[type="datetime-local"].column-filter,
-  input[type="time"].column-filter {
-    padding: 0.2rem 0.5rem;
+  .view-record-btn {
+    padding: 0.1rem 0.4rem;
+    width: 32px;
   }
   
-  [data-bs-theme="dark"] .column-filters td {
-    background-color: rgba(255,255,255,0.05);
+  .view-record-btn:hover {
+    opacity: 0.85;
+    transform: translateY(-1px);
   }
   
-  [data-bs-theme="dark"] .column-filter {
-    background-color: rgba(255,255,255,0.1);
-    color: rgba(255,255,255,0.9);
-    border-color: rgba(255,255,255,0.15);
+  /* Record detail modal styling */
+  .record-detail-table tr:first-child th,
+  .record-detail-table tr:first-child td {
+    border-top: none;
   }
   
-  /* Special styling for date/time inputs in dark mode */
-  [data-bs-theme="dark"] input[type="datetime-local"].column-filter::-webkit-calendar-picker-indicator,
-  [data-bs-theme="dark"] input[type="date"].column-filter::-webkit-calendar-picker-indicator,
-  [data-bs-theme="dark"] input[type="time"].column-filter::-webkit-calendar-picker-indicator {
-    filter: invert(0.8);
+  .record-detail-table .code-block {
+    background-color: var(--bs-light);
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    overflow-x: auto;
+    max-height: 200px;
   }
   
-  /* Mini ERD modal styling */
-  #miniErdModal .modal-dialog {
-    max-width: 90%;
-    max-height: 90vh;
-    height: 90vh;
+  /* Relationships section styling */
+  #relationshipsSection {
+    border-top: 1px solid var(--bs-border-color);
+    padding-top: 1rem;
   }
   
-  #miniErdModal .modal-content {
-    height: 100%;
+  #relationshipsSection h6 {
+    color: var(--bs-emphasis-color);
+    margin-bottom: 1rem;
   }
   
-  #miniErdModal .modal-body {
-    height: calc(100% - 130px); /* Account for header and footer */
-    overflow: hidden; /* Prevent scrollbars within the modal body */
+  [data-bs-theme="dark"] #relationshipsSection {
+    border-top-color: #495057;
   }
   
-  #miniErdModal #mini-erd-container {
-    height: 100%;
-    width: 100%;
+  .relationships-table .btn-outline-primary {
+    font-size: 0.75rem;
+    padding: 0.25rem 0.5rem;
   }
   
-  #miniErdModal #mini-erd-container svg {
-    width: 100%;
-    height: 100%;
-    max-height: unset;
+  .relationships-table code {
+    background-color: var(--bs-gray-100);
+    padding: 0.125rem 0.25rem;
+    border-radius: 0.125rem;
+    font-size: 0.875rem;
   }
   
-  /* Foreign key link styling */
-  .foreign-key-link {
-    color: var(--bs-primary);
-    position: relative;
+  [data-bs-theme="dark"] .relationships-table code {
+    background-color: var(--bs-gray-800);
+    color: var(--bs-gray-100);
   }
-  
-  .foreign-key-link:hover {
-    text-decoration: underline !important;
+    margin-bottom: 0;
   }
   
-  .foreign-key-link + .bi-link-45deg {
-    font-size: 0.75rem;
-    margin-left: 0.25rem;
-    position: relative;
-    top: -1px;
+  [data-bs-theme="dark"] .record-detail-table .code-block {
+    background-color: var(--bs-dark);
   }
 </style>
 
@@ -1250,5 +1364,98 @@
       }
     });
   });
+  
+  // Helper function to create relationship sections
+  function createRelationshipSection(title, relationships, recordData, type, primaryKeyValue = null) {
+    const section = document.createElement('div');
+    section.className = 'relationship-section mb-4';
+    
+    // Create section header
+    const header = document.createElement('h6');
+    header.className = 'mb-3';
+    const icon = type === 'belongs_to' ? 'bi-arrow-up-right' : 'bi-arrow-down-left';
+    header.innerHTML = `<i class="bi ${icon} me-2"></i>${title}`;
+    section.appendChild(header);
+    
+    const tableContainer = document.createElement('div');
+    tableContainer.className = 'table-responsive';
+    
+    const table = document.createElement('table');
+    table.className = 'table table-sm table-bordered';
+    
+    // Create header based on relationship type
+    const thead = document.createElement('thead');
+    if (type === 'belongs_to') {
+      thead.innerHTML = `
+        <tr>
+          <th width="25%">Column</th>
+          <th width="25%">Value</th>
+          <th width="25%">References</th>
+          <th width="25%">Action</th>
+        </tr>
+      `;
+    } else {
+      thead.innerHTML = `
+        <tr>
+          <th width="30%">Related Table</th>
+          <th width="25%">Foreign Key</th>
+          <th width="20%">Count</th>
+          <th width="25%">Action</th>
+        </tr>
+      `;
+    }
+    table.appendChild(thead);
+    
+    // Create body
+    const tbody = document.createElement('tbody');
+    
+    relationships.forEach(fk => {
+      const row = document.createElement('tr');
+      
+      if (type === 'belongs_to') {
+        const columnValue = recordData[fk.column];
+        row.innerHTML = `
+          <td class="fw-medium">${fk.column}</td>
+          <td><code>${columnValue}</code></td>
+          <td>
+            <span class="text-muted">${fk.to_table}.</span><strong>${fk.primary_key}</strong>
+          </td>
+          <td>
+            <a href="/dbviewer/tables/${fk.to_table}?column_filters[${fk.primary_key}]=${encodeURIComponent(columnValue)}" 
+               class="btn btn-sm btn-outline-primary" 
+               title="View referenced record in ${fk.to_table}">
+              <i class="bi bi-arrow-right me-1"></i>View
+            </a>
+          </td>
+        `;
+      } else {
+        // For has_many relationships
+        row.innerHTML = `
+          <td class="fw-medium">${fk.from_table}</td>
+          <td>
+            <span class="text-muted">${fk.from_table}.</span><strong>${fk.column}</strong>
+          </td>
+          <td>
+            <span class="badge bg-secondary">View All</span>
+          </td>
+          <td>
+            <a href="/dbviewer/tables/${fk.from_table}?column_filters[${fk.column}]=${encodeURIComponent(primaryKeyValue)}" 
+               class="btn btn-sm btn-outline-success" 
+               title="View all ${fk.from_table} records that reference this record">
+              <i class="bi bi-list me-1"></i>View Related
+            </a>
+          </td>
+        `;
+      }
+      
+      tbody.appendChild(row);
+    });
+    
+    table.appendChild(tbody);
+    tableContainer.appendChild(table);
+    section.appendChild(tableContainer);
+    
+    return section;
+  }
 </script>
 <% end %>