Merge pull request 'Refactor BottomToolBar UI and remove debug log' (#12) from that into main

Reviewed-on: #12

BACKEND/app/services/line_connection.ts

@@ -696,8 +696,6 @@ export default class LineConnection {
       timestamp: now,
     })
 
-    console.log(newItem)
-
     // Lấy phần tử cuối
     const lastItems = await redis.zrevrange(key, 0, 0)
     if (lastItems.length > 0) {

FRONTEND/src/components/BottomToolBar.tsx

@@ -22,7 +22,12 @@ import { DrawerAPCControl, DrawerSwitchControl } from "./DrawerControl";
 import DrawerScenario from "./DrawerScenario";
 import { isJsonString } from "../untils/helper";
 import { motion } from "motion/react";
-import { IconCaretDown, IconCaretUp, IconPlayerPlay, IconPlus } from "@tabler/icons-react";
+import {
+  IconCaretDown,
+  IconCaretUp,
+  IconPlayerPlay,
+  IconPlus,
+} from "@tabler/icons-react";
 
 interface TabsProps {
   selectedLines: TLine[];
@@ -345,7 +350,8 @@ const BottomToolBar = ({
                   </Tabs.Tab>
                   <Tabs.Tab
                     style={{
-                    backgroundColor: activeTabBottom === "apc" ? "#c8d9fd" : "",
+                      backgroundColor:
+                        activeTabBottom === "apc" ? "#c8d9fd" : "",
                       fontSize: "13px",
                       paddingTop: "8px",
                       paddingBottom: "8px",
@@ -370,24 +376,33 @@ const BottomToolBar = ({
 
                 <Tabs.Panel value="command" p={"xs"}>
                   <Flex justify={"space-between"}>
-                  <ScrollArea h={"15vh"}>
-                    <Flex wrap={"wrap"} gap={"xs"} w={"400px"}>
+                    <Box>
+                      <ScrollArea h={"12vh"}>
+                        <Flex wrap={"wrap"} gap={"8px"} w={"420px"}>
                           {selectedLines.map((el) => (
                             <Box
                               key={el.id}
                               style={{
-                            paddingLeft: "4px",
-                            height: "30px",
-                            width: "80px",
+                                position: "relative",
+                                padding: "4px 6px",
+                                height: "26px",
+                                width: "60px",
                                 backgroundColor: "#d4e3ff",
                                 borderRadius: "8px",
                               }}
                             >
-                          <Flex align={"center"} justify={"center"} gap={"4px"}>
-                            <Text fz={"12px"}>Line {el.lineNumber}</Text>
+                              {/* Close button góc trên phải */}
                               <CloseButton
-                              style={{ minWidth: "24px" }}
-                              aria-label="Clear input"
+                                size="xs"
+                                style={{
+                                  position: "absolute",
+                                  top: "-4px",
+                                  right: "-6px",
+                                  minWidth: "18px",
+                                  width: "18px",
+                                  height: "18px",
+                                  zIndex: 10,
+                                }}
                                 onClick={() => {
                                   setSelectedLines(
                                     selectedLines.filter(
@@ -400,11 +415,45 @@ const BottomToolBar = ({
                                   });
                                 }}
                               />
+
+                              <Flex
+                                align={"center"}
+                                justify={"center"}
+                                h="100%"
+                              >
+                                <Text fz={"11px"}>Line {el.lineNumber}</Text>
                               </Flex>
                             </Box>
                           ))}
                         </Flex>
                       </ScrollArea>
+                      {selectedLines?.length > 0 ? (
+                        <Button
+                          fw={400}
+                          className={classes.buttonControl}
+                          variant="outline"
+                          onClick={() => {
+                            const lines = station.lines.filter(
+                              (line) =>
+                                !line?.userOpenCLI ||
+                                line?.userOpenCLI === user?.userName
+                            );
+                            lines.forEach((line) => {
+                              socket?.emit("close_cli", {
+                                lineId: line?.id,
+                                stationId: line.stationId || line.station_id,
+                              });
+                            });
+                            setSelectedLines([]);
+                          }}
+                        >
+                          Clear
+                        </Button>
+                      ) : (
+                        ""
+                      )}
+                    </Box>
+
                     <Box pl={"md"} pr={"md"}>
                       <Flex justify={"space-between"} mb={"xs"}>
                         <Flex></Flex>