import React, { useState, useEffect } from 'react' import DatePicker from 'react-datepicker' import NumberFormat from 'react-number-format' import { Inertia } from '@inertiajs/inertia' import { usePrevious } from 'react-use' import { toast } from 'react-toastify' import { Head, useForm } from '@inertiajs/inertia-react' import Authenticated from '@/Layouts/Authenticated' import Pagination from '@/Components/Pagination' import CloseIcon from '@/Components/CloseIcon' import EmployeeSelectInput from '@/Selects/EmployeeSelectInput' import { formatIDR } from '@/utils' export default function Create(props) { const { data: products, links } = props.products const { _search, _page } = props const { data, setData, post, errors, processing } = useForm({ date: new Date(), employee_id: null, employee_name: '', cuts: 0, bonus: 0, items: [], }) const [loading, setLoading] = useState(false) const [search, setSearch] = useState(_search) const preValue = usePrevious(search) const handleSelectedEmployee = (employee) => { setData({ ...data, employee_id: employee.id, employee_name: `${employee.name} - ${employee.whatsapp}`, }) } const addItem = (product) => { const itemExist = data.items.find(item => item.id === product.id) if(itemExist) { setData( 'items', data.items.map(item => { if(item.id === product.id){ return { ...item, quantity: +item.quantity + 1, } } else { return item } }) ) return } setData('items', data.items.concat({ ...product, product_id: product.id, quantity: 1 })) } const remoteItem = (product) => { setData('items', data.items.filter(item => item.id !== product.id)) } const handleReset = () => { setData({ employee_id: null, employee_name: '', cuts: 0, bonus: 0, items: [], }) } const handleSubmit = () => { if (data.items.length <= 0) { alert('barang belum di pilih') return } post(route('payrolls.store'), { onSuccess: () => Promise.all([ handleReset(), toast.success('The Data has been saved'), ]), }) } const itemAmount = data.items.reduce((amt, item) => amt + (+item.quantity * +item.price), 0) const totalAmount = itemAmount - +data.cuts + +data.bonus useEffect(() => { if (preValue) { setLoading(true) Inertia.get( route(route().current()), { q: search, page: _page }, { replace: true, preserveState: true, onSuccess: () => { setLoading(false) }, } ) } }, [search]) return ( Gaji } >
setSearch(e.target.value) } placeholder="Search" />
{products.map((product) => (
addItem(product)} >
{product.name}
{formatIDR(product.price)}
))}
setData('date', date)} format="dd/mm/yyyy" className={`input input-bordered ${ errors.date ? 'input-error' : '' }`} nextMonthButtonLabel=">" previousMonthButtonLabel="<" /> {errors.date && ( )}
{data.items.map((item) => ( ))}
Barang Qty Subtotal
{item.name} {formatIDR(item.quantity)} {formatIDR( item.quantity * item.price )} remoteItem(item) } />
{errors.cuts && ( )}
{errors.bonus && ( )}
Simpan
Cetak
) }