Update Vendor drawer
This commit is contained in:
efrilm
parent
0e8216b0c9
commit
8026004630
@ -21,3 +21,15 @@ export interface Vendors {
|
|||||||
limit: number
|
limit: number
|
||||||
total_pages: number
|
total_pages: number
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface VendorRequest {
|
||||||
|
name: string
|
||||||
|
email?: string
|
||||||
|
phone_number?: string
|
||||||
|
address?: string
|
||||||
|
contact_person?: string
|
||||||
|
tax_number?: string
|
||||||
|
payment_terms?: string
|
||||||
|
notes?: string
|
||||||
|
is_active: boolean
|
||||||
|
}
|
||||||
|
|||||||
758
src/views/apps/vendor/list/AddVendorDrawer.tsx
vendored
758
src/views/apps/vendor/list/AddVendorDrawer.tsx
vendored
@ -10,54 +10,82 @@ import Typography from '@mui/material/Typography'
|
|||||||
import Divider from '@mui/material/Divider'
|
import Divider from '@mui/material/Divider'
|
||||||
import Grid from '@mui/material/Grid2'
|
import Grid from '@mui/material/Grid2'
|
||||||
import Box from '@mui/material/Box'
|
import Box from '@mui/material/Box'
|
||||||
|
import Switch from '@mui/material/Switch'
|
||||||
|
import FormControlLabel from '@mui/material/FormControlLabel'
|
||||||
|
|
||||||
// Third-party Imports
|
// Third-party Imports
|
||||||
import { useForm, Controller } from 'react-hook-form'
|
import { useForm, Controller } from 'react-hook-form'
|
||||||
|
|
||||||
// Types Imports
|
|
||||||
import type { VendorType } from '@/types/apps/vendorTypes'
|
|
||||||
|
|
||||||
// Component Imports
|
// Component Imports
|
||||||
import CustomTextField from '@core/components/mui/TextField'
|
import CustomTextField from '@core/components/mui/TextField'
|
||||||
|
|
||||||
|
// Backend Types
|
||||||
|
export interface VendorRequest {
|
||||||
|
name: string
|
||||||
|
email?: string
|
||||||
|
phone_number?: string
|
||||||
|
address?: string
|
||||||
|
contact_person?: string
|
||||||
|
tax_number?: string
|
||||||
|
payment_terms?: string
|
||||||
|
notes?: string
|
||||||
|
is_active: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Vendor {
|
||||||
|
id: string
|
||||||
|
organization_id: string
|
||||||
|
name: string
|
||||||
|
email?: string
|
||||||
|
phone_number?: string
|
||||||
|
address?: string
|
||||||
|
contact_person?: string
|
||||||
|
tax_number?: string
|
||||||
|
payment_terms?: string
|
||||||
|
notes?: string
|
||||||
|
is_active: boolean
|
||||||
|
created_at: string
|
||||||
|
updated_at: string
|
||||||
|
}
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
open: boolean
|
open: boolean
|
||||||
handleClose: () => void
|
handleClose: () => void
|
||||||
vendorData?: VendorType[]
|
onSubmit?: (vendorRequest: VendorRequest) => Promise<void>
|
||||||
setData: (data: VendorType[]) => void
|
|
||||||
}
|
}
|
||||||
|
|
||||||
type FormValidateType = {
|
type FormValidateType = {
|
||||||
name: string
|
name: string
|
||||||
company: string
|
|
||||||
email: string
|
email: string
|
||||||
telephone: string
|
phone_number: string
|
||||||
|
address: string
|
||||||
|
contact_person: string
|
||||||
|
tax_number: string
|
||||||
|
payment_terms: string
|
||||||
|
notes: string
|
||||||
|
is_active: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
// Vars
|
// Initial form data
|
||||||
const initialData = {
|
const initialData: FormValidateType = {
|
||||||
name: '',
|
name: '',
|
||||||
company: '',
|
|
||||||
email: '',
|
email: '',
|
||||||
telephone: ''
|
phone_number: '',
|
||||||
|
address: '',
|
||||||
|
contact_person: '',
|
||||||
|
tax_number: '',
|
||||||
|
payment_terms: '',
|
||||||
|
notes: '',
|
||||||
|
is_active: true
|
||||||
}
|
}
|
||||||
|
|
||||||
const AddVendorDrawer = (props: Props) => {
|
const AddVendorDrawer = (props: Props) => {
|
||||||
// Props
|
// Props
|
||||||
const { open, handleClose, vendorData, setData } = props
|
const { open, handleClose, onSubmit } = props
|
||||||
|
|
||||||
// States
|
// States
|
||||||
const [showMore, setShowMore] = useState(false)
|
const [showMore, setShowMore] = useState(false)
|
||||||
const [alamatPengiriman, setAlamatPengiriman] = useState([''])
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||||
const [rekeningBank, setRekeningBank] = useState([
|
|
||||||
{
|
|
||||||
bank: '',
|
|
||||||
cabang: '',
|
|
||||||
namaPemilik: '',
|
|
||||||
nomorRekening: ''
|
|
||||||
}
|
|
||||||
])
|
|
||||||
const [showPemetaanAkun, setShowPemetaanAkun] = useState(false)
|
|
||||||
|
|
||||||
// Hooks
|
// Hooks
|
||||||
const {
|
const {
|
||||||
@ -69,92 +97,58 @@ const AddVendorDrawer = (props: Props) => {
|
|||||||
defaultValues: initialData
|
defaultValues: initialData
|
||||||
})
|
})
|
||||||
|
|
||||||
// Functions untuk alamat
|
const handleFormSubmit = async (data: FormValidateType) => {
|
||||||
const handleTambahAlamat = () => {
|
try {
|
||||||
setAlamatPengiriman([...alamatPengiriman, ''])
|
setIsSubmitting(true)
|
||||||
}
|
|
||||||
|
|
||||||
const handleHapusAlamat = (index: number) => {
|
// Create VendorRequest object
|
||||||
if (alamatPengiriman.length > 1) {
|
const vendorRequest: VendorRequest = {
|
||||||
const newAlamat = alamatPengiriman.filter((_, i) => i !== index)
|
name: data.name,
|
||||||
setAlamatPengiriman(newAlamat)
|
email: data.email || undefined,
|
||||||
}
|
phone_number: data.phone_number || undefined,
|
||||||
}
|
address: data.address || undefined,
|
||||||
|
contact_person: data.contact_person || undefined,
|
||||||
const handleChangeAlamat = (index: number, value: string) => {
|
tax_number: data.tax_number || undefined,
|
||||||
const newAlamat = [...alamatPengiriman]
|
payment_terms: data.payment_terms || undefined,
|
||||||
newAlamat[index] = value
|
notes: data.notes || undefined,
|
||||||
setAlamatPengiriman(newAlamat)
|
is_active: data.is_active
|
||||||
}
|
|
||||||
|
|
||||||
// Functions untuk rekening bank
|
|
||||||
const handleTambahRekening = () => {
|
|
||||||
setRekeningBank([
|
|
||||||
...rekeningBank,
|
|
||||||
{
|
|
||||||
bank: '',
|
|
||||||
cabang: '',
|
|
||||||
namaPemilik: '',
|
|
||||||
nomorRekening: ''
|
|
||||||
}
|
}
|
||||||
])
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleHapusRekening = (index: number) => {
|
// Call the onSubmit prop if provided (for API call)
|
||||||
if (rekeningBank.length > 1) {
|
if (onSubmit) {
|
||||||
const newRekening = rekeningBank.filter((_, i) => i !== index)
|
await onSubmit(vendorRequest)
|
||||||
setRekeningBank(newRekening)
|
} else {
|
||||||
}
|
// Fallback: Create local vendor object for local state update
|
||||||
}
|
const newVendor: Vendor = {
|
||||||
|
id: `temp-${Date.now()}`, // Temporary ID
|
||||||
const handleChangeRekening = (index: number, field: string, value: string) => {
|
organization_id: 'current-org', // Should be provided by context
|
||||||
const newRekening = [...rekeningBank]
|
name: vendorRequest.name,
|
||||||
newRekening[index] = { ...newRekening[index], [field]: value }
|
email: vendorRequest.email,
|
||||||
setRekeningBank(newRekening)
|
phone_number: vendorRequest.phone_number,
|
||||||
}
|
address: vendorRequest.address,
|
||||||
|
contact_person: vendorRequest.contact_person,
|
||||||
const onSubmit = (data: FormValidateType) => {
|
tax_number: vendorRequest.tax_number,
|
||||||
const newVendor: VendorType = {
|
payment_terms: vendorRequest.payment_terms,
|
||||||
id: (vendorData?.length && vendorData?.length + 1) || 1,
|
notes: vendorRequest.notes,
|
||||||
photo: '',
|
is_active: vendorRequest.is_active,
|
||||||
name: data.name,
|
created_at: new Date().toISOString(),
|
||||||
company: data.company,
|
updated_at: new Date().toISOString()
|
||||||
email: data.email,
|
}
|
||||||
telephone: data.telephone,
|
|
||||||
youPayable: 0,
|
|
||||||
theyPayable: 0
|
|
||||||
}
|
|
||||||
|
|
||||||
setData([...(vendorData ?? []), newVendor])
|
|
||||||
handleClose()
|
|
||||||
resetForm(initialData)
|
|
||||||
setAlamatPengiriman([''])
|
|
||||||
setRekeningBank([
|
|
||||||
{
|
|
||||||
bank: '',
|
|
||||||
cabang: '',
|
|
||||||
namaPemilik: '',
|
|
||||||
nomorRekening: ''
|
|
||||||
}
|
}
|
||||||
])
|
|
||||||
setShowMore(false)
|
handleReset()
|
||||||
setShowPemetaanAkun(false)
|
} catch (error) {
|
||||||
|
console.error('Error submitting vendor:', error)
|
||||||
|
// Handle error (show toast, etc.)
|
||||||
|
} finally {
|
||||||
|
setIsSubmitting(false)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleReset = () => {
|
const handleReset = () => {
|
||||||
handleClose()
|
handleClose()
|
||||||
resetForm(initialData)
|
resetForm(initialData)
|
||||||
setAlamatPengiriman([''])
|
|
||||||
setRekeningBank([
|
|
||||||
{
|
|
||||||
bank: '',
|
|
||||||
cabang: '',
|
|
||||||
namaPemilik: '',
|
|
||||||
nomorRekening: ''
|
|
||||||
}
|
|
||||||
])
|
|
||||||
setShowMore(false)
|
setShowMore(false)
|
||||||
setShowPemetaanAkun(false)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -194,472 +188,182 @@ const AddVendorDrawer = (props: Props) => {
|
|||||||
|
|
||||||
{/* Scrollable Content */}
|
{/* Scrollable Content */}
|
||||||
<Box sx={{ flex: 1, overflowY: 'auto' }}>
|
<Box sx={{ flex: 1, overflowY: 'auto' }}>
|
||||||
<form id='vendor-form' onSubmit={handleSubmit(data => onSubmit(data))}>
|
<form id='vendor-form' onSubmit={handleSubmit(handleFormSubmit)}>
|
||||||
<div className='flex flex-col gap-6 p-6'>
|
<div className='flex flex-col gap-6 p-6'>
|
||||||
{/* Tampilkan Foto */}
|
{/* Nama Vendor */}
|
||||||
<div className='flex items-center gap-3'>
|
|
||||||
<i className='tabler-plus text-blue-500' />
|
|
||||||
<Typography variant='body1' color='primary' className='cursor-pointer'>
|
|
||||||
Tampilkan Foto
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Nama */}
|
|
||||||
<div>
|
<div>
|
||||||
<Typography variant='body2' className='mb-2'>
|
<Typography variant='body2' className='mb-2'>
|
||||||
Nama <span className='text-red-500'>*</span>
|
Nama Vendor <span className='text-red-500'>*</span>
|
||||||
</Typography>
|
</Typography>
|
||||||
<Grid container spacing={2}>
|
<Controller
|
||||||
<Grid size={4}>
|
name='name'
|
||||||
<CustomTextField select fullWidth defaultValue='Tuan'>
|
control={control}
|
||||||
<MenuItem value='Tuan'>Tuan</MenuItem>
|
rules={{ required: 'Nama vendor wajib diisi' }}
|
||||||
<MenuItem value='Nyonya'>Nyonya</MenuItem>
|
render={({ field }) => (
|
||||||
<MenuItem value='Nona'>Nona</MenuItem>
|
<CustomTextField
|
||||||
<MenuItem value='Bapak'>Bapak</MenuItem>
|
{...field}
|
||||||
<MenuItem value='Ibu'>Ibu</MenuItem>
|
fullWidth
|
||||||
</CustomTextField>
|
placeholder='Masukkan nama vendor'
|
||||||
</Grid>
|
error={!!errors.name}
|
||||||
<Grid size={8}>
|
helperText={errors.name?.message}
|
||||||
<Controller
|
|
||||||
name='name'
|
|
||||||
control={control}
|
|
||||||
rules={{ required: true }}
|
|
||||||
render={({ field }) => (
|
|
||||||
<CustomTextField
|
|
||||||
{...field}
|
|
||||||
fullWidth
|
|
||||||
placeholder='Nama'
|
|
||||||
{...(errors.name && { error: true, helperText: 'Field ini wajib diisi.' })}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
/>
|
||||||
</Grid>
|
)}
|
||||||
</Grid>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Perusahaan dan Telepon */}
|
|
||||||
<Grid container spacing={6}>
|
|
||||||
<Grid size={6}>
|
|
||||||
<Controller
|
|
||||||
name='company'
|
|
||||||
control={control}
|
|
||||||
rules={{ required: true }}
|
|
||||||
render={({ field }) => (
|
|
||||||
<CustomTextField
|
|
||||||
{...field}
|
|
||||||
fullWidth
|
|
||||||
label='Perusahaan'
|
|
||||||
placeholder='Perusahaan'
|
|
||||||
{...(errors.company && { error: true, helperText: 'Field ini wajib diisi.' })}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid size={6}>
|
|
||||||
<Controller
|
|
||||||
name='telephone'
|
|
||||||
control={control}
|
|
||||||
rules={{ required: true }}
|
|
||||||
render={({ field }) => (
|
|
||||||
<CustomTextField
|
|
||||||
{...field}
|
|
||||||
fullWidth
|
|
||||||
label='Telepon'
|
|
||||||
placeholder='Telepon'
|
|
||||||
{...(errors.telephone && { error: true, helperText: 'Field ini wajib diisi.' })}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
{/* Email */}
|
{/* Email */}
|
||||||
<Controller
|
<div>
|
||||||
name='email'
|
<Typography variant='body2' className='mb-2'>
|
||||||
control={control}
|
Email
|
||||||
rules={{ required: true }}
|
</Typography>
|
||||||
render={({ field }) => (
|
<Controller
|
||||||
<CustomTextField
|
name='email'
|
||||||
{...field}
|
control={control}
|
||||||
fullWidth
|
rules={{
|
||||||
type='email'
|
pattern: {
|
||||||
label='Email'
|
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
|
||||||
placeholder='Email'
|
message: 'Format email tidak valid'
|
||||||
{...(errors.email && { error: true, helperText: 'Field ini wajib diisi.' })}
|
}
|
||||||
/>
|
}}
|
||||||
)}
|
render={({ field }) => (
|
||||||
/>
|
<CustomTextField
|
||||||
|
{...field}
|
||||||
|
fullWidth
|
||||||
|
type='email'
|
||||||
|
placeholder='vendor@example.com'
|
||||||
|
error={!!errors.email}
|
||||||
|
helperText={errors.email?.message}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Nomor Telepon */}
|
||||||
|
<div>
|
||||||
|
<Typography variant='body2' className='mb-2'>
|
||||||
|
Nomor Telepon
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='phone_number'
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => <CustomTextField {...field} fullWidth placeholder='Nomor telepon vendor' />}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Contact Person */}
|
||||||
|
<div>
|
||||||
|
<Typography variant='body2' className='mb-2'>
|
||||||
|
Contact Person
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='contact_person'
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => <CustomTextField {...field} fullWidth placeholder='Nama contact person' />}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status Aktif */}
|
||||||
|
<div>
|
||||||
|
<Controller
|
||||||
|
name='is_active'
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormControlLabel
|
||||||
|
control={<Switch checked={field.value} onChange={field.onChange} color='primary' />}
|
||||||
|
label='Vendor Aktif'
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Tampilkan selengkapnya */}
|
{/* Tampilkan selengkapnya */}
|
||||||
{!showMore && (
|
{!showMore && (
|
||||||
<div className='flex items-center gap-3' onClick={() => setShowMore(true)}>
|
<div className='flex items-center gap-3 cursor-pointer' onClick={() => setShowMore(true)}>
|
||||||
<i className='tabler-plus text-blue-500' />
|
<i className='tabler-plus text-blue-500' />
|
||||||
<Typography variant='body1' color='primary' className='cursor-pointer'>
|
<Typography variant='body1' color='primary'>
|
||||||
Tampilkan selengkapnya
|
Tampilkan selengkapnya
|
||||||
</Typography>
|
</Typography>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Konten tambahan yang muncul saat showMore true */}
|
{/* Konten tambahan */}
|
||||||
{showMore && (
|
{showMore && (
|
||||||
<>
|
<>
|
||||||
{/* Alamat Penagihan */}
|
{/* Alamat */}
|
||||||
<div>
|
<div>
|
||||||
<Typography variant='body2' className='mb-2'>
|
<Typography variant='body2' className='mb-2'>
|
||||||
Alamat Penagihan
|
Alamat
|
||||||
</Typography>
|
</Typography>
|
||||||
<CustomTextField fullWidth placeholder='Alamat Penagihan' multiline rows={3} />
|
<Controller
|
||||||
|
name='address'
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<CustomTextField {...field} fullWidth placeholder='Alamat lengkap vendor' multiline rows={3} />
|
||||||
|
)}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Negara */}
|
{/* NPWP/Tax Number */}
|
||||||
<div>
|
|
||||||
<Typography variant='body2' className='mb-2'>
|
|
||||||
Negara
|
|
||||||
</Typography>
|
|
||||||
<CustomTextField select fullWidth defaultValue='Indonesia'>
|
|
||||||
<MenuItem value='Indonesia'>Indonesia</MenuItem>
|
|
||||||
</CustomTextField>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Provinsi dan Kota */}
|
|
||||||
<Grid container spacing={6}>
|
|
||||||
<Grid size={6}>
|
|
||||||
<Typography variant='body2' className='mb-2'>
|
|
||||||
Provinsi
|
|
||||||
</Typography>
|
|
||||||
<CustomTextField select fullWidth placeholder='Provinsi'>
|
|
||||||
<MenuItem value=''>Pilih Provinsi</MenuItem>
|
|
||||||
<MenuItem value='DKI Jakarta'>DKI Jakarta</MenuItem>
|
|
||||||
<MenuItem value='Jawa Barat'>Jawa Barat</MenuItem>
|
|
||||||
<MenuItem value='Jawa Tengah'>Jawa Tengah</MenuItem>
|
|
||||||
<MenuItem value='Jawa Timur'>Jawa Timur</MenuItem>
|
|
||||||
</CustomTextField>
|
|
||||||
</Grid>
|
|
||||||
<Grid size={6}>
|
|
||||||
<Typography variant='body2' className='mb-2'>
|
|
||||||
Kota
|
|
||||||
</Typography>
|
|
||||||
<CustomTextField select fullWidth placeholder='Kota'>
|
|
||||||
<MenuItem value=''>Pilih Kota</MenuItem>
|
|
||||||
<MenuItem value='Jakarta'>Jakarta</MenuItem>
|
|
||||||
<MenuItem value='Bandung'>Bandung</MenuItem>
|
|
||||||
<MenuItem value='Surabaya'>Surabaya</MenuItem>
|
|
||||||
</CustomTextField>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
{/* Kecamatan dan Kelurahan */}
|
|
||||||
<Grid container spacing={6}>
|
|
||||||
<Grid size={6}>
|
|
||||||
<Typography variant='body2' className='mb-2'>
|
|
||||||
Kecamatan
|
|
||||||
</Typography>
|
|
||||||
<CustomTextField select fullWidth placeholder='Kecamatan'>
|
|
||||||
<MenuItem value=''>Pilih Kecamatan</MenuItem>
|
|
||||||
</CustomTextField>
|
|
||||||
</Grid>
|
|
||||||
<Grid size={6}>
|
|
||||||
<Typography variant='body2' className='mb-2'>
|
|
||||||
Kelurahan
|
|
||||||
</Typography>
|
|
||||||
<CustomTextField select fullWidth placeholder='Kelurahan'>
|
|
||||||
<MenuItem value=''>Pilih Kelurahan</MenuItem>
|
|
||||||
</CustomTextField>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
{/* Tipe Kartu Identitas dan ID */}
|
|
||||||
<Grid container spacing={6}>
|
|
||||||
<Grid size={6}>
|
|
||||||
<Typography variant='body2' className='mb-2'>
|
|
||||||
Tipe Kartu Identitas
|
|
||||||
</Typography>
|
|
||||||
<CustomTextField select fullWidth placeholder='Silahkan pilih tipe kartu identitas'>
|
|
||||||
<MenuItem value=''>Pilih Tipe Kartu Identitas</MenuItem>
|
|
||||||
<MenuItem value='KTP'>KTP</MenuItem>
|
|
||||||
<MenuItem value='SIM'>SIM</MenuItem>
|
|
||||||
<MenuItem value='Paspor'>Paspor</MenuItem>
|
|
||||||
</CustomTextField>
|
|
||||||
</Grid>
|
|
||||||
<Grid size={6}>
|
|
||||||
<Typography variant='body2' className='mb-2'>
|
|
||||||
ID Kartu Identitas
|
|
||||||
</Typography>
|
|
||||||
<CustomTextField fullWidth placeholder='ID Kartu Identitas' />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
{/* NPWP */}
|
|
||||||
<div>
|
<div>
|
||||||
<Typography variant='body2' className='mb-2'>
|
<Typography variant='body2' className='mb-2'>
|
||||||
NPWP
|
NPWP
|
||||||
</Typography>
|
</Typography>
|
||||||
<CustomTextField fullWidth placeholder='NPWP' />
|
<Controller
|
||||||
|
name='tax_number'
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => <CustomTextField {...field} fullWidth placeholder='Nomor NPWP' />}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Alamat Pengiriman */}
|
{/* Payment Terms */}
|
||||||
<div>
|
<div>
|
||||||
<Typography variant='body2' className='mb-2 font-medium'>
|
<Typography variant='body2' className='mb-2'>
|
||||||
Alamat Pengiriman
|
Syarat Pembayaran
|
||||||
</Typography>
|
</Typography>
|
||||||
{alamatPengiriman.map((alamat, index) => (
|
<Controller
|
||||||
<div key={index} className='flex items-center gap-3 mb-3'>
|
name='payment_terms'
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<CustomTextField {...field} select fullWidth placeholder='Pilih syarat pembayaran'>
|
||||||
|
<MenuItem value=''>Pilih Syarat Pembayaran</MenuItem>
|
||||||
|
<MenuItem value='CASH'>Cash</MenuItem>
|
||||||
|
<MenuItem value='NET_7'>Net 7 Hari</MenuItem>
|
||||||
|
<MenuItem value='NET_14'>Net 14 Hari</MenuItem>
|
||||||
|
<MenuItem value='NET_30'>Net 30 Hari</MenuItem>
|
||||||
|
<MenuItem value='NET_60'>Net 60 Hari</MenuItem>
|
||||||
|
<MenuItem value='NET_90'>Net 90 Hari</MenuItem>
|
||||||
|
</CustomTextField>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Notes */}
|
||||||
|
<div>
|
||||||
|
<Typography variant='body2' className='mb-2'>
|
||||||
|
Catatan
|
||||||
|
</Typography>
|
||||||
|
<Controller
|
||||||
|
name='notes'
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
<CustomTextField
|
<CustomTextField
|
||||||
|
{...field}
|
||||||
fullWidth
|
fullWidth
|
||||||
placeholder='Alamat'
|
placeholder='Catatan tambahan tentang vendor'
|
||||||
multiline
|
multiline
|
||||||
rows={2}
|
rows={3}
|
||||||
value={alamat}
|
|
||||||
onChange={e => handleChangeAlamat(index, e.target.value)}
|
|
||||||
sx={{
|
|
||||||
'& .MuiOutlinedInput-root': {
|
|
||||||
borderColor: index === 1 ? 'primary.main' : 'default'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
{alamatPengiriman.length > 1 && (
|
)}
|
||||||
<IconButton
|
/>
|
||||||
size='small'
|
|
||||||
onClick={() => handleHapusAlamat(index)}
|
|
||||||
sx={{
|
|
||||||
color: 'error.main',
|
|
||||||
border: 1,
|
|
||||||
borderColor: 'error.main',
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: 'error.light',
|
|
||||||
borderColor: 'error.main'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<i className='tabler-trash' />
|
|
||||||
</IconButton>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Tambah Alamat Pengiriman */}
|
{/* Sembunyikan */}
|
||||||
<div className='flex items-center gap-3' onClick={handleTambahAlamat}>
|
<div className='flex items-center gap-3 cursor-pointer' onClick={() => setShowMore(false)}>
|
||||||
<i className='tabler-plus text-blue-500' />
|
<i className='tabler-minus text-blue-500' />
|
||||||
<Typography variant='body1' color='primary' className='cursor-pointer'>
|
<Typography variant='body1' color='primary'>
|
||||||
Tambah Alamat Pengiriman
|
Sembunyikan
|
||||||
</Typography>
|
</Typography>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Rekening Bank */}
|
|
||||||
<div>
|
|
||||||
<Typography variant='body2' className='mb-2 font-medium'>
|
|
||||||
Rekening Bank
|
|
||||||
</Typography>
|
|
||||||
{rekeningBank.map((rekening, index) => (
|
|
||||||
<div key={index} className='mb-4'>
|
|
||||||
<div className='flex items-start gap-3'>
|
|
||||||
<div className='flex-1'>
|
|
||||||
{/* Baris pertama: Bank & Cabang */}
|
|
||||||
<Grid container spacing={3} className='mb-3'>
|
|
||||||
<Grid size={6}>
|
|
||||||
<CustomTextField
|
|
||||||
select
|
|
||||||
fullWidth
|
|
||||||
placeholder='Bank'
|
|
||||||
value={rekening.bank}
|
|
||||||
onChange={e => handleChangeRekening(index, 'bank', e.target.value)}
|
|
||||||
>
|
|
||||||
<MenuItem value=''>Pilih Bank</MenuItem>
|
|
||||||
<MenuItem value='BCA'>BCA</MenuItem>
|
|
||||||
<MenuItem value='Mandiri'>Mandiri</MenuItem>
|
|
||||||
<MenuItem value='BNI'>BNI</MenuItem>
|
|
||||||
<MenuItem value='BRI'>BRI</MenuItem>
|
|
||||||
</CustomTextField>
|
|
||||||
</Grid>
|
|
||||||
<Grid size={6}>
|
|
||||||
<CustomTextField
|
|
||||||
fullWidth
|
|
||||||
placeholder='Cabang'
|
|
||||||
value={rekening.cabang}
|
|
||||||
onChange={e => handleChangeRekening(index, 'cabang', e.target.value)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
{/* Baris kedua: Nama Pemilik & Nomor Rekening */}
|
|
||||||
<Grid container spacing={3}>
|
|
||||||
<Grid size={6}>
|
|
||||||
<CustomTextField
|
|
||||||
fullWidth
|
|
||||||
placeholder='Nama Pemilik'
|
|
||||||
value={rekening.namaPemilik}
|
|
||||||
onChange={e => handleChangeRekening(index, 'namaPemilik', e.target.value)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid size={6}>
|
|
||||||
<CustomTextField
|
|
||||||
fullWidth
|
|
||||||
placeholder='Nomor Rekening'
|
|
||||||
value={rekening.nomorRekening}
|
|
||||||
onChange={e => handleChangeRekening(index, 'nomorRekening', e.target.value)}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Tombol hapus di samping, sejajar dengan tengah kedua baris */}
|
|
||||||
{rekeningBank.length > 1 && (
|
|
||||||
<div className='flex items-center' style={{ height: '120px' }}>
|
|
||||||
<IconButton
|
|
||||||
size='small'
|
|
||||||
onClick={() => handleHapusRekening(index)}
|
|
||||||
sx={{
|
|
||||||
color: 'error.main',
|
|
||||||
border: 1,
|
|
||||||
borderColor: 'error.main',
|
|
||||||
'&:hover': {
|
|
||||||
backgroundColor: 'error.light',
|
|
||||||
borderColor: 'error.main'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<i className='tabler-trash' />
|
|
||||||
</IconButton>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<div className='flex items-center gap-3 mt-4' onClick={handleTambahRekening}>
|
|
||||||
<i className='tabler-plus text-blue-500' />
|
|
||||||
<Typography variant='body1' color='primary' className='cursor-pointer'>
|
|
||||||
Tambah Rekening Bank
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className='flex items-center gap-3 mt-2' onClick={() => setShowPemetaanAkun(!showPemetaanAkun)}>
|
|
||||||
<i className={showPemetaanAkun ? 'tabler-minus text-blue-500' : 'tabler-plus text-blue-500'} />
|
|
||||||
<Typography variant='body1' color='primary' className='cursor-pointer'>
|
|
||||||
{showPemetaanAkun ? 'Sembunyikan pemetaan akun' : 'Tampilkan pemetaan akun'}
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Konten Pemetaan Akun */}
|
|
||||||
{showPemetaanAkun && (
|
|
||||||
<div className='mt-6 p-4 border border-gray-200 rounded-lg'>
|
|
||||||
{/* Akun Hutang */}
|
|
||||||
<Grid container spacing={6} className='mb-4'>
|
|
||||||
<Grid size={6}>
|
|
||||||
<Typography variant='body2' className='mb-2 font-medium'>
|
|
||||||
Akun Hutang
|
|
||||||
</Typography>
|
|
||||||
<CustomTextField select fullWidth defaultValue='2-20100 Hutang Usaha'>
|
|
||||||
<MenuItem value='2-20100 Hutang Usaha'>2-20100 Hutang Usaha</MenuItem>
|
|
||||||
<MenuItem value='2-20200 Hutang Bank'>2-20200 Hutang Bank</MenuItem>
|
|
||||||
<MenuItem value='2-20300 Hutang Lainnya'>2-20300 Hutang Lainnya</MenuItem>
|
|
||||||
</CustomTextField>
|
|
||||||
</Grid>
|
|
||||||
<Grid size={6}>
|
|
||||||
<Typography variant='body2' className='mb-2 font-medium'>
|
|
||||||
Maksimal Hutang
|
|
||||||
<i className='tabler-help-circle text-gray-400 ml-1' />
|
|
||||||
</Typography>
|
|
||||||
<CustomTextField fullWidth type='number' defaultValue='0' placeholder='0' />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
{/* Akun Piutang */}
|
|
||||||
<Grid container spacing={6} className='mb-4'>
|
|
||||||
<Grid size={6}>
|
|
||||||
<Typography variant='body2' className='mb-2 font-medium'>
|
|
||||||
Akun Piutang
|
|
||||||
</Typography>
|
|
||||||
<CustomTextField select fullWidth defaultValue='1-10100 Piutang Usaha'>
|
|
||||||
<MenuItem value='1-10100 Piutang Usaha'>1-10100 Piutang Usaha</MenuItem>
|
|
||||||
<MenuItem value='1-10200 Piutang Karyawan'>1-10200 Piutang Karyawan</MenuItem>
|
|
||||||
<MenuItem value='1-10300 Piutang Lainnya'>1-10300 Piutang Lainnya</MenuItem>
|
|
||||||
</CustomTextField>
|
|
||||||
</Grid>
|
|
||||||
<Grid size={6}>
|
|
||||||
<Typography variant='body2' className='mb-2 font-medium'>
|
|
||||||
Maksimal Piutang
|
|
||||||
<i className='tabler-help-circle text-gray-400 ml-1' />
|
|
||||||
</Typography>
|
|
||||||
<CustomTextField fullWidth type='number' defaultValue='0' placeholder='0' />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
{/* Kena Pajak */}
|
|
||||||
<div className='mb-4'>
|
|
||||||
<Typography variant='body2' className='mb-3 font-medium'>
|
|
||||||
Kena pajak ?
|
|
||||||
</Typography>
|
|
||||||
<div className='flex items-center'>
|
|
||||||
<input
|
|
||||||
type='checkbox'
|
|
||||||
className='toggle-switch'
|
|
||||||
style={{
|
|
||||||
appearance: 'none',
|
|
||||||
width: '60px',
|
|
||||||
height: '30px',
|
|
||||||
backgroundColor: '#3b82f6',
|
|
||||||
borderRadius: '15px',
|
|
||||||
position: 'relative',
|
|
||||||
cursor: 'pointer',
|
|
||||||
outline: 'none'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<style>
|
|
||||||
{`
|
|
||||||
.toggle-switch::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 3px;
|
|
||||||
left: 3px;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
transition: transform 0.3s ease;
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
.toggle-switch:checked::before {
|
|
||||||
transform: translateX(30px);
|
|
||||||
}
|
|
||||||
`}
|
|
||||||
</style>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<Grid container spacing={6} className='mt-4'>
|
|
||||||
<Grid size={6}>
|
|
||||||
<Typography variant='body2' className='mb-2'>
|
|
||||||
Nomor
|
|
||||||
</Typography>
|
|
||||||
<CustomTextField fullWidth placeholder='Nomor' />
|
|
||||||
</Grid>
|
|
||||||
<Grid size={6}>
|
|
||||||
<Typography variant='body2' className='mb-2'>
|
|
||||||
Tanggal Lahir
|
|
||||||
</Typography>
|
|
||||||
<CustomTextField fullWidth type='date' placeholder='Tanggal Lahir' />
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
|
|
||||||
<div className='mt-4'>
|
|
||||||
<Typography variant='body2' className='mb-2'>
|
|
||||||
Deskripsi
|
|
||||||
</Typography>
|
|
||||||
<CustomTextField fullWidth placeholder='Deskripsi' multiline rows={3} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Button Sembunyikan di dalam konten */}
|
|
||||||
<div className='flex items-center gap-3 mt-6 mb-6' onClick={() => setShowMore(false)}>
|
|
||||||
<i className='tabler-minus text-blue-500' />
|
|
||||||
<Typography variant='body1' color='primary' className='cursor-pointer'>
|
|
||||||
Sembunyikan
|
|
||||||
</Typography>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@ -679,10 +383,10 @@ const AddVendorDrawer = (props: Props) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className='flex items-center gap-4'>
|
<div className='flex items-center gap-4'>
|
||||||
<Button variant='contained' type='submit' form='vendor-form'>
|
<Button variant='contained' type='submit' form='vendor-form' disabled={isSubmitting}>
|
||||||
Simpan
|
{isSubmitting ? 'Menyimpan...' : 'Simpan'}
|
||||||
</Button>
|
</Button>
|
||||||
<Button variant='tonal' color='error' onClick={() => handleReset()}>
|
<Button variant='outlined' color='error' onClick={handleReset} disabled={isSubmitting}>
|
||||||
Batal
|
Batal
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -350,12 +350,7 @@ const VendorListTable = () => {
|
|||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
{/* <AddVendorDrawer
|
<AddVendorDrawer open={addVendorOpen} handleClose={() => setAddVendorOpen(!addVendorOpen)} />
|
||||||
open={addVendorOpen}
|
|
||||||
handleClose={() => setAddVendorOpen(!addVendorOpen)}
|
|
||||||
vendorData={data}
|
|
||||||
setData={setData}
|
|
||||||
/> */}
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user