add remarks to expense

src/app/api/projectExpenses/actions.ts

@@ -22,4 +22,5 @@ export type PostExpenseData = {
     amount: number
     issueDate: string
     receiptDate?: string
+    remarks?: string
   } 

src/components/ExpenseSearch/CreateExpenseModal.tsx

@@ -45,20 +45,21 @@ const CreateExpenseModal: React.FC<Props> = ({isOpen, onClose, projects}) => {
   const onSubmit = useCallback<SubmitHandler<postData>>(
     (data) => {
       const _data = data.data
-      console.log(_data[0])
-      console.log(_data[0].issueDate)
-      console.log(_data[1].issueDate)
-      const postData: PostExpenseData[] = _data.map(item => {
-        console.log(item.issueDate)
-        return ({
-        expenseNo: item.expenseNo,
-        issueDate: dayjs(item.issueDate).format(INPUT_DATE_FORMAT),
-        amount: item.amount,
-        projectId: projects.find(p => p.code === item.projectCode)!.id,
-        projectCode: item.projectCode,
-      })}
-    )
-      console.log(postData)
+      try {
+        const postData: PostExpenseData[] = _data.map(item => {
+          return ({
+          expenseNo: item.expenseNo,
+          issueDate: dayjs(item.issueDate).format(INPUT_DATE_FORMAT),
+          amount: item.amount,
+          projectId: projects.find(p => p.code === item.projectCode)!.id,
+          projectCode: item.projectCode,
+          remarks: (item.remarks && item.remarks.length > 0) ? (item.remarks) : undefined,
+        })}
+      )
+        console.log(postData)
+      } catch (error) {
+        console.log(error)
+      }
     }
   , [])
 

src/components/ExpenseSearch/ExpenseTable.tsx

@@ -244,33 +244,47 @@ const ExpenseTable: React.FC<Props> = ({ projects }) => {
 
 const editCombinedColumns = useMemo<GridColDef[]>(
     () => [
-        { field: "expenseNo", headerName: t("Expense No"), editable: true, flex: 0.5 },
-        { field: "projectCode", 
+        { 
+          field: "expenseNo", 
+          headerName: t("Expense No"), 
+          editable: true, 
+          flex: 0.5 
+        },
+        { 
+          field: "projectCode", 
           headerName: t("Project Code"), 
           editable: true, 
           flex: 0.3,
           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)"), 
+          editable: true, 
+          flex: 0.5,
+          type: 'number'
         },
-        { field: "amount", 
-        headerName: t("Amount (HKD)"), 
-        editable: true, 
-        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"), 
+          editable: true,
+          flex: 1,
+        },
     ],
     [t]
     )