update

src/components/ExpenseSearch/CreateExpenseModal.tsx

@@ -1,30 +1,33 @@
-import React, { useCallback, useState } from 'react';
-import { 
+import React, { useCallback, useState } from "react";
+import {
   Modal,
-  Box, 
-  Typography, 
-  Button, 
+  Box,
+  Typography,
+  Button,
   SxProps,
   CardContent,
   CardActions,
-  Card
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
+  Card,
+} from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { FormProvider, SubmitHandler, useForm } from "react-hook-form";
 import { Check, Close } from "@mui/icons-material";
-import { ProjectResult } from '@/app/api/projects';
-import { CreateNewExpense, PostExpenseData } from '@/app/api/projectExpenses/actions';
-import ExpenseTable from './ExpenseTable';
-import dayjs from 'dayjs';
-import { INPUT_DATE_FORMAT } from '@/app/utils/formatUtil';
+import { ProjectResult } from "@/app/api/projects";
+import {
+  CreateNewExpense,
+  PostExpenseData,
+} from "@/app/api/projectExpenses/actions";
+import ExpenseTable from "./ExpenseTable";
+import dayjs from "dayjs";
+import { INPUT_DATE_FORMAT } from "@/app/utils/formatUtil";
 
 interface Props {
-  isOpen: boolean,
-  onClose: () => void
-  projects: ProjectResult[]
+  isOpen: boolean;
+  onClose: () => void;
+  projects: ProjectResult[];
 }
 
-const modalSx: SxProps= {
+const modalSx: SxProps = {
   position: "absolute",
   top: "50%",
   left: "50%",
@@ -32,77 +35,73 @@ const modalSx: SxProps= {
   width: { xs: "calc(100% - 2rem)", sm: "90%" },
   maxHeight: "90%",
   maxWidth: 1400,
-  bgcolor: 'background.paper',
+  bgcolor: "background.paper",
 };
 
 type postData = {
-  data: PostExpenseData[]
-}
-const CreateExpenseModal: React.FC<Props> = ({isOpen, onClose, projects}) => {
-  const { t } = useTranslation()
+  data: PostExpenseData[];
+};
+const CreateExpenseModal: React.FC<Props> = ({ isOpen, onClose, projects }) => {
+  const { t } = useTranslation();
   const formProps = useForm<postData>();
 
-  const onSubmit = useCallback<SubmitHandler<postData>>(
-    (data) => {
-      const _data = data.data
-      try {
-        const postData: PostExpenseData[] = _data.map(item => {
-          return ({
+  const onSubmit = useCallback<SubmitHandler<postData>>((data) => {
+    const _data = data.data;
+    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,
+          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)
-      }
+          remarks:
+            item.remarks && item.remarks.length > 0 ? item.remarks : undefined,
+        };
+      });
+      console.log(postData);
+    } catch (error) {
+      console.log(error);
     }
-  , [])
+  }, []);
 
   return (
     <FormProvider {...formProps}>
-      <Modal
-        open={isOpen}
-        onClose={onClose}
-      >
+      <Modal open={isOpen} onClose={onClose}>
         <Card sx={modalSx}>
           <CardContent
             component="form"
             onSubmit={formProps.handleSubmit(onSubmit)}
           >
             <Typography variant="overline" display="block" marginBlockEnd={1}>
-                {t("Invoice Creation")}
-              </Typography>
-              <Box
-                sx={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  marginBlock: 2,
-                }}
+              {t("Invoice Creation")}
+            </Typography>
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "center",
+                marginBlock: 2,
+              }}
+            >
+              <ExpenseTable projects={projects} />
+            </Box>
+            <CardActions sx={{ justifyContent: "flex-end" }}>
+              <Button
+                variant="outlined"
+                startIcon={<Close />}
+                onClick={onClose}
               >
-                <ExpenseTable projects={projects}/>
-              </Box>
-              <CardActions sx={{ justifyContent: "flex-end" }}>
-                <Button
-                  variant="outlined"
-                  startIcon={<Close />}
-                  onClick={onClose}
-                >
-                  {t("Cancel")}
-                </Button>
-                <Button variant="contained" startIcon={<Check />} type="submit">
-                  {t("Save")}
-                </Button>
-              </CardActions>
+                {t("Cancel")}
+              </Button>
+              <Button variant="contained" startIcon={<Check />} type="submit">
+                {t("Save")}
+              </Button>
+            </CardActions>
           </CardContent>
         </Card>
       </Modal>
-      </FormProvider>
+    </FormProvider>
   );
 };
 
-export default CreateExpenseModal;
+export default CreateExpenseModal;