import { NavLink } from "react-router-dom"; import { useEffect, useState } from 'react'; import { observer } from "mobx-react"; import { toJS } from "mobx"; import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio, Modal } from 'antd'; import { useStore } from '@/stores/StoreContext.js'; const { Title } = Typography; function Newest() { const reservationListColumns = [ { title: 'Reference number', dataIndex: 'referenceNumber', key: 'Reference number', render: (text, record) => {text}, }, { title: 'Arrival date', dataIndex: 'arrivalDate', key: 'Arrival date', }, { title: 'Pax', key: 'Pax', dataIndex: 'pax' }, { title: 'Status', key: 'Status', dataIndex: 'status' }, { title: 'Reservation date', key: 'Reservation date', dataIndex: 'reservationDate' }, { title: 'Guide', key: 'Guide', dataIndex: 'guide', render: guideRender }, ]; function guideRender(text, record) { if (record.guide === '') { return ( ); } else { return ( {record.guide} ); } } const { reservationStore } = useStore(); const { reservationList } = reservationStore; const [isModalOpen, setIsModalOpen] = useState(false); const showModal = () => { setIsModalOpen(true); }; const handleOk = () => { setIsModalOpen(false); }; const handleCancel = () => { setIsModalOpen(false); }; useEffect(() => { console.info('Newest.useEffect'); }, []); return ( <> Guide Newest Reservations Arrival Date
'Reservations without the tour guide information will be highlighted in red if the arrival date is within 3 days.'} bordered pagination={{ position: ['bottomCenter'], current: 1, pageSize: 10, total: 200 }} columns={reservationListColumns} dataSource={toJS(reservationList)} /> ); } export default observer(Newest);