lots of front-end work

web/list_providers.php

@@ -39,18 +39,21 @@ $providers = $providers ?? [];
 <head>
 <meta charset="UTF-8">
 <title>Providers</title>
-
 <link rel="stylesheet" href="https://cosmostat.matt-cloud.com/src/styles.css">
 <style>
     body { font-family: Arial, sans-serif; margin: 2rem; }
     #search { margin-bottom: 1rem; padding: 0.5rem; width: 300px; }
     table { width: 100%; border-collapse: collapse; }
     img { max-width: 60px; height: auto; }
+    .header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
 </style>
 </head>
 <body>
 <div class="card">
+<div class="header-container">
 <h1>Providers</h1>
+  <a href="add_provider.php" class="btn">Add Provider</a>
+</div>
 <input type="text" id="search" placeholder="Search providers...">
 <table id="providers-table">
   <thead>
@@ -62,6 +65,7 @@ $providers = $providers ?? [];
       <th data-field="photo">Photo</th>
       <th data-field="rates">Rates</th>
       <th data-field="private">Private</th>
+      <th>Actions</th>
     </tr>
   </thead>
   <tbody></tbody>
@@ -84,6 +88,7 @@ function renderTable(data) {
       <td>${p.photo ? `<img src="${p.photo}" alt="Photo">` : ''}</td>
       <td>${p.rates}</td>
       <td>${p.private ? 'Yes' : 'No'}</td>
+      <td><a href="edit_provider.php?id=${p.id}">Edit</a></td>
     `;
     tbody.appendChild(tr);
   });
@@ -118,6 +123,7 @@ renderTable(providers);
 document.querySelectorAll('#providers-table th').forEach(th => {
   th.addEventListener('click', () => {
     const field = th.getAttribute('data-field');
+    if (!field) return;
     sortData(field);
   });
 });
@@ -135,3 +141,5 @@ document.getElementById('search').addEventListener('input', e => {
 </script>
 </body>
 </html>
+
+