import React, { useEffect, useState } from 'react' import { router } from '@inertiajs/react' import { usePrevious } from 'react-use' import { Head } from '@inertiajs/react' import { Button, Dropdown } from 'flowbite-react' import { HiEye, HiTrash } from 'react-icons/hi' import { useModalState } from '@/hooks' import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout' import Pagination from '@/Components/Pagination' import ModalConfirm from '@/Components/ModalConfirm' import SearchInput from '@/Components/SearchInput' import { formatDate, formatIDR, hasPermission } from '@/utils' import CustomerSelectionInput from '../Customer/SelectionInput' import FormInputDateRanger from '@/Components/FormInputDateRange' export default function Sale(props) { const { query: { links, data }, _startDate, _endDate, auth, } = props const [customer, setCustomer] = useState(null) const [date, setDate] = useState({ startDate: _startDate, endDate: _endDate, }) const [search, setSearch] = useState('') const preValue = usePrevious(`${search}${customer}${date}`) const confirmModal = useModalState() const toggleFormModal = () => { router.get(route('sale.create')) } const viewDetail = (sale) => { router.get(route('sale.show', sale)) } const handleDeleteClick = (sale) => { confirmModal.setData(sale) confirmModal.toggle() } const onDelete = () => { if (confirmModal.data !== null) { router.delete(route('sale.destroy', confirmModal.data.id)) } } const params = { q: search, customer_id: customer, ...date } useEffect(() => { if (preValue) { let filterDate = {} if (date.endDate !== null) { filterDate = date } router.get( route(route().current()), { q: search, customer_id: customer, ...filterDate }, { replace: true, preserveState: true, } ) } }, [search, customer, date]) const canCreate = hasPermission(auth, 'create-sale') const canUpdate = hasPermission(auth, 'update-sale') const canDelete = hasPermission(auth, 'delete-sale') const canViewInvoice = hasPermission(auth, 'view-invoice') return (
{canCreate && ( )}
setSearch(e.target.value)} value={search} />
setCustomer(id)} /> { setDate(date) }} placeholder="Tanggal" />
{data.map((sale) => ( ))}
Kode Tanggal Pelanggan Total
{sale.code} {formatDate(sale.date)} {sale.customer?.name} {formatIDR(sale.total)} {canViewInvoice && ( Invoice )} {canUpdate && ( viewDetail( sale ) } >
Detail
)} {canDelete && ( handleDeleteClick( sale ) } >
Hapus
)}
) }