dbdoc_engine 0.1.0

data/app/views/dbdoc_engine/home/partials/_column_row.html.erb

@@ -0,0 +1,157 @@
+<!-- Table row for a single column in the group/table details -->
+<tr class='group-table-row table-details-row'>
+  <!-- Logical (display) name of the column, with group color dot -->
+  <td>
+    <div class='d-flex align-items-center truncate-text third-row third-color'>
+      <!-- Colored square representing the group color -->
+      <svg width='11' height='11' viewBox='0 0 11 11' xmlns='http://www.w3.org/2000/svg' class='me-2'>
+        <rect width='11' height='11' fill='<%= group.group_color %>' />
+      </svg>
+      <span><%= column.column_name %></span>
+    </div>
+  </td>
+
+  <!-- Physical column name in the database -->
+  <td>
+    <div class='third-color'><%= column.physical_column_name %></div>
+  </td>
+
+  <!-- Data type with info icon for tooltip -->
+  <td>
+    <div class='d-flex align-items-center third-color'>
+      <div class='truncate-text me-2'><%= column.data_type %></div>
+      <!-- Info icon triggers tooltip with data type details -->
+      <i class='bi bi-info-circle-fill info-icon'
+         data-action='click->table-details#toggleTooltip'
+         data-table-details-target='infoIcon'
+         data-type='<%= column.data_type %>'></i>
+    </div>
+  </td>
+
+  <!-- Length or size of the column -->
+  <td>
+    <span class='third-color'>
+      <%= column.length %>
+    </span>
+  </td>
+
+  <!-- Column settings: PK, NOT NULL, FK, Candidate, Indexed -->
+  <td>
+        <% if column.is_primary_key %>
+      <span class="badge bg-info me-1 mb-1 constraint-badge"
+            data-bs-toggle="tooltip"
+            data-bs-placement="right"
+            data-bs-custom-class="custom-tooltip"
+            data-bs-html="true"
+            title="<div class='type-tooltip-content'>
+                    <div class='type-tooltip-heading'>PK</div>
+                    <div class='type-tooltip-desc'>Uniquely identifies each row (primary key).<br>各行を一意に識別する主キー。</div>
+                  </div>">🔑 PK</span>
+    <% end %>
+    <% if column.not_null %>
+      <span class="badge bg-secondary me-1 mb-1 constraint-badge"
+            data-bs-toggle="tooltip"
+            data-bs-placement="right"
+            data-bs-custom-class="custom-tooltip"
+            data-bs-html="true"
+            title="<div class='type-tooltip-content'>
+                    <div class='type-tooltip-heading'>NOT NULL</div>
+                    <div class='type-tooltip-desc'>This column cannot be empty.<br>このカラムは必ず値が必要です。</div>
+                  </div>">NOT NULL</span>
+    <% end %>
+    <% if column.is_foreign_key %>
+      <span class="badge bg-darkblue me-1 mb-1 constraint-badge"
+            data-bs-toggle="tooltip"
+            data-bs-placement="right"
+            data-bs-custom-class="custom-tooltip"
+            data-bs-html="true"
+            title="<div class='type-tooltip-content'>
+                    <div class='type-tooltip-heading'>FK</div>
+                    <div class='type-tooltip-desc'>Links to another table (foreign key).<br>他のテーブルへの参照（外部キー）。</div>
+                  </div>">🔑 FK</span>
+    <% end %>
+    <% if column.is_candidate_key %>
+      <span class="badge bg-orange me-1 mb-1 constraint-badge"
+            data-bs-toggle="tooltip"
+            data-bs-placement="right"
+            data-bs-custom-class="custom-tooltip"
+            data-bs-html="true"
+            title="<div class='type-tooltip-content'>
+                    <div class='type-tooltip-heading'>CANDIDATE</div>
+                    <div class='type-tooltip-desc'>Can uniquely identify rows (candidate key).<br>行を一意に識別できる候補キー。</div>
+                  </div>">CANDIDATE</span>
+    <% end %>
+    <% if column.is_indexed %>
+      <span class="badge bg-green me-1 mb-1 constraint-badge"
+            data-bs-toggle="tooltip"
+            data-bs-placement="right"
+            data-bs-custom-class="custom-tooltip"
+            data-bs-html="true"
+            title="<div class='type-tooltip-content'>
+                    <div class='type-tooltip-heading'>INDEXED</div>
+                    <div class='type-tooltip-desc'>Speeds up searches (indexed column).<br>検索を高速化するインデックス付きカラム。</div>
+                  </div>">INDEXED</span>
+    <% end %>
+    <% if column.is_unique_key %>
+      <span class="badge bg-yellow me-1 mb-1 constraint-badge"
+            data-bs-toggle="tooltip"
+            data-bs-placement="right"
+            data-bs-custom-class="custom-tooltip"
+            data-bs-html="true"
+            title="<div class='type-tooltip-content'>
+                    <div class='type-tooltip-heading'>UNIQUE</div>
+                    <div class='type-tooltip-desc'>Ensures all values are unique in this column.<br>このカラムの値がすべて一意であることを保証します。</div>
+                  </div>">UNIQUE</span>
+    <% end %>
+  </td>
+
+  <!-- Foreign key reference: link to referenced table/column if available -->
+  <td>
+    <div>
+      <% if column.is_foreign_key && column.foreign_table_name.present? %>
+        <% foreign_table = DbdocEngine::DbDesignDynamicTableQueries.find_by_table_name(column.foreign_table_name) %>
+        <% if foreign_table %>
+          <!-- Link to referenced table details page -->
+          <a href='<%= dbdoc_engine.table_details_path(foreign_table.id) %>' class='table-link'>
+            <%= column.foreign_table_name %>.<%= column.foreign_column_name %>
+          </a>
+        <% else %>
+          <!-- Show reference as plain text if table not found -->
+          <%= column.foreign_table_name %>.<%= column.foreign_column_name %>
+        <% end %>
+      <% end %>
+    </div>
+  </td>
+
+  <!-- Default value for the column, or 'N/A' if not set -->
+  <td>
+    <div class='text-secondary'>
+      <%= column.default_value || 'N/A' %>
+    </div>
+  </td>
+
+  <!-- Sample value for the column, or 'N/A' if not set -->
+  <td>
+    <div class='text-secondary'>
+      <%= column.sample_value || 'N/A' %>
+    </div>
+  </td>
+
+  <!-- Decimal Precision for the column, or 'N/A' if not set -->
+  <td>
+    <div class='text-secondary'>
+      <%= column.decimal_precision || 'N/A' %>
+    </div>
+  </td>
+
+  <!-- Remarks or description for the column -->
+  <td>
+    <div class='column-description text-truncate third-color' title='<%= column.description %>'>
+      <% if column.description.present? %>
+        <%= column.description.split.first(10).join(' ') %><%= column.description.split.count > 10 ? '...' : '' %>
+      <% else %>
+        <small>-</small>
+      <% end %>
+    </div>
+  </td>
+</tr>

data/app/views/dbdoc_engine/home/partials/_filter_form.html.erb

@@ -0,0 +1,47 @@
+<!-- Card container for the changelog filter form -->
+<div class='card mb-4'>
+  <div class='card-body changelog-above'>
+    <!-- Form for filtering changelogs, using the GET method to maintain parameters in the URL -->
+    <%= form_tag dbdoc_engine.changelogs_path, method: :get, class: 'row g-3' do %>
+
+      <!-- Dropdown to select the entity type (e.g., Table, Column, User) -->
+      <div class='col-md-4'>
+        <label class='form-label lable'><%= t('dbdoc.entity_type') %></label>
+        <%= select_tag :entity_type, options_for_select(entity_type_options, selected: params[:entity_type]), class: 'form-select salect' %>
+      </div>
+
+      <!-- Dropdown to select the action type (e.g., Create, Update, Delete) -->
+      <div class='col-md-4'>
+        <label class='form-label lable'><%= t('dbdoc.action_type') %></label>
+        <%= select_tag :action_type, options_for_select(action_type_options, selected: params[:action_type]), class: 'form-select salect' %>
+      </div>
+
+      <!-- Input field to filter by entity name -->
+      <div class='col-md-4'>
+        <label class='form-label lable'><%= t('dbdoc.entity_name') %></label>
+        <%= text_field_tag :entity_name, params[:entity_name], placeholder: 'Filter by name', class: 'form-control cantrol' %>
+      </div>
+
+      <!-- Date picker to select the start date for filtering -->
+      <div class='col-md-4'>
+        <label class='form-label lable'><%= t('dbdoc.date_from') %></label>
+        <%= date_field_tag :date_from, params[:date_from], class: 'form-control cantrol' %>
+      </div>
+
+      <!-- Date picker to select the end date for filtering -->
+      <div class='col-md-4'>
+        <label class='form-label lable'><%= t('dbdoc.date_to') %></label>
+        <%= date_field_tag :date_to, params[:date_to], class: 'form-control cantrol' %>
+      </div>
+
+      <!-- Buttons to apply or clear filters -->
+      <div class='col-md-4 d-flex align-items-end justify-content-end'>
+        <%= submit_tag t('dbdoc.apply_filters'), class: 'btn applybutton me-2' %>
+        <!-- Link to reset filters and reload the changelogs page -->
+        <%= link_to t('dbdoc.clear'), dbdoc_engine.changelogs_path, class: 'btn clear-button' %>
+      </div>
+
+    <% end %>
+    <!-- End of form -->
+  </div>
+</div>

data/app/views/dbdoc_engine/home/partials/_group_section.html.erb

@@ -0,0 +1,84 @@
+<!-- Group section with a colored left border based on the group's color -->
+<div class='bg-white rounded-1 shadow-sm mb-4 group-section' style='border-left: 4px solid <%= group.group_color %>;'>
+
+  <!-- Group Header Section -->
+  <div class='d-flex align-items-center justify-content-between py-2 px-3 shadow-sm group-header' data-action='click->ecommerce#toggleGroupContentHeader'>
+    <div class='main-left'>
+      <div class='d-flex align-items-center me-3 group-header-left'>
+        <%# Group table count badge with semi-transparent background %>
+        <div class='badge d-inline-flex align-items-center justify-content-center rounded-circle ms-2 fw-bold group-count-badge' style='<%= group_badge_style(group) %>'>
+          <%= group.db_design_dynamic_tables.size %>
+        </div>
+      </div>
+      <span class='group-name'><%= group.group_name %></span>
+    </div>
+
+    <%# Toggle button to show/hide group content %>
+    <button class='border-0 rounded-pill fw-medium fs-7 py-1 px-4 view-button'
+            data-ecommerce-target='viewButton'
+            data-action='click->ecommerce#toggleGroupContent'>
+      <%= t('dbdoc.view') %>
+    </button>
+  </div>
+
+  <!-- Collapsible group content (initially hidden) -->
+  <div class='group-content' data-ecommerce-target='groupContent'>
+    <%# Table listing with headers included in the table %>
+    <div class='group-content-inner table-responsive'>
+      <table class='content-table'>
+        <thead>
+          <tr class='group-content-header'>
+            <th class='group-content-names ecommercename' width='25%'><%= t('dbdoc.name') %></th>
+            <th class='group-content-names' width='25%'><%= t('dbdoc.physicalname') %></th>
+            <th class='group-content-names' width='15%'><%= t('dbdoc.columns') %></th>
+            <th class='group-content-notes' width='30%'><%= t('dbdoc.remarks') %></th>
+          </tr>
+        </thead>
+        <tbody>
+          <% if group.db_design_dynamic_tables.any? %>
+            <% group.db_design_dynamic_tables.each do |table| %>
+             <tr class='group-table-row ecommercerow' data-table-link='<%= dbdoc_engine.table_details_path(table.id) %>'>
+                <%# Table name with colored square icon %>
+                <td class='group-table-names name-column'>
+                  <svg width='11' height='11' viewBox='0 0 11 11' xmlns='http://www.w3.org/2000/svg'>
+                    <rect width='11' height='11' fill='<%= group.group_color %>'/>
+                  </svg>
+                  <a href='<%= dbdoc_engine.table_details_path(table.id) %>' class='table-link'>
+                    <span><%= table.table_name %></span>
+                  </a>
+                </td>
+
+                <%# Japanese/physical table name %>
+                <td class='group-table-names japanese-name-column'>
+                  <span><%= table.physical_table_name || 'N/A' %></span>
+                </td>
+
+                <%# Column count %>
+                <td class='ms-3 group-table-names count-column'>
+                  <%= table_column_count(table) %>
+                </td>
+
+                <%# Table description %>
+                <td class='group-table-notes notes-column'>
+                  <div class='column-description text-truncate third-color' title='<%= table.description %>'>
+                    <% if table.description.present? %>
+                      <%= table.description.split.first(6).join(' ') %><%= table.description.split.count > 6 ? '...' : '' %>
+                    <% else %>
+                      <small>-</small>
+                    <% end %>
+                  </div>
+                </td>
+              </tr>
+            <% end %>
+          <% else %>
+            <tr>
+              <td colspan='4' class='notablesmessage'>
+                <%= t('dbdoc.no_tables_created_in_this_group_yet') %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

data/app/views/dbdoc_engine/home/partials/_pagination.html.erb

@@ -0,0 +1,5 @@
+<!-- Footer section for pagination -->
+<div class='endpart card-footer'>
+  <%# Renders the pagination controls for the given collection %>
+  <%= paginate collection, theme: 'dbdoc_engine'%>
+</div>

data/app/views/dbdoc_engine/home/partials/_stats_container.html.erb

@@ -0,0 +1,46 @@
+<div class='d-flex align-items-center flex-wrap justify-content-start gap-3 mb-4 p-0 stats-container'>
+  <%# Tables Statistics %>
+  <div class='d-flex align-items-center justify-content-start rounded-1 stats-item'>
+    <div class='stats-item-icon tables'>
+      <%# Displays an icon representing database tables %>
+      <%= image_tag 'dbdoc_engine/table_dbdocs.svg', alt: 'Tables', width: 40, height: 40 %>
+    </div>
+    <div class='stats-item-content'>
+      <span class='stats-item-count' data-ecommerce-target='tablesCount'>
+        <%= dynamic_table_count %>
+      </span>
+      <%# Label for the tables count %>
+      <small class='stats-item-label'><%= t('dbdoc.tables') %></small>
+    </div>
+  </div>
+  <%# Fields Statistics %>
+  <div class='d-flex align-items-center justify-content-start rounded-1 stats-item'>
+    <div class='stats-item-icon fields'>
+      <%# Displays an icon representing database fields/columns %>
+      <%= image_tag 'dbdoc_engine/column_stats_dbdocs.svg', alt: 'Fields', width: 40, height: 40 %>
+    </div>
+    <div class='stats-item-content'>
+      <%# Displays the total count of dynamically created tables %>
+      <span class='stats-item-count' data-ecommerce-target='fieldsCount'>
+        <%= dynamic_column_count %>
+      </span>
+      <%# Label for the fields count %>
+      <small class='stats-item-label'><%= t('dbdoc.fields') %></small>
+    </div>
+  </div>
+  <%# Updates Statistics %>
+  <div class='d-flex align-items-center justify-content-start rounded-1 stats-item'>
+    <div class='stats-item-icon updates'>
+      <%# Displays an icon representing database updates/changelog %>
+      <%= image_tag 'dbdoc_engine/update_stats_dbdocs.svg', alt: 'Updates', width: 40, height: 40 %>
+    </div>
+    <div class='stats-item-content'>
+      <%# Displays the total count of changelog entries (updates) %>
+      <span class='stats-item-count'>
+        <%= changelog_count %>
+      </span>
+      <%# Label for the updates count %>
+      <small class='stats-item-label'><%= t('dbdoc.updates') %></small>
+    </div>
+  </div>
+</div>

data/app/views/dbdoc_engine/home/partials/_table_groups.html.erb

@@ -0,0 +1,7 @@
+<div class='table-groups' data-ecommerce-target='tableGroups'>
+  <%# Iterate through each table group, including associated dynamic tables to optimize queries %>
+  <% fetch_table_groups.each do |group| %>
+    <%# Render the partial for each group, passing the group object %>
+    <%= render 'dbdoc_engine/home/partials/group_section', group: group %>
+  <% end %>
+</div>

data/app/views/dbdoc_engine/home/partials/_table_information_section.html.erb

@@ -0,0 +1,50 @@
+<div class='shadow rounded-3 main-content-body mb-3' data-controller='table-details'>
+  <%= render 'dbdoc_engine/home/partials/breadcrumb_navigation', locals: { group: group, table: table } %>
+  <div class='table-information-below rounded-1'>
+    <div class='d-flex align-items-center justify-content-between py-2 px-3 shadow-sm group-header'
+         data-action='click->table-details#toggleFieldsHeader'>
+      <div class='main-left'>
+        <div class='d-flex align-items-center me-3 group-header-left'>
+          <div class='badge d-inline-flex align-items-center justify-content-center rounded-circle ms-2 fw-bold group-count-badge'
+               style='background-color: rgba(83, 102, 160, 0.3); color: #5366A0; width: 23px; height: 22px;'>
+            <i class="bi bi-info-circle-fill" style="color: #5366A0; font-size: 14px;"></i>
+          </div>
+        </div>
+        <span class='group-name'><%= t('dbdoc.table_information') %></span>
+      </div>
+      <button class='border-0 rounded-pill fw-medium fs-7 py-1 px-4 view-button active'>
+        <%= t('dbdoc.view') %>
+      </button>
+    </div>
+    <div class='group-content active' data-table-details-target='fieldsContent'>
+      <div class="container-fluid ps-4">
+        <div class="row table-info-row">
+          <div class="col-md-4 col-12 table-info-col">
+            <div class="table-info-label"><%= t('dbdoc.table_name') %></div>
+            <div class="table-info-value"><%= table.table_name %></div>
+            <div class="table-info-label"><%= t('dbdoc.physical_table_name') %></div>
+            <div class="table-info-value"><%= table.physical_table_name %></div>
+          </div>
+          <div class="col-md-4 col-12 table-info-col">
+            <div class="table-info-label"><%= t('dbdoc.created_by') %></div>
+            <div class="table-info-value"><%= table.created_by %></div>
+            <div class="table-info-label"><%= t('dbdoc.created_at') %></div>
+            <div class="table-info-value"><%= table.created_at&.strftime('%Y-%m-%d %H:%M:%S') %></div>
+          </div>
+          <div class="col-md-4 col-12 table-info-col">
+            <div class="table-info-label"><%= t('dbdoc.updated_by') %></div>
+            <div class="table-info-value"><%= table.updated_by %></div>
+            <div class="table-info-label"><%= t('dbdoc.updated_at') %></div>
+            <div class="table-info-value"><%= table.updated_at&.strftime('%Y-%m-%d %H:%M:%S') %></div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-12">
+            <div class="table-info-label mb-1"><%= t('dbdoc.remarks') %></div>
+            <div class="table-info-value"><%= table.description %></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/dbdoc_engine/home/partials/_table_section.html.erb

@@ -0,0 +1,48 @@
+<!-- Group section: displays a table and its columns, styled with the group's color -->
+<div class='bg-white rounded-1 shadow-sm mb-4 group-section' style='border-left: 4px solid <%= group.group_color %>;'>
+  <!-- Group header row, clickable to toggle fields visibility -->
+  <div class='d-flex align-items-center justify-content-between py-2 px-3 shadow-sm group-header' data-action='click->table-details#toggleFieldsHeader'>
+    <div class='main-left'>
+      <div class='d-flex align-items-center me-3 group-header-left'>
+        <!-- Badge showing the number of columns, with semi-transparent background in group color -->
+        <div class='badge d-inline-flex align-items-center justify-content-center rounded-circle ms-2 fw-bold group-count-badge'
+             style='background-color: rgba(<%= group.group_color.delete('#').scan(/../).map{|h| h.to_i(16)}.join(', ') %>, 0.3);
+                    color: <%= group.group_color %>;'>
+          <%= columns_count %>
+        </div>
+      </div>
+      <!-- Table name (logical name) -->
+      <span class='group-name'><%= table.table_name %></span>
+    </div>
+    <!-- Button to toggle the visibility of the columns/fields -->
+    <button class='border-0 rounded-pill fw-medium fs-7 py-1 px-4 view-button active'>
+      <%= t('dbdoc.view') %>
+    </button>
+  </div>
+  <!-- Group content: the list of columns for this table, initially visible -->
+  <div class='group-content active' data-table-details-target='fieldsContent'>
+  <div class='table-responsive'>
+    <table class='table mb-0 fs-6'>
+      <thead class='table-secondary bg-light'>
+        <!-- Render the table header row for columns -->
+        <%= render 'dbdoc_engine/home/partials/column_headers' %>
+      </thead>
+      <tbody>
+        <% if columns_count == 0 %>
+          <!-- Show message if there are no columns in this table -->
+          <tr>
+            <td colspan="8" class='no-tables-message ps-4 text-secondary'>
+              <%= t('dbdoc.no_tables_created_in_this_group_yet') %>
+            </td>
+          </tr>
+        <% else %>
+          <!-- Render each column row for this table -->
+          <% table.db_design_dynamic_columns.each do |column| %>
+            <%= render 'dbdoc_engine/home/partials/column_row', column: column, group: group %>
+          <% end %>
+        <% end %>
+      </tbody>
+    </table>
+    </div>
+  </div>
+</div>

data/app/views/dbdoc_engine/home/table_details.html.erb

@@ -0,0 +1,9 @@
+<div class='table-details-content' data-controller='table-details'>
+  <div class='table-detains-width py-4 pe-4'>
+    <%= render 'dbdoc_engine/home/partials/table_information_section', group: @group, table: @table %>
+    <div style="margin-bottom: 20px;"></div>
+    <div class='shadow rounded-3 main-content-body'>
+      <%= render 'dbdoc_engine/home/partials/table_section', group: @group, table: @table, columns_count: @columns_count %>
+    </div>
+  </div>
+</div>

data/app/views/dbdoc_engine/schema_diagram/index.html.erb

@@ -0,0 +1,102 @@
+<div class="container-fluid py-2 px-3" data-controller="schema-diagram">
+  <div class="card mb-2">
+    <div class="card-header head-schema ps-1">
+      <h4 class="mb-0"><%= t('dbdoc.database_schema_diagram') %></h4>
+    </div>
+    <div class="card-body">
+      <div class="row align-items-center">
+        <div class="col-md-5 mb-2 mb-md-0 ps-0">
+          <label for="group-select" class="lable-schema form-label mb-0"><%= t('dbdoc.filter_by_group') %> </label>
+          <select id="group-select"
+            data-schema-diagram-target="groupSelect"
+            class="dropdown-schema form-select mt-1">
+            <option value="all"><%= t('dbdoc.all_groups_highlight') %></option>
+            <% @groups.each do |group| %>
+              <% if group.db_design_dynamic_tables.any? { |table| table.db_design_dynamic_columns.any? } %>
+                <option value="<%= group.id %>"><%= t('dbdoc.highlight') %><%= group.group_name %></option>
+              <% end %>
+            <% end %>
+          </select>
+        </div>
+        <div class="col-md-7 text-md-end">
+          <div class="btn-group" role="group">
+            <button type="button" data-schema-diagram-target="zoomIn" class="btn rounded-circle p-2 mx-1 diagram-btn">
+              <i class="bi bi-plus fs-5"></i>
+            </button>
+            <button type="button" data-schema-diagram-target="zoomOut" class="btn rounded-circle p-2 mx-1 diagram-btn">
+              <i class="bi bi-dash fs-5"></i>
+            </button>
+            <button type="button" data-schema-diagram-target="resetView" class="btn rounded-circle p-2 mx-1 diagram-btn">
+              <i class="bi bi-arrow-repeat fs-5"></i>
+            </button>
+          </div>
+          <!-- Add download buttons below the zoom controls -->
+          <div class="btn-group" role="group">
+            <button data-action="click->schema-diagram#downloadPNG" class="btn rounded-circle p-2 mx-1 diagram-btn" title="Download PNG">
+              <i class="bi bi-filetype-png fs-5"></i>
+            </button>
+            <button data-action="click->schema-diagram#downloadPDF" class="btn rounded-circle p-2 mx-1 diagram-btn" title="Download PDF">
+              <i class="bi bi-filetype-pdf fs-5"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div id="schema-diagram"
+       data-schema-diagram-target="diagram"
+       class="bg-white border rounded shadow p-3 mb-4"
+       style="min-height: 500px; overflow: auto; cursor: grab; position: relative;">
+    <div class="d-flex justify-content-center align-items-center h-100">
+      <span class="text-muted fst-italic"><%= t('dbdoc.Loading_schema_diagram') %></span>
+    </div>
+  </div>
+
+  <!-- Updated Legend Section -->
+  <div class="shadow rounded-3 main-content-body mb-3 ms-0">
+    <div class="table-information-below shadow rounded-3">
+      <div class="d-flex align-items-center justify-content-between py-2 px-3 shadow-sm group-header">
+        <div class="main-left">
+          <div class="d-flex align-items-center me-3 group-header-left">
+            <div class="badge d-inline-flex align-items-center justify-content-center rounded-circle ms-2 fw-bold group-count-badge"
+                 style="background-color: rgba(83, 102, 160, 0.3); color: #5366A0; width: 23px; height: 22px;">
+              <i class="bi bi-info-circle-fill" style="color: #5366A0; font-size: 14px;"></i>
+            </div>
+          </div>
+          <span class="group-name"><%= t('dbdoc.Legend') %></span>
+        </div>
+      </div>
+      <div class="group-content active">
+        <div class="container-fluid ps-4">
+          <div class="row">
+            <div class="col-md-8 col-12">
+              <div class="table-info-label mb-2"><%= t('dbdoc.tablegroups') %></div>
+              <div class="d-flex flex-wrap gap-3">
+                <% @groups.each do |group| %>
+                  <span class="badge rounded-pill px-3 py-2 me-2 mb-2 text-white" style="background-color: <%= group.group_color %>;">
+                    <%= group.group_name %>
+                  </span>
+                <% end %>
+              </div>
+              <div class="table-info-value mt-2">
+                <small class="text-muted">
+                  <i class="fa fa-info-circle"></i>
+                  <%= t('dbdoc.legend_info') %>
+                </small>
+              </div>
+            </div>
+            <div class="col-md-4 col-12">
+              <div class="table-info-label mb-2"><%= t('dbdoc.column_attributes') %></div>
+              <div class="d-flex flex-column gap-2">
+                <div class="table-info-value"><span>🔑</span><%= t('dbdoc.PK') %></div>
+                <div class="table-info-value"><span>🔗</span><%= t('dbdoc.FK') %></div>
+                <div class="table-info-value"><span><small>NN</small></span><%= t('dbdoc.NN') %></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/dbdoc_engine/shared/_admin_header.html.erb

@@ -0,0 +1,78 @@
+<nav class='navbar navbar-expand-lg navbar-dark shadow-sm admin-navbar'>
+  <div class='container-fluid'>
+    <!-- Admin Panel Brand -->
+    <a class='navbar-brand fw-bold text-white d-flex align-items-center p-2 <%= 'active' if controller_path == 'dbdoc_engine/admin/dashboard' %>' href='<%= admin_dashboard_path %>'>
+      <i class='bi bi-person-fill-gear me-2'></i><%= t('dbdoc.admin_panel') %>
+    </a>
+
+    <!-- Navbar Toggler Button for Mobile View -->
+    <button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#adminNavbar'>
+      <span class='navbar-toggler-icon'></span>
+    </button>
+
+    <div class='collapse navbar-collapse' id='adminNavbar'>
+      <!-- Left-aligned Navigation Links -->
+      <ul class='navbar-nav'>
+        <% if current_user && current_user.admin_or_higher? %>
+          <li class='nav-item ms-1'>
+            <%= link_to t('dbdoc.table_groups_header'), dbdoc_engine.admin_db_design_table_groups_path, class: "nav-link #{admin_nav_active?('db_design_table_groups') ? 'active' : ''}" %>
+          </li>
+        <% end %>
+        <li class='nav-item ms-1'>
+          <%= link_to t('dbdoc.dynamic_tables_header'), dbdoc_engine.admin_db_design_dynamic_tables_path, class: "nav-link #{admin_nav_active?('db_design_dynamic_tables') ? 'active' : ''}" %>
+        </li>
+      </ul>
+
+      <!-- Right-aligned Controls -->
+      <div class='nav-controls ms-auto d-flex align-items-center'>
+  <!-- Back to Main Project Button (pill-shaped, left of home button) -->
+  <a href="/"
+     class="back-main-btn d-flex align-items-center justify-content-center fw-bold border-0 me-2"
+     title="<%= t('dbdoc.back_to_main_project') %>"
+     style="margin-right:10px;">
+    <%= t('dbdoc.back_to_main_project') %>
+  </a>
+
+  <!-- Home Button with Circle Background -->
+  <%= link_to dbdoc_engine.root_path, class: 'home-circle-btn d-flex align-items-center justify-content-center me-2', title: t('dbdoc.home') do %>
+    <i class='bi bi-house-door homebread'></i>
+  <% end %>
+
+  <!-- Language Toggle Button -->
+  <%= render 'dbdoc_engine/shared/language_button' %>
+
+        <!-- User Role Icon with Circle Background -->
+        <% if current_user %>
+          <div class='dropdown role-dropdown'>
+            <button class='d-flex align-items-center justify-content-center rounded-circle border-0 p-0 position-relative overflow-hidden role-circle-btn dropdown-toggle' type='button' id='userDropdown' data-bs-toggle='dropdown' aria-expanded='false'>
+              <!-- Blue background circle with chess image inside -->
+              <span class='right-avatar-img-bg d-flex align-items-center justify-content-center'>
+                <% if current_user.role == 'superadmin' %>
+                  <img src='/dbdoc_engine_assets/images/king_chess_head.png' alt='Superadmin' class='rounded-circle mt-2 right-avatar' />
+                <% elsif current_user.role == 'admin' %>
+                  <img src='/dbdoc_engine_assets/images/queen_chess_head.png' alt='Admin' class='rounded-circle mt-2 right-avatar' />
+                <% else %>
+                  <img src='/dbdoc_engine_assets/images/camel_chess_head.png' alt='User' class='rounded-circle mt-2 right-avatar' />
+                <% end %>
+              </span>
+            </button>
+            <ul class='dropdown-menu dropdown-menu-end' aria-labelledby='userDropdown'>
+              <li>
+                <%= button_to dbdoc_engine.logout_path, method: :delete, form: { data: { turbo: false } }, class: 'dropdown-item text-danger px-2 py-1 log-out-text' do %>
+                  <i class='bi bi-box-arrow-right me-1'></i>
+                  <%= t('dbdoc.logout') %>
+                <% end %>
+              </li>
+            </ul>
+          </div>
+        <% else %>
+          <div class='nav-item'>
+            <%= link_to dbdoc_engine.login_path, class: 'nav-link' do %>
+              <i class='bi bi-box-arrow-in-right me-1'></i><%= t('dbdoc.login') %>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</nav>