From 8dc92df46faa3149f974c0c4f8698eac5fe26aeb Mon Sep 17 00:00:00 2001
From: Jimmy Liow <18777396951@163.com>
Date: Tue, 18 Apr 2023 10:48:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E4=B8=8D=E9=9C=80=E8=A6=81?=
 =?UTF-8?q?=E7=9A=84=E6=9F=A5=E8=AF=A2=E6=9D=A1=E4=BB=B6=20=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E8=AF=A6=E7=BB=86=E9=A1=B5=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/reservation/Detail.jsx | 59 ++++++++++++++++++++++++++++++--
 src/views/reservation/Newest.jsx | 24 ++-----------
 2 files changed, 60 insertions(+), 23 deletions(-)

diff --git a/src/views/reservation/Detail.jsx b/src/views/reservation/Detail.jsx
index 87e5297..82c0dc3 100644
--- a/src/views/reservation/Detail.jsx
+++ b/src/views/reservation/Detail.jsx
@@ -3,10 +3,11 @@ import { useEffect } from 'react';
 import { observer } from "mobx-react";
 import { toJS } from "mobx";
 import moment from "moment";
-import { Row, Col, Space, Button, Table, Tag, Typography, DatePicker } from 'antd';
+import { Row, Col, Space, Button, Table, Input, Typography, List } from 'antd';
 import { useStore } from '../../stores/StoreContext.js';
 
 const { Title } = Typography;
+const { TextArea } = Input;
 
 const dataSource = [
   {
@@ -71,6 +72,25 @@ const columns = [
   },
 ];
 
+const customerList = [
+  {
+    title: 'Crane / Gemma Chelse',
+    description: '性别:男 生日:2002-07-02 国籍:英国 护照号:559489179 护照有效期:2029-03-11',
+  },
+  {
+    title: 'McCracken / Ryan Lee',
+    description: '性别:男 生日:1964-11-21 国籍:英国 护照号:126793728 护照有效期:2031-08-03',
+  },
+  {
+    title: 'Ramlakhan / Darryl',
+    description: '性别:男 生日:1983-04-16 国籍:特立尼达和多巴哥 护照号:TB591985 护照有效期:2027-11-12',
+  },
+  {
+    title: 'Ramlakhan / Reanne',
+    description: '性别:女 生日:1983-12-16 国籍:特立尼达和',
+  },
+];
+
 function Detail() {
   const navigate = useNavigate();
   const { reservationId } = useParams();
@@ -85,17 +105,52 @@ function Detail() {
     <Space direction="vertical" style={{ width: '100%' }}>
     <Row gutter={{ md: 24 }}>
         <Col span={20}>
-      <Title level={4}>Reservation Detail 中华游111029-N111025076</Title>
+      <Title level={4}>Reference number: 中华游111029-N111025076; Arrival date: 2023-12-15; Guide: Giffigan</Title>
         </Col>
         <Col span={4}>
       <Button type="link" onClick={() => navigate('/reservation/newest')}>Return</Button>
         </Col>
       </Row>
+      <Row>
+        <Col span={2}>
+      <Button type="link" onClick={() => console.info('')}>Print Reservation</Button>
+        </Col>
+        <Col span={2}>
+      <Button type="link" onClick={() => console.info('')}>Print Feedback</Button>
+        </Col>
+        <Col span={2}>
+      <Button type="link" onClick={() => console.info('')}>Print Customer Card</Button>
+        </Col>
+      </Row>
       <Row>
         <Col span={24}>
         <Table dataSource={dataSource} columns={columns} />
         </Col>
       </Row>
+      <Row>
+        <Col span={24}>
+          <List
+            header={<Title level={5}>Customer List</Title>}
+            itemLayout="horizontal"
+            dataSource={customerList}
+            renderItem={(item, index) => (
+              <List.Item>
+                <List.Item.Meta
+                  title={<a href="https://ant.design">{index + 1}. {item.title}</a>}
+                  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>
   );
 }
diff --git a/src/views/reservation/Newest.jsx b/src/views/reservation/Newest.jsx
index c07cab9..117869a 100644
--- a/src/views/reservation/Newest.jsx
+++ b/src/views/reservation/Newest.jsx
@@ -54,7 +54,7 @@ function Newest() {
     <Space direction="vertical" style={{ width: '100%' }}>
       <Title level={3}>Newest Reservations</Title>
       <Row gutter={{ md: 24 }}>
-        <Col span={5}>
+        <Col span={4}>
             <Input placeholder="Reference number" />
         </Col>
         <Col span={6}>
@@ -63,29 +63,11 @@ function Newest() {
             <DatePicker.RangePicker
               allowClear={true}
               inputReadOnly={true}
-              placeholder={['Arrival Date', '']}
-            />
-          </Space>
-        </Col>
-        <Col span={8}>
-          <Space direction="horizontal">
-          快速选择
-            <Radio.Group
-              options={[
-                { label: '未确认', value: '1' },
-                { label: '已确认', value: '2' },
-                { label: '未录入导游', value: '3' },
-                { label: '有变更', value: '4' },
-                { label: '已取消', value: '5' },
-                { label: '全部', value: '6' },
-              ]}
-              value={'6'}
-              optionType="button"
-              buttonStyle="solid"
+              placeholder={['From', 'Thru']}
             />
           </Space>
         </Col>
-        <Col span={4}>
+        <Col span={14}>
           <Button type='primary' onClick={() => reservationStore.fetchRecent()}>Search</Button>
         </Col>
       </Row>