diff --git a/src/auth/utils.js b/src/auth/utils.js
index b4b55fa..6678a13 100644
--- a/src/auth/utils.js
+++ b/src/auth/utils.js
@@ -9,8 +9,8 @@ import useJwt from 'auth/jwt/coreUseJwt';
 export const hostname = 'localhost';
 const hostPort = '8090';
 export const hostPath = `http://${hostname}:${hostPort}`;
-export const apiPath = `${hostPath}/api`;
 //export const apiPath = `http://192.168.0.112:8090/api`;
+export const apiPath = `${hostPath}/api`;
 //export const apiPath = `/api`;
 
 export const isUserLoggedIn = () => {
diff --git a/src/components/FiDataGrid.js b/src/components/FiDataGrid.js
new file mode 100644
index 0000000..2812e84
--- /dev/null
+++ b/src/components/FiDataGrid.js
@@ -0,0 +1,79 @@
+// material-ui
+import * as React from 'react';
+import {
+    DataGrid,
+} from "@mui/x-data-grid";
+
+// ==============================|| EVENT TABLE ||============================== //
+
+export function FiDataGrid({ rows, columns, sx, autoHeight,
+    hideFooterSelectedRowCount, rowModesModel, editMode, 
+    pageSizeOptions,
+    ...props }) {
+    const [_rows, set_rows] = React.useState([]);
+    const [_columns, set_columns] = React.useState([]);
+    const [_rowModesModel, set_rowModesModel] = React.useState({});
+    const [_editMode, set_editMode] = React.useState("row");
+    const [_pageSizeOptions, set_pageSizeOptions] = React.useState([5, 10, 25]);
+
+    const [_autoHeight, set_autoHeight] = React.useState(true);
+    const [myHideFooterSelectedRowCount, setMyHideFooterSelectedRowCount] = React.useState(true);
+    const [_sx, set_sx] = React.useState({
+        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(() => {
+        if (sx) {
+            set_sx(sx);
+        }
+        if (hideFooterSelectedRowCount) {
+            setMyHideFooterSelectedRowCount(hideFooterSelectedRowCount);
+        }
+        if (rowModesModel) {
+            set_rowModesModel(rowModesModel)
+        }
+        if (rows) {
+            set_rows(rows)
+        }
+        if (columns) {
+            set_columns(columns)
+        }
+        if (pageSizeOptions) {
+            set_pageSizeOptions(pageSizeOptions)
+        }
+        if(autoHeight != undefined){
+            set_autoHeight(autoHeight)
+        }
+        if(editMode){
+            set_editMode(editMode);
+        }
+    }, []);
+
+    return (
+        <DataGrid
+            {...props}
+            rows={_rows}
+            columns={_columns}
+            rowModesModel={_rowModesModel}
+            pageSizeOptions={_pageSizeOptions}
+            editMode={_editMode}
+            autoHeight={_autoHeight}
+            hideFooterSelectedRowCount={myHideFooterSelectedRowCount}
+            sx={_sx}
+
+        />
+    );
+}
diff --git a/src/pages/PublicNotice/ListPanel/BaseGrid.js b/src/pages/PublicNotice/ListPanel/BaseGrid.js
index 8e0684b..8a7c88c 100644
--- a/src/pages/PublicNotice/ListPanel/BaseGrid.js
+++ b/src/pages/PublicNotice/ListPanel/BaseGrid.js
@@ -1,8 +1,6 @@
 // material-ui
 import * as React from 'react';
-import {
-    DataGrid,
-} from "@mui/x-data-grid";
+import {FiDataGrid} from "components/FiDataGrid";
 import {
     Button
 } from '@mui/material';
@@ -13,7 +11,6 @@ import {useNavigate} from "react-router-dom";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function BaseGrid({rows}) {
-    const [rowModesModel] = React.useState({});
     const navigate = useNavigate()
 
     const handleDetailClick = (params) => () => {
@@ -89,28 +86,14 @@ export default function BaseGrid({rows}) {
 
     return (
         <div style={{height: 400, width: '100%', padding: 4}}>
-            <DataGrid
-                hideFooterSelectedRowCount={true}
+            <FiDataGrid
                 rows={rows}
                 columns={columns}
-                editMode="row"
-                rowModesModel={rowModesModel}
                 initialState={{
                     pagination: {
                         paginationModel: {page: 0, pageSize: 5},
                     },
                 }}
-                pageSizeOptions={[5, 10]}
-                autoHeight = {true}
-                sx={{
-                    padding: "4 2 4 2",
-                    boxShadow: 1,
-                    border: 1,
-                    borderColor: '#DDD',
-                    '& .super-app-theme--header': {
-                        backgroundColor: '#EEE',
-                    },
-                }}
             />
         </div>
     );
diff --git a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js
index 8a0a692..0f8e376 100644
--- a/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js
+++ b/src/pages/PublicNotice/ListPanel/SearchPublicNoticeTable.js
@@ -1,12 +1,10 @@
 // material-ui
 import * as React from 'react';
-import {
-    DataGrid,
-} from "@mui/x-data-grid";
 import {
     Button
 } from '@mui/material';
 import { useEffect } from "react";
+import {FiDataGrid} from "components/FiDataGrid";
 import * as DateUtils from "utils/DateUtils";
 import * as StatusUtils from "./PublicNoteStatusUtils";
 import {useNavigate} from "react-router-dom";
@@ -14,7 +12,6 @@ import {useNavigate} from "react-router-dom";
 
 export default function SearchPublicNoticeTable({ recordList }) {
     const [rows, setRows] = React.useState(recordList);
-    const [rowModesModel] = React.useState({});
     const navigate = useNavigate()
 
     const handleDetailClick = (params) => () => {
@@ -98,27 +95,14 @@ export default function SearchPublicNoticeTable({ recordList }) {
     return (
         <div style={{ height: 400, width: '100%' }}>
 
-            <DataGrid
-                hideFooterSelectedRowCount={true}
+            <FiDataGrid
                 rows={rows}
                 columns={columns}
-                editMode="row"
-                rowModesModel={rowModesModel}
                 initialState={{
                     pagination: {
                         paginationModel: { page: 0, pageSize: 5 },
                     },
                 }}
-                pageSizeOptions={[5, 10]}
-                autoHeight
-                sx={{
-                    boxShadow: 1,
-                    border: 1,
-                    borderColor: '#DDD',
-                    '& .super-app-theme--header': {
-                        backgroundColor: '#EEE',
-                    },
-                }}
             />
         </div>
     );
diff --git a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/StatusHistoryTab.js b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/StatusHistoryTab.js
index 0683082..e159d14 100644
--- a/src/pages/PublicNoticeDetail_GLD/tabTableDetail/StatusHistoryTab.js
+++ b/src/pages/PublicNoticeDetail_GLD/tabTableDetail/StatusHistoryTab.js
@@ -7,7 +7,7 @@ import {
 // import {
 //     Button
 // } from '@mui/material';
-// import * as DateUtils from "utils/DateUtils"
+import * as DateUtils from "utils/DateUtils"
 import * as StatusUtils from "../../PublicNotice/ListPanel/PublicNoteStatusUtils";
 
 // ==============================|| EVENT TABLE ||============================== //
@@ -20,12 +20,11 @@ export default function StatusHistoryTab({rows}) {
             id: 'created',
             field: 'created',
             headerName: 'Date',
-            valueGetter: (params) => {
-                const value = params.value
-                return value[0]+"/"+value[1]+"/"+value[2]+" "+value[3]+":"+value[4]+":"+value[5]
-            },
-            // valueFormatter: (params) => dayjs(params.value).format('DD/MM/YYYY'),
             flex: 1,
+            valueGetter: (params) => {
+                return DateUtils.datetimeStr(params?.value);
+            }
+            
         },
         {
             id: 'createdBy',
diff --git a/src/pages/_Test/Mail/index.js b/src/pages/_Test/Mail/index.js
index 9c9c472..c3f4e2c 100644
--- a/src/pages/_Test/Mail/index.js
+++ b/src/pages/_Test/Mail/index.js
@@ -1,6 +1,7 @@
 // material-ui
 import {
     Grid,
+    Dialog, DialogTitle, DialogContent, DialogActions,
     Typography,
     Button,
     Stack,
@@ -20,9 +21,12 @@ import {apiPath} from "auth/utils";
 
 const Mail = () => {
 
+    const [isResponsPopUp, setIsResponsPopUp] = React.useState(false);
+    const [responsText, setResponsText] = React.useState("");
+
     const formik = useFormik({
         enableReinitialize:true,
-        initialValues:{},
+        initialValues:{email:""},
         validationSchema:yup.object().shape({
             email: yup.string().max(255).required('請輸入e-Mail')
         }),
@@ -34,7 +38,16 @@ const Mail = () => {
                     email: values.email,
                 },
                 onSuccess: function(){
-                    
+                    setResponsText("Success");
+                    setIsResponsPopUp(true);
+                },
+                onFail:(response)=>{
+                    setResponsText("Fail: "+response);
+                    setIsResponsPopUp(true);
+                },
+                onError:(error)=>{
+                    setResponsText("Error: "+error);
+                    setIsResponsPopUp(true);
                 }
             });
         }
@@ -62,6 +75,7 @@ const Mail = () => {
                             type="email"
                             placeholder="email"
                             label="eMail"
+                            onChange={formik.handleChange}
                         />
                     </Stack>
                 </Grid>
@@ -77,6 +91,17 @@ const Mail = () => {
                     </Button>
                 </form>
 
+                <div>
+                    <Dialog open={isResponsPopUp} onClose={() => setIsResponsPopUp(false)}  >
+                        <DialogTitle>Respons</DialogTitle>
+                        <DialogContent style={{ display: 'flex', }}>
+                            <Typography variant="h3" style={{ padding: '16px' }}>{responsText}</Typography>
+                        </DialogContent>
+                        <DialogActions>
+                            <Button onClick={() => setIsResponsPopUp(false)}>OK</Button>
+                        </DialogActions>
+                    </Dialog>
+                </div>
 
                 
             </Grid>
diff --git a/src/utils/DateUtils.js b/src/utils/DateUtils.js
index c7f42ec..52d55e0 100644
--- a/src/utils/DateUtils.js
+++ b/src/utils/DateUtils.js
@@ -16,7 +16,12 @@ export const convertToDate = (date)=>{
         if(date.length==3){
             return new Date(date[0],date[1]-1,date[2],0,0,0);
         }
-        return new Date(date[0],date[1]-1,date[2],date[3],date[4],date[5]);
+        return new Date(date[0]
+            ,date[1]-1
+            ,date[2]
+            ,date[3]?date[3]:0
+            ,date[4]?date[4]:0
+            ,date[5]?date[5]:0);
     }
     
     return date;
diff --git a/src/utils/FieldUtils.js b/src/utils/FieldUtils.js
index 295ac70..48a7885 100644
--- a/src/utils/FieldUtils.js
+++ b/src/utils/FieldUtils.js
@@ -9,6 +9,7 @@ export const notNullFieldLabel = (label) => {
     return (<>{label}<span style={{ "color": "red" }}>*</span></>)
 }
 
+
 export const getDateField = ({ label, valueName, form, disabled }) => {
     return <Grid container alignItems={"center"}>
         <Grid item xs={12} md={3} lg={3} sx={{ display: 'flex', alignItems: 'center' }}>