From 9bc0f96afc587e4b34aab74229d7b416e67420a7 Mon Sep 17 00:00:00 2001
From: nguyentrungthat <80239428+nguentrungthat@users.noreply.github.com>
Date: Thu, 8 Jan 2026 13:37:26 +0700
Subject: [PATCH] Update loading list log

---
 BACKEND/app/ultils/helper.ts                  |   4 +-
 BACKEND/providers/socket_io_provider.ts       |   4 +-
 FRONTEND/src/components/Drawer/DrawerLogs.tsx | 150 ++++++++++--------
 3 files changed, 88 insertions(+), 70 deletions(-)

diff --git a/BACKEND/app/ultils/helper.ts b/BACKEND/app/ultils/helper.ts
index 2e2ac56..7c8ce81 100644
--- a/BACKEND/app/ultils/helper.ts
+++ b/BACKEND/app/ultils/helper.ts
@@ -8,8 +8,8 @@ import axios from 'axios'
 import moment from 'moment'
 
 const mailTo = 'andrew.ng@apactech.io'
-// const mailCC = ['ips@ipsupply.com.au', 'kay@ipsupply.com.au', 'joseph@apactech.io']
-const mailCC = ''
+const mailCC = ['ips@ipsupply.com.au', 'kay@ipsupply.com.au', 'joseph@apactech.io']
+// const mailCC = ''
 
 type DetectAI = {
   status: string[]
diff --git a/BACKEND/providers/socket_io_provider.ts b/BACKEND/providers/socket_io_provider.ts
index 04ef700..1da7b13 100644
--- a/BACKEND/providers/socket_io_provider.ts
+++ b/BACKEND/providers/socket_io_provider.ts
@@ -294,8 +294,8 @@ export class WebSocketIo {
           .map((f) => 'storage/system_logs/' + f)
         io.to(socket.id).emit('list_logs', getListSystemLogs)
 
-        const listHistory = await this.getHistory(data?.stationId, data?.lineId)
-        io.to(socket.id).emit('list_histories', listHistory)
+        // const listHistory = await this.getHistory(data?.stationId, data?.lineId)
+        // io.to(socket.id).emit('list_histories', listHistory)
       })
 
       socket.on('get_content_log', async (data) => {
diff --git a/FRONTEND/src/components/Drawer/DrawerLogs.tsx b/FRONTEND/src/components/Drawer/DrawerLogs.tsx
index ce2f161..6cccbf1 100644
--- a/FRONTEND/src/components/Drawer/DrawerLogs.tsx
+++ b/FRONTEND/src/components/Drawer/DrawerLogs.tsx
@@ -9,6 +9,7 @@ import {
   ScrollArea,
   Tooltip,
   TextInput,
+  Loader,
 } from "@mantine/core";
 import { DateInput } from "@mantine/dates";
 import { useEffect, useState } from "react";
@@ -41,7 +42,7 @@ function DrawerLogs({
   const [systemLogs, setSystemLogs] = useState<ISystemLog[]>([]);
   const [isDownloadLog, setIsDownloadLog] = useState(false);
   // const [testLogContent, setTestLogContent] = useState("");
-  // const [isLogModalOpen, setIsLogModalOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
   const [downloadName, setDownloadName] = useState("");
   const [searchFileName, setSearchFileName] = useState("");
   const [fromDate, setFromDate] = useState<Date | null>(null);
@@ -67,6 +68,9 @@ function DrawerLogs({
           path: file,
         };
       });
+      setTimeout(() => {
+        setLoading(false);
+      }, 1000);
       setSystemLogs(
         list.sort(
           (a: ISystemLog, b: ISystemLog) =>
@@ -211,75 +215,89 @@ function DrawerLogs({
               </Grid>
             </Box>
             <ScrollArea h={"85vh"} style={{ marginTop: "15px" }}>
-              <Table
-                stickyHeader
-                striped
-                highlightOnHover
-                withRowBorders={true}
-                withTableBorder={true}
-                withColumnBorders={true}
-              >
-                <Table.Thead
+              {loading ? (
+                <Box
                   style={{
-                    top: 1,
+                    height: "10vh",
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
                   }}
                 >
-                  <Table.Tr>
-                    <Table.Th style={{ width: "50%" }}>File name</Table.Th>
-                    <Table.Th style={{ width: "30%" }}>Created at</Table.Th>
-                    <Table.Th style={{ width: "10%" }}></Table.Th>
-                  </Table.Tr>
-                </Table.Thead>
-                <Table.Tbody>
-                  {filteredLogs.map((element) => (
-                    <Table.Tr key={element.path}>
-                      <Table.Td>{element.fileName}</Table.Td>
-                      <Table.Td>
-                        <Text>
-                          {moment(element.createdAt).format("DD/MM/YYYY")}
-                        </Text>
-                      </Table.Td>
-                      <Table.Td>
-                        <Box
-                          key={"action-" + element.fileName}
-                          className={classes.optionIcon}
-                        >
-                          <IconEye
-                            className={classes.viewIcon}
-                            onClick={() => {
-                              setTestLogContent("");
-                              socket?.emit("get_content_log", {
-                                line: { systemLogUrl: element.path },
-                              });
-                              setIsLogModalOpen(true);
-                            }}
-                            width={20}
-                          />
-                          <IconDownload
-                            className={[
-                              classes.downloadIcon,
-                              isDownloadLog ? classes.isDisabled : "",
-                            ].join(" ")}
-                            onClick={() => {
-                              socket?.emit("get_content_log", {
-                                line: { systemLogUrl: element.path },
-                              });
-                              setIsDownloadLog(true);
-                              setTestLogContent("");
-                              setDownloadName(
-                                element.path.split("/")[3] ||
-                                  element.path.split("/")[2] ||
-                                  element.path.split("/")[1]
-                              );
-                            }}
-                            width={20}
-                          />
-                        </Box>
-                      </Table.Td>
+                  <Loader color="blue" />
+                </Box>
+              ) : (
+                <Table
+                  stickyHeader
+                  striped
+                  highlightOnHover
+                  withRowBorders={true}
+                  withTableBorder={true}
+                  withColumnBorders={true}
+                >
+                  <Table.Thead
+                    style={{
+                      top: 1,
+                    }}
+                  >
+                    <Table.Tr>
+                      <Table.Th style={{ width: "50%" }}>File name</Table.Th>
+                      <Table.Th style={{ width: "30%" }}>Created at</Table.Th>
+                      <Table.Th style={{ width: "10%" }}></Table.Th>
                     </Table.Tr>
-                  ))}
-                </Table.Tbody>
-              </Table>
+                  </Table.Thead>
+                  <Table.Tbody>
+                    {filteredLogs.map((element) => (
+                      <Table.Tr key={element.path}>
+                        <Table.Td>{element.fileName}</Table.Td>
+                        <Table.Td>
+                          <Text>
+                            {moment(element.createdAt).format("DD/MM/YYYY")}
+                          </Text>
+                        </Table.Td>
+                        <Table.Td>
+                          <Box
+                            key={"action-" + element.fileName}
+                            className={classes.optionIcon}
+                          >
+                            <IconEye
+                              className={classes.viewIcon}
+                              onClick={() => {
+                                setTestLogContent("");
+                                socket?.emit("get_content_log", {
+                                  line: { systemLogUrl: element.path },
+                                });
+                                setIsLogModalOpen(true);
+                              }}
+                              width={20}
+                            />
+                            <IconDownload
+                              className={[
+                                classes.downloadIcon,
+                                isDownloadLog ? classes.isDisabled : "",
+                              ].join(" ")}
+                              onClick={() => {
+                                socket?.emit("get_content_log", {
+                                  line: { systemLogUrl: element.path },
+                                });
+                                setIsDownloadLog(true);
+                                setTestLogContent("");
+                                setDownloadName(
+                                  element.path.split("/")[3] ||
+                                    element.path.split("/")[2] ||
+                                    element.path.split("/")[1]
+                                );
+                              }}
+                              width={20}
+                            />
+                          </Box>
+                        </Table.Td>
+                      </Table.Tr>
+                    ))}
+                  </Table.Tbody>
+                </Table>
+              )}
             </ScrollArea>
           </Grid.Col>
         </Grid>