dbdoc_engine 0.1.0

data/app/views/dbdoc_engine/admin/db_design_dynamic_tables/export_to_excel.xlsx.axlsx

@@ -0,0 +1,135 @@
+# app/views/admin/db_design/dynamic_tables/export_to_excel.xlsx.axlsx
+# rubocop:disable Metrics/BlockLength
+wb = xlsx_package.workbook
+
+t = ->(key) { I18n.t("dbdoc.excel.#{key}") }
+
+# Table Info Sheet
+wb.add_worksheet(name: @table.table_name.truncate(30, omission: "")) do |sheet|
+  sheet.sheet_view.show_grid_lines = false
+  # Styles
+  detail_header_style = sheet.styles.add_style(
+    bg_color: "FFFF00",
+    border: { style: :thin, color: "000000" }
+  )
+  column_header_style = sheet.styles.add_style(
+    bg_color: "FFFFFF",
+    b: true,
+    border: { style: :medium, color: "000000" },
+    alignment: { horizontal: :center, vertical: :center }
+  )
+  detail_cell_style = sheet.styles.add_style(
+    border: { style: :thin, color: "000000" },
+    alignment: { horizontal: :left }
+  )
+  centered_cell_style = sheet.styles.add_style(
+    border: { style: :thin, color: "000000" },
+    alignment: { horizontal: :center }
+  )
+  note_header_style = sheet.styles.add_style(
+    bg_color: "FFFFFF",
+    border: { style: :thin, color: "000000" },
+    alignment: { horizontal: :center }
+  )
+  no_border_style = sheet.styles.add_style(
+    bg_color: "FFFFFF"
+  )
+
+  # Table Header Section
+  sheet.add_row [ "", t.call("category"), t.call("master") ], style: [ no_border_style, detail_header_style, detail_header_style ]
+
+  sheet.rows.size
+
+  sheet.add_row([ "", t.call("no"), "1" ], style: [ no_border_style, detail_header_style, detail_cell_style ])
+  sheet.add_row([ "", t.call("physical_table_name"), @table.physical_table_name ], style: [ no_border_style, detail_header_style, detail_cell_style ])
+  sheet.add_row([ "", t.call("logical_table_name"), @table.table_name ], style: [ no_border_style, detail_header_style, detail_cell_style ])
+  sheet.add_row([ "", t.call("version"), "1.0" ], style: [ no_border_style, detail_header_style, detail_cell_style ])
+  sheet.add_row([ "", t.call("created_by"), @table.created_by ], style: [ no_border_style, detail_header_style, detail_cell_style ])
+  sheet.add_row([ "", t.call("created_date"), @table.created_at&.strftime("%Y-%m-%d") ], style: [ no_border_style, detail_header_style, detail_cell_style ])
+  sheet.add_row([ "", t.call("updated_by"), @table.updated_by ], style: [ no_border_style, detail_header_style, detail_cell_style ])
+  sheet.add_row([ "", t.call("updated_date"), @table.updated_at&.strftime("%Y-%m-%d")  ], style: [ no_border_style, detail_header_style, detail_cell_style ])
+
+  # Empty row
+  sheet.add_row []
+
+  # Note section
+  sheet.rows.size
+  sheet.add_row([ "", t.call("overview") ], style: [ no_border_style, note_header_style ])
+  desc_row = sheet.rows.size + 1
+
+  note_border_style = sheet.styles.add_style(
+    border: { style: :medium, color: "000000" }
+  )
+
+  note_row_data = [ "" ]
+  note_row_data += [ @table.description.to_s ] + [ "" ] * 12
+  sheet.add_row(note_row_data, style: [ no_border_style ] + Array.new(13, note_border_style), height: 20)
+
+  sheet.merge_cells("B#{desc_row}:N#{desc_row}")
+
+  # Empty rows
+  sheet.add_row []
+  sheet.add_row []
+
+  # First column header row
+  first_header_row_styles = Array.new(14, no_border_style)
+  first_header_row_styles[3] = column_header_style
+  first_header_row_styles[4] = column_header_style
+  first_header_row_styles[5] = column_header_style
+
+  sheet.add_row [
+    "", "", "", t.call("data_type"), t.call("length"), t.call("decimal_places"), "", "", "", "", "", "", "", ""
+  ], style: first_header_row_styles, height: 20
+
+  # Column details header
+  sheet.add_row [
+    "No",
+    t.call("logical_column_name"),
+    t.call("physical_column_name"),
+    t.call("data_type"),
+    t.call("length"),
+    t.call("decimal_places"),
+    t.call("not_null"),
+    t.call("default"),
+    "PK",
+    "FK",
+    "CK",
+    "UK",
+    "INDEX",
+    t.call("remark")
+  ], style: Array.new(14, column_header_style), height: 40
+
+  # Column details
+  @table.db_design_dynamic_columns.each_with_index do |column, col_idx|
+    row_styles = Array.new(14, detail_cell_style)
+
+    (4..12).each do |idx|
+      row_styles[idx] = centered_cell_style
+    end
+
+    length_display = column.length.present? ? "#{column.length} bytes" : ""
+
+    col_data = [
+      col_idx + 1,
+      column.column_name,
+      column.physical_column_name,
+      column.data_type,
+      length_display,
+      column.decimal_precision,
+      column.not_null ? "〇" : "",
+      column.default_value,
+      column.is_primary_key ? "〇" : "",
+      column.is_foreign_key ? "〇" : "",
+      column.is_candidate_key ? "〇" : "",
+      column.is_unique_key ? "〇" : "",
+      column.is_indexed ? "〇" : "",
+      column.description
+    ]
+    sheet.add_row col_data, style: row_styles
+  end
+
+  # Set column widths
+  sheet.column_widths 5, 25, 30, 30, 15, 15, 20, 10, 5, 5, 5, 5, 10, 40
+end
+
+# rubocop:enable Metrics/BlockLength

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

@@ -0,0 +1,109 @@
+<div class='container-fluid mt-4 ps-5 pe-5'>
+<!-- Custom Styled Breadcrumbs -->
+  <div class='d-flex align-items-center mb-3 breadcrumb-container'>
+    <nav aria-label="breadcrumb">
+  <ol class="breadcrumb mb-3 breadcrumb-container align-items-center">
+    <li class="breadcrumb-item p-0 m-0">
+      <a href="<%= dbdoc_engine.root_path %>" class="text-decoration-none text-muted">
+        <small><i class="bi bi-house-door pe-2"></i></small>
+      </a>
+    </li>
+    <li class="breadcrumb-item p-0 m-0">
+      <a href="<%= dbdoc_engine.admin_dashboard_path(locale: I18n.locale) %>" class="text-decoration-none text-muted pe-2">
+        <small><%= t('dbdoc.dashboardbread') %></small>
+      </a>
+    </li>
+    <li class="breadcrumb-item active p-0 m-0" aria-current="page">
+      <small><span class="text-custom-primary fw-medium"><%= t('dbdoc.dynamic_tables_header') %></span></small>
+    </li>
+  </ol>
+</nav>
+  </div>
+
+  <!-- Page Heading with Stats Summary -->
+  <div class='mb-4'>
+    <div class='d-flex justify-content-between align-items-center mb-4'>
+      <h4 class='fw-bold mb-0 text-custom-primary'>
+        <%= t('dbdoc.dynamic_tables') %>
+      </h4>
+
+      <!-- Quick Stats & Download Button -->
+      <div class='d-flex gap-3'>
+        <div class='rounded-pill px-3 py-2 shadow d-flex align-items-center'>
+          <small><i class='bi bi-folder text-success me-2'></i></small>
+          <span><small><strong><%= @total_group_count %></strong> <%= t('dbdoc.groups') %></small></span>
+        </div>
+        <div class='rounded-pill px-3 py-2 shadow d-flex align-items-center'>
+          <small><i class='bi bi-table text-primary me-2'></i></small>
+          <span><small><strong><%= @total_table_count %></strong> <%= t('dbdoc.tables') %></small></span>
+        </div>
+        <%= link_to dbdoc_engine.export_all_to_excel_admin_db_design_dynamic_tables_path(format: :xlsx),
+                    class: 'btn btn-outline-primary',
+                    target: '_blank',
+                    data: { turbo: false } do %>
+          <small><i class='bi bi-download'></i></small>
+        <% end %>
+      </div>
+    </div>
+    <!-- Combined Search, Filter and Action Buttons Section -->
+    <div class='row mb-3'>
+      <div class='col-lg-8 col-md-7 col-sm-12 mb-2 mb-md-0'>
+        <%= form_with url: admin_db_design_dynamic_tables_path, method: :get, data: { controller: 'auto-submit', turbo_frame: 'tables_results' } do |f| %>
+          <%= f.hidden_field :locale, value: I18n.locale %>
+          <div class='input-group'>
+            <!-- Search Icon -->
+            <span class='input-group-text bg-white border-end-0'>
+              <small><i class='bi bi-search text-muted'></i></small>
+            </span>
+
+            <!-- Search Field -->
+            <%= f.text_field :search, value: params[:search], class: 'form-control border-start-0', placeholder: t('dbdoc.search_admin'), data: { action: 'input->auto-submit#submit' } %>
+            <!-- Group Filter Dropdown -->
+            <div class='col-md-4 ms-2' data-controller="select2">
+              <%= f.select :group_filter,
+                           group_filter_options(@groups, params[:group_filter]),
+                           { prompt: t('dbdoc.select_table_group') },
+                           {
+                             class: 'form-select border-start-0',
+                             data: {
+                               action: 'change->auto-submit#submit',
+                               select2_target: "select",
+                               select2_placeholder_value: t('dbdoc.select_table_group')
+                             }
+                           } %>
+            </div>
+
+            <!-- Clear Button -->
+            <% if params[:search].present? || params[:group_filter].present? %>
+              <%= link_to dbdoc_engine.admin_db_design_dynamic_tables_path, class: 'btn btn-outline-secondary' do %>
+                <small><i class='bi bi-x-circle'></i><%= t('dbdoc.clear') %></small>
+              <% end %>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+
+      <!-- Action Buttons Section -->
+      <div class='col-lg-4 col-md-5 col-sm-12 d-flex justify-content-md-end justify-content-sm-start mt-2 mt-md-0'>
+        <div class='d-flex gap-2'>
+          <!-- Show Deleted Tables (only for superadmin) -->
+          <% if can_delete? %>
+            <%= link_to dbdoc_engine.deleted_tables_admin_db_design_dynamic_tables_path, class: 'btn btn-outline-danger btn-sm shadow-sm d-flex align-items-center' do %>
+              <small><i class='bi bi-trash me-1'></i><span class="d-none d-sm-inline"><%= t('dbdoc.show_deleted') %></span></small>
+            <% end %>
+          <% end %>
+
+          <!-- New Table (for admin and superadmin) -->
+          <% if can_edit? %>
+            <%= link_to dbdoc_engine.new_admin_db_design_dynamic_table_path, class: 'btn btn-outline-success btn-sm shadow-sm d-flex align-items-center' do %>
+              <small><i class='bi bi-plus-circle-fill me-1'></i><span class="d-none d-sm-inline"><%= t('dbdoc.new') %></span></small>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+
+    <!-- Tables List Partial -->
+    <%= render 'table_index', tables: @tables %>
+  </div>
+</div>

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

@@ -0,0 +1,25 @@
+<%# Dynamic Tables - New Table Page This view provides the UI for creating a new dynamic table %>
+<% content_for :title, t('dbdoc.new_table') %>
+<!-- Custom Styled Breadcrumbs -->
+  <div class='d-flex align-items-center mb-3 breadcrumb-container mt-4 ms-5'>
+    <a href='<%= dbdoc_engine.root_path %>' class='text-decoration-none text-muted'>
+      <small><i class='bi bi-house-door'></i></small>
+    </a>
+    <span class='slash'> / </span>
+    <a href="<%= dbdoc_engine.admin_dashboard_path(locale: I18n.locale) %>" class='text-decoration-none text-muted'>
+      <small><%= t('dbdoc.dashboardbread') %></small>
+    </a>
+    <span class='slash'> / </span>
+    <a href='<%= dbdoc_engine.admin_db_design_dynamic_tables_path %>' class='text-decoration-none text-muted'>
+      <small><%= t('dbdoc.dynamic_tables_header') %></small>
+    </a>
+    <span class='slash'> / </span>
+    <small><span class='text-custom-primary fw-medium'><%= t('dbdoc.newtable') %></span></small>
+  </div>
+<%# Page heading with icon %>
+<h4 class="fw-bold mt-3 ms-5 mb-2 text-custom-primary">
+  <i class="bi bi-pencil-square me-1 text-custom-primary"></i><%= t('dbdoc.new_table') %>
+</h4>
+<%# Render the form partial with the new table instance %>
+<%= render 'form', table: @table, other_tables: @other_tables, existing_tables: @existing_tables %>
+<br>

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

@@ -0,0 +1,125 @@
+<div class='container-fluid mt-4 ps-5 pe-5'>
+  <!-- Custom Styled Breadcrumbs -->
+  <div class='d-flex align-items-center mb-3 breadcrumb-container'>
+    <a href='<%= dbdoc_engine.root_path %>' class='text-decoration-none text-muted'>
+      <i class='bi bi-house-door'></i>
+    </a>
+    <span class='slash'> / </span>
+    <a href="<%= dbdoc_engine.admin_dashboard_path(locale: I18n.locale) %>" class='text-decoration-none text-muted'>
+      <small><%= t('dbdoc.dashboardbread') %></small>
+    </a>
+    <span class='slash'> / </span>
+    <a href='<%= dbdoc_engine.admin_db_design_dynamic_tables_path %>' class='text-decoration-none text-muted'>
+      <small><%= t('dbdoc.dynamic_tables_header') %></small>
+    </a>
+    <span class='slash'> / </span>
+    <span class='text-custom-primary fw-medium'><small><%= @table.table_name %></small></span>
+  </div>
+
+  <!-- Table Information Accordion -->
+  <div class='accordion mb-4'>
+    <div class='accordion-item shadow-sm' data-controller="dbdoc-accordion">
+      <h2 class='accordion-header' id='headingTableInfo'>
+        <button
+          class='accordion-button collapsed'
+          type='button'
+          data-action='click->dbdoc-accordion#toggle'
+          data-dbdoc-accordion-target="button"
+          aria-expanded='false'
+          aria-controls='collapseTableInfo'>
+          <div class='d-flex justify-content-between align-items-center w-100'>
+            <div>
+              <i class='bi bi-table me-2 text-primary'></i>
+              <%= @table.table_name %>
+              <span class='ms-2 text-muted fs-6 fst-italic'>
+                <small>(<%= @table.physical_table_name %>)</small>
+              </span>
+            </div>
+          </div>
+        </button>
+      </h2>
+      <div
+        id='collapseTableInfo'
+        class='accordion-collapse collapse'
+        data-dbdoc-accordion-target="content"
+        aria-labelledby='headingTableInfo'>
+        <div class='accordion-body'>
+          <!-- Table details in card-like sections -->
+          <div class='row g-3'>
+            <!-- Table Group Section -->
+            <div class='col-md-6'>
+              <div class='p-3 border rounded h-100 bg-light bg-opacity-50'>
+                <h6 class='d-flex align-items-center text-primary mb-3'>
+                  <i class='bi bi-folder me-2'></i><%= t('dbdoc.table_group') %>
+                </h6>
+                <div class='d-flex align-items-center'>
+                  <% group = DbdocEngine::DbDesignTableGroupQueries.find_group_with_tables(@table.db_design_table_group_id) %>
+                  <span class='me-2 rounded-circle colour-circle'
+                        style='background-color: <%= group.group_color %>; width: 12px; height: 12px; display: inline-block;'></span>
+                  <span><%= group.group_name %></span>
+                </div>
+              </div>
+            </div>
+            <!-- User Information Section -->
+            <div class='col-md-6'>
+              <div class='p-3 border rounded h-100 bg-light bg-opacity-50'>
+                <h6 class='d-flex align-items-center text-primary mb-3'>
+                  <i class='bi bi-person-badge me-2'></i><%= t('dbdoc.user_information') %>
+                </h6>
+                <!-- Created By Information -->
+                <div class='d-flex align-items-center mb-2'>
+                  <div class='text-muted'>
+                    <i class='bi bi-person-add me-1'></i> <%= t('dbdoc.created_by') %>:
+                  </div>
+                  <div class='ms-2'>
+                    <%= @table.created_by %>
+                    <span class='text-muted ms-1'>
+                      (<%= l @table.created_at, format: :short %>)
+                    </span>
+                  </div>
+                </div>
+                <!-- Updated By Information -->
+                <div class='d-flex align-items-center'>
+                  <div class='text-muted mt-2'>
+                    <i class='bi bi-person-check me-1'></i> <%= t('dbdoc.updated_by') %>:
+                  </div>
+                  <div class='ms-2 mt-2'>
+                    <%= @table.updated_by %>
+                    <span class='text-muted ms-1'>
+                      (<%= l @table.updated_at, format: :short %>)
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <!-- Description Section -->
+            <div class='col-12'>
+              <div class='p-3 border rounded bg-light bg-opacity-50'>
+                <h6 class='d-flex align-items-center text-primary mb-3'>
+                  <i class='bi bi-info-circle me-2'></i><%= t('dbdoc.description') %>
+                </h6>
+                <div class=''>
+                  <%= @table.description.present? ?
+                        @table.description :
+                        content_tag(:span, 'No description provided', class: 'text-muted fst-italic') %>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Footer with Export Button -->
+        <div class='accordion-footer px-4 py-3 d-flex justify-content-end border-top'>
+          <%= link_to dbdoc_engine.export_to_excel_admin_db_design_dynamic_table_path(@table, format: :xlsx),
+                      class: 'btn btn-outline-primary btn-sm px-3 shadow-sm',
+                      target: '_blank',
+                      data: { turbo: false } do %>
+            <i class='bi bi-file-excel me-2'></i><%= t('dbdoc.export_to_excel') %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <%= render 'table_columns', columns: @columns %>
+  <%= render 'recent_activity', recent_changelogs: @recent_changelogs %>
+</div>

data/app/views/dbdoc_engine/admin/db_design_table_groups/_deleted_table_groups_list.html.erb

@@ -0,0 +1,75 @@
+<%= turbo_frame_tag 'deleted_table_groups_results' do %>
+  <% if table_groups.empty? %>
+    <!-- No Data Message -->
+    <div class='text-center py-5'>
+      <i class='bi bi-trash fs-1 text-muted mb-3'></i>
+      <h5 class='text-muted'><%= t('dbdoc.no_deleted_table_groups_found') %></h5>
+      <% if params[:search].present? %>
+        <p class='text-muted'><small><%= t('dbdoc.try_different_criteria') %><%= link_to t('dbdoc.view_all_deleted_groups'), dbdoc_engine.deleted_groups_admin_db_design_table_groups_path %></small></p>
+      <% end %>
+    </div>
+  <% else %>
+    <!-- Table Card -->
+    <div class='card card-custom shadow-sm mb-4'>
+      <div class='card-body p-0'>
+        <div class='table-responsive p-1'>
+          <table class='table'>
+            <thead class='table-light bg-light'>
+              <tr>
+                <th class='text-custom-secondary' width="35%"><small><%= t('dbdoc.group_name') %></small></th>
+                <th class='text-custom-secondary' width="35%"><small><%= t('dbdoc.tables') %></small></th>
+                <th class='text-custom-secondary' width="35%"><small><%= t('dbdoc.deleted_at') %></small></th>
+                <th class=' text-custom-secondary' width="10%"><small><%= t('dbdoc.actions') %></small></th>
+              </tr>
+            </thead>
+            <tbody>
+              <% table_groups.each do |group| %>
+                <tr class='table-danger bg-opacity-10'>
+                  <!-- Group Name -->
+                  <td>
+                    <div class='d-flex align-items-center'>
+                      <span class='me-2 colour-circle-1' style='background-color: <%= group.group_color %>;'></span>
+                      <small><%= group.group_name %></small>
+                    </div>
+                  </td>
+                  <td>
+                    <small class='ms-3'>
+                      <%= DbdocEngine::DbDesignDynamicTableQueries.count_tables_in_group(group, true) %>
+                    </small>
+                  </td>
+                  <!-- Deleted at timestamp -->
+                  <td>
+                    <small class='text-danger'>
+                      <i class='bi bi-calendar-x me-1'></i>
+                      <%= group.deleted_at&.strftime('%Y-%m-%d %H:%M') %>
+                    </small>
+                  </td>
+                  <td class='text-end'>
+                    <div class='d-flex justify-content-end gap-2'>
+                      <%= button_to dbdoc_engine.restore_admin_db_design_table_group_path(group),
+                          method: :patch,
+                          class: 'btn btn-outline-success btn-sm px-3 shadow-sm',
+                          data: { turbo: false } do %>
+                        <small><i class='bi bi-arrow-counterclockwise me-1'></i></small>
+                      <% end %>
+                      <%= button_to dbdoc_engine.permanent_destroy_admin_db_design_table_group_path(group),
+                          method: :delete,
+                          data: { confirm: 'Are you sure? This cannot be undone!', turbo: false },
+                          class: 'btn btn-outline-danger btn-sm px-3 shadow-sm' do %>
+                        <small><i class='bi bi-trash-fill me-1'></i></small>
+                      <% end %>
+                    </div>
+                  </td>
+                </tr>
+              <% end %>
+            </tbody>
+          </table>
+        </div>
+        <!-- Pagination -->
+        <div class='d-flex mt-3 justify-content-end'>
+          <small><%= paginate table_groups, theme: 'dbdoc_engine' %></small>
+        </div>
+      </div>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,88 @@
+<%# Table Group Form Partial - Updated to handle both created_by and updated_by %>
+<div class="d-flex ms-5">
+  <div class="bg-white p-4 rounded shadow w-50">
+    <%= form_with(
+      model: [:admin, table_group],
+      local: true,
+      class: 'needs-validation p-4 bg-white rounded',
+      data: {
+        controller: 'table-group-validation',
+        action: 'submit->table-group-validation#validate',
+        table_group_validation_existing_names_value: [], # This will be populated via AJAX
+        table_group_id: table_group.persisted? ? table_group.id : nil,
+        original_group_name: table_group.persisted? ? table_group.group_name : nil
+      }
+    ) do |f| %>
+      <!-- Group Name Field -->
+      <div class='mb-4'>
+        <%= f.label :group_name, t('dbdoc.group_name'), class: 'form-label fw-semibold required-field' %>
+        <%= f.text_field :group_name,
+          class: 'form-control form-control',
+          placeholder: t('dbdoc.enter_group_name'),
+          data: {
+            table_group_validation_target: 'groupName'
+          }
+        %>
+        <% if table_group.errors[:group_name].any? %>
+          <div class='invalid-feedback d-block'>
+            <%= table_group.errors[:group_name].first %>
+          </div>
+        <% end %>
+      </div>
+      
+      <% if table_group.new_record? %>
+        <!-- Created By Field - Only shown for new records -->
+        <div class='mb-4'>
+          <%= f.label :created_by, t('dbdoc.created_by'), class: 'form-label fw-semibold required-field' %>
+          <%= f.text_field :created_by,
+            class: 'form-control form-control',
+            placeholder: t('dbdoc.enter_your_name'),
+            data: {
+              table_group_validation_target: 'createdBy'
+            }
+          %>
+        </div>
+        
+        <!-- Hidden Updated By Field - For new records -->
+        <%= f.hidden_field :updated_by,
+          data: {
+            table_group_validation_target: 'updatedBy'
+          }
+        %>
+      <% else %>
+        <!-- Updated By Field - Only shown for existing records -->
+        <div class='mb-4'>
+          <%= f.label :updated_by, t('dbdoc.updated_by'), class: 'form-label fw-semibold required-field' %>
+          <%= f.text_field :updated_by,
+            value: "", 
+            class: 'form-control form-control',
+            placeholder: t('dbdoc.enter_your_name'),
+            data: {
+              table_group_validation_target: 'updatedBy'
+            }
+          %>
+        </div>
+      <% end %>
+      
+      <!-- Group Color Field -->
+      <div class='mb-4'>
+        <%= f.label :group_color, t('dbdoc.group_color'), class: 'form-label fw-semibold required-field' %>
+        <%= f.color_field :group_color,
+          class: 'form-control form-control color-thin',
+          value: f.object.group_color || '#ff5733',
+          data: {
+            table_group_validation_target: 'groupColor'
+          }
+        %>
+      </div>
+      
+      <!-- Submit Button -->
+      <div class='d-flex'>
+        <%# Submit button %>
+        <%= f.submit t('dbdoc.save_table_group'), class: 'btn btn-success btn-sm px-4 py-2 shadow-sm' %>
+        <%# Back button %>
+        <%= link_to t('dbdoc.back'), dbdoc_engine.admin_db_design_table_groups_path, class: 'btn btn-secondary btn-sm shadow px-4 py-2 ms-2' %>
+      </div>
+    <% end %>
+  </div>
+</div>

data/app/views/dbdoc_engine/admin/db_design_table_groups/_table_groups_list.html.erb

@@ -0,0 +1,82 @@
+<%= turbo_frame_tag 'table_groups_results' do %>
+  <% if table_groups.any? %>
+    <!-- Table Groups List -->
+    <div class='table-responsive p-1'>
+      <table class='table'>
+        <thead class='table-secondary bg-light'>
+          <tr>
+            <!-- Group Name Header -->
+            <th class='text-custom-secondary'><small><%= t('dbdoc.group_name') %></small></th>
+
+            <!-- Number of tables header -->
+            <th class='text-custom-secondary'><small><%= t('dbdoc.tables') %></small></th>
+
+            <!-- Actions Header - left aligned as requested -->
+            <th class='text-end pe-5 text-custom-secondary'><small><%= t('dbdoc.actions') %></small></th>
+          </tr>
+        </thead>
+        <tbody>
+          <% table_groups.each do |group| %>
+            <tr>
+              <!-- Group Name -->
+              <td>
+                <div class='d-flex align-items-center'>
+                  <span class='me-2 colour-circle-1' style='background-color: <%= group.group_color %>;'></span>
+                  <small><%= group.group_name %></small>
+                </div>
+              </td>
+
+              <!-- Number of tables associated with the group -->
+              <td>
+                <small>
+                  <%= DbdocEngine::DbDesignDynamicTableQueries.count_tables_in_group(group) %>
+                </small>
+              </td>
+
+              <!-- Edit and Delete Buttons - still right-aligned -->
+              <td>
+                <div class='d-flex justify-content-end gap-2'>
+                  <!-- Edit Group Button -->
+                  <%= link_to dbdoc_engine.edit_admin_db_design_table_group_path(group),
+                        class: 'btn btn-outline-warning btn-sm px-3 shadow-sm',
+                        data: { turbo_frame: '_top' } do %>
+                    <small><i class='bi bi-pencil-square me-1'></i></small>
+                  <% end %>
+
+                  <!-- Delete Group Button -->
+                  <%= button_to dbdoc_engine.admin_db_design_table_group_path(group), method: :delete, data: { confirm: 'Are you sure?', turbo: false }, class: 'btn btn-outline-danger btn-sm px-3 shadow-sm' do %>
+                    <small><i class='bi bi-trash-fill me-1'></i></small>
+                  <% end %>
+                </div>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Pagination Section -->
+    <div class='d-flex mt-3 justify-content-end mb-3'>
+      <small><%= paginate table_groups, theme: 'dbdoc_engine' %></small>
+    </div>
+  <% else %>
+    <!-- No Table Groups Found Message -->
+    <div class='text-center py-5'>
+      <i class='bi bi-search fs-1 text-muted mb-3'></i>
+      <h5 class='text-muted'><%= t('dbdoc.no_table_groups_found') %></h5>
+
+      <% if search_query.present? %>
+        <!-- Message when filter is applied but no results -->
+        <p class='text-muted'>
+          <small>
+            <%= t('dbdoc.try_different_criteria') %>
+            <%= link_to t('dbdoc.view_all_groups'), dbdoc_engine.admin_db_design_table_groups_path %>
+          </small>
+        </p>
+      <% else %>
+        <!-- Message when no groups exist -->
+        <p class='text-muted'><small><%= t('dbdoc.get_started_by_creating_new_table_group') %></small></p>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>