Admin page added - create/delete users, backup and restore database

src/components/Admin.css

@@ -0,0 +1,15 @@
+/* Admin.css */
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+th, td {
+  border: 1px solid #ddd;
+  padding: 10px;
+  text-align: left;
+}
+
+th {
+  background-color: #f0f0f0;
+}

src/components/Admin.js

@@ -3,6 +3,8 @@ import React, { useState, useEffect, useRef } from 'react';
 import axios from 'axios';
 import { Link, useNavigate } from 'react-router-dom';
 import { PRIMARY_COLOR, SECONDARY_COLOR } from '../App';
+import './Admin.css'; // Import the CSS file
+
 
 export default function Admin() {
   const [users, setUsers] = useState([]);
@@ -103,24 +105,52 @@ export default function Admin() {
   return (
     <div>
       <h1>Admin</h1>
-      <ul>
+      <table>
+        <thead>
+          <tr>
+            <th>Username</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
           {users.map(user => (
-          <li key={user.ID}>
+            <tr key={user.ID}>
-            {user.username}
+              <td>{user.username}</td>
+              <td>
                 <button onClick={() => handleDeleteUser(user.ID)}>Delete</button>
-          </li>
+              </td>
+            </tr>
           ))}
-      </ul>
+        </tbody>
+      </table>
       <form onSubmit={handleCreateUser}>
         <input type="text" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="Username" />
         <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Password" />
         <button type="submit">Create User</button>
       </form>
-      <button onClick={handleBackupDatabase}>Backup Database</button>
+      <h2>Database</h2>
-      <form onSubmit={handleRestoreDatabase}>
+      <table>
-        <input type="file" ref={(fileInputRef)}/>
+        <thead>
-        <button type="submit">Restore Database</button>
+          <tr>
-      </form>
+            <th>Action</th>
+            <th></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Backup</td>
+            <td>
+              <button onClick={handleBackupDatabase}>Download Backup</button>
+            </td>
+          </tr>
+          <tr>
+            <td>Restore</td>
+            <td>
+              <input type="file" ref={fileInputRef} />
+              <button onClick={handleRestoreDatabase}>Upload and Restore</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </div>
-  );
+  )};
-}