added functional badges. You still have to reload the page manually aft every event.

Going to fix this in one of the next commits.

frontend_admin/.env

@@ -0,0 +1 @@
+REACT_APP_SERVER_URL=http://localhost:5002

frontend_admin/package-lock.json

@@ -12,6 +12,7 @@
         "@tanstack/react-table": "^8.21.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "dotenv": "^17.2.0",
         "js-cookie": "^3.0.5",
         "lucide-react": "^0.525.0",
         "react": "^19.1.0",
@@ -2640,6 +2641,18 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/dotenv": {
+      "version": "17.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.0.tgz",
+      "integrity": "sha512-Q4sgBT60gzd0BB0lSyYD3xM4YxrXA9y4uBDof1JNYGzOXrQdQ6yX+7XIAqoFOGQFOTK1D3Hts5OllpxMDZFONQ==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.187",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.187.tgz",

frontend_admin/package.json

@@ -15,6 +15,7 @@
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dotenv": "^17.2.0",
     "js-cookie": "^3.0.5",
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",

frontend_admin/src/App.tsx

@@ -4,6 +4,7 @@ import { useUsers } from "./utils/useUsers";
 import UserTable from "./components/UserTable";
 import { useEffect } from "react";
 import { loadTheme } from "./utils/frontendService";
+import { myToast } from "./utils/frontendService";
 import "react-toastify/dist/ReactToastify.css";
 
 function App() {
@@ -11,6 +12,7 @@ function App() {
 
   useEffect(() => {
     loadTheme();
+    myToast("User list updated", "success");
   }, []);
 
   return (

frontend_admin/src/utils/userHandler.ts

@@ -2,7 +2,7 @@ import Cookies from "js-cookie";
 import { myToast } from "./frontendService";
 
 export const loginUser = (username: string, password: string) => {
-  fetch("http://localhost:5002/api/login", {
+  fetch(`http://localhost:5002/api/login`, {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({ username, password }),
@@ -38,7 +38,7 @@ export const logout = () => {
   Cookies.remove("name");
   Cookies.remove("token");
   localStorage.removeItem("users");
-  myToast("Logged out successfully!", "info");
+  myToast("Logged out successfully!", "success");
 };
 
 export const deleteUser = (id: number) => {
@@ -52,9 +52,9 @@ export const deleteUser = (id: number) => {
   })
     .then((response) => {
       if (response.ok) {
-        replaceUsers();
+        replaceUsers("User deleted successfully!");
       } else {
-        alert("Failed to delete user");
+        myToast("Failed to delete user", "error");
       }
     })
     .catch((error) => {
@@ -62,7 +62,7 @@ export const deleteUser = (id: number) => {
     });
 };
 
-export const replaceUsers = async () => {
+export const replaceUsers = async (alertMessage: string) => {
   localStorage.removeItem("users");
   await fetch("http://localhost:5002/api/getAllUsers", {
     method: "GET",
@@ -73,7 +73,7 @@ export const replaceUsers = async () => {
     .then((res) => res.json())
     .then((users) => {
       localStorage.setItem("users", JSON.stringify(users));
-      window.location.reload();
+      myToast(alertMessage, "success");
     });
 };
 
@@ -99,7 +99,7 @@ export const updateUserFunc = async (userID: number) => {
 
   if (!usernameEl || !firstNameEl || !lastNameEl || !emailEl) {
     console.error("Required form elements not found");
-    alert("Form elements not found");
+    myToast("Form elements not found", "error");
     return;
   }
 
@@ -129,7 +129,7 @@ export const updateUserFunc = async (userID: number) => {
 
     if (response.ok) {
       console.log("User updated successfully");
-      replaceUsers();
+      replaceUsers("User updated successfully!");
     } else {
       const errorText = await response.text();
       console.error("Server error:", response.status, errorText);