Pass stationId prop to Drawer controls

Refactored DrawerAPCControl and DrawerSwitchControl components to receive stationId as a prop instead of relying on stationAPI.id. Updated App and BottomToolBar to pass stationId, ensuring correct station context for socket event handling.

FRONTEND/src/App.tsx

@@ -698,9 +698,8 @@ function App() {
                 setSelectedLines={setSelectedLines}
                 isDisable={isDisable}
                 setIsDisable={setIsDisable}
-                station={
-                  stations.find((el) => el.id === Number(activeTab)) || station
-                }
+                station={station}
+                stationId={Number(activeTab)}
                 testLogContent={testLogContent}
                 isLogModalOpen={isLogModalOpen}
                 setIsLogModalOpen={setIsLogModalOpen}

FRONTEND/src/components/BottomToolBar.tsx

@@ -35,6 +35,7 @@ interface TabsProps {
   setSelectedLines: (value: React.SetStateAction<TLine[]>) => void;
   isDisable: boolean;
   station: TStation;
+  stationId: number;
   setIsDisable: (value: React.SetStateAction<boolean>) => void;
   testLogContent: string;
   isLogModalOpen: boolean;
@@ -330,6 +331,7 @@ const BottomToolBar = ({
   setActiveTabBottom,
   activeTabBottom,
   isExpand,
+  stationId,
 }: TabsProps) => {
   const user = useMemo(() => {
     return localStorage.getItem("user") &&
@@ -814,10 +816,18 @@ const BottomToolBar = ({
                   </Flex>
                 </Tabs.Panel>
                 <Tabs.Panel value="apc" ps={"xs"}>
-                  <DrawerAPCControl socket={socket} stationAPI={station} />
+                  <DrawerAPCControl
+                    socket={socket}
+                    stationAPI={station}
+                    stationId={stationId}
+                  />
                 </Tabs.Panel>
                 <Tabs.Panel value="switch" ps={"xs"}>
-                  <DrawerSwitchControl socket={socket} stationAPI={station} />
+                  <DrawerSwitchControl
+                    socket={socket}
+                    stationAPI={station}
+                    stationId={stationId}
+                  />
                 </Tabs.Panel>
               </Tabs>
             </Grid.Col>

FRONTEND/src/components/DrawerControl.tsx

@@ -19,6 +19,7 @@ import type { Socket } from "socket.io-client";
 interface DrawerProps {
   stationAPI: TStation;
   socket: Socket | null;
+  stationId: number;
 }
 
 type TSelectedOutlet = {
@@ -31,6 +32,7 @@ type TSelectedOutlet = {
 export const DrawerAPCControl: React.FC<DrawerProps> = ({
   stationAPI,
   socket,
+  stationId,
 }) => {
   const findLineByOutlet = (outlet: TSelectedOutlet) => {
     return stationAPI.lines.find(
@@ -141,7 +143,7 @@ export const DrawerAPCControl: React.FC<DrawerProps> = ({
 
   useEffect(() => {
     socket?.on("apc_output", (data) => {
-      if (data.stationId !== stationAPI.id) return;
+      if (data.stationId !== stationId) return;
       const outlets: TSelectedOutlet[] = [];
       const apc1 =
         data.apcNumber === 1
@@ -180,7 +182,7 @@ export const DrawerAPCControl: React.FC<DrawerProps> = ({
     return () => {
       socket?.off("apc_output");
     };
-  }, [socket, dataStation, stationAPI]);
+  }, [socket, dataStation, stationId]);
 
   const toggleSelect = (outlet: TSelectedOutlet, number: number) => {
     setListOutletSelected((prev) =>
@@ -706,6 +708,7 @@ export const DrawerAPCControl: React.FC<DrawerProps> = ({
 export const DrawerSwitchControl: React.FC<DrawerProps> = ({
   stationAPI,
   socket,
+  stationId,
 }) => {
   const [listPorts, setListPorts] = useState<SwitchPortsProps[][]>([]);
   const [dataStation, setDataStation] = useState<TStation>(stationAPI);
@@ -739,7 +742,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
 
   useEffect(() => {
     socket?.on("switch_output", (data) => {
-      if (data.stationId !== stationAPI.id) return;
+      if (data.stationId !== stationId) return;
       if (data?.portGroups && data?.portGroups.length > 0)
         setListPorts(data?.portGroups || []);
       setLoading(false);
@@ -748,7 +751,7 @@ export const DrawerSwitchControl: React.FC<DrawerProps> = ({
     return () => {
       socket?.off("switch_output");
     };
-  }, [socket, dataStation, stationAPI]);
+  }, [socket, dataStation, stationId]);
 
   const toggleSelect = (port: SwitchPortsProps) => {
     setListPortsSelected((prev) =>