Add API toast service for ARO and MCC

gs/frontend/aro/package.json

@@ -18,6 +18,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router-dom": "^7.9.2",
+    "react-toastify": "^11.0.5",
     "tailwindcss": "^4.1.13"
   },
   "devDependencies": {

gs/frontend/aro/services/Toast.service.ts

@@ -0,0 +1,45 @@
+import { toast, type ToastOptions } from "react-toastify";
+
+const baseToastConfig: ToastOptions = {
+  position: "top-right",
+  autoClose: 4900,
+  hideProgressBar: false,
+  closeOnClick: true,
+  pauseOnHover: true,
+  draggable: true,
+  progress: undefined,
+  theme: "dark",
+};
+
+/**
+ * Displays a success toast notification.
+ * Uses Tailwind classes directly for styling.
+ */
+export const success = (message: string): void => {
+  toast.success(message, {
+    ...baseToastConfig,
+    className:
+      "bg-black/75 border border-green-500 text-green-100 rounded-md shadow-md text-sm font-medium",
+    progressClassName: "bg-green-500",
+  });
+};
+
+/**
+ * Displays an error toast notification.
+ * Uses Tailwind classes directly for styling.
+ */
+export const error = (message: string): void => {
+  toast.error(message, {
+    ...baseToastConfig,
+    className:
+      "bg-black/75 border border-red-500 text-red-100 rounded-md shadow-md text-sm font-medium",
+    progressClassName: "bg-red-500",
+  });
+};
+
+const toastService = {
+  success,
+  error,
+};
+
+export default toastService;

gs/frontend/aro/src/App.tsx

@@ -1,4 +1,6 @@
 import { Routes } from "react-router-dom";
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import Nav from "./components/Nav";
 import Background from "./components/Background";
 
@@ -21,6 +23,7 @@ function App() {
         <Route path="/profile" element={<Profile />} />
         <Route path="/login" element={<Login />} /> */}
       </Routes>
+      <ToastContainer />
     </>
   );
 }

gs/frontend/mcc/package.json

@@ -22,13 +22,14 @@
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@tailwindcss/vite": "^4.1.13",
+    "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.544.0",
-    "@tanstack/react-table": "^8.21.3",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router-dom": "^7.8.2",
+    "react-toastify": "^11.0.5",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.13"
   },

gs/frontend/mcc/src/App.tsx

@@ -1,4 +1,6 @@
 import { Routes, Route } from "react-router-dom";
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 import Nav from "./components/Nav";
 import Background from "./components/Background";
 import Commands from "./pages/Command/Commands";
@@ -23,6 +25,7 @@ function App() {
         <Route path="/aro-requests" element={<LiveSession />} />
         <Route path="/login" element={<Login />} />
       </Routes>
+      <ToastContainer />
     </>
   );
 }

gs/frontend/mcc/src/services/Toast.service.ts

@@ -0,0 +1,45 @@
+import { toast, type ToastOptions } from "react-toastify";
+
+const baseToastConfig: ToastOptions = {
+  position: "top-right",
+  autoClose: 4900,
+  hideProgressBar: false,
+  closeOnClick: true,
+  pauseOnHover: true,
+  draggable: true,
+  progress: undefined,
+  theme: "dark",
+};
+
+/**
+ * Displays a success toast notification.
+ * Uses Tailwind classes directly for styling.
+ */
+export const success = (message: string): void => {
+  toast.success(message, {
+    ...baseToastConfig,
+    className:
+      "bg-black/75 border border-green-500 text-green-100 rounded-md shadow-md text-sm font-medium",
+    progressClassName: "bg-green-500",
+  });
+};
+
+/**
+ * Displays an error toast notification.
+ * Uses Tailwind classes directly for styling.
+ */
+export const error = (message: string): void => {
+  toast.error(message, {
+    ...baseToastConfig,
+    className:
+      "bg-black/75 border border-red-500 text-red-100 rounded-md shadow-md text-sm font-medium",
+    progressClassName: "bg-red-500",
+  });
+};
+
+const toastService = {
+  success,
+  error,
+};
+
+export default toastService;