align Record no

src/pages/Announcement/Search/DataGrid.js

@@ -1,12 +1,12 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button,
     Box
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -17,11 +17,6 @@ export default function SearchPublicNoticeTable({ recordList }) {
         setRows(recordList);   
     }, [recordList]);
 
-    const handleEditClick = (params) => () => {
-        navigate('/setting/announcement/details/' + params.id);
-    };
-
-
     const columns = [
         {
             field: 'announceDate',
@@ -29,7 +24,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             width: 250,
             cellClassName: 'announceDate',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{DateUtils.datetimeStr(params?.value)}</u></Button>;
+                return clickableLink('/setting/announcement/details/' + params.id, DateUtils.datetimeStr(params?.value));
             },
         },
         {

src/pages/DemandNote/Create/DataGrid.js

@@ -1,12 +1,10 @@
 // material-ui
 import * as React from 'react';
-import {
-    Button
-} from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils";
 import * as PublicNoteStatusUtils from "utils/statusUtils/PublicNoteStatusUtils"
 import { FiDataGrid } from "components/FiDataGrid";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -43,7 +41,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             headerName: 'App No.',
             flex: 1,
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.appNo}</u></Button>;
+                return clickableLink('/application/' + params.row.id, params.row.appNo)
             },
         },
         {

src/pages/GFMIS/DataGrid.js

@@ -37,15 +37,6 @@ export default function SearchPublicNoticeTable({ recordList }) {
     };
 
     const columns = [
-        // {
-        //     field: 'actions',
-        //     headerName: 'Trans. No.',
-        //     flex: 1,
-        //     cellClassName: 'actions',
-        //     renderCell: (params) => {
-        //         return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
-        //     },
-        // },
         {
             id: 'paymentMethod',
             field: 'paymentMethod',

src/pages/Message/Search/DataGrid.js

@@ -1,11 +1,10 @@
 // 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";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function MsgTable({ recordList }) {
@@ -53,7 +52,7 @@ export default function MsgTable({ recordList }) {
             flex: 1 ,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.subject}</u></Button>;
+                return clickableLink('/msg/details/' + params.row.id, params.row.subject);
             },
         },
     ];

src/pages/Payment/Search_GLD/DataGrid.js

@@ -1,13 +1,11 @@
 // material-ui
 import * as React from 'react';
-import {
-    Button
-} from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils"
 import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -55,7 +53,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             flex: 1,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
+                return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
             },
         },
         {

src/pages/Payment/Search_Public/DataGrid.js

@@ -1,7 +1,7 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button, useMediaQuery
+    useMediaQuery
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils"
@@ -10,6 +10,7 @@ import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
 import {useTheme} from "@emotion/react";
 import {useIntl} from "react-intl";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -40,10 +41,6 @@ export default function SearchPublicNoticeTable({ recordList }) {
         setRows(recordList);
     }, [recordList]);
 
-    const handleEditClick = (params) => () => {
-        navigate('/paymentPage/details/' + params.row.id);
-    };
-
     const handleEditDoubleClick = (params) =>{
         navigate('/paymentPage/details/' + params.row.id);
     };
@@ -56,7 +53,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
+                return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
             },
         },
         {

src/pages/Proof/Search_GLD/DataGrid.js

@@ -1,13 +1,11 @@
 // material-ui
 import * as React from 'react';
-import {
-    Button,
-} from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils"
 import * as ProofStatus from "utils/statusUtils/ProofStatus";
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -18,10 +16,6 @@ export default function SearchPublicNoticeTable({ recordList }) {
         setRows(recordList);
     }, [recordList]);
 
-    const handleEditClick = (params) => () => {
-        navigate('/proof/reply/' + params.row.id);
-    };
-
     const columns = [
         {
             field: 'actions',
@@ -29,7 +23,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             width: 170,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
+                return clickableLink('/proof/reply/' + params.row.id, params.row.refNo);
             },
         },
         {

src/pages/Proof/Search_Public/DataGrid.js

@@ -1,7 +1,7 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button, useMediaQuery
+    useMediaQuery
 } from '@mui/material';
 import * as DateUtils from "utils/DateUtils";
 import * as FormatUtils from "utils/FormatUtils"
@@ -13,6 +13,7 @@ import {
   } from "utils/Utils";
 import {useTheme} from "@emotion/react";
 import {useIntl} from "react-intl";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SearchPublicNoticeTable({ recordList }) {
@@ -43,9 +44,6 @@ export default function SearchPublicNoticeTable({ recordList }) {
         setRows(recordList);
     }, [recordList]);
 
-    const handleEditClick = (params) => () => {
-        navigate('/proof/reply/' + params.row.id);
-    };
 
     /*eslint no-irregular-whitespace: ["error", { "skipComments": true }]*/
     /*const getGroupTitle = (title) => {
@@ -98,7 +96,7 @@ export default function SearchPublicNoticeTable({ recordList }) {
             flex: isMdOrLg ? 1.5 : undefined,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
+                return clickableLink('/proof/reply/' + params.row.id,params.row.refNo);
             },
         },
         {

src/pages/PublicNotice/Details_GLD/tabTableDetail/PaymentTab.js

@@ -1,27 +1,22 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button, useMediaQuery
+    useMediaQuery
 } from '@mui/material';
-import { useNavigate } from "react-router-dom";
 import {FiDataGrid} from "components/FiDataGrid";
 import * as FormatUtils from "utils/FormatUtils"
 import * as DateUtils from "utils/DateUtils"
 import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
 import {useTheme} from "@emotion/react";
+import { clickableLink } from 'utils/CommonFunction';
 // import * as StatusUtils from "./PublicNoteStatusUtils";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SubmittedTab({ rows }) {
 
-    const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
-    const handleEditClick = (params) => () => {
-        navigate('/paymentPage/details/' + params.row.id);
-    };
-
     const columns = [
         {
             field: 'actions',
@@ -30,7 +25,7 @@ export default function SubmittedTab({ rows }) {
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
+                return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
             },
         },
         {

src/pages/PublicNotice/Details_GLD/tabTableDetail/ProofTab.js

@@ -1,13 +1,12 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button, useMediaQuery,
+ useMediaQuery,
 } from '@mui/material';
 import {
     GridActionsCellItem,
 } from "@mui/x-data-grid";
 import * as Icon from 'utils/IconUtils';
-import { useNavigate } from "react-router-dom";
 import * as DateUtils from "utils/DateUtils";
 import * as ProofStatus from "utils/statusUtils/ProofStatus";
 import {FiDataGrid} from "components/FiDataGrid";
@@ -15,18 +14,14 @@ import * as FormatUtils from "utils/FormatUtils"
 import * as HttpUtils from "utils/HttpUtils"
 import * as UrlUtils from "utils/ApiPathConst"
 import {useTheme} from "@emotion/react";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function ProofTab({rows}) {
 
-    const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
 
-    const handleEditClick = (params) => () => {
-        navigate('/proof/reply/' + params.row.id);
-    };
-
     const onDownloadClick = (params) => () => {
         HttpUtils.fileDownload({
             url: UrlUtils.GEN_GAZETTE_PROOF+"/"+params.row.id,
@@ -42,7 +37,7 @@ export default function ProofTab({rows}) {
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
+                return clickableLink('/proof/reply/' + params.row.id, params.row.refNo);
             },
         },
         {

src/pages/PublicNotice/Details_Public/tabTableDetail/PaymentTab.js

@@ -1,31 +1,26 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button, useMediaQuery
+     useMediaQuery
 } from '@mui/material';
-import { useNavigate } from "react-router-dom";
 import {FiDataGrid} from "components/FiDataGrid";
 import * as FormatUtils from "utils/FormatUtils"
 import * as DateUtils from "utils/DateUtils"
 import * as PaymentStatus from "utils/statusUtils/PaymentStatus"
 import {useTheme} from "@emotion/react";
 import {useIntl} from "react-intl";
+import { clickableLink } from 'utils/CommonFunction';
 // import * as StatusUtils from "./PublicNoteStatusUtils";
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function SubmittedTab({ rows }) {
 
-    const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
     const intl = useIntl();
     
   const { locale } = intl;
 
-    const handleEditClick = (params) => () => {
-        navigate('/paymentPage/details/' + params.row.id);
-    };
-
     const columns = [
         {
             field: 'actions',
@@ -34,7 +29,7 @@ export default function SubmittedTab({ rows }) {
             flex: isMdOrLg ? 1 : undefined,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.transNo}</u></Button>;
+                return clickableLink('/paymentPage/details/' + params.row.id, params.row.transNo);
             },
         },
         {

src/pages/PublicNotice/Details_Public/tabTableDetail/ProofTab.js

@@ -1,27 +1,23 @@
 // material-ui
 import * as React from 'react';
 import {
-    Button, useMediaQuery,
+ useMediaQuery,
 } from '@mui/material';
-import { useNavigate } from "react-router-dom";
 import * as DateUtils from "utils/DateUtils";
 import * as ProofStatus from "utils/statusUtils/ProofStatus";
 import {FiDataGrid} from "components/FiDataGrid";
 import * as FormatUtils from "utils/FormatUtils"
 import {useTheme} from "@emotion/react";
 import {useIntl} from "react-intl";
+import { clickableLink } from 'utils/CommonFunction';
 // ==============================|| EVENT TABLE ||============================== //
 
 export default function ProofTab({rows}) {
     const intl = useIntl();
-    const navigate = useNavigate()
     const theme = useTheme();
     const isMdOrLg = useMediaQuery(theme.breakpoints.up('md'));
     const { locale } = intl;
 
-    const handleEditClick = (params) => () => {
-        navigate('/proof/reply/' + params.row.id);
-    };
 
     const columns = [
         {
@@ -31,7 +27,7 @@ export default function ProofTab({rows}) {
             width: 200,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.refNo}</u></Button>;
+                return clickableLink('/proof/reply/' + params.row.id, params.row.refNo);
             },
         },
         {

src/pages/PublicNotice/Search_GLD/DataGrid.js

@@ -1,6 +1,7 @@
 // material-ui
 import * as React from 'react';
 import {
+    //Link,
     Button,
     Grid,
     Typography,
@@ -14,7 +15,7 @@ import * as FormatUtils from "utils/FormatUtils";
 import * as StatusUtils from "utils/statusUtils/PublicNoteStatusUtils";
 import { useNavigate } from "react-router-dom";
 import { FiDataGrid } from "components/FiDataGrid";
-import { notifyActionSuccess } from 'utils/CommonFunction';
+import { notifyActionSuccess, clickableLink } from 'utils/CommonFunction';
 import { FormattedMessage, useIntl } from "react-intl";
 // ==============================|| EVENT TABLE ||============================== //
 
@@ -34,9 +35,6 @@ export default function SearchPublicNoticeTable({ recordList, reloadFunction })
         setRows(recordList);
     }, [recordList]);
 
-    const handleEditClick = (params) => () => {
-        navigate('/application/' + params.id);
-    };
 
 
     const columns = [
@@ -46,7 +44,7 @@ export default function SearchPublicNoticeTable({ recordList, reloadFunction })
             width: 150,
             cellClassName: 'actions',
             renderCell: (params) => {
-                return <Button onClick={handleEditClick(params)}><u>{params.row.appNo}</u></Button>;
+                return clickableLink('/application/' + params.id, params.row.appNo);
             },
         },
         {

src/pages/User/SearchPage/UserTable.js

@@ -1,15 +1,13 @@
 // material-ui
 import * as React from 'react';
-import { GridActionsCellItem,} from "@mui/x-data-grid";
 import {FiDataGrid} from "components/FiDataGrid";
-import EditIcon from '@mui/icons-material/Edit';
 import {useEffect} from "react";
 import {useNavigate} from "react-router-dom";
 import { useTheme } from '@mui/material/styles';
 import Checkbox from '@mui/material/Checkbox';
 import * as UrlUtils from "../../../utils/ApiPathConst";
 import * as HttpUtils from '../../../utils/HttpUtils';
-import { notifyLockSuccess, notifyUnlockSuccess } from 'utils/CommonFunction';
+import { notifyLockSuccess, notifyUnlockSuccess , clickableLink} from 'utils/CommonFunction';
 
 // ==============================|| EVENT TABLE ||============================== //
 
@@ -23,10 +21,6 @@ export default function UserTable({recordList,setChangeLocked}) {
         setRows(recordList);
     }, [recordList]);
 
-    const handleEditClick = (id) => () => {
-        navigate('/user/'+ id);
-    };
-
     const handleLock = (params) => () => {
         setChangeLocked(false)
         if (params.row.locked==true){
@@ -60,29 +54,32 @@ export default function UserTable({recordList,setChangeLocked}) {
     };
 
     const columns = [
-        {
-            field: 'actions',
-            type: 'actions',
-            headerName: 'Actions',
-            width: 100,
-            cellClassName: 'actions',
-            getActions: ({id}) => {
-                return [
-                    <GridActionsCellItem
-                        key="OutSave"
-                        icon={<EditIcon/>}
-                        label="Edit"
-                        className="textPrimary"
-                        onClick={handleEditClick(id)}
-                        color="primary"
-                    />]
-            },
-        },
+        // {
+        //     field: 'actions',
+        //     type: 'actions',
+        //     headerName: 'Actions',
+        //     width: 100,
+        //     cellClassName: 'actions',
+        //     getActions: ({id}) => {
+        //         return [
+        //             <GridActionsCellItem
+        //                 key="OutSave"
+        //                 icon={<EditIcon/>}
+        //                 label="Edit"
+        //                 className="textPrimary"
+        //                 onClick={handleEditClick(id)}
+        //                 color="primary"
+        //             />]
+        //     },
+        // },
         {
             id: 'username',
             field: 'username',
             headerName: 'Username',
             flex: 1,
+            renderCell: (params) => {
+                return clickableLink('/user/'+ params.row.id, params.row.username);
+            },
         },
         {
             id: 'enName',

src/pages/pnspsNotifyTest/index.js

@@ -1,58 +0,0 @@
-import { Grid, Button, TextField } from '@mui/material';
-import { useState } from 'react';
-import axios from 'axios';
-import { apiPath } from 'auth/utils';
-
-const TestMailPage = () => {
-  const [host, setHost] = useState(apiPath+'/test');
-  const [mail, setMail] = useState('');
-  const [tempKey, setTempKey] = useState('');
-
-  const hostChange = (event) => {
-    setHost(event.target.value);
-  };
-
-  const mailChange = (event) => {
-    setMail(event.target.value);
-  };
-
-  const tempKeyChange = (event) => {
-    setTempKey(event.target.value);
-  };
-
-  const doMailTest = () => {
-    axios.post(host, {
-      email: mail,
-      tempKey: tempKey,
-    })
-    .then((response) => {
-    console.log(response.data);
-        // Handle data
-    })
-    .catch((error) => {
-    console.log(error);
-    })
-  };
-    
-  return (
-    <Grid 
-        container  
-        alignItems='center'
-        sx={{
-          maxWidth: { xs: 1, lg: 1000 },
-          margin: { xs: 2.5, md: 3 },
-          '& > *': {
-            flexGrow: 1,
-            flexBasis: '100%'
-          }
-        }}
-        spacing={3}>
-            <Grid item xs={12}><TextField id='hostField' label='Email Api' variant='filled' onChange={hostChange} value={host} fullWidth /></Grid>
-            <Grid item xs={12}><TextField id='mailField' label='Target Email' variant='filled' onChange={mailChange} value={mail} fullWidth /></Grid>
-            <Grid item xs={12}><TextField id='mailField' label='Email Template Key' variant='filled' onChange={tempKeyChange} value={tempKey} fullWidth /></Grid>
-            <Grid item xs={12}><Button variant='contained' onClick={doMailTest}>Test</Button></Grid>
-        </Grid>
-    );
-};
-
-export default TestMailPage;

src/routes/LoginRoutes.js

@@ -31,7 +31,6 @@ const IAmSmart_AuthCallback = Loadable(lazy(() => import('pages/iAmSmart/AuthCal
 const IAmSmart_RegistryCallback = Loadable(lazy(() => import('pages/iAmSmart/RegistryCallback')));
 
 //TODO: this page for testing only, please remove at prod
-const TestMailPage = Loadable(lazy(() => import('pages/pnspsNotifyTest')));
 const VerifyPage = Loadable(lazy(() => import('pages/authentication/Verify')));
 const Testfps = Loadable(lazy(() => import('pages/Payment/FPS/FPSTest')));
 const Payment_FPS_CallBack = Loadable(lazy(() => import('pages/Payment/FPS/fpscallback')));
@@ -42,10 +41,6 @@ const LoginRoutes = {
   path: '/',
   element: <MainLayout />,
   children: [
-    {//TODO: this page for testing only, please remove at prod
-      path: 'testMailPage',
-      element: <TestMailPage/>
-    },
     {
       path: 'login',
       element: <AuthLogin />
@@ -94,10 +89,6 @@ const LoginRoutes = {
       path: 'iamsmart/loginSucess',
       element: <IAmSmart_SuccessCallback/>
     },
-    {
-      path: 'testMailPage',
-      element: <TestMailPage/>
-    },
     {
       path: 'verify/:verifyCode/:email',
       element: <VerifyPage/>

src/utils/CommonFunction.js

@@ -8,6 +8,10 @@ import Dialog from "@mui/material/Dialog";
 import * as React from "react";
 import { toast } from "react-toastify";
 
+export const clickableLink=(link, label)=> {
+    return <a href={link}>{label}</a>;
+}
+
 export function getDeletedRecordWithRefList(referenceList, updatedList) {
     return referenceList.filter(x => !updatedList.includes(x));
 }