much better

templates/_pagination.html

@@ -1,74 +1,31 @@
-<div class="flex justify-between items-center mt-4 px-2">
-  <div class="text-sm text-gray-700">
-    Showing {{ ((current_page - 1) * per_page) + 1 }} to 
-    {% if current_page * per_page < total_projects %}
-      {{ current_page * per_page }}
-    {% else %}
-      {{ total_projects }}
-    {% endif %}
-    of {{ total_projects }} projects
-  </div>
+{% if total_pages > 1 %}
+<div class="flex justify-center items-center mt-6 space-x-2">
+  {% if current_page > 1 %}
+  <a href="{{ url_for(request.endpoint, page=current_page - 1) }}" class="px-3 py-2 text-sm text-slate-600 bg-white border border-slate-300 rounded-md hover:bg-slate-50">
+    Previous
+  </a>
+  {% else %}
+  <span class="px-3 py-2 text-sm text-slate-400 bg-white border border-slate-300 rounded-md cursor-not-allowed">Previous</span>
+  {% endif %}
   
-  <div class="flex space-x-2">
-    <!-- Previous Button -->
-    {% if current_page > 1 %}
-      <a href="{{ url_for('dashboard', page=current_page - 1) }}" 
-         class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors">
-        Previous
-      </a>
-    {% else %}
-      <span class="px-3 py-1 text-sm text-gray-400 bg-gray-50 rounded cursor-not-allowed">
-        Previous
-      </span>
+  {% for page in range(1, total_pages + 1) %}
+    {% if page == current_page %}
+    <span class="px-3 py-2 text-sm font-medium text-white bg-blue-600 border border-blue-600 rounded-md">{{ page }}</span>
+    {% elif page == 1 or page == total_pages or (page >= current_page - 2 and page <= current_page + 2) %}
+    <a href="{{ url_for(request.endpoint, page=page) }}" class="px-3 py-2 text-sm text-slate-600 bg-white border border-slate-300 rounded-md hover:bg-slate-50">
+      {{ page }}
+    </a>
+    {% elif page == current_page - 3 or page == current_page + 3 %}
+    <span class="px-3 py-2 text-sm text-slate-400">...</span>
     {% endif %}
-    
-    <!-- Page Numbers -->
-    {% set start_page = [1, current_page - 2]|max %}
-    {% set end_page = [total_pages, current_page + 2]|min %}
-    
-    {% if start_page > 1 %}
-      <a href="{{ url_for('dashboard', page=1) }}" 
-         class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors">
-        1
-      </a>
-      {% if start_page > 2 %}
-        <span class="px-3 py-1 text-sm text-gray-400">...</span>
-      {% endif %}
-    {% endif %}
-    
-    {% for page_num in range(start_page, end_page + 1) %}
-      {% if page_num == current_page %}
-        <span class="px-3 py-1 text-sm bg-blue-600 text-white rounded">
-          {{ page_num }}
-        </span>
-      {% else %}
-        <a href="{{ url_for('dashboard', page=page_num) }}" 
-           class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors">
-          {{ page_num }}
-        </a>
-      {% endif %}
-    {% endfor %}
-    
-    {% if end_page < total_pages %}
-      {% if end_page < total_pages - 1 %}
-        <span class="px-3 py-1 text-sm text-gray-400">...</span>
-      {% endif %}
-      <a href="{{ url_for('dashboard', page=total_pages) }}" 
-         class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors">
-        {{ total_pages }}
-      </a>
-    {% endif %}
-    
-    <!-- Next Button -->
-    {% if current_page < total_pages %}
-      <a href="{{ url_for('dashboard', page=current_page + 1) }}" 
-         class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded hover:bg-gray-200 transition-colors">
-        Next
-      </a>
-    {% else %}
-      <span class="px-3 py-1 text-sm text-gray-400 bg-gray-50 rounded cursor-not-allowed">
-        Next
-      </span>
-    {% endif %}
-  </div>
-</div>
+  {% endfor %}
+  
+  {% if current_page < total_pages %}
+  <a href="{{ url_for(request.endpoint, page=current_page + 1) }}" class="px-3 py-2 text-sm text-slate-600 bg-white border border-slate-300 rounded-md hover:bg-slate-50">
+    Next
+  </a>
+  {% else %}
+  <span class="px-3 py-2 text-sm text-slate-400 bg-white border border-slate-300 rounded-md cursor-not-allowed">Next</span>
+  {% endif %}
+</div>
+{% endif %}

templates/admin_user_edit.html

@@ -0,0 +1,88 @@
+{% extends 'base.html' %}
+{% block content %}
+<div class="h-full flex flex-col max-w-2xl mx-auto">
+  <h1 class="text-xl font-semibold mb-6">Edit User: {{ user.user_email }}</h1>
+  
+  <form id="userForm" class="space-y-6">
+    <div>
+      <label for="user_email" class="block text-sm font-medium text-slate-700">User Email</label>
+      <input type="email" id="user_email" name="user_email" 
+             value="{{ user.user_email }}" 
+             disabled
+             class="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+      <p class="mt-1 text-sm text-slate-500">This field cannot be changed as it's tied to Firebase authentication.</p>
+    </div>
+    
+    <div>
+      <label for="enabled" class="block text-sm font-medium text-slate-700">Enabled</label>
+      <div class="mt-1 flex items-center">
+        <input type="checkbox" id="enabled" name="enabled" 
+               {% if user.enabled %}checked{% endif %}
+               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded">
+        <label for="enabled" class="ml-2 block text-sm text-slate-700">Check to enable this user</label>
+      </div>
+    </div>
+    
+    <div>
+      <label for="is_admin" class="block text-sm font-medium text-slate-700">Admin</label>
+      <div class="mt-1 flex items-center">
+        <input type="checkbox" id="is_admin" name="is_admin" 
+               {% if user.is_admin %}checked{% endif %}
+               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-slate-300 rounded">
+        <label for="is_admin" class="ml-2 block text-sm text-slate-700">Check to make this user an admin</label>
+      </div>
+    </div>
+    
+    <div>
+      <label for="case_email" class="block text-sm font-medium text-slate-700">Case Email</label>
+      <input type="email" id="case_email" name="case_email" 
+             value="{{ user.case_email }}" 
+             class="mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500">
+      <p class="mt-1 text-sm text-slate-500">The email address used for project access.</p>
+    </div>
+    
+    <div class="flex justify-end space-x-3 pt-4">
+      <button type="button" onclick="window.location.href='/admin/users'" 
+              class="px-4 py-2 text-sm font-medium text-slate-700 bg-gray-100 hover:bg-gray-200 rounded-md transition-colors">
+        Cancel
+      </button>
+      <button type="submit" 
+              class="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors">
+        Save Changes
+      </button>
+    </div>
+  </form>
+</div>
+
+<script>
+document.getElementById('userForm').addEventListener('submit', function(e) {
+  e.preventDefault();
+  
+  const formData = new FormData(this);
+  const userData = {
+    uid: '{{ user.uid }}',
+    enabled: formData.get('enabled') === 'on',
+    is_admin: formData.get('is_admin') === 'on',
+    case_email: formData.get('case_email')
+  };
+  
+  fetch('/admin/users/update', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(userData)
+  })
+  .then(response => {
+    if (response.ok) {
+      window.location.href = '/admin/users';
+    } else {
+      alert('Failed to update user: ' + response.statusText);
+    }
+  })
+  .catch(error => {
+    alert('Error updating user: ' + error.message);
+  });
+});
+</script>
+{% endblock %}

templates/admin_users.html

@@ -0,0 +1,48 @@
+{% extends 'base.html' %}
+{% block content %}
+<div class="h-full flex flex-col">
+  <h1 class="text-xl font-semibold mb-4">Admin: User Management</h1>
+  
+  <div class="overflow-scroll">
+    <table class="w-full whitespace-nowrap shadow-md border border-slate-200">
+      <thead class="text-left text-sm sticky top-0 z-10 border-b border-blue-800 text-white font-medium" style="background-color: rgb(89, 121, 142);">
+        <tr>
+          <th class="px-4 py-3">User Email</th>
+          <th class="px-4 py-3">Enabled</th>
+          <th class="px-4 py-3">Admin</th>
+          <th class="px-4 py-3">Case Email</th>
+        </tr>
+      </thead>
+      <tbody class="bg-slate-100 divide-y divide-slate-300">
+        {% for user in users %}
+        <tr class="hover:bg-slate-200 transition-colors duration-150 ease-in-out cursor-pointer" onclick="window.location.href='/admin/users/{{ user.uid }}'">
+          <td class="px-4 py-3 text-sm text-slate-800">{{ user.user_email }}</td>
+          <td class="px-4 py-3 text-sm text-slate-800">
+            {% if user.enabled %}
+              <span class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs">Yes</span>
+            {% else %}
+              <span class="bg-red-100 text-red-800 px-2 py-1 rounded text-xs">No</span>
+            {% endif %}
+          </td>
+          <td class="px-4 py-3 text-sm text-slate-800">
+            {% if user.is_admin %}
+              <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs">Yes</span>
+            {% else %}
+              <span class="bg-gray-100 text-gray-800 px-2 py-1 rounded text-xs">No</span>
+            {% endif %}
+          </td>
+          <td class="px-4 py-3 text-sm text-slate-800">{{ user.case_email }}</td>
+        </tr>
+        {% else %}
+        <tr>
+          <td colspan="4" class="px-4 py-6 text-center text-slate-500">No users found.</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+  
+  <!-- Pagination -->
+  {% include '_pagination.html' %}
+</div>
+{% endblock %}

templates/base.html

@@ -19,6 +19,10 @@
       <nav class="space-x-4">
         {% if session.uid %}
         <a href="/dashboard" class="text-sm text-slate-600 hover:text-slate-900">Dashboard</a>
+        {% set profile = get_user_profile(session.uid) %}
+        {% if profile.is_admin %}
+        <a href="/admin/users" class="text-sm text-slate-600 hover:text-slate-900">Admin Users</a>
+        {% endif %}
         <a href="/logout" class="text-sm text-slate-600 hover:text-slate-900">Logout</a>
         {% else %}
         <a href="/login" class="text-sm text-slate-600 hover:text-slate-900">Login</a>

templates/welcome.html

@@ -6,6 +6,7 @@
   <ul class="mt-4 list-disc pl-6 text-sm text-slate-700">
     <li><strong>enabled</strong>: {{ 'true' if profile.enabled else 'false' }}</li>
     <li><strong>caseEmail</strong>: {{ profile.caseEmail or '—' }}</li>
+    <li><strong>user_email</strong>: {{ profile.user_email or '—' }}</li>
   </ul>
 </div>
 {% endblock %}