tsms/src/components/InvoiceSearch/CreateInvoiceModal.tsx

import React, { useCallback, useState } from 'react';
import { 
  Modal,
  Box, 
  Typography, 
  Button, 
  SxProps,
  CardContent,
  CardActions,
  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 InvoiceTable from './InvoiceTable';

interface Props {
  isOpen: boolean,
  onClose: () => void;
}

const modalSx: SxProps= {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: { xs: "calc(100% - 2rem)", sm: "90%" },
  maxHeight: "90%",
  maxWidth: 1400,
  bgcolor: 'background.paper',
};

const CreateInvoiceModal: React.FC<Props> = ({isOpen, onClose}) => {
  const { t } = useTranslation()
  const formProps = useForm<any>();

  const onSubmit = useCallback<SubmitHandler<any>>(
    (data) => {
      console.log(data)
    }
  , [])

  return (
    <FormProvider {...formProps}>
      <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={{
                  marginInline: -4,
                  marginBlock: 4,
                }}
              >
                <InvoiceTable/>
              </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>
          </CardContent>
        </Card>
      </Modal>
      </FormProvider>
  );
};

export default CreateInvoiceModal;