trithuc-mvc-react 1.0.0

package/components/date/StaticDateRangePicker.jsx

@@ -0,0 +1,498 @@
+/* eslint-disable react/prop-types */
+"use client";
+import { useEffect, useState } from "react";
+import * as dateFns from "date-fns";
+import { Box, Paper, Stack } from "@mui/material";
+// import "tailwindcss/tailwind.css";
+
+const isBetween = (date, from, to, inclusivity) => {
+  if (!["()", "[]", "(]", "[)"].includes(inclusivity)) {
+    throw new Error("Inclusivity parameter must be one of (), [], (], [)");
+  }
+
+  const isBeforeEqual = inclusivity[0] === "[",
+    isAfterEqual = inclusivity[1] === "]";
+
+  return (
+    (isBeforeEqual ? dateFns.isEqual(from, date) || dateFns.isBefore(from, date) : dateFns.isBefore(from, date)) &&
+    (isAfterEqual ? dateFns.isEqual(to, date) || dateFns.isAfter(to, date) : dateFns.isAfter(to, date))
+  );
+};
+const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+const StaticDateRangePicker = ({ value, onUpdate }) => {
+  const [currCalendar, setCurrCalendar] = useState([]);
+  const [nextCalendar, setNextCalendar] = useState([]);
+  const [currMonth, setCurrMonth] = useState(new Date().getMonth());
+  const [currYear, setCurrYear] = useState(new Date().getFullYear());
+
+  const [dateRange, setDateRange] = useState({
+    startDate: value?.startDate,
+    endDate: value?.endDate
+  });
+  // Thanks to https://github.com/date-fns/date-fns/issues/366#issuecomment-270408980
+
+  const generateCalendar = ({ month, year }) => {
+    const startOfMonth = dateFns.startOfMonth(new Date(year, month));
+    const endOfMonth = dateFns.endOfMonth(new Date(year, month));
+    const startDay = startOfMonth.getDay();
+    const daysInMonth = dateFns.getDaysInMonth(startOfMonth);
+    const days = [...Array(daysInMonth).keys()].map((v) => v + 1);
+    const calendar = [...Array(42).keys()].map((v) => {
+      if (v < startDay) {
+        return null;
+      }
+      if (v > daysInMonth + startDay - 1) {
+        return null;
+      }
+      return days[v - startDay];
+    });
+    return calendar;
+  };
+
+  useEffect(() => {
+    const _currCalendar = generateCalendar({
+      month: new Date(currYear, currMonth).getMonth(),
+      year: new Date(currYear, currMonth).getFullYear()
+    });
+    setCurrCalendar(_currCalendar);
+
+    const _nextCalendar = generateCalendar({
+      month: dateFns.add(new Date(currYear, currMonth), { months: 1 }).getMonth(),
+      year: dateFns.add(new Date(currYear, currMonth), { months: 1 }).getFullYear()
+    });
+    setNextCalendar(_nextCalendar);
+  }, [currMonth, currYear]);
+
+  useEffect(() => {
+    onUpdate?.(dateRange);
+  }, [dateRange]);
+
+  useEffect(() => {
+    if (!value) return;
+
+    if (value.startDate && !dateFns.isSameDay(value.startDate, dateRange.startDate)) {
+      if (dateFns.isBefore(value.startDate, dateRange.endDate)) {
+        setDateRange((old) => ({ ...old, startDate: value.startDate }));
+      } else {
+        setDateRange((old) => ({ startDate: value.startDate, endDate: null }));
+      }
+      let month = value.startDate.getMonth();
+      let year = value.startDate.getFullYear();
+      if (isNaN(month) || isNaN(year)) return;
+      setCurrMonth(month);
+      setCurrYear(year);
+    } else if (value.endDate && !dateFns.isSameDay(value.endDate, dateRange.endDate)) {
+      setDateRange((old) => ({ ...old, endDate: value.endDate }));
+      let month = value.endDate.getMonth();
+      let year = value.endDate.getFullYear();
+      if (isNaN(month) || isNaN(year)) return;
+      setCurrMonth(month - 1);
+      setCurrYear(year);
+    }
+  }, [value]);
+
+  const handleUpdateDateRangeOnLeftCalendar = (day) => {
+    let thisDate = new Date(currYear, currMonth, day);
+
+    if (!dateRange.startDate) {
+      setDateRange((d) => ({
+        ...d,
+        startDate: thisDate
+        // moment({
+        //   day: v,
+        //   month: currMonth,
+        //   year: currYear,
+        // }),
+      }));
+    } else if (dateRange.startDate && !dateRange.endDate) {
+      if (dateFns.isBefore(thisDate, dateRange.startDate)) {
+        setDateRange({
+          startDate: thisDate,
+          // moment({
+          //   day: v,
+          //   month: currMonth,
+          //   year: currYear,
+          // }),
+          endDate: null
+        });
+      } else {
+        setDateRange((d) => ({
+          ...d,
+          endDate: thisDate
+          // moment({
+          //   day: v,
+          //   month: currMonth,
+          //   year: currYear,
+          // }),
+        }));
+      }
+    } else if (dateRange.startDate && dateRange.endDate) {
+      setDateRange({
+        startDate: thisDate,
+        // moment({
+        //   day: v,
+        //   month: currMonth,
+        //   year: currYear,
+        // }),
+        endDate: null
+      });
+    }
+  };
+  const handleUpdateDateRangeOnRightCalendar = (day) => {
+    let thisDate = dateFns.add(new Date(currYear, currMonth, day), { months: 1 });
+
+    if (!dateRange.startDate) {
+      setDateRange((d) => ({
+        ...d,
+        startDate: thisDate
+      }));
+
+      //   startDate: moment({
+      //     day: v,
+      //     month: moment({
+      //       day: v,
+      //       month: currMonth,
+      //       year: currYear,
+      //     })
+      //       .add(1, "month")
+      //       .month(),
+      //     year: moment({
+      //       day: v,
+      //       month: currMonth,
+      //       year: currYear,
+      //     })
+      //       .add(1, "month")
+      //       .year(),
+      //   }),
+      // }))
+    } else if (dateRange.startDate && !dateRange.endDate) {
+      if (dateFns.isBefore(thisDate, dateRange.startDate)) {
+        setDateRange({
+          startDate: thisDate,
+          // moment({
+          //   day: v,
+          //   month: currMonth,
+          //   year: currYear,
+          // }),
+          endDate: null
+        });
+      } else {
+        setDateRange((d) => ({
+          ...d,
+          endDate: thisDate
+          // moment({
+          //   day: v,
+          //   month: currMonth,
+          //   year: currYear,
+          // }),
+        }));
+      }
+    } else if (dateRange.startDate && dateRange.endDate) {
+      setDateRange({
+        startDate: thisDate,
+        // moment({
+        //   day: v,
+        //   month: moment({
+        //     day: v,
+        //     month: currMonth,
+        //     year: currYear,
+        //   })
+        //     .add(1, "month")
+        //     .month(),
+        //   year: moment({
+        //     day: v,
+        //     month: currMonth,
+        //     year: currYear,
+        //   })
+        //     .add(1, "month")
+        //     .year(),
+        // }),
+        endDate: null
+      });
+    }
+  };
+
+  const currTitle = currYear && currMonth ? dateFns.format(new Date(currYear, currMonth), "MMMM") + new Date(currYear, currMonth).getFullYear() : "";
+  return (
+    <Paper>
+      <Box sx={{ display: "flex" }} className="date-range-piker-wrapper">
+        <div className="drop-shadow-sm shadow-sm min-w-[10rem] p-3 rounded-lg border border-r-0 flex flex-col">
+          <div className="flex justify-between items-center">
+            <h3 className="text-lg">
+              {" "}
+              {dateFns.format(new Date(currYear, currMonth), "MMMM")} {new Date(currYear, currMonth).getFullYear()}
+            </h3>
+
+            <Stack direction="row" spacing={2} alignItems={"center"}>
+              <button
+                type="button"
+                className="p-2 rounded-lg hover:bg-gray-300 border drop-shadow-sm"
+                onClick={() => {
+                  const d = dateFns.sub(new Date(currYear, currMonth), {
+                    months: 1
+                  });
+                  setCurrMonth(d.getMonth());
+                  setCurrYear(d.getFullYear());
+                }}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+                </svg>
+              </button>
+              <button
+                type="button"
+                className="p-2 rounded-lg hover:bg-gray-300 border drop-shadow-sm"
+                onClick={() => {
+                  const d = dateFns.add(new Date(currYear, currMonth), {
+                    months: 1
+                  });
+                  setCurrMonth(d.getMonth());
+                  setCurrYear(d.getFullYear());
+                }}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                </svg>
+              </button>
+            </Stack>
+          </div>
+          <div className="grid grid-cols-7 p-3 gap-2 mt-3">
+            {days.map((v, i) => (
+              <div key={i} className="text-center w-12">
+                {v}
+              </div>
+            ))}
+          </div>
+
+          <div className="grid grid-cols-7 p-3 gap-2">
+            {currCalendar.map((v, i) =>
+              v ? (
+                <button
+                  type="button"
+                  key={i}
+                  className={`rounded-lg border flex w-12 justify-center p-2 hover:bg-blue-600 hover:text-white ${
+                    dateFns.isSameDay(new Date(currYear, currMonth, v), dateRange.startDate)
+                      ? // dateRange.startDate?.isSame(
+                        //   moment({ day: v, month: currMonth, year: currYear }),
+                        //   "day"
+                        // )
+                        "bg-blue-600 text-white"
+                      : ""
+                  } ${
+                    dateFns.isSameDay(new Date(currYear, currMonth, v), new Date())
+                      ? // moment({ day: v, month: currMonth, year: currYear }).isSame(
+                        //   moment(),
+                        //   "day"
+                        // )
+                        "ring-blue-400 ring-2"
+                      : ""
+                  } ${
+                    dateFns.isSameDay(new Date(currYear, currMonth, v), dateRange.endDate)
+                      ? // dateRange.endDate?.isSame(
+                        //   moment({ day: v, month: currMonth, year: currYear }),
+                        //   "day"
+                        // )
+                        "bg-blue-600 text-white"
+                      : ""
+                  } ${
+                    isBetween(new Date(currYear, currMonth, v), dateRange.startDate, dateRange.endDate, "[]")
+                      ? // moment({
+                        //   day: v,
+                        //   month: currMonth,
+                        //   year: currYear,
+                        // }).isBetween(
+                        //   dateRange.startDate,
+                        //   dateRange.endDate,
+                        //   "day",
+                        //   "()"
+                        // )
+                        "bg-blue-200"
+                      : ""
+                  }`}
+                  onClick={() => {
+                    handleUpdateDateRangeOnLeftCalendar(v);
+                  }}
+                >
+                  {v}
+                </button>
+              ) : (
+                <span key={i}></span>
+              )
+            )}
+          </div>
+        </div>
+        <div className="drop-shadow-sm shadow-sm min-w-[10rem] p-3 rounded-lg border flex flex-col">
+          <div className="flex justify-between items-center">
+            <h3 className="text-lg">
+              {dateFns.format(dateFns.add(new Date(currYear, currMonth), { months: 1 }), "MMMM")}{" "}
+              {
+                dateFns.add(new Date(currYear, currMonth), { months: 1 }).getFullYear()
+                // moment({ month: currMonth }).add(1, "month").year()
+              }
+            </h3>
+            <div className="flex gap-x-2 items-center">
+              <button
+                type="button"
+                className="p-2 rounded-lg hover:bg-gray-300 border drop-shadow-sm"
+                onClick={() => {
+                  const d = dateFns.sub(new Date(currYear, currMonth), {
+                    months: 1
+                  });
+                  // moment({ month: currMonth, year: currYear }).subtract(
+                  //   1,
+                  //   "month"
+                  // )
+                  setCurrMonth(d.getMonth());
+                  setCurrYear(d.getFullYear());
+                }}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+                </svg>
+              </button>
+              <button
+                type="button"
+                className="p-2 rounded-lg hover:bg-gray-300 border drop-shadow-sm"
+                onClick={() => {
+                  const d = dateFns.add(new Date(currYear, currMonth), {
+                    months: 1
+                  });
+                  // moment({ month: currMonth }).add(1, "month")
+                  setCurrMonth(d.getMonth());
+                  setCurrYear(d.getFullYear());
+                }}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-4 h-4">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
+                </svg>
+              </button>
+            </div>
+          </div>
+          <div className="grid grid-cols-7 p-3 gap-2 mt-3">
+            {days.map((v, i) => (
+              <div key={i} className="text-center w-12">
+                {v}
+              </div>
+            ))}
+          </div>
+
+          <div className="grid grid-cols-7 p-3 gap-2">
+            {nextCalendar.map((day, i) =>
+              day ? (
+                <button
+                  type="button"
+                  key={i}
+                  className={`rounded-lg border flex w-12 justify-center p-2 hover:bg-blue-600 hover:text-white ${
+                    dateFns.isSameDay(
+                      dateFns.add(new Date(currYear, currMonth, day), {
+                        months: 1
+                      }),
+                      dateRange.startDate
+                    )
+                      ? // dateRange.startDate?.isSame(
+                        //   moment({
+                        //     day: v,
+                        //     month: moment({
+                        //       day: v,
+                        //       month: currMonth,
+                        //       year: currYear,
+                        //     })
+                        //       .add(1, "month")
+                        //       .month(),
+                        //     year: moment({ day: v, month: currMonth, year: currYear })
+                        //       .add(1, "month")
+                        //       .year(),
+                        //   }),
+                        //   "day"
+                        // )
+                        "bg-blue-600 text-white"
+                      : ""
+                  } ${
+                    dateFns.isSameDay(
+                      dateFns.add(new Date(currYear, currMonth, day), {
+                        months: 1
+                      }),
+                      new Date()
+                    )
+                      ? // moment({
+                        //   day: v,
+                        //   month: moment({ day: v, month: currMonth, year: currYear })
+                        //     .add(1, "month")
+                        //     .month(),
+                        //   year: moment({ day: v, month: currMonth, year: currYear })
+                        //     .add(1, "month")
+                        //     .year(),
+                        // }).isSame(moment(), "day")
+                        "ring-blue-400 ring-2"
+                      : ""
+                  } ${
+                    dateFns.isSameDay(
+                      dateFns.add(new Date(currYear, currMonth, day), {
+                        months: 1
+                      }),
+                      dateRange.endDate
+                    )
+                      ? // dateRange.endDate?.isSame(
+                        //   moment({
+                        //     day: v,
+                        //     month: moment({
+                        //       day: v,
+                        //       month: currMonth,
+                        //       year: currYear,
+                        //     })
+                        //       .add(1, "month")
+                        //       .month(),
+                        //     year: moment({ day: v, month: currMonth, year: currYear })
+                        //       .add(1, "month")
+                        //       .year(),
+                        //   }),
+                        //   "day"
+                        // )
+                        "bg-blue-600 text-white"
+                      : ""
+                  } ${
+                    // isBetween(new Date(currYear, currMonth, v), {}))
+                    isBetween(
+                      dateFns.add(new Date(currYear, currMonth, day), {
+                        months: 1
+                      }),
+                      dateRange.startDate,
+                      dateRange.endDate,
+                      "[]"
+                    )
+                      ? // moment({
+                        //   day: v,
+                        //   month: moment({ day: v, month: currMonth, year: currYear })
+                        //     .add(1, "month")
+                        //     .month(),
+                        //   year: moment({ day: v, month: currMonth, year: currYear })
+                        //     .add(1, "month")
+                        //     .year(),
+                        // }).isBetween(
+                        //   dateRange.startDate,
+                        //   dateRange.endDate,
+                        //   "day",
+                        //   "()"
+                        // )
+                        "bg-blue-200"
+                      : ""
+                  }`}
+                  onClick={() => {
+                    handleUpdateDateRangeOnRightCalendar(day);
+                  }}
+                >
+                  {day}
+                </button>
+              ) : (
+                <span key={i}></span>
+              )
+            )}
+          </div>
+        </div>
+      </Box>
+    </Paper>
+  );
+};
+
+export default StaticDateRangePicker;

package/components/date/index.js

@@ -0,0 +1 @@
+export { default as DateRangePicker } from "./DateRangePicker";

package/components/index.js

@@ -0,0 +1,4 @@
+export { default as DataManagement } from "./DataManagement";
+
+export * from "./date";
+export * from "./table";

package/components/table/TablePagination.jsx

@@ -0,0 +1,34 @@
+import { TablePagination, useMediaQuery, useTheme } from "@mui/material";
+import PropTypes from "prop-types";
+
+TablePaginationCustom.propsType = {
+  count: PropTypes.number,
+  rowsPerPage: PropTypes.number,
+  page: PropTypes.number,
+  onPageChange: PropTypes.func,
+  onRowsPerPageChange: PropTypes.func
+};
+
+function TablePaginationCustom({ count, rowsPerPage, page, onPageChange, onRowsPerPageChange, ...rest }) {
+  const theme = useTheme();
+  const matchsDownMD = useMediaQuery(theme.breakpoints.down("md"));
+  return (
+    <TablePagination
+      {...rest}
+      rowsPerPageOptions={[5, 10, 25, 100]}
+      component="div"
+      count={count}
+      rowsPerPage={rowsPerPage}
+      page={page}
+      onPageChange={onPageChange}
+      onRowsPerPageChange={onRowsPerPageChange}
+      showFirstButton={true}
+      showLastButton={true}
+      labelRowsPerPage={matchsDownMD ? "Số hàng" : "Số bản ghi trên trang:"}
+      labelDisplayedRows={function defaultLabelDisplayedRows({ from, to, count }) {
+        return `${from}–${to} của ${count !== -1 ? count : `more than ${to}`}`;
+      }}
+    />
+  );
+}
+export default TablePaginationCustom;

package/components/table/TableRowsLoader.jsx

@@ -0,0 +1,15 @@
+import { Skeleton, TableCell, TableRow } from "@mui/material";
+
+const TableRowsLoader = ({ rowsNum, colsNum }) => {
+  return [...Array(rowsNum)].map((row, x) => (
+    <TableRow key={x}>
+      {[...Array(colsNum)].map((col, y) => (
+        <TableCell key={y} component="th" scope="row">
+          <Skeleton animation="wave" variant="text" />
+        </TableCell>
+      ))}
+    </TableRow>
+  ));
+};
+
+export default TableRowsLoader;

package/components/table/index.js

@@ -0,0 +1,2 @@
+export { default as TablePagination } from "./TablePagination";
+export { default as TableRowsLoader } from "./TableRowsLoader";

package/constants/index.js

@@ -0,0 +1 @@
+export const DEFAULT_DATE_FORMAT = "DD/MM/YYYY";

package/helpers/data-table.js

@@ -0,0 +1,23 @@
+import moment from "moment";
+import { DEFAULT_DATE_FORMAT } from "../constants";
+
+export const currencyFormatter = new Intl.NumberFormat('vi-VN', {
+    style: 'currency',
+    currency: 'VND',
+});
+export const numberFormatter = new Intl.NumberFormat('vi-VN');
+
+export const vndFormat = {
+    type: 'number',
+    valueFormat: (value) => currencyFormatter.format(value),
+};
+
+export const numberFormat = {
+    type: 'number',
+    valueFormat: (value) => numberFormatter.format(value),
+}
+export const dateFormat = {
+    valueFormat: (value) => {
+        return value && moment(value).format(DEFAULT_DATE_FORMAT);
+    }
+}

package/helpers/index.js

@@ -0,0 +1 @@
+export * from './data-table'

package/index.js

@@ -0,0 +1,3 @@
+export * from "./api";
+export * from "./components";
+export * from "./helpers";

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "trithuc-mvc-react",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git://git-remote-url"
+  },
+  "description": ""
+}