header h4 to h3

src/components/iAmSmartButton.js

@@ -25,7 +25,7 @@ export function IAmSmartButton({ label, onClickFun, fullWidth }) {
 
     return (
         <Button onClick={()=>doOnClick()}  sx={{textTransform: 'none'}} color="iAmSmart" fullWidth={fullWidth} size="large" variant="outlined" startIcon={<img src={iAmSmartICon} alt={intl.formatMessage({ id: 'iAmSmartAlt' })} width="30" />}>
-        <Typography variant="h5">
+        <Typography component="span" variant="h5">
             {_label}
         </Typography>
       </Button>  

src/pages/authentication/RegisterCustom.js

@@ -154,7 +154,7 @@ const RegisterCustom = () => {
                       },
                     }}
                   >
-                    <Typography variant="h5" sx={{ color: 'inherit' }}>
+                    <Typography component="span" variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="registerNewPersonalUser" />
                     </Typography>
                   </Button>
@@ -164,7 +164,7 @@ const RegisterCustom = () => {
                   </Typography>
                 </Grid>
                 <Grid item xs={12} md={6} sx={{ borderLeft: 1, borderColor: 'grey.500' }}>
-                  <Typography mb={4} variant="h3">
+                  <Typography component="h2" mb={4} variant="h3">
                     <FormattedMessage id="businessUser" />
                   </Typography>
                   <Button
@@ -184,7 +184,7 @@ const RegisterCustom = () => {
                       },
                     }}
                   >
-                    <Typography component="h2" variant="h5" sx={{ color: 'inherit' }}>
+                    <Typography component="span" variant="h5" sx={{ color: 'inherit' }}>
                       <FormattedMessage id="registerNewBusinessUser" />
                     </Typography>
                   </Button>

src/pages/authentication/auth-forms/BusCustomFormWizard.js

@@ -343,6 +343,10 @@ const BusCustomFormWizard = (props) => {
 
         }
 
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+
     }, [updateRows]);
 
     const handleBrNo = (brNo) => {
@@ -396,6 +400,8 @@ const BusCustomFormWizard = (props) => {
 
         setFileListData(saveFileList)
         setFileList(updatedFileList);
+        setUpdateRows(saveFileList);
+        event.target.value = '';
     };
 
     useEffect(() => {
@@ -815,6 +821,7 @@ const BusCustomFormWizard = (props) => {
                                                     endAdornment={
                                                         <InputAdornment position="end">
                                                             <IconButton
+                                                                role="button"
                                                                 aria-label={intl.formatMessage({
                                                                     id: showPassword ? "ariaHidePassword" : "ariaShowPassword"
                                                                 })}
@@ -891,6 +898,7 @@ const BusCustomFormWizard = (props) => {
                                                     endAdornment={
                                                         <InputAdornment position="end">
                                                             <IconButton
+                                                                role="button"
                                                                 aria-label={intl.formatMessage({
                                                                     id: showConfirmPassword ? "ariaHidePassword" : "ariaShowPassword"
                                                                 })}
@@ -1651,7 +1659,7 @@ const BusCustomFormWizard = (props) => {
                                                 <img src={captchaImg} alt="" />
                                             </Grid>
                                             <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>
-                                                <IconButton aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}>
+                                                <IconButton role="button" aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}>
                                                     <LoopIcon fontSize="inherit" />
                                                 </IconButton>
                                             </Grid>

src/pages/authentication/auth-forms/CustomFormWizard.js

@@ -432,6 +432,10 @@ const CustomFormWizard = (props) => {
 
         }
 
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+
     }, [updateRows]);
 
     const handleFileUpload = (event) => {
@@ -473,6 +477,8 @@ const CustomFormWizard = (props) => {
 
         setFileListData(saveFileList)
         setFileList(updatedFileList);
+        setUpdateRows(saveFileList);
+        event.target.value = '';
     };
 
     useEffect(() => {
@@ -1033,6 +1039,7 @@ const CustomFormWizard = (props) => {
                                                     endAdornment={
                                                         <InputAdornment position="end">
                                                             <IconButton
+                                                                role="button"
                                                                 aria-label={intl.formatMessage({
                                                                     id: showPassword ? "ariaHidePassword" : "ariaShowPassword"
                                                                 })}
@@ -1109,6 +1116,7 @@ const CustomFormWizard = (props) => {
                                                     endAdornment={
                                                         <InputAdornment position="end">
                                                             <IconButton
+                                                                role="button"
                                                                 aria-label={intl.formatMessage({
                                                                     id: showConfirmPassword ? "ariaHidePassword" : "ariaShowPassword"
                                                                 })}
@@ -1979,7 +1987,7 @@ const CustomFormWizard = (props) => {
                                                 <img src={captchaImg} alt="" />
                                             </Grid>
                                             <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}>
-                                                <IconButton aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}>
+                                                <IconButton role="button" aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}>
                                                     <LoopIcon fontSize="inherit" />
                                                 </IconButton>
                                             </Grid>
@@ -2107,6 +2115,7 @@ const CustomFormWizard = (props) => {
                                         </Typography>
                                     
                                         <IconButton
+                                            role="button"
                                             aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })}
                                             onClick={handleClickShowId}
                                             onMouseDown={handleMouseDownId}

src/pages/authentication/auth-forms/UploadFileTable.js

@@ -1,17 +1,16 @@
 // material-ui
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
-import {
-    DataGrid,
-    GridActionsCellItem,
-    GridRowModes
-} from "@mui/x-data-grid";
 import * as React from 'react';
 import { useEffect } from "react";
-// import {useNavigate} from "react-router-dom";
-// import { useTheme } from '@mui/material/styles';
 import {
     Box,
+    IconButton,
     Stack,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
     Typography
 } from '@mui/material';
 import { FormattedMessage, useIntl } from "react-intl";
@@ -20,97 +19,79 @@ import { FormattedMessage, useIntl } from "react-intl";
 export default function UploadFileTable({ recordList, setUpdateRows, }) {
 
     const [rows, setRows] = React.useState(recordList);
-    const [rowModesModel, setRowModesModel] = React.useState({});
-    // const theme = useTheme();
 
     const intl = useIntl();
 
-    // const navigate = useNavigate()
-
     useEffect(() => {
         setRows(recordList);
-        // console.log(disableDelete);
     }, [recordList]);
 
-    function NoRowsOverlay() {
+    const handleCancelClick = (id) => {
+        setRows((prevRows) => {
+            const newRows = prevRows.filter((row) => row.id !== id);
+            setUpdateRows(newRows);
+            return newRows;
+        });
+    };
+
+    const formatFileSize = (size) => `${Math.ceil(size / 1024)} KB`;
+
+    if (rows.length === 0) {
         return (
-            <Stack height="100%" alignItems="center" justifyContent="center">
+            <Box
+                sx={{
+                    height: '200px',
+                    width: '100%',
+                    border: 1,
+                    borderColor: 'divider',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                }}
+            >
                 <Typography variant="h6">
                     <FormattedMessage id="noFile"/>
                 </Typography>
-                {/* <pre>(rows=&#123;[]&#125;)</pre> */}
-            </Stack>
+            </Box>
         );
     }
 
-    const handleCancelClick = (id) => () => {
-        setRowModesModel({
-            ...rowModesModel,
-            [id]: { mode: GridRowModes.View, ignoreModifications: true },
-        });
-        // console.log("Starting Delete")
-        // const editedRow = rows.find((row) => row.id === id);
-        // console.log(editedRow)
-        // console.log(editedRow.isNew)
-        setUpdateRows(rows.filter((row) => row.id !== id));
-        setRows(rows.filter((row) => row.id !== id));
-    }
-
-    const columns = [
-        {
-            field: 'actions',
-            type: 'actions',
-            headerName: '',
-            width: 30,
-            cellClassName: 'actions',
-            // hide:true,
-            getActions: ({ id }) => {
-                return [
-                    <GridActionsCellItem
-                        key="OutSave"
-                        icon={<RemoveCircleOutlineIcon />}
-                        label="delete"
-                        className="textPrimary"
-                        onClick={handleCancelClick(id)}
-                        color="error"
-                    />]
-            },
-        },
-        {
-            id: 'name',
-            field: 'name',
-            headerName: intl.formatMessage({ id: 'fileName' }),
-            flex: 4,
-        },
-        {
-            id: 'size',
-            field: 'size',
-            headerName: intl.formatMessage({ id: 'fileSize' }),
-            valueGetter: (params) => {
-                // console.log(params)
-                return Math.ceil(params.value / 1024) + " KB";
-            },
-            flex: 2,
-        },
-    ];
-
     return (
-        <Box style={{ height: '200px', width: '100%' }}>
-            <DataGrid
-                rows={rows}
-                columns={columns}
-                editMode="row"
-                sx={{ border: 1 }}
-                rowModesModel={rowModesModel}
-                disablePagination
-                components={{ NoRowsOverlay, }}
-                // hideFooterPagination={true}
-                disableSelectionOnClick
-                disableColumnMenu
-                disableColumnSelector
-                hideFooter
-                getRowHeight={()=>"auto"}
-            />
+        <Box sx={{ height: '200px', width: '100%', border: 1, borderColor: 'divider', overflow: 'auto' }}>
+            <Table size="small" aria-label={intl.formatMessage({ id: 'fileName' })}>
+                <TableHead>
+                    <TableRow>
+                        <TableCell padding="checkbox" sx={{ width: 48 }} />
+                        <TableCell>{intl.formatMessage({ id: 'fileName' })}</TableCell>
+                        <TableCell align="right">{intl.formatMessage({ id: 'fileSize' })}</TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {rows.map((row) => (
+                        <TableRow key={row.id}>
+                            <TableCell padding="checkbox">
+                                <IconButton
+                                    size="small"
+                                    color="error"
+                                    role="button"
+                                    aria-label={intl.formatMessage({ id: 'delete' })}
+                                    onClick={() => handleCancelClick(row.id)}
+                                >
+                                    <RemoveCircleOutlineIcon fontSize="small" />
+                                </IconButton>
+                            </TableCell>
+                            <TableCell>
+                                <Stack direction="row" alignItems="center">
+                                    <Typography variant="body2">{row.name}</Typography>
+                                </Stack>
+                            </TableCell>
+                            <TableCell align="right">
+                                <Typography variant="body2">{formatFileSize(row.size)}</Typography>
+                            </TableCell>
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </Table>
         </Box>
     );
 }

src/pages/dashboard/Public/Notice.js

@@ -32,7 +32,7 @@ const SearchDemandNoteForm = (props) => {
         listData.map((item, index) => {
             list.push(
                 <Stack key={item.id != null ? item.id : `announce-${index}`} direction="column">
-                    <Typography variant='h4' align="justify"><b>{locale === 'en' ?item.subjectEng:locale === 'zh-HK' ?item.subjectCht:item.subjectChs}</b></Typography>
+                    <Typography component="div" variant="h4" align="justify"><b>{locale === 'en' ?item.subjectEng:locale === 'zh-HK' ?item.subjectCht:item.subjectChs}</b></Typography>
                     <Typography align="justify">{DateUtils.dateValue(item.announceDate)}</Typography>
                     <Typography sx={{pt: 1}} align="justify">{locale === 'en' ?item.contentEng:locale === 'zh-HK' ?item.contentCht:item.contentChs}</Typography>
                     <Divider sx={{ pt: 1 }} />

src/translations/en.json

@@ -528,6 +528,7 @@
   "submitReply": "Submit",
   "requiredUploadFix": "Please upload the modified file of the manuscript",
   "upload": "Upload",
+  "delete": "Delete",
   "actionFail": "Action failed: Please check the content and submit the reply again",
   "issueInvalidMsg": "Application for the selected publication volume has been closed. Please choose another volume to apply again.",
   "singleCol":"Single Column",

src/translations/zh-CN.json

@@ -524,6 +524,7 @@
   "submitReply": "提交回复",
   "requiredUploadFix": "请上载稿件修改的档案",
   "upload": "上载",
+  "delete": "删除",
   "actionFail": "行动失败: 请检查内容并再次提交回复",
   "issueInvalidMsg": "所选刊登期数已截稿，请选择另一期重新申请。",
   "singleCol":"一格位",

src/translations/zh-HK.json

@@ -525,6 +525,7 @@
   "submitReply": "提交回覆",
   "requiredUploadFix": "請上載稿件修改的檔案",
   "upload": "上載",
+  "delete": "刪除",
   "actionFail": "行動失敗: 請檢查內容並再次提交回覆",
   "issueInvalidMsg": "所選刊登期數已截稿，請選擇另一期重新申請。",
   "singleCol":"一格位",