LOTS of changes

app/templates/index.html

@@ -1,43 +1,125 @@
 {% extends 'base.html' %}
-
 {% block title %}FreeRADIUS Manager{% endblock %}
 
 {% block content %}
-    <h1>FreeRADIUS Manager</h1>
+<h1 class="page-title">FreeRADIUS Manager</h1>
 
-    <h2>Statistics:</h2>
-    <p>Total Users: {{ total_users }}</p>
-    <p>Total Groups: {{ total_groups }}</p>
+<div class="stats-cards">
+  <div class="card neutral">
+    <strong>Total Users</strong>
+    <p>{{ total_users }}</p>
+  </div>
+  <div class="card neutral">
+    <strong>Total Groups</strong>
+    <p>{{ total_groups }}</p>
+  </div>
+</div>
 
-    <h2>SQL Query Tool:</h2>
-    <form method="POST" action="/sql">
-        <textarea name="query" rows="5" cols="50"></textarea><br>
-        <button type="submit">Execute Query</button>
-    </form>
+<h2>Recent Access Accepts</h2>
+<ul class="event-list green">
+  {% for entry in latest_accept %}
+    <li>
+      <strong>{{ entry.username }}</strong>
+      {% if entry.description %} ({{ entry.description }}){% endif %}
+      — {{ entry.ago }}
+    </li>
+  {% endfor %}
+</ul>
 
-    {% if sql_results %}
-        <h2>Query Results:</h2>
-        <table border="1">
-            <thead>
-                <tr>
-                    {% for key in sql_results[0].keys() %}
-                        <th>{{ key }}</th>
-                    {% endfor %}
-                </tr>
-            </thead>
-            <tbody>
-                {% for row in sql_results %}
-                    <tr>
-                        {% for value in row.values() %}
-                            <td>{{ value }}</td>
-                        {% endfor %}
-                    </tr>
-                {% endfor %}
-            </tbody>
-        </table>
-    {% endif %}
+<h2>Recent Access Rejects</h2>
+<ul class="event-list red">
+  {% for entry in latest_reject %}
+    <li>
+      <strong>{{ entry.username }}</strong>
+      {% if entry.description %} ({{ entry.description }}){% endif %}
+      — {{ entry.ago }}
+    </li>
+  {% endfor %}
+</ul>
 
-    {% if sql_error %}
-        <p style="color: red;">{{ sql_error }}</p>
-    {% endif %}
-{% endblock %}
+<hr>
+
+<h2>MAC Vendor Lookup</h2>
+<form id="mac-lookup-form" method="POST" action="/lookup_mac">
+  <input type="text" name="mac" id="mac-input" placeholder="Enter MAC address" required>
+  <button type="submit">🔍 Lookup</button>
+</form>
+
+<pre id="mac-result" class="debug-output" style="margin-top: 1em;"></pre>
+
+<script>
+document.getElementById('mac-lookup-form').addEventListener('submit', function(e) {
+  e.preventDefault();
+  const form = e.target;
+  const data = new URLSearchParams(new FormData(form));
+  const resultBox = document.getElementById('mac-result');
+  resultBox.textContent = "Querying...";
+
+  fetch(form.action, {
+    method: 'POST',
+    body: data,
+  })
+  .then(r => r.json())
+  .then(data => {
+    resultBox.textContent = JSON.stringify(data, null, 2);
+  })
+  .catch(err => {
+    resultBox.textContent = `Error: ${err}`;
+  });
+});
+</script>
+
+<style>
+.page-title {
+  margin-bottom: 1rem;
+  color: var(--fg);
+}
+
+.stats-cards {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+.card {
+  background: var(--cell-bg);
+  border: 1px solid #666;
+  padding: 1rem;
+  border-radius: 8px;
+  flex: 1;
+  text-align: center;
+}
+.card.neutral {
+  background-color: #444;
+}
+.event-list {
+  list-style: none;
+  padding: 0;
+}
+.event-list li {
+  padding: 4px 0;
+  border-bottom: 1px dashed #666;
+}
+.event-list.green li { color: #4caf50; }
+.event-list.red li { color: #ff4d4d; }
+
+#mac-lookup-form input {
+  padding: 6px;
+  border-radius: 4px;
+  border: 1px solid #999;
+  width: 250px;
+}
+#mac-lookup-form button {
+  padding: 6px 12px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+.debug-output {
+  background-color: #222;
+  color: #b6fcd5;
+  border: 1px solid #333;
+  padding: 1em;
+  font-size: 0.9rem;
+  white-space: pre-wrap;
+}
+</style>
+{% endblock %}