Add Invoice zh translation

src/components/InvoiceSearch/InvoiceSearch.tsx

@@ -8,6 +8,7 @@ import EditNote from "@mui/icons-material/EditNote";
 import { moneyFormatter } from "@/app/utils/formatUtil"
 import { Button, ButtonGroup, Stack, Tab, Tabs, TabsProps, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, TextField, CardContent, Typography, Divider, Card } from "@mui/material";
 import FileUploadIcon from '@mui/icons-material/FileUpload';
+import AddIcon from '@mui/icons-material/Add';
 import { deleteInvoice, importIssuedInovice, importReceivedInovice, updateInvoice } from "@/app/api/invoices/actions";
 import { deleteDialog, errorDialogWithContent, successDialog } from "../Swal/CustomAlerts";
 import { invoiceList, issuedInvoiceList, issuedInvoiceSearchForm, receivedInvoiceList, receivedInvoiceSearchForm } from "@/app/api/invoices";
@@ -17,6 +18,8 @@ import { useGridApiRef } from "@mui/x-data-grid";
 import StyledDataGrid from "../StyledDataGrid";
 
 import { uniq } from "lodash";
+import CreateInvoiceModal from "./CreateInvoiceModal";
+
 
 
 interface Props {
@@ -44,7 +47,7 @@ type SearchParamNames2 = keyof SearchQuery2;
 
 const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoices }) => {
   // console.log(invoices)
-  const { t } = useTranslation("invoices");
+  const { t } = useTranslation("Invoice");
   const [tabIndex, setTabIndex] = useState(0);
 
   const [filteredIssuedInvoices, setFilteredIssuedInvoices] = useState(issuedInvoice);
@@ -122,6 +125,16 @@ const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoic
     }
   }, []);
 
+  const [modelOpen, setModelOpen] = useState<boolean>(false);
+
+  const handleAddInvoiceClick = useCallback(() => {
+    setModelOpen(true)
+  },[])
+
+  const handleModalClose = useCallback(() => {
+    setModelOpen(false)
+  },[])
+
   const handleImportError = (response: any) => {
     if (response.emptyRowList.length >= 1) {
       showErrorDialog(
@@ -458,6 +471,14 @@ const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoic
       spacing={2}
     >
       <ButtonGroup variant="contained">
+        {/* <Button 
+          startIcon={<AddIcon />} 
+          variant="outlined" 
+          component="label"
+          onClick={handleAddInvoiceClick}
+          >
+          {t("Create Invoice")}
+        </Button> */}
         <Button startIcon={<FileUploadIcon />} variant="contained" component="label">
           <input
             id='importExcel'
@@ -504,11 +525,11 @@ const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoic
       <Card sx={{ display: "block" }}>
         <CardContent>
         <Stack direction="row" justifyContent="space-between">
-          <Typography variant="h6">{t('Total Issued Amount (HKD):')}</Typography>
+          <Typography variant="h6">{t('Total Issued Amount (HKD)')}:</Typography>
           <Typography variant="h6">{moneyFormatter.format(filteredIvoices.reduce((acc, current) => (acc + current.issuedAmount), 0))}</Typography>
         </Stack>
         <Stack direction="row" justifyContent="space-between">
-          <Typography variant="h6">{t('Total Received Amount (HKD):')}</Typography>
+          <Typography variant="h6">{t('Total Received Amount (HKD)')}:</Typography>
           <Typography variant="h6">{moneyFormatter.format(filteredIvoices.reduce((acc, current) => (acc + current.receivedAmount), 0))}</Typography>
         </Stack>
         </CardContent>
@@ -593,7 +614,10 @@ const InvoiceSearch: React.FC<Props> = ({ issuedInvoice, receivedInvoice, invoic
         </Button>
       </DialogActions>
     </Dialog>
-      
+    <CreateInvoiceModal
+      isOpen={modelOpen}
+      onClose={handleModalClose}
+    />
     </>
   );
 };

src/i18n/zh/Invoice.json

@@ -0,0 +1,24 @@
+{
+  "Invoice No": "發票編號",
+  "Project Code": "項目代碼",
+  "Stage": "階段",
+  "Project Name": "項目名稱",
+  "Issue Date": "發行日期",
+  "Issue Date To": "發行日期",
+  "Settle Date": "结算日期",
+  "Settle Date To": "结算日期",
+  "Import Fail": "匯入失敗",
+  "Please fill the mandatory field at Row": "請填寫必須填寫字段",
+  "Please check the corresponding project code": "請檢查項目代碼",
+  "Please check the corresponding Invoice No. The invoice is imported.": "請檢查發票編號, 此發票編號已匯入",
+  "Please check the corresponding Invoice No. The below invoice has duplicated number.": "請檢查發票編號, 發票編號已匯入",
+  "Import Success": "匯入成功",
+  "Please check the corresponding Invoice No. The invoice has not yet issued.": "請檢查發票編號, 發票編號未發行",
+  "Amount (HKD)": "金額 (港元)",
+  "Actual Received Amount (HKD)": "實際收取金額 (港元)",
+  "Import Invoice Issue Summary": "匯入發票 - 發行概要",
+  "Import Invoice Amount Receive Summary": "匯入發票 - 實收概要",
+  "Total Issued Amount (HKD)": "總金額 (港元)",
+  "Total Received Amount (HKD)": "總實際收取金額 (港元)",
+  "Edit Invoice": "修改發票內容"
+}