Di chuyển button BAUN trong chi tiết line

FRONTEND/src/components/Modal/ModalTerminal.tsx

@@ -525,13 +525,76 @@ const ModalTerminal = ({
                     <IconCircleCheckFilled color="green" fontSize={"18px"} />
                   )}
                 </Flex>
-                <Flex mt="4px">
+                <Flex
-                  <Text size="md" mr="6px">
+                  mt="4px"
-                    BAUD:
+                  align="center"
-                  </Text>
+                  justify="space-between"
-                  <Text size="md">
+                  style={{ width: "100%" }}
-                    <strong>{line?.baud || ""}</strong>
+                >
-                  </Text>
+                  <Flex align="center" gap="xs">
+                    <Text size="md" mr="6px">
+                      BAUD:
+                    </Text>
+                    <Text size="md">
+                      <strong>{line?.baud || ""}</strong>
+                    </Text>
+                  </Flex>
+                  <Menu
+                    closeOnItemClick={false}
+                    closeOnClickOutside={false}
+                    trigger="hover"
+                    shadow="md"
+                    position="right"
+                  >
+                    <Menu.Target>
+                      <Button
+                        fw={400}
+                        disabled={isDisable}
+                        variant="filled"
+                        size="xs"
+                        style={{
+                          height: "26px",
+                          width: "80px",
+                          marginRight: "20px",
+                        }}
+                        onClick={() => {}}
+                      >
+                        BAUD
+                      </Button>
+                    </Menu.Target>
+                    <Menu.Dropdown style={{ width: "110px" }}>
+                      <Flex
+                        justify={"space-between"}
+                        direction={"column"}
+                        style={{
+                          gap: "8px",
+                        }}
+                      >
+                        {listBaudDefault.map((el, i) => (
+                          <Button
+                            key={i}
+                            disabled={isDisable}
+                            variant="outline"
+                            size="xs"
+                            onClick={() => {
+                              if (!line) return;
+                              socket?.emit("change_baud", {
+                                stationId: line?.stationId || line?.station_id,
+                                lineId: line?.id,
+                                baud: el,
+                              });
+                              setIsDisable(true);
+                              setTimeout(() => {
+                                setIsDisable(false);
+                              }, 5000);
+                            }}
+                          >
+                            {el}
+                          </Button>
+                        ))}
+                      </Flex>
+                    </Menu.Dropdown>
+                  </Menu>
                 </Flex>
                 <Flex mt="4px" align="center">
                   <Text size="md" mr="6px">
@@ -874,79 +937,6 @@ const ModalTerminal = ({
                   </Box>
                 </Menu.Dropdown>
               </Menu>
-              <Menu
-                closeOnItemClick={false}
-                closeOnClickOutside={false}
-                trigger="hover"
-                shadow="md"
-                position="top"
-              >
-                <Menu.Target>
-                  <Button
-                    fw={400}
-                    disabled={isDisable}
-                    variant="filled"
-                    size="xs"
-                    style={{ height: "30px", width: "100px" }}
-                    onClick={() => {}}
-                  >
-                    BAUD
-                  </Button>
-                </Menu.Target>
-                <Menu.Dropdown style={{ width: "110px" }}>
-                  <Flex
-                    justify={"space-between"}
-                    direction={"column"}
-                    style={{
-                      gap: "8px",
-                    }}
-                  >
-                    {listBaudDefault.map((el, i) => (
-                      <Button
-                        key={i}
-                        disabled={isDisable}
-                        variant="outline"
-                        size="xs"
-                        fw={400}
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          socket?.emit("set_baud", {
-                            lineId: line?.id,
-                            baud: el,
-                            stationId: Number(stationItem?.id),
-                          });
-                          setIsDisable(true);
-                          setTimeout(() => {
-                            setIsDisable(false);
-                          }, 5000);
-                        }}
-                      >
-                        {el}
-                      </Button>
-                    ))}
-                    <Input
-                      placeholder="Custom"
-                      value={valueBaud}
-                      onChange={(e) => setValueBaud(e.target.value)}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter") {
-                          socket?.emit("set_baud", {
-                            lineId: line?.id,
-                            baud: Number(valueBaud),
-                            stationId: Number(stationItem?.id),
-                          });
-                          setValueBaud("");
-                          setIsDisable(true);
-                          setTimeout(() => {
-                            setIsDisable(false);
-                          }, 5000);
-                        }
-                      }}
-                    />
-                  </Flex>
-                </Menu.Dropdown>
-              </Menu>
               <Button
                 disabled={true}
                 fw={400}