| @@ -4,6 +4,7 @@ import { useMemo } from 'react'; | |||
| // material-ui | |||
| import { useTheme } from '@mui/material/styles'; | |||
| import { Box, Drawer, useMediaQuery } from '@mui/material'; | |||
| import { useIntl } from 'react-intl'; | |||
| // project import | |||
| import DrawerHeader from './DrawerHeader'; | |||
| @@ -15,6 +16,7 @@ import { drawerWidth } from 'config'; | |||
| const MainDrawer = ({ open, handleDrawerToggle, window }) => { | |||
| const theme = useTheme(); | |||
| const intl = useIntl(); | |||
| const matchDownMD = useMediaQuery(theme.breakpoints.down('lg')); | |||
| // responsive drawer container | |||
| @@ -25,7 +27,7 @@ const MainDrawer = ({ open, handleDrawerToggle, window }) => { | |||
| const drawerHeader = useMemo(() => <DrawerHeader open={open} />, [open]); | |||
| return ( | |||
| <Box component="nav" sx={{ flexShrink: { md: 0 }, zIndex: 1300 }} aria-label="mailbox folders"> | |||
| <Box component="nav" sx={{ flexShrink: { md: 0 }, zIndex: 1300 }} aria-label={intl.formatMessage({ id: 'ariaMailboxFolders' })}> | |||
| {!matchDownMD ? ( | |||
| <MiniDrawerStyled variant="permanent" open={open}> | |||
| {drawerHeader} | |||
| @@ -33,6 +33,7 @@ import { LogoutOutlined, | |||
| import { handleLogoutFunction } from 'auth/index'; | |||
| import {useNavigate} from "react-router-dom"; | |||
| import {useDispatch} from "react-redux"; | |||
| import { useIntl } from 'react-intl'; | |||
| import AccountCircleIcon from '@mui/icons-material/AccountCircle'; | |||
| // tab panel wrapper | |||
| @@ -61,6 +62,7 @@ TabPanel.propTypes = { | |||
| const Profile = () => { | |||
| const theme = useTheme(); | |||
| const intl = useIntl(); | |||
| const navigate = useNavigate() | |||
| const dispatch = useDispatch() | |||
| @@ -170,7 +172,7 @@ const Profile = () => { | |||
| {/* {open && ( | |||
| <> | |||
| <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | |||
| <Tabs variant="fullWidth" value={value} onChange={handleChange} aria-label="profile tabs"> | |||
| <Tabs variant="fullWidth" value={value} onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaProfileTabs' })}> | |||
| <Tab | |||
| sx={{ | |||
| display: 'flex', | |||
| @@ -31,10 +31,12 @@ import { ThemeProvider } from "@emotion/react"; | |||
| import { dateStr_Year } from "utils/DateUtils"; | |||
| import { notifySaveSuccess } from 'utils/CommonFunction'; | |||
| import { isGrantedAny } from "auth/utils"; | |||
| import { useIntl } from 'react-intl'; | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| const Index = () => { | |||
| const intl = useIntl(); | |||
| const [comboData, setComboData] = React.useState([]); | |||
| const [holidayComboData, setHolidayComboData] = React.useState([]); | |||
| const [onReady, setOnReady] = React.useState(false); | |||
| @@ -198,7 +200,7 @@ const Index = () => { | |||
| hidden | |||
| disabled={waitImport} | |||
| onChange={readFile} | |||
| aria-label="Upload Excel file (.xlsx)" | |||
| aria-label={intl.formatMessage({ id: 'ariaUploadExcelFile' })} | |||
| /> | |||
| </Button> | |||
| </ThemeProvider> | |||
| @@ -31,11 +31,12 @@ import { ThemeProvider } from "@emotion/react"; | |||
| import { dateStr_Year } from "utils/DateUtils"; | |||
| import { notifySaveSuccess } from 'utils/CommonFunction'; | |||
| import { isGrantedAny } from "auth/utils"; | |||
| import { useIntl } from 'react-intl'; | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| const Index = () => { | |||
| const intl = useIntl(); | |||
| const [record, setRecord] = React.useState([]); | |||
| const [comboData, setComboData] = React.useState([]); | |||
| const [onReady, setOnReady] = React.useState(false); | |||
| @@ -172,7 +173,7 @@ const Index = () => { | |||
| size="large" | |||
| disabled={waitDownload} | |||
| onClick={doExport} | |||
| aria-label="Export holiday template" | |||
| aria-label={intl.formatMessage({ id: 'ariaExportHolidayTemplate' })} | |||
| > | |||
| <Typography variant="h5">Export</Typography> | |||
| </Button> | |||
| @@ -194,7 +195,7 @@ const Index = () => { | |||
| hidden | |||
| disabled={waitImport} | |||
| onChange={readFile} | |||
| aria-label="Upload Excel file (.xlsx)" | |||
| aria-label={intl.formatMessage({ id: 'ariaUploadExcelFile' })} | |||
| /> | |||
| </Button> | |||
| </ThemeProvider> | |||
| @@ -19,12 +19,13 @@ import * as ComboData from "utils/ComboData"; | |||
| import * as React from "react"; | |||
| import { useFormik } from 'formik'; | |||
| import { useNavigate } from "react-router-dom"; | |||
| import { useIntl } from 'react-intl'; | |||
| import Loadable from 'components/Loadable'; | |||
| import { notifySaveSuccess } from 'utils/CommonFunction'; | |||
| const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable'))); | |||
| const FormPanel = ({ formData }) => { | |||
| const intl = useIntl(); | |||
| const [data, setData] = React.useState({}); | |||
| const [columnPrice, setColumnPrice] = React.useState(ComboData.proofPrice[0]); | |||
| const [attachments, setAttachments] = React.useState([]); | |||
| @@ -289,7 +290,7 @@ const FormPanel = ({ formData }) => { | |||
| hidden | |||
| disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)} | |||
| onChange={readFile} | |||
| aria-label="Upload PDF file" | |||
| aria-label={intl.formatMessage({ id: 'ariaUploadPdfFile' })} | |||
| /> | |||
| </Button> | |||
| </Grid> | |||
| @@ -9,6 +9,7 @@ import { | |||
| import { TabPanel, TabContext, TabList } from '@mui/lab'; | |||
| import {useState, useEffect, lazy} from "react"; | |||
| import { useIntl } from 'react-intl'; | |||
| import Loadable from 'components/Loadable'; | |||
| const LoadingComponent = Loadable(lazy(() => import('../../../extra-pages/LoadingComponent'))); | |||
| @@ -20,7 +21,7 @@ const StatusHistoryTab = Loadable(lazy(() => import('./StatusHistoryTab'))); | |||
| // ==============================|| DASHBOARD - DEFAULT ||============================== // | |||
| const PublicNotice = ({ appId, proofCount, paymentCount, statusHistoryCount, setProofCount, setPaymentCount, setStatusHistoryCount }) => { | |||
| const intl = useIntl(); | |||
| const [onReady, setOnReady] = useState(false); | |||
| const [selectedTab, setSelectedTab] = useState("1"); | |||
| @@ -41,7 +42,7 @@ const PublicNotice = ({ appId, proofCount, paymentCount, statusHistoryCount, set | |||
| <Grid item xs={12}> | |||
| <TabContext value={selectedTab}> | |||
| <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto' }}> | |||
| <TabList onChange={handleChange} aria-label="lab API tabs example"> | |||
| <TabList onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaRelatedRecords' })}> | |||
| <Tab renderActiveOnly={false} label={"Proof (" + proofCount + ") "} value="1" /> | |||
| <Tab renderActiveOnly={false} label={"Online Payment (" + paymentCount + ") "} value="2" /> | |||
| <Tab renderActiveOnly={false} label={"Status History (" + statusHistoryCount + ") "} value="3" /> | |||
| @@ -43,7 +43,7 @@ const PublicNotice = ({ appId, proofCount, paymentCount, setProofCount, setPayme | |||
| <Grid item xs={12}> | |||
| <TabContext value={selectedTab}> | |||
| <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | |||
| <TabList onChange={handleChange} aria-label="lab API tabs example"> | |||
| <TabList onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaRelatedRecords' })}> | |||
| <Tab | |||
| aria-label={intl.formatMessage({ id: 'proofRecord' })} | |||
| label={ | |||
| @@ -142,7 +142,7 @@ const PublicNotice = () => { | |||
| <Grid item xs={12} sm={12} md={12} lg={12} sx={{ height: '100%', maxWidth: '100%', width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: { xs: 1, md: 3 }, ml: { xs: 1, md: 3 }, mb: 3, ..._sx }}> | |||
| <TabContext value={selectedTab}> | |||
| <Box sx={{ borderBottom: 1, borderColor: 'divider', overflowX: 'auto', overflowY: 'auto' }}> | |||
| <TabList variant="scrollable" onChange={handleChange} aria-label="lab API tabs example" sx={{ display: 'flex', flexDirection: 'row' }}> | |||
| <TabList variant="scrollable" onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaRelatedRecords' })} sx={{ display: 'flex', flexDirection: 'row' }}> | |||
| <Tab aria-label={intl.formatMessage({ id: 'processing' })} label={intl.formatMessage({ id: 'processing' }) + " (" + submittedCount + ")"} value="1" /> | |||
| <Tab aria-label={intl.formatMessage({ id: 'pendingPublish' })} label={intl.formatMessage({ id: 'pendingPublish' }) + " (" + pendingPublishCount + ")"} value="3" /> | |||
| <Tab aria-label={intl.formatMessage({ id: 'pendingPayment' })} label={intl.formatMessage({ id: 'pendingPayment' }) + " (" + pendingPaymentCount + ")"} value="4" /> | |||
| @@ -176,7 +176,7 @@ const PublicNotice = () => { | |||
| <Grid item xs={12} sx={{ minHeight: '80vh', height: "100%", maxHeight: '300vh', maxWidth: '95%', width: "-webkit-fill-available", backgroundColor: "#fff", mt: 3, mr: { xs: 1, md: 3 }, ml: { xs: 1, md: 3 }, mb: 3, ..._sx }}> | |||
| <TabContext value={selectedTab}> | |||
| <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | |||
| <TabList variant="scrollable" onChange={handleChange} aria-label="lab API tabs example"> | |||
| <TabList variant="scrollable" onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaApplicationGroup' })}> | |||
| <Tab aria-label={intl.formatMessage({ id: 'processing' })} label={intl.formatMessage({ id: 'processing' }) + " (" + submittedCount + ")"} value="1" /> | |||
| <Tab aria-label={intl.formatMessage({ id: 'pendingPayment' })} label={intl.formatMessage({ id: 'pendingPayment' }) + " (" + pendingPaymentCount + ")"} value="3" /> | |||
| <Tab aria-label={intl.formatMessage({ id: 'pendingPublish' })} label={intl.formatMessage({ id: 'pendingPublish' }) + " (" + pendingPublishCount + ")"} value="4" /> | |||
| @@ -299,7 +299,7 @@ const Index = () => { | |||
| endAdornment:( | |||
| <InputAdornment position="end"> | |||
| <IconButton | |||
| aria-label="toggle new password visibility" | |||
| aria-label={intl.formatMessage({ id: 'ariaToggleNewPasswordVisibility' })} | |||
| onClick={handleClickShowNewPassword} | |||
| onMouseDown={handleMouseDownNewPassword} | |||
| edge="end" | |||
| @@ -402,7 +402,7 @@ const UserMaintainPage = () => { | |||
| <MainCard elevation={0} border={false} content={false} sx={{maxWidth: '100%', mr:2, width: "-webkit-fill-available"}}> | |||
| <TabContext value={selectedTab}> | |||
| <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | |||
| <TabList variant="scrollable" onChange={handleChange} aria-label="lab API tabs example"> | |||
| <TabList variant="scrollable" onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaRelatedRecords' })}> | |||
| <Tab label="Login Log" value="1" /> | |||
| </TabList> | |||
| </Box> | |||
| @@ -508,7 +508,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => { | |||
| {showId ? formik.values.identification?.slice(4) : "****"}{showId ? formik.values.checkDigit?'(' +formik.values.checkDigit+ ')': "()" : ""} | |||
| </Typography> | |||
| <IconButton | |||
| aria-label="toggle id visibility" | |||
| aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })} | |||
| onClick={handleClickShowId} | |||
| onMouseDown={handleMouseDownId} | |||
| edge="end" | |||
| @@ -537,7 +537,7 @@ const UserInformationCard_Individual = ({ formData, loadDataFun }) => { | |||
| {showId ? formik.values.identification?.slice(4) : "****"} | |||
| </Typography> | |||
| <IconButton | |||
| aria-label="toggle id visibility" | |||
| aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })} | |||
| onClick={handleClickShowId} | |||
| onMouseDown={handleMouseDownId} | |||
| edge="end" | |||
| @@ -276,7 +276,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => { | |||
| {showId ? formik.values.identification?.slice(4) : "****"}{showId ? formik.values.checkDigit?'(' +formik.values.checkDigit+ ')': "()" : ""} | |||
| </Typography> | |||
| <IconButton | |||
| aria-label="toggle id visibility" | |||
| aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })} | |||
| onClick={handleClickShowId} | |||
| onMouseDown={handleMouseDownId} | |||
| edge="end" | |||
| @@ -301,7 +301,7 @@ const UserInformationCard_Individual_Pub = ({ formData, loadDataFun }) => { | |||
| {showId ?formik.values.identification?.slice(4):"****"} | |||
| </Typography> | |||
| <IconButton | |||
| aria-label="toggle id visibility" | |||
| aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })} | |||
| onClick={handleClickShowId} | |||
| onMouseDown={handleMouseDownId} | |||
| edge="end" | |||
| @@ -184,7 +184,7 @@ const UserMaintainPage_Individual = () => { | |||
| <MainCard elevation={0} border={false} content={false} sx={{maxWidth: '100%', mr:2, width: "-webkit-fill-available"}}> | |||
| <TabContext value={selectedTab}> | |||
| <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | |||
| <TabList variant="scrollable" onChange={handleChange} aria-label="lab API tabs example"> | |||
| <TabList variant="scrollable" onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaRelatedRecords' })}> | |||
| <Tab label="Attachments" value="1" /> | |||
| <Tab label="Login Log" value="2" /> | |||
| </TabList> | |||
| @@ -281,7 +281,7 @@ const UserMaintainPage_Organization = () => { | |||
| <MainCard elevation={0} border={false} content={false} sx={{maxWidth: '100%', mr:2, width: "-webkit-fill-available"}}> | |||
| <TabContext value={selectedTab}> | |||
| <Box sx={{ borderBottom: 1, borderColor: 'divider' }}> | |||
| <TabList variant="scrollable" onChange={handleChange} aria-label="lab API tabs example"> | |||
| <TabList variant="scrollable" onChange={handleChange} aria-label={intl.formatMessage({ id: 'ariaRelatedRecords' })}> | |||
| <Tab label="Attachments" value="1" /> | |||
| <Tab label="Login Log" value="2" /> | |||
| </TabList> | |||
| @@ -103,7 +103,7 @@ const AuthWrapper = ({ children }) => { | |||
| > | |||
| <Box sx={{ position: 'relative' }}> | |||
| <IconButton | |||
| aria-label="Close" | |||
| aria-label={intl.formatMessage({ id: 'close' })} | |||
| onClick={handleCloseImagePopup} | |||
| sx={{ | |||
| position: 'absolute', | |||
| @@ -148,7 +148,7 @@ const AuthWrapper = ({ children }) => { | |||
| }} | |||
| > | |||
| <IconButton | |||
| aria-label="Close" | |||
| aria-label={intl.formatMessage({ id: 'close' })} | |||
| onClick={handleCloseNoticePopup} | |||
| sx={{ | |||
| position: 'absolute', | |||
| @@ -1579,7 +1579,7 @@ const BusCustomFormWizard = (props) => { | |||
| <img src={captchaImg} alt="" /> | |||
| </Grid> | |||
| <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}> | |||
| <IconButton aria-label="refrashCaptcha" size="large" onClick={() => { onCaptchaChange() }}> | |||
| <IconButton aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}> | |||
| <LoopIcon fontSize="inherit" /> | |||
| </IconButton> | |||
| </Grid> | |||
| @@ -1916,7 +1916,7 @@ const CustomFormWizard = (props) => { | |||
| <img src={captchaImg} alt="" /> | |||
| </Grid> | |||
| <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}> | |||
| <IconButton aria-label="refrashCaptcha" size="large" onClick={() => { onCaptchaChange() }}> | |||
| <IconButton aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}> | |||
| <LoopIcon fontSize="inherit" /> | |||
| </IconButton> | |||
| </Grid> | |||
| @@ -2044,7 +2044,7 @@ const CustomFormWizard = (props) => { | |||
| </Typography> | |||
| <IconButton | |||
| aria-label="toggle id visibility" | |||
| aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })} | |||
| onClick={handleClickShowId} | |||
| onMouseDown={handleMouseDownId} | |||
| edge="end" | |||
| @@ -529,7 +529,7 @@ const CustomFormWizard = (props) => { | |||
| {iAmSmartData?.idNo?.slice(0, 4)}{showId ? iAmSmartData?.idNo?.slice(4) : "****"}{showId ? '(' + iAmSmartData.checkDigit + ')' : null} | |||
| </Typography> | |||
| <IconButton | |||
| aria-label="toggle id visibility" | |||
| aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })} | |||
| onClick={handleClickShowId} | |||
| onMouseDown={handleMouseDownId} | |||
| edge="end" | |||
| @@ -1034,7 +1034,7 @@ const CustomFormWizard = (props) => { | |||
| <img src={captchaImg} alt="" /> | |||
| </Grid> | |||
| <Grid item xs={1} lg={1} style={{ "border": "0px solid black" }}> | |||
| <IconButton aria-label="refrashCaptcha" size="large" onClick={() => { onCaptchaChange() }}> | |||
| <IconButton aria-label={intl.formatMessage({ id: 'ariaRefreshCaptcha' })} size="large" onClick={() => { onCaptchaChange() }}> | |||
| <LoopIcon fontSize="inherit" /> | |||
| </IconButton> | |||
| </Grid> | |||
| @@ -1120,7 +1120,7 @@ const CustomFormWizard = (props) => { | |||
| {/* {formik.values.idNo + "(" + formik.values.checkDigit + ")"} */} | |||
| </Typography> | |||
| <IconButton | |||
| aria-label="toggle id visibility" | |||
| aria-label={intl.formatMessage({ id: 'ariaToggleIdVisibility' })} | |||
| onClick={handleClickShowComId} | |||
| onMouseDown={handleMouseDownComId} | |||
| edge="end" | |||
| @@ -2,11 +2,13 @@ import { | |||
| ButtonBase | |||
| } from '@mui/material' | |||
| import { useNavigate } from "react-router-dom"; | |||
| import { useIntl } from 'react-intl'; | |||
| import MainCard from 'components/MainCard'; | |||
| //import errorImg from '@src/assets/images/pages/error.svg' | |||
| const ErrorPage = () => { | |||
| const intl = useIntl(); | |||
| let navigate = useNavigate(); | |||
| const handleToHomePage = () =>{ | |||
| let path = `/`; | |||
| @@ -30,8 +32,7 @@ const ErrorPage = () => { | |||
| borderRadius: 30, | |||
| '&:hover': { bgcolor: 'secondary.lighter' } | |||
| }} | |||
| aria-label="Back to home" | |||
| aria-controls={open ? 'profile-grow' : undefined} | |||
| aria-label={intl.formatMessage({ id: 'ariaBackToHome' })} | |||
| aria-haspopup="true" | |||
| onClick={handleToHomePage}> | |||
| Back to home | |||
| @@ -629,5 +629,17 @@ | |||
| "paginationPrev": "Go to previous page", | |||
| "paginationNext": "Go to next page", | |||
| "sort": "Sort" | |||
| "sort": "Sort", | |||
| "ariaToggleNewPasswordVisibility": "Toggle new password visibility", | |||
| "ariaToggleIdVisibility": "Toggle ID visibility", | |||
| "ariaRefreshCaptcha": "Refresh CAPTCHA", | |||
| "ariaRelatedRecords": "Related Records", | |||
| "ariaApplicationGroup": "Application Group", | |||
| "ariaProfileTabs": "Profile tabs", | |||
| "ariaUploadPdfFile": "Upload PDF file", | |||
| "ariaExportHolidayTemplate": "Export holiday template", | |||
| "ariaUploadExcelFile": "Upload Excel file (.xlsx)", | |||
| "ariaBackToHome": "Back to home", | |||
| "ariaMailboxFolders": "Mailbox folders" | |||
| } | |||
| @@ -625,5 +625,17 @@ | |||
| "paginationPrev": "上一页", | |||
| "paginationNext": "下一页", | |||
| "sort": "排序" | |||
| "sort": "排序", | |||
| "ariaToggleNewPasswordVisibility": "切换新密码可见性", | |||
| "ariaToggleIdVisibility": "切换身份证明文件可见性", | |||
| "ariaRefreshCaptcha": "刷新验证码", | |||
| "ariaRelatedRecords": "相关记录", | |||
| "ariaApplicationGroup": "申请组别", | |||
| "ariaProfileTabs": "个人资料选项卡", | |||
| "ariaUploadPdfFile": "上传 PDF 文件", | |||
| "ariaExportHolidayTemplate": "导出假期模板", | |||
| "ariaUploadExcelFile": "上传 Excel 文件 (.xlsx)", | |||
| "ariaBackToHome": "返回主页", | |||
| "ariaMailboxFolders": "邮箱文件夹" | |||
| } | |||
| @@ -626,5 +626,17 @@ | |||
| "paginationPrev": "上一頁", | |||
| "paginationNext": "下一頁", | |||
| "sort": "排序" | |||
| "sort": "排序", | |||
| "ariaToggleNewPasswordVisibility": "切換新密碼可見性", | |||
| "ariaToggleIdVisibility": "切換身份證明文件可見性", | |||
| "ariaRefreshCaptcha": "重新載入驗證碼", | |||
| "ariaRelatedRecords": "相關記錄", | |||
| "ariaApplicationGroup": "申請組別", | |||
| "ariaProfileTabs": "個人檔案分頁", | |||
| "ariaUploadPdfFile": "上載 PDF 檔案", | |||
| "ariaExportHolidayTemplate": "匯出假期範本", | |||
| "ariaUploadExcelFile": "上載 Excel 檔案 (.xlsx)", | |||
| "ariaBackToHome": "返回主頁", | |||
| "ariaMailboxFolders": "郵箱資料夾" | |||
| } | |||