added search bar feature, refactored the dashboard

src/database.py

@@ -1973,6 +1973,122 @@ class DatabaseManager:
         finally:
             self.close_session()
 
+    def search_attacks_and_ips(
+        self,
+        query: str,
+        page: int = 1,
+        page_size: int = 20,
+    ) -> Dict[str, Any]:
+        """
+        Search attacks and IPs matching a query string.
+
+        Searches across AttackDetection (attack_type, matched_pattern),
+        AccessLog (ip, path), and IpStats (ip, city, country, isp, asn_org).
+
+        Args:
+            query: Search term (partial match)
+            page: Page number (1-indexed)
+            page_size: Results per page
+
+        Returns:
+            Dictionary with matching attacks, ips, and pagination info
+        """
+        session = self.session
+        try:
+            offset = (page - 1) * page_size
+            like_q = f"%{query}%"
+
+            # --- Search attacks (AccessLog + AttackDetection) ---
+            attack_query = (
+                session.query(AccessLog)
+                .join(AttackDetection)
+                .filter(
+                    or_(
+                        AccessLog.ip.ilike(like_q),
+                        AccessLog.path.ilike(like_q),
+                        AttackDetection.attack_type.ilike(like_q),
+                        AttackDetection.matched_pattern.ilike(like_q),
+                    )
+                )
+                .distinct(AccessLog.id)
+            )
+
+            total_attacks = attack_query.count()
+            attack_logs = (
+                attack_query.order_by(AccessLog.timestamp.desc())
+                .offset(offset)
+                .limit(page_size)
+                .all()
+            )
+
+            attacks = [
+                {
+                    "id": log.id,
+                    "ip": log.ip,
+                    "path": log.path,
+                    "user_agent": log.user_agent,
+                    "timestamp": log.timestamp.isoformat() if log.timestamp else None,
+                    "attack_types": [d.attack_type for d in log.attack_detections],
+                    "log_id": log.id,
+                }
+                for log in attack_logs
+            ]
+
+            # --- Search IPs (IpStats) ---
+            ip_query = session.query(IpStats).filter(
+                or_(
+                    IpStats.ip.ilike(like_q),
+                    IpStats.city.ilike(like_q),
+                    IpStats.country.ilike(like_q),
+                    IpStats.country_code.ilike(like_q),
+                    IpStats.isp.ilike(like_q),
+                    IpStats.asn_org.ilike(like_q),
+                    IpStats.reverse.ilike(like_q),
+                )
+            )
+
+            total_ips = ip_query.count()
+            ips = (
+                ip_query.order_by(IpStats.total_requests.desc())
+                .offset(offset)
+                .limit(page_size)
+                .all()
+            )
+
+            ip_results = [
+                {
+                    "ip": stat.ip,
+                    "total_requests": stat.total_requests,
+                    "first_seen": stat.first_seen.isoformat() if stat.first_seen else None,
+                    "last_seen": stat.last_seen.isoformat() if stat.last_seen else None,
+                    "country_code": stat.country_code,
+                    "city": stat.city,
+                    "category": stat.category,
+                    "isp": stat.isp,
+                    "asn_org": stat.asn_org,
+                }
+                for stat in ips
+            ]
+
+            total = total_attacks + total_ips
+            total_pages = max(1, (max(total_attacks, total_ips) + page_size - 1) // page_size)
+
+            return {
+                "attacks": attacks,
+                "ips": ip_results,
+                "query": query,
+                "pagination": {
+                    "page": page,
+                    "page_size": page_size,
+                    "total_attacks": total_attacks,
+                    "total_ips": total_ips,
+                    "total": total,
+                    "total_pages": total_pages,
+                },
+            }
+        finally:
+            self.close_session()
+
 
 # Module-level singleton instance
 _db_manager = DatabaseManager()

src/routes/htmx.py

@@ -2,7 +2,7 @@
 
 """
 HTMX fragment endpoints.
-Server-rendered HTML partials for table pagination, sorting, and IP details.
+Server-rendered HTML partials for table pagination, sorting, IP details, and search.
 """
 
 from fastapi import APIRouter, Request, Response, Query
@@ -305,3 +305,33 @@ async def htmx_ip_detail(ip_address: str, request: Request):
             "stats": stats,
         },
     )
+
+
+# ── Search ───────────────────────────────────────────────────────────
+
+
+@router.get("/htmx/search")
+async def htmx_search(
+    request: Request,
+    q: str = Query(""),
+    page: int = Query(1),
+):
+    q = q.strip()
+    if not q:
+        return Response(content="", media_type="text/html")
+
+    db = get_db()
+    result = db.search_attacks_and_ips(query=q, page=max(1, page), page_size=20)
+
+    templates = get_templates()
+    return templates.TemplateResponse(
+        "dashboard/partials/search_results.html",
+        {
+            "request": request,
+            "dashboard_path": _dashboard_path(request),
+            "attacks": result["attacks"],
+            "ips": result["ips"],
+            "query": q,
+            "pagination": result["pagination"],
+        },
+    )

src/templates/jinja2/base.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.css" crossorigin="anonymous" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.Default.css" crossorigin="anonymous" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;700;900&display=swap" />
     <link rel="stylesheet" href="{{ dashboard_path }}/static/css/dashboard.css" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js" crossorigin="anonymous" defer></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js" crossorigin="anonymous" defer></script>

src/templates/jinja2/dashboard/index.html

@@ -31,6 +31,27 @@
     {# Stats cards - server-rendered #}
     {% include "dashboard/partials/stats_cards.html" %}
 
+    {# Search bar #}
+    <div class="search-bar-container">
+        <div class="search-bar">
+            <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"/>
+            </svg>
+            <input id="search-input"
+                   type="search"
+                   name="q"
+                   placeholder="Search attacks, IPs, patterns, locations..."
+                   autocomplete="off"
+                   hx-get="{{ dashboard_path }}/htmx/search"
+                   hx-trigger="input changed delay:300ms, search"
+                   hx-target="#search-results-container"
+                   hx-swap="innerHTML"
+                   hx-indicator="#search-spinner" />
+            <span id="search-spinner" class="htmx-indicator search-spinner">&#8635;</span>
+        </div>
+        <div id="search-results-container"></div>
+    </div>
+
     {# Tab navigation - Alpine.js #}
     <div class="tabs-container">
         <a class="tab-button" :class="{ active: tab === 'overview' }" @click.prevent="switchToOverview()" href="#overview">Overview</a>

src/templates/jinja2/dashboard/partials/attack_types_table.html

@@ -74,7 +74,7 @@
             </td>
         </tr>
         {% else %}
-        <tr><td colspan="7" style="text-align: center;">No attacks detected</td></tr>
+        <tr><td colspan="7" class="empty-state">No attacks detected</td></tr>
         {% endfor %}
     </tbody>
 </table>

src/templates/jinja2/dashboard/partials/attackers_table.html

@@ -62,7 +62,7 @@
             </td>
         </tr>
         {% else %}
-        <tr><td colspan="6" style="text-align: center;">No attackers found</td></tr>
+        <tr><td colspan="6" class="empty-state">No attackers found</td></tr>
         {% endfor %}
     </tbody>
 </table>

src/templates/jinja2/dashboard/partials/credentials_table.html

@@ -54,7 +54,7 @@
             </td>
         </tr>
         {% else %}
-        <tr><td colspan="6" style="text-align: center;">No credentials captured</td></tr>
+        <tr><td colspan="6" class="empty-state">No credentials captured</td></tr>
         {% endfor %}
     </tbody>
 </table>

src/templates/jinja2/dashboard/partials/honeypot_table.html

@@ -48,7 +48,7 @@
             </td>
         </tr>
         {% else %}
-        <tr><td colspan="3" style="text-align: center;">No data</td></tr>
+        <tr><td colspan="3" class="empty-state">No data</td></tr>
         {% endfor %}
     </tbody>
 </table>

src/templates/jinja2/dashboard/partials/patterns_table.html

@@ -37,7 +37,7 @@
             <td>{{ pattern.count }}</td>
         </tr>
         {% else %}
-        <tr><td colspan="3" style="text-align: center;">No patterns found</td></tr>
+        <tr><td colspan="3" class="empty-state">No patterns found</td></tr>
         {% endfor %}
     </tbody>
 </table>

src/templates/jinja2/dashboard/partials/search_results.html

@@ -0,0 +1,158 @@
+{# HTMX fragment: Search results for attacks and IPs #}
+<div class="search-results">
+
+    <div class="search-results-header">
+        <span class="search-results-summary">
+            Found <strong>{{ pagination.total_attacks }}</strong> attack{{ 's' if pagination.total_attacks != 1 else '' }}
+            and <strong>{{ pagination.total_ips }}</strong> IP{{ 's' if pagination.total_ips != 1 else '' }}
+            for &ldquo;<em>{{ query | e }}</em>&rdquo;
+        </span>
+        <button class="search-close-btn" onclick="document.getElementById('search-input').value=''; document.getElementById('search-results-container').innerHTML='';">&times;</button>
+    </div>
+
+    {# ── Matching IPs ─────────────────────────────────── #}
+    {% if ips %}
+    <div class="search-section">
+        <h3 class="search-section-title">Matching IPs</h3>
+        <table>
+            <thead>
+                <tr>
+                    <th>#</th>
+                    <th>IP Address</th>
+                    <th>Requests</th>
+                    <th>Category</th>
+                    <th>Location</th>
+                    <th>ISP / ASN</th>
+                    <th>Last Seen</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for ip in ips %}
+                <tr class="ip-row" data-ip="{{ ip.ip | e }}">
+                    <td class="rank">{{ loop.index + (pagination.page - 1) * pagination.page_size }}</td>
+                    <td class="ip-clickable"
+                        hx-get="{{ dashboard_path }}/htmx/ip-detail/{{ ip.ip | e }}"
+                        hx-target="next .ip-stats-row .ip-stats-dropdown"
+                        hx-swap="innerHTML"
+                        @click="toggleIpDetail($event)">
+                        {{ ip.ip | e }}
+                    </td>
+                    <td>{{ ip.total_requests }}</td>
+                    <td>
+                        {% if ip.category %}
+                        <span class="category-badge category-{{ ip.category | default('unknown') | replace(' ', '-') | lower }}">
+                            {{ ip.category | e }}
+                        </span>
+                        {% else %}
+                        <span class="category-badge category-unknown">unknown</span>
+                        {% endif %}
+                    </td>
+                    <td>{{ ip.city | default('') | e }}{% if ip.city and ip.country_code %}, {% endif %}{{ ip.country_code | default('N/A') | e }}</td>
+                    <td>{{ ip.isp | default(ip.asn_org | default('N/A')) | e }}</td>
+                    <td>{{ ip.last_seen | format_ts }}</td>
+                </tr>
+                <tr class="ip-stats-row" style="display: none;">
+                    <td colspan="7" class="ip-stats-cell">
+                        <div class="ip-stats-dropdown">
+                            <div class="loading">Loading stats...</div>
+                        </div>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    {% endif %}
+
+    {# ── Matching Attacks ─────────────────────────────── #}
+    {% if attacks %}
+    <div class="search-section">
+        <h3 class="search-section-title">Matching Attacks</h3>
+        <table>
+            <thead>
+                <tr>
+                    <th>#</th>
+                    <th>IP Address</th>
+                    <th>Path</th>
+                    <th>Attack Types</th>
+                    <th>User-Agent</th>
+                    <th>Time</th>
+                    <th>Actions</th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for attack in attacks %}
+                <tr class="ip-row" data-ip="{{ attack.ip | e }}">
+                    <td class="rank">{{ loop.index + (pagination.page - 1) * pagination.page_size }}</td>
+                    <td class="ip-clickable"
+                        hx-get="{{ dashboard_path }}/htmx/ip-detail/{{ attack.ip | e }}"
+                        hx-target="next .ip-stats-row .ip-stats-dropdown"
+                        hx-swap="innerHTML"
+                        @click="toggleIpDetail($event)">
+                        {{ attack.ip | e }}
+                    </td>
+                    <td>
+                        <div class="path-cell-container">
+                            <span class="path-truncated">{{ attack.path | e }}</span>
+                            {% if attack.path | length > 30 %}
+                            <div class="path-tooltip">{{ attack.path | e }}</div>
+                            {% endif %}
+                        </div>
+                    </td>
+                    <td>
+                        <div class="attack-types-cell">
+                            {% set types_str = attack.attack_types | join(', ') %}
+                            <span class="attack-types-truncated">{{ types_str | e }}</span>
+                            {% if types_str | length > 30 %}
+                            <div class="attack-types-tooltip">{{ types_str | e }}</div>
+                            {% endif %}
+                        </div>
+                    </td>
+                    <td>{{ (attack.user_agent | default(''))[:50] | e }}</td>
+                    <td>{{ attack.timestamp | format_ts }}</td>
+                    <td>
+                        {% if attack.log_id %}
+                        <button class="view-btn" @click="viewRawRequest({{ attack.log_id }})">View Request</button>
+                        {% endif %}
+                    </td>
+                </tr>
+                <tr class="ip-stats-row" style="display: none;">
+                    <td colspan="7" class="ip-stats-cell">
+                        <div class="ip-stats-dropdown">
+                            <div class="loading">Loading stats...</div>
+                        </div>
+                    </td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+    {% endif %}
+
+    {# ── Pagination ───────────────────────────────────── #}
+    {% if pagination.total_pages > 1 %}
+    <div class="search-pagination">
+        <span class="pagination-info">Page {{ pagination.page }}/{{ pagination.total_pages }}</span>
+        <div style="display: flex; gap: 8px;">
+            <button class="pagination-btn"
+                    hx-get="{{ dashboard_path }}/htmx/search?q={{ query | urlencode }}&page={{ pagination.page - 1 }}"
+                    hx-target="#search-results-container"
+                    hx-swap="innerHTML"
+                    {% if pagination.page <= 1 %}disabled{% endif %}>Prev</button>
+            <button class="pagination-btn"
+                    hx-get="{{ dashboard_path }}/htmx/search?q={{ query | urlencode }}&page={{ pagination.page + 1 }}"
+                    hx-target="#search-results-container"
+                    hx-swap="innerHTML"
+                    {% if pagination.page >= pagination.total_pages %}disabled{% endif %}>Next</button>
+        </div>
+    </div>
+    {% endif %}
+
+    {# ── No results ───────────────────────────────────── #}
+    {% if not attacks and not ips %}
+    <div class="search-no-results">
+        No results found for &ldquo;<em>{{ query | e }}</em>&rdquo;
+    </div>
+    {% endif %}
+
+</div>

src/templates/jinja2/dashboard/partials/suspicious_table.html

@@ -32,7 +32,7 @@
                 </td>
             </tr>
             {% else %}
-            <tr><td colspan="4" style="text-align:center;">No suspicious activity detected</td></tr>
+            <tr><td colspan="4" class="empty-state">No suspicious activity detected</td></tr>
             {% endfor %}
         </tbody>
     </table>

src/templates/jinja2/dashboard/partials/top_ips_table.html

@@ -48,7 +48,7 @@
             </td>
         </tr>
         {% else %}
-        <tr><td colspan="3" style="text-align: center;">No data</td></tr>
+        <tr><td colspan="3" class="empty-state">No data</td></tr>
         {% endfor %}
     </tbody>
 </table>

src/templates/jinja2/dashboard/partials/top_paths_table.html

@@ -35,7 +35,7 @@
             <td>{{ item.count }}</td>
         </tr>
         {% else %}
-        <tr><td colspan="3" style="text-align: center;">No data</td></tr>
+        <tr><td colspan="3" class="empty-state">No data</td></tr>
         {% endfor %}
     </tbody>
 </table>

src/templates/jinja2/dashboard/partials/top_ua_table.html

@@ -31,11 +31,11 @@
         {% for item in items %}
         <tr>
             <td class="rank">{{ loop.index + (pagination.page - 1) * pagination.page_size }}</td>
-            <td>{{ item.user_agent | e }}</td>
+            <td style="font-size: 11px; word-break: break-all; max-width: 400px;">{{ item.user_agent | e }}</td>
             <td>{{ item.count }}</td>
         </tr>
         {% else %}
-        <tr><td colspan="3" style="text-align: center;">No data</td></tr>
+        <tr><td colspan="3" class="empty-state">No data</td></tr>
         {% endfor %}
     </tbody>
 </table>

src/templates/static/css/dashboard.css

@@ -41,6 +41,8 @@ h1 {
     color: #58a6ff;
     text-align: center;
     margin-bottom: 40px;
+    font-weight: 900;
+    font-family: 'Google Sans Flex', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 .download-section {
     position: absolute;
@@ -74,20 +76,21 @@ h1 {
     display: block;
     width: 100%;
     padding: 8px 14px;
-    background: #238636;
-    color: #ffffff;
+    background: rgba(35, 134, 54, 0.4);
+    color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     border-radius: 6px;
     font-weight: 500;
     font-size: 13px;
-    transition: background 0.2s;
-    border: 1px solid #2ea043;
+    transition: background 0.2s, color 0.2s;
+    border: 1px solid rgba(46, 160, 67, 0.4);
     cursor: pointer;
     text-align: left;
     box-sizing: border-box;
 }
 .banlist-dropdown-btn:hover {
-    background: #2ea043;
+    background: rgba(46, 160, 67, 0.6);
+    color: #ffffff;
 }
 .banlist-dropdown-menu {
     display: none;
@@ -189,8 +192,8 @@ tr:hover {
     font-weight: bold;
 }
 .alert-section {
-    background: #1c1917;
-    border-left: 4px solid #f85149;
+    background: #161b22;
+    border-left: 6px solid rgba(248, 81, 73, 0.4);
 }
 th.sortable {
     cursor: pointer;
@@ -1253,3 +1256,134 @@ tbody {
 [x-cloak] {
     display: none !important;
 }
+
+/* ── Search Bar ────────────────────────────────────── */
+.search-bar-container {
+    max-width: 100%;
+    margin: 0 0 20px 0;
+}
+.search-bar {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+.search-icon {
+    position: absolute;
+    left: 14px;
+    width: 18px;
+    height: 18px;
+    color: #8b949e;
+    pointer-events: none;
+}
+.search-bar input[type="search"] {
+    width: 100%;
+    padding: 12px 40px 12px 42px;
+    background: #0d1117;
+    border: 1px solid #30363d;
+    border-radius: 6px;
+    color: #c9d1d9;
+    font-size: 14px;
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+.search-bar input[type="search"]::placeholder {
+    color: #6e7681;
+}
+.search-bar input[type="search"]:focus {
+    border-color: #58a6ff;
+    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
+}
+.search-bar input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%238b949e'%3E%3Cpath d='M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z'/%3E%3C/svg%3E") center/contain no-repeat;
+    cursor: pointer;
+}
+.search-spinner {
+    position: absolute;
+    right: 14px;
+    font-size: 18px;
+    color: #58a6ff;
+    animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+/* ── Search Results ───────────────────────────────── */
+.search-results {
+    margin-top: 12px;
+    background: #161b22;
+    border: 1px solid #30363d;
+    border-radius: 6px;
+    padding: 16px;
+    animation: fadeIn 0.3s ease-in;
+}
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(-4px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+.search-results-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 14px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid #30363d;
+}
+.search-results-summary {
+    color: #8b949e;
+    font-size: 13px;
+}
+.search-results-summary strong {
+    color: #58a6ff;
+}
+.search-close-btn {
+    background: none;
+    border: none;
+    color: #8b949e;
+    font-size: 22px;
+    cursor: pointer;
+    padding: 0 4px;
+    line-height: 1;
+    transition: color 0.2s;
+}
+.search-close-btn:hover {
+    color: #f85149;
+}
+.search-section {
+    margin-bottom: 16px;
+}
+.search-section:last-of-type {
+    margin-bottom: 0;
+}
+.search-section-title {
+    color: #58a6ff;
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0 0 8px 0;
+}
+.search-pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 12px;
+    padding-top: 10px;
+    border-top: 1px solid #30363d;
+}
+.search-no-results {
+    text-align: center;
+    color: #4a515a;
+    padding: 24px 0;
+    font-size: 14px;
+}
+
+/* ── Empty State (no data rows) ───────────────────── */
+.empty-state {
+    text-align: center;
+    color: #4a515a;
+    padding: 20px 12px;
+}