From 0f5c878dd45d39563f60f770db526938ce3f6403 Mon Sep 17 00:00:00 2001
From: Truong Vo <41848815+vmtruong301296@users.noreply.github.com>
Date: Thu, 4 Dec 2025 16:10:21 +0700
Subject: [PATCH] Fix search

---
 FRONTEND/src/components/DrawerLogs.tsx | 54 ++++++++++++++++++--------
 1 file changed, 37 insertions(+), 17 deletions(-)

diff --git a/FRONTEND/src/components/DrawerLogs.tsx b/FRONTEND/src/components/DrawerLogs.tsx
index 1ee0c1b..cc2511d 100644
--- a/FRONTEND/src/components/DrawerLogs.tsx
+++ b/FRONTEND/src/components/DrawerLogs.tsx
@@ -3,7 +3,7 @@ import { Button, Box, Drawer, Grid, Table, Text, ScrollArea, Tooltip, TextInput
 import { DateInput } from "@mantine/dates";
 import { useEffect, useState } from "react";
 import type { ISystemLog } from "../untils/types";
-import { IconDownload, IconEye, IconInfoCircle } from "@tabler/icons-react";
+import { IconDownload, IconEye, IconInfoCircle, IconX } from "@tabler/icons-react";
 import classes from "./Component.module.css";
 import moment from "moment";
 import type { Socket } from "socket.io-client";
@@ -29,8 +29,8 @@ function DrawerLogs({
 	// const [isLogModalOpen, setIsLogModalOpen] = useState(false);
 	const [downloadName, setDownloadName] = useState("");
 	const [searchFileName, setSearchFileName] = useState("");
-	const [fromDate, setFromDate] = useState<string | null>(null);
-	const [toDate, setToDate] = useState<string | null>(null);
+	const [fromDate, setFromDate] = useState<Date | null>(null);
+	const [toDate, setToDate] = useState<Date | null>(null);
 
 	const [filteredLogs, setFilteredLogs] = useState<ISystemLog[]>([]);
 
@@ -76,8 +76,8 @@ function DrawerLogs({
 		// Chuẩn bị trước các giá trị search/date để tránh tính lại trong filter cho từng phần tử
 		const trimmedSearch = searchFileName.trim().toLowerCase();
 		const hasSearch = trimmedSearch.length > 0;
-		const fromMoment = fromDate ? moment(fromDate, "DD/MM/YYYY").startOf("day") : null;
-		const toMoment = toDate ? moment(toDate, "DD/MM/YYYY").endOf("day") : null;
+		const fromMoment = fromDate ? moment(fromDate).startOf("day") : null;
+		const toMoment = toDate ? moment(toDate).endOf("day") : null;
 
 		const delayDebounceFn = setTimeout(() => {
 			// Nếu không có filter nào, tránh filter tốn công, gán thẳng
@@ -146,27 +146,47 @@ function DrawerLogs({
 										placeholder="Search file name"
 										value={searchFileName}
 										onChange={(event) => setSearchFileName(event.currentTarget.value)}
+										rightSection={
+											searchFileName ? (
+												<IconX
+													size={14}
+													style={{ cursor: "pointer" }}
+													onClick={() => setSearchFileName("")}
+												/>
+											) : null
+										}
+										rightSectionPointerEvents="auto"
 										size="xs"
 									/>
 								</Grid.Col>
 								<Grid.Col span={3}>
-									<DateInput value={fromDate} onChange={setFromDate} placeholder="From date" valueFormat="DD/MM/YYYY" size="xs" clearable />
+									<DateInput
+										value={fromDate}
+										onChange={(value) => setFromDate(value as Date | null)}
+										placeholder="From date"
+										valueFormat="DD/MM/YYYY"
+										size="xs"
+										clearable
+									/>
 								</Grid.Col>
 								<Grid.Col span={3}>
-									<DateInput value={toDate} onChange={setToDate} placeholder="To date" valueFormat="DD/MM/YYYY" size="xs" clearable />
+									<DateInput
+										value={toDate}
+										onChange={(value) => setToDate(value as Date | null)}
+										placeholder="To date"
+										valueFormat="DD/MM/YYYY"
+										size="xs"
+										clearable
+									/>
 								</Grid.Col>
 							</Grid>
 						</Box>
-						<ScrollArea h={"85vh"} style={{ marginBottom: "20px" }}>
-							<Table
-								stickyHeader
-								stickyHeaderOffset={-1}
-								striped
-								highlightOnHover
-								withRowBorders={true}
-								withTableBorder={true}
-								withColumnBorders={true}>
-								<Table.Thead>
+						<ScrollArea h={"85vh"} style={{ marginTop: "15px" }}>
+							<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>