Update templates/index.html

templates/index.html

@@ -4,211 +4,248 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI SQL Assistant</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 20px;
-            background-color: #f4f4f9;
-        }
-        h1 {
-            color: #333;
-        }
-        .container {
-            max-width: 800px;
-            margin: auto;
-            padding: 20px;
-            background: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-        }
-        .error {
-            color: red;
-            margin: 10px 0;
-        }
-        .success {
-            color: green;
-            margin: 10px 0;
-        }
-        .schema-summary {
-            margin: 20px 0;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-        }
-        .schema-summary h3 {
-            margin-top: 0;
-        }
-        .schema-summary ul {
-            list-style-type: disc;
-            margin-left: 20px;
-        }
-        .results-table {
-            width: 100%;
-            border-collapse: collapse;
-            margin: 20px 0;
-        }
-        .results-table th, .results-table td {
-            border: 1px solid #ddd;
-            padding: 8px;
-            text-align: left;
-        }
-        .results-table th {
-            background-color: #f2f2f2;
-        }
-        .query-box {
-            margin: 20px 0;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-        }
-        textarea, input[type="text"], input[type="file"] {
-            width: 100%;
-            padding: 8px;
-            margin: 5px 0;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-        }
-        button {
-            padding: 10px 20px;
-            background-color: #007bff;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-        }
-        button:hover {
-            background-color: #0056b3;
-        }
-        .modal {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0,0,0,0.5);
-            justify-content: center;
-            align-items: center;
-        }
-        .modal-content {
-            background: white;
-            padding: 20px;
-            border-radius: 8px;
-            width: 400px;
-        }
-        .modal-content h2 {
-            margin-top: 0;
-        }
-        .modal-content label {
-            display: block;
-            margin: 10px 0 5px;
-        }
-        .modal-content input {
-            width: calc(100% - 16px);
-        }
-        .close {
-            float: right;
-            font-size: 24px;
-            cursor: pointer;
+        body { background-color: #f8f9fa; }
+        .container { max-width: 900px; margin-top: 20px; }
+        .schema-box, .query-box { 
+            background-color: #fff; 
+            padding: 20px; 
+            border-radius: 8px; 
+            box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
+            margin-bottom: 20px; 
+        }
+        .query-box { display: block; }
+        .query-content { display: none; }
+        .toggle-button { 
+            background-color: #007bff; 
+            color: white; 
+            border: none; 
+            padding: 8px 15px; 
+            border-radius: 5px; 
+            cursor: pointer; 
+            font-weight: 500; 
+            font-size: 0.9rem; 
+            width: auto; 
+            display: inline-block; 
+        }
+        .toggle-button:hover { 
+            background-color: #0056b3; 
+        }
+        .result-table { margin-top: 20px; }
+        .error { color: #dc3545; font-weight: 500; }
+        .success { color: #28a745; font-weight: 500; }
+        .note { font-style: italic; color: #6c757d; }
+        .highlight { 
+            background-color: #28a745; 
+            color: white; 
+            padding: 2px 8px; 
+            border-radius: 4px; 
+            font-weight: 600; 
+        }
+        .highlight-warning { 
+            background-color: #fd7e14; 
+        }
+        .schema-summary h4 { margin-bottom: 10px; }
+        .schema-summary ul { margin-bottom: 15px; }
+        .schema-summary li { margin-bottom: 5px; }
+        .table { 
+            border-radius: 8px; 
+            overflow: hidden; 
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
+        }
+        .table thead th { 
+            background-color: #007bff; 
+            color: white; 
+            font-weight: 600; 
+            text-transform: capitalize; 
+            padding: 12px; 
+        }
+        .table tbody tr:nth-child(even) { 
+            background-color: #f8f9fa; 
+        }
+        .table tbody tr:hover { 
+            background-color: #e9ecef; 
+            transition: background-color 0.2s; 
+        }
+        .table td { 
+            padding: 12px; 
+            vertical-align: middle; 
+        }
+        .btn-primary { 
+            background-color: #007bff; 
+            border-color: #007bff; 
+            padding: 10px 20px; 
+        }
+        .btn-primary:hover { 
+            background-color: #0056b3; 
+            border-color: #0056b3; 
+        }
+        .form-control { 
+            border-radius: 5px; 
+        }
+        .unpaid { color: #dc3545; font-weight: bold; }
+        .modal-content { 
+            border-radius: 8px; 
+            box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
+        }
+        .modal-header { 
+            background-color: #007bff; 
+            color: white; 
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <h1>AI SQL Assistant</h1>
-        {% if error %}
-            <p class="error">{{ error }}</p>
-        {% endif %}
-        {% if success %}
-            <p class="success">{{ success }}</p>
-        {% endif %}
-        <form method="post" enctype="multipart/form-data">
-            <label for="sql_file">Upload MySQL .sql File</label>
-            <input type="file" id="sql_file" name="sql_file" accept=".sql">
-            <button type="submit">Upload</button>
-        </form>
-        <button onclick="openModal()">Configure MySQL Connection</button>
-        <form method="post" action="/reset_db">
-            <button type="submit">Reset to Default Connection</button>
-        </form>
-        <div id="dbModal" class="modal">
-            <div class="modal-content">
-                <span class="close" onclick="closeModal()">&times;</span>
-                <h2>Configure MySQL Connection</h2>
-                <form method="post" action="/configure_db">
-                    <label for="host">Host</label>
-                    <input type="text" id="host" name="host" placeholder="e.g., gateway01.ap-southeast-1.prod.aws.tidbcloud.com">
-                    <label for="user">User</label>
-                    <input type="text" id="user" name="user" placeholder="e.g., 31QbJgnPtKiyvcC.root">
-                    <label for="password">Password</label>
-                    <input type="password" id="password" name="password">
-                    <label for="port">Port</label>
-                    <input type="text" id="port" name="port" value="4000">
-                    <button type="submit">Save</button>
-                </form>
+        <h1 class="text-center mb-4">AI SQL Assistant</h1>
+        
+        <div class="mb-4">
+            <button type="button" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#dbConfigModal">Configure MySQL Connection</button>
+            <form method="post" enctype="multipart/form-data" style="display: inline;">
+                <div class="mb-3 d-inline-block">
+                    <label for="sql_file" class="form-label">Upload MySQL .sql File</label>
+                    <input type="file" class="form-control" id="sql_file" name="sql_file" accept=".sql">
+                </div>
+                <button type="submit" class="btn btn-primary">Upload</button>
+            </form>
+        </div>
+
+        <!-- Modal for MySQL Connection -->
+        <div class="modal fade" id="dbConfigModal" tabindex="-1" aria-labelledby="dbConfigModalLabel" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="dbConfigModalLabel">Configure MySQL Connection</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body">
+                        <form method="post" action="/configure_db">
+                            <div class="mb-3">
+                                <label for="host" class="form-label">Host</label>
+                                <input type="text" class="form-control" id="host" name="host" placeholder="e.g., localhost" required>
+                            </div>
+                            <div class="mb-3">
+                                <label for="user" class="form-label">User</label>
+                                <input type="text" class="form-control" id="user" name="user" placeholder="e.g., root" required>
+                            </div>
+                            <div class="mb-3">
+                                <label for="password" class="form-label">Password</label>
+                                <input type="password" class="form-control" id="password" name="password" placeholder="Enter password">
+                            </div>
+                            <div class="mb-3">
+                                <label for="port" class="form-label">Port</label>
+                                <input type="number" class="form-control" id="port" name="port" placeholder="3306" value="3306">
+                            </div>
+                            <button type="submit" class="btn btn-primary">Save Connection</button>
+                        </form>
+                    </div>
+                </div>
             </div>
         </div>
-        {% if schema %}
+
+        {% if success %}
+        <p class="success mt-3">{{ success }}</p>
+        {% endif %}
+
+        {% if summary %}
+        <div class="schema-box">
+            <h3>Database Summary</h3>
             <div class="schema-summary">
-                <h3>Schema Summary</h3>
-                <p><strong>Description:</strong> {{ summary.description }}</p>
-                <h4>Main Tables:</h4>
+                <h4>Overview</h4>
+                <p>{{ summary.description }}</p>
+                {% if summary.main_tables %}
+                <h4>Main Tables and Columns</h4>
                 <ul>
                     {% for table, columns in summary.main_tables.items() %}
-                        <li>{{ table }}: {{ columns | join(', ') }}</li>
+                    <li><strong>{{ table }}</strong>: {{ columns | join(', ') }}</li>
                     {% endfor %}
                 </ul>
-                <h4>Relationships:</h4>
+                {% endif %}
+                {% if summary.relationships %}
+                <h4>Key Relationships</h4>
                 <ul>
-                    {% for rel in summary.relationships %}
-                        <li>{{ rel }}</li>
+                    {% for relation in summary.relationships %}
+                    <li>{{ relation }}</li>
                     {% endfor %}
                 </ul>
-                <h4>Suggestions:</h4>
-                <p><strong>Evaluation:</strong> {{ summary.suggestions.evaluation }}</p>
-                <p><strong>Note:</strong> {{ summary.suggestions.note }}</p>
+                {% endif %}
+                <h4>Suggestions</h4>
+                <p><span class="highlight {% if summary.suggestions.evaluation != 'Excellent' %}highlight-warning{% endif %}">{{ summary.suggestions.evaluation }}</span></p>
+                <p>{{ summary.suggestions.note }}</p>
+                {% if summary.suggestions.recommendations %}
                 <ul>
                     {% for rec in summary.suggestions.recommendations %}
-                        <li>{{ rec }}</li>
+                    <li>{{ rec }}</li>
                     {% endfor %}
                 </ul>
+                {% endif %}
             </div>
+        </div>
+        {% elif schema %}
+        <div class="schema-box">
+            <h3>Database Summary</h3>
+            <p class="note">Schema loaded, but no summary available. Tables: {{ schema.keys() | join(', ') }}.</p>
+        </div>
         {% endif %}
-        <form method="post">
-            <label for="question">Ask a Question</label>
-            <textarea id="question" name="question" placeholder="e.g., Show all patients admitted in July 2025"></textarea>
-            <button type="submit">Submit</button>
+
+        <form method="post" class="mt-4">
+            <div class="mb-3">
+                <label for="question" class="form-label">Ask a Question</label>
+                <input type="text" class="form-control" id="question" name="question" placeholder="e.g., Show all patients admitted in July 2025">
+            </div>
+            <button type="submit" class="btn btn-primary">Submit</button>
         </form>
+
+        {% if error %}
+        <p class="error mt-3">{{ error }}</p>
+        {% endif %}
+
         {% if query %}
-            <div class="query-box">
-                <h3>Generated SQL Query</h3>
-                <pre>{{ query }}</pre>
+        <div class="query-box">
+            <button class="toggle-button" onclick="toggleSection('query-content')">View SQL Query</button>
+            <div id="query-content" class="query-content">
+                <pre class="bg-light p-3 rounded">{{ query }}</pre>
             </div>
+        </div>
         {% endif %}
+
+      
         {% if results %}
-            <h3>Query Results</h3>
-            <table class="results-table">
-                <tr>
-                    {% for key in results[0].keys() %}
+        <div class="result-table">
+            <h4>Query Results</h4>
+            <table class="table table-bordered">
+                <thead>
+                    <tr>
+                        {% for key in results[0].keys() %}
                         <th>{{ key }}</th>
-                    {% endfor %}
-                </tr>
-                {% for row in results %}
+                        {% endfor %}
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for row in results %}
                     <tr>
-                        {% for value in row.values() %}
-                            <td>{{ value }}</td>
+                        {% for key, value in row.items() %}
+                        <td {% if key in ['Total Bill Amount', 'Bill Amount'] %}class="unpaid"{% endif %}>{{ value }}</td>
                         {% endfor %}
                     </tr>
-                {% endfor %}
+                    {% endfor %}
+                </tbody>
             </table>
+        </div>
+        {% elif query and not error %}
+        <p class="note mt-3">No results found for the query. Check the data or try a different question.</p>
         {% endif %}
     </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        function openModal() {
-            document.getElementById('dbModal').style.display = 'flex';
-        }
-        function closeModal() {
-            document.getElementById('dbModal').style.display = 'none';
+        function toggleSection(id) {
+            const content = document.getElementById(id);
+            if (content.style.display === 'none' || content.style.display === '') {
+                content.style.display = 'block';
+            } else {
+                content.style.display = 'none';
+            }
         }
     </script>
 </body>