dbdoc_engine 0.1.0

data/app/views/dbdoc_engine/admin/db_design_dynamic_tables/_column_fields.html.erb

@@ -0,0 +1,225 @@
+<%# This partial displays a column entry in the table design It uses accordion pattern to show/hide column details Each column can be configured with data type, constraints, and relationships  %>
+<div class='column-fields mb-4'
+     data-controller='column-type column'
+     data-column-type-target='columnFields'
+     data-table-id='<%= f.object.db_design_dynamic_table_id || table&.id %>'>
+  
+  <!-- Single Accordion Container -->
+  <div class='accordion'>
+    <div class='accordion-item' data-controller="dbdoc-accordion">
+      <h2 class='accordion-header'>
+        <% accordion_id = "column-#{f.object.id || "new-#{SecureRandom.hex(4)}"}" %>
+        <button class='accordion-button collapsed'
+                type='button'
+                data-action='click->dbdoc-accordion#toggle'
+                data-dbdoc-accordion-target="button"
+                aria-expanded='false'
+                aria-controls='<%= accordion_id %>'>
+          <% if f.object.column_name.present? %>
+            <strong><%= f.object.column_name %></strong>
+            <span class='ms-2 text-muted'>
+              <%= f.object.data_type %>
+              <% if f.object.length.present? %>(<%= f.object.length %>)<% end %>
+              <% if f.object.decimal_precision.present? && ['real', 'double precision', 'numeric', 'decimal'].include?(f.object.data_type) %>
+                ,<%= f.object.decimal_precision %> decimal places
+              <% end %>
+            </span>
+            <% if f.object.is_primary_key %><span class='badge bg-primary ms-2'>PK</span><% end %>
+            <% if f.object.is_foreign_key %><span class='badge bg-info ms-2'>FK</span><% end %>
+            <% if f.object.not_null %><span class='badge bg-warning ms-2'>NOT NULL</span><% end %>
+          <% else %>
+            <em><%= t('dbdoc.new_column') %></em>
+          <% end %>
+        </button>
+      </h2>
+      
+      <!-- Accordion Content -->
+      <div id='<%= accordion_id %>'
+           class='accordion-collapse collapse'
+           data-dbdoc-accordion-target="content">
+        <div class='accordion-body'>
+          
+          <!-- Column details form -->
+          <div class='card mb-3'>
+            <!-- Card header with column details title -->
+            <div class='card-header bg-white d-flex justify-content-between align-items-center'>
+              <h5 class='mb-0 fs-6'><%= t('dbdoc.column_details') %></h5>
+            </div>
+            <div class='card-body'>
+              <!-- First row: Column name, Physical column name, Data type -->
+              <div class='row mb-3'>
+                <div class='col-md-4'>
+                  <!-- Column name field with validation feedback -->
+                  <%= f.label :column_name, t('dbdoc.column_name'), class: 'form-label required-field' %>
+                  <%= f.text_field :column_name,
+                      class: "form-control #{f.object.errors[:column_name].any? ? 'is-invalid' : ''}",
+                      data: {
+                        error_target: 'columnName',
+                        column_type_target: 'columnNameInput',
+                        action: 'input->column#updateAccordionTitle'
+                      } %>
+                </div>
+                <div class='col-md-4'>
+                  <!-- Physical column name field with validation feedback -->
+                  <%= f.label :physical_column_name, t('dbdoc.physical_column_name'), class: 'form-label required-field' %>
+                  <%= f.text_field :physical_column_name,
+                      class: "form-control #{f.object.errors[:physical_column_name].any? ? 'is-invalid' : ''}",
+                      data: { error_target: 'physicalColumnName' } %>
+                </div>
+                <div class='col-md-4'>
+                  <!-- Data type selector dropdown -->
+                  <%= f.label :data_type, t('dbdoc.data_type'), class: 'form-label required-field' %>
+                  <%= data_type_select(f, f.object.data_type) %>
+                </div>
+              </div>
+              <!-- Second row: Length, Decimal Precision, Default value -->
+              <div class='row mb-3'>
+                <div class='col-md-4'>
+                  <!-- Length field with validation and suggestion feature -->
+                  <%= f.label :length, t('dbdoc.length'), class: 'form-label' %>
+                  <%= f.number_field :length,
+                      class: "form-control #{f.object.errors[:length].any? ? 'is-invalid' : ''}",
+                      min: 1,
+                      data: {
+                        column_type_target: 'length',
+                        action: 'input->column-type#clearSuggestion input->column#updateAccordionTitle',
+                        error_target: 'length'
+                      } %>
+                  <!-- Helper text area for length suggestions based on data type -->
+                  <small class='form-text text-muted' data-column-type-target='lengthSuggestion'></small>
+                </div>
+                <!-- New Decimal Precision field - hidden by default and shown by Stimulus controller -->
+                <div class='col-md-4' data-column-type-target='decimalPrecisionContainer'>
+                  <!-- Decimal precision field with validation -->
+                  <%= f.label :decimal_precision, t('dbdoc.decimal_precision'), class: 'form-label' %>
+                  <%= f.number_field :decimal_precision,
+                      class: "form-control #{f.object.errors[:decimal_precision].any? ? 'is-invalid' : ''}",
+                      min: 0,
+                      data: {
+                        column_type_target: 'decimalPrecision',
+                        action: 'input->column#updateAccordionTitle',
+                        error_target: 'decimalPrecision'
+                      } %>
+                  <small class='form-text text-muted'><%= t('dbdoc.decimal_precision_hint') %></small>
+                </div>
+                <div class='col-md-4'>
+                  <!-- Default value field with validation -->
+                  <%= f.label :default_value, t('dbdoc.default_value'), class: 'form-label' %>
+                  <%= f.text_field :default_value,
+                      class: "form-control #{f.object.errors[:default_value].any? ? 'is-invalid' : ''}",
+                      data: { error_target: 'defaultValue' } %>
+                </div>
+              </div>
+              <!-- Third row: Sample value and Column properties -->
+              <div class='row mb-3'>
+                <div class='col-md-4'>
+                  <!-- Sample value field with validation -->
+                  <%= f.label :sample_value, t('dbdoc.sample_value'), class: 'form-label' %>
+                  <%= f.text_field :sample_value,
+                      class: "form-control #{f.object.errors[:sample_value].any? ? 'is-invalid' : ''}",
+                      data: { error_target: 'sampleValue' } %>
+                </div>
+                <div class='col-md-4'>
+                  <!-- Column properties section with checkboxes for constraints -->
+                  <label class='form-label'><%= t('dbdoc.column_properties') %></label>
+                  <!-- Key checkbox options organized in a grid -->
+                  <div class='row'>
+                    <div class='col-md-3'>
+                      <!-- Primary key checkbox with accordion update event -->
+                      <div class='form-check mt-2'>
+                        <%= f.check_box :is_primary_key,
+                                        class: 'form-check-input',
+                                        data: { action: 'change->column#updateAccordionTitle' } %>
+                        <%= f.label :is_primary_key, 'Primary🔑', class: 'form-check-label' %>
+                      </div>
+                    </div>
+                    <div class='col-md-3'>
+                      <!-- Candidate key checkbox -->
+                      <div class='form-check mt-2'>
+                        <%= f.check_box :is_candidate_key, class: 'form-check-input' %>
+                        <%= f.label :is_candidate_key, 'Candidate🔑', class: 'form-check-label' %>
+                      </div>
+                    </div>
+                    <div class='col-md-3'>
+                      <!-- Unique key checkbox -->
+                      <div class='form-check mt-2'>
+                        <%= f.check_box :is_unique_key, class: 'form-check-input' %>
+                        <%= f.label :is_unique_key, 'Unique🔑', class: 'form-check-label' %>
+                      </div>
+                    </div>
+                    <div class='col-md-3'>
+                      <!-- Indexed checkbox -->
+                      <div class='form-check mt-2'>
+                        <%= f.check_box :is_indexed, class: 'form-check-input' %>
+                        <%= f.label :is_indexed, 'Indexed', class: 'form-check-label' %>
+                      </div>
+                    </div>
+                    <div class='col-md-3'>
+                      <!-- Not null checkbox with accordion update event -->
+                      <div class='form-check mt-2'>
+                        <%= f.check_box :not_null,
+                                        class: 'form-check-input',
+                                        data: { action: 'change->column#updateAccordionTitle' } %>
+                        <%= f.label :not_null, 'Not Null', class: 'form-check-label' %>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <!-- Foreign key section toggle -->
+              <div class='row mb-3'>
+                <div class='col-12'>
+                  <!-- Foreign key checkbox to toggle related fields -->
+                  <div class='form-check mb-2'>
+                    <%= f.check_box :is_foreign_key,
+                        class: 'form-check-input foreign-key-checkbox',
+                        data: { action: 'click->column#toggleForeignKeyFields change->column#updateAccordionTitle' } %>
+                    <%= f.label :is_foreign_key, t('dbdoc.is_foreign_key?'), class: 'form-check-label fw-semibold' %>
+                  </div>
+                </div>
+              </div>
+              <!-- Render foreign key fields partial - shown/hidden based on checkbox -->
+              <%= render 'foreign_key_fields', f: f, other_tables: %>
+              <!-- Last row: Description and Created by fields -->
+              <div class='row'>
+                <div class='col-md-6'>
+                  <!-- Description field with validation -->
+                  <%= f.label :description, t('dbdoc.description'), class: 'form-label' %>
+                  <%= f.text_area :description,
+                      class: "form-control #{f.object.errors[:description].any? ? 'is-invalid' : ''}",
+                      rows: 1,
+                      data: { error_target: 'description' } %>
+                </div>
+                <div class='col-md-6'>
+                  <!-- Created by field with validation -->
+                  <%= f.label :created_by, t('dbdoc.created_by'), class: 'form-label required-field' %>
+                  <%= f.text_field :created_by,
+                      class: "form-control #{f.object.errors[:created_by].any? ? 'is-invalid' : ''}",
+                      data: { error_target: 'createdBy' } %>
+                </div>
+              </div>
+              <!-- Hidden fields and remove button -->
+              <div class='mt-3'>
+                <!-- Hidden field to store table ID reference -->
+                <%= f.hidden_field :table_id, value: f.object.db_design_dynamic_table_id || table&.id %>
+                <!-- Hidden field for soft delete functionality -->
+                <%= f.hidden_field :_destroy, data: {
+                  column_target: 'destroyField',
+                  column_type_target: 'destroyInput'
+                } %>
+                <!-- Button to remove this column from the table -->
+                <button type='button'
+                       class='btn btn-danger remove-column-btn'
+                       data-action='column#remove'
+                       data-column-type-target='removeButton'>
+                  <i class='bi bi-trash me-1'></i><%= t('dbdoc.remove') %>
+                </button>
+              </div>
+            </div>
+          </div>
+          
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/dbdoc_engine/admin/db_design_dynamic_tables/_deleted_table_index.html.erb

@@ -0,0 +1,110 @@
+<div class='card card-custom shadow mb-4'>
+  <div class='card-body p-0'>
+    <div class='table-responsive p-1'>
+      <!-- Table for displaying deleted dynamic tables -->
+      <table class='table mb-0 fs-6'>
+        <thead class='table-secondary bg-light'>
+          <tr>
+            <!-- Table Group Column Header -->
+            <th class='text-custom-secondary' width="20%"><small><i class='bi bi-folder me-2'></i><%= t('dbdoc.table_group') %></small></th>
+            <!-- Table Name Column Header -->
+            <th class='text-custom-secondary' width="20%"><small><%= t('dbdoc.table_name') %></small></th>
+            <!-- Columns Count Header -->
+            <th class='text-custom-secondary' width="20%"><small><%= t('dbdoc.columns') %></small></th>
+            <!-- Description Header -->
+            <th class='text-custom-secondary' width="20%"><small><%= t('dbdoc.description') %></small></th>
+            <!-- Deleted At Timestamp Header -->
+            <th class='text-custom-secondary' width="20%"><small><%= t('dbdoc.deleted_at') %></small></th>
+            <!-- Actions Header -->
+            <th class='text-custom-secondary' width="20%"><small><%= t('dbdoc.actions') %></small></th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- Group tables by their table group (including soft-deleted groups) -->
+          <% grouped_tables = tables.group_by { |table| 
+               # Find the table group including soft-deleted ones
+               if table.db_design_table_group_id.present?
+                 DbdocEngine::DbDesignTableGroup.with_deleted.find_by(id: table.db_design_table_group_id)
+               else
+                 nil
+               end
+             } %>
+          <% grouped_tables.each do |group, tables| %>
+            <% tables.each_with_index do |table, index| %>
+              <!-- Deleted Table Row -->
+              <tr class='table-danger bg-opacity-10'>
+                <% if index == 0 %>
+                  <!-- Display group info only once per group -->
+                  <td class='fw-medium border-end bg-light bg-opacity-25' rowspan='<%= tables.length %>'>
+                    <% if group %>
+                      <!-- Group name with color dot and deleted indicator -->
+                      <small><div class='d-flex align-items-center'>
+                        <span class='me-2 rounded-circle colour-circle' style='background-color: <%= group.group_color %>;'></span>
+                        <span>
+                          <%= group.group_name %> (<%= tables.size %>)
+                          <% if group.deleted_at.present? %>
+                            <br><span class='text-danger'><i class='bi bi-trash-fill me-1'></i>Deleted Group</span>
+                          <% end %>
+                        </span>
+                      </div></small>
+                    <% else %>
+                      <!-- Ungrouped Label -->
+                      <small><span class='text-muted'>Ungrouped</span></small>
+                    <% end %>
+                  </td>
+                <% end %>
+                <!-- Table name and physical name -->
+                <td class='fw-medium'>
+                  <small><div><%= table.table_name %></div>
+                  <small class='text-muted'><%= table.physical_table_name %></small></small>
+                </td>
+                <!-- Column count badge -->
+                <td>
+                  <small><span class='ms-4'>
+                    <%= table.db_design_dynamic_columns.size %>
+                  </span></small>
+                </td>
+                <!-- Table description -->
+                <td>
+                <div class='description-text truncate-by-width' data-bs-toggle="tooltip" title="<%= table.description %>">
+                  <small><%= table.description %></small>
+                </div>
+                </td>
+                <!-- Deleted at timestamp -->
+                <td>
+                  <small><small class='text-danger'>
+                    <i class='bi bi-calendar-x me-1'></i>
+                    <%= table.deleted_at&.strftime('%Y-%m-%d %H:%M') %>
+                  </small></small>
+                </td>
+                <!-- Restore and Delete Permanently Actions -->
+                <td>
+                  <small><div class='d-flex justify-content-end gap-2'>
+                    <!-- Restore button -->
+                    <%= button_to dbdoc_engine.restore_admin_db_design_dynamic_table_path(table),
+                                method: :patch,
+                                data: {turbo: false },
+                                class: 'btn btn-outline-success btn-sm px-2 shadow-sm' do %>
+                      <i class='bi bi-arrow-counterclockwise'></i>
+                    <% end %>
+                    <!-- Permanent delete button -->
+                    <%= button_to dbdoc_engine.permanent_destroy_admin_db_design_dynamic_table_path(table),
+                                method: :delete,
+                                data: { confirm: t('dbdoc.confirm_permanent_delete'), turbo: false },
+                                class: 'btn btn-outline-danger btn-sm px-2 shadow-sm' do %>
+                      <i class='bi bi-trash-fill'></i>
+                    <% end %>
+                  </div></small>
+                </td>
+              </tr>
+            <% end %>
+          <% end %>
+        </tbody>
+      </table>
+      <!-- Pagination controls -->
+      <div class='d-flex mt-3 justify-content-end p-3'>
+        <small><%= paginate tables, theme: 'dbdoc_engine' %></small>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/dbdoc_engine/admin/db_design_dynamic_tables/_foreign_key_fields.html.erb

@@ -0,0 +1,51 @@
+<%# This partial renders the foreign key relationship fields with direct search functionality in dropdowns %>
+
+<% other_tables ||= [] %>
+
+<!-- Foreign Key Fields Wrapper (initially hidden) -->
+<div class='foreign-key-fields bg-light p-3 rounded border mb-3 hidden'>
+  <div class='row mb-3'>
+    <!-- Referenced Table Dropdown with Search -->
+    <div class='col-md-4' data-controller="select2" data-select2-placeholder-value="<%= t('dbdoc.select_table') %>">
+      <%= f.label :foreign_table_name, t('dbdoc.referenced_table'), class: 'form-label required-field' %>
+      <%= f.collection_select :foreign_table_name, other_tables, :table_name, :table_name,
+          { include_blank: t('dbdoc.select_table'), selected: f.object.foreign_table_name },
+          class: 'form-select foreign-table-dropdown',
+          data: {
+            select2_target: 'select',
+            action: 'change->column#loadColumns',
+            column_existing_foreign_table: f.object.foreign_table_name,
+            column_existing_foreign_column: f.object.foreign_column_name
+          } %>
+    </div>
+
+    <!-- Referenced Column Dropdown with Search -->
+    <div class='col-md-4' data-controller="select2" data-select2-placeholder-value="<%= t('dbdoc.select_column') %>">
+      <%= f.label :foreign_column_name, t('dbdoc.referenced_column'), class: 'form-label required-field' %>
+      <%= f.select :foreign_column_name, [],
+          { include_blank: t('dbdoc.select_column'), selected: f.object.foreign_column_name },
+          class: 'form-select foreign-column-dropdown',
+          data: {
+            select2_target: 'select'
+          } %>
+    </div>
+    
+    <!-- Relationship Type Dropdown -->
+    <div class='col-md-4' data-controller="select2" data-select2-placeholder-value="<%= t('dbdoc.select_relationship_type') %>">
+      <%= f.label :relationship_type, t('dbdoc.relationship_type'), class: 'form-label required-field' %>
+      <%= f.select :relationship_type, 
+          [
+            [t('dbdoc.one_to_one'), 'one_to_one'],
+            [t('dbdoc.one_to_many'), 'one_to_many'],
+            [t('dbdoc.many_to_one'), 'many_to_one'],
+            [t('dbdoc.many_to_many'), 'many_to_many']
+          ],
+          { include_blank: t('dbdoc.select_relationship_type'), selected: f.object.relationship_type },
+          class: 'form-select relationship-type-dropdown',
+          data: {
+            select2_target: 'select',
+            action: 'change->column#updateAccordionTitle'
+          } %>
+    </div>
+  </div>
+</div>

data/app/views/dbdoc_engine/admin/db_design_dynamic_tables/_form.html.erb

@@ -0,0 +1,75 @@
+<%# This is the main form for creating and editing tables. It includes form validation controller and nested fields for columns %>
+
+<!-- Table Form Start -->
+<%= form_with(
+  model: [:admin, table],
+  local: true,
+  class: 'needs-validation ps-5 pe-5 pt-4 bg-white rounded',
+  data: {
+    controller: 'table-validation',
+    action: 'submit->table-validation#validate',
+    table_validation_existing_tables_value: existing_tables.to_json
+  }
+) do |f| %>
+
+  <!-- Table Information Partial -->
+  <%= render 'table_information', f: f, table: table %>
+
+  <!-- Columns Section Card -->
+  <div class='card mb-4 shadow'>
+    <div class='card-header bg-light d-flex justify-content-between align-items-center'>
+      <!-- Section Heading -->
+      <h3 class='mb-0 fs-5'><%= t('dbdoc.columns') %></h3>
+    </div>
+
+    <!-- Columns Section Body -->
+    <div class='card-body'>
+      <div data-controller="column">
+
+        <!-- Column Toolbar: Add Button & Search -->
+        <div class="mb-3 d-flex">
+          <!-- Add Column Button -->
+          <button type="button" class='btn btn-primary' data-action="column#add">
+            <i class="bi bi-plus-circle me-1"></i><%= t('dbdoc.add_column') %>
+          </button>
+
+          <!-- Column Search Input -->
+          <div class="ms-2 flex-grow-1">
+            <div class="input-group">
+              <span class="input-group-text"><i class="bi bi-search"></i></span>
+              <input
+                type="text"
+                class="form-control"
+                placeholder="<%= t('dbdoc.search_columns') %>"
+                data-column-target="searchInput"
+                data-action="input->column#filterColumns">
+            </div>
+          </div>
+        </div>
+
+        <!-- Columns List Container -->
+        <div id="columns" data-column-target="columns" class='columns-container'>
+          <% if table.persisted? && table.db_design_dynamic_columns.any? %>
+            <!-- Render Existing Columns in Edit Mode -->
+            <%= f.fields_for :db_design_dynamic_columns do |column_form| %>
+              <%= render "column_fields", f: column_form, other_tables: other_tables %>
+            <% end %>
+          <% else %>
+            <!-- Message When No Columns Exist -->
+            <div class="alert alert-info mb-4">
+              <%= t('dbdoc.column_note') %>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Fixed Bottom Action Buttons -->
+  <div class="d-flex justify-content-end p-3 fixed-bottom">
+    <%= f.submit t('dbdoc.save_table'), class: 'btn btn-success btn-sm px-4' %>
+    <%= link_to t('dbdoc.back'), dbdoc_engine.admin_db_design_dynamic_tables_path, class: 'btn btn-secondary btn-sm shadow ms-2' %>
+  </div>
+
+<% end %>
+<!-- Table Form End -->

data/app/views/dbdoc_engine/admin/db_design_dynamic_tables/_recent_activity.html.erb

@@ -0,0 +1,39 @@
+<div class="card shadow mb-4">
+  <div class="card-header bg-white d-flex align-items-center">
+    <i class="bi bi-clock-history me-2 text-primary"></i>
+    <span class="fw-bold" style="color: #5366A0;"><%= t('dbdoc.recentactivity') %></span>
+  </div>
+  <div class="card-body p-0">
+    <div class="table-responsive">
+      <table class="table mb-0">
+        <thead class="table-light bg-light">
+          <tr>
+            <th class="text-custom-secondary ps-3"><small><%= t('dbdoc.date_and_time') %></small></th>
+            <th class="text-custom-secondary"><small><%= t('dbdoc.action') %></small></th>
+            <th class="text-custom-secondary"><small><%= t('dbdoc.description') %></small></th>
+          </tr>
+        </thead>
+        <tbody>
+          <% if recent_changelogs.any? %>
+            <% recent_changelogs.each do |log| %>
+              <tr>
+                <td class='ps-3'><small><%= log.change_timestamp.strftime('%Y-%m-%d %H:%M:%S') %></small></td>
+                <td>
+                  <%= render 'dbdoc_engine/admin/dashboard/action_badge', action_type: log.action_type %>
+                </td>
+                <td><small><%= log.changed_by %> <%= log.description %></small></td>
+              </tr>
+            <% end %>
+          <% else %>
+            <tr>
+              <td colspan="3" class="text-center text-muted py-4">
+                <i class="bi bi-exclamation-circle fs-3 d-block mb-2"></i>
+                <small><%= t('dbdoc.no_changes_found') %></small>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

data/app/views/dbdoc_engine/admin/db_design_dynamic_tables/_table_columns.html.erb

@@ -0,0 +1,127 @@
+<!-- Columns Card -->
+<div class='card shadow mb-4'>
+  <div class='card-header bg-white d-flex justify-content-between align-items-center text-custom-primary'>
+    <h5 class='mb-0'>
+      <%= t('dbdoc.table_columns') %>
+      <span class='ms-2 badge text-custom-primary1 rounded-pill'><small><%= columns.count %></small></span>
+    </h5>
+    <div>
+      <div class='input-group'>
+        <span class='input-group-text bg-light'>
+          <i class='bi bi-search'></i>
+        </span>
+        <input type='text' class='form-control form-control-sm'
+               placeholder='<%= t('dbdoc.search_columns') %>'
+               data-controller='column-search'
+               data-action='input->column-search#filter'>
+      </div>
+    </div>
+  </div>
+  <div class='card-body p-0 mb-3'>
+    <div class='table-responsive'>
+      <table class='table mb-0'>
+        <thead class='table-light bg-light'>
+          <tr>
+            <th class='ps-3 text-center text-custom-secondary'>#</th>
+            <th class='text-custom-secondary'><small><%= t('dbdoc.column_name') %></small></th>
+            <th class='text-custom-secondary'><small><%= t('dbdoc.physical_name') %></small></th>
+            <th class='text-custom-secondary'><small><%= t('dbdoc.data_type') %></small></th>
+            <th class='text-custom-secondary'><small><%= t('dbdoc.decimal_precision') %></small></th>
+            <th class='text-custom-secondary' width="20%" ><small><%= t('dbdoc.constraints') %></small></th>
+            <th class='text-custom-secondary'><small><%= t('dbdoc.default_value') %></small></th>
+            <th class='text-custom-secondary'><small><%= t('dbdoc.sample_value') %></small></th>
+            <th class='text-custom-secondary'><small><%= t('dbdoc.description') %></small></th>
+          </tr>
+        </thead>
+        <tbody>
+          <% if columns.empty? %>
+            <tr>
+              <td colspan='7' class='text-center py-4 text-muted'>
+                <i class='bi bi-exclamation-circle fs-3 d-block mb-2'></i>
+                <small><%= t('dbdoc.no_columns_defined') %></small>
+              </td>
+            </tr>
+          <% else %>
+            <% columns.each_with_index do |column, index| %>
+              <tr>
+                <td class='ps-3 text-center'><small><%= index + 1 %></small></td>
+                <td>
+                  <% if column.is_primary_key %>
+                    <span class='me-1 text-warning'><i class='bi bi-key-fill' title='Primary Key'></i></span>
+                  <% end %>
+                  <span class='<%= column.is_primary_key ? 'fw-bold' : '' %>'><small><%= column.column_name %></small></span>
+                </td>
+                <td><small><%= column.physical_column_name %></small></td>
+                <td>
+                  <small><%= column.data_type %>
+                    <% if column.length.present? %>
+                      (<%= column.length %>)
+                    <% end %></small>
+                </td>
+                <td>
+                  <% if column.decimal_precision.present? %>
+                    <small><%= column.decimal_precision %></small>
+                  <% else %>
+                    <small>-</small>
+                  <% end %> 
+                </td>
+                <td>
+                  <div class="d-flex flex-wrap align-items-start gap-1">
+                    <% if column.not_null %>
+                      <span class="badge bg-secondary small fw-normal"><small>NOT NULL</small></span>
+                    <% end %>
+                    <% if column.is_foreign_key %>
+                      <span class="badge bg-darkblue small fw-normal">
+                        <i class="bi bi-link"></i> <small>FK → <%= column.foreign_table_name %>.<%= column.foreign_column_name %></small>
+                      </span>
+                    <% end %>
+                    <% if column.is_candidate_key %>
+                      <span class="badge bg-orange small fw-normal"><i class="bi bi-key"></i> <small>Candidate</small></span>
+                    <% end %>
+                    <% if column.is_unique_key %>
+                      <span class="badge bg-yellow small fw-normal"><i class="bi bi-key"></i> <small>Unique</small></span>
+                    <% end %>
+                    <% if column.is_indexed %>
+                      <span class="badge bg-green text-dark small fw-normal"><i class="bi bi-search"></i> <small>Indexed</small></span>
+                    <% end %>
+                  </div>
+                </td>
+                <td>
+                  <% if column.default_value.present? %>
+                    <span class="badge bg-light text-dark small fw-normal">
+                      <small><%= column.default_value %></small>
+                    </span>
+                  <% else %>
+                    <small>-</small>
+                  <% end %>
+                </td>
+                <td>
+                  <% if column.sample_value.present? %>
+                    <span class="badge bg-light text-dark small fw-normal">
+                      <small><%= column.sample_value %></small>
+                    </span>
+                  <% else %>
+                    <small>-</small>
+                  <% end %>
+                </td>
+                <td>
+                  <div class='column-description truncate-by-width' title='<%= column.description %>'>
+                    <% if column.description.present? %>
+                      <small><%= column.description %></small>
+                    <% else %>
+                      <small>-</small>
+                    <% end %>
+                  </div>
+                </td>
+              </tr>
+            <% end %>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+
+    <div class='d-flex justify-content-end mt-5 mx-3'>
+      <%= paginate columns, theme: 'dbdoc_engine' %>
+    </div>
+  </div>
+</div>