143 lines
4.3 KiB
TypeScript
143 lines
4.3 KiB
TypeScript
// React Imports
|
|
import { useState } from 'react'
|
|
import type { FormEvent } from 'react'
|
|
|
|
// MUI Import
|
|
import Drawer from '@mui/material/Drawer'
|
|
import IconButton from '@mui/material/IconButton'
|
|
import Typography from '@mui/material/Typography'
|
|
import InputAdornment from '@mui/material/InputAdornment'
|
|
import MenuItem from '@mui/material/MenuItem'
|
|
import Button from '@mui/material/Button'
|
|
import Divider from '@mui/material/Divider'
|
|
|
|
// Component Imports
|
|
import CustomTextField from '@core/components/mui/TextField'
|
|
|
|
// Styled Component Imports
|
|
import AppReactDatepicker from '@/libs/styles/AppReactDatepicker'
|
|
|
|
type Props = {
|
|
open: boolean
|
|
handleClose: () => void
|
|
}
|
|
|
|
type FormDataType = {
|
|
paymentDate: Date
|
|
paymentMethod: string
|
|
paymentAmount: number
|
|
paymentNote: string
|
|
}
|
|
|
|
// Vars
|
|
const initialData: FormDataType = {
|
|
paymentDate: new Date(),
|
|
paymentMethod: 'select-method',
|
|
paymentAmount: 500,
|
|
paymentNote: ''
|
|
}
|
|
|
|
const AddPaymentDrawer = ({ open, handleClose }: Props) => {
|
|
// States
|
|
const [formData, setFormData] = useState<FormDataType>(initialData)
|
|
|
|
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault()
|
|
handleClose()
|
|
setFormData(initialData)
|
|
}
|
|
|
|
const handleReset = () => {
|
|
handleClose()
|
|
setFormData(initialData)
|
|
}
|
|
|
|
return (
|
|
<Drawer
|
|
open={open}
|
|
anchor='right'
|
|
variant='temporary'
|
|
onClose={handleReset}
|
|
ModalProps={{ keepMounted: true }}
|
|
sx={{ '& .MuiDrawer-paper': { width: { xs: 300, sm: 400 } } }}
|
|
>
|
|
<div className='flex items-center justify-between plb-5 pli-6'>
|
|
<Typography variant='h5'>Add New User</Typography>
|
|
<IconButton size='small' onClick={handleReset}>
|
|
<i className='tabler-x text-2xl text-textPrimary' />
|
|
</IconButton>
|
|
</div>
|
|
<Divider />
|
|
<div className='p-6'>
|
|
<form onSubmit={handleSubmit} className='flex flex-col gap-6'>
|
|
<CustomTextField
|
|
fullWidth
|
|
id='invoice-balance'
|
|
label='Invoice Balance'
|
|
slotProps={{
|
|
input: {
|
|
disabled: true
|
|
}
|
|
}}
|
|
defaultValue='5000.00'
|
|
/>
|
|
<CustomTextField
|
|
fullWidth
|
|
id='payment-amount'
|
|
label='Payment Amount'
|
|
type='number'
|
|
slotProps={{
|
|
input: {
|
|
startAdornment: <InputAdornment position='start'>$</InputAdornment>
|
|
}
|
|
}}
|
|
value={formData.paymentAmount}
|
|
onChange={e => setFormData({ ...formData, paymentAmount: +e.target.value })}
|
|
/>
|
|
<AppReactDatepicker
|
|
selected={formData.paymentDate}
|
|
id='payment-date'
|
|
onChange={(date: Date | null) => date !== null && setFormData({ ...formData, paymentDate: date })}
|
|
customInput={<CustomTextField fullWidth label='Payment Date' />}
|
|
/>
|
|
<CustomTextField
|
|
select
|
|
label='Payment Method'
|
|
id='payment-method-select'
|
|
value={formData.paymentMethod}
|
|
onChange={e => setFormData({ ...formData, paymentMethod: e.target.value as string })}
|
|
>
|
|
<MenuItem value='select-method' disabled>
|
|
Select Payment Method
|
|
</MenuItem>
|
|
<MenuItem value='cash'>Cash</MenuItem>
|
|
<MenuItem value='bank-transfer'>Bank Transfer</MenuItem>
|
|
<MenuItem value='credit'>Credit</MenuItem>
|
|
<MenuItem value='debit'>Debit</MenuItem>
|
|
<MenuItem value='paypal'>Paypal</MenuItem>
|
|
</CustomTextField>
|
|
<CustomTextField
|
|
rows={6}
|
|
multiline
|
|
fullWidth
|
|
label='Internal Payment Note'
|
|
placeholder='Internal Payment Note'
|
|
value={formData.paymentNote}
|
|
onChange={e => setFormData({ ...formData, paymentNote: e.target.value })}
|
|
/>
|
|
<div className='flex items-center gap-4'>
|
|
<Button variant='contained' type='submit'>
|
|
Send
|
|
</Button>
|
|
<Button variant='tonal' color='error' type='reset' onClick={handleReset}>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</Drawer>
|
|
)
|
|
}
|
|
|
|
export default AddPaymentDrawer
|