dbdoc_engine 0.1.0

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

@@ -0,0 +1,94 @@
+<div class='w-100 header pe-4'>
+  <!-- Top Strip -->
+  <div class='d-flex justify-content-between align-items-center py-1 px-3 ms-3 mt-2 top-strip'>
+    <div class='d-flex align-items-center left-section'>
+      <div class='d-flex flex-column'>
+        <!-- Project Title and Subtitle -->
+        <h3 class='fs-4 fw-bold retail-database m-0'><%= t('dbdoc.dbdocs') %></h3>
+        <span class='fw-bold database-documentation'><small><%= t('dbdoc.databaseproject') %><small></span>
+      </div>
+    </div>
+    <div class='d-flex align-items-center right-section'>
+    <!-- Home Button (circular, left of language 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>
+
+    <!-- Language Toggle Button -->
+    <%= render 'dbdoc_engine/shared/language_button' %>
+
+    <% if current_user.admin_or_higher? %>
+      <!-- Admin Button: Always circular with gear-person icon -->
+      <%= link_to(user_signed_in? ? dbdoc_engine.admin_dashboard_path : dbdoc_engine.login_path,
+        class: 'admin-circle-btn d-flex align-items-center justify-content-center rounded-circle border-0 p-0 me-2',
+        title: t('dbdoc.admin')) do %>
+        <i class='bi bi-person-fill-gear'></i>
+      <% end %>
+    <% end %>    
+
+      <!-- User Role Icon with Dropdown for Logout (only if logged in) -->
+      <% if user_signed_in? %>
+        <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 remains, but icon is now an image -->
+            <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>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Bottom Strip with Navigation Buttons -->
+  <div data-controller='active-button'>
+    <div class='container-fluid buttonsinheader'>
+      <div class='row align-items-center'>
+        <div class='withback col d-flex justify-content-between align-items-center mb-2 ms-3 mt-2 pe-3'>
+          <!-- Left side buttons -->
+          <div class='d-flex gap-1 middle-buttons'>
+            <!-- Wiki Button -->
+            <%= link_to dbdoc_engine.root_path, class: 'd-flex align-items-center fw-bold btn px-3 py-2 rounded-3 nav-button wiki-button' do %>
+              <%= image_tag 'dbdoc_engine/wiki.svg', alt: 'Wiki', class: 'me-2 button-icon' %>
+              <%= t('dbdoc.wiki') %>
+            <% end %>
+            <%= link_to dbdoc_engine.schema_diagram_path, class: 'd-flex align-items-center fw-bold btn px-3 py-2 rounded-3 nav-button diagram-button' do %>
+              <%= image_tag 'dbdoc_engine/diagram.svg', alt: 'Diagram', class: 'me-2 button-icon' %>
+              <%= t('dbdoc.diagram') %>
+            <% end %>
+            <!-- Changelog Button -->
+            <%= link_to dbdoc_engine.changelogs_path, class: 'd-flex align-items-center fw-bold btn px-3 py-2 rounded-3 nav-button changelog-button text-decoration-none' do %>
+              <%= image_tag 'dbdoc_engine/changelog.svg', alt: 'Changelog', class: 'me-2 button-icon' %>
+              <%= t('dbdoc.changelog') %>
+            <% end %>
+          </div>
+          <!-- Back Button (right-aligned) -->
+          <%
+=begin%>
+          <%= link_to :back, class: 'btn admin-style-button back-button' do %>
+            <i class='bi bi-arrow-left'></i> <%= t('dbdoc.back_header') %>
+          <% end %>
+<%
+=end%>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,3 @@
+<script>
+  window.Translations = <%= raw js_translations %>;
+</script>

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

@@ -0,0 +1,14 @@
+
+<div data-controller="language" class="language-toggle-container me-2">
+  <button
+    class="btn language-toggle"
+    type="button"
+    data-action="click->language#toggleLanguage"
+    data-language-target="button">
+    <% if I18n.locale == :ja %>
+      <img src="/dbdoc_engine_assets/images/japan_circle.png" alt="日本語" class="language-japan-flag">
+    <% else %>
+      <img src="/dbdoc_engine_assets/images/uk_circle_transparent.png" alt="English" class="language-flag">
+    <% end %>
+  </button>
+</div>

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

@@ -0,0 +1,128 @@
+<div id='sidebar' class='sidebar position-relative vh-100 overflow-hidden transition-all'
+     data-controller='sidebar'
+     data-sidebar-target='sidebar'
+     data-arrow-down-path='<%= asset_path('dbdoc_engine/arrowdown.svg') %>'
+     data-arrow-horizontal-path='<%= asset_path('dbdoc_engine/arrowhorizontal.svg') %>'
+     data-current-path='<%= request.path %>'>
+  <!-- Sidebar content container with vertical scrolling -->
+  <div class='sidebar-content bg-transparent p-3 w-100 vh-100 overflow-auto'>
+    <!-- Sidebar Header with logo and title -->
+   
+    <div class='sidebar-header mb-4 d-flex align-items-center'>
+      <img src='/dbdoc_engine_assets/images/dblogo.svg' alt='Database Logo' class='logodb'>
+      <div class='ms-2 text-container'>
+          <a href="/dbdoc" class="text-decoration-none"><div class='title text-white fs-6 fw-bold'><%= t('dbdoc.dbdocs') %></div></a>
+      </div>
+    </div>
+
+    <!-- Search Bar with icon and input field -->
+    <div class='search-container rounded-2 mb-2 d-flex align-items-center'>
+      <%= image_tag 'dbdoc_engine/search.svg', alt: 'Search Icon' %>
+      <input type='text' id='searchInput' placeholder='<%= t('dbdoc.search') %>'
+             data-action='input->sidebar#search'
+             data-sidebar-target='searchInput'>
+    </div>
+
+    <!-- Group By Control with toggle functionality -->
+    <div class='group-by-container border-0 rounded-2 mb-3 p-2 px-3 d-flex align-items-center justify-content-between'>
+      <%= image_tag 'dbdoc_engine/group_bu.svg', alt: 'Group By Icon' %>
+      <span class='text-white flex-grow-1 groupby-text'><%= t('dbdoc.groupby') %></span>
+      <button class='border-0 p-0 bg-transparent border-0 p-0 d-flex align-items-center' id='toggle-groups' data-action='click->sidebar#toggleGroupList'>
+        <%= image_tag 'dbdoc_engine/double_arrow.svg', alt: 'Expand/Collapse Icon' %>
+      </button>
+    </div>
+
+    <!-- Database Categories Title -->
+    <div class='fw-semibold fs-6 mt-3 mb-3 database-categories-title'>
+      <%= t('dbdoc.databasecategories') %>
+    </div>
+
+    <!-- Group List Container - Main navigation hierarchy -->
+    <div id='groupList' data-sidebar-target='groupList'>
+      <% groups.each do |group| %>
+        <div class='group' data-group-id='<%= group.id %>'>
+          <div class='group-row'>
+            <!-- Group Toggle Button with color-coded arrow -->
+            <button class='border-0 bg-transparent d-inline-flex align-items-center p-1 group-toggle' data-action='click->sidebar#toggleGroup'>
+              <svg fill='<%= group.group_color %>' viewBox='0 0 64 64' height='10' width='10'
+                   xmlns='http://www.w3.org/2000/svg' alt='Expand' class='arrow-image'>
+                <path d='M52.666 28.5385C55.3327 30.0718 55.3327 33.9302 52.666 35.4718L17.9993 55.4635C15.341 56.9968 11.9993 55.0802 11.9993 51.9968V12.0052C11.9993 8.93018 15.3327 7.00518 17.9993 8.53852L52.666 28.5385Z'
+                      fill='<%= group.group_color %>'></path>
+              </svg>
+            </button>
+
+            <!-- Group Heading Text - Clickable for navigation -->
+            <span class='group-text group-heading' data-action='click->sidebar#navigateToGroup'>
+              <%= group.group_name %>
+            </span>
+          </div>
+
+          <!-- Table List Container - Initially Hidden -->
+          <div class='table-list hidden'>
+            <% group.db_design_dynamic_tables.each do |table| %>
+              <div class='ps-3 my-1 db-table' data-table-id='<%= table.id %>'>
+                <div class='table-row'>
+
+                  <!-- Table Toggle Button with matching group color -->
+                  <button class='border-0 bg-transparent d-inline-flex align-items-center p-1 group-toggle table-toggle' data-action='click->sidebar#toggleTable'>
+                    <svg fill='<%= group.group_color %>' viewBox='0 0 64 64' height='10' width='10'
+                         xmlns='http://www.w3.org/2000/svg' alt='Expand' class='arrow-image'>
+                      <path d='M52.666 28.5385C55.3327 30.0718 55.3327 33.9302 52.666 35.4718L17.9993 55.4635C15.341 56.9968 11.9993 55.0802 11.9993 51.9968V12.0052C11.9993 8.93018 15.3327 7.00518 17.9993 8.53852L52.666 28.5385Z'
+                            fill='<%= group.group_color %>'></path>
+                    </svg>
+                  </button>
+
+                  <!-- Table Name - Clickable for navigation -->
+                  <span class='table-name group-text'
+                        data-original-table-name='<%= table.table_name %>'
+                        data-physical-table-name='<%= table.physical_table_name %>'
+                        data-action='click->sidebar#navigateToTable'>
+                    <%= table.table_name %>
+                  </span>
+                </div>
+
+                <!-- Column List Container - Initially Hidden -->
+                <div class='column-list hidden'>
+                  <% table.db_design_dynamic_columns.each do |column| %>
+                    <div class='column'>
+                      <div class='column-row'>
+
+                        <!-- Column Icon with matching group color -->
+                        <svg viewBox='0 0 12 10' height='10' width='12'
+                             xmlns='http://www.w3.org/2000/svg' class='dbdocs-icon'>
+                          <path fill-rule='evenodd' clip-rule='evenodd'
+                                d='M9.43182 0.909091H1.81818C1.3161 0.909091 0.909091 1.3161 0.909091 1.81818V8.18182C0.909091 8.6839 1.3161 9.09091 1.81818 9.09091H9.43182C9.9339 9.09091 10.3409 8.6839 10.3409 8.18182V1.81818C10.3409 1.3161 9.9339 0.909091 9.43182 0.909091ZM1.81818 0C0.814028 0 0 0.814028 0 1.81818V8.18182C0 9.18597 0.814028 10 1.81818 10H9.43182C10.436 10 11.25 9.18597 11.25 8.18182V1.81818C11.25 0.814028 10.436 0 9.43182 0H1.81818Z'
+                                fill='<%= group.group_color %>' />
+                          <path d='M0 1.81818C0 0.814028 0.814028 0 1.81818 0H9.43182C10.436 0 11.25 0.814028 11.25 1.81818V2.5H0V1.81818Z'
+                                fill='<%= group.group_color %>' />
+                          <rect x='2.99994' y='2.5' width='2.22222' height='6.58889'
+                                fill='<%= group.group_color %>' />
+                        </svg>
+
+                        <!-- Column Name with metadata -->
+                        <span class='column-name group-text'
+                              data-original-column-name='<%= column.column_name %>'
+                              data-physical-column-name='<%= column.physical_column_name %>'
+                              data-data-type='<%= column.data_type %>'>
+                          <%= column.column_name %>
+                        </span>
+                      </div>
+                    </div>
+                  <% end %>
+                </div>
+              </div>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Sidebar Resizer with Toggle Button -->
+  <div class='position-absolute top-0 end-0 sidebar-resizer' data-sidebar-target='resizer'>
+    <button id='toggleSidebar' class='position-absolute top-50 end-0 d-flex align-items-center justify-content-center border-0 p-0 sidebar-toggle-button' data-sidebar-target='toggleButton'
+            data-action='click->sidebar#toggleSidebar'>
+      <%= image_tag 'dbdoc_engine/arrowleft.svg', alt: 'Toggle Sidebar' %>
+    </button>
+  </div>
+</div>

data/app/views/kaminari/dbdoc_engine/_first_page.html.erb

@@ -0,0 +1,3 @@
+<li class="page-item">
+  <%= link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote, class: 'page-link' %>
+</li>

data/app/views/kaminari/dbdoc_engine/_gap.html.erb

@@ -0,0 +1,3 @@
+<li class='page-item disabled'>
+  <%= link_to raw(t 'views.pagination.truncate'), '#', class: 'page-link' %>
+</li>

data/app/views/kaminari/dbdoc_engine/_last_page.html.erb

@@ -0,0 +1,3 @@
+<li class="page-item">
+  <%= link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, remote: remote, class: 'page-link' %>
+</li>

data/app/views/kaminari/dbdoc_engine/_next_page.html.erb

@@ -0,0 +1,3 @@
+<li class="page-item">
+  <%= link_to_unless current_page.last?, raw(t 'views.pagination.next'), url, rel: 'next', remote: remote, class: 'page-link' %>
+</li>

data/app/views/kaminari/dbdoc_engine/_page.html.erb

@@ -0,0 +1,9 @@
+<% if page.current? %>
+  <li class="page-item active">
+    <%= content_tag :a, page, data: { remote: remote }, rel: page.rel, class: 'page-link' %>
+  </li>
+<% else %>
+  <li class="page-item">
+    <%= link_to page, url, remote: remote, rel: page.rel, class: 'page-link' %>
+  </li>
+<% end %>

data/app/views/kaminari/dbdoc_engine/_paginator.html.erb

@@ -0,0 +1,17 @@
+<%= paginator.render do %>
+  <nav>
+    <ul class="pagination">
+      <%= first_page_tag unless current_page.first? %>
+      <%= prev_page_tag unless current_page.first? %>
+      <% each_page do |page| %>
+        <% if page.left_outer? || page.right_outer? || page.inside_window? %>
+          <%= page_tag page %>
+        <% elsif !page.was_truncated? -%>
+          <%= gap_tag %>
+        <% end %>
+      <% end %>
+      <%= next_page_tag unless current_page.last? %>
+      <%= last_page_tag unless current_page.last? %>
+    </ul>
+  </nav>
+<% end %>

data/app/views/kaminari/dbdoc_engine/_prev_page.html.erb

@@ -0,0 +1,3 @@
+<li class="page-item">
+  <%= link_to_unless current_page.first?, raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote, class: 'page-link' %>
+</li>

data/app/views/layouts/dbdoc_engine/application.html.erb

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang='<%= @html_lang %>'>
+  <head>
+    <%# Basic meta tags and page title %>
+    <title><%= content_for(:title) || 'dbdoc' %></title>
+    <meta name='viewport' content='width=device-width,initial-scale=1'>
+    <meta name='apple-mobile-web-app-capable' content='yes'>
+    <meta name='mobile-web-app-capable' content='yes'>
+    <meta name='turbo-prefetch' content='false'>
+    <%# Security and Rails-specific tags %>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%# Additional head content if provided %>
+    <%= yield :head %>
+    <%# PWA manifest support (commented out) %>
+    <%#= tag.link rel: 'manifest', href: pwa_manifest_path(format: :json) %>
+    <%# Favicon and icon resources %>
+    <link rel='icon' href='/dbdoc_engine_assets/images/logo.png' type='image/png'>
+    <link rel='icon' href='/dbdoc_engine_assets/images/logo.svg' type='image/svg+xml'>
+    <link rel='apple-touch-icon' href='/icon.png'>
+    <%# Google Fonts - Noto Sans JP %>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <%# Stylesheet includes %>
+    <%#= stylesheet_link_tag :app, 'data-turbo-track': 'reload' %>
+    <link href='<%= asset_path('dbdoc_engine/admin.css') %>' rel='stylesheet'>
+    <link href='<%= asset_path('dbdoc_engine/loading_spinner.css') %>' rel='stylesheet'>
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+
+    <!-- Bootstrap Bundle JS (includes Popper) -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+
+    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css'>
+    <link href='<%= asset_path('dbdoc_engine/dbdoc_application.css') %>' rel='stylesheet'>
+    <link href='<%= asset_path('dbdoc_engine/admin_header.css') %>' rel='stylesheet'>
+    <link href='<%= asset_path('dbdoc_engine/dashboard.css') %>' rel='stylesheet'>
+    <link href='<%= asset_path('dbdoc_engine/login.css') %>' rel='stylesheet'>
+    <link href='<%= asset_path('dbdoc_engine/header.css') %>' rel='stylesheet'>
+    <link href='<%= asset_path('dbdoc_engine/table_details.css') %>' rel='stylesheet'>
+    <%# JavaScript includes %>
+    <script src='https://cdn.jsdelivr.net/npm/chart.js'></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <%= javascript_importmap_tags %>
+  </head>
+  <body data-locale="<%= I18n.locale %>" data-controller="notification">
+    <!-- Loading spinner overlay - initially hidden -->
+    <div class='loading-spinner' data-controller='loading-spinner' data-loading-spinner-visible='false'>
+      <div class='spinner-content'>
+        <!-- Custom SVG Loader -->
+        <svg class='pl' width='80' height='80' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'>
+          <circle class='pl__ring1' cx='64' cy='64' r='60' fill='none' stroke='#364380' stroke-width='8' transform='rotate(-90,64,64)' stroke-linecap='round' stroke-dasharray='377 377' stroke-dashoffset='-376.4'></circle>
+          <circle class='pl__ring3' cx='64' cy='64' r='46' fill='none' stroke='#5366A0' stroke-width='6' transform='rotate(-90,64,64)' stroke-linecap='round' stroke-dasharray='289 289' stroke-dashoffset='-288.6'></circle>
+          <circle class='pl__ring5' cx='64' cy='64' r='36' fill='none' stroke='#758FC6' stroke-width='4' transform='rotate(-90,64,64)' stroke-linecap='round' stroke-dasharray='226.2 226.2' stroke-dashoffset='-225.8'></circle>
+        </svg>
+        <p>Loading, please wait...</p>
+      </div>
+    </div>
+    <%# Admin header partial %>
+    <% unless controller_name == 'db_doc_sessions' && action_name == 'new' %>
+      <%= render 'dbdoc_engine/shared/admin_header' %>
+    <% end %>
+    <%# Main content %>
+    <%= yield %>
+    <%# Flash messages with auto-hide functionality %>
+    <% if flash[:notice] || flash[:alert] %>
+      <div id='flash-message' class='alert <%= flash[:notice] ? 'alert-success' : 'alert-danger' %> position-fixed top-0 end-0 m-3 p-3 shadow'>
+        <%= flash[:notice] || flash[:alert] %>
+      </div>
+      <script>
+        // Auto-hide flash messages after 3 seconds with fade-out effect
+        setTimeout(function() {
+          let flashMessage = document.getElementById('flash-message');
+          if (flashMessage) {
+            flashMessage.style.transition = 'opacity 0.5s';
+            flashMessage.style.opacity = '0';
+            setTimeout(() => flashMessage.remove(), 500);
+          }
+        }, 3000);
+      </script>
+    <% end %>
+    <%# JavaScript translations for localization %>
+    <%= render 'dbdoc_engine/shared/js_translations' %>
+    <meta id='js-translations' data-translations='<%= js_translations %>'>
+    <script>
+      // Set up event listener for Turbo navigation
+      document.addEventListener('turbo:load', function() {
+        // Find all language controllers and update their display
+        const langControllers = document.querySelectorAll('[data-controller="language"]');
+        langControllers.forEach(element => {
+          const controller = window.Stimulus.getControllerForElementAndIdentifier(element, 'language');
+          if (controller) {
+            controller.updateButtonDisplay();
+          }
+        });
+      });
+    </script>
+    <footer class="dbdoc-footer">
+      <div class="footer-content">
+        <span class="footer-version">v1.0.0</span>
+        <!-- You can add more footer content here in the future -->
+      </div>
+    </footer>
+  </body>
+</html>

data/app/views/layouts/dbdoc_engine/header.html.erb

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang='<%= @html_lang %>'>
+  <head>
+    <%# Basic meta tags and page title %>
+    <title><%= content_for(:title) || 'dbdoc' %></title>
+    <meta name='viewport' content='width=device-width,initial-scale=1'>
+    <meta name='apple-mobile-web-app-capable' content='yes'>
+    <meta name='mobile-web-app-capable' content='yes'>
+    <meta name='turbo-prefetch' content='false'>
+    <%# Security and Rails-specific tags %>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%# Additional head content if provided %>
+    <%= yield :head %>
+    <%# PWA manifest support (commented out) %>
+    <%#= tag.link rel: 'manifest', href: pwa_manifest_path(format: :json) %>
+    <%# Favicon and icon resources %>
+    <link rel='icon' href='/dbdoc_engine_assets/images/logo.png' type='image/png'>
+    <link rel='icon' href='/dbdoc_engine_assets/images/logo.svg' type='image/svg+xml'>
+    <link rel='apple-touch-icon' href='/icon.png'>
+    <%# Google Fonts - Noto Sans JP %>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <%# Stylesheet includes %>
+    <%#= stylesheet_link_tag :app, 'data-turbo-track': 'reload' %>
+    <%#= stylesheet_link_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
+    <%# External CSS libraries %>
+    <!-- Popper.js (required by Bootstrap) -->
+<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
+
+<!-- Bootstrap (after Popper) -->
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
+    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css'>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css'>
+    <%# Application-specific stylesheets %>
+    <link href='<%= asset_path('dbdoc_engine/dbdoc_application.css') %>' rel='stylesheet'>
+    <link href='<%= asset_path('dbdoc_engine/header.css') %>' rel='stylesheet'>
+    <link href='<%= asset_path('dbdoc_engine/sidebar.css') %>' rel='stylesheet'>
+    <link href='<%= asset_path('dbdoc_engine/ecommerce.css') %>' rel='stylesheet'>
+    <link href='<%= asset_path('dbdoc_engine/group_details.css') %>' rel='stylesheet'>
+    <link href='<%= asset_path('dbdoc_engine/table_details.css') %>' rel='stylesheet'>
+    <link href='<%= asset_path('dbdoc_engine/changelog.css') %>' rel='stylesheet'>
+    <link href='<%= asset_path('dbdoc_engine/loading_spinner.css') %>' rel='stylesheet'>
+    <link href='<%= asset_path('dbdoc_engine/dashboard.css') %>' rel='stylesheet'>
+    <link href='<%= asset_path('dbdoc_engine/schema_diagram.css') %>' rel='stylesheet'>
+    <%# JavaScript includes %>
+    <script src="https://cdn.jsdelivr.net/npm/viz.js@2.1.2/viz.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/viz.js@2.1.2/full.render.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <%= javascript_importmap_tags %>
+    <%# Bootstrap commented out for reference %>
+    <%#= stylesheet_link_tag 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css', integrity: 'sha384-...', crossorigin: 'anonymous' %>
+    <%#= javascript_include_tag 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js', integrity: 'sha384-...', crossorigin: 'anonymous', defer: true %>
+  </head>
+  <body data-locale="<%= I18n.locale %>" data-controller="notification">
+    <!-- Loading spinner overlay - initially hidden -->
+    <div class='loading-spinner' data-controller='loading-spinner' data-loading-spinner-visible='false'>
+      <div class='spinner-content'>
+        <!-- Custom SVG Loader -->
+        <svg class='pl' width='80' height='80' viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'>
+          <circle class='pl__ring1' cx='64' cy='64' r='60' fill='none' stroke='#364380' stroke-width='8' transform='rotate(-90,64,64)' stroke-linecap='round' stroke-dasharray='377 377' stroke-dashoffset='-376.4'></circle>
+          <circle class='pl__ring3' cx='64' cy='64' r='46' fill='none' stroke='#5366A0' stroke-width='6' transform='rotate(-90,64,64)' stroke-linecap='round' stroke-dasharray='289 289' stroke-dashoffset='-288.6'></circle>
+          <circle class='pl__ring5' cx='64' cy='64' r='36' fill='none' stroke='#758FC6' stroke-width='4' transform='rotate(-90,64,64)' stroke-linecap='round' stroke-dasharray='226.2 226.2' stroke-dashoffset='-225.8'></circle>
+        </svg>
+        <p>Loading, please wait...</p>
+      </div>
+    </div>
+    <%# Main layout with sidebar and content area %>
+    <div class='d-flex'>
+      <%# Sidebar component %>
+      <%= render 'dbdoc_engine/shared/sidebar', groups: @groups %>
+      <%# Main content area with scrollable container %>
+      <div class='right-content-wrapper d-flex flex-column flex-grow-1' style='overflow-y: scroll; height: 100vh;'>
+        <%# Header component %>
+        <%= render 'dbdoc_engine/shared/header' %>
+        <%# Flash messages with auto-hide functionality %>
+        <% if flash[:notice] || flash[:alert] %>
+          <div id='flash-message' class='alert <%= flash[:notice] ? 'alert-success' : 'alert-danger' %> position-fixed top-0 end-0 m-3 p-3 shadow'>
+            <%= flash[:notice] || flash[:alert] %>
+          </div>
+          <script>
+            // Auto-hide flash messages after 3 seconds with fade-out effect
+            setTimeout(function() {
+              let flashMessage = document.getElementById('flash-message');
+              if (flashMessage) {
+                flashMessage.style.transition = 'opacity 0.5s';
+                flashMessage.style.opacity = '0';
+                setTimeout(() => flashMessage.remove(), 500);
+              }
+            }, 3000);
+          </script>
+        <% end %>
+        <%# Main content yield %>
+        <div class='main-content'>
+          <%= yield %>
+        </div>
+      </div>
+    </div>
+    <footer class="dbdoc-footer">
+  <div class="footer-content">
+    <span class="footer-version">v1.0.0</span>
+  </div>
+</footer>
+  </body>
+</html>

data/config/importmap.rb

@@ -0,0 +1,11 @@
+# dbdoc_engine/config/importmap.rb
+
+pin_all_from DbdocEngine::Engine.root.join("app/javascript/dbdoc_engine"), under: "dbdoc_engine", to: "dbdoc_engine"
+
+pin "bootstrap", to: "bootstrap.min.js", preload: true
+pin "@popperjs/core", to: "popper.js", preload: true
+pin "@hotwired/turbo-rails", to: "turbo.min.js"
+pin "@hotwired/stimulus", to: "stimulus.min.js"
+pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
+
+pin_all_from DbdocEngine::Engine.root.join("app/javascript/dbdoc_engine/controllers"), under: "dbdoc_engine/controllers"