From 4d9c6abc89a7063cd19fb43573786b839542eecd Mon Sep 17 00:00:00 2001
From: Truong Vo <41848815+vmtruong301296@users.noreply.github.com>
Date: Thu, 4 Dec 2025 08:26:13 +0700
Subject: [PATCH] =?UTF-8?q?Hi=E1=BB=87u=20ch=E1=BB=89nh=20thanh=20bottom?=
 =?UTF-8?q?=20bar=20g=E1=BB=8Dn=20h=C6=A1n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FRONTEND/src/components/BottomToolBar.tsx    | 125 ++++++++++---------
 FRONTEND/src/components/Component.module.css |   3 +-
 2 files changed, 70 insertions(+), 58 deletions(-)

diff --git a/FRONTEND/src/components/BottomToolBar.tsx b/FRONTEND/src/components/BottomToolBar.tsx
index 583c4a7..774ff85 100644
--- a/FRONTEND/src/components/BottomToolBar.tsx
+++ b/FRONTEND/src/components/BottomToolBar.tsx
@@ -479,7 +479,7 @@ const BottomToolBar = ({
       <motion.div
         initial={false}
         animate={{
-          height: isExpand ? "20vh" : 0,
+          height: isExpand ? "auto" : 0,
           y: 0, // đẩy xuống khi thu nhỏ
         }}
         transition={{ type: "spring", stiffness: 180, damping: 20 }}
@@ -489,6 +489,7 @@ const BottomToolBar = ({
           bottom: 0,
           left: 0,
           zIndex: 1,
+          // overflow: "hidden",
         }}
       >
         <Box style={{ position: "relative" }}>
@@ -523,7 +524,6 @@ const BottomToolBar = ({
                   setActiveTabBottom(val || "command");
                 }}
                 className={classes.containerBottom}
-                style={{ height: "20vh" }}
               >
                 <Tabs.List>
                   <Tabs.Tab
@@ -564,10 +564,10 @@ const BottomToolBar = ({
                   </Tabs.Tab>
                 </Tabs.List>
 
-                <Tabs.Panel value="command" p={"xs"}>
-                  <Flex justify={"space-between"}>
+                <Tabs.Panel value="command" p={4}>
+                  <Flex justify={"space-between"} align="flex-start">
                     <Box>
-                      <ScrollArea h={"12vh"}>
+                      <ScrollArea h={"8vh"}>
                         <Flex wrap={"wrap"} gap={"8px"} w={"420px"}>
                           {selectedLines.map((el) => (
                             <Box
@@ -615,28 +615,72 @@ const BottomToolBar = ({
                               </Flex>
                             </Box>
                           ))}
+
+                          {selectedLines.length > 0 && (
+                            <Box
+                              style={{
+                                padding: "4px 10px",
+                                height: "26px",
+                                backgroundColor: "#ffe3e3",
+                                borderRadius: "999px",
+                                cursor: "pointer",
+                                display: "flex",
+                                alignItems: "center",
+                              }}
+                              onClick={() => {
+                                selectedLines.forEach((line) => {
+                                  socket?.emit("close_cli", {
+                                    lineId: line?.id,
+                                    stationId: line.stationId || line.station_id,
+                                  });
+                                });
+                                setSelectedLines([]);
+                              }}
+                            >
+                              <Text fz={"11px"} c="red">
+                                Clear
+                              </Text>
+                            </Box>
+                          )}
                         </Flex>
                       </ScrollArea>
-                      {selectedLines?.length > 0 ? (
-                        <Button
-                          fw={400}
-                          className={classes.buttonControl}
-                          variant="outline"
+                      <Flex justify={"space-between"} align={"center"} mt={4}>
+                        <Text fz={"11px"} c="dimmed">
+                          Selected: {selectedLines.length} / {station.lines.length}
+                        </Text>
+                        <ButtonSelect
+                          selectedLines={selectedLines}
+                          setSelectedLines={setSelectedLines}
+                          station={station}
+                          userName={user?.userName}
                           onClick={() => {
-                            selectedLines.forEach((line) => {
-                              socket?.emit("close_cli", {
-                                lineId: line?.id,
-                                stationId: line.stationId || line.station_id,
+                            const lines = station.lines.filter(
+                              (line) =>
+                                !line?.userOpenCLI ||
+                                line?.userOpenCLI === user?.userName
+                            );
+                            if (selectedLines.length !== lines.length) {
+                              setSelectedLines(lines);
+                              lines.forEach((line) => {
+                                socket?.emit("open_cli", {
+                                  lineId: line.id,
+                                  stationId: line.stationId || line.station_id,
+                                  userEmail: user?.email,
+                                  userName: user?.userName,
+                                });
                               });
-                            });
-                            setSelectedLines([]);
+                            } else {
+                              selectedLines.forEach((line) => {
+                                socket?.emit("close_cli", {
+                                  lineId: line?.id,
+                                  stationId: line.stationId || line.station_id,
+                                });
+                              });
+                              setSelectedLines([]);
+                            }
                           }}
-                        >
-                          Clear
-                        </Button>
-                      ) : (
-                        ""
-                      )}
+                        />
+                      </Flex>
                     </Box>
                     <Box pl={"md"} pr={"md"}>
                       <Flex justify={"space-between"} mb={"xs"}>
@@ -716,46 +760,13 @@ const BottomToolBar = ({
                         />
                       </Box>
                     </Box>
-                    <Box style={{ width: "220px" }}>
-                      <Flex align={"center"} wrap={"wrap"} gap={"xs"}>
-                        <ButtonSelect
-                          selectedLines={selectedLines}
-                          setSelectedLines={setSelectedLines}
-                          station={station}
-                          userName={user?.userName}
-                          onClick={() => {
-                            const lines = station.lines.filter(
-                              (line) =>
-                                !line?.userOpenCLI ||
-                                line?.userOpenCLI === user?.userName
-                            );
-                            if (selectedLines.length !== lines.length) {
-                              setSelectedLines(lines);
-                              lines.forEach((line) => {
-                                socket?.emit("open_cli", {
-                                  lineId: line.id,
-                                  stationId: line.stationId || line.station_id,
-                                  userEmail: user?.email,
-                                  userName: user?.userName,
-                                });
-                              });
-                            } else {
-                              selectedLines.forEach((line) => {
-                                socket?.emit("close_cli", {
-                                  lineId: line?.id,
-                                  stationId: line.stationId || line.station_id,
-                                });
-                              });
-                              setSelectedLines([]);
-                            }
-                          }}
-                        />
+                    <Box style={{ width: "260px" }}>
+                      <Flex align={"center"} justify={"flex-end"} gap={"xs"} wrap={"wrap"}>
                         <ButtonDPELP
                           socket={socket}
                           selectedLines={selectedLines}
                           isDisable={isDisable || selectedLines.length === 0}
                           onClick={() => {
-                            // setSelectedLines([]);
                             if (
                               selectedLines.length > 0 &&
                               selectedLines.length === station?.lines?.length
diff --git a/FRONTEND/src/components/Component.module.css b/FRONTEND/src/components/Component.module.css
index 9c0d388..45d6b78 100644
--- a/FRONTEND/src/components/Component.module.css
+++ b/FRONTEND/src/components/Component.module.css
@@ -121,7 +121,8 @@
 }
 
 .containerBottom {
-  height: 22vh;
+  height: auto;
+  max-height: 20vh;
   padding: 8px;
   border: 1px solid #ccc;
   border-radius: 8px;