Better link for clients

app/templates/main/clients.html

@@ -23,11 +23,11 @@
                            value="{{ search_query if search_query else '' }}"
                            id="searchInput">
                     <button class="btn btn-primary" type="button" id="searchButton">
-                        <i class="bi bi-search"></i> Search
+                        Search
                     </button>
                     {% if search_query %}
                     <button class="btn btn-outline-secondary" type="button" id="clearSearchButton">
-                        <i class="bi bi-x"></i> Clear
+                        Clear
                     </button>
                     {% endif %}
                 </div>
@@ -41,7 +41,7 @@
             </div>
             <div class="col-md-2">
                 <button class="btn btn-outline-primary w-100" type="button" id="resetFilterButton">
-                    <i class="bi bi-arrow-clockwise"></i> Reset
+                    Reset
                 </button>
             </div>
         </div>
@@ -174,77 +174,87 @@
 {% block extra_js %}
 <script>
 document.addEventListener('DOMContentLoaded', function() {
+    console.log('Clients page JavaScript loaded');
+
     // Get URL parameters
     const urlParams = new URLSearchParams(window.location.search);
     const currentSearch = urlParams.get('search') || '';
     const currentStatus = urlParams.get('status') || '';
 
+    console.log('Current search:', currentSearch);
+    console.log('Current status filter:', currentStatus);
+
     // Set initial values
-    document.getElementById('searchInput').value = currentSearch;
-    document.getElementById('statusFilter').value = currentStatus;
+    const searchInput = document.getElementById('searchInput');
+    const statusFilter = document.getElementById('statusFilter');
 
-    // Search functionality
-    document.getElementById('searchButton').addEventListener('click', function() {
-        const searchQuery = document.getElementById('searchInput').value.trim();
-        const statusFilter = document.getElementById('statusFilter').value;
+    if (searchInput) searchInput.value = currentSearch;
+    if (statusFilter) statusFilter.value = currentStatus;
+
+    // Function to build URL with filters
+    function buildFilterUrl() {
+        const searchQuery = searchInput ? searchInput.value.trim() : '';
+        const statusValue = statusFilter ? statusFilter.value : '';
 
         let url = '{{ url_for("main.clients") }}?';
         if (searchQuery) {
             url += 'search=' + encodeURIComponent(searchQuery) + '&';
         }
-        if (statusFilter) {
-            url += 'status=' + encodeURIComponent(statusFilter) + '&';
+        if (statusValue) {
+            url += 'status=' + encodeURIComponent(statusValue) + '&';
         }
 
         // Remove trailing & or ?
         url = url.replace(/[&?]$/, '');
-        window.location.href = url;
+        return url;
+    }
+
+    // Search functionality
+    if (document.getElementById('searchButton')) {
+        document.getElementById('searchButton').addEventListener('click', function() {
+            console.log('Search button clicked');
+            window.location.href = buildFilterUrl();
         });
+    }
 
     // Clear search functionality
+    if (document.getElementById('clearSearchButton')) {
         document.getElementById('clearSearchButton').addEventListener('click', function() {
-        document.getElementById('searchInput').value = '';
-        const statusFilter = document.getElementById('statusFilter').value;
-
-        let url = '{{ url_for("main.clients") }}?';
-        if (statusFilter) {
-            url += 'status=' + encodeURIComponent(statusFilter) + '&';
-        }
-
-        // Remove trailing & or ?
-        url = url.replace(/[&?]$/, '');
-        window.location.href = url;
+            console.log('Clear search button clicked');
+            if (searchInput) searchInput.value = '';
+            window.location.href = buildFilterUrl();
         });
+    }
 
     // Status filter change
-    document.getElementById('statusFilter').addEventListener('change', function() {
-        const searchQuery = document.getElementById('searchInput').value.trim();
-        const statusFilter = this.value;
-
-        let url = '{{ url_for("main.clients") }}?';
-        if (searchQuery) {
-            url += 'search=' + encodeURIComponent(searchQuery) + '&';
-        }
     if (statusFilter) {
-            url += 'status=' + encodeURIComponent(statusFilter) + '&';
-        }
-
-        // Remove trailing & or ?
-        url = url.replace(/[&?]$/, '');
-        window.location.href = url;
+        statusFilter.addEventListener('change', function() {
+            console.log('Status filter changed to:', this.value);
+            window.location.href = buildFilterUrl();
         });
+    }
 
     // Reset filter functionality
+    if (document.getElementById('resetFilterButton')) {
         document.getElementById('resetFilterButton').addEventListener('click', function() {
+            console.log('Reset filter button clicked');
             window.location.href = '{{ url_for("main.clients") }}';
         });
+    }
 
     // Allow Enter key for search
-    document.getElementById('searchInput').addEventListener('keypress', function(e) {
+    if (searchInput) {
+        searchInput.addEventListener('keypress', function(e) {
             if (e.key === 'Enter') {
+                console.log('Enter key pressed');
+                if (document.getElementById('searchButton')) {
                     document.getElementById('searchButton').click();
+                } else {
+                    window.location.href = buildFilterUrl();
+                }
             }
         });
+    }
 });
 </script>
 {% endblock %}
\ No newline at end of file

app/templates/main/dashboard.html

-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dashboard - Fixture Manager</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: #f5f5f5;
-        }
-        .header {
-            background-color: #007bff;
-            color: white;
-            padding: 1rem 2rem;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        .logo {
-            font-size: 1.5rem;
-            font-weight: bold;
-        }
-        .nav {
-            display: flex;
-            gap: 1rem;
-        }
-        .nav a {
-            color: white;
-            text-decoration: none;
-            padding: 0.5rem 1rem;
-            border-radius: 4px;
-            transition: background-color 0.3s;
-        }
-        .nav a:hover {
-            background-color: rgba(255,255,255,0.1);
-        }
-        .container {
-            max-width: 1200px;
-            margin: 2rem auto;
-            padding: 0 2rem;
-        }
+{% extends "base.html" %}
+
+{% block title %}Dashboard - Fixture Manager{% endblock %}
+
+{% block extra_css %}
+<style>
     .welcome {
         background: white;
         padding: 2rem;
@@ -97,54 +59,10 @@
     .item-list li:last-child {
         border-bottom: none;
     }
-        .alert {
-            padding: 12px;
-            margin-bottom: 1rem;
-            border-radius: 4px;
-        }
-        .alert-error {
-            background-color: #f8d7da;
-            color: #721c24;
-            border: 1px solid #f5c6cb;
-        }
-        .alert-success {
-            background-color: #d4edda;
-            color: #155724;
-            border: 1px solid #c3e6cb;
-        }
-        .btn {
-            display: inline-block;
-            padding: 8px 16px;
-            background-color: #007bff;
-            color: white;
-            text-decoration: none;
-            border-radius: 4px;
-            font-size: 0.9rem;
-            transition: background-color 0.3s;
-        }
-        .btn:hover {
-            background-color: #0056b3;
-        }
-    </style>
-</head>
-<body>
-    <div class="header">
-        <div class="logo">🥊 Fixture Manager</div>
-        <div class="nav">
-            <a href="{{ url_for('main.dashboard') }}">Dashboard</a>
-            <a href="{{ url_for('main.fixtures') }}">Fixtures</a>
-            <a href="{{ url_for('main.uploads') }}">Uploads</a>
-            <a href="{{ url_for('main.statistics') }}">Statistics</a>
-            <a href="{{ url_for('main.clients') }}">Clients</a>
-            <a href="{{ url_for('main.user_tokens') }}">API Tokens</a>
-            {% if current_user.is_admin %}
-                <a href="{{ url_for('main.admin_panel') }}">Admin</a>
-            {% endif %}
-            <a href="{{ url_for('auth.logout') }}">Logout</a>
-        </div>
-    </div>
+</style>
+{% endblock %}
 
-    <div class="container">
+{% block content %}
         {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}
                 {% for category, message in messages %}
@@ -211,5 +129,4 @@
             </div>
         </div>
     </div>
-</body>
-</html>
\ No newline at end of file
+{% endblock %}
\ No newline at end of file