311 lines
10 KiB
TypeScript
311 lines
10 KiB
TypeScript
|
import React from 'react'
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardHeader,
|
||
|
|
CardContent,
|
||
|
|
Typography,
|
||
|
|
Table,
|
||
|
|
TableBody,
|
||
|
|
TableCell,
|
||
|
|
TableContainer,
|
||
|
|
TableHead,
|
||
|
|
TableRow,
|
||
|
|
Box,
|
||
|
|
Button,
|
||
|
|
IconButton
|
||
|
|
} from '@mui/material'
|
||
|
|
import Grid from '@mui/material/Grid2'
|
||
|
|
|
||
|
|
interface Product {
|
||
|
|
produk: string
|
||
|
|
deskripsi: string
|
||
|
|
kuantitas: number
|
||
|
|
satuan: string
|
||
|
|
discount: string
|
||
|
|
harga: number
|
||
|
|
pajak: string
|
||
|
|
jumlah: number
|
||
|
|
}
|
||
|
|
|
||
|
|
interface PurchaseData {
|
||
|
|
vendor: string
|
||
|
|
nomor: string
|
||
|
|
tglTransaksi: string
|
||
|
|
tglJatuhTempo: string
|
||
|
|
gudang: string
|
||
|
|
status: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const PurchaseDetailInformation: React.FC = () => {
|
||
|
|
const purchaseData: PurchaseData = {
|
||
|
|
vendor: 'Bagas Rizki Sihotang S.Farm Widodo',
|
||
|
|
nomor: 'PI/00053',
|
||
|
|
tglTransaksi: '08/09/2025',
|
||
|
|
tglJatuhTempo: '06/10/2025',
|
||
|
|
gudang: 'Unassigned',
|
||
|
|
status: 'Belum Dibayar'
|
||
|
|
}
|
||
|
|
|
||
|
|
const products: Product[] = [
|
||
|
|
{
|
||
|
|
produk: 'CB1 - Chelsea Boots',
|
||
|
|
deskripsi: 'Ukuran XS',
|
||
|
|
kuantitas: 3,
|
||
|
|
satuan: 'Pcs',
|
||
|
|
discount: '0%',
|
||
|
|
harga: 299000,
|
||
|
|
pajak: 'PPN',
|
||
|
|
jumlah: 897000
|
||
|
|
},
|
||
|
|
{
|
||
|
|
produk: 'CB1 - Chelsea Boots',
|
||
|
|
deskripsi: 'Ukuran M',
|
||
|
|
kuantitas: 1,
|
||
|
|
satuan: 'Pcs',
|
||
|
|
discount: '0%',
|
||
|
|
harga: 299000,
|
||
|
|
pajak: 'PPN',
|
||
|
|
jumlah: 299000
|
||
|
|
},
|
||
|
|
{
|
||
|
|
produk: 'KH1 - Kneel High Boots',
|
||
|
|
deskripsi: 'Ukuran XL',
|
||
|
|
kuantitas: 1,
|
||
|
|
satuan: 'Pcs',
|
||
|
|
discount: '0%',
|
||
|
|
harga: 299000,
|
||
|
|
pajak: 'PPN',
|
||
|
|
jumlah: 299000
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
const totalKuantitas: number = products.reduce((sum, product) => sum + product.kuantitas, 0)
|
||
|
|
const subTotal: number = 1495000
|
||
|
|
const ppn: number = 98670
|
||
|
|
const total: number = 1593670
|
||
|
|
const sisaTagihan: number = 1593670
|
||
|
|
|
||
|
|
const formatCurrency = (amount: number): string => {
|
||
|
|
return new Intl.NumberFormat('id-ID').format(amount)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card sx={{ width: '100%' }}>
|
||
|
|
<CardHeader
|
||
|
|
title={
|
||
|
|
<Box display='flex' justifyContent='space-between' alignItems='center'>
|
||
|
|
<Typography variant='h5' color='error' sx={{ fontWeight: 'bold' }}>
|
||
|
|
Belum Dibayar
|
||
|
|
</Typography>
|
||
|
|
<Box>
|
||
|
|
<Button startIcon={<i className='tabler-share' />} variant='outlined' size='small' sx={{ mr: 1 }}>
|
||
|
|
Bagikan
|
||
|
|
</Button>
|
||
|
|
<Button startIcon={<i className='tabler-printer' />} variant='outlined' size='small' sx={{ mr: 1 }}>
|
||
|
|
Print
|
||
|
|
</Button>
|
||
|
|
<IconButton>
|
||
|
|
<i className='tabler-dots-vertical' />
|
||
|
|
</IconButton>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<CardContent>
|
||
|
|
{/* Purchase Information */}
|
||
|
|
<Grid container spacing={3} sx={{ mb: 4 }}>
|
||
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
||
|
|
<Box sx={{ mb: 2 }}>
|
||
|
|
<Typography variant='subtitle2' color='text.secondary'>
|
||
|
|
Vendor
|
||
|
|
</Typography>
|
||
|
|
<Typography variant='body1' color='primary' sx={{ fontWeight: 'medium', cursor: 'pointer' }}>
|
||
|
|
{purchaseData.vendor}
|
||
|
|
</Typography>
|
||
|
|
</Box>
|
||
|
|
|
||
|
|
<Box sx={{ mb: 2 }}>
|
||
|
|
<Typography variant='subtitle2' color='text.secondary'>
|
||
|
|
Tgl. Transaksi
|
||
|
|
</Typography>
|
||
|
|
<Typography variant='body1'>{purchaseData.tglTransaksi}</Typography>
|
||
|
|
</Box>
|
||
|
|
|
||
|
|
<Box>
|
||
|
|
<Typography variant='subtitle2' color='text.secondary'>
|
||
|
|
Gudang
|
||
|
|
</Typography>
|
||
|
|
<Typography variant='body1' color='primary' sx={{ cursor: 'pointer' }}>
|
||
|
|
{purchaseData.gudang}
|
||
|
|
</Typography>
|
||
|
|
</Box>
|
||
|
|
</Grid>
|
||
|
|
|
||
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
||
|
|
<Box sx={{ mb: 2 }}>
|
||
|
|
<Typography variant='subtitle2' color='text.secondary'>
|
||
|
|
Nomor
|
||
|
|
</Typography>
|
||
|
|
<Typography variant='body1'>{purchaseData.nomor}</Typography>
|
||
|
|
</Box>
|
||
|
|
|
||
|
|
<Box>
|
||
|
|
<Typography variant='subtitle2' color='text.secondary'>
|
||
|
|
Tgl. Jatuh Tempo
|
||
|
|
</Typography>
|
||
|
|
<Typography variant='body1'>{purchaseData.tglJatuhTempo}</Typography>
|
||
|
|
</Box>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
|
||
|
|
{/* Products Table */}
|
||
|
|
<TableContainer>
|
||
|
|
<Table>
|
||
|
|
<TableHead>
|
||
|
|
<TableRow>
|
||
|
|
<TableCell>Produk</TableCell>
|
||
|
|
<TableCell>Deskripsi</TableCell>
|
||
|
|
<TableCell align='center'>Kuantitas</TableCell>
|
||
|
|
<TableCell align='center'>Satuan</TableCell>
|
||
|
|
<TableCell align='center'>Discount</TableCell>
|
||
|
|
<TableCell align='right'>Harga</TableCell>
|
||
|
|
<TableCell align='center'>Pajak</TableCell>
|
||
|
|
<TableCell align='right'>Jumlah</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
</TableHead>
|
||
|
|
<TableBody>
|
||
|
|
{products.map((product, index) => (
|
||
|
|
<TableRow key={index}>
|
||
|
|
<TableCell>
|
||
|
|
<Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
|
||
|
|
{product.produk}
|
||
|
|
</Typography>
|
||
|
|
</TableCell>
|
||
|
|
<TableCell>{product.deskripsi}</TableCell>
|
||
|
|
<TableCell align='center'>{product.kuantitas}</TableCell>
|
||
|
|
<TableCell align='center'>{product.satuan}</TableCell>
|
||
|
|
<TableCell align='center'>{product.discount}</TableCell>
|
||
|
|
<TableCell align='right'>{formatCurrency(product.harga)}</TableCell>
|
||
|
|
<TableCell align='center'>{product.pajak}</TableCell>
|
||
|
|
<TableCell align='right'>{formatCurrency(product.jumlah)}</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
))}
|
||
|
|
|
||
|
|
{/* Total Kuantitas Row */}
|
||
|
|
<TableRow>
|
||
|
|
<TableCell colSpan={2} sx={{ fontWeight: 'bold', borderTop: '2px solid #e0e0e0' }}>
|
||
|
|
Total Kuantitas
|
||
|
|
</TableCell>
|
||
|
|
<TableCell align='center' sx={{ fontWeight: 'bold', borderTop: '2px solid #e0e0e0' }}>
|
||
|
|
{totalKuantitas}
|
||
|
|
</TableCell>
|
||
|
|
<TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
|
||
|
|
<TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
|
||
|
|
<TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
|
||
|
|
<TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
|
||
|
|
<TableCell sx={{ borderTop: '2px solid #e0e0e0' }}></TableCell>
|
||
|
|
</TableRow>
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</TableContainer>
|
||
|
|
|
||
|
|
{/* Summary Section */}
|
||
|
|
<Box sx={{ mt: 3 }}>
|
||
|
|
<Grid container spacing={2}>
|
||
|
|
<Grid size={{ xs: 12, md: 6 }}>{/* Empty space for left side */}</Grid>
|
||
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
||
|
|
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'center',
|
||
|
|
py: 2,
|
||
|
|
borderBottom: '1px solid #e0e0e0',
|
||
|
|
'&:hover': {
|
||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
||
|
|
transition: 'background-color 0.15s ease'
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Typography variant='body1' sx={{ fontWeight: 'medium' }}>
|
||
|
|
Sub Total
|
||
|
|
</Typography>
|
||
|
|
<Typography variant='body1' sx={{ fontWeight: 'medium' }}>
|
||
|
|
{formatCurrency(subTotal)}
|
||
|
|
</Typography>
|
||
|
|
</Box>
|
||
|
|
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'center',
|
||
|
|
py: 2,
|
||
|
|
borderBottom: '1px solid #e0e0e0',
|
||
|
|
'&:hover': {
|
||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
||
|
|
transition: 'background-color 0.15s ease'
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Typography variant='body1' sx={{ fontWeight: 'medium' }}>
|
||
|
|
PPN
|
||
|
|
</Typography>
|
||
|
|
<Typography variant='body1' sx={{ fontWeight: 'medium' }}>
|
||
|
|
{formatCurrency(ppn)}
|
||
|
|
</Typography>
|
||
|
|
</Box>
|
||
|
|
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'center',
|
||
|
|
py: 2,
|
||
|
|
borderBottom: '1px solid #e0e0e0',
|
||
|
|
'&:hover': {
|
||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
||
|
|
transition: 'background-color 0.15s ease'
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Typography variant='body1' sx={{ fontWeight: 'bold' }}>
|
||
|
|
Total
|
||
|
|
</Typography>
|
||
|
|
<Typography variant='body1' sx={{ fontWeight: 'bold' }}>
|
||
|
|
{formatCurrency(total)}
|
||
|
|
</Typography>
|
||
|
|
</Box>
|
||
|
|
|
||
|
|
<Box
|
||
|
|
sx={{
|
||
|
|
display: 'flex',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'center',
|
||
|
|
py: 2,
|
||
|
|
'&:hover': {
|
||
|
|
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
||
|
|
transition: 'background-color 0.15s ease'
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
||
|
|
Sisa Tagihan
|
||
|
|
</Typography>
|
||
|
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
||
|
|
{formatCurrency(sisaTagihan)}
|
||
|
|
</Typography>
|
||
|
|
</Box>
|
||
|
|
</Box>
|
||
|
|
</Grid>
|
||
|
|
</Grid>
|
||
|
|
</Box>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default PurchaseDetailInformation
|