// ** React Imports import { useState, forwardRef, SyntheticEvent, ForwardedRef } from 'react' // ** MUI Imports import Card from '@mui/material/Card' import Table from '@mui/material/Table' import Button from '@mui/material/Button' import Divider from '@mui/material/Divider' import Tooltip from '@mui/material/Tooltip' import TableRow from '@mui/material/TableRow' import Collapse from '@mui/material/Collapse' import TableBody from '@mui/material/TableBody' import TextField from '@mui/material/TextField' import IconButton from '@mui/material/IconButton' import Typography from '@mui/material/Typography' import InputLabel from '@mui/material/InputLabel' import Box, { BoxProps } from '@mui/material/Box' import Grid, { GridProps } from '@mui/material/Grid' import InputAdornment from '@mui/material/InputAdornment' import TableContainer from '@mui/material/TableContainer' import { styled, alpha, useTheme } from '@mui/material/styles' import Select, { SelectChangeEvent } from '@mui/material/Select' import MenuItem, { MenuItemProps } from '@mui/material/MenuItem' import TableCell, { TableCellBaseProps } from '@mui/material/TableCell' import CardContent, { CardContentProps } from '@mui/material/CardContent' // ** Icon Imports import Icon from 'src/@core/components/icon' // ** Third Party Imports import DatePicker from 'react-datepicker' // ** Configs import themeConfig from 'src/configs/themeConfig' // ** Types import { DateType } from 'src/types/forms/reactDatepickerTypes' import { InvoiceClientType } from 'src/types/apps/invoiceTypes' // ** Custom Component Imports import Repeater from 'src/@core/components/repeater' interface PickerProps { label?: string } interface Props { toggleAddCustomerDrawer: () => void invoiceNumber: number clients: InvoiceClientType[] | undefined selectedClient: InvoiceClientType | null setSelectedClient: (val: InvoiceClientType | null) => void } const CustomInput = forwardRef(({ ...props }: PickerProps, ref: ForwardedRef) => { return ( ) }) CustomInput.displayName = 'CustomInput'; const MUITableCell = styled(TableCell)(({ theme }) => ({ borderBottom: 0, padding: `${theme.spacing(1, 0)} !important` })) const CalcWrapper = styled(Box)(({ theme }) => ({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', '&:not(:last-of-type)': { marginBottom: theme.spacing(2) } })) const RepeatingContent = styled(Grid)(({ theme }) => ({ paddingRight: 0, display: 'flex', position: 'relative', borderRadius: theme.shape.borderRadius, border: `1px solid ${theme.palette.divider}`, '& .col-title': { top: '-1.5rem', position: 'absolute' }, '& .MuiInputBase-input': { color: theme.palette.text.secondary }, [theme.breakpoints.down('lg')]: { '& .col-title': { top: '0', position: 'relative' } } })) const RepeaterWrapper = styled(CardContent)(({ theme }) => ({ paddingTop: theme.spacing(12), paddingBottom: theme.spacing(5.5), '& .repeater-wrapper + .repeater-wrapper': { marginTop: theme.spacing(12) } })) const InvoiceAction = styled(Box)(({ theme }) => ({ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start', padding: theme.spacing(2, 1), borderLeft: `1px solid ${theme.palette.divider}` })) const CustomSelectItem = styled(MenuItem)(({ theme }) => ({ color: theme.palette.success.main, backgroundColor: 'transparent !important', '&:hover': { backgroundColor: `${alpha(theme.palette.success.main, 0.1)} !important` } })) const now = new Date() const tomorrowDate = now.setDate(now.getDate() + 7) const AddCard = (props: Props) => { // ** Props const { clients, invoiceNumber, selectedClient, setSelectedClient, toggleAddCustomerDrawer } = props // ** States const [count, setCount] = useState(1) const [selected, setSelected] = useState('') const [issueDate, setIssueDate] = useState(new Date()) const [dueDate, setDueDate] = useState(new Date(tomorrowDate)) // ** Hook const theme = useTheme() // ** Deletes form const deleteForm = (e: SyntheticEvent) => { e.preventDefault() // @ts-ignore e.target.closest('.repeater-wrapper').remove() } // ** Handle Invoice To Change const handleInvoiceChange = (event: SelectChangeEvent) => { setSelected(event.target.value) if (clients !== undefined) { setSelectedClient(clients.filter(i => i.name === event.target.value)[0]) } } const handleAddNewCustomer = () => { toggleAddCustomerDrawer() } return ( {themeConfig.templateName}
Office 149, 450 South Brand Brooklyn San Diego County, CA 91905, USA +1 (123) 456 7891, +44 (876) 543 2198
Invoice # }} /> Date Issued: } onChange={(date: Date) => setIssueDate(date)} /> Date Due: } onChange={(date: Date) => setDueDate(date)} />
`${theme.spacing(1)} !important` }} /> Invoice To: {selectedClient !== null && selectedClient !== undefined ? (
{selectedClient.company} {selectedClient.address} {selectedClient.contact} {selectedClient.companyEmail}
) : null}
Bill To: Total Due: $12,110.55 Bank name: American Bank Country: United States IBAN: ETD95476213874685 SWIFT code: BR91905
`${theme.spacing(1.25)} !important` }} /> {(i: number) => { const Tag = i === 0 ? Box : Collapse return ( Item Cost Discount: {' '} 0% 0% 0% Hours Price $24.00 ) }} Salesperson: Subtotal: $1800 Discount: $28 Tax: 21% `${theme.spacing(6)} !important`, mb: theme => `${theme.spacing(1.5)} !important` }} /> Total: $1690 `${theme.spacing(1)} !important` }} /> Note:
) } export default AddCard