@@ -10,4 +10,4 @@ Upsun is the hosting provider for `gatech.edu` websites.
 ## Caveats
 
 - We only have access to a `mongodb:4.0` service, so we have to pin Mongoose to `8.15.2` to be compatible
-- It is a **fixed** project, not flex
+- It is a **fixed** project, not flex
@@ -1,12 +1,13 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import BogTable from "@/components/BogTable/BogTable";
 import BogDropdown from "@/components/BogDropdown/BogDropdown";
 import BogButton from "@/components/BogButton/BogButton";
 import { RIDE_COLUMNS } from "./admin-table-data";
 import type { TableRow } from "@/components/BogTable/BogTable";
 import ConfirmActionModal from "./ConfirmActionModal";
+import { useRouteUpdates } from "@/components/NotificationProvider/useRouteUpdates";
 
 type RouteEntry = {
   _id: string;
@@ -48,11 +49,14 @@ export default function RidesTable() {
   const [cancelErrors, setCancelErrors] = useState<Record<string, string>>({});
   const [pendingCancelId, setPendingCancelId] = useState<string | null>(null);
 
-  useEffect(() => {
-    let cancelled = false;
-    const load = async () => {
-      setLoading(true);
-      setError(null);
+  // `silent` refetches (real-time updates) keep the table on screen instead
+  // of swapping in the loading state.
+  const loadRides = useCallback(
+    async (options?: { silent?: boolean; isCancelled?: () => boolean }) => {
+      if (!options?.silent) {
+        setLoading(true);
+        setError(null);
+      }
       try {
         const [routesRes, locationsRes, driversRes, vehiclesRes] =
           await Promise.all([
@@ -87,8 +91,9 @@ export default function RidesTable() {
             locMap[String(loc._id)] = String(loc.name);
           }
         }
-        if (cancelled) return;
+        if (options?.isCancelled?.()) return;
         setRoutes(requested);
+        setError(null);
         setLocationMap(locMap);
         setDrivers(Array.isArray(driversData) ? driversData : []);
         setVehicles(Array.isArray(vehiclesData) ? vehiclesData : []);
@@ -97,12 +102,21 @@ export default function RidesTable() {
       } finally {
         setLoading(false);
       }
-    };
-    load();
+    },
+    [],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    void loadRides({ isCancelled: () => cancelled });
     return () => {
       cancelled = true;
     };
-  }, []);
+  }, [loadRides]);
+
+  useRouteUpdates(() => {
+    void loadRides({ silent: true });
+  });
 
   const handleAssign = async (routeId: string) => {
     const driverLabel = driverLabels[routeId];
 
@@ -6,6 +6,7 @@ import RouteModel, { RouteStatus } from "@/server/db/models/RouteModel";
 import UserModel from "@/server/db/models/UserModel";
 import VehicleModel from "@/server/db/models/VehicleModel";
 import mongoose from "mongoose";
+import { emitRouteUpdate } from "@/server/notifications/emitRouteUpdate";
 
 export async function POST(
   req: NextRequest,
@@ -126,6 +127,7 @@ export async function POST(
       route.vehicle = vehicleEmbed;
       route.status = RouteStatus.Scheduled;
       await route.save();
+      emitRouteUpdate(route);
       results.push({ rideId, success: true });
     }
 
 
@@ -27,3 +27,9 @@ body {
   color: var(--foreground);
   font-family: var(--font-paragraph);
 }
+
+/* Keep react-toast notifications below the sticky navbar (~89px tall). */
+.toastContainer.top-right {
+  top: 10.4rem;
+  z-index: 1100;
+}
@@ -1,8 +1,9 @@
 "use client";
 
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect, useMemo, useCallback } from "react";
 import styles from "./profileRides.module.css";
 import { estWeekRange, formatEstTime, formatEstDate } from "@/utils/dateEst";
+import { useRouteUpdates } from "@/components/NotificationProvider/useRouteUpdates";
 
 type RouteUser = {
   _id: string;
@@ -117,14 +118,14 @@ export function ProfileRidesTab({
     userType === "Vehicle" ? "this-week" : "all",
   );
 
-  useEffect(() => {
+  const fetchRides = useCallback(() => {
     const param =
       userType === "Driver"
         ? `driver=${userId}`
         : userType === "Vehicle"
           ? `vehicle=${userId}`
           : `student=${userId}`;
-    Promise.all([
+    return Promise.all([
       fetch(`/api/routes?${param}`).then((r) => r.json()),
       fetch("/api/locations").then((r) => r.json()),
     ])
@@ -135,11 +136,20 @@ export function ProfileRidesTab({
           for (const l of locData) map[l._id] = l.name;
         }
         setLocations(map);
+        setError(null);
       })
       .catch(() => setError("Failed to load rides."))
       .finally(() => setLoading(false));
   }, [userId, userType]);
 
+  useEffect(() => {
+    void fetchRides();
+  }, [fetchRides]);
+
+  useRouteUpdates(() => {
+    void fetchRides();
+  });
+
   const filtered = useMemo(() => {
     if (filter === "all") return routes;
     const offset = filter === "this-week" ? 0 : 1;
 
@@ -12,6 +12,7 @@ import {
   formatEstDate,
 } from "@/utils/dateEst";
 import type { Shift } from "@/utils/types/user";
+import { useRouteUpdates } from "@/components/NotificationProvider/useRouteUpdates";
 
 type Location = {
   _id: string;
@@ -157,6 +158,10 @@ export default function DriverRidesView({ userId }: { userId: string }) {
     void fetchRoutes();
   }, [mounted, fetchRoutes]);
 
+  useRouteUpdates(() => {
+    if (mounted) void fetchRoutes();
+  });
+
   const locationIdToName = useMemo(
     () =>
       locations.reduce(
 
@@ -13,6 +13,7 @@ import BogButton from "@/components/BogButton/BogButton";
 import { CancelRideModal } from "../CancelRideModal";
 import { getStudentStatusChipStyle } from "../RideCard";
 import styles from "./styles.module.css";
+import { useRouteUpdates } from "@/components/NotificationProvider/useRouteUpdates";
 
 const CANCELLABLE_STATUSES = new Set(["Requested", "Scheduled"]);
 
@@ -190,57 +191,67 @@ export default function RideDetailPage({
   }, [params]);
 
   // Fetch route data
-  useEffect(() => {
+  const fetchRoute = useCallback(async () => {
     if (!routeId || sessionStatus !== "authenticated" || !session?.user?.userId)
       return;
 
-    const fetchRoute = async () => {
-      try {
-        const res = await fetch(`/api/routes/${routeId}`);
-
-        if (!res.ok) {
-          if (res.status === 404) {
-            throw new Error("Route not found");
-          } else if (res.status === 403) {
-            throw new Error("You do not have access to this route");
-          }
-          throw new Error("Failed to fetch route");
-        }
+    try {
+      const res = await fetch(`/api/routes/${routeId}`);
 
-        const routeData: RouteData = await res.json();
-
-        if (session.user.type === "Student") {
-          const studentId = getStudentId(routeData.student);
-          if (studentId !== session.user.userId) {
-            throw new Error("You are not the student for this route");
-          }
-        } else if (session.user.type === "Driver") {
-          const driverId = getDriverId(routeData.driver);
-          if (driverId !== session.user.userId) {
-            router.push("/rides");
-            return;
-          }
-        } else {
-          throw new Error("Unauthorized");
+      if (!res.ok) {
+        if (res.status === 404) {
+          throw new Error("Route not found");
+        } else if (res.status === 403) {
+          throw new Error("You do not have access to this route");
         }
+        throw new Error("Failed to fetch route");
+      }
 
-        setRoute(routeData);
-        setError(null);
+      const routeData: RouteData = await res.json();
 
-        // Determine if chat is eligible (ride is today)
-        const chatEligible = isToday(routeData.scheduledPickupTime);
-        setIsChatEligible(chatEligible);
-      } catch (e) {
-        setError(e instanceof Error ? e.message : "Failed to fetch route");
-        setRoute(null);
-      } finally {
-        setLoading(false);
+      if (session.user.type === "Student") {
+        const studentId = getStudentId(routeData.student);
+        if (studentId !== session.user.userId) {
+          throw new Error("You are not the student for this route");
+        }
+      } else if (session.user.type === "Driver") {
+        const driverId = getDriverId(routeData.driver);
+        if (driverId !== session.user.userId) {
+          router.push("/rides");
+          return;
+        }
+      } else {
+        throw new Error("Unauthorized");
       }
-    };
 
-    fetchRoute();
+      setRoute(routeData);
+      setError(null);
+
+      // Determine if chat is eligible (ride is today)
+      const chatEligible = isToday(routeData.scheduledPickupTime);
+      setIsChatEligible(chatEligible);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to fetch route");
+      setRoute(null);
+    } finally {
+      setLoading(false);
+    }
   }, [routeId, session, sessionStatus, router]);
 
+  useEffect(() => {
+    // This effect starts an asynchronous API request.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    void fetchRoute();
+  }, [fetchRoute]);
+
+  // Refetch when this route changes elsewhere (status, driver, cancellation).
+  useRouteUpdates(
+    () => {
+      void fetchRoute();
+    },
+    { routeId },
+  );
+
   // Fetch locations
   useEffect(() => {
     if (!route) return;
 
@@ -10,6 +10,7 @@ import { RideCard } from "./RideCard";
 import DriverRidesView from "./DriverRidesView";
 import styles from "./styles.module.css";
 import { CancelRideModal } from "./CancelRideModal";
+import { useRouteUpdates } from "@/components/NotificationProvider/useRouteUpdates";
 import {
   estDateKey,
   estDayRange,
@@ -137,6 +138,11 @@ export default function RidesPage() {
     void fetchRides();
   }, [mounted, fetchRides]);
 
+  // Drivers get their own subscription inside DriverRidesView.
+  useRouteUpdates(() => {
+    if (mounted && session?.user?.type === "Student") void fetchRides();
+  });
+
   const handleCancel = useCallback(async (routeId: string) => {
     setCancellingId(routeId);
     try {
 
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
 import { useSession } from "next-auth/react";
 import { io, type Socket } from "socket.io-client";
 import { ToastContainer, toast } from "react-toast";
@@ -10,43 +10,55 @@ type ToastNotification = {
   message: string;
 };
 
+// The per-user /notifications socket, shared so pages can listen for
+// real-time data events (see useRouteUpdates). Null until connected.
+const RealtimeSocketContext = createContext<Socket | null>(null);
+
+export function useRealtimeSocket() {
+  return useContext(RealtimeSocketContext);
+}
+
 export default function NotificationProvider({
   children,
 }: {
   children: React.ReactNode;
 }) {
   const { data: session } = useSession();
-  const socketRef = useRef<Socket | null>(null);
+  const [socket, setSocket] = useState<Socket | null>(null);
 
   useEffect(() => {
     const accessToken = session?.user?.accessToken;
     const wsUrl = process.env.NEXT_PUBLIC_WS_URL;
-    if (!accessToken || !wsUrl || socketRef.current) return;
+    if (!accessToken || !wsUrl) return;
 
-    const socket = io(`${wsUrl}/notifications`, {
+    const newSocket = io(`${wsUrl}/notifications`, {
       auth: { token: accessToken },
       transports: ["websocket", "polling"],
       reconnection: true,
       reconnectionDelay: 1000,
       reconnectionDelayMax: 30000,
       reconnectionAttempts: 20,
     });
-    socketRef.current = socket;
 
-    socket.on("notification", ({ type, message }: ToastNotification) => {
+    newSocket.on("notification", ({ type, message }: ToastNotification) => {
       toast[type](message);
     });
 
+    // Publishing the socket from inside the effect is what lets consumers
+    // subscribe; it is replaced whenever the access token changes.
+    // eslint-disable-next-line react-hooks/set-state-in-effect
+    setSocket(newSocket);
+
     return () => {
-      socket.disconnect();
-      socketRef.current = null;
+      newSocket.disconnect();
+      setSocket(null);
     };
   }, [session?.user?.accessToken]);
 
   return (
-    <>
+    <RealtimeSocketContext.Provider value={socket}>
       <ToastContainer position="top-right" />
       {children}
-    </>
+    </RealtimeSocketContext.Provider>
   );
 }