From cd394ca1ee031cd5a001720529286f56a7d18f5f Mon Sep 17 00:00:00 2001
From: Steve White <stwhite@mac.com>
Date: Thu, 17 Oct 2024 08:11:58 -0500
Subject: [PATCH] Admin page added - create/delete users, backup and restore
 database

---
 src/components/Admin.css | 15 ++++++++++
 src/components/Admin.js  | 60 ++++++++++++++++++++++++++++++----------
 2 files changed, 60 insertions(+), 15 deletions(-)
 create mode 100644 src/components/Admin.css

diff --git a/src/components/Admin.css b/src/components/Admin.css
new file mode 100644
index 0000000..9ec3156
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/components/Admin.js b/src/components/Admin.js
index 5f4f578..4c464e4 100644
--- a/src/components/Admin.js
+++ b/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>
-        {users.map(user => (
-          <li key={user.ID}>
-            {user.username}
-            <button onClick={() => handleDeleteUser(user.ID)}>Delete</button>
-          </li>
-        ))}
-      </ul>
+      <table>
+        <thead>
+          <tr>
+            <th>Username</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.map(user => (
+            <tr key={user.ID}>
+              <td>{user.username}</td>
+              <td>
+                <button onClick={() => handleDeleteUser(user.ID)}>Delete</button>
+              </td>
+            </tr>
+          ))}
+        </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>
-      <form onSubmit={handleRestoreDatabase}>
-        <input type="file" ref={(fileInputRef)}/>
-        <button type="submit">Restore Database</button>
-      </form>
+      <h2>Database</h2>
+      <table>
+        <thead>
+          <tr>
+            <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>
-  );
-}
\ No newline at end of file
+  )};
\ No newline at end of file