From e68e0ddd7dc5962759de8b7c1dcd2ad11bacd69b Mon Sep 17 00:00:00 2001
From: Jimmy Liow <lyj@hainatravel.com>
Date: Wed, 3 Jul 2024 10:06:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=A2=E8=AE=A1=E5=88=92=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=20Tailwind=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/locales/zh/account.json   |  1 +
 src/views/account/Management.jsx | 10 ++++-----
 src/views/reservation/Detail.jsx | 36 +++++++++++++++++---------------
 src/views/reservation/Newest.jsx | 19 +++++++----------
 4 files changed, 32 insertions(+), 34 deletions(-)

diff --git a/public/locales/zh/account.json b/public/locales/zh/account.json
index 3849f07..a1d78c4 100644
--- a/public/locales/zh/account.json
+++ b/public/locales/zh/account.json
@@ -23,6 +23,7 @@
   "detail": "详细信息",
   "username": "用户名",
   "realname": "姓名",
+  "travelAgency": "供应商",
   "travelAgencyName": "供应商名称",
   "email": "邮箱地址",
   "lastLogin": "最后登陆时间",
diff --git a/src/views/account/Management.jsx b/src/views/account/Management.jsx
index 7e0d236..4a32a66 100644
--- a/src/views/account/Management.jsx
+++ b/src/views/account/Management.jsx
@@ -23,14 +23,14 @@ function Management() {
       title: t('account:realname'),
       dataIndex: 'realname',
     },
-    {
-      title: t('account:travelAgencyName'),
-      dataIndex: 'travelAgencyName',
-    },
     {
       title: t('account:email'),
       dataIndex: 'email',
     },
+    {
+      title: t('account:travelAgency'),
+      dataIndex: 'travelAgencyName',
+    },
     {
       title: t('account:roleName'),
       dataIndex: 'role'
@@ -283,7 +283,7 @@ function Management() {
           <Input />
         </Form.Item>
         <Form.Item
-          label={t('account:travelAgencyName')}
+          label={t('account:travelAgency')}
           name='travelAgencyId'
           rules={[
             {
diff --git a/src/views/reservation/Detail.jsx b/src/views/reservation/Detail.jsx
index 2e6f8f8..c9b62d9 100644
--- a/src/views/reservation/Detail.jsx
+++ b/src/views/reservation/Detail.jsx
@@ -1,19 +1,19 @@
-import { useParams } from "react-router-dom"
+import { useParams } from 'react-router-dom'
 import { useEffect, useState } from 'react'
 import { Row, Col, Space, Button, Table, Input, Typography, Modal, Tag, App } from 'antd'
 import {
   FileOutlined
-} from '@ant-design/icons';
+} from '@ant-design/icons'
 import { usingStorage } from '@/hooks/usingStorage'
 import useReservationStore from '@/stores/Reservation'
 import { useTranslation } from 'react-i18next'
 import BackBtn from '@/components/BackBtn'
 
-const { Title, Paragraph } = Typography;
-const { TextArea } = Input;
+const { Title, Paragraph } = Typography
+const { TextArea } = Input
 
 function Detail() {
-  const { t } = useTranslation();
+  const { t } = useTranslation()
 
   const confirmationListColumns = [
     {
@@ -43,9 +43,9 @@ function Detail() {
   ];
 
   function detailTextRender(text, confirm) {
-    const formattedText = confirm.PCI_ConfirmText;//.replace(/\;/g, "\n——————————————————————\n");
+    const formattedText = confirm.PCI_ConfirmText;//.replace(/\;/g, '\n——————————————————————\n');
     return (
-      <div style={{whiteSpace: 'pre-line'}}>
+      <div className='whitespace-pre-line'>
       {formattedText}
       </div>
     );
@@ -56,7 +56,7 @@ function Detail() {
       <>
       {confirm.attachmentList.map(attch => {
         return (
-          <Tag bordered={false} icon={<FileOutlined />}><a href={attch.file_url} target="_blank">{attch.file_name}</a></Tag>
+          <Tag bordered={false} icon={<FileOutlined />}><a href={attch.file_url} target='_blank'>{attch.file_name}</a></Tag>
         )}
       )}
       </>
@@ -65,7 +65,7 @@ function Detail() {
 
   function confirmRender(text, confirm) {
     return (
-      <Button type="link" onClick={() => showConfirmModal(confirm)}>{t('Confirm')}</Button>
+      <Button type='link' onClick={() => showConfirmModal(confirm)}>{t('Confirm')}</Button>
     );
   }
 
@@ -96,7 +96,7 @@ function Detail() {
 
   const showConfirmModal = (confirm) => {
     setIsModalOpen(true);
-    const formattedText = confirm.PCI_ConfirmText;//.replace(/\;/g, "\n——————————————————————\n");
+    const formattedText = confirm.PCI_ConfirmText;//.replace(/\;/g, '\n——————————————————————\n');
     setConfirmText(formattedText);
     selectConfirmation(confirm);
   };
@@ -140,7 +140,7 @@ function Detail() {
         <Title level={4}>{t('group:ConfirmationDetails')}</Title>
         <Paragraph>
           <blockquote>
-            <div style={{whiteSpace: 'pre-line'}}>
+            <div className='whitespace-pre-line'>
               {confirmText}
             </div>
           </blockquote>
@@ -155,7 +155,7 @@ function Detail() {
           }}
         />
       </Modal>
-    <Space direction="vertical" style={{ width: '100%' }}>
+    <Space direction='vertical' className='w-full'>
     <Row gutter={{ md: 24 }}>
         <Col span={20}>
       <Title level={4}>{t('group:RefNo')}: {reservationDetail.referenceNumber}; {t('group:ArrivalDate')}: {reservationDetail.arrivalDate};</Title>
@@ -165,17 +165,19 @@ function Detail() {
         </Col>
       </Row>
       <Row gutter={{ md: 24 }}>
-        <Col span={12} style={{height: '100%'}} >
-        <iframe id="msdoc-iframe-reservation" title="msdoc-iframe-reservation" src={reservationPreviewUrl} frameBorder="0" style={{ width: '100%', height: '600px' }}></iframe>
+        <Col span={12} className='w-full'>
+        <iframe id='msdoc-iframe-reservation' title='msdoc-iframe-reservation'
+        src={reservationPreviewUrl} frameBorder='0' style={{height: '600px'}} className='w-full'></iframe>
           <Button type='link' target='_blank' href={reservationUrl}>{t('Download')} Itinerary</Button>
         </Col>
-        <Col span={12} style={{height: '100%'}} >
-        <iframe id="msdoc-iframe-name-card" title="msdoc-iframe-name-card" src={nameCardPreviewUrl} frameBorder="0" style={{ width: '100%', height: '600px' }}></iframe>
+        <Col span={12} className='w-full'>
+        <iframe id='msdoc-iframe-name-card' title='msdoc-iframe-name-card'
+        src={nameCardPreviewUrl} frameBorder='0' style={{height: '600px'}} className='w-full'></iframe>
           <Button type='link' target='_blank' href={nameCardUrl}>{t('Download')} Name Card</Button>
         </Col>
       </Row>
       <Row>
-        <Col span={24}><Space direction="vertical" style={{ width: '100%' }}>
+        <Col span={24}><Space direction='vertical' className='w-full'>
           <Table
             bordered
             loading={dataLoading}
diff --git a/src/views/reservation/Newest.jsx b/src/views/reservation/Newest.jsx
index 2e37c5e..b2330ab 100644
--- a/src/views/reservation/Newest.jsx
+++ b/src/views/reservation/Newest.jsx
@@ -30,7 +30,7 @@ function Newest() {
     {
       title: t('group:ArrivalDate'),
       dataIndex: 'arrivalDate',
-			render: (text, record) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD')),
+			render: (text) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD')),
     },
     {
       title: t('group:Pax'),
@@ -43,7 +43,7 @@ function Newest() {
     {
       title: t('group:ResSendingDate'),
       dataIndex: 'reservationDate',
-			render: (text, record) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD')),
+			render: (text) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD')),
     },
     {
       title: t('group:Guide'),
@@ -52,7 +52,7 @@ function Newest() {
     },
   ];
 
-  function guideRender(text, reservation) {
+  function guideRender(_, reservation) {
     if (reservation.guide === '') {
       return (
         <Space size='middle'>
@@ -69,13 +69,11 @@ function Newest() {
     }
   }
 
-  function cityGuideRender(text, city) {
+  function cityGuideRender(_, city) {
     return (
       <Select
         showSearch
-        style={{
-          width: 280,
-        }}
+        className='w-72'
         variant='borderless'
         allowClear
         placeholder='Select a guide'
@@ -84,9 +82,6 @@ function Newest() {
         onChange={(guideId) => {
           setupCityGuide(city.cityId, guideId);
         }}
-        onSearch={(value) => {
-          // console.log('search:', value);
-        }}
         filterOption={(input, option) =>
           (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
         }
@@ -177,7 +172,7 @@ function Newest() {
         centered
         open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
       >
-        <Space direction='vertical' style={{ width: '100%' }}>
+        <Space direction='vertical' className='w-full'>
           <Row>
             <Col span={24}>
               <Table
@@ -203,7 +198,7 @@ function Newest() {
           </Row>
         </Space>
       </Modal>
-      <Space direction='vertical' style={{ width: '100%' }}>
+      <Space direction='vertical' className='w-full'>
         <Title level={3}></Title>
         <SearchForm
           fieldsConfig={{