From 78f9ca1aa1eb128983935bb7ae974b0d4307031b Mon Sep 17 00:00:00 2001
From: nguyentrungthat <80239428+nguentrungthat@users.noreply.github.com>
Date: Fri, 28 Nov 2025 15:57:12 +0700
Subject: [PATCH] Update ModalHistory.tsx

---
 FRONTEND/src/components/ModalHistory.tsx | 91 ++++++++++++++----------
 1 file changed, 53 insertions(+), 38 deletions(-)

diff --git a/FRONTEND/src/components/ModalHistory.tsx b/FRONTEND/src/components/ModalHistory.tsx
index a4d3481..e2eb39a 100644
--- a/FRONTEND/src/components/ModalHistory.tsx
+++ b/FRONTEND/src/components/ModalHistory.tsx
@@ -91,6 +91,13 @@ function ModalHistory({
     }
   }, [opened]);
 
+  // Change station or filter will reset scroll
+  useEffect(() => {
+    if (scrollViewportRef?.current) {
+      scrollViewportRef.current.scrollTop = 0;
+    }
+  }, [activeStation, activeTimePeriod]);
+
   // Utility function to format timestamp (can be used later if needed)
   // const formatTimestamp = (timestamp: number) => {
   //   const date = new Date(timestamp);
@@ -373,46 +380,54 @@ function ModalHistory({
                               </Box>
 
                               {/* Các items trong nhóm */}
-                              {items.map((item, itemIndex) => (
-                                <Box
-                                  key={`${item.stationId}-${item.number}-${item.timestamp}-${itemIndex}`}
-                                  style={{
-                                    padding: "8px 16px 8px 32px", // Tăng padding-left lên 32px
-                                    borderTop:
-                                      itemIndex > 0
-                                        ? "1px solid #f1f3f5"
-                                        : "none",
-                                    backgroundColor:
-                                      itemIndex % 2 === 0 ? "white" : "#f8f9fa",
-                                  }}
-                                >
-                                  <Text
-                                    size="sm"
-                                    style={{ fontFamily: "monospace" }}
+                              {items
+                                ?.filter((el, i) =>
+                                  activeTimePeriod === "current"
+                                    ? i === 0
+                                    : true
+                                )
+                                .map((item, itemIndex) => (
+                                  <Box
+                                    key={`${item.stationId}-${item.number}-${item.timestamp}-${itemIndex}`}
+                                    style={{
+                                      padding: "8px 16px 8px 32px", // Tăng padding-left lên 32px
+                                      borderTop:
+                                        itemIndex > 0
+                                          ? "1px solid #f1f3f5"
+                                          : "none",
+                                      backgroundColor:
+                                        itemIndex % 2 === 0
+                                          ? "white"
+                                          : "#f8f9fa",
+                                    }}
                                   >
-                                    {item.pid} {item.vid} SN: {item.sn}
-                                    <span
-                                      style={{
-                                        marginLeft: "20px",
-                                        color: "#868e96",
-                                      }}
+                                    <Text
+                                      size="sm"
+                                      style={{ fontFamily: "monospace" }}
                                     >
-                                      | {item.scenario}
-                                    </span>
-                                    <span
-                                      style={{
-                                        marginLeft: "10px",
-                                        color: "#adb5bd",
-                                        fontSize: "11px",
-                                      }}
-                                    >
-                                      {new Date(
-                                        item.timestamp
-                                      ).toLocaleString()}
-                                    </span>
-                                  </Text>
-                                </Box>
-                              ))}
+                                      {item.pid} {item.vid} SN: {item.sn}
+                                      <span
+                                        style={{
+                                          marginLeft: "20px",
+                                          color: "#868e96",
+                                        }}
+                                      >
+                                        | {item.scenario}
+                                      </span>
+                                      <span
+                                        style={{
+                                          marginLeft: "10px",
+                                          color: "#adb5bd",
+                                          fontSize: "11px",
+                                        }}
+                                      >
+                                        {new Date(
+                                          item.timestamp
+                                        ).toLocaleString()}
+                                      </span>
+                                    </Text>
+                                  </Box>
+                                ))}
                             </Box>
                           ))}