343 lines
12 KiB
TypeScript
343 lines
12 KiB
TypeScript
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
|