374 lines
12 KiB
TypeScript
374 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import React, { useState } from 'react'
|
|
import {
|
|
Card,
|
|
CardHeader,
|
|
CardContent,
|
|
Typography,
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableContainer,
|
|
TableHead,
|
|
TableRow,
|
|
Box,
|
|
Button,
|
|
IconButton,
|
|
Menu,
|
|
MenuItem,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogContentText,
|
|
DialogActions,
|
|
CircularProgress
|
|
} from '@mui/material'
|
|
import Grid from '@mui/material/Grid2'
|
|
import { PurchaseOrder, SendPaymentPurchaseOrderRequest } from '@/types/services/purchaseOrder'
|
|
import { usePurchaseOrdersMutation } from '@/services/mutations/purchaseOrder'
|
|
|
|
interface Props {
|
|
data?: PurchaseOrder
|
|
}
|
|
|
|
const PurchaseDetailInformation = ({ data }: Props) => {
|
|
const purchaseOrder = data
|
|
|
|
// State for menu and dialog
|
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
const [confirmDialog, setConfirmDialog] = useState<{
|
|
open: boolean
|
|
type: 'approve' | 'reject' | null
|
|
title: string
|
|
message: string
|
|
}>({
|
|
open: false,
|
|
type: null,
|
|
title: '',
|
|
message: ''
|
|
})
|
|
|
|
const { updateStatus } = usePurchaseOrdersMutation()
|
|
|
|
const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => {
|
|
setAnchorEl(event.currentTarget)
|
|
}
|
|
|
|
const handleMenuClose = () => {
|
|
setAnchorEl(null)
|
|
}
|
|
|
|
const handleApproveClick = () => {
|
|
setConfirmDialog({
|
|
open: true,
|
|
type: 'approve',
|
|
title: 'Konfirmasi Persetujuan',
|
|
message: 'Apakah Anda yakin ingin menyetujui purchase order ini?'
|
|
})
|
|
handleMenuClose()
|
|
}
|
|
|
|
const handleRejectClick = () => {
|
|
setConfirmDialog({
|
|
open: true,
|
|
type: 'reject',
|
|
title: 'Konfirmasi Penolakan',
|
|
message: 'Apakah Anda yakin ingin menolak purchase order ini?'
|
|
})
|
|
handleMenuClose()
|
|
}
|
|
|
|
const handleConfirmAction = async () => {
|
|
if (!purchaseOrder?.id) return
|
|
|
|
setIsSubmitting(true)
|
|
|
|
try {
|
|
const status = confirmDialog.type === 'approve' ? 'approved' : 'rejected'
|
|
|
|
updateStatus.mutate({
|
|
id: purchaseOrder.id,
|
|
payload: status
|
|
})
|
|
|
|
// Close dialog after successful submission
|
|
setConfirmDialog({
|
|
open: false,
|
|
type: null,
|
|
title: '',
|
|
message: ''
|
|
})
|
|
} catch (error) {
|
|
console.error('Error updating status:', error)
|
|
// Handle error (you might want to show a toast or error message)
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
const handleCancelAction = () => {
|
|
setConfirmDialog({
|
|
open: false,
|
|
type: null,
|
|
title: '',
|
|
message: ''
|
|
})
|
|
}
|
|
|
|
// Helper functions
|
|
const formatDate = (dateString: string): string => {
|
|
const date = new Date(dateString)
|
|
return date.toLocaleDateString('id-ID', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric'
|
|
})
|
|
}
|
|
|
|
const formatCurrency = (amount: number): string => {
|
|
return new Intl.NumberFormat('id-ID').format(amount)
|
|
}
|
|
|
|
const getStatusLabel = (status: string): string => {
|
|
const statusMap: Record<string, string> = {
|
|
draft: 'Draft',
|
|
sent: 'Dikirim',
|
|
approved: 'Disetujui',
|
|
received: 'Diterima',
|
|
cancelled: 'Dibatalkan',
|
|
rejected: 'Ditolak'
|
|
}
|
|
return statusMap[status] || status
|
|
}
|
|
|
|
const getStatusColor = (status: string): 'error' | 'success' | 'warning' | 'info' | 'default' => {
|
|
const colorMap: Record<string, 'error' | 'success' | 'warning' | 'info' | 'default'> = {
|
|
draft: 'default',
|
|
sent: 'warning',
|
|
approved: 'success',
|
|
received: 'info',
|
|
cancelled: 'error',
|
|
rejected: 'error'
|
|
}
|
|
return colorMap[status] || 'info'
|
|
}
|
|
|
|
// Calculations
|
|
const totalQuantity = (purchaseOrder?.items ?? []).reduce((sum, item) => sum + (item?.quantity ?? 0), 0)
|
|
const total = (purchaseOrder?.items ?? []).reduce((sum, item) => sum + (item?.amount ?? 0) * item?.quantity, 0)
|
|
|
|
// Check if actions should be available (only for certain statuses)
|
|
const canApproveOrReject = purchaseOrder?.status === 'received'
|
|
|
|
return (
|
|
<>
|
|
<Card sx={{ width: '100%' }}>
|
|
<CardHeader
|
|
title={
|
|
<Box display='flex' justifyContent='space-between' alignItems='center'>
|
|
<Typography variant='h5' color={getStatusColor(purchaseOrder?.status ?? '')} sx={{ fontWeight: 'bold' }}>
|
|
{getStatusLabel(purchaseOrder?.status ?? '')}
|
|
</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 onClick={handleMenuClick}>
|
|
<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' }}>
|
|
{purchaseOrder?.vendor?.name ?? ''}
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Box>
|
|
<Typography variant='subtitle2' color='text.secondary'>
|
|
Tgl. Transaksi
|
|
</Typography>
|
|
<Typography variant='body1'>{formatDate(purchaseOrder?.transaction_date ?? '')}</Typography>
|
|
</Box>
|
|
</Grid>
|
|
|
|
<Grid size={{ xs: 12, md: 6 }}>
|
|
<Box sx={{ mb: 2 }}>
|
|
<Typography variant='subtitle2' color='text.secondary'>
|
|
Nomor
|
|
</Typography>
|
|
<Typography variant='body1'>{purchaseOrder?.po_number}</Typography>
|
|
</Box>
|
|
|
|
<Box>
|
|
<Typography variant='subtitle2' color='text.secondary'>
|
|
Tgl. Jatuh Tempo
|
|
</Typography>
|
|
<Typography variant='body1'>{formatDate(purchaseOrder?.due_date ?? '')}</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='right'>Harga</TableCell>
|
|
<TableCell align='right'>Jumlah</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{(purchaseOrder?.items ?? []).map((item, index) => {
|
|
return (
|
|
<TableRow key={item.id}>
|
|
<TableCell>
|
|
<Typography variant='body2' color='primary' sx={{ cursor: 'pointer' }}>
|
|
{item.ingredient.name}
|
|
</Typography>
|
|
</TableCell>
|
|
<TableCell>{item.description}</TableCell>
|
|
<TableCell align='center'>{item.quantity}</TableCell>
|
|
<TableCell align='center'>{item.unit.name}</TableCell>
|
|
<TableCell align='right'>{formatCurrency(item.amount)}</TableCell>
|
|
<TableCell align='right'>{formatCurrency(item.amount * item.quantity)}</TableCell>
|
|
</TableRow>
|
|
)
|
|
})}
|
|
|
|
{/* Total Quantity 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' }}>
|
|
{totalQuantity}
|
|
</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,
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(0, 0, 0, 0.04)',
|
|
transition: 'background-color 0.15s ease'
|
|
}
|
|
}}
|
|
>
|
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
|
Total
|
|
</Typography>
|
|
<Typography variant='h6' sx={{ fontWeight: 'bold' }}>
|
|
{formatCurrency(total)}
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Grid>
|
|
</Grid>
|
|
</Box>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Menu */}
|
|
<Menu
|
|
anchorEl={anchorEl}
|
|
open={Boolean(anchorEl)}
|
|
onClose={handleMenuClose}
|
|
PaperProps={{
|
|
sx: {
|
|
minWidth: 160
|
|
}
|
|
}}
|
|
>
|
|
<MenuItem
|
|
onClick={handleApproveClick}
|
|
disabled={!canApproveOrReject}
|
|
sx={{
|
|
color: 'success.main',
|
|
'&:hover': {
|
|
backgroundColor: 'success.light',
|
|
color: 'success.dark'
|
|
}
|
|
}}
|
|
>
|
|
<i className='tabler-check' style={{ marginRight: 8 }} />
|
|
Disetujui
|
|
</MenuItem>
|
|
<MenuItem
|
|
onClick={handleRejectClick}
|
|
disabled={!canApproveOrReject}
|
|
sx={{
|
|
color: 'error.main',
|
|
'&:hover': {
|
|
backgroundColor: 'error.light',
|
|
color: 'error.dark'
|
|
}
|
|
}}
|
|
>
|
|
<i className='tabler-x' style={{ marginRight: 8 }} />
|
|
Ditolak
|
|
</MenuItem>
|
|
</Menu>
|
|
|
|
{/* Confirmation Dialog */}
|
|
<Dialog open={confirmDialog.open} onClose={handleCancelAction} maxWidth='sm' fullWidth>
|
|
<DialogTitle>{confirmDialog.title}</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText>{confirmDialog.message}</DialogContentText>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={handleCancelAction} color='inherit' disabled={isSubmitting}>
|
|
Batal
|
|
</Button>
|
|
<Button
|
|
onClick={handleConfirmAction}
|
|
variant='contained'
|
|
color={confirmDialog.type === 'approve' ? 'success' : 'error'}
|
|
disabled={isSubmitting}
|
|
startIcon={isSubmitting ? <CircularProgress size={16} /> : null}
|
|
autoFocus
|
|
>
|
|
{isSubmitting ? 'Memproses...' : confirmDialog.type === 'approve' ? 'Setujui' : 'Tolak'}
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default PurchaseDetailInformation
|