dbviewer 0.7.10 → 0.7.11

data/app/controllers/concerns/dbviewer/database_operations/data_export.rb

@@ -0,0 +1,31 @@
+require "csv"
+
+module Dbviewer
+  module DatabaseOperations
+    module DataExport
+      extend ActiveSupport::Concern
+
+      # Export table data to CSV
+      def export_table_to_csv(table_name, query_params = nil, include_headers = true)
+        records = database_manager.table_query_operations.table_records(table_name, query_params)
+
+        CSV.generate do |csv|
+          csv << records.columns if include_headers
+
+          record_body = records.rows.map do |row|
+            row.map { |cell| format_csv_value(cell) }
+          end
+          csv.concat(record_body)
+        end
+      end
+
+      private
+
+      # Format cell values for CSV export to handle nil values and special characters
+      def format_csv_value(value)
+        return "" if value.nil?
+        value.to_s
+      end
+    end
+  end
+end

data/app/controllers/concerns/dbviewer/database_operations/database_information.rb

@@ -0,0 +1,54 @@
+module Dbviewer
+  module DatabaseOperations
+    module DatabaseInformation
+      extend ActiveSupport::Concern
+
+      included do
+        helper_method :get_database_name, :get_adapter_name if respond_to?(:helper_method)
+      end
+
+      # Get the name of the current database
+      def get_database_name
+        current_conn_config = Dbviewer.configuration.database_connections[current_connection_key]
+        return current_conn_config[:name] if current_conn_config && current_conn_config[:name].present?
+
+        adapter = database_manager.connection.adapter_name.downcase
+        fetch_database_name(adapter)
+      end
+
+      # Get the name of the current database adapter
+      def get_adapter_name
+        adapter_name = database_manager.connection.adapter_name.downcase
+        adapter_mappings = {
+          /mysql/i => "MySQL",
+          /postgres/i => "PostgreSQL",
+          /sqlite/i => "SQLite",
+          /oracle/i => "Oracle",
+          /sqlserver|mssql/i => "SQL Server"
+        }
+        adapter_mappings.find { |pattern, _| adapter_name =~ pattern }&.last || adapter_name.titleize
+      rescue
+        "Unknown"
+      end
+
+      def fetch_database_name(adapter)
+        case adapter
+        when /mysql/
+          query = "SELECT DATABASE() as db_name"
+          result = database_manager.execute_query(query).first
+          result ? result["db_name"] : "Database"
+        when /postgres/
+          query = "SELECT current_database() as db_name"
+          result = database_manager.execute_query(query).first
+          result ? result["db_name"] : "Database"
+        when /sqlite/
+          # For SQLite, extract the database name from the connection_config
+          database_path = database_manager.connection.pool.spec.config[:database] || ""
+          File.basename(database_path, ".*") || "SQLite Database"
+        else
+          "Database" # Default fallback
+        end
+      end
+    end
+  end
+end

data/app/controllers/concerns/dbviewer/database_operations/datatable_operations.rb

@@ -0,0 +1,37 @@
+module Dbviewer
+  module DatabaseOperations
+    module DatatableOperations
+      extend ActiveSupport::Concern
+
+      # Consolidated method to fetch all datatable-related data in one call
+      # Returns a hash containing all necessary datatable information
+      def fetch_datatable_data(table_name, query_params)
+        columns = fetch_table_columns(table_name)
+
+        total_count = fetch_table_record_count(table_name, query_params.column_filters)
+        records = fetch_table_records(table_name, query_params)
+        metadata = fetch_table_metadata(table_name)
+
+        {
+          columns: columns,
+          records: records,
+          total_count: total_count,
+          total_pages: total_count > 0 ? (total_count.to_f / query_params.per_page).ceil : 0,
+          metadata: metadata,
+          current_page: query_params.page,
+          per_page: query_params.per_page,
+          order_by: query_params.order_by,
+          direction: query_params.direction
+        }
+      end
+
+      def fetch_table_stats(table_name)
+        {
+          table_name: table_name,
+          columns: fetch_table_columns(table_name),
+          metadata: fetch_table_metadata(table_name)
+        }
+      end
+    end
+  end
+end

data/app/controllers/concerns/dbviewer/database_operations/query_operations.rb

@@ -0,0 +1,37 @@
+module Dbviewer
+  module DatabaseOperations
+    module QueryOperations
+      extend ActiveSupport::Concern
+
+      # Prepare the SQL query - either from params or default
+      def prepare_query(table_name, query)
+        query = query.present? ? query.to_s : default_query(table_name)
+
+        # Validate query for security
+        unless ::Dbviewer::Validator::Sql.safe_query?(query)
+          query = default_query(table_name)
+          flash.now[:warning] = "Only SELECT queries are allowed. Your query contained potentially unsafe operations. Using default query instead."
+        end
+
+        query
+      end
+
+      # Execute the prepared SQL query
+      def execute_query(query)
+        database_manager.execute_query(@query)
+      end
+
+      def default_query(table_name)
+        quoted_table = safe_quote_table_name(table_name)
+        "SELECT * FROM #{quoted_table} LIMIT 100"
+      end
+
+      private
+
+      # Safely quote a table name, with fallback
+      def safe_quote_table_name(table_name)
+        database_manager.connection.quote_table_name(table_name) rescue table_name.to_s
+      end
+    end
+  end
+end

data/app/controllers/concerns/dbviewer/database_operations/relationship_management.rb

@@ -0,0 +1,175 @@
+module Dbviewer
+  module DatabaseOperations
+    module RelationshipManagement
+      extend ActiveSupport::Concern
+
+      # Fetch relationships between tables for ERD visualization
+      def fetch_table_relationships(tables)
+        tables.flat_map { |table| extract_table_relationships_from_metadata(table[:name]) }
+      end
+
+      # Get mini ERD data for a specific table and its relationships
+      def fetch_mini_erd_for_table(table_name)
+        outgoing_data = collect_outgoing_relationships(table_name)
+        incoming_data = collect_incoming_relationships(table_name)
+
+        initial_tables = [ { name: table_name } ]
+        all_relationships = outgoing_data[:relationships] + incoming_data[:relationships]
+        all_tables = (initial_tables + outgoing_data[:tables] + incoming_data[:tables]).uniq { |t| t[:name] }
+
+        {
+          tables: all_tables,
+          relationships: all_relationships,
+          timestamp: Time.now.to_i
+        }
+      end
+
+      private
+
+      # Extract relationships for a single table from its metadata
+      # @param table_name [String] The name of the table to process
+      # @return [Array<Hash>] Array of relationship hashes for this table
+      def extract_table_relationships_from_metadata(table_name)
+        metadata = database_manager.table_metadata(table_name)
+        return [] unless metadata&.dig(:foreign_keys)&.present?
+
+        metadata[:foreign_keys].map do |fk|
+          {
+            from_table: table_name,
+            to_table: fk[:to_table],
+            from_column: fk[:column],
+            to_column: fk[:primary_key],
+            name: fk[:name]
+          }
+        end
+      end
+
+      # Collect outgoing relationships from the specified table to other tables
+      # @param table_name [String] The source table name
+      # @return [Hash] Hash containing :tables and :relationships arrays
+      def collect_outgoing_relationships(table_name)
+        tables = []
+        relationships = []
+
+        metadata = fetch_table_metadata(table_name)
+        return { tables: tables, relationships: relationships } unless metadata&.dig(:foreign_keys)&.present?
+
+        metadata[:foreign_keys].each do |fk|
+          result = process_outgoing_foreign_key(table_name, fk)
+          if result
+            relationships << result[:relationship]
+            tables << result[:table]
+          end
+        end
+
+        {
+          tables: tables,
+          relationships: relationships
+        }
+      end
+
+      # Process a single outgoing foreign key relationship
+      # @param table_name [String] The source table name
+      # @param fk [Hash] Foreign key metadata
+      # @return [Hash, nil] Hash containing :relationship and :table, or nil if invalid
+      def process_outgoing_foreign_key(table_name, fk)
+        return nil unless fk[:to_table].present? && fk[:column].present?
+
+        relationship = build_relationship_hash(
+          from_table: table_name.to_s,
+          to_table: fk[:to_table].to_s,
+          from_column: fk[:column].to_s,
+          to_column: fk[:primary_key].to_s.presence || "id",
+          name: fk[:name].to_s.presence || "#{table_name}_to_#{fk[:to_table]}",
+          direction: "outgoing"
+        )
+
+        {
+          relationship: relationship,
+          table: {
+            name: fk[:to_table].to_s
+          }
+        }
+      end
+
+      # Collect incoming relationships from other tables to the specified table
+      # @param table_name [String] The target table name
+      # @return [Hash] Hash containing :tables and :relationships arrays
+      def collect_incoming_relationships(table_name)
+        results = database_manager.tables
+          .reject { |other_table_name| other_table_name == table_name }
+          .map { |other_table_name| process_table_for_incoming_relationships(table_name, other_table_name) }
+          .compact
+
+        {
+          tables: results.flat_map { |result| result[:tables] },
+          relationships: results.flat_map { |result| result[:relationships] }
+        }
+      end
+
+      # Process a single table to find incoming relationships to the target table
+      # @param target_table [String] The target table name
+      # @param source_table [String] The source table name to check
+      # @return [Hash, nil] Hash containing :tables and :relationships arrays, or nil if no relationships
+      def process_table_for_incoming_relationships(target_table, source_table)
+        other_metadata = fetch_table_metadata(source_table)
+        return nil unless other_metadata&.dig(:foreign_keys)&.present?
+
+        results = other_metadata[:foreign_keys]
+          .map { |fk| process_incoming_foreign_key(target_table, source_table, fk) }
+          .compact
+
+        return nil if results.empty?
+
+        {
+          tables: results.map { |result| result[:table] },
+          relationships: results.map { |result| result[:relationship] }
+        }
+      end
+
+      # Process a single incoming foreign key relationship
+      # @param target_table [String] The target table name
+      # @param source_table [String] The source table name
+      # @param fk [Hash] Foreign key metadata
+      # @return [Hash, nil] Hash containing :relationship and :table, or nil if invalid
+      def process_incoming_foreign_key(target_table, source_table, fk)
+        return nil unless fk[:to_table] == target_table && fk[:column].present?
+
+        relationship = build_relationship_hash(
+          from_table: source_table.to_s,
+          to_table: target_table.to_s,
+          from_column: fk[:column].to_s,
+          to_column: fk[:primary_key].to_s.presence || "id",
+          name: fk[:name].to_s.presence || "#{source_table}_to_#{target_table}",
+          direction: "incoming"
+        )
+
+        {
+          relationship: relationship,
+          table: {
+            name: source_table.to_s
+          }
+        }
+      end
+
+      # Build a standardized relationship hash
+      # @param from_table [String] Source table name
+      # @param to_table [String] Target table name
+      # @param from_column [String] Source column name
+      # @param to_column [String] Target column name
+      # @param name [String] Relationship name
+      # @param direction [String] Relationship direction
+      # @return [Hash] Standardized relationship hash
+      def build_relationship_hash(from_table:, to_table:, from_column:, to_column:, name:, direction:)
+        {
+          from_table: from_table,
+          to_table: to_table,
+          from_column: from_column,
+          to_column: to_column,
+          name: name,
+          direction: direction
+        }
+      end
+    end
+  end
+end

data/app/controllers/concerns/dbviewer/database_operations/table_operations.rb

@@ -0,0 +1,46 @@
+module Dbviewer
+  module DatabaseOperations
+    module TableOperations
+      extend ActiveSupport::Concern
+
+      # Fetch all tables with their stats
+      # By default, don't include record counts for better performance on sidebar
+      def fetch_tables(include_record_counts = false)
+        database_manager.tables.map do |table_name|
+          table_stats = { name: table_name }
+          table_stats[:record_count] = fetch_table_record_count(table_name) if include_record_counts
+          table_stats
+        end
+      end
+
+      # Get column information for a specific table
+      def fetch_table_columns(table_name)
+        database_manager.table_columns(table_name)
+      end
+
+      # Fetch records for a table with pagination and sorting
+      def fetch_table_records(table_name, query_params)
+        database_manager.table_records(table_name, query_params)
+      end
+
+      # Get filtered record count for a table
+      def fetch_table_record_count(table_name, column_filters = {})
+        database_manager.table_record_count(table_name, column_filters)
+      end
+
+      # Get table metadata for display (e.g., primary key, foreign keys, indexes)
+      def fetch_table_metadata(table_name)
+        database_manager.table_metadata(table_name)
+      end
+
+      private
+
+      # Check if a table has a created_at column for timestamp visualization
+      def has_timestamp_column?(table_name)
+        fetch_table_columns(table_name).any? do |column|
+          column[:name] == "created_at" && [ :datetime, :timestamp ].include?(column[:type])
+        end
+      end
+    end
+  end
+end

data/app/controllers/concerns/dbviewer/database_operations.rb

@@ -3,22 +3,17 @@ module Dbviewer
     extend ActiveSupport::Concern
 
     include ConnectionManagement
+    include DataExport
     include DatabaseInformation
-    include TableOperations
-    include RelationshipManagement
+    include DatatableOperations
     include QueryOperations
-    include DataExport
-    include DatatableSupport
-
-    # -- Database Managers --
+    include RelationshipManagement
+    include TableOperations
 
-    # Initialize the database manager with the current connection
     def database_manager
       @database_manager = ::Dbviewer::Database::Manager.new(current_connection_key)
     end
 
-    # Initialize the table query operations manager
-    # This gives direct access to table query operations when needed
     def table_query_operations
       @table_query_operations ||= database_manager.table_query_operations
     end

data/app/controllers/dbviewer/api/tables_controller.rb

@@ -6,6 +6,11 @@ module Dbviewer
         render_success(total_tables: tables_count)
       end
 
+      def show
+        table_stats = fetch_table_stats(params[:id])
+        render_success(**table_stats)
+      end
+
       def records
         tables_stats = fetch_tables_stats
         render_success(tables_stats)
@@ -36,6 +41,13 @@ module Dbviewer
         })
       end
 
+      def mini_erd
+        table_name = params[:id]
+        erd_data = fetch_mini_erd_for_table(table_name)
+
+        render_success(erd_data)
+      end
+
       private
 
       def fetch_tables_count

data/app/controllers/dbviewer/entity_relationship_diagrams_controller.rb

@@ -1,21 +1,6 @@
 module Dbviewer
   class EntityRelationshipDiagramsController < ApplicationController
     def index
-      # Only show warning if no tables exist, but don't fetch relationships on initial load
-      if @tables.blank?
-        flash.now[:warning] = "No tables found in database to generate ERD."
-      end
-
-      respond_to do |format|
-        format.html # Just render the HTML without relationships
-        format.json do
-          # For JSON requests, return just tables initially
-          render json: {
-            tables: @tables,
-            relationships: []
-          }
-        end
-      end
     end
   end
 end

data/app/controllers/dbviewer/tables_controller.rb

@@ -1,13 +1,11 @@
 module Dbviewer
   class TablesController < ApplicationController
-    include Dbviewer::PaginationConcern
-
     before_action :set_table_name, except: [ :index ]
     before_action :set_query_filters, only: [ :show, :export_csv ]
     before_action :set_global_filters, only: [ :show, :export_csv ]
 
     def index
-      @tables = fetch_tables(include_record_counts: true)
+      @tables = fetch_tables(:include_record_counts)
     end
 
     def show
@@ -18,44 +16,17 @@ module Dbviewer
         direction: @order_direction,
         column_filters: @column_filters.reject { |_, v| v.blank? }
       )
-
-      # Get all datatable data in one method call
       datatable_data = fetch_datatable_data(@table_name, query_params)
 
-      # Assign to instance variables for view access
       @total_count = datatable_data[:total_count]
       @records = datatable_data[:records]
       @total_pages = datatable_data[:total_pages]
       @columns = datatable_data[:columns]
       @metadata = datatable_data[:metadata]
-
-      respond_to do |format|
-        format.html # Default HTML response
-        format.json do
-          render json: {
-            table_name: @table_name,
-            columns: @columns,
-            metadata: @metadata,
-            record_count: @total_count
-          }
-        end
-      end
-    end
-
-    def mini_erd
-      @erd_data = fetch_mini_erd_for_table(@table_name)
-
-      respond_to do |format|
-        format.json { render json: @erd_data }
-        format.html { render layout: false }
-      end
     end
 
     def query
-      @read_only_mode = true # Flag to indicate we're in read-only mode
       @columns = fetch_table_columns(@table_name)
-      @tables = fetch_tables  # Fetch tables for sidebar
-
       @query = prepare_query(@table_name, params[:query])
       @records = execute_query(@query)
 
@@ -95,11 +66,11 @@ module Dbviewer
 
     def set_query_filters
       @current_page = [ 1, params[:page].to_i ].max
-      @per_page = params[:per_page] ? params[:per_page].to_i : self.class.default_per_page
-      @per_page = self.class.default_per_page unless self.class.per_page_options.include?(@per_page)
+      @per_page = params[:per_page] ? params[:per_page].to_i : Dbviewer.configuration.default_per_page
+      @per_page = Dbviewer.configuration.default_per_page unless Dbviewer.configuration.per_page_options.include?(@per_page)
       @order_by = params[:order_by].presence || determine_default_order_column
       @order_direction = params[:order_direction].upcase if params[:order_direction].present?
-      @order_direction = "DESC" unless self.class::VALID_SORT_DIRECTIONS.include?(@order_direction)
+      @order_direction = "DESC" unless %w[ASC DESC].include?(@order_direction)
       @column_filters = params[:column_filters].presence ? params[:column_filters].to_enum.to_h : {}
     end
 

data/app/views/dbviewer/entity_relationship_diagrams/index.html.erb

@@ -89,5 +89,5 @@
 </div>
 
 <input type="text" id="tables" class="d-none" value='<%= raw @tables.to_json %>'>
-<input type="text" id="tables_path" class="d-none" value='<%= dbviewer.tables_path %>'>
+<input type="text" id="tables_path" class="d-none" value='<%= dbviewer.api_tables_path %>'>
 <input type="text" id="relationships_api_path" class="d-none" value='<%= dbviewer.relationships_api_entity_relationship_diagrams_path %>'>

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

@@ -5,7 +5,18 @@
 <% content_for :head do %>
   <link href="https://cdn.jsdelivr.net/npm/vscode-codicons@0.0.17/dist/codicon.min.css" rel="stylesheet">
   <%= stylesheet_link_tag "dbviewer/query", "data-turbo-track": "reload" %>
-  <%= javascript_include_tag "dbviewer/query", "data-turbo-track": "reload", type: :module %>
+  <!-- Load Monaco editor first as a regular script -->
+  <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.39.0/min/vs/loader.js"></script>
+  <script>
+    // Set up Monaco loader
+    require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.39.0/min/vs' } });
+    window.MonacoEnvironment = { getWorkerUrl: () => proxy };
+    let proxy = URL.createObjectURL(new Blob([`
+      self.MonacoEnvironment = { baseUrl: 'https://cdn.jsdelivr.net/npm/monaco-editor@0.39.0/min/' };
+      importScripts('https://cdn.jsdelivr.net/npm/monaco-editor@0.39.0/min/vs/base/worker/workerMain.js');
+    `], { type: 'text/javascript' }));
+  </script>
+  <%= javascript_include_tag "dbviewer/query", "data-turbo-track": "reload" %>
 <% end %>
 
 <div class="d-flex justify-content-between align-items-center mb-4">
@@ -26,6 +37,7 @@
       <div class="mb-3">
         <div id="monaco-editor" class="monaco-editor-container" style="min-height: 200px; border-radius: 4px; margin-bottom: 0rem;" 
               data-initial-query="<%= CGI.escapeHTML(@query.to_s) %>"></div>
+        <div id="query-container" class="editor-error-container"></div>
         <%= form.hidden_field :query, id: "query-input", value: @query.to_s %>
       </div>
       
@@ -100,11 +112,14 @@
   </div>
 </div>
 
-<% if @error.present? %>
-  <div class="alert alert-danger" role="alert">
-    <strong>Error:</strong> <%= @error %>
-  </div>
-<% end %>
+<div id="query-results">
+  <% if @error.present? %>
+    <div class="alert alert-danger" role="alert">
+      <i class="bi bi-exclamation-triangle me-2"></i>
+      <strong>Error:</strong> <%= @error %>
+    </div>
+  <% end %>
+</div>
 
 <% if @records.present? %>
   <div class="card">

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

@@ -100,7 +100,7 @@
   <div class="card-header d-flex justify-content-between align-items-center">
     <h5 class="mb-0">
       <select id="per-page-select" class="form-select form-select-sm" onchange="window.location.href='<%= table_path(@table_name) %>?<%= per_page_url_params(@table_name) %>'">
-        <% Dbviewer::TablesController.per_page_options.each do |option| %>
+        <% Dbviewer.configuration.per_page_options.each do |option| %>
           <option value="<%= option %>" <%= 'selected' if @per_page == option %>><%= option %></option>
         <% end %>
       </select>
@@ -348,5 +348,5 @@
   </div>
 </div>
 <% end %>
-<input type="hidden" id="mini_erd_table_path" name="mini_erd_table_path" value="<%= dbviewer.mini_erd_table_path(@table_name, format: :json) %>">
+<input type="hidden" id="mini_erd_table_path" name="mini_erd_table_path" value="<%= dbviewer.mini_erd_api_table_path(@table_name, format: :json) %>">
 <input type="hidden" id="table_name" name="table_name" value="<%= @table_name %>">

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

@@ -5,6 +5,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
+  
+  <!-- Favicon -->
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👁️</text></svg>">
+  <link rel="icon" href="<%= asset_path('dbviewer/favicon.ico') %>" type="image/x-icon">
+  <link rel="shortcut icon" href="<%= asset_path('dbviewer/favicon.ico') %>" type="image/x-icon">
+  <link rel="icon" type="image/svg+xml" href="<%= asset_path('dbviewer/favicon.svg') %>">
+  <link rel="icon" type="image/png" href="<%= asset_path('dbviewer/favicon.png') %>">
 
   <!-- Prevent theme flash during page load -->
   <script>
@@ -37,6 +44,8 @@
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
   <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
   
+  <%= javascript_include_tag "dbviewer/utility", "data-turbo-track": "reload" %>
+  <%= javascript_include_tag "dbviewer/error_handler", "data-turbo-track": "reload" %>
   <%= javascript_include_tag "dbviewer/layout", "data-turbo-track": "reload" %>
   <%= javascript_include_tag "dbviewer/sidebar", "data-turbo-track": "reload" %>
   <%= stylesheet_link_tag "dbviewer/application", "data-turbo-track": "reload" %>
@@ -47,8 +56,8 @@
   <div class="dbviewer-wrapper">
     <!-- Top Navigation Bar (Fixed) -->
     <nav class="navbar navbar-expand-lg navbar-dark bg-primary dbviewer-navbar fixed-top">
-      <div class="container-fluid">
-        <a class="navbar-brand" href="<%= dbviewer.root_path %>"><i class="bi bi-database-fill me-1"></i>DB Viewer</a>
+      <div class="container-fluid px-0">
+        <a class="navbar-brand d-flex" href="<%= dbviewer.root_path %>"><span class="me-2">👁️</span> DB Viewer</a>
         <div class="d-flex align-items-center">
           <button class="navbar-toggler border-0 px-2 d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvas"
                   aria-controls="navbarOffcanvas" aria-expanded="false" aria-label="Toggle navigation">
@@ -110,7 +119,7 @@
       <!-- Offcanvas sidebar for mobile/tablet view that slides from right -->
       <div class="offcanvas offcanvas-end d-lg-none" tabindex="-1" id="navbarOffcanvas" aria-labelledby="offcanvasNavbarLabel">
         <div class="offcanvas-header bg-light-subtle">
-          <h5 class="offcanvas-title" id="offcanvasNavbarLabel"><i class="bi bi-database-fill me-2 text-primary"></i>DB Viewer</h5>
+          <h5 class="offcanvas-title" id="offcanvasNavbarLabel">👁️ DB Viewer</h5>
           <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
         </div>
         <div class="offcanvas-body bg-body-tertiary">