IO-2924 add state sync on reconnect, correct treatment, and add status.

client/src/components/production-board-kanban/production-board-kanban.container.jsx

@@ -47,7 +47,7 @@ function ProductionBoardKanbanContainer({ bodyshop, currentUser, subscriptionTyp
     onError: (error) => console.error(`Error fetching jobs in production: ${error.message}`)
   });
 
-  const subscriptionEnabled = Websocket_Production?.treatment === "on";
+  const subscriptionEnabled = Websocket_Production?.treatment === "off";
 
   const { data: updatedJobs } = useSubscription(
     subscriptionType === "view" ? SUBSCRIPTION_JOBS_IN_PRODUCTION_VIEW : SUBSCRIPTION_JOBS_IN_PRODUCTION,
@@ -126,14 +126,19 @@ function ProductionBoardKanbanContainer({ bodyshop, currentUser, subscriptionTyp
       }
     };
 
+    const handleReconnect = () => {
+      //If we were disconnected from the board, we missed stuff. We need to refresh it entirely.
+      if (refetch) refetch();
+    };
     // Listen for 'job-changed' events
     socket.on("production-job-updated", handleJobUpdates);
-
+    socket.on("reconnect", handleReconnect);
     // Clean up on unmount or when dependencies change
     return () => {
       socket.off("production-job-updated", handleJobUpdates);
+      socket.off("reconnect", handleReconnect);
     };
-  }, [subscriptionEnabled, socket, bodyshop, data, client]);
+  }, [subscriptionEnabled, socket, bodyshop, data, client, refetch]);
 
   const filteredAssociationSettings = useMemo(() => {
     return associationSettings?.associations[0] || null;

client/src/components/production-list-table/production-list-table.container.jsx

@@ -27,7 +27,7 @@ export default function ProductionListTableContainer({ bodyshop, subscriptionTyp
   });
 
   // Determine if subscription is enabled
-  const subscriptionEnabled = Websocket_Production?.treatment === "on";
+  const subscriptionEnabled = Websocket_Production?.treatment === "off";
 
   // Use GraphQL query
   const { refetch, loading, data } = useQuery(QUERY_JOBS_IN_PRODUCTION, {
@@ -128,15 +128,20 @@ export default function ProductionListTableContainer({ bodyshop, subscriptionTyp
         }
       }
     };
-
+    const handleReconnect = () => {
+      //If we were disconnected from the board, we missed stuff. We need to refresh it entirely.
+      if (refetch) refetch();
+    };
     // Listen for 'production-job-updated' events
     socket.on("production-job-updated", handleJobUpdates);
+    socket.on("reconnect", handleReconnect);
 
     // Clean up on unmount or when dependencies change
     return () => {
       socket.off("production-job-updated", handleJobUpdates);
+      socket.off("reconnect", handleReconnect);
     };
-  }, [subscriptionEnabled, socket, bodyshop, client]);
+  }, [subscriptionEnabled, socket, bodyshop, client, refetch]);
 
   // Functions to fetch updated job data
   const getUpdatedJobData = async (jobId) => {

client/src/components/wss-status-display/wss-status-display.component.jsx

@@ -0,0 +1,18 @@
+import { connect } from "react-redux";
+import { GlobalOutlined } from "@ant-design/icons";
+import { createStructuredSelector } from "reselect";
+import React from "react";
+import { selectWssStatus } from "../../redux/application/application.selectors";
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  wssStatus: selectWssStatus
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(mapStateToProps, mapDispatchToProps)(WssStatusDisplay);
+
+export function WssStatusDisplay({ wssStatus }) {
+  console.log("🚀 ~ WssStatusDisplay ~ wssStatus:", wssStatus);
+  return <GlobalOutlined style={{ color: wssStatus === "connected" ? "green" : "red", marginRight: ".5rem" }} />;
+}