function/templates/dashboard/settings/database_schema.html

{% extends 'dashboard.html' %}

{% block page %}
<div class="p-6 max-w-7xl mx-auto">
    <!-- Settings Navigation -->
    <div class="mb-6 border-b border-gray-200 dark:border-gray-700">
        <nav class="-mb-px flex space-x-8">
            <a hx-get="{{ url_for('settings.api_keys') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
                API Keys
            </a>
            <a hx-get="{{ url_for('settings.export') }}" hx-target="#container" hx-swap="innerHTML" hx-push-url="true"
                class="border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 py-4 px-1 text-sm font-medium cursor-pointer">
                Export Data
            </a>
            <a hx-get="{{ url_for('settings.database_schema') }}" hx-target="#container" hx-swap="innerHTML"
                hx-push-url="true"
                class="border-b-2 border-blue-500 text-blue-600 dark:text-blue-400 py-4 px-1 text-sm font-medium cursor-pointer">
                Database Schema
            </a>
        </nav>
    </div>

    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-2">Database Schema</h1>
        <p class="text-gray-600 dark:text-gray-400">Visual representation of your database structure with tables and
            relationships.</p>
    </div>

    <!-- ERD Diagram -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-6">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Entity Relationship Diagram</h2>

        <div id="mermaid-diagram"
            class="bg-white dark:bg-gray-900 p-4 rounded border border-gray-200 dark:border-gray-700 overflow-x-auto">
            <pre class="mermaid">
erDiagram
{% for table in schema_info %}
    {{ table.table_name|upper }} {
{% for col in table.columns %}        {{ col.data_type|replace(' ', '_') }} {{ col.column_name }}{% if col.column_name in table.primary_keys %} PK{% endif %}
{% endfor %}    }
{% endfor %}
{% for table in schema_info %}
{% for fk in table.foreign_keys %}
    {{ table.table_name|upper }} }|--|| {{ fk.foreign_table_name|upper }} : "references"
{% endfor %}
{% endfor %}
            </pre>
        </div>
    </div>

    <!-- Tables Overview -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Tables Overview</h2>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for table in schema_info %}
            <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow">
                <h3 class="font-medium text-gray-900 dark:text-white mb-2 flex items-center">
                    <svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                        <path
                            d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z" />
                    </svg>
                    {{ table.table_name }}
                </h3>
                <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                    {{ table.columns|length }} column{{ 's' if table.columns|length != 1 else '' }}
                    {% if table.primary_keys %}
                    · {{ table.primary_keys|length }} PK
                    {% endif %}
                </p>

                <div class="space-y-1 max-h-40 overflow-y-auto">
                    {% for col in table.columns %}
                    <div class="text-xs flex items-start py-1">
                        {% if col.column_name in table.primary_keys %}
                        <svg class="w-3 h-3 mr-1.5 mt-0.5 text-yellow-500 flex-shrink-0" fill="currentColor"
                            viewBox="0 0 20 20">
                            <path
                                d="M10 2a3 3 0 00-3 3v1H5a2 2 0 00-2 2v7a2 2 0 002 2h10a2 2 0 002-2V8a2 2 0 00-2-2h-2V5a3 3 0 00-3-3zm3 5V5a1 1 0 10-2 0v2H9V5a1 1 0 00-2 0v2H5v7h10V7h-2z" />
                        </svg>
                        {% else %}
                        <span class="w-3 h-3 mr-1.5 flex-shrink-0"></span>
                        {% endif %}
                        <div class="flex-1 min-w-0">
                            <span class="font-medium text-gray-700 dark:text-gray-300">{{ col.column_name }}</span>
                            <span class="text-gray-500 dark:text-gray-500 ml-1">{{ col.data_type }}</span>
                            {% if col.is_nullable == 'NO' %}
                            <span class="text-red-500 text-[10px] ml-1">*</span>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>

                {% if table.foreign_keys %}
                <div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
                    <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1.5">References:</p>
                    <div class="space-y-1">
                        {% for fk in table.foreign_keys %}
                        <div class="text-xs text-blue-600 dark:text-blue-400 flex items-center">
                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M13 7l5 5m0 0l-5 5m5-5H6" />
                            </svg>
                            {{ fk.foreign_table_name }} ({{ fk.column_name }})
                        </div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<script type="module">
    // Dynamically import mermaid
    const mermaid = await import('https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs');

    // Initialize mermaid with theme
    const isDark = document.documentElement.classList.contains('dark');
    mermaid.default.initialize({
        startOnLoad: false,
        theme: isDark ? 'dark' : 'default',
        er: {
            fontSize: 14,
            useMaxWidth: true
        }
    });

    // Render the diagram
    try {
        await mermaid.default.run({
            querySelector: '.mermaid'
        });
        console.log('Mermaid diagram rendered successfully');
    } catch (error) {
        console.error('Mermaid rendering error:', error);
        const diagramDiv = document.getElementById('mermaid-diagram');
        if (diagramDiv) {
            diagramDiv.innerHTML = `
                <div class="text-amber-600 dark:text-amber-400 p-6 text-center">
                    <svg class="w-12 h-12 mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                    </svg>
                    <p class="font-medium mb-2">Unable to render ERD</p>
                    <p class="text-sm">View the tables overview below for schema information.</p>
                </div>
            `;
        }
    }
</script>

{% endblock %}