update table and tab bar layout

src/layout/MainLayout/Header/index.js

@@ -105,7 +105,11 @@ function Header(props) {
     isGLDLoggedIn() ?
       <div id="adminContent">
         <li>
-          <Link className="dashboard" to='/dashboard'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} >Dashboard</Typography></Link>
+          <Link className="dashboard" to='/dashboard'>
+            <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} >
+              Dashboard
+            </Typography>
+          </Link>
         </li>
         <li>
           <Link className="application" to='/application/search'><Typography style={{ opacity: 0.9 }}variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>Application</Typography></Link>
@@ -161,34 +165,39 @@ function Header(props) {
       :
       <div id="individualUserContent">
         <li>
-          <Link className="dashboard" to='/dashboard'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>主頁</Typography></Link>
+          <Link className="dashboard" to='/dashboard'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>主頁</Typography></Link>
         </li>
         <li>
-          <Link className="myDocumet" to='/publicNotice'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 0.5 }}>我的公共啟事</Typography></Link>
+          <Link className="myDocumet" to='/publicNotice'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>我的公共啟事</Typography></Link>
         </li>
         <li>
-          <Link className="documentRecord" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1.5 }}>校對記錄</Typography></Link>
+          <Link className="documentRecord" to='/proof/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>校對記錄</Typography></Link>
         </li>
         <li>
           {isPrimaryLoggedIn() ?
             <>
-              <Link className="paymentRecord"><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1.5 }}>付款記錄</Typography></Link>
+              <Link className="paymentRecord"><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>付款記錄</Typography></Link>
               <ul className='dropdown'>
                 <li>
-                  <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>網上付款記錄</Typography></Link>
+                  <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>網上付款記錄</Typography></Link>
                 </li>
                 <li>
-                  <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>繳款通知記錄</Typography></Link>
+                  <Link className="manageOrgUser" to='/paymentPage/demandNote'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>繳款通知記錄</Typography></Link>
                 </li>
               </ul>
             </>
             :
-            <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>網上付款記錄</Typography></Link>
+            <Link className="manageOrgUser" to='/paymentPage/search'><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }}>網上付款記錄</Typography></Link>
           }
         </li>
         <li>
-          <Link className="userSetting" ><Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 2 }}>設定</Typography><KeyboardArrowDownIcon sx={{fontSize: '1.0rem'}}/></Link>
-          {isPrimaryLoggedIn() ?
+          <Link className="userSetting" >
+            <Typography style={{ opacity: 0.9 }} variant={"pnspsHeaderTitle"} sx={{ ml: 1 }} onClick={(event) => console.log(event)}>
+              設定
+            </Typography>
+            <KeyboardArrowDownIcon sx={{fontSize: '1.0rem'}}/>
+          </Link>
+          {!isPrimaryLoggedIn() ?
             <ul className='dropdown'>
 
               <li>
@@ -218,7 +227,7 @@ function Header(props) {
 
   const drawer = (
     isUserLoggedIn() ?
-      <Stack id="sidebar" direction="column" justifyContent="center" alignItems="center" onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
+      <Stack id="sidebar" direction="column" justifyContent="center" alignItems="center" /*onClick={handleDrawerToggle}*/ sx={{ textAlign: 'center' }}>
         <Typography variant="h6" sx={{ my: 2 }}>
           PNSPS
         </Typography>

src/pages/PublicNotice/ListPanel/BaseGrid.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {FiDataGrid} from "components/FiDataGrid";
 import {
     Button,
-    Typography
+    Typography, useMediaQuery
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils"
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
@@ -11,10 +11,13 @@ import {useNavigate} from "react-router-dom";
 import {
     isORGLoggedIn,
   } from "utils/Utils";
+import {useTheme} from "@emotion/react";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function BaseGrid({rows}) {
     const navigate = useNavigate()
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
     const handleDetailClick = (params) => () => {
         navigate('/publicNotice/'+ params.id);
@@ -27,13 +30,15 @@ export default function BaseGrid({rows}) {
             id: 'appNo',
             field: 'appNo',
             headerName: '申請編號',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
         },
         {
             id: 'created',
             field: 'created',
             headerName: '提交日期',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 300,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter:(params)=>{
                 return DateUtils.datetimeStr(params?.value);
             }
@@ -68,7 +73,8 @@ export default function BaseGrid({rows}) {
             id: 'remarks',
             field: 'remarks',
             headerName:  isORGLoggedIn()?"Care Of / 我的備註":"我的備註",
-            flex: 3,
+            width: isMdOrLg ? 'auto' : 400,
+            flex: isMdOrLg ? 3 : undefined,
             renderCell: (params) => (
                 isORGLoggedIn()? 
                 <div>
@@ -84,7 +90,8 @@ export default function BaseGrid({rows}) {
             id: 'status',
             field: 'status',
             headerName: '狀態',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
                 return [StatusUtils.getStatus(params)]
             },

src/pages/PublicNotice/ListPanel/PendingPaymentTab.js

@@ -7,7 +7,7 @@ import {
     Autocomplete,
     TextField,
     Grid,
-    Dialog, DialogTitle, DialogContent, DialogActions,
+    Dialog, DialogTitle, DialogContent, DialogActions, useMediaQuery,
 } from '@mui/material';
 import { FiDataGrid } from "components/FiDataGrid";
 import * as HttpUtils from "utils/HttpUtils"
@@ -19,6 +19,7 @@ import { useNavigate } from "react-router-dom";
 import {
     isORGLoggedIn,
 } from "utils/Utils";
+import {useTheme} from "@emotion/react";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SubmittedTab({ rows }) {
@@ -31,6 +32,8 @@ export default function SubmittedTab({ rows }) {
     const [selectedCareOf, setSelectedCareOf] = React.useState(null);
     const [expiryDateErrText, setExpiryDateErrText] = React.useState("");
     const [expiryDateErr, setExpiryDateErr] = React.useState(false);
+    const theme = useTheme();
+    const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
     //const [amount, setAmount] = React.useState(0);
     const navigate = useNavigate()
@@ -112,13 +115,15 @@ export default function SubmittedTab({ rows }) {
             id: 'appNo',
             field: 'appNo',
             headerName: '申請編號',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
         },
         {
             id: 'created',
             field: 'created',
             headerName: '提交日期',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             valueGetter: (params) => {
                 return DateUtils.datetimeStr(params.value);
             }
@@ -153,7 +158,8 @@ export default function SubmittedTab({ rows }) {
             id: 'remarks',
             field: 'remarks',
             headerName: isORGLoggedIn() ? "Care Of / 我的備註" : "我的備註",
-            flex: 3,
+            width: isMdOrLg ? 'auto' : 400,
+            flex: isMdOrLg ? 3 : undefined,
             renderCell: (params) => (
                 isORGLoggedIn() ?
                     <div>
@@ -169,7 +175,8 @@ export default function SubmittedTab({ rows }) {
             id: 'fee',
             field: 'fee',
             headerName: '價錢',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
                 return FormatUtils.currencyFormat(params.row.fee)
             },
@@ -178,7 +185,8 @@ export default function SubmittedTab({ rows }) {
             id: 'status',
             field: 'status',
             headerName: '狀態',
-            flex: 1,
+            width: isMdOrLg ? 'auto' : 160,
+            flex: isMdOrLg ? 1 : undefined,
             renderCell: (params) => {
                 return [StatusUtils.getStatus(params)]
             },

src/pages/PublicNotice/ListPanel/index.js

@@ -116,7 +116,7 @@ const PublicNotice = () => {
 
                 {
                     JSON.parse(localStorage.getItem('userData')).creditor ? (
-                        <Grid item xs={12} sx={{ minHeight: '75vh', backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
+                        <Grid item xs={12} sx={{ minHeight: '75vh', maxWidth: '95%', backgroundColor: "#fff", mt: 3, mr: 3, ml: 3, mb: 3, ..._sx }}>
                             <TabContext value={selectedTab}>
                                 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                                     <TabList onChange={handleChange} aria-label="lab API tabs example">

src/pages/PublicNotice/Search_GLD/SearchForm.js

@@ -13,7 +13,6 @@ import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
 import {ThemeProvider} from "@emotion/react";
 import {PNSPS_BUTTON_THEME} from "../../../themes/buttonConst";
-import dayjs from "dayjs";
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
 
 
@@ -141,7 +140,6 @@ const SearchPublicNoticeForm = ({ applySearch, orgComboData, searchCriteria, iss
                                 <Grid item xs={5.25} s={5.25} md={5.25} lg={5.5}>
                                     <TextField
                                         fullWidth
-                                        //todo: set dd/mm/yyyy
                                         InputLabelProps={{
                                             shrink: true
                                         }}