diff --git a/src/assets/global.css b/src/assets/global.css index 327b392..c668291 100644 --- a/src/assets/global.css +++ b/src/assets/global.css @@ -5,6 +5,11 @@ background: rgba(255, 255, 255, 0.3); } +.reservation-highlight { + color: rgba(255, 255, 255, 1); + background-color: rgba(255, 0, 0, 0.6); +} + #error-page { display: flex; flex-direction: column; diff --git a/src/views/Login.jsx b/src/views/Login.jsx index 99db392..1dff00b 100644 --- a/src/views/Login.jsx +++ b/src/views/Login.jsx @@ -108,7 +108,7 @@ function Login() { }} > diff --git a/src/views/reservation/Newest.jsx b/src/views/reservation/Newest.jsx index 2ab4143..e669741 100644 --- a/src/views/reservation/Newest.jsx +++ b/src/views/reservation/Newest.jsx @@ -3,7 +3,9 @@ import { useState, useEffect } from 'react'; import { observer } from "mobx-react"; import { toJS } from "mobx"; import { Row, Col, Space, Button, Table, Input, Typography, DatePicker, Radio, Modal, App, Select } from 'antd'; +import dayjs from "dayjs"; import { useStore } from '@/stores/StoreContext.js'; +import { formatDate, isEmpty } from "@/utils/commons"; import { DATE_PRESETS } from "@/config"; import { formatDate, isNotEmpty } from "@/utils/commons"; @@ -15,12 +17,19 @@ function Newest() { title: 'Reference number', dataIndex: 'referenceNumber', key: 'Reference number', - render: (text, record) => {text}, + render: (text, record) => { + const requiredHighlight = dayjs(record.arrivalDate).add(2, 'day').isBefore(dayjs(), 'day') && isEmpty(record.guide); + const linkClassName = requiredHighlight ? 'reservation-highlight' : ''; + return ( + {text} + ) + }, }, { title: 'Arrival date', dataIndex: 'arrivalDate', key: 'Arrival date', + render: (text, record) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD')), }, { title: 'Pax', @@ -36,7 +45,7 @@ function Newest() { title: 'Res. sending date', key: 'Reservation date', dataIndex: 'reservationDate', - render: (text, record) => (isNotEmpty(text) ? formatDate(new Date(text)) : ""), + render: (text, record) => (isEmpty(text) ? '' : dayjs(text).format('YYYY-MM-DD')), }, { title: 'Guide', @@ -79,7 +88,7 @@ function Newest() { reservationStore.setupCityGuide(city.cityId, guideId); }} onSearch={(value) => { - console.log('search:', value); + // console.log('search:', value); }} filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())