Update

src/components/ExpenseSearch/CreateExpenseModal.tsx

@@ -55,7 +55,7 @@ const CreateExpenseModal: React.FC<Props> = ({ isOpen, onClose, projects }) => {
       const postData: PostExpenseData[] = _data.map((item) => {
         return {
           expenseNo: item.expenseNo,
-          issueDate: dayjs(item.issueDate).format(INPUT_DATE_FORMAT),
+          // issueDate: dayjs(item.issueDate).format(INPUT_DATE_FORMAT),
           amount: item.amount,
           projectId: projects.find((p) => p.code === item.projectCode)!.id,
           projectCode: item.projectCode,

src/components/ExpenseSearch/ExpenseSearch.tsx

@@ -79,7 +79,7 @@ const ExpenseSearch: React.FC<Props> = ({ expenses, projects }) => {
       { name: "projectName", label: t("Project Name") },
       { name: "amount", label: t("Amount") },
       { name: "teamCode", label: t("Team") },
-      { name: "issueDate", label: t("Issue Date") },
+      // { name: "issueDate", label: t("Issue Date") },
     ],
     [t, onExpenseClick]
   );
@@ -134,20 +134,13 @@ const ExpenseSearch: React.FC<Props> = ({ expenses, projects }) => {
         <CardContent>
           <Stack direction="row" justifyContent="space-between">
             <Typography variant="h6">
-              {t("Total Issued Amount (HKD)")}:
+              {t("Total Amount (HKD)")}:
             </Typography>
             <Typography variant="h6">
-              {/* {moneyFormatter.format(filteredExpenses.reduce((acc, curr) => (acc + curr.issuedAmount), 0))} */}
-            </Typography>
-          </Stack>
-          <Stack direction="row" justifyContent="space-between">
-            <Typography variant="h6">
-              {t("Total Received Amount (HKD)")}:
-            </Typography>
-            <Typography variant="h6">
-              {/* {moneyFormatter.format(filteredExpenses.reduce((acc, curr) => (acc + curr.receivedAmount), 0))} */}
+              {moneyFormatter.format(filteredExpenses.reduce((acc, curr) => (acc + curr.amount), 0))}
             </Typography>
           </Stack>
+          {/* s */}
         </CardContent>
       </Card>
       <Divider sx={{ paddingBlockEnd: 2 }} />

src/components/ExpenseSearch/ExpenseTable.tsx

@@ -36,6 +36,8 @@ import { GridRenderCellParams } from "@mui/x-data-grid";
 
 type ExpenseListError = {
     [field in keyof ProjectExpensesResultFormatted]?: string;
+}& {
+  message?: string;
 };
 
 type ExpenseListRow = Partial<
@@ -82,9 +84,18 @@ const ExpenseTable: React.FC<Props> = ({ projects }) => {
     ): ExpenseListError | undefined => {
         // Test for errors
         const error: ExpenseListError = {};
-        if (!entry.issueDate) error.issueDate = "Please input issued date";
-        if (!entry.amount) error.amount = "Please input amount";
-        if (!entry.projectCode) error.projectCode = "Please input project code";
+        // if (!entry.issueDate) {
+        //   error.issueDate = "Please input issued date";
+        //   error.message = "Please input issued date";
+        // }
+        if (!entry.amount) {
+          error.amount = "Please input amount";
+          error.message = "Please input amount"
+        }
+        if (!entry.projectCode) {
+          error.projectCode = "Please input project code";
+          error.message = "Please input project code";
+        }
 
         console.log(error)
         return Object.keys(error).length > 0 ? error : undefined;
@@ -183,6 +194,8 @@ const ExpenseTable: React.FC<Props> = ({ projects }) => {
         [validateRow],
       );
 
+    const hasRowErrors = selectedRow.some(row => row._error !== undefined)  
+
     /**
      * Add callback to check error
      */
@@ -258,13 +271,13 @@ const editCombinedColumns = useMemo<GridColDef[]>(
           renderCell: renderAutocomplete,
           renderEditCell: renderAutocompleteInput
         },
-        { 
-          field: "issueDate", 
-          headerName: t("Issue Date"), 
-          editable: true, 
-          flex: 0.4,  
-          type: 'date', 
-        },
+        // { 
+        //   field: "issueDate", 
+        //   headerName: t("Issue Date"), 
+        //   editable: true, 
+        //   flex: 0.4,  
+        //   type: 'date', 
+        // },
         { 
           field: "amount", 
           headerName: t("Amount (HKD)"), 
@@ -272,13 +285,13 @@ const editCombinedColumns = useMemo<GridColDef[]>(
           flex: 0.5,
           type: 'number'
         },
-        { 
-          field: "receiptDate", 
-          headerName: t("Settle Date"), 
-          editable: true,
-          flex: 0.4,
-          type: 'date', 
-        },
+        // { 
+        //   field: "receiptDate", 
+        //   headerName: t("Settle Date"), 
+        //   editable: true,
+        //   flex: 0.4,
+        //   type: 'date', 
+        // },
         { 
           field: "remarks", 
           headerName: t("Remarks"), 
@@ -300,6 +313,12 @@ const footer = (
     >
       {t("Create Expense")}
     </Button>
+    {
+      hasRowErrors &&
+      <Typography color="warning.main" variant="body2">
+          {t("There are errors!")} {selectedRow.find(row => row._error !== null)?._error?.message}
+      </Typography>
+    }
   </Box>
 );