import React, { useState, useEffect } from 'react' import { usePrevious } from "react-use"; import { Inertia } from "@inertiajs/inertia"; import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'; import Pagination from "@/Components/Pagination"; import { DatePickerRangeInput } from "@/Components/DatePickerInput"; import { useModalState } from "@/Hook"; import { Head } from '@inertiajs/inertia-react'; import { formatDate } from "@/Utils"; import { toast } from 'react-toastify'; export default function Dashboard(props) { const { _startDate, _endDate, _limit } = props const [startDate, setStartDate] = useState(_startDate) const [endDate, setEndDate] = useState(_endDate) const { data: bookings, links } = props.booking; const [bookingsChecked, setBookingsChecked] = useState( bookings.map((booking) => { return { ...booking, isChecked: false, }; }) ); const [search, setSearch] = useState(""); const [limit, setLimit] = useState(_limit) const preValue = usePrevious(`${search}-${startDate}-${endDate}-${limit}`); const [booking, setBooking] = useState(null); const [ids, setIds] = useState({}); const formModal = useModalState(false); const handleEdit = (booking = null) => { setBooking(booking); formModal.toggle(); }; const confirmModal = useModalState(false); const handleDelete = (booking) => { confirmModal.setData(booking); confirmModal.toggle(); }; const detailModal = useModalState(false); const handleDetail = (booking = null) => { setBooking(booking); detailModal.toggle(); }; const bookingModal = useModalState(false); const handleBooking = () => { bookingModal.toggle(); }; const onDelete = () => { const booking = confirmModal.data; if (booking != null) { Inertia.delete( route("monitoring-booking.destroy", booking), { onSuccess: () => toast.success("item delete"), } ); } }; const handleCheckedCheckbox = (e) => { setBookingsChecked( bookingsChecked.map((booking) => { if (booking.id === e.target.defaultValue * 1) { return { ...booking, isChecked: !booking.isChecked, }; } else { return booking; } }) ); }; const handleMouseOverExport = () => { let params = bookingsChecked .map((booking) => { if (booking.isChecked) { return booking.id; } }) .filter((isChecked) => { return isChecked !== undefined; }); setIds(params); }; const handleCheckAll = (e) => { setBookingsChecked((prevBookingsChecked) => { return prevBookingsChecked.map((booking) => { return { ...booking, isChecked: e.target.checked, }; }); }); }; const params = { ids }; useEffect(() => { setBookingsChecked( bookings.map((booking) => { return { ...booking, isChecked: false, }; }) ); }, [bookings]); useEffect(() => { if (preValue) { Inertia.get( route(route().current()), { q: search, startDate, endDate, limit }, { replace: true, preserveState: true, } ) } }, [search, startDate, endDate, limit]) return (

Tambah

Import Excel

Export Excel

Terakhir diperbarui: {props.last_updated ? formatDate(props.last_updated).format('DD/MM/Y hh:mm') : 'Belum ada pembaruan'}

{bookingsChecked.map((booking) => ( ))}

handleCheckAll(e)} />	Master AWB	Flight Number	Departure	Destination	Booked	Packaging	Used	Status	Opsi
handleCheckedCheckbox(e)} checked={booking.isChecked} value={booking.id} />	{booking.master_awb}	{booking.flight_number}	{formatDate(booking.departure).format('DD/MM/yyyy')}	{booking.destination}	{booking.booked}	{booking.kemasan}	{booking.used}	{+booking.is_available === 0 ? 'Available' : 'Closed'}

); }