From ed6985c6705851e9707ef89efac79e6ff9c04838 Mon Sep 17 00:00:00 2001
From: Jesper <>
Date: Wed, 9 Oct 2024 19:56:04 +0200
Subject: [PATCH] Frontend

---
 frontend/src/pages/Admin/index.tsx | 170 +++++++++++++++--------------
 frontend/src/pages/Admin/style.css |  15 +--
 2 files changed, 92 insertions(+), 93 deletions(-)

diff --git a/frontend/src/pages/Admin/index.tsx b/frontend/src/pages/Admin/index.tsx
index 9b0f5da..ac65e3f 100644
--- a/frontend/src/pages/Admin/index.tsx
+++ b/frontend/src/pages/Admin/index.tsx
@@ -143,96 +143,98 @@ export function Admin() {
         <div className="admin-dashboard">
             <h1>Admin Dashboard</h1>
 
-            <div className="section users-section">
-                <h2>Users</h2>
-                <ul>
-                    {users.map(user => (
-                        <li key={user.id}>
-                            {user.name}
-                            <button className="delete-btn" onClick={() => deleteUser(user.id)}>Delete</button>
-                        </li>
-                    ))}
-                </ul>
-            </div>
-
-            <div className="section groups-section">
-                <h2>Groups</h2>
-                <ul>
-                    {groups.map(group => (
-                        <li key={group.id}>
-                            {group.GroupName}
-                            <button className="delete-btn" onClick={() => deleteGroup(group.GroupID)}>Delete</button>
-                        </li>
-                    ))}
-                </ul>
-            </div>
-
-            <div className="section add-to-group-section">
-                <h2>Add User to Group</h2>
-                <form onSubmit={(e) => {
-                    e.preventDefault();
-                    const userId = e.target.userId.value;
-                    if (selectedGroupId) addUserToGroup(userId);
-                }}>
-                    <select name="userId">
+            <div className="grid-container">
+                <div className="section">
+                    <h2>Users</h2>
+                    <ul>
                         {users.map(user => (
-                            <option key={user.id} value={user.id}>{user.name}</option>
+                            <li key={user.id}>
+                                {user.name}
+                                <button className="delete-btn" onClick={() => deleteUser(user.id)}>Delete</button>
+                            </li>
                         ))}
-                    </select>
-                    <select
-                        name="groupId"
-                        value={selectedGroupId}
-                        onChange={(e) => setSelectedGroupId(e.target.value)}
-                    >
-                        <option value="">Select a group</option>
+                    </ul>
+                </div>
+
+                <div className="section">
+                    <h2>Groups</h2>
+                    <ul>
                         {groups.map(group => (
-                            <option key={group.id} value={group.id}>{group.GroupName}</option>
+                            <li key={group.id}>
+                                {group.GroupName}
+                                <button className="delete-btn" onClick={() => deleteGroup(group.GroupID)}>Delete</button>
+                            </li>
                         ))}
-                    </select>
-                    <button type="submit">Add User</button>
-                </form>
-            </div>
+                    </ul>
+                </div>
 
-            <div className="section register-section">
-                <h2>Register New User</h2>
-                <form onSubmit={registerUser}>
-                    <input
-                        type="text"
-                        placeholder="Username"
-                        value={newUser.username}
-                        onChange={(e) => setNewUser({ ...newUser, username: e.target.value })}
-                        required
-                    />
-                    <input
-                        type="password"
-                        placeholder="Password"
-                        value={newUser.password}
-                        onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
-                        required
-                    />
-                    <input
-                        type="text"
-                        placeholder="Name"
-                        value={newUser.name}
-                        onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
-                        required
-                    />
-                    <button type="submit">Register User</button>
-                </form>
-            </div>
+                <div className="section">
+                    <h2>Add User to Group</h2>
+                    <form onSubmit={(e) => {
+                        e.preventDefault();
+                        const userId = e.target.userId.value;
+                        if (selectedGroupId) addUserToGroup(userId);
+                    }}>
+                        <select name="userId">
+                            {users.map(user => (
+                                <option key={user.id} value={user.id}>{user.name}</option>
+                            ))}
+                        </select>
+                        <select
+                            name="groupId"
+                            value={selectedGroupId}
+                            onChange={(e) => setSelectedGroupId(e.target.value)}
+                        >
+                            <option value="">Select a group</option>
+                            {groups.map(group => (
+                                <option key={group.id} value={group.id}>{group.GroupName}</option>
+                            ))}
+                        </select>
+                        <button type="submit">Add User</button>
+                    </form>
+                </div>
 
-            <div className="section create-group-section">
-                <h2>Create New Group</h2>
-                <form onSubmit={createGroup}>
-                    <input
-                        type="text"
-                        placeholder="Group Name"
-                        value={newGroupName}
-                        onChange={(e) => setNewGroupName(e.target.value)}
-                        required
-                    />
-                    <button type="submit">Create Group</button>
-                </form>
+                <div className="section">
+                    <h2>Register New User</h2>
+                    <form onSubmit={registerUser}>
+                        <input
+                            type="text"
+                            placeholder="Username"
+                            value={newUser.username}
+                            onChange={(e) => setNewUser({ ...newUser, username: e.target.value })}
+                            required
+                        />
+                        <input
+                            type="password"
+                            placeholder="Password"
+                            value={newUser.password}
+                            onChange={(e) => setNewUser({ ...newUser, password: e.target.value })}
+                            required
+                        />
+                        <input
+                            type="text"
+                            placeholder="Name"
+                            value={newUser.name}
+                            onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
+                            required
+                        />
+                        <button type="submit">Register User</button>
+                    </form>
+                </div>
+
+                <div className="section">
+                    <h2>Create New Group</h2>
+                    <form onSubmit={createGroup}>
+                        <input
+                            type="text"
+                            placeholder="Group Name"
+                            value={newGroupName}
+                            onChange={(e) => setNewGroupName(e.target.value)}
+                            required
+                        />
+                        <button type="submit">Create Group</button>
+                    </form>
+                </div>
             </div>
         </div>
     );
diff --git a/frontend/src/pages/Admin/style.css b/frontend/src/pages/Admin/style.css
index 50ba180..3288a0a 100644
--- a/frontend/src/pages/Admin/style.css
+++ b/frontend/src/pages/Admin/style.css
@@ -14,12 +14,11 @@
     color: #b682ff;
 }
 
-/* Flexbox Layout */
 .grid-container {
     display: flex;
-    flex-wrap: wrap; /* Wrap the sections into the next row when needed */
+    flex-wrap: wrap;
     gap: 20px;
-    justify-content: space-between; /* Distribute the sections horizontally with space between */
+    justify-content: space-between;
 }
 
 .section {
@@ -27,8 +26,8 @@
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
-    flex: 1 1 30%; /* Make the section take up approximately 30% of the row */
-    min-width: 280px; /* Ensure each section has a minimum width */
+    flex: 1 1 30%;
+    min-width: 280px;
     box-sizing: border-box;
     transition: transform 0.2s ease;
 }
@@ -43,7 +42,6 @@ h2 {
     margin-bottom: 15px;
 }
 
-/* List Styles */
 ul {
     list-style: none;
     padding: 0;
@@ -102,15 +100,14 @@ button:hover {
     background-color: #9b50ff;
 }
 
-/* Responsive Adjustments */
 @media (max-width: 900px) {
     .section {
-        flex: 1 1 45%; /* For medium screens, display 2 sections per row */
+        flex: 1 1 45%;
     }
 }
 
 @media (max-width: 600px) {
     .section {
-        flex: 1 1 100%; /* For small screens, each section takes full width */
+        flex: 1 1 100%;
     }
 }