Make alertmail as well multilingual, implement a new more modern mailtemplate. Preserve the old as classig, as option over env

pkg/web/handlers.go

@@ -20,8 +20,10 @@ import (
 	"bytes"
 	"context"
 	"crypto/tls"
+	"encoding/json"
 	"errors"
 	"fmt"
+	"html"
 	"io"
 	"log"
 	"net"
@@ -29,9 +31,11 @@ import (
 	"net/smtp"
 	"os"
 	"path/filepath"
+	"regexp"
 	"sort"
 	"strconv"
 	"strings"
+	"sync"
 	"time"
 
 	"github.com/gin-gonic/gin"
@@ -47,6 +51,32 @@ type SummaryResponse struct {
 	Jails []fail2ban.JailInfo `json:"jails"`
 }
 
+type emailDetail struct {
+	Label string
+	Value string
+}
+
+var (
+	httpQuotedStatusPattern = regexp.MustCompile(`"[^"]*"\s+(\d{3})\b`)
+	httpPlainStatusPattern  = regexp.MustCompile(`\s(\d{3})\s+(?:\d+|-)`)
+	suspiciousLogIndicators = []string{
+		"select ",
+		"union ",
+		"/etc/passwd",
+		"/xmlrpc.php",
+		"/wp-admin",
+		"/cgi-bin",
+		"cmd=",
+		"wget",
+		"curl ",
+		"nslookup",
+		"content-length: 0",
+		"${",
+	}
+	localeCache     = make(map[string]map[string]string)
+	localeCacheLock sync.RWMutex
+)
+
 func resolveConnector(c *gin.Context) (fail2ban.Connector, error) {
 	serverID := c.Query("serverId")
 	if serverID == "" {
@@ -960,6 +990,88 @@ func RestartFail2banHandler(c *gin.Context) {
 	c.JSON(http.StatusOK, gin.H{"message": "Fail2ban restarted successfully"})
 }
 
+// loadLocale loads a locale JSON file and returns a map of translations
+func loadLocale(lang string) (map[string]string, error) {
+	localeCacheLock.RLock()
+	if cached, ok := localeCache[lang]; ok {
+		localeCacheLock.RUnlock()
+		return cached, nil
+	}
+	localeCacheLock.RUnlock()
+
+	// Determine locale file path
+	var localePath string
+	_, container := os.LookupEnv("CONTAINER")
+	if container {
+		localePath = fmt.Sprintf("/app/locales/%s.json", lang)
+	} else {
+		localePath = fmt.Sprintf("./internal/locales/%s.json", lang)
+	}
+
+	// Read locale file
+	data, err := os.ReadFile(localePath)
+	if err != nil {
+		// Fallback to English if locale file not found
+		if lang != "en" {
+			return loadLocale("en")
+		}
+		return nil, fmt.Errorf("failed to read locale file: %w", err)
+	}
+
+	var translations map[string]string
+	if err := json.Unmarshal(data, &translations); err != nil {
+		return nil, fmt.Errorf("failed to parse locale file: %w", err)
+	}
+
+	// Cache the translations
+	localeCacheLock.Lock()
+	localeCache[lang] = translations
+	localeCacheLock.Unlock()
+
+	return translations, nil
+}
+
+// getEmailTranslation gets a translation key from the locale, with fallback to English
+func getEmailTranslation(lang, key string) string {
+	translations, err := loadLocale(lang)
+	if err != nil {
+		// Try English as fallback
+		if lang != "en" {
+			translations, err = loadLocale("en")
+			if err != nil {
+				return key // Return key if all else fails
+			}
+		} else {
+			return key
+		}
+	}
+
+	if translation, ok := translations[key]; ok {
+		return translation
+	}
+
+	// Fallback to English if key not found
+	if lang != "en" {
+		enTranslations, err := loadLocale("en")
+		if err == nil {
+			if enTranslation, ok := enTranslations[key]; ok {
+				return enTranslation
+			}
+		}
+	}
+
+	return key
+}
+
+// getEmailStyle returns the email style from environment variable, defaulting to "modern"
+func getEmailStyle() string {
+	style := os.Getenv("emailStyle")
+	if style == "classic" {
+		return "classic"
+	}
+	return "modern"
+}
+
 // *******************************************************************
 // *                 Unified Email Sending Function :                *
 // *******************************************************************
@@ -1060,19 +1172,29 @@ func sendSMTPMessage(client *smtp.Client, from, to string, msg []byte) error {
 	return nil
 }
 
-// *******************************************************************
-// *                      sendBanAlert Function :                    *
-// *******************************************************************
-func sendBanAlert(ip, jail, hostname, failures, whois, logs, country string, settings config.AppSettings) error {
-	subject := fmt.Sprintf("[Fail2Ban] %s: Banned %s from %s", jail, ip, hostname)
+// renderClassicEmailDetails creates paragraph-based details for classic email template
+func renderClassicEmailDetails(details []emailDetail) string {
+	if len(details) == 0 {
+		return `<p>No metadata available.</p>`
+	}
+	var b strings.Builder
+	for _, d := range details {
+		b.WriteString(`<p><span class="label">` + html.EscapeString(d.Label) + `:</span> ` + html.EscapeString(d.Value) + `</p>`)
+		b.WriteString("\n")
+	}
+	return b.String()
+}
 
-	// Improved Responsive HTML Email
-	body := fmt.Sprintf(`<!DOCTYPE html>
+// buildClassicEmailBody creates the classic email template (original design with multilingual support)
+func buildClassicEmailBody(title, intro string, details []emailDetail, whoisHTML, logsHTML, whoisTitle, logsTitle, footerText, supportEmail string) string {
+	detailRows := renderClassicEmailDetails(details)
+	year := time.Now().Year()
+	return fmt.Sprintf(`<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Fail2Ban Alert</title>
+<title>%s</title>
 <style>
     body { font-family: Arial, sans-serif; background-color: #f4f4f4; margin: 0; padding: 0; }
     .container { max-width: 600px; margin: 20px auto; background: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0px 2px 4px rgba(0,0,0,0.1); }
@@ -1084,16 +1206,15 @@ func sendBanAlert(ip, jail, hostname, failures, whois, logs, country string, set
     .footer { text-align: center; color: #888; font-size: 12px; padding-top: 10px; border-top: 1px solid #ddd; margin-top: 15px; }
     .label { font-weight: bold; color: #333; }
     pre {
-        background: #222; /* Dark terminal-like background */
-        color: #ddd; /* Light text */
-        font-family: "Courier New", Courier, monospace; /* Monospace font */
-        font-size: 12px; /* Smaller font size */
+        background: #222;
+        color: #ddd;
+        font-family: "Courier New", Courier, monospace;
+        font-size: 12px;
         padding: 10px;
         border-radius: 5px;
-        overflow-x: auto; /* Scroll horizontally if needed */
-        white-space: pre-wrap; /* Preserve line breaks */
+        overflow-x: auto;
+        white-space: pre-wrap;
     }
-    /* Mobile Styles */
     @media screen and (max-width: 600px) {
         .container { width: 90%%; padding: 10px; }
         .header h2 { font-size: 20px; }
@@ -1104,42 +1225,259 @@ func sendBanAlert(ip, jail, hostname, failures, whois, logs, country string, set
 </head>
 <body>
     <div class="container">
-        <!-- HEADER -->
         <div class="header">
             <img src="https://swissmakers.ch/wp-content/uploads/2023/09/cyber.png" alt="Swissmakers GmbH" width="150" />
-            <h2>🚨 Security Alert from Fail2Ban-UI</h2>
+            <h2>🚨 %s</h2>
         </div>
-
-        <!-- ALERT MESSAGE -->
         <div class="content">
-            <p>A new IP has been banned due to excessive failed login attempts.</p>
-
+            <p>%s</p>
             <div class="details">
-                <p><span class="label">📌 Banned IP:</span> %s</p>
-                <p><span class="label">🛡️ Jail Name:</span> %s</p>
-                <p><span class="label">🏠 Hostname:</span> %s</p>
-                <p><span class="label">🚫 Failed Attempts:</span> %s</p>
-                <p><span class="label">🌍 Country:</span> %s</p>
+                %s
             </div>
-
-            <h3>🔍 More Information about Attacker:</h3>
-            <pre>%s</pre>
-
-            <h3>📄 Server Log Entries:</h3>
-            <pre>%s</pre>
+            <h3>🔍 %s</h3>
+            %s
+            <h3>📄 %s</h3>
+            %s
         </div>
-
-        <!-- FOOTER -->
         <div class="footer">
-            <p>This email was generated automatically by Fail2Ban.</p>
-            <p>For security inquiries, contact <a href="mailto:support@swissmakers.ch">support@swissmakers.ch</a></p>
+            <p>%s</p>
+            <p>For security inquiries, contact <a href="mailto:%s">%s</a></p>
             <p>&copy; %d Swissmakers GmbH. All rights reserved.</p>
         </div>
     </div>
 </body>
-</html>`, ip, jail, hostname, failures, country, whois, logs, time.Now().Year())
+</html>`, html.EscapeString(title), html.EscapeString(title), html.EscapeString(intro), detailRows, html.EscapeString(whoisTitle), whoisHTML, html.EscapeString(logsTitle), logsHTML, html.EscapeString(footerText), html.EscapeString(supportEmail), html.EscapeString(supportEmail), year)
+}
+
+// buildModernEmailBody creates the modern responsive email template (new design)
+func buildModernEmailBody(title, intro string, details []emailDetail, whoisHTML, logsHTML, whoisTitle, logsTitle, footerText string) string {
+	detailRows := renderEmailDetails(details)
+	year := strconv.Itoa(time.Now().Year())
+	return fmt.Sprintf(`<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>%s</title>
+  <style>
+    * { box-sizing: border-box; }
+    body { margin:0; padding:0; background-color:#f6f8fb; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:#1f2933; line-height:1.6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
+    .email-wrapper { width:100%%; padding:20px 10px; }
+    .email-container { max-width:640px; margin:0 auto; background:#ffffff; border-radius:20px; box-shadow:0 4px 20px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04); overflow:hidden; }
+    .email-header { background:linear-gradient(135deg,#004cff 0%%,#6c2bd9 100%%); color:#ffffff; padding:32px 28px; text-align:center; }
+    .email-header-brand { margin:0 0 8px; font-size:11px; letter-spacing:0.3em; text-transform:uppercase; opacity:0.9; font-weight:600; }
+    .email-header-title { margin:0 0 10px; font-size:26px; font-weight:700; line-height:1.2; }
+    .email-header-subtitle { margin:0; font-size:15px; opacity:0.95; line-height:1.5; }
+    .email-body { padding:36px 28px; }
+    .email-intro { font-size:16px; line-height:1.7; margin:0 0 28px; color:#4b5563; }
+    .email-details-wrapper { background:#f9fafb; border-radius:12px; padding:20px; margin:0 0 32px; border:1px solid #e5e7eb; }
+    .email-details-wrapper p { margin:8px 0; font-size:14px; line-height:1.6; color:#111827; }
+    .email-details-wrapper p:first-child { margin-top:0; }
+    .email-details-wrapper p:last-child { margin-bottom:0; }
+    .email-detail-label { font-weight:700; color:#374151; margin-right:8px; }
+    .email-section { margin:36px 0 0; }
+    .email-section-title { font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color:#6b7280; margin:0 0 16px; font-weight:700; }
+    .email-terminal { background:#111827; color:#f3f4f6; padding:20px; font-family:"SFMono-Regular","Consolas","Liberation Mono","Courier New",monospace; border-radius:12px; font-size:12px; line-height:1.7; white-space:pre-wrap; word-break:break-word; overflow-x:auto; margin:0; }
+    .email-log-stack { background:#0f172a; border-radius:12px; padding:16px; }
+    .email-log-line { font-family:"SFMono-Regular","Consolas","Liberation Mono","Courier New",monospace; font-size:12px; line-height:1.6; color:#cbd5f5; padding:8px 12px; border-radius:8px; margin:0 0 6px; background:rgba(255,255,255,0.05); }
+    .email-log-line:last-child { margin-bottom:0; }
+    .email-log-line-alert { background:rgba(248,113,113,0.25); color:#ffffff; border:1px solid rgba(248,113,113,0.5); }
+    .email-muted { color:#9ca3af; font-size:13px; line-height:1.6; }
+    .email-footer { border-top:1px solid #e5e7eb; padding:24px 28px; font-size:12px; color:#6b7280; text-align:center; background:#fafbfc; }
+    .email-footer-text { margin:0 0 8px; }
+    .email-footer-copyright { margin:0; font-size:11px; color:#9ca3af; }
+    @media only screen and (max-width:600px) {
+      .email-wrapper { padding:12px 8px; }
+      .email-header { padding:24px 20px; }
+      .email-header-title { font-size:22px; }
+      .email-header-subtitle { font-size:14px; }
+      .email-body { padding:28px 20px; }
+      .email-intro { font-size:15px; }
+      .email-details-wrapper { padding:16px; }
+      .email-details-wrapper p { font-size:14px; margin:10px 0; }
+      .email-footer { padding:20px 16px; }
+    }
+    @media only screen and (max-width:480px) {
+      .email-header-title { font-size:20px; }
+      .email-body { padding:24px 16px; }
+      .email-details-wrapper { padding:12px; }
+    }
+  </style>
+</head>
+<body>
+  <div class="email-wrapper">
+    <div class="email-container">
+      <div class="email-header">
+        <p class="email-header-brand">Fail2Ban UI</p>
+        <h1 class="email-header-title">%s</h1>
+        <p class="email-header-subtitle">%s</p>
+      </div>
+      <div class="email-body">
+        <p class="email-intro">%s</p>
+        <div class="email-details-wrapper">
+          %s
+        </div>
+        <div class="email-section">
+          <p class="email-section-title">%s</p>
+          %s
+        </div>
+        <div class="email-section">
+          <p class="email-section-title">%s</p>
+          %s
+        </div>
+      </div>
+      <div class="email-footer">
+        <p class="email-footer-text">%s</p>
+        <p class="email-footer-copyright">© %s Swissmakers GmbH. All rights reserved.</p>
+      </div>
+    </div>
+  </div>
+</body>
+</html>`, html.EscapeString(title), html.EscapeString(title), html.EscapeString(intro), html.EscapeString(intro), detailRows, html.EscapeString(whoisTitle), whoisHTML, html.EscapeString(logsTitle), logsHTML, html.EscapeString(footerText), year)
+}
+
+func renderEmailDetails(details []emailDetail) string {
+	if len(details) == 0 {
+		return `<p class="email-muted">No metadata available.</p>`
+	}
+	var b strings.Builder
+	for _, d := range details {
+		b.WriteString(`<p><span class="email-detail-label">` + html.EscapeString(d.Label) + `:</span> ` + html.EscapeString(d.Value) + `</p>`)
+		b.WriteString("\n")
+	}
+	return b.String()
+}
+
+func formatWhoisForEmail(whois string, lang string, isModern bool) string {
+	noDataMsg := getEmailTranslation(lang, "email.whois.no_data")
+	if strings.TrimSpace(whois) == "" {
+		if isModern {
+			return `<p class="email-muted">` + html.EscapeString(noDataMsg) + `</p>`
+		}
+		return `<pre style="background: #222; color: #ddd; font-family: 'Courier New', Courier, monospace; font-size: 12px; padding: 10px; border-radius: 5px; overflow-x: auto; white-space: pre-wrap;">` + html.EscapeString(noDataMsg) + `</pre>`
+	}
+	// Use <pre> to preserve all whitespace and newlines exactly as they are
+	if isModern {
+		return `<pre class="email-terminal">` + html.EscapeString(whois) + `</pre>`
+	}
+	return `<pre style="background: #222; color: #ddd; font-family: 'Courier New', Courier, monospace; font-size: 12px; padding: 10px; border-radius: 5px; overflow-x: auto; white-space: pre-wrap;">` + html.EscapeString(whois) + `</pre>`
+}
+
+func formatLogsForEmail(ip, logs string, lang string, isModern bool) string {
+	noLogsMsg := getEmailTranslation(lang, "email.logs.no_data")
+	if strings.TrimSpace(logs) == "" {
+		if isModern {
+			return `<p class="email-muted">` + html.EscapeString(noLogsMsg) + `</p>`
+		}
+		return `<pre style="background: #222; color: #ddd; font-family: 'Courier New', Courier, monospace; font-size: 12px; padding: 10px; border-radius: 5px; overflow-x: auto; white-space: pre-wrap;">` + html.EscapeString(noLogsMsg) + `</pre>`
+	}
+
+	if isModern {
+		var b strings.Builder
+		b.WriteString(`<div class="email-log-stack">`)
+		lines := strings.Split(logs, "\n")
+		for _, line := range lines {
+			trimmed := strings.TrimRight(line, "\r")
+			if trimmed == "" {
+				continue
+			}
+			class := "email-log-line"
+			if isSuspiciousLogLineEmail(trimmed, ip) {
+				class = "email-log-line email-log-line-alert"
+			}
+			b.WriteString(`<div class="` + class + `">` + html.EscapeString(trimmed) + `</div>`)
+		}
+		b.WriteString(`</div>`)
+		return b.String()
+	}
+
+	// Classic format: simple pre tag
+	return `<pre style="background: #222; color: #ddd; font-family: 'Courier New', Courier, monospace; font-size: 12px; padding: 10px; border-radius: 5px; overflow-x: auto; white-space: pre-wrap;">` + html.EscapeString(logs) + `</pre>`
+}
+
+func isSuspiciousLogLineEmail(line, ip string) bool {
+	trimmed := strings.TrimSpace(line)
+	if trimmed == "" {
+		return false
+	}
+	lowered := strings.ToLower(trimmed)
+	containsIP := ip != "" && strings.Contains(trimmed, ip)
+	statusCode := extractStatusCodeFromLine(trimmed)
+	hasBadStatus := statusCode >= 300
+	hasIndicator := false
+	for _, indicator := range suspiciousLogIndicators {
+		if strings.Contains(lowered, indicator) {
+			hasIndicator = true
+			break
+		}
+	}
+	if containsIP {
+		return hasBadStatus || hasIndicator
+	}
+	return (hasBadStatus || hasIndicator) && ip == ""
+}
+
+func extractStatusCodeFromLine(line string) int {
+	if match := httpQuotedStatusPattern.FindStringSubmatch(line); len(match) == 2 {
+		if code, err := strconv.Atoi(match[1]); err == nil {
+			return code
+		}
+	}
+	if match := httpPlainStatusPattern.FindStringSubmatch(line); len(match) == 2 {
+		if code, err := strconv.Atoi(match[1]); err == nil {
+			return code
+		}
+	}
+	return 0
+}
+
+// *******************************************************************
+// *                      sendBanAlert Function :                    *
+// *******************************************************************
+func sendBanAlert(ip, jail, hostname, failures, whois, logs, country string, settings config.AppSettings) error {
+	lang := settings.Language
+	if lang == "" {
+		lang = "en"
+	}
+
+	// Get translations
+	subject := fmt.Sprintf("[Fail2Ban] %s: %s %s %s %s", jail,
+		getEmailTranslation(lang, "email.ban.subject.banned"),
+		ip,
+		getEmailTranslation(lang, "email.ban.subject.from"),
+		hostname)
+
+	details := []emailDetail{
+		{Label: getEmailTranslation(lang, "email.ban.details.banned_ip"), Value: ip},
+		{Label: getEmailTranslation(lang, "email.ban.details.jail"), Value: jail},
+		{Label: getEmailTranslation(lang, "email.ban.details.hostname"), Value: hostname},
+		{Label: getEmailTranslation(lang, "email.ban.details.failed_attempts"), Value: failures},
+		{Label: getEmailTranslation(lang, "email.ban.details.country"), Value: country},
+		{Label: getEmailTranslation(lang, "email.ban.details.timestamp"), Value: time.Now().UTC().Format(time.RFC3339)},
+	}
+
+	title := getEmailTranslation(lang, "email.ban.title")
+	intro := getEmailTranslation(lang, "email.ban.intro")
+	whoisTitle := getEmailTranslation(lang, "email.ban.whois_title")
+	logsTitle := getEmailTranslation(lang, "email.ban.logs_title")
+	footerText := getEmailTranslation(lang, "email.footer.text")
+	supportEmail := "support@swissmakers.ch"
+
+	// Determine email style
+	emailStyle := getEmailStyle()
+	isModern := emailStyle == "modern"
+
+	whoisHTML := formatWhoisForEmail(whois, lang, isModern)
+	logsHTML := formatLogsForEmail(ip, logs, lang, isModern)
+
+	var body string
+	if isModern {
+		body = buildModernEmailBody(title, intro, details, whoisHTML, logsHTML, whoisTitle, logsTitle, footerText)
+	} else {
+		body = buildClassicEmailBody(title, intro, details, whoisHTML, logsHTML, whoisTitle, logsTitle, footerText, supportEmail)
+	}
 
-	// Send the email
 	return sendEmail(settings.Destemail, subject, body, settings)
 }
 
@@ -1149,10 +1487,51 @@ func sendBanAlert(ip, jail, hostname, failures, whois, logs, country string, set
 func TestEmailHandler(c *gin.Context) {
 	settings := config.GetSettings()
 
+	lang := settings.Language
+	if lang == "" {
+		lang = "en"
+	}
+
+	// Get translations
+	testDetails := []emailDetail{
+		{Label: getEmailTranslation(lang, "email.test.details.recipient"), Value: settings.Destemail},
+		{Label: getEmailTranslation(lang, "email.test.details.smtp_host"), Value: settings.SMTP.Host},
+		{Label: getEmailTranslation(lang, "email.test.details.triggered_at"), Value: time.Now().Format(time.RFC1123)},
+	}
+
+	title := getEmailTranslation(lang, "email.test.title")
+	intro := getEmailTranslation(lang, "email.test.intro")
+	whoisTitle := getEmailTranslation(lang, "email.ban.whois_title")
+	logsTitle := getEmailTranslation(lang, "email.ban.logs_title")
+	footerText := getEmailTranslation(lang, "email.footer.text")
+	whoisNoData := getEmailTranslation(lang, "email.test.whois_no_data")
+	supportEmail := "support@swissmakers.ch"
+
+	// Determine email style
+	emailStyle := getEmailStyle()
+	isModern := emailStyle == "modern"
+
+	whoisHTML := `<pre style="background: #222; color: #ddd; font-family: 'Courier New', Courier, monospace; font-size: 12px; padding: 10px; border-radius: 5px; overflow-x: auto; white-space: pre-wrap;">` + html.EscapeString(whoisNoData) + `</pre>`
+	if isModern {
+		whoisHTML = `<p class="email-muted">` + html.EscapeString(whoisNoData) + `</p>`
+	}
+
+	sampleLogs := getEmailTranslation(lang, "email.test.sample_logs")
+	logsHTML := formatLogsForEmail("", sampleLogs, lang, isModern)
+
+	var testBody string
+	if isModern {
+		testBody = buildModernEmailBody(title, intro, testDetails, whoisHTML, logsHTML, whoisTitle, logsTitle, footerText)
+	} else {
+		testBody = buildClassicEmailBody(title, intro, testDetails, whoisHTML, logsHTML, whoisTitle, logsTitle, footerText, supportEmail)
+	}
+
+	subject := getEmailTranslation(lang, "email.test.subject")
+
 	err := sendEmail(
 		settings.Destemail,
-		"Test Email from Fail2Ban UI",
-		"This is a test email sent from the Fail2Ban UI to verify SMTP settings.",
+		subject,
+		testBody,
 		settings,
 	)
 

pkg/web/templates/index.html

@@ -1033,21 +1033,41 @@
     <div class="relative flex min-h-full w-full items-center justify-center p-4 sm:p-6">
       <div class="fixed inset-0 bg-gray-500 opacity-75" aria-hidden="true"></div>
 
-      <div class="relative z-10 w-full rounded-lg bg-white text-left shadow-xl transition-all" style="max-width: 800px;">
+      <div class="relative z-10 w-full rounded-lg bg-white text-left shadow-xl transition-all" style="max-width: 1200px;">
         <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
           <div class="sm:flex sm:items-start">
             <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
-              <h3 class="text-lg leading-6 font-medium text-gray-900" data-i18n="logs.modal.insights_title">Ban Insights</h3>
-              <p class="mt-1 text-sm text-gray-500" data-i18n="logs.modal.insights_description">Country distribution and recurring offenders.</p>
+              <h3 class="text-lg leading-6 font-medium text-gray-900 mb-2" data-i18n="logs.modal.insights_title">Ban Insights</h3>
+              <p class="text-sm text-gray-600 mb-4" data-i18n="logs.modal.insights_description">Country distribution and recurring offenders.</p>
+              
+              <!-- Summary Cards -->
+              <div id="insightsSummary" class="grid gap-4 sm:grid-cols-3 mb-6"></div>
+              
+              <!-- Main Content Grid -->
+              <div class="grid gap-6 lg:grid-cols-2">
+                <!-- Country Statistics -->
+                <div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
+                  <div class="flex items-center justify-between mb-4">
+                    <div>
+                      <h4 class="text-base font-semibold text-gray-900" data-i18n="logs.modal.insights_countries">Bans by country</h4>
+                      <p class="text-xs text-gray-500 mt-1" data-i18n="logs.modal.insights_countries_hint">Top origins for the selected time range.</p>
+                    </div>
+                    <span class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-700">Geo</span>
+                  </div>
+                  <div id="countryStatsContainer" class="space-y-4 max-h-96 overflow-y-auto"></div>
+                </div>
 
-              <div class="mt-6">
-                <h4 class="text-md font-semibold text-gray-800 mb-2" data-i18n="logs.modal.insights_countries">Bans by country</h4>
-                <div id="countryStatsContainer" class="max-h-64 overflow-y-auto divide-y divide-gray-200"></div>
-              </div>
-
-              <div class="mt-6">
-                <h4 class="text-md font-semibold text-gray-800 mb-2" data-i18n="logs.modal.insights_recurring">Recurring IPs</h4>
-                <div id="recurringIPsContainer" class="max-h-64 overflow-y-auto divide-y divide-gray-200"></div>
+                <!-- Recurring IPs -->
+                <div class="border border-gray-200 rounded-lg p-4 bg-gray-50">
+                  <div class="flex items-center justify-between mb-4">
+                    <div>
+                      <h4 class="text-base font-semibold text-gray-900" data-i18n="logs.modal.insights_recurring">Recurring IPs</h4>
+                      <p class="text-xs text-gray-500 mt-1" data-i18n="logs.modal.insights_recurring_hint">IP addresses repeatedly triggering Fail2ban.</p>
+                    </div>
+                    <span class="inline-flex items-center rounded-full bg-amber-100 px-3 py-1 text-xs font-medium text-amber-700">Watchlist</span>
+                  </div>
+                  <div id="recurringIPsContainer" class="space-y-4 max-h-96 overflow-y-auto"></div>
+                </div>
               </div>
             </div>
           </div>
@@ -1309,6 +1329,18 @@
       });
     }
 
+    function formatNumber(value) {
+      var num = Number(value);
+      if (!isFinite(num)) {
+        return '0';
+      }
+      try {
+        return num.toLocaleString();
+      } catch (e) {
+        return String(num);
+      }
+    }
+
     function withServerParam(url) {
       if (!currentServerId) {
         return url;
@@ -2911,17 +2943,57 @@
     function openBanInsightsModal() {
       var countriesContainer = document.getElementById('countryStatsContainer');
       var recurringContainer = document.getElementById('recurringIPsContainer');
+      var summaryContainer = document.getElementById('insightsSummary');
+
+      var totals = (latestBanInsights && latestBanInsights.totals) || { overall: 0, today: 0, week: 0 };
+      if (summaryContainer) {
+        var summaryCards = [
+          {
+            label: t('logs.overview.total_events', 'Total stored events'),
+            value: formatNumber(totals.overall || 0),
+            sub: t('logs.modal.total_overall_note', 'Lifetime bans recorded')
+          },
+          {
+            label: t('logs.overview.total_today', 'Today'),
+            value: formatNumber(totals.today || 0),
+            sub: t('logs.modal.total_today_note', 'Last 24 hours')
+          },
+          {
+            label: t('logs.overview.total_week', 'Last 7 days'),
+            value: formatNumber(totals.week || 0),
+            sub: t('logs.modal.total_week_note', 'Weekly activity')
+          }
+        ];
+        summaryContainer.innerHTML = summaryCards.map(function(card) {
+          return ''
+            + '<div class="border border-gray-200 rounded-lg p-4 bg-white">'
+            + '  <p class="text-xs uppercase tracking-wide text-gray-500">' + escapeHtml(card.label) + '</p>'
+            + '  <p class="text-3xl font-semibold text-gray-900 mt-1">' + escapeHtml(card.value) + '</p>'
+            + '  <p class="text-xs text-gray-500 mt-1">' + escapeHtml(card.sub) + '</p>'
+            + '</div>';
+        }).join('');
+      }
 
       var countries = (latestBanInsights && latestBanInsights.countries) || [];
       if (!countries.length) {
         countriesContainer.innerHTML = '<p class="text-sm text-gray-500" data-i18n="logs.modal.insights_countries_empty">No bans recorded for this period.</p>';
       } else {
+        var totalCountries = countries.reduce(function(sum, stat) {
+          return sum + (stat.count || 0);
+        }, 0) || 1;
         var countryHTML = countries.map(function(stat) {
           var label = stat.country || t('logs.overview.country_unknown', 'Unknown');
+          var percent = Math.round(((stat.count || 0) / totalCountries) * 100);
+          percent = Math.min(Math.max(percent, 3), 100);
           return ''
-            + '<div class="flex items-center justify-between py-2">'
-            + '  <span class="font-medium">' + escapeHtml(label) + '</span>'
-            + '  <span class="text-sm text-gray-600">' + (stat.count || 0) + '</span>'
+            + '<div class="space-y-2">'
+            + '  <div class="flex items-center justify-between text-sm font-medium text-gray-800">'
+            + '    <span>' + escapeHtml(label) + '</span>'
+            + '    <span>' + formatNumber(stat.count || 0) + '</span>'
+            + '  </div>'
+            + '  <div class="w-full bg-gray-200 rounded-full h-2">'
+            + '    <div class="h-2 rounded-full bg-gradient-to-r from-blue-500 to-indigo-600" style="width:' + percent + '%;"></div>'
+            + '  </div>'
             + '</div>';
         }).join('');
         countriesContainer.innerHTML = countryHTML;
@@ -2935,16 +3007,17 @@
           var countryLabel = stat.country || t('logs.overview.country_unknown', 'Unknown');
           var lastSeenLabel = stat.lastSeen ? formatDateTime(stat.lastSeen) : '—';
           return ''
-            + '<div class="py-2">'
+            + '<div class="rounded-lg bg-white border border-gray-200 shadow-sm p-4">'
             + '  <div class="flex items-center justify-between">'
             + '    <div>'
-            + '      <p class="font-mono text-sm text-gray-900">' + escapeHtml(stat.ip || '—') + '</p>'
-            + '      <p class="text-xs text-gray-500">' + escapeHtml(countryLabel) + '</p>'
-            + '    </div>'
-            + '    <div class="text-right">'
-            + '      <p class="text-sm font-semibold">' + (stat.count || 0) + '×</p>'
-            + '      <p class="text-xs text-gray-500">' + t('logs.overview.last_seen', 'Last seen') + ': ' + escapeHtml(lastSeenLabel) + '</p>'
+            + '      <p class="font-mono text-base text-gray-900">' + escapeHtml(stat.ip || '—') + '</p>'
+            + '      <p class="text-xs text-gray-500 mt-1">' + escapeHtml(countryLabel) + '</p>'
             + '    </div>'
+            + '    <span class="inline-flex items-center rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700">' + formatNumber(stat.count || 0) + '×</span>'
+            + '  </div>'
+            + '  <div class="mt-3 flex justify-between text-xs text-gray-500">'
+            + '    <span>' + t('logs.overview.last_seen', 'Last seen') + '</span>'
+            + '    <span>' + escapeHtml(lastSeenLabel) + '</span>'
             + '  </div>'
             + '</div>';
         }).join('');