432 lines
14 KiB
TypeScript
432 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
Typography,
|
|
Button,
|
|
Box,
|
|
Accordion,
|
|
AccordionSummary,
|
|
AccordionDetails,
|
|
Tooltip,
|
|
IconButton,
|
|
CardHeader
|
|
} from '@mui/material'
|
|
import Grid from '@mui/material/Grid2'
|
|
import CustomTextField from '@/@core/components/mui/TextField'
|
|
import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
|
|
import ImageUpload from '@/components/ImageUpload'
|
|
|
|
interface PaymentFormData {
|
|
totalDibayar: string
|
|
tglTransaksi: string
|
|
referensi: string
|
|
nomor: string
|
|
dibayarDari: string
|
|
}
|
|
|
|
interface PemotonganItem {
|
|
id: string
|
|
dipotong: string
|
|
persentase: string
|
|
nominal: string
|
|
tipe: 'persen' | 'rupiah'
|
|
}
|
|
|
|
const ExpenseDetailSendPayment: React.FC = () => {
|
|
const [formData, setFormData] = useState<PaymentFormData>({
|
|
totalDibayar: '849.000',
|
|
tglTransaksi: '10/09/2025',
|
|
referensi: '',
|
|
nomor: 'PP/00025',
|
|
dibayarDari: '1-10001 Kas'
|
|
})
|
|
|
|
const [expanded, setExpanded] = useState<boolean>(false)
|
|
const [pemotonganItems, setPemotonganItems] = useState<PemotonganItem[]>([])
|
|
|
|
const dibayarDariOptions = [
|
|
{ label: '1-10001 Kas', value: '1-10001 Kas' },
|
|
{ label: '1-10002 Bank BCA', value: '1-10002 Bank BCA' },
|
|
{ label: '1-10003 Bank Mandiri', value: '1-10003 Bank Mandiri' },
|
|
{ label: '1-10004 Petty Cash', value: '1-10004 Petty Cash' }
|
|
]
|
|
|
|
const pemotonganOptions = [
|
|
{ label: 'PPN 11%', value: 'ppn' },
|
|
{ label: 'PPh 21', value: 'pph21' },
|
|
{ label: 'PPh 23', value: 'pph23' },
|
|
{ label: 'Biaya Admin', value: 'admin' }
|
|
]
|
|
|
|
const handleChange =
|
|
(field: keyof PaymentFormData) => (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | any) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
[field]: event.target.value
|
|
}))
|
|
}
|
|
|
|
const handleDibayarDariChange = (value: { label: string; value: string } | null) => {
|
|
setFormData(prev => ({
|
|
...prev,
|
|
dibayarDari: value?.value || ''
|
|
}))
|
|
}
|
|
|
|
const addPemotongan = () => {
|
|
const newItem: PemotonganItem = {
|
|
id: Date.now().toString(),
|
|
dipotong: '',
|
|
persentase: '0',
|
|
nominal: '',
|
|
tipe: 'persen'
|
|
}
|
|
setPemotonganItems(prev => [...prev, newItem])
|
|
}
|
|
|
|
const removePemotongan = (id: string) => {
|
|
setPemotonganItems(prev => prev.filter(item => item.id !== id))
|
|
}
|
|
|
|
const updatePemotongan = (id: string, field: keyof PemotonganItem, value: string) => {
|
|
setPemotonganItems(prev => prev.map(item => (item.id === id ? { ...item, [field]: value } : item)))
|
|
}
|
|
|
|
const handleAccordionChange = () => {
|
|
setExpanded(!expanded)
|
|
}
|
|
|
|
const calculatePemotongan = (item: PemotonganItem): number => {
|
|
const totalDibayar = parseInt(formData.totalDibayar.replace(/\D/g, '')) || 0
|
|
const nilai = parseFloat(item.persentase) || 0
|
|
|
|
if (item.tipe === 'persen') {
|
|
return (totalDibayar * nilai) / 100
|
|
} else {
|
|
return nilai
|
|
}
|
|
}
|
|
|
|
const formatCurrency = (amount: string | number): string => {
|
|
const numAmount = typeof amount === 'string' ? parseInt(amount.replace(/\D/g, '')) : amount
|
|
return new Intl.NumberFormat('id-ID').format(numAmount)
|
|
}
|
|
|
|
const handleUpload = async (file: File): Promise<string> => {
|
|
// Simulate upload
|
|
return new Promise(resolve => {
|
|
setTimeout(() => {
|
|
resolve(URL.createObjectURL(file))
|
|
}, 1000)
|
|
})
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader
|
|
title={
|
|
<Box display='flex' justifyContent='space-between' alignItems='center'>
|
|
<Typography variant='h5' color='error' sx={{ fontWeight: 'bold' }}>
|
|
Kirim Pembayaran
|
|
</Typography>
|
|
</Box>
|
|
}
|
|
/>
|
|
<CardContent>
|
|
<Grid container spacing={3}>
|
|
{/* Left Column */}
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
{/* Total Dibayar */}
|
|
<Box sx={{ mb: 3 }}>
|
|
<CustomTextField
|
|
fullWidth
|
|
label={
|
|
<span>
|
|
<span style={{ color: 'red' }}>*</span> Total Dibayar
|
|
</span>
|
|
}
|
|
value={formData.totalDibayar}
|
|
onChange={handleChange('totalDibayar')}
|
|
sx={{
|
|
'& .MuiInputBase-root': {
|
|
textAlign: 'right'
|
|
}
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Tgl. Transaksi */}
|
|
<Box sx={{ mb: 3 }}>
|
|
<CustomTextField
|
|
fullWidth
|
|
label={
|
|
<span>
|
|
<span style={{ color: 'red' }}>*</span> Tgl. Transaksi
|
|
</span>
|
|
}
|
|
type='date'
|
|
value={formData.tglTransaksi.split('/').reverse().join('-')}
|
|
onChange={handleChange('tglTransaksi')}
|
|
slotProps={{
|
|
input: {
|
|
endAdornment: <i className='tabler-calendar' style={{ color: '#666' }} />
|
|
}
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Referensi */}
|
|
<Box sx={{ mb: 3 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
|
|
<Typography variant='body2' sx={{ color: 'text.secondary' }}>
|
|
Referensi
|
|
</Typography>
|
|
<Tooltip title='Informasi referensi pembayaran'>
|
|
<IconButton size='small' sx={{ ml: 0.5 }}>
|
|
<i className='tabler-info-circle' style={{ fontSize: '16px', color: '#666' }} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
<CustomTextField
|
|
fullWidth
|
|
placeholder='Referensi'
|
|
value={formData.referensi}
|
|
onChange={handleChange('referensi')}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Attachment Accordion */}
|
|
<Accordion
|
|
expanded={expanded}
|
|
onChange={handleAccordionChange}
|
|
sx={{
|
|
boxShadow: 'none',
|
|
border: '1px solid #e0e0e0',
|
|
borderRadius: '8px',
|
|
'&:before': { display: 'none' }
|
|
}}
|
|
>
|
|
<AccordionSummary
|
|
expandIcon={
|
|
<i
|
|
className='tabler-chevron-right'
|
|
style={{
|
|
transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)',
|
|
transition: 'transform 0.2s'
|
|
}}
|
|
/>
|
|
}
|
|
sx={{
|
|
backgroundColor: '#f8f9fa',
|
|
borderRadius: '8px',
|
|
minHeight: '48px',
|
|
'& .MuiAccordionSummary-content': {
|
|
margin: '12px 0'
|
|
}
|
|
}}
|
|
>
|
|
<Typography variant='body2' sx={{ fontWeight: 'medium' }}>
|
|
Attachment
|
|
</Typography>
|
|
</AccordionSummary>
|
|
<AccordionDetails sx={{ p: 2 }}>
|
|
<ImageUpload
|
|
onUpload={handleUpload}
|
|
maxFileSize={1 * 1024 * 1024} // 1MB
|
|
showUrlOption={false}
|
|
dragDropText='Drop your image here'
|
|
browseButtonText='Choose Image'
|
|
/>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
</Grid>
|
|
|
|
{/* Right Column */}
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
{/* Nomor */}
|
|
<Box sx={{ mb: 3 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
|
|
<Typography variant='body2' sx={{ color: 'text.secondary' }}>
|
|
Nomor
|
|
</Typography>
|
|
<Tooltip title='Nomor pembayaran otomatis'>
|
|
<IconButton size='small' sx={{ ml: 0.5 }}>
|
|
<i className='tabler-info-circle' style={{ fontSize: '16px', color: '#666' }} />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
<CustomTextField fullWidth value={formData.nomor} onChange={handleChange('nomor')} disabled />
|
|
</Box>
|
|
|
|
{/* Dibayar Dari */}
|
|
<Box sx={{ mb: 3 }}>
|
|
<Typography variant='body2' sx={{ color: 'text.secondary', mb: 1 }}>
|
|
<span style={{ color: 'red' }}>*</span> Dibayar Dari
|
|
</Typography>
|
|
<CustomAutocomplete
|
|
fullWidth
|
|
options={dibayarDariOptions}
|
|
getOptionLabel={(option: { label: string; value: string }) => option.label || ''}
|
|
value={dibayarDariOptions.find(option => option.value === formData.dibayarDari) || null}
|
|
onChange={(_, value: { label: string; value: string } | null) => handleDibayarDariChange(value)}
|
|
renderInput={(params: any) => <CustomTextField {...params} placeholder='Pilih akun pembayaran' />}
|
|
noOptionsText='Tidak ada pilihan'
|
|
/>
|
|
</Box>
|
|
|
|
{/* Empty space to match Referensi height */}
|
|
<Box sx={{ mb: 3, height: '74px' }}>{/* Empty space */}</Box>
|
|
|
|
{/* Pemotongan Button - aligned with Attachment */}
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
justifyContent: 'flex-end',
|
|
alignItems: 'flex-start',
|
|
minHeight: '48px'
|
|
}}
|
|
>
|
|
<Button
|
|
startIcon={<i className='tabler-plus' />}
|
|
variant='text'
|
|
color='primary'
|
|
sx={{ textTransform: 'none' }}
|
|
onClick={addPemotongan}
|
|
>
|
|
Pemotongan
|
|
</Button>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
|
|
{/* Pemotongan Items */}
|
|
{pemotonganItems.length > 0 && (
|
|
<Box sx={{ mt: 3 }}>
|
|
{pemotonganItems.map((item, index) => (
|
|
<Box
|
|
key={item.id}
|
|
sx={{
|
|
mb: 2,
|
|
p: 2,
|
|
border: '1px solid #e0e0e0',
|
|
borderRadius: 1,
|
|
position: 'relative'
|
|
}}
|
|
>
|
|
<Grid container spacing={2} alignItems='center'>
|
|
<Grid size={{ xs: 12, md: 1 }}>
|
|
<IconButton
|
|
color='error'
|
|
size='small'
|
|
onClick={() => removePemotongan(item.id)}
|
|
sx={{
|
|
backgroundColor: '#fff',
|
|
border: '1px solid #f44336',
|
|
'&:hover': { backgroundColor: '#ffebee' }
|
|
}}
|
|
>
|
|
<i className='tabler-minus' style={{ fontSize: '16px' }} />
|
|
</IconButton>
|
|
</Grid>
|
|
|
|
<Grid size={{ xs: 12, md: 4 }}>
|
|
<CustomAutocomplete
|
|
fullWidth
|
|
options={pemotonganOptions}
|
|
getOptionLabel={(option: { label: string; value: string }) => option.label || ''}
|
|
value={pemotonganOptions.find(option => option.value === item.dipotong) || null}
|
|
onChange={(_, value: { label: string; value: string } | null) =>
|
|
updatePemotongan(item.id, 'dipotong', value?.value || '')
|
|
}
|
|
renderInput={(params: any) => <CustomTextField {...params} placeholder='Pilih dipotong...' />}
|
|
noOptionsText='Tidak ada pilihan'
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid size={{ xs: 12, md: 2 }}>
|
|
<CustomTextField
|
|
fullWidth
|
|
value={item.persentase}
|
|
onChange={e => updatePemotongan(item.id, 'persentase', e.target.value)}
|
|
placeholder='0'
|
|
sx={{
|
|
'& .MuiInputBase-root': {
|
|
textAlign: 'center'
|
|
}
|
|
}}
|
|
/>
|
|
</Grid>
|
|
|
|
<Grid size={{ xs: 12, md: 1 }}>
|
|
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
|
<Button
|
|
variant={item.tipe === 'persen' ? 'contained' : 'outlined'}
|
|
size='small'
|
|
onClick={() => updatePemotongan(item.id, 'tipe', 'persen')}
|
|
sx={{ minWidth: '40px', px: 1 }}
|
|
>
|
|
%
|
|
</Button>
|
|
<Button
|
|
variant={item.tipe === 'rupiah' ? 'contained' : 'outlined'}
|
|
size='small'
|
|
onClick={() => updatePemotongan(item.id, 'tipe', 'rupiah')}
|
|
sx={{ minWidth: '40px', px: 1 }}
|
|
>
|
|
Rp
|
|
</Button>
|
|
</Box>
|
|
</Grid>
|
|
|
|
<Grid size={{ xs: 12, md: 4 }}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
|
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
|
{formatCurrency(calculatePemotongan(item))}
|
|
</Typography>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
)}
|
|
|
|
{/* Bottom Section */}
|
|
<Box sx={{ mt: 4, pt: 3, borderTop: '1px solid #e0e0e0' }}>
|
|
<Grid container spacing={2} alignItems='center'>
|
|
<Grid size={{ xs: 12, md: 6 }}>{/* Empty space */}</Grid>
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
|
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
|
Total
|
|
</Typography>
|
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
|
{formatCurrency(formData.totalDibayar)}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Button
|
|
variant='contained'
|
|
startIcon={<i className='tabler-plus' />}
|
|
fullWidth
|
|
sx={{
|
|
py: 1.5,
|
|
textTransform: 'none',
|
|
fontWeight: 'medium'
|
|
}}
|
|
>
|
|
Tambah Pembayaran
|
|
</Button>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
export default ExpenseDetailSendPayment
|