Delete and Edit Vendor
This commit is contained in:
efrilm
+153
-86
@@ -1,20 +1,28 @@
|
||||
'use client'
|
||||
|
||||
// MUI Imports
|
||||
import Card from '@mui/material/Card'
|
||||
import CardContent from '@mui/material/CardContent'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import Chip from '@mui/material/Chip'
|
||||
import Divider from '@mui/material/Divider'
|
||||
import Button from '@mui/material/Button'
|
||||
import type { ButtonProps } from '@mui/material/Button'
|
||||
|
||||
// Type Imports
|
||||
import type { ThemeColor } from '@core/types'
|
||||
|
||||
// Component Imports
|
||||
import EditUserInfo from '@components/dialogs/edit-user-info'
|
||||
import ConfirmationDialog from '@components/dialogs/confirmation-dialog'
|
||||
import OpenDialogOnElementClick from '@components/dialogs/OpenDialogOnElementClick'
|
||||
import CustomAvatar from '@core/components/mui/Avatar'
|
||||
import { useParams } from 'next/navigation'
|
||||
import { useVendorById } from '@/services/queries/vendor'
|
||||
import Loading from '@/components/layout/shared/Loading'
|
||||
import { getInitials } from '@/utils/getInitials'
|
||||
import OpenDialogOnElementClick from '@/components/dialogs/OpenDialogOnElementClick'
|
||||
import { Box, Button, ButtonProps, CircularProgress } from '@mui/material'
|
||||
import ConfirmationDialog from '@/components/dialogs/confirmation-dialog'
|
||||
import EditUserInfo from '@/components/dialogs/edit-user-info'
|
||||
import { ThemeColor } from '@/@core/types'
|
||||
import { useState } from 'react'
|
||||
import AddVendorDrawer from '../../list/AddVendorDrawer'
|
||||
import ConfirmDeleteDialog from '@/components/dialogs/confirm-delete'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useVendorsMutation } from '@/services/mutations/vendor'
|
||||
|
||||
// Vars
|
||||
const userData = {
|
||||
@@ -33,7 +41,25 @@ const userData = {
|
||||
}
|
||||
|
||||
const VendorDetails = () => {
|
||||
// Vars
|
||||
const [editVendorOpen, setEditVendorOpen] = useState(false)
|
||||
const [openConfirm, setOpenConfirm] = useState(false)
|
||||
|
||||
const params = useParams()
|
||||
const id = params?.id ?? ''
|
||||
|
||||
const { data: vendor, isLoading, error } = useVendorById(id as string)
|
||||
|
||||
const { deleteVendor } = useVendorsMutation()
|
||||
|
||||
const handleDelete = () => {
|
||||
deleteVendor.mutate(id as string, {
|
||||
onSuccess: () => {
|
||||
setOpenConfirm(false)
|
||||
window.history.back()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const buttonProps = (children: string, color: ThemeColor, variant: ButtonProps['variant']): ButtonProps => ({
|
||||
children,
|
||||
color,
|
||||
@@ -42,91 +68,132 @@ const VendorDetails = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<CardContent className='flex flex-col pbs-12 gap-6'>
|
||||
<div className='flex flex-col gap-6'>
|
||||
<div className='flex items-center justify-center flex-col gap-4'>
|
||||
<div className='flex flex-col items-center gap-4'>
|
||||
<CustomAvatar alt='user-profile' src='/images/avatars/1.png' variant='rounded' size={120} />
|
||||
<Typography variant='h5'>{`${userData.firstName} ${userData.lastName}`}</Typography>
|
||||
{isLoading ? (
|
||||
<Box
|
||||
position='absolute'
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
bottom={0}
|
||||
display='flex'
|
||||
alignItems='center'
|
||||
justifyContent='center'
|
||||
bgcolor='rgba(255,255,255,0.7)'
|
||||
zIndex={1}
|
||||
>
|
||||
<CircularProgress size={24} />
|
||||
</Box>
|
||||
) : (
|
||||
<Card>
|
||||
<CardContent className='flex flex-col pbs-12 gap-6'>
|
||||
<div className='flex flex-col gap-6'>
|
||||
<div className='flex items-center justify-center flex-col gap-4'>
|
||||
<div className='flex flex-col items-center gap-4'>
|
||||
{/* <CustomAvatar alt='vendor-profile' variant='rounded' size={120}>
|
||||
{getInitials(vendor?.name as string)}
|
||||
</CustomAvatar> */}
|
||||
<Typography variant='h5'>{vendor?.name}</Typography>
|
||||
</div>
|
||||
<Chip label='Vendor' color='primary' size='small' variant='tonal' />
|
||||
</div>
|
||||
<Chip label='Vendor' color='primary' size='small' variant='tonal' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Detail Kontak Section */}
|
||||
<div>
|
||||
<Typography variant='h5'>Detail Kontak</Typography>
|
||||
<Divider className='mlb-4' />
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Nama:
|
||||
</Typography>
|
||||
<Typography>{`${userData.firstName} ${userData.lastName}`}</Typography>
|
||||
</div>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Perusahaan:
|
||||
</Typography>
|
||||
<Typography>{userData.perusahaan}</Typography>
|
||||
</div>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Email:
|
||||
</Typography>
|
||||
<Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
|
||||
{userData.email}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Telepon:
|
||||
</Typography>
|
||||
<Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
|
||||
{userData.telepon}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Alamat Penagihan:
|
||||
</Typography>
|
||||
<Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
|
||||
{userData.alamatPenagihan}
|
||||
</Typography>
|
||||
{/* Detail Kontak Section */}
|
||||
<div>
|
||||
<Typography variant='h5'>Detail Kontak</Typography>
|
||||
<Divider className='mlb-4' />
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Contact Person:
|
||||
</Typography>
|
||||
<Typography>{vendor?.contact_person}</Typography>
|
||||
</div>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Perusahaan:
|
||||
</Typography>
|
||||
<Typography>{vendor?.name}</Typography>
|
||||
</div>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Email:
|
||||
</Typography>
|
||||
<Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
|
||||
{vendor?.email}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Telepon:
|
||||
</Typography>
|
||||
<Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
|
||||
{vendor?.phone_number}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Alamat Penagihan:
|
||||
</Typography>
|
||||
<Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
|
||||
{vendor?.address ?? '-'}
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pemetaan Akun Section */}
|
||||
<div>
|
||||
<Typography variant='h5'>Pemetaan Akun</Typography>
|
||||
<Divider className='mlb-4' />
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Akun Hutang:
|
||||
</Typography>
|
||||
<Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
|
||||
{userData.akunHutang}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Akun Piutang:
|
||||
</Typography>
|
||||
<Typography color='text.secondary'>{userData.akunPiutang || '-'}</Typography>
|
||||
</div>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Kena Pajak:
|
||||
</Typography>
|
||||
<Typography color='text.primary'>{userData.kenaPajak}</Typography>
|
||||
{/* Pemetaan Akun Section */}
|
||||
<div>
|
||||
<Typography variant='h5'>Pemetaan Akun</Typography>
|
||||
<Divider className='mlb-4' />
|
||||
<div className='flex flex-col gap-2'>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Akun Hutang:
|
||||
</Typography>
|
||||
<Typography color='primary' sx={{ textDecoration: 'none', cursor: 'pointer' }}>
|
||||
{userData.akunHutang}
|
||||
</Typography>
|
||||
</div>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Akun Piutang:
|
||||
</Typography>
|
||||
<Typography color='text.secondary'>{userData.akunPiutang || '-'}</Typography>
|
||||
</div>
|
||||
<div className='flex items-center flex-wrap gap-x-1.5'>
|
||||
<Typography className='font-medium' color='text.primary'>
|
||||
Kena Pajak:
|
||||
</Typography>
|
||||
<Typography color='text.primary'>{userData.kenaPajak}</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className='flex gap-4 justify-center'>
|
||||
<Button variant='contained' onClick={() => setEditVendorOpen(!editVendorOpen)} className='max-sm:is-full'>
|
||||
Edit
|
||||
</Button>
|
||||
<Button
|
||||
variant='contained'
|
||||
color='error'
|
||||
onClick={() => setOpenConfirm(!openConfirm)}
|
||||
className='max-sm:is-full'
|
||||
>
|
||||
Hapus
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
<AddVendorDrawer open={editVendorOpen} handleClose={() => setEditVendorOpen(!editVendorOpen)} data={vendor} />
|
||||
<ConfirmDeleteDialog
|
||||
open={openConfirm}
|
||||
onClose={() => setOpenConfirm(false)}
|
||||
onConfirm={handleDelete}
|
||||
isLoading={deleteVendor.isPending}
|
||||
title='Delete Vendor'
|
||||
message='Are you sure you want to delete this Vendor? This action cannot be undone.'
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user