Reconciliation and Cash Bank Detail Transaction
This commit is contained in:
efrilm
@@ -0,0 +1,342 @@
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
Drawer,
|
||||
Typography,
|
||||
Box,
|
||||
IconButton,
|
||||
Button,
|
||||
TextField,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Checkbox,
|
||||
Paper,
|
||||
MenuItem,
|
||||
Select,
|
||||
FormControl
|
||||
} from '@mui/material'
|
||||
import Grid from '@mui/material/Grid2'
|
||||
|
||||
interface Props {
|
||||
open: boolean
|
||||
handleClose: () => void
|
||||
}
|
||||
|
||||
const CashBankDetailTransactionReconciliationDrawer: React.FC<Props> = ({ open, handleClose }) => {
|
||||
const [tanggalDari, setTanggalDari] = useState('10/09/2025')
|
||||
const [tanggalSampai, setTanggalSampai] = useState('10/09/2025')
|
||||
const [totalDari, setTotalDari] = useState('220.890')
|
||||
const [totalSampai, setTotalSampai] = useState('220.890')
|
||||
const [cari, setCari] = useState('')
|
||||
|
||||
const transactionData = {
|
||||
detil: '10/09/2025',
|
||||
kirim: 'Terima pembayaran tagihan: POS Customer INV/01/59A/4CY/00003',
|
||||
terima: '220.890'
|
||||
}
|
||||
|
||||
return (
|
||||
<Drawer
|
||||
open={open}
|
||||
anchor='right'
|
||||
variant='temporary'
|
||||
onClose={handleClose}
|
||||
ModalProps={{ keepMounted: true }}
|
||||
sx={{
|
||||
'& .MuiDrawer-paper': {
|
||||
width: { xs: '90%', sm: '80%', md: '80%', lg: '80%' },
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
height: '100%'
|
||||
}
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 10,
|
||||
backgroundColor: 'background.paper',
|
||||
borderBottom: 1,
|
||||
borderColor: 'divider',
|
||||
p: 3
|
||||
}}
|
||||
>
|
||||
<div className='flex items-center justify-between'>
|
||||
<Typography variant='h5' sx={{ fontWeight: 'bold' }}>
|
||||
Rekonsiliasi
|
||||
</Typography>
|
||||
<IconButton size='small' onClick={handleClose}>
|
||||
<i className='tabler-x text-2xl' />
|
||||
</IconButton>
|
||||
</div>
|
||||
</Box>
|
||||
|
||||
{/* Content */}
|
||||
<Box sx={{ flex: 1, overflowY: 'auto', p: 3 }}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid size={6}>
|
||||
{/* Mutasi Bank Section */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant='h6' sx={{ fontWeight: 'bold', mb: 1 }}>
|
||||
Mutasi Bank
|
||||
</Typography>
|
||||
<Typography variant='body2' color='text.secondary' sx={{ mb: 3 }}>
|
||||
Cari mutasi bank yang sesuai dengan transaksi di Kledo
|
||||
</Typography>
|
||||
|
||||
{/* Filter Section */}
|
||||
<Grid container spacing={3} sx={{ mb: 3 }}>
|
||||
{/* Tanggal */}
|
||||
<Grid size={12}>
|
||||
<Typography variant='body2' sx={{ mb: 1, fontWeight: 'medium' }}>
|
||||
Tanggal
|
||||
</Typography>
|
||||
<div className='flex items-center gap-3'>
|
||||
<TextField
|
||||
size='small'
|
||||
value={tanggalDari}
|
||||
onChange={e => setTanggalDari(e.target.value)}
|
||||
sx={{ width: '150px' }}
|
||||
/>
|
||||
<Typography variant='body2'>s/d</Typography>
|
||||
<TextField
|
||||
size='small'
|
||||
value={tanggalSampai}
|
||||
onChange={e => setTanggalSampai(e.target.value)}
|
||||
sx={{ width: '150px' }}
|
||||
/>
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
{/* Total */}
|
||||
<Grid size={12}>
|
||||
<Typography variant='body2' sx={{ mb: 1, fontWeight: 'medium' }}>
|
||||
Total
|
||||
</Typography>
|
||||
<div className='flex items-center gap-3'>
|
||||
<TextField
|
||||
size='small'
|
||||
value={totalDari}
|
||||
onChange={e => setTotalDari(e.target.value)}
|
||||
sx={{ width: '150px' }}
|
||||
/>
|
||||
<Typography variant='body2'>s/d</Typography>
|
||||
<TextField
|
||||
size='small'
|
||||
value={totalSampai}
|
||||
onChange={e => setTotalSampai(e.target.value)}
|
||||
sx={{ width: '150px' }}
|
||||
/>
|
||||
</div>
|
||||
</Grid>
|
||||
|
||||
{/* Cari */}
|
||||
<Grid size={12}>
|
||||
<Typography variant='body2' sx={{ mb: 1, fontWeight: 'medium' }}>
|
||||
Cari
|
||||
</Typography>
|
||||
<div className='flex items-center gap-3'>
|
||||
<TextField
|
||||
size='small'
|
||||
placeholder='Cari'
|
||||
value={cari}
|
||||
onChange={e => setCari(e.target.value)}
|
||||
sx={{ width: '300px' }}
|
||||
/>
|
||||
<Button variant='contained' size='small'>
|
||||
Go
|
||||
</Button>
|
||||
</div>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
{/* Table */}
|
||||
<TableContainer component={Paper} sx={{ mb: 3 }}>
|
||||
<Table size='small'>
|
||||
<TableHead>
|
||||
<TableRow sx={{ backgroundColor: 'grey.50' }}>
|
||||
<TableCell padding='checkbox'>
|
||||
<Checkbox />
|
||||
</TableCell>
|
||||
<TableCell>Detil</TableCell>
|
||||
<TableCell>Kirim</TableCell>
|
||||
<TableCell>Terima</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} sx={{ textAlign: 'center', py: 4 }}>
|
||||
<div className='flex flex-col items-center gap-2'>
|
||||
<i className='tabler-folder-open text-gray-400 text-4xl' />
|
||||
<Typography variant='body2' color='text.secondary'>
|
||||
Tidak ada data
|
||||
</Typography>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
|
||||
{/* Information Text */}
|
||||
<Typography variant='body2' color='text.secondary' sx={{ mb: 2 }}>
|
||||
Transaksi yang sudah dipilih, tambah transaksi baru sesuai kebutuhan.
|
||||
</Typography>
|
||||
|
||||
{/* Table */}
|
||||
<TableContainer component={Paper} sx={{ mb: 3 }}>
|
||||
<Table size='small'>
|
||||
<TableHead>
|
||||
<TableRow sx={{ backgroundColor: 'grey.50' }}>
|
||||
<TableCell padding='checkbox'>
|
||||
<Checkbox />
|
||||
</TableCell>
|
||||
<TableCell>Detil</TableCell>
|
||||
<TableCell>Kirim</TableCell>
|
||||
<TableCell>Terima</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} sx={{ textAlign: 'center', py: 4 }}>
|
||||
<div className='flex flex-col items-center gap-2'>
|
||||
<i className='tabler-folder-open text-gray-400 text-4xl' />
|
||||
<Typography variant='body2' color='text.secondary'>
|
||||
Tidak ada data
|
||||
</Typography>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Box>
|
||||
|
||||
{/* Summary Section */}
|
||||
<Box sx={{ mb: 4 }}>
|
||||
<Typography variant='body2' sx={{ mb: 3, fontWeight: 'medium' }}>
|
||||
Total transaksi di Kledo harus sama dengan total mutasi
|
||||
</Typography>
|
||||
|
||||
<Grid container spacing={3} sx={{ mb: 3 }}>
|
||||
<Grid size={6}>
|
||||
<Typography variant='body2' color='text.secondary'>
|
||||
Total transaksi di Kledo
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid size={6}>
|
||||
<Typography variant='body2' sx={{ textAlign: 'right' }}>
|
||||
220.890
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid container spacing={3} sx={{ mb: 3 }}>
|
||||
<Grid size={6}>
|
||||
<Typography variant='body2' color='text.secondary'>
|
||||
Total mutasi
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid size={6}>
|
||||
<Typography variant='body2' sx={{ textAlign: 'right' }}>
|
||||
0
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid container spacing={3}>
|
||||
<Grid size={6}>
|
||||
<Typography variant='body2' sx={{ fontWeight: 'bold' }}>
|
||||
Selisih
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid size={6}>
|
||||
<Typography variant='body2' sx={{ textAlign: 'right', fontWeight: 'bold' }}>
|
||||
220.890
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid size={6}>
|
||||
{/* Transaction Summary */}
|
||||
<Box
|
||||
sx={{
|
||||
backgroundColor: 'grey.50',
|
||||
p: 3,
|
||||
borderRadius: 1,
|
||||
border: '1px solid',
|
||||
borderColor: 'grey.200'
|
||||
}}
|
||||
>
|
||||
<Grid container spacing={3}>
|
||||
<Grid size={4}>
|
||||
<Typography variant='body2' sx={{ fontWeight: 'bold', mb: 1 }}>
|
||||
Detil
|
||||
</Typography>
|
||||
<Typography variant='body2'>{transactionData.detil}</Typography>
|
||||
</Grid>
|
||||
<Grid size={4}>
|
||||
<Typography variant='body2' sx={{ fontWeight: 'bold', mb: 1 }}>
|
||||
Kirim
|
||||
</Typography>
|
||||
<Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
|
||||
{transactionData.kirim}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid size={4}>
|
||||
<Typography variant='body2' sx={{ fontWeight: 'bold', mb: 1 }}>
|
||||
Terima
|
||||
</Typography>
|
||||
<Typography variant='body2' color='primary' sx={{ fontWeight: 'bold' }}>
|
||||
{transactionData.terima}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Box sx={{ mt: 3, pt: 2, borderTop: '1px solid', borderColor: 'grey.300' }}>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
|
||||
<Typography variant='h6' sx={{ fontWeight: 'bold', mr: 2 }}>
|
||||
Total
|
||||
</Typography>
|
||||
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
||||
220.890
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
|
||||
{/* Footer Buttons */}
|
||||
<Box
|
||||
sx={{
|
||||
position: 'sticky',
|
||||
bottom: 0,
|
||||
zIndex: 10,
|
||||
backgroundColor: 'background.paper',
|
||||
borderTop: 1,
|
||||
borderColor: 'divider',
|
||||
p: 3
|
||||
}}
|
||||
>
|
||||
<div className='flex items-center justify-end gap-3'>
|
||||
<Button variant='outlined' color='error' onClick={handleClose}>
|
||||
Batal
|
||||
</Button>
|
||||
<Button variant='outlined' disabled>
|
||||
Rekonsiliasi
|
||||
</Button>
|
||||
</div>
|
||||
</Box>
|
||||
</Drawer>
|
||||
)
|
||||
}
|
||||
|
||||
export default CashBankDetailTransactionReconciliationDrawer
|
||||
Reference in New Issue
Block a user