Add API toast service for ARO and MCC (#599)

# Purpose
Closes #570.

# New Changes
- A standardized notification service which responds based on the
success or failure of an API call. The service is very flexible and can
be called in a variety of situations. A toast will emerge from the
top-left, and will last for five seconds. If you hover over it, the
toast will not dissapear.
- Uses `react-toastify`, so be sure to install that.
- In ARO's main.tsx, I added two buttons that you can play around with
to see how the toasts appear. Please remove them for future updates.
- Added .DS_Store to .gitignore.

# How to Use the Service

## Usage
#### Import the Service

```TypeScript
import toastService from '../services/Toast.service.ts';
```

#### Call the Service

The service should be used within logic that handles asynchronous
operations, such as in a try...catch...finally block after an API call.
On Success, call ```toastService.success()``` with a confirmation
message.
On Error, call ```toastService.error()``` with an informative error
message.

### Example Implementation for a Form
Place a single <ToastContainer /> at the application root and trigger
toasts from the API service layer.

```TypeScript
const handleFormSubmit = async (formData) => {
  try {
    await apiClient.saveData(formData);
    toastService.success("Data saved successfully!");
  } catch (err: any) {
    const message = err.response?.data?.message || "An unexpected error occurred.";
    toastService.error(`Failed to save: ${message}`);
  }
};
```

## Example in App.tsx

Try running the following code added to App.tsx. The dots ```...```
represents the rest of the code.

```TypeScript
...
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './styles/toasts.css';

import toastService from './services/Toast.service.ts'
...

function App() {
 ...
 const showSuccess = () => {
     toastService.success("This is a success message for testing!");
 };
 
 const showError = () => {
     toastService.error("This is an error message for testing.");
 };
 return (
  ...
  {/* --- TEST BUTTONS --- */}
   <div className="w-1/4 flex flex-row mt-[10%] ms-[34.5%]">
       <h3>Toast Test Controls</h3>
       <button onClick={showSuccess} className="bg-lime-400 w-1/2 cursor-pointer">Success</button>
       <button onClick={showError} className="bg-red-400 btn w-1/2 cursor-pointer">Error</button>
   </div>
   <ToastContainer />
  {/* --- END --- */}
  ...
 )
}
```

Clicking on the buttons should display the error messages respectively.

# Testing
Explain tests that you ran to verify code functionality.
- [x] I have tested this PR by running the ARO website by adding buttons
which call the toasts, and they worked as expected.
- [x] I have tested this PR by running the MCC website by adding buttons
which call the toasts, and they worked as expected.
- [x] I have included a video of the tests performed below.


https://github.com/user-attachments/assets/9fc79a4e-6791-4258-ae7b-3085ff06bf75

# Outstanding Changes
Because this is meant to be a standardized service, I tried making the
service with generality in mind. You can use this for any API call, from
backend to frontend responses (although it was designed for frontend).

---------

Co-authored-by: Qinkai Li <q95li@uwaterloo.ca>

Author: batteryspecial

gs/frontend/aro/package-lock.json

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

gs/frontend/aro/package.json

@@ -1,4 +1,6 @@
 import { Route, 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";
 import NewRequestForm from "./components/new-request/new-request-form.tsx";
@@ -23,6 +25,7 @@ function App() {
         <Route path="/login" element={<Login />} /> */}
         {<Route path="/new-request" element={<NewRequestForm />} />}
       </Routes>
+      <ToastContainer />
     </>
   );
 }

gs/frontend/aro/src/App.tsx

@@ -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/services/Toast.service.ts

@@ -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/package-lock.json

@@ -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/package.json

@@ -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;