GHHub/src/views/reservation/Detail.jsx

import { useParams, useNavigate } from "react-router-dom";
import { useEffect } from 'react';
import { observer } from "mobx-react";
import { toJS } from "mobx";
import { Row, Col, Space, Button, Table, Input, Typography, List, App } from 'antd';
import { useStore } from '@/stores/StoreContext.js';

const { Title } = Typography;
const { TextArea } = Input;

const itineraryListColumns = [
  {
    title: 'Day',
    dataIndex: 'day',
    key: 'day',
  },
  {
    title: 'Place & Transport',
    dataIndex: 'placeTransport',
    key: 'placeTransport',
  },
  {
    title: 'Today’s Activities',
    dataIndex: 'todayActivities',
    key: 'todayActivities',
  },
  {
    title: 'Accommodation',
    dataIndex: 'accommodation',
    key: 'accommodation',
  },
  {
    title: 'Meals',
    dataIndex: 'meals',
    key: 'meals',
  },
];

function Detail() {
  const navigate = useNavigate();
  const { notification } = App.useApp();
  const { reservationId } = useParams();
  const { reservationStore } = useStore();
  const { itineraryList, customerNames, customerList, reservationDetail } = reservationStore;

  useEffect(() => {   
    reservationStore.fetchReservation(reservationId)
      .catch(ex => {
        notification.error({
          message: `Notification`,
          description: ex.message,
          placement: 'top',
          duration: 4,
        });
      });
  }, [reservationId]);

  return (
    <Space direction="vertical" style={{ width: '100%' }}>
    <Row gutter={{ md: 24 }}>
        <Col span={20}>
      <Title level={4}>Reference Number: {reservationDetail.referenceNumber}; Arrival date: {reservationDetail.arrivalDate}; Tour guide: {reservationDetail.tourGuide}</Title>
        </Col>
        <Col span={4}>
      <Button type="link" onClick={() => navigate('/reservation/newest')}>Back</Button>
        </Col>
      </Row>
      <Row>
        <Col span={2}>
      <Button type="link" onClick={() => navigate(`/reservation/${reservationId}/print`)}>Booking information</Button>
        </Col>
        <Col span={2}>
      <Button type="link" onClick={() => navigate(`/reservation/${reservationId}/name-card`)}>Name Card</Button>
        </Col>
      </Row>
      <Row gutter={{ md: 24 }}>
        <Col span={24}>
      <Title level={5}>Itinerary Overview</Title>
        </Col>
      </Row>
      <Row>
        <Col span={24}>
        <Table 
          pagination={false}
          dataSource={toJS(itineraryList)} columns={itineraryListColumns} 
        />
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <List
            header={<><Title level={5}>Customer Names (Full name as it appears on passport)</Title><span>{customerNames}</span></>}
            itemLayout="horizontal"
            dataSource={toJS(customerList)}
            renderItem={(item, index) => (
              <List.Item>
                <List.Item.Meta
                  title={<span>{index + 1}. {item.title}</span>}
                  description={item.description}
                />
              </List.Item>
            )}
          />
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <TextArea rows={4} placeholder="如贵社对计划中的行程安排有任何建议请联系组团人本人。中华游欢迎大家对我们的工作提出合理化建议。" maxLength={6} />
        </Col>
      </Row>
      
      <Button type="primary" onClick={() => console.info('submit')}>Submit</Button>
    </Space>
  );
}

export default observer(Detail);