reafctor toast messages into a single file

apps/frontend/app/lib/toasts.tsx

@@ -0,0 +1,64 @@
+import { toast, type ToastOptions } from 'react-toastify/unstyled';
+import { Text } from '@radix-ui/themes';
+import { ResponseErrorToastId } from '../hooks/ResponseHelper';
+
+export const displayUnexpectedErrorToast = (options: ToastOptions = {}) => {
+  toast.error(
+    <div>
+      <Text weight="bold">Unexpected Error:</Text>
+      <br /> An unexpected error occurred. Please try again later.
+    </div>,
+    {
+      position: 'top-center',
+      autoClose: false,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: false,
+      progress: undefined,
+      theme: 'colored',
+      ...options,
+    }
+  );
+};
+
+export const displayNetworkErrorToast = (options: ToastOptions = {}) => {
+  toast.error(
+    <div>
+      <Text weight="bold">Network Error:</Text>
+      <br /> Unable to reach the server. Please check your internet connection and try again.
+    </div>,
+    {
+      toastId: ResponseErrorToastId.NetworkError,
+      position: 'top-center',
+      autoClose: false,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: false,
+      progress: undefined,
+      theme: 'colored',
+      ...options,
+    }
+  );
+};
+
+export const displayForbiddenErrorToast = (options: ToastOptions = {}) => {
+  toast.error(
+    <div>
+      <Text weight="bold">Forbidden:</Text>
+      <br /> You do not have permission to perform this action.
+    </div>,
+    {
+      position: 'top-center',
+      autoClose: 5000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: false,
+      progress: undefined,
+      theme: 'colored',
+      ...options,
+    }
+  );
+};