feat: vendor create and vendor list
This commit is contained in:
efrilm
parent
789dd823b6
commit
105d75c820
8
src/app/[lang]/(dashboard)/(private)/apps/vendor/list/page.tsx
vendored
Normal file
8
src/app/[lang]/(dashboard)/(private)/apps/vendor/list/page.tsx
vendored
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import { vendorDummyData } from '@/data/dummy/vendor'
|
||||||
|
import VendorList from '@/views/apps/vendor/list'
|
||||||
|
|
||||||
|
const VendorListTablePage = async () => {
|
||||||
|
return <VendorList vendorData={vendorDummyData} />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default VendorListTablePage
|
||||||
@ -120,9 +120,7 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
|
|||||||
</SubMenu>
|
</SubMenu>
|
||||||
<SubMenu label={dictionary['navigation'].stock}>
|
<SubMenu label={dictionary['navigation'].stock}>
|
||||||
<MenuItem href={`/${locale}/apps/inventory/stock/list`}>{dictionary['navigation'].list}</MenuItem>
|
<MenuItem href={`/${locale}/apps/inventory/stock/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||||
<MenuItem href={`/${locale}/apps/inventory/stock/restock`}>
|
<MenuItem href={`/${locale}/apps/inventory/stock/restock`}>{dictionary['navigation'].restock}</MenuItem>
|
||||||
{dictionary['navigation'].restock}
|
|
||||||
</MenuItem>
|
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
{/* <MenuItem href={`/${locale}/apps/inventory/settings`}>{dictionary['navigation'].settings}</MenuItem> */}
|
{/* <MenuItem href={`/${locale}/apps/inventory/settings`}>{dictionary['navigation'].settings}</MenuItem> */}
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
@ -140,6 +138,10 @@ const VerticalMenu = ({ dictionary, scrollMenu }: Props) => {
|
|||||||
<MenuItem href={`/${locale}/apps/user/list`}>{dictionary['navigation'].list}</MenuItem>
|
<MenuItem href={`/${locale}/apps/user/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||||
{/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
|
{/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
|
||||||
</SubMenu>
|
</SubMenu>
|
||||||
|
<SubMenu label={dictionary['navigation'].vendor} icon={<i className='tabler-user' />}>
|
||||||
|
<MenuItem href={`/${locale}/apps/vendor/list`}>{dictionary['navigation'].list}</MenuItem>
|
||||||
|
{/* <MenuItem href={`/${locale}/apps/user/view`}>{dictionary['navigation'].view}</MenuItem> */}
|
||||||
|
</SubMenu>
|
||||||
</MenuSection>
|
</MenuSection>
|
||||||
</Menu>
|
</Menu>
|
||||||
</ScrollWrapper>
|
</ScrollWrapper>
|
||||||
|
|||||||
@ -111,6 +111,7 @@
|
|||||||
"menuLevel2": "Menu Level 2",
|
"menuLevel2": "Menu Level 2",
|
||||||
"menuLevel3": "Menu Level 3",
|
"menuLevel3": "Menu Level 3",
|
||||||
"disabledMenu": "Disabled Menu",
|
"disabledMenu": "Disabled Menu",
|
||||||
"dailyReport": "Daily Report"
|
"dailyReport": "Daily Report",
|
||||||
|
"vendor": "Vendor"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -111,6 +111,7 @@
|
|||||||
"menuLevel2": "Level Menu 2",
|
"menuLevel2": "Level Menu 2",
|
||||||
"menuLevel3": "Level Menu 3",
|
"menuLevel3": "Level Menu 3",
|
||||||
"disabledMenu": "Menu Nonaktif",
|
"disabledMenu": "Menu Nonaktif",
|
||||||
"dailyReport": "Laporan Harian"
|
"dailyReport": "Laporan Harian",
|
||||||
|
"vendor": "Vendor"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
204
src/data/dummy/vendor.ts
Normal file
204
src/data/dummy/vendor.ts
Normal file
@ -0,0 +1,204 @@
|
|||||||
|
import { VendorType } from '@/types/apps/vendorTypes'
|
||||||
|
|
||||||
|
export const vendorDummyData: VendorType[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
photo: '',
|
||||||
|
name: 'Budi Santoso',
|
||||||
|
company: 'PT Maju Bersama Sejahtera',
|
||||||
|
email: 'budi.santoso@majubersama.co.id',
|
||||||
|
telephone: '+62 21 5551234',
|
||||||
|
youPayable: 25500000,
|
||||||
|
theyPayable: 12300000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
photo: '',
|
||||||
|
name: 'Siti Nurhaliza',
|
||||||
|
company: 'CV Berkah Mandiri',
|
||||||
|
email: 'siti.nurhaliza@berkahmandiri.com',
|
||||||
|
telephone: '+62 22 8887654',
|
||||||
|
youPayable: 18750000,
|
||||||
|
theyPayable: 8950000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
photo: '',
|
||||||
|
name: 'Ahmad Wijaya',
|
||||||
|
company: 'PT Teknologi Nusantara',
|
||||||
|
email: 'ahmad.wijaya@teknusantara.co.id',
|
||||||
|
telephone: '+62 24 3332211',
|
||||||
|
youPayable: 42100000,
|
||||||
|
theyPayable: 15600000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
photo: '',
|
||||||
|
name: 'Dewi Sartika',
|
||||||
|
company: 'UD Sumber Rejeki',
|
||||||
|
email: 'dewi.sartika@sumberrejeki.net',
|
||||||
|
telephone: '+62 31 4445566',
|
||||||
|
youPayable: 9800000,
|
||||||
|
theyPayable: 22100000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
photo: '',
|
||||||
|
name: 'Rudi Hermawan',
|
||||||
|
company: 'PT Indah Karya Persada',
|
||||||
|
email: 'rudi.hermawan@indahkarya.co.id',
|
||||||
|
telephone: '+62 274 7778899',
|
||||||
|
youPayable: 33250000,
|
||||||
|
theyPayable: 5400000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
photo: '',
|
||||||
|
name: 'Maya Sari',
|
||||||
|
company: 'CV Harapan Jaya',
|
||||||
|
email: 'maya.sari@harapanjaya.com',
|
||||||
|
telephone: '+62 261 1112233',
|
||||||
|
youPayable: 16900000,
|
||||||
|
theyPayable: 28750000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
photo: '',
|
||||||
|
name: 'Andi Prasetyo',
|
||||||
|
company: 'PT Cipta Mandiri Utama',
|
||||||
|
email: 'andi.prasetyo@ciptamandiri.co.id',
|
||||||
|
telephone: '+62 411 5556677',
|
||||||
|
youPayable: 21400000,
|
||||||
|
theyPayable: 11850000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
photo: '',
|
||||||
|
name: 'Fitri Ramadhani',
|
||||||
|
company: 'UD Barokah Sukses',
|
||||||
|
email: 'fitri.ramadhani@barokahsukses.net',
|
||||||
|
telephone: '+62 751 9998877',
|
||||||
|
youPayable: 12650000,
|
||||||
|
theyPayable: 19300000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
photo: '',
|
||||||
|
name: 'Agus Setiawan',
|
||||||
|
company: 'PT Nusantara Prima',
|
||||||
|
email: 'agus.setiawan@nusantaraprima.co.id',
|
||||||
|
telephone: '+62 541 3334455',
|
||||||
|
youPayable: 38800000,
|
||||||
|
theyPayable: 7200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
photo: '',
|
||||||
|
name: 'Rina Sulastri',
|
||||||
|
company: 'CV Mitra Sejati',
|
||||||
|
email: 'rina.sulastri@mitrasejati.com',
|
||||||
|
telephone: '+62 778 6667788',
|
||||||
|
youPayable: 14300000,
|
||||||
|
theyPayable: 24950000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 11,
|
||||||
|
photo: '',
|
||||||
|
name: 'Bambang Kurniawan',
|
||||||
|
company: 'PT Harmoni Bersama',
|
||||||
|
email: 'bambang.kurniawan@harmonibersama.co.id',
|
||||||
|
telephone: '+62 21 7779900',
|
||||||
|
youPayable: 29150000,
|
||||||
|
theyPayable: 13750000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 12,
|
||||||
|
photo: '',
|
||||||
|
name: 'Indah Permatasari',
|
||||||
|
company: 'UD Cahaya Abadi',
|
||||||
|
email: 'indah.permatasari@cahayaabadi.net',
|
||||||
|
telephone: '+62 361 2223344',
|
||||||
|
youPayable: 8900000,
|
||||||
|
theyPayable: 31200000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 13,
|
||||||
|
photo: '',
|
||||||
|
name: 'Dodi Supriadi',
|
||||||
|
company: 'PT Karya Gemilang',
|
||||||
|
email: 'dodi.supriadi@karyagemilang.co.id',
|
||||||
|
telephone: '+62 721 8889911',
|
||||||
|
youPayable: 36700000,
|
||||||
|
theyPayable: 9100000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 14,
|
||||||
|
photo: '',
|
||||||
|
name: 'Lestari Wulandari',
|
||||||
|
company: 'CV Anugrah Sentosa',
|
||||||
|
email: 'lestari.wulandari@anugrahsentosa.com',
|
||||||
|
telephone: '+62 741 4445566',
|
||||||
|
youPayable: 19850000,
|
||||||
|
theyPayable: 16400000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 15,
|
||||||
|
photo: '',
|
||||||
|
name: 'Hendra Gunawan',
|
||||||
|
company: 'PT Surya Mandala',
|
||||||
|
email: 'hendra.gunawan@suryamandala.co.id',
|
||||||
|
telephone: '+62 511 7778800',
|
||||||
|
youPayable: 27300000,
|
||||||
|
theyPayable: 21650000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 16,
|
||||||
|
photo: '',
|
||||||
|
name: 'Nurul Hidayah',
|
||||||
|
company: 'UD Rezeki Barokah',
|
||||||
|
email: 'nurul.hidayah@rezekibarokah.net',
|
||||||
|
telephone: '+62 431 1112200',
|
||||||
|
youPayable: 15200000,
|
||||||
|
theyPayable: 26800000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 17,
|
||||||
|
photo: '',
|
||||||
|
name: 'Teguh Prasetyo',
|
||||||
|
company: 'PT Dinamika Persada',
|
||||||
|
email: 'teguh.prasetyo@dinamikapersada.co.id',
|
||||||
|
telephone: '+62 62 5556600',
|
||||||
|
youPayable: 32900000,
|
||||||
|
theyPayable: 12150000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 18,
|
||||||
|
photo: '',
|
||||||
|
name: 'Sri Mulyani',
|
||||||
|
company: 'CV Berkah Mulia',
|
||||||
|
email: 'sri.mulyani@berkahmulia.com',
|
||||||
|
telephone: '+62 771 3337799',
|
||||||
|
youPayable: 11700000,
|
||||||
|
theyPayable: 29400000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 19,
|
||||||
|
photo: '',
|
||||||
|
name: 'Joko Widodo',
|
||||||
|
company: 'PT Makmur Sejahtera',
|
||||||
|
email: 'joko.widodo@makmursejahtera.co.id',
|
||||||
|
telephone: '+62 341 8882211',
|
||||||
|
youPayable: 24800000,
|
||||||
|
theyPayable: 18350000
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 20,
|
||||||
|
photo: '',
|
||||||
|
name: 'Ratna Sari',
|
||||||
|
company: 'UD Sari Indah',
|
||||||
|
email: 'ratna.sari@sariindah.net',
|
||||||
|
telephone: '+62 717 9990011',
|
||||||
|
youPayable: 17950000,
|
||||||
|
theyPayable: 23600000
|
||||||
|
}
|
||||||
|
]
|
||||||
10
src/types/apps/vendorTypes.ts
Normal file
10
src/types/apps/vendorTypes.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
export type VendorType = {
|
||||||
|
id: number
|
||||||
|
photo: string
|
||||||
|
name: string
|
||||||
|
company: string
|
||||||
|
email: string
|
||||||
|
telephone: string
|
||||||
|
youPayable: number
|
||||||
|
theyPayable: number
|
||||||
|
}
|
||||||
595
src/views/apps/vendor/list/AddVendorDrawer.tsx
vendored
Normal file
595
src/views/apps/vendor/list/AddVendorDrawer.tsx
vendored
Normal file
@ -0,0 +1,595 @@
|
|||||||
|
// React Imports
|
||||||
|
import { useState } from 'react'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import Button from '@mui/material/Button'
|
||||||
|
import Drawer from '@mui/material/Drawer'
|
||||||
|
import IconButton from '@mui/material/IconButton'
|
||||||
|
import MenuItem from '@mui/material/MenuItem'
|
||||||
|
import Typography from '@mui/material/Typography'
|
||||||
|
import Divider from '@mui/material/Divider'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
import Box from '@mui/material/Box'
|
||||||
|
|
||||||
|
// Third-party Imports
|
||||||
|
import { useForm, Controller } from 'react-hook-form'
|
||||||
|
|
||||||
|
// Types Imports
|
||||||
|
import type { VendorType } from '@/types/apps/vendorTypes'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import CustomTextField from '@core/components/mui/TextField'
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
open: boolean
|
||||||
|
handleClose: () => void
|
||||||
|
vendorData?: VendorType[]
|
||||||
|
setData: (data: VendorType[]) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
type FormValidateType = {
|
||||||
|
name: string
|
||||||
|
company: string
|
||||||
|
email: string
|
||||||
|
telephone: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// Vars
|
||||||
|
const initialData = {
|
||||||
|
name: '',
|
||||||
|
company: '',
|
||||||
|
email: '',
|
||||||
|
telephone: ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const AddVendorDrawer = (props: Props) => {
|
||||||
|
// Props
|
||||||
|
const { open, handleClose, vendorData, setData } = props
|
||||||
|
|
||||||
|
// States
|
||||||
|
const [showMore, setShowMore] = useState(false)
|
||||||
|
const [alamatPengiriman, setAlamatPengiriman] = useState([''])
|
||||||
|
const [rekeningBank, setRekeningBank] = useState([
|
||||||
|
{
|
||||||
|
bank: '',
|
||||||
|
cabang: '',
|
||||||
|
namaPemilik: '',
|
||||||
|
nomorRekening: ''
|
||||||
|
}
|
||||||
|
])
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
const {
|
||||||
|
control,
|
||||||
|
reset: resetForm,
|
||||||
|
handleSubmit,
|
||||||
|
formState: { errors }
|
||||||
|
} = useForm<FormValidateType>({
|
||||||
|
defaultValues: initialData
|
||||||
|
})
|
||||||
|
|
||||||
|
// Functions untuk alamat
|
||||||
|
const handleTambahAlamat = () => {
|
||||||
|
setAlamatPengiriman([...alamatPengiriman, ''])
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleHapusAlamat = (index: number) => {
|
||||||
|
if (alamatPengiriman.length > 1) {
|
||||||
|
const newAlamat = alamatPengiriman.filter((_, i) => i !== index)
|
||||||
|
setAlamatPengiriman(newAlamat)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChangeAlamat = (index: number, value: string) => {
|
||||||
|
const newAlamat = [...alamatPengiriman]
|
||||||
|
newAlamat[index] = value
|
||||||
|
setAlamatPengiriman(newAlamat)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Functions untuk rekening bank
|
||||||
|
const handleTambahRekening = () => {
|
||||||
|
setRekeningBank([
|
||||||
|
...rekeningBank,
|
||||||
|
{
|
||||||
|
bank: '',
|
||||||
|
cabang: '',
|
||||||
|
namaPemilik: '',
|
||||||
|
nomorRekening: ''
|
||||||
|
}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleHapusRekening = (index: number) => {
|
||||||
|
if (rekeningBank.length > 1) {
|
||||||
|
const newRekening = rekeningBank.filter((_, i) => i !== index)
|
||||||
|
setRekeningBank(newRekening)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChangeRekening = (index: number, field: string, value: string) => {
|
||||||
|
const newRekening = [...rekeningBank]
|
||||||
|
newRekening[index] = { ...newRekening[index], [field]: value }
|
||||||
|
setRekeningBank(newRekening)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSubmit = (data: FormValidateType) => {
|
||||||
|
const newVendor: VendorType = {
|
||||||
|
id: (vendorData?.length && vendorData?.length + 1) || 1,
|
||||||
|
photo: '',
|
||||||
|
name: data.name,
|
||||||
|
company: data.company,
|
||||||
|
email: data.email,
|
||||||
|
telephone: data.telephone,
|
||||||
|
youPayable: 0,
|
||||||
|
theyPayable: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
setData([...(vendorData ?? []), newVendor])
|
||||||
|
handleClose()
|
||||||
|
resetForm(initialData)
|
||||||
|
setAlamatPengiriman([''])
|
||||||
|
setRekeningBank([
|
||||||
|
{
|
||||||
|
bank: '',
|
||||||
|
cabang: '',
|
||||||
|
namaPemilik: '',
|
||||||
|
nomorRekening: ''
|
||||||
|
}
|
||||||
|
])
|
||||||
|
setShowMore(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleReset = () => {
|
||||||
|
handleClose()
|
||||||
|
resetForm(initialData)
|
||||||
|
setAlamatPengiriman([''])
|
||||||
|
setRekeningBank([
|
||||||
|
{
|
||||||
|
bank: '',
|
||||||
|
cabang: '',
|
||||||
|
namaPemilik: '',
|
||||||
|
nomorRekening: ''
|
||||||
|
}
|
||||||
|
])
|
||||||
|
setShowMore(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Drawer
|
||||||
|
open={open}
|
||||||
|
anchor='right'
|
||||||
|
variant='temporary'
|
||||||
|
onClose={handleReset}
|
||||||
|
ModalProps={{ keepMounted: true }}
|
||||||
|
sx={{
|
||||||
|
'& .MuiDrawer-paper': {
|
||||||
|
width: { xs: 300, sm: 400 },
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Sticky Header */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'sticky',
|
||||||
|
top: 0,
|
||||||
|
zIndex: 10,
|
||||||
|
backgroundColor: 'background.paper',
|
||||||
|
borderBottom: 1,
|
||||||
|
borderColor: 'divider'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='flex items-center justify-between plb-5 pli-6'>
|
||||||
|
<Typography variant='h5'>Tambah Vendor Baru</Typography>
|
||||||
|
<IconButton size='small' onClick={handleReset}>
|
||||||
|
<i className='tabler-x text-2xl text-textPrimary' />
|
||||||
|
</IconButton>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Scrollable Content */}
|
||||||
|
<Box sx={{ flex: 1, overflowY: 'auto' }}>
|
||||||
|
<form id='vendor-form' onSubmit={handleSubmit(data => onSubmit(data))}>
|
||||||
|
<div className='flex flex-col gap-6 p-6'>
|
||||||
|
{/* Tampilkan Foto */}
|
||||||
|
<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>
|
||||||
|
<Typography variant='body2' className='mb-2'>
|
||||||
|
Nama <span className='text-red-500'>*</span>
|
||||||
|
</Typography>
|
||||||
|
<Grid container spacing={2}>
|
||||||
|
<Grid size={4}>
|
||||||
|
<CustomTextField select fullWidth defaultValue='Tuan'>
|
||||||
|
<MenuItem value='Tuan'>Tuan</MenuItem>
|
||||||
|
<MenuItem value='Nyonya'>Nyonya</MenuItem>
|
||||||
|
<MenuItem value='Nona'>Nona</MenuItem>
|
||||||
|
<MenuItem value='Bapak'>Bapak</MenuItem>
|
||||||
|
<MenuItem value='Ibu'>Ibu</MenuItem>
|
||||||
|
</CustomTextField>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={8}>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* 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 */}
|
||||||
|
<Controller
|
||||||
|
name='email'
|
||||||
|
control={control}
|
||||||
|
rules={{ required: true }}
|
||||||
|
render={({ field }) => (
|
||||||
|
<CustomTextField
|
||||||
|
{...field}
|
||||||
|
fullWidth
|
||||||
|
type='email'
|
||||||
|
label='Email'
|
||||||
|
placeholder='Email'
|
||||||
|
{...(errors.email && { error: true, helperText: 'Field ini wajib diisi.' })}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Tampilkan selengkapnya */}
|
||||||
|
{!showMore && (
|
||||||
|
<div className='flex items-center gap-3' onClick={() => setShowMore(true)}>
|
||||||
|
<i className='tabler-plus text-blue-500' />
|
||||||
|
<Typography variant='body1' color='primary' className='cursor-pointer'>
|
||||||
|
Tampilkan selengkapnya
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Konten tambahan yang muncul saat showMore true */}
|
||||||
|
{showMore && (
|
||||||
|
<>
|
||||||
|
{/* Alamat Penagihan */}
|
||||||
|
<div>
|
||||||
|
<Typography variant='body2' className='mb-2'>
|
||||||
|
Alamat Penagihan
|
||||||
|
</Typography>
|
||||||
|
<CustomTextField fullWidth placeholder='Alamat Penagihan' multiline rows={3} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Negara */}
|
||||||
|
<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>
|
||||||
|
<Typography variant='body2' className='mb-2'>
|
||||||
|
NPWP
|
||||||
|
</Typography>
|
||||||
|
<CustomTextField fullWidth placeholder='NPWP' />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Alamat Pengiriman */}
|
||||||
|
<div>
|
||||||
|
<Typography variant='body2' className='mb-2 font-medium'>
|
||||||
|
Alamat Pengiriman
|
||||||
|
</Typography>
|
||||||
|
{alamatPengiriman.map((alamat, index) => (
|
||||||
|
<div key={index} className='flex items-center gap-3 mb-3'>
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
placeholder='Alamat'
|
||||||
|
multiline
|
||||||
|
rows={2}
|
||||||
|
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>
|
||||||
|
|
||||||
|
{/* Tambah Alamat Pengiriman */}
|
||||||
|
<div className='flex items-center gap-3' onClick={handleTambahAlamat}>
|
||||||
|
<i className='tabler-plus text-blue-500' />
|
||||||
|
<Typography variant='body1' color='primary' className='cursor-pointer'>
|
||||||
|
Tambah Alamat Pengiriman
|
||||||
|
</Typography>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</form>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Sticky Footer */}
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
position: 'sticky',
|
||||||
|
bottom: 0,
|
||||||
|
zIndex: 10,
|
||||||
|
backgroundColor: 'background.paper',
|
||||||
|
borderTop: 1,
|
||||||
|
borderColor: 'divider',
|
||||||
|
p: 3
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className='flex items-center gap-4'>
|
||||||
|
<Button variant='contained' type='submit' form='vendor-form'>
|
||||||
|
Simpan
|
||||||
|
</Button>
|
||||||
|
<Button variant='tonal' color='error' onClick={() => handleReset()}>
|
||||||
|
Batal
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
</Drawer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AddVendorDrawer
|
||||||
109
src/views/apps/vendor/list/TableFilters.tsx
vendored
Normal file
109
src/views/apps/vendor/list/TableFilters.tsx
vendored
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
// React Imports
|
||||||
|
import { useState, useEffect } from 'react'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import CardContent from '@mui/material/CardContent'
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
import MenuItem from '@mui/material/MenuItem'
|
||||||
|
|
||||||
|
// Type Imports
|
||||||
|
import type { VendorType } from '@/types/apps/vendorTypes'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import CustomTextField from '@core/components/mui/TextField'
|
||||||
|
|
||||||
|
const TableFilters = ({ setData, tableData }: { setData: (data: VendorType[]) => void; tableData?: VendorType[] }) => {
|
||||||
|
// States
|
||||||
|
const [company, setCompany] = useState('')
|
||||||
|
const [payableRange, setPayableRange] = useState('')
|
||||||
|
const [searchTerm, setSearchTerm] = useState('')
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const filteredData = tableData?.filter(vendor => {
|
||||||
|
// Filter by company type
|
||||||
|
if (company && !vendor.company.toLowerCase().includes(company.toLowerCase())) return false
|
||||||
|
|
||||||
|
// Filter by payable range (You Payable)
|
||||||
|
if (payableRange) {
|
||||||
|
const payable = vendor.youPayable
|
||||||
|
switch (payableRange) {
|
||||||
|
case 'low':
|
||||||
|
if (payable >= 20000000) return false
|
||||||
|
break
|
||||||
|
case 'medium':
|
||||||
|
if (payable < 20000000 || payable >= 35000000) return false
|
||||||
|
break
|
||||||
|
case 'high':
|
||||||
|
if (payable < 35000000) return false
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Filter by search term (name, company, email)
|
||||||
|
if (searchTerm) {
|
||||||
|
const search = searchTerm.toLowerCase()
|
||||||
|
const matchesName = vendor.name.toLowerCase().includes(search)
|
||||||
|
const matchesCompany = vendor.company.toLowerCase().includes(search)
|
||||||
|
const matchesEmail = vendor.email.toLowerCase().includes(search)
|
||||||
|
|
||||||
|
if (!matchesName && !matchesCompany && !matchesEmail) return false
|
||||||
|
}
|
||||||
|
|
||||||
|
return true
|
||||||
|
})
|
||||||
|
|
||||||
|
setData(filteredData || [])
|
||||||
|
}, [company, payableRange, searchTerm, tableData, setData])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CardContent>
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12, sm: 4 }}>
|
||||||
|
<CustomTextField
|
||||||
|
select
|
||||||
|
fullWidth
|
||||||
|
id='select-company'
|
||||||
|
value={company}
|
||||||
|
onChange={e => setCompany(e.target.value)}
|
||||||
|
slotProps={{
|
||||||
|
select: { displayEmpty: true }
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem value=''>Pilih Jenis Perusahaan</MenuItem>
|
||||||
|
<MenuItem value='PT'>PT (Perseroan Terbatas)</MenuItem>
|
||||||
|
<MenuItem value='CV'>CV (Commanditaire Vennootschap)</MenuItem>
|
||||||
|
<MenuItem value='UD'>UD (Usaha Dagang)</MenuItem>
|
||||||
|
</CustomTextField>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12, sm: 4 }}>
|
||||||
|
<CustomTextField
|
||||||
|
select
|
||||||
|
fullWidth
|
||||||
|
id='select-payable-range'
|
||||||
|
value={payableRange}
|
||||||
|
onChange={e => setPayableRange(e.target.value)}
|
||||||
|
slotProps={{
|
||||||
|
select: { displayEmpty: true }
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MenuItem value=''>Pilih Rentang Hutang</MenuItem>
|
||||||
|
<MenuItem value='low'>Rendah (< 20M)</MenuItem>
|
||||||
|
<MenuItem value='medium'>Sedang (20M - 35M)</MenuItem>
|
||||||
|
<MenuItem value='high'>Tinggi (> 35M)</MenuItem>
|
||||||
|
</CustomTextField>
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12, sm: 4 }}>
|
||||||
|
<CustomTextField
|
||||||
|
fullWidth
|
||||||
|
id='search-vendor'
|
||||||
|
placeholder='Cari berdasarkan nama, perusahaan, atau email'
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={e => setSearchTerm(e.target.value)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</CardContent>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default TableFilters
|
||||||
80
src/views/apps/vendor/list/VendorListCards.tsx
vendored
Normal file
80
src/views/apps/vendor/list/VendorListCards.tsx
vendored
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
// MUI Imports
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
// Type Imports
|
||||||
|
import type { UserDataType } from '@components/card-statistics/HorizontalWithSubtitle'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import HorizontalWithSubtitle from '@components/card-statistics/HorizontalWithSubtitle'
|
||||||
|
|
||||||
|
// Vars
|
||||||
|
const data: UserDataType[] = [
|
||||||
|
{
|
||||||
|
title: 'Hutang Anda',
|
||||||
|
stats: 'Rp 542.340.000',
|
||||||
|
avatarIcon: 'tabler-credit-card',
|
||||||
|
avatarColor: 'error',
|
||||||
|
trend: 'positive',
|
||||||
|
trendNumber: '12%',
|
||||||
|
subtitle: 'Total yang harus dibayar'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Piutang Anda',
|
||||||
|
stats: 'Rp 387.250.000',
|
||||||
|
avatarIcon: 'tabler-wallet',
|
||||||
|
avatarColor: 'success',
|
||||||
|
trend: 'positive',
|
||||||
|
trendNumber: '8%',
|
||||||
|
subtitle: 'Total yang harus dibayar vendor'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Pembayaran Diterima',
|
||||||
|
stats: 'Rp 156.800.000',
|
||||||
|
avatarIcon: 'tabler-arrow-down-circle',
|
||||||
|
avatarColor: 'success',
|
||||||
|
trend: 'positive',
|
||||||
|
trendNumber: '23%',
|
||||||
|
subtitle: 'Bulan ini'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Pembayaran Dikirim',
|
||||||
|
stats: 'Rp 89.450.000',
|
||||||
|
avatarIcon: 'tabler-arrow-up-circle',
|
||||||
|
avatarColor: 'warning',
|
||||||
|
trend: 'negative',
|
||||||
|
trendNumber: '5%',
|
||||||
|
subtitle: 'Bulan ini'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Hutang Jatuh Tempo',
|
||||||
|
stats: 'Rp 67.890.000',
|
||||||
|
avatarIcon: 'tabler-clock-exclamation',
|
||||||
|
avatarColor: 'error',
|
||||||
|
trend: 'negative',
|
||||||
|
trendNumber: '15%',
|
||||||
|
subtitle: 'Pembayaran terlambat'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Piutang Tertunda',
|
||||||
|
stats: 'Rp 134.560.000',
|
||||||
|
avatarIcon: 'tabler-clock-dollar',
|
||||||
|
avatarColor: 'info',
|
||||||
|
trend: 'positive',
|
||||||
|
trendNumber: '28%',
|
||||||
|
subtitle: 'Menunggu dari vendor'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const VendorListCards = () => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
{data.map((item, i) => (
|
||||||
|
<Grid key={i} size={{ xs: 12, sm: 6, md: 4 }}>
|
||||||
|
<HorizontalWithSubtitle {...item} />
|
||||||
|
</Grid>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default VendorListCards
|
||||||
365
src/views/apps/vendor/list/VendorListTable.tsx
vendored
Normal file
365
src/views/apps/vendor/list/VendorListTable.tsx
vendored
Normal file
@ -0,0 +1,365 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
// React Imports
|
||||||
|
import { useEffect, useState, useMemo } from 'react'
|
||||||
|
|
||||||
|
// Next Imports
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { useParams } from 'next/navigation'
|
||||||
|
|
||||||
|
// MUI Imports
|
||||||
|
import Card from '@mui/material/Card'
|
||||||
|
import CardHeader from '@mui/material/CardHeader'
|
||||||
|
import Button from '@mui/material/Button'
|
||||||
|
import Typography from '@mui/material/Typography'
|
||||||
|
import Chip from '@mui/material/Chip'
|
||||||
|
import Checkbox from '@mui/material/Checkbox'
|
||||||
|
import IconButton from '@mui/material/IconButton'
|
||||||
|
import { styled } from '@mui/material/styles'
|
||||||
|
import TablePagination from '@mui/material/TablePagination'
|
||||||
|
import type { TextFieldProps } from '@mui/material/TextField'
|
||||||
|
import MenuItem from '@mui/material/MenuItem'
|
||||||
|
|
||||||
|
// Third-party Imports
|
||||||
|
import classnames from 'classnames'
|
||||||
|
import { rankItem } from '@tanstack/match-sorter-utils'
|
||||||
|
import {
|
||||||
|
createColumnHelper,
|
||||||
|
flexRender,
|
||||||
|
getCoreRowModel,
|
||||||
|
useReactTable,
|
||||||
|
getFilteredRowModel,
|
||||||
|
getFacetedRowModel,
|
||||||
|
getFacetedUniqueValues,
|
||||||
|
getFacetedMinMaxValues,
|
||||||
|
getPaginationRowModel,
|
||||||
|
getSortedRowModel
|
||||||
|
} from '@tanstack/react-table'
|
||||||
|
import type { ColumnDef, FilterFn } from '@tanstack/react-table'
|
||||||
|
import type { RankingInfo } from '@tanstack/match-sorter-utils'
|
||||||
|
|
||||||
|
// Type Imports
|
||||||
|
import type { ThemeColor } from '@core/types'
|
||||||
|
import type { VendorType } from '@/types/apps/vendorTypes'
|
||||||
|
import type { Locale } from '@configs/i18n'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import TableFilters from './TableFilters'
|
||||||
|
import AddVendorDrawer from './AddVendorDrawer'
|
||||||
|
import OptionMenu from '@core/components/option-menu'
|
||||||
|
import TablePaginationComponent from '@components/TablePaginationComponent'
|
||||||
|
import CustomTextField from '@core/components/mui/TextField'
|
||||||
|
import CustomAvatar from '@core/components/mui/Avatar'
|
||||||
|
|
||||||
|
// Util Imports
|
||||||
|
import { getInitials } from '@/utils/getInitials'
|
||||||
|
import { getLocalizedUrl } from '@/utils/i18n'
|
||||||
|
|
||||||
|
// Style Imports
|
||||||
|
import tableStyles from '@core/styles/table.module.css'
|
||||||
|
import { formatCurrency } from '@/utils/transform'
|
||||||
|
|
||||||
|
declare module '@tanstack/table-core' {
|
||||||
|
interface FilterFns {
|
||||||
|
fuzzy: FilterFn<unknown>
|
||||||
|
}
|
||||||
|
interface FilterMeta {
|
||||||
|
itemRank: RankingInfo
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
type VendorTypeWithAction = VendorType & {
|
||||||
|
action?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// Styled Components
|
||||||
|
const Icon = styled('i')({})
|
||||||
|
|
||||||
|
const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
|
||||||
|
// Rank the item
|
||||||
|
const itemRank = rankItem(row.getValue(columnId), value)
|
||||||
|
|
||||||
|
// Store the itemRank info
|
||||||
|
addMeta({
|
||||||
|
itemRank
|
||||||
|
})
|
||||||
|
|
||||||
|
// Return if the item should be filtered in/out
|
||||||
|
return itemRank.passed
|
||||||
|
}
|
||||||
|
|
||||||
|
const DebouncedInput = ({
|
||||||
|
value: initialValue,
|
||||||
|
onChange,
|
||||||
|
debounce = 500,
|
||||||
|
...props
|
||||||
|
}: {
|
||||||
|
value: string | number
|
||||||
|
onChange: (value: string | number) => void
|
||||||
|
debounce?: number
|
||||||
|
} & Omit<TextFieldProps, 'onChange'>) => {
|
||||||
|
// States
|
||||||
|
const [value, setValue] = useState(initialValue)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setValue(initialValue)
|
||||||
|
}, [initialValue])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const timeout = setTimeout(() => {
|
||||||
|
onChange(value)
|
||||||
|
}, debounce)
|
||||||
|
|
||||||
|
return () => clearTimeout(timeout)
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [value])
|
||||||
|
|
||||||
|
return <CustomTextField {...props} value={value} onChange={e => setValue(e.target.value)} />
|
||||||
|
}
|
||||||
|
|
||||||
|
// Column Definitions
|
||||||
|
const columnHelper = createColumnHelper<VendorTypeWithAction>()
|
||||||
|
|
||||||
|
const VendorListTable = ({ tableData }: { tableData?: VendorType[] }) => {
|
||||||
|
// States
|
||||||
|
const [addVendorOpen, setAddVendorOpen] = useState(false)
|
||||||
|
const [rowSelection, setRowSelection] = useState({})
|
||||||
|
const [data, setData] = useState(...[tableData])
|
||||||
|
const [filteredData, setFilteredData] = useState(data)
|
||||||
|
const [globalFilter, setGlobalFilter] = useState('')
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
const { lang: locale } = useParams()
|
||||||
|
|
||||||
|
const columns = useMemo<ColumnDef<VendorTypeWithAction, any>[]>(
|
||||||
|
() => [
|
||||||
|
{
|
||||||
|
id: 'select',
|
||||||
|
header: ({ table }) => (
|
||||||
|
<Checkbox
|
||||||
|
{...{
|
||||||
|
checked: table.getIsAllRowsSelected(),
|
||||||
|
indeterminate: table.getIsSomeRowsSelected(),
|
||||||
|
onChange: table.getToggleAllRowsSelectedHandler()
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<Checkbox
|
||||||
|
{...{
|
||||||
|
checked: row.getIsSelected(),
|
||||||
|
disabled: !row.getCanSelect(),
|
||||||
|
indeterminate: row.getIsSomeSelected(),
|
||||||
|
onChange: row.getToggleSelectedHandler()
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
},
|
||||||
|
columnHelper.accessor('name', {
|
||||||
|
header: 'Vendor',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className='flex items-center gap-4'>
|
||||||
|
{getAvatar({ photo: row.original.photo, name: row.original.name })}
|
||||||
|
<div className='flex flex-col'>
|
||||||
|
<Link href={getLocalizedUrl(`/apps/vendor/view/${row.original.id}`, locale as Locale)}>
|
||||||
|
<Typography color='primary' className='font-medium cursor-pointer hover:underline'>
|
||||||
|
{row.original.name}
|
||||||
|
</Typography>
|
||||||
|
</Link>
|
||||||
|
<Typography variant='body2'>{row.original.email}</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('company', {
|
||||||
|
header: 'Perusahaan',
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className='flex items-center gap-2'>
|
||||||
|
<Icon className='tabler-building' sx={{ color: 'var(--mui-palette-primary-main)' }} />
|
||||||
|
<Typography color='text.primary'>{row.original.company}</Typography>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('telephone', {
|
||||||
|
header: 'Telepon',
|
||||||
|
cell: ({ row }) => <Typography color='text.primary'>{row.original.telephone}</Typography>
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('youPayable', {
|
||||||
|
header: () => <div className='text-right'>Anda Hutang</div>,
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className='text-right'>
|
||||||
|
<Typography color='text.primary' className='font-medium'>
|
||||||
|
{formatCurrency(row.original.youPayable)}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}),
|
||||||
|
columnHelper.accessor('theyPayable', {
|
||||||
|
header: () => <div className='text-right'>Mereka Hutang</div>,
|
||||||
|
cell: ({ row }) => (
|
||||||
|
<div className='text-right'>
|
||||||
|
<Typography color='text.primary' className='font-medium'>
|
||||||
|
{formatCurrency(row.original.theyPayable)}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
],
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
[data, filteredData]
|
||||||
|
)
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data: filteredData as VendorType[],
|
||||||
|
columns,
|
||||||
|
filterFns: {
|
||||||
|
fuzzy: fuzzyFilter
|
||||||
|
},
|
||||||
|
state: {
|
||||||
|
rowSelection,
|
||||||
|
globalFilter
|
||||||
|
},
|
||||||
|
initialState: {
|
||||||
|
pagination: {
|
||||||
|
pageSize: 10
|
||||||
|
}
|
||||||
|
},
|
||||||
|
enableRowSelection: true,
|
||||||
|
globalFilterFn: fuzzyFilter,
|
||||||
|
onRowSelectionChange: setRowSelection,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
onGlobalFilterChange: setGlobalFilter,
|
||||||
|
getFilteredRowModel: getFilteredRowModel(),
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
|
getPaginationRowModel: getPaginationRowModel(),
|
||||||
|
getFacetedRowModel: getFacetedRowModel(),
|
||||||
|
getFacetedUniqueValues: getFacetedUniqueValues(),
|
||||||
|
getFacetedMinMaxValues: getFacetedMinMaxValues()
|
||||||
|
})
|
||||||
|
|
||||||
|
const getAvatar = (params: Pick<VendorType, 'photo' | 'name'>) => {
|
||||||
|
const { photo, name } = params
|
||||||
|
|
||||||
|
if (photo) {
|
||||||
|
return <CustomAvatar src={photo} size={34} />
|
||||||
|
} else {
|
||||||
|
return <CustomAvatar size={34}>{getInitials(name as string)}</CustomAvatar>
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Card>
|
||||||
|
<CardHeader title='Filter' className='pbe-4' />
|
||||||
|
<TableFilters setData={setFilteredData} tableData={data} />
|
||||||
|
<div className='flex justify-between flex-col items-start md:flex-row md:items-center p-6 border-bs gap-4'>
|
||||||
|
<CustomTextField
|
||||||
|
select
|
||||||
|
value={table.getState().pagination.pageSize}
|
||||||
|
onChange={e => table.setPageSize(Number(e.target.value))}
|
||||||
|
className='max-sm:is-full sm:is-[70px]'
|
||||||
|
>
|
||||||
|
<MenuItem value='10'>10</MenuItem>
|
||||||
|
<MenuItem value='25'>25</MenuItem>
|
||||||
|
<MenuItem value='50'>50</MenuItem>
|
||||||
|
</CustomTextField>
|
||||||
|
<div className='flex flex-col sm:flex-row max-sm:is-full items-start sm:items-center gap-4'>
|
||||||
|
<DebouncedInput
|
||||||
|
value={globalFilter ?? ''}
|
||||||
|
onChange={value => setGlobalFilter(String(value))}
|
||||||
|
placeholder='Cari Vendor'
|
||||||
|
className='max-sm:is-full'
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
color='secondary'
|
||||||
|
variant='tonal'
|
||||||
|
startIcon={<i className='tabler-upload' />}
|
||||||
|
className='max-sm:is-full'
|
||||||
|
>
|
||||||
|
Ekspor
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant='contained'
|
||||||
|
startIcon={<i className='tabler-plus' />}
|
||||||
|
onClick={() => setAddVendorOpen(!addVendorOpen)}
|
||||||
|
className='max-sm:is-full'
|
||||||
|
>
|
||||||
|
Tambah Vendor Baru
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='overflow-x-auto'>
|
||||||
|
<table className={tableStyles.table}>
|
||||||
|
<thead>
|
||||||
|
{table.getHeaderGroups().map(headerGroup => (
|
||||||
|
<tr key={headerGroup.id}>
|
||||||
|
{headerGroup.headers.map(header => (
|
||||||
|
<th key={header.id}>
|
||||||
|
{header.isPlaceholder ? null : (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={classnames({
|
||||||
|
'flex items-center': header.column.getIsSorted(),
|
||||||
|
'cursor-pointer select-none': header.column.getCanSort()
|
||||||
|
})}
|
||||||
|
onClick={header.column.getToggleSortingHandler()}
|
||||||
|
>
|
||||||
|
{flexRender(header.column.columnDef.header, header.getContext())}
|
||||||
|
{{
|
||||||
|
asc: <i className='tabler-chevron-up text-xl' />,
|
||||||
|
desc: <i className='tabler-chevron-down text-xl' />
|
||||||
|
}[header.column.getIsSorted() as 'asc' | 'desc'] ?? null}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</thead>
|
||||||
|
{table.getFilteredRowModel().rows.length === 0 ? (
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td colSpan={table.getVisibleFlatColumns().length} className='text-center'>
|
||||||
|
Tidak ada data tersedia
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
) : (
|
||||||
|
<tbody>
|
||||||
|
{table
|
||||||
|
.getRowModel()
|
||||||
|
.rows.slice(0, table.getState().pagination.pageSize)
|
||||||
|
.map(row => {
|
||||||
|
return (
|
||||||
|
<tr key={row.id} className={classnames({ selected: row.getIsSelected() })}>
|
||||||
|
{row.getVisibleCells().map(cell => (
|
||||||
|
<td key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
)}
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<TablePaginationComponent
|
||||||
|
pageIndex={table.getState().pagination.pageIndex}
|
||||||
|
pageSize={table.getState().pagination.pageSize}
|
||||||
|
totalCount={table.getFilteredRowModel().rows.length}
|
||||||
|
onPageChange={(_, page) => {
|
||||||
|
table.setPageIndex(page)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
<AddVendorDrawer
|
||||||
|
open={addVendorOpen}
|
||||||
|
handleClose={() => setAddVendorOpen(!addVendorOpen)}
|
||||||
|
vendorData={data}
|
||||||
|
setData={setData}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default VendorListTable
|
||||||
24
src/views/apps/vendor/list/index.tsx
vendored
Normal file
24
src/views/apps/vendor/list/index.tsx
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
// MUI Imports
|
||||||
|
import Grid from '@mui/material/Grid2'
|
||||||
|
|
||||||
|
// Type Imports
|
||||||
|
import type { VendorType } from '@/types/apps/vendorTypes'
|
||||||
|
|
||||||
|
// Component Imports
|
||||||
|
import VendorListTable from './VendorListTable'
|
||||||
|
import VendorListCards from './VendorListCards'
|
||||||
|
|
||||||
|
const VendorList = ({ vendorData }: { vendorData?: VendorType[] }) => {
|
||||||
|
return (
|
||||||
|
<Grid container spacing={6}>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<VendorListCards />
|
||||||
|
</Grid>
|
||||||
|
<Grid size={{ xs: 12 }}>
|
||||||
|
<VendorListTable tableData={vendorData} />
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default VendorList
|
||||||
Loading…
x
Reference in New Issue
Block a user