diff --git a/src/pages/Message/Search/DataGrid.js b/src/pages/Message/Search/DataGrid.js
new file mode 100644
index 0000000..7c366f5
--- /dev/null
+++ b/src/pages/Message/Search/DataGrid.js
@@ -0,0 +1,78 @@
+// material-ui
+import * as React from 'react';
+import {
+ Button} from '@mui/material';
+import * as DateUtils from "utils/DateUtils";
+import { useNavigate } from "react-router-dom";
+import { FiDataGrid } from "components/FiDataGrid";
+import {useIntl} from "react-intl";
+// ==============================|| EVENT TABLE ||============================== //
+
+export default function MsgTable({ recordList }) {
+ const [rows, setRows] = React.useState(recordList);
+ const navigate = useNavigate()
+ const intl = useIntl();
+
+ const _sx = {
+ padding: "4 2 4 2",
+ boxShadow: 1,
+ border: 1,
+ borderColor: '#DDD',
+ '& .MuiDataGrid-cell': {
+ borderTop: 1,
+ borderBottom: 1,
+ borderColor: "#EEE"
+ },
+ '& .MuiDataGrid-footerContainer': {
+ border: 1,
+ borderColor: "#EEE"
+ }
+ }
+
+ React.useEffect(() => {
+ setRows(recordList);
+ }, [recordList]);
+
+ const handleEditClick = (params) => () => {
+ navigate('/msg/details/' + params.row.id);
+ };
+
+ const columns = [
+ {
+ id: 'sentDate',
+ field: 'sentDate',
+ headerName: intl.formatMessage({id: 'date'}),
+ width: 160,
+ renderCell: (params) => {
+ return DateUtils.datetimeStr(params.row.sentDate);
+ },
+ },
+ {
+ field: 'actions',
+ headerName: intl.formatMessage({id: 'payId'}),
+ flex: 1 ,
+ cellClassName: 'actions',
+ renderCell: (params) => {
+ return ;
+ },
+ },
+ ];
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/pages/Message/Search/SearchForm.js b/src/pages/Message/Search/SearchForm.js
new file mode 100644
index 0000000..1900f9a
--- /dev/null
+++ b/src/pages/Message/Search/SearchForm.js
@@ -0,0 +1,162 @@
+// material-ui
+import {
+ Button,
+ CardContent,
+ Grid, TextField,
+ Typography
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import { useForm } from "react-hook-form";
+import * as React from "react";
+import * as DateUtils from "utils/DateUtils";
+import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
+import {ThemeProvider} from "@emotion/react";
+import {FormattedMessage, useIntl} from "react-intl";
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+
+const SearchForm = ({ applySearch, searchCriteria }) => {
+ const intl = useIntl();
+ const [minDate, setMinDate] = React.useState(searchCriteria.dateFrom);
+ const [maxDate, setMaxDate] = React.useState(searchCriteria.dateTo);
+
+ const _sx = {
+ padding: "4 2 4 2",
+ boxShadow: 1,
+ border: 1,
+ borderColor: '#DDD',
+ '& .MuiDataGrid-cell': {
+ borderTop: 1,
+ borderBottom: 1,
+ borderColor: "#EEE"
+ },
+ '& .MuiDataGrid-footerContainer': {
+ border: 1,
+ borderColor: "#EEE"
+ }
+ }
+
+ const { reset, register, handleSubmit } = useForm()
+
+ const onSubmit = (data) => {
+ const temp = {
+ keywork: data.keywork,
+ dateFrom: data.dateFrom,
+ dateTo: data.dateTo,
+ };
+ applySearch(temp);
+ };
+
+ function resetForm() {
+ reset();
+ }
+
+
+ return (
+
+
+
+
+ );
+};
+
+export default SearchForm;
diff --git a/src/pages/Message/Search/index.js b/src/pages/Message/Search/index.js
new file mode 100644
index 0000000..9706d5d
--- /dev/null
+++ b/src/pages/Message/Search/index.js
@@ -0,0 +1,101 @@
+// material-ui
+import {
+ Grid,
+ Typography,
+ Stack
+} from '@mui/material';
+import MainCard from "components/MainCard";
+import * as UrlUtils from "utils/ApiPathConst";
+import * as React from "react";
+import * as HttpUtils from "utils/HttpUtils";
+import * as DateUtils from "utils/DateUtils";
+
+import Loadable from 'components/Loadable';
+const LoadingComponent = Loadable(React.lazy(() => import('pages/extra-pages/LoadingComponent')));
+const SearchForm = Loadable(React.lazy(() => import('./SearchForm')));
+const EventTable = Loadable(React.lazy(() => import('./DataGrid')));
+import titleBackgroundImg from 'assets/images/dashboard/gazette-bar.png'
+import {FormattedMessage} from "react-intl";
+
+const BackgroundHead = {
+ backgroundImage: `url(${titleBackgroundImg})`,
+ width: '100%',
+ height: '100%',
+ backgroundSize:'contain',
+ backgroundRepeat: 'no-repeat',
+ backgroundColor: '#0C489E',
+ backgroundPosition: 'right'
+}
+
+// ==============================|| DASHBOARD - DEFAULT ||============================== //
+
+const Index = () => {
+
+ const [record,setRecord] = React.useState([]);
+ const [searchCriteria, setSearchCriteria] = React.useState({
+ dateTo: DateUtils.dateStr(new Date()),
+ dateFrom: DateUtils.dateStr(new Date().setDate(new Date().getDate()-14)),
+ });
+ const [onReady, setOnReady] = React.useState(false);
+
+ React.useEffect(() => {
+ setOnReady(true);
+ }, [record]);
+
+ React.useEffect(() => {
+ loadGrid();
+ }, [searchCriteria]);
+
+ function loadGrid(){
+ HttpUtils.get({
+ url: UrlUtils.GET_MSG_LIST,
+ params: searchCriteria,
+ onSuccess: function(responseData){
+ setRecord(responseData);
+ }
+ });
+ }
+
+
+ function applySearch(input) {
+ setSearchCriteria(input);
+ }
+
+ return (
+ !onReady ?
+
+ :
+
+
+
+
+
+
+
+
+
+
+ {/*row 1*/}
+
+
+
+ {/*row 2*/}
+
+
+
+
+
+
+ );
+};
+
+export default Index;
diff --git a/src/pages/dashboard/Public/index.js b/src/pages/dashboard/Public/index.js
index 730d993..b895e9f 100644
--- a/src/pages/dashboard/Public/index.js
+++ b/src/pages/dashboard/Public/index.js
@@ -80,7 +80,7 @@ const DashboardDefault = () => {
-