trithuc-mvc-react 3.5.4 → 3.5.5

package/components/DataManagement/FilterGod.jsx

@@ -1,207 +1,348 @@
-import { Accordion, AccordionSummary, Box, Button, IconButton, Slider, Typography } from "@mui/material";
-import { Grid } from "@mui/material";
-import { useFormContext } from "react-hook-form";
+import React, { useEffect, useState, useMemo } from "react";
+import {
+  Box,
+  Button,
+  Typography,
+  Paper,
+  Divider,
+  alpha,
+  Collapse,
+  Badge,
+  Grid,
+  useTheme,
+  Tooltip,
+  Zoom
+} from "@mui/material";
+import { styled } from "@mui/material/styles";
+import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import SearchRoundedIcon from "@mui/icons-material/SearchRounded";
+import KeyboardArrowDownRoundedIcon from "@mui/icons-material/KeyboardArrowDownRounded";
+import KeyboardArrowUpRoundedIcon from "@mui/icons-material/KeyboardArrowUpRounded";
+import TuneRoundedIcon from "@mui/icons-material/TuneRounded";
+import moment from "moment";
+import { debounce } from "lodash";
+import "dayjs/locale/vi";
+
 import { FilterElement } from "./FilterElement";
 import { useDataTable } from "./hooks";
 
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import AccordionDetails from "@mui/material/AccordionDetails";
-import moment from "moment";
-import { useEffect, useState } from "react";
-import { DateRangePicker } from "../date";
-import { ClearIcon, DatePicker } from "@mui/x-date-pickers";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import "dayjs/locale/vi";
-import { toast } from "react-toastify";
-import { debounce } from "lodash";
+// --- Styled Components ---
+
+const MainCard = styled(Paper)(({ theme }) => ({
+  padding: theme.spacing(1),
+  borderRadius: "12px",
+  border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
+  boxShadow: "0 10px 40px -10px rgba(0,0,0,0.05)",
+  backgroundColor: theme.palette.background.paper
+}));
+
+const AdvancedSection = styled(Box)(({ theme }) => ({
+  marginTop: theme.spacing(2),
+  padding: theme.spacing(2),
+  borderRadius: "10px",
+  backgroundColor: alpha(theme.palette.primary.main, 0.02),
+  border: `1px solid ${alpha(theme.palette.primary.main, 0.1)}`,
+  position: "relative",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    height: "4px",
+    background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.info.main})`,
+    borderRadius: "20px 20px 0 0",
+    opacity: 0.6
+  }
+}));
+
+const StyledToggleButton = styled(Button, {
+  shouldForwardProp: (prop) => prop !== "expanded"
+})(({ theme, expanded }) => ({
+  textTransform: "none",
+  fontWeight: 600,
+  fontSize: "0.75rem",
+  borderRadius: "6px",
+  padding: theme.spacing(1, 2),
+  color: expanded ? theme.palette.primary.main : theme.palette.text.secondary,
+  backgroundColor: expanded ? alpha(theme.palette.primary.main, 0.1) : "transparent",
+  "&:hover": {
+    backgroundColor: alpha(theme.palette.primary.main, 0.15)
+  }
+}));
+
+const ActionButton = styled(Button)(({ theme }) => ({
+  borderRadius: "14px",
+  padding: "10px 24px",
+  fontWeight: 700,
+  textTransform: "none",
+  transition: "all 0.2s ease-in-out",
+  "&:hover": {
+    transform: "translateY(-2px)",
+    boxShadow: `0 8px 20px -6px ${alpha(theme.palette.primary.main, 0.5)}`
+  },
+  "&:active": {
+    transform: "translateY(0)"
+  }
+}));
+
 export const FilterGod = ({ tableName, filters, filterButtons, elementSize = "small", setPage = () => {} }) => {
-  const { handleSubmit } = useFormContext();
-  const onSubmit = (data) => console.log(data);
+  const theme = useTheme();
   const { setDataSearch, dataSearch } = useDataTable();
-  // Lấy trạng thái từ localStorage hoặc mặc định là true
-  const [isFilterVisible, setFilterVisible] = useState(
-    () => JSON.parse(localStorage.getItem(`${tableName}-isFilterVisible`)) ?? false
+  // Đoạn code hoàn chỉnh cho useMemo trong FilterGod
+  const { basicFilters, advancedFilters } = useMemo(() => {
+    return {
+      // Ưu tiên hiển thị các bộ lọc có gắn tag isAdvanced: true
+      basicFilters: filters.filter((f) => f.isAdvanced === true),
+
+      // Đưa các bộ lọc còn lại (không phải params ẩn) vào vùng Collapse
+      advancedFilters: filters.filter(
+        (f) => f.isAdvanced !== true && f.type !== "default" && f.field // Đảm bảo có field để hiển thị
+      )
+    };
+  }, [filters]);
+
+  const [showAdvanced, setShowAdvanced] = useState(
+    () => JSON.parse(localStorage.getItem(`${tableName}-showAdvanced`)) ?? false
   );
 
-  // Lưu trạng thái vào localStorage mỗi khi thay đổi
   useEffect(() => {
-    localStorage.setItem(`${tableName}-isFilterVisible`, JSON.stringify(isFilterVisible));
-  }, [isFilterVisible]);
+    localStorage.setItem(`${tableName}-showAdvanced`, JSON.stringify(showAdvanced));
+  }, [showAdvanced]);
 
-  const toggleFilterVisibility = () => setFilterVisible((prev) => !prev);
+  const renderDateRange = (filter) => {
+    const { field, label } = filter;
+    const [label1, label2] = Array.isArray(label) ? label : ["Từ ngày", "Đến ngày"];
 
-  return (
-    <Box component={"form"}>
-      <Accordion expanded={isFilterVisible} onChange={toggleFilterVisibility}>
-        <AccordionSummary
-          sx={{
-            minHeight: 40,
-            "&.Mui-expanded": {
-              minHeight: 40
-            },
-            "& .MuiAccordionSummary-content": {
-              my: 0.5
+    const handleDateChange = debounce((newValue, fieldKey) => {
+      let formattedDate = null;
+      if (newValue && moment(newValue).isValid()) {
+        formattedDate = fieldKey.toLowerCase().includes("from")
+          ? moment(newValue).startOf("day").format("YYYY-MM-DD HH:mm")
+          : moment(newValue).endOf("day").format("YYYY-MM-DD HH:mm");
+      }
+      setDataSearch((prev) => ({ ...prev, [fieldKey]: formattedDate }));
+      setPage(0);
+    }, 500);
+
+    const innerDatePicker = (fieldKey, lbl) => (
+      <LocalizationProvider dateAdapter={AdapterMoment} adapterLocale="vi">
+        <DatePicker
+          label={lbl}
+          format="DD/MM/YYYY"
+          value={dataSearch?.[fieldKey] ? moment(dataSearch?.[fieldKey]) : null}
+          onChange={(val) => handleDateChange(val, fieldKey)}
+          slotProps={{
+            textField: {
+              fullWidth: true,
+              size: elementSize,
+              sx: {
+                "& .MuiOutlinedInput-root": {
+                  borderRadius: "6px",
+                  backgroundColor: alpha(theme.palette.common.white, 0.5)
+                }
+              }
             }
           }}
-          expandIcon={<ExpandMoreIcon sx={{ fontSize: "0.95rem", minHeight: "40px" }} />}
-          aria-controls="panel1a-content"
-          id="panel1a-header"
-        >
-          <Typography variant="h6" sx={{ fontSize: "0.75rem" }}>
-            Tìm kiếm
-          </Typography>
-        </AccordionSummary>
-
-        <AccordionDetails>
-          <Grid container spacing={1}>
-            {filters.map(({ field, label, placeHolder, size, ...rest }) => {
-              if (rest.type === "date-range") {
-                const [label1, label2] = Array.isArray(label) ? label : ["Từ ngày", "Đến ngày"];
-                const handleClear = (key) => {
-                  setDataSearch((prev) => ({
-                    ...prev,
-                    [key]: null // Xóa giá trị của trường được chọn
-                  }));
-                  setPage(0); // Reset trang khi clear
-                };
-
-                const handleDateChange = debounce((newValue, fieldKey, compareKey, compareType) => {
-                  let formattedDate = null;
-
-                  // Chỉ kiểm tra nếu chuỗi có độ dài tối thiểu phù hợp với định dạng "DD/MM/YYYY"
-                  const isValidDate = moment(newValue, "DD/MM/YYYY", true).isValid();
-
-                  const year = moment(newValue, "DD/MM/YYYY").year();
-
-                  if (isValidDate && year >= 1000) {
-                    // Kiểm tra năm có lớn hơn hoặc bằng 1000
-                    // Định dạng ngày khi hợp lệ
-                    if (fieldKey.toLowerCase().includes("from")) {
-                      formattedDate = moment(newValue, "DD/MM/YYYY").startOf("day").format("YYYY-MM-DD HH:mm");
-                    } else if (fieldKey.toLowerCase().includes("to")) {
-                      formattedDate = moment(newValue, "DD/MM/YYYY").endOf("day").format("YYYY-MM-DD HH:mm");
-                    }
+        />
+      </LocalizationProvider>
+    );
+
+    return (
+      <Grid container spacing={1} key={field.toString()}>
+        <Grid size={{ xs: 12, sm: 6 }}>{innerDatePicker(field[0], label1)}</Grid>
+        <Grid size={{ xs: 12, sm: 6 }}>{innerDatePicker(field[1], label2)}</Grid>
+      </Grid>
+    );
+  };
+
+  return (
+    <Box sx={{ mb: 1 }}>
+      <MainCard elevation={0}>
+        {/* Header Header */}
+        <Box sx={{ mb: 2, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
+          <Tooltip
+            title={
+              <Box sx={{ p: 1 }}>
+                <Typography
+                  variant="caption"
+                  display="block"
+                  sx={{
+                    fontWeight: 800,
+                    mb: 0.5,
+                    color: theme.palette.primary.light, // Làm nổi bật tiêu đề hướng dẫn
+                    textTransform: "uppercase",
+                    letterSpacing: "0.5px"
+                  }}
+                >
+                  Hướng dẫn lọc dữ liệu
+                </Typography>
+                <Typography variant="caption" sx={{ lineHeight: 1.6, opacity: 0.9 }}>
+                  Sử dụng các tiêu chí <b>Cơ bản</b> phía dưới hoặc kết hợp thêm
+                  <b style={{ color: theme.palette.primary.light }}> Bộ lọc nâng cao </b>
+                  để tìm kiếm kết quả chính xác nhất.
+                </Typography>
+              </Box>
+            }
+            placement="right"
+            arrow
+            TransitionComponent={Zoom}
+            slotProps={{
+              tooltip: {
+                sx: {
+                  backgroundColor: alpha(theme.palette.grey[900], 0.95), // Màu nền tối sang trọng
+                  color: "#fff",
+                  borderRadius: "12px",
+                  padding: "10px 14px",
+                  boxShadow: `0 8px 24px ${alpha(theme.palette.common.black, 0.2)}`,
+                  maxWidth: 250,
+                  border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`
+                }
+              },
+              arrow: {
+                sx: { color: alpha(theme.palette.grey[900], 0.95) }
+              }
+            }}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: 1.2,
+                cursor: "help",
+                p: "4px 8px",
+                ml: -1, // Cân bằng lề trái khi hover
+                borderRadius: "8px",
+                transition: "all 0.2s ease",
+                "&:hover": {
+                  backgroundColor: alpha(theme.palette.primary.main, 0.05), // Hiệu ứng nền nhẹ khi hover
+                  "& .search-icon": {
+                    transform: "scale(1.1) rotate(-5deg)", // Icon động nhẹ
+                    color: theme.palette.primary.dark
                   }
+                }
+              }}
+            >
+              <SearchRoundedIcon
+                className="search-icon"
+                sx={{
+                  fontSize: "1.35rem",
+                  color: theme.palette.primary.main,
+                  transition: "all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)",
+                  opacity: 0.9
+                }}
+              />
 
-                  const compareDate = dataSearch?.[compareKey] ? moment(dataSearch?.[compareKey]) : null;
-
-                  // Kiểm tra ngày so sánh
-                  if (formattedDate && compareDate) {
-                    const isInvalid =
-                      (compareType === "min" && moment(formattedDate).isBefore(compareDate)) ||
-                      (compareType === "max" && moment(formattedDate).isAfter(compareDate));
-
-                    if (isInvalid) {
-                      toast.error(
-                        compareType === "min" ? "Ngày đến không được nhỏ hơn ngày từ." : "Ngày từ không được lớn hơn ngày đến."
-                      );
-                      setDataSearch((prev) => ({
-                        ...prev,
-                        [fieldKey]: null
-                      }));
-                      return;
-                    }
+              <Typography
+                sx={{
+                  fontWeight: 700,
+                  fontSize: "0.85rem",
+                  letterSpacing: "0.2px",
+                  color: "text.primary",
+                  position: "relative",
+                  "&::after": {
+                    // Thanh trang trí nhỏ dưới chữ
+                    content: '""',
+                    position: "absolute",
+                    bottom: -2,
+                    left: 0,
+                    width: "40%",
+                    height: "2px",
+                    backgroundColor: alpha(theme.palette.primary.main, 0.3),
+                    borderRadius: "2px"
                   }
+                }}
+              >
+                Bộ Lọc Dữ Liệu
+              </Typography>
+            </Box>
+          </Tooltip>
 
-                  // Lưu ngày hợp lệ
-                  setDataSearch((prev) => ({
-                    ...prev,
-                    [fieldKey]: formattedDate
-                  }));
-                  setPage(0); // Reset page
-                }, 500); // Debounce 1000ms
-
-                // Gọi handleDateChange
-                const onInputDateChange = (e) => {
-                  handleDateChange(e.target.value, "from", "to", "min");
-                };
-
-                const renderDatePicker = (fieldKey, label, compareKey, compareType) => (
-                  <LocalizationProvider adapterLocale="vi" localeText={{ clearButtonLabel: "Xóa" }}>
-                    <DatePicker
-                      label={label}
-                      format="DD/MM/YYYY"
-                      desktopModeMediaQuery="@media (min-width: 0px)"
-                      views={["year", "month", "day"]}
-                      mask="__/__/____"
-                      minDate={
-                        compareType === "min" ? (dataSearch?.[compareKey] ? moment(dataSearch?.[compareKey]) : null) : null
-                      }
-                      maxDate={
-                        compareType === "max" ? (dataSearch?.[compareKey] ? moment(dataSearch?.[compareKey]) : null) : null
-                      }
-                      InputLabelProps={{ shrink: true }}
-                      slotProps={{
-                        textField: {
-                          fullWidth: true,
-                          InputProps: {
-                            startAdornment: (
-                              <IconButton onClick={() => handleClear(fieldKey)} aria-label="clear">
-                                <ClearIcon />
-                              </IconButton>
-                            )
-                          }
-                        },
-                        actionBar: { actions: ["clear"] }
-                      }}
-                      value={dataSearch?.[fieldKey] ? moment(dataSearch?.[fieldKey]) : null}
-                      onChange={(newValue) => handleDateChange(newValue, fieldKey, compareKey, compareType)}
-                      size={elementSize}
-                    />
-                  </LocalizationProvider>
-                );
-
-                return (
-                  <Grid sx={{ mb: "5px" }} container key={field.toString()} size={{ ...size }}>
-                    <Grid size={{ xs: 12, md: 6 }}>{renderDatePicker(field[0], label1, field[1], "max")}</Grid>
-                    <Grid size={{ xs: 12, md: 6 }}>{renderDatePicker(field[1], label2, field[0], "min")}</Grid>
-                  </Grid>
-                );
-              }
+          <Box sx={{ display: "flex", gap: 1 }}>
+            {advancedFilters.length > 0 && (
+              <Tooltip
+                title={showAdvanced ? "" : "Mở rộng bộ lọc với các tiêu chí nâng cao"}
+                placement="top"
+                arrow
+                disableInteractive
+              >
+                <Box component="span">
+                  {" "}
+                  {/* Box span giúp Tooltip hoạt động ổn định kể cả khi Badge có vấn đề */}
+                  <Badge
+                    badgeContent={advancedFilters.length}
+                    color="primary"
+                    variant="dot"
+                    invisible={showAdvanced}
+                    sx={{ "& .MuiBadge-dot": { top: 4, right: 4 } }}
+                  >
+                    <StyledToggleButton
+                      expanded={showAdvanced}
+                      onClick={() => setShowAdvanced(!showAdvanced)}
+                      startIcon={<TuneRoundedIcon />}
+                      endIcon={showAdvanced ? <KeyboardArrowUpRoundedIcon /> : <KeyboardArrowDownRoundedIcon />}
+                    >
+                      {showAdvanced ? "Thu gọn" : "Nâng cao"}
+                    </StyledToggleButton>
+                  </Badge>
+                </Box>
+              </Tooltip>
+            )}
+          </Box>
+        </Box>
 
-              if (rest.type === "slider-range") {
-                return (
-                  <Grid sx={{ mb: "5px" }} key={field.toString()} size={{ ...size }}>
-                    <Slider
-                      onChange={(e, value) => {
-                        setDataSearch({
-                          ...dataSearch,
-                          [field[0]]: value[0],
-                          [field[1]]: value[1]
-                        });
-                        setPage(0);
-                      }}
-                      size={elementSize}
-                      marks={rest.marks}
-                      defaultValue={rest.defaultValue}
-                      valueLabelDisplay="auto"
-                      max={rest.marks[rest.marks.length - 1]?.value}
-                      step={null}
-                    />
-                  </Grid>
-                );
-              }
-              return (
-                <Grid sx={{ mb: "5px" }} key={field.toString()} size={{ ...size }}>
-                  <FilterElement name={field.toString()} label={label} placeholder={placeHolder} {...rest} setPage={setPage} />
+        {/* 1. Basic Filters */}
+        <Grid container spacing={2.5}>
+          {basicFilters.map((f) => (
+            <Grid key={f.field.toString()} size={f.size || { xs: 12, md: 4, lg: 3 }}>
+              {f.type === "date-range" ? (
+                renderDateRange(f)
+              ) : (
+                <FilterElement {...f} name={f.field.toString()} setPage={setPage} size={elementSize} />
+              )}
+            </Grid>
+          ))}
+        </Grid>
+
+        {/* 2. Advanced Filters */}
+        <Collapse in={showAdvanced} timeout={400}>
+          <AdvancedSection>
+            <Grid container spacing={2.5}>
+              {advancedFilters.map((f) => (
+                <Grid key={f.field.toString()} size={f.size || { xs: 12, md: 4, lg: 3 }}>
+                  {f.type === "date-range" ? (
+                    renderDateRange(f)
+                  ) : (
+                    <FilterElement {...f} name={f.field.toString()} setPage={setPage} size={elementSize} />
+                  )}
                 </Grid>
-              );
-            })}
-            {filterButtons.map(({ title, size, onClick, element, sx }, idx) => (
-              <Button
-                key={idx}
-                size={size}
-                variant="outlined"
-                onClick={() => onClick({ dataSearch })}
-                startIcon={element}
-                sx={{ ...sx }}
-              >
-                {title}
-              </Button>
-            ))}
-          </Grid>
-        </AccordionDetails>
-      </Accordion>
+              ))}
+            </Grid>
+          </AdvancedSection>
+        </Collapse>
+        {filterButtons.length > 0 && (
+          <>
+            <Divider sx={{ my: 3, opacity: 0.6 }} />
+            <Box sx={{ display: "flex", justifyContent: "flex-end", gap: 2 }}>
+              {filterButtons.map((btn, idx) => (
+                <ActionButton
+                  key={idx}
+                  size={elementSize}
+                  variant={btn.variant || "contained"}
+                  color={btn.color || "primary"}
+                  onClick={() => btn.onClick({ dataSearch })}
+                  startIcon={btn.element}
+                  disableElevation
+                  sx={btn.sx}
+                >
+                  {btn.title}
+                </ActionButton>
+              ))}
+            </Box>
+          </>
+        )}
+      </MainCard>
     </Box>
   );
 };

package/components/table/TablePagination.jsx

@@ -12,7 +12,7 @@ function TablePaginationCustom({ count, rowsPerPage, page, onPageChange, onRowsP
   return !isSmallScreen ? (
     <TablePagination
       {...rest}
-      rowsPerPageOptions={[5, 10, 20, 25, 50, 100]}
+      rowsPerPageOptions={[5, 10, 20, 25, 50, 100, 1000]}
       component="div"
       count={count}
       rowsPerPage={rowsPerPage}
@@ -42,7 +42,7 @@ function TablePaginationCustom({ count, rowsPerPage, page, onPageChange, onRowsP
   ) : (
     <TablePagination
       {...rest}
-      rowsPerPageOptions={[5, 10, 20, 25, 50, 100]}
+      rowsPerPageOptions={[5, 10, 20, 25, 50, 100, 1000]}
       component="div"
       count={count}
       rowsPerPage={rowsPerPage}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trithuc-mvc-react",
-  "version": "3.5.4",
+  "version": "3.5.5",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"