initial commit

2025-08-05 12:35:40 +07:00
commit fffa2ead5c
1069 changed files with 118056 additions and 0 deletions
@@ -0,0 +1,142 @@
+// 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